/* =============================================================================
   paginas.css — Lo específico de cada página

   Mobile primero: sin `@media` es el celular.
   ============================================================================= */

/* ─── Hero de la home ──────────────────────────────────────────────────────── */

.hero {
  background: var(--primary);
  color: #fff;
  padding: var(--e5) 0 var(--e6);
}
.hero__titulo { color: #fff; margin-bottom: var(--e2); }
.hero__bajada { color: var(--sobre-primary); font-size: 1rem; margin: 0 0 var(--e4); }

/* ─── Buscador del hero ────────────────────────────────────────────────────── */

.buscador {
  display: grid;
  gap: var(--e3);
  padding: var(--e4);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radio);
  box-shadow: var(--sombra-media);
}

/* ─── Franja del total ─────────────────────────────────────────────────────── */

.franja {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  margin: 0;
  padding: var(--e3) var(--e4);
  background: var(--accent);
  color: var(--text);
  font-size: .95rem;
  line-height: 1.35;
  text-align: center;
}

/* ─── Rejilla de rubros ────────────────────────────────────────────────────── */

/* Sin media query y sin columnas fijas: `auto-fill` con un mínimo de 150 px da
   dos columnas a 360 px y cuatro a 600, y los nombres largos —«Librería,
   juguetes y regalos»— entran sin apretarse. Es el caso testigo de §0.5. */
.rejilla-rubros {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--e2);
}

/* ─── Bloque «¿Tenés un comercio?» ─────────────────────────────────────────── */

.cta { background: var(--primary); color: #fff; padding: var(--e6) 0; }

.cta__interior { display: grid; gap: var(--e5); }

.cta__titulo { color: #fff; margin-bottom: var(--e2); }
.cta__bajada { color: var(--sobre-primary); margin: 0; }

.pasos { display: grid; gap: var(--e4); }

.paso {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: var(--e3);
}

.paso__ico {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  color: var(--accent);
}
.paso__numero { color: var(--accent); font-size: 1.6rem; font-weight: 800; line-height: 1; }
.paso__cuerpo { display: flex; flex-direction: column; }
/* Los pasos se usan en dos fondos: el bloque navy de la home (`.cta`) y una
   sección blanca en `/planes`. Por omisión van en los colores del texto normal
   —sobre blanco— y el blanco queda para adentro del bloque oscuro. Escritos al
   revés, en `/planes` el título salía blanco sobre blanco: se veían los íconos
   y los números, que son del color de acento, y ni el título ni el detalle. */
.paso__titulo { color: var(--text); font-size: .98rem; }
.paso__detalle { color: var(--text-soft); font-size: .86rem; line-height: 1.35; }

.cta .paso__titulo  { color: #fff; }
.cta .paso__detalle { color: var(--sobre-primary-suave); }

.cta__accion { margin: 0; }
.cta__accion .boton { width: 100%; }

/* ─── Planes ────────────────────────────────────────────────────────────────
   Apiladas en celular, en fila desde 900 px. */

.planes { display: grid; gap: var(--e4); }

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding: var(--e5) var(--e4) var(--e4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  text-align: center;
}

.plan--recomendado { border-color: var(--accent); border-width: 2px; }
.plan--proximamente { background: var(--muted); }

.plan__cinta {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: .1rem .7rem;
  border-radius: var(--radio-pastilla);
  background: var(--accent);
  color: var(--text);
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
}
.plan__cinta--gris { background: #DDE3E7; color: var(--text-soft); }

.plan__nombre { margin: 0; font-size: 1.1rem; }

.plan__precio {
  margin: 0;
  color: var(--primary);
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.1;
}
.plan__precio--texto { color: var(--text-soft); font-size: 1.5rem; }
.plan__periodo { font-size: .9rem; font-weight: 600; color: var(--text-soft); }

.plan__bajada { margin: 0; color: var(--text-soft); font-size: .86rem; }

.plan__detalle { margin: var(--e2) 0; text-align: left; }
.plan__detalle > summary { list-style: none; }
.plan__detalle > summary::-webkit-details-marker { display: none; }
.plan__detalle[open] .plan__chevron { transform: rotate(180deg); }
.plan__chevron { transition: transform .15s ease; }

.plan__lista { display: grid; gap: var(--e1); padding: var(--e3) 0 0; font-size: .88rem; }
.plan__lista li { display: flex; align-items: flex-start; gap: var(--e2); }
.plan__lista .ico { margin-top: .25em; color: #5C9E1E; }

.plan--proximamente .plan__lista .ico { color: #9AA6AF; }
.plan--proximamente .plan__lista { color: var(--text-soft); }

.plan__nota { margin: var(--e2) 0 0; font-size: .82rem; color: var(--text-soft); }

/* El precio de lista: chico, gris y tachado, arriba del que se cobra (§3). No
   compite con el promocional, que es el que tiene que leerse primero. */
.plan__tachado {
  margin: 0;
  color: var(--text-soft);
  font-size: .95rem;
  line-height: 1.2;
}

/* La etiqueta de la promoción, al lado del precio grande. */
.plan__promo {
  display: inline-block;
  margin: var(--e1) 0 0;
  padding: .1rem .5rem;
  border-radius: var(--radio-pastilla);
  background: var(--accent);
  color: var(--text);
  font-size: .75rem;
  font-weight: 800;
}

/* El texto de venta del plan, que sale de `planes.detalle`. */
.plan__texto {
  margin: var(--e3) 0 var(--e4);
  text-align: left;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--text);
}
.plan--proximamente .plan__texto { color: var(--text-soft); }

/* La letra chica de precios, abajo de todo. */
.planes__legal {
  margin: var(--e5) 0 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--text-soft);
}

.plan > .boton:last-child { margin-top: auto; }

/* ─── Páginas de error ─────────────────────────────────────────────────────── */

.error__codigo {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  margin-bottom: var(--e2);
}

/* =============================================================================
   sm — 600 px
   ============================================================================= */

@media (min-width: 600px) {

  .hero { padding: var(--e7) 0; }

  /* Los dos primeros campos entran de a dos; el tercero y el botón, abajo. */
  .buscador {
    grid-template-columns: 1fr 1fr;
    padding: var(--e5);
  }
  .buscador > .boton { grid-column: 1 / -1; }

  .cta__accion .boton { width: auto; }

  .pasos { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .paso { grid-template-columns: auto 1fr; }
  .paso__numero { grid-row: 1; }
}

/* =============================================================================
   md — 900 px · layout de escritorio (mockup v01-mejorado.png)
   ============================================================================= */

@media (min-width: 900px) {

  .hero { padding: var(--e8) 0; }
  .hero__bajada { font-size: 1.1rem; margin-bottom: var(--e5); }

  /* Los tres campos y el botón, en una sola línea. */
  .buscador {
    grid-template-columns: 1.3fr 1fr 1.2fr auto;
    align-items: end;
    gap: var(--e4);
  }
  .buscador > .boton { grid-column: auto; width: auto; padding-inline: var(--e6); }

  .chips { display: flex; align-items: center; justify-content: center; gap: var(--e3); }
  .chips__rotulo { margin: 0; }
  .chips__lista { justify-content: center; }

  .franja { font-size: 1rem; padding: var(--e3) 0; }

  .rejilla-rubros { gap: var(--e4); }

  .cta__interior {
    grid-template-columns: minmax(260px, 1fr) 2fr;
    align-items: center;
    gap: var(--e7);
  }
  .cta__texto { grid-row: 1; }
  .pasos { grid-column: 2; grid-row: 1 / span 2; }
  .cta__accion { grid-column: 1; grid-row: 2; align-self: start; }

  /* Ícono, número y texto, en ese orden y en columna, como el mockup de
     escritorio. Hay que deshacer el `grid-row: 1` del corte de 600. */
  .paso { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--e2); }
  .paso__numero { grid-row: auto; }
  .paso__cuerpo { align-items: center; }

  .planes { grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: var(--e5); }
  .plan { padding: var(--e6) var(--e5) var(--e5); }
}

/* =============================================================================
   Sesión 7 — Cabecera de rubro y ficha de comercio
   Mobile primero: sin `@media` es el celular.
   ============================================================================= */

.seccion--primera { padding-top: var(--e4); }

/* Los chips de subrubro y la barra de filtros son dos mitades de la misma cosa
   —acotar el listado—, pero viven en secciones distintas y entre las dos había
   64 px de relleno más los márgenes: casi un quinto de la pantalla de un
   celular, en blanco, justo donde el ojo espera seguir filtrando (23-09-2026).
   La segunda sección se pega a la primera; lo que va más abajo conserva su
   separación. */
.seccion--primera { padding-bottom: var(--e3); }
.seccion--primera + .seccion { padding-top: 0; }

.hero--corto { padding: var(--e5) 0; }

/* ─── Cabecera del listado de rubro ───────────────────────────────────────── */

.rubro {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--e3);
}

.rubro__ico {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: var(--radio);
  background: var(--muted);
  border: 1px solid var(--border);
}
.rubro__ico .ico { width: 1.75rem; height: 1.75rem; color: var(--primary); }

.rubro__titulo { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); }
.rubro__conteo { margin: 0; color: var(--text-soft); font-size: .9rem; }

/* En celular el botón de compartir baja a su propia línea, a lo ancho. */
.rubro__compartir { grid-column: 1 / -1; justify-self: start; }

.rubro__intro {
  margin: var(--e4) 0 0;
  color: var(--text-soft);
  max-width: 68ch;
  font-size: .95rem;
}

/* ─── Ficha ───────────────────────────────────────────────────────────────── */

.ficha { padding: var(--e4) 0 0; }

/* `minmax(0, 1fr)` y no `1fr`: una columna `auto` se estira hasta el
   `min-content` del hijo más ancho —el enlace largo de «Ver todos los comercios
   del rubro»— y se sale del contenedor. Con el mínimo en 0 no puede. */
.ficha__grilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e5); }

