/* Gestión de Fondos de Investigación — hoja de estilo */

:root{
  --bg:#f6f7f9; --panel:#ffffff; --borde:#e3e6ea; --borde2:#eef0f3;
  --txt:#1b1f24; --txt2:#5b6572; --txt3:#8b95a3;
  --acento:#1f5fd0; --acento-bg:#eaf1fd;
  --ok:#0f7b4f; --ok-bg:#e6f5ee;
  --alerta:#b45309; --alerta-bg:#fdf3e4;
  --grave:#b91c1c; --grave-bg:#fdeaea;
  --sombra:0 1px 2px rgba(16,24,40,.05), 0 4px 16px rgba(16,24,40,.06);
  --radio:10px;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
html[data-tema="oscuro"]{
  --bg:#12151a; --panel:#191d24; --borde:#2a3039; --borde2:#232830;
  --txt:#e6e9ee; --txt2:#a3adba; --txt3:#78828f;
  --acento:#6ea1ff; --acento-bg:#1b2740;
  --ok:#4ade80; --ok-bg:#152a20;
  --alerta:#fbbf24; --alerta-bg:#2d2513;
  --grave:#f87171; --grave-bg:#301818;
  --sombra:0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.35);
}

*{box-sizing:border-box}

/* Los contenedores de abajo declaran display:grid/flex, que gana sobre el
   display:none que el navegador aplica a [hidden]. Sin esta regla las capas
   ocultas (login, panel, visor, «Descifrando…») quedan visibles para siempre. */
[hidden]{display:none !important}

html,body{margin:0;height:100%}
body{
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--txt); -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; font-weight:650; letter-spacing:-.01em}
button{font:inherit; cursor:pointer}
a{color:var(--acento)}

/* ───────────────────────────────────────────────────────────── acceso ─── */
.acceso{position:fixed; inset:0; display:grid; place-items:center; padding:24px;
  background:radial-gradient(1200px 600px at 50% -10%, var(--acento-bg), var(--bg));}
.acceso-caja{width:min(420px,100%); background:var(--panel); border:1px solid var(--borde);
  border-radius:16px; padding:32px; box-shadow:var(--sombra); display:flex; flex-direction:column; gap:10px}
.acceso-marca{text-align:center; margin-bottom:12px}
.acceso-icono{font-size:34px; margin-bottom:8px}
.acceso-marca h1{font-size:19px; line-height:1.3}
.acceso-marca p{margin:6px 0 0; color:var(--txt2); font-size:13px}
.acceso-caja label{font-size:13px; font-weight:600; color:var(--txt2)}
.acceso-caja input{padding:11px 13px; border:1px solid var(--borde); border-radius:var(--radio);
  background:var(--bg); color:var(--txt); font-size:15px}
.acceso-caja input:focus{outline:2px solid var(--acento); outline-offset:1px}
.acceso-caja button{margin-top:6px; padding:11px; border:0; border-radius:var(--radio);
  background:var(--acento); color:#fff; font-weight:600}
.acceso-caja button:disabled{opacity:.6; cursor:progress}
.acceso-error{margin:2px 0 0; color:var(--grave); font-size:13px; font-weight:600}
.acceso-nota{margin:14px 0 0; font-size:12px; line-height:1.5; color:var(--txt3); text-align:center}

/* ───────────────────────────────────────────────────────────── layout ─── */
#app{display:grid; grid-template-columns:250px 1fr; height:100vh}
.lateral{background:var(--panel); border-right:1px solid var(--borde); display:flex;
  flex-direction:column; padding:18px 14px; gap:18px; overflow-y:auto}
.lateral-marca{padding:0 6px}
.lateral-marca strong{display:block; font-size:14px}
.lateral-marca span{display:block; font-size:12px; color:var(--txt3); margin-top:2px}
#nav{display:flex; flex-direction:column; gap:2px}
#nav button{display:flex; align-items:center; gap:9px; padding:8px 10px; border:0; border-radius:8px;
  background:transparent; color:var(--txt2); font-size:14px; font-weight:500; text-align:left; width:100%}
