/* ===================================================================
   TAGGER · sistema visual
   Marca: navy profundo + rosa eléctrico + menta + morado + amarillo.
   Firma: la "señal NFC" (arcos concéntricos) como marca y afordancia de tap.
   Tipos: Space Grotesk (display) · Inter (texto)
   =================================================================== */
:root{
  --navy:#1b1a4e; --navy-2:#131233; --surface:#262560;
  --pink:#ff2e6e; --mint:#2fe0a8; --grape:#7c5cff; --gold:#ffc23c;
  /* Acentos por defecto para el CMS (en .public se redefinen por tema) */
  --accent:var(--pink); --purple:var(--grape);
  --paper:#f6f5fb; --line:rgba(255,255,255,.12); --muted:#b9b7e0;
  --radius:18px; --maxw:480px;
  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);background:var(--navy);color:#fff;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;margin:0 0 .3em;line-height:1.1}
img{max-width:100%;display:block}

/* ---- Marca / señal NFC ---- */
.brand{font-family:var(--font-display);font-weight:700;font-size:1.4rem;display:inline-flex;align-items:center;gap:.4em}
.brand b{font-weight:700}
.signal{display:inline-block;width:1em;height:1em;position:relative}
.signal::before,.signal::after{content:"";position:absolute;left:50%;bottom:0;border:2.5px solid var(--mint);border-bottom:none;border-radius:50% 50% 0 0;transform:translateX(-50%)}
.signal::before{width:.5em;height:.25em}
.signal::after{width:1em;height:.5em;opacity:.6}

/* ---- Botones ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--font-body);font-weight:600;font-size:1rem;padding:.85em 1.3em;border-radius:14px;border:0;cursor:pointer;transition:transform .08s,filter .15s;width:100%}
.btn:hover{transform:translateY(-1px)}
.btn-pink{background:var(--pink);color:#fff}
.btn-mint{background:var(--mint);color:#06281d}
.btn-grape{background:var(--grape);color:#fff}
.btn-ghost{background:transparent;border:1px solid var(--line);color:#fff}
.btn-sm{width:auto;padding:.55em .9em;font-size:.85rem;border-radius:10px}

/* ---- Layout central (mobile-first) ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}
.center-page{min-height:100vh;display:flex;flex-direction:column}
.eyebrow{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.18em;font-size:.7rem;color:var(--mint)}

/* ---- Mensajes ---- */
.messages{position:fixed;top:80px;left:50%;transform:translateX(-50%);z-index:2000;width:auto;max-width:92%;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.msg{pointer-events:auto;padding:.85em 1.3em;border-radius:12px;margin:0;font-size:.92rem;background:#1a1a2e;color:#fff;border:1px solid rgba(255,255,255,.15);box-shadow:0 14px 34px rgba(0,0,0,.5);text-align:center;cursor:pointer;max-width:520px;animation:toastin .25s ease}
@keyframes toastin{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.msg.success{border-color:#2fe0a8;color:#fff}
.msg.error,.msg.warning{border-color:#ffc23c;color:#fff}

/* ===================== PERFIL PÚBLICO ===================== */
/* El tema del cliente sobreescribe estas variables vía style inline. */
.public{
  /* 5 colores del tema (el cliente los sobreescribe inline). Todo lo demás deriva de aquí. */
  --bg:var(--navy);          /* 1. fondo */
  --title-c:#fff;            /* 2. títulos */
  --sub-c:var(--title-c);    /* 2b. subtítulos (hereda títulos si no se elige) */
  --text:#fff;               /* 3. textos */
  --card:var(--pink);        /* 4. tarjetas y botones (un solo color) */
  --glow:var(--grape);       /* 5. brillo de las transparencias */
  --accent2:var(--grape);    /* 2º color del degradé de botones (opcional) */
  /* Derivadas: el acento (íconos/bordes) sigue al color de tarjeta; la superficie es un tinte suave. */
  --accent:var(--card);
  --surface:color-mix(in srgb,var(--card) 13%,var(--bg));
  --accent-text:#fff;--brad:16px;
  background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}
.public .wrap{padding-bottom:60px}
.cover{height:380px;background-size:cover;background-position:center;background-color:var(--bg);position:relative;margin-bottom:-2px}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,transparent 46%,var(--bg) 86%,var(--bg) 100%)}
.p-head{margin-top:-96px;text-align:center;position:relative;z-index:2}
.avatar{width:120px;height:120px;border-radius:50%;object-fit:cover;margin:0 auto;border:4px solid var(--accent);background:var(--surface)}
.avatar.ph{display:grid;place-items:center;font-family:var(--font-display);font-size:2.6rem;color:var(--accent)}
.p-title{font-size:1.8rem;margin-top:14px;color:var(--title-c)}
.p-sub{color:var(--sub-c);font-weight:600;margin-top:-4px}
.p-bio{color:var(--text);opacity:.85;font-size:.95rem;margin-top:8px}
.status{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-display);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;padding:.35em .8em;border-radius:999px;border:1px solid var(--line);margin-top:10px}
.status .dot{width:8px;height:8px;border-radius:50%;background:var(--mint);position:relative}
.status .dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--mint);animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.9);opacity:0}}
@media(prefers-reduced-motion:reduce){.status .dot::after{animation:none}}

.block{margin-top:22px}
.block h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;opacity:.6;margin-bottom:10px;font-family:var(--font-display);color:var(--title-c)}

/* social: fila de íconos redondos */
.social-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.social-row a{width:52px;height:52px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-size:1.5rem;border:1px solid var(--line)}

/* links: botones grandes */
.link-btn{display:flex;align-items:center;gap:14px;background:var(--accent);color:var(--accent-text);border-radius:var(--brad);padding:16px 18px;margin-bottom:12px;font-weight:600}
.link-btn .ico{font-size:1.4rem;flex:none}
.link-btn .lbl{flex:1;min-width:0}
.link-btn .lbl small{display:block;font-weight:400;opacity:.85;font-size:.8rem}
.link-btn.alt{background:var(--surface);color:var(--text);border:1px solid var(--line)}

/* grid info / acciones secundarias */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.info-cell{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:13px 15px;text-align:left}
.info-cell .k{display:flex;align-items:center;gap:5px;font-size:.6rem;opacity:.5;text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.info-cell .k .iconify{font-size:.85rem;opacity:.9}
.info-cell .v{font-weight:600;font-size:.98rem;margin-top:4px;line-height:1.45}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gallery img{aspect-ratio:1;object-fit:cover;border-radius:12px}

/* maintenance bitácora */
.log{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:8px;display:flex;justify-content:space-between}
.log .when{opacity:.6;font-size:.8rem}

/* lead form */
.leadform{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.leadform input{width:100%;padding:.7em;border-radius:10px;border:1px solid var(--line);background:rgba(0,0,0,.2);color:var(--text);margin-bottom:10px;font-family:inherit}

/* footer */
.made{text-align:center;margin-top:34px;display:flex;flex-direction:column;gap:7px;align-items:center;justify-content:center;text-decoration:none}
.made span{font-size:.5rem;letter-spacing:.22em;text-transform:uppercase;opacity:.4;color:var(--text)}
.made-logo{height:40px;width:auto;opacity:.95}

/* modo perdido (Pet) */
.public.lost{--bg:#3a0d12;--card:#ff2e3e;--accent:#ff2e3e;--glow:#ff2e3e;--surface:#5a1620}
.lost-banner{background:#ff2e3e;color:#fff;text-align:center;font-weight:700;padding:14px;border-radius:14px;margin-top:14px}

/* ===================== AUTH / ACTIVACIÓN ===================== */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.auth{max-width:420px;margin:40px auto;padding:0 18px}
.auth input{width:100%;padding:.8em;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.2);color:#fff;margin-bottom:12px;font-family:inherit}
.auth label{font-weight:600;font-size:.85rem;display:block;margin-bottom:5px}
.field{margin-bottom:12px}
.help{font-size:.78rem;opacity:.6;margin-top:4px}
.errorlist{color:var(--gold);font-size:.82rem;list-style:none;padding:0;margin:4px 0}

.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.type-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 16px;text-align:center;transition:border-color .15s,transform .08s}
.type-card:hover{border-color:var(--pink);transform:translateY(-2px)}
.type-card .emoji{font-size:2.2rem}
.type-card .name{font-family:var(--font-display);font-weight:700;margin-top:8px}

/* ===================== CMS / DASHBOARD ===================== */
.topbar{background:var(--navy-2);border-bottom:1px solid var(--line)}
.topbar .wrap{max-width:900px;display:flex;align-items:center;justify-content:space-between;height:60px}
.cms{max-width:900px;margin:0 auto;padding:24px 18px 80px}
.dash-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:14px;display:flex;align-items:center;gap:16px}
.dash-card .thumb{width:54px;height:54px;border-radius:14px;background:var(--navy-2);display:grid;place-items:center;font-size:1.6rem;flex:none}
.dash-card .meta{flex:1;min-width:0}
.dash-card .stats{display:flex;gap:16px;font-size:.85rem;opacity:.75}
.pill{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;padding:.25em .7em;border-radius:999px;border:1px solid var(--line)}
.pill.on{background:var(--mint);color:#06281d;border-color:transparent}
.pill.off{opacity:.6}

.editor-grid{display:grid;grid-template-columns:1fr;gap:16px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.panel h2{font-size:1.05rem}
.panel input,.panel select,.panel textarea{width:100%;padding:.65em;border-radius:10px;border:1px solid var(--line);background:rgba(0,0,0,.2);color:#fff;margin-bottom:10px;font-family:inherit}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.block-item{background:var(--navy-2);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:10px}
.block-item .bhead{display:flex;align-items:center;gap:10px;justify-content:space-between}
.handle{cursor:grab;opacity:.5}
.btn-list{margin-top:10px;padding-left:6px;border-left:2px solid var(--line)}
.btn-row{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:.9rem}
.tag-lock{font-size:.65rem;color:var(--gold);border:1px solid var(--gold);border-radius:6px;padding:1px 6px}
.inline-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.title-toggle-btn{font-weight:700;font-size:.75rem;letter-spacing:.02em;min-width:30px}
.title-toggle-btn.title-hidden{opacity:.35;text-decoration:line-through}
.muted{opacity:.6}
.divider{height:1px;background:var(--line);border:0;margin:16px 0}

/* ---- Mejoras editor: selector de color ---- */
.panel input[type=color]{-webkit-appearance:none;appearance:none;height:44px;padding:3px;cursor:pointer}
.panel input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.panel input[type=color]::-webkit-color-swatch{border:none;border-radius:7px}
.panel input[type=color]::-moz-color-swatch{border:none;border-radius:7px}

/* ---- Campos de archivo (avatar/portada) ---- */
.filefield .thumb-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.thumb-prev{width:64px;height:64px;border-radius:12px;object-fit:cover;border:1px solid var(--line);background:var(--navy-2)}
.clear-chk{font-size:.8rem;display:flex;align-items:center;gap:6px;cursor:pointer}
.panel input[type=file].file-in{font-size:.82rem;padding:8px;background:rgba(0,0,0,.15)}

/* ---- Ficha pública: celda ancha para textos largos ---- */
.info-cell.wide{grid-column:1/-1;text-align:left}
.info-cell .v a{color:var(--accent);word-break:break-word}

/* ---- Video embebido dentro del perfil ---- */
.video-wrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--brad);overflow:hidden;margin-bottom:12px;background:#000}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-embed{width:100%;border-radius:var(--brad);margin-bottom:12px;background:#000;display:block}

/* ---- Indicadores de completitud ---- */
.badge-done{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--mint);color:#06281d;padding:.18em .6em;border-radius:999px;margin-left:6px}
.badge-empty{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:transparent;color:var(--gold);border:1px solid var(--gold);padding:.16em .55em;border-radius:999px;margin-left:6px}

/* ---- Selector visual de íconos ---- */
.icon-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:8px;margin-top:6px;transition:max-height .2s ease}
.icon-picker.collapsed{max-height:46px;overflow:hidden}
.icon-toggle{margin-top:8px}
.icon-opt{height:46px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.2);color:#fff;font-size:1.4rem;display:grid;place-items:center;cursor:pointer;transition:border-color .12s,transform .08s}
.icon-opt:hover{transform:translateY(-1px);border-color:var(--grape)}
.icon-opt.active{border-color:var(--pink);background:rgba(255,46,110,.15)}

/* ---- Gestor de galería (editor) ---- */
.gallery-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:8px}
.g-thumb{background:var(--navy-2);border:1px solid var(--line);border-radius:12px;padding:8px}
.g-thumb img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;margin-bottom:6px}
.g-thumb input{width:100%;font-size:.78rem;padding:6px;margin-bottom:6px;border-radius:8px;border:1px solid var(--line);background:rgba(0,0,0,.2);color:#fff}

/* ---- Carrusel de galería (perfil público) ---- */
.carousel{position:relative}
.carousel .slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;scrollbar-width:none;border-radius:var(--brad)}
.carousel .slides::-webkit-scrollbar{display:none}
.carousel .slide{flex:0 0 100%;scroll-snap-align:center;margin:0}
.carousel .slide img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--brad);background:var(--surface)}
.carousel .slide figcaption{text-align:center;font-size:1.2rem;font-weight:700;color:var(--title-c,var(--text));opacity:1;margin-top:10px}
.car-nav{position:absolute;top:38%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.car-nav.prev{left:8px}
.car-nav.next{right:8px}

/* ---- Apariencia: fila de degradé (toggle + 2º color) ---- */
.grad-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:rgba(0,0,0,.2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:12px 0 2px}
.grad-row input[type=color]{width:42px;height:34px;margin:0;padding:2px;flex:none}

/* ---- Selector visual de tipografía (una línea + dropdown) ---- */
.font-drop{margin:6px 0 0}
.font-current{list-style:none;cursor:pointer;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:rgba(0,0,0,.2);color:#fff;font-size:1.1rem;display:flex;align-items:center;justify-content:space-between}
.font-current::-webkit-details-marker{display:none}
.font-current::after{content:"▾";font-size:.9rem;opacity:.7;margin-left:10px}
.font-drop[open] .font-current::after{content:"▴"}
.font-drop[open] .font-current{border-color:var(--grape);border-radius:12px 12px 0 0}
.font-drop[open] .font-picker{max-height:320px;overflow-y:auto;border:1px solid var(--grape);border-top:none;
  border-radius:0 0 12px 12px;padding:8px;margin:0}
.font-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin:6px 0 12px}
.font-opt{padding:14px 10px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.2);color:#fff;font-size:1.15rem;line-height:1.1;cursor:pointer;text-align:center;transition:border-color .12s,transform .08s;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.font-opt:hover{transform:translateY(-1px);border-color:var(--grape)}
.font-opt.active{border-color:var(--pink);background:rgba(255,46,110,.15)}

/* La tipografía elegida en Apariencia manda en TODO el perfil (títulos, botones, datos) */
.public h1,.public h2,.public h3,.public .p-title,.public .p-sub,
.public .btn,.public .link-btn,.public .info-cell .v,.public .leadform h3{font-family:inherit}

/* Casillas junto a su texto (no estirarlas al 100%) */
.panel input[type=checkbox],.auth input[type=checkbox],.leadform input[type=checkbox]{width:auto;flex:none;margin:0;min-width:0}

/* Portada amplia tipo hero: la foto va detrás de todo el encabezado y se difumina antes de la info */

/* Botones con color o degradé (según Apariencia) */
.public .link-btn{background:var(--btn-bg,var(--accent))}

/* Fichas de información: ícono en círculo + texto (estilo ordenado) */
.info-cell{display:flex;align-items:center;gap:13px;text-align:left;min-width:0}
.info-cell .ic{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:1.25rem;color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.info-cell .txt{min-width:0;flex:1}
.info-cell.wide{grid-column:1/-1}
.video-fallback{display:inline-block;font-size:.78rem;opacity:.6;margin:-4px 0 12px;color:var(--text)}

/* Casillas pegadas a su texto, en cualquier formulario */
.chk{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.chk input[type=checkbox]{width:18px!important;height:18px;flex:0 0 18px;margin:0}

/* Tabla de horario en el perfil */
.sched-card .txt{flex:1}
table.sched{width:100%;border-collapse:collapse;margin-top:6px}
table.sched td{padding:5px 0;font-size:.95rem;border-bottom:1px solid color-mix(in srgb,var(--text) 12%,transparent)}
table.sched tr:last-child td{border-bottom:none}
table.sched .sched-d{font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.82rem;opacity:.85}
table.sched .sched-h{text-align:right;font-variant-numeric:tabular-nums}
table.sched tr.is-closed{opacity:.5}

/* Editor de horario por día */
/* Sección colapsable del editor (details/summary, sin JS) */
.collapse>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:10px}
.collapse>summary::-webkit-details-marker{display:none}
.collapse>summary h2{margin:0}
.collapse-caret{font-size:1.5rem;opacity:.55;transition:transform .2s}
.collapse[open] .collapse-caret{transform:rotate(180deg)}

.sched-edit{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.sched-erow{display:flex;flex-direction:column;gap:6px;padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.07)}
.sched-erow:last-child{border-bottom:0}
.sched-etop{display:flex;align-items:center;gap:14px}
.sched-eday{min-width:88px;font-weight:600}
.sched-etop .chk{min-width:96px}
.sched-etimes{display:flex;align-items:center;gap:8px}
.sched-etimes input[type=time]{flex:1;min-width:0;width:auto}

/* Logo (SVG) en la barra del editor */
.brand-logo{display:inline-flex;align-items:center}
.brand-logo img{height:30px;width:auto;display:block}

/* Título del formulario de leads, fuera del recuadro */
.lead-title{font-size:1.1rem;font-weight:700;margin:0 0 10px;color:var(--title-c,var(--text))}

/* Botones avanzados: glow animado + color de hover */
.public .link-btn{position:relative;overflow:hidden;transition:box-shadow .25s ease, transform .2s ease}
.public .link-btn:hover{transform:translateY(-1px)}
.public .link-btn > *{position:relative;z-index:1}
.public .link-btn[style*="--hover"]::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--hover);opacity:0;transition:opacity .3s ease;z-index:0}
.public .link-btn[style*="--hover"]:hover::after{opacity:1}
@keyframes glowpulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent)}
  50%{box-shadow:0 0 22px 5px color-mix(in srgb,var(--accent) 60%,transparent)}
}
.public .link-btn.glow{animation:glowpulse 1.8s ease-in-out infinite}

