/* ContaIA Pro — app.css v1.5 | Responsive + Quota fixes */

:root {
  --bg:       #09111e;
  --s1:       #0e1827;
  --s2:       #131f30;
  --s3:       #192638;
  --s4:       #1f2f45;
  --border:   rgba(0,168,126,.15);
  --border2:  rgba(255,255,255,.06);
  --teal:     #00a87e;
  --teal2:    #00c896;
  --teal-dim: rgba(0,168,126,.10);
  --teal-mid: rgba(0,168,126,.22);
  --ivory:    #e8e0d0;
  --mid:      #7a8898;
  --dim:      #2a3545;
  --r:        8px;
  --nav-w:    230px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{height:100%}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--ivory);
     display:flex;height:100vh}
/* Desktop: contained layout with scrolling only inside .page */
@media(min-width:701px){body{overflow:hidden}}
/* Mobile: natural scroll */
@media(max-width:700px){
  body{height:auto;min-height:100vh;overflow-y:auto;flex-direction:column}
  .main{overflow:visible;height:auto;min-height:calc(100vh - 48px)}
  .page{overflow:visible;height:auto;-webkit-overflow-scrolling:touch}
}
/* Mobile: allow body to scroll naturally */
@media(max-width:700px){
  body{height:auto;min-height:100vh;overflow:auto}
  .main{height:auto;min-height:calc(100vh - 48px);overflow:visible}
  .page{overflow:visible;height:auto;-webkit-overflow-scrolling:touch}
}

/* ═══════ SIDEBAR ═══════ */
.sidebar{width:var(--nav-w);background:var(--s1);border-right:1px solid var(--border);
         display:flex;flex-direction:column;flex-shrink:0;transition:transform .25s ease;
         position:relative;z-index:200}
.brand{padding:18px 16px 14px;border-bottom:1px solid var(--border)}
.brand-name{font-size:20px;font-weight:800;color:var(--teal2);letter-spacing:-.5px}
.brand-sub{font-size:10.5px;color:var(--mid);margin-top:2px;letter-spacing:.5px;text-transform:uppercase}
.nav{flex:1;padding:10px 8px;overflow-y:auto}
.nav-section{font-size:9.5px;text-transform:uppercase;letter-spacing:1.2px;color:var(--mid);
             padding:14px 10px 4px;font-weight:600}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;
       color:var(--mid);text-decoration:none;font-size:13.5px;margin-bottom:1px;transition:all .15s}
.nav a:hover{background:var(--teal-dim);color:var(--ivory)}
.nav a.active{background:var(--teal-mid);color:var(--teal2);font-weight:600}
.nav a .ni{font-size:15px;width:20px;text-align:center}
.nav-badge{margin-left:auto;background:var(--teal-dim);color:var(--teal);
           font-size:10px;padding:1px 6px;border-radius:10px;font-weight:600}
.user-box{padding:10px 12px;border-top:1px solid var(--border);display:flex;align-items:center;gap:6px;overflow:hidden;min-width:0}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--teal-mid);
        display:flex;align-items:center;justify-content:center;
        font-size:12px;font-weight:800;color:var(--teal2);flex-shrink:0}
.avatar.lg{width:56px;height:56px;font-size:20px}
.ub-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;
         text-overflow:ellipsis;max-width:120px}
.ub-role{font-size:10.5px;color:var(--mid)}

/* ═══════ HAMBURGER ═══════ */
.hamburger{display:none;align-items:center;justify-content:center;
           width:36px;height:36px;background:var(--s3);border:1px solid var(--border);
           border-radius:6px;cursor:pointer;flex-shrink:0;font-size:16px;
           color:var(--ivory);margin-right:8px}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);
                 z-index:199;opacity:0;transition:opacity .25s}
.sidebar-overlay.open{opacity:1}

/* ═══════ MAIN ═══════ */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;min-height:0}
.topbar{height:52px;border-bottom:1px solid var(--border);display:flex;align-items:center;
        padding:0 20px;gap:12px;flex-shrink:0;background:var(--s1)}
.topbar-title{font-size:16px;font-weight:700}
.topbar-sub{font-size:12px;color:var(--mid)}
.page{flex:1;overflow-y:auto;overflow-x:hidden;padding:24px;-webkit-overflow-scrolling:touch}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.page-title{font-size:20px;font-weight:700}
.page-sub{font-size:13px;color:var(--mid);margin-top:2px}

/* ═══════ CARDS ═══════ */
.card{background:var(--s2);border:1px solid var(--border);border-radius:var(--r);
      padding:20px;margin-bottom:16px}
.card-hd{display:flex;align-items:center;justify-content:space-between;
         margin-bottom:16px;flex-wrap:wrap;gap:8px}
.card-title{font-size:15px;font-weight:700}
.card-sub{font-size:12px;color:var(--mid);margin-top:2px}

