/* Estilos del panel. Salieron de public/index.html el 15/09/2026, paso 1 de
   partirlo por pestañas (CLAUDE.md, «Partir public/index.html»): se movieron
   tal cual, sin cambiar ninguna regla. */

:root {
  --bg: #120b05;
  --surface: #1b1007;
  --panel: #21150a;
  --card: #2b1a0d;
  --border: #3b2513;
  --border2: #573719;
  --accent: #e77306;
  --accent-dim: rgba(231,115,6,0.10);
  --accent-glow: rgba(231,115,6,0.22);
  /* El acento cuando es TEXTO sobre su propio fondo tenue (--accent-dim).
     En oscuro basta el de siempre; en claro no. Ver la vista clara. */
  --accent-texto: #e77306;
  --danger: #ff4757;
  --danger-dim: rgba(255,71,87,0.12);
  --success: #3dd68c;
  --success-dim: rgba(61,214,140,0.12);
  --warn: #ffa502;
  --warn-dim: rgba(255,165,2,0.12);
  --text: #fff2e8;
  --text-muted: #dfc2aa;
  --text-dim: #b58d6e;
  --on-accent: #ffffff;              /* color secundario: texto sobre el acento */
  --topbar-bg: rgba(18,11,5,.96);
  --overlay: rgba(0,0,0,0.82);       /* fondo detrás de los modales */
  --img-overlay: rgba(0,0,0,.5);
  --mono: 'Montserrat', sans-serif;
  --sans: 'Montserrat', sans-serif;
  --radius: 8px;
  --r-lg: 12px;
  --titulo-pill-bg: #fff7ef;
  --titulo-pill-text: #56301b;
  --titulo-pill-border: #f2c69e;
  --titulo-pill-shadow: rgba(0,0,0,.2);
}

/* ── VISTA CLARA ──
   Solo se redefine la paleta: el resto del CSS ya va por variables.
   Los tonos no son los oscuros invertidos — el naranja de acento se
   oscurece para que se lea sobre blanco, y los textos apagados suben
   de contraste respecto a la vista oscura, que es justamente el
   motivo de ofrecer esta opción. */
:root[data-theme="light"] {
  --bg: #ffffff;
  --surface: #ffffff;
  --panel: #ffffff;
  --card: #fff6ed;
  --border: #f3d9c1;
  --border2: #dfb990;
  --accent: #e77306;
  --accent-dim: rgba(231,115,6,0.10);
  --accent-glow: rgba(231,115,6,0.18);
  /* CL4: #e77306 sobre --accent-dim da menos de 4,5 según el fondo —por debajo
     del 4,5 de AA—, y es justo el texto del chip SELECCIONADO, el que dice
     qué filtro está puesto. Este pasa AA en los tres fondos claros. */
  --accent-texto: #873d00;
  --danger: #c62828;
  --danger-dim: rgba(198,40,40,0.10);
  --success: #177245;
  --success-dim: rgba(23,114,69,0.12);
  --warn: #8a4500;
  --warn-dim: rgba(138,69,0,0.12);
  --text: #301b0b;
  --text-muted: #68492d;
  --text-dim: #805f40;
  --on-accent: #ffffff;
  --topbar-bg: rgba(255,255,255,.94);
  --overlay: rgba(48,27,11,0.45);
  --img-overlay: rgba(0,0,0,.45);
  --titulo-pill-bg: #58311c;
  --titulo-pill-text: #ffffff;
  --titulo-pill-border: #70452a;
  --titulo-pill-shadow: rgba(72,38,17,.18);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;font-weight:500;line-height:1.5;min-height:100vh;}
h1,h2,h3{font-family:var(--sans);color:var(--text);line-height:1.15;}
h1{font-weight:800;letter-spacing:-.7px;}
h2,h3{font-weight:700;letter-spacing:-.25px;}
a,button,input,select,textarea{font-family:inherit;}
:is(a,button,input,select,textarea,[role="button"]):focus-visible{outline:3px solid var(--accent);outline-offset:3px;}
.hidden{display:none!important;}

/* ── LOGIN ── */
#loginScreen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(ellipse 60% 40% at 50% 0%,var(--accent-dim) 0%,transparent 70%),var(--bg);}
.login-box{width:100%;max-width:380px;}
.login-brand{text-align:center;margin-bottom:30px;}
.brand-pill{display:inline-flex;align-items:center;gap:8px;padding:5px 13px 5px 6px;border:1px solid rgba(231,115,6,.18);border-radius:999px;background:#fff;color:#35200e;font-family:var(--sans);font-size:15px;font-weight:800;letter-spacing:-.35px;line-height:1;box-shadow:0 7px 18px rgba(0,0,0,.14);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;}
.brand-logo{display:block;width:29px;height:29px;object-fit:contain;flex-shrink:0;border-radius:50%;transition:transform .24s cubic-bezier(.2,.8,.2,1);}
.brand-pill-login{margin:0 auto 16px;}
.brand-pill-bar,.brand-pill-app{font-size:12px;box-shadow:none;}
.brand-pill-bar .brand-logo,.brand-pill-app .brand-logo{width:25px;height:25px;}
.login-brand-sub{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:2px;color:var(--text-muted);text-transform:uppercase;margin-bottom:7px;}
.login-brand-name{font-family:var(--mono);font-size:24px;font-weight:800;color:var(--accent);letter-spacing:.5px;text-shadow:0 0 20px var(--accent-glow);}
.login-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;}
.login-label{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.15px;text-transform:none;color:var(--text-muted);margin-bottom:8px;display:block;}
.login-input{width:100%;padding:11px 14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  color:var(--text);font-family:var(--sans);font-size:14px;font-weight:500;outline:none;transition:border-color .2s;margin-bottom:14px;}
.login-input::placeholder{font-family:var(--sans);font-weight:400;color:var(--text-dim);}
.login-input:focus{border-color:var(--accent);}
.pin-input{font-family:var(--mono);font-size:20px;letter-spacing:8px;text-align:center;}
.login-input.error{border-color:var(--danger);animation:shake .3s;}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.btn-primary{width:100%;padding:13px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);
  font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.45px;text-transform:uppercase;cursor:pointer;box-shadow:0 4px 12px var(--accent-glow);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 8px 18px var(--accent-glow);}
.btn-primary:active{transform:translateY(0);box-shadow:none;}
.login-error{text-align:center;font-size:11px;color:var(--danger);margin-top:10px;font-family:var(--mono);min-height:16px;}
.login-hint{font-size:11px;color:var(--text-muted);text-align:center;margin-top:14px;font-family:var(--mono);}
.login-hint a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.login-social{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);text-align:center;}
.login-social-label{display:block;margin-bottom:10px;font-family:var(--mono);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-dim);}
.login-social-links{display:flex;justify-content:center;gap:8px;}
.login-social-link{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:1px solid var(--border);border-radius:50%;color:var(--text-muted);text-decoration:none;transition:color .2s,border-color .2s,background .2s,transform .2s;}
.login-social-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.login-social-link:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-dim);transform:translateY(-1px);}
.login-social-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ── TOPBAR ── */
#appScreen{display:none;min-height:100vh;}
.topbar{position:sticky;top:0;z-index:100;background:var(--topbar-bg);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:52px;}
.topbar,.topbar *{font-family:var(--sans);}
.topbar-left{display:flex;align-items:center;gap:10px;min-width:0;}
.topbar-badge{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;border:1px solid var(--accent);color:var(--accent);background:var(--accent-dim);}
.topbar-badge.admin{border-color:var(--warn);color:var(--warn);}
.topbar-resto{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--text);letter-spacing:1px;}
.topbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.topbar-right .btn-sm{white-space:nowrap;}
/* CL3: «Cambiar PIN» no cabía a 375 px junto al tema y Salir: la página
   se ensanchaba a 406. En móvil el botón dice «PIN» y la versión se
   esconde; el nombre del restaurante puede partir en dos líneas, como ya
   hacía «BONZAS BURGER GRILL». */
@media (max-width:480px){
  /* La barra no puede llevar a la vez nombre, marca y tres acciones con
     texto: se montaban unas sobre otras. El nombre ya se lee en el contenido;
     aquí quedan marca, rol y tres acciones circulares centradas. */
  .topbar{height:54px;padding:0 10px;gap:6px;}
  .topbar-left{flex:1 1 auto;gap:6px;overflow:hidden;}
  .topbar-resto,.topbar-version{display:none;}
  .brand-pill-app{width:36px;height:36px;padding:5px;justify-content:center;}
  .brand-pill-app span{display:none;}
  .topbar-badge{padding:5px 8px;font-size:8px;letter-spacing:.55px;white-space:nowrap;}
  .topbar-right{gap:6px;}
  .topbar-right .nav-icon-btn,.topbar-right .nav-restaurantes,.topbar-right .nav-salir{width:36px;min-width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;gap:0;}
  .topbar-right .nav-restaurantes span,.topbar-right .nav-salir span{display:none;}
  .topbar-right .nav-icon-btn{font-size:15px!important;line-height:1!important;}
  .topbar-right .nav-restaurantes svg,.topbar-right .nav-salir svg{width:16px;height:16px;margin:0;}
  .solo-ancho{display:none;}
}
@media (max-width:350px){.topbar-badge{padding:5px 6px;font-size:7px;letter-spacing:.25px;}.topbar-right{gap:4px;}}
.btn-sm{padding:7px 12px;border-radius:999px;border:1px solid var(--border);background:transparent;
  color:var(--text-muted);font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;cursor:pointer;transition:transform .2s ease,border-color .2s ease,color .2s ease,background .2s ease,box-shadow .2s ease;}
.btn-sm:hover{border-color:var(--border2);color:var(--text);transform:translateY(-1px);box-shadow:0 5px 14px rgba(0,0,0,.12);}
.btn-sm:active{transform:translateY(0);box-shadow:none;}
.btn-sm.danger:hover{border-color:var(--danger);color:var(--danger);}
/* S2: Suspender y Eliminar compartían el rojo. Una se deshace con otro clic;
   la otra borra el menú, los videos, la cobranza y las estadísticas. Cuando el
   color de peligro cubre las dos deja de avisar de la que importa. Eliminar es
   ahora el único rojo, y lo es sin pasar el ratón; suspender avisa en ámbar. */
