/* ===== Mi Perry — estilos de la app =====
   Este archivo NO define colores ni fuentes propias: todo sale de las
   variables de css/marca.css. Si algo se ve mal de color o tipografía,
   se corrige allá, no aquí. */

@import url("marca.css");

* { box-sizing: border-box; }

a, button { touch-action: manipulation; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-base);
  line-height: var(--interlinea);
  color: var(--color-texto);
  background: var(--color-fondo);
  -webkit-font-smoothing: antialiased;
  /* Espacio para que la barra de navegación fija no tape el contenido */
  padding-bottom: calc(var(--alto-barra-nav) + env(safe-area-inset-bottom, 0px));
}

h1, h2, h3 {
  font-family: var(--fuente-titulo);
  line-height: var(--interlinea-titulo);
  font-weight: var(--peso-fuerte);
}

.contenedor {
  width: 100%;
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  padding: var(--esp-4) 18px var(--esp-2);
}

/* ===== Encabezado de marca (logo + selector de idioma) ===== */
.marca-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-2) 0 var(--esp-3);
  border-bottom: 1px solid var(--color-borde);
  margin-bottom: var(--esp-3);
}
.marca-encabezado-izq {
  display: flex;
  align-items: center;
  min-width: 0;
}
.marca-encabezado .marca-logo {
  display: block;
  height: 32px;
  width: auto;
}
.marca-encabezado .marca-nombre {
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-fuerte);
  font-size: var(--texto-md);
  color: var(--color-primario-oscuro);
  border-left: 2px solid var(--color-borde-fuerte);
  padding-left: var(--esp-3);
  margin-left: var(--esp-3);
  white-space: nowrap;
}

/* Leyenda obligatoria mientras el prototipo no sea oficial */
.sello-propuesta {
  display: block;
  text-align: center;
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
  background: var(--color-superficie-suave);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-pildora);
  padding: 6px var(--esp-3);
  margin: 0 auto var(--esp-4);
  max-width: fit-content;
}

/* ===== Encabezado de pantalla ===== */
.encabezado {
  text-align: center;
  padding: var(--esp-2) 0 var(--esp-1);
}
.encabezado h1 {
  font-size: var(--texto-2xl);
  margin: 0 0 var(--esp-1);
  color: var(--color-titulo);
}
.encabezado p {
  margin: 0;
  color: var(--color-texto-suave);
}

/* ===== Botón principal ===== */
.boton {
  font-family: inherit;
  font-size: var(--texto-md);
  font-weight: var(--peso-fuerte);
  padding: 14px var(--esp-5);
  border: none;
  border-radius: var(--radio-sm);
  background: var(--color-primario);
  color: var(--color-texto-inverso);
  cursor: pointer;
  min-height: var(--toque-min);
}
.boton:hover { background: var(--color-primario-oscuro); }
.boton:focus-visible { outline: var(--grosor-foco) solid var(--color-acento); outline-offset: 2px; }

/* ===== Tarjetas de categoría ===== */
.titulo-seccion {
  font-size: var(--texto-xl);
  margin: var(--esp-5) 0 var(--esp-3);
  color: var(--color-texto);
}
.rejilla-categorias {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.tarjeta-categoria {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  text-align: center;
  text-decoration: none;
  color: var(--color-texto);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: var(--esp-5) 14px;
  min-height: 128px;
  font-size: var(--texto-lg);
  font-weight: var(--peso-fuerte);
}
.tarjeta-categoria:hover { border-color: var(--color-primario); background: var(--color-superficie-suave); }
.tarjeta-categoria:focus-visible { outline: var(--grosor-foco) solid var(--color-acento); outline-offset: 2px; }
.tarjeta-categoria .icono { font-size: 2.3rem; line-height: 1; }
.tarjeta-categoria .etiqueta { font-size: var(--texto-lg); }

/* ===== Pantalla de guías ===== */
.barra-navegacion { margin: var(--esp-1) 0 0; }
.barra-navegacion a,
.volver-lista a {
  color: var(--color-primario-oscuro);
  font-weight: var(--peso-fuerte);
  text-decoration: none;
  font-size: var(--texto-md);
}
.barra-navegacion a:hover,
.volver-lista a:hover { text-decoration: underline; }
.encabezado-guia { text-align: left; }
.encabezado-guia h1 { font-size: var(--texto-xl); }
.subtitulo { color: var(--color-texto-suave); margin: var(--esp-1) 0 0; }
.cargando { color: var(--color-texto-suave); }

.lista-guias { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.tarjeta-guia {
  display: grid;
  gap: 6px;
  text-decoration: none;
  color: var(--color-texto);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: var(--esp-4);
}
.tarjeta-guia:hover { border-color: var(--color-primario); }
.tarjeta-guia:focus-visible { outline: var(--grosor-foco) solid var(--color-acento); outline-offset: 2px; }
.tarjeta-guia-titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-lg);
  font-weight: var(--peso-fuerte);
  line-height: var(--interlinea-titulo);
}
.tarjeta-guia-resumen { color: var(--color-texto-suave); }

