/* Hours · estilos de la web (PWA). Pensado primero para celular. */

/* --- Colores: tema claro (por defecto) ---------------------------------- */
:root {
  color-scheme: light;
  --primario: #3341d6;
  --primario-2: #4757f0;
  --primario-texto: #3341d6;
  --primario-claro: #eef1ff;
  --primario-borde: #d9deff;
  --hero-1: #2833c4;
  --hero-2: #3442d9;
  --hero-3: #4554ec;
  --fondo: #f4f6fc;
  --fondo-exterior: #e9edf8;
  --superficie: #ffffff;
  --superficie-2: #eef1f8;
  --superficie-3: #eef0f5;
  --tarjeta: var(--superficie);
  --nav-fondo: rgba(255, 255, 255, 0.985);
  --borde: #e6e9f2;
  --campo-borde: #d5dae7;
  --texto: #111842;
  --texto-2: #5b6482;
  --texto-3: #8a92ad;
  --verde: #15803d;
  --verde-fuerte: #16a34a;
  --verde-punto: #22c55e;
  --verde-claro: #dcfce7;
  --verde-acento: #4ade80;
  --verde-texto: #14532d;
  --rojo: #dc2626;
  --rojo-punto: #ef4444;
  --rojo-claro: #fee2e2;
  --rojo-texto: #7f1d1d;
  --ambar: #b45309;
  --ambar-punto: #f59e0b;
  --ambar-claro: #fef3c7;
  --ambar-texto: #78350f;
  --azul-texto: #1e2a8a;
  --oscuro: #101426;
  --r-verde-fondo: #dcfce7; --r-verde-color: #16a34a;
  --r-naranja-fondo: #ffedd5; --r-naranja-color: #ea580c;
  --r-rosa-fondo: #fce7f3; --r-rosa-color: #db2777;
  --r-azul-fondo: #dbeafe; --r-azul-color: #2563eb;
  --r-amarillo-fondo: #fef3c7; --r-amarillo-color: #d97706;
  --r-violeta-fondo: #ede9fe; --r-violeta-color: #7c3aed;
  --r-rojo-fondo: #fee2e2; --r-rojo-color: #dc2626;
  --r-celeste-fondo: #e0f2fe; --r-celeste-color: #0284c7;
  --sombra: 0 1px 2px rgba(16, 24, 64, 0.04), 0 6px 18px rgba(16, 24, 64, 0.06);
  --sombra-alta: 0 10px 30px rgba(16, 24, 64, 0.14);
  --filtro-mapa: none;
  --radio: 18px;
  --ancho: 560px;
  --nav-alto: 68px;
  --fuente: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* --- Colores: tema oscuro ----------------------------------------------------
 * Se aplica si el teléfono está en modo oscuro (y la persona no eligió "Claro")
 * o si eligió "Oscuro" en Más → Apariencia. Los dos bloques son iguales. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --primario: #4b5af0;
    --primario-2: #5c6af5;
    --primario-texto: #a8b2ff;
    --primario-claro: rgba(124, 139, 255, 0.15);
    --primario-borde: rgba(124, 139, 255, 0.32);
    --hero-1: #1c2492;
    --hero-2: #2632b3;
    --hero-3: #3340cf;
    --fondo: #0b1020;
    --fondo-exterior: #070a14;
    --superficie: #151a2e;
    --superficie-2: #1c2239;
    --superficie-3: #252c47;
    --nav-fondo: rgba(21, 26, 46, 0.985);
    --borde: #262d47;
    --campo-borde: #3a4263;
    --texto: #e8ebf7;
    --texto-2: #a7aecb;
    --texto-3: #7d85a5;
    --verde: #4ade80;
    --verde-fuerte: #4ade80;
    --verde-claro: rgba(34, 197, 94, 0.16);
    --verde-texto: #bbf7d0;
    --rojo: #f87171;
    --rojo-claro: rgba(239, 68, 68, 0.16);
    --rojo-texto: #fecaca;
    --ambar: #fbbf24;
    --ambar-claro: rgba(245, 158, 11, 0.16);
    --ambar-texto: #fde68a;
    --azul-texto: #c7d2fe;
    --oscuro: #0d1122;
    --r-verde-fondo: rgba(34, 197, 94, 0.16); --r-verde-color: #4ade80;
    --r-naranja-fondo: rgba(249, 115, 22, 0.16); --r-naranja-color: #fb923c;
    --r-rosa-fondo: rgba(236, 72, 153, 0.16); --r-rosa-color: #f472b6;
    --r-azul-fondo: rgba(59, 130, 246, 0.16); --r-azul-color: #60a5fa;
    --r-amarillo-fondo: rgba(245, 158, 11, 0.16); --r-amarillo-color: #fbbf24;
    --r-violeta-fondo: rgba(139, 92, 246, 0.18); --r-violeta-color: #a78bfa;
    --r-rojo-fondo: rgba(239, 68, 68, 0.16); --r-rojo-color: #f87171;
    --r-celeste-fondo: rgba(14, 165, 233, 0.16); --r-celeste-color: #38bdf8;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.22);
    --sombra-alta: 0 10px 30px rgba(0, 0, 0, 0.5);
    --filtro-mapa: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.6);
  }
}
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --primario: #4b5af0;
  --primario-2: #5c6af5;
  --primario-texto: #a8b2ff;
  --primario-claro: rgba(124, 139, 255, 0.15);
  --primario-borde: rgba(124, 139, 255, 0.32);
  --hero-1: #1c2492;
  --hero-2: #2632b3;
  --hero-3: #3340cf;
  --fondo: #0b1020;
  --fondo-exterior: #070a14;
  --superficie: #151a2e;
  --superficie-2: #1c2239;
  --superficie-3: #252c47;
  --nav-fondo: rgba(21, 26, 46, 0.985);
  --borde: #262d47;
  --campo-borde: #3a4263;
  --texto: #e8ebf7;
  --texto-2: #a7aecb;
  --texto-3: #7d85a5;
  --verde: #4ade80;
  --verde-fuerte: #4ade80;
  --verde-claro: rgba(34, 197, 94, 0.16);
  --verde-texto: #bbf7d0;
  --rojo: #f87171;
  --rojo-claro: rgba(239, 68, 68, 0.16);
  --rojo-texto: #fecaca;
  --ambar: #fbbf24;
  --ambar-claro: rgba(245, 158, 11, 0.16);
  --ambar-texto: #fde68a;
  --azul-texto: #c7d2fe;
  --oscuro: #0d1122;
  --r-verde-fondo: rgba(34, 197, 94, 0.16); --r-verde-color: #4ade80;
  --r-naranja-fondo: rgba(249, 115, 22, 0.16); --r-naranja-color: #fb923c;
  --r-rosa-fondo: rgba(236, 72, 153, 0.16); --r-rosa-color: #f472b6;
  --r-azul-fondo: rgba(59, 130, 246, 0.16); --r-azul-color: #60a5fa;
  --r-amarillo-fondo: rgba(245, 158, 11, 0.16); --r-amarillo-color: #fbbf24;
  --r-violeta-fondo: rgba(139, 92, 246, 0.18); --r-violeta-color: #a78bfa;
  --r-rojo-fondo: rgba(239, 68, 68, 0.16); --r-rojo-color: #f87171;
  --r-celeste-fondo: rgba(14, 165, 233, 0.16); --r-celeste-color: #38bdf8;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.22);
  --sombra-alta: 0 10px 30px rgba(0, 0, 0, 0.5);
  --filtro-mapa: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.6);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 64px; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
/* En iPhone, sin esto cada toque espera a ver si es un doble toque para hacer zoom. */
a, button, input, label, select, summary, textarea, [role="button"] { touch-action: manipulation; }

:focus-visible { outline: 3px solid #93a5ff; outline-offset: 2px; border-radius: 8px; }

.i {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

.app {
  max-width: var(--ancho);
  margin: 0 auto;
  padding-bottom: calc(var(--nav-alto) + 28px + env(safe-area-inset-bottom));
  overflow-x: clip;
}

/* Link que cubre toda la tarjeta */
.estirado::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* --- Marca ---------------------------------------------------------------- */

.logo {
  display: inline-flex;
  align-items: center;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.logo-o { width: 0.84em; height: 0.84em; margin: 0 0.015em; transform: translateY(0.05em); }

.hero-barra:has(.marca) { align-items: flex-start; }
.marca { display: flex; flex-direction: column; }
.marca .logo { font-size: 46px; }
.marca-lema {
  margin-top: 5px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.9;
}
/* La localidad va arriba a la derecha y el lema puede pasar por debajo. */
.hero-barra:has(.marca) > .localidad,
.hero-barra:has(.marca) > .localidad-btn { position: absolute; top: 2px; right: 0; }

/* --- Cabecera azul ---------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(120, 140, 255, 0.35), transparent 60%),
    linear-gradient(160deg, var(--hero-1) 0%, var(--hero-2) 55%, var(--hero-3) 100%);
  padding: calc(env(safe-area-inset-top) + 16px) 20px 58px;
}
.hero--compacto { padding-bottom: 50px; }
.hero--plano { padding-bottom: 26px; }
.hero--oscuro { background: radial-gradient(120% 80% at 100% 0%, rgba(74, 222, 128, 0.18), transparent 60%), linear-gradient(160deg, #0d1022, #1a1f3d); }
.hero--rubro::after {
  content: "";
  position: absolute;
  inset: auto -40px -60px auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 28px solid rgba(255, 255, 255, 0.06);
}

.hero-deco {
  position: absolute;
  right: -34px;
  top: 6px;
  width: 210px;
  height: 210px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.09);
  stroke-width: 1.4;
  pointer-events: none;
}

.hero-barra { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hero-barra:has(.volver) { justify-content: flex-start; }

.hero-titulo {
  position: relative;
  margin-top: 22px;
  font-size: clamp(32px, 9vw, 42px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.hero-titulo em { font-style: normal; color: var(--verde-acento); }
.hero-titulo--chico { margin-top: 16px; font-size: clamp(28px, 8vw, 34px); }
.hero-sub { position: relative; margin-top: 6px; font-size: 15px; line-height: 1.35; opacity: 0.86; }

.hero-rubro { position: relative; display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.hero-rubro .hero-titulo { margin-top: 0; }

.volver {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: -8px;
  border-radius: 50%;
  font-size: 22px;
}
.volver--vidrio {
  margin: 0;
  width: 42px;
  height: 42px;
  background: rgba(12, 18, 48, 0.6);
  color: #fff;
}

.localidad { position: relative; z-index: 3; }
.localidad summary { list-style: none; }
.localidad summary::-webkit-details-marker { display: none; }
.localidad-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: default;
}
details .localidad-btn { cursor: pointer; }
.localidad-btn .i { font-size: 15px; }
.localidad-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 180px;
  padding: 6px;
  border-radius: 14px;
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--sombra-alta);
}
.localidad-menu a { display: block; padding: 10px 12px; border-radius: 10px; font-weight: 600; }
.localidad-menu a[aria-current] { background: var(--primario-claro); color: var(--primario-texto); }

/* --- Buscador ---------------------------------------------------------------- */

.buscador {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 58px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--superficie);
  box-shadow: var(--sombra-alta);
  color: var(--primario-texto);
  font-size: 18px;
}
.buscador--hero { position: relative; z-index: 2; margin: -29px 16px 0; }
.buscador input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--texto);
  font-size: 16px;
}
.buscador input::placeholder { color: var(--texto-3); }
.buscador input::-webkit-search-cancel-button { filter: grayscale(1); }

/* --- Secciones ------------------------------------------------------------ */

.seccion { padding: 0 16px; margin-top: 24px; }
.seccion--primera { margin-top: 20px; }
.hero--compacto + .seccion--primera, .hero--oscuro + .seccion--primera { margin-top: -30px; position: relative; z-index: 2; }
.seccion--lista { margin-top: 16px; }

.seccion-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.etiqueta-publicidad { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--superficie-2, rgba(0,0,0,.05)); color: var(--texto-2); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.seccion-cabeza h2 { display: flex; align-items: center; gap: 8px; font-size: 21px; font-weight: 800; letter-spacing: -0.01em; }
.ver-todas { display: inline-flex; align-items: center; gap: 2px; color: var(--primario-texto); font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.ver-todas .i { font-size: 16px; }
.icono-estrella { color: #f5b301; font-size: 24px; }
.icono-primario { color: var(--primario-texto); }

.punto-vivo {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--verde-punto);
  flex-shrink: 0;
}
.punto-vivo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--verde-punto);
  animation: latido 2s ease-out infinite;
}
@keyframes latido { from { transform: scale(1); opacity: 0.6; } to { transform: scale(2.4); opacity: 0; } }

.pie { padding: 24px 24px 0; color: var(--texto-3); font-size: 13px; text-align: center; }
.pie a { color: var(--primario-texto); font-weight: 600; }

