@import url("https://fonts.googleapis.com/css2?family=Kreon:wght@300;400;500;600;700&display=swap"); /* Kreon Font */

/* ################################################## NOTES ################################################## */

/*
  Display
    block = los margenes colapsan, los elementos se colocan uno a la vez en vertical (direccion del bloque)
      pero dos links <a/> pegados se mostraran uno arriba del otro

    inline-block = los margenes no colapsan (se suman y respetan tal cual), los elementos se pueden colocar
      en la misma linea de escritura (horizontalmente), dos links <a/> se mostraran pegados uno tras otro

    flow-root = funciona para desborde de elementos y cosas

    -webkit-inline-box = hace lo mismo que el `inline`, pero sin importar los displays de los `children`

    inline = se mantine en linea con el texto, se pega a la linea anterior y el siguiente se pega a este.
    block = es como el inline, pero se aisla en un parrafo para si solo. Lleva un "salto de linea" al final

*/

/* ################################################## GENERALS ################################################## */

/* ------------------------- VARIABLES */
html {
  --color-primary: #5e292a;
  --color-primary-opaque: #5e292a40;
  --color-secondary: #e48d0c;
  --color-secondary-opaque: #e48d0c40;
  --color-tertiary: #cccccc;
  --color-tertiary-opaque: #cccccc40;

  --color-white: #e9e9e9;
  --color-black: #2e2e2e;

  --color-table-bg-head: hsl(0, 0%, 50%);
  --color-table-bg-cell: hsl(0, 0%, 80%);
  --color-table-bg-column: hsl(0, 0%, 65%);

  --color-table-border-head: hsl(0, 0%, 40%);
  --color-table-border-cell: hsl(0, 0%, 70%);
  --color-table-border-column: hsl(0, 0%, 55%);

  --color-table-hover-head: hsl(0, 0%, 60%);
  --color-table-hover-cell: hsl(0, 0%, 90%);
  --color-table-hover-column: hsl(0, 0%, 75%);
}

/* ------------------------- RESET */
* {
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
  padding: 0;
  margin: 0;
  box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
}

/* ------------------------- RESET DOCUMENT */
html,
body {
  scroll-behavior: smooth;
  color: var(--color-black);
  font-family: "Kreon", Arial, Helvetica, sans-serif, serif;
  background-color: var(--color-white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ################################################## TITLES ################################################## */

/* ------------------------- HEADER */
.header,
.footer {
  background-color: var(--color-primary);
  font-size: 2rem;
  padding: 1em;
  text-align: center;
  color: var(--color-white);
  background-image: url(./brand.png);
  background-blend-mode: screen;
  background-size: contain;
  background-repeat: no-repeat;
  position: sticky;
  top: 0%;
  min-height: 3rem;
}

.footer {
  background-image: none;
  margin-top: auto;
  font-size: 1rem;
  text-align: left;
  position: initial;
}

/* ------------------------- TITLE 1 */
.title-1,
.title-2 {
  font-size: 1.75rem;
  padding: 0.5em 0;
  text-align: center;
  width: 100%;
  color: var(--color-secondary);
}

/* ------------------------- TITLE 2 */
.title-2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-black);
}

.wrap {
  display: flex;
  width: 100%;
}

.sidebar {
  width: 14%;
  display: flex;
  flex-direction: column;
  background-color: var(--color-tertiary);
  align-items: center;
  padding: 2em 0;
}

.sidebar > * {
  margin: 1rem 0;
}

/* ################################################## PILLS ################################################## */

/* ------------------------- GENERAL */
.pill-primary,
.pill-secondary {
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 1.5rem;
  margin: 1.5rem auto;
  text-align: center;
  padding: 0.5em 1em;
  border-radius: 1.5rem;
  width: 90%;
}

/* ------------------------- GENERAL INNER */
.pill-primary > *,
.pill-secondary > * {
  margin: 0.5rem 0;
  display: inline-block;
}

/* ------------------------- PILL SECONDARY */
.pill-secondary {
  text-align: left;
  background-color: var(--color-tertiary);
  color: var(--color-black);
}

/* ################################################## CONTROLS ################################################## */

/* ------------------------- CONTROLS BAR */
.controls-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/* ------------------------- CONTROLS BAR - VERTICAL */
.controls-bar.vertical {
  flex-direction: column;
}

