*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root,[data-theme="dark"]{
  --bg:#080808;--bg2:#0d0d0d;--card:#141414;--card2:#1a1a1a;
  --white:#e8f4ff;--muted:#94a3b8;
  --accent:var(--custom-accent,#00C8FF);--accent2:var(--custom-accent2,#0090E0);
  --accent-rgb:var(--custom-accent-rgb,0,200,255);
  --green:#25d366;--red:#ef4444;--blue:var(--accent);--yellow:#f59e0b;
  --gray:#1e1e1e;--gray2:#2a2a2a;--gray3:#7aA0B8;
  --border:rgba(var(--accent-rgb),0.18);--border-soft:rgba(255,255,255,0.07);
  --sidebar-bg:#080808;--sidebar-w:var(--custom-sidebar-w,240px);
  --topbar-bg:rgba(8,8,8,0.92);--input-bg:#1e1e1e;
  --shadow:0 4px 24px rgba(0,0,0,0.4);
  --font-d:var(--custom-font-d,'Barlow Condensed',sans-serif);
  --font-b:var(--custom-font-b,'Barlow',sans-serif);
  --black:var(--bg);
  color-scheme:dark;
}
[data-theme="light"]{
  --bg:#f0f4f8;--bg2:#e8edf2;--card:#ffffff;--card2:#f8fafc;
  --white:#1a202c;--muted:#64748b;
  --accent:var(--custom-accent,#0070f3);--accent2:var(--custom-accent2,#0050c0);
  --accent-rgb:var(--custom-accent-rgb,0,112,243);
  --green:#16a34a;--red:#dc2626;--blue:var(--accent);--yellow:#d97706;
  --gray:#e2e8f0;--gray2:#cbd5e1;--gray3:#64748b;
  --border:rgba(var(--accent-rgb),0.2);--border-soft:rgba(0,0,0,0.08);
  --sidebar-bg:#1e293b;--sidebar-w:var(--custom-sidebar-w,240px);
  --topbar-bg:rgba(240,244,248,0.95);--input-bg:#e8edf2;
  --shadow:0 2px 16px rgba(0,0,0,0.1);
  --font-d:var(--custom-font-d,'Barlow Condensed',sans-serif);
  --font-b:var(--custom-font-b,'Barlow',sans-serif);
  --black:var(--bg);
  color-scheme:light;
}
[data-theme="light"] #sidebar{color:#e2e8f0}
[data-theme="light"] .nav-item{color:#94a3b8}
[data-theme="light"] .nav-item:hover{background:rgba(255,255,255,.1);color:#fff}
[data-theme="light"] .nav-item.active{background:rgba(var(--accent-rgb),.2);color:#fff}
[data-theme="light"] .sidebar-user-name{color:#e2e8f0}
[data-theme="light"] .sidebar-logo-sub{color:#94a3b8}
[data-theme="light"] .nav-section{color:#64748b}
[data-theme="gray"]{
  --bg:#1c1c21;--bg2:#222228;--card:#28282f;--card2:#2e2e36;
  --white:#dde1e7;--muted:#8b929e;
  --accent:var(--custom-accent,#a78bfa);--accent2:var(--custom-accent2,#7c3aed);
  --accent-rgb:var(--custom-accent-rgb,167,139,250);
  --green:#34d399;--red:#f87171;--blue:var(--accent);--yellow:#fbbf24;
  --gray:#28282f;--gray2:#33333c;--gray3:#8b929e;
  --border:rgba(var(--accent-rgb),0.2);--border-soft:rgba(255,255,255,0.06);
  --sidebar-bg:#161619;--sidebar-w:var(--custom-sidebar-w,240px);
  --topbar-bg:rgba(28,28,33,0.95);--input-bg:#28282f;
  --shadow:0 4px 24px rgba(0,0,0,0.5);
  --font-d:var(--custom-font-d,'Barlow Condensed',sans-serif);
  --font-b:var(--custom-font-b,'Barlow',sans-serif);
  --black:var(--bg);
  color-scheme:dark;
}
body,#sidebar,.topbar,.stat-card,.table-wrap,.login-box,.modal,.apariencia-card,
.form-field input,.form-field select,.form-field textarea,.search-bar{
  transition:background-color .25s,border-color .25s,color .15s;
}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--white);font-family:var(--font-b);font-size:14px;display:flex;min-height:100vh}

/* LOGIN — cielo + nubes 100% CSS (sin fotos: la foto splash de AirOS tenía
   el remolino y la palabra "AirOS" grabados adentro, así que en el sitio de
   un cliente terminaba mostrando "AirOS" gigante de fondo detrás del logo
   DEL CLIENTE — mala marca para todos menos AirOS mismo, por eso se sacó)
   + 5 tarjetitas tipo "estadísticas" que ORBITAN en 3D — todo detrás del
   formulario real (login-box no se toca: sigue siendo el mismo de siempre,
   con su logo del negocio, botón de Google, separador, email/contraseña) y
   de los fuegos artificiales de la bienvenida. El logo del negocio vive
   ÚNICAMENTE en el login-box (no hay una copia flotando en el hero) para no
   duplicarlo pegado arriba de la tarjeta.
   Mismo truco de animaciones en dos tiempos que ya veníamos usando en esta
   pantalla: el elemento "de afuera" hace la ENTRADA (una sola vez,
   animation-fill-mode:both) y un elemento hijo hace el movimiento continuo
   (flote/giro), arrancando recién cuando la entrada termina
   (animation-delay = duración de la entrada) — así no hace falta JS. */
/* El form va corrido a la derecha (en vez de centrado) para que no tape el
   logo/tarjetas que flotan en el centro-izquierda del hero — antes se
   superponían porque ambos estaban centrados en el mismo punto. En mobile
   (media query más abajo) el hero decorativo se oculta igual, así que ahí
   se vuelve a centrar. */
#login-screen{position:fixed;inset:0;overflow:hidden;background:var(--black);
  display:flex;align-items:center;justify-content:flex-end;padding-right:7vw;z-index:999}

#login-hero{position:absolute;inset:0;overflow:hidden;z-index:0;
  background:radial-gradient(ellipse 90% 70% at 50% 8%, #eef8ff 0%, #bfe2fb 12%, #7ec2ef 30%, #4a9bd6 55%, #1c5c8c 100%);
}

/* .lh-vignette va DENTRO de #login-hero (primer hijo, ver admin/index.php) y
   no como hermano — un sibling con z-index propio se pintaría ENCIMA de todo
   el contenido de adentro (nubes, tarjetas), tapándolas casi por completo
   (nos pasó una vez con esta misma pantalla). */
.lh-vignette{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 55% 50% at 50% 55%, rgba(0,0,0,.32) 0%, rgba(0,0,0,.12) 45%, rgba(0,0,0,0) 75%);
}

/* Franja de nubes REAL (foto recortada de la parte de abajo de
   airos-brand-hero.png — solo mar de nubes + montañas, sin el logo/texto
   "AirOS" que tiene el resto de esa imagen, así que es genérica y segura
   para cualquier cliente). Reemplaza los blobs CSS de radial-gradient: con
   una caja de este ancho/alto el "ellipse" sin radio explícito usa
   farthest-corner, así que casi no llegaba a transparente y se veía como
   un rectángulo blanco con las puntas difuminadas en vez de una nube.
   OJO con esta otra trampa (nos pasó recién): si el "background-size" hace
   la imagen más ALTA que la caja, el navegador recorta y solo se ve la
   parte 100% opaca del medio — los bordes con alpha degradado (los que
   hacen que se vea "nube" y no "franja dura") quedan fuera del recorte.
   Por eso acá la caja usa aspect-ratio IGUAL a la imagen real (1672/230)
   y background-size:100% 100% — así entra la imagen COMPLETA, bordes
   difuminados incluidos, sin recortar nada. Para el paneo lateral no se
   anima el background-position (no hay margen extra si el tamaño ya es
   100%), se mueve el DIV entero con transform:translateX(), con la caja
   más ancha que el hero (120-140%) para que nunca se vea el borde. */
.lh-cloud-photo{position:absolute;aspect-ratio:1672/230;background-image:url('../img/login-clouds.png');
  background-repeat:no-repeat;background-size:100% 100%;pointer-events:none}
.lh-cloud-photo.back{top:36%;left:-25%;width:150%;opacity:.5;filter:blur(2px);
  animation:lhCloudsDriftBack 60s ease-in-out infinite alternate}
.lh-cloud-photo.front{top:56%;left:-15%;width:130%;opacity:.88;
  animation:lhCloudsDriftFront 42s ease-in-out infinite alternate}
@keyframes lhCloudsDriftBack{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
@keyframes lhCloudsDriftFront{from{transform:translateX(5%)}to{transform:translateX(-5%)}}

#login-fuegos{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
/* Tarjeta clara "vidrio esmerilado", igual a la referencia — a propósito
   NO usa var(--card)/var(--accent) del tema del panel (dark/light/gray):
   esta pantalla es la carta de presentación antes de entrar, así que se ve
   igual para todos los clientes sin importar qué tema tengan elegido
   adentro del panel. Los selectores de acá abajo pisan a los genéricos
   .form-field/.btn-primary (que sí usan variables del tema) solo DENTRO
   de .login-box, sin tocarlos para el resto del sistema. */
.login-box{position:relative;z-index:3;background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.7);border-radius:18px;padding:40px;
  width:100%;max-width:380px;box-shadow:0 28px 80px rgba(30,60,100,.22);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:#1e2d43}
.login-box .login-sub{color:#5b7086}
.login-box .form-field label{color:#32485e}
.login-box .form-field input{background:rgba(255,255,255,.85);
  border:1px solid rgba(30,80,140,.22);color:#1e2d43;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.login-box .form-field input::placeholder{color:#93a4b5}
.login-box .form-field input:focus{border-color:rgba(24,157,255,.8);
  box-shadow:0 0 0 4px rgba(33,202,255,.18)}
.login-box .btn-primary{background:linear-gradient(135deg,#1ea5ff,#1858dc);
  box-shadow:0 14px 28px rgba(25,105,225,.28)}
.login-box .btn-primary:hover{filter:brightness(1.06)}
.login-box .login-separator{color:#7186a0}
.login-box .login-separator:before,.login-box .login-separator:after{background:rgba(30,80,140,.18)}
/* "Powered by AirOS" — debajo del logo real del cliente, chiquito y discreto
   (no compite con el logo del negocio, que sigue siendo lo grande/arriba). */
.login-powered-by{display:flex;align-items:center;justify-content:center;gap:5px;margin:0 0 14px;opacity:.65}
.login-powered-by span{font-size:10px;letter-spacing:.5px;color:#7186a0;text-transform:uppercase;font-weight:600}
.login-powered-by-icon{height:15px;width:auto;display:block}
.login-powered-by-word{height:13px;width:auto;display:block}

/* Marca grande de AirOS abajo en el hero (pedido explícito del cliente:
   además del logo del negocio arriba y del "Powered by" chico en la
   tarjeta, quiere el isotipo+wordmark de AirOS en grande como remate visual
   de la escena, igual que en la referencia). Es un elemento aparte de
   .lh-brand (que es el logo del NEGOCIO) — ambos conviven, este es
   puramente de marca AirOS. El "eco" grande y tenue atrás (.lh-airos-ghost)
   reusa el mismo wordmark escalado y difuminado, como en la referencia. */
.lh-airos-brand{position:absolute;left:37%;bottom:6%;transform:translateX(-50%);
  width:min(340px,52vw);z-index:1;pointer-events:none;text-align:center;
  animation:lhAirosBrandIn 1.4s .3s cubic-bezier(.18,.88,.25,1) both}
.lh-airos-ghost{position:absolute;left:50%;top:46%;width:100%;height:auto;
  transform:translate(-50%,-50%) scale(2.7);opacity:.14;filter:blur(1px) grayscale(.25)}
.lh-airos-mark{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  animation:lhAirosMarkFloat 6s ease-in-out infinite;animation-delay:1.4s}
.lh-airos-icon{width:36%;height:auto;filter:drop-shadow(0 10px 18px rgba(15,50,90,.25))}
.lh-airos-word{width:58%;height:auto;filter:drop-shadow(0 6px 12px rgba(15,50,90,.2))}
@keyframes lhAirosBrandIn{0%{opacity:0;transform:translateX(-50%) translateY(24px)}100%{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes lhAirosMarkFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* Logo del negocio (mismo $_adminLogoUrl que el login-box) flotando en el
   centro de la escena — entra cayendo desde arriba y después queda
   flotando suave en loop. Es el mismo logo real del cliente, no uno fijo
   de AirOS, así que no hay problema de marca: es la misma pieza que ya se
   ve abajo en el login-box, solo que acá se anima. Truco de "animación en
   dos etapas" ya usado en el resto del archivo: el wrapper .lh-brand hace
   la caída UNA vez (animation-fill-mode:both) y la imagen de adentro
   arranca su loop de flote justo cuando termina la caída
   (animation-delay = duración de la caída). */
.lh-brand{position:absolute;left:37%;top:20%;z-index:2;pointer-events:none;
  animation:lhBrandDrop 1.2s cubic-bezier(.18,.88,.25,1) both}
.lh-brand-logo{display:block;max-height:110px;max-width:220px;width:auto;height:auto;
  filter:drop-shadow(0 18px 30px rgba(15,50,90,.35));
  animation:lhBrandFloat 4.4s ease-in-out infinite;animation-delay:1.2s}
@keyframes lhBrandDrop{
  0%{opacity:0;transform:translate(-50%,-50%) translateY(-160px) scale(.85)}
  70%{opacity:1;transform:translate(-50%,-50%) translateY(10px) scale(1.02)}
  100%{opacity:1;transform:translate(-50%,-50%) translateY(0) scale(1)}
}
@keyframes lhBrandFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* 5 tarjetas "glass" (assets reales, no dibujadas a mano) que ORBITAN en 3D
   arriba del formulario (ver admin/index.php para el markup de
   .lh-orbit/.lh-panel). Puramente decorativas — el logo real del negocio
   va solo en el login-box, estas tarjetas son genéricas (no llevan marca). */
.lh-orbit{position:absolute;left:37%;top:20%;width:min(480px,78vw);aspect-ratio:1;
  transform-style:preserve-3d;animation:lhOrbitTurn 16s linear infinite;z-index:1;pointer-events:none}
@keyframes lhOrbitTurn{
  from{transform:translate(-50%,-50%) rotateX(64deg) rotateZ(0deg)}
  to{transform:translate(-50%,-50%) rotateX(64deg) rotateZ(360deg)}
}
.lh-panel{position:absolute;left:50%;top:50%;background-repeat:no-repeat;background-position:center;
  background-size:contain;filter:drop-shadow(0 14px 22px rgba(20,70,120,.28));
  transform:rotateZ(var(--angle)) translateX(var(--radius)) rotateZ(calc(var(--angle) * -1)) rotateX(-64deg) scale(var(--scale));
  transform-origin:center;animation:lhPanelBob 4.4s ease-in-out infinite;animation-delay:var(--delay)}
.lh-panel.cloud{width:190px;height:100px;background-image:url('../img/login-panel-cloud.png')}
.lh-panel.nodes{width:168px;height:114px;background-image:url('../img/login-panel-nodes.png')}
.lh-panel.stack{width:132px;height:139px;background-image:url('../img/login-panel-stack.png')}

.lh-panel.one{--angle:0deg;  --radius:170px; --scale:.92; --delay:-.2s}
.lh-panel.two{--angle:72deg; --radius:184px; --scale:.82; --delay:-1.4s}
.lh-panel.three{--angle:144deg;--radius:172px;--scale:.76; --delay:-2.3s}
.lh-panel.four{--angle:216deg;--radius:180px;--scale:.86; --delay:-3.1s}
.lh-panel.five{--angle:288deg;--radius:166px;--scale:.78; --delay:-3.8s}
@keyframes lhPanelBob{0%,100%{margin-top:-6px;opacity:.8}50%{margin-top:10px;opacity:1}}

@media (max-width:860px){
  .lh-orbit,.lh-cloud-photo,.lh-brand,.lh-airos-brand{display:none} /* en mobile priorizamos el formulario, sin nubes ni tarjetas pisándolo */
  #login-screen{justify-content:center;padding-right:0} /* sin hero decorativo, el form vuelve a ir centrado */
}
@media (prefers-reduced-motion:reduce){
  .lh-orbit,.lh-panel,.lh-cloud-photo,.lh-brand,.lh-brand-logo,.lh-airos-brand,.lh-airos-mark{animation:none!important}
}
.login-logo{font-family:var(--font-d);font-size:22px;font-weight:900;margin-bottom:8px;text-align:center}
.login-logo span{color:var(--accent)}
.login-sub{font-size:12px;color:var(--gray3);text-align:center;margin-bottom:28px}
.form-field{margin-bottom:14px}
.form-field label{display:block;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--gray3);margin-bottom:5px}
.dsn-img-hint{display:block;margin-top:6px;color:var(--gray3);font-size:11px;line-height:1.35}
.dsn-img-hint strong{color:var(--accent);font-weight:800}
.form-field input,.form-field select,.form-field textarea{width:100%;background:var(--gray);border:1px solid var(--border);border-radius:8px;padding:10px 13px;color:var(--white);font-family:var(--font-b);font-size:14px;outline:none;transition:border-color .2s}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--accent)}
.form-field textarea{resize:vertical;min-height:72px}
.btn{font-family:var(--font-d);font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;border:none;border-radius:8px;padding:11px 20px;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:6px}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#009ABF}
.btn-danger{background:rgba(239,68,68,.15);color:var(--red);border:1px solid rgba(239,68,68,.3)}
.btn-danger:hover{background:var(--red);color:#fff}
.btn-ghost{background:rgba(255,255,255,.06);color:var(--gray3);border:1px solid var(--border)}
.btn-ghost:hover{background:rgba(255,255,255,.12);color:var(--white)}
.btn-green{background:rgba(37,211,102,.15);color:var(--green);border:1px solid rgba(37,211,102,.3)}
.btn-green:hover{background:var(--green);color:#fff}
.btn-full{width:100%;justify-content:center}
.alert{border-radius:8px;padding:10px 14px;font-size:13px;margin-bottom:14px;display:none}
.alert.err{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#fca5a5;display:block}
.alert.ok{background:rgba(37,211,102,.1);border:1px solid rgba(37,211,102,.3);color:#86efac;display:block}

/* SIDEBAR */
#sidebar{width:var(--sidebar-w);background:var(--sidebar-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:50;overflow-y:auto}
.sidebar-logo{padding:20px 20px 16px;border-bottom:1px solid var(--border)}
.sidebar-logo-text{font-family:var(--font-d);font-size:18px;font-weight:900;line-height:1.2}
.sidebar-logo-text span{color:var(--accent)}
.sidebar-logo-sub{font-size:11px;color:var(--gray3);margin-top:2px}
.sidebar-nav{flex:1;padding:12px 8px}
.nav-section{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gray3);padding:12px 12px 6px}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;cursor:pointer;transition:all .15s;color:var(--gray3);font-size:13px;font-weight:500;margin-bottom:2px;border:none;background:none;width:100%;text-align:left}
.nav-item:hover{background:rgba(255,255,255,.05);color:var(--white)}
.nav-item.active{background:rgba(0,200,255,.12);color:var(--accent);font-weight:600}
.nav-icon{width:18px;flex-shrink:0;opacity:.7}
.nav-item.active .nav-icon{opacity:1}
.nav-num{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 3px;border-radius:5px;font-size:10px;font-weight:700;color:var(--gray3);background:rgba(255,255,255,.06);flex-shrink:0}
.nav-item.active .nav-num{background:rgba(var(--accent-rgb),.25);color:var(--accent)}
.nav-item:hover .nav-num{color:var(--white)}
.sidebar-user{padding:14px;border-top:1px solid var(--border)}
.sidebar-user-name{font-weight:600;font-size:13px}
.sidebar-user-role{font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:1px}

/* MAIN */
#main{margin-left:var(--sidebar-w);flex:1;min-height:100vh}
.topbar{position:sticky;top:0;background:var(--topbar-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:0 28px;height:56px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;z-index:40}
/* Columnas fijas por elemento — necesario porque #hamburger tiene
   display:none en desktop y, sin esto, el grid corre el título a la
   primera columna (angosta, pegada a la izq.) en vez de dejarlo al medio. */
.topbar>#hamburger{grid-column:1}
.topbar-title{grid-column:2;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-d);font-size:22px;font-weight:900}
.topbar-title.tt-centro{text-align:center}
.topbar-actions{grid-column:3;display:flex;gap:8px;align-items:center;justify-self:end}
.page{padding:28px;display:none}
.page.active{display:block}

/* STATS CARDS */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px}
.stat-card-label{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--gray3);margin-bottom:8px}
.stat-card-value{font-family:var(--font-d);font-size:38px;font-weight:900;line-height:1}
.stat-card-sub{font-size:12px;color:var(--gray3);margin-top:4px}
.stat-card.accent .stat-card-value{color:var(--accent)}
.stat-card.green .stat-card-value{color:var(--green)}
.stat-card.yellow .stat-card-value{color:var(--yellow)}
.stat-card.blue .stat-card-value{color:var(--blue)}

/* TABLE */
.table-wrap{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.table-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.table-header h3{font-family:var(--font-d);font-size:20px;font-weight:700}
.search-bar{background:var(--gray);border:1px solid var(--border);border-radius:7px;padding:8px 12px;color:var(--white);font-family:var(--font-b);font-size:13px;outline:none;width:220px;transition:border-color .2s}
.search-bar:focus{border-color:var(--accent)}
table{width:100%;border-collapse:collapse}
th{padding:11px 16px;text-align:left;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--gray3);border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.04);font-size:13px;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;justify-content:flex-end}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.badge-pendiente{background:rgba(245,158,11,.12);color:var(--yellow);border:1px solid rgba(245,158,11,.2)}
.badge-confirmado{background:rgba(59,130,246,.12);color:var(--blue);border:1px solid rgba(59,130,246,.2)}
.badge-preparando{background:rgba(168,85,247,.12);color:#c084fc;border:1px solid rgba(168,85,247,.2)}
.badge-listo{background:rgba(37,211,102,.12);color:var(--green);border:1px solid rgba(37,211,102,.2)}
.badge-entregado{background:rgba(255,255,255,.06);color:var(--gray3);border:1px solid var(--border)}
.badge-cancelado{background:rgba(239,68,68,.12);color:var(--red);border:1px solid rgba(239,68,68,.2)}
.badge-ok{background:rgba(37,211,102,.12);color:var(--green);border:1px solid rgba(37,211,102,.2)}
.badge-low{background:rgba(245,158,11,.12);color:var(--yellow);border:1px solid rgba(245,158,11,.2)}
.badge-out{background:rgba(239,68,68,.12);color:var(--red);border:1px solid rgba(239,68,68,.2)}
.empty-row{text-align:center;padding:40px;color:var(--gray3)}
.pagination{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;border-top:1px solid var(--border)}
.pelu-servicios-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pelu-servicios-grid label{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:8px;padding:9px 10px;font-size:12px;color:var(--white);cursor:pointer}
.pelu-servicios-grid input{width:16px;height:16px;accent-color:var(--accent);flex-shrink:0}
.pelu-fotos-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.pelu-foto-box{border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.035);padding:10px}
.pelu-foto-box label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--gray3);margin-bottom:8px}
.pelu-foto-box input[type=file]{width:100%;font-size:12px;color:var(--gray3)}
.pelu-foto-preview{margin-top:8px;min-height:92px;border:1px dashed var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.18);color:var(--gray3);font-size:12px;overflow:hidden}
.pelu-foto-preview img{width:100%;height:120px;object-fit:cover;display:block}
.pelu-fotos-mini{display:flex;gap:5px;margin-top:6px}
.pelu-fotos-mini img{width:42px;height:34px;border-radius:5px;object-fit:cover;border:1px solid var(--border)}
@media(max-width:520px){.pelu-servicios-grid{grid-template-columns:1fr}}
@media(max-width:520px){.pelu-fotos-grid{grid-template-columns:1fr}.pelu-foto-preview img{height:150px}}

.estadia-salida-field{
  margin-top:4px;
  padding:12px;
  border:1px solid rgba(37,198,220,.35);
  border-radius:10px;
  background:rgba(37,198,220,.08);
}
.estadia-salida-field label{
  color:#67e8f9!important;
  font-size:12px!important;
  letter-spacing:1px;
}
.estadia-salida-field input{
  border-color:rgba(37,198,220,.45)!important;
  background:rgba(0,0,0,.18)!important;
}
.estadia-salida-field small{
  display:block;
  margin-top:6px;
  color:var(--gray3);
  font-size:11px;
  line-height:1.35;
}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:200;display:flex;align-items:flex-end;justify-content:center;padding:8px 8px 0;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .25s}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--card);border:1px solid var(--border);border-radius:16px 16px 0 0;width:min(100%,540px);max-width:calc(100vw - 16px);max-height:calc(100dvh - 8px);overflow:hidden;display:flex;flex-direction:column}
.modal-head{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}
.modal-head h3{font-family:var(--font-d);font-size:18px;font-weight:700;line-height:1.15;overflow-wrap:anywhere}
.modal-close{background:none;border:none;cursor:pointer;color:var(--gray3);font-size:24px;line-height:1;padding:4px;transition:color .2s;min-width:36px;min-height:36px}
.modal-close:hover{color:var(--white)}
.modal-body{padding:16px;overflow-y:auto;min-height:0}
.modal-footer{padding:0 16px 16px;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;flex-shrink:0}
.modal-footer .btn{justify-content:center}
.form-row{display:grid;grid-template-columns:1fr;gap:12px}

/* MODAL APAISADO (auto adaptable) */
.modal-landscape{
  width:min(100%,960px);
  max-width:calc(100vw - 16px);
  max-height:calc(100dvh - 8px);
}
/* Fase 75: modal de Compra más ancho (renglón de descripción ilegible en
   540px). El ancho NO puede ir como `style="width:..."` inline en el HTML:
   abrirModal() llama _resetModalSize(), que hace
   `modal.style.width = ''` en CADA apertura y borra cualquier inline style
   sin importar si vino del HTML o de JS — por eso los intentos anteriores
   con `style="width:min(100%,820px)"` seguían abriendo en 540px. Una regla
   de clase como esta sí sobrevive, igual que .modal-landscape de arriba. */
.modal-compra-wide{
  width:min(100%,820px);
  max-width:calc(100vw - 16px);
  max-height:calc(100dvh - 8px);
}
/* Fase 110: modal de cliente / cuenta corriente a pantalla completa — pedido
   del cliente para ver todo (compras, items, estadísticas) sin que se abra
   algo chico. Va como clase por el mismo motivo que .modal-compra-wide de
   arriba: el ancho/alto inline se borra en cada apertura de modal. */
.modal-fullscreen{
  width:calc(100vw - 24px);
  max-width:1200px;
  height:calc(100dvh - 24px);
  max-height:calc(100dvh - 24px);
}
.modal-fullscreen .modal-body{
  flex:1;
  min-height:0;
}
.modal-landscape .modal-body{
  display:grid;
  grid-template-columns:1fr;
  padding:0;
  flex:1;
  overflow:hidden;
  min-height:0;
}
.modal-col{
  padding:16px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}
.modal-col-right{
  border-top:1px solid var(--border);
  background:rgba(255,255,255,.018);
}
/* Botones tipo en modal ajuste stock */
.as-tipo-btn{padding:8px 6px;border-radius:8px;text-align:center;border:2px solid rgba(255,255,255,.15);font-size:12px;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s}
.as-tipo-btn:hover{background:rgba(255,255,255,.05)}
.as-tipo-active{border-color:var(--accent)!important}

/* Grip de redimensionado */
.modal-landscape .modal-footer,
.modal-resizable .modal-footer{position:relative}
.modal-resize-grip{
  position:absolute;bottom:6px;right:6px;
  width:20px;height:20px;cursor:nwse-resize;opacity:.35;
  transition:opacity .2s;flex-shrink:0;
}
.modal-resize-grip:hover{opacity:1}
.modal-resize-grip svg{display:block}

/* Mientras arrastrás: desactivar selección de texto */
body.modal-resizing{user-select:none;cursor:nwse-resize!important}
body.modal-dragging{user-select:none;cursor:grabbing!important}

@media(max-width:860px){
  .modal-landscape{max-width:100%;max-height:calc(100dvh - 8px)}
  .modal-landscape .modal-body{grid-template-columns:1fr;overflow-y:auto}
  .modal-landscape .modal-body .modal-col{max-height:none;padding:16px;overflow:visible}
  .modal-col-right{border-left:none;border-top:1px solid var(--border)}
  .modal-resize-grip{display:none}
}

@media(min-width:640px){
  .modal-overlay{align-items:flex-start;padding:48px 16px 24px;overflow-y:auto}
  .modal{border-radius:16px;margin-bottom:24px;max-height:calc(100dvh - 72px)}
  .modal-head{padding:20px 24px}
  .modal-head h3{font-size:22px}
  .modal-body{padding:24px}
  .modal-footer{padding:0 24px 24px;gap:10px}
  .form-row{grid-template-columns:1fr 1fr}
}

@media(min-width:861px){
  .modal-head{cursor:grab}
  .modal-head:active{cursor:grabbing}
  .modal-landscape{
    max-width:min(960px,calc(100vw - 48px));
    max-height:calc(100dvh - 72px);
  }
  .modal-landscape .modal-body{grid-template-columns:minmax(0,1fr) minmax(320px,360px)}
  .modal-landscape .modal-body .modal-col{padding:20px 24px}
  .modal-col-right{border-top:none;border-left:1px solid var(--border)}
}

/* Modal producto: mobile first overrides */
#modal-producto .modal-footer{
  border-top:1px solid var(--border);
  background:var(--card);
  flex-wrap:wrap;
  align-items:center;
}
#modal-producto .modal-footer .btn{
  min-height:44px;
  justify-content:center;
  text-align:center;
  white-space:normal;
}
#modal-producto #mp-imagen-url{
  min-width:0;
}
#modal-producto .mp-precios-row{
  grid-template-columns:1fr;
  gap:10px;
}
#modal-producto .mp-margen-resumen{
  display:grid;
  gap:6px;
  margin-top:-2px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:rgba(255,255,255,.03);
  color:var(--gray3);
  font-size:12px;
  line-height:1.35;
}
#modal-producto .mp-margen-resumen strong{
  color:var(--white);
  font-family:var(--font-d);
  font-size:14px;
}
#modal-producto .mp-margen-resumen span{
  color:var(--accent);
}
#modal-producto .mp-margen-resumen small{
  display:block;
  margin-top:2px;
  color:var(--gray3);
  font-size:11px;
}

