/* ═══════════════════════════════════════════════════════════════════════════
   REPORTES

   Un solo panel con pestañas por dentro, como la ficha del colaborador pero a
   pantalla completa y con más aire. La razón de que sea UN panel y no una pila
   de tarjetas: un reporte es un documento, y un documento se lee de corrido.
   Seis tarjetas del mismo tema, cada una con su marco y su sombra, se leen
   como seis cosas distintas que por casualidad quedaron juntas.

   El color va con cuentagotas y siempre significa algo:

   · turquesa = lo que ya pasó, lo ganado, lo que se llevó la persona
   · rojo     = lo que se rebajó o lo que se perdió
   · gris     = lo que todavía no hay

   Y el brillo es el mismo de la regla de Liquidaciones y de la tira de
   Aguinaldos: degradado de claro a lleno, con un resplandor del mismo color
   por debajo. Lo que no ha pasado no se enciende — encender lo que falta haría
   creer que ya está. */

/* ── El turquesa de la pestaña ──────────────────────────────────────────────
   --teal (#009f9b) es un turquesa HONDO: sirve para texto y para bordes sobre
   papel blanco, donde lo que importa es el contraste. Sobre el fondo oscuro se
   apaga y todo queda como sin encender — que es justo lo que le pasaba a esta
   pestaña frente a Vacaciones, Aguinaldos y Liquidaciones.
   Esas tres no usan --teal en oscuro: usan un turquesa claro (#7ee6e0 →
   #5fd8d0) que sí prende sobre negro. Aquí se hace lo mismo, pero con una sola
   variable, para que el día que haya que ajustarlo se ajuste en un solo sitio
   y no en cuarenta reglas. */
.rep-panel,
.quien.reportes {
  --rep-luz: var(--teal);
  --rep-luz-alta: color-mix(in srgb, var(--teal) 88%, #fff);
}
[data-theme="dark"] .rep-panel,
[data-theme="dark"] .quien.reportes {
  --rep-luz: #5fd8d0;
  --rep-luz-alta: #7ee6e0;
}

/* ── El panel ───────────────────────────────────────────────────────────── */
.rep-panel {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--e1);
  overflow: hidden;
}

/* Tres columnas fijas —quién, las cifras, los mandos— y no una fila que se
   acomoda sola.

   Con flex-wrap el renglón se partía en dos según cuán largo fuera el nombre:
   "Todo el equipo" ocupa 306 px y "Fabián Hernández" 226, y esos ochenta
   píxeles de diferencia eran justo los que decidían si los mandos cabían al
   final o se caían a un segundo renglón. La cabecera medía 164 px con el
   equipo y 96 con una persona, y al cambiar de uno a otro la pantalla daba un
   brinco. En rejilla no puede pasar: las tres columnas están dichas de
   antemano y el nombre se encoge dentro de la suya. */
.rep-panel-cabeza {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 26px;
  padding: 20px 26px;
  /* Un lavado turquesa que baja desde arriba: le da peso a la cabecera sin
     ponerle una barra de color, que en una pantalla llena de números grita. */
  background: linear-gradient(180deg, color-mix(in srgb, var(--rep-luz) 7%, transparent), transparent);
}

.rep-panel-quien { display: flex; align-items: center; gap: 14px; min-width: 0; }
.rep-panel-quien .avatar { width: 48px; height: 48px; font-size: 16px; flex: 0 0 auto; }
.rep-panel-quien > div { min-width: 0; }
.rep-panel-quien h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 660;
  letter-spacing: -.015em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rep-panel-quien p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }

/* La cara del equipo: el mismo redondel del avatar, pero con el ícono de la
   gente y encendido, para que "todos juntos" se reconozca de lejos. */
.rep-cara-equipo {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(160deg, var(--rep-luz-alta), var(--rep-luz));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--rep-luz) 34%, transparent);
}
.rep-cara-equipo svg { width: 22px; height: 22px; }

/* Los tres datos de la cabecera. Cambian con la pestaña: en Pagos uno quiere
   el bruto y el neto; en Ausencias, cuántas faltas van. Un encabezado que dice
   siempre lo mismo se vuelve adorno. */
