/* Portal de informes — marca Informes de Datos (tokens de Personal/landing/styles.css) */
:root {
  --marino: #0b1423;
  --marino-2: #111d31;
  --marino-3: #1a2840;
  --tinta: #121b2a;
  --azul: #1267e8;
  --azul-suave: #e8f0fd;
  --cian: #26d8f2;
  --pizarra: #657184;
  --linea: #dbe1e9;
  --fondo: #f5f7fa;
  --blanco: #fff;
  --rail-texto: #c3cede;
  --rail-tenue: #7f8ea3;
  --mal: #b42335;
  --sans: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
  --rail: 236px;
  --rail-plegado: 64px;
  --barra: 56px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
kbd { font: 500 10px/1 var(--mono); padding: 2px 4px; border: 1px solid currentColor; border-radius: 3px; opacity: .7; }
:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }

.boton { display: inline-flex; align-items: center; gap: 10px; border: 0; background: var(--azul); color: #fff; padding: 12px 16px; font-weight: 600; font-size: 13px; border-radius: 2px; }
.boton:hover { background: #0e58c9; }
.boton:disabled { background: #33415a; color: #8d9ab0; cursor: not-allowed; }
.boton span { color: var(--cian); }
.boton-secundario { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea); }
.boton-secundario:hover { background: var(--blanco); box-shadow: inset 0 0 0 1px var(--pizarra); }
.ceja { margin: 0 0 14px; color: var(--cian); font: 500 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Entrada ---------- */
.entrada { min-height: 100%; display: grid; place-items: center; padding: 32px 16px; background: var(--marino); color: #fff; position: relative; overflow: hidden; }
.entrada::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(77,112,153,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(77,112,153,.12) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(circle at 30% 40%, #000 0, transparent 75%); }
.entrada-caja { position: relative; width: min(520px, 100%); }
.entrada-logo { height: 26px; display: block; margin-bottom: 56px; }
.entrada h1 { margin: 0; font: 600 clamp(34px, 6vw, 52px)/1.02 var(--sans); letter-spacing: -.045em; }
.entrada-texto { color: var(--rail-texto); font-size: 16px; margin: 18px 0 30px; max-width: 420px; }
.entrada-error { margin: 18px 0 0; padding: 10px 12px; border-left: 3px solid #ff6b81; background: rgba(180,35,53,.18); color: #ffd7dd; font-size: 13px; }
.entrada-nota { margin: 28px 0 0; color: #9aaabc; font: 11px/1.6 var(--mono); }
.entrada-nota a { color: var(--cian); }

/* ---------- Portal ---------- */
.portal { height: 100%; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); transition: grid-template-columns .18s ease; }
body.plegado .portal { grid-template-columns: var(--rail-plegado) minmax(0, 1fr); }

/* Raíl */
.rail { background: var(--marino); color: var(--rail-texto); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.rail-cabecera { height: var(--barra); display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 18px; border-bottom: 1px solid var(--marino-3); }
.rail-logo { height: 17px; }
.rail-simbolo { height: 24px; display: none; }
.rail-plegar { display: grid; place-items: center; width: 28px; height: 28px; border: 0; background: transparent; color: var(--rail-tenue); border-radius: 4px; }
.rail-plegar:hover { background: var(--marino-3); color: #fff; }
.rail-plegar svg { transition: transform .18s ease; }
.rail-cliente { margin: 18px 18px 6px; font: 500 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cian); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-informes { flex: 1; overflow-y: auto; padding: 4px 10px 12px; }
.rail-grupo { margin: 16px 8px 6px; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--rail-tenue); white-space: nowrap; }
.rail-informe { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px; margin: 2px 0; border: 0; border-radius: 4px; background: transparent; color: var(--rail-texto); font-size: 14px; font-weight: 500; text-align: left; white-space: nowrap; }
.rail-informe svg { flex: none; color: var(--rail-tenue); }
.rail-informe-nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.rail-informe kbd { color: var(--rail-tenue); opacity: .55; border-color: var(--marino-3); }
.rail-informe:hover { background: var(--marino-2); color: #fff; }
.rail-informe:hover svg { color: #fff; }
.rail-informe.activo { background: rgba(18,103,232,.22); color: #fff; }
.rail-informe.activo::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 2px 2px 0; background: var(--cian); }
.rail-informe.activo svg { color: var(--cian); }
.rail-pie { border-top: 1px solid var(--marino-3); padding: 12px 14px 14px; }
.rail-actualizado { margin: 0 4px 10px; font: 11px/1.45 var(--mono); color: var(--rail-texto); }
.rail-atajos { margin: 0 4px 12px; font: 10px/1.8 var(--mono); color: var(--rail-tenue); white-space: nowrap; }
.rail-atajos kbd { border-color: var(--marino-3); }
.rail-usuario { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--marino-3); color: var(--cian); font: 600 11px/1 var(--sans); }
.usuario-nombre { flex: 1; min-width: 0; font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-salir { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 4px; background: transparent; color: var(--rail-tenue); }
.rail-salir:hover { background: var(--marino-3); color: #fff; }

/* Raíl plegado: solo iconos */
body.plegado .rail-logo, body.plegado .rail-cliente, body.plegado .rail-grupo, body.plegado .rail-informe-nombre,
body.plegado .rail-informe kbd, body.plegado .rail-atajos, body.plegado .rail-actualizado, body.plegado .usuario-nombre { display: none; }
body.plegado .rail-cabecera { flex-direction: column; justify-content: center; gap: 0; padding: 0; height: auto; min-height: var(--barra); }
body.plegado .rail-simbolo { display: block; margin-top: 12px; }
body.plegado .rail-plegar { margin: 6px 0 8px; }
body.plegado .rail-plegar svg { transform: rotate(180deg); }
body.plegado .lista-informes { padding-top: 14px; }
body.plegado .rail-informe { justify-content: center; padding: 0; }
body.plegado .rail-usuario { flex-direction: column; }

/* Zona principal */
.principal { display: grid; grid-template-rows: var(--barra) minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); min-width: 0; min-height: 0; }
.barra { display: flex; align-items: center; gap: 18px; padding: 0 12px 0 22px; background: var(--blanco); border-bottom: 1px solid var(--linea); min-width: 0; }
.barra-titulo { margin: 0; flex: none; font: 600 17px/1 var(--sans); letter-spacing: -.02em; padding-right: 18px; border-right: 1px solid var(--linea); }
.pestanas { flex: 1; min-width: 0; height: 100%; display: flex; align-items: stretch; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestana { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 0 12px; color: var(--pizarra); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.pestana:hover { color: var(--tinta); background: var(--fondo); }
.pestana[aria-selected="true"] { color: var(--azul); font-weight: 600; }
.pestana[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 2px 2px 0 0; background: var(--azul); }
.pestana-temporal { margin: 11px 0 11px 8px; padding: 0 12px 0 8px; border-radius: 3px; background: var(--azul-suave); color: var(--azul); }
.pestana-temporal[aria-selected="true"]::after { display: none; }
.pestana-temporal:hover { background: #d5e4fb; color: var(--azul); }
.acciones { flex: none; display: flex; align-items: center; gap: 4px; }
.accion { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 34px; min-width: 34px; padding: 0 8px; border: 0; border-radius: 4px; background: transparent; color: var(--pizarra); }
.accion:hover { background: var(--fondo); color: var(--tinta); }
.accion.activa { background: var(--azul-suave); color: var(--azul); }
.accion-buscar { padding: 0 8px 0 10px; box-shadow: inset 0 0 0 1px var(--linea); margin-right: 6px; font-size: 13px; }
.accion-buscar kbd { opacity: .6; }
.insignia-demo { font: 500 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #8a5a00; background: #fff4d6; padding: 6px 8px; border-radius: 3px; margin-right: 6px; }

/* Lienzo: un marco por informe, apilados; solo se ve el activo */
.lienzo { position: relative; min-height: 0; background: var(--fondo); }
.marco { position: absolute; inset: 0; visibility: hidden; }
.marco.visible { visibility: visible; }
.marco-informe { position: absolute; inset: 0; }
.marco-informe iframe { border: 0 !important; display: block; }

/* Esqueleto de carga: la silueta de una página 16:9 */
.carga { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; background: var(--fondo); z-index: 2; }
.carga-hoja { width: min(100%, calc((100vh - var(--barra) - 48px) * 16 / 9)); aspect-ratio: 16 / 9; background: var(--blanco); padding: 2.4% 2.4% 2%; display: grid; grid-template-rows: 7% 18% 1fr 22%; gap: 3%; box-shadow: 0 1px 2px rgba(18,27,42,.06); }
.carga-hoja i, .c-kpis i, .c-cuerpo i { display: block; border-radius: 3px; background: linear-gradient(90deg, #edf1f6 0, #f6f8fb 40%, #edf1f6 80%); background-size: 300% 100%; animation: brillo 1.4s ease-in-out infinite; }
.c-titulo { width: 34%; }
.c-kpis, .c-cuerpo { display: grid; gap: 2%; background: none !important; animation: none !important; }
.c-kpis { grid-template-columns: repeat(4, 1fr); }
.c-cuerpo { grid-template-columns: 1.4fr 1fr; }
@keyframes brillo { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .carga-hoja i, .c-kpis i, .c-cuerpo i { animation: none; } .portal, .rail-plegar svg { transition: none; } }

/* Errores */
.estado-error { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 0 max(24px, 12%); background: var(--fondo); z-index: 3; }
.estado-error h3 { margin: 0 0 8px; font: 600 22px/1.2 var(--sans); letter-spacing: -.02em; }
.estado-error p { margin: 0 0 22px; color: var(--pizarra); max-width: 560px; }
.estado-botones { display: flex; gap: 10px; }

/* Modo demostración */
.marco-informe.demo { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 24px; }
.demo-hoja { width: min(100%, calc((100vh - var(--barra) - 48px) * 16 / 9)); aspect-ratio: 16 / 9; background: var(--blanco); padding: 2.4%; display: flex; flex-direction: column; gap: 3%; box-shadow: 0 1px 2px rgba(18,27,42,.06); }
.demo-cabecera { font-size: clamp(14px, 1.6vw, 22px); letter-spacing: -.02em; }
.demo-informe { color: var(--pizarra); }
.demo-cuerpo { flex: 1; display: grid; grid-template-rows: 22% 1fr; gap: 4%; min-height: 0; }
.demo-kpis, .demo-graficos { display: grid; gap: 2.5%; }
.demo-kpis { grid-template-columns: repeat(4, 1fr); }
.demo-graficos { grid-template-columns: 1.4fr 1fr; }
.demo-kpis i, .demo-graficos i { display: block; border-radius: 3px; background: var(--fondo); box-shadow: inset 0 0 0 1px #e6eaf0; }
.demo-graficos i:first-child { background: linear-gradient(to top, rgba(18,103,232,.14), transparent 70%), var(--fondo); }
.demo-nota { margin: 0; color: var(--pizarra); font: 12px/1.5 var(--mono); }
.demo-detalle { align-self: flex-start; padding: 8px 12px; font-size: 12px; }

/* Buscador */
.buscador { position: fixed; inset: 0; z-index: 20; background: rgba(11,20,35,.45); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.buscador-caja { width: min(560px, 100%); background: var(--blanco); border-radius: 6px; box-shadow: 0 20px 50px rgba(11,20,35,.35); overflow: hidden; }
.buscador-entrada { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--linea); color: var(--pizarra); }
.buscador-entrada input { flex: 1; height: 54px; border: 0; outline: 0; font: 16px var(--sans); color: var(--tinta); background: transparent; }
.buscador-lista { list-style: none; margin: 0; padding: 6px; max-height: min(420px, 55vh); overflow-y: auto; }
.buscador-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 4px; cursor: pointer; color: var(--pizarra); }
.buscador-item[aria-selected="true"] { background: var(--azul-suave); color: var(--azul); }
.buscador-item:hover { background: var(--fondo); }
.buscador-item[aria-selected="true"]:hover { background: var(--azul-suave); }
.buscador-informe { color: var(--pizarra); font-size: 13px; }
.buscador-sep { color: var(--linea); }
.buscador-pagina { color: var(--tinta); font-weight: 600; }
.buscador-vacio { padding: 14px 10px; color: var(--pizarra); }
.buscador-pie { margin: 0; padding: 10px 16px; border-top: 1px solid var(--linea); background: var(--fondo); color: var(--pizarra); font: 11px/1 var(--mono); }
.buscador-pie kbd { margin-right: 2px; }

/* Aviso */
.aviso { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 30; background: var(--marino); color: #fff; padding: 10px 16px; border-radius: 4px; font-size: 13px; box-shadow: 0 8px 24px rgba(11,20,35,.25); }

/* Móvil y ventanas estrechas: el raíl pasa a franja superior */
@media (max-width: 860px) {
  .portal, body.plegado .portal { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .rail { flex-direction: row; align-items: center; height: 52px; }
  .rail-cabecera { border: 0; height: 52px; padding: 0 8px 0 16px; flex: none; }
  .rail-logo, .rail-plegar, .rail-cliente, .rail-grupo, .rail-atajos, .rail-actualizado, .usuario-nombre, .rail-informe kbd { display: none !important; }
  .rail-simbolo { display: block !important; margin: 0 !important; height: 22px; }
  .lista-informes { flex: 1; min-width: 0; display: flex; gap: 2px; overflow-x: auto; overflow-y: hidden; padding: 0 6px; scrollbar-width: none; }
  .rail-informe, body.plegado .rail-informe { width: auto; flex: none; height: 36px; padding: 0 10px; justify-content: flex-start; }
  body.plegado .rail-informe-nombre { display: inline; }
  .rail-informe.activo::before { left: 10px; right: 10px; top: auto; bottom: -8px; width: auto; height: 3px; border-radius: 2px 2px 0 0; }
  .rail-pie { border: 0; padding: 0 10px; }
  .rail-usuario, body.plegado .rail-usuario { flex-direction: row; }
  .avatar { display: none; }
  .barra { padding: 0 6px 0 14px; gap: 10px; }
  .barra-titulo { display: none; }
  .accion-texto, .accion-buscar kbd, #btn-restablecer { display: none; }
  .accion-buscar { box-shadow: none; margin: 0; padding: 0 8px; }
  .insignia-demo { display: none; }
}
@media (min-width: 861px) and (max-width: 1180px) {
  .accion-texto, .accion-buscar kbd { display: none; }
  .barra-titulo { display: none; }
}