/* ── Variables ───────────────────────────────────────────── */
        :root {
            --bg:          #0d1117;
            --sidebar-bg:  #080c14;
            --surface:     rgba(255,255,255,0.04);
            --surface-hov: rgba(255,255,255,0.07);
            --border:      rgba(255,255,255,0.08);
            --blue:   #3b82f6; --blue-dim:   rgba(59,130,246,0.15);
            --green:  #10b981; --green-dim:  rgba(16,185,129,0.15);
            --purple: #8b5cf6; --purple-dim: rgba(139,92,246,0.15);
            --amber:  #f59e0b; --amber-dim:  rgba(245,158,11,0.15);
            --red:    #ef4444; --red-dim:    rgba(239,68,68,0.15);
            --text:     #f0f6fc;
            --muted:    #8b949e;
            --subtle:   #3d4555;
            --bg-modal: #111827;
            --bg-input: rgba(0,0,0,0.3);
            --bg-select: #1a1f2e;
        }
        :root[data-theme="light"] {
            --bg:          #f8fafc;
            --sidebar-bg:  #ffffff;
            --surface:     #ffffff;
            --surface-hov: #f1f5f9;
            --border:      #e2e8f0;
            --text:        #0f172a;
            --muted:       #64748b;
            --subtle:      #94a3b8;
            --bg-modal:    #ffffff;
            --bg-input:    #f8fafc;
            --bg-select:   #ffffff;
        }
        /* ── Orders Module ─────────────────────────────────────────── */
        .orders-header { display:flex; align-items:center; gap:1rem; padding:1rem 2rem 0; flex-shrink:0; }
        .orders-header h1 { font-size:1.15rem; font-weight:800; }
        .orders-kpis { display:flex; gap:0.6rem; margin-left:auto; }
        .o-kpi { font-size:0.75rem; font-weight:600; padding:0.3rem 0.75rem; border-radius:20px; background:var(--surface); border:1px solid var(--border); color:var(--muted); }
        .o-kpi strong { color:var(--text); }
        .orders-filters { display:flex; gap:0.35rem; padding:0.85rem 2rem 0; flex-shrink:0; }
        .ofilt { padding:0.38rem 0.85rem; border-radius:20px; border:1px solid var(--border); background:transparent; color:var(--muted); font-size:0.78rem; font-weight:600; cursor:pointer; transition:0.15s; font-family:inherit; display:flex; align-items:center; gap:0.4rem; }
        .ofilt:hover { border-color:rgba(255,255,255,0.2); color:var(--text); }
        .ofilt.active { background:var(--surface-hov); color:var(--text); border-color:rgba(255,255,255,0.15); }
        .ofilt-n { background:rgba(249,115,22,0.2); color:#f97316; font-size:10px; font-weight:700; padding:1px 5px; border-radius:10px; }
        .orders-list-wrap { flex:1; overflow-y:auto; padding:1rem 2rem 2rem; display:flex; flex-direction:column; gap:0.75rem; }
        .order-empty { text-align:center; padding:4rem 2rem; color:var(--muted); font-size:0.875rem; line-height:2; margin:auto; }

        .order-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:border-color 0.2s; }
        .order-card:hover { border-color:rgba(255,255,255,0.13); }
        .order-card.is-new { animation: newCard 0.5s ease; }
        @keyframes newCard { from{ box-shadow:0 0 0 3px rgba(249,115,22,0.5); } to{ box-shadow:none; } }
        .oc-header { display:flex; align-items:center; gap:0.75rem; padding:0.85rem 1.1rem; border-bottom:1px solid var(--border); }
        .oc-num { font-weight:800; font-size:0.9rem; color:#f97316; }
        .oc-client { font-weight:600; font-size:0.875rem; }
        .oc-phone { font-size:0.72rem; color:var(--muted); }
        .oc-time { font-size:0.72rem; color:var(--muted); margin-left:auto; white-space:nowrap; }
        .oc-status { margin-left:0.5rem; padding:0.22rem 0.65rem; border-radius:20px; font-size:0.68rem; font-weight:700; white-space:nowrap; }
        .oc-status.pending    { background:var(--amber-dim);  color:var(--amber);  }
        .oc-status.confirmed  { background:var(--blue-dim);   color:var(--blue);   }
        .oc-status.preparing  { background:var(--purple-dim); color:var(--purple); }
        .oc-status.dispatched { background:rgba(249,115,22,0.15); color:#f97316;   }
        .oc-status.delivered  { background:var(--green-dim);  color:var(--green);  }
        .oc-status.cancelled  { background:var(--red-dim);    color:var(--red);    }
        .oc-body { padding:0.85rem 1.1rem; }
        .oc-items { margin-bottom:0.5rem; }
        .oc-item-row { font-size:0.82rem; color:var(--text); margin-bottom:0.2rem; }
        .oc-item-row span { color:var(--muted); font-size:0.75rem; }
        .oc-meta { display:flex; gap:1.25rem; font-size:0.78rem; color:var(--muted); margin-top:0.4rem; flex-wrap:wrap; }
        .oc-meta-item { display:flex; align-items:center; gap:0.3rem; }
        .oc-total { font-weight:800; font-size:0.9rem; color:var(--green); margin-top:0.5rem; }
        .oc-actions { display:flex; gap:0.5rem; padding:0.75rem 1.1rem; border-top:1px solid var(--border); flex-wrap:wrap; }
        .btn-os { padding:0.35rem 0.75rem; border-radius:7px; border:1px solid var(--border); background:transparent; color:var(--muted); font-size:0.75rem; font-weight:600; cursor:pointer; transition:0.15s; font-family:inherit; white-space:nowrap; }
        .btn-os:hover { background:var(--surface-hov); color:var(--text); }
        .btn-os.primary { background:var(--blue-dim); color:var(--blue); border-color:rgba(59,130,246,0.3); }
        .btn-os.dispatch { background:rgba(249,115,22,0.15); color:#f97316; border-color:rgba(249,115,22,0.3); }
        .btn-os.deliver  { background:var(--green-dim); color:var(--green); border-color:rgba(16,185,129,0.3); }
        .btn-os.danger   { background:var(--red-dim); color:var(--red); border-color:rgba(239,68,68,0.3); margin-left:auto; }
        .btn-os:disabled { opacity:0.4; cursor:not-allowed; }

        /* + Nuevo Pedido button */
        .btn-new-order {
            margin-left:auto; padding:0.42rem 1rem;
            background:linear-gradient(135deg, #f97316, #ef4444);
            color:white; border:none; border-radius:8px;
            font-weight:700; font-size:0.8rem; cursor:pointer;
            transition:0.15s; font-family:inherit; white-space:nowrap;
            flex-shrink:0;
        }
        .btn-new-order:hover { opacity:0.88; transform:translateY(-1px); }

        /* Notas editables inline en tarjeta de pedido */
        .oc-notes-area {
            font-size:0.78rem; width:100%; padding:0.35rem 0.5rem; margin:0.35rem 0 0;
            border-radius:6px; resize:none; min-height:38px;
            border:1px solid var(--border) !important;
            background:rgba(0,0,0,0.15) !important;
            color:var(--muted); font-family:inherit; line-height:1.45;
            transition:border-color 0.15s, color 0.15s;
        }
        .oc-notes-area:focus { border-color:var(--blue) !important; color:var(--text); outline:none; }
        .oc-notes-area.saving { border-color:var(--green) !important; color:var(--green); }

        /* Modal de cancelación */
        .cancel-reason-modal .modal-box { max-width:420px; }
        .cancel-reason-modal textarea { min-height:80px; margin-bottom:0; }

        /* Botones de acciones en tarjeta de pedido */
        .btn-os.danger {
            background: rgba(239,68,68,0.08);
            border-color: rgba(239,68,68,0.35);
            color: var(--red);
        }
        .btn-os.danger:hover { background: rgba(239,68,68,0.18); }

        /* ── Kanban Board (Sprint 3) ───────────────────────────── */
        .kanban-board {
            display: flex; gap: 0.85rem;
            padding: 0.85rem 2rem 1.5rem; flex: 1;
            overflow-x: auto; align-items: flex-start;
        }
        .kanban-col {
            flex: 1; min-width: 210px; max-width: 280px;
            background: rgba(255,255,255,0.025);
            border: 1px solid var(--border); border-radius: 12px;
            overflow: hidden; display: flex; flex-direction: column;
        }
        .kanban-col-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 0.6rem 0.85rem; font-size: 0.72rem;
            font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
            border-bottom: 1px solid var(--border); flex-shrink: 0;
        }
        .kc-pending   > .kanban-col-header { color:#f59e0b; background:rgba(245,158,11,0.07); }
        .kc-preparing > .kanban-col-header { color:#3b82f6; background:rgba(59,130,246,0.07); }
        .kc-dispatch  > .kanban-col-header { color:#f97316; background:rgba(249,115,22,0.07); }
        .kc-delivered > .kanban-col-header { color:#10b981; background:rgba(16,185,129,0.07); }
        .kc-count { font-size:0.68rem; background:rgba(255,255,255,0.1); padding:0.12rem 0.4rem; border-radius:99px; }
        .kanban-col-body {
            padding: 0.45rem; display: flex; flex-direction: column;
            gap: 0.4rem; overflow-y: auto;
            max-height: calc(100vh - 310px); min-height: 48px;
        }
        .kanban-card {
            background: var(--surface); border: 1px solid var(--border);
            border-radius: 8px; padding: 0.6rem 0.7rem; font-size: 0.8rem;
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        .kanban-card:hover { border-color: rgba(255,255,255,0.18); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
        .kanban-card-num  { font-size:0.68rem; color:var(--muted); font-weight:700; margin-bottom:0.18rem; }
        .kanban-card-name { font-weight:600; color:var(--text); margin-bottom:0.18rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .kanban-card-total { font-size:0.75rem; color:var(--green); font-weight:700; margin-bottom:0.35rem; }
        .kanban-card-actions { display:flex; gap:0.3rem; flex-wrap:wrap; }
        .kanban-card-actions .btn-os { padding:0.2rem 0.5rem; font-size:0.7rem; }
        /* Toggle lista/kanban */
        .view-toggle-group { display:flex; gap:0.2rem; }
        .view-toggle-btn {
            padding:0.3rem 0.55rem; font-size:0.72rem; font-weight:700;
            background:transparent; border:1px solid var(--border);
            border-radius:6px; color:var(--muted); cursor:pointer;
            font-family:inherit; transition:0.15s;
        }
        .view-toggle-btn.active { background:rgba(59,130,246,0.15); border-color:var(--blue); color:var(--blue); }
        .view-toggle-btn:hover:not(.active) { color:var(--text); border-color:rgba(255,255,255,0.2); }

        /* Modal overlay */
        .modal-overlay {
            display:none; position:fixed; inset:0;
            background:rgba(0,0,0,0.65); backdrop-filter:blur(4px);
            z-index:200; align-items:center; justify-content:center;
        }
        .modal-overlay.show { display:flex; animation:fadeUp 0.2s ease; }
        .modal-box {
            background:var(--bg-modal); border:1px solid var(--border);
            border-radius:18px; width:100%; max-width:520px;
            max-height:90vh; display:flex; flex-direction:column;
            box-shadow:0 24px 60px rgba(0,0,0,0.6);
        }
        .modal-header {
            display:flex; align-items:center; justify-content:space-between;
            padding:1rem 1.4rem; border-bottom:1px solid var(--border); flex-shrink:0;
        }
        .modal-title { font-weight:800; font-size:1rem; }
        .modal-close {
            background:transparent; border:none; color:var(--muted);
            font-size:1.1rem; cursor:pointer; line-height:1; padding:0.2rem;
            transition:color 0.15s;
        }
        .modal-close:hover { color:var(--red); }
        .modal-body {
            flex:1; overflow-y:auto; padding:1.25rem 1.4rem;
            display:flex; flex-direction:column; gap:0;
        }
        .modal-body label { margin-top:0.65rem; }
        .modal-body input, .modal-body textarea, .modal-body select {
            margin-bottom:0;
        }
        .modal-footer {
            display:flex; align-items:center; gap:0.75rem;
            padding:1rem 1.4rem; border-top:1px solid var(--border); flex-shrink:0;
        }
        .modal-total { font-size:0.88rem; color:var(--muted); font-weight:600; }
        .modal-total strong { color:var(--green); font-size:1rem; }
        .btn-modal-cancel {
            padding:0.55rem 1rem; background:transparent; border:1px solid var(--border);
            color:var(--muted); border-radius:8px; font-weight:600; font-size:0.82rem;
            cursor:pointer; font-family:inherit; transition:0.15s;
        }
        .btn-modal-cancel:hover { border-color:rgba(255,255,255,0.2); color:var(--text); }
        .btn-modal-save {
            margin-left:auto; padding:0.55rem 1.25rem;
            background:linear-gradient(135deg, var(--blue), var(--purple));
            color:white; border:none; border-radius:8px;
            font-weight:700; font-size:0.85rem; cursor:pointer;
            font-family:inherit; transition:0.15s;
        }
        .btn-modal-save:hover:not(:disabled) { opacity:0.88; transform:translateY(-1px); }
        .btn-modal-save:disabled { opacity:0.5; cursor:not-allowed; }

        /* Modal item rows */
        .mo-item-row {
            display:grid; grid-template-columns:1fr 60px 85px 32px;
            gap:0.4rem; align-items:center; margin-bottom:0.4rem;
        }
        .mo-item-row input, .mo-item-row select {
            margin-bottom:0; padding:0.4rem 0.55rem; font-size:0.82rem;
        }
        .mo-field-prod select { width:100%; }

        /* Products table in Config */
        .prod-table { width:100%; border-collapse:collapse; margin-bottom:0.6rem; }
        .prod-table th { font-size:0.67rem; color:var(--subtle); font-weight:700; text-align:left; padding:0.3rem 0.35rem; border-bottom:1px solid var(--border); text-transform:uppercase; letter-spacing:0.05em; }
        .prod-row td { padding:0.25rem 0.3rem; vertical-align:middle; }
        .prod-row input[type=text], .prod-row input[type=number] { margin:0; padding:0.4rem; font-size:0.8rem; }
        .prod-row input[type=checkbox] { width:15px; height:15px; accent-color:var(--blue); cursor:pointer; }
        .prod-name-col { width:28%; } .prod-price-col { width:15%; } .prod-desc-col { width:46%; }

        /* ── Reset ───────────────────────────────────────────────── */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background: var(--bg); color: var(--text);
            display: flex; height: 100vh; overflow-x: hidden; font-size: 14px;
            -webkit-font-smoothing: antialiased;
        }

        /* ── Sidebar ─────────────────────────────────────────────── */
        .sidebar {
            width: 240px; flex-shrink: 0;
            background: var(--sidebar-bg);
            border-right: 1px solid var(--border);
            display: flex; flex-direction: column;
            padding: 1.25rem 0; gap: 0;
        }
        .sidebar-logo {
            padding: 0 1.25rem 1.25rem;
            font-size: 1.1rem; font-weight: 800;
            background: linear-gradient(135deg, #60a5fa, #a78bfa);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            border-bottom: 1px solid var(--border); margin-bottom: 1rem;
            letter-spacing: -0.02em;
        }
        .nav-section-label {
            padding: 0.2rem 1.25rem 0.6rem;
            font-size: 0.65rem; font-weight: 700;
            letter-spacing: 0.08em; color: var(--subtle);
            text-transform: uppercase;
        }
        .nav-item {
            display: flex; align-items: center; gap: 0.65rem;
            padding: 0.58rem 1.25rem;
            color: var(--muted); font-weight: 500; font-size: 0.875rem;
            cursor: pointer; transition: all 0.15s;
            border: none; background: none; width: 100%; text-align: left;
            position: relative; user-select: none;
        }
        .nav-item:hover { color: var(--text); background: var(--surface-hov); }
        .nav-item.active {
            color: var(--text); background: var(--surface-hov);
            font-weight: 600;
        }
        .nav-item.active::before {
            content: ''; position: absolute;
            left: 0; top: 0; bottom: 0; width: 3px;
            background: var(--nav-accent, var(--blue));
            border-radius: 0 3px 3px 0;
        }
        .nav-icon { font-size: 0.95rem; width: 20px; text-align: center; flex-shrink: 0; }
        .nav-badge {
            margin-left: auto; background: var(--red);
            color: white; font-size: 10px; font-weight: 700;
            min-width: 18px; height: 18px; border-radius: 50%;
            display: none; align-items: center; justify-content: center;
            padding: 0 4px;
        }
        .nav-badge.show { display: flex; animation: pulse-scale 1.5s infinite; }
        @keyframes pulse-scale { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }

        .sidebar-spacer { flex: 1; }
        .sidebar-bot-status {
            margin: 0.75rem 1rem 0.25rem;
            padding: 0.7rem 0.85rem;
            background: var(--surface); border: 1px solid var(--border);
            border-radius: 10px;
            display: flex; align-items: center; gap: 0.6rem; font-size: 0.78rem;
        }
        .s-dot {
            width: 8px; height: 8px; border-radius: 50%;
            background: var(--subtle); flex-shrink: 0; transition: background 0.4s;
        }
        .s-dot.on  { background: var(--green); box-shadow: 0 0 8px var(--green); }
        .s-dot.qr  { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
        .s-label { color: var(--muted); font-weight: 500; }

        /* ── Main Content ────────────────────────────────────────── */
        .main { flex: 1; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }

        /* ── Views ───────────────────────────────────────────────── */
        .view { display: none; flex: 1; height: 100%; overflow: hidden; }
        .view.active { display: flex; flex-direction: column; }
        /* Scrollable views */
        .view-body { overflow-y: auto; flex: 1; }
        .view-pad  { padding: 2rem 2rem; }
        .view-max  { max-width: 1200px; margin: 0 auto; }

        @keyframes fadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
        .fade-up { animation: fadeUp 0.3s ease; }

        /* ── Dashboard ───────────────────────────────────────────── */
        .dash-greeting { margin-bottom: 2rem; }
        .dash-greeting h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 0.25rem; }
        .dash-greeting p  { color: var(--muted); font-size: 0.875rem; }

        /* Status Bar */
        .dash-status {
            display: flex; align-items: center; gap: 0.85rem;
            padding: 0.9rem 1.25rem;
            background: var(--surface); border: 1px solid var(--border);
            border-radius: 14px; margin-bottom: 1.75rem;
        }
        /* Bot Toggle Switch */
        .bot-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; margin-right: 0.5rem; }
        .bot-switch input { opacity: 0; width: 0; height: 0; }
        .bot-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(239,68,68,0.7); transition: .4s; border-radius: 24px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); }
        .bot-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
        .bot-switch input:checked + .bot-slider { background-color: var(--green); box-shadow: 0 0 12px var(--green); }
        .bot-switch input:checked + .bot-slider:before { transform: translateX(20px); }
        .bot-switch input:disabled + .bot-slider { opacity: 0.5; cursor: not-allowed; }

        .dash-status-text  { font-weight: 600; font-size: 0.9rem; }
        .dash-status-right { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }
        .dash-status-sub   { color: var(--muted); font-size: 0.8rem; }
        .btn-go-config     { padding: 0.4rem 0.85rem; background: var(--amber); color: #000; border: none; border-radius: 7px; font-weight: 700; font-size: 0.78rem; cursor: pointer; transition: 0.15s; }
        .btn-go-config:hover { opacity: 0.85; }

        /* KPI Cards */
        .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.75rem; }
        .kpi-card {
            background: var(--surface); border: 1px solid var(--border);
            border-radius: 14px; padding: 1.25rem 1.25rem 1.1rem;
            position: relative; overflow: hidden;
        }
        .kpi-card::after {
            content: ''; position: absolute;
            top: 0; left: 0; right: 0; height: 2px;
            background: var(--kpi-color);
        }
        .kpi-icon { position: absolute; right: 1rem; top: 1rem; font-size: 1.6rem; opacity: 0.18; }
        .kpi-num  { font-size: 2.1rem; font-weight: 900; line-height: 1; margin-bottom: 0.35rem; color: var(--kpi-color); letter-spacing: -0.04em; }
        .kpi-label { font-size: 0.75rem; color: var(--muted); font-weight: 500; }

        /* ── Feature Cards (Grid 3 col, compact sin descripción) ─── */
        .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
        .feature-card {
            background: var(--surface); border: 1px solid var(--border);
            border-radius: 18px; padding: 1.25rem 1.4rem 1rem;
            cursor: pointer; transition: all 0.2s; position: relative; overflow: hidden;
            display: flex; flex-direction: column;
        }
        .feature-card::before {
            content: ''; position: absolute;
            top: 0; left: 0; right: 0; height: 1px;
            background: linear-gradient(90deg, var(--fc-color) 0%, transparent 70%);
            opacity: 0; transition: opacity 0.25s;
        }
        .feature-card:hover { transform: translateY(-4px); background: var(--surface-hov); border-color: rgba(255,255,255,0.14); box-shadow: 0 12px 40px rgba(0,0,0,0.35); }
        .feature-card:hover::before { opacity: 1; }
        .feature-card:hover .fc-arrow { transform: translateX(5px); color: var(--fc-color); }
        .feature-card:active { transform: translateY(-1px); }

        .fc-blue   { --fc-color: var(--blue);   }
        .fc-green  { --fc-color: var(--green);  }
        .fc-purple { --fc-color: var(--purple); }
        .fc-amber  { --fc-color: var(--amber);  }

        .fc-icon {
            width: 44px; height: 44px; border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.25rem; flex-shrink: 0; margin-bottom: 0.85rem;
        }
        .fc-blue   .fc-icon { background: var(--blue-dim);   }
        .fc-green  .fc-icon { background: var(--green-dim);  }
        .fc-purple .fc-icon { background: var(--purple-dim); }
        .fc-amber  .fc-icon { background: var(--amber-dim);  }

        /* Fila superior: ícono a la izquierda, título a la derecha del ícono */
        .fc-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.65rem; }
        .fc-header .fc-icon { margin-bottom: 0; }
        .fc-title  { font-weight: 700; font-size: 0.95rem; }
        .fc-badges { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: auto; }
        .fc-footer {
            display: flex; justify-content: space-between; align-items: center;
            padding-top: 0.75rem; border-top: 1px solid var(--border); margin-top: 0.75rem;
        }
        .fc-stat  { font-size: 0.75rem; color: var(--muted); }
        .fc-stat strong { color: var(--fc-color); font-weight: 700; }
        .fc-arrow { color: var(--subtle); font-size: 1rem; transition: all 0.2s; }
        .fc-mode-badge {
            font-size: 0.62rem; font-weight: 700; padding: 0.18rem 0.5rem;
            border-radius: 20px; white-space: nowrap;
        }
        .fc-mode-badge.active-mode { background: rgba(16,185,129,0.18); color: var(--green); border: 1px solid rgba(16,185,129,0.3); }
        .fc-mode-badge.inactive   { background: var(--surface); color: var(--subtle); border: 1px solid var(--border); }

        /* ── Bot Mode Selector ───────────────────────────────────── */
        .bot-mode-section {
            margin-bottom: 1rem;
            background: var(--surface); border: 1px solid var(--border);
            border-radius: 14px; padding: 0.9rem 1.1rem;
            display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
        }
        .bot-mode-label {
            font-size: 0.72rem; font-weight: 700; color: var(--muted);
            text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0;
        }
        .bms-pills { display: flex; gap: 0.4rem; flex: 1; flex-wrap: wrap; }
        .bms-pill {
            display: flex; align-items: center; gap: 0.4rem;
            padding: 0.38rem 0.9rem; border-radius: 20px;
            border: 1.5px solid var(--border); background: transparent;
            color: var(--muted); font-size: 0.78rem; font-weight: 600;
            cursor: pointer; transition: all 0.18s; font-family: inherit;
            user-select: none;
        }
        .bms-pill:hover { border-color: rgba(255,255,255,0.2); color: var(--text); }
        .bms-pill.active-none   { background: rgba(139,92,246,0.12); border-color: rgba(139,92,246,0.45); color: var(--purple); }
        .bms-pill.active-orders { background: rgba(249,115,22,0.12); border-color: rgba(249,115,22,0.45); color: #f97316; }
        .bms-pill.active-appts  { background: rgba(20,184,166,0.12); border-color: rgba(20,184,166,0.45); color: #14b8a6; }
        .bms-pill .pill-dot {
            width: 7px; height: 7px; border-radius: 50%; background: currentColor;
            opacity: 0; transition: opacity 0.15s;
        }
        .bms-pill.active-none .pill-dot,
        .bms-pill.active-orders .pill-dot,
        .bms-pill.active-appts .pill-dot { opacity: 1; }
        .bms-saving { font-size: 0.7rem; color: var(--green); opacity: 0; transition: opacity 0.3s; display: flex; align-items: center; gap: 0.3rem; }
        .bms-saving.show { opacity: 1; }

        /* ── Config View ─────────────────────────────────────────── */
        .card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem; }
        .card h2 { font-size: 0.92rem; font-weight: 700; margin-bottom: 1.2rem; padding-bottom: 0.65rem; border-bottom: 1px solid var(--border); }
        .card-center { text-align: center; }
        #qrImage { width: 100%; max-width: 400px; background: white; border-radius: 10px; padding: 8px; display: none; margin: 0.85rem auto; }
        .s-badge {
            display: inline-block; padding: 0.4rem 1.1rem; border-radius: 50px;
            font-weight: 600; font-size: 0.8rem;
            background: var(--blue-dim); color: var(--blue);
            border: 1px solid rgba(59,130,246,0.25);
        }
        .s-badge.ok { background: var(--green-dim); color: var(--green); border-color: rgba(16,185,129,0.25); }
        label { display: block; margin-bottom: 0.3rem; font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
        input[type=text], input[type=password], input[type=time], select, textarea {
            width: 100%; padding: 0.65rem 0.75rem; margin-bottom: 0.85rem;
            background: var(--bg-input); border: 1px solid var(--border);
            border-radius: 8px; color: var(--text); font-size: 0.875rem;
            transition: border-color 0.2s; font-family: inherit;
        }
        input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); }
        textarea { resize: vertical; min-height: 70px; }
        select option { background: var(--bg-select); color: var(--text); }
        .btn-primary {
            width: 100%; padding: 0.8rem; background: var(--blue); color: white;
            border: none; border-radius: 9px; font-weight: 700; cursor: pointer;
            transition: 0.15s; font-size: 0.875rem; font-family: inherit; margin-top: 0.25rem;
        }
        .btn-primary:hover { background: #2563eb; transform: translateY(-1px); }
        .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
        .section-div { border: none; border-top: 1px solid var(--border); margin: 1.15rem 0; }
        .section-head { font-size: 0.875rem; font-weight: 700; margin-bottom: 0.8rem; display: flex; align-items: center; gap: 0.5rem; }
        .toggle-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; cursor: pointer; }
        .toggle-row input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--blue); cursor: pointer; margin: 0; }
        .toggle-row span { font-size: 0.82rem; font-weight: 500; color: var(--muted); }
        .time-row { display: flex; gap: 0.75rem; }
        .time-row > div { flex: 1; }

        /* Quick Replies Table */
        .qr-table { width: 100%; border-collapse: collapse; margin-bottom: 0.6rem; }
        .qr-table th { font-size: 0.67rem; color: var(--subtle); font-weight: 700; text-align: left; padding: 0.3rem 0.35rem; border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: 0.05em; }
        .qr-row td { padding: 0.25rem 0.3rem; vertical-align: middle; }
        .qr-row input[type=text] { margin: 0; padding: 0.45rem; font-size: 0.8rem; }
        .qr-kw-col { width: 32%; } .qr-resp-col { width: 58%; }
        .btn-del { background: transparent; border: 1px solid rgba(239,68,68,0.35); color: var(--red); border-radius: 5px; padding: 0.3rem 0.5rem; cursor: pointer; font-size: 0.78rem; transition: 0.15s; }
        .btn-del:hover { background: var(--red); color: white; }
        .btn-add-row { background: transparent; border: 1px dashed var(--border); color: var(--muted); border-radius: 7px; padding: 0.4rem 0.85rem; font-size: 0.8rem; cursor: pointer; transition: 0.2s; margin-bottom: 0.85rem; display: block; }
        .btn-add-row:hover { border-color: var(--blue); color: var(--blue); }

        /* ── Config Hub ──────────────────────────────────────────── */
        .cfg-hub-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 0.3rem; }
        .cfg-hub-sub   { color: var(--muted); font-size: 0.875rem; margin-bottom: 2rem; }
        .cfg-hub-grid  { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; max-width: 900px; }
        .cfg-hub-card {
            background: var(--surface); border: 1px solid var(--border);
            border-radius: 20px; padding: 2rem 1.75rem;
            cursor: pointer; transition: all 0.2s;
            display: flex; flex-direction: column; gap: 0.75rem;
            position: relative; overflow: hidden;
        }
        .cfg-hub-card::after {
            content: ''; position: absolute;
            inset: 0; border-radius: 20px;
            background: var(--chc-grad);
            opacity: 0; transition: opacity 0.3s;
        }
        .cfg-hub-card:hover { transform: translateY(-5px); border-color: var(--chc-border); box-shadow: 0 16px 48px rgba(0,0,0,0.4); }
        .cfg-hub-card:hover::after { opacity: 1; }
        .cfg-hub-card:active { transform: translateY(-2px); }
        .chc-blue   { --chc-border: rgba(59,130,246,0.4);   --chc-grad: linear-gradient(135deg, rgba(59,130,246,0.06) 0%, transparent 70%); }
        .chc-green  { --chc-border: rgba(16,185,129,0.4);   --chc-grad: linear-gradient(135deg, rgba(16,185,129,0.06) 0%, transparent 70%); }
        .chc-purple { --chc-border: rgba(139,92,246,0.4);   --chc-grad: linear-gradient(135deg, rgba(139,92,246,0.06) 0%, transparent 70%); }
        .chc-amber  { --chc-border: rgba(245,158,11,0.4);   --chc-grad: linear-gradient(135deg, rgba(245,158,11,0.06) 0%, transparent 70%); }
        .chc-icon {
            width: 56px; height: 56px; border-radius: 16px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.6rem; flex-shrink: 0;
            position: relative; z-index: 1;
        }
        .chc-blue   .chc-icon { background: var(--blue-dim); }
        .chc-green  .chc-icon { background: var(--green-dim); }
        .chc-purple .chc-icon { background: var(--purple-dim); }
        .chc-amber  .chc-icon { background: var(--amber-dim); }
        .chc-title { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em; position: relative; z-index: 1; }
        .chc-desc  { font-size: 0.82rem; color: var(--muted); line-height: 1.7; flex: 1; position: relative; z-index: 1; }
        .chc-footer {
            display: flex; justify-content: space-between; align-items: center;
            padding-top: 1rem; border-top: 1px solid var(--border);
            position: relative; z-index: 1;
        }
        .chc-badge { font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.65rem; border-radius: 20px; }
        .chc-blue   .chc-badge { background: var(--blue-dim);   color: var(--blue);   }
        .chc-green  .chc-badge { background: var(--green-dim);  color: var(--green);  }
        .chc-purple .chc-badge { background: var(--purple-dim); color: var(--purple); }
        .chc-amber  .chc-badge { background: var(--amber-dim);  color: var(--amber);  }
        .chc-arrow { font-size: 1.1rem; color: var(--subtle); transition: all 0.2s; position: relative; z-index: 1; }
        .cfg-hub-card:hover .chc-arrow { transform: translateX(6px); color: var(--text); }

        /* ── Files Module ──────────────────────────────────────── */
        .chc-red    { --chc-border: rgba(239,68,68,0.4);    --chc-grad: linear-gradient(135deg, rgba(239,68,68,0.06) 0%, transparent 70%); }
        .chc-red    .chc-icon  { background: var(--red-dim); }
        .chc-red    .chc-badge { background: var(--red-dim); color: var(--red); }

        .files-dropzone {
            border: 2px dashed var(--border); border-radius: 14px;
            padding: 2.5rem 2rem; text-align: center;
            cursor: pointer; transition: all 0.2s;
            background: rgba(239,68,68,0.03);
            margin-bottom: 1.5rem;
        }
        .files-dropzone:hover, .files-dropzone.drag-over {
            border-color: var(--red); background: rgba(239,68,68,0.07);
        }
        .files-dropzone .dz-icon { font-size: 2.5rem; margin-bottom: 0.6rem; }
        .files-dropzone .dz-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.3rem; }
        .files-dropzone .dz-sub { font-size: 0.78rem; color: var(--muted); }
        .files-dropzone .dz-types { font-size: 0.7rem; color: var(--subtle); margin-top: 0.5rem; }

        .files-table { width: 100%; border-collapse: collapse; }
        .files-table th { font-size: 0.67rem; color: var(--subtle); font-weight: 700; text-align: left;
            padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: 0.05em; }
        .files-row td { padding: 0.55rem 0.5rem; vertical-align: middle; border-bottom: 1px solid rgba(255,255,255,0.04); }
        .files-row:last-child td { border-bottom: none; }
        .files-row:hover td { background: rgba(255,255,255,0.02); }
        .file-type-badge { display: inline-flex; align-items: center; gap: 0.3rem;
            font-size: 0.68rem; font-weight: 700; padding: 0.18rem 0.5rem; border-radius: 6px; white-space: nowrap; }
        .ft-pdf   { background: rgba(239,68,68,0.15);  color: var(--red);    }
        .ft-img   { background: rgba(16,185,129,0.15); color: var(--green);  }
        .ft-video { background: rgba(139,92,246,0.15); color: var(--purple); }
        .ft-audio { background: rgba(245,158,11,0.15); color: var(--amber);  }
        .ft-doc   { background: rgba(59,130,246,0.15); color: var(--blue);   }
        .file-name-input { margin: 0; padding: 0.35rem 0.5rem; font-size: 0.82rem; width: 100%; }
        .file-size-text { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
        .files-upload-progress {
            display: none; align-items: center; gap: 0.75rem;
            padding: 0.85rem 1rem; background: rgba(239,68,68,0.08);
            border: 1px solid rgba(239,68,68,0.25); border-radius: 10px; margin-bottom: 1rem;
        }
        .files-upload-progress.show { display: flex; }
        .fup-bar-wrap { flex: 1; background: var(--border); border-radius: 4px; height: 6px; overflow: hidden; }
        .fup-bar { height: 100%; background: var(--red); border-radius: 4px; width: 0%; transition: width 0.3s; }
        .fup-text { font-size: 0.78rem; font-weight: 600; color: var(--red); white-space: nowrap; }
        .files-empty { text-align: center; padding: 2.5rem 1rem; color: var(--muted); font-size: 0.85rem; line-height: 2; }

        /* Descripción inline en la tabla de archivos */
        .file-info-cell { display: flex; flex-direction: column; gap: 0.15rem; }
        .file-name-text { font-weight: 600; font-size: 0.85rem; color: var(--text); }
        .file-desc-text {
            font-size: 0.73rem; color: var(--muted); line-height: 1.4;
            cursor: pointer; padding: 0.15rem 0.3rem; border-radius: 5px;
            border: 1px solid transparent; transition: all 0.15s;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        .file-desc-text:hover { border-color: var(--border); background: rgba(255,255,255,0.03); color: var(--text); }
        .file-desc-text.empty { color: var(--subtle); font-style: italic; }
        .file-desc-editing {
            font-size: 0.73rem; width: 100%; padding: 0.25rem 0.4rem; margin: 0;
            border-radius: 5px; min-height: 42px; resize: none;
            border: 1px solid var(--blue) !important; background: rgba(59,130,246,0.06) !important;
            color: var(--text); font-family: inherit; line-height: 1.45;
        }

        /* Sección de Grupos */
        .groups-section { margin-top: 1.5rem; }
        .groups-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
        }
        .groups-header-title { font-size: 0.875rem; font-weight: 700; }
        .btn-new-group {
            display: flex; align-items: center; gap: 0.4rem;
            padding: 0.38rem 0.85rem; border-radius: 8px;
            background: rgba(139,92,246,0.12); color: var(--purple);
            border: 1px solid rgba(139,92,246,0.3); font-size: 0.78rem;
            font-weight: 700; cursor: pointer; transition: 0.15s; font-family: inherit;
        }
        .btn-new-group:hover { background: rgba(139,92,246,0.22); }
        .groups-list { padding: 0.75rem 1.25rem; display: flex; flex-direction: column; gap: 0.65rem; }
        .group-card {
            background: rgba(139,92,246,0.05); border: 1px solid rgba(139,92,246,0.18);
            border-radius: 12px; overflow: hidden; transition: border-color 0.15s;
        }
        .group-card:hover { border-color: rgba(139,92,246,0.35); }
        .group-card-header {
            display: flex; align-items: flex-start; gap: 0.75rem;
            padding: 0.8rem 1rem; border-bottom: 1px solid rgba(139,92,246,0.12);
        }
        .group-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }
        .group-meta { flex: 1; min-width: 0; }
        .group-name { font-weight: 700; font-size: 0.875rem; color: var(--text); }
        .group-desc { font-size: 0.75rem; color: var(--muted); line-height: 1.5; margin-top: 0.15rem; }
        .group-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
        .btn-group-edit {
            padding: 0.28rem 0.65rem; border-radius: 6px;
            background: rgba(139,92,246,0.1); color: var(--purple);
            border: 1px solid rgba(139,92,246,0.25); font-size: 0.72rem;
            font-weight: 600; cursor: pointer; transition: 0.15s; font-family: inherit;
        }
        .btn-group-edit:hover { background: rgba(139,92,246,0.2); }
        .btn-group-del {
            padding: 0.28rem 0.65rem; border-radius: 6px;
            background: transparent; color: var(--red);
            border: 1px solid rgba(239,68,68,0.25); font-size: 0.72rem;
            font-weight: 600; cursor: pointer; transition: 0.15s; font-family: inherit;
        }
        .btn-group-del:hover { background: var(--red-dim); }
        .group-files-strip {
            display: flex; flex-wrap: wrap; gap: 0.35rem;
            padding: 0.65rem 1rem; align-items: center;
        }
        .group-file-chip {
            display: inline-flex; align-items: center; gap: 0.3rem;
            padding: 0.18rem 0.55rem; border-radius: 20px;
            background: rgba(139,92,246,0.1); color: var(--purple);
            border: 1px solid rgba(139,92,246,0.2); font-size: 0.7rem; font-weight: 600;
        }
        .groups-empty { text-align: center; padding: 1.5rem 1rem; color: var(--muted); font-size: 0.82rem; line-height: 2; }

        /* Modal de subida de archivo (reemplaza customPrompt) */
        .upload-modal-fields { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem 1.4rem; }
        .upload-modal-fields label { margin: 0 0 0.2rem; }
        .upload-modal-fields input, .upload-modal-fields textarea { margin: 0; }

        /* Modal de Grupo */
        .group-files-checklist { display: flex; flex-direction: column; gap: 0.4rem; max-height: 220px; overflow-y: auto; padding: 0.25rem 0; }
        .gfc-item {
            display: flex; align-items: center; gap: 0.65rem;
            padding: 0.45rem 0.6rem; border-radius: 8px; cursor: pointer;
            border: 1px solid transparent; transition: 0.15s; user-select: none;
        }
        .gfc-item:hover { background: var(--surface-hov); border-color: var(--border); }
        .gfc-item.selected { background: var(--purple-dim); border-color: rgba(139,92,246,0.3); }
        .gfc-item input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--purple); flex-shrink: 0; }
        .gfc-name { font-weight: 600; font-size: 0.82rem; }
        .gfc-type { font-size: 0.7rem; color: var(--muted); margin-left: auto; }

        /* Sub-view back button */
        .sub-view-header {
            display: flex; align-items: center; gap: 1rem;
            margin-bottom: 1.75rem;
        }
        .btn-back {
            display: flex; align-items: center; gap: 0.4rem;
            padding: 0.42rem 0.9rem;
            background: var(--surface); border: 1px solid var(--border);
            border-radius: 8px; color: var(--muted);
            font-size: 0.8rem; font-weight: 600; cursor: pointer;
            transition: all 0.15s; font-family: inherit;
        }
        .btn-back:hover { border-color: rgba(255,255,255,0.2); color: var(--text); }
        .sub-view-title { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.03em; }
        .sub-view-sub   { font-size: 0.82rem; color: var(--muted); }
        .config-panel { max-width: 900px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 2rem; }
        /* WhatsApp card is full width in the hub grid */
        .cfg-hub-card.wa-card { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 1.5rem; padding: 1.5rem 2rem; cursor: default; }
        .cfg-hub-card.wa-card:hover { transform: none; box-shadow: none; border-color: rgba(16,185,129,0.4); }
        .cfg-hub-card.wa-card::after { display: none; }
        .wa-info { flex: 1; }
        .wa-info h3 { font-size: 1rem; font-weight: 800; margin-bottom: 0.3rem; }
        .wa-info p  { font-size: 0.8rem; color: var(--muted); line-height: 1.6; }
        .wa-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; flex-shrink: 0; }

        /* ── CRM View ────────────────────────────────────────────── */
        .crm-frame { flex: 1; overflow: hidden; padding: 0.75rem 1.25rem; display: flex; flex-direction: column; }
        .crm-box { flex: 1; display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }

        .crm-sidebar { width: 265px; flex-shrink: 0; border-right: 1px solid var(--border); display: flex; flex-direction: column; background: rgba(0,0,0,0.15); }
        .crm-sh { padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); font-size: 0.68rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; }
        .client-list { flex: 1; overflow-y: auto; list-style: none; }
        .client-item { padding: 0.72rem 1rem; border-bottom: 1px solid var(--border); cursor: pointer; transition: 0.12s; }
        .client-item:hover { background: rgba(255,255,255,0.03); }
        .client-item.active { background: var(--blue-dim); border-left: 3px solid var(--blue); }
        .c-name { font-weight: 600; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .c-phone { font-size: 0.7rem; color: var(--muted); margin-top: 2px; }
        .c-badges { display: flex; gap: 3px; margin-top: 4px; }
        .badge { font-size: 9px; padding: 1px 5px; border-radius: 20px; font-weight: 700; }
        .b-new  { background: var(--green-dim);  color: var(--green); }
        .b-mute { background: var(--red-dim);    color: var(--red);   }

        .crm-chat { flex: 1; display: flex; flex-direction: column; min-width: 0; }
        .chat-header { padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.1); flex-shrink: 0; }
        .chat-htitle { font-weight: 700; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .btn-pause { background: var(--red); color: white; padding: 0.35rem 0.8rem; border-radius: 7px; border: none; cursor: pointer; font-weight: 600; font-size: 0.78rem; display: none; transition: 0.15s; white-space: nowrap; font-family: inherit; }
        .btn-pause:hover { background: #dc2626; }
        .btn-pause.muted { background: var(--green); }
        .chat-body { flex: 1; padding: 1rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem; }
        .msg { max-width: 75%; padding: 0.6rem 0.85rem; border-radius: 12px; font-size: 0.85rem; line-height: 1.55; }
        .msg-u { background: rgba(255,255,255,0.06); border-top-left-radius: 3px; align-self: flex-start; animation: fadeUp 0.2s; }
        .msg-b { background: rgba(59,130,246,0.2);   border-top-right-radius: 3px; align-self: flex-end;  animation: fadeUp 0.2s; }
        .msg-who { font-size: 9px; opacity: 0.55; font-weight: 700; margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.05em; }
        .chat-empty { text-align: center; color: var(--muted); margin: auto; padding: 3rem 2rem; font-size: 0.85rem; line-height: 2; }

        .crm-info { width: 290px; flex-shrink: 0; border-left: 1px solid var(--border); display: flex; flex-direction: column; }
        .crm-ih { padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); font-size: 0.68rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; }
        .crm-ib { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.85rem; }
        .crm-placeholder { text-align: center; color: var(--muted); font-size: 0.78rem; padding: 2rem 0.75rem; line-height: 1.9; margin: auto; }
        .info-group-label { font-size: 0.65rem; font-weight: 700; color: var(--subtle); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 0.45rem; }
        .info-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.78rem; padding: 0.28rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
        .info-key { color: var(--muted); }
        .info-val { color: var(--text); font-weight: 600; font-size: 0.74rem; text-align: right; max-width: 58%; }
        .crm-info label { text-transform: none; letter-spacing: 0; margin-top: 0.5rem; }
        .crm-info input[type=text], .crm-info textarea { margin-bottom: 0.45rem; padding: 0.5rem; font-size: 0.8rem; }
        .crm-info textarea { min-height: 68px; }
        .btn-save { width: 100%; padding: 0.52rem; background: var(--blue); color: white; border: none; border-radius: 7px; font-weight: 600; cursor: pointer; font-size: 0.8rem; transition: 0.15s; font-family: inherit; }
        .btn-save:hover { background: #2563eb; }

        /* Nuevos estilos para la Tabla del CRM */
        .crm-table { width: 100%; border-collapse: collapse; text-align: left; }
        .crm-table th { font-size: 0.72rem; color: var(--subtle); font-weight: 700; padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: 0.05em; background: rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 10; user-select: none; }
        .crm-table th.sortable:hover { color: var(--text); background: rgba(255,255,255,0.02); }
        .crm-table td { padding: 0.65rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: middle; font-size: 0.85rem; }
        .crm-table tr:last-child td { border-bottom: none; }
        .crm-table tr.crm-t-row { cursor: pointer; transition: background 0.15s; }
        .crm-table tr.crm-t-row:hover { background: rgba(255,255,255,0.03); }
        .crm-t-name { font-weight: 600; display: flex; align-items: center; gap: 0.5rem; }
        .crm-t-phone { color: var(--muted); font-size: 0.8rem; }
        .crm-t-email { color: var(--muted); font-size: 0.8rem; }
        .badge-purchased { background: rgba(34,197,94,0.15); color: #22c55e; border: 1px solid rgba(34,197,94,0.3); font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: 4px; display: inline-block; white-space: nowrap; }
        .badge-lead { background: rgba(139,92,246,0.15); color: var(--purple); border: 1px solid rgba(139,92,246,0.3); font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: 4px; display: inline-block; white-space: nowrap; }


        /* ── Broadcast View ──────────────────────────────────────── */
        .bc-frame { flex: 1; overflow: hidden; padding: 0.75rem 1.25rem; display: flex; flex-direction: column; }
        .bc-box { flex: 1; display: flex; gap: 1.25rem; overflow: hidden; }

        .bc-left { width: 345px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; }
        .bc-lh { padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
        .bc-lh-title { font-weight: 700; font-size: 0.85rem; }
        .btn-selall { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 6px; padding: 0.28rem 0.65rem; font-size: 0.74rem; cursor: pointer; font-weight: 600; transition: 0.15s; font-family: inherit; }
        .btn-selall:hover { border-color: var(--blue); color: var(--blue); }
        .bc-list { flex: 1; overflow-y: auto; padding: 0.35rem; }
        .bc-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.58rem 0.7rem; border-radius: 9px; cursor: pointer; transition: 0.12s; user-select: none; }
        .bc-item:hover { background: var(--surface-hov); }
        .bc-item.sel { background: var(--blue-dim); }
        .bc-item input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--blue); flex-shrink: 0; cursor: pointer; }
        .bc-name { font-weight: 600; font-size: 0.83rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .bc-meta { font-size: 0.7rem; color: var(--muted); }
        .bc-cnt  { font-size: 0.7rem; color: var(--muted); flex-shrink: 0; margin-left: auto; }
        .bc-empty { text-align: center; color: var(--muted); padding: 2rem 1rem; font-size: 0.8rem; line-height: 1.9; }
        .bc-search { padding: 0.65rem 1rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
        .bc-search input { width: 100%; padding: 0.45rem 0.7rem; margin: 0; background: rgba(0,0,0,0.2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 0.8rem; font-family: inherit; }
        .bc-search input:focus { outline: none; border-color: var(--blue); }
        .bc-filters { padding: 0.6rem 1rem; border-bottom: 1px solid var(--border); display: flex; gap: 0.4rem; overflow-x: auto; flex-shrink: 0; }
        .bc-filters::-webkit-scrollbar { display: none; }
        .btn-bc-filt { padding: 0.3rem 0.75rem; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 0.72rem; font-weight: 600; cursor: pointer; transition: 0.15s; white-space: nowrap; }
        .btn-bc-filt:hover { border-color: rgba(255,255,255,0.2); color: var(--text); }
        .btn-bc-filt.active { background: var(--blue-dim); color: var(--blue); border-color: rgba(59,130,246,0.3); }
        .bc-info-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
        .bc-info-phone { font-size: 0.7rem; color: var(--muted); margin-top: 2px; }
        .bc-info-badge { font-size: 0.65rem; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.05); padding: 0.15rem 0.4rem; border-radius: 4px; color: var(--subtle); align-self: flex-start; margin-top: 3px; font-weight: 600; }

        .bc-right { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; display: flex; flex-direction: column; padding: 1.5rem; gap: 0.85rem; overflow: hidden; }
        .bc-title   { font-weight: 800; font-size: 1rem; }
        .bc-rcnt    { font-size: 0.78rem; color: var(--muted); font-weight: 500; }
        .bc-msg-area { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.4rem; }
        .bc-msg-area textarea { flex: 1; min-height: 0; resize: none; }
        .bc-warn { font-size: 0.75rem; color: var(--amber); background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.18); border-radius: 8px; padding: 0.6rem 0.85rem; line-height: 1.7; flex-shrink: 0; }
        .bc-send-status { text-align: center; font-weight: 600; font-size: 0.82rem; color: var(--green); min-height: 16px; flex-shrink: 0; }
        .btn-bc { flex-shrink: 0; padding: 0.85rem; background: linear-gradient(135deg, var(--blue), var(--purple)); color: white; border: none; border-radius: 10px; font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: 0.15s; font-family: inherit; }
        .btn-bc:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); }
        .btn-bc:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

        /* ── Stats View ──────────────────────────────────────────── */
        .stats-page-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 0.3rem; }
        .stats-page-sub   { color: var(--muted); font-size: 0.875rem; }
        .stats-header-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.75rem; }
        /* Filtros de periodo */
        .period-filters { display: flex; gap: 0.3rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0.3rem; }
        .pfilt {
            padding: 0.38rem 1rem; border-radius: 9px; border: none; background: transparent;
            color: var(--muted); font-size: 0.78rem; font-weight: 600; cursor: pointer;
            transition: all 0.18s; font-family: inherit; white-space: nowrap;
        }
        .pfilt:hover { color: var(--text); background: var(--surface-hov); }
        .pfilt.active {
            background: linear-gradient(135deg, var(--blue), var(--purple));
            color: #fff; box-shadow: 0 2px 10px rgba(59,130,246,0.35);
        }
        .top-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin-top: 1.5rem; }
        .top-card-header { padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
        .top-card-header h3 { font-size: 0.875rem; font-weight: 700; }
        .top-card-header span { font-size: 0.75rem; color: var(--muted); }
        .rank-row { display: flex; align-items: center; gap: 1rem; padding: 0.82rem 1.25rem; border-bottom: 1px solid var(--border); transition: 0.12s; }
        .rank-row:last-child { border-bottom: none; }
        .rank-row:hover { background: var(--surface-hov); }
        .rank-n { width: 22px; height: 22px; border-radius: 6px; background: var(--surface-hov); font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; color: var(--muted); flex-shrink: 0; }
        .rank-info { flex: 1; min-width: 0; }
        .rank-name  { font-weight: 600; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .rank-phone { color: var(--muted); font-size: 0.72rem; }
        .rank-bar-wrap { width: 130px; flex-shrink: 0; }
        .rank-bar-bg   { background: var(--border); border-radius: 4px; height: 5px; }
        .rank-bar-fill { height: 5px; border-radius: 4px; background: var(--blue); transition: width 0.5s 0.1s; }
        .rank-count    { font-size: 0.72rem; color: var(--muted); text-align: right; margin-top: 3px; font-weight: 600; }
        .stats-empty { text-align: center; padding: 3rem 2rem; color: var(--muted); font-size: 0.85rem; line-height: 2; }

        /* Bot Toggle Button */
        .btn-bot-toggle {
            padding: 0.38rem 0.9rem; border-radius: 7px;
            background: rgba(239,68,68,0.15); color: var(--red);
            border: 1px solid rgba(239,68,68,0.35);
            font-weight: 600; font-size: 0.78rem; cursor: pointer;
            transition: all 0.2s; white-space: nowrap; font-family: inherit;
        }
        .btn-bot-toggle:hover { background: rgba(239,68,68,0.25); }
        .btn-bot-toggle.is-paused {
            background: var(--green-dim); color: var(--green);
            border-color: rgba(16,185,129,0.35);
        }
        .btn-bot-toggle.is-paused:hover { background: rgba(16,185,129,0.25); }
        .btn-bot-toggle:disabled { opacity: 0.5; cursor: not-allowed; }

        /* Logout Button */
        .btn-logout {
            display: block; width: 100%; margin-top: 1rem;
            padding: 0.6rem 1rem;
            background: transparent; color: var(--red);
            border: 1px solid rgba(239,68,68,0.35);
            border-radius: 8px; font-weight: 600; font-size: 0.8rem;
            cursor: pointer; transition: 0.2s; font-family: inherit;
        }
        .btn-logout:hover { background: var(--red-dim); }
        .btn-logout:disabled { opacity: 0.5; cursor: not-allowed; }

        /* Toast */
        .toast { position: fixed; bottom: 1.5rem; right: 1.5rem; padding: 0.75rem 1.25rem; border-radius: 10px; color: white; font-weight: 600; font-size: 0.82rem; transform: translateY(80px); opacity: 0; transition: 0.3s; z-index: 999; pointer-events: none; box-shadow: 0 8px 30px rgba(0,0,0,0.4); }
        .toast.show { transform: translateY(0); opacity: 1; }
        .toast.ok  { background: var(--green); }
        .toast.err { background: var(--red);   }
        .toast.info { background: var(--blue); }

        /* ── Recharge Modal ────────────────────────────────────────── */
        .recharge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
        .recharge-card {
            background: var(--surface); border: 2px solid var(--border);
            border-radius: 14px; padding: 1.25rem 1rem; text-align: center;
            cursor: pointer; transition: all 0.2s; position: relative; overflow: hidden;
            display: flex; flex-direction: column; gap: 0.5rem;
        }
        .recharge-card:hover { border-color: var(--blue); background: var(--surface-hov); transform: translateY(-3px); }
        .recharge-card.active { border-color: var(--blue); background: var(--blue-dim); }
        .recharge-card .rc-amount { font-size: 1.25rem; font-weight: 900; color: var(--text); }
        .recharge-card .rc-price { font-size: 0.85rem; color: var(--blue); font-weight: 700; }
        .recharge-card .rc-desc { font-size: 0.7rem; color: var(--muted); }
        .recharge-card .rc-badge {
            position: absolute; top: 0; right: 0; background: var(--blue); color: white;
            padding: 2px 8px; font-size: 9px; font-weight: 800; border-radius: 0 0 0 8px;
        }

        /* ── Debug Terminal ────────────────────────────────────── */
        .dbg-btn {
            display: flex; align-items: center; gap: 0.5rem;
            margin: 0.4rem 0.75rem 0.75rem;
            padding: 0.4rem 0.75rem;
            background: transparent; border: 1px solid rgba(255,255,255,0.06);
            border-radius: 8px; color: rgba(255,255,255,0.2);
            font-size: 0.72rem; font-weight: 600; cursor: pointer;
            transition: all 0.2s; font-family: inherit; width: calc(100% - 1.5rem);
            text-align: left; letter-spacing: 0.02em;
        }
        .dbg-btn:hover { color: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.03); }

        .dbg-overlay {
            display: none; position: fixed; inset: 0;
            background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);
            z-index: 500; align-items: flex-end; justify-content: center;
            padding: 1.5rem;
        }
        .dbg-overlay.show { display: flex; animation: fadeUp 0.25s ease; }
        .dbg-panel {
            width: 100%; max-width: 900px; height: 70vh;
            background: #0a0d12; border: 1px solid rgba(255,255,255,0.12);
            border-radius: 18px; display: flex; flex-direction: column;
            box-shadow: 0 32px 80px rgba(0,0,0,0.8);
            font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
            overflow: hidden;
        }
        .dbg-header {
            display: flex; align-items: center; gap: 0.75rem;
            padding: 0.75rem 1.25rem;
            border-bottom: 1px solid rgba(255,255,255,0.07);
            background: rgba(255,255,255,0.03); flex-shrink: 0;
        }
        .dbg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; animation: pulse-scale 2s infinite; }
        .dbg-dot.live { background: #10b981; box-shadow: 0 0 8px #10b981; }
        .dbg-title { font-size: 0.82rem; font-weight: 700; color: rgba(255,255,255,0.7); letter-spacing: 0.05em; }
        .dbg-version { font-size: 0.7rem; color: rgba(255,255,255,0.3); margin-left: 0.25rem; }
        .dbg-actions { margin-left: auto; display: flex; gap: 0.5rem; }
        .dbg-action-btn {
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
            color: rgba(255,255,255,0.4); border-radius: 6px; padding: 0.28rem 0.65rem;
            font-size: 0.72rem; cursor: pointer; transition: 0.15s; font-family: inherit;
        }
        .dbg-action-btn:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); }
        .dbg-body {
            flex: 1; overflow-y: auto; padding: 0.75rem 1.25rem;
            display: flex; flex-direction: column; gap: 1px;
        }
        .dbg-line {
            font-size: 0.73rem; line-height: 1.7; padding: 0.1rem 0;
            border-bottom: 1px solid rgba(255,255,255,0.025);
            word-break: break-all; white-space: pre-wrap;
        }
        .dbg-ts { color: rgba(255,255,255,0.2); margin-right: 0.6rem; font-size: 0.68rem; }
        .dbg-log   { color: #e2e8f0; }
        .dbg-error { color: #f87171; }
        .dbg-warn  { color: #fbbf24; }
        .dbg-empty { color: rgba(255,255,255,0.2); font-size: 0.8rem; text-align: center; padding: 3rem; }

        /* ── Scrollbar ───────────────────────────────────────────── */
        ::-webkit-scrollbar { width: 4px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

        /* ── Prompt Templates Selector ── */
        .prompt-tpl-bar {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.6rem;
            flex-wrap: wrap;
        }
        .prompt-tpl-select {
            flex: 1;
            min-width: 0;
            padding: 0.4rem 0.7rem;
            border-radius: 8px;
            border: 1.5px solid var(--border);
            background: var(--bg-input);
            color: var(--text);
            font-size: 0.82rem;
            font-family: inherit;
            cursor: pointer;
            outline: none;
            transition: border-color 0.2s;
        }
        .prompt-tpl-select:focus { border-color: var(--blue); }
        .prompt-tpl-btn {
            padding: 0.4rem 0.85rem;
            border-radius: 8px;
            border: 1.5px solid rgba(59,130,246,0.4);
            background: rgba(59,130,246,0.1);
            color: var(--blue);
            font-size: 0.8rem;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s;
            font-family: inherit;
            white-space: nowrap;
        }
        .prompt-tpl-btn:hover { background: rgba(59,130,246,0.2); border-color: var(--blue); }
        /* Wizard template bar */
        .wz-tpl-bar {
            display: flex;
            gap: 0.4rem;
            margin-bottom: 0.5rem;
            flex-wrap: wrap;
        }
        .wz-tpl-select {
            flex: 1;
            padding: 0.45rem 0.6rem;
            border-radius: 8px;
            border: 1.5px solid var(--border);
            background: var(--bg-input);
            color: var(--text);
            font-size: 0.8rem;
            font-family: inherit;
            cursor: pointer;
            outline: none;
        }
        .wz-tpl-btn {
            padding: 0.45rem 0.85rem;
            border-radius: 8px;
            border: 1.5px solid rgba(139,92,246,0.4);
            background: rgba(139,92,246,0.1);
            color: var(--purple);
            font-size: 0.78rem;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.15s;
            font-family: inherit;
        }
        .wz-tpl-btn:hover { background: rgba(139,92,246,0.2); }

        /* ── Brain 2-Column Layout ──────────────────────────────── */
        .brain-layout {
            display: grid;
            grid-template-columns: 360px 1fr;
            gap: 0;
            align-items: start;
        }
        .brain-left {
            padding: 2rem;
            display: flex;
            flex-direction: column;
            border-right: 1px solid var(--border);
        }
        .brain-right {
            padding: 2rem;
            display: flex;
            flex-direction: column;
            gap: 0;
        }
        .brain-right #sysPrompt {
            flex: 1;
            min-height: 480px;
            resize: vertical;
            font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
            font-size: 0.82rem;
            line-height: 1.65;
        }
        .prompt-counter {
            font-size: 0.7rem;
            color: var(--subtle);
            text-align: right;
            margin-top: 0.4rem;
            font-variant-numeric: tabular-nums;
        }
        /* CRM: buscador en sidebar */
        .crm-search {
            padding: 0.5rem 0.75rem;
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
        }
        .crm-search input {
            width: 100%;
            padding: 0.42rem 0.65rem;
            margin: 0;
            background: rgba(0,0,0,0.2);
            border: 1px solid var(--border);
            border-radius: 7px;
            color: var(--text);
            font-size: 0.8rem;
            font-family: inherit;
        }
        .crm-search input:focus { outline: none; border-color: var(--blue); }
        /* Char counter in broadcast */
        .bc-char-counter {
            font-size: 0.7rem;
            color: var(--subtle);
            text-align: right;
            margin-top: -0.65rem;
            margin-bottom: 0.5rem;
        }

        /* ── Health Check Panel (Fase 38) ────────────────────────────────── */
        .health-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 16px;
            overflow: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        }
        .health-card:hover {
            border-color: rgba(255, 255, 255, 0.12);
        }
        .health-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.1rem 1.5rem;
            background: rgba(255, 255, 255, 0.01);
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            user-select: none;
            transition: background 0.2s;
        }
        .health-header:hover {
            background: rgba(255, 255, 255, 0.03);
        }
        .health-title {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .health-title h3 {
            margin: 0;
            font-size: 0.95rem;
            font-weight: 700;
            letter-spacing: 0.3px;
        }
        .pulse-ring {
            font-size: 1.2rem;
            display: inline-block;
            animation: pulseIcon 2s infinite ease-in-out;
        }
        @keyframes pulseIcon {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.15); }
        }
        .health-collapse-btn {
            font-size: 0.8rem;
            color: var(--muted);
            transition: transform 0.3s ease;
        }
        .health-card.collapsed .health-collapse-btn {
            transform: rotate(-90deg);
        }
        .health-card.collapsed .health-header {
            border-bottom-color: transparent;
        }
        .health-content {
            padding: 1.5rem;
            transition: max-height 0.35s ease, opacity 0.35s ease;
            max-height: 500px;
            opacity: 1;
            overflow: hidden;
        }
        .health-card.collapsed .health-content {
            max-height: 0;
            padding-top: 0;
            padding-bottom: 0;
            opacity: 0;
            border-top: none;
        }
        .health-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 1.25rem;
            margin-bottom: 1.5rem;
        }
        .health-item {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            padding: 1rem;
            background: rgba(255,255,255,0.02);
            border: 1px solid var(--border);
            border-radius: 12px;
            transition: transform 0.2s, border-color 0.2s;
        }
        .health-item:hover {
            transform: translateY(-2px);
            border-color: rgba(255, 255, 255, 0.12);
        }
        .health-icon-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--border);
            font-size: 1.1rem;
            flex-shrink: 0;
        }
        .health-info {
            flex: 1;
            min-width: 0;
        }
        .health-info h4 {
            margin: 0 0 4px 0;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text);
        }
        .health-info p {
            margin: 0 0 4px 0;
            font-size: 0.8rem;
            font-weight: 700;
        }
        .health-subtext {
            font-size: 0.72rem;
            color: var(--muted);
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .health-indicator {
            display: inline-block;
            font-size: 0.95rem;
        }
        .status-text-green { color: var(--green); }
        .status-text-yellow { color: var(--amber); }
        .status-text-red { color: var(--red); }
        
        .quick-console-wrap {
            background: rgba(0,0,0,0.25);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 0.85rem 1.1rem;
        }
        .console-label {
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--muted);
            margin-bottom: 6px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .console-box {
            align-items: flex-start;
            gap: 10px;
            font-family: monospace;
            font-size: 0.8rem;
            color: #3b82f6;
            line-height: 1.4;
            min-height: 1.4rem;
        }
        .console-ts {
            color: var(--muted);
            flex-shrink: 0;
        }
        .console-msg {
            word-break: break-all;
            color: #d1d5db;
        }
        
        /* ── Input Validation Badges (Fase 38) ──────────────────────────── */
        .phone-validation-wrapper {
            position: relative;
            display: flex;
            flex-direction: column;
            width: 100%;
        }
        .phone-validation-badge {
            margin-top: 5px;
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 0.76rem;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
            border: 1px solid transparent;
            width: fit-content;
            animation: fadeInBadge 0.25s ease-out;
        }
        @keyframes fadeInBadge {
            from { opacity: 0; transform: translateY(-4px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .phone-validation-badge.suggest {
            background: rgba(59, 130, 246, 0.12);
            color: #93c5fd;
            border-color: rgba(59, 130, 246, 0.25);
        }
        .phone-validation-badge.suggest:hover {
            background: rgba(59, 130, 246, 0.2);
            border-color: rgba(59, 130, 246, 0.4);
            transform: translateY(-1px);
        }
        .phone-validation-badge.warning {
            background: rgba(245, 158, 11, 0.12);
            color: #fde047;
            border-color: rgba(245, 158, 11, 0.25);
            cursor: default;
        }
        .phone-validation-badge.success {
            background: rgba(16, 185, 129, 0.12);
            color: #34d399;
            border-color: rgba(16, 185, 129, 0.25);
            cursor: default;
        }
    


        /* ── Módulo Agendamiento de Citas (Fase 41.3) ────────────────────── */
        .appt-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 1.5rem; align-items: start; }
        .cal-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
        .cal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
        .cal-title { font-weight: 800; font-size: 1rem; letter-spacing: -0.02em; }
        .cal-nav { background: transparent; border: 1px solid var(--border); border-radius: 7px; padding: 0.3rem 0.65rem; color: var(--muted); cursor: pointer; font-size: 0.85rem; transition: 0.15s; font-family: inherit; }
        .cal-nav:hover { background: var(--surface-hov); color: var(--text); }
        .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); padding: 0.75rem; gap: 3px; }
        .cal-day-name { text-align: center; font-size: 0.62rem; font-weight: 700; color: var(--subtle); text-transform: uppercase; letter-spacing: 0.06em; padding: 0.3rem 0; }
        .cal-day { position: relative; text-align: center; padding: 0.5rem 0.25rem; border-radius: 9px; font-size: 0.82rem; font-weight: 500; color: var(--muted); cursor: pointer; transition: all 0.15s; min-height: 38px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
        .cal-day:hover:not(.cal-empty) { background: var(--surface-hov); color: var(--text); }
        .cal-day.cal-empty { cursor: default; opacity: 0.2; pointer-events: none; }
        .cal-day.today { background: rgba(59,130,246,0.12); border: 1.5px solid rgba(59,130,246,0.4); color: var(--blue); font-weight: 700; }
        .cal-day.selected { background: linear-gradient(135deg, #14b8a6, #0d9488); color: #fff; font-weight: 700; box-shadow: 0 4px 12px rgba(20,184,166,0.35); }
        .cal-day.blocked { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); color: var(--red); }
        .cal-day.blocked:hover { background: rgba(239,68,68,0.15); }
        .cal-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
        .cal-dot.appt-dot { background: #14b8a6; }
        .cal-dot.pending-dot { background: var(--amber); }
        .cal-legend { display: flex; gap: 1rem; padding: 0.65rem 1rem; border-top: 1px solid var(--border); flex-wrap: wrap; }
        .cal-legend-item { display: flex; align-items: center; gap: 0.35rem; font-size: 0.68rem; color: var(--muted); }
        .appt-right-panel { display: flex; flex-direction: column; gap: 1rem; }
        .appt-day-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
        .appt-day-header { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--border); }
        .appt-day-title { font-weight: 800; font-size: 0.9rem; }
        .btn-new-appt { display: flex; align-items: center; gap: 0.4rem; padding: 0.38rem 0.85rem; border-radius: 8px; background: rgba(20,184,166,0.12); color: #14b8a6; border: 1px solid rgba(20,184,166,0.35); font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: 0.15s; font-family: inherit; }
        .btn-new-appt:hover { background: rgba(20,184,166,0.22); }
        .appt-list { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; max-height: 360px; overflow-y: auto; }
        .appt-empty { text-align: center; padding: 2.5rem 1rem; color: var(--muted); font-size: 0.82rem; line-height: 2; }
        .appt-card { background: rgba(255,255,255,0.025); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: border-color 0.15s; }
        .appt-card:hover { border-color: rgba(255,255,255,0.12); }
        .appt-card-header { display: flex; align-items: center; gap: 0.65rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); }
        .appt-status-pill { font-size: 0.62rem; font-weight: 700; padding: 0.18rem 0.5rem; border-radius: 20px; white-space: nowrap; }
        .appt-card.pending .appt-status-pill { background: var(--amber-dim); color: var(--amber); }
        .appt-card.confirmed .appt-status-pill { background: rgba(20,184,166,0.15); color: #14b8a6; }
        .appt-card.cancelled .appt-status-pill { background: var(--red-dim); color: var(--red); }
        .appt-card.blocked .appt-status-pill { background: var(--red-dim); color: var(--red); }
        .appt-time { font-size: 0.85rem; font-weight: 700; color: var(--text); }
        .appt-service { font-size: 0.78rem; color: var(--muted); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .appt-client { font-size: 0.75rem; color: var(--muted); padding: 0.35rem 0.9rem; border-bottom: 1px solid var(--border); }
        .appt-actions { display: flex; gap: 0.3rem; padding: 0.45rem 0.9rem; flex-wrap: wrap; }
        .btn-appt-action { padding: 0.25rem 0.6rem; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 0.7rem; font-weight: 600; cursor: pointer; transition: 0.15s; font-family: inherit; }
        .btn-appt-action:hover { background: var(--surface-hov); color: var(--text); }
        .btn-appt-action.confirm { border-color: rgba(20,184,166,0.4); color: #14b8a6; }
        .btn-appt-action.confirm:hover { background: rgba(20,184,166,0.12); }
        .btn-appt-action.cancel-btn { border-color: rgba(239,68,68,0.4); color: var(--red); }
        .btn-appt-action.cancel-btn:hover { background: var(--red-dim); }
        .avail-config-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
        .avail-config-header { padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--border); font-weight: 800; font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; }
        .avail-config-body { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.85rem; }
        .avail-days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.35rem; }
        .avail-day-btn { aspect-ratio: 1; border-radius: 8px; border: 1.5px solid var(--border); background: transparent; color: var(--muted); font-size: 0.68rem; font-weight: 700; cursor: pointer; transition: 0.15s; font-family: inherit; display: flex; align-items: center; justify-content: center; }
        .avail-day-btn.active { background: rgba(20,184,166,0.15); border-color: rgba(20,184,166,0.5); color: #14b8a6; }
        .avail-day-btn:hover { border-color: rgba(255,255,255,0.2); color: var(--text); }
        .avail-time-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
        .avail-time-row > div label { font-size: 0.68rem; }
        .avail-time-row > div input { margin-bottom: 0; padding: 0.4rem 0.6rem; font-size: 0.82rem; }
        .avail-field label { font-size: 0.68rem; }
        .avail-field select, .avail-field input[type=number] { margin-bottom: 0; padding: 0.42rem 0.65rem; font-size: 0.82rem; }
    


#wizardOverlay{display:none;position:fixed;inset:0;z-index:99999;align-items:center;justify-content:center;padding:1.5rem;background:radial-gradient(ellipse at 20% 50%,rgba(59,130,246,.08) 0%,transparent 60%),var(--bg)}
.wz-card{max-width:480px;width:100%;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:2.5rem 2.5rem 2rem;box-shadow:0 32px 64px -16px rgba(0,0,0,.6);position:relative;overflow:hidden}
.wz-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--purple),#ec4899)}
.wz-steps{display:flex;align-items:center;justify-content:center;margin-bottom:2rem}
.wz-dot{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;border:2px solid var(--border);background:var(--bg-input);color:var(--muted);transition:all .3s;flex-shrink:0}
.wz-dot.active{background:linear-gradient(135deg,var(--blue),var(--purple));border-color:transparent;color:#fff;box-shadow:0 0 20px rgba(59,130,246,.4)}
.wz-dot.done{background:rgba(34,197,94,.15);border-color:rgba(34,197,94,.4);color:#22c55e}
.wz-line{height:2px;width:40px;flex-shrink:0;background:var(--border);transition:background .3s}
.wz-line.done{background:rgba(34,197,94,.4)}
.wz-step{display:none;animation:wzFadeIn .35s ease}
.wz-step.visible{display:block}
@keyframes wzFadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.wz-icon{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 1.25rem}
.wz-title{font-size:1.4rem;font-weight:800;color:var(--text);margin-bottom:.5rem;text-align:center}
.wz-sub{font-size:.9rem;color:var(--muted);line-height:1.65;margin-bottom:1.75rem;text-align:center}
.wz-input{width:100%;padding:.85rem 1rem;border-radius:10px;border:1.5px solid var(--border);background:var(--bg-input);color:var(--text);font-size:1rem;outline:none;text-transform:uppercase;font-family:monospace;letter-spacing:3px;text-align:center;transition:border-color .2s;margin-bottom:1rem;box-sizing:border-box}
.wz-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.12)}
.wz-input-norm{letter-spacing:normal;font-family:inherit;text-transform:none}
.wz-btn{width:100%;padding:.9rem;border-radius:10px;border:none;background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;font-weight:700;font-size:1rem;cursor:pointer;transition:opacity .2s,transform .15s}
.wz-btn:hover{opacity:.9;transform:translateY(-1px)}
.wz-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.wz-skip{background:none;border:none;color:var(--muted);font-size:.85rem;cursor:pointer;margin-top:.75rem;width:100%;padding:.4rem}
.wz-skip:hover{color:var(--text)}
.wz-err{color:var(--red);font-size:.82rem;font-weight:600;min-height:1.2rem;margin-bottom:.75rem}
.wz-feat{display:flex;align-items:center;gap:.75rem;padding:.6rem 0;border-bottom:1px solid var(--border);font-size:.88rem;color:var(--text)}
.wz-feat:last-child{border-bottom:none}
.wz-pulse{width:8px;height:8px;border-radius:50%;background:#22c55e;flex-shrink:0;animation:wzP 1.2s ease-in-out infinite}
@keyframes wzP{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}