/* fc-integral · explorador del equipo.
   Sistema de la casa (family-capital-report/references/sistema.md): DM Sans, fondo crema,
   un solo acento coral, verde y ambar solo para estados, reglas finas sin cajas ni cebrado,
   encabezados en versalitas espaciadas, numeros a la derecha en es-ES, guion largo gris
   para el vacio. Nunca tabular-nums (en DM Sans separa los puntos de miles).
   El CSS propio de cada pantalla va en css/pantallas/<pantalla>.css. */

@font-face{font-family:'DM Sans';src:url('../fonts/DMSans-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'DM Sans';src:url('../fonts/DMSans-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'DM Sans';src:url('../fonts/DMSans-Bold.ttf') format('truetype');font-weight:700;font-display:swap}

:root{
  /* superficies */
  --bg:#F9F8F2; --panel:#F1EDE4; --panel-claro:#FCFBF7; --line:#E8E3D9; --regla:#D9D4C8; --blanco:#FFFFFF;
  /* tinta */
  --ink:#1F1F23; --mut:#45454B; --sec:#55555A; --soft:#6E6E74; --guion:#A8A8A4;
  /* acento y estados */
  --coral:#F9694D; --coral-suave:#FFF1E8; --coral-borde:#F3D7C4;
  --green:#3F6B4E; --green-bg:#EEF6F0; --amber:#8A5A12; --amber-bg:#F7F0E1; --punto-ambar:#D9A441;
  --neutro-bg:#ECEAE3; --rojo:#B3261E; --rojo-bg:#FBE9E7;
  /* medidas */
  --lateral:224px; --drawer:620px; --gutter:36px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:14px/1.45 'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3,p{margin:0}
button,input,select{font:inherit;color:inherit}
[hidden]{display:none !important}

/* ------------------------------------------------------------------ lateral */
.lateral{position:fixed;inset:0 auto 0 0;width:var(--lateral);border-right:1px solid var(--line);padding:22px 18px 18px;
  overflow:auto;background:var(--bg);display:flex;flex-direction:column;z-index:5}
.marca{font-weight:700;letter-spacing:.14em;font-size:11px;text-transform:uppercase;text-decoration:none}
.marca small{display:block;font-weight:500;color:var(--soft);letter-spacing:.12em;font-size:9.5px;margin-top:2px}
.lateral .cliente{margin:18px 0 8px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13px}
.lateral .cliente b{display:block}
.lateral .cliente span{color:var(--soft);font-size:11.5px}
.busca-lateral{position:relative;margin:4px 0 0}
.busca-lateral input{width:100%;font-size:12.5px;padding:5px 26px 5px 8px}
.busca-lateral kbd{position:absolute;right:7px;top:50%;transform:translateY(-50%);color:var(--soft);pointer-events:none}
.busca-lateral input:focus + kbd,.busca-lateral input:not(:placeholder-shown) + kbd{display:none}
.nav{flex:1}
.nav-grupo{font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin:18px 0 6px}
.nav a{display:flex;justify-content:space-between;align-items:baseline;text-decoration:none;padding:6px 10px;margin:0 -10px;
  border-radius:4px;color:var(--sec)}
.nav a:hover{background:var(--panel);color:var(--ink)}
.nav a.on{background:var(--ink);color:#fff}
.nav a .n{font-size:11px;color:var(--amber);font-weight:500}
.nav a.on .n{color:#F7D9A8}
.nav a .n.err{color:var(--rojo)}
.nav a.on .n.err{color:#F4B4AC}
.nav .nav-admin{margin-top:18px;font-size:12.5px;color:var(--soft)}
.pie-lateral{margin-top:18px;padding-top:10px;border-top:1px solid var(--line);font-size:11px;color:var(--soft);
  display:flex;justify-content:space-between;gap:8px;align-items:center}
.pie-lateral form{margin:0}
.pie-lateral button{border:0;background:none;padding:0;color:var(--soft);font-size:11px;cursor:pointer;text-decoration:underline}

/* ---------------------------------------------------------------- principal */
.principal{margin-left:var(--lateral);padding:30px var(--gutter) 60px;min-width:0}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--coral)}
h1{font-size:34px;font-weight:700;letter-spacing:-.022em;margin:6px 0 4px;line-height:1.1}
h2{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:28px 0 10px}
.sub,.bajada{color:var(--sec);margin:0 0 18px;max-width:900px}
.rotulo{font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.mut{color:var(--soft)}
.nota{font-size:12px;color:var(--soft)}
.pie{margin-top:12px;font-size:11.5px;color:var(--soft)}
kbd{font:inherit;font-size:10.5px;border:1px solid var(--regla);border-bottom-width:2px;border-radius:3px;padding:0 4px;background:#fff}

/* ---------------------------------------------------------------- controles */
.controles{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;padding:11px 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);margin:0 0 14px}
.ctl{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--sec)}
.ctl > label,.ctl .etq{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);font-weight:500}
select,input[type=date],input[type=search],input[type=text]{font-size:13px;background:#fff;border:1px solid var(--regla);
  border-radius:4px;padding:4px 8px;color:var(--ink)}
select:focus,input:focus,.btn:focus-visible,.seg label:focus-within{outline:2px solid var(--coral-borde);outline-offset:1px}
/* La cruz para limpiar una busqueda, en la tinta de la casa (no el azul del navegador). */
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:10px;height:10px;margin-left:6px;
  cursor:pointer;background:linear-gradient(45deg,transparent 43%,var(--soft) 43%,var(--soft) 57%,transparent 57%),
  linear-gradient(-45deg,transparent 43%,var(--soft) 43%,var(--soft) 57%,transparent 57%)}
input[type=search]::-webkit-search-cancel-button:hover{background:linear-gradient(45deg,transparent 43%,var(--ink) 43%,var(--ink) 57%,transparent 57%),
  linear-gradient(-45deg,transparent 43%,var(--ink) 43%,var(--ink) 57%,transparent 57%)}
.seg{display:inline-flex;border:1px solid var(--regla);border-radius:4px;overflow:hidden;background:#fff}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{font-size:12.5px;padding:4px 10px;color:var(--sec);cursor:pointer;letter-spacing:0;text-transform:none;font-weight:400}
.seg label + input + label{border-left:1px solid var(--regla)}
.seg input:checked + label{background:var(--ink);color:#fff}
.chk{display:flex;gap:6px;align-items:center;color:var(--ink);font-size:12.5px;cursor:pointer}
.chk input{margin:0;accent-color:var(--ink)}
.btn{display:inline-block;font-size:12.5px;border:1px solid var(--regla);background:#fff;border-radius:4px;padding:4px 10px;
  cursor:pointer;text-decoration:none;color:var(--ink);white-space:nowrap}
.btn:hover{border-color:var(--mut)}
.btn.sutil{border-color:transparent;background:none;color:var(--sec)}
.btn.sutil:hover{color:var(--ink);border-color:var(--regla)}
.espacio{flex:1}

/* ----------------------------------------------------------- avisos y chips */
.avisos{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;align-items:center}
.chip{display:inline-block;font-size:12px;padding:3px 10px;border-radius:999px;background:var(--neutro-bg);color:var(--mut);
  white-space:nowrap;text-decoration:none;line-height:1.4}
a.chip:hover{text-decoration:underline}
.chip.amb,.chip.ambar{background:var(--amber-bg);color:var(--amber)}
.chip.ok,.chip.verde{background:var(--green-bg);color:var(--green)}
.chip.err,.chip.coral{background:var(--rojo-bg);color:var(--rojo)}
.chip.neutro{background:var(--neutro-bg);color:var(--mut)}
.chip.cargando{color:var(--soft)}
.explica{margin:-6px 0 16px;font-size:12.5px;color:var(--sec);max-width:1040px}
.explica summary{cursor:pointer;color:var(--amber);font-size:12px;list-style:none;display:inline}
.explica summary::-webkit-details-marker{display:none}
.explica summary::before{content:"▸ ";font-size:10px}
.explica[open] summary::before{content:"▾ "}
.explica table{margin-top:8px}
.explica td{vertical-align:top}
.explica .motivo{font-weight:500;color:var(--ink);white-space:nowrap}
/* avisos en bloque (pantallas del Sprint 2) */
.aviso{border-radius:4px;padding:9px 14px;margin:10px 0;font-size:13px;background:var(--neutro-bg);color:var(--mut)}
.aviso.ambar,.aviso.amb{background:var(--amber-bg);color:var(--amber)}
.aviso.verde,.aviso.ok{background:var(--green-bg);color:var(--green)}
.aviso.err{background:var(--rojo-bg);color:var(--rojo)}

/* --------------------------------------------------------- tablas en general */
table{border-collapse:collapse;width:100%}
th{font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);text-align:left;
  padding:9px 10px 7px;border-bottom:1px solid var(--ink);white-space:nowrap;vertical-align:bottom}
td{padding:6px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th.num,td.num,.num{text-align:right;white-space:nowrap}
td.fecha{white-space:nowrap}
.dash{color:var(--guion)}
tr.rubro td{font-weight:700;background:var(--panel)}
tr.total td{font-weight:700;border-top:3px solid var(--ink);border-bottom:0;padding-top:8px}
a.celda{text-decoration:none}
a.celda:hover{text-decoration:underline}
.vacio{color:var(--soft);padding:18px 0}

/* celdas navegables (drill) y borradores */
[data-drill]{cursor:zoom-in}
td[data-drill]:hover{background:#FFF8EE;outline:1px solid var(--coral-borde);outline-offset:-1px}
td.sel,td.sel:hover{background:var(--coral-suave) !important;outline:1px solid var(--coral);outline-offset:-1px}
.bor{font-style:italic}
.bor::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--punto-ambar);
  margin-left:5px;vertical-align:middle}
/* En una celda, el punto cuelga en el margen derecho de la propia celda (10px en el arbol, la cifra corre 2px; las listas reservan
   12px en todas sus cifras, asi la columna queda alineada): no corre la cifra ni sale de la tabla. */
td.bor::after{margin-right:-9px}

/* ------------------------------------------------------------- tabla arbol */
.tabla-wrap{overflow:auto;max-height:calc(100vh - 250px);min-height:240px;border-top:1px solid var(--line)}
table.arbol{border-collapse:separate;border-spacing:0;width:100%}
.arbol th{position:sticky;top:0;background:var(--bg);z-index:2;text-align:right;padding:10px 10px 8px}
.arbol th:first-child{text-align:left;left:0;z-index:3}
.arbol th .f{display:block;font-size:9.5px;letter-spacing:.06em;color:var(--soft);text-transform:none;font-weight:400}
.arbol td{padding:6px 10px;text-align:right;white-space:nowrap}
.arbol td:first-child{text-align:left;position:sticky;left:0;background:var(--bg);z-index:1;white-space:normal;
  min-width:250px;max-width:400px}
.arbol tr[data-id] > td:first-child{cursor:pointer}
.arbol tr.g1 td{background:var(--panel);font-weight:700}
.arbol tr.g2 td{font-weight:700}
.arbol tr.g2 td:first-child{padding-left:22px}
.arbol tr.g3 td:first-child{padding-left:36px;color:var(--sec)}
.arbol tr.g4 td:first-child{padding-left:56px;color:var(--sec)}
.arbol tr.g3 td,.arbol tr.g4 td{color:var(--sec)}
.arbol tr.sint td:first-child{font-weight:500;color:var(--sec)}
.arbol tr.sint td{font-weight:500}
.arbol tr.seccion td{background:var(--panel);font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);padding-top:9px}
.arbol tr.sub td{font-weight:700;border-top:1px solid var(--ink);color:var(--ink)}
.arbol tr.sub.ordinario td{border-top:2px solid var(--ink)}
.arbol tr.espacio td{border:0;padding:4px}
.arbol tr.tot td{border-top:3px solid var(--ink);border-bottom:0;font-weight:700;padding-top:9px}
.arbol tr.tot td.clave{color:var(--coral)}
.arbol tr.pie-tabla td{color:var(--soft);font-size:12.5px}
.arbol-acc{margin-left:10px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--soft);font-size:11px}
.arbol-acc button{border:0;background:none;padding:0;font-size:11px;color:var(--soft);cursor:pointer;text-decoration:underline;
  text-decoration-color:var(--regla);text-underline-offset:2px}
