/* ============================================================
 * LEXIA · ÁREA PRIVADA — Estilos
 * VilanLex S.L.
 * ============================================================ */

*{margin:0;padding:0;box-sizing:border-box;}
    :root{
      --bg:#07101f;--bg-card:#0d1a2e;--bg-hover:#111f35;
      --border:rgba(255,255,255,0.07);--border-gold:rgba(201,169,110,0.25);
      --gold:#c9a96e;--gold-light:#e0c99a;--gold-dim:rgba(201,169,110,0.1);
      --text:#e8e2d8;--text-muted:rgba(232,226,216,0.5);--text-dim:rgba(232,226,216,0.25);
      --success:#2d7a4f;--error:#a02020;--warning:#b07020;
      --sidebar:250px;
    }

    /* ── TEMA CLARO ── (solo afecta al panel privado, no al login)
       Se activa con [data-theme="light"] en el contenedor #proWrap */
    body[data-theme="light"]{
      --bg:#f5f1e8;
      --bg-card:#ffffff;
      --bg-hover:#faf6ec;
      --border:rgba(40,30,20,0.08);
      --border-gold:rgba(176,141,78,0.35);
      --gold:#a07b3e;
      --gold-light:#c9a96e;
      --gold-dim:rgba(176,141,78,0.08);
      --text:#233650;
      --text-muted:rgba(34,52,78,0.62);
      --text-dim:rgba(34,52,78,0.46);
      --success:#1f6b3f;
      --error:#a02020;
      --warning:#b07020;
    }
    /* ============================================================
     * MODO CLARO — overrides organizados, sin !important
     * Funciona porque ya no hay style="color:#fff" inline
     * ============================================================ */

    /* Títulos: heredan color de var(--text) — ya están en clases h-* */
    body[data-theme="light"] .pro-topbar-title,
    body[data-theme="light"] .pro-stat-val,
    body[data-theme="light"] .pro-card-title,
    body[data-theme="light"] .sb-brand-name,
    body[data-theme="light"] .sb-user-name,
    body[data-theme="light"] .modal-title,
    body[data-theme="light"] .ficha-title{
      color:#1c3a66;
    }

    /* Contenedores principales con fondo de tarjeta */
    body[data-theme="light"] .pro-topbar,
    body[data-theme="light"] .pro-sidebar,
    body[data-theme="light"] .pro-stat,
    body[data-theme="light"] .pro-card,
    body[data-theme="light"] .pro-table-wrap,
    body[data-theme="light"] .ficha-panel,
    body[data-theme="light"] .modal-pro,
    body[data-theme="light"] .empty-pro,
    body[data-theme="light"] .oferta-card{
      background:var(--bg-card);
      border-color:var(--border);
    }

    /* La línea dorada de las tarjetas de cifras también en modo día */
    body[data-theme="light"] .pro-stat{
      border-left-color:var(--gold);
    }

    /* Inputs, selects, textareas */
    body[data-theme="light"] input,
    body[data-theme="light"] select,
    body[data-theme="light"] textarea,
    body[data-theme="light"] .pro-search,
    body[data-theme="light"] .pro-select,
    body[data-theme="light"] .modal-input,
    body[data-theme="light"] .form-input,
    body[data-theme="light"] .ficha-input,
    body[data-theme="light"] .ficha-select{
      background:rgba(40,30,20,0.04);
      color:var(--text);
      border-color:var(--border);
    }
    body[data-theme="light"] input::placeholder,
    body[data-theme="light"] textarea::placeholder{
      color:var(--text-dim);
    }

    /* Tabla: hovers y bordes */
    body[data-theme="light"] .pro-table tr:hover td,
    body[data-theme="light"] .traf-table tr:hover td,
    body[data-theme="light"] table.t tr:hover td,
    body[data-theme="light"] table tr:hover td{
      background:rgba(176,141,78,0.07);
    }
    body[data-theme="light"] .pro-table th,
    body[data-theme="light"] .pro-table td,
    body[data-theme="light"] table th,
    body[data-theme="light"] table td{
      border-color:var(--border);
    }

    /* Botones secundarios y pills */
    body[data-theme="light"] .btn-tbl,
    body[data-theme="light"] .btn-tbl-primary,
    body[data-theme="light"] .btn-edit-ficha,
    body[data-theme="light"] .btn-expand,
    body[data-theme="light"] .col-pill,
    body[data-theme="light"] .mode-btn{
      background:rgba(40,30,20,0.04);
      color:var(--text);
      border-color:var(--border);
    }
    body[data-theme="light"] .col-pill.active,
    body[data-theme="light"] .col-pill:hover{
      background:var(--gold-dim);
      color:var(--gold);
      border-color:var(--border-gold);
    }

    /* Sidebar items */
    body[data-theme="light"] .sb-item{color:var(--text-muted);}
    body[data-theme="light"] .sb-item:hover{
      background:var(--gold-dim);
      color:var(--gold);
    }
    body[data-theme="light"] .sb-item.active{
      background:var(--gold-dim);color:var(--gold);
    }
    body[data-theme="light"] .sb-brand,
    body[data-theme="light"] .sb-user{
      border-color:var(--border);
    }

    /* Textos secundarios */
    body[data-theme="light"] .pro-stat-label,
    body[data-theme="light"] .pro-stat-sub,
    body[data-theme="light"] .pro-date,
    body[data-theme="light"] .form-sub,
    body[data-theme="light"] .form-label,
    body[data-theme="light"] .ficha-label{
      color:var(--text-muted);
    }

    /* Status badge "abierto" — ajuste para legibilidad en modo claro */
    body[data-theme="light"] .s-abierto{
      background:#ffffff;color:#1e4a8e;border-color:#a8c2e8;
    }

    /* Avatar */
    body[data-theme="light"] .pro-avatar{
      background:var(--gold-dim);color:var(--gold);
    }

    /* Footer: borde del botón cerrar sesión un poco más nítido en claro */
    body[data-theme="light"] .btn-pro-logout{
      border-color:rgba(34,52,78,0.22);
    }

    /* Botón toggle theme */
    .theme-toggle{
      width:34px;height:34px;border:1px solid var(--border);background:var(--bg-hover);
      color:var(--gold);cursor:pointer;display:flex;align-items:center;justify-content:center;
      font-size:16px;border-radius:4px;transition:all 0.2s;padding:0;
    }
    .theme-toggle:hover{background:var(--gold-dim);border-color:var(--border-gold);}
    body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;}

    /* ── AUTH ── */
    #authWrap{min-height:100vh;display:grid;grid-template-columns:480px 1fr;}
    .auth-form-side{
      background:var(--bg-card);border-right:1px solid var(--border);
      display:flex;flex-direction:column;justify-content:space-between;
      padding:48px;min-height:100vh;position:relative;
    }
    .auth-form-side::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),transparent);}
    .pro-logo-name{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:300;color:#fff;letter-spacing:3px;}
    .pro-logo-name span{color:var(--gold);}
    .pro-badge{font-size:8px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:var(--gold);background:var(--gold-dim);border:1px solid var(--border-gold);padding:3px 10px;display:inline-block;margin-top:6px;}
    .auth-form-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:40px 0;}

    .mode-row{display:flex;margin-bottom:28px;border-bottom:1px solid var(--border);}
    .mode-btn{flex:1;padding:12px;background:transparent;border:none;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim);cursor:pointer;transition:all 0.2s;border-bottom:2px solid transparent;margin-bottom:-1px;}
    .mode-btn.active{color:var(--gold);border-bottom-color:var(--gold);}

    .form-title{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:300;color:#fff;margin-bottom:6px;}
    .form-sub{font-size:13px;font-weight:300;color:var(--text-muted);margin-bottom:28px;line-height:1.65;}
    .form-sub a{color:var(--gold);}

    .form-group{margin-bottom:16px;}
    .form-label{display:block;font-size:9px;font-weight:500;letter-spacing:2.5px;text-transform:uppercase;color:var(--text-dim);margin-bottom:7px;}
    .form-input{
      width:100%;padding:12px 14px;background:rgba(255,255,255,0.04);border:1px solid var(--border);
      color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:300;
      outline:none;transition:border-color 0.2s;
    }
    .form-input:focus{border-color:rgba(201,169,110,0.45);}
    .form-input::placeholder{color:rgba(255,255,255,0.16);}

    .btn-gold-full{width:100%;padding:14px;background:var(--gold);color:#08111e;border:none;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all 0.2s;}
    .btn-gold-full:hover{background:var(--gold-light);}
    .btn-gold-full:disabled{opacity:0.4;cursor:not-allowed;}
    .btn-ghost{width:100%;padding:14px;background:transparent;border:1px solid var(--border);color:var(--text-muted);font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:all 0.2s;}
    .btn-ghost:hover{border-color:var(--border-gold);color:var(--gold);}
    .btn-link-pro{background:none;border:none;color:var(--gold);font-size:12px;cursor:pointer;font-family:'DM Sans',sans-serif;text-decoration:underline;padding:0;}

    .alert{padding:12px 14px;margin-bottom:16px;font-size:13px;border-left:2px solid;line-height:1.5;}
    .alert-error{background:rgba(160,32,32,0.1);border-color:var(--error);color:#e88;}
    .alert-success{background:rgba(45,122,79,0.1);border-color:var(--success);color:#6d8;}
    .alert-info{background:var(--gold-dim);border-color:var(--gold);color:var(--gold);}
    .alert-warning{background:rgba(176,112,32,0.1);border-color:var(--warning);color:#e8a060;}

    .auth-visual{
      position:relative;overflow:hidden;
      background:linear-gradient(135deg,#060d1a 0%,#0a1628 50%,#060c18 100%);
    }
    .visual-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(201,169,110,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(201,169,110,0.03) 1px,transparent 1px);background-size:40px 40px;}
    .visual-orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:0.1;pointer-events:none;}
    .orb1{width:450px;height:450px;background:var(--gold);top:-120px;right:-80px;}
    .orb2{width:300px;height:300px;background:#1a3a8e;bottom:-60px;right:120px;}
    .visual-content{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;height:100%;padding:80px;}
    .visual-tag{font-size:9px;font-weight:500;letter-spacing:4px;text-transform:uppercase;color:var(--gold);border:1px solid rgba(201,169,110,0.3);padding:7px 14px;display:inline-block;margin-bottom:36px;}
    .visual-title{font-family:'Cormorant Garamond',serif;font-size:clamp(34px,3.5vw,54px);font-weight:300;line-height:1.1;color:#fff;margin-bottom:20px;}
    .visual-title em{font-style:italic;color:var(--gold);}
    .visual-desc{font-size:13px;color:rgba(255,255,255,0.35);line-height:1.9;max-width:400px;margin-bottom:40px;}
    .visual-roles{display:flex;flex-direction:column;gap:10px;}
    .visual-role{display:flex;align-items:center;gap:12px;font-size:12px;color:rgba(255,255,255,0.4);}
    .role-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);flex-shrink:0;}
    .auth-footer{font-size:11px;color:var(--text-dim);}
    .auth-footer a{color:var(--gold);text-decoration:none;}

    /* ── DASHBOARD PRO ── */
    #proDash{display:none;min-height:100vh;display:none;}
    #proDash.active{display:flex;}

    /* Sidebar */
    .pro-sidebar{
      width:var(--sidebar);min-height:100vh;background:var(--bg-card);
      border-right:1px solid var(--border);display:flex;flex-direction:column;
      position:fixed;left:0;top:0;bottom:0;z-index:50;
    }
    .pro-sidebar::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),transparent);}
    .sb-brand{padding:24px 20px;border-bottom:1px solid var(--border);}
    .sb-brand-name{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:300;color:#fff;letter-spacing:2px;}
    .sb-brand-name span{color:var(--gold);}
    .sb-brand-badge{font-size:8px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--gold);background:var(--gold-dim);padding:2px 8px;display:inline-block;margin-top:4px;}
    .sb-user{padding:16px 20px;border-bottom:1px solid var(--border);}
    .sb-user-name{font-size:13px;color:var(--text);}
    .sb-user-role{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-top:3px;}
    .sb-user-code{
      font-size:9px;letter-spacing:1px;color:var(--text-muted);
      font-family:monospace;margin-top:6px;
      display:inline-block;padding:2px 6px;
      background:var(--gold-dim);border:1px solid var(--border-gold);
      border-radius:3px;
    }
    .sb-user-code:empty{display:none;}
    .sb-nav{flex:1;padding:12px 0;overflow-y:auto;}
    .sb-label{font-size:8px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:var(--text-dim);padding:12px 20px 6px;}
    .sb-item{display:flex;align-items:center;gap:10px;padding:10px 20px;color:var(--text-muted);font-size:12px;cursor:pointer;text-decoration:none;transition:all 0.18s;border-left:2px solid transparent;}
    .sb-item:hover{color:var(--text);background:rgba(255,255,255,0.03);}
    .sb-item.active{color:var(--gold);background:var(--gold-dim);border-left-color:var(--gold);}
    .sb-item svg{width:14px;height:14px;flex-shrink:0;}
    .sb-footer{padding:16px 20px;border-top:1px solid var(--border);}
    .btn-pro-logout{width:100%;padding:9px;background:transparent;border:1px solid var(--border);color:var(--text-dim);font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:all 0.2s;}
    .btn-pro-logout:hover{border-color:var(--border-gold);color:var(--gold);}

    /* Main */
    .pro-main{margin-left:var(--sidebar);flex:1;min-height:100vh;}
    .pro-topbar{background:var(--bg-card);padding:14px 32px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:40;}
    .pro-topbar-title{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:300;color:#fff;}
    .pro-topbar-right{display:flex;align-items:center;gap:14px;}
    .pro-date{font-size:11px;color:var(--text-dim);}
    .pro-avatar{width:32px;height:32px;background:var(--gold-dim);border:1px solid var(--border-gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:13px;color:var(--gold);}

    .pro-page{padding:32px;display:none;}
    .pro-page.active{display:block;}

    /* Stats */
    .pro-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;}
    .pro-stat{background:var(--bg-card);padding:24px;border-left:2px solid var(--gold);position:relative;overflow:hidden;}
    .pro-stat-label{font-size:9px;font-weight:500;letter-spacing:2.5px;text-transform:uppercase;color:var(--text-dim);margin-bottom:12px;}
    .pro-stat-val{font-family:'Cormorant Garamond',serif;font-size:40px;font-weight:300;color:#fff;line-height:1;}
    .pro-stat-sub{font-size:11px;color:var(--text-dim);margin-top:6px;}

    /* Cards */
    .pro-card{background:var(--bg-card);border:1px solid var(--border);padding:24px;margin-bottom:20px;}
    .pro-card-title{font-family:'Cormorant Garamond',serif;font-size:18px;color:#fff;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;}

    /* Herramientas: grid de tarjetas con icono y descripción */
    .h-tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}
    .h-tool-card{
      display:flex;align-items:flex-start;gap:14px;
      padding:18px;background:var(--bg-card);border:1px solid var(--border);
      text-decoration:none;color:inherit;cursor:pointer;
      transition:border-color 0.2s, transform 0.15s, background 0.2s;
      position:relative;
    }
    .h-tool-card:hover{border-color:var(--gold);transform:translateY(-1px);background:rgba(201,169,110,0.04);}
    .h-tool-card:hover .h-tool-arrow{opacity:1;transform:translateX(2px);}
    .h-tool-icon{
      width:42px;height:42px;flex-shrink:0;
      display:flex;align-items:center;justify-content:center;
      background:var(--gold-dim);border:1px solid var(--border-gold);
      font-size:20px;
    }
    .h-tool-body{flex:1;min-width:0;}
    .h-tool-title{
      font-family:'DM Sans',sans-serif;font-size:13px;color:var(--text);
      font-weight:500;letter-spacing:0.3px;line-height:1.3;margin-bottom:4px;
    }
    .h-tool-desc{
      font-size:11px;color:var(--text-dim);line-height:1.4;
    }
    .h-tool-arrow{
      position:absolute;top:18px;right:14px;color:var(--gold);
      opacity:0.4;transition:all 0.2s;font-size:14px;
    }
    .h-tools-section{margin-bottom:30px;}
    .h-tools-section-title{
      font-family:'Cormorant Garamond',serif;font-size:18px;color:var(--text);
      margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border-gold);
      display:flex;align-items:center;gap:10px;
    }
    .h-tools-section-title-emoji{font-size:22px;}

    /* Tables */
    .pro-table{width:100%;border-collapse:collapse;}
    .pro-table th{font-size:9px;font-weight:500;letter-spacing:2.5px;text-transform:uppercase;color:var(--text-dim);padding:12px 16px;border-bottom:1px solid var(--border);text-align:left;background:rgba(0,0,0,0.15);}
    .pro-table td{font-size:12px;color:var(--text);padding:13px 16px;border-bottom:1px solid rgba(255,255,255,0.03);}
    .pro-table tr:hover td{background:rgba(255,255,255,0.02);}
    .pro-table tr:last-child td{border-bottom:none;}

    /* Buttons */
    .btn-tbl{padding:5px 12px;font-family:'DM Sans',sans-serif;font-size:9px;font-weight:500;letter-spacing:1px;text-transform:uppercase;cursor:pointer;border:1px solid;transition:all 0.18s;}
    .btn-tbl-gold{background:var(--gold-dim);color:var(--gold);border-color:var(--border-gold);}
    .btn-tbl-gold:hover{background:rgba(201,169,110,0.2);}
    .btn-tbl-primary{background:rgba(42,90,174,0.15);color:#80a8e8;border-color:rgba(42,90,174,0.3);}
    .btn-tbl-danger{background:rgba(160,32,32,0.12);color:#e88;border-color:rgba(160,32,32,0.3);}

    .btn-new{padding:10px 22px;background:var(--gold);color:#08111e;border:none;font-family:'DM Sans',sans-serif;font-size:10px;font-weight:500;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all 0.2s;}
    .btn-new:hover{background:var(--gold-light);}

    /* Status badges */
    .s-badge{font-size:8px;font-weight:500;letter-spacing:1px;text-transform:uppercase;padding:3px 8px;display:inline-block;border-radius:3px;}
    .s-activo{background:rgba(45,140,80,0.18);color:#6dd58e;}
    .s-pendiente{background:rgba(220,180,40,0.18);color:#f0d060;}
    .s-suspendido{background:rgba(180,40,40,0.18);color:#e88080;}
    .s-inactivo{background:rgba(255,255,255,0.06);color:var(--text-dim);}
    /* Estados de expedientes - paleta Lexia */
    .s-abierto{background:#ffffff;color:#2a5aae;border:1px solid #d6e2f4;}
    .s-en_tramite{background:rgba(42,90,174,0.18);color:#80a8e8;border:1px solid rgba(42,90,174,0.35);}
    .s-judicializado{background:rgba(212,120,32,0.18);color:#f0a060;border:1px solid rgba(212,120,32,0.35);}
    .s-en_liquidacion{background:rgba(220,180,40,0.18);color:#f0d060;border:1px solid rgba(220,180,40,0.35);}
    .s-cerrado{background:rgba(45,140,80,0.18);color:#6dd58e;border:1px solid rgba(45,140,80,0.35);}
    .s-cancelado{background:rgba(180,40,40,0.18);color:#e88080;border:1px solid rgba(180,40,40,0.35);}
    .s-archivado{background:rgba(255,255,255,0.06);color:var(--text-dim);}
    .s-sin_viabilidad{background:rgba(120,120,120,0.18);color:#a0a0a0;border:1px solid rgba(120,120,120,0.35);}

    /* Search */
    .search-row{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
    .pro-search{flex:1;min-width:200px;padding:9px 14px;background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--text);font-family:'DM Sans',sans-serif;font-size:13px;outline:none;}
    .pro-search:focus{border-color:rgba(201,169,110,0.35);}
    .pro-search::placeholder{color:var(--text-dim);}
    .pro-select{padding:9px 14px;background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--text);font-family:'DM Sans',sans-serif;font-size:13px;outline:none;cursor:pointer;}
    .pro-select option{background:var(--bg-card);}

    /* Modal */
    .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px);}
    .pro-modal{background:var(--bg-card);border:1px solid var(--border);width:100%;max-width:600px;max-height:90vh;overflow-y:auto;}
    .modal-header{padding:22px 28px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
    .modal-title{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:300;color:#fff;}
    .modal-close{background:none;border:none;color:var(--text-muted);font-size:20px;cursor:pointer;}
    .modal-body{padding:28px;}
    .modal-footer{padding:20px 28px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;}
    .modal-form-group{margin-bottom:16px;}
    .modal-label{display:block;font-size:9px;font-weight:500;letter-spacing:2.5px;text-transform:uppercase;color:var(--text-dim);margin-bottom:7px;}
    .modal-input{width:100%;padding:11px 14px;background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--text);font-family:'DM Sans',sans-serif;font-size:13px;outline:none;transition:border-color 0.2s;}
    .modal-input:focus{border-color:rgba(201,169,110,0.4);}
    .modal-select{width:100%;padding:11px 14px;background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--text);font-family:'DM Sans',sans-serif;font-size:13px;outline:none;cursor:pointer;}
    .modal-select option{background:var(--bg-card);}
    .modal-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
    .modal-alert{padding:10px 14px;margin-bottom:14px;font-size:12px;border-left:2px solid;}

    .loading{display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:13px;padding:20px;}
    .spinner{width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin 0.8s linear infinite;}
    @keyframes spin{to{transform:rotate(360deg);}}

    .empty-pro{padding:48px;text-align:center;color:var(--text-dim);font-size:13px;}
    .empty-pro-icon{font-size:32px;margin-bottom:12px;opacity:0.35;}

    /* ── HAMBURGER MÓVIL ── */
    .hamburger-pro{
      display:none;position:fixed;top:14px;left:16px;z-index:200;
      background:var(--bg-card);border:1px solid var(--border);
      width:40px;height:40px;cursor:pointer;
      flex-direction:column;align-items:center;justify-content:center;gap:5px;
    }
    .hamburger-pro span{display:block;width:18px;height:1.5px;background:var(--gold);}
    .sidebar-overlay{
      display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:99;
    }
    .sidebar-overlay.show{display:block;}

    @media(max-width:900px){
      #authWrap{grid-template-columns:1fr;}
      .auth-visual{display:none;}
      .auth-form-side{padding:32px 24px;min-height:100vh;}
      
      /* Sidebar móvil */
      .hamburger-pro{display:flex;}
      .pro-sidebar{
        transform:translateX(-100%);
        transition:transform 0.3s ease;
        z-index:100;
      }
      .pro-sidebar.open{transform:translateX(0);}
      .pro-main{margin-left:0;}
      
      /* Logo en sidebar — dejar espacio para el hamburger */
      .sb-brand{padding:20px 20px 16px 56px;}
      
      /* Sidebar scroll en móvil */
      .pro-sidebar{
        height:100vh;
        overflow-y:auto;
        display:flex;
        flex-direction:column;
      }
      .sb-footer{
        margin-top:auto;
        position:sticky;
        bottom:0;
        background:var(--bg-card);
        border-top:1px solid var(--border);
      }

      /* Topbar móvil */
      .pro-topbar{padding:14px 16px 14px 64px;}
      .pro-topbar-title{font-size:16px;}
      .pro-date{display:none;}
      
      /* Stats móvil */
      .pro-stats{grid-template-columns:1fr 1fr;gap:10px;}
      .pro-stat{padding:16px;}
      .pro-stat-val{font-size:28px;}
      
      /* Páginas */
      .pro-page{padding:16px;}
      
      /* Cards */
      .pro-card{padding:16px;}
      
      /* Grid dos columnas → una columna */
      div[style*="grid-template-columns:1fr 1fr"]{
        display:flex!important;flex-direction:column!important;
      }
      
      /* Tablas scroll horizontal */
      .pro-table{font-size:11px;}
      .pro-table th,.pro-table td{padding:10px 8px;}
      
      /* Modales */
      .pro-modal{margin:10px;}
      .modal-row{grid-template-columns:1fr!important;}
      .modal-body{padding:20px;}
      
      /* Búsqueda */
      .search-row{flex-direction:column;}
      .pro-search,.pro-select{width:100%;}
      
      /* Botón nuevo */
      .btn-new{font-size:10px;padding:8px 14px;}
    }
    
    @media(max-width:480px){
      .pro-stats{grid-template-columns:1fr 1fr;}
      .pro-topbar-title{font-size:14px;}
    }
/* ── SUBMENÚ LATERAL ── */
#subExpedientes .sb-item,
#subServicios .sb-item {
  font-size:11px;
  padding:7px 16px;
  border-left:none;
}

/* ── TABLA TRÁFICO ── */
.traf-table{width:100%;border-collapse:collapse;font-size:12px;}
.traf-table th{
  font-size:9px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text-dim);padding:10px 12px;border-bottom:1px solid var(--border);
  text-align:left;background:rgba(0,0,0,0.2);white-space:nowrap;cursor:pointer;
  user-select:none;
}
.traf-table th:hover{color:var(--gold);}
.traf-table td{
  padding:10px 12px;border-bottom:1px solid rgba(255,255,255,0.03);
  color:var(--text);vertical-align:middle;white-space:nowrap;
}
.traf-table tr:hover td{background:rgba(255,255,255,0.02);cursor:default;}
.traf-table tr.fila-padre{cursor:default;}
.traf-table tr.fila-padre td{background:rgba(201,169,110,0.04);}
.traf-table tr.fila-sub td{background:rgba(255,255,255,0.01);}
.traf-table tr.fila-sub td:first-child{padding-left:32px;}

/* Totales */
.traf-totales{
  background:var(--bg-card);border:1px solid var(--border-gold);
  padding:16px 20px;display:flex;gap:24px;flex-wrap:wrap;margin-top:1px;
}
.total-item{display:flex;flex-direction:column;gap:3px;}
.total-label{font-size:9px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);}
.total-val{font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--gold);font-weight:300;}

/* Columnas toggle */
.col-toggle{
  padding:4px 10px;font-size:10px;font-weight:500;letter-spacing:1px;
  text-transform:uppercase;cursor:pointer;border:1px solid var(--border);
  background:transparent;color:var(--text-dim);transition:all 0.18s;
  font-family:'DM Sans',sans-serif;
}
.col-toggle.active{background:var(--gold-dim);border-color:var(--border-gold);color:var(--gold);}

/* Ficha lateral */
.ficha-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.8);z-index:300;display:flex;align-items:flex-start;justify-content:flex-end;backdrop-filter:blur(4px);}
.ficha-panel{
  width:min(700px,95vw);height:100vh;background:var(--bg-card);
  border-left:1px solid var(--border);overflow-y:auto;
  animation:slideIn 0.3s ease;
}
@keyframes slideIn{from{transform:translateX(100%);}to{transform:translateX(0);}}
.ficha-header{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--bg-card);z-index:10;}
.ficha-title{font-family:'Cormorant Garamond',serif;font-size:20px;color:#fff;}
.ficha-close{background:none;border:none;color:var(--text-muted);font-size:22px;cursor:pointer;padding:4px 8px;}
.ficha-close:hover{color:#fff;}
.ficha-body{padding:24px;}
.ficha-section{margin-bottom:24px;}
.ficha-section-title{
  font-size:10px;font-weight:500;letter-spacing:3px;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px;padding-bottom:8px;
  border-bottom:1px solid rgba(201,169,110,0.2);
}
.ficha-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.ficha-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
.ficha-field{display:flex;flex-direction:column;gap:4px;}
.ficha-field label{font-size:9px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);}
.ficha-val{font-size:13px;color:var(--text);padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.04);}
.ficha-input{
  padding:9px 12px;background:rgba(255,255,255,0.04);border:1px solid var(--border);
  color:var(--text);font-family:'DM Sans',sans-serif;font-size:13px;outline:none;width:100%;
  transition:border-color 0.2s;
}
.ficha-input:focus{border-color:rgba(201,169,110,0.45);}
.ficha-select{
  padding:9px 12px;background:rgba(255,255,255,0.04);border:1px solid var(--border);
  color:var(--text);font-family:'DM Sans',sans-serif;font-size:13px;outline:none;width:100%;cursor:pointer;
}
.ficha-select option{background:var(--bg-card);}

/* Toggle edición */
.btn-edit-ficha{
  padding:8px 16px;background:var(--gold-dim);border:1px solid var(--border-gold);
  color:var(--gold);font-family:'DM Sans',sans-serif;font-size:10px;font-weight:500;
  letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:all 0.2s;
}
.btn-edit-ficha:hover{background:rgba(201,169,110,0.2);}
.btn-save-ficha{
  padding:8px 16px;background:var(--gold);color:#08111e;border:none;
  font-family:'DM Sans',sans-serif;font-size:10px;font-weight:500;
  letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:all 0.2s;
}
.oferta-card{
  background:rgba(255,255,255,0.03);border:1px solid var(--border);
  padding:16px;margin-bottom:12px;
}
.oferta-card-title{
  font-size:10px;font-weight:500;letter-spacing:2px;text-transform:uppercase;
  color:var(--gold);margin-bottom:12px;
}

/* ── BOTÓN EXPANDIR GRUPO ── */
.btn-expand {
  padding: 3px 8px;
  background: var(--gold-dim);
  border: 1px solid var(--border-gold);
  color: var(--gold);
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}
.btn-expand:hover { background: rgba(201,169,110,0.2); }

/* ============================================================
 * SISTEMA DE MODALES PROFESIONALES (sustituye alert/confirm)
 * ============================================================ */
.lex-modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.65);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;z-index:14000;
  animation:lex-fade-in 0.2s ease-out;
}
.lex-modal-overlay.show{display:flex;}
.lex-modal{
  background:var(--bg-card);border:1px solid var(--border-gold);
  width:100%;max-width:480px;max-height:88vh;overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  animation:lex-slide-up 0.25s ease-out;
}
.lex-modal-large{max-width:680px;}
.lex-modal-header{
  padding:20px 24px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.lex-modal-title{
  font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--text);
  font-weight:300;letter-spacing:0.5px;
}
.lex-modal-close{
  background:transparent;border:none;color:var(--text-muted);
  cursor:pointer;font-size:20px;padding:4px 8px;line-height:1;
}
.lex-modal-close:hover{color:var(--gold);}
.lex-modal-body{padding:24px;color:var(--text);font-size:13px;line-height:1.55;}
.lex-modal-body p{margin-bottom:10px;}
.lex-modal-body ul{margin:8px 0 8px 20px;}
.lex-modal-body li{margin-bottom:4px;}
.lex-modal-footer{
  padding:14px 24px;border-top:1px solid var(--border);
  display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;
}
.lex-btn{
  padding:9px 18px;font-family:'DM Sans',sans-serif;font-size:11px;
  letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;
  border:1px solid var(--border);background:transparent;color:var(--text);
  transition:all 0.15s;border-radius:0;
}
.lex-btn:hover{background:var(--bg-hover);border-color:var(--border-gold);}
.lex-btn-primary{background:var(--gold);color:#1a1208;border-color:var(--gold);}
.lex-btn-primary:hover{background:var(--gold-light);color:#1a1208;}
.lex-btn-danger{background:transparent;color:#e88080;border-color:rgba(180,40,40,0.4);}
.lex-btn-danger:hover{background:rgba(180,40,40,0.1);}
.lex-btn-success{background:transparent;color:#6dd58e;border-color:rgba(45,140,80,0.4);}
.lex-btn-success:hover{background:rgba(45,140,80,0.1);}

.lex-modal-icon{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:22px;
  margin-right:14px;flex-shrink:0;
}
.lex-modal-icon-warning{background:rgba(220,180,40,0.15);color:#f0d060;}
.lex-modal-icon-danger{background:rgba(180,40,40,0.15);color:#e88080;}
.lex-modal-icon-success{background:rgba(45,140,80,0.15);color:#6dd58e;}
.lex-modal-icon-info{background:var(--gold-dim);color:var(--gold);}

.lex-form-group{margin-bottom:14px;}
.lex-form-label{
  display:block;font-size:10px;letter-spacing:1.5px;
  color:var(--text-muted);text-transform:uppercase;margin-bottom:5px;
}
.lex-form-input,.lex-form-select{
  width:100%;padding:9px 12px;background:rgba(255,255,255,0.04);
  border:1px solid var(--border);color:var(--text);
  font-family:'DM Sans',sans-serif;font-size:13px;
}
.lex-form-input:focus,.lex-form-select:focus{
  outline:none;border-color:var(--border-gold);background:rgba(255,255,255,0.06);
}
.lex-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:600px){.lex-form-row{grid-template-columns:1fr;}}

/* Estilo del desplegable abierto (las opciones del select).
   El navegador dibuja la lista, así que forzamos colores legibles.
   Aplica en ambos modos. */
.lex-form-select option,
.ficha-select option,
select option{
  background:#0d1a2e;
  color:#e8e2d8;
  padding:8px;
}
body[data-theme="light"] .lex-form-select option,
body[data-theme="light"] .ficha-select option,
body[data-theme="light"] select option{
  background:#ffffff;
  color:#2a2620;
}

@keyframes lex-fade-in{from{opacity:0;}to{opacity:1;}}
@keyframes lex-slide-up{from{transform:translateY(20px);opacity:0;}to{transform:translateY(0);opacity:1;}}

/* En modo claro: ajustar inputs del modal */
body[data-theme="light"] .lex-form-input,
body[data-theme="light"] .lex-form-select{
  background:rgba(40,30,20,0.04);
}

/* Items deshabilitados (Próximamente) */
.sb-item.sb-disabled{
  opacity:0.4;cursor:not-allowed;pointer-events:none;
}
.sb-soon{
  font-size:7px;letter-spacing:1px;background:var(--gold-dim);color:var(--gold);
  padding:2px 5px;margin-left:auto;border-radius:2px;font-weight:600;
}
/* Acordeón submenú: rotar flecha cuando está abierto */
.sb-item[data-open="true"] svg[id^="arrow"]{
  transform:rotate(180deg);
}

/* ============================================================
 * CLASES SEMÁNTICAS - sustituyen estilos inline hardcodeados
 * Permiten que el modo claro/oscuro funcione sin !important
 * ============================================================ */

/* Títulos de página (Cormorant Garamond) */
.h-page{
  font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:300;color:var(--text);
}
.h-page--with-mb{
  font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:300;color:var(--text);
  margin-bottom:20px;
}
.h-section{
  font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:300;color:var(--text);
  margin-bottom:16px;
}
.h-card{
  font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:300;color:var(--text);
}
.h-welcome{
  font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:300;color:var(--text);
}
.h-page-tight{
  font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:300;color:var(--text);
  margin-bottom:4px;
}

/* ════════════════════════════════════════════════════════════════
   BLOQUE 2 — Modal Crear Usuario (tabs Interno / Externo)
   ════════════════════════════════════════════════════════════════ */
.user-tab {
  flex: 1;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}
.user-tab:hover {
  color: var(--text);
  background: rgba(255,255,255,0.02);
}
.user-tab-active {
  color: var(--gold);
  border-bottom-color: var(--gold);
  background: var(--gold-dim);
}

/* (Estilos optgroup eliminados — ahora usamos dropdown custom .cd-*) */

/* ════════════════════════════════════════════════════════════════
   BLOQUE 2 — Custom Dropdown (.cd-*)
   Reemplazo profesional del <select> con <optgroup> para control
   total de estilos (los nativos no respetan CSS en menús desplegables).
   ════════════════════════════════════════════════════════════════ */
.cd-wrap {
  position: relative;
  width: 100%;
}
.cd-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s ease;
  text-align: left;
}
.cd-trigger:hover {
  border-color: var(--gold);
}
.cd-wrap.open .cd-trigger {
  border-color: var(--gold);
}
.cd-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.cd-label.placeholder {
  color: var(--text-dim);
}
.cd-arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: var(--text-dim);
}
.cd-wrap.open .cd-arrow {
  transform: rotate(180deg);
  color: var(--gold);
}
.cd-menu {
  display: none;
  position: fixed;            /* fixed en lugar de absolute para escapar del overflow del modal */
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 2000;              /* por encima del modal */
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 0;
  /* Las coordenadas top/left/width se ponen vía JS al abrir */
}
.cd-wrap.open .cd-menu {
  display: block;
}
.cd-group-label {
  padding: 8px 14px 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  background: var(--gold-dim);
  border-bottom: 1px solid var(--border-gold);
}
.cd-group-label:not(:first-child) {
  margin-top: 4px;
}
.cd-option {
  padding: 10px 18px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.cd-option:hover {
  background: var(--gold-dim);
  color: var(--gold);
}
.cd-option.selected {
  background: var(--gold-dim);
  color: var(--gold);
  font-weight: 500;
}

/* ============================================================
   FICHA EXPEDIENTE TRÁFICO · Sistema de pestañas laterales
   Refactor 10-mayo-2026 · compatible modo día/noche
   ============================================================ */

.ficha-body-tabs {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  padding: 16px 20px 20px;
  min-height: 500px;
}

.ficha-tabs-sidebar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  align-self: start;
  position: sticky;
  top: 16px;
}

.ficha-tabs-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 8px 10px 6px;
  font-weight: 500;
}

.ficha-tab-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  margin-bottom: 2px;
  transition: background 0.12s ease, color 0.12s ease;
  text-decoration: none;
  user-select: none;
}
.ficha-tab-item:hover {
  background: var(--gold-dim);
  color: var(--gold);
}
.ficha-tab-item.active {
  background: var(--gold);
  color: var(--bg);
  font-weight: 500;
}
.ficha-tab-item.active .ficha-tab-icon {
  filter: brightness(1.2);
}

.ficha-tab-icon {
  font-size: 15px;
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}

.ficha-tab-text {
  flex: 1;
}

.ficha-tabs-content {
  min-width: 0;  /* permite shrink dentro del grid */
}

.ficha-tab-header {
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.ficha-tab-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  color: var(--text);
  margin: 0;
}
.ficha-tab-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
  line-height: 1.5;
}

/* Responsive: en pantallas estrechas, sidebar arriba en horizontal */
@media (max-width: 900px) {
  .ficha-body-tabs {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .ficha-tabs-sidebar {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
  }
  .ficha-tabs-label {
    width: 100%;
  }
  .ficha-tab-item {
    flex: 0 0 auto;
    padding: 6px 10px;
    font-size: 11px;
  }
  .ficha-tab-text {
    display: inline;
  }
}

/* ============================================================
   MODO ENFOQUE · oculta sidebar Lexia para concentrarse en ficha
   10-mayo-2026 · activado con botón en cabecera ficha o tecla Esc
   ============================================================ */

.pro-sidebar,
.pro-main {
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              margin-left 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s ease;
}

body.modo-enfoque .pro-sidebar {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}

body.modo-enfoque .pro-main {
  margin-left: 0 !important;
  width: 100% !important;
}

body.modo-enfoque .pro-topbar {
  display: none;
}

.btn-modo-enfoque {
  background: transparent;
  border: 1px solid var(--gold-dim, rgba(184,150,90,0.3));
  color: var(--gold);
  padding: 6px 12px;
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-modo-enfoque:hover {
  background: var(--gold-dim, rgba(184,150,90,0.1));
  border-color: var(--gold);
}
body.modo-enfoque .btn-modo-enfoque {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
}
.btn-modo-enfoque .me-icon-on,
.btn-modo-enfoque .me-icon-off {
  font-size: 13px;
}

/* ============================================================
   FICHA · vista pantalla completa (sustituye al listado)
   10-mayo-2026
   ============================================================ */

.ficha-breadcrumb {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  user-select: none;
}
.ficha-breadcrumb a:hover {
  text-decoration: underline;
}

.btn-volver-listado {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-volver-listado:hover {
  background: var(--gold-dim, rgba(184,150,90,0.1));
  border-color: var(--gold);
  color: var(--gold);
}

/* Cuando la ficha está visible en pantalla completa, ya no necesita el panel
   con backdrop oscuro del overlay antiguo. La página la dibuja directamente.
   Forzar reset por si algún CSS antiguo aplicara. */
#fichaTraficoFull {
  width: 100%;
}
#fichaTraficoFull .ficha-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

/* Botón global de modo enfoque en topbar */
#btnModoEnfoqueGlobal.me-active {
  background: var(--gold);
  color: var(--bg);
}
#btnModoEnfoqueGlobal {
  font-size: 16px;
}

/* ============================================================
   BOTÓN FLOTANTE · Salir del modo enfoque
   X discreta gris plateado, esquina superior derecha
   No pisa contenido (margen suficiente del borde)
   ============================================================ */

#btnSalirModoEnfoque {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  color: rgba(180, 180, 195, 0.55);
  border: 1px solid rgba(180, 180, 195, 0.25);
  border-radius: 50%;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, background 0.2s ease;
}

body.modo-enfoque #btnSalirModoEnfoque {
  display: inline-flex;
  animation: salirEnfoqueFadeIn 0.32s ease forwards;
}

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

#btnSalirModoEnfoque:hover {
  color: rgba(220, 220, 230, 0.95);
  border-color: rgba(220, 220, 230, 0.6);
  background: rgba(255, 255, 255, 0.05);
}

#btnSalirModoEnfoque:active {
  transform: scale(0.92);
}

