.admin-body{
  display:flex;min-height:100vh;
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-pill:100px;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;
  --shadow-sm:0 2px 8px rgba(0,0,0,.25);--shadow-md:0 8px 24px rgba(0,0,0,.35);--shadow-lg:0 20px 50px rgba(0,0,0,.45);
  --control-h:42px;
}

/* El resize nativo del navegador (resize:both por default) dejaba
   estirar un textarea para el costado, saliéndose de su contenedor y
   tapando el resto del formulario — solo se deja crecer para abajo. */
textarea{resize:vertical;max-width:100%;}

/* input[type=file] nativo trae el botón "Seleccionar archivo" con el
   estilo del sistema operativo (gris claro), sin importar el tema del
   sitio — ::file-selector-button es el pseudo-elemento estándar (ya
   soportado por todos los navegadores modernos) para restylearlo sin
   tocar el cuadro de diálogo del sistema operativo en sí. */
input[type=file]{max-width:100%;color:var(--text-secondary);font-size:13px;}
input[type=file]::file-selector-button{
  background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:8px;
  color:var(--text-primary);padding:8px 14px;font-size:13px;cursor:pointer;
  margin-right:10px;transition:border-color .15s,background .15s;
}
input[type=file]::file-selector-button:hover{border-color:var(--gold);background:var(--bg-elevated);}

/* BOTONES — .btn/.btn-primary/.btn-danger ya viven en app.css
   (compartidos con el sitio público, forma píldora ya consistente).
   .btn-ghost es la única variante que faltaba: para acciones de bajo
   énfasis (ej. "Cancelar" al lado de un "Guardar"), sin fondo ni
   borde — no compite visualmente con las demás. */
.btn-ghost{background:none;border-color:transparent;}
.btn-ghost:hover{background:var(--bg-elevated-2);border-color:transparent;transform:none;}
.btn[disabled],.btn:disabled{opacity:.55;cursor:not-allowed;pointer-events:none;}
.btn-spinner{width:13px;height:13px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:btn-spin .6s linear infinite;flex-shrink:0;}
@keyframes btn-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.btn-spinner{animation-duration:1.2s;}}

.admin-sidebar{width:240px;flex-shrink:0;background:var(--bg-elevated);border-right:1px solid var(--border);padding:24px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;}
.admin-sidebar::-webkit-scrollbar{width:6px;}
.admin-sidebar::-webkit-scrollbar-track{background:transparent;}
.admin-sidebar::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:10px;transition:background .2s;}
.admin-sidebar::-webkit-scrollbar-thumb:hover{background:var(--gold);}
.admin-logo-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:26px;padding:0 4px;}
.admin-logo{display:flex;align-items:center;gap:11px;min-width:0;}
.admin-logo-mark{width:36px;height:36px;flex-shrink:0;border-radius:var(--radius-sm);background:var(--bg-elevated-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.admin-logo-mark img{width:22px;height:22px;object-fit:contain;}
.admin-logo-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.admin-logo-word{font-family:var(--font-display);font-weight:700;font-size:16.5px;letter-spacing:-0.01em;line-height:1;color:var(--text-primary);}
.admin-logo-word span{color:var(--gold);}
.admin-logo-sub{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.admin-nav-close{display:none;background:none;border:1px solid var(--border);border-radius:8px;width:34px;height:34px;flex-shrink:0;color:var(--text-secondary);cursor:pointer;align-items:center;justify-content:center;}
/* position/background/backdrop-filter/border-bottom se resetean acá
   porque el <nav> del header público (app.css) usa un selector de
   elemento sin scope ("nav{...}") que por error también le pegaba a
   este <nav> del admin -- se notaba como un segundo fondo (más oscuro
   y con blur) arrancando justo donde termina este bloque. */
.admin-nav{display:flex;flex-direction:column;gap:2px;flex:1;position:static;background:none;backdrop-filter:none;border-bottom:none;}
.admin-nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--radius-sm);font-size:13.5px;color:var(--text-secondary);transition:background .15s,color .15s;}
.admin-nav a:hover{background:var(--bg-elevated-2);color:var(--text-primary);}
.admin-nav a.active{background:rgba(255,217,0,.12);color:var(--gold);font-weight:600;}
.admin-nav a:focus-visible,.admin-nav-group-toggle:focus-visible,.admin-nav-foot a:focus-visible,.admin-nav-foot-btn:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}
.admin-nav-icon{display:block;width:16px;height:16px;flex-shrink:0;opacity:.65;}
.admin-nav a.active .admin-nav-icon{opacity:1;}
.admin-nav-group-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;font-family:inherit;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);padding:16px 12px 7px;cursor:pointer;transition:color .15s;}
.admin-nav-group-toggle:hover{color:var(--text-secondary);}
.admin-nav-group-toggle.is-open{color:var(--text-secondary);}
.admin-nav-group-toggle .admin-nav-icon{display:block;width:13px;height:13px;opacity:1;transition:transform .2s;}
.admin-nav-group-toggle.is-open .admin-nav-icon{transform:rotate(180deg);}
.admin-nav-group{display:flex;flex-direction:column;gap:2px;}
.admin-nav-foot{border-top:1px solid var(--border);padding-top:10px;margin-top:14px;display:flex;flex-direction:column;gap:2px;}
.admin-nav-foot a,.admin-nav-foot-btn{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--radius-sm);font-size:13px;color:var(--text-muted);background:none;border:none;width:100%;text-align:left;cursor:pointer;font-family:inherit;}
.admin-nav-foot a:hover,.admin-nav-foot-btn:hover{color:var(--text-secondary);background:var(--bg-elevated-2);}
.admin-nav-foot .admin-nav-icon{opacity:.6;}
.admin-nav-logout:hover{color:var(--red);background:rgba(226,75,74,.1);}

.admin-main{flex:1;min-width:0;}
.admin-topbar{padding:20px 32px;border-bottom:1px solid var(--border);}
.admin-topbar-inner{display:flex;align-items:center;gap:14px;justify-content:space-between;max-width:1600px;margin:0 auto;width:100%;}
.admin-topbar-heading{flex:1;min-width:0;}
.admin-topbar h1{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-0.01em;}
.admin-topbar-description{font-size:13px;color:var(--text-secondary);margin-top:4px;max-width:640px;}
.admin-content{padding:28px 32px 60px;max-width:1600px;margin:0 auto;width:100%;}
.admin-topbar-viewsite{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;flex-shrink:0;}
.admin-topbar-viewsite .admin-nav-icon{width:15px;height:15px;opacity:.8;}

.admin-notif{position:relative;flex-shrink:0;}
.admin-notif-trigger{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;background:none;border:1px solid var(--border);border-radius:8px;cursor:pointer;color:var(--text-secondary);}
.admin-notif-trigger:hover{background:var(--bg-elevated-2);color:var(--text-primary);}
.admin-notif-trigger .admin-nav-icon{width:18px;height:18px;}
.admin-notif-badge{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--gold);color:#0A0A0B;font-size:10px;font-weight:700;line-height:16px;text-align:center;}
.admin-notif-panel{position:absolute;top:calc(100% + 8px);right:0;width:320px;max-height:400px;overflow-y:auto;background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.35);z-index:200;}
.admin-notif-panel-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);font-size:13px;font-weight:600;}
.admin-notif-mark-all{background:none;border:none;color:var(--gold);font-size:12px;font-weight:500;cursor:pointer;padding:0;}
.admin-notif-item{display:flex;flex-direction:column;gap:3px;padding:11px 14px;border-bottom:1px solid var(--border);font-size:13px;color:var(--text-primary);}
.admin-notif-item:last-child{border-bottom:none;}
.admin-notif-item:hover{background:var(--bg-elevated-2);}
.admin-notif-item.is-unread{background:rgba(255,217,0,.06);}
.admin-notif-item.is-unread .admin-notif-item-title{font-weight:600;}
.admin-notif-item-time{font-size:11.5px;color:var(--text-muted);}
.admin-notif-empty{padding:20px 14px;text-align:center;font-size:13px;color:var(--text-secondary);}
@media (max-width:640px){
  .admin-notif-panel{position:fixed;top:64px;right:12px;left:12px;width:auto;}
}

.admin-hamburger{display:none;flex-direction:column;justify-content:center;gap:4px;width:36px;height:36px;flex-shrink:0;background:none;border:1px solid var(--border);border-radius:8px;cursor:pointer;}
.admin-hamburger span{display:block;width:16px;height:2px;background:var(--text-primary);margin:0 auto;border-radius:2px;}
.admin-nav-backdrop{display:none;}

.admin-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;}
.admin-tabs::-webkit-scrollbar{display:none;}
.admin-tab{background:none;border:none;padding:10px 18px;font-size:13.5px;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s;white-space:nowrap;flex-shrink:0;}
.admin-tab:hover{color:var(--text-secondary);}
.admin-tab.active{color:var(--gold);border-bottom-color:var(--gold);}
.admin-tab:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}

/* Red de contención de foco: cualquier botón/link del admin que no
   tenga ya su propio estilo de :focus-visible (los inputs ya lo
   resuelven con border-color:var(--gold) al enfocar) cae acá. */
