/* =====================================================================
   MEROS · Hoja de estilos
   Identidad Agarimo Comunicación: Rubik, gris grafito, blanco y negro.
   Sin más colores. Las variantes son mezclas de grafito con blanco.

   Es el mismo sistema que Cronos y Kryptos, con los mismos nombres de
   clase, para que quien mantenga una sepa mantener las tres.

   REGLA: una clase se define UNA vez fuera de las media queries.
   Reutilizar un nombre no da ningún error —el HTML sale perfecto y la
   pantalla sale rota— y ha pasado ya tres veces en Kryptos. Lo vigila
   tests/test_vistas.php.
   ===================================================================== */

/* Rubik autoalojado. No se carga desde Google: eso enviaría la IP del
   equipo a un tercero cada vez que alguien abre la aplicación. Si los
   ficheros no están, el navegador cae en la tipografía del sistema y la
   aplicación se ve algo distinta pero funciona igual. */
@font-face {
  font-family: 'Rubik';
  src: url('../fonts/rubik-300.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Rubik';
  src: url('../fonts/rubik-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Rubik';
  src: url('../fonts/rubik-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --grafito:     #3b4147;
  --tinta:       #000000;
  --papel:       #ffffff;

  --grafito-90:  #4c5259;
  --grafito-60:  #878c91;
  --grafito-35:  #b6b9bd;
  --grafito-18:  #d8dadd;
  --grafito-08:  #eeeff0;
  --grafito-04:  #f7f7f8;

  --fuente: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:   ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --paso-1: 0.5rem;
  --paso-2: 1rem;
  --paso-3: 1.5rem;
  --paso-4: 2.5rem;
  --paso-5: 4rem;

  --radio: 3px;
  --linea: 1px solid var(--grafito-18);
}

*, *::before, *::after { box-sizing: border-box; }

/* Cualquier regla de autor con `display` gana a la del navegador para
   [hidden]. Sin esto, esconder algo desde JavaScript no esconde nada. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

/* --- Tipografía ---------------------------------------------------- */

.titulo {
  font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: -0.015em;
  margin: 0 0 var(--paso-2);
}

.subtitulo {
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grafito-60);
  margin: 0 0 var(--paso-2);
}

.titulo-seccion {
  font-size: 0.95rem;
  font-weight: 500;
  margin: var(--paso-3) 0 var(--paso-1);
}

.texto-guia {
  color: var(--grafito);
  max-width: 66ch;
  margin: 0 0 var(--paso-3);
}

.sutil {
  display: block;
  font-size: 0.78rem;
  color: var(--grafito-60);
}

.tenue { color: var(--grafito-60); }

.migas { margin: 0 0 2px; font-size: 0.8rem; color: var(--grafito-60); }
.migas a { color: var(--grafito-60); }

.sr-solo {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Barra superior ------------------------------------------------- */

.barra {
  /* Rejilla, no flex: cada zona tiene su carril reservado. Con flex, el
     reparto automático hace que la navegación colapse o desplace al
     bloque de sesión según cuántos enlaces tenga el rol. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'marca nav sesion';
  align-items: center;
  column-gap: var(--paso-3);
  padding: 0 var(--paso-3);
  min-height: 58px;
  overflow: visible;
  border-bottom: var(--linea);
  background: var(--papel);
  position: sticky;
  top: 0;
  z-index: 10;
}

.marca {
  grid-area: marca;
  display: flex;
  align-items: center;
  gap: var(--paso-2);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tinta);
  text-decoration: none;
}

/* El interletrado de 0.24em deja un hueco suelto detrás de la última letra.
   Con el logotipo al lado se nota, así que se le quita a ese margen. */
.marca__texto { margin-right: -0.24em; }

/* --- Logotipo de Agarimo -------------------------------------------- */
/* Regla única: se fija la altura y el ancho se calcula solo. La proporción
   sale intacta con cualquier imagen que se suba. Los atributos width y
   height del <img> los escribe Marca::etiqueta() a partir del fichero
   real, así que el hueco ya está reservado antes de que cargue. */

.marca-agarimo {
  display: block;
  width: auto;
  object-fit: contain;
  flex: 0 0 auto;
}

.marca-agarimo--barra    { height: 24px; }
.marca-agarimo--acceso   { height: 40px; margin: 0 auto var(--paso-3); }
.marca-agarimo--membrete { height: 30px; }

.navegacion {
  grid-area: nav;
  display: flex;
  align-items: center;
  gap: var(--paso-3);
  /* Su carril es minmax(0, 1fr): si no caben todos los enlaces, se
     desplaza dentro de su propio espacio sin robárselo a nadie. */
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 6px 0;
}

.navegacion a {
  flex: 0 0 auto;
  color: var(--grafito);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 2px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.navegacion a:hover,
.navegacion a[aria-current='page'] {
  color: var(--tinta);
  border-bottom-color: var(--tinta);
}

.sesion {
  grid-area: sesion;
  display: flex;
  align-items: center;
  justify-self: end;
  gap: var(--paso-2);
  font-size: 0.85rem;
  color: var(--grafito);
  white-space: nowrap;
}

.sesion form { margin: 0; }

.lienzo {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--paso-4) var(--paso-3) var(--paso-5);
}

.lienzo--ancho { max-width: 1400px; }

.columna-estrecha { max-width: 420px; }
.columna-media    { max-width: 640px; }

/* Contador de la navegación: cuántas cosas esperan en esa sección. */
.contador {
  display: inline-block;
  min-width: 1.1rem;
  padding: 0 4px;
  margin-left: 3px;
  background: var(--tinta);
  color: var(--papel);
  border-radius: 8px;
  font-size: 0.68rem;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
}

/* --- Formularios ---------------------------------------------------- */

.formulario {
  display: flex;
  flex-direction: column;
  gap: var(--paso-2);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.campo__etiqueta {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grafito-60);
}

.campo__ayuda {
  font-size: 0.78rem;
  color: var(--grafito-60);
}

.campo--casilla {
  flex-direction: row;
  align-items: center;
  gap: var(--paso-1);
}

.campo--casilla input { width: auto; }

.formulario--fila {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--paso-2);
}

.formulario--fila .campo { flex: 1 1 150px; }
.campo--ancho { flex: 2 1 240px; }
.campo--corto { flex: 0 1 120px; }

.grupo {
  border: var(--linea);
  border-radius: var(--radio);
  padding: var(--paso-2);
  margin: 0;
}

.grupo legend { padding: 0 6px; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grafito-60); }

input[type='text'],
input[type='email'],
input[type='password'],
input[type='date'],
input[type='number'],
input[type='url'],
select,
textarea {
  font: inherit;
  color: var(--tinta);
  background: var(--papel);
  border: var(--linea);
  border-radius: var(--radio);
  padding: 10px 12px;
  width: 100%;
}

textarea {
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.6;
  resize: vertical;
}

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

/* Un importe se escribe alineado a la derecha, como se lee. */
.entrada-importe { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Botones -------------------------------------------------------- */

.boton {
  display: inline-block;
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--grafito-35);
  border-radius: var(--radio);
  padding: 10px 18px;
  cursor: pointer;
  white-space: nowrap;
}

.boton:hover { border-color: var(--tinta); }

.boton--solido {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel);
}

.boton--solido:hover { background: var(--grafito); border-color: var(--grafito); }

.boton--pequeno { padding: 4px 12px; font-size: 0.8rem; }
.boton--peligro { border: 2px solid var(--tinta); font-weight: 500; }

.boton[disabled], .boton--inerte {
  opacity: 0.45;
  pointer-events: none;
}

.enlace-boton {
  font: inherit;
  font-size: 0.85rem;
  color: var(--grafito);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.enlace-boton:hover { color: var(--tinta); }

.botonera { display: flex; gap: var(--paso-2); align-items: center; flex-wrap: wrap; }

.acciones {
  display: flex;
  gap: var(--paso-2);
  justify-content: flex-end;
  align-items: center;
  font-size: 0.85rem;
  flex-wrap: wrap;
}

.acciones a { color: var(--grafito); text-decoration: underline; text-underline-offset: 3px; }
.acciones a:hover { color: var(--tinta); }
.acciones form { margin: 0; }

/* --- Avisos --------------------------------------------------------- */

.aviso {
  border: var(--linea);
  border-left: 3px solid var(--grafito);
  border-radius: var(--radio);
  background: var(--grafito-04);
  padding: 10px 14px;
  margin: 0 0 var(--paso-2);
  font-size: 0.9rem;
}

.aviso--error    { border-left-color: var(--tinta); font-weight: 500; }
.aviso--atencion { border-left-color: var(--grafito-60); }
.aviso--correcto { border-left-color: var(--tinta); }

.aviso a { color: inherit; }

/* --- Pantalla de acceso --------------------------------------------- */

.acceso {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--paso-3);
  background: var(--grafito-04);
}

.tarjeta-acceso {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: var(--papel);
  border: var(--linea);
  border-radius: var(--radio);
  padding: var(--paso-4) var(--paso-3) var(--paso-3);
  overflow: hidden;
}

.tarjeta-acceso--ancha { max-width: 34rem; }

/* Firma de la casa, la misma que en Cronos: la línea superior avanza con
   el minuto en curso. No es decoración, es el tiempo pasando. */
.segundero {
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--grafito-08);
}