.ficha__portada {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  background: #DCE6EC;
  color: rgba(0, 42, 65, .22);
  border-radius: var(--radio);
  overflow: hidden;
}
.ficha__portada img { width: 100%; height: 100%; object-fit: cover; }

/* El contador solo existe cuando hay galería: lo decide la vista, no el CSS. */
.ficha__contador {
  position: absolute;
  right: var(--e3);
  bottom: var(--e3);
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  min-height: 32px;
  padding: 0 var(--e3);
  border-radius: var(--radio-chico);
  background: rgba(26, 36, 48, .72);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
}
.ficha__contador:hover { text-decoration: none; background: rgba(26, 36, 48, .85); }

.ficha__titulo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2);
  margin: 0 0 var(--e2);
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.2rem);
}

.ficha__rubros { display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0 0 var(--e3); }
.ficha__bajada { margin: 0 0 var(--e4); color: var(--text-soft); }

.ficha__acciones { display: grid; gap: var(--e2); }
.ficha__acciones .boton { width: 100%; }

.ficha__origen {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  margin: var(--e4) 0 0;
  color: var(--text-soft);
  font-size: .82rem;
  line-height: 1.4;
}

/* ─── Reclamar ficha / mejorá tu ficha (§4.5) ─────────────────────────────── */

.reclamo {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e4);
  padding: var(--e4);
  background: #F6FAEF;
  border: 1px solid #DCEBC2;
  border-radius: var(--radio);
  justify-items: start;
}
.reclamo--mejora { background: #F1F6FA; border-color: #D3E2EC; }

.reclamo__ico {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface);
  color: #6FA82A;
}
.reclamo--mejora .reclamo__ico { color: var(--primary); }

.reclamo__titulo { margin: 0 0 var(--e1); font-weight: 800; }
.reclamo__bajada { margin: 0; color: var(--text-soft); font-size: .9rem; }
.reclamo .boton { width: 100%; }

/* ─── Columna de datos ────────────────────────────────────────────────────── */

.ficha__datos { display: grid; gap: var(--e3); }

.dato {
  padding: var(--e4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
}
.dato__titulo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin: 0 0 var(--e2);
  font-size: .9rem;
  color: var(--text-soft);
  font-weight: 700;
}
.dato__valor { margin: 0 0 var(--e3); }
.dato .boton { margin-top: var(--e2); }

/* «Abierto ahora»: fuera del acordeón y visible con el acordeón cerrado (§2.6). */
.estado-horario {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin: 0 0 var(--e2);
  font-size: .92rem;
  font-weight: 700;
  color: var(--text-soft);
}
.estado-horario__punto {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #C4CFD6;
  flex: none;
}
.estado-horario--abierto { color: #3F7C15; }
.estado-horario--abierto .estado-horario__punto { background: #5C9E1E; }

.horarios { width: 100%; border-collapse: collapse; font-size: .85rem; }
.horarios th {
  text-align: left;
  font-weight: 600;
  color: var(--text-soft);
  padding: var(--e1) 0;
}
.horarios td { text-align: right; padding: var(--e1) 0; }
.horarios__hoy th, .horarios__hoy td { color: var(--text); font-weight: 700; }

.formas { display: flex; flex-wrap: wrap; gap: var(--e2); }
.forma {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: 32px;
  padding: 0 var(--e3);
  border-radius: var(--radio-pastilla);
  background: var(--muted);
  border: 1px solid var(--border);
  font-size: .8rem;
}

.redes { display: flex; flex-wrap: wrap; gap: var(--e2); }
.red {
  display: grid;
  place-items: center;
  width: var(--tactil); height: var(--tactil);
  border-radius: 50%;
  background: var(--muted);
  border: 1px solid var(--border);
  color: var(--primary);
}
.red:hover { border-color: var(--primary); }

/* ─── Galería y mapa (del mockup v01) ─────────────────────────────────────── */

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--e2);
}
.galeria img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radio-chico);
}

.mapa {
  aspect-ratio: 16 / 9;
  border-radius: var(--radio);
  background: var(--muted);
  border: 1px solid var(--border);
  overflow: hidden;
}

.rejilla-relacionados {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--e3);
}

/* ─── Reportar problema (§4.5) ────────────────────────────────────────────── */

.reporte { margin-top: var(--e4); }

/* Sin la raya de arriba: el bloque vive adentro de la columna de datos, que ya
   es una tarjeta con su borde, y la línea quedaba suelta arriba del resumen
   (23-09-2026). */
.reporte__caja { padding-top: var(--e1); }
.reporte__resumen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2);
  min-height: var(--tactil);
  color: var(--text-soft);
  font-size: .85rem;
  cursor: pointer;
  list-style: none;
}
.reporte__resumen::-webkit-details-marker { display: none; }
.reporte__accion { color: var(--primary); font-weight: 700; text-decoration: underline; }

