:root{
  /* Marca */
  --verde:#164c3a; --verde-osc:#0f382a; --verde-claro:#b9c8c2;
  --dorado:#c59a4a; --dorado-osc:#7a5c2b;          /* dorado-osc = texto/AA (6.19:1) */
  /* Semánticos */
  --rojo:#b02a2a; --rojo-osc:#92400e; --rojo-hover:#8f2222; --amarillo:#fff3cd;
  /* Escala de grises (5) */
  --tinta:#1f2937; --tinta-suave:#374151; --gris:#5f6b7a;
  --linea:#dde3e1; --linea-claro:#eef1f0;
  --fondo:#f2f6f4; --blanco:#fff;
  /* Radios */
  --radio:8px; --radio-lg:10px;
  /* Escala de espaciado: 4 8 12 16 20 24 32 */
  --sidebar:238px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:var(--linea-claro);color:var(--tinta);font-size:14px}
a{color:var(--verde);text-decoration:none}
a:hover{text-decoration:underline}

/* Accesibilidad: foco visible en teclado (WCAG 2.2 · 1.4.11) */
:focus-visible{outline:2px solid var(--dorado-osc);outline-offset:2px;border-radius:4px}
.sidebar :focus-visible{outline-color:var(--dorado)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms;animation-iteration-count:1;transition-duration:.01ms;scroll-behavior:auto}
}