.admin-body .btn:focus-visible,
.admin-body a:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

.admin-table-wrap{background:var(--bg-elevated);border:1px solid var(--border);border-radius:16px;overflow-x:auto;}
.admin-table{width:100%;border-collapse:collapse;}
.admin-table th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);padding:14px 18px;border-bottom:1px solid var(--border);}
.admin-table td{padding:14px 18px;border-bottom:1px solid var(--border);font-size:14px;vertical-align:middle;}
.admin-table tr:last-child td{border-bottom:none;}
.admin-table tbody tr{transition:background .12s;}
.admin-table tbody tr:hover{background:var(--bg-elevated-2);}
.admin-table .mono{font-family:var(--font-mono);}
.admin-table .cell-actions{display:flex;gap:8px;justify-content:flex-end;}
.cat-drag-handle{cursor:grab;color:var(--text-muted);text-align:center;width:28px;letter-spacing:-1px;}
.cat-row.is-dragging{opacity:.35;}
/* Sin ancho/alto explícito, un <svg> vacío no ocupa espacio y el ícono
   de la categoría queda invisible en la lista — mismo criterio que
   .mega-icon en el sitio público. */
.cat-row-icon{width:32px;color:var(--gold);}
.cat-row-icon svg,.cat-row-icon img{display:block;width:18px;height:18px;}

.status-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;padding:4px 10px;border-radius:100px;text-transform:uppercase;letter-spacing:0.03em;}
.status-badge.active{background:rgba(61,220,132,0.12);color:var(--green);}
.status-badge.inactive{background:rgba(226,75,74,0.12);color:var(--red);}
.status-badge.teaser{background:rgba(255,217,0,0.12);color:var(--gold);}

.admin-search{display:flex;gap:10px;margin-bottom:20px;}
[data-live-search-results][aria-busy="true"]{opacity:.55;transition:opacity .15s;pointer-events:none;}
.admin-search input{flex:1;max-width:320px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:100px;padding:10px 18px;color:var(--text-primary);font-size:13.5px;outline:none;}
.admin-search input:focus{border-color:var(--gold);}

/* Buscador de productos en Combos/Ofertas — era un <input> sin ninguna
   clase (ni .form-group ni .admin-search), así que salía sin ningún
   estilo propio, blanco/nativo del navegador en vez del resto del
   formulario oscuro. */
.admin-product-search{display:block;width:100%;background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:8px;padding:10px 14px;color:var(--text-primary);font-size:13.5px;outline:none;margin-bottom:14px;transition:border-color .15s;}
.admin-product-search:focus{border-color:var(--gold);}
.admin-product-search::placeholder{color:var(--text-muted);}

.admin-empty{padding:60px 20px;text-align:center;color:var(--text-muted);font-size:14px;}

/* FORM */
.admin-form{max-width:1400px;flex:1;min-width:0;columns:420px;column-gap:20px;}
/* La página de marca (admin/brands/edit.blade.php) tiene secciones muy
   dispares en altura (ej. "Datos básicos" es corta, "Comparador" puede
   crecer mucho). El masonry por columnas de más arriba balancea la
   altura entre columnas y deja huecos vacíos gigantes dentro de las
   secciones cortas -- y CSS Grid tampoco alcanza: una fila que empareja
   una sección corta con una larga bloquea todo lo que sigue debajo de
   la corta hasta que termina la larga de al lado (viene de cómo Grid
   sincroniza la altura de fila entre columnas), dejando el mismo tipo
   de hueco. La solución real son dos columnas armadas a mano en el
   Blade (.brand-page-form-col, cada una su propio flujo vertical
   normal, sin sincronizarse entre sí) -- acá solo se las pone lado a
   lado con flex, cayendo a una sola columna apilada en pantallas
   angostas, sin tocar .admin-form para el resto del admin. */
.admin-form.brand-page-form{max-width:1160px;display:flex;gap:20px;align-items:flex-start;}
.brand-page-form-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:20px;}
.brand-page-form-col .form-section{margin-bottom:0;}
@media (max-width:900px){
  .admin-form.brand-page-form{flex-direction:column;}
}
.form-section{background:var(--bg-elevated);border:1px solid var(--border);border-radius:16px;padding:24px;break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:20px;}
.form-section h3{font-family:var(--font-display);font-size:15px;font-weight:600;margin-bottom:16px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.form-group{margin-bottom:16px;}
.form-group:last-child{margin-bottom:0;}
.form-group label{display:block;font-size:12.5px;color:var(--text-secondary);margin-bottom:6px;}
/* Antes escopeado a ".form-group input" — cualquier input suelto
   fuera de un .form-group (ej. los mini-formularios "+ Agregar" de
   Admin → Atributos) se quedaba con el fondo blanco nativo del
   navegador, mismo bug que ya se había resuelto para el resto del
   formulario. Escopeado a .admin-body para cubrir TODO el panel de
   una sola vez, sin depender de qué contenedor envuelva al input. */
.admin-body input[type=text],
.admin-body input[type=number],
.admin-body input[type=email],
.admin-body input[type=password],
.admin-body input[type=url],
.admin-body input[type=date],
.admin-body input[type=datetime-local],
.admin-body input[type=time],
.admin-body select,
.admin-body textarea{width:100%;background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;color:var(--text-primary);font-size:14px;outline:none;transition:border-color .15s;}
.admin-body input:focus,.admin-body select:focus,.admin-body textarea:focus{border-color:var(--gold);}
/* input[type=date]/datetime-local/time quedaban afuera de la lista de
   arriba — sin ningún estilo propio, el navegador los pinta con su
   fondo claro nativo, bien distinto del resto del formulario oscuro
   (justo lo que se ve raro en la fecha de Ofertas). El ícono del
   calendario/reloj también viene negro por default — invertido, se ve
   claro sobre el fondo oscuro en vez de invisible. */
.form-group input[type=date]::-webkit-calendar-picker-indicator,
.form-group input[type=datetime-local]::-webkit-calendar-picker-indicator,
.form-group input[type=time]::-webkit-calendar-picker-indicator{filter:invert(.7);cursor:pointer;}

/* accent-color por sí solo no alcanza: solo tiñe el estado MARCADO —
   sin marcar, el navegador igual pinta el cuadrito blanco por dentro,
   así que seguían viendo genéricos en las listas largas (la mayoría
   de las filas de un checklist están sin marcar). Se dibujan a mano
   con appearance:none, manteniendo el <input> real de siempre (con
   toda la accesibilidad/teclado nativos intactos) — accent-color
   queda además como respaldo por si algún navegador viejo no soporta
   appearance:none en inputs. */
input[type=checkbox]:not(.sr-only-file),
input[type=radio]:not(.sr-only-file){
  accent-color:var(--gold);
  appearance:none;-webkit-appearance:none;
  width:16px;height:16px;flex-shrink:0;cursor:pointer;
  background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:4px;
  position:relative;transition:background .15s,border-color .15s;
}
input[type=radio]:not(.sr-only-file){border-radius:50%;}
input[type=checkbox]:not(.sr-only-file):checked,
input[type=radio]:not(.sr-only-file):checked{background:var(--gold);border-color:var(--gold);}
input[type=checkbox]:not(.sr-only-file):checked::after{
  content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #0A0A0B;border-width:0 2px 2px 0;transform:rotate(45deg);
}
input[type=radio]:not(.sr-only-file):checked::after{
  content:'';position:absolute;left:3px;top:3px;width:8px;height:8px;
  border-radius:50%;background:#0A0A0B;
}
input[type=checkbox]:not(.sr-only-file):focus-visible,
input[type=radio]:not(.sr-only-file):focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* SWITCH — para ajustes on/off puntuales (antes eran <select> con
   "Sí"/"No", que obliga a abrir un desplegable para ver 2 opciones).
   Estructura: <label class="switch"><input type="checkbox" ...><span
   class="switch-track"></span><span class="switch-label">Texto</span>
   </label> — el checkbox real sigue mandando el mismo valor de
   siempre al form, esto es puramente visual encima. */
/* label.switch (no solo .switch): .form-group label{display:block} ya
   existente empataría en especificidad y, sin el elemento en el
   selector, podría llegar a ganar según el orden — así queda sin
   ambigüedad. */
label.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;}
.switch input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px;}
.switch-track{display:inline-block;position:relative;width:40px;height:23px;border-radius:100px;background:var(--bg-elevated-2);border:1px solid var(--border);flex-shrink:0;transition:background .15s,border-color .15s;}
.switch-track::before{content:'';position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:var(--text-muted);transition:transform .18s ease,background .15s;}
.switch input:checked + .switch-track{background:var(--gold-dim);border-color:var(--gold);}
.switch input:checked + .switch-track::before{transform:translateX(17px);background:var(--gold);}
.switch input:focus-visible + .switch-track{outline:2px solid var(--gold);outline-offset:2px;}
.switch input:disabled + .switch-track{opacity:.5;cursor:not-allowed;}
.switch-label{font-size:13.5px;color:var(--text-primary);}
@media (prefers-reduced-motion:reduce){.switch-track::before{transition:background .15s;}}

