/* Componentes. Ni un color, ni un tamaño, ni un espacio escrito a mano: todo son tokens.
 * Esa es la condición que permite cambiar el diseño sin tocar las pantallas.
 */

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

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

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--texto-base);
  line-height: var(--linea);
  color: var(--texto);
  background: var(--fondo-suave);
}

h1, h2, h3 { line-height: var(--linea-apretada); margin: 0 0 var(--e3); font-weight: 600; }
h1 { font-size: var(--texto-2xl); }
h2 { font-size: var(--texto-xl); }
h3 { font-size: var(--texto-lg); }
p { margin: 0 0 var(--e4); }

a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: none; box-shadow: var(--anillo-foco); border-radius: var(--radio-sm); }

/* ---------------------------------------------------------------- estructura */

.franja-demo {
  background: var(--demo-fondo);
  color: var(--demo-texto);
  text-align: center;
  padding: var(--e2) var(--e4);
  font-size: var(--texto-sm);
  font-weight: 500;
}

.cabecera {
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  padding: var(--e4);
}

.cabecera__interior,
.principal--panel { max-width: var(--ancho-panel); margin: 0 auto; }

/* La marca a la izquierda y quién está dentro a la derecha, en la misma línea.

   🔴 La marca NO se encoge ni se parte, y se midió por qué: a 375 px, con «Arlenys
   Coordinación» al lado, «SPA OCULAR» se partía en dos líneas y la cabecera crecía de 28 a
   38 px. Quien se aprieta es el nombre de la cuenta, que para eso se corta con puntos
   suspensivos: el primer nombre ya dice con cuál de las tres estás. */
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.cabecera__fila .marca { flex: 0 0 auto; white-space: nowrap; }

/* ------------------------------------------------------------------- quién soy */

.yo { display: flex; align-items: center; gap: var(--e3); min-width: 0; flex: 0 1 auto; }
.yo form { flex: 0 0 auto; }
.yo__datos { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; flex: 0 1 auto; }
.yo__nombre {
  font-size: var(--texto-sm);
  font-weight: 500;
  /* 🔴 El tope es el de SU CAJA, no una medida fija, y se midió por qué: con `max-width`
     en rems, la caja se encogía al apretarse la fila pero el nombre conservaba su ancho, y
     como el bloque se alinea a la derecha, el texto se salía por la IZQUIERDA y se pintaba
     encima de «SPA OCULAR». Los números decían que no había desbordes; la captura decía
     que sí, porque un hijo que se sale de su padre no ensancha la página. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yo__rol { font-size: var(--texto-xs); color: var(--texto-suave); }
.boton--menudo { min-height: 40px; padding: var(--e2) var(--e3); font-size: var(--texto-sm); }

/* ---------------------------------------------------------------------- marca */

.marca { display: inline-flex; align-items: center; gap: var(--e3); color: var(--marca); }
.marca__sello { width: 1.75rem; height: 1.75rem; flex: 0 0 auto; }
.marca__nombre {
  font-size: var(--texto-lg);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--peso-normal);
  line-height: 1;
}
/* La primera palabra pesa y es del color del texto; el resto es de la marca. Es lo que
   hace que el nombre se lea como una firma y no como un titulo cualquiera. */
.marca__fuerte { font-weight: var(--peso-negro); color: var(--texto); }

.principal { max-width: var(--ancho-lectura); margin: 0 auto; padding: var(--e5) var(--e4) var(--e7); }

/* El portal es una columna de 34 rem porque se lee, y un párrafo ancho se lee peor. El
   calendario no se lee: se mira de un golpe, mes y horas a la vez. Con los 34 rem, a la
   columna de horas le quedaban 168 px y las veinte horas caían en una sola fila vertical,
   tres veces más alta que el mes de al lado. Esta es la única pantalla del portal que pide
   más, así que pide más ella sola y no el portal entero. */
.principal--calendario { max-width: 56rem; }
.principal--panel { padding: var(--e5) var(--e4) var(--e7); }

.pie {
  text-align: center;
  color: var(--texto-tenue);
  font-size: var(--texto-xs);
  padding: var(--e5) var(--e4);
}

/* ------------------------------------------------------------------ tarjetas */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: var(--e5);
  box-shadow: var(--sombra-sm);
  margin-bottom: var(--e4);
}
.tarjeta__titulo { margin-bottom: var(--e2); }
.tarjeta__nota { color: var(--texto-suave); font-size: var(--texto-sm); margin: 0; }

/* ------------------------------------------------------------------- botones */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 44px;               /* se pulsa con el pulgar, no con el ratón */
  padding: var(--e3) var(--e5);
  border: 1px solid transparent;
  border-radius: var(--radio);
  background: var(--marca);
  color: #fff;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transicion);
}
.boton:hover { background: var(--marca-oscura); text-decoration: none; }
.boton:disabled {
  /* Antes era un bloque gris oscuro del tamaño del botón, y parecía roto más que apagado.
     Un botón que todavía no toca se lee por su falta de peso, no por su color. */
  background: var(--borde);
  color: var(--texto-suave);
  cursor: not-allowed;
}
.boton--secundario { background: transparent; color: var(--marca); border-color: var(--borde); }
.boton--secundario:hover { background: var(--marca-clara); }
/* El filtro que esta puesto se ve puesto: sin esto, tres botones iguales y ninguna pista
   de cual manda. */
.boton--activo { background: var(--marca); color: var(--color-texto-sobre-marca); border-color: var(--marca); }
.boton--activo:hover { background: var(--marca-oscura); }
.boton--ancho { width: 100%; }
.boton--peligro { background: var(--error); }

/* ------------------------------------------------------------------ formulario */

