/* ============================================================
   SCAE · Tablero maestro — capa de refinamiento
   ------------------------------------------------------------
   Se carga DESPUES de css/tablero.css. No reescribe nada: ajusta
   lo que ya existe con la misma especificidad o mayor.

   Cada bloque dice QUE PROBLEMA REAL resuelve. Nada aqui es gusto:
   si un bloque no responde a algo que estorba al usar el tablero
   todos los dias, sobra.

   No se inventan colores: todo sale de las variables de
   marca/scae-design-system.css. El oro sigue siendo jerarquia y
   accion, nunca dato. El contenido sigue viviendo sobre tarjeta
   clara. Una sola curva: var(--ease).

   Algunas reglas usan :has(). Donde el navegador no lo soporte
   simplemente no aplican y el tablero queda como estaba: ninguna
   de ellas es necesaria para que algo se lea.
   ============================================================ */


/* ============================================================
   1 · ESTABILIDAD DE LA CASCARA
   ============================================================ */

/* PROBLEMA: al cambiar de vista, una pantalla corta (sin barra de
   scroll) y una larga (con barra) tienen anchos distintos, y todo
   el tablero salta 11px a los lados en cada navegacion. Reservar
   el canal de scroll siempre elimina el salto. */
html{scrollbar-gutter:stable}

/* PROBLEMA: el design system pinta una barra de scroll dorada de
   11px con borde del color del fondo oscuro. Dentro de una tarjeta
   clara (tabla ancha, tablero kanban) eso es una barra dorada con
   filo negro: grita, y el oro ahi no significa nada. Las barras
   INTERNAS se vuelven finas y neutras; la de la pagina se queda
   como esta, que es identidad. */
.tabla-scroll,.board,.segmentado,.velo,.lateral,.modal{
  scrollbar-width:thin;
  scrollbar-color:rgba(107,122,115,.5) transparent;
}
.tabla-scroll::-webkit-scrollbar,
.board::-webkit-scrollbar,
.segmentado::-webkit-scrollbar,
.velo::-webkit-scrollbar,
.lateral::-webkit-scrollbar{width:8px;height:8px}
.tabla-scroll::-webkit-scrollbar-track,
.board::-webkit-scrollbar-track,
.velo::-webkit-scrollbar-track,
.lateral::-webkit-scrollbar-track{background:transparent}
.tabla-scroll::-webkit-scrollbar-thumb,
.board::-webkit-scrollbar-thumb,
.velo::-webkit-scrollbar-thumb,
.lateral::-webkit-scrollbar-thumb{
  background:rgba(107,122,115,.45);border:0;border-radius:var(--r-pill);
}
.tabla-scroll:hover::-webkit-scrollbar-thumb,
.board:hover::-webkit-scrollbar-thumb{background:rgba(143,110,34,.55)}

/* PROBLEMA: al llegar al final de una tabla o del kanban con el
   trackpad, el scroll se contagia a la pagina y el tablero se
   mueve entero. */
.tabla-scroll,.board{overscroll-behavior-x:contain}
.velo,.lateral{overscroll-behavior:contain}

/* El kanban se detiene en el borde de una columna en vez de a
   mitad de tarjeta. 'proximity' y no 'mandatory': sugiere, no
   pelea con el dedo. */
.board{scroll-snap-type:x proximity;scroll-padding-left:2px}
.board .col{scroll-snap-align:start}


/* ============================================================
   2 · JERARQUIA EN LAS FILAS DE KPI
   ------------------------------------------------------------
   PROBLEMA: cuatro KPI del mismo tamano arriba de la pantalla. El
   ojo no sabe por donde entrar y los cuatro numeros pesan igual,
   asi que ninguno pesa.

   No se agrega nada al DOM: la jerarquia sale de lo que el dato YA
   declara. Tres niveles, excluyentes entre si:

     1. Si la fila tiene una tarjeta critica -> esa manda y las
        demas ceden. Es el caso mas comun en Hoy, Produccion,
        Finanzas y Tuberia (el cuello de botella).
     2. Si no hay critico pero si hay una cifra fuera de banda
        (rojo o ambar) -> mandan las fuera de banda y ceden las que
        estan en orden. Si todas estan fuera de banda no cede
        ninguna: la fila vuelve sola al empate.
     3. Si no hay nada fuera de banda -> manda el primero de la
        tanda, que es el que la vista puso primero a proposito
        (caja, piezas sin publicar, tasa A). Los siguientes ceden
        un escalon.

   El tamano es el unico recurso usado. No se toca el color (eso lo
   decide el estado) ni el oro (eso es jerarquia de accion).
   ============================================================ */