/* ============================================================
   WIZARD · NUEVO EXPEDIENTE TRÁFICO
   Modal de 4 pasos · 10-mayo-2026
   Compatible modo día/noche (usa variables CSS)
   ============================================================ */

.wiz-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.wiz-modal {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 100%;
  max-width: 1100px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  animation: wizFadeIn 0.25s ease;
  transition: max-width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Wizard expandido: ocupa casi toda la pantalla */
.wiz-modal.wiz-modal-expandido {
  max-width: 96vw;
  max-height: 96vh;
  height: 96vh;            /* fuerza ocupar el alto disponible */
  display: flex;
  flex-direction: column;
}
.wiz-modal.wiz-modal-expandido .wiz-body {
  flex: 1;                 /* el body crece para llenar el espacio */
}

/* Cuando el modo enfoque global está activo, el wizard también se expande */
body.modo-enfoque .wiz-modal {
  max-width: 96vw;
  max-height: 96vh;
  height: 96vh;
  display: flex;
  flex-direction: column;
}
body.modo-enfoque .wiz-modal .wiz-body {
  flex: 1;
}

/* En el modo enfoque global, el overlay quita su padding para que ocupe todo */
body.modo-enfoque .wiz-overlay {
  padding: 12px;
}
@keyframes wizFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.wiz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}
.wiz-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 2px;
  font-weight: 500;
}
.wiz-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  color: var(--text);
}
.wiz-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.wiz-close:hover {
  color: var(--text);
  border-color: var(--gold);
}

