/* ============================================================
   EklesiaAdmin — estética "santuario editorial"
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap');

:root {
    --bg:        #ffffff;
    --surface:   #ffffff;
    --surface-2: #faf9f6;
    --ink:       #141414;
    --muted:     #6f6a61;
    --line:      #e7e4dd;
    --primary:   #b8902f;
    --primary-d: #8f6f1f;
    --primary-l: #f7efda;
    --accent:    #c6a23a;
    --accent-l:  #f7efda;
    --danger:    #a32d2d;
    --ok:        #2f7d5e;
    --shadow:    0 1px 2px rgba(40,30,10,.05), 0 10px 28px -14px rgba(40,30,10,.20);
    --radius:    14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: 'Outfit', sans-serif; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- LOGIN ---------- */
.auth-wrap {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
}
.auth-aside {
    background: linear-gradient(150deg, var(--primary-d), var(--primary));
    color: #e6f1fb;
    padding: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.auth-aside::after {
    content: '';
    position: absolute;
    width: 480px; height: 480px;
    right: -160px; bottom: -160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(184,144,47,.40), transparent 70%);
}
.auth-aside .brand { font-family: 'Outfit', sans-serif; font-size: 1.5rem; font-weight: 600; }
.auth-aside .brand span { color: var(--accent); }
.auth-aside h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); max-width: 12ch; }
.auth-aside p { opacity: .8; max-width: 36ch; margin-top: 1rem; }
.auth-aside .verse { font-family: 'Outfit', sans-serif; font-style: italic; opacity: .55; font-size: .95rem; }

.auth-main { display: flex; align-items: center; justify-content: center; padding: 3rem; }
.auth-card { width: 100%; max-width: 380px; }
.auth-card h2 { font-size: 1.9rem; }
.auth-card .sub { color: var(--muted); margin: .4rem 0 2rem; }