.vacio { padding: 20px 8px; color: var(--texto-2); text-align: center; }
.vacio .i { color: var(--texto-3); }
.vacio--grande { display: grid; justify-items: center; gap: 6px; padding: 36px 16px; border-radius: 20px; background: var(--superficie); box-shadow: var(--sombra); }
.vacio--grande strong { color: var(--texto); }
.vacio--grande .boton { margin-top: 10px; }
.vacio-icono { width: 48px; height: 48px; margin-bottom: 6px; color: var(--texto-3) !important; }
.contador { margin: 0 4px 10px; color: var(--texto-2); font-size: 13.5px; font-weight: 600; }
.ver-mas { display: grid; justify-items: center; gap: 8px; margin-top: 16px; text-align: center; }
.ver-mas small { color: var(--texto-2); font-size: 13px; }

/* --- Carruseles ---------------------------------------------------------- */

.carrusel {
  display: flex;
  gap: 12px;
  margin: 0 -16px;
  padding: 4px 16px 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 16px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.carrusel::-webkit-scrollbar { display: none; }
.carrusel > * { scroll-snap-align: start; flex-shrink: 0; }

/* --- Rubros -------------------------------------------------------------- */

.carrusel--rubros { gap: 10px; }
.rubro-tile { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 84px; text-align: center; }
.rubro-icono {
  display: grid;
  place-items: center;
  width: 76px;
  height: 66px;
  border-radius: 18px;
  font-size: 32px;
}
.rubro-icono--grande { width: 78px; height: 78px; border-radius: 22px; font-size: 40px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); }
.rubro-nombre { display: -webkit-box; overflow: hidden; font-size: 12.5px; font-weight: 500; line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.rubro--verde { background: var(--r-verde-fondo); color: var(--r-verde-color); }
.rubro--naranja { background: var(--r-naranja-fondo); color: var(--r-naranja-color); }
.rubro--rosa { background: var(--r-rosa-fondo); color: var(--r-rosa-color); }
.rubro--azul { background: var(--r-azul-fondo); color: var(--r-azul-color); }
.rubro--amarillo { background: var(--r-amarillo-fondo); color: var(--r-amarillo-color); }
.rubro--violeta { background: var(--r-violeta-fondo); color: var(--r-violeta-color); }
.rubro--rojo { background: var(--r-rojo-fondo); color: var(--r-rojo-color); }
.rubro--celeste { background: var(--r-celeste-fondo); color: var(--r-celeste-color); }

.grilla-rubros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rubro-tile--fila {
  flex-direction: row;
  width: auto;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: var(--superficie);
  box-shadow: var(--sombra);
  text-align: left;
}
.rubro-tile--fila .rubro-icono { width: 48px; height: 48px; border-radius: 14px; font-size: 24px; }
.rubro-tile--fila .rubro-nombre { font-size: 15px; font-weight: 700; }
.rubro-tile--fila small { display: block; margin-top: 2px; color: var(--texto-2); font-size: 12.5px; font-weight: 500; }

/* --- Imagen o marcador ----------------------------------------------------- */

.ph {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ph-1), var(--ph-2));
  color: var(--ph-3);
}
.ph-icono { width: 42%; height: 42%; max-width: 64px; max-height: 64px; opacity: 0.9; }
.ph-ini {
  position: absolute;
  right: 8px;
  bottom: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  opacity: 0.55;
}
.ph--verde { --ph-1: var(--r-verde-fondo); --ph-2: color-mix(in srgb, var(--r-verde-fondo) 72%, var(--r-verde-color)); --ph-3: var(--r-verde-color); }
.ph--naranja { --ph-1: var(--r-naranja-fondo); --ph-2: color-mix(in srgb, var(--r-naranja-fondo) 72%, var(--r-naranja-color)); --ph-3: var(--r-naranja-color); }
.ph--rosa { --ph-1: var(--r-rosa-fondo); --ph-2: color-mix(in srgb, var(--r-rosa-fondo) 72%, var(--r-rosa-color)); --ph-3: var(--r-rosa-color); }
.ph--azul { --ph-1: var(--r-azul-fondo); --ph-2: color-mix(in srgb, var(--r-azul-fondo) 72%, var(--r-azul-color)); --ph-3: var(--r-azul-color); }
.ph--amarillo { --ph-1: var(--r-amarillo-fondo); --ph-2: color-mix(in srgb, var(--r-amarillo-fondo) 72%, var(--r-amarillo-color)); --ph-3: var(--r-amarillo-color); }
.ph--violeta { --ph-1: var(--r-violeta-fondo); --ph-2: color-mix(in srgb, var(--r-violeta-fondo) 72%, var(--r-violeta-color)); --ph-3: var(--r-violeta-color); }
.ph--rojo { --ph-1: var(--r-rojo-fondo); --ph-2: color-mix(in srgb, var(--r-rojo-fondo) 72%, var(--r-rojo-color)); --ph-3: var(--r-rojo-color); }
.ph--celeste { --ph-1: var(--r-celeste-fondo); --ph-2: color-mix(in srgb, var(--r-celeste-fondo) 72%, var(--r-celeste-color)); --ph-3: var(--r-celeste-color); }
.ph--portada .ph-icono { width: 96px; height: 96px; max-width: none; max-height: none; opacity: 0.5; }

/* --- Estado (abierto / cerrado) -------------------------------------------- */

.estado { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}
.pill-punto { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.pill--abierto { background: var(--verde-claro); color: var(--verde); }
.pill--abierto .pill-punto { background: var(--verde-punto); }
.pill--cerrado { background: var(--rojo-claro); color: var(--rojo); }
.pill--cerrado .pill-punto { background: var(--rojo-punto); }
.pill--pronto { background: var(--ambar-claro); color: var(--ambar); }
.pill--pronto .pill-punto { background: var(--ambar-punto); }
.pill--turno { background: var(--primario-claro); color: var(--primario-texto); }
.pill--turno .pill-punto { background: #4f46e5; }
.pill--sin-datos { background: var(--superficie-3); color: var(--texto-2); }
.pill--suave { padding: 4px 12px; font-size: 13px; }
.estado-det { color: var(--texto-2); font-size: 14px; font-weight: 500; white-space: nowrap; }

.dato { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--texto-2); font-size: 14px; min-width: 0; }
.dato .i { font-size: 16px; color: var(--texto-3); }
.dato span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Favorito --------------------------------------------------------------- */

.fav {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--texto);
  font-size: 22px;
  transition: transform 0.15s;
}
.fav:active { transform: scale(0.88); }
.fav[aria-pressed="true"] { color: #ef4444; }
.fav[aria-pressed="true"] .i { fill: currentColor; }
.fav--flotante { top: 6px; right: 6px; width: 36px; height: 36px; background: color-mix(in srgb, var(--superficie) 92%, transparent); font-size: 19px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
.fav--grande { position: static; width: 46px; height: 46px; background: rgba(12, 18, 48, 0.62); color: #fff; font-size: 22px; }
.fav--grande[aria-pressed="true"] { color: #ff5a6e; }

/* --- Tarjeta mini (carruseles) ----------------------------------------------- */

.mini {
  position: relative;
  width: 168px;
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--tarjeta);
  box-shadow: var(--sombra);
}
.mini-img { height: 104px; background: var(--superficie-2); }
.mini-img img { width: 100%; height: 100%; object-fit: cover; }
.mini-info { padding: 10px 12px 12px; }
.mini-nombre { font-size: 15px; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini .estado { gap: 4px 8px; }
.mini .pill { font-size: 12.5px; padding: 2px 9px 2px 7px; }
.mini .estado-det { font-size: 13px; }
.mini .dato { font-size: 13px; }

/* --- Tarjeta en fila (listados) ---------------------------------------------- */

.lista { display: grid; gap: 12px; }

.fila {
  position: relative;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 12px;
  padding: 10px;
  border-radius: var(--radio);
  background: var(--tarjeta);
  box-shadow: var(--sombra);
}
.fila-img { min-height: 104px; overflow: hidden; border-radius: 12px; background: var(--superficie-2); }
.fila-img img { width: 100%; height: 100%; object-fit: cover; }
.fila-info { display: flex; flex-direction: column; min-width: 0; padding: 2px 0; }
.fila-nombre { padding-right: 36px; font-size: 17px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.fila-pie { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 2px; }
.fila-datos { min-width: 0; flex: 1 1 130px; }

.acciones { position: relative; z-index: 2; display: flex; gap: 8px; margin-left: auto; }
.accion {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 19px;
  transition: transform 0.15s;
}
.accion:active { transform: scale(0.9); }
.accion--tel { background: var(--primario-claro); color: var(--primario-texto); }
.accion--wa { background: var(--verde-claro); color: var(--verde-fuerte); }
.accion--wa-lleno { background: #22c55e; color: #fff; }
.accion--mapa { background: var(--rojo-claro); color: var(--rojo-punto); }
.accion--gris { background: var(--superficie-3); color: var(--texto); }

/* --- Chips (filtros) -------------------------------------------------------- */

.chips {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  padding: 2px 16px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  height: 42px;
  padding: 0 16px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(16, 24, 64, 0.04);
}
.chip .i { font-size: 16px; }
.chip .punto-vivo { width: 10px; height: 10px; }
.chip .punto-vivo::after { animation: none; }
.chip.activo { border-color: transparent; background: var(--primario); color: #fff; }
.chip--orden { margin-left: auto; }
.chips--rubros { margin: 0 0 12px; padding: 0; }
.chips--rubros .chip { color: var(--primario-texto); }

/* --- Inicio ---------------------------------------------------------------- */

.aviso-turno {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--primario-borde);
  border-radius: var(--radio);
  background: var(--primario-claro);
}
.aviso-turno + .aviso-turno { margin-top: 8px; }
.aviso-turno-icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--primario); color: #fff; font-size: 20px; flex-shrink: 0; }
.aviso-turno-texto { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.aviso-turno-texto small { color: var(--primario-texto); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.aviso-turno-texto strong { font-size: 16px; }
.aviso-turno-texto span { color: var(--texto-2); font-size: 13.5px; }
.aviso-turno > .i { color: var(--primario-texto); }

.banner-promos {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 150px;
  overflow: hidden;
  padding: 18px 20px;
  border-radius: 22px;
  background: radial-gradient(90% 120% at 100% 50%, rgba(74, 222, 128, 0.22), transparent 60%), var(--oscuro);
  color: #fff;
}
.banner-promos-texto { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
.banner-promos-texto small { font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.92; }
.banner-promos-texto strong { margin: 2px 0; color: var(--verde-acento); font-size: clamp(26px, 8vw, 36px); font-style: italic; font-weight: 800; letter-spacing: -0.01em; line-height: 1; text-transform: uppercase; }
.banner-promos-texto .boton { margin-top: 12px; }
.banner-promos-deco { position: absolute; right: -22px; bottom: -14px; display: grid; place-items: center; width: 120px; height: 120px; color: var(--verde-acento); transform: rotate(-18deg); opacity: 0.85; }
.banner-promos-deco .i { width: 120px; height: 120px; stroke-width: 1.5; }
.banner-promos-deco b { position: absolute; left: 50%; top: 52%; font-size: 28px; font-weight: 800; transform: translate(-30%, -50%); }

/* --- Botones ------------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--primario);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.boton--verde { background: var(--verde-acento); color: #0b2e16; }
.enlace { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--primario-texto); font-size: 14px; font-weight: 600; }

/* --- Ficha del comercio --------------------------------------------------- */

.ficha-portada { position: relative; height: 290px; background: var(--superficie-2); }
.galeria { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.galeria::-webkit-scrollbar { display: none; }
.galeria img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.galeria-contador {
  position: absolute;
  right: 14px;
  bottom: 40px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(12, 18, 48, 0.6);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.ficha-barra {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 12px);
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
}

.ficha-hoja { position: relative; z-index: 1; margin-top: -28px; }
.ficha-cabeza {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 18px 16px 6px;
  border-radius: 28px 28px 0 0;
  background: var(--superficie);
}
.ficha-logo { width: 80px; height: 80px; overflow: hidden; border-radius: 20px; box-shadow: 0 4px 14px rgba(16, 24, 64, 0.14); background: var(--superficie); }
.ficha-logo img { width: 100%; height: 100%; object-fit: cover; }
.ficha-logo .ph-icono { width: 50%; height: 50%; }
.ficha-nombre { font-size: 24px; font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; }
.ficha-titulos .dato { margin-top: 4px; }
.ficha-titulos .estado { margin-top: 8px; }
.ficha-titulos .pill { font-size: 14.5px; padding: 4px 12px 4px 10px; }
.ficha-titulos .estado-det { font-size: 15px; }
.sello { position: relative; margin-top: 10px; }
.sello summary { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 8px; border-radius: 999px; background: var(--verde-claro); color: var(--verde-texto); font-size: 13.5px; font-weight: 700; cursor: pointer; list-style: none; }
.sello summary::-webkit-details-marker { display: none; }
.sello summary .i { font-size: 17px; }
.sello p { max-width: 320px; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); box-shadow: var(--sombra); color: var(--texto-2); font-size: 13.5px; line-height: 1.45; }

.ficha-acciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 6px;
  padding: 14px 12px 12px;
  background: var(--superficie);
}
.accion-grande { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--texto-2); font-size: 12.5px; font-weight: 600; }
.accion-grande .accion { width: 52px; height: 52px; font-size: 22px; }

.pestanas {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 4px;
  padding: 0 8px;
  overflow-x: auto;
  border-bottom: 1px solid var(--borde);
  background: var(--nav-fondo);

  scrollbar-width: none;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a {
  flex-shrink: 0;
  padding: 14px 12px 12px;
  border-bottom: 3px solid transparent;
  color: var(--texto-2);
  font-size: 15px;
  font-weight: 600;
}
.pestanas a.activo { border-bottom-color: var(--primario-texto); color: var(--primario-texto); }
/* Al tocar una pestaña, la sección se ilumina un instante (se nota aunque no haya que desplazarse). */
.resaltada { animation: resaltar 1.1s ease-out; }
@keyframes resaltar { from { box-shadow: 0 0 0 3px var(--primario), var(--sombra); } to { box-shadow: 0 0 0 3px transparent, var(--sombra); } }

.tarjeta {
  margin: 12px 12px 0;
  padding: 16px;
  border-radius: 20px;
  background: var(--tarjeta);
  box-shadow: var(--sombra);
  scroll-margin-top: 60px;
}
.tarjeta--sin-relleno { padding: 16px 0 4px; }
.tarjeta--sin-relleno .tarjeta-cabeza { padding: 0 16px; }
.tarjeta--sin-relleno .carrusel { margin: 0; }
.tarjeta-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.tarjeta-cabeza h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; }
.tarjeta-cabeza h2 .i { font-size: 24px; }

.direccion { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 44%); gap: 12px; align-items: start; }
.direccion:not(:has(.mapa)) { grid-template-columns: 1fr; }
.direccion-calle { display: flex; align-items: flex-start; gap: 8px; font-size: 17px; }
.direccion-calle .i { font-size: 24px; margin-top: -1px; }
.direccion-loc { margin: 2px 0 0 32px; color: var(--texto-2); font-size: 14px; }
.direccion .distancia, .direccion .enlace { margin-left: 30px; }
.mapa { position: relative; height: 124px; overflow: hidden; border-radius: 14px; background: var(--superficie-2); }
.mapa-teselas { position: absolute; width: 512px; height: 512px; }
.mapa-teselas img { position: absolute; width: 256px; height: 256px; max-width: none; filter: var(--filtro-mapa); }
.mapa-pin { position: absolute; left: 50%; top: 50%; color: var(--primario-texto); font-size: 34px; transform: translate(-50%, -88%); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)); }
.mapa-pin .i { width: 34px; height: 34px; }
.mapa-creditos { position: absolute; left: 6px; top: 4px; padding: 0 4px; border-radius: 4px; background: color-mix(in srgb, var(--superficie) 85%, transparent); color: var(--texto-2); font-size: 9px; }
.mapa-boton {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--superficie);
  color: var(--primario-texto);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(16, 24, 64, 0.18);
}
.descripcion { margin-top: 14px; color: var(--texto-2); }
.contactos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.contactos a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--primario-claro); color: var(--primario-texto); font-size: 13.5px; font-weight: 600; }