/* SEGMENTED CONTROL — grupo de radios como botones conectados, para
   sets cortos de opciones (2-3) donde un <select> obliga a abrir un
   menú para algo que se lee de un vistazo. El <input type=radio> real
   sigue ahí (oculto), el <label> hace de botón visual. */
.segmented{display:inline-flex;background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:3px;gap:2px;}
.segmented-option{position:relative;}
.segmented-option input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;}
.segmented-option span{display:block;padding:7px 14px;border-radius:6px;font-size:13px;color:var(--text-secondary);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s;}
.segmented-option input:checked + span{background:var(--gold);color:#0A0A0B;font-weight:600;}
.segmented-option input:focus-visible + span{outline:2px solid var(--gold);outline-offset:1px;}

/* TOASTS — reemplaza los antiguos .admin-flash/.admin-flash-error
   estáticos (seguían viendo la sesión, pero como un cartel fijo que
   había que perder de vista solo navegando a otra página). Ver
   public/js/admin-toast.js para el control de aparición/auto-cierre. */
.toast-stack{position:fixed;right:20px;bottom:20px;z-index:500;display:flex;flex-direction:column-reverse;gap:10px;max-width:360px;}
.toast{display:flex;align-items:flex-start;gap:10px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);padding:13px 14px;box-shadow:var(--shadow-lg);font-size:13.5px;color:var(--text-primary);opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease;}
.toast.is-visible{opacity:1;transform:translateY(0);}
.toast-icon{flex-shrink:0;width:18px;height:18px;margin-top:1px;}
.toast-success{border-color:rgba(61,220,132,.35);}
.toast-success .toast-icon{color:var(--green);}
.toast-error{border-color:rgba(226,75,74,.35);}
.toast-error .toast-icon{color:var(--red);}
.toast-close{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:0 0 0 6px;font-size:15px;line-height:1;flex-shrink:0;margin-left:auto;}
.toast-close:hover{color:var(--text-primary);}
@media (prefers-reduced-motion:reduce){.toast{transition:opacity .2s ease;}}
@media (max-width:860px){.toast-stack{left:16px;right:16px;bottom:16px;max-width:none;}}

/* MODAL genérico — ver partials/admin-modal.blade.php. Los confirm()
   nativos de borrar/desactivar se quedan como están (ya cumplen);
   esto es para cuando haga falta mostrar contenido real, no un simple
   sí/no. */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:400;display:flex;align-items:center;justify-content:center;padding:20px;}
.modal{width:100%;max-width:480px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-lg);}
.modal-title{font-family:var(--font-display);font-size:17px;font-weight:600;margin-bottom:6px;}
.modal-body{color:var(--text-secondary);font-size:13.5px;line-height:1.5;margin-bottom:20px;}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;}

/* Recorrido guiado de bienvenida (primer login de un usuario nuevo,
   ver Admin\TourController + partials/admin-tour.blade.php).
   .admin-tour-backdrop es un capturador de clicks invisible (bloquea
   interactuar con la página real mientras el recorrido está activo);
   el oscurecido en sí lo hace .admin-tour-highlight con un
   box-shadow gigante alrededor de su propio recuadro — el "agujero"
   transparente que deja es lo que se ve resaltado a full brillo,
   sin necesitar recortar la capa de fondo con un mask. */
.admin-tour-backdrop{position:fixed;inset:0;z-index:449;background:transparent;}
.admin-tour-highlight{position:fixed;z-index:450;border-radius:var(--radius-md);box-shadow:0 0 0 9999px rgba(5,5,5,.72),0 0 0 2px var(--gold),0 0 24px 2px rgba(255,217,0,.35);pointer-events:none;transition:top .3s ease,left .3s ease,width .3s ease,height .3s ease;}
.admin-tour-card{position:fixed;z-index:460;width:100%;max-width:320px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px;box-shadow:var(--shadow-lg);transition:top .3s ease,left .3s ease;}
.admin-tour-card.is-centered{position:fixed;top:50%!important;left:50%!important;transform:translate(-50%,-50%);max-width:360px;text-align:center;}
.admin-tour-step{font-family:var(--font-display);color:var(--gold);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;}
.admin-tour-title{font-family:var(--font-display);font-size:16px;font-weight:600;margin-bottom:6px;}
.admin-tour-text{color:var(--text-secondary);font-size:13.5px;line-height:1.5;margin-bottom:16px;}
.admin-tour-actions{display:flex;align-items:center;gap:8px;justify-content:flex-end;}
.admin-tour-skip{margin-right:auto;}

/* Checklist de productos del combo — antes cada fila era un <label>
   con display:flex nomás, sin separador ni tope de ancho para el
   nombre: con nombres largos (típico en piezas de PC, con socket/RAM/
   form factor en el título) el precio (margin-left:auto) quedaba
   flotando en cualquier lado dentro de la fila envuelta, y sin borde
   entre filas todo se leía como un solo bloque de texto corrido. */
.combo-product-row{display:flex;align-items:flex-start;gap:10px;padding:9px 6px;border-bottom:1px solid var(--border);cursor:pointer;}
.combo-product-row:last-child{border-bottom:none;}
.combo-product-row:hover{background:var(--bg-elevated-2);}
.combo-product-row input[type=checkbox]{margin-top:3px;flex-shrink:0;}
.combo-product-row-info{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex:1;min-width:0;}
.combo-product-row-name{font-size:13px;line-height:1.4;}
.combo-product-row-price{color:var(--text-muted);font-size:12px;white-space:nowrap;flex-shrink:0;}

/* Fila de producto de Ofertas: mismo checklist de Combos + un cuarto
   "carril" fijo a la derecha con el precio de oferta, que solo aparece
   si esa fila está marcada. flex-wrap para que el error de validación
   (si lo hay) pueda ocupar una línea propia debajo sin romper el resto. */
.offer-product-row{flex-wrap:wrap;}
.offer-price-input{flex-shrink:0;width:110px;background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:8px;padding:6px 10px;color:var(--text-primary);font-size:12.5px;}
.offer-price-input:focus{border-color:var(--gold);outline:none;}

/* Buscador de producto de Ofertas: dropdown de resultados debajo del
   input (mismo mecanismo que .search-suggestions del sitio público,
   con los tokens del admin) — a propósito no muestra nada hasta que se
   escribe algo, en vez del catálogo entero de una. */
.admin-search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:10px;padding:6px;box-shadow:0 16px 40px rgba(0,0,0,.4);z-index:30;max-height:280px;overflow-y:auto;}
.admin-search-result-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;background:none;border:none;border-radius:8px;padding:9px 10px;color:var(--text-primary);font-size:13px;cursor:pointer;}
.admin-search-result-row:hover,.admin-search-result-row.is-active{background:var(--bg-elevated);}
.admin-search-result-price{color:var(--text-muted);font-size:12px;flex-shrink:0;margin-left:auto;}
.admin-remove-btn{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--bg-elevated-2);border:1px solid var(--border);color:var(--text-secondary);font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:border-color .15s,color .15s;}
.admin-remove-btn:hover{border-color:var(--red);color:var(--red);}

/* Tabla compacta de productos en una campaña de descuento — pensada
   para cargar 50-100 productos de corrido sin que cada uno ocupe una
   card entera (ver sesión de feedback: la versión con cards grandes no
   escalaba). kbd imita una tecla física, solo cosmético. */
.admin-discount-table{width:100%;border-collapse:collapse;margin-top:14px;table-layout:fixed;}
.admin-discount-table thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);font-weight:500;padding:0 8px 8px;border-bottom:1px solid var(--border);}
.admin-discount-table tbody tr{border-bottom:1px solid var(--border);}
.admin-discount-table tbody tr:last-child{border-bottom:none;}
.admin-discount-table tbody td{padding:7px 8px;vertical-align:middle;}
.admin-discount-thumb{width:30px;height:30px;border-radius:6px;background:var(--bg-elevated-2);overflow:hidden;flex-shrink:0;}
.admin-discount-thumb img{width:100%;height:100%;object-fit:cover;}
.admin-discount-name{font-size:13px;}
.admin-discount-cat{display:block;color:var(--text-muted);font-size:10.5px;font-family:var(--font-mono);text-transform:uppercase;}
.admin-discount-pct{font-size:11.5px;color:var(--green);font-weight:600;white-space:nowrap;}
.admin-discount-pct.is-empty{color:var(--text-muted);font-weight:400;}
.admin-discount-table .offer-price-input{width:100px;}
.admin-discount-table .error{font-size:11px;margin-top:4px;max-width:110px;}
.form-hint kbd{background:var(--bg-elevated-2);border:1px solid var(--border-strong);border-radius:4px;padding:1px 6px;font-family:var(--font-mono);font-size:11px;color:var(--text-primary);}

/* Vista previa flotante: con muchos productos cargados no escala
   mostrar todas las cards a la vez (ver arriba) — se ve solo la del
   campo de precio que se está tocando en este momento. */
.admin-discount-preview{position:fixed;bottom:24px;right:24px;width:220px;z-index:40;}
.admin-discount-preview .card{box-shadow:0 20px 50px rgba(0,0,0,.5);}
.admin-body select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238E8E93' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:34px;}
.form-group .error{color:var(--red);font-size:12px;margin-top:5px;}
.form-hint{font-size:12px;color:var(--text-muted);margin-top:5px;}