.segundero span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--tinta);
  transform-origin: left center;
  transform: scaleX(0);
  animation: avance 60s linear infinite;
}

@keyframes avance {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .segundero span { animation: none; transform: scaleX(1); opacity: 0.25; }
}

.logotipo {
  font-weight: 300;
  font-size: 1.5rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  margin: 0 0 4px;
}

.logotipo__pie {
  font-size: 0.78rem;
  color: var(--grafito-60);
  margin: 0 0 var(--paso-3);
}

.acceso__pie {
  margin: var(--paso-3) 0 0;
  font-size: 0.8rem;
  color: var(--grafito-60);
  text-align: center;
}

.formulario--secundario { margin-top: var(--paso-2); text-align: center; }

.campo__codigo {
  font-size: 1.5rem;
  letter-spacing: 0.35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.pasos { margin: var(--paso-3) 0 0; padding-left: 1.2rem; }
.pasos li { margin-bottom: var(--paso-3); }

.qr {
  margin: var(--paso-2) 0;
  padding: var(--paso-2);
  border: var(--linea);
  border-radius: var(--radio);
  display: inline-block;
  background: var(--papel);
}
.qr svg { display: block; }

.qr__manual { margin-top: var(--paso-1); font-size: 0.85rem; }
.qr__manual summary { cursor: pointer; color: var(--grafito-60); }
.qr__clave code { font-size: 1rem; letter-spacing: 0.12em; word-break: break-all; }

.codigos {
  list-style: none;
  margin: var(--paso-2) 0;
  padding: var(--paso-2);
  border: var(--linea);
  border-radius: var(--radio);
  background: var(--grafito-04);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--paso-1) var(--paso-2);
}
.codigos code { font-size: 1rem; letter-spacing: 0.08em; }

