/* Clientes Sicfe — línea visual Merlinex (variables tomadas de www.merlinex.net). */
:root{
  /* portal */
  --bg:#080b18; --bg-raised:#0d1226; --bg-card:#0f1530;
  --accent:#4fb3e8; --accent-soft:#8fd4f5;
  --text:#f2f5fa; --text-muted:#7e8cad;
  --border:rgba(79,179,232,.16); --border-strong:rgba(79,179,232,.4);
  /* alias usados en esta app */
  --bg-2:var(--bg-card); --bg-3:var(--bg-raised); --borde:var(--border);
  --texto:var(--text); --texto-2:var(--text-muted);
  --acento:var(--accent); --acento-2:var(--accent-soft);
  --ok:#34d399; --aviso:#fbbf24; --error:#f87171;
  --radio:16px;
  --sombra:none;
  --fuente-marca:"Cinzel", Georgia, serif;
  --fuente:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--fuente); color:var(--texto); font-size:15px; line-height:1.5;
  background:var(--bg); -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;
}
a{color:var(--accent-soft)} a:hover{color:var(--accent)}
h1,h2,h3{font-family:var(--fuente-marca); letter-spacing:.04em; font-weight:500; margin:.2em 0 .6em}
h1{font-size:1.6rem} h2{font-size:1.25rem}

/* Header */
.top{display:flex; align-items:center; gap:18px; padding:12px 24px; border-bottom:1px solid var(--borde);
     background:rgba(8,11,24,.92); backdrop-filter:blur(8px); position:sticky; top:0; z-index:10}
.marca{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--texto)}
.marca img{height:34px; width:auto}
.marca .nombre{font-family:var(--fuente-marca); font-size:19px; letter-spacing:.02em; font-weight:500; white-space:nowrap}
.marca .nombre b{color:var(--accent-soft); font-weight:500}
.nav{display:flex; gap:2px; margin-left:8px; flex-wrap:wrap}
.nav a{color:var(--texto-2); text-decoration:none; padding:6px 10px; border-radius:8px; font-size:.9rem; white-space:nowrap}
.nav a:hover,.nav a.activo{color:var(--texto); background:var(--bg-3)}
.badge{display:inline-block; min-width:20px; padding:0 6px; border-radius:10px; background:var(--aviso);
       color:#111; font-size:.75rem; font-weight:700; text-align:center; margin-left:4px}
.usuario{margin-left:auto; display:flex; align-items:center; gap:10px; color:var(--texto-2); font-size:.9rem; white-space:nowrap}
.icono-clave{text-decoration:none; font-size:1rem; opacity:.8} .icono-clave:hover{opacity:1}
.rol{font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; padding:2px 8px; border-radius:999px;
     border:1px solid var(--border-strong); color:var(--accent-soft)}

main{flex:1; width:100%; max-width:1200px; margin:0 auto; padding:28px 24px}
footer{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; color:var(--texto-2); font-size:13px; padding:24px 18px 30px; border-top:1px solid var(--border)}
footer img{height:22px; width:auto}

/* Paneles */
.panel{background:var(--bg-2); border:1px solid var(--borde); border-radius:var(--radio); padding:22px; box-shadow:var(--sombra)}
.grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.tarjeta{background:var(--bg-2); border:1px solid var(--borde); border-radius:var(--radio); padding:16px}
.tarjeta .num{font-size:1.8rem; font-weight:600; color:var(--accent)}
.tarjeta .lbl{color:var(--texto-2); font-size:.85rem}

/* Auth */
.auth{max-width:420px; margin:6vh auto 0}
.emblema{position:relative; width:150px; height:150px; margin:0 auto 18px; display:flex; align-items:center; justify-content:center}
.emblema::before{content:""; position:absolute; inset:-24px; border-radius:50%;
  background:radial-gradient(circle, rgba(79,179,232,.35) 0%, rgba(79,179,232,0) 70%); animation:pulso 4s ease-in-out infinite}
.emblema img{position:relative; width:100%; height:100%; object-fit:contain; animation:flotar 5s ease-in-out infinite}
@keyframes flotar{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(1.5deg)}}
@keyframes pulso{0%,100%{opacity:.5; transform:scale(1)}50%{opacity:.9; transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.emblema img,.emblema::before{animation:none}}
.eyebrow{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); text-align:center; margin-bottom:8px}
.auth h1{text-align:center; margin-bottom:.1em}
.auth .sub{text-align:center; color:var(--texto-2); margin:0 0 20px; font-size:.9rem}
.auth .pie{text-align:center; margin-top:16px; font-size:.9rem; color:var(--texto-2)}

