/* ===================================================================
   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;min-height:100dvh;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}

/* Aviso de "esto necesita Pro" (cms/_plan_aviso.html, en Analíticas y Leads).
   Hereda de .msg, que nació para los toast flotantes, y arrastraba tres cosas
   que ahí no valen: la posición fija, la sombra y el cursor de mano. El
   recuadro NO se puede tocar; lo único que se toca es su enlace — y ese sí
   tiene que parecerlo, que salía del mismo color que el texto y sin subrayar:
   la única salida del estado estaba invisible. */
.plan-aviso{position:static;transform:none;max-width:none;box-shadow:none;
  cursor:auto;text-align:left}
.plan-aviso a{color:var(--pink);font-weight:600;text-decoration:underline}

/* ===================== 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;min-height:100dvh;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}
/* Aviso de formatos junto a cada subida: se lee antes de elegir el archivo. */
.fmt-note{opacity:.75}
.help ul{margin:4px 0 0;padding-left:1.1em}
.help li{margin:2px 0}
.errorlist{color:var(--gold);font-size:.82rem;list-style:none;padding:0;margin:4px 0}

/* Ojito de ver/ocultar, inyectado por JS en todo input[type=password] */
.pwd-wrap{position:relative;display:block}
.pwd-wrap input{padding-right:2.6em!important;margin-bottom:0!important}
.pwd-toggle{position:absolute;top:0;right:0;bottom:0;width:2.4em;display:flex;
  align-items:center;justify-content:center;background:none;border:0;cursor:pointer;
  color:inherit;opacity:.65;padding:0}
.pwd-toggle:hover{opacity:1}
.pwd-toggle .iconify{font-size:1.2em}

.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
/* Cada tarjeta va envuelta en su propio <form> (activar es POST, ver
   activate_choose): `display:contents` borra la caja del form para que el
   botón siga siendo el hijo directo de la rejilla y el layout no cambie. */
.type-grid form{display:contents}
/* La tarjeta pasó de <a> a <button>: hay que devolverle la tipografía y el
   ancho que el navegador le quita a los botones. */
.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;
  font:inherit;color:inherit;width:100%;cursor:pointer;display:block}
.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)}
/* Ancho del Editor. 900px se veía angosto y perdido en pantallas de
   escritorio; una sola variable mantiene la barra superior alineada con el
   contenido. Las pantallas de lectura larga (reporte IA, checkout) se
   quedan angostas con `.cms-narrow`: 1120px de texto corrido cansa. */
:root{--cms-maxw:1120px}
.topbar .wrap{max-width:var(--cms-maxw);display:flex;align-items:center;justify-content:space-between;height:60px}
.cms{max-width:var(--cms-maxw);margin:0 auto;padding:24px 18px 80px}
.cms.cms-narrow{max-width:820px}

/* Ritmo vertical de las pantallas del Editor.
   Ni `.panel` ni las grillas traen margen propio: cada pantalla se apoyaba en
   el margen del vecino de arriba, y donde caían dos bloques sin margen
   (Personal, Feedback, Menú, Loyalty) las tarjetas salían pegadas, sin una
   línea de aire entre ellas. Esto le da a cada bloque de primer nivel su
   propio margen, así ninguna pantalla depende del vecino.
   Los márgenes verticales entre hermanos COLAPSAN (manda el mayor), así que
   esto nunca se suma a los que ya existen: el `.ai-panel` conserva sus 22px y
   los bloques con 14px suben a 16px. Solo aplica a hijos DIRECTOS de `.cms`;
   los paneles anidados (`.fb-split>.panel`, `.air2-duo>.panel`,
   `.analytics-page>.panel`) siguen espaciándose con el `gap` de su grilla. */
.cms > .panel,
.cms > .editor-grid,
.cms > .kpi-grid,
.cms > .kpi2-grid,
.cms > .fb-split,
.cms > .lead-grid,
.cms > .camp-stack,
.cms > .leads-toolbar,
.cms > .leads-bar,
.cms > .note-card,
.cms > .dash-card,
.cms > .msg{margin-top:16px}
.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;
  transition:transform .14s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease}
.dash-card:hover{transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
  background:color-mix(in srgb,var(--accent) 7%,var(--surface));
  box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 14%,transparent)}
.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;flex-wrap:wrap;gap:4px 16px;font-size:.85rem;opacity:.75;min-width:0;margin-top:4px}
.dash-card .stats span{min-width:0}
.dash-card .meta>.pill{white-space:nowrap}
.dash-card .inline-actions{flex:none;margin-left:auto}
.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}

/* Switch grande manual/automático (ej. Loyalty > Mensajes): <button> con dos
   etiquetas laterales (la activa resaltada) + una pista/perilla deslizante. */
.big-toggle-form{margin:14px 0 10px}
.big-toggle{display:inline-flex;align-items:center;gap:14px;background:none;
  border:none;cursor:pointer;padding:6px;font-family:inherit}
.big-toggle-side{font-size:1.05rem;font-weight:700;color:var(--muted);transition:color .2s ease}
.big-toggle-side.active{color:var(--ed-ink,#fff)}
.big-toggle-track{width:60px;height:32px;border-radius:999px;background:var(--line);
  position:relative;flex:none;transition:background .25s ease;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.3)}
.big-toggle-thumb{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;
  background:#fff;transition:transform .25s ease;box-shadow:0 2px 5px rgba(0,0,0,.35)}
.big-toggle.on .big-toggle-track{background:var(--mint);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--mint) 25%,transparent),inset 0 2px 5px rgba(0,0,0,.2)}
.big-toggle.on .big-toggle-thumb{transform:translateX(28px)}

.editor-grid{display:grid;grid-template-columns:minmax(0,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}
/* En smartphone, dos columnas dejan celdas de ~145px: el botón nativo
   "Seleccionar archivo" necesita el doble y quedaba cortado. Una columna. */
@media (max-width:600px){.row2{grid-template-columns:1fr}}
.loy-filters-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,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}
/* Píldora pequeña, pegada al nombre del bloque: la acción al lado de lo que
   cambia. Era un botón del tamaño de los demás y al otro extremo de la línea,
   así que pesaba lo mismo que "Contenido" o "Publicar" sin serlo. */
.pill-tog{font:inherit;font-weight:600;font-size:.7rem;letter-spacing:.02em;
  line-height:1;cursor:pointer;white-space:nowrap;
  padding:4px 9px;border-radius:999px;border:1px solid var(--line);
  background:transparent;color:var(--muted);
  transition:border-color .15s ease,color .15s ease,opacity .15s ease}
.pill-tog:hover{color:var(--ed-ink,var(--text));
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.title-toggle-btn.title-hidden{opacity:.55;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)}
.panel input[type=file].file-in{font-size:.82rem;padding:8px;background:rgba(0,0,0,.15)}

/* Foto guardada: se quita con la ✕ de la miniatura, no con un casillero. */
.thumb-clearable{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.thumb-clearable [hidden]{display:none}
/* Portadas: apaisada, porque cuadrada se recorta y no se reconoce la foto. */
.thumb-clearable.wide .img-thumb-wrap,
.thumb-clearable.wide .img-thumb-wrap img{width:104px}
.thumb-cleared-note{font-size:.78rem}
.thumb-undo{background:none;border:0;padding:0;cursor:pointer;color:var(--accent);
  font:inherit;text-decoration:underline}

/* ---- 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)}

/* ---- Editar bloque / Editar botón: jerarquía visual premium ----
   Antes todo (título de sección, etiqueta de campo, ayuda) tenía el mismo
   peso y tamaño → look plano de formulario. Esto crea 3 niveles claros:
   .fgroup-title (sección, con ícono sobrio) > .field-label (campo) > .help. */
/* Editar bloque / Editar botón son formularios de una columna: dentro del
   ancho del Editor quedaban pegados a la izquierda. Se centra TODA la página
   (volver + título + panel), no solo la tarjeta, para que no se vea un panel
   centrado bajo un título alineado a la izquierda. */
.ed-form-page{max-width:620px;margin:0 auto}
.ed-form-page .panel-form{max-width:none}

.ed-back{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:var(--muted);margin-bottom:14px;transition:color .15s}
.ed-back:hover{color:var(--ed-ink,#fff)}
.ed-title{font-size:1.7rem;margin-bottom:20px}

.panel-form{padding:28px;position:relative;overflow:hidden}
.panel-form::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--mint),var(--accent) 50%,var(--gold))}