/* --- Cabecera de pantalla -------------------------------------------- */

.cabecera-pantalla {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--paso-2);
  margin-bottom: var(--paso-3);
  flex-wrap: wrap;
}

.cabecera-pantalla .titulo { margin-bottom: 0; }
.cabecera-pantalla__botones { display: flex; gap: var(--paso-1); align-items: center; flex-wrap: wrap; }

/* --- Tablas de datos ------------------------------------------------ */

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.tabla th {
  text-align: left;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grafito-60);
  border-bottom: 1px solid var(--grafito-35);
  padding: 8px 10px;
}

.tabla td {
  border-bottom: var(--linea);
  padding: 10px;
  vertical-align: top;
}

.tabla tbody tr:hover { background: var(--grafito-04); }

.tabla tfoot td {
  border-bottom: 0;
  border-top: 2px solid var(--tinta);
  padding-top: 12px;
  font-weight: 500;
}

.tabla--compacta td, .tabla--compacta th { padding: 6px 10px; font-size: 0.85rem; }
.tabla--media td { vertical-align: middle; }

.tabla a { color: var(--tinta); }

.tabla__acciones { white-space: nowrap; text-align: right; }

.fila-inactiva { opacity: 0.5; }
.fila-atencion td { background: var(--grafito-04); }

/* Los importes se leen en columna: cifras tabulares y a la derecha. */
.cifra {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Un importe negativo canta con un punto delante, sin recurrir al rojo:
   la identidad es monocroma y en papel el color se pierde igual. */
.cifra--negativa { font-weight: 500; }

.cifra--negativa::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tinta);
  margin-right: 6px;
  vertical-align: middle;
}

.cifra--fuerte { font-weight: 500; }

.vacio {
  margin: var(--paso-4) 0;
  padding: var(--paso-4);
  text-align: center;
  color: var(--grafito-60);
  border: 1px dashed var(--grafito-18);
  border-radius: var(--radio);
}

.paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--paso-1);
  margin-top: var(--paso-3);
  flex-wrap: wrap;
}

.paginacion__pagina {
  display: inline-block;
  padding: 2px 8px;
  border: var(--linea);
  border-radius: var(--radio);
  font-size: 0.8rem;
  text-decoration: none;
  color: var(--grafito);
}

