/* =============================================================================
   PWA de citas médicas — hoja de estilo base (Fase 0)
   Colores sólidos, sin degradados (§25). Mobile-first.
   Ampliada en la Fase 7 con el App Shell: cabecera, navegación, avisos y pie.
   ========================================================================== */

:root {
  --mc-azul: #3a61e1;
  --mc-azul-oscuro: #2249b4;
  --mc-texto: #1f2937;
  --mc-texto-suave: #6b7280;
  --mc-fondo: #f3f4f6;
  --mc-superficie: #ffffff;
  --mc-borde: #e5e7eb;
  --mc-ok: #15803d;
  --mc-error: #b91c1c;
  --mc-advertencia: #b45309;
}

* {
  box-sizing: border-box;
}

/*
   El atributo hidden vale exactamente lo que valga su display.
   El navegador lo aplica con `[hidden] { display: none }`, una regla de
   especificidad mínima que CUALQUIER clase con display propio pisa sin
   avisar: .mc-nav y .mc-aviso son flex, así que se veían perfectamente
   mientras el DOM juraba que estaban ocultas. Toda la aplicación se apoya en
   `nodo.hidden` para mostrar y esconder —el router, los avisos, los mensajes
   de error—, de modo que esta línea no es un detalle: es la que sostiene el
   mecanismo entero.
*/
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  padding: 0 0 3rem;
  background-color: var(--mc-fondo);
  color: var(--mc-texto);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.mc-contenedor {
  max-width: 640px;
  margin: 0 auto;
}

.mc-tarjeta {
  background-color: var(--mc-superficie);
  border: 1px solid var(--mc-borde);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.mc-titulo {
  margin: 0 0 0.25rem;
  font-size: 1.35rem;
  color: var(--mc-azul);
}

.mc-subtitulo {
  margin: 0 0 1.5rem;
  color: var(--mc-texto-suave);
  font-size: 0.95rem;
}

.mc-etiqueta {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #ffffff;
  background-color: var(--mc-texto-suave);
}

.mc-etiqueta--ok {
  background-color: var(--mc-ok);
}
.mc-etiqueta--error {
  background-color: var(--mc-error);
}
.mc-etiqueta--espera {
  background-color: var(--mc-advertencia);
}

.mc-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mc-lista li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--mc-borde);
}

.mc-lista li:last-child {
  border-bottom: 0;
}

.mc-lista dt,
.mc-lista .mc-clave {
  color: var(--mc-texto-suave);
}

.mc-lista .mc-valor {
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}

.mc-boton {
  display: inline-block;
  min-height: 44px;
  padding: 0.65rem 1.25rem;
  border: 0;
  border-radius: 8px;
  background-color: var(--mc-azul);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.mc-boton:hover,
.mc-boton:focus {
  background-color: var(--mc-azul-oscuro);
}

.mc-boton:focus-visible {
  outline: 3px solid var(--mc-azul);
  outline-offset: 2px;
}

.mc-nota {
  font-size: 0.85rem;
  color: var(--mc-texto-suave);
}

code {
  font-family: "Courier New", monospace;
  font-size: 0.9em;
  background-color: var(--mc-fondo);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

/* --- Explorador de catálogos (Fase 1) ----------------------------------- */

.mc-campo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0 0 1rem;
}

.mc-campo label {
  font-weight: 600;
  font-size: 0.9rem;
}

.mc-campo select {
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--mc-borde);
  border-radius: 8px;
  background-color: var(--mc-superficie);
  color: var(--mc-texto);
  font-size: 1rem;
}

.mc-campo select:disabled {
  background-color: var(--mc-fondo);
  color: var(--mc-texto-suave);
}

.mc-campo select:focus-visible {
  outline: 3px solid var(--mc-azul);
  outline-offset: 2px;
}

.mc-jornada {
  margin: 1.25rem 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mc-texto-suave);
}

.mc-horas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mc-chip {
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--mc-borde);
  border-radius: 8px;
  background-color: var(--mc-superficie);
  color: var(--mc-texto);
  font-size: 0.95rem;
  cursor: pointer;
}

.mc-chip:hover {
  border-color: var(--mc-azul);
}

.mc-chip:focus-visible {
  outline: 3px solid var(--mc-azul);
  outline-offset: 2px;
}

