/* Identidad del portal — Estudio Contable Helueni
   Misma paleta que el sistema de balances para que se vea todo de la misma casa. */
:root{
  --navy:#0f1f3d; --navy2:#16294c; --navy3:#1e3358;
  --oro:#c9a961; --oro2:#b8954e;
  --texto:#1c2536; --suave:#6b7686; --linea:#e3e7ee;
  --fondo:#f5f6f9; --blanco:#fff;
  --ok:#1c7c54; --okbg:#e8f5ef;
  --warn:#9a6b13; --warnbg:#fdf4e3;
  --err:#a52a2a; --errbg:#fdecea;
  --info:#1d4e89; --infobg:#eaf1fa;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--texto);
     font-family:"DM Sans",system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px;line-height:1.55}
a{color:var(--info);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:"Playfair Display",Georgia,serif;font-weight:600;margin:0}

.wrap{max-width:1180px;margin:0 auto;padding:22px}

/* ── Barra superior ─────────────────────────────────────── */
.top{background:var(--navy);color:#fff;padding:11px 0}
.top .wrap{display:flex;align-items:center;gap:14px;padding-top:0;padding-bottom:0}
.top .marca{display:flex;align-items:center;gap:10px;font-family:"Playfair Display",serif;font-size:16px}
.logo{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--oro),var(--oro2));
      color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:none}
.top .der{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:12.5px}
.top .der a{color:rgba(255,255,255,.8)}
.top .quien{color:rgba(255,255,255,.55)}

/* ── Tarjetas ───────────────────────────────────────────── */
.card{background:var(--blanco);border:1px solid var(--linea);border-radius:12px;padding:18px 20px;margin-bottom:16px}
.card-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.card-t{font-size:16px;color:var(--navy)}
.mt{margin-top:12px}
.muted{color:var(--suave)}
.tr{text-align:right}

/* ── Botones ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid transparent;border-radius:9px;
     padding:9px 16px;font:inherit;font-weight:500;cursor:pointer;background:var(--navy);color:#fff;
     text-decoration:none;white-space:nowrap}
.btn:hover{opacity:.92;text-decoration:none}
.btn-oro{background:linear-gradient(135deg,var(--oro),var(--oro2));color:var(--navy);font-weight:600}
.btn-out{background:transparent;color:var(--navy);border-color:var(--linea)}
.btn-sm{padding:6px 11px;font-size:12.5px}
.btn-block{width:100%;justify-content:center}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ── Formularios ────────────────────────────────────────── */
.lbl{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;
     color:var(--suave);margin:13px 0 5px;font-weight:600}
.inp{width:100%;padding:9px 11px;border:1px solid var(--linea);border-radius:8px;font:inherit;background:#fff}
.inp:focus{outline:2px solid rgba(201,169,97,.45);outline-offset:1px;border-color:var(--oro)}
select.inp{cursor:pointer}

/* ── Avisos ─────────────────────────────────────────────── */
.alert{border-radius:9px;padding:11px 14px;margin-bottom:12px;border:1px solid transparent;font-size:13.5px}
.alert-ok{background:var(--okbg);color:var(--ok);border-color:#bfe3d3}
.alert-err{background:var(--errbg);color:var(--err);border-color:#f3c9c4}
.alert-warn{background:var(--warnbg);color:var(--warn);border-color:#efdcb0}
.alert-info{background:var(--infobg);color:var(--info);border-color:#c9daf0}

/* ── Etiquetas de estado ────────────────────────────────── */
.pill{display:inline-block;border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:600}
.pill-ok{background:var(--okbg);color:var(--ok)}
.pill-warn{background:var(--warnbg);color:var(--warn)}
.pill-red{background:var(--errbg);color:var(--err)}
.pill-gris{background:#eef0f4;color:var(--suave)}
.pill-info{background:var(--infobg);color:var(--info)}

/* ── Tablas ─────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{background:#f0f2f6;color:var(--navy);text-align:left;font-size:11px;text-transform:uppercase;
        letter-spacing:.06em;padding:8px 9px;border-bottom:1px solid var(--linea);white-space:nowrap}
.tbl td{padding:7px 9px;border-bottom:1px solid #eef0f4;vertical-align:middle}
.tbl tbody tr:hover{background:#fafbfd}

/* ── Selector de sistemas (el hub) ──────────────────────── */
.sistemas{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:16px}
.sistema{background:#fff;border:1px solid var(--linea);border-radius:14px;padding:22px;
         display:flex;flex-direction:column;gap:9px;text-decoration:none;color:inherit;
         transition:border-color .15s, transform .15s}
.sistema:hover{border-color:var(--oro);transform:translateY(-2px);text-decoration:none}
.sistema .ico{font-size:30px;line-height:1}
.sistema h3{font-size:17px;color:var(--navy)}
.sistema p{margin:0;color:var(--suave);font-size:13px;flex:1}
.sistema .ir{color:var(--oro2);font-weight:600;font-size:13px}

/* ── Ingreso ────────────────────────────────────────────── */
body.login{min-height:100vh;display:flex;align-items:center;justify-content:center;
           background:linear-gradient(150deg,#0f1f3d 0%,#16294c 55%,#1e3358 100%)}
.login-box{width:100%;max-width:410px;padding:26px}
.login-box .card{padding:30px 28px}
.login-h{text-align:center;margin-bottom:24px}
.login-h .logo{width:54px;height:54px;font-size:21px;margin:0 auto 13px;border-radius:12px}
.login-h h1{font-size:21px;color:#fff}
.login-h p{font-size:11px;color:rgba(255,255,255,.45);letter-spacing:.09em;
           text-transform:uppercase;margin:5px 0 0}
.login-f{text-align:center;font-size:11.5px;color:rgba(255,255,255,.42);margin-top:20px;line-height:1.7}

@media (max-width:640px){
  .wrap{padding:14px}
  .card{padding:15px}
}
@media print{
  .top,.btn,.no-print{display:none!important}
  body{background:#fff}
  .card{border:none;padding:0}
}