.rep-panel-datos { display: flex; flex-wrap: wrap; gap: 0; justify-content: flex-end; }
.rep-panel-datos > div {
  display: grid;
  gap: 3px;
  padding: 0 20px;
  border-left: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  /* El sitio del chip de comparación queda apartado aunque no haya chip.
     Unas secciones comparan contra el año pasado y otras no —Aguinaldos y
     Vacaciones por período no tienen contra qué—, y sin este alto mínimo la
     cabecera medía 56 px en unas y 34 en otras: cambiar de pestaña, o de la
     persona al equipo, le daba un brinco a toda la pantalla. */
  align-content: center;
  min-height: 56px;
}
.rep-panel-datos > div:first-child { border-left: 0; }
.rep-panel-datos small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.rep-panel-datos b { font-size: 16px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* El cambio contra el año pasado. Es lo único de la pantalla que no se puede
   leer en ninguna otra pestaña, así que va aquí arriba y con color: verde no
   quiere decir "bueno" —una planilla que sube puede ser buena o mala—, quiere
   decir "más que el año pasado". */
.rep-contra {
  justify-self: start;
  margin-top: 3px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 12%, transparent);
}
.rep-contra.sube { color: var(--rep-luz); background: color-mix(in srgb, var(--rep-luz) 14%, transparent); }
.rep-contra.baja { color: #c0392b; background: color-mix(in srgb, #c0392b 13%, transparent); }
[data-theme="dark"] .rep-contra.baja { color: #f0938c; background: color-mix(in srgb, #e0736a 20%, transparent); }

.rep-panel-mandos { display: inline-flex; align-items: center; gap: 9px; }
.rep-anio { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }

/* ── Las pestañas ───────────────────────────────────────────────────────────
   La misma familia que las de la ficha del colaborador —una fila con su raya
   abajo, la escogida en turquesa— pero con dos cosas más: la escogida lleva un
   lavado de color que sube desde la raya, y la raya tiene resplandor. Sin eso,
   en una pantalla tan larga uno pierde de vista en qué pestaña está. */
.rep-tabs {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.rep-tabs::-webkit-scrollbar { display: none; }

.rep-tabs button {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-2) ease, background-color var(--dur-2) ease, border-color var(--dur-2) ease;
}
.rep-tabs button svg { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease); }
.rep-tabs button:hover { color: var(--ink); background: color-mix(in srgb, var(--rep-luz) 6%, transparent); }
.rep-tabs button:hover svg { transform: translateY(-1px); }

.rep-tabs button.active {
  color: var(--rep-luz);
  border-bottom-color: var(--rep-luz);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--rep-luz) 11%, transparent));
  box-shadow: 0 3px 12px -4px color-mix(in srgb, var(--rep-luz) 55%, transparent);
}
.rep-tabs button.active svg { color: var(--rep-luz); }
[data-theme="dark"] .rep-tabs button:hover { background: color-mix(in srgb, var(--rep-luz) 11%, transparent); }
[data-theme="dark"] .rep-tabs button.active { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--rep-luz) 18%, transparent)); }

/* ── Las bandas ─────────────────────────────────────────────────────────── */
.rep-seccion {
  padding: 22px 26px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.rep-seccion:last-child { border-bottom: 0; }
.rep-seccion > h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 650;
  color: var(--ink);
}
.rep-seccion > h2 svg { width: 19px; height: 19px; color: var(--rep-luz); }
.rep-seccion > p {
  margin: 0 0 16px;
  max-width: 82ch;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}
.rep-seccion > p b { color: var(--ink); font-weight: 650; }

/* ── La tira de los doce meses ──────────────────────────────────────────────
   Es la firma de la pantalla: dice hasta dónde va el año sin un solo número.
   Mismo brillo que la regla de antigüedad de Liquidaciones. */
.rep-seccion-tira { padding-bottom: 20px; }
.rep-tira-dice {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 30px;
  font-size: 13px;
  color: var(--muted);
}
.rep-tira-dice b { color: var(--ink); font-weight: 650; }
.rep-tira-dice small {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 80%, transparent);
}

