/* ====== SueldoPY · estilos ====== */
:root{
  --fondo:#0b1220; --panel:#121b2e; --panel2:#182339; --borde:#233350;
  --texto:#e8eefb; --texto2:#93a3c2; --azul:#3b82f6; --celeste:#22d3ee;
  --verde:#34d399; --rojo:#f87171; --ambar:#fbbf24;
  --radio:14px; --sombra:0 8px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--fondo);
  color:var(--texto);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;
  font-size:15px; line-height:1.45;
}
a{color:var(--celeste)}
.logo{font-weight:800;font-size:20px;letter-spacing:.3px}
.logo span{background:linear-gradient(90deg,var(--azul),var(--celeste));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- topbar ---- */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:18px;
  padding:10px 22px;background:rgba(11,18,32,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--borde)}
.tabs{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.tabs button{background:none;border:0;color:var(--texto2);padding:8px 13px;
  border-radius:9px;cursor:pointer;font-size:14px;font-weight:600}
.tabs button:hover{color:var(--texto);background:var(--panel2)}
.tabs button.activo{color:#fff;background:linear-gradient(135deg,var(--azul),#2563eb)}
.topbar-der{display:flex;align-items:center;gap:10px}
.campana{position:relative;background:var(--panel2);border:1px solid var(--borde);
  border-radius:10px;font-size:17px;padding:6px 10px;cursor:pointer;color:var(--texto)}
.badge{position:absolute;top:-6px;right:-6px;background:var(--rojo);color:#fff;
  font-size:11px;font-weight:700;border-radius:99px;padding:1px 6px}
.salir{color:var(--texto2);text-decoration:none;font-weight:600;font-size:14px}
.salir:hover{color:var(--rojo)}

/* ---- notificaciones ---- */
.panel-notif{position:fixed;right:18px;top:58px;width:390px;max-width:94vw;z-index:60;
  background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);
  box-shadow:var(--sombra);overflow:hidden}
.panel-notif-cab{display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;border-bottom:1px solid var(--borde)}
.panel-notif-cab button{background:none;border:1px solid var(--borde);color:var(--texto2);
  border-radius:8px;padding:4px 10px;cursor:pointer;font-size:12px}
.panel-notif-lista{max-height:420px;overflow:auto}
.notif{padding:12px 14px;border-bottom:1px solid var(--borde)}
.notif:last-child{border-bottom:0}
.notif.no-leida{background:rgba(59,130,246,.08)}
.notif .n-titulo{font-weight:700;font-size:13.5px;margin-bottom:3px}
.notif .n-msj{color:var(--texto2);font-size:13px}
.notif .n-fecha{color:#5c6b8a;font-size:11.5px;margin-top:4px}
.notif-tipo{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 8px;
  border-radius:99px;margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px}
.t-pago{background:rgba(52,211,153,.15);color:var(--verde)}
.t-calendario{background:rgba(34,211,238,.15);color:var(--celeste)}
.t-noticia{background:rgba(251,191,36,.15);color:var(--ambar)}
.t-nomina{background:rgba(59,130,246,.18);color:#7fb0ff}
.t-info{background:#243352;color:var(--texto2)}

/* ---- layout ---- */
main{max-width:1180px;margin:24px auto;padding:0 20px 60px}
.seccion{display:none}
.seccion.visible{display:block;animation:aparecer .25s ease}
@keyframes aparecer{from{opacity:0;transform:translateY(6px)}to{opacity:1}}
h2{margin:6px 0 16px}
h3{margin:0 0 12px;font-size:15.5px}
.sub-seccion{margin:22px 0 12px;color:var(--texto2)}
.cab-seccion{display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:10px;margin-bottom:14px}

.grilla-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:14px;margin-bottom:18px}
.card{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);
  padding:16px 18px}
.card-titulo{color:var(--texto2);font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px}
.card-valor{font-size:25px;font-weight:800;margin:6px 0 2px}
.card-valor.verde{color:var(--verde)} .card-valor.rojo{color:var(--rojo)}
.card-detalle{color:var(--texto2);font-size:12.5px}
.card.destacada{background:linear-gradient(135deg,#12326e,#1d4ed8);
  border-color:#2b57c4}
.card.destacada .card-titulo{color:#b9ccf5}
.card.destacada .card-detalle{color:#cddcfa}

.fila-2col{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;margin-bottom:16px}
@media (max-width:900px){.fila-2col{grid-template-columns:1fr}}
.tarjeta{background:var(--panel);border:1px solid var(--borde);
  border-radius:var(--radio);padding:18px}

/* ---- tabla ---- */
.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla th{color:var(--texto2);text-align:left;font-size:12px;text-transform:uppercase;
  letter-spacing:.4px;padding:8px 10px;border-bottom:1px solid var(--borde)}
.tabla td{padding:10px;border-bottom:1px solid #1c2942}
.tabla tr:hover td{background:#16223a}
.tabla.compacta td{padding:7px 8px;font-size:13.5px}
.num{text-align:right;font-variant-numeric:tabular-nums}
.pos{color:var(--verde)} .neg{color:var(--rojo)}

/* ---- botones ---- */
.btn{background:linear-gradient(135deg,var(--azul),#2563eb);border:0;color:#fff;
  font-weight:700;padding:9px 16px;border-radius:10px;cursor:pointer;font-size:14px;
  text-decoration:none;display:inline-block}
.btn:hover{filter:brightness(1.1)}
.btn.secundario{background:var(--panel2);border:1px solid var(--borde);color:var(--texto)}
.btn.chico{padding:5px 10px;font-size:12.5px;border-radius:8px}
.btn.peligro{background:none;border:1px solid #58333a;color:var(--rojo)}

/* ---- subida ---- */
.zona-subida{border:2px dashed #2d4370;border-radius:var(--radio);padding:22px;
  text-align:center;cursor:pointer;transition:.15s}
.zona-subida:hover,.zona-subida.arrastrando{border-color:var(--celeste);
  background:rgba(34,211,238,.05)}
.zona-subida p{margin:4px 0}
.mini{color:var(--texto2);font-size:12.5px}
#resultadoSubida{margin-top:10px;font-size:13.5px}
.aviso{background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.35);
  color:var(--ambar);border-radius:10px;padding:8px 12px;margin-top:8px;font-size:13px}
.exito{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.4);
  color:var(--verde);border-radius:10px;padding:8px 12px;margin-top:8px;font-size:13px}
.error{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.4);
  color:var(--rojo);border-radius:10px;padding:8px 12px;margin-top:8px;font-size:13px}

/* ---- nomina caja ---- */
.caja-nomina{background:var(--panel2);border:1px solid var(--borde);border-radius:10px;
  padding:12px 14px;font-size:13.5px}
.caja-nomina .ok{color:var(--verde);font-weight:700}
.dato-linea{display:flex;justify-content:space-between;gap:10px;padding:5px 0;
  border-bottom:1px dashed #22304d;font-size:13.5px}
.dato-linea:last-child{border-bottom:0}
.dato-linea span:first-child{color:var(--texto2)}

/* ---- calendario ---- */
.cal-imagen img{width:100%;border-radius:10px;border:1px solid var(--borde)}
.cuenta-regresiva{background:linear-gradient(135deg,#065f46,#059669);color:#eafff5;
  border-radius:10px;padding:12px 16px;font-weight:700;margin-bottom:12px}
.cuenta-regresiva.estimada{background:linear-gradient(135deg,#78350f,#b45309)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--panel2);border:1px solid var(--borde);color:var(--texto2);
  border-radius:99px;padding:5px 12px;font-size:12.5px;cursor:pointer}
.chip:hover{color:var(--texto);border-color:var(--azul)}
.fila-dia-pago td{background:rgba(52,211,153,.08)!important;font-weight:700}

/* ---- noticias ---- */
.grilla-noticias{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.noticia{background:var(--panel);border:1px solid var(--borde);
  border-radius:var(--radio);padding:16px;display:flex;flex-direction:column;gap:6px}
.noticia.relevante{border-color:#3f5f9e;background:linear-gradient(180deg,#152241,#121b2e)}
.noticia .n-fecha{color:var(--texto2);font-size:12px}
.noticia h4{margin:0;font-size:14.5px;line-height:1.35}
.noticia p{margin:0;color:var(--texto2);font-size:13px}
.noticia a{font-size:13px;font-weight:700;text-decoration:none;margin-top:auto}
.etiqueta-pago{align-self:flex-start;background:rgba(52,211,153,.15);color:var(--verde);
  font-size:10.5px;font-weight:800;text-transform:uppercase;padding:2px 9px;border-radius:99px}

/* ---- modal ---- */
.modal{position:fixed;inset:0;background:rgba(4,8,16,.72);z-index:80;
  display:flex;align-items:center;justify-content:center;padding:18px}
.modal.oculto{display:none}
.modal-caja{background:var(--panel);border:1px solid var(--borde);
  border-radius:var(--radio);max-width:760px;width:100%;max-height:88vh;
  overflow:auto;padding:22px;position:relative;box-shadow:var(--sombra)}
.modal-cerrar{position:absolute;top:10px;right:12px;background:none;border:0;
  color:var(--texto2);font-size:17px;cursor:pointer}
.modal h3{margin-top:0}
.dos-tablas{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.dos-tablas{grid-template-columns:1fr}}
.total-fila{font-weight:800}

/* ---- toast ---- */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:90;
  background:#1d2c49;border:1px solid var(--borde);color:var(--texto);
  padding:11px 18px;border-radius:12px;box-shadow:var(--sombra);font-size:14px}
.oculto{display:none!important}
.vacio{color:var(--texto2);text-align:center;padding:14px 0}

/* ---- login ---- */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:radial-gradient(900px 500px at 70% -10%,rgba(37,99,235,.25),transparent),var(--fondo)}
.login-caja{background:var(--panel);border:1px solid var(--borde);
  border-radius:18px;padding:34px;width:360px;max-width:92vw;box-shadow:var(--sombra)}
.login-caja .logo{font-size:26px;text-align:center;margin-bottom:8px}
.login-sub{color:var(--texto2);font-size:13.5px;text-align:center;margin:0 0 18px}
.login-caja label{font-size:13px;color:var(--texto2);font-weight:700}
.login-caja input{width:100%;margin:6px 0 14px;padding:11px 12px;border-radius:10px;
  border:1px solid var(--borde);background:var(--panel2);color:var(--texto);font-size:15px}
.login-caja input:focus{outline:2px solid var(--azul)}
.login-caja button{width:100%;padding:11px;border:0;border-radius:10px;cursor:pointer;
  background:linear-gradient(135deg,var(--azul),#2563eb);color:#fff;font-weight:800;font-size:15px}
.login-error{background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.4);
  color:var(--rojo);border-radius:10px;padding:8px 12px;margin-bottom:12px;font-size:13.5px}
.login-nota{color:#5c6b8a;font-size:12px;text-align:center;margin:14px 0 0}
code{background:var(--panel2);padding:1px 6px;border-radius:6px;font-size:12px}

/* ---- creditos ---- */
.fila-titulo{display:flex;justify-content:space-between;align-items:center;gap:10px}
.credito{background:var(--panel2);border:1px solid var(--borde);border-radius:12px;
  padding:13px 15px;margin-bottom:11px}
.credito.terminado{opacity:.6}
.credito-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.credito-nombre{font-weight:700;font-size:14.5px}
.credito-entidad{color:var(--texto2);font-size:12px}
.credito-acciones{display:flex;gap:6px;flex-shrink:0}
.credito-datos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:11px 0 8px}
.credito-dato{font-size:12px}
.credito-dato span{display:block;color:var(--texto2);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.4px}
.credito-dato b{font-size:13.5px}
.barra{height:7px;background:#1c2942;border-radius:99px;overflow:hidden}
.barra i{display:block;height:100%;background:linear-gradient(90deg,var(--azul),var(--verde))}
.credito-pie{display:flex;justify-content:space-between;font-size:12px;
  color:var(--texto2);margin-top:6px}
.credito-pie b{color:var(--texto)}
.linea-tiempo{position:relative;padding-left:16px}
.hito{position:relative;padding:0 0 15px 14px;border-left:2px solid #24334f}
.hito:last-child{border-left-color:transparent}
.hito::before{content:"";position:absolute;left:-6px;top:3px;width:10px;height:10px;
  border-radius:50%;background:var(--verde);border:2px solid var(--panel)}
.hito-fecha{font-size:11px;color:var(--texto2);text-transform:capitalize}
.hito-nombre{font-size:13.5px;font-weight:700}
.hito-monto{font-size:12.5px;color:var(--verde)}
.sugerencia{background:rgba(59,130,246,.08);border:1px dashed #2d4370;
  border-radius:10px;padding:9px 12px;margin-top:9px;font-size:13px}
.sugerencia b{color:var(--celeste)}

/* ---- formulario de credito ---- */
.form-credito label{display:block;font-size:12px;color:var(--texto2);
  font-weight:700;margin-bottom:9px}
.form-credito input{width:100%;margin-top:4px;padding:8px 10px;border-radius:9px;
  border:1px solid var(--borde);background:var(--panel2);color:var(--texto);
  font-size:14px;font-weight:400}
.form-credito input:focus{outline:2px solid var(--azul)}
.form-2col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-acciones{display:flex;gap:8px;margin-top:6px}

/* ---- variaciones ---- */
.var-sube{color:var(--rojo);font-weight:700}
.var-baja{color:var(--verde);font-weight:700}
.var-bueno{color:var(--verde);font-weight:700}
.var-malo{color:var(--rojo);font-weight:700}
.etiqueta-origen{font-size:10px;background:#243352;color:var(--texto2);
  padding:1px 7px;border-radius:99px;margin-left:6px}
.etiqueta-origen.auto{background:rgba(52,211,153,.15);color:var(--verde)}