#nav button i{font-style:normal; width:16px; text-align:center; opacity:.7}
#nav button:hover{background:var(--borde2); color:var(--txt)}
#nav button.activo{background:var(--acento-bg); color:var(--acento); font-weight:600}
.chip{margin-left:auto; background:var(--grave-bg); color:var(--grave); font-size:11px;
  font-weight:700; padding:1px 6px; border-radius:20px}
.lateral-titulo{font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--txt3); font-weight:700; padding:0 6px; margin-bottom:6px}
.fondo-item{display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:7px;
  font-size:13px; cursor:pointer; color:var(--txt2); border:0; background:transparent; width:100%; text-align:left}
.fondo-item:hover{background:var(--borde2)}
.fondo-item.activo{background:var(--borde2); color:var(--txt); font-weight:600}
.punto{width:8px; height:8px; border-radius:50%; flex:0 0 8px}
.fondo-item b{margin-left:auto; font-variant-numeric:tabular-nums; font-weight:600; font-size:12px; color:var(--txt3)}
.lateral-pie{margin-top:auto; display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  padding-top:12px; border-top:1px solid var(--borde2)}
.mini{border:1px solid var(--borde); background:transparent; color:var(--txt2);
  border-radius:7px; padding:4px 9px; font-size:12px}
.mini:hover{background:var(--borde2)}
.lateral-pie span{width:100%; font-size:11px; color:var(--txt3)}

.principal{overflow-y:auto; display:flex; flex-direction:column}
.cabecera{position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:14px;
  padding:16px 26px; background:var(--panel); border-bottom:1px solid var(--borde)}
.cabecera h2{font-size:18px; flex:0 0 auto}
.cabecera-acciones{margin-left:auto; display:flex; gap:8px; align-items:center}
#buscar{width:280px; padding:7px 11px; border:1px solid var(--borde); border-radius:8px;
  background:var(--bg); color:var(--txt); font-size:13px}
.boton-sec{border:1px solid var(--borde); background:var(--panel); color:var(--txt2);
  border-radius:8px; padding:7px 12px; font-size:13px}
.boton-sec:hover{background:var(--borde2); color:var(--txt)}
#contenido{padding:24px 26px 60px}

/* ─────────────────────────────────────────────────────────── tarjetas ─── */
.rejilla{display:grid; gap:14px}
.k3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.k4{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.tarjeta{background:var(--panel); border:1px solid var(--borde); border-radius:var(--radio);
  padding:16px 18px; box-shadow:var(--sombra)}
.tarjeta.clic{cursor:pointer; transition:transform .08s, box-shadow .12s}
.tarjeta.clic:hover{transform:translateY(-1px); box-shadow:0 2px 4px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.09)}
.kpi-rot{font-size:12px; color:var(--txt2); font-weight:600; text-transform:uppercase; letter-spacing:.04em}
.kpi-val{font-size:26px; font-weight:700; margin-top:4px; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.kpi-sub{font-size:12px; color:var(--txt3); margin-top:3px}
.tarjeta-fondo h3{font-size:15px; display:flex; align-items:center; gap:8px}
.tarjeta-fondo .org{font-size:11px; font-weight:700; padding:1px 7px; border-radius:20px;
  background:var(--borde2); color:var(--txt2); letter-spacing:.03em}
.tarjeta-fondo .monto{font-size:24px; font-weight:700; margin:12px 0 2px; font-variant-numeric:tabular-nums}
.barra{height:6px; border-radius:6px; background:var(--borde2); overflow:hidden; margin:10px 0 8px; display:flex}
.barra i{display:block; height:100%}
.leyenda{display:flex; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--txt2)}
.leyenda span{display:flex; align-items:center; gap:5px}
.seccion{margin:30px 0 12px; display:flex; align-items:baseline; gap:10px}
.seccion h3{font-size:15px}
.seccion small{color:var(--txt3); font-size:12px}

/* ─────────────────────────────────────────────────────────── filtros ──── */
.filtros{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; align-items:center}
.filtros select, .filtros label.check{border:1px solid var(--borde); background:var(--panel);
  color:var(--txt2); border-radius:8px; padding:6px 10px; font-size:13px}
.filtros label.check{display:flex; align-items:center; gap:6px; cursor:pointer}
.filtros .cuenta{margin-left:auto; font-size:13px; color:var(--txt3)}

