/* ==========================================================================
   Mi GNCOMPU — Portal de clientes (tema lila)
   ========================================================================== */
:root{
    --lila:#A855F7; --lila-d:#7c3aed; --azul:#0A4D8C; --azul-b:#1577d6;
    --tinta:#15111f; --sidebar:#1b1430; --sidebar-2:#241a3d;
    --bg:#f6f4fb; --card:#ffffff; --muted:#6b7280; --line:#ece8f5;
    --ok:#10733f; --okbg:#e7f8ef; --warn:#9a6700; --warnbg:#fff3df;
    --grad:linear-gradient(120deg,#7c3aed,#A855F7 60%,#c084fc);
    --radio:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:#1f2430;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Space Grotesk','Inter',sans-serif;font-weight:600;letter-spacing:-.02em;color:#1a1226}
a{color:var(--lila-d);text-decoration:none}
img{display:block;max-width:100%}

/* ---------- Login (guest) ---------- */
.guest-wrap{min-height:100vh;display:grid;place-items:center;padding:1.5rem;
    background:radial-gradient(700px 380px at 80% -10%,rgba(168,85,247,.30),transparent 60%),radial-gradient(600px 340px at 0% 110%,rgba(21,119,214,.22),transparent 55%),var(--bg)}
.login-card{width:100%;max-width:400px;background:var(--card);border:1px solid var(--line);border-radius:22px;
    padding:2.4rem 2.2rem;box-shadow:0 24px 60px rgba(124,58,237,.14);text-align:center}
.login-card .logo{height:46px;margin:0 auto 1.4rem}
.login-card h1{font-size:1.4rem;margin-bottom:.2rem}
.login-card .sub{color:var(--muted);font-size:.92rem;margin-bottom:1.6rem}

/* ---------- Formularios ---------- */
.form{display:grid;gap:1rem;text-align:left}
.form label{display:grid;gap:.4rem;font-weight:600;font-size:.9rem;color:#3a3350}
.form input{padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:12px;font:inherit;width:100%;transition:.16s;background:#fff}
.form input:focus{outline:0;border-color:var(--lila);box-shadow:0 0 0 4px rgba(168,85,247,.15)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;font-size:.95rem;
    padding:.85rem 1.4rem;border-radius:30px;border:0;cursor:pointer;transition:.18s;text-decoration:none}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 22px rgba(124,58,237,.32);width:100%}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(124,58,237,.4)}
.btn-sm{padding:.5rem 1rem;font-size:.85rem;width:auto}
.btn-pay{background:var(--grad);color:#fff}

.alert{padding:.8rem 1rem;border-radius:12px;font-size:.9rem;margin-bottom:1rem;text-align:left}
.alert.error{background:#fdecec;color:#b32b2b}
.alert.ok{background:var(--okbg);color:var(--ok)}

/* ---------- Layout panel ---------- */
.layout{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.sidebar{background:var(--sidebar);color:#cbbfe6;padding:1.4rem 1rem;display:flex;flex-direction:column}
.sidebar .brand{display:flex;align-items:center;gap:.6rem;padding:.4rem .6rem 1.4rem}
.sidebar .brand img{height:34px}
.sidebar nav{display:flex;flex-direction:column;gap:.2rem;flex:1}
.sidebar nav a{display:flex;align-items:center;gap:.7rem;color:#b6a9d6;padding:.7rem .85rem;border-radius:11px;font-weight:500;font-size:.95rem}
.sidebar nav a svg{width:19px;height:19px}
.sidebar nav a:hover{background:var(--sidebar-2);color:#fff}
.sidebar nav a.active{background:var(--grad);color:#fff}
.sidebar .logout{color:#a99cc9;padding:.7rem .85rem;font-size:.9rem}
.sidebar .logout:hover{color:#fff}

.main{padding:2rem 2.4rem}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.8rem}
.topbar h1{font-size:1.6rem}
.topbar .user{display:flex;align-items:center;gap:.6rem;font-size:.9rem;color:var(--muted)}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:700}

/* ---------- Tarjetas resumen ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.1rem;margin-bottom:1.8rem}
.scard{background:var(--card);border:1px solid var(--line);border-radius:var(--radio);padding:1.3rem 1.4rem}
.scard .lbl{color:var(--muted);font-size:.85rem;display:flex;align-items:center;gap:.4rem}
.scard .val{font-family:'Space Grotesk',sans-serif;font-size:1.9rem;font-weight:700;margin-top:.3rem;color:#1a1226}
.scard.accent{background:var(--grad);color:#fff;border:0}
.scard.accent .lbl,.scard.accent .val{color:#fff}

/* ---------- Tablas / paneles ---------- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radio);overflow:hidden}
.panel h2{font-size:1.05rem;padding:1.1rem 1.3rem;border-bottom:1px solid var(--line)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{text-align:left;padding:.85rem 1.3rem;border-bottom:1px solid var(--line);font-size:.92rem}
.table th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:#faf8fe}
.table tr:last-child td{border-bottom:0}
.badge{font-size:.75rem;padding:.2rem .65rem;border-radius:20px;font-weight:600}
.badge.active{background:var(--okbg);color:var(--ok)}
.badge.pending{background:var(--warnbg);color:var(--warn)}
.badge.paid{background:var(--okbg);color:var(--ok)}
.empty{padding:2rem 1.3rem;text-align:center;color:var(--muted)}

@media(max-width:780px){
    .layout{grid-template-columns:1fr}
    .sidebar{flex-direction:row;align-items:center;overflow-x:auto}
    .sidebar nav{flex-direction:row}
    .sidebar .brand{padding:0 .6rem 0 0}
    .main{padding:1.3rem}
}