/* 'Califica tu mesero' es un <button>: igualarlo a los <a> (ancho y texto) */
.public button.link-btn{-webkit-appearance:none;appearance:none;width:100%;
  border:none;font-size:inherit;font-family:inherit;text-align:left;cursor:pointer;box-sizing:border-box}

/* Separador */
.pub-separator{height:1px;background:rgba(255,255,255,.15);margin:4px 0 16px;border-radius:1px}

/* Acordeón */
.accordion-item{margin-bottom:12px}
.accordion-item .link-btn{margin-bottom:0;width:100%;box-sizing:border-box}
.acc-toggle-icon{margin-left:auto;flex:none;font-size:1.3rem;font-weight:300;line-height:1;transition:transform .22s ease;width:20px;text-align:center}
.accordion-trigger[aria-expanded="true"]{border-radius:var(--brad) var(--brad) 0 0}
.accordion-body{background:#fff;border-radius:0 0 var(--brad) var(--brad);padding:16px 18px;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.07);box-sizing:border-box;width:100%}
.accordion-body.acc-open{animation:accOpen .22s cubic-bezier(.4,0,.2,1)}
.accordion-body.acc-closing{animation:accClose .22s cubic-bezier(.4,0,.2,1) forwards}
@keyframes accOpen{from{opacity:0;transform:translateY(-8px) scaleY(.96);transform-origin:top}to{opacity:1;transform:translateY(0) scaleY(1)}}
@keyframes accClose{from{opacity:1;transform:translateY(0) scaleY(1);transform-origin:top}to{opacity:0;transform:translateY(-8px) scaleY(.96)}}
.acc-img{width:100%;border-radius:8px;margin-bottom:12px;display:block}
.acc-img-after{margin-top:12px;margin-bottom:0}
.acc-text{margin:0;line-height:1.65;white-space:pre-wrap;color:#222;font-size:.95rem}

/* Contorno: solo el bloque de Acciones (el que tiene 'Califica tu mesero') */
.public .outlined-block .link-btn{border:2px solid rgba(8,6,28,.6)}

/* Acciones de cada foto de galería (reordenar / eliminar) */
.g-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.g-actions form{display:inline}
.g-actions .btn-sm{padding:4px 9px}

/* Formulario de leads: teléfono internacional, fecha y consentimiento */
.leadform select{width:100%;padding:.7em;border-radius:10px;border:1px solid var(--line);background:rgba(0,0,0,.2);color:var(--text);margin-bottom:10px;font-family:inherit}
.phone-row{display:flex;gap:8px}
.phone-row .cc-select{flex:0 0 44%;max-width:44%}
.phone-row input[type=tel]{flex:1}
.lead-bday{display:block;font-size:.82rem;opacity:.85;margin:2px 0 4px;text-align:left}
.lead-bday input{margin-top:4px}
.lead-consent{display:flex;align-items:flex-start;gap:8px;font-size:.84rem;line-height:1.35;margin:6px 0 12px;text-align:left;opacity:.92}
.lead-consent input[type=checkbox]{width:18px;height:18px;flex:0 0 18px;margin-top:2px}
.lead-consent a{color:var(--accent);text-decoration:underline}

/* Listado de leads agrupado por mes/año */
.leads-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0}
.leads-bar .pill{padding:6px 12px;border-radius:999px;border:1px solid var(--line);font-size:.85rem;text-decoration:none;color:var(--text)}
.leads-bar .pill.active{background:var(--accent);color:#fff;border-color:transparent}
.lead-month{margin:18px 0 8px;font-weight:700;text-transform:capitalize}
.lead-month .muted{font-weight:400;font-size:.85rem}
/* Datos de leads: cada lead como fila-tarjeta (nombre arriba, datos abajo) */
.lead-item{padding:10px 0;border-bottom:1px solid var(--line)}
.lead-item:last-child{border-bottom:none}
.lead-name{font-weight:600;font-size:.92rem;margin-bottom:3px}
.lead-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;
  font-size:.82rem;color:var(--muted,rgba(255,255,255,.6))}
.lead-meta .lead-email{overflow-wrap:anywhere;word-break:break-word}
.lead-meta .lead-date{margin-left:auto;white-space:nowrap;opacity:.8}

/* Leads · pestaña DATOS: filtros (pills + selects) */
.pill-f{padding:6px 12px;border-radius:999px;border:1px solid var(--line);font-size:.85rem;text-decoration:none;color:var(--text)}
.pill-f.active{background:var(--accent);color:#fff;border-color:transparent}
.lead-filter{display:inline-flex;gap:8px}
.lead-filter select{background:var(--surface);border:1px solid var(--line);color:var(--text);
  border-radius:999px;padding:6px 12px;font-size:.85rem;font-weight:600;cursor:pointer}
.lead-filter select option{background:var(--navy-2);color:#fff}

/* Leads · pestaña RESUMEN */
.lead-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0}
.lead-stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 16px;text-align:center}
.lead-stat .ls-num{font-size:2rem;font-weight:800;line-height:1.1;
  background:linear-gradient(135deg,var(--pink),var(--grape));-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent}
.lead-stat .ls-num.ls-num-sm{font-size:1.25rem}
.lead-stat .ls-lbl{font-size:.8rem;color:var(--muted);margin-top:6px}
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}
.lead-h{font-size:1rem;font-weight:700;margin:0 0 8px}
.wk-bars{display:flex;flex-direction:column;gap:8px}
.wk-row{display:flex;align-items:center;gap:10px;font-size:.85rem}
.wk-day{width:84px;flex:none}
.wk-track{flex:1;height:10px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.wk-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--pink),var(--grape))}
.wk-count{width:28px;text-align:right;flex:none}
.ia-box{margin:14px 0;border:1px dashed var(--grape);border-radius:var(--radius);
  padding:18px 20px;background:rgba(124,92,255,.06)}
.ia-head{display:flex;align-items:center;gap:8px;font-weight:700;margin-bottom:6px}
.ia-head .iconify{font-size:1.3rem;color:var(--grape)}