.campo { margin-bottom: var(--e4); }
.campo__etiqueta { display: block; font-size: var(--texto-sm); font-weight: 500; margin-bottom: var(--e2); }
.campo__ayuda { display: block; font-size: var(--texto-xs); color: var(--texto-suave); margin-top: var(--e1); }
.campo__error { display: block; font-size: var(--texto-sm); color: var(--error); margin-top: var(--e1); }

/* El campo trampa del formulario publico. Fuera de la pantalla y no `display: none`: hay
   robots que descartan lo que esta oculto asi, y este tiene que parecerles un campo mas. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.entrada, .area, .seleccion {
  width: 100%;
  min-height: 44px;
  padding: var(--e3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
}
.entrada:focus, .area:focus, .seleccion:focus { border-color: var(--marca); }
.area { min-height: 6rem; resize: vertical; }

/* --------------------------------------------------------------------- huecos */

.dia { margin-bottom: var(--e5); }
.dia__titulo {
  font-size: var(--texto-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-suave);
  margin-bottom: var(--e3);
}
.huecos { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--e2); }
.hueco {
  min-height: 44px;
  padding: var(--e3) var(--e2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
}
.hueco:hover { border-color: var(--marca); background: var(--marca-clara); }

/* ------------------------------------------------------------------ etiquetas */

.etiqueta {
  display: inline-block;
  padding: var(--e1) var(--e3);
  border-radius: var(--radio-pastilla);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  background: var(--fondo-suave);
  color: var(--texto-suave);
}
.etiqueta--ok { background: var(--exito-fondo); color: var(--exito-texto); }
.etiqueta--aviso { background: var(--aviso-fondo); color: var(--aviso-texto); }
.etiqueta--error { background: var(--error-fondo); color: var(--error-texto); }

.aviso {
  padding: var(--e4);
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--fondo-suave);
  margin-bottom: var(--e4);
}
.aviso--ok { background: var(--exito-fondo); border-color: var(--exito); }
.aviso--error { background: var(--error-fondo); border-color: var(--error); }

/* ---------------------------------------------------------------------- tabla */

.tabla { width: 100%; border-collapse: collapse; font-size: var(--texto-sm); }
.tabla th {
  text-align: left;
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
  padding: var(--e2) var(--e3);
  border-bottom: 1px solid var(--borde);
}
.tabla td { padding: var(--e3); border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla__hora { font-variant-numeric: tabular-nums; white-space: nowrap; }

.vacio { color: var(--texto-tenue); text-align: center; padding: var(--e6) var(--e4); }

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

.pestanas { display: flex; gap: var(--e2); flex-wrap: wrap; margin-bottom: var(--e5); }
.pestana {
  padding: var(--e2) var(--e4);
  border-radius: var(--radio-pastilla);
  color: var(--texto-suave);
  font-size: var(--texto-sm);
}
/* «activo», no «activa»: el sufijo lo construye la plantilla de enlaces como
   {{ clase }}--activo, y una sola letra de diferencia deja la pestaña sin encender
   sin que nada falle. */
.pestana--activo { background: var(--marca-clara); color: var(--marca-oscura); font-weight: var(--peso-medio); }

.lista-limpia { list-style: none; margin: 0; padding: 0; }
.pila > * + * { margin-top: var(--e3); }
/* Envuelve a proposito: en un telefono, dos hijos en una sola linea no caben y lo que
   pasa no es que se corte, es que se aprieta hasta que ninguno se lee. */
.fila { display: flex; align-items: center; justify-content: space-between;
        gap: var(--e2) var(--e3); flex-wrap: wrap; }
.apagado { color: var(--texto-suave); font-size: var(--texto-sm); }

/* El mensaje tal cual le llega al paciente. Se enseña como una cita, no como un dato de
   tabla: lo que se lee aqui es literalmente lo que va a leer una persona en su telefono. */
.mensaje {
  margin: var(--e2) 0;
  padding: var(--e3) var(--e4);
  border-left: 3px solid var(--marca);
  background: var(--fondo-suave);
  border-radius: 0 var(--radio) var(--radio) 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--texto-base);
  line-height: var(--linea);
}

/* ------------------------------------------------------------------- el menú */

/* Un <details>, sin JavaScript. En el teléfono seis pestañas en línea se parten en dos
   filas y la barra deja de leerse como barra; aquí es un botón que dice dónde estás y que
   al abrirse da la lista entera con área de toque de verdad. En escritorio no hay botón:
   vuelven a ser pestañas en una línea.

   Sin script a propósito: un menú que depende de JavaScript es un menú que no abre el día
   que el script falle, y este lo usa quien coordina el día de la consulta. */

.menu { margin-top: var(--e3); }
.pestanas--panel { margin-top: var(--e3); margin-bottom: 0; }

.menu__boton {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  min-height: var(--toque-min);
  padding: var(--e2) var(--e4);
  border: 1px solid var(--borde);
  border-radius: var(--radio-pastilla);
  background: var(--superficie);
  color: var(--texto);
  font-weight: var(--peso-medio);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.menu__boton::-webkit-details-marker { display: none; }
.menu__boton:hover { border-color: var(--marca); }

/* Tres barras dibujadas con bordes: sin imagen, sin fuente de iconos, sin una petición más. */
.menu__icono {
  width: 18px;
  height: 2px;
  background: currentColor;
  position: relative;
  display: inline-block;
}
.menu__icono::before,
.menu__icono::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
}
.menu__icono::before { top: -6px; }
.menu__icono::after { top: 6px; }