.wiz-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
}
.wiz-step {
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-card);
  transition: all 0.15s ease;
}
.wiz-step:hover { border-color: var(--gold); }
.wiz-step.active {
  background: var(--gold-dim, rgba(184, 150, 90, 0.15));
  border-color: var(--gold);
}
.wiz-step.done {
  background: rgba(45, 122, 79, 0.12);
  border-color: rgba(45, 122, 79, 0.5);
}
.wiz-step-num {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 3px;
  font-weight: 500;
}
.wiz-step.active .wiz-step-num { color: var(--gold); }
.wiz-step.done .wiz-step-num { color: #2d7a4f; }
.wiz-step-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
}

.wiz-body {
  padding: 24px;
  min-height: 380px;
}

.wiz-h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  color: var(--text);
  margin: 0 0 6px;
  font-weight: 500;
}
.wiz-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: var(--text-dim);
  margin: 0 0 20px;
}

.wiz-field { margin-bottom: 8px; }
.wiz-field label {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 4px;
  font-weight: 500;
}
.wiz-input,
.wiz-select {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  transition: border-color 0.15s ease;
}
.wiz-input:focus,
.wiz-select:focus {
  outline: none;
  border-color: var(--gold);
}
.wiz-input::placeholder { color: var(--text-dim); opacity: 0.6; }