.paginacion__pagina.es-actual {
  background: var(--tinta);
  color: var(--papel);
  border-color: var(--tinta);
}

/* Columna de casillas de selección múltiple. */
.columna-marca { width: 34px; }
.columna-marca input { width: auto; margin: 0; }

/* Barra de acciones en lote, pegada al pie de la pantalla mientras se
   recorre una tabla larga: marcar veinte comisiones y tener que subir
   arriba para pulsar el botón es exactamente lo que no queremos. */
.lote {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--paso-2);
  background: var(--papel);
  border: 1px solid var(--grafito-35);
  border-radius: var(--radio);
  padding: var(--paso-2);
  margin-top: var(--paso-2);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.06);
}

.lote__cuenta {
  font-size: 0.85rem;
  color: var(--grafito);
  margin-right: auto;
  align-self: center;
}

.lote .campo { margin: 0; }

/* --- KPIs ------------------------------------------------------------ */

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  background: var(--grafito-18);
  border: 1px solid var(--grafito-18);
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: var(--paso-4);
}

.tarjeta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--papel);
  padding: var(--paso-2) var(--paso-2) 14px;
  text-decoration: none;
  color: inherit;
}

/* Una tarjeta que enlaza a la acción que hay que hacer se comporta como
   un botón: la bandeja del administrador es toda ella accionable. */
a.tarjeta:hover { background: var(--grafito-04); }

.tarjeta--marcada { background: var(--tinta); color: var(--papel); }
a.tarjeta--marcada:hover { background: var(--grafito); }

.tarjeta__etiqueta {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grafito-60);
}

.tarjeta--marcada .tarjeta__etiqueta,
.tarjeta--marcada .tarjeta__pie { color: var(--grafito-35); }

.tarjeta__cifra {
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1.15;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.tarjeta__de  { font-size: 1rem; color: var(--grafito-35); }
.tarjeta__pie { font-size: 0.78rem; color: var(--grafito-60); }

/* --- Resumen de cifras en línea -------------------------------------- */

.resumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--paso-4);
  border-top: 2px solid var(--tinta);
  border-bottom: var(--linea);
  padding: var(--paso-2) 0;
  margin-bottom: var(--paso-3);
}

.resumen__dato { display: flex; flex-direction: column; }

.resumen__cifra {
  font-size: 1.6rem;
  font-weight: 300;
  text-align: left;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.resumen__etiqueta {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grafito-60);
}

.resumen__dato--destacado {
  border-left: 2px solid var(--tinta);
  padding-left: var(--paso-2);
}

.resumen .boton { margin-left: auto; }

/* --- Filtros y buscador ---------------------------------------------- */

.filtros {
  position: relative;
  z-index: 5;
  border: var(--linea);
  border-radius: var(--radio);
  padding: var(--paso-2);
  margin-bottom: var(--paso-3);
  align-items: flex-end;
}

.filtros .botonera { align-self: flex-end; padding-bottom: 1px; }

.buscador {
  display: flex;
  flex-wrap: wrap;
  gap: var(--paso-1);
  align-items: center;
  margin-bottom: var(--paso-3);
}

.buscador__campo { flex: 1 1 18rem; }
.buscador__campo input { width: 100%; }
.buscador__filtro { flex: 0 1 12rem; }

/* Sin esto, input[type=search] se pinta con el estilo nativo del
   navegador —esquinas redondeadas, alto distinto, aspa propia— y queda
   descolgado del resto de controles de la barra. */
.buscador input[type='search'] {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  color: inherit;
  background: var(--papel);
  border: var(--linea);
  border-radius: var(--radio);
  padding: 6px 10px;
  height: auto;
  line-height: 1.4;
}

.buscador input[type='search']:focus { outline: none; border-color: var(--tinta); }

.buscador input[type='search']::-webkit-search-decoration,
.buscador input[type='search']::-webkit-search-cancel-button,
.buscador input[type='search']::-webkit-search-results-button { -webkit-appearance: none; }

.buscador select, .buscador .boton { height: 34px; padding-top: 0; padding-bottom: 0; }

.resultado-total { margin: 0 0 var(--paso-1); font-size: 0.8rem; color: var(--grafito-60); }

/* --- Pestañas -------------------------------------------------------- */

.pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--paso-3);
  row-gap: var(--paso-1);
  border-bottom: 1px solid var(--grafito-18);
  margin-bottom: var(--paso-3);
}