.intro-guia { font-size: var(--texto-md); }
.pasos { padding-left: 1.4em; margin: var(--esp-4) 0; }
.pasos li { margin-bottom: var(--esp-4); }
.pasos h3 { margin: 0 0 var(--esp-1); font-size: var(--texto-lg); color: var(--color-primario-oscuro); }
.pasos p { margin: 0; }

.bloque-consejos, .bloque-contactos {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: var(--esp-4);
  margin: var(--esp-4) 0;
}
.bloque-consejos h2, .bloque-contactos h2 { font-size: var(--texto-lg); margin: 0 0 var(--esp-2); }
.bloque-consejos ul, .bloque-contactos ul { margin: 0; padding-left: 1.2em; }
.bloque-contactos li { margin-bottom: var(--esp-3); list-style: none; }
.bloque-contactos ul { padding-left: 0; }
.volver-lista { margin: var(--esp-6) 0 var(--esp-2); }

/* ===== Pantalla de emergencia / ayuda ===== */
.aviso-demo {
  background: var(--color-aviso-fondo);
  border: 1px solid var(--color-aviso-borde);
  color: var(--color-aviso-texto);
  border-radius: var(--radio-sm);
  padding: var(--esp-3) 14px;
  margin: var(--esp-2) 0 var(--esp-4);
  font-size: var(--texto-md);
}
.aviso-demo strong { font-weight: var(--peso-fuerte); }