.semana { display: grid; gap: 2px; }
.semana-fila { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border-radius: 10px; }
.semana-fila dt { color: var(--texto); font-size: 15px; }
.semana-fila dt small { color: var(--primario-texto); font-weight: 600; }
.semana-fila dd { display: flex; flex-direction: column; align-items: flex-end; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.semana-fila.cerrado dd { color: var(--rojo); }
.semana-fila.hoy { background: var(--primario-claro); }
.semana-fila.hoy dt, .semana-fila.hoy dd { color: var(--primario-texto); font-weight: 700; }

.cambios { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--ambar-claro); color: var(--ambar-texto); }
.cambios h3 { font-size: 14px; font-weight: 800; }
.cambios ul { display: grid; gap: 4px; margin-top: 6px; font-size: 14px; }
.nota, .verificado { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; color: var(--texto-2); font-size: 13.5px; }
.verificado .i { color: var(--verde); }

.fotos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.foto { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: var(--superficie-2); }
.foto img { width: 100%; height: 100%; object-fit: cover; }

.visor { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #000; }
.visor::backdrop { background: #000; }
.visor[open] { display: grid; place-items: center; }
.visor img { max-width: 100%; max-height: 100dvh; object-fit: contain; }
.visor-cerrar { position: fixed; top: calc(env(safe-area-inset-top) + 12px); right: 12px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 22px; }
.visor-nav { position: fixed; top: 50%; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 22px; }
.visor-nav[hidden] { display: none; }
.visor-nav--ant { left: 10px; }
.visor-nav--sig { right: 10px; }
.visor-contador { position: fixed; bottom: calc(env(safe-area-inset-bottom) + 16px); left: 50%; z-index: 1; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 14px; font-weight: 700; }
.visor-contador:empty { display: none; }
.foto { position: relative; }
.foto-mas { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 22px; font-weight: 800; }

/* --- Promociones ----------------------------------------------------------- */

.promo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 250px;
  min-height: 140px;
  overflow: hidden;
  padding: 14px 16px;
  border-radius: 16px;
  color: #fff;
}
.promo--rojo { background: linear-gradient(135deg, #c81e1e, #7f1d1d); }
.promo--oscuro { background: linear-gradient(135deg, #262a3d, #0f1220); }
.promo--oscuro .promo-titulo, .promo--oscuro .promo-precio { color: #facc15; }
.promo--azul { background: linear-gradient(135deg, #2d5bd8, #1e3a8a); }
.promo--verde { background: linear-gradient(135deg, #16a34a, #14532d); }
.promo--naranja { background: linear-gradient(135deg, #ea580c, #9a3412); }
.promo--violeta { background: linear-gradient(135deg, #7c3aed, #4c1d95); }
.promo-img {
  position: absolute;
  inset: 0 0 0 auto;
  width: 50%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40%);
  mask-image: linear-gradient(to right, transparent, #000 40%);
}
.promo-texto { position: relative; display: flex; flex-direction: column; max-width: 100%; }
.promo--con-imagen .promo-texto { max-width: 62%; }
.promo-etiqueta { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.9; }
.promo-titulo { font-size: 23px; font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; }
.promo-precio { margin-top: 4px; font-size: 27px; font-weight: 800; line-height: 1; }
.promo-detalle { margin-top: 2px; font-size: 13px; opacity: 0.9; }
.promo-comercio { position: relative; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 12px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); font-size: 13px; font-weight: 700; }
.promo-vigencia { position: absolute; top: 10px; right: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.28); font-size: 11.5px; font-weight: 600; }
.promo--con-imagen .promo-vigencia { top: auto; bottom: 10px; }
.grilla-promos { display: grid; gap: 12px; }
.grilla-promos .promo { width: auto; min-height: 150px; }
.carrusel--promos { padding: 0 16px 12px; }

/* --- Más / farmacias de turno ------------------------------------------- */

.menu { overflow: hidden; border-radius: 20px; background: var(--superficie); box-shadow: var(--sombra); }
.menu li + li { border-top: 1px solid var(--borde); }
.menu a, .menu button, .menu-ayuda { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; text-align: left; }
.menu-icono { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-size: 20px; flex-shrink: 0; }
.menu span:not(.menu-icono) { flex: 1; font-size: 16px; font-weight: 700; }
.menu small { display: block; color: var(--texto-2); font-size: 13px; font-weight: 500; }
.menu small .i { font-size: 15px; }
.menu > li > a > .i:last-child, .menu > li > button > .i:last-child { color: var(--texto-3); }

.tarjeta--comercio { margin: 0; background: linear-gradient(135deg, var(--primario-claro), var(--superficie)); border: 1px solid var(--primario-borde); }
.tarjeta--comercio h2 { font-size: 19px; font-weight: 800; }
.tarjeta--comercio p { margin: 6px 0 14px; color: var(--texto-2); }

.turnos { overflow: hidden; border-radius: 20px; background: var(--superficie); box-shadow: var(--sombra); }
.turnos-dia { display: flex; gap: 14px; padding: 12px 14px; }
.turnos-dia + .turnos-dia { border-top: 1px solid var(--borde); }
.turnos-fecha { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 14px; background: var(--primario-claro); color: var(--primario-texto); font-size: 16px; font-weight: 800; flex-shrink: 0; }
.turnos-fecha b { font-size: 11px; font-weight: 700; text-transform: uppercase; }
.turnos-lista { display: grid; gap: 8px; align-content: center; min-width: 0; }
.turnos-lista strong { display: block; font-size: 15px; }
.turnos-lista small { display: block; color: var(--texto-2); font-size: 13px; }

/* --- Barra de navegación ------------------------------------------------- */

.nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 100%;
  max-width: var(--ancho);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background: var(--nav-fondo);

  box-shadow: 0 -6px 24px rgba(16, 24, 64, 0.08);
  transform: translateX(-50%);
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 0;
  color: var(--texto-2);
  font-size: 12.5px;
  font-weight: 600;
}
.nav-item .i { font-size: 26px; stroke-width: 1.8; transition: transform 0.12s; }
.nav-item.activo { color: var(--primario-texto); }
/* Que se note el toque enseguida, y que mantener el dedo un poco más no abra
 * la vista previa del enlace de iPhone (el toque se perdía). */
.nav { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.nav-item:active .i { transform: scale(0.86); }

/* Mientras carga la página que se tocó: una barrita en el borde del menú. */
.cargando .nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 3px;
  border-radius: 3px;
  background: var(--primario);
  transform-origin: left;
  animation: cargando 2.5s cubic-bezier(0.1, 0.7, 0.3, 1) forwards;
}
@keyframes cargando { from { transform: scaleX(0.06); } to { transform: scaleX(0.92); } }

/* --- Avisos ---------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-alto) + 20px + env(safe-area-inset-bottom));
  z-index: 30;
  max-width: calc(100% - 32px);
  padding: 11px 18px;
  border-radius: 14px;
  background: var(--texto);
  color: var(--superficie);
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity 0.2s, transform 0.2s;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* --- Pantallas más anchas ------------------------------------------------- */

@media (min-width: 440px) {
  .semana { grid-template-columns: 1fr 1fr; column-gap: 18px; }
  .semana-fila dd { flex-direction: column; }
  .grilla-rubros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 600px) {
  body { background: var(--fondo-exterior); }
  .app { background: var(--fondo); min-height: 100dvh; box-shadow: 0 0 40px rgba(16, 24, 64, 0.08); }
}

/* --- Animaciones ------------------------------------------------------------
 * Cortas (0,15 a 0,4 s) y solo con transform y opacity, que el celular mueve sin
 * esfuerzo. Con «reducir movimiento» no corre ninguna (ver abajo). */

/* Al pasar de una página a otra, un fundido corto; de una tarjeta a su ficha, la
 * foto se agranda hasta la portada (hours.js le pone el nombre a la tarjeta tocada). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-group(root) { animation-duration: 0.22s; }
::view-transition-group(comercio-foto) { animation-duration: 0.36s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
::view-transition-old(comercio-foto), ::view-transition-new(comercio-foto) { height: 100%; object-fit: cover; overflow: clip; }
.ficha-portada { view-transition-name: comercio-foto; }
.nav { view-transition-name: nav; }
.panel-barra { view-transition-name: panel-barra; }

/* Las tarjetas entran de a una al cargar (hours.js saca «entrada» después). */
@keyframes entrar { from { opacity: 0; transform: translateY(10px); } }
.entrada .fila, .entrada .mini, .fila.entrada { animation: entrar 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.entrada .fila:nth-child(2), .entrada .mini:nth-child(2) { animation-delay: 0.04s; }
.entrada .fila:nth-child(3), .entrada .mini:nth-child(3) { animation-delay: 0.08s; }
.entrada .fila:nth-child(4), .entrada .mini:nth-child(4) { animation-delay: 0.12s; }
.entrada .fila:nth-child(5), .entrada .mini:nth-child(5) { animation-delay: 0.16s; }
.entrada .fila:nth-child(6), .entrada .mini:nth-child(6) { animation-delay: 0.2s; }
.entrada .fila:nth-child(n+7), .entrada .mini:nth-child(n+7) { animation-delay: 0.24s; }

/* El corazón late una vez al guardar en favoritos. */
@keyframes latir { 40% { transform: scale(1.35); } }
.fav.latiendo .i { animation: latir 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }

/* El logo: el aro con la flecha da una vuelta y aparece el tilde (una vez por visita). */
@keyframes girar { from { transform: rotate(-360deg); } }
@keyframes trazar { from { stroke-dashoffset: 1; } }
.logo-anima .logo-aro { transform-box: view-box; transform-origin: 12px 12px; animation: girar 0.9s cubic-bezier(0.3, 0.9, 0.3, 1) 0.15s backwards; }
.logo-anima .logo-tilde { stroke-dasharray: 1; animation: trazar 0.35s 0.8s ease-out backwards; }

/* Panel: los avisos suben un poco al aparecer y el tilde de «guardado» se dibuja. */
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } }
.avisos-panel .aviso { animation: aparecer 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.aviso-tilde path { stroke-dasharray: 1; stroke-width: 2.6; animation: trazar 0.4s 0.2s ease-out backwards; }

/* Reportes: las barras crecen en ola (panel.js hace contar los totales). */
@keyframes crecer { from { transform: scaleY(0); } }
.barra { transform-origin: bottom; animation: crecer 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: min(calc(var(--i, 0) * 10ms), 0.35s); }
.kpi strong { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =====================================================================
 * Componentes compartidos (formularios, avisos, insignias, tablas)
 * ===================================================================== */

.nav-marca, .nav-cuenta { display: none; }

.boton--claro { background: var(--primario-claro); color: var(--primario-texto); }
.boton--rojo { background: var(--rojo-claro); color: var(--rojo); }
.boton--chico { height: 34px; padding: 0 14px; font-size: 13.5px; }
.boton--ancho { width: 100%; }
.boton:disabled { opacity: 0.6; cursor: wait; }
.boton .i { font-size: 18px; }
.boton-icono { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--texto-2); font-size: 18px; }
.boton-icono:hover { background: var(--superficie-3); color: var(--texto); }
.boton-icono--sobre { position: absolute; top: 6px; right: 6px; background: color-mix(in srgb, var(--superficie) 92%, transparent); color: var(--rojo); }
.botonera { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.botonera form { display: contents; }

.aviso { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.4; }
.aviso .i { margin-top: 1px; }
.aviso a { font-weight: 700; text-decoration: underline; }
.aviso--success { background: var(--verde-claro); color: var(--verde-texto); }
.aviso--error { background: var(--rojo-claro); color: var(--rojo-texto); }
.aviso--warning { background: var(--ambar-claro); color: var(--ambar-texto); }
.aviso--info, .aviso--debug { background: var(--primario-claro); color: var(--azul-texto); }
.aviso--fija { border: 2px dashed currentColor; font-weight: 600; }
.avisos-flotantes {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 12px);
  left: 50%;
  z-index: 40;
  display: grid;
  gap: 8px;
  width: min(520px, calc(100% - 32px));
  transform: translateX(-50%);
  transition: opacity 0.3s;
}
.avisos-flotantes .aviso { box-shadow: var(--sombra-alta); }
.avisos-flotantes.oculto { opacity: 0; pointer-events: none; }

.insignia { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.insignia--verde { background: var(--verde-claro); color: var(--verde); }
.insignia--ambar { background: var(--ambar-claro); color: var(--ambar); }
.insignia--rojo { background: var(--rojo-claro); color: var(--rojo); }
.insignia--gris { background: var(--superficie-3); color: var(--texto-2); }
.insignia--azul { background: var(--primario-claro); color: var(--primario-texto); }
/* Planes */
.plan-chip { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--primario-texto); }
.plan-chip .i { font-size: 13px; }
.cupos { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -4px 0 14px; padding: 0; list-style: none; font-size: 13px; color: var(--texto-2); }
.cupos strong { color: var(--texto); }
.texto-error { color: var(--rojo); }
.texto-suave { color: var(--texto-2); }

.tarjeta--form { display: grid; gap: 16px; container-type: inline-size; }
.tarjeta--separada { margin-top: 16px; }
.tarjeta--angosta { max-width: 640px; }
.tarjeta--sin-relleno-lateral { padding: 4px 0; }
.tarjeta-titulo { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; }
.tarjeta-titulo small { color: var(--texto-2); font-size: 14px; font-weight: 500; }
.tarjeta-titulo .i { font-size: 22px; }

.grupo { min-width: 0; margin: 0; padding: 0; border: 0; }
.grupo + .grupo { padding-top: 16px; border-top: 1px solid var(--borde); }
.grupo legend { margin-bottom: 10px; padding: 0; color: var(--texto); font-size: 15px; font-weight: 800; }
.campos { display: grid; gap: 14px; }
.campo { position: relative; display: grid; align-content: start; gap: 5px; min-width: 0; }
.campo > label, .campo > span { font-size: 14px; font-weight: 700; }
.requerido { margin-left: 2px; color: var(--rojo); }
/* Dos columnas de campos solo si el formulario es ancho (no la pantalla). */
@container (min-width: 560px) {
  .campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campo--textarea, .campo--checkbox, .campo--checkboxselectmultiple, .campo--selectmultiple, .campo--ancho { grid-column: 1 / -1; }
}
.campo input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.campo select,
.campo textarea,
.rechazo input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--campo-borde);
  border-radius: 12px;
  background: var(--superficie);
  color: var(--texto);
  font-size: 16px;
}
.campo textarea { resize: vertical; }
.campo select[multiple] { min-height: 150px; padding: 6px; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .rechazo input:focus { border-color: var(--primario-texto); outline: 0; box-shadow: 0 0 0 3px rgba(51, 65, 214, 0.15); }
.campo input[type="file"] { width: 100%; min-width: 0; max-width: 100%; font-size: 14px; }
.campo--clearablefile, .campo--variosarchivos { font-size: 14px; }

/* Elegir el ícono de un rubro o categoría mirando los dibujos */
.campo:has(> .elegir-icono) { grid-column: 1 / -1; }
.elegir-icono { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.elegir-icono-opcion { position: relative; display: grid; justify-items: center; align-content: start; gap: 5px; padding: 8px 4px 7px; border: 2px solid transparent; border-radius: 14px; cursor: pointer; text-align: center; }
.elegir-icono-opcion input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.elegir-icono-opcion .rubro-icono { width: 54px; height: 46px; border-radius: 14px; font-size: 24px; }
.elegir-icono-nombre { display: -webkit-box; overflow: hidden; color: var(--texto-2); font-size: 11.5px; font-weight: 600; line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.elegir-icono-opcion:hover { background: var(--superficie-2); }
.elegir-icono-opcion:has(input:checked) { border-color: var(--primario); background: var(--primario-claro); }
.elegir-icono-opcion:has(input:checked) .elegir-icono-nombre { color: var(--primario-texto); }
.elegir-icono-opcion:has(input:focus-visible) { outline: 3px solid #93a5ff; outline-offset: 2px; }
.campo--clearablefile a { color: var(--primario-texto); font-weight: 600; word-break: break-all; }
.campo--error input, .campo--error select, .campo--error textarea { border-color: var(--rojo) !important; }
.campo--checkboxselectmultiple > div { display: grid; gap: 6px; }
.campo--checkboxselectmultiple label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.campo input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--primario-texto); flex-shrink: 0; }
p.ayuda, .ayuda { color: var(--texto-2); font-size: 13px; line-height: 1.4; }
.error { color: var(--rojo); font-size: 13px; font-weight: 600; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; cursor: pointer; }
.check input { margin-top: 1px; }
.trampa { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.recien-cargado { background: var(--verde-claro) !important; }
.barra-guardar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.form-en-linea { display: grid; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--borde); container-type: inline-size; }
.form-en-linea .boton { justify-self: start; }
.form-pie { color: var(--texto-2); font-size: 14px; text-align: center; }
.form-pie a { color: var(--primario-texto); font-weight: 700; }
.ubicacion-ayuda { display: grid; gap: 10px; padding: 12px; border-radius: 14px; background: var(--primario-claro); grid-column: 1 / -1; }
.ubicacion-ayuda .boton { justify-self: start; }

.tabla-contenedor { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabla th { padding: 12px 14px; border-bottom: 1px solid var(--borde); color: var(--texto-3); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-align: left; text-transform: uppercase; }
.tabla td { padding: 12px 14px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla td small, .tabla .detalle { display: block; color: var(--texto-2); font-size: 13px; }
.tabla a:not(.boton-icono) { color: var(--primario-texto); font-weight: 600; }
.tabla .tabla-principal { color: var(--texto); font-weight: 700; }
.tabla .estado { margin-top: 0; }
.tabla-acciones { text-align: right; white-space: nowrap; }
.tabla-acciones form { display: inline; }
.nowrap { white-space: nowrap; }

.pasos { display: grid; gap: 14px; margin: 0; }
.pasos li { display: flex; align-items: flex-start; gap: 12px; }
.pasos b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--primario); color: #fff; flex-shrink: 0; }
.pasos span { color: var(--texto-2); font-size: 14px; }
.pasos strong { display: block; color: var(--texto); font-size: 15px; }

.ficha-aviso { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 28px 28px 0 0; background: var(--primario-claro); color: var(--azul-texto); font-size: 14px; }
.ficha-aviso span { flex: 1; }
.ficha-aviso--previa { background: var(--ambar-claro); color: var(--ambar-texto); }
.ficha-aviso + .ficha-cabeza { border-radius: 0; }

/* --- Información útil --- */

.icono-urgente { color: var(--rojo); font-size: 22px; }
.urgentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.urgente {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(140deg, var(--u-1, #dc2626), var(--u-2, #b91c1c));
  color: #fff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--u-2, #b91c1c) 25%, transparent);
}
.urgente:active { transform: scale(0.98); }
/* El color de la categoría (Gestión → Información útil → Categorías). Tonos oscuros
   para que el texto blanco se lea igual en el tema claro y en el oscuro. */
.urgente--rojo { --u-1: #dc2626; --u-2: #b91c1c; }
.urgente--naranja { --u-1: #ea580c; --u-2: #c2410c; }
.urgente--amarillo { --u-1: #d97706; --u-2: #a16207; }
.urgente--verde { --u-1: #16a34a; --u-2: #15803d; }
.urgente--celeste { --u-1: #0284c7; --u-2: #0369a1; }
.urgente--azul { --u-1: #2563eb; --u-2: #1d4ed8; }
.urgente--violeta { --u-1: #7c3aed; --u-2: #6d28d9; }
.urgente--rosa { --u-1: #db2777; --u-2: #be185d; }
.urgente-numero { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.urgente-nombre { display: flex; align-items: flex-start; gap: 5px; font-size: 14px; font-weight: 700; line-height: 1.2; }
.urgente-nombre .i { flex-shrink: 0; margin-top: 0.05em; font-size: 1.1em; opacity: 0.9; }
.urgente-accion { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.2); font-size: 13px; font-weight: 700; }
.urgentes--chicos { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.urgentes--chicos .urgente { padding: 12px; border-radius: 16px; }
.urgentes--chicos .urgente-numero { font-size: 26px; }
.urgentes--chicos .urgente-nombre { font-size: 12.5px; }
.urgente--mas { align-content: center; justify-items: start; gap: 6px; background: var(--superficie); color: var(--rojo); box-shadow: var(--sombra); }
.urgente--mas .i { font-size: 22px; }
.buscador--info { height: 50px; margin: 16px 0 4px; box-shadow: var(--sombra); font-size: 17px; }
.info-grupo { margin-top: 20px; }
.info-titulo { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 19px; font-weight: 800; }
.info-icono { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; font-size: 20px; }
.info-lista { display: grid; gap: 10px; }
.info-item { display: grid; gap: 10px; padding: 14px; border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); }
.info-texto h3 { font-size: 16.5px; font-weight: 800; }
.info-texto > p:not(.dato) { margin-top: 2px; color: var(--texto-2); font-size: 14px; }
.info-texto .dato span { white-space: normal; }
.info-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.info-acciones .boton .i { font-size: 16px; }

/* =====================================================================
 * Panel (comercios y gestión)
 * ===================================================================== */

body.panel .app { max-width: none; padding: 0 0 40px; overflow-x: visible; }
.panel-barra {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
  background: linear-gradient(160deg, var(--hero-1), var(--hero-2) 60%, var(--hero-3));
  color: #fff;
}
.panel-marca { display: flex; align-items: center; gap: 10px; }
.panel-marca .logo { font-size: 26px; }
.panel-marca span { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); font-size: 13px; font-weight: 700; }
.panel-barra-der { display: flex; align-items: center; gap: 2px; }
.panel-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; color: #fff; font-size: 14px; font-weight: 600; }
.panel-link:hover { background: rgba(255, 255, 255, 0.12); }
.panel-link .i { font-size: 20px; }

/* «Ver como el comercio»: Gestión mirando el panel de un comercio */
.ver-como { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 16px; background: var(--ambar-claro); color: var(--ambar-texto); border-bottom: 1px solid color-mix(in srgb, var(--ambar) 35%, transparent); font-size: 14.5px; line-height: 1.4; }
.ver-como p { display: flex; align-items: center; gap: 10px; margin: 0; }
.ver-como .i { flex-shrink: 0; font-size: 20px; }
.ver-como form { flex-shrink: 0; }

.panel-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 1280px; margin: 0 auto; padding: 16px; }
.panel-menu { display: flex; gap: 6px; margin: 0 -16px; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; }
.panel-menu::-webkit-scrollbar { display: none; }
.panel-menu a { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 9px 14px; border: 1px solid var(--borde); border-radius: 999px; background: var(--superficie); color: var(--texto); font-size: 14px; font-weight: 600; }
.panel-menu a .i { font-size: 18px; color: var(--texto-2); }
.panel-menu a.activo { border-color: transparent; background: var(--primario); color: #fff; }
.panel-menu a.activo .i { color: #fff; }
.contador-menu { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--rojo-punto); color: #fff; font-size: 12px; }
.panel-contenido { min-width: 0; }
.panel-contenido .tarjeta { margin: 0 0 16px; }
.avisos-panel { display: grid; gap: 8px; margin-bottom: 16px; }

.panel-cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-cabeza h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
.panel-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; color: var(--texto-2); font-size: 14px; }
.panel-sub a { color: var(--primario-texto); font-weight: 600; }
.miga { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 6px; color: var(--primario-texto); font-size: 14px; font-weight: 600; }
.panel-contenido > .aviso { margin-bottom: 16px; }

.pestanas-panel { display: flex; gap: 4px; margin-bottom: 16px; overflow-x: auto; border-bottom: 1px solid var(--borde); scrollbar-width: none; }
.pestanas-panel a { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 10px 14px; border-bottom: 3px solid transparent; color: var(--texto-2); font-weight: 600; }
.pestanas-panel a.activo { border-bottom-color: var(--primario-texto); color: var(--primario-texto); }

.columnas { display: grid; gap: 16px; margin-bottom: 16px; }
.panel-contenido .columnas > .tarjeta { margin: 0; }

.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { display: grid; gap: 6px; padding: 16px; border-radius: 18px; background: var(--superficie); box-shadow: var(--sombra); }
.kpi span { color: var(--texto-2); font-size: 13.5px; font-weight: 600; }
.kpi strong { font-size: 32px; font-weight: 800; line-height: 1; }
.kpi--alerta { background: var(--ambar-claro); }
.kpi--alerta strong { color: var(--ambar); }

.fila-simple { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.fila-simple:last-child { border-bottom: 0; }
.fila-simple small { display: block; color: var(--texto-2); font-size: 13px; }
.revisar { display: grid; gap: 10px; font-size: 14.5px; }
.revisar a { color: var(--primario-texto); font-weight: 600; }

.solicitud-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.solicitud-cabeza h2 { font-size: 20px; font-weight: 800; }
.datos { display: grid; gap: 10px; margin-top: 12px; }
.datos dt { color: var(--texto-3); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.datos dd { font-size: 14.5px; }
.datos a { color: var(--primario-texto); }
.rechazo { display: flex; flex: 1 1 280px; gap: 8px; }
.rechazo input { flex: 1; min-height: 44px; }

.tarjeta-comercio { display: grid; gap: 14px; }
.tarjeta-comercio-img { height: 150px; overflow: hidden; border-radius: 14px; }
.tarjeta-comercio-img img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-comercio-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tarjeta-comercio-titulo h2 { font-size: 20px; font-weight: 800; }
.falta { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; color: var(--ambar); font-size: 14px; font-weight: 600; }
.falta--ok { color: var(--verde); }
.falta--mal { color: var(--rojo); }

/* Gestión → Ayuda */
.ayuda-indice ol { display: grid; gap: 6px 24px; margin: 8px 0 0; padding-left: 22px; }
@media (min-width: 900px) { .ayuda-indice ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ayuda-indice a, .ayuda a { color: var(--primario-texto); font-weight: 600; }
.ayuda { display: grid; gap: 10px; font-size: 15px; line-height: 1.6; scroll-margin-top: 16px; }
.ayuda h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 19px; font-weight: 800; }
.ayuda h3 { margin: 8px 0 0; font-size: 16px; font-weight: 800; }
.ayuda ul, .ayuda ol { display: grid; gap: 6px; margin: 0; padding-left: 22px; }
.ayuda ul { list-style: disc; }
.ayuda p { margin: 0; }
.ayuda code { padding: 1px 6px; border-radius: 6px; background: var(--superficie-2); font-size: 13.5px; }
.ayuda details { padding: 10px 14px; border: 1px solid var(--borde); border-radius: 12px; }
.ayuda details[open] { display: grid; gap: 8px; }
.ayuda summary { cursor: pointer; font-weight: 700; }
.ayuda .tabla { font-size: 14px; }

/* «Tu ficha está completa al 70 %»: barra y lo que falta, con link a dónde se carga */
.completa { display: grid; gap: 8px; margin: 12px 0; padding: 12px 14px; border: 1px solid var(--borde); border-radius: 14px; background: var(--superficie); }
.panel-cabeza + .completa, .pestanas-panel + .completa { margin-top: 0; }
.completa-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 14.5px; }
.completa-cabeza strong { display: inline-flex; align-items: center; gap: 6px; }
.completa-cabeza span { color: var(--texto-2); font-size: 13px; white-space: nowrap; }
.completa-barra { overflow: hidden; height: 8px; border-radius: 999px; background: var(--superficie-2); }
.completa-barra span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ambar), var(--verde)); }
.completa-faltan { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.completa-faltan a { color: var(--primario-texto); font-weight: 600; }
.completa-faltan a::before { content: "+ "; }
.completa--lista { border-color: color-mix(in srgb, var(--verde) 40%, var(--borde)); }
.completa--lista .completa-cabeza strong { color: var(--verde); }
.completa--lista .completa-barra span { background: var(--verde); }

.turnos-editor { display: grid; gap: 10px; }
.turno { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--borde); border-radius: 14px; background: var(--superficie-2); }
.turno--error { border-color: var(--rojo); background: var(--rojo-claro); }
.turno--quitado { opacity: 0.5; }
.turno-horas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.turno-horas label { display: grid; gap: 4px; color: var(--texto-2); font-size: 13px; font-weight: 700; }
.turno-horas input { min-height: 44px; padding: 8px 10px; border: 1px solid var(--campo-borde); border-radius: 10px; background: var(--superficie); font-size: 16px; }
.turno-dias { display: flex; flex-wrap: wrap; gap: 6px; }
.dia { position: relative; }
.dia input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dia span { display: inline-grid; place-items: center; min-width: 48px; height: 38px; padding: 0 10px; border: 1px solid var(--campo-borde); border-radius: 10px; background: var(--superficie); color: var(--texto-2); font-size: 13.5px; font-weight: 700; }
.dia input:checked + span { border-color: var(--primario-texto); background: var(--primario); color: #fff; }
.dia--fer input:checked + span { border-color: var(--ambar); background: var(--ambar); }
.dia input:focus-visible + span { outline: 3px solid #93a5ff; }
.turno-atajos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.turno-atajos button { padding: 5px 10px; border-radius: 999px; background: var(--primario-claro); color: var(--primario-texto); font-size: 12.5px; font-weight: 700; }
.turno-quitar { position: relative; display: inline-flex; margin-left: auto; }
.turno-quitar input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.turno-quitar span { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; background: var(--rojo-claro); color: var(--rojo); font-size: 12.5px; font-weight: 700; }
.turno-quitar input:checked + span { background: var(--rojo); color: #fff; }
.semana.semana--una { grid-template-columns: 1fr; }
.subtitulo { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; font-size: 15px; font-weight: 800; }
.lista-simple { display: grid; gap: 4px; color: var(--texto-2); font-size: 14px; }

.fotos-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 12px 0 4px; }
.fotos-panel figure { position: relative; margin: 0; overflow: hidden; border-radius: 12px; background: var(--superficie-2); aspect-ratio: 4 / 3; }
.fotos-panel img { width: 100%; height: 100%; object-fit: cover; }

.promo-fila { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--borde); }
.promo-fila:last-child { border-bottom: 0; }
.promo-fila .promo { width: 100%; }
.promo-fila-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.filtros .campo { flex: 1 1 180px; }
.filtros .campo input, .filtros .campo select { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--campo-borde); border-radius: 12px; background: var(--superficie); font-size: 15px; }
.filtros .campo span { font-size: 13px; font-weight: 700; }
.paginas { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px 0; color: var(--texto-2); font-size: 14px; }

@media (max-width: 640px) {
  .panel-link span { display: none; }
  .panel-cabeza h1 { font-size: 22px; }
}

@media (min-width: 700px) {
  .datos { grid-template-columns: 1fr 1fr; }
  .pasos { grid-template-columns: repeat(3, 1fr); }
  .tarjeta-comercio { grid-template-columns: 200px minmax(0, 1fr); }
  .tarjeta-comercio-img { height: 100%; min-height: 150px; }
  .promo-fila { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .promo-fila-acciones { flex-direction: column; align-items: flex-end; }
}

/* =====================================================================
 * Pantallas grandes (PC): barra arriba, contenido a lo ancho
 * ===================================================================== */

@media (min-width: 960px) {
  :root { --ancho: 1180px; }
  html { scroll-padding-top: 130px; }
  body { background: var(--fondo); }
  .app { max-width: none; min-height: 0; padding: 64px 0 48px; background: none; box-shadow: none; }

  .nav {
    top: 0;
    bottom: auto;
    left: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    max-width: none;
    height: 64px;
    padding: 0 max(24px, calc((100% - var(--ancho)) / 2 + 16px));
    border-radius: 0;
    box-shadow: 0 1px 0 var(--borde), 0 4px 18px rgba(16, 24, 64, 0.05);
    transform: none;
  }
  .nav-marca { display: flex; margin-right: auto; color: var(--primario-texto); }
  .nav-marca .logo { font-size: 26px; }
  .nav-item { flex-direction: row; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 15px; }
  .nav-item .i { font-size: 20px; }
  .nav-item.activo { background: var(--primario-claro); }
  .nav-cuenta { display: inline-flex; align-items: center; gap: 8px; height: 40px; margin-left: 6px; padding: 0 16px; border-radius: 999px; background: var(--primario); color: #fff; font-size: 14.5px; font-weight: 700; }
  .nav-cuenta--claro { margin-left: 10px; background: var(--primario-claro); color: var(--primario-texto); }
  .toast { bottom: 24px; }
  .avisos-flotantes { top: 76px; }
  .aviso-cookies { left: auto; right: 24px; bottom: 24px; transform: none; }
  .aviso-cookies:not([hidden]) { grid-template-columns: auto minmax(0, 1fr) auto; }
  .aviso-cookies .boton { grid-column: auto; }
  .pie-legal { padding-top: 40px; }

  .hero { padding: 40px max(32px, calc((100% - var(--ancho)) / 2 + 32px)) 76px; }
  .hero--plano { padding-bottom: 40px; }
  .hero-barra:has(.volver) .logo { display: none; }
  .hero-titulo { font-size: 54px; }
  .hero-titulo--chico { font-size: 42px; }
  .hero-deco { right: max(24px, calc((100% - var(--ancho)) / 2)); width: 300px; height: 300px; }
  .hero-rubro .rubro-icono--grande { width: 92px; height: 92px; font-size: 48px; }
  .buscador--hero { width: calc(100% - 64px); max-width: calc(var(--ancho) - 64px); margin: -29px auto 0; }
  .seccion, .chips { max-width: var(--ancho); margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; }
  .seccion { margin-top: 32px; }
  .hero--compacto + .seccion--primera, .hero--oscuro + .seccion--primera { margin-top: -34px; }
  .pie { max-width: var(--ancho); margin: 0 auto; }

  .carrusel { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin: 0; padding: 4px 0 12px; overflow: visible; }
  .carrusel > * { width: auto; }
  .carrusel--rubros { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 16px 12px; }
  .carrusel--rubros .rubro-tile { width: auto; }
  .carrusel--promos { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); padding: 0 16px 12px; }
  .mini-img { height: 130px; }
  .lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .grilla-rubros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grilla-promos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .banner-promos { min-height: 190px; padding: 28px 40px; }
  .banner-promos-deco { top: 50%; right: 48px; bottom: auto; width: 160px; height: 160px; transform: translateY(-50%) rotate(-18deg); }
  .banner-promos-deco .i { width: 160px; height: 160px; }
  .info-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .info-item { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .info-acciones { justify-content: flex-end; }
  .urgentes { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
  .urgentes--chicos { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .botonera--cabeza { margin-top: 0; }
  .turnos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .turnos-dia + .turnos-dia { border-top: 0; }
  .turnos-dia { border-bottom: 1px solid var(--borde); }

  /* Ficha: portada ancha y dos columnas */
  .ficha { max-width: var(--ancho); margin: 24px auto 0; padding: 0 32px; }
  .ficha-portada { height: 420px; overflow: hidden; border-radius: 28px; }
  .ficha-barra { top: 16px; left: 16px; right: 16px; }
  /* La hoja tiene el mismo ancho que la foto: los bordes quedan alineados y la foto
     se ve solo detrás de las esquinas redondeadas de arriba. */
  .ficha-hoja { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 20px; margin-top: -48px; }
  .galeria-contador { right: 20px; bottom: 64px; }
  .ficha-aviso, .pestanas, #promociones, #fotos, .ficha-hoja > .pie { grid-column: 1 / -1; }
  .ficha-cabeza { grid-column: 1; grid-template-columns: 96px minmax(0, 1fr); padding: 24px 24px 18px; border-radius: 28px 0 0 0; }
  .ficha-aviso + .ficha-cabeza { border-radius: 0; }
  .ficha-acciones { grid-column: 2; align-content: center; margin-left: -21px; padding: 18px 24px 18px 45px; border-radius: 0 28px 0 0; }
  .ficha-aviso + .ficha-cabeza + .ficha-acciones { border-radius: 0; }
  .ficha-nombre { font-size: 32px; }
  .ficha-logo { width: 96px; height: 96px; }
  .pestanas { top: 64px; padding: 0 16px; }
  .ficha .tarjeta { margin: 20px 0 0; }
  .ficha #informacion { grid-column: 1; }
  .ficha #horarios { grid-column: 2; }
  .mapa { height: 160px; }
  .fotos { grid-template-columns: repeat(4, 1fr); }
  .semana { grid-template-columns: 1fr; }

  /* Panel */
  .panel-barra { padding: 12px max(24px, calc((100% - 1280px) / 2 + 24px)); }
  .ver-como { padding: 10px max(24px, calc((100% - 1280px) / 2 + 24px)); }
  .panel-layout { grid-template-columns: 240px minmax(0, 1fr); align-items: start; gap: 24px; padding: 24px; }
  .panel-menu { position: sticky; top: 84px; flex-direction: column; margin: 0; padding: 12px; overflow: visible; border-radius: 20px; background: var(--superficie); box-shadow: var(--sombra); }
  .panel-menu a { border: 0; border-radius: 12px; background: none; padding: 10px 12px; }
  .panel-menu a.activo { background: var(--primario-claro); color: var(--primario-texto); }
  .panel-menu a.activo .i { color: var(--primario-texto); }
  .contador-menu { margin-left: auto; }
  .columnas { grid-template-columns: 1fr 1fr; align-items: start; }
  .columnas--horarios { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =====================================================================
 * Componentes agregados: reportes, ajustes, mapa, estadísticas, legales
 * ===================================================================== */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rubro-tile--fila .rubro-nombre { display: block; -webkit-line-clamp: unset; }
.nav-item { min-width: 0; }
.nav-item span { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }

/* Reportar un error */
.reportar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 12px 0; padding: 14px 16px; border: 1px dashed var(--campo-borde); border-radius: var(--radio); color: var(--texto-2); font-size: 14px; }
.reportar > span { display: inline-flex; align-items: center; gap: 8px; }
.reportar .i { color: var(--ambar); }

.dialogo { width: min(520px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 22px; background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-alta); }
.dialogo::backdrop { background: rgba(6, 9, 20, 0.6); }
.dialogo-caja { display: grid; gap: 14px; padding: 18px; }
.dialogo-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dialogo-cabeza h2 { font-size: 18px; font-weight: 800; line-height: 1.2; }
.opciones { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.opcion { position: relative; display: block; cursor: pointer; }
.opcion input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.opcion span { display: block; padding: 10px 12px; border: 1px solid var(--campo-borde); border-radius: 12px; background: var(--superficie); font-size: 14.5px; font-weight: 600; }
.opcion input:checked + span { border-color: var(--primario); background: var(--primario-claro); color: var(--primario-texto); }
.opcion input:focus-visible + span { outline: 3px solid #93a5ff; }

/* Ajustes (Más): apariencia y notificaciones */
.ajustes { display: grid; gap: 16px; }
.ajuste { display: grid; gap: 10px; }
.ajuste + .ajuste { padding-top: 16px; border-top: 1px solid var(--borde); }
.ajuste-texto strong { display: block; font-size: 16px; }
.ajuste-texto small { color: var(--texto-2); font-size: 13px; }
.segmentos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: var(--superficie-3); }
.segmentos button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 6px 8px; border-radius: 10px; color: var(--texto-2); font-size: 14px; font-weight: 700; }
.segmentos button .i { font-size: 16px; }
.segmentos button[aria-checked="true"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }
.interruptor { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 600; cursor: pointer; }
.interruptor input { position: relative; flex-shrink: 0; width: 46px; height: 28px; margin: 0; border-radius: 999px; background: var(--campo-borde); appearance: none; cursor: pointer; transition: background 0.2s; order: 2; }
.interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.2s; }
.interruptor input:checked { background: var(--verde-punto); }
.interruptor input:checked::after { transform: translateX(18px); }
.interruptor input:disabled { opacity: 0.5; }

/* Mapa */
.hero--mapa { padding-bottom: 20px; }
.mapa-filtros .chips { margin-top: 14px; }
.chip--select { position: relative; padding-right: 10px; }
.chip--select select { max-width: 170px; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; appearance: none; cursor: pointer; }
.mapa-grande-caja { padding: 12px 16px 0; }
.mapa-grande { height: calc(100dvh - 300px); min-height: 380px; overflow: hidden; border-radius: 20px; background: var(--superficie-2); box-shadow: var(--sombra); }
.mapa-grande .leaflet-tile { filter: var(--filtro-mapa); }
.leaflet-container { font-family: var(--fuente); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-alta); }
.leaflet-popup-content { margin: 12px 14px; }
.leaflet-container a.leaflet-popup-close-button { color: var(--texto-3); }
.mapa-popup { display: grid; gap: 6px; min-width: 190px; }
.mapa-popup strong { font-size: 15px; }
.mapa-popup small { color: var(--texto-2); }
.mapa-popup .estado { margin-top: 0; }
.mapa-popup .boton { justify-self: start; color: #fff; }
.mapa-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; color: var(--texto-2); font-size: 13px; }
.ley { display: inline-block; width: 12px; height: 12px; margin-right: -8px; border: 2px solid var(--superficie); border-radius: 50%; box-shadow: 0 0 0 1px var(--borde); }
.ley--abierto { background: #16a34a; }
.ley--pronto { background: #f59e0b; }
.ley--turno { background: #4f46e5; }
.ley--cerrado { background: #dc2626; }

/* Páginas legales */
.legal { display: grid; gap: 12px; font-size: 15px; line-height: 1.6; }
.legal h2 { margin-top: 10px; font-size: 18px; font-weight: 800; }
.legal ul { display: grid; gap: 8px; padding-left: 20px; list-style: disc; }
.legal a { color: var(--primario-texto); font-weight: 600; }
.legal-pie { padding-top: 12px; border-top: 1px solid var(--borde); }
.pie a { color: var(--primario-texto); }

/* Panel: avisos con botones, indicadores, estadísticas, reportes */
.aviso--accion { flex-wrap: wrap; align-items: center; }
.aviso--accion > span { flex: 1 1 240px; }
.aviso-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.aviso-botones form { display: contents; }
.panel-sub--bloque { display: block; margin: 0 0 14px; }
.barra-guardar--separada { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--borde); }
.barra-guardar form { display: contents; }
.botonera--cabeza .boton.activo { background: var(--primario); color: #fff; }
.indicadores { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.indicadores a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--superficie-3); color: var(--texto-2); font-size: 13.5px; }
.indicadores strong { color: var(--texto); }
.indicador--alerta a { background: var(--ambar-claro); color: var(--ambar-texto); }
.indicador--alerta strong { color: inherit; }
.kpi-cambio { color: var(--texto-3); font-size: 12.5px; font-weight: 700; }
.kpi-cambio--sube { color: var(--verde); }
.kpi-cambio--baja { color: var(--rojo); }
.barras { display: flex; align-items: flex-end; gap: 3px; height: 140px; padding-top: 8px; border-bottom: 1px solid var(--borde); }
.barra { flex: 1; min-height: 2px; height: var(--alto); border-radius: 4px 4px 0 0; background: var(--superficie-3); }
.barra--con-datos { background: var(--primario); }
.barras-eje { display: flex; justify-content: space-between; margin-top: 6px; color: var(--texto-3); font-size: 12px; }
.ranking { display: grid; gap: 8px; margin: 0; padding-left: 22px; }
.ranking li { padding-left: 4px; }
.ranking a { color: var(--primario-texto); font-weight: 700; }
.ranking span { margin-left: 8px; color: var(--texto-2); font-size: 13.5px; }
.reporte { display: grid; gap: 6px; }
.reporte--resuelto { opacity: 0.75; }
.reporte-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.reporte-cabeza strong { font-size: 16px; }
.reporte-comercio { display: block; color: var(--primario-texto); font-size: 13.5px; font-weight: 700; }
.reporte-mensaje { color: var(--texto); font-style: italic; }
.importar-feriados { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.importar-feriados-texto { display: flex; flex: 1 1 260px; align-items: flex-start; gap: 10px; }
.importar-feriados-texto .i { font-size: 24px; }
.importar-feriados-texto small, .importar-feriados .check small { display: block; color: var(--texto-2); font-size: 12.5px; font-weight: 500; }
.campo--anio { width: 110px; }
.resumen-importacion { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
code { padding: 1px 6px; border-radius: 6px; background: var(--superficie-3); font-size: 0.92em; }

/* Pie legal (todas las páginas públicas) y aviso de cookies */
.pie-legal { display: grid; justify-items: center; gap: 8px; padding: 28px 24px 0; color: var(--texto-3); font-size: 13px; text-align: center; }
.pie-legal nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.pie-legal a { color: var(--primario-texto); font-weight: 600; }
.aviso-cookies {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-alto) + 14px + env(safe-area-inset-bottom));
  z-index: 25;
  width: min(calc(100% - 24px), 540px);
  padding: 14px 16px;
  border: 1px solid var(--borde);
  border-radius: 18px;
  background: var(--superficie);
  box-shadow: 0 10px 34px rgba(16, 24, 64, 0.18);
  font-size: 14px;
  line-height: 1.45;
  transform: translateX(-50%);
}
.aviso-cookies:not([hidden]) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 12px; }
.aviso-cookies p { margin: 0; color: var(--texto-2); }
.aviso-cookies a { color: var(--primario-texto); font-weight: 700; }
.aviso-cookies .boton { grid-column: 1 / -1; justify-self: end; }
.aviso-cookies-icono { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--ambar-claro); color: var(--ambar); font-size: 20px; }
.guardados { display: grid; gap: 0; margin: 0; }
.guardados > div { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.guardados > div:last-child { border-bottom: 0; }
.guardados dt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 700; }
.guardados dd { margin: 0; color: var(--texto-2); }
.guardados small { display: block; color: var(--texto-3); font-size: 13px; }
.etiqueta-legal { padding: 2px 9px; border-radius: 999px; background: var(--superficie-3); color: var(--texto-2); font-size: 12px; font-weight: 700; }
.borrar-datos { display: flex; flex-wrap: wrap; gap: 10px; }

/* Confiabilidad de los datos (panel del comercio y Gestión) */
.confiabilidad-cabeza { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; }
.confiabilidad-cabeza .ayuda { margin-top: 6px; }
.anillo { --tono: var(--verde); display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; background: conic-gradient(var(--tono) calc(var(--valor) * 1%), var(--superficie-3) 0); }
.anillo > span { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: var(--superficie); line-height: 1; }
.anillo strong { font-size: 30px; font-weight: 800; }
.anillo small { color: var(--texto-3); font-size: 12px; font-weight: 700; }
.anillo--turno { --tono: var(--primario); }
.anillo--pronto { --tono: var(--ambar); }
.anillo--cerrado { --tono: var(--rojo); }
.confiabilidad-nivel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.sello-mini { display: inline-flex; align-items: center; gap: 5px; color: var(--verde-texto); font-size: 13px; font-weight: 700; }
.sello-mini .i { font-size: 16px; }
.sin-insignia { color: var(--texto-2); font-size: 13px; font-weight: 600; }
.sin-insignia small { display: block; color: var(--texto-3); font-size: 12.5px; font-weight: 500; }
.confiabilidad-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0 0; }
.confiabilidad-datos > div { padding: 10px 12px; border-radius: 12px; background: var(--superficie-2); }
.confiabilidad-datos dt { color: var(--texto-2); font-size: 12.5px; font-weight: 600; }
.confiabilidad-datos dd { margin: 2px 0 0; font-size: 20px; font-weight: 800; }
.confiabilidad-sub { margin: 18px 0 8px; font-size: 15px; font-weight: 800; }
.factores { display: grid; margin: 0; padding: 0; list-style: none; }
.factores li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.factores li:last-child { border-bottom: 0; }
.factores strong { display: block; font-size: 14.5px; }
.factores small { display: block; color: var(--texto-2); font-size: 13px; }
.factor-puntos { display: grid; place-items: center; height: 30px; border-radius: 9px; background: var(--rojo-claro); color: var(--rojo); font-size: 14px; font-weight: 800; }
.bien { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 14px 0 0; padding: 0; list-style: none; color: var(--verde-texto); font-size: 13.5px; font-weight: 600; }
.bien li { display: inline-flex; align-items: center; gap: 6px; }
.puntaje { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding: 2px 10px 2px 7px; border-radius: 999px; background: var(--verde-claro); color: var(--verde-texto) !important; font-size: 13px; font-weight: 700; }
.puntaje .i { font-size: 15px; }
.puntaje--turno { background: var(--primario-claro); color: var(--primario-texto) !important; }
.puntaje--pronto { background: var(--ambar-claro); color: var(--ambar-texto) !important; }
.puntaje--cerrado { background: var(--rojo-claro); color: var(--rojo-texto) !important; }
.indicador--abierto a { background: var(--verde-claro); color: var(--verde-texto); }
.indicador--turno a { background: var(--primario-claro); color: var(--primario-texto); }
.indicador--pronto a { background: var(--ambar-claro); color: var(--ambar-texto); }
.indicador--cerrado a { background: var(--rojo-claro); color: var(--rojo-texto); }
.indicadores li[class^="indicador--"] strong { color: inherit; }
.botonera--filtro { margin-bottom: 16px; }
.kpi-de { color: var(--texto-3); font-size: 15px; font-weight: 700; }
.seccion-panel { margin: 22px 0 6px; font-size: 18px; font-weight: 800; }
.barras-tipo { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.barras-tipo li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 14px; }
.barras-tipo li::after { content: ""; grid-column: 1 / -1; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--primario) calc(var(--parte) * 1%), var(--superficie-3) 0); }
.barras-tipo strong { font-weight: 800; }
@media (max-width: 440px) {
  .confiabilidad-cabeza { grid-template-columns: 1fr; justify-items: start; }
  .factores li { grid-template-columns: 44px minmax(0, 1fr); }
  .factores li .boton { grid-column: 2; justify-self: start; }
}
@media (min-width: 700px) {
  .confiabilidad-datos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Gestión → Configuración */
.pila { display: grid; gap: 16px; min-width: 0; }
.panel-contenido .pila > .tarjeta { margin: 0; }
.servicios { display: grid; margin: 0; padding: 0; list-style: none; }
.servicios li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.servicios li:last-child { padding-bottom: 0; border-bottom: 0; }
.servicios strong { display: block; font-size: 15px; }
.servicios small { display: block; overflow-wrap: anywhere; color: var(--texto-2); font-size: 13px; }
.servicio-icono { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--primario-claro); color: var(--primario-texto); font-size: 18px; }

/* Tablas que se vuelven tarjetas cuando no entran (celular, tablet o panel angosto) */
.tabla-contenedor { container-type: inline-size; }
@container (max-width: 920px) {
  .tabla--tarjetas thead { display: none; }
  .tabla--tarjetas, .tabla--tarjetas tbody { display: block; }
  .tabla--tarjetas tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; padding: 12px 14px; border-bottom: 1px solid var(--borde); }
  .tabla--tarjetas tr:last-child { border-bottom: 0; }
  .tabla--tarjetas td { display: block; grid-column: 1; padding: 0; border: 0; }
  .tabla--tarjetas td.vacio { grid-column: 1 / -1; padding: 16px 0; }
  .tabla--tarjetas td[data-titulo]:not(.tabla-celda-principal)::before { content: attr(data-titulo) ": "; color: var(--texto-3); font-size: 12px; font-weight: 700; }
  .tabla--tarjetas td.tabla-celda-principal { font-size: 15.5px; }
  .tabla--tarjetas td.tabla-acciones { grid-column: 2; grid-row: 1 / span 8; align-self: start; text-align: right; }
  .tabla--tarjetas .estado { display: inline-flex; }
  .tabla .nowrap { white-space: normal; }
}

@media (min-width: 960px) {
  .reportar { margin: 20px 0 0; grid-column: 1 / -1; }
  .mapa-grande-caja, .mapa-filtros .chips { max-width: var(--ancho); margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; }
  .mapa-grande { height: calc(100dvh - 290px); }
  .kpis--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ajustes { grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .ajuste + .ajuste { padding-top: 0; padding-left: 24px; border-top: 0; border-left: 1px solid var(--borde); }
}

/* --- Hoy: «Hoy no abrimos / Hoy cerramos a las…» (panel) ---------------------- */
.hoy-rapido { display: grid; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--superficie-2); }
.tarjeta--hoy { padding: 4px 16px 16px; }
.tarjeta--hoy .hoy-rapido { background: none; padding: 0; }
.hoy-rapido--cambiado { background: var(--ambar-claro); color: var(--ambar-texto); }
.hoy-rapido-estado { display: flex; align-items: flex-start; gap: 8px; font-size: 14.5px; }
.hoy-rapido-estado .i { margin-top: 2px; color: var(--primario-texto); }
.hoy-rapido--cambiado .hoy-rapido-estado .i { color: var(--ambar); }
.hoy-rapido form { display: contents; }
.hoy-rapido .boton { justify-self: start; }
.hoy-rapido-cambiar > summary { list-style: none; cursor: pointer; }
.hoy-rapido-cambiar > summary::-webkit-details-marker { display: none; }
.hoy-rapido-cambiar[open] > summary { margin-bottom: 12px; }
.hoy-rapido-cambiar .hoy-rapido-form { display: grid; gap: 12px; }
.hoy-rapido-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.hoy-rapido-hora { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.hoy-rapido-hora input { height: 42px; padding: 0 10px; border: 1px solid var(--campo-borde); border-radius: 12px; background: var(--superficie); color: var(--texto); font: inherit; }
.hoy-rapido .ayuda { margin: 0; }
.falta--feriado { color: var(--azul-texto); font-weight: 500; }
.falta--feriado .i { color: var(--primario-texto); }
.falta--feriado a { color: var(--primario-texto); font-weight: 700; }
:root[data-tema="oscuro"] .falta--feriado { color: var(--texto-2); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .falta--feriado { color: var(--texto-2); } }

/* --- Ficha: aviso de hoy y carta / precios ------------------------------------ */
.hoy-motivo { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--ambar); font-size: 14px; font-weight: 700; }
.actualizada { color: var(--texto-3); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.fotos--carta { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.fotos--carta:empty { display: none; }
.fotos--carta .foto { aspect-ratio: 3 / 4; }
.fotos--carta .foto img { object-position: top; }
.carta-pdfs { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.carta-pdfs:empty { display: none; }
.fotos--carta:not(:empty) + .carta-pdfs:not(:empty) { margin-top: 10px; }
.carta-pdfs a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--superficie-2); font-weight: 700; }
.carta-pdfs a > .i:first-child { color: var(--rojo); font-size: 24px; }
.carta-pdfs a > .i:last-child { margin-left: auto; color: var(--texto-3); }
.carta-pdfs small { display: block; color: var(--texto-2); font-size: 12.5px; font-weight: 500; }

/* --- Carta en el panel --------------------------------------------------------- */
.carta-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 12px 0 4px; padding: 0; list-style: none; }
.carta-panel li { display: grid; gap: 6px; }
.carta-panel-img, .carta-panel-pdf { display: block; overflow: hidden; border-radius: 12px; background: var(--superficie-2); aspect-ratio: 3 / 4; }
.carta-panel-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.carta-panel-pdf { display: grid; place-content: center; justify-items: center; gap: 8px; padding: 12px; text-align: center; font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; }
.carta-panel-pdf .i { color: var(--rojo); font-size: 34px; }
.carta-panel-pdf small { display: block; color: var(--texto-2); font-weight: 500; }
.carta-panel-fecha { color: var(--texto-3); font-size: 12.5px; }
.carta-panel-acciones { display: flex; gap: 4px; }

/* --- Cartel con QR ------------------------------------------------------------- */
.cartel-opciones { display: grid; gap: 12px; }
.cartel-opciones .botonera { margin-top: 0; }
.botonera .boton.activo { background: var(--primario); color: #fff; }
.cartel-hoja { display: grid; grid-template-rows: minmax(0, 1fr); width: min(100%, 520px); margin: 0 auto 24px; overflow: hidden; border-radius: 6px; background: #fff; box-shadow: var(--sombra-alta); aspect-ratio: 210 / 297; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cartel-hoja--chico { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); }
.cartel-hoja--chico .cartel { outline: 1px dashed #c5cbe0; outline-offset: -1px; }
/* Todo se mide en cqw (1 % del ancho del cartel): el mismo diseño sirve para A4 y para los chicos. */
.cartel { container-type: inline-size; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: #fff; color: #111842; font-family: var(--fuente); text-align: center; }
.cartel-cabeza { display: flex; flex-direction: column; align-items: center; gap: 0.8cqw; padding: 3.6cqw 6cqw 3cqw; background: #3341d6; color: #fff; }
.cartel-cabeza .logo { font-size: 8.4cqw; }
.cartel-cabeza span:not(.logo) { font-size: 3cqw; font-weight: 600; opacity: 0.85; }
.cartel-cuerpo { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 1.8cqw; min-height: 0; padding: 3cqw 8cqw; }
.cartel-comercio { display: flex; align-items: center; justify-content: center; gap: 3cqw; max-width: 100%; }
.cartel-logo { width: 11cqw; height: 11cqw; flex-shrink: 0; border-radius: 2.4cqw; object-fit: cover; }
.cartel-nombre { font-size: 6.6cqw; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.cartel-nombre--largo { font-size: 5.2cqw; }
.cartel-titulo { margin-top: 0.6cqw; color: #3341d6; font-size: 8.6cqw; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.cartel-texto { max-width: 80cqw; color: #5b6482; font-size: 3.3cqw; line-height: 1.35; }
.cartel-qr { width: 46cqw; flex-shrink: 0; margin-top: 1cqw; padding: 3.2cqw; border: 1cqw solid #3341d6; border-radius: 4.6cqw; background: #fff; }
.cartel-qr svg { display: block; width: 100%; height: auto; }
.cartel-url { color: #111842; font-size: 3.4cqw; font-weight: 700; letter-spacing: 0.01em; }
.cartel-pie { flex-shrink: 0; padding: 2.8cqw 6cqw; background: #eef1ff; color: #1e2a8a; font-size: 3cqw; font-weight: 700; }

/* --- Reportes -------------------------------------------------------------------- */
.reporte-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; }
.reporte-barra .botonera--filtro { margin: 0; }
.botonera--filtro .boton.activo { background: var(--primario); color: #fff; }
.filtro-comercio .campo { min-width: 220px; }
.tarjeta-titulo--lateral { padding: 12px 16px 4px; }
.nota--lateral { padding: 0 16px 12px; }
.tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.datos-reporte { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; margin: 12px 0 0; }
.datos-reporte dt { color: var(--texto-2); font-size: 13px; font-weight: 600; }
.datos-reporte dd { margin: 2px 0 0; font-size: 24px; font-weight: 800; }
.kpis--web .kpi { color: inherit; }
a.kpi:hover { box-shadow: var(--sombra-alta); }
.lista-simple--columnas { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); column-gap: 16px; margin: 0; padding-left: 18px; }
.lista-simple--columnas a { color: var(--primario-texto); font-weight: 600; }
.fila-apagada td { color: var(--texto-3); }
.fila-apagada .tabla-principal { color: var(--texto-3) !important; text-decoration: line-through; }

/* --- Feriados (público) ---------------------------------------------------------- */
.feriado-destacado { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 22px; background: linear-gradient(135deg, var(--primario-claro), var(--superficie)); border: 1px solid var(--primario-borde); }
.feriado-hoja { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 74px; height: 80px; flex-shrink: 0; overflow: hidden; border-radius: 16px; background: var(--superficie); box-shadow: var(--sombra); line-height: 1; }
.feriado-hoja b { align-self: stretch; padding: 5px 0; background: var(--rojo); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-align: center; text-transform: uppercase; }
.feriado-hoja strong { margin-top: 6px; font-size: 30px; font-weight: 800; }
.feriado-hoja small { margin: 2px 0 6px; color: var(--texto-2); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.feriado-texto { display: grid; gap: 2px; min-width: 0; }
.feriado-texto small { color: var(--primario-texto); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.feriado-texto strong { font-size: 19px; font-weight: 800; line-height: 1.2; }
.feriado-texto span { color: var(--texto-2); font-size: 14px; }
.seccion-cantidad { padding: 2px 9px; border-radius: 99px; background: var(--superficie-3); color: var(--texto-2); font-size: 13px; font-weight: 700; }
.feriado-rubro { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; color: var(--texto-2); font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.feriado-rubro:first-of-type { margin-top: 0; }
.feriado-lista { overflow: hidden; margin: 0; padding: 0; border-radius: 18px; background: var(--superficie); box-shadow: var(--sombra); list-style: none; }
.feriado-lista li + li { border-top: 1px solid var(--borde); }
.feriado-lista a { display: grid; gap: 3px; padding: 12px 14px; }
.feriado-lista strong { font-size: 15.5px; }
.feriado-lista small { color: var(--texto-2); font-size: 13.5px; }
.feriado-lista .estado { margin-top: 2px; }
.feriado-cerrados { margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: var(--superficie-2); }
.feriado-cerrados summary { cursor: pointer; color: var(--texto-2); font-weight: 700; }
.feriado-cerrados ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px 16px; margin: 10px 0 0; padding-left: 18px; color: var(--texto-2); font-size: 14px; }
.turnos-dia--elegido { background: var(--primario-claro); }
.aviso-turno--feriado .aviso-turno-icono { background: var(--rojo); }
.aviso-turno--feriado .aviso-turno-texto small { color: var(--rojo); }

@media (min-width: 960px) {
  .columnas--reporte { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .kpis--web { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* --- Imprimir (reportes): solo el contenido, sin menú ni botones --------------- */
@media print {
  .panel-barra, .ver-como, .panel-menu, .pestanas-panel, .botonera--filtro, .filtro-comercio, [data-imprimir] { display: none !important; }
  .panel-layout { display: block; padding: 0; }
  .barra { animation: none; }
  .tarjeta, .kpi { box-shadow: none; border: 1px solid #dde1ee; break-inside: avoid; }
  body { background: #fff; }
}

/* --- Envío, retiro y medios de pago ------------------------------------------- */
.servicios-comercio { display: grid; gap: 10px; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--borde); list-style: none; }
.servicios-comercio li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; }
.servicios-comercio li > .i { flex-shrink: 0; margin-top: 1px; color: var(--primario-texto); font-size: 20px; }
.servicios-comercio small { display: block; color: var(--texto-2); font-size: 13.5px; }
.dato--servicios { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--verde); font-size: 12.5px; font-weight: 700; }
.dato--servicios span { display: inline-flex; align-items: center; gap: 4px; }

/* --- «Avisame cuando abra» -------------------------------------------------------- */
.avisar-apertura { justify-self: start; margin-top: 8px; }
.avisar-apertura--pedido { background: var(--verde-claro); color: var(--verde-texto); }
:root[data-tema="oscuro"] .avisar-apertura--pedido { color: var(--verde-acento); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .avisar-apertura--pedido { color: var(--verde-acento); } }

/* --- ¿Qué va a estar abierto? ------------------------------------------------------- */
.enlace-que-abre { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: var(--primario-claro); color: var(--primario-texto); font-size: 14px; font-weight: 700; }
.enlace-que-abre > .i:last-child { margin-left: auto; flex-shrink: 0; }
.que-abre-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.que-abre-form .campo:nth-of-type(3), .que-abre-envio, .que-abre-form .boton { grid-column: 1 / -1; }
.que-abre-form select, .que-abre-form input[type="time"] { width: 100%; height: 46px; padding: 0 12px; border: 1px solid var(--campo-borde); border-radius: 12px; background: var(--superficie); color: var(--texto); font: inherit; }
.que-abre-atajos { margin-top: 12px; }
.feriado-lista .estado { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

@media (min-width: 700px) {
  .que-abre-form { grid-template-columns: 1.2fr 0.8fr 1.4fr auto; }
  .que-abre-form .campo:nth-of-type(3) { grid-column: auto; }
  .que-abre-form .boton { grid-column: auto; }
  .que-abre-envio { grid-column: 1 / -1; order: 5; }
}

/* Reportes «Por comercio» en pantallas angostas: los números en una línea, no uno por renglón. */
@container (max-width: 920px) {
  .tabla--reporte tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
  .tabla--reporte td.tabla-celda-principal { flex-basis: 100%; }
  .tabla--reporte td.num { text-align: left; font-size: 14px; }
}

/* --- «Nos avalan:» en el encabezado: logos en blanco (no es publicidad) ------- */

.apoyos { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin-top: 12px; color: rgba(255, 255, 255, 0.8); font-size: 12.5px; }
.apoyos-titulo { flex-shrink: 0; font-weight: 600; }
.apoyos-lista { display: flex; align-items: center; gap: 14px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.apoyos-lista li { display: flex; align-items: center; flex-shrink: 0; }
.apoyos-lista li + li { padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, 0.3); }
.apoyos-lista li:nth-child(n+3) { display: none; }
.apoyos-lista a { display: flex; opacity: 0.9; transition: opacity 0.2s; }
.apoyos-lista a:hover, .apoyos-lista a:focus-visible { opacity: 1; }
.apoyos-lista img { display: block; width: auto; height: 24px; max-width: 120px; object-fit: contain; }
.apoyos-nombre { color: #fff; font-weight: 600; }
.apoyos-mas { flex-shrink: 0; padding: 2px 9px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px; color: #fff; font-size: 12px; font-weight: 600; }
.apoyos-mas--pc { display: none; }
@media (min-width: 960px) {
  .apoyos { margin-top: 16px; font-size: 14px; gap: 16px; }
  .apoyos-lista { gap: 18px; }
  .apoyos-lista li + li { padding-left: 18px; }
  .apoyos-lista li:nth-child(n+3) { display: flex; }
  .apoyos-lista li:nth-child(n+5) { display: none; }
  .apoyos-lista img { height: 30px; max-width: 170px; }
  .apoyos-mas--movil { display: none; }
  .apoyos-mas--pc { display: inline-block; }
}
.apoyos-pagina { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.apoyos-pagina li { display: flex; align-items: center; gap: 14px; margin: 0; }
.apoyos-pagina-logo { display: grid; place-items: center; flex-shrink: 0; width: 110px; height: 56px; padding: 6px; border-radius: 12px; background: #fff; color: #1f2544; font-size: 24px; }
.apoyos-pagina-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.apoyos-pagina-texto { display: grid; gap: 2px; min-width: 0; }
.apoyos-pagina-texto small { color: var(--texto-2); font-size: 13px; }
.apoyos-pagina li > .boton { margin-left: auto; }

/* --- Agenda del pueblo -------------------------------------------------------- */

.evento-tarjeta { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--borde); border-radius: 18px; background: var(--superficie); color: var(--texto); }
.evento-tarjeta > .i:last-child { flex-shrink: 0; margin-left: auto; color: var(--texto-3); }
.evento-fecha { display: grid; place-items: center; align-content: center; flex-shrink: 0; width: 54px; height: 58px; border-radius: 14px; line-height: 1; }
.evento-fecha b { font-size: 22px; font-weight: 800; }
.evento-fecha small { margin-top: 3px; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.evento-texto { display: grid; gap: 2px; min-width: 0; }
.evento-texto strong { display: -webkit-box; overflow: hidden; font-size: 15.5px; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.evento-texto > span { overflow: hidden; color: var(--texto-2); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.evento-cat { display: inline-flex; align-items: center; gap: 4px; color: var(--texto-3); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; }
.evento-cat .i { font-size: 13px; }
.evento-cat--hero { position: relative; margin-top: 4px; color: inherit; opacity: 0.8; }
.carrusel--eventos > .evento-tarjeta { width: min(300px, 82vw); }
.agenda-dia { margin: 18px 4px 8px; font-size: 17px; font-weight: 800; }
.agenda-dia:first-child { margin-top: 0; }
.agenda-lista { display: grid; gap: 10px; }
@media (min-width: 720px) { .agenda-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.seccion--agenda { margin-top: 20px; }
/* El feriado: un renglón a todo el ancho, antes de los eventos de ese día. */
.agenda-feriado { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-radius: 14px; background: color-mix(in srgb, var(--rojo) 6%, var(--superficie)); color: var(--texto); }
.agenda-feriado > .i:first-child { flex-shrink: 0; color: var(--rojo); font-size: 18px; }
.agenda-feriado-texto { display: grid; min-width: 0; }
.agenda-feriado-texto small { color: var(--rojo); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.agenda-feriado-texto strong { overflow: hidden; font-size: 14.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.agenda-feriado-ver { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; margin-left: auto; color: var(--texto-3); font-size: 13px; font-weight: 600; white-space: nowrap; }
.agenda-feriado--local { border: 1px solid color-mix(in srgb, var(--rojo) 28%, transparent); }
.agenda-feriado--local .agenda-feriado-texto strong { font-weight: 800; }
@media (max-width: 420px) { .agenda-feriado-ver { font-size: 0; } .agenda-feriado-ver .i { font-size: 16px; } }

/* Comunicados de las instituciones (arriba de la agenda) */
.comunicados { display: grid; gap: 10px; }
.comunicado { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--primario-borde); border-radius: 18px; background: var(--primario-claro); scroll-margin-top: 80px; }
.comunicado-icono { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--primario); color: #fff; font-size: 19px; }
.comunicado-cuerpo { display: grid; gap: 4px; min-width: 0; }
.comunicado-cuerpo small { color: var(--primario-texto); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.comunicado-cuerpo h3 { margin: 0; font-size: 16.5px; line-height: 1.3; }
.comunicado-cuerpo p { margin: 0; color: var(--texto-2); font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.comunicado-acciones { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.comunicado-acciones .enlace { margin: 2px 0 0; }
.comunicado-texto { margin: 4px 0 0; }
.tarjeta--urgente { border: 1px solid color-mix(in srgb, var(--rojo) 35%, transparent); }
.comunicado:target { box-shadow: 0 0 0 3px var(--primario-borde); }
.comunicado--urgente { border-color: color-mix(in srgb, var(--rojo) 35%, transparent); background: color-mix(in srgb, var(--rojo) 8%, var(--superficie)); }
.comunicado--urgente .comunicado-icono { background: var(--rojo); }
.comunicado--urgente .comunicado-cuerpo small { color: var(--rojo); }

/* Inicio: la agenda a mano, en un renglón (y los comunicados vigentes) */
.seccion--pueblo { margin-top: 14px; }
.pueblo { overflow: hidden; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.pueblo-fila { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: var(--texto); }
.pueblo-fila + .pueblo-fila { border-top: 1px solid var(--borde); }
.pueblo-fila > .i:last-child { flex-shrink: 0; margin-left: auto; color: var(--texto-3); }
.pueblo-icono { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--primario-claro); color: var(--primario-texto); font-size: 17px; }
.pueblo-texto { display: grid; min-width: 0; }
.pueblo-texto small { overflow: hidden; color: var(--primario-texto); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.pueblo-texto strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.pueblo-texto > span { overflow: hidden; color: var(--texto-2); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.pueblo-fila--comunicado { background: var(--primario-claro); }
.pueblo-fila--comunicado .pueblo-icono { background: var(--primario); color: #fff; }
.pueblo-fila--urgente { background: color-mix(in srgb, var(--rojo) 8%, var(--superficie)); }
.pueblo-fila--urgente .pueblo-icono { background: var(--rojo); }
.pueblo-fila--urgente .pueblo-texto small { color: var(--rojo); }
@media (min-width: 720px) {
  /* En la PC, la agenda en una sola línea: «Agenda del pueblo · Hoy: …» */
  .pueblo-texto--agenda { display: flex; align-items: baseline; gap: 10px; }
  .pueblo-texto--agenda > span::before { content: "·"; margin-right: 10px; color: var(--texto-3); }
}

.evento-ficha { display: grid; gap: 12px; }
.evento-ficha .ficha-aviso { border-radius: 16px; }
.evento-ficha .aviso { display: flex; align-items: center; gap: 8px; }
.evento-flyer { display: block; overflow: hidden; border-radius: 18px; background: var(--superficie-2); }
.evento-flyer img { display: block; width: 100%; max-height: 70vh; object-fit: contain; }
.evento-filas { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.evento-filas li { display: flex; align-items: center; gap: 12px; }
.evento-filas li > .i { flex-shrink: 0; font-size: 22px; }
.evento-filas li > span { display: grid; gap: 1px; min-width: 0; }
.evento-filas small { color: var(--texto-2); font-size: 13px; }
.evento-filas .enlace { margin: 0 0 0 auto; white-space: nowrap; }
.evento-org-logo { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; padding: 3px; border-radius: 10px; background: #fff; }
.evento-org-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.evento-descripcion { color: var(--texto-2); }
.evento-volver { justify-self: center; margin: 4px 0 8px; }
.tabla-celda-principal > small { display: block; margin-top: 2px; font-size: 12.5px; }

/* --- Entorno de pruebas (HOURS_ENTORNO=pruebas) ----------------------------- */
.entorno-pruebas { padding: 6px 16px; background: #b45309; color: #fff; font-size: 13px; font-weight: 700; text-align: center; }
@media print { .entorno-pruebas { display: none; } }