/* Ver app/Support/EditLock -- aviso de "alguien más guardó esto
   mientras editabas" (locking optimista, 6 admins comparten el panel).
   Tono ámbar (no rojo) a propósito: no es un error de lo que escribiste,
   es un choque con otro admin -- distinto tipo de aviso, distinto color. */
.admin-conflict-banner{background:var(--gold-dim);border:1px solid var(--gold);color:var(--gold);border-radius:10px;padding:14px 16px;font-size:13.5px;line-height:1.5;margin-bottom:20px;}
.required-mark{color:var(--gold);}

/* COMBOBOX — select con buscador (ver products/form.blade.php,
   selector de categoría). El <input> de texto ya hereda el estilo
   oscuro genérico (.admin-body input[type=text]), acá solo hace
   falta el menú flotante de resultados. */
.combobox{position:relative;}
.combobox-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);padding:6px;max-height:280px;overflow-y:auto;box-shadow:var(--shadow-lg);}
.combobox-option{display:block;width:100%;text-align:left;background:none;border:none;color:var(--text-primary);font-size:13.5px;padding:9px 10px;border-radius:6px;cursor:pointer;transition:background .12s;}
.combobox-option:hover,.combobox-option.is-active{background:var(--bg-elevated-2);color:var(--gold);}
.combobox-empty{padding:10px;color:var(--text-muted);font-size:13px;}

.repeater-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr auto;gap:10px;align-items:center;margin-bottom:10px;}
.repeater-row input{width:100%;background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:8px;padding:9px 10px;color:var(--text-primary);font-size:13px;outline:none;transition:border-color .15s;}
.repeater-row input:focus{border-color:var(--gold);}
.repeater-remove{background:none;border:1px solid var(--border);color:var(--text-muted);border-radius:8px;width:34px;height:34px;cursor:pointer;flex-shrink:0;transition:border-color .15s,color .15s;}
.repeater-remove:hover{border-color:var(--red);color:var(--red);}
/* Chip de producto elegido -- páginas de marca (admin/brands/edit.blade.php) */
.brand-admin-chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:100px;padding:5px 6px 5px 12px;font-size:12.5px;color:var(--text-primary);}
.brand-admin-chip button{background:none;border:none;color:var(--text-muted);cursor:pointer;width:18px;height:18px;line-height:1;border-radius:50%;transition:color .15s,background .15s;}
.brand-admin-chip button:hover{color:var(--red);background:rgba(226,75,74,.12);}

.variant-thumb{position:relative;width:40px;height:40px;border-radius:8px;background:var(--bg-elevated-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;flex-shrink:0;transition:border-color .15s;}
.variant-thumb:hover,.variant-thumb:focus-visible{border-color:var(--gold);}
.variant-thumb:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.variant-thumb img{width:100%;height:100%;object-fit:cover;}
.variant-thumb-empty{color:var(--text-muted);font-size:18px;line-height:1;}
.variant-thumb-clear{position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:50%;background:var(--red);color:#fff;border:none;font-size:10px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}

/* Cada variante ahora es una tarjeta (portada + campos arriba, galería
   adicional abajo) en vez de una sola fila -- antes una variante solo
   podía tener UNA foto en total, esto es la galería de fotos EXTRA. */
.variant-panel{margin-bottom:14px;}
.variant-panel .repeater-row{margin-bottom:14px;}
.variant-gallery-label{display:block;font-size:12px;color:var(--text-muted);margin-bottom:8px;}
.variant-gallery-grid{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px;}
.variant-gallery-item{width:72px;}
.variant-gallery-item img{width:72px;height:72px;border-radius:8px;background:var(--bg-elevated-2);border:1px solid var(--border);object-fit:cover;display:block;}
.variant-gallery-item.is-new img{border-color:var(--gold);}
.variant-gallery-remove{display:flex;align-items:center;gap:5px;margin-top:5px;font-size:11px;color:var(--text-secondary);cursor:pointer;}

/* Formulario de producto: validación en vivo */
.admin-body .field-invalid,.admin-body .field-invalid:focus{border-color:var(--red);}
.form-hint-ok{color:var(--green, #3fb950);}
.price-from-variants{display:flex;flex-direction:column;gap:4px;padding:10px 12px;background:var(--bg-elevated-2);border:1px dashed var(--border);border-radius:8px;font-size:12.5px;color:var(--text-secondary);}
.price-from-variants strong{font-size:15px;color:var(--text-primary);font-variant-numeric:tabular-nums;}
.link-btn{background:none;border:none;padding:0;color:var(--gold);font:inherit;text-decoration:underline;cursor:pointer;}
.admin-tab-count,.admin-tab-alert{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:9px;font-size:11px;font-weight:700;line-height:1;vertical-align:1px;}
.admin-tab-count{background:var(--bg-elevated-2);color:var(--text-secondary);}
.admin-tab-alert{background:var(--red);color:#fff;}
.form-actions-problems{color:var(--red);}
.product-form-alert{margin-bottom:18px;padding:12px 16px;border:1px solid rgba(226,75,74,.45);background:rgba(226,75,74,.08);border-radius:10px;font-size:13px;color:var(--text-secondary);}
.product-form-alert strong{color:var(--text-primary);}
.card-price-from{font-size:12px;color:var(--text-muted);margin-right:4px;}

.form-actions{grid-column:1/-1;display:flex;align-items:center;gap:12px;justify-content:flex-end;position:sticky;bottom:0;background:var(--bg);padding:16px 0;margin-top:4px;border-top:1px solid var(--border);box-shadow:0 -12px 24px -12px rgba(0,0,0,.4);z-index:20;}
.form-actions-status{font-size:12.5px;color:var(--text-muted);margin-right:auto;}

/* UPLOADER — reemplaza el input[type=file] nativo ("Seleccionar
   archivo / Ningún archivo seleccionado") por una tarjeta con preview,
   nombre/peso del archivo elegido y botón de reemplazar/quitar. El
   <input type=file> real sigue existiendo (solo se oculta visualmente
   con .sr-only-file) para no tocar ningún controller ni validación —
   ver partials/admin-file-upload.blade.php y
   public/js/admin-file-upload.js. */
.file-upload{border:1px dashed var(--border-strong);border-radius:var(--radius-md);padding:16px;display:flex;align-items:center;gap:14px;background:var(--bg-elevated-2);transition:border-color .15s,background .15s;}
.file-upload.is-dragover{border-color:var(--gold);background:var(--bg-elevated);}
.file-upload-thumb{width:56px;height:56px;border-radius:var(--radius-sm);background:var(--bg-elevated);border:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--text-muted);}
.file-upload-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.file-upload-info{flex:1;min-width:0;}
.file-upload-name{font-size:13px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.file-upload-meta{font-size:11.5px;color:var(--text-muted);margin-top:2px;}
.file-upload-actions{display:flex;gap:8px;flex-shrink:0;}
.sr-only-file{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
@media (max-width:520px){.file-upload{flex-wrap:wrap;}.file-upload-actions{width:100%;}}

/* LIVE PREVIEW */
.admin-preview{width:280px;flex-shrink:0;position:sticky;top:20px;}
.admin-preview-label{font-size:11px;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);margin-bottom:12px;}
.admin-preview .card-media{position:relative;}

/* LOGIN — esta página no extiende admin.layout (es standalone, previa
   al login), así que no queda envuelta en .admin-body: los inputs se
   restylean acá con su propia regla en vez de depender de esa clase. */
.admin-login-wrap{
  min-height:100vh;width:100%;display:flex;align-items:center;justify-content:center;padding:24px;
  position:relative;z-index:1;
}

/* Fondo animado de login/registro/recuperar contraseña (ver
   partials/auth-background.blade.php + public/js/auth-background.js)
   -- misma técnica que .brand-hero .brand-bg-grid (una "linterna" que
   revela más brillante la grilla justo donde está el cursor), acá
   coloreada con el dorado del sitio en vez del acento de cada marca,
   más dos manchas de luz que flotan solas Y ADEMÁS siguen un poco al
   mouse (profundidades distintas, misma idea de brand-hero-tilt.js),
   más motas subiendo despacio como polvo en la luz. Fixed a toda la
   pantalla, detrás de la card (que por eso pasa a z-index:1 arriba) --
   el JS la apaga entera en touch/reduced-motion, quedando la grilla y
   las manchas quietas en su posición base.*/
.auth-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--bg);}
.auth-bg-grid{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px, transparent 1px),linear-gradient(90deg, var(--border) 1px, transparent 1px);background-size:56px 56px;opacity:.3;-webkit-mask-image:radial-gradient(circle 420px at var(--spot-x, 22%) var(--spot-y, 20%), black, transparent 75%);mask-image:radial-gradient(circle 420px at var(--spot-x, 22%) var(--spot-y, 20%), black, transparent 75%);}

.auth-bg-glow{position:absolute;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle, rgba(255,217,0,.055), transparent 70%);filter:blur(20px);transform:translate(var(--glow-dx, 0px), var(--glow-dy, 0px));}
.auth-bg-glow-1{top:18%;left:16%;animation:auth-glow-drift-1 16s ease-in-out infinite;}
.auth-bg-glow-2{top:70%;left:76%;width:380px;height:380px;background:radial-gradient(circle, rgba(255,217,0,.04), transparent 70%);animation:auth-glow-drift-2 20s ease-in-out infinite;}
@keyframes auth-glow-drift-1{0%,100%{margin:0;}50%{margin:-26px 22px;}}
@keyframes auth-glow-drift-2{0%,100%{margin:0;}50%{margin:22px -26px;}}

.auth-bg-particle{position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;background:var(--gold);opacity:0;animation:auth-particle-rise linear infinite;}
@keyframes auth-particle-rise{
  0%{transform:translate(0, 0);opacity:0;}
  10%{opacity:.55;}
  90%{opacity:.55;}
  100%{transform:translate(var(--drift, 20px), -100vh);opacity:0;}
}

@media (prefers-reduced-motion:reduce){
  .auth-bg-glow,.auth-bg-particle{animation:none !important;}
}
.motion-reduced .auth-bg-glow,.motion-reduced .auth-bg-particle{animation:none !important;}
.admin-login-card{
  width:100%;max-width:380px;background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:20px;padding:36px 32px;box-shadow:0 24px 60px rgba(0,0,0,.5);
  animation:admin-login-in .4s ease both;
}
@keyframes admin-login-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.admin-login-card{animation:none;}}
.admin-login-logo-img{display:block;height:38px;width:auto;margin:0 auto 14px;}
.admin-login-sub{text-align:center;color:var(--text-muted);font-size:13px;margin-bottom:28px;}
.admin-login-card input[type=email],
.admin-login-card input[type=password],
.admin-login-card input[type=text]{
  width:100%;background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:8px;
  padding:10px 12px;color:var(--text-primary);font-size:14px;outline:none;transition:border-color .15s;
}
.admin-login-card input:focus{border-color:var(--gold);}
.admin-login-card input:disabled{opacity:.55;}
.admin-login-password-wrap{position:relative;}
.admin-login-password-wrap input{padding-right:40px;}
.admin-login-password-toggle{
  position:absolute;top:50%;right:4px;transform:translateY(-50%);
  background:none;border:none;color:var(--text-muted);padding:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:color .15s;
}
.admin-login-password-toggle:hover{color:var(--text-primary);}
.admin-login-remember{display:flex;align-items:center;gap:8px;margin:-6px 0 20px;cursor:pointer;color:var(--text-secondary);font-size:13px;}
.admin-login-card .btn-primary{width:100%;margin-top:6px;}