.acciones-emergencia { display: grid; gap: 14px; margin: var(--esp-2) 0; }
.boton-emergencia {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  text-decoration: none;
  font-size: var(--texto-xl);
  font-weight: var(--peso-fuerte);
  padding: var(--esp-5);
  border-radius: var(--radio);
  min-height: 70px;
  color: var(--color-texto-inverso);
  box-shadow: var(--sombra);
}
.boton-emergencia .icono { font-size: 1.6rem; }
.boton-emergencia.llamar { background: var(--color-emergencia); }
.boton-emergencia.llamar:hover { background: var(--color-emergencia-oscuro); }
.boton-emergencia.whatsapp { background: var(--color-acento); }
.boton-emergencia.whatsapp:hover { background: var(--color-acento-oscuro); }
.boton-emergencia:focus-visible { outline: var(--grosor-foco) solid var(--color-texto); outline-offset: 3px; }
.boton-emergencia[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

.nota-privacidad {
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
  text-align: center;
  margin: var(--esp-3) 0 var(--esp-1);
}

.conoce-derechos {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: var(--esp-4);
  margin: var(--esp-5) 0;
}
.conoce-derechos h2 { font-size: var(--texto-xl); margin: 0 0 var(--esp-3); color: var(--color-titulo); }
.conoce-derechos ul { margin: 0; padding-left: 1.1em; }
.conoce-derechos li { margin-bottom: var(--esp-3); }

/* ===== Chat del asistente ===== */
.contenedor-chat { display: flex; flex-direction: column; }
.mensajes {
  overflow-y: auto;
  max-height: 45vh;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-3) 2px;
  margin: var(--esp-2) 0;
}
.burbuja {
  max-width: 85%;
  padding: var(--esp-3) 15px;
  border-radius: var(--radio);
  font-size: var(--texto-md);
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.burbuja.asistente {
  align-self: flex-start;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-bottom-left-radius: var(--esp-1);
}
.burbuja.usuario {
  align-self: flex-end;
  background: var(--color-primario);
  color: var(--color-texto-inverso);
  border-bottom-right-radius: var(--esp-1);
}
.burbuja p { margin: 0 0 var(--esp-2); }
.burbuja p:last-child { margin-bottom: 0; }
.burbuja ul, .burbuja ol { margin: 6px 0; padding-left: 1.3em; }
.burbuja li { margin-bottom: var(--esp-1); }
.burbuja.error { background: var(--color-error-fondo); border: 1px solid var(--color-error-borde); color: var(--color-error-texto); }
.burbuja.aviso { background: var(--color-aviso-fondo); border: 1px solid var(--color-aviso-borde); color: var(--color-aviso-texto); }

.btn-reintento {
  display: inline-block;
  margin-top: var(--esp-2);
  font-family: inherit;
  background: var(--color-emergencia);
  color: var(--color-texto-inverso);
  border: none;
  border-radius: var(--radio-sm);
  padding: var(--esp-2) var(--esp-4);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
  cursor: pointer;
  min-height: 44px;
}
.btn-reintento:focus-visible { outline: var(--grosor-foco) solid var(--color-texto); outline-offset: 2px; }

/* Indicador "escribiendo…" */
.burbuja.escribiendo { display: flex; gap: 6px; align-items: center; }
.burbuja.escribiendo .punto {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-texto-suave);
  animation: parpadeo 1.2s infinite ease-in-out both;
}
.burbuja.escribiendo .punto:nth-child(2) { animation-delay: 0.2s; }
.burbuja.escribiendo .punto:nth-child(3) { animation-delay: 0.4s; }
@keyframes parpadeo {
  0%, 80%, 100% { opacity: 0.3; }
  40% { opacity: 1; }
}

.sugeridas { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin: var(--esp-1) 0 var(--esp-2); }
.btn-sugerida {
  font-family: inherit;
  background: var(--color-superficie);
  border: 1px solid var(--color-primario-claro);
  color: var(--color-primario-oscuro);
  border-radius: var(--radio-pildora);
  padding: var(--esp-2) 14px;
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
  cursor: pointer;
  min-height: 44px;
}
.btn-sugerida:hover { background: var(--color-superficie-suave); }
.btn-sugerida:focus-visible { outline: var(--grosor-foco) solid var(--color-acento); outline-offset: 2px; }

.form-chat { display: flex; gap: var(--esp-3); padding-bottom: var(--esp-2); }
.form-chat input {
  flex: 1;
  font-family: inherit;
  font-size: var(--texto-md);
  padding: 14px var(--esp-4);
  border: 2px solid var(--color-borde-fuerte);
  border-radius: var(--radio-sm);
  color: var(--color-texto);
  background: var(--color-superficie);
  min-width: 0;
}
.form-chat input:focus { outline: var(--grosor-foco) solid var(--color-foco); border-color: var(--color-primario); }

/* ===== Bienvenida (primera vez) ===== */
.overlay-bienvenida {
  position: fixed;
  inset: 0;
  background: var(--velo-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--esp-4);
  z-index: 2000;
}
.tarjeta-bienvenida {
  background: var(--color-superficie);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-lg);
  border-top: 5px solid var(--color-primario);
  padding: var(--esp-6) var(--esp-5) var(--esp-5);
  max-width: min(420px, 100%);
  text-align: center;
}
.tarjeta-bienvenida .bienvenida-logo {
  display: block;
  width: min(240px, 78%);
  height: auto;
  margin: 0 auto var(--esp-5);
}
.tarjeta-bienvenida h2 {
  margin: 0 0 var(--esp-3);
  color: var(--color-titulo);
  font-size: var(--texto-xl);
}
.tarjeta-bienvenida p { margin: 0 0 var(--esp-3); }
.tarjeta-bienvenida .boton { width: 100%; margin-top: 6px; }
.tarjeta-bienvenida .sello-propuesta { margin: var(--esp-4) auto 0; }