.wiz-row { display: grid; gap: 12px; margin-bottom: 12px; }
.wiz-row.r2 { grid-template-columns: 1fr 1fr; }
.wiz-row.r3 { grid-template-columns: 1fr 1fr 1fr; }
.wiz-row.r4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

.wiz-radio-group {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.wiz-radio {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  cursor: pointer;
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--text);
  transition: all 0.15s ease;
}
.wiz-radio:hover { border-color: var(--gold); }
.wiz-radio.checked {
  background: var(--gold-dim, rgba(184, 150, 90, 0.15));
  border-color: var(--gold);
  color: var(--gold);
  font-weight: 500;
}

.wiz-search-results {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-top: 4px;
  max-height: 240px;
  overflow-y: auto;
}
.wiz-result-item {
  padding: 10px 14px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  transition: background 0.12s ease;
}
.wiz-result-item:last-child { border-bottom: none; }
.wiz-result-item:hover { background: var(--gold-dim, rgba(184, 150, 90, 0.1)); }
.wiz-result-item.selected {
  background: var(--gold-dim, rgba(184, 150, 90, 0.2));
  border-left: 3px solid var(--gold);
}

.wiz-info-box {
  background: var(--bg-card);
  border-left: 2px solid var(--gold);
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
  margin-top: 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: var(--text-dim);
}

