/* Sistema visual de la plataforma de informes de la INC.
   Tema unico y claro: el informe es una pieza de lectura, casi impresa.
   Todos los colores de dato salieron del validador de paleta, no del ojo.
   Los contrastes anotados estan medidos contra el fondo #f0edee. */

:root {
  /* superficies */
  --fondo: #f0edee;
  --panel: #ffffff;
  --panel-hundido: #e7e2e2;
  --panel-oscuro: #36393f;   /* barras y cabecera del informe */

  /* lineas: recesivas a proposito */
  --linea-tenue: #e0dad9;    /* 1,2:1 */
  --linea: #cfc7c5;          /* 1,5:1 */
  --linea-fuerte: #c2b8b2;   /* 1,7:1 */

  /* tinta */
  --tinta-1: #36393f;        /* 10,0:1 */
  --tinta-2: #5c665a;        /*  5,2:1 */
  --tinta-3: #626d6d;        /*  4,5:1 */
  --tinta-clara: #f0edee;    /* sobre superficies oscuras */

  /* SERIES. Solo salen de la paleta del cliente. Medido contra el fondo #f0edee:
     #C2B8B2 1,7:1 | #6D7878 3,9:1 | #5C665A 5,2:1 | #36393F 10,0:1
     La paleta es de neutros: ningun color llega al piso de croma, o sea que ninguno
     distingue series por tono. Funciona igual porque cada grafico del informe tiene
     UN dato y UNA referencia, y esos dos se separan por luminosidad.
     REGLA DURA: --serie-dato y --texto-2 (#5C665A y #6D7878) NUNCA en el mismo
     grafico. Medido, su separacion es 6,8 y el piso es 15: nadie los distingue,
     con o sin daltonismo. Contra #C2B8B2 la separacion es 29. */
  --serie-dato: #5c665a;       /* el valor real */
  --serie-referencia: #c2b8b2; /* la meta y las pistas de los medidores */
  --serie-contraste: #36393f;  /* un segundo dato, si alguna vez hace falta */

  /* ESTADO. Tambien de la paleta: no hay verde ni rojo de semaforo.
     La lectura de bien y mal la hacen el signo, la flecha y el peso visual.
     Lo que esta por debajo de la meta usa la tinta mas fuerte, para que pese mas. */
  --bueno: #6d7878;            /* 3,9:1, deliberadamente mas tenue */
  --atencion: #5c665a;         /* 5,2:1 */
  --critico: #36393f;          /* 10,0:1, el que se lleva la mirada */

  /* Acento de la interfaz: el estado activo de un control. De la paleta. */
  --acento: #5c665a;
  --acento-fuerte: #4a5349;

  /* identidad Cemento Vallemi: vive en la imagen y en marcas de marca, nunca en una serie */
  --marca: #c0392b;

  /* forma: un solo sistema de esquinas. Paneles rectos con 2px, controles pildora. */
  --radio-panel: 2px;
  --radio-bloque: 8px;   /* el de los paneles de BIS INC */
  --radio-control: 999px;

  --sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;

  /* motion: estado, no decoracion */
  --curva: cubic-bezier(0.23, 1, 0.32, 1);
  --rapido: 160ms;
  --normal: 220ms;

  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta-1);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* ============ barra de la plataforma ============ */
.barra {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 56px;
  padding: 0 20px;
  background: var(--panel-oscuro);
  color: var(--tinta-clara);
  border-bottom: 1px solid var(--panel-oscuro);
}