/* ===== Pantalla sin conexión ===== */
.pantalla-offline { text-align: center; padding: var(--esp-6) var(--esp-2); }
.icono-offline { font-size: 3.4rem; margin-bottom: var(--esp-2); }
.pantalla-offline h1 { color: var(--color-titulo); font-size: var(--texto-xl); }
.boton-enlace { display: inline-block; text-decoration: none; margin-top: var(--esp-2); }

.oculto { display: none !important; }

/* ===== Selector de idioma (ES / EN) ===== */
.selector-idioma {
  display: flex;
  justify-content: flex-end;
  gap: 0;
  margin: 0;
  flex: none;
}
.selector-idioma .opcion-idioma {
  min-width: 46px;
  min-height: 40px;
  padding: var(--esp-2) 14px;
  font-family: inherit;
  border: 1px solid var(--color-borde-fuerte);
  background: var(--color-superficie);
  color: var(--color-texto-suave);
  font-weight: var(--peso-fuerte);
  font-size: var(--texto-sm);
  cursor: pointer;
}
.selector-idioma .opcion-idioma:first-child { border-radius: var(--radio-pildora) 0 0 var(--radio-pildora); }
.selector-idioma .opcion-idioma:last-child { border-radius: 0 var(--radio-pildora) var(--radio-pildora) 0; border-left: none; }
.selector-idioma .opcion-idioma.activo {
  background: var(--color-primario);
  color: var(--color-texto-inverso);
  border-color: var(--color-primario);
}
.selector-idioma .opcion-idioma:focus-visible {
  outline: var(--grosor-foco) solid var(--color-acento);
  outline-offset: 2px;
  z-index: 1;
}

/* ===== Botón "Read in English" dentro de una guía ===== */
.fila-idioma-guia {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 var(--esp-2);
}
.btn-idioma-guia {
  font-family: inherit;
  background: var(--color-superficie-suave);
  border: 1px solid var(--color-primario-claro);
  color: var(--color-primario-oscuro);
  border-radius: var(--radio-pildora);
  padding: var(--esp-2) var(--esp-4);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
  cursor: pointer;
  min-height: 40px;
}
.btn-idioma-guia:hover { background: var(--color-superficie-suave-hover); }
.btn-idioma-guia:focus-visible { outline: var(--grosor-foco) solid var(--color-acento); outline-offset: 2px; }

/* ===== Barra de navegación inferior fija ===== */
.barra-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: var(--color-superficie);
  border-top: 1px solid var(--color-borde);
  box-shadow: var(--sombra-barra);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 1000;
}
.barra-nav .nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: var(--esp-2) var(--esp-1);
  text-decoration: none;
  color: var(--color-texto-suave);
  font-weight: var(--peso-fuerte);
  min-height: 60px;
}
.barra-nav .nav-icono { font-size: 1.6rem; line-height: 1; }
.barra-nav .nav-texto { font-size: var(--texto-xs); }
.barra-nav .nav-activa { color: var(--color-primario-oscuro); }
.barra-nav .nav-emergencia { color: var(--color-emergencia); }
.barra-nav .nav-emergencia.nav-activa { color: var(--color-emergencia-oscuro); }
.barra-nav .nav-item:focus-visible {
  outline: var(--grosor-foco) solid var(--color-acento);
  outline-offset: -3px;
}

/* ===== Tarjeta destacada del asistente ===== */
.tarjeta-asistente {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--color-texto);
  background: var(--color-superficie-suave);
  border: 1px solid var(--color-borde);
  border-left: 5px solid var(--color-primario);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: var(--esp-4);
  margin: var(--esp-4) 0 6px;
}
.tarjeta-asistente:hover { border-color: var(--color-primario); }
.tarjeta-asistente:focus-visible { outline: var(--grosor-foco) solid var(--color-acento); outline-offset: 2px; }
.tarjeta-asistente-icono { font-size: 2rem; line-height: 1; }
.tarjeta-asistente-texto { display: flex; flex-direction: column; flex: 1; }
.tarjeta-asistente-texto strong {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-lg);
  color: var(--color-primario-oscuro);
}
.tarjeta-asistente-flecha { font-size: var(--texto-xl); color: var(--color-primario-oscuro); font-weight: var(--peso-fuerte); }

