/* admin.css — extraído del monolito index.html (Gentío admin) */
/* 4 bloques <style> originales fusionados en orden de cascada */

/* ===== bloque CSS original líneas 41-207 ===== */
      /* ── Formeo v5 — Modern Redesign ─────────────────────── */
      .fmeo-host { font-family:'Inter',sans-serif; }

      /* Root */
      .fmeo-host .formeo-editor {
        display:flex; gap:14px; background:transparent; border:none; box-shadow:none;
      }

      /* Stage */
      .fmeo-host .formeo-stage {
        background:#f8fafc; border:2px dashed #e2e8f0; border-radius:16px;
        min-height:160px; padding:10px; transition:border-color .2s,background .2s; flex:1;
      }
      .fmeo-host .formeo-stage.drag-target {
        border-color:#6366f1; background:#eef2ff;
      }

      /* Rows — field cards */
      .fmeo-host .formeo-row {
        background:white; border:1.5px solid #e8ecf0; border-radius:14px;
        margin-bottom:10px; box-shadow:0 1px 3px rgba(0,0,0,.04);
        transition:border-color .15s,box-shadow .15s; overflow:hidden;
      }
      .fmeo-host .formeo-row:hover {
        border-color:#a5b4fc; box-shadow:0 2px 10px rgba(99,102,241,.09);
      }

      /* Columns */
      .fmeo-host .formeo-column { padding:10px 14px; }

      /* Action bars (row / column / field / stage) */
      .fmeo-host .row-actions,
      .fmeo-host .column-actions,
      .fmeo-host .field-actions,
      .fmeo-host .stage-actions {
        display:flex; align-items:center; gap:2px;
        padding:5px 8px; background:#f8fafc; border-bottom:1px solid #f1f5f9;
      }
      .fmeo-host .row-actions { border-radius:12px 12px 0 0; }

      /* Action buttons */
      .fmeo-host .row-actions button,
      .fmeo-host .column-actions button,
      .fmeo-host .field-actions button,
      .fmeo-host .stage-actions button {
        background:none; border:none; border-radius:8px; padding:5px 7px;
        cursor:pointer; color:#94a3b8; font-size:0.75rem; line-height:1;
        display:flex; align-items:center; justify-content:center;
        transition:background .12s,color .12s;
      }
      .fmeo-host .row-actions button:hover,
      .fmeo-host .column-actions button:hover,
      .fmeo-host .field-actions button:hover,
      .fmeo-host .stage-actions button:hover {
        background:#f1f5f9; color:#4f46e5;
      }
      /* Delete = red */
      .fmeo-host button[title*="Delete"],
      .fmeo-host button[title*="Remove"],
      .fmeo-host button[title*="elim"] { color:#fca5a5 !important; }
      .fmeo-host button[title*="Delete"]:hover,
      .fmeo-host button[title*="Remove"]:hover {
        background:#fef2f2 !important; color:#dc2626 !important;
      }

      /* Labels */
      .fmeo-host label,
      .fmeo-host .frm-label {
        font-family:'Inter',sans-serif; font-weight:600; font-size:0.82rem;
        color:#374151; display:block; margin-bottom:4px;
      }

      /* Inputs inside builder */
      .fmeo-host .f-input,
      .fmeo-host .fld-input,
      .fmeo-host input[type="text"]:not([id*="fmSearch"]):not([id*="buscar"]),
      .fmeo-host input[type="number"],
      .fmeo-host select,
      .fmeo-host textarea {
        border:1.5px solid #e2e8f0 !important; border-radius:10px !important;
        padding:8px 12px !important; font-family:'Inter',sans-serif !important;
        font-size:0.85rem !important; color:#1e293b; background:white;
        width:100%; outline:none; transition:border-color .15s;
      }
      .fmeo-host input:focus,
      .fmeo-host select:focus,
      .fmeo-host textarea:focus {
        border-color:#6366f1 !important;
        box-shadow:0 0 0 3px rgba(99,102,241,.1) !important;
      }

      /* Controls panel */
      .fmeo-host .formeo-controls {
        width:170px !important; flex-shrink:0; background:#f8fafc;
        border:1.5px solid #e8ecf0; border-radius:14px; padding:10px;
        overflow-y:auto !important; max-height:calc(100vh - 440px) !important;
        position:sticky !important; top:0 !important; align-self:flex-start !important;
      }

      /* Panel tabs */
      .fmeo-host .panel-labels { display:flex; gap:4px; margin-bottom:8px; flex-wrap:wrap; }
      .fmeo-host .panel-label {
        padding:4px 10px; border-radius:20px; font-size:0.70rem; font-weight:700;
        font-family:'Syne',sans-serif; cursor:pointer; border:1.5px solid #e2e8f0;
        background:white; color:#64748b; transition:all .12s; white-space:nowrap;
      }
      .fmeo-host .panel-label.active-tab,
      .fmeo-host .panel-label:hover { background:#000; color:#fff; border-color:#000; }

      /* Field control items (draggable) */
      .fmeo-host .field-control {
        display:flex; align-items:center; gap:7px; background:white;
        border:1.5px solid #e8ecf0; border-radius:10px; padding:7px 10px;
        margin-bottom:5px; cursor:grab; font-size:0.78rem; font-weight:500;
        color:#475569; transition:border-color .12s,box-shadow .12s; user-select:none;
      }
      .fmeo-host .field-control:hover {
        border-color:#6366f1; color:#4f46e5;
        box-shadow:0 0 0 3px rgba(99,102,241,.08);
      }
      .fmeo-host .field-control:active { cursor:grabbing; }
      .fmeo-host .field-control i[data-lucide] {
        flex-shrink:0; color:#94a3b8;
      }

      /* Sortable ghost */
      .fmeo-host .sortable-ghost {
        opacity:.35; border:2px dashed #6366f1 !important; background:#eef2ff !important;
      }

      /* Dialog/modal */
      .fmeo-host .formeo-dialog {
        background:white; border-radius:18px;
        box-shadow:0 20px 60px rgba(0,0,0,.15); border:1.5px solid #e8ecf0; padding:20px;
      }
      .fmeo-host .f-btn-group { display:flex; gap:8px; }
      .fmeo-host .f-btn-group button,
      .fmeo-host .btn {
        border-radius:20px; font-family:'Inter',sans-serif; font-weight:600;
        font-size:0.82rem; padding:8px 18px; border:none; cursor:pointer;
        transition:background .12s;
      }
      .fmeo-host .btn-primary { background:#6366f1; color:white; }
      .fmeo-host .btn-primary:hover { background:#4f46e5; }
      .fmeo-host .btn-default { background:#f1f5f9; color:#475569; }
      .fmeo-host .btn-default:hover { background:#e2e8f0; }

      /* Input groups */
      .fmeo-host .f-input-group { margin-bottom:12px; }

      /* Condition rows */
      .fmeo-host .f-condition-row {
        background:#f8fafc; border:1px solid #e8ecf0; border-radius:10px;
        padding:8px; margin-bottom:6px;
      }

      /* Component tags */
      .fmeo-host .component-tag {
        display:inline-flex; align-items:center; gap:4px; background:#f1f5f9;
        color:#64748b; font-size:0.68rem; font-weight:700;
        font-family:'Syne',sans-serif; padding:2px 8px; border-radius:20px;
        text-transform:uppercase; letter-spacing:.04em;
      }

      /* Hide Formeo's built-in SVG icons (replaced by Lucide via JS) */
      .fmeo-host svg.icon,
      .fmeo-host .f-icon { display:none !important; }

/* ===== bloque CSS original líneas 211-4631 ===== */
        :root {
            --primary: #6366f1;
            --primary-dark: #4f46e5;
            --primary-light: #818cf8;
            --success: #10b981;
            --success-light: #34d399;
            --danger: #ef4444;
            --danger-light: #f87171;
            --dark: #0f172a;
            --dark-light: #1e293b;
            --bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --bg-app: #f1f5f9;
            --editor: #8b5cf6;
            --wa: #25D366;
            --orange: #f59e0b;
            --purple: #a855f7;
            --glass: rgba(255, 255, 255, 0.15);
            --glass-border: rgba(255, 255, 255, 0.2);
            --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
            /* Mobile layout tokens */
            --mob-pad: 14px;
            --mob-radius: 16px;
            --mob-header-h: 56px;
            --mob-drawer-w: 92%;
        }

        * { box-sizing: border-box; outline: none !important; -webkit-tap-highlight-color: transparent; }
        *:focus, *:focus-visible { outline: none !important; box-shadow: none; }
        .tabulator-cell:focus, .tabulator-row:focus { outline: none !important; border-color: transparent !important; }

        html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            overscroll-behavior: none;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            background-attachment: fixed;
        }

        body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            overscroll-behavior: none;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-image: var(--bg);
            background-size: cover;
            background-position: center center;
            background-attachment: fixed;
            background-repeat: no-repeat;
            color: var(--dark);
        }

        /* ========== LOGIN SCREEN ========== */
        @keyframes loginFadeIn {
            from { opacity: 0; transform: translateY(16px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        #login-screen {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            width: 100%; height: 100%;
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #0a0a0a;
            overflow: hidden;
        }

        #login-dots {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            display: block;
        }

        .login-card {
            position: relative;
            z-index: 1;
            background: transparent;
            border: none;
            padding: 48px 48px;
            text-align: center;
            width: 90%;
            max-width: 400px;
            animation: loginFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .login-card img {
            width: 160px;
            height: auto;
            margin-bottom: 8px;
        }

        .login-card h2 {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            color: rgba(255,255,255,0.35);
            font-size: 0.8rem;
            margin: 0 0 36px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .login-card input {
            width: 100%;
            box-sizing: border-box;
            padding: 14px 18px;
            margin-bottom: 10px;
            border-radius: 20px;
            border: 1px solid rgba(255,255,255,0.1);
            background: rgba(255,255,255,0.05);
            color: #fff;
            font-size: 0.95rem;
            font-family: 'Inter', sans-serif;
            transition: border-color 0.2s, background 0.2s;
            outline: none;
        }

        .login-card input:focus {
            border-color: rgba(255,255,255,0.3);
            background: rgba(255,255,255,0.08);
        }

        .login-card input::placeholder {
            color: rgba(255,255,255,0.25);
        }

        .login-btn {
            width: 100%;
            margin-top: 10px;
            padding: 15px;
            border-radius: 30px;
            border: none;
            background: #fff;
            color: #0a0a0a;
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 1rem;
            cursor: pointer;
            transition: opacity 0.2s;
            letter-spacing: 0.02em;
        }

        .login-btn:hover:not(:disabled) {
            opacity: 0.88;
        }

        .login-btn:active:not(:disabled) {
            opacity: 0.75;
        }

        .login-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        /* Separador "¿No tienes cuenta?" en el login */
        .login-sep {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 20px 0 2px;
            font-family: 'Inter', sans-serif;
            font-size: 0.78rem;
            color: rgba(255,255,255,0.32);
        }
        .login-sep::before,
        .login-sep::after {
            content: "";
            flex: 1;
            height: 1px;
            background: rgba(255,255,255,0.10);
        }

        /* Botón secundario (outline) — "Crear cuenta" */
        .login-btn-ghost {
            display: block;
            box-sizing: border-box;
            text-decoration: none;
            text-align: center;
            background: transparent;
            color: #fff;
            border: 1px solid rgba(255,255,255,0.25);
        }
        .login-btn-ghost:hover:not(:disabled) {
            background: rgba(255,255,255,0.07);
            border-color: rgba(255,255,255,0.45);
            opacity: 1;
        }

        /* ========== MAIN APP ========== */
        .overlay {
            display: none;
            height: 100vh;
            flex-direction: row;
            background: transparent;
            align-items: stretch;
            padding: 16px;
            gap: 12px;
            box-sizing: border-box;
            overflow: hidden;
        }

        /* ========== SIDEBAR ========== */
        nav {
            order: -1;
            width: 220px;
            min-width: 220px;
            background: white;
            border-radius: 30px;
            display: flex;
            flex-direction: column;
            z-index: 100;
            overflow-y: auto;
            overflow-x: hidden;
            flex-shrink: 0;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        nav::-webkit-scrollbar { display: none; }

        .sidebar-brand {
            padding: 32px 20px 16px;
            flex-shrink: 0;
            display: flex;
            justify-content: center;
        }

        .sidebar-org-logo {
            width: 100%;
            height: 40px;
            border-radius: 10px;
            background: linear-gradient(180deg, rgba(205,205,205,0.7) 0%, rgba(18,29,25,0.7) 100%), #f7f7f7;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            flex-shrink: 0;
        }

        .sidebar-org-logo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .sidebar-brand-text { display: none; }

        #sidebarOrgNombre {
            font-family: 'Syne', sans-serif;
            font-size: 0.8rem;
            font-weight: 700;
            color: white;
            padding: 0 8px;
            text-align: center;
        }

        /* Section labels PANEL / GENERAL */
        .nav-section-label {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 0.6rem;
            color: #0f0f0f;
            letter-spacing: 0.08em;
            padding: 14px 12px 6px;
            text-transform: uppercase;
        }

        .sidebar-nav-btns {
            flex: 1;
            padding: 8px 8px 0;
            overflow-y: auto;
            overflow-x: hidden;
        }

        /* Promo card at bottom */
        .sidebar-promo {
            margin: 12px 10px 12px;
            background-image: linear-gradient(rgba(131,218,186,0.7) 0%, rgba(18,29,25,0.7) 100%), linear-gradient(90deg, #f7f7f7 0%, #f7f7f7 100%);
            border-radius: 15px;
            padding: 14px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .sidebar-promo-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
        .sidebar-promo-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.85rem; color: white; line-height: 1.2; }
        .sidebar-promo-favicon { width: 22px; height: 18px; object-fit: contain; flex-shrink: 0; }
        .sidebar-promo-sub { font-family: 'Inter', sans-serif; font-size: 0.65rem; color: white; line-height: 1.4; }
        .sidebar-promo-btn {
            display: block; width: 100%; text-align: center;
            background: white; border: none; border-radius: 12px;
            padding: 4px 0; font-family: 'Inter', sans-serif;
            font-size: 0.65rem; color: #0f0f0f; cursor: pointer;
        }

        nav button {
            width: 100%;
            background: transparent;
            color: #0f0f0f;
            border: none;
            padding: 9px 10px 9px 14px;
            border-radius: 10px;
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 0.82rem;
            cursor: pointer;
            transition: background 0.15s ease;
            white-space: nowrap;
            text-align: left;
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 1px;
            position: relative;
        }

        nav button::before { display: none; }

        nav button span { position: relative; z-index: 1; }

        nav button:hover { background: #f3f3f3; }

        nav button.active {
            color: #0f0f0f;
            font-weight: 700;
            background: transparent;
        }

        nav button.active::after {
            content: '';
            position: absolute;
            left: -8px;
            top: 50%;
            transform: translateY(-50%);
            width: 9px;
            height: 24px;
            background: #0f0f0f;
            border-radius: 5px;
        }

        /* ========== NAV GROUPS (acordeón) ========== */
        .nav-group { margin-bottom: 1px; }

        .nav-group-header {
            width: 100%;
            background: transparent;
            color: #0f0f0f;
            border: none;
            padding: 9px 10px 9px 14px;
            border-radius: 10px;
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 0.82rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: background 0.15s;
            text-align: left;
            margin-bottom: 1px;
            position: relative;
        }
        .nav-group-header:hover { background: #f3f3f3; }
        .nav-group.open .nav-group-header { color: #0f0f0f; }

        .nav-arrow {
            width: 12px; height: 12px;
            margin-left: auto;
            transition: transform 0.22s ease;
            flex-shrink: 0;
            opacity: 0.35;
            color: #0f0f0f;
        }
        .nav-group.open .nav-arrow { transform: rotate(90deg); opacity: 0.7; }

        .nav-group-items {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.22s ease;
            padding-left: 22px;
        }
        .nav-group.open .nav-group-items { max-height: 400px; }

        .nav-group-items button {
            font-size: 0.75rem !important;
            padding: 7px 10px !important;
            color: #475569 !important;
            font-family: 'Syne', sans-serif !important;
            font-weight: 600 !important;
        }
        .nav-group-items button:hover { background: #f3f3f3 !important; }
        .nav-group-items button.active { color: #0f0f0f !important; font-weight: 600 !important; }

        .nav-icon {
            width: 15px; height: 15px;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .nav-icon svg { width: 15px; height: 15px; }

        .nav-badge-dev {
            font-size: 0.55rem;
            background: rgba(0,0,0,0.08);
            padding: 1px 5px; border-radius: 4px;
            vertical-align: middle; margin-left: 4px;
            font-weight: 600; color: #94a3b8;
        }

        .nav-logout-item { color: #0f0f0f !important; }
        .nav-logout-item:hover { background: #f3f3f3 !important; }

        /* ========== HEADER (solo móvil) ========== */
        header {
            display: none;
        }

        .header-org-mobile {
            flex: 1;
            font-weight: 700;
            font-size: 1rem;
            background: linear-gradient(135deg, var(--primary) 0%, var(--purple) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .container {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 12px;
            min-width: 0;
            padding: 0;
            margin: 0;
            max-width: none;
            width: 100%;
            overflow: hidden;
            height: 100%;
        }

        /* ========== DASHBOARD GRID ========== */
        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            margin-bottom: 30px;
        }

        @media (max-width: 1200px) { .dashboard-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px)  { .dashboard-grid { grid-template-columns: 1fr; } }

        .box {
            padding: 28px 24px;
            border-radius: 20px;
            color: white;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 20px;
            min-height: 120px;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
        }

        .box::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .box::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: rgba(255,255,255,0.3);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.4s ease;
        }

        .box:hover {
            transform: translateY(-6px);
        }

        .box:hover::before {
            opacity: 1;
        }

        .box:hover::after {
            transform: scaleX(1);
        }

        .box-icon {
            font-size: 2.8rem;
            filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25));
            background: rgba(255,255,255,0.2);
            width: 70px;
            height: 70px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .box-content {
            flex: 1;
            text-align: left;
        }

        .box-title {
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 6px;
            opacity: 0.85;
        }

        .box-value {
            font-size: 2.8rem;
            font-weight: 900;
            line-height: 1;
            text-shadow: 0 3px 12px rgba(0,0,0,0.2);
        }

        .bg-blue {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
        }
        .bg-green {
            background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
            box-shadow: 0 10px 30px rgba(17, 153, 142, 0.4);
        }
        .bg-red {
            background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
            box-shadow: 0 10px 30px rgba(235, 51, 73, 0.4);
        }
        .bg-orange {
            background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
            box-shadow: 0 10px 30px rgba(247, 151, 30, 0.4);
        }
        .bg-purple {
            background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
            box-shadow: 0 10px 30px rgba(168, 85, 247, 0.4);
        }

        /* ========== CARDS ========== */
        .card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            padding: 30px;
            border-radius: 24px;
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
            position: relative;
            margin-bottom: 25px;
            transition: all 0.3s ease;
        }

        .card:hover {
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
        }

        .card h2 {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--dark);
            margin: 0 0 25px 0;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        /* ========== TABLE CONTROLS ========== */
        .table-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            gap: 15px;
            flex-wrap: wrap;
        }

        .search-box {
            padding: 14px 20px;
            border: 2px solid #e2e8f0;
            border-radius: 14px;
            min-width: 280px;
            font-size: 0.95rem;
            font-weight: 500;
            transition: all 0.3s ease;
            background: white;
            outline: none;
        }

        .search-box:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
        }

        .sort-box {
            padding: 14px 20px;
            border: 2px solid #e2e8f0;
            border-radius: 14px;
            background: white;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            outline: none;
        }

        .sort-box:focus {
            border-color: var(--primary);
        }

        /* ========== TABLE ========== */
        .table-responsive {
            overflow-x: auto;
            border-radius: 16px;
            border: 1px solid #e2e8f0;
            background: white;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.9rem;
            min-width: 1200px;
        }

        th {
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
            padding: 18px 16px;
            text-align: left;
            color: #475569;
            text-transform: uppercase;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            border-bottom: 2px solid #e2e8f0;
        }

        td {
            padding: 16px;
            border-bottom: 1px solid #f1f5f9;
            transition: background 0.2s ease;
        }

        tr:hover td {
            background: rgba(99, 102, 241, 0.03);
        }

        .editable {
            padding: 10px 14px;
            border-radius: 10px;
            border: 2px solid transparent;
            width: 100%;
            transition: all 0.3s ease;
            font-weight: 500;
            background: transparent;
        }

        .editing .editable {
            border-color: var(--editor);
            background: #faf5ff;
        }

        /* ========== BADGES ========== */
        .badge {
            padding: 8px 16px;
            border-radius: 30px;
            font-weight: 700;
            font-size: 0.75rem;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            letter-spacing: 0.5px;
        }

        .bg-si {
            background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
            color: #166534;
            box-shadow: 0 2px 8px rgba(22, 163, 74, 0.15);
        }

        .bg-no {
            background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
            color: #991b1b;
            box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15);
        }

        .btn-renovar {
            background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
            color: white;
            border: none;
            padding: 10px 18px;
            border-radius: 10px;
            font-weight: 700;
            cursor: pointer;
            font-size: 0.8rem;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
        }

        .btn-renovar:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
        }

        .btn-derenovar {
            background: #fef2f2;
            color: #dc2626;
            border: 1px dashed #fca5a5;
            padding: 6px 12px;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            font-size: 0.75rem;
            transition: all 0.3s ease;
            margin-left: 8px;
        }

        .btn-derenovar:hover {
            background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
            color: white;
            border-color: transparent;
            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
        }

        /* ========== FORMS ========== */
        .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 24px;
            margin-bottom: 30px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .form-group label {
            font-weight: 600;
            color: #475569;
            font-size: 0.9rem;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            padding: 14px 18px;
            border-radius: 14px;
            border: 2px solid #e2e8f0;
            font-size: 1rem;
            font-weight: 500;
            transition: all 0.3s ease;
            background: white;
            outline: none;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
        }

        /* ========== TABS ========== */
        .tab-content {
            display: none;
            animation: slideIn 0.35s ease;
        }

        .tab-content.active {
            display: flex;
            flex-direction: column;
            flex: 1;
            background: white;
            border-radius: 30px;
            padding: 28px;
            overflow-y: auto;
            min-height: 0;
        }

        /* Dashboard: sin fondo propio, el home-content-card es la carta blanca */
        #tab-dashboard.tab-content.active {
            background: transparent;
            padding: 0;
            overflow: hidden;
            min-height: 0;
        }

        /* Home content card (wraps header + bento) */
        .home-content-card {
            flex: 1;
            min-height: 0;
            background: white;
            border-radius: 30px;
            padding: 28px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        @keyframes slideIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ========== BUTTONS ========== */
        .btn-editor {
            background: white;
            border: 2px solid var(--editor);
            color: var(--editor);
            padding: 12px 24px;
            border-radius: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-editor:hover {
            background: rgba(139, 92, 246, 0.1);
        }

        .btn-editor.active {
            background: linear-gradient(135deg, var(--editor) 0%, #7c3aed 100%);
            color: white;
            border-color: transparent;
            box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary) 0%, var(--purple) 100%);
            color: white;
            border: none;
            padding: 14px 28px;
            border-radius: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1rem;
            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5);
        }

        .btn-secondary {
            background: linear-gradient(135deg, #64748b 0%, #475569 100%);
            color: white;
            border: none;
            padding: 14px 28px;
            border-radius: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1rem;
            box-shadow: 0 4px 15px rgba(100, 116, 139, 0.3);
        }

        .btn-secondary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(100, 116, 139, 0.4);
        }

        /* Botones de Acción para Barra */
        .btn-action {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 16px 28px;
            border: none;
            border-radius: 16px;
            font-weight: 700;
            font-size: 1.05rem;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .btn-action::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.5s;
        }

        .btn-action:hover::before {
            left: 100%;
        }

        .btn-action:hover {
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
        }

        .btn-action:active {
            transform: translateY(-2px) scale(1.01);
        }

        .btn-icon {
            font-size: 1.4rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            backdrop-filter: blur(10px);
        }

        .btn-label {
            font-weight: 800;
            letter-spacing: 0.3px;
        }

        .btn-producto {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
        }

        .btn-producto:hover {
            box-shadow: 0 8px 30px rgba(16, 185, 129, 0.4);
        }

        .btn-pos {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: white;
        }

        .btn-pos:hover {
            box-shadow: 0 8px 30px rgba(245, 158, 11, 0.4);
        }

        .btn-full {
            width: 100%;
            margin-top: 25px;
            padding: 16px 28px;
            font-size: 1.05rem;
        }

        .btn-success {
            background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
            color: white;
            border: none;
            padding: 14px 28px;
            border-radius: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1rem;
            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
        }

        .btn-success:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(16, 185, 129, 0.5);
        }

        .btn-small {
            background: white;
            border: 2px solid #e2e8f0;
            color: #475569;
            padding: 8px 16px;
            border-radius: 10px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 0.85rem;
        }

        .btn-small:hover {
            border-color: var(--primary);
            color: var(--primary);
            background: rgba(99, 102, 241, 0.05);
        }

        .btn-filter {
            background: white;
            border: 2px solid #e2e8f0;
            color: #64748b;
            padding: 10px 20px;
            border-radius: 10px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 0.9rem;
        }

        .btn-filter:hover {
            border-color: var(--primary);
            color: var(--primary);
            transform: translateY(-2px);
        }

        .btn-filter.active {
            background: linear-gradient(135deg, var(--primary) 0%, var(--purple) 100%);
            color: white;
            border-color: transparent;
            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
        }

        /* ========== RACHA INDICATOR ========== */
        .racha-indicator {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: white;
            padding: 10px 18px;
            border-radius: 30px;
            font-weight: 800;
            font-size: 0.9rem;
            box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
            transition: all 0.3s ease;
        }

        .racha-indicator:hover {
            transform: scale(1.05);
        }

        .racha-perdida {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
        }

        .racha-fire {
            font-size: 1.2rem;
            animation: fireFlicker 1s ease-in-out infinite;
        }

        @keyframes fireFlicker {
            0%, 100% { transform: scale(1) rotate(-5deg); }
            50% { transform: scale(1.15) rotate(5deg); }
        }

        /* ========== RECOMPENSAS ========== */
        .recompensas-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 20px;
            margin: 25px 0;
        }

        .recompensa-card {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255, 255, 255, 0.5);
            border-radius: 20px;
            padding: 28px;
            text-align: center;
            transition: all 0.4s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .recompensa-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, var(--primary) 0%, var(--purple) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .recompensa-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 20px 40px rgba(99, 102, 241, 0.2);
            border-color: var(--primary);
        }

        .recompensa-card:hover::before {
            opacity: 0.05;
        }

        .recompensa-emoji {
            font-size: 3.5rem;
            margin-bottom: 15px;
            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
            position: relative;
        }

        .recompensa-nombre {
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 8px;
            font-size: 1.1rem;
            position: relative;
        }

        .recompensa-puntos {
            color: #64748b;
            font-size: 0.9rem;
            font-weight: 600;
            position: relative;
        }

        .recompensa-bloqueada {
            opacity: 0.5;
            cursor: not-allowed;
            filter: grayscale(0.5);
        }

        /* ========== ASISTENTES ========== */
        .asistente-lista {
            background: rgba(248, 250, 252, 0.8);
            border-radius: 16px;
            padding: 20px;
            margin-top: 20px;
            max-height: 400px;
            overflow-y: auto;
            border: 1px solid rgba(226, 232, 240, 0.5);
        }

        .asistente-item {
            background: white;
            padding: 16px 20px;
            border-radius: 14px;
            margin-bottom: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            border: 1px solid rgba(226, 232, 240, 0.5);
            transition: all 0.3s ease;
        }

        .asistente-item:hover {
            transform: translateX(5px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }

        .asistente-nombre {
            font-weight: 700;
            color: var(--dark);
        }

        .asistente-hora {
            color: #64748b;
            font-size: 0.85rem;
            font-weight: 600;
        }

        /* ========== QR CONTAINER ========== */
        .qr-container {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(20px);
            padding: 40px;
            border-radius: 24px;
            text-align: center;
            box-shadow: 0 20px 50px rgba(0,0,0,0.1);
            border: 1px solid rgba(255, 255, 255, 0.5);
            margin: 25px auto;
            max-width: 420px;
        }

        /* ========== EVENTO SELECTOR ========== */
        .evento-selector {
            padding: 16px 20px;
            border: 2px solid var(--primary);
            border-radius: 14px;
            font-size: 1rem;
            font-weight: 600;
            width: 100%;
            margin-bottom: 24px;
            background: white;
            cursor: pointer;
            transition: all 0.3s ease;
            outline: none;
        }

        .evento-selector:focus {
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
        }

        /* ========== STATS ========== */
        .stats-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 20px;
            margin-bottom: 25px;
        }

        .stat-box {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            padding: 25px;
            border-radius: 18px;
            text-align: center;
            border: 1px solid rgba(226, 232, 240, 0.5);
            transition: all 0.3s ease;
        }

        .stat-box:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        }

        .stat-label {
            font-size: 0.85rem;
            color: #64748b;
            margin-bottom: 8px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .stat-value {
            font-size: 2.2rem;
            font-weight: 900;
            background: linear-gradient(135deg, var(--primary) 0%, var(--purple) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* ========== LOG ========== */
        .log-entry {
            padding: 16px 20px;
            border-bottom: 1px solid rgba(241, 245, 249, 0.8);
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.2s ease;
        }

        .log-entry:hover {
            background: rgba(99, 102, 241, 0.03);
        }

        .log-user {
            font-weight: 700;
            background: linear-gradient(135deg, var(--primary) 0%, var(--purple) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .log-date {
            font-size: 0.8rem;
            color: #94a3b8;
            font-weight: 600;
        }

        /* ========== IMAGE PREVIEW ========== */
        .imagen-preview {
            max-width: 100%;
            max-height: 300px;
            border-radius: 16px;
            margin: 20px 0;
            border: 2px solid #e2e8f0;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        /* ========== PRODUCTO IMG UPLOAD ZONE ========== */
        .prod-img-zone {
            border: 2px dashed #d1d5db;
            border-radius: 16px;
            cursor: pointer;
            transition: border-color 0.18s, background 0.18s;
            overflow: hidden;
            min-height: 130px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f9fafb;
            position: relative;
        }
        .prod-img-zone:hover, .prod-img-zone.drag-over {
            border-color: #0f0f0f;
            background: #f1f5f9;
        }
        .prod-img-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 28px 20px;
            text-align: center;
            pointer-events: none;
        }
        .prod-img-empty svg { color: #94a3b8; width: 32px; height: 32px; }
        .prod-img-empty p { font-size: 0.88rem; color: #475569; margin: 0; }
        .prod-img-empty p span { color: #0f0f0f; font-weight: 600; text-decoration: underline; }
        .prod-img-empty small { font-size: 0.76rem; color: #94a3b8; }
        .prod-img-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            padding: 28px;
            pointer-events: none;
        }
        .prod-img-loading p { font-size: 0.85rem; color: #475569; margin: 0; }
        .prod-img-spinner {
            width: 28px; height: 28px;
            border: 3px solid #e2e8f0;
            border-top-color: #0f0f0f;
            border-radius: 50%;
            animation: prod-spin 0.7s linear infinite;
        }
        @keyframes prod-spin { to { transform: rotate(360deg); } }
        .prod-img-preview-wrapper { position: relative; width: 100%; }
        .prod-img-preview-wrapper img {
            width: 100%; height: 160px;
            object-fit: cover; display: block;
        }
        .prod-img-overlay {
            position: absolute; inset: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 55%);
            display: flex; align-items: flex-end;
            padding: 12px 16px; gap: 8px;
        }
        .prod-img-overlay svg { color: #fff; width: 16px; height: 16px; flex-shrink: 0; }
        .prod-img-overlay span { color: #fff; font-weight: 600; font-size: 0.82rem; flex: 1; }
        .prod-img-overlay button {
            background: rgba(255,255,255,0.18);
            border: 1px solid rgba(255,255,255,0.5);
            color: #fff; padding: 4px 12px;
            border-radius: 20px; font-size: 0.78rem;
            cursor: pointer; font-weight: 600;
            transition: background 0.15s;
        }
        .prod-img-overlay button:hover { background: rgba(255,255,255,0.35); }

        /* ========== MODAL ========== */
        .modal {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.8);
            backdrop-filter: blur(8px);
            z-index: 10000;
            align-items: center;
            justify-content: center;
            padding: 20px;
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .modal.active {
            display: flex;
        }

        .modal-content {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            padding: 40px;
            border-radius: 28px;
            max-width: 520px;
            width: 100%;
            max-height: 85vh;
            overflow-y: auto;
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
            animation: slideUp 0.4s ease;
        }

        @keyframes slideUp {
            from { opacity: 0; transform: translateY(30px) scale(0.95); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        .modal-content h2 {
            font-size: 1.5rem;
            font-weight: 800;
            margin: 0 0 25px 0;
            color: var(--dark);
        }

        .modal-close {
            float: right;
            font-size: 1.8rem;
            font-weight: bold;
            cursor: pointer;
            color: #94a3b8;
            transition: all 0.3s ease;
            line-height: 1;
        }

        .modal-close:hover {
            color: var(--danger);
            transform: rotate(90deg);
        }

        /* ========== PERFIL ========== */
        .perfil-card {
            max-width: 420px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(20px);
            border-radius: 28px;
            overflow: hidden;
            box-shadow: 0 20px 50px rgba(0,0,0,0.15);
            border: 1px solid rgba(255, 255, 255, 0.5);
        }

        .perfil-header {
            background: linear-gradient(135deg, var(--primary) 0%, var(--purple) 100%);
            padding: 40px;
            text-align: center;
            color: white;
        }

        .avatar {
            width: 90px;
            height: 90px;
            background: rgba(255,255,255,0.2);
            backdrop-filter: blur(10px);
            border-radius: 50%;
            margin: 0 auto 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.2rem;
            font-weight: 800;
            border: 3px solid rgba(255,255,255,0.3);
        }

        .btn-link {
            text-decoration: none;
            padding: 14px;
            border-radius: 14px;
            text-align: center;
            font-weight: 700;
            display: block;
            margin-bottom: 12px;
            color: white;
            transition: all 0.3s ease;
        }

        .btn-link:hover {
            transform: translateY(-2px);
        }

        /* ========== NFC INPUT ========== */
        #nfcInput, #nfcAsistenciaInput, #scannerValeInput {
            padding: 18px 24px;
            font-size: 1.2rem;
            border: 3px solid var(--primary);
            border-radius: 18px;
            width: 100%;
            transition: all 0.3s ease;
            font-weight: 600;
            background: white;
            outline: none;
        }

        #nfcInput:focus, #nfcAsistenciaInput:focus, #scannerValeInput:focus {
            border-color: var(--purple);
            box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.15);
        }

        /* ========== WEB NFC INTERFACE ========== */
        .nfc-sensor-status {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 15px 20px;
            border-radius: 12px;
            background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
            border: 1px solid #bae6fd;
            margin-bottom: 20px;
            font-weight: 600;
        }

        .nfc-sensor-status.nfc-ready {
            background: linear-gradient(135deg, #f0fdf4, #dcfce7);
            border-color: #86efac;
        }

        .nfc-sensor-status.nfc-error {
            background: linear-gradient(135deg, #fef2f2, #fee2e2);
            border-color: #fca5a5;
        }

        .nfc-sensor-status.nfc-scanning {
            background: linear-gradient(135deg, #fefce8, #fef9c3);
            border-color: #fde047;
            animation: nfc-pulse 1.5s ease-in-out infinite;
        }

        @keyframes nfc-pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        .nfc-controls {
            display: flex;
            gap: 12px;
            margin-bottom: 25px;
            flex-wrap: wrap;
        }

        .btn-nfc {
            flex: 1;
            min-width: 140px;
            padding: 15px 20px;
            border: none;
            border-radius: 12px;
            font-weight: 700;
            font-size: 0.95rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .btn-nfc:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .btn-scan {
            background: linear-gradient(135deg, #3b82f6, #2563eb);
            color: white;
        }

        .btn-scan:not(:disabled):hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
        }

        .btn-stop {
            background: linear-gradient(135deg, #ef4444, #dc2626);
            color: white;
        }

        .btn-stop:not(:disabled):hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);
        }

        .btn-write {
            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
            color: white;
        }

        .btn-write:not(:disabled):hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
        }

        .btn-icon {
            font-size: 1.2rem;
        }

        /* NFC Result Card */
        .nfc-result-card {
            background: linear-gradient(135deg, #f8fafc, #f1f5f9);
            border-radius: 20px;
            padding: 25px;
            margin-bottom: 20px;
            border: 1px solid #e2e8f0;
        }

        .nfc-result-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }

        .nfc-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary), var(--purple));
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            font-weight: bold;
        }

        .nfc-socio-info {
            flex: 1;
        }

        .nfc-socio-info h3 {
            margin: 0 0 5px 0;
            font-size: 1.3rem;
            color: var(--dark);
        }

        .nfc-socio-info p {
            margin: 0;
            color: #64748b;
            font-size: 0.9rem;
        }

        .nfc-estado {
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 700;
        }

        .nfc-estado.pagado {
            background: #dcfce7;
            color: #166534;
        }

        .nfc-estado.pendiente {
            background: #fee2e2;
            color: #991b1b;
        }

        .nfc-result-body {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
        }

        .nfc-stat {
            background: white;
            padding: 15px;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        .nfc-stat-icon {
            font-size: 1.5rem;
            display: block;
            margin-bottom: 5px;
        }

        .nfc-stat span:nth-child(2) {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--dark);
            display: block;
        }

        .nfc-stat-label {
            font-size: 0.75rem;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .nfc-vales-list {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #e2e8f0;
        }

        .nfc-vale-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 15px;
            background: white;
            border-radius: 10px;
            margin-bottom: 8px;
            border-left: 4px solid #10b981;
        }

        /* Tarjeta no registrada */
        .nfc-no-registrada {
            background: linear-gradient(135deg, #fef3c7, #fde68a);
            border-radius: 20px;
            padding: 40px;
            text-align: center;
            margin-bottom: 20px;
            border: 2px dashed #f59e0b;
        }

        .nfc-warning-icon {
            font-size: 4rem;
            margin-bottom: 15px;
        }

        .nfc-no-registrada h3 {
            color: #92400e;
            margin-bottom: 10px;
        }

        .nfc-no-registrada p {
            color: #a16207;
            margin-bottom: 20px;
            font-family: monospace;
        }

        /* Live Output */
        .nfc-live-output {
            background: #1e293b;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 20px;
        }

        .nfc-output-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 15px;
            background: #0f172a;
            color: #94a3b8;
            font-size: 0.85rem;
            font-weight: 600;
        }

        .btn-clear-log {
            background: transparent;
            border: 1px solid #475569;
            color: #94a3b8;
            padding: 5px 12px;
            border-radius: 6px;
            font-size: 0.75rem;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-clear-log:hover {
            background: #475569;
            color: white;
        }

        .nfc-log-content {
            padding: 15px;
            max-height: 200px;
            overflow-y: auto;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 0.85rem;
        }

        .nfc-log-entry {
            padding: 6px 10px;
            margin-bottom: 4px;
            border-radius: 4px;
            display: flex;
            gap: 10px;
        }

        .nfc-log-time {
            color: #64748b;
            min-width: 70px;
        }

        .nfc-log-info {
            background: rgba(59, 130, 246, 0.15);
            color: #60a5fa;
        }

        .nfc-log-success {
            background: rgba(34, 197, 94, 0.15);
            color: #4ade80;
        }

        .nfc-log-error {
            background: rgba(239, 68, 68, 0.15);
            color: #f87171;
        }

        .nfc-log-warning {
            background: rgba(234, 179, 8, 0.15);
            color: #facc15;
        }

        .nfc-log-read {
            background: rgba(139, 92, 246, 0.15);
            color: #a78bfa;
        }

        /* Manual Input */
        .nfc-manual-input {
            padding-top: 20px;
            border-top: 1px dashed #e2e8f0;
        }

        .nfc-manual-input label {
            display: block;
            font-size: 0.85rem;
            color: #64748b;
            margin-bottom: 8px;
        }

        /* ========== BOTONES NFC ESCANEO ========== */
        .btn-escanear-nfc {
            transition: all 0.3s ease;
        }

        .btn-escanear-nfc:hover:not(:disabled) {
            transform: scale(1.05);
            box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
        }

        .btn-escanear-nfc:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            animation: pulso-nfc 1.5s ease-in-out infinite;
        }

        @keyframes pulso-nfc {
            0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
            50% { box-shadow: 0 0 0 20px rgba(99, 102, 241, 0); }
        }

        .nfc-estado {
            font-size: 0.9rem;
        }

        /* Estilos para lista de asistentes */
        .asistente-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 15px;
            background: #f0fdf4;
            border-radius: 10px;
            margin-bottom: 8px;
            border-left: 4px solid #22c55e;
            animation: fadeIn 0.5s ease;
        }

        .asistente-nombre {
            font-weight: 600;
            color: #166534;
        }

        .asistente-hora {
            font-size: 0.85rem;
            color: #64748b;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ========== SCROLLBAR ========== */
        * { scrollbar-width: thin; scrollbar-color: #d1d5db transparent; }

        ::-webkit-scrollbar { width: 5px; height: 5px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #b0b7c3; }

        /* ========== MENU HAMBURGUESA ========== */
        .menu-toggle {
            display: none;
            width: 38px;
            height: 38px;
            background: #0f0f0f;
            border: none;
            color: white;
            border-radius: 50%;
            cursor: pointer;
            flex-shrink: 0;
            align-items: center;
            justify-content: center;
            transition: opacity 0.15s;
            padding: 0;
        }

        .menu-toggle:hover { opacity: 0.8; }

        .menu-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: 9998;
            backdrop-filter: blur(3px);
        }

        .menu-overlay.active {
            display: block;
        }

        .menu-close {
            display: none;
            position: absolute;
            top: calc(20px + env(safe-area-inset-top));
            right: 20px;
            background: #0f0f0f;
            border: none;
            color: white;
            width: 38px;
            height: 38px;
            min-width: 38px;
            min-height: 38px;
            max-width: 38px;
            max-height: 38px;
            padding: 0;
            border-radius: 50%;
            cursor: pointer;
            transition: opacity 0.2s;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .menu-close:hover { opacity: 0.8; }

        /* ========== SUB-TABS ========== */
        .sub-tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            border-bottom: 2px solid #e2e8f0;
            padding-bottom: 15px;
            flex-wrap: wrap;
        }

        .sub-tab {
            padding: 12px 24px;
            background: white;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }

        .sub-tab:hover {
            border-color: var(--primary);
        }

        .sub-tab.active {
            background: linear-gradient(135deg, var(--primary), var(--purple));
            color: white;
            border-color: transparent;
        }

        .subtab-content {
            display: none;
        }

        .subtab-content.active {
            display: block;
        }

        /* ========== FORMULARIOS REDESIGN ========== */
        /* Sub-tab layout — mismo patrón que Socios */
        #tab-formularios .sub-tabs { display:flex; gap:8px; flex-wrap:wrap; background:none; border:none; padding:0; margin-bottom:20px; }
        #tab-formularios .sub-tab { background:#f7f7f7; color:#000; border:none; border-radius:20px; padding:8px 16px; font-family:'Syne',sans-serif; font-weight:700; font-size:14px; cursor:pointer; transition:background .15s,color .15s; }
        #tab-formularios .sub-tab.active { background:#000; color:#fff; }
        #tab-formularios .sub-tab:hover:not(.active) { background:#e5e5e5; }
        #tab-formularios .mb-listado-subtab { display:none; flex-direction:column; }
        #tab-formularios .mb-listado-subtab.active { display:flex !important; }
        #tab-formularios .mb-secondary-subtab { display:none; }
        #tab-formularios .mb-secondary-subtab.active { display:block; }
        /* Panel derecho — strips y cards */
        .fm-panel-strip { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; background:#fff; border-radius:24px; padding:18px 20px; margin-bottom:10px; flex-shrink:0; }
        .fm-strip-title { font-family:'Syne',sans-serif; font-weight:700; font-size:17px; color:#000; margin:0 0 4px; }
        .fm-strip-badge { font-size:0.78rem; color:#94a3b8; }
        .fm-toggle-label { display:flex; align-items:center; gap:5px; cursor:pointer; font-size:0.85rem; white-space:nowrap; }
        .fm-section-card { background:#fff; border-radius:24px; padding:20px; margin-bottom:10px; }
        .fm-editor-card { min-height:200px; padding:12px !important; }
        .fm-editor-title { font-family:'Syne',sans-serif; font-weight:700; font-size:14px; color:#000; }
        .fm-details-summary { font-family:'Syne',sans-serif; font-weight:700; font-size:14px; color:#475569; cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; user-select:none; }
        .fm-count-badge { background:#e2e8f0; border-radius:20px; padding:1px 7px; font-size:0.78rem; margin-left:4px; font-family:'Inter',sans-serif; }
        .fm-btn-guardar { width:100%; background:#000; color:#fff; border:none; border-radius:20px; padding:12px; font-family:'Syne',sans-serif; font-weight:700; font-size:15px; cursor:pointer; margin-top:4px; transition:background .15s; }
        .fm-btn-guardar:hover { background:#222; }
        /* Stat chips (sub-tab respuestas) */
        .fm-stat-chip { padding:10px 16px; border-radius:14px; text-align:center; flex:1; min-width:80px; }
        .fm-stat-blue { background:#e0f2fe; } .fm-stat-purple { background:#f3e8ff; } .fm-stat-cyan { background:#ecfeff; }
        .fm-stat-num { font-size:1.5rem; font-weight:700; color:#0369a1; }
        .fm-stat-purple .fm-stat-num { color:#7c3aed; } .fm-stat-cyan .fm-stat-num { color:#0891b2; }
        .fm-stat-label { font-size:0.78rem; color:#64748b; }
        /* Badges de tabla */
        .fm-badge-socios  { background:#f3e8ff; color:#7c3aed; padding:3px 10px; border-radius:20px; font-size:0.75rem; font-weight:600; }
        .fm-badge-general { background:#ecfeff; color:#0891b2; padding:3px 10px; border-radius:20px; font-size:0.75rem; font-weight:600; }
        .fm-badge-activo  { background:#dcfce7; color:#16a34a; padding:3px 10px; border-radius:20px; font-size:0.75rem; font-weight:600; }
        .fm-badge-cerrado { background:#f1f5f9; color:#64748b; padding:3px 10px; border-radius:20px; font-size:0.75rem; font-weight:600; }
        .fm-badge-pausado { background:#fef9c3; color:#854d0e; padding:3px 10px; border-radius:20px; font-size:0.75rem; font-weight:600; }
        .mb-table tbody tr.fm-row-selected { background:rgba(0,0,0,.06); }
        /* ── ftab-bar (interno del panel) ── */
        .ftab-bar { display:flex; border-bottom:2px solid #e2e8f0; margin-bottom:16px; gap:0; }
        .ftab-btn { padding:9px 18px; border:none; background:none; font-size:0.88rem; font-weight:500; cursor:pointer; color:#64748b; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .15s; white-space:nowrap; }
        .ftab-btn:hover { color:#6366f1; }
        .ftab-btn.active { color:#6366f1; border-bottom-color:#6366f1; font-weight:600; }
        /* ── Editor de bloques moderno ── */
        .fm-block-card { background:#fff; border:1.5px solid #e2e8f0; border-radius:14px; padding:14px 16px; margin-bottom:10px; transition:border-color .15s,box-shadow .15s; }
        .fm-block-card:hover { border-color:#a5b4fc; box-shadow:0 2px 12px rgba(99,102,241,.08); }
        .fm-block-header { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
        .fm-block-drag { cursor:grab; color:#cbd5e1; font-size:18px; flex-shrink:0; user-select:none; }
        .fm-block-drag:active { cursor:grabbing; }
        .fm-block-type-badge { font-size:0.70rem; font-weight:700; padding:3px 9px; border-radius:12px; background:#e0e7ff; color:#3730a3; flex-shrink:0; font-family:'Syne',sans-serif; letter-spacing:.02em; }
        .fm-badge-text   { background:#e0e7ff; color:#3730a3; }
        .fm-badge-select { background:#fce7f3; color:#be185d; }
        .fm-badge-number { background:#fef3c7; color:#92400e; }
        .fm-badge-date   { background:#dcfce7; color:#166534; }
        .fm-badge-scale  { background:#ffedd5; color:#9a3412; }
        .fm-badge-likert { background:#f3e8ff; color:#6b21a8; }
        .fm-block-label-input { flex:1; background:#f7f7f7; border:none; border-radius:999px; padding:8px 14px; font-family:'Inter',sans-serif; font-size:13px; color:#000; outline:none; transition:box-shadow .15s; }
        .fm-block-label-input:focus { box-shadow:0 0 0 2px rgba(99,102,241,.25); }
        .fm-block-label-input::placeholder { color:#94a3b8; }
        .fm-block-del { background:none; border:none; width:28px; height:28px; border-radius:8px; cursor:pointer; color:#cbd5e1; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .12s,color .12s; }
        .fm-block-del:hover { background:#fee2e2; color:#dc2626; }
        .fm-type-chips { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-bottom:10px; }
        .fm-type-chip { border:2px solid #e2e8f0; background:#fff; color:#64748b; border-radius:10px; padding:7px 4px; cursor:pointer; font-size:0.70rem; font-weight:600; line-height:1.3; display:flex; flex-direction:column; align-items:center; gap:2px; transition:all .13s; font-family:'Inter',sans-serif; }
        .fm-type-chip:hover { border-color:#a5b4fc; color:#4f46e5; }
        .fm-type-chip.active { border-color:#6366f1; background:#eef2ff; color:#4f46e5; }
        .fm-type-chip-icon { font-size:1.1rem; }
        .fm-block-footer { display:flex; justify-content:flex-end; padding-top:10px; border-top:1px solid #f1f5f9; margin-top:6px; }
        .fm-required-toggle { display:flex; align-items:center; gap:6px; font-size:0.82rem; color:#64748b; cursor:pointer; }
        .fm-extra-box { margin-top:10px; padding:12px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; }
        .fm-extra-label { font-size:0.78rem; color:#64748b; font-weight:600; display:block; margin-bottom:6px; font-family:'Syne',sans-serif; text-transform:uppercase; letter-spacing:.04em; }
        .fm-options-input { width:100%; background:#fff; border:1.5px solid #e2e8f0; border-radius:10px; padding:8px 12px; font-family:'Inter',sans-serif; font-size:0.84rem; color:#000; outline:none; box-sizing:border-box; transition:border-color .15s; }
        .fm-options-input:focus { border-color:#a5b4fc; }
        .fm-block-empty { text-align:center; padding:24px 16px; color:#94a3b8; border:2px dashed #e2e8f0; border-radius:12px; font-size:0.85rem; }
        /* Formbricks survey builder */
        .sq-card { background:#f8fafc; border:1.5px solid #e2e8f0; border-radius:12px; padding:14px 16px; margin-bottom:10px; position:relative; transition:border-color .15s; }
        .sq-card:hover { border-color:#a5b4fc; }
        .sq-card .sq-header { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
        .sq-badge { font-size:0.72rem; font-weight:700; padding:2px 8px; border-radius:20px; background:#e0e7ff; color:#3730a3; }
        .sq-del { position:absolute; top:10px; right:10px; background:none; border:none; color:#f87171; cursor:pointer; font-size:1rem; padding:2px; }
        .sq-choices { margin-top:8px; }
        .sq-choice-row { display:flex; gap:6px; align-items:center; margin-bottom:4px; }
        .sq-choice-row input[type=text] { flex:1; padding:5px 8px; border:1px solid #e2e8f0; border-radius:6px; font-size:0.85rem; }
        .sq-add-choice { background:none; border:1.5px dashed #c4b5fd; color:#7c3aed; font-size:0.8rem; padding:4px 10px; border-radius:6px; cursor:pointer; margin-top:4px; width:100%; }
        .sq-type-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; align-items:center; font-size:0.83rem; color:#64748b; }
        .sq-add-bar { display:flex; gap:8px; flex-wrap:wrap; padding-top:4px; }
        .sq-add-btn { background:#f0f4ff; color:#4f46e5; border:1.5px solid #c7d2fe; border-radius:8px; padding:6px 12px; font-size:0.82rem; font-weight:600; cursor:pointer; transition:background .15s; }
        .sq-add-btn:hover { background:#e0e7ff; }

        /* ========== TPV STYLES ========== */
        .tpv-vale-item {
            background: white;
            border: 2px solid #e2e8f0;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s;
        }

        .tpv-vale-item:hover {
            border-color: var(--primary);
            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.15);
        }

        .tpv-btn-canjear {
            background: linear-gradient(135deg, var(--success), #059669);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 12px;
            font-weight: 700;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s;
        }

        .tpv-btn-canjear:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(34, 197, 94, 0.4);
        }

        /* ========== CARNET SECTIONS ========== */
        .carnet-section {
            background: rgba(255,255,255,0.9);
            border-radius: 16px;
            padding: 20px;
            margin: 20px 0;
        }

        .carnet-section h3 {
            margin: 0 0 15px 0;
            font-size: 1.1rem;
            color: var(--dark);
        }

        .carnet-vale-card {
            background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(168,85,247,0.1));
            border: 2px solid rgba(99,102,241,0.2);
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 10px;
            text-align: center;
        }

        .carnet-vale-titulo {
            font-weight: 700;
            color: var(--primary);
        }

        .carnet-vale-usos {
            background: var(--primary);
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            display: inline-block;
            margin-top: 8px;
        }

        .evento-countdown {
            background: linear-gradient(135deg, var(--primary), var(--purple));
            color: white;
            border-radius: 16px;
            padding: 20px;
            text-align: center;
        }

        .countdown-title {
            font-weight: 700;
            font-size: 1.1rem;
            margin-bottom: 10px;
        }

        .countdown-timer {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 15px;
        }

        .countdown-item {
            text-align: center;
        }

        .countdown-value {
            font-size: 2rem;
            font-weight: 800;
        }

        .countdown-label {
            font-size: 0.75rem;
            opacity: 0.8;
        }

        /* ========== RESPONSIVE ========== */
        @media (max-width: 900px) {
            /* Evitar scroll horizontal en toda la página */
            html, body {
                overflow-x: hidden;
                max-width: 100vw;
            }

            /* En móvil: overlay vuelve a columna y header visible */
            .overlay {
                flex-direction: column;
                overflow-x: hidden;
                padding: 0;
                padding-bottom: env(safe-area-inset-bottom);
            }

            header {
                display: flex;
                align-items: center;
                gap: 12px;
                background: rgba(255, 255, 255, 0.95);
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
                padding: 10px 14px;
                margin: calc(14px + env(safe-area-inset-top)) 14px 0;
                border-radius: 999px;
                box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
                position: sticky;
                top: calc(14px + env(safe-area-inset-top));
                z-index: 50;
                order: -2;
            }

            .menu-toggle { display: flex; }

            .header-logo-mobile {
                flex: 1;
                height: 18px;
                width: auto;
                object-fit: contain;
                object-position: left center;
            }

            .menu-toggle {
                display: flex;
            }

            .menu-close {
                display: flex;
            }

            /* Sidebar en móvil: slide-in desde la izquierda */
            nav {
                position: fixed;
                top: 0;
                left: -100%;
                width: 82%;
                max-width: 300px;
                height: 100%;
                height: 100dvh;
                border-radius: 0 30px 30px 0;
                z-index: 9999;
                transition: left 0.3s ease;
                box-shadow: 6px 0 30px rgba(0, 0, 0, 0.18);
                order: 0;
                overflow-y: auto;
                overflow-x: hidden;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
            }

            nav.open { left: 0; }

            .sidebar-brand { padding-top: 60px; }

            .menu-close {
                position: absolute;
                top: 16px;
                right: 16px;
            }
        }

        @media (max-width: 768px) {
            .login-card {
                padding: 40px 28px;
            }

            .login-card img {
                width: 130px;
                height: auto;
            }

            .container {
                padding: 0;
                margin: 0;
            }

            .card {
                padding: 20px;
            }

            .box-value {
                font-size: 2.8rem;
            }

            .sub-tabs {
                flex-direction: column;
            }

            .sub-tab {
                width: 100%;
                text-align: center;
            }

            .tpv-vale-item {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }

            .tpv-btn-canjear {
                width: 100%;
            }
        }

        @media (max-width: 480px) {
            header {
                padding: 10px 12px;
            }

            .menu-toggle {
                display: flex;
            }
        }

        /* ========== VALES GRID ========== */
        .vales-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
        }

        .vale-card {
            background: white;
            border-radius: 20px;
            padding: 24px;
            border: 2px solid #e2e8f0;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .vale-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(99, 102, 241, 0.15);
            border-color: var(--primary);
        }

        .vale-card.inactivo {
            opacity: 0.5;
            filter: grayscale(0.5);
        }

        .vale-titulo {
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 8px;
            color: var(--dark);
        }

        .vale-descripcion {
            color: #64748b;
            font-size: 0.9rem;
            margin-bottom: 15px;
            line-height: 1.5;
        }

        .vale-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.85rem;
        }

        .vale-tipo {
            background: linear-gradient(135deg, var(--primary) 0%, var(--purple) 100%);
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-weight: 600;
            font-size: 0.75rem;
        }

        .vale-usos {
            color: #64748b;
            font-weight: 600;
        }

        /* ========== TPV STYLES ========== */
        .tpv-vale-item {
            background: white;
            border: 2px solid #e2e8f0;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 15px;
        }

        .tpv-vale-info {
            flex: 1;
        }

        .tpv-vale-titulo {
            font-weight: 700;
            font-size: 1.1rem;
            margin-bottom: 5px;
        }

        .tpv-vale-usos {
            color: #64748b;
            font-size: 0.9rem;
        }

        .tpv-btn-canjear {
            background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 12px;
            font-weight: 700;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            white-space: nowrap;
        }

        .tpv-btn-canjear:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
        }

        .tpv-btn-canjear:active {
            transform: scale(0.98);
        }

        /* ========== LISTA SOCIOS ASIGNAR ========== */
        .socio-asignar-item {
            padding: 12px 16px;
            border-bottom: 1px solid #f1f5f9;
            cursor: pointer;
            transition: background 0.2s ease;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .socio-asignar-item:hover {
            background: #f8fafc;
        }

        .socio-asignar-item:last-child {
            border-bottom: none;
        }

        /* ========== STATS ROW ========== */
        .stats-row {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }

        .stat-box {
            flex: 1;
            min-width: 100px;
            background: #f8fafc;
            padding: 15px;
            border-radius: 12px;
            text-align: center;
        }

        .stat-label {
            font-size: 0.8rem;
            color: #64748b;
            margin-bottom: 5px;
        }

        .stat-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
        }

        /* ========== CARNET VIRTUAL - VALES ========== */
        .carnet-vales-section {
            margin-top: 25px;
        }

        .carnet-vale-card {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
            border: 2px solid rgba(99, 102, 241, 0.2);
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 12px;
            text-align: center;
        }

        .carnet-vale-titulo {
            font-weight: 700;
            font-size: 1.1rem;
            color: var(--primary);
            margin-bottom: 8px;
        }

        .carnet-vale-usos {
            background: var(--primary);
            color: white;
            padding: 6px 16px;
            border-radius: 20px;
            font-weight: 700;
            font-size: 0.85rem;
            display: inline-block;
        }

        .carnet-vale-exp {
            color: #64748b;
            font-size: 0.8rem;
            margin-top: 10px;
        }

        .btn-success {
            background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
        }

        .btn-danger {
            background: linear-gradient(135deg, var(--danger) 0%, #dc2626 100%);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-danger:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
        }

        /* ========== VOTACIONES — nuevo layout ========== */
        .vot-stats-row { display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
        .vot-chip { display:flex; align-items:center; gap:6px; background:#f1f5f9; border-radius:20px; padding:5px 14px; font-size:13px; font-weight:600; color:#475569; }
        .vot-chip-dot { width:8px; height:8px; border-radius:50%; }
        .vot-chip-dot.activa { background:#16a34a; }
        .vot-chip-dot.cerrada { background:#dc2626; }
        /* Context menu */
        .vot-ctx-menu { position:fixed; background:#fff; border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,.14); padding:6px; min-width:190px; z-index:9999; }
        .vot-ctx-item { display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; padding:9px 12px; border-radius:8px; font-family:'Inter',sans-serif; font-size:13px; font-weight:500; color:#1e293b; cursor:pointer; text-align:left; transition:background .12s; }
        .vot-ctx-item:hover { background:#f1f5f9; }
        .vot-ctx-item.danger { color:#dc2626; }
        .vot-ctx-item.danger:hover { background:#fef2f2; }
        .vot-ctx-sep { height:1px; background:#f1f5f9; margin:4px 0; }
        /* Estado badge en tabla */
        .vot-badge { display:inline-block; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:700; }
        .vot-badge.activa { background:#dcfce7; color:#166534; }
        .vot-badge.pausada { background:#fef3c7; color:#92400e; }
        .vot-badge.cerrada { background:#fee2e2; color:#991b1b; }
        /* Detail panel body */
        .vot-detail-section { background:#f8fafc; border-radius:14px; padding:16px; }
        .vot-detail-label { font-size:11px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
        .vot-detail-val { font-size:14px; font-weight:600; color:#1e293b; }
        .vot-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
        .vot-stat-box { background:#f8fafc; border-radius:12px; padding:14px; text-align:center; }
        .vot-stat-box .vot-num { font-family:'Syne',sans-serif; font-size:26px; font-weight:700; color:#0f0f0f; }
        .vot-stat-box .vot-lbl { font-size:11px; color:#94a3b8; margin-top:2px; }
        /* Big footer toggle button */
        .vot-footer-btn { width:100%; padding:14px; border:none; border-radius:20px; font-family:'Syne',sans-serif; font-weight:700; font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:background .15s; }
        .vot-footer-btn.abrir { background:#000; color:#fff; }
        .vot-footer-btn.cerrar { background:#fee2e2; color:#991b1b; }
        .vot-footer-btn.pausar { background:#fef3c7; color:#92400e; }
        /* Row action btn */
        .vot-row-btn { background:none; border:none; cursor:pointer; padding:4px 6px; border-radius:6px; opacity:.4; transition:opacity .12s; display:flex; align-items:center; }
        .vot-row-btn:hover { opacity:1; background:rgba(0,0,0,.06); }

        /* ========== ESTILOS VOTACIONES (legado) ========== */
        .stats-votaciones {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            transition: transform 0.2s;
        }

        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .stat-icon { font-size: 2.5rem; }

        .stat-info {
            display: flex;
            flex-direction: column;
        }

        .stat-label {
            font-size: 0.85rem;
            color: #64748b;
            margin-bottom: 4px;
        }

        .stat-value {
            font-size: 2rem;
            font-weight: 800;
            color: var(--primary);
        }

        .votaciones-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .votacion-card {
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
            transition: all 0.3s;
        }

        .votacion-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        }

        .votacion-imagen {
            width: 100%;
            height: 160px;
            object-fit: cover;
            background: linear-gradient(135deg, var(--primary) 0%, #a855f7 100%);
        }

        .votacion-body { padding: 20px; }

        .votacion-header {
            display: flex;
            justify-content: space-between;
            align-items: start;
            margin-bottom: 12px;
        }

        .votacion-titulo {
            font-size: 1.1rem;
            font-weight: 700;
            color: #1e293b;
            line-height: 1.3;
            flex: 1;
        }

        .badge-estado {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            white-space: nowrap;
        }

        .badge-estado.activa { background: #dcfce7; color: #166534; }
        .badge-estado.pausada { background: #fef3c7; color: #92400e; }
        .badge-estado.cerrada { background: #fee2e2; color: #991b1b; }

        .votacion-descripcion {
            font-size: 0.9rem;
            color: #64748b;
            margin-bottom: 15px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .votacion-stats {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;
            padding: 12px;
            background: #f8fafc;
            border-radius: 8px;
        }

        .votacion-stat {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.9rem;
        }

        .votacion-stat strong {
            color: var(--primary);
            font-weight: 700;
        }

        .votacion-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .btn-accion {
            flex: 1;
            min-width: 100px;
            padding: 8px 12px;
            border-radius: 8px;
            border: none;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-activar { background: #dcfce7; color: #166534; }
        .btn-activar:hover { background: #bbf7d0; }
        .btn-pausar { background: #fef3c7; color: #92400e; }
        .btn-pausar:hover { background: #fde68a; }
        .btn-cerrar-vot { background: #fee2e2; color: #991b1b; }
        .btn-cerrar-vot:hover { background: #fecaca; }
        .btn-resultados { background: #e0e7ff; color: #3730a3; }
        .btn-resultados:hover { background: #c7d2fe; }
        .btn-proyectar { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; }
        .btn-proyectar:hover { transform: scale(1.05); box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); }
        .btn-editar-vot { background: #e0f2fe; color: #075985; }
        .btn-editar-vot:hover { background: #bae6fd; }
        .btn-eliminar-vot { background: #fef2f2; color: #dc2626; }
        .btn-eliminar-vot:hover { background: #fecaca; }
        .btn-resetear-vot { background: #fff7ed; color: #c2410c; }
        .btn-resetear-vot:hover { background: #ffedd5; }

        /* Botones de acciones en tabla de eventos */
        .btn-evento-accion {
            padding: 6px 12px;
            border-radius: 6px;
            border: none;
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .btn-evento-accion.btn-asistentes {
            background: #e0f2fe;
            color: #0369a1;
        }
        .btn-evento-accion.btn-asistentes:hover {
            background: #bae6fd;
        }
        .btn-evento-accion.btn-editar {
            background: #fef3c7;
            color: #b45309;
        }
        .btn-evento-accion.btn-editar:hover {
            background: #fde68a;
        }
        .btn-evento-accion.btn-borrar {
            background: #fef2f2;
            color: #dc2626;
        }
        .btn-evento-accion.btn-borrar:hover {
            background: #fecaca;
        }

        .opcion-item {
            display: flex;
            gap: 10px;
            align-items: start;
            padding: 15px;
            background: #f8fafc;
            border-radius: 10px;
            border: 2px solid #e2e8f0;
            margin-bottom: 12px;
        }

        .opcion-numero {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            background: var(--primary);
            color: white;
            border-radius: 50%;
            font-weight: 700;
            flex-shrink: 0;
        }

        .opcion-fields {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .opcion-fields input {
            width: 100%;
            padding: 10px;
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            font-size: 0.95rem;
        }

        .btn-eliminar-opcion {
            background: #fee2e2;
            color: #991b1b;
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.2rem;
            flex-shrink: 0;
            transition: all 0.2s;
        }

        .btn-eliminar-opcion:hover {
            background: #fecaca;
            transform: rotate(90deg);
        }

        .barra-ciego {
            background: rgba(255,255,255,0.05);
            border-radius: 20px;
            overflow: hidden;
            height: 80px;
            position: relative;
        }

        .barra-progreso-ciego {
            height: 100%;
            background: linear-gradient(90deg, rgba(96, 165, 250, 0.8) 0%, rgba(167, 139, 250, 0.8) 100%);
            transition: width 1s ease-out;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            font-weight: 900;
            box-shadow: 0 0 30px rgba(96, 165, 250, 0.5);
        }

        .pulso {
            animation: pulsar 2s infinite;
        }

        @keyframes pulsar {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(1.2); }
        }

        .barra-visible {
            background: white;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            padding: 20px;
            transition: all 0.3s;
        }

        .barra-visible.ganadora {
            border-color: var(--success);
            background: linear-gradient(90deg, rgba(16, 185, 129, 0.05) 0%, rgba(16, 185, 129, 0.1) 100%);
            box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
        }

        .votacion-socio button {
            position: relative;
            overflow: hidden;
        }

        .votacion-socio button::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(99, 102, 241, 0.2);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }

        .votacion-socio button:active::before {
            width: 300px;
            height: 300px;
        }

        .votacion-votada {
            animation: fadeInVoto 0.5s ease-out;
        }

        @keyframes fadeInVoto {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @media (max-width: 768px) {
            .votaciones-grid { grid-template-columns: 1fr; }
            .votacion-actions { flex-direction: column; }
            .btn-accion { width: 100%; }
            .votacion-socio button { font-size: 0.95rem; padding: 15px; }
        }

        /* ========== SISTEMA DE NOTIFICACIONES TOAST ========== */
        .toast-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 99999;
            display: flex;
            flex-direction: column-reverse;
            gap: 10px;
            max-width: 380px;
            pointer-events: none;
        }

        .toast {
            background: white;
            border-radius: 12px;
            padding: 14px 20px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
            display: flex;
            align-items: flex-start;
            gap: 12px;
            animation: toastSlideIn 0.3s ease-out;
            pointer-events: auto;
            border-left: 4px solid #6366f1;
            max-width: 100%;
        }

        .toast.success {
            border-left-color: #10b981;
        }

        .toast.error {
            border-left-color: #ef4444;
        }

        .toast.warning {
            border-left-color: #f59e0b;
        }

        .toast.info {
            border-left-color: #6366f1;
        }

        .toast-icon {
            font-size: 1.3rem;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .toast-content {
            flex: 1;
            min-width: 0;
        }

        .toast-title {
            font-weight: 700;
            font-size: 0.95rem;
            color: #1e293b;
            margin-bottom: 2px;
        }

        .toast-message {
            font-size: 0.85rem;
            color: #64748b;
            line-height: 1.4;
            word-wrap: break-word;
        }

        .toast-close {
            background: none;
            border: none;
            color: #94a3b8;
            cursor: pointer;
            padding: 0;
            font-size: 1.2rem;
            line-height: 1;
            flex-shrink: 0;
            transition: color 0.2s;
        }

        .toast-close:hover {
            color: #64748b;
        }

        .toast.hiding {
            animation: toastSlideOut 0.3s ease-in forwards;
        }

        @keyframes toastSlideIn {
            from {
                opacity: 0;
                transform: translateX(100px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes toastSlideOut {
            from {
                opacity: 1;
                transform: translateX(0);
            }
            to {
                opacity: 0;
                transform: translateX(100px);
            }
        }

        @media (max-width: 480px) {
            .toast-container {
                left: 10px;
                right: 10px;
                bottom: 10px;
                max-width: none;
            }
        }

        /* ========== EMAIL SECTION STYLES ========== */
        .email-sub-tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 25px;
            flex-wrap: wrap;
        }

        .email-sub-tab {
            padding: 12px 24px;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            background: white;
            color: #64748b;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .email-sub-tab:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

        .email-sub-tab.active {
            background: linear-gradient(135deg, var(--primary) 0%, var(--purple) 100%);
            color: white;
            border-color: transparent;
        }

        .email-subtab-content {
            display: none;
        }

        .email-subtab-content.active {
            display: block;
        }

        .email-template-card {
            background: white;
            border-radius: 16px;
            padding: 20px;
            border: 2px solid #e2e8f0;
            transition: all 0.3s ease;
            margin-bottom: 15px;
        }

        .email-template-card:hover {
            border-color: var(--primary);
            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.15);
        }

        .email-template-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 12px;
        }

        .email-template-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--dark);
        }

        .email-template-badges {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .email-badge {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 700;
        }

        .email-badge.automatico {
            background: #dbeafe;
            color: #1e40af;
        }

        .email-badge.masivo {
            background: #fce7f3;
            color: #9d174d;
        }

        .email-badge.individual {
            background: #f3e8ff;
            color: #6b21a8;
        }

        .email-badge.activo {
            background: #dcfce7;
            color: #166534;
        }

        .email-badge.inactivo {
            background: #fee2e2;
            color: #991b1b;
        }

        .email-template-asunto {
            color: #64748b;
            font-size: 0.9rem;
            margin-bottom: 15px;
        }

        .email-template-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .email-preview-frame {
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 20px;
            max-height: 400px;
            overflow-y: auto;
        }

        .email-stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            margin-bottom: 25px;
        }

        .email-stat-box {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
            padding: 20px;
            border-radius: 16px;
            text-align: center;
        }

        .email-stat-value {
            font-size: 2rem;
            font-weight: 800;
            color: var(--primary);
        }

        .email-stat-label {
            font-size: 0.85rem;
            color: #64748b;
            margin-top: 5px;
        }

        .email-progress-bar {
            height: 8px;
            background: #e2e8f0;
            border-radius: 4px;
            overflow: hidden;
            margin: 15px 0;
        }

        .email-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--primary), var(--purple));
            border-radius: 4px;
            transition: width 0.3s ease;
        }

        .email-log-badge {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 700;
        }

        .email-log-badge.enviado {
            background: #dcfce7;
            color: #166534;
        }

        .email-log-badge.fallido {
            background: #fee2e2;
            color: #991b1b;
        }

        .email-log-badge.pendiente {
            background: #fef3c7;
            color: #92400e;
        }

        .email-filters {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            margin-bottom: 20px;
            align-items: flex-end;
        }

        .email-filter-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .email-filter-group label {
            font-size: 0.8rem;
            color: #64748b;
            font-weight: 600;
        }

        .email-destinatarios-list {
            max-height: 300px;
            overflow-y: auto;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 15px;
            margin: 15px 0;
        }

        .email-destinatario-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 0;
            border-bottom: 1px solid #f1f5f9;
        }

        .email-destinatario-item:last-child {
            border-bottom: none;
        }

        .email-automatico-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px;
            background: white;
            border-radius: 12px;
            border: 1px solid #e2e8f0;
            margin-bottom: 10px;
        }

        .email-automatico-info {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .email-automatico-nombre {
            font-weight: 700;
            color: var(--dark);
        }

        .email-automatico-trigger {
            font-size: 0.85rem;
            color: #64748b;
        }

        .email-automatico-actions {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .email-toggle {
            position: relative;
            width: 50px;
            height: 26px;
        }

        .email-toggle input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .email-toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #e2e8f0;
            transition: 0.3s;
            border-radius: 26px;
        }

        .email-toggle-slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: 0.3s;
            border-radius: 50%;
        }

        .email-toggle input:checked + .email-toggle-slider {
            background: linear-gradient(135deg, var(--primary) 0%, var(--purple) 100%);
        }

        .email-toggle input:checked + .email-toggle-slider:before {
            transform: translateX(24px);
        }

        .email-grid-2col {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 25px;
        }

        @media (max-width: 900px) {
            .email-grid-2col {
                grid-template-columns: 1fr;
            }
        }

        /* Botones de filtro/ordenamiento */
        .btn-filtro {
            padding: 8px 16px;
            background: white;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            color: #64748b;
            font-weight: 600;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-filtro:hover {
            border-color: var(--primary);
            color: var(--primary);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
        }

        .btn-filtro.active {
            background: linear-gradient(135deg, var(--primary) 0%, var(--purple) 100%);
            border-color: var(--primary);
            color: white;
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
        }

        .btn-eliminar {
            padding: 6px 12px;
            border: none;
            border-radius: 6px;
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.2s ease;
            color: white;
        }

        .btn-eliminar:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
        }

        /* ===== FLASH CONFIRMACIÓN ASISTENCIA ===== */
        #flashAsistencia {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 99999;
            background: linear-gradient(135deg, #16a34a, #15803d);
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            text-align: center;
            padding: 40px 20px;
        }
        #flashAsistencia.visible {
            display: flex;
            animation: flashEntrada 0.18s ease;
        }
        @keyframes flashEntrada {
            from { opacity: 0; transform: scale(1.04); }
            to   { opacity: 1; transform: scale(1); }
        }
        .flash-check {
            font-size: clamp(4rem, 20vw, 7rem);
            line-height: 1;
            margin-bottom: 16px;
            animation: flashBounce 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
        }
        @keyframes flashBounce {
            0%   { transform: scale(0.5); }
            60%  { transform: scale(1.15); }
            100% { transform: scale(1); }
        }
        .flash-adelante {
            font-size: clamp(3.5rem, 18vw, 7rem);
            font-weight: 900;
            letter-spacing: -0.03em;
            line-height: 1;
            margin-bottom: 20px;
            text-shadow: 0 4px 24px rgba(0,0,0,0.25);
        }
        .flash-nombre {
            font-size: clamp(1.1rem, 5vw, 1.8rem);
            font-weight: 600;
            opacity: 0.92;
            margin-bottom: 24px;
            max-width: 320px;
        }
        .flash-stats {
            display: flex;
            gap: 40px;
            background: rgba(255,255,255,0.15);
            border-radius: 20px;
            padding: 20px 40px;
        }
        .flash-stat { text-align: center; }
        .flash-stat-val {
            font-size: clamp(1.8rem, 8vw, 2.8rem);
            font-weight: 900;
            line-height: 1;
        }
        .flash-stat-lab {
            font-size: 0.75rem;
            opacity: 0.8;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-top: 4px;
        }
        .flash-timer-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 5px;
            background: rgba(255,255,255,0.5);
            animation: timerBar 3s linear forwards;
            border-radius: 0 3px 3px 0;
        }
        @keyframes timerBar {
            from { width: 100%; }
            to   { width: 0%; }
        }

        /* ===== MODAL QR ASISTENCIA FULLSCREEN ===== */
        #modalQR-asistencia {
            position: fixed !important;
            inset: 0 !important;
            z-index: 10000 !important;
            background: #000 !important;
            border-radius: 0 !important;
            padding: 0 !important;
            max-width: none !important;
            width: 100% !important;
            max-height: none !important;
            margin: 0 !important;
            overflow: hidden !important;
        }
        #modalQR-asistencia .qr-fs-video {
            width: 100%;
            height: 100vh;
            object-fit: cover;
        }
        #modalQR-asistencia .qr-fs-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            pointer-events: none;
        }
        #modalQR-asistencia .qr-fs-frame {
            width: min(70vw, 280px);
            height: min(70vw, 280px);
            border: 3px solid #10b981;
            border-radius: 20px;
            box-shadow: 0 0 0 9999px rgba(0,0,0,0.55);
            position: relative;
        }
        #modalQR-asistencia .qr-fs-frame::before,
        #modalQR-asistencia .qr-fs-frame::after {
            content: '';
            position: absolute;
            width: 30px;
            height: 30px;
            border-color: #10b981;
            border-style: solid;
        }
        #modalQR-asistencia .qr-fs-frame::before {
            top: -3px; left: -3px;
            border-width: 4px 0 0 4px;
            border-radius: 4px 0 0 0;
        }
        #modalQR-asistencia .qr-fs-frame::after {
            bottom: -3px; right: -3px;
            border-width: 0 4px 4px 0;
            border-radius: 0 0 4px 0;
        }
        #modalQR-asistencia .qr-fs-scan-line {
            position: absolute;
            left: 0; right: 0;
            height: 2px;
            background: linear-gradient(to right, transparent, #10b981, transparent);
            animation: scanLine 2s ease-in-out infinite;
        }
        @keyframes scanLine {
            0%   { top: 10%; opacity: 1; }
            50%  { top: 85%; opacity: 1; }
            100% { top: 10%; opacity: 1; }
        }
        #modalQR-asistencia .qr-fs-label {
            margin-top: 32px;
            color: white;
            font-size: 1rem;
            font-weight: 600;
            text-shadow: 0 2px 8px rgba(0,0,0,0.8);
        }
        #modalQR-asistencia .qr-fs-close {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 44px;
            height: 44px;
            background: rgba(0,0,0,0.6);
            border: none;
            border-radius: 50%;
            color: white;
            font-size: 1.4rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            pointer-events: all;
            z-index: 10;
        }
        #modalQR-asistencia .qr-fs-evento {
            position: absolute;
            top: 20px;
            left: 20px;
            right: 70px;
            background: rgba(0,0,0,0.6);
            color: white;
            padding: 8px 14px;
            border-radius: 10px;
            font-size: 0.85rem;
            font-weight: 600;
            pointer-events: none;
        }

        /* ===== PANEL ASISTENCIA REDISEÑO MÓVIL ===== */
        .asistencia-panel {
            background: linear-gradient(160deg, #0f172a 0%, #1e293b 100%);
            border-radius: 20px;
            overflow: hidden;
            color: white;
        }
        .asistencia-panel-header {
            padding: 24px 20px 16px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        .asistencia-panel-header h2 {
            font-size: 1.3rem;
            font-weight: 800;
            margin: 0 0 14px;
            letter-spacing: -0.02em;
        }
        .asistencia-evento-select {
            width: 100%;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.15);
            color: white;
            padding: 12px 16px;
            border-radius: 12px;
            font-size: 0.95rem;
            font-weight: 500;
            appearance: none;
            -webkit-appearance: none;
        }
        .asistencia-evento-select option { color: #1e293b; background: white; }
        .asistencia-contador-area {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 40px;
            padding: 28px 20px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        .contador-principal {
            text-align: center;
        }
        .contador-num {
            font-size: clamp(4rem, 20vw, 6rem);
            font-weight: 900;
            line-height: 1;
            color: #10b981;
            text-shadow: 0 0 40px rgba(16,185,129,0.4);
        }
        .contador-label {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            opacity: 0.6;
            margin-top: 4px;
        }
        .contador-ultima {
            text-align: center;
            opacity: 0.7;
        }
        .contador-ultima-val {
            font-size: 1.5rem;
            font-weight: 700;
        }
        .contador-ultima-lab {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            opacity: 0.7;
            margin-top: 2px;
        }
        .asistencia-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            padding: 20px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        .btn-accion-grande {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 20px 10px;
            border: none;
            border-radius: 16px;
            font-size: 0.9rem;
            font-weight: 700;
            cursor: pointer;
            transition: transform 0.15s, box-shadow 0.15s;
            color: white;
            min-height: 100px;
        }
        .btn-accion-grande:active { transform: scale(0.96); }
        .btn-accion-grande .btn-icon { font-size: 2rem; }
        .btn-qr-asistencia {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            box-shadow: 0 4px 20px rgba(245,158,11,0.35);
        }
        .btn-nfc-asistencia {
            background: linear-gradient(135deg, #6366f1, #a855f7);
            box-shadow: 0 4px 20px rgba(99,102,241,0.35);
        }
        .asistencia-manual {
            padding: 16px 20px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        .asistencia-manual label {
            display: block;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            opacity: 0.5;
            margin-bottom: 10px;
        }
        .asistencia-manual .inp-row {
            display: flex;
            gap: 8px;
        }
        .asistencia-manual input {
            flex: 1;
            background: rgba(255,255,255,0.07);
            border: 1px solid rgba(255,255,255,0.12);
            color: white;
            padding: 10px 14px;
            border-radius: 10px;
            font-size: 0.85rem;
        }
        .asistencia-manual input::placeholder { color: rgba(255,255,255,0.3); }
        .asistencia-lista-wrap {
            padding: 16px 20px 20px;
            max-height: 280px;
            overflow-y: auto;
        }
        .asistencia-lista-titulo {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            opacity: 0.5;
            margin-bottom: 12px;
        }

        /* ========== TOGGLE ESCÁNER QR ========== */
        .toggle-escaneo {
            position: relative;
            display: inline-block;
            width: 46px;
            height: 26px;
            flex-shrink: 0;
            cursor: pointer;
        }
        .toggle-escaneo input { opacity: 0; width: 0; height: 0; }
        .toggle-slider {
            position: absolute;
            inset: 0;
            background: #cbd5e1;
            border-radius: 26px;
            transition: background 0.2s;
        }
        .toggle-slider:before {
            content: '';
            position: absolute;
            height: 20px;
            width: 20px;
            left: 3px;
            bottom: 3px;
            background: white;
            border-radius: 50%;
            transition: transform 0.2s;
            box-shadow: 0 1px 4px rgba(0,0,0,0.18);
        }
        .toggle-escaneo input:checked + .toggle-slider { background: #10b981; }
        .toggle-escaneo input:checked + .toggle-slider:before { transform: translateX(20px); }
        .toggle-escaneo input:disabled + .toggle-slider { opacity: 0.5; cursor: not-allowed; }

        /* ── Home Top Bar ─────────────────────────────── */
        .home-topbar {
            display: flex; align-items: center; gap: 16px;
            padding: 14px 24px;
            background: white;
            border-radius: 30px;
            flex-shrink: 0;
        }
        .home-topbar-logo {
            width: 49px; height: 49px; border-radius: 50%;
            background-image: linear-gradient(rgba(205,205,205,0.7) 0%, rgba(18,29,25,0.7) 100%), linear-gradient(90deg,#f7f7f7 0%,#f7f7f7 100%);
            flex-shrink: 0; overflow: hidden;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
        }
        .home-topbar-logo img { width:100%; height:100%; object-fit:cover; }
        .home-topbar-logo span { display:none; }
        /* Org-info popover */
        @keyframes oi-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
        .oi-backdrop{position:fixed;inset:0;z-index:10001;}
        .oi-popover{position:fixed;z-index:10002;width:260px;background:#fff;border-radius:16px;
            filter:drop-shadow(0 8px 32px rgba(0,0,0,.16)) drop-shadow(0 0 0 1px rgba(0,0,0,.07));
            animation:oi-in .16s cubic-bezier(.4,0,.2,1);}
        .oi-inner{background:#fff;border-radius:16px;overflow:hidden;}
        .oi-arrow{position:absolute;top:-8px;pointer-events:none;}
        .oi-arrow-bg{position:absolute;top:0;left:0;width:0;height:0;
            border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:9px solid rgba(0,0,0,.08);}
        .oi-arrow-fg{position:absolute;top:1px;left:1px;margin-left:-1px;width:0;height:0;
            border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #fff;}
        .oi-body{padding:20px;display:flex;flex-direction:column;align-items:center;gap:12px;}
        .oi-logo{width:72px;height:72px;border-radius:50%;object-fit:cover;
            background:linear-gradient(rgba(205,205,205,.7) 0%,rgba(18,29,25,.7) 100%);}
        .oi-nombre{font-family:'Syne',sans-serif;font-size:15px;font-weight:800;color:#0f0f0f;
            text-align:center;line-height:1.25;margin:0;}
        .oi-stat{font-family:'Inter',sans-serif;font-size:12px;color:#64748b;font-weight:500;margin:0;}
        .oi-stat strong{color:#0f0f0f;font-weight:700;}
        /* Menú "Portal del cliente": Mi cuenta · Facturación · Tu plan · Soporte */
        .oi-menu{border-top:1px solid #eef0f3;padding:6px;display:flex;flex-direction:column;gap:1px;}
        .oi-mi{display:flex;align-items:center;gap:11px;width:100%;background:none;border:none;cursor:pointer;
            padding:10px 12px;border-radius:11px;text-align:left;font-family:'Inter',sans-serif;
            font-size:13px;font-weight:600;color:#0f0f0f;transition:background .15s;}
        .oi-mi:hover{background:#f5f6f8;}
        .oi-mi svg{width:17px;height:17px;flex-shrink:0;color:#E84A1A;}
        .oi-mi span{flex:1;}
        .oi-mi em{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
            color:#b45309;background:#fef3c7;padding:2px 7px;border-radius:100px;}
        /* Selector de plan (billing Stripe) */
        .ps-backdrop{position:fixed;inset:0;z-index:10050;background:rgba(10,12,16,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px;animation:oi-in .15s ease;}
        .ps-modal{background:#fff;border-radius:22px;width:100%;max-width:460px;max-height:90vh;overflow:auto;padding:26px 24px 22px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.4);}
        .ps-modal h2{font-family:'Syne',sans-serif;font-weight:700;font-size:21px;color:#0f1115;margin:0;}
        .ps-modal .ps-sub{color:#6b7280;font-size:13.5px;margin:6px 0 0;line-height:1.5;}
        .ps-close{position:absolute;top:14px;right:14px;background:#f3f4f6;border:none;width:30px;height:30px;border-radius:50%;cursor:pointer;color:#6b7280;font-size:18px;line-height:1;display:grid;place-items:center;}
        .ps-close:hover{background:#e5e7eb;color:#0f1115;}
        .ps-toggle{display:inline-flex;background:#f1f2f4;border-radius:999px;padding:4px;gap:2px;margin:16px 0 4px;}
        .ps-toggle button{border:none;background:none;cursor:pointer;font-family:'Inter',sans-serif;font-weight:600;font-size:13px;color:#4b5563;padding:7px 16px;border-radius:999px;}
        .ps-toggle button.on{background:#fff;color:#0f1115;box-shadow:0 1px 4px rgba(0,0,0,.12);}
        .ps-list{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
        .ps-plan{position:relative;border:1.5px solid #e6e8ec;border-radius:15px;padding:14px 16px;cursor:pointer;transition:border-color .15s,box-shadow .15s;}
        .ps-plan:hover{border-color:#d6d9df;}
        .ps-plan.sel{border-color:#0f1115;box-shadow:0 0 0 3px rgba(15,17,21,.07);}
        .ps-plan-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
        .ps-plan-name{font-family:'Syne',sans-serif;font-weight:700;font-size:16px;color:#0f1115;}
        .ps-plan-tag{font-size:12px;color:#6b7280;margin-top:2px;}
        .ps-plan-price{font-family:'Syne',sans-serif;font-weight:700;font-size:17px;color:#0f1115;white-space:nowrap;}
        .ps-plan-price small{font-family:'Inter',sans-serif;font-weight:500;font-size:11px;color:#9ca3af;}
        .ps-cta{margin-top:16px;width:100%;background:#0f1115;color:#fff;border:none;border-radius:30px;padding:13px;font-family:'Syne',sans-serif;font-weight:700;font-size:14.5px;cursor:pointer;transition:background .2s;}
        .ps-cta:hover:not(:disabled){background:#000;}
        .ps-cta:disabled{opacity:.6;cursor:not-allowed;}
        .ps-note{font-size:11.5px;color:#9ca3af;text-align:center;margin-top:11px;line-height:1.5;}
        .ps-badge{position:absolute;top:-9px;right:14px;background:#0f1115;color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px;font-family:'Inter',sans-serif;}
        /* Bienvenida tras crear org / volver de Stripe */
        .wlc-ic{font-size:42px;line-height:1;margin-bottom:8px;}
        .wlc-actions{display:flex;flex-direction:column;gap:9px;margin-top:18px;}
        .wlc-later{background:#fff;color:#4b5563;border:1.5px solid #d6d9df;border-radius:30px;padding:12px;font-family:'Syne',sans-serif;font-weight:700;font-size:14px;cursor:pointer;transition:background .15s,color .15s;}
        .wlc-later:hover{background:#f7f8fa;color:#0f1115;}
        /* Páginas tipo Ajustes (Mi cuenta · Facturación · Tu plan) */
        .set-label{font-family:'Inter',sans-serif;font-weight:600;font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:.8px;margin:0 0 16px;}
        .set-btn{padding:12px 24px;background:#0f0f0f;color:#fff;border:none;border-radius:12px;font-family:'Inter',sans-serif;font-weight:600;font-size:13px;cursor:pointer;transition:opacity .15s;}
        .set-btn:hover:not(:disabled){opacity:.8;}
        .set-btn:disabled{opacity:.4;cursor:not-allowed;}
        .set-btn-light{padding:12px 24px;background:transparent;color:#64748b;border:1.5px solid #e8e8e8;border-radius:12px;font-family:'Inter',sans-serif;font-weight:600;font-size:13px;cursor:pointer;transition:all .15s;}
        .set-btn-light:hover{border-color:#0f0f0f;color:#0f0f0f;}
        .set-btn-danger{padding:12px 24px;background:#fff;color:#dc2626;border:1.5px solid #fecaca;border-radius:12px;font-family:'Inter',sans-serif;font-weight:600;font-size:13px;cursor:pointer;transition:background .15s;}
        .set-btn-danger:hover{background:#fef2f2;}
        .set-badge{font-family:'Inter',sans-serif;font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;background:#f1f5f9;color:#475569;white-space:nowrap;}
        .set-badge.ok{background:#dcfce7;color:#166534;}
        .set-badge.warn{background:#fef3c7;color:#b45309;}
        .set-badge.bad{background:#fee2e2;color:#991b1b;}

        /* ── Cuenta de la organización: formulario + equipo ── */
        .acct-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
        .acct-field{display:flex;flex-direction:column;gap:6px;min-width:0;}
        .acct-field label{font-family:'Inter',sans-serif;font-weight:600;font-size:12px;color:#475569;}
        .acct-input{width:100%;font-family:'Inter',sans-serif;font-size:13.5px;color:#0f172a;background:#fafbfc;border:1.5px solid #e6e8ec;border-radius:10px;padding:10px 12px;transition:border-color .15s,box-shadow .15s;outline:none;}
        .acct-input:focus{border-color:#0f0f0f;background:#fff;box-shadow:0 0 0 3px rgba(15,17,21,.06);}
        .acct-input:disabled{background:#f1f5f9;color:#94a3b8;cursor:not-allowed;}
        textarea.acct-input{resize:vertical;min-height:54px;line-height:1.5;}
        .team-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #f1f5f9;}
        .team-row:first-child{border-top:none;padding-top:2px;}
        .team-av{width:38px;height:38px;border-radius:50%;background:#0f0f0f;color:#fff;display:grid;place-items:center;font-family:'Syne',sans-serif;font-weight:700;font-size:14px;flex-shrink:0;}
        .team-av.off{background:#cbd5e1;}
        .team-meta{min-width:0;flex:1;}
        .team-name{font-family:'Inter',sans-serif;font-weight:600;font-size:13.5px;color:#0f172a;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
        .team-email{font-family:'Inter',sans-serif;font-size:12px;color:#94a3b8;margin:1px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
        .team-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
        .team-role{font-family:'Inter',sans-serif;font-weight:600;font-size:12px;color:#0f172a;background:#fff;border:1.5px solid #e6e8ec;border-radius:8px;padding:6px 8px;cursor:pointer;}
        .team-role:disabled{background:#f8fafc;color:#94a3b8;cursor:default;}
        .team-ic{width:30px;height:30px;border-radius:8px;border:1.5px solid #e6e8ec;background:#fff;cursor:pointer;display:grid;place-items:center;color:#64748b;transition:all .15s;padding:0;text-decoration:none;}
        .team-ic:hover{border-color:#0f0f0f;color:#0f0f0f;}
        .team-ic.danger:hover{border-color:#fecaca;color:#dc2626;background:#fef2f2;}
        .team-ic svg{width:15px;height:15px;}
        /* Selector de miembros para añadir al equipo */
        .inv-search{position:relative;margin-top:16px;}
        .inv-search>svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:#9ca3af;pointer-events:none;}
        .inv-search-input{width:100%;font-family:'Inter',sans-serif;font-size:13.5px;color:#0f172a;background:#fafbfc;border:1.5px solid #e6e8ec;border-radius:10px;padding:10px 12px 10px 36px;outline:none;transition:border-color .15s,box-shadow .15s;}
        .inv-search-input:focus{border-color:#0f0f0f;background:#fff;box-shadow:0 0 0 3px rgba(15,17,21,.06);}
        .inv-count{font-family:'Inter',sans-serif;font-size:11.5px;color:#94a3b8;margin:10px 2px 0;}
        .inv-socios{max-height:236px;overflow-y:auto;margin-top:6px;border:1.5px solid #e6e8ec;border-radius:12px;}
        .inv-socio{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;border-top:1px solid #f3f4f6;}
        .inv-socio:first-child{border-top:none;}
        .inv-socio:hover{background:#f8fafc;}
        .inv-socio.sel{background:#eef2ff;}
        .inv-socio .team-meta{flex:1;min-width:0;}

        /* ── Tarjetas de plan (Tu plan) ── */
        .plan-card{position:relative;display:flex;flex-direction:column;min-width:0;border:1.5px solid #e6e8ec;border-radius:16px;padding:20px 18px;background:#fff;transition:border-color .15s,box-shadow .15s;}
        .plan-card.featured{border-color:#cdd2d9;}
        .plan-card.current{border-color:#0f1115;box-shadow:0 0 0 3px rgba(15,17,21,.06);}
        .plan-card-name{font-family:'Syne',sans-serif;font-weight:700;font-size:17px;color:#0f1115;}
        .plan-card-tag{font-family:'Inter',sans-serif;font-size:12px;color:#6b7280;margin-top:2px;min-height:32px;line-height:1.35;}
        .plan-card-price{font-family:'Syne',sans-serif;font-weight:700;font-size:24px;color:#0f1115;margin-top:6px;white-space:nowrap;}
        .plan-card-price small{font-family:'Inter',sans-serif;font-weight:500;font-size:12px;color:#9ca3af;}
        .plan-card-feats{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;flex:1;}
        .plan-card-feats li{display:flex;align-items:flex-start;gap:7px;font-family:'Inter',sans-serif;font-size:12px;color:#374151;line-height:1.35;}
        .plan-card-feats li svg{width:13px;height:13px;color:#0f1115;flex-shrink:0;margin-top:1px;}
        .plan-card-btn{margin-top:16px;width:100%;border-radius:10px;padding:11px;font-family:'Inter',sans-serif;font-weight:600;font-size:13px;cursor:pointer;border:1.5px solid #e6e8ec;background:#fff;color:#0f1115;transition:all .15s;}
        .plan-card-btn:hover:not(:disabled){border-color:#0f1115;}
        .plan-card-btn.primary{background:#0f1115;color:#fff;border-color:#0f1115;}
        .plan-card-btn.primary:hover{background:#000;}
        .plan-card-btn:disabled{background:#f1f5f9;color:#94a3b8;border-color:#eef2f7;cursor:default;}
        .plan-badge{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:#0f1115;color:#fff;font-family:'Inter',sans-serif;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 10px;border-radius:999px;white-space:nowrap;}
        @media (max-width:680px){#plan-grid{grid-template-columns:1fr !important;}.acct-grid{grid-template-columns:1fr;}}

        /* ── Banner de pago pendiente ── */
        .pago-banner{position:fixed;top:0;left:0;right:0;z-index:11000;display:flex;align-items:center;gap:12px;padding:10px 18px;background:#b42318;color:#fff;font-family:'Inter',sans-serif;font-size:13.5px;line-height:1.35;box-shadow:0 2px 14px rgba(0,0,0,.22);}
        .pago-banner-ic{width:18px;height:18px;flex-shrink:0;}
        .pago-banner-txt{flex:1;min-width:0;font-weight:500;}
        .pago-banner-btn{background:#fff;color:#b42318;border:none;border-radius:8px;padding:8px 16px;font-family:'Inter',sans-serif;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap;transition:background .15s;}
        .pago-banner-btn:hover{background:#fde8e6;}
        .pago-banner-x{background:none;border:none;color:rgba(255,255,255,.75);font-size:22px;line-height:1;cursor:pointer;padding:0 2px;flex-shrink:0;}
        .pago-banner-x:hover{color:#fff;}
        body.has-pay-banner #main-app{padding-top:48px;}
        @media (max-width:600px){.pago-banner{font-size:12px;padding:9px 12px;gap:9px;}.pago-banner-btn{padding:7px 12px;font-size:12px;}body.has-pay-banner #main-app{padding-top:62px;}}
        .home-topbar-center {
            display: flex; align-items: center; gap: 10px; flex: 1;
        }
        .home-search {
            flex: 1; max-width: 431px; height: 49px;
            background: #f7f7f7; border-radius: 30px;
            display: flex; align-items: center; gap: 12px; padding: 0 20px;
        }
        .home-search input {
            border: none; background: transparent; outline: none;
            font-size: 0.9375rem; color: #0f0f0f; flex: 1;
            font-family: 'Inter', sans-serif;
        }
        .home-search input::placeholder { color: #0f0f0f; }
        .home-topbar-spacer { flex: 1; }
        .home-topbar-actions { display: flex; align-items: center; gap: 10px; }
        .home-topbar-icon {
            width: 44px; height: 44px; background: #f7f7f7; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; border: none; color: #0f0f0f;
            transition: background 0.15s;
            flex-shrink: 0;
        }
        .home-topbar-icon:hover { background: #e8e8e8; }
        .home-topbar-user { text-align: right; line-height: 1.25; }
        .home-topbar-user-name { font-family:'Syne',sans-serif; font-weight:700; font-size:1rem; color:#0f0f0f; }
        .home-topbar-user-email { font-size:0.6875rem; color:#0f0f0f; font-family:'Inter',sans-serif; }
        .home-topbar-avatar {
            width:49px; height:49px; border-radius:50%;
            background:#d9d9d9; overflow:hidden;
            display:flex; align-items:center; justify-content:center;
            font-family:'Syne',sans-serif; font-weight:700; font-size:1.1rem; color:#fff;
            flex-shrink:0; cursor:pointer; transition:opacity .15s;
        }
        .home-topbar-avatar:hover { opacity:.85; }
        .home-topbar-avatar img { width:100%; height:100%; object-fit:cover; }

        /* ── User Card Panel ─────────────────────────── */
        .uc-backdrop { position:fixed; inset:0; z-index:1099; }
        .uc-panel {
            position:fixed; top:72px; right:20px; width:284px;
            background:#fff; border:1px solid #e8e8e8;
            border-radius:18px; box-shadow:0 12px 40px rgba(0,0,0,.13);
            z-index:1100; overflow:hidden; display:none; flex-direction:column;
            animation:uc-in .18s cubic-bezier(.4,0,.2,1);
        }
        .uc-panel.open { display:flex; }
        @keyframes uc-in { from { opacity:0; transform:translateY(-8px) scale(.97); } to { opacity:1; transform:none; } }
        .uc-head { padding:18px 20px 16px; display:flex; align-items:center; gap:14px; border-bottom:1px solid #f1f5f9; }
        .uc-av {
            width:46px; height:46px; border-radius:50%; background:#0f0f0f;
            display:flex; align-items:center; justify-content:center;
            font-family:'Syne',sans-serif; font-weight:700; font-size:1.15rem; color:#fff; flex-shrink:0;
        }
        .uc-info { min-width:0; }
        .uc-info-name { font-family:'Syne',sans-serif; font-weight:700; font-size:0.95rem; color:#0f0f0f; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .uc-info-email { font-size:0.72rem; color:#94a3b8; font-family:'Inter',sans-serif; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .uc-info-role { display:inline-flex; margin-top:5px; padding:2px 8px; border-radius:99px; background:#f1f5f9; font-size:0.67rem; font-weight:700; color:#64748b; font-family:'Inter',sans-serif; text-transform:uppercase; letter-spacing:.06em; }
        .uc-org { padding:10px 20px; display:flex; align-items:center; gap:10px; border-bottom:1px solid #f1f5f9; }
        .uc-org-logo { width:30px; height:30px; border-radius:8px; border:1px solid #e8e8e8; object-fit:contain; background:#f7f7f7; flex-shrink:0; }
        .uc-org-logo-fallback { width:30px; height:30px; border-radius:8px; border:1px solid #e8e8e8; background:#f7f7f7; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:0.85rem; }
        .uc-org-text { min-width:0; }
        .uc-org-label { font-size:0.68rem; color:#94a3b8; font-family:'Inter',sans-serif; text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
        .uc-org-name { font-size:0.85rem; font-weight:600; color:#0f0f0f; font-family:'Inter',sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .uc-actions { padding:6px 0; }
        .uc-action {
            display:flex; align-items:center; gap:12px; padding:10px 20px; width:100%;
            border:none; background:transparent; cursor:pointer; text-align:left;
            font-size:0.845rem; color:#0f0f0f; font-family:'Inter',sans-serif;
            transition:background .1s;
        }
        .uc-action:hover { background:#f7f7f7; }
        .uc-action-icon { width:32px; height:32px; border-radius:8px; background:#f1f5f9; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#64748b; }
        .uc-action.danger .uc-action-icon { background:#fef2f2; color:#dc2626; }
        .uc-action.danger { color:#dc2626; }
        .uc-sep { height:1px; background:#f1f5f9; margin:4px 0; }

        /* ── Home Header ──────────────────────────────── */
        .home-header { margin-bottom: 20px; flex-shrink: 0; }
        .home-header h1 {
            font-family: 'Syne', sans-serif; font-weight: 700;
            font-size: 32px; color: #0f0f0f; margin: 0 0 4px;
            line-height: 1.1;
        }
        .home-header p { font-size: 0.9375rem; color: #0f0f0f; margin: 0; font-family:'Inter',sans-serif; }

        /* ── Bento Grid ──────────────────────────────── */
        /* ── Dashboard v2 ──────────────────────────────────────── */
        .db-scroll {
            flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
            display: flex; flex-direction: column; gap: 16px;
            padding-bottom: 24px;
        }
        /* KPI row */
        .db-kpi-row {
            display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
        }
        .db-kpi {
            background: #f7f7f7; border-radius: 20px; padding: 22px 24px;
            display: flex; flex-direction: column; gap: 8px; min-width: 0;
        }
        .db-kpi-label {
            font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
            letter-spacing: 0.07em; color: #94a3b8;
        }
        .db-kpi-value {
            font-family: 'Syne', sans-serif; font-weight: 700;
            font-size: 2.4rem; color: #0f0f0f; line-height: 1;
        }
        .db-kpi-sub {
            font-size: 0.78rem; font-weight: 500; color: #94a3b8;
            display: flex; align-items: center; gap: 4px;
        }
        .db-kpi-badge {
            display: inline-flex; align-items: center; gap: 3px;
            padding: 2px 8px; border-radius: 99px;
            font-size: 0.72rem; font-weight: 600;
        }
        .db-kpi-badge.up { background: #f0fdf4; color: #16a34a; }
        .db-kpi-badge.down { background: #fef2f2; color: #dc2626; }
        .db-kpi-badge.neutral { background: #f1f5f9; color: #64748b; }
        /* Progress bar */
        .db-progress {
            height: 4px; background: #e8e8e8; border-radius: 99px; overflow: hidden; margin-top: 2px;
        }
        .db-progress-fill {
            height: 100%; border-radius: 99px; transition: width .6s cubic-bezier(.4,0,.2,1);
        }
        /* Charts row */
        .db-charts-main {
            display: grid; grid-template-columns: 3fr 1.2fr; gap: 16px;
        }
        /* Bottom row */
        .db-bottom {
            display: grid; grid-template-columns: 2fr 1.3fr 1.3fr; gap: 16px;
        }
        /* Generic card */
        .db-card {
            background: #f7f7f7; border-radius: 20px; padding: 22px 24px;
            display: flex; flex-direction: column; min-width: 0; min-height: 0;
        }
        .db-card-title {
            font-family: 'Syne', sans-serif; font-weight: 700;
            font-size: 0.95rem; color: #0f0f0f; margin-bottom: 4px; flex-shrink: 0;
        }
        .db-card-sub {
            font-size: 0.75rem; color: #94a3b8; font-weight: 400;
            margin-bottom: 16px; flex-shrink: 0;
        }
        /* Event list */
        .db-event-item {
            display: flex; align-items: flex-start; gap: 12px;
            padding: 10px 0; border-bottom: 1px solid #e8e8e8;
        }
        .db-event-item:last-child { border-bottom: none; }
        .db-event-dot {
            width: 8px; height: 8px; border-radius: 50%; background: #6366f1;
            flex-shrink: 0; margin-top: 5px;
        }
        .db-event-name { font-size: 0.85rem; font-weight: 600; color: #0f0f0f; }
        .db-event-date { font-size: 0.75rem; color: #94a3b8; }
        /* Stat pills */
        .db-stat-pill {
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px 0; border-bottom: 1px solid #e8e8e8;
        }
        .db-stat-pill:last-child { border-bottom: none; }
        .db-stat-pill-label { font-size: 0.83rem; color: #64748b; font-weight: 500; }
        .db-stat-pill-val { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.1rem; color: #0f0f0f; }
        /* Donut legend */
        .db-legend { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
        .db-legend-item { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; }
        .db-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
        /* Responsive */
        @media (max-width: 1100px) {
            .db-kpi-row { grid-template-columns: repeat(2, 1fr); }
            .db-charts-main { grid-template-columns: 1fr; }
            .db-bottom { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 700px) {
            .db-kpi-row, .db-bottom { grid-template-columns: 1fr; }
        }
        /* ApexCharts overrides for clean look */
        .apexcharts-tooltip { font-family: 'Inter', sans-serif !important; }
        .apexcharts-xaxistooltip { display: none !important; }

        /* ── Eventos ─────────────────────────────────────────── */
        #tab-eventos.tab-content.active {
            padding: 32px;
            overflow: hidden;
        }
        /* Header */
        .ev-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 20px;
            flex-shrink: 0;
        }
        .ev-h1 {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 32px;
            color: #000;
            line-height: 1.1;
            margin: 0 0 4px;
        }
        .ev-subtitle {
            font-family: 'Inter', sans-serif;
            font-size: 15px;
            color: #000;
            margin: 0;
        }
        .ev-btn-nuevo {
            background: #000;
            color: #fff;
            border: none;
            border-radius: 30px;
            padding: 10px 20px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 16px;
            cursor: pointer;
            flex-shrink: 0;
            transition: background 0.15s;
        }
        .ev-btn-nuevo:hover { background: #222; }
        /* Dropdown "+ Mensaje" */
        #tab-comunicaciones .subtab-content.active { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; }
        #subtab-com-config.active { overflow-y:auto; }
        .com-select-wrap { position:relative; width:100%; }
        .com-select-wrap select { width:100%; box-sizing:border-box; appearance:none; -webkit-appearance:none; background:#fff; border:none; border-radius:20px; padding:12px 44px 12px 18px; font-family:'Inter',sans-serif; font-size:14px; font-weight:500; color:#0f0f0f; outline:none; cursor:pointer; transition:box-shadow .15s; }
        .com-select-wrap select:focus { box-shadow:0 0 0 2px rgba(0,0,0,.12); }
        .com-select-wrap .com-select-arrow { position:absolute; right:16px; top:50%; transform:translateY(-50%); pointer-events:none; color:#94a3b8; display:flex; align-items:center; }
        .com-var-chip { background:#f7f7f7; border:1.5px solid #e5e5e5; border-radius:20px; padding:4px 12px; font-size:12px; font-weight:600; color:#374151; cursor:grab; user-select:none; transition:opacity .12s; }
        .com-var-chip:hover { opacity:.7; }
        .com-var-chip-gen { background:#f0f9ff; border-color:#bae6fd; color:#0369a1; }
        .com-cuerpo-editor { min-height:140px; padding:10px 16px; border:1.5px solid #e5e5e5; border-radius:14px; font-family:'Inter',sans-serif; font-size:14px; color:#0f0f0f; line-height:1.7; outline:none; background:#fff; cursor:text; white-space:pre-wrap; word-break:break-word; transition:border-color .15s; }
        .com-cuerpo-editor:empty::before { content:attr(data-placeholder); color:#94a3b8; pointer-events:none; display:block; }
        .com-cuerpo-editor:focus { border-color:#000; }
        .com-var-token { display:inline-block; background:#f7f7f7; border:1.5px solid #e5e5e5; border-radius:8px; padding:1px 8px; font-size:12px; font-weight:600; color:#374151; cursor:text; user-select:all; margin:0 4px; vertical-align:baseline; line-height:1.6; }
        .com-var-token[data-gen="true"] { background:#f0f9ff; border-color:#bae6fd; color:#0369a1; }
        .com-cuerpo-editor .com-var-token:hover { opacity:.8; }
        .com-nuevo-menu { position:absolute; top:calc(100% + 8px); right:0; background:#fff; border-radius:20px; box-shadow:0 8px 40px rgba(0,0,0,.16); padding:8px; z-index:250; min-width:180px; display:none; }
        .com-nuevo-menu.open { display:block; }
        .com-nuevo-menu button { display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; padding:10px 14px; border-radius:14px; font-family:'Inter',sans-serif; font-size:14px; font-weight:500; color:#0f0f0f; cursor:pointer; transition:background .12s; }
        .com-nuevo-menu button:hover { background:#f5f5f5; }
        /* Content grid — 1fr 1fr (equal columns) */
        .ev-content-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            flex: 1;
            min-height: 0;
            overflow: hidden;
        }
        /* Left column */
        .ev-left-col {
            display: flex;
            flex-direction: column;
            gap: 12px;
            overflow: hidden;
            min-height: 0;
        }
        /* Calendar card — fixed height */
        .ev-cal-card {
            background: #f7f7f7;
            border-radius: 30px;
            padding: 24px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
        }
        .ev-card-title {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 20px;
            color: #000;
            margin: 0 0 16px;
        }
        /* Month selector bar — black pill */
        .ev-month-bar {
            background: #000;
            border-radius: 30px;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
            flex-shrink: 0;
        }
        .ev-month-label {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 20px;
            color: #fff;
            flex: 1;
            text-align: center;
        }
        .ev-month-btn {
            background: none;
            border: none;
            color: #fff;
            cursor: pointer;
            padding: 2px 4px;
            display: flex;
            align-items: center;
            opacity: 0.85;
            transition: opacity 0.15s;
        }
        .ev-month-btn:hover { opacity: 1; }
        /* Calendar day grid */
        .ev-cal-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 2px;
            align-content: start;
            flex: 1;
        }
        .ev-cal-wd {
            font-family: 'Inter', sans-serif;
            font-size: 10px;
            font-weight: 600;
            color: #94a3b8;
            text-align: center;
            padding: 2px 0 6px;
            text-transform: uppercase;
        }
        .ev-cal-day {
            font-family: 'Syne', sans-serif;
            font-size: 13px;
            font-weight: 600;
            text-align: center;
            padding: 6px 2px;
            border-radius: 8px;
            color: #0f0f0f;
        }
        .ev-cal-day.other { color: #d1d5db; }
        .ev-cal-day.today { border: 1.5px solid #000; }
        .ev-cal-day.has-ev {
            background: #e2e8f0;
            color: #0f0f0f;
            cursor: pointer;
            font-weight: 700;
        }
        .ev-cal-day.has-ev:hover { background: #cbd5e1; }
        /* Todos los eventos card — flex:1 fills remaining left col */
        .ev-todos-card {
            background: #f7f7f7;
            border-radius: 30px;
            padding: 24px;
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        /* Search bar — Component 3: bg-white rounded-[30px] */
        .ev-search-bar {
            flex: 1;
            background: white;
            border-radius: 30px;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            min-width: 0;
        }
        .ev-search-bar input {
            border: none;
            background: transparent;
            outline: none;
            font-family: 'Inter', sans-serif;
            font-size: 12px;
            color: #000;
            flex: 1;
            min-width: 0;
        }
        .ev-search-bar input::placeholder { color: #94a3b8; }
        /* Todos event item — Component 3: white rounded-[30px] with date badge + name + chevron */
        .ev-todos-item {
            background: #fff;
            border-radius: 30px;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 14px;
            cursor: pointer;
            transition: background 0.15s;
            flex-shrink: 0;
        }
        .ev-todos-item:hover { background: #f0f0f0; }
        /* Date badge — Component 3: bg-black rounded-[30px], day 32px, month 12px */
        .ev-date-badge {
            background: #000;
            border-radius: 30px;
            width: 56px;
            height: 56px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .ev-date-badge .ev-day {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 24px;
            color: #fff;
            line-height: 1;
        }
        .ev-date-badge .ev-month {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 10px;
            color: #fff;
        }
        .ev-todos-name {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 20px;
            color: #000;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .ev-todos-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            overflow-y: auto;
            flex: 1;
            min-height: 0;
        }
        /* Create event form — Component 3 right panel */
        .ev-form-label {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 20px;
            color: #000;
            margin: 0 0 6px;
        }
        .ev-form-input {
            background: white;
            border: none;
            border-radius: 30px;
            padding: 12px 20px;
            width: 100%;
            font-family: 'Inter', sans-serif;
            font-size: 12px;
            color: #000;
            outline: none;
            box-sizing: border-box;
            display: block;
        }
        .ev-form-input::placeholder { color: #94a3b8; }
        textarea.ev-form-input { resize: none; }
        .ev-form-save {
            background: #000;
            color: #fff;
            border: none;
            border-radius: 30px;
            padding: 14px;
            width: 100%;
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 20px;
            cursor: pointer;
            transition: background 0.15s;
        }
        .ev-form-save:hover { background: #222; }
        .ev-form-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .ev-toggle-wrap { display: flex; align-items: center; gap: 8px; }
        .ev-toggle-input { display: none; }
        .ev-toggle-slider {
            width: 40px; height: 22px; background: #e2e8f0;
            border-radius: 20px; position: relative; cursor: pointer;
            transition: background 0.2s; flex-shrink: 0;
        }
        .ev-toggle-slider::after {
            content: ''; position: absolute; top: 3px; left: 3px;
            width: 16px; height: 16px; background: white;
            border-radius: 50%; transition: transform 0.2s;
        }
        .ev-toggle-input:checked + .ev-toggle-slider { background: #000; }
        .ev-toggle-input:checked + .ev-toggle-slider::after { transform: translateX(18px); }
        /* funnel btn in todos header */
        .ev-funnel-btn {
            background: white;
            border: none;
            border-radius: 12px;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
            transition: background 0.12s;
        }
        .ev-funnel-btn:hover { background: #e5e7eb; }
        /* Right panel — default empty state */
        .ev-right-panel {
            background: #f7f7f7;
            border-radius: 30px;
            padding: 32px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            overflow-y: auto;
            min-height: 0;
        }
        .ev-right-h2 {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 20px;
            color: #000;
            margin: 0 0 16px;
        }
        .ev-right-empty-p {
            font-family: 'Inter', sans-serif;
            font-size: 15px;
            color: #000;
            text-align: center;
            margin: 0;
            width: 100%;
        }
        /* Detail panel — Component 4 */
        .ev-detail-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            margin-bottom: 16px;
            flex-shrink: 0;
        }
        .ev-detail-header-left {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .ev-detail-nav-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px;
            display: flex;
            align-items: center;
            transition: opacity 0.15s;
        }
        .ev-detail-nav-btn:hover { opacity: 0.6; }
        .ev-detail-ev-label {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 20px;
            color: #000;
        }
        .ev-detail-title {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 20px;
            color: #000;
            text-align: center;
            width: 100%;
            margin-bottom: 16px;
            flex-shrink: 0;
        }
        .ev-detail-cards-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            width: 100%;
            margin-bottom: 12px;
            flex-shrink: 0;
        }
        .ev-detail-big-card {
            background: #fff;
            border-radius: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px 16px;
        }
        .ev-detail-big-num {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 80px;
            color: #000;
            line-height: 1;
        }
        .ev-detail-big-label {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 20px;
            color: #000;
            margin-top: 4px;
        }
        .ev-detail-info-card {
            background: #fff;
            border-radius: 30px;
            padding: 20px 24px;
            width: 100%;
            margin-bottom: 12px;
            flex-shrink: 0;
        }
        .ev-detail-info-card h3 {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 20px;
            color: #000;
            margin: 0 0 6px;
        }
        .ev-detail-info-card p {
            font-family: 'Inter', sans-serif;
            font-size: 15px;
            color: #64748b;
            margin: 0;
        }
        @media (max-width: 1000px) {
            .ev-content-grid { grid-template-columns: 1fr; }
        }
        /* Create-event form in right panel */
        .ev-form-input {
            width: 100%; box-sizing: border-box;
            background: #fff; border: none; border-radius: 20px;
            padding: 12px 18px; font-family: 'Inter', sans-serif;
            font-size: 0.9rem; color: #0f0f0f; outline: none;
        }
        .ev-form-input::placeholder { color: #94a3b8; }
        .ev-form-select {
            width: 100%; box-sizing: border-box;
            background: #fff; border: none; border-radius: 20px;
            padding: 12px 18px; font-family: 'Inter', sans-serif;
            font-size: 0.9rem; color: #0f0f0f; outline: none;
            appearance: none; cursor: pointer;
        }
        .ev-form-label {
            font-family: 'Syne', sans-serif; font-weight: 700;
            font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em;
            color: #94a3b8; margin-bottom: 6px; display: block;
        }
        .ev-form-field { width: 100%; margin-bottom: 10px; }
        .ev-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
        .ev-form-submit {
            width: 100%; background: #000; color: #fff; border: none;
            border-radius: 30px; padding: 14px; font-family: 'Syne', sans-serif;
            font-weight: 700; font-size: 1rem; cursor: pointer;
            transition: opacity 0.15s; margin-top: 6px;
        }
        .ev-form-submit:hover { opacity: 0.8; }
        .ev-form-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== bloque CSS original líneas 4636-5844 ===== */
        /* Tabulator overrides — integra con el diseño del panel */
        #tabulator-socios .tabulator-header { background: #f8fafc; border-bottom: 2px solid #e2e8f0; }
        #tabulator-socios .tabulator-col-title { font-weight: 700; font-size: 0.82rem; color: #475569; text-transform: uppercase; letter-spacing: 0.04em; }
        #tabulator-socios .tabulator-row { border-bottom: 1px solid #f1f5f9; }
        #tabulator-socios .tabulator-row:hover { background: #f8fafc !important; }
        #tabulator-socios .tabulator-row.tabulator-selected { background: #eff6ff !important; }
        #tabulator-socios .tabulator-cell { padding: 10px 12px; font-size: 0.9rem; color: #1e293b; }
        #tabulator-socios .tabulator-cell.tabulator-editing input { border: 1px solid #6366f1; border-radius: 6px; padding: 4px 8px; outline: none; }

        /* Tabulator overrides — tienda (mb-left-col, fondo #f7f7f7) */
        #ti-tabulator, #tiped-tabulator { background: transparent; border: none; }
        #ti-tabulator .tabulator-header,
        #tiped-tabulator .tabulator-header { background: #f7f7f7; border-bottom: 1px solid rgba(0,0,0,.08); box-shadow: none; }
        #ti-tabulator .tabulator-col,
        #tiped-tabulator .tabulator-col { background: transparent; border-right: none; }
        #ti-tabulator .tabulator-col-title,
        #tiped-tabulator .tabulator-col-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 13px; color: #000; text-transform: none; letter-spacing: 0; }
        #ti-tabulator .tabulator-row,
        #tiped-tabulator .tabulator-row { background: transparent; border-bottom: 1px solid rgba(0,0,0,.04); }
        #ti-tabulator .tabulator-row:hover,
        #tiped-tabulator .tabulator-row:hover { background: rgba(255,255,255,.6) !important; }
        #ti-tabulator .tabulator-cell,
        #tiped-tabulator .tabulator-cell { padding: 10px 12px; font-family: 'Inter', sans-serif; font-size: 13px; color: #000; border-right: none; }
        #ti-tabulator .tabulator-col-sorter,
        #tiped-tabulator .tabulator-col-sorter { color: #000; opacity: .25; }
        #ti-tabulator .tabulator-col.tabulator-col-sorter-element:hover,
        #tiped-tabulator .tabulator-col.tabulator-col-sorter-element:hover { background: rgba(0,0,0,.04) !important; }
        #ti-tabulator .tabulator-col-resize-handle,
        #tiped-tabulator .tabulator-col-resize-handle { border-color: rgba(0,0,0,.08); }

        /* ===== FINANZAS — Tabulator overrides ===== */
        #fin-mov-tabulator, #fin-prov-tabulator { background:transparent; border:none; }
        #fin-mov-tabulator .tabulator-header, #fin-prov-tabulator .tabulator-header { background:#f7f7f7; border-bottom:1px solid rgba(0,0,0,.08); box-shadow:none; }
        #fin-mov-tabulator .tabulator-col, #fin-prov-tabulator .tabulator-col { background:transparent; border-right:none; }
        #fin-mov-tabulator .tabulator-col-title, #fin-prov-tabulator .tabulator-col-title { font-family:'Syne',sans-serif; font-weight:700; font-size:13px; color:#000; text-transform:none; }
        #fin-mov-tabulator .tabulator-row, #fin-prov-tabulator .tabulator-row { background:transparent; border-bottom:1px solid rgba(0,0,0,.04); }
        #fin-mov-tabulator .tabulator-row:hover, #fin-prov-tabulator .tabulator-row:hover { background:rgba(255,255,255,.7) !important; cursor:pointer; }
        #fin-mov-tabulator .tabulator-row.tabulator-selected, #fin-prov-tabulator .tabulator-row.tabulator-selected { background:#eff6ff !important; }
        #fin-mov-tabulator .tabulator-cell, #fin-prov-tabulator .tabulator-cell { padding:10px 12px; font-family:'Inter',sans-serif; font-size:13px; color:#000; border-right:none; }
        #fin-mov-tabulator .tabulator-col-sorter, #fin-prov-tabulator .tabulator-col-sorter { color:#000; opacity:.25; }

        /* ===== FINANZAS — Layout ===== */
        #tab-finanzas.tab-content.active    { display:flex; flex-direction:column; overflow:hidden; padding:0; }
        #tab-pagos.tab-content.active       { display:flex; flex-direction:column; overflow:hidden; padding:0; }
        #tab-ajustes.tab-content.active     { display:flex; flex-direction:column; overflow:hidden; padding:0; }
        #tab-cuenta.tab-content.active      { display:flex; flex-direction:column; overflow:hidden; padding:0; }
        #tab-facturacion.tab-content.active { display:flex; flex-direction:column; overflow:hidden; padding:0; }
        #tab-plan.tab-content.active        { display:flex; flex-direction:column; overflow:hidden; padding:0; }
        #tab-formularios.tab-content.active { display:flex; flex-direction:column; overflow:hidden; padding:0; }
        #tab-formularios #formularios-vue-root { flex:1; min-height:0; display:flex; flex-direction:column; }
        .fin-subtab-nav { display:flex; gap:8px; flex-wrap:wrap; padding:0 28px 20px; flex-shrink:0; background:none; border:none; }
        .fin-stab { background:#f7f7f7; color:#000; border:none; border-radius:20px; padding:8px 16px; font-family:'Syne',sans-serif; font-weight:700; font-size:14px; cursor:pointer; display:flex; align-items:center; gap:6px; transition:background .15s,color .15s; }
        .fin-stab.active { background:#000; color:#fff; }
        .fin-stab:hover:not(.active) { background:#e5e5e5; }
        .fin-stab i { width:14px; height:14px; }
        .fin-panel { display:none; flex-direction:column; gap:16px; padding:20px 28px; overflow-y:auto; flex:1; min-height:0; }
        .fin-panel.active { display:flex; }

        /* KPI cards */
        .fin-kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; flex-shrink:0; }
        .fin-kpi-card { background:#fff; border-radius:16px; padding:16px 18px; box-shadow:0 1px 4px rgba(0,0,0,.06); border:1.5px solid transparent; }
        .fin-kpi-card.accent-green { border-color:#bbf7d0; }
        .fin-kpi-card.accent-red   { border-color:#fecaca; }
        .fin-kpi-card.accent-amber { border-color:#fde68a; }
        .fin-kpi-label { font-size:12px; color:#94a3b8; font-weight:600; margin:0 0 6px; }
        .fin-kpi-valor { font-family:'Syne',sans-serif; font-size:22px; font-weight:800; margin:0; color:#0f0f0f; }

        /* Cards genéricas */
        .fin-card { background:#fff; border-radius:16px; padding:18px 20px; box-shadow:0 1px 4px rgba(0,0,0,.06); }
        .fin-card-title { font-family:'Syne',sans-serif; font-size:13px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.05em; margin:0 0 12px; }
        .fin-dash-bottom { display:grid; grid-template-columns:1fr 1fr; gap:12px; flex-shrink:0; }
        .fin-sparkline-wrap { width:100%; overflow:hidden; }

        /* Toolbar movimientos */
        .fin-mov-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; flex-shrink:0; }
        .fin-search-pill { display:flex; align-items:center; gap:8px; background:#fff; border:1.5px solid #e2e8f0; border-radius:20px; padding:6px 12px; flex:1; min-width:160px; }
        .fin-search-pill input { border:none; outline:none; font-size:13px; width:100%; background:transparent; }
        .fin-select { border:1.5px solid #e2e8f0; border-radius:10px; padding:7px 10px; font-size:13px; font-family:'Inter',sans-serif; background:#fff; cursor:pointer; outline:none; }
        .fin-btn-icon { background:#000; color:#fff; border:none; border-radius:20px; padding:8px 16px; cursor:pointer; display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; font-family:'Syne',sans-serif; }
        .fin-btn-icon:hover { background:#222; }

        /* Split panels — fin-panel that contains mb-content-grid */
        .fin-split { padding:0 !important; overflow:hidden !important; gap:0 !important; }
        .fin-split .mb-content-grid { flex:1; min-height:0; padding:0 28px 20px; box-sizing:border-box; }

        /* Cuentas grid */
        .fin-cuentas-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
        .fin-cuenta-card { background:#fff; border-radius:18px; padding:20px; box-shadow:0 2px 8px rgba(0,0,0,.06); border-top:3px solid var(--cta-color,#6366f1); }

        /* Deudas */
        .fin-deuda-row { background:#fff; border-radius:14px; padding:16px; box-shadow:0 1px 4px rgba(0,0,0,.05); }
        .fin-deudas-tabs { display:flex; gap:6px; }
        .fin-deudas-tab { background:#f7f7f7; border:none; border-radius:20px; padding:7px 14px; font-family:'Syne',sans-serif; font-size:13px; font-weight:700; cursor:pointer; transition:background .15s,color .15s; }
        .fin-deudas-tab.active { background:#000; color:#fff; }

        /* Panel forms (inline, no modals) */
        .fin-form-label { display:block; font-size:12px; font-weight:700; color:#64748b; margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em; }
        .fin-form-input { width:100%; box-sizing:border-box; padding:10px 14px; border:1.5px solid #e2e8f0; border-radius:12px; font-size:14px; font-family:'Inter',sans-serif; outline:none; transition:border-color .15s; background:#fff; }
        .fin-form-input:focus { border-color:#000; }
        .fin-tipo-toggle { display:flex; gap:6px; }
        .fin-tipo-toggle button { flex:1; padding:10px; border:1.5px solid #e2e8f0; border-radius:12px; background:#fff; cursor:pointer; font-size:13px; font-weight:700; font-family:'Syne',sans-serif; transition:all .15s; }
        .fin-tipo-toggle button.active { background:#000; color:#fff; border-color:#000; }

        /* Proveedor dropdown */
        .fin-prov-dropdown { position:absolute; top:100%; left:0; right:0; background:#fff; border:1.5px solid #e2e8f0; border-radius:12px; z-index:100; box-shadow:0 8px 24px rgba(0,0,0,.12); display:none; max-height:200px; overflow-y:auto; margin-top:4px; }
        .fin-prov-item { padding:10px 14px; cursor:pointer; font-size:13px; border-bottom:1px solid #f1f5f9; }
        .fin-prov-item:last-child { border-bottom:none; }
        .fin-prov-item:hover { background:#f8fafc; }

.tab-modo-edicion-activo { background: #1e293b !important; color: white !important; }

        /* ===== MIEMBROS VIEW — diseño MiembrosView.tsx ===== */
        #tab-socios.tab-content.active, #tab-vales.tab-content.active, #tab-votaciones.tab-content.active { padding: 28px; overflow: hidden; }
        #tab-barra.tab-content.active { overflow-y: auto; }
        #tab-barra.tab-content.active > * { flex-shrink: 0; }
        #pvInlineNombre:empty:before { content: attr(data-placeholder); color: #94a3b8; font-weight: 400; pointer-events: none; }
        #tab-socios .sub-tabs, #tab-comunicaciones .sub-tabs { display:flex; gap:8px; flex-wrap:wrap; background:none; border:none; padding:0; margin-bottom:20px; }
        #tab-socios .sub-tab, #tab-comunicaciones .sub-tab { background:#f7f7f7; color:#000; border:none; border-radius:20px; padding:8px 16px; font-family:'Syne',sans-serif; font-weight:700; font-size:14px; cursor:pointer; transition:background .15s,color .15s; }
        #tab-socios .sub-tab.active, #tab-comunicaciones .sub-tab.active { background:#000; color:#fff; }
        #tab-socios .sub-tab:hover:not(.active), #tab-comunicaciones .sub-tab:hover:not(.active) { background:#e5e5e5; }
        .mb-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; flex-shrink:0; }
        .mb-h1 { font-family:'Syne',sans-serif; font-weight:700; font-size:32px; color:#000; line-height:1.1; margin:0 0 4px; }
        .mb-subtitle { font-family:'Inter',sans-serif; font-size:13px; color:#000; margin:0; }
        .mb-btn-nuevo { background:#000; color:#fff; border:none; border-radius:30px; padding:10px 20px; display:flex; align-items:center; gap:8px; font-family:'Syne',sans-serif; font-weight:700; font-size:16px; cursor:pointer; flex-shrink:0; transition:background .15s; }
        .mb-btn-nuevo:hover { background:#222; }
        .mb-btn-secondary { background:#f1f5f9; color:#334155; border:1px solid #e2e8f0; border-radius:30px; padding:9px 18px; display:flex; align-items:center; gap:8px; font-family:'Syne',sans-serif; font-weight:600; font-size:14px; cursor:pointer; flex-shrink:0; transition:background .15s; }
        .mb-btn-secondary:hover { background:#e2e8f0; }
        .mb-btn-primary { background:#6366f1; color:#fff; border:none; border-radius:30px; padding:10px 22px; display:flex; align-items:center; gap:8px; font-family:'Syne',sans-serif; font-weight:700; font-size:15px; cursor:pointer; flex-shrink:0; transition:background .15s; }
        .mb-btn-primary:hover { background:#4f46e5; }
        .mb-btn-primary:disabled { background:#a5b4fc; cursor:not-allowed; }
        .mb-content-grid { display:flex; gap:12px; flex:1; min-height:0; overflow:hidden; }
        .mb-left-col { background:#f7f7f7; border-radius:30px; padding:24px; display:flex; flex-direction:column; overflow:hidden; min-height:0; flex:1; transition:flex .2s; }
        .mb-content-grid.panel-open .mb-left-col { flex:2; }
        .mb-right-panel { display:none; background:#f7f7f7; border-radius:30px; padding:24px; flex:1; flex-direction:column; overflow:hidden; min-height:0; }
        .mb-content-grid.panel-open .mb-right-panel { display:flex; }
        .mb-search-row { display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-shrink:0; }
        /* Tienda subtabs */
        .ti-subtab-panel { display:none; }
        .ti-subtab-panel.active { display:block; }
        .ti-subtab-bar { display:flex; gap:8px; margin-bottom:20px; background:none; border:none; padding:0; flex-shrink:0; }
        .ti-subtab-btn { background:#f7f7f7; color:#000; border:none; border-radius:20px; padding:8px 16px; font-family:'Syne',sans-serif; font-weight:700; font-size:14px; cursor:pointer; transition:background .15s,color .15s; }
        .ti-subtab-btn.active { background:#000 !important; color:#fff !important; box-shadow:none !important; }
        .ti-subtab-btn:hover:not(.active) { background:#e5e5e5; }
        .status-pills { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; flex-shrink:0; }
        .status-pill { padding:5px 16px; border:1.5px solid #e2e8f0; border-radius:20px; background:#fff; color:#64748b; font-size:0.80rem; font-weight:600; font-family:'Syne',sans-serif; cursor:pointer; transition:background .12s,color .12s,border-color .12s; }
        .status-pill:hover:not(.active) { border-color:#94a3b8; color:#000; }
        .status-pill.active { border-color:#000; background:#000; color:#fff; }
        .mb-table-wrapper { flex:1; overflow:auto; min-height:0; }

        /* ── Pagos module ── */
        .pagos-subtab-nav { display:flex; gap:8px; flex-wrap:wrap; background:none; border:none; padding:0; margin-bottom:20px; flex-shrink:0; }
        .pagos-stab { display:flex; align-items:center; gap:6px; background:#f7f7f7; color:#000; border:none; border-radius:20px; padding:8px 16px; font-family:'Syne',sans-serif; font-weight:700; font-size:14px; cursor:pointer; transition:background .15s,color .15s; }
        .pagos-stab.active { background:#000; color:#fff; }
        .pagos-stab:hover:not(.active) { background:#e5e5e5; }
        .pagos-stab i { width:14px; height:14px; }
        .pagos-panel { display:none; }
        .pagos-panel.active { display:block; }
        .pagos-metrics-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:24px; }
        @media (max-width:900px) { .pagos-metrics-grid { grid-template-columns:repeat(2,1fr); } }
        .pagos-metric-card { background:#fff; border-radius:16px; padding:20px 22px; box-shadow:0 2px 12px rgba(0,0,0,.06); display:flex; flex-direction:column; gap:8px; }
        .pagos-metric-card i { width:22px; height:22px; color:#6366f1; }
        .pmc-label { font-size:0.78rem; color:#64748b; font-weight:500; }
        .pmc-value { font-family:'Syne',sans-serif; font-size:1.6rem; font-weight:700; color:#0f0f0f; }
        .pagos-recientes { padding:0 24px 24px; }
        .pagos-recientes h3 { font-family:'Syne',sans-serif; font-size:1rem; font-weight:700; margin-bottom:12px; color:#0f0f0f; }
        /* ── Gentío Payments ── */
        .gp-status-card { display:flex; align-items:center; gap:14px; background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:14px 18px; box-shadow:0 1px 6px rgba(0,0,0,.05); }
        .gp-icon-wrap { width:32px; height:32px; border-radius:8px; background:#0f0f0f; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
        .gp-title { font-family:'Syne',sans-serif; font-weight:700; font-size:0.9rem; color:#0f0f0f; }
        .gp-subtitle { font-size:0.78rem; color:#64748b; margin-top:1px; }
        .gp-activar-btn { padding:8px 18px; border-radius:10px; background:#0f0f0f; color:#fff; border:none; cursor:pointer; font-family:'Syne',sans-serif; font-size:0.82rem; font-weight:600; white-space:nowrap; transition:background .15s; }
        .gp-activar-btn:hover { background:#222; }
        .gp-badge-active { align-items:center; gap:8px; }
        /* ── Gentío Payments Modal ── */
        .gp-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(2px); }
        .gp-modal-panel { position:relative; background:#fff; border-radius:20px; width:min(960px,calc(100vw - 40px)); height:88vh; display:flex; flex-direction:column; box-shadow:0 24px 80px rgba(0,0,0,.25); animation:gp-slide-up .25s ease; z-index:1; overflow:hidden; }
        @keyframes gp-slide-up { from { transform:translateY(24px); opacity:0; } to { transform:translateY(0); opacity:1; } }
        .gp-modal-header { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid #f1f5f9; flex-shrink:0; }
        .gp-modal-header-left { display:flex; align-items:center; gap:10px; }
        .gp-close-btn { width:32px; height:32px; border-radius:8px; border:none; background:#f1f5f9; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#64748b; transition:background .15s; }
        .gp-close-btn:hover { background:#e2e8f0; color:#0f0f0f; }
        .gp-spinner { width:32px; height:32px; border:3px solid #e2e8f0; border-top-color:#0f0f0f; border-radius:50%; animation:gp-spin .7s linear infinite; }
        @keyframes gp-spin { to { transform:rotate(360deg); } }
        #gp-onboarding-container { flex:1; overflow-y:auto; padding:24px; box-sizing:border-box; }
        .mb-search-pill { flex:1; background:#fff; border-radius:999px; padding:8px 16px; display:flex; align-items:center; gap:8px; }
        .mb-search-input { background:transparent; border:none; outline:none; font-family:'Inter',sans-serif; font-size:13px; flex:1; color:#000; }
        .mb-search-input::placeholder { color:#94a3b8; }
        .mb-filter-btn { background:#fff; border:none; border-radius:999px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s; flex-shrink:0; }
        .mb-filter-btn:hover { background:#e5e5e5; }
        .mb-table-wrap { flex:1; overflow:auto; min-height:0; }
        .mb-table { width:100%; border-collapse:collapse; min-width:max-content; }
        .mb-table { width:100%; border-collapse:collapse; }
        .mb-table thead { position:sticky; top:0; background:#f7f7f7; z-index:2; }
        .mb-table th { padding:12px; text-align:left; font-family:'Syne',sans-serif; font-weight:700; font-size:13px; color:#000; border-bottom:1px solid rgba(0,0,0,.08); text-transform:none; letter-spacing:0; background:none; }
        .mb-table td { padding:10px 12px; font-family:'Inter',sans-serif; font-size:13px; color:#000; border-bottom:1px solid rgba(0,0,0,.04); vertical-align:middle; }
        .mb-table tbody tr { cursor:pointer; transition:background .12s; }
        .mb-table tbody tr:hover { background:rgba(255,255,255,.6); }
        .mb-th-sortable { cursor:pointer; user-select:none; }
        .mb-th-sortable:hover { opacity:.75; }
        .mb-th-inner { display:inline-flex; align-items:center; gap:5px; }
        .mb-sort-icon { display:flex; line-height:1; transition:opacity .15s; flex-shrink:0; }
        .mb-checkbox { cursor:pointer; display:inline-flex; align-items:center; user-select:none; }
        .mb-checkbox input[type="checkbox"] { display:none; }
        .mb-checkbox svg rect { fill:none; stroke:#000; transition:fill .12s, stroke .12s; }
        .mb-checkbox input:checked + svg rect { fill:#000; stroke:#000; }
        .mb-form-group { margin-bottom:16px; }
        .mb-form-label { font-family:'Syne',sans-serif; font-weight:700; font-size:16px; color:#000; display:block; margin-bottom:8px; }
        .mb-form-input { width:100%; background:#fff; border:none; border-radius:30px; padding:10px 16px; font-family:'Inter',sans-serif; font-size:12px; outline:none; box-sizing:border-box; }
        .mb-btn-guardar { width:100%; background:#000; color:#fff; border:none; border-radius:30px; padding:12px; font-family:'Syne',sans-serif; font-weight:700; font-size:16px; cursor:pointer; margin-top:8px; transition:background .15s; }
        .mb-btn-guardar:hover { background:#222; }
        .mb-avatar-sm { width:36px; height:36px; background:#000; border-radius:999px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
        .mb-avatar-sm span { font-family:'Syne',sans-serif; font-weight:700; font-size:14px; color:#fff; }
        .mb-badge { display:inline-block; padding:3px 12px; border-radius:15px; font-family:'Inter',sans-serif; font-size:12px; }
        .mb-badge-activo { background:#dcfce7; color:#166534; }
        .mb-badge-proxima { background:#fef9c3; color:#854d0e; }
        .mb-badge-vencida,.mb-badge-sin-configurar { background:#fee2e2; color:#991b1b; }
        .mb-badge-app { background:#dcfce7; color:#166534; font-size:12px; padding:3px 10px; border-radius:15px; font-family:'Inter',sans-serif; }
        .mb-cols-btn { background:#fff; border:none; border-radius:999px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s; flex-shrink:0; position:relative; }
        .mb-cols-btn:hover { background:#e5e5e5; }
        .mb-col-picker { position:absolute; top:calc(100% + 8px); right:0; background:#fff; border-radius:20px; box-shadow:0 8px 32px rgba(0,0,0,.14); padding:20px; z-index:200; min-width:240px; display:none; }
        .mb-col-picker.open { display:block; }
        .mb-col-picker-title { font-family:'Syne',sans-serif; font-weight:700; font-size:14px; color:#000; margin:0 0 14px; }
        .mb-col-item { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid rgba(0,0,0,.05); user-select:none; }
        .mb-col-item:last-child { border-bottom:none; }
        .mb-col-drag { cursor:grab; display:flex; color:#94a3b8; flex-shrink:0; }
        .mb-col-drag:active { cursor:grabbing; }
        .mb-col-item.dragging { opacity:.4; }
        .mb-col-item.drag-over { border-top:2px solid #000; }
        .mb-col-label { font-family:'Inter',sans-serif; font-size:13px; color:#000; flex:1; }
        .mb-col-toggle { position:relative; width:36px; height:20px; flex-shrink:0; }
        .mb-col-toggle input { display:none; }
        .mb-col-toggle-track { display:block; width:36px; height:20px; background:#e5e5e5; border-radius:999px; cursor:pointer; transition:background .15s; }
        .mb-col-toggle input:checked + .mb-col-toggle-track { background:#000; }
        .mb-col-toggle-track::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; background:#fff; border-radius:999px; transition:left .15s; }
        .mb-col-toggle input:checked + .mb-col-toggle-track::after { left:18px; }
        .mb-col-picker-reset { margin-top:14px; width:100%; background:transparent; border:1px solid #e5e5e5; border-radius:20px; padding:7px; font-family:'Inter',sans-serif; font-size:12px; color:#64748b; cursor:pointer; transition:background .15s; }
        .mb-col-picker-reset:hover { background:#f7f7f7; }
        /* Bulk action bar */
        .mb-bulk-bar { display:none; align-items:center; gap:8px; background:#000; color:#fff; border-radius:20px; padding:9px 14px; margin-top:10px; flex-shrink:0; animation:mbBulkIn .15s ease; }
        .mb-bulk-bar.visible { display:flex; }
        @keyframes mbBulkIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
        .mb-bulk-count { font-family:'Syne',sans-serif; font-weight:700; font-size:13px; flex:1; white-space:nowrap; }
        .mb-bulk-action { background:rgba(255,255,255,.12); border:none; border-radius:20px; color:#fff; padding:5px 13px; font-family:'Inter',sans-serif; font-size:12px; cursor:pointer; transition:background .12s; white-space:nowrap; }
        .mb-bulk-action:hover { background:rgba(255,255,255,.24); }
        .mb-bulk-action.danger { color:#fca5a5; }
        .mb-bulk-action.danger:hover { background:rgba(239,68,68,.3); }
        .mb-bulk-close { background:none; border:none; color:rgba(255,255,255,.5); cursor:pointer; font-size:16px; line-height:1; padding:2px 4px; flex-shrink:0; }
        .mb-bulk-close:hover { color:#fff; }
        /* Gender selector */
        .mb-gender-selector { display:flex; gap:6px; }
        .mb-gender-btn { background:#f7f7f7; border:none; border-radius:20px; padding:7px 16px; font-family:'Inter',sans-serif; font-size:12px; color:#000; cursor:pointer; transition:background .12s,color .12s; }
        .mb-gender-btn:hover { background:#e5e5e5; }
        .mb-gender-btn.active { background:#000; color:#fff; }
        /* Address autocomplete */
        .mb-addr-wrap { position:relative; }
        .mb-addr-dropdown { position:absolute; left:0; right:0; top:calc(100% + 4px); background:#fff; border-radius:16px; box-shadow:0 8px 28px rgba(0,0,0,.13); z-index:300; overflow:hidden; display:none; max-height:220px; overflow-y:auto; }
        .mb-addr-dropdown.open { display:block; }
        .mb-addr-item { padding:10px 16px; font-family:'Inter',sans-serif; font-size:12px; color:#000; cursor:pointer; border-bottom:1px solid #f5f5f5; line-height:1.4; transition:background .1s; }
        .mb-addr-item:last-child { border-bottom:none; }
        .mb-addr-item:hover { background:#f7f7f7; }
        .mb-addr-item strong { font-weight:600; }
        .mb-addr-hint { padding:10px 16px; font-family:'Inter',sans-serif; font-size:12px; color:#94a3b8; }
        /* Filter panel */
        .mb-filter-btn-wrap { position:relative; }
        .mb-filter-btn.active { background:#000; }
        .mb-filter-btn.active svg { stroke:#fff; }
        .mb-filter-badge { position:absolute; top:-5px; right:-5px; background:#000; color:#fff; border-radius:999px; min-width:16px; height:16px; padding:0 4px; font-size:10px; font-family:'Syne',sans-serif; font-weight:700; display:flex; align-items:center; justify-content:center; pointer-events:none; }
        .mb-filter-panel { position:absolute; top:calc(100% + 8px); right:0; background:#fff; border-radius:24px; box-shadow:0 8px 40px rgba(0,0,0,.16); padding:20px; z-index:210; width:300px; display:none; }
        .mb-filter-panel.open { display:block; }
        .mb-fp-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
        .mb-fp-title { font-family:'Syne',sans-serif; font-weight:700; font-size:15px; color:#000; }
        .mb-fp-clear { background:none; border:none; font-family:'Inter',sans-serif; font-size:12px; color:#94a3b8; cursor:pointer; padding:0; }
        .mb-fp-clear:hover { color:#000; }
        .mb-fp-section { margin-bottom:16px; }
        .mb-fp-section:last-of-type { margin-bottom:0; }
        .mb-fp-label { font-family:'Syne',sans-serif; font-weight:700; font-size:12px; color:#94a3b8; text-transform:uppercase; letter-spacing:.05em; margin:0 0 8px; }
        .mb-fp-chips { display:flex; flex-wrap:wrap; gap:6px; }
        .mb-fp-chip { background:#f7f7f7; border:none; border-radius:20px; padding:5px 12px; font-family:'Inter',sans-serif; font-size:12px; color:#000; cursor:pointer; transition:background .12s,color .12s; white-space:nowrap; }
        .mb-fp-chip:hover { background:#e5e5e5; }
        .mb-fp-chip.active { background:#000; color:#fff; }
        .mb-fp-range { display:flex; align-items:center; gap:8px; }
        .mb-fp-range-input { flex:1; background:#f7f7f7; border:none; border-radius:20px; padding:7px 12px; font-family:'Inter',sans-serif; font-size:12px; color:#000; outline:none; width:0; }
        .mb-fp-range-input::placeholder { color:#94a3b8; }
        .mb-fp-range-sep { color:#94a3b8; font-size:12px; flex-shrink:0; }
        .mb-fp-divider { border:none; border-top:1px solid #f0f0f0; margin:12px 0; }
        /* Active filter tags under search row */
        .mb-filter-tags { display:none; flex-wrap:wrap; gap:6px; margin-bottom:12px; flex-shrink:0; }
        .mb-filter-tags.visible { display:flex; }
        .mb-filter-tag { background:#000; color:#fff; border-radius:20px; padding:4px 10px; font-family:'Inter',sans-serif; font-size:11px; display:flex; align-items:center; gap:6px; }
        .mb-filter-tag button { background:none; border:none; color:rgba(255,255,255,.6); cursor:pointer; font-size:13px; line-height:1; padding:0; }
        .mb-filter-tag button:hover { color:#fff; }
        /* Column header drag-to-reorder */
        .mb-th-draggable { cursor:grab; }
        .mb-th-draggable:active { cursor:grabbing; }
        .mb-th-dragging { opacity:.35; }
        .mb-th-drag-over-left  { box-shadow: inset 3px 0 0 #000; }
        .mb-th-drag-over-right { box-shadow: inset -3px 0 0 #000; }
        /* Cell range selection */
        .mb-table td.mb-cell-sel { background:rgba(0,0,0,.08) !important; }
        .mb-table tbody tr:hover td.mb-cell-sel { background:rgba(0,0,0,.1) !important; }
        .mb-table td.mb-cell-copy { background:rgba(0,0,0,.18) !important; transition:background .15s; }
        .mb-table td.mb-cell-copy-hl { background:rgba(0,0,0,.08) !important; }
        .mb-table td.mb-cell-copy-hl.mb-cell-copy { background:rgba(0,0,0,.18) !important; }
        /* Vales: mb-cell-sel is a permanent marker class used for selection queries;
           only show highlight when a cell is actively in a selection (mb-cell-copy-hl) */
        #vl-tbody td.mb-cell-sel:not(.mb-cell-copy-hl) { background: transparent !important; }
        .mb-badge-no-app { background:#f1f5f9; color:#64748b; font-size:12px; padding:3px 10px; border-radius:15px; font-family:'Inter',sans-serif; }
        .mb-panel-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-shrink:0; }
        .mb-panel-title { font-family:'Syne',sans-serif; font-weight:700; font-size:16px; color:#000; }
        .mb-icon-btn { background:none; border:none; cursor:pointer; padding:4px; display:flex; align-items:center; opacity:.7; transition:opacity .15s; }
        .mb-icon-btn:hover { opacity:1; }
        .mb-panel-scroll { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
        .mb-avatar-card { background:#fff; border-radius:30px; padding:24px; display:flex; flex-direction:column; align-items:center; text-align:center; }
        .mb-avatar-lg { width:72px; height:72px; background:#000; border-radius:999px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
        .mb-avatar-lg span { font-family:'Syne',sans-serif; font-weight:700; font-size:28px; color:#fff; }
        .mb-member-name { font-family:'Syne',sans-serif; font-weight:700; font-size:20px; color:#000; margin:0 0 4px; }
        .mb-member-group { font-family:'Inter',sans-serif; font-size:13px; color:#94a3b8; margin:0; }
        .mb-info-card { background:#fff; border-radius:30px; padding:24px; }
        .mb-info-title { font-family:'Syne',sans-serif; font-weight:700; font-size:16px; color:#000; margin:0 0 16px; }
        .mb-info-row { margin-bottom:12px; }
        .mb-info-label { font-family:'Inter',sans-serif; font-size:13px; color:#94a3b8; margin:0 0 3px; }
        .mb-info-value { font-family:'Inter',sans-serif; font-size:13px; color:#000; margin:0; }
        .mb-listado-subtab { flex:1; min-height:0; overflow:hidden; }
        .mb-listado-subtab.active { display:flex !important; flex-direction:column; }
        .mb-secondary-subtab.active { display:block; }

        /* ── Grupos Familiares ── */
        .gf-wrap { background:#f7f7f7; border-radius:30px; padding:24px; }
        .gf-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; flex-shrink:0; }
        .gf-title { font-family:'Syne',sans-serif; font-weight:700; font-size:20px; color:#000; margin:0 0 3px; }
        .gf-subtitle { font-family:'Inter',sans-serif; font-size:13px; color:#94a3b8; margin:0; max-width:420px; line-height:1.5; }
        .gf-btn-nuevo { background:#0f0f0f; color:#fff; border:none; border-radius:999px; padding:9px 20px; font-family:'Syne',sans-serif; font-weight:700; font-size:13px; cursor:pointer; display:flex; align-items:center; gap:7px; transition:background .15s; flex-shrink:0; }
        .gf-btn-nuevo:hover { background:#333; }
        .gf-list { display:flex; flex-direction:column; gap:10px; }
        .gf-card { background:#fff; border-radius:20px; overflow:hidden; animation:gfIn .18s ease; }
        @keyframes gfIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
        .gf-card-header { display:flex; align-items:center; justify-content:space-between; padding:15px 18px; }
        .gf-card-header-left { display:flex; align-items:center; gap:8px; }
        .gf-group-icon { width:34px; height:34px; border-radius:10px; background:#f1f5f9; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
        .gf-group-name { font-family:'Syne',sans-serif; font-weight:700; font-size:15px; color:#000; margin:0 0 1px; }
        .gf-count { font-family:'Inter',sans-serif; font-size:12px; color:#94a3b8; margin:0; }
        .gf-header-actions { display:flex; align-items:center; gap:6px; }
        .gf-btn-add { background:#f7f7f7; border:none; border-radius:999px; padding:7px 14px; font-family:'Syne',sans-serif; font-weight:700; font-size:12px; color:#000; cursor:pointer; transition:background .15s; display:flex; align-items:center; gap:5px; }
        .gf-btn-add:hover { background:#e5e5e5; }
        .gf-btn-del { background:none; border:none; width:28px; height:28px; border-radius:999px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#cbd5e1; transition:background .15s,color .15s; flex-shrink:0; }
        .gf-btn-del:hover { background:#fee2e2; color:#991b1b; }
        .gf-members { border-top:1px solid #f7f7f7; }
        .gf-member-row { display:flex; align-items:center; gap:10px; padding:11px 18px; border-bottom:1px solid #f7f7f7; }
        .gf-member-row:last-child { border-bottom:none; }
        .gf-m-avatar { width:32px; height:32px; border-radius:999px; background:#0f0f0f; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
        .gf-m-avatar span { font-family:'Syne',sans-serif; font-weight:700; font-size:11px; color:#fff; line-height:1; }
        .gf-m-info { flex:1; min-width:0; }
        .gf-m-name { font-family:'Syne',sans-serif; font-weight:700; font-size:13px; color:#000; margin:0 0 1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .gf-m-meta { font-family:'Inter',sans-serif; font-size:12px; color:#94a3b8; margin:0; display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
        .gf-badge { display:inline-flex; align-items:center; padding:2px 9px; border-radius:999px; font-family:'Inter',sans-serif; font-size:11px; font-weight:600; }
        .gf-badge-titular { background:#0f0f0f; color:#fff; }
        .gf-badge-tutor { background:#e5e7eb; color:#374151; }
        .gf-badge-hijo { background:#f1f5f9; color:#64748b; }
        .gf-badge-otro { background:#f1f5f9; color:#94a3b8; }
        .gf-badge-app { background:#dcfce7; color:#166534; }
        .gf-badge-noapp { background:#f1f5f9; color:#94a3b8; }
        .gf-m-remove { background:none; border:none; width:26px; height:26px; border-radius:999px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#cbd5e1; transition:background .12s,color .12s; flex-shrink:0; }
        .gf-m-remove:hover { background:#fee2e2; color:#991b1b; }
        .gf-empty-group { padding:14px 18px; font-family:'Inter',sans-serif; font-size:13px; color:#94a3b8; text-align:center; border-top:1px solid #f7f7f7; }
        .gf-empty { text-align:center; padding:52px 24px; }
        .gf-empty-icon { width:52px; height:52px; background:#f1f5f9; border-radius:999px; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
        .gf-empty-title { font-family:'Syne',sans-serif; font-weight:700; font-size:16px; color:#000; margin:0 0 6px; }
        .gf-empty-sub { font-family:'Inter',sans-serif; font-size:13px; color:#94a3b8; margin:0; }
        .gf-skel { background:#fff; border-radius:20px; padding:18px; }
        .gf-skel-header { display:flex; gap:10px; align-items:center; margin-bottom:12px; }
        .gf-skel-sq { width:34px; height:34px; border-radius:10px; background:#f0f0f0; flex-shrink:0; animation:gfSkel 1.4s ease infinite; }
        .gf-skel-lines { flex:1; }
        .gf-skel-line { height:11px; border-radius:999px; background:#f0f0f0; margin-bottom:6px; animation:gfSkel 1.4s ease infinite; }
        .gf-skel-line:last-child { margin-bottom:0; }
        @keyframes gfSkel { 0%,100%{opacity:1} 50%{opacity:.4} }
        .gf-new-card { background:#fff; border-radius:20px; padding:18px 20px; animation:gfIn .18s ease; border:1.5px dashed #e2e8f0; }
        .gf-new-label { font-family:'Syne',sans-serif; font-weight:700; font-size:13px; color:#000; margin:0 0 8px; display:block; }
        .gf-new-input { width:100%; background:#f7f7f7; border:none; border-radius:999px; padding:10px 18px; font-family:'Inter',sans-serif; font-size:13px; color:#000; outline:none; box-sizing:border-box; margin-bottom:12px; transition:box-shadow .15s; }
        .gf-new-input::placeholder { color:#94a3b8; }
        .gf-new-input:focus { box-shadow:0 0 0 2px rgba(0,0,0,.12); }
        .gf-new-actions { display:flex; gap:6px; justify-content:flex-end; }
        .gf-confirm-row { padding:12px 18px; background:#fff5f5; border-top:1px solid #fecaca; display:flex; align-items:center; justify-content:space-between; gap:10px; }
        .gf-confirm-text { font-family:'Inter',sans-serif; font-size:13px; color:#991b1b; margin:0; }
        .gf-confirm-actions { display:flex; gap:6px; flex-shrink:0; }
        .gf-modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; z-index:9999; animation:gfFadeIn .15s ease; }
        @keyframes gfFadeIn { from{opacity:0} to{opacity:1} }
        .gf-modal { background:#fff; border-radius:24px; padding:28px; width:400px; max-width:calc(100vw - 32px); box-shadow:0 24px 60px rgba(0,0,0,.18); animation:gfSlideUp .2s ease; }
        @keyframes gfSlideUp { from{transform:translateY(14px);opacity:0} to{transform:none;opacity:1} }
        .gf-modal-title { font-family:'Syne',sans-serif; font-weight:700; font-size:18px; color:#000; margin:0 0 3px; }
        .gf-modal-sub { font-family:'Inter',sans-serif; font-size:13px; color:#94a3b8; margin:0 0 20px; }
        .gf-modal-label { font-family:'Syne',sans-serif; font-weight:700; font-size:13px; color:#000; display:block; margin:0 0 6px; }
        .gf-modal-search { display:flex; align-items:center; gap:8px; background:#f7f7f7; border-radius:999px; padding:8px 14px; margin-bottom:8px; }
        .gf-modal-search-inp { border:none; outline:none; background:transparent; font-family:'Inter',sans-serif; font-size:13px; color:#000; flex:1; }
        .gf-modal-search-inp::placeholder { color:#94a3b8; }
        .gf-modal-list { max-height:180px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; margin-bottom:16px; }
        .gf-modal-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:12px; cursor:pointer; transition:background .1s; border:1.5px solid transparent; }
        .gf-modal-item:hover { background:#f7f7f7; }
        .gf-modal-item.sel { background:#f7f7f7; border-color:#0f0f0f; }
        .gf-modal-item-name { font-family:'Syne',sans-serif; font-weight:700; font-size:13px; color:#000; margin:0 0 1px; }
        .gf-modal-item-detail { font-family:'Inter',sans-serif; font-size:12px; color:#94a3b8; margin:0; }
        .gf-role-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:20px; }
        .gf-role-btn { background:#f7f7f7; border:1.5px solid transparent; border-radius:12px; padding:10px 14px; font-family:'Syne',sans-serif; font-weight:700; font-size:13px; color:#64748b; cursor:pointer; transition:all .15s; text-align:left; }
        .gf-role-btn:hover { background:#e5e5e5; color:#000; }
        .gf-role-btn.sel { background:#0f0f0f; color:#fff; border-color:#0f0f0f; }
        .gf-modal-footer { display:flex; gap:8px; justify-content:flex-end; }

        /* ── Vinculaciones ── */
        .vv-wrap { background:#f7f7f7; border-radius:30px; padding:24px; }
        .vv-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; flex-shrink:0; }
        .vv-title { font-family:'Syne',sans-serif; font-weight:700; font-size:20px; color:#000; margin:0 0 3px; }
        .vv-subtitle { font-family:'Inter',sans-serif; font-size:13px; color:#94a3b8; margin:0; max-width:420px; line-height:1.5; }
        .vv-refresh { background:#fff; border:none; border-radius:999px; padding:9px 18px; font-family:'Syne',sans-serif; font-weight:700; font-size:13px; color:#000; cursor:pointer; display:flex; align-items:center; gap:6px; transition:background .15s; flex-shrink:0; }
        .vv-refresh:hover { background:#e5e5e5; }
        .vv-list { display:flex; flex-direction:column; gap:10px; }
        .vv-card { background:#fff; border-radius:20px; padding:20px 22px; animation:vvIn .18s ease; }
        @keyframes vvIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
        .vv-card-body { display:grid; grid-template-columns:1fr 28px 1fr; align-items:center; gap:12px; margin-bottom:16px; }
        .vv-side { min-width:0; }
        .vv-side-label { font-family:'Inter',sans-serif; font-size:11px; font-weight:600; color:#94a3b8; text-transform:uppercase; letter-spacing:.05em; margin:0 0 6px; }
        .vv-side-header { display:flex; align-items:center; gap:9px; margin-bottom:5px; }
        .vv-avatar { width:36px; height:36px; border-radius:999px; background:#0f0f0f; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
        .vv-avatar span { font-family:'Syne',sans-serif; font-weight:700; font-size:12px; color:#fff; line-height:1; }
        .vv-avatar.vv-unlinked { background:#f1f5f9; }
        .vv-avatar.vv-unlinked span { color:#94a3b8; }
        .vv-side-name { font-family:'Syne',sans-serif; font-weight:700; font-size:14px; color:#000; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .vv-side-detail { font-family:'Inter',sans-serif; font-size:12px; color:#64748b; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .vv-side-detail + .vv-side-detail { margin-top:2px; }
        .vv-arrow { display:flex; justify-content:center; align-items:center; }
        .vv-divider { border:none; border-top:1px solid #f1f5f9; margin:0 0 14px; }
        .vv-card-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
        .vv-date { font-family:'Inter',sans-serif; font-size:12px; color:#94a3b8; }
        .vv-actions { display:flex; gap:6px; flex-wrap:wrap; }
        .vv-btn { border:none; border-radius:999px; padding:8px 18px; font-family:'Syne',sans-serif; font-weight:700; font-size:13px; cursor:pointer; transition:background .15s,color .15s; white-space:nowrap; line-height:1; }
        .vv-btn-primary { background:#0f0f0f; color:#fff; }
        .vv-btn-primary:hover { background:#333; }
        .vv-btn-secondary { background:#f7f7f7; color:#0f0f0f; }
        .vv-btn-secondary:hover { background:#e5e5e5; }
        .vv-btn-ghost { background:transparent; color:#94a3b8; border:none; }
        .vv-btn-ghost:hover { background:#fee2e2; color:#991b1b; }
        .vv-empty { text-align:center; padding:52px 24px; }
        .vv-empty-icon { width:52px; height:52px; background:#f1f5f9; border-radius:999px; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
        .vv-empty-title { font-family:'Syne',sans-serif; font-weight:700; font-size:16px; color:#000; margin:0 0 6px; }
        .vv-empty-sub { font-family:'Inter',sans-serif; font-size:13px; color:#94a3b8; margin:0; }
        .vv-skel { background:#fff; border-radius:20px; padding:20px 22px; margin-bottom:10px; }
        .vv-skel-row { display:flex; gap:12px; align-items:center; }
        .vv-skel-circle { width:36px; height:36px; border-radius:999px; background:#f0f0f0; flex-shrink:0; animation:vvSkel 1.4s ease infinite; }
        .vv-skel-lines { flex:1; }
        .vv-skel-line { height:11px; border-radius:999px; background:#f0f0f0; margin-bottom:7px; animation:vvSkel 1.4s ease infinite; }
        .vv-skel-line:last-child { margin-bottom:0; }
        @keyframes vvSkel { 0%,100%{opacity:1} 50%{opacity:.4} }
        .vv-selector { margin-top:12px; background:#f7f7f7; border-radius:16px; padding:16px; }
        .vv-sel-title { font-family:'Syne',sans-serif; font-weight:700; font-size:14px; color:#000; margin:0 0 10px; }
        .vv-sel-search { display:flex; align-items:center; gap:8px; background:#fff; border-radius:999px; padding:8px 14px; margin-bottom:10px; }
        .vv-sel-input { border:none; outline:none; font-family:'Inter',sans-serif; font-size:13px; flex:1; color:#000; background:transparent; }
        .vv-sel-input::placeholder { color:#94a3b8; }
        .vv-sel-list { max-height:240px; overflow-y:auto; display:flex; flex-direction:column; gap:3px; }
        .vv-sel-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; transition:background .1s; }
        .vv-sel-item:hover { background:#fff; }
        .vv-sel-item-info { flex:1; min-width:0; }
        .vv-sel-item-name { font-family:'Syne',sans-serif; font-weight:700; font-size:13px; color:#0f0f0f; margin:0 0 1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .vv-sel-item-detail { font-family:'Inter',sans-serif; font-size:12px; color:#64748b; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .vv-sel-btn { background:#0f0f0f; color:#fff; border:none; border-radius:999px; padding:6px 14px; font-family:'Syne',sans-serif; font-weight:700; font-size:12px; cursor:pointer; white-space:nowrap; flex-shrink:0; transition:background .15s; }
        .vv-sel-btn:hover { background:#333; }
        .vv-reject { margin-top:12px; background:#fff5f5; border-radius:14px; padding:16px; }
        .vv-reject-label { font-family:'Syne',sans-serif; font-weight:700; font-size:13px; color:#991b1b; margin:0 0 8px; }
        .vv-reject-input { width:100%; background:#fff; border:1px solid #fecaca; border-radius:10px; padding:9px 12px; font-family:'Inter',sans-serif; font-size:13px; color:#0f0f0f; outline:none; box-sizing:border-box; margin-bottom:10px; }
        .vv-reject-input::placeholder { color:#94a3b8; }
        .vv-reject-input:focus { border-color:#f87171; }
        .vv-reject-actions { display:flex; gap:6px; justify-content:flex-end; }
        .vv-btn-danger { background:#fee2e2; color:#991b1b; }
        .vv-btn-danger:hover { background:#fecaca; }

        /* ══════════════════════════════════════════════════════
           GENTI AI CHAT — gi-* prefix
        ══════════════════════════════════════════════════════ */
        #tab-tobi.tab-content.active { display:flex; flex-direction:column; overflow:hidden; padding:0; }
        .gi-wrap { display:flex; flex-direction:column; flex:1; min-height:0; background:#fff; overflow:hidden; position:relative; }
        .gi-header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px 16px; background:#fff; flex-shrink:0; }
        .gi-header-title { font-family:'Syne',sans-serif; font-weight:700; font-size:32px; color:#000; line-height:1.1; margin:0; }
        .gi-msgs { flex:1; overflow-y:auto; padding:16px max(24px, calc((100% - 820px) / 2)); display:flex; flex-direction:column; justify-content:flex-end; gap:10px; scroll-behavior:smooth; }
        .gi-msg { display:flex; flex-direction:column; gap:4px; animation:gi-in .2s ease; font-family:'Inter',sans-serif; }
        .gi-msg-user { align-self:flex-end; max-width:75%; }
        .gi-msg-user .gi-bubble { background:#0f0f0f; color:#fff; border-radius:18px 18px 4px 18px; padding:10px 15px; font-size:14px; line-height:1.5; font-family:'Inter',sans-serif; }
        .gi-msg-ai { align-self:flex-start; max-width:88%; }
        .gi-msg-ai .gi-bubble { background:transparent; color:#0f0f0f; padding:2px 0; font-size:14px; line-height:1.65; font-family:'Inter',sans-serif; }
        .gi-thinking { display:flex; align-items:center; gap:9px; min-height:28px; padding:2px 0; }
        .gi-thinking-dot { width:9px; height:9px; border-radius:50%; background:#0f0f0f; flex-shrink:0; animation:gi-blink 1s ease-in-out infinite; }
        .gi-thinking-text { font-size:12.5px; color:#94a3b8; font-style:italic; transition:opacity .3s; }
        @keyframes gi-blink { 0%,100%{opacity:1} 50%{opacity:0} }
        @keyframes gi-in { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
        /* ── Tabla ── */
        .gi-table-wrap { overflow-x:auto; margin-top:8px; border-radius:12px; border:1px solid #e8e8e8; }
        .gi-table { width:100%; border-collapse:collapse; font-size:13px; font-family:'Inter',sans-serif; user-select:text; }
        .gi-table thead tr { background:#f7f7f7; }
        .gi-table th { padding:10px 14px; text-align:left; font-weight:600; font-size:11px; color:#64748b; text-transform:uppercase; letter-spacing:.6px; border-bottom:1px solid #e8e8e8; white-space:nowrap; user-select:text; }
        .gi-table td { padding:10px 14px; border-bottom:1px solid #f1f5f9; color:#0f0f0f; user-select:text; cursor:text; }
        .gi-table tbody tr:last-child td { border-bottom:none; }
        .gi-table tbody tr:hover { background:#f8fafc; }
        .gi-table-summary { padding:8px 14px; font-size:12px; color:#64748b; background:#f7f7f7; border-top:1px solid #e8e8e8; border-radius:0 0 12px 12px; }
        /* ── Estado vacío ── */
        .gi-wrap.gi-empty .gi-msgs { display:none; }
        .gi-wrap.gi-empty .gi-new-chat-bar { display:none; }
        .gi-wrap.gi-empty .gi-input-wrap { flex:1; display:flex; flex-direction:column; justify-content:center; padding-bottom:18%; }
        .gi-wrap.gi-empty .gi-input-row { padding:14px 8px 14px 20px; }
        .gi-wrap.gi-empty .gi-textarea { min-height:32px; font-size:15px; }
        /* ── Barra nueva conversación ── */
        .gi-new-chat-bar { display:flex; justify-content:center; padding:8px 0 4px; flex-shrink:0; }
        .gi-new-chat-btn { border:1px solid #e2e8f0; border-radius:999px; padding:5px 14px; font-size:12px; font-family:'Inter',sans-serif; color:#64748b; background:#fff; cursor:pointer; transition:border-color .15s,color .15s; display:flex; align-items:center; gap:5px; }
        .gi-new-chat-btn:hover { border-color:#0f0f0f; color:#0f0f0f; }
        /* ── Aurora ── */
        .gi-aurora-wrap { position:relative; }
        .gi-input-row { transition:box-shadow .8s ease; }
        .gi-aurora-wrap.aurora-on .gi-input-row,
        .gi-wrap.gi-empty .gi-aurora-wrap .gi-input-row {
            animation:gi-aurora-shadow 4s ease-in-out infinite;
        }
        @keyframes gi-aurora-shadow {
            0%,100% { box-shadow:0 0 16px 4px rgba(6,214,160,.45), 0 0 36px 10px rgba(17,138,178,.28), 0 0 60px 18px rgba(131,56,236,.18); }
            33%     { box-shadow:0 0 16px 4px rgba(17,138,178,.45), 0 0 36px 10px rgba(131,56,236,.28), 0 0 60px 18px rgba(6,214,160,.18); }
            66%     { box-shadow:0 0 16px 4px rgba(131,56,236,.45), 0 0 36px 10px rgba(6,214,160,.28), 0 0 60px 18px rgba(17,138,178,.18); }
        }
        .gi-empty-hero { display:none; text-align:center; margin-bottom:28px; }
        .gi-wrap.gi-empty .gi-empty-hero { display:block; }
        .gi-empty-hero-title { font-family:'Syne',sans-serif; font-weight:700; font-size:42px; color:#0f0f0f; line-height:1.1; margin-bottom:8px; transition:opacity .35s; }
        .gi-empty-hero-sub { font-family:'Inter',sans-serif; font-size:15px; color:#94a3b8; font-weight:400; transition:opacity .3s; }
        .gi-metrics { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
        .gi-metric-card { background:#fff; border:1px solid #e8e8e8; border-radius:12px; padding:12px 16px; flex:1; min-width:90px; }
        .gi-metric-val { font-family:'Syne',sans-serif; font-weight:800; font-size:20px; color:#0f0f0f; line-height:1; }
        .gi-metric-lbl { font-size:11px; color:#64748b; margin-top:4px; }
        .gi-draft { background:#fff; border:1.5px solid #0f0f0f; border-radius:14px; overflow:hidden; margin-top:6px; }
        .gi-draft-head { background:#0f0f0f; color:#fff; font-family:'Syne',sans-serif; font-weight:800; font-size:11px; padding:10px 14px; letter-spacing:.5px; }
        .gi-draft-body { padding:14px; display:flex; flex-direction:column; gap:6px; }
        .gi-draft-field { display:flex; gap:8px; font-size:13px; }
        .gi-draft-key { color:#64748b; min-width:90px; flex-shrink:0; font-weight:600; font-size:12px; }
        .gi-draft-val { color:#0f0f0f; flex:1; word-break:break-word; }
        .gi-draft-btns { display:flex; gap:6px; padding:0 14px 14px; }
        .gi-draft-ok { flex:1; background:#0f0f0f; color:#fff; border:none; border-radius:999px; padding:10px 16px; font-size:13px; font-weight:700; cursor:pointer; font-family:'Inter',sans-serif; transition:opacity .15s; }
        .gi-draft-ok:hover { opacity:.85; }
        .gi-draft-ok:disabled { opacity:.45; cursor:not-allowed; }
        .gi-draft-edit { background:#f1f5f9; color:#475569; border:none; border-radius:999px; padding:10px 14px; font-size:13px; font-weight:600; cursor:pointer; font-family:'Inter',sans-serif; transition:background .15s; }
        .gi-draft-edit:hover { background:#e2e8f0; }
        .gi-draft-form-meta { padding:14px 14px 10px; }
        .gi-draft-form-title { font-size:15px; font-weight:700; color:#0f0f0f; margin:0 0 3px; line-height:1.3; }
        .gi-draft-form-desc { font-size:12px; color:#64748b; margin:0; line-height:1.4; }
        .gi-draft-campos { display:flex; flex-direction:column; gap:4px; padding:0 14px 6px; }
        .gi-draft-campo { display:flex; align-items:center; gap:9px; padding:8px 11px; background:#f8fafc; border-radius:9px; border:1px solid #f1f5f9; }
        .gi-draft-campo-type { font-size:9.5px; font-weight:800; padding:3px 7px; border-radius:999px; letter-spacing:.4px; text-transform:uppercase; flex-shrink:0; }
        .gi-draft-campo-label { flex:1; font-size:12.5px; color:#1e293b; font-weight:500; }
        .gi-draft-campo-req { color:#ef4444; font-weight:800; font-size:13px; line-height:1; margin-left:2px; }
        .gi-draft-form-count { font-size:11px; color:#94a3b8; padding:0 14px 10px; }
        .gi-img-zone { border:2px dashed #cbd5e1; border-radius:12px; padding:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; cursor:pointer; transition:border-color .2s,background .2s; margin-top:6px; text-align:center; }
        .gi-img-zone:hover { border-color:#0f0f0f; background:#fafafa; }
        .gi-img-zone p { margin:0; color:#64748b; font-size:13px; }
        .gi-insights { background:#fffbeb; border:1.5px solid #fde68a; border-radius:12px; padding:12px 14px; margin-top:6px; }
        .gi-insights-title { font-size:12px; font-weight:700; color:#92400e; margin-bottom:6px; }
        .gi-insights-item { font-size:13px; color:#78350f; padding:3px 0; display:flex; align-items:center; gap:6px; }
        .gi-insights-item::before { content:'·'; font-weight:900; }
        .gi-input-wrap { padding:28px max(24px, calc((100% - 820px) / 2)) 20px; background:#fff; flex-shrink:0; }
        .gi-input-row { display:flex; align-items:center; gap:8px; background:#f7f7f7; border-radius:999px; padding:6px 10px 6px 16px; border:1.5px solid #e8e8e8; transition:border-color .2s; }
        .gi-input-row:focus-within { border-color:#e8e8e8; }
        .gi-textarea { flex:1; border:none; background:transparent; font-size:14px; font-family:'Inter',sans-serif; color:#0f0f0f; resize:none; outline:none; max-height:120px; padding:4px 0; line-height:1.5; }
        .gi-textarea::placeholder { color:#94a3b8; }
        .gi-clip-btn { width:34px; height:34px; border:none; background:transparent; cursor:pointer; color:#94a3b8; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:color .15s,background .15s; flex-shrink:0; }
        .gi-clip-btn:hover { color:#0f0f0f; background:#e8e8e8; }
        .gi-hist-panel { position:absolute; top:64px; right:24px; width:290px; background:#fff; border:1px solid #e8e8e8; border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.1); z-index:200; overflow:hidden; max-height:420px; display:none; flex-direction:column; }
        .gi-hist-panel.open { display:flex; }
        .gi-hist-head { padding:12px 16px; font-family:'Syne',sans-serif; font-weight:700; font-size:13px; color:#000; border-bottom:1px solid #f1f5f9; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; }
        .gi-hist-list { overflow-y:auto; flex:1; }
        .gi-hist-item { padding:10px 16px; cursor:pointer; border-bottom:1px solid #f7f7f7; transition:background .1s; }
        .gi-hist-item:hover { background:#f7f7f7; }
        .gi-hist-item-date { font-size:11px; color:#94a3b8; font-family:'Inter',sans-serif; margin-bottom:2px; }
        .gi-hist-item-preview { font-size:13px; color:#0f0f0f; font-family:'Inter',sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .gi-hist-empty { padding:28px 16px; text-align:center; color:#94a3b8; font-size:13px; font-family:'Inter',sans-serif; }
        .gi-send-btn { width:44px; height:44px; border:none; background:#0f0f0f; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:opacity .15s; padding:0; }
        .gi-send-btn:hover { opacity:.8; }
        .gi-send-btn:disabled { opacity:.3; cursor:not-allowed; }
        .gi-send-btn svg { width:22px; height:22px; display:block; }
        .gi-action-btn { border:1px solid #e2e8f0; border-radius:999px; padding:7px 14px; font-size:12px; font-weight:600; cursor:pointer; background:#fff; color:#0f0f0f; margin-top:6px; font-family:'Inter',sans-serif; transition:background .15s; display:inline-block; }
        .gi-action-btn:hover { background:#f1f5f9; }

        /* ── PV tables ──────────────────────────────────────────────────── */
        .pv-row { cursor:pointer; }
        .pv-period-btn { background:transparent; border:1.5px solid #e8e8e8; border-radius:999px; padding:4px 12px; font-size:0.75rem; font-weight:700; cursor:pointer; color:#64748b; transition:all .15s; font-family:'Inter',sans-serif; }
        .pv-period-btn.active { background:#0f0f0f; border-color:#0f0f0f; color:#fff; }

        /* ── Barra: category chips ───────────────────────────────────────── */
        .barra-cat-chip { background:#f7f7f7; border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:2px; border:1.5px solid #f1f5f9; }
        .barra-cat-chip-emoji { font-size:1.4rem; margin-bottom:4px; }
        .barra-cat-chip-name { font-size:0.69rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; }
        .barra-cat-chip-qty { font-family:'Syne',sans-serif; font-weight:700; font-size:1.7rem; color:#0f0f0f; line-height:1.05; }
        .barra-cat-chip-total { font-size:0.78rem; font-weight:500; color:#64748b; }
        .barra-cat-chip--total { background:#0f0f0f; border-color:#0f0f0f; }
        .barra-cat-chip--total .barra-cat-chip-name,
        .barra-cat-chip--total .barra-cat-chip-qty,
        .barra-cat-chip--total .barra-cat-chip-total { color:#fff; }
        .barra-cat-chip--total .barra-cat-chip-emoji { filter:grayscale(0); }

        /* ── POS modal ───────────────────────────────────────────────────── */
        .pos-wrap { display:grid; grid-template-columns:1fr 340px; gap:0; height:calc(90vh - 72px); min-height:0; }
        .pos-products-panel { display:flex; flex-direction:column; min-height:0; padding:20px 20px 20px 24px; border-right:1px solid #f1f5f9; }
        .pos-cart-panel { display:flex; flex-direction:column; min-height:0; padding:20px 24px 20px 20px; }
        .pos-cat-bar { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:16px; flex-shrink:0; }
        .pos-product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; overflow-y:auto; flex:1; padding-right:4px; }
        .pos-product-card { background:#f7f7f7; border-radius:14px; padding:14px 12px; cursor:pointer; transition:background .12s,transform .1s; text-align:center; border:1.5px solid transparent; display:flex; flex-direction:column; align-items:center; gap:4px; }
        .pos-product-card:hover { background:#f1f5f9; transform:translateY(-1px); }
        .pos-product-card:active { transform:scale(.97); }
        .pos-product-card-emoji { font-size:2rem; margin-bottom:2px; }
        .pos-product-card-name { font-size:0.8rem; font-weight:700; color:#0f0f0f; line-height:1.2; word-break:break-word; }
        .pos-product-card-price { font-size:0.88rem; font-weight:800; color:#10b981; margin-top:2px; }
        .pos-cart-title { font-family:'Syne',sans-serif; font-weight:700; font-size:1rem; color:#0f0f0f; margin-bottom:12px; flex-shrink:0; }
        .pos-cart-items { flex:1; overflow-y:auto; min-height:0; display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
        .pos-cart-empty { display:flex; align-items:center; justify-content:center; height:100%; color:#94a3b8; font-size:0.83rem; }
        .pos-cart-item { display:flex; align-items:center; gap:8px; background:#f7f7f7; border-radius:10px; padding:9px 11px; }
        .pos-cart-item-name { flex:1; font-size:0.83rem; font-weight:600; color:#0f0f0f; min-width:0; }
        .pos-cart-item-price { font-size:0.78rem; color:#64748b; }
        .pos-cart-qty-btn { background:#e8e8e8; border:none; width:26px; height:26px; border-radius:6px; cursor:pointer; font-weight:700; font-size:0.9rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
        .pos-cart-qty { font-weight:700; font-size:0.88rem; min-width:20px; text-align:center; }
        .pos-cart-del { background:none; border:none; cursor:pointer; color:#94a3b8; padding:0; line-height:1; font-size:1.1rem; margin-left:2px; }
        .pos-cart-del:hover { color:#ef4444; }
        .pos-total-bar { border-top:1.5px solid #f1f5f9; padding-top:14px; flex-shrink:0; }
        .pos-total-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
        .pos-total-label { font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:#94a3b8; }
        .pos-total-value { font-family:'Syne',sans-serif; font-weight:700; font-size:2rem; color:#0f0f0f; line-height:1; }
        .pos-pay-btn { width:100%; padding:14px; border:none; background:#0f0f0f; color:#fff; border-radius:12px; font-family:'Syne',sans-serif; font-weight:700; font-size:1rem; cursor:pointer; transition:opacity .15s; }
        .pos-pay-btn:hover { opacity:.85; }
        .pos-clear-btn { width:100%; padding:10px; border:1.5px solid #e8e8e8; background:#fff; color:#64748b; border-radius:10px; font-size:0.83rem; font-weight:600; cursor:pointer; margin-top:7px; transition:background .12s; }
        .pos-clear-btn:hover { background:#f8fafc; }

        /* ── Producto modal ──────────────────────────────────────────────── */
        .prod-modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
        .prod-modal-title { font-family:'Syne',sans-serif; font-weight:700; font-size:1.2rem; color:#0f0f0f; }
        .prod-modal-close { background:none; border:none; cursor:pointer; color:#94a3b8; padding:4px; display:flex; align-items:center; justify-content:center; border-radius:8px; transition:background .12s; }
        .prod-modal-close:hover { background:#f1f5f9; color:#0f0f0f; }
        .prod-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
        .prod-form-field { display:flex; flex-direction:column; gap:5px; }
        .prod-form-field label { font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#64748b; }
        .prod-form-field input, .prod-form-field select { padding:10px 13px; border:1.5px solid #e8e8e8; border-radius:10px; font-size:0.9rem; font-family:'Inter',sans-serif; color:#0f0f0f; outline:none; transition:border-color .15s; background:#fff; }
        .prod-form-field input:focus, .prod-form-field select:focus { border-color:#0f0f0f; }
        .prod-form-check { display:flex; align-items:center; gap:9px; cursor:pointer; font-size:0.88rem; font-weight:500; color:#475569; margin-top:4px; }
        .prod-modal-footer { display:flex; gap:10px; justify-content:flex-end; margin-top:22px; padding-top:18px; border-top:1px solid #f1f5f9; }
        .prod-btn-cancel { padding:10px 20px; border:1.5px solid #e8e8e8; background:#fff; color:#475569; border-radius:10px; font-weight:600; font-size:0.88rem; cursor:pointer; }
        .prod-btn-save { padding:10px 22px; border:none; background:#0f0f0f; color:#fff; border-radius:10px; font-family:'Syne',sans-serif; font-weight:700; font-size:0.9rem; cursor:pointer; transition:opacity .15s; }
        .prod-btn-save:hover { opacity:.85; }

        /* ══════════════════════════════════════════════════════
           MÓVIL — Header derecho + barra búsqueda + panel unificado
           Solo afecta a @media max-width: 900px
        ══════════════════════════════════════════════════════ */

        /* Header right side (siempre definido, visible solo en móvil via header display) */
        .header-right-actions { display:flex; align-items:center; gap:8px; margin-left:auto; min-width:0; }
        .header-right-actions.search-open { flex: 1; min-width: 0; }
        .header-right-actions.search-open ~ #header-logo-mobile,
        #main-header.search-open .header-logo-mobile { display:none !important; }
        .header-action-btn { width:38px; height:38px; background:rgba(0,0,0,0.06); border-radius:50%; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#0f0f0f; flex-shrink:0; }
        .header-action-btn:hover { background:rgba(0,0,0,0.1); }
        .header-avatar-mobile { width:38px; height:38px; border-radius:50%; background:#0f0f0f; display:flex; align-items:center; justify-content:center; cursor:pointer; font-family:'Syne',sans-serif; font-weight:700; font-size:0.88rem; color:#fff; flex-shrink:0; user-select:none; }

        /* Búsqueda inline en el header móvil */
        .header-search-wrap {
            display: flex;
            align-items: center;
            background: rgba(0,0,0,0.06);
            border-radius: 999px;
            width: 38px;
            height: 38px;
            overflow: hidden;
            transition: width 0.25s cubic-bezier(.4,0,.2,1), background 0.2s;
            flex-shrink: 0;
        }
        .header-search-wrap.open {
            flex: 1;
            width: auto;
            background: rgba(0,0,0,0.07);
        }
        .header-search-wrap .header-action-btn {
            background: transparent;
            flex-shrink: 0;
        }
        .header-search-input {
            display: none;
            flex: 1;
            border: none;
            background: transparent;
            font-size: 0.95rem;
            font-family: 'Inter', sans-serif;
            color: #0f0f0f;
            padding: 0 12px 0 2px;
            min-width: 0;
        }
        .header-search-input::placeholder { color: #9ca3af; }
        .header-search-wrap.open .header-search-input { display: block; }

        /* Mobile panel overlay */
        .mobile-panel-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.38); z-index:300; }
        .mobile-panel-overlay.open { display:block; }

        /* Mobile panel drawer (from right) */
        .mobile-panel { position:fixed; top:0; right:-105%; width:86%; max-width:340px; height:100%; background:#fff; z-index:301; display:flex; flex-direction:column; transition:right 0.28s cubic-bezier(.4,0,.2,1); overflow-y:auto; box-shadow:-8px 0 32px rgba(0,0,0,0.16); }
        .mobile-panel.open { right:0; }

        /* Panel head */
        .mp-head { display:flex; align-items:center; gap:12px; padding:52px 16px 16px; background:#fafafa; border-bottom:1px solid #f3f4f6; flex-shrink:0; }
        .mp-av { width:46px; height:46px; border-radius:50%; background:#0f0f0f; display:flex; align-items:center; justify-content:center; font-family:'Syne',sans-serif; font-weight:700; color:#fff; font-size:1.05rem; flex-shrink:0; }
        .mp-head-info { flex:1; min-width:0; }
        .mp-nombre { font-family:'Syne',sans-serif; font-weight:700; font-size:0.92rem; color:#0f0f0f; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .mp-email { font-size:0.72rem; color:#6b7280; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .mp-rol { display:inline-block; margin-top:3px; font-size:0.67rem; background:#f3f4f6; padding:2px 8px; border-radius:20px; color:#374151; font-family:'Inter',sans-serif; }
        .mp-close-btn { width:32px; height:32px; border:none; background:#f0f0f0; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#6b7280; flex-shrink:0; }
        .mp-close-btn:hover { background:#e8e8e8; }

        /* Panel rows */
        .mp-row { display:flex; align-items:center; gap:12px; padding:13px 16px; cursor:pointer; border-bottom:1px solid #f3f4f6; transition:background .12s; }
        .mp-row:hover { background:#f9fafb; }
        .mp-row-icon { width:34px; height:34px; background:#f3f4f6; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:0.95rem; flex-shrink:0; color:#374151; }
        .mp-row-texts { flex:1; min-width:0; }
        .mp-row-label { font-family:'Syne',sans-serif; font-weight:700; font-size:0.83rem; color:#0f0f0f; }
        .mp-row-value { font-size:0.75rem; color:#6b7280; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .mp-row-chevron { color:#d1d5db; flex-shrink:0; transition:transform .2s; }
        .mp-row-chevron.rotated { transform:rotate(180deg); }

        /* Expandable inline sections */
        .mp-expandable { max-height:0; overflow:hidden; transition:max-height 0.3s ease; }
        .mp-expandable.open { max-height:420px; overflow-y:auto; }
        .mp-expand-item { padding:10px 16px; border-bottom:1px solid #f3f4f6; }
        .mp-expand-item:last-child { border-bottom:none; }
        .mp-expand-title { font-size:0.8rem; font-weight:600; color:#0f0f0f; margin-bottom:2px; }
        .mp-expand-sub { font-size:0.75rem; color:#6b7280; line-height:1.4; }
        .mp-expand-empty { padding:20px 16px; text-align:center; font-size:0.8rem; color:#9ca3af; }

        /* Panel actions */
        .mp-actions { padding:8px 10px 32px; flex-shrink:0; }
        .mp-action { width:100%; display:flex; align-items:center; gap:10px; padding:11px 8px; border:none; background:transparent; cursor:pointer; font-size:0.84rem; color:#0f0f0f; border-radius:10px; text-align:left; font-family:'Inter',sans-serif; transition:background .12s; }
        .mp-action:hover { background:#f3f4f6; }
        .mp-action-danger { color:#ef4444; }
        .mp-sep { height:1px; background:#f3f4f6; margin:4px 6px; }

        @media (max-width: 900px) {
            /* Ocultar topbar en móvil (su función pasa al header) */
            .home-topbar { display:none !important; }

            /* Sidebar móvil: ocultar logo y promo card, agrandar items */
            .sidebar-brand { display:none !important; }
            .sidebar-promo { display:none !important; }
            .sidebar-nav-btns { padding-top: 72px; }
            nav button:not(.menu-close) { font-size:1rem; padding:13px 14px 13px 18px; border-radius:14px; }
            .nav-group-header { font-size:1rem; padding:13px 14px 13px 18px; border-radius:14px; }
            .nav-group-items button { font-size:0.95rem; padding:11px 14px 11px 30px; }
            .nav-section-label { font-size:0.65rem; padding:0 14px 8px; }


            /* Paneles de detalle: drawer desde la derecha en móvil */
            .mb-content-grid { flex-direction: column; }
            .mb-content-grid.panel-open .mb-left-col { display: none !important; }
            .mb-content-grid.panel-open .mb-right-panel {
                position: fixed !important;
                top: 0 !important;
                right: 0 !important;
                width: var(--mob-drawer-w) !important;
                height: 100dvh !important;
                z-index: 9998 !important;
                overflow-y: auto !important;
                border-radius: 24px 0 0 24px !important;
                box-shadow: -4px 0 32px rgba(0,0,0,0.18) !important;
                display: flex !important;
                flex-direction: column !important;
                background: #fff !important;
                padding: 8px 16px calc(20px + env(safe-area-inset-bottom)) !important;
                animation: mobDrawerIn 0.28s cubic-bezier(.4,0,.2,1) !important;
            }
            @keyframes mobDrawerIn {
                from { right: -105%; }
                to   { right: 0; }
            }

            /* Eventos: detalle se superpone DENTRO de la card, no fullscreen */
            .ev-content-grid { position: relative !important; min-height: 520px !important; }
            .ev-content-grid.panel-open .ev-left-col {
                pointer-events: none !important;
                /* visible but behind — keeps grid height */
            }
            .ev-content-grid.panel-open .ev-right-panel {
                position: absolute !important;
                inset: 0 !important;
                width: 100% !important;
                height: 100% !important;
                z-index: 10 !important;
                border-radius: 24px !important;
                overflow-y: auto !important;
                box-shadow: 0 4px 24px rgba(0,0,0,0.12) !important;
                display: flex !important;
                flex-direction: column !important;
                background: #f7f7f7 !important;
                padding: 16px !important;
                animation: evDetailFade 0.2s ease !important;
            }
            @keyframes evDetailFade {
                from { opacity: 0; transform: translateY(6px); }
                to   { opacity: 1; transform: translateY(0); }
            }

            /* Calendario y lista compactos */
            .ev-cal-card { padding: 14px !important; }
            .ev-card-title { font-size: 14px !important; margin-bottom: 8px !important; }
            .ev-month-bar { padding: 8px 12px !important; margin-bottom: 10px !important; }
            .ev-month-label { font-size: 14px !important; }
            .ev-cal-day { font-size: 11px !important; padding: 4px 1px !important; }
            .ev-cal-wd { font-size: 9px !important; padding-bottom: 4px !important; }
            .ev-todos-card { padding: 14px !important; }
            .ev-todos-item { padding: 8px 12px !important; gap: 10px !important; }
            .ev-date-badge { width: 42px !important; height: 42px !important; }
            .ev-date-badge .ev-day { font-size: 18px !important; }
            .ev-date-badge .ev-month { font-size: 8px !important; }
            .ev-todos-name { font-size: 13px !important; }

            /* Overlay + botón cierre del drawer */
            #mob-panel-overlay {
                position: fixed;
                inset: 0;
                background: rgba(0,0,0,0.4);
                z-index: 9997;
                backdrop-filter: blur(2px);
            }
            .mob-panel-close-btn {
                display: flex !important;
                align-items: center;
                justify-content: center;
                width: 36px; height: 36px;
                border-radius: 50%;
                border: none;
                background: #f1f5f9;
                font-size: 1.1rem;
                cursor: pointer;
                position: sticky;
                top: 8px;
                align-self: flex-end;
                margin-bottom: 8px;
                flex-shrink: 0;
                z-index: 1;
            }

            /* Botón importar Excel: oculto en móvil */
            .fin-btn-excel { display:none !important; }

            /* Reset completo para tabs con layout flex rígido */
            #tab-finanzas.tab-content.active,
            #tab-pagos.tab-content.active,
            #tab-ajustes.tab-content.active,
            #tab-formularios.tab-content.active,
            #tab-tobi.tab-content.active {
                display: block !important;
                overflow: visible !important;
                height: auto !important;
                padding: 0 !important;
            }
            .fin-panel {
                display: none !important;
                height: auto !important;
                overflow: visible !important;
                min-height: 0 !important;
                flex: none !important;
            }
            .fin-panel.active {
                display: block !important;
                padding: 0 16px 16px !important;
            }
            #tab-finanzas .mb-header { padding: 16px 16px 12px !important; }
            #tab-finanzas .fin-subtab-nav { padding: 0 16px 12px !important; }
            .fin-split { overflow: visible !important; }
            .fin-split .mb-content-grid { display: flex !important; flex-direction: column !important; height: auto !important; overflow: visible !important; padding: 0 !important; }
            .fin-split .mb-left-col { overflow: visible !important; min-height: 0 !important; flex: none !important; height: auto !important; }

            /* Gráficos dashboard finanzas: uno debajo de otro */
            .fin-dash-bottom { grid-template-columns: 1fr !important; }

            /* KPI cards: carrusel de una card a la vez */
            .fin-kpi-grid { display:flex; flex-direction:row; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:4px; }
            .fin-kpi-grid::-webkit-scrollbar { display:none; }
            .fin-kpi-grid .fin-kpi-card { flex:0 0 calc(100% - 24px); scroll-snap-align:start; min-width:0; }

            /* Botón nueva votación: solo icono en móvil */
            #vot-btn-nuevo .vot-btn-label { display:none; }
            #vot-btn-nuevo { width:40px; height:40px; padding:0; border-radius:50%; justify-content:center; }
            /* Botón añadir finanzas: solo icono en móvil */
            #fin-btn-nuevo .fin-btn-nuevo-label { display:none; }
            #fin-btn-nuevo { width:40px; height:40px; padding:0; border-radius:50%; justify-content:center; }

            /* Scroll natural en móvil: el overlay es el scroller, el header flota sticky */
            .overlay { overflow-y: auto; overflow-x: hidden; }
            .container { height: auto; overflow: visible; padding:0 !important; gap:0 !important; }
            .tab-content.active { flex: none; overflow: visible; overflow-x: hidden; padding:16px; margin:8px 14px 14px; border-radius:30px; min-height: calc(100dvh - 90px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); height: auto; }

            /* Contención horizontal total */
            html, body { overflow-x: hidden; max-width: 100%; }
            * { box-sizing: border-box; min-width: 0; max-width: 100%; }
            /* Excepciones: elementos que necesitan dimensiones propias */
            img, svg, video, canvas, iframe { max-width: 100%; min-width: unset; }
            /* Tablas y tabulators: scroll horizontal local */
            .tabulator, table, .tabulator-tableholder { max-width: 100% !important; overflow-x: auto !important; }

            /* ─── Utilidades globales móvil ─────────────────────────────── */
            .mob-hidden { display: none !important; }
            .mob-only   { display: block !important; }
            .mob-stack  { flex-direction: column !important; width: 100% !important; }
            .mob-fw     { width: 100% !important; max-width: 100% !important; }

            /* Modales: caben en pantalla */
            .modal-dialog {
                margin: auto 8px !important;
                max-width: calc(100vw - 16px) !important;
            }
            .modal-body { overflow-y: auto; max-height: 70dvh; }

            /* Celdas de tabla más compactas */
            .table td, .table th { padding: 8px 6px !important; font-size: 0.8rem !important; }

            /* Pills de filtro con wrap */
            .status-pills { flex-wrap: wrap !important; gap: 6px !important; }

            /* Safe area bottom en drawers y filtros */
            .mobile-panel,
            .mb-filter-panel { padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important; }

            /* ─── Dashboard ─────────────────────────────────────────────── */
            #tab-dashboard .db-kpi-row    { grid-template-columns: repeat(2, 1fr) !important; }
            #tab-dashboard .db-charts-main { grid-template-columns: 1fr !important; }
            #tab-dashboard .db-bottom     { grid-template-columns: 1fr !important; }

            /* ─── Finanzas ──────────────────────────────────────────────── */
            #tab-finanzas .fin-kpi-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                display: grid !important;
                overflow-x: visible !important;
            }
            #tab-finanzas .fin-kpi-grid .fin-kpi-card { flex: none !important; min-width: 0 !important; }
            #tab-finanzas .fin-search-pill { flex-wrap: wrap !important; }

            /* ─── Pagos ─────────────────────────────────────────────────── */
            #tab-pagos .pagos-metrics-grid { grid-template-columns: repeat(2, 1fr) !important; }
            #tab-pagos .status-pills { flex-wrap: wrap !important; }

            /* ─── Socios ────────────────────────────────────────────────── */
            #tab-socios .mb-filter-panel {
                position: fixed !important;
                bottom: 0 !important; left: 0 !important; right: 0 !important;
                width: 100% !important;
                border-radius: 24px 24px 0 0 !important;
                box-shadow: 0 -4px 24px rgba(0,0,0,0.15) !important;
                max-height: 75dvh !important;
                overflow-y: auto !important;
                padding-bottom: env(safe-area-inset-bottom) !important;
                z-index: 500 !important;
            }
            #tab-socios .mb-col-picker { min-width: unset !important; width: 100% !important; }
            #tab-socios .nav-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
            #tab-socios .nav-tabs::-webkit-scrollbar { display: none; }
            #tab-socios .nav-tabs .nav-link { white-space: nowrap; }

            /* ─── Eventos ───────────────────────────────────────────────── */
            #tab-eventos .ev-search-bar { flex-wrap: wrap !important; }
            #tab-eventos .ev-cal-card { max-height: 320px; overflow: hidden; }

            /* ─── Emails ────────────────────────────────────────────────── */
            .email-grid-2col { grid-template-columns: 1fr !important; }
            .email-ind-grid  { grid-template-columns: 1fr !important; }
            .email-preview-col { display: none !important; }
            .email-show-preview-btn { display: block !important; }

            /* ─── Escáner ───────────────────────────────────────────────── */
            #tab-escanear .btn-escanear { width: 100% !important; max-width: 320px; padding: 16px !important; }
            #tab-escanear .escanear-btns { flex-direction: column !important; align-items: center; gap: 12px; }

            /* ─── Votaciones ────────────────────────────────────────────── */
            .vot-ctx-menu {
                max-width: 90vw !important;
                left: 50% !important;
                transform: translateX(-50%) !important;
            }

            /* ─── Ajustes ───────────────────────────────────────────────── */
            #tab-ajustes .ajustes-btn-row { flex-wrap: wrap !important; gap: 8px !important; }
            #tab-ajustes .ajustes-btn-row .btn { flex: 1 1 auto; }

            /* ─── Genti / Chat ──────────────────────────────────────────── */
            .gi-hist-panel {
                position: fixed !important;
                top: 0 !important; right: -105% !important;
                width: 85% !important; height: 100dvh !important;
                z-index: 9996 !important;
                border-radius: 0 !important;
                box-shadow: 4px 0 24px rgba(0,0,0,0.2) !important;
                transition: right 0.3s ease !important;
                overflow-y: auto !important;
            }
            .gi-hist-panel.open { right: 0 !important; }
            .gi-hist-btn { display: flex !important; }

            /* ─── NFC ───────────────────────────────────────────────────── */
            #tab-nfc .nfc-result-body { flex-direction: column !important; }
            #tab-nfc .nfc-live-output { height: auto !important; max-height: 200px !important; }

            /* ─── Cards: unificar radius y shadow ───────────────────────── */
            .card, .panel-card, .kpi-card {
                border-radius: var(--mob-radius) !important;
                box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
            }

            /* ─── Botones en drawers: full-width ────────────────────────── */
            .mb-right-panel .btn-primary,
            .mb-right-panel .btn-save,
            .ev-right-panel .btn-primary,
            .mob-panel .btn-primary { width: 100%; margin-bottom: 8px; }

            /* ─── Tipografía y padding compacto global ───────────────────── */
            .mb-h1 { font-size: 20px !important; line-height: 1.2 !important; }
            .mb-header { margin-bottom: 12px !important; }
            .mb-subtitle { font-size: 12px !important; }

            .db-kpi { padding: 14px 16px !important; gap: 5px !important; }
            .db-kpi-value { font-size: 1.6rem !important; }
            .db-kpi-label { font-size: 0.62rem !important; }
            .db-kpi-sub { font-size: 0.7rem !important; }

            .db-card { padding: 14px 16px !important; }
            .db-card-title { font-size: 0.85rem !important; }

            .mb-left-col { padding: 16px !important; }

            .pagos-metric-card { padding: 14px 16px !important; gap: 5px !important; }
            .pmc-value { font-size: 1.4rem !important; }
            .pmc-label { font-size: 0.62rem !important; }

            .fin-kpi-card { padding: 12px 14px !important; }
            .fin-kpi-valor { font-size: 18px !important; }
            .fin-kpi-label { font-size: 11px !important; }

            .mb-search-row { margin-bottom: 10px !important; }
            .db-kpi-row { gap: 10px !important; }
            .fin-kpi-grid { gap: 10px !important; }
            .pagos-metrics-grid { gap: 10px !important; }

            /* ─── Pagos: ocultar Gentío Payments en móvil ───────────────── */
            #gentio-payments-bar { display: none !important; }

            /* ─── Pagos subtabs: margin ajustado ────────────────────────── */
            #tab-pagos .pagos-subtab-nav { margin-bottom: 14px !important; }

            /* ─── Tablas: scroll horizontal propio en móvil ─────────────── */
            .mb-table {
                display: block !important;
                overflow-x: auto !important;
                -webkit-overflow-scrolling: touch !important;
                width: 100% !important;
            }

            /* ─── Columnas secundarias ocultas en móvil ─────────────────── */
            /* Votaciones: ocultar columna "Votos" (col 3 de 5) */
            #vot-table th:nth-child(3),
            #vot-table td:nth-child(3) { display: none !important; }

            /* ─── Fix: botón cerrar menú siempre clicable ───────────────── */
            .menu-close {
                z-index: 10000 !important;
                pointer-events: auto !important;
                position: absolute !important;
                top: 16px !important;
                right: 16px !important;
                display: flex !important;
            }

            /* ─── Genti: tamaños óptimos para móvil ─────────────────────── */
            .gi-header { padding: 12px 16px 10px !important; }
            .gi-header-title { font-size: 20px !important; }
            .gi-empty-hero-title { font-size: 26px !important; }
            .gi-empty-hero-sub { font-size: 13px !important; }
            .gi-msgs { padding: 12px 16px !important; gap: 8px !important; }
            .gi-input-wrap { padding: 14px 16px calc(12px + env(safe-area-inset-bottom)) !important; }
            .gi-input-row { padding: 6px 8px 6px 14px !important; }
            .gi-textarea { font-size: 14px !important; }
            .gi-msg-user .gi-bubble { font-size: 13px !important; padding: 9px 13px !important; }
            .gi-msg-ai .gi-bubble { font-size: 13px !important; }
            .gi-hist-panel { top: 0 !important; }

            /* ─── Formularios (Vue): stats row → scroll horizontal ─────────── */
            #tab-formularios .fv-stats-row {
                display: flex !important;
                flex-direction: row !important;
                gap: 12px !important;
                overflow-x: auto !important;
                -webkit-overflow-scrolling: touch !important;
                scroll-snap-type: x mandatory !important;
                scrollbar-width: none !important;
                padding-bottom: 4px !important;
                grid-template-columns: unset !important;
            }
            #tab-formularios .fv-stats-row::-webkit-scrollbar { display: none; }
            #tab-formularios .fv-stats-row .fv-kpi {
                flex: 0 0 calc(65% - 6px) !important;
                scroll-snap-align: start !important;
            }
            #tab-formularios .fvs-summary {
                display: flex !important;
                flex-direction: row !important;
                gap: 10px !important;
                overflow-x: auto !important;
                -webkit-overflow-scrolling: touch !important;
                scrollbar-width: none !important;
                padding-bottom: 4px !important;
            }
            #tab-formularios .fvs-summary::-webkit-scrollbar { display: none; }
            #tab-formularios .fvs-card {
                flex: 0 0 auto !important;
                min-width: 120px !important;
            }

            /* ─── Botones nuevo: solo icono en móvil ────────────────────── */
            .btn-label { display: none !important; }
            .mb-btn-nuevo:not(#vot-btn-nuevo):not(#fin-btn-nuevo):not(.fin-btn-excel),
            .ev-btn-nuevo,
            .gf-btn-nuevo {
                width: 40px !important;
                height: 40px !important;
                padding: 0 !important;
                border-radius: 50% !important;
                justify-content: center !important;
                font-size: 0 !important;
            }

            /* ─── Formularios: botón nuevo → pill completo (override circular) ─
               Especificidad 220 (#tab-formularios.tab-content=110 + #formularios-vue-root=100 + .mb-btn-nuevo=10)
               igual que la regla circular y va DESPUÉS → gana por orden */
            #tab-formularios.tab-content #formularios-vue-root .mb-btn-nuevo {
                width: auto !important;
                height: auto !important;
                padding: 10px 20px !important;
                border-radius: 30px !important;
                font-size: 16px !important;
                justify-content: flex-start !important;
            }

            /* ─── Punto de Venta: stats horizontales ─────────────────────── */
            #tab-barra .pv-stats-grid {
                display: flex !important;
                flex-direction: column !important;
                gap: 12px !important;
            }
            #tab-barra .pv-kpi-row {
                display: flex !important;
                flex-direction: row !important;
                gap: 12px !important;
                overflow-x: auto !important;
                scroll-snap-type: x mandatory !important;
                -webkit-overflow-scrolling: touch !important;
                scrollbar-width: none !important;
            }
            #tab-barra .pv-kpi-row::-webkit-scrollbar { display: none; }
            #tab-barra .pv-kpi-row .db-kpi {
                flex: 0 0 calc(65% - 6px) !important;
                scroll-snap-align: start !important;
            }
            #tab-barra .pv-stats-grid .db-card { width: 100% !important; }

            /* ─── Punto de Venta: chips de categoría horizontales ─────────── */
            #tab-barra .pv-cat-scroll {
                display: flex !important;
                flex-direction: row !important;
                gap: 10px !important;
                overflow-x: auto !important;
                scroll-snap-type: x mandatory !important;
                -webkit-overflow-scrolling: touch !important;
                scrollbar-width: none !important;
                padding-bottom: 4px !important;
            }
            #tab-barra .pv-cat-scroll::-webkit-scrollbar { display: none; }
            #tab-barra .pv-cat-scroll .barra-cat-chip {
                flex: 0 0 140px !important;
                scroll-snap-align: start !important;
            }

            /* ─── Punto de Venta: KPIs de detalle de sesión ─────────────── */
            .pv-ses-kpi-grid {
                display: flex !important;
                flex-direction: row !important;
                gap: 12px !important;
                overflow-x: auto !important;
                scroll-snap-type: x mandatory !important;
                -webkit-overflow-scrolling: touch !important;
                scrollbar-width: none !important;
            }
            .pv-ses-kpi-grid::-webkit-scrollbar { display: none; }
            .pv-ses-kpi-grid .db-kpi {
                flex: 0 0 calc(65% - 6px) !important;
                scroll-snap-align: start !important;
            }
            .pv-ses-bottom-grid { grid-template-columns: 1fr !important; }

            /* ─── Formularios: stats horizontales ───────────────────────── */
            #tab-formularios .fm-stats-scroll {
                display: flex !important;
                flex-direction: row !important;
                gap: 10px !important;
                overflow-x: auto !important;
                -webkit-overflow-scrolling: touch !important;
                scrollbar-width: none !important;
                padding-bottom: 4px !important;
            }
            #tab-formularios .fm-stats-scroll::-webkit-scrollbar { display: none; }
            #tab-formularios .fm-stats-scroll > * {
                flex: 0 0 auto !important;
                min-width: 120px !important;
            }
        }

/* ===== bloque CSS original líneas 5849-5989 ===== */
        #esc-overlay {
            display:none; position:fixed;
            top:0; right:0; bottom:0; left:0;
            z-index:99998;
            background:#0f0f0f; flex-direction:column; overflow:hidden;
            -webkit-overflow-scrolling:touch;
        }
        #esc-overlay.open { display:-webkit-flex; display:flex; }

        .esc-topbar {
            display:flex; align-items:center; justify-content:space-between;
            padding:calc(16px + env(safe-area-inset-top)) 20px 12px; flex-shrink:0;
        }
        .esc-logo { height:22px; width:auto; }
        .esc-topbar-right { display:flex; align-items:center; gap:10px; }
        .esc-hist-btn, .esc-close-btn {
            background:rgba(255,255,255,0.12); border:none; border-radius:50%;
            width:38px; height:38px; cursor:pointer; color:#fff;
            display:flex; align-items:center; justify-content:center;
            font-size:1rem; transition:background 0.15s;
        }
        .esc-hist-btn:hover, .esc-close-btn:hover { background:rgba(255,255,255,0.22); }

        .esc-mode-bar { display:flex; gap:8px; padding:0 20px 14px; flex-shrink:0; }
        .esc-mode-btn {
            flex:1; background:rgba(255,255,255,0.1); border:none; border-radius:20px;
            padding:9px 6px; font-family:'Syne',sans-serif; font-weight:700;
            font-size:13px; color:rgba(255,255,255,0.6); cursor:pointer;
            transition:background 0.15s,color 0.15s;
        }
        .esc-mode-btn.active { background:#fff; color:#000; }

        /* Selector de evento (visible solo en modo asistencia) */
        .esc-evento-bar {
            display:none; padding:0 20px 14px; flex-shrink:0;
        }
        .esc-evento-bar.visible { display:block; }
        .esc-evento-select {
            width:100%; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2);
            border-radius:12px; padding:9px 14px; color:#fff; font-family:'Inter',sans-serif;
            font-size:13px; appearance:none; cursor:pointer;
        }
        .esc-evento-select option { background:#1e293b; color:#fff; }

        .esc-camera-area { flex:1; position:relative; overflow:hidden; min-height:0; }
        #esc-video { width:100%; height:100%; object-fit:cover; display:block; }
        .esc-frame-wrap {
            position:absolute; inset:0; display:flex;
            flex-direction:column; align-items:center; justify-content:center;
            pointer-events:none;
        }
        .esc-frame {
            width:min(68vw,260px); height:min(68vw,260px);
            border:2.5px solid #fff; border-radius:16px; position:relative; overflow:hidden;
        }
        .esc-scan-line {
            position:absolute; left:0; right:0; height:2px;
            background:linear-gradient(90deg,transparent,#fff,transparent);
            animation:escScanLine 2s ease-in-out infinite;
        }
        @keyframes escScanLine {
            0%   { top:0%; opacity:.8; }
            50%  { top:calc(100% - 2px); opacity:.8; }
            100% { top:0%; opacity:.8; }
        }
        .esc-hint {
            margin-top:16px; font-family:'Inter',sans-serif;
            font-size:13px; color:rgba(255,255,255,0.7); text-align:center;
        }

        .esc-result-overlay {
            position:absolute; top:0; right:0; bottom:0; left:0; display:flex;
            flex-direction:column; align-items:center; justify-content:center;
            padding:24px; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px);
            animation:escResultIn 0.2s ease;
        }
        .esc-result-overlay.hidden { display:none; }
        @keyframes escResultIn {
            from { opacity:0; transform:scale(0.95); }
            to   { opacity:1; transform:scale(1); }
        }
        .esc-result-card {
            background:#fff; border-radius:24px; padding:24px;
            width:100%; max-width:340px; box-shadow:0 8px 40px rgba(0,0,0,0.3);
        }
        .esc-result-close {
            margin-top:16px; background:rgba(255,255,255,0.2); border:none;
            border-radius:50%; width:44px; height:44px; color:#fff;
            font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
        }

        .esc-card-socio { display:flex; flex-direction:column; align-items:center; gap:10px; }
        .esc-card-nombre {
            font-family:'Syne',sans-serif; font-weight:800;
            font-size:1.25rem; color:#0f0f0f; text-align:center; margin:0;
        }
        .esc-card-num { font-size:0.85rem; color:#64748b; text-align:center; }
        .esc-card-badge {
            background:#dcfce7; color:#16a34a; border-radius:20px;
            padding:4px 14px; font-size:0.78rem; font-weight:700;
        }
        .esc-card-badge-red { background:#fee2e2; color:#dc2626; }
        .esc-card-timer { width:100%; height:3px; background:#e2e8f0; border-radius:2px; margin-top:6px; }
        .esc-card-timer-bar {
            height:100%; background:#16a34a; border-radius:2px;
            animation:escTimer 5s linear forwards;
        }
        @keyframes escTimer { from { width:100%; } to { width:0%; } }

        .esc-hist-panel {
            position:absolute; bottom:0; left:0; right:0;
            background:#1e293b; border-radius:24px 24px 0 0;
            padding:20px 20px calc(20px + env(safe-area-inset-bottom));
            max-height:60dvh; overflow-y:auto; z-index:10;
        }
        .esc-hist-panel.hidden { display:none; }
        .esc-hist-header {
            display:flex; justify-content:space-between; align-items:center;
            margin-bottom:16px; font-family:'Syne',sans-serif;
            font-weight:700; font-size:1rem; color:#fff;
        }
        .esc-hist-header button { background:none; border:none; color:#94a3b8; cursor:pointer; font-size:1rem; }
        .esc-hist-item {
            display:flex; align-items:center; gap:12px;
            padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.08);
        }
        .esc-hist-item:last-child { border-bottom:none; }
        .esc-hist-item-info { flex:1; min-width:0; }
        .esc-hist-item-nombre { font-family:'Syne',sans-serif; font-weight:700; font-size:0.9rem; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .esc-hist-item-meta { font-size:0.75rem; color:#94a3b8; margin-top:2px; }
        .esc-hist-item-badge { font-size:0.7rem; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap; flex-shrink:0; }
        .esc-hist-item-badge.carnet     { background:#e0f2fe; color:#0369a1; }
        .esc-hist-item-badge.asistencia { background:#dcfce7; color:#16a34a; }
        .esc-hist-item-badge.canjear    { background:#fef9c3; color:#ca8a04; }
        .esc-hist-undo {
            background:none; border:1px solid rgba(255,255,255,0.2); border-radius:8px;
            padding:5px 10px; font-size:0.72rem; color:#94a3b8; cursor:pointer;
            white-space:nowrap; transition:border-color 0.15s,color 0.15s;
        }
        .esc-hist-undo:hover { border-color:#ef4444; color:#ef4444; }
        .esc-hist-empty { color:#64748b; font-size:0.85rem; text-align:center; padding:20px 0; margin:0; }

        /* ── Buscador de miembros del escáner ── */
        .esc-search {
            flex-shrink:0; display:flex; flex-direction:column;
            padding:10px 16px calc(14px + env(safe-area-inset-bottom));
            gap:8px; background:#0f0f0f; z-index:11;
        }
        .esc-search-results {
            max-height:42dvh; overflow-y:auto;
            background:rgba(30,30,38,0.96); border:1px solid rgba(255,255,255,0.1);
            border-radius:14px; padding:6px;
            display:flex; flex-direction:column; gap:2px;
        }
        .esc-search-results.hidden { display:none; }
        .esc-search-empty { color:#64748b; font-size:0.85rem; text-align:center; padding:16px 0; margin:0; }
        .esc-search-item {
            display:flex; align-items:center; gap:12px; width:100%;
            background:none; border:none; border-radius:10px; padding:9px 10px;
            cursor:pointer; text-align:left; transition:background 0.12s;
        }
        .esc-search-item:hover { background:rgba(255,255,255,0.08); }
        .esc-search-av { width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; }
        .esc-search-av-ph {
            display:flex; align-items:center; justify-content:center;
            background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff;
            font-family:'Syne',sans-serif; font-weight:700; font-size:15px;
        }
        .esc-search-item-txt { display:flex; flex-direction:column; min-width:0; flex:1; }
        .esc-search-item-nombre { font-family:'Syne',sans-serif; font-weight:700; font-size:0.92rem; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .esc-search-item-num { font-size:0.75rem; color:#94a3b8; margin-top:1px; }
        .esc-search-bar {
            display:flex; align-items:center; gap:10px;
            background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.14);
            border-radius:16px; padding:0 16px; height:50px; color:rgba(255,255,255,0.6);
        }
        .esc-search-bar input {
            flex:1; background:none; border:none; outline:none;
            color:#fff; font-family:'Inter',sans-serif; font-size:0.95rem;
        }
        .esc-search-bar input::placeholder { color:rgba(255,255,255,0.4); }