.marca-plataforma {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.marca-plataforma .nombre { color: var(--tinta-clara); }
.marca-plataforma .cliente { color: #b9b4b0; font-weight: 500; font-size: 12px; }

.barra-informes { display: flex; gap: 4px; margin-left: 12px; }

.pestania {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: #d5d1ce;
  font: inherit;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: var(--radio-control);
  cursor: pointer;
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
.pestania:hover { background: #464a51; color: #fff; }
.pestania:active { transform: scale(0.98); }
.pestania[aria-selected="true"] {
  background: #4a4f57;
  color: #fff;
  border-color: #9aa79a;
}
.pestania:focus-visible { outline: 2px solid #9aa79a; outline-offset: 2px; }
.pestania[disabled] { color: #6f747b; cursor: not-allowed; }

.barra-acciones { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.usuario {
  display: flex; align-items: center; gap: 8px;
  color: #d5d1ce; font-size: 13px;
}
.usuario .inicial {
  width: 26px; height: 26px; border-radius: var(--radio-control);
  display: grid; place-items: center;
  background: #4a4f57; color: #fff;
  font-size: 12px; font-weight: 700;
}

.boton {
  appearance: none;
  border: 1px solid var(--linea-fuerte);
  background: var(--panel);
  color: var(--tinta-1);
  font: inherit; font-size: 13px;
  padding: 7px 14px;
  border-radius: var(--radio-control);
  cursor: pointer;
  transition: background var(--rapido) var(--curva), transform var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
.boton:hover { background: var(--panel-hundido); border-color: var(--tinta-3); }
.boton:active { transform: scale(0.98); }
.boton:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.boton.primario { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; }
.boton.primario:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); }

/* Los botones de la barra oscura llevan su propio traje. */
.barra .boton {
  background: transparent;
  border-color: #5b6068;
  color: #e8e5e2;
}
.barra .boton:hover { background: #464a51; border-color: #7c828b; }

/* ============ fila de filtros: una sola, arriba de todo lo que alcanza ============ */
.filtros {
  position: sticky;
  top: 56px;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 12px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--linea);
}

.filtro { display: flex; align-items: center; gap: 10px; }
.filtro-etiqueta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.segmentos {
  display: inline-flex;
  padding: 3px;
  background: var(--panel-hundido);
  border: 1px solid var(--linea);
  border-radius: var(--radio-control);
}
.segmento {
  appearance: none; border: 0; background: transparent;
  color: var(--tinta-2); font: inherit; font-size: 13px;
  padding: 5px 14px; border-radius: var(--radio-control); cursor: pointer;
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.segmento:hover { color: var(--tinta-1); }
.segmento[aria-pressed="true"] { background: var(--acento); color: #fff; font-weight: 600; }
.segmento:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.meses { display: flex; gap: 3px; flex-wrap: wrap; }
.mes {
  appearance: none;
  border: 1px solid var(--linea);
  background: var(--panel);
  color: var(--tinta-2);
  font: inherit; font-size: 12px;
  min-width: 44px;
  padding: 5px 8px;
  border-radius: var(--radio-panel);
  cursor: pointer;
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
.mes:hover:not([disabled]) { border-color: var(--tinta-3); color: var(--tinta-1); }
.mes[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 700; }
.mes[disabled] { color: #a9a19e; cursor: not-allowed; border-style: dashed; background: var(--panel-hundido); }
.mes:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.zoom { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--tinta-3); font-size: 12px; }

/* ============ lienzo ============ */
.escenario {
  padding: 28px 20px 60px;
  display: flex;
  justify-content: center;
}

.lienzo {
  position: relative;
  width: 1400px;
  height: 1980px;
  flex: none;
  transform-origin: top center;
  background: var(--panel);
  border: 1px solid var(--linea);
  box-shadow: 0 18px 44px rgba(54, 57, 63, 0.14);
}

/* marcas de esquina: la unica cita al plano tecnico que sobrevive */
.esquina {
  position: absolute;
  width: 26px; height: 26px;
  border: 2px solid var(--linea-fuerte);
}
.esquina.si { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.esquina.sd { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.esquina.ii { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.esquina.id { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

/* cabecera del informe */
.cabecera {
  position: absolute;
  top: 60px; left: 70px; right: 70px;
  text-align: center;
}
.cabecera .titulo {
  margin: 0;
  font-size: 58px;
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
  text-transform: uppercase;
  color: var(--tinta-1);
}
.cabecera .subtitulo {
  margin: 12px 0 0;
  font-size: 16px;
  color: var(--tinta-2);
  text-wrap: balance;
}
.cabecera .periodo {
  margin-top: 14px;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--tinta-3);
  border: 1px solid var(--linea);
  border-radius: var(--radio-panel);
  padding: 5px 12px;
}
.cabecera .regla { height: 1px; background: var(--linea); margin: 22px 0 0; }

.sello {
  position: absolute;
  top: 52px; left: 70px;
  width: 96px; height: 96px;
  border: 2px solid var(--linea-fuerte);
  border-radius: 50%;
  display: grid; place-items: center;
  text-align: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--tinta-3);
  line-height: 1.35;
}
.sello b { display: block; color: var(--marca); font-size: 13px; letter-spacing: 0.02em; }

.folio {
  position: absolute;
  top: 52px; right: 70px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-panel);
  padding: 10px 14px;
  text-align: right;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--tinta-3);
}
.folio b { display: block; font-size: 20px; color: var(--tinta-1); letter-spacing: 0; }

/* columnas de objetos */
.columna {
  position: absolute;
  top: 452px;
  width: 380px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.columna.izquierda { left: 70px; }
.columna.derecha { right: 70px; }

/* Anatomia de bloque, calcada de los paneles de BIS INC: radio de 8px, relleno de
   16px, borde superior de acento de 2px y rotulo de 11px en mayusculas con tracking
   de 0.14em. Misma estructura para que las dos plataformas se lean igual. */
.objeto {
  position: relative;
  background: var(--fondo);
  /* El relleno del objeto se separa del lienzo blanco por solo 1,16:1, que es poco.
     Quien hace la separacion de verdad es el borde, y por eso es el paso fuerte. */
  border: 1px solid var(--linea-fuerte);
  border-top: 2px solid var(--acento);
  border-radius: var(--radio-bloque);
  padding: 16px;
}

.objeto-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  min-height: 26px;
}

.objeto-titulo {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.35;
  color: var(--tinta-3);
}

.objeto-fuente {
  margin: 7px 0 0;
  font-size: 9px;
  letter-spacing: 0.02em;
  color: var(--tinta-3);
}
.cifra-linea { display: flex; align-items: baseline; gap: 7px; }
.cifra {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--tinta-1);
  font-variant-numeric: proportional-nums;
}
.cifra-unidad { font-size: 13px; color: var(--tinta-3); }

.comparacion { margin-top: 6px; display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.comparacion-valor { font-weight: 700; }
.comparacion-detalle { color: var(--tinta-3); }
.comparacion.bueno .comparacion-valor { color: var(--bueno); }
.comparacion.malo .comparacion-valor { color: var(--critico); }
.comparacion.neutro .comparacion-valor { color: var(--tinta-3); }

.objeto-grafico { margin-top: 14px; }
.objeto-grafico svg { display: block; width: 100%; height: auto; }
.objeto-nota { margin: 10px 0 0; font-size: 11.5px; color: var(--tinta-3); }

.leyenda { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 14px; font-size: 11.5px; color: var(--tinta-2); }
.leyenda-item { display: inline-flex; align-items: center; gap: 6px; }
.punto { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.punto.raya { width: 14px; height: 2px; border-radius: 1px; }

.brecha-lista { margin-top: 4px; display: flex; flex-direction: column; gap: 8px; }
.brecha-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.brecha-nombre { color: var(--tinta-2); font-size: 13px; }
.brecha-valor { font-size: 17px; font-weight: 700; font-variant-numeric: proportional-nums; }
.brecha-valor.bueno { color: var(--bueno); }
.brecha-valor.malo { color: var(--critico); }
.brecha-valor.neutro { color: var(--tinta-3); }

/* zona central: la bolsa y sus cotas */
.centro {
  position: absolute;
  top: 452px;
  left: 50%;
  transform: translateX(-50%);
  width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bolsa {
  width: 380px;
  /* La proporcion reserva el espacio antes de que la imagen baje. Sin esto el
     layout salta al cargar y las lineas de llamada se trazan contra un hueco de
     altura cero. Es el alto real del archivo: 709 x 1100. */
  aspect-ratio: 709 / 1100;
  height: auto;
  filter: drop-shadow(0 16px 30px rgba(54, 57, 63, 0.28));
}
/* Bloque colgado debajo de la bolsa: ocupa todo el ancho de la columna del medio. */
.objeto-central {
  width: 100%;
  margin-top: 30px;
}

.bolsa-pie {
  margin-top: 10px;
  text-align: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--tinta-3);
}

/* Tira de totales del ejercicio. Vive arriba, cruzando el ancho del informe:
   abajo de la bolsa robaba el espacio por donde tienen que pasar las llamadas de
   los bloques laterales. */
.cotas {
  position: absolute;
  top: 320px;
  left: 70px;
  right: 70px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cota {
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-panel);
  background: var(--fondo);
  padding: 10px 14px;
  text-align: center;
}
.cota-titulo { font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tinta-3); }
.cota-valor { font-family: var(--mono); font-size: 21px; font-weight: 700; color: var(--tinta-1); margin-top: 2px; }
.cota-unidad { font-size: 11px; color: var(--tinta-3); }

/* capa de conectores: une cada objeto con el centro */
.conectores { position: absolute; inset: 0; pointer-events: none; }

/* franja de cierre del ejercicio */
/* La posicion vertical la calcula el shell al dibujar: ver apilarCierre en app.js.
   Un top escrito a mano se encima en cuanto un bloque de arriba crece. */
.franja {
  position: absolute;
  left: 70px; right: 70px;
  top: 0;
}
.franja-titulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: 10px;
}
.franja-grilla {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--linea-fuerte);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-panel);
  overflow: hidden;
}
.franja-celda { background: var(--fondo); padding: 14px 14px 16px; }
.franja-etiqueta { font-size: 11px; color: var(--tinta-3); min-height: 28px; }
.franja-valor {
  margin-top: 4px;
  font-size: 19px;
  font-weight: 700;
  color: var(--tinta-1);
  font-variant-numeric: proportional-nums;
}
.franja-desv { margin-top: 4px; font-size: 11.5px; font-weight: 600; }
.franja-desv.bueno { color: var(--bueno); }
.franja-desv.malo { color: var(--critico); }
.franja-desv.neutro { color: var(--tinta-3); }

/* pie del informe */
.pie {
  position: absolute;
  left: 70px; right: 70px;
  top: 0;
}
.pie-regla { height: 1px; background: var(--linea); margin-bottom: 16px; }
.ficha {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--linea-fuerte);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-panel);
  overflow: hidden;
}
.ficha-celda { background: var(--panel); padding: 12px 14px; }
.ficha-titulo { font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tinta-3); }
.ficha-valor { margin-top: 3px; font-size: 15px; font-weight: 600; color: var(--tinta-1); }

.aviso {
  margin-top: 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-panel);
  padding: 11px 14px;
  font-size: 12px;
  color: var(--tinta-2);
  background: var(--fondo);
}
.aviso .icono { color: var(--atencion); font-weight: 700; flex: none; }
.aviso.discrepancia .icono { color: var(--acento); }

/* ============ tooltip ============ */
.tooltip {
  position: fixed;
  top: 0; left: 0;
  z-index: 60;
  pointer-events: none;
  min-width: 190px;
  background: var(--panel-oscuro);
  color: #e8e5e2;
  border: 1px solid #4a4f57;
  border-radius: var(--radio-panel);
  padding: 9px 11px;
  box-shadow: 0 10px 28px rgba(54, 57, 63, 0.3);
  font-size: 12px;
}
.tooltip .titulo { font-weight: 700; margin-bottom: 6px; color: #fff; }
.tooltip .fila { display: flex; align-items: center; gap: 7px; margin-top: 3px; color: #d5d1ce; }
.tooltip .fila b { margin-left: auto; color: #fff; font-variant-numeric: tabular-nums; }

/* ============ svg ============ */
.grafico .tick {
  font-family: var(--mono);
  font-size: 10px;
  fill: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}
.grafico .cifra-anillo {
  font-family: var(--sans);
  font-size: 30px;
  font-weight: 700;
  fill: var(--tinta-1);
}
.zona-hover { cursor: crosshair; }

/* ============ tabla equivalente ============ */
.tabla-envoltorio { margin: 0 auto; max-width: 1400px; padding: 0 20px 60px; }
.tabla-titulo { font-size: 15px; font-weight: 700; margin: 0 0 10px; }
.tabla-scroll { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio-panel); background: var(--panel); }
table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
th, td { padding: 8px 12px; text-align: right; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; position: sticky; left: 0; background: var(--panel); }
thead th { background: var(--panel-hundido); color: var(--tinta-2); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }
thead th:first-child { background: var(--panel-hundido); }
tbody tr { border-top: 1px solid var(--linea-tenue); }
tbody td { color: var(--tinta-1); font-variant-numeric: tabular-nums; }
tbody tr.sin-dato td, tbody tr.sin-dato th { color: var(--tinta-3); font-style: italic; }

/* ============ pantalla de ingreso ============ */
body.modo-ingreso { min-height: 100dvh; background: var(--panel-oscuro); }

body.modo-ingreso #raiz {
  min-height: 100dvh;
  display: grid;
  place-items: center end;
  padding: 24px clamp(24px, 7vw, 110px);
  /* La foto institucional ya es una composicion terminada: el logo arriba a la
     izquierda y la leyenda abajo. El velo es parejo y suave para no tapar nada de
     eso; la tarjeta se apoya a la derecha, sobre la zona de cielo, que es la unica
     parte vacia de la foto. La tarjeta es opaca, asi que el velo separa, no protege
     texto. */
  background-image:
    linear-gradient(rgba(28, 31, 36, 0.22), rgba(28, 31, 36, 0.22)),
    url("./fondo-inc.jpg");
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

/* En pantallas angostas la foto ya no tiene zona vacia: la tarjeta se centra y el
   velo sube, porque ahi el fondo pasa a ser textura y no composicion. */
@media (max-width: 820px) {
  /* La foto es apaisada y la pantalla es vertical: `cover` deja ver solo una franja
     estrecha del centro, que siempre corta el logotipo por la mitad. En vez de buscar
     un encuadre que no existe, se muestra la foto entera arriba, como una cabecera,
     y la tarjeta se apoya sobre el color solido. */
  body.modo-ingreso #raiz {
    place-items: start center;
    padding: 0 20px 40px;
    background-image: url("./fondo-inc.jpg");
    background-size: 100% auto;
    background-position: top center;
    background-color: var(--panel-oscuro);
  }
  .ingreso { margin-top: clamp(180px, 58vw, 300px); }
}

.ingreso {
  width: min(380px, 100%);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-panel);
  padding: 28px 26px 26px;
  box-shadow: 0 20px 50px rgba(20, 22, 25, 0.35);
}
.ingreso-marca { display: flex; flex-direction: column; gap: 2px; }
.ingreso-nombre { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--tinta-1); }
.ingreso-cliente { font-size: 12px; color: var(--tinta-3); }
.ingreso-ayuda { margin: 16px 0 20px; font-size: 13px; color: var(--tinta-2); }

.campo { display: block; margin-bottom: 14px; }
.campo-etiqueta { display: block; font-size: 12px; color: var(--tinta-2); margin-bottom: 6px; }
.campo input {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--tinta-1);
  background: var(--panel);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-panel);
  padding: 9px 11px;
  transition: border-color var(--rapido) var(--curva);
}
.campo input::placeholder { color: var(--tinta-3); }
.campo input:hover { border-color: var(--tinta-3); }
.campo input:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento); }
.campo-error { margin: 0 0 14px; font-size: 12.5px; color: var(--critico); }
.ingreso-boton { width: 100%; padding: 10px; font-size: 14px; }
.ingreso-boton[disabled] { opacity: 0.7; cursor: progress; }