/* Abierto se convierte en una equis: la misma pieza dice abrir y decir cerrar. */
.menu[open] .menu__icono { background: transparent; }
.menu[open] .menu__icono::before { top: 0; transform: rotate(45deg); }
.menu[open] .menu__icono::after { top: 0; transform: rotate(-45deg); }

.menu__lista {
  display: flex;
  flex-direction: column;
  margin-top: var(--e2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background: var(--superficie);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.menu__enlace {
  display: flex;
  align-items: center;
  min-height: var(--toque-min);
  padding: var(--e3) var(--e5);
  color: var(--texto);
  border-bottom: 1px solid var(--borde);
}
.menu__enlace:last-child { border-bottom: 0; }
.menu__enlace:hover { background: var(--fondo-suave); text-decoration: none; }
.menu__enlace--activo {
  background: var(--marca-clara);
  color: var(--marca-oscura);
  font-weight: var(--peso-medio);
  box-shadow: inset 3px 0 0 var(--marca);
}

/* ----------------------------------------------------------------- la agenda */

.cita {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e1) var(--e3);
  align-items: baseline;
  padding: var(--e3) var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.cita__hora { grid-column: 1; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: var(--peso-medio); }
.cita__paciente { grid-column: 2; font-weight: var(--peso-medio); }
.cita__servicio { grid-column: 2; color: var(--texto-suave); font-size: var(--texto-sm); }
.cita > .etiqueta { grid-column: 2; justify-self: start; margin-top: var(--e1); }

/* Una lista de citas leida como un registro: cada fila separada por una linea, y no cada
   una en su propia caja. Es el mismo recurso que la tabla de la liquidacion, que es donde
   se comprobo que se lee mejor: con tarjetas, en una semana cargada, el ojo cuenta cajas en
   vez de leer horas, y hacen falta tres pantallas para ver cinco dias. */
.registro { list-style: none; margin: 0; padding: 0; }
.registro__fila {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--e1) var(--e3);
  align-items: baseline;
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--borde);
}
.registro__fila:last-child { border-bottom: 0; }
.registro__hora { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: var(--peso-medio); }
.registro__quien { grid-column: 2; }
.registro__medico { grid-column: 2; color: var(--texto-suave); font-size: var(--texto-sm); }
.registro__estado { grid-column: 3; grid-row: 1; justify-self: end; }

@media (max-width: 40rem) {
  /* En un telefono la etiqueta de estado baja: en tres columnas aprieta el nombre hasta
     partirlo, y el nombre es lo que se viene a leer. */
  .registro__fila { grid-template-columns: auto 1fr; }
  .registro__estado { grid-column: 2; grid-row: auto; justify-self: start; }
}

/* Trabajo a la izquierda, lista de consulta a la derecha. En el telefono, una debajo de
   otra y el trabajo PRIMERO: con la lista encima, veinte bloqueos obligan a pasarlos de
   largo cada vez para llegar a donde se escribe. */
.dos-columnas { display: grid; gap: var(--e4); align-items: start; }
@media (min-width: 60rem) {
  .dos-columnas { grid-template-columns: 1fr 22rem; }
}
/* Una fila del registro que no tiene columnas, solo texto apilado. */
.registro__fila--simple { display: block; }

/* El nombre del profesional debajo de la hora, mas pequeno y en gris: la hora es lo que se
   elige y el nombre es la pista que ayuda a elegirla, no al reves. */
.opcion__quien { display: block; font-size: var(--texto-xs); color: var(--texto-suave); }

/* ------------------------------------------------------------------- instructivo */

/* 🔴 **Es un documento largo, y eso cambia las reglas.** El resto del portal son pantallas
   de treinta segundos; esto son cuarenta minutos de lectura con el Dr. decidiendo si
   compra. Por eso aquí la letra crece, el renglón se suelta y aparece un menú al lado: las
   tres cosas que pidió Alcides después de leerlo de verdad («las letras son muy pequeñas
   para tanta lectura»). */

/* El ancho es la SUMA de las dos columnas, no el de la pantalla: 15 rem de menú + 4 de
   hueco + 42 de texto. Con 82 rem el par quedaba pegado a la izquierda y sobraban setecientos
   píxeles vacíos a la derecha, que es lo que hace que un documento parezca desmaquetado. */
.principal--doc {
  max-width: 63rem;
  margin: 0 auto;
  padding: var(--e5) var(--e4) var(--e8);
}

/* El menú a la izquierda y el texto a la derecha. Dos columnas, no tres: la de la derecha
   de otras documentaciones repite lo que ya dice esta, y en una pantalla de portátil deja
   la columna de lectura en nada. */
.doc { display: grid; gap: var(--e5); }

@media (min-width: 62rem) {
  .doc {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--e8);
  }
  /* 🔴 **Sin `align-items: start`, y costó dos intentos entenderlo.** Con él, la celda del
     menú mide lo que mide su contenido, así que el menú pegajoso no tiene por dónde viajar
     y se queda atrás a la primera pantalla de desplazamiento. Sin él la celda se estira
     hasta el alto de la fila entera, que es lo que le da recorrido.

     Y lo pegajoso va en la CELDA, no en el `<details>` de dentro: ese elemento no toma el
     alto de su lista, así que ponerle ahí el `overflow` recorta el menú entero y desaparece
     de la pantalla. Se vio en la captura, no en las medidas: las medidas decían que estaba
     pegado en su sitio. */
  .doc__menu {
    position: sticky;
    /* Con su propio desplazamiento: el índice entero no cabe en una pantalla de portátil, y
       un menú que se corta por abajo esconde justo las partes del final. */
    top: var(--e5);
    max-height: calc(100vh - var(--e7));
    overflow-y: auto;
    padding-right: var(--e2);
  }
  /* En escritorio no hay nada que plegar: el botón sobra y el índice se ve entero. */
  .doc__resumen { display: none; }
}