/* Formularios */
label{display:block; font-size:.85rem; color:var(--texto-2); margin:12px 0 4px}
input,select{width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--borde);
  background:var(--bg-3); color:var(--texto); font:inherit}
input:focus,select:focus{outline:none; border-color:var(--acento); box-shadow:0 0 0 3px rgba(79,179,232,.18)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 18px; border-radius:999px;
  border:1px solid var(--accent); font:inherit; font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; color:#080b18;
  background:var(--accent); transition:background .2s, border-color .2s}
.btn:hover{background:var(--accent-soft); border-color:var(--accent-soft); color:#080b18}
.btn.full{width:100%; margin-top:18px}
.btn.sec{background:transparent; border-color:var(--border-strong); color:var(--accent-soft)}
.btn.sec:hover{background:rgba(79,179,232,.1); border-color:var(--accent); color:var(--accent-soft)}
.btn.chico{padding:5px 10px; font-size:.82rem}
.btn.ok{background:var(--ok); border-color:var(--ok)} .btn.peligro{background:transparent; border-color:var(--error); color:var(--error)} .btn.peligro:hover{background:rgba(248,113,113,.12); color:var(--error); border-color:var(--error)}
.enlinea{display:inline}

/* Mensajes */
.flash{padding:10px 14px; border-radius:8px; margin-bottom:14px; border:1px solid; font-size:.92rem}
.flash.error{border-color:var(--error); background:rgba(248,113,113,.1); color:#fecaca}
.flash.ok{border-color:var(--ok); background:rgba(52,211,153,.1); color:#bbf7d0}
.flash.info{border-color:var(--acento); background:rgba(79,179,232,.08); color:var(--accent-soft)}

/* Tablas */
.tabla-wrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:.88rem}
th{text-align:left; color:var(--texto-2); font-weight:600; font-size:.78rem; text-transform:uppercase;
   letter-spacing:.05em; padding:10px; border-bottom:1px solid var(--borde); white-space:nowrap}
td{padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:middle}
tr:hover td{background:rgba(79,179,232,.05)}
.muted{color:var(--texto-2)} .chico{font-size:.8rem}
.estado{font-size:.75rem; font-weight:700; padding:2px 8px; border-radius:6px; text-transform:uppercase; letter-spacing:.04em}
.e-pendiente{background:rgba(251,191,36,.15); color:var(--aviso)}
.e-aprobado{background:rgba(52,211,153,.15); color:var(--ok)}
.e-rechazado,.e-bloqueado{background:rgba(248,113,113,.15); color:var(--error)}
.ev-login_ok,.ev-registro{color:var(--ok)}
.ev-login_fallido,.ev-login_bloqueado_temporal,.ev-login_rechazado{color:var(--error)}
.ev-logout,.ev-sesion_expirada,.ev-sesion_cerrada_admin{color:var(--texto-2)}

.tabs{display:flex; gap:6px; margin-bottom:14px}
.tabs a{padding:8px 14px; border-radius:8px; text-decoration:none; color:var(--texto-2); border:1px solid var(--borde)}
.tabs a{border-radius:999px} .tabs a.activo{color:var(--accent-soft); border-color:var(--border-strong); background:rgba(79,179,232,.08)}
.filtros{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px}
.filtros > div{flex:1; min-width:140px}
.filtros label{margin-top:0}
.paginas{display:flex; gap:8px; justify-content:center; margin-top:14px; align-items:center}
.acciones{display:flex; gap:6px; flex-wrap:wrap}

/* Inicio */
.buscador{display:flex; align-items:center; gap:10px; padding:14px 18px; border-radius:14px;
  background:var(--bg-3); border:1px solid var(--borde); color:var(--texto-2); font-size:1.05rem}
.clave-temporal{font-family:ui-monospace,Consolas,monospace; font-size:1.6rem; letter-spacing:.12em;
  padding:14px; text-align:center; border:1px dashed var(--border-strong); border-radius:10px; margin:14px 0; color:var(--accent-soft)}

@media (max-width:720px){
  .top{flex-wrap:wrap; padding:10px 14px}
  .usuario{margin-left:0; width:100%; justify-content:space-between}
  main{padding:18px 14px}
  .nav{margin-left:0}
}

/* ===================== Capa 2 ===================== */
.toast{position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); opacity:0; pointer-events:none;
  background:var(--bg-card); border:1px solid var(--border-strong); color:var(--text); padding:10px 18px; border-radius:999px;
  font-size:14px; transition:opacity .2s, transform .2s; z-index:50; box-shadow:0 8px 30px rgba(0,0,0,.4)}
.toast.visible{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.ok{border-color:var(--ok)} .toast.error{border-color:var(--error)}

.buscador-grande{position:relative}
.buscador-grande input{font-size:1.15rem; padding:16px 18px 16px 48px; border-radius:14px; background:var(--bg-raised);
  border:1px solid var(--border-strong)}
.buscador-grande .lupa{position:absolute; left:17px; top:50%; transform:translateY(-50%); color:var(--accent); pointer-events:none}
.buscador-grande kbd{position:absolute; right:14px; top:50%; transform:translateY(-50%)}
kbd{font-family:ui-monospace,Consolas,monospace; font-size:.75rem; border:1px solid var(--border-strong); border-radius:5px;
  padding:1px 6px; color:var(--text-muted)}
#info-busqueda{min-height:20px; margin:8px 4px 6px; font-size:.82rem; color:var(--text-muted)}
.resultados{display:flex; flex-direction:column; gap:8px}
.resultado{display:flex; align-items:center; gap:14px; justify-content:space-between; flex-wrap:wrap;
  background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:12px 16px}
.resultado.sel{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset}
.resultado.baja{opacity:.6}
.r-principal{min-width:0; flex:1}
.r-nombre{color:var(--text); text-decoration:none; font-weight:600; font-size:1rem}
.r-nombre:hover{color:var(--accent-soft)}
.ficha{display:inline-block; font-family:ui-monospace,Consolas,monospace; font-size:.8rem; color:var(--accent-soft);
  border:1px solid var(--border-strong); border-radius:6px; padding:0 6px; margin-right:8px; vertical-align:1px}
.r-meta{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:4px; font-size:.88rem}
.r-contador{color:var(--accent-soft)} .r-contador.pendiente{color:var(--aviso); font-style:italic}
.chip{font-size:.72rem; padding:1px 8px; border-radius:999px; border:1px solid var(--border); color:var(--text-muted)}
.chip-baja{border-color:var(--error); color:var(--error)}
.r-clave{display:flex; align-items:center; gap:8px}
.clave-valor{font-family:ui-monospace,Consolas,monospace; letter-spacing:.06em; color:var(--text-muted); min-width:90px; text-align:right}
.clave-valor.visible{color:var(--accent-soft); user-select:all}

.barra{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.barra h1{margin:0}
.datos{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px 22px}
.datos .lbl{font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted)}
.datos .val{margin-top:2px; word-break:break-word}
.datos .val.texto{white-space:pre-wrap}
.vacio{color:var(--text-muted); font-style:italic}
.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:4px 18px}
.form-grid .ancho{grid-column:1/-1}
textarea{width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--border); background:var(--bg-raised);
  color:var(--text); font:inherit; min-height:80px; resize:vertical}