.wiz-checks {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
}
.wiz-checks label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--text);
}

.wiz-section-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 10px;
  font-weight: 500;
}

.wiz-auto-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
}
.wiz-auto-box label {
  display: block;
  margin-bottom: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
}
.wiz-auto-box label:last-child { margin-bottom: 0; }
.wiz-auto-box input[type="checkbox"] { margin-right: 6px; }

.wiz-resumen {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px;
  margin-top: 16px;
}
.wiz-resumen-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 8px;
  padding: 4px 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  color: var(--text);
}
.wiz-resumen-row strong { font-weight: 500; }
.wiz-resumen-row span { color: var(--text-dim); }

.wiz-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  gap: 8px;
}
.wiz-actions > div {
  display: flex;
  gap: 8px;
}

@media (max-width: 720px) {
  .wiz-modal { max-width: 100%; }
  .wiz-row.r2,
  .wiz-row.r3,
  .wiz-row.r4 { grid-template-columns: 1fr; }
  .wiz-resumen-row { grid-template-columns: 1fr; gap: 2px; }
}

/* ============================================================
   WIZARD · botón expandir + modal de confirmación cierre
   ============================================================ */

.wiz-expand {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wiz-expand:hover {
  color: var(--gold);
  border-color: var(--gold);
}
.wiz-modal-expandido .wiz-expand,
body.modo-enfoque .wiz-expand {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
}

/* Modal de confirmación al cerrar el wizard (estilo Lexia, sustituye confirm() nativo) */
.wiz-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;  /* por encima del wizard */
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: wizConfirmFadeIn 0.18s ease;
}
@keyframes wizConfirmFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.wiz-confirm-modal {
  background: var(--bg);
  border: 1px solid var(--gold);
  border-radius: 12px;
  width: 100%;
  max-width: 420px;
  padding: 28px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  text-align: center;
  animation: wizConfirmSlideIn 0.22s ease;
}
@keyframes wizConfirmSlideIn {
  from { transform: translateY(-12px) scale(0.97); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.wiz-confirm-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  color: var(--text);
  margin: 0 0 10px;
  font-weight: 500;
}
.wiz-confirm-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 20px;
  line-height: 1.5;
}
.wiz-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.wiz-confirm-actions .btn-tbl {
  min-width: 120px;
  padding: 10px 18px;
}
.btn-tbl-danger {
  background: rgba(220, 53, 69, 0.15);
  border-color: rgba(220, 53, 69, 0.5);
  color: #e88;
}
.btn-tbl-danger:hover {
  background: rgba(220, 53, 69, 0.25);
  border-color: #e88;
  color: #ffaa9c;
}