.rep-tira { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5px; }
.rep-mes { display: grid; gap: 7px; justify-items: center; }
.rep-mes i {
  display: block;
  width: 100%;
  height: 11px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--muted) 15%, transparent);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.rep-mes small { color: #98a2b3; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; }

/* Lo que tiene algo anotado se enciende; lo que no, se queda como rastro. */
.rep-mes.con i {
  background: linear-gradient(180deg, var(--rep-luz-alta), var(--rep-luz));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--rep-luz) 26%, transparent);
  /* "backwards" y no "both": con "both" el último fotograma se queda mandando
     sobre transform para siempre, y el realce del puntero —que también es un
     transform— no llegaba a aplicarse nunca. Las barritas no se movían y
     parecía que el hover estaba sin programar. */
  animation: rep-enciende .45s var(--ease) backwards;
  animation-delay: calc(var(--turno, 0) * .04s);
}
.rep-mes.con small { color: var(--rep-luz); }
.rep-mes.hoy i { box-shadow: 0 3px 15px color-mix(in srgb, var(--rep-luz) 48%, transparent); }
.rep-mes.hoy small { position: relative; color: var(--ink); }
.rep-mes.hoy small::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: var(--rep-luz);
}
/* Al pasar por encima se levanta y se envuelve en su propia luz. Pero solo lo
   que ya pasó: encender un mes que todavía no llega haría creer que ya está. */
.rep-mes { position: relative; cursor: default; }
.rep-mes:hover i { transform: translateY(-4px) scaleY(1.55); }
.rep-mes.con:hover i {
  box-shadow: 0 0 16px color-mix(in srgb, var(--rep-luz) 55%, transparent),
              0 6px 20px color-mix(in srgb, var(--rep-luz) 48%, transparent);
}
.rep-mes.sin:hover i { background: color-mix(in srgb, var(--muted) 26%, transparent); box-shadow: none; }
.rep-mes:hover small { color: var(--ink); }

/* La cifra del mes, flotando encima. Va en CSS puro y sacada del propio
   atributo: así no puede quedar diciendo lo de otro mes, que es lo que pasa
   cuando un rótulo así se arma por aparte con JavaScript. */
.rep-mes::after {
  content: attr(data-dice);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  z-index: 5;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--rep-luz) 34%, transparent);
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: var(--e2);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0;
  translate: -50% 4px;
  pointer-events: none;
  transition: opacity var(--dur-2) ease, translate var(--dur-2) var(--ease);
}
.rep-mes:hover::after { opacity: 1; translate: -50% 0; }
/* Los de los cantos se pegan a su lado para no salirse del panel. */
.rep-mes:first-child::after { left: 0; translate: 0 4px; }
.rep-mes:first-child:hover::after { translate: 0 0; }
.rep-mes:last-child::after { left: auto; right: 0; translate: 0 4px; }
.rep-mes:last-child:hover::after { translate: 0 0; }
@keyframes rep-enciende { from { opacity: 0; transform: scaleX(.4); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rep-mes.con i { animation: none; } }

/* ── Las cuatro fichas ──────────────────────────────────────────────────────
   Mismo molde que las de Aguinaldos —ícono en su cuadro teñido, rótulo
   chiquito, número grande— para que las dos pantallas se lean como la misma
   casa. La última es la que uno vino a ver, y va encendida. */
.rep-seccion-fichas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.rep-ficha {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  text-align: left;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) ease;
}
.rep-ficha:hover { transform: translateY(-2px); box-shadow: var(--e2); }
.rep-ficha-icono {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--tono, var(--rep-luz));
  background: color-mix(in srgb, var(--tono, var(--rep-luz)) 12%, transparent);
  transition: transform var(--dur-2) var(--ease);
}
.rep-ficha:hover .rep-ficha-icono { transform: scale(1.06); }
.rep-ficha-icono svg { width: 20px; height: 20px; stroke-width: 2; }
.rep-ficha-texto { display: grid; gap: 2px; min-width: 0; }
.rep-ficha-texto small { color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.rep-ficha-texto strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.012em;
  font-variant-numeric: tabular-nums;
  /* Última red: si aun así no cabe, se achica en vez de salirse del canto. */
  min-width: 0;
  overflow-wrap: anywhere;
}
.rep-ficha-texto em {
  font-style: normal;
  font-size: 11px;
  line-height: 1.35;
  color: color-mix(in srgb, var(--muted) 85%, transparent);
}

/* La roja: lo que se rebaja o lo que falta. No es una alarma, es un aviso de
   dirección — por eso solo cambia el tono del ícono, no la ficha entera. */