/* ═══════ STAT GRID ═══════ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
       gap:14px;margin-bottom:20px}
.stat{background:var(--s2);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px}
.stat-val{font-size:30px;font-weight:800;color:var(--teal2);line-height:1}
.stat-label{font-size:12px;color:var(--mid);margin-top:6px}
.stat-icon{font-size:22px;margin-bottom:8px}

/* ═══════ QUOTA BAR ═══════ */
.quota-bar-wrap{margin-top:10px}
.quota-bar-track{height:6px;background:var(--s4);border-radius:3px;overflow:hidden;margin:6px 0}
.quota-bar-fill{height:100%;border-radius:3px;transition:width .4s}
.quota-bar-fill.ok{background:var(--teal2)}
.quota-bar-fill.warn{background:#d4aa30}
.quota-bar-fill.danger{background:#e08090}

/* ═══════ TABLES ═══════ */
.table-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--border);
            -webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{padding:10px 14px;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;
   letter-spacing:.6px;color:var(--mid);border-bottom:1px solid var(--border);
   background:var(--s1);white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid var(--border2);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(255,255,255,.02)}
.td-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* ═══════ BUTTONS ═══════ */
.btn{padding:8px 16px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;
     border:none;font-family:inherit;display:inline-flex;align-items:center;gap:6px;
     text-decoration:none;transition:all .15s;white-space:nowrap}
.btn-primary{background:var(--teal);color:#fff;font-weight:600}
.btn-primary:hover{background:var(--teal2);color:#fff}
.btn-ghost{background:var(--s3);color:var(--ivory);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--teal-dim);border-color:var(--teal);color:var(--teal2)}
.btn-danger{background:rgba(155,35,53,.15);color:#e08090;border:1px solid rgba(155,35,53,.3)}
.btn-danger:hover{background:rgba(155,35,53,.25)}
.btn-sm{padding:5px 10px;font-size:12px}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ═══════ FORMS ═══════ */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:11.5px;color:var(--mid);margin-bottom:6px;
            font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.form-input,.form-select,.form-textarea{width:100%;background:var(--s3);border:1px solid var(--border);
  border-radius:6px;padding:9px 12px;color:var(--ivory);font-family:inherit;font-size:14px;
  outline:none;transition:border-color .15s}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--teal)}
.form-select option{background:var(--s3)}
.form-textarea{resize:vertical;min-height:80px;line-height:1.6}
.form-error{font-size:12px;color:#e08090;margin-top:4px}
.form-help{font-size:12px;color:var(--mid);margin-top:4px}

/* ═══════ BADGES ═══════ */
.badge{padding:3px 9px;border-radius:20px;font-size:10.5px;font-weight:700;
       text-transform:uppercase;letter-spacing:.5px;display:inline-block}
.badge-active{background:rgba(30,107,74,.2);color:#4ecb8d}
.badge-inactive{background:rgba(60,60,70,.4);color:var(--mid)}
.badge-trial{background:rgba(0,168,126,.15);color:var(--teal)}
.badge-suspended{background:rgba(155,35,53,.15);color:#e08090}
.badge-open{background:rgba(30,107,74,.15);color:#4ecb8d}
.badge-in_progress{background:rgba(0,168,126,.15);color:var(--teal)}
.badge-closed{background:rgba(142,68,173,.15);color:#c090ff}
.badge-archived{background:rgba(50,50,60,.4);color:var(--mid)}
.badge-superadmin{background:rgba(220,50,50,.15);color:#ff8090}
.badge-tenant_admin{background:rgba(0,168,126,.15);color:var(--teal)}
.badge-contador{background:rgba(30,77,122,.2);color:#6aabff}
.badge-auditor{background:rgba(142,68,173,.2);color:#c090ff}
.badge-publico{background:rgba(30,107,74,.15);color:#4ecb8d}
.badge-high,.badge-urgent{background:rgba(155,35,53,.15);color:#e08090}
.badge-medium{background:rgba(0,168,126,.15);color:var(--teal)}
.badge-low{background:rgba(30,107,74,.15);color:#4ecb8d}
.badge-pending{background:rgba(0,168,126,.12);color:var(--teal)}
.badge-approved{background:rgba(30,107,74,.15);color:#4ecb8d}
.badge-rejected{background:rgba(155,35,53,.15);color:#e08090}

/* ═══════ MODAL ═══════ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;
               align-items:center;justify-content:center;z-index:1000;
               opacity:0;pointer-events:none;transition:opacity .2s;padding:16px}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--s2);border:1px solid var(--border);border-radius:12px;
       padding:28px;width:100%;max-width:500px;max-height:90vh;overflow-y:auto;
       transform:translateY(20px);transition:transform .2s}
.modal-overlay.open .modal{transform:translateY(0)}
.modal-title{font-size:18px;font-weight:800;margin-bottom:20px;color:var(--teal2)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;
               padding-top:16px;border-top:1px solid var(--border);flex-wrap:wrap}

/* ═══════ ALERTS ═══════ */
.alert{padding:12px 16px;border-radius:var(--r);font-size:13px;margin-bottom:16px;line-height:1.5}
.alert-error{background:rgba(155,35,53,.15);border:1px solid rgba(155,35,53,.3);color:#e08090}
.alert-success{background:rgba(30,107,74,.15);border:1px solid rgba(30,107,74,.3);color:#4ecb8d}
.alert-info{background:rgba(30,77,122,.15);border:1px solid rgba(30,77,122,.3);color:#6aabff}
.alert-warn{background:rgba(0,168,126,.12);border:1px solid rgba(0,168,126,.3);color:var(--teal2)}

/* ═══════ CHAT LAYOUT ═══════ */
.chat-wrap{display:flex;flex:1;overflow:hidden;min-height:0}
.chat-left{width:220px;border-right:1px solid var(--border);display:flex;flex-direction:column;
           background:var(--s1);flex-shrink:0}
.chat-left-hd{padding:12px;border-bottom:1px solid var(--border);display:flex;
              align-items:center;justify-content:space-between}
.chat-left-hd span{font-size:12px;font-weight:600;color:var(--mid);
                   text-transform:uppercase;letter-spacing:.5px}
.conv-list{flex:1;overflow-y:auto;padding:6px}
.conv-item{padding:9px 10px;border-radius:8px;cursor:pointer;margin-bottom:2px;transition:all .15s}
.conv-item:hover{background:var(--teal-dim)}
.conv-item.active{background:var(--teal-mid)}
.conv-item-title{font-size:12.5px;font-weight:600;white-space:nowrap;
                 overflow:hidden;text-overflow:ellipsis}
.conv-item-sub{font-size:11px;color:var(--mid);margin-top:1px}
.chat-center{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.chat-toolbar{padding:10px 16px;border-bottom:1px solid var(--border);display:flex;
              align-items:center;gap:10px;flex-shrink:0;background:var(--s1);flex-wrap:wrap}
.chat-msgs{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;
           gap:16px;background:var(--bg)}
.msg{max-width:84%;line-height:1.7;font-size:14px}
.msg-user{background:var(--teal-dim);border:1px solid var(--teal-mid);
          align-self:flex-end;border-bottom-right-radius:3px;padding:10px 14px;border-radius:16px 16px 4px 16px}
.msg-ai{background:var(--s2);border:1px solid var(--border);align-self:flex-start;
        border-bottom-left-radius:3px;padding:12px 16px;border-radius:16px 16px 16px 4px;max-width:88%}
.msg-bubble{line-height:1.75;font-size:14px}
.msg-error{align-self:flex-start;max-width:80%}
.msg-error .msg-bubble{padding:10px 14px;background:rgba(155,35,53,.12);
                       border:1px solid rgba(155,35,53,.3);border-radius:10px;color:#e08090}
.msg-meta{font-size:10.5px;color:var(--mid);margin-top:4px;text-align:right}
.chat-input-bar{padding:12px 16px;border-top:2px solid var(--border);display:flex;
                gap:10px;flex-shrink:0;background:var(--s2)}
.chat-inp{flex:1;background:var(--s3);border:1px solid var(--border);border-radius:10px;
          padding:11px 14px;color:var(--ivory);font-family:inherit;font-size:14px;
          resize:none;outline:none;max-height:130px;line-height:1.5}
.chat-inp:focus{border-color:var(--teal)}
.typing{display:inline-flex;align-items:center;gap:4px;padding:8px 14px}
.typing span{width:7px;height:7px;background:var(--teal);border-radius:50%;animation:typ 1.4s ease infinite}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}
@keyframes typ{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-9px)}}

.chat-right{width:260px;border-left:1px solid var(--border);display:flex;flex-direction:column;
            background:var(--s1);flex-shrink:0;overflow-y:auto}
.panel-section{padding:14px;border-bottom:1px solid var(--border)}
.panel-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;
             color:var(--mid);font-weight:700;margin-bottom:10px}

/* ═══════ AREA SELECTOR ═══════ */
.area-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.area-btn{padding:7px 8px;border-radius:6px;border:1px solid var(--border);background:var(--s3);
          color:var(--mid);font-size:12px;cursor:pointer;font-family:inherit;
          transition:all .15s;text-align:left}
.area-btn:hover{border-color:var(--teal);color:var(--ivory)}
.area-btn.active{background:var(--teal-mid);border-color:var(--teal);color:var(--teal2);font-weight:600}
.area-icon{font-size:14px;display:block;margin-bottom:2px}

/* ═══════ DOCUMENT CARDS ═══════ */
.doc-card{background:var(--s3);border:1px solid var(--border);border-radius:6px;
          padding:12px 14px;margin-bottom:8px;display:flex;align-items:center;gap:12px}
.doc-icon{font-size:24px;flex-shrink:0}
.doc-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;
          text-overflow:ellipsis;max-width:160px}
.doc-size{font-size:11px;color:var(--mid)}
.drop-zone{border:2px dashed var(--border);border-radius:var(--r);padding:40px 20px;
           text-align:center;cursor:pointer;transition:all .2s;color:var(--mid)}
.drop-zone:hover,.drop-zone.over{border-color:var(--teal);background:var(--teal-dim);color:var(--teal)}
.drop-zone .dz-icon{font-size:36px;margin-bottom:10px}
.drop-zone p{font-size:13px}

/* ═══════ UTILS ═══════ */
.flex{display:flex}.items-center{align-items:center}.gap-8{gap:8px}.gap-12{gap:12px}
.ml-auto{margin-left:auto}.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-16{margin-top:16px}
.mb-16{margin-bottom:16px}.mb-8{margin-bottom:8px}
.text-mid{color:var(--mid)}.text-gold{color:var(--teal2)}.text-sm{font-size:12px}.text-xs{font-size:11px}
.font-bold{font-weight:700}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hidden{display:none!important}
.separator{border:none;border-top:1px solid var(--border);margin:16px 0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

/* ═══════ TOAST ═══════ */
#toast{position:fixed;bottom:20px;right:20px;background:var(--s2);border:1px solid var(--border);
       border-radius:8px;padding:12px 18px;font-size:13px;z-index:9999;
       transform:translateY(120px);transition:transform .3s;max-width:320px}
#toast.show{transform:translateY(0)}
#toast.success{border-color:rgba(30,107,74,.5);color:#4ecb8d}
#toast.error{border-color:rgba(155,35,53,.5);color:#e08090}
#toast.info{border-color:rgba(30,77,122,.5);color:#6aabff}

/* ═══════ SCROLLBAR ═══════ */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

/* ═══════ LOGIN PAGE ═══════ */
.login-page{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
            background:radial-gradient(ellipse at 30% 50%,rgba(0,168,126,.06) 0%,transparent 60%)}
.login-box{width:420px;max-width:100%;background:var(--s1);border:1px solid var(--border);
           border-radius:16px;padding:40px}
.login-brand{text-align:center;margin-bottom:32px}
.login-logo{font-size:36px;margin-bottom:8px}
.login-title{font-size:26px;font-weight:800;color:var(--teal2)}
.login-sub{font-size:13px;color:var(--mid);margin-top:4px}
.tab-row{display:flex;background:var(--s2);border-radius:8px;padding:4px;gap:4px;margin-bottom:24px}
.tab-btn{flex:1;padding:8px;border-radius:6px;border:none;background:none;
         color:var(--mid);font-family:inherit;font-size:13px;font-weight:600;
         cursor:pointer;transition:all .2s}
.tab-btn.active{background:var(--teal-mid);color:var(--teal2)}

/* ═══════ MARKDOWN IN AI BUBBLES ═══════ */
.msg-ai strong{color:var(--ivory);font-weight:700}
.msg-ai em{color:#9db8e0;font-style:italic}
.msg-ai .msg-bubble p{margin:6px 0}
.msg-ai .msg-bubble p:first-child{margin-top:0}
.msg-ai .msg-bubble p:last-child{margin-bottom:0}
.msg-ai .msg-bubble h3{font-size:14px;font-weight:700;color:var(--teal2);margin:14px 0 4px;
                       border-bottom:1px solid var(--border);padding-bottom:4px}
.msg-ai .msg-bubble h4{font-size:13.5px;font-weight:700;color:var(--teal);margin:12px 0 4px;
                       padding-left:8px;border-left:3px solid var(--teal)}
.msg-ai .msg-bubble ul,.msg-ai .msg-bubble ol{margin:8px 0 8px 18px}
.msg-ai .msg-bubble li{margin-bottom:4px}
.msg-ai .msg-bubble code{background:var(--s1);padding:2px 6px;border-radius:4px;
                         font-size:12px;font-family:monospace;color:#b0d0ff}
.msg-ai .msg-bubble pre{background:var(--s1);padding:10px 12px;border-radius:6px;
                        overflow-x:auto;margin:8px 0}
.msg-ai .msg-bubble pre code{background:none;padding:0}
.msg-ai .msg-bubble hr{border:none;border-top:1px solid var(--border);margin:10px 0}
.msg-ai .msg-bubble blockquote{border-left:3px solid var(--teal);padding-left:12px;
                               color:var(--mid);margin:8px 0}

/* ═══════ LOADING STATES ═══════ */
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-loading{position:relative;color:transparent !important;pointer-events:none}
.btn-loading::after{content:'';position:absolute;width:14px;height:14px;
                   border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
                   border-radius:50%;animation:spin .7s linear infinite;
                   top:50%;left:50%;transform:translate(-50%,-50%)}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}


/* ═══════════════════════════════════════════════════════
   RESPONSIVE — Clean rebuild
   ═══════════════════════════════════════════════════════ */

/* Desktop large: hide chat right panel */
@media(max-width:1200px){
  .chat-right{display:none}
}

/* Tablet 900px: chat adjustments - DON'T hide, let 700px handle stacking */
@media(max-width:900px){
  /* chat-left hidden only on tablet when there's no mobile stacking */
  /* REMOVED: was hiding the conversation list */
}

/* Tablet 768px: layout reflows */
@media(max-width:768px){
  .stats{grid-template-columns:repeat(2,1fr) !important}
  .grid-2{grid-template-columns:1fr !important}
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .form-row{grid-template-columns:1fr}
  .topbar-sub{display:none}
}

/* Mobile 700px: sidebar drawer */
@media(max-width:700px){

  /* ── Body/layout ─────────────────────────────────────── */
  /* NOTE: Do NOT lock html/body overflow - breaks scrollable pages like settings */
  /* The .page div already has overflow-y:auto for scrolling */

  /* ── Sidebar: off-canvas drawer ─────────────────────── */
  .sidebar{
    position:fixed;
    top:0;left:0;bottom:0;
    width:270px;
    transform:translateX(-100%);
    z-index:500;
    transition:transform .25s cubic-bezier(.4,0,.2,1);
    box-shadow:4px 0 24px rgba(0,0,0,.5);
  }
  .sidebar.open{
    transform:translateX(0);
  }

  /* ── Overlay ─────────────────────────────────────────── */
  .sidebar-overlay{
    display:block !important;
    position:fixed;inset:0;
    background:rgba(0,0,0,.65);
    z-index:499;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s;
  }
  .sidebar-overlay.open{
    opacity:1;
    pointer-events:all;
  }

  /* ── Main fills full width ───────────────────────────── */
  .main{
    width:100%;
    flex:1;
  }

  /* ── Hamburger button ────────────────────────────────── */
  .hamburger{display:flex !important}
  #hamburger-btn{display:flex !important}

  /* ── Topbar ──────────────────────────────────────────── */
  .topbar{padding:0 12px;gap:8px;height:48px}
  .topbar-title{font-size:14px}
  .topbar-sub{display:none}
  .topbar .btn{padding:5px 10px;font-size:11px}

  /* ── Page area ───────────────────────────────────────── */
  .page{padding:14px 12px}

  /* ── Grids ───────────────────────────────────────────── */
  .stats{grid-template-columns:repeat(2,1fr) !important}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr !important}
  .form-row{grid-template-columns:1fr !important}

  /* ── Cards ───────────────────────────────────────────── */
  .card{padding:14px 12px}
  .card-hd{flex-direction:column;align-items:flex-start;gap:8px}

  /* ── Tables ──────────────────────────────────────────── */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  th,td{padding:7px 10px;font-size:12px;white-space:nowrap}

  /* ── Modals ──────────────────────────────────────────── */
  .modal-overlay{padding:8px;align-items:flex-start;padding-top:40px}
  .modal{padding:18px 14px;max-height:88vh}

  /* ── Buttons ─────────────────────────────────────────── */
  .td-actions{flex-wrap:wrap;gap:4px}

  /* ── Chat ────────────────────────────────────────────── */
  .chat-wrap{flex-direction:column}
  .chat-left{width:100%;max-height:130px;border-right:none;border-bottom:1px solid var(--border);display:flex}
  .chat-center{flex:1;min-height:0}
  .chat-input-bar{padding:10px 10px;gap:8px}
  .chat-msgs{padding:12px 10px}
  .msg{max-width:92%}
  #btn-send{padding:9px 14px;font-size:12px;min-width:44px}
  .chat-right{display:none}

  /* ── Login ───────────────────────────────────────────── */
  .login-page{align-items:flex-start;padding:24px 16px}
  .login-box{width:100%;padding:28px 20px;border-radius:12px}
}

@media(max-width:480px){
  .stats{grid-template-columns:1fr 1fr !important}
  .stat{padding:12px 10px}
  .stat-val{font-size:22px}
  .stat-label{font-size:11px}
  /* Hide less important table columns */
  .hide-mobile{display:none !important}
  /* Stat cards 2 col minimum */
  @media(max-width:360px){
    .stats{grid-template-columns:1fr !important}
  }
}

/* chat-right hidden at 700px — included in main mobile block */


/* ═══════ PORTAL PUBLIC PAGE ═══════ */
body.portal-public{overflow-y:auto !important;height:auto !important;display:block}
.portal-page{max-width:860px;margin:0 auto;padding:20px}
@media(max-width:600px){
  .portal-page{padding:12px 10px}
}

/* ═══════ QUOTA BAR ═══════ */
.quota-bar-wrap{margin-top:8px}
.quota-bar-track{height:6px;background:var(--s4);border-radius:3px;overflow:hidden;margin:4px 0 2px}
.quota-bar-fill{height:100%;border-radius:3px;transition:width .4s}
.quota-bar-fill.ok{background:var(--teal2)}
.quota-bar-fill.warn{background:#d4aa30}
.quota-bar-fill.danger{background:#e08090}

/* ═══════ EXTRA BADGES ═══════ */
.badge-cancelled{background:rgba(80,80,90,.4);color:var(--mid)}
.badge-expired{background:rgba(155,35,53,.15);color:#e08090}
.badge-pending{background:rgba(0,168,126,.12);color:var(--teal)}
.badge-approved{background:rgba(30,107,74,.15);color:#4ecb8d}
.badge-rejected{background:rgba(155,35,53,.15);color:#e08090}

/* ═══════════════════════════════════════════════════════════

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE v3 — ContaIA Pro — Full coverage, no duplicates
   Breakpoints: 960 / 768 / 640 / 480 / 360
   ══════════════════════════════════════════════════════════════ */

/* ─── Prevent horizontal overflow everywhere ─── */
html { overflow-x: hidden }
body { overflow-x: hidden; max-width: 100vw; overflow-y: auto !important }
.main { overflow-x: hidden; min-width: 0 }
img, video, iframe, canvas { max-width: 100% }

/* ─── Sidebar toggle button — hidden on desktop ─── */
.sidebar-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  background: var(--s3); border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer;
  font-size: 18px; color: var(--ivory);
  margin-right: 6px;
}

/* ═══════════════════════ 960px ═══════════════════════════════ */
@media (max-width: 960px) {
  /* Billing / contabilidad two-col sidebar → stack */
  .billing-grid { grid-template-columns: 1fr !important }
}

/* ═══════════════════════ 768px ═══════════════════════════════ */
@media (max-width: 768px) {
  /* Show hamburger */
  .sidebar-toggle { display: flex !important }

  /* --- CALENDAR --- */
  /* Main grid: calendar + right panel → stack */
  .cal-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
  }
  /* 7-col days grid → keep but shrink cells */
  .cal-days-grid {
    font-size: 11px !important;
  }
  .cal-cell {
    min-height: 48px !important;
    padding: 2px !important;
    font-size: 10px !important;
  }
  /* Calendar topbar nav: wrap */
  .cal-nav { flex-wrap: wrap !important; gap: 6px !important }

  /* --- AGENDA --- */
  .agenda-cols {
    flex-direction: column !important;
  }
  .agenda-sidebar {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* --- CHAT IA (chat.php) --- */
  /* chat-right column (context panel) hidden */
  .chat-right { display: none !important }
  /* chat-left: slim horizontal scroll at top */
  .chat-left {
    width: 100% !important;
    max-height: 130px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .chat-wrap { flex-direction: column !important }
  .chat-center { min-height: 0; flex: 1 }

  /* --- TEAM CHAT (tc-wrap) --- */
  .tc-wrap { flex-direction: column !important; height: auto !important }
  .tc-sidebar {
    width: 100% !important; min-width: 100% !important;
    max-height: 180px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    flex-shrink: 0 !important;
  }
  .tc-main { flex: 1; min-height: 300px }
  .tc-msgs { max-height: 260px !important }

  /* --- SA CHAT (sac-wrap) --- */
  .sac-wrap { flex-direction: column !important; height: auto !important }
  .sac-side {
    width: 100% !important; min-width: 100% !important;
    max-height: 180px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .sac-msgs { max-height: 260px !important }

  /* --- TABLES --- */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch }
  table { min-width: 480px }
  th, td { font-size: 12px !important; padding: 6px 8px !important; white-space: nowrap }

  /* --- MODALS → drawer from bottom --- */
  .modal-overlay { align-items: flex-end !important; padding: 0 !important }
  .modal {
    width: 100% !important; max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 90vh !important; overflow-y: auto !important;
    margin: 0 !important;
  }

  /* --- STATS --- */
  .stats { grid-template-columns: repeat(2, 1fr) !important }

  /* --- PAGE padding --- */
  .page { padding: 12px 10px !important }
  .card { padding: 12px 10px !important }
  .card-hd { flex-wrap: wrap; gap: 8px }

  /* --- FORM rows --- */
  .form-row { flex-direction: column !important }
  .form-row > .form-group { width: 100% !important }
  /* Prevent iOS zoom */
  .form-input, .form-select, .form-textarea { font-size: 16px !important }

  /* --- PLANS grid --- */
  .plans-grid { grid-template-columns: 1fr !important }

  /* --- VIDEO meetings table --- */
  .meetings-table th:nth-child(2),
  .meetings-table td:nth-child(2) { display: none }

  /* --- TOPBAR --- */
  .topbar { padding: 0 10px; height: 48px; gap: 6px }
  .topbar-sub { display: none !important }
}

/* ═══════════════════════ 640px ═══════════════════════════════ */
@media (max-width: 640px) {
  /* Stats 2-col */
  .stats { grid-template-columns: repeat(2, 1fr) !important }

  /* Dashboard 6-stat grid */
  [class*="stat"]:not(.stat-val):not(.stat-label) { padding: 10px 8px }

  /* Topbar: compress button text */
  .topbar .btn-label { display: none }
  .topbar .btn { padding: 5px 8px !important; min-width: 32px }

  /* Modal actions: stack */
  .modal-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .modal-actions .btn { width: 100% !important; justify-content: center !important }

  /* Portal card buttons: wrap */
  .portal-actions { flex-wrap: wrap !important }
  .portal-actions .btn { flex: 1 1 auto; min-width: 70px; text-align: center }

  /* Quota request cards: stack */
  .qr-card-inner { flex-wrap: wrap !important }
  .qr-card-cost { width: 100% !important; text-align: left !important; margin-top: 8px }
  .qr-card-actions { width: 100% !important; flex-direction: row !important; flex-wrap: wrap !important }

  /* Users table: hide phone col */
  .users-table th:nth-child(5),
  .users-table td:nth-child(5) { display: none }
}

/* ═══════════════════════ 480px ═══════════════════════════════ */
@media (max-width: 480px) {
  /* Stats 1-col */
  .stats { grid-template-columns: 1fr 1fr !important }

  /* Calendar cells even smaller */
  .cal-cell { min-height: 36px !important }

  /* Hide table cols aggressively */
  .hide-xs { display: none !important }

  /* Card title smaller */
  .card-title { font-size: 13px !important }

  /* Billing/contabilidad filter row: stack */
  .billing-filters { flex-direction: column !important }
}

/* ═══════════════════════ 360px ═══════════════════════════════ */
@media (max-width: 360px) {
  .stats { grid-template-columns: 1fr !important }
  .page { padding: 8px 6px !important }
  .modal { border-radius: 12px 12px 0 0 !important }
  .btn { padding: 5px 8px !important; font-size: 11px !important }
}

/* ─── Agenda specific ─── */
@media (max-width: 768px) {
  .agenda-cols { grid-template-columns: 1fr !important }
  .agenda-stats { grid-template-columns: 1fr 1fr !important }
}
@media (max-width: 480px) {
  .agenda-stats { grid-template-columns: 1fr 1fr !important }
}

/* ─── Calendar specific ─── */
@media (max-width: 768px) {
  .cal-grid { grid-template-columns: 1fr !important }
  .cal-days-grid { font-size: 11px }
}
@media (max-width: 480px) {
  .cal-days-grid th { font-size: 9px !important; padding: 2px 1px !important }
  .cal-cell { min-height: 36px !important; padding: 1px !important }
  .cal-cell .event-dot { display: none }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE SURGICAL FIXES v4 — based on real device screenshots
   Target: Android Chrome, 393px viewport width
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── GLOBAL CHAT (#gc-page layout) ─────────────────────────── */
  #gc-page {
    flex-direction: column !important;
    height: auto !important;
    min-height: calc(100vh - 52px) !important;
  }
  #gc-sidebar {
    width: 100% !important;
    min-width: 100% !important;
    max-height: 200px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    flex-shrink: 0 !important;
  }
  #gc-main {
    flex: 1 !important;
    min-height: 350px !important;
  }
  #gc-list { overflow-y: auto; max-height: 130px }

  /* ── CHAT IA (.chat-wrap) ────────────────────────────────────── */
  .chat-wrap {
    flex-direction: column !important;
    height: auto !important;
    min-height: calc(100vh - 52px) !important;
  }
  .chat-left {
    display: flex !important;        /* was hidden at 900px — fix */
    flex-direction: row !important;  /* horizontal scroll of conversations */
    width: 100% !important;
    max-height: 100px !important;
    min-height: 60px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-shrink: 0 !important;
  }
  /* Individual conversation items in horizontal scroll */
  .chat-left .conv-item,
  .chat-left [class*="conv"] {
    min-width: 140px !important;
    flex-shrink: 0 !important;
  }
  .chat-center {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .chat-right { display: none !important }
  .chat-msgs { flex: 1; overflow-y: auto; padding: 10px 12px }
  .chat-input-bar { flex-shrink: 0; padding: 8px 10px }

  /* ── TEAM CHAT (.tc-wrap) ────────────────────────────────────── */
  .tc-wrap {
    flex-direction: column !important;
    height: auto !important;
    min-height: calc(100vh - 52px) !important;
  }
  .tc-sidebar {
    width: 100% !important;
    min-width: 100% !important;
    max-height: 180px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    flex-shrink: 0 !important;
    overflow-y: auto !important;
  }
  .tc-main { flex: 1 !important; min-height: 300px !important }

  /* ── AGENDA (2-col → 1-col) ──────────────────────────────────── */
  .agenda-cols {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .agenda-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  /* Fallback for inline styles (server has old file) */
  .page > div[style*="grid-template-columns:1fr 340px"],
  .page > div[style*="grid-template-columns: 1fr 340px"] {
    grid-template-columns: 1fr !important;
  }

  /* ── CALENDAR (2-col → 1-col) ────────────────────────────────── */
  .cal-grid,
  .page > div[style*="grid-template-columns:1fr 300px"],
  .page > div[style*="grid-template-columns: 1fr 300px"] {
    grid-template-columns: 1fr !important;
  }
  /* 7-day week header */
  .cal-days-grid,
  div[style*="grid-template-columns:repeat(7,1fr)"] {
    font-size: 10px !important;
  }
  div[style*="grid-template-columns:repeat(7,1fr)"] > div {
    padding: 1px 0 !important;
    font-size: 9px !important;
  }

  /* ── DOCUMENTS (compatibility table) ────────────────────────── */
  .doc-compat-table { overflow-x: auto !important }
  .doc-compat-table table { min-width: 300px }

  /* ── VIDEO (2-col → stack) ───────────────────────────────────── */
  div[style*="display:grid;grid-template-columns:1fr 1fr;gap:20px"],
  div[style*="display:grid;grid-template-columns:1fr 1fr; gap:20px"],
  div[style*="display:grid;grid-template-columns:1fr 1fr;gap:16px"] {
    grid-template-columns: 1fr !important;
  }

  /* ── TOPBAR overflow fix ──────────────────────────────────────── */
  .topbar {
    overflow: visible !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }
  .topbar > * { flex-shrink: 1 !important; min-width: 0 !important }
  .topbar .btn { white-space: nowrap !important }

  /* ── BILLING / FACTURACION ───────────────────────────────────── */
  div[style*="display:grid;grid-template-columns:1fr 320px"],
  div[style*="display:grid;grid-template-columns:1fr 340px"] {
    grid-template-columns: 1fr !important;
  }

  /* ── PERMISOS TABLE (admin equipo) ───────────────────────────── */
  .perms-table { overflow-x: auto !important }
  .perms-table table { min-width: 350px }
}

/* ── 480px extra compression ────────────────────────────────── */
@media (max-width: 480px) {
  .agenda-stats { grid-template-columns: 1fr 1fr !important }
  .stats { grid-template-columns: 1fr 1fr !important }

  /* Calendar cells even smaller */
  div[style*="min-height:70px"] { min-height: 42px !important }
  div[style*="min-height:70px"] .event-pill { font-size: 8px !important }

  /* Input font size to prevent iOS zoom */
  input[type="text"], input[type="email"], input[type="number"],
  input[type="password"], input[type="search"], select, textarea {
    font-size: 16px !important;
  }
}

/* ─── Dashboard grids ─── */
@media (max-width: 900px) {
  .dashboard-stats { grid-template-columns: repeat(3, 1fr) !important }
  .dashboard-grid2 { grid-template-columns: 1fr !important }
}
@media (max-width: 540px) {
  .dashboard-stats { grid-template-columns: repeat(2, 1fr) !important }
}

/* ─── Video 2-col → 1-col ─── */
@media (max-width: 640px) {
  .video-grid2 { grid-template-columns: 1fr !important }
}

/* ─── Documents stats ─── */
@media (max-width: 480px) {
  .docs-stats { grid-template-columns: 1fr !important }
}

/* ─── auto-fill grids: minwidth too large on mobile ─── */
@media (max-width: 480px) {
  [style*="minmax(300px"] { grid-template-columns: 1fr !important }
  [style*="minmax(280px"] { grid-template-columns: 1fr !important }
  [style*="minmax(260px"] { grid-template-columns: 1fr !important }
}
@media (max-width: 640px) {
  [style*="minmax(300px"] { grid-template-columns: 1fr 1fr !important }
}

/* ContaIA Pro accounting badges */
.badge-contador{background:rgba(0,168,126,.2);color:#00c896}
.badge-auditor{background:rgba(167,139,250,.2);color:#a78bfa}
.badge-cliente{background:rgba(30,107,74,.15);color:#4ecb8d}
.badge-activo{background:rgba(0,168,126,.15);color:#00c896}
.badge-pendiente{background:rgba(184,151,46,.15);color:#d4b040}
.badge-presentada{background:rgba(30,77,122,.2);color:#6aabff}
.badge-pagada{background:rgba(0,168,126,.15);color:#00c896}
.badge-rechazada{background:rgba(155,35,53,.15);color:#e08090}
.badge-en_proceso{background:rgba(30,77,122,.15);color:#6aabff}
.badge-inactivo{background:rgba(60,60,70,.4);color:#7a8898}
.badge-prospecto{background:rgba(184,151,46,.12);color:#d4b040}
/* Extra utility */
.text-teal{color:var(--teal2)}
.text-red{color:#e08090}
.text-amber{color:#d4b040}
.border-teal{border-color:var(--teal)!important}

/* ═══════════════════════════════════════════════════════
   TEMA CLARO (light mode) — ContaIA Pro
═══════════════════════════════════════════════════════ */
body.theme-light {
  --bg:       #f0f4f8;
  --s1:       #ffffff;
  --s2:       #f8fafc;
  --s3:       #edf2f7;
  --s4:       #e2e8f0;
  --border:   rgba(0,168,126,.20);
  --border2:  rgba(0,0,0,.08);
  --teal:     #007a5e;
  --teal2:    #00a87e;
  --teal-dim: rgba(0,168,126,.10);
  --teal-mid: rgba(0,168,126,.18);
  --ivory:    #1a2535;
  --mid:      #4a5568;
  --dim:      #e2e8f0;
  color: #1a2535;
  background: #f0f4f8;
}
body.theme-light .sidebar      { background:#fff; border-right:1px solid #e2e8f0; box-shadow:2px 0 8px rgba(0,0,0,.06); }
body.theme-light .topbar       { background:#fff; border-bottom:1px solid #e2e8f0; }
body.theme-light .card         { background:#fff; border:1px solid #e2e8f0; box-shadow:0 1px 4px rgba(0,0,0,.05); }
body.theme-light .stat         { background:#fff; border:1px solid #e2e8f0; }
body.theme-light .modal        { background:#fff; border:1px solid #e2e8f0; }
body.theme-light .form-input,
body.theme-light .form-select,
body.theme-light .form-textarea{ background:#f8fafc; border:1px solid #cbd5e0; color:#1a2535; }
body.theme-light table         { background:#fff; }
body.theme-light th            { background:#f8fafc; color:#4a5568; border-bottom:1px solid #e2e8f0; }
body.theme-light td            { border-bottom:1px solid #f0f4f8; color:#1a2535; }
body.theme-light tr:hover td   { background:#f0f4f8; }
body.theme-light .nav a        { color:#4a5568; }
body.theme-light .nav a:hover  { background:rgba(0,168,126,.08); color:#007a5e; }
body.theme-light .nav a.active { background:rgba(0,168,126,.12); color:#007a5e; }
body.theme-light .brand-name   { color:#007a5e; }
body.theme-light .btn-ghost    { background:#f0f4f8; color:#1a2535; border:1px solid #e2e8f0; }
body.theme-light .btn-ghost:hover { background:rgba(0,168,126,.08); }
body.theme-light .chat-msgs    { background:#f8fafc; }
body.theme-light .msg-ai       { background:#fff; border:1px solid #e2e8f0; }
body.theme-light .msg-user     { background:rgba(0,168,126,.10); border:1px solid rgba(0,168,126,.20); }
body.theme-light .avatar       { background:rgba(0,168,126,.15); color:#007a5e; }
body.theme-light .table-wrap   { border:1px solid #e2e8f0; }
body.theme-light #toast        { background:#fff; border:1px solid #e2e8f0; color:#1a2535; }

/* Tema con fondo blanco puro — contadores */
body.theme-white {
  --bg:    #ffffff;
  --s1:    #ffffff;
  --s2:    #fafafa;
  --s3:    #f5f5f5;
  --s4:    #eeeeee;
  --border:   rgba(0,168,126,.15);
  --border2:  rgba(0,0,0,.06);
  --ivory: #1a202c;
  --mid:   #64748b;
}
body.theme-white .sidebar  { background:#fff; box-shadow:2px 0 12px rgba(0,0,0,.08); }
body.theme-white .topbar   { background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.06); }
body.theme-white .card     { background:#fff; box-shadow:0 1px 6px rgba(0,0,0,.06); border:1px solid #f0f0f0; }

/* Temas de acento personalizables */
body[data-accent="#e91e63"] { --teal:#c2185b; --teal2:#e91e63; --teal-dim:rgba(233,30,99,.10); --teal-mid:rgba(233,30,99,.18); }
body[data-accent="#2196f3"] { --teal:#1565c0; --teal2:#2196f3; --teal-dim:rgba(33,150,243,.10); --teal-mid:rgba(33,150,243,.18); }
body[data-accent="#9c27b0"] { --teal:#6a1b9a; --teal2:#9c27b0; --teal-dim:rgba(156,39,176,.10); --teal-mid:rgba(156,39,176,.18); }
body[data-accent="#ff5722"] { --teal:#bf360c; --teal2:#ff5722; --teal-dim:rgba(255,87,34,.10); --teal-mid:rgba(255,87,34,.18); }
body[data-accent="#607d8b"] { --teal:#455a64; --teal2:#607d8b; --teal-dim:rgba(96,125,139,.10); --teal-mid:rgba(96,125,139,.18); }

/* Font size options */
body.font-small,  body.font-small *  { font-size:12.5px !important; line-height:1.5 }
body.font-medium, body.font-medium * { font-size:14px   !important; line-height:1.6 }
body.font-large,  body.font-large *  { font-size:15.5px !important; line-height:1.7 }
/* Override for elements that should scale relatively */
body.font-small  .stat-val { font-size:24px !important }
body.font-large  .stat-val { font-size:32px !important }
body.font-small  .brand-name { font-size:17px !important }
body.font-large  .brand-name { font-size:22px !important }

/* Theme toggle button in topbar */
.theme-toggle-btn {
  width:32px;height:32px;border-radius:8px;border:1px solid var(--border);
  background:var(--s3);cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;font-size:15px;transition:all .2s;
  color:var(--mid);flex-shrink:0;
}
.theme-toggle-btn:hover { background:var(--teal-dim);border-color:var(--teal); }

/* User-box compact mode when sidebar is narrow */
.user-box .ub-name{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100px}
.theme-toggle-btn{width:28px;height:28px;border-radius:6px;border:1px solid var(--border);background:var(--s3);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;color:var(--mid)}
.theme-toggle-btn:hover{background:var(--teal-dim);border-color:var(--teal2)}
.logout-btn{display:flex;align-items:center;gap:4px;padding:5px 8px;border-radius:7px;background:rgba(224,128,144,.1);color:#e08090;font-size:11.5px;font-weight:600;text-decoration:none;border:1px solid rgba(224,128,144,.2);white-space:nowrap;flex-shrink:0;margin-left:auto}
.logout-btn:hover{background:rgba(224,128,144,.2)}

/* Light theme button contrast fixes */
body.theme-light .btn-primary,
body.theme-white .btn-primary {
  background: #007a5e;
  color: #ffffff !important;
  font-weight: 700;
}
body.theme-light .btn-primary:hover,
body.theme-white .btn-primary:hover {
  background: #005a45;
  color: #ffffff !important;
}
body.theme-light .btn-ghost,
body.theme-white .btn-ghost {
  background: #f1f5f9;
  color: #1e293b !important;
  border: 1px solid #cbd5e0;
}
body.theme-light .btn-ghost:hover,
body.theme-white .btn-ghost:hover {
  background: rgba(0,122,94,.08);
  color: #007a5e !important;
  border-color: #007a5e;
}
body.theme-light .badge-active,
body.theme-white .badge-active {
  background: rgba(0,122,94,.15);
  color: #007a5e;
  font-weight: 700;
}
body.theme-light .badge-trial,
body.theme-white .badge-trial {
  background: rgba(180,83,9,.12);
  color: #b45309;
  font-weight: 700;
}
body.theme-light .nav-badge,
body.theme-white .nav-badge {
  background: rgba(0,122,94,.12);
  color: #007a5e;
  font-weight: 700;
}
/* Fix all badge contrast on light themes */
body.theme-light [class*="badge-"],
body.theme-white [class*="badge-"] {
  font-weight: 700;
}
body.theme-light .badge-active { background:rgba(0,122,94,.15);color:#007a5e }
body.theme-light .badge-inactive { background:rgba(100,116,139,.12);color:#475569 }
body.theme-light .badge-pending { background:rgba(180,83,9,.12);color:#b45309 }
body.theme-light .badge-suspended { background:rgba(185,28,28,.12);color:#b91c1c }
body.theme-light .badge-superadmin { background:rgba(185,28,28,.12);color:#b91c1c }
body.theme-light .badge-tenant_admin { background:rgba(180,83,9,.12);color:#b45309 }
body.theme-light .badge-contador { background:rgba(0,122,94,.15);color:#007a5e }
body.theme-light .badge-auditor { background:rgba(109,40,217,.12);color:#7c3aed }
body.theme-light .badge-cliente { background:rgba(0,122,94,.12);color:#007a5e }
body.theme-light .badge-high,.theme-light .badge-urgent { background:rgba(185,28,28,.12);color:#b91c1c }
body.theme-light .badge-medium { background:rgba(180,83,9,.12);color:#b45309 }
body.theme-light .badge-low { background:rgba(0,122,94,.12);color:#007a5e }

/* ═══ ACCENT COLOR SYSTEM ════════════════════════════════════════ */
/* These override --teal2 and related vars based on chosen accent */
[data-accent="blue"]   { --teal:#1565c0; --teal2:#2196f3; --teal-dim:rgba(33,150,243,.10); --teal-mid:rgba(33,150,243,.20); }
[data-accent="purple"] { --teal:#6a1b9a; --teal2:#9c27b0; --teal-dim:rgba(156,39,176,.10); --teal-mid:rgba(156,39,176,.20); }
[data-accent="pink"]   { --teal:#c2185b; --teal2:#e91e63; --teal-dim:rgba(233,30,99,.10);  --teal-mid:rgba(233,30,99,.20); }
[data-accent="orange"] { --teal:#bf360c; --teal2:#ff5722; --teal-dim:rgba(255,87,34,.10);  --teal-mid:rgba(255,87,34,.20); }
[data-accent="slate"]  { --teal:#455a64; --teal2:#607d8b; --teal-dim:rgba(96,125,139,.10); --teal-mid:rgba(96,125,139,.20); }
[data-accent="green"]  { --teal:#00a87e; --teal2:#00c896; --teal-dim:rgba(0,200,150,.10);  --teal-mid:rgba(0,200,150,.20); }

/* ═══ ACCENT × LIGHT THEME COMBINATIONS ══════════════════════════ */
body.theme-light[data-accent="blue"],
body.theme-white[data-accent="blue"]   { --teal:#1565c0; --teal2:#2196f3; --teal-dim:rgba(33,150,243,.10); --teal-mid:rgba(33,150,243,.18); }
body.theme-light[data-accent="purple"],
body.theme-white[data-accent="purple"] { --teal:#6a1b9a; --teal2:#9c27b0; --teal-dim:rgba(156,39,176,.10); --teal-mid:rgba(156,39,176,.18); }
body.theme-light[data-accent="pink"],
body.theme-white[data-accent="pink"]   { --teal:#c2185b; --teal2:#e91e63; --teal-dim:rgba(233,30,99,.10);  --teal-mid:rgba(233,30,99,.18); }
body.theme-light[data-accent="orange"],
body.theme-white[data-accent="orange"] { --teal:#bf360c; --teal2:#ff5722; --teal-dim:rgba(255,87,34,.10);  --teal-mid:rgba(255,87,34,.18); }
body.theme-light[data-accent="slate"],
body.theme-white[data-accent="slate"]  { --teal:#455a64; --teal2:#607d8b; --teal-dim:rgba(96,125,139,.10); --teal-mid:rgba(96,125,139,.18); }
body.theme-light[data-accent="green"],
body.theme-white[data-accent="green"]  { --teal:#00a87e; --teal2:#009970; --teal-dim:rgba(0,153,112,.10);  --teal-mid:rgba(0,153,112,.18); }

/* Override the hardcoded light theme btn-primary to use --teal2 dynamically */
body.theme-light .btn-primary,
body.theme-white .btn-primary {
  background: var(--teal) !important;
  color: #ffffff !important;
}
body.theme-light .btn-primary:hover,
body.theme-white .btn-primary:hover {
  filter: brightness(.88) !important;
  color: #ffffff !important;
}
body.theme-light .nav a.active,
body.theme-white .nav a.active {
  background: var(--teal-dim) !important;
  color: var(--teal2) !important;
}
body.theme-light .badge-active,
body.theme-white .badge-active {
  background: var(--teal-mid) !important;
  color: var(--teal) !important;
}