/* ===== Enlace "¿Te quedó alguna duda?" al final de la guía ===== */
.duda-asistente { margin: var(--esp-5) 0 var(--esp-2); text-align: center; }
.duda-asistente a {
  display: inline-block;
  background: var(--color-superficie-suave);
  border: 1px solid var(--color-primario-claro);
  color: var(--color-primario-oscuro);
  border-radius: var(--radio-sm);
  padding: 14px var(--esp-4);
  font-weight: var(--peso-fuerte);
  text-decoration: none;
  min-height: 44px;
}
.duda-asistente a:hover { background: var(--color-superficie-suave-hover); }
.duda-asistente a:focus-visible { outline: var(--grosor-foco) solid var(--color-acento); outline-offset: 2px; }

.nota-pie {
  text-align: center;
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
  margin: var(--esp-4) 0 6px;
}

/* ===== Pie de marca ===== */
.pie-marca {
  text-align: center;
  padding: var(--esp-5) 0 var(--esp-2);
  border-top: 1px solid var(--color-borde);
  margin-top: var(--esp-5);
}
.pie-marca .pie-logo {
  display: block;
  height: 24px;
  width: auto;
  margin: 0 auto var(--esp-3);
  opacity: 0.8;
}

/* ===== Vista "app en un teléfono" solo en pantallas grandes =====
   En móvil no aplica nada de esto: la app sigue a pantalla completa.
   En escritorio/tablet se muestra dentro de un marco de teléfono centrado. */