.rep-ficha.roja { --tono: #e0453f; }
[data-theme="dark"] .rep-ficha.roja { --tono: #f4757f; }

/* La destacada: la cifra que uno vino a ver. Va encendida con el turquesa de
   la casa, con un canto y un resplandor del mismo color. */
.rep-ficha.destacada {
  border-color: color-mix(in srgb, var(--rep-luz) 42%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rep-luz) 9%, transparent), transparent);
  box-shadow: 0 4px 18px -6px color-mix(in srgb, var(--rep-luz) 55%, transparent);
}
.rep-ficha.destacada .rep-ficha-icono {
  color: #fff;
  background: linear-gradient(160deg, var(--rep-luz-alta), var(--rep-luz));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--rep-luz) 40%, transparent);
}
.rep-ficha.destacada .rep-ficha-texto strong { color: var(--rep-luz); font-size: 18px; }
.rep-ficha.destacada:hover { box-shadow: 0 8px 26px -6px color-mix(in srgb, var(--rep-luz) 62%, transparent); }
[data-theme="dark"] .rep-ficha.destacada .rep-ficha-icono,
[data-theme="dark"] .rep-cara-equipo { color: #04231f; }

/* ── La gráfica con su cuenta al lado ───────────────────────────────────────
   La gráfica dice la forma del año; la cuenta de la derecha dice de dónde
   salió el total, renglón por renglón. Juntas contestan las dos preguntas que
   uno le hace a un reporte: "¿cómo va?" y "¿de dónde sale?". */
.rep-seccion-grafica {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  gap: 26px;
  align-items: start;
}
.rep-columna-principal { min-width: 0; }
.rep-columna-principal h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 650;
  color: var(--ink);
}
.rep-columna-principal h2 svg { width: 19px; height: 19px; color: var(--rep-luz); }
.rep-columna-principal > p {
  margin: 0 0 18px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}
.rep-columna-principal > p b { color: var(--ink); font-weight: 650; }

.rep-columna-lado {
  padding: 18px 19px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--canvas) 60%, var(--card));
}
.rep-columna-lado h3 {
  margin: 0 0 14px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}

/* La cuenta abierta: es lo que uno copiaría a mano en un papel para entender
   de dónde salió un total. */
.rep-cuenta { margin: 0; display: grid; gap: 2px; }
.rep-cuenta > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--line) 85%, transparent);
}
.rep-cuenta dt { display: grid; gap: 1px; font-size: 12.5px; color: var(--ink); }
.rep-cuenta dt small { font-size: 10.5px; color: var(--muted); }
.rep-cuenta dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 640;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rep-cuenta .resta dd { color: #c0392b; }
[data-theme="dark"] .rep-cuenta .resta dd { color: #f0938c; }

.rep-cuenta-total {
  margin-top: 6px;
  padding: 13px 14px !important;
  border-bottom: 0 !important;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rep-luz) 13%, transparent), color-mix(in srgb, var(--rep-luz) 7%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rep-luz) 26%, transparent);
}
.rep-cuenta-total dt { font-weight: 650; }
.rep-cuenta-total dd { font-size: 16.5px; font-weight: 700; color: var(--rep-luz); }

/* ── La gráfica de los doce meses ──────────────────────────────────────────
   Misma armazón que la de Aguinaldos: tres filas de alto conocido, rayas
   rotuladas por dentro, carril a la izquierda para los montos. Lo que aquí se
   agregó son los tramos apilados — el alto de la barra es el bruto, el pedazo
   de abajo lo que la persona se llevó y el de arriba lo que se le rebajó. Con
   dos barras separadas habría que restar de cabeza. */
.rep-grafica { position: relative; padding: 4px 2px 0; --rep-pista: 158px; --rep-carril: 48px; }
.rep-grafica-lineas {
  position: absolute;
  left: var(--rep-carril);
  right: 0;
  top: 18px;
  height: var(--rep-pista);
  pointer-events: none;
  z-index: 0;
}
.rep-grafica-lineas span {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed color-mix(in srgb, var(--line) 75%, transparent);
}
.rep-grafica-lineas em {
  position: absolute;
  right: 100%;
  margin-right: 8px;
  bottom: -5px;
  color: color-mix(in srgb, var(--muted) 58%, transparent);
  font-style: normal;
  font-size: 9.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rep-columnas {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: 3px;
  padding-left: var(--rep-carril);
}
/* Filas de alto fijo para que el piso de las barras sea el mismo en las doce.
   Si la columna creciera con su contenido, un monto largo le subiría el piso a
   su barra y ese mes se vería más alto de lo que es. */
.rep-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 18px var(--rep-pista) 20px;
  justify-items: center;
  align-items: end;
  border-radius: var(--r-sm);
  transition: background-color var(--dur-2) ease;
  position: relative;
  z-index: 1;
}
/* El realce del mes que se está mirando sube desde el piso y se desvanece.
   Relleno parejo, en una pista de 158 px de alto, se lee como un cajón gris
   parado detrás de la barra —y un cajón que aparece y desaparece con el mouse
   es justo lo que hace que una gráfica se sienta mal hecha. */
