/* ════════════════════════════════════════════════════════════════════
   CONTABILIDAD · estilos del módulo (src/conta.js)
   Todo scopeado bajo #s-conta o con prefijo .ct- para no filtrar al
   resto del panel. Usa los tokens de styles.css (--navy, --line,
   --r-md…): nada de hex literales salvo donde var() no funciona.
   ════════════════════════════════════════════════════════════════════ */

/* El grupo "Contabilidad" del menú (encabezado, sub-rótulos Documentos /
   Dinero / Informes y sus estilos) vive en index.html y styles.css desde
   oct-2026; este módulo solo cuelga sus entradas adentro. */

/* ── Controles de la cabecera ────────────────────────────────────── */
.ct-sel{
  padding:5px 9px; border:1px solid var(--line); border-radius:var(--r);
  font-size:12px; background:#fff; color:var(--text); cursor:pointer; max-width:220px;
}
.ct-sel:focus{ outline:none; border-color:var(--navy); }
.ct-sel-wide{ max-width:340px; }
.ct-search{
  padding:5px 9px; border:1px solid var(--line); border-radius:var(--r);
  font-size:12px; background:#fff; color:var(--text); min-width:200px;
}
.ct-search:focus{ outline:none; border-color:var(--navy); }

/* ── Scroll horizontal de las tablas largas ──────────────────────── */
#s-conta .ct-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ── Código de cuenta en monoespaciada (ya cargada en el panel) ───── */
.ct-code{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px; font-weight:500; color:var(--text-2);
  background:var(--bg-alt); border:1px solid var(--line-soft);
  border-radius:3px; padding:1px 5px; white-space:nowrap;
}
.ct-dim{ color:var(--text-3); }
.ct-bad{ color:var(--red); font-weight:600; }

/* ── Árbol del plan de cuentas ───────────────────────────────────── */
#s-conta tr.ct-grupo td{ background:var(--bg-alt); font-weight:600; }
#s-conta tr.ct-grupo .ct-code{ background:#fff; }
#s-conta tr.ct-inact td{ opacity:0.55; }
.ct-ind{ display:inline-block; }
#s-conta .ct-acc{ white-space:nowrap; }
#s-conta .ct-acc .btn{ margin-left:4px; }

/* ── Libro Diario: un asiento = un bloque ────────────────────────── */
#s-conta .ct-tbl-diario tbody.ct-as-block{ border-top:2px solid var(--line); }
#s-conta tr.ct-as-head{ cursor:pointer; }
#s-conta tr.ct-as-head td{ background:var(--bg-alt); }
#s-conta tr.ct-as-head:hover td{ background:#f2f4f7; }
#s-conta tr.ct-as-line{ cursor:pointer; }
#s-conta tr.ct-as-line td{ color:var(--text-2); }
#s-conta tr.ct-as-line:hover td{ background:var(--bg-alt); }
#s-conta .ct-tbl-diario tfoot td{ border-top:1px solid var(--line); font-weight:600; }

/* ── Libro Mayor ─────────────────────────────────────────────────── */
#s-conta tr.ct-mayor-ini td{ background:var(--bg-alt); }
#s-conta table tfoot td,
#ct-modales table tfoot td{ border-top:1px solid var(--line); background:var(--bg-alt); padding:10px 12px; }

/* ── Avisos ──────────────────────────────────────────────────────── */
/* Bloque, NO flex: el contenido es prosa con <i>, <code> y <br>, y en
   flex cada uno de esos fragmentos se convierte en un ítem de la fila,
   lo que desarma la frase ("...permissions. Si dice" antes del chip).
   El icono va flotado, que da el mismo alineado que flex-start. */
.ct-alert{
  display:block;
  font-size:12px; line-height:1.5; padding:9px 12px;
  border-radius:var(--r); border:1px solid var(--line); margin:0 0 12px;
}
.ct-alert svg{ float:left; margin:2px 7px 0 0; }
.ct-alert code{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; }
.ct-alert-red{ background:var(--red-bg); border-color:var(--red); color:var(--red-text); }
.ct-alert-amber{ background:var(--amber-bg); border-color:var(--amber); color:var(--amber-text); }
.ct-alert-green{ background:var(--green-bg); border-color:var(--green); color:var(--green-text); }
.ct-alert ul{ margin:6px 0 0; padding-left:18px; }
.ct-alert li{ margin:2px 0; }
.ct-alert a{ color:inherit; text-decoration:underline; }

.ct-err{
  background:var(--red-bg); border:1px solid var(--red); color:var(--red-text);
  border-radius:var(--r); padding:9px 12px; font-size:12px; line-height:1.5; margin-top:12px;
}
.ct-err ul{ margin:0; padding-left:18px; }
.ct-err li{ margin:2px 0; }
.ct-hint{ font-size:10.5px; color:var(--text-3); line-height:1.45; margin-top:4px; }