.pestanas a {
  color: var(--grafito-60);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0 0 8px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.pestanas a:hover { color: var(--tinta); }

/* `.pestanas a` —clase más elemento— gana en especificidad a una clase
   sola, así que la pestaña activa necesita las dos palabras. Sin esto se
   pinta exactamente igual que las demás. */
.pestanas a.pestanas__activa {
  color: var(--tinta);
  font-weight: 500;
  border-bottom-color: var(--tinta);
}

.pestanas__cuenta { font-size: 0.72rem; color: var(--grafito-60); margin-left: 4px; }

/* --- Etiquetas y estados --------------------------------------------- */

.etiqueta {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--grafito-35);
  border-radius: 10px;
  font-size: 0.68rem;
  line-height: 1.6;
  color: var(--grafito-60);
  vertical-align: middle;
  white-space: nowrap;
}

/* Los estados de una comisión se distinguen por peso y contraste, no por
   color: la identidad es monocroma y así se leen igual en el PDF que
   alguien imprime para revisar una liquidación.

   El orden visual sigue el orden del ciclo: cuanto más cerca del dinero,
   más contraste tiene la etiqueta. */
.estado {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--grafito-35);
  border-radius: 10px;
  font-size: 0.68rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  white-space: nowrap;
  vertical-align: middle;
  color: var(--grafito-60);
}

/* Todavía no es nada: solo un documento detectado. */
.estado--pendiente_asignacion { border-style: dashed; }

/* Previsión: existe, pero no es deuda. Se marca en trazo discontinuo
   justo para que nadie la confunda con dinero ganado. */
.estado--prevista { border-style: dashed; color: var(--grafito-90); }

/* Espera una decisión humana. */
.estado--pendiente_validacion { border-color: var(--grafito-90); color: var(--grafito-90); font-weight: 500; }

/* Derecho generado: ya es suyo, pero aún no cobrable. */
.estado--generada { border-color: var(--grafito-90); color: var(--tinta); }

/* Pagable: entra en el próximo cierre. */
.estado--pagable { border-color: var(--tinta); color: var(--tinta); font-weight: 500; }

/* Ya está en una liquidación. */
.estado--liquidada { border-color: var(--tinta); background: var(--grafito-08); color: var(--tinta); }

/* Cobrada. Es el final feliz y se pinta en negativo. */
.estado--pagada { border-color: var(--tinta); background: var(--tinta); color: var(--papel); font-weight: 500; }

/* Descartada: tachada, que se lee igual en gris y en papel. */
.estado--descartada { border-style: dotted; text-decoration: line-through; }

/* Estados de una liquidación. */
.estado--pendiente_factura { border-color: var(--grafito-90); color: var(--grafito-90); }
.estado--pendiente_pago    { border-color: var(--tinta); color: var(--tinta); font-weight: 500; }
.estado--anulada           { border-style: dotted; text-decoration: line-through; }

/* Severidad de una incidencia. */
.estado--alta  { border-color: var(--tinta); background: var(--tinta); color: var(--papel); font-weight: 500; }
.estado--media { border-color: var(--grafito-90); color: var(--grafito-90); }
.estado--baja  { color: var(--grafito-60); }

/* Estado de una incidencia. */
.estado--abierta     { border-color: var(--tinta); color: var(--tinta); }
.estado--en_revision { border-style: dashed; color: var(--grafito-90); }
.estado--resuelta    { color: var(--grafito-60); }
.estado--ignorada    { border-style: dotted; color: var(--grafito-60); }

.marca-rol {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--grafito-35);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 6px;
  color: var(--grafito);
  vertical-align: middle;
}

.etiqueta-pvd {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--tinta);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 6px;
  color: var(--tinta);
  vertical-align: middle;
}

.porcentaje {
  display: inline-block;
  min-width: 54px;
  border: 1px solid var(--grafito-35);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Un porcentaje que no salió de la tarifa estándar tiene que cantar. */
.porcentaje--ajustado {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel);
  font-weight: 500;
}

/* --- Bandeja de trabajo del administrador ---------------------------- */
/* La portada no es un cuadro de mandos: es una lista de lo que necesita
   intervención ahora, ordenada por prioridad y antigüedad. Cada fila
   enlaza directamente a la acción. */

.bandeja {
  list-style: none;
  margin: 0 0 var(--paso-4);
  padding: 0;
  border: var(--linea);
  border-radius: var(--radio);
}

.bandeja__item {
  display: flex;
  align-items: baseline;
  gap: var(--paso-2);
  padding: 10px var(--paso-2);
  border-bottom: 1px solid var(--grafito-08);
  text-decoration: none;
  color: inherit;
}

