/* ==========================================================================
   La Trastienda — Componentes y layout
   Fase 2. Mobile-first: esto es la base (~320-479px). Los ajustes para
   pantallas mayores viven en responsive.css, nunca aquí.
   ========================================================================== */

.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-16);
}

/* ==========================================================================
   Fade-in al hacer scroll (activado por main.js vía IntersectionObserver
   sobre [data-reveal]). Si JS no carga, o si el navegador no soporta
   IntersectionObserver, el elemento se queda simplemente visible desde el
   principio (opacity:1 por defecto) — .reveal NUNCA oculta contenido por
   sí sola, solo prepara la transición cuando JS confirma que puede animarla.
   ========================================================================== */
.reveal {
  opacity: 1;
  transform: none;
}

.reveal.js-armed {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.reveal.js-armed.is-visible {
  opacity: 1;
  transform: none;
}

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

.section {
  padding-block: var(--space-48);
}

.section--cream {
  background: var(--color-cream);
}

.section--brown {
  background: var(--color-brown);
  color: var(--color-white);
}

.section__header {
  margin-bottom: var(--space-32);
}

h1 {
  margin-bottom: var(--space-16);
}

.section__title {
  color: var(--color-brown);
  font-size: var(--font-size-h2);
  margin-bottom: var(--space-16);
}

.section--brown .section__title {
  color: var(--color-white);
}

.section p + p {
  margin-top: var(--space-12);
}

/* ==========================================================================
   Skip link
   ========================================================================== */

.skip-link {
  position: absolute;
  top: var(--space-8);
  left: var(--space-8);
  z-index: var(--z-skip-link);
  padding: var(--space-12) var(--space-16);
  background: var(--color-white);
  color: var(--color-brown);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-weight: var(--font-weight-semibold);
  transform: translateY(-150%);
  transition: transform var(--transition-fast);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ==========================================================================
   Botones / CTA
   Contraste verificado: blanco (#fff) sobre --color-brown (#5c3822) =
   10.3:1 AAA. --color-brown sobre --color-cream = igual de alto (fondo
   más claro que blanco). Variante outline: --color-brown sobre blanco.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: var(--space-8);
  min-height: var(--touch-target-comfortable);
  padding: var(--space-12) var(--space-24);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-body);
  line-height: 1;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn--primary {
  background: var(--color-brown);
  color: var(--color-white);
}

.btn--primary:hover {
  background: var(--color-brown-dark);
}

.btn--secondary {
  background: transparent;
  border-color: var(--color-brown);
  color: var(--color-brown);
}

.btn--secondary:hover {
  background: var(--color-brown);
  color: var(--color-white);
}

/* Sobre fondo oscuro (ej. hero con imagen, footer) */
.btn--on-dark.btn--secondary {
  border-color: var(--color-white);
  color: var(--color-white);
}

.btn--on-dark.btn--secondary:hover {
  background: var(--color-white);
  color: var(--color-brown);
}

.btn__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}

/* ==========================================================================
   Header
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-cream-dark);
  transition: box-shadow var(--transition-base);
}

.header.is-scrolled {
  box-shadow: var(--shadow-md);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding-block: var(--space-12);
}

/* Lockup horizontal dedicado (logo-la-trastienda-horizontal.png), no el
   cuadrado apilado: a la altura de una barra de header ese se aplastaba
   y el texto dejaba de leerse.
   max-width:none anula el max-width:100% del reset global: dentro de un
   flex item sin ancho propio (.header__logo), esa regla porcentual entra
   en dependencia circular con el "width:auto" y el navegador colapsa la
   imagen a 0px de ancho. Aquí SÍ queremos que el ancho lo decida solo la
   proporción natural de la imagen (alto fijo, ancho según su aspect ratio). */
.header__logo img {
  height: 60px;
  width: auto;
  max-width: none;
}

.header__cta {
  display: none; /* aparece en desktop, ver responsive.css */
}

.header__menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-comfortable);
  height: var(--touch-target-comfortable);
  border-radius: var(--radius-sm);
}

.header__menu-toggle:hover {
  background: var(--color-cream);
}

.header__menu-icon {
  width: 24px;
  height: 24px;
}

/* ==========================================================================
   Navegación principal (móvil: panel a pantalla completa; ver responsive.css)
   ========================================================================== */

