/* La portada: los turnos arriba y, debajo, el panel de cuatro miniaturas.
 *
 * En su propio archivo por la regla del 23/09 (Safari y las hojas viejas).
 * Usa las variables de `estilo.css`, que se carga antes.
 *
 * Cada miniatura conserva en pequeño la FORMA de su página, que es lo que
 * hace que se reconozca sin leer: los pendientes son carpetas con el canto
 * del color del cliente, las cuentas un ticket con el borde arrancado, los
 * cambios los recuadros tintados del registro, el cronograma la hoja rayada
 * con sus carriles. Lo que tienen en común es solo la cabeza (el nombre de
 * la página y la flecha), para que se lean como un solo panel. */

:root {
  /* El papel del ticket: el mismo que `--papel` de cuentas.css, copiado
     aquí porque la portada no carga esa hoja. Si allá cambia, aquí también. */
  --mini-papel: #FFFDF8;
}
@media (prefers-color-scheme: dark) {
  :root { --mini-papel: #1B222C; }
}

/* ── El orden de la portada ──────────────────────────────────────────── */

.hoja.inicio { max-width: 62rem; gap: 2.4rem; }
.hoja.inicio > * { min-width: 0; }

.inicio__turnos {
  display: grid;
  gap: 2.2rem;
  align-items: start;
}
@media (min-width: 64rem) {
  /* En la computadora, quién está y tu turno van lado a lado: así el panel
     sale en la primera pantalla y la portada no pide bajar. */
  .inicio__turnos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.panel { container-type: inline-size; }

.panel__rejilla {
  display: grid;
  gap: 1.8rem;
  align-items: start;
}
/* En la computadora, dos por dos y en el mismo orden que en el celular:
   arriba lo que pide acción o dinero (Pendientes, Cuentas), abajo lo que ya
   pasó (Cambios, Cronograma). Lo eligió Ale el 23/09 entre tres órdenes; el
   de Pendientes alto a la izquierda y el Cronograma a lo ancho se probó y
   dejaba un hueco grande con pocos clientes. */
@container (min-width: 40rem) {
  .panel__rejilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem 1.8rem;
  }
}

/* ── Lo común de cada miniatura ──────────────────────────────────────── */

.mini {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  min-width: 0;
  color: var(--tinta);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.mini:focus-visible { outline: 2px solid var(--marca); outline-offset: 6px; border-radius: var(--radio); }

/* Antes de que lleguen los datos: el hueco con su alto, para que la
   portada no crezca a tirones. */
.mini:empty {
  min-height: 10rem;
  border-radius: var(--radio);
  background: color-mix(in srgb, var(--tinta) 4%, transparent);
}

.mini__cabeza {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .3rem .65rem;
}
.mini__titulo { font: 600 1.08rem/1.2 var(--fuente-display); }
.mini__dato   { font: 400 .76rem/1.3 var(--fuente-mono); color: var(--tinta-suave); }
.mini__ambar {
  padding: .12rem .5rem;
  border-radius: 999px;
  background: var(--pendiente);
  color: var(--pendiente-tinta);
  font: 500 .74rem/1.3 var(--fuente);
}
.mini__ir {
  margin-left: auto;
  color: var(--tinta-suave);
  transition: transform .35s var(--suave), color .2s var(--suave);
}
.mini:hover .mini__ir { color: var(--tinta); transform: translateX(3px); }

.mini__cuerpo { display: block; min-width: 0; }
.mini__vacio,
.mini__fallo {
  display: block;
  padding: 1rem;
  border: 1px dashed var(--linea);
  border-radius: var(--radio);
  color: var(--tinta-suave);
  font-size: .9rem;
}

/* ── Pendientes: el archivero ────────────────────────────────────────── */

.archivero { display: grid; gap: .4rem; }

.mcarpeta {
  position: relative;
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  padding: .62rem .85rem .62rem calc(.85rem + 5px);
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--tarjeta);
  overflow: hidden;
  transition: transform .4s var(--suave);
}
/* El canto del color del cliente, como en su página: pegado al borde y sin
   redondear, que es lo que lo hace carpeta. */
.mcarpeta::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--color);
}
.mcarpeta__nombre {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 .92rem/1.2 var(--fuente-display);
}
/* Lo que vence en una semana: la fecha en ámbar, sin pastilla. Con varias
   carpetas apretadas, una pastilla por renglón sería lo más ruidoso de la
   portada; el color ya dice que pide algo. */