.fgroup{padding:22px 0}
.fgroup:first-child{padding-top:2px}
.fgroup+.fgroup{border-top:1px solid var(--line)}
.fgroup-title{display:flex;align-items:center;gap:10px;font-family:var(--font-display);
  font-weight:700;font-size:.95rem;color:var(--ed-ink,#fff);margin-bottom:16px;letter-spacing:-.01em}
/* Sección plegable de un panel de ajustes (details/summary, sin JS): el mismo
   gesto que las secciones del Editor, para que el panel quepa de un vistazo
   en vez de pedir dos pantallas de scroll. */
.fgroup-drop>summary{list-style:none;cursor:pointer}
.fgroup-drop>summary::-webkit-details-marker{display:none}
.fgroup-drop>summary .collapse-caret{margin-left:auto;font-size:1.35rem}
.fgroup-drop:not([open])>summary{margin-bottom:0}
.fgroup-drop>summary:hover{color:var(--accent)}
.fg-ic{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:8px;background:color-mix(in srgb,var(--muted) 16%,transparent);
  color:var(--muted);font-size:1rem;flex:none}

.panel-form .field-label,.panel-sec .field-label{display:block;font-weight:600;font-size:.8rem;
  color:var(--ed-ink,#fff);opacity:.85;margin:16px 0 6px;letter-spacing:.01em}
.panel-form .fgroup>.field-label:first-of-type,
.panel-sec .fgroup>.field-label:first-of-type{margin-top:0}

.panel-form input:focus,.panel-form select:focus,.panel-form textarea:focus,
.panel-sec input:focus,.panel-sec select:focus,.panel-sec textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}

/* Swatch al lado de una casilla ("Color propio"): con `width:100%` se comía
   la línea entera y partía la etiqueta en dos renglones. */
.panel-form .chk+input[type=color],
.panel-sec .chk+input[type=color]{width:150px;flex:none;margin-bottom:0}

.fg-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:22px;margin-top:4px;border-top:1px solid var(--line);flex-wrap:wrap}
.fg-footer .btn{width:auto;padding:.7em 1.7em}
/* Un "Guardar" suelto dentro del cuerpo de un bloque, a la derecha: la misma
   esquina donde ya están los de las secciones ("Guardar ficha", "Guardar
   identidad") y el "+ Bloque nuevo". */
.btn-der{display:block;margin-left:auto}
/* Un solo botón en el pie: pegado a la derecha, no huérfano a la izquierda.
   El segundo selector cubre el caso del "✓ Guardado" que se inyecta al lado
   del botón tras guardar: sin él, `:only-child` deja de aplicar y el botón
   salta a la izquierda cada vez que aparece el aviso. */
.fg-footer>.btn:only-child,
.fg-footer>.btn:first-child{margin-left:auto}

/* ---- Editor principal (edit.html): la misma jerarquía, sin la franja ----
   `.panel-sec` hereda los 3 niveles de `.panel-form` (sección > campo >
   ayuda) pero NO lleva la franja degradé de arriba: el editor apila ~8
   paneles y repetirla 8 veces es ruido, no jerarquía. El encabezado de cada
   panel (`.sec-head`) usa el mismo ícono sobrio `.fg-ic`, un punto más
   grande porque aquí titula toda una sección. */
.sec-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.sec-head>div{flex:1;min-width:180px}
.sec-head h2{margin:0;font-size:1.05rem;letter-spacing:-.01em}
.sec-head p{margin:3px 0 0;font-size:.8rem;color:var(--muted);line-height:1.5}
.sec-head .fg-ic,.collapse-sum h2 .fg-ic,
.qr-panel h2 .fg-ic{width:34px;height:34px;border-radius:10px;font-size:1.2rem}
/* El panel del QR va centrado: el título con ícono se centra como bloque en línea. */
.qr-panel h2{display:inline-flex;align-items:center;gap:10px}
.sec-head .fg-ic{margin-top:1px}
/* Acción del encabezado (ej: "+ Bloque nuevo"): a la derecha en escritorio,
   línea propia en móvil. */
.sec-head-actions{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
/* `.sec-head>div{flex:1;min-width:180px}` también cazaba a esta caja —es un
   div— así que crecía a media cabecera y su botón quedaba flotando en el
   centro en vez de pegado a la derecha, como el "Guardar" de las demás
   secciones. Hace falta ganarle en especificidad, sin tocar el `margin-left`
   que el móvil pone a 0. */
.sec-head>.sec-head-actions{flex:0 0 auto;min-width:0;justify-content:flex-end}
.sec-head-actions select{width:auto;max-width:190px;margin-bottom:0}
@media (max-width:600px){
  .sec-head-actions{margin-left:0;width:100%;flex-wrap:nowrap}
  .sec-head-actions select{flex:1;max-width:none;min-width:0}
}

/* Sección colapsable (Horario): el ícono va DENTRO del h2 porque <summary>
   solo admite contenido en línea más un encabezado. */
.collapse-sum h2{display:flex;align-items:center;gap:12px}

/* En rejilla de 2 columnas el gap ya separa: la etiqueta no suma margen. */
.panel-sec .row2 .field-label:first-child{margin-top:0}

/* Fila de bloque en móvil: el título y los 3 botones no caben en una línea;
   sin esto el nombre se parte y los botones quedan escalonados. Título
   completo arriba, acciones en su propia línea a la derecha. */
@media (max-width:600px){
  .block-item .bhead{flex-wrap:wrap;align-items:flex-start;row-gap:8px}
  .block-item .bhead>span:first-child{flex:1 1 100%}
  .block-item .inline-actions{width:100%;justify-content:flex-end}
}
/* El primer grupo va pegado al encabezado. No sirve `:first-child` porque el
   primer hijo del <form> es el input oculto del csrf_token. */
.panel-sec .fgroup:first-of-type{padding-top:2px}

/* Encabezado de la página del editor (volver + nombre + estado). */
.ed-page-head .ed-back{margin-bottom:4px}
.ed-page-head h1{margin:0 0 4px}

/* ---- 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}
/* El tamaño vive aquí y no en un `style` de la plantilla: en línea le gana
   a la media query que sube los campos a 16px en el teléfono. */
.g-thumb input[name=pill]{font-size:.75rem;margin-bottom:4px}
.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}

/* Varias casillas en columna con su explicación al lado (ej. "Cómo se muestra"
   en Editar plato). `.chk` sola es inline-flex y las tres se pegaban en una
   línea; aquí se apilan y el texto largo se alinea con la casilla, no debajo. */
.chk-list{display:flex;flex-direction:column;gap:11px}
.chk-list .chk{align-items:flex-start}
.chk-list .chk input[type=checkbox]{margin-top:1px}
.chk-hint{color:var(--muted);font-size:.85em}

/* 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}
/* Un día con dos turnos («12:00 - 15:00» y «18:00 - 23:00») no cabe en
   una línea de teléfono: cada turno va en la suya. */
table.sched .sched-h span{display:block}
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 var(--line)}
.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-eturnos{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.sched-etimes{display:flex;align-items:center;gap:6px;width:100%}
.sched-etimes .muted{font-size:.9rem}
.sched-etimes input[type=time]{flex:1;min-width:0;width:auto}
/* Un día cerrado esconde sus horas del todo. Al guardar se guardan vacías,
   así que dejarlas a la vista prometía algo que el servidor iba a tirar — y
   ofrecerle un "segundo turno" a un día que no abre no significa nada. */
.sched-erow.is-closed .sched-eturnos{display:none}

/* Copiar este día a los otros seis. Es lo que convierte 28 casillas de hora
   en 4: casi ningún local cambia de horario a diario. */
.sched-copy{margin-left:auto;border:1px solid var(--line);background:none;
  color:var(--muted);border-radius:9px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;min-height:40px}
.sched-copy:hover{border-color:var(--mint);color:var(--mint)}
.sched-copy .iconify{font-size:1.05rem}

/* Segundo turno (el que cierra al mediodía y vuelve en la noche). */
.sched-mas{border:0;background:none;color:var(--mint);cursor:pointer;
  font-size:.85rem;padding:2px 0;display:inline-flex;align-items:center;gap:3px}
/* La ✕ del segundo turno va estrecha a propósito: en un teléfono le roba el
   ancho a las casillas de hora, y "06:00 p. m." cortado a "06:00 p." no se
   puede leer. Estrecha pero alta, que es la dimensión que se toca. */
.sched-quitar{border:0;background:none;color:var(--muted);cursor:pointer;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;min-height:40px;padding:0}
.sched-quitar:hover{color:var(--pink)}
/* `display:flex`/`inline-flex` le gana al display:none que el navegador le
   pone a [hidden]: sin estas dos líneas, esconderlos no esconde nada. */
.sched-t2[hidden]{display:none}
.sched-mas[hidden]{display:none}

/* En el teléfono cada píxel de la casilla es texto: con el relleno de siempre,
   "06:00 p. m." se cortaba en "06:00 p." en el segundo turno, que es el que
   paga la ✕. Solo aquí; en escritorio sobra el sitio. */
@media (max-width:719px){
  .sched-etimes{gap:5px}
  .sched-etimes input[type=time]{padding-left:7px;padding-right:5px}
  .sched-quitar{min-width:22px}
}

/* En escritorio el día y "Cerrado" van a la izquierda y los turnos a la
   derecha. Apilados, cada input de hora se estiraba media pantalla. */
@media (min-width:720px){
  .sched-erow{flex-direction:row;align-items:flex-start;gap:16px}
  .sched-etop{flex:none;width:268px;padding-top:7px}
  .sched-eturnos{flex:none}
  .sched-etimes{width:auto}
  .sched-etimes input[type=time]{flex:none;width:150px}
}

/* 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)}

/* Quitar una foto de la galería: la misma ✕ sobre la miniatura que en el
   resto del Editor, en vez de un botón "Eliminar" debajo. Va pegada a la
   esquina de la foto (no fuera, como en .img-remove-x) porque aquí la
   miniatura llega hasta el borde de la tarjeta y saldría cortada. */
.g-thumb{position:relative}
.g-del{position:absolute;top:14px;right:14px;margin:0;line-height:0}
.g-del button{width:24px;height:24px;border-radius:50%;border:2px solid var(--surface,#17171D);
  background:var(--pink,#ff2e6e);color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:.7rem;padding:0;line-height:1}
.g-del button:hover{filter:brightness(1.1)}
.g-del button:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* 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}
/* Nombre + Email: la única fila que se ve con el formulario cerrado. */
.lead-row{display:flex;gap:8px}
.lead-row input{flex:1 1 50%;min-width:0}
/* Lo que aparece al primer toque. Solo se esconde si el script pudo colapsarlo
   (clase en el <form>); sin JS el formulario sale entero. */
.leadform form.lead-collapsed .lead-more{display:none}
.leadform form.lead-open .lead-more{animation:lead-desplegar .22s ease}
@keyframes lead-desplegar{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.phone-row{display:flex;gap:8px}
/* Ancho fijo y chico porque el desplegable ya no dice el nombre del país, solo
   "🇪🇨 +593": la bandera más cuatro dígitos y la flecha caben en 112px en
   cualquier teléfono, y todo lo demás se lo queda el WhatsApp, que es el dato
   que de verdad se escribe. El max-width es el freno para pantallas de 320px. */
.phone-row .cc-select{flex:0 0 112px;max-width:42%}
.phone-row input[type=tel]{flex:1;min-width:0}
/* Provincia + ciudad en una fila, como el país + WhatsApp de arriba. La razón
   es de conversión, no estética: preguntar de dónde viene son dos datos, pero
   apilarlos alargaría el formulario y lo largo es lo que se abandona. Se
   reparten mitad y mitad porque los nombres largos ("Santo Domingo de los
   Tsáchilas") se cortan igual con el desplegable, y ninguno manda sobre el otro. */
.region-row{display:flex;gap:8px}
.region-row select{flex:1 1 50%;min-width:0}
.region-row select[hidden]{display:none}
.lead-bday{display:block;font-size:.78rem;opacity:.85;margin:2px 0 4px;text-align:left}
.lead-bday input{margin-top:4px}
/* Género + nacimiento en una fila. Se alinean por abajo (align-items:end) para
   que el desplegable quede a la misma altura que la fecha, que arriba lleva su
   rótulo: sin eso el género flotaría una línea más arriba. */
.lead-two{display:flex;gap:8px;align-items:flex-end;margin-bottom:10px}
.lead-two > *{flex:1 1 50%;min-width:0}
.lead-two select,.lead-two input,.lead-two .lead-bday{margin-bottom:0}
.lead-two .lead-bday{margin-top:0}
.lead-consent{display:flex;align-items:flex-start;gap:8px;font-size:.74rem;line-height:1.35;margin:6px 0 12px;text-align:left;opacity:.92}
.lead-consent input[type=checkbox]{width:16px;height:16px;flex:0 0 16px;margin-top:1px}
.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}
/* Cabecera de mes: sello + conteo + línea que llega hasta el borde. La línea
   es lo que separa un mes de otro sin meter un título gigante cada 20 filas. */
.lead-month-head{display:flex;align-items:center;gap:10px;margin:26px 0 12px}
.lead-month-head:first-child{margin-top:0}
.lead-month{padding:6px 13px;border-radius:999px;background:var(--accent);color:#fff;
  font-weight:700;font-size:.85rem;text-transform:capitalize;white-space:nowrap}
.lead-month-n{font-size:.78rem;font-weight:700;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:3px 9px;white-space:nowrap}
.lead-month-line{flex:1;height:1px;background:var(--line)}

/* Píldoras de datos. Nacieron en las tarjetas de leads; ahora viven dentro
   del desplegable de la fila, en Leads y en Loyalty por igual. El correo y el
   teléfono son TOCABLES (mailto:/tel:) — que es lo que el dueño hace con un
   lead; `.plain` es dato que no se pulsa. */
.lead-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.lead-chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;
  font-size:.76rem;color:var(--muted);background:color-mix(in srgb,var(--muted) 10%,transparent);
  border:1px solid transparent;border-radius:999px;padding:3px 9px;
  transition:color .12s ease,background .12s ease,border-color .12s ease}
.lead-chip svg{width:13px;height:13px;flex:none;opacity:.8}
.lead-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Solo los accionables (correo y teléfono) se iluminan: `.plain` es dato. */
a.lead-chip:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  background:color-mix(in srgb,var(--accent) 12%,transparent)}
/* Sello de si se le puede escribir. Es la lectura que decide si vale la pena
   una campaña, y hasta ahora no estaba en ninguna parte de esta pantalla. */
.lead-flag{font-size:.7rem;font-weight:700;letter-spacing:.02em;
  border-radius:999px;padding:3px 9px;white-space:nowrap;
  color:var(--muted);background:color-mix(in srgb,var(--muted) 13%,transparent)}
.lead-flag.ok{color:var(--mint);background:color-mix(in srgb,var(--mint) 14%,transparent)}
.lead-flag.baja{color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,transparent)}
.lead-delete-btn{background:none;border:none;cursor:pointer;color:var(--muted,rgba(255,255,255,.6));
  font-size:.9rem;line-height:1;padding:2px 4px;border-radius:6px;
  opacity:.35;transition:opacity .14s ease,color .14s ease,background .14s ease}
.lead-delete-btn:hover{color:#ff2e6e;background:rgba(255,46,110,.12);opacity:1}
@media (hover:none){.lead-delete-btn{opacity:.7}}

/* Leads · pestaña DATOS: barra de trabajo (buscar + filtrar + descargar) */
.leads-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:16px 0 0}
/* `color:inherit` y no var(--text): ese token solo existe en el perfil
   público; aquí manda la tinta del Editor, que cambia con claro/oscuro. */
.leads-toolbar select{background:var(--surface);border:1px solid var(--line);color:inherit;
  border-radius:999px;padding:7px 12px;font-size:.85rem;font-weight:600;cursor:pointer;
  width:auto;margin:0}
.leads-toolbar .btn-sm{flex:none}
.lead-search{flex:1 1 260px;min-width:200px;display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:0 14px;
  transition:border-color .14s ease,box-shadow .14s ease}
.lead-search:focus-within{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.lead-search svg{width:16px;height:16px;flex:none;color:var(--muted)}
.lead-search input{flex:1;min-width:0;background:none;border:0;outline:none;margin:0;
  padding:9px 0;font-size:.88rem;color:inherit;font-family:inherit}
.lead-count{margin-left:auto;font-size:.85rem}
.lead-count strong{font-family:var(--font-display)}
.leads-bar .lead-csv{flex:none}
.lead-clear{font-size:.8rem;font-weight:600;color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  border-radius:999px;padding:5px 12px}
.lead-clear:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.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}

/* Leads · pestaña RESUMEN
   Los KPIs son los mismos `.kpi2` de Analíticas (un solo sistema de tarjetas
   en todo el Editor); aquí solo se añade lo que esta pantalla necesita. */
.lead-kpi{cursor:pointer}                       /* la tarjeta entera es enlace */
.kpi2-go{margin-left:auto;font-size:.9rem;color:var(--muted);
  opacity:0;transform:translateX(-4px);transition:opacity .14s ease,transform .14s ease}
.kpi2.accent .kpi2-go{color:#fff}
.lead-kpi:hover .kpi2-go,.lead-kpi:focus-visible .kpi2-go{opacity:.9;transform:none}
.lead-panel-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;flex-wrap:wrap;margin-bottom:10px}
.lead-panel-head .lead-h{margin:0}
.lead-more{font-size:.8rem;font-weight:600;color:var(--accent);white-space:nowrap}
.lead-more:hover{text-decoration:underline}
.lead-grid{display:grid;grid-template-columns:1fr;gap:14px;margin:14px 0}
@media (min-width:900px){.lead-grid{grid-template-columns:1fr 1fr}}
.lead-h{font-size:1rem;font-weight:700;margin:0 0 8px}
/* Filas del resumen (últimos registros / cumpleaños): heredan .res-row y solo
   añaden la segunda línea y el sello de "cuándo". */
.lead-rsub{display:block;font-size:.78rem;color:var(--muted);font-weight:400;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lead-when{flex:none;font-size:.74rem;font-weight:600;color:var(--muted);
  background:color-mix(in srgb,var(--muted) 12%,transparent);
  border-radius:999px;padding:3px 9px;white-space:nowrap}
.lead-when.fresh{color:var(--mint);background:color-mix(in srgb,var(--mint) 14%,transparent)}
.lead-when.hoy{color:#fff;background:var(--accent)}
.res-ava.hoy{background:var(--accent);color:#fff}
/* Estado vacío: ícono + qué hacer. Un "no hay nada" a secas deja al cliente
   sin saber si está roto o si le falta encender algo. */
/* Leads · la lista en filas de una línea (sustituye a las tarjetas .lead-card).
   El problema de las tarjetas era el volumen: seis datos por lead, cada uno en
   su píldora, hacían que veinte leads se leyeran como un muro. La fila cerrada
   deja SOLO lo que decide algo —quién es, si se le puede escribir, y a qué
   correo— y el resto vive en el desplegable. Es <details>/<summary> nativo:
   cero JS, abre con Enter y el lector de pantalla ya sabe anunciarlo. */
.lrow-list{display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--navy-2)}
.lrow+.lrow{border-top:1px solid var(--line)}
/* Seis columnas fijas, iguales en Leads y en Loyalty, para que las dos
   pantallas se lean con el mismo golpe de vista: quién es · en qué estado
   está · su dato propio (el correo en Leads, los sellos en Loyalty) · lo de
   la derecha (la fecha en Leads, el nivel en Loyalty) · la flecha. */
.lrow-head{display:grid;align-items:center;gap:10px;
  grid-template-columns:auto minmax(120px,1fr) auto minmax(0,1.3fr) auto 18px;
  padding:9px 14px;cursor:pointer;list-style:none;
  transition:background .12s ease}
.lrow-head::-webkit-details-marker{display:none}
.lrow-head:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.lrow-head:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.lrow[open] .lrow-head{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.lrow-ava{flex:none}
/* Tres clases para ganarle a `body.ed .res-ava`, igual que en las tarjetas. */
.lrow-list .lrow .lrow-ava{width:26px;height:26px;border-radius:8px;font-size:.72rem;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.lrow-name{font-weight:700;font-size:.9rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* `.lrow-side` es SOLO posición (la columna de la derecha): en Loyalty ahí va
   el sello del nivel, que trae su propio color y no puede heredar el gris. */
.lrow-sub,.lrow-date{font-size:.78rem;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow-side{justify-self:end}
.lrow-caret{width:16px;height:16px;color:var(--muted);flex:none;
  transition:transform .16s ease}
.lrow[open] .lrow-caret{transform:rotate(180deg)}
/* El cuerpo arranca alineado con el nombre, no con el borde: la sangría es lo
   que dice de un vistazo que esto cuelga de la fila de arriba. */
.lrow-body{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;
  padding:2px 14px 13px 50px}
.lrow-body .lead-chips{flex:1;min-width:0;margin-top:0}
.lrow-del{flex:none}
.lrow-del .lead-delete-btn{opacity:.6;font-size:.76rem;font-weight:600;padding:4px 9px}
.lrow-del .lead-delete-btn:hover,
.lrow-del .lead-delete-btn:focus-visible{opacity:1}
/* Loyalty: al miembro con historial no se le puede borrar. Antes era una ✕
   apagada que había que adivinar; en el desplegable hay sitio para el porqué. */
.lrow-nodel{flex:none;font-size:.74rem;color:var(--muted);opacity:.75;
  align-self:center;max-width:100%}
/* En teléfono no caben seis columnas. La fila se parte en DOS renglones y no
   más: nombre arriba, sello y fecha abajo. El correo se esconde a propósito —
   en 375px se cortaría con puntos suspensivos, y un correo cortado no sirve
   para nada; abajo, en el desplegable, sale entero y además es tocable. */
@media (max-width:640px){
  .lrow-head{grid-template-columns:auto auto 1fr auto 18px;gap:5px 9px;padding:10px 12px}
  .lrow-ava{grid-area:1/1/3/2}
  /* En teléfono el nombre puede ocupar dos renglones antes que cortarse: entre
     «Andre Felipe Gira…» y el nombre entero, gana el nombre. Cada fila crece
     por su cuenta, así que la lista sigue leyéndose como lista. */
  .lrow-name{grid-area:1/2/2/4;white-space:normal;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2}
  /* Lo de la derecha (fecha o nivel) sube al renglón del nombre: abajo, con el
     sello y los sellos de la tarjeta, los tres juntos no caben en 375px y el
     del medio se cortaba («3/8 sello…»). El nombre tiene puntos suspensivos,
     así que es el único que puede ceder ancho sin perder un dato. */
  .lrow-side{grid-area:1/4/2/5;justify-self:end}
  .lrow-caret{grid-area:1/5/2/6}
  .lrow-head .lead-flag{grid-area:2/2/3/3;justify-self:start}
  .lrow-sub{grid-area:2/3/3/5;justify-self:start}
  /* `.mail` es el dato que NO cabe en 375px: se cortaría con puntos
     suspensivos, y un correo cortado no sirve para nada. Abajo, en el
     desplegable, sale entero y además es tocable. Los sellos de Loyalty
     («3/8 sellos») son cortos y sí se quedan. */
  .lrow-sub.mail{display:none}
  .lrow-body{flex-direction:column;align-items:flex-start;gap:9px;padding:4px 12px 12px 12px}
  .lrow-body .lead-chips{width:100%}
}

.lead-empty{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:12px;padding:26px 10px 20px}
.lead-empty p{margin:0;font-size:.9rem;line-height:1.5}
.lead-empty .muted{font-size:.84rem}
/* Eje del gráfico de 30 días: solo una de cada siete columnas lleva rótulo,
   así que las celdas van a ancho igual y no repartidas por su texto. */
.vchart-x-30{justify-content:flex-start}
.vchart-x-30>span{flex:1 0 0;text-align:center}
.vchart-foot{font-size:.75rem;margin:8px 0 0}
.wk-bars{display:flex;flex-direction:column;gap:8px}
.wk-row{display:flex;align-items:center;gap:10px;font-size:.85rem;
  padding:2px 6px;margin:0 -6px;border-radius:8px;transition:background .12s ease}
.wk-row:hover{background:color-mix(in srgb,var(--muted) 8%,transparent)}
.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));
  transform-origin:left;animation:wkgrow .5s cubic-bezier(.22,1,.36,1) both}
@keyframes wkgrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.wk-fill{animation:none}}
/* La fila ganadora se marca: es la lectura del panel, no una fila más. */
.wk-row.wk-top .wk-day,.wk-row.wk-top .wk-count{color:var(--ed-ink,#fff);font-weight:700}
.wk-row.wk-top .wk-fill{box-shadow:0 0 12px -2px color-mix(in srgb,var(--accent) 70%,transparent)}
.wk-count{width:28px;text-align:right;flex:none}
/* Mismas barras para "De dónde te visitan", con dos ajustes: los 84px de
   "Miércoles" no aguantan "Santo Domingo de los Tsáchilas", y el conteo lleva
   el porcentaje al lado. Modificador y no clase nueva: la barra es la misma. */
.wk-bars.wk-wide .wk-day{width:150px;overflow-wrap:anywhere}
.wk-bars.wk-wide .wk-count{width:66px}
@media(max-width:520px){.wk-bars.wk-wide .wk-day{width:104px}}
.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:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px 14px;align-items:end;margin-bottom:10px}
.cf-field{display:flex;flex-direction:column;gap:4px;font-size:.85rem;margin-bottom:0}
.cf-field>span{font-weight:600;color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.03em}
.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:7px 10px;font-size:.85rem;width:100%;margin-bottom:0}
.cf-field select option{background:var(--navy-2);color:#fff}
.cf-range{display:flex;gap:6px}
.campaign-actions{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin-top:2px}
.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;
  max-height:130px;overflow-y:auto;padding-right:2px}
.cp-chip{font-size:.78rem;padding:3px 10px;border-radius:999px;flex:none;
  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}
/* Grid con columnas de ancho fijo (no flex): así el pill de estado y la
   fecha arrancan siempre en la misma X en todas las filas. Con flex, cada
   fila reserva solo el ancho que su propio texto de estado necesita
   ("Borrador" vs "Enviada · 9" vs "Programada · 31 Jul 18:30"), y esa
   diferencia de ancho corre la fecha/caret de cada fila a un lado distinto
   ("chueco"). */
/* Las dos columnas de en medio se dimensionaron con fechas abreviadas
   ("31 Jul 18:30"); con los meses escritos completos —que es la regla del
   proyecto— el sello de "Programada" se montaba encima de la fecha. */
.camp-row{display:grid;grid-template-columns:1fr 215px 175px 16px;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{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;justify-self:start;text-align:left;
  min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.camp-row .muted{justify-self:start;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}
.camp-row .camp-caret{justify-self:end}
/* En teléfono no caben cuatro columnas: la fecha baja a su propia línea. */
@media (max-width:640px){
  .camp-row{grid-template-columns:1fr auto 16px;row-gap:3px}
  .camp-row .muted{grid-column:1/-1;font-size:.76rem}
}
.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)}
/* "Falló" en rojo de error y no en el magenta de marca: el sistema del Editor
   reserva verde/ámbar/rojo para estado, y el acento para lo que se toca. */
.camp-status.camp-failed{color:var(--ed-error,var(--pink));border-color:var(--ed-error,var(--pink))}
/* Campañas abribles: cada fila es un <details> que muestra el mensaje enviado.
   Al pasar el mouse la fila se tiñe DEL COLOR DE SU ESTADO (--camp-c): así se
   lee de un vistazo si lo que se está por abrir es una campaña enviada, una
   que falló o un borrador, sin tener que llegar al sello. El color se declara
   una sola vez en el <details> y lo heredan el fondo, la barra lateral y el
   sello. */
.camp-item{border-bottom:1px solid var(--line);--camp-c:var(--muted)}
.camp-item.camp-done{--camp-c:var(--mint)}
.camp-item.camp-sending,.camp-item.camp-pending{--camp-c:var(--gold)}
.camp-item.camp-failed{--camp-c:var(--ed-error,var(--pink))}
.camp-item.camp-scheduled{--camp-c:var(--chart-2,var(--grape))}
.camp-item:last-child{border-bottom:0}
.camp-item .camp-row{border-bottom:0;cursor:pointer;list-style:none;position:relative;
  margin:0 -10px;padding:8px 10px 8px 14px;border-radius:11px;
  transition:background .16s ease,box-shadow .16s ease}
.camp-item .camp-row::-webkit-details-marker{display:none}
/* Barra lateral del color del estado: crece desde el centro al pasar el mouse */
.camp-item .camp-row::before{content:"";position:absolute;left:2px;top:7px;bottom:7px;
  width:3px;border-radius:3px;background:var(--camp-c);
  opacity:0;transform:scaleY(.3);transition:opacity .16s ease,transform .16s ease}
.camp-item:hover>.camp-row,.camp-item>.camp-row:focus-visible{
  background:color-mix(in srgb,var(--camp-c) 15%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--camp-c) 32%,transparent)}
.camp-item:hover>.camp-row::before,.camp-item[open]>.camp-row::before{opacity:1;transform:scaleY(1)}
.camp-item[open]>.camp-row{background:color-mix(in srgb,var(--camp-c) 9%,transparent)}
/* El sello se rellena en el hover (hasta ahí era solo un borde) */
.camp-item:hover .camp-status{background:color-mix(in srgb,var(--camp-c) 16%,transparent);
  border-color:var(--camp-c)}
.camp-item:hover .camp-subj{color:var(--ed-ink,#fff)}
.camp-item:hover .camp-caret{opacity:1;color:var(--camp-c)}
.camp-status{transition:background .16s ease,border-color .16s ease}
@media (prefers-reduced-motion:reduce){
  .camp-item .camp-row,.camp-item .camp-row::before,.camp-status{transition:none}
}
.camp-caret{font-size:.75rem;opacity:.6;transition:transform .15s ease}
.camp-item[open] .camp-caret{transform:rotate(180deg)}
.camp-detail{padding:4px 0 14px;font-size:.88rem}
.camp-seg{font-size:.8rem;margin:0 0 8px}
.camp-img{display:block;max-width:320px;width:100%;border-radius:12px;margin:0 0 10px}
.camp-body{white-space:normal;line-height:1.55;background:rgba(124,92,255,.07);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.camp-body p,.camp-body ol,.camp-body ul{margin:0 0 10px}
.camp-body p:last-child,.camp-body ol:last-child,.camp-body ul:last-child{margin-bottom:0}
.camp-status.camp-draft{color:var(--muted);border-color:var(--line)}
/* En el Editor `--grape` está remapeado al mismo magenta que `--pink`, así que
   "Programada" y "Falló" salían EXACTAMENTE del mismo color: dos estados
   opuestos indistinguibles. Programada usa el violeta categórico, que ya está
   validado en claro y oscuro. */
.camp-status.camp-scheduled{color:var(--chart-2,var(--grape));border-color:var(--chart-2,var(--grape))}

/* Encabezado de "Nueva campaña" (Leads → Enviar mensajes) */
.camp-page-head{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin:14px 0 4px}
.camp-page-title{display:flex;align-items:center;gap:12px}
.camp-page-title h1{margin:0;font-size:1.4rem}
.camp-quota-chip{display:flex;flex-direction:column;gap:4px;min-width:190px}
.camp-quota-chip .cqc-top{display:flex;justify-content:space-between;gap:10px;
  font-size:.78rem;color:var(--muted)}
.camp-quota-chip .cqc-bar{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.camp-quota-chip .cqc-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--mint),var(--grape))}

/* Encabezado reutilizable de panel: ícono + título + subtítulo */
.panel-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.panel-head h2{margin:0;font-size:1.05rem}
.panel-head p{margin:2px 0 0;font-size:.82rem;color:var(--muted)}

/* Franja de "N destinatarios encontrados" + Ver lista completa */
.camp-recipients-strip{display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:14px;margin-top:2px}
.camp-recipients-count{display:flex;align-items:center;gap:8px;font-size:.92rem}
.camp-recipients-count .iconify{color:var(--mint);font-size:1.25rem;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--mint) 70%,transparent))}