.bandeja__item:last-child { border-bottom: 0; }
.bandeja__item:hover { background: var(--grafito-04); }

/* Marca de prioridad: una barra a la izquierda, más gruesa cuanto más
   urgente. Sin color, otra vez a propósito. */
.bandeja__item--alta   { border-left: 3px solid var(--tinta); }
.bandeja__item--media  { border-left: 3px solid var(--grafito-60); }
.bandeja__item--baja   { border-left: 3px solid var(--grafito-18); }

.bandeja__que    { flex: 1 1 auto; }
.bandeja__que strong { font-weight: 500; }
.bandeja__cuando { flex: 0 0 auto; font-size: 0.78rem; color: var(--grafito-60); }
.bandeja__cifra  { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 500; }

/* --- Ficha (pares dato/valor) ---------------------------------------- */

.ficha {
  border: var(--linea);
  border-radius: var(--radio);
  padding: var(--paso-3);
  margin-bottom: var(--paso-3);
}

.ficha__datos { margin: 0; }

.ficha__fila {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: var(--paso-2);
  padding: var(--paso-1) 0;
  border-bottom: 1px solid var(--grafito-08);
}

.ficha__fila:last-child { border-bottom: 0; }

.ficha__fila dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grafito-60);
  padding-top: 3px;
}

.ficha__fila dd { margin: 0; }

.ficha__fila--destacada {
  background: var(--grafito-04);
  margin: 0 calc(-1 * var(--paso-2));
  padding: var(--paso-2);
}

.volcado {
  margin: 0;
  padding: var(--paso-2);
  background: var(--grafito-04);
  border: 1px solid var(--grafito-18);
  border-radius: var(--radio);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 30rem;
  overflow: auto;
}

.recuadro {
  border: var(--linea);
  border-radius: var(--radio);
  padding: var(--paso-3);
  margin-bottom: var(--paso-3);
}

.recuadro--peligro { border: 2px solid var(--tinta); }

.recuadro__titulo { margin: 0 0 var(--paso-1); font-size: 1rem; font-weight: 500; }
.recuadro .campo__ayuda { margin-bottom: var(--paso-2); }
.recuadro form { margin-top: var(--paso-2); }

.bloque {
  margin-top: var(--paso-4);
  padding-top: var(--paso-2);
  border-top: var(--linea);
}

.dos-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--paso-4);
  margin-top: var(--paso-4);
}

.dos-columnas .subtitulo { margin-top: 0; }

/* --- Trazabilidad de una comisión ------------------------------------ */
/* «El comercial debe poder entender exactamente de dónde sale cualquier
   cifra.» Esta es esa pantalla: la cadena completa, de cliente a euro. */

.rastro {
  list-style: none;
  margin: 0 0 var(--paso-3);
  padding: 0;
  border: var(--linea);
  border-radius: var(--radio);
  counter-reset: paso;
}

.rastro__paso {
  display: grid;
  grid-template-columns: 2rem 11rem 1fr;
  gap: var(--paso-2);
  align-items: baseline;
  padding: 10px var(--paso-2);
  border-bottom: 1px solid var(--grafito-08);
}

.rastro__paso:last-child { border-bottom: 0; }

/* El último paso es el importe: se separa con la misma línea gruesa que
   cierra el total de una tabla. */
.rastro__paso--total {
  border-top: 2px solid var(--tinta);
  border-bottom: 0;
  font-weight: 500;
  background: var(--grafito-04);
}

.rastro__paso::before {
  counter-increment: paso;
  content: counter(paso);
  font-size: 0.72rem;
  color: var(--grafito-35);
  font-variant-numeric: tabular-nums;
}

.rastro__que {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grafito-60);
}

.rastro__valor { min-width: 0; word-break: break-word; }
.rastro__valor code { font-family: var(--mono); font-size: 0.82rem; }

/* Nota de por qué salió ese número, cuando hubo una regla que explicar. */
.rastro__nota { display: block; font-size: 0.78rem; color: var(--grafito-60); margin-top: 2px; }

/* --- Línea de tiempo de estados -------------------------------------- */

.recorrido {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--paso-1);
  margin: 0 0 var(--paso-3);
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
}

.recorrido__hito {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--grafito-35);
}

.recorrido__hito::after {
  content: '›';
  margin-left: var(--paso-1);
  color: var(--grafito-18);
}

.recorrido__hito:last-child::after { content: ''; margin: 0; }

.recorrido__hito--hecho  { color: var(--grafito-90); }
.recorrido__hito--actual { color: var(--tinta); font-weight: 500; }