.btn-sm.eliminar{border-color:var(--danger);color:var(--danger);}
.btn-sm.eliminar:hover{background:var(--danger);color:#fff;}
.btn-sm.suspender:hover{border-color:var(--warn);color:var(--warn);}
.btn-sm.accent{border-color:#ff981e;background:var(--accent);color:#fff;font-family:var(--sans);font-weight:800;letter-spacing:.3px;box-shadow:0 4px 12px var(--accent-glow);}
.btn-sm.accent:hover{border-color:#ffad48;background:#f4810c;color:#fff;box-shadow:0 8px 18px var(--accent-glow);}

/* Acciones de navegación: cada una comunica su destino con un icono, no con
   una flecha genérica. Mantienen el tamaño compacto de la barra sin parecer
   controles secundarios perdidos entre sí. */
.topbar-right .nav-icon-btn,.topbar-right .nav-restaurantes,.topbar-right .nav-salir{
  min-height:34px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border-color:color-mix(in srgb,var(--accent) 34%,var(--border));
  background:color-mix(in srgb,var(--accent) 7%,transparent);
}
.topbar-right .nav-icon-btn{width:34px;padding:0;}
.topbar-right .nav-restaurantes{color:var(--accent-texto);}
.topbar-right .nav-restaurantes svg,.topbar-right .nav-salir svg{
  width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;
}
.topbar-right .nav-restaurantes:hover{
  border-color:var(--accent);background:var(--accent-dim);color:var(--accent-texto);
  box-shadow:0 7px 18px var(--accent-glow);
}
.topbar-right .nav-salir{border-color:color-mix(in srgb,var(--danger) 34%,var(--border));}
.topbar-right .nav-salir:hover{
  border-color:var(--danger);background:var(--danger-dim);color:var(--danger);
  box-shadow:0 7px 18px color-mix(in srgb,var(--danger) 18%,transparent);
}
/* Controles principales de la barra: se leen como tres píldoras distintas,
   incluso de reojo. Montserrat y contraste alto evitan el aspecto de enlaces
   secundarios que tenían con la tipografía monoespaciada. */
.topbar-right .nav-icon-btn,.topbar-right .nav-restaurantes,.topbar-right .nav-salir{
  border-radius:999px;font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.35px;
  text-transform:uppercase;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
}
.topbar-right .nav-icon-btn{border-color:#d28a2b;background:#57330f;color:#ffe1ae;box-shadow:inset 0 1px rgba(255,255,255,.1);}
.topbar-right .nav-icon-btn:hover{border-color:#f2aa42;background:#754516;color:#fff2d5;box-shadow:0 7px 16px rgba(210,138,43,.24);}
.topbar-right .nav-restaurantes{border-color:#9b72f3;background:#7150bb;color:#fff;box-shadow:0 4px 12px rgba(93,60,166,.28);}
.topbar-right .nav-restaurantes:hover{border-color:#b89aff;background:#8563d2;color:#fff;box-shadow:0 8px 18px rgba(93,60,166,.38);}
.topbar-right .nav-salir{border-color:#ef5350;background:#b7262b;color:#fff;box-shadow:0 4px 12px rgba(183,38,43,.22);}
.topbar-right .nav-salir:hover{border-color:#ff7774;background:#d6383d;color:#fff;box-shadow:0 8px 18px rgba(183,38,43,.34);}
.topbar-right .nav-icon-btn:hover,.topbar-right .nav-restaurantes:hover,.topbar-right .nav-salir:hover{transform:translateY(-2px);}
.topbar-right .nav-icon-btn:focus-visible,.topbar-right .nav-restaurantes:focus-visible,.topbar-right .nav-salir:focus-visible{outline:2px solid #fff;outline-offset:2px;}

/* ── NAVEGACIÓN LATERAL ── */
/* Desde el 21/10/2026. Catorce pestañas en una fila se desplazaban en horizontal y el
   cliente no veía qué había más allá; ahora van en columna, agrupadas (.nav-grupo) y con
   un título por grupo. Sigue siendo el mismo .tabs con los mismos .tab-btn: switchTab() y
   quien esconde una pestaña con display:none no se enteran. Fija a la izquierda, bajo la
   barra de arriba (52 px; 54 en móvil). Por debajo de 900 px es un cajón (navegacion.js).
   Las reglas .hay-mas-* (M1) se conservan: con la columna ya no se activan, pero el
   carril de categorías de Productos (P5) usa las mismas. */
.tabs{position:fixed;top:52px;bottom:0;left:0;width:232px;z-index:90;display:flex;flex-direction:column;gap:2px;
  padding:14px 10px 28px;background:var(--surface);border-right:1px solid var(--border);overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--border2) transparent;}
.tabs::-webkit-scrollbar{width:4px;}
.tabs::-webkit-scrollbar-track{background:transparent;}
.tabs::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}
/* P5: el carril de categorías de Productos usa el mismo aviso. Con 21
   categorías enseñaba 8 y nada decía que había 13 más. */
.tabs.hay-mas-derecha,.cat-filter.hay-mas-derecha{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent);}
.tabs.hay-mas-izquierda,.cat-filter.hay-mas-izquierda{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 48px),transparent);
  mask-image:linear-gradient(to left,#000 calc(100% - 48px),transparent);}
.tabs.hay-mas-izquierda.hay-mas-derecha,.cat-filter.hay-mas-izquierda.hay-mas-derecha{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 48px,#000 calc(100% - 48px),transparent);
  mask-image:linear-gradient(to right,transparent,#000 48px,#000 calc(100% - 48px),transparent);}
.nav-grupo{display:flex;flex-direction:column;gap:2px;margin-top:16px;}
/* Un grupo cuyos botones están todos escondidos (display:none en línea) no deja su título huérfano. */
.nav-grupo:not(:has(.tab-btn:not([style*="none"]))){display:none;}
.nav-titulo{padding:0 12px 6px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-dim);}
.tab-btn{display:flex;align-items:center;width:100%;padding:9px 12px;border:none;border-radius:10px;background:transparent;
  color:var(--text-muted);font-family:var(--sans);font-size:13px;font-weight:600;text-align:left;
  cursor:pointer;white-space:nowrap;transition:color .2s ease,background .2s ease;}
.tab-btn:hover{color:var(--text);background:color-mix(in srgb,var(--accent) 7%,transparent);}
.tab-btn.active{color:var(--accent-texto);background:var(--accent-dim);}
.tab-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
/* El espacio con el texto es un margen y no un gap: ajustarPestanasAlModelo() y compañía muestran
   algunos botones con display:block, que pisa el flex, y con gap el icono quedaba pegado al texto. */
.tab-ico{display:inline-block;vertical-align:-3px;margin-right:11px;width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.nav-fondo{display:none;}
.nav-menu{display:none;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border-radius:10px;}
.nav-menu svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
/* El contenido se corre a la derecha de la barra y se centra en el espacio que queda. */
@media (min-width:900px){#appScreen .content{margin:0 auto 0 max(232px,calc((100vw - 1000px + 232px) / 2));}}
@media (max-width:899px){
  .nav-menu{display:inline-flex;}
  .tabs{width:min(280px,86vw);transform:translateX(-100%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s;}
  body.nav-abierta .tabs{transform:none;visibility:visible;transition:transform .22s ease;box-shadow:12px 0 32px rgba(0,0,0,.28);}
  body.nav-abierta .nav-fondo{display:block;position:fixed;inset:52px 0 0 0;z-index:89;background:rgba(0,0,0,.45);}
  .tab-btn{padding:12px;font-size:14px;}
}
@media (max-width:480px){.tabs{top:54px;}body.nav-abierta .nav-fondo{top:54px;}}
@media (prefers-reduced-motion:reduce){.tabs,body.nav-abierta .tabs{transition:none;}}

/* ── CONTENT ── */
.content{padding:20px 20px 80px;max-width:1000px;margin:0 auto;}

/* ── SECTION CARD ── */
.section-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;margin-bottom:20px;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;}
.section-title{display:inline-flex;align-items:center;min-height:26px;padding:5px 10px;border:1px solid var(--accent);border-radius:999px;background:var(--accent-dim);font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.65px;text-transform:uppercase;color:var(--accent-texto);margin-bottom:14px;}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
/* Partes de una misma tarjeta (Ajustes → Carrito de compras). Con una
   tarjeta por parte, el hueco entre el número de WhatsApp y los métodos de pago
   era el mismo que entre los toppings y los filtros, y nada decía qué iba con
   qué. Una línea dentro de la tarjeta separa sin sacarlo del bloque. */
/* El editor del horario de atención (horario-atencion.js). */
.horario-franja{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px;margin-bottom:10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);}
.horario-dias{display:flex;flex-wrap:wrap;gap:6px;}
.horario-horas{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:12px;color:var(--text-muted);}
.horario-todo{display:flex;align-items:center;gap:6px;cursor:pointer;}
.horario-hora-campo{display:flex;align-items:center;gap:6px;}
.horario-hora{width:auto;min-width:92px;padding:7px 8px;font-size:12px;}
.horario-quitar{margin-left:auto;}
/* Un interruptor sin dato detrás: se ve apagado y no se puede pulsar. */
.form-check.sin-dato{opacity:.6;}
.toggle input:disabled + .toggle-slider{cursor:not-allowed;}
.toggle:has(input:disabled){cursor:not-allowed;}
.bienvenida-dato-negocio{font-size:13px;color:var(--text-muted);line-height:1.6;}
.bienvenida-dato-negocio strong{color:var(--text);word-break:break-all;}
.bienvenida-dato-negocio a{color:var(--accent);}
.aj-bloque{border-top:1px solid var(--border);margin-top:18px;padding-top:18px;}
.aj-subtitulo{font-size:13px;font-weight:600;color:var(--text);margin-bottom:10px;}
.section-header .aj-subtitulo{margin-bottom:0;}

/* ── INICIO ── */
/* ── INICIO ──
   Rehecha el 17/09/2026 (ver public/inicio.js): lo pendiente arriba y
   con su botón, lo que está en orden en una línea, y las funciones como
   interruptores. */
.inicio-encabezado{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:8px 0 20px;}
.cuenta-suspendida{max-width:720px;margin:38px auto;padding:36px 32px;text-align:center;border:1px solid var(--warn);border-radius:var(--r-lg);background:linear-gradient(145deg,var(--warn-dim),var(--panel));}
.cuenta-suspendida-icono{font-size:42px;margin-bottom:12px;}
.cuenta-suspendida h1{font-size:26px;line-height:1.2;margin:0 0 12px;}
.cuenta-suspendida p{max-width:560px;margin:0 auto 22px;color:var(--text-muted);font-size:14px;line-height:1.55;}
.cuenta-suspendida .btn-sm{display:inline-flex;text-decoration:none;}
.tab-btn:disabled{opacity:.48;cursor:not-allowed;}
.inicio-sobrelinea{display:inline-flex;align-items:center;min-height:26px;padding:5px 10px;border-radius:999px;background:var(--accent-dim);border:1px solid var(--accent);font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.7px;color:var(--accent-texto);margin-bottom:9px;}
.inicio-encabezado h1{font-size:28px;line-height:1.15;font-weight:800;letter-spacing:-.7px;}
.inicio-acciones{display:flex;gap:8px;flex-wrap:wrap;}
.inicio-acciones a.btn-sm{display:inline-flex;align-items:center;text-decoration:none;}
/* Tres columnas siempre: en un móvil caben (son números cortos), y el
   2+1 de antes dejaba la tercera ocupando el ancho entero, sola. */
.inicio-resumen{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;}
.inicio-metrica{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 16px;min-width:0;}
.inicio-metrica-numero{font-family:var(--mono);font-size:24px;font-weight:700;color:var(--text);}
.inicio-metrica-etiqueta{font-size:12px;color:var(--text-muted);margin-top:4px;}
.inicio-estados{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:-10px 0 20px;}
.inicio-estado{margin:0;padding:15px 16px;}
.inicio-estado-cabecera{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.inicio-estado-titulo{font-size:13px;font-weight:700;color:var(--text);}
.inicio-estado-badge{flex-shrink:0;padding:5px 9px;border-radius:999px;font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.55px;text-transform:uppercase;}
.inicio-estado-badge.correcto{color:#fff;background:#159957;border:1px solid #1ba765;}
.inicio-estado-badge.alerta{color:#fff;background:#a64231;border:1px solid #d96750;}
.inicio-estado-detalle{margin:8px 0 12px;font-size:12px;line-height:1.45;color:var(--text-muted);}
.inicio-estado .btn-sm{display:inline-flex;text-decoration:none;}
.inicio-renovacion{margin:-8px 0 20px;padding:17px 18px;border:1px solid var(--warn);border-radius:var(--r-lg);background:linear-gradient(100deg,var(--warn-dim),var(--panel));}
.inicio-renovacion-cabecera{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.inicio-renovacion-sobrelinea{font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.7px;color:var(--warn);}
.inicio-renovacion-titulo{margin-top:4px;font-size:16px;font-weight:800;color:var(--text);}
.inicio-renovacion-dias{flex-shrink:0;padding:6px 10px;border-radius:999px;background:var(--warn);color:#fff;font-size:11px;font-weight:800;}
.inicio-renovacion p{margin:8px 0 12px;max-width:640px;font-size:12px;line-height:1.45;color:var(--text-muted);}
.inicio-renovacion-barra{height:7px;margin-bottom:14px;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--warn) 18%,var(--panel));}
.inicio-renovacion-barra span{display:block;height:100%;width:0;border-radius:inherit;background:var(--warn);transition:width .25s ease;}
.inicio-renovacion .btn-sm{display:inline-flex;text-decoration:none;}
.inicio-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:start;}
.inicio-tarjeta{margin-bottom:0;}
.inicio-tarjeta-ancha{grid-column:1 / -1;}
.inicio-cuenta:not(:empty){display:inline-block;margin-left:8px;padding:1px 7px;border-radius:10px;
  background:var(--warn-dim);color:var(--warn);font-size:10px;letter-spacing:0;}
.inicio-pendiente{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 14px;margin-bottom:8px;border-radius:var(--radius);background:var(--warn-dim);border:1px solid transparent;}
.inicio-pendiente.grave{background:var(--danger-dim);border-color:var(--danger);}
.inicio-pendiente-texto{min-width:0;}
.inicio-pendiente-titulo{font-size:13px;font-weight:600;color:var(--text);}
.inicio-pendiente-nota{font-size:12px;color:var(--text-muted);line-height:1.45;margin-top:3px;}
.inicio-pendiente .btn-sm{flex-shrink:0;}
.inicio-en-orden{font-size:12px;color:var(--success);margin-top:4px;}
.inicio-todo-bien{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--text-muted);}
.inicio-todo-bien-marca{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:var(--success-dim);color:var(--success);font-weight:700;}
.inicio-funcion{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:11px 0;border:0;border-top:1px solid var(--border);background:transparent;color:inherit;
  font:inherit;text-align:left;cursor:pointer;}
.inicio-funcion:first-child{border-top:0;padding-top:0;}
.inicio-funcion:hover .inicio-funcion-titulo{color:var(--accent-texto);}
.inicio-funcion-texto{min-width:0;}
.inicio-funcion-titulo{font-size:13px;font-weight:600;color:var(--text);}
.inicio-funcion-detalle{font-size:12px;color:var(--text-muted);line-height:1.45;margin-top:2px;}
.inicio-pastilla{flex-shrink:0;min-width:86px;padding:6px 10px;border-radius:999px;border:1px solid #854521;
  background:#613018;color:#fff;font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.65px;
  line-height:1;text-align:center;text-transform:uppercase;box-shadow:inset 0 1px rgba(255,255,255,.12);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;}
.inicio-pastilla.encendida{border-color:#1ba765;background:#159957;color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.18),0 3px 10px rgba(21,153,87,.2);}
.inicio-funcion:hover .inicio-pastilla{transform:translateY(-1px);filter:brightness(1.08);box-shadow:inset 0 1px rgba(255,255,255,.2),0 6px 14px rgba(0,0,0,.2);}
.inicio-configuracion{display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid var(--border);}
.inicio-configuracion:first-child{padding-top:0;border-top:0;}
.inicio-configuracion-marca{width:22px;height:22px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:var(--warn-dim);color:var(--warn);font-size:14px;font-weight:800;}
.inicio-configuracion.lista .inicio-configuracion-marca{background:var(--success-dim);color:var(--success);}
.inicio-configuracion-texto{min-width:0;flex:1;}
.inicio-configuracion-titulo{font-size:13px;font-weight:600;color:var(--text);}
.inicio-configuracion-detalle{margin-top:2px;font-size:12px;line-height:1.4;color:var(--text-muted);}
.inicio-configuracion .btn-sm{flex:0 0 auto;}
.orden-card{display:flex;justify-content:space-between;gap:12px;align-items:start;padding:12px 0;border-top:1px solid var(--border);font-size:13px;line-height:1.55;}
.orden-card span{font-size:12px;color:var(--text-muted);}
.orden-card select{width:150px;flex:0 0 auto;padding:7px 9px;font-size:12px;}

/* Acciones principales de Inicio: botones con la misma voz visual que los estados,
   pero conservando una jerarquía clara entre acciones normales y la acción de crear. */
.inicio-acciones .btn-sm{border-radius:999px;font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.25px;text-transform:uppercase;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;}
.inicio-acciones .btn-sm:not(.accent){border-color:#73502e;background:rgba(255,255,255,.04);color:var(--text);}
.inicio-acciones .btn-sm.accent{border-color:#ff981e;background:var(--accent);color:#fff;box-shadow:0 4px 12px var(--accent-glow);}
.inicio-acciones .btn-sm:hover{transform:translateY(-2px);box-shadow:0 7px 16px rgba(0,0,0,.22);}
.inicio-acciones .btn-sm.accent:hover{background:#f4810c;box-shadow:0 8px 18px var(--accent-glow);}

/* Plan: una superficie propia evita que el selector parezca un control suelto. */
.plan-card{border-color:#755126;background:linear-gradient(135deg,rgba(237,124,0,.11),transparent 42%),var(--panel);}
.plan-card .section-header{align-items:center;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--border);}
/* .form-select declara width:100% más abajo. Esta regla gana por especificidad
   para que el desplegable no invada toda la tarjeta al abrirse. */
.plan-card .plan-select{box-sizing:border-box;flex:0 0 180px;width:180px;max-width:100%;min-width:0;padding:9px 34px 9px 13px;border:1px solid var(--accent);border-radius:10px;background-color:#27170b;color:#fff;font-family:var(--sans);font-size:12px;font-weight:800;box-shadow:0 0 0 3px rgba(237,124,0,.12);cursor:pointer;}
.plan-card .plan-select option{background:#fff7ef;color:#4b2b16;font-family:var(--sans);font-weight:800;}
.plan-card .plan-select option:checked{background:#ed7c00;color:#fff;}
.plan-select:hover,.plan-select:focus{border-color:#ff9a36;box-shadow:0 0 0 4px rgba(237,124,0,.2);}
.plan-summary{display:block;margin-top:14px;font-family:var(--sans);font-size:12px;font-weight:600;line-height:1.8;color:var(--text-muted);}
.plan-summary span{font-weight:800;}
.plan-note{margin-top:14px;padding:10px 12px;border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;background:rgba(237,124,0,.08);font-family:var(--sans);font-size:11px;font-weight:600;color:var(--text-muted);line-height:1.6;}

/* Grupos plegables de Apariencia y Superadmin. El resumen es una píldora
   completa para que el panel se pueda recorrer sin desplegar controles que no
   se van a usar. Los <details> son independientes y mantienen el teclado
   accesible sin JavaScript adicional. */
.panel-acordeon{margin:0 0 12px;font-family:var(--sans);}
.panel-acordeon>summary{display:flex;align-items:center;gap:12px;min-height:58px;padding:10px 16px;border:1px solid color-mix(in srgb,var(--accent) 32%,var(--border));border-radius:999px;background:linear-gradient(120deg,color-mix(in srgb,var(--panel) 92%,var(--accent) 8%),var(--panel));color:var(--text);cursor:pointer;list-style:none;box-shadow:0 4px 13px rgba(50,27,10,.08);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;}
.panel-acordeon>summary::-webkit-details-marker{display:none;}
.panel-acordeon>summary::after{content:'⌄';display:grid;place-items:center;flex:0 0 29px;width:29px;height:29px;margin-left:auto;border-radius:50%;background:var(--accent-dim);color:var(--accent);font-size:20px;font-weight:800;line-height:1;transition:transform .2s ease,background .2s ease,color .2s ease;}
.panel-acordeon-titulo{font-family:'Montserrat',var(--sans);font-size:13px;font-weight:850;letter-spacing:.15px;}
.panel-acordeon>summary small{margin-left:auto;max-width:52%;color:var(--text-muted);font-size:11px;font-weight:600;line-height:1.35;text-align:right;}
.panel-acordeon>summary:hover{transform:translateY(-2px);border-color:var(--accent);background:linear-gradient(120deg,color-mix(in srgb,var(--panel) 84%,var(--accent) 16%),var(--panel));box-shadow:0 8px 18px rgba(50,27,10,.15);}
.panel-acordeon>summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px;}
.panel-acordeon[open]>summary{border-color:var(--accent);box-shadow:0 6px 16px rgba(50,27,10,.14);}
.panel-acordeon[open]>summary::after{transform:rotate(180deg);background:var(--accent);color:#fff;}
.panel-acordeon-cuerpo{display:grid;gap:10px;padding:11px 3px 3px;animation:panel-acordeon-abrir .18s ease both;}
.panel-acordeon-cuerpo>.section-card{margin:0;}
.panel-acordeon-cuerpo>.section-card .section-title{font-family:'Montserrat',var(--sans);}
@keyframes panel-acordeon-abrir{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@media (width <= 680px){.panel-acordeon>summary{min-height:62px;padding:10px 13px;gap:9px;border-radius:18px;}.panel-acordeon>summary small{max-width:none;margin-left:0;text-align:left;}.panel-acordeon>summary::after{flex-basis:28px;width:28px;height:28px;}.panel-acordeon-titulo{font-size:12px;}.panel-acordeon-cuerpo{padding:9px 0 2px;gap:8px;}.panel-acordeon-cuerpo>.section-card{padding:14px 12px;}}
@media(prefers-reduced-motion:reduce){.panel-acordeon>summary,.panel-acordeon>summary::after{transition:none;}.panel-acordeon-cuerpo{animation:none;}}

/* Píldoras de navegación y gestión: el mismo contraste cambia de lado con el
   tema. En claro, café sobre superficie clara; en oscuro, crema legible sobre
   la superficie oscura. Se limita a los títulos funcionales, no a etiquetas de
   formularios ni a títulos dentro de tablas. */
#tabInicio .inicio-titulo-pildora,
#tabCategorias>.section-card>.section-title,
#tabPromo>.section-card>.section-header>.section-title,
#tabTv>.section-card>.section-header>.section-title,
#tabImportar>.section-card>.section-title,
#tabQr .section-card>.section-title,
#tabEstadisticas .section-card>.section-title,
#tabSedes .section-card>.section-header>.section-title,
#tabSedes .section-card>.section-title{display:inline-flex;align-items:center;width:max-content;max-width:100%;min-height:34px;margin-bottom:12px;padding:8px 13px;border:1px solid var(--titulo-pill-border);border-radius:999px;background:var(--titulo-pill-bg);color:var(--titulo-pill-text);font-family:'Montserrat',var(--sans);font-size:12px;font-weight:850;letter-spacing:.18px;line-height:1.15;box-shadow:0 4px 10px var(--titulo-pill-shadow);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,background .18s ease;}
#tabInicio .inicio-titulo-pildora:hover,
#tabCategorias>.section-card>.section-title:hover,
#tabPromo>.section-card>.section-header>.section-title:hover,
#tabTv>.section-card>.section-header>.section-title:hover,
#tabImportar>.section-card>.section-title:hover,
#tabQr .section-card>.section-title:hover,
#tabEstadisticas .section-card>.section-title:hover,
#tabSedes .section-card>.section-header>.section-title:hover,
#tabSedes .section-card>.section-title:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 8px 16px var(--titulo-pill-shadow);}
#tabInicio .inicio-titulo-pildora--cta{font-size:13px;padding:9px 15px;}
#tabAspecto .panel-acordeon>summary{border-color:var(--titulo-pill-border);background:var(--titulo-pill-bg);color:var(--titulo-pill-text);box-shadow:0 4px 10px var(--titulo-pill-shadow);}
#tabAspecto .panel-acordeon>summary small{color:var(--titulo-pill-text);opacity:.76;}
#tabAspecto .panel-acordeon>summary:hover{background:var(--titulo-pill-bg);filter:brightness(1.06);box-shadow:0 8px 16px var(--titulo-pill-shadow);}
/* Los chips de Ajustes son las categorías visibles de esa pestaña. */
.aj-seccion-tab{min-height:44px;border-color:var(--titulo-pill-border);background:var(--titulo-pill-bg);color:var(--titulo-pill-text);font-family:'Montserrat',var(--sans);font-weight:850;box-shadow:0 3px 9px var(--titulo-pill-shadow);}
.aj-seccion-tab:hover{color:var(--titulo-pill-text);background:var(--titulo-pill-bg);transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 7px 15px var(--titulo-pill-shadow);}
.aj-seccion-tab.active{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 5px 13px var(--accent-glow);}

/* Un mismo lenguaje para TODOS los títulos y subtítulos en píldora del
   panel. Las variables invierten el contraste entre los dos temas: café con
   texto claro al ver la interfaz clara, crema con texto café al verla oscura.
   Así tampoco se pierde un encabezado pequeño entre controles de formulario. */
#appScreen .section-title{display:inline-flex;align-items:center;gap:7px;min-height:36px;max-width:100%;margin-bottom:13px;padding:8px 14px;border:1px solid var(--titulo-pill-border);border-radius:999px;background:var(--titulo-pill-bg);color:var(--titulo-pill-text);font-family:'Montserrat',var(--sans);font-size:12px;font-weight:850;letter-spacing:.18px;line-height:1.2;text-transform:uppercase;box-shadow:0 4px 10px var(--titulo-pill-shadow);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,background .18s ease;}
#appScreen .section-title:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 8px 16px var(--titulo-pill-shadow);}
#appScreen .section-title:active{transform:translateY(0) scale(.985);}
#appScreen .section-title :is(svg,.section-title-icon){color:currentColor;fill:currentColor;}
/* Los números siempre se leen como una pequeña llamada de atención, nunca
   como texto naranja perdido sobre el café o la crema de la píldora. */
#appScreen .section-title .inicio-cuenta:not(:empty),
#appScreen .section-title .tab-contador{display:inline-grid;place-items:center;min-width:22px;min-height:22px;margin-left:2px;padding:2px 7px;border:1px solid rgba(255,255,255,.42);border-radius:999px;background:var(--accent);color:#fff;font-family:'Montserrat',var(--sans);font-size:11px;font-weight:900;letter-spacing:0;line-height:1;box-shadow:0 2px 5px rgba(86,43,11,.22);}
/* «Pon tu carta a punto» guía el bloque; la acción verde continúa siendo
   visible, pero su escala no compite con el título. */
#tabInicio .inicio-titulo-pildora--cta{min-height:45px;padding:10px 17px;font-size:15px;font-weight:900;letter-spacing:.1px;box-shadow:0 6px 15px var(--titulo-pill-shadow);}
@media (width <= 640px){#appScreen .section-title{min-height:38px;padding:8px 12px;font-size:11px;}#tabInicio .inicio-titulo-pildora--cta{min-height:44px;padding:10px 14px;font-size:14px;}}

/* Inicio: la acción pública destaca sin mezclarse con los botones de estado. */
.inicio-abrir-carta{display:inline-flex!important;align-items:center;justify-content:center;min-height:38px;border-color:#1e9b5d!important;background:#159957!important;color:#fff!important;font-family:'Montserrat',var(--sans)!important;font-size:10px!important;font-weight:850!important;box-shadow:0 5px 13px rgba(21,153,87,.3);animation:inicio-cta-respiro 3.5s ease-in-out infinite;}
.inicio-abrir-carta:hover{background:#1bad66!important;transform:translateY(-2px);box-shadow:0 9px 19px rgba(21,153,87,.38)!important;}
@keyframes inicio-cta-respiro{0%,100%{box-shadow:0 5px 13px rgba(21,153,87,.28)}50%{box-shadow:0 5px 0 5px rgba(21,153,87,.11),0 9px 18px rgba(21,153,87,.32)}}
.inicio-configuracion .inicio-atajo{min-height:34px;border-color:#895333;background:#6b4027;color:#fff;font-family:'Montserrat',var(--sans);font-size:10px;font-weight:800;letter-spacing:.2px;text-transform:none;box-shadow:0 3px 9px rgba(65,35,17,.18);}
.inicio-configuracion .inicio-atajo:hover{border-color:#a76a41;background:#794a2d;color:#fff;transform:translateY(-2px);box-shadow:0 7px 14px rgba(65,35,17,.27);}
.inicio-configuracion .inicio-atajo.accent{border-color:#e87809;background:var(--accent);}

/* Sedes, QR, destacados y la salida segura comparten acciones con peso claro. */
.sedes-actualizar{display:inline-flex;align-items:center;gap:6px;min-height:38px;border-color:#e87809!important;background:var(--accent)!important;color:#fff!important;font-family:'Montserrat',var(--sans)!important;font-weight:850!important;box-shadow:0 5px 12px var(--accent-glow);}
.sedes-actualizar span{font-size:15px;transition:transform .28s ease;}.sedes-actualizar:hover span{transform:rotate(150deg);}
.sede-acciones .btn-sm{display:inline-flex;align-items:center;justify-content:center;min-height:36px;font-family:'Montserrat',var(--sans);font-size:10px;font-weight:800;letter-spacing:.1px;text-transform:none;box-shadow:0 3px 9px rgba(0,0,0,.12);}
.sede-acciones .sede-editar{border-color:#9b653c;background:#74472b;color:#fff;}.sede-acciones .sede-encendido{border-color:#a94745;background:#813b38;color:#fff;}.sede-acciones .sede-encendido:hover{background:#a24843;}.sede-acciones .btn-sm:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 7px 14px rgba(0,0,0,.2);}
.qr-ver-cartel,.qr-descarga-svg{min-height:40px;border-radius:10px!important;font-family:'Montserrat',var(--sans)!important;font-size:11px!important;font-weight:850!important;text-transform:none!important;box-shadow:0 4px 11px rgba(0,0,0,.15);}
.qr-ver-cartel{border-color:#895333!important;background:#663b24!important;color:#fff!important;}.qr-descarga-svg{border-color:#e87809!important;background:var(--accent)!important;color:#fff!important;}.qr-ver-cartel:hover,.qr-descarga-svg:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 8px 16px rgba(0,0,0,.23)!important;}
.p-borrar{display:inline-flex;align-items:center;min-height:36px;border-color:#b4383d!important;border-radius:9px!important;background:#b82f38!important;color:#fff!important;font-family:'Montserrat',var(--sans)!important;font-size:10px!important;font-weight:850!important;letter-spacing:.1px!important;box-shadow:0 4px 10px rgba(184,47,56,.22);transition:transform .18s ease,background .18s ease,box-shadow .18s ease!important;}.p-borrar:hover{background:#d13a44!important;transform:translateY(-2px);box-shadow:0 8px 15px rgba(184,47,56,.34)!important;}
.seguir-editando{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;border-color:#8e5d39!important;border-radius:10px!important;background:#70452b!important;color:#fff!important;font-family:'Montserrat',var(--sans)!important;font-size:11px!important;font-weight:850!important;letter-spacing:.12px;box-shadow:0 4px 11px rgba(58,31,14,.2);}.seguir-editando:hover{border-color:#ae7448!important;background:#815233!important;color:#fff!important;transform:translateY(-2px);box-shadow:0 8px 16px rgba(58,31,14,.3);}
@media(max-width:640px){.inicio-configuracion .inicio-atajo{width:100%;min-height:38px;margin-left:0;}.sede-acciones{display:grid;grid-template-columns:1fr 1fr;width:100%;}.sede-acciones .btn-sm{width:100%;}.qr-descargas{display:grid;grid-template-columns:1fr 1fr;}.seguir-editando{width:100%;}.inicio-abrir-carta{width:100%;}}
@media(prefers-reduced-motion:reduce){.inicio-abrir-carta{animation:none;}.inicio-abrir-carta,.inicio-configuracion .inicio-atajo,.sedes-actualizar,.sedes-actualizar span,.sede-acciones .btn-sm,.qr-ver-cartel,.qr-descarga-svg,.p-borrar,.seguir-editando{transition:none;}}

/* Eliminar logo es una acción destructiva: se separa de los controles de subida
   con rojo sólido, texto de alto contraste y una respuesta inequívoca al puntero. */
.btn-remove-logo{margin-top:12px;padding:9px 13px;border:1px solid #ef5350;border-radius:8px;background:#b7262b;color:#fff;font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.25px;cursor:pointer;box-shadow:0 3px 10px rgba(183,38,43,.22);transition:transform .2s ease,background .2s ease,box-shadow .2s ease;}
.btn-remove-logo:hover{background:#d6383d;transform:translateY(-1px);box-shadow:0 7px 15px rgba(183,38,43,.32);}
.btn-remove-logo:focus-visible{outline:2px solid #ff8c8c;outline-offset:2px;}

/* ── FILTRO CATS ── */
.cat-filter{display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--border2) transparent;
  padding-bottom:6px;margin-bottom:14px;cursor:grab;}
.cat-filter:active{cursor:grabbing;}
.cat-filter::-webkit-scrollbar{height:3px;}
.cat-filter::-webkit-scrollbar-track{background:transparent;}
.cat-filter::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}
.cat-chip{flex-shrink:0;padding:7px 14px;border-radius:20px;border:1px solid var(--border);background:transparent;
  color:var(--text-muted);font-family:var(--sans);font-size:12px;font-weight:500;
  cursor:pointer;transition:all .18s;white-space:nowrap;user-select:none;}
.cat-chip:hover{border-color:var(--border2);color:var(--text);}
.cat-chip.active{border-color:var(--accent);color:var(--accent-texto);background:var(--accent-dim);}

/* ── CONTROLES PRODUCTOS ── */
.products-controls{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.sort-select{padding:7px 12px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  color:var(--text-muted);font-family:var(--sans);font-size:12px;outline:none;cursor:pointer;transition:border-color .2s;}
.sort-select:focus{border-color:var(--accent);}
.sort-select option{background:var(--card);}

/* ── TABLA PRODUCTOS ── */
.products-table{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;}
/* Con las flechas de reordenar hacen falta dos botones más en la
   última columna, o el basurero se cae a una segunda línea. */
.products-table.reordenando .table-header,
.products-table.reordenando .product-row{grid-template-columns:84px 1fr 130px 90px 200px;}
.table-header{display:grid;grid-template-columns:84px 1fr 130px 90px 140px;padding:10px 16px;
  border-bottom:1px solid var(--border);background:var(--card);}
.th{font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);}
.product-row{display:grid;grid-template-columns:84px 1fr 130px 90px 140px;padding:10px 16px;
  border-bottom:1px solid var(--border);align-items:center;transition:background .15s;gap:0;}
.product-row:last-child{border-bottom:none;}
.product-row:hover{background:rgba(231,115,6,0.03);}
.product-row.unavailable{opacity:.4;}
.prod-precio-movil{display:none;}

.prod-img{width:68px;height:68px;object-fit:cover;border-radius:8px;border:1px solid var(--border);cursor:pointer;transition:transform .2s;}
.prod-img:hover{transform:scale(1.05);}
.prod-img-placeholder{width:68px;height:68px;border-radius:8px;border:1px dashed var(--border2);
  background:var(--card);display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:22px;transition:border-color .2s;color:var(--text-dim);}
.prod-img-placeholder:hover{border-color:var(--accent);}
.prod-name{font-size:14px;font-weight:500;color:var(--text);padding-right:10px;line-height:1.3;}
.prod-cat{font-family:var(--sans);font-size:12px;color:var(--text-muted);margin-top:3px;}

.price-input{width:100%;padding:8px 10px;background:var(--card);border:1px solid var(--border);
  border-radius:6px;color:var(--text);font-family:var(--mono);font-size:13px;outline:none;transition:border-color .2s;}
.price-input:focus{border-color:var(--accent);}
.price-input.saved{border-color:var(--success);}

/* Toggle */
.toggle{position:relative;width:40px;height:22px;cursor:pointer;}
.toggle input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;inset:0;background:var(--card);border:1px solid var(--border);border-radius:11px;transition:.25s;}
.toggle-slider:before{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;
  background:var(--text-muted);border-radius:50%;transition:.25s;}
.toggle input:checked + .toggle-slider{background:var(--success-dim);border-color:var(--success);}
.toggle input:checked + .toggle-slider:before{transform:translateX(18px);background:var(--success);}

.btn-edit{padding:5px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--border));background:var(--accent-dim);
  color:var(--accent-texto);font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.25px;cursor:pointer;transition:all .18s;white-space:nowrap;}
.btn-edit:hover{border-color:var(--accent);color:var(--accent-texto);background:var(--accent-dim);}
.btn-del {
  padding: 6px 9px;
  border-radius: 6px;
  border: 1px solid var(--danger);
  background: var(--danger-dim);
  color: var(--danger);
  font-size: 15px;
  cursor: pointer;
  transition: all .18s;
  line-height: 1;
  margin-left: 6px;
}
.btn-del:hover {
  background: var(--danger);
  color: #fff;
}

/* ── CATEGORÍAS LIST ── */
/* position:relative para que offsetTop de cada fila se mida desde la lista:
   el arrastre (C1) calcula ahí dónde va cada una. */
.cat-list{display:flex;flex-direction:column;gap:6px;position:relative;}
.cat-row{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--card);border-radius:var(--radius);border:1px solid var(--border);}
/* Los tres controles van en su propio grupo para que en móvil puedan bajar
   juntos a una segunda fila. En escritorio se ve exactamente igual que
   cuando eran hijos sueltos: el mismo hueco de 12 px entre ellos. */
.cat-acciones{display:flex;align-items:center;gap:7px;}
.cat-acciones>div:first-child{display:flex;align-items:center;gap:5px;padding-right:7px;border-right:1px solid var(--border);}
.cat-acciones .cat-asa,.cat-acciones .btn-edit[data-dir],.cat-acciones>.btn-edit,.cat-acciones>.btn-del{min-height:34px;border-radius:999px;font-family:var(--sans);font-weight:800;letter-spacing:.25px;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease;}
.cat-acciones .cat-asa{display:inline-flex;align-items:center;justify-content:center;min-width:34px;padding:0;color:#d8b58f;border:1px solid var(--border);background:var(--surface);font-size:17px;}
.cat-acciones .btn-edit[data-dir]{min-width:34px;padding:0;border-color:#65421e;background:#35200e;color:#ffd19a;font-size:15px;line-height:1;}
.cat-acciones>.btn-edit{padding:0 14px;border-color:#ff981e;background:var(--accent);color:#fff;font-size:10px;text-transform:uppercase;box-shadow:0 4px 12px var(--accent-glow);}
.cat-acciones>.btn-del{min-width:34px;padding:0;border-color:#ef5350;background:rgba(183,38,43,.17);color:#ff7375;font-size:13px;line-height:1;margin-left:0;}
.cat-acciones .cat-asa:hover,.cat-acciones .btn-edit[data-dir]:hover{transform:translateY(-2px);border-color:var(--accent);background:var(--accent-dim);color:var(--accent-texto);box-shadow:0 6px 14px var(--accent-glow);}
.cat-acciones>.btn-edit:hover{transform:translateY(-2px);border-color:#ffc068;background:#f4810c;color:#fff;box-shadow:0 8px 18px var(--accent-glow);}
.cat-acciones>.btn-del:hover{transform:translateY(-2px);border-color:#ff7774;background:#b7262b;color:#fff;box-shadow:0 8px 18px rgba(183,38,43,.3);}
/* C1: el asa para arrastrar. touch-action:none SOLO en el asa: en el resto
   de la fila el dedo tiene que seguir desplazando la lista. */
.cat-asa{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  color:var(--text-dim);font-size:18px;line-height:1;padding:6px 8px;border-radius:6px;}
.cat-asa:hover{color:var(--text);background:var(--surface);}
/* Levantada: sigue al puntero por encima de las demás (el transform lo pone
   seguirPunteroCat). */
.cat-row.arrastrando{border-color:var(--accent);box-shadow:0 12px 28px rgba(0,0,0,.35);position:relative;z-index:2;will-change:transform;}
.cat-list.arrastrando-lista,.cat-list.arrastrando-lista .cat-asa{cursor:grabbing;}
.cat-emoji{font-size:22px;width:32px;text-align:center;}
.cat-name{flex:1;font-size:15px;font-weight:500;color:var(--text);}
.cat-meta{font-family:var(--sans);font-size:12px;color:var(--text-muted);margin-top:2px;}

/* ── PROMO ── */
.promo-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.promo-status{display:flex;align-items:center;gap:10px;}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--text-dim);transition:background .3s;}
.status-dot.on{background:var(--success);box-shadow:0 0 8px var(--success);}
.status-text{font-family:var(--mono);font-size:11px;color:var(--text-muted);}
.toggle-wrap{display:flex;align-items:center;gap:10px;}
.toggle-label{font-size:13px;color:var(--text-muted);}
.promo-img-preview{width:90px;height:90px;object-fit:cover;border-radius:var(--radius);border:1px solid var(--border);}
.upload-zone{border:1px dashed var(--border2);border-radius:var(--radius);padding:18px;text-align:center;
  cursor:pointer;transition:all .2s;margin-top:14px;display:block;}
.upload-zone:hover{border-color:var(--accent);background:var(--accent-dim);}
.upload-zone input{display:none;}
.upload-zone-text{font-size:12px;color:var(--text-muted);}
.upload-zone-text span{color:var(--accent);}

/* El atajo desde Productos. Una pestaña más en la barra es fácil de
   no ver nunca; esto está donde la persona ya se dio cuenta de que
   le falta trabajo por hacer. */
.imp-atajo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border:1px dashed var(--border2);border-radius:var(--r-lg);
  padding:12px 14px;margin-bottom:16px;}
.imp-atajo p{margin:0;flex:1;min-width:220px;font-size:12.5px;
  color:var(--text-muted);line-height:1.6;}

/* ── IMPORTAR LA CARTA ── */
/* Una fila por plato, con los tres campos que se importan. El precio
   va estrecho y a la derecha porque es lo que más se repasa: en una
   carta de 170 platos, leer una columna de precios alineada es lo
   que hace la revisión posible. */
.imp-cat{border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin-bottom:12px;background:var(--surface);}
.imp-cat-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.imp-cat-nombre{flex:1;min-width:0;background:transparent;border:none;border-bottom:1px solid var(--border2);
  color:var(--text);font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;padding:4px 0;}
.imp-cat-nombre:focus{outline:none;border-bottom-color:var(--accent);}
.imp-cat-estado{font-size:10px;font-family:var(--mono);white-space:nowrap;}
.cat-parecida{margin:-4px 0 14px;padding:9px 11px;border-radius:var(--radius);background:var(--warn-dim);
  border:1px solid var(--warn);color:var(--warn);font-size:12px;line-height:1.5;}
.imp-plato{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.imp-plato input{background:var(--panel);border:1px solid var(--border);border-radius:6px;
  color:var(--text);font-size:12px;padding:6px 8px;min-width:0;}
.imp-plato input:focus{outline:none;border-color:var(--accent);}
.imp-p-nombre{flex:2;}
.imp-p-desc{flex:3;color:var(--text-muted);}
.imp-p-precio{flex:0 0 90px;text-align:right;font-family:var(--mono);}
.imp-quitar{background:transparent;border:none;color:var(--text-dim);cursor:pointer;
  font-size:14px;line-height:1;padding:4px 6px;border-radius:4px;flex:0 0 auto;}
.imp-quitar:hover{color:var(--danger);background:var(--danger-dim);}
/* Un plato que el restaurante YA TIENE. No se quita solo: se marca y
   se ofrece quitarlo, porque desaparecer sin que se vea es peor que
   duplicarse a la vista. */
.imp-plato.repetido{border-left:2px solid var(--warn);padding-left:6px;}
.imp-repe{font-size:9px;font-family:var(--mono);color:var(--warn);
  letter-spacing:1px;white-space:nowrap;flex:0 0 auto;}
.imp-banda{border:1px solid var(--warn);background:var(--warn-dim);
  border-radius:var(--radius);padding:10px 12px;margin-bottom:14px;
  font-size:12px;color:var(--text-muted);line-height:1.5;}
.imp-banda button{margin-left:8px;padding:5px 10px;border-radius:6px;
  border:1px solid var(--warn);background:transparent;color:var(--warn);
  font-family:var(--mono);font-size:10px;letter-spacing:1px;cursor:pointer;}
.imp-modelo{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap;}
.imp-modelo select{flex:1;min-width:200px;background:var(--panel);
  border:1px solid var(--border);border-radius:6px;color:var(--text);
  font-size:12px;padding:7px 8px;}
.imp-modelo label{font-size:10px;font-family:var(--mono);letter-spacing:1px;
  color:var(--text-muted);text-transform:uppercase;}
/* .btn-save trae flex:1 porque nació para el pie de un modal, donde
   ocupa todo el ancho. Aquí va acompañado de un texto que hay que
   leer, así que se queda del tamaño de lo que dice. */
.imp-acciones{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--border);}
.imp-acciones .btn-save{flex:0 0 auto;padding:11px 18px;}
/* En un móvil los tres campos en fila dejan cada uno en nada. */
@media (max-width:640px){
  .imp-plato{flex-wrap:wrap;}
  .imp-p-nombre{flex:1 1 100%;}
  .imp-p-desc{flex:1 1 100%;}
  .imp-p-precio{flex:0 0 100px;}
}

/* ── MODAL ── */
.modal-bg{position:fixed;inset:0;background:var(--overlay);z-index:500;
  display:flex;align-items:center;justify-content:center;padding:16px;
  opacity:0;pointer-events:none;transition:opacity .22s;}
.modal-bg.open{opacity:1;pointer-events:all;}
.modal-box{background:var(--panel);border:1px solid var(--border2);border-radius:var(--r-lg);
  width:100%;max-width:500px;max-height:90vh;overflow-y:auto;
  transform:translateY(10px);transition:transform .22s;}
.modal-bg.open .modal-box{transform:translateY(0);}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;
  border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--panel);z-index:1;}
.modal-title{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text);}
/* Título y «Ver en mi carta» agrupados: así modal-head sigue teniendo dos
   hijos (este bloque y el botón de cerrar) y su space-between no cambia. */
.modal-head-titulo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;row-gap:4px;}
.modal-ver-carta{font-family:var(--mono);font-size:10px;letter-spacing:.5px;color:var(--accent);
  text-decoration:none;white-space:nowrap;}
.modal-ver-carta:hover{text-decoration:underline;}
/* Pestañas de "Editar producto" (25/09/2026). Clase propia y no .tab-btn: esa
   la controla switchTab() del panel general con un querySelectorAll('.tab-btn')
   compartido, que le quitaría el estado activo a estos botones al cambiar
   de pestaña ahí, sin relación con esto. */
.ficha-tabs{display:flex;gap:4px;padding:0 22px;border-bottom:1px solid var(--border);background:var(--panel);}
.ficha-tab{padding:10px 14px;border:none;border-bottom:2px solid transparent;background:transparent;
  color:var(--text-muted);font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;
  cursor:pointer;}
.ficha-tab.active{color:var(--text);border-bottom-color:var(--accent);}
.ficha-tab:hover:not(.active){color:var(--text);}
/* !important a propósito: varios de estos grupos (video, personalización,
   filtros, destacados) ya tienen su propio display puesto por JS a mano
   según su estado (con foto o sin ella, con video o sin él…), y un inline
   style siempre gana a cualquier regla externa sin esto — la miniatura de
   foto ya tropezó con lo mismo. cambiarPestanaProducto() solo añade o quita
   esta clase; nunca toca el display que cada grupo ya maneja por su cuenta,
   así que al volver a su pestaña aparece tal y como estaba. */
.ficha-tab-oculta{display:none!important;}
.modal-close{width:28px;height:28px;border-radius:6px;border:1px solid var(--border);background:transparent;
  color:var(--text-muted);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s;}
.modal-close:hover{border-color:var(--danger);background:var(--danger-dim);color:var(--danger);transform:rotate(90deg);}
.modal-close:active{transform:rotate(90deg) scale(.94);}
.modal-body{padding:22px;}
.modal-foot{display:flex;gap:10px;padding:14px 22px 22px;}

/* Alta y edición de adicionales: el flujo se conserva, con más jerarquía. */
.topping-modal-box{box-shadow:0 20px 60px rgba(0,0,0,.28);}
#toppingModal .modal-head{padding:16px 18px;}
#toppingModal .modal-title{display:inline-flex;align-items:center;min-height:31px;padding:0 13px;border-radius:999px;background:var(--accent);color:var(--on-accent);box-shadow:0 5px 15px var(--accent-glow);transition:transform .18s,filter .18s,box-shadow .18s;}
#toppingModal .modal-title:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 8px 18px var(--accent-glow);}
#toppingModal .modal-body{padding:20px 22px 8px;}
#toppingModal .form-group{margin-bottom:17px;}
#toppingModal .form-label{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text);}
#toppingModal .form-input{font-family:var(--sans);font-weight:500;box-shadow:inset 0 1px 0 rgba(255,255,255,.03);}
#toppingModal .form-input::placeholder{font-family:var(--sans);}
#toppingModal .modal-foot{align-items:center;padding:16px 22px 22px;}
#toppingModal .btn-cancel{font-family:var(--sans);font-weight:600;letter-spacing:.1px;border-color:var(--border2);color:var(--text-muted);background:transparent;}
#toppingModal .btn-cancel:hover{border-color:var(--text-muted);background:var(--card);color:var(--text);}
#toppingModal .btn-save{font-family:var(--sans);font-weight:700;letter-spacing:.15px;}
/* Pie fijo de "Editar producto" (25/09/2026): Cancelar/Guardar siguen a la
   vista aunque la ficha sea larga y se desplace. Mismo patrón que ya usa
   .modal-head con su propio lado (position:sticky;top:0). Solo esta ficha:
   las demás ventanas del panel (categoría, toppings…) son cortas y no lo
   necesitan. */
#productModal .modal-foot{position:sticky;bottom:0;background:var(--panel);
  border-top:1px solid var(--border);align-items:center;}
/* Nunca var(--danger): ese color ya significa "hay un error" en la ficha
   (los campos marcados en rojo), y tener algo sin guardar no lo es. */
.ficha-cambios-indicador{flex:1;font-family:var(--mono);font-size:10px;color:var(--warn);}

.form-group{margin-bottom:16px;}
.form-label{font-family:var(--mono);font-size:9px;letter-spacing:2px;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:7px;display:block;}
.form-input,.form-textarea,.form-select{width:100%;padding:10px 13px;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius);color:var(--text);
  font-family:var(--sans);font-size:14px;outline:none;transition:border-color .2s;}
.form-input:focus,.form-textarea:focus,.form-select:focus{border-color:var(--accent);}
/* F2: el error se dice junto al campo, no solo en un aviso abajo a la derecha. */
.form-input.con-error,.form-select.con-error{border-color:var(--danger);}
.campo-error{margin-top:5px;font-size:11px;color:var(--danger);line-height:1.5;}
.form-textarea{resize:vertical;min-height:75px;line-height:1.5;}
.form-select option{background:var(--card);}
.modelo-selector-nativo{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}
.modelo-pagina-ayuda{margin:-2px 0 12px;color:var(--text-muted);font-size:12px;line-height:1.5;}
.modelo-pagina-ayuda a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.modelos-pagina{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.modelo-pagina{min-width:0;padding:9px;border:1px solid var(--border);border-radius:10px;background:var(--card);
  color:var(--text);text-align:left;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s,background .2s;}
.modelo-pagina:hover{border-color:var(--accent);transform:translateY(-1px);}
.modelo-pagina.seleccionado{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim);background:color-mix(in srgb,var(--accent) 8%,var(--card));}
.modelo-pagina:disabled{cursor:not-allowed;opacity:.55;transform:none;}
.modelo-vista-real{display:block;height:176px;margin-bottom:9px;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));border-radius:6px;background:var(--surface);pointer-events:none;}
.modelo-vista-real iframe{display:block;width:333.334%;height:333.334%;border:0;transform:scale(.3);transform-origin:top left;background:var(--surface);}
.modelo-pagina-texto{display:grid;gap:2px;}.modelo-pagina-texto strong{font-size:12px;line-height:1.3;}.modelo-pagina-texto small{color:var(--text-muted);font-size:10px;line-height:1.35;}
/* La tarjeta se puede inspeccionar sin seleccionar nada. Solo en equipos con
   cursor: en un teléfono un :hover pegado haría que la tarjeta saltara al tocarla. */
@media (min-width:721px) and (hover:hover){
  .modelo-pagina:not(:disabled):hover .modelo-vista-real{height:286px;}
  .modelo-pagina:not(:disabled):hover .modelo-vista-real iframe{width:200%;height:200%;transform:scale(.5);}
}
@media(max-width:720px){.modelos-pagina{grid-template-columns:1fr;}.modelo-pagina{display:grid;grid-template-columns:124px 1fr;gap:11px;align-items:center;}.modelo-vista-real{height:112px;margin:0;}.modelo-pagina-texto strong{font-size:13px;}}
/* Los controles nativos de fecha no heredan bien un fondo oscuro: sin este
   esquema el icono del calendario queda negro. El espacio extra evita que los
   indicadores queden pegados al borde derecho. */
.form-input[type="date"]{color-scheme:dark;padding-right:42px;}
.form-input[type="date"]::-webkit-calendar-picker-indicator{opacity:.9;cursor:pointer;}
select.form-input{padding-right:42px;}
.tv-categorias-horario{margin-top:10px;padding:10px 12px;border-left:2px solid var(--accent);
  background:var(--accent-dim);border-radius:0 var(--radius) var(--radius) 0;}
.tv-categorias-horario-titulo{font-family:var(--mono);font-size:9px;letter-spacing:1px;
  color:var(--accent);text-transform:uppercase;margin-bottom:6px;}
.tv-categoria-horario{font-size:11px;color:var(--text-muted);line-height:1.55;}
.tv-categoria-horario strong{color:var(--text);}
.tv-programacion-nueva{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-dim);}
/* La cartelera tiene suficientes decisiones independientes como para no
   obligar a recorrerlas en una columna interminable. Son pestañas locales:
   se distinguen de las principales del panel para que switchTab() no cambie
   su estado al navegar por el resto de la administración. */
.tv-config-tabs{display:flex;gap:4px;margin:0 0 14px;padding:4px;border:1px solid var(--border);border-radius:10px;background:var(--card);}
.tv-config-tab{flex:1;min-height:38px;padding:8px 12px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--text-muted);font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;cursor:pointer;transition:color .18s,background .18s,border-color .18s;}
.tv-config-tab:hover{color:var(--text);background:var(--surface);}
.tv-config-tab.active{border-color:var(--accent);background:var(--accent-dim);color:var(--accent-texto);}
.tv-config-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.tv-encabezado{gap:12px;}
.tv-encabezado .form-check{flex-shrink:0;}
@media(max-width:520px){.tv-encabezado{align-items:flex-start;flex-direction:column;}.tv-config-tab{min-width:0;padding:8px 6px;font-size:9px;letter-spacing:.35px;}}
/* Cada tarjeta representa una URL real. No son tres copias obligatorias: si
   dos televisores muestran lo mismo, el negocio reutiliza la URL de una sola. */
.tv-pantallas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 8px;}
.tv-pantalla{min-width:0;padding:12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);color:var(--text);text-align:left;cursor:pointer;transition:border-color .18s,background .18s,transform .18s;}
.tv-pantalla:hover{border-color:var(--accent);transform:translateY(-1px);}
.tv-pantalla.activa{border-color:var(--accent);background:var(--accent-dim);box-shadow:0 0 0 1px var(--accent-dim);}
.tv-pantalla:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.tv-pantalla-cabecera{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:7px;}
.tv-pantalla-numero{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--accent);}
.tv-pantalla-estado{font-family:var(--mono);font-size:9px;color:var(--text-dim);white-space:nowrap;}
.tv-pantalla-estado.encendida{color:var(--success);}
.tv-pantalla-nombre{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:700;line-height:1.35;}
.tv-pantalla-url{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:5px;font-family:var(--mono);font-size:9px;color:var(--text-dim);}
.tv-pantallas-nota{margin:0 0 18px;font-size:11px;line-height:1.5;color:var(--text-dim);}
@media(max-width:620px){.tv-pantallas{grid-template-columns:1fr;}.tv-pantalla{padding:11px 12px;}.tv-pantalla-url{font-size:10px;}}
/* Las opciones de Diseño comparten tres columnas. Centrar cada pieza evita que
   un título o una ayuda de dos líneas empuje el interruptor hacia arriba y
   haga que parezcan controles de filas distintas. */
.tv-opcion{display:grid;grid-template-columns:40px minmax(180px,300px) minmax(0,1fr);align-items:center;column-gap:10px;}
/* Estas filas también llevan .form-check para conservar su semántica. La
   regla genérica de ese componente aparece más abajo y usa flex; esta mayor
   especificidad impide que anule la cuadrícula de Diseño. */
.form-check.tv-opcion{display:grid;gap:0 10px;padding:0;}
.tv-opcion>.toggle{grid-column:1;grid-row:1;align-self:center;margin:0;}
.tv-opcion>span{grid-column:2;grid-row:1;padding:0;line-height:1.4;}
.tv-opcion>.tv-opcion-ayuda{grid-column:3;grid-row:1;align-self:center;margin:0!important;}
/* El selector no tiene interruptor, pero conserva su primera columna vacía:
   así su título y su campo empiezan exactamente donde empiezan las demás
   etiquetas, y la explicación sigue usando la misma tercera columna. */
.tv-opcion-select>label{grid-column:2;grid-row:1;margin:0!important;line-height:1.35;}
.tv-opcion-select>select{grid-column:2;grid-row:2;width:100%;margin-top:7px;}
.tv-opcion-select>.tv-opcion-ayuda{grid-column:3;grid-row:1 / span 2;}
@media(max-width:760px){
  .tv-opcion{grid-template-columns:40px minmax(0,1fr);row-gap:6px;}
  .tv-opcion>.tv-opcion-ayuda{grid-column:2;grid-row:2;margin:0!important;}
  .tv-opcion-select>.tv-opcion-ayuda{grid-column:2;grid-row:3;}
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form-check{display:flex;align-items:center;gap:10px;padding:10px 0;}
.form-ayuda{font-size:11px;color:var(--text-dim);line-height:1.5;margin:-2px 0 7px;}
/* Sin límite todavía (25/09/2026, contador de caracteres de las
   descripciones): solo informa, no bloquea, así que no lleva color de aviso. */
.form-contador{text-align:right;font-size:10px;font-family:var(--mono);color:var(--text-dim);margin-top:5px;}

/* La cuadrícula de emoji de una categoría (25/09/2026). Flotante y no en el
   flujo: si empujara el resto del formulario, guardar quedaría más lejos justo
   cuando se acaba de abrir la cuadrícula. Ver abrirSelectorEmoji() en
   public/index.html. */
.emoji-picker{position:absolute;top:100%;left:0;z-index:5;margin-top:4px;padding:6px;
  display:grid;grid-template-columns:repeat(8,1fr);gap:2px;width:260px;max-height:220px;overflow-y:auto;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(0,0,0,.4);}
.emoji-picker[hidden]{display:none;}
.emoji-picker button{border:none;background:transparent;border-radius:6px;font-size:18px;
  line-height:1;padding:6px 0;cursor:pointer;}
.emoji-picker button:hover{background:var(--card);}

/* Los "ⓘ" de ayuda de la ficha de producto (25/09/2026), en vez de un texto
   siempre visible bajo cada campo. Solo se cambiaron los puramente
   explicativos —qué hace un campo, dónde se ve—; los avisos de verdad, como
   el de revisar un video generado por IA antes de publicarlo, siguen fijos y
   con su color: esto no es para eso. Ver alternarInfoTip() en index.html. */
.form-label-fila{display:flex;align-items:center;gap:6px;margin-bottom:7px;flex-wrap:wrap;}
.form-label-fila .form-label{margin-bottom:0;}
.info-tip{position:relative;display:inline-flex;}
.info-tip-boton{width:14px;height:14px;border-radius:50%;border:1px solid var(--text-dim);
  background:transparent;color:var(--text-dim);font-size:10px;line-height:1;padding:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-family:var(--sans);text-transform:none;letter-spacing:0;}
.info-tip-boton:hover,.info-tip-boton:focus-visible{border-color:var(--accent);color:var(--accent);}
.info-tip-texto{display:none;position:absolute;top:100%;left:0;margin-top:6px;z-index:5;
  width:min(220px,70vw);padding:8px 10px;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.4);
  font-size:11px;line-height:1.5;color:var(--text-muted);font-family:var(--sans);
  text-transform:none;letter-spacing:0;}
.info-tip.abierto .info-tip-texto{display:block;}

/* El alta de un destacado no abre el explorador de archivos de inmediato:
   primero deja elegir entre una imagen propia y un plato que ya existe. */
.destacado-modal-box{max-width:560px;}
.destacado-intro{font-size:13px;color:var(--text-muted);line-height:1.6;margin:0 0 16px;}
.destacado-origenes{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.destacado-origen{display:flex;gap:11px;align-items:flex-start;text-align:left;padding:14px;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--card);color:var(--text);cursor:pointer;}
.destacado-origen:hover{border-color:var(--accent);}
.destacado-origen>span:first-child{font-size:20px;line-height:1;}
.destacado-origen strong,.destacado-origen small{display:block;}
.destacado-origen strong{font-size:12px;margin-bottom:4px;}
.destacado-origen small{font-size:11px;color:var(--text-dim);line-height:1.45;}
.destacado-productos{margin-top:18px;border-top:1px solid var(--border);padding-top:16px;}
.destacado-productos-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;}
.destacado-productos-head strong{font-size:13px;}
.destacado-productos-head span{font-size:11px;color:var(--text-dim);}
.destacado-producto-lista{display:grid;gap:7px;max-height:300px;overflow-y:auto;}
.destacado-producto{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:1px solid var(--border);
  border-radius:8px;background:var(--card);color:var(--text);text-align:left;cursor:pointer;}
.destacado-producto:hover{border-color:var(--accent);}
.destacado-producto img,.destacado-producto-sin-foto{width:48px;height:40px;border-radius:5px;object-fit:cover;flex:0 0 auto;}
.destacado-producto-sin-foto{display:flex;align-items:center;justify-content:center;background:var(--panel);font-size:17px;}
.destacado-producto-nombre{font-size:12px;line-height:1.35;flex:1;}
.destacado-producto-precio{font-family:var(--mono);font-size:10px;color:var(--text-muted);white-space:nowrap;}
.destacado-producto[disabled]{opacity:.45;cursor:not-allowed;}
.destacado-producto[disabled]:hover{border-color:var(--border);}
@media (max-width:520px){.destacado-origenes{grid-template-columns:1fr;}}

/* La ficha abre por lo imprescindible. Foto, descripciones y configuraciones
   siguen en la misma ventana, pero no obligan a recorrerlas para crear un plato. */
#productModal .modal-body{display:flex;flex-direction:column;}
#productModal .producto-nombre{order:1;}
#productModal .producto-categoria{order:2;}
#productModal .producto-precio{order:3;}
#productModal .producto-foto{order:5;}
#productModal .producto-video{order:6;}
#productModal .producto-descripcion{order:7;}
#productModal .producto-personas{order:8;}
#productModal .producto-descripcion-corta{order:9;}
#productModal .producto-imagenes-adicionales{order:10;}
#productModal .producto-personalizacion{order:11;}
#productModal .producto-filtros{order:12;}
#productModal .producto-destacados{order:13;}
/* Disponible, a la derecha del nombre; gratis, al lado del precio. Así la
   ficha es más corta y lo que saca un plato de la carta está a la vista. */
#productModal .ficha-cabecera-nombre{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;}
#productModal .ficha-cabecera-nombre .form-label{margin-bottom:0;}
#productModal .ficha-cabecera-nombre .form-check{padding:0;gap:8px;}
#productModal .precio-fila{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
#productModal .precio-fila .form-input{flex:0 1 50%;min-width:140px;}
/* La oferta de un plato: una sola tarjeta bajo el precio. */
#productModal .oferta-bloque{margin-top:14px;padding-top:10px;border-top:1px dashed var(--border);}
#productModal .oferta-fila{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;}
#productModal .oferta-campo{display:flex;flex-direction:column;gap:4px;flex:1 1 140px;font-size:12px;color:var(--text-muted);}
#productModal .oferta-porc{flex:0 1 110px;}
#productModal .oferta-resumen{margin-top:10px;font-family:var(--mono);font-size:12px;color:var(--accent);}
#productModal .oferta-aviso{margin-top:6px;font-family:var(--mono);font-size:10px;line-height:1.5;color:var(--text-muted);}
.oferta-precio-antes{color:var(--text-muted);font-size:.85em;}
.oferta-marca{margin-top:3px;font-family:var(--mono);font-size:10px;}
.oferta-marca-ok{color:var(--accent);}
.oferta-marca-espera{color:var(--text-muted);}
.oferta-marca-aviso{color:var(--warn);}
#productModal .precio-gratis{padding:0;gap:8px;font-size:12px;color:var(--text-muted);}
/* La foto, con la proporción de la carta (16:9 o 9:16). Pedido el 26/09/2026:
   esta es la pantalla con la que interactúan todos los clientes, y una foto
   grande se revisa mejor que una miniatura. El ancho llena la ficha en
   horizontal; en vertical manda la altura, o un 9:16 a lo ancho mediría vez y
   media la pantalla. Object-fit sigue en contain: un recorte escondería
   justo la esquina que se quiere comprobar, y "ampliar" (#btnAmpliarFoto)
   sigue ahí para verla a pantalla completa. */
#productModal .producto-foto .img-edit-wrap{width:100%;height:auto;aspect-ratio:16/9;margin:0 auto 10px;}
#productModal .producto-foto .img-edit-wrap[data-formato="vertical"]{width:auto;height:320px;aspect-ratio:9/16;}
#productModal .producto-foto .img-edit-preview{object-fit:contain;background:var(--bg);}
/* z-index por encima de .img-edit-overlay: aunque esta llega después en el
   HTML y por eso queda encima por orden de pintado, cubre todo el recuadro
   —inset:0— y se comía el clic del botón. */
.img-edit-ampliar{position:absolute;z-index:2;right:6px;bottom:6px;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--border);background:var(--panel);color:var(--text);cursor:pointer;
  font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;}
.img-edit-ampliar:hover{border-color:var(--accent);}
.foto-ampliada-bg{position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.85);
  display:none;align-items:center;justify-content:center;padding:24px;cursor:zoom-out;}
.foto-ampliada-bg.open{display:flex;}
.foto-ampliada-bg img,.foto-ampliada-bg video{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--radius);}
/* El tamaño lo ajusta ajustarFichaAlModelo() según el modelo de la carta, y es
   el mismo con el video ya guardado que mientras se elige un archivo. */
#videoEditPreview{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;background:#000;}
/* Video del plato: los dos caminos, uno al lado del otro. En móvil, uno debajo
   del otro (auto-fit), y si la carta no tiene IA el de subir ocupa todo. */
.video-caminos-titulo{font-size:13px;color:var(--text);margin:12px 0 10px;}
.video-caminos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;}
.video-camino{border:1px solid var(--border);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:6px;}
/* «Subir y convertir» con un archivo elegido y sin subir (30/09/2026, pedido por
   el usuario). Pintarlo de verde no alcanzaba: elegir el archivo parece el final
   y se cerraba la ficha sin subir nada. Más grande, con brillo y un aro que late.
   Los !important son porque el botón lleva su tamaño escrito en el propio HTML.
   El latido se apaga al empezar la subida (el botón se deshabilita) y con
   prefers-reduced-motion, que ya lo recorta todo más abajo. */
#btnConfirmarVideo.subir-pendiente{position:relative;padding:8px 18px!important;font-size:11px!important;font-weight:700;
  filter:drop-shadow(0 0 7px var(--success));}
#btnConfirmarVideo.subir-pendiente::after{content:'';position:absolute;inset:-3px;border-radius:9px;
  border:2px solid var(--success);opacity:0;pointer-events:none;animation:subir-pendiente-aro 1.4s ease-out infinite;}
#btnConfirmarVideo.subir-pendiente:disabled{filter:none;}
#btnConfirmarVideo.subir-pendiente:disabled::after{animation:none;opacity:0;}
@keyframes subir-pendiente-aro{0%{opacity:.95;transform:scale(1);}100%{opacity:0;transform:scale(1.16,1.5);}}
.video-camino-boton{padding:8px 12px;border-radius:6px;border:1px solid var(--border);background:transparent;
  color:var(--text);font-family:var(--mono);font-size:10px;letter-spacing:1px;cursor:pointer;text-align:left;}
.video-camino-boton:hover:not(:disabled){border-color:var(--accent);}
.video-camino-ia{border-color:var(--accent);color:var(--accent);}
.video-camino-detalle{font-family:var(--mono);font-size:10px;line-height:1.5;color:var(--text-muted);}
.video-nuevo{border:1px dashed var(--border2);border-radius:8px;padding:12px;font-size:12px;line-height:1.6;color:var(--text-muted);}
.producto-imagenes-adicionales{border-top:1px solid var(--border);padding-top:14px;}
.producto-imagenes-adicionales summary{cursor:pointer;font-family:var(--mono);font-size:9px;letter-spacing:1px;
  text-transform:uppercase;color:var(--text-muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.producto-imagenes-adicionales summary span{color:var(--text-dim);font-family:var(--sans);font-size:11px;letter-spacing:0;text-transform:none;}
.producto-imagenes-adicionales[open] summary{margin-bottom:10px;color:var(--text);}

.img-edit-wrap{position:relative;width:80%;margin:0 auto;aspect-ratio:4/3;background:var(--card);
  border:1px dashed var(--border2);border-radius:var(--radius);overflow:hidden;
  cursor:pointer;transition:border-color .2s;margin-bottom:6px;}
.img-edit-wrap:hover{border-color:var(--accent);}
.img-edit-preview{width:100%;height:100%;object-fit:cover;display:block;}
.img-edit-overlay{position:absolute;inset:0;background:var(--img-overlay);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;opacity:0;transition:opacity .2s;}
.img-edit-wrap:hover .img-edit-overlay{opacity:1;}
.img-edit-overlay span{font-size:11px;color:var(--accent);letter-spacing:1px;font-family:var(--mono);text-transform:uppercase;}
.img-placeholder-text{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:var(--text-dim);font-size:12px;font-family:var(--mono);
  /* Con la pista dentro el texto ya no cabe en una línea. */
  text-align:center;line-height:1.6;padding:0 14px;}

.btn-save{flex:1;padding:11px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);
  font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.45px;text-transform:uppercase;box-shadow:0 4px 12px var(--accent-glow);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;}
.btn-save:hover{background:#f4810c;transform:translateY(-1px);box-shadow:0 7px 16px var(--accent-glow);}
.btn-save:disabled{opacity:.4;cursor:not-allowed;}
.btn-save.peligro{background:var(--danger);color:#fff;}
.btn-cancel{padding:11px 18px;background:transparent;border:1px solid var(--border);border-radius:var(--radius);
  color:var(--text-muted);font-family:var(--mono);font-size:10px;letter-spacing:1px;cursor:pointer;transition:all .18s;}
.btn-cancel:hover{border-color:var(--border2);color:var(--text);}
.btn-vista-previa{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));background:var(--accent-dim);color:var(--accent-texto);font-family:var(--sans);font-weight:800;letter-spacing:.3px;box-shadow:0 3px 10px var(--accent-glow);}
.btn-vista-previa:hover{border-color:var(--accent);background:rgba(231,115,6,.16);color:var(--accent-texto);transform:translateY(-1px);box-shadow:0 7px 15px var(--accent-glow);}

/* ── TOAST ── */
.toast{position:fixed;bottom:22px;right:22px;padding:11px 18px;border-radius:12px;
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:0;z-index:900;
  transform:translateY(10px) scale(.98);opacity:0;transition:opacity .24s,transform .24s,box-shadow .24s;pointer-events:none;box-shadow:0 12px 32px rgba(0,0,0,.18);}
.toast.show{opacity:1;transform:translateY(0) scale(1);}
/* El toast normal lleva pointer-events:none a propósito: aparece en la
   esquina donde suele estar el botón de Guardar, y no debe tragarse el
   clic de lo que tiene debajo. Solo el que trae una acción —«Deshacer»—
   necesita recibir clics, así que solo ese los recibe. */
.toast.con-accion{pointer-events:auto;display:flex;align-items:center;gap:14px;}
.toast-accion{background:none;border:1px solid currentColor;color:inherit;
  font:inherit;letter-spacing:inherit;padding:5px 10px;border-radius:6px;cursor:pointer;}
.toast-accion:hover{text-decoration:underline;}
.toast.success{background:var(--success-dim);border:1px solid var(--success);color:var(--success);}
.toast.error{background:var(--danger-dim);border:1px solid var(--danger);color:var(--danger);}
.toast.info{background:var(--accent-dim);border:1px solid var(--accent);color:var(--accent-texto);}
.toast.success:not(.con-accion)::before,.toast.error:not(.con-accion)::before,.toast.info:not(.con-accion)::before{width:20px;height:20px;margin-right:9px;border-radius:50%;display:inline-grid;place-items:center;vertical-align:middle;font-size:12px;font-weight:800;animation:toast-icon-in .34s cubic-bezier(.2,.8,.2,1);}
.toast.success:not(.con-accion)::before{content:'✓';background:var(--success);color:#fff;}
.toast.error:not(.con-accion)::before{content:'!';background:var(--danger);color:#fff;}
.toast.info:not(.con-accion)::before{content:'i';background:var(--accent);color:var(--on-accent);}
@keyframes toast-icon-in{from{transform:scale(.45) rotate(-18deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}

/* ── ACCESO RÁPIDO GLOBAL ── */
.quick-access{position:fixed;right:24px;bottom:82px;z-index:400;font-family:var(--sans);}
.quick-access[hidden]{display:none;}
.quick-access-toggle{min-height:48px;display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;border:1px solid color-mix(in srgb,var(--accent) 42%,rgba(255,255,255,.34));border-radius:999px;background:color-mix(in srgb,var(--panel) 82%,transparent);color:var(--text);font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.05px;cursor:pointer;backdrop-filter:blur(16px) saturate(145%);-webkit-backdrop-filter:blur(16px) saturate(145%);box-shadow:0 12px 30px rgba(0,0,0,.27),inset 0 1px 0 rgba(255,255,255,.1);transition:transform .24s ease,background .24s ease,border-color .24s ease,box-shadow .24s ease;}
.quick-access-grid{width:30px;height:30px;display:grid;grid-template-columns:repeat(2,1fr);gap:3px;padding:7px;border-radius:50%;background:var(--accent);box-shadow:0 4px 12px var(--accent-glow);transition:transform .24s ease,rotate .3s ease;}
.quick-access-grid i{display:block;border-radius:2px;background:#fff;}
.quick-access-toggle:hover{transform:translateY(-2px);border-color:var(--accent);background:color-mix(in srgb,var(--panel) 72%,var(--accent-dim));box-shadow:0 16px 34px rgba(0,0,0,.32),0 0 0 4px var(--accent-dim);}
.quick-access-toggle:hover .quick-access-grid{transform:scale(1.06) rotate(7deg);}
.quick-access-toggle:active{transform:translateY(0) scale(.98);}
.quick-access.is-open .quick-access-toggle{border-color:var(--accent);background:color-mix(in srgb,var(--panel) 68%,var(--accent-dim));}
.quick-access.is-open .quick-access-grid{rotate:45deg;}
.quick-access-panel{position:absolute;right:0;bottom:58px;width:250px;padding:10px;border:1px solid color-mix(in srgb,var(--accent) 32%,rgba(255,255,255,.3));border-radius:22px;background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);box-shadow:0 20px 48px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.11);opacity:0;visibility:hidden;transform:translateY(10px) scale(.96);transform-origin:bottom right;pointer-events:none;transition:opacity .2s ease,transform .24s cubic-bezier(.2,.8,.2,1),visibility .24s;}
.quick-access.is-open .quick-access-panel{opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto;}
.quick-access-title{padding:5px 7px 9px;color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;}
.quick-access-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.quick-access-action{min-height:62px;display:flex;align-items:center;gap:8px;padding:9px;border:1px solid transparent;border-radius:14px;background:transparent;color:var(--text);font-family:var(--sans);font-size:11px;font-weight:650;text-align:left;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;}
.quick-access-action:hover{transform:translateY(-2px);border-color:var(--border2);background:color-mix(in srgb,var(--accent) 11%,var(--card));color:var(--accent-texto);box-shadow:0 7px 15px rgba(0,0,0,.15);}
.quick-access-action:active{transform:scale(.97);}
.quick-access-icon{width:24px;height:24px;display:grid;place-items:center;flex:0 0 auto;border-radius:9px;background:var(--accent-dim);color:var(--accent-texto);font-size:16px;font-weight:800;transition:transform .18s ease,background .18s ease;}
.quick-access-action:hover .quick-access-icon{transform:scale(1.08) rotate(-4deg);background:var(--accent);color:#fff;}
.quick-access-menu{grid-column:1 / -1;min-height:46px;background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 6px 14px var(--accent-glow);}
.quick-access-menu .quick-access-icon{background:rgba(255,255,255,.2);color:#fff;}
.quick-access-menu:hover{border-color:#ffad48;background:#f4810c;color:#fff;box-shadow:0 9px 19px var(--accent-glow);}
.quick-access-menu:hover .quick-access-icon{background:rgba(255,255,255,.28);}
.quick-access-modal-open{opacity:0;visibility:hidden;pointer-events:none;}
@media (max-width:640px){.quick-access{right:auto;left:50%;bottom:max(16px,calc(10px + env(safe-area-inset-bottom)));transform:translateX(-50%);}.quick-access-toggle{min-height:50px;padding-right:18px;font-size:12px;white-space:nowrap;}.quick-access-panel{right:50%;bottom:60px;width:min(300px,calc(100vw - 28px));transform:translate(50%,10px) scale(.96);transform-origin:bottom center;}.quick-access.is-open .quick-access-panel{transform:translate(50%,0) scale(1);}.toast{bottom:max(82px,calc(70px + env(safe-area-inset-bottom)));right:14px;left:14px;text-align:center;}}
@media (prefers-reduced-motion:reduce){.quick-access,.quick-access *{transition:none!important;animation:none!important;}}

/* Personalización específica de textos de la carta. */
.menu-text-style{padding:0;overflow:hidden;}
.menu-text-style>summary{cursor:pointer;list-style:none;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--sans);font-weight:700;color:var(--text);}
.menu-text-style>summary::-webkit-details-marker,.menu-text-group>summary::-webkit-details-marker{display:none;}
.menu-text-style>summary::after{content:'⌄';font-size:18px;color:var(--accent);transition:transform .18s;}
.menu-text-style[open]>summary{border-bottom:1px solid var(--border);}
.menu-text-style[open]>summary::after{transform:rotate(180deg);}
.menu-text-style>summary small{margin-left:auto;font-size:11px;font-weight:500;color:var(--text-muted);}
.menu-text-style-intro{padding:16px 20px 0;font-size:12px;line-height:1.55;color:var(--text-muted);}
.menu-text-preview{margin:16px 20px;padding:16px;border:1px solid var(--border2);border-radius:12px;background:linear-gradient(135deg,var(--surface),var(--card));display:grid;gap:5px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);}
.menu-text-preview [data-preview="titulo"]{font-size:24px;font-weight:800;line-height:1.1;}
.menu-text-preview [data-preview="subtitulo"],.menu-text-preview [data-preview="descripcion"],.menu-text-preview [data-preview="adicional"],.menu-text-preview [data-preview="carrito"]{font-size:12px;color:var(--text-muted);}
.menu-text-preview [data-preview="categoria"]{margin-top:5px;color:var(--accent);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;}
.menu-text-preview [data-preview="producto"]{font-size:16px;font-weight:700;}
.menu-text-preview [data-preview="precio"]{font-weight:800;color:var(--success);}
.menu-text-preview [data-preview="boton"]{justify-self:start;margin-top:7px;padding:8px 12px;border:0;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:700;}
.menu-text-groups{display:grid;gap:9px;padding:0 20px 20px;}
.menu-text-group{border:1px solid var(--border);border-radius:10px;background:var(--panel);}
.menu-text-group>summary{cursor:pointer;list-style:none;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:700;color:var(--text);}
.menu-text-group>summary::after{content:'+';color:var(--accent);font-size:18px;line-height:1;}
.menu-text-group[open]>summary{border-bottom:1px solid var(--border);}
.menu-text-group[open]>summary::after{content:'–';}
.menu-text-group>summary small{font-size:11px;font-weight:500;color:var(--text-dim);text-align:right;}
.menu-text-controls{display:grid;grid-template-columns:90px minmax(130px,1fr) minmax(120px,1fr) 110px;gap:10px;padding:14px;}
.menu-text-controls label{display:grid;gap:5px;font-size:10px;font-weight:700;letter-spacing:.35px;text-transform:uppercase;color:var(--text-muted);}
.menu-text-controls input,.menu-text-controls select{width:100%;min-height:36px;border:1px solid var(--border);border-radius:7px;background:var(--card);color:var(--text);font-family:var(--sans);font-size:12px;font-weight:500;padding:6px 8px;}
.menu-text-controls input[type="color"]{padding:3px;cursor:pointer;}
.menu-text-reset{margin:0 14px 14px;padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--text-muted);font-family:var(--sans);font-size:11px;font-weight:600;cursor:pointer;transition:background .18s,color .18s,border-color .18s;}
.menu-text-reset:hover{border-color:var(--accent);background:var(--accent-dim);color:var(--accent-texto);}
@media (max-width:640px){.menu-text-style>summary{align-items:flex-start;flex-wrap:wrap;}.menu-text-style>summary small{margin-left:0;flex-basis:calc(100% - 28px);}.menu-text-controls{grid-template-columns:1fr 1fr;}.menu-text-group>summary{align-items:flex-start;}.menu-text-group>summary small{display:none;}}

.empty-state{text-align:center;padding:50px 20px;color:var(--text-dim);font-family:var(--mono);font-size:11px;letter-spacing:1px;}
/* El vacío que explica qué hacer. El de siempre —mayúsculas de máquina,
   11 px— sirve para decir «no hay nada»; para decir POR DÓNDE empezar hace
   falta texto que se lea como una frase. */
.empty-state.vacio-guia strong{display:block;color:var(--text);font-size:12px;margin-bottom:8px;}
.empty-state.vacio-guia p{font-family:var(--sans);font-size:13px;letter-spacing:0;line-height:1.6;
  max-width:420px;margin:0 auto 16px;color:var(--text-muted);}
.topping-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;
  border:1px solid var(--border);background:var(--card);color:var(--text);font-size:12px;}
.topping-chip .chip-nombre{background:none;border:none;color:inherit;font:inherit;padding:0;
  cursor:pointer;text-align:left;border-bottom:1px dashed transparent;transition:border-color .18s;}
.topping-chip .chip-nombre:hover,.topping-chip .chip-nombre:focus-visible{border-bottom-color:var(--accent);}
.topping-chip .chip-del{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:14px;
  padding:0;line-height:1;transition:color .18s;}
.topping-chip .chip-del:hover{color:var(--danger);}

/* ── VISTA SUPERADMIN ── */
#adminScreen{display:none;min-height:100vh;}
.admin-topbar{background:var(--topbar-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:52px;}
.admin-topbar-title{display:flex;align-items:center;min-width:0;}
.admin-brand-lockup{display:inline-flex;align-items:center;gap:8px;}
.admin-brand-lockup .brand-pill{height:37px;padding:5px 14px 5px 6px;border:1px solid rgba(231,115,6,.55);border-radius:999px;background:#fff;box-shadow:0 5px 14px rgba(0,0,0,.12);}
.admin-panel-pill{display:inline-flex;align-items:center;gap:7px;height:37px;margin-left:0;padding:5px 15px;border:1px solid rgba(231,115,6,.55);border-radius:999px;background:#fff;color:#59320c;font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.05px;line-height:1;text-transform:none;white-space:nowrap;box-shadow:0 5px 14px rgba(0,0,0,.12);transition:transform .22s ease,background .22s ease,color .22s ease,box-shadow .22s ease;}
.admin-panel-pill strong{display:inline-flex;align-items:center;min-height:21px;padding:0 7px;border-radius:999px;background:var(--accent);color:#fff;font-size:9px;font-weight:900;letter-spacing:.65px;}
@media (hover:hover){.admin-panel-pill:hover{transform:translateY(-2px);background:var(--accent-dim);color:var(--accent-texto);border-color:var(--accent);box-shadow:0 8px 18px var(--accent-glow);}.admin-brand-lockup .brand-pill:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 8px 18px var(--accent-glow);}}
/* 1200 y no 900: esto no es prosa que se lea en columna estrecha, es la
   lista operativa del superadmin. Con cinco botones cabía; al llegar
   a siete, la información de cada carta se quedaba sin sitio y bajaba
   a su propia fila. */
.admin-content{padding:24px 20px 80px;max-width:1200px;margin:0 auto;}

/* La tarjeta ENVUELVE. Sin esto los botones no caben y empujan: la
   columna de la izquierda se estrecha hasta partir "solo fotos ·
   Topnav" en tres líneas, y en el móvil los últimos botones se
   salen de la pantalla. Pasó al llegar al séptimo botón. */
/* nowrap a propósito. Con wrap, el navegador prefiere mandar el bloque
   de botones a una fila propia antes que encogerlo, y quedaba la
   información arriba y los botones sueltos debajo. Con nowrap los dos
   se encogen y los botones envuelven ENTRE ellos, que es lo que se
   quería: información a la izquierda, botones a la derecha.
   Por debajo de 900px se apilan a propósito (ver más abajo). */
.resto-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:18px 20px;display:flex;flex-wrap:nowrap;align-items:flex-start;
  gap:14px;transition:border-color .2s;margin-bottom:10px;}
.resto-card:hover{border-color:var(--accent);}
/* F4: el restaurante recién creado se señala un momento al traerlo a la
   vista. Se va solo: es para encontrarlo, no un estado. */
.resto-card.recien-creado{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);}
/* La base de 280px es lo que hace que baje entera en vez de
   estrecharse: por debajo de eso no cabe y se va a su propia fila.
   min-width:0 porque un hijo flex no baja de su contenido por
   defecto, y un nombre largo desbordaría la tarjeta. */
.resto-card-info{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:4px;}
.resto-card-name{font-size:15px;font-weight:500;color:var(--text);margin-bottom:3px;}
.resto-card-slug{font-family:var(--mono);font-size:10px;color:var(--text-dim);letter-spacing:1px;}
/* S3: «Activo» era una pastilla con la forma y el tamaño de los botones, en su
   misma fila y pegada a Suspender: invitaba a pulsar y no respondía. Es un
   estado, así que va junto al nombre y como texto, sin caja. */
.resto-estado{font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;
  font-weight:400;margin-left:8px;white-space:nowrap;}
.resto-estado::before{content:'● ';}
.resto-estado.activo{color:var(--success);}
.resto-estado.suspendido{color:var(--danger);}
/* Sin margin-left:auto a propósito. Un margen automático en flex se
   come el espacio libre ANTES de que flex-grow lo reparta, así que
   con él la columna de la izquierda nunca crecía de su base de 280 y
   las etiquetas envolvían con media tarjeta vacía al lado.
   min-width:0 es lo que deja que los botones envuelvan ENTRE ellos
   cuando no caben, en vez de llevarse la fila entera hacia abajo. */
.resto-card-actions{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:flex-end;gap:8px;flex:0 1 auto;min-width:0;}
/* Acciones diarias de cada restaurante: comparten la misma lectura rápida que
   los controles de Inicio. Verde comunica avance/confirmación; los secundarios
   conservan contraste sin competir con la edición. */
.resto-action{min-height:34px;border-radius:999px;font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.35px;text-transform:uppercase;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease;}
.resto-action-edit{border-color:#ff981e!important;background:var(--accent)!important;color:#fff!important;box-shadow:0 4px 12px var(--accent-glow);}
.resto-action-view,.resto-action-more{border-color:#73502e!important;background:rgba(255,255,255,.04);color:var(--text)!important;}
.resto-action-paid{border-color:#1ba765!important;background:rgba(21,153,87,.14);color:var(--success)!important;}
.resto-card-actions .resto-action:hover{transform:translateY(-2px);box-shadow:0 7px 16px rgba(0,0,0,.24);}
.resto-card-actions .resto-action-edit:hover{background:#f4810c!important;box-shadow:0 8px 18px var(--accent-glow);}
.resto-card-actions .resto-action-paid:hover{background:#159957;color:#fff;}
.resto-mas[open]>.resto-action-more{border-color:var(--accent)!important;background:var(--accent-dim);color:var(--accent-texto)!important;}
.resto-card-actions .resto-action:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
/* S6: lo que se usa de mes en mes va dentro de «⋯ Más». El menú flota sobre la
   tarjeta de abajo en vez de empujarla: abrirlo no debe mover la lista. */
.resto-mas{position:relative;}
.resto-mas>summary{list-style:none;display:inline-flex;align-items:center;user-select:none;}
.resto-mas>summary::-webkit-details-marker{display:none;}
.resto-mas[open]>summary{border-color:var(--border2);color:var(--text);}
.resto-mas-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;
  display:flex;flex-direction:column;gap:6px;min-width:170px;padding:8px;
  background:var(--panel);border:1px solid var(--border2);border-radius:var(--radius);
  box-shadow:0 10px 28px rgba(0,0,0,.35);}
.resto-mas-menu .btn-sm{width:100%;text-align:left;}

/* ── LAS ETIQUETAS DE QUÉ TIENE CADA CARTA ──────────────
   Cada dato es una pastilla entera: así una línea puede envolver
   ENTRE ellas pero nunca por dentro. Con separadores de texto ("·")
   el salto caía en cualquier sitio y dejaba el punto colgando al
   principio de la línea siguiente. */
/* ── LO QUE CADA PLATO TIENE MARCADO ────────────────────
   Bajo el nombre, en la lista de Productos. Pequeñas y sin color
   propio: informan, no piden que se pulsen —no se pueden cambiar
   desde aquí, se cambian en la ficha—. */
.prod-marcas{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;}
.prod-marca{font-family:var(--mono);font-size:9px;letter-spacing:.3px;
  padding:2px 6px;border-radius:4px;border:1px solid var(--border);
  color:var(--text-muted);white-space:nowrap;cursor:default;}

/* ── LOS FILTROS DE LA LISTA DE RESTAURANTES ────────────
   Filas que envuelven: en un móvil los chips bajan de línea en vez
   de salirse, que es lo que hacía el carril de las pestañas (M1). */
.resto-filtros{display:grid;gap:8px;margin:2px 0 14px;}
.resto-filtros-fila{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.resto-filtros-titulo{font-family:var(--mono);font-size:10px;letter-spacing:1px;
  text-transform:uppercase;color:var(--text-dim);min-width:58px;}
.resto-filtros-fila .cat-chip{padding:5px 11px;font-size:11px;}
.resto-filtros-cuenta{font-family:var(--mono);font-size:11px;color:var(--text-muted);}
.resto-filtros-quitar{background:none;border:none;padding:0;font:inherit;
  color:var(--accent);text-decoration:underline;cursor:pointer;}

.resto-etiquetas{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:4px;}
.resto-etiqueta{font-family:var(--mono);font-size:9px;letter-spacing:.5px;
  padding:2px 7px;border-radius:4px;border:1px solid var(--border);
  color:var(--text-muted);white-space:nowrap;}
.resto-etiqueta.video{border-color:var(--accent);color:var(--accent);}
.resto-etiqueta.ia{border-color:var(--warn);color:var(--warn);}
.resto-etiqueta.apagada{border-color:var(--border);color:var(--text-dim);}
.resto-etiqueta.revisar{border-color:var(--warn);color:var(--warn);}
.resto-etiqueta.mal{border-color:var(--danger);color:var(--danger);}
.resto-etiqueta.plan{text-transform:uppercase;color:var(--text-dim);}
.status-badge{font-family:var(--mono);font-size:9px;letter-spacing:1px;text-transform:uppercase;
  padding:3px 8px;border-radius:4px;}
.status-badge.vencido{background:var(--danger-dim);color:var(--danger);border:1px solid var(--danger);}
.status-badge.porvencer{background:var(--warn-dim);color:var(--warn);border:1px solid var(--warn);}
.status-badge.pagovigente{background:transparent;color:var(--text-dim);border:1px solid var(--border);}
/* Producción vs prueba. A rayas y en el color de aviso a propósito:
   tiene que saltar a la vista en una lista de nueve, no camuflarse
   entre los otros distintivos. */
.status-badge.esprueba{background:var(--warn-dim);color:var(--warn);border:1px dashed var(--warn);}

.new-resto-card{background:var(--panel);border:1px dashed var(--border2);border-radius:var(--r-lg);padding:24px;margin-bottom:24px;}
/* S4: plegado, es una línea que se pulsa; abierto, el formulario de siempre. */
.new-resto-card:not([open]){padding:0;}
.new-resto-summary{display:flex;width:100%;min-height:0;padding:16px 24px;margin:0;border:0;border-radius:0;background:transparent;cursor:pointer;list-style:none;}
.new-resto-summary::-webkit-details-marker{display:none;}
.new-resto-summary:hover{color:var(--accent);}
.new-resto-card[open] .new-resto-summary{padding:0 0 16px;}
.new-resto-card:not([open]) .new-resto-summary::after{content:' ▾';color:var(--text-dim);}
.color-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.resto-card-plan{font-family:var(--mono);font-size:9px;letter-spacing:1px;text-transform:uppercase;
  color:var(--text-muted);border:1px solid var(--border2);border-radius:4px;
  padding:2px 7px;margin-top:4px;width:fit-content;}
.color-preview{width:32px;height:32px;border-radius:6px;border:1px solid var(--border);flex-shrink:0;}
/* El cuadrito de vista previa ES el selector de color del navegador.
   Se le quita el cromado nativo para que siga viéndose igual que
   antes, cuando era un div. */
input.color-preview{padding:0;cursor:pointer;background:none;-webkit-appearance:none;appearance:none;}
input.color-preview::-webkit-color-swatch-wrapper{padding:0;}
input.color-preview::-webkit-color-swatch{border:none;border-radius:5px;}
input.color-preview::-moz-color-swatch{border:none;border-radius:5px;}
.color-input-wrap{display:flex;align-items:center;gap:10px;}

/* ── DISEÑADOR DE QR ── */
.qr-layout{display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:start;}
.qr-preview-col{position:sticky;top:72px;}
/* Damasero: deja ver el fondo transparente tal como quedará el PNG */
.qr-canvas-wrap{border-radius:var(--radius);overflow:hidden;
  background-color:#e8e8e8;background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0;
  background-image:linear-gradient(45deg,#cfcfcf 25%,transparent 25%),linear-gradient(-45deg,#cfcfcf 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#cfcfcf 75%),linear-gradient(-45deg,transparent 75%,#cfcfcf 75%);}
.qr-canvas-wrap canvas{display:block;width:100%;height:auto;}
.qr-aviso{margin-top:12px;padding:9px 11px;border-radius:var(--radius);background:var(--warn-dim);
  border:1px solid var(--warn);color:var(--warn);font-size:11px;line-height:1.5;}
.qr-descargas{display:flex;gap:8px;}
/* M2: el enlace parte línea en cualquier carácter —una dirección no tiene
   espacios— en vez de cortarse dentro de un campo de una sola línea. */
.qr-enlace{flex:1;min-width:0;padding:10px 13px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--text);font-family:var(--mono);font-size:12px;line-height:1.5;
  overflow-wrap:anywhere;text-decoration:none;}
.qr-enlace:hover{border-color:var(--accent);text-decoration:underline;}
.qr-range{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;
  background:var(--border2);outline:none;cursor:pointer;}
.qr-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;
  border-radius:50%;background:var(--accent);cursor:pointer;border:none;}
.qr-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);
  cursor:pointer;border:none;}

/* La barra para elegir el segundo de inicio del recorte de video (27/09/2026).
   Dos capas fijas de puro dibujo —el track y la zona de 8 s— y ENCIMA el
   <input type=range> de verdad, con su propio track puesto en transparente:
   así se ve el resaltado de abajo a través suyo y solo el thumb es visible.
   Sin 'background:transparent' en el track del range, Firefox pinta el suyo
   propio y tapa la zona sombreada por debajo. */
.video-barra-wrap{position:relative;height:26px;margin-bottom:2px;}
.video-barra-track{position:absolute;left:0;right:0;top:10px;height:6px;border-radius:3px;
  background:var(--border2);}
.video-barra-zona{position:absolute;top:10px;height:6px;border-radius:3px;
  background:var(--accent);opacity:.55;pointer-events:none;
  transition:left .06s linear,width .06s linear;}
.video-range{position:absolute;left:0;right:0;top:0;width:100%;height:26px;margin:0;
  -webkit-appearance:none;appearance:none;background:transparent;outline:none;cursor:pointer;}
.video-range:disabled{cursor:default;}
.video-range::-webkit-slider-runnable-track{background:transparent;height:26px;}
.video-range::-moz-range-track{background:transparent;height:26px;border:none;}
.video-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;
  margin-top:5px;border-radius:50%;background:var(--accent);cursor:pointer;
  border:2px solid var(--card);box-shadow:0 0 0 1px var(--border);}
.video-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);
  cursor:pointer;border:2px solid var(--card);box-shadow:0 0 0 1px var(--border);}
.video-range:disabled::-webkit-slider-thumb{background:var(--border2);box-shadow:none;}
.video-range:disabled::-moz-range-thumb{background:var(--border2);box-shadow:none;}
#qrCartelPreview{display:block;width:100%;max-width:340px;height:auto;margin:0 auto;border-radius:var(--radius);}
@media(max-width:820px){
  .qr-layout{grid-template-columns:1fr;}
  .qr-preview-col{position:static;}
  .qr-canvas-wrap{max-width:300px;margin:0 auto;}
}
.confirm-text{font-size:13px;color:var(--text-muted);line-height:1.6;margin-bottom:4px;}
.confirm-name{font-weight:600;color:var(--danger);}
.search-input {
  flex: 1;
  min-width: 180px;
  padding: 7px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--sans);
  font-size: 12px;
  outline: none;
  transition: border-color .2s;
}
.search-input:focus {
  border-color: var(--accent);
}

/* Por debajo de 900px la fila deja de caber sin apretar la información
   hasta que no se lee. Ahí se apila: datos arriba, botones abajo y
   alineados a la IZQUIERDA — pegados a la derecha, con siete botones
   envolviendo, la última fila queda descolgada y no se entiende que
   sean del mismo grupo. */
@media(max-width:900px){
  .resto-card{flex-direction:column;align-items:stretch;}
  /* Hay que deshacer la base de 260px. En una columna, flex-basis
     deja de ser el ANCHO y pasa a ser la ALTURA: sin esto cada
     tarjeta abría un hueco vacío de 260px entre los datos y los
     botones. Se ve al mirarlo en el móvil, no al leer el CSS. */
  .resto-card-info{flex:0 0 auto;}
  .resto-card-actions{width:100%;justify-content:flex-start;}
  /* Con la fila alineada a la izquierda, «⋯ Más» puede caer al principio de
     una línea: abierto hacia la izquierda se saldría de la pantalla. */
  .resto-mas-menu{right:auto;left:0;}
}
@media(max-width:680px){
  .plan-card .section-header{align-items:flex-start;}
  .plan-card .plan-select{flex-basis:100%;width:100%;}
  .inicio-encabezado{align-items:flex-start;flex-direction:column;}
  .inicio-metrica{padding:12px;}
  .inicio-metrica-numero{font-size:20px;}
  .inicio-pendiente{flex-direction:column;align-items:stretch;}
  .inicio-pendiente .btn-sm{align-self:flex-start;}
  .inicio-grid{grid-template-columns:1fr;}
  .inicio-tarjeta{margin-bottom:0;}
  .table-header{display:none;}
  .product-row{
	grid-template-columns:64px 1fr auto;
	grid-template-rows:auto auto;
	padding:12px 14px;
	row-gap:0;column-gap:0;
  }
  .product-row>*:nth-child(1){grid-column:1;grid-row:1;}
  .product-row>*:nth-child(2){grid-column:2;grid-row:1;padding:0 10px;}
  .product-row>*:nth-child(3){display:none;}
  .product-row>*:nth-child(4){grid-column:3;grid-row:1;}
  .product-row>*:nth-child(5){
	grid-column:1/4;grid-row:2;
	display:flex;align-items:center;gap:10px;
	padding-top:10px;margin-top:10px;
	border-top:1px solid var(--border);
  }
  .prod-precio-movil{display:block;font-family:var(--mono);font-size:13px;color:var(--accent);flex:1;}
  .btn-del-movil{display:block;}
  .prod-img,.prod-img-placeholder{width:54px;height:54px;}
  .prod-name{font-size:13px;}
  .prod-cat{font-size:11px;}
  .content{padding:14px 12px 80px;}
  .form-row{grid-template-columns:1fr;}
  .img-edit-wrap{width:100%;}
  /* La foto del plato (arriba) ya llena el ancho en horizontal. En vertical
     sigue mandando la altura fija (#productModal .producto-foto ... con más
     especificidad que esta regla), así que no hay nada que ensanchar ahí. */
  .btn-edit { padding: 8px 14px; font-size: 12px; }
  /* Antes esta línea ENCOGÍA el botón de borrar en móvil (12 px de letra,
     28 × 26 de caja): al revés de lo que pide un dedo, y en el control
     destructivo. Ver M3. */
  .btn-del  { padding: 9px 12px; font-size: 15px; margin-left: 6px; }

  /* M3: la fila de categoría no tenía versión móvil y desbordaba su tarjeta
     (326 px en 307). Mismo criterio que .product-row: datos arriba, y los
     controles abajo con su separador. */
  .cat-row{flex-wrap:wrap;row-gap:0;padding:12px 14px;}
  .cat-row>div:nth-child(2){min-width:0;flex:1 1 0;}
  .cat-acciones{flex-basis:100%;gap:8px;padding-top:10px;margin-top:10px;border-top:1px solid var(--border);}
  .cat-acciones .btn-del{margin-left:auto;}
  /* Las flechas se pulsan muchas veces seguidas (C1): diana de dedo. Y
     borrar, que con solo el padding se quedaba en 36 × 35 (medido). */
  .cat-acciones .btn-edit,.cat-acciones .btn-del{min-height:40px;min-width:44px;}
  /* El asa de arrastrar (C1), del mismo tamaño que las flechas: medía 30 × 30. */
  .cat-asa{min-height:40px;min-width:44px;display:flex;align-items:center;justify-content:center;}
  /* «Categorías del restaurante» y «+ Nueva categoría» no cabían en una
     línea y se partían los dos; mejor que el botón baje entero. */
  .section-header{flex-wrap:wrap;gap:10px;}
  .section-header .btn-sm{white-space:nowrap;}
  .products-controls{gap:8px;}
  .sort-select{font-size:11px;padding:6px 8px;}
}


/* ── GALERÍA IMÁGENES ADICIONALES ── */
/* ── ARRASTRANDO POR ENCIMA ────────────────────────
   Sin señal, nadie descubre que se puede soltar: se prueba una vez,
   no pasa nada visible, y no se vuelve a intentar. El borde y el
   tinte del acento son lo que dice "suéltalo aquí".

   Vale para las tres formas de zona, así que una sola regla. */
.soltando { outline: 2px dashed var(--accent) !important;
            outline-offset: 3px;
            background: color-mix(in srgb, var(--accent) 12%, transparent) !important; }

/* ── "…O ARRÁSTRALO AQUÍ" ───────────────────────────
   Sin una frase que lo diga, el arrastre no lo descubre nadie: no
   deja rastro en la pantalla hasta que ya lo estás intentando.

   Pero en un teléfono no se puede arrastrar, y desde un teléfono
   entra la mayoría. Prometer ahí algo que la pantalla no hace es
   peor que callarse: se intenta, no pasa nada, y se deja de creer
   al resto de los textos de la página.

   'hover' y 'pointer' preguntan por el ratón, que es lo que de
   verdad hace falta; el ancho de la pantalla no lo dice — un
   portátil pequeño y una tablet con teclado caerían del lado
   equivocado.

   REGLA: aquí dentro va SOLO lo que sobra sin ratón. Si un texto
   que hace falta desde un teléfono entra en un .pista-arrastre,
   ese usuario deja de verlo. Lo comprueba una prueba. */
.pista-arrastre { display: none; }
@media (hover: hover) and (pointer: fine) {
  /* 'revert' y no 'inline': la pista del recuadro de video y la de
     las imágenes adicionales son <div>, y forzarlas a inline las
     pegaría al final de la línea anterior. */
  .pista-arrastre { display: revert; }
}

.img-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.img-gallery-item {
	position: relative;
	width: 72px; height: 72px;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid var(--border);
}

.img-gallery-item img {
	width: 100%; height: 100%;
	object-fit: cover; display: block;
}

.img-gallery-del {
	position: absolute;
	top: 2px; right: 2px;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: rgba(255,71,87,0.85);
	border: none; color: #fff;
	font-size: 10px; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	line-height: 1;
}

.img-gallery-add {
	width: 72px; height: 72px;
	border-radius: 6px;
	border: 1px dashed var(--border2);
	background: var(--card);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; font-size: 22px; color: var(--text-dim);
	transition: border-color .2s;
}

.img-gallery-add:hover { border-color: var(--accent); color: var(--accent); }

/* Elegir qué parte de la foto anima la IA (encuadre.js). Lo de fuera del
   recuadro se oscurece con una sombra enorme en vez de con cuatro capas: el
   escenario recorta lo que sobra, y así el recuadro es un solo elemento. */
.encuadre-escenario{position:relative;display:inline-block;line-height:0;overflow:hidden;
  border-radius:6px;touch-action:none;user-select:none;max-width:100%;}
.encuadre-escenario img{max-width:100%;max-height:55vh;display:block;pointer-events:none;}
.encuadre-marco{position:absolute;box-sizing:border-box;border:2px solid #fff;border-radius:4px;
  box-shadow:0 0 0 9999px rgba(0,0,0,.55);outline:none;}
.encuadre-marco:focus-visible{border-color:var(--accent);}

/* ── Bandeja de solicitudes de alta (bandeja-solicitudes.js) ── */
#solicitudesPanel{border-color:rgba(255,255,255,.78);background:linear-gradient(135deg,rgba(113,77,193,.18),transparent 38%),var(--panel);}
#solicitudesPanel .section-title{border-color:#9d78f1;background:rgba(126,85,212,.2);color:#e3d8ff;}
#solicitudesPanel .resto-filtros-fila{margin:2px 0 14px;padding:10px;border:1px solid rgba(139,101,222,.35);border-radius:12px;background:rgba(77,50,133,.13);}
#solicitudesFiltros .solicitud-filter{padding:7px 12px;border-color:rgba(173,146,239,.42);color:var(--text-muted);font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.2px;}
#solicitudesFiltros .solicitud-filter:hover{border-color:#b89aff;color:#fff;background:rgba(139,101,222,.2);}
#solicitudesFiltros .solicitud-filter.active{border-color:#9b72f3;background:#7150bb;color:#fff;box-shadow:0 4px 12px rgba(93,60,166,.3);}
/* [hidden] explícito: el display:flex de abajo le ganaría al atributo. */
.solicitudes-lote[hidden]{display:none;}
.solicitudes-lote{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;
  padding:10px 12px;border:1px solid rgba(239,83,80,.4);border-radius:10px;background:rgba(183,38,43,.1);font-family:var(--sans);font-size:11px;font-weight:700;color:var(--text-muted);}
.solicitudes-lote .btn-sm{border-radius:8px;font-family:var(--sans);font-weight:800;}
.solicitud-card{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:16px;margin-bottom:10px;display:grid;gap:8px;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;}
.solicitud-card::before{content:'';position:absolute;inset:0 auto 0 0;width:4px;background:var(--border2);}
.solicitud-card.solicitud-nueva{border-color:#8760dd;background:linear-gradient(105deg,rgba(124,82,218,.16),transparent 48%),var(--panel);box-shadow:0 8px 20px rgba(65,37,128,.13);}
.solicitud-card.solicitud-nueva::before{background:#9b72f3;}
.solicitud-card.solicitud-contactada{border-color:#3b82c4;background:linear-gradient(105deg,rgba(47,122,193,.13),transparent 48%),var(--panel);}
.solicitud-card.solicitud-contactada::before{background:#4e9ee8;}
.solicitud-card.solicitud-aprobada{opacity:.82;border-color:rgba(27,167,101,.5);}
.solicitud-card.solicitud-aprobada::before{background:var(--success);}
.solicitud-card.solicitud-descartada{opacity:.68;border-color:rgba(239,83,80,.42);}
.solicitud-card.solicitud-descartada::before{background:var(--danger);}
.solicitud-card:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.17);}
.solicitud-cabeza{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.solicitud-cabeza input[type="checkbox"]{width:18px;height:18px;flex:0 0 auto;}
.solicitud-negocio{font-family:var(--sans);font-size:15px;font-weight:800;color:var(--text);overflow-wrap:anywhere;}
.solicitud-estado{padding:5px 10px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--text-muted);font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.55px;text-transform:uppercase;}
.solicitud-estado.estado-nueva{border-color:#9b72f3;background:#7150bb;color:#fff;box-shadow:0 3px 10px rgba(93,60,166,.28);}
.solicitud-estado.estado-contactada{border-color:#4e9ee8;background:#236bb0;color:#fff;}
.solicitud-estado.estado-aprobada{border-color:#1ba765;background:#159957;color:#fff;}
.solicitud-estado.estado-descartada{border-color:#c65b58;background:#773631;color:#fff;}
.solicitud-datos{font-size:12px;color:var(--text-muted);overflow-wrap:anywhere;}
/* Las notas conservan los saltos de línea que escribió la persona. */
.solicitud-notas{font-size:12px;color:var(--text);white-space:pre-line;overflow-wrap:anywhere;
  background:var(--card);border-radius:6px;padding:8px 10px;}
.solicitud-acciones{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px;padding-top:10px;border-top:1px solid var(--border);}
.solicitud-action{min-height:34px;border-radius:999px;font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.25px;text-transform:uppercase;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;}
.solicitud-action:hover{transform:translateY(-2px);box-shadow:0 7px 15px rgba(0,0,0,.22);}
.solicitud-action-whatsapp{border-color:#38b86e!important;background:rgba(37,211,102,.12);color:#fff!important;text-decoration:none;}
.solicitud-action-contact{border-color:#4e9ee8!important;background:rgba(47,122,193,.16);color:#dceeff!important;}
.solicitud-action-approve{border-color:#1ba765!important;background:#159957!important;color:#fff!important;box-shadow:0 4px 12px rgba(21,153,87,.24);}
.solicitud-action-approve:hover{background:#1aad66!important;}
.solicitud-action-discard{border-color:#ef5350!important;background:#b7262b!important;color:#fff!important;}
.solicitud-action-discard:hover{background:#d6383d!important;}
.solicitud-action-recover{border-color:#9b72f3!important;background:rgba(113,80,187,.18);color:#e6dcff!important;}
.solicitud-creado{font-family:var(--sans);font-size:11px;font-weight:800;color:var(--success);}

/* En claro, los botones secundarios no pueden conservar letra blanca sobre
   fondos tenues: desaparecen. Estos tonos mantienen la misma jerarquía y la
   misma tipografía, pero con contraste real sobre superficies blancas. */
:root[data-theme="light"] .inicio-acciones .btn-sm:not(.accent){background:var(--card);}
:root[data-theme="light"] .resto-action-view,:root[data-theme="light"] .resto-action-more{background:var(--card);}
:root[data-theme="light"] #solicitudesPanel .section-title{color:#5d3695;}
:root[data-theme="light"] #solicitudesFiltros .solicitud-filter:hover{color:#5d3695;background:rgba(113,80,187,.12);}
:root[data-theme="light"] .solicitud-action-whatsapp{color:var(--success)!important;}
:root[data-theme="light"] .solicitud-action-contact{color:#236bb0!important;}
:root[data-theme="light"] .solicitud-action-recover{color:#5d3695!important;}

/* ── Pantalla de bienvenida (Apariencia) ─────────────────────── */
.bienvenida-config{font-family:'Montserrat',var(--sans);}
.bienvenida-ayuda{margin:-3px 0 12px;color:var(--text-muted);font-size:12px;line-height:1.55;}
.bienvenida-preview{position:relative;isolation:isolate;min-height:280px;margin:14px 0 16px;border:1px solid var(--border2);border-radius:20px;overflow:hidden;background:#111827 center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);}
.bienvenida-preview-overlay{position:absolute;inset:0;z-index:0;background:rgba(10,10,15,.5);pointer-events:none;}
.bienvenida-preview-content{position:relative;z-index:1;display:flex;min-height:280px;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:26px;text-align:center;color:#fff;}
.bienvenida-preview-logo{display:grid;place-items:center;width:48px;height:48px;overflow:hidden;border:2px solid rgba(255,255,255,.82);border-radius:50%;background:rgba(255,255,255,.16);font-size:12px;font-weight:800;}
.bienvenida-preview-logo img{width:100%;height:100%;object-fit:contain;}.bienvenida-preview-content>div:nth-child(2){font-size:24px;font-weight:800;}.bienvenida-preview-content>div:nth-child(3){font-size:14px;opacity:.9;}.bienvenida-preview-content>div:nth-child(4):empty{display:none;}
.bienvenida-preview-content button{min-height:38px;padding:9px 18px;border:0;border-radius:999px;background:#fff;color:#17120d;font:800 12px 'Montserrat',var(--sans);cursor:default;}.bienvenida-preview-social{font-weight:800;letter-spacing:4px;}.bienvenida-preview-resena{padding:7px 14px;border:1px solid rgba(255,255,255,.6);border-radius:999px;background:rgba(255,255,255,.1);font-size:11px;font-weight:800;}.bienvenida-preview-resena[hidden]{display:none;}.bienvenida-preview-map{display:flex;gap:6px;align-items:center;justify-content:center;min-width:120px;min-height:30px;padding:6px 10px;border:1px solid rgba(255,255,255,.55);border-radius:8px;font-size:10px;overflow:hidden;}.bienvenida-preview-map:empty{display:none;}.bienvenida-preview-map iframe{width:150px;height:50px;border:0;border-radius:5px;}
.bienvenida-details{margin-top:9px;border:1px solid var(--border);border-radius:12px;background:var(--card);overflow:hidden;}.bienvenida-details summary{padding:13px 14px;cursor:pointer;list-style:none;font-size:13px;font-weight:800;color:var(--text);}.bienvenida-details summary::-webkit-details-marker{display:none;}.bienvenida-details summary::after{content:'⌄';float:right;color:var(--accent);font-size:17px;line-height:.7;transition:transform .2s ease;}.bienvenida-details[open] summary::after{transform:rotate(180deg);}.bienvenida-details-body{padding:0 14px 14px;border-top:1px solid var(--border);}
.bienvenida-upload{margin:6px 0 10px;min-height:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;}.bienvenida-upload small{color:var(--text-dim);}.bienvenida-image-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--text-muted);}.bienvenida-image-row img{width:92px;height:58px;border-radius:8px;object-fit:cover;border:1px solid var(--border2);}.bienvenida-overlay-switch{align-items:flex-start;margin:12px 0 10px;}.bienvenida-overlay-switch small{display:block;margin-top:3px;color:var(--text-muted);font-size:11px;line-height:1.45;}.bienvenida-overlay-controls[hidden]{display:none;}.bienvenida-color-field{display:inline-flex;align-items:center;gap:7px;max-width:150px;}.bienvenida-color-field input[type="color"]{width:38px;height:34px;padding:2px;border:1px solid var(--border);border-radius:8px;background:var(--card);flex:none;}.bienvenida-color-field input[type="text"]{width:86px;min-height:34px;padding:5px 7px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--text);font:700 11px var(--mono);}.bienvenida-textos-controles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px;}.bienvenida-texto-control{border:1px solid var(--border);border-radius:10px;background:var(--panel);overflow:hidden;}.bienvenida-texto-control summary{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px;cursor:pointer;list-style:none;font-size:12px;font-weight:800;}.bienvenida-texto-control summary::-webkit-details-marker{display:none;}.bienvenida-texto-control summary::after{content:'⌄';color:var(--accent);font-size:17px;transition:transform .2s ease;}.bienvenida-texto-control[open] summary::after{transform:rotate(180deg);}.bienvenida-texto-control-resumen{overflow:hidden;color:var(--text-muted);font-size:10px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;}.bienvenida-texto-control-cuerpo{padding:0 11px 11px;border-top:1px solid var(--border);}.bienvenida-texto-control label{display:block;margin:7px 0 3px;font-size:10px;color:var(--text-muted);font-weight:700;}.bienvenida-texto-control select,.bienvenida-texto-control input:not([type="color"]){width:100%;min-height:31px;border:1px solid var(--border);border-radius:7px;background:var(--card);color:var(--text);padding:4px 7px;font:600 11px 'Montserrat',var(--sans);}.bienvenida-texto-control input[type="color"]{width:42px;height:30px;border:1px solid var(--border);border-radius:7px;background:transparent;}.bienvenida-reset{margin-top:14px;color:var(--text-muted);}.bienvenida-overlay-switch .toggle{flex:none;}.aj-adic-switch{margin:10px 0 12px;gap:10px;}.aj-adic-switch .toggle{flex:none;}.aj-adic-ayuda{font-size:12px;line-height:1.55;color:var(--text-muted);margin:8px 0 4px;}.aj-adic-categorias{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px;}.aj-adic-categoria{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:var(--card);font-size:12px;cursor:pointer;}.bienvenida-carta-switch{margin:4px 0 14px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--panel);}.bv-color-manual-off{opacity:.45;}
@media(max-width:620px){.bienvenida-textos-controles{grid-template-columns:1fr;}.bienvenida-preview{min-height:250px;}.bienvenida-preview-content{min-height:250px;}}
.bienvenida-textos-controles{align-items:start;}.bienvenida-textos-intro{margin:16px 0 4px;padding:12px;border-left:3px solid var(--accent);border-radius:0 10px 10px 0;background:color-mix(in srgb,var(--accent) 8%,transparent);}.bienvenida-textos-intro h4{margin:0 0 5px;font-size:13px;color:var(--text);}.bienvenida-textos-intro p{margin:0;color:var(--text-muted);font-size:11px;line-height:1.5;}.bienvenida-preview-logo{position:relative;z-index:2;isolation:isolate;background:#fff;box-shadow:0 3px 12px rgba(0,0,0,.22);}.bienvenida-preview-logo img{position:relative;z-index:1;opacity:1!important;filter:none!important;mix-blend-mode:normal!important;}
.bienvenida-texto-resumen{overflow:hidden;color:var(--text-muted);font-size:10px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;}.bienvenida-texto-cuerpo{padding:0 11px 11px;border-top:1px solid var(--border);}
.bienvenida-mapa-boton-controles{margin-top:12px;padding-top:10px;border-top:1px solid var(--border);}.bienvenida-mapa-boton-controles[hidden]{display:none;}.bienvenida-preview-map span{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:7px 13px;border-radius:999px;font-size:11px;font-weight:800;}
.bienvenida-sedes-config{display:grid;gap:10px;margin:10px 0;}.bienvenida-sede-config{display:grid;gap:7px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--panel);}.bienvenida-sede-config label{display:grid;gap:4px;font-size:11px;font-weight:700;color:var(--text-muted);}.bienvenida-sede-acciones{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:3px;}.bienvenida-sede-mover,.bienvenida-sede-quitar{min-height:34px;border-radius:999px;padding:7px 12px;font:800 10px 'Montserrat',var(--sans);letter-spacing:.045em;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;border:1px solid;}.bienvenida-sede-mover{color:#754019;border-color:#d99a60;background:#fff8ef;}.bienvenida-sede-mover:hover:not(:disabled){background:#f8dfc4;box-shadow:0 5px 12px rgba(101,55,19,.15);transform:translateY(-1px);}.bienvenida-sede-mover--subir{color:#9a4d09;border-color:#e7a04b;background:#fff3e4;}.bienvenida-sede-mover:disabled{opacity:.4;cursor:not-allowed;}.bienvenida-sede-quitar{margin-left:auto;color:#fff;border-color:#b84028;background:linear-gradient(135deg,#bb4b2e,#8f251d);box-shadow:0 5px 12px rgba(128,38,27,.2);}.bienvenida-sede-quitar span{display:inline-grid;place-items:center;width:15px;height:15px;margin-right:3px;border-radius:50%;background:rgba(255,255,255,.2);font-size:16px;line-height:1;font-weight:500;vertical-align:-2px;}.bienvenida-sede-quitar:hover{background:linear-gradient(135deg,#d35b37,#a82d22);box-shadow:0 8px 16px rgba(128,38,27,.28);transform:translateY(-1px);}.bienvenida-sede-mover:active,.bienvenida-sede-quitar:active{transform:translateY(0) scale(.98);}.bienvenida-sede-mover:focus-visible,.bienvenida-sede-quitar:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 60%,white);outline-offset:2px;}.bienvenida-preview-sedes{display:flex;max-width:100%;gap:6px;flex-wrap:wrap;justify-content:center;}.bienvenida-preview-sedes button{min-height:30px;padding:6px 10px;border:1px solid rgba(255,255,255,.7);border-radius:999px;background:transparent;color:#fff;font:700 10px 'Montserrat',var(--sans);}.bienvenida-preview-sedes button.active{background:#fff;color:#17120d;}@media(max-width:480px){.bienvenida-sede-acciones{display:grid;grid-template-columns:1fr 1fr;}.bienvenida-sede-mover,.bienvenida-sede-quitar{justify-content:center;width:100%;}.bienvenida-sede-quitar{grid-column:1/-1;margin-left:0;}}
.bienvenida-preview-content{min-height:calc(280px - 28px);margin:14px;border-radius:16px;box-sizing:border-box;box-shadow:0 14px 32px rgba(0,0,0,.18);}@media(max-width:620px){.bienvenida-preview-content{min-height:calc(250px - 28px);}}

/* ── Paletas de colores (Superadmin → Colores). Ver public/paletas.js. ── */
.paletas{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px;margin:6px 0 16px;}
.paleta{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:8px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  color:var(--text);font-family:var(--sans);text-align:left;cursor:pointer;min-width:0;}
.paleta:hover{border-color:var(--text-dim);}
.paleta:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.paleta[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
/* La del logo va primera y se distingue: es la propuesta más personal. */
.paleta-logo{border-style:dashed;border-color:var(--accent);}
.paleta-logo .paleta-nombre::before{content:'✦ ';color:var(--accent-texto);}
/* Las cuatro tiras van de lo que más se ve (el fondo) a los acentos. */
.paleta-tiras{display:flex;width:100%;height:26px;border-radius:5px;overflow:hidden;margin-bottom:3px;}
.paleta-tiras span{flex:1;}
.paleta-nombre{font-size:12px;font-weight:600;}
.paleta-para{font-size:11px;color:var(--text-muted);line-height:1.3;}

/* Aviso de contraste (revisarContraste en public/paletas.js). */
.aviso-contraste{margin-top:14px;padding:11px 12px;border-radius:var(--radius);
  background:var(--warn-dim);border:1px solid var(--warn);font-size:12px;line-height:1.5;}
.aviso-contraste[hidden]{display:none;}
.aviso-contraste-titulo{color:var(--warn);font-weight:600;margin-bottom:6px;}
.aviso-contraste-item{padding:8px 0;border-top:1px solid var(--border);color:var(--text);}
.aviso-contraste-titulo + .aviso-contraste-item{border-top:0;}
.aviso-contraste-item ul{margin:4px 0 8px;padding-left:1.1em;color:var(--text-muted);}
.aviso-contraste-usar{display:inline-flex;align-items:center;gap:6px;}
.aviso-contraste-pista{color:var(--text-muted);font-style:italic;}
.aviso-contraste-muestra{width:14px;height:14px;border-radius:3px;border:1px solid var(--border);flex:none;}

/* Interacciones discretas: elevan las superficies que admiten acción sin
   convertir el panel en una animación continua. En móvil solo queda la
   respuesta al toque, y quien pide menos movimiento no recibe transiciones. */
@media (hover:hover){
  .brand-pill:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 11px 24px var(--accent-glow);}
  .brand-pill:hover .brand-logo{transform:rotate(-8deg) scale(1.09);}
  .section-card:hover{transform:translateY(-2px);border-color:var(--border2);box-shadow:0 12px 28px rgba(0,0,0,.14);}
  .tab-btn:hover{background:var(--accent-dim);}
  .cat-chip:hover,.btn-edit:hover,.paleta:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.12);}
  .inicio-metrica:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.12);}
}
@media (hover:none){
  .btn-primary:active,.btn-sm:active,.tab-btn:active,.cat-chip:active,.btn-edit:active{filter:brightness(1.08);transform:scale(.98);}
}
@media (max-width:680px){
  .inicio-estados{grid-template-columns:1fr;}
  .inicio-grid{grid-template-columns:1fr;}
  .inicio-tarjeta-ancha{grid-column:auto;}
  .inicio-configuracion{align-items:flex-start;flex-wrap:wrap;}
  .inicio-configuracion-texto{min-width:calc(100% - 38px);}
  .inicio-configuracion .btn-sm{margin-left:33px;}
  .orden-card{flex-direction:column;}
  .orden-card select{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important;}
}

/* Reservas de mesa (01/10/2026). */
.tab-contador{display:inline-block;min-width:18px;padding:1px 6px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;font-weight:800;line-height:1.5;text-align:center;vertical-align:middle;}
.reservas-resumen{font-size:12px;color:var(--text-muted);margin-bottom:14px;}
.reservas-grupo{margin:18px 0 4px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);}
.reserva-card{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--border);font-size:13px;line-height:1.55;}
.reserva-cuando{font-weight:700;color:var(--text);}
.reserva-estado{font-size:12px;color:var(--text-muted);}
.reserva-pendiente .reserva-estado{color:var(--accent);font-weight:800;}
.reserva-cancelada{opacity:.6;}
.reserva-acciones{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;flex:0 1 auto;}
.reserva-acciones .btn-sm{text-decoration:none;white-space:nowrap;}
.reserva-ok{background:var(--accent);color:#fff;border-color:var(--accent);}
@media (max-width:640px){
  .reserva-card{flex-direction:column;align-items:stretch;}
  .reserva-acciones{justify-content:flex-start;}
}

/* Pedidos y reservas: mismo sistema de lectura rápida. La tarjeta separa los
   datos de la acción sin convertir cada línea en una etiqueta llamativa. */
.gestion-lista-card{border-color:color-mix(in srgb,var(--accent) 35%,var(--border));background:linear-gradient(145deg,color-mix(in srgb,var(--panel) 95%,var(--accent) 5%),var(--panel));box-shadow:0 10px 24px rgba(54,30,13,.08);}
.gestion-lista-card .section-header{align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid color-mix(in srgb,var(--accent) 18%,var(--border));}
.gestion-lista-titulo{display:inline-flex;align-items:center;min-height:34px;margin:0;padding:8px 13px;border:1px solid #82502e;border-radius:999px;background:linear-gradient(135deg,#553019,#704326);color:#fff;font-family:'Montserrat',var(--sans);font-size:12px;font-weight:850;letter-spacing:.28px;box-shadow:0 4px 10px rgba(69,35,16,.23);transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;}
.gestion-lista-titulo:hover{transform:translateY(-1px);filter:brightness(1.1);box-shadow:0 7px 14px rgba(69,35,16,.3);}
.gestion-actualizar{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:8px 13px!important;border-color:#e87809!important;border-radius:999px!important;background:#ed7c00!important;color:#fff!important;font-family:'Montserrat',var(--sans)!important;font-size:11px!important;font-weight:850!important;letter-spacing:.2px;box-shadow:0 5px 12px rgba(237,124,0,.28);transition:transform .18s ease,filter .18s ease,box-shadow .18s ease!important;}
.gestion-actualizar span{font-size:16px;line-height:1;transition:transform .32s ease;}
.gestion-actualizar:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 8px 17px rgba(237,124,0,.38)!important;}
.gestion-actualizar:hover span{transform:rotate(160deg);}
.gestion-actualizar:active{transform:translateY(0) scale(.98);}
.gestion-lista-intro{margin:14px 0 16px;color:var(--text-muted);font-size:12px;line-height:1.55;}
.reservas-resumen,#ordenesResumen{display:inline-flex;flex-wrap:wrap;gap:4px;margin:0 0 14px;padding:8px 11px;border-radius:10px;background:color-mix(in srgb,var(--accent) 8%,var(--card));color:var(--text-muted);font-size:12px;line-height:1.45;}
.reservas-resumen strong,#ordenesResumen strong{color:var(--text);font-weight:850;}
.reservas-grupo{margin:18px 0 8px;padding:0 2px;color:var(--accent-texto);}
.reserva-card,.orden-card{margin:0 0 9px;padding:14px;border:1px solid color-mix(in srgb,var(--border) 82%,var(--accent) 18%);border-radius:13px;background:var(--card);box-shadow:0 3px 10px rgba(35,18,7,.04);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;}
.reserva-card:hover,.orden-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 48%,var(--border));box-shadow:0 8px 18px rgba(35,18,7,.1);}
.reserva-card:first-of-type,.orden-card:first-child{border-top:1px solid color-mix(in srgb,var(--border) 82%,var(--accent) 18%);}
.reserva-info,.orden-info{min-width:0;color:var(--text);}
.reserva-cliente,.orden-cliente{font-family:'Montserrat',var(--sans);font-size:14px;font-weight:850;}
.reserva-contacto,.orden-contacto,.orden-meta,.orden-items{color:var(--text-muted);font-size:12px;line-height:1.6;}
.reserva-cuando strong,.orden-meta strong,.orden-total{color:var(--text);font-weight:850;}
.reserva-estado{display:inline-flex;margin-top:3px;padding:3px 8px;border-radius:999px;background:var(--accent-dim);color:var(--accent-texto);font-size:11px;}
.reserva-confirmada .reserva-estado{background:var(--success-dim);color:var(--success);}
.reserva-cancelada .reserva-estado{background:rgba(191,53,53,.12);color:#b72d35;}
.reserva-cancelada{opacity:.82;}
.reserva-acciones{gap:8px;}
.reserva-acciones .btn-sm{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 11px;border-radius:9px;font-family:'Montserrat',var(--sans);font-size:11px;font-weight:800;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease,background .18s ease;}
.reserva-acciones .btn-sm:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 6px 12px rgba(32,18,9,.16);}
.reserva-ok{border-color:#138b52!important;background:#159957!important;color:#fff!important;}
.reserva-cancelar{border-color:#a74946!important;background:#813937!important;color:#fff!important;}
.reserva-restaurar{border-color:#855b37!important;background:#6c482d!important;color:#fff!important;}
.reserva-wa{border-color:#168f56!important;background:#1ba765!important;color:#fff!important;box-shadow:0 4px 11px rgba(27,167,101,.2);}
.reserva-wa span{font-size:13px;}
.orden-estado-selector{width:166px!important;min-height:39px;padding:8px 30px 8px 10px!important;border-color:#996033!important;border-radius:9px!important;background-color:#fff8f1!important;color:#4a2a18!important;font-family:'Montserrat',var(--sans)!important;font-size:11px!important;font-weight:800!important;box-shadow:0 2px 6px rgba(50,27,10,.08);}
.orden-estado-selector:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-dim)!important;}
.orden-estado-selector:disabled,.reserva-acciones .btn-sm:disabled,.gestion-actualizar:disabled{opacity:.52;cursor:not-allowed;transform:none;box-shadow:none!important;filter:none;}
@media(max-width:640px){.gestion-lista-card .section-header{align-items:flex-start;flex-direction:column;}.gestion-actualizar{width:100%;}.gestion-lista-titulo{font-size:11px;}.reservas-resumen,.ordenes-resumen{display:flex;}.reserva-card,.orden-card{padding:13px;}.reserva-acciones{display:grid;grid-template-columns:1fr;}.reserva-acciones .btn-sm{width:100%;}.orden-estado-selector{width:100%!important;}.reserva-card:hover,.orden-card:hover{transform:none;}}
@media(prefers-reduced-motion:reduce){.gestion-lista-titulo,.gestion-actualizar,.gestion-actualizar span,.reserva-card,.orden-card,.reserva-acciones .btn-sm{transition:none;}}
/* ── SECCIONES DE AJUSTES ──────────────────────────────────── */
/* Fila de chips con scroll horizontal, como los de categoría de la carta: en un
   móvil no hay que adivinar que hay más. 44 px de alto, la guía de Apple y de
   Material para algo que se toca con el pulgar. */
.aj-secciones{display:flex;gap:8px;margin:0 0 16px;padding:2px 0 6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.aj-secciones::-webkit-scrollbar{display:none;}
.aj-seccion-tab{flex:0 0 auto;min-height:44px;padding:10px 18px;border:1px solid var(--border);border-radius:999px;background:var(--card);color:var(--text-muted);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;cursor:pointer;transition:color .18s,background .18s,border-color .18s;}
.aj-seccion-tab:hover{color:var(--text);background:var(--surface);}
.aj-seccion-tab.active{border-color:var(--accent);background:var(--accent-dim);color:var(--accent-texto);}
.aj-seccion-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
/* Punto de «tiene cambios sin guardar» en una ficha de Ajustes. */
.aj-sin-guardar{display:inline-block;width:8px;height:8px;margin-left:8px;border-radius:50%;background:var(--warn);vertical-align:middle;}
.aj-sin-guardar[hidden]{display:none;}

/* ── BIENVENIDA: estado del interruptor y vista previa fija (BV4, BV5) ── */
.bienvenida-interruptor{display:flex;align-items:center;gap:10px;}
.bienvenida-estado{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--success);}
.bienvenida-estado.apagada{color:var(--text-muted);}
.bienvenida-nota-apagada{margin:-3px 0 12px;padding:10px 12px;border-left:3px solid var(--warn);border-radius:0 10px 10px 0;background:var(--warn-dim);color:var(--text-muted);font-size:12px;line-height:1.55;}
.bienvenida-nota-apagada[hidden]{display:none;}
.bienvenida-nota-apagada strong{color:var(--text);}
.bienvenida-preview-fijo{position:relative;}
.bienvenida-preview-apagada .bienvenida-preview{opacity:.45;filter:grayscale(.65);}
.bienvenida-preview-apagada::after{content:'Apagada · no se muestra';position:absolute;top:22px;right:12px;padding:4px 10px;border-radius:999px;background:var(--panel);border:1px solid var(--border2);color:var(--text-muted);font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;pointer-events:none;}
/* Fija solo si hay altura de sobra: en un móvil apaisado o una ventana baja
   taparía el formulario. Debajo de la barra superior (que también es fija), y
   con tope de altura: con todos los elementos encendidos la bienvenida mide más
   que la pantalla, y se desplaza por dentro en vez de comerse el formulario. */
/* Un teléfono, no una franja. En un móvil la vista previa va arriba, con el ancho
   de un teléfono y SIN fijarse: fija se comía media pantalla (03/10/2026). En
   pantalla ancha va en su propia columna, a la derecha, y esa columna sí se
   queda a la vista al bajar: no hay nada debajo que tapar. */
.bienvenida-lateral{max-width:360px;margin:0 auto;}
@media (min-width:980px){
.bienvenida-columnas{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start;}
.bienvenida-formulario{grid-column:1;grid-row:1;min-width:0;}
.bienvenida-lateral{grid-column:2;grid-row:1;position:sticky;top:76px;z-index:5;max-width:none;margin:0;}
/* Con tope de altura: si la pantalla es baja o la bienvenida lleva todo, se desplaza por dentro. */
.bienvenida-preview-fijo{max-height:calc(100vh - 100px);overflow-y:auto;border-radius:20px;}
.bienvenida-preview-fijo .bienvenida-preview{aspect-ratio:9/16;margin:0;}
}

/* ── BIENVENIDA: avisos de legibilidad (BV7) ── */
.bienvenida-avisos{margin:0 0 12px;padding:10px 12px;border-left:3px solid var(--warn);border-radius:0 10px 10px 0;background:var(--warn-dim);color:var(--text-muted);font-size:12px;line-height:1.55;}
.bienvenida-avisos[hidden]{display:none;}
.bienvenida-avisos strong{color:var(--text);}
.bienvenida-avisos ul{margin:6px 0 6px 18px;padding:0;}
.bienvenida-avisos li{margin:3px 0;}
.bienvenida-avisos p{margin:0;font-size:11px;}
.bienvenida-details.con-aviso>summary::before{content:'⚠';margin-right:8px;color:var(--warn);}

/* ── SEDES ─────────────────────────────────────────────────── */
.sede-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--border);}
.sede-fila:first-child{border-top:0;}
.sede-apagada .sede-info{opacity:.55;}
.sede-nombre{font-weight:700;font-size:15px;}
.sede-etiqueta{font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--text-dim);margin-left:6px;}
.sede-enlace{display:block;font-family:var(--mono);font-size:12px;color:var(--accent);word-break:break-all;margin-top:2px;}
.sede-dato{font-size:12px;color:var(--text-muted);margin-top:2px;}
.sede-acciones{display:flex;gap:6px;flex-wrap:wrap;}
.sede-cat{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim);margin:18px 0 6px;}
.sede-plato{display:grid;grid-template-columns:1fr 90px 130px auto;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--border);}
.sede-plato-nombre{font-size:14px;}
.sede-plato-base{font-family:var(--mono);font-size:12px;color:var(--text-dim);text-align:right;}
.sede-precio{padding:7px 10px;}
.sede-sirve{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);white-space:nowrap;}
@media (max-width:640px){
  .sede-plato{grid-template-columns:1fr 1fr;}
  .sede-plato-nombre{grid-column:1 / -1;font-weight:600;}
  .sede-plato-base{text-align:left;}
  .sede-sirve{grid-column:1 / -1;}
}
.sede-cupo{font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--text-dim);margin:0 0 10px;}
.sede-herramientas{display:grid;gap:14px;margin-bottom:16px;padding:14px;border:1px dashed var(--border);border-radius:var(--r-lg);}
.sede-herramienta-fila{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0;}
.sede-pegar summary{cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);}
.sede-pegar textarea{margin:10px 0 6px;font-family:var(--mono);font-size:12px;}
.sede-pegado-resultado{margin-top:10px;font-size:12px;line-height:1.6;}
.sede-pegado-ok{color:var(--ok, #3fb68b);}
.sede-pegado-falta{color:var(--warn, #e0a030);margin-top:4px;word-break:break-word;}
.reservas-filtro{margin-bottom:12px;max-width:260px;}
.reserva-sede{font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--accent);font-weight:700;}
.tv-interruptor{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right;}
.tv-interruptor-ayuda{font-size:11px;color:var(--text-dim);line-height:1.4;max-width:300px;}
@media (max-width:640px){.tv-interruptor{align-items:flex-start;text-align:left;}}
.inicio-sedes{border-color:var(--accent);}
.inicio-sedes-lista{display:grid;gap:8px;margin:12px 0 10px;}
.inicio-sede-fila{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;padding:8px 0;border-top:1px solid var(--border);}
.inicio-sede-fila:first-child{border-top:0;}
.inicio-sede-nombre{font-size:14px;}
.inicio-sede-enlace{font-family:var(--mono);font-size:12px;color:var(--accent);word-break:break-all;}
.inicio-sede-dato{font-size:12px;color:var(--text-muted);}
.inicio-sede-dato.falta{color:var(--warn);font-weight:700;}
.inicio-sedes-donde{font-size:11px;color:var(--text-dim);line-height:1.6;margin:0;}

/* Ajustes y ficha de producto: controles más claros y táctiles. */
.aj-secciones{gap:10px;padding:4px 2px 10px;}.aj-seccion-tab{min-height:46px;padding:11px 19px;border-color:color-mix(in srgb,var(--accent) 26%,var(--border));background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--card) 84%,var(--accent) 7%));color:var(--text);font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.5px;box-shadow:0 2px 7px rgba(59,35,17,.04);transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease,color .22s ease;}.aj-seccion-tab:hover{border-color:color-mix(in srgb,var(--accent) 70%,var(--border));background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 15%,var(--card)),color-mix(in srgb,var(--accent) 6%,var(--card)));color:var(--accent-texto);box-shadow:0 9px 20px var(--accent-glow);transform:translateY(-2px) scale(1.018);}.aj-seccion-tab.active{border-color:var(--accent);background:linear-gradient(135deg,var(--accent),#f68a16);color:#fff;box-shadow:0 7px 18px var(--accent-glow);}.aj-seccion-tab.active:hover{background:linear-gradient(135deg,#f4810c,#ff9e35);color:#fff;}.aj-seccion-tab:active{transform:translateY(0) scale(.98);}

#productModal{z-index:650;}#productModal .modal-box{max-width:650px;border-color:color-mix(in srgb,var(--accent) 24%,var(--border2));box-shadow:0 24px 70px rgba(39,23,10,.34);overflow:hidden;}#productModal .modal-head{gap:12px;padding:16px 20px;background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 92%,var(--accent) 8%),var(--panel));}#productModal .modal-title{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;background:linear-gradient(135deg,#5b341b,#7b4a28);color:#fff;font-family:var(--sans);font-size:11px;font-weight:900;letter-spacing:.55px;box-shadow:0 6px 15px rgba(74,40,18,.3);transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;}#productModal .modal-title:hover{filter:brightness(1.12);box-shadow:0 9px 20px rgba(74,40,18,.4);transform:translateY(-1px);}.modal-ver-carta{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border:1px solid color-mix(in srgb,var(--accent) 48%,var(--border));border-radius:999px;background:var(--accent-dim);color:var(--accent-texto);font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.1px;box-shadow:0 3px 10px var(--accent-glow);transition:transform .2s ease,background .2s ease,box-shadow .2s ease;}.modal-ver-carta:hover{background:color-mix(in srgb,var(--accent) 20%,var(--card));text-decoration:none;transform:translateY(-1px);box-shadow:0 7px 15px var(--accent-glow);}.modal-close{width:38px;height:38px;flex:0 0 38px;border-radius:50%;border-color:color-mix(in srgb,var(--accent) 42%,var(--border));background:var(--accent-dim);color:var(--accent-texto);font-family:var(--sans);font-size:18px;font-weight:700;}.modal-close:hover{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 7px 15px var(--accent-glow);transform:rotate(90deg) scale(1.04);}.modal-close:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 55%,white);outline-offset:2px;}
#productModal .ficha-tabs{gap:8px;padding:10px 20px;background:var(--panel);overflow-x:auto;border-bottom-color:color-mix(in srgb,var(--accent) 20%,var(--border));scrollbar-width:none;}#productModal .ficha-tabs::-webkit-scrollbar{display:none;}#productModal .ficha-tab{flex:1 0 auto;min-height:38px;padding:8px 13px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--text-muted);font-family:var(--sans);font-size:10px;font-weight:900;letter-spacing:.45px;transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease;}#productModal .ficha-tab:hover:not(.active){border-color:color-mix(in srgb,var(--accent) 32%,var(--border));background:var(--accent-dim);color:var(--accent-texto);transform:translateY(-1px);}#productModal .ficha-tab.active{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 5px 13px var(--accent-glow);}
#productModal .modal-body{padding:22px 24px 14px;background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 97%,var(--accent) 3%),var(--panel));}#productModal .form-label{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.08px;text-transform:none;color:var(--text);}#productModal .form-label span{font-weight:600;}#productModal .form-input,#productModal .form-textarea,#productModal .form-select{border-color:color-mix(in srgb,var(--accent) 17%,var(--border));font-family:var(--sans);font-weight:600;}#productModal .form-input:focus,#productModal .form-textarea:focus,#productModal .form-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);}#productModal .producto-imagenes-adicionales{border:1px solid color-mix(in srgb,var(--accent) 18%,var(--border));border-radius:14px;background:var(--card);padding:0;overflow:hidden;}#productModal .producto-imagenes-adicionales summary{padding:13px 14px;font-family:var(--sans);font-size:12px;font-weight:850;color:var(--text);cursor:pointer;}#productModal .producto-imagenes-adicionales[open] summary{border-bottom:1px solid var(--border);}#productModal .producto-imagenes-adicionales .img-gallery{padding:12px 14px 0;margin:0;}#productModal .img-gallery-item,#productModal .img-gallery-add{width:82px;height:82px;border-radius:12px;}#productModal .img-gallery-item img{object-fit:contain;background:var(--panel);}.img-gallery-item:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 7px 15px rgba(50,27,10,.16);}.img-gallery-item{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
#productModal .modal-foot{padding:14px 24px calc(18px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--panel) 94%,var(--accent) 6%);border-top-color:color-mix(in srgb,var(--accent) 20%,var(--border));}#productModal .btn-cancel{min-height:42px;padding:10px 18px;border-color:color-mix(in srgb,var(--text-muted) 52%,var(--border));background:var(--card);color:var(--text);font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.15px;box-shadow:0 2px 8px rgba(0,0,0,.05);}#productModal .btn-cancel:hover{border-color:var(--accent);background:var(--accent-dim);color:var(--accent-texto);transform:translateY(-1px);}#productModal .btn-save{min-height:42px;font-family:var(--sans);font-size:11px;font-weight:900;}
/* El enlace de la carta es una acción del encabezado, no parte del título.
   Se centra de verdad respecto a toda la ficha; antes quedaba centrado solo
   en el espacio libre entre título y cierre, por eso se veía corrido. */
#productModal .modal-head{position:relative;display:flex;align-items:center;min-height:68px;}
#productModal .modal-head-titulo{min-width:0;position:relative;z-index:1;}
#productModal .modal-ver-carta{position:absolute;top:50%;left:50%;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;margin:0;padding:0 16px;border-color:#ed8a31;background:#fff9f3;color:#6b3514;font-family:'Montserrat',var(--sans);font-size:12px;font-weight:850;letter-spacing:.08px;line-height:1;box-shadow:0 4px 11px rgba(117,61,20,.16);transform:translate(-50%,-50%);}
#productModal .modal-ver-carta svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}
#productModal .modal-ver-carta:hover{background:#fff1e4;color:#8a420d;box-shadow:0 8px 16px rgba(117,61,20,.23);transform:translate(-50%,calc(-50% - 2px));}
#productModal .modal-close{position:relative;z-index:1;margin-left:auto;}
@media (width <= 480px){#productModal .modal-head{display:grid;grid-template-columns:minmax(0,1fr) auto;min-height:105px;row-gap:9px;}#productModal .modal-close{grid-column:2;grid-row:1;margin-left:0;}#productModal .modal-ver-carta{position:static;grid-column:1 / -1;grid-row:2;justify-self:center;transform:none;}#productModal .modal-ver-carta:hover{transform:translateY(-2px);}}
@media(max-width:640px){body.modal-producto-abierto .topbar{visibility:hidden;pointer-events:none;}#productModal{padding:0;align-items:stretch;}#productModal .modal-box{width:100%;max-width:none;max-height:none;height:100dvh;border:0;border-radius:0;display:flex;flex-direction:column;transform:translateY(18px);}#productModal .modal-head{position:relative;flex:0 0 auto;padding:14px 16px;}#productModal .modal-head-titulo{min-width:0;gap:8px;}#productModal .modal-title{max-width:calc(100vw - 152px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}#productModal .modal-ver-carta{max-width:calc(100vw - 132px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}#productModal .ficha-tabs{flex:0 0 auto;padding:9px 12px;gap:6px;}#productModal .ficha-tab{min-width:102px;flex:1 0 auto;}#productModal .modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:18px 16px 12px;}#productModal .modal-foot{flex:0 0 auto;padding:12px 16px calc(12px + env(safe-area-inset-bottom));}#productModal .producto-foto .img-edit-wrap[data-formato="vertical"]{height:min(54vh,320px);max-width:100%;}#productModal .img-gallery-item,#productModal .img-gallery-add{width:76px;height:76px;}}
@media(prefers-reduced-motion:reduce){.aj-seccion-tab,#productModal .modal-title,.modal-ver-carta,.modal-close,#productModal .ficha-tab,.img-gallery-item,#productModal .btn-cancel{transition:none!important;}}
.pres-bloque{margin-top:14px;padding-top:12px;border-top:1px dashed var(--border);}
.pres-ayuda{font-size:12px;color:var(--text-muted);line-height:1.5;margin:10px 0 12px;}
.pres-fila{display:grid;grid-template-columns:1fr 130px auto;gap:8px;align-items:center;margin-bottom:8px;}
.pres-resumen{margin-top:10px;font-family:var(--mono);font-size:12px;line-height:1.5;}
.pres-precio-derivado{opacity:.7;cursor:default;}
@media (max-width:520px){.pres-fila{grid-template-columns:1fr 100px auto;}}
/* La ficha del plato en pantallas de escritorio: el cuadro corta lo que sobra (overflow:hidden, por las esquinas
   redondeadas) y nada hacía scroll, así que con una ventana baja lo de abajo —sobre todo las presentaciones—
   quedaba inalcanzable. Aquí scrollea el cuerpo y la cabecera, las pestañas y los botones se quedan. En móvil
   ya era así (más arriba). */
@media(min-width:641px){#productModal .modal-box{display:flex;flex-direction:column;}#productModal .modal-head,#productModal .ficha-tabs,#productModal .modal-foot{flex:0 0 auto;}#productModal .modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;}}

/* ── TIPO DE NEGOCIO (24/10/2026) ── */
/* Con tipo «turismo» (public/turismo.js pone la clase en el <body>) se esconde lo que solo tiene sentido con comida.
   !important porque algunos de estos elementos los muestra o esconde su propio código con style.display. */
body.tipo-turismo .solo-restaurante,body.tipo-turismo #ajFiltrosCard{display:none!important;}
/* Lo contrario: solo con turismo (el icono de Planes es una brújula, no un tenedor). */
.tab-ico.solo-turismo{display:none;}
body.tipo-turismo .tab-ico.solo-turismo{display:inline-block;}
.tur-ficha-t{font-size:13px;font-weight:700;margin-bottom:12px;}
.tur-rejilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px;}
.tur-campo .form-label{display:block;margin-bottom:6px;}
.tur-ancho{margin-bottom:12px;}
@media (max-width:560px){.tur-rejilla{grid-template-columns:1fr;}}

/* ── PRIMERA PANTALLA DEL VIDEO Y COLOR DE CATEGORÍA (24/10/2026) ── */
.pres-colores { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-bottom: 14px; }
.pres-color-fila, .cat-color-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pres-color-input, .cat-color-input { width: 46px; height: 38px; padding: 2px; border: 1px solid var(--border2); border-radius: 10px; background: var(--card); cursor: pointer; }
.cat-color-hex { font-family: var(--mono); font-size: 12px; color: var(--text-muted); min-width: 92px; }
.pres-vista { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; background: #111; }
.pres-vista-t { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.carrito-vista { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.pres-vista-boton { min-height: 44px; padding: 0 22px; border: none; border-radius: 999px; font: 700 15px/1 inherit; font-family: inherit; pointer-events: none; }
.cat-color-sugeridos { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.cat-color-grupo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cat-color-grupo-t { min-width: 78px; font-size: 11px; color: var(--text-dim); }
.cat-color-muestra { width: 28px; height: 28px; padding: 0; border: 2px solid transparent; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.cat-color-muestra.elegida { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.cat-color-muestra:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }