*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-body);background:var(--bg-dark);color:var(--text-primary);min-height:100dvh;font-size:15px;line-height:1.6}
img{display:block;max-width:100%}button{cursor:pointer;font-family:inherit}a{text-decoration:none;color:inherit}input,select,textarea{font-family:inherit}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:var(--accent-border);border-radius:99px}

/* ── Layout ────────────────────────────────────────────────────────────────── */
.app-shell{display:flex;min-height:100dvh}

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
.sidebar{
  width:230px;min-width:230px;
  background:var(--bg-sidebar);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100dvh;
  overflow-y:auto;z-index:200;
  transition:transform var(--transition);
}
.sidebar-logo{
  padding:22px 20px 18px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px;
}
.sidebar-logo .logo-mark{
  width:36px;height:36px;border-radius:50%;
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;color:#000;flex-shrink:0;
}
.sidebar-logo span{font-size:15px;font-weight:600}

/* nav links generados por sidebar.js */
.sidebar-nav{list-style:none;padding:10px 0;flex:1}
.sidebar-nav li a{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;margin:1px 8px;
  border-radius:var(--radius-sm);
  font-size:13.5px;color:var(--text-muted);
  transition:background var(--transition),color var(--transition);
}
.sidebar-nav li a:hover{background:rgba(255,255,255,.05);color:var(--text-primary)}
.sidebar-nav li a.active{
  background:var(--accent-soft);color:var(--accent);
  border:1px solid var(--accent-border);
}
.sidebar-nav li a i{font-size:16px;width:18px;text-align:center;flex-shrink:0}

/* también soportar .nav-item para cualquier uso directo */
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 16px;margin:1px 8px;border-radius:var(--radius-sm);font-size:13.5px;color:var(--text-muted);transition:background var(--transition),color var(--transition);cursor:pointer}
.nav-item:hover{background:rgba(255,255,255,.05);color:var(--text-primary)}
.nav-item.active{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-border)}
.nav-item i{font-size:16px;width:18px;text-align:center;flex-shrink:0}

.sidebar-divider{height:1px;background:var(--border,rgba(255,255,255,.08));margin:8px 16px;list-style:none}
.sidebar-section-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted,#888);padding:4px 20px 2px;list-style:none}

.sidebar-footer{
  margin-top:auto;padding:16px;
  border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:8px;
}
.sidebar-link-index{
  display:flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:var(--radius-sm);
  font-size:13px;color:var(--text-muted);
  transition:background var(--transition),color var(--transition);
}
.sidebar-link-index:hover{background:rgba(255,255,255,.05);color:var(--text-primary)}
.sidebar-link-index i{font-size:15px}
.btn-logout{
  display:flex;align-items:center;gap:8px;
  width:100%;padding:9px 14px;
  border-radius:var(--radius-sm);
  background:transparent;border:1px solid rgba(224,92,92,.25);
  font-size:13px;color:var(--danger);
  transition:background var(--transition),border-color var(--transition);
}
.btn-logout:hover{background:rgba(224,92,92,.1);border-color:rgba(224,92,92,.5)}
.btn-logout i{font-size:15px}

/* ── Sidebar overlay (mobile) ──────────────────────────────────────────────── */
.sidebar-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.6);
  z-index:199;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  opacity:0;
  transition:opacity var(--transition);
}
.sidebar-overlay.open{opacity:1}

/* ── Main content ──────────────────────────────────────────────────────────── */
.main-content{flex:1;display:flex;flex-direction:column;min-width:0;overflow-x:hidden}
.topbar{
  background:var(--bg-sidebar);border-bottom:1px solid var(--border);
  padding:12px 24px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:99;
}
.topbar-title{font-size:16px;font-weight:600}
.topbar-actions{display:flex;gap:10px;align-items:center}
.page-body{padding:24px;flex:1}

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-card)}
.card-header{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.card-header h5{font-size:14px;font-weight:600}.card-body{padding:20px}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:500;border:1px solid transparent;transition:all var(--transition);white-space:nowrap}
.btn-primary{background:var(--accent);color:#000;border-color:var(--accent)}.btn-primary:hover{background:var(--accent-hover)}
.btn-outline{background:transparent;color:var(--text-primary);border-color:var(--border)}.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.btn-danger{background:transparent;color:var(--danger);border-color:rgba(224,92,92,.35)}.btn-danger:hover{background:rgba(224,92,92,.12)}
.btn-sm{padding:6px 12px;font-size:12px}
.btn-icon{
  padding:8px;border-radius:var(--radius-sm);
  background:transparent;border:1px solid var(--border);
  color:var(--text-muted);transition:all var(--transition);
}
.btn-icon:hover{border-color:var(--accent);color:var(--accent)}

/* ── Hamburger btn (solo visible en mobile vía JS) ─────────────────────────── */
#menu-btn{
  padding:7px 10px;
  border-radius:var(--radius-sm);
  background:transparent;
  border:1px solid var(--border);
  color:var(--text-muted);
  line-height:1;
  transition:all var(--transition);
}
#menu-btn:hover{border-color:var(--accent);color:var(--accent)}