@media (min-width: 820px) {
  html {
    min-height: 100vh;
    background:
      radial-gradient(1200px 600px at 50% -10%, var(--marco-halo) 0%, transparent 60%),
      linear-gradient(160deg, var(--marco-fondo-a) 0%, var(--marco-fondo-b) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
  }

  body {
    /* El "teléfono": alto fijo, y el contenido scrollea DENTRO de él. */
    width: 400px;
    height: 860px;
    max-height: calc(100vh - 56px);
    margin: 0;
    padding-bottom: 0; /* la barra ya no flota: es el pie del marco */
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;  /* el teléfono no scrollea; su contenido sí */
    border: 13px solid var(--marco-borde);
    border-radius: 52px;
    box-shadow:
      0 2px 0 2px var(--marco-brillo) inset,
      var(--sombra-marco);
  }

  /* La pantalla desplazable del teléfono */
  body > main.contenedor {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body > main.contenedor::-webkit-scrollbar { width: 0; height: 0; }

  /* La barra inferior es el pie fijo del marco (sin position: fixed) */
  .barra-nav {
    position: static;
    flex: 0 0 auto;
    border-radius: 0 0 38px 38px;
  }

  /* El chat usa toda la altura disponible del teléfono */
  body > main.contenedor-chat { height: auto; }
  .contenedor-chat .mensajes { max-height: none; flex: 1 1 auto; }

  /* Los overlays (bienvenida) cubren solo el teléfono, no toda la pantalla */
  .overlay-bienvenida { position: absolute; border-radius: 40px; }
}

/* Respeta la preferencia del sistema de reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== Detalles editoriales (Source Serif 4) =====
   Reservado para el eslogan de la ciudad y las citas. El eslogan NO se
   traduce: va siempre en inglés, tal como está en el logotipo oficial. */
.eslogan {
  font-family: var(--fuente-editorial);
  font-weight: var(--peso-medio);
  font-size: var(--texto-md);
  color: var(--color-texto-suave);
  text-align: center;
  margin: 0;
}

/* El encabezado de marca completo es un enlace al inicio */
.marca-encabezado-izq {
  text-decoration: none;
  color: inherit;
  border-radius: var(--radio-sm);
}
.marca-encabezado-izq:focus-visible {
  outline: var(--grosor-foco) solid var(--color-acento);
  outline-offset: 3px;
}

/* ===== Aviso de límites de la ciudad ===== */
.aviso-limites {
  background: var(--color-superficie-suave);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
  padding: var(--esp-3) 14px;
  margin: var(--esp-4) 0;
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}

/* ===== Mensaje de aviso / vacío ===== */
.mensaje-aviso {
  background: var(--color-aviso-fondo);
  border: 1px solid var(--color-aviso-borde);
  color: var(--color-aviso-texto);
  border-radius: var(--radio-sm);
  padding: 14px var(--esp-4);
  margin: 14px 0;
}

/* ===== Bloque "Fuente oficial" al final de cada guía ===== */
.bloque-fuente {
  background: var(--color-superficie-suave);
  border-left: 4px solid var(--color-primario);
  border-radius: var(--radio-sm);
  padding: var(--esp-4);
  margin: var(--esp-5) 0 var(--esp-4);
}
.bloque-fuente h2 {
  font-size: var(--texto-md);
  margin: 0 0 var(--esp-2);
  color: var(--color-primario-oscuro);
}
.bloque-fuente p { margin: 0; }
.bloque-fuente a { color: var(--color-primario-oscuro); font-weight: var(--peso-fuerte); }
.bloque-fuente-url {
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
  word-break: break-all;
  margin-top: var(--esp-1) !important;
}

.enlace-tel {
  color: var(--color-primario-oscuro);
  font-weight: var(--peso-fuerte);
  font-size: var(--texto-lg);
}

/* ===== Eventos ===== */
.lista-eventos { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }

.tarjeta-evento {
  display: flex;
  gap: 14px;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: var(--esp-4);
}

/* Bloque de fecha a la izquierda, tipo calendario */
.evento-fecha {
  flex: none;
  width: 56px;
  text-align: center;
  background: var(--color-primario);
  color: var(--color-texto-inverso);
  border-radius: var(--radio-sm);
  padding: var(--esp-2) 0;
  align-self: flex-start;
}
.evento-mes {
  display: block;
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.evento-dia { display: block; font-size: var(--texto-xl); font-weight: var(--peso-fuerte); line-height: 1.1; }

.evento-cuerpo { min-width: 0; flex: 1; }
.evento-nombre { font-size: var(--texto-lg); margin: 0 0 var(--esp-1); color: var(--color-titulo); }
.evento-cuando { margin: 0 0 var(--esp-1); font-size: var(--texto-sm); color: var(--color-texto-suave); }
.evento-rango { margin: 0 0 var(--esp-2); font-size: var(--texto-xs); color: var(--color-texto-suave); font-style: italic; }
.evento-lugar { margin: 0 0 var(--esp-2); font-size: var(--texto-sm); font-weight: var(--peso-fuerte); }
.evento-lugar span { font-weight: var(--peso-normal); color: var(--color-texto-suave); }
.evento-desc { margin: 0 0 var(--esp-3); font-size: var(--texto-sm); }

.evento-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--esp-2); }
.etiqueta-evento {
  display: inline-block;
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  padding: 3px var(--esp-3);
  border-radius: var(--radio-pildora);
}
.etiqueta-evento.gratis { background: var(--color-ok-fondo); color: var(--color-ok-texto); }
.etiqueta-evento.familias { background: var(--color-superficie-suave); color: var(--color-primario-oscuro); }
.etiqueta-evento.fuera-de-perry { background: var(--color-aviso-fondo); color: var(--color-aviso-texto); }

.evento-acciones { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.btn-evento {
  flex: 1 1 auto;
  text-align: center;
  font-family: inherit;
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
  text-decoration: none;
  background: var(--color-superficie);
  color: var(--color-primario-oscuro);
  border: 1px solid var(--color-primario-claro);
  border-radius: var(--radio-sm);
  padding: var(--esp-3) var(--esp-3);
  min-height: 44px;
  cursor: pointer;
}
.btn-evento:hover { background: var(--color-superficie-suave); }
.btn-evento:focus-visible { outline: var(--grosor-foco) solid var(--color-acento); outline-offset: 2px; }

.mas-eventos { text-align: center; margin: var(--esp-5) 0 var(--esp-2); }
.mas-eventos a {
  display: inline-block;
  color: var(--color-primario-oscuro);
  font-weight: var(--peso-fuerte);
  text-decoration: none;
  border-bottom: 2px solid var(--color-primario-claro);
  padding: var(--esp-2) 0;
  min-height: 44px;
}
.mas-eventos a:focus-visible { outline: var(--grosor-foco) solid var(--color-acento); outline-offset: 2px; }

/* ===== Próximo evento destacado en Inicio ===== */
.destacado-evento {
  display: grid;
  gap: 2px;
  text-decoration: none;
  color: var(--color-texto);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-left: 5px solid var(--color-primario);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: var(--esp-4);
  margin: var(--esp-4) 0;
}
.destacado-evento:hover { border-color: var(--color-primario); }
.destacado-evento:focus-visible { outline: var(--grosor-foco) solid var(--color-acento); outline-offset: 2px; }
.destacado-etiqueta {
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primario-oscuro);
}
.destacado-nombre { font-size: var(--texto-lg); font-weight: var(--peso-fuerte); color: var(--color-titulo); }
.destacado-cuando { font-size: var(--texto-sm); color: var(--color-texto-suave); }
.destacado-lugar { font-size: var(--texto-sm); color: var(--color-texto-suave); }
.destacado-ver {
  margin-top: var(--esp-2);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
  color: var(--color-primario-oscuro);
}

/* Barra inferior: la pestaña de Ayuda va en rojo */
.barra-nav .nav-ayuda { color: var(--color-emergencia); }
.barra-nav .nav-ayuda.nav-activa { color: var(--color-emergencia-oscuro); }

/* Con 5 pestañas el texto necesita algo más de aire */
.barra-nav .nav-texto { font-size: 0.78rem; text-align: center; line-height: 1.15; }

/* ===== Ayuda: bloque de emergencias (lo más visible de la pantalla) ===== */
.bloque-911 {
  background: var(--color-error-fondo);
  border: 2px solid var(--color-emergencia);
  border-radius: var(--radio-lg);
  padding: var(--esp-5) var(--esp-4);
  margin: var(--esp-3) 0 var(--esp-5);
  text-align: center;
}
.titulo-911 {
  font-size: var(--texto-xl);
  margin: 0 0 var(--esp-4);
  color: var(--color-emergencia-oscuro);
}
.boton-911 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  text-decoration: none;
  font-size: var(--texto-2xl);
  font-weight: var(--peso-fuerte);
  padding: var(--esp-5);
  border-radius: var(--radio);
  min-height: 84px;
  color: var(--color-texto-inverso);
  background: var(--color-emergencia);
  box-shadow: var(--sombra);
}
.boton-911:hover { background: var(--color-emergencia-oscuro); }
.boton-911:focus-visible { outline: var(--grosor-foco) solid var(--color-texto); outline-offset: 3px; }
.boton-911 .icono { font-size: 1.6rem; }
.nota-911 {
  margin: var(--esp-3) 0 0;
  font-size: var(--texto-sm);
  color: var(--color-error-texto);
}

/* ===== Ayuda: lista de teléfonos de la ciudad ===== */
.lista-telefonos { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--esp-3); }
.fila-telefono {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: var(--esp-4);
}
.fila-telefono-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.fila-telefono-info strong { font-size: var(--texto-md); }
.fila-telefono-numero {
  font-size: var(--texto-lg);
  font-weight: var(--peso-fuerte);
  color: var(--color-primario-oscuro);
}
.fila-telefono-detalle { font-size: var(--texto-sm); color: var(--color-texto-suave); }
.btn-llamar {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
  background: var(--color-primario);
  color: var(--color-texto-inverso);
  border-radius: var(--radio-pildora);
  padding: var(--esp-3) var(--esp-4);
  min-height: var(--toque-min);
}
.btn-llamar:hover { background: var(--color-primario-oscuro); }
.btn-llamar:focus-visible { outline: var(--grosor-foco) solid var(--color-acento); outline-offset: 2px; }