.nav {
  position: fixed;
  inset: 0;
  top: 65px; /* alto aproximado del header, mismo valor que --header-h si se añade más adelante */
  z-index: var(--z-mobile-nav);
  background: var(--color-white);
  padding: var(--space-32) var(--space-16);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--transition-base), visibility 0s linear var(--transition-base);
  overflow-y: auto;
}

/* visibility:hidden ya saca los enlaces del orden de tabulación mientras
   el panel está cerrado (aunque siga "presente" fuera de pantalla) — sin
   esto, un usuario de teclado podía tabular por enlaces invisibles antes
   de llegar al resto de la página. El retraso en la transición de
   visibility deja que la animación de deslizamiento se vea al cerrar. */
.nav[data-open='true'] {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--transition-base);
}

.nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.nav__link {
  display: block;
  padding: var(--space-16);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-h3);
  font-family: var(--font-body);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.nav__link:hover {
  background: var(--color-cream);
}

.nav__link[aria-current='page'] {
  color: var(--color-brown);
  background: var(--color-cream);
}

.nav__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  margin-top: var(--space-24);
}

.nav__status-row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.nav__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  background: var(--color-cream-dark);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.nav__status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  animation: status-pulse 2s ease-in-out infinite;
}

.nav__status[data-status='cerrado']::before {
  background: var(--color-error);
}

.nav__horario-link {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brown);
  text-decoration: underline;
}

.nav__cta {
  width: 100%;
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.breadcrumbs {
  padding-block: var(--space-12);
  font-size: var(--font-size-small);
  color: var(--color-text-light);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.breadcrumbs__item:not(:last-child)::after {
  content: '/';
  margin-left: var(--space-4);
  color: var(--color-text-light);
}

.breadcrumbs__link {
  color: var(--color-blue);
  text-decoration: underline;
}

.breadcrumbs__item[aria-current='page'] {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  color: var(--color-white);
  min-height: 70vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.hero__media picture,
.hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay para garantizar contraste del texto sobre cualquier foto,
   sin depender de dónde caigan las zonas claras/oscuras de la imagen */
.hero__media::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to bottom, rgba(46, 28, 15, 0.1) 0%, rgba(46, 28, 15, 0.6) 40%, rgba(46, 28, 15, 0.9) 100%);
}

.hero__content {
  position: relative;
  padding-block: var(--space-48);
  max-width: 640px;
}

.hero__title {
  font-size: var(--font-size-h1);
  color: var(--color-white);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.hero__claim {
  font-size: var(--font-size-h3);
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  margin-top: var(--space-12);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.hero__badges {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-16);
}

.hero__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-16);
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  backdrop-filter: blur(4px);
  text-decoration: none;
}

/* Animación de punto pulsante para estado "Abierto" en tiempo real */
@keyframes status-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.35); }
}

.hero__status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  animation: status-pulse 2s ease-in-out infinite;
}

.hero__status[data-status='cerrado']::before {
  background: var(--color-error);
  animation: none; /* sin pulso cuando está cerrado */
}

/* Variante teléfono: icono SVG en lugar del punto */
.hero__status--tel::before {
  display: none;
}

.hero__status-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.hero .btn-group {
  margin-top: var(--space-24);
}

/* ==========================================================================
   Tarjetas (categorías, productos, valores)
   ========================================================================== */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-24);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-24);
  background: var(--color-cream-dark);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

/* Icono envuelto en un círculo de marca para dar jerarquía visual */
.card__icon-wrapper {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-base);
}

.card:hover .card__icon-wrapper {
  background: var(--color-cream-dark);
}

.card__icon {
  width: 28px;
  height: 28px;
  color: var(--color-brown);
}

.card__title {
  font-size: var(--font-size-h3);
  color: var(--color-brown-dark);
}

.card__text {
  color: var(--color-text);
  font-size: var(--font-size-small);
}

.card__list {
  margin-top: var(--space-8);
  padding-left: var(--space-24);
  color: var(--color-text);
  font-size: var(--font-size-small);
}

.card__list li {
  margin-bottom: var(--space-4);
}

.card__link {
  margin-top: auto;
  color: var(--color-blue);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  align-self: flex-start;
}

/* Bloque destacado (ej. "Punto de recogida y envío de paquetes") */
.feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-32);
  background: var(--color-white);
  border: 2px solid var(--color-cream-dark);
  border-radius: var(--radius-lg);
}