/* ── Forms ──────────────────────────────────────────────────────────────────── */
.form-group{margin-bottom:16px}.form-group label{display:block;font-size:12.5px;color:var(--text-muted);margin-bottom:6px;font-weight:500}
.form-control{width:100%;background:var(--bg-card2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;color:var(--text-primary);font-size:14px;transition:border-color var(--transition);outline:none}
.form-control:focus{border-color:var(--accent)}.form-control::placeholder{color:var(--text-faint)}
select option{background:var(--bg-card2) !important;color:var(--text-primary) !important}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ── Tables ─────────────────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;border-radius:var(--radius-md)}
/* Scroll horizontal fluido en táctil, sin disparar el "volver atrás" del navegador */
.table-wrap,.table-card{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
table{width:100%;border-collapse:collapse}
thead th{padding:11px 16px;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);border-bottom:1px solid var(--border);background:var(--bg-card2);white-space:nowrap}
tbody tr{border-bottom:1px solid var(--border);transition:background var(--transition)}
tbody tr:last-child{border-bottom:none}tbody tr:hover{background:rgba(255,255,255,.03)}
tbody td{padding:12px 16px;font-size:13.5px;vertical-align:middle}
.td-img{width:44px;height:44px;border-radius:var(--radius-sm);object-fit:cover;border:1px solid var(--border)}
.td-img-placeholder{width:44px;height:44px;border-radius:var(--radius-sm);background:var(--bg-card2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-faint);font-size:18px}

/* ── Badges ─────────────────────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:600}
.badge-gold{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-border)}
.badge-success{background:rgba(92,184,92,.12);color:var(--success);border:1px solid rgba(92,184,92,.3)}
.badge-info{background:rgba(91,192,222,.12);color:var(--info);border:1px solid rgba(91,192,222,.3)}
.badge-danger{background:rgba(224,92,92,.12);color:var(--danger);border:1px solid rgba(224,92,92,.3)}
.badge-warning{background:rgba(245,158,11,.12);color:#f59e0b;border:1px solid rgba(245,158,11,.3)}
.badge-muted{background:rgba(255,255,255,.06);color:var(--text-muted);border:1px solid var(--border)}

/* ── Modals ─────────────────────────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;opacity:0;visibility:hidden;transition:all var(--transition)}
.modal-overlay.open{opacity:1;visibility:visible}
body.modal-open { overflow: hidden; }
.modal-box{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:560px;max-height:90vh;overflow-y:auto;transform:scale(.96) translateY(8px);transition:transform var(--transition)}
.modal-overlay.open .modal-box{transform:scale(1) translateY(0)}
.modal-header{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.modal-header h4{font-size:15px;font-weight:600}.modal-body{padding:22px}
.modal-footer{padding:16px 22px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end}

/* ── Toasts ─────────────────────────────────────────────────────────────────── */
.toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:var(--radius-md);font-size:13.5px;font-weight:500;box-shadow:0 8px 32px rgba(0,0,0,.5);animation:toastIn .25s ease forwards;min-width:260px;max-width:380px}
.toast.success{background:#1a2e1a;border:1px solid rgba(92,184,92,.35);color:var(--success)}
.toast.error{background:#2e1a1a;border:1px solid rgba(224,92,92,.35);color:var(--danger)}
.toast.info{background:#1a221e;border:1px solid var(--accent-border);color:var(--accent)}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

/* ── Filters ────────────────────────────────────────────────────────────────── */
.filter-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.search-input-wrap{position:relative;flex:1;min-width:200px}
.search-input-wrap i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-faint);font-size:14px;pointer-events:none}
.search-input-wrap input{padding-left:36px}

@media (max-width: 768px) {
  .filter-bar { gap: 8px; }
  /* Buscador y botones en el mismo renglón: antes cada botón tomaba una fila
     completa y la página empezaba con tres renglones de controles. */
  .filter-bar .search-input-wrap { flex: 1 1 150px; min-width: 0; }
  .filter-bar select.form-control { flex: 1 1 calc(50% - 4px); max-width: none !important; }
  .filter-bar button { flex: 0 0 auto; min-height: 44px; }
  .filter-bar .fbtn-filtros { padding: 0 14px; }
}

/* Con inputs a 16px (obligado para que iOS no haga zoom), etiquetas como
   "Todas las Novedades" necesitan ~226px: en dos columnas se cortaban.
   Por debajo de 560px los filtros van a una sola columna. */
@media (max-width: 560px) {
  .filter-bar select.form-control { flex: 1 1 100%; min-width: 100%; }
}

/* ── Filtros agrupados en móvil ─────────────────────────────────────────────
   Con ocho filtros apilados (Perfumes) la barra medía más que la pantalla.
   admin-filtros.js mueve los selects aquí dentro y deja sólo este botón. */
.fbtn-filtros {
  display: none;
  align-items: center; gap: 7px;
  height: 44px; padding: 0 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-card2); border: 1px solid var(--border);
  color: var(--text-primary); font-size: 14px; font-weight: 500;
  white-space: nowrap;
}
.fbtn-filtros i { color: var(--accent); font-size: 15px; }
.fbtn-filtros.con-filtros { border-color: var(--accent-border); background: var(--accent-soft); }
.fbtn-badge {
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 99px; background: var(--accent); color: #000;
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.fbtn-badge[hidden] { display: none; }

.admin-filtros-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(0,0,0,.6);
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.admin-filtros-overlay.open { opacity: 1; visibility: visible; }

.admin-filtros-panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1201;
  max-height: 88dvh;
  display: flex; flex-direction: column;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transform: translateY(100%);
  transition: transform var(--transition);
}
.admin-filtros-panel.open { transform: translateY(0); }
body.filtros-open { overflow: hidden; }