/* ============================================================
   WIZARD · Bloques de vehículos dinámicos (Sprint 2C-2)
   ============================================================ */

.wiz-vehiculo-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
  position: relative;
}
.wiz-vehiculo-box:first-of-type {
  border-color: var(--gold);
  border-left: 3px solid var(--gold);
}

.wiz-vehiculo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}

.wiz-veh-remove {
  background: transparent;
  border: 1px solid rgba(220, 53, 69, 0.4);
  color: rgba(220, 53, 69, 0.8);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 300;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.15s ease;
}
.wiz-veh-remove:hover {
  background: rgba(220, 53, 69, 0.15);
  color: #e88;
  border-color: #e88;
}

/* ============================================================
   PERSONAS IMPLICADAS (Sprint 2C-3)
   Estilos para la pestaña "Personas implicadas" del expediente
   y los modales compartidos de ocupantes y perjudicados.
   Reutiliza los estilos .wiz-* del wizard donde es posible.
   ============================================================ */

.pers-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
}

.pers-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.pers-section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  color: var(--text);
  font-weight: 500;
  margin-bottom: 4px;
}

.pers-section-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: var(--text-dim);
  max-width: 600px;
  line-height: 1.4;
}

.pers-empty {
  padding: 20px 14px;
  text-align: center;
  background: var(--bg);
  border-radius: 8px;
  border: 1px dashed var(--border);
}