@media(max-width:860px){
  #modal-producto.modal-overlay{
    align-items:flex-end;
    padding:8px 0 0;
    overflow:hidden;
  }
  #modal-producto .modal-landscape{
    width:100%;
    height:calc(100dvh - 8px);
    max-height:calc(100dvh - 8px);
    margin:0;
    border-radius:16px 16px 0 0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  #modal-producto .modal-head{
    flex:0 0 auto;
    padding:14px 16px;
  }
  #modal-producto .modal-head h3{
    font-size:18px;
    line-height:1.2;
  }
  #modal-producto .modal-close{
    min-width:42px;
    min-height:42px;
  }
  #modal-producto .modal-body{
    display:block;
    flex:1 1 auto;
    min-height:0;
    max-height:none;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:0;
  }
  #modal-producto .modal-body .modal-col{
    overflow:visible;
    max-height:none;
    padding:14px 16px;
    gap:12px;
  }
  #modal-producto .modal-col-right{
    border-left:none;
    border-top:1px solid var(--border);
  }
  #modal-producto .form-row{
    grid-template-columns:1fr!important;
    gap:10px;
  }
  #modal-producto .mp-precios-row{
    grid-template-columns:1fr!important;
  }
  #modal-producto .modal-footer{
    flex:0 0 auto;
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    padding:10px 12px calc(12px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 24px rgba(0,0,0,.18);
  }
  #modal-producto .modal-footer .btn{
    width:100%;
    min-height:46px;
    padding:11px 12px;
    font-size:13px;
  }
  #modal-producto .modal-footer .btn-primary{
    order:1;
  }
  #modal-producto #mp-btn-agregar-venta{
    order:2;
  }
  #modal-producto .modal-footer .btn-ghost{
    order:3;
  }
}