/* ==========================================================================
   Operadores y plataformas (paquetería) — logo real + nombre en texto,
   nunca solo el logo (ver implementation_plan.md sección 4.4)
   ========================================================================== */

.operators {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-24);
}

.operators__item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-16);
  background: var(--color-white);
  border: 1px solid var(--color-cream-dark);
  border-radius: var(--radius-sm);
}

.operators__logo {
  height: 24px;
  width: auto;
}

.operators__name {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

/* ==========================================================================
   FAQ — <details>/<summary> nativo: accesible y funciona sin JS
   ========================================================================== */

.faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.faq__item {
  background: var(--color-white);
  border: 1px solid var(--color-cream-dark);
  border-radius: var(--radius-md);
  padding: var(--space-16) var(--space-24);
}

.faq__item[open] {
  box-shadow: var(--shadow-sm);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brown-dark);
  list-style: none;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.faq__item[open] .faq__icon {
  transform: rotate(180deg);
}

.faq__answer {
  margin-top: var(--space-12);
  color: var(--color-text);
}

/* ==========================================================================
   Tabla de horario — semántica, sin JS necesario para leerla
   ========================================================================== */

.schedule-table {
  width: 100%;
  border-collapse: collapse;
}

.schedule-table caption {
  text-align: left;
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-12);
  color: var(--color-brown);
}

.schedule-table th,
.schedule-table td {
  padding: var(--space-12) var(--space-16);
  text-align: left;
  border-bottom: 1px solid var(--color-cream-dark);
}

.schedule-table th {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-light);
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Mapa — click-to-load (ver consent.js, Fase 3)
   ========================================================================== */

.map-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-cream-dark);
}

.map-embed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.map-embed__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  padding: var(--space-24);
  text-align: center;
  background: rgba(46, 28, 15, 0.55);
  color: var(--color-white);
}

.map-embed__note {
  max-width: 40ch;
  font-size: var(--font-size-small);
}

.map-embed__direct-link {
  color: var(--color-white);
  text-decoration: underline;
  font-size: var(--font-size-small);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  background: var(--color-brown);
  color: var(--color-white);
  padding-block: var(--space-48) var(--space-32);
}

/* El anillo de foco azul (--color-focus) da 1.09:1 sobre este marrón —
   invisible. Cualquier zona con fondo oscuro (footer, hero, section--brown)
   necesita un foco claro en su lugar (verificado: cream/brown ~9.6:1). */
.footer :focus-visible,
.hero :focus-visible,
.section--brown :focus-visible {
  outline-color: var(--color-focus-on-dark);
}

.footer a {
  color: var(--color-white);
}

.footer__grid {
  display: grid;
  gap: var(--space-32);
}

/* Variante blanca del mismo lockup horizontal (logo-la-trastienda-horizontal-b.png),
   para el fondo oscuro del footer. */
.footer__logo {
  display: block;
  margin-bottom: var(--space-16);
}

.footer__logo img {
  height: 64px;
  width: auto;
  max-width: none; /* mismo motivo que .header__logo img, ver comentario arriba */
}

.footer__nap {
  font-size: var(--font-size-small);
  line-height: 1.8;
}

.footer__nap a {
  text-decoration: underline;
}

.footer__details {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.footer__heading {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
  padding-block: var(--space-16);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.footer__heading::-webkit-details-marker {
  display: none;
}

.footer__icon {
  width: 20px;
  height: 20px;
  transition: transform var(--transition-base);
}

.footer__details[open] .footer__icon {
  transform: rotate(180deg);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  font-size: var(--font-size-small);
}

.footer__details[open] .footer__links {
  padding-bottom: var(--space-16);
}

.footer__links a {
  text-decoration: underline;
}

.footer__social {
  display: flex;
  gap: var(--space-16);
  margin-top: var(--space-16);
}

.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-comfortable);
  height: var(--touch-target-comfortable);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.footer__social svg {
  width: 20px;
  height: 20px;
}

.footer__bottom {
  margin-top: var(--space-32);
  padding-top: var(--space-24);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: var(--font-size-small);
  color: rgba(255, 255, 255, 0.7);
}


/* ==========================================================================
   Banner de consentimiento de cookies
   role="dialog", Aceptar/Rechazar con la misma prominencia visual
   (ver consent.js, Fase 3, y sección 6.2 del plan)
   ========================================================================== */

.consent-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-consent-banner);
  transform: translateY(100%);
  transition: transform var(--transition-base);
  background: var(--color-white);
  border-top: 2px solid var(--color-cream-dark);
  box-shadow: var(--shadow-lg);
}