.pers-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'DM Sans', sans-serif;
}
.pers-table thead th {
  text-align: left;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 500;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.pers-table tbody td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
  vertical-align: middle;
}
.pers-table tbody tr:last-child td { border-bottom: none; }
.pers-row { transition: background 0.12s ease; }
.pers-row:hover { background: rgba(184, 150, 90, 0.06); }

/* Modal compartido (ocupante / perjudicado) */
.pers-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.pers-modal-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 2px;
  font-weight: 500;
}
.pers-modal-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  color: var(--text);
  font-weight: 500;
}
.pers-modal-body {
  padding: 18px 22px;
  max-height: 70vh;
  overflow-y: auto;
}
.pers-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 22px;
  border-top: 1px solid var(--border);
}

/* ============================================================
   DOCUMENTOS (Sprint 2C-4 Fase A)
   Estilos para la pestaña "Documentos" del expediente.
   ============================================================ */

.docs-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
}

.docs-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.docs-section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  color: var(--text);
  font-weight: 500;
  margin-bottom: 4px;
}

.docs-section-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: var(--text-dim);
  max-width: 600px;
  line-height: 1.4;
}

.docs-empty {
  padding: 36px 20px;
  text-align: center;
  background: var(--bg);
  border-radius: 8px;
  border: 1px dashed var(--border);
}