@media(min-width:520px) and (max-width:860px){
  #modal-producto .mp-precios-row{
    grid-template-columns:1fr 1fr!important;
  }
  #modal-producto .mp-precios-row .form-field:last-child{
    grid-column:1/-1;
  }
  #modal-producto .modal-footer{
    grid-template-columns:1fr 1fr;
  }
  #modal-producto .modal-footer .btn-primary{
    grid-column:1/-1;
  }
}

@media(max-width:520px){
  #modal-producto .modal-head{
    padding:12px 14px;
  }
  #modal-producto .modal-body .modal-col{
    padding:12px 14px;
  }
  #modal-producto .modal-col-right{
    gap:10px;
  }
  #modal-producto .form-field input,
  #modal-producto .form-field select,
  #modal-producto .form-field textarea{
    font-size:16px;
    min-height:46px;
    padding:11px 12px;
  }
  #modal-producto .mp-margen-resumen{
    padding:9px 10px;
    font-size:11px;
  }
  #modal-producto #mp-imagen-url{
    flex:1 0 100%;
    width:100%;
  }
  #modal-producto #mp-imagen-url + .btn{
    flex:1 1 100%;
  }
  #modal-producto #mp-barra{
    min-width:0;
  }
  #modal-producto #mp-barra + .btn{
    width:46px;
    min-width:46px;
    padding:0!important;
  }
}

@media(min-width:861px){
  #modal-producto .mp-precios-row{
    grid-template-columns:1fr 1fr;
  }
  #modal-producto .mp-precios-row .form-field:last-child{
    grid-column:1/-1;
  }
}

/* PRODUCT IMG */
.prod-img{width:40px;height:40px;border-radius:6px;object-fit:cover;border:1px solid var(--border);background:var(--gray)}

/* TOAST */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--card);border:1px solid var(--accent);border-radius:10px;padding:12px 20px;font-family:var(--font-d);font-size:16px;font-weight:600;z-index:999;transition:transform .3s;white-space:nowrap;display:flex;align-items:center;gap:8px}
#toast.show{transform:translateX(-50%) translateY(0)}
.toast-dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* MISC */
.section-title{font-family:var(--font-d);font-size:28px;font-weight:900;margin-bottom:20px}
.link-tienda{color:var(--accent);font-size:12px;text-decoration:none}
.link-tienda:hover{text-decoration:underline}
.stock-input{width:80px;background:var(--gray);border:1px solid var(--border);border-radius:6px;padding:5px 8px;color:var(--white);font-size:13px;text-align:center}

/* BULK BAR */
#bulk-bar{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120px);background:#0f172a;border:1px solid #3b82f6;border-radius:14px;padding:10px 16px;display:flex;align-items:center;gap:10px;z-index:999;transition:transform .3s;box-shadow:0 8px 32px rgba(0,0,0,.6);flex-wrap:wrap;max-width:96vw}
#bulk-bar.show{transform:translateX(-50%) translateY(0)}
#bulk-bar-count{color:#93c5fd;font-family:var(--font-d);font-size:16px;font-weight:700;white-space:nowrap}
#bulk-stock-form{display:none;align-items:center;gap:6px;padding:6px 10px;background:rgba(255,255,255,.06);border-radius:8px;border:1px solid rgba(255,255,255,.1)}
#bulk-stock-form.show{display:flex}
#bulk-stock-form select,#bulk-stock-form input[type=number]{background:var(--gray2);border:1px solid var(--border);border-radius:6px;padding:5px 8px;color:var(--white);font-size:12px;outline:none}
#bulk-stock-form input[type=number]{width:80px}
.chk-prod{width:16px;height:16px;cursor:pointer;accent-color:var(--accent)}
/* Panel de selección inteligente */
#sel-panel{display:none;margin-bottom:12px;background:var(--card);border:1px solid rgba(59,130,246,.3);border-radius:12px;padding:16px 20px}
#sel-panel.open{display:block}
.sel-panel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-bottom:12px}
.sel-field label{display:block;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gray3);margin-bottom:4px}
.sel-field input,.sel-field select{width:100%;background:var(--gray2);border:1px solid var(--border);border-radius:7px;padding:7px 10px;color:var(--white);font-size:13px;outline:none;transition:border-color .2s}
.sel-field input:focus,.sel-field select:focus{border-color:#3b82f6}
.sel-field-range{display:flex;gap:6px}
.sel-field-range input{flex:1}
/* Categoría inline editable */
.cat-inline-edit{background:var(--gray2);border:1px solid var(--accent);border-radius:6px;padding:4px 8px;color:var(--white);font-size:12px;outline:none;cursor:pointer;max-width:150px}
.cat-cell-text{cursor:pointer;border-bottom:1px dashed var(--gray3);display:inline-block}
.cat-cell-text:hover{color:var(--white);border-color:var(--accent)}

/* PUNTO DE VENTA (POS) */
.pos-layout{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
@media(max-width:900px){.pos-layout{grid-template-columns:1fr}}
.pos-scan-wrap{display:flex;gap:8px;margin-bottom:20px}
.pos-scan-input{flex:1;background:var(--gray);border:2px solid var(--accent);border-radius:10px;padding:13px 16px;color:var(--white);font-family:var(--font-d);font-size:22px;font-weight:700;letter-spacing:1px;outline:none}
.pos-scan-input::placeholder{color:var(--gray3);font-size:16px;font-weight:400;letter-spacing:0}
.pos-scan-input:focus{border-color:#0090E0;box-shadow:0 0 0 3px rgba(0,144,224,.15)}
.pos-results{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:12px}
.pos-result-item{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;padding:10px 14px;cursor:pointer;transition:background .15s;border-bottom:1px solid var(--border);border-left:3px solid transparent}
.pos-result-item.con-stock{border-left-color:#34d399;background:rgba(52,211,153,.04)}
.pos-result-item.con-stock:hover{background:rgba(52,211,153,.10)}
.pos-result-item.sin-stock{opacity:.55}
.pos-result-item.con-stock .pos-result-nombre{color:#e2fdf3}
.pos-result-item:last-child{border-bottom:none}
.pos-result-item:hover{background:rgba(0,200,255,.08)}
.pos-result-img{width:48px;height:48px;object-fit:cover;border-radius:6px}
.pos-result-nombre{font-weight:600;font-size:13px}
.pos-result-cod{font-size:11px;color:var(--gray3)}
.pos-result-precio{font-family:var(--font-d);font-size:16px;font-weight:700;color:var(--accent);text-align:right}
.pos-result-stock{font-size:11px;color:var(--gray3);text-align:right}
.pos-cart{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.pos-cart-head{padding:14px 16px;border-bottom:1px solid var(--border);font-family:var(--font-d);font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:space-between}
.pos-cart-body{max-height:320px;overflow-y:auto}
.pos-cart-row{display:grid;grid-template-columns:1fr 80px 90px 28px;gap:6px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--border);font-size:13px}
.pos-cart-row:last-child{border-bottom:none}
.pos-cart-nombre{font-weight:600;font-size:12px;line-height:1.3}
.pos-cart-cod{font-size:10px;color:var(--gray3)}
.pos-qty-input{width:70px;background:var(--gray2);border:1px solid var(--border);border-radius:6px;padding:5px 8px;color:var(--white);font-size:13px;text-align:center;outline:none}
.pos-qty-input:focus{border-color:var(--accent)}
.pos-cart-sub{font-family:var(--font-d);font-size:15px;font-weight:700;text-align:right;color:var(--white)}
.pos-cart-del{background:none;border:none;color:var(--gray3);cursor:pointer;font-size:16px;padding:2px;display:flex;align-items:center;justify-content:center}
.pos-cart-del:hover{color:var(--red)}
.pos-cart-empty{padding:32px 16px;text-align:center;color:var(--gray3);font-size:13px}
.pos-summary{padding:14px 16px;border-top:1px solid var(--border);background:rgba(0,0,0,.2)}
.pos-total-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.pos-total-label{color:var(--gray3);font-size:13px}
.pos-total-value{font-family:var(--font-d);font-size:28px;font-weight:900;color:var(--accent)}
.pos-client-wrap{margin-bottom:12px}
.pos-client-search{width:100%;background:var(--gray);border:1px solid var(--border);border-radius:8px;padding:9px 12px;color:var(--white);font-size:13px;outline:none;margin-bottom:6px}
.pos-client-search:focus{border-color:var(--accent)}
.pos-client-results{background:var(--gray2);border:1px solid var(--border);border-radius:8px;overflow:hidden;display:none}
.pos-client-opt{padding:8px 12px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--border)}
.pos-client-opt:last-child{border-bottom:none}
.pos-client-opt:hover{background:rgba(0,200,255,.1)}
.pos-client-opt b{color:var(--white)}
.pos-client-selected{background:rgba(37,211,102,.1);border:1px solid rgba(37,211,102,.3);border-radius:8px;padding:8px 12px;font-size:13px;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center}
.pos-metodo-row{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.pos-metodo-btn{flex:1;min-width:70px;padding:7px 4px;border:1px solid var(--border);border-radius:8px;background:var(--gray2);color:var(--gray3);font-size:12px;font-weight:600;cursor:pointer;text-align:center;transition:all .15s}
.pos-metodo-btn.active{background:rgba(0,200,255,.15);border-color:var(--accent);color:var(--accent)}
.pos-confirm-btn{width:100%;padding:14px;background:var(--green);color:#fff;border:none;border-radius:10px;font-family:var(--font-d);font-size:18px;font-weight:700;letter-spacing:1px;cursor:pointer;transition:all .2s}
.pos-confirm-btn:hover{filter:brightness(1.1)}
.pos-confirm-btn:disabled{background:var(--gray2);color:var(--gray3);cursor:not-allowed}
.pos-nota{width:100%;background:var(--gray);border:1px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--white);font-size:12px;resize:none;outline:none;margin-bottom:12px}
.pos-nota:focus{border-color:var(--accent)}
/* PANEL IMÁGENES */
.img-panel-top{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap}
.img-panel-stats{display:flex;gap:12px;flex-wrap:wrap}
.img-stat-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 18px;min-width:110px}
.img-stat-label{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--gray3);margin-bottom:4px}
.img-stat-val{font-family:var(--font-d);font-size:28px;font-weight:900}
.img-stat-val.green{color:var(--green)}
.img-panel-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.img-search-input{background:var(--gray);border:1px solid var(--border);border-radius:8px;padding:9px 13px;color:var(--white);font-size:13px;outline:none;width:220px}
.img-search-input:focus{border-color:var(--accent)}
.img-progressbar-track{height:8px;background:var(--gray2);border-radius:99px;overflow:hidden}
.img-progressbar-fill{height:100%;background:var(--accent);border-radius:99px;transition:width .3s}
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.img-card{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:border-color .2s}
.img-card.guardado{border-color:var(--green)}
.img-card.omitido{opacity:.4}
.img-card-thumb{width:100%;height:160px;object-fit:contain;background:var(--gray2);display:block}
.img-card-thumb-empty{width:100%;height:160px;background:var(--gray2);display:flex;align-items:center;justify-content:center;color:var(--gray3);font-size:13px}
.img-card-body{padding:12px}
.img-card-nombre{font-weight:600;font-size:13px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.img-card-codigo{font-size:11px;color:var(--gray3);margin-bottom:10px}
.img-card-gallery{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:10px;scrollbar-width:thin}
.img-gallery-opt{width:56px;height:56px;object-fit:cover;border-radius:6px;cursor:pointer;border:2px solid transparent;flex-shrink:0;transition:border-color .15s;background:var(--gray2)}
.img-gallery-opt:hover{border-color:var(--accent)}
.img-gallery-opt.selected{border-color:var(--green)}
.img-card-actions{display:flex;gap:6px;flex-wrap:wrap}
.img-card-actions .btn{font-size:11px;padding:6px 10px}
.img-url-input{width:100%;background:var(--gray);border:1px solid var(--border);border-radius:6px;padding:6px 10px;color:var(--white);font-size:12px;outline:none;margin-top:6px}
.img-url-input:focus{border-color:var(--accent)}
.img-card-status{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-top:6px;min-height:16px}
/* IMPORT WIZARD */
.import-steps{display:flex;gap:0;margin-bottom:28px;background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.import-step-btn{flex:1;padding:13px 8px;text-align:center;font-family:var(--font-d);font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--gray3);background:none;border:none;border-right:1px solid var(--border);cursor:default;transition:all .2s;position:relative}
.import-step-btn:last-child{border-right:none}
.import-step-btn.active{color:var(--white);background:rgba(0,200,255,.12)}
.import-step-btn.done{color:var(--green)}
.import-step-num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--gray2);color:var(--gray3);font-size:11px;margin-right:6px}
.import-step-btn.active .import-step-num{background:var(--accent);color:#fff}
.import-step-btn.done .import-step-num{background:var(--green);color:#fff}

.upload-zone{border:2px dashed var(--border);border-radius:12px;padding:56px 32px;text-align:center;cursor:pointer;transition:all .25s;background:var(--card)}
.upload-zone:hover,.upload-zone.drag{border-color:var(--accent);background:rgba(0,200,255,.04)}
.upload-zone-icon{font-size:48px;margin-bottom:12px;display:block}
.upload-zone-title{font-family:var(--font-d);font-size:22px;font-weight:700;margin-bottom:6px}
.upload-zone-sub{font-size:13px;color:var(--gray3)}

.col-map-rows-wrap{max-width:640px}
.col-map-row{display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}
.col-map-row:last-child{border-bottom:none}
.col-map-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--gray3)}
.col-map-select{background:var(--gray);border:1px solid var(--border);border-radius:7px;padding:8px 12px;color:var(--white);font-size:13px;outline:none;cursor:pointer;width:100%}
.col-map-select:focus{border-color:var(--accent)}

.import-preview-table{width:100%;border-collapse:collapse;font-size:12px}
.import-preview-table th{padding:8px 12px;text-align:left;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--gray3);border-bottom:1px solid var(--border);background:rgba(255,255,255,.03)}
.import-preview-table td{padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.03);font-size:12px}
.import-preview-table tr:last-child td{border-bottom:none}
.markup-input-wrap{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:20px 24px;margin-bottom:20px}
.markup-num{font-family:var(--font-d);font-size:48px;font-weight:900;color:var(--accent);width:100px;background:transparent;border:none;outline:none}
.markup-num::-webkit-inner-spin-button{-webkit-appearance:none}