/* ---- el menú ---- */

.doc__plegable { border: 0; }
.doc__resumen {
  cursor: pointer;
  font-weight: 600;
  padding: var(--e3) var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  list-style-position: inside;
}
.doc__indice, .doc__pasos { list-style: none; margin: 0; padding: 0; }
.doc__indice { margin-top: var(--e3); }
/* En el teléfono el índice empieza abierto (ver el comentario de la plantilla) y son
   veintiocho enlaces: con tope de alto y su propio desplazamiento ocupa lo que ocupa una
   tarjeta y el documento sigue empezando donde se ve.

   El tope va en una consulta de ANCHO MÁXIMO y no deshecho más abajo en la de escritorio:
   así no depende del orden de las reglas, que es justo lo que me cortó el menú a 14 rem en
   una pantalla de 1440. */
@media (max-width: 61.9375rem) {
  .doc__resumen { border-radius: var(--radio) var(--radio) 0 0; }
  /* Con su caja: cortado a media línea y sin borde parecía que la página se había roto.
     Enmarcado se lee como lo que es, una lista que se desplaza dentro de su recuadro. */
  .doc__indice {
    max-height: 14rem;
    overflow-y: auto;
    margin-top: 0;
    padding: var(--e3);
    border: 1px solid var(--borde);
    border-top: 0;
    border-radius: 0 0 var(--radio) var(--radio);
    background: var(--superficie);
  }
}
.doc__entrada + .doc__entrada { margin-top: var(--e1); }

.doc__seccion, .doc__paso {
  display: block;
  text-decoration: none;
  border-radius: var(--radio);
  color: var(--texto-suave);
}
.doc__seccion {
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--texto);
  padding: var(--e2) var(--e3);
  line-height: var(--linea-media);
}
.doc__pasos {
  /* La línea vertical es la que dice «esto cuelga de lo de arriba». Sin ella, veinticuatro
     enlaces seguidos se leen como una lista plana y el documento parece no tener partes. */
  margin: var(--e1) 0 var(--e3);
  padding-left: var(--e3);
  border-left: 2px solid var(--borde);
}
.doc__paso {
  font-size: var(--texto-sm);
  padding: var(--e1) var(--e3);
  line-height: var(--linea-media);
}
.doc__seccion:hover, .doc__paso:hover { background: var(--fondo-suave); color: var(--marca); }
.doc__seccion:focus-visible, .doc__paso:focus-visible { outline: 2px solid var(--marca); }

/* La parte que se está mirando, marcada sola: `:target` es el ancla por la que se llegó, y
   no hace falta nada más para saber dónde estás. */
.doc__seccion:target, .guia__papel:target > h2 { color: var(--marca); }

/* ---- el cuerpo ---- */

/* Ancho de lectura, no de pantalla: una línea de cien caracteres se pierde al saltar de
   renglón. 42 rem a 19 px son unos 70 caracteres, que es la medida de un libro. */
.doc__cuerpo { min-width: 0; }
.guia {
  max-width: 42rem;
  font-size: var(--texto-lg);
  line-height: var(--linea-suelta);
}
.guia h1 { font-size: var(--texto-3xl); }
.guia h2 { font-size: var(--texto-2xl); }
.guia h3 { font-size: var(--texto-xl); }

.guia__portada { margin-bottom: var(--e7); }
.guia__portada h1 { margin-bottom: var(--e3); }
.guia__entrada { color: var(--texto-suave); margin-bottom: var(--e4); }

/* 🔴 **La jerarquía se ve o no se ve, y no se veía.** Antes cada parte empezaba con un h2
   subrayado y nada más, así que a media pantalla de distancia el salto de «Como paciente» a
   «Como coordinación» pesaba lo mismo que el salto de un paso al siguiente. Ahora una parte
   nueva llega con aire por arriba, una línea que cruza la columna y su número escrito: son
   tres señales, y con menos de dos nadie nota que ha cambiado de tema. */
/* Al saltar desde el menú, el título no se pega al borde de arriba: queda un respiro por
   encima, que es lo que hace que se lea como el principio de algo y no como el medio. */
.guia__papel, .guia__paso { scroll-margin-top: var(--e5); }
.guia__papel { margin-top: var(--e8); }
.guia__papel--parte { border-top: 3px solid var(--marca); padding-top: var(--e5); }
.guia__papel > h2 { margin-bottom: var(--e2); }
.guia__cuenta {
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--marca);
  margin: 0 0 var(--e2);
}
.guia__entra { font-size: var(--texto-sm); color: var(--texto-suave); margin-bottom: var(--e2); }

.guia__paso { margin-top: var(--e6); }
.guia__titulo { margin-bottom: 0; display: flex; align-items: baseline; gap: var(--e3); }
.guia__titulo--menor { font-size: var(--texto-lg); }
/* El número del paso, en su propia ficha. Va al lado del título y no dentro porque así el
   ojo puede recorrer la columna de números sin leer los títulos, que es como se busca «el
   cuarto» cuando alguien te lo dice por teléfono. */
.guia__numero {
  flex: 0 0 auto;
  min-width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--marca-clara);
  color: var(--marca-oscura);
  font-size: var(--texto-sm);
  font-weight: 700;
  line-height: 1;
}
.guia__donde { font-size: var(--texto-sm); color: var(--texto-suave); margin: var(--e1) 0 var(--e3); }

/* Las tres preguntas siempre con la misma forma: quien lee dos pasos ya sabe dónde mirar
   para saber si le salió bien, y deja de leer el resto. */
.guia__tres { margin: 0; }
.guia__tres dt {
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
  font-weight: 600;
  margin-top: var(--e4);
}
.guia__tres dd { margin: var(--e1) 0 0; }

/* Lo que no es un paso del recorrido se lee como lo que es: un anexo. Mismo contenido, otro
   peso, para que no compita con los pasos numerados de arriba. */
.guia__extra {
  margin-top: var(--e7);
  padding-top: var(--e5);
  border-top: 1px solid var(--borde);
}
.guia__extra-titulo { font-size: var(--texto-lg); color: var(--texto-suave); }

/* 🔴 **Una captura no se agranda por encima de su tamaño.** Las del portal se toman a
   390 px, que es el ancho de un teléfono; estiradas a los 672 de la columna se veían
   borrosas y con la letra el doble de grande que el texto de al lado, o sea peor que la
   pantalla de verdad. Con `max-width` la del panel llena la columna y la del teléfono se
   queda en su ancho, centrada, que además es como se ve un teléfono. */
.guia__captura { margin: var(--e4) 0 0; }
.guia__captura img {
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  display: block;
}
.guia__pie {
  margin-top: var(--e8);
  padding-top: var(--e5);
  border-top: 1px solid var(--borde);
  color: var(--texto-suave);
  font-size: var(--texto-sm);
}

/* 🔴 Los bloques con caja tienen que empezar donde empieza el texto. Una tarjeta mete su
   propio relleno, así que su contenido arrancaba 24 px más a la derecha que el párrafo de
   encima y la columna se veía torcida: es el margen que Alcides señaló con una flecha.
   Se arregla tirando la caja hacia fuera lo mismo que mete de relleno. */
.guia > .tarjeta {
  margin-left: calc(var(--e5) * -1);
  margin-right: calc(var(--e5) * -1);
}
/* Y la viñeta cuelga en el borde de la columna en vez de empujar el texto 40 px adentro,
   que es lo que trae una lista por defecto. El texto queda una muesca a la derecha, que es
   como se compone una lista; lo que no puede es arrancar más lejos que el párrafo de
   encima, porque entonces la columna se ve torcida. */
.guia > .tarjeta .pila { padding-left: var(--e4); margin-left: calc(var(--e4) * -1); }

/* Y la tabla de tres filas del instructivo no necesita los 64 rem de la liquidación, que
   aquí solo servían para meter una barra de desplazamiento dentro del documento. */
.guia .tabla-ancha .tabla { min-width: 0; }
.guia .tabla-ancha .tabla td, .guia .tabla-ancha .tabla th { white-space: normal; }

@media (max-width: 40rem) {
  /* En el teléfono la tarjeta vuelve a su sitio: sin columna ancha alrededor, sacarla
     fuera la pegaría al borde de la pantalla. */
  .guia > .tarjeta { margin-left: 0; margin-right: 0; }
}

/* Un mensaje, tal y como lo lee el paciente. En caja aparte y con la tipografia del propio
   mensaje: el texto tiene que parecer un mensaje, no un parrafo del documento, o se lee como
   explicacion en vez de como lo que hay que corregir. */
.mensaje { margin: var(--e3) 0 0; }
.mensaje__via { font-size: var(--texto-xs); color: var(--texto-suave); margin: 0 0 var(--e1); }
.mensaje__texto {
  margin: 0;
  padding: var(--e3) var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-family: inherit;
  font-size: var(--texto-sm);
  /* Respeta los saltos de linea del mensaje y parte las lineas largas: un enlace sin cortar
     estira la caja y obliga a desplazar la pagina de lado. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- mes del panel */

/* La rejilla del mes. Siete columnas iguales y celdas que no se encogen: un mes que se
   aprieta hasta que el numero no se lee no sirve para lo unico que sirve un mes, que es
   mirarlo entero de una vez. */
.mes { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 22rem; }
.mes th {
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
  padding: var(--e2) 0;
  border-bottom: 1px solid var(--borde);
}
.mes__celda { padding: 2px; vertical-align: top; }
.mes__dia {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 60px;
  padding: var(--e2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  text-decoration: none;
  color: inherit;
}
.mes__dia:hover { background: var(--marca-clara); text-decoration: none; }
.mes__numero { font-variant-numeric: tabular-nums; font-weight: var(--peso-medio); }
.mes__cuenta { font-size: var(--texto-xs); color: var(--texto-suave); }
/* Hoy se marca con el borde y no con el fondo: el fondo ya lo usa el dia bloqueado, y dos
   cosas distintas con el mismo color es peor que no marcar ninguna. */
.mes__dia--hoy { border-color: var(--marca); border-width: 2px; }
.mes__dia--bloqueado { background: var(--color-error-100); border-color: var(--error); }
/* El texto existe para quien usa lector de pantalla; en la rejilla se ve como un punto. */
.mes__marca {
  font-size: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--error);
}

/* ------------------------------------------------------------------- filtros */

.filtros { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
/* El selector de «de quien es esta agenda» va en la misma fila y no estirado: un
   desplegable a todo el ancho parece el campo principal de la pantalla, y es un filtro. */
.filtros .seleccion { width: auto; min-width: 12rem; }
.filtros .campo__etiqueta { margin-bottom: 0; }
.filtros .boton { flex: 1 1 auto; }

/* ------------------------------------------------------------------- enlaces */

/* Un token firmado mide doscientos caracteres. Entero dentro de un mensaje lo convierte en
   un muro y esconde lo que el mensaje dice, que es lo único que importa al mirar esta
   pantalla. Se recorta al escribirlo y se parte al pintarlo. */
.enlace-corto { overflow-wrap: anywhere; text-decoration: underline; }

.mensaje { max-width: var(--ancho-texto); }

/* ------------------------------------------------------ acciones de una fila */

.acciones { display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0; }
.acciones .boton { padding: var(--e2) var(--e4); min-height: var(--toque-min); }

/* =========================================================================
   TELÉFONO. Por debajo de 48rem manda esto.
   El panel lo usa coordinación desde el escritorio y el Dr. desde el teléfono,
   así que ninguna de las dos formas es la excepción.
   ========================================================================= */

@media (max-width: 47.99rem) {
  .solo-escritorio { display: none; }

  .principal, .principal--panel { padding: var(--e4) var(--e3) var(--e7); }
  .cabecera { padding: var(--e3) var(--e4); }
  /* En el teléfono quedan unos 70 px entre la marca y el botón: ahí cabe el nombre de
     pila y no cabe el nombre entero, y el nombre de pila ya dice cuál de las cuentas es. */
  .yo__rol { display: none; }
  .tarjeta { padding: var(--e4); border-radius: var(--radio); }

  /* Una tabla de cinco columnas en 375 px no se estrecha: se sale de la pantalla. Cada
     fila pasa a ser una ficha y cada celda lleva escrito de qué es, con data-etiqueta. */
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla thead { display: none; }
  .tabla tr {
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    padding: var(--e3) var(--e4);
    margin-bottom: var(--e3);
  }
  .tabla tr:last-child { margin-bottom: 0; }
  .tabla td {
    border: 0;
    padding: var(--e1) 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--e1) var(--e3);
    justify-content: space-between;
    align-items: baseline;
  }
  .tabla td[data-etiqueta]::before {
    content: attr(data-etiqueta);
    flex: 0 0 auto;
    color: var(--texto-suave);
    font-size: var(--texto-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .tabla .acciones { width: 100%; margin-top: var(--e2); }
  .tabla .acciones .boton { flex: 1 1 auto; }

  /* La ficha del paciente son pares de dato y valor: ahí la etiqueta va encima y no al
     lado, porque un correo largo junto a su etiqueta deja dos columnas de tres letras. */
  .tabla--datos tr { border: 0; border-bottom: 1px solid var(--borde); border-radius: 0; padding: var(--e3) 0; margin: 0; }
  .tabla--datos tr:last-child { border-bottom: 0; }
  .tabla--datos td { display: block; padding: 0; }
  .tabla--datos td:first-child {
    color: var(--texto-suave);
    font-size: var(--texto-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--e1);
  }
  .tabla--datos td:last-child { overflow-wrap: anywhere; }

  /* Las pestañas secundarias (anterior, hoy, siguiente) no se parten: se deslizan. */
  .pestanas {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pestanas::-webkit-scrollbar { display: none; }
  .pestana { white-space: nowrap; min-height: var(--toque-min); display: inline-flex; align-items: center; }

  h1 { font-size: var(--texto-xl); }
  .filtros { width: 100%; }
}

/* =========================================================================
   ESCRITORIO
   ========================================================================= */

@media (min-width: 48rem) {
  .solo-movil { display: none; }

  .cita {
    display: flex;
    align-items: center;
    gap: var(--e3);
    border: 0;
    background: transparent;
    padding: var(--e2) 0;
  }
  .cita > .etiqueta { margin: 0 0 0 auto; }
  .filtros .boton { flex: 0 0 auto; }
}

/* --------------------------------------------------------------- formularios */

/* Cuánto falta. Sin esto, diez pasos en un teléfono son diez pantallas sin fondo a la
   vista, y el que no ve el final lo deja. */
.progreso { height: 6px; background: var(--borde); border-radius: var(--radio-pastilla); overflow: hidden; margin-bottom: var(--e4); }
.progreso__hecho { display: block; height: 100%; background: var(--marca); transition: width var(--transicion); }

/* Un campo escondido lo esconde el atributo `hidden`, y `.opciones` es flex: sin esto,
   flex gana y el campo escondido se vería igual. */
[hidden] { display: none !important; }

/* El encabezado que parte un paso en grupos de preguntas (los tres bloques del OSDI). */
.grupo { margin-top: var(--e6); }

/* Área de toque de verdad: esto lo marca alguien mayor, con el pulgar, en movimiento. */
.opciones { display: flex; flex-direction: column; gap: var(--e1); }

/* Sí y No, uno al lado del otro: son dos, caben, y verlos juntos es lo que dice de un
   golpe que hay dos respuestas posibles y no una. */
.opciones--fila { flex-direction: row; }
.opciones--fila .opcion { flex: 1 1 0; justify-content: center; }
.opcion {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: var(--toque-min);
  padding: var(--e2) var(--e3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  cursor: pointer;
}
.opcion:hover { border-color: var(--marca); }
.opcion input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--marca); }
.opcion span { line-height: var(--linea-media); }

/* El OSDI de un formulario entregado. Es el número que decide si un paciente está normal
   o severo, así que se lee antes que nada y no dentro de una tabla de cincuenta filas. */
.osdi { display: flex; align-items: baseline; gap: var(--e3); margin: var(--e3) 0; }
.osdi__numero { font-size: var(--texto-xl); font-weight: 600; color: var(--marca); }

/* Lo que contestó, plegado: el resumen cabe en la pantalla y el detalle está a un toque.
   Sesenta y una respuestas abiertas de golpe entierran las citas que van debajo. */
.desplegable summary { cursor: pointer; min-height: var(--toque-min); display: flex; align-items: center; color: var(--marca); }
.desplegable__titulo { font-size: var(--texto-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); margin-top: var(--e4); }

/* ------------------------------------------------------------------ abecedario */

/* Las veintisiete letras en el teléfono no caben en una fila y no deben partirse en
   cuatro: se deslizan, igual que las pestañas secundarias. */
.abecedario {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
  margin-bottom: var(--e4);
}
.abecedario__letra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0 var(--e2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
  font-size: var(--texto-sm);
  text-decoration: none;
}
.abecedario__letra:hover { border-color: var(--marca); color: var(--marca); text-decoration: none; }
.abecedario__letra--activa {
  background: var(--marca);
  border-color: var(--marca);
  color: var(--color-texto-sobre-marca);
}

/* El logo del panel lleva a la bandeja, y se nota que se puede pulsar. */
a.marca:hover { text-decoration: none; opacity: .8; }

/* ------------------------------------------------------------------ calendario */

/* En el teléfono el mes va arriba y las horas debajo; en pantalla ancha, al lado, que es
   donde se ven las dos cosas a la vez sin desplazarse. */
.calendario { display: grid; gap: var(--e5); }
.calendario__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  margin: 0 0 var(--e3);
  font-size: var(--texto-lg);
  text-transform: capitalize;
}
.calendario__flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--toque-min);
  min-height: var(--toque-min);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--marca);
  font-size: var(--texto-xl);
  line-height: 1;
  text-decoration: none;
}
.calendario__flecha:hover { border-color: var(--marca); text-decoration: none; }
.calendario__flecha--apagada { color: var(--texto-tenue); border-color: var(--borde); opacity: .4; }

