/* Tablero de «quién está trabajando» — Growmate
 *
 * Herramienta interna, no una landing: una sola columna estrecha, pensada para
 * el teléfono, y en escritorio la misma columna centrada.
 *
 * El azul de marca aparece CUATRO veces por pantalla y no más: la «o» del
 * logotipo, el mate de quien está trabajando, el botón principal y el tiempo
 * que queda. No pinta fondos de sección. */

:root {
  --marca:       #096ACC;
  --marca-alta:  #1F81DF;
  --marca-baja:  #064A90;
  --sobre-marca: #FFFFFF;   /* la tinta que va ENCIMA del azul de marca */

  --fondo:       #F6F7F9;
  --tarjeta:     #FFFFFF;
  --tinta:       #101720;
  --tinta-suave: #55606E;
  --linea:       #E2E6EC;
  --apagado:     #C3CBD6;   /* el mate de quien no está */
  --pista:       #E9ECF1;   /* el carril vacío del cronograma */

  --radio:    14px;
  --radio-lg: 24px;
  --sombra:   0 1px 2px rgba(16,23,32,.05), 0 8px 24px rgba(16,23,32,.06);

  --fuente:         'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fuente-display: 'Outfit', var(--fuente);
  --fuente-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --suave: cubic-bezier(.23, 1, .32, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo:       #0B1017;
    --tarjeta:     #141B24;
    --tinta:       #E8EDF3;
    --tinta-suave: #97A3B2;
    --linea:       #232C38;
    --apagado:     #3A4553;
    --pista:       #1A222C;
    /* En oscuro el azul de marca sube para leerse sobre el fondo; al subir
       deja de admitir texto blanco encima, así que la tinta del botón baja. */
    --marca:       #4C9BEA;
    --marca-alta:  #6FB0F0;
    --sobre-marca: #0B1017;
    --sombra:      0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  }
}

* { box-sizing: border-box; }

/* La única textura del tablero: el mate de la marca en rejilla regular, casi
   invisible, solo sobre el fondo. Las tarjetas van opacas encima, así que
   ningún texto se lee sobre el patrón. */
body {
  margin: 0;
  background-image: var(--trama);
  background-size: 19px 19px;
  padding: 0 1rem calc(3rem + env(safe-area-inset-bottom));
  background-color: var(--fondo);
  color: var(--tinta);
  font: 400 1rem/1.5 var(--fuente);
  -webkit-font-smoothing: antialiased;
}

.rotulo {
  margin: 0 0 .6rem;
  font: 500 .75rem/1 var(--fuente);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.oculto {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ── Encabezado ──────────────────────────────────────────────────────── */

.barra {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  max-width: 34rem;
  margin: 0 auto;
  padding: calc(1.4rem + env(safe-area-inset-top)) 0 1.6rem;
}

.logo {
  margin: 0;
  font: 600 1.35rem/1 var(--fuente-display);
  letter-spacing: -.015em;
}

.logo__mate {
  display: inline-block;
  width: .82em; height: .76em;
  margin: 0 .01em;
  vertical-align: -.03em;
  background: var(--marca);
  /* La silueta del mate, recortada del color plano de marca. */
  -webkit-mask: var(--silueta) center / contain no-repeat;
          mask: var(--silueta) center / contain no-repeat;
}

:root {
  --silueta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 4 172 160'%3E%3Cpath d='M90 8 C124 8 154 32 164 70 C173 100 168 132 146 148 C128 160 52 160 34 148 C12 132 7 100 16 70 C26 32 56 8 90 8 Z' fill='%23000'/%3E%3C/svg%3E");
  --trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M13 5.2 C17.9 5.2 22.2 8.6 23.7 14 C25 18.3 24.2 22.9 21.1 25.2 C18.5 26.9 7.5 26.9 4.9 25.2 C1.7 22.9 1 18.3 2.3 14 C3.8 8.6 8.1 5.2 13 5.2 Z' fill='rgba(9,106,204,.026)'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    --trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M13 5.2 C17.9 5.2 22.2 8.6 23.7 14 C25 18.3 24.2 22.9 21.1 25.2 C18.5 26.9 7.5 26.9 4.9 25.2 C1.7 22.9 1 18.3 2.3 14 C3.8 8.6 8.1 5.2 13 5.2 Z' fill='rgba(120,175,240,.035)'/%3E%3C/svg%3E");
  }
}

.barra__seccion {
  margin: 0;
  font: 400 .8rem/1 var(--fuente-mono);
  color: var(--tinta-suave);
}

/* ── Columna ─────────────────────────────────────────────────────────── */

.hoja {
  max-width: 34rem;
  margin: 0 auto;
  display: grid;
  gap: 2.2rem;
}

.hoja[aria-busy='true'] { opacity: .55; }

.cargando { margin: 0; color: var(--tinta-suave); }

/* ── El mate de cada quien ───────────────────────────────────────────── */

.mate { display: block; flex: none; }

.mate__cuerpo { fill: var(--apagado); transition: fill .5s var(--suave); }
.mate.trabajando .mate__cuerpo { fill: var(--marca); }

.mate__ojo {
  fill: #FFFFFF;                 /* los ojos SIEMPRE blancos */
  transform-box: fill-box;
  transform-origin: center;
  transform: scaleY(.09);        /* dormido */
  transition: transform .45s var(--suave);
}
.mate.trabajando .mate__ojo { transform: scaleY(1); }

@media (prefers-reduced-motion: no-preference) {
  /* Respira: se ensancha al inspirar y se estira al soltar. Muy lento. */
  .mate.trabajando { animation: respirar 5s var(--suave) infinite; }
  /* Y parpadea de vez en cuando, cada ojo desfasado por persona. */
  .mate.trabajando .mate__ojo { animation: parpadear 7.5s var(--suave) infinite; }
}

@keyframes respirar {
  0%, 100% { transform: scale(1, 1); }
  45%      { transform: scale(1.045, .955); }
  70%      { transform: scale(.985, 1.015); }
}

@keyframes parpadear {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(.09); }
}