textarea:focus{outline:none; border-color:var(--accent)}
.err{color:var(--error); font-size:.8rem; margin-top:3px}
.campo-error input,.campo-error select{border-color:var(--error)}
.ayuda{color:var(--text-muted); font-size:.8rem; margin-top:3px}
.aviso-ficha{font-size:.82rem; margin-top:4px}
.seccion{margin-top:22px}
.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.tarjeta .num{text-align:left}
tfoot td{font-weight:600; border-top:1px solid var(--border-strong)}
.fila-baja td{opacity:.55}
.obs{color:var(--aviso); font-size:.8rem}
.chk{display:flex; align-items:center; gap:8px; margin-top:10px; color:var(--text-muted); font-size:.88rem}
.chk input{width:auto}
@media (max-width:720px){
  .resultado{flex-direction:column; align-items:stretch; gap:10px}
  .r-clave{justify-content:flex-end}
  .buscador-grande kbd{display:none}
  .datos{grid-template-columns:1fr}
}

/* ===================== Capa 3: liquidación ===================== */
.liq-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:16px; align-items:start}
table.liq{font-size:1rem}
table.liq td{padding:9px 6px}
table.liq tr.sub td{color:var(--text-muted); font-size:.92rem; padding-top:5px; padding-bottom:5px}
table.liq tr.total td{font-weight:600; border-top:1px solid var(--border-strong)}
table.liq tr.final td{font-weight:700; font-size:1.25rem; color:var(--accent-soft); border-top:2px solid var(--accent); padding-top:12px}
@media (max-width:820px){ .liq-grid{grid-template-columns:1fr} }

/* ===================== Capa 4: reportes ===================== */
.reportes{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:16px}
.reportes .tarjeta{display:flex; flex-direction:column}
.reportes .tarjeta h3{font-family:var(--fuente-marca); font-weight:500; font-size:1.05rem; margin:0 0 6px}
.reportes .tarjeta p{flex-grow:1; margin:0 0 6px}