/* ------------------------- GENERAL INPUTS */
input,
select,
button {
  margin: 0.5rem;
  padding: 0.25em 0.75em;
  border-radius: 2.5rem;
  border: var(--color-primary) 3px solid;
  color: var(--color-black);
}

/* ------------------------- INPUTS & SELECTS */
input,
select {
  min-width: 10rem;
  width: 10em;
  max-width: 240px;
}

/* ------------------------- BUTTON */
button {
  padding: 0.5em 1em;
  background-color: transparent;
  color: var(--color-primary);
}

/* ------------------------- HOVER */
button:hover:not(:disabled) {
  cursor: pointer;
  background-color: var(--color-primary-opaque);
}

/* ------------------------- ACTIVE */
button:active {
  opacity: 0.6;
}

/* ------------------------- BUTTON SECONDARY */
.pill-primary button,
.secondary {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

#toggle {
  position: absolute;
  font-size: 1.25rem;
  right: 2.5%;
  top: 20%;
}

/* ------------------------- BUTTON SECONDARY HOVER */
.pill-primary button:hover:not(:disabled),
.secondary:hover:not(:disabled) {
  background-color: var(--color-secondary-opaque);
}

/* ------------------------- EVERY - FOCUS VISIBLE */
:focus-visible {
  outline: var(--color-secondary) solid 3px;
}

/* ------------------------- EVERY - DISABLED */
:disabled {
  background-color: var(--color-white);
  opacity: 0.5 !important;
  cursor: wait !important;
  /* background: repeating-linear-gradient(
    45deg,
    var(--color-secondary),
    var(--color-secondary) 5px,
    #e5e5f7 5px,
    #e5e5f7 25px
  ); */
}

/* ------------------------- OPTIONS */
option {
  font-size: 1rem;
  color: var(--color-primary);
}

/* ------------------------- OPTIONS */
#admin > div {
  flex-basis: 100%;
  text-align: center;
}

/* ################################################## SCHEDULE TABLE ################################################## */

/* ------------------------- TABLA GENERAL */
#schedule {
  margin: 2rem auto;
  width: 90%;
  background: var(--color-secondary);
  font-size: 2.75rem;
  text-align: center;
  border-spacing: 0;
  border: var(--color-primary) 6px solid;
  border-radius: 0.5rem;
  background-color: var(--color-secondary);
  /* table-layout: fixed; */
}

/* ------------------------- ABSOLUTAMENTE TODO LO QUE ESTE DENTRO */
#schedule * {
  padding: 0.25em;
  vertical-align: middle;
  cursor: grab;
  font-size: 1rem;
  user-select: none;
}

/* ------------------------- ENCABEZADOS */
#schedule th {
  background-color: var(--color-table-bg-head);
  border: var(--color-table-border-head) solid 3px;
  font-size: 1.5em;
}

/* ------------------------- TODAS LAS CELDAS */
#schedule td {
  background-color: var(--color-table-bg-cell);
  border: var(--color-table-border-cell) solid 3px;
  white-space: pre-line;
  width: 18.5%;
}

/* ------------------------- TODAS LAS FILAS */
#schedule tr {
  height: 5em;
}

/* ------------------------- LA PRIMERA COLUMNA (HORAS) */
#schedule tr > td:first-child {
  background-color: var(--color-table-bg-column);
  border-color: var(--color-table-border-column);
  width: 0%;
}

/* ------------------------- HACER HOVER SOBRE UNA FILA */
#schedule tr:hover td {
  background-color: var(--color-table-hover-column);
  border-color: var(--color-table-hover-column);
}

/* ------------------------- HACER HOVER SOBRE UNA CELDA */
#schedule tr td:hover {
  background-color: var(--color-table-hover-cell);
  border: var(--color-black) 3px solid;
}

/* ######################### SELECCIONAR UNA CELDA */
.selected-cell {
  background-color: var(--color-table-hover-cell) !important;
  border: var(--color-secondary) 3px solid !important;
}

/* ################################################## INFO ################################################## */

/* ------------------------- LIST */
ol {
  font-size: 1.25rem;
  max-height: 250px;
  overflow: auto;
  border: 3px solid var(--color-primary);
  border-radius: 1rem 0 0 1rem;
  padding: 0.75em;
  list-style-position: inside;
  background-color: var(--color-table-bg-column);
}

/* ------------------------- MARKER */
::marker {
  color: var(--color-primary);
  font-weight: 700;
}

/* ################################################## HIDE & HIDDEN ################################################## */
.hidden,
.hide {
  visibility: hidden !important;
  display: none !important;
}