/* ── Los demás ───────────────────────────────────────────────────────── */

.otros__lista { display: grid; gap: .7rem; }

.libre {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0;
  padding: .9rem 1rem;
  border: 1px dashed var(--linea);
  border-radius: var(--radio);
  color: var(--tinta-suave);
}

.persona {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .9rem 1rem;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.persona__texto { min-width: 0; }

.persona__nombre {
  margin: 0;
  font: 600 1.05rem/1.25 var(--fuente-display);
}

.persona__que {
  margin: .1rem 0 0;
  font-size: .95rem;
  color: var(--tinta-suave);
  overflow-wrap: anywhere;
}

.persona__queda {
  margin: .25rem 0 0;
  font: 400 .8rem/1 var(--fuente-mono);
  color: var(--tinta-suave);
}

/* ── Mi turno ────────────────────────────────────────────────────────── */

.ficha {
  padding: 1.2rem;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra);
}

@media (prefers-reduced-motion: no-preference) {
  .ficha { animation: entrar .5s var(--suave) both; }
}
@keyframes entrar {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.campo { display: block; margin-bottom: .9rem; }

.campo__nombre {
  display: block;
  margin-bottom: .35rem;
  font-size: .88rem;
  color: var(--tinta-suave);
}

select, input[type='text'] {
  width: 100%;
  padding: .8rem .9rem;
  font: 400 1rem var(--fuente);
  color: var(--tinta);
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  -webkit-appearance: none;
  appearance: none;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2355606E' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: .7rem;
  padding-right: 2.4rem;
}

input::placeholder { color: var(--tinta-suave); opacity: .8; }

:is(select, input, button, a):focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
}

.boton {
  display: block;
  width: 100%;
  padding: .95rem 1rem;
  font: 600 1.02rem var(--fuente-display);
  color: var(--sobre-marca);
  background: var(--marca);
  border: 1px solid transparent;
  border-radius: var(--radio);
  cursor: pointer;
  transition: transform .25s var(--suave), background-color .25s var(--suave);
}
.boton:hover { background: var(--marca-alta); }
.boton:active { transform: scale(.985, 1.02); }   /* se aplasta al pulsar */
.boton[disabled] { opacity: .55; cursor: progress; }

.boton--calma {
  color: var(--tinta);
  background: transparent;
  border-color: var(--linea);
}
.boton--calma:hover { background: var(--fondo); }

.acciones { display: grid; gap: .6rem; margin-top: .2rem; }

/* Cabecera de la ficha cuando el turno está encendido */
.encendido { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.encendido__que { margin: 0; font: 600 1.15rem/1.3 var(--fuente-display); overflow-wrap: anywhere; }
.encendido__nota { margin: .15rem 0 0; color: var(--tinta-suave); overflow-wrap: anywhere; }

.queda {
  margin: .45rem 0 0;
  font: 500 .95rem/1 var(--fuente-mono);
  color: var(--marca);
}

/* ── Avisos ──────────────────────────────────────────────────────────── */

.aviso {
  max-width: 34rem;
  margin: 1.4rem auto 0;
  padding: .9rem 1rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--tarjeta);
  border-left: 3px solid var(--marca);
  color: var(--tinta);
  font-size: .92rem;
}