/*
   Hueco de la palomita, reservado SIEMPRE aunque esté vacío.

   Si apareciera solo al marcar, el chip crecería y toda la rejilla de horas
   daría un salto bajo el dedo — justo en el momento en que el paciente acaba
   de tocar una. Reservando el ancho desde el principio, marcar no mueve nada.
*/
.mc-chip::before {
  content: "";
  display: inline-block;
  width: 0.9em;
  color: var(--mc-azul);
  font-weight: 700;
}

/*
   Seleccionado: el mismo lenguaje que las tarjetas de sucursal —fondo claro,
   borde y texto de marca, más la palomita—. Antes era azul sólido con texto
   blanco, y convivían dos formas distintas de decir «esto es lo que eligió»
   en la misma pantalla.

   Tres señales y no solo el color: quien no distinga el azul del gris sigue
   viendo cuál marcó.
*/
.mc-chip--activo {
  background-color: #eef2ff;
  border-color: var(--mc-azul);
  color: var(--mc-azul-oscuro);
  font-weight: 600;
}

.mc-chip--activo::before {
  content: "✔";
}

/* --- Acceso (Fase 2) ---------------------------------------------------- */

.mc-campo input[type="text"],
.mc-campo input[type="password"] {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--mc-borde);
  border-radius: 8px;
  background-color: var(--mc-superficie);
  color: var(--mc-texto);
  font-size: 1rem;
}

.mc-campo input:focus-visible {
  outline: 3px solid var(--mc-azul);
  outline-offset: 2px;
}

.mc-campo-clave {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mc-enlace {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 0.75rem;
  border: 1px solid var(--mc-borde);
  border-radius: 8px;
  background-color: var(--mc-superficie);
  color: var(--mc-azul);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.mc-boton--secundario {
  background-color: var(--mc-superficie);
  color: var(--mc-azul);
  border: 1px solid var(--mc-azul);
}

.mc-boton--secundario:hover,
.mc-boton--secundario:focus {
  background-color: #eef2ff;
}

/*
   Botón inactivo.

   NO se usa `opacity`. Rebajarla atenúa a la vez el texto, el fondo y el
   borde, y el resultado cae por debajo de lo legible: medido sobre esta
   paleta daba 2,5:1 en el botón secundario —azul pálido sobre blanco, casi
   invisible— y 2,9:1 en el principal. Un botón deshabilitado sigue teniendo
   que leerse: es lo que le dice al paciente qué pasaría si pudiera pulsarlo.

   En su lugar se le da color propio, gris sobre gris claro: se distingue de
   un botón activo de un vistazo y se lee sin esfuerzo.

   Se cubre también `.mc-enlace`, que no tenía ningún estado deshabilitado y
   quedaba idéntico al activo: parecía pulsable y no hacía nada.
*/
.mc-boton:disabled,
.mc-boton:disabled:hover,
.mc-boton:disabled:focus,
.mc-enlace:disabled,
.mc-enlace:disabled:hover,
.mc-enlace:disabled:focus {
  opacity: 1;
  background-color: var(--mc-borde);
  border-color: var(--mc-borde);
  color: var(--mc-texto-suave);
  cursor: not-allowed;
}

/* --- Mis dispositivos (Fase 3) ------------------------------------------ */

.mc-equipo {
  border: 1px solid var(--mc-borde);
  border-radius: 10px;
  padding: 0.9rem;
  margin-bottom: 0.75rem;
}

.mc-equipo--revocado {
  background-color: var(--mc-fondo);
}

.mc-equipo__cabecera {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.mc-equipo__cabecera strong {
  font-size: 1.05rem;
}

.mc-equipo .mc-nota {
  margin: 0 0 0.5rem;
}

.mc-equipo .mc-lista li {
  padding: 0.3rem 0;
}

.mc-equipo__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.mc-enlace--peligro {
  color: var(--mc-error);
  border-color: #f3c4c4;
}

.mc-enlace--peligro:hover {
  background-color: #fdf2f2;
}

/* --- Clases que reemplazan estilos en línea ------------------------------
   La CSP de la aplicación declara style-src 'self': cualquier atributo
   style="…" o asignación a elemento.style queda bloqueado por el navegador.
   Todo lo visual vive aquí.                                              */

.mc-titulo--seccion {
  font-size: 1.1rem;
}

.mc-acciones {
  margin-top: 1rem;
}

.mc-nota--error {
  color: var(--mc-error);
}

.mc-nota--ok {
  color: var(--mc-ok);
}

/* --- Registro y cuenta (Fase 4) ----------------------------------------- */

.mc-campo input[type="email"],
.mc-campo input[type="tel"],
.mc-campo input[type="date"] {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--mc-borde);
  border-radius: 8px;
  background-color: var(--mc-superficie);
  color: var(--mc-texto);
  font-size: 1rem;
}

.mc-campo--casilla label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 400;
  line-height: 1.4;
  cursor: pointer;
}

.mc-campo--casilla input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin: 0;
  flex: 0 0 auto;
}