/* ── Modal de asiento ────────────────────────────────────────────── */
.ct-modal-wide{ max-width:980px; width:96vw; max-height:92vh; display:flex; flex-direction:column; }
.ct-modal-wide .modal-bd{ overflow-y:auto; }
.ct-form-meta{ font-size:11px; color:var(--text-3); margin:2px 0 10px; }
.ct-lineas-wrap{ border:1px solid var(--line); border-radius:var(--r-md); overflow-x:auto; }
.ct-tbl-lineas{ min-width:720px; }
.ct-tbl-lineas td{ padding:6px 8px; vertical-align:middle; }
.ct-tbl-lineas th{ padding:7px 8px; }
.ct-tbl-lineas select,
.ct-tbl-lineas input{
  width:100%; padding:6px 8px; border:1px solid var(--line);
  border-radius:var(--r); font-size:12px; background:#fff; color:var(--text); outline:none;
}
.ct-tbl-lineas select:focus,
.ct-tbl-lineas input:focus{ border-color:var(--navy); }
.ct-tbl-lineas input.ct-monto{ text-align:right; font-variant-numeric:tabular-nums; }
.ct-x{
  background:none; border:none; color:var(--text-4); font-size:17px; line-height:1;
  cursor:pointer; padding:4px 6px; min-width:30px; min-height:30px; border-radius:var(--r);
}
.ct-x:hover{ color:var(--red); background:var(--red-bg); }

/* Totales del formulario: el semáforo de la partida doble */
.ct-tot{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  margin-top:12px; padding:10px 14px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--bg-alt);
}
.ct-tot.ok{ border-color:var(--green); background:var(--green-bg); }
.ct-tot.bad{ border-color:var(--amber); background:var(--amber-bg); }
.ct-tot-lbl{
  display:block; font-size:10px; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-3);
}
.ct-tot-val{ display:block; font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; }
.ct-tot-msg{ margin-left:auto; font-size:11.5px; font-weight:500; }
.ct-tot.ok .ct-tot-msg{ color:var(--green-text); }
.ct-tot.bad .ct-tot-msg{ color:var(--amber-text); }

/* ── Modal de lectura del asiento ────────────────────────────────── */
.ct-ver-glosa{ font-size:15px; font-weight:500; margin-bottom:10px; line-height:1.4; }
.ct-meta-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 16px;
  padding:10px 12px; margin-bottom:14px;
  background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--r-md);
}
.ct-meta-lbl{
  display:block; font-size:9.5px; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-3);
}
.ct-meta-val{ display:block; font-size:12px; color:var(--text); word-break:break-word; }

/* ── Centralización (fase 2) ────────────────────────── */
/* Configuración: banco y cuenta de ingreso, uno al lado del otro. */
.ct-cfg{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 18px; margin-bottom:14px;
}
.ct-cfg label{
  display:block; font-size:11px; font-weight:500; color:var(--text-2); margin-bottom:4px;
}

/* Las reglas de centralización, para que se puedan leer antes de
   apretar el botón: es la letra chica de lo que va a escribir. */
.ct-reglas{ border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.ct-reglas-tit{
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px;
  color:var(--text-3); padding:8px 12px; background:var(--bg-alt);
  border-bottom:1px solid var(--line);
}
.ct-reglas table{ margin:0; }
.ct-reglas td, .ct-reglas th{ font-size:11.5px; }

/* Control de cuadratura: dos tarjetas, verde si cuadra, roja si no. */
.ct-ctrl-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.ct-ctrl{ border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; }
.ct-ctrl.ok{ border-color:var(--green); background:var(--green-bg); }
.ct-ctrl.bad{ border-color:var(--red); background:var(--red-bg); }
.ct-ctrl-hd{ font-size:12.5px; font-weight:600; margin-bottom:8px; }
.ct-ctrl table{ background:#fff; border-radius:var(--r); margin-bottom:8px; }
.ct-ctrl td{ padding:6px 10px; font-size:11.5px; }
.ct-ctrl-msg{ font-size:11.5px; font-weight:500; line-height:1.5; }
.ct-ctrl.ok .ct-ctrl-msg{ color:var(--green-text); }
.ct-ctrl.bad .ct-ctrl-msg{ color:var(--red-text); }

/* Detalle: las líneas de cada asiento dentro de una celda. */
.ct-det-l{ font-size:11px; line-height:1.7; white-space:nowrap; }

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width:768px){
  #s-conta .tabs{ width:100%; overflow-x:auto; }
  #s-conta .page-hd .actions{ flex-wrap:wrap; }
  .ct-sel, .ct-sel-wide, .ct-search{ max-width:none; width:100%; min-width:0; }
  #s-conta .card-hd{ flex-direction:column; align-items:stretch; gap:8px; }
  .ct-meta-grid{ grid-template-columns:1fr 1fr; }
  .ct-cfg, .ct-ctrl-row{ grid-template-columns:1fr; }
  .ct-det-l{ white-space:normal; }
  .ct-tot{ gap:14px; }
  .ct-tot-msg{ margin-left:0; flex:1 1 100%; }
  /* Objetivo táctil mínimo en las acciones de fila (ui-ux-pro-max P2) */
  #s-conta .ct-acc .btn{ min-height:34px; }
}

/* ── Accesibilidad ───────────────────────────────────────────────── */
#s-conta :focus-visible,
#ct-modales :focus-visible{ outline:2px solid var(--navy); outline-offset:1px; }
@media (prefers-reduced-motion: reduce){
  #s-conta *{ transition:none !important; }
}

/* ── Informes · Balance general y Estado de resultados ───────────
   Deliberadamente NO usan .tbl: en móvil .tbl se convierte en tarjetas
   apiladas, y un informe contable es justo lo contrario —concepto a la
   izquierda, cifra a la derecha, a cualquier ancho. Por eso .ct-inf
   trae su propia alineación en vez de heredar .tbl .r                  */
.ct-informe{ max-width:720px; }
.ct-inf{
  width:100%; border-collapse:collapse;
  font-size:12.5px; line-height:1.45;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
}
.ct-inf td{ padding:5px 12px; border:none; vertical-align:baseline; }
.ct-inf .r{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* Encabezado de grupo mayor: ACTIVO, PASIVO, GANANCIAS, PERDIDAS */
.ct-inf tr.ct-inf-h td, .ct-inf tr.ct-inf-h th{
  background:var(--navy); color:#fff;
  font-size:10.5px; font-weight:600; letter-spacing:0.6px; text-transform:uppercase;
  padding:7px 12px;
}
/* Grupo de 4 dígitos (1101 Bancos) y sus cuentas imputables */
.ct-inf tr.ct-inf-g td{ background:var(--bg-alt); font-weight:600; }
.ct-inf tr.ct-inf-c td:first-child{ padding-left:28px; color:var(--text-2); }
/* Total del bloque y resultado final */
.ct-inf tr.ct-inf-t td{ border-top:1px solid var(--line); font-weight:600; }
.ct-inf tr.ct-inf-r td{
  border-top:2px solid var(--navy); font-weight:600; font-size:13px; padding:8px 12px;
}
.ct-inf tr.ct-inf-sep td{ height:10px; padding:0; }
.ct-inf .ct-inf-vacio{ color:var(--text-3); font-style:italic; text-align:center; padding:14px 12px; }
.ct-inf-nota{ font-size:10.5px; color:var(--text-3); line-height:1.5; margin-top:10px; }

/* ── Balance general en forma de T ───────────────────────────────
   Dos columnas que se estiran a la misma altura (grid + stretch); el
   total de cada lado va pegado abajo con margin-top:auto. Cada lado es
   UN panel con borde: la tabla adentro no lleva el suyo, para que el
   aire entre la última cuenta y el total se lea como parte del panel.  */
.ct-informe-bal{ max-width:1080px; }
.ct-bal{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:stretch; }
.ct-bal-col{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
}
.ct-bal-col .ct-inf{ border:none; border-radius:0; }
.ct-bal-tot{
  margin-top:auto; display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:9px 12px; border-top:2px solid var(--navy);
  font-weight:600; font-size:13px;
}
@media (max-width:760px){
  .ct-bal{ grid-template-columns:1fr; }
}

/* ── EERR mensual · una columna por mes ──────────────────────────
   El cuadro es más ancho que la pantalla a partir de ~8 meses: se
   desplaza a lo ancho dentro de su propio marco y la primera columna
   (la cuenta) queda fija, para no perder de vista qué fila se lee.  */
.ct-informe-mes{ max-width:none; }
.ct-inf-modo{ display:flex; gap:6px; align-items:center; margin-bottom:10px; }
.ct-inf-modo .btn svg{ vertical-align:-2px; margin-right:3px; }
.ct-inf-mes-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-md); background:#fff; }
.ct-inf-mes{ border:none; border-radius:0; font-size:12px; width:auto; min-width:100%; }
.ct-inf-mes th, .ct-inf-mes td{ padding:4px 10px; white-space:nowrap; }
.ct-inf-mes th{ font-weight:inherit; text-align:left; }
.ct-inf-mes th.r{ text-align:right; }
.ct-inf-mes tr.ct-inf-cab th{
  background:var(--bg-alt); color:var(--text-3);
  font-size:10.5px; font-weight:600; letter-spacing:.4px; text-transform:uppercase;
  padding:7px 10px; border-bottom:1px solid var(--line);
}
/* Primera columna fija al desplazar */
.ct-inf-mes th:first-child, .ct-inf-mes td:first-child{
  position:sticky; left:0; z-index:1; background:#fff;
  border-right:1px solid var(--line); max-width:260px; overflow:hidden; text-overflow:ellipsis;
}
.ct-inf-mes tr.ct-inf-cab th:first-child, .ct-inf-mes tr.ct-inf-g th:first-child{ background:var(--bg-alt); }
.ct-inf-mes tr.ct-inf-h th:first-child{ background:var(--navy); }
.ct-inf-mes tr.ct-inf-h th{ text-align:left; }
.ct-inf-mes tr.ct-inf-c th:first-child{ padding-left:24px; color:var(--text-2); }
.ct-inf-mes tr.ct-inf-g th, .ct-inf-mes tr.ct-inf-g td{ font-weight:600; background:var(--bg-alt); }
.ct-inf-mes tr.ct-inf-t th, .ct-inf-mes tr.ct-inf-t td{ font-weight:600; border-top:1px solid var(--line); }
.ct-inf-mes tr.ct-inf-r th, .ct-inf-mes tr.ct-inf-r td{ font-weight:600; border-top:2px solid var(--navy); padding:7px 10px; }
.ct-inf-mes tr.ct-inf-acum th, .ct-inf-mes tr.ct-inf-acum td{ color:var(--text-2); font-style:italic; }
.ct-inf-mes .ct-inf-tot{ background:var(--bg-alt); font-weight:600; border-left:1px solid var(--line); }
.ct-inf-mes .ct-neg{ color:var(--red-text); }

/* Engranaje de ajustes: botón de solo icono, cuadrado y con el mismo
   alto que los btn-sm de al lado para que la barra no se desalinee. */
.ct-engranaje{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; padding:0;
}
.ct-engranaje svg{ display:block; }

/* ── Impresión: los libros se imprimen seguido, sin cromo del panel ─ */
@media print{
  #s-conta .page-hd .actions, #s-conta .tabs, #s-conta .card-hd > div:last-child{ display:none !important; }
  #s-conta .ct-scroll{ overflow:visible !important; }
  #s-conta tbody.ct-as-block{ break-inside:avoid; page-break-inside:avoid; }
  /* propuestas.css declara `@page{margin:0}` para imprimir sus hojas a
     sangre, se carga antes y gana. En vez de pelear con esa regla, los
     márgenes de la hoja van como padding de la sección —el mismo
     recurso que usa la ficha del cliente. */
  #s-conta{ padding:14mm 16mm !important; background:#fff !important; min-height:0 !important; }
  /* El informe en papel: sin fondos de tinta, con líneas que sí salen. */
  #s-conta .ct-inf{ border-color:#000; }
  #s-conta .ct-inf tr.ct-inf-h td{ background:#fff !important; color:#000; border-bottom:1px solid #000; }
  #s-conta .ct-inf tr.ct-inf-r td{ border-top:2px solid #000; }
  #s-conta .ct-inf tr{ break-inside:avoid; page-break-inside:avoid; }
  /* El balance en T también en papel: dos columnas a 3,4in cada una. */
  #s-conta .ct-bal{ grid-template-columns:1fr 1fr !important; }
  #s-conta .ct-bal-col{ border-color:#000; break-inside:avoid; page-break-inside:avoid; }
  #s-conta .ct-bal-tot{ border-top:2px solid #000; }
  /* El cuadro mensual no puede desplazarse en papel: se encoge hasta
     que los 12 meses y el total quepan en una hoja carta vertical. */
  #s-conta .ct-inf-modo{ display:none !important; }
  #s-conta .ct-inf-mes-wrap{ overflow:visible !important; border-color:#000; }
  #s-conta .ct-inf-mes{ font-size:8px; width:100%; }
  #s-conta .ct-inf-mes th, #s-conta .ct-inf-mes td{ padding:2px 4px; }
  #s-conta .ct-inf-mes th:first-child, #s-conta .ct-inf-mes td:first-child{ position:static; max-width:none; }
  #s-conta .ct-inf-mes tr.ct-inf-h th{ background:#fff !important; color:#000; border-bottom:1px solid #000; }
  #s-conta .ct-inf-mes tr.ct-inf-cab th, #s-conta .ct-inf-mes tr.ct-inf-g th, #s-conta .ct-inf-mes tr.ct-inf-g td,
  #s-conta .ct-inf-mes .ct-inf-tot{ background:#fff !important; }
}