.reporte__form {
  display: grid;
  gap: var(--e3);
  max-width: 520px;
  padding-top: var(--e3);
}
.reporte__form .boton { justify-self: start; }

/* =============================================================================
   sm — 600 px
   ============================================================================= */

@media (min-width: 600px) {

  .rubro { grid-template-columns: auto 1fr auto; }
  .rubro__compartir { grid-column: auto; justify-self: end; }

  /* Flex y no `grid-auto-flow: column`: en la ficha esta fila vive en una
     columna angosta, y tres botones en columnas fijas se salen. Con `wrap` el
     que no entra baja solo. */
  .ficha__acciones { display: flex; flex-wrap: wrap; gap: var(--e2); }
  .ficha__acciones .boton { width: auto; }

  .reclamo {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    justify-items: start;
  }
  .reclamo .boton { width: auto; }

  /* **Una sola columna, siempre** (23-09-2026). El formulario se mudó a la
     columna de datos, que es angosta: en dos columnas, «Contanos un poco más» y
     el email quedaban del ancho de media palabra. */
}

/* =============================================================================
   md — 900 px · layout de escritorio
   ============================================================================= */

@media (min-width: 900px) {

  /* La ficha pasa a tres zonas: foto y encabezado arriba, datos a la derecha,
     y lo ancho —galería, mapa, relacionados, reporte— cruzando las columnas. */
  .ficha__grilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(260px, 320px);
    gap: var(--e5);
    align-items: start;
  }
  /* La columna del medio es angosta: el bloque de reclamo vuelve a dos filas,
     con el botón a lo ancho, en vez de tres columnas apretadas. */
  .reclamo { grid-template-columns: auto 1fr; }
  .reclamo .boton { grid-column: 1 / -1; width: 100%; }

  .ficha__portada  { grid-column: 1; grid-row: 1; }
  .ficha__cabecera { grid-column: 2; grid-row: 1; }
  .ficha__datos    { grid-column: 3; grid-row: 1 / span 2; }
  .ficha__ancho    { grid-column: 1 / 3; }

  .galeria { grid-template-columns: repeat(4, 1fr); }
}

/* =============================================================================
   lg — 1200 px
   ============================================================================= */

@media (min-width: 1200px) {
  .rejilla-relacionados { grid-template-columns: repeat(4, 1fr); }
}

/* Mientras Leaflet no esté en el proyecto, la caja del mapa muestra el enlace a
   OpenStreetMap en vez de quedarse en blanco. Lo pone `app.js`. */