/* Chips de destinatarios con avatar de iniciales */
.cp-chip-ava{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;
  padding:3px 10px 3px 3px;border-radius:999px;background:rgba(124,92,255,.12);border:1px solid var(--line)}
.cp-chip-ava .ava{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:.62rem;font-weight:800;color:#fff;flex:none}
.ava-a{background:var(--grape)}
.ava-b{background:var(--pink)}
.ava-c{background:var(--mint);color:#06281d}
.ava-d{background:var(--gold);color:#3a2a00}
/* "+N más": es un enlace, no un cartel. Quien lee "+5 más" quiere ver a
   esos 5, así que abre la misma lista completa. */
.cp-more{font-size:.8rem;color:var(--muted);align-self:center;background:none;
  border:none;padding:0 4px;cursor:pointer;text-decoration:underline;
  text-underline-offset:2px;font-family:inherit}
.cp-more:hover{color:var(--grape)}

/* Compositor de campañas: Destinatarios plegado arriba, Mensaje a lo ancho.
   Partir la pantalla en dos columnas dejaba el correo —lo único que el dueño
   está escribiendo de verdad— en media pantalla; los filtros se tocan una vez
   al principio y luego estorban. */
.camp-stack{display:flex;flex-direction:column;gap:14px;margin:14px 0}
.camp-seg-det>summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none}
.camp-seg-det>summary::-webkit-details-marker{display:none}
.camp-seg-sum{flex:1;min-width:0}
.camp-seg-sum h2{margin:0;font-size:1.05rem}
.camp-seg-sum p{margin:2px 0 0;font-size:.82rem;color:var(--muted)}
.camp-seg-sum strong{color:var(--mint)}
.camp-seg-toggle{display:inline-flex;align-items:center;gap:6px;flex:none;
  font-size:.8rem;color:var(--muted);border:1px solid var(--line);
  border-radius:999px;padding:5px 12px}
.camp-seg-det>summary:hover .camp-seg-toggle{color:var(--ed-ink,#fff);border-color:var(--grape)}
.camp-seg-det[open]>summary .camp-caret{transform:rotate(180deg)}
.camp-seg-det .campaign-seg{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.camp-seg-panel .camp-recipients-strip{margin-top:12px}
.camp-recipients-strip .campaign-preview{flex:1 1 240px;min-width:0;margin-top:0;
  max-height:72px}

/* Lista completa de destinatarios: una fila por persona, con scroll.
   En chips todos pegados no se distingue dónde acaba un nombre y empieza
   el siguiente, que es justo lo que se viene a comprobar antes de enviar. */
.cp-list{display:flex;flex-direction:column;max-height:56vh;overflow-y:auto;
  border:1px solid #eee;border-radius:12px}
.cp-row{display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-bottom:1px solid #f0f0f4}
.cp-row:last-child{border-bottom:none}
.cp-row .ava{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-size:.66rem;font-weight:800;color:#fff;flex:none}
.cp-row-txt{display:flex;flex-direction:column;min-width:0}
.cp-row-name{font-weight:600;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-row-mail{font-size:.76rem;color:#6b6a8f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.dz-label-row{display:flex;align-items:center;gap:8px;margin-top:4px}
.dz-label{font-weight:600;font-size:.92rem}
.pill-mini{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:#06281d;background:var(--mint);border:1px solid transparent;border-radius:6px;padding:1px 7px}
.dz-caption{font-size:.76rem;margin:2px 0 6px}

/* Dropzone de imagen (arrastrar y soltar) */
.dropzone{position:relative;border:1.5px dashed var(--line);border-radius:14px;
  padding:22px 16px;text-align:center;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.dropzone:hover,.dropzone.drag-over{border-color:var(--grape);background:rgba(124,92,255,.06)}
.dropzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.dropzone .dz-ic{font-size:1.8rem;color:var(--grape);margin-bottom:6px}
.dropzone .dz-txt{font-size:.88rem;font-weight:600}
.dropzone .dz-help{font-size:.76rem;color:var(--muted);margin-top:2px}
.dropzone.has-file .dz-ic,.dropzone.has-file .dz-txt,.dropzone.has-file .dz-help{opacity:.45}

/* Fila de "Programar envío" (se revela con JS) */
.camp-schedule-row{display:none;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--navy-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-top:2px}
.camp-schedule-row.show{display:flex}
.camp-schedule-row input[type=datetime-local]{background:var(--surface);border:1px solid var(--line);
  color:var(--text);border-radius:10px;padding:7px 10px;font-size:.85rem}

/* Selector de fecha/hora propio de "Programar envío" (calendario + hora +
   atajos), en vez del <input type=datetime-local> nativo del navegador. */
.sched-picker{position:relative}
.sched-trigger{display:flex;align-items:center;gap:8px;background:var(--surface);
  border:1px solid var(--line);color:var(--text);border-radius:10px;padding:8px 14px;
  font-size:.85rem;font-weight:600;cursor:pointer;font-family:inherit}
.sched-trigger:hover{border-color:var(--grape)}
.sched-trigger .iconify{font-size:1.05rem;color:var(--grape)}
.sched-popover{position:absolute;top:calc(100% + 8px);left:0;z-index:60;width:272px;
  background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.4);padding:14px}
.sched-popover[hidden]{display:none}
.sched-quick{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.sched-chip{border:1px solid var(--line);background:var(--navy-2);color:var(--text);
  border-radius:999px;padding:5px 10px;font-size:.7rem;font-weight:700;cursor:pointer;font-family:inherit}
.sched-chip:hover{border-color:var(--grape);color:var(--grape)}
.sched-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.sched-cal-head span{font-weight:700;font-size:.85rem;text-transform:capitalize}
.sched-nav{border:none;background:none;font-size:1.15rem;cursor:pointer;color:var(--muted);
  width:26px;height:26px;border-radius:8px;line-height:1}
.sched-nav:hover{background:var(--navy-2);color:var(--text)}
.sched-cal-dow{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;
  font-size:.65rem;color:var(--muted);margin-bottom:4px}
.sched-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.sched-day{border:none;background:none;border-radius:8px;padding:6px 0;font-size:.8rem;
  cursor:pointer;color:var(--text);font-family:inherit}
.sched-day:hover:not(:disabled){background:var(--navy-2)}
.sched-day:disabled{color:var(--line);cursor:not-allowed}
.sched-day.is-today{font-weight:800;color:var(--mint)}
.sched-day.is-selected{background:var(--grape);color:#fff}
.sched-day.is-empty{visibility:hidden;pointer-events:none}
.sched-time-row{display:flex;align-items:center;gap:8px;margin:10px 0 2px;
  border-top:1px solid var(--line);padding-top:10px}
.sched-time-row .iconify{color:var(--grape)}
.sched-time-row input[type=time]{background:var(--navy-2);border:1px solid var(--line);
  color:var(--text);border-radius:8px;padding:5px 8px;font-size:.85rem;font-family:inherit}
.sched-popover-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.sched-error{font-size:.72rem;color:var(--pink);margin:8px 0 0}

/* Botón "Preview": el más importante de la fila (así se revisa el correo
   antes de mandarlo), se distingue con otro color y más ancho. */
.btn-preview{background:var(--mint);color:#06281d;padding:.6em 1.5em;font-weight:700}
.btn-preview .iconify{font-size:1.1rem}
.btn-preview:hover{filter:brightness(1.06)}

/* Modal de borradores: cada tarjeta se puede seguir editando, cerrar (quitar
   de esta lista sin borrar) o borrar (elimina la campaña para siempre). */
.drafts-list{display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow:auto;margin-top:4px}
.draft-card{border:1px solid #eee;border-radius:12px;padding:12px 14px;background:#fafafe}
.draft-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.draft-card-subj{font-weight:700;font-size:.92rem}
.draft-card-date{font-size:.72rem;color:#8a8aa0;white-space:nowrap}
.draft-card-snippet{margin:6px 0 10px;font-size:.82rem;color:#5a5a72;line-height:1.4}
.draft-card-actions{display:flex;align-items:center;gap:6px}
.draft-card-actions form{margin:0}
/* Los modales de Borradores/Programados son siempre blancos (como el preview de correo), pero
   .btn-ghost está pensado para fondo oscuro (texto claro, incluso remapeado
   a --ed-ink por el tema del Editor) — sobre blanco queda invisible. Se fija
   con un selector de ID para ganarle a esa regla sin importar el tema. */
#drafts-modal .btn-ghost,#scheduled-modal .btn-ghost{color:#1b1a4e;border-color:#ddd}
#drafts-modal .btn-ghost:hover,#scheduled-modal .btn-ghost:hover{background:#f2f2f7}
.draft-icon-btn{border:1px solid #eee;background:#fff;border-radius:8px;width:32px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#5a5a72;font-size:1rem}
.draft-icon-btn:hover{background:#f2f2f7}
.draft-icon-danger:hover{background:rgba(255,46,110,.1);color:#ff2e6e;border-color:#ff2e6e}

/* Editor de texto enriquecido (Quill) — siempre fondo blanco: así se ve igual
   a como llegará el correo, sin depender del tema claro/oscuro del Editor.
   La barra de herramientas reutiliza el mismo componente .text-toolbar del
   bloque "Título y párrafo" del Editor (ver edit.html) en vez del toolbar
   propio de Quill, para que se vea y funcione igual en todo el panel. */
.rich-editor{margin-top:6px}
.rich-editor .ql-container.ql-snow{border-radius:10px;border-color:var(--line);background:#fff}
.rich-editor .ql-editor{min-height:280px;color:#1b1a4e;font-size:.95rem;line-height:1.55}
.rich-editor .ql-editor.ql-blank::before{color:#8a8aa0}
/* Quill pone margin:0 en <p>/<ol>/<ul> por defecto: se ve compacto en el
   editor pero el HTML final (preview y correo real, sin las clases de Quill)
   cae al margen por defecto del navegador y se ve mucho más separado. Se
   restaura aquí el mismo espaciado para que editor y resultado coincidan.
   Margen fijo en px (no em): con em, un título en letra grande hereda un
   margen igual de grande y el hueco entre líneas se ve enorme aunque el
   interlineado esté en 1 — el interlineado solo afecta el espacio DENTRO
   de un párrafo, no el espacio ENTRE párrafos. */
.rich-editor .ql-editor p,.rich-editor .ql-editor ol,.rich-editor .ql-editor ul{margin:0 0 10px}
.rich-editor .ql-editor p:last-child,.rich-editor .ql-editor ol:last-child,.rich-editor .ql-editor ul:last-child{margin-bottom:0}

/* Modal de preview de correo (Leads/Loyalty) */
.ep-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:20px}
.ep-modal[hidden]{display:none}
.ep-modal-inner{background:#fff;color:#1b1a4e;border-radius:16px;max-width:600px;
  width:100%;max-height:88vh;overflow:auto;position:relative;padding:30px 22px 24px;
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.ep-close{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;
  border:none;background:rgba(0,0,0,.06);cursor:pointer;font-size:1rem;line-height:1}
.ep-close:hover{background:rgba(0,0,0,.12)}
/* Mismo margen fijo entre párrafos que .rich-editor/.camp-body: el preview
   debe verse igual de compacto que el correo real. */
#ep-email-body p,#ep-email-body ol,#ep-email-body ul{margin:0 0 10px}
#ep-email-body p:last-child,#ep-email-body ol:last-child,#ep-email-body ul:last-child{margin-bottom:0}
.ep-subject{font-weight:700;margin:0 0 14px;font-size:1.05rem;border-bottom:1px solid #eee;padding-bottom:12px}

/* Tarjetas de plantillas del modo automático de Loyalty (5 motivos) */
.auto-sections{display:flex;flex-direction:column;gap:10px}
.auto-section{border:1px solid var(--line);border-radius:12px;padding:0;overflow:hidden}
.auto-section-head{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;list-style:none}
.auto-section-head::-webkit-details-marker{display:none}
.auto-section-title{font-weight:700;flex:1}
.auto-section[open] .camp-caret{transform:rotate(180deg)}
.auto-section-body{padding:2px 14px 16px}
.auto-current-img{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:.82rem}
.auto-current-img img{width:56px;height:56px;object-fit:cover;border-radius:8px}

/* Miniatura de imagen actual con botón ✕ superpuesto (Leads), en vez del
   checkbox "Quitar esta imagen" — un solo toque, sin submit intermedio. */
.img-thumb-wrap{position:relative;width:56px;height:56px;flex:none}
.img-thumb-wrap img{width:56px;height:56px;object-fit:cover;border-radius:8px;display:block}
.img-remove-x{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;
  border:2px solid var(--surface);background:var(--pink);color:#fff;display:flex;align-items:center;
  justify-content:center;cursor:pointer;font-size:.6rem;padding:0;line-height:1}
.img-remove-x:hover{filter:brightness(1.1)}

@media(max-width:640px){
}

/* 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: título (reloj + texto) en una sola línea, tabla debajo a todo el ancho */
.sched-card{flex-direction:column;align-items:stretch;gap:0}
.sched-card .txt{width:100%}
.sched-card .k{display:flex;align-items:center;gap:9px;font-size:.68rem;white-space:nowrap}
.sched-card .k .sched-ic{color:var(--accent);font-size:1.5rem;opacity:1;flex:none}

/* ===== Analíticas ===== */
.insight{display:flex;align-items:center;gap:11px;background:var(--mint);border:1px solid var(--mint);border-radius:14px;padding:14px 18px;margin:14px 0;font-size:1rem;font-weight:600;color:#06281d}
.insight-ic{flex:none;width:21px;height:21px;display:block}
.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:color-mix(in srgb,var(--muted) 16%,transparent);border-radius:999px;overflow:hidden}
.rankbar{display:block;height:100%;border-radius:999px;background:var(--chart-1)}
.rankn{flex:0 0 auto;min-width:28px;text-align:right}
/* Resalte de fila al pasar el mouse (dataviz: hover por marca) */
.rankrow{border-radius:8px;padding:4px 8px;margin:4px -8px;transition:background .12s}
.rankrow:hover{background:color-mix(in srgb,var(--muted) 8%,transparent)}
.rankrow:hover .rankbar{filter:brightness(1.08)}
/* 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;
  transition:transform .14s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease}
/* Cambio de tono al pasar el mouse (mismo idioma que los KPIs) */
.panel.hl:hover{transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
  background:color-mix(in srgb,var(--accent) 7%,var(--surface));
  box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 14%,transparent)}
.panel.hl:hover .mic{filter:brightness(1.12)}
.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 + capa interactiva */
.vchart-wrap{position:relative;margin-top:10px;height:170px}
.vchart{display:block;width:100%;height:100%}
.vchart-grid{stroke:var(--chart-grid);stroke-width:1;stroke-dasharray:3 4}
.vchart-x{display:flex;justify-content:space-between;margin-top:6px;
  font-size:.7rem;color:var(--muted);container-type:inline-size}
.vchart-x>span{flex:1;text-align:center}
/* Son 14 columnas: se escribe el día tan completo como quepa. La inicial sola
   es el último recurso (en teléfono), porque "M" puede ser martes o miércoles.
   El nombre completo siempre está en el globo al pasar el mouse. */
.vchart-x .lbl-full,.vchart-x .lbl-short{display:none}
@container (min-width:420px){
  .vchart-x .lbl-short{display:inline}
  .vchart-x .lbl-min{display:none}
}
@container (min-width:900px){
  .vchart-x .lbl-full{display:inline}
  .vchart-x .lbl-short{display:none}
}
/* Capa interactiva: zonas de hover por día, crosshair, marcador y tooltip */
.vchart-layer{position:absolute;inset:0;display:flex}
.vchart-hit{flex:1;height:100%;background:none;border:0;padding:0;margin:0;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.vchart-hit:focus-visible{outline:2px solid var(--chart-1);outline-offset:-2px;border-radius:6px}
.vchart-cross{position:absolute;top:0;bottom:0;width:1px;
  background:color-mix(in srgb,var(--chart-1) 55%,transparent);
  transform:translateX(-.5px);pointer-events:none}
.vchart-mk{position:absolute;width:11px;height:11px;border-radius:50%;
  background:var(--chart-1);border:2px solid var(--surface);
  transform:translate(-50%,-50%);pointer-events:none;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--chart-1) 45%,transparent)}
.vchart-tip{position:absolute;pointer-events:none;z-index:3;
  transform:translate(-50%,calc(-100% - 14px));white-space:nowrap;
  background:var(--navy-2);color:var(--ed-ink,#fff);border:1px solid var(--line);
  border-radius:9px;padding:6px 9px;font-size:.78rem;line-height:1.25;
  box-shadow:0 6px 20px rgba(0,0,0,.28)}
.vchart-tip b{font-family:var(--font-display);font-size:.95rem}
.vchart-tip span{display:block;color:var(--muted);font-size:.7rem}
/* Etiqueta directa del día pico (dataviz: rotular el punto clave, no todos).
   El span es el punto; el número flota justo encima. */
.vchart-peak{position:absolute;transform:translate(-50%,-50%);pointer-events:none;
  width:9px;height:9px;border-radius:50%;background:var(--chart-1);
  border:2px solid var(--surface);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--chart-1) 45%,transparent)}
.vchart-peak b{position:absolute;left:50%;bottom:calc(100% + 5px);transform:translateX(-50%);
  font-family:var(--font-display);font-size:.72rem;color:var(--chart-1);font-weight:700}
/* Línea divisoria entre "semana anterior" y "esta semana" en el área de 14 días */
.vchart-divider{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 4;opacity:.5}
.vchart-weeks{display:flex;justify-content:space-between;margin-top:2px;
  font-size:.68rem;color:var(--muted)}

/* Gráfico de barras verticales (horas del día / días de la semana) */
.hbar-chart{display:flex;align-items:flex-end;gap:2px;height:110px;margin-top:4px;
  container-type:inline-size}
.hbar-chart-wide{gap:10px}
.hbar-col{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;gap:4px}
.hbar-bar{width:100%;min-height:3px;border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,var(--chart-1),color-mix(in srgb,var(--chart-1) 55%,transparent));
  transition:filter .12s ease}
.hbar-col:hover .hbar-bar{filter:brightness(1.15)}
.hbar-lbl{font-size:.66rem;color:var(--muted);white-space:nowrap}
/* Días de la semana: se escribe completo ("Miércoles") y solo se cae a la
   abreviada cuando no cabe. Se mide el ancho del gráfico, no el de la pantalla,
   porque estos paneles a veces van a media anchura (.fb-split) y ahí una
   ventana grande no garantiza columnas grandes. Sin soporte de container
   queries queda la abreviada, que es el estado seguro. */
.hbar-lbl .lbl-full{display:none}
@container (min-width:440px){
  .hbar-lbl .lbl-full{display:inline}
  .hbar-lbl .lbl-short{display:none}
}

/* 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(--chart-1) 0 calc(var(--p)*3.6deg - .6deg),
    var(--surface) calc(var(--p)*3.6deg - .6deg) calc(var(--p)*3.6deg + .6deg),
    var(--chart-2) calc(var(--p)*3.6deg + .6deg) calc(360deg - .6deg),
    var(--surface) calc(360deg - .6deg) 360deg)}
.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(--chart-1)}
.dot-b{background:var(--chart-2)}

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

/* Consejo del día (administración de restaurantes) */
.tip-panel{display:flex;align-items:flex-start;gap:14px}
.tip-ico{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  font-size:1.15rem;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)}
.tip-eyebrow{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.14em;
  font-size:.68rem;color:var(--muted);font-weight:600;margin-bottom:4px}
.tip-text{margin:0;font-size:.95rem;line-height:1.45}

@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;
  transition:transform .14s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease}
/* Cambio de tono al pasar el mouse (el tono se aclara + borde de acento + leve elevación) */
.kpi2:hover{transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
  background:color-mix(in srgb,var(--accent) 7%,var(--surface));
  box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 14%,transparent)}
.kpi2:hover .mic{filter:brightness(1.12)}
.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}
/* La tarjeta destacada ilumina su degradé (no cambia de fondo) */
.kpi2.accent:hover{border-color:transparent;background:linear-gradient(135deg,var(--grape),var(--pink));
  filter:brightness(1.07) saturate(1.05);
  box-shadow:0 10px 26px color-mix(in srgb,var(--pink) 28%,transparent)}

/* Í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}
}

/* ═════════ Informe Tagger IA · versión ejecutiva (tarjetas) ═════════
   Antes el informe era un muro de texto y nadie lo leía entero. Ahora cada
   módulo repite SIEMPRE la misma jerarquía —resumen → cifras → hallazgos con
   evidencia → qué hacer → insight— para que el dueño lea en 15 segundos y
   sepa dónde mirar sin releer. Todo con las variables del Editor: funciona
   igual en tema oscuro y claro. */
.air2{display:flex;flex-direction:column;gap:16px;margin-top:18px;
  /* Semáforo del informe. Un solo lugar donde cambiar los cuatro tonos. */
  --t-rojo:var(--ed-error,#f87171);
  --t-naranja:var(--gold);
  --t-azul:var(--chart-2,#7c5cff);
  --t-verde:var(--mint)}

/* Cabecera de la pantalla: título + selector a la izquierda, PDF a la derecha */
.air2-top{display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-top:6px}
.air2-top h1{margin-bottom:14px}
.air2-top .ai-picker{margin:0}
.air2-top-r{display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  text-align:right}

/* Aparición escalonada: el informe se arma de arriba abajo (JS añade .vis) */
.air2-in{opacity:0;transform:translateY(14px);
  transition:opacity .28s ease,transform .28s cubic-bezier(.2,.7,.3,1);
  transition-delay:calc(var(--i,0) * .05s)}
.air2-in.vis{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .air2-in{opacity:1;transform:none;transition:none}
}

/* Etiqueta de sección (versalitas con icono) */
.air2-kicker{display:flex;align-items:center;gap:8px;margin:0 0 14px;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:.68rem;color:var(--accent)}
.air2-kicker .iconify{font-size:16px}
.air2-kicker-sm{margin:22px 0 12px;color:var(--muted)}

/* ── 1. Resumen ejecutivo + prioridad del mes ── */
.air2-hero{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);
  gap:26px;padding:26px 28px;
  background:
    radial-gradient(120% 150% at 100% 0%, color-mix(in srgb,var(--accent) 12%,transparent), transparent 58%),
    var(--surface);
  border-color:color-mix(in srgb,var(--accent) 22%,var(--line))}
.air2-hero-main{min-width:0}
.air2-hero-top{display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-bottom:14px}
.air2-hero-top .air2-kicker{margin:0}
.air2-titular{font-family:var(--font-display);font-size:1.55rem;line-height:1.25;
  letter-spacing:-.02em;margin:0 0 .35em;color:var(--ed-ink)}
.air2-base{color:var(--muted);font-size:.9rem;margin:0}

/* Botón "Ver detalle": el resumen es mucho texto y nace plegado */
.air2-toggle{flex:none;display:inline-flex;align-items:center;gap:6px;
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
  color:var(--accent);border-radius:999px;padding:6px 12px;cursor:pointer;
  font-family:var(--font-display);font-size:.78rem;font-weight:700;
  transition:background .14s ease,border-color .14s ease}
.air2-toggle:hover{background:color-mix(in srgb,var(--accent) 18%,transparent);
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.air2-toggle-ic{font-size:17px;transition:transform .25s ease}
.air2-hero.open .air2-toggle-ic{transform:rotate(180deg)}

/* Índice de puntos: color + ícono + título. Se ve siempre… salvo cuando el
   detalle está abierto, donde repetiría los mismos títulos. */
.air2-pills{list-style:none;display:flex;flex-wrap:wrap;gap:8px;
  margin:18px 0 0;padding:0}
.air2-pill{display:inline-flex;align-items:center;gap:7px;border-radius:999px;
  padding:6px 12px 6px 9px;font-size:.82rem;color:var(--ed-ink);
  background:color-mix(in srgb,var(--tono,var(--t-azul)) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--tono,var(--t-azul)) 32%,transparent)}
.air2-pill .iconify{font-size:17px;color:var(--tono,var(--t-azul))}
.air2-hero.open .air2-pills{display:none}

/* Detalle plegable (grid-template-rows: 0fr→1fr anima sin medir con JS; si el
   navegador no lo soporta, el detalle simplemente queda siempre visible). */
.air2-hero-body{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .32s cubic-bezier(.2,.7,.3,1),opacity .22s ease}
.air2-hero-body > div{overflow:hidden;min-height:0}
.air2-hero.open .air2-hero-body{grid-template-rows:1fr;opacity:1}
@media (prefers-reduced-motion:reduce){
  .air2-hero-body{transition:none}
}

.air2-puntos{list-style:none;margin:18px 0 0;padding:0;display:flex;
  flex-direction:column;gap:12px}
.air2-punto{display:flex;gap:13px;align-items:flex-start;border-radius:13px;
  padding:14px 16px;border:1px solid color-mix(in srgb,var(--tono,var(--t-azul)) 26%,transparent);
  border-left:3px solid var(--tono,var(--t-azul));
  background:color-mix(in srgb,var(--tono,var(--t-azul)) 7%,transparent)}
.air2-punto-ico{width:32px;height:32px;flex:none;border-radius:10px;
  display:grid;place-items:center;color:var(--tono,var(--t-azul));
  background:color-mix(in srgb,var(--tono,var(--t-azul)) 16%,transparent)}
.air2-punto-ico .iconify{font-size:19px}
.air2-punto.t-rojo,.air2-pill.t-rojo{--tono:var(--t-rojo)}
.air2-punto.t-naranja,.air2-pill.t-naranja{--tono:var(--t-naranja)}
.air2-punto.t-azul,.air2-pill.t-azul{--tono:var(--t-azul)}
.air2-punto.t-verde,.air2-pill.t-verde{--tono:var(--t-verde)}
.air2-punto-tx{min-width:0}
.air2-punto-tx b{display:block;font-family:var(--font-display);font-size:.98rem;
  color:var(--ed-ink);margin-bottom:3px}
.air2-punto-tx p{margin:0;font-size:.9rem;line-height:1.6;color:var(--muted)}
/* Los datos sueltos del punto son cifras, no prosa: se leen mejor en píldoras */
.air2-sub{list-style:none;display:flex;flex-wrap:wrap;gap:7px;
  margin:10px 0 0;padding:0}
.air2-sub li{display:inline-flex;align-items:center;font-size:.8rem;
  color:var(--ed-ink);background:var(--surface);border-radius:8px;
  padding:4px 10px;
  border:1px solid color-mix(in srgb,var(--tono,var(--t-azul)) 28%,var(--line))}

.air2-riesgo{align-self:start;border-radius:14px;padding:18px 18px 20px;
  background:color-mix(in srgb,var(--nivel,var(--gold)) 10%,var(--navy-2));
  border:1px solid color-mix(in srgb,var(--nivel,var(--gold)) 32%,var(--line));
  position:relative}
.air2-riesgo.n-bajo{--nivel:var(--mint)}
.air2-riesgo.n-medio{--nivel:var(--gold)}
.air2-riesgo.n-alto{--nivel:var(--ed-error,#f87171)}
.air2-riesgo .air2-kicker{color:var(--nivel);margin-bottom:16px}
.air2-riesgo-ico{position:absolute;top:14px;right:14px;width:42px;height:42px;
  border-radius:50%;display:grid;place-items:center;color:var(--nivel);
  background:color-mix(in srgb,var(--nivel) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--nivel) 35%,transparent)}
.air2-riesgo-ico .iconify{font-size:22px}
.air2-riesgo-lb{margin:0;font-size:.8rem;color:var(--muted)}
.air2-riesgo-n{display:flex;align-items:center;gap:9px;margin:.2em 0 .6em;
  font-family:var(--font-display);font-weight:800;font-size:1.5rem;
  letter-spacing:.02em;color:var(--nivel)}
.air2-bullet{width:12px;height:12px;border-radius:50%;background:var(--nivel);
  box-shadow:0 0 12px color-mix(in srgb,var(--nivel) 70%,transparent)}
.air2-riesgo-tx{margin:0;font-size:.85rem;line-height:1.6;color:var(--muted)}

/* ── 2. Cifras del mes ── */
.air2-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.air2-kpi{background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:16px 16px 14px;display:flex;flex-direction:column;
  transition:transform .14s ease,border-color .14s ease}
.air2-kpi:hover{transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--k,var(--accent)) 45%,var(--line))}
.air2-kpi.k-malo{--k:var(--ed-error,#f87171)}
.air2-kpi.k-bueno{--k:var(--mint)}
.air2-kpi.k-neutro{--k:var(--chart-2,#7c5cff)}
.air2-kpi-ico{width:34px;height:34px;border-radius:11px;display:grid;
  place-items:center;margin-bottom:12px;color:var(--k,var(--accent));
  background:color-mix(in srgb,var(--k,var(--accent)) 14%,transparent)}
.air2-kpi-ico .iconify{font-size:19px}
.air2-kpi-v{font-family:var(--font-display);font-size:1.9rem;font-weight:800;
  line-height:1;letter-spacing:-.02em;color:var(--ed-ink)}
.air2-kpi-lb{font-size:.82rem;color:var(--muted);margin-top:6px}
.air2-kpi-d{font-size:.72rem;margin-top:10px;color:var(--muted)}
.air2-kpi-d.d-malo{color:var(--ed-error,#f87171)}
.air2-kpi-d.d-bueno{color:var(--mint)}

/* ── 3. Impacto + insight (y cualquier fila de dos paneles) ── */
.air2-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;
  align-items:stretch}
.air2-duo > .panel{margin:0}

.air2-bar{margin-bottom:16px}
.air2-bar:last-child{margin-bottom:0}
.air2-bar-h{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:.85rem;color:var(--muted);margin-bottom:7px}
.air2-bar-h b{color:var(--ed-ink);font-family:var(--font-display)}
.air2-bar-t{height:7px;border-radius:999px;background:var(--navy-2);overflow:hidden}
.air2-bar-t i{display:block;height:100%;border-radius:999px;width:var(--w,0);
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--gold)));
  transition:width .5s cubic-bezier(.2,.7,.3,1)}
.air2-imp .air2-bar.b-2 .air2-bar-t i{
  background:linear-gradient(90deg,var(--gold),color-mix(in srgb,var(--gold) 60%,var(--accent)))}
.air2-imp .air2-bar.b-3 .air2-bar-t i{
  background:linear-gradient(90deg,var(--mint),color-mix(in srgb,var(--mint) 60%,var(--chart-2,#7c5cff)))}
.air2-imp .air2-bar.b-4 .air2-bar-t i{
  background:linear-gradient(90deg,var(--chart-2,#7c5cff),color-mix(in srgb,var(--chart-2,#7c5cff) 55%,var(--mint)))}
@media (prefers-reduced-motion:reduce){.air2-bar-t i{transition:none}}

.air2-insight{position:relative;overflow:hidden;
  background:
    radial-gradient(110% 130% at 0% 0%, color-mix(in srgb,var(--accent) 14%,transparent), transparent 60%),
    var(--surface);
  border-color:color-mix(in srgb,var(--accent) 26%,var(--line))}
/* El patrón queda fuera: si se le aplica position:relative pasa a ocupar sus
   300px en el flujo y estira el panel al triple de su contenido. */
.air2-insight > :not(.ai-pattern){position:relative;z-index:2}
.air2-insight .ai-pattern{z-index:1}
.air2-insight-tx{margin:0 0 .8em;font-size:.92rem;line-height:1.65;
  color:var(--ed-ink)}
.air2-insight-tx:last-of-type{margin-bottom:0}

/* ── 4. Módulos ── */
.air2-mod{padding:24px 26px}
.air2-mod-h{display:flex;align-items:flex-start;gap:15px;margin-bottom:16px}
.air2-mod-ico{width:46px;height:46px;border-radius:14px;flex:none;display:grid;
  place-items:center;color:#fff;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 78%,var(--surface)),color-mix(in srgb,var(--accent) 34%,var(--surface)));
  box-shadow:0 8px 20px -10px color-mix(in srgb,var(--accent) 85%,#000)}
.air2-mod-ico .iconify{font-size:24px}
.air2-mod-h h2{font-size:1.2rem;margin:2px 0 0;color:var(--ed-ink)}
.air2-mod-rs{margin:.5em 0 0;font-size:.9rem;line-height:1.65;color:var(--muted);
  max-width:78ch}

.air2-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:4px}
.air2-chip{display:inline-flex;align-items:baseline;gap:7px;padding:.45em .85em;
  border-radius:999px;font-size:.8rem;color:var(--muted);
  background:var(--navy-2);border:1px solid var(--line)}
.air2-chip b{font-family:var(--font-display);font-size:.95rem;color:var(--ed-ink)}

/* Hallazgos: tarjeta corta con evidencia y confianza */
.air2-finds{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:14px}
.air2-find{border-radius:14px;padding:16px 17px;background:var(--navy-2);
  border:1px solid var(--line);border-left:3px solid var(--sev,var(--accent))}
.air2-find.s-critico{--sev:var(--ed-error,#f87171)}
.air2-find.s-importante{--sev:var(--gold)}
.air2-find.s-leve{--sev:var(--chart-2,#7c5cff)}
.air2-find-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.air2-find-n{width:24px;height:24px;border-radius:50%;flex:none;display:grid;
  place-items:center;font-family:var(--font-display);font-weight:700;
  font-size:.76rem;color:var(--sev);
  background:color-mix(in srgb,var(--sev) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--sev) 40%,transparent)}
.air2-find-h b{font-family:var(--font-display);font-size:1rem;color:var(--ed-ink);
  flex:1;min-width:0}
.air2-sev{font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.1em;font-size:.62rem;font-weight:700;padding:.4em .7em;
  border-radius:999px;color:var(--sev);white-space:nowrap;
  background:color-mix(in srgb,var(--sev) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--sev) 35%,transparent)}
.air2-find-tx{margin:.85em 0 0;font-size:.88rem;line-height:1.6;color:var(--muted)}

.air2-ev-lb{margin:1.2em 0 .5em;font-family:var(--font-display);
  text-transform:uppercase;letter-spacing:.14em;font-size:.62rem;
  color:var(--sev,var(--accent))}
.air2-ev{margin:0 0 10px;padding:12px 14px;border-radius:11px;
  background:color-mix(in srgb,var(--surface) 70%,transparent);
  border:1px solid var(--line)}
.air2-ev:last-of-type{margin-bottom:0}
.air2-ev-top{display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;margin-bottom:8px}
.air2-stars{display:inline-flex;gap:2px;color:var(--line);font-size:14px}
.air2-stars .on{color:var(--gold)}
.air2-ev-src{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;
  color:var(--accent)}
.air2-ev-src .iconify{font-size:14px;color:var(--muted)}
.air2-ev-tx{margin:0;font-size:.87rem;line-height:1.6;color:var(--ed-ink);
  font-style:italic}
.air2-ev-date{display:block;margin-top:8px;font-size:.72rem;color:var(--muted)}

.air2-conf{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.air2-conf .air2-bar-t i{
  background:linear-gradient(90deg,var(--sev,var(--accent)),color-mix(in srgb,var(--sev,var(--accent)) 45%,var(--gold)))}
.air2-conf-w{margin:.6em 0 0;font-size:.74rem;line-height:1.5;color:var(--muted)}

/* "Qué hacer" dentro de un módulo */
.air2-todo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:9px}
.air2-todo li{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;
  line-height:1.55;color:var(--muted)}
.air2-todo b{color:var(--ed-ink);font-weight:600}
.air2-todo-d{color:var(--muted)}
.air2-check{width:20px;height:20px;border-radius:6px;flex:none;margin-top:1px;
  display:grid;place-items:center;color:var(--mint);
  background:color-mix(in srgb,var(--mint) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--mint) 35%,transparent)}
.air2-check .iconify{font-size:13px}

.air2-mod-ins{display:flex;gap:10px;align-items:flex-start;margin:20px 0 0;
  padding:13px 15px;border-radius:12px;font-size:.88rem;line-height:1.6;
  color:var(--ed-ink);
  background:color-mix(in srgb,var(--gold) 9%,var(--navy-2));
  border:1px solid color-mix(in srgb,var(--gold) 26%,var(--line))}
.air2-mod-ins .iconify{font-size:18px;color:var(--gold);flex:none;margin-top:1px}

/* ── 5. Desempeño de meseros + plan de acción ── */
.air2-team-l{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:12px}
.air2-team-l li{display:flex;align-items:center;gap:12px}
.air2-face{width:42px;height:42px;border-radius:50%;flex:none;overflow:hidden;
  display:grid;place-items:center;background:var(--navy-2);
  border:1px solid var(--line);font-family:var(--font-display);font-weight:700;
  font-size:.85rem;color:var(--muted)}
.air2-face img{width:100%;height:100%;object-fit:cover}
.air2-face-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.air2-face-tx b{font-size:.92rem;color:var(--ed-ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.air2-face-n{font-size:.75rem;color:var(--muted)}
.air2-stars-t{font-size:15px;color:var(--line)}
.air2-stars-t .on{color:var(--mint)}
.air2-face-s{font-family:var(--font-display);font-size:.95rem;color:var(--ed-ink);
  min-width:34px;text-align:right}
.air2-team-note{display:flex;gap:9px;align-items:flex-start;margin:16px 0 0;
  padding:11px 13px;border-radius:11px;font-size:.83rem;line-height:1.55;
  color:var(--muted);
  background:color-mix(in srgb,var(--chart-2,#7c5cff) 9%,var(--navy-2));
  border:1px solid color-mix(in srgb,var(--chart-2,#7c5cff) 24%,var(--line))}
.air2-team-note .iconify{font-size:16px;color:var(--chart-2,#7c5cff);flex:none;
  margin-top:1px}

.air2-steps{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:14px}
.air2-steps li{display:flex;gap:12px;align-items:flex-start}
.air2-step-n{width:26px;height:26px;border-radius:50%;flex:none;display:grid;
  place-items:center;font-family:var(--font-display);font-weight:700;
  font-size:.78rem;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 38%,transparent)}
.air2-step-tx{min-width:0}
.air2-step-tx b{display:block;font-size:.92rem;color:var(--ed-ink);
  margin-bottom:2px}
.air2-step-tx span{font-size:.83rem;line-height:1.55;color:var(--muted)}
.air2-plan-f{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--line)}
.air2-plan-f > span{display:grid;grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;column-gap:9px;align-items:center}
.air2-plan-f .iconify{grid-row:1 / span 2;font-size:20px;color:var(--muted)}
.air2-plan-f i{font-style:normal;font-size:.72rem;color:var(--muted)}
.air2-plan-f b{font-family:var(--font-display);font-size:.9rem;color:var(--ed-ink)}

/* Móvil: todo a una columna; las cifras en dos por fila (no en cuatro) */
@media (max-width:900px){
  .air2-hero{grid-template-columns:1fr;padding:20px 18px}
  .air2-duo{grid-template-columns:1fr}
  .air2-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .air2-mod{padding:18px 16px}
  .air2-titular{font-size:1.3rem}
  .air2-top-r{align-items:flex-start;text-align:left}
  .air2-hero-top{flex-wrap:wrap;gap:10px}
  .air2-punto{padding:12px 13px;gap:11px}
}

/* 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}
/* Selector de mesero con foto: el comensal reconoce la cara, no el nombre
   (y con dos meseros homónimos el nombre solo no alcanza). */
.wr-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;
  max-height:250px;overflow-y:auto;padding:2px}
.wr-pick-i{cursor:pointer}
.wr-pick-i input{position:absolute;opacity:0;width:1px;height:1px}
.wr-pick-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 5px;
  border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(255,255,255,.06);
  transition:border-color .12s,background .12s,transform .08s;height:100%;box-sizing:border-box}
.wr-pick-i:hover .wr-pick-card{transform:translateY(-1px);background:rgba(255,255,255,.12)}
.wr-pick-card img,.wr-pick-ini{width:54px;height:54px;border-radius:50%;object-fit:cover;
  background:rgba(255,255,255,.14);display:block}
.wr-pick-ini{display:grid;place-items:center;font-weight:700;font-size:1.05rem;opacity:.9}
.wr-pick-n{font-size:.78rem;line-height:1.2;text-align:center;word-break:break-word}
.wr-pick-i input:checked+.wr-pick-card{border-color:var(--accent,#ff2e6e);
  background:color-mix(in srgb,var(--accent,#ff2e6e) 22%,transparent)}
.wr-pick-i input:focus-visible+.wr-pick-card{outline:2px solid var(--accent,#ff2e6e);outline-offset:2px}
/* Mesero ya calificado en esta visita: se muestra, pero apagado y sin cursor
   de "tocable". Se deja a la vista a propósito — desaparecerlo haría dudar al
   comensal de si lo llegó a calificar o si el local lo borró. */
.wr-pick-i.rated{cursor:default}
.wr-pick-i.rated .wr-pick-card{opacity:.5}
.wr-pick-i.rated:hover .wr-pick-card{transform:none;background:rgba(255,255,255,.06)}
.wr-pick-done{font-size:.68rem;line-height:1.1;text-align:center;opacity:.95;
  color:var(--accent,#ff2e6e);font-weight:700}
.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 .12s,box-shadow .12s,font-size .12s}
.wr-num:hover{transform:translateY(-1px)}
/* Solo un número queda marcado, así que el elegido tiene que pesar por sí
   solo: crece, sube y proyecta halo. En móvil el botón mide ~25px y un simple
   relleno de color se perdería en la fila. */
.wr-num.sel{background:var(--accent,#ff2e6e);border-color:var(--accent,#ff2e6e);color:var(--accent-text,#fff);
  transform:translateY(-2px) scale(1.18);font-size:1rem;
  box-shadow:0 4px 14px color-mix(in srgb,var(--accent,#ff2e6e) 55%,transparent);
  position:relative;z-index:1}
.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}
/* Acciones de la alerta: "Ver queja" (saltar a la lista) + "Marcar todo como
   leído". Van juntas y se apilan solas en móvil. El color se fuerza a blanco
   porque el tema claro remapea .btn-ghost a tinta oscura, ilegible sobre el
   degradé rojo de la alerta. */
.wr-alert-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* En móvil dos botones a la derecha dejaban el aviso en cinco líneas: se
   bajan a su propia fila y el texto recupera el ancho completo. */
@media(max-width:560px){
  .wr-alert{flex-wrap:wrap}
  .wr-alert-acts{flex:1 0 100%}
}
body.ed .wr-alert .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55)}
body.ed .wr-alert .btn-ghost:hover{background:rgba(255,255,255,.14)}
/* Destino del salto: la tarjeta exacta que el aviso está contando, sin quedar
   pegada al borde. No lleva destello propio: la tarjeta sin leer ya late con
   wrpulse y su borde rosa, que es justo la señal que el ojo busca al caer. */
.rv-card,.wr-review{scroll-margin-top:18px}
.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}}
/* Ráfagas de calificaciones: ámbar (--gold), nunca el rojo de --wr-alert ni
   de --ed-error. Aquí no hay nada roto ni urgente — es una observación para
   que el dueño mire cuando pueda. Sin pulso por lo mismo. */
.wr-burst{border:1px solid color-mix(in srgb,var(--gold,#FBBF24) 45%,transparent);
  background:color-mix(in srgb,var(--gold,#FBBF24) 9%,var(--surface,#17171D));
  border-radius:14px;padding:13px 16px;margin:14px 0}
/* El ámbar vive en el ícono, el borde y el fondo; el texto va en tinta. Ámbar
   sobre el crema del tema claro da 3,5:1 y AA pide 4,5:1 — el color señala,
   pero no a costa de que el aviso se lea peor justo donde importa. */
.wr-burst-h{display:flex;align-items:center;gap:8px;color:var(--ed-ink,#F3F3F7);font-size:.95rem}
.wr-burst-h .iconify{color:var(--gold,#FBBF24);font-size:1.15rem}
.wr-burst-i{padding:8px 0;font-size:.88rem;border-top:1px solid var(--line,#282833)}
.wr-burst-i:first-of-type{border-top:0}
.wr-burst-tag{display:inline-block;font-size:.72rem;padding:1px 7px;border-radius:999px;
  background:color-mix(in srgb,var(--gold,#FBBF24) 25%,transparent);color:var(--ed-ink,#F3F3F7)}
.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}

/* ===== Feedback: reputación del local =====
   Solo se usa en cms/feedback.html y sus dos parciales (_place_review.html y
   _google_review.html). La regla de color de toda la sección: ROSA = lo que
   Tagger retuvo en privado, AZUL = lo que ya está publicado en Google. Se
   respeta en tarjetas, pestañas y sellos para que el origen se lea de un
   vistazo sin tener que buscar la etiqueta. */
/* Azul de Google en una variable: se repite en tarjetas, sellos, pestañas y
   el panel de la ficha. Solo lo usan clases del CMS, así que no choca con el
   tema que cada cliente inyecta inline en su Perfil público. */
:root{--gblue:#4285f4}

/* Dos paneles lado a lado; en móvil se apilan solos. */
.fb-split{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.fb-split>.panel{margin:0}
@media (max-width:820px){.fb-split{grid-template-columns:1fr}}

/* Distribución de estrellas (1-5). La barra verde es la que se fue a Google. */
.stardist{display:flex;flex-direction:column;gap:7px}
.stardist-row{display:flex;align-items:center;gap:10px;font-size:.82rem}
.stardist-lbl{flex:0 0 30px;font-weight:700;color:var(--muted)}
.stardist-track{flex:1;height:9px;border-radius:999px;min-width:0;
  background:color-mix(in srgb,var(--muted) 16%,transparent);overflow:hidden}
/* Degradé de un solo tono: da profundidad sin meter un color ajeno. El
   Editor colapsa morado y rosa en un acento único, así que mezclar hues aquí
   rompería el sistema. */
.stardist-bar{display:block;height:100%;border-radius:999px;min-width:3px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 65%,transparent),var(--accent));
  transition:width .3s}
.stardist-bar.good{background:linear-gradient(90deg,color-mix(in srgb,var(--mint) 65%,transparent),var(--mint))}
.stardist-n{flex:0 0 auto;font-weight:700;font-size:.8rem;min-width:56px;text-align:right}

/* Datos sueltos con ícono: "12 reseñas malas que Google nunca vio". */
.fb-facts{display:flex;flex-direction:column;gap:12px}
.fb-fact{display:flex;align-items:center;gap:11px;font-size:.82rem}
.fb-fact .muted{line-height:1.3}
.fb-fact-n{font-family:var(--font-display);font-weight:700;font-size:1.35rem;
  line-height:1.1;display:flex;align-items:center;gap:7px}

/* Palabras que más se repiten en las quejas. */
.topics{display:flex;flex-direction:column;gap:7px}
.topic-row{display:flex;align-items:center;gap:10px;font-size:.82rem}
.topic-word{flex:0 0 34%;font-weight:600;text-transform:capitalize;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topic-track{flex:1;height:9px;border-radius:999px;min-width:0;
  background:color-mix(in srgb,var(--muted) 16%,transparent);overflow:hidden}
.topic-bar{display:block;height:100%;border-radius:999px;min-width:3px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 65%,transparent),var(--accent));
  transition:width .3s}
.topic-n{flex:0 0 26px;text-align:right;font-weight:700;color:var(--muted)}

/* Panel de la ficha de Google: se distingue con una guarda azul a la izquierda. */
.gpanel{border-left:3px solid var(--gblue)}
.gmark{display:inline-grid;place-items:center;vertical-align:-3px;margin-right:5px}
.gmark svg{width:17px;height:17px;color:var(--gblue)}
.gstats{display:flex;gap:26px;flex-wrap:wrap;margin:4px 0 2px}
.gstat .muted{font-size:.78rem}
.gstat-n{font-family:var(--font-display);font-weight:700;font-size:1.9rem;
  line-height:1.1;color:var(--gblue)}
.gstat-n.gstat-tagger{color:var(--pink)}
.gstat-star{font-size:1rem;margin-left:2px}
.gnote{display:flex;align-items:flex-start;gap:8px;font-size:.82rem;line-height:1.45;
  margin:14px 0 0;padding:10px 12px;border-radius:11px;
  background:color-mix(in srgb,var(--mint) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--mint) 30%,transparent)}
.gnote .iconify{flex:none;font-size:1.05rem;color:var(--mint);margin-top:1px}

/* "¿Es esta tu ficha?" — la ficha que se ADIVINÓ buscando por nombre, a la
   espera de que el dueño la confirme. Se pinta en ámbar, no en azul: todavía
   no es un dato de Google confirmado, es una pregunta. */
.gconfirm{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 14px;border-radius:12px;
  background:color-mix(in srgb,var(--gold) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--gold) 34%,transparent)}
.gconfirm-card{flex:1 1 240px;min-width:0}
.gconfirm-name{font-family:var(--font-display);font-weight:700;font-size:1.1rem;
  line-height:1.2}
.gconfirm-card .muted{font-size:.8rem}
.gconfirm-link{display:inline-block;margin-top:4px;font-size:.78rem;color:var(--gblue);
  text-decoration:underline}
.gconfirm-acts{display:flex;gap:8px;flex-wrap:wrap;flex:0 0 auto}

/* Pestañas de origen sobre la lista unificada. Cada una lleva el color de su
   fuente para reforzar el mismo código que usan las tarjetas. */
.srctabs{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 12px}
.srctab{font-size:.8rem;font-weight:600;border-radius:999px;padding:5px 13px;
  border:1px solid var(--line);color:var(--muted);text-decoration:none;
  transition:border-color .12s,color .12s,background .12s}
.srctab:hover{color:var(--ed-ink);border-color:color-mix(in srgb,var(--muted) 45%,var(--line))}
.srctab.on{color:var(--ed-ink);border-color:transparent;
  background:color-mix(in srgb,var(--muted) 20%,transparent)}
.srctab-tagger.on{color:var(--pink);background:color-mix(in srgb,var(--pink) 16%,transparent)}
.srctab-google.on{color:var(--gblue);background:color-mix(in srgb,var(--gblue) 16%,transparent)}

/* Tarjeta de reseña, común a las dos fuentes. La guarda de la izquierda es lo
   que dice el origen; la anatomía interna es idéntica para que la lista
   mezclada se lea como una sola línea de tiempo. */
.rv-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:11px 13px;margin-bottom:8px;border-left-width:3px}
.rv-tagger{border-left-color:var(--pink)}
.rv-google{border-left-color:var(--gblue)}
.rv-card.unread{border-color:#ff2e6e;box-shadow:0 0 0 1px rgba(255,46,110,.4);
  animation:wrpulse 1.8s ease-out infinite}
.rv-card-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:.95rem}
.rv-src{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  border-radius:999px;padding:2px 9px}
.rv-src svg{width:12px;height:12px}
.rv-src .iconify{font-size:.85rem}
.rv-src-tagger{color:var(--pink);background:color-mix(in srgb,var(--pink) 16%,transparent)}
.rv-src-google{color:var(--gblue);background:color-mix(in srgb,var(--gblue) 16%,transparent)}
.rv-score{flex:0 0 auto;font-weight:800;font-size:.82rem;border-radius:8px;padding:2px 8px;
  background:rgba(255,255,255,.1)}
.rv-score-bad{background:rgba(255,46,110,.22);color:#ff7aa3}
.rv-score-google{background:color-mix(in srgb,var(--gblue) 20%,transparent);color:var(--gblue)}
.rv-who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-when{margin-left:auto;font-size:.78rem;white-space:nowrap}
.rv-comment{margin:8px 0 6px;font-size:.92rem;opacity:.92;font-style:italic}
.rv-card-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.8rem}
.rv-foot-acts{display:flex;align-items:center;gap:8px;margin-left:auto}
.rv-done{display:inline-flex;align-items:center;gap:3px;color:var(--mint);font-weight:600}
@media (max-width:600px){
  .rv-when{margin-left:0;flex-basis:100%}
  .gstats{gap:18px}
}

/* ===== Personal: gestión del equipo de sala =====
   Solo se usa en cms/staff_ratings.html. Una fila por mesero: agarradera,
   nombre editable, métricas y la acción de sacarlo del equipo. */
/* Foto circular del mesero (panel). Es lo que distingue a dos homónimos. */
.staff-av{flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover;display:block;
  background:color-mix(in srgb,var(--muted) 18%,transparent)}
.staff-av.ini{display:grid;place-items:center;font-family:var(--font-display);
  font-weight:700;font-size:.9rem;color:var(--muted)}
.staff-av.sm{width:26px;height:26px;font-size:.68rem}
.rankname .staff-av{display:inline-grid;vertical-align:middle;margin-right:2px}
.rankname img.staff-av{display:inline-block}
.wr-review-head .staff-av{flex:none}
.staff-avwrap{position:relative;flex:none;display:flex;align-items:center;gap:6px}
.staff-avlabel{position:relative;display:block;cursor:pointer;border-radius:50%}
.staff-avlabel:hover .staff-av{filter:brightness(.75)}
.staff-avlabel:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.staff-avcam{position:absolute;inset:0;display:grid;place-items:center;color:#fff;
  opacity:0;transition:opacity .12s;font-size:1.1rem;pointer-events:none}
.staff-avlabel:hover .staff-avcam,.staff-avlabel:focus-within .staff-avcam{opacity:1}
/* El input existe pero no se ve: quien manda es el círculo. */
.staff-avfile{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
/* .btn trae display:inline-flex y le gana al [hidden] del navegador. */
.staff-avgo[hidden],.staff-save[hidden]{display:none}
.staff-avdel button{position:absolute;top:-4px;right:-4px;width:20px;height:20px;
  border-radius:50%;border:1px solid var(--line);background:var(--surface);
  color:var(--muted);font-size:.85rem;line-height:1;cursor:pointer;padding:0}
.staff-avdel button:hover{color:#ff2e6e;border-color:#ff2e6e}
.staff-add{display:flex;gap:8px;align-items:center;margin:10px 0 14px}
.staff-add input{flex:1;min-width:0;margin:0}
.staff-add .btn{flex:0 0 auto;white-space:nowrap}
.staff-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:9px 12px;margin-bottom:8px;transition:border-color .12s,box-shadow .12s}
.staff-row:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.staff-row.sortable-ghost{opacity:.45}
.staff-row.sortable-chosen{box-shadow:0 6px 20px -8px rgba(0,0,0,.45)}
.staff-row.off{opacity:.72}
.staff-grip{flex:0 0 auto;cursor:grab;color:var(--muted);font-size:1.15rem;line-height:1;
  display:grid;place-items:center}
.staff-grip:active{cursor:grabbing}
.staff-name{display:flex;align-items:center;gap:6px;flex:0 1 300px;min-width:0}
.staff-name input{flex:1;min-width:0;margin:0;font-weight:600}
.staff-name-off{flex:0 1 300px;font-weight:600;min-width:0}
/* El botón Guardar solo aparece cuando el nombre cambió (lo activa el foco). */
.staff-save{opacity:0;pointer-events:none;transition:opacity .12s}
.staff-name:focus-within .staff-save{opacity:1;pointer-events:auto}
.staff-stats{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.82rem;
  flex:1 1 auto;min-width:0}
.staff-act{flex:0 0 auto;margin-left:auto}
.staff-chip{font-size:.72rem;font-weight:700;border-radius:999px;padding:2px 9px;
  background:color-mix(in srgb,var(--muted) 16%,transparent);color:var(--muted);
  white-space:nowrap}
.staff-chip.good{background:rgba(47,224,168,.18);color:var(--mint)}
.staff-chip.bad{background:rgba(255,46,110,.18);color:#ff7aa3}
.staff-chip.up{background:rgba(47,224,168,.18);color:var(--mint)}
.staff-chip.down{background:rgba(255,46,110,.18);color:#ff7aa3}
.staff-former{margin-top:6px}
.staff-former summary{cursor:pointer;font-size:.85rem;font-weight:600;padding:4px 0}
/* Metadatos bajo cada fila del ranking */
.rankmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.78rem;
  margin:-2px 0 10px;padding-left:8px}
/* En móvil: agarradera + foto + nombre en la primera línea; métricas y acción
   abajo. El nombre se encoge (base chica) para no empujar a la foto. */
@media (max-width:600px){
  .staff-row{gap:8px}
  .staff-grip{order:0}
  .staff-avwrap{order:1}
  .staff-name,.staff-name-off{order:2;flex:1 1 110px;min-width:0}
  .staff-stats{order:3;flex:1 1 auto}
  .staff-act{order:4;margin-left:auto}
  .rankname{flex:0 0 46%}
}

/* ===== Loyalty: editor de círculos de la tarjeta =====
   Cada círculo es una FICHA, no tres controles sueltos apilados: con 20 en
   pantalla, sin el recuadro no se ve dónde acaba uno y empieza el siguiente
   —el número del vecino se leía como parte del premio de al lado—. Y en
   rejilla (no flex-wrap) las columnas caen alineadas: la última fila
   incompleta ya no deja los tres últimos flotando a distintos anchos. */
.loy-circles{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  gap:10px;margin-top:14px}
.loy-circle{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:12px 10px 10px;border-radius:14px;border:1px solid var(--line);
  background:var(--navy-2);transition:border-color .15s ease,background .15s ease}
.loy-circle:focus-within{border-color:var(--accent)}
.loy-circle.has-prize{border-color:color-mix(in srgb,var(--mint) 55%,transparent);
  background:color-mix(in srgb,var(--mint) 7%,var(--navy-2))}
.loy-dot{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-size:.95rem;font-family:var(--font-display);border:2.5px dashed var(--line);
  color:var(--muted,#9a99c2);background:var(--surface)}
.loy-circle.has-prize .loy-dot{border-style:solid;border-color:var(--mint);
  color:#06281d;background:var(--mint)}
/* El último círculo cierra la tarjeta (al llegar se reinicia): es el premio
   grande y merece verse distinto de los otros diecinueve. */
.loy-circle:last-child .loy-dot{border-color:var(--gold)}
.loy-circle:last-child.has-prize .loy-dot{background:var(--gold);border-color:var(--gold);color:#3d2a00}
.loy-circle:last-child::after{content:"FINAL";position:absolute;top:6px;left:8px;
  font-size:.52rem;font-weight:800;letter-spacing:.09em;color:var(--gold);opacity:.9}
.panel .loy-circle input[type=text]{width:100%;box-sizing:border-box;text-align:center;font-size:.78rem;
  padding:7px 6px;background:var(--surface);border:1px solid var(--line);
  border-radius:9px;color:var(--ed-ink,#fff);margin:0}
.panel .loy-circle.has-prize input[type=text]{border-color:color-mix(in srgb,var(--mint) 55%,transparent)}
.panel .loy-circle input[type=text]::placeholder{letter-spacing:.06em;font-size:.72rem;opacity:.45}

/* Cuántos círculos: el campo suelto no decía si se escribía o se pulsaba.
   Con los dos pasos al lado, el gesto frecuente (uno más, uno menos) es un
   clic y el teclado sigue sirviendo para saltar de 6 a 20. */
.loy-size{margin-bottom:4px}
.loy-size-ctl{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line);
  border-radius:11px;overflow:hidden;background:var(--navy-2)}
.panel .loy-size-ctl input[type=number]{width:64px;text-align:center;margin:0;border:0;border-radius:0;
  background:transparent;font-weight:700;font-size:1rem;padding:9px 4px;
  -moz-appearance:textfield;appearance:textfield}
.loy-size-ctl input[type=number]::-webkit-outer-spin-button,
.loy-size-ctl input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.loy-size-ctl input[type=number]:focus{outline:none;box-shadow:none}
.loy-step{width:38px;align-self:stretch;border:0;background:transparent;cursor:pointer;
  color:var(--ed-ink,#fff);font-size:1.15rem;line-height:1;font-weight:600;opacity:.75}
.loy-step:hover{opacity:1;background:color-mix(in srgb,var(--muted) 16%,transparent)}

/* Leyenda: tres muestras y una frase. Lo que antes había que deducir
   probando (¿qué significa el círculo verde? ¿y "regalable"?). */
.loy-legend{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin-top:14px}
.loy-key{width:11px;height:11px;border-radius:50%;border:2px dashed var(--line);
  display:inline-block;vertical-align:-1px;margin-right:2px}
.loy-key.on{background:var(--mint);border:0}
.loy-key.gold{background:transparent;border:2px solid var(--gold)}
.loy-key-txt{display:inline-flex;align-items:center;gap:4px}

/* "Regalable" solo aparece cuando el círculo tiene premio: un círculo vacío
   no crea premio al guardar, así que su casilla no hacía nada —y eran catorce
   de veinte pidiendo atención. El hueco se reserva (`visibility`) para que
   las fichas no salten de alto al escribir. */
.loy-circle .loy-share-chk{visibility:hidden}
.loy-circle.has-prize .loy-share-chk{visibility:visible}

/* Vista previa de la apariencia: los tres controles (dos hex y una silueta)
   por separado no dicen nada; juntos sí. */
.loy-prev-wrap{margin:14px 0 4px}
.loy-prev{border-radius:14px;border:1px solid var(--line);background:var(--surface);
  background-size:cover;background-position:center;padding:20px 16px;display:grid;place-items:center}
.loy-prev-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.loy-prev .loy-prev-dot{width:30px;height:30px;display:block;border-radius:50%;
  background:var(--loy-prev-c,var(--accent));opacity:.28}
.loy-prev .loy-prev-dot.on{opacity:1}
.loy-prev .loy-prev-dot.shape-square{border-radius:7px}
.loy-prev .loy-prev-dot.shape-circle{border-radius:50%}
.loy-prev .loy-prev-dot.shape-diamond,.loy-prev .loy-prev-dot.shape-triangle,
.loy-prev .loy-prev-dot.shape-hexagon,.loy-prev .loy-prev-dot.shape-star5{border-radius:0}

/* Casilla "Color propio" + swatch en una línea que no se parte. */
.loy-colorrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.loy-colorrow .chk{font-size:.85rem}

/* Interruptor del programa: es la decisión más grande del panel (enciende el
   Club en el perfil público) y estaba como una casilla más de la lista. */
.loy-onoff{display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:var(--navy-2)}
.loy-onoff input[type=checkbox]{width:auto;margin:2px 0 0;flex:none}
.loy-onoff-txt{display:flex;flex-direction:column;gap:2px}
.loy-onoff-txt .help{margin-top:0}
.loy-geo-btn{width:auto;margin:4px 0 10px}

/* Tres campos que van juntos (lat, lng, radio): en `.row2` el tercero se
   quedaba solo ocupando media línea. */
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:700px){.row3{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.row3{grid-template-columns:1fr}}
@media (max-width:420px){
  .loy-circles{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
}

/* ===== Loyalty: páginas públicas (inscripción + tarjeta del cliente) ===== */
.loy-public{min-height:100vh;min-height:100dvh;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 PIN más ancho que el correo.
   Va al revés de lo que parece lógico a propósito. El correo se entiende solo
   (todo el mundo sabe qué va ahí) y su texto es corto; el PIN necesita
   explicarse —"Crea tu PIN de 4 dígitos"— y con el reparto anterior ese texto
   se cortaba a la mitad, que es justo el dato que el comensal tiene que
   entender para no perder su tarjeta después.
   ⚠️ El reparto se aplica al `.pwd-wrap`, NO al input del PIN: el botón del
   ojito ("mostrar contraseña") lo inyecta el JS envolviendo el campo, así que
   el hijo de la fila es ese span y no el input. Apuntarle al input no cambia
   nada y parece que el CSS no cargó. */
.loy-row2 .loy-email{flex:1}
.loy-row2 .pwd-wrap{flex:1.7}
/* El texto del PIN es largo: se encoge un punto antes que el resto para caber
   entero en pantallas angostas en vez de recortarse con puntos suspensivos. */
.loy-row2 .loy-pin::placeholder{font-size:.86rem}

/* La fecha manda y el género se acomoda a lo que sobre.
   El campo de fecha lo dibuja el navegador ("dd/mm/aaaa" más el icono del
   calendario) y no se deja apretar: a 120px se come el año y queda "dd/mm/a".
   150px es medido en pantalla, no calculado — un <input type=date> recorta por
   dentro sin que scrollWidth lo delate, así que la única forma de saberlo es
   mirarlo. Y NO se le puede poner `auto`: su ancho preferido es enorme y se
   queda con la fila entera. Al género le sobra con el resto (dice solo
   "Género"; el "(opcional)" se bajó a la nota de abajo). */
.loy-row2 input[type=date]{flex:0 0 150px}
.loy-row2 select[name=gender]{flex:1;min-width:0}

/* Nota bajo un campo que no se explica solo (hoy: para qué es la fecha). */
.loy-hint{margin:-2px 0 10px;font-size:.8rem;line-height:1.35;opacity:.75}
.loy-hint strong{opacity: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:var(--accent-text);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;
  position:relative;background-size:cover;background-position:center}
/* Imagen de fondo propia de la tarjeta: capa oscura para que los círculos sigan legibles */
.loy-card.has-bg-image{isolation:isolate}
.loy-card.has-bg-image::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.4);z-index:0}
.loy-card.has-bg-image > *{position:relative;z-index:1}
.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;position:relative}
.cc-redeemed{position:absolute;top:-10px;left:50%;transform:translateX(-50%);z-index:3;
  display:inline-flex;align-items:center;gap:3px;background:linear-gradient(135deg,var(--mint),#1fb98a);
  color:#0d2b23;font-size:.55rem;font-weight:800;letter-spacing:.04em;line-height:1;
  padding:4px 9px;border-radius:999px;white-space:nowrap;box-shadow:0 3px 8px rgba(0,0,0,.4)}
.cc-redeemed::before{content:"✓";font-size:.68rem}
.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;position:relative}
.cc-dot-txt{position:relative;z-index:2}
.cc.prize .cc-dot{border-style:solid;border-color:var(--card-circle-c,var(--accent))}
.cc.filled .cc-dot{background:var(--card-circle-c,var(--accent));border-color:var(--card-circle-c,var(--accent));
  color:var(--accent-text);opacity:1}
.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}

/* Formas de círculo alternativas al círculo clásico (selector de apariencia).
   Sin rotación: el número/✓ adentro debe quedar recto. */
.cc-dot.shape-square{border-radius:8px}
/* Triángulo, rombo, hexágono y estrella se dibujan con un <polygon> SVG en vez
   de clip-path: el contorno de premio pendiente usa `stroke` real (nativo),
   sin capas fantasma ni z-index — más fiable entre navegadores. El SVG cubre
   todo el .cc-dot; el número/✓ va encima como texto normal. */
.cc-dot[class*="shape-"]:not(.shape-circle):not(.shape-square){border:none}
.cc.prize .cc-dot[class*="shape-"]:not(.shape-circle):not(.shape-square),
.cc.filled .cc-dot[class*="shape-"]:not(.shape-circle):not(.shape-square){
  border:none;background:none}
.cc-shape{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.cc-shape-fill{fill:rgba(255,255,255,.18);stroke:none}
.cc.prize:not(.filled) .cc-shape-fill{fill:none;stroke:var(--card-circle-c,var(--accent));stroke-width:3}
.cc.filled .cc-shape-fill{fill:var(--card-circle-c,var(--accent));stroke:none}
.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}

/* Guardar en pantalla de inicio: solo celular (misma idea "mobile-first" que
   el resto de la tarjeta, pero acotada a pantallas angostas de verdad) */
.a2hs-wrap{text-align:center;margin:4px 0 14px;display:none}
@media (max-width:640px){.a2hs-wrap{display:block}}
.a2hs-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);color:var(--text);border-radius:999px;
  padding:8px 14px;font:inherit;font-size:.8rem;font-weight:600;cursor:pointer}
.a2hs-btn .iconify{font-size:1rem}
.a2hs-tip{font-size:.7rem;opacity:.65;margin:8px auto 0;max-width:280px;line-height:1.35}

/* Selector de forma de círculo (panel Apariencia del editor) */
.hidden-shape-select{display:none}
.shape-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:8px;margin-top:8px;max-width:420px}
.shape-opt{display:grid;place-items:center;padding:6px;border-radius:9px;border:1.5px solid var(--line);
  background:var(--navy-2);cursor:pointer}
.shape-opt.active{border-color:var(--pink)}
.shape-swatch{width:22px;height:22px;background:var(--pink);display:block}
.shape-swatch.shape-circle{border-radius:50%}
.shape-swatch.shape-square{border-radius:5px}
/* Los mismos recortes sirven al selector y a la vista previa de la tarjeta:
   una sola definición, así una forma nueva aparece en los dos sitios. */
.shape-swatch.shape-diamond,.loy-prev-dot.shape-diamond{clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%)}
.shape-swatch.shape-triangle,.loy-prev-dot.shape-triangle{clip-path:polygon(50% 0%,0% 100%,100% 100%)}
.shape-swatch.shape-hexagon,.loy-prev-dot.shape-hexagon{clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%)}
.shape-swatch.shape-star5,.loy-prev-dot.shape-star5{clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}

/* ===== 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}
/* Los dos tamaños de paquete, uno al lado del otro. El primero (el grande, el
   que sale más barato por correo) va en rosa; el chico, en fantasma. */
.quota-packs{display:flex;flex-wrap:wrap;gap:8px}
.quota-packs .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:150px;height:150px;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-card.small{margin-top:-2px}
.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}
/* El nivel viaja dentro de tarjetas y filas flex (Miembros, Clientes más
   fieles). Sin `flex:none` la píldora se comprime y "Bronce" sale cortado
   antes que el nombre, que es lo que sí puede ceder. */
.loy-level{flex:none}

/* Miembros: la ✕ apagada de quien NO se puede borrar (tiene visitas o premios).
   Se queda en su sitio en vez de desaparecer para que todas las tarjetas midan
   lo mismo; el `title` explica por qué no se puede. */

/* Estadísticas · panel de Premios: la tasa de canje como titular, con su
   barra debajo. Es el único número de la pantalla que se lee mejor en % que
   en conteo — "38%" dice si el premio funciona; "19 de 50" hay que dividirlo. */
.loy-rate{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.loy-rate-n{font-family:var(--font-display);font-size:2rem;font-weight:700;line-height:1;
  color:var(--accent)}
.loy-rate .muted{font-size:.82rem}

/* ===== 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) =====
   La sección es una tarjeta con tres zonas fijas: encabezado (nombre, conteo,
   visibilidad, borrar), lista de platos y pie con las dos formas de crecer
   (+ Plato, + Subsección). Antes los botones de crear estaban sueltos entre
   la lista y las subsecciones y no se leía dónde terminaba una sección. */

/* Encabezado de la página (título + botón "Ver el menú"). */
.menu-head-row{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.menu-head-row>div{flex:1;min-width:240px}
.menu-head-row p{margin:4px 0 0;font-size:.85rem;line-height:1.5;max-width:70ch}
.menu-head-cta{flex:none;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.menu-kpis{margin-bottom:16px}

.menu-cat{background:var(--navy-2);border:1px solid var(--line);border-radius:14px;
  padding:12px;margin-bottom:12px;transition:border-color .14s ease,opacity .14s ease}
.menu-cat:hover{border-color:color-mix(in srgb,var(--accent) 32%,var(--line))}
/* Sección oculta: sigue editable, pero se lee de un vistazo que no está viva. */
.menu-cat.off,.menu-sub.off{opacity:.62}
.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}
.panel input.menu-cat-name{font-weight:800;font-size:1.25rem;letter-spacing:.2px;flex:1;min-width:140px;padding:.3em .5em;margin-bottom:0}
body.ed .panel input.menu-cat-name{background:transparent;border:1px solid transparent}
body.ed .panel input.menu-cat-name:hover,body.ed .panel input.menu-cat-name:focus{background:var(--navy-2);border-color:var(--line)}
.panel .menu-sub input.menu-cat-name{font-size:1.05rem;font-weight:700}
/* Conteo de platos: dato, no acción — píldora neutra, nunca de color de marca. */
.mcat-count{flex:none;font-size:.72rem;font-weight:700;letter-spacing:.02em;
  color:var(--muted);background:color-mix(in srgb,var(--muted) 15%,transparent);
  border-radius:999px;padding:3px 9px;white-space:nowrap}
.mcat-vis{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted);
  cursor:pointer;white-space:nowrap}
.mcat-vis input{margin:0}

/* Botón de solo ícono (borrar). Cuadrado, discreto, y solo se pone rojo al
   pasar el mouse: en una lista de 20 platos, 20 tachos rojos gritan más que
   el contenido. */
.mico-btn{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  border:1px solid var(--line);background:transparent;color:var(--muted);
  font-size:1.05rem;cursor:pointer;transition:color .12s,border-color .12s,background .12s}
.mico-btn:hover{color:var(--ed-ink,#fff);border-color:color-mix(in srgb,var(--muted) 45%,var(--line))}
.mico-btn.danger:hover{color:var(--ed-error,var(--pink));
  border-color:color-mix(in srgb,var(--ed-error,var(--pink)) 55%,transparent);
  background:color-mix(in srgb,var(--ed-error,var(--pink)) 10%,transparent)}
.mico-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.menu-items{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.menu-items:empty{margin-top:0}
.menu-item-row{display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:8px 10px;
  transition:border-color .12s ease,background .12s ease}
.menu-item-row:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));
  background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.menu-item-row.sortable-ghost{opacity:.4}
.menu-item-row.sortable-chosen{box-shadow:0 6px 20px -8px rgba(0,0,0,.45)}
/* Plato oculto: se atenúa igual que la sección oculta, mismo idioma. */
.menu-item-row.off{opacity:.66}
.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);
  color:var(--muted);font-size:1.05rem;
  border:1px dashed color-mix(in srgb,var(--muted) 40%,transparent)}
.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}
/* El precio es una cifra que se compara en columna: cifras de ancho fijo para
   que los dígitos queden alineados de fila a fila. */
.mi-price{flex:none;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ed-ink,#fff);opacity:.9}
.mi-actions{display:flex;align-items:center;gap:8px}

/* Estado vacío dentro de una sección: dice qué hacer, no solo que no hay nada. */
.menu-empty{margin:8px 0 0;font-size:.82rem;color:var(--muted);
  display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;
  border:1px dashed color-mix(in srgb,var(--muted) 35%,transparent)}
.menu-empty .iconify{font-size:1.1rem;flex:none}

/* Pie de la tarjeta de sección: las dos acciones de crecer, juntas. */
.mcat-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--line)}
.mcat-foot form{display:flex;align-items:center;gap:8px}
.mcat-foot .btn{white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.mcat-subadd{flex:1;min-width:220px}
.panel .mcat-subadd input,.panel .mcat-newsec input{flex:1;min-width:0;margin-bottom:0}
/* El campo de "nueva subsección" vive DENTRO de la tarjeta de sección, que ya
   usa --navy-2. Con el fondo de campo por defecto (también --navy-2) quedaba
   invisible: mismo tono y un borde de 1px que en tema claro casi no se ve. */
body.ed .panel .mcat-subadd input{background:var(--surface)}
.msub-add{margin-top:8px}
.msub-add .btn{display:inline-flex;align-items:center;gap:4px}

/* Crear sección: la acción que abre la carta entera, con aire propio. */
.mcat-newsec{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap}
.mcat-newsec .btn{white-space:nowrap;display:inline-flex;align-items:center;gap:4px}

/* Menú sin ninguna sección: pantalla de arranque, no una línea gris. */
.menu-blank{text-align:center;padding:30px 18px;border-radius:14px;
  border:1px dashed color-mix(in srgb,var(--muted) 35%,transparent)}
.menu-blank .mic{margin:0 auto 12px}
.menu-blank h3{margin:0 0 6px;font-size:1.05rem}
.menu-blank p{margin:0 auto;max-width:46ch;font-size:.88rem;line-height:1.5}

.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 */
  /* El pie de la sección se apila: en 360px el input de subsección y sus dos
     botones en una línea dejaban el campo en 40px de ancho. */
  .mcat-foot{flex-direction:column;align-items:stretch}
  .mcat-foot form{width:100%}
  .mcat-foot .btn{justify-content:center}
  .mcat-subadd{min-width:0}

  /* Encabezado de sección en teléfono. Con el flex-wrap normal quedaba
     "Plato fuerte / 10 platos" arriba, el tacho flotando a media altura y
     "visible / Guardar" descolgado: cuatro cosas repartidas sin eje. Ahora el
     nombre ocupa su propia línea, sus controles van juntos debajo y el tacho
     se ancla arriba a la derecha (el sitio donde ya se busca borrar). */
  .menu-cat-head{position:relative;padding-right:42px;align-items:flex-start;row-gap:8px}
  .menu-cat-head>form:last-child{position:absolute;top:0;right:0}
  /* Gaps y píldora más apretados: así el conteo, la casilla y Guardar caben en
     una sola línea bajo el nombre en un teléfono normal (y si no caben, bajan
     ordenados en vez de descolgarse). */
  .menu-cat-form{flex:1 1 0;min-width:0;gap:7px;row-gap:8px}
  .mcat-count{font-size:.68rem;padding:2px 8px}
  .panel input.menu-cat-name{flex:1 1 100%;min-width:0;font-size:1.1rem}
  .panel .menu-sub input.menu-cat-name{font-size:1rem}
}

/* ===== 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ú ===== */
/* La fila entera es un enlace a editar ese plato: el hallazgo y la acción que
   lo arregla quedan a un toque. Sin subrayado ni color de enlace — se comporta
   como fila, no como texto azul en medio de una tabla. */
.insight-row{display:flex;align-items:center;gap:14px;padding:10px 12px;margin:0 -12px;
  border-radius:11px;border-bottom:1px solid var(--line);font-size:.92rem;
  color:inherit;text-decoration:none;transition:background .15s,transform .1s}
.insight-row:last-child{border-bottom:none}
.insight-row:hover{background:rgba(255,255,255,.045)}
.insight-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ins-thumb{width:34px;height:34px;border-radius:8px;object-fit:cover;flex:none}
.ins-thumb.ph{display:grid;place-items:center;background:var(--navy-2);color:var(--muted);
  font-size:.95rem;border:1px dashed color-mix(in srgb,var(--muted) 40%,transparent)}
.ins-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.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;font-variant-numeric:tabular-nums}
.ins-metric svg{width:15px;height:15px;opacity:.75;flex:none}
/* 3 estados: sin vistas (neutro), 0% con vistas reales (alerta), >0% (bien).
   Antes era siempre verde, hasta para un 0,0% real (parecía buena noticia). */
.ins-conv{min-width:54px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.ins-conv-ok{color:var(--mint)}
.ins-conv-zero{color:var(--ed-error,var(--pink))}
.ins-conv-none{color:var(--muted)}
/* Leyenda de columnas (una sola vez, arriba de los cuatro paneles). */
.ins-legend{font-size:.85rem;line-height:1.55;margin:16px 0 14px}
.ins-empty{font-size:.85rem;margin:0;padding:10px 0}
@media (max-width:560px){
  /* En teléfono el nombre del plato es lo único que no se puede recortar: es
     lo que el dueño busca en la lista. Se van la foto y la sección (que ya se
     adivina por el nombre) y las columnas se aprietan para dárselo. */
  .ins-thumb,.ins-cat{display:none}
  .insight-row{gap:9px;padding:10px 8px;margin:0 -8px}
  .ins-metric{min-width:42px;gap:5px}
  .ins-conv{min-width:44px}
}

/* ===== Aviso informativo reutilizable (no es error ni urgencia) =====
   Para cuando falta un dato que el cliente puede aportar (ej. el CSV de
   ventas). Tono ámbar/tinta: informa y propone, no alarma como .wr-alert. */
.note-card{display:flex;align-items:flex-start;gap:14px;margin:16px 0 0;
  padding:14px 16px;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--gold) 40%,var(--line));
  background:color-mix(in srgb,var(--gold) 8%,var(--surface))}
.note-card strong{display:block;font-family:var(--font-display);font-size:.98rem;
  color:var(--ed-ink,#fff);margin-bottom:3px}
.note-card p{margin:0;font-size:.85rem;line-height:1.5}

/* ===== Menú · Subir ventas: historial de cargas ===== */
.sales-row{display:flex;align-items:center;gap:12px;padding:11px 8px;margin:0 -8px;
  border-top:1px solid var(--line);border-radius:9px;transition:background .12s ease}
.sales-row:first-of-type{border-top:0}
.sales-row:hover{background:color-mix(in srgb,var(--muted) 8%,transparent)}
.sales-grow{flex:1;min-width:0}
.sales-period{font-weight:600;font-size:.9rem}
.sales-when{font-size:.78rem}
/* Verde solo cuando TODAS las filas encontraron su plato: un 40/100 en verde
   haría creer que la carga quedó completa. */
.sales-match{flex:none;font-size:.78rem;font-weight:700;white-space:nowrap;
  border-radius:999px;padding:4px 10px;color:var(--gold);
  background:color-mix(in srgb,var(--gold) 15%,transparent)}
.sales-match.ok{color:var(--mint);background:color-mix(in srgb,var(--mint) 15%,transparent)}
.sales-match.bad{color:var(--ed-error,var(--pink));
  background:color-mix(in srgb,var(--ed-error,var(--pink)) 15%,transparent)}
@media (max-width:560px){
  .sales-row{flex-wrap:wrap}
  .sales-match{margin-left:50px}
}

/* ===== 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;min-height:100dvh;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.55rem;font-weight:800;margin:26px 0 14px;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}
/* Editor de correos (Leads/Loyalty): la misma barra pero en 2 filas fijas
   (tipografía/tamaño/interlineado arriba, botones de formato abajo) en vez
   de un solo renglón que se envuelve según el ancho. Alcance limitado a
   .rich-editor: NO afecta al bloque "Título y párrafo" del Editor. */
.rich-editor .text-toolbar{flex-direction:column;align-items:stretch;gap:0}
.rich-editor .tb-row{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.rich-editor .text-toolbar select{margin-bottom:0}
/* Casillas/radios ocultos: el botón visible es su <label> */
.tb-check,.tb-radio,
body.ed .panel .tb-check,body.ed .panel .tb-radio{
  /* La especificidad importa: `.panel input{width:100%}` le ganaba a la
     regla corta y dejaba estos controles escondidos midiendo el ancho
     entero de la pantalla. */
  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;appearance:none;
  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,
button.tb-btn.ql-active{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}
/* Envuelve los controles que maneja Quill (bold/italic/align/list/link/clean)
   sin crear una caja propia, para que sigan en la misma fila flex que
   tipografía/tamaño (fuera de este span, ver _rich_editor.html) */
.rich-toolbar-quill{display:contents}
/* quill.snow.css se carga después de este archivo y trae sus propias reglas
   para <button> dentro del toolbar (tamaño/borde/fondo/color activo); estas
   overrides con !important son necesarias para que .tb-btn se vea igual aquí
   que en el bloque de texto del Editor. */
.rich-toolbar-quill .tb-btn{width:30px!important;height:30px!important;
  padding:0!important;float:none!important;display:inline-flex!important;
  align-items:center!important;justify-content:center!important;
  border:1px solid #d8d8e6!important;background:#fff!important;color:#444!important;
  border-radius:8px!important}
.rich-toolbar-quill .tb-btn:hover{background:#f0f0f7!important;color:#444!important}
.rich-toolbar-quill .tb-btn.ql-active{background:#ff2e6e!important;color:#fff!important;
  border-color:#ff2e6e!important}

/* ── 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 */
  /* Ancho reservado para los botones de la cabecera de un bloque. Sale del
     caso más largo (Contenido + Publicar + Ajustes + ✕); es lo que mantiene
     los sellos COMPLETO/Llénalo en la misma columna en todas las filas. */
  --acciones-w:352px;
  --ed-error:#F87171;  /* error/peligro (por fin distinto del aviso) */
  /* Tokens de gráficas (dataviz): 1 = magnitud/serie única, 2 = 2ª categoría.
     Validados CVD (ΔE 68) sobre la superficie oscura. */
  --chart-1:var(--accent);   /* pink de marca (área, barras, "móvil") */
  --chart-2:#7C5CFF;         /* 2ª categoría distinta ("escritorio") */
  --chart-grid:#2C2C38;      /* rejilla/promedio, recesiva */
  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: usa los tokens categóricos --chart-1/--chart-2
   (definidos por tema), validados CVD para móvil vs escritorio. */

/* 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)}
/* Dentro de una tarjeta `accent` el fondo YA es el degradé de alarma: pintar
   el número de rojo encima lo deja ilegible. Ahí manda el blanco. Aplica a
   Feedback y a Personal, que usan el mismo patrón. */
body.ed .kpi2.accent .kpi2-n.res-alert{color:#fff}
body.ed .res-row{display:flex;align-items:center;gap:11px;padding:9px 8px;margin:0 -8px;
  border-top:1px solid var(--line);border-radius:8px;transition:background .12s ease}
body.ed .res-row:first-of-type{border-top:0}
body.ed .res-row:hover{background:color-mix(in srgb,var(--muted) 8%,transparent)}
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)}

/* Selector de fecha nativo (ej. Menú > Subir ventas): el ícono del navegador
   es negro por defecto y se pierde sobre el fondo oscuro del editor. */
body.ed input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.7;cursor:pointer}
body.ed .lead-search input::-webkit-search-cancel-button{filter:invert(.65);cursor:pointer}
html[data-ed-theme="light"] body.ed .lead-search input::-webkit-search-cancel-button{filter:none}

/* ==================================================================
   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;
  /* El azul de Google se oscurece sobre blanco: el #4285f4 original queda en
     3,6:1 y no pasa AA en texto chico (sellos y pestañas de Feedback). */
  --gblue:#1A56C4;
  /* Gráficas en tema claro: validado CVD (ΔE 63) sobre blanco. */
  --chart-1:var(--accent); --chart-2:#6C4CE0; --chart-grid:#E5E5EC;
}
/* 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 .msg{
  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 input[type=date]::-webkit-calendar-picker-indicator{filter:none}
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 */

/* ==================================================================
   EDITOR · Avisos a clientes (banner arriba del panel).
   Los publica André desde /panel-admin/ y los ve el cliente en todas
   las pantallas del Editor. Usan tokens (--mint/--gold/--accent), así
   que funcionan igual en tema oscuro y claro sin duplicar reglas.
   ================================================================== */
.ann-wrap{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.ann{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line);
  /* Franja de color a la izquierda: identifica el tono de un vistazo. */
  border-left:4px solid var(--accent);
}
.ann-good{border-left-color:var(--mint)}
.ann-warn{border-left-color:var(--gold)}
.ann-info{border-left-color:var(--accent)}
.ann-body{flex:1;min-width:0}
.ann-title{margin:0 0 4px;font-weight:600;font-size:.95rem}
.ann-text{margin:0;font-size:.86rem;color:var(--muted);line-height:1.5}
.ann-cta{margin-top:10px;display:inline-flex}
/* La X de cerrar: discreta, pero con área de toque cómoda en móvil. */
.ann-x button{
  background:none;border:0;cursor:pointer;color:var(--muted);
  padding:6px;margin:-6px -6px 0 0;border-radius:8px;line-height:0;
}
.ann-x button:hover{color:var(--ed-ink);background:var(--navy-2)}
.ann-x svg{width:16px;height:16px}
@media (max-width:640px){
  .ann{padding:12px 13px;border-radius:12px}
  .ann-title{font-size:.9rem}
}

/* ==================================================================
   EDITOR · Panel "Plan" (suscripción, cupo, pagos y baja).
   Vive siempre dentro del editor (body.ed), así que usa sus tokens
   (--ed-ink/--muted/--mint/--gold/--ed-error) y sirve a los dos temas
   sin duplicar reglas. Misma gramática que los Avisos: una franja de
   color a la izquierda dice el estado antes de leer una palabra.
   ================================================================== */
.plan-hero{border-left:4px solid var(--muted)}
.plan-auto,.plan-manual{border-left-color:var(--mint)}      /* al día */
.plan-cancelada,.plan-pausada{border-left-color:var(--gold)}/* atención */
.plan-sin_plan{border-left-color:var(--accent)}             /* por activar */

.plan-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.plan-eyebrow{font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.18em;font-size:.68rem;color:var(--muted)}
/* `.panel h2` gana por especificidad: hay que calificarlo con el padre. */
.plan-hero .plan-name{font-size:1.5rem;margin:3px 0 0}
.plan-price{font-family:var(--font-display);font-weight:700;font-size:2.1rem;
  line-height:1;margin:14px 0 0}
.plan-price span{font-family:var(--font-body);font-size:.82rem;font-weight:400;color:var(--muted)}
.plan-when{margin:12px 0 0;font-size:.95rem;line-height:1.5}
.plan-note{margin:8px 0 0;font-size:.85rem;color:var(--muted);line-height:1.55}
/* La mitad incómoda de la pausa: hasta cuándo se guardan los datos. Va justo
   debajo del "no perdiste nada" y tiene que distinguirse de él — pero en ámbar
   y no en rojo: cuando faltan 350 días esto es información, no una alarma. */
.plan-caduca .iconify{color:var(--gold)}
.plan-card{margin:8px 0 0;font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.plan-note .iconify,.plan-card .iconify,.plan-safe .iconify{vertical-align:-.15em;margin-right:5px}
.plan-fine{margin:8px 0 0;font-size:.78rem;color:var(--muted)}

/* `.btn` es 100 % ancho por defecto: en escritorio eso grita. En móvil sí
   conviene el ancho completo (pulgar). */
.plan-cta{margin-top:16px}
.plan-cta .btn{width:auto}

/* Píldora de aviso: tinte en vez de sólido. El estado bueno (.pill.on, menta
   sólida) puede gritar; "en pausa" no debe dar miedo, solo verse. */
.pill.warn{background:color-mix(in srgb,var(--gold) 18%,transparent);
  color:var(--gold);border-color:color-mix(in srgb,var(--gold) 40%,transparent)}

/* ---- Historial de pagos ---- */
.plan-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.plan-tbl{width:100%;border-collapse:collapse;font-size:.88rem}
.plan-tbl th{text-align:left;font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.1em;font-size:.66rem;color:var(--muted);font-weight:700;
  padding:0 12px 8px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.plan-tbl td{padding:11px 12px 11px 0;vertical-align:top;
  border-bottom:1px solid color-mix(in srgb,var(--muted) 14%,transparent)}
.plan-tbl tr:last-child td{border-bottom:none}
.plan-tbl .ta-r{text-align:right;padding-right:18px}
/* Cifras y fechas tabulares: en una columna de montos, que los dígitos no
   bailen es la diferencia entre una tabla y un estado de cuenta. */
.plan-date{white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums}
.plan-amt{white-space:nowrap;font-weight:600;font-variant-numeric:tabular-nums}
.plan-kind{display:block;font-size:.74rem;color:var(--muted);margin-top:2px}
.plan-fact{white-space:nowrap;font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.plan-st{display:inline-block;font-size:.72rem;font-weight:600;
  padding:.2em .65em;border-radius:999px;white-space:nowrap}
.plan-st.ok{background:color-mix(in srgb,var(--mint) 18%,transparent);color:var(--mint)}
.plan-st.no{background:color-mix(in srgb,var(--ed-error) 18%,transparent);color:var(--ed-error)}
.plan-st.rev{background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold)}

/* ---- Dejar de pagar ---- */
.plan-zone{border-left:4px solid var(--line)}
.plan-zone-p{margin:0 0 10px;font-size:.88rem;color:var(--muted);line-height:1.55}
/* La promesa de "no se borra nada" va en verde y en caja: es lo que decide si
   el cliente se atreve a tocar el botón, no la letra chica. */
.plan-safe{background:color-mix(in srgb,var(--mint) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--mint) 25%,transparent);
  border-radius:12px;padding:10px 12px;margin-bottom:12px}
.plan-help{font-size:.8rem;text-align:center;margin:0}

@media (max-width:640px){
  .plan-hero .plan-name{font-size:1.3rem}
  .plan-price{font-size:1.8rem}
  .plan-cta .btn{width:100%}
}

/* ==================================================================
   SUPER ADMIN (/staff/) — sidebar fijo + contenido.
   Reusa el sistema grafito del Editor (body.ed: .panel/.kpi2/.pill/
   .badge-done/.msg/tokens de tema claro-oscuro) — solo se agrega la
   estructura de layout, nada de color nuevo.
   ================================================================== */
.sadm-shell{display:flex;min-height:100vh;align-items:stretch}
.sadm-side{flex:0 0 248px;background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:18px 14px;position:sticky;top:0;height:100vh;overflow-y:auto}
.sadm-brand{display:flex;align-items:center;gap:8px;padding:6px 8px 16px;text-decoration:none}
.sadm-brand img{height:22px}
html[data-ed-theme="light"] .sadm-brand img{filter:invert(.88)}
.sadm-brand-tag{font-family:var(--font-display);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.sadm-search{position:relative;margin-bottom:14px}
.sadm-search .iconify{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted)}
.sadm-search input{width:100%;padding:.65em .8em .65em 2.2em;border-radius:10px;border:1px solid var(--line);
  background:var(--navy-2);color:var(--ed-ink);font-family:inherit;font-size:.85rem}
.sadm-nav{display:flex;flex-direction:column;gap:2px;flex:1}
.sadm-nav-i{display:flex;align-items:center;gap:10px;padding:.65em .7em;border-radius:10px;
  color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:500;transition:background .12s,color .12s}
.sadm-nav-i .iconify{font-size:1.15rem}
.sadm-nav-i:hover{background:color-mix(in srgb,var(--muted) 14%,transparent);color:var(--ed-ink)}
.sadm-nav-i.on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.sadm-nav-badge{margin-left:auto;background:var(--ed-error);color:#fff;font-size:.68rem;font-weight:700;
  min-width:18px;height:18px;border-radius:999px;display:grid;place-items:center;padding:0 5px}
.sadm-nav-soon{cursor:default;opacity:.55}
.sadm-nav-label{font-family:var(--font-display);font-size:.65rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);padding:14px 10px 4px;opacity:.7}
.sadm-soon-pill{margin-left:auto;font-size:.6rem;padding:.15em .5em}
.sadm-side-foot{display:flex;flex-direction:column;gap:8px;padding-top:14px;margin-top:10px;border-top:1px solid var(--line)}
.sadm-side-email{font-size:.75rem;padding:0 8px;word-break:break-all}
.sadm-main{flex:1;min-width:0;padding:26px 30px 60px}

@media (max-width:900px){
  .sadm-shell{flex-direction:column}
  .sadm-side{position:static;height:auto;flex:none;width:100%;border-right:0;border-bottom:1px solid var(--line)}
  .sadm-nav{flex-direction:row;overflow-x:auto;gap:6px}
  .sadm-nav-i{flex:0 0 auto;white-space:nowrap}
  .sadm-nav-label{display:none}
  .sadm-side-foot{flex-direction:row;flex-wrap:wrap;align-items:center}
  .sadm-main{padding:18px 16px 40px}
}

/* Impersonación (modo soporte): banner fijo arriba del Editor mientras
   André está viendo la cuenta de un cliente. */
.sadm-impersonate-bar{background:var(--gold);color:#3a2a00;text-align:center;font-size:.85rem;
  font-weight:600;padding:.55em 1em;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.sadm-impersonate-bar form{margin:0}
.sadm-impersonate-bar button{background:#3a2a00;color:#fff;border:0;border-radius:8px;
  padding:.35em .9em;font-size:.8rem;font-weight:700;cursor:pointer}

/* Tabla maestra de perfiles */
.sadm-table-wrap{overflow-x:auto}
.sadm-table{width:100%;border-collapse:collapse;font-size:.88rem}
.sadm-table th{text-align:left;color:var(--muted);font-weight:600;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.06em;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.sadm-table td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.sadm-table tr:hover td{background:color-mix(in srgb,var(--muted) 6%,transparent)}
.sadm-table a.sadm-row-link{color:inherit;text-decoration:none;font-weight:600}
.sadm-table a.sadm-row-link:hover{color:var(--accent)}
.sadm-cbar{width:74px;height:6px;border-radius:999px;background:color-mix(in srgb,var(--muted) 22%,transparent);
  overflow:hidden;display:inline-block;vertical-align:middle;margin-right:8px}
.sadm-cbar i{display:block;height:100%;background:var(--mint)}
.sadm-cbar.mid i{background:var(--gold)}
.sadm-cbar.low i{background:var(--ed-error)}
.sadm-filters{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.sadm-filters a{padding:6px 12px;border-radius:999px;border:1px solid var(--line);font-size:.82rem;
  text-decoration:none;color:var(--muted)}
.sadm-filters a.on{background:var(--accent);color:#fff;border-color:transparent}
.sadm-empty{padding:40px 20px;text-align:center;color:var(--muted)}

/* Copiar el link de un tagger (Hardware). El botón vive dentro de la celda del
   código: lo que se copia es la URL pública completa, no el código pelado —
   un código suelto no se le puede mandar a nadie por WhatsApp. */
.sadm-copy{display:inline-flex;align-items:center;gap:5px;margin-left:8px;
  padding:3px 9px;border-radius:8px;border:1px solid var(--line);background:transparent;
  color:var(--muted);font-family:inherit;font-size:.72rem;font-weight:600;cursor:pointer;
  vertical-align:middle;white-space:nowrap}
.sadm-copy:hover{color:var(--accent);border-color:var(--accent)}
.sadm-copy.ok{color:var(--mint);border-color:var(--mint)}
.sadm-copy .iconify{font-size:.95rem}
.sadm-link{display:block;margin-top:3px;font-size:.7rem;color:var(--muted);word-break:break-all}
.sadm-code-cell{min-width:250px}

/* --- Nombre de enlace (registro) ---------------------------------------
   El campo más importante de la pantalla: es la única decisión del registro
   que no se puede deshacer. Por eso lleva el dominio pegado delante (para que
   se lea como el link que va a ser), su propio estado en vivo y un aviso que
   no se puede confundir con ayuda decorativa. */
.nom-fila{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;background:var(--navy-2)}
.nom-dominio{display:flex;align-items:center;padding:0 2px 0 12px;color:var(--muted);
  font-size:.9rem;white-space:nowrap;user-select:none}
.nom-fila input{flex:1;min-width:0;border:0;background:transparent;padding:.7em .6em;
  color:var(--ed-ink);font-family:inherit;font-size:.95rem;
  /* El input global trae margen propio; dentro del flex se sumaría a la
     altura de la fila y el campo quedaría más alto que los de arriba. */
  margin:0;border-radius:0}
.nom-fila input:focus{outline:none}
.nom-fila:focus-within{border-color:var(--accent)}
.nom-estado{min-height:1.1em;margin-top:6px;font-size:.8rem;color:var(--muted)}
.nom-estado.ok{color:var(--mint)}
.nom-estado.mal{color:var(--ed-error)}
.nom-sugerencias{margin-top:8px}
.nom-sug-label{display:block;font-size:.78rem;color:var(--muted);margin-bottom:6px}
.nom-sug-lista{display:flex;flex-wrap:wrap;gap:6px}
.nom-sug{padding:5px 11px;border-radius:999px;border:1px solid var(--line);
  background:transparent;color:var(--ed-ink);font-family:inherit;font-size:.8rem;cursor:pointer}
.nom-sug:hover{border-color:var(--mint);color:var(--mint)}
.nom-auto{display:inline-flex;align-items:center;gap:5px;margin-top:10px;padding:5px 11px;
  border-radius:999px;border:1px dashed var(--line);background:transparent;color:var(--muted);
  font-family:inherit;font-size:.8rem;cursor:pointer}
.nom-auto:hover{color:var(--accent);border-color:var(--accent)}
.nom-aviso{display:flex;gap:9px;margin-top:12px;padding:10px 12px;border-radius:10px;
  background:color-mix(in srgb,var(--gold) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);
  font-size:.79rem;line-height:1.45;color:var(--ed-ink)}
.nom-aviso .iconify{flex:none;font-size:1.1rem;color:var(--gold);margin-top:1px}


/* Ficha de detalle de perfil */
.sadm-detail-head{display:flex;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.sadm-detail-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--navy-2)}
.sadm-grid2{display:grid;grid-template-columns:2fr 1fr;gap:18px}
@media (max-width:900px){.sadm-grid2{grid-template-columns:1fr}}
.sadm-missing{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sadm-note{padding:10px 0;border-top:1px solid var(--line)}
.sadm-note:first-child{border-top:0}
.sadm-note-meta{color:var(--muted);font-size:.75rem;margin-top:2px}

/* Errores */
.sadm-tb{white-space:pre-wrap;word-break:break-word;background:var(--navy-2);border:1px solid var(--line);
  border-radius:12px;padding:14px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.78rem;line-height:1.5}
.sadm-lvl{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:.2em .6em;border-radius:999px}
.sadm-lvl-warning{background:color-mix(in srgb,var(--gold) 20%,transparent);color:var(--gold)}
.sadm-lvl-error{background:color-mix(in srgb,var(--ed-error) 20%,transparent);color:var(--ed-error)}
.sadm-lvl-critical{background:var(--ed-error);color:#fff}


/* ==================================================================
   EDITOR · VISTA PREVIA VIVA + guardado sin recargar (F1)

   El teléfono de la derecha NO es una maqueta: es el Perfil real,
   /t/<code>, dentro de un iframe. El dueño puede abrirlo aunque esté
   sin publicar, no genera ScanEvent y track_click no escribe sin un
   escaneo previo — así que la vista previa no ensucia ni una analítica.

   La escala importa: el iframe se renderiza a 390px de ancho (un
   teléfono de verdad) y se encoge con transform. Si en vez de eso se
   dejara a 265px reales, los @media del Perfil se comportarían como en
   una columna angosta y la vista previa mentiría.
   ================================================================== */
.cms.ed-with-preview{max-width:1420px}

.ed-live{display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:22px;align-items:start;margin-top:18px}
.ed-live-main{min-width:0}
.ed-live-side{position:sticky;top:76px;display:flex;flex-direction:column;
  align-items:center;gap:10px}

.ed-phone{--ph-w:390px;--ph-h:844px;--ph-s:.68;
  width:calc(var(--ph-w) * var(--ph-s) + 18px);
  padding:8px;border-radius:28px;background:var(--navy-2);
  border:1px solid var(--line);box-shadow:0 18px 44px rgba(0,0,0,.38)}
.ed-phone-vp{width:100%;border-radius:21px;overflow:hidden;background:#000;
  height:min(calc(var(--ph-h) * var(--ph-s)), calc(100vh - 215px))}
.ed-phone-vp iframe{width:var(--ph-w);height:var(--ph-h);border:0;display:block;
  transform:scale(var(--ph-s));transform-origin:0 0}

.ed-prev-head{display:none}
.ed-prev-note{font-size:.75rem;color:var(--muted);text-align:center;
  line-height:1.5;margin:0}
.ed-live-side .btn{width:auto}

/* El botón flotante y el panel a pantalla completa: solo donde la pantalla
   partida no cabe. Es el MISMO iframe, movido por CSS — el perfil nunca se
   descarga dos veces. */
.ed-preview-fab{display:none;position:fixed;right:16px;bottom:96px;z-index:600;
  align-items:center;gap:8px;padding:.75em 1.15em;border-radius:999px;border:0;
  cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:.85rem;
  background:var(--accent);color:#fff;box-shadow:0 10px 26px rgba(0,0,0,.45)}
.ed-preview-fab .iconify{font-size:1.15rem}

@media (max-width:1080px){
  .cms.ed-with-preview{max-width:var(--cms-maxw)}
  .ed-live{grid-template-columns:1fr}
  .ed-live-side{position:fixed;inset:0;z-index:900;background:var(--navy);
    padding:14px;overflow:auto;display:none;gap:12px}
  body.ed-preview-on{overflow:hidden}
  body.ed-preview-on .ed-live-side{display:flex}
  .ed-phone{--ph-s:1;width:min(390px,94vw);max-width:100%}
  .ed-phone-vp{width:100%;height:calc(100vh - 190px)}
  .ed-phone-vp iframe{width:100%;height:100%;transform:none}
  .ed-prev-head{display:flex;align-items:center;justify-content:space-between;
    width:min(390px,94vw);max-width:100%;font-family:var(--font-display);
    font-weight:700;font-size:.95rem;color:var(--ed-ink,#fff)}
  .ed-prev-close{background:none;border:0;color:var(--muted);font-size:1.3rem;
    line-height:1;cursor:pointer;padding:4px 8px}
  .ed-prev-close:hover{color:var(--ed-ink,#fff)}
  .ed-preview-fab{display:inline-flex}
}

/* "✓ Guardado" junto al botón que se tocó. Con 17 botones de guardar, el
   parpadeo de la página nunca fue confirmación de nada. */
.save-flag{display:inline-flex;align-items:center;gap:5px;margin-left:10px;
  font-size:.82rem;font-weight:600;color:var(--mint);white-space:nowrap;
  opacity:0;transition:opacity .2s ease;pointer-events:none}
.save-flag.on{opacity:1}
.save-flag .iconify{font-size:1rem}

/* En tema claro la sombra dura del teléfono se ve como una mancha: baja a la
   misma elevación sutil que usan los paneles. */
html[data-ed-theme="light"] body.ed .ed-phone{
  box-shadow:0 1px 2px rgba(20,20,30,.05),0 10px 30px rgba(20,20,30,.10)}
html[data-ed-theme="light"] body.ed .ed-preview-fab{
  box-shadow:0 6px 20px rgba(20,20,30,.22)}


/* ==================================================================
   EDITOR · F3: la guía y los bloques plegados

   El editor abría con todo desplegado a la vez: la galería con dos
   campos por foto, el editor de texto con sus dos barras, los nueve
   botones de Acciones. ~50 controles antes de escribir una letra. Ahora
   cada bloque es una línea que se abre al tocarla, y los sellos
   COMPLETO / Llénalo —que ya existían, pero repartidos— se suman arriba
   en una sola guía que además lleva hasta lo que falta.
   ================================================================== */
.ed-guia{padding:16px 18px}
.ed-guia-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ed-guia-top strong{font-family:var(--font-display);font-size:1rem;
  letter-spacing:-.01em;color:var(--ed-ink,#fff)}
.ed-guia-pct{font-family:var(--font-display);font-weight:700;font-size:.9rem;
  color:var(--mint);font-variant-numeric:tabular-nums}
.ed-guia-bar{height:6px;border-radius:999px;background:var(--navy-2);
  margin:10px 0 10px;overflow:hidden}
.ed-guia-bar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--purple),var(--mint));
  transition:width .45s ease}
.ed-guia-falta{margin:0;font-size:.82rem;color:var(--muted);line-height:1.7}
.ed-guia-falta.ok{color:var(--mint)}
.ed-ir{color:var(--accent);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer}
.ed-ir:hover{filter:brightness(1.15)}
/* "y N cosas más": un perfil recién activado tiene doce pendientes, y doce
   seguidos no son una guía sino una lista de reproches. */
.ed-mas{background:none;border:0;padding:0;margin-left:8px;cursor:pointer;
  font-family:inherit;font-size:.82rem;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px}
.ed-mas:hover{color:var(--ed-ink,#fff)}

/* Un bloque cerrado es una línea. Toda la barra abre, menos sus controles. */
.block-body{display:none}
.block-item.open>.block-body{display:block}
.block-item>.bhead{cursor:pointer;user-select:none}
.block-item>.bhead .inline-actions{cursor:auto}
.blk-caret{font-size:1.15rem;color:var(--muted);flex:none;
  transition:transform .18s ease}
.block-item.open .blk-caret{transform:rotate(180deg)}
/* La flecha ya no va suelta: vive dentro del botón "Contenido", que es lo que
   le pone nombre a lo que abre. */
.blk-toggle{display:inline-flex;align-items:center;gap:5px}
.blk-toggle .blk-caret{font-size:1rem;margin-left:-2px}

/* El nombre del bloque se escribe en la propia línea. Se ve como el texto que
   era (negrita, sin caja) hasta que lo tocas: una fila de recuadros grises
   convertiría el mapa del perfil en un formulario.

   La especificidad importa, igual que en el nombre de categoría del menú:
   `.panel input{width:100%;margin-bottom:10px}` y `body.ed .panel input`
   (fondo y color) le ganan a una regla corta — el campo se estiraba a media
   cabecera, empujaba los botones a una segunda línea y salía con caja gris. */
/* La cabecera de un bloque es UN renglón: nombre a la izquierda, estado y
   botones a la derecha. Sin `nowrap`, un título largo empujaba la ✕ a una
   segunda línea y la fila crecía al doble. El que cede es el campo del
   nombre (`flex:0 1 auto`, min 7ch) y el tipo, que se recorta con puntos. */
.bhead-id{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;
  flex-wrap:nowrap}
.bhead-id .blk-tipo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* El estado, anclado a la derecha: los sellos de todas las filas alineados. */
.blk-estado{display:flex;align-items:center;gap:8px;flex:none;justify-content:flex-end}
/* Y el bloque de botones reserva SIEMPRE el mismo ancho —el del caso más
   largo, el de Menú con "Ajustes"—: si no, cada fila empezaba su estado en un
   sitio distinto según los botones que le tocaran. */
.bhead .inline-actions{flex:none;flex-wrap:nowrap;justify-content:flex-end;
  min-width:var(--acciones-w)}
.bhead-id .blk-name-form{display:contents}
.panel .blk-name{font:inherit;font-weight:700;border-radius:8px;
  padding:4px 8px;margin:-4px 0;
  flex:0 1 auto;width:auto;max-width:min(30ch,100%);min-width:7ch;
  field-sizing:content;   /* donde exista, crece con lo escrito */
  transition:border-color .15s ease,background .15s ease}
.panel .blk-name::placeholder{color:var(--muted);font-weight:600}
body.ed .panel .blk-name{background:transparent;border:1px solid transparent;
  color:var(--ed-ink)}
body.ed .panel .blk-name:hover{border-color:var(--line)}
body.ed .panel .blk-name:focus{outline:none;background:var(--navy-2);
  border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
body.ed .panel .blk-name.blk-name-busy{
  border-color:color-mix(in srgb,var(--mint) 60%,var(--line))}
/* "oculto" y el botón que lo apaga: el mismo estado dicho en los dos sitios. */
.blk-oculto{font-size:.78rem;color:var(--muted);border:1px solid var(--line);
  border-radius:999px;padding:1px 8px}
.pub-toggle{display:inline-flex;align-items:center;gap:5px}
.pub-toggle .iconify{font-size:1rem}
.pub-toggle.pub-off{color:var(--accent)}
.pub-toggle.pub-off .iconify{opacity:.9}
.block-item:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.block-item.open{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}

/* Al llegar desde la guía, el destino se señala un momento: sin eso, en un
   editor largo, el salto deja al cliente sin saber qué vino a mirar. */
.ed-destacar{animation:edDestacar 1.6s ease}
@keyframes edDestacar{
  0%,100%{box-shadow:0 0 0 0 transparent}
  15%,60%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent)}
}
@media (prefers-reduced-motion:reduce){
  .ed-destacar{animation:none}
  .blk-caret,.ed-guia-bar i{transition:none}
}


/* ==================================================================
   EDITOR · F2: el panel lateral

   Bloques y botones se editaban en otra página. En el perfil demo son
   nueve botones en Acciones y siete en Redes: dieciséis viajes de ida y
   vuelta, cada uno perdiendo dónde estabas. El panel carga las mismas
   páginas por fetch; el enlace sigue siendo un href de verdad, así que
   sin JavaScript todo navega como siempre.
   ================================================================== */
.ed-cajon{
  border:0;padding:0;margin:0 0 0 auto;max-width:none;max-height:none;
  width:min(560px,100vw);height:100dvh;background:var(--navy);
  color:var(--ed-ink,#fff);box-shadow:-24px 0 60px rgba(0,0,0,.45);
  overflow:hidden}
.ed-cajon::backdrop{background:rgba(6,6,20,.62)}
/* El display SOLO cuando está abierto. Puesto en la regla de arriba pisaba el
   `dialog:not([open]){display:none}` del navegador, y el panel cerrado se
   quedaba de fantasma al final de la página: 720px de vacío y una cabecera
   "Editar" suelta que no abre nada. */
.ed-cajon[open]{display:flex;flex-direction:column;
  animation:edCajonEntra .22s cubic-bezier(.2,.8,.3,1)}
@keyframes edCajonEntra{from{transform:translateX(28px);opacity:.4}to{transform:none;opacity:1}}

.ed-cajon-head{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);flex:none;
  background:var(--navy-2)}
.ed-cajon-head strong{font-family:var(--font-display);font-size:1.02rem;
  letter-spacing:-.01em}
.ed-cajon-x{background:none;border:0;color:var(--muted);font-size:1.25rem;
  line-height:1;cursor:pointer;padding:6px 10px;border-radius:8px}
.ed-cajon-x:hover{color:var(--ed-ink,#fff);background:var(--surface)}

.ed-cajon-body{flex:1;overflow-y:auto;padding:18px 20px 28px;-webkit-overflow-scrolling:touch}
/* Dentro del panel, el formulario ya no es una página: sin ancho máximo
   centrado ni panel dentro de panel. */
.ed-cajon-body .ed-form-page{max-width:none}
.ed-cajon-body .panel-form{background:none;border:0;padding:0;box-shadow:none}
.ed-cajon-body .fgroup:first-child{padding-top:0}

/* A pantalla completa en el teléfono: 560px de panel sobre 375 no es panel. */
@media (max-width:640px){
  .ed-cajon{width:100vw}
  .ed-cajon-body{padding:16px 16px 28px}
}
@media (prefers-reduced-motion:reduce){.ed-cajon[open]{animation:none}}

html[data-ed-theme="light"] body.ed .ed-cajon{
  box-shadow:-18px 0 50px rgba(20,20,30,.18)}

/* Avisos dentro del panel. Un toast no sirve aquí: el <dialog> modal se
   dibuja en el top layer y el aviso quedaría detrás del fondo oscuro. */
.ed-cajon-avisos{display:flex;flex-direction:column;gap:8px;margin:0 0 16px}
.ed-cajon-aviso{border-radius:10px;padding:10px 14px;font-size:.88rem;
  border:1px solid var(--line);background:var(--navy-2)}
.ed-cajon-aviso.error,.ed-cajon-aviso.warning{
  border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,var(--navy-2))}
.ed-cajon-aviso.success{
  border-color:var(--mint);background:color-mix(in srgb,var(--mint) 12%,var(--navy-2))}


/* ==================================================================
   EDITOR · F4: temas prediseñados

   La sección empezaba con ocho ruedas de color. Un restaurantero no es
   director de arte: casi nadie acierta ocho colores que combinen, y el
   que lo intenta acaba con un perfil feo que le echa la culpa a Tagger.

   La miniatura se pinta con los colores DEL PROPIO tema, que llegan como
   variables en el `style` de cada botón. No hay una imagen aparte que se
   pueda desincronizar: si mañana cambia una paleta, la miniatura cambia
   con ella o no cambia ninguna de las dos.
   ================================================================== */
.tema-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px}

.tema-sw{width:100%;display:flex;flex-direction:column;gap:0;padding:0;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;font-family:inherit;text-align:left;
  transition:border-color .15s ease,transform .12s ease,box-shadow .15s ease}
.tema-sw:hover{transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.tema-sw.on{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.tema-sw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* La maqueta en miniatura: fondo, dos renglones y un botón. Es lo mínimo
   que deja ver cómo se van a llevar los colores entre sí. */
.tema-mini{background:var(--t-bg);padding:14px 12px 12px;display:flex;
  flex-direction:column;gap:6px;min-height:88px;justify-content:flex-end}
.tema-l{height:5px;border-radius:99px;display:block}
.tema-l1{width:64%;background:var(--t-title)}
.tema-l2{width:42%;background:var(--t-sub)}
.tema-btn{margin-top:4px;background:var(--t-card);color:var(--t-btxt);
  border-radius:var(--t-r);font-size:.62rem;font-weight:700;padding:5px 0;
  text-align:center;letter-spacing:.02em}
.tema-btn.grad{background:linear-gradient(120deg,var(--t-card),var(--t-a2))}

.tema-nombre{display:block;padding:9px 11px 0;font-size:.85rem;font-weight:600;
  color:var(--ed-ink,#fff);line-height:1.2}
.tema-pie{display:block;padding:2px 11px 10px;font-size:.68rem;color:var(--muted)}
.tema-sw.on .tema-pie{color:var(--mint);font-weight:600}


/* ==================================================================
   EDITOR · Catálogo de bloques

   Era un <select> con "Título y párrafo", "Botones / enlaces" y
   "Formulario de leads": nombres que describen cómo está hecho el
   bloque, no qué le va a salir en el perfil. El cliente elegía a ciegas
   justo en lo que menos conoce.
   ================================================================== */
.blk-catalogo{background:var(--navy-2);border:1px solid var(--line);
  border-radius:14px;padding:16px;margin-bottom:14px}
.blk-cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}

.blk-cat-card{width:100%;height:100%;display:flex;flex-direction:column;
  align-items:flex-start;gap:5px;padding:14px;cursor:pointer;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  font-family:inherit;transition:border-color .15s ease,transform .12s ease}
.blk-cat-card:hover{transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.blk-cat-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.blk-cat-ic{font-size:1.5rem;color:var(--accent)}
.blk-cat-n{font-family:var(--font-display);font-weight:700;font-size:.9rem;
  color:var(--ed-ink,#fff);letter-spacing:-.01em}
.blk-cat-d{font-size:.76rem;color:var(--muted);line-height:1.45}


/* ==================================================================
   EDITOR EN EL TELÉFONO

   Muchos restauranteros editan desde el celular. Dos cosas que no se
   ven mirando la pantalla en un escritorio y arruinan esa edición:

   1. iOS Safari HACE ZOOM sobre cualquier campo con letra menor de
      16px en cuanto lo tocas, y no vuelve solo. El editor tenía 71
      campos por debajo (12–13,3px): un zoom por cada toque, y a
      recolocar la página a mano cada vez. Aquí suben a 16 y el zoom
      deja de dispararse. Solo en el editor y solo en pantalla chica:
      el Perfil público y el escritorio no se tocan.
   2. Objetivos táctiles de 20–30px. La recomendación es 44; 40 es el
      mínimo decente con el pulgar. La ✕ de una foto medía 20px.
   ================================================================== */
@media (max-width:768px){
  body.ed .cms input:not([type=hidden]):not([type=color]):not([type=checkbox]):not([type=radio]),
  body.ed .cms select,
  body.ed .cms textarea,
  body.ed .ed-cajon input:not([type=hidden]):not([type=color]):not([type=checkbox]):not([type=radio]),
  body.ed .ed-cajon select,
  body.ed .ed-cajon textarea{font-size:16px}

  /* Botones del editor: alto cómodo para el pulgar sin cambiar el diseño. */
  body.ed .cms .btn-sm,
  body.ed .ed-cajon .btn-sm{min-height:40px;padding:.5em 1em}

  /* La ✕ de una foto ya subida y la de la galería: eran de 20px. */
  body.ed .img-remove-x{width:36px;height:36px;top:-8px;right:-8px;font-size:1.1rem}
  body.ed .g-del button{min-width:40px;min-height:40px}
  body.ed .ed-preview-fab{min-height:44px}

  /* El asa de arrastre: el ⠿ es un carácter chico. Se le da área alrededor
     en vez de agrandar el símbolo, que quedaría tosco. */
  body.ed .handle{display:inline-flex;align-items:center;justify-content:center;
    min-width:40px;min-height:40px;margin:-10px -6px;opacity:.65}

  /* Tres botones y un asa no caben en una línea de 375px: que envuelvan en vez
     de empujar el panel a lo ancho. */
  body.ed .block-item>.bhead{flex-wrap:wrap;row-gap:8px}
  /* En móvil la cabecera sí envuelve: reservar el ancho de escritorio
     empujaría los botones fuera de la pantalla. */
  body.ed .bhead .inline-actions{margin-left:auto;min-width:0;flex-wrap:wrap}
  body.ed .bhead-id{flex-wrap:wrap}
  body.ed .g-thumb input[name=pill]{font-size:16px}

  /* La flecha de abrir/cerrar vive dentro del botón "Contenido": el área
     táctil la pone el botón, no hace falta agrandar el símbolo. */
}