:root{
  --bg:#F3F5F9; --surface:#FFFFFF; --surface-2:#E9EDF3; --surface-3:#DCE3ED;
  --border:#D6DDE8; --ink:#182236; --ink-secondary:#5A6B84; --ink-faint:#8996AB;
  --accent:#1D5FA8; --accent-strong:#164A85; --accent-ink:#FFFFFF; --accent-tint:rgba(29,95,168,.11);
  --good:#12805F; --good-tint:rgba(18,128,95,.13);
  --warn:#A67C00; --warn-tint:rgba(166,124,0,.15);
  --critical:#B23A2A; --critical-tint:rgba(178,58,42,.12);
  --violet:#6D5BD0; --violet-tint:rgba(109,91,208,.13);
  --shadow:0 1px 2px rgba(24,34,54,.05), 0 10px 26px -14px rgba(24,34,54,.16);
}
/* El panel usa el tema claro de arriba por defecto, sin importar el modo
   oscuro/claro del sistema operativo de quien lo mira. El tema oscuro
   (clase .tema-oscuro en <body>, ver abajo) es una preferencia que cada
   usuario elige con el botón del sidebar — se guarda en localStorage y se
   aplica en todas las páginas, no es fijo de ninguna pantalla en particular. */
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'IBM Plex Sans',-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:14px; line-height:1.45;
}
h1,h2,h3{font-family:'Archivo',Arial,sans-serif; margin:0;}
a{color:var(--accent);}
.tnum{font-variant-numeric:tabular-nums;}

.auth-shell{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.auth-card{width:100%; max-width:380px; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:32px 28px; box-shadow:var(--shadow);}
.auth-brand{display:flex; align-items:center; gap:10px; margin-bottom:22px;}
.auth-mark{width:38px; height:38px; border-radius:10px; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-family:'Archivo'; font-weight:800; font-size:13px;}
.auth-title{font-size:18px; font-weight:700;}
.auth-sub{font-size:12.5px; color:var(--ink-secondary); margin-top:1px;}

label{display:block; font-size:12px; font-weight:600; color:var(--ink-secondary); margin:14px 0 6px;}
input[type=text],input[type=email],input[type=password],input[type=tel],select{
  width:100%; background:var(--surface-2); border:1px solid var(--border); border-radius:9px;
  padding:10px 12px; font-size:13.5px; font-family:inherit; color:var(--ink); outline:none;
}
input:focus,select:focus{border-color:var(--accent);}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--accent); color:var(--accent-ink); border:none; border-radius:9px;
  padding:11px 18px; font-family:'Archivo'; font-weight:700; font-size:14px; cursor:pointer; text-decoration:none;
}
.btn:hover{background:var(--accent-strong);}
.btn-block{width:100%; margin-top:18px;}
.btn-secondary{background:var(--surface-2); color:var(--ink); border:1px solid var(--border);}

.alert{padding:10px 13px; border-radius:9px; font-size:13px; margin-top:14px;}
.alert-error{background:var(--critical-tint); color:var(--critical);}
.alert-good{background:var(--good-tint); color:var(--good);}

.barra-progreso-track{background:var(--surface-2); border-radius:999px; height:10px; overflow:hidden;}
.barra-progreso-fill{background:var(--accent); height:100%; border-radius:999px; transition:width .2s ease; width:0%;}

.subnav{display:flex; gap:4px; margin-bottom:20px; border-bottom:1px solid var(--border); flex-wrap:wrap;}
.subnav a{padding:10px 14px; font-size:13px; font-weight:600; color:var(--ink-secondary); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px;}
.subnav a:hover{color:var(--ink);}
.subnav a.active{color:var(--accent); border-bottom-color:var(--accent);}