.calendario__rejilla { width: 100%; border-collapse: collapse; table-layout: fixed; }
.calendario__rejilla th {
  padding-bottom: var(--e2);
  color: var(--texto-suave);
  font-size: var(--texto-xs);
  font-weight: 500;
}
.calendario__rejilla td { padding: 2px; text-align: center; }
.calendario__leyenda { margin-top: var(--e3); font-size: var(--texto-xs); color: var(--texto-suave); }

/* El número del día es el área de toque: 44 px de lado, que es lo que ocupa un pulgar. */
.dia-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  border-radius: var(--radio);
  font-size: var(--texto-sm);
  text-decoration: none;
}
a.dia-num { background: var(--marca-clara); color: var(--marca); font-weight: 600; }
a.dia-num:hover { background: var(--marca); color: var(--color-texto-sobre-marca); text-decoration: none; }
/* Con el selector a secas, `a.dia-num` le ganaba por especificidad y el día elegido se
   veía igual que los demás: medido en la demostración, los dos con el mismo fondo. */
a.dia-num--abierto { background: var(--marca); color: var(--color-texto-sobre-marca); }
a.dia-num--abierto:hover { background: var(--marca-oscura); }
/* Gris y sin borde: un día sin horarios no debe parecer pulsable ni un segundo. */
.dia-num--sin { color: var(--texto-tenue); }

/* 🔴 Las horas van en cuadrícula, no en una columna.

   En una sola columna, veinte horas son veinte filas: la columna crecía al doble que el
   calendario de al lado y el conjunto se leía torcido. Y la primera versión lo tapaba con
   `overflow-y: auto` sobre la columna ENTERA, que metía dentro del scroll el título del día
   y el botón de apartar: el botón quedaba flotando sobre la última hora, con su barra al
   lado. El scroll no era el arreglo, era el síntoma.

   `auto-fill` reparte solo: tres o cuatro columnas junto al calendario, dos en el teléfono,
   y la altura sale parecida a la del mes sin que nadie cuente filas. */
.calendario__horas .opciones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: var(--e2);
}
.calendario__horas .boton { margin-top: var(--e4); }

@media (min-width: 48rem) {
  .calendario { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: start; }
}

/* Una opción con su explicación debajo: el plan de pago no se elige por su nombre, se
   elige por cuándo te van a pedir el dinero. */
.opcion--alta { align-items: flex-start; padding: var(--e3); }
.opcion--alta input { margin-top: 2px; }
.opcion__nota { display: block; font-size: var(--texto-sm); color: var(--texto-suave); margin-top: 2px; }
.total { border-top: 1px solid var(--borde); padding-top: var(--e3); margin-top: var(--e3); }

/* La fecha de una sesión no se parte y no baja: es corta y tiene que leerse al lado de su
   sesión. Quien se encoge es el nombre del procedimiento, que puede ser largo. */
.sesion-fila { flex-wrap: nowrap; }
.sesion-fila__que { min-width: 0; }
.sesion-fila__cuando { flex: 0 0 auto; white-space: nowrap; }

/* Una casilla dentro de una celda de tabla: sin recuadro ni alto de botón, que la fila ya
   es la que se lee. */
.opcion--plana { border: 0; background: none; padding: 0; min-height: 0; }
.entrada--corta { width: 5rem; min-width: 0; }

/* Botones en fila, que se envuelven en el teléfono en vez de salirse. */
.fila-botones { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }

/* ------------------------------------------------------------ consentimiento */

/* El nombre del procedimiento va arriba y en grande: es lo que se autoriza, y el resto de
   la pantalla es la explicación de eso. */
.consentimiento__procedimiento {
  font-size: var(--texto-lg);
  font-weight: 600;
  color: var(--marca);
  margin-top: 0;
}
.consentimiento__riesgos { padding-left: var(--e5); }
.consentimiento__riesgos li { margin-bottom: var(--e1); line-height: var(--linea-media); }

/* La casilla que faltó por marcar. El borde rojo es lo único que distingue «no la marqué»
   de «no la vi» cuando hay siete seguidas. */
.opcion--falta { border-color: var(--error); }