/* El tamano del KPI pasa a ser una variable con dos factores: el
   nivel de jerarquia (--kpi-fs, lo fija la fila) y una escala
   global (--kpi-escala, la fija el ancho de pantalla). Asi la
   jerarquia sobrevive intacta en el telefono en vez de aplastarse
   contra un tope fijo. Sin :has(), var() cae en 42px y todo queda
   como estaba. */
.kpi .valor:not(.mediano):not(.chico){
  font-size:calc(var(--kpi-fs,42px) * var(--kpi-escala,1));
}

/* La tarjeta critica se adelanta: numero mas grande y superficie
   apenas distinta para que se lea como otro plano, no como otro
   color. Sigue siendo tarjeta clara: no se inventa un color, es
   --error al 3-5% (la misma mecanica de .et.error) sobre el
   degradado de tarjeta que ya existe en tablero.css. */
.tarjeta.kpi-critico{
  --kpi-fs:46px;
  background:
    linear-gradient(180deg,rgba(140,47,47,.030),rgba(140,47,47,.055)),
    linear-gradient(180deg,#FCFCFA,#F5F5F0);
  box-shadow:var(--s-2),0 0 0 1px rgba(140,47,47,.12);
}

/* Nivel 1 — hay critico: el resto de la fila cede. */
.rejilla:has(> .tarjeta.kpi-critico)
  > .tarjeta:has(> .kpi):not(.kpi-critico){--kpi-fs:31px}

/* Nivel 2 — no hay critico pero si cifras fuera de banda: ceden
   solo las que estan en orden. */
.rejilla:not(:has(> .tarjeta.kpi-critico)):has(> .tarjeta .kpi .valor.rojo,> .tarjeta .kpi .valor.ambar)
  > .tarjeta:has(> .kpi):not(:has(.valor.rojo)):not(:has(.valor.ambar)){--kpi-fs:33px}

/* Nivel 3 — todo en banda: manda el primero de la tanda. El
   selector pide que la tarjeta venga DESPUES de otra tarjeta de
   KPI, asi que solo actua dentro de una hilera de KPI y nunca en
   una rejilla mixta de contenido. */
.rejilla:not(:has(> .tarjeta.kpi-critico)):not(:has(> .tarjeta .kpi .valor.rojo)):not(:has(> .tarjeta .kpi .valor.ambar))
  > .tarjeta:has(> .kpi) + .tarjeta:has(> .kpi){--kpi-fs:35px}

/* PROBLEMA: las notas al pie de cada KPI tienen largos distintos,
   asi que cada tarjeta termina su texto a una altura distinta y la
   fila se ve deshilachada. Con la nota anclada abajo, las cuatro
   cierran contra la misma linea. Solo aplica a tarjetas cuyo hijo
   directo es un .kpi: las de contenido no se tocan. */
.tarjeta:has(> .kpi){display:flex;flex-direction:column}
.tarjeta:has(> .kpi)::before{flex:0 0 2px}
.tarjeta:has(> .kpi) > .kpi{flex:1;min-height:0}
.tarjeta:has(> .kpi) .kpi .nota{margin-top:auto;padding-top:8px}
/* Un boton suelto dentro de una tarjeta de KPI (ficha de estudio,
   "Definir hito") no debe estirarse de lado a lado al volverse
   hijo de un contenedor flex. */
.tarjeta:has(> .kpi) > .btn,
.tarjeta:has(> .kpi) > .btn-mini,
.tarjeta:has(> .kpi) > .btn-linea{align-self:flex-start}

/* Cifras y etiquetas: que ninguna palabra quede sola en su renglon
   y que un numero largo no desborde la tarjeta. */
.kpi .etiqueta{text-wrap:balance}
.kpi .nota{text-wrap:pretty}
.kpi .valor{overflow-wrap:anywhere}


/* ============================================================
   3 · TRANSICIONES CON PROPOSITO
   ------------------------------------------------------------
   PROBLEMA: al cambiar de vista o de pestana todo aparece de
   golpe y no se entiende que se repinto ni en que orden leer.

   Regla: una sola curva (var(--ease)), movimiento corto, y nunca
   mas de 400ms por elemento. La app se repinta ENTERA en cada
   escritura de datos, asi que la entrada tiene que leerse como un
   refresco, no como una carga: por eso 320ms y 9px, no 900ms y
   24px como en la portada.
   ============================================================ */
.rise{
  transform:translateY(9px);
  animation-duration:.32s;
  animation-delay:0s;
}
/* Escalonado corto: la secuencia completa cierra antes de 450ms.
   Del quinto bloque en adelante entran juntos: mas retraso ya se
   siente lento. */
.rise:nth-child(2){animation-delay:.04s}
.rise:nth-child(3){animation-delay:.08s}
.rise:nth-child(4){animation-delay:.11s}
.rise:nth-child(n+5){animation-delay:.13s}

/* El velo y el modal: el velo entra rapido (es contexto), el modal
   un poco despues y desde mas cerca (es contenido). */
.velo{animation-duration:.18s}
.modal{animation-duration:.28s}
@keyframes subir{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* El aviso efimero aparecia de golpe en medio de la pantalla. Se
   selecciona solo el toast (hijo directo de body); los avisos que
   viven dentro de una vista no se tocan. */
body > .aviso{animation:scae-toast .22s var(--ease)}
@keyframes scae-toast{
  from{opacity:0;transform:translate(-50%,10px)}
  to{opacity:1;transform:translate(-50%,0)}
}


/* ============================================================
   4 · ESTADOS: QUE SE SIENTA SOLIDO AL TACTO
   ------------------------------------------------------------
   PROBLEMA: casi todo tiene hover y casi nada tiene :active ni
   :disabled. Al hacer clic no pasa nada hasta que la vista se
   repinta, y eso se siente flojo. Un :active de 1px de hundimiento
   confirma el golpe antes de que llegue el dato.
   ============================================================ */

/* Nada de flash azul del navegador al tocar en movil, y sin espera
   de 300ms en el toque. */
.btn,.btn-mini,.btn-icono,.nav-item,.segmentado button,
.board .card,.fila-bandeja,.tabla tr.clickable,.wa-link{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.nav-item,.segmentado button,.col-head h2{user-select:none}

/* ---- Botones ---- */
.btn-linea:hover{border-color:rgba(15,46,37,.45);box-shadow:var(--s-2)}
.btn-linea:active,.btn:active{transform:translateY(1px);box-shadow:inset 0 1px 3px rgba(15,46,37,.18)}
.btn-mini:hover{background:var(--blanco);box-shadow:var(--s-1)}
.btn-mini:active{transform:translateY(1px);background:var(--lienzo);box-shadow:none}
.btn-icono:active{transform:translateY(1px);background:rgba(15,46,37,.12)}

/* Un boton apagado tiene que verse apagado y no responder al
   mouse: hoy .btn-mini y .btn-icono deshabilitados siguen
   iluminandose al pasar por encima. */
.btn-mini:disabled,.btn-icono:disabled{
  opacity:.45;cursor:not-allowed;pointer-events:none;filter:grayscale(.4);
}

/* ---- Barra lateral ---- */
.nav-item:active{background:rgba(200,160,59,.16)}

/* ---- Filas de tabla ----
   PROBLEMA: HOY todas las filas se iluminan al pasar el mouse,
   sean clicables o no. Eso promete una accion que la mitad de las
   tablas no tiene. El realce dorado queda reservado a lo que de
   verdad abre algo; una tabla de solo lectura recibe un realce
   neutro, apenas para seguir el renglon. */
.tabla tbody tr:hover{background:transparent}
.tabla tbody tr:not(.clickable):hover{background:rgba(15,46,37,.03)}
.tabla tbody tr.clickable:hover{background:rgba(200,160,59,.075)}
.tabla tbody tr.clickable:active{background:rgba(200,160,59,.14)}

/* ---- Tarjetas del kanban ---- */
.board .card:active{transform:translateY(0);box-shadow:var(--s-1)}
.wa-link:active{background:rgba(47,125,90,.22)}

/* ---- Bandeja ---- */
.fila-bandeja{cursor:default}
.fila-bandeja:active{transform:translateX(1px);box-shadow:var(--s-1)}

/* ---- Celdas editables de tuberia ----
   PROBLEMA 1: las flechitas del input numerico se comen 16px de
   una columna de 78px y no se usan nunca (se teclea la cifra).
   PROBLEMA 2: la celda no se anuncia como editable hasta que uno
   la pisa. */
.celda-num{
  appearance:textfield;-moz-appearance:textfield;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
}
.celda-num::-webkit-outer-spin-button,
.celda-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.celda-num:hover{border-color:var(--bronce);background:var(--blanco)}
.celda-num:focus,.celda-num:focus-visible{
  outline:none;border-color:var(--bronce);
  box-shadow:0 0 0 3px rgba(200,160,59,.26);
}
.celda-num:disabled,.celda-num[readonly]{
  background:var(--lienzo);color:var(--neutro);border-color:var(--borde);cursor:not-allowed;
}

/* ---- Campos deshabilitados en general ---- */
input:disabled,select:disabled,textarea:disabled{
  background:var(--lienzo);color:var(--neutro);cursor:not-allowed;box-shadow:none;
}

/* ---- Segmentado ---- */
.segmentado button:hover:not(.activo){color:var(--verde);background:rgba(255,255,255,.6)}
.segmentado button:active{transform:translateY(1px)}


/* ============================================================
   5 · FOCO Y CONTRASTE
   ------------------------------------------------------------
   PROBLEMA 1: el anillo de foco global es --oro-claro (#E3C568).
   Sobre el verde oscuro se ve perfecto; sobre una tarjeta clara da
   menos de 2:1 y practicamente desaparece. Quien navega con
   teclado se pierde dentro de un modal.
   PROBLEMA 2: varias etiquetas sobre el verde estan por debajo de
   4.5:1 por opacidad, no por color. Se sube la opacidad; el color
   es el mismo.
   ============================================================ */

/* Sobre claro, el anillo pasa a --oro-texto (5.2:1 sobre #F8F8F5).
   Sigue siendo dorado, ahora legible. */
.tarjeta :focus-visible,
.modal :focus-visible,
.velo :focus-visible,
.board .card :focus-visible,
.vacio :focus-visible{outline:2px solid var(--oro-texto);outline-offset:2px}

/* Dentro de la barra lateral el offset de 3px se recorta contra el
   borde del contenedor con overflow. Se mete el anillo adentro. */
.lateral :focus-visible,.nav-item:focus-visible{outline:2px solid var(--oro-claro);outline-offset:-2px}

/* Elementos que hoy no reciben foco de teclado pero lo recibiran
   en cuanto se les agregue tabindex (fila clicable, tarjeta del
   kanban): el estilo ya esta listo y no estorba mientras tanto. */
.tabla tr.clickable:focus-visible,
.board .card:focus-visible{outline:2px solid var(--oro-texto);outline-offset:-2px}

/* Texto secundario sobre el verde: mismo color, menos transparencia. */
.cabecera .fecha{color:rgba(231,234,228,.72)}
.nav-grupo{color:rgba(231,234,228,.5)}
.col-vacia{color:rgba(231,234,228,.55)}
.marca-bloque .sub{color:rgba(227,197,104,.82)}
.veredicto .no-tocar{color:rgba(231,234,228,.7)}
.veredicto .hacer b,.veredicto .no-tocar b{color:rgba(227,197,104,.82)}
.veredicto .razon{color:rgba(231,234,228,.88)}

/* "sin datos" tiene que leerse, no adivinarse: --neutro al 85% da
   3.3:1 sobre la tarjeta. Pasa a --gris, que es el color de texto
   secundario del sistema; la cursiva y el cuerpo mas chico siguen
   marcando que no es un dato. */
.sin-datos{color:var(--gris);opacity:1}

/* Un KPI sin dato decia "sin datos" con el cuerpo de una cifra de
   42px: pesaba lo mismo que un numero real. Baja a tamano de
   frase; la altura de la linea la sigue fijando el KPI, asi que la
   fila no se descuadra. */
.kpi .valor .sin-datos{font-size:.55em;font-style:italic}


/* ============================================================
   6 · DENSIDAD Y ALINEACION OPTICA
   ------------------------------------------------------------
   Esto es una herramienta de trabajo diario: el lujo es que el
   numero se lea de un vistazo, no el aire alrededor.
   ============================================================ */

/* PROBLEMA: 60px muertos debajo del ultimo bloque de cada vista.
   Con 44px sigue habiendo respiro para el ultimo modal y se gana
   una fila de tabla por pantalla. */
.principal{padding-bottom:44px}

/* PROBLEMA: la primera columna de toda tabla arranca 10px adentro
   del borde de texto de la tarjeta, asi que el titulo de la
   tarjeta y el primer dato de la tabla no alinean. Se elimina el
   padding exterior: la tabla cierra contra el mismo eje que el h3. */
.tabla th:first-child,.tabla td:first-child{padding-left:0}
.tabla th:last-child,.tabla td:last-child{padding-right:0}

/* PROBLEMA: en una cabecera de tarjeta el h3 es Cormorant y la
   nota es Inter; centrados verticalmente, la nota queda flotando
   alta respecto del titulo. Alineados por linea base se leen como
   una sola frase. Los botones de la derecha siguen centrados. */
.tarjeta-cabeza{align-items:baseline}
.tarjeta-cabeza .der{align-self:center}
.tarjeta h3{text-wrap:balance}

/* PROBLEMA: un nombre largo sin espacios (un correo, un estudio
   con guiones) desborda la tarjeta de 288px del kanban. */
.card-name,.card-line,.next,.fila-bandeja .titulo,.g-l-nombre{overflow-wrap:anywhere}

/* El pie del kanban ya no necesita 14px para una barra de scroll
   que ahora mide 8px. */
.board{padding-bottom:9px}

/* Pie de modal: 32px entre el ultimo campo y los botones es mas
   aire del que hace falta cuando el formulario ya es largo. */
.modal-pie{margin-top:14px;padding-top:12px}

/* Los estados vacios se repiten mucho dentro de tarjetas chicas;
   26px arriba y abajo hacen que una tarjeta vacia ocupe mas que
   una llena. */
.vacio{padding:20px 18px}
.vacio p{text-wrap:pretty}


/* ============================================================
   7 · MOVIL — DIGNO A 375px
   ------------------------------------------------------------
   El tablero se usa en escritorio, pero se consulta en el
   telefono. Nada se corta y nada obliga a hacer zoom.
   ============================================================ */

@media (max-width:900px){
  /* PROBLEMA: css/tablero.css ya asume 14px de padding para sangrar
     las tablas en movil (.tabla-scroll{margin:0 -14px}), pero la
     tarjeta sigue con 20px. La tabla queda desalineada y se pierden
     12px de ancho util en una pantalla que no sobra. Se completa la
     intencion: padding de tarjeta 14px y el hilo de oro recalculado
     para que siga cruzando la tarjeta entera. */
  .tarjeta{padding:16px 14px}
  .tarjeta::before{margin:-16px -14px 13px}

  /* PROBLEMA: el segmentado ya trae `max-width:100%; overflow-x:auto`,
     pero en varias cabeceras vive dentro de un envoltorio sin clase que
     es item flex de .fila. Con el `min-width:auto` de flexbox ese
     envoltorio no encoge, el 100% del segmentado se mide contra un
     envoltorio ya desbordado y el `overflow-x:clip` del .principal se
     come las ultimas pestanas: en el calendario a 375px "Reuniones" y
     "Dinero" quedaban fuera de alcance, sin scroll que las rescatara.
     Dejar encoger a los items de .fila solo muerde cuando un item por
     si solo es mas ancho que la linea — que es exactamente este caso —
     y devuelve el deslizamiento al propio segmentado. */
  .fila > *{min-width:0}
  .segmentado{min-width:0}

  /* PROBLEMA: al colapsar la bandeja a dos columnas, el bloque de
     botones cae debajo de la columna de fecha, contra el margen
     izquierdo, y parece de otra fila. Ocupa el ancho y se alinea a
     la derecha, que es donde estaba. */
  .fila-bandeja > .fila{grid-column:1/-1;justify-content:flex-end}

  /* Zona de toque: 34px de alto minimo en los botones chicos. Un
     boton de 22px se falla una de cada tres veces con el pulgar. */
  .btn-mini{min-height:34px;padding:6px 13px}
  .btn-icono{min-height:32px;min-width:32px;display:inline-flex;align-items:center;justify-content:center}
  .segmentado button{min-height:32px}
}

@media (max-width:560px){
  /* Dos campos de formulario en 138px cada uno no se pueden llenar.
     En pantalla angosta todo campo ocupa la fila completa. */
  .campo-fila.cf-2,.campo-fila.cf-3,.campo-fila.cf-2-1{grid-template-columns:1fr}

  /* El modal pegado a los bordes gana 16px de ancho de contenido. */
  .velo{padding:26px 10px}
  .modal{padding:18px 16px}
  .modal::before{margin:-18px -16px 14px}
  .modal h2{font-size:21px}

  /* Cifras: 42px de Cormorant con "S/ 1,234,567" no entran en 347px.
     Se baja la escala, no el tamano: la fila conserva su jerarquia
     (el KPI que manda sigue siendo el mas grande). */
  body{--kpi-escala:.8}
  .kpi .valor.mediano{font-size:28px}

  /* La cabecera de la pagina: el titulo manda, la fecha va debajo y
     las acciones toman su propia fila en vez de estrujar al h1. */
  .cabecera{gap:8px}
  .cabecera .acciones{margin-left:0;width:100%}

  /* PROBLEMA REAL: el calendario del mes en 375px deja celdas de
     46px; cada evento se reduce a cuatro letras y tres puntos. En
     vez de mutilar el texto, la rejilla conserva un ancho minimo
     legible y se desliza dentro de su tarjeta, igual que hacen las
     tablas anchas en todo el tablero. */
  .tarjeta > div:has(> .cal){
    overflow-x:auto;overscroll-behavior-x:contain;
    margin:0 -14px;padding:0 14px;
  }
  .cal{min-width:456px}

  /* Cuotas de a una: dos de 116px con su contenido quedan
     apretadas contra el borde. */
  .cuota{flex:1 1 100%}

  /* El tablero kanban ya es de una columna aqui: sin snap, que en
     vertical no aporta. */
  .board{scroll-snap-type:none}
}

/* Pantallas muy angostas (360px y menos): que el titulo de la
   cabecera no fuerce scroll horizontal. */
@media (max-width:380px){
  .cabecera h1{font-size:22px}
  .veredicto{padding:14px 15px}
  .principal{padding-left:12px;padding-right:12px}
  .tabla-scroll{margin:0 -14px;padding:0 14px}
}


/* ============================================================
   8 · MOVIMIENTO REDUCIDO
   ------------------------------------------------------------
   PROBLEMA: la regla global de tablero.css acorta la DURACION de
   las animaciones pero no el RETRASO. Con entradas escalonadas eso
   dejaria bloques invisibles hasta 130ms y luego apareciendo de
   golpe: exactamente lo que la preferencia intenta evitar.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-delay:0s !important;transition-delay:0s !important}
  .rise{animation:none !important;opacity:1 !important;transform:none !important}
  body > .aviso{animation:none !important;transform:translateX(-50%) !important}
  .board{scroll-snap-type:none}
  .btn-linea:active,.btn:active,.btn-mini:active,.btn-icono:active,
  .board .card:active,.fila-bandeja:active,.segmentado button:active{transform:none}
}


/* ============================================================
   9 · IMPRESION
   ------------------------------------------------------------
   PROBLEMA: hoy imprimir una vista saca la cascara verde a toda
   pagina, la barra lateral en la primera columna, sombras grises
   sucias y botones que en papel no sirven para nada.

   En papel: sin cascara, sin navegacion, sin acciones. Tarjetas
   con filo fino y sin sombra, y los colores de ESTADO conservados
   (una etiqueta roja tiene que seguir siendo roja o el informe
   miente).
   ============================================================ */
@media print{
  @page{margin:12mm}

  html,body{background:#fff !important;background-image:none !important;height:auto}
  body{color:var(--verde);font-size:10.5pt}

  /* Fuera todo lo que solo existe para operar el tablero. */
  .lateral,.velo,.gtip,.segmentado,.atajos,.card-acciones,
  .btn,.btn-mini,.btn-icono,.wa-link,
  .cabecera .acciones,.tarjeta-cabeza .der{display:none !important}

  .app{display:block}
  .principal{padding:0;max-width:none;overflow:visible}

  .cabecera{margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--borde)}
  .cabecera h1{color:var(--verde);font-size:20pt}
  .cabecera .fecha{color:var(--gris)}

  /* La entrada escalonada arranca en opacidad 0: si el navegador
     captura la pagina antes de que termine, imprime hojas en
     blanco. En papel no hay animacion. */
  .rise{animation:none !important;opacity:1 !important;transform:none !important}

  .tarjeta,.modal{
    background:#fff;box-shadow:none;border:1px solid var(--borde);
    padding:12px 14px;break-inside:avoid;page-break-inside:avoid;
  }
  .tarjeta::before,.modal::before,.vacio::before{display:none}
  .tarjeta.kpi-critico{background:#fff;border-color:var(--error)}

  /* El veredicto es panel de cristal sobre verde: en papel pasa a
     ser una caja clara con filo. */
  .veredicto{
    background:#fff;border:1px solid var(--borde);box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    break-inside:avoid;page-break-inside:avoid;
  }
  .veredicto h2,.veredicto .razon,.veredicto .hacer,.veredicto .no-tocar{color:var(--verde)}
  .veredicto .etapa{color:var(--verde);border-color:var(--borde)}
  .veredicto .evidencia span{background:var(--lienzo);color:var(--verde)}

  /* El kanban en papel es una lista de columnas, una tras otra. */
  .board{display:block;overflow:visible;grid-auto-flow:row}
  .board .col{break-inside:avoid;page-break-inside:avoid;margin-bottom:10px}
  .board .cards{display:block}
  .board .card{break-inside:avoid;box-shadow:none;border:1px solid var(--borde);margin-bottom:6px}
  .col-head h2,.col-vacia{color:var(--verde)}

  /* Tablas completas: nada escondido detras de un scroll lateral. */
  .tabla-scroll{overflow:visible;margin:0;padding:0}
  .tabla{font-size:9pt}
  .tabla thead{display:table-header-group}
  .tabla tbody tr{break-inside:avoid;page-break-inside:avoid}
  .tabla tbody tr:hover{background:transparent}

  /* Cifras en papel: 42px son 31pt y comen media hoja. Se baja la
     escala para conservar la jerarquia tambien impresa. */
  body{--kpi-escala:.62}
  .kpi .valor.mediano{font-size:16pt}
  .kpi .valor.chico{font-size:13pt}
  .rejilla{gap:8px}

  /* Estado y graficos SI conservan color: sin esto el navegador
     descarta los fondos y una alerta roja sale gris. */
  .grafico,.grafico *,.et,.senal,.barra,.barra i,.embudo,.embudo .seg,
  .reparto-franja,.reparto-parte,.paso-barra,.paso-barra i,.cuota,.ev,
  .anillo,.g-anillo-arco,.diagnostico,.aviso,.meter-fill{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  .grafico,.anillos,.plan,.diagnostico{break-inside:avoid;page-break-inside:avoid}

  /* El sangrado de las URL de los enlaces no aporta en un informe
     interno: se imprime el texto y nada mas. */
  a[href]::after{content:'' !important}
}