/* ── ESCÁNER ─────────────────────────────────────────────── */
#scan-overlay{position:fixed;inset:0;background:rgba(0,0,0,.96);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
#scan-video{width:100%;max-width:380px;border-radius:12px;border:2px solid var(--accent);background:#000;aspect-ratio:4/3;object-fit:cover}
.scan-frame{position:relative;width:100%;max-width:380px}
.scan-line{position:absolute;left:10%;right:10%;height:2px;background:var(--accent);animation:scanMove 1.8s ease-in-out infinite;box-shadow:0 0 8px var(--accent)}
@keyframes scanMove{0%,100%{top:20%}50%{top:80%}}
.scan-hint{color:var(--gray3);font-size:13px;margin-top:14px;text-align:center;max-width:300px}
.scan-result-flash{position:absolute;inset:0;border-radius:12px;background:rgba(37,211,102,.25);animation:flashFade .4s ease-out forwards;pointer-events:none}
@keyframes flashFade{from{opacity:1}to{opacity:0}}

/* ── HAMBURGER ───────────────────────────────────────────── */
#hamburger{display:none;background:none;border:none;color:var(--white);cursor:pointer;padding:6px;flex-direction:column;gap:5px;flex-shrink:0}
#hamburger span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:all .3s}
#sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:48;-webkit-tap-highlight-color:transparent}
#sidebar-overlay.mob-open{display:block}

/* ── RESPONSIVE ADMIN ────────────────────────────────────── */
@media(max-width:900px){
  #hamburger{display:flex}
  #sidebar{transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1)}
  #sidebar.mob-open{transform:translateX(0)}
  #main{margin-left:0!important}
  .topbar{padding:0 14px}
  .topbar-title{font-size:17px}
  .topbar-actions .btn span{display:none}
  .topbar-actions .btn svg{margin:0}
  .page{padding:14px}
  .stats-grid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
  .stat-card{padding:14px}
  .stat-card-value{font-size:26px}
  .form-row{grid-template-columns:1fr!important}
  .table-wrap{overflow-x:auto}
  table{min-width:560px}
  .modal-overlay{padding-top:8px;align-items:flex-end;padding-bottom:0}
  .modal{margin:0 0 0;border-radius:16px 16px 0 0;max-width:100%}
  .modal-body{padding:16px}
  .modal-footer{padding:0 16px 20px;flex-wrap:wrap}
  .table-header{flex-direction:column;align-items:flex-start;gap:10px}
  .table-header > div{width:100%;flex-wrap:wrap}
  .search-bar{width:100%}
  .section-title{font-size:22px}
  .import-steps{overflow-x:auto}
  .import-step-btn{font-size:11px;padding:10px 6px;min-width:80px}
  .pos-cart-table-wrap{display:none}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr;gap:8px}
  .stat-card-value{font-size:22px}
  .section-title{font-size:18px}
  .topbar{gap:8px;padding:0 10px}
  .topbar-title{font-size:15px}
  .page{padding:10px}
  table{min-width:420px;font-size:12px}
  .modal{border-radius:12px 12px 0 0}
  .modal-head{padding:14px 16px}
  .modal-head h3{font-size:16px}
  .modal-body{padding:12px}
  .modal-footer{gap:8px;padding:0 12px 16px}
  .btn{font-size:12px;padding:8px 12px}
  .form-field label{font-size:11px}
  .form-field input,.form-field select,.form-field textarea{font-size:14px;padding:9px 12px}
  .stat-icon{display:none}
  .table-header input[type=text],.table-header select{font-size:13px}
  td,th{padding:8px 10px}
  .pos-layout{gap:12px;padding:10px}
}

/* ── OFFLINE / PWA ──────────────────────────────────────── */
/* Banner superior de operaciones pendientes */
#offline-banner{display:none;align-items:center;gap:10px;background:rgba(234,179,8,.12);border-bottom:1px solid rgba(234,179,8,.3);padding:8px 16px;font-size:13px;color:#fbbf24;position:sticky;top:0;z-index:60}
#offline-banner svg{flex-shrink:0}
#offline-banner-count{font-weight:700}
#offline-sync-btn{margin-left:auto;background:rgba(234,179,8,.2);border:1px solid rgba(234,179,8,.4);color:#fbbf24;border-radius:6px;padding:4px 12px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}

/* Ítem de cola en el sidebar */
#offline-queue-badge{display:none;background:#ef4444;color:#fff;border-radius:99px;font-size:10px;font-weight:700;padding:1px 5px;margin-left:auto;min-width:18px;text-align:center}

/* Indicador de modo offline en body */
body.is-offline #offline-status-dot{background:#ef4444}
body.is-online  #offline-status-dot{background:var(--green)}
#offline-status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block;flex-shrink:0}

/* APARIENCIA */
.theme-switcher{display:flex;gap:6px;padding:12px 14px;border-top:1px solid var(--border-soft)}
.theme-btn{flex:1;height:28px;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.theme-btn:hover{transform:scale(1.05)}
.theme-btn.active{border-color:var(--accent)}
.theme-btn[data-t="dark"]{background:linear-gradient(135deg,#080808 50%,#1e1e1e 50%)}
.theme-btn[data-t="light"]{background:linear-gradient(135deg,#f0f4f8 50%,#ffffff 50%)}
.theme-btn[data-t="gray"]{background:linear-gradient(135deg,#1c1c21 50%,#28282f 50%)}
.theme-dot{position:absolute;bottom:4px;right:4px;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:0;transition:opacity .2s}
.theme-btn.active .theme-dot{opacity:1}
.apariencia-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;padding:28px}
.apariencia-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:22px;box-shadow:var(--shadow)}
.apariencia-card h3{font-family:var(--font-d);font-size:17px;font-weight:700;margin-bottom:16px}
.apariencia-field{margin-bottom:16px}
.apariencia-field label{display:block;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gray3);margin-bottom:6px}
.apariencia-field input[type=text],
.apariencia-field input[type=number],
.apariencia-field input[type=url],
.apariencia-field select{width:100%;background:var(--input-bg);border:1px solid var(--border);border-radius:8px;padding:9px 12px;color:var(--white);font-family:var(--font-b);font-size:13px;outline:none;transition:border-color .2s}
.apariencia-field input:focus,.apariencia-field select:focus{border-color:var(--accent)}
.color-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.color-preview{width:36px;height:36px;border-radius:8px;border:2px solid var(--border);cursor:pointer;flex-shrink:0;transition:transform .15s;position:relative;overflow:hidden}
.color-preview:hover{transform:scale(1.08)}
.color-preview input[type=color]{opacity:0;position:absolute;inset:0;width:100%;height:100%;cursor:pointer}
.color-row input[type=text]{width:110px;background:var(--input-bg);border:1px solid var(--border);border-radius:6px;padding:7px 10px;color:var(--white);font-family:monospace;font-size:13px;outline:none}
.color-value{font-size:12px;color:var(--muted);flex:1 1 170px}
.tema-cards{display:flex;gap:10px}
.tema-card{flex:1;border-radius:10px;padding:12px;border:2px solid var(--border);cursor:pointer;transition:all .2s;text-align:center;min-width:0}
.tema-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.tema-card.active{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15)}
.tema-card-preview{height:40px;border-radius:6px;margin-bottom:8px}
.tema-card-label{font-size:12px;font-weight:600;color:var(--muted)}
.tema-card.active .tema-card-label{color:var(--accent)}
.tema-dark .tema-card-preview{background:linear-gradient(135deg,#080808,#1e1e1e)}
.tema-light .tema-card-preview{background:linear-gradient(135deg,#f0f4f8,#ffffff)}
.tema-gray .tema-card-preview{background:linear-gradient(135deg,#1c1c21,#28282f)}
.font-options{display:flex;flex-direction:column;gap:8px}
.font-option{padding:10px 14px;border-radius:8px;border:2px solid var(--border);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:space-between}
.font-option:hover{border-color:var(--accent)}
.font-option.active{border-color:var(--accent);background:rgba(var(--accent-rgb),.08)}
.font-option-name{font-size:13px;font-weight:600}
.font-option-preview{font-size:16px;color:var(--muted)}
.sidebar-w-slider{width:100%;accent-color:var(--accent)}
.range-hint{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:4px}
.weekday-row{display:flex;flex-wrap:wrap;gap:8px}
.weekday-row label{display:inline-flex!important;align-items:center;gap:6px;margin:0!important;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--input-bg);color:var(--white)!important;text-transform:none!important;letter-spacing:0!important;font-size:12px!important;cursor:pointer}
.weekday-row input{width:16px;height:16px}
.logo-preview-wrap{display:flex;align-items:center;gap:14px;margin-top:12px}
.logo-preview-img{max-height:60px;max-width:160px;object-fit:contain}
.apariencia-save-bar{position:sticky;bottom:0;background:var(--topbar-bg);backdrop-filter:blur(12px);border-top:1px solid var(--border-soft);padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.apariencia-save-bar .hint{font-size:12px;color:var(--muted)}
.apariencia-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:700px){
  .apariencia-grid{grid-template-columns:1fr;padding:14px;gap:14px}
  .apariencia-card{padding:16px}
  .tema-cards{flex-direction:column}
  .apariencia-save-bar{position:static;padding:14px;flex-direction:column;align-items:stretch}
  .apariencia-actions .btn{width:100%;justify-content:center}
}

/* Lista de ítems POS en móvil (reemplaza la tabla) */
#pos-items-mobile{display:none}
@media(max-width:900px){
  #pos-cart-table-wrap{display:none!important}
  #pos-items-mobile{display:block;margin-bottom:16px}
}
.pos-item-card{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.pos-item-card-img{width:44px;height:44px;object-fit:cover;border-radius:7px}
.pos-item-card-nombre{font-weight:600;font-size:13px;line-height:1.3}
.pos-item-card-det{font-size:11px;color:var(--gray3)}
.pos-item-card-right{text-align:right}
.pos-item-card-sub{font-family:var(--font-d);font-size:15px;font-weight:700;color:var(--white)}
.pos-item-card-ctrl{display:flex;align-items:center;gap:5px;margin-top:4px;justify-content:flex-end}
.pos-item-qty-btn{background:var(--gray2);border:none;color:var(--white);width:26px;height:26px;border-radius:6px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pos-item-qty{width:40px;text-align:center;background:var(--gray2);border:1px solid var(--border);border-radius:5px;padding:3px;color:var(--white);font-size:13px}
.pos-item-del{background:none;border:none;color:var(--gray3);cursor:pointer;font-size:18px;padding:0 4px}
.pos-item-del:hover{color:#ef4444}

/* Scan input más grande en móvil */
@media(max-width:600px){
  .pos-scan-input{font-size:18px;padding:11px 13px}
  .pos-total-value{font-size:24px}
  .pos-confirm-btn{font-size:16px;padding:13px}
}

/* ── TOOLBAR PRODUCTOS — colapso secundario en mobile ───── */
.prod-more-toggle{ display:none!important }
/* En desktop, el wrapper de btns secundarios siempre visible inline */
.prod-btns-extra{
  display:contents; /* actúa como si los hijos fueran hijos directos del flex padre */
}

@media(max-width:900px){
  /* Botón "⋯ Más" solo visible en mobile/tablet */
  .prod-more-toggle{
    display:flex!important;align-items:center;gap:4px;
    border-color:rgba(148,163,184,.35);color:var(--gray3);font-size:12px;
  }
  /* Botones secundarios: colapsados por defecto */
  .prod-btns-extra{
    display:none;width:100%;
    flex-wrap:wrap;gap:6px;padding-top:2px;
  }
  .prod-btns-extra.open{ display:flex }
  .prod-btns-extra .btn,.prod-btns-extra select{ font-size:12px }
  /* Búsqueda y filtro: ancho completo */
  #prod-search{ width:100%!important;flex:none!important }
  #prod-cat-filter{ width:100%!important;flex:none!important }
  /* "+ Nuevo" oculto en mobile (usa el FAB) */
  #btn-nuevo-prod{ display:none!important }
}

/* ── MOBILE MEJORADO ────────────────────────────────────────
   Pantallas < 480px: tablas → tarjetas, botones táctiles
─────────────────────────────────────────────────────────── */
@media(max-width:480px){

  /* Topbar */
  .topbar-title{ font-size:14px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
  #hamburger{ width:36px;height:36px }
  /* Saludo del Dashboard: en celular se acorta (se oculta ", estás en
     el Dashboard de") para que entre en una sola línea — la topbar
     tiene alto fijo, no puede pasar a dos renglones. */
  .tt-full{ display:none }
  .topbar-title.tt-centro{ font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }

  /* Tabs de secciones — scroll horizontal */
  .nav-tabs{ overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px }
  .nav-tabs::-webkit-scrollbar{ display:none }
  .nav-tab{ white-space:nowrap;font-size:12px;padding:7px 12px }

  /* Modales — casi pantalla completa */
  .modal-overlay{ padding-top:4px }
  .modal{ max-height:96vh;overflow-y:auto }
  .modal-body{ max-height:70vh;overflow-y:auto }

  /* Stat cards */
  .stats-grid{ grid-template-columns:1fr 1fr }
  .stat-card{ padding:12px }
  .stat-card-value{ font-size:20px }
  .stat-card-label{ font-size:10px }

  /* Botones táctiles en tablas */
  .td-actions .btn{ min-height:40px;min-width:36px }

  /* ──────────────────────────────────────────────────────────
     TABLA DE PEDIDOS / VENTAS → TARJETAS
     Columnas: (1)número (2)cliente (3)cant (4)estado (5)total (6)fecha (7)actions
  ────────────────────────────────────────────────────────── */
  #ped-table thead{ display:none }
  #ped-table{ min-width:0!important;border:none;background:transparent }

  #ped-tbody tr{
    display:flex;flex-wrap:wrap;align-items:flex-start;
    background:var(--card);border:1px solid var(--border);
    border-radius:10px;margin-bottom:10px;padding:12px;gap:0;
  }
  #ped-tbody td{ display:block;border:none!important;padding:0!important;font-size:13px }

  /* (1) Número */
  #ped-tbody td:nth-child(1){
    flex:1;min-width:0;
    font-family:var(--font-d);font-size:14px;font-weight:700;color:var(--accent);
  }
  /* (2) Cliente */
  #ped-tbody td:nth-child(2){
    width:100%;padding-top:4px!important;font-weight:600;font-size:14px;
  }
  /* (3) Cantidad ítems → pequeño, a la derecha del número */
  #ped-tbody td:nth-child(3){
    color:var(--gray3);font-size:11px;text-align:right;
  }
  /* (4) Estado → fila completa */
  #ped-tbody td:nth-child(4){ width:100%;padding-top:6px!important }
  #ped-tbody td:nth-child(4) select{
    width:100%!important;font-size:13px!important;
    padding:8px 10px!important;border-radius:7px;
  }
  /* (5) Total → grande */
  #ped-tbody td:nth-child(5){
    flex:1;min-width:0;
    margin-top:8px;padding-top:8px!important;border-top:1px solid var(--border)!important;
    font-family:var(--font-d);font-size:19px;font-weight:900;
  }
  /* (6) Fecha → inline con el total, derecha */
  #ped-tbody td:nth-child(6){
    margin-top:8px;padding-top:8px!important;border-top:1px solid var(--border)!important;
    color:var(--gray3);font-size:11px;text-align:right;align-self:center;
  }
  /* Acciones */
  #ped-tbody .td-actions{
    width:100%;display:flex!important;gap:6px;
    margin-top:8px;padding-top:8px!important;border-top:1px solid var(--border)!important;
  }
  #ped-tbody .td-actions .btn{
    flex:1;text-align:center;padding:9px 6px;font-size:12px;
  }
}

@media(max-width:360px){
  .stats-grid{ grid-template-columns:1fr }
}

/* ══════════════════════════════════════════════════════════
   TARJETAS DE PRODUCTO — vista mobile (JS las genera)
══════════════════════════════════════════════════════════ */
.m-card{
  display:flex;align-items:flex-start;gap:12px;
  background:var(--card);border:1px solid var(--border);
  border-radius:12px;padding:12px 14px;margin-bottom:10px;
  box-shadow:0 2px 8px rgba(0,0,0,.22);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:border-color .15s;
  border-left:3px solid transparent;
}
.m-card:active{ background:rgba(255,255,255,.03) }
.m-card-revisar{ border-left-color:#f59e0b!important;background:rgba(245,158,11,.04)!important }
.m-card-con-stock{ border-left-color:#34d399!important;background:rgba(52,211,153,.04)!important }
.m-card-sin-stock{ opacity:.55 }
.m-card-img{
  width:68px;height:68px;object-fit:cover;
  border-radius:9px;flex-shrink:0;
}
.m-card-body{ flex:1;min-width:0 }
.m-card-nombre{
  font-weight:700;font-size:15px;color:var(--white);line-height:1.3;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.m-card-meta{
  font-size:11px;color:var(--gray3);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.m-card-row{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-top:8px;padding-top:8px;border-top:1px solid var(--border);
}
.m-card-precio{
  font-family:var(--font-d);font-size:20px;font-weight:900;color:var(--white);line-height:1;
}
.m-card-stock{ text-align:right }
.m-card-stock-num{ font-family:var(--font-d);font-size:20px;font-weight:900;color:var(--white) }
.m-card-stock-lbl{ font-size:11px;color:var(--gray3) }
.m-card-footer{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:8px;gap:8px;
}
.m-card-footer .badge{ font-size:12px;padding:4px 10px }
.m-card-actions{ display:flex;gap:4px }
.m-card-btn{
  background:var(--gray2);border:1px solid var(--border);color:var(--white);
  border-radius:8px;padding:8px 11px;font-size:14px;cursor:pointer;
  min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.m-card-btn:active{ background:var(--border) }
.m-card-btn-cart{ color:var(--accent) }
.m-card-btn-del{ color:#f87171;border-color:rgba(239,68,68,.3) }

/* ── Banner de inventario: columnas en mobile ────────────── */
@media(max-width:640px){
  #valor-stock-banner > div:first-child{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:8px 12px;
    font-size:12px;
  }
  #valor-stock-banner > div:first-child > span:first-child{
    grid-column:1/-1;font-size:11px;
  }
  #valor-stock-banner strong{ font-size:14px }
}

/* ══════════════════════════════════════════════════════════
   VENTAS MÓVIL — mejoras POS + tablas → tarjetas
══════════════════════════════════════════════════════════ */

/* ── 1. Barra sticky inferior del POS (solo móvil) ───────── */
#pos-sticky-bar {
  display: none;
}
@media(max-width:900px) {
  #pos-sticky-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--card);
    border-top: 2px solid var(--accent);
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 200;
    box-shadow: 0 -6px 28px rgba(0,0,0,.55);
    transform: translateY(110%);
    transition: transform 0.22s ease;
  }
  #pos-sticky-bar.visible { transform: translateY(0); }
  #pos-sticky-bar-label { font-size: 10px; color: var(--gray3); letter-spacing: 1px; text-transform: uppercase; line-height: 1; margin-bottom: 2px; }
  #pos-sticky-bar-total { font-family: var(--font-d); font-size: 26px; font-weight: 900; color: var(--accent); line-height: 1; }
  #pos-sticky-bar-left  { flex: 1; }
  #pos-sticky-bar-items { font-size: 11px; color: var(--gray3); }
  #pos-sticky-bar-btn {
    background: var(--green);
    color: #fff; border: none;
    border-radius: 10px;
    padding: 14px 22px;
    font-family: var(--font-d);
    font-size: 16px; font-weight: 700;
    cursor: pointer; white-space: nowrap;
    letter-spacing: .5px;
    transition: filter .15s;
  }
  #pos-sticky-bar-btn:active { filter: brightness(1.15); }
  #pos-sticky-bar-btn:disabled { background: var(--gray2); color: var(--gray3); cursor: not-allowed; }
  /* Espacio para que el sticky no tape el contenido */
  #page-nueva-venta { padding-bottom: 90px; }
}

/* ── 2. Controles de cantidad más grandes en tarjetas POS ── */
@media(max-width:900px) {
  .pos-item-qty-btn {
    width: 40px !important; height: 40px !important;
    font-size: 22px !important; border-radius: 8px !important;
  }
  .pos-item-qty {
    width: 52px !important; font-size: 15px !important;
    padding: 6px !important; height: 40px;
  }
  .pos-item-card { padding: 12px 14px; }
  .pos-item-card-nombre { font-size: 14px; }
  .pos-item-del { font-size: 22px; padding: 4px 8px; }
}

/* ── 3. Método de pago — grilla 2×2 en móvil ────────────── */
@media(max-width:700px) {
  .pos-metodo-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
  }
  .pos-metodo-btn {
    padding: 13px 6px !important;
    font-size: 13px !important;
    min-width: 0 !important;
  }
}

/* ── 4. Tabla Ventas → tarjetas en móvil ────────────────── */
@media(max-width:600px) {
  #ventas-table { min-width: 0 !important; border: none; background: transparent; }
  #ventas-table thead { display: none; }
  #ventas-tbody tr {
    display: flex; flex-wrap: wrap;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 10px; margin-bottom: 10px; padding: 12px; gap: 0;
  }
  #ventas-tbody td { display: block; border: none !important; padding: 2px 0 !important; }
  /* N° venta */
  #ventas-tbody td:nth-child(1) { font-family: var(--font-d); font-size: 13px; font-weight: 700; color: var(--accent); width: 50%; }
  /* Cliente */
  #ventas-tbody td:nth-child(2) { font-weight: 700; font-size: 14px; width: 50%; text-align: right; }
  /* Origen */
  #ventas-tbody td:nth-child(3) { font-size: 11px; color: var(--gray3); width: 50%; padding-top: 4px !important; }
  /* Items */
  #ventas-tbody td:nth-child(4) { font-size: 11px; color: var(--gray3); width: 50%; text-align: right; padding-top: 4px !important; }
  /* Total */
  #ventas-tbody td:nth-child(5) { font-family: var(--font-d); font-size: 22px; font-weight: 900; color: var(--white); width: 55%; padding-top: 8px !important; }
  /* Estado */
  #ventas-tbody td:nth-child(6) { width: 45%; text-align: right; padding-top: 8px !important; display: flex; align-items: center; justify-content: flex-end; }
  /* Fecha */
  #ventas-tbody td:nth-child(7) { font-size: 11px; color: var(--gray3); width: 100%; padding-top: 2px !important; }
  /* Acciones */
  #ventas-tbody td:nth-child(8) {
    width: 100%; display: flex !important; gap: 8px;
    margin-top: 10px; padding-top: 10px !important;
    border-top: 1px solid var(--border) !important;
  }
  #ventas-tbody td:nth-child(8) .btn { flex: 1; text-align: center; padding: 10px 6px; font-size: 13px; }

  /* Tabla Pedidos — misma mejora */
  #ped-table { min-width: 0 !important; border: none; background: transparent; }
  #ped-table thead { display: none; }
  #ped-tbody tr {
    display: flex; flex-wrap: wrap;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 10px; margin-bottom: 10px; padding: 12px; gap: 0;
  }
  #ped-tbody td { display: block; border: none !important; padding: 2px 0 !important; font-size: 13px; }
  #ped-tbody td:nth-child(1) { font-family: var(--font-d); font-size: 13px; font-weight: 700; color: var(--accent); width: 50%; }
  #ped-tbody td:nth-child(2) { font-weight: 700; font-size: 14px; width: 50%; text-align: right; }
  #ped-tbody td:nth-child(3) { font-size: 11px; color: var(--gray3); width: 50%; }
  #ped-tbody td:nth-child(4) { font-size: 11px; color: var(--gray3); width: 50%; text-align: right; }
  #ped-tbody td:nth-child(5) { font-family: var(--font-d); font-size: 22px; font-weight: 900; width: 55%; padding-top: 8px !important; }
  #ped-tbody td:nth-child(6) { width: 45%; text-align: right; padding-top: 8px !important; display: flex; align-items: center; justify-content: flex-end; }
  #ped-tbody .td-actions { width: 100%; display: flex !important; gap: 8px; margin-top: 10px; padding-top: 10px !important; border-top: 1px solid var(--border) !important; }
  #ped-tbody .td-actions .btn { flex: 1; text-align: center; padding: 10px 6px; }

  /* Filtros de ventas — stack vertical */
  #page-ventas .table-header { flex-direction: column; align-items: stretch; }
  #page-ventas .table-header > div { flex-wrap: wrap; gap: 6px; }
  #page-ventas .table-header .search-bar { flex: 1; min-width: 120px; }
  #page-pedidos .table-header { flex-direction: column; align-items: stretch; }
}