/* ───────────────────────────────────────────────────────────── tabla ──── */
.tabla-caja{background:var(--panel); border:1px solid var(--borde); border-radius:var(--radio);
  overflow:hidden; box-shadow:var(--sombra)}
table{width:100%; border-collapse:collapse; font-size:13.5px}
thead th{position:sticky; top:0; background:var(--panel); text-align:left; font-size:11px;
  text-transform:uppercase; letter-spacing:.05em; color:var(--txt3); font-weight:700;
  padding:10px 14px; border-bottom:1px solid var(--borde); white-space:nowrap; cursor:pointer; user-select:none}
thead th:hover{color:var(--txt)}
tbody td{padding:10px 14px; border-bottom:1px solid var(--borde2); vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--borde2)}
td.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:600}
td.cod{font-family:var(--mono); font-size:12px; color:var(--txt3); white-space:nowrap}
.vacio{padding:40px; text-align:center; color:var(--txt3)}

/* ───────────────────────────────────────────────────────── etiquetas ──── */
.et{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600;
  padding:2px 8px; border-radius:20px; white-space:nowrap}
.et-ok{background:var(--ok-bg); color:var(--ok)}
.et-pend{background:var(--alerta-bg); color:var(--alerta)}
.et-por{background:var(--borde2); color:var(--txt2)}
.et-grave{background:var(--grave-bg); color:var(--grave)}
.et-info{background:var(--acento-bg); color:var(--acento)}
.et-fondo{background:var(--borde2); color:var(--txt2)}
.pill-doc{display:inline-block; font-size:11px; padding:1px 7px; border-radius:6px;
  background:var(--borde2); color:var(--txt2); margin:1px 3px 1px 0}

/* ────────────────────────────────────────────────────────────── panel ─── */
.panel{position:fixed; inset:0; z-index:40; display:flex; justify-content:flex-end}
.panel-fondo{position:absolute; inset:0; background:rgba(12,16,22,.42); backdrop-filter:blur(2px)}
.panel-caja{position:relative; width:min(680px,100%); background:var(--panel); height:100%;
  overflow-y:auto; padding:26px 28px 60px; box-shadow:-8px 0 40px rgba(16,24,40,.18);
  animation:entra .16s ease-out}
@keyframes entra{from{transform:translateX(24px); opacity:.6} to{transform:none; opacity:1}}
.panel-cerrar{position:absolute; top:14px; right:16px; border:0; background:var(--borde2);
  color:var(--txt2); width:30px; height:30px; border-radius:8px; font-size:14px}
.panel-cerrar:hover{background:var(--borde); color:var(--txt)}
.ficha-cod{font-family:var(--mono); font-size:12px; color:var(--txt3)}
.ficha-titulo{font-size:20px; margin:4px 0 10px; line-height:1.25}
.ficha-monto{font-size:30px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.ficha-monto small{font-size:13px; font-weight:500; color:var(--txt3); margin-left:8px}
dl.datos{display:grid; grid-template-columns:150px 1fr; gap:8px 16px; margin:18px 0 0; font-size:13.5px}
dl.datos dt{color:var(--txt3); font-weight:600}
dl.datos dd{margin:0}
.bloque{margin-top:24px}
.bloque h4{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--txt3);
  margin-bottom:9px; font-weight:700}
.aviso{display:flex; gap:10px; padding:11px 13px; border-radius:9px; font-size:13.2px;
  line-height:1.5; margin-bottom:8px; border:1px solid transparent}
.aviso b{flex:0 0 auto; font-size:14px}
.aviso.alta{background:var(--grave-bg); color:var(--grave); border-color:color-mix(in srgb,var(--grave) 22%, transparent)}
.aviso.media{background:var(--alerta-bg); color:var(--alerta); border-color:color-mix(in srgb,var(--alerta) 22%, transparent)}
.aviso.info{background:var(--acento-bg); color:var(--acento); border-color:color-mix(in srgb,var(--acento) 18%, transparent)}
.doc-fila{display:flex; align-items:center; gap:11px; padding:9px 11px; border:1px solid var(--borde);
  border-radius:9px; margin-bottom:7px; background:var(--bg)}