.arbol-acc button:hover{color:var(--ink)}
.caret{display:inline-block;width:14px;color:var(--soft);font-size:10px;user-select:none}
.cod{color:var(--soft);font-size:12px;margin-right:6px;font-weight:400}
.arbol a.mayor{text-decoration:none}
.arbol a.mayor:hover{text-decoration:underline}
.arbol td.var{color:var(--sec)}
.arbol td.pct{color:var(--soft)}
.arbol th.sep,.arbol td.sep{border-left:1px solid var(--line)}

/* ------------------------------------------------------------- tabla lista */
table.lista{width:100%;border-collapse:collapse;margin-top:6px}
.lista th{font-size:9.5px;letter-spacing:.12em;text-align:right;padding:8px 6px}
.lista th.txt,.lista th:first-child{text-align:left}
.lista td{padding:7px 6px;text-align:right;vertical-align:top}
.lista td.num,.lista td.bor,.lista th:not(.txt):not(:first-child){padding-right:12px}
.lista td.txt,.lista td:first-child{text-align:left}
.lista td.txt{white-space:normal}
/* El encabezado de una lista queda a la vista al bajar (como en el arbol): sin el, Debe, Haber o Esperado y Obtenido
   no se distinguen. La linea de abajo va como sombra: con border-collapse, el borde no acompana al encabezado. */