/* ══════════════════════════════════════════════════════════
   POS MOBILE — resultados de búsqueda y layout mejorado
   ══════════════════════════════════════════════════════════ */

/* Resultados de búsqueda: tarjetas más grandes en móvil */
@media(max-width:900px) {
  /* El panel de resultados ocupa todo el ancho disponible */
  #pos-results-wrap {
    position: relative;
    z-index: 50;
  }
  .pos-results {
    border-radius: 12px;
    max-height: 55vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Cada ítem de resultado: más grande, más legible */
  .pos-result-item {
    grid-template-columns: 64px 1fr auto !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    min-height: 76px;
  }
  .pos-result-img {
    width: 64px !important;
    height: 64px !important;
    border-radius: 10px !important;
  }
  .pos-result-nombre {
    font-size: 15px !important;
    line-height: 1.35;
  }
  .pos-result-cod {
    font-size: 12px !important;
    margin-top: 3px;
  }
  .pos-result-precio {
    font-size: 18px !important;
    white-space: nowrap;
  }
  .pos-result-stock {
    font-size: 12px !important;
    margin-top: 4px;
    white-space: nowrap;
  }
}

/* En pantallas muy pequeñas (<480px): layout de resultados en 2 columnas */
@media(max-width:480px) {
  .pos-results {
    max-height: 60vh;
  }
  .pos-result-item {
    grid-template-columns: 56px 1fr !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    position: relative;
  }
  /* Precio superpuesto arriba a la derecha */
  .pos-result-item > div:last-child {
    position: absolute;
    top: 12px;
    right: 14px;
    text-align: right;
  }
  .pos-result-nombre {
    font-size: 14px !important;
    padding-right: 70px; /* dejar espacio para precio */
  }
  .pos-result-precio {
    font-size: 15px !important;
  }
}

/* Columna izquierda del POS (búsqueda + resultados) ocupa toda la pantalla en mobile */
@media(max-width:900px) {
  /* Cuando hay resultados, el wrap se muestra full-bleed */
  #pos-results-wrap[style*="block"],
  #pos-results-wrap:not([style*="none"]) {
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
  }

  /* Quitar el padding lateral del wrap de búsqueda para que los resultados lleguen al borde */
  .pos-scan-wrap {
    padding: 0;
  }

  /* Input de búsqueda: altura mínima táctil confortable */
  .pos-scan-input {
    min-height: 52px;
    font-size: 17px !important;
  }
}

/* ── POS mobile: ítems del carrito más compactos y cómodos ── */
@media(max-width:900px) {
  .pos-item-card {
    grid-template-columns: 56px 1fr auto !important;
    gap: 10px;
    padding: 12px 14px !important;
    border-radius: 12px;
    margin-bottom: 10px;
  }
  .pos-item-card-img {
    width: 56px !important;
    height: 56px !important;
    border-radius: 9px;
  }
  .pos-item-card-nombre { font-size: 14px !important; }
  .pos-item-card-sub    { font-size: 16px !important; }
  .pos-item-card-det    { font-size: 12px !important; }
}

/* ── Modal venta detalle: footer en mobile ── */
@media(max-width:600px) {
  #modal-venta-detalle .modal-footer {
    padding: 10px 12px 14px !important;
    gap: 6px !important;
  }
  #modal-venta-detalle .modal-footer .btn {
    font-size: 11px !important;
    padding: 7px 8px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   GASTOS + MOBILE PATCH
   ══════════════════════════════════════════════════════════ */

/* modal-box = alias de .modal (usado en modal gasto y otros) */
.modal-box{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  width:calc(100% - 32px);
  max-width:540px;
  margin:0 auto 60px;
  overflow:hidden;
}

/* section-header: encabezado de sección con título + controles */
.section-header{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
  padding:20px 24px 16px;
  flex-wrap:wrap;
}

/* Gastos: resumen grid más compacto en mobile */
@media(max-width:700px){
  #gastos-resumen{
    grid-template-columns:repeat(2,1fr)!important;
    padding:0 14px 16px!important;
  }
  #page-gastos .table-wrap{
    margin:0 14px 16px!important;
  }
}
@media(max-width:420px){
  #gastos-resumen{
    grid-template-columns:1fr!important;
  }
}