@media (max-width:860px){
  .admin-hamburger{display:flex;}
  .admin-topbar{position:sticky;top:0;z-index:150;background:var(--bg);padding:16px 20px;}
  .admin-topbar h1{font-size:18px;}
  .admin-content{padding:20px 20px 60px;}
  .admin-topbar-viewsite{padding:9px;}
  .admin-topbar-viewsite-label{display:none;}
  .admin-topbar-viewsite .admin-nav-icon{width:17px;height:17px;}

  .admin-nav-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:190;}

  .admin-sidebar{position:fixed;top:0;left:0;z-index:200;width:300px;max-width:84vw;height:100vh;padding:20px 14px;
    transform:translateX(-100%);transition:transform .25s cubic-bezier(.22,1,.36,1);box-shadow:0 0 32px rgba(0,0,0,.4);}
  .admin-sidebar.is-open{transform:translateX(0);}
  .admin-nav-close{display:flex;}

  /* Objetivos táctiles más grandes que en desktop (mínimo ~44px de alto)
     — con el mouse 10px de padding alcanza, con el dedo no. */
  .admin-nav a{padding:13px 14px;font-size:15.5px;gap:13px;}
  .admin-nav-icon{width:19px;height:19px;}
  .admin-nav-group-toggle{padding:18px 14px 8px;font-size:12px;}
  .admin-nav-group-toggle .admin-nav-icon{width:15px;height:15px;}
  .admin-nav-foot a,.admin-nav-foot-btn{padding:13px 14px;font-size:14.5px;gap:13px;}

  .form-row{grid-template-columns:1fr;}
  .repeater-row{grid-template-columns:1fr 1fr;}
  .admin-preview{display:none;}

  /* Tablas -> tarjetas apiladas: cada <tr> es una tarjeta, cada <td>
     con data-label se muestra como "Etiqueta: valor". Las celdas sin
     data-label (miniatura, drag-handle) se ocultan — no aportan nada
     que ya no esté en el título de la tarjeta. */
  .admin-table thead{display:none;}
  .admin-table, .admin-table tbody, .admin-table td{display:block;width:100%;}
  .admin-table tr{display:flex;flex-direction:column;width:100%;padding:14px 16px;border-bottom:1px solid var(--border);}
  .admin-table tr:last-child{border-bottom:none;}
  .admin-table td{padding:4px 0;border-bottom:none;font-size:13.5px;}
  .admin-table td:not([data-label]):not(.cell-actions):not(.admin-table-title):not(.admin-table-nested){display:none;}
  .admin-table td.admin-table-nested{padding:0;}
  .cat-children-anchor .cat-row{background:var(--bg-elevated-2);border-left:2px solid var(--border-strong);}
  .admin-table td[data-label]{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
  .admin-table td[data-label]::before{content:attr(data-label);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);flex-shrink:0;}
  .admin-table-title{order:-1;font-family:var(--font-display);font-size:15.5px;font-weight:700;margin-bottom:6px;}
  .admin-table td[data-label].admin-table-block{display:block;padding-top:8px;}
  .admin-table td[data-label].admin-table-block::before{display:block;margin-bottom:4px;}
  td.cell-actions{order:1;}
  .admin-table .cell-actions{justify-content:flex-start;flex-wrap:wrap;margin-top:10px;}
  .admin-table .cell-actions form{flex-shrink:0;}
}

@media (prefers-reduced-motion:reduce){
  .admin-sidebar{transition:none;}
}

/* EDITOR CMS (GrapesJS) */
.cms-presence-banner{background:var(--gold-dim);border:1px solid var(--gold);color:var(--gold);border-radius:10px;padding:12px 16px;font-size:13px;line-height:1.5;margin-bottom:14px;}
.cms-editor-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap;}
.cms-editor-devices{display:flex;gap:8px;}
.cms-editor-actions{display:flex;align-items:center;gap:10px;}
.cms-save-status{font-size:12.5px;color:var(--text-muted);min-width:70px;}

.cms-editor-layout{display:flex;gap:20px;height:calc(100vh - 220px);min-height:480px;}
.cms-editor-canvas{flex:1;min-width:0;background:var(--bg-elevated);border:1px solid var(--border);border-radius:16px;overflow:hidden;}
.cms-editor-sidebar{width:440px;flex-shrink:0;overflow-y:auto;display:flex;flex-direction:column;gap:16px;}
.cms-editor-panel{background:var(--bg-elevated);border:1px solid var(--border);border-radius:16px;padding:16px;}
.cms-editor-panel h4{font-size:12px;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-muted);margin-bottom:12px;font-weight:600;}

.gjs-field{width:100%;background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;color:var(--text-primary);font-size:13px;outline:none;margin-bottom:8px;}
.gjs-field:focus{border-color:var(--gold);}
.gjs-field-textarea{resize:vertical;}
.cms-field-counter{font-size:10.5px;color:var(--text-muted);text-align:right;margin-top:-6px;margin-bottom:8px;}

.cms-range-trait{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.cms-range-trait input[type="range"]{flex:1;accent-color:var(--gold);}
.cms-range-trait-value{font-family:var(--font-mono);font-size:11.5px;color:var(--text-secondary);min-width:38px;text-align:right;flex-shrink:0;}

/* GrapesJS pone label y campo lado a lado por defecto (pensado para
   nombres cortos tipo "Ancho", "Color") y trunca con "..." si no entra.
   Nuestras etiquetas son frases descriptivas en español, así que las
   apilamos arriba del campo en vez de truncarlas. */
.gjs-trt-trait{display:block;padding:10px 4px;}
.gjs-trt-trait .gjs-label{display:block;white-space:normal;overflow:visible;text-overflow:clip;margin-bottom:6px;font-size:12.5px;color:var(--text-secondary);line-height:1.4;}
.gjs-trt-trait .gjs-fields{width:100%;}

.cms-media-field{display:flex;flex-direction:column;gap:8px;margin-bottom:8px;}
.cms-media-thumb{width:100%;height:220px;object-fit:contain;background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:8px;}
.cms-media-controls{display:flex;gap:6px;align-items:center;}
.cms-media-controls .gjs-field{margin-bottom:0;}
.cms-media-upload-btn{flex-shrink:0;background:none;border:1px solid var(--border);color:var(--text-secondary);border-radius:8px;padding:8px 12px;font-size:12.5px;cursor:pointer;transition:border-color .15s,color .15s;}
.cms-media-upload-btn:hover{border-color:var(--gold);color:var(--gold);}
.cms-media-error{color:var(--red);font-size:12px;line-height:1.4;}
.cms-repeater-row .cms-media-field{margin-bottom:0;flex:1;}

.cms-repeater-trait{display:flex;flex-direction:column;gap:12px;}
.cms-repeater-row{position:relative;display:flex;flex-direction:column;gap:10px;padding:14px;padding-right:38px;background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:10px;}
.cms-repeater-field{display:flex;flex-direction:column;gap:5px;}
.cms-repeater-field-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;}
.cms-repeater-row .gjs-field{margin-bottom:0;}
.cms-repeater-remove{position:absolute;top:10px;right:10px;background:none;border:1px solid var(--border);color:var(--text-muted);border-radius:8px;width:26px;height:26px;flex-shrink:0;cursor:pointer;}
.cms-repeater-remove:hover{border-color:var(--red);color:var(--red);}
.cms-repeater-add{background:none;border:1px dashed var(--border-strong);color:var(--text-secondary);border-radius:8px;padding:8px;cursor:pointer;font-size:12.5px;}
.cms-repeater-add:hover{border-color:var(--gold);color:var(--gold);}