.lista thead th{position:sticky;top:0;z-index:2;background:var(--bg);box-shadow:inset 0 -1px 0 var(--ink)}
.panel .lista thead th{background:var(--panel-claro)}
/* En un monitor grande, una tabla angosta (rotulo y una a tres cifras) no se estira a todo el ancho: la cifra queda
   cerca de su rotulo. Y las notas no pasan de una linea comoda de leer. */
table.arbol:not(:has(th:nth-child(5))),table.lista:not(:has(th:nth-child(5))){max-width:900px}
p.pie,p.nota{max-width:120ch}
.lista tr.fila[data-drill]:hover td{background:#FFF8EE}
.lista tr.fijo td{color:var(--soft)}
.lista tr.suma td,.lista tfoot tr td{border-top:2px solid var(--ink);border-bottom:0;font-weight:700}
.lista tfoot tr + tr td{border-top:0;padding-top:2px}
.lista tfoot tr.parcial td{font-weight:500;color:var(--sec)}
.lista th[data-orden]{cursor:pointer;user-select:none}
.lista th[data-orden]:hover{color:var(--ink)}
.lista th.orden-asc::after{content:" ↑"}
.lista th.orden-desc::after{content:" ↓"}
.lista .sec{display:block;color:var(--soft);font-size:11.5px}

/* --------------------------------------------------- panel lateral (drill) */
.panel{position:fixed;top:0;right:0;bottom:0;width:var(--drawer);max-width:94vw;background:var(--panel-claro);
  border-left:1px solid var(--regla);box-shadow:-18px 0 40px rgba(31,31,35,.06);transform:translateX(102%);
  transition:transform .18s ease;z-index:20;display:flex;flex-direction:column}
.panel.abierto{transform:none}
.panel-x{position:absolute;top:12px;right:14px;border:0;background:none;font-size:22px;line-height:1;color:var(--soft);cursor:pointer;
  padding:4px 6px}
.panel-x:hover{color:var(--ink)}
.migas{font-size:11.5px;color:var(--soft);display:flex;flex-wrap:wrap;gap:4px;padding:18px 48px 0 24px}
.migas a{cursor:pointer;text-decoration:none;border-bottom:1px dotted var(--regla)}
.migas a:hover{color:var(--ink)}
.panel-contenido{flex:1;overflow:auto;display:flex;flex-direction:column;min-height:0}
.panel-contenido.cargando{opacity:.55;transition:opacity .2s}
.d-cab{padding:8px 24px 14px;border-bottom:1px solid var(--line)}
.d-tit{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:4px}
.d-tit h2{font-size:19px;margin:0;letter-spacing:-.01em;line-height:1.2}
.d-tit .cifra{font-size:24px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.d-meta{font-size:12px;color:var(--sec);margin-top:4px}
/* El rotulo de una cifra de cabecera que no se explica sola ("Efecto en ARS", "Movimientos del periodo"). */
.rot-cifra{display:block;font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);
  text-align:right;margin-bottom:2px}
.d-acc{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.d-cuerpo{padding:6px 24px 24px}
.d-nota{font-size:12px;color:var(--amber);background:var(--amber-bg);border-radius:4px;padding:6px 10px;margin:10px 0 0}
.d-nota.neutra{color:var(--sec);background:var(--neutro-bg)}   /* explica una formula: no es un aviso */
.control{font-size:12px;margin-top:10px;display:flex;justify-content:space-between;gap:12px;color:var(--green)}
.control.mal{color:var(--rojo);font-weight:500}
.pagina-drill{max-width:1040px}
.pagina-drill .d-cab,.pagina-drill .d-cuerpo{padding-left:0;padding-right:0}

/* ---------------------------------------------------- ficha y evidencia */
.ficha{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;font-size:13px;margin:12px 0}
.ficha dt{color:var(--soft);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding-top:2px}
.ficha dd{margin:0}
.evid{border:1px solid var(--line);background:#fff;padding:12px 14px;border-radius:4px;margin-top:12px}
.evid h3{margin:0 0 6px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);font-weight:500}
.evid iframe{width:100%;height:420px;border:1px solid var(--line);margin-top:8px;background:#fff}
.dims{display:inline-flex;gap:4px;flex-wrap:wrap}
.dim{font-size:11px;background:var(--neutro-bg);color:var(--mut);padding:1px 7px;border-radius:999px;white-space:nowrap}

/* -------------------------------------------- en construccion y ayudas */
.en-construccion{margin-top:18px;padding:18px 0;border-top:1px solid var(--line);max-width:760px;color:var(--sec)}
.en-construccion .rotulo{display:block;margin-bottom:6px}
.ayuda-teclas{font-size:11.5px;color:var(--soft);margin-top:10px}

/* ------------------------------------------------------ aviso de error */
.toast{position:fixed;left:calc(var(--lateral) + var(--gutter));bottom:18px;max-width:560px;background:var(--rojo-bg);
  color:var(--rojo);border:1px solid #F1C4BE;border-radius:4px;padding:9px 14px;font-size:13px;z-index:40;
  box-shadow:0 8px 24px rgba(31,31,35,.08);cursor:pointer}

/* ----------------------------------- piezas de las pantallas del Sprint 2 */
.barra{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:16px 0 4px}
.barra label{font-size:12px;color:var(--soft)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;margin:18px 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.tile{padding:14px 18px 14px 0;border-right:1px solid var(--line);margin-right:18px}
.tile:last-child{border-right:0}
.tile .rot{font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.tile .cifra{font-size:24px;font-weight:700;letter-spacing:-.015em;margin-top:4px;white-space:nowrap}
.tile .nota{font-size:12px;color:var(--sec);margin-top:3px}
.tile.acento .cifra{color:var(--coral)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.barrita{height:6px;background:var(--line);border-radius:3px;overflow:hidden;min-width:80px}
.barrita span{display:block;height:100%;background:var(--ink)}

/* --------------------------------------------- notebook: ventana de poco alto */
/* En 1366 x 768 el area util es de ~650 px: el encabezado (titulo, bajada, controles y avisos) se compacta y la
   bajada queda en una linea (un clic la abre), asi la tabla, que toma el resto de la ventana, muestra mas filas. */
@media (max-height:860px) and (min-width:901px){
  .principal{padding-top:16px;padding-bottom:14px}
  h1{font-size:26px;margin:2px 0 2px}
  p.sub,p.bajada{margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
  p.sub.abierta,p.bajada.abierta{white-space:normal;cursor:auto}
  .controles{padding:6px 0;margin-bottom:8px}
  .avisos{margin-bottom:6px}
  .explica{margin:-2px 0 8px}
  .lateral{padding-top:16px}
  .lateral .cliente{margin:12px 0 6px;padding:8px 0}
  .nav-grupo{margin:12px 0 4px}
  .nav a{padding:4px 10px}
}

/* ------------------------------------------------------------ pantallas chicas */
@media (max-width:1200px){:root{--drawer:560px;--gutter:28px}}
@media (max-width:900px){
  .lateral{position:static;width:auto;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  .principal{margin-left:0;padding:20px 16px 48px}
  .dos{grid-template-columns:1fr}
  .tabla-wrap{max-height:none}
  .toast{left:16px;right:16px}
  h1{font-size:28px}
}
@media print{
  .lateral,.controles,.panel,.toast{display:none}
  .principal{margin-left:0}
  .tabla-wrap{max-height:none;overflow:visible}
}