.page{max-width:1080px; margin:0 auto; padding:32px 24px;}
.page-header{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap;}
.card{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:22px; box-shadow:var(--shadow);}
.table-wrap{
  overflow-x:auto; position:relative;
  scrollbar-width:auto; scrollbar-color:var(--ink-faint) var(--surface-2);
}
.table-wrap::-webkit-scrollbar{height:11px;}
.table-wrap::-webkit-scrollbar-track{background:var(--surface-2); border-radius:6px;}
.table-wrap::-webkit-scrollbar-thumb{background:var(--ink-faint); border-radius:6px; border:2px solid var(--surface-2); background-clip:padding-box;}
.table-wrap::-webkit-scrollbar-thumb:hover{background:var(--ink-secondary);}
table{width:100%; border-collapse:collapse; font-size:13.3px; min-width:640px;}
th{text-align:left; color:var(--ink-secondary); font-weight:600; text-transform:uppercase; font-size:10.7px; letter-spacing:.045em; padding:0 12px 10px; border-bottom:1px solid var(--border);}
td{padding:12px; border-bottom:1px solid var(--border);}
td.num, th.num{text-align:right;}
tbody tr:last-child td{border-bottom:none;}
th.col-sticky, td.col-sticky{position:sticky; right:0; background:var(--surface); box-shadow:-6px 0 8px -6px rgba(24,34,54,.18);}
tbody tr:hover td.col-sticky{background:var(--surface-2);}
.prod-link{color:inherit; text-decoration:none;}
.prod-link:hover{color:var(--accent); text-decoration:underline;}
.chip{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:700;}
.chip::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;}
.chip-good{background:var(--good-tint); color:var(--good);}
.chip-warn{background:var(--warn-tint); color:var(--warn);}
.chip-critical{background:var(--critical-tint); color:var(--critical);}
.chip-info{background:var(--accent-tint); color:var(--accent);}
.chip-neutral{background:var(--surface-3); color:var(--ink-secondary);}
.chip-neutral::before{display:none;}

.switch{position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0;}
.switch input{opacity:0; width:0; height:0; position:absolute;}
.switch .slider{position:absolute; inset:0; background:var(--surface-3); border:1px solid var(--border); border-radius:999px; cursor:pointer; transition:background .15s ease;}
.switch .slider::before{content:""; position:absolute; width:16px; height:16px; left:2px; top:2px; background:var(--surface); border-radius:50%; transition:transform .15s ease; box-shadow:0 1px 2px rgba(0,0,0,.25);}
.switch input:checked + .slider{background:var(--good); border-color:var(--good);}
.switch input:checked + .slider::before{transform:translateX(18px); background:#fff;}
.switch input:focus-visible + .slider{outline:2px solid var(--accent); outline-offset:2px;}
.top-actions{display:flex; gap:10px; align-items:center;}
.muted{color:var(--ink-secondary); font-size:12.5px;}
.stat-strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px;}
.stat-tile{border:1px solid var(--border); border-radius:12px; padding:14px 16px; background:var(--surface-2);}