.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: .4rem; letter-spacing: .02em; }
.field input, .field select, .field textarea {
    width: 100%;
    padding: .72rem .9rem;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    font-family: inherit;
    font-size: .95rem;
    color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-l);
}

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .72rem 1.3rem;
    border: none; border-radius: 10px;
    background: var(--primary); color: #fff;
    font-weight: 600; font-size: .92rem;
    transition: background .15s, transform .05s;
}
.btn:hover { background: var(--primary-d); }
.btn:active { transform: translateY(1px); }
.btn--block { width: 100%; }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--accent { background: var(--accent); }
.btn--accent:hover { background: #8a6d22; }
.btn--sm { padding: .4rem .75rem; font-size: .82rem; }
.btn--danger { background: transparent; color: var(--danger); border: 1.5px solid transparent; }
.btn--danger:hover { background: #fbeaea; }

.alert { padding: .8rem 1rem; border-radius: 10px; font-size: .9rem; margin-bottom: 1.2rem; }
.alert--error { background: #fbeaea; color: var(--danger); }
.alert--ok    { background: #e8f1e8; color: var(--ok); }

/* ---------- APP SHELL ---------- */
.shell { display: grid; grid-template-columns: 256px 1fr; min-height: 100vh; }

.sidebar {
    background: #0a0a0a;
    color: #d8d2c6;
    padding: 1.6rem 1.1rem;
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar .brand {
    font-family: 'Outfit', sans-serif; font-size: 1.3rem; font-weight: 600;
    padding: 0 .6rem 1.6rem; color: #fff;
}
.sidebar .brand span { color: #d4af37; }
.sidebar nav { display: flex; flex-direction: column; gap: .15rem; flex: 1; }
.sidebar nav a {
    display: flex; align-items: center; gap: .7rem;
    padding: .65rem .8rem; border-radius: 9px;
    color: #d8d2c6; font-size: .92rem; font-weight: 500;
    transition: background .15s, color .15s;
}
.sidebar nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar nav a.active { background: #d4af37; color: #1a1407; font-weight: 600; }
.sidebar nav a .ic { width: 18px; height: 18px; opacity: .85; }

.sidebar .tenant-badge {
    margin-top: auto; padding: .9rem; border-radius: 10px;
    background: rgba(255,255,255,.05); font-size: .82rem;
}
.sidebar .tenant-badge .label { color: #8f897c; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.sidebar .tenant-badge .name { color: #fff; font-weight: 600; margin-top: .15rem; }
.sidebar .tenant-badge .meta { color: #8f897c; font-size: .78rem; margin-top: .2rem; }

.main { display: flex; flex-direction: column; }
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.1rem 2rem; border-bottom: 1px solid var(--line);
    background: var(--surface);
}
.topbar h1 { font-size: 1.4rem; }
.topbar .right { display: flex; align-items: center; gap: 1rem; }

.lang-switch { display: flex; gap: .25rem; background: var(--surface-2); padding: .2rem; border-radius: 8px; border: 1px solid var(--line); }
.lang-switch a { padding: .25rem .6rem; border-radius: 6px; font-size: .78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; }
.lang-switch a.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow); }

.user-chip { display: flex; align-items: center; gap: .6rem; }
.avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--accent-l); color: var(--accent);
    display: grid; place-items: center; font-weight: 700; font-size: .85rem;
    font-family: 'Outfit', sans-serif;
}

.content { padding: 2rem; max-width: 1200px; width: 100%; }

/* ---------- CARDS / STATS ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.stat {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.3rem 1.4rem; box-shadow: var(--shadow);
    position: relative; overflow: hidden;
}
.stat::before { content:''; position:absolute; left:0; right:0; top:0; height:3px; background: #d4af37; }
.stat .label { color: var(--primary-d); font-size: .82rem; font-weight: 600; letter-spacing: .01em; }
.stat .value { font-family: 'Outfit', sans-serif; font-size: 2rem; font-weight: 600; margin-top: .3rem; }
.stat.is-primary .value { color: var(--primary); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-head { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--line); }
.card-head h2 { font-size: 1.15rem; }
.card-body { padding: 1.2rem 1.5rem; }

/* ---------- TABLE ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: .8rem 1rem; font-size: .9rem; }
.table th { color: var(--muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--line); }
.table tbody tr { border-bottom: 1px solid var(--surface-2); }
.table tbody tr:hover { background: var(--surface-2); }
.table .actions { display: flex; gap: .4rem; justify-content: flex-end; }

.badge { display: inline-block; padding: .2rem .6rem; border-radius: 99px; font-size: .74rem; font-weight: 600; }
.badge--active   { background: #e3f1ea; color: var(--ok); }
.badge--inactive { background: #eef2f8; color: var(--muted); }
.badge--visitor  { background: var(--accent-l); color: var(--accent); }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; flex-wrap: wrap; }
.search { flex: 1; max-width: 360px; }
.search input { width: 100%; padding: .6rem .9rem; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); font-family: inherit; }
.search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-l); }

.empty { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.empty .big { font-family: 'Outfit', sans-serif; font-size: 1.2rem; color: var(--ink); margin-bottom: .3rem; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-grid .full { grid-column: 1 / -1; }
.form-actions { display: flex; gap: .6rem; margin-top: 1.5rem; }

/* ============================================================
   MOBILE-FIRST (base = móvil) — el layout de escritorio vive
   bajo @media (min-width: 900px) más abajo en este archivo.
   ============================================================ */

/* Evitar scroll horizontal accidental del viewport */
html, body { max-width: 100%; }
body { overflow-x: hidden; }

/* --- Contenedor de tablas con scroll horizontal táctil --- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }

/* === BASE MÓVIL: app shell off-canvas === */
.shell { display: block; min-height: 100vh; }

.sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 270px; max-width: 84vw;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform .25s ease;
    height: 100vh; overflow-y: auto;
    box-shadow: 0 0 40px rgba(0,0,0,.4);
}
body.nav-open .sidebar { transform: translateX(0); }

/* Overlay para cerrar el cajón */
.nav-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 50;
    opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}
body.nav-open .nav-overlay { opacity: 1; visibility: visible; }

/* Evita el scroll del fondo cuando el cajón está abierto */
body.nav-open { overflow: hidden; }

/* Botón hamburguesa (solo móvil) */
.menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; min-height: 44px;
    border: 1.5px solid var(--line); border-radius: 10px;
    background: var(--surface); color: var(--ink);
    font-size: 1.25rem; line-height: 1;
    flex: none;
}
.menu-toggle:hover { background: var(--surface-2); }

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
    display: flex; align-items: center; gap: .75rem;
    justify-content: space-between; flex-wrap: wrap;
    padding: .8rem 1rem; border-bottom: 1px solid var(--line);
    background: var(--surface);
}
.topbar h1 { font-size: 1.2rem; min-width: 0; flex: 1; }
.topbar .right { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

.content { padding: 1.1rem 1rem; max-width: 1200px; width: 100%; }

/* --- Tablas: no desbordar el viewport en móvil --- */
.table { min-width: 560px; }

/* --- Tarjetas / grids apilados en móvil --- */
.stat-grid { grid-template-columns: 1fr; }
.card-head { flex-wrap: wrap; gap: .6rem; padding: 1rem 1.1rem; }
.card-body { padding: 1rem 1.1rem; }
.card-head h2 { min-width: 0; }

/* --- Formularios cómodos y táctiles en móvil --- */
.form-grid { grid-template-columns: 1fr; }
input, select, textarea {
    font-size: 16px;          /* evita el zoom automático en iOS */
    min-height: 44px;
    width: 100%;
}
textarea { min-height: 88px; }
.field input, .field select, .field textarea { font-size: 16px; min-height: 44px; }
.form-actions { flex-direction: column; }
.form-actions .btn { width: 100%; }

/* --- Botones táctiles --- */
.btn { min-height: 44px; }
.btn--sm { min-height: 36px; }

/* --- Toolbar / búsqueda --- */
.toolbar { flex-direction: column; align-items: stretch; }
.search { max-width: none; }
.search input { min-height: 44px; font-size: 16px; }

/* ============================================================
   ESCRITORIO (≥900px): el layout clásico, esencialmente como hoy
   ============================================================ */
@media (min-width: 900px) {
    .shell { display: grid; grid-template-columns: 256px 1fr; }

    .sidebar {
        position: sticky; top: 0; left: auto;
        width: auto; max-width: none;
        transform: none; transition: none;
        z-index: auto; box-shadow: none;
        height: 100vh;
    }

    .menu-toggle { display: none; }
    .nav-overlay { display: none; }
    body.nav-open { overflow: auto; }

    .topbar { padding: 1.1rem 2rem; flex-wrap: nowrap; }
    .topbar h1 { font-size: 1.4rem; flex: none; }
    .topbar .right { gap: 1rem; flex-wrap: nowrap; }

    .content { padding: 2rem; }

    .table { min-width: 0; }

    .stat-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
    .card-head { flex-wrap: nowrap; padding: 1.2rem 1.5rem; }
    .card-body { padding: 1.2rem 1.5rem; }

    .form-grid { grid-template-columns: 1fr 1fr; }
    .field input, .field select, .field textarea { font-size: .95rem; min-height: 0; }
    .form-actions { flex-direction: row; }
    .form-actions .btn { width: auto; }

    .toolbar { flex-direction: row; align-items: center; }
    .search { max-width: 360px; }

    .auth-wrap { grid-template-columns: 1.1fr 1fr; }
    .auth-aside { display: flex; }
}

/* Login: una sola columna por debajo de 900px (móvil-first) */
.auth-wrap { grid-template-columns: 1fr; }
.auth-aside { display: none; }
.auth-main { padding: 2rem 1.2rem; }

/* ============================================================
   PANEL SUPER ADMIN — tema "sala de control"
   ============================================================ */
.adm-body { background: #14171c; }
.adm-shell { min-height: 100vh; display: flex; flex-direction: column; }
.adm-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 2rem; background: #1b1f26; border-bottom: 1px solid #2a2f38;
}
.adm-top .brand { font-family: 'Outfit', sans-serif; font-size: 1.2rem; color: #fff; font-weight: 600; }
.adm-top .brand span { color: var(--accent); }
.adm-top .brand small { display:block; font-family:'Inter',sans-serif; font-size:.7rem; color:#8a93a3; font-weight:500; letter-spacing:.05em; }
.adm-top .right { display: flex; align-items: center; gap: 1rem; }
.adm-content { padding: 2rem; max-width: 1280px; width: 100%; margin: 0 auto; }

.adm-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 1rem; margin-bottom: 1.6rem; }
.adm-stat { background: #1b1f26; border: 1px solid #2a2f38; border-radius: 14px; padding: 1.2rem 1.4rem; }
.adm-stat .label { color: #8a93a3; font-size: .8rem; font-weight: 600; }
.adm-stat .value { font-family: 'Outfit', sans-serif; font-size: 2rem; color: #fff; margin-top: .25rem; }
.adm-stat.accent .value { color: var(--accent); }
.adm-stat.ok .value { color: #5fd39a; }
.adm-stat.warn .value { color: #e0894a; }

.adm-card { background: #1b1f26; border: 1px solid #2a2f38; border-radius: 14px; margin-bottom: 1.6rem; overflow: hidden; }
.adm-card-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.4rem; border-bottom: 1px solid #2a2f38; }
.adm-card-head h2 { font-size: 1.1rem; color: #fff; }
.adm-card-head .note { color:#8a93a3; font-size:.8rem; font-weight:400; max-width:48ch; }

.adm-table { width: 100%; border-collapse: collapse; }
.adm-table th, .adm-table td { padding: .75rem 1rem; font-size: .88rem; text-align: left; color: #d6dae1; }
.adm-table th { color: #8a93a3; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid #2a2f38; }
.adm-table tbody tr { border-bottom: 1px solid #23272f; }
.adm-table tbody tr:hover { background: #20242c; }
.adm-table .num { text-align: right; font-variant-numeric: tabular-nums; }

.adm-badge { display:inline-block; padding:.2rem .6rem; border-radius:99px; font-size:.72rem; font-weight:600; }
.adm-badge.active { background:#13301f; color:#5fd39a; }
.adm-badge.suspended { background:#3a1f16; color:#e0894a; }
.adm-badge.trial { background:#1f2a3a; color:#6fb3e0; }

.adm-actions { display:flex; gap:.4rem; justify-content:flex-end; }
.adm-btn { display:inline-flex; align-items:center; gap:.35rem; padding:.4rem .75rem; border-radius:8px; font-size:.8rem; font-weight:600; border:1px solid #2f3540; background:#222730; color:#d6dae1; cursor:pointer; }
.adm-btn:hover { background:#2a303a; }
.adm-btn.primary { background: var(--accent); border-color: var(--accent); color:#fff; }
.adm-btn.primary:hover { background:#8a6d22; }
.adm-btn.ok { color:#5fd39a; }
.adm-btn.danger { color:#e8705e; }
.adm-btn.danger:hover { background:#3a1f1a; }

.adm-bar { height:6px; background:#262b33; border-radius:99px; overflow:hidden; margin-top:.3rem; }
.adm-bar > span { display:block; height:100%; background:var(--accent); }

.adm-login { min-height:100vh; display:grid; place-items:center; padding:2rem; }
.adm-login-card { width:100%; max-width:360px; background:#1b1f26; border:1px solid #2a2f38; border-radius:16px; padding:2.2rem; }
.adm-login-card .brand { font-family:'Outfit',sans-serif; font-size:1.5rem; color:#fff; margin-bottom:.2rem; }
.adm-login-card .brand span { color:var(--accent); }
.adm-login-card .sub { color:#8a93a3; font-size:.88rem; margin-bottom:1.6rem; }
.adm-login-card label { display:block; color:#8a93a3; font-size:.78rem; font-weight:600; margin-bottom:.35rem; }
.adm-login-card input { width:100%; padding:.7rem .9rem; border:1.5px solid #2f3540; border-radius:10px; background:#14171c; color:#fff; font-family:inherit; margin-bottom:1rem; }
.adm-login-card input:focus { outline:none; border-color:var(--accent); }
.adm-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.adm-form-grid .full { grid-column:1/-1; }
.adm-field label { display:block; color:#8a93a3; font-size:.78rem; font-weight:600; margin-bottom:.35rem; }
.adm-field input, .adm-field select { width:100%; padding:.65rem .85rem; border:1.5px solid #2f3540; border-radius:10px; background:#14171c; color:#fff; font-family:inherit; }
.adm-field input:focus, .adm-field select:focus { outline:none; border-color:var(--accent); }
.adm-alert { padding:.75rem 1rem; border-radius:10px; font-size:.88rem; margin-bottom:1.2rem; }
.adm-alert.err { background:#3a1f1a; color:#e8705e; }
.adm-alert.ok { background:#13301f; color:#5fd39a; }

/* Navegación del panel admin */
.adm-nav { display:flex; gap:.3rem; flex-wrap:wrap; }
.adm-nav a { padding:.4rem .8rem; border-radius:8px; font-size:.86rem; font-weight:600; color:#8a93a3; }
.adm-nav a:hover { color:#d6dae1; background:#222730; }
.adm-nav a.active { color:#fff; background:var(--accent); }

/* --- Panel super admin: responsive móvil --- */
.adm-top { flex-wrap: wrap; gap: .8rem; padding: .9rem 1rem; }
.adm-top > div { flex-wrap: wrap; gap: .8rem !important; min-width: 0; }
.adm-top .right { flex-wrap: wrap; gap: .6rem; }
.adm-content { padding: 1.1rem 1rem; }
.adm-stat-grid { grid-template-columns: 1fr; }
.adm-card-head { flex-wrap: wrap; gap: .6rem; padding: 1rem 1.1rem; }
.adm-form-grid { grid-template-columns: 1fr; }
.adm-field input, .adm-field select { font-size: 16px; min-height: 44px; }
.adm-login-card input { font-size: 16px; min-height: 44px; }
.adm-btn { min-height: 40px; }

@media (min-width: 900px) {
    .adm-top { flex-wrap: nowrap; padding: 1rem 2rem; }
    .adm-top .right { flex-wrap: nowrap; }
    .adm-content { padding: 2rem; }
    .adm-stat-grid { grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); }
    .adm-card-head { flex-wrap: nowrap; padding: 1.1rem 1.4rem; }
    .adm-form-grid { grid-template-columns: 1fr 1fr; }
    .adm-field input, .adm-field select { font-size: inherit; min-height: 0; }
    .adm-login-card input { font-size: inherit; min-height: 0; }
}

/* ============================================================
   MÓDULO D12 / G12 — vistas de primera clase
   ============================================================ */
.g12-hero {
    background: linear-gradient(135deg, var(--primary-d), var(--primary) 70%);
    color: #e6f1fb; border-radius: var(--radius);
    padding: 1.6rem 1.8rem; margin-bottom: 1.6rem;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
    position: relative; overflow: hidden;
}
.g12-hero::after { content:''; position:absolute; right:-120px; top:-120px; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle, rgba(184,144,47,.30), transparent 70%); }
.g12-hero h1 { font-size: 1.7rem; color:#fff; }
.g12-hero .scope-pill { display:inline-block; margin-top:.4rem; padding:.25rem .8rem; border-radius:99px; background:rgba(255,255,255,.14); font-size:.82rem; font-weight:600; }
.g12-hero .hero-num { text-align:right; }
.g12-hero .hero-num .n { font-family:'Outfit',sans-serif; font-size:2.6rem; font-weight:600; line-height:1; }
.g12-hero .hero-num .l { font-size:.82rem; opacity:.8; }

.g12-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin-bottom:1.6rem; }
.g12-kpi { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.2rem; box-shadow:var(--shadow); border-top:3px solid var(--accent); }
.g12-kpi .l { color:var(--muted); font-size:.78rem; font-weight:600; }
.g12-kpi .v { font-family:'Outfit',sans-serif; font-size:1.9rem; margin-top:.2rem; }
.g12-kpi.p { border-top-color:var(--primary); } .g12-kpi.p .v { color:var(--primary); }
.g12-kpi.a { border-top-color:var(--accent); } .g12-kpi.a .v { color:var(--accent); }

.g12-cols { display:grid; grid-template-columns:1.4fr 1fr; gap:1.3rem; align-items:start; }
@media (max-width:980px){ .g12-cols{ grid-template-columns:1fr; } }

/* Pirámide de liderazgo */
.pyramid { text-align:center; padding:1rem .5rem 1.4rem; }
.apex-card { display:inline-flex; flex-direction:column; align-items:center; gap:.2rem; background:var(--primary); color:#fff; padding:.9rem 1.6rem; border-radius:12px; box-shadow:var(--shadow); }
.apex-card .role { font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; opacity:.8; }
.apex-card .nm { font-family:'Outfit',sans-serif; font-size:1.1rem; }
.pyramid .stem { width:2px; height:24px; background:var(--line); margin:0 auto; }
.twelve { display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem; margin-top:.4rem; }
.twelve a { display:block; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:.55rem .7rem; min-width:118px; text-align:left; transition:transform .08s, border-color .15s, box-shadow .15s; }
.twelve a:hover { transform:translateY(-2px); border-color:var(--primary); box-shadow:var(--shadow); }
.twelve a .nm { font-weight:600; font-size:.86rem; }
.twelve a .meta { color:var(--muted); font-size:.74rem; margin-top:.15rem; }
.twelve a .dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:.35rem; vertical-align:middle; }

/* Tendencia (SVG bar chart) */
.trend-wrap { padding:1rem 1.2rem 1.4rem; }
.trend-wrap svg { width:100%; height:auto; display:block; }

/* Redes */
.net-card { display:flex; align-items:center; gap:.9rem; padding:.85rem 1rem; border-bottom:1px solid var(--surface-2); }
.net-card:last-child { border-bottom:0; }
.net-card .swatch { width:38px; height:38px; border-radius:10px; flex:none; display:grid; place-items:center; color:#fff; font-family:'Outfit',sans-serif; font-weight:600; }
.net-card .info { flex:1; min-width:0; }
.net-card .info .nm { font-weight:600; }
.net-card .info .sub { color:var(--muted); font-size:.78rem; }
.net-card .att { text-align:right; }
.net-card .att .n { font-family:'Outfit',sans-serif; font-size:1.3rem; color:var(--primary); }
.net-card .att .l { color:var(--muted); font-size:.72rem; }

/* Explorador de red */
.crumbs { display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; margin-bottom:1.2rem; font-size:.88rem; }
.crumbs a { color:var(--primary); font-weight:600; }
.crumbs span.sep { color:var(--muted); }
.node-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.9rem; }
.node-card { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:1rem; box-shadow:var(--shadow); display:block; transition:transform .08s, border-color .15s; }
.node-card:hover { transform:translateY(-2px); border-color:var(--primary); }
.node-card .nm { font-family:'Outfit',sans-serif; font-size:1.05rem; }
.node-card .sp { color:var(--muted); font-size:.82rem; }
.node-card .stats { display:flex; gap:1rem; margin-top:.7rem; }
.node-card .stats div { font-size:.78rem; color:var(--muted); }
.node-card .stats b { display:block; font-family:'Outfit',sans-serif; font-size:1.2rem; color:var(--ink); }

/* ---- Kanban de seguimiento ---- */
.kanban{display:flex;gap:1rem;overflow-x:auto;padding-bottom:1rem;align-items:flex-start}
.kanban-col{flex:0 0 260px;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.kanban-col__head{display:flex;justify-content:space-between;align-items:center;padding:.7rem .9rem;font-size:.9rem;background:var(--surface-2,#f4f1ec)}
.kanban-count{background:var(--line);border-radius:99px;padding:.05rem .55rem;font-size:.78rem}
.kanban-col__body{padding:.7rem;display:flex;flex-direction:column;gap:.6rem;min-height:40px}
.kanban-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.kanban-card__name{font-weight:600;color:var(--primary);text-decoration:none;display:block}
.kanban-card__meta{display:flex;align-items:center;gap:.4rem;margin:.35rem 0;font-size:.78rem;color:var(--muted)}
.kanban-card__who{font-size:.78rem;color:var(--muted);margin-bottom:.4rem}
.kanban-card__move select{width:100%;font-size:.8rem;padding:.3rem}

/* ---- Línea de tiempo de contactos ---- */
.timeline{display:flex;flex-direction:column;gap:.9rem}
.timeline__item{display:flex;gap:.8rem;padding-left:.4rem;border-left:2px solid var(--line)}
.timeline__date{flex:0 0 84px;color:var(--muted);font-size:.8rem;padding-left:.6rem}

/* ---- Sub-navegación (finanzas) ---- */
.subtabs{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:1.2rem;border-bottom:1px solid var(--line)}
.subtabs a{padding:.55rem .95rem;text-decoration:none;color:var(--muted);border-bottom:2px solid transparent;font-size:.9rem;font-weight:600}
.subtabs a.active{color:var(--primary);border-bottom-color:var(--primary)}
.fin-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.4rem}
.fin-kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.3rem}
.fin-kpi .lbl{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.fin-kpi .num{font-family:'Outfit',sans-serif;font-size:1.7rem;display:block;margin-top:.3rem}

/* ===== Marca Mies (espiga) ===== */
.mies-brand { display:inline-flex; align-items:center; gap:.5rem; line-height:1; }
.mies-mark { height:30px; width:auto; display:block; color:#b8902f; }
.mies-word { font-family:'Outfit', sans-serif; font-weight:600; font-size:1.3rem; letter-spacing:-.01em; color:var(--ink); }
.sidebar .mies-mark, .auth-aside .mies-mark, .adm-top .mies-mark, .adm-login-card .mies-mark { color:#d4af37; }
.sidebar .brand .mies-word, .auth-aside .brand .mies-word, .adm-top .brand .mies-word, .adm-login-card .brand .mies-word { color:#fff; }
.adm-top .mies-word { font-size:1.15rem; }
.adm-top .mies-mark { height:26px; }
.portal-top .mies-mark { height:26px; }