@media (max-width:960px){
  .cms-editor-layout{flex-direction:column;height:auto;}
  .cms-editor-sidebar{width:100%;}
  .cms-editor-canvas{height:60vh;}
}

/* BIBLIOTECA MULTIMEDIA */
.media-layout{display:flex;gap:24px;align-items:flex-start;}
.media-sidebar{width:240px;flex-shrink:0;position:sticky;top:20px;}
.media-sidebar-section{background:var(--bg-elevated);border:1px solid var(--border);border-radius:16px;padding:16px;margin-bottom:16px;}
.media-sidebar-section h4{font-size:12px;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-muted);margin-bottom:12px;font-weight:600;}
.media-folder-link{display:block;padding:8px 10px;border-radius:8px;font-size:13.5px;color:var(--text-secondary);margin-bottom:2px;transition:background .15s,color .15s;}
.media-folder-link:hover{background:var(--bg-elevated-2);color:var(--text-primary);}
.media-folder-link.active{background:var(--bg-elevated-2);color:var(--gold);}
.media-folder-row{display:flex;align-items:center;gap:4px;}
.media-folder-row .media-folder-link{flex:1;}
.media-folder-delete{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:16px;padding:4px 8px;flex-shrink:0;}
.media-folder-delete:hover{color:var(--red);}
.media-sidebar-section input[type=text]{background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;color:var(--text-primary);font-size:13px;outline:none;}

.media-tag-cloud{display:flex;flex-wrap:wrap;gap:6px;}
.media-tag-chip{display:inline-block;font-size:11.5px;padding:4px 10px;border-radius:100px;background:var(--bg-elevated-2);color:var(--text-secondary);border:1px solid var(--border);transition:border-color .15s,color .15s;}
a.media-tag-chip:hover,a.media-tag-chip.is-active{border-color:var(--gold);color:var(--gold);}

.media-main{flex:1;min-width:0;}
.media-dropzone{border:2px dashed var(--border);border-radius:16px;padding:32px;text-align:center;margin-bottom:24px;transition:border-color .15s,background .15s;}
.media-dropzone.is-dragging{border-color:var(--gold);background:var(--bg-elevated);}
.media-dropzone p{color:var(--text-secondary);font-size:13.5px;margin-bottom:12px;}

.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;}
.media-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.media-card-thumb{position:relative;aspect-ratio:1/1;background:var(--bg-elevated-2);}
.media-card-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.media-card-badge{position:absolute;top:8px;right:8px;font-family:var(--font-mono);font-size:9px;padding:3px 7px;border-radius:100px;background:var(--gold);color:#0A0A0B;font-weight:700;}
.media-card-body{padding:12px;}
.media-card-name{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:8px;}
.media-card-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px;}
.media-card-actions{display:flex;flex-wrap:wrap;gap:6px;}
.media-card-edit{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px;}
.media-card-edit input[type=text],.media-card-edit select{width:100%;background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;color:var(--text-primary);font-size:12.5px;outline:none;}

@media (max-width:860px){
  .media-layout{flex-direction:column;}
  .media-sidebar{width:100%;position:static;}
}

/* DASHBOARD */
.admin-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:24px;}
.admin-stat-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;transition:border-color .15s;}
.admin-stat-card:hover{border-color:var(--border-strong);}
.admin-stat-value{font-family:var(--font-display);font-weight:700;font-size:32px;color:var(--gold);line-height:1;margin-bottom:8px;}
.admin-stat-label{font-size:12.5px;color:var(--text-secondary);}
.admin-dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.admin-dashboard-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);font-size:13.5px;}
.admin-dashboard-row:last-child{border-bottom:none;}

/* Panel genérico para listas/bloques agrupados fuera de una tabla
   (dashboard, resúmenes) — antes el dashboard pedía prestada
   .cms-editor-panel (pensada para el editor de páginas). Mismo look
   que .form-section/.admin-table-wrap para que todo el admin comparta
   una sola idea de "tarjeta". */
.admin-panel{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;}
.admin-panel h3{font-family:var(--font-display);font-size:15px;font-weight:600;margin-bottom:14px;}

/* ANALÍTICA */
.analytics-online-card{display:flex;flex-direction:column;}
.analytics-online-head{display:flex;align-items:center;gap:8px;}
.analytics-online-dot{width:8px;height:8px;border-radius:100px;background:var(--green);animation:status-breathe 2.4s ease-in-out infinite;flex-shrink:0;}
.analytics-online-list{margin-top:12px;display:flex;flex-direction:column;gap:0;}
.analytics-online-row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--border);font-size:12.5px;color:var(--text-secondary);}
.analytics-online-row:last-child{border-bottom:none;}
.analytics-online-row .p{color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.analytics-online-row .t{font-family:var(--font-mono);color:var(--text-muted);flex-shrink:0;}
.analytics-trend{display:flex;align-items:flex-end;gap:5px;height:130px;overflow-x:auto;overflow-y:hidden;}
.analytics-trend-bar{flex:1 0 32px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;}
.analytics-trend-bar-fill{width:100%;background:var(--gold-dim);border:1px solid var(--gold);border-radius:4px 4px 0 0;min-height:3px;transition:height .4s ease;}
.analytics-trend-bar-n{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);margin-bottom:4px;}
.analytics-trend-bar-label{font-family:var(--font-mono);font-size:9.5px;color:var(--text-muted);margin-top:8px;white-space:nowrap;}
.analytics-rank-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--border);font-size:13.5px;}
.analytics-rank-row:last-child{border-bottom:none;}
.analytics-rank-row .label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.analytics-rank-row .n{font-family:var(--font-mono);color:var(--gold);flex-shrink:0;}
.analytics-empty{color:var(--text-muted);font-size:13px;padding:8px 0;}

/* IMPORTADOR WOOCOMMERCE */
.wc-import-summary{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:20px;}
.wc-import-summary-item{background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;padding:14px 18px;}
.wc-import-summary-item .n{font-family:var(--font-mono);font-size:22px;color:var(--gold);}
.wc-import-summary-item .l{font-size:12px;color:var(--text-secondary);}

@media (max-width:860px){
  .admin-dashboard-grid{grid-template-columns:1fr;}
}

/* Descuentos (Admin → Descuentos): campaña + productos en un solo
   formulario, descuento por % o precio fijo por fila, atajos de fecha
   y barra de guardar fija abajo. */