/* El recuadro de la firma. Alto fijo y ancho completo: en una tableta se firma con el dedo
   y un recuadro estrecho produce una firma que no se parece a la de nadie.
   `touch-action: none` es obligatorio, no cosmético: sin él, arrastrar el dedo dentro del
   recuadro hace desplazarse la página en vez de dibujar. */
.firma-caja {
  border: 2px dashed var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  overflow: hidden;
}
.firma-caja__lienzo {
  display: block;
  width: 100%;
  height: 180px;
  touch-action: none;
  cursor: crosshair;
}

/* Cada consentimiento de una orden, con su estado y sus dos vías de firma. Separados por
   una línea porque son bloques con formularios dentro: sin separación, el «Registrar la
   firma en papel» de uno parece pertenecer al procedimiento de abajo. */
.consentimiento-linea {
  border-top: 1px solid var(--borde);
  padding-top: var(--e3);
  margin-top: var(--e3);
}
.consentimiento-linea:first-child { border-top: 0; margin-top: 0; }

/* ---------------------------------------------------------------- liquidación */

/* Trece columnas no caben en un teléfono de ninguna manera. La TABLA se desplaza de lado
   dentro de su caja; la página no. Una página que se mueve en horizontal se siente rota. */
.tabla-ancha { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-ancha .tabla { min-width: 64rem; }
.tabla-ancha .tabla td, .tabla-ancha .tabla th { white-space: nowrap; }

/* La fila que hay que mirar antes de repartir: sin regla, sin equipo anotado o descuadrada.
   El fondo la saca de entre cuarenta filas correctas. */
.fila--aviso { background: var(--error-fondo); }

/* --------------------------------------------------------------- recorrido guiado */

/* 🔴 **Existe para que el Dr. entienda el panel sin que nadie se lo venda.** Se pinta la
   primera vez que alguien entra en su sesión y no vuelve hasta que haya otra sesión: varias
   personas usan las mismas tres cuentas a la vez, cada una desde su navegador, y guardarlo
   en el usuario haría que el segundo que entra no lo viera nunca. */

.guiado {
  position: fixed;
  right: var(--e4);
  bottom: var(--e4);
  width: min(22rem, calc(100vw - var(--e5)));
  z-index: 50;
  background: var(--superficie);
  border: 1px solid var(--marca);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-lg, 0 10px 30px rgba(0,0,0,.18));
  padding: var(--e4);
}
.guiado__cuenta {
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--marca);
  margin: 0 0 var(--e1);
}
.guiado__titulo { font-size: var(--texto-lg); margin: 0 0 var(--e2); }
.guiado__dice { font-size: var(--texto-sm); margin: 0 0 var(--e3); }
.guiado__dice--ojo { color: var(--texto-suave); }
.guiado__pie { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.guiado__pie form { margin: 0; }
.guiado__pista {
  font-size: var(--texto-xs);
  color: var(--texto-suave);
  margin: var(--e3) 0 0;
}

/* En el teléfono va abajo y de lado a lado: una tarjeta flotante de 22 rem en una pantalla
   de 390 px tapa justo lo que se está explicando. */
@media (max-width: 40rem) {
  .guiado {
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    border-radius: var(--radio-lg) var(--radio-lg) 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
}

/* El enlace del menú que hay que tocar, encendido. Es la parte de «toca aquí»: la tarjeta
   lo dice con palabras y el menú lo enseña con el dedo.

   Va por atributo en el cuerpo y no por una clase en cada enlace porque los enlaces se
   pintan DOS veces (la barra del escritorio y el menú del teléfono) desde una sola
   plantilla, y así no hay que pasarle nada. */
[data-recorrido] [data-seccion] { position: relative; }
[data-recorrido="bandeja"] [data-seccion="bandeja"],
[data-recorrido="hoy"] [data-seccion="hoy"],
[data-recorrido="dia"] [data-seccion="dia"],
[data-recorrido="semana"] [data-seccion="semana"],
[data-recorrido="bloqueos"] [data-seccion="bloqueos"],
[data-recorrido="buscar"] [data-seccion="buscar"],
[data-recorrido="avisos"] [data-seccion="avisos"],
[data-recorrido="cobros"] [data-seccion="cobros"],
[data-recorrido="seguros"] [data-seccion="seguros"],
[data-recorrido="liquidacion"] [data-seccion="liquidacion"],
[data-recorrido="nueva"] [data-seccion="nueva"] {
  background: var(--marca);
  color: var(--texto-sobre-marca);
  box-shadow: 0 0 0 4px var(--marca-clara);
}

/* El recorrido, llamado desde el menú del teléfono. Es un botón dentro de una lista de
   enlaces, así que se viste de enlace: un botón con su aspecto de botón ahí dentro se lee
   como otra cosa y rompe la fila. */
.menu__enlace--boton {
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--borde);
  font: inherit;
  text-align: left;
  color: var(--marca);
  cursor: pointer;
}
.menu__lista form { margin: 0; }
.menu__lista form:last-child .menu__enlace--boton { border-bottom: 0; }

/* 🔴 Con el menú del teléfono abierto, la tarjeta del recorrido se quita de en medio.
   Estaba fija abajo y tapaba la mitad inferior de la lista, que es justo donde cae el
   enlace que la propia tarjeta te dice que toques. Se vio mirando la captura del menú
   abierto; ninguna medida de desbordes lo habría delatado, porque nada se sale: se pinta
   encima.

   Con `:has()` y sin JavaScript. Donde no esté soportado, la tarjeta se queda donde estaba,
   que es exactamente como está hoy: no empeora nada. */
@media (max-width: 47.99rem) {
  body:has(.menu[open]) .guiado { display: none; }
}