.docs-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'DM Sans', sans-serif;
}
.docs-table thead th {
  text-align: left;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 500;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.docs-table tbody td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
  vertical-align: middle;
}
.docs-row { transition: background 0.12s ease; }
.docs-row:hover { background: rgba(184, 150, 90, 0.06); }
.docs-row-grupo td { background: var(--bg); border-bottom: none !important; }

.docs-file-preview {
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 18px;
}

/* ============================================================
   PLANTILLAS LEGALES (Sprint 2C-4 Fase C)
   Estilos para la pestaña "Designa y encargo".
   ============================================================ */

.pl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.pl-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.15s ease;
}
.pl-card:hover {
  border-color: var(--gold);
}

.pl-card-titulo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
}

.pl-card-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.4;
  flex: 1;
}

.pl-card-estado {
  font-family: 'DM Sans', sans-serif;
}

.pl-card-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.pl-card-acciones .btn-tbl {
  font-size: 11px;
  padding: 6px 10px;
}

/* ============================================================
   LOGIN SIEMPRE EN OSCURO (v20260604a)
   La pantalla de acceso (#authWrap) está diseñada solo para
   fondo oscuro. Si la sesión anterior dejó el modo día activo,
   forzamos aquí los colores oscuros para que el logo y el
   formulario se vean bien, sin afectar al panel ya logueado.
   ============================================================ */
body[data-theme="light"] #authWrap{
  --bg:#07101f; --bg-card:#0d1a2e; --bg-hover:#111f35;
  --border:rgba(255,255,255,0.07); --border-gold:rgba(201,169,110,0.25);
  --gold:#c9a96e; --gold-light:#e0c99a; --gold-dim:rgba(201,169,110,0.1);
  --text:#e8e2d8; --text-muted:rgba(232,226,216,0.5); --text-dim:rgba(232,226,216,0.25);
  background:var(--bg);
  color:var(--text);
}
body[data-theme="light"] #authWrap input,
body[data-theme="light"] #authWrap select,
body[data-theme="light"] #authWrap textarea{
  background:rgba(255,255,255,0.04);
  color:var(--text);
  border-color:var(--border);
}
body[data-theme="light"] #authWrap input::placeholder,
body[data-theme="light"] #authWrap textarea::placeholder{
  color:var(--text-dim);
}

/* ============================================================
   TABLAS · cuerpo blanco en día + hover, e iconos topbar (v20260604e)
   · Cabecera: NO se toca (sigue oscura en ambos modos).
   · Cuerpo en modo día: BLANCO dentro del recuadro.
   · Hover de fila: gris azulado en noche, dorado en día.
   · Iconos topbar: noche = marco fino gris (el de siempre); día = marco dorado + fondo blanco.
   Afecta a todas las tablas (.traf-table y .pro-table).
   ============================================================ */

/* ----- Hover de fila en MODO NOCHE: gris azulado (como el menú) ----- */
.traf-table tbody tr:hover td,
.pro-table tbody tr:hover td{
  background:rgba(255,255,255,0.03);
  cursor:default;
}

/* ----- MODO DÍA: cuerpo de la tabla en blanco (la cabecera <th> no se toca) ----- */
body[data-theme="light"] .traf-table tbody td,
body[data-theme="light"] .pro-table tbody td{
  background:var(--bg-card);
}
/* Hover dorado y bien visible en modo día */
body[data-theme="light"] .traf-table tbody tr:hover td,
body[data-theme="light"] .pro-table tbody tr:hover td{
  background:rgba(176,141,78,0.18);
}

/* ----- Iconos de la cabecera (topbar) ----- */
/* En noche se mantiene el estilo de siempre (marco fino gris). */
/* En día: marco dorado con fondo blanco. */
body[data-theme="light"] .theme-toggle{
  background:var(--bg-card);
  border-color:var(--gold);
}
body[data-theme="light"] .theme-toggle:hover{
  background:var(--gold-dim);
  border-color:var(--gold);
}