/* =============================================================
   EN CORTO — Sistema visual
   Directorio de negocios · Ciudad Nezahualcóyotl

   El color sale del monumento Cabeza de Coyote de la Avenida
   Chimalhuacán: los dos planos del bermellón, el bronce de la
   estatua al pie y el azul del cielo detrás.

   Dos rojos, y la diferencia importa:
     --brand-vivo  #E4471E  el bermellón exacto del monumento.
                            SOLO superficies grandes y el logo.
                            Como texto da 3.72:1 y no es legible.
     --brand       #D23814  el que trabaja: botones, enlaces,
                            foco. Es el rojo más vivo que aguanta
                            texto blanco encima (4.87:1).
   ============================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;

  /* Que la página no se pueda arrastrar en el teléfono.
     -----------------------------------------------------------------
     Sin esto, en un móvil se puede dejar el dedo apretado y mover toda la
     interfaz: aparece la franja del fondo por arriba o por un lado, y al
     soltar rebota. Marea, y encima hace que la barra inferior baile.

     Los dos ejes NO molestan igual, y por eso van por separado.

     El eje X apagado: lo que mareaba era el arrastre lateral —dejar el dedo
     apretado y correr toda la interfaz de lado hasta que asoma la franja del
     fondo—. Ahí no hay nada que ganar.

     El eje Y en auto: es lo que permite tirar hacia abajo desde arriba para
     recargar, que en un teléfono es EL gesto con el que la gente arregla las
     cosas. Apagarlo dejaba a alguien con la pantalla a medio cargar sin más
     salida que buscar el botón del navegador. Vuelve con él el rebote
     vertical de siempre, que nadie ha llamado mareo porque es como se porta
     cualquier aplicación.

     Ni uno ni otro son `touch-action: none`, que desactivaría el
     desplazamiento entero.

     overflow-x: CLIP es el cinturón: si un elemento se pasa de ancho —una
     tabla, una tarjeta con texto largo— la página deja de moverse de lado en
     vez de dejar arrastrar hasta el vacío. Lo que de verdad necesite scroll
     horizontal ya lo tiene en su propio contenedor.

     clip y no hidden, y la diferencia no es cosmética: `hidden` convierte al
     elemento en un contenedor de desplazamiento, y en cuanto html o body lo
     son, TODO position:sticky de la página deja de pegarse —el encabezado, la
     barra de filtros, las columnas laterales—. Se midió: con hidden el
     encabezado se iba 900 px arriba al bajar 900; con clip se queda en 0.
     `clip` recorta igual pero no crea contenedor de scroll.

     En navegadores viejos que no conocen clip (Safari anterior al 16) la
     declaración se ignora y la página se queda como estaba antes de todo
     esto: sin recorte, pero sin nada roto. Y la sonda de desborde dice que
     hoy no hay ninguna pantalla que se pase de ancho, así que no recorta
     nada real.                                                            */
  overscroll-behavior-x: none;
  overscroll-behavior-y: auto;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }

/* Cualquier cosa a la que se pueda saltar deja hueco para la cabecera. Va sobre
   [id] y no sobre una lista de clases porque un ancla puede apuntar a lo que
   sea, y la lista siempre se queda corta: ahí es donde estaban los veintidós
   saltos que dejaban el elemento tapado. */
[id] { scroll-margin-top: var(--anclaje); }
/* Los agrupadores no llevan el marco del navegador: aquí los grupos se
   separan con título y espacio, como el resto del formulario. El marco gris
   con la leyenda encajada en el borde era lo único que desentonaba. */
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* ---------- Tokens ---------- */
:root {
  --brand:      #D23814;
  --brand-vivo: #E4471E;
  --brand-600:  #B8351A;
  --brand-700:  #8E2A12;
  --brand-050:  #FDEDE7;
  --brand-100:  #FAD9CE;
  --flama:      #FF8A3D;   /* solo degradados: 2.22:1, nunca texto */
  --sky:        #7DBBE8;
  --sky-ink:    #10425F;
  --amber:      #9E5E00;
  --green:      #157F3E;
  --red:        #A11221;   /* carmesí: el error tiene que verse distinto de la marca */
  --wa:         #0F7A40;
  --off:        #6B5F5A;   /* «cerrado»: apagado, no alarma */
  --off-bg:     #F3EDEB;
  /* «Cerrado ahora» va en frío, y es a propósito: todo lo demás en el sitio
     es cálido —la marca es un bermellón—, así que el único elemento azulado
     de una cuadrícula se localiza de un vistazo sin gritar como haría un rojo,
     que además se confundiría con la propia marca. */
  --cerrado:    #2F4A5C;
  --cerrado-bg: #E4EEF4;

  --ink:        #241310;
  --ink-2:      #5C4741;
  --muted:      #857069;
  --faint:      #97837B;
  --line:       #F2DED4;
  --line-2:     #FBEFE9;
  /* El fondo es blanco y la crema del monumento pasa a marco y sombra: las
     tarjetas se separan por su contorno, no por un cambio de fondo. */
  --bg:         #FFFFFF;
  --card:       #FFFFFF;
  --card-2:     #FFF7F3;
  --crema:      #FFF7F3;

  /* La tinta como SUPERFICIE, no como texto.
     -----------------------------------------------------------------
     --ink cambia de color con el tema: en claro es casi negro y en oscuro
     es crema, porque es el color del texto. Usarla de FONDO funcionaba en
     claro y se rompía en oscuro: el pie de página y la caja de datos
     bancarios se volvían claros con su texto claro encima, ilegibles. Esta
     otra se queda oscura siempre, que es lo que necesita una superficie que
     lleva texto blanco escrito a mano. */
  --tinta: #241310;

  --r-sm: 9px; --r: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px;
  /* Cada sombra arranca con un anillo de crema: sobre blanco, una sombra difusa
     sola no marca el borde de la tarjeta, y el anillo sí. */
  --sh-1: 0 0 0 1px #FDF2EC, 0 1px 2px rgba(36,19,16,.05), 0 2px 8px rgba(142,42,18,.045);
  --sh-2: 0 0 0 1px #FBEADF, 0 4px 12px rgba(142,42,18,.07), 0 12px 32px rgba(142,42,18,.055);
  --sh-3: 0 0 0 1px #FBEADF, 0 10px 24px rgba(142,42,18,.11), 0 24px 60px rgba(142,42,18,.14);
  --sh-brand: 0 8px 22px rgba(210,56,20,.28);

  /* Cuánto hay que dejar libre por arriba cuando el scroll salta a un sitio.
     -----------------------------------------------------------------
     Un ancla lleva el elemento al borde de arriba del viewport, y encima hay
     una cabecera pegada: el elemento acaba DEBAJO de ella, tapado, y desde
     fuera parece que el enlace no hizo nada o que se pasó de largo. Se midió:
     veintidós anclas del sitio dejaban su elemento en top 0 con 67 px de
     cabecera encima.

     Este valor es el de partida; el guion lo reemplaza por la altura REAL de
     lo que esté pegado arriba en cada pantalla, que no es la misma en la ficha
     de un negocio —donde hay dos barras— que en el manual. Antes había tres
     constantes distintas repartidas por la hoja (76, 84 y 132 px), cada una
     adivinada para una pantalla, y ninguna siguió al encabezado cuando cambió
     de alto. */
  --anclaje: 84px;

  --font: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --legal-h: 62px;
  /* Alto de la barra inferior de teléfono. En escritorio vale 0 para que
     ningún cálculo de posición tenga que preguntar si existe. */
  --nav-movil-h: 0px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #FBEDE7; --ink-2: #D3B9B0; --muted: #A08B83; --faint: #7E6A64;
    --line: #3E2620; --line-2: #33201B;
    --bg: #180D0A; --card: #241613; --card-2: #2E1C17;
    /* el bermellón sobre tinta da 4.44:1: en oscuro sube a #F0603A */
    --brand: #F0603A; --brand-vivo: #F0603A;
    --brand-600: #FF7A52; --brand-700: #FF8F6B;
    --brand-050: #35150C; --brand-100: #452014;
    --amber: #E5A94E; --green: #57C98A; --red: #F08A8A;
    --wa: #3CCB78; --off: #A08B83; --off-bg: #2E1C17;
    --cerrado: #9DC6DC; --cerrado-bg: #1D2C35;
    --sky-ink: #C4E2F7;
    --sh-1: 0 1px 2px rgba(0,0,0,.3);
    --sh-2: 0 4px 14px rgba(0,0,0,.4);
    --sh-3: 0 12px 34px rgba(0,0,0,.5);
    --sh-brand: 0 8px 22px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] {
  --ink: #FBEDE7; --ink-2: #D3B9B0; --muted: #A08B83; --faint: #7E6A64;
  --line: #3E2620; --line-2: #33201B;
  --bg: #180D0A; --card: #241613; --card-2: #2E1C17;
  /* el bermellón sobre tinta da 4.44:1: en oscuro sube a #F0603A */
  --brand: #F0603A; --brand-vivo: #F0603A;
  --brand-600: #FF7A52; --brand-700: #FF8F6B;
  --brand-050: #35150C; --brand-100: #452014;
  --amber: #E5A94E; --green: #57C98A; --red: #F08A8A;
  --wa: #3CCB78; --off: #A08B83; --off-bg: #2E1C17;
    --cerrado: #9DC6DC; --cerrado-bg: #1D2C35;
  --sky-ink: #C4E2F7;
  --sh-1: 0 1px 2px rgba(0,0,0,.3);
  --sh-2: 0 4px 14px rgba(0,0,0,.4);
  --sh-3: 0 12px 34px rgba(0,0,0,.5);
  --sh-brand: 0 8px 22px rgba(0,0,0,.45);
}

/* ---------- Base ---------- */
body {
  /* Lo mismo en el cuerpo: los navegadores móviles miran uno u otro según
     cuál esté desplazándose. Poniéndolo en los dos no queda hueco.        */
  overscroll-behavior-x: none;
  overscroll-behavior-y: auto;
  overflow-x: clip;
  position: relative;
  width: 100%;

  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-size: 16px;
  min-height: 100vh;
  padding-bottom: calc(var(--legal-h) + var(--nav-movil-h));
  -webkit-font-smoothing: antialiased;
}
/* Pantallas sin el aviso legal, que son todas menos la ficha de un negocio */
body.no-legal-bar { padding-bottom: calc(24px + var(--nav-movil-h)); }
body.no-legal-bar .sticky-actions { bottom: calc(12px + var(--nav-movil-h)); }
h1, h2, h3, h4 { line-height: 1.18; letter-spacing: -.025em; font-weight: 800; }
h1 { font-size: clamp(28px, 4.4vw, 44px); }
h2 { font-size: clamp(21px, 2.6vw, 28px); }
h3 { font-size: 18px; }
p  { color: var(--ink-2); }
small { font-size: 13px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.container { --pad-cont: 20px; width: 100%; max-width: 1200px; margin: 0 auto;
  padding: 0 var(--pad-cont); }
.container-sm { max-width: 760px; }
.container-xs { max-width: 480px; }

.stack > * + * { margin-top: 16px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.row-between { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.hide { display: none !important; }

/* =============================================================
   Encabezado
   ============================================================= */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .inner {
  display: flex; align-items: center; gap: 18px;
  height: 66px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.brand-mark { width: 36px; height: 36px; flex-shrink: 0; }
.brand-text { font-weight: 900; font-size: 21px; letter-spacing: -.04em; color: var(--ink); }
.brand-text span { color: var(--brand); }
/* El dominio, más chico y sin apretar: es una dirección, no parte del nombre */
.brand-tag { display: block; font-size: 10px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); margin-top: -3px; }

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
  text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: 14.5px;
  padding: 9px 14px; border-radius: var(--r-full); transition: .15s; white-space: nowrap;
}
.nav a:hover { background: var(--brand-050); color: var(--brand); }
.nav a.active { background: var(--brand-050); color: var(--brand); }

.nav-toggle {
  display: none; margin-left: auto; background: var(--card-2); border: 1px solid var(--line);
  width: 42px; height: 42px; border-radius: var(--r-sm); cursor: pointer; align-items: center;
  justify-content: center;
}
.nav-toggle svg { width: 20px; height: 20px; }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed; inset: 66px 0 auto 0; flex-direction: column; align-items: stretch;
    background: var(--card); border-bottom: 1px solid var(--line); padding: 12px;
    box-shadow: var(--sh-2); margin-left: 0; gap: 2px;
    max-height: calc(100vh - 66px - var(--legal-h)); overflow-y: auto;
  }
  .nav:not(.open) { display: none; }
  .nav a { padding: 13px 16px; border-radius: var(--r-sm); }
}

/* =============================================================
   Aviso legal permanente
   ============================================================= */
.legal-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: linear-gradient(96deg, #241310, #3A1C14 55%, #4A2116);
  color: #F3D9CF; border-top: 2px solid var(--sky);
  min-height: var(--legal-h);
  display: flex; align-items: center;
  box-shadow: 0 -6px 24px rgba(36,19,16,.22);
}
.legal-bar .container { display: flex; gap: 12px; align-items: center; padding-block: 9px; }
.legal-bar .ico {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
  background: var(--sky); color: var(--sky-ink);
  display: grid; place-items: center; font-size: 17px; font-weight: 900;
}
.legal-bar p { color: #F3D9CF; font-size: 12.3px; line-height: 1.45; margin: 0; }
.legal-bar b { color: #fff; }
.legal-bar a { color: var(--sky); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) {
  :root { --legal-h: 92px; }
  .legal-bar p { font-size: 11.6px; }
  .legal-bar .ico { width: 26px; height: 26px; font-size: 15px; }
}

/* =============================================================
   Botones
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--r-full); border: 1px solid transparent;
  font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer;
  transition: transform .12s, box-shadow .18s, background .18s, color .18s;
  line-height: 1.2; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--sh-brand); }
.btn-primary:hover { background: var(--brand-600); }
.btn-cielo { background: var(--sky); color: var(--sky-ink); box-shadow: 0 8px 20px rgba(125,187,232,.42); }
.btn-cielo:hover { background: #6BAFE1; }
.btn-dark { background: var(--tinta); color: #fff; }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line); box-shadow: var(--sh-1); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-soft { background: var(--brand-050); color: var(--brand); }
.btn-soft:hover { background: var(--brand-100); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger-soft { background: var(--brand-050); color: var(--red); }
:root[data-theme="dark"] .btn-danger-soft { background: #3B1526; }
.btn-wa { background: var(--wa); color: #fff; }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 13.5px; }
.btn-lg { padding: 15px 30px; font-size: 16.5px; }
.btn-icon { padding: 9px; width: 38px; height: 38px; border-radius: var(--r-sm); }
.btn-icon svg { width: 17px; height: 17px; }

/* =============================================================
   Tarjetas y superficies
   ============================================================= */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.card-pad { padding: 24px; }
.card-head {
  padding: 18px 24px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.card-head h3 { font-size: 16.5px; }
.card-body { padding: 24px; }
.card-foot { padding: 16px 24px; border-top: 1px solid var(--line); background: var(--card-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg); }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }

/* =============================================================
   Formularios
   ============================================================= */
.field { margin-bottom: 18px; }
.field > label, .label {
  display: block; font-weight: 700; font-size: 14px; margin-bottom: 7px; color: var(--ink);
}
.label .req { color: var(--red); }
/* Una casilla dentro de un agrupador sigue siendo una casilla. `.field > label`
   es más específica que `.check` y la volvía bloque: el cuadrito se subía a su
   propio renglón y el texto quedaba debajo, sin relación visible con él. */
.field > label.check { display: flex; }
.hint { font-size: 12.8px; color: var(--muted); margin-top: 6px; line-height: 1.45; }

.input, .select, .textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--r-sm);
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
  transition: border-color .15s, box-shadow .15s; font-size: 15.5px;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-050);
}
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.select {
  appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6A85' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 17px;
}
.input.error, .select.error, .textarea.error { border-color: var(--red); }
.input-error { color: var(--red); font-size: 12.8px; margin-top: 6px; font-weight: 600; }

.input-group { display: flex; align-items: stretch; }
.input-group .prefix {
  display: flex; align-items: center; padding: 0 13px; background: var(--card-2);
  border: 1.5px solid var(--line); border-right: 0; border-radius: var(--r-sm) 0 0 var(--r-sm);
  color: var(--muted); font-weight: 600; font-size: 14.5px; white-space: nowrap;
}
.input-group .input { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 14px; }
@media (max-width: 760px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* Casillas y opciones */
.check { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; padding: 4px 0; }
.check input[type="checkbox"], .check input[type="radio"] {
  width: 20px; height: 20px; margin-top: 2px; accent-color: var(--brand); flex-shrink: 0; cursor: pointer;
}
.check span { font-size: 14.8px; line-height: 1.45; }
.check strong, .check b { display: block; }
/* El tamaño se repite aquí porque `.check span` es más específica que `.hint`
   y la explicación salía del mismo cuerpo que el título: dos renglones que
   pesaban igual y ninguno mandaba. */
.check .hint { display: block; margin-top: 2px; font-size: 12.8px; }

.option-card {
  display: flex; gap: 13px; align-items: flex-start; padding: 15px;
  border: 2px solid var(--line); border-radius: var(--r); cursor: pointer;
  transition: .15s; background: var(--card);
}
.option-card:hover { border-color: var(--brand-100); background: var(--brand-050); }
.option-card input { margin-top: 2px; accent-color: var(--brand); width: 20px; height: 20px; flex-shrink: 0; }
.option-card:has(input:checked) { border-color: var(--brand); background: var(--brand-050); }
.option-card strong { display: block; font-size: 15px; }
.option-card small { color: var(--muted); font-size: 13px; line-height: 1.4; display: block; }

.switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--line-2);
}
.switch-row:last-child { border-bottom: 0; }

/* Contraseña */
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 46px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; padding: 8px; color: var(--muted);
  display: grid; place-items: center; border-radius: 8px;
}
.pw-toggle:hover { background: var(--card-2); color: var(--brand); }
.pw-toggle svg { width: 19px; height: 19px; }
.pw-meter { height: 6px; border-radius: 99px; background: var(--line); margin-top: 9px; overflow: hidden; }
.pw-meter i { display: block; height: 100%; width: 0; border-radius: 99px; transition: .3s; background: var(--red); }
.pw-label { font-size: 12.5px; margin-top: 5px; font-weight: 600; color: var(--muted); }

/* =============================================================
   Alertas
   ============================================================= */
.alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 17px; border-radius: var(--r); font-size: 14.5px;
  border: 1px solid; line-height: 1.5;
}
.alert .ico { flex-shrink: 0; font-size: 18px; line-height: 1.3; }
.alert p { margin: 0; color: inherit; }
.alert strong { display: block; margin-bottom: 2px; }
.alert-success { background: #ECFDF3; border-color: #A7F3C8; color: #05603A; }
.alert-error   { background: #FBEAEC; border-color: #F3C5CB; color: #8E1020; }
.alert-warning { background: #FFF8EB; border-color: #FCE3B4; color: #92400E; }
.alert-info    { background: #E7F2FA; border-color: #C4E2F7; color: #10425F; }
:root[data-theme="dark"] .alert-success { background: #0C2B1D; border-color: #14532D; color: #86EFAC; }
:root[data-theme="dark"] .alert-error   { background: #3B1518; border-color: #7F1D24; color: #FDA4A4; }
:root[data-theme="dark"] .alert-warning { background: #35260A; border-color: #78500E; color: #FCD34D; }
:root[data-theme="dark"] .alert-info    { background: #10293B; border-color: #1E4C6B; color: #A9D6F5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .alert-success { background: #0C2B1D; border-color: #14532D; color: #86EFAC; }
  :root:not([data-theme="light"]) .alert-error   { background: #3B1518; border-color: #7F1D24; color: #FDA4A4; }
  :root:not([data-theme="light"]) .alert-warning { background: #35260A; border-color: #78500E; color: #FCD34D; }
  :root:not([data-theme="light"]) .alert-info    { background: #10293B; border-color: #1E4C6B; color: #A9D6F5; }
}

/* Aviso destacado de imágenes IA */
.ai-warn {
  border: 2px dashed var(--amber); background: #FCF2E2; border-radius: var(--r);
  padding: 15px 17px; display: flex; gap: 13px; align-items: flex-start;
}
:root[data-theme="dark"] .ai-warn { background: #2E230B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ai-warn { background: #2E230B; } }
.ai-warn .ico { font-size: 22px; flex-shrink: 0; }
.ai-warn strong { color: #B45309; display: block; margin-bottom: 3px; font-size: 14.5px; }
.ai-warn p { font-size: 13.6px; color: var(--ink-2); margin: 0; line-height: 1.5; }

/* Toasts flotantes */
.toasts { position: fixed; top: 80px; right: 20px; z-index: 300; display: flex;
  flex-direction: column; gap: 10px; max-width: min(400px, calc(100vw - 40px)); }
.toast { box-shadow: var(--sh-3); animation: toastIn .25s ease-out; }
@keyframes toastIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.toast button { background: none; border: 0; cursor: pointer; color: inherit; opacity: .6;
  font-size: 20px; line-height: 1; padding: 0 2px; }
.toast button:hover { opacity: 1; }

/* =============================================================
   Distintivos
   ============================================================= */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px;
  border-radius: var(--r-full); font-size: 12.3px; font-weight: 700; line-height: 1.5;
  background: var(--brand-050); color: var(--brand); white-space: nowrap;
}
.badge-green  { background: #E9F7EF; color: #12643A; }
.badge-red    { background: #FBEAEC; color: #8E1020; }
.badge-amber  { background: #FCF2E2; color: #7D4A00; }
.badge-gray   { background: var(--off-bg); color: var(--off); }
/* La calificacion. Ambar y no naranja de marca: la marca ya la usa la
   distancia y la promocion en la misma linea, y tres distintivos del mismo
   color no jerarquizan nada. */
.badge-estrella { background: #FEF3C7; color: #92400E; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge-estrella { background: #422006; color: #FCD34D; }
}
[data-theme="dark"] .badge-estrella { background: #422006; color: #FCD34D; }
.badge-sky    { background: #E7F2FA; color: #10425F; }
/* «Cerrado» va en gris, no en rojo: con la marca en rojo, el rojo deja de
   leerse como alarma y pasa a ser el color de la casa. */
.badge-cerrado{ background: var(--off-bg); color: var(--off); }
.badge-brand  { background: var(--brand); color: #fff; }
:root[data-theme="dark"] .badge-green { background: #0C2B1D; color: #6EE7A7; }
:root[data-theme="dark"] .badge-red   { background: #3B1526; color: #FDA4AF; }
:root[data-theme="dark"] .badge-amber { background: #35260A; color: #FCD34D; }
:root[data-theme="dark"] .badge-lime  { background: #2A3406; color: #D9F99D; }
:root[data-theme="dark"] .badge-pink  { background: #3A1229; color: #F9A8D4; }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-green { background: var(--green); box-shadow: 0 0 0 3px rgba(21,127,62,.16); }
.dot-red   { background: var(--red); box-shadow: 0 0 0 3px rgba(161,18,33,.16); }
.dot-gray  { background: var(--off); }

/* =============================================================
   Portada pública
   ============================================================= */
.hero {
  position: relative; overflow: hidden; padding: 56px 0 44px;
  background:
    radial-gradient(760px 380px at 12% 0%,  rgba(228,71,30,.14), transparent 62%),
    radial-gradient(680px 380px at 92% 8%,  rgba(255,138,61,.13), transparent 60%),
    radial-gradient(520px 340px at 55% 100%, rgba(125,187,232,.16), transparent 62%);
}
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(210,56,20,.10) 1.1px, transparent 1.1px);
  background-size: 26px 26px; mask-image: linear-gradient(180deg, #000, transparent 78%);
}
.hero .inner { position: relative; z-index: 1; text-align: center; }
.hero h1 { max-width: 17ch; margin: 0 auto 14px; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero .lead { font-size: 17.5px; color: var(--ink-2); max-width: 56ch; margin: 0 auto 28px; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-1);
  padding: 7px 15px 7px 8px; border-radius: var(--r-full); font-size: 13.4px; font-weight: 600;
}
.hero-pill .tag { background: var(--sky); color: var(--sky-ink); padding: 2px 9px;
  border-radius: var(--r-full); font-size: 11.5px; font-weight: 800; }

.searchbar {
  display: flex; gap: 8px; background: var(--card); padding: 8px;
  border-radius: var(--r-full); box-shadow: var(--sh-3); border: 1px solid var(--line);
  max-width: 720px; margin: 0 auto;
}
.searchbar input {
  flex: 1; border: 0; background: none; padding: 11px 18px; font-size: 16px; min-width: 0;
}
.searchbar input:focus { outline: none; }
.searchbar select {
  border: 0; background: var(--card-2); border-radius: var(--r-full); padding: 11px 34px 11px 16px;
  font-size: 14.5px; font-weight: 600; max-width: 190px; cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6A85' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.searchbar select:focus { outline: none; }
@media (max-width: 640px) {
  .searchbar { flex-direction: column; border-radius: var(--r-lg); }
  .searchbar select { max-width: none; }
  .searchbar .btn { width: 100%; }
}

.quick-stats { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.quick-stats div { text-align: center; }
.quick-stats b { display: block; font-size: 27px; font-weight: 900; letter-spacing: -.03em; color: var(--brand); }
.quick-stats span { font-size: 12.6px; color: var(--muted); font-weight: 600; }

/* Sección */
.section { padding: 44px 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.section-head p { font-size: 14.6px; margin-top: 3px; }
.eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 5px; }

/* Categorías */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.cat-tile {
  display: flex; flex-direction: column; gap: 7px; padding: 17px 16px;
  border-radius: var(--r); text-decoration: none; border: 1px solid var(--line);
  background: var(--card); transition: .17s; position: relative; overflow: hidden;
}
.cat-tile::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--c, var(--brand)); opacity: .85;
}
.cat-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--c, var(--brand)); }
.cat-tile .emoji { font-size: 25px; line-height: 1; }
.cat-tile b { font-size: 14.6px; font-weight: 700; line-height: 1.3; }
.cat-tile small { color: var(--muted); font-size: 12.4px; }


/* =============================================================
   Selector de ubicación en mapa (alta y edición de negocio)

   Mosaicos de OpenStreetMap posicionados en absoluto sobre un lienzo
   recortado. El alfiler está clavado al centro: lo que se mueve es el
   mapa, no el alfiler, que es como se espera en un teléfono.
   ============================================================= */
.mapa-picker { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--card-2); }

.mapa-lienzo {
  position: relative; height: 260px; overflow: hidden; cursor: grab;
  background: #E8E6E1; touch-action: none; user-select: none;
}
.mapa-lienzo.arrastrando { cursor: grabbing; }
.mapa-lienzo:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }

.mapa-tiles { position: absolute; inset: 0; }
.mapa-tiles img {
  position: absolute; width: 256px; height: 256px; max-width: none;
  pointer-events: none; -webkit-user-drag: none;
}

/* El alfiler no se mueve: marca siempre el centro exacto del recuadro */
.mapa-alfiler {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  transform: translate(-50%, -100%); font-size: 34px; line-height: 1;
  pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0,0,0,.4));
}
.mapa-alfiler::after {
  content: ''; position: absolute; left: 50%; bottom: -4px;
  width: 8px; height: 8px; border-radius: 50%; transform: translateX(-50%);
  background: rgba(36,19,16,.5); box-shadow: 0 0 0 3px rgba(255,255,255,.5);
}
.mapa-picker.sin-marcar .mapa-alfiler { opacity: .45; }

.mapa-zoom { position: absolute; right: 10px; top: 10px; z-index: 4; display: flex; flex-direction: column; gap: 5px; }
.mapa-zoom button {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font-size: 19px; font-weight: 800;
  cursor: pointer; box-shadow: var(--sh-1); line-height: 1;
}
.mapa-zoom button:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

.mapa-aviso {
  position: absolute; inset: auto 12px 34px 12px; z-index: 4;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 13px; font-size: 12.6px; color: var(--muted); box-shadow: var(--sh-2);
}
.mapa-credito {
  position: absolute; right: 0; bottom: 0; z-index: 4;
  background: rgba(255,255,255,.82); color: #333; font-size: 10.4px;
  padding: 2px 7px; border-top-left-radius: 6px;
}

.mapa-barra {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 13px; border-top: 1px solid var(--line); background: var(--card);
}
.mapa-lectura {
  flex: 1; min-width: 150px; font-size: 12.8px; color: var(--muted);
  font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums;
}
.mapa-picker.sin-marcar .mapa-lectura { font-family: inherit; font-style: italic; }

@media (max-width: 560px) {
  .mapa-lienzo { height: 220px; }
  .mapa-barra .btn { flex: 1; }
  .mapa-lectura { order: 3; width: 100%; flex-basis: 100%; }
}


/* =============================================================
   Barra de filtros desplegables (directorio)

   Cada filtro es un <details>: sin JS abre y cierra igual, y el panel
   lleva TODAS sus opciones para poder configurarlo por completo de una
   sola pasada. El JS sólo agrega cortesías: cerrar los demás al abrir
   uno, cerrar al hacer clic fuera y filtrar la lista de colonias.
   ============================================================= */
.filtros-bar {
  position: relative; display: flex; gap: 9px; flex-wrap: wrap;
  align-items: center; margin-bottom: 14px;
}
.filtros-bar .filtros-limpiar { margin-left: auto; }

/* Interruptor suelto de la barra: no despliega nada, sólo se pone o se quita.
   Es el de «abiertos ahora», que viene puesto de fábrica. */
.fpill {
  display: flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none;
  padding: 10px 15px 10px 11px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--card); color: var(--ink); font-weight: 700; font-size: 14px;
  box-shadow: var(--sh-1); transition: border-color .12s, background .12s;
}
.fpill:hover { border-color: var(--brand); color: var(--ink); }
.fpill .caja {
  width: 19px; height: 19px; flex-shrink: 0; border-radius: 6px; border: 2px solid var(--line);
  display: grid; place-items: center; font-size: 11px; font-weight: 900; color: transparent;
}
.fpill.on { border-color: var(--green); background: var(--green); color: #fff; box-shadow: none; }
.fpill.on .caja { background: #fff; border-color: #fff; color: var(--green); }

.fdrop { position: relative; }
.fdrop > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  list-style: none; user-select: none; white-space: nowrap;
  padding: 10px 14px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--card); color: var(--ink); font-weight: 700; font-size: 14px;
  box-shadow: var(--sh-1); transition: border-color .12s, background .12s;
}
.fdrop > summary::-webkit-details-marker { display: none; }
.fdrop > summary:hover { border-color: var(--brand); }
.fdrop > summary .ico { font-size: 15px; line-height: 1; }
.fdrop > summary .txt { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.fdrop > summary .flecha { color: var(--muted); font-size: 15px; transition: transform .16s; }
.fdrop[open] > summary { border-color: var(--brand); background: var(--card-2); }
.fdrop[open] > summary .flecha { transform: rotate(180deg); }
.fdrop.activo > summary {
  border-color: var(--brand); background: var(--brand); color: #fff; box-shadow: var(--sh-brand);
}
.fdrop.activo > summary .flecha { color: rgba(255,255,255,.8); }

.fdrop-panel {
  position: absolute; z-index: 60; top: calc(100% + 7px); left: 0;
  min-width: 288px; max-width: min(94vw, 380px);
  max-height: min(64vh, 440px); overflow-y: auto;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-2); padding: 14px;
}
.fdrop-panel.ancho { max-width: min(94vw, 560px); }
.fdrop-panel.der { left: auto; right: 0; }

.fdrop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.fdrop-head b { font-size: 12.6px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.fdrop-head .limpiar { font-size: 12.5px; color: var(--brand); text-decoration: none; font-weight: 700; }
.fdrop-head .limpiar:hover { text-decoration: underline; }

.fdrop-buscar { margin-bottom: 9px; }

.fopts { display: flex; flex-direction: column; gap: 2px; }
.fopts.cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 2px; }
.fopts.scroll { max-height: 268px; overflow-y: auto; }
.fopts a {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px;
  border-radius: var(--r-sm); text-decoration: none; color: var(--ink);
  font-size: 14px; line-height: 1.35;
}
.fopts a:hover { background: var(--card-2); color: var(--brand); }
.fopts a.on { background: var(--brand); color: #fff; font-weight: 700; }
.fopts a.on .hint, .fopts a.on .num { color: rgba(255,255,255,.85); }
.fopts a .em { width: 19px; text-align: center; flex-shrink: 0; font-size: 15px; }
.fopts a .num {
  margin-left: auto; font-size: 11.5px; color: var(--muted); background: var(--card-2);
  border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums;
}

/* Opción de tipo casilla: se pueden combinar varias */
.fopts a.check { align-items: flex-start; gap: 11px; padding: 10px 11px; }
.fopts a.check .caja {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; border-radius: 6px;
  border: 2px solid var(--line); display: grid; place-items: center;
  font-size: 12px; font-weight: 900; color: transparent;
}
.fopts a.check.on .caja { background: #fff; border-color: #fff; color: var(--brand); }
.fopts a.check b { display: block; font-size: 14px; font-weight: 700; }
.fopts a.check .hint { display: block; margin-top: 2px; font-size: 12px; }

@media (max-width: 640px) {
  .fdrop { position: static; }
  .fdrop-panel, .fdrop-panel.der, .fdrop-panel.ancho {
    left: 0; right: 0; min-width: 0; max-width: none;
  }
  .fdrop > summary { padding: 9px 12px; font-size: 13.5px; }
  .fdrop > summary .txt { max-width: 128px; }
  .filtros-bar .filtros-limpiar { margin-left: 0; }
  .fopts.cols { grid-template-columns: 1fr; }
}
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-full);
  font-size: 13.8px; font-weight: 600; text-decoration: none; transition: .15s; cursor: pointer;
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }
/* La × de quitar: redonda, del tamaño de un dedo y con su propio fondo, para
   que se lea como un botón y no como una mancha. Sobre la ficha encendida va
   en blanco translúcido; al pasar por encima se enciende en rojo, que es lo
   que avisa de que ese toque borra algo. */
.chip .x {
  all: unset;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin: -2px -7px -2px 1px;
  border-radius: 50%; cursor: pointer; box-sizing: border-box;
  font-size: 15px; font-weight: 700; line-height: 1;
  background: rgba(0, 0, 0, .12); color: inherit;
  transition: background .15s, color .15s;
}
.chip .x:hover, .chip .x:focus-visible {
  background: #fff; color: var(--red);
}
.chip .x:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.chip.active .x { background: rgba(255, 255, 255, .26); color: #fff; }
.chip.active .x:hover, .chip.active .x:focus-visible { background: #fff; color: var(--brand-700); }
/* En la lista de etiquetas propias la ficha respira un poco más: lleva un
   botón dentro y el texto se pegaba al aspa. */
.etiquetas-mias .chip { padding-right: 11px; gap: 8px; }

/* =============================================================
   Tarjeta de negocio
   ============================================================= */
.biz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 20px; }

.biz-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; text-decoration: none; display: flex; flex-direction: column;
  transition: .18s; box-shadow: var(--sh-1); position: relative;
}
.biz-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--brand-100); }
.biz-cover {
  /* Sin foto, un color plano: el degradado sugería una imagen que no está */
  height: 152px; background: var(--brand-050);
  position: relative; flex-shrink: 0;
}
/* Sin overflow:hidden a propósito. El logotipo cuelga 22px por debajo de la
   portada (bottom: -22px) y aquí se le cortaba justo esa parte. Las esquinas
   superiores redondeadas ya las recorta .biz-card, que sí lleva overflow. */
.biz-cover img { width: 100%; height: 100%; object-fit: cover; }
.biz-cover .placeholder {
  width: 100%; height: 100%; display: grid; place-items: center; font-size: 44px; opacity: .5;
}
.biz-logo {
  position: absolute; left: 16px; bottom: -22px; width: 56px; height: 56px;
  border-radius: 15px; border: 3px solid var(--card); background: var(--card);
  object-fit: cover; box-shadow: var(--sh-1); display: grid; place-items: center;
  font-size: 23px; font-weight: 900; color: var(--brand); overflow: hidden;
}
.biz-body { padding: 30px 18px 18px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.biz-body h3 { font-size: 17px; letter-spacing: -.02em; }
.biz-cat { font-size: 12.6px; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 5px; }
.biz-desc { font-size: 13.8px; color: var(--ink-2); line-height: 1.5; }
.biz-meta { display: flex; gap: 7px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; }
.biz-foot {
  padding: 12px 18px; border-top: 1px solid var(--line-2); display: flex;
  align-items: center; justify-content: space-between; gap: 10px; font-size: 12.6px; color: var(--muted);
}
.ribbon {
  position: absolute; top: 13px; right: 13px; z-index: 2;
  background: var(--sky); color: var(--sky-ink); font-size: 11px; font-weight: 800;
  padding: 4px 11px; border-radius: var(--r-full); box-shadow: var(--sh-1);
}

/* Estado vacío */
.empty { text-align: center; padding: 56px 24px; }
.empty .emoji { font-size: 50px; margin-bottom: 12px; }
.empty h3 { margin-bottom: 7px; }
.empty p { max-width: 44ch; margin: 0 auto 18px; }

/* Paginación */
.pager { display: flex; gap: 6px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.pager a, .pager span {
  min-width: 40px; height: 40px; display: grid; place-items: center; padding: 0 12px;
  border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--card);
  text-decoration: none; font-weight: 600; font-size: 14.5px;
}
.pager a:hover { border-color: var(--brand); color: var(--brand); }
.pager .current { background: var(--brand); color: #fff; border-color: var(--brand); }
.pager .gap { border: 0; background: none; }

/* =============================================================
   Ficha del negocio / tarjeta pública
   ============================================================= */
.detail-cover {
  height: clamp(180px, 30vw, 300px); border-radius: var(--r-xl); overflow: hidden;
  background: var(--brand); position: relative;
}
.detail-cover img { width: 100%; height: 100%; object-fit: cover; }
/* Sólo el logotipo monta sobre la portada. El bloque de texto arranca en el
   borde inferior de la imagen, nunca encima: con un nombre de dos renglones
   el título se subía a la fotografía y quedaba ilegible. */
.detail-head { display: flex; gap: 20px; align-items: flex-start; margin-top: 0;
  position: relative; z-index: 2; padding: 0 6px; flex-wrap: wrap; }
.detail-logo {
  width: 104px; height: 104px; border-radius: 24px; border: 4px solid var(--card);
  background: var(--card); box-shadow: var(--sh-2); object-fit: cover; flex-shrink: 0;
  display: grid; place-items: center; font-size: 40px; font-weight: 900; color: var(--brand); overflow: hidden;
  margin-top: -46px;
}
.detail-title { flex: 1; min-width: 220px; padding-top: 8px; }
.detail-title h1 { font-size: clamp(24px, 3.6vw, 34px); line-height: 1.15; }

@media (max-width: 640px) {
  /* Con el logotipo y el texto apilados, el nombre necesita su propio aire */
  .detail-title { padding-top: 4px; }
}

.info-row { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line-2); align-items: flex-start; }
.info-row:last-child { border-bottom: 0; }
.info-row .ico { width: 34px; height: 34px; border-radius: 10px; background: var(--brand-050);
  display: grid; place-items: center; flex-shrink: 0; font-size: 16px; }
.info-row .lbl { font-size: 12.3px; color: var(--muted); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; }
.info-row .val { font-size: 15px; word-break: break-word; }
.info-row a.val { color: var(--brand); text-decoration: none; font-weight: 600; }
.info-row a.val:hover { text-decoration: underline; }

.hours-table { width: 100%; border-collapse: collapse; font-size: 14.6px; }
.hours-table td { padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.hours-table tr:last-child td { border-bottom: 0; }
.hours-table td:first-child { font-weight: 600; width: 44%; }
.hours-table td:last-child { text-align: right; color: var(--ink-2); }
.hours-table tr.today td { color: var(--brand); font-weight: 800; }
.hours-table tr.today td:first-child::before { content: '▸ '; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.gallery a { display: block; border-radius: var(--r); overflow: hidden; aspect-ratio: 4/3;
  background: var(--card-2); border: 1px solid var(--line); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: .3s; }
.gallery a:hover img { transform: scale(1.06); }

.action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.action-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  padding: 17px 12px; border-radius: var(--r); text-decoration: none; font-weight: 700;
  font-size: 13.6px; transition: .16s; border: 1px solid var(--line); background: var(--card);
  text-align: center; line-height: 1.3; cursor: pointer;
}
.action-btn:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.action-btn .ico { font-size: 23px; line-height: 1; }
.action-btn.wa { background: var(--wa); color: #fff; border-color: var(--wa); }
.action-btn.call { background: var(--brand); color: #fff; border-color: var(--brand); }
.action-btn.pay { background: var(--sky); color: var(--sky-ink); border-color: var(--sky); }
.action-btn.map { background: var(--card); color: var(--ink); }

/* Datos bancarios */
.bank-box {
  background: var(--tinta); color: #FBEDE7;
  border-radius: var(--r-lg); padding: 20px; position: relative; overflow: hidden;
}
.bank-box::after {
  content: ''; position: absolute; right: -40px; top: -40px; width: 170px; height: 170px;
  border-radius: 50%; background: rgba(125,187,232,.13);
}
.bank-box .lbl { font-size: 11.4px; text-transform: uppercase; letter-spacing: .13em;
  opacity: .72; font-weight: 700; }
.bank-box .num { font-size: 21px; font-weight: 800; letter-spacing: .06em; font-variant-numeric: tabular-nums;
  margin: 3px 0 2px; word-break: break-all; position: relative; z-index: 1; }
.bank-box .who { font-size: 14px; opacity: .88; }
.bank-box .copy {
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); color: #fff;
  border-radius: var(--r-sm); padding: 7px 13px; font-size: 12.8px; font-weight: 700; cursor: pointer;
  position: relative; z-index: 1;
}
.bank-box .copy:hover { background: rgba(255,255,255,.24); }

/* Tarjeta QR */
.qr-box {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px; text-align: center;
}
.qr-frame {
  display: inline-block; padding: 14px; background: #fff; border-radius: var(--r);
  box-shadow: var(--sh-2); border: 1px solid var(--line);
}
.qr-frame svg, .qr-frame img { width: 100%; max-width: 240px; height: auto; }
.qr-url {
  font-size: 12.4px; color: var(--muted); word-break: break-all; background: var(--card-2);
  padding: 9px 12px; border-radius: var(--r-sm); margin-top: 12px; font-family: ui-monospace, monospace;
}

/* Página pública de la tarjeta (t.php) */
.tcard { max-width: 560px; margin: 0 auto; padding: 16px 16px 34px; }

/* La portada es una tarjeta con sus cuatro esquinas redondeadas y su propio
   aire arriba: antes iba pegada al encabezado y parecía que se desbordaba. */
.tcard-top {
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--brand);
  position: relative; box-shadow: var(--sh-2);
}
.tcard-top .cover { height: 176px; position: relative; }
.tcard-top .cover img { width: 100%; height: 100%; object-fit: cover; }
.tcard-top .cover::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(36,19,16,.45));
}

/* El logotipo sí monta sobre la portada —se ve bien y ancla la identidad—
   pero el nombre baja a su propio renglón. Antes iban lado a lado y el texto
   quedaba encima de la fotografía: ilegible con nombres largos o portadas
   claras, y peor entre más largo el nombre. */
.tcard-id {
  display: flex; flex-direction: column; align-items: flex-start;
  margin-top: -38px; position: relative; z-index: 2; padding: 0 4px;
}
.tcard-id .logo {
  width: 88px; height: 88px; border-radius: 22px; border: 4px solid var(--card);
  background: var(--card); box-shadow: var(--sh-2); object-fit: cover; flex-shrink: 0;
  display: grid; place-items: center; font-size: 33px; font-weight: 900; color: var(--brand); overflow: hidden;
}
.tcard-id .grow { padding-top: 13px; width: 100%; }
.tcard-id h1 { font-size: 24px; line-height: 1.2; letter-spacing: -.02em; }

/* Tarjeta QR: quien escanea ya está en el local, así que la vista es corta.
   Primero el estado de hoy, luego pagar/menú/contacto, luego qué venden.
   Todo lo demás (dirección, mapa, redes, envíos) vive en el desplegable. */
.tcard-giro { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--muted); margin-top: 6px; }

.tcard-hoy {
  display: flex; align-items: center; gap: 10px; margin-top: 16px;
  padding: 12px 15px; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--card); font-size: 14.5px; box-shadow: var(--sh-1);
}
.tcard-hoy.abierto { border-color: rgba(21,127,62,.35); background: rgba(21,127,62,.07); }
.tcard-hoy.cerrado { border-color: rgba(107,95,90,.32); background: rgba(107,95,90,.07); }
.tcard-hoy b { font-size: 15px; }
.tcard-hoy .det { color: var(--muted); font-size: 13px; margin-left: 7px; }
.tcard-hoy .rango { font-size: 13px; color: var(--muted); white-space: nowrap;
  font-variant-numeric: tabular-nums; }

.tcard-desc { margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }

.tcard-acciones {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-top: 16px;
}
.tcard-acciones .accion {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 12px; border-radius: var(--r); border: 1.5px solid var(--line);
  background: var(--card); color: var(--ink); font-weight: 700; font-size: 14.5px;
  text-decoration: none; box-shadow: var(--sh-1); transition: transform .12s, box-shadow .12s;
}
.tcard-acciones .accion:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.tcard-acciones .accion .ico { font-size: 20px; line-height: 1; }
.tcard-acciones .accion.pagar { background: var(--sky); border-color: var(--sky); color: var(--sky-ink); }
.tcard-acciones .accion.wa    { background: var(--wa); border-color: var(--wa); color: #fff; }
/* A qué banco va el dinero, debajo del rótulo del botón. Va más chico y más
   claro porque no es la acción: es el dato que decide si vale la pena. */
.tcard-acciones .accion-det { display: block; font-size: 12.4px; font-weight: 600; opacity: .8; }

/* ── El índice de la tarjeta ──────────────────────────────────────────────
   Una tira que se desliza con el pulgar. En vez de esconder los horarios y el
   costo de envío detrás de un desplegable, se dice de entrada todo lo que hay
   y se salta ahí de un toque. */
.tcard-saltos {
  display: flex; gap: 7px; margin-top: 14px; padding-bottom: 4px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tcard-saltos::-webkit-scrollbar { display: none; }
.tcard-saltos a {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--card);
  color: var(--ink-2); font-size: 13.2px; font-weight: 700; text-decoration: none;
  white-space: nowrap; transition: .14s;
}
.tcard-saltos a:hover { border-color: var(--brand); color: var(--brand); }
.tcard-saltos a svg { opacity: .75; }

/* Que el ancla no deje el título pegado al borde de arriba —o debajo de la
   barra fija— al saltar. */
.tcard [id] { scroll-margin-top: var(--anclaje); }

.tcard-guardar { display: flex; gap: 10px; align-items: stretch; }
.tcard-guardar .grow, .tcard-guardar form { flex: 1; }
.tcard-guardar .btn { height: 100%; }

.tcard-mas { padding: 0; overflow: hidden; }
.tcard-mas > summary {
  display: flex; align-items: center; gap: 12px; padding: 15px 17px;
  cursor: pointer; list-style: none; user-select: none;
}
.tcard-mas > summary::-webkit-details-marker { display: none; }
.tcard-mas > summary:hover { background: var(--card-2); }
.tcard-mas > summary .ico { font-size: 19px; }
.tcard-mas > summary b { display: block; font-size: 15px; }
.tcard-mas > summary .hint { display: block; margin-top: 2px; }
.tcard-mas > summary .flecha { color: var(--muted); font-size: 19px; transition: transform .18s; }
.tcard-mas[open] > summary { border-bottom: 1px solid var(--line); }
.tcard-mas[open] > summary .flecha { transform: rotate(180deg); }
.tcard-mas-cuerpo { padding: 17px; }
.tcard-mas-cuerpo h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); margin-bottom: 8px; }
.tcard-mas-cuerpo .card { box-shadow: none; }

.tcard-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-top: 18px; font-size: 13px;
}
.tcard-pie a { color: var(--muted); text-decoration: none; }
.tcard-pie a:hover { color: var(--red); text-decoration: underline; }

@media (max-width: 420px) {
  .tcard-acciones { grid-template-columns: 1fr 1fr; }
  .tcard-acciones .accion { flex-direction: column; gap: 5px; padding: 13px 8px; font-size: 13px; }
  .tcard-hoy .rango { display: none; }
  .tcard-guardar { flex-direction: column; }
}

/* =============================================================
   Asistente por pasos
   ============================================================= */
.steps { display: flex; align-items: center; gap: 0; margin-bottom: 30px; }
.step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; }
.step::before, .step::after {
  content: ''; position: absolute; top: 17px; height: 2.5px; background: var(--line); width: 50%;
}
.step::before { left: 0; }
.step::after { right: 0; }
.step:first-child::before, .step:last-child::after { display: none; }
.step.done::before, .step.done::after, .step.active::before { background: var(--brand); }
.step .bubble {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card); border: 2.5px solid var(--line); font-weight: 800; font-size: 14.5px;
  color: var(--faint); position: relative; z-index: 1;
}
.step.active .bubble { border-color: var(--brand); color: var(--brand); background: var(--brand-050);
  box-shadow: 0 0 0 5px var(--brand-050); }
.step.done .bubble { background: var(--brand); border-color: var(--brand); color: #fff; }
.step span { font-size: 12.4px; font-weight: 700; color: var(--muted); text-align: center; }
.step.active span { color: var(--brand); }
@media (max-width: 560px) { .step span { font-size: 10.6px; } }

/* Recuadro para capturar el código */
.code-input {
  width: 100%; text-align: center; font-size: clamp(21px, 5.4vw, 30px); font-weight: 800;
  letter-spacing: .14em; padding: 20px 14px; border-radius: var(--r);
  border: 2.5px dashed var(--brand-100); background: var(--brand-050); color: var(--brand-700);
  text-transform: uppercase; font-family: ui-monospace, 'Cascadia Mono', monospace;
}
.code-input:focus { outline: none; border-color: var(--brand); border-style: solid;
  box-shadow: 0 0 0 5px var(--brand-050); }
.code-input::placeholder { color: var(--brand-100); letter-spacing: .1em; }

/* =============================================================
   Panel de administración
   ============================================================= */
.admin-layout { display: grid; grid-template-columns: 250px 1fr; gap: 26px; align-items: start;
  padding: 26px 0 40px; }

/* Administración: el menú pegado al borde izquierdo y más ancho.
   Dentro del contenedor centrado de 1200 px, con doce renglones de menú
   («Actividad de consulta», «Resumen y gráficas»), las etiquetas quedaban
   apretadas contra el contador y se cortaban. Aquí la pantalla se usa
   completa. */
.container.ancho { max-width: none; padding-left: 16px; padding-right: 24px; }
.container.ancho .admin-layout { grid-template-columns: 272px minmax(0, 1fr); gap: 24px; }
.container.ancho .sidebar { border-radius: 0 var(--r-lg) var(--r-lg) 0; border-left: 0; }
@media (max-width: 1000px) {
  .container.ancho { padding-inline: 20px; }
  .container.ancho .sidebar { border-radius: var(--r-lg); border-left: 1px solid var(--line); }
}
/* Variante con la barra a la derecha (ficha del negocio). Va aquí y no como
   estilo en línea: un style="" le gana a la media query de abajo y en el
   teléfono la página se quedaba en dos columnas, desbordada a lo ancho. */
.admin-layout.ficha { grid-template-columns: 1fr 340px; }
@media (max-width: 1000px) {
  /* `.container.ancho .admin-layout` va listado a la fuerza: sin él, esa
     regla de dos clases le gana a ésta y el panel se queda en dos columnas
     en el teléfono, con el contenido aplastado a 149 px. */
  .admin-layout,
  .admin-layout.ficha,
  .container.ancho .admin-layout { grid-template-columns: minmax(0, 1fr); }
}

.sidebar {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px; position: sticky; top: 82px;
}
.sidebar .group { font-size: 10.6px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
  color: var(--faint); padding: 14px 12px 7px; }
.sidebar a {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--r-sm);
  text-decoration: none; font-weight: 600; font-size: 14.4px; color: var(--ink-2); transition: .14s;
  /* Si la etiqueta no cabe, que baje a dos renglones en vez de cortarse:
     «Actividad de consulta» a medias no dice nada. */
  min-width: 0; line-height: 1.3;
}
.sidebar a > span:not(.count):not(.em) { min-width: 0; }
.sidebar a:hover { background: var(--card-2); color: var(--brand); }
.sidebar a.active { background: var(--brand); color: #fff; box-shadow: var(--sh-brand); }
/* El reset pone los SVG en display:block, así que un icono dentro de un
   título se iba a su propio renglón. En caja flexible da igual; en texto,
   tiene que ser en línea. */
.ico-linea { display: inline-block; vertical-align: -0.14em; }

.sidebar a .em { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
/* Los iconos de línea heredan el color del enlace, así que se ponen blancos
   solos cuando el renglón está activo. Un emoji no podía hacer eso. */
.sidebar a .ico-linea { width: 19px; height: 19px; flex-shrink: 0; opacity: .82; }
.sidebar a:hover .ico-linea, .sidebar a.active .ico-linea { opacity: 1; }
.sidebar a .count { margin-left: auto; background: var(--brand); color: #fff; font-size: 11px;
  font-weight: 800; padding: 1px 7px; border-radius: var(--r-full); }
.sidebar a.active .count { background: rgba(255,255,255,.28); }

/* La tira horizontal del menu en telefono vivio aqui.
   -------------------------------------------------------------
   Convertia la barra lateral en fichas que se deslizaban de borde a borde. Era
   mejor que apilar veinte renglones, que es contra lo que se escribio, pero con
   treinta y dos entradas se recorria a ciegas: sin ver cuantas quedaban ni como
   se agrupaban.

   Ahora en telefono el menu vive dentro de un <dialog> —los tres menus, sin
   excepcion— asi que estas reglas ya no las alcanzaba nadie y encima peleaban
   con las del modal: los enlaces salian centrados y en columna dentro de la
   hoja. Se quitan enteras (61 lineas) en vez de anadir contrasenas para
   deshacerlas una por una. Si hace falta volver, esta en el historial. */

/* Métricas */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px; position: relative; overflow: hidden;
}
.stat::after {
  content: ''; position: absolute; right: -22px; top: -22px; width: 88px; height: 88px;
  border-radius: 50%; background: var(--c, var(--brand)); opacity: .07;
}
.stat .k { font-size: 12.6px; color: var(--muted); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.stat .v { font-size: 32px; font-weight: 900; letter-spacing: -.035em; line-height: 1.1; margin: 5px 0 2px;
  font-variant-numeric: tabular-nums; }
.stat .d { font-size: 12.5px; color: var(--muted); }
.stat .d b { color: var(--green); }

/* Gráficas */
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
.chart-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
.chart-card h3 { font-size: 15.5px; margin-bottom: 3px; }
.chart-card .sub { font-size: 12.8px; color: var(--muted); margin-bottom: 16px; }
.chart-holder { width: 100%; overflow-x: auto; }
.chart-holder svg { display: block; width: 100%; height: auto; }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; font-size: 12.8px; }
.chart-legend i { width: 11px; height: 11px; border-radius: 3.5px; display: inline-block; margin-right: 6px;
  vertical-align: -1px; }
.chart-empty { padding: 40px 16px; text-align: center; color: var(--faint); font-size: 14px; }

/* Tablas */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); }
.table { width: 100%; border-collapse: collapse; font-size: 14.3px; min-width: 620px; }
.table th {
  text-align: left; padding: 13px 15px; background: var(--card-2); font-weight: 700; font-size: 12.4px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted); white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.table td { padding: 13px 15px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--card-2); }
.table .actions { display: flex; gap: 5px; justify-content: flex-end; }
.table .code-cell { font-family: ui-monospace, monospace; font-weight: 700; letter-spacing: .05em;
  font-size: 13.6px; }

.avatar-sm { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; background: var(--brand-050);
  display: grid; place-items: center; font-weight: 800; color: var(--brand); font-size: 14px; flex-shrink: 0; overflow: hidden; }

/* Barra de herramientas */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.toolbar .input, .toolbar .select { width: auto; min-width: 175px; padding: 10px 13px; font-size: 14.4px; }
.toolbar .select { padding-right: 38px; }

/* Progreso */
.progress { height: 9px; background: var(--line); border-radius: 99px; overflow: hidden; }
.progress i { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--brand), var(--flama)); transition: width .4s; }
.progress.cielo i { background: linear-gradient(90deg, var(--sky), #4E9AD1); }

.checklist { display: grid; gap: 8px; }
.checklist div { display: flex; align-items: center; gap: 9px; font-size: 14.2px; }
.checklist .mark { width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; flex-shrink: 0; }
.checklist .yes { background: #E7F8EF; color: #087443; }
.checklist .no  { background: var(--card-2); color: var(--faint); border: 1.5px dashed var(--line); }

/* =============================================================
   Manual y textos legales
   ============================================================= */
.prose { max-width: 78ch; }
.prose h2 { margin: 34px 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--line); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 24px 0 8px; font-size: 17.5px; color: var(--brand); }
.prose p { margin-bottom: 13px; line-height: 1.72; }
.prose ul, .prose ol { margin: 0 0 15px 22px; }
.prose li { margin-bottom: 7px; line-height: 1.65; color: var(--ink-2); }
.prose strong { color: var(--ink); }
.prose code { background: var(--card-2); padding: 2px 7px; border-radius: 6px; font-size: 13.6px;
  font-family: ui-monospace, monospace; }
.prose .note { background: var(--brand-050); border-left: 4px solid var(--brand);
  padding: 15px 18px; border-radius: 0 var(--r) var(--r) 0; margin: 18px 0; }
.prose .note p:last-child { margin-bottom: 0; }

.toc { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px; position: sticky; top: 82px; }
.toc a { display: block; padding: 7px 10px; border-radius: var(--r-sm); text-decoration: none;
  font-size: 14px; color: var(--ink-2); font-weight: 600; }
.toc a:hover { background: var(--card-2); color: var(--brand); }

/* Preguntas frecuentes */
.faq details {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--card); margin-bottom: 9px;
}
.faq summary { padding: 15px 18px; cursor: pointer; font-weight: 700; font-size: 15px;
  list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 21px; color: var(--brand); font-weight: 400; flex-shrink: 0; }
.faq details[open] summary::after { content: '−'; }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq .content { padding: 15px 18px; font-size: 14.6px; color: var(--ink-2); line-height: 1.65; }

/* =============================================================
   Pie de página
   ============================================================= */
.site-footer { background: var(--tinta); color: #D8C6C0; padding: 44px 0 30px; margin-top: 56px; }
:root[data-theme="dark"] .site-footer { background: #0A0718; }
.site-footer h4 { color: #fff; font-size: 14px; margin-bottom: 12px; font-weight: 700; }
.site-footer a { color: #D8C6C0; text-decoration: none; font-size: 14px; display: block;
  padding: 4px 0; transition: .15s; }
.site-footer a:hover { color: var(--sky); }
.footer-grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 30px; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 30px; padding-top: 18px;
  font-size: 12.6px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* =============================================================
   Ventana modal
   ============================================================= */
.modal-bg {
  position: fixed; inset: 0; background: rgba(36,19,16,.62); backdrop-filter: blur(4px);
  z-index: 400; display: grid; place-items: center; padding: 20px;
}
.modal {
  background: var(--card); border-radius: var(--r-xl); max-width: 480px; width: 100%;
  box-shadow: var(--sh-3); overflow: hidden; animation: modalIn .22s ease-out;
  max-height: calc(100vh - 40px); overflow-y: auto;
}
@keyframes modalIn { from { opacity: 0; transform: scale(.95) translateY(12px); } to { opacity: 1; transform: none; } }

/* =============================================================
   Utilidades
   ============================================================= */
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:34px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.gap-1{gap:8px}.gap-2{gap:16px}
.f-sm{font-size:13.5px}.f-xs{font-size:12.4px}
.w-100{width:100%}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 12px; top: 12px; z-index: 999; background: var(--brand); color: #fff;
  padding: 10px 16px; border-radius: var(--r-sm); }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

@media print {
  .site-header, .site-footer, .legal-print-hide, .nav, .btn, .sidebar { display: none !important; }
  .legal-bar { position: static; background: #fff !important; color: #000 !important;
    border-top: 2px solid #000; }
  .legal-bar p { color: #000 !important; }
  body { padding-bottom: 0; background: #fff; }
  .card, .panel { break-inside: avoid; box-shadow: none; }
}

/* =============================================================
   Buscador general, productos y cercanía
   ============================================================= */

/* Aviso para pedir la ubicación */
.geo-card {
  display: flex; gap: 14px; align-items: center; padding: 15px 18px;
  border-radius: var(--r); border: 1px solid var(--brand-100); background: var(--brand-050);
  flex-wrap: wrap;
}
.geo-card .ico { font-size: 26px; flex-shrink: 0; }
.geo-card .grow { min-width: 190px; }
.geo-card strong { display: block; font-size: 15px; }
.geo-card p { font-size: 13.4px; margin: 2px 0 0; }
.geo-active { background: #ECFDF3; border-color: #A7F3C8; }
:root[data-theme="dark"] .geo-active { background: #0C2B1D; border-color: #14532D; }

/* Distancia */
.dist {
  display: inline-flex; align-items: center; gap: 4px; font-weight: 800;
  background: var(--brand); color: #fff; font-size: 11.6px; padding: 3px 9px;
  border-radius: var(--r-full); white-space: nowrap;
}
.dist-soft { background: var(--brand-050); color: var(--brand); }

/* Destacados del top 3 */
.top-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.top-card { position: relative; }
.top-card .rank {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 900; font-size: 14px; color: var(--sky-ink); background: var(--sky);
  box-shadow: 0 3px 10px rgba(0,0,0,.22); border: 2px solid #fff;
}
.top-card .rank.r2 { background: #E2E8F0; color: #334155; }
.top-card .rank.r3 { background: #FDBA74; color: #7C2D12; }

/* Chips de producto */
.prod-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.prod-chip {
  font-size: 11.8px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-full);
  background: var(--card-2); color: var(--ink-2); border: 1px solid var(--line);
}
.prod-chip.match { background: var(--sky); color: var(--sky-ink); border-color: var(--sky); font-weight: 800; }

/* Resultado por producto */
.prod-hit {
  display: flex; gap: 14px; align-items: center; padding: 14px 16px; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--card); transition: .16s;
}
.prod-hit:hover { border-color: var(--brand); transform: translateX(3px); box-shadow: var(--sh-1); }
.prod-hit .thumb {
  width: 48px; height: 48px; border-radius: 13px; flex-shrink: 0; object-fit: cover;
  background: var(--brand-050); display: grid; place-items: center; font-size: 20px; overflow: hidden;
}
.prod-hit .price { font-weight: 900; color: var(--brand); font-size: 16px; white-space: nowrap; }

/* Sugerencias del buscador */
.suggest-wrap { position: relative; flex: 1; min-width: 0; }
.suggest-box {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 80;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh-3); overflow: hidden; max-height: 320px; overflow-y: auto;
}
.suggest-box button {
  display: flex; width: 100%; gap: 10px; align-items: center; padding: 11px 15px;
  background: none; border: 0; text-align: left; cursor: pointer; font-size: 14.5px;
  border-bottom: 1px solid var(--line-2);
}
.suggest-box button:last-child { border-bottom: 0; }
.suggest-box button:hover, .suggest-box button.on { background: var(--brand-050); color: var(--brand); }
.suggest-box .n { margin-left: auto; font-size: 11.8px; color: var(--muted); font-weight: 700; }

/* Explorador por giro del buscador */
.giro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.giro-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 15px 10px;
  border-radius: var(--r); border: 1.5px solid var(--line); background: var(--card);
  text-decoration: none; text-align: center; transition: .16s; cursor: pointer;
}
.giro-btn:hover { border-color: var(--c, var(--brand)); transform: translateY(-2px); box-shadow: var(--sh-1); }
.giro-btn.on { border-color: var(--c, var(--brand)); background: color-mix(in srgb, var(--c, #6C3CE9) 9%, transparent); }
.giro-btn .em { font-size: 25px; line-height: 1; }
.giro-btn b { font-size: 12.8px; line-height: 1.25; font-weight: 700; }

/* Lista de productos del negocio */
.prod-list { display: grid; gap: 8px; }
.prod-row {
  display: flex; gap: 12px; align-items: center; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
}
.prod-row.off { opacity: .55; }
.prod-row .nm { font-weight: 600; }
.prod-row .ds { font-size: 12.8px; color: var(--muted); }

/* El producto que se está editando: la lista es larga y hay que poder
   localizarlo de un vistazo al volver del formulario. */
.prod-row.editando {
  opacity: 1; border-color: var(--brand); background: var(--brand-050);
  box-shadow: inset 3px 0 0 var(--brand);
}
.editando-titulo { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.editando-titulo .ico { font-size: 17px; line-height: 1.3; }
.editando-titulo .grow { min-width: 0; }
.editando-titulo .hint { display: block; margin-top: 2px; font-weight: 500; }

/* Confirmación de contraseña en vivo */
.pw-match { font-size: 12.8px; font-weight: 700; margin-top: 6px; line-height: 1.4; min-height: 1px; }
.pw-match.ok   { color: var(--green); }
.pw-match.warn { color: #B45309; font-weight: 600; }
.pw-match.bad  { color: var(--red); }
.input.ok { border-color: var(--green); }
.input.ok:focus { box-shadow: 0 0 0 4px rgba(21,127,62,.14); }

/* Medidor de peso de los archivos por subir */
.upload-meter { font-size: 13px; font-weight: 600; margin: 10px 0 4px; line-height: 1.5;
  padding: 11px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--card-2); }
.upload-meter.ok   { color: var(--ink-2); }
.upload-meter.warn { color: #92400E; background: #FFF8EB; border-color: #FCE3B4; }
.upload-meter.bad  { color: #9F1239; background: var(--brand-050); border-color: #FBC7D4; }
.upload-bar { height: 7px; border-radius: 99px; background: var(--line); overflow: hidden; margin-bottom: 8px; }
.upload-bar i { display: block; height: 100%; border-radius: 99px; background: var(--brand); transition: width .25s; }
.upload-meter.warn .upload-bar i { background: var(--amber); }
.upload-meter.bad .upload-bar i  { background: var(--red); }
:root[data-theme="dark"] .upload-meter.warn { background: #35260A; border-color: #78500E; color: #FCD34D; }
:root[data-theme="dark"] .upload-meter.bad  { background: #3B1526; border-color: #7F1D3A; color: #FDA4AF; }

/* Lista de archivos seleccionados, con su peso */
.file-list { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
  overflow: hidden; background: var(--card); }
.file-list.bad { border-color: #FBC7D4; }
.file-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 13.2px;
  border-bottom: 1px solid var(--line-2); }
.file-row:last-child { border-bottom: 0; }
.file-row .ico { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; background: #E7F8EF; color: #087443; flex-shrink: 0; }
.file-row.bad .ico { background: var(--brand-050); color: #B4123F; }
.file-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row .sz { color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; font-weight: 600; }
.file-row.bad .sz { color: var(--red); font-weight: 800; }
.file-row.bad .nm { color: var(--red); }
.file-note { padding: 11px 12px; background: var(--brand-050); color: #9F1239; font-size: 13px; line-height: 1.55;
  border-top: 1px solid #FBC7D4; }
:root[data-theme="dark"] .file-note { background: #3B1526; color: #FDA4AF; border-color: #7F1D3A; }
:root[data-theme="dark"] .file-row .ico { background: #0C2B1D; color: #6EE7A7; }
:root[data-theme="dark"] .file-row.bad .ico { background: #3B1526; color: #FDA4AF; }

/* Tabla de zonas de reparto con costo por colonia */
.zona-tabla { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--card); }
.zona-tabla.vacia .zona-head { display: none; }
.zona-head, .zona-fila {
  /* Seis columnas desde que se añadió el tiempo de entrega: colonia, costo,
     mínimo, tiempo, nota y el botón de quitar.                              */
  display: grid; grid-template-columns: 1.5fr .9fr .9fr .9fr 1.2fr 42px; gap: 8px;
  align-items: center; padding: 8px 10px;
}
.zona-head {
  background: var(--card-2); border-bottom: 1px solid var(--line);
  font-size: 11.6px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted);
}
.zona-fila { border-bottom: 1px solid var(--line-2); }
.zona-fila:last-child { border-bottom: 0; }
.zona-fila .input { padding: 9px 11px; font-size: 14.2px; }
.zona-fila .input-group .prefix { padding: 0 10px; font-size: 13.5px; }
.zona-fila .btn-icon { width: 38px; height: 38px; padding: 0; font-size: 15px; }
@media (max-width: 800px) {
  .zona-head { display: none; }
  .zona-fila {
    grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 10px;
    border-bottom: 2px solid var(--line);
  }
  .zona-fila > *:nth-child(1) { grid-column: 1 / -1; }   /* colonia */
  .zona-fila > *:nth-child(5) { grid-column: 1 / -1; }   /* nota */
  .zona-fila > *:nth-child(6) { grid-column: 1 / -1; width: 100%; }  /* quitar */
}

/* Lista de zonas en la ficha pública */
.zona-lista { width: 100%; border-collapse: collapse; font-size: 14.4px; }
.zona-lista th {
  text-align: left; padding: 8px 10px; font-size: 11.6px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--line);
}
.zona-lista th:last-child, .zona-lista td:last-child { text-align: right; }
.zona-lista td { padding: 9px 10px; border-bottom: 1px solid var(--line-2); }
.zona-lista tr:last-child td { border-bottom: 0; }
.zona-lista .costo { font-weight: 800; color: var(--brand); white-space: nowrap; }
.zona-lista .costo.gratis { color: var(--green); }
.zona-lista .costo.convenir { color: var(--muted); font-weight: 600; }
.zona-lista .nota { font-size: 12.4px; color: var(--muted); }

/* Motivos de reporte */
.option-card.motivo { align-items: flex-start; }
.option-card.motivo .regla {
  display: block; margin-top: 5px; padding: 7px 10px; border-radius: 8px;
  background: var(--card-2); color: var(--muted); font-size: 12.4px; line-height: 1.5;
  border-left: 3px solid var(--line);
}
.option-card.motivo.grave .regla { border-left-color: var(--red); }
.option-card.motivo:has(input:checked) .regla { background: var(--card); border-left-color: var(--brand); }

/* Folio del reporte */
.folio-caja {
  display: inline-block; padding: 16px 26px; border-radius: var(--r);
  background: var(--brand-050); border: 2px dashed var(--brand-100);
}
.folio-caja .lbl { font-size: 11.4px; text-transform: uppercase; letter-spacing: .13em;
  color: var(--muted); font-weight: 800; }
.folio-caja .val { font-family: ui-monospace, 'Cascadia Mono', monospace; font-size: 27px;
  font-weight: 800; letter-spacing: .1em; color: var(--brand-700); margin-top: 4px; }

/* Identificador público en fichas y paneles */
.public-id {
  display: inline-flex; align-items: center; gap: 6px; font-family: ui-monospace, monospace;
  font-size: 12.4px; font-weight: 700; letter-spacing: .05em; padding: 3px 10px;
  border-radius: var(--r-full); background: var(--card-2); color: var(--muted);
  border: 1px solid var(--line);
}

/* =============================================================
   Visor de fotografías
   ============================================================= */
body.sin-scroll { overflow: hidden; }

.visor {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(12, 8, 26, .93); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
  padding: 74px 16px 96px;
}
.visor.abierto { display: flex; animation: visorIn .18s ease-out; }
@keyframes visorIn { from { opacity: 0 } to { opacity: 1 } }

.visor-marco {
  margin: 0; max-width: 100%; max-height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.visor-marco img {
  max-width: 100%; max-height: calc(100vh - 190px);
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--r); box-shadow: 0 24px 70px rgba(0,0,0,.6);
  background: #17122c;
}
.visor-marco figcaption {
  color: #E4E0F5; font-size: 14px; text-align: center; max-width: 62ch;
  display: flex; flex-direction: column; gap: 4px; line-height: 1.5;
}
.visor-marco .cuenta { color: #A49FC4; font-size: 12.6px; font-weight: 700;
  font-variant-numeric: tabular-nums; }

/* Botón de cerrar: grande y siempre visible */
.visor-cerrar {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px 11px 14px; border-radius: var(--r-full);
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26);
  color: #fff; font-weight: 700; font-size: 14.5px; cursor: pointer;
  transition: background .15s, transform .12s;
}
.visor-cerrar:hover { background: rgba(255,255,255,.26); transform: scale(1.04); }
.visor-cerrar svg { width: 20px; height: 20px; }

.visor-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.24);
  color: #fff; display: grid; place-items: center; transition: background .15s;
}
.visor-nav:hover { background: rgba(255,255,255,.26); }
.visor-nav svg { width: 24px; height: 24px; }
.visor-nav.prev { left: 16px; }
.visor-nav.sig  { right: 16px; }

@media (max-width: 640px) {
  .visor { padding: 66px 10px 104px; }
  .visor-cerrar { top: 12px; right: 12px; padding: 10px 15px 10px 12px; font-size: 13.5px; }
  .visor-nav { width: 46px; height: 46px; bottom: 26px; top: auto; transform: none; }
  .visor-nav.prev { left: calc(50% - 62px); }
  .visor-nav.sig  { right: calc(50% - 62px); }
  .visor-marco img { max-height: calc(100vh - 210px); }
}

/* Señal de que la miniatura se puede ampliar */
.gallery a { position: relative; cursor: zoom-in; }
.gallery a::after {
  /* Sin emoji: se dibuja con dos trazos, que aguantan cualquier sistema. */
  content: ''; position: absolute; right: 10px; bottom: 10px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; box-shadow: 3px 3px 0 -1px currentColor;
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(36,19,16,.62); color: #fff; font-size: 13px;
  opacity: 0; transition: opacity .16s; pointer-events: none;
}
.gallery a:hover::after, .gallery a:focus-visible::after { opacity: 1; }

/* El código QR ahora incluye nombre y domicilio: el marco se adapta */
.qr-frame svg { width: 100%; max-width: 260px; height: auto; }
.qr-frame { line-height: 0; }

/* El aviso legal se puede ocultar solo en la pantalla actual */
.legal-bar .container { position: relative; padding-right: 52px; }
.legal-cerrar {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; flex-shrink: 0;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24);
  color: #F3D9CF; display: grid; place-items: center; transition: background .15s, color .15s;
}
.legal-cerrar:hover { background: var(--sky); color: var(--sky-ink); border-color: var(--sky); }
.legal-cerrar svg { width: 17px; height: 17px; }
.legal-bar.oculta { transform: translateY(110%); opacity: 0; transition: transform .2s, opacity .2s; }
body.sin-aviso { padding-bottom: 24px; transition: padding-bottom .2s; }
@media (max-width: 640px) {
  .legal-bar .container { padding-right: 46px; }
  .legal-cerrar { width: 30px; height: 30px; right: 6px; }
}

/* =============================================================
   Formulario de negocio por pasos
   ============================================================= */
.pasos-barra {
  display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 12px;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.paso-chip {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; cursor: pointer;
  padding: 9px 15px; border-radius: var(--r-full); font-size: 13.6px; font-weight: 700;
  background: var(--card); border: 1.5px solid var(--line); color: var(--muted);
  transition: .15s; white-space: nowrap;
}
.paso-chip .em { font-size: 15px; }
.paso-chip:hover { border-color: var(--brand-100); color: var(--brand); }
.paso-chip.hecho { border-color: var(--green); color: var(--green); background: #E9F7EF; }
.paso-chip.on {
  background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--sh-brand);
}
:root[data-theme="dark"] .paso-chip.hecho { background: #0C2B1D; }

.pasos-pie { position: sticky; bottom: calc(var(--legal-h) + 10px); z-index: 40; }
body.sin-aviso .pasos-pie { bottom: 12px; }
.pasos-progreso { height: 7px; border-radius: 99px; background: var(--line); overflow: hidden; }
.pasos-progreso i {
  display: block; height: 100%; border-radius: 99px; transition: width .3s;
  background: linear-gradient(90deg, var(--brand), var(--flama));
}
@media (max-width: 700px) {
  .paso-chip .tx { display: none; }
  .paso-chip { padding: 10px 13px; }
  .paso-chip.on .tx { display: inline; }
  .pasos-pie .row-between { gap: 8px; }
  .pasos-pie .btn { flex: 1; justify-content: center; }
}

/* =============================================================
   Favoritos agrupados por categoría
   ============================================================= */
.vista-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-full);
  overflow: hidden; background: var(--card); }
.vista-toggle a { padding: 8px 14px; font-size: 13.4px; font-weight: 700; text-decoration: none;
  color: var(--muted); transition: .15s; }
.vista-toggle a.on { background: var(--brand); color: #fff; }
.vista-toggle a:not(.on):hover { background: var(--card-2); color: var(--brand); }

.fav-lista { display: grid; }
.fav-fila { display: flex; align-items: center; gap: 12px; padding: 12px 20px;
  border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.fav-fila:last-child { border-bottom: 0; }
.fav-fila:hover { background: var(--card-2); }
.fav-id { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: 1; min-width: 220px; }
.fav-logo { width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0; overflow: hidden;
  display: grid; place-items: center; background: var(--brand-050); color: var(--brand);
  font-weight: 900; font-size: 18px; }
.fav-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.fav-id b { display: block; font-size: 15.2px; }
.fav-meta { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 3px; }
.fav-dir { display: block; font-size: 12.4px; color: var(--muted); margin-top: 3px; }
.fav-acciones { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.fav-acciones .btn-icon { font-size: 15px; }
@media (max-width: 560px) {
  .fav-fila { padding: 12px 14px; }
  .fav-acciones { width: 100%; justify-content: flex-end; }
}

/* =============================================================
   Productos con fotografía y su modal
   ============================================================= */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 12px; }
.prod-item {
  display: flex; flex-direction: column; gap: 0; padding: 0; cursor: pointer; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; transition: .16s; font: inherit; color: inherit;
}
.prod-item:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--brand-100); }
.prod-item.off { opacity: .62; }
.prod-foto {
  position: relative; display: block; aspect-ratio: 4/3; background: var(--card-2);
  display: grid; place-items: center; overflow: hidden;
}
.prod-foto img { width: 100%; height: 100%; object-fit: cover; }
.prod-foto .sin-foto { font-size: 34px; opacity: .45; }
.prod-agotado {
  position: absolute; left: 8px; top: 8px; background: var(--red); color: #fff;
  font-size: 10.6px; font-weight: 800; padding: 3px 9px; border-radius: var(--r-full);
}
.prod-datos { display: block; padding: 11px 13px 13px; }
.prod-datos .nm { display: block; font-weight: 700; font-size: 14.4px; line-height: 1.3; }
.prod-datos .ds { display: block; font-size: 12.4px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.prod-datos .pr { display: block; font-weight: 900; color: var(--brand); font-size: 15.5px; margin-top: 6px; }
.prod-datos .pr .muted { font-weight: 600; font-size: 13px; }

.prod-modal .modal { max-width: 460px; }
.prod-modal .prod-modal-foto {
  position: relative; aspect-ratio: 4/3; background: var(--card-2); display: grid; place-items: center;
}
.prod-modal .prod-modal-foto img { width: 100%; height: 100%; object-fit: contain; background: #17122c; }
.prod-modal .prod-modal-foto .sin { font-size: 60px; opacity: .4; }
.prod-modal .prod-modal-cuerpo { padding: 20px 22px 22px; }
.prod-modal .prod-modal-cuerpo .nm { font-size: 20px; margin: 0; }
.prod-modal .prod-modal-cuerpo .pr { font-size: 24px; font-weight: 900; color: var(--brand); margin: 8px 0 4px; }
.prod-modal .prod-modal-cuerpo .ds { font-size: 14.6px; margin: 6px 0 0; }
.prod-modal .prod-modal-cuerpo .neg { margin-top: 8px; }
.prod-modal .prod-modal-cuerpo .wa { margin-top: 14px; }
.prod-cerrar {
  position: absolute; top: 12px; right: 12px; z-index: 3; width: 38px; height: 38px;
  border-radius: 50%; cursor: pointer; background: rgba(36,19,16,.55); border: 0; color: #fff;
  display: grid; place-items: center; transition: background .15s;
}
.prod-cerrar:hover { background: rgba(36,19,16,.8); }
.prod-cerrar svg { width: 19px; height: 19px; }
.prod-modal .modal { position: relative; }

/* Miniatura del producto en el panel del dueño */
.prod-mini { width: 46px; height: 46px; border-radius: 11px; flex-shrink: 0; overflow: hidden;
  background: var(--card-2); display: grid; place-items: center; border: 1px solid var(--line); }
.prod-mini img { width: 100%; height: 100%; object-fit: cover; }
.prod-mini .sin { font-size: 17px; opacity: .4; }

/* =============================================================
   Buscador: explorar por giro (plegable) y corte de resultados
   ============================================================= */
.explorar-giros { padding: 0; }
.explorar-giros > summary {
  display: flex; align-items: center; gap: 13px; cursor: pointer; list-style: none;
  padding: 16px 22px; user-select: none; border-radius: var(--r-lg);
}
.explorar-giros > summary::-webkit-details-marker { display: none; }
.explorar-giros > summary:hover { background: var(--card-2); }
.explorar-giros > summary .ico { font-size: 21px; flex-shrink: 0; }
.explorar-giros > summary b { display: block; font-size: 16px; letter-spacing: -.02em; }
.explorar-giros > summary .hint { display: block; margin-top: 1px; }
.explorar-giros > summary .flecha {
  font-size: 20px; color: var(--muted); transition: transform .2s; flex-shrink: 0; line-height: 1;
}
.explorar-giros[open] > summary .flecha { transform: rotate(180deg); }
.explorar-giros[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.explorar-cuerpo { padding: 18px 22px 22px; }

/* Corte visual entre la zona de búsqueda y la de resultados */
.corte-resultados {
  display: flex; align-items: center; gap: 14px; margin: 34px 0 22px;
}
.corte-resultados::before, .corte-resultados::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.corte-resultados span {
  font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); white-space: nowrap;
}


/* =============================================================
   Menú o catálogo

   Un negocio muestra su oferta de una de dos formas: capturando sus
   productos o subiendo su carta. Esto es la segunda: las hojas del menú
   en la ficha pública, el visor que las abre sin salir del sitio, y la
   pantalla del panel donde se administran.
   ============================================================= */

/* --- Rejilla de hojas en la ficha pública --- */
.menu-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px;
}
.menu-item {
  display: flex; flex-direction: column; gap: 7px; padding: 0;
  background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.menu-item .hoja {
  position: relative; display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 3 / 4; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--card-2); transition: transform .13s, box-shadow .13s, border-color .13s;
}
.menu-item:hover .hoja { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--brand); }
.menu-item .hoja img { width: 100%; height: 100%; object-fit: cover; }
.menu-item.es-pdf .hoja {
  background: var(--brand-050);
  border-color: #F3C0C0; gap: 2px;
}
.menu-item .pdf-ico { font-size: 40px; line-height: 1; }
.menu-item .pdf-txt { font-size: 11px; font-weight: 900; letter-spacing: .14em; color: #B42318; }
.menu-item .pie {
  font-size: 12.8px; font-weight: 600; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- Visor a pantalla completa --- */
.menu-visor {
  position: fixed; inset: 0; z-index: 200; display: none;
  grid-template-rows: auto 1fr auto; background: rgba(12, 8, 28, .93);
}
.menu-visor.abierto { display: grid; }

.mv-barra {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  color: #fff; border-bottom: 1px solid rgba(255,255,255,.14);
}
.mv-titulo { font-weight: 700; font-size: 15.5px; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-cuenta { font-size: 12.8px; color: rgba(255,255,255,.7); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.mv-btn {
  width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.09);
  color: #fff; font-size: 17px; cursor: pointer; text-decoration: none;
}
.mv-btn:hover { background: rgba(255,255,255,.2); color: #fff; }

.mv-cuerpo { position: relative; overflow: auto; display: grid; place-items: center; padding: 14px; }
.mv-img { max-width: 100%; max-height: 100%; border-radius: var(--r-sm); box-shadow: var(--sh-2); }
.mv-pdf {
  width: 100%; height: 100%; min-height: 60vh; border: 0;
  border-radius: var(--r-sm); background: #fff;
}
.mv-respaldo { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center;
  font-size: 12px; color: rgba(255,255,255,.6); }
.mv-respaldo a { color: #fff; }

.mv-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.14);
}
.mv-pie .btn:disabled { opacity: .35; cursor: default; }
.mv-puntos { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; }
.mv-punto {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 0; background: rgba(255,255,255,.32);
}
.mv-punto.on { background: var(--sky); transform: scale(1.35); }

/* --- Elegir entre productos y menú, en el panel --- */
.modo-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 13px; }
.modo-op { cursor: pointer; display: block; }
.modo-op input { position: absolute; opacity: 0; pointer-events: none; }
.modo-op .cuerpo {
  display: block; height: 100%; padding: 16px; border-radius: var(--r);
  border: 2px solid var(--line); background: var(--card); transition: border-color .13s, background .13s;
}
.modo-op:hover .cuerpo { border-color: var(--brand); }
.modo-op.on .cuerpo { border-color: var(--brand); background: var(--brand-050); }
.modo-op.bloqueada { cursor: not-allowed; }
.modo-op.bloqueada .cuerpo { opacity: .55; }
.modo-op .ico { display: block; font-size: 27px; line-height: 1; margin-bottom: 7px; }
.modo-op b { display: block; font-size: 16px; margin-bottom: 5px; }
.modo-op .hint { display: block; }
.modo-op .dato {
  display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 700;
  background: var(--card-2); color: var(--muted); border-radius: 999px; padding: 3px 11px;
}

/* --- Lista de hojas en el panel --- */
.menu-admin { display: flex; flex-direction: column; gap: 10px; }
.menu-fila {
  display: flex; align-items: center; gap: 12px; padding: 11px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
}
.menu-fila .orden {
  width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 50%; background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 800;
}
.menu-mini {
  width: 58px; height: 74px; flex-shrink: 0; border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--line); background: var(--card-2); display: grid; place-items: center;
}
.menu-mini img { width: 100%; height: 100%; object-fit: cover; }
.menu-mini.es-pdf { background: var(--brand-050); border-color: var(--brand-100); }
.menu-mini .pdf { display: grid; place-items: center; font-size: 23px; line-height: 1.1; }
.menu-mini .pdf small { font-size: 9px; font-weight: 900; letter-spacing: .1em; color: #B42318; }
.menu-acciones { display: flex; gap: 5px; flex-wrap: nowrap; }

@media (max-width: 640px) {
  .menu-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .mv-pie { flex-wrap: wrap; }
  .mv-puntos { order: 3; width: 100%; }
  .menu-fila { flex-wrap: wrap; }
  .menu-fila .grow { flex-basis: 100%; order: 5; }
}

/* Fila del registro de actividad que corresponde a un contacto directo
   (llamada, WhatsApp o datos bancarios): es lo que importa al investigar. */
.fila-sensible { background: rgba(158,94,0,.07); }
.fila-sensible td:first-child { box-shadow: inset 3px 0 0 var(--amber); }

/* =============================================================
   Continuar con Google

   Google pide que su botón se vea como el suyo: fondo blanco, su
   logotipo a color y el texto en gris oscuro. Se respeta.
   ============================================================= */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%; padding: 13px 18px; border-radius: var(--r);
  border: 1.5px solid var(--line); background: #fff; color: #3C4043;
  font-size: 15.5px; font-weight: 600; text-decoration: none;
  box-shadow: var(--sh-1); transition: border-color .12s, box-shadow .12s;
}
.btn-google:hover { border-color: #C6C2DC; box-shadow: var(--sh-2); color: #3C4043; }
.btn-google svg { flex-shrink: 0; }

/* Separador «o» entre Google y el formulario de siempre */
.separador-o {
  display: flex; align-items: center; gap: 14px; margin: 20px 0;
  color: var(--faint); font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
}
.separador-o::before, .separador-o::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

/* Avatar de la cuenta de Google en la barra superior */
.avatar-google {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--brand-100);
}

/* =============================================================
   Buscador que se queda pegado

   En Buscar y en Directorio la caja de búsqueda no se va con el scroll:
   se ancla justo debajo del encabezado (66 px) y acompaña a la persona
   mientras revisa los resultados, que es cuando más se le ocurre
   cambiar lo que estaba buscando.

   El fondo se extiende a lo ancho del contenedor con márgenes
   negativos, para que los resultados no se vean pasar por debajo del
   hueco de los costados.
   ============================================================= */
.buscador-fijo {
  position: sticky;
  top: 66px;
  z-index: 55;                 /* por debajo del encabezado, que va en 60 */
  margin-inline: -20px;        /* el padding lateral de .container */
  padding: 14px 20px 12px;
  background: var(--bg);
  transition: box-shadow .18s ease, padding .18s ease;
}

/* Sólo cuando de verdad quedó pegado se marca el borde: si no, se ve
   una línea suelta en medio de la página. La clase la pone el JS. */
.buscador-fijo.pegado {
  box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(36,19,16, .07);
  padding-top: 10px;
  padding-bottom: 10px;
}
.buscador-fijo.pegado .searchbar { box-shadow: var(--sh-1); }
.buscador-fijo.pegado .buscador-extra { display: none; }

.buscador-fijo > form { margin-bottom: 0; }

/* Centinela invisible: el JS mira si sigue a la vista para saber si la
   barra ya se pegó. No ocupa espacio ni se lee. */
.buscador-centinela { height: 1px; margin-bottom: -1px; }

@media (max-width: 900px) {
  /* El menú móvil se abre por debajo del encabezado y taparía la barra */
  .buscador-fijo { z-index: 40; }
}

@media (max-width: 640px) {
  .buscador-fijo { margin-inline: -16px; padding: 10px 16px 8px; }
  .buscador-fijo.pegado { padding-top: 8px; padding-bottom: 8px; }
  /* En pantalla chica la caja se apila; pegada se vuelve una sola línea
     para no comerse media pantalla. */
  .buscador-fijo.pegado .searchbar { flex-direction: row; border-radius: var(--r-full); }
  .buscador-fijo.pegado .searchbar .btn { width: auto; flex-shrink: 0; }
  .buscador-fijo.pegado .searchbar select { display: none; }
}

/* =============================================================
   Ficha del negocio, por secciones

   Antes era un listón de tarjetas donde había que bajar a ciegas para
   dar con los horarios o los datos de transferencia. Ahora cada bloque
   es una sección con nombre y hay una barra pegada arriba que dice qué
   trae la ficha y lleva directo a lo que se busca.
   ============================================================= */

/* Migas de pan */
.migas { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--muted); margin-bottom: 12px; }
.migas a { text-decoration: none; }
.migas a:hover { color: var(--brand); text-decoration: underline; }

/* Encabezado */
.detail-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.detail-colonia { font-size: 14px; color: var(--muted); margin-top: 7px; }
.detail-acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.detail-contacto { margin-top: 22px; }

/* --- Barra de secciones --- */
.ficha-nav {
  position: sticky; top: 66px; z-index: 50;
  margin: 22px -20px 0; padding: 0 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.ficha-nav-pistas {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ficha-nav-pistas::-webkit-scrollbar { display: none; }
.ficha-nav a {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 14px 15px; text-decoration: none; color: var(--muted);
  font-size: 14.5px; font-weight: 700;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
  transition: color .12s, border-color .12s;
}
.ficha-nav a:hover { color: var(--brand); }
.ficha-nav a.on { color: var(--brand); border-bottom-color: var(--brand); }
.ficha-nav a .em { font-size: 16px; line-height: 1; }
.ficha-nav a b {
  font-size: 11.5px; font-weight: 800; background: var(--card-2); color: var(--muted);
  border-radius: 999px; padding: 1px 8px;
}
.ficha-nav a.on b { background: var(--brand); color: #fff; }

/* La ficha lleva DOS barras pegadas —el encabezado y su propia navegación—,
   así que su hueco es mayor. El guion lo mide; esto es sólo el respaldo por si
   no corre. */
.ficha-seccion { scroll-margin-top: calc(var(--anclaje) + 48px); }

/* Los encabezados de las piezas de la ficha llevan icono de línea igual que
   las secciones, así que se alinean igual. */
.ficha-seccion h3 { display: flex; align-items: center; gap: 8px; }
.ficha-seccion h3 .ico-linea { color: var(--brand); flex-shrink: 0; }
.ficha-h .ico-linea { color: var(--brand); flex-shrink: 0; }

.ficha-h {
  font-size: 19px; font-weight: 800; letter-spacing: -.015em;
  display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
}
.ficha-dir { font-size: 16px; line-height: 1.55; }

/* La barra lateral acompaña mientras se recorren las secciones */
.ficha-aside { position: sticky; top: 132px; }

@media (max-width: 1000px) {
  .ficha-aside { position: static; }
  .ficha-seccion { scroll-margin-top: calc(var(--anclaje) + 40px); }
}

@media (max-width: 640px) {
  .ficha-nav { margin-inline: -16px; padding-inline: 16px; }
  .ficha-nav a { padding: 12px 12px; font-size: 13.5px; }
  .detail-acciones { width: 100%; }
  .detail-acciones .btn, .detail-acciones form { flex: 1; }
  .detail-acciones .btn { width: 100%; }
}


/* =============================================================
   Logotipos

   Un logotipo se muestra COMPLETO. Con object-fit: cover la caja se
   llena recortando lo que sobra, que está bien para una fotografía de
   fachada y mal para un logotipo: se comía las orillas y se veía
   cortado. Con contain se ve entero, centrado, con un respiro para que
   no toque el borde redondeado.
   ============================================================= */
.logo-img {
  width: 100%; height: 100%; object-fit: contain; padding: 6%;
}

/* Cuenta de dígitos de la CLABE: se ve mientras se escribe, no al enviar. */
.contador-clabe { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.contador-clabe.faltan   { color: var(--amber); }
.contador-clabe.completo { color: var(--green); }
.contador-clabe.completo::after {
  content: ''; display: inline-block; width: 9px; height: 5px;
  margin-left: 5px; border: 2px solid currentColor;
  border-top: 0; border-right: 0; transform: rotate(-45deg); }

/* Portada sin cuenta: los números pasan a ser el elemento principal, porque
   son el argumento para registrarse y el buscador no se puede mostrar. */
.quick-stats.grandes { margin-top: 38px; gap: 40px; }
.quick-stats.grandes b { font-size: clamp(38px, 7vw, 58px); line-height: 1; }
.quick-stats.grandes span { font-size: 14.5px; margin-top: 6px; display: block; }

.hero-acceso {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 32px;
}
/* Los dueños de negocio llegan por otra puerta: se separa del bloque de la
   cuenta gratuita para que no se lea como una tercera opción de lo mismo. */
.hero-negocio {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap; margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--line);
}
.hero-negocio span { font-size: 14.6px; opacity: .82; }

/* ── «Tengo un código» ───────────────────────────────────────────────────
   Quien llega con el papel en la mano no viene a buscar nada: viene a
   canjearlo. Por eso tiene su propio bloque y no un enlace más.

   Va con borde punteado porque eso se lee como cupón sin necesidad de
   explicarlo, y el botón va en azul cielo y no en rojo: al lado del botón
   de buscar, dos rojos compiten y no gana ninguno.                        */
.hero-codigo {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  max-width: 580px; margin: 24px auto 0; padding: 14px 16px;
  text-align: left;
  background: var(--card); border: 1.5px dashed var(--line-2);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.hero-codigo .hc-ico {
  width: 44px; height: 44px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--sky); color: var(--sky-ink);
}
.hero-codigo .hc-txt { flex: 1 1 220px; min-width: 0; }
.hero-codigo .hc-txt b { display: block; font-size: 15px; line-height: 1.3; }
.hero-codigo .hc-txt > span {
  display: block; font-size: 12.8px; line-height: 1.45; color: var(--muted); margin-top: 2px;
}
.hero-codigo .btn { flex: none; }

@media (max-width: 560px) {
  .quick-stats.grandes { gap: 22px; }
  .hero-acceso { width: 100%; }
  .hero-acceso .btn { flex: 1; min-width: 180px; }
  .hero-negocio { flex-direction: column; gap: 10px; }
  .hero-negocio .btn { width: 100%; }
  .hero-codigo { text-align: center; justify-content: center; }
  .hero-codigo .hc-txt { flex-basis: 100%; text-align: center; }
  .hero-codigo .btn { width: 100%; }
}

/* Invitación a publicar un negocio desde una cuenta de consulta */
.invitacion-negocio {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.invitacion-negocio .invitacion-texto { min-width: 220px; flex: 1; }
.invitacion-negocio p { margin: 3px 0 0; }

@media (max-width: 560px) {
  .invitacion-negocio { flex-direction: column; align-items: stretch; }
  .invitacion-negocio .btn { width: 100%; }
}

/* =============================================================
   Barra de navegación inferior (sólo teléfono)

   Se navega con el pulgar, y el pulgar llega abajo. Aparece por
   debajo de 900 px, que es donde antes salía la hamburguesa.
   ============================================================= */
.nav-movil { display: none; }

@media (max-width: 900px) {
  :root { --nav-movil-h: 58px; }

  .nav-movil {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 220;
    display: flex; align-items: stretch;
    background: var(--card);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 18px rgba(36,19,16,.08);
    /* El área segura del iPhone: sin esto la barra queda debajo de la
       franja de gestos y la mitad de los botones no se puede tocar. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .nav-movil a,
  .nav-movil .nav-toggle {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 7px 2px 6px;
    min-height: 58px;                 /* el mínimo tocable de Apple y Google */
    background: none; border: 0; cursor: pointer;
    color: var(--muted); text-decoration: none;
    font-size: 10.5px; font-weight: 700; letter-spacing: .01em;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-movil svg { width: 23px; height: 23px; flex-shrink: 0; }
  .nav-movil span {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .nav-movil a.on { color: var(--brand); }
  .nav-movil a.on svg { stroke-width: 2.3; }
  .nav-movil a:active, .nav-movil .nav-toggle:active { background: var(--brand-050); }
  .nav-movil a:focus-visible, .nav-movil .nav-toggle:focus-visible {
    outline: 2.5px solid var(--brand); outline-offset: -3px; border-radius: 6px;
  }
  /* El botón de Menú, mientras el cajón está abierto */
  .nav-movil .nav-toggle[aria-expanded="true"] { color: var(--brand); background: var(--brand-050); }

  /* El aviso legal se sube para no quedar debajo de la barra */
  .legal-bar { bottom: calc(var(--nav-movil-h) + env(safe-area-inset-bottom, 0px)); }

  /* El cajón de lo secundario baja desde el encabezado y termina
     justo encima de la barra */
  .nav {
    inset: 66px 0 auto 0;
    max-height: calc(100vh - 66px - var(--nav-movil-h) - env(safe-area-inset-bottom, 0px));
  }
}

/* En pantallas muy angostas las etiquetas se aprietan */
@media (max-width: 360px) {
  .nav-movil a, .nav-movil .nav-toggle { font-size: 9.5px; }
  .nav-movil svg { width: 21px; height: 21px; }
}

/* =============================================================
   Aviso de estafas en servicios financieros
   ============================================================= */
.aviso-financiero {
  border: 0; border-radius: var(--r-lg); padding: 0; max-width: 40rem; width: calc(100% - 32px);
  background: var(--card); color: var(--ink); box-shadow: var(--sh-3);
  /* Al fijar el ancho se pierde el centrado que trae el navegador */
  margin: auto;
  max-height: calc(100vh - 48px); overflow: auto;
}
.aviso-financiero::backdrop { background: rgba(36,19,16,.62); backdrop-filter: blur(3px); }
.aviso-financiero form { padding: 26px 26px 22px; }

.aviso-financiero .af-cabeza {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.aviso-financiero .af-ico {
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  background: #FBEAEC; color: var(--red);
  display: grid; place-items: center;
}
.aviso-financiero h2 { font-size: 21px; letter-spacing: -.02em; margin: 0; }
.aviso-financiero p { font-size: 15px; line-height: 1.55; margin: 0 0 12px; }

.aviso-financiero .af-lista {
  margin: 0 0 14px; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 9px;
}
.aviso-financiero .af-lista li {
  font-size: 14.6px; line-height: 1.5; padding-left: 22px; position: relative; margin: 0;
}
.aviso-financiero .af-lista li::before {
  content: ''; position: absolute; left: 4px; top: .55em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--red);
}

.aviso-financiero .af-deslinde {
  background: var(--card-2); border-left: 3px solid var(--red);
  padding: 13px 15px; border-radius: 0 8px 8px 0; font-size: 14px;
}

.aviso-financiero .af-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-top: 18px;
}
.aviso-financiero .af-mas { font-size: 14px; font-weight: 700; color: var(--muted); }
.aviso-financiero .af-pie .btn { min-width: 190px; }

@media (max-width: 520px) {
  .aviso-financiero form { padding: 20px 18px 18px; }
  .aviso-financiero .af-pie { flex-direction: column-reverse; align-items: stretch; }
  .aviso-financiero .af-pie .btn { width: 100%; }
  .aviso-financiero .af-mas { text-align: center; }
}

/* =============================================================
   «Ayúdanos a mejorar» — encuesta de lo que pasó tras el contacto
   ============================================================= */
.encuesta {
  border: 0; border-radius: var(--r-lg); padding: 0; margin: auto;
  max-width: 34rem; width: calc(100% - 28px); max-height: calc(100vh - 40px);
  background: var(--card); color: var(--ink); box-shadow: var(--sh-3);
}
.encuesta::backdrop { background: rgba(36,19,16,.6); backdrop-filter: blur(3px); }
.encuesta form { display: flex; flex-direction: column; max-height: calc(100vh - 40px); }

.encuesta .en-cabeza {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 22px 22px 14px; border-bottom: 1px solid var(--line);
}
.encuesta h2 { font-size: 20px; letter-spacing: -.02em; margin: 0 0 4px; }
.encuesta .en-cabeza p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.45; }
.encuesta .en-cerrar {
  margin-left: auto; flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px;
  border: 0; background: var(--card-2); color: var(--muted);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.encuesta .en-cerrar:hover { background: var(--brand-050); color: var(--brand); }

.encuesta .en-lista { overflow-y: auto; padding: 6px 22px; flex: 1; }
.encuesta .en-item { border-bottom: 1px solid var(--line-2); padding: 4px 0; }
.encuesta .en-item:last-child { border-bottom: 0; }

/* El renglón entero es el área tocable: en el celular acertarle a una casilla
   de 18 px con el pulgar es justo lo que hace que nadie conteste. */
.encuesta .en-check {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 12px 2px; min-height: 56px;
}
.encuesta .en-check input { position: absolute; opacity: 0; pointer-events: none; }
.encuesta .en-caja {
  width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
  border: 2px solid var(--line); background: var(--card); transition: .14s;
  display: grid; place-items: center;
}
.encuesta .en-check input:checked + .en-caja {
  background: var(--green); border-color: var(--green);
}
.encuesta .en-check input:checked + .en-caja::after {
  content: ''; width: 11px; height: 6px; margin-top: -3px;
  border-left: 2.4px solid #fff; border-bottom: 2.4px solid #fff;
  transform: rotate(-45deg);
}
.encuesta .en-check input:focus-visible + .en-caja {
  outline: 2.5px solid var(--brand); outline-offset: 2px;
}
.encuesta .en-nombre { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.encuesta .en-nombre b { font-size: 15px; line-height: 1.25; }
.encuesta .en-nombre small { font-size: 12.2px; color: var(--muted); margin-top: 2px; }
.encuesta .en-si {
  font-size: 12px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; flex-shrink: 0;
}
.encuesta .en-check input:checked ~ .en-si { color: var(--green); }

.encuesta .en-detalle {
  padding: 2px 0 14px 36px; display: flex; flex-direction: column; gap: 10px;
}
.encuesta .en-pregunta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.encuesta .en-etq {
  font-size: 12.4px; font-weight: 700; color: var(--muted); min-width: 96px;
}
.encuesta .en-fichas { display: flex; gap: 6px; flex-wrap: wrap; }
.encuesta .en-fichas label { cursor: pointer; }
.encuesta .en-fichas input { position: absolute; opacity: 0; pointer-events: none; }
.encuesta .en-fichas span {
  display: inline-block; padding: 7px 13px; border-radius: var(--r-full);
  border: 1.5px solid var(--line); background: var(--card);
  font-size: 13px; font-weight: 700; transition: .14s;
}
.encuesta .en-fichas input:checked + span {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.encuesta .en-fichas input:focus-visible + span {
  outline: 2.5px solid var(--brand); outline-offset: 2px;
}

.encuesta .en-pie {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 22px; border-top: 1px solid var(--line); background: var(--card-2);
}
.encuesta .en-nota {
  font-size: 11.8px; color: var(--faint); margin: 0;
  padding: 0 22px 16px; background: var(--card-2); line-height: 1.45;
}

@media (max-width: 520px) {
  .encuesta .en-cabeza, .encuesta .en-lista { padding-inline: 16px; }
  .encuesta .en-pie { padding-inline: 16px; flex-direction: column-reverse; }
  .encuesta .en-pie .btn { width: 100%; }
  .encuesta .en-nota { padding-inline: 16px; }
  .encuesta .en-detalle { padding-left: 0; }
  .encuesta .en-etq { min-width: 100%; }
}

/* =============================================================
   Buscador de categorías (filtra mientras se escribe)
   ============================================================= */
.cat-buscador { position: relative; margin-top: 18px; max-width: 620px; }
.cat-buscador .input { padding-left: 46px; padding-right: 42px; height: 50px; font-size: 16px; }
.cat-buscador .cat-lupa {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none; display: flex;
}
.cat-buscador .cat-limpia {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--card-2); color: var(--muted); font-size: 20px; line-height: 1;
}
.cat-buscador .cat-limpia:hover { background: var(--brand-050); color: var(--brand); }

.cat-vacio {
  border: 1px dashed var(--line); border-radius: var(--r); padding: 22px;
  text-align: center; margin-top: 18px; background: var(--card-2);
}
.cat-vacio p { margin: 0 0 5px; }

/* Lo que coincide se resalta sin mover nada de sitio */
.chip.coincide { border-color: var(--brand); background: var(--brand-050); color: var(--brand); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}




/* ── Apoyo al directorio ─────────────────────────────────────────────────
   Todo aquí está pensado para que no se confunda con pagarle a un negocio:
   su propia pantalla, su propio color y el aviso antes que la cuenta.      */
.apoyo-aviso {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1.5px solid var(--sky); background: var(--card);
  border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 20px;
}
.apoyo-aviso .ico {
  width: 38px; height: 38px; flex: none; border-radius: 11px;
  display: grid; place-items: center; background: var(--sky); color: var(--sky-ink);
}
.apoyo-aviso strong { display: block; font-size: 15.5px; margin-bottom: 3px; }
.apoyo-aviso p { font-size: 13.6px; line-height: 1.5; margin: 0; }

.apoyo-formas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Los montos: botones grandes, porque decidir cuánto es lo que más veces
   hace que nadie dé nada. El de en medio viene marcado. */
.apoyo-montos { display: flex; gap: 10px; flex-wrap: wrap; }
.apoyo-monto { position: relative; flex: 1 1 90px; }
.apoyo-monto input { position: absolute; opacity: 0; width: 0; height: 0; }
.apoyo-monto span {
  display: block; text-align: center; padding: 14px 10px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--r); background: var(--card);
  font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums;
  transition: border-color .16s, background-color .16s, color .16s;
}
.apoyo-otro span { font-size: 13.5px; font-weight: 600; }
.apoyo-monto input:checked + span {
  border-color: var(--brand); background: var(--brand-050); color: var(--brand);
}
.apoyo-monto input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.apoyo-card { display: flex; flex-direction: column; }
.apoyo-card .card-body { flex: 1; display: flex; flex-direction: column; }
.apoyo-ultimos { font-size: 12.5px; color: rgba(255, 255, 255, .75); align-self: center; }
.apoyo-ultimos b { color: #fff; font-variant-numeric: tabular-nums; }
.apoyo-qr { flex: none; }
.apoyo-qr svg { display: block; width: 190px; height: 190px; }
.apoyo-compartir { display: block; }

/* El enlace del pie, marcado sin gritar */
.pie-apoyo { display: inline-flex; align-items: center; gap: 6px; }
.pie-apoyo svg { flex: none; }


/* ── El corazón flotante y su ventana ────────────────────────────────────
   Abajo a la derecha: la izquierda es del comparador de diseño y el centro
   de abajo, de la barra del teléfono. Se levanta por encima del aviso legal
   y de la barra inferior para no taparle nada a nadie.                     */
.apoyo-widget {
  position: fixed; z-index: 210;
  right: 16px; bottom: calc(var(--legal-h, 62px) + 16px + var(--nav-movil-h, 0px));
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 17px 11px 13px; border-radius: 999px;
  background: var(--brand); color: #fff; text-decoration: none;
  font-family: var(--font); font-weight: 700; font-size: 14.5px;
  box-shadow: 0 8px 22px rgba(210, 56, 20, .35);
  transition: transform .16s cubic-bezier(.23,1,.32,1), box-shadow .16s;
}
.apoyo-widget .aw-corazon { display: grid; place-items: center; flex: none; }
.apoyo-widget svg { width: 19px; height: 19px; display: block; }
.apoyo-widget:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .apoyo-widget:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(210, 56, 20, .42); }
}
/* En pantalla chica se queda sólo el corazón: el texto se come el ancho de
   una tarjeta de negocio, que es lo que la persona vino a leer. */
@media (max-width: 560px) {
  .apoyo-widget { padding: 13px; right: 12px; }
  .apoyo-widget .aw-texto { display: none; }
}
@media print { .apoyo-widget { display: none; } }

/* ── El WhatsApp de las dudas ────────────────────────────────────────────
   Mismo lenguaje que el corazón, pero en el verde que todo el mundo asocia
   con WhatsApp: aquí lo reconocible vale más que la paleta. Con el corazón
   presente se apila encima de él; sin corazón, baja a su lugar.            */
.wa-widget {
  position: fixed; z-index: 210;
  right: 16px; bottom: calc(var(--legal-h, 62px) + 16px + var(--nav-movil-h, 0px));
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 17px 11px 13px; border-radius: 999px;
  background: #1EBE5D; color: #fff; text-decoration: none;
  font-family: var(--font); font-weight: 700; font-size: 14.5px;
  box-shadow: 0 8px 22px rgba(30, 190, 93, .38);
  transition: transform .16s cubic-bezier(.23,1,.32,1), box-shadow .16s;
}
.wa-widget.con-apoyo {
  bottom: calc(var(--legal-h, 62px) + 16px + var(--nav-movil-h, 0px) + 58px);
}
.wa-widget .ww-icono { display: grid; place-items: center; flex: none; }
/* 21 y no 19: el logotipo de WhatsApp era una silueta rellena y a 19 px ya
   tenia mancha; un icono de trazo al mismo tamano se ve la mitad. */
.wa-widget svg { width: 21px; height: 21px; display: block; }
.wa-widget:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .wa-widget:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(30, 190, 93, .46); }
}
@media (max-width: 560px) {
  .wa-widget { padding: 13px; right: 12px; }
  .wa-widget .ww-texto { display: none; }
  .wa-widget.con-apoyo {
    bottom: calc(var(--legal-h, 62px) + 16px + var(--nav-movil-h, 0px) + 54px);
  }
}
@media print { .wa-widget { display: none; } }

/* ── El registro guiado ──────────────────────────────────────────────────
   Cuatro puertas en el paso 1, cada una con su intención. Entran en cascada
   —cada tarjeta 90 ms después de la anterior— porque el ojo sigue el
   movimiento y así lee las cuatro en orden sin sentir una lista. Todo se
   apaga con prefers-reduced-motion: la animación es cortesía, no requisito. */
.reg-entrada { animation: regSube .5s cubic-bezier(.22,1,.36,1) both; }

.reg-opciones { display: flex; flex-direction: column; gap: 14px; }
.reg-opcion {
  position: relative; display: flex; align-items: center; gap: 16px;
  padding: 20px 22px; border-radius: var(--r-lg);
  background: var(--card); border: 1.5px solid var(--line);
  text-decoration: none; color: var(--ink);
  animation: regSube .55s cubic-bezier(.22,1,.36,1) both;
  transition: transform .18s cubic-bezier(.23,1,.32,1), box-shadow .18s, border-color .18s;
}
.reg-opcion:nth-child(1) { animation-delay: .08s; }
.reg-opcion:nth-child(2) { animation-delay: .17s; }
.reg-opcion:nth-child(3) { animation-delay: .26s; }
.reg-opcion:nth-child(4) { animation-delay: .35s; }
@keyframes regSube {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@media (hover: hover) and (pointer: fine) {
  .reg-opcion:hover {
    transform: translateY(-3px);
    border-color: var(--brand);
    box-shadow: 0 12px 28px rgba(210, 56, 20, .14);
  }
  .reg-opcion:hover .ro-flecha { transform: translateX(4px); color: var(--brand); }
}
.reg-opcion:active { transform: scale(.985); }

/* Las dos que hay que descubrir: venta desde casa y trabajo */
.reg-opcion.destacada { border-width: 2px; border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.ro-cinta {
  position: absolute; top: -11px; left: 18px;
  background: var(--brand); color: #fff;
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(210, 56, 20, .3);
}
.ro-icono {
  flex: none; width: 58px; height: 58px; border-radius: 18px;
  display: grid; place-items: center;
}
.ro-icono svg { width: 26px; height: 26px; }
.ro-texto { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ro-texto strong { font-size: 16.5px; letter-spacing: -.01em; }
.ro-texto small { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.ro-flecha { flex: none; font-size: 26px; font-weight: 700; color: var(--muted);
             transition: transform .18s, color .18s; }

/* Los pasos del asistente respiran al aparecer, y el activo late una vez */
.steps .step.active .bubble { animation: regLate .5s cubic-bezier(.22,1,.36,1) .2s both; }
@keyframes regLate {
  0% { transform: scale(.7); opacity: .4; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .reg-entrada, .reg-opcion, .steps .step.active .bubble { animation: none; }
  .reg-opcion, .ro-flecha { transition: none; }
}

.apoyo-modal {
  border: 0; border-radius: var(--r-lg); padding: 0; margin: auto;
  max-width: 33rem; width: calc(100% - 28px);
  background: var(--card); color: var(--ink); box-shadow: var(--sh-3);
}
.apoyo-modal::backdrop { background: rgba(36, 19, 16, .62); backdrop-filter: blur(3px); }

.apoyo-modal .am-cabeza {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 20px 20px 14px; border-bottom: 1px solid var(--line-2);
}
.apoyo-modal .am-ico {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: grid; place-items: center; background: var(--brand-050); color: var(--brand);
}
.apoyo-modal .am-ico svg { width: 22px; height: 22px; }
.apoyo-modal h2 { font-size: 19px; letter-spacing: -.02em; margin: 0 0 3px; }
.apoyo-modal .am-cabeza p { font-size: 13.6px; color: var(--muted); margin: 0; line-height: 1.45; }
.apoyo-modal .am-cerrar {
  flex: none; background: none; border: 0; cursor: pointer; color: var(--muted);
  font-size: 26px; line-height: 1; padding: 0 2px; border-radius: 8px;
}
.apoyo-modal .am-cerrar:hover { color: var(--ink); }

.apoyo-modal .am-cuerpo { padding: 18px 20px; }
.apoyo-modal .am-aviso {
  font-size: 12.6px; line-height: 1.5; color: var(--muted);
  margin: 14px 0 0; padding-left: 12px; border-left: 2px solid var(--line);
}
.apoyo-modal .am-pie {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 14px 20px; border-top: 1px solid var(--line); background: var(--card-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
@media (max-width: 480px) {
  .apoyo-modal .am-pie { flex-direction: column-reverse; }
  .apoyo-modal .am-pie .btn { width: 100%; }
}

/* ── Recordatorio de ubicación ───────────────────────────────────────────
   Vive en la portada, en el directorio y dentro de la ficha. El de la ficha
   va en tono «suave»: ahí ya hay mucho que leer y no puede competir con el
   contenido del negocio.                                                   */
.geo-recordatorio { align-items: flex-start; text-align: left; }
.geo-recordatorio .geo-rec-nota { display: block; color: var(--faint); font-size: 12.3px; margin-top: 2px; }
.geo-rec-botones { display: flex; gap: 8px; flex-wrap: wrap; flex: none; }

.geo-recordatorio.suave {
  margin-top: 14px; padding: 12px 14px; background: var(--card-2);
  border: 1px dashed var(--line); box-shadow: none;
}
.geo-recordatorio.suave strong { font-size: 14px; }
.geo-recordatorio.suave p { font-size: 12.8px; }

@media (max-width: 620px) {
  .geo-rec-botones { width: 100%; }
  .geo-rec-botones .btn { flex: 1; }
}

/* ── Estado → municipio → colonia ────────────────────────────────────────
   Tres cajas de texto con su lista debajo. Son de texto y no desplegables
   porque un <select> de 125 municipios no se recorre, se busca —y porque
   quien tiene una colonia que no está en el catálogo tiene que poder
   escribirla igual—.                                                      */
.lugar-campos { grid-column: 1 / -1; }

.lugar-cabeza {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.lugar-titulo {
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.lugar-dice { font-size: 13px; color: var(--muted); line-height: 1.4; }
.lugar-dice.bien { color: var(--green); font-weight: 600; }
.lugar-dice.mal  { color: var(--amber); }

.lugar-rejilla {
  display: grid; gap: 0 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.lugar-caja { position: relative; }

/* El campo es un BOTÓN, no un cuadro de texto: se elige, no se escribe. Lo
   que se escribe va dentro del panel y sólo sirve para encontrar.          */
.lugar-boton {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 12px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: inherit; font-size: 15px; text-align: left; cursor: pointer;
  transition: border-color .16s, background-color .16s;
}
.lugar-boton .lb-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lugar-boton .lb-flecha { color: var(--muted); font-size: 13px; flex: none; }
.lugar-boton.vacio .lb-texto { color: var(--faint); }
.lugar-boton:hover:not(:disabled) { border-color: var(--brand); }
.lugar-boton[aria-expanded="true"] { border-color: var(--brand); background: var(--card-2); }
.lugar-boton:disabled { opacity: .6; cursor: not-allowed; background: var(--card-2); }

.lugar-panel {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  padding: 8px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-2);
}
/* El buscador, arriba y pegado: es lo primero que se toca al abrir. */
.lugar-buscar { margin-bottom: 6px; font-size: 14.5px; padding: 9px 12px; }

.lugar-lista { max-height: 240px; overflow-y: auto; }
.lugar-op {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 9px 11px; border-radius: var(--r-sm);
  font-size: 14.5px; font-family: inherit; color: var(--ink); line-height: 1.3;
}
.lugar-op:hover, .lugar-op:focus-visible { background: var(--brand-050); color: var(--brand); }
.lugar-op.elegida { font-weight: 700; color: var(--brand); }
/* Cuántos negocios hay ahí: distingue el municipio vivo del homónimo vacío */
.lugar-n {
  flex: none; font-size: 11.5px; font-weight: 700; color: var(--muted);
  background: var(--card-2); border-radius: 999px; padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}
.lugar-op:hover .lugar-n, .lugar-op:focus-visible .lugar-n { background: var(--card); }

/* «Usar lo que escribí»: se separa con una línea porque no es una opción
   más de la lista, es dar de alta un lugar nuevo. */
.lugar-nueva {
  border-top: 1px solid var(--line); border-radius: 0 0 var(--r-sm) var(--r-sm);
  margin-top: 4px; padding-top: 11px; color: var(--brand); font-weight: 600;
}
.lugar-etiq { font-size: 11px; color: var(--muted); font-weight: 600; flex: none; }
.lugar-pie { border-top: 1px solid var(--line-2); margin-top: 4px; font-size: 12px; }
.lugar-vacio { padding: 12px; font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; }

@media (max-width: 560px) {
  .lugar-cabeza .btn { width: 100%; }
}

/* ── Kit de marca (panel de administración) ──────────────────────────────
   Las muestras van sobre fondos distintos porque la mitad de las piezas
   son blancas: sobre blanco no se ven y parecería que están rotas.       */
.kit-cabecera { display:flex; gap:20px; align-items:center; flex-wrap:wrap }
.kit-cabecera > div:last-child { flex:1 1 300px }
.kit-muestra {
  display:flex; align-items:center; justify-content:center;
  padding:20px; height:170px; border-radius:10px 10px 0 0;
  overflow:hidden;
}
/* Alto fijo, no minimo: con minimo, la tarjeta del logotipo vertical crecia
   el doble que las demas y la reja quedaba escalonada.                    */
.kit-cabecera .kit-muestra { flex:0 0 260px; border-radius:10px; height:120px }
.kit-muestra > svg { max-width:100%; max-height:150px; height:auto; width:auto }

.kit-titulo { font-size:19px; margin:26px 0 12px }
.kit-rejilla { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)) }
.kit-pieza { overflow:hidden; display:flex; flex-direction:column }
.kit-pieza .card-body { flex:1; display:flex; flex-direction:column; align-items:flex-start }
.kit-pieza .btn { margin-top:auto; font-family:var(--mono,ui-monospace,monospace); font-size:11px }
.kit-nota {
  margin:8px 0 0; padding:8px 10px; border-radius:8px;
  background:var(--brand-050); color:var(--brand-700);
  font-size:12px; line-height:1.55;
}

.kit-tonos { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)) }
.kit-tono { display:grid; grid-template-columns:auto 1fr; gap:2px 10px; align-items:center }
.kit-tono-caja { grid-row:1 / 4; width:38px; height:38px; border-radius:9px; border:1px solid var(--line) }
.kit-tono code { font-size:12px; color:var(--muted) }
.kit-tono .hint { grid-column:2; font-size:11.5px; line-height:1.4 }

/* ── Imágenes de redes sociales ──────────────────────────────────────────
   Aquí las muestras NO llevan alto fijo como las del kit: una portada de
   1640 x 624 y una historia de 1080 x 1920 no caben en la misma caja, y
   forzarlas a una sola altura era lo que hacía que la portada se viera
   como un hilo.                                                          */
.redes-rejilla { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) }
.redes-pieza { overflow:hidden; display:flex; flex-direction:column }
.redes-pieza .card-body { flex:1; display:flex; flex-direction:column }
.redes-muestra {
  display:flex; align-items:center; justify-content:center;
  background:var(--card-2); border-bottom:1px solid var(--line); line-height:0;
}
.redes-muestra svg { max-width:100%; max-height:340px; width:auto; height:auto; display:block }
.redes-botones { display:flex; gap:8px; margin-top:auto; padding-top:12px }

@media (max-width:600px) {
  .kit-rejilla { grid-template-columns:1fr }
  .kit-cabecera .kit-muestra { flex:1 1 100% }
  .redes-rejilla { grid-template-columns:1fr }
}

/* ── Bolsa de trabajo ─────────────────────────────────────────────────────
   Las tarjetas de vacante enseñan el sueldo antes que nada: es el dato por
   el que se decide si se sigue leyendo, y esconderlo abajo obliga a abrir
   diez fichas para comparar dos.                                          */
.emp-filtros-fila { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end }
.emp-filtros-fila > div { min-width:150px }
.emp-filtros-acciones { display:flex; gap:8px; align-items:flex-end }

.emp-lista { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)) }

.emp-tarjeta { position:relative; padding:16px 17px; display:flex; flex-direction:column; gap:9px }
.emp-tarjeta:hover { border-color:var(--brand-100) }
/* La tarjeta entera es el enlace, pero el <a> va tendido encima en vez de
   envolver el contenido: envolviéndolo, cualquier enlace de dentro quedaría
   anidado dentro de otro enlace, que es HTML inválido. */
.emp-tarjeta-liga { position:absolute; inset:0; z-index:1 }
.emp-tarjeta > *:not(.emp-tarjeta-liga) { position:relative; z-index:2; pointer-events:none }
.emp-tarjeta a:not(.emp-tarjeta-liga) { pointer-events:auto }

.emp-tarjeta-hd { display:flex; justify-content:space-between; gap:10px; align-items:flex-start }
.emp-tarjeta h2 { font-size:16.5px; line-height:1.3; margin:0 }
.emp-quien { display:flex; align-items:center; gap:7px; margin:4px 0 0;
             font-size:13.5px; color:var(--ink-2) }
.emp-logo { width:20px; height:20px; border-radius:5px; object-fit:cover }

.emp-sueldo { display:flex; align-items:center; gap:6px; flex-wrap:wrap;
              margin:0; font-weight:800; font-size:16px; color:var(--green) }
.emp-sueldo.bajo { color:var(--amber) }
.emp-sueldo-nota { font-weight:500; font-size:12.5px; color:var(--muted) }
.emp-aviso-minimo { margin:0; font-size:12px; color:var(--amber); line-height:1.4 }
.emp-aviso-minimo.grande { margin-top:12px; padding:10px 12px; border-radius:9px;
                           background:#FFF6E5; color:#7A4A00; font-size:13.5px }

.emp-datos { list-style:none; margin:0; padding:0; display:grid; gap:5px }
.emp-datos li { display:flex; align-items:flex-start; gap:7px;
                font-size:13px; color:var(--ink-2); line-height:1.4 }
.emp-datos svg { flex:0 0 auto; margin-top:1px; color:var(--muted) }

.emp-tarjeta-pie { display:flex; justify-content:space-between; align-items:center;
                   padding-top:9px; border-top:1px solid var(--line-2) }

/* --- La ficha de una vacante --- */
.emp-ficha { display:grid; gap:16px; grid-template-columns:minmax(0,1fr) 320px; align-items:start }
.emp-ficha-main { display:grid; gap:14px }
.emp-ficha-lado { display:grid; gap:14px; position:sticky; top:78px }
.emp-h2 { font-size:16px; margin:0 0 10px }

.emp-cabeza h1 { font-size:clamp(21px,3vw,28px); margin:0 0 6px; line-height:1.22 }
.emp-quien-grande { display:flex; align-items:center; gap:10px; margin:0; font-size:14.5px }
.emp-quien-grande a { display:block }
.emp-logo-grande { width:38px; height:38px; border-radius:9px; object-fit:cover }

.emp-clave { display:grid; gap:12px; margin-top:16px;
             grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) }
.emp-clave-dato { display:grid; gap:2px; padding:12px 13px;
                  background:var(--card-2); border-radius:11px }
.emp-clave-dato .k { display:flex; align-items:center; gap:6px;
                     font-size:11.5px; font-weight:700; text-transform:uppercase;
                     letter-spacing:.04em; color:var(--muted) }
.emp-clave-dato .v { font-size:16px; font-weight:800; color:var(--ink) }
.emp-clave-dato .v.ojo { color:var(--amber) }
.emp-clave-dato .d { font-size:12.5px; color:var(--ink-2); line-height:1.4 }

.emp-texto { margin:0; line-height:1.7; color:var(--ink-2); white-space:pre-line }
.emp-requisitos, .emp-prestaciones { list-style:none; margin:0 0 10px; padding:0;
                                     display:grid; gap:7px }
.emp-prestaciones { grid-template-columns:repeat(auto-fit,minmax(190px,1fr)) }
.emp-requisitos li, .emp-prestaciones li { display:flex; align-items:center; gap:8px;
                                           font-size:13.5px; color:var(--ink-2) }
.emp-prestaciones li svg { color:var(--green) }
.emp-prestaciones li.ley svg { color:var(--brand) }
.emp-prestaciones li.ley { font-weight:700; color:var(--ink) }

.emp-postular .btn { justify-content:center }
.emp-meta { display:grid; gap:3px; margin-top:14px; padding-top:12px;
            border-top:1px solid var(--line-2) }

.emp-alerta { background:var(--brand-050); border-color:var(--brand-100) }
.emp-alerta h3 { display:flex; align-items:center; gap:7px;
                 font-size:14.5px; margin:0 0 8px; color:var(--brand-700) }
.emp-alerta ul { margin:0; padding-left:17px; display:grid; gap:6px }
.emp-alerta li { font-size:12.8px; line-height:1.5; color:var(--brand-700) }

.emp-acciones { display:grid; gap:8px }
.emp-con-reportes { border-color:#FBC7D4 }
.emp-por-vencer { color:var(--amber); font-weight:700 }

/* --- El formulario --- */
.emp-form .emp-h2 { padding-bottom:9px; border-bottom:1px solid var(--line-2) }
.emp-sueldo-campos { display:grid; gap:12px; grid-template-columns:1fr 1fr 1fr }
.emp-casillas { display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)) }
.emp-casillas .check.es-ley span { font-weight:700 }
.emp-casillas .check small { font-weight:400; color:var(--muted) }

@media (max-width:900px) {
  .emp-ficha { grid-template-columns:1fr }
  .emp-ficha-lado { position:static }
  .emp-sueldo-campos { grid-template-columns:1fr 1fr }
}
@media (max-width:560px) {
  .emp-lista { grid-template-columns:1fr }
  .emp-sueldo-campos { grid-template-columns:1fr }
  .emp-filtros-fila > div { min-width:100% }
}

/* Los dos modos del desplegable de colonia: «están aquí» y «reparten aquí».
   Son enlaces con aspecto de pestañas, no un interruptor: así el filtro
   sigue funcionando con el teclado y sin JavaScript, igual que el resto de
   la barra de filtros.                                                      */
.col-modos { display:flex; gap:4px; padding:4px; margin-top:8px;
             background:var(--off-bg); border-radius:10px }
.col-modos a { flex:1; text-align:center; padding:7px 8px; border-radius:7px;
               font-size:12.5px; font-weight:700; color:var(--ink-2);
               text-decoration:none; white-space:nowrap }
.col-modos a:hover { color:var(--ink) }
.col-modos a.on { background:var(--card); color:var(--brand);
                  box-shadow:0 1px 3px rgba(0,0,0,.08) }

/* El aviso que explica por qué los resultados salen en ese orden. Sin él,
   la lista ordenada por cercanía se lee como una lista desordenada.        */
.cerca-aviso { display:flex; align-items:flex-start; gap:7px; flex-wrap:wrap;
               margin:8px 0 0; padding:8px 11px; border-radius:9px;
               background:var(--brand-050); color:var(--brand-700);
               font-size:12.8px; line-height:1.5 }
.cerca-aviso svg { flex:0 0 auto; margin-top:2px }
.cerca-aviso .muted { flex-basis:100%; color:var(--brand-600); opacity:.85 }

/* Entrar con el código de papel. Va plegado porque no es la forma habitual
   de entrar: quien la necesita viene buscándola, y tenerla siempre abierta
   invitaría a usar el papel como método de todos los días.                 */
.acceso-codigo > summary { display:flex; align-items:center; gap:11px;
                           cursor:pointer; list-style:none }
.acceso-codigo > summary::-webkit-details-marker { display:none }
.acceso-codigo > summary::after { content:'⌄'; margin-left:auto; color:var(--muted);
                                  transition:transform .18s }
.acceso-codigo[open] > summary::after { transform:rotate(180deg) }
.acceso-codigo > summary svg { flex:0 0 auto; color:var(--brand) }
.acceso-codigo > summary b { display:block; font-size:14.5px }
.acceso-codigo > summary small { display:block; font-size:12.5px; color:var(--muted) }
.acceso-codigo .mono { font-family:var(--mono,ui-monospace,monospace) }

/* ── Reseñas ──────────────────────────────────────────────────────────────
   Las estrellas se dibujan con CSS y no con un emoji: ★ cambia de forma en
   cada sistema y no se puede pintar a medias, que es justo lo que hace falta
   para un 4.5.                                                             */
.estrellas { display:inline-flex; gap:2px; vertical-align:middle }
.estrellas i { width:var(--e,16px); height:var(--e,16px); display:block;
  background:var(--line); mask:var(--estrella) center/contain no-repeat;
  -webkit-mask:var(--estrella) center/contain no-repeat }
:root { --estrella:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6-5.9-3.2-5.9 3.2 1.2-6.6L2.5 9.5l6.6-.9z'/%3E%3C/svg%3E") }
.estrellas i.llena { background:#F5A524 }
.estrellas i.media { background:linear-gradient(90deg,#F5A524 50%,var(--line) 50%) }

.rs-reparto { display:grid; gap:5px; max-width:340px }
.rs-barra { display:flex; align-items:center; gap:8px; font-size:12px }
.rs-barra-n { min-width:26px; color:var(--muted) }
.rs-barra-riel { flex:1; height:7px; border-radius:99px; background:var(--off-bg); overflow:hidden }
.rs-barra-riel i { display:block; height:100%; background:#F5A524; border-radius:99px }
.rs-barra-c { min-width:24px; text-align:right; color:var(--muted) }

.rs-lista { display:grid; gap:12px }
.rs-item { padding:13px 0; border-top:1px solid var(--line-2) }
.rs-item.mia { background:var(--brand-050); border-radius:11px; padding:13px 14px; border-top:0 }
.rs-item-hd { display:flex; justify-content:space-between; gap:10px;
              align-items:flex-start; flex-wrap:wrap }
.rs-avatar { width:34px; height:34px; border-radius:50%; flex:0 0 auto;
             display:grid; place-items:center; font-weight:800; font-size:14px;
             background:var(--brand-100); color:var(--brand-700) }
.rs-texto { margin:9px 0 0; line-height:1.6; color:var(--ink-2); white-space:pre-line }
.rs-respuesta { margin-top:10px; padding:10px 13px; border-radius:10px;
                background:var(--card-2); border-left:3px solid var(--brand) }
.rs-respuesta p { margin:4px 0 0; font-size:13.5px; line-height:1.55; color:var(--ink-2) }
.rs-reportar { display:inline-flex; align-items:center; gap:5px; margin-top:8px;
               font-size:12px; color:var(--muted); text-decoration:none }
.rs-reportar:hover { color:var(--red) }
.rs-pendiente { border-color:#FFE0B2 }

.rs-elige { display:grid; gap:8px }
.rs-opcion { position:relative; display:block; cursor:pointer }
.rs-opcion input { position:absolute; opacity:0; pointer-events:none }
.rs-opcion-cara { display:grid; grid-template-columns:auto 1fr; gap:3px 12px;
                  align-items:center; padding:11px 14px; border-radius:11px;
                  border:1.5px solid var(--line); background:var(--card) }
.rs-opcion-cara b { grid-column:2; font-size:14.5px }
.rs-opcion-cara small { grid-column:2; font-size:12.5px; color:var(--muted) }
.rs-opcion-cara .estrellas { grid-row:1 / 3 }
.rs-opcion input:checked + .rs-opcion-cara { border-color:var(--brand); background:var(--brand-050) }
.rs-opcion input:focus-visible + .rs-opcion-cara { outline:2px solid var(--brand); outline-offset:2px }

/* ── Promociones ───────────────────────────────────────────────────────── */
.promo-caja { border-color:var(--brand-100); background:var(--brand-050) }
.promo-item { padding:10px 0; border-top:1px solid var(--brand-100) }
.promo-item:first-of-type { border-top:0; padding-top:0 }
.promo-item b { font-size:15.5px; color:var(--brand-700) }
.promo-item p { margin:3px 0 0; font-size:13.5px; line-height:1.55; color:var(--ink-2) }
.promo-cuando { display:inline-flex; align-items:center; gap:5px; margin-top:5px;
                font-size:12px; color:var(--brand-600) }

/* ── «Qué me toca hoy» y la lista de comprobación ──────────────────────── */
.hoy-lista { display:grid; gap:8px }
.hoy-item { display:flex; align-items:center; gap:13px; padding:13px 15px;
            border:1px solid var(--line); border-radius:12px; background:var(--card);
            text-decoration:none; color:inherit }
a.hoy-item:hover { border-color:var(--brand-100); background:var(--card-2) }
.hoy-item.urgente { border-color:#FBC7D4; background:var(--brand-050) }
.hoy-ico { flex:0 0 auto; color:var(--brand); display:grid; place-items:center }
.hoy-txt { flex:1; min-width:0 }
.hoy-txt b { display:block; font-size:14.5px }
.hoy-txt small { display:block; font-size:12.5px; color:var(--muted); line-height:1.45 }
.hoy-n { flex:0 0 auto; min-width:34px; text-align:center; font-weight:800;
         font-size:16px; color:var(--brand) }

/* ── El aviso de búsqueda corregida ────────────────────────────────────── */
.busq-corregido { display:flex; align-items:center; gap:7px; flex-wrap:wrap;
                  margin:8px 0 0; padding:8px 11px; border-radius:9px;
                  background:var(--brand-050); color:var(--brand-700);
                  font-size:12.8px; line-height:1.5 }

/* ── Tabla simple, para respaldos ──────────────────────────────────────── */
.tabla { width:100%; border-collapse:collapse }
.tabla th, .tabla td { padding:10px 13px; text-align:left; border-bottom:1px solid var(--line-2) }
.tabla th { font-size:11.5px; text-transform:uppercase; letter-spacing:.04em;
            color:var(--muted); font-weight:700 }
.tabla tr:last-child td { border-bottom:0 }

@media (max-width:600px) {
  .rs-item-hd { flex-direction:column }
  .tabla { display:block; overflow-x:auto; white-space:nowrap }
}

/* La barra de la encuesta del portal. Discreta y abajo: una encuesta que
   interrumpe se cierra sin leerla.                                        */
.ep-barra { position:fixed; left:12px; right:12px; z-index:60;
            bottom:calc(12px + var(--nav-movil-h,0px));
            opacity:0; transform:translateY(14px); transition:opacity .3s, transform .3s }
.ep-barra.ep-entra { opacity:1; transform:none }
.ep-cuerpo { display:flex; align-items:center; gap:12px; max-width:640px; margin:0 auto;
             padding:12px 14px; border-radius:14px; background:var(--card);
             border:1px solid var(--brand-100); box-shadow:0 8px 30px rgba(0,0,0,.14) }
.ep-ico { flex:0 0 auto; color:var(--brand) }
.ep-txt { flex:1; min-width:0 }
.ep-txt b { display:block; font-size:14px; line-height:1.3 }
.ep-txt small { display:block; font-size:12px; color:var(--muted); line-height:1.4 }
.ep-cerrar { flex:0 0 auto; width:28px; height:28px; border:0; border-radius:8px;
             background:transparent; color:var(--muted); font-size:20px; cursor:pointer }
.ep-cerrar:hover { background:var(--off-bg); color:var(--ink) }
@media (max-width:560px) {
  .ep-cuerpo { flex-wrap:wrap }
  .ep-txt { flex-basis:calc(100% - 90px) }
  .ep-cuerpo .btn { flex:1 }
}

/* La calificación en la tarjeta de la lista. */
.biz-nota { display:flex; align-items:center; gap:6px; margin:5px 0 0; font-size:12.5px }
.biz-nota b { font-size:13.5px; color:var(--ink) }
.biz-nota span { color:var(--muted) }
.biz-nota.sin-nota { color:var(--muted) }
.biz-nota.sin-nota svg { color:var(--muted) }

/* El aviso del orden por cercanía. Cuando NO hay ubicación se pinta en tono
   neutro y con las acciones a mano: ese es el caso que más se ve y el que
   tiene que llevar a algún lado.                                           */
.cerca-aviso { flex-wrap:wrap }
.cerca-aviso > span { flex:1 1 100% }
.cerca-aviso .acciones { flex-basis:100%; margin-top:3px; font-size:12.2px; opacity:.9 }
.cerca-aviso.sin-ubicacion { background:var(--off-bg); color:var(--ink-2) }
.cerca-aviso.sin-ubicacion svg { color:var(--muted) }
.cerca-aviso.sin-ubicacion a { color:var(--brand); font-weight:700 }

/* Una nota con pocas reseñas se enseña, pero más apagada. */
.biz-nota.provisional b { color:var(--ink-2) }
.biz-nota.provisional .estrellas { opacity:.75 }

/* ── Qué tan lejos queda ──────────────────────────────────────────────────
   Los tiempos van con su etiqueta al lado: el icono del mototaxi es el más
   cargado de la familia y por sí solo no se entiende a 15 px.             */
.biz-lejos { display:flex; align-items:center; gap:6px 9px; flex-wrap:wrap;
             margin:7px 0 0; padding:6px 9px; border-radius:9px;
             background:var(--card-2); font-size:12.2px; color:var(--ink-2) }
/* La distancia siempre sola en el primer renglón: es el dato que se busca, y
   con cuatro medios detrás quedaba a media línea, perdida entre los tiempos. */
.biz-lejos .bl-km { flex-basis:100% }
.biz-lejos .bl-km { display:inline-flex; align-items:center; gap:4px;
                    font-weight:800; color:var(--brand) }
.biz-lejos .bl-medio { display:inline-flex; align-items:center; gap:4px; white-space:nowrap }
.biz-lejos svg { flex:0 0 auto; color:var(--muted) }
.biz-lejos .bl-km svg { color:var(--brand) }

.emp-lejos span { display:inline-flex; align-items:center; gap:4px; flex-wrap:wrap }
.emp-lejos svg { color:var(--muted) }

.trayecto-km { font-size:19px; color:var(--brand) }
.trayecto-aprox {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin-left: 4px; vertical-align: middle;
}
.trayecto-medios { display:grid; gap:10px;
                   grid-template-columns:repeat(auto-fit,minmax(120px,1fr)) }
.trayecto-medio { display:grid; justify-items:center; gap:2px; padding:13px 10px;
                  background:var(--card-2); border-radius:11px; text-align:center }
.trayecto-medio .tm-ico { color:var(--brand) }
.trayecto-medio b { font-size:16px }
.trayecto-medio small { font-size:12px; color:var(--muted) }

@media (max-width:420px) {
  .biz-lejos { font-size:11.5px; gap:7px }
}

/* ── Los datos para transferir, en ventana ───────────────────────────────
   El botón bajaba a la sección, y eso fallaba justo cuando más importa:
   de pie en la caja, con alguien esperando. Encima y sin perder el sitio.  */
.modal-pago { border:0; padding:0; max-width:440px; width:calc(100% - 28px);
              border-radius:18px; background:var(--card); color:var(--ink);
              box-shadow:0 24px 60px rgba(0,0,0,.35) }
.modal-pago::backdrop { background:rgba(20,10,8,.62) }
.modal-pago > h3 { display:flex; align-items:center; gap:8px;
                   margin:0; padding:18px 20px 0; font-size:17px }
.modal-pago > .bank-box, .modal-pago .bank-box { margin:14px 20px 0 }
.modal-pago > .hint, .modal-pago > form { margin:0; padding:0 20px }
.modal-pago > form:last-of-type { padding-bottom:18px }
.modal-pago .hint { padding-top:12px; font-size:11.5px }
.modal-pago-cerrar { position:absolute; top:10px; right:10px; padding:0 }
.mp-x { width:34px; height:34px; border:0; border-radius:10px; cursor:pointer;
        background:var(--off-bg); color:var(--ink-2); font-size:21px; line-height:1 }
.mp-x:hover { background:var(--brand-050); color:var(--brand) }
@media (max-width:520px) {
  /* En el teléfono se pega abajo, que es donde alcanza el pulgar. */
  .modal-pago { margin:auto auto 0; width:100%; max-width:none;
                border-radius:20px 20px 0 0 }
}

/* ── El que está cerrado, marcado ────────────────────────────────────────
   Antes se ponía «Abierto ahora» en verde en cada tarjeta. Era ruido: casi
   todas están abiertas, así que el distintivo no distinguía nada y gastaba la
   línea donde sí importa lo demás. Ahora sólo habla la excepción.           */
.badge-cerrado { background: var(--cerrado-bg); color: var(--cerrado); }
.badge-cerrado .bc-abre { font-weight: 500; opacity: .85 }
.dot-cerrado { background: var(--cerrado); box-shadow: 0 0 0 3px rgba(47,74,92,.14) }

/* La tarjeta entera lo dice, para no tener que leer el distintivo: una franja
   fría arriba y la fachada un punto más apagada. Sigue siendo perfectamente
   legible —está cerrado, no dado de baja—. */
.biz-card.cerrado { border-color: #C9DCE7 }
.biz-card.cerrado::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px; z-index: 3;
  background: var(--cerrado);
}
.biz-card.cerrado .biz-cover img { filter: saturate(.55) brightness(.94) }
.biz-card.cerrado:hover .biz-cover img { filter: none }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .biz-card.cerrado { border-color: #2C4653 } }
:root[data-theme="dark"] .biz-card.cerrado { border-color: #2C4653 }

/* =============================================================
   El buzón: avisos, favoritos y promociones exclusivas
   ============================================================= */

/* La campana del encabezado. El contador va encima y a la derecha, que es
   donde lo busca la vista después de veinte años de aplicaciones. */
.campana { position: relative }
.campana-n {
  /* Fuera del botón, no encima de la campana: puesto dentro tapaba el asa y
     el icono dejaba de leerse justo cuando hay algo que leer. */
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 9px; background: var(--brand); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  box-shadow: 0 0 0 2px var(--card);
}

/* ---------- La lista de avisos ---------- */
.avisos { display: grid; gap: 2px }
.aviso {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 10px 12px 12px; border-radius: 12px;
  border-left: 3px solid transparent; background: transparent;
}
.aviso + .aviso { border-top: 1px solid var(--line-2) }
/* Lo no leído se marca con fondo y con la barra de color, no sólo con negrita:
   en una lista larga la negrita sola no se ve hasta que se compara. */
.aviso.nuevo { background: var(--card-2) }
.av-ico {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; background: var(--off-bg); color: var(--off);
}
.av-titulo { display: block; font-weight: 700; font-size: 14.5px; text-decoration: none }
a.av-titulo:hover { color: var(--brand); text-decoration: underline }
.av-cuerpo { margin: 3px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.5 }
.av-cuando { display: block; margin-top: 5px; font-size: 11.5px; color: var(--muted) }
.av-x { flex-shrink: 0 }
.btn-x {
  border: 0; background: none; color: var(--faint); cursor: pointer;
  font-size: 19px; line-height: 1; padding: 2px 5px; border-radius: 7px;
}
.btn-x:hover { background: var(--off-bg); color: var(--red) }

/* Un color por tipo de aviso: en veinte líneas es lo que deja distinguir
   «te reportaron» de «te guardaron» sin llegar a leer. */
.av-brand .av-ico { background: var(--brand-050); color: var(--brand) }
.av-brand.nuevo   { border-left-color: var(--brand) }
.av-amber .av-ico { background: #FCF2E2; color: #7D4A00 }
.av-amber.nuevo   { border-left-color: var(--amber) }
.av-green .av-ico { background: #E9F7EF; color: #12643A }
.av-green.nuevo   { border-left-color: var(--green) }
.av-red   .av-ico { background: #FBEAEC; color: #8E1020 }
.av-red.nuevo     { border-left-color: var(--red) }
.av-sky   .av-ico { background: #E7F2FA; color: #10425F }
.av-sky.nuevo     { border-left-color: var(--sky-ink) }
.av-gris.nuevo    { border-left-color: var(--off) }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .av-amber .av-ico { background: #3A2A10; color: #E5A94E }
  :root:not([data-theme="light"]) .av-green .av-ico { background: #12301F; color: #57C98A }
  :root:not([data-theme="light"]) .av-red   .av-ico { background: #3A1A1C; color: #F08A8A }
  :root:not([data-theme="light"]) .av-sky   .av-ico { background: #12303F; color: #C4E2F7 }
}
:root[data-theme="dark"] .av-amber .av-ico { background: #3A2A10; color: #E5A94E }
:root[data-theme="dark"] .av-green .av-ico { background: #12301F; color: #57C98A }
:root[data-theme="dark"] .av-red   .av-ico { background: #3A1A1C; color: #F08A8A }
:root[data-theme="dark"] .av-sky   .av-ico { background: #12303F; color: #C4E2F7 }

/* ---------- Quién me tiene en favoritos ---------- */
.fav-tira {
  display: flex; gap: 12px; align-items: center; text-decoration: none;
  border-color: var(--brand-100);
}
.fav-tira:hover { border-color: var(--brand); box-shadow: var(--sh-2) }
.ft-ico {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; background: var(--brand-050); color: var(--brand);
}
.fav-tira .hint { display: block; margin-top: 2px }
.ft-flecha { color: var(--brand); font-size: 19px; flex-shrink: 0 }

.fav-cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap }
.fav-cta .btn { flex-shrink: 0 }

.fav-lista { display: grid; gap: 2px }
.fav-fila {
  display: flex; gap: 11px; align-items: center; padding: 9px 2px;
}
.fav-fila + .fav-fila { border-top: 1px solid var(--line-2) }
.fav-ini {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
  background: var(--brand-050); color: var(--brand);
}
.fav-fila .hint { display: block; margin-top: 1px }
.fav-promo { padding: 12px 0 }
.fav-promo + .fav-promo { border-top: 1px solid var(--line-2) }
.fav-promo form { margin: 0 }

/* De qué colonias son: barras, porque el número solo no compara. */
.fav-colonias { display: grid; gap: 7px }
.fc-fila { display: grid; grid-template-columns: minmax(90px, 1fr) 2fr auto; gap: 10px; align-items: center }
.fc-nombre { font-size: 13px }
.fc-barra { height: 8px; border-radius: 5px; background: var(--off-bg); overflow: hidden }
.fc-barra i { display: block; height: 100%; background: var(--brand); border-radius: 5px }
.fc-n { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums }

/* ---------- La forma de acotar una promoción ---------- */
.lim-opts { display: grid; gap: 8px; margin-bottom: 14px }
.lim-opt {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px;
}
.lim-opt:hover { border-color: var(--brand-100) }
.lim-opt.on { border-color: var(--brand); background: var(--brand-050) }
.lim-opt input { margin-top: 3px; flex-shrink: 0 }
.lo-ico { color: var(--brand); flex-shrink: 0 }
.lim-opt .hint { display: block; margin-top: 1px }
.lim-campos { padding: 12px; border-radius: 12px; background: var(--card-2) }

/* Los apartados, en el panel */
.apartados { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line) }
.apartados tr.usado { opacity: .55 }
.cupon {
  display: inline-block; padding: 3px 8px; border-radius: 7px;
  background: var(--brand-050); color: var(--brand-700);
  font-weight: 700; letter-spacing: .09em;
}

/* ---------- La promoción en la ficha pública ---------- */
.promo-item.exclusiva {
  border: 1px solid var(--brand-100); border-radius: 12px;
  padding: 12px; background: var(--brand-050);
}
.promo-item.exclusiva > b { display: block }
.promo-exc {
  /* En bloque, no en línea: puesto en línea empujaba al título a la derecha y
     se leía como si formara parte del nombre de la promoción. */
  display: flex; align-items: center; gap: 5px; margin-bottom: 5px;
  font-size: 11.5px; font-weight: 700; color: var(--brand-700);
  text-transform: uppercase; letter-spacing: .04em;
}
.promo-precio { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin: 6px 0 2px }
.pp-ahora { font-size: 25px; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums }
.pp-antes { font-size: 15px; color: var(--muted); text-decoration: line-through }
.pp-baja {
  font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 20px;
  background: #E9F7EF; color: #12643A;
}
.promo-paquete { display: flex; align-items: center; gap: 6px; margin: 5px 0 0; font-size: 13.5px }
.promo-lim { color: var(--brand-700); font-weight: 600 }
.promo-cupos { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px }
.promo-cupos form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.promo-guarda { display: flex; align-items: center; gap: 6px; margin-top: 10px }
.cupon-mio { display: flex; align-items: center; gap: 9px; flex-wrap: wrap }
.cm-txt { font-size: 12.5px; color: var(--ink-2) }
.cupon-mio .cupon { font-size: 17px }

/* En el teléfono el precio no necesita ser tan grande: ya es lo único
   grande de la tarjeta. */
@media (max-width: 520px) {
  .pp-ahora { font-size: 22px }
  .fav-cta .btn { width: 100% }
}

/* El contador de favoritos del menú no es una tarea pendiente sino un dato,
   así que no lleva el rojo de la marca: si todo grita, nada avisa. */
.sidebar a .count.suave { background: var(--off-bg); color: var(--off) }
.sidebar a.active .count.suave { background: rgba(255,255,255,.22); color: #fff }

/* La campana vive fuera del menú, así que en el teléfono —donde el menú se
   esconde— se queda a la vista. En escritorio el menú lleva margin-left:auto
   y la empuja al extremo derecho, que es donde se busca. */
@media (max-width: 900px) {
  .site-header .campana { margin-left: auto !important }
}

/* ── Cómo va cada lote de códigos ────────────────────────────────────────
   La barra es el punto: un lote de cien papeles del que se registraron tres
   personas y otro del que se registraron ochenta se distinguen de un vistazo,
   y con dos números sueltos habría que compararlos a mano.               */
.lotes { display: grid; gap: 2px }
.lote-fila {
  display: grid; grid-template-columns: minmax(110px, 1.2fr) 2fr auto;
  gap: 12px; align-items: center; padding: 9px 8px;
  border-radius: 9px; text-decoration: none; color: inherit;
}
.lote-fila:hover { background: var(--card-2) }
.lote-fila.on { background: var(--brand-050); box-shadow: inset 2px 0 0 var(--brand) }
.lote-fila.on .lf-nombre b { color: var(--brand-700) }
.lf-nombre b { display: block; font-size: 13.5px }
.lf-nombre .hint { display: block; margin-top: 0; font-size: 11.5px }
.lf-barra { height: 9px; border-radius: 6px; background: var(--off-bg); overflow: hidden }
.lf-barra i { display: block; height: 100%; background: var(--brand); border-radius: 6px }
.lf-n { font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right }
.lf-n .hint { display: block; font-size: 11px; margin-top: 0 }
@media (max-width: 620px) {
  /* En el teléfono la barra se lleva su propio renglón: apretada entre el
     nombre y el número no medía nada. */
  .lote-fila { grid-template-columns: 1fr auto; }
  .lf-barra { grid-column: 1 / -1; order: 3 }
}

/* ── Por qué salió este resultado ────────────────────────────────────────
   La coincidencia ocurría dentro de la consulta y no llegaba a la pantalla:
   quien buscaba «taco» veía doce negocios sin saber cuál vende lo que quiere. */
.biz-porque { display: flex; align-items: flex-start; gap: 5px; margin: 5px 0 0;
              font-size: 11.8px; color: var(--muted); line-height: 1.4 }
.biz-porque svg { flex: 0 0 auto; margin-top: 2px }
.biz-porque b { font-weight: 600; color: var(--ink-2) }

/* Lo que coincide, marcado. Un fondo tenue y no un color de texto: sobre una
   etiqueta corta el cambio de color solo no se nota. */
/* Sin padding horizontal: con él, «tacos» se leía «taco s» —la marca partía
   la palabra en dos—. El aire lo pone un box-shadow, que no ocupa sitio. */
mark { background: var(--brand-100); color: inherit; border-radius: 3px;
       padding: 0; font-weight: 700;
       box-shadow: 0 0 0 1.5px var(--brand-100) }
.chip mark { background: transparent; color: var(--brand); box-shadow: none }
.chip.active mark { color: inherit }

/* El abanico de etiquetas */
.abanico .chips { gap: 7px }
.abanico .chip { display: inline-flex; align-items: center; gap: 6px }
/* La etiqueta va envuelta en un solo elemento: suelta, el texto que queda
   fuera del <mark> cuenta como otro hijo del flex y el gap parte la palabra. */
.ch-t { white-space: nowrap }
.ch-n { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 20px;
        background: var(--off-bg); color: var(--off) }
.chip.active .ch-n { background: rgba(255,255,255,.24); color: #fff }

/* La × de ejemplo dentro de la explicación: igual que la de verdad para que se
   reconozca, pero sin ser un botón. */
.x-demo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%; vertical-align: -3px;
  background: var(--brand); color: #fff; font-size: 12px; font-weight: 700;
}

/* ── El formulario y la lista, separados ─────────────────────────────────
   Eran la misma ficha, una debajo de la otra: al editar, el formulario se
   llena con una promoción que también está en la lista de abajo, y no se veía
   dónde acababa una cosa y empezaba la otra. Se separan por tres señales a la
   vez —título, fondo y franja de estado—, porque con una sola seguían
   pareciéndose.                                                            */
.promo-lista {
  margin-top: 22px; padding: 4px 14px 14px;
  border-radius: var(--r-lg); background: var(--card-2);
  border: 1px solid var(--line-2);
}
.pl-cabeza { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
             padding: 14px 2px 12px }
.pl-cabeza h2 { font-size: 17px }
.pl-cabeza .hint { margin: 0 }

.promo-ficha { position: relative; overflow: hidden; margin-bottom: 10px }
.promo-ficha:last-child { margin-bottom: 0 }
/* La franja dice el estado antes de leer nada. */
.promo-ficha::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--off);
}
.promo-ficha.es-viva::before    { background: var(--green) }
.promo-ficha.es-urge::before    { background: var(--amber) }
.promo-ficha.es-pausada::before { background: var(--off) }
.promo-ficha.es-vencida::before { background: var(--line) }
.promo-ficha.es-oculta::before  { background: var(--red) }

@media (max-width: 620px) {
  /* En el teléfono la caja se sale de los márgenes de la tarjeta: con dos
     recuadros anidados no queda ancho para el contenido. */
  .promo-lista { margin-inline: -6px; padding-inline: 8px }
}

/* ── Promociones a la vista ──────────────────────────────────────────────
   La cinta va sobre la fotografía y no entre los distintivos de abajo: los de
   abajo dicen cómo es el negocio siempre —«a domicilio», «acepta
   transferencia»—; ésta dice algo que hoy es cierto y mañana no.          */
.biz-promo-cinta {
  position: absolute; top: 10px; left: 10px; z-index: 4;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: var(--r-full);
  background: var(--brand); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
/* Con la cinta puesta, el listón de «Destacado» se corre para no chocar. */
.biz-card .ribbon + .biz-promo-cinta { top: 44px }

/* ── La pantalla de promociones ─────────────────────────────────────────── */
.promo-negocio { overflow: hidden }
.pn-cabeza {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  text-decoration: none; color: inherit; border-bottom: 1px solid var(--line-2);
}
.pn-cabeza:hover b { color: var(--brand) }
.pn-logo {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; font-size: 21px;
  background: var(--brand-050); overflow: hidden;
}
.pn-logo .logo-img { width: 100%; height: 100%; object-fit: cover }
.pn-cabeza b { display: block; font-size: 16px }
.pn-cabeza .hint { display: block; margin-top: 1px }
.pn-km {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 800; color: var(--brand);
}
.pn-lejos { margin: 12px 16px 0; }
.pn-promos { display: grid; gap: 10px; padding: 14px 16px }
.pn-pie {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 0 16px 14px;
}
@media (max-width: 520px) {
  .pn-cabeza { padding: 12px }
  .pn-promos { padding: 12px }
  .pn-pie { padding: 0 12px 12px }
  .pn-lejos { margin: 10px 12px 0 }
}

/* La promoción normal también necesita su caja: sin ella se derramaba sobre el
   fondo de la tarjeta y sólo las exclusivas parecían una promoción. */
.pn-promos .promo-item {
  padding: 12px; border-radius: 12px;
  background: var(--card-2); border: 1px solid var(--line-2);
}
.pn-promos .promo-item.exclusiva { background: var(--brand-050); border-color: var(--brand-100) }
.pn-promos .promo-item > b { display: block; font-size: 15.5px }
.pn-promos .promo-item > p { margin: 5px 0 0; font-size: 13.5px; color: var(--ink-2) }
/* La vigencia, en su propio renglón: pegada al título se leía como parte de él. */
.pn-promos .promo-cuando { display: flex; align-items: center; gap: 5px; margin-top: 7px }

/* ── Quién te buscó ──────────────────────────────────────────────────────
   La inicial en un círculo y no una fotografía: no hay fotografía que
   enseñar, y un hueco gris repetido treinta veces se lee como un error.   */
.quien-lista { display: grid; gap: 2px }
.quien { display: flex; align-items: flex-start; gap: 11px; padding: 11px 4px }
.quien + .quien { border-top: 1px solid var(--line-2) }
.quien.compacto { align-items: center; padding: 8px 4px }
.q-ini {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
  background: var(--brand-050); color: var(--brand);
}
/* Quien entra sin cuenta se marca en apagado: no es una persona que puedas
   reconocer, y darle el mismo peso que a las demás confunde. */
.quien.sin-cuenta .q-ini { background: var(--off-bg); color: var(--off) }
.quien.sin-cuenta b { color: var(--muted); font-weight: 600 }
.quien b { font-size: 14.5px }
.q-col { display: inline-flex; align-items: center; gap: 3px; margin-left: 7px;
         font-size: 11.5px; color: var(--muted) }
.q-hizo { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: 3px }
.q-acto { display: inline-flex; align-items: center; gap: 4px;
          font-size: 12px; color: var(--ink-2) }
.quien.compacto .q-acto { margin-left: 8px }
.q-cuando { flex-shrink: 0; font-size: 11.5px; color: var(--muted); white-space: nowrap;
            padding-top: 2px }
@media (max-width: 520px) {
  .quien { flex-wrap: wrap }
  .q-cuando { width: 100%; padding-left: 45px; padding-top: 0 }
}

/* ── Tirar para recargar, en la aplicación instalada ─────────────────────
   En el navegador lo dibuja Chrome. Esto es sólo para cuando el sitio se abre
   desde el icono, a pantalla completa, donde no hay ni gesto ni barra de
   direcciones a la que recurrir.                                          */
.recargar-tira {
  position: fixed; top: 0; left: 50%; z-index: 300;
  transform: translate(-50%, -60px); opacity: 0;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--card); box-shadow: var(--sh-2);
  border: 1px solid var(--line); pointer-events: none;
}
.rt-rueda {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid var(--brand-100); border-top-color: var(--brand);
}
/* Cuando ya se tiró lo suficiente, el círculo se enciende: es lo que dice
   «suelta ya» sin ninguna palabra. */
.recargar-tira.lista { border-color: var(--brand) }
.recargar-tira.lista .rt-rueda { border-color: var(--brand); border-top-color: var(--brand-100) }
.recargar-tira.girando .rt-rueda { animation: rt-giro .6s linear infinite }
@keyframes rt-giro { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) {
  .recargar-tira.girando .rt-rueda { animation: none }
}

/* ── Los filtros de las promociones ──────────────────────────────────────
   Dos filas y no una: la clase de promoción y el giro del negocio son
   preguntas distintas, y mezcladas en una sola tira de fichas no se sabe cuál
   quita cuál.                                                              */
.promo-filtros { display: grid; gap: 12px }
.promo-filtros .chips { gap: 7px }
.pf-giro { padding-top: 10px; border-top: 1px solid var(--line-2) }
.pf-giro .label { margin-bottom: 7px; color: var(--muted) }

/* =============================================================
   El menú del teléfono: una hoja que sube desde abajo
   -------------------------------------------------------------
   Sube desde donde está el dedo, no desde el otro extremo de la
   pantalla. La barra inferior queda tapada a propósito: mientras
   el menú está abierto, esa barra no sirve para nada.
   ============================================================= */
/* El <dialog> abierto con showModal() ya es position:fixed en la capa
   superior: se le dan los inset de abajo y con eso queda pegado al pie de la
   ventana. Antes el que se pegaba era un hijo con position:fixed dentro, y se
   quedaba 18 px por debajo del borde —dos sistemas de coordenadas puestos a
   negociar—. Con una pieza menos no hay nada que negociar. */
.menu-movil {
  position: fixed; inset: auto 0 0 0; margin: 0;
  border: 0; padding: 0;
  width: 100%; max-width: 100%;
  /* dvh mide el alto que SE VE. Con vh a secas, en un telefono con la
     barra del navegador a la vista la hoja se pasa de alto y el pie con
     «Salir» queda debajo del borde. El navegador que no entienda dvh se
     queda con la linea de arriba. */
  max-height: 88vh; max-height: 88dvh;
  background: transparent; overflow: visible;
}
.menu-movil::backdrop { background: rgba(20,10,8,.6) }
.mm-hoja {
  max-height: 88vh; max-height: 88dvh; display: flex; flex-direction: column;
  background: var(--card); color: var(--ink);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -18px 50px rgba(0,0,0,.4);
  animation: mm-sube .22s ease-out;
}
/* En una ventana ancha la hoja no se estira de lado a lado: una lista de
   menú de 1200 px de ancho no la lee nadie. */
@media (min-width: 620px) {
  .menu-movil { inset: auto 0 0 auto; width: 420px }
  .mm-hoja { border-radius: 20px 0 0 0 }
}
@keyframes mm-sube { from { transform: translateY(18px); opacity: .6 } }
@media (prefers-reduced-motion: reduce) { .mm-hoja { animation: none } }

/* El agarre de arriba: dice «esto se puede cerrar» sin ninguna palabra. */
.mm-agarre {
  width: 40px; height: 4px; border-radius: 3px; margin: 9px auto 2px;
  background: var(--line); flex-shrink: 0;
}

.mm-cabeza {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 16px 12px; border-bottom: 1px solid var(--line-2); flex-shrink: 0;
}
.mm-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 800; font-size: 15px;
  background: var(--brand-050); color: var(--brand);
}
.mm-cabeza b { display: block; font-size: 15px }
.mm-cabeza .hint { display: block; margin-top: 1px }
.mm-x {
  width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--off-bg); color: var(--ink-2); font-size: 21px; line-height: 1;
  flex-shrink: 0;
}

/* El cuerpo se desliza solo: la lista completa no cabe y la cabecera y el pie
   tienen que quedarse quietos. */
.mm-cuerpo { overflow-y: auto; overscroll-behavior: contain; padding: 6px 10px 10px }
.mm-grupo {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); padding: 14px 8px 6px;
}
.mm-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 8px; border-radius: 12px;
  text-decoration: none; color: inherit; font-size: 15px; font-weight: 600;
}
.mm-item:active, .mm-item:hover { background: var(--card-2) }
.mm-item.on { background: var(--brand-050); color: var(--brand-700) }
.mm-ico { color: var(--muted); flex-shrink: 0; display: flex }
.mm-item.on .mm-ico { color: var(--brand) }
.mm-n {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--brand); color: #fff; font-size: 11px; font-weight: 700;
  line-height: 20px; text-align: center; flex-shrink: 0;
}

/* La sugerencia: es lo único de la lista que va de la persona hacia nosotros,
   y llevaba enterrada en el pie de página, donde en un teléfono no llega
   nadie. Aquí lleva dos renglones y su propio color. */
.mm-item.destacado {
  align-items: flex-start; background: var(--brand-050);
  border: 1px solid var(--brand-100); margin: 4px 0;
}
.mm-item.destacado b { display: block; color: var(--brand-700) }
.mm-item.destacado .hint { display: block; margin-top: 2px; font-weight: 400 }
.mm-item.destacado .mm-ico { color: var(--brand); margin-top: 2px }
.mm-flecha { color: var(--brand); flex-shrink: 0; align-self: center }

.mm-pie {
  display: flex; gap: 8px; align-items: center; flex-shrink: 0;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line-2); background: var(--card-2);
  border-radius: 0 0 0 0;
}
.mm-pie .btn { flex: 1; justify-content: center }

/* ── Reportar una vacante desde el listado ───────────────────────────────
   Estaba sólo dentro de la ficha: quien veía un anuncio raro pasando la lista
   tenía que entrar, bajar hasta el final y salir. Tres pasos antes de poder
   avisar, que es justo cuando hay que quitar pasos de en medio.
   Va discreto —no compite con la vacante— pero se enciende al tocarlo.     */
.emp-reportar {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: var(--r-full);
  font-size: 11.5px; font-weight: 600; text-decoration: none;
  color: var(--muted); background: transparent;
  transition: .15s;
}
.emp-reportar:hover, .emp-reportar:focus-visible {
  background: #FBEAEC; color: #8E1020;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .emp-reportar:hover,
  :root:not([data-theme="light"]) .emp-reportar:focus-visible { background: #3A1A1C; color: #F08A8A }
}
:root[data-theme="dark"] .emp-reportar:hover,
:root[data-theme="dark"] .emp-reportar:focus-visible { background: #3A1A1C; color: #F08A8A }
/* El pie ya no son dos cosas a los extremos sino tres: el identificador y la
   fecha juntos a la izquierda, y el reporte al otro lado. */
.emp-tarjeta-pie { gap: 10px; flex-wrap: wrap }

/* ── La familia de iconos, ya sin emojis ─────────────────────────────────
   Al retirar los emojis, los huecos que los alojaban se quedaron pensados
   para un carácter de texto y no para un SVG. Esto los reajusta.          */
/* El dibujo grande de una pantalla vacía: antes era un emoji de 50 px, que
   pesa mucho más que un trazo. Se le baja el tono para que no compita con el
   título que va debajo. */
.empty .emoji { display: flex; justify-content: center; margin-bottom: 14px;
                color: var(--faint) }
.empty .emoji svg { width: 38px; height: 38px }
/* El icono de un aviso ya no es texto: se alinea con la primera línea. */
.alert .ico { display: flex; align-items: flex-start; padding-top: 1px; color: inherit }
/* El icono de un giro, en las listas y cabeceras */
.cat-ico { display: inline-flex; color: var(--brand) }
.rep-ico { display: inline-flex; color: var(--brand) }
/* En la ficha de un negocio sin foto, el icono del giro hace de marca de agua */
.biz-cover .placeholder { display: flex; align-items: center; justify-content: center;
                          color: var(--brand-100) }
/* Los iconos dentro de texto se alinean con la línea base, no con la caja:
   sin esto quedan un par de píxeles altos y el renglón parece torcido. */
.biz-cat svg, .hoy-txt svg, .q-acto svg, .mm-item svg { vertical-align: -2px }

/* ── Lista de productos con precio ────────────────────────────────────────
   Se lee como una carta de restaurante: nombre a la izquierda, precio a la
   derecha, alineados en columna. La foto es opcional y por eso no reserva
   espacio cuando no está: una rejilla con huecos grises se ve peor que una
   lista de puro texto bien puesta. */
.lista-productos { list-style: none; padding: 0; margin: 0; }
.lista-productos li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line-2);
}
.lista-productos li:last-child { border-bottom: 0; }
.lista-productos .lp-foto { flex: 0 0 auto; line-height: 0; }
.lista-productos .lp-foto img {
  width: 56px; height: 56px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--line);
}
.lista-productos .lp-txt { flex: 1 1 auto; min-width: 0; }
.lista-productos .lp-txt b { display: block; font-size: 15px; line-height: 1.35; }
.lista-productos .lp-txt .hint { display: block; margin-top: 2px; }
.lista-productos .lp-precio {
  flex: 0 0 auto; font-weight: 800; font-size: 15px; color: var(--brand);
  white-space: nowrap; padding-top: 1px;
}
.lista-productos li.agotado .lp-txt b { text-decoration: line-through; opacity: .6; }
.lista-productos li.agotado .lp-precio { color: var(--muted); }
.lista-productos li.agotado .lp-foto img { filter: grayscale(1); opacity: .55; }

/* ── Buscador de colonia en las zonas de reparto ─────────────────────────
   La lista flota sobre el renglón: la fila es una rejilla de seis columnas y
   empujar el contenido hacia abajo movería el costo, el mínimo y el resto de
   su sitio cada vez que alguien escribe una letra. */
.zona-colonia { position: relative; }
.zona-lista {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 260px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-2); padding: 4px;
}
.zona-op {
  display: block; width: 100%; text-align: left; border: 0; cursor: pointer;
  background: transparent; color: var(--ink); font: inherit; font-size: 14px;
  padding: 8px 10px; border-radius: var(--r-sm);
}
.zona-op:hover, .zona-op:focus { background: var(--brand-050); color: var(--brand-700); }
.zona-vacia { margin: 0; padding: 9px 10px; font-size: 13px; color: var(--muted); line-height: 1.45; }

/* ── Que el corazón flotante no se siente encima de un botón ─────────────
   El widget de apoyo vive fijo en la esquina inferior derecha, y ahí es donde
   el pie del formulario por pasos pone su botón «Continuar». Se tapaban: el
   botón seguía funcionando en la mitad que asomaba, pero pedirle a alguien que
   le atine a media pastilla no es una interfaz.

   La solución es reservarle el hueco al widget, no mover el widget: el widget
   tiene que estar donde el pulgar lo encuentra siempre, y el formulario es
   quien tiene sitio de sobra para correrse. */
.pasos-pie .row-between { padding-right: 132px; }
@media (max-width: 560px) {
  /* En teléfono el pie ya se apila y el widget queda por encima del menú
     inferior, no del botón. */
  .pasos-pie .row-between { padding-right: 0; }
}

/* La oferta en la fila de acciones de la tarjeta. Va en color de marca y no en
   el azul de «pagar» ni en el verde de WhatsApp: es la única de las cuatro que
   no es una forma de contacto sino un motivo para quedarse. */
.tcard-acciones .accion.oferta {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.tcard-acciones .accion.oferta .ico { color: #fff; }

/* Las etiquetas que pone el sistema con el giro del negocio. Se distinguen por
   el contorno y no por el relleno: con relleno distinto parecian inactivas, y
   son exactamente igual de reales que las que escribio el negocio. */
.chip.active.de-giro {
  background: var(--card);
  border: 1px dashed var(--brand);
  color: var(--brand);
}
/* Y la equis con ellas.
   Heredaba la de los chips rellenos —blanca sobre fondo de marca— y sobre el
   fondo claro de estos se quedaba blanca sobre blanco: invisible justo en el
   unico control que tiene la ficha. Es el mismo fallo que ya hubo una vez en
   «Tus etiquetas»; lo que lo repite es heredar el color del texto sin mirar el
   fondo que le toca debajo. */
.chip.active.de-giro .x { background: var(--brand-050); color: var(--brand); }
.chip.active.de-giro .x:hover,
.chip.active.de-giro .x:focus-visible { background: var(--brand); color: #fff; }
.chip.active.de-giro .x:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* =============================================================
   Emergencias y patrullas
   -------------------------------------------------------------
   La unica pantalla del sitio pensada para usarse con prisa, y
   eso manda sobre todo lo demas: el numero es lo grande, el
   contexto va debajo en pequeno, y el 911 no se parece a nada
   mas de la pantalla para que no haya que buscarlo.
   ============================================================= */
.emerg { display: grid; gap: 10px; margin-bottom: 22px; }
.emerg-btn {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--line);
  text-decoration: none; color: var(--ink); box-shadow: var(--sh-1);
  transition: transform .16s, box-shadow .16s;
}
.emerg-btn:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
  .emerg-btn:hover { box-shadow: var(--sh-2); }
}
/* El 911 en rojo de peligro y no en el de la marca: el bermellon esta en cada
   boton del sitio, y aqui hace falta que este no se parezca a ninguno. */
.emerg-btn.principal {
  background: var(--red); border-color: var(--red); color: #fff;
  box-shadow: 0 8px 22px rgba(161, 18, 33, .3);
}
.emerg-btn.principal .emerg-txt span { color: rgba(255,255,255,.85); }
.emerg-num {
  font-size: 30px; font-weight: 900; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums; flex: none; min-width: 62px;
}
.emerg-txt { flex: 1; display: grid; gap: 2px; min-width: 0; }
.emerg-txt b { font-size: 15px; font-weight: 700; }
.emerg-txt span { font-size: 12.6px; color: var(--muted); line-height: 1.4; }

/* --- Las patrullas ---------------------------------------------------- */
.patrullas { display: grid; gap: 12px; }
.patrulla {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 14px 16px 12px;
  display: grid; gap: 9px; box-shadow: var(--sh-1);
}
/* Sin comprobar se marca en el filo y no con un fondo distinto: un fondo de
   aviso en la mitad de las fichas convierte la lista en un muro amarillo y
   deja de leerse como aviso. */
.patrulla.sin { border-left: 3px solid var(--amber); }
.patrulla.viejo { border-left: 3px solid var(--amber); }
.patrulla.ok { border-left: 3px solid var(--green); }

.pt-cab { display: flex; align-items: flex-start; gap: 11px; }
.pt-ico {
  width: 38px; height: 38px; flex: none; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--brand-050); color: var(--brand);
}
.pt-cab h3 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.pt-corp { font-size: 12.8px; color: var(--muted); font-weight: 600; margin-top: 1px; }
.pt-km {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.4px; font-weight: 700; color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.pt-datos { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.8px; color: var(--muted); }
.pt-datos span { display: inline-flex; align-items: center; gap: 5px; }
.pt-notas { font-size: 13.2px; color: var(--ink-2); }

/* El boton de marcar ocupa el ancho entero: es lo que se viene a apretar, y
   con prisa nadie apunta a un boton de 120 px. */
.pt-llamar {
  width: 100%; justify-content: center; gap: 9px;
  font-size: 17px; font-weight: 800; letter-spacing: .01em;
  font-variant-numeric: tabular-nums; min-height: 48px;
}
.pt-confianza {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 12.2px; line-height: 1.45; color: var(--muted);
}
.pt-confianza.ok { color: var(--green); }
.pt-confianza.sin, .pt-confianza.viejo { color: var(--amber); }
.pt-confianza svg { flex: none; margin-top: 2px; }

/* --- La caja de carga por lote ---------------------------------------- */
.lote-formato {
  background: var(--card-2); border: 1px dashed var(--line);
  border-radius: var(--r-sm); padding: 9px 12px; margin-bottom: 10px;
  font-size: 12.6px; color: var(--ink-2); overflow-x: auto; white-space: nowrap;
}
.table tr.apagada td { opacity: .55; }

/* La entrada de emergencias del cajon. En rojo de peligro y no en el de la
   marca: el bermellon esta en todos los botones del sitio, y esta tiene que
   encontrarse sin leerla. */
.mm-item.urgente {
  align-items: flex-start; margin: 2px 0 8px;
  background: color-mix(in srgb, var(--red) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 32%, transparent);
}
.mm-item.urgente b { display: block; color: var(--red) }
.mm-item.urgente .hint { display: block; margin-top: 2px; font-weight: 400 }
.mm-item.urgente .mm-ico { color: var(--red); margin-top: 2px }

/* Un carril de fichas que se desliza en vez de repartirse en tres renglones.
   En la pantalla de emergencias eso importa: cada renglon de filtro empuja
   hacia abajo lo que se viene a apretar. */
.chips.carril {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity;
  margin-inline: calc(var(--pad-cont, 20px) * -1);
  padding-inline: var(--pad-cont, 20px);
  scroll-padding-inline: var(--pad-cont, 20px);
}
.chips.carril::-webkit-scrollbar { display: none; }
.chips.carril .chip { flex: none; scroll-snap-align: start; }

/* El aviso de «estas viendo solo tu colonia».
   -------------------------------------------------------------
   Va arriba de los resultados y no dentro del desplegable, porque un filtro
   que se aplica solo tiene que verse sin abrir nada. Es la contrapartida de
   que venga puesto: se dice, y la salida esta en la misma linea. */
.mi-zona {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; margin-bottom: 16px;
  border-radius: var(--r); background: var(--brand-050);
  border: 1px solid var(--brand-100);
  font-size: 14px; color: var(--ink-2);
}
.mi-zona .mz-ico { color: var(--brand); display: flex; flex: none; }
.mi-zona .mz-txt { flex: 1; min-width: 190px; }
.mi-zona .mz-txt b { color: var(--ink); }
.mi-zona .mz-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
/* Los botones van sobre el fondo tenue del aviso, y el gris de .btn-soft se
   confunde con el. Se les pone el fondo de tarjeta para que se lean como lo que
   son: cosas que se aprietan. */
.mi-zona .mz-acciones .btn {
  background: var(--card); border: 1px solid var(--brand-100); color: var(--brand-700);
}
.mi-zona .mz-acciones .btn:hover { border-color: var(--brand); }
@media (max-width: 560px) {
  .mi-zona .mz-acciones { width: 100%; }
  .mi-zona .mz-acciones .btn { flex: 1; justify-content: center; }
}

/* La colonia propia, arriba de la lista de colonias. Se separa con una linea
   porque no es una mas de la lista alfabetica: es la que mas se busca. */
.fopts a.propia {
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 4px; padding-bottom: 11px;
  font-weight: 700;
}
.fopts a.propia .em { color: var(--brand); }

/* La lista de seleccion multiple. El <select multiple> del navegador funciona
   con teclado y sin guiones, pero de fabrica se ve como un cuadro de 1998; lo
   que sigue solo lo pone a juego con el resto del formulario. */
.select-multi {
  height: auto; padding: 6px; line-height: 1.5;
  background-image: none;   /* la flecha del desplegable aqui sobra */
}
.select-multi option {
  padding: 8px 10px; border-radius: 7px; margin-bottom: 2px;
}
.select-multi option:checked {
  background: var(--brand) linear-gradient(0deg, var(--brand), var(--brand));
  color: #fff; font-weight: 600;
}

/* ── Tarjetas del directorio: alternancia y aviso de promoción ────────────
   Dos problemas distintos y por eso dos tratamientos distintos.

   La ALTERNANCIA resuelve que doce tarjetas iguales se lean como una mancha:
   un tono apenas distinto cada dos da dónde apoyar la vista. Es deliberadamente
   sutil —se nota al recorrer la lista, no al mirar una tarjeta suelta—.

   La PROMOCIÓN es lo contrario: tiene que saltar. Lleva el borde de la marca y
   un halo tenue, además de la cinta que ya estaba. Si el ajedrez gritara tanto
   como la oferta, no se distinguiría ninguna de las dos. */
.biz-card.alterna { background: var(--card-2); }
.biz-card.alterna .biz-cover { background: var(--crema); }

.biz-card.con-promo {
  border-color: var(--brand-100);
  box-shadow: var(--sh-1), 0 0 0 3px var(--brand-050);
}
.biz-card.con-promo:hover {
  border-color: var(--brand);
  box-shadow: var(--sh-2), 0 0 0 3px var(--brand-100);
}
/* Un filete de marca arriba: se ve incluso con la tarjeta a medio salir de la
   pantalla al desplazarse, cuando la cinta todavía no asoma. */
.biz-card.con-promo::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--brand); z-index: 5;
}

/* El logotipo de WhatsApp dentro de un boton. Es una silueta rellena, no un
   trazo, asi que no hereda nada de .ico-linea y necesita su propio alineado. */
.logo-wa { flex: none; }
.btn .logo-wa { margin-right: 0; }

/* El icono del giro en la cabecera de cada grupo de favoritos. Antes era un
   emoji a 24 px de tipografia; ahora es un trazo y necesita su propio color. */
.fav-giro-ico { display: flex; color: var(--brand); flex: none; }

/* La casilla de «incluir los que reparten ahi».
   -------------------------------------------------------------
   Es un enlace con pinta de casilla y no un <input>: el resto de la barra de
   filtros son enlaces —funciona con el teclado y sin guiones— y meter aqui un
   formulario habria sido el unico control de la barra que necesita enviarse. */
.col-reparto {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 8px 0 4px; padding: 10px 11px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  text-decoration: none; color: var(--ink); font-size: 13.5px;
}
.col-reparto .caja {
  width: 20px; height: 20px; flex: none; margin-top: 1px; border-radius: 6px;
  border: 2px solid var(--line); display: grid; place-items: center;
  color: transparent;
}
.col-reparto b { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.col-reparto .hint { display: block; margin-top: 2px; }
.col-reparto.on { border-color: var(--brand); background: var(--brand-050); }
.col-reparto.on .caja { background: var(--brand); border-color: var(--brand); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .col-reparto:hover { border-color: var(--brand-100); }
}

/* La casilla de reparto en el buscador: la misma idea que en el directorio,
   pero dentro de un formulario, asi que aqui si es un <input> de verdad. */
.col-reparto-check b { display: block; font-weight: 700; }
.col-reparto-check .hint { display: block; margin-top: 2px; font-weight: 400; }

/* =============================================================
   Los filtros, en un modal
   -------------------------------------------------------------
   Un boton en la pantalla y todo lo demas dentro. Antes la barra
   de filtros ocupaba tres renglones antes del primer negocio, y
   armar una busqueda de tres condiciones costaba tres recargas
   porque cada opcion era un enlace.
   ============================================================= */
.filtros-uno { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.filtros-abrir {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  font-weight: 700; text-decoration: none;
}
.filtros-abrir .n {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--brand); color: #fff; font-size: 12px; line-height: 20px;
  text-align: center; font-variant-numeric: tabular-nums;
}
.filtros-abrir.con { border-color: var(--brand); color: var(--brand-700); }

/* --- El dialogo ------------------------------------------------------- */
.fmodal {
  border: 0; padding: 0; background: none; max-width: none; max-height: none;
  width: 100%; height: 100%; color: var(--ink);
}
/* Sin JavaScript el dialogo se pinta con [open] y NO es modal: el navegador lo
   deja en el flujo del documento. Se coloca a mano encima de todo, para que se
   comporte igual con guiones y sin ellos. */
.fmodal[open] { position: fixed; inset: 0; z-index: 300; display: flex; }
.fmodal::backdrop { background: rgba(36, 19, 16, .55); backdrop-filter: blur(3px); }
.fmodal[open]:not(:modal) { background: rgba(36, 19, 16, .55); }

.fmodal-hoja {
  display: flex; flex-direction: column;
  width: 100%; max-width: 560px; margin: auto;
  max-height: 92dvh;              /* dvh y no vh: la barra del navegador movil */
  background: var(--card); border-radius: var(--r-xl);
  box-shadow: var(--sh-3); overflow: hidden;
}
@media (max-width: 640px) {
  /* En telefono sube desde abajo y se pega al borde: una hoja centrada con
     margenes deja tiras de fondo arriba y abajo que no sirven para nada. */
  .fmodal-hoja {
    margin: auto 0 0; max-width: none; max-height: 90dvh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
  }
}

.fmodal-cab {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.fmodal-cab b { display: flex; align-items: center; gap: 8px; font-size: 17px; flex: 1; }
.fmodal-x {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border: 0; background: none; color: var(--muted); border-radius: 50%; cursor: pointer;
}
.fmodal-x:hover { background: var(--card-2); color: var(--ink); }

.fmodal-cuerpo { overflow-y: auto; padding: 6px 0; flex: 1; overscroll-behavior: contain; }

/* --- Cada grupo, plegable -------------------------------------------- */
.fgrupo { border-bottom: 1px solid var(--line-2); }
.fgrupo:last-child { border-bottom: 0; }
.fgrupo > summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  min-height: 52px; padding: 8px 16px; list-style: none;
  font-weight: 700; font-size: 15px;
}
.fgrupo > summary::-webkit-details-marker { display: none; }
.fgrupo > summary .ico { color: var(--muted); display: flex; }
.fgrupo > summary .n {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--brand-050); color: var(--brand-txt, var(--brand));
  font-size: 12px; line-height: 20px; text-align: center; font-weight: 700;
}
.fgrupo > summary .flecha {
  width: 7px; height: 7px; flex: none;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .18s;
}
.fgrupo[open] > summary .flecha { transform: rotate(-135deg); }
.fgrupo-cuerpo { padding: 0 16px 14px; }

/* --- Las opciones ----------------------------------------------------- */
.fopciones { display: grid; gap: 2px; }
.fopciones.scroll { max-height: 260px; overflow-y: auto; }
.fopcion {
  display: flex; align-items: center; gap: 11px;
  min-height: 44px; padding: 7px 10px; border-radius: var(--r-sm);
  cursor: pointer; font-size: 14.4px;
}
.fopcion:hover { background: var(--card-2); }
.fopcion input { position: absolute; opacity: 0; pointer-events: none; }
.fopcion .marca {
  width: 20px; height: 20px; flex: none; border: 2px solid var(--line);
  display: grid; place-items: center;
}
/* Redondo si es de una sola opcion, cuadrado si se pueden varias. La forma es
   lo que dice cuantas se pueden elegir, antes de leer nada. */
.fopcion input[type="radio"] ~ .marca { border-radius: 50%; }
.fopcion input[type="checkbox"] ~ .marca { border-radius: 6px; }
.fopcion input:checked ~ .marca { border-color: var(--brand); background: var(--brand); }
.fopcion input[type="radio"]:checked ~ .marca::after {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff;
}
.fopcion input[type="checkbox"]:checked ~ .marca::after {
  content: ''; width: 9px; height: 5px; margin-top: -2px;
  border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg);
}
.fopcion input:focus-visible ~ .marca { box-shadow: 0 0 0 3px var(--brand-100); }
/* La fila marcada.
   -------------------------------------------------------------
   `.on` lo pone el servidor con lo que ya estaba puesto, asi que al marcar una
   casilla la fila no se enteraba: cambiaba el cuadrito de 20 px y nada mas. Con
   :has() responde al instante, que es lo que hace falta cuando estas eligiendo
   cinco colonias y quieres ver cuales llevas.

   Se conservan las dos: en un navegador que no conozca :has, la regla se ignora
   y queda el `.on` del servidor, que es lo que habia. */
.fopcion.on,
.fopcion:has(input:checked) { background: var(--brand-050); }
.fopcion .et { display: block; }
.fopcion .hint { display: block; margin-top: 1px; }
.fopcion .num {
  margin-left: auto; font-size: 11.5px; color: var(--muted);
  background: var(--card-2); border-radius: 999px; padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}

/* --- El pie, pegado -------------------------------------------------- */
.fmodal-pie {
  display: flex; gap: 10px; flex-shrink: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); background: var(--card);
}
.fmodal-pie .btn { min-height: 46px; }
.fmodal-pie .grow { flex: 1; justify-content: center; }

/* =============================================================
   Los menus del panel, en modal cuando la pantalla es chica
   -------------------------------------------------------------
   En telefono la barra lateral era una tira horizontal de fichas.
   Estaba razonado —apilar veinte renglones empujaba el contenido
   dos pantallas abajo— pero con treinta y dos entradas se recorre
   a ciegas: no se ve cuantas quedan ni como se agrupan, y buscar
   «Respaldos» es deslizar hasta topar.

   En ESCRITORIO no cambia nada. Un panel se usa con la pantalla
   entera y el menu fijo a la izquierda es lo correcto ahi.
   ============================================================= */

/* --- Telefono: el boton ---------------------------------------------- */
.nav-abrir {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 56px; margin-bottom: 16px; padding: 10px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); cursor: pointer; text-align: left; color: var(--ink);
}
.nav-abrir b { display: block; font-size: 15px; }
.nav-abrir .hint { display: block; margin-top: 1px; }
.nav-abrir .grow { flex: 1; min-width: 0; }
.nav-abrir .grow .hint, .nav-abrir b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-abrir > .ico-linea:first-child { color: var(--brand); flex: none; }
.nav-abrir > .ico-linea:last-child { color: var(--muted); flex: none; transform: rotate(90deg); }

/* --- Escritorio: el <dialog> deja de serlo ---------------------------
   VA DESPUES de las reglas del boton, no antes. Con la misma especificidad
   gana lo que se declara al final, y puesto arriba el `display: flex` del
   boton se comia este `display: none`: en escritorio salia el boton, y como
   entonces era hijo directo de la rejilla ocupaba la primera celda y empujaba
   el menu a la columna del contenido. Se vio en pantalla.

   `display: contents` saca al dialogo y a su hoja del arbol de cajas, y el
   <aside> queda como hijo directo de la rejilla, exactamente donde estaba.
   Sin esto habria que pintar el menu dos veces, y dentro de un mes una de las
   dos copias estaria vieja. */
@media (min-width: 1001px) {
  .nav-modal, .nav-modal-hoja { display: contents; }
  .nav-modal-cab, .nav-abrir { display: none; }
}

@media (max-width: 1000px) {
  .nav-modal {
    border: 0; padding: 0; background: none;
    max-width: none; max-height: none; width: 100%; height: 100%; color: var(--ink);
  }
  .nav-modal[open] { position: fixed; inset: 0; z-index: 300; display: flex; }
  .nav-modal::backdrop { background: rgba(36, 19, 16, .55); backdrop-filter: blur(3px); }
  .nav-modal[open]:not(:modal) { background: rgba(36, 19, 16, .55); }

  .nav-modal-hoja {
    display: flex; flex-direction: column;
    width: 100%; max-width: 520px; margin: auto 0 0; max-height: 88dvh;
    background: var(--card); border-radius: var(--r-xl) var(--r-xl) 0 0;
    box-shadow: var(--sh-3); overflow: hidden;
  }
  .nav-modal-cab {
    display: flex; align-items: center; gap: 12px; flex-shrink: 0;
    padding: 14px 16px; border-bottom: 1px solid var(--line);
  }
  .nav-modal-cab b { flex: 1; font-size: 17px; }

  /* Dentro del modal el menu vuelve a ser una LISTA, no la tira: aqui hay
     sitio de sobra a lo alto y lo que hace falta es poder leer los grupos. */
  .nav-modal .sidebar {
    position: static; display: block; overflow-y: auto; overflow-x: visible;
    margin: 0; padding: 6px 10px calc(14px + env(safe-area-inset-bottom, 0px));
    border: 0; border-radius: 0; background: none;
    flex: 1; overscroll-behavior: contain;
  }
  .nav-modal .sidebar .group,
  .nav-modal .sidebar .grupo-pleg > summary {
    display: flex; position: static; margin: 0;
    padding: 14px 12px 6px; font-size: 10.6px; background: none;
    border: 0; min-height: 0; writing-mode: horizontal-tb;
  }
  .nav-modal .sidebar .group:first-child { display: flex; }
  .nav-modal .sidebar a {
    display: flex; flex-direction: row; align-items: center; gap: 11px;
    min-height: 48px; width: auto; margin: 0; padding: 10px 12px;
    border: 0; border-radius: var(--r-sm); font-size: 14.8px;
    text-align: left; white-space: normal;
  }
  .nav-modal .sidebar a:first-of-type, .nav-modal .sidebar a:last-child { margin: 0; }
  .nav-modal .sidebar a .count { margin-left: auto; position: static; }
}

/* =============================================================
   La ficha en tarjetas
   -------------------------------------------------------------
   Medido antes: 9 568 px, doce pantallas de telefono, diecinueve
   bloques. Para saber a que hora abren habia que pasar por la
   descripcion, el menu, las etiquetas y las fotos.

   Cada tarjeta lleva la RESPUESTA en el renglon de abajo. Con
   nueve titulos sin respuesta hay que abrir los nueve para dar
   con el que sirve; con la respuesta puesta, casi nunca hay que
   abrir ninguno.
   ============================================================= */
.fopts-rejilla { display: grid; gap: 10px; }
@media (min-width: 620px) {
  .fopts-rejilla { grid-template-columns: 1fr 1fr; }
}

.fopt {
  display: flex; align-items: center; gap: 13px; width: 100%;
  min-height: 64px; padding: 12px 14px; text-align: left;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
  color: var(--ink); cursor: pointer;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.fopt:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) {
  .fopt:hover { border-color: var(--brand-100); box-shadow: var(--sh-2); }
}
.fopt-ico {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--brand-050); color: var(--brand);
}
.fopt .grow { flex: 1; min-width: 0; }
.fopt b { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.25; }
/* La respuesta. Va en el color del texto secundario y no del apagado: no es un
   detalle de relleno, es la mitad del motivo por el que existe la tarjeta. */
.fopt-res {
  display: block; margin-top: 2px; font-size: 13px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fopt-flecha {
  width: 8px; height: 8px; flex: none;
  border-right: 2px solid var(--muted); border-top: 2px solid var(--muted);
  transform: rotate(45deg);
}

/* El modal de cada seccion reusa el de los menus; solo cambia el relleno del
   cuerpo, porque dentro va contenido de verdad y no una lista de enlaces. */
.fsec-cuerpo {
  overflow-y: auto; overscroll-behavior: contain; flex: 1;
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px));
}
/* Las secciones traian su propia tarjeta —borde, sombra, relleno— porque vivian
   sueltas en la pagina. Dentro del modal esa tarjeta seria una caja dentro de
   otra caja. */
.fsec-cuerpo .ficha-seccion { border: 0; box-shadow: none; padding: 0; background: none; }
.fsec-cuerpo .ficha-h { margin-bottom: 10px; }
@media (min-width: 1001px) {
  /* En escritorio el modal SI es modal: aqui no hay barra lateral que respetar
     como en los menus del panel, y la ficha cabe entera en la pantalla. */
  .fsec-modal { display: none; }
  .fsec-modal[open] { display: flex; position: fixed; inset: 0; z-index: 300; }
  .fsec-modal .nav-modal-hoja {
    max-width: 620px; margin: auto; max-height: 86dvh;
    border-radius: var(--r-xl);
  }
  .fsec-modal .nav-modal-cab { display: flex; }
}

/* =============================================================
   La hoja de «Mas» de cada renglon
   -------------------------------------------------------------
   Cada renglon del listado tenia seis botones iguales. Con doce
   renglones son setenta y dos cosas que se pueden tocar, todas
   del mismo tamano: la pantalla no dice cual es la que se usa.

   Se quedan tres —WhatsApp, como llegar, guardar— y lo demas
   entra aqui, con el nombre escrito. En un icono suelto de
   quince pixeles nadie sabe si la tarjeta es «pagar» o «numero
   de cuenta»; en un renglon que dice «Numero de cuenta», si.

   OJO con `display: contents`: en escritorio `.nav-modal` se
   disuelve para que el menu lateral quede en la rejilla. Un
   dialogo de acciones NO puede heredar eso —se le saldria el
   contenido a la pagina, siempre visible— asi que `.hoja-abajo`
   lo devuelve a ser un dialogo de verdad, igual que `.fsec-modal`.
   ============================================================= */
@media (min-width: 1001px) {
  .hoja-abajo { display: none; }
  .hoja-abajo[open] { display: flex; position: fixed; inset: 0; z-index: 320; }
  .hoja-abajo .nav-modal-hoja {
    display: flex; flex-direction: column;
    width: 100%; max-width: 420px; margin: auto; max-height: 86dvh;
    background: var(--card); border-radius: var(--r-xl);
    box-shadow: var(--sh-3); overflow: hidden;
  }
  .hoja-abajo .nav-modal-cab {
    display: flex; align-items: center; gap: 12px; flex-shrink: 0;
    padding: 14px 16px; border-bottom: 1px solid var(--line);
  }
  .hoja-abajo .nav-modal-cab b { flex: 1; font-size: 17px; }
  .hoja-abajo::backdrop { background: rgba(36, 19, 16, .55); }
}

.bf-mas-lista {
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain; flex: 1;
  padding: 6px 8px calc(12px + env(safe-area-inset-bottom, 0px));
}
/* Renglones de 52 px: son opciones que se tocan con el pulgar, no una lista
   para leer. El minimo que se puede acertar sin mirar son 44. */
.bf-mas-lista > a,
.bf-mas-lista > button {
  display: flex; align-items: center; gap: 13px; width: 100%;
  min-height: 52px; padding: 10px 12px; margin: 0;
  background: none; border: 0; border-radius: var(--r-sm);
  color: var(--ink); font-size: 15px; text-align: left; cursor: pointer;
}
.bf-mas-lista > a:active,
.bf-mas-lista > button:active { background: var(--card-2); }
@media (hover: hover) and (pointer: fine) {
  .bf-mas-lista > a:hover,
  .bf-mas-lista > button:hover { background: var(--card-2); }
}
.bf-mas-lista svg { color: var(--brand); flex: none; }
.bf-mas-lista .grow { flex: 1; min-width: 0; }
.bf-mas-n {
  flex: none; min-width: 22px; padding: 1px 7px; border-radius: 999px;
  background: var(--brand-050); color: var(--brand-txt);
  font-size: 12px; font-weight: 700; text-align: center;
}
/* Reportar no es una accion mas: se separa y se apaga para que nadie la
   apriete de paso. */
.bf-mas-flojo {
  margin-top: 4px !important; border-top: 1px solid var(--line);
  border-radius: 0 !important; color: var(--muted) !important;
}
.bf-mas-flojo svg { color: var(--muted) !important; }

/* El aviso de ubicacion activa, en un renglon. Confirma algo que ya paso: no
   necesita el peso de una tarjeta encima de los resultados. */
.geo-linea {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  max-width: 760px; margin: 0 auto 12px; padding: 0 2px;
  font-size: 13.2px; color: var(--ink-2);
}
.geo-linea svg { color: var(--brand); flex: none; }
.geo-linea .grow { flex: 1; min-width: 140px; }
.geo-linea .lnk {
  background: none; border: 0; padding: 4px 2px; cursor: pointer;
  color: var(--brand-txt); font-size: 13px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}

/* El «+31 palabras» de las etiquetas: es una ficha mas, pero no lleva a
   ninguna busqueda, asi que se distingue con el color del texto apagado. */
.chip-mas {
  background: none; cursor: pointer;
  color: var(--muted); font-weight: 600;
  border: 1px dashed var(--line);
}
/* Una ficha oculta no se muestra ni aunque .chips ponga display en sus hijos:
   `[hidden]` pierde contra cualquier `display`, y ese es el error que deja las
   treinta y siete a la vista con el boton puesto encima. */
.chips [hidden] { display: none !important; }

/* Las dos acciones grandes de la ficha, y la segunda fila.
   -------------------------------------------------------------
   `auto-fit minmax(140px)` reparte por si solo, pero con dos botones y un
   telefono de 360 los deja de 165 px cada uno y en una sola fila apretada.
   Con dos columnas fijas ocupan la mitad exacta y se ven como lo que son: la
   pareja de acciones principales. */
.action-grid.dos { grid-template-columns: 1fr 1fr; }

.action-fila2 {
  display: flex; gap: 10px; margin-top: 10px;
}
/* Mas chicas que las de arriba, a proposito: llamar y «mas» no compiten con
   WhatsApp y como llegar, van debajo y en segundo plano. */
.action-fila2 .af2 {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-height: var(--toque, 44px); padding: 8px 12px;
  background: none; border: 1px solid var(--line); border-radius: var(--r-md, 12px);
  color: var(--ink-2); font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.action-fila2 .af2 svg { color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .action-fila2 .af2:hover { border-color: var(--brand-100); color: var(--ink); }
}

/* «Guardar» dentro de la segunda fila de la ficha. Viene envuelto en su
   formulario, asi que el ancho hay que pasarlo de fuera hacia dentro: el
   <span>, el <form> y el <button> tienen que estirarse los tres, o el boton
   se queda del ancho de su texto mientras los otros dos ocupan su tercio. */
.action-fila2 .af2-guardar,
.action-fila2 .af2-guardar form { flex: 1; display: flex; }
.action-fila2 .af2-guardar .btn {
  flex: 1; min-height: var(--toque, 44px); justify-content: center;
  font-size: 14.5px;
}

/* Cada giro de «Categorías», como acordeón.
   -------------------------------------------------------------
   El <summary> lleva la cabecera de la tarjeta, así que hay que quitarle el
   triangulito que pone el navegador —viene con su propio color y su propio
   sitio— y poner la flecha del sitio, que gira al abrir. */
.cat-rama > summary { cursor: pointer; list-style: none; }
.cat-rama > summary::-webkit-details-marker { display: none; }
.cat-rama > summary::marker { content: ''; }
.cat-flecha {
  width: 9px; height: 9px; flex: none; margin-right: 4px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .18s;
}
.cat-rama[open] > summary .cat-flecha { transform: rotate(-135deg); }
@media (hover: hover) and (pointer: fine) {
  .cat-rama > summary:hover { filter: brightness(.98); }
}
/* El area de toque de la cabecera: es el control que abre y cierra. */
.cat-rama > summary { min-height: var(--toque, 44px); }

/* Las columnas del pie, como acordeón en teléfono.
   -------------------------------------------------------------
   Nacen ABIERTAS en el HTML y se cierran desde el guion cuando la pantalla es
   estrecha. Al reves no funciona: un <details> cerrado no se puede abrir desde
   la hoja de estilos —el navegador no esconde a los hijos con un `display`
   que se pueda pisar, los saca del arbol— y en escritorio el pie salia con
   los tres titulos y ni un solo enlace debajo. Se vio en pantalla.

   Naciendo abiertas, ademas, quien tenga el guion apagado ve el pie entero,
   que es como estaba antes: el lado seguro del error. */
.foot-col > summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; cursor: pointer; list-style: none;
  min-height: var(--toque, 44px);
}
.foot-col > summary::-webkit-details-marker { display: none; }
.foot-col > summary::marker { content: ''; }
.foot-col > summary h4 { margin: 0; }
.foot-flecha {
  width: 8px; height: 8px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); opacity: .6; transition: transform .18s;
}
.foot-col[open] > summary .foot-flecha { transform: rotate(-135deg); }

@media (min-width: 901px) {
  /* En escritorio no se pliegan: las tres columnas caben de sobra. */
  .foot-col > summary { pointer-events: none; }
  .foot-flecha { display: none; }
}

/* Las cifras del panel, de dos en dos en el teléfono.
   -------------------------------------------------------------
   `minmax(190px, 1fr)` deja UNA columna en 360 px: las cuatro cifras se
   apilaban a pantalla completa cada una, y para ver «vieron tu cuenta» había
   que recorrer cuatro pantallas de números. Cuatro cifras se comparan entre
   sí o no dicen nada, y para compararlas hay que verlas juntas. */
@media (max-width: 620px) {
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { padding: 12px; }
  .stat .k { font-size: 11.6px; }
  .stat .v { font-size: 26px; }
  /* El renglón que explica cada cifra se queda: sin él, «134» y «1» son dos
     números sueltos. Pero más chico, que es lo que permite ponerlas en dos
     columnas sin que la tarjeta crezca a lo alto. */
  .stat .d { font-size: 11.4px; line-height: 1.35; }
}

/* El registro por pasos: la barra de arriba y los botones.
   -------------------------------------------------------------
   La barra existe para contestar «¿cuánto falta?». Sin ella, partir un
   formulario en tres es esconderle a la gente dos tercios del trabajo. */
.pasos-barra {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
}
.pasos-barra .pb-txt { font-size: 13px; color: var(--muted); font-weight: 600; flex: none; }
.pasos-barra .pb-txt b { color: var(--ink); }
.pasos-barra .pb-riel {
  flex: 1; height: 5px; border-radius: 999px; background: var(--line); overflow: hidden;
}
.pasos-barra .pb-lleno {
  display: block; height: 100%; width: 33%; border-radius: 999px;
  background: var(--brand); transition: width .25s;
}
.paso-botones { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.paso-botones .grow { flex: 1; }
.paso-botones .paso-atras { flex: none; min-height: var(--toque, 44px); }

/* Las promociones de la portada: dos, y sólo lo que decide.
   Título, negocio y hasta cuándo dura. La descripción entera está en la ficha,
   a un toque; en un listado no decide nada y ocupa cuatro renglones. */
.promos-inicio { display: grid; gap: 10px; }
@media (min-width: 620px) { .promos-inicio { grid-template-columns: 1fr 1fr; } }
.promo-mini {
  display: flex; flex-direction: column; gap: 5px;
  padding: 14px; border-radius: var(--r-lg, 16px);
  background: var(--card); border: 1px solid var(--line);
  color: var(--ink); box-shadow: var(--sh-1);
}
.promo-mini .pm-cab { display: flex; align-items: flex-start; gap: 8px; }
.promo-mini .pm-cab svg { color: var(--brand); flex: none; margin-top: 2px; }
.promo-mini .pm-cab b { font-size: 15.5px; line-height: 1.3; }
.promo-mini .pm-neg { font-size: 13.4px; color: var(--ink-2); }
.promo-mini .pm-cuando {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.6px; color: var(--muted);
}
@media (hover: hover) and (pointer: fine) {
  .promo-mini:hover { border-color: var(--brand-100); box-shadow: var(--sh-2); }
}

/* La invitación a crear cuenta, en tres renglones.
   Ocupaba una tarjeta con icono de 44 px, ceja, título y párrafo de dos
   líneas para decir lo mismo. */
.registro-corto {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  margin-top: 14px; padding: 16px; border-radius: var(--r-lg, 16px);
  background: var(--card); border: 1px solid var(--line);
}
.registro-corto b { font-size: 16px; }
.registro-corto span { font-size: 13.6px; color: var(--ink-2); }
.registro-corto .btn { margin-top: 6px; }

/* «Cerca de mí»: pedir la ubicación en un renglón.
   La tarjeta completa —título, dos líneas, nota y dos botones— mide 160 px y
   en la portada se come el sitio entre el buscador y las categorías, que es
   lo que la gente vino a usar. Aquí sólo hace falta nombrar lo que hace. */
.geo-chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: var(--toque, 44px); margin-top: 10px; padding: 8px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink); font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.geo-chip svg { color: var(--brand); }
@media (hover: hover) and (pointer: fine) {
  .geo-chip:hover { border-color: var(--brand-100); }
}
.geo-chip[hidden] { display: none !important; }

/* Las cuatro preguntas de «Ayuda». Reusan la tarjeta de la ficha —título con
   su respuesta debajo y flecha— porque hacen exactamente lo mismo: son una
   puerta que ya dice lo que hay detrás. */
.ayuda-rejilla { display: grid; gap: 10px; max-width: 620px; margin-inline: auto; }

/* La portada del panel: qué me toca hoy.
   -------------------------------------------------------------
   Se entraba a un menú y a cuatro cifras. Un menú dice dónde están las cosas,
   no cómo va el negocio, y quien abre su panel viene a saber si tiene algo que
   atender. Cada tarjeta lleva el número Y qué hacer con él: una cifra sola no
   es información, es un dato. */
.panel-hoy { display: grid; gap: 10px; }
@media (min-width: 780px) { .panel-hoy { grid-template-columns: repeat(3, 1fr); } }

.panel-hoy .ph {
  display: flex; align-items: center; gap: 13px;
  min-height: 68px; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg, 16px); box-shadow: var(--sh-1); color: var(--ink);
}
.panel-hoy .ph-ico {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--brand-050); color: var(--brand);
}
.panel-hoy .ph .grow { flex: 1; min-width: 0; }
.panel-hoy .ph b { display: block; font-size: 15.5px; line-height: 1.25; }
.panel-hoy .ph span span,
.panel-hoy .ph .grow > span {
  display: block; margin-top: 2px; font-size: 12.8px; color: var(--ink-2);
}
/* Sólo lo que espera respuesta de una persona se pinta en el color que
   reclama. Si todo lo urgente fuera rojo, el rojo dejaría de significar
   «esto». */
.panel-hoy .ph.urge { border-color: var(--brand-100); background: var(--brand-050); }
.panel-hoy .ph.urge .ph-ico { background: var(--brand); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .panel-hoy .ph:hover { border-color: var(--brand-100); box-shadow: var(--sh-2); }
}

.panel-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.panel-acciones .btn { flex: 1 1 auto; min-height: var(--toque, 44px); justify-content: center; }
/* Son enlaces, pero se leen como tarjetas: subrayadas, las tres se veían como
   un bloque de texto enlazado y no como tres cosas que se tocan. La flecha de
   la derecha y el color del fondo ya dicen que llevan a algún sitio. */
.panel-hoy .ph, .panel-hoy .ph:hover { text-decoration: none; }
.panel-hoy .ph b, .panel-hoy .ph .grow > span { text-decoration: none; }

/* El panel de administración: lo pendiente arriba, la actividad al final.
   -------------------------------------------------------------
   Abría con nueve cifras de tamaño del directorio —cuántos negocios, cuántas
   etiquetas, cuántas búsquedas— y después las gráficas. Todas ciertas, y
   ninguna contesta la pregunta con la que un administrador abre esto:
   «¿hay algo que atender?». */
.adm-pend { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.adm-pend .adm-p {
  display: flex; align-items: center; gap: 9px;
  min-height: var(--toque, 44px); padding: 10px 14px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; color: var(--ink); text-decoration: none;
}
.adm-pend .adm-p-ico { color: var(--brand); display: flex; }
.adm-pend .adm-p b { font-size: 18px; font-weight: 900; letter-spacing: -.02em; }
.adm-pend .adm-p > span:last-child { font-size: 13.4px; color: var(--ink-2); }
.adm-pend .adm-p.todo { border-style: dashed; color: var(--brand-txt); }
.adm-pend .adm-p.todo .grow { font-size: 13.6px; font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .adm-pend .adm-p:hover { border-color: var(--brand-100); }
}
.adm-aldia {
  display: flex; align-items: center; gap: 9px; margin-bottom: 16px;
  padding: 12px 14px; border-radius: var(--r-md, 12px);
  background: var(--card); border: 1px solid var(--line);
  font-size: 14px; color: var(--ink-2);
}
.adm-aldia svg { color: var(--green, #16A34A); }

/* Un administrador quiere densidad, no aire: renglones cortos, hora a la
   izquierda alineada, y quién lo hizo en segundo plano. */
.adm-act { display: flex; flex-direction: column; }
.adm-ev {
  display: flex; align-items: baseline; gap: 12px;
  padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.6px;
}
.adm-ev:first-child { border-top: 0; }
.adm-ev-h { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.adm-ev .grow { flex: 1; min-width: 0; }
.adm-ev-q { color: var(--muted); }
.adm-ev-q::before { content: ' · '; }

/* =============================================================
   Movimiento — lo que se construyó esta sesión
   -------------------------------------------------------------
   Todo lo de aquí aparecía de golpe: la hoja de «Más», los pasos
   del registro, las tarjetas del panel, los acordeones. Aparecer
   de golpe no es neutral: obliga a buscar qué cambió.

   Tres reglas, y ninguna es decorativa:

     1. Lo que SUBE desde abajo sube de verdad. La hoja sale del
        botón que se tocó, y verla venir de ahí es lo que dice
        que sigues en la misma pantalla y no en otra.
     2. Lo que ENTRA en una lista entra escalonado, pero poco:
        el escalonado dice «esto es una lista de cosas», no
        «mira qué bonito». Por eso son 40 ms y no 200.
     3. Nada se mueve más de 300 ms. Pasado ese punto la
        animación deja de explicar y empieza a hacer esperar.

   Y todo se apaga con `prefers-reduced-motion` al final del
   archivo. Quien pidió menos movimiento lo pidió por algo.
   ============================================================= */

/* --- La hoja de abajo: sube desde donde está el pulgar --------------- */
@keyframes hojaSube { from { transform: translateY(100%); } to { transform: none; } }
@keyframes velo     { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 1000px) {
  .nav-modal[open] .nav-modal-hoja {
    animation: hojaSube .26s cubic-bezier(.22, 1, .36, 1);
  }
}
.nav-modal[open]::backdrop { animation: velo .2s ease-out; }
/* En escritorio la hoja de acciones es un modal centrado, así que crece desde
   su sitio en vez de subir: subir 100 % de la pantalla para acabar en el
   centro es un viaje que no explica nada. */
@media (min-width: 1001px) {
  .hoja-abajo[open] .nav-modal-hoja,
  .fsec-modal[open] .nav-modal-hoja {
    animation: modalIn .22s ease-out;
  }
}

/* --- Las tarjetas del panel y de la ficha, escalonadas --------------- */
@keyframes entraCorto { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.panel-hoy .ph,
.fopts-rejilla .fopt,
.promos-inicio .promo-mini,
.ayuda-rejilla .fopt {
  animation: entraCorto .3s cubic-bezier(.22, 1, .36, 1) both;
}
/* Sólo los seis primeros llevan retardo. A partir de ahí el escalonado ya
   no informa —nadie cuenta hasta doce— y sí hace esperar al último. */
.panel-hoy .ph:nth-child(2),
.fopts-rejilla .fopt:nth-child(2),
.promos-inicio .promo-mini:nth-child(2),
.ayuda-rejilla .fopt:nth-child(2) { animation-delay: .04s; }
.panel-hoy .ph:nth-child(3),
.fopts-rejilla .fopt:nth-child(3),
.ayuda-rejilla .fopt:nth-child(3) { animation-delay: .08s; }
.fopts-rejilla .fopt:nth-child(4),
.ayuda-rejilla .fopt:nth-child(4) { animation-delay: .12s; }
.fopts-rejilla .fopt:nth-child(5) { animation-delay: .16s; }
.fopts-rejilla .fopt:nth-child(6) { animation-delay: .2s; }

/* --- Los pasos del registro: entran por donde vienen ----------------- */
@keyframes pasoAdelante { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes pasoAtras    { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

/* Sólo los pasos del registro. Los del asistente del negocio llevan la misma
   clase y el mismo atributo —ahí `data-paso` es el NOMBRE del paso— y tienen
   su propio motor; animarlos desde aquí es meter mano en algo que ya se
   mueve solo. */
form:not([data-pasos]) > .paso[data-paso] { animation: pasoAdelante .26s cubic-bezier(.22, 1, .36, 1); }
/* Al volver, el paso entra por la izquierda: es la diferencia entre «avancé»
   y «me devolvieron», y sin ella los dos movimientos se ven iguales. */
form:not([data-pasos]) > .paso[data-paso].vuelve { animation-name: pasoAtras; }

/* --- «+31 palabras»: las que salen, salen ---------------------------- */
.chips .chip.recien { animation: entraCorto .24s ease-out both; }

/* --- Los acordeones ------------------------------------------------- */
/* La flecha ya gira. Lo que faltaba es que el contenido no aparezca de golpe:
   sin esto, abrir «Comida y bebida» mete veinte fichas de una vez y la página
   da un salto. */
.cat-rama[open] > .card-body,
.foot-col[open] > a,
.foot-col[open] > .pie-apoyo,
.grupo-pleg[open] > a { animation: entraCorto .24s ease-out both; }

/* --- Los renglones que llegan al bajar ------------------------------- */
/* El listado carga de doce en doce. Sin esto, los doce nuevos aparecen de
   golpe debajo y no hay forma de saber cuáles son nuevos. */
.bfila.recien { animation: entraCorto .3s cubic-bezier(.22, 1, .36, 1) both; }

/* --- Guardar un negocio: que se note que se guardó ------------------- */
@keyframes guardado {
  0%   { transform: none; }
  40%  { transform: scale(1.3) rotate(-8deg); }
  100% { transform: none; }
}
.btn-icon.guardando svg { animation: guardado .34s cubic-bezier(.22, 1, .36, 1); }

/* --- El contador de filtros, cuando cambia --------------------------- */
@keyframes late { 0% { transform: none; } 45% { transform: scale(1.22); } 100% { transform: none; } }
.filtros-abrir .n.cambia,
.count.cambia { animation: late .3s ease-out; }

/* --- Nada de esto es obligatorio ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nav-modal[open] .nav-modal-hoja,
  .nav-modal[open]::backdrop,
  .hoja-abajo[open] .nav-modal-hoja,
  .fsec-modal[open] .nav-modal-hoja,
  .panel-hoy .ph, .fopts-rejilla .fopt, .promos-inicio .promo-mini,
  .ayuda-rejilla .fopt, .paso[data-paso], .chips .chip.recien,
  .cat-rama[open] > .card-body, .foot-col[open] > a,
  .foot-col[open] > .pie-apoyo, .grupo-pleg[open] > a,
  .bfila.recien, .btn-icon.guardando svg,
  .filtros-abrir .n.cambia, .count.cambia {
    animation: none !important;
  }
}


/* =============================================================
   Los grupos del menú lateral, plegables
   -------------------------------------------------------------
   Agrupar ya decía dónde buscar. Plegar es lo que hace que no
   haya que recorrer los veintiocho renglones para llegar al que
   se usa: un grupo cerrado es un renglón, abierto son ocho.

   Estaba escrito sólo en la hoja del diseño 3, así que en los
   otros dos el navegador pintaba su triangulito por omisión y
   la flecha no giraba.
   ============================================================= */
/* --- El menu lateral, plegable ---------------------------------------- */
.grupo-pleg { border: 0; }
.grupo-pleg > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
  min-height: 34px; user-select: none;
}
.grupo-pleg > summary::-webkit-details-marker { display: none; }
/* La flecha se dibuja, no se pone con un caracter: un « > » de texto cambia de
   forma con la tipografia y no gira. */
.grupo-pleg > summary::before {
  content: ''; width: 6px; height: 6px; flex: none;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: rotate(-45deg); transition: transform .18s var(--sal, ease);
  margin-right: 2px;
}
.grupo-pleg[open] > summary::before { transform: rotate(45deg); }
.grupo-pleg > summary .count { margin-left: auto; }
@media (hover: hover) and (pointer: fine) {
  .grupo-pleg > summary:hover { color: var(--brand-txt); }
}


/* Lo que hay dentro entra, no aparece. Sin esto, abrir «Moderar» mete siete
   renglones de golpe y la lista da un salto. */
.grupo-pleg[open] > a { animation: entraCorto .22s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .grupo-pleg[open] > a { animation: none !important; }
}

/* Los negocios de muestra, marcados como tales.
   -------------------------------------------------------------
   268 de los 272 se generaron para poder ver la aplicación llena, y salían
   mezclados con los de verdad sin nada que los distinguiera. */
.badge-demo { background: #EDE9FE; color: #5B21B6; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge-demo { background: #2E1065; color: #DDD6FE; }
}
[data-theme="dark"] .badge-demo { background: #2E1065; color: #DDD6FE; }

/* La fila entera se apaga un poco: no compite con las de verdad, pero se
   sigue leyendo. Esconderlas sería mentir por omisión —el directorio diría
   que tiene 272 negocios y enseñaría cuatro—. */
.bfila.demo { opacity: .82; }
.bfila.demo .bf-nom { font-weight: 700; }

/* Y las de verdad se marcan por dentro, con una línea del color de la marca a
   la izquierda. No es una insignia más: con cuatro reales entre doscientas
   sesenta y ocho, lo que hace falta es poder recorrer la lista y que salten. */
.bfila.real { border-left: 3px solid var(--brand); }
.bfila.real .bf-nom::after {
  content: '';
  display: inline-block; width: 6px; height: 6px; margin-left: 7px;
  border-radius: 50%; background: var(--brand); vertical-align: middle;
}

.bf-mas-nota {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 4px 6px 0; padding: 12px; border-radius: var(--r-md, 12px);
  background: var(--card-2); color: var(--ink-2);
  font-size: 13.4px; line-height: 1.5;
}
.bf-mas-nota svg { color: var(--muted); flex: none; margin-top: 1px; }

/* El aviso de la ficha de ejemplo, donde iban las dos acciones grandes.
   Una ficha con los botones apagados y sin decir por qué se lee como rota. */
.demo-aviso {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 16px; border-radius: var(--r-lg, 16px);
  background: var(--card-2); border: 1px dashed var(--line);
}
.demo-aviso .da-ico {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: #EDE9FE; color: #5B21B6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .demo-aviso .da-ico { background: #2E1065; color: #DDD6FE; }
}
[data-theme="dark"] .demo-aviso .da-ico { background: #2E1065; color: #DDD6FE; }
.demo-aviso b { display: block; font-size: 16px; }
.demo-aviso p { margin: 4px 0 10px; font-size: 13.6px; color: var(--ink-2); line-height: 1.5; }
/* La otra tarjeta de negocio, la de la portada: mismo trato. */
.biz-card.demo { opacity: .82; }
.biz-card.real { border-left: 3px solid var(--brand); }