.recorrido__fecha { color: var(--grafito-60); font-size: 0.72rem; }

/* --- Desglose de líneas de un documento ------------------------------ */

.linea-no-comisionable td { color: var(--grafito-60); }
.linea-sin-clasificar td { background: var(--grafito-04); }

/* --- Incidencias ----------------------------------------------------- */

.incidencia {
  border: var(--linea);
  border-radius: var(--radio);
  padding: var(--paso-2);
  margin-bottom: var(--paso-2);
}

.incidencia--alta { border-left: 3px solid var(--tinta); }

.incidencia__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--paso-2);
  margin-bottom: var(--paso-1);
  font-size: 0.82rem;
  flex-wrap: wrap;
}

.incidencia__resumen { margin: 0 0 var(--paso-1); font-weight: 500; }
.incidencia__datos { margin: var(--paso-1) 0; font-size: 0.85rem; }
.incidencia__datos summary { cursor: pointer; color: var(--grafito-60); }
.incidencia__datos pre {
  margin: var(--paso-1) 0 0;
  padding: var(--paso-1) var(--paso-2);
  background: var(--grafito-04);
  border-radius: var(--radio);
  font-family: var(--mono);
  font-size: 0.78rem;
  overflow-x: auto;
}
.incidencia__pie { margin: var(--paso-1) 0 0; font-size: 0.85rem; }
.incidencia__acciones { display: flex; flex-wrap: wrap; gap: var(--paso-1); align-items: flex-end; }

/* --- Auditoría -------------------------------------------------------- */

.tabla--auditoria td { vertical-align: top; font-size: 0.85rem; }

.cambio {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0 var(--paso-2) 4px 0;
}

.cambio__campo {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grafito-60);
}

.cambio__antes  { text-decoration: line-through; color: var(--grafito-60); }
.cambio__flecha { color: var(--grafito-35); }
.cambio__despues { font-weight: 500; }

/* --- Diagnóstico ------------------------------------------------------ */

.chequeo {
  list-style: none;
  margin: 0 0 var(--paso-3);
  padding: 0;
  border: var(--linea);
  border-radius: var(--radio);
}

.chequeo__punto {
  display: grid;
  grid-template-columns: 1.4rem 16rem 1fr;
  gap: var(--paso-2);
  align-items: baseline;
  padding: 8px var(--paso-2);
  border-bottom: 1px solid var(--grafito-08);
  font-size: 0.88rem;
}

.chequeo__punto:last-child { border-bottom: 0; }

.chequeo__marca { font-weight: 500; text-align: center; }
.chequeo__nombre { color: var(--grafito-60); font-size: 0.8rem; }
.chequeo__detalle { word-break: break-word; }

.chequeo__punto--error  { background: var(--grafito-08); font-weight: 500; }
.chequeo__punto--aviso  { background: var(--grafito-04); }

/* --- Puesta en marcha y actualización -------------------------------- */

.lista-estado {
  list-style: none;
  margin: var(--paso-3) 0;
  padding: 0;
  text-align: left;
  border: var(--linea);
  border-radius: var(--radio);
}

.lista-estado__item {
  display: flex;
  gap: var(--paso-2);
  align-items: flex-start;
  padding: var(--paso-1) var(--paso-2);
  border-bottom: 1px solid var(--grafito-08);
  color: var(--grafito-60);
}

.lista-estado__item:last-child { border-bottom: 0; }
.lista-estado__item.es-hecho  { color: var(--tinta); }
.lista-estado__item.es-actual { background: var(--grafito-04); color: var(--tinta); }

.lista-estado__marca { width: 1.2rem; text-align: center; font-weight: 500; }
.lista-estado .campo__ayuda { display: block; }

/* --- Modal ------------------------------------------------------------ */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--paso-2);
  z-index: 50;
}

.modal[hidden] { display: none; }

.modal__caja {
  background: var(--papel);
  border-radius: var(--radio);
  padding: var(--paso-3);
  width: 100%;
  max-width: 30rem;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}

.modal__botones {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--paso-2);
  margin-top: var(--paso-2);
}

/* --- Notificaciones --------------------------------------------------- */

.notificacion {
  display: flex;
  gap: var(--paso-2);
  align-items: flex-start;
  padding: var(--paso-2);
  border-bottom: 1px solid var(--grafito-08);
}

.notificacion:last-child { border-bottom: 0; }
.notificacion--nueva { background: var(--grafito-04); border-left: 3px solid var(--tinta); }