/* Dashboard rentabilidad panel */
#panel-rentabilidad .stats-grid,
.rentabilidad-grid{
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
@media(max-width:600px){
  #panel-rentabilidad .stats-grid,
  .rentabilidad-grid{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:360px){
  #panel-rentabilidad .stats-grid,
  .rentabilidad-grid{
    grid-template-columns:1fr;
  }
}

/* ── MEJORAS GLOBALES MOBILE ───────────────────────────── */
@media(max-width:900px){

  /* Modal box se convierte en sheet desde abajo */
  .modal-overlay{
    align-items:flex-end;
    padding:0;
  }
  .modal-box{
    width:100%;
    max-width:100%!important;
    margin:0;
    border-radius:20px 20px 0 0;
    max-height:92vh;
    overflow-y:auto;
  }

  /* Section header en mobile: siempre columna */
  .section-header{
    flex-direction:column;
    align-items:flex-start;
    padding:14px 14px 10px;
    gap:10px;
  }
  .section-header > div:last-child{
    width:100%;
    flex-wrap:wrap;
  }
  .section-header .btn{
    flex:1;
    justify-content:center;
    min-width:120px;
  }

  /* Section title más compacto */
  .section-title{
    font-size:20px!important;
    margin-bottom:14px;
  }

  /* Stats grid en mobile: 2 columnas */
  .stats-grid{
    grid-template-columns:1fr 1fr!important;
  }

  /* Padding de página */
  .page{
    padding:12px;
  }

  /* table-wrap: scroll horizontal con hint */
  .table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .table-wrap table{
    min-width:480px;
  }

  /* Botones de acción en tabla: solo ícono */
  .td-actions .btn span{
    display:none;
  }

  /* Inputs y selects: tamaño táctil */
  input, select, textarea{
    font-size:16px!important; /* evita zoom en iOS */
  }

  /* Formulario: siempre 1 columna */
  .form-row{
    grid-template-columns:1fr!important;
  }

  /* Paginación más compacta */
  .pagination{
    gap:4px;
    padding:10px;
  }

  /* Modal header */
  .modal-head{
    padding:14px 16px;
  }
  .modal-head h3{
    font-size:18px;
  }
  .modal-body{
    padding:14px 16px;
  }
  .modal-footer{
    padding:0 16px 20px;
    flex-wrap:wrap;
    gap:8px;
  }
  .modal-footer .btn{
    flex:1;
    justify-content:center;
  }

  /* Bulk bar: ancho completo */
  #bulk-bar{
    left:8px;
    right:8px;
    transform:translateY(120px);
    width:auto;
  }
  #bulk-bar.show{
    transform:translateY(0);
  }

  /* Toast: ancho completo en mobile */
  #toast{
    left:12px;
    right:12px;
    transform:translateX(0) translateY(80px);
    white-space:normal;
    text-align:center;
    justify-content:center;
    bottom:16px;
  }
  #toast.show{
    transform:translateX(0) translateY(0);
  }
}

@media(max-width:480px){
  /* Stats: 1 columna en pantallas muy chicas */
  .stats-grid{
    grid-template-columns:1fr!important;
    gap:8px;
  }
  .stat-card-value{
    font-size:28px;
  }
  /* Tabla: font más chico */
  td, th{
    padding:8px 10px;
    font-size:12px;
  }
  /* Importar: steps scroll horizontal */
  .import-steps{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
  }
}

/* ══════════════════════════════════════════════════════════
   PRODUCTOS MOBILE — barra de filtros + FAB + paginación
══════════════════════════════════════════════════════════ */

/* FAB oculto en desktop */
#fab-nuevo-prod { display:none }

@media(max-width:900px){

  /* ── Barra de filtros: stack ordenado ─────────────────── */
  #page-productos .table-header{
    padding:12px 14px;
    gap:10px;
  }
  #page-productos .table-header h3{
    font-size:17px;
    margin:0;
  }
  /* El div contenedor de controles: columna */
  #page-productos .table-header > div:last-child{
    flex-direction:column;
    width:100%;
    gap:8px;
  }
  /* Búsqueda full width, font cómodo */
  #prod-search{
    width:100%!important;
    font-size:15px!important;
    padding:11px 14px!important;
    border-radius:10px!important;
  }
  /* Categoría full width */
  #prod-cat-filter{
    width:100%!important;
    font-size:15px!important;
    padding:10px 14px!important;
    border-radius:10px!important;
  }
  /* Fila de botones primarios: en línea */
  #btn-sel-panel,
  #btn-ir-venta-activa{
    flex:1;
    text-align:center;
    padding:10px 8px!important;
    font-size:13px!important;
  }
  /* Ocultar "Nuevo producto" regular — lo reemplaza el FAB */
  #btn-nuevo-prod{ display:none!important }
  /* Ocultar el toggle "⋯ Más opciones" — simplifica barra */
  .prod-more-toggle{ display:none!important }
  /* Botones extra siempre visibles pero en grilla 2-col */
  #prod-btns-extra{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:6px;
    width:100%;
  }
  #prod-btns-extra .btn,
  #prod-btns-extra select{
    font-size:12px!important;
    padding:9px 6px!important;
    text-align:center;
    border-radius:8px!important;
    width:100%!important;
  }

  /* ── FAB: botón flotante "+" ───────────────────────────── */
  #fab-nuevo-prod{
    display:flex;
    position:fixed;
    bottom:28px;
    right:18px;
    z-index:500;
    width:58px;
    height:58px;
    border-radius:50%;
    background:var(--accent);
    color:#fff;
    font-size:34px;
    font-weight:300;
    line-height:1;
    align-items:center;
    justify-content:center;
    border:none;
    cursor:pointer;
    box-shadow:0 6px 24px rgba(0,200,255,.5), 0 2px 8px rgba(0,0,0,.4);
    transition:transform .15s, box-shadow .15s;
    -webkit-tap-highlight-color:transparent;
  }
  #fab-nuevo-prod:active{
    transform:scale(.92);
    box-shadow:0 3px 12px rgba(0,200,255,.4);
  }

  /* ── Paginación: botones táctiles cómodos ─────────────── */
  .pagination{
    gap:6px;
    padding:14px 10px;
    flex-wrap:wrap;
  }
  .pagination a,
  .pagination button,
  .pagination span{
    min-width:42px;
    min-height:42px;
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    font-size:15px!important;
    border-radius:8px!important;
    padding:0 10px!important;
  }
}

/* form-label / form-input: usados en modales de gastos y proveedores */
.form-label{display:block;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--gray3);margin-bottom:5px}
.form-input{width:100%;background:var(--gray);border:1px solid var(--border);border-radius:8px;padding:10px 13px;color:var(--white);font-family:var(--font-b);font-size:14px;outline:none;transition:border-color .2s}
.form-input:focus{border-color:var(--accent)}

.estadia-picker{position:fixed;z-index:10002;width:340px;background:#2f2f2f;border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 48px rgba(0,0,0,.55);padding:14px;color:#fff;font-family:var(--font-b);display:none}
.estadia-picker-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.estadia-picker-head strong{text-transform:capitalize;font-size:15px}
.estadia-picker button{border:0;background:transparent;color:#fff;cursor:pointer;border-radius:4px}
.estadia-picker-head button{font-size:26px;width:36px;height:34px;color:#d7e7f5}
.estadia-picker-week,.estadia-picker-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.estadia-picker-week{font-size:12px;font-weight:700;margin-bottom:6px;color:#dbeafe}
.estadia-picker-grid span,.estadia-picker-day{height:34px;display:flex;align-items:center;justify-content:center;font-size:14px}
.estadia-picker-day:hover,.estadia-picker-day.active{background:#9ecbff;color:#0f172a;font-weight:800}
.estadia-picker-time{display:flex;align-items:center;gap:8px;margin-top:14px;border-top:1px solid rgba(255,255,255,.12);padding-top:12px}
.estadia-picker-time input{width:66px;background:#1f1f1f;border:1px solid rgba(255,255,255,.18);border-radius:6px;color:#fff;padding:8px;text-align:center;font-weight:700}
.estadia-picker-time button{margin-left:auto;background:var(--accent);color:#061018;font-weight:800;padding:8px 14px}
.modal-footer{display:flex;gap:10px;justify-content:flex-end;padding:16px 20px;border-top:1px solid var(--border)}

/* modal-header = alias de modal-head */
.modal-header{
  padding:18px 20px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.modal-header h3{
  font-family:var(--font-d);
  font-size:20px;
  font-weight:700;
}

/* grid 2 col en modal: siempre 1 col en mobile */
@media(max-width:520px){
  .modal-box [style*="grid-template-columns:1fr 1fr"],
  .modal [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr!important;
  }
}




/* ===== FIX MODAL GASTOS ===== */

.modal-overlay{
  position:fixed;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:20px;

  overflow-y:auto;

  z-index:9999;
}

.modal-box{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;

  width:calc(100% - 32px);
  max-width:540px;

  margin:auto;

  display:flex;
  flex-direction:column;

  max-height:90vh;

  overflow:hidden;

  position:relative;
}

.modal-box .modal-body{
  padding:20px;
  overflow-y:auto;
  flex:1;
  min-height:0;
}

.modal-box .modal-footer{
  padding:16px 20px;
  display:flex;
  justify-content:flex-end;
  gap:10px;

  border-top:1px solid var(--border);

  background:var(--card);

  position:sticky;
  bottom:0;

  z-index:5;
}

@media(max-width:900px){

  .modal-box .modal-footer{
    flex-wrap:wrap;
  }

  .modal-box .modal-footer .btn{
    flex:1;
    justify-content:center;
  }

}

/* ── SweetAlert2: siempre por encima del modal-overlay (z-index:9999) ── */
.swal2-container { z-index: 10001 !important; }
/* Fondo oscuro — cubre todos los estados posibles de la clase del container */
.swal2-container:not(.swal2-toast-column) {
  background: rgba(0,0,0,0.75) !important;
}

/* ── Wizard de proveedor — indicador de pasos ── */
.prov-step {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--border);
  color: var(--muted);
  transition: background .3s, color .3s;
}
.prov-step.active {
  background: var(--accent);
  color: #fff;
}
.prov-step.done {
  background: #22c55e;
  color: #fff;
}
.prov-step-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  transition: background .3s;
  min-width: 20px;
}
.prov-step-line.done {
  background: #22c55e;
}

/* ── Páginas fuera de #main (hijos directos de body) — fix de layout ── */
/* Estas páginas son flex items de body{display:flex} sin flex:1, entonces */
/* aparecen angostas a la derecha de #main. position:fixed las reubica. */
body > .page.active {
  position: fixed !important;
  top: 56px;
  left: var(--sidebar-w);
  right: 0;
  bottom: 0;
  overflow-y: auto;
  background: var(--bg);
  z-index: 20;
}

/* ── Diseño Web — panel editor full-height ───────────────── */
#page-diseno {
  padding: 0 !important;
  position: fixed !important;
  top: 56px;
  left: var(--sidebar-w);
  right: 0;
  bottom: 0;
  flex-direction: column;
  z-index: 30;
  background: var(--card);
  width: auto;
  height: auto;
  /* Transición de entrada Apple-style */
  transition: left .38s cubic-bezier(.4,0,.2,1);
}
#page-diseno.page.active { display: flex !important; }
#page-diseno > .dsn-header { padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
#page-diseno > .dsn-body { display: grid; grid-template-columns: minmax(320px, 380px) minmax(0, 1fr); gap: 0; flex: 1; min-height: 0; width: 100%; overflow: hidden; }
#dsn-controles { min-width: 0; overflow-y: auto; padding: 8px 16px 40px; border-right: 1px solid var(--border); }
#dsn-preview-col { min-width: 0; display: flex; flex-direction: column; overflow: hidden; }

/* ── Diseño Web en mobile (<900px) ──────────────────────────────────────
   El grid de 2 columnas de arriba (minmax(320px,380px) + resto) da por
   sentado una pantalla ancha: en un celular la sola columna de controles
   ya pide 320px mínimo y deja el iframe de preview aplastado o cortado.
   Acá se apila todo en una sola columna que scrollea entera: primero los
   acordeones, después la preview (con una altura fija razonable en vez
   de "lo que sobre"). ── */
@media (max-width: 900px) {
  #page-diseno > .dsn-header { padding: 10px 14px; }
  #page-diseno > .dsn-body {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
  }
  #dsn-controles {
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow-y: visible;
  }
  #dsn-preview-col {
    flex: none;
    height: 62vh;
    min-height: 340px;
    border-top: 1px solid var(--border);
  }
  /* Grids de 2 y 3 columnas de los campos (inline en el HTML, así que hace
     falta !important para pisarlos) — se apilan en una sola columna. */
  #dsn-controles [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Swatches de color: 36px es chico para tocar con el dedo en un celular. */
  #dsn-controles [style*="width:36px;height:36px"] {
    width: 44px !important;
    height: 44px !important;
  }
  /* Botones de Cambiar plantilla/Descartar/Restaurar/Publicar (topbar, solo
     visibles en Diseño Web): sin wrap se salían de la pantalla en celular
     (no usan <span> para el texto, así que la regla genérica que oculta
     texto de botones en mobile no los alcanza). */
  #topbar-dsn-actions {
    flex-wrap: wrap;
    gap: 6px;
  }
  #topbar-dsn-actions .btn {
    font-size: 11px !important;
    padding: 6px 8px !important;
  }
  /* Paso 1 (elegir plantilla): el padding lateral de 28px y las cards de
     170px fijos (puestas por JS con inline style, ver cargarPlantillas()
     en admin.js) daban por sentado una pantalla ancha — en celular sobraba
     casi todo el ancho al lado de cada card en vez de acomodar 2 por fila,
     y el padding de 28px comía espacio de sobra. Se pisa el inline style
     igual que se hace con #dsn-controles más arriba. */
  #dsn-paso1 { padding: 8px 14px 24px !important; }
  #plantillas-lista { gap: 10px !important; }
  #plantillas-lista > div[style*="width:170px"] {
    width: calc(50% - 5px) !important;
  }
}
@media (max-width: 480px) {
  #dsn-preview-col { height: 52vh; min-height: 280px; }
}
@media (max-width: 400px) {
  /* Pantallas muy angostas: ni siquiera 2 cards de plantilla entran cómodas
     (170px×2 + gap ya no cierra con el padding restante) — se apilan en
     una sola columna, igual que hace el resto del formulario en 480px. */
  #plantillas-lista > div[style*="width:170px"] {
    width: 100% !important;
  }
}

/* ── Modo fullscreen Diseño Web: sidebar sale, panel se expande ───────────
   Al activar Diseño Web, el sidebar se desliza fuera (translateX -100%) y
   el panel se expande hasta left:0, ganando el ancho completo de la pantalla.
   El topbar también crece con #main. Transición coordinada tipo Apple. ── */

/* Sobreescribimos el transition del sidebar para sumar transform al resto */
#sidebar {
  transition: background-color .25s, border-color .25s, color .15s,
              transform .38s cubic-bezier(.4,0,.2,1);
}
/* #main necesita transición en margin-left para que el topbar también se expanda */
#main {
  transition: margin-left .38s cubic-bezier(.4,0,.2,1);
}

body.dsn-modo-activo #sidebar {
  transform: translateX(-100%);
  pointer-events: none;
}
body.dsn-modo-activo #main {
  margin-left: 0;
}
body.dsn-modo-activo #page-diseno {
  left: 0;
}
/* Botón ← Volver: siempre en col 1 row 1 del topbar, oculto salvo en modo DW */
#dsn-volver-btn { display: none !important; grid-column: 1; grid-row: 1; }
body.dsn-modo-activo #dsn-volver-btn { display: flex !important; }
body.dsn-modo-activo #dsn-volver-btn:hover { background: rgba(255,255,255,.1); }
/* En modo DW, ocultar el hamburger (el sidebar ya no está) */
body.dsn-modo-activo #hamburger { display: none !important; }

/* Editor visual "click para editar" (Diseño Web): resalta el acordeón que
   se acaba de abrir por un click hecho en el preview del iframe. */
.dsn-acc-flash { animation: dsnAccFlash 1.2s ease; border-radius: 8px; }
@keyframes dsnAccFlash {
  0%   { background: rgba(0, 200, 255, .18); }
  100% { background: transparent; }
}