.rep-col:hover { background: linear-gradient(180deg, transparent 12%, color-mix(in srgb, var(--rep-luz) 10%, transparent)); }
[data-theme="dark"] .rep-col:hover { background: linear-gradient(180deg, transparent 12%, color-mix(in srgb, var(--rep-luz) 17%, transparent)); }

/* El mes en que vamos se señala con un lavado que sube desde el piso, no con
   el relleno entero de la columna. Con el relleno entero, un mes de más
   adelante —setiembre cuando apenas se anotó hasta junio— se dibujaba como un
   cajón gris parado en medio de la gráfica: parecía un cuadro puesto donde no
   iba, y no un mes. */
.rep-col.hoy { background: linear-gradient(180deg, transparent 10%, color-mix(in srgb, var(--rep-luz) 11%, transparent)); }
[data-theme="dark"] .rep-col.hoy { background: linear-gradient(180deg, transparent 10%, color-mix(in srgb, var(--rep-luz) 18%, transparent)); }

.rep-col-monto {
  justify-self: center;
  margin-bottom: 7px;
  color: #7d89a1;
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity var(--dur-2) ease, transform var(--dur-2) ease;
}
.rep-col:hover .rep-col-monto,
.rep-col.hoy .rep-col-monto { opacity: 1; transform: none; color: var(--ink); }
.rep-col-pista { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 100%; }