/* ################################################## POPUP ################################################## */

/* ------------------------- GENERAL */
#popup {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/* ------------------------- POPUP BACKGROUND */
#popup-background {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--color-black);
  opacity: 0.5;
}

/* ------------------------- POPUP DIALOG */
#popup-dialog {
  min-width: 40%;
  min-height: 20%;

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 1.5rem 2.75rem;
  margin: auto auto;
  background-color: var(--color-primary);
  z-index: 10;
  border-radius: 16px;
}

/* ------------------------- POPUP CONTENTS */
#popup-content {
  white-space: pre-line;
  color: var(--color-white);
  font-weight: 300;
}

/* ------------------------- POPUP CONTENT - TITLE */
#popup-content > p {
  font-size: 1.75rem;
  text-align: center;
  font-weight: 500;
  color: var(--color-secondary);
  padding: 0.25em 0;
}

/* ------------------------- POPUP CONTENT - LIST TITLE */
#popup-content b {
  color: var(--color-secondary);
  font-weight: 700;
}

/* ------------------------- POPUP CONTENT - LIST */
#popup-content > ul {
  font-size: 1.2rem;
  padding: 0.5em 0;
}

/* ------------------------- POPUP CONTENT - BUTTON */
#popup-button {
  letter-spacing: 3px;
  background-color: var(--color-secondary);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* ------------------------- POPUP CONTENT - BUTTON - HOVER */
#popup-button:hover:not(:disabled) {
  background-color: var(--color-secondary-opaque);
  color: var(--color-secondary);
}

/* ################################################## MEDIA QUERIES ################################################## */

/* ######################### CAGADERO QUE ESTOY HACIENDO ######################### */
@media screen and (max-width: 1500px) {
  html {
    font-size: 17.5px;
  }
}
@media screen and (max-width: 1300px) {
  html {
    font-size: 15.5px;
  }
}
@media screen and (max-width: 1100px) {
  html {
    font-size: 13.5px;
  }
}
@media screen and (max-width: 900px) {
  html {
    font-size: 11.5px;
  }

  .wrap {
    overflow: auto;
  }

  .sidebar {
    display: none;
  }

  .header {
    position: initial;
    background-image: none;
  }

  .header > button {
    top: unset !important;
  }

  .controls-bar {
    flex-wrap: wrap;
    flex-direction: column;
  }
}
@media screen and (max-width: 300px) {
  html {
    font-size: 7.5px;
  }
}

/*              (:  TABLA DE DISPOSITIVOS  :)         
Device	                     | Min Width	 |   Max Width  |
Smartphone Portrait	         |  N/A	       |    375px     |
Smartphone Landscape	       |  376px	     |    667px     |
Tablet Portrait	             |  400px	     |    728px     |
Tablet Landscape	           |  668px	     |    1024px    |
Full HD Screen (i.e. laptop) |	1920px	   |    4096px    |
4K Wide Screen (i.e. desktop)|  4096px	   |    N/A       |
*/

/* ------------------------- MODO IMPRIMIR */
@media print {
  /* ------------------------- OCULTAR CONTROLES */
  #popup,
  #info,
  .pill-primary,
  .pill-secondary,
  .footer,
  #toggle,
  .sidebar {
    visibility: hidden !important;
    display: none !important;
  }

  /* ------------------------- HEADER */
  .header {
    font-size: 24px;
    padding: 12px;
    text-align: center;
    position: initial;
  }

  /* ------------------------- TODOS LOS ELEMENTOS */
  #schedule {
    width: 98%;
    margin: 0 auto;
  }

  /* ------------------------- TODOS LOS ELEMENTOS */
  #schedule * {
    font-size: 10px;
  }

  /* ------------------------- TODAS LAS FILAS */
  #schedule tr {
    height: 5em;
  }

  /* ------------------------- TODAS LAS CELDAS */
  #schedule td {
    background-color: var(--color-table-bg-cell) !important;
    border: var(--color-table-border-cell) solid 3px !important;
  }

  /* ------------------------- LA PRIMERA COLUMNA (HORAS) */
  #schedule tr > td:first-child {
    background-color: var(--color-table-bg-column) !important;
    border-color: var(--color-table-border-column) !important;
  }

  /* ######################### SELECCIONAR UNA CELDA */
  #schedule td.selected-cell {
    background-color: var(--color-table-hover-cell) !important;
    border: var(--color-secondary) 3px solid !important;
  }
}