.mc-error-campo {
  color: var(--mc-error);
  font-size: 0.85rem;
  font-weight: 600;
}

/* --- Citas (Fase 5) ------------------------------------------------------ */

.mc-textarea {
  width: 100%;
  min-height: 72px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--mc-borde);
  border-radius: 8px;
  background-color: var(--mc-superficie);
  color: var(--mc-texto);
  font-family: inherit;
  font-size: 1rem;
  resize: vertical;
}

.mc-textarea:focus-visible {
  outline: 3px solid var(--mc-azul);
  outline-offset: 2px;
}

#confirmacionCita {
  border-color: var(--mc-azul);
  margin-top: 1rem;
}

#pestanasCitas {
  margin-bottom: 1rem;
}

/* =============================================================================
   APP SHELL (Fase 7)

   Cabecera, navegación, avisos y pie. Todo con clases: la CSP declara
   style-src 'self' y bloquea cualquier atributo style incrustado, así que
   ningún estado puede pintarse desde JavaScript con .style.algo.
   ========================================================================== */

.mc-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  /* El área segura evita que el texto quede bajo la muesca del teléfono
       cuando la app corre a pantalla completa (display: standalone). */
  padding-top: calc(0.75rem + env(safe-area-inset-top));
  background-color: var(--mc-azul);
  color: #fff;
}

.mc-marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

/* El logotipo ya es un círculo con las esquinas transparentes: no necesita
   recorte propio. Se fija el tamaño para que no lo aplaste el flex cuando el
   nombre de la aplicación es largo. */
.mc-marca img {
  display: block;
  flex: 0 0 auto;
}

.mc-marca__texto {
  font-size: 1.02rem;
}

/*
   Botón de salir, sobre la barra azul de la cabecera.

   Hereda de .mc-enlace, que trae fondo BLANCO. Antes solo se le cambiaba el
   color del texto a blanco, y el resultado era un botón blanco con letras
   blancas: invisible. Aquí se cambian las tres cosas a la vez —fondo, borde y
   texto— porque en la cabecera el botón no está sobre papel, está sobre azul.
*/
.mc-cabecera__salir {
  flex: 0 0 auto;
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
  text-decoration: none;
}

.mc-cabecera__salir:hover,
.mc-cabecera__salir:focus {
  background-color: rgba(255, 255, 255, 0.16);
  border-color: #fff;
  color: #fff;
}

/* --------------------------------------------------------------- navegación */

.mc-nav {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  padding: 0 1rem;
  background-color: var(--mc-azul-oscuro);
  /* En pantallas estrechas la barra se desplaza en lugar de partirse:
       cuatro secciones no caben en 320 px sin encoger el texto. */
  -webkit-overflow-scrolling: touch;
}

.mc-nav__enlace {
  flex: 0 0 auto;
  padding: 0.7rem 0.85rem;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: #dbeafe;
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

.mc-nav__enlace:hover {
  color: #fff;
}

/*
   Enlace activo de la barra de navegación.

   Va atado a `.mc-nav__enlace`, no suelto: el texto blanco solo se lee sobre
   el azul oscuro de la barra. Cuando esto era una clase modificadora que el
   router aplicaba a todo [data-ir], acabó pintando de blanco el botón del pie
   —que tiene fondo blanco— y lo dejó invisible. Atado al bloque, ese salto no
   puede repetirse.
*/
.mc-nav__enlace[aria-current="page"] {
  color: #fff;
  font-weight: 600;
  border-bottom-color: #fff;
}

/* El mismo estado, en el pie: allí el fondo es claro y el activo se marca
   con el color de marca, no con blanco. */
.mc-pie .mc-enlace[aria-current="page"] {
  border-color: var(--mc-azul);
  font-weight: 700;
}

.mc-nav__enlace:focus-visible,
.mc-cabecera__salir:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

/* -------------------------------------------------------------------- avisos */

.mc-avisos {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 1rem;
}

.mc-avisos:not(:empty) > *:not([hidden]) {
  margin-top: 1rem;
}

.mc-aviso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--mc-borde);
  background-color: var(--mc-superficie);
  font-size: 0.95rem;
}