.mapa__enlace {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  padding: var(--e4);
  color: var(--primary);
  font-weight: 700;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINAS DE CUENTA (sesión 8)
   `formulario1-mejorado.png`, `formulario2.png`, `perfil1-mejorado.png`.
   Celular primero; lo de escritorio va al final, con `min-width` (§0.5).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Las pantallas de un solo formulario no dibujan la barra inferior, así que
   tampoco le reservan el espacio de abajo. El criterio está en `pie.php`. */
body.sin-barra { padding-bottom: 0; }

/* ─── La tarjeta centrada de ingresar / recuperar / restablecer ─────────────── */

.cuenta { padding: var(--e5) 0 var(--e7); background: var(--muted); }

.cuenta__interior { display: grid; }

.cuenta__caja {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: var(--e5) var(--e4) var(--e6);
  text-align: center;
}

.cuenta__ico {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin: 0 auto var(--e3);
  border-radius: 50%;
  background: #EFF6E4;
  color: #4B9B18;
}
.cuenta__ico--ok     { background: #EAF5E1; color: #3F7F14; }
.cuenta__ico--alerta { background: #FBE9E7; color: #B23A2B; }

.cuenta__titulo {
  margin: 0 0 var(--e2);
  color: var(--primary);
  font-size: 1.4rem;
  line-height: 1.25;
}

.cuenta__bajada {
  margin: 0 0 var(--e5);
  color: var(--text-soft);
  font-size: .95rem;
}

/* Sin bajada —el primer paso de «Ingresar»—, el formulario toma el mismo aire
   que ella le daba, para no quedar pegado al título. */
.cuenta__titulo + .formulario { margin-top: var(--e5); }

.cuenta__olvide { margin: 0; text-align: center; font-size: .9rem; font-weight: 700; }

/* «¿Sos nuevo? Registrate ahora, ¡es gratis!», debajo del formulario de
   ingreso. Solo el enlace va en negrita: es la acción, el resto es contexto. */
.cuenta__alterna {
  margin: var(--e4) 0 0;
  text-align: center;
  font-size: .95rem;
}
.cuenta__alterna a { font-weight: 700; }

/* Las dos salidas de «No encontramos ninguna cuenta con…», una arriba de la
   otra y del mismo ancho: son dos respuestas a la misma pregunta. */
.cuenta__opciones { display: grid; gap: var(--e3); }

.cuenta__acciones { margin: var(--e4) 0 0; }

.cuenta__pie {
  margin: var(--e4) 0 0;
  font-size: .9rem;
  color: var(--text-soft);
}

.cuenta__legal {
  margin: var(--e4) 0 0;
  font-size: .8rem;
  color: var(--text-soft);
}

/* «Tu cuenta está protegida», debajo de una línea. */
.cuenta__nota {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin: var(--e5) 0 0;
  padding-top: var(--e4);
  border-top: 1px solid var(--border);
  text-align: left;
  font-size: .85rem;
  color: var(--text-soft);
}
.cuenta__nota .ico { color: #4B9B18; flex: none; }

/* Los avisos van alineados a la izquierda aunque los títulos estén centrados:
   un mensaje de error centrado se lee peor. */
.cuenta__caja .aviso { margin-bottom: var(--e4); }

/* ─── Pedir un plan (§4.7) ─────────────────────────────────────────────────── */

/* Cada plan con su período, como una opción elegible. El precio va a la
   derecha porque es lo que se compara entre una fila y la siguiente. */
.opcion-plan {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--e3);
  margin-bottom: var(--e2);
  padding: var(--e3);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  text-align: left;
  cursor: pointer;
}
.opcion-plan:hover { border-color: var(--primary); }
.opcion-plan:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.opcion-plan__cuerpo { display: grid; gap: var(--e1); min-width: 0; }
.opcion-plan__nombre { color: var(--primary); font-size: .95rem; }
.opcion-plan__precio { font-size: .95rem; }
.opcion-plan__precio s { color: var(--text-soft); font-size: .85rem; margin-right: var(--e1); }
.opcion-plan__nota { color: var(--text-soft); font-size: .8rem; }

/* ─── El marco de «mi perfil» y «mis comercios» ─────────────────────────────── */

.cuenta-marco {
  display: grid;
  /* `minmax(0, 1fr)` y no la columna implícita `auto`: `auto` se estira hasta
     el `min-content` del hijo más ancho —acá, la fila de pestañas— y se sale
     del contenedor. Es el mismo desborde que apareció en la ficha en la
     sesión 7, y la causa es la misma. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e4);
  padding-top: var(--e4);
  padding-bottom: var(--e6);
}

/* En celular la lateral es una fila de pestañas arriba del contenido. */
.cuenta-lateral {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  padding: var(--e3);
}

.cuenta-lateral__quien {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin: 0 0 var(--e3);
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--border);
}

.cuenta-lateral__avatar {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--muted);
  color: var(--primary);
}

.cuenta-lateral__datos { display: grid; min-width: 0; }
.cuenta-lateral__nombre { color: var(--primary); }
.cuenta-lateral__email {
  font-size: .85rem;
  color: var(--text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Las tres pestañas envuelven en vez de desplazarse. Un carril horizontal como
   el de los chips escondería «Cerrar sesión» a 360 px, y eso es justamente lo
   que nadie va a salir a buscar deslizando. */
.cuenta-lateral__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cuenta-lateral__lista > li { flex: none; }

.cuenta-lateral__link {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-height: var(--tactil);
  padding: 0 var(--e3);
  border: 0;
  border-radius: var(--radio-chico);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .9rem;
  white-space: nowrap;
  cursor: pointer;
}
.cuenta-lateral__link:hover { background: var(--muted); }
.cuenta-lateral__link--activo {
  background: #EFF6E4;
  color: var(--primary);
  font-weight: 700;
}
.cuenta-lateral__link--salir { color: #C0392B; }

/* «¿Tenés un comercio? Sumalo a la guía», en una cuenta sin comercios. Una
   línea chica y en gris, separada de la navegación: es una invitación, no una
   tarea pendiente. */
.cuenta-lateral__sumar {
  margin: var(--e3) 0 0;
  padding-top: var(--e3);
  border-top: 1px solid var(--border);
  font-size: .85rem;
  color: var(--text-soft);
}

.cuenta-cuerpo { display: grid; gap: var(--e4); min-width: 0; }

/* ─── La franja «Verificá tu email» ─────────────────────────────────────────── */

.aviso-verificar {
  display: grid;
  gap: var(--e3);
  padding: var(--e4);
  background: #FDF6E3;
  border: 1px solid #F0E2BC;
  border-radius: var(--radio);
}

.aviso-verificar__ico {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin: 0;
  border-radius: 50%;
  background: #F7EBCB;
  color: #8A6416;
}

.aviso-verificar__titulo { display: block; color: #6B4E10; }
.aviso-verificar__texto p { margin: var(--e1) 0 0; font-size: .9rem; color: #6B4E10; }

.aviso-verificar__accion { margin: 0; }
.aviso-verificar__accion .boton { width: 100%; }
.aviso-verificar__accion--nota {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: .9rem;
  font-weight: 700;
  color: #3F7F14;
}

/* ─── El panel blanco que envuelve cada sección de la cuenta ────────────────── */

.panel-cuenta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  padding: var(--e4);
}

.panel-cuenta__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin: var(--e4) 0 0;
}

/* ─── Carga de horarios (§2.6) ─────────────────────────────────────────────── */
/*
   Celular primero: un día por fila, a lo alto. Sin tabla y sin desplazamiento
   horizontal, porque se carga desde el teléfono. Todo lo que se toca mide al
   menos `--tactil`.
*/

.horarios-form { margin-top: var(--e4); }

.horarios-form__copiar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-bottom: var(--e4);
}

.dia {
  margin: 0 0 var(--e3);
  padding: var(--e3);
  border: 1px solid var(--border);
  border-radius: var(--radio);
}
.dia--error { border-color: #C0392B; }
.dia__nombre {
  padding: 0 0 var(--e2);
  color: var(--primary);
  font-weight: 700;
}

/* El interruptor Abierto / Cerrado. Es una casilla de verdad —sin JavaScript
   sigue funcionando— vestida de interruptor. */
.interruptor {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: var(--tactil);
  cursor: pointer;
}
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.interruptor__pista {
  position: relative;
  flex: none;
  width: 52px; height: 30px;
  border-radius: 15px;
  background: #C6CED4;
  transition: background .15s ease;
}
.interruptor__pista::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s ease;
}
.interruptor input:checked + .interruptor__pista { background: #5C9E1E; }
.interruptor input:checked + .interruptor__pista::after { transform: translateX(22px); }
.interruptor input:focus-visible + .interruptor__pista { outline: 2px solid var(--primary); outline-offset: 2px; }
.interruptor__texto { font-weight: 700; font-size: .95rem; }
.interruptor__si { display: none; }
.interruptor input:checked ~ .interruptor__texto .interruptor__si { display: inline; }
.interruptor input:checked ~ .interruptor__texto .interruptor__no { display: none; }

/* Con el día cerrado no hay horas que elegir: se esconde todo lo de adentro.
   Las clases las pone `app.js`; sin JavaScript queda todo a la vista y el
   formulario se carga igual. */
.dia__cuerpo { padding-top: var(--e3); }
.js .dia--cerrado .dia__cuerpo { display: none; }
.js .dia--h24 .dia__turnos,
.js .dia--h24 [data-agregar-turno] { display: none; }

.casilla {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-height: var(--tactil);
  font-size: .9rem;
  cursor: pointer;
}
.casilla input { width: 22px; height: 22px; flex: none; }
.casilla--cruce { color: #8A6416; }

.dia__turnos { display: grid; gap: var(--e2); }

.turno {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e2);
  align-items: end;
}
.turno .casilla--cruce { grid-column: 1 / -1; }
.turno__campo { display: grid; gap: var(--e1); }
.turno__rotulo { font-size: .8rem; color: var(--text-soft); }
/* Los `select` de hora: altura táctil y tipografía legible, nunca un
   desplegable diminuto. */
.turno .campo__control { min-height: var(--tactil); font-size: 1rem; }

/* El segundo turno se muestra al apretar «+ Agregar otro turno». Sin
   JavaScript no hay botón, así que se dibuja desplegado y se puede cargar
   igual (§0.1). */
.js .turno[data-turno-extra] { display: none; }

.vista-previa {
  margin: var(--e3) 0 var(--e4);
  padding: var(--e3);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  background: var(--muted);
}

.panel-cuenta__cabecera { display: grid; gap: var(--e3); margin-bottom: var(--e4); }
.panel-cuenta__titulo   { margin: 0; color: var(--primary); font-size: 1.3rem; }
.panel-cuenta__bajada   { margin: var(--e1) 0 0; color: var(--text-soft); font-size: .9rem; }
.panel-cuenta .formulario { margin-top: var(--e4); }

/* ─── Cambiar contraseña, plegado ───────────────────────────────────────────── */

.cambiar-clave { margin-top: var(--e5); border-top: 1px solid var(--border); }

.cambiar-clave__boton {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-height: var(--tactil);
  margin-top: var(--e3);
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  list-style: none;
}
.cambiar-clave__boton::-webkit-details-marker { display: none; }
.cambiar-clave__chevron { margin-left: auto; transition: transform .15s ease; }
.cambiar-clave[open] .cambiar-clave__chevron { transform: rotate(180deg); }

/* ─── La lista de comercios del comerciante ─────────────────────────────────── */

.mis-comercios { display: grid; gap: var(--e4); margin: 0; padding: 0; list-style: none; }

.mi-comercio {
  display: grid;
  gap: var(--e3);
  padding: var(--e4);
  border: 1px solid var(--border);
  border-radius: var(--radio);
}

.mi-comercio__identidad { display: flex; align-items: flex-start; gap: var(--e3); }

.mi-comercio__ico {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  flex: none;
  border-radius: 50%;
  background: #EFF6E4;
}

.mi-comercio__nombres {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  min-width: 0;
}

.mi-comercio__nombre {
  width: 100%;
  color: var(--primary);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
  overflow-wrap: break-word;
}
.mi-comercio__rubro { font-size: .85rem; color: var(--text-soft); }

.mi-comercio__dato { display: grid; gap: .1rem; }
.mi-comercio__rotulo {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-soft);
}
.mi-comercio__valor   { color: var(--text); }
.mi-comercio__detalle { font-size: .85rem; color: var(--text-soft); }
.mi-comercio__detalle--alerta { color: #B23A2B; font-weight: 700; }

/* El bloque que dice qué hacer con esta ficha: rechazada, en revisión, o la
   oferta de mejorarla. Los tres comparten forma y cambian de color. */
.mi-comercio__estado {
  display: flex;
  gap: var(--e3);
  padding: var(--e3);
  border-radius: var(--radio);
  font-size: .9rem;
}
.mi-comercio__estado .ico { flex: none; margin-top: .1rem; }
.mi-comercio__estado p { margin: var(--e1) 0 0; }

.mi-comercio__estado--error  { background: #FBE9E7; color: #8C2E22; }
.mi-comercio__estado--error .ico { color: #C0392B; }
.mi-comercio__estado--espera { background: #FDF6E3; color: #6B4E10; }
.mi-comercio__estado--espera .ico { color: #8A6416; }
.mi-comercio__estado--vender { background: #EDF4FB; color: #1F4B72; }
.mi-comercio__estado--vender .ico { color: #2A6DA8; }

/* El motivo del rechazo lo escribe el admin: puede venir sin espacios. */
.mi-comercio__motivo { font-weight: 700; overflow-wrap: anywhere; }

.mi-comercio__completar { display: grid; gap: var(--e2); }

.pendientes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pendiente {
  display: flex;
  align-items: center;
  gap: var(--e1);
  padding: .2rem .5rem;
  border: 1px dashed var(--border);
  border-radius: var(--radio-pastilla);
  font-size: .8rem;
  color: var(--text-soft);
}
.pendiente .ico { width: 1rem; height: 1rem; color: #B98A2E; }
/* Cada pendiente es un enlace a donde se completa: alto táctil y sin subrayado
   hasta que se lo toca. */
.pendiente__enlace {
  display: flex;
  align-items: center;
  gap: var(--e1);
  min-height: 1.6rem;
  color: inherit;
}

.mi-comercio__accion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
  margin: 0;
}
.mi-comercio__accion .boton { flex: 1; justify-content: center; }

/* ─── «Aún no tenés comercios» ──────────────────────────────────────────────── */

.vacio { padding: var(--e6) var(--e2); text-align: center; }

.vacio__ico {
  display: grid;
  place-items: center;
  width: 96px; height: 96px;
  margin: 0 auto var(--e4);
  border-radius: 50%;
  background: #EFF6E4;
  color: var(--primary);
}
.vacio__ico .ico { width: 3rem; height: 3rem; }

.vacio__titulo { margin: 0 0 var(--e2); color: var(--primary); font-size: 1.3rem; }
.vacio__bajada {
  max-width: 34ch;
  margin: 0 auto var(--e5);
  color: var(--text-soft);
  font-size: .95rem;
}

/* ═══ 600 px ════════════════════════════════════════════════════════════════ */

@media (min-width: 600px) {

  .cuenta { padding: var(--e7) 0 var(--e8); }
  .cuenta__caja {
    max-width: 460px;
    margin: 0 auto;
    padding: var(--e6) var(--e6) var(--e7);
  }
  /* El pedido de plan tiene más campos y las opciones de plan al lado: 460 px
     le quedan angostos en escritorio. */
  .cuenta__caja--ancha { max-width: 620px; }
  .cuenta__titulo { font-size: 1.6rem; }

  .aviso-verificar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
  }
  .aviso-verificar__accion .boton { width: auto; }

  .panel-cuenta { padding: var(--e5); }
  .panel-cuenta__cabecera {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  /* La tarjeta de comercio pasa a dos columnas. A 360 px va todo apilado. */
  .mi-comercio { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
  .mi-comercio__identidad,
  .mi-comercio__estado,
  .mi-comercio__completar,
  .mi-comercio__accion { grid-column: 1 / -1; }
  .mi-comercio__accion .boton { flex: none; }

  .formulario--ancho { max-width: 520px; }
}

/* ═══ 900 px ════════════════════════════════════════════════════════════════ */

@media (min-width: 900px) {

  /* Acá la lateral se vuelve la barra de la izquierda del mockup. */
  .cuenta-marco {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--e5);
    padding-top: var(--e5);
  }

  .cuenta-lateral { align-self: start; position: sticky; top: 88px; padding: var(--e4); }
  .cuenta-lateral__quien { display: grid; justify-items: center; text-align: center; }
  .cuenta-lateral__avatar { width: 56px; height: 56px; }
  .cuenta-lateral__datos { justify-items: center; max-width: 100%; }

  .cuenta-lateral__lista { display: grid; gap: var(--e1); overflow: visible; }
  .cuenta-lateral__link { width: 100%; }

  /* La fila del mockup de escritorio: identidad · plan · vigencia · estado.
     Cada bloque va a su columna **por número**, no por orden de aparición. Sin
     eso, una ficha sin vigencia corre el bloque de estado a la columna de la
     vigencia —que es `auto`— y el texto largo del rechazo se come el ancho de
     la identidad hasta dejar el nombre en una letra por renglón. Con columnas
     fijas, además, las tarjetas quedan alineadas entre sí. */
  .mi-comercio {
    grid-template-columns:
      minmax(0, 1.6fr) minmax(90px, auto) minmax(0, auto) minmax(0, 1.4fr);
    align-items: center;
    gap: var(--e4);
  }
  .mi-comercio__identidad { grid-column: 1; }
  .mi-comercio__estado    { grid-column: 4; grid-row: 1; }
  .mi-comercio__completar { grid-column: 1 / -1; }
  .mi-comercio__accion    { grid-column: 1 / -1; justify-content: flex-end; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINAS INSTITUCIONALES (sesión 9)
   Quiénes somos, contacto, términos y privacidad. Salen de la tabla `paginas`
   y el cuerpo es markdown renderizado, así que el CSS no puede apoyarse en
   clases: estiliza etiquetas dentro de `.prosa`.
   ═══════════════════════════════════════════════════════════════════════════ */

.pagina { padding: var(--e5) 0 var(--e7); }

.pagina__titulo {
  margin: 0 0 var(--e5);
  color: var(--primary);
  font-size: 1.6rem;
  line-height: 1.2;
}

/* Una medida de lectura cómoda. Un texto legal a todo el ancho de una pantalla
   de escritorio no lo lee nadie: 68 caracteres es donde el ojo vuelve solo al
   renglón siguiente. */
.prosa { max-width: 68ch; }

.prosa > * { margin: 0 0 var(--e4); }
.prosa > *:last-child { margin-bottom: 0; }

.prosa h2 {
  margin-top: var(--e6);
  color: var(--primary);
  font-size: 1.15rem;
  line-height: 1.3;
}
.prosa h2:first-child { margin-top: 0; }

.prosa p { line-height: 1.7; }

.prosa strong { color: var(--text); font-weight: 700; }

.prosa ul {
  padding-left: var(--e5);
  list-style: disc;
}
.prosa li { margin-bottom: var(--e2); line-height: 1.7; }
.prosa li::marker { color: var(--accent); }

@media (min-width: 900px) {
  .pagina { padding: var(--e7) 0 var(--e8); }
  .pagina__titulo { font-size: 2rem; }
  .prosa h2 { font-size: 1.3rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALTA DE COMERCIO (sesión 9)
   `altacomercio1-mejorado.png`. Celular primero; escritorio al final.
   ═══════════════════════════════════════════════════════════════════════════ */

.alta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e4);
  padding-top: var(--e4);
  padding-bottom: var(--e7);
}

/* ─── Indicador de progreso ─────────────────────────────────────────────────
   En celular, tres círculos en fila unidos por una línea. La línea es un
   pseudoelemento del `<li>` y no un borde del contenedor, así se corta sola en
   el último paso. */

.pasos-alta {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

.paso-alta { position: relative; text-align: center; }

.paso-alta:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--border);
}
.paso-alta--hecho:not(:last-child)::after { background: var(--accent); }

.paso-alta__enlace {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--e1);
  color: var(--text-soft);
  text-decoration: none;
  font-size: .78rem;
  line-height: 1.2;
}
a.paso-alta__enlace:hover { color: var(--primary); }

.paso-alta__numero {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border);
  color: var(--text-soft);
  font-weight: 800;
}

.paso-alta--activo .paso-alta__numero {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text);
}
.paso-alta--activo .paso-alta__texto { color: var(--primary); font-weight: 700; }

.paso-alta--hecho .paso-alta__numero {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text);
}

.alta__cuerpo {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  padding: var(--e4);
}

.alta__titulo { margin: 0 0 var(--e1); color: var(--primary); font-size: 1.3rem; }
.alta__bajada { margin: 0 0 var(--e5); color: var(--text-soft); font-size: .92rem; }

.alta__form { margin-bottom: var(--e4); }

.alta__dos { display: grid; gap: var(--e4); }

.req { color: #C0392B; }

/* Un `<input>` sin ícono a la izquierda no necesita la sangría de 2,6 rem que
   `.campo__control` reserva para él. */
.campo__control--solo { padding-left: var(--e3); }

.campo__area {
  width: 100%;
  min-height: 7rem;
  padding: var(--e3);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  /* 16 px como mínimo (§0.5): por debajo, iOS hace zoom al enfocar. */
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
}
.campo__area:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.alta__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--border);
}
.alta__acciones .boton { flex: 1; justify-content: center; }

.alta__nota {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin: 0;
  font-size: .85rem;
  color: var(--text-soft);
}

/* ─── Rubros ────────────────────────────────────────────────────────────────── */

.campo--rubros { border: 0; padding: 0; margin: 0 0 var(--e4); }

.rubros__barra {
  display: grid;
  gap: var(--e2);
  margin: var(--e2) 0 var(--e3);
}
.rubros__cuenta { margin: 0; font-size: .85rem; color: var(--text-soft); }
.rubros__cuenta strong { color: var(--primary); }

.rubros__tope { margin-bottom: var(--e3); }

.rubros {
  display: grid;
  gap: var(--e1);
  max-height: 22rem;
  overflow-y: auto;
  padding: var(--e2);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  background: var(--muted);
}

.rubros__grupo { background: var(--surface); border-radius: var(--radio-chico); }

.rubros__titulo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-height: var(--tactil);
  padding: 0 var(--e3);
  font-weight: 700;
  font-size: .92rem;
  color: var(--primary);
  cursor: pointer;
  list-style: none;
}
.rubros__titulo::-webkit-details-marker { display: none; }
.rubros__chevron { margin-left: auto; transition: transform .15s ease; }
.rubros__grupo[open] .rubros__chevron { transform: rotate(180deg); }

.rubros__lista {
  margin: 0;
  padding: 0 var(--e3) var(--e2);
  list-style: none;
}

.control-check--apagado { opacity: .45; cursor: not-allowed; }

/* ─── Visibilidad de la dirección y su vista previa ─────────────────────────── */

.visibilidad { display: grid; gap: var(--e4); }

.visibilidad__opciones { display: grid; gap: var(--e2); margin: 0; padding: 0; list-style: none; }

.opcion {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e3);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  cursor: pointer;
}
.opcion:hover { border-color: var(--primary); }
.opcion input { margin-top: .2rem; accent-color: var(--primary); width: 1.15rem; height: 1.15rem; }
.opcion:has(input:checked) { border-color: var(--accent); background: #F6FAEF; }

.opcion__cuerpo { display: grid; gap: .1rem; min-width: 0; }
.opcion__rotulo { color: var(--text); font-size: .95rem; }
.opcion__detalle { font-size: .85rem; color: var(--text-soft); }

.previa { align-self: start; }
.previa__rotulo {
  margin: 0 0 var(--e2);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-soft);
}
.previa__caja {
  padding: var(--e3);
  border: 1px dashed var(--border);
  border-radius: var(--radio);
  background: var(--muted);
}
.previa__nombre { display: block; color: var(--primary); margin-bottom: var(--e1); }
.previa__linea {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  margin: 0;
  font-size: .88rem;
  color: var(--text-soft);
}
.previa__linea .ico { flex: none; margin-top: .1rem; }
.previa__pie { margin: var(--e2) 0 0; font-size: .78rem; color: var(--text-soft); text-align: center; }

/* ─── Atributos y foto ──────────────────────────────────────────────────────── */

.atributos { display: grid; gap: var(--e1); margin: var(--e2) 0 0; padding: 0; list-style: none; }
.atributos .ico { color: var(--text-soft); }

.foto-actual {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin: 0 0 var(--e3);
  font-size: .85rem;
  color: var(--text-soft);
}
.foto-actual img { border-radius: var(--radio-chico); object-fit: cover; }

.zona-foto {
  display: grid;
  justify-items: center;
  gap: var(--e2);
  padding: var(--e6) var(--e4);
  border: 2px dashed var(--border);
  border-radius: var(--radio);
  background: var(--muted);
  color: var(--text-soft);
  text-align: center;
  cursor: pointer;
}
.zona-foto:hover { border-color: var(--accent); }
.zona-foto .ico { color: var(--primary); }
.zona-foto__texto { font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.zona-foto__ayuda { font-size: .8rem; }

/* ─── Pantallas finales y reclamo ───────────────────────────────────────────── */

.listo { margin-top: var(--e5); text-align: left; }
.listo__titulo { margin: 0 0 var(--e3); color: var(--primary); font-size: 1rem; }

.listo__lista { display: grid; gap: var(--e2); margin: 0; padding: 0; list-style: none; }
.listo__lista li { display: flex; align-items: flex-start; gap: var(--e2); font-size: .92rem; }
.listo__lista .ico { flex: none; margin-top: .15rem; color: #4B9B18; }
.listo__lista--acciones .ico { color: var(--primary); }

.ficha-reclamo {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  margin-bottom: var(--e4);
  padding: var(--e4);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  text-align: left;
}
.ficha-reclamo__ico {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  flex: none;
  border-radius: 50%;
  background: #EFF6E4;
}
.ficha-reclamo__nombre { display: block; color: var(--primary); margin-bottom: var(--e1); }
.ficha-reclamo__dato {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin: 0;
  font-size: .88rem;
  color: var(--text-soft);
}

/* ═══ 600 px ════════════════════════════════════════════════════════════════ */

@media (min-width: 600px) {
  .alta__cuerpo { padding: var(--e5); }
  .alta__dos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .alta__acciones .boton { flex: none; }
  .alta__acciones { justify-content: space-between; }
  .rubros__barra { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .atributos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═══ 900 px ════════════════════════════════════════════════════════════════ */

@media (min-width: 900px) {

  /* El indicador pasa a ser la barra lateral del mockup de escritorio: mismo
     marcado, en columna. */
  .alta {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--e5);
    padding-top: var(--e6);
  }

  .pasos-alta {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: var(--e1);
    align-self: start;
    position: sticky;
    top: 88px;
  }

  .paso-alta { text-align: left; }
  .paso-alta:not(:last-child)::after {
    top: auto;
    left: 15px;
    width: 2px;
    height: 100%;
  }

  .paso-alta__enlace {
    grid-auto-flow: column;
    justify-items: start;
    justify-content: start;
    align-items: center;
    gap: var(--e3);
    min-height: var(--tactil);
    padding: var(--e2) var(--e3);
    border-radius: var(--radio);
    font-size: .92rem;
  }
  .paso-alta--activo .paso-alta__enlace { background: #EFF6E4; }

  .alta__cuerpo { padding: var(--e6); }
  .alta__titulo { font-size: 1.5rem; }

  .visibilidad { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }

  .atributos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =============================================================================
   Sesión 11 — Planes, todos los rubros, contacto y marcador sin foto
   Mobile primero: sin `@media` es el celular.
   ============================================================================= */

/* ─── Rejilla de rubros: cuatro columnas como techo ────────────────────────── */

/* `auto-fill` con mínimo de 150 px venía bien hasta los 900 px, pero a 1200 el
   contenedor entra siete columnas y las tarjetas quedan como botones sueltos,
   sin la jerarquía que tienen en el mockup. §0.5 fija cuatro como máximo, así
   que el número de columnas pasa a ser explícito en cada corte.

   `minmax(0, 1fr)` y no `1fr`: es el cuarto lugar del proyecto donde una
   columna `auto` desbordaba la grilla con un nombre largo. */
.rejilla-rubros { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Los nombres de rubro no se parten con guión. «Librería, juguetes y regalos»
   cortado como «jugue-tes» se lee peor que en dos líneas: son etiquetas de
   navegación, no prosa. */
.tarjeta-rubro__nombre,
.tarjeta-rubro-grande__nombre { hyphens: none; overflow-wrap: break-word; }

/* ─── Todos los rubros: una tarjeta por categoría ──────────────────────────── */

.rejilla-rubros--grande {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.tarjeta-rubro-grande {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  padding: var(--e4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.tarjeta-rubro-grande:hover { border-color: var(--accent); }

.tarjeta-rubro-grande__cabecera {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e3);
  color: inherit;
}
.tarjeta-rubro-grande__cabecera:hover { text-decoration: none; }

.tarjeta-rubro-grande__ico {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  flex: none;
  border-radius: var(--radio-chico);
  background: var(--muted);
  color: var(--primary);
}
.tarjeta-rubro-grande__ico .ico { width: 26px; height: 26px; }

.tarjeta-rubro-grande__cuerpo { display: grid; gap: .1rem; min-width: 0; }
.tarjeta-rubro-grande__nombre { font-weight: 800; font-size: 1rem; line-height: 1.25; }
.tarjeta-rubro-grande__dato   { font-size: .82rem; color: var(--text-soft); }
.tarjeta-rubro-grande__flecha { color: var(--text-soft); flex: none; }

/* Las subcategorías son lo que hace útil la página: nadie busca «Oficios y
   servicios», busca «gasista». Van adentro de la tarjeta, no escondidas. */
.tarjeta-rubro-grande__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
  list-style: none;
  padding: var(--e3) 0 0;
  margin: 0;
  border-top: 1px solid var(--border);
}

.chip--mas { background: var(--muted); color: var(--text); border: 1px dashed var(--border); }
a.chip--mas:hover { background: var(--primary); color: #fff; }

/* ─── Planes ───────────────────────────────────────────────────────────────── */

/* En la home la lista de prestaciones muestra solo lo que suma respecto del
   plan anterior. Acá, que es la página de la decisión, se muestra entera. */
.plan__lista--abierta { font-size: .9rem; }

.plan__nota {
  margin: var(--e2) 0 0;
  font-size: .8rem;
  color: var(--text-soft);
}

/* ─── Tabla comparativa ────────────────────────────────────────────────────── */

/* No es un `<table>`: cuatro columnas de tabla a 360 px obligan a desplazar en
   horizontal, y §0.5 no lo admite. Es una grilla que en celular pone la
   prestación arriba y los tres planes debajo, y a partir de 600 px los alinea
   en una fila como en el mockup. */
.comparativa {
  border: 1px solid var(--border);
  border-radius: var(--radio);
  background: var(--surface);
  overflow: hidden;
}

.comparativa__fila {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: var(--e2);
  padding: var(--e3) var(--e4);
  border-top: 1px solid var(--border);
}
.comparativa__fila:first-child { border-top: 0; }

/* La cabecera con los nombres de plan solo hace falta cuando la fila se lee en
   horizontal. En celular cada valor lleva su propio rótulo. */
.comparativa__fila--cabecera { display: none; }

.comparativa__que {
  grid-column: 1 / -1;
  font-weight: 700;
  font-size: .9rem;
}

.comparativa__valor {
  display: flex;
  align-items: center;
  gap: var(--e1);
  font-size: .82rem;
  color: var(--text-soft);
}
/* El nombre del plan sale del atributo, así no hay que repetirlo en el marcado
   ni mantener dos listas sincronizadas. */
.comparativa__valor::before {
  content: attr(data-plan) ": ";
  color: var(--text-soft);
}

.comparativa__si { color: #5C9E1E; }
.comparativa__no { color: #9AA6AF; }
/* Lo que el plan va a incluir pero todavía no se puede usar: se anuncia, no se
   promete. Hoy, la galería de fotos. */
.comparativa__pronto { color: var(--text-soft); font-size: .78rem; font-weight: 700; }

/* ─── Contacto ─────────────────────────────────────────────────────────────── */

.contacto-form {
  margin-top: var(--e6);
  padding-top: var(--e5);
  border-top: 1px solid var(--border);
}
.contacto-form__titulo { margin: 0 0 var(--e4); font-size: 1.25rem; }
.contacto-form__otra { margin: var(--e4) 0 0; }

/* El envío vuelve con `#escribinos` y la cabecera es pegajosa: sin este margen
   el navegador deja la confirmación justo debajo de la barra, tapada. */
#escribinos, #reportar { scroll-margin-top: 5.5rem; }

/* =============================================================================
   sm — 600 px
   ============================================================================= */

@media (min-width: 600px) {

  .rejilla-rubros { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .rejilla-rubros--grande { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* La comparativa se lee en horizontal: prestación y un valor por plan. */
  .comparativa__fila {
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  }
  .comparativa__fila--cabecera {
    display: grid;
    background: var(--muted);
    font-weight: 800;
    font-size: .85rem;
  }
  .comparativa__que { grid-column: auto; }
  .comparativa__plan { text-align: center; }
  .comparativa__valor { justify-content: center; font-size: .9rem; }
  .comparativa__valor::before { content: none; }
}

/* =============================================================================
   md — 900 px
   ============================================================================= */

@media (min-width: 900px) {

  /* El techo de §0.5: cuatro y no más, por ancha que sea la pantalla. */
  .rejilla-rubros { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .rejilla-rubros--grande { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =============================================================================
   Sesión 11 · parte 2 — Cercanía, «Abierto ahora» y mapa de resultados (§6.2)
   Mobile primero: sin `@media` es el celular.
   ============================================================================= */

/* ─── El control de ubicación del buscador ─────────────────────────────────── */

.buscador__cerca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  margin: 0;
  font-size: .85rem;
}
.buscador__estado { color: var(--text-soft); }

/* ─── La barra de cercanía, arriba de los resultados ───────────────────────── */

.cercania {
  display: grid;
  gap: var(--e3);
  margin-bottom: var(--e4);
}

.cercania__estado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  margin: 0;
  font-size: .88rem;
  color: var(--text-soft);
}
.cercania__estado--ok { color: var(--text); }
.cercania__estado--ok .ico { color: #5C9E1E; }

/* El aviso de «no pudimos ubicarte» no va en rojo: no es un error del
   visitante ni del sitio, y pintarlo de rojo lo convierte en uno (§6.2). */
.cercania__aviso { color: var(--text-soft); }

.cercania__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
}

/* Área táctil de §0.5: son dos controles que se tocan con el pulgar. */
.cercania__acciones > * { min-height: var(--tactil); }
.cercania__vista { margin-left: auto; }

/* ─── Lista y mapa, alternados ─────────────────────────────────────────────── */

/* En celular se ve una **o** el otro. Un mapa apilado encima de los resultados
   empuja la lista fuera de pantalla, que es lo contrario de lo que quiere quien
   busca una panadería (§6.2). */
.resultados[data-vista="lista"] .resultados__mapa  { display: none; }
.resultados[data-vista="mapa"]  .resultados__lista { display: none; }

.mapa-resultados { display: grid; gap: var(--e3); }

.mapa-resultados__lienzo {
  height: 60vh;
  min-height: 320px;
  border-radius: var(--radio);
  border: 1px solid var(--border);
  background: var(--muted);
  z-index: 0;                 /* debajo de la barra inferior y del panel */
}

/* ─── El carril sincronizado con los pines ─────────────────────────────────── */

/* Desplazamiento horizontal con anclaje: la tarjeta siempre queda alineada, no
   a medias. Es la única forma de que a 360 px se vea el mapa y se sepa de quién
   es cada punto sin abrir nada. */
.carril {
  display: flex;
  gap: var(--e2);
  margin: 0;
  padding: 0 0 var(--e2);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.carril__item {
  flex: 0 0 78%;
  scroll-snap-align: center;
}

.carril__tarjeta {
  display: grid;
  gap: var(--e1);
  height: 100%;
  padding: var(--e3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  color: inherit;
}
.carril__tarjeta:hover { border-color: var(--accent); text-decoration: none; }

.carril__nombre { font-weight: 700; font-size: .95rem; line-height: 1.25; }
.carril__dato {
  display: flex;
  align-items: flex-start;
  gap: var(--e1);
  font-size: .8rem;
  color: var(--text-soft);
}
.carril__distancia { font-size: .8rem; font-weight: 700; color: var(--primary); }

.carril .chip { justify-self: start; }

/* ─── Los pines ────────────────────────────────────────────────────────────── */

/* `divIcon` y no una imagen: un `<div>` con el color de la guía se ve nítido en
   cualquier densidad de pantalla y no agrega una descarga más. */
.pin {
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(26, 36, 48, .45);
}
.pin--pago   { background: var(--accent); }
.pin--activo { transform: scale(1.45); z-index: 400; }

/* «Acá estás» no es un comercio más: color propio y un halo que lo separa. */
.pin--yo {
  background: #1E88E5;
  border-color: #fff;
  box-shadow: 0 0 0 6px rgba(30, 136, 229, .22);
}

/* ─── El globo de un pin ───────────────────────────────────────────────────── */

.leaflet-popup-content { margin: var(--e3); min-width: 160px; }
.globo__nombre { display: block; font-size: .95rem; line-height: 1.25; }
.globo__rubro  { display: block; margin-top: .15rem; font-size: .78rem; color: #3F5A18; }
.globo__dato   { display: block; margin-top: .15rem; font-size: .8rem; color: var(--text-soft); }
.globo__enlace { display: inline-block; margin-top: var(--e2); font-weight: 700; }

/* ─── La distancia en la fila del listado ──────────────────────────────────── */

.fila-listado__distancia {
  flex: none;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}

/* «Cómo llegar» comparte forma con los otros botones redondos de la fila, pero
   no color: es una acción de navegación, no de contacto. */
.boton-redondo--llegar { color: var(--primary); }

/* =============================================================================
   md — 900 px
   ============================================================================= */

@media (min-width: 900px) {

  /* Acá conviven: mapa a un lado y lista al otro, y el botón de cambiar sobra.
     El corte tiene que ser el mismo que el de `app.js`, que decide con él
     cuándo dibujar el mapa sin que nadie se lo pida. */
  .cercania__vista { display: none; }

  .resultados {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--e5);
    align-items: start;
  }
  .resultados[data-vista="lista"] .resultados__mapa,
  .resultados[data-vista="mapa"]  .resultados__lista { display: block; }

  /* Con el mapa al lado, la lista vuelve a una sola columna: dos columnas de
     filas en la mitad del ancho quedan ilegibles. */
  .resultados .listado__lista { grid-template-columns: minmax(0, 1fr); }

  /* El mapa acompaña el desplazamiento de la lista en vez de quedar arriba y
     desaparecer a la tercera fila. */
  .resultados__mapa { position: sticky; top: var(--e5); }
  .mapa-resultados__lienzo { height: 66vh; min-height: 420px; }

  /* En escritorio el carril no hace falta: los pines se ven todos y hay lugar
     para la lista al lado. */
  .carril { display: none; }
}

/* ─── «¿Quisiste decir…?» ──────────────────────────────────────────────────
   Va arriba del resto del texto de la pantalla vacía y más grande: es lo único
   de esa pantalla que resuelve la búsqueda en un toque. */
.vacio__sugerencia {
  margin-bottom: var(--e3);
  font-size: 1.05rem;
}
.vacio__sugerencia a { font-weight: 700; }

/* El aviso de «mostrando resultados para otra cosa». Va antes de la lista y
   lleva la salida adentro: sin eso, el que escribió bien y cayó acá por una
   coincidencia no tiene cómo volver a su búsqueda. */
.busqueda-corregida { margin: 0 0 var(--e4); }

/* La nota de la verificación, separada de la tabla comparativa: pegada se leía
   como una fila más de la tabla (23-09-2026). */
.planes__nota { margin-top: var(--e6); }

/* El botón de «¿Cómo se contrata?», centrado abajo de los tres pasos. */
.cta__accion--centrada { margin-top: var(--e5); text-align: center; }
.cta__accion--centrada .boton { width: auto; }

/* El título de una sección que abre un bloque con tarjetas pegadas abajo. Sin
   esto, «Planes para tu comercio» quedaba tocando la primera tarjeta. */
.seccion__titulo--con-aire { margin-bottom: var(--e5); }