.mcarpeta__cuando {
  flex: none;
  font: 500 .74rem/1 var(--fuente);
  color: var(--pendiente-tinta);
}
.mcarpeta__cuando::before {
  content: '';
  display: inline-block;
  width: .45rem; height: .45rem;
  margin-right: .3rem;
  border-radius: 50%;
  background: currentColor;
  vertical-align: .05em;
}
.mcarpeta__cuenta {
  flex: none;
  margin-left: auto;
  font: 500 .84rem/1.2 var(--fuente);
  white-space: nowrap;
}
.archivero__resto {
  padding: .15rem .2rem 0;
  color: var(--tinta-suave);
  font-size: .8rem;
}

/* Al pasar por encima, las carpetas se hojean: cada una asoma un poco,
   una detrás de otra, como al pasar el dedo por el cajón. */
.mini:hover .mcarpeta { transform: translateX(4px); }
.mcarpeta:nth-child(2) { transition-delay: 30ms; }
.mcarpeta:nth-child(3) { transition-delay: 60ms; }
.mcarpeta:nth-child(4) { transition-delay: 90ms; }
.mcarpeta:nth-child(5) { transition-delay: 120ms; }

/* ── Cuentas: el ticket ──────────────────────────────────────────────── */

.mticket {
  filter: drop-shadow(0 1px 1px rgba(16,23,32,.07)) drop-shadow(0 6px 14px rgba(16,23,32,.06));
  transition: transform .45s var(--suave);
  transform-origin: 50% 0;
}
@media (prefers-color-scheme: dark) {
  .mticket { filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)) drop-shadow(0 6px 14px rgba(0,0,0,.3)); }
}
/* Al pasar por encima, el ticket se ladea un pelo, como recién arrancado. */
.mini:hover .mticket { transform: translateY(-2px) rotate(-.7deg); }

.mticket__papel {
  --diente: 7px;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.1rem calc(1rem + var(--diente));
  background: var(--mini-papel);
  font: 400 .84rem/1.45 var(--fuente-mono);
  font-variant-numeric: tabular-nums;
  /* Los picos de abajo, con la misma máscara que el ticket de su página. */
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--diente)) 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--diente)) 100%;
}
.mticket__rotulo {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.mticket__puede {
  margin: .1rem 0 .75rem;
  font: 700 1.95rem/1.1 var(--fuente-display);
  letter-spacing: -.02em;
}
.mticket__corte {
  margin: 0 -1.1rem .55rem;
  border-top: 1.5px dashed color-mix(in srgb, var(--tinta-suave) 60%, transparent);
}
/* El renglón de caja: nombre, puntitos hasta la cifra, cifra. */
.mticket__renglon {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  margin: .15rem 0;
}
.mticket__renglon > :last-child { order: 3; }
.mticket__renglon::after {
  content: '';
  order: 2;
  flex: 1;
  border-bottom: 1.5px dotted color-mix(in srgb, var(--tinta-suave) 70%, transparent);
  transform: translateY(-.28em);
}
.mticket__renglon--debe > :last-child {
  padding: 0 .3rem;
  border-radius: 4px;
  background: var(--pendiente);
  color: var(--pendiente-tinta);
}
.mticket__nota {
  align-self: flex-end;
  font: 400 .74rem/1.3 var(--fuente);
  color: var(--tinta-suave);
}

/* ── Cambios: el registro ────────────────────────────────────────────── */

.registro-mini { display: grid; gap: .45rem; }

/* El recuadro del rato, tintado del color del cliente como en su página. */
.mrato {
  display: grid;
  gap: .2rem;
  min-width: 0;
  padding: .62rem .85rem .7rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--color) 26%, transparent);
  background: color-mix(in srgb, var(--color) 9%, var(--tarjeta));
  transition: transform .4s var(--suave);
}
@media (prefers-color-scheme: dark) {
  .mrato {
    border-color: color-mix(in srgb, var(--color) 34%, transparent);
    background: color-mix(in srgb, var(--color) 18%, var(--tarjeta));
  }
}
.mrato__quien {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  min-width: 0;
  font: 600 .84rem/1.3 var(--fuente);
}
.mrato__proyecto { font: 400 .74rem var(--fuente-mono); color: var(--tinta-suave); }
.mrato__cuando {
  margin-left: auto;
  white-space: nowrap;
  font: 400 .72rem var(--fuente-mono);
  color: var(--tinta-suave);
}
.mrato__titulo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: .88rem;
  line-height: 1.38;
}
.mrato__estado { font: 500 .72rem var(--fuente); color: var(--tinta-suave); }
.mrato__estado--git { color: var(--pendiente-tinta); }