/* ── Encabezado: el enlace a la otra página ──────────────────────────── */

.barra__enlace {
  margin-left: auto;
  font: 500 .85rem var(--fuente);
  color: var(--tinta-suave);
  text-decoration: none;
  white-space: nowrap;
}
.barra__enlace:hover { color: var(--marca); }

/* ── Cronograma ──────────────────────────────────────────────────────────
 *
 * Deliberadamente NO se parece al tablero: allí son tarjetas blancas
 * flotando, aquí es una hoja rayada, como un horario de pared. Una fila por
 * persona, las horas de izquierda a derecha, y el color de la barra dice de
 * qué proyecto era el rato. Si no trabajó, su carril se queda vacío. */

.hoja--ancha { max-width: 52rem; }

.dia__mando {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.5rem;
}

.dia__nombre {
  flex: 1 1 auto;
  margin: 0;
  font: 600 1.1rem/1.25 var(--fuente-display);
}

.paso {
  flex: none;
  width: 34px; height: 34px;
  font: 400 1rem/1 var(--fuente);
  color: var(--tinta);
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .25s var(--suave);
}
.paso:hover { border-color: var(--apagado); }

.hoy {
  flex: none;
  padding: .35rem .5rem;
  font: 500 .85rem var(--fuente);
  color: var(--marca);
  background: none;
  border: 0;
  cursor: pointer;
}

.regla,
.carril {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  gap: .7rem;
  align-items: center;
}
@media (min-width: 40rem) {
  .regla, .carril { grid-template-columns: 8rem 1fr; }
}

.regla { margin-bottom: .3rem; }
.regla__horas { position: relative; height: 1rem; }
.regla__hora {
  position: absolute;
  top: 0;
  font: 400 .7rem/1 var(--fuente-mono);
  color: var(--tinta-suave);
  white-space: nowrap;
}

.carril { padding: .5rem 0; border-top: 1px solid var(--linea); }
.carril:last-child { border-bottom: 1px solid var(--linea); }

.carril__quien { min-width: 0; }
.carril__nombre {
  margin: 0;
  font: 500 .92rem/1.2 var(--fuente-display);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.carril__total {
  margin: .1rem 0 0;
  font: 400 .72rem/1 var(--fuente-mono);
  color: var(--tinta-suave);
}

/* El carril con las horas marcadas por detrás: una raya fina por hora, que
   sale sola de dividir el ancho entre las horas que se están enseñando. */
.pista {
  position: relative;
  height: 34px;
  border-radius: 7px;
  background-color: var(--pista);
  background-image: linear-gradient(to right, var(--linea) 1px, transparent 1px);
  background-size: calc(100% / var(--horas)) 100%;
}

.tramo {
  position: absolute;
  top: 4px; bottom: 4px;
  display: flex;
  align-items: center;
  padding: 0 .45rem;
  border-radius: 5px;
  overflow: hidden;
  font: 500 .72rem/1 var(--fuente);
}

.tramo__texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* El turno que sigue abierto no termina: late en su borde derecho. */
.tramo--vivo::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 3px;
  background: currentColor;
  opacity: .5;
}

@media (prefers-reduced-motion: no-preference) {
  /* Las barras se pintan de izquierda a derecha, como se leen. */
  .tramo { animation: pintar .6s var(--suave) both; }
  .tramo--vivo::after { animation: latir 2.4s var(--suave) infinite; }
}
@keyframes pintar {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes latir {
  0%, 100% { opacity: .15; }
  50%      { opacity: .7; }
}

.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  margin: 1.1rem 0 0;
  font-size: .85rem;
  color: var(--tinta-suave);
}
.leyenda__uno { display: inline-flex; align-items: center; gap: .4rem; }
.leyenda__punto { width: 10px; height: 10px; border-radius: 3px; }
.leyenda__vacia { color: var(--tinta-suave); }

/* ── Los últimos siete días ──────────────────────────────────────────── */

.total {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .6rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--linea);
}
.total:last-of-type { border-bottom: 0; }
.total__proyecto { overflow-wrap: anywhere; }
.total__horas { font: 400 .9rem var(--fuente-mono); color: var(--tinta-suave); }
.total__barra {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 3px;
  transform-origin: left;
  transition: transform .6s var(--suave);
}