.afp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.afp-title { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.afp-title i { color: var(--accent); }
.afp-close {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.06); border: 1px solid var(--border);
  color: var(--text-muted); display: flex; align-items: center; justify-content: center;
}

.afp-body {
  flex: 1; overflow-y: auto; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.afp-campo { display: flex; flex-direction: column; gap: 6px; }
.afp-campo > span {
  font-size: 11px; font-weight: 600; color: var(--accent);
  text-transform: uppercase; letter-spacing: .07em;
}
.afp-campo select { width: 100%; max-width: none !important; }

.afp-foot {
  display: flex; gap: 10px; flex-shrink: 0;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
}
.afp-clear, .afp-apply {
  height: 46px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; font-family: inherit;
}
.afp-clear {
  flex: 1; background: transparent; border: 1px solid var(--border); color: var(--text-muted);
}
.afp-apply {
  flex: 2; background: var(--accent); border: none; color: #000;
}

@media (max-width: 768px) {
  .fbtn-filtros { display: inline-flex; flex: 1 1 auto; justify-content: center; }
}

/* ── Empty state ────────────────────────────────────────────────────────────── */
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;padding:60px 20px;color:var(--text-muted)}
.empty-state i{font-size:48px;color:var(--text-faint);margin-bottom:16px}
.empty-state h3{font-size:15px;font-weight:600;color:var(--text-primary);margin-bottom:6px}
.empty-state p{font-size:13px;max-width:32ch}