.notificacion__cuerpo { flex: 1 1 auto; min-width: 0; }
.notificacion__titulo { margin: 0 0 2px; font-weight: 500; }
.notificacion__mensaje { margin: 0; font-size: 0.88rem; color: var(--grafito); }
.notificacion__cuando { flex: 0 0 auto; font-size: 0.75rem; color: var(--grafito-60); white-space: nowrap; }

.plegable {
  margin: var(--paso-3) 0;
  padding: var(--paso-2) var(--paso-3);
  border: var(--linea);
  border-radius: var(--radio);
  background: var(--grafito-04);
}

.plegable > summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--tinta);
}

.plegable[open] > summary { margin-bottom: var(--paso-2); }

.lista-explicada {
  margin: var(--paso-2) 0 0;
  padding-left: var(--paso-3);
  color: var(--grafito-60);
  font-size: .88rem;
  line-height: 1.6;
}

.lista-explicada li { margin-bottom: var(--paso-2); }
.lista-explicada strong { color: var(--tinta); }

.lista-lisa { list-style: none; margin: 0; padding: 0; border: var(--linea); border-radius: var(--radio); }

/* --- Membrete e impresión --------------------------------------------
   La aplicación no monta PDFs con una librería: la liquidación se imprime
   desde el navegador con «Imprimir → Guardar como PDF». Aquí se le pone
   membrete y se le quitan los adornos que en papel solo estorban. */

.membrete {
  display: none;                    /* en pantalla no existe */
  align-items: center;
  gap: var(--paso-2);
  margin: 0 0 var(--paso-3);
  padding: 0 0 var(--paso-2);
  border-bottom: 2px solid var(--tinta);
}

.membrete__titulo {
  flex: 1 1 auto;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.membrete__fecha {
  flex: 0 0 auto;
  font-size: 0.78rem;
  color: var(--grafito-60);
  font-variant-numeric: tabular-nums;
}

@media print {
  .membrete { display: flex; }

  .barra,
  .buscador,
  .filtros,
  .paginacion,
  .cabecera-pantalla__botones,
  .acciones,
  .boton,
  .enlace-boton,
  .no-imprimir { display: none; }

  .lienzo { padding: 0; max-width: none; }

  body { background: #fff; color: #000; }

  /* Que una fila de la tabla no se parta entre dos páginas. */
  tr, .rastro__paso, .bandeja__item { break-inside: avoid; }

  /* En papel un enlace subrayado en gris solo añade ruido. */
  a { color: #000; text-decoration: none; }
}

/* --- Responsive ------------------------------------------------------- */

@media (max-width: 900px) {
  .rastro__paso { grid-template-columns: 1.6rem 9rem 1fr; }
  .chequeo__punto { grid-template-columns: 1.4rem 1fr; }
  .chequeo__detalle { grid-column: 2; }
}

@media (max-width: 820px) {
  .barra {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      'marca sesion'
      'nav   nav';
    padding-top: 10px;
  }

  .navegacion { border-top: 1px solid var(--grafito-08); }
  .ficha__fila { grid-template-columns: 1fr; gap: 2px; }
}

@media (max-width: 640px) {
  .barra { gap: 0 var(--paso-2); padding: 0 var(--paso-2); }
  .sesion__nombre { display: none; }
  .lienzo { padding: var(--paso-3) var(--paso-2) var(--paso-4); }
  /* En el móvil la cabecera va justa de ancho: el logotipo cede unos
     píxeles antes de que los enlaces empiecen a desplazarse. */
  .marca { gap: var(--paso-1); }
  .marca-agarimo--barra { height: 19px; }

  .tarjeta__cifra { font-size: 1.4rem; }
  .resumen { gap: var(--paso-3); }
  .resumen .boton { margin-left: 0; width: 100%; text-align: center; }
  .acciones { justify-content: flex-start; }
  .codigos { grid-template-columns: 1fr; }

  .rastro__paso { grid-template-columns: 1fr; gap: 2px; }
  .rastro__paso::before { display: none; }

  .bandeja__item { flex-wrap: wrap; }
  .bandeja__cuando { flex: 1 0 100%; }

  /* Las columnas secundarias se esconden antes que aparezca una barra de
     desplazamiento horizontal en toda la pantalla. */
  .tabla--comisiones th:nth-child(4),
  .tabla--comisiones td:nth-child(4),
  .tabla--comisiones th:nth-child(5),
  .tabla--comisiones td:nth-child(5) { display: none; }
}