.doc-icono{font-size:17px; flex:0 0 auto; width:22px; text-align:center}
.doc-info{flex:1; min-width:0}
.doc-info strong{display:block; font-size:13.5px; font-weight:600}
.doc-info span{display:block; font-size:12px; color:var(--txt3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.doc-acciones{display:flex; gap:6px; flex:0 0 auto}
.doc-acciones button{border:1px solid var(--borde); background:var(--panel); color:var(--txt2);
  border-radius:7px; padding:4px 9px; font-size:12px}
.doc-acciones button:hover{background:var(--borde2); color:var(--txt)}
.checklist{list-style:none; padding:0; margin:0; font-size:13.5px}
.checklist li{display:flex; gap:8px; padding:5px 0}
.checklist .si{color:var(--ok)} .checklist .no{color:var(--txt3)}

/* ────────────────────────────────────────────────────────────── visor ─── */
.visor{position:fixed; inset:0; z-index:60; background:rgba(10,13,18,.9); display:flex; flex-direction:column}
.visor-barra{display:flex; align-items:center; gap:12px; padding:10px 16px; background:var(--panel);
  border-bottom:1px solid var(--borde)}
.visor-barra span{font-size:13.5px; font-weight:600; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.visor-barra div{display:flex; gap:8px}
.visor-cuerpo{flex:1; overflow:auto; display:grid; place-items:center; padding:16px}
.visor-cuerpo img{max-width:100%; max-height:100%; border-radius:6px; background:#fff}
.visor-cuerpo iframe{width:100%; height:100%; border:0; border-radius:6px; background:#fff}
.visor-cuerpo .aviso-visor{color:#e6e9ee; text-align:center; max-width:420px}

/* ─────────────────────────────────────────────────────────── reglas ──── */
.regla{display:flex; gap:11px; padding:11px 13px; border:1px solid var(--borde); border-radius:9px;
  margin-bottom:7px; background:var(--panel); font-size:13.5px; line-height:1.5}
.regla .marca{flex:0 0 auto; font-size:14px}
.texto-largo{max-width:760px; font-size:14px; line-height:1.65; color:var(--txt2)}
.texto-largo li{margin-bottom:7px}
details.item{border:1px solid var(--borde); border-radius:9px; margin-bottom:8px; background:var(--panel)}
details.item summary{padding:11px 14px; cursor:pointer; font-weight:600; font-size:14px; list-style:none}
details.item summary::-webkit-details-marker{display:none}
details.item summary::before{content:"▸ "; color:var(--txt3)}
details.item[open] summary::before{content:"▾ "}
details.item .cuerpo{padding:0 14px 14px; font-size:13.4px; color:var(--txt2); line-height:1.6}
.tope{background:var(--acento-bg); color:var(--acento); border-radius:8px; padding:8px 11px;
  font-size:13px; margin-top:10px; font-weight:500}

/* ───────────────────────────────────────────────────────── cargando ──── */
.cargando{position:fixed; inset:0; z-index:80; display:grid; place-items:center; gap:14px;
  background:rgba(246,247,249,.82); backdrop-filter:blur(3px); grid-auto-flow:row}
html[data-tema="oscuro"] .cargando{background:rgba(18,21,26,.85)}
.spinner{width:30px; height:30px; border:3px solid var(--borde); border-top-color:var(--acento);
  border-radius:50%; animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.cargando span{font-size:13px; color:var(--txt2)}

/* ────────────────────────────────────────────────────────── responsive ── */
@media (max-width:900px){
  #app{grid-template-columns:1fr; height:auto}
  .lateral{border-right:0; border-bottom:1px solid var(--borde)}
  #nav{flex-direction:row; flex-wrap:wrap}
  #nav button{width:auto}
  .cabecera{flex-wrap:wrap}
  #buscar{width:100%}
  dl.datos{grid-template-columns:1fr}
  dl.datos dt{margin-top:8px}
}

@media print{
  .lateral,.cabecera-acciones,.filtros,.panel,.visor,#btn-tema{display:none !important}
  #app{display:block; height:auto}
  .principal{overflow:visible}
  .tarjeta,.tabla-caja{box-shadow:none; break-inside:avoid}
  body{background:#fff}
}