.layout{display:table;width:100%;table-layout:fixed;min-height:100vh;border-spacing:0}
.sidebar{display:table-cell;width:var(--sidebar);background:var(--verde);color:#fff;vertical-align:top;padding:20px 0}
.sidebar .marca{padding:0 16px 16px;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:12px}
.sidebar .marca .logo{display:block;max-width:168px;width:100%;height:auto;margin:0 auto 12px;border-radius:6px}
.sidebar .marca b{display:block;font-size:13px;line-height:1.35;letter-spacing:.3px}
.sidebar .marca span{display:block;font-size:11px;color:var(--dorado);margin-top:4px;font-weight:600}
.sidebar nav a{display:block;padding:8px 16px;color:#e8f0ec;font-size:13.5px;border-left:3px solid transparent}
.sidebar nav a:hover{background:rgba(255,255,255,.08);text-decoration:none}
.sidebar nav a.activo{background:rgba(255,255,255,.13);border-left-color:var(--dorado);color:#fff;font-weight:600}
.sidebar nav .grupo{padding:16px 16px 8px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#cfdbd5}
.sidebar .pie{position:sticky;top:calc(100vh - 88px);padding:16px;font-size:12px;color:#cfdbd5}
.contenido{display:table-cell;vertical-align:top;padding:24px 24px 40px}
.contenido.ancho{max-width:none}

header.pagina{display:table;width:100%;margin-bottom:16px}
header.pagina .izq{display:table-cell;vertical-align:middle}
header.pagina .der{display:table-cell;vertical-align:middle;text-align:right;white-space:nowrap}
header.pagina h1{font-size:22px;color:var(--verde);letter-spacing:.3px}
header.pagina .sub{font-size:12.5px;color:var(--gris);margin-top:4px}

/* `table-layout:fixed` (con la geometría original intacta): con la tabla automática, en el ancho
   intermedio (~1025px) las tarjetas se estiraban +75px y empujaban la página entera. El margen
   negativo de -12px ya compensa el border-spacing, así que el ancho sigue siendo 100%. */
.cards{display:table;width:100%;table-layout:fixed;border-spacing:12px 0;margin:0 -12px 16px}
.cards .fila{display:table-row}
.card{display:table-cell;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio-lg);padding:16px;vertical-align:top;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--gris);font-weight:700}
.card .val{font-size:28px;font-weight:800;margin-top:8px;color:var(--verde);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .val.rojo{color:var(--rojo)}
.card .val.dorado{color:var(--dorado-osc)}
.card .pie{font-size:12px;color:var(--gris);margin-top:4px}

.panel{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio-lg);padding:16px 20px;margin-bottom:16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.panel h2{font-size:16px;text-transform:uppercase;letter-spacing:.6px;color:var(--verde);padding-bottom:8px;border-bottom:2px solid var(--verde-claro);margin-bottom:12px}
.panel-interno{border:none;box-shadow:none;padding:0}

table{width:100%;border-collapse:collapse;font-size:13px}
th{background:var(--verde);color:#fff;text-align:left;padding:8px 12px;font-size:11px;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}
td{padding:8px 12px;border-bottom:1px solid var(--linea);vertical-align:top}
tbody tr:nth-child(even){background:var(--fondo)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.num.ent{color:var(--verde);font-weight:600}
td.num.sal{color:var(--rojo-osc);font-weight:600}
.verde{color:var(--verde);font-weight:600}
.rojo{color:var(--rojo-osc);font-weight:600}
.gris{color:var(--gris)}

/* Tablas largas: scroll contenido en su panel (no empuja la página) */
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}

/* Concepto: los textos largos se apilaban en una tira vertical de ~15 caracteres y estiraban la
   fila hasta 450px (el peor caso eran las OBSERVACIONES de corrección, de hasta 351 caracteres).
   Se limita cada bloque a 2 líneas con puntos suspensivos; el texto completo va en el title
   (tooltip), así la fila se mantiene compacta y comparable. */
.celda-concepto{min-width:220px;max-width:420px}
.concepto-texto{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
/* las notas de corrección (hasta 351 caracteres) van a una sola línea: la fila queda pareja */
.concepto-texto.nota{-webkit-line-clamp:1;line-clamp:1}
/* datos atómicos: no se parten en dos líneas (el ID salía como "CJ-" / "0097") */
td.celda-corta{white-space:nowrap}

.tag{display:inline-block;padding:4px 8px;border-radius:10px;font-size:11px;font-weight:700;white-space:nowrap}
.tag.verde{background:#d9ebe3;color:var(--verde)}
.tag.dorado{background:#f6ecd8;color:var(--dorado-osc)}
.tag.rojo{background:#fbe3e3;color:var(--rojo)}
.tag.amarillo{background:var(--amarillo);color:var(--rojo-osc)}
.tag.gris{background:var(--linea-claro);color:var(--tinta-suave)}

.btn{display:inline-block;padding:8px 16px;border-radius:var(--radio);border:1px solid transparent;font-size:13px;font-weight:600;cursor:pointer;background:var(--verde);color:#fff}
.btn:hover{background:var(--verde-osc);text-decoration:none;color:#fff}
.btn.sec{background:var(--blanco);color:var(--verde);border-color:var(--verde-claro)}
.btn.sec:hover{background:var(--fondo);color:var(--verde)}
.btn.rojo{background:var(--rojo)}
.btn.rojo:hover{background:var(--rojo-hover)}
.btn.dorado{background:var(--dorado-osc);color:#fff}
.btn.dorado:hover{background:#6a4f25}
.btn.chico{padding:4px 8px;font-size:12px}
.btn.fila{background:var(--blanco);color:var(--verde);border:1px solid var(--verde-claro);padding:4px 8px;font-size:12px}
.btn.fila.peligro{color:var(--rojo);border-color:#e9bdbd}

.filtros{display:table;width:100%;border-spacing:8px 0;margin:0 -8px 16px}
.filtros .campo{display:table-cell;vertical-align:bottom}
label{display:block;font-size:11px;font-weight:700;color:var(--gris);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=email],select,textarea{
  width:100%;padding:8px 12px;border:1px solid var(--linea);border-radius:var(--radio);font-size:13.5px;font-family:inherit;background:var(--blanco);color:var(--tinta)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px rgba(22,76,58,.10)}
input.num{text-align:right;font-variant-numeric:tabular-nums}
.check{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--tinta)}
.check input{width:auto;min-width:16px;min-height:16px}

.form-grid{display:table;width:100%;border-spacing:12px;margin:0 -12px}
.form-grid .fg-fila{display:table-row}
.form-grid .fg-campo{display:table-cell;vertical-align:top;width:33.33%}
.form-grid .fg-campo.full{width:100%}
.form-grid .fg-campo.mitad{width:50%}
/* Aviso lateral: barra inset en vez de border-left (evita el patrón "side-tab") */
.errores{background:#fdeaea;box-shadow:inset 4px 0 0 var(--rojo);padding:12px 16px;border-radius:var(--radio);margin-bottom:16px;font-size:13px}
.errores ul{margin-left:16px}
.help{font-size:12px;color:var(--gris);margin-top:4px}
.error-campo{font-size:12px;color:var(--rojo);margin-top:4px}

.mensajes{margin-bottom:16px}
.mensaje{box-shadow:inset 4px 0 0 var(--verde);padding:12px 16px;border-radius:var(--radio);margin-bottom:8px;font-size:13px;background:#e6f2ec}
.mensaje.error{box-shadow:inset 4px 0 0 var(--rojo);background:#fdeaea}
.mensaje.warning{box-shadow:inset 4px 0 0 var(--dorado);background:var(--amarillo)}

.alerta{box-shadow:inset 4px 0 0 var(--dorado);padding:12px 16px;border-radius:var(--radio);margin-bottom:8px;font-size:13px;background:#fdf7e8}
.alerta.critico{box-shadow:inset 4px 0 0 var(--rojo);background:#fdeaea}
.alerta b{color:var(--rojo-osc)}

.vacio{padding:24px;text-align:center;color:var(--gris);font-size:13.5px;background:var(--fondo);border-radius:var(--radio);border:1px dashed var(--linea)}

.barra-prog{background:var(--linea);border-radius:var(--radio);height:16px;overflow:hidden;margin-top:8px}
.barra-prog span{display:block;height:100%;background:linear-gradient(90deg,#2f7d63,var(--verde))}
.barra-prog span.alerta{background:var(--rojo)}

.barras{display:table;width:100%;border-spacing:12px 0}
.barra-item{display:table-row}
.barra-item .nombre{display:table-cell;width:208px;font-size:13px;vertical-align:middle}
.barra-item .pista{display:table-cell;vertical-align:middle}
.barra-item .pista i{display:block;height:16px;border-radius:4px;background:var(--verde)}
.barra-item .monto{display:table-cell;width:128px;text-align:right;font-size:13px;font-variant-numeric:tabular-nums;vertical-align:middle}

/* Flujo mensual: columnas comparativas en escritorio; filas compactas de barras
   horizontales en la cubierta del plegable (antes: 150px de alto por mes apilado). */
.flujo{display:flex;gap:16px;align-items:flex-end}
.flujo .mes{flex:1;min-width:0;display:flex;flex-direction:column;text-align:center}
.flujo .barras-par{display:flex;justify-content:center;align-items:flex-end;gap:16px;height:150px;order:1}
.flujo .par{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;min-width:0;height:100%}
/* La barra ESCALA al espacio libre del carril (100% - etiqueta/monto), nunca se recorta ni se sale:
   --alto es un número puro 0..150 donde 150 = el máximo del período. */
.flujo .par .b{width:32px;height:calc((100% - 44px) * var(--alto,0) / 150);min-height:2px;
  margin-top:auto;border-radius:4px 4px 0 0;flex:none}
.flujo .par .etq{font-size:11px;font-weight:700;color:var(--gris);letter-spacing:.5px}
.flujo .par .monto{font-size:13px;color:var(--tinta-suave);font-variant-numeric:tabular-nums;white-space:nowrap}
.flujo .lbl{font-size:13px;font-weight:700;color:var(--tinta);margin-top:8px;order:2}
.flujo .neto{font-size:13px;color:var(--tinta-suave);margin-top:4px;order:3;font-variant-numeric:tabular-nums}
.flujo .neto b{color:var(--verde)}
.flujo .neto b.rojo{color:var(--rojo)}

.paginacion{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:16px;font-size:13px}
.paginacion a,.paginacion span{min-height:32px;display:inline-flex;align-items:center;padding:0 8px}

/* `table-layout:fixed` es obligatorio: sin él la tabla se estira hasta el ancho de su contenido
   más ancho (la tabla markdown que responde la IA) y arrastra la página completa: a 1025-1600px
   el chat se salía +700px y el botón Enviar quedaba FUERA de pantalla (medido en vivo). */
.chat-wrap{display:table;width:100%;table-layout:fixed;border-spacing:0}
.chat-lista{display:table-cell;width:232px;vertical-align:top;border-right:1px solid var(--linea);padding-right:16px}
.chat-lista a{display:block;padding:8px 12px;border-radius:var(--radio);font-size:13px;color:var(--tinta-suave)}
.chat-lista a:hover{background:var(--fondo);text-decoration:none}
.chat-lista a.activo{background:#e6f2ec;color:var(--verde);font-weight:600}
.chat-cuerpo{display:table-cell;vertical-align:top;padding-left:16px;overflow-wrap:anywhere}
/* `overflow-wrap:anywhere`: una tira larga sin espacios (una referencia, un hash, un nombre de
   comprobante pegado) no tiene por dónde partir y estiraba la página a 592px incluso en la
   cubierta del Fold a 393px: había que arrastrar para llegar al botón Enviar. */
.burbuja{padding:12px 16px;border-radius:var(--radio-lg);margin-bottom:12px;font-size:13.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.burbuja.user{background:#e6f2ec;margin-left:56px}
.burbuja.assistant{background:var(--fondo);margin-right:56px}
.burbuja .herramienta{display:block;font-size:12px;color:var(--gris);margin-top:8px;font-family:ui-monospace,Menlo,monospace}

/* Streaming: preámbulo atenuado («voy a consultar…»), respuesta en curso con
   cursor parpadeante y chips de herramientas por encima de la respuesta. */
.burbuja .preambulo{color:var(--gris);font-size:12.5px;margin-bottom:6px}
.burbuja .respuesta{white-space:normal}
.burbuja.escribiendo .respuesta:empty::after,
.burbuja.escribiendo .respuesta > *:last-child::after{content:'▍';color:var(--gris);margin-left:1px;animation:parpadeo 1.1s steps(1) infinite}
@keyframes parpadeo{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.burbuja.escribiendo .respuesta > *:last-child::after,.burbuja.escribiendo .respuesta:empty::after{animation:none}}
.burbuja .herramienta.pendiente{opacity:.55}
.burbuja .herramienta.pensando{opacity:.75;font-style:italic}
.msg-error{color:var(--rojo);font-size:13px;margin-top:8px}

/* ─── Markdown dentro de las burbujas (static/caja/md.js) ───
   La IA responde en tablas y títulos: sin esto se veían los «|» en crudo. */
.burbuja .respuesta > *:first-child{margin-top:0}
.burbuja .respuesta > *:last-child{margin-bottom:0}
.burbuja .respuesta p{margin:0 0 8px}
.burbuja .respuesta h1,.burbuja .respuesta h2,.burbuja .respuesta h3,.burbuja .respuesta h4{line-height:1.3;color:var(--tinta);margin:16px 0 8px}
.burbuja .respuesta h1{font-size:16px}
.burbuja .respuesta h2{font-size:15px}
.burbuja .respuesta h3,.burbuja .respuesta h4{font-size:14px}
.burbuja .respuesta ul,.burbuja .respuesta ol{margin:0 0 8px;padding-left:20px}
.burbuja .respuesta li{margin:2px 0}
.burbuja .respuesta code{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;background:var(--blanco);border:1px solid var(--linea);border-radius:4px;padding:1px 4px}
.burbuja .respuesta pre{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:8px 12px;margin:0 0 8px;overflow-x:auto}
.burbuja .respuesta pre code{background:none;border:0;padding:0}
.burbuja .respuesta blockquote{margin:0 0 8px;padding-left:12px;border-left:3px solid var(--verde-claro);color:var(--gris)}
.burbuja .respuesta hr{border:0;border-top:1px solid var(--linea);margin:12px 0}
.burbuja .respuesta a{color:var(--verde);text-decoration:underline}
/* Tabla con scroll propio: una tabla ancha NO puede desbordar la cubierta del Fold */
.burbuja .md-tabla{overflow-x:auto;margin:0 0 8px;border:1px solid var(--linea);border-radius:var(--radio)}
.burbuja .md-tabla table{border-collapse:collapse;width:100%;font-size:13px}
.burbuja .md-tabla th,.burbuja .md-tabla td{padding:6px 10px;text-align:left;border-bottom:1px solid var(--linea);white-space:nowrap}
.burbuja .md-tabla th{background:var(--blanco);font-weight:700;color:var(--tinta)}
.burbuja .md-tabla tr:last-child td{border-bottom:0}
.burbuja .md-tabla td:not(:first-child){font-variant-numeric:tabular-nums}
.chat-form{display:flex;gap:8px;margin-top:12px}
.chat-form textarea{flex:1;min-height:64px}

/* Cabecera del chat: proveedor a la izquierda, «+ Nuevo chat» a la derecha */
.cab-chat{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}

/* Lista de conversaciones: cada hilo lleva su botón de borrar (patrón Jarabacoa).
   El botón aparece al pasar el ratón o al enfocar; en táctil (sin hover) va siempre. */
.chat-lista .conv-fila{display:flex;align-items:center;gap:4px}
.chat-lista .conv-fila>a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-lista .conv-borrar{flex:none;width:32px;height:32px;padding:0;display:none;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--radio);background:transparent;color:var(--gris);font-size:14px;line-height:1;cursor:pointer}
.chat-lista .conv-fila:hover .conv-borrar,.chat-lista .conv-borrar:focus-visible{display:inline-flex}
.chat-lista .conv-borrar:hover{color:var(--rojo);border-color:#e9bdbd;background:var(--blanco)}
@media (hover:none){.chat-lista .conv-borrar{display:inline-flex}}

footer.pie{margin-top:24px;padding-top:12px;border-top:1px solid var(--linea);font-size:12px;color:var(--gris);text-align:center;line-height:1.6}
/* Login: centrado vertical real (antes quedaba pegado arriba con todo el aire abajo) */
body.pagina-login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
body.pagina-login .login{margin:0;width:100%}
.login{max-width:400px;margin:7vh auto;background:var(--blanco);border-radius:12px;padding:32px;box-shadow:0 8px 30px rgba(0,0,0,.10)}
.login .logo{display:block;max-width:230px;width:100%;height:auto;margin:0 auto 16px}
.login h1{font-size:18px;color:var(--verde);text-align:center;line-height:1.4}
.login .rnc{text-align:center;font-size:12px;color:var(--dorado-osc);font-weight:700;margin:8px 0 20px}
.login .btn{width:100%;text-align:center;margin-top:8px}

.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid3 .ancho{grid-column:1 / -1}

/* Edge-to-edge en plegables: respeta isla de cámara, esquinas y barra de gestos */
@supports (padding: env(safe-area-inset-bottom)){
  body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  .sidebar{padding-top:calc(20px + env(safe-area-inset-top))}
  .contenido{padding-bottom:calc(40px + env(safe-area-inset-bottom))}
  @media (max-width:1024px){
    .sidebar{padding-top:calc(12px + env(safe-area-inset-top))}
    .contenido{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  }
}

/* ─── Tablet / Galaxy Z Fold 8 (pantalla interna ~733–1024px) ───
   No se apila: el sidebar pasa a barra horizontal y las tarjetas fluyen en 2 columnas. */
@media (max-width:1024px){
  .layout{display:block}
  .sidebar{display:block;width:auto;padding:12px 16px}
  .sidebar .marca{border-bottom:none;margin-bottom:8px;padding:0;display:flex;align-items:center;gap:12px}
  .sidebar .marca .logo{max-width:96px;margin:0}
  .sidebar .marca b{font-size:12px}
  .sidebar nav{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
  .sidebar nav a{border-left:none;box-shadow:inset 0 -3px 0 transparent;white-space:nowrap;padding:8px 12px;border-radius:var(--radio) var(--radio) 0 0}
  .sidebar nav a.activo{border-left:none;box-shadow:inset 0 -3px 0 var(--dorado);background:rgba(255,255,255,.13)}
  .sidebar nav .grupo{display:none}
  .sidebar .pie{display:none}
  .contenido{display:block;padding:16px}
  .cards{display:block;margin:0 0 16px}
  .cards .fila{display:flex;flex-wrap:wrap;gap:12px}
  .card{display:block;flex:1 1 calc(50% - 6px);min-width:0}
  .filtros{display:block;margin:0 0 16px}
  .filtros .campo{display:block;margin-bottom:8px}
  .form-grid{display:block;margin:0}
  .form-grid .fg-fila{display:block}
  .form-grid .fg-campo,.form-grid .fg-campo.mitad,.form-grid .fg-campo.full{display:block;width:auto;margin-bottom:12px}
  .flujo{gap:12px}
  .flujo .barras-par{height:120px}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chat-wrap{display:block}
  .chat-lista{display:flex;gap:8px;overflow-x:auto;width:auto;border-right:none;border-bottom:1px solid var(--linea);padding:0 0 8px;margin-bottom:12px}
  .chat-lista a{white-space:nowrap}
  .chat-lista .conv-borrar{min-width:44px;min-height:44px;font-size:16px}
  .chat-cuerpo{display:block;padding-left:0}
  /* Touch targets ≥44px en pantalla táctil */
  .btn,.btn.chico,.btn.fila,.paginacion a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .btn.fila,.btn.chico{padding:8px 12px;font-size:12.5px}
  .paginacion a{min-width:44px}
}

/* En la cubierta el nav va en barra horizontal: se acortan los rótulos largos */
@media (max-width:600px){
  .ocm{display:none}
  .sidebar nav a{font-size:13px;padding:8px 10px}
}

/* ─── Teléfono / cubierta del Fold (~320–600px) ─── */
@media (max-width:600px){
  .contenido{padding:12px}
  header.pagina h1{font-size:20px}
  .card{flex:1 1 100%}
  .card .val{font-size:24px}
  .grid3{grid-template-columns:1fr}
  .panel{padding:12px}
  .panel h2{font-size:15px}
  .burbuja.user{margin-left:24px}
  .burbuja.assistant{margin-right:24px}
  .login{padding:24px;margin:4vh 12px}
}

/* ─── Tablas como tarjetas (solo el libro, en la cubierta) ─── */
@media (max-width:600px){
  .tabla-cards thead{display:none}
  .tabla-cards tbody tr{display:block;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio-lg);padding:12px;margin-bottom:12px}
  .tabla-cards tbody tr:nth-child(even){background:var(--blanco)}
  .tabla-cards tbody td{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border:none;padding:4px 0;text-align:right}
  .tabla-cards tbody td::before{content:attr(data-label);font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--gris);font-weight:700;text-align:left;flex:0 0 auto}
  .tabla-cards tbody td:first-child{font-weight:700;border-bottom:1px solid var(--linea-claro);padding-bottom:8px;margin-bottom:4px}
  .tabla-cards tbody td:last-child{justify-content:flex-end;padding-top:8px}
  /* en la tarjeta hay más ancho útil: 3 líneas y sin topes de ancho */
  .celda-concepto{min-width:0;max-width:100%}
  .concepto-texto{-webkit-line-clamp:3;line-clamp:3}
}

/* Salidas por naturaleza en la cubierta: nombre + monto arriba, barra a lo ancho */
@media (max-width:600px){
  .barras{display:block}
  .barra-item{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:8px 0;
    border-bottom:1px solid var(--linea-claro)}
  .barra-item:last-child{border-bottom:none}
  .barra-item .nombre{display:block;width:auto;font-size:14px;grid-column:1;text-align:left}
  .barra-item .monto{display:block;width:auto;text-align:right;grid-column:2;font-size:13.5px;font-weight:600;color:var(--tinta)}
  .barra-item .pista{display:block;grid-column:1 / -1}
  .barra-item .pista i{height:12px;min-width:2px}
}

/* Flujo mensual en la cubierta: una fila por mes, barras horizontales, montos legibles */
@media (max-width:600px){
  .flujo{display:block}
  .flujo .mes{display:grid;grid-template-columns:1fr auto;gap:4px 12px;text-align:left;
    padding:12px 0;border-bottom:1px solid var(--linea-claro)}
  .flujo .mes:last-child{border-bottom:none;padding-bottom:0}
  .flujo .lbl{order:1;grid-column:1;font-size:15px;margin-top:0}
  .flujo .neto{order:2;grid-column:2;text-align:right;font-size:14px;margin-top:0;white-space:nowrap}
  .flujo .barras-par{order:3;grid-column:1 / -1;display:block;height:auto;margin-top:8px}
  .flujo .par{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto;align-items:center;gap:8px;margin-bottom:4px;height:auto}
  /* fila y columna explícitas: el auto-placement mandaba la barra a otra fila */
  .flujo .par .etq{grid-area:1 / 1;flex:none;width:12px;text-align:left}
  .flujo .par .b{grid-area:1 / 2;margin-top:0;align-self:center;width:calc(100% * var(--alto,0) / 150);max-width:100%;height:12px;min-width:2px;border-radius:0 4px 4px 0}
  .flujo .par .monto{grid-area:1 / 3;margin-left:auto;font-size:13.5px;font-weight:600;color:var(--tinta)}
}

/* Cabecera de página: se apila en la cubierta (evita desborde de los botones) */
@media (max-width:600px){
  header.pagina{display:block}
  header.pagina .izq,header.pagina .der{display:block;text-align:left}
  header.pagina .der{margin-top:8px}
}

/* Móvil en modo multi-ventana del Fold (media pantalla ≈ 320px) */
@media (max-width:360px){
  .contenido{padding:8px}
  .panel{padding:12px 8px}
  .card .val{font-size:20px}
  th,td{padding:8px}
}

/* ── Asiento anulado (soft delete auditado) ────────────────────────────────
   Queda visible en el libro con su motivo, pero fuera de todos los totales. */
.fila-anulada td { opacity: .6; }
.fila-anulada .celda-concepto { text-decoration: line-through; }
.fila-anulada .btn, .fila-anulada .tag, .fila-anulada a { text-decoration: none; }
.fila-anulada .tag.rojo { opacity: 1; font-weight: 700; }