.mc-aviso--alerta {
  border-color: #fcd34d;
  background-color: #fffbeb;
  color: var(--mc-advertencia);
}

.mc-aviso--nuevo {
  border-color: #bfdbfe;
  background-color: #eff6ff;
  color: var(--mc-azul-oscuro);
}

.mc-aviso__acciones {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.mc-boton--pequeno {
  padding: 0.35rem 0.8rem;
  font-size: 0.9rem;
}

/* Datos servidos de la copia local: se avisa, no se disimula. */
.mc-nota--vieja {
  color: var(--mc-advertencia);
}

/* ------------------------------------------------------------- contenedores */

.mc-contenedor {
  padding: 1.25rem 1rem 0;
}

.mc-contenedor--centrado {
  text-align: center;
  padding-top: 3rem;
}

.mc-contenedor--centrado .mc-marca {
  display: inline-block;
  margin-bottom: 1rem;
}

.mc-pie {
  max-width: 640px;
  margin: 1.5rem auto 0;
  padding: 0 1rem;
  text-align: center;
  font-size: 0.9rem;
}

@media (min-width: 700px) {
  .mc-nav {
    max-width: 640px;
    margin: 0 auto;
    border-radius: 0 0 12px 12px;
  }
}

/* --- Notificaciones (Fase 8) -------------------------------------------- */

/* Contador de avisos sin leer, pegado al enlace de la navegación. */
.mc-insignia {
  display: inline-block;
  min-width: 1.25rem;
  margin-left: 0.35rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background-color: var(--mc-error);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
  vertical-align: text-top;
}

/* Un aviso sin leer se distingue por el borde, no solo por la etiqueta:
   el color por sí solo no sirve a quien no lo percibe. */
.mc-equipo--nuevo {
  border-left: 4px solid var(--mc-azul);
  background-color: #f8faff;
}

.mc-nota--fecha {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
}

/* El bloque de permiso apila su contenido en vez de repartirlo en línea. */
.mc-aviso--bloque {
  display: block;
}

.mc-aviso--bloque p {
  margin: 0 0 0.5rem;
}

.mc-aviso--bloque p:last-child {
  margin-bottom: 0;
}

/* Número de horarios libres junto a la fecha, en «Días con cupo».
   Un 10% más pequeño que la fecha: se usa `em`, que es relativo al tamaño
   del propio chip, para que la proporción se mantenga si algún día cambia
   el tamaño base. */
.mc-chip__conteo {
  margin-left: 0.35rem;
  font-size: 0.9em;
}

/* --- Selección por tarjetas -------------------------------------------------
   Sustituye al <select> donde las opciones son pocas y de nombre largo: se ven
   todas a la vez y se tocan sin desplegar nada. El estado activo se marca con
   fondo, borde y una palomita — tres señales, no solo el color, para que se
   distinga también sin percibirlo.
   -------------------------------------------------------------------------- */

.mc-campo__etiqueta {
  font-weight: 600;
  font-size: 0.9rem;
}

.mc-opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mc-opcion {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  flex: 1 1 15rem;
  min-height: 44px;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--mc-borde);
  border-radius: 10px;
  background-color: var(--mc-superficie);
  color: var(--mc-texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mc-opcion:hover {
  border-color: var(--mc-azul);
}

.mc-opcion:focus-visible {
  outline: 3px solid var(--mc-azul);
  outline-offset: 2px;
}

/* Hueco reservado para la palomita: si apareciera solo al elegir, la tarjeta
   cambiaría de ancho y las demás darían un salto. */
.mc-opcion__marca {
  flex: 0 0 1.1rem;
  color: var(--mc-azul);
  font-weight: 700;
  line-height: 1.35;
}

.mc-opcion--activa {
  border-color: var(--mc-azul);
  background-color: #eef2ff;
  color: var(--mc-azul-oscuro);
}

.mc-opcion--activa .mc-opcion__marca::before {
  content: "✔";
}

.mc-opcion__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.mc-opcion__titulo {
  font-weight: 600;
  line-height: 1.35;
}

.mc-opcion__detalle {
  font-size: 0.82rem;
  color: var(--mc-texto-suave);
}

.mc-opcion--activa .mc-opcion__detalle {
  color: var(--mc-azul);
}

/* --- Accesibilidad (Fase 10) ------------------------------------------------ */

/*
   Enlace de salto. Vive fuera de la pantalla hasta que recibe el foco: quien
   navega con teclado lo encuentra en la primera pulsación de Tab y se ahorra
   recorrer cabecera y menú en cada vista.

   No se usa `display: none` ni `visibility: hidden` a propósito: eso lo
   sacaría también del orden del tabulador y no habría manera de alcanzarlo.
*/
.mc-saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 0.75rem 1.25rem;
  background-color: var(--mc-superficie);
  color: var(--mc-azul);
  font-weight: 600;
  border: 2px solid var(--mc-azul);
  border-radius: 0 0 8px 0;
}

.mc-saltar:focus {
  left: 0;
}

/* El encabezado de la vista recibe el foco al navegar (ver router.js). Sin
   esto el navegador dibujaría su recuadro por defecto sobre un título, que se
   ve como un error. Se marca con una barra lateral discreta. */
.mc-titulo[tabindex="-1"]:focus {
  outline: none;
  box-shadow: -0.35rem 0 0 var(--mc-azul);
}

/*
   Movimiento reducido.

   Se mueven tres cosas: el latido de los esqueletos de carga, el
   desplazamiento suave del navegador y el `scrollIntoView` del explorador. Hay
   quien lo pasa mal con eso (vértigo, migraña, trastornos vestibulares).

   La regla es deliberadamente universal —el selector `*`— para que cualquier
   animación que se añada más adelante la herede sin que nadie tenga que
   acordarse de venir aquí.
*/
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Esqueletos de carga (Fase 10) ------------------------------------------
   Ocupan el sitio de lo que va a llegar. Evitan dos cosas: la pantalla en
   blanco que hace dudar de si la aplicación respondió, y el salto de contenido
   cuando los datos aterrizan de golpe.

   Llevan aria-hidden y un texto para lector aparte: describir la FORMA de algo
   que aún no existe no le sirve a nadie que no la vea; lo que sirve es «se
   están cargando sus citas».
   -------------------------------------------------------------------------- */

.mc-esqueleto {
  border: 1px solid var(--mc-borde);
  border-radius: 10px;
  padding: 0.9rem;
  margin-bottom: 0.75rem;
}

.mc-esqueleto__linea {
  height: 0.85rem;
  margin-bottom: 0.55rem;
  border-radius: 4px;
  background-color: var(--mc-borde);
}

.mc-esqueleto__linea:last-child {
  margin-bottom: 0;
}

.mc-esqueleto__linea--titulo {
  height: 1.05rem;
  width: 55%;
}

.mc-esqueleto__linea--corta {
  width: 35%;
}

.mc-esqueleto__linea--media {
  width: 70%;
}

/* El latido solo se anima cuando quien mira no ha pedido lo contrario: la
   regla de prefers-reduced-motion de arriba lo detiene, y el esqueleto sigue
   cumpliendo su función porque lo que informa es la FORMA, no el movimiento. */
@keyframes mc-latido {
  50% {
    opacity: 0.45;
  }
}

.mc-esqueleto__linea {
  animation: mc-latido 1.4s ease-in-out infinite;
}

/* --- Pulido móvil (Fase 10) ------------------------------------------------- */

/*
   La barra de navegación se desplaza cuando no caben las cinco secciones
   (a 375 px hacen falta 478). Se oculta su barra de desplazamiento: en un
   teléfono se arrastra con el dedo y la barra solo ensucia. El contenido
   sigue siendo alcanzable con el dedo, con el tabulador y con las flechas.
*/
.mc-nav {
  scrollbar-width: none;
}

.mc-nav::-webkit-scrollbar {
  display: none;
}

/* La marca de la cabecera es un enlace a la pantalla principal: necesita la
   misma zona táctil que cualquier otro destino. */
.mc-marca {
  min-height: 44px;
}