/* El registro baja: al pasar por encima, cada rato baja un pelo, el
   segundo un poco después. */
.mini:hover .mrato { transform: translateY(2px); }
.mini:hover .mrato + .mrato { transition-delay: 40ms; }

/* ── Cronograma: la hoja rayada ──────────────────────────────────────── */

.hoja-mini {
  padding: .7rem .9rem .35rem;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: var(--tarjeta);
  box-shadow: var(--sombra);
}

.mcarril {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr) 4.6rem;
  gap: .7rem;
  align-items: center;
  padding: .5rem 0;
  border-top: 1px solid var(--linea);
}
.mcarril--regla { padding: 0 0 .35rem; border-top: 0; }

.mcarril__horas {
  display: flex;
  justify-content: space-between;
  font: 400 .66rem/1 var(--fuente-mono);
  color: var(--tinta-suave);
}
.mcarril__nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 500 .86rem/1.2 var(--fuente-display);
}
.mcarril__semana {
  text-align: right;
  white-space: nowrap;
  font: 400 .74rem/1 var(--fuente-mono);
  color: var(--tinta-suave);
}

/* La pista, con una raya fina por hora, como el carril de su página. */
.mcarril__pista {
  position: relative;
  height: 22px;
  border-radius: 6px;
  background-color: var(--pista);
  background-image: linear-gradient(to right, var(--linea) 1px, transparent 1px);
  background-size: calc(100% / var(--horas)) 100%;
}
.mtramo {
  position: absolute;
  top: 3px; bottom: 3px;
  border-radius: 4px;
  transform-origin: left;
}
.mtramo--vivo::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: currentColor;
  opacity: .5;
}
.mcarril__ahora {
  position: absolute;
  top: -3px; bottom: -3px;
  width: 1.5px;
  margin-left: -.75px;
  background: var(--tinta);
  opacity: .45;
}

/* ── Movimiento ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  /* Al llegar los datos, las miniaturas entran una detrás de otra. Solo la
     primera vez: la clase la pone inicio.js y los refrescos no la quitan. */
  .mini--llega { animation: entrar .5s var(--suave) both; }
  .mini--llega:nth-child(2) { animation-delay: 60ms; }
  .mini--llega:nth-child(3) { animation-delay: 120ms; }
  .mini--llega:nth-child(4) { animation-delay: 180ms; }

  /* Y los ratos del cronograma se pintan de izquierda a derecha. */
  .mini--llega .mtramo { animation: crece-mini .7s var(--suave) both; animation-delay: .25s; }
}
@keyframes crece-mini { from { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  .mcarpeta, .mticket, .mrato, .mini__ir { transition: none; }
  .mini:hover .mcarpeta, .mini:hover .mticket, .mini:hover .mrato { transform: none; }
}