/* ============ estados del lienzo ============ */
.cargando { padding: 70px; }
.cargando-columnas {
  display: grid;
  grid-template-columns: 380px 1fr 380px;
  gap: 40px;
}
.cargando-texto {
  margin-top: 40px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.esqueleto {
  background: linear-gradient(90deg, var(--panel-hundido) 25%, #efeaea 50%, var(--panel-hundido) 75%);
  background-size: 200% 100%;
  animation: brillo 1.4s linear infinite;
  border-radius: var(--radio-panel);
}
@keyframes brillo { to { background-position: -200% 0; } }

.error-lienzo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 40px;
}
.error-titulo { margin: 0; font-size: 20px; font-weight: 700; }
.error-detalle { margin: 0; max-width: 46ch; color: var(--tinta-2); }

.origen { color: var(--tinta-3); font-size: 12px; margin-top: -40px; }

/* El redibujo ya ocurrio cuando esto se aplica: la marca solo avisa que cambio.
   El contenido nunca depende de esta transicion para existir. */
.lienzo { transition: border-color var(--normal) var(--curva); }
.lienzo.recien-actualizado { border-color: var(--acento); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media print {
  .barra, .filtros, .tabla-envoltorio { display: none; }
  body { background: #fff; }
  .escenario { padding: 0; }
  .lienzo { box-shadow: none; transform: none !important; border: 0; }
}

/* ============ enfoque ============
   El bloque elegido no se abre en una ventana aparte: el lienzo entero se acerca
   hacia el, como en una presentacion de Prezi. El informe no se pierde de vista,
   solo se mira mas de cerca, y por eso el resto se atenua en vez de taparse. */

/* El bloque enfocado sale del flujo y se centra en la pantalla. El hueco conserva
   su lugar en el informe para que nada de atras se reacomode. */
.hueco-foco { flex: none; }

.objeto.en-foco {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 50;
  margin: 0;
  max-height: calc(100dvh - 130px);
  overflow: auto;
  will-change: transform;
}

/* Lo que no esta enfocado retrocede. Se atenua y pierde nitidez, que es lo que
   hace que el ojo se quede en el bloque elegido. */
.lienzo.enfocado .objeto:not(.en-foco),
.lienzo.enfocado .cota,
.lienzo.enfocado .franja,
.lienzo.enfocado .pie,
.lienzo.enfocado .cabecera,
.lienzo.enfocado .sello,
.lienzo.enfocado .folio,
.lienzo.enfocado .centro,
.lienzo.enfocado .conectores {
  opacity: 0.25;
  filter: blur(1.5px);
  transition: opacity 420ms var(--curva), filter 420ms var(--curva);
}

.objeto.en-foco {
  box-shadow: 0 30px 70px rgba(20, 22, 25, 0.3);
  border-color: var(--acento);
  background: var(--panel);
}

/* Detras del bloque enfocado, el informe se atenua. No se tapa con un velo opaco:
   sigue siendo el mismo informe, mirado de mas cerca. */
.lienzo.enfocado::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(240, 237, 238, 0.72);
  pointer-events: none;
}

/* El control de enfoque aparece al pasar por encima del bloque, y siempre que el
   teclado lo alcance. Es un boton de verdad: se puede tabular. */
.objeto-controles {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--rapido) var(--curva);
}
.objeto:hover .objeto-controles,
.objeto:focus-within .objeto-controles,
.objeto.en-foco .objeto-controles { opacity: 1; }

.control {
  appearance: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--linea-fuerte);
  background: var(--panel);
  color: var(--tinta-2);
  border-radius: var(--radio-panel);
  cursor: pointer;
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
.control:hover { background: var(--acento); border-color: var(--acento); color: #fff; }
.control:active { transform: scale(0.96); }
.control:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.control svg { width: 14px; height: 14px; display: block; }

/* Barra del modo enfoque: vive fuera del lienzo para no escalarse con el. */
.barra-foco {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 14px;
  background: var(--panel-oscuro);
  color: #e8e5e2;
  border-radius: var(--radio-control);
  box-shadow: 0 14px 34px rgba(20, 22, 25, 0.35);
  font-size: 13px;
}
.barra-foco .titulo-foco { font-weight: 600; }
.barra-foco .atajo {
  font-family: var(--mono);
  font-size: 11px;
  color: #b9b4b0;
  border: 1px solid #5b6068;
  border-radius: 3px;
  padding: 1px 5px;
}
.barra-foco button {
  appearance: none;
  border: 1px solid #5b6068;
  background: transparent;
  color: #e8e5e2;
  font: inherit;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: var(--radio-control);
  cursor: pointer;
}
.barra-foco button:hover { background: #464a51; }
.barra-foco button:focus-visible { outline: 2px solid #9aa79a; outline-offset: 2px; }

/* Con movimiento reducido, el acercamiento es instantaneo: el enfoque sigue
   funcionando, lo que desaparece es el viaje. */
@media (prefers-reduced-motion: reduce) {
  .lienzo.enfocado { transition: none; }
  .lienzo.enfocado .objeto:not(.en-foco) { filter: none; }
}

@media print {
  .barra-foco, .objeto-controles { display: none; }
}

/* Montos sobre el grafico. El tamano lo fija el control de la fila de filtros. */
.grafico .monto-texto {
  font-family: var(--sans);
  font-weight: 700;
  fill: var(--tinta-1);
  font-variant-numeric: tabular-nums;
}