/* ── Stat cards ─────────────────────────────────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.stat-card .stat-label{font-size:11.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.stat-card .stat-value{font-size:26px;font-weight:700}
.stat-card .stat-sub{font-size:12px;color:var(--text-faint)}
.stat-card .stat-icon{font-size:28px;color:var(--accent);opacity:.6;align-self:flex-end;margin-top:-8px}

/* ── Image / price helpers ──────────────────────────────────────────────────── */
.img-preview-wrap{width:100%;height:140px;border-radius:var(--radius-sm);border:2px dashed var(--border);background:var(--bg-card2);overflow:hidden}
.img-preview-wrap img{width:100%;height:100%;object-fit:cover}
.precios-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:8px}
.precio-item{background:var(--bg-card2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;text-align:center}
.precio-item label{font-size:11px;color:var(--accent);font-weight:600;display:block;margin-bottom:6px}
.precio-item input{text-align:center}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media(max-width:768px){
  /* Sidebar se convierte en drawer desde la izquierda */
  .sidebar{
    display:flex;
    position:fixed;left:0;top:0;height:100%;
    transform:translateX(-100%);
    z-index:200;
    box-shadow:4px 0 24px rgba(0,0,0,.6);
  }
  .sidebar.open{
    transform:translateX(0);
  }
  .sidebar-overlay{
    display:block;
    pointer-events:none;
  }
  .sidebar-overlay.open{
    pointer-events:auto;
  }
  /* El botón hamburguesa siempre visible en mobile — JS lo muestra vía style.display */
  #menu-btn{ display:flex !important; }

  .form-row{grid-template-columns:1fr}
  .precios-grid{grid-template-columns:1fr 1fr}
  .page-body{padding:16px}
  .stats-grid{grid-template-columns:1fr 1fr}
  .icon-btn-mobile > span:not(.badge) { display: none; }
  .icon-btn-mobile { padding: 6px 10px !important; }

  /* ── Topbar: las acciones bajan a su propia fila ──────────────────────────
     Antes se salían de la pantalla y quedaban inalcanzables, porque la barra
     no envolvía y .main-content recorta el desbordamiento horizontal. */
  .topbar{
    padding:10px 14px;
    flex-wrap:wrap;
    row-gap:10px;
  }
  .topbar > div{min-width:0}
  /* Las acciones envuelven en varias líneas en vez de scrollear: con scroll,
     el botón principal ("Nuevo Perfume", "Nueva Venta") quedaba fuera de vista
     y parecía que no existía. */
  .topbar > div:last-child:not(:only-child){
    margin-left:auto;
    justify-content:flex-end;
    flex-wrap:wrap;
    row-gap:8px;
  }
  /* Solo bajan a su propia fila cuando son muchas; con una o dos caben junto
     al título y no vale la pena gastar un renglón. */
  .topbar > div:last-child:not(:only-child):has(> :nth-child(3)){
    flex:1 1 100%;
    justify-content:flex-start;
    margin-left:0;
  }
  .topbar-title{font-size:15px}

  /* ── Inputs a 16px: por debajo de eso iOS Safari hace zoom al enfocar ───── */
  .form-control,
  .page-size-select,
  .topbar select,
  input,select,textarea{font-size:16px !important}

  /* ── Áreas táctiles ───────────────────────────────────────────────────── */
  #menu-btn,.btn-icon{
    min-width:44px;min-height:44px;
    align-items:center;justify-content:center;
  }
  .btn{min-height:40px}

  /* ── Tablas más compactas para que quepan más columnas ─────────────────── */
  thead th{padding:10px 12px;font-size:11px}
  tbody td{padding:10px 12px;font-size:13px}
  /* Tarjetas contenedoras de tablas/gráficas: menos aire en pantallas chicas.
     Se cualifica con .main-content porque algunas páginas definen .table-card
     en un <style> propio que, por orden de documento, ganaría al global. */
  .main-content .table-card,
  .main-content .chart-card{padding:14px}

  /* ── Modales como hoja inferior ───────────────────────────────────────── */
  .modal-overlay{padding:0;align-items:flex-end}
  .modal-box{
    width:100%;max-width:100%;max-height:92dvh;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  }
  /* Como hoja inferior, todos los modales van a ancho completo. Hace falta
     !important porque compiten dos fuentes que ganarían por cascada:
     los `style="max-width:360px"` inline del HTML, y los CSS por página
     (ej. ventas.css `.modal-xl{width:97vw}`) que se cargan después de este. */
  .modal-overlay .modal-box{width:100% !important;max-width:100% !important}
  /* El contenido ancho (tablas) ya scrollea en su propio wrapper: el modal
     nunca debe scrollear en horizontal por su cuenta. */
  .modal-box,.modal-body{overflow-x:hidden}
  .modal-header,.modal-footer{position:sticky;background:var(--bg-card);z-index:2}
  .modal-header{top:0}
  .modal-footer{bottom:0;flex-direction:column-reverse}
  .modal-footer .btn{width:100%;justify-content:center}
  /* Respetar el área segura de teléfonos con gesto/notch */
  .modal-footer{padding-bottom:calc(16px + env(safe-area-inset-bottom))}

  /* ── Toasts a ancho completo, sin desbordar ───────────────────────────── */
  .toast-container{left:12px;right:12px;bottom:12px}
  .toast{min-width:0;max-width:none;width:100%}

  /* ── Filas flex escritas con estilos inline ──────────────────────────────
     Muchas secciones arman filas (título + controles, pestañas, botoneras)
     con `style="display:flex"` sin flex-wrap, y en móvil lo que iba a la
     derecha quedaba recortado y sin forma de alcanzarlo. flex-wrap no altera
     nada mientras el contenido quepa: solo actúa cuando se desbordaría.
     row-gap únicamente separa las líneas que llegan a partirse. */
  .page-body div[style*="display:flex"],
  .page-body div[style*="display: flex"]{flex-wrap:wrap;row-gap:10px}
}

