:root{--aq-bg:#f4f6f9;--aq-card:#ffffff;--aq-line:#e3e7ee;--aq-primary:#1C1814;--aq-accent:#1a3050;--aq-muted:#6b7280;--aq-good:#16a34a;--aq-warn:#ea580c;--aq-danger:#dc2626}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--aq-bg);color:#1f2937;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:14px;line-height:1.5;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
html{height:100%}
body{min-height:100vh;min-height:100dvh}

/* ===== LAYOUT PRINCIPAL: FLEX (no grid) - corrige bug width 260px ===== */
.shell{display:flex;min-height:100vh;min-height:100dvh;width:100%}

/* ===== SIDEBAR ===== */
.sidebar{flex:0 0 260px;background:linear-gradient(180deg,#0e1624 0%,#1a2638 100%);color:#cdd6e0;padding:20px 14px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.sidebar .brand{padding:8px 0 12px;text-align:center}
.sidebar .brand img{max-width:110px;width:100%;height:auto;display:block;margin:0 auto;filter:brightness(0) invert(1) opacity(.95)}
.sidebar .brand-sub{font-size:10px;opacity:.7;text-align:center;letter-spacing:.05em;margin-bottom:14px;color:#cdd6e0}
.nav-link{display:block;padding:13px 16px;border-radius:8px;text-decoration:none;color:#cdd6e0;font-size:14px;font-weight:500;transition:background .2s,color .2s;line-height:1.3;-webkit-tap-highlight-color:transparent;min-height:44px}
.nav-link:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-link.active{background:rgba(220,38,38,.18);color:#ff4d4d !important;font-weight:800;border-left:4px solid #dc2626;box-shadow:inset 0 0 0 1px rgba(220,38,38,.28)}
.sidebar-footer{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);font-size:13px}
.sidebar-footer a{color:#cdd6e0;text-decoration:none;display:block;padding:10px 16px;border-radius:6px}
.sidebar-footer a:hover{background:rgba(255,255,255,.06);color:#fff}

/* ===== AREA PRINCIPAL - flex:1 ocupa el resto ===== */
.main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--aq-bg)}

/* TOPBAR sticky con safe-area iOS */
.topbar{background:#fff;padding:14px 20px;padding-top:calc(14px + env(safe-area-inset-top));border-bottom:1px solid var(--aq-line);display:flex;justify-content:space-between;align-items:center;gap:12px;position:sticky;top:0;z-index:50;min-height:56px}
.topbar h1{margin:0;font-size:17px;color:var(--aq-primary);font-weight:600;flex:1;line-height:1.3}
.topbar .topbar-sub{font-size:13px;color:var(--aq-muted);margin-top:2px}
.topbar .topbar-actions{display:flex;align-items:center;gap:10px}

/* HAMBURGUESA - solo visible en mobile */
.aq-burger{display:none;background:none;border:none;color:var(--aq-primary);font-size:22px;padding:8px 12px;cursor:pointer;border-radius:6px;-webkit-tap-highlight-color:transparent;min-width:44px;min-height:44px}
.aq-burger:hover{background:#f3f4f6}

/* CONTENT - centrado con max-width responsive */
.main > section,.main > article,.main > div:not(.topbar):not(.aq-backdrop){padding:18px clamp(16px,3vw,28px);max-width:100%;margin:0 auto;width:100%}
.main .container,.main .panel-wrap,.dashboard-grid{max-width:1400px;margin-left:auto;margin-right:auto}

/* PANELES */
.panel{background:var(--aq-card);border-radius:12px;padding:clamp(16px,2vw,24px);box-shadow:0 1px 3px rgba(0,0,0,.05);margin-bottom:18px;max-width:100%;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}
.panel h2{font-size:18px;color:var(--aq-primary);margin:0 0 14px;font-weight:600;line-height:1.3}
.panel h3{font-size:15px;margin:14px 0 10px;color:#374151;font-weight:600}

/* GRID CARDS responsive */
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

.card{background:#f9fafb;border:1px solid var(--aq-line);border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:4px}
.card .eyebrow{font-size:11px;color:var(--aq-muted);text-transform:uppercase;letter-spacing:.05em}
.card strong{font-size:18px;color:var(--aq-primary);font-weight:600;word-break:break-word}
.card small{font-size:12px;color:var(--aq-muted)}

/* BADGES */
.badge{display:inline-block;padding:3px 8px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.badge-ok{background:#d1fae5;color:#065f46}
.badge-warn{background:#fed7aa;color:#9a3412}
.badge-danger{background:#fecaca;color:#991b1b}
.badge-info{background:#dbeafe;color:#1e40af}

/* TABLAS responsive con scroll horizontal */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:8px;border:1px solid var(--aq-line);margin:14px 0}
table{width:100%;border-collapse:collapse;font-size:13px;background:#fff;table-layout:auto}
table thead th{background:#f9fafb;color:#374151;font-weight:600;text-align:left;padding:10px 12px;border-bottom:2px solid var(--aq-line);position:sticky;top:0;z-index:1;white-space:nowrap}
table tbody td{padding:10px 12px;border-bottom:1px solid var(--aq-line);vertical-align:middle;overflow-wrap:anywhere}
table tbody tr:hover{background:#f9fafb}
table tbody tr:last-child td{border-bottom:none}

/* FORMULARIOS responsive */
.erp-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:14px 0}
.erp-form-grid label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#374151;font-weight:500}
.erp-form-grid label.full{grid-column:1/-1}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=tel],input[type=url],input[type=search],select,textarea{font-size:16px;padding:10px 12px;border:1px solid var(--aq-line);border-radius:6px;background:#fff;width:100%;font-family:inherit;-webkit-appearance:none;appearance:none}
textarea{font-family:inherit;min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--aq-accent);outline-offset:1px;border-color:var(--aq-accent)}
button,.btn{font-size:14px;padding:10px 18px;background:var(--aq-primary);color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:500;min-height:44px;-webkit-tap-highlight-color:transparent;transition:background .2s}
button:hover,.btn:hover{background:#2a2620}
button:disabled{background:#9ca3af;cursor:not-allowed}
.btn-secondary{background:transparent;color:var(--aq-primary);border:1px solid var(--aq-primary)}
.btn-secondary:hover{background:var(--aq-primary);color:#fff}

/* BACKDROP - position:fixed (NO afecta al layout grid/flex) */
.aq-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:999;display:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.aq-backdrop.aq-show{display:block}

/* ===== RESPONSIVE MOBILE (< 768px) ===== */
@media (max-width:768px){
  .sidebar{position:fixed;top:0;left:-300px;width:min(82vw,300px);height:100vh;height:100dvh;z-index:1000;transition:left .28s cubic-bezier(.4,0,.2,1);box-shadow:8px 0 32px rgba(0,0,0,.25);padding-top:calc(20px + env(safe-area-inset-top))}
  .sidebar.aq-open{left:0}
  .main{margin-left:0;width:100%;min-width:0}
  .aq-burger{display:inline-flex;align-items:center;justify-content:center}
  .topbar h1{font-size:16px}
  .topbar .topbar-sub{display:none}
  .topbar{padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top))}
  .panel{padding:14px;margin-bottom:14px}
  .panel h2{font-size:16px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .erp-form-grid{grid-template-columns:1fr}
  table{font-size:12px}
  table thead th,table tbody td{padding:8px 10px}
}

/* ===== TABLET (769-1024) ===== */
@media (min-width:769px) and (max-width:1024px){
  .sidebar{flex:0 0 220px;padding:16px 10px}
  .nav-link{padding:11px 12px;font-size:13px}
  .grid-4{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
}

/* ===== DESKTOP LARGE (>1400px) ===== */
@media (min-width:1400px){
  .sidebar{flex:0 0 280px}
}

/* ===== UTILIDADES ===== */
.flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.flex-between{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.text-muted{color:var(--aq-muted)}
.text-right{text-align:right}
.text-center{text-align:center}
.aq-table-wide{min-width:820px}
.aq-table-center th,.aq-table-center td{text-align:center;vertical-align:middle}
.aq-table-center td:first-child,.aq-table-center th:first-child{text-align:center}
.aq-panel-full{grid-column:1/-1}
.aq-data-actions{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.main .grid-2 .panel table,.main .grid-3 .panel table{min-width:760px}
.main .panel > table{min-width:min(100%,760px)}
.mt-0{margin-top:0}
.mt-1{margin-top:8px}
.mt-2{margin-top:14px}
.mt-3{margin-top:24px}
.mb-0{margin-bottom:0}
.hidden{display:none}

/* ===== PRINT ===== */
@media print{
  .sidebar,.topbar,.aq-burger,.aq-backdrop,.no-print{display:none !important}
  .main{margin:0;padding:0}
  .panel{box-shadow:none;border:1px solid #ddd;page-break-inside:avoid}
}

/* ===== SCROLLBAR custom ===== */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#f1f5f9}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#94a3b8}


/* === LOGIN CENTRADO + LOGO 2026-05-03 === */
body.login-body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:#f5f0e8;
}
.login-card{
  width:100%;
  max-width:420px;
  margin:0 auto;
  background:#fff;
  border-radius:12px;
  padding:36px 32px;
  box-shadow:0 10px 40px rgba(0,0,0,.08);
  text-align:center;
}
.login-card h1{
  margin:0 0 8px;
  font-size:22px;
  color:#1C1814;
  letter-spacing:.04em;
}
.login-card p{
  margin:0 0 24px;
  font-size:13px;
  color:#888;
}
.login-card label{
  display:block;
  text-align:left;
  margin:14px 0 4px;
  font-size:13px;
  color:#444;
  font-weight:500;
}
.login-card input{
  width:100%;
  padding:12px;
  border:1px solid #ddd;
  border-radius:6px;
  font-size:14px;
  box-sizing:border-box;
}
.login-card button[type=submit]{
  width:100%;
  margin-top:20px;
  padding:14px;
  background:#1C1814;
  color:#fff;
  border:none;
  border-radius:6px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  letter-spacing:.04em;
}
.login-card button[type=submit]:hover{background:#9B2A19}

/* === DASHBOARD CENTRADO SIN SCROLL EXTRA === */
.layout{max-width:1400px;margin:0 auto}
.content{max-width:1320px;margin:0 auto;padding:24px}
body{overflow-x:hidden}
@media (min-width:1101px){
  .content{padding:32px 40px}
}

/* Reducir margenes y compactar dashboard para que entre en pantalla */
.kpi-grid{gap:14px}
.panel{margin-bottom:14px;padding:16px}

/* === FIX CENTRADO TOTAL backoffice 2026-05-03 === */
.shell{max-width:100vw !important;width:100%}
.main{width:100% !important;min-width:0 !important;max-width:none !important}
.main > section,.main > article,.main > div:not(.topbar):not(.aq-backdrop){
  max-width:none !important;
  width:100% !important;
  padding:18px clamp(16px,2.5vw,32px) !important;
  margin:0 !important;
  box-sizing:border-box;
}
.main .container,.main .panel-wrap,.dashboard-grid{
  max-width:none !important;
  width:100% !important;
  margin:0 !important;
}
.panel{max-width:none !important;width:100% !important;box-sizing:border-box}
.layout{max-width:100vw !important;margin:0 !important}
.content{max-width:none !important;width:100% !important;margin:0 !important;padding:18px clamp(16px,2.5vw,32px) !important;box-sizing:border-box}
/* Grid de KPIs/cards autoflex full-width */
.dashboard-grid,.grid,.cols-2,.cols-3,.cols-4,.kpi-grid{display:grid;gap:14px;width:100% !important}
.kpi-grid,.cols-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important}
.cols-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) !important}
.cols-2{grid-template-columns:repeat(auto-fit,minmax(360px,1fr)) !important}
/* topbar full-width también */
.topbar{width:100% !important;max-width:none !important;padding:14px clamp(16px,2.5vw,32px) !important;box-sizing:border-box}

/* === FIX 2026-05-03 v2: clases grid-N reales del dashboard (grid-6, grid-5, grid-4, grid-3, grid-2) === */
.main .grid{display:grid !important;gap:14px !important;width:100% !important}
.main .grid.grid-6{grid-template-columns:repeat(auto-fit,minmax(180px,1fr)) !important}
.main .grid.grid-5{grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) !important}
.main .grid.grid-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important}
.main .grid.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) !important}
.main .grid.grid-2{grid-template-columns:repeat(auto-fit,minmax(380px,1fr)) !important}
/* Las cards no deben crecer dentro del grid */
.main .grid > .card,.main .grid > article{min-width:0 !important;width:auto !important}
/* Padding más uniforme para que se vea centrado */
.main > section,.main > div:not(.topbar):not(.aq-backdrop),.main > article{
  padding-left:clamp(20px,3vw,40px) !important;
  padding-right:clamp(20px,3vw,40px) !important;
}


/* === BOTTOM NAV MOBILE 2026-05-03 ===
   Bottom navigation iOS-style fija, inyectada por View::renderBackoffice
   en TODAS las pantallas del backoffice cuando viewport <= 768px.
   Mantiene la misma estetica que /control/_inc/views/mobile_dashboard.php */
.aq-bottom-nav-mobile{display:none}
@media (max-width:768px){
  .aq-bottom-nav-mobile{
    position:fixed;bottom:0;left:0;right:0;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-top:1px solid #e8e2d8;
    display:flex;justify-content:space-around;align-items:stretch;
    padding:8px 0 calc(8px + env(safe-area-inset-bottom));
    z-index:1000;
    box-shadow:0 -2px 10px rgba(0,0,0,.04);
    font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,sans-serif;
  }
  .aq-bottom-nav-mobile .aq-bn-item{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-decoration:none;color:#8B847A;
    font-size:10px;font-weight:500;letter-spacing:.01em;
    padding:6px 4px;flex:1;min-width:0;
    -webkit-tap-highlight-color:transparent;
    transition:color .15s ease;
  }
  .aq-bottom-nav-mobile .aq-bn-item:active{transform:scale(.96)}
  .aq-bottom-nav-mobile .aq-bn-item.active{color:#dc2626;font-weight:800}
  .aq-bottom-nav-mobile .aq-bn-ic{font-size:22px;margin-bottom:2px;line-height:1;display:block}
  .aq-bottom-nav-mobile .aq-bn-lbl{display:block;line-height:1.2}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .main{padding-bottom:calc(64px + env(safe-area-inset-bottom)) !important}
}

/* === DARK MODE 2026-05-03 === [data-theme="dark"] */
:root[data-theme="dark"]{
  --aq-bg:#000000;
  --aq-card:#0b0b0b;
  --aq-line:#2a2a2a;
  --aq-primary:#f0eae0;
  --aq-accent:#C8A55C;
  --aq-muted:#8B847A;
  --aq-text:#f0eae0;
  --aq-good:#22c55e;
  --aq-warn:#f59e0b;
  --aq-danger:#ef4444;
  color-scheme:dark;
}
:root[data-theme="dark"] body{background:var(--aq-bg);color:var(--aq-text)}
:root[data-theme="dark"] html,
:root[data-theme="dark"] .shell,
:root[data-theme="dark"] .layout,
:root[data-theme="dark"] .content{background:var(--aq-bg);color:var(--aq-text)}
:root[data-theme="dark"] .main{background:var(--aq-bg)}
:root[data-theme="dark"] .topbar{background:var(--aq-card);border-bottom-color:var(--aq-line)}
:root[data-theme="dark"] .topbar h1{color:var(--aq-text)}
:root[data-theme="dark"] .topbar .topbar-sub,
:root[data-theme="dark"] .text-muted{color:var(--aq-muted)}
:root[data-theme="dark"] .panel{background:var(--aq-card);box-shadow:0 1px 3px rgba(0,0,0,.4);color:var(--aq-text)}
:root[data-theme="dark"] .panel h2,
:root[data-theme="dark"] .panel h3{color:var(--aq-text)}
:root[data-theme="dark"] .card{background:#221d18;border-color:var(--aq-line);color:var(--aq-text)}
:root[data-theme="dark"] .card strong{color:var(--aq-text)}
:root[data-theme="dark"] .card .eyebrow,
:root[data-theme="dark"] .card small{color:var(--aq-muted)}
:root[data-theme="dark"] table{background:var(--aq-card);color:var(--aq-text)}
:root[data-theme="dark"] table thead th{background:#111;color:var(--aq-text);border-bottom-color:var(--aq-line)}
:root[data-theme="dark"] table tbody tr,
:root[data-theme="dark"] table tbody td{border-bottom-color:var(--aq-line)}
:root[data-theme="dark"] table tbody tr:hover{background:rgba(200,165,92,.08)}
:root[data-theme="dark"] .table-wrap{border-color:var(--aq-line)}
:root[data-theme="dark"] .tbl,
:root[data-theme="dark"] .tbl th,
:root[data-theme="dark"] .tbl td{background:var(--aq-card);color:var(--aq-text);border-color:var(--aq-line)}
:root[data-theme="dark"] .page-head,
:root[data-theme="dark"] .page-header{color:var(--aq-text)}
:root[data-theme="dark"] input[type=text],
:root[data-theme="dark"] input[type=email],
:root[data-theme="dark"] input[type=password],
:root[data-theme="dark"] input[type=number],
:root[data-theme="dark"] input[type=date],
:root[data-theme="dark"] input[type=tel],
:root[data-theme="dark"] input[type=url],
:root[data-theme="dark"] input[type=search],
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea{
  background:#221d18;color:var(--aq-text);border-color:var(--aq-line)
}
:root[data-theme="dark"] .erp-form-grid label{color:var(--aq-text)}
:root[data-theme="dark"] .erp-form-grid input::placeholder,
:root[data-theme="dark"] .erp-form-grid textarea::placeholder{color:var(--aq-muted)}
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] textarea:focus{outline-color:var(--aq-accent);border-color:var(--aq-accent)}
:root[data-theme="dark"] button,
:root[data-theme="dark"] .btn{background:var(--aq-accent);color:#1C1814}
:root[data-theme="dark"] button:hover,
:root[data-theme="dark"] .btn:hover{background:#b89248}
:root[data-theme="dark"] .btn-secondary{background:transparent;color:var(--aq-accent);border-color:var(--aq-accent)}
:root[data-theme="dark"] .btn-secondary:hover{background:var(--aq-accent);color:#1C1814}
:root[data-theme="dark"] button:disabled{background:#3a342d;color:var(--aq-muted)}
:root[data-theme="dark"] .badge-ok{background:#0f3a25;color:#86efac}
:root[data-theme="dark"] .badge-warn{background:#3d2510;color:#fdba74}
:root[data-theme="dark"] .badge-danger{background:#3a1414;color:#fca5a5}
:root[data-theme="dark"] .badge-info{background:#0f2a3d;color:#93c5fd}
:root[data-theme="dark"] .alert,
:root[data-theme="dark"] .alert-info,
:root[data-theme="dark"] .alert-warn,
:root[data-theme="dark"] .alert-danger,
:root[data-theme="dark"] .alert-success{color:var(--aq-text);border-color:var(--aq-line)}
:root[data-theme="dark"] .val-good{color:#86efac}
:root[data-theme="dark"] .val-warn{color:#fdba74}
:root[data-theme="dark"] .val-bad{color:#fca5a5}
:root[data-theme="dark"] .sidebar{background:linear-gradient(180deg,#0a0908 0%,#15110d 100%)}
:root[data-theme="dark"] .nav-link.active{background:rgba(220,38,38,.22);color:#ff6b6b !important;border-left-color:#ef4444;box-shadow:inset 0 0 0 1px rgba(239,68,68,.35)}
:root[data-theme="dark"] .aq-bottom-nav-mobile{
  background:rgba(28,24,20,.96);
  border-top-color:var(--aq-line);
}
:root[data-theme="dark"] .aq-bottom-nav-mobile .aq-bn-item{color:var(--aq-muted)}
:root[data-theme="dark"] .aq-bottom-nav-mobile .aq-bn-item.active{color:#ff6b6b}
:root[data-theme="dark"] body.login-body{background:#0F0E0C}
:root[data-theme="dark"] .login-card{background:#1C1814;color:var(--aq-text)}
:root[data-theme="dark"] .login-card h1{color:var(--aq-text)}
:root[data-theme="dark"] .login-card p,
:root[data-theme="dark"] .login-card label{color:var(--aq-muted)}
:root[data-theme="dark"] .login-card input{background:#221d18;color:var(--aq-text);border-color:var(--aq-line)}
:root[data-theme="dark"] .login-card button[type=submit]{background:var(--aq-accent);color:#1C1814}
:root[data-theme="dark"] ::-webkit-scrollbar-track{background:#15110d}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#3a342d}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:var(--aq-accent)}
:root[data-theme="dark"] .aq-clock{color:var(--aq-muted)}
:root[data-theme="dark"] .main [style*="background:#fff"],
:root[data-theme="dark"] .main [style*="background: #fff"],
:root[data-theme="dark"] .main [style*="background:white"],
:root[data-theme="dark"] .main [style*="background: white"],
:root[data-theme="dark"] .main [style*="background-color:#fff"],
:root[data-theme="dark"] .main [style*="background-color: #fff"],
:root[data-theme="dark"] .main [style*="background-color:white"],
:root[data-theme="dark"] .main [style*="background-color: white"]{
  background:var(--aq-card) !important;
  color:var(--aq-text) !important;
  border-color:var(--aq-line) !important;
}
:root[data-theme="dark"] .main [style*="border:1px solid #e5e5e5"],
:root[data-theme="dark"] .main [style*="border:1px solid #ddd"],
:root[data-theme="dark"] .main [style*="border:1px solid #d4cfc4"]{border-color:var(--aq-line) !important}
:root[data-theme="dark"] .main [style*="color:#888"],
:root[data-theme="dark"] .main [style*="color: #888"],
:root[data-theme="dark"] .main [style*="color:#666"],
:root[data-theme="dark"] .main [style*="color: #666"],
:root[data-theme="dark"] .main [style*="color:#555"],
:root[data-theme="dark"] .main [style*="color: #555"]{color:var(--aq-muted) !important}
:root[data-theme="dark"] .main [style*="color:#1C1814"],
:root[data-theme="dark"] .main [style*="color: #1C1814"],
:root[data-theme="dark"] .main [style*="color:#3D352D"],
:root[data-theme="dark"] .main [style*="color: #3D352D"]{color:var(--aq-text) !important}
:root[data-theme="dark"] .main a:not(.btn):not(.nav-link){color:#d7b96a}

.aq-theme-toggle{
  background:transparent;border:1px solid var(--aq-line);color:var(--aq-primary);
  width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:16px;line-height:1;transition:all .2s
}
.aq-theme-toggle:hover{background:var(--aq-card);transform:rotate(15deg)}
:root[data-theme="dark"] .aq-theme-toggle{color:var(--aq-accent);border-color:var(--aq-accent)}

/* === AQ_MOBILE_SCROLL_FIX_v1 2026-05-04: garantizar scroll y visibilidad en iPhone/Android === */
@media (max-width:768px){
  html,body{height:auto !important;min-height:100vh !important;overflow-x:hidden !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch !important}
  .shell{display:block !important;min-height:100vh !important;overflow-y:visible !important}
  .main{display:block !important;width:100% !important;min-height:calc(100vh - 56px) !important;overflow-y:visible !important;padding-bottom:calc(80px + env(safe-area-inset-bottom)) !important}
  .topbar{position:sticky !important;top:0 !important;z-index:50 !important}
  .topbar h1{font-size:15px !important;line-height:1.3 !important}
  .topbar .topbar-meta{display:none !important}
  .main > section,.main > article,.main > div:not(.topbar):not(.aq-backdrop):not(.aq-bottom-nav-mobile){padding:14px clamp(10px,3vw,18px) !important;max-width:100% !important;width:100% !important;margin:0 auto !important}
  .panel,.card,table{max-width:100% !important;overflow-x:auto !important;-webkit-overflow-scrolling:touch !important}
  table{display:block !important;overflow-x:auto !important;white-space:nowrap !important;-webkit-overflow-scrolling:touch !important}
  .grid-2,.grid-3,.grid-4,.dashboard-grid,.erp-form-grid{grid-template-columns:1fr !important;gap:10px !important}
  /* Mejorar burger: visible y clickable */
  .aq-burger{display:inline-flex !important;align-items:center;justify-content:center;background:transparent;border:none;font-size:24px;width:44px;height:44px;cursor:pointer;color:var(--aq-primary, #1C1814);-webkit-tap-highlight-color:transparent}
  .aq-burger:active{background:rgba(0,0,0,.08)}
  /* Backdrop al abrir sidebar */
  .aq-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:999;display:none}
  .aq-backdrop.aq-show{display:block}
  /* Sidebar con scroll propio */
  .sidebar{overflow-y:auto !important;-webkit-overflow-scrolling:touch !important}
}

/* === AQ_MOBILE_APP_REVIEW_v1 2026-05-23
   Solo móvil: lectura tipo app, datos grandes y controles cómodos. No afecta PC. */
@media (max-width:768px){
  :root{--aq-mobile-pad:14px}
  body{
    background:#f5f1ea !important;
    font-size:16px !important;
    line-height:1.45 !important;
  }
  .main{
    background:#f5f1ea !important;
    padding-bottom:calc(92px + env(safe-area-inset-bottom)) !important;
  }
  .topbar{
    min-height:58px !important;
    padding:8px var(--aq-mobile-pad) !important;
    gap:10px !important;
    box-shadow:0 1px 0 rgba(28,24,20,.08) !important;
  }
  .topbar h1{
    font-size:18px !important;
    line-height:1.2 !important;
    font-weight:800 !important;
    letter-spacing:0 !important;
    white-space:normal !important;
  }
  .aq-burger{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    border-radius:12px !important;
    background:#fff !important;
    box-shadow:0 1px 4px rgba(28,24,20,.08) !important;
  }
  .main > section,
  .main > article,
  .main > div:not(.topbar):not(.aq-backdrop):not(.aq-bottom-nav-mobile){
    padding:var(--aq-mobile-pad) !important;
    margin:0 !important;
  }
  .panel{
    background:#fff !important;
    border:1px solid rgba(28,24,20,.08) !important;
    border-radius:14px !important;
    padding:16px !important;
    box-shadow:0 3px 14px rgba(28,24,20,.06) !important;
  }
  .panel h2{
    font-size:20px !important;
    line-height:1.2 !important;
    margin:0 0 12px !important;
    letter-spacing:0 !important;
  }
  .panel h3{font-size:17px !important;line-height:1.25 !important}
  .panel p,
  .panel-help,
  .aqcc-muted{
    font-size:14px !important;
    line-height:1.45 !important;
  }
  .grid,
  .grid.grid-2,
  .grid.grid-3,
  .grid.grid-4,
  .grid.grid-5,
  .grid.grid-6,
  .dashboard-grid,
  .kpi-grid,
  .erp-form-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .card,
  article.card{
    border-radius:14px !important;
    padding:16px !important;
    min-height:104px !important;
    align-items:flex-start !important;
    text-align:left !important;
    box-shadow:0 3px 12px rgba(28,24,20,.06) !important;
  }
  .card .eyebrow,
  article.card .eyebrow{
    font-size:12px !important;
    letter-spacing:0 !important;
    line-height:1.25 !important;
  }
  .card strong,
  article.card strong{
    font-size:27px !important;
    line-height:1.08 !important;
    overflow-wrap:anywhere !important;
  }
  .card small,
  article.card small{
    font-size:13px !important;
    line-height:1.35 !important;
  }
  .action-stack,
  .form-actions,
  .aqcc-actions{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    width:100% !important;
  }
  .btn,
  .btn-link,
  button,
  input[type=submit]{
    min-height:48px !important;
    padding:12px 16px !important;
    border-radius:12px !important;
    font-size:16px !important;
    font-weight:800 !important;
    justify-content:center !important;
    text-align:center !important;
  }
  input,
  select,
  textarea{
    min-height:46px !important;
    font-size:16px !important;
    border-radius:10px !important;
  }
  label{
    font-size:14px !important;
    line-height:1.35 !important;
  }
  table{
    font-size:15px !important;
    line-height:1.35 !important;
    border-collapse:separate !important;
    border-spacing:0 !important;
  }
  table th,
  table td{
    padding:10px 12px !important;
    vertical-align:top !important;
  }
  .badge{
    min-height:26px !important;
    padding:5px 9px !important;
    border-radius:999px !important;
    font-size:12px !important;
    line-height:1.1 !important;
    display:inline-flex !important;
    align-items:center !important;
  }
  .aq-bottom-nav-mobile{
    padding:9px 0 calc(9px + env(safe-area-inset-bottom)) !important;
  }
  .aq-bottom-nav-mobile .aq-bn-item{
    font-size:12px !important;
    min-height:56px !important;
    gap:3px !important;
  }
  .aq-bottom-nav-mobile .aq-bn-ic{
    font-size:16px !important;
    font-weight:900 !important;
    letter-spacing:0 !important;
  }
  .aq-client-accordion summary{
    grid-template-columns:1fr !important;
    padding:16px !important;
  }
  .aq-client-accordion .metric strong{font-size:22px !important}
  :root[data-theme="dark"] body,
  :root[data-theme="dark"] .main{background:#000 !important}
  :root[data-theme="dark"] .panel,
  :root[data-theme="dark"] .card,
  :root[data-theme="dark"] article.card,
  :root[data-theme="dark"] .aq-burger{background:#0b0b0b !important}
}