.rep-col-barra {
  display: flex;
  flex-direction: column-reverse;   /* el primer tramo va abajo */
  width: 62%;
  max-width: 30px;
  min-height: 5px;
  border-radius: 6px 6px 2px 2px;
  overflow: hidden;
  transform-origin: bottom center;
  animation: rep-crece .5s var(--ease) both;
  animation-delay: calc(var(--turno, 0) * .035s + .02s);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--rep-luz) 22%, transparent);
  transition: box-shadow var(--dur-2) ease;
}
.rep-col:hover .rep-col-barra,
.rep-col.hoy .rep-col-barra {
  box-shadow: 0 0 14px color-mix(in srgb, var(--rep-luz) 34%, transparent),
              0 5px 18px color-mix(in srgb, var(--rep-luz) 42%, transparent);
}
@keyframes rep-crece { from { transform: scaleY(0); opacity: .3; } to { transform: scaleY(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rep-col-barra { animation: none; } }

/* Los tramos. El rojo parte de un rojo ya hondo y va casi entero: un rojo
   rebajado con blanco no se apaga, se vuelve rosado. */
.rep-tramo { display: block; width: 100%; }
.rep-tramo.neto,
.rep-tramo.base,
.rep-tramo.gozado { background: linear-gradient(180deg, var(--rep-luz-alta), var(--rep-luz)); }
.rep-tramo.ded { background: color-mix(in srgb, #c0392b 74%, #fff); }
.rep-tramo.pagado { background: color-mix(in srgb, #74b3f0 78%, #fff); }
.rep-tramo.falta { background: linear-gradient(180deg, color-mix(in srgb, #c0392b 62%, #fff), color-mix(in srgb, #c0392b 80%, #fff)); }
[data-theme="dark"] .rep-tramo.ded { background: #e0736a; }
[data-theme="dark"] .rep-tramo.pagado { background: #8cc3f5; }
[data-theme="dark"] .rep-tramo.falta { background: linear-gradient(180deg, #f0938c, #e0736a); }

/* Un mes sin nada anotado no es un cero: es un hueco. Se dibuja punteado para
   que se note que ahí no se midió, en vez de parecer que se trabajó y no se
   ganó nada. */
.rep-col.sin .rep-col-barra {
  width: 42%;
  min-height: 6px;
  background: none;
  border: 1px dashed color-mix(in srgb, var(--line) 95%, transparent);
  border-radius: var(--r-pill);
  box-shadow: none;
  animation: none;
}
.rep-col-mes { margin-top: 9px; color: #98a2b3; font-size: 10.5px; font-weight: 600; letter-spacing: .03em; }
.rep-col.sin .rep-col-mes { color: #aab4c4; }
.rep-col.hoy .rep-col-mes { color: var(--rep-luz); }
[data-theme="dark"] .rep-col-monto { color: #8d99b1; }
[data-theme="dark"] .rep-col.sin .rep-col-mes { color: #5d6b85; }

.rep-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 18px 0 0;
  padding-left: var(--rep-carril);
  font-size: 11.5px;
  color: var(--muted);
}
.rep-leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.rep-muestra { width: 11px; height: 11px; border-radius: 3px; }
.rep-muestra.neto, .rep-muestra.base, .rep-muestra.gozado { background: var(--rep-luz); }
.rep-muestra.ded { background: color-mix(in srgb, #c0392b 74%, #fff); }
.rep-muestra.pagado { background: color-mix(in srgb, #74b3f0 78%, #fff); }
.rep-muestra.falta { background: color-mix(in srgb, #c0392b 72%, #fff); }
[data-theme="dark"] .rep-muestra.ded { background: #e0736a; }
[data-theme="dark"] .rep-muestra.pagado { background: #8cc3f5; }
[data-theme="dark"] .rep-muestra.falta { background: #e0736a; }
.rep-grafica-vacia { padding: 6px 0 2px; }

/* ── Barras acostadas ──────────────────────────────────────────────────────
   Para comparar personas, no meses. Los meses van en columnas porque el tiempo
   se lee de izquierda a derecha; las personas van acostadas porque lo que se
   compara es el largo, y así el nombre cabe entero. */
.rep-barras { display: grid; gap: 11px; margin: 0; padding: 4px 0 0; list-style: none; }
.rep-barras li { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.rep-barra-quien { display: grid; gap: 1px; min-width: 0; }
.rep-barra-quien b { font-size: 13px; font-weight: 620; color: var(--ink); }
.rep-barra-quien small { font-size: 10.5px; color: var(--muted); }
.rep-barra-pista { height: 13px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--muted) 11%, transparent); overflow: hidden; }
.rep-barra-pista i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--rep-luz-alta), var(--rep-luz));
  box-shadow: 0 2px 10px color-mix(in srgb, var(--rep-luz) 30%, transparent);
  transform-origin: left center;
  animation: rep-crece-h .55s var(--ease) both;
  animation-delay: calc(var(--turno, 0) * .05s);
}
.rep-barras li:hover .rep-barra-pista i { box-shadow: 0 0 14px color-mix(in srgb, var(--rep-luz) 45%, transparent), 0 3px 14px color-mix(in srgb, var(--rep-luz) 40%, transparent); }
.rep-barra-monto { font-size: 13px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
@keyframes rep-crece-h { from { transform: scaleX(0); opacity: .3; } to { transform: scaleX(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rep-barra-pista i { animation: none; } }

/* ── Las tablas ─────────────────────────────────────────────────────────────
   Los números a la derecha y con cifras de ancho fijo. Un reporte se lee
   comparando una columna de números hacia abajo; si los dígitos bailan de
   ancho, la columna deja de alinearse y hay que leerla número por número. */
.rep-tabla { overflow-x: auto; }
.rep-tabla table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rep-tabla th {
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.rep-tabla td {
  padding: 11px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  color: var(--ink);
  vertical-align: middle;
}
.rep-tabla th.col-monto,
.rep-tabla td.col-monto { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rep-tabla tbody tr { transition: background-color var(--dur-1) ease; }
.rep-tabla tbody tr:hover { background: color-mix(in srgb, var(--rep-luz) 5%, transparent); }
[data-theme="dark"] .rep-tabla tbody tr:hover { background: color-mix(in srgb, var(--rep-luz) 11%, transparent); }

/* Un mes sin nada anotado se apaga pero no se esconde: enseñar los doce
   siempre es lo que deja ver que en marzo no se registró nada. */
.rep-tabla tr.apagada td { color: color-mix(in srgb, var(--muted) 75%, transparent); }
.rep-tabla tr.apagada b { font-weight: 600; }
.rep-tabla tr.rep-fila-viva td { background: color-mix(in srgb, var(--rep-luz) 6%, transparent); }
[data-theme="dark"] .rep-tabla tr.rep-fila-viva td { background: color-mix(in srgb, var(--rep-luz) 12%, transparent); }

.rep-tabla tfoot td {
  padding-top: 13px;
  border-top: 2px solid color-mix(in srgb, var(--rep-luz) 35%, transparent);
  border-bottom: 0;
  background: color-mix(in srgb, var(--rep-luz) 6%, transparent);
  color: var(--ink);
  font-size: 13.5px;
}
[data-theme="dark"] .rep-tabla tfoot td { background: color-mix(in srgb, var(--rep-luz) 12%, transparent); }
.rep-tabla tfoot td:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.rep-tabla tfoot td:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.rep-tabla .rep-tabla-vacia td { padding: 6px 0; border-bottom: 0; }
.rep-sin { color: var(--muted); font-style: italic; }

.rep-pastilla {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--rep-luz) 15%, transparent);
  color: var(--rep-luz);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* El nombre con su cara. Es un botón porque lleva al reporte de esa persona.
   Se ve como texto hasta que uno se le acerca: una tabla llena de botones
   dibujados se ve como un tablero de mando, no como un reporte. */
.rep-quien-celda {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 3px 9px 3px 3px;
  margin: -3px 0 -3px -3px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.rep-quien-celda:hover { border-color: color-mix(in srgb, var(--rep-luz) 40%, transparent); background: color-mix(in srgb, var(--rep-luz) 8%, transparent); }
.rep-quien-celda .avatar { width: 28px; height: 28px; font-size: 11px; flex: 0 0 auto; }
.rep-quien-celda span { display: grid; min-width: 0; }
.rep-quien-celda b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rep-quien-celda small { font-size: 10.5px; color: var(--muted); }

/* La ficha de "Todo el equipo" es la primera de la fila de arriba y tiene que
   reconocerse de lejos: en vez de una cara lleva el ícono de la gente. */
.rep-ficha-todos { padding-right: 14px; }
.rep-todos-icono {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--rep-luz) 14%, transparent);
  color: var(--rep-luz);
}
.rep-todos-icono svg { width: 17px; height: 17px; }
.rep-ficha-todos.on .rep-todos-icono { background: rgba(255, 255, 255, .22); color: inherit; }

/* ── Anchos angostos ────────────────────────────────────────────────────── */
@media (max-width: 1240px) {
  .rep-seccion-grafica { grid-template-columns: minmax(0, 1fr); }
  .rep-columna-lado { max-width: 460px; }
}
/* La cabecera se desarma en tres renglones antes de que los datos se salgan
   del panel. Con la ventana en 700 px las tres cifras medían 485 px dentro de
   un panel de 384: se salían por la derecha y quedaban cortadas a media
   palabra, que es justo lo que no puede pasarle a un reporte. */
@media (max-width: 1240px) {
  /* Cuatro fichas dejan de caber antes que lo demás: un monto como
     "₡32 300 373,67" mide catorce cifras y no se puede partir en dos
     renglones —money() lo arma con espacios duros—, así que la ficha tiene que
     tener ancho de verdad o el número se sale por el canto. */
  .rep-seccion-fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .rep-panel-cabeza { grid-template-columns: minmax(0, 1fr); }
  .rep-panel-datos { width: 100%; justify-content: flex-start; }
  .rep-panel-datos > div { flex: 1 1 auto; padding-left: 16px; padding-right: 16px; }
  .rep-panel-mandos { width: 100%; }
}
@media (max-width: 900px) {
  .rep-panel-cabeza { gap: 16px; padding: 18px 18px; }
  .rep-panel-datos > div:first-child { padding-left: 0; }
  .rep-panel-mandos { width: 100%; }
  .rep-seccion { padding: 18px 18px; }
  .rep-tabs button span { display: none; }   /* con poco ancho, solo el ícono */
  .rep-tabs button { min-height: 48px; }
  /* Con la ventana angosta las doce columnas quedan de nueve píxeles: la
     gráfica se pasa a rodar de lado, que se lee, en vez de apretarse hasta
     que las barras dejan de distinguirse. */
  .rep-grafica { overflow-x: auto; }
  .rep-columnas, .rep-grafica-lineas { min-width: 560px; }
  .rep-barras li { grid-template-columns: 110px minmax(0, 1fr) auto; gap: 10px; }
}
@media (max-width: 860px) {
  .rep-seccion-fichas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .rep-panel-datos { gap: 12px 0; }
  /* Ya envueltos en dos renglones, la rayita de la izquierda separa mal: la
     de la primera cifra de abajo queda colgando en el aire. */
  .rep-panel-datos > div { flex: 1 1 46%; border-left: 0; padding-left: 0; padding-right: 12px; }
  .rep-tira-dice { flex-direction: column; gap: 4px; }
  .rep-panel-mandos { flex-wrap: wrap; }
  .rep-panel-mandos .button { flex: 1 1 auto; justify-content: center; }
}

/* ── En papel ───────────────────────────────────────────────────────────────
   Nada. Esta pantalla NO se imprime: el botón de PDF abre un documento hecho
   aparte —con el membrete de la empresa, sus tablas y su firma— y ese se
   imprime con las reglas de los comprobantes, que ya estaban probadas.

   Antes sí se imprimía la pantalla, y era un mal papel: salían las gráficas
   con sus degradados, las cifras que solo aparecen al pasar el puntero, y las
   pestañas de arriba. Una foto de una pantalla no es un documento. */

/* ── La puerta del equipo, en la portada de Reportes ────────────────────────
   Reportes se tapa igual que las demás pestañas —nadie de paso tiene por qué
   ver la planilla—, pero tiene una puerta más que ninguna otra: la del equipo
   entero. Es la pestaña del control, y lo primero que uno viene a ver ahí es
   cuánto suma todo; obligarlo a escoger una persona para después cambiar el
   ámbito sería hacerlo dar una vuelta de gusto.

   Va separada de las caras y encendida, para que se lea como otra cosa y no
   como un colaborador más de la fila. */
.portada-equipo-zona { display: grid; justify-items: center; gap: 14px; margin: 6px 0 20px; }

.portada-o {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  color: color-mix(in srgb, var(--muted) 85%, transparent);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
}
.portada-o::before,
.portada-o::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.portada-equipo {
  /* inline-flex y no flex: así se encoge a su contenido y el justify-items de
     la zona lo centra. Como flex ocupaba toda la fila y arrancaba al borde. */
  display: inline-flex;
  padding: 13px 16px 13px 13px;
  border-color: color-mix(in srgb, var(--teal) 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--teal) 10%, transparent), transparent);
  box-shadow: 0 4px 18px -8px color-mix(in srgb, var(--teal) 60%, transparent);
}
.portada-equipo:hover {
  border-color: var(--teal);
  box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--teal) 70%, transparent);
}
.portada-equipo-icono {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--teal) 82%, #fff), var(--teal));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--teal) 34%, transparent);
}
.portada-equipo-icono svg { width: 17px; height: 17px; }
.portada-equipo b { font-size: 14.5px; }
.portada-equipo-flecha {
  width: 16px;
  height: 16px;
  margin-left: 4px;
  color: var(--teal);
  opacity: .55;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) ease;
}
.portada-equipo:hover .portada-equipo-flecha { opacity: 1; transform: translateX(3px); }
[data-theme="dark"] .portada-equipo {
  border-color: color-mix(in srgb, #5fd8d0 50%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, #5fd8d0 14%, transparent), transparent);
}
[data-theme="dark"] .portada-equipo:hover { border-color: #5fd8d0; }
[data-theme="dark"] .portada-equipo-icono,
[data-theme="dark"] .portada-equipo-flecha { color: #04231f; }
[data-theme="dark"] .portada-equipo-icono {
  background: linear-gradient(160deg, #7ee6e0, #5fd8d0);
  box-shadow: 0 3px 10px rgba(95, 216, 208, .34);
}
[data-theme="dark"] .portada-equipo-flecha { color: #5fd8d0; }

/* ── La portada de Reportes, apretada para que quepa sin rodar ──────────────
   Todas las portadas caben en la pantalla de un solo golpe. La de Reportes
   lleva una pieza más —la puerta del equipo con su rayita— y con eso se pasaba
   ochenta píxeles: había que rodar la pantalla para alcanzar las caras, y una
   pantalla de "escoja a quién" que obliga a rodar para ver a quién escoger es
   una pantalla que no hizo su trabajo.

   Se le quita el aire a lo que sobra, no a lo que se lee: el redondel de
   arriba, los márgenes de la rayita divisoria y el relleno del marco. Los
   nombres y la puerta se quedan del mismo tamaño. */
.portada.reportes .portada-marco { padding: 28px 40px 26px; }
.portada.reportes .portada-icono { width: 52px; height: 52px; margin-bottom: 12px; }
.portada.reportes .portada-icono svg { width: 24px; height: 24px; }
.portada.reportes h1 { margin-bottom: 4px; }
.portada.reportes .portada-linea { margin: 16px auto 14px; }
.portada.reportes .portada-pide { margin-bottom: 12px; }
.portada.reportes .portada-equipo-zona { gap: 10px; margin: 0 0 14px; }
.portada.reportes .portada-buscar { margin-top: 10px; }
.portada.reportes .portada-nota { margin-top: 16px; }