/* ── Teléfonos angostos ─────────────────────────────────────────────────────── */
@media(max-width:420px){
  .page-body{padding:12px}
  .stats-grid{grid-template-columns:1fr}
  .stat-card .stat-value{font-size:22px}
  .card-body{padding:16px}
  .card-header{padding:12px 16px}
  .modal-body{padding:18px}
}

/* ── POS Drawer (Canasta) ─────────────────────────────────────────────────── */
.pos-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);z-index:9000;opacity:0;pointer-events:none;transition:opacity var(--transition)}
.pos-overlay.open{opacity:1;pointer-events:auto}
.pos-drawer{position:fixed;top:0;right:0;bottom:0;width:100%;max-width:400px;background:var(--bg-card);border-left:1px solid var(--border);z-index:9010;display:flex;flex-direction:column;transform:translateX(100%);transition:transform var(--transition)}
.pos-drawer.open{transform:translateX(0)}

/* ── Admin POS Grid (Perfumes) ── */
.pos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  padding: 16px;
}
.pos-grid .pcard {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.pos-grid .pcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  border-color: var(--accent);
}
.pos-grid .pcard-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--bg-card2);
}
.pos-grid .pcard-body {
  padding: 12px;
}
.pos-grid .pcard-title {
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.pos-grid .pcard-sub {
  font-size: 11.5px;
  color: var(--text-muted);
}
@media (max-width: 480px) {
  .pos-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px;
  }
}

/* El logo ocupa todo el círculo (antes era el texto "FS" sobre dorado). */
.logo-mark img,.sidebar-logo .logo-mark img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* Etiquetas de sección del menú lateral */
.sb-label{
  padding:16px 20px 6px;
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-faint); list-style:none;
}
.sidebar-nav > .sb-label:first-child{ padding-top:8px; }


/* ══ Esqueletos de carga (esqueleto.js) ══════════════════════════════════
   Para páginas y secciones completas; la rueda se queda solo en botones.
   Miden lo mismo que lo que va a llegar, y siempre se animan. */
@keyframes esq-brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.esq {
  display: block;
  height: 12px;
  max-width: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.05) 100%);
  background-size: 200% 100%;
  animation: esq-brillo 1.3s linear infinite;
}
.esq-foto { width: 44px; height: 44px; border-radius: 8px; }
.esq-chico { width: 56px; height: 10px; flex: none; }
.esq-num { display: inline-block; width: 110px; height: .8em; vertical-align: middle; border-radius: 8px; }
.esq-fila td { height: var(--alto, 63px); pointer-events: none; }
/* En el teléfono el texto se parte y las filas crecen. Las tablas que se vuelven
   tarjetas no usan el alto de la celda: ahí la fila reserva el lugar. */
@media (max-width: 768px) {
  .esq-fila td { height: max(var(--alto, 63px), 117px); }
  table[data-tarjetas] .esq-fila, .ventas-tabla .esq-fila { min-height: 120px; }
  table[data-tarjetas] .esq-fila td, .ventas-tabla .esq-fila td { height: auto; }
}
.esq-tarjeta {
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}
.esq-renglon {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.esq-renglon .esq:first-child { flex: 0 1 auto; }
.esq-pila { display: flex; flex-direction: column; gap: 16px; }
.esq-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
/* Gráficas: el recuadro brilla hasta que se dibujan */
.esq-grafica { position: relative; }
.esq-grafica canvas { opacity: 0; }
.esq-grafica::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.04) 100%);
  background-size: 200% 100%;
  animation: esq-brillo 1.3s linear infinite;
}