.consent-banner[data-open='true'] {
  transform: translateY(0);
}

.consent-banner__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24) var(--space-16);
}

.consent-banner__title {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brown);
}

.consent-banner__text {
  font-size: var(--font-size-small);
  color: var(--color-text);
}

.consent-banner__text a {
  color: var(--color-blue);
}

.consent-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

/* Aceptar y Rechazar comparten literalmente la misma clase base (.btn),
   mismo tamaño, mismo padding: ninguno de los dos se "esconde" como
   enlace de texto secundario. Solo cambia primary/secondary por jerarquía
   visual, nunca por tamaño o prominencia (AEPD, guía de cookies). */
.consent-banner__actions .btn {
  flex: 1 1 140px;
}

/* ==========================================================================
   404
   ========================================================================== */

.error-page {
  text-align: center;
  padding-block: var(--space-80);
}

.error-page__title {
  color: var(--color-error);
}

/* ==========================================================================
   Buscador dinámico de productos
   ========================================================================== */

.product-search {
  position: relative;
  margin-bottom: var(--space-32);
}

.product-search__icon {
  position: absolute;
  left: var(--space-16);
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--color-text-light);
  pointer-events: none;
  flex-shrink: 0;
}

.product-search__input {
  width: 100%;
  padding: var(--space-16) var(--space-16) var(--space-16) calc(var(--space-16) * 2 + 20px);
  border: 2px solid var(--color-cream-dark);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  background: var(--color-white);
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.product-search__input:focus {
  outline: none;
  border-color: var(--color-brown);
  box-shadow: 0 0 0 3px rgba(92, 56, 34, 0.12);
}

.product-search__input::placeholder {
  color: var(--color-text-light);
}

.product-search__empty {
  text-align: center;
  padding: var(--space-48);
  color: var(--color-text-light);
  display: none;
}

.product-search__empty.is-visible {
  display: block;
}

/* ==========================================================================
   Barra de Acciones Rápidas Móvil
   Visible solo en móvil (<768px, ver responsive.css).
   z-index por debajo del banner de consentimiento para no bloquearlo.
   ========================================================================== */

.mobile-action-bar {
  display: none; /* ocultada en móvil por defecto, responsive.css la activa */
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-mobile-action-bar);
  background: var(--color-white);
  border-top: 1px solid var(--color-cream-dark);
  box-shadow: 0 -4px 16px rgba(92, 56, 34, 0.12);
  padding: var(--space-8) var(--space-16);
  padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px)); /* soporte notch iOS */
}

.mobile-action-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--space-8);
  max-width: 480px;
  margin-inline: auto;
}

.mobile-action-bar__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  padding: var(--space-8) var(--space-4);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text);
  font-size: 0.7rem;
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-body);
  min-height: var(--touch-target-comfortable);
  transition: background var(--transition-fast), color var(--transition-fast);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.mobile-action-bar__btn:hover,
.mobile-action-bar__btn:focus-visible {
  background: var(--color-cream);
  color: var(--color-brown);
  outline: none;
}

.mobile-action-bar__btn:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.mobile-action-bar__btn--primary {
  color: var(--color-brown);
}

.mobile-action-bar__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Cuando la barra móvil está activa, el cuerpo lleva padding-bottom proporcional (ver responsive.css) */
/* ==========================================================================
   Tablas de Horario
   ========================================================================== */

.schedule-table {
  width: 100%;
  max-width: 600px;
}

.schedule-table caption {
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--font-size-h2);
  color: var(--color-brown);
  margin-bottom: var(--space-16);
}

.schedule-table th {
  text-align: left;
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  border-bottom: 1px solid var(--color-brown-light);
  padding: var(--space-8) var(--space-8) var(--space-8) 0;
  color: var(--color-brown-light);
}

.schedule-table td {
  padding: var(--space-12) var(--space-8) var(--space-12) 0;
  border-bottom: 1px solid var(--color-cream-dark);
}