/* Portada de bienvenida al ingresar al panel (solo en login fresco) */
#bienvenida-overlay {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(var(--accent-rgb),.14), var(--black) 70%);
  cursor: pointer;
  animation: bienvenidaFadeIn .5s ease both;
}
#bienvenida-overlay.bienvenida-out { animation: bienvenidaFadeOut .4s ease both; }
#bienvenida-fuegos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bienvenida-box { position: relative; z-index: 1; text-align: center; animation: bienvenidaPop .6s cubic-bezier(.2,.9,.3,1.3) both; }
.bienvenida-logo { height: 92px; width: auto; margin: 0 auto 22px; display: block; filter: drop-shadow(0 0 30px rgba(var(--accent-rgb),.35)); }
.bienvenida-saludo { font-family: var(--font-d); font-size: 34px; font-weight: 900; color: var(--white); letter-spacing: .5px; }
.bienvenida-marca { font-family: var(--font-d); font-size: 20px; font-weight: 700; color: var(--gray3); margin-top: 6px; letter-spacing: 1px; }
.bienvenida-marca span { color: var(--accent); }
@keyframes bienvenidaFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bienvenidaFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes bienvenidaPop { 0% { opacity: 0; transform: scale(.85); } 100% { opacity: 1; transform: scale(1); } }
@media (max-width: 480px) {
  .bienvenida-logo { height: 68px; }
  .bienvenida-saludo { font-size: 26px; }
  .bienvenida-marca { font-size: 16px; }
}

/* "AirOs" con un efecto "aire": degradé celeste/blanco que fluye suave
   (no un loop duro como el arcoíris) más un resplandor que respira,
   como una brisa — en vez de las letras de "IMPULSA" en tecnoevolución. */
.text-air {
  background: linear-gradient(90deg, #ffffff, #b8ecff, #00c8ff, #8fe3ff, #ffffff);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: airFlow 6s ease-in-out infinite, airBreathe 3.4s ease-in-out infinite;
}
@keyframes airFlow { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } }
@keyframes airBreathe {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(0,200,255,.25)); }
  50%      { filter: drop-shadow(0 0 16px rgba(0,200,255,.55)); }
}

/* Orden de secciones (Diseño Web) — lista arrastrable */
#dsn-orden-lista li:hover { border-color: rgba(var(--accent-rgb),.4) !important; }
#dsn-orden-lista li:active { cursor: grabbing !important; }
#dsn-orden-lista li button:disabled { opacity: .3; cursor: default; }

/* ══════════════════════════════════════════════════════════════════════
   Auditoría mobile — módulos 1 a 38 + modales (alta prioridad)
   Cada bloque de acá abajo corrige un caso confirmado donde el layout
   usa columnas fijas en píxeles (mezcladas con fr/auto) o un contenedor
   flex sin wrap, y la regla genérica de mobile (que solo pisa
   "grid-template-columns:1fr 1fr" dentro de .modal/.modal-box, ver más
   arriba) no llega — porque es contenido de página, no de un modal, o
   porque el patrón de columnas no es un simple "1fr 1fr".
   ══════════════════════════════════════════════════════════════════════ */

/* Módulo 23 (Compras) y Módulo 26 (Estadísticas): fila de gráficos con
   una columna fija de 300-320px al lado de una "1fr" — la fija sola ya
   no entra en un celular. Se apilan en una sola columna. */
@media (max-width: 860px) {
  #compras-charts-row,
  #est-charts-row {
    grid-template-columns: 1fr !important;
  }
}

/* Módulo 10 (Cuotas): la fila de encabezado (HTML) y cada fila de plan
   (armada por JS en cuotasAdminRender()) comparten esta clase y la misma
   grilla de 5 columnas fijas — se apilan en una sola columna en celular. */
@media (max-width: 520px) {
  .cuo-grid-row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
}

/* Módulo 18 (Etiquetas): panel izquierdo (buscador/lista de productos,
   340px fijos) + panel derecho (seleccionados) en una fila flex sin wrap
   y con overflow:hidden — en celular la columna izquierda sola ocupaba
   casi toda la pantalla y tapaba la derecha. Se apilan verticalmente. */
@media (max-width: 700px) {
  #etiq-split {
    flex-direction: column;
    height: calc(100vh - 200px);
    overflow-y: auto;
    overflow-x: hidden;
  }
  #etiq-split > div:first-child {
    width: 100%;
    min-width: 0;
    flex: none;
    max-height: 45vh;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  #etiq-split > div:last-child {
    flex: none;
  }
}

/* Módulo 6 (Diseño Web, Paso 2): barra "Vista previa / Escritorio / Móvil
   / ↻" sin flex-wrap y con botones de padding fijo por estilo inline (no
   heredan el achique general de .btn en mobile) — en un celular angosto
   el botón de recargar quedaba fuera del área visible/clickeable. */
@media (max-width: 900px) {
  #dsn-preview-toolbar {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  #dsn-preview-toolbar .btn {
    padding: 6px 8px !important;
    font-size: 11px !important;
  }
}

/* Módulo 34 (Listas de Precios): sidebar de listas subidas (250px fijos)
   + panel de ítems en una fila flex sin wrap — se apilan en celular. La
   tabla de ítems (armada por JS en _lpRenderPanel) ya se envuelve en
   .table-wrap desde ese mismo cambio, así que acá solo falta apilar. */
@media (max-width: 700px) {
  #lp-view-listas {
    flex-direction: column;
    height: auto;
    max-height: none;
    overflow: visible;
  }
  #lp-lista-sidebar {
    width: 100%;
    min-width: 0;
    max-height: 35vh;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

/* Modal Compra (modal-compra): varias grillas mezclan columnas fijas en
   píxeles con fr/auto (fecha/tipo/n° de factura, proveedor/CUIT, el
   encabezado + cada renglón de ítems que arma _mcRenderItems() en JS con
   la clase .mc-row, el bloque "sin ítems", y los 3 totales) — ninguna
   está cubierta por la regla genérica (que solo agarra "1fr 1fr"). Se
   apilan en una sola columna en celular. */
@media (max-width: 600px) {
  #modal-compra [style*="grid-template-columns:140px 140px 1fr"],
  #modal-compra [style*="grid-template-columns:1fr 180px"],
  #modal-compra [style*="grid-template-columns:1fr 120px 120px"],
  #modal-compra [style*="grid-template-columns:1fr 100px 72px 80px 90px 32px"],
  #modal-compra [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* Modal Factura Nueva (modal-factura-nueva): fila de Alícuota IVA
   (1fr 3fr) y el renglón de "ítem libre" (1fr 110px 70px 110px auto) —
   ninguna de las dos es un simple "1fr 1fr", así que la regla genérica
   no las agarra. Se apilan en una sola columna en celular. */
@media (max-width: 600px) {
  #modal-factura-nueva [style*="grid-template-columns:1fr 3fr"],
  #modal-factura-nueva [style*="grid-template-columns:1fr 110px 70px 110px auto"] {
    grid-template-columns: 1fr !important;
  }
}

/* Modal Editor de Comprobantes y Modal Editor de Presupuestos: mismo
   patrón "280px 1fr" (panel de ajustes + vista previa) en los dos, sin
   ningún ajuste para mobile. Se apilan en una sola columna en celular. */
@media (max-width: 700px) {
  #modal-editor-comprobante [style*="grid-template-columns:280px 1fr"],
  #modal-editor-presupuesto [style*="grid-template-columns:280px 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Auditoría mobile — 8 pendientes de prioridad media/baja
   ══════════════════════════════════════════════════════════════════════ */

/* Módulo 19 (Nueva Venta): filas de "Ajuste %" y "Total manual" son flex
   sin wrap (select + input fijo + %/$ + monto con margin-left:auto) —
   en celular no entran. Se permite que envuelvan. */
@media (max-width: 480px) {
  #pos-ajuste-pct-wrap,
  #pos-total-manual-wrap {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  #pos-ajuste-monto,
  #pos-total-manual-diff {
    margin-left: 0 !important;
    width: 100%;
    text-align: right;
  }
}

/* Módulo 4 (Importar precios), paso "Mapeá las columnas": .col-map-row
   usa una columna fija de 200px + 1fr — en celular el <select> de mapeo
   queda aplastado a menos de 100px. Se apila en una sola columna. */
@media (max-width: 600px) {
  .col-map-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
}

/* Módulo 29 (Postnet), sucursal de Mercado Pago QR: grilla "1fr 1fr" de
   contenido de página (no de modal), así que la regla genérica que solo
   agarra .modal/.modal-box no llega. Se apila en una sola columna. */
@media (max-width: 600px) {
  #page-postnet [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* Módulo 35 (Locales), panel de Envíos: dos grillas "1fr 1fr" de
   contenido de página — mismo caso que Postnet arriba. */
@media (max-width: 600px) {
  #page-locales [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* Módulo 8 (Combos), renglón de producto en el armador (.combo-item-row,
   armado por JS en comboRenderItems()): flex sin wrap con nombre +
   precio + stepper de cantidad + subtotal + botón eliminar — un nombre
   de producto normal ya desborda el modal en celular. El nombre pasa a
   ocupar su propia línea y el resto envuelve debajo. */
@media (max-width: 480px) {
  #modal-combo .combo-item-row {
    flex-wrap: wrap;
  }
  #modal-combo .combo-item-row > div:first-child {
    flex-basis: 100%;
    min-width: 100%;
  }
}

/* modal-cliente: la barra de 6 pestañas (Datos/Mascotas/Cuenta
   Corriente/Compras/Turnos/Fotos) no tiene ninguna regla CSS propia —
   todo es inline — y no envuelve ni scrollea. En celular no entran las
   6 pestañas. Se permite scroll horizontal con las pestañas en una sola
   línea (mismo patrón que .import-steps en otros módulos), y se achica
   un poco el padding/tamaño de fuente para que entren más. */
@media (max-width: 600px) {
  #modal-cliente > .modal > div[style*="border-bottom:1px solid var(--border);padding:0 24px"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 12px !important;
  }
  #modal-cliente .mcli-tab {
    padding: 10px 12px !important;
    font-size: 12px !important;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* modal-vencimientos: la tabla de productos por vencer es un <table>
   suelto (no usa .table-wrap, que es lo que da overflow-x:auto en el
   resto de la app) dentro de un div que solo tiene overflow-y — 4
   columnas (producto+código, vencimiento, estado, botón) no entran en
   un celular y no hay forma de scrollear para verlas. */
@media (max-width: 480px) {
  #modal-vencimientos .modal-body > div[style*="overflow-y:auto"] {
    overflow-x: auto;
  }
  #modal-vencimientos .data-table {
    min-width: 480px;
  }
}

/* Diseño Web — Módulo "Botones de acción" del hero (#dsn-hero-ctas,
   armado por dsnHeroCtasRender() con grid-template-columns:1fr 1fr auto
   auto): la regla genérica de #dsn-controles ya lo apila en 1 columna
   en mobile, pero el resultado es cosmético feo — el <select> de
   estilo y el botón "✕" (chiquito) quedan cada uno como su propia fila
   de ancho completo. Se los deja compartir una fila entre los dos. */