/* Leads · pestaña ENVIAR MENSAJES (campañas) */
.campaign-seg{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.cf-field{display:flex;flex-direction:column;gap:5px;font-size:.85rem}
.cf-field>span{font-weight:600;color:var(--muted)}
.cf-field select,.cf-range input,.campaign-compose input,.campaign-compose textarea{
  background:var(--surface);border:1px solid var(--line);color:var(--text);
  border-radius:10px;padding:9px 12px;font-size:.9rem;width:100%}
.cf-field select option{background:var(--navy-2);color:#fff}
.cf-range{display:flex;gap:8px}
.campaign-actions{display:flex;align-items:center;gap:12px}
.campaign-count{display:flex;align-items:baseline;gap:8px;border-top:1px solid var(--line);padding-top:14px}
.campaign-count .cc-num{font-size:1.8rem;font-weight:800;color:var(--grape)}
.campaign-preview{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cp-chip{font-size:.78rem;padding:3px 10px;border-radius:999px;
  background:rgba(124,92,255,.12);border:1px solid var(--line)}
.campaign-compose{display:flex;flex-direction:column;gap:10px}
.campaign-compose textarea{resize:vertical;line-height:1.5;font-family:inherit}
.campaign-compose .btn[disabled]{opacity:.5;cursor:not-allowed}
.camp-row{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:.88rem;border-bottom:1px solid var(--line)}
.camp-row:last-child{border-bottom:0}
.camp-subj{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.camp-status{font-size:.78rem;padding:3px 10px;border-radius:999px;border:1px solid var(--line);white-space:nowrap}
.camp-status.camp-done{color:var(--mint);border-color:var(--mint)}
.camp-status.camp-sending,.camp-status.camp-pending{color:var(--gold);border-color:var(--gold)}
.camp-status.camp-failed{color:var(--pink);border-color:var(--pink)}

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

/* Galería: la imagen es el "agarre" para arrastrar */
.gallery-thumbs .g-thumb img{cursor:grab}
.gallery-thumbs .g-thumb img:active{cursor:grabbing}
.sortable-ghost{opacity:.4}

/* Horario: reloj pequeño junto al título, tabla a todo el ancho */
.sched-card{align-items:flex-start}
.sched-card .txt{width:100%}
.sched-card .k{display:flex;align-items:center;gap:7px}
.sched-ic{color:var(--accent);font-size:1.05rem;flex:none}

/* ===== Analíticas ===== */
.insight{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,var(--surface)),var(--surface));border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin:14px 0;font-size:1rem;font-weight:600}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px}
.kpi-n{font-size:2.1rem;font-family:var(--font-display);font-weight:700;line-height:1}
.kpi.sm .kpi-n{font-size:1.6rem}
.kpi-l{color:var(--muted,#9aa);font-size:.82rem;margin-top:6px}
.kpi.accent{background:linear-gradient(135deg,var(--accent),var(--purple,#7c5cff));border-color:transparent}
.kpi.accent .kpi-n,.kpi.accent .kpi-l{color:#fff}
.editor-grid.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* Mini gráfico de barras */
.chart{display:flex;align-items:flex-end;gap:6px;height:170px;margin-top:10px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.bar-val{font-size:.72rem;color:var(--muted,#9aa)}
.bar{width:70%;min-height:3px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 55%,transparent))}
.bar-x{font-size:.7rem;color:var(--muted,#9aa)}
/* Filas tipo ranking con barra */
.rankrow{display:flex;align-items:center;gap:12px;margin:8px 0}
.rankname{flex:0 0 38%;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rankbarwrap{flex:1;height:10px;background:rgba(255,255,255,.06);border-radius:999px;overflow:hidden}
.rankbar{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--purple,#7c5cff))}
.rankn{flex:0 0 auto;min-width:28px;text-align:right}
/* Destacados */
.qr-panel{text-align:center}
.qr-box{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:8px}
.qr-img{background:#fff;border-radius:12px;padding:10px;width:220px;height:220px}
.panel.hl{display:flex;align-items:center;gap:14px}
.hl-ico{font-size:1.8rem;flex:none}
.hl-n{font-size:1.5rem;font-weight:700;font-family:var(--font-display);line-height:1.1}
.hl-n.txt{font-size:1.15rem;word-break:break-word}
/* Grilla de destacados (se adapta al ancho; mínimo 210px por tarjeta) */
.hl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.dev{display:flex;align-items:center;gap:12px}

/* Espaciado uniforme de la página de analíticas (evita paneles pegados) */
.analytics-page{display:flex;flex-direction:column;gap:16px}
.analytics-page>.kpi-grid,.analytics-page>.insight{margin:0}

/* Gráfico de área (visitas) en SVG */
.vchart-wrap{margin-top:10px}
.vchart{display:block;width:100%;height:170px}
.vchart-x{display:flex;justify-content:space-between;margin-top:6px;
  font-size:.7rem;color:var(--muted)}
.vchart-x span{flex:1;text-align:center}

/* Dona de dispositivos */
.donut-row{display:flex;align-items:center;gap:20px;margin-top:8px;flex-wrap:wrap}
.donut{--p:0;width:120px;height:120px;flex:none;border-radius:50%;position:relative;
  display:grid;place-items:center;
  background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--grape) 0)}
.donut::before{content:"";position:absolute;width:80px;height:80px;border-radius:50%;
  background:var(--surface)}
.donut-c{position:relative;text-align:center;line-height:1.05}
.donut-c strong{display:block;font-family:var(--font-display);font-size:1.5rem}
.donut-c span{font-size:.72rem;color:var(--muted)}
.donut-legend{display:flex;flex-direction:column;gap:8px;font-size:.92rem}
.donut-legend .dot{display:inline-block;width:11px;height:11px;border-radius:50%;
  margin-right:7px;vertical-align:middle}
.dot-a{background:var(--accent)}
.dot-b{background:var(--grape)}

/* Panel de quejas (analítica final) */
.quejas-n{color:var(--gold)}

@media (max-width:720px){.kpi-grid{grid-template-columns:1fr 1fr}.editor-grid.two{grid-template-columns:1fr}}

/* ───── KPIs profesionales (con ícono, título e iluminado) ───── */
.kpi2-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0}
.kpi2{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.kpi2-top{display:flex;align-items:center;gap:10px}
.kpi2-eyebrow{font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.14em;font-size:.68rem;color:var(--muted);font-weight:600}
.kpi2-n{font-size:2.1rem;font-family:var(--font-display);font-weight:700;line-height:1}
.kpi2.sm .kpi2-n{font-size:1.7rem}
.kpi2-l{color:var(--muted);font-size:.8rem;line-height:1.3}
/* Tarjeta destacada (conversión) con degradé de marca */
.kpi2.accent{background:linear-gradient(135deg,var(--grape),var(--pink));border-color:transparent}
.kpi2.accent .kpi2-eyebrow,.kpi2.accent .kpi2-l{color:rgba(255,255,255,.85)}
.kpi2.accent .kpi2-n{color:#fff}

/* Ícono en círculo (sistema de íconos SVG) */
.mic{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center}
.mic svg{width:20px;height:20px}
.mic.lg{width:46px;height:46px;border-radius:13px}
.mic.lg svg{width:24px;height:24px}
.mic-purple{color:var(--grape);background:color-mix(in srgb,var(--grape) 18%,transparent);
  box-shadow:0 0 16px -4px color-mix(in srgb,var(--grape) 70%,transparent)}
.mic-pink{color:var(--pink);background:color-mix(in srgb,var(--pink) 18%,transparent);
  box-shadow:0 0 16px -4px color-mix(in srgb,var(--pink) 70%,transparent)}
.mic-mint{color:var(--mint);background:color-mix(in srgb,var(--mint) 18%,transparent);
  box-shadow:0 0 16px -4px color-mix(in srgb,var(--mint) 70%,transparent)}
.mic-gold{color:var(--gold);background:color-mix(in srgb,var(--gold) 18%,transparent);
  box-shadow:0 0 16px -4px color-mix(in srgb,var(--gold) 70%,transparent)}
.mic-blue{color:#5cc8ff;background:color-mix(in srgb,#5cc8ff 18%,transparent);
  box-shadow:0 0 16px -4px color-mix(in srgb,#5cc8ff 70%,transparent)}
.mic-glass{color:#fff;background:rgba(255,255,255,.16)}

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

/* ───── Análisis Tagger IA (panel tecnológico, destacado) ───── */
.ai-panel{position:relative;overflow:hidden;border-radius:18px;margin:22px 0;
  background:
    radial-gradient(120% 150% at 100% 0%, color-mix(in srgb,var(--grape) 28%,transparent), transparent 55%),
    linear-gradient(135deg, color-mix(in srgb,var(--grape) 16%,var(--surface)), var(--surface) 72%);
  border:1px solid color-mix(in srgb,var(--grape) 40%,var(--line));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 20px 44px -24px color-mix(in srgb,var(--grape) 85%,#000)}
.ai-panel > *{position:relative;z-index:2}
/* borde superior con brillo animado */
.ai-panel::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:3;
  background:linear-gradient(90deg,transparent,var(--mint),var(--grape),var(--pink),transparent);
  background-size:200% 100%;animation:ai-sheen 5s linear infinite;opacity:.8}
@keyframes ai-sheen{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* capa de patrón (red neuronal plexus) al fondo, iluminación sutil */
.ai-pattern{position:absolute;left:0;right:0;bottom:0;height:300px;z-index:1;pointer-events:none;
  -webkit-mask-image:linear-gradient(to top,#000 35%,transparent);
  mask-image:linear-gradient(to top,#000 35%,transparent)}
.ai-pattern svg{width:100%;height:100%;display:block}
.ai-net-line{stroke:#bfe9ff;stroke-width:.7;fill:none;opacity:.12;
  animation:ai-flow 6s ease-in-out infinite}
@keyframes ai-flow{0%,100%{opacity:.07}50%{opacity:.18}}
.ai-net-node{fill:#eaf6ff;filter:url(#aiGlow);
  animation:ai-node 4.5s ease-in-out infinite}
@keyframes ai-node{0%,100%{opacity:.28}50%{opacity:.9}}
/* nodos "hot": cian brillante con resplandor más intenso */
.ai-net-node.hot{fill:#6fe7ff;animation-duration:3.4s}
@keyframes ai-nodehot{0%,100%{opacity:.4}50%{opacity:1}}
.ai-net-node.hot{animation-name:ai-nodehot}

.ai-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* placa de icono con glow */
.ai-ico{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:13px;color:#fff;flex:none;
  background:linear-gradient(135deg,var(--grape),var(--pink));
  box-shadow:0 0 20px color-mix(in srgb,var(--grape) 70%,transparent),
             inset 0 0 0 1px rgba(255,255,255,.22)}
.ai-ico .iconify{font-size:24px}
.ai-title{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:700}
.ai-title-tx{display:flex;flex-direction:column;line-height:1.18}
.ai-eyebrow{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.18em;
  font-size:.6rem;font-weight:700;color:var(--mint)}
.ai-title-tx b{font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
.ai-soon{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.1em;
  font-size:.65rem;font-weight:700;padding:.4em .85em;border-radius:999px;color:#fff;
  background:linear-gradient(135deg,var(--grape),var(--pink));
  box-shadow:0 0 14px color-mix(in srgb,var(--grape) 55%,transparent)}
.ai-desc{font-size:.92rem;margin:14px 0 16px;max-width:60ch}
.ai-skel{display:flex;flex-direction:column;gap:10px;max-width:60ch}
.ai-line{height:12px;border-radius:999px;width:100%;
  background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.13) 37%,rgba(255,255,255,.05) 63%);
  background-size:400% 100%;animation:ai-shimmer 1.6s ease infinite}
.ai-line.short{width:55%}
@keyframes ai-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ───── Selector de auditorías: dropdowns Año + Mes ───── */
.ai-picker{display:flex;gap:16px;flex-wrap:wrap;margin:6px 0 26px}
.ai-field{display:flex;flex-direction:column;gap:7px}
.ai-picker-lb{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.16em;
  font-size:.62rem;font-weight:700;color:var(--muted)}
.ai-select{appearance:none;-webkit-appearance:none;font-family:var(--font-display);
  font-weight:700;font-size:.9rem;color:#fff;cursor:pointer;min-width:140px;
  padding:.62em 2.4em .62em 1.05em;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--grape) 40%,var(--line));
  background:color-mix(in srgb,var(--grape) 14%,var(--surface))
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23b9b7e0'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E")
    no-repeat right .9em center;background-size:13px}
.ai-select:hover{border-color:color-mix(in srgb,var(--grape) 60%,var(--line))}
.ai-select:focus{outline:none;border-color:var(--grape);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--grape) 28%,transparent)}
.ai-select option{color:#111;background:#fff}

/* ───── Reporte IA generado (head con aire, texto elegante) ───── */
.ai-report-panel{padding:30px 42px 42px}
.ai-report-panel .ai-head{margin-bottom:8px;padding-bottom:22px;
  border-bottom:1px solid color-mix(in srgb,var(--grape) 14%,var(--line))}
.ai-report{font-size:.98rem}

/* Introducción / título principal del informe */
.air-intro{margin:26px 0 6px}
.air-intro h3{font-family:var(--font-display);font-size:1.55rem;font-weight:800;
  margin:0 0 .15em;letter-spacing:-.01em;line-height:1.2}
.air-intro p{color:var(--muted);margin:.5em 0;line-height:1.9;max-width:78ch}

/* Cada sección apilada: cabecera (icono + título grande) y cuerpo debajo */
.air-section{padding:48px 0 40px;
  border-top:1px solid color-mix(in srgb,var(--grape) 18%,var(--line))}
.air-aside{display:flex;align-items:center;gap:20px;margin-bottom:26px}
.air-ico{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;
  flex:none;border-radius:19px;color:#fff;
  background:linear-gradient(135deg,color-mix(in srgb,var(--grape) 70%,var(--surface)),color-mix(in srgb,var(--grape) 28%,var(--surface)));
  box-shadow:0 0 30px color-mix(in srgb,var(--grape) 60%,transparent),
             inset 0 0 0 1px rgba(255,255,255,.18)}
.air-ico .iconify{font-size:36px}
.air-h{font-family:var(--font-display);font-weight:800;font-size:2.7rem;line-height:1.05;
  letter-spacing:-.02em;margin:0;
  background:linear-gradient(120deg,#dcd6ff,var(--grape) 50%,#8fb8ff);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* Cuerpo: más pequeño, sutil y aireado */
.air-body{font-size:.95rem;line-height:2;text-align:justify;hyphens:auto;
  color:color-mix(in srgb,#fff 82%,var(--muted));max-width:80ch}
/* Colapsable: el botón va bajo el título; el cuerpo se oculta al colapsar.
   La altura exacta la controla el JS (max-height inline) para una animación
   suave en ambos sentidos. */
.air-section.is-collapsible .air-body{overflow:hidden;transition:max-height .35s ease}
.air-section.is-collapsible .air-body{padding-top:16px}
.air-more{margin:0 0 2px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;width:auto;
  font-family:var(--font-display);font-weight:700;font-size:.82rem;color:#cfc8ff;
  background:color-mix(in srgb,var(--grape) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--grape) 35%,var(--line));
  padding:.5em 1.05em;border-radius:999px;transition:all .15s}
.air-more:hover{color:#fff;border-color:var(--grape);
  background:color-mix(in srgb,var(--grape) 24%,transparent)}
.air-more-ic{font-size:1.1em;line-height:1;font-weight:700}

/* Cabecera del informe: botón Descargar PDF arriba a la derecha */
.ai-head-r{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.ai-pdf-btn{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.ai-pdf-btn .iconify{font-size:18px}
.air-body p{margin:0 0 1.35em}
.air-body p:last-child{margin-bottom:0}
.air-body ul,.air-body ol{margin:1em 0 1.4em;padding-left:1.5em;text-align:left}
.air-body li{margin:.8em 0;padding-left:.25em}
.air-body li::marker{color:var(--grape)}
.air-body h3{font-family:var(--font-display);font-size:1.08rem;margin:1.5em 0 .5em;color:#fff}
.air-body strong{color:#fff;font-weight:700}
.air-body em{color:#e7e4ff}

/* Crédito: "Análisis potenciado por Gemini API" con brillo recorriendo la marca */
.ai-credit{margin:40px 0 4px;text-align:center;font-size:.92rem;color:var(--muted)}
.ai-credit-brand{font-weight:800;
  background:linear-gradient(100deg,#fff 0%,#fff 38%,#cde3ff 50%,#fff 62%,#fff 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:ai-credit-shine 2.6s linear infinite;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.45))}
@keyframes ai-credit-shine{0%{background-position:160% 0}100%{background-position:-60% 0}}

@media (max-width:760px){
  .ai-report-panel{padding:8px 16px 24px}
  .air-section{padding:26px 0 22px}
  .air-aside{gap:14px;margin-bottom:14px}
  .air-ico{width:52px;height:52px;border-radius:15px}
  .air-ico .iconify{font-size:30px}
  .air-h{font-size:2rem}
  .air-body{text-align:left}
}

/* Fichas: que el contenido largo no ensanche/descuadre la tarjeta */
.info-cell{overflow:hidden}
.info-cell .v{overflow-wrap:anywhere;word-break:break-word}
.info-cell .txt{min-width:0}

/* ===== Califica tu mesero: modal del perfil público ===== */
.wr-overlay{position:fixed;inset:0;z-index:1000;background:rgba(8,8,24,.72);
  backdrop-filter:blur(3px);display:grid;place-items:center;padding:18px;overflow-y:auto}
.wr-overlay[hidden]{display:none}
/* Fondo oscuro FIJO (no depende del tema del perfil) para contraste garantizado */
.wr-modal{background:linear-gradient(160deg,#272453,#191731);color:#fff;border:1px solid rgba(255,255,255,.14);
  border-radius:18px;padding:22px 20px;width:100%;max-width:420px;position:relative;
  box-shadow:0 24px 70px rgba(0,0,0,.55);animation:toastin .22s ease}
.wr-modal h3,.wr-modal .wr-lbl,.wr-modal .wr-help{color:#fff}
.wr-close{color:#fff !important}
.wr-modal h3{margin:0 0 4px;font-family:var(--font-display);font-size:1.25rem}
.wr-help{font-size:.85rem;opacity:.8;margin:0 0 14px}
.wr-close{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--text,#fff);
  font-size:1.8rem;line-height:1;cursor:pointer;opacity:.7}
.wr-close:hover{opacity:1}
.wr-lbl{display:block;font-size:.82rem;font-weight:600;margin:12px 0 6px}
.wr-modal select,.wr-modal textarea,.wr-modal input{width:100%;box-sizing:border-box;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:var(--text,#fff);
  border-radius:12px;padding:11px 12px;font:inherit;font-size:.95rem}
.wr-modal textarea{resize:vertical}
.wr-modal select option{color:#111}
.wr-scale{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin-top:2px}
.wr-num{aspect-ratio:1;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);
  color:var(--text,#fff);border-radius:9px;font-weight:700;font-size:.9rem;cursor:pointer;
  display:grid;place-items:center;padding:0;transition:background .12s,transform .08s}
.wr-num:hover{transform:translateY(-1px)}
.wr-num.sel{background:var(--accent,#ff2e6e);border-color:var(--accent,#ff2e6e);color:var(--accent-text,#fff)}
.wr-scale-ends{display:flex;justify-content:space-between;font-size:.72rem;opacity:.7;margin-top:6px}
.wr-optional{margin-top:12px}
.wr-optional summary{cursor:pointer;font-size:.82rem;opacity:.85}
.wr-optional input{margin-top:8px}
.wr-submit{width:100%;margin-top:16px;border:none;border-radius:12px;padding:12px;
  font-weight:700;font-size:1rem;cursor:pointer}

/* ===== Alerta roja en el panel ===== */
.wr-alert{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;
  background:linear-gradient(135deg,#c5103c,#ff2e6e);border-radius:14px;padding:13px 16px;
  margin:14px 0;font-size:.92rem;box-shadow:0 0 0 0 rgba(255,46,110,.6);
  animation:wrpulse 1.8s ease-out infinite}
.wr-alert strong{font-weight:800}
.wr-alert-static{animation:wrpulse 1.8s ease-out infinite}
.wr-alert-dot{width:11px;height:11px;border-radius:50%;background:#fff;flex:0 0 auto;
  box-shadow:0 0 10px #fff;animation:wrblink 1s steps(2,start) infinite}
@keyframes wrpulse{0%{box-shadow:0 0 0 0 rgba(255,46,110,.55)}70%{box-shadow:0 0 0 14px rgba(255,46,110,0)}100%{box-shadow:0 0 0 0 rgba(255,46,110,0)}}
@keyframes wrblink{50%{opacity:.25}}
.nav-alert{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:#ff2e6e;color:#fff;font-size:.72rem;font-weight:800;
  margin-left:4px;box-shadow:0 0 8px rgba(255,46,110,.8)}

/* ===== Página de calificaciones ===== */
.wr-day{font-size:.8rem;font-weight:700;text-transform:capitalize;opacity:.7;
  margin:14px 0 6px;border-bottom:1px solid var(--line);padding-bottom:4px}
.wr-review{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:11px 13px;margin-bottom:8px}
.wr-review.neg{border-color:rgba(255,46,110,.5)}
.wr-review.unread{border-color:#ff2e6e;box-shadow:0 0 0 1px rgba(255,46,110,.4);
  animation:wrpulse 1.8s ease-out infinite}
.wr-review-head{display:flex;align-items:center;gap:10px;font-size:.95rem}
.wr-score{flex:0 0 auto;font-weight:800;font-size:.82rem;border-radius:8px;padding:2px 8px;
  background:rgba(255,255,255,.1)}
.wr-score.good{background:rgba(47,224,168,.22);color:var(--mint)}
.wr-score.bad{background:rgba(255,46,110,.22);color:#ff7aa3}
.wr-review-comment{margin:8px 0 6px;font-size:.92rem;opacity:.92;font-style:italic}
.wr-review-foot{display:flex;align-items:center;gap:10px;font-size:.8rem}

/* ===== Loyalty: editor de círculos de la tarjeta ===== */
.loy-circles{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}
.loy-circle{display:flex;flex-direction:column;align-items:center;gap:6px;width:108px}
.loy-dot{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-family:var(--font-display);border:2.5px dashed var(--line);
  color:var(--muted,#9a99c2);background:var(--navy-2)}
.loy-circle.has-prize .loy-dot{border-style:solid;border-color:var(--mint);
  color:#06281d;background:var(--mint)}
.loy-circle input{width:100%;box-sizing:border-box;text-align:center;font-size:.78rem;
  padding:7px 6px;background:var(--navy-2);border:1px solid var(--line);
  border-radius:9px;color:#fff}
.loy-circle.has-prize input{border-color:var(--mint)}

/* ===== Loyalty: páginas públicas (inscripción + tarjeta del cliente) ===== */
.loy-public{min-height:100vh;background:var(--bg);color:var(--text)}
.loy-wrap{max-width:520px;margin:0 auto;padding:18px 16px 40px}
.loy-back{display:inline-block;color:var(--text);opacity:.7;text-decoration:none;font-size:.85rem;margin-bottom:10px}
.loy-hero{text-align:center;margin:8px 0 18px}
.loy-avatar{width:84px;height:84px;border-radius:50%;object-fit:cover;border:3px solid var(--accent);margin-bottom:10px}
.loy-badge{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:1.5rem;
  background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;
  background-clip:text;color:transparent;padding:2px 0}
.loy-tagline{opacity:.85;margin:6px 0 0;font-size:1rem}
.loy-panel{background:var(--surface);border-radius:var(--brad);padding:18px 16px;margin-bottom:14px}
.loy-panel h2{margin:0 0 4px;font-size:1.15rem}
.loy-panel h3{margin:0 0 10px;font-size:1rem}
.loy-panel .muted{opacity:.75;font-size:.9rem;margin:0 0 12px}
.loy-public input:not([type=checkbox]):not([type=radio]){
  width:100%;box-sizing:border-box;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  color:var(--text);border-radius:12px;padding:12px 13px;font:inherit;font-size:.95rem;margin-bottom:10px}
.loy-public input::placeholder{color:var(--text);opacity:.55}
/* Campo de fecha: que el ícono del calendario se vea sobre fondo oscuro */
.loy-public input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.7;cursor:pointer}
.loy-consent{display:flex;gap:9px;align-items:flex-start;font-size:.82rem;opacity:.85;margin:4px 0 12px}
.loy-consent input{margin-top:3px}
.loy-btn{width:100%;border:none;border-radius:12px;padding:13px;font:inherit;font-weight:700;font-size:1rem;
  cursor:pointer;background:var(--accent);color:var(--accent-text)}
.loy-btn.ghost{background:transparent;border:1.5px solid var(--accent);color:var(--text)}
.loy-inline{display:flex;gap:8px;flex-wrap:wrap}
.loy-inline .phone-row{flex:1 1 100%}
.loy-inline input{flex:1;min-width:150px;margin-bottom:0}
.loy-inline .loy-btn{width:auto;flex:0 0 auto}

/* Acordeón del formulario de inscripción: se despliega al tocar el nombre.
   Colapsado con max-height (no display:none) para que la validación pueda
   enfocar campos requeridos ocultos sin romperse. */
.loy-more{max-height:0;overflow:hidden;opacity:0;transition:max-height .35s ease,opacity .25s ease}
.loy-more.open{max-height:520px;opacity:1}
/* Fila correo + PIN: el correo más ancho que el PIN */
.loy-row2 .loy-email{flex:2}
.loy-row2 .loy-pin{flex:1}

/* Slider automático de premios (página pública del Club) */
.loy-slider{position:relative;border-radius:var(--brad);overflow:hidden;margin-bottom:14px;
  background:var(--surface)}
.loy-slider-track{position:relative;width:100%;aspect-ratio:16/9}
.loy-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.loy-slide.on{opacity:1}
.loy-slide img{width:100%;height:100%;object-fit:cover;display:block}
.loy-slide-strip{position:absolute;left:0;right:0;bottom:0;z-index:2;text-align:center;
  background:var(--btn-bg,var(--accent));color:var(--accent-text);font-weight:700;
  font-size:.95rem;padding:8px 12px}
.loy-slider-dots{position:absolute;bottom:46px;left:0;right:0;z-index:3;display:flex;
  justify-content:center;gap:7px}
.loy-dot-btn{width:8px;height:8px;border-radius:50%;border:none;padding:0;cursor:pointer;
  background:rgba(255,255,255,.5)}
.loy-dot-btn.on{background:#fff;width:20px;border-radius:4px}

.loy-next{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-radius:var(--brad);
  padding:13px 16px;text-align:center;font-size:1rem;margin-bottom:14px}
.loy-card{background:var(--surface);border-radius:var(--brad);padding:18px 14px;margin-bottom:14px}
.card-circles{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:12px}
.cc{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.cc-dot{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-weight:700;
  font-family:var(--font-display);font-size:1.05rem;border:2.5px dashed rgba(255,255,255,.3);
  color:var(--text);opacity:.8}
.cc.prize .cc-dot{border-style:solid;border-color:var(--accent)}
.cc.filled .cc-dot{background:var(--accent);border-color:var(--accent);color:var(--accent-text);opacity:1}
.cc.prize.filled .cc-dot{background:var(--accent2);border-color:var(--accent2)}
.cc-label{font-size:.72rem;line-height:1.2;font-weight:600}
.cc-label.muted{font-weight:400;opacity:.55}
.loy-progress{text-align:center;opacity:.8;font-size:.9rem;margin-top:14px}
.loy-reward{display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:rgba(255,255,255,.07);border-radius:12px;padding:11px 13px;margin-bottom:8px}
.loy-code{font-family:var(--font-display);font-weight:700;letter-spacing:.06em;
  background:var(--accent);color:var(--accent-text);padding:4px 10px;border-radius:8px}
.loy-terms{font-size:.78rem;opacity:.6;text-align:center;margin:6px 0}
.loy-tip{text-align:center;font-size:.82rem;opacity:.7;margin:14px 0}

/* ===== Loyalty: pestañas del editor ===== */
.loy-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.loy-tab{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;
  background:var(--navy-2);border:1px solid var(--line);color:var(--text,#fff);
  text-decoration:none;font-size:.85rem;font-weight:600;white-space:nowrap;transition:all .15s}
.loy-tab:hover{border-color:var(--grape)}
.loy-tab.on{background:linear-gradient(135deg,var(--pink),var(--grape));border-color:transparent;color:#fff}

/* Tabs de sección del Editor (Loyalty/Leads/Quejas/Menú): carrusel de una
   sola línea, con ícono iluminado y separadores |; fondo solo en la activa.
   Clase propia (.sec-*) para no chocar con el menú público (.menu-tabs). */
.sec-tabs{position:relative;display:flex;flex-wrap:nowrap;align-items:center;gap:6px;margin:14px 0 4px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;padding-bottom:2px}
.sec-tabs::-webkit-scrollbar{display:none}
.sec-sep{color:var(--line);font-weight:300;user-select:none;flex:none}
.sec-tab{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;background:transparent;border:1px solid transparent;
  color:var(--text,#fff);text-decoration:none;font-size:.9rem;font-weight:600;
  white-space:nowrap;transition:all .15s}
.sec-tab .sec-ic{display:inline-grid;place-items:center;color:var(--grape)}
.sec-tab .sec-ic svg{width:18px;height:18px;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--grape) 75%,transparent))}
.sec-tab:hover{background:rgba(255,255,255,.05)}
.sec-tab.on{background:linear-gradient(135deg,var(--pink),var(--grape));color:#fff}
.sec-tab.on .sec-ic{color:#fff}
.sec-tab.on .sec-ic svg{filter:drop-shadow(0 0 6px rgba(255,255,255,.55))}
/* Carrusel: contenedor con flechas ‹ › que aparecen solo hacia donde hay más */
.sec-nav{display:flex;align-items:center;gap:4px;margin:14px 0 4px}
.sec-nav .sec-tabs{margin:0;flex:1;min-width:0}
.sec-arrow{flex:none;display:none;place-items:center;width:30px;height:30px;padding:0;
  border-radius:999px;border:1px solid var(--line);background:var(--navy-2);color:var(--text);
  cursor:pointer;transition:background .15s,border-color .15s}
/* Al desbordar reservamos AMBOS huecos de flecha (ancho fijo, sin reflow al
   scrollear); solo alterna la visibilidad de la flecha hacia donde hay más. */
.sec-nav.has-arrows .sec-arrow{display:grid;visibility:hidden}
.sec-nav.has-arrows .sec-arrow.show{visibility:visible}
.sec-arrow:hover{border-color:var(--grape);background:rgba(255,255,255,.05)}
.sec-arrow svg{width:16px;height:16px}
/* Badge de no-leídos sobre un tab */
.tab-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:#ff2e6e;color:#fff;font-size:.7rem;font-weight:800;line-height:1}
.sec-tab.on .tab-badge{background:rgba(255,255,255,.28)}

/* Cupo de correos mensual: barra de progreso + aviso (50/80/90/100 %) */
.quota-box{background:var(--navy-2);border:1px solid var(--line);border-radius:14px;
  padding:12px 14px;margin:14px 0}
.quota-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:.85rem;color:var(--text,#fff)}
.quota-label{opacity:.75}
.quota-count strong{font-size:1rem}
.quota-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.08);
  overflow:hidden;margin:8px 0 0}
.quota-bar span{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--mint),var(--grape));transition:width .3s}
.quota-msg{font-size:.82rem;color:var(--text,#fff);opacity:.85;margin:8px 0 0}
.quota-box .btn{margin-top:8px}
/* Colores del borde/barra según el nivel de alerta */
.quota-l80 .quota-bar span,.quota-l90 .quota-bar span{background:var(--gold)}
.quota-l100 .quota-bar span{background:var(--pink)}
.quota-l90{border-color:var(--gold)}
.quota-l100{border-color:var(--pink)}

/* Filtros de fecha como botones profesionales con ícono (Día | Mes | Año) */
.date-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0 16px}
.date-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;
  background:var(--navy-2);border:1px solid var(--line);transition:border-color .15s}
.date-pill:hover{border-color:var(--grape)}
.date-pill svg{width:16px;height:16px;color:var(--grape);flex:none;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--grape) 70%,transparent))}
.date-pill select{background:transparent;border:0;color:#fff;font-size:.85rem;font-weight:600;
  padding:0;margin:0;cursor:pointer;font-family:inherit;outline:none}
.date-pill select option{background:var(--navy-2);color:#fff}
.date-clear{display:inline-flex;align-items:center;font-size:.8rem;color:var(--muted);
  text-decoration:none;padding:7px 10px;border-radius:999px}
.date-clear:hover{color:#fff}

/* Botón PDF con ícono */
.pdf-btn{display:inline-flex;align-items:center;gap:7px}
.pdf-btn svg{width:16px;height:16px}

/* ===== Loyalty: versión PREMIUM de la tarjeta y la inscripción ===== */
/* Fondo con halos de color en esquinas opuestas */
.loy-public{background:
  radial-gradient(1100px 480px at 100% -8%, color-mix(in srgb,var(--accent) 22%, transparent), transparent 60%),
  radial-gradient(900px 480px at -8% 108%, color-mix(in srgb,var(--accent2) 22%, transparent), transparent 60%),
  var(--bg)}
.loy-badge{font-size:1.7rem;letter-spacing:-.01em}

/* Tarjeta y paneles: vidrio esmerilado, borde luminoso, sombra profunda */
.loy-card,.loy-panel{position:relative;overflow:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.16);border-radius:20px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.20)}
/* brillo en una esquina (superior derecha) */
.loy-card::before,.loy-panel::before{content:"";position:absolute;top:-70px;right:-70px;width:200px;height:200px;
  background:radial-gradient(circle, color-mix(in srgb,var(--accent) 60%, transparent), transparent 70%);
  filter:blur(6px);pointer-events:none;z-index:0}
/* transparencia/halo suave en la esquina opuesta (inferior izquierda) */
.loy-card::after,.loy-panel::after{content:"";position:absolute;bottom:-80px;left:-60px;width:190px;height:190px;
  background:radial-gradient(circle, color-mix(in srgb,var(--accent2) 48%, transparent), transparent 70%);
  filter:blur(10px);pointer-events:none;z-index:0}
.loy-card > *,.loy-panel > *{position:relative;z-index:1}

/* La tarjeta de círculos, más “carnet”: barra de acento arriba */
.loy-card{padding-top:22px}
.loy-card::after{opacity:.9}
.cc.filled .cc-dot{box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 50%, transparent)}
.cc.prize.filled .cc-dot{box-shadow:0 8px 22px color-mix(in srgb,var(--accent2) 55%, transparent)}

/* Mensaje de próximo premio con brillo sutil */
.loy-next{box-shadow:0 12px 34px color-mix(in srgb,var(--accent) 35%, transparent)}

/* Botón principal con realce */
.loy-btn{box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 38%, transparent);transition:transform .08s,filter .15s}
.loy-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}

/* ===== Loyalty Fase 3: QR dinámico + escáner ===== */
.loy-qr-card{text-align:center;display:flex;flex-direction:column;align-items:center}
.loy-qr{width:210px;height:210px;background:#fff;border-radius:16px;padding:10px;box-sizing:content-box;
  display:grid;place-items:center;box-shadow:0 12px 30px rgba(0,0,0,.3)}
.loy-qr img,.loy-qr canvas{display:block}
.loy-qr-label{font-weight:700;margin-top:12px;font-size:.95rem}
.loy-qr-sub{font-size:.78rem;opacity:.7;margin-top:4px}
.loy-redeem-btn{background:var(--accent);color:var(--accent-text);border:none;border-radius:10px;
  padding:7px 12px;font:inherit;font-weight:700;font-size:.82rem;cursor:pointer}
.loy-redeem-btn.on{outline:2px solid #fff;outline-offset:1px}
.loy-scan-card{background:var(--navy-2);border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:12px}
.loy-scan-card input{background:rgba(255,255,255,.06);border:1px solid var(--line);color:#fff;
  border-radius:10px;padding:10px 12px;font:inherit}
#reader video{border-radius:12px}

/* ===== Loyalty Fase 4: aviso de cercanía (GPS) ===== */
.loy-near{background:linear-gradient(135deg,#2fe0a8,#13b98a);color:#06281d;font-weight:700;
  border-radius:14px;padding:13px 16px;text-align:center;margin-bottom:14px;
  box-shadow:0 12px 34px rgba(47,224,168,.35);animation:wrpulse 1.8s ease-out infinite}

/* ===== Loyalty paquete web: PIN, género, regalo ===== */
.loy-row2{display:flex;gap:10px}
.loy-row2 > *{flex:1;min-width:0}
.loy-public select{width:100%;box-sizing:border-box;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);color:var(--text);border-radius:12px;
  padding:12px 13px;font:inherit;font-size:.95rem;margin-bottom:10px}
.loy-public select option{color:#111}
.loy-gift{margin:4px 0 12px;background:rgba(255,255,255,.05);border-radius:12px;padding:10px 12px}
.loy-gift summary{cursor:pointer;font-weight:700;font-size:.9rem}
.loy-gift form{margin-top:8px}
/* Editor: checkbox "regalable" bajo cada círculo */
.loy-share-chk{display:flex;align-items:center;gap:4px;font-size:.68rem;opacity:.85;margin-top:4px;cursor:pointer}
.loy-share-chk input{width:auto;margin:0}

/* ===== Loyalty retención: niveles + vencimiento ===== */
.loy-level{display:inline-block;font-size:.7rem;font-weight:800;padding:2px 9px;border-radius:999px;
  letter-spacing:.03em;vertical-align:middle;color:#1b1a4e}
.loy-level-bronce{background:linear-gradient(135deg,#cd9b6a,#a9743f);color:#3a2410}
.loy-level-plata{background:linear-gradient(135deg,#e6e8ec,#b9bfc9);color:#2a2f38}
.loy-level-oro{background:linear-gradient(135deg,#ffd86b,#f0a93c);color:#3d2a00}
.loy-expira{color:var(--gold,#ffc23c);font-size:.74rem;font-weight:600}

/* ===== Perfil: tarjetas con vidrio (información, horario, leads) =====
   Cuerpo de vidrio claro (toque blanquecino, neutro sobre cualquier fondo);
   las puntas brillan con el color de brillo (--glow). Transparencias reales.
   El texto interno usa su propio color (--info-text). */
.public .info-cell,
.public .leadform{
  position:relative; overflow:hidden;
  color:var(--info-text,#fff);
  background:linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.03));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.20);
}
.public .info-cell::before,
.public .leadform::before{content:"";position:absolute;top:-55px;right:-55px;width:150px;height:150px;
  background:radial-gradient(circle, color-mix(in srgb,var(--glow) 50%, transparent), transparent 70%);
  filter:blur(8px);pointer-events:none;z-index:0}
.public .info-cell::after,
.public .leadform::after{content:"";position:absolute;bottom:-60px;left:-48px;width:140px;height:140px;
  background:radial-gradient(circle, color-mix(in srgb,var(--glow) 38%, transparent), transparent 70%);
  filter:blur(10px);pointer-events:none;z-index:0}
.public .info-cell > *,
.public .leadform > *{position:relative;z-index:1}

/* ===== Reseña Califícanos: estrellas ===== */
.rv-stars{display:flex;gap:6px;justify-content:center;margin:14px 0 4px}
.rv-star{background:none;border:none;cursor:pointer;font-size:2.6rem;line-height:1;padding:0;
  color:rgba(255,255,255,.25);transition:color .12s,transform .08s}
.rv-star:hover{transform:scale(1.1)}
.rv-star.on{color:#ffc23c}

/* ===== Quejas: cabecera, filtros y paginación ===== */
.quejas-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.quejas-filter{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 14px}
.quejas-filter select{background:var(--navy-2);border:1px solid var(--line);color:#fff;
  border-radius:10px;padding:8px 10px;font:inherit;font-size:.85rem}
.quejas-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px;font-size:.85rem}

/* ===== Menú: editor (categorías y platos) ===== */
.menu-cat{background:var(--navy-2);border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:12px}
.menu-cat-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.menu-cat-form{display:flex;align-items:center;gap:8px;flex:1;flex-wrap:wrap}
.menu-cat-name{font-weight:700;font-size:1rem;flex:1;min-width:140px}
.menu-items{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.menu-item-row{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.menu-thumb{width:40px;height:40px;border-radius:8px;object-fit:cover;flex:none}
.menu-thumb.ph{display:grid;place-items:center;background:var(--navy-2);font-size:1.1rem}
.badge-flash{display:inline-block;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  background:var(--gold);color:#3a2a00;border-radius:6px;padding:1px 6px;margin-left:4px}
.mi-name{flex:1;min-width:0}
.mi-actions{display:flex;align-items:center;gap:8px}
.menu-colors{display:flex;flex-wrap:wrap;gap:16px 14px}
.menu-colors div{display:flex;flex-direction:column;gap:6px;width:120px}
.menu-colors span{font-size:.82rem;color:var(--muted,#9aa0b8)}
.menu-colors input[type=color]{width:100%;height:54px;margin:0;padding:3px;cursor:pointer}

/* Editor de menú en celular: foto arriba, nombre, acciones (✏️ ✕) y precio abajo */
@media (max-width:560px){
  .menu-item-row{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:8px;align-items:start}
  .menu-item-row .handle{grid-column:1;grid-row:1 / span 4;align-self:center}
  .menu-item-row .menu-thumb{grid-column:2;grid-row:1;width:100%;height:150px}
  .menu-item-row .mi-name{grid-column:2;grid-row:2}
  .menu-item-row .mi-actions{grid-column:2;grid-row:3}
  .menu-item-row .mi-price{grid-column:2;grid-row:4;font-weight:700}
  .menu-item-row .mi-lbl{display:none}            /* ★ y ✏️ sin texto */
}

/* ===== Menú: público (app-like) ===== */
.menu-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 0 10px;
  position:sticky;top:0;z-index:5;background:var(--bg)}
.menu-tabs::-webkit-scrollbar{display:none}
.menu-tab{flex:none;padding:7px 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--text);font-size:.85rem;font-weight:600;white-space:nowrap;opacity:.85}
.menu-tab.on{background:var(--btn-bg,var(--accent));color:var(--accent-text);border-color:transparent;opacity:1}
.menu-cat-pub{scroll-margin-top:70px;margin-top:16px}
.menu-cat-title{font-size:1.05rem;margin:0 0 10px;color:var(--title-c,var(--text))}
.menu-card{display:flex;gap:12px;align-items:stretch;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;margin-bottom:10px;cursor:pointer;transition:transform .08s}
.menu-card:active,.menu-card.tapped{transform:scale(.99)}
.menu-card-img{width:96px;min-height:96px;object-fit:cover;flex:none;background:var(--navy-2)}
.menu-card-body{padding:11px 13px;flex:1;min-width:0}
.menu-card-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.menu-card-name{font-weight:700;font-size:1rem}
.menu-card-price{font-weight:700;color:var(--accent);white-space:nowrap}
.menu-card-desc{margin:5px 0 0;font-size:.85rem;opacity:.8;line-height:1.4}
.flash-item{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 10px 26px color-mix(in srgb,var(--gold) 30%,transparent)}
.flash-tag{display:inline-block;font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  background:var(--gold);color:#3a2a00;border-radius:6px;padding:1px 6px;margin-left:4px;vertical-align:middle}

/* ===== Inteligencia de Menú ===== */
.insight-row{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:11px;
  border-bottom:1px solid var(--line);font-size:.92rem;transition:background .15s}
.insight-row:last-child{border-bottom:none}
.insight-row:hover{background:rgba(255,255,255,.045)}
.ins-metric{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;
  font-size:.85rem;opacity:.85;min-width:54px;text-align:right}
.ins-metric svg{width:15px;height:15px;opacity:.75;flex:none}
.ins-conv{min-width:54px;text-align:right;color:var(--mint)}

/* Encabezados de Inteligencia de Menú: ícono pro iluminado en vez de emoji */
.ins-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.mic-ico{display:inline-grid;place-items:center;flex:none}
.mic-ico svg{width:21px;height:21px}
.mic-ico.gold svg{color:var(--gold);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--gold) 70%,transparent))}
.mic-ico.pink svg{color:var(--pink);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--pink) 70%,transparent))}
.mic-ico.grape svg{color:var(--grape);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--grape) 70%,transparent))}

/* ===== Loyalty: niveles de cliente ===== */
.loy-level{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border-radius:6px;padding:1px 7px}
.loy-level-bronce{background:#7a4a23;color:#ffd9b3}
.loy-level-plata{background:#8a8a99;color:#fff}
.loy-level-oro{background:var(--gold);color:#3a2a00}

/* ===== Menú: página completa (moderno y sobrio) ===== */
.menu-page{min-height:100vh;background:var(--bg);color:var(--text)}
.mp-topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.10);padding:10px 0 8px}
.mp-back{display:inline-block;padding:4px 16px;color:var(--text);font-weight:600;font-size:.9rem;opacity:.9}
.mp-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:8px 16px 2px}
.mp-tabs::-webkit-scrollbar{display:none}
.mp-wrap{max-width:560px;margin:0 auto;padding:6px 16px 60px}
.mp-title{font-size:1.5rem;margin:14px 0 4px;color:var(--title-c,var(--text))}
.mp-cat{scroll-margin-top:104px;margin-top:22px}
.mp-cat-title{font-size:1.15rem;margin:0 0 12px;color:var(--title-c,var(--text))}

/* Tarjeta destacada (hero): primer plato grande */
.mp-hero{display:block;background:var(--surface);border:1px solid rgba(0,0,0,.06);
  border-radius:18px;overflow:hidden;margin-bottom:12px;cursor:pointer;
  box-shadow:0 14px 36px rgba(0,0,0,.22);transition:transform .1s}
.mp-hero:active,.mp-hero.tapped{transform:scale(.99)}
.mp-hero-img{width:100%;aspect-ratio:16/10;background-size:cover;background-position:center}
.mp-hero-body{padding:13px 15px}
.mp-line{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.mp-name{font-weight:700;font-size:1.12rem;line-height:1.2}
.mp-price{font-weight:800;color:var(--m-price,#ff2e6e);white-space:nowrap}
.mp-desc{margin:6px 0 0;font-size:.86rem;opacity:.75;line-height:1.4}

/* Grilla de 2 columnas para el resto */
.mp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mp-tile{display:flex;flex-direction:column;background:var(--surface);border:1px solid rgba(0,0,0,.06);
  border-radius:16px;overflow:hidden;cursor:pointer;box-shadow:0 10px 26px rgba(0,0,0,.16);transition:transform .1s}
.mp-tile:active,.mp-tile.tapped{transform:scale(.98)}
.mp-tile-img{width:100%;aspect-ratio:1/1;background-size:cover;background-position:center}
.mp-tile-body{padding:10px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.mp-tile .mp-name{font-size:.98rem}
.mp-tile .mp-desc{font-size:.78rem;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mp-tile .mp-price{margin-top:auto;font-size:1rem}

/* Botón "Ver menú" en el perfil */
.menu-open-btn .lbl small{opacity:.85}

/* ===== Menú v2: portada, chips, Más pedidos, secciones ===== */
.mp-cover{position:relative;height:200px;background-size:cover;background-position:center;
  background-color:var(--surface);display:flex;align-items:flex-end;border-radius:0 0 22px 22px;overflow:hidden}
.mp-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.72) 100%)}
.mp-cover-back{position:absolute;top:12px;left:12px;z-index:2;background:rgba(0,0,0,.5);color:#fff;
  padding:7px 14px;border-radius:999px;font-size:.85rem;font-weight:600;backdrop-filter:blur(6px)}
.mp-cover-title{position:relative;z-index:2;color:#fff;font-family:var(--font-display);font-weight:700;
  font-size:1.9rem;padding:0 18px 16px;text-shadow:0 2px 14px rgba(0,0,0,.5)}

.mp-chips{position:sticky;top:0;z-index:20;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  padding:12px 16px;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px)}
.mp-chips::-webkit-scrollbar{display:none}
.mp-chip{flex:none;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);
  color:var(--text);font-size:.85rem;font-weight:700;white-space:nowrap;cursor:pointer;opacity:.85;font-family:inherit}
.mp-chip.on{background:var(--m-price,#ff2e6e);color:#fff;border-color:transparent;opacity:1}

.mp-wrap{max-width:600px;margin:0 auto;padding:8px 16px 60px}
.mp-cat-title{font-size:1.2rem;margin:18px 0 12px;color:var(--title-c,var(--text))}
.mp-sub-title{font-size:1rem;margin:18px 0 10px;opacity:.85;
  border-left:3px solid var(--m-price,#ff2e6e);padding-left:10px}

/* Más pedidos: fila horizontal */
.mp-feat-star{color:var(--m-price,#ff2e6e)}
.mp-feat-row{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:6px}
.mp-feat-row::-webkit-scrollbar{display:none}
.mp-feat-card{flex:0 0 150px;background:var(--surface);border:1px solid rgba(0,0,0,.06);border-radius:14px;
  overflow:hidden;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.16)}
.mp-feat-img{width:100%;aspect-ratio:4/3;background-size:cover;background-position:center}
.mp-feat-body{padding:9px 11px;display:flex;flex-direction:column;gap:2px}
.mp-feat-body .mp-name{font-size:.9rem}
.mp-feat-body .mp-price{font-size:.95rem}

/* "Ver más +" sutil, alineado con el precio (tile y hero) */
.mp-tile-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto}
.mp-tile-foot .mp-price{margin-top:0}
.mp-hero-price{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.mp-more{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;
  color:var(--mmuted,rgba(255,255,255,.6));white-space:nowrap;opacity:.9}
.mp-more-ic{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;
  border-radius:50%;border:1px solid currentColor;font-size:.8rem;line-height:1;font-weight:700}

/* Cola de fotos (4,5,6,…) como slider horizontal cuando hay 6+ platos */
.mp-slider{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;margin-top:12px;padding-bottom:6px}
.mp-slider::-webkit-scrollbar{display:none}
.mp-slider .mp-tile{flex:0 0 68%;max-width:280px;scroll-snap-align:start}

/* Hero con degradé y texto encima */
.mp-hero{display:block;background:var(--surface);border-radius:18px;overflow:hidden;margin-bottom:12px;
  cursor:pointer;box-shadow:0 14px 36px rgba(0,0,0,.24);transition:transform .1s}
.mp-hero:active,.mp-hero.tapped{transform:scale(.99)}
.mp-hero-img{width:100%;aspect-ratio:16/10;background-size:cover;background-position:center;
  position:relative;display:flex;align-items:flex-end;min-height:200px}
.mp-hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.78) 100%)}
.mp-hero-over{position:relative;z-index:2;width:100%;padding:14px 16px;color:#fff}
.mp-hero-over .mp-name{color:#fff;font-size:1.25rem}
.mp-hero-over .mp-price{color:#fff}
.mp-hero-over .mp-desc{color:#fff;opacity:.9}
.mp-hero-body{padding:13px 15px}

/* ===== Menú editor: subsecciones ===== */
.menu-subs{margin:6px 0 0 14px;display:flex;flex-direction:column;gap:8px;border-left:2px solid var(--line);padding-left:10px}
.menu-sub{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 10px}

/* ===== Menú v2: pulido visual ===== */
.mp-feat-card{flex-basis:160px;border:1px solid var(--line)}
.mp-feat-img{aspect-ratio:1/1}
.mp-feat-body{gap:3px}
.mp-feat-body .mp-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-feat-body .mp-price{font-weight:800}
.mp-tile{border:1px solid var(--line)}
.mp-tile .mp-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25}
.mp-tile-img{aspect-ratio:4/3}
.mp-hero-over .mp-name{font-size:1.35rem;font-weight:800;line-height:1.15}
.mp-cat-title{letter-spacing:-.01em}

/* ===== Menú v3: skin oscuro tipo app + detalle ===== */
.menu-page{background:var(--m-bg,#101a3a);color:var(--m-title,#fff);--mcard:var(--m-card,#24356b);--mline:rgba(255,255,255,.10);--mmuted:var(--m-desc,#c7d0e8)}
/* columna centrada tipo app */
.mp-cover,.mp-chips,.mp-wrap{max-width:600px;margin-left:auto;margin-right:auto}
.mp-cover{border-radius:0 0 24px 24px}
.mp-cover-title{font-size:1.7rem}
.mp-chips{background:color-mix(in srgb,var(--m-bg,#101a3a) 92%,transparent)}
.mp-chip{background:var(--mcard);border-color:var(--mline);color:var(--m-title,#fff);opacity:1}
.mp-chip.on{background:var(--m-price,#ff2e6e);color:#fff;border-color:transparent}
.mp-cat-title,.mp-sub-title{color:var(--m-title,#fff)}

/* Hero: imagen arriba + info abajo (oscuro) */
.mp-hero{background:var(--mcard);border:1px solid var(--mline);box-shadow:0 16px 40px rgba(0,0,0,.42);cursor:pointer}
.mp-hero-img{aspect-ratio:16/11;min-height:0;display:block;position:relative}
.mp-hero-img::after{display:none}
.mp-hero-img .flash-tag{position:absolute;top:10px;left:10px;margin:0}
.mp-hero-info{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:13px 15px}
.mp-hero-text{min-width:0}
.mp-hero .mp-name{color:var(--m-title,#fff);font-size:1.25rem;font-weight:800;line-height:1.15}
.mp-hero .mp-desc{color:var(--mmuted);font-size:.86rem;margin:5px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mp-hero .mp-price{color:var(--m-price,#ff2e6e);font-weight:800;font-size:1.25rem;white-space:nowrap}

/* Grilla 2 columnas */
.mp-grid{gap:14px}
.mp-tile{background:var(--mcard);border:1px solid var(--mline);border-radius:18px;box-shadow:0 12px 30px rgba(0,0,0,.32);cursor:pointer}
.mp-tile-img{aspect-ratio:4/3;position:relative}
.mp-tile-body{padding:11px 13px;gap:5px}
.mp-tile .mp-name{color:var(--m-title,#fff);font-weight:700}
.mp-tile .mp-desc{color:var(--mmuted);font-size:.8rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mp-tile .mp-price{color:var(--m-price,#ff2e6e);font-weight:800;font-size:1.05rem;margin-top:2px}
.flash-dot{position:absolute;top:8px;right:8px;width:25px;height:25px;border-radius:50%;background:var(--gold);color:#3a2a00;display:grid;place-items:center;font-size:.8rem;font-weight:800}

/* Más pedidos */
.mp-feat-card{background:var(--mcard);border:1px solid var(--mline)}
.mp-feat-body .mp-name{color:var(--m-title,#fff)}
.mp-feat-body .mp-price{color:var(--m-price,#ff2e6e)}

/* Detalle del plato (bottom-sheet) */
.mp-detail{position:fixed;inset:0;z-index:1000;background:rgba(8,7,20,.78);backdrop-filter:blur(4px);
  display:grid;place-items:center;padding:16px}
.mp-detail[hidden]{display:none}
.mp-detail-card{background:var(--m-card,#24356b);color:var(--m-title,#fff);width:100%;max-width:560px;max-height:90vh;overflow-y:auto;
  border-radius:24px;position:relative;animation:sheetpop .26s ease}
@keyframes sheetpop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.mp-detail-close{position:absolute;top:12px;left:12px;z-index:2;width:40px;height:40px;border-radius:12px;
  border:none;background:rgba(0,0,0,.5);color:#fff;font-size:1.3rem;cursor:pointer;backdrop-filter:blur(6px)}
.mp-detail-img{width:100%;aspect-ratio:4/3;background-size:cover;background-position:center;background-color:var(--m-card,#24356b)}
.mp-detail-body{padding:18px 18px 28px}
.mp-detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.mpd-name{font-size:1.5rem;font-weight:800;margin:0;line-height:1.15}
.mpd-price{font-size:1.45rem;font-weight:800;color:var(--m-price,#ff2e6e);white-space:nowrap}
.mpd-desc{margin:12px 0 0;color:var(--mmuted);line-height:1.55;font-size:.95rem}
.mpd-note{display:flex;align-items:flex-start;gap:5px;margin:8px 0 0;color:var(--mmuted);font-size:.78rem;opacity:.8;line-height:1.4}
.mpd-note::before{content:"";flex:none;width:13px;height:13px;margin-top:1px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 9h2V7h-2m1 13a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m-1 15h2v-6h-2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 9h2V7h-2m1 13a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m-1 15h2v-6h-2z'/%3E%3C/svg%3E") center/contain no-repeat}
.mpd-note[hidden]{display:none}
/* Pills de ingredientes en el detalle del plato (entre título y descripción) */
.mpd-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.mpd-pills[hidden]{display:none}
.mpd-pill{font-size:.82rem;font-weight:600;padding:.35em .8em;border-radius:999px;
  background:color-mix(in srgb,var(--m-price,#ff2e6e) 16%,transparent);color:var(--m-title,#fff);
  border:1px solid color-mix(in srgb,var(--m-price,#ff2e6e) 38%,transparent)}
/* Editor: inputs de pills (ingredientes) en cuadrícula */
.pill-inputs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pill-inputs input{margin-bottom:0}

/* ===== Editor: barra de navegación flotante (abajo) ===== */
.cms{padding-bottom:88px}
.cms-nav{position:fixed;left:0;right:0;bottom:0;z-index:500;display:flex;gap:2px;
  justify-content:safe center;overflow-x:auto;scrollbar-width:none;
  background:rgba(17,16,40,.93);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);box-shadow:0 -10px 34px rgba(0,0,0,.4);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
.cms-nav::-webkit-scrollbar{display:none}
.cms-nav-form{flex:0 0 auto;margin:0;display:flex}
.cms-nav-i{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-width:62px;padding:7px 8px;border-radius:12px;background:none;border:none;cursor:pointer;position:relative;
  color:var(--muted);font-family:inherit;font-size:.66rem;font-weight:600;text-decoration:none;white-space:nowrap}
.cms-nav-i .iconify{font-size:1.4rem;color:inherit}
.cms-nav-i:hover{color:#fff;background:rgba(255,255,255,.05)}
.cms-nav-i.on{color:var(--pink)}
.cms-nav-i.pub{color:var(--mint)}
.cms-nav-badge{position:absolute;top:1px;right:7px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--pink);color:#fff;font-size:.6rem;font-weight:800;display:grid;place-items:center}

/* ===== Login / registro: logo oficial ===== */
.auth-logo{display:block;text-align:center;margin-bottom:6px}
.auth-logo img{height:54px;width:auto;display:inline-block}

/* ===== Perfil: módulos colapsables ===== */
.collapsible-info > .info-cell{transition:opacity .3s ease, transform .3s ease}
.collapsible-info.collapsed > .info-cell:not(:first-child){display:none}
.collapsible-info.expanding > .info-cell:not(:first-child){animation:cellFadeIn .3s ease both}
.collapsible-info.collapsing > .info-cell:not(:first-child){animation:cellFadeOut .25s ease both}
@keyframes cellFadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes cellFadeOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-6px)}}
.info-toggle{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:10px;
  background:transparent;border:1px solid var(--line);color:var(--text);border-radius:12px;
  padding:10px;font:inherit;font-weight:600;font-size:.9rem;cursor:pointer;opacity:.75;transition:opacity .2s,border-color .2s}
.info-toggle:hover{opacity:1;border-color:var(--accent)}
.info-toggle .chev{font-size:.8rem;transition:transform .3s ease}
.info-toggle.open .chev{transform:rotate(180deg)}
/* Horario: siempre visible, sin dropdown */
.sched-card .k{margin-bottom:6px}

/* Galería: franja de promoción (color de botones) sobre la imagen */
.carousel .slide{position:relative}
.carousel .slide figcaption.promo-strip{position:absolute;left:0;right:0;bottom:0;margin:0;
  background:var(--btn-bg,var(--accent));color:var(--accent-text);font-weight:700;text-align:center;
  padding:9px 12px;font-size:.98rem;border-radius:0 0 var(--brad) var(--brad);
  box-shadow:0 -8px 20px rgba(0,0,0,.18)}
.img-pill{position:absolute;top:10px;right:10px;z-index:2;
  background:var(--accent);color:var(--accent-text);
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:20px;
  box-shadow:0 2px 8px rgba(0,0,0,.25);pointer-events:none}

/* ── Bloque "Título y párrafo": editor con barra tipo Word ───────────── */
.text-editor{margin-top:4px}
.text-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:5px;
  margin-bottom:6px;padding:4px 6px;border:1px solid rgba(255,255,255,.12);
  border-radius:10px;background:#fff}
.text-toolbar select{height:30px;box-sizing:border-box;line-height:1;
  font-size:.8rem;font-weight:600;padding:0 8px;border-radius:8px;
  border:1px solid #d8d8e6;background:#fff;color:#2a2a3a;max-width:150px;vertical-align:middle}
.text-toolbar select option{color:#2a2a3a;background:#fff}
/* Casillas/radios ocultos: el botón visible es su <label> */
.tb-check,.tb-radio{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.tb-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  width:30px;height:30px;line-height:1;border-radius:8px;cursor:pointer;
  border:1px solid #d8d8e6;background:#fff;color:#444;font-size:1.05rem;vertical-align:middle}
.tb-btn:hover{background:#f0f0f7}
/* Estado activo: rosa de marca concreto (en el editor --accent no existe) */
.tb-check:checked + .tb-btn,
.tb-radio:checked + .tb-btn{background:#ff2e6e;color:#fff;border-color:#ff2e6e}
/* Control de color: ícono + muestra del color elegido (siempre visible) */
.tb-color{display:inline-flex;align-items:center;justify-content:center;gap:5px;box-sizing:border-box;
  height:30px;line-height:1;padding:0 8px;border-radius:8px;cursor:pointer;
  border:1px solid #d8d8e6;background:#fff;color:#444;font-size:1.05rem;vertical-align:middle}
.tb-color .iconify{display:block;line-height:1}
.tb-color input[type=color]{display:block;width:24px;height:20px;border:1px solid #c9c9da;
  border-radius:4px;background:none;padding:0;margin:0;cursor:pointer}
.tb-sep{width:1px;height:20px;background:#d8d8e6;margin:0 3px}

/* ── Bloque "Título y párrafo": render público ──────────────────────── */
/* Título de contenido: NO hereda el estilo apagado de .block h3 (opacity .6,
   mayúsculas, tracking) para que el color/tamaño elegidos se vean fieles. */
.text-block .text-block-title{margin:0 0 8px;opacity:1;text-transform:none;
  letter-spacing:normal;font-size:1.5rem}
.text-block .text-block-body{color:var(--text);line-height:1.55;
  white-space:normal;word-break:break-word}

/* Miniaturas de fotos seleccionadas antes de subir (editor). */
.file-preview{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 0}
.file-preview .fp-item{width:68px;position:relative}
.file-preview img{width:68px;height:68px;object-fit:cover;border-radius:8px;
  border:1px solid var(--line);display:block}
.file-preview .fp-name{font-size:.62rem;color:var(--muted);margin-top:2px;
  max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-preview .fp-x{position:absolute;top:-7px;right:-7px;width:22px;height:22px;
  border-radius:50%;border:2px solid #fff;background:#d11149;color:#fff;
  font-size:.95rem;line-height:1;cursor:pointer;display:grid;place-items:center;
  padding:0;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.file-preview .fp-x:hover{background:#a50d38}

/* ==================================================================
   EDITOR · REDISEÑO NEUTRO 2026   (rama: editor-rediseno · Paso 1)
   ------------------------------------------------------------------
   Alcance ESTRICTO: solo el panel del cliente (body.ed, que fija
   base_cms.html). Los perfiles públicos (.public, .loy-public,
   .menu-page) NO reciben esta clase => quedan intactos.
   Objetivo del paso: matar el navy saturado + los 4 acentos que
   compiten. Grafito neutro como lienzo; magenta ÚNICO como acento
   (grape/pink colapsan al mismo tono). Verde/ámbar/rojo se reservan
   SOLO para estado (éxito/aviso/error), separados del acento.
   Es una remapeo de tokens: el editor ya estaba hecho para fondo
   oscuro, así que los textos siguen siendo legibles.
   ================================================================== */
body.ed{
  --navy:#0E0E12;      /* lienzo (antes navy saturado #1b1a4e) */
  --surface:#17171D;   /* tarjetas y paneles */
  --navy-2:#1F1F27;    /* superficies anidadas: inputs, tabs, thumbs */
  --line:#282833;      /* bordes */
  --muted:#9EA0AE;     /* texto secundario (antes lavanda #b9b7e0) */
  --pink:#FF4E85;      /* acento único (magenta refinado) */
  --grape:#FF4E85;     /* = acento  → se acaba el morado */
  --accent:#FF4E85;
  --purple:#FF4E85;
  --mint:#34D399;      /* éxito (verde) */
  --gold:#FBBF24;      /* advertencia (ámbar) */
  --ed-ink:#F3F3F7;    /* texto principal */
  --ed-error:#F87171;  /* error/peligro (por fin distinto del aviso) */
  background:var(--navy);
  color:var(--ed-ink);
}

/* Topbar y barra inferior: grafito elevado, no navy */
body.ed .topbar{background:var(--surface)}
body.ed .cms-nav{background:color-mix(in srgb,var(--surface) 92%,transparent)}
body.ed .cms-nav-i:hover{color:var(--ed-ink)}

/* Toasts: superficie neutra y estados por fin diferenciables
   (antes error y aviso compartían el mismo dorado). */
body.ed .msg{background:var(--surface);color:var(--ed-ink);border-color:var(--line)}
body.ed .msg.success{border-color:var(--mint)}
body.ed .msg.warning{border-color:var(--gold)}
body.ed .msg.error{border-color:var(--ed-error)}

/* Íconos de KPI: un solo sistema neutro (se acaba el arcoíris de
   morado/azul/menta/oro con glow). El número manda, no el ícono. */
body.ed .mic-purple,body.ed .mic-blue,body.ed .mic-mint,body.ed .mic-gold,body.ed .mic-pink{
  color:var(--muted);background:color-mix(in srgb,var(--muted) 15%,transparent);box-shadow:none}

/* Dona de dispositivos: el resto del anillo y la 2ª leyenda usaban
   --grape (ahora acento); les damos un neutro para que se distingan. */
body.ed .donut{background:conic-gradient(var(--accent) calc(var(--p)*1%),color-mix(in srgb,var(--muted) 24%,transparent) 0)}
body.ed .dot-b{background:color-mix(in srgb,var(--muted) 34%,transparent)}

/* Pestañas de sección y filtros de fecha: sin glow de neón. */
body.ed .sec-tab .sec-ic svg,body.ed .date-pill svg{filter:none}
body.ed .sec-tab{color:var(--muted)}
body.ed .sec-tab.on{color:#fff}
body.ed .loy-tab{color:var(--ed-ink)}

/* Reporte IA: el título usaba un degradé lavanda/azul fijo y el cuerpo
   un near-white fijo; los llevamos a tinta neutra (sobrio y legible). */
body.ed .air-h{background:none;-webkit-text-fill-color:currentColor;color:var(--ed-ink)}
body.ed .air-body{color:var(--muted)}
body.ed .air-body strong,body.ed .air-body h3{color:var(--ed-ink)}

/* --- Paso 3: acciones (Publicar/Ver/Salir) en el header, fuera de la
   barra de destinos. En móvil ocultamos el correo para dar espacio. --- */
body.ed .topbar-actions{display:flex;align-items:center;gap:8px}
body.ed .topbar-actions .btn-sm{width:auto;white-space:nowrap}
@media (max-width:640px){
  body.ed .topbar-email{display:none}
}

/* --- Paso 4: vista Resumen (componentes propios) --- */
body.ed .res-delta{font-weight:700;font-size:.78rem;margin-left:4px}
body.ed .res-delta.up{color:var(--mint)}
body.ed .res-delta.down{color:var(--ed-error)}
body.ed .kpi2-n.res-alert{color:var(--ed-error)}
body.ed .res-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid var(--line)}
body.ed .res-row:first-of-type{border-top:0}
body.ed .res-grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.ed .res-ava{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--navy-2);color:var(--muted);font-weight:700;font-size:.82rem;font-family:var(--font-display)}

/* ==================================================================
   EDITOR · Paso 2: TEMA CLARO + interruptor (el cliente elige).
   Oscuro grafito sigue siendo el default (body.ed de arriba). El
   atributo data-ed-theme (lo fija el <head> desde localStorage) permite
   cambiar. Aquí: tokens del tema claro + re-punteo de colores fijos del
   editor a tokens para que funcionen en AMBOS temas.
   ================================================================== */
html[data-ed-theme="light"] body.ed{
  --navy:#FAFAFB; --surface:#FFFFFF; --navy-2:#EFEFF4;
  --line:#E5E5EC; --muted:#5B5B6B;
  --pink:#E11D6B; --grape:#E11D6B; --accent:#E11D6B; --purple:#E11D6B;
  --mint:#159A6B; --gold:#B4750A;
  --ed-ink:#1A1A22; --ed-error:#D0384A;
}
/* Elevación por sombra sutil (no glow) en claro; logo blanco -> tinta. */
html[data-ed-theme="light"] body.ed .panel,
html[data-ed-theme="light"] body.ed .kpi2,
html[data-ed-theme="light"] body.ed .dash-card{
  box-shadow:0 1px 2px rgba(20,20,30,.04),0 4px 14px rgba(20,20,30,.05)}
html[data-ed-theme="light"] body.ed .topbar,
html[data-ed-theme="light"] body.ed .cms-nav{
  box-shadow:0 1px 0 var(--line)}
html[data-ed-theme="light"] body.ed .brand-logo img{filter:invert(.88)}
html[data-ed-theme="light"] body.ed .ai-credit-brand{
  background:none;-webkit-text-fill-color:currentColor;color:var(--ed-ink)}

/* Íconos del interruptor: mostrar el del tema OPUESTO (la acción). */
body.ed .ed-theme-toggle{padding:.55em .7em}
html[data-ed-theme="dark"] body.ed .ed-ic-light{display:none}
html[data-ed-theme="light"] body.ed .ed-ic-dark{display:none}

/* Re-punteo de colores fijos del editor a tokens (sirve a AMBOS temas).
   El editor se hizo para fondo oscuro con #fff en duro; esto los ata a
   --ed-ink / --navy-2 para que el tema claro sea legible. */
body.ed .btn-ghost,
body.ed .panel input,body.ed .panel select,body.ed .panel textarea,
body.ed .icon-opt,body.ed .g-thumb input,
body.ed .font-current,body.ed .font-opt,
body.ed .loy-circle input,body.ed .loy-scan-card input,
body.ed .date-pill select,body.ed .quejas-filter select,
body.ed .ai-select{color:var(--ed-ink)}
/* Fondos de campos que estaban en rgba(0,0,0,.2) o blancos translúcidos */
body.ed .panel input,body.ed .panel select,body.ed .panel textarea,
body.ed .icon-opt,body.ed .g-thumb input,
body.ed .font-current,body.ed .font-opt,
body.ed .loy-scan-card input,body.ed .grad-row{background:var(--navy-2)}
body.ed select option{background:var(--surface);color:var(--ed-ink)}
/* Pistas/tracks translúcidos blancos -> neutro visible en ambos temas */
body.ed .rankbarwrap,body.ed .wk-track,body.ed .quota-bar,
body.ed .wr-score{background:color-mix(in srgb,var(--muted) 20%,transparent)}
/* Hovers translúcidos blancos -> neutro por token */
body.ed .sec-tab:hover,body.ed .sec-arrow:hover,
body.ed .insight-row:hover,body.ed .cms-nav-i:hover{
  background:color-mix(in srgb,var(--muted) 14%,transparent)}
/* La barra tipo Word es SIEMPRE clara por diseño: restaurar sus selects. */
body.ed .text-toolbar select{background:#fff;color:#2a2a3a}
/* "Ver más +" del informe usaba lavanda fija (ilegible en claro): al acento. */
body.ed .air-more,body.ed .air-more:hover{color:var(--accent)}
/* Panel IA en CLARO: tinte sutil (el radial saturaba un reporte largo). */
html[data-ed-theme="light"] body.ed .ai-panel{
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 7%,var(--surface)),var(--surface));
  border-color:color-mix(in srgb,var(--accent) 22%,var(--line))}
/* Texto del cupo de correos: usa la tinta del editor (var --text queda blanca
   en claro y "Correos este mes" se perdía sobre la caja clara). */
body.ed .quota-top,body.ed .quota-msg{color:var(--ed-ink)}

/* --- Iconos pro (reemplazo de emojis en el editor) --- */
body.ed .ed-hi{vertical-align:-.12em}                 /* ícono inline en títulos */
body.ed .hl-ico .iconify{color:var(--accent)}          /* callouts (destacados) */
body.ed .type-card .emoji .iconify{color:var(--accent)}/* tarjetas de activación */
body.ed .dash-card .thumb .iconify{color:var(--muted)} /* miniatura por tipo */