.pos-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:20px; align-items:start;}
.pos-grid > div{min-width:0;}
@media (max-width:820px){
  .pos-grid{grid-template-columns:1fr;}
  .pos-grid > form{order:-1;}
  .pos-cart{top:8px; z-index:5;}
  .pos-items{max-height:38vh;}
}
.pos-section-label{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-secondary); margin-bottom:10px;}
.pos-items{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(122px,1fr)); gap:7px;
  max-height:54vh; overflow-y:auto; padding:2px 6px 2px 2px; margin-right:-6px; align-content:start;
}
.pos-item-btn{
  display:flex; flex-direction:column; gap:5px; text-align:left; min-width:0; height:100%;
  background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:8px 9px;
  font-family:inherit; color:var(--ink); cursor:pointer;
}
.pos-item-btn:hover{border-color:var(--accent); background:var(--accent-tint);}
.pos-item-btn:disabled{opacity:.55; cursor:not-allowed;}
.pib-img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:6px; background:var(--surface-3); flex-shrink:0;}
.pib-name{
  font-size:12px; font-weight:600; line-height:1.3;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.pib-sku{font-size:10px; color:var(--ink-faint); font-family:'IBM Plex Mono',monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pib-meta{display:flex; align-items:center; justify-content:space-between; gap:5px; margin-top:auto;}
.pib-price{font-size:12px; font-weight:700; color:var(--accent); flex-shrink:0;}
.pib-stock{font-size:10.3px; color:var(--ink-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pib-stock.chip{font-size:9.5px; padding:1px 6px;}
.pos-cart{background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:16px; display:flex; flex-direction:column; position:sticky; top:16px;}
.pos-cart-list{display:flex; flex-direction:column; gap:8px; min-height:40px; margin-bottom:8px;}
.pos-cart-row{display:flex; flex-direction:column; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:8px 10px; font-size:12.5px;}
.pcr-top{display:flex; align-items:center; gap:8px;}
.pos-cart-row .pcr-name{flex:1; font-weight:600;}
.pos-cart-row .pcr-remove{border:none; background:none; color:var(--ink-faint); cursor:pointer; font-size:15px; line-height:1; padding:2px 4px;}
.pos-cart-row .pcr-remove:hover{color:var(--critical);}
.pcr-editrow{display:flex; align-items:center; gap:6px;}
.pcr-cant-input,.pcr-precio-input{
  width:64px; background:var(--surface-2); border:1px solid var(--border); border-radius:6px;
  padding:4px 6px; font-size:12px; font-family:inherit; color:var(--ink); text-align:right;
}
.pcr-subtotal{margin-left:auto; font-weight:700;}
.pos-cart-subrow{display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--ink-secondary); padding:3px 2px;}
.pos-cart-subrow input{width:56px; padding:4px 6px; text-align:right; font-size:12.5px;}
.pos-cart-total{display:flex; justify-content:space-between; align-items:center; font-family:'Archivo'; font-weight:800; font-size:18px; padding:10px 2px; border-top:1px solid var(--border); margin-top:2px;}
.pos-pay-row{display:flex; gap:6px; margin-top:12px; flex-wrap:wrap;}
.pos-pay-btn{flex:1; border:1px solid var(--border); background:var(--surface); color:var(--ink-secondary); font-size:12px; font-weight:600; padding:8px 6px; border-radius:8px; cursor:pointer; white-space:nowrap;}
.pos-pay-btn.active{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.pos-charge-btn{
  margin-top:12px; width:100%; background:var(--accent); color:var(--accent-ink); border:none; border-radius:9px;
  padding:12px; font-family:'Archivo'; font-weight:700; font-size:14.5px; cursor:pointer;
}
.pos-charge-btn:disabled{background:var(--surface-3); color:var(--ink-faint); cursor:not-allowed;}

/* ---------- dashboard ---------- */
.kpi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px;}
.kpi-card{
  display:flex; flex-direction:column; gap:10px; background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:16px 18px; box-shadow:var(--shadow); text-decoration:none; color:inherit;
  transition:border-color .15s ease, transform .1s ease;
}
a.kpi-card:hover{border-color:var(--accent); transform:translateY(-1px);}
.kpi-card .kpi-top{display:flex; align-items:center; justify-content:space-between;}
.kpi-card .kpi-icon{width:32px; height:32px; border-radius:9px; background:var(--accent-tint); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.kpi-card .kpi-icon svg{width:17px; height:17px;}
.kpi-card.kpi-warn .kpi-icon{background:var(--warn-tint); color:var(--warn);}
.kpi-card.kpi-critical .kpi-icon{background:var(--critical-tint); color:var(--critical);}
.kpi-card .kpi-value{font-family:'Archivo'; font-weight:800; font-size:22px;}
.kpi-card .kpi-label{font-size:12px; color:var(--ink-secondary);}

.dash-grid{display:grid; grid-template-columns:1.6fr 1fr; gap:18px; align-items:start;}
.dash-grid > *{min-width:0;}
@media (max-width:900px){.dash-grid{grid-template-columns:1fr;}}
.mini-title, .mini-sub{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.card-header{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap;}
.card-title{font-size:15px; font-weight:700;}
.card-sub{font-size:12px; color:var(--ink-secondary); margin-top:2px;}

.mini-list{display:flex; flex-direction:column;}
.mini-row{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border);}
.mini-row:last-child{border-bottom:none; padding-bottom:0;}
.mini-time{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-secondary); width:42px; flex-shrink:0;}
.mini-main{min-width:0; flex:1;}
.mini-title{font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mini-sub{font-size:11.5px; color:var(--ink-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mini-empty{font-size:12.5px; color:var(--ink-faint); padding:6px 0;}

.filter-btns{display:flex; gap:6px; flex-wrap:wrap;}
.filter-btn{border:1px solid var(--border); background:var(--surface); color:var(--ink-secondary); font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:999px; cursor:pointer; text-decoration:none;}
.filter-btn.active{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}

.chart-wrap{position:relative;}
.chart-svg{width:100%; height:auto; display:block; overflow:visible;}

/* ---------- sidebar navigation ---------- */
.app{display:flex; min-height:100vh; align-items:stretch;}
.sidebar{
  width:224px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; position:sticky; top:0; align-self:flex-start; height:100vh; overflow-y:auto;
}
.sidebar-brand{display:flex; align-items:center; gap:10px; padding:20px 16px 14px; text-decoration:none; color:var(--ink);}
.sidebar-logo{width:32px; height:32px; border-radius:9px; object-fit:cover; flex-shrink:0;}
.sidebar-logo-fallback{width:32px; height:32px; border-radius:9px; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-family:'Archivo'; font-weight:800; font-size:12.5px; flex-shrink:0;}
.sidebar-name{font-family:'Archivo'; font-weight:700; font-size:13.8px; line-height:1.25;}
.sidebar-clock{padding:2px 16px 16px; cursor:default;}
.sidebar-clock-time{font-family:'Archivo'; font-weight:800; font-size:28px; line-height:1; color:var(--ink);}
.sidebar-clock-date{font-size:12.5px; font-weight:600; color:var(--ink-secondary); margin-top:4px;}
.sidebar-nav{padding:4px 10px; display:flex; flex-direction:column; gap:2px; flex:1;}
.sidebar-link{display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px; color:var(--ink-secondary); font-weight:500; font-size:13.2px; text-decoration:none;}
.sidebar-link svg{width:17px; height:17px; flex-shrink:0;}
.sidebar-link:hover{background:var(--surface-2); color:var(--ink);}
.sidebar-link.active{background:var(--accent); color:var(--accent-ink); font-weight:600;}
.sidebar-link-accent:not(.active){color:var(--accent);}
.sidebar-divider{height:1px; background:var(--border); margin:8px 10px;}
.sidebar-footer{padding:12px 16px 16px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:8px;}
.sidebar-footer span{font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sidebar-footer a{font-size:11.5px; color:var(--ink-secondary); text-decoration:none; flex-shrink:0;}
.sidebar-footer a:hover{color:var(--critical);}
.theme-toggle{
  flex-shrink:0; width:30px; height:30px; border-radius:8px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--ink-secondary); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.theme-toggle:hover{border-color:var(--accent); color:var(--accent);}
.theme-toggle svg{width:16px; height:16px;}
.theme-toggle-luna{display:none;}
.theme-toggle.activo .theme-toggle-sol{display:none;}
.theme-toggle.activo .theme-toggle-luna{display:block;}
.main{flex:1; min-width:0;}

.aviso-pago{
  display:flex; align-items:center; gap:10px; justify-content:center;
  padding:9px 20px; font-size:12.5px; font-weight:600; text-align:center;
  background:var(--warn-tint); color:var(--warn); border-bottom:1px solid var(--border);
}
.aviso-pago svg{width:16px; height:16px; flex-shrink:0;}
.aviso-pago-critico{background:var(--critical-tint); color:var(--critical);}
@media (min-width:761px){
  .aviso-pago{position:fixed; top:0; left:224px; right:0; z-index:35;}
}

.mobile-topbar{display:none;}
.mobile-menu-btn{display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:9px; border:1px solid var(--border); background:var(--surface); color:var(--ink); cursor:pointer; flex-shrink:0;}
.mobile-menu-btn svg{width:19px; height:19px;}
.mobile-topbar-brand{font-family:'Archivo'; font-weight:700; font-size:14.5px;}
.mobile-topbar-clock{margin-left:auto; font-family:'Archivo'; font-size:17px; font-weight:800; color:var(--ink);}
.sidebar-overlay{display:none;}

@media (max-width:760px){
  .app{display:block;}
  .mobile-topbar{
    display:flex; align-items:center; gap:12px; padding:10px 16px;
    background:var(--surface); border-bottom:1px solid var(--border);
    position:sticky; top:0; z-index:30;
  }
  .sidebar-overlay.visible{
    display:block; position:fixed; inset:0; background:rgba(14,20,32,.5); z-index:40;
  }
  .sidebar{
    position:fixed; top:0; left:0; width:250px; height:100vh; z-index:50;
    transform:translateX(-100%); transition:transform .2s ease;
    flex-direction:column; align-items:stretch; overflow-x:hidden; overflow-y:auto;
    border-right:1px solid var(--border); border-bottom:none;
  }
  .sidebar.abierta{transform:translateX(0);}
  .sidebar-nav{flex-direction:column; flex:1;}
  .sidebar-footer{border-top:1px solid var(--border);}
}

/* ---------- accesibilidad: foco visible en toda la app ---------- */
a:focus-visible, button:focus-visible, .btn:focus-visible, .pos-item-btn:focus-visible,
input:focus-visible, select:focus-visible, .sidebar-link:focus-visible, .filter-btn:focus-visible,
.pos-pay-btn:focus-visible, .tenant-copy-link:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

/* ---------- jerarquía de botones ---------- */
.btn-ghost{background:none; color:var(--ink-secondary); border:1px solid transparent;}
.btn-ghost:hover{background:var(--surface-2); color:var(--ink);}
.btn-danger{background:var(--critical); color:#fff;}
.btn-danger:hover{background:#8f2e21;}
.btn-success{background:var(--good); color:#fff;}
.btn-success:hover{background:#0d6b4f;}
.btn:disabled,.btn[disabled]{opacity:.55; cursor:not-allowed; pointer-events:none;}

/* ---------- estado de carga (botones e inline) ---------- */
.is-loading{position:relative; color:transparent !important; pointer-events:none;}
.is-loading::after{
  content:""; position:absolute; inset:0; margin:auto; width:15px; height:15px;
  border:2px solid rgba(255,255,255,.5); border-top-color:#fff; border-radius:50%;
  animation:btn-spin .6s linear infinite;
}
.btn-secondary.is-loading::after,.btn-ghost.is-loading::after{border-color:var(--border); border-top-color:var(--ink-secondary);}
@keyframes btn-spin{to{transform:rotate(360deg);}}

/* ---------- skeleton (placeholder de carga) ---------- */
.skeleton{background:linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size:400% 100%; animation:skeleton-shimmer 1.4s ease infinite; border-radius:6px;}
@keyframes skeleton-shimmer{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* ---------- notificaciones: variantes que faltaban ---------- */
.alert-warn{background:var(--warn-tint); color:var(--warn);}
.alert-info{background:var(--accent-tint); color:var(--accent);}
.alert{display:flex; align-items:center; gap:8px;}

/* ---------- tablas: hover, zebra sutil y orden ---------- */
tbody tr:hover{background:var(--surface-2);}
th.sortable{cursor:pointer; user-select:none; white-space:nowrap;}
th.sortable:hover{color:var(--ink);}
th.sortable .sort-arrow{display:inline-block; margin-left:3px; opacity:.4; font-size:9px;}
th.sortable.sorted-asc .sort-arrow,th.sortable.sorted-desc .sort-arrow{opacity:1; color:var(--accent);}

/* ---------- estado vacío ---------- */
.empty-state{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 20px; color:var(--ink-secondary);}
.empty-state svg{width:34px; height:34px; margin-bottom:10px; color:var(--ink-faint);}
.empty-state-title{font-weight:600; color:var(--ink); font-size:13.5px; margin-bottom:3px;}
.empty-state-sub{font-size:12.5px; max-width:320px;}

/* ---------- buscador (protagonista en listados y POS) ---------- */
.search-input{position:relative;}
.search-input svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--ink-faint); pointer-events:none;}
.search-input input{padding-left:36px !important;}
.search-input .search-clear{position:absolute; right:8px; top:50%; transform:translateY(-50%); border:none; background:none; color:var(--ink-faint); cursor:pointer; font-size:15px; padding:4px;}

/* ---------- filtros de tabla ---------- */
.table-toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px;}
.table-toolbar .search-input{flex:1; min-width:200px;}
.table-toolbar select{width:auto; min-width:140px;}

/* ---------- paginación ---------- */
.pagination{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:14px; flex-wrap:wrap;}
.pagination-info{font-size:12px; color:var(--ink-secondary);}
.pagination-pages{display:flex; gap:4px;}
.pagination-pages button,.pagination-pages a{
  min-width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background:var(--surface); color:var(--ink-secondary); border-radius:7px;
  font-size:12.5px; font-weight:600; cursor:pointer; text-decoration:none;
}
.pagination-pages button:hover,.pagination-pages a:hover{border-color:var(--accent); color:var(--accent);}
.pagination-pages button.active{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.pagination-pages button:disabled{opacity:.4; cursor:not-allowed;}

/* ---------- dropdown (menú contextual simple) ---------- */
.dropdown{position:relative; display:inline-block;}
.dropdown-menu{
  position:absolute; right:0; top:calc(100% + 4px); min-width:170px; background:var(--surface);
  border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); padding:6px; z-index:20;
}
.dropdown-menu a,.dropdown-menu button{
  display:flex; width:100%; align-items:center; gap:8px; padding:8px 10px; border-radius:7px; border:none;
  background:none; text-align:left; font-size:13px; color:var(--ink); text-decoration:none; cursor:pointer; font-family:inherit;
}
.dropdown-menu a:hover,.dropdown-menu button:hover{background:var(--surface-2);}
.dropdown-menu .danger{color:var(--critical);}

/* ---------- modal ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(14,20,32,.5); display:flex; align-items:center; justify-content:center; padding:20px; z-index:100;}
.modal{background:var(--surface); border-radius:16px; max-width:440px; width:100%; box-shadow:var(--shadow); max-height:90vh; overflow-y:auto;}
.modal-header{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:18px 20px 0;}
.modal-title{font-family:'Archivo'; font-weight:700; font-size:16px;}
.modal-close{border:none; background:none; color:var(--ink-faint); font-size:18px; cursor:pointer; padding:2px 6px;}
.modal-body{padding:14px 20px; font-size:13.5px; color:var(--ink-secondary);}
.modal-footer{display:flex; justify-content:flex-end; gap:8px; padding:0 20px 20px;}

/* ---------- badge de marca / info secundaria en tablas ---------- */
.text-cell-sub{display:block; font-size:11.5px; color:var(--ink-secondary); margin-top:1px;}

/* ---------- tabla responsive: colapsa a tarjetas en mobile ---------- */
@media (max-width:680px){
  .table-cards table, .table-cards thead, .table-cards tbody, .table-cards th, .table-cards td, .table-cards tr{display:block;}
  table.table-cards{min-width:0;}
  .table-cards thead{display:none;}
  .table-cards tbody tr{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin-bottom:10px;}
  .table-cards tbody tr:hover{background:var(--surface);}
  .table-cards td{border-bottom:none; padding:5px 0; display:flex; justify-content:space-between; align-items:center; gap:10px; text-align:right;}
  .table-cards td::before{content:attr(data-label); font-size:11px; font-weight:600; color:var(--ink-secondary); text-align:left;}
  .table-cards td:first-child{padding-top:0;}
  .table-cards td.col-sticky{position:static; box-shadow:none; display:block; text-align:left;}
}

/* ---------- agenda: semana y mes ---------- */
.agenda-grid-wrap{overflow-x:auto;}
.agenda-semana{display:grid; grid-template-columns:repeat(7,minmax(130px,1fr)); gap:8px; min-width:900px;}
.agenda-semana-col{border:1px solid var(--border); border-radius:12px; background:var(--surface); padding:10px; min-height:120px;}
.agenda-semana-col.hoy{border-color:var(--accent); background:var(--accent-tint);}
.agenda-semana-header{font-family:'Archivo'; font-weight:700; font-size:12.5px; margin-bottom:8px; text-decoration:none; color:var(--ink); display:block;}
.agenda-semana-header:hover{color:var(--accent);}
.agenda-mini-turno{background:var(--surface-2); border-radius:7px; padding:5px 7px; font-size:11px; margin-bottom:5px;}
.agenda-mini-turno .hora{font-weight:700; font-variant-numeric:tabular-nums;}

.calendario-mes{display:grid; grid-template-columns:repeat(7,minmax(90px,1fr)); gap:6px; min-width:760px;}
.calendario-dow{font-size:10.5px; font-weight:700; text-transform:uppercase; color:var(--ink-secondary); text-align:center; padding-bottom:4px;}
.calendario-dia{border:1px solid var(--border); border-radius:10px; padding:8px; min-height:76px; background:var(--surface); text-decoration:none; color:var(--ink); display:block;}
.calendario-dia:hover{border-color:var(--accent);}
.calendario-dia.fuera-mes{opacity:.35;}
.calendario-dia.hoy{border-color:var(--accent); background:var(--accent-tint);}
.calendario-dia-numero{font-weight:700; font-size:13px;}
.calendario-dia-badge{margin-top:6px; display:inline-flex;}

.dropzone{
  border:2px dashed var(--border); border-radius:12px; padding:22px; text-align:center;
  background:var(--surface-2); cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.dropzone.is-dragover{border-color:var(--accent); background:var(--accent-tint);}
.dropzone .dz-title{font-size:13px; font-weight:600;}
.dropzone .dz-sub{font-size:12px; color:var(--ink-secondary); margin-top:3px;}
.dropzone input[type=file]{display:none;}
.logo-preview{width:64px; height:64px; border-radius:12px; object-fit:cover; border:1px solid var(--border); background:var(--surface);}

.color-palette{display:flex; gap:9px; flex-wrap:wrap; margin:8px 0 4px;}
.color-swatch{
  width:32px; height:32px; border-radius:9px; border:2px solid var(--border); cursor:pointer; padding:0;
  transition:transform .1s ease; flex-shrink:0;
}
.color-swatch:hover{transform:scale(1.1); border-color:var(--ink-secondary);}

/* ---------------------------------------------------------------------
   Tema oscuro: se activa con el botón del sidebar (ver sidebar.php), se
   guarda en localStorage por navegador, y se aplica en todas las páginas
   que incluyen el sidebar — no depende del modo oscuro del sistema
   operativo de quien lo mira.
--------------------------------------------------------------------- */
.tema-oscuro{
  --bg:#0E1420; --surface:#161D2C; --surface-2:#1E2738; --surface-3:#283349;
  --border:#313E56; --ink:#E9EDF5; --ink-secondary:#A7B2C6; --ink-faint:#76829C;
  --good:#1F8F5E; --good-tint:rgba(31,143,94,.2);
  --warn:#AD8900; --warn-tint:rgba(173,137,0,.22);
  --critical:#C24A5E; --critical-tint:rgba(194,74,94,.2);
  --violet:#8B7AE0; --violet-tint:rgba(139,122,224,.2);
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 14px 30px -16px rgba(0,0,0,.55);
  background:var(--bg); color:var(--ink);
}

/* Barra superior del dashboard: búsqueda + notificaciones + usuario. */
.topbar{display:flex; align-items:center; gap:16px; margin-bottom:26px;}
.topbar-search{flex:1; max-width:420px; position:relative;}
.topbar-search input{
  width:100%; background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
  padding:10px 14px 10px 38px; font-size:13.5px; font-family:inherit; color:var(--ink); outline:none;
}
.topbar-search input:focus{border-color:var(--accent);}
.topbar-search svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--ink-faint); pointer-events:none;}
.topbar-actions{display:flex; align-items:center; gap:14px; margin-left:auto; flex-shrink:0;}
.icon-btn{
  position:relative; width:38px; height:38px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface); color:var(--ink-secondary); display:flex; align-items:center; justify-content:center;
  cursor:pointer; text-decoration:none; flex-shrink:0;
}
.icon-btn svg{width:18px; height:18px;}
.icon-btn:hover{color:var(--ink); border-color:var(--accent);}
.icon-btn .badge-dot{
  position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px; border-radius:999px;
  background:var(--critical); color:#fff; font-size:10px; font-weight:700; line-height:16px; text-align:center;
  border:2px solid var(--bg);
}
.topbar-user{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); flex-shrink:0;}
.avatar-circle{
  width:34px; height:34px; border-radius:50%; background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; font-family:'Archivo'; font-weight:700; font-size:13px; flex-shrink:0;
}
.topbar-user-info{line-height:1.25; white-space:nowrap;}
.topbar-user-name{font-size:13px; font-weight:700;}
.topbar-user-rol{font-size:11px; color:var(--ink-secondary); text-transform:capitalize;}
@media (max-width:700px){
  .topbar-search{display:none;}
  .topbar-user-info{display:none;}
}

/* Saludo + fecha del dashboard. */
.dash-greeting{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px;}
.dash-greeting h1{font-size:23px;}
.date-pill{
  display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border);
  border-radius:11px; padding:9px 14px; font-size:12.5px; font-weight:600; color:var(--ink-secondary); white-space:nowrap;
}
.date-pill svg{width:15px; height:15px; color:var(--ink-faint); flex-shrink:0;}

/* Variación % en las tarjetas de ventas del dashboard. */
.kpi-delta{display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:700; padding:2px 7px; border-radius:999px;}
.kpi-delta svg{width:9px; height:9px;}
.kpi-delta.up{background:var(--good-tint); color:var(--good);}
.kpi-delta.down{background:var(--critical-tint); color:var(--critical);}

/* Acciones rápidas. */
.quick-actions{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px;}
.qa-btn{
  display:flex; align-items:center; gap:10px; padding:13px 16px; border-radius:11px; border:none;
  font-family:'Archivo'; font-weight:700; font-size:13px; cursor:pointer; text-decoration:none; color:#fff;
}
.qa-btn svg{width:17px; height:17px; flex-shrink:0;}
.qa-btn.qa-good{background:var(--good);}
.qa-btn.qa-accent{background:var(--accent); color:var(--accent-ink);}
.qa-btn.qa-violet{background:var(--violet);}
.qa-btn.qa-warn{background:var(--warn);}
.qa-btn.qa-neutral{background:var(--surface-3); color:var(--ink);}

/* Feed de actividad reciente. */
.activity-row{display:flex; align-items:flex-start; gap:11px; padding:10px 0; border-bottom:1px solid var(--border);}
.activity-row:last-child{border-bottom:none; padding-bottom:0;}
.activity-icon{width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.activity-icon svg{width:15px; height:15px;}
.activity-icon.ai-good{background:var(--good-tint); color:var(--good);}
.activity-icon.ai-accent{background:var(--accent-tint); color:var(--accent);}
.activity-icon.ai-violet{background:var(--violet-tint); color:var(--violet);}
.activity-icon.ai-warn{background:var(--warn-tint); color:var(--warn);}
.activity-icon.ai-critical{background:var(--critical-tint); color:var(--critical);}
.activity-main{flex:1; min-width:0;}
.activity-text{font-size:12.6px; font-weight:500;}
.activity-time{font-size:11px; color:var(--ink-faint); white-space:nowrap; flex-shrink:0; padding-top:2px;}

/* Miniatura de producto en la tabla de "Productos recientes". */
.prod-cell{display:flex; align-items:center; gap:10px;}
.prod-thumb{width:34px; height:34px; border-radius:8px; object-fit:cover; background:var(--surface-2); flex-shrink:0;}
.prod-thumb-fallback{
  width:34px; height:34px; border-radius:8px; background:var(--surface-3); color:var(--ink-secondary);
  display:flex; align-items:center; justify-content:center; font-family:'Archivo'; font-weight:700; font-size:11px; flex-shrink:0;
}