@media (max-width: 900px) {
  #dsn-hero-ctas [style*="grid-template-columns:1fr 1fr auto auto"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ══════════════════════════════════════════════════════════
   Fase 96/97 — Onboarding: globo tipo historieta que aparece la primera
   vez que se abre cada modal, y recorrido guiado paso a paso del
   Dashboard al entrar por primera vez (ver _tourMostrarGlobo() /
   _onboardingMostrarHint() en admin.js). z-index por encima de
   .modal-overlay (200) para que se vea aun con un modal recién abierto
   detrás.

   Fase 97: pedido del dueño de que el globo "tiene que ser más grande, y
   marcar con el globo directamente a qué sección pertenece" -- se agrandó
   el globo, se le puso una flecha que cambia de lado según si el globo
   queda arriba o abajo del elemento (en vez de una flechita fija en la
   esquina), y se agregó .onboarding-resaltado: un anillo con brillo
   pulsante que se aplica directamente sobre el elemento señalado (tarjeta
   del Dashboard, encabezado del modal, etc.) para que quede clarísimo a
   qué parte de la pantalla se refiere el texto. Para el recorrido guiado
   del Dashboard, además se oscurece el resto de la pantalla con
   .onboarding-spotlight (un recuadro con box-shadow gigante) para que la
   parte explicada resalte por contraste.
   ══════════════════════════════════════════════════════════ */
.onboarding-spotlight{
  position:fixed;
  z-index:9997;
  border-radius:10px;
  box-shadow:0 0 0 9999px rgba(4,6,12,.72);
  pointer-events:none;
  transition:top .28s ease, left .28s ease, width .28s ease, height .28s ease;
}
.onboarding-resaltado{
  position:relative;
  z-index:9998;
  border-radius:10px;
  outline:3px solid #00d4ff;
  outline-offset:3px;
  animation:onboardingResaltadoPulso 1.4s ease-in-out infinite;
}
@keyframes onboardingResaltadoPulso{
  0%,100%{ outline-color:#00d4ff; box-shadow:0 0 0 0 rgba(0,212,255,.45); }
  50%{ outline-color:#7c3aed; box-shadow:0 0 0 6px rgba(124,58,237,0); }
}
.onboarding-globo{
  position:fixed;
  z-index:9999;
  max-width:340px;
  background:linear-gradient(135deg,#00d4ff,#7c3aed);
  color:#fff;
  padding:18px 20px;
  border-radius:16px;
  box-shadow:0 14px 34px rgba(0,0,0,.5);
  font-size:15px;
  line-height:1.5;
  animation:onboardingGloboIn .22s ease-out;
}
/* Flecha dinámica: "flecha-arriba" = el globo está DEBAJO del elemento
   señalado (la flecha apunta hacia arriba, desde el borde superior del
   globo); "flecha-abajo" = el globo está ARRIBA del elemento (la flecha
   sale del borde inferior apuntando hacia abajo). Se elige en JS según
   el espacio disponible en pantalla. */
.onboarding-globo.flecha-arriba:before,
.onboarding-globo.flecha-abajo:before{
  content:'';
  position:absolute;
  left:24px;
  border-width:9px;
  border-style:solid;
  border-color:transparent;
}
.onboarding-globo.flecha-arriba:before{
  top:-9px;
  border-bottom-color:#00d4ff;
}
.onboarding-globo.flecha-abajo:before{
  bottom:-9px;
  border-top-color:#7c3aed;
}
.onboarding-globo-txt{ margin-bottom:12px; font-weight:500; }
.onboarding-globo-ok{
  display:block;
  margin-left:auto;
  background:rgba(255,255,255,.22);
  border:none;
  color:#fff;
  padding:7px 16px;
  border-radius:8px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
.onboarding-globo-ok:hover{ background:rgba(255,255,255,.34); }
.onboarding-globo-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-top:4px;
}
.onboarding-globo-paso{
  font-size:12px;
  font-weight:700;
  opacity:.85;
  white-space:nowrap;
}
.onboarding-globo-botones{
  display:flex;
  gap:6px;
  margin-left:auto;
  flex-wrap:wrap;
}
.onboarding-globo-botones button{
  border:none;
  border-radius:8px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  padding:7px 12px;
  white-space:nowrap;
}
.onboarding-globo-atras,
.onboarding-globo-saltar{
  background:rgba(255,255,255,.16);
  color:#fff;
}
.onboarding-globo-atras:hover,
.onboarding-globo-saltar:hover{ background:rgba(255,255,255,.28); }
.onboarding-globo-sig{
  background:#fff;
  color:#5b21b6;
}
.onboarding-globo-sig:hover{ background:#f1f1ff; }
@keyframes onboardingGloboIn{
  from{ opacity:0; transform:translateY(-6px) scale(.96); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@media (max-width:480px){
  .onboarding-globo{ max-width:calc(100vw - 24px); font-size:14px; }
  .onboarding-globo-botones{ width:100%; }
  .onboarding-globo-botones button{ flex:1; }
}

/* Fase 148: "Nueva Venta" es lo que más se usa → botón destacado en el menú
   (relleno con el color de acento del panel, más alto y con sombra), fijo
   arriba de todo (Fase 148b). Usa las variables de acento: respeta el color que
   cada negocio eligió en Apariencia. */
#nav-nueva-venta{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:800;font-size:14px;letter-spacing:.2px;padding:13px 14px;margin:2px 0 12px;border-radius:12px;box-shadow:0 6px 18px rgba(var(--accent-rgb,0,200,255),.35);text-shadow:0 1px 2px rgba(0,0,0,.35)}
#nav-nueva-venta .nav-icon{opacity:1;stroke:#fff;width:20px;height:20px}
#nav-nueva-venta .nav-num{background:rgba(0,0,0,.22);color:#fff}
#nav-nueva-venta:hover{filter:brightness(1.08);transform:translateY(-1px);color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2))}
#nav-nueva-venta.active{color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.55),0 6px 18px rgba(var(--accent-rgb,0,200,255),.45)}
#nav-nueva-venta.active .nav-num,#nav-nueva-venta:hover .nav-num{background:rgba(0,0,0,.28);color:#fff}

/* Fase 151: barrita para elegir cómo se ordena el menú (A→Z / Tipo / Manual)
   y arrastre de botones en modo Manual (ver bloque Fase 151 en admin.js). */
.nav-orden-bar{display:flex;gap:4px;margin:8px 8px 0;padding:3px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.nav-orden-bar button{flex:1;border:none;background:none;color:var(--gray3);font-size:11px;font-weight:600;padding:5px 4px;border-radius:6px;cursor:pointer;transition:all .15s}
.nav-orden-bar button:hover{color:var(--white);background:rgba(255,255,255,.06)}
.nav-orden-bar button.on{background:rgba(var(--accent-rgb,0,200,255),.18);color:var(--accent)}
.nav-orden-bar .nav-orden-reset{flex:0 0 auto;padding:5px 8px}
.nav-modo-manual .nav-item{cursor:grab}
.nav-item .nav-drag{margin-left:auto;padding:0 2px 0 8px;opacity:.35;font-size:14px;line-height:1;cursor:grab;touch-action:none;user-select:none}
.nav-item:hover .nav-drag{opacity:.8}
.nav-item.nav-arrastrando{opacity:.85;background:rgba(var(--accent-rgb,0,200,255),.14);box-shadow:0 6px 18px rgba(0,0,0,.35);cursor:grabbing;position:relative;z-index:2}
body.nav-arrastrando-body,body.nav-arrastrando-body *{cursor:grabbing !important;user-select:none !important}

/* Fase 152: buscador "Ir a…" (Alt+K) y botón ⌨ de atajos (ver admin.js). */
.nav-orden-bar .nav-atajos-btn{flex:0 0 auto;padding:5px 8px;font-size:13px}
.atajos-overlay{position:fixed;inset:0;z-index:10050;display:none;align-items:flex-start;justify-content:center;padding-top:12vh;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
.atajos-caja{width:min(560px,calc(100vw - 32px));background:var(--card,#141414);border:1px solid var(--border,rgba(255,255,255,.1));border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden}
.atajos-input{width:100%;box-sizing:border-box;border:none;border-bottom:1px solid var(--border,rgba(255,255,255,.1));background:transparent;color:var(--white,#fff);font-size:16px;padding:16px 18px;outline:none}
.atajos-lista{max-height:52vh;overflow-y:auto;padding:6px}
.atajos-op{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:8px;cursor:pointer;color:var(--gray3,#9ca3af);font-size:14px}
.atajos-op.sel,.atajos-op:hover{background:rgba(var(--accent-rgb,0,200,255),.15);color:var(--white,#fff)}
.atajos-op kbd{font-family:inherit;font-size:11px;font-weight:700;padding:2px 7px;border-radius:5px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:var(--gray3,#9ca3af);white-space:nowrap}
.atajos-vacio{padding:14px;color:var(--gray3,#9ca3af);font-size:13px;text-align:center}
.atajos-pie{padding:8px 14px;font-size:11px;color:var(--gray3,#9ca3af);border-top:1px solid var(--border,rgba(255,255,255,.1))}
.atajo-kbd{font-family:inherit;font-size:10px;font-weight:700;margin-left:8px;padding:1px 6px;border-radius:4px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.25);opacity:.8;vertical-align:middle}

/* Fase 160: buscador de todas las funciones del panel (mobile-first).
   En el celular ocupa toda la pantalla; desde 641px es la caja flotante. */
.atajos-overlay{padding-top:0;align-items:stretch}
.atajos-caja{width:100vw;height:100dvh;border-radius:0;border:none;display:flex;flex-direction:column}
.atajos-cab{display:flex;align-items:center;border-bottom:1px solid var(--border,rgba(255,255,255,.1))}
.atajos-cab .atajos-input{border-bottom:none;flex:1;min-width:0}
.atajos-input::-webkit-search-cancel-button{display:none}
.atajos-cerrar{flex:0 0 auto;background:none;border:none;color:var(--gray3,#9ca3af);font-size:18px;padding:12px 16px;cursor:pointer;min-height:44px}
.atajos-lista{max-height:none;flex:1;-webkit-overflow-scrolling:touch}
.atajos-op{padding:11px 12px;min-height:44px}
.atajos-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.atajos-txt > span{overflow:hidden;text-overflow:ellipsis}
.atajos-sub{font-size:11px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atajos-grupo{padding:10px 12px 4px;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--gray3,#9ca3af);opacity:.8}
.atajos-pie{display:none}
@media (min-width:641px){
  .atajos-overlay{padding-top:12vh;align-items:flex-start}
  .atajos-caja{width:min(620px,calc(100vw - 32px));height:auto;border-radius:14px;border:1px solid var(--border,rgba(255,255,255,.1))}
  .atajos-lista{max-height:56vh}
  .atajos-op{padding:9px 12px;min-height:0}
  .atajos-cerrar{display:none}
  .atajos-pie{display:block}
}
/* Botón 🔍 de la barra de arriba (en el celular queda solo el ícono). */
.topbar-buscar .topbar-buscar-kbd{font-family:inherit;font-size:10px;font-weight:700;margin-left:6px;padding:1px 6px;border-radius:4px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);opacity:.75}
/* En Diseño Web la barra ya tiene muchos botones: ahí queda solo la lupa. */
body.dsn-modo-activo .topbar-buscar span{display:none}
/* Resaltado del lugar al que llevó el buscador. */
.bp-resaltado{outline:2px solid var(--accent,#00C8FF) !important;outline-offset:4px;border-radius:8px;animation:bpPulso 1s ease-in-out 3}
@keyframes bpPulso{0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb,0,200,255),0)}50%{box-shadow:0 0 0 8px rgba(var(--accent-rgb,0,200,255),.28)}}

/* Fase 154: productos virtuales (no manejan stock) */
.badge-virtual{background:rgba(167,139,250,.15);color:#a78bfa;border:1px solid rgba(167,139,250,.4)}
.pos-result-stock.badge-virtual{background:none;border:0}


/* ══ Fase 273: iconos del menú lateral ══
   Estilo por defecto: "color por sección" (cada grupo con su color, icono en un cuadradito).
   html[data-nav-iconos="duotono"] → un solo color (el del panel) con relleno suave.
   html[data-nav-iconos="clasico"] → como antes (línea gris).
   Lo elige cada uno en Apariencia (se guarda en el navegador: aplicarNavIconos() en admin.js).
   "Nueva Venta" no cambia: tiene su propio botón destacado. */
.nav-item{--nav-c:var(--accent)}
/* catálogo y precios */
#nav-productos,#nav-categorias,#nav-importar,#nav-imagenes,#nav-combos,#nav-etiquetas,#nav-listas-precios,#nav-listas-venta,#nav-recargos,#nav-cuotas{--nav-c:#22d3ee}
/* ventas */
#nav-ventas,#nav-pedidos-web,#nav-presupuestos,#nav-facturas,#nav-postnet,#nav-mercadolibre,#nav-salida-stock{--nav-c:#34d399}
/* clientes y servicios */
#nav-clientes,#nav-cuentas-corrientes,#nav-resenas,#nav-agenda,#nav-peluqueria,#nav-guarderia,#nav-taller-turnos,#nav-ordenes{--nav-c:#a78bfa}
/* plata */
#nav-gastos,#nav-visitas,#nav-sueldos,#nav-cheques,#nav-compras,#nav-proveedores,#nav-estadisticas,#nav-cajas-aparte,#nav-cajas-dashboard,#nav-emisores{--nav-c:#fbbf24}
/* logística */
#nav-transporte,#nav-produccion,#nav-locales{--nav-c:#fb923c}
/* web y comunicación */
#nav-diseno,#nav-armador,#nav-redes,#nav-whatsapp-bot,#nav-ia{--nav-c:#f472b6}
/* equipo y configuración */
#nav-vendedores,#nav-permisos,#nav-actividad,#nav-apariencia,#nav-backup{--nav-c:#60a5fa}
html:not([data-nav-iconos="duotono"]):not([data-nav-iconos="clasico"]) .nav-item:not(#nav-nueva-venta){padding-top:6px;padding-bottom:6px}
html:not([data-nav-iconos="duotono"]):not([data-nav-iconos="clasico"]) .nav-item:not(#nav-nueva-venta) .nav-icon{width:28px;height:28px;padding:6px;box-sizing:border-box;border-radius:8px;background:rgba(255,255,255,.07);background:color-mix(in srgb,var(--nav-c) 16%,transparent);color:var(--nav-c);stroke:var(--nav-c);stroke-width:2;opacity:1}
html:not([data-nav-iconos="duotono"]):not([data-nav-iconos="clasico"]) .nav-item:not(#nav-nueva-venta):hover .nav-icon,html:not([data-nav-iconos="duotono"]):not([data-nav-iconos="clasico"]) .nav-item:not(#nav-nueva-venta).active .nav-icon{background:rgba(255,255,255,.12);background:color-mix(in srgb,var(--nav-c) 26%,transparent)}
html[data-nav-iconos="duotono"] .nav-item:not(#nav-nueva-venta) .nav-icon{width:20px;height:20px;color:var(--accent);stroke:var(--accent);fill:rgba(var(--accent-rgb,0,200,255),.16);stroke-width:1.9;opacity:1}
#nav-iconos-opc .btn.activo{border-color:var(--accent);color:var(--accent);background:rgba(var(--accent-rgb,0,200,255),.1)}

/* Fase 363: editor de ficha técnica — en el celular el título y el dato van apilados (los títulos largos se cortaban). */
.mp-ft-row{display:grid;grid-template-columns:minmax(90px,1fr) minmax(110px,1.4fr) auto;gap:6px;margin-bottom:4px}
@media (max-width:600px){
  .mp-ft-row{grid-template-columns:1fr auto;margin-bottom:10px;padding-bottom:8px;border-bottom:1px dashed var(--border)}
  .mp-ft-row>input:first-child{grid-column:1 / -1}
}

/* ============================================================
   Fase 383: Dashboard — tarjeta principal (Hoy / Mes / Año) + ojito para ocultar montos
   ============================================================ */
.dash-hero{margin-bottom:18px;border-radius:22px;padding:10px 10px 10px;
  background:linear-gradient(135deg,rgba(var(--accent-rgb),.38),rgba(var(--accent-rgb),.10) 70%)}
.dash-hero-tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;padding:0 6px}
.dash-hero-tabs::-webkit-scrollbar{display:none}
.dash-hero-tab{appearance:none;border:0;background:transparent;color:var(--white);opacity:.8;cursor:pointer;
  font:600 15px var(--font-b);padding:12px 20px 14px;border-radius:16px 16px 0 0;white-space:nowrap;transition:background .15s,opacity .15s}
.dash-hero-tab:hover{opacity:1}
.dash-hero-tab.active{background:var(--card);opacity:1;font-weight:800;position:relative}
.dash-hero-body{background:var(--card);border-radius:0 20px 20px 20px;padding:20px 22px 22px;
  box-shadow:0 10px 30px rgba(0,0,0,.18)}
.dash-hero-label{font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--gray3);margin-bottom:6px}
.dash-hero-row{display:flex;align-items:center;gap:14px}
.dash-hero-monto{font-family:var(--font-d);font-size:48px;font-weight:900;line-height:1.1;color:var(--white);min-width:0}
.dash-hero-sub{margin-top:6px;font-size:13px;font-weight:600;color:var(--green);line-height:1.4}
.dash-hero-sub:not(:empty)::before{content:"↑ "}
.dash-hero-acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.dash-pill{appearance:none;flex:1 1 120px;border:0;cursor:pointer;border-radius:16px;padding:14px 16px;
  background:rgba(var(--accent-rgb),.13);color:var(--accent);font:700 15px var(--font-b);transition:background .15s,transform .1s}
.dash-pill:hover{background:rgba(var(--accent-rgb),.22)}
.dash-pill:active{transform:scale(.97)}
.dash-ojo{appearance:none;border:0;background:transparent;color:var(--accent);cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;flex:none;transition:background .15s}
.dash-ojo:hover{background:rgba(var(--accent-rgb),.14)}
.dash-ojo svg{width:26px;height:26px}
.dash-ojo--mini{width:32px;height:32px}
.dash-ojo--mini svg{width:20px;height:20px}
[data-unit]{position:relative}
.dash-ojo--card{position:absolute;top:8px;right:8px;width:30px;height:30px;opacity:.75;z-index:2}
.dash-ojo--card:hover{opacity:1}
.dash-ojo--card svg{width:19px;height:19px}
.monto-oculto [data-monto-txt]{pointer-events:none}
.dash-hero-ir{margin-left:auto;color:var(--accent);font-size:26px;line-height:1;cursor:pointer;background:none;border:0;padding:6px 10px}

/* Montos ocultos: "$ ***" en lugar del número (el ancho no delata la cantidad de cifras) */
.monto-oculto [data-monto]{position:relative;display:inline-block;width:2.7em;max-width:100%;overflow:hidden;white-space:nowrap;
  vertical-align:bottom;color:transparent!important;-webkit-text-fill-color:transparent;user-select:none;-webkit-user-select:none}
.monto-oculto [data-monto]::before{content:"$ ***";position:absolute;left:0;top:0;letter-spacing:.08em;
  color:var(--white);-webkit-text-fill-color:var(--white)}
.monto-oculto [data-monto-txt]{filter:blur(7px);user-select:none;-webkit-user-select:none;pointer-events:none}

/* Tarjetas del dashboard más redondeadas y suaves */
#page-dashboard .stat-card{border-radius:18px;box-shadow:0 6px 22px rgba(0,0,0,.12);transition:transform .15s,box-shadow .15s}
#page-dashboard .stat-card[onclick]:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.2)}
#page-dashboard .table-wrap{border-radius:18px}
#page-dashboard .stat-card.en-hero{display:none!important} /* Hoy/Mes/Año viven en la tarjeta grande (siguen en el HTML: cargarStats() las llena) */

@media (max-width:600px){
  .dash-hero{border-radius:18px;padding:8px}
  .dash-hero-tab{padding:10px 14px 12px;font-size:14px}
  .dash-hero-body{padding:16px 16px 18px;border-radius:0 16px 16px 16px}
  .dash-hero-monto{font-size:36px}
  .dash-pill{flex:1 1 90px;padding:12px 10px;font-size:14px}
}