.discounts-page{max-width:1200px;padding-bottom:90px;}
.discounts-status{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:20px;}
.discounts-status h3{margin:6px 0 4px;}
.discounts-pill{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:100px;}
.discounts-pill.is-live{background:rgba(52,199,89,.14);color:var(--green);}
.discounts-pill.is-scheduled{background:var(--gold-dim);color:var(--gold);}
.discounts-section{max-width:none;}
.discounts-dates{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:16px;}
.discounts-dates .form-group{margin:0;}
.discounts-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.discounts-chip{background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:100px;padding:4px 11px;font-size:12px;color:var(--text-secondary);cursor:pointer;font-family:inherit;}
.discounts-chip:hover{border-color:var(--gold);color:var(--gold);}
.discounts-toolbar{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:24px;align-items:start;margin-bottom:6px;}
@media (max-width:820px){.discounts-toolbar{grid-template-columns:1fr;}}
.discounts-toolbar label{display:block;font-size:12.5px;color:var(--text-secondary);margin-bottom:6px;}
.discounts-bulk-row{display:flex;gap:8px;align-items:center;}
.discounts-bulk-row select{flex:1;min-width:0;}
.discounts-input-suffix{position:relative;width:100px;flex-shrink:0;}
.discounts-input-suffix input{width:100%;padding-right:26px;}
.discounts-input-suffix span{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:13px;pointer-events:none;}
.discounts-value{display:flex;align-items:center;gap:6px;}
.discounts-mode{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;flex-shrink:0;}
.discounts-mode button{background:var(--bg-elevated-2);border:none;color:var(--text-muted);font-size:12px;font-weight:600;padding:6px 9px;cursor:pointer;font-family:inherit;min-width:30px;}
.discounts-mode button+button{border-left:1px solid var(--border);}
.discounts-mode button.is-on{background:var(--gold);color:#0A0A0B;}
.discounts-table .offer-price-input{width:90px;}
.discounts-table tr.is-missing td:nth-child(5){color:var(--text-muted);}
.discounts-empty{border:1px dashed var(--border);border-radius:10px;padding:22px;text-align:center;color:var(--text-muted);font-size:13px;margin-top:14px;}
.discounts-savebar{position:sticky;bottom:0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;padding:12px 16px;margin-top:20px;box-shadow:0 -10px 30px rgba(0,0,0,.35);}
.discounts-savebar-info{font-size:13px;color:var(--text-secondary);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.discounts-savebar-info strong{color:var(--text-primary);}
.discounts-savebar-warn{color:#ffc65c;}
.discounts-link{background:none;border:none;color:var(--text-muted);text-decoration:underline;cursor:pointer;font-size:12.5px;font-family:inherit;padding:0;margin-left:6px;}
.discounts-link:hover{color:var(--red);}
/* La regla general .admin-body input[type=number]{width:100%} pesa más
   que .offer-price-input y estiraba el campo de descuento por encima de
   la columna "Precio oferta". Aquí el campo ocupa solo lo que le sobra
   al lado del selector %/$, sin salirse de su columna. */
.admin-body .discounts-value input[type=number]{width:auto;flex:1 1 0;min-width:0;padding:6px 8px;font-size:13px;}
.discounts-table tbody td{font-size:13px;}
.discounts-table tbody td.mono{font-size:13px;}

/* Admin → Contenido → Anuncio */
.announcement-admin-grid{display:grid;grid-template-columns:minmax(0,620px) 320px;gap:32px;align-items:start;}
@media (max-width:1100px){.announcement-admin-grid{grid-template-columns:1fr;}}
.announcement-admin-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:640px){.announcement-admin-row{grid-template-columns:1fr;}}
.announcement-admin-preview{position:sticky;top:20px;}
.site-announcement.is-preview{position:relative;left:auto;bottom:auto;width:300px;}
.site-announcement.is-preview.is-off{opacity:.45;}
.discounts-list{display:flex;flex-direction:column;gap:12px;max-width:1000px;}
.discounts-list .discounts-status{margin-bottom:0;}
.admin-search-result-row.is-taken{opacity:.55;cursor:not-allowed;}
.discounts-taken{font-size:11px;color:var(--text-muted);white-space:nowrap;margin-left:8px;}
.discounts-variant-note{font-size:11px;color:var(--text-muted);margin-left:4px;}
.form-steps{display:flex;gap:8px;margin-right:auto;}
.form-steps + .form-actions-status{margin-right:0;}
.admin-tab-done{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:6px;border-radius:50%;background:rgba(63,185,80,.16);color:var(--green, #3fb950);font-size:10px;font-weight:700;line-height:1;vertical-align:1px;}
.form-section-optional{margin-left:6px;font-size:11px;font-weight:500;color:var(--text-muted);text-transform:none;letter-spacing:0;}
.form-advanced{padding-top:14px;padding-bottom:14px;}
.form-advanced-toggle{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;padding:4px 0;color:var(--text-secondary);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;text-align:left;}
.form-advanced-toggle:hover{color:var(--text-primary);}
.form-advanced-summary{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400;font-size:12.5px;color:var(--text-muted);font-family:var(--font-mono, monospace);}
.form-advanced-chevron{margin-left:auto;transition:transform .2s;}
.form-advanced.is-open .form-advanced-chevron{transform:rotate(180deg);}
.form-advanced.is-open .form-advanced-toggle{margin-bottom:14px;}

/* Variantes del formulario de producto (vt-): columnas de ancho fijo para
   que la foto nunca se encime con el nombre cuando el panel es angosto. */
.vt-type{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:18px;}
.vt-type label{font-size:13px;color:var(--text-secondary);}
.admin-body .vt-type input{width:150px;padding:8px 10px;font-size:13.5px;}
.vt-type-chips{display:flex;gap:6px;flex-wrap:wrap;}
.vt-chip{background:none;border:1px solid var(--border);color:var(--text-muted);border-radius:100px;padding:5px 11px;font-size:12px;cursor:pointer;transition:border-color .15s,color .15s,background .15s;}
.vt-chip:hover{color:var(--text-primary);border-color:var(--text-muted);}
.vt-chip.is-active{color:var(--gold);border-color:var(--gold);background:rgba(255,217,0,.07);}
.vt-list{border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:12px;container-type:inline-size;}
.vt-head,.vt-row{display:grid;grid-template-columns:48px minmax(0,1fr) minmax(110px,170px) 46px 38px;gap:10px;align-items:center;}
.vt-head{padding:9px 14px;background:var(--bg-elevated-2);font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--text-muted);}
.vt-head small{font-weight:500;opacity:.8;}
.vt-head span:nth-child(4){text-align:center;}
.vt-item{padding:12px 14px;border-top:1px solid var(--border);transition:background .15s;}
.vt-head + .vt-item{border-top:none;}
.vt-item.is-invalid{background:rgba(226,75,74,.06);}
.vt-photo{position:relative;width:48px;height:48px;border-radius:10px;border:1px dashed var(--border);background:var(--bg-elevated-2);display:flex;align-items:center;justify-content:center;color:var(--text-muted);cursor:pointer;transition:border-color .15s,color .15s;}
.vt-photo:hover,.vt-photo:focus-visible{border-color:var(--gold);color:var(--gold);outline:none;}
.vt-photo img{width:100%;height:100%;object-fit:cover;border-radius:9px;}
.vt-photo-clear{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;border:none;background:var(--red);color:#fff;font-size:11px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.admin-body .vt-row input[type=text],.admin-body .vt-row input[type=number]{padding:9px 11px;font-size:14px;}
.vt-price-wrap{position:relative;min-width:0;}
.vt-price-cur{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--text-muted);pointer-events:none;}
.admin-body .vt-row input.vt-price{font-variant-numeric:tabular-nums;padding-left:40px;}
.vt-soldout-label{display:none;}
.admin-body .vt-row .vt-price::placeholder{font-size:12.5px;}
.vt-soldout{justify-self:center;margin:0;}
.vt-remove{width:38px;height:38px;border-radius:8px;border:1px solid transparent;background:none;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s,background .15s;}
.vt-remove:hover{color:var(--red);border-color:rgba(226,75,74,.4);background:rgba(226,75,74,.08);}
.vt-extra{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding-left:60px;margin-top:8px;}
.vt-extra > .error{flex-basis:100%;margin:0;color:var(--red);font-size:12px;}
.vt-cheapest{font-size:11.5px;color:var(--gold);}
.vt-gallery{display:flex;flex-wrap:wrap;gap:8px;flex-basis:100%;}
.vt-gallery-item{position:relative;display:block;width:56px;cursor:pointer;}
.vt-gallery-item img{width:56px;height:56px;border-radius:8px;object-fit:cover;border:1px solid var(--border);display:block;}
.vt-gallery-item.is-new img{border-color:var(--gold);}
.vt-gallery-item input{position:absolute;opacity:0;pointer-events:none;}
.vt-gallery-item span{display:block;margin-top:3px;font-size:10.5px;text-align:center;color:var(--text-muted);}
.vt-gallery-item input:checked ~ span{color:var(--red);font-weight:600;}
.vt-gallery-item:has(input:checked) img{opacity:.35;border-color:var(--red);}
.vt-gallery-add{font-size:12.5px;color:var(--text-secondary);text-decoration:none;}
.vt-gallery-add:hover{color:var(--gold);}
.vt-add{display:flex;gap:10px;align-items:center;}
.admin-body .vt-add input{flex:1;}
.vt-add .btn{white-space:nowrap;}
.vt-add-hint{margin-top:6px;}
.vt-tips{margin-top:16px;padding:11px 14px;border-radius:10px;background:var(--bg-elevated-2);font-size:12.5px;line-height:1.6;color:var(--text-secondary);}
.vt-tips strong{color:var(--text-primary);font-weight:600;}
/* Panel angosto (pantalla chica o con la vista previa al lado): la fila pasa a dos renglones. */
@container (max-width:440px){
  .vt-head{display:none;}
  .vt-row{grid-template-columns:48px minmax(0,1fr) auto;grid-template-areas:"photo name remove" "photo price soldout";row-gap:8px;}
  .vt-photo{grid-area:photo;align-self:start;}
  .vt-name{grid-area:name;}
  .vt-price-wrap{grid-area:price;}
  .vt-soldout{grid-area:soldout;justify-self:start;}
  .vt-soldout-label{display:inline;}
  .vt-remove{justify-self:end;}
  .vt-remove{grid-area:remove;}
  .vt-extra{padding-left:0;}
}
.form-actions{flex-wrap:wrap;}
.form-actions .btn{white-space:nowrap;}
.grant-panel-form{display:flex;gap:6px;align-items:center;}
.admin-body .grant-panel-form select{width:auto;padding:6px 8px;font-size:12.5px;}
.discounts-bob-ref{display:block;font-size:11px;opacity:.75;margin-top:2px;}
.admin-preview-link{display:block;position:relative;border-radius:16px;transition:transform .2s ease;}
.admin-preview-link:hover{transform:translateY(-2px);}
.admin-preview-link:hover .card{border-color:var(--gold);}
.admin-preview-open{position:absolute;top:10px;right:10px;z-index:2;padding:4px 10px;border-radius:100px;background:rgba(10,10,11,.8);color:var(--gold);font-size:11.5px;font-weight:600;opacity:0;transition:opacity .2s;}
.admin-preview-link:hover .admin-preview-open,.admin-preview-link:focus-visible .admin-preview-open{opacity:1;}
.offer-box{margin-top:14px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--bg-elevated-2);}
.offer-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.admin-body .offer-row .offer-value{width:130px;}
.offer-result{display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums;}
.offer-result-old{color:var(--text-muted);text-decoration:line-through;font-size:13px;}
.offer-result strong{color:var(--gold);font-size:15px;}
.offer-result-pct{color:var(--green, #3fb950);font-size:12.5px;font-weight:600;}
/* Aviso al guardar con fotos (public/js/admin-image-compress.js) */
.admin-save-notice{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:1000;display:flex;align-items:center;gap:10px;max-width:min(520px,calc(100vw - 32px));padding:11px 16px;border-radius:12px;background:var(--bg-elevated);border:1px solid var(--border);box-shadow:0 18px 40px -10px rgba(0,0,0,.6);font-size:13.5px;color:var(--text-primary);}
.admin-save-notice.is-slow{border-color:var(--gold);}
.admin-save-spinner{width:16px;height:16px;flex-shrink:0;border-radius:50%;border:2px solid rgba(255,217,0,.25);border-top-color:var(--gold);animation:admin-save-spin .8s linear infinite;}
@keyframes admin-save-spin{to{transform:rotate(360deg);}}
/* Lista dentro de una lista en el editor de páginas (ej. asesores de cada sucursal). */
.cms-repeater-nested{display:flex;flex-direction:column;gap:8px;padding-left:10px;border-left:2px solid var(--border-strong);}
.cms-repeater-row.cms-repeater-row-nested{background:var(--bg-elevated);padding:12px;padding-right:36px;}
.cms-repeater-add-nested{align-self:flex-start;padding:6px 12px;}
/* Editor de páginas: GrapesJS reserva 40px arriba y el 15% de la derecha
   para sus barras de herramientas (que aquí están apagadas) -- quedaban
   como franjas grises vacías alrededor de la vista previa. */
.cms-editor-canvas .gjs-editor{background:var(--bg-elevated);}
.cms-editor-canvas .gjs-cv-canvas{top:0;left:0;width:100%;height:100%;background:var(--bg);}
/* Panel de contenido: etiqueta arriba y campo a todo el ancho (antes la
   etiqueta ocupaba una columna a la izquierda que en las listas quedaba
   vacía a lo largo de todo el contenido). */
#gjs-settings-panel .gjs-trt-trait{display:block;}
#gjs-settings-panel .gjs-label-wrp,#gjs-settings-panel .gjs-field-wrp{display:block;width:100%;min-width:0;}
#gjs-settings-panel .gjs-label-wrp{padding:0;margin-bottom:6px;}

/* Pendientes de aprobar (armados y reseñas): contador en el menú lateral
   y bloque "Para revisar" arriba del Dashboard -- antes solo existía la
   campanita y un armado nuevo pasaba desapercibido. */
.admin-nav-pending{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 6px;margin-left:auto;border-radius:100px;background:var(--gold);color:#0A0A0B;font-family:var(--font-mono);font-size:11px;font-weight:700;line-height:1;}
.admin-pending-panel{border-color:rgba(255,217,0,.45);background:linear-gradient(180deg,rgba(255,217,0,.07),transparent 70%);margin-bottom:20px;}
.admin-pending-panel h3{display:flex;align-items:center;gap:10px;}
.admin-pending-panel h3 .admin-nav-pending{margin-left:0;}
.admin-nav-group-toggle .admin-nav-pending{margin-left:auto;margin-right:8px;}
.analytics-two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media (max-width:760px){.analytics-two-col{grid-template-columns:1fr;}}

/* Analítica por período (ver Admin\AnalyticsController): selector de
   período, variación contra el período anterior, clics de WhatsApp dentro
   de cada barra de la tendencia y tabla de resumen por mes. */
.analytics-periods{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;}
.analytics-period-chips{display:flex;flex-wrap:wrap;gap:6px;}
.analytics-period-chip{font-size:12.5px;padding:7px 13px;border-radius:100px;border:1px solid var(--border);color:var(--text-secondary);text-decoration:none;transition:border-color .15s,color .15s;}
.analytics-period-chip:hover{border-color:var(--gold);color:var(--gold);}
.analytics-period-chip.is-active{background:var(--gold);border-color:var(--gold);color:#0A0A0B;font-weight:600;}
.analytics-period-range{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;color:var(--text-secondary);}
.analytics-period-range label{display:flex;align-items:center;gap:6px;}
.analytics-period-range input[type=date]{padding:6px 8px;font-size:12.5px;width:auto;}
.analytics-range-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;}
.analytics-range-title{font-family:var(--font-display);font-size:18px;font-weight:700;}
.analytics-delta{display:inline-block;margin-left:4px;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);}
.analytics-delta.up{color:var(--green);}
.analytics-delta.down{color:var(--red);}
.analytics-trend-bar-fill{position:relative;display:flex;align-items:flex-end;justify-content:center;}
.analytics-trend-bar-wa{width:30%;background:var(--gold);border-radius:2px 2px 0 0;}
.analytics-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.analytics-table th,.analytics-table td{padding:9px 10px;text-align:right;border-bottom:1px solid var(--border);white-space:nowrap;}
.analytics-table th:first-child,.analytics-table td:first-child{text-align:left;}
.analytics-table th{font-family:var(--font-mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);}
.analytics-table td{font-family:var(--font-mono);}
.analytics-table td:first-child{font-family:inherit;}
.analytics-table tfoot td{font-weight:700;color:var(--gold);border-bottom:none;}

/* El panel es oscuro: así el calendario de los campos de fecha (y sus
   íconos, flechas de los select, etc.) también sale oscuro en vez de
   abrirse en blanco. */
html{color-scheme:dark;}

/* Categorías adicionales del producto: casilla y nombre en la misma línea
   (.form-group label{display:block} partía cada fila en dos), las
   categorías padre como títulos de grupo y sus hijas con sangría. */
.extra-cat-list{max-height:300px;overflow-y:auto;border:1px solid var(--border);border-radius:10px;padding:6px;}
.form-group label.extra-cat-row{display:flex;align-items:center;gap:10px;margin:0;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13.5px;color:var(--text-secondary);}
.form-group label.extra-cat-row:hover{background:var(--bg-elevated-2);color:var(--text-primary);}
.form-group label.extra-cat-row.is-parent{color:var(--text-primary);font-weight:600;}
.form-group label.extra-cat-row.is-parent:not(:first-child){margin-top:6px;border-top:1px solid var(--border);border-radius:0 0 8px 8px;padding-top:12px;}
.form-group label.extra-cat-row.is-child{padding-left:32px;}
.form-group label.extra-cat-row input[type=checkbox]{margin:0;flex-shrink:0;}

/* "Fulano está editando esto" (admin/partials/edit-lock): ventana que
   tapa todo el panel y no deja tocar el formulario. */
html.edit-lock-open{overflow:hidden;}
.edit-lock-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(6,6,7,.78);backdrop-filter:blur(6px);}
.edit-lock-card{width:100%;max-width:500px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:20px;padding:32px 30px 26px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.55);}
.edit-lock-avatar{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--gold);color:#0A0A0B;font-family:var(--font-display);font-size:28px;font-weight:700;box-shadow:0 0 0 6px rgba(255,217,0,.15);}
.edit-lock-card h2{font-family:var(--font-display);font-size:21px;font-weight:700;line-height:1.3;margin:0 0 10px;text-wrap:balance;}
.edit-lock-card p{font-size:14px;line-height:1.6;color:var(--text-secondary);margin:0 0 8px;}
.edit-lock-card .edit-lock-hint{font-size:12.5px;color:var(--text-muted);}
.edit-lock-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px;}
.edit-lock-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:1001;background:var(--bg-elevated-2);border:1px solid var(--gold);color:var(--text-primary);padding:12px 18px;border-radius:12px;font-size:13.5px;box-shadow:0 20px 50px rgba(0,0,0,.4);}
.edit-lock-badge{display:inline-block;margin-left:6px;padding:2px 9px;border-radius:100px;background:rgba(255,217,0,.12);color:var(--gold);font-size:11.5px;font-weight:600;vertical-align:middle;}

/* "Conectados ahora": ocupa dos columnas y cada fila muestra la página
   arriba (hasta 2 líneas) y el tiempo abajo -- en una sola columna el
   "hace 2 minutos" dejaba el nombre de la página en "I…". */
.analytics-online-card{grid-column:span 2;}
.analytics-online-row{flex-direction:column;align-items:flex-start;gap:1px;}
.analytics-online-row .p{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35;}
.analytics-online-row .t{font-size:11px;}
.analytics-online-list{max-height:260px;overflow-y:auto;}
@media (max-width:520px){.analytics-online-card{grid-column:1 / -1;}}