/*
  Carcasa de todas las páginas (Tarea 5): enlace para saltar, cabecera con su menú y su selector de idioma, aviso
  de cierre, pie y barra fija del móvil; y, de la Tarea 11, el aviso de cookies. El marcado está en parts/ (cabecera,
  selector-idioma, horario, pie, barra-movil y aviso-cookies); el estado del horario lo pinta horario.js, el panel del
  menú, menu.js, y el aviso de cookies, consentimiento.js.

  Puntos de corte:
    1100 px  el menú pasa de una fila a un panel plegable (tabletas y móviles), solo con la clase js en <html>: el
             HTML no lleva hidden y, sin la clase (sin JavaScript, o si menu.js no carga), el menú se ve entero.
     800 px  aparece la barra móvil. Se oculta con (min-width: 800px) y se muestra por debajo de 799,98 px.

  Contraste. Texto pequeño siempre en --ink o --ink2 (--ink3 da 3,7:1: solo para bordes y detalles que no son
  texto). Sol y Lima, siempre con texto oscuro. Foco: base.css pinta el anillo con var(--foco, var(--azul)); las
  superficies de color (botón azul, aviso en Sol) y el pie fijan --foco: var(--ink), que se ve sobre ellas.
*/

:root {
  --abierto: #188038;   /* verde del punto del horario: 5,1:1 sobre blanco */
  --cerrado: #d93025;   /* rojo del punto del horario: 4,5:1 sobre blanco */
  --barra-h: 0px;   /* alto de la barra móvil: la fija el punto de corte de abajo; el aviso de cookies se apoya en ella */
}

/* ---------------------------------------------------------- utilidades de la carcasa */
/* Contenedor central. Pone solo el relleno de los lados, nunca el atajo `padding`: el de arriba y el de abajo es de
   cada bloque (.cabecera__fila, .pie__cuerpo, .pie__base-fila) y un atajo que llegue después de él, con la misma
   especificidad, lo dejaría en cero (pasaba a menos de 800 px). */
.envoltorio {
  max-width: var(--w);
  margin: 0 auto;
  padding-right: 28px;
  padding-left: 28px;
}

/* Texto solo para lectores de pantalla. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Enlace para saltar la cabecera: fuera de la pantalla hasta que recibe el foco. */
.saltar {
  --foco: var(--ink);
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.saltar:focus {
  top: 12px;
}

/* ---------------------------------------------------------- cabecera */
.cabecera {
  position: relative;
  z-index: 30;
  background: var(--cal);
  border-bottom: 1px solid var(--line);
}

/* Móvil y tableta: logo a la izquierda; a la derecha, idioma (y la cita, si cabe) y el botón del menú; y el panel
   del menú en una fila entera debajo. El HTML va en otro orden (logo, botón, menú, idioma, cita) por el teclado. */
.cabecera__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  min-height: 68px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.cabecera__logo {
  order: 1;
  display: block;
  flex: none;
  margin-right: auto;
  line-height: 0;
}

/* El logo encoge un poco en pantallas estrechas para que logo, idioma y botón quepan en una fila desde 320 px. */
.cabecera__logo img {
  width: clamp(108px, 34vw, 138px);
  height: auto;
}

.selector-idioma {
  order: 2;
  position: relative;
}

.cabecera__cta {
  order: 3;
  display: none;   /* en móvil la cita va en la barra de abajo */
}

.menu-boton {
  order: 4;
}

.menu {
  order: 5;
  flex: 0 0 100%;
  margin-top: 8px;
  border-top: 1px solid var(--line);
}

/* Botón del menú: dos iconos y se enseña uno según aria-expanded. Sin la clase js (sin JavaScript, o si menu.js no
   carga: su etiqueta la quita) no hay quien lo atienda: no se ve, y el menú se queda a la vista. */
.menu-boton {
  --foco: var(--ink);
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--ink3);
  border-radius: 999px;
  background: var(--cal);
  color: var(--ink);
  cursor: pointer;
}

/* Móvil y tableta, con JavaScript: el botón se ve y el panel del menú se pliega mientras aria-expanded sea false. El
   panel va justo detrás del botón en el HTML. No hay atributo hidden: el CSS decide, y solo con la clase js. */
@media (max-width: 1099.98px) {
  .js .menu-boton {
    display: inline-flex;
  }

  .js .menu-boton[aria-expanded="false"] + .menu {
    display: none;
  }
}

.menu-boton:hover {
  border-color: var(--ink);
}

.menu-boton__cerrar,
.menu-boton[aria-expanded="true"] .menu-boton__abrir {
  display: none;
}

.menu-boton[aria-expanded="true"] .menu-boton__cerrar {
  display: block;
}

/* El menú: un panel de enlaces grandes en móvil. */
.menu ul {
  margin: 0;
  padding: 4px 0 10px;
  list-style: none;
}

.menu li {
  margin: 0;
}

.menu a {
  display: block;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
}

.menu a:hover,
.menu a[aria-current] {
  font-weight: 800;
}

/* Cada página lleva su color (examen azul, gafas y nosotros buganvilla, lentillas lima, sol sol; contacto, tinta). */
.menu a {
  --c: var(--ink);
}

.menu a[data-clave="examen"] { --c: var(--azul); }
.menu a[data-clave="gafas"] { --c: var(--bug); }
.menu a[data-clave="lentillas"] { --c: var(--lima); }
.menu a[data-clave="sol"] { --c: var(--sol); }
.menu a[data-clave="nosotros"] { --c: var(--bug); }

/* Selector de idioma: un <details> con el nombre del idioma actual y la lista de los seis. */
.selector-idioma summary {
  --foco: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--ink3);
  border-radius: 999px;
  background: var(--cal);
  color: var(--ink2);
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.selector-idioma summary::-webkit-details-marker {
  display: none;
}

/* La flecha: dos bordes girados, sin imagen. */
.selector-idioma summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s;
}

.selector-idioma[open] summary::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}

.selector-idioma summary:hover,
.selector-idioma[open] summary {
  border-color: var(--ink);
  color: var(--ink);
}

.selector-idioma ul {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  min-width: min(11.5rem, calc(100vw - 36px));   /* con la letra muy grande, no más ancho que la pantalla: se salía por la izquierda */
  max-width: calc(100vw - 36px);
  margin: 0;
  padding: 8px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--cal);
  box-shadow: 0 14px 36px rgba(21, 23, 28, .14);
}

.selector-idioma li {
  margin: 0;
}

.selector-idioma a {
  display: block;
  padding: 11px 14px;
  border-radius: 12px;
  color: var(--ink2);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}

.selector-idioma a:hover {
  background: var(--cal2);
  color: var(--ink);
}

.selector-idioma a[aria-current] {
  color: var(--ink);
  font-weight: 800;
  box-shadow: inset 3px 0 0 var(--azul);
}

/* A 320-359 px, logo, idioma y botón del menú aprietan un poco más para seguir en una fila. */
@media (max-width: 359.98px) {
  .cabecera__fila {
    column-gap: 8px;
  }

  .selector-idioma summary {
    gap: 8px;
    padding: 0 12px;
  }
}

/* Botón «Pedir cita» de la cabecera: azul con texto blanco; al pasar el ratón, la mezcla azul + buganvilla. */
.cabecera__cta {
  --foco: var(--ink);
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--azul);
  color: #fff;
  font-size: .9375rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s;
}

.cabecera__cta:hover {
  background: var(--m-ab);
}

/* Tableta: cabe el botón «Pedir cita» junto al idioma. */
@media (min-width: 800px) {
  .cabecera__cta {
    display: inline-flex;
  }

  .cabecera__logo img {
    width: 164px;
  }
}

/* Escritorio: una fila, con el menú entre el logo y las acciones, y sin botón de menú. */
@media (min-width: 1100px) {
  .cabecera__fila {
    flex-wrap: nowrap;
    column-gap: 10px;
    min-height: 80px;
  }

  .cabecera__logo {
    order: 1;
    margin-right: 0;
  }

  .cabecera__logo img {
    width: 156px;
  }

  /* El botón no se ve y el menú siempre está a la vista: el pliegue de arriba solo vale por debajo de 1100 px. */
  .menu {
    order: 2;
    flex: 1 1 auto;
    margin: 0;
    border-top: 0;
  }

  .menu ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    padding: 0;
  }

  .menu a {
    padding: 9px 8px;
    border-bottom: 0;
    border-radius: 10px;
    font-size: .9375rem;
  }

  .menu a:hover,
  .menu a[aria-current] {
    box-shadow: inset 0 -3px 0 var(--c);
  }

  .selector-idioma {
    order: 3;
  }

  .cabecera__cta {
    order: 4;
  }
}

/* Seis enlaces desde el 18-oct (las gafas graduadas): de 1100 a 1279 px el menú va más junto y el logo, algo más pequeño, para que quepa
   en una fila también en inglés, con «Book an appointment» (a 1100 px sobraban 64 px). Desde 1280 px, el aire de siempre. */
@media (min-width: 1280px) {
  .cabecera__fila {
    column-gap: 14px;
  }

  .cabecera__logo img {
    width: 176px;
  }

  .menu ul {
    gap: 2px 6px;
  }

  .menu a {
    padding: 9px 12px;
  }
}

/* ---------------------------------------------------------- aviso de cierre (bajo la cabecera, en todas las páginas) */
.aviso-cierre {
  --foco: var(--ink);
  padding: 10px 18px;
  background: var(--sol);
  color: var(--ink);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

/* ---------------------------------------------------------- pie */
.pie {
  --foco: var(--ink);
  background: var(--cal2);
  color: var(--ink2);
  font-size: .9375rem;
  line-height: 1.55;
}

.pie a {
  color: var(--ink);
  text-underline-offset: 3px;
}

.pie a:hover {
  text-decoration-thickness: 2px;
}

.pie__cuerpo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  padding-top: 48px;
  padding-bottom: 36px;
}

.pie__logo {
  display: inline-block;
  line-height: 0;
}

.pie__logo img {
  width: 164px;
  height: auto;
}

.pie__idiomas {
  max-width: 22em;
  margin: 18px 0 0;
}

.pie__titulo {
  max-width: none;
  margin: 0 0 12px;
  color: var(--ink);
  font-size: .8125rem;
  letter-spacing: .16em;
  line-height: 1.3;
  text-transform: uppercase;
}

.pie address {
  font-style: normal;
}

.pie p {
  margin: 0 0 .6em;
}

.pie__contacto,
.pie__legal {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pie__contacto li {
  margin: 0 0 .5em;
}

/* Horario: la línea de estado y la tabla. El estado lo pinta horario.js; hasta entonces la línea reserva su alto. */
.horario__estado {
  min-height: 1.55em;
  margin: 0 0 10px;
  color: var(--ink);
  font-weight: 700;
}

/* El punto: verde si está abierto y rojo si está cerrado (18-oct, como un semáforo; los dos a más de 3:1 sobre el blanco y el gris del pie). */
.horario__estado:not(:empty)::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--cerrado);
}

.horario[data-estado="abierto"] .horario__estado::before {
  background: var(--abierto);
}

/* La caja del horario es un contenedor (de su ancho: container-type: inline-size) para la tabla de abajo. */
.horario {
  container-type: inline-size;
}

.horario__tabla {
  width: 100%;
  border-collapse: collapse;
}

.horario__tabla th,
.horario__tabla td {
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.horario__tabla th {
  padding-right: 18px;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

/* Un tramo («10:00–14:00») no se parte; si dos no caben en una línea, saltan por el punto medio. */
.horario__tabla td span {
  white-space: nowrap;
}

/* Si la caja mide menos de 16 em (la letra grande para el ancho que hay: con la letra al 200 % a 320 px, una columna de 284 px son 9 em), el día y el
   tramo, que no se partían, ya no caben uno al lado del otro: pueden partirse (el día, por sus espacios; el tramo, por la raya) y, si ni así,
   donde haga falta. Con más ancho, la tabla es la de siempre. */
@container (max-width: 16em) {
  .horario__tabla th {
    white-space: normal;
    overflow-wrap: break-word;       /* no anywhere: la columna del día no baja de su palabra más larga («Samstag») y no se parte por la mitad */
  }

  .horario__tabla td,
  .horario__tabla td span {
    white-space: normal;
    overflow-wrap: anywhere;         /* «Geschlossen» y los tramos encogen hasta lo que dejan el día y el ancho de la caja */
  }
}

.horario__tabla tr[aria-current="date"] th,
.horario__tabla tr[aria-current="date"] td {
  color: var(--ink);
  font-weight: 800;
}

.pie__base {
  border-top: 1px solid var(--line);
  font-size: .875rem;
}

.pie__base-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 32px;
  padding-top: 20px;
  padding-bottom: 28px;
}

.pie__credenciales {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 20px;
  margin: 0;
}

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 22px;
}

.pie__legal li {
  margin: 0;
}

/* «Preferencias de cookies» (Tarea 11): un botón con la pinta de los enlaces de al lado. Nace con data-oculto: invisible, fuera del
   teclado y de los lectores de pantalla, pero con su sitio, para que el pie no se mueva cuando llega consentimiento.js, que se lo
   quita al arrancar. Sin JavaScript, o si el script no llega, se queda así. */
.pie__preferencias[data-oculto] {
  visibility: hidden;
}

.pie__preferencias button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

@media (hover: hover) {
  .pie__preferencias button:hover {
    text-decoration-thickness: 2px;
  }
}

@media (min-width: 800px) {
  .pie__cuerpo {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 56px;
    padding-top: 56px;
  }
}

@media (min-width: 1100px) {
  .pie__cuerpo {
    grid-template-columns: 1fr .85fr 1.5fr .8fr;
    gap: 40px 44px;
  }
}

/* ---------------------------------------------------------- barra fija del móvil */
.barra-movil {
  display: none;
}

@media (max-width: 799.98px) {
  /* 73 px es lo que mide de verdad la barra: 10 de relleno + 52 del botón + 10 de relleno + 1 del filete de arriba (sin contar
     la zona segura del iPhone, que se suma aparte). Con 72, el aviso de cookies —que se apoya en ella— se metería 1 px debajo. */
  :root {
    --barra-h: 73px;
  }

  /* Que la barra no tape el final del pie. */
  body {
    padding-bottom: calc(var(--barra-h) + env(safe-area-inset-bottom, 0px));
  }

  /* Ni lo que recibe el foco del teclado al desplazarse: sin esto, un enlace que asoma por debajo de la pantalla se
     queda justo detrás de la barra. 16 px de aire por encima de ella. */
  html {
    scroll-padding-bottom: calc(var(--barra-h) + 16px);
  }

  .envoltorio {
    padding-right: 18px;
    padding-left: 18px;
  }

  .barra-movil {
    --foco: var(--ink);
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    display: flex;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: var(--cal);
    box-shadow: 0 -8px 24px rgba(21, 23, 28, .08);
  }

  .barra-movil a {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 6px;
    border-radius: 14px;
    background: var(--cal2);
    color: var(--ink);
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
  }

  .barra-movil .barra-movil__cita {
    flex-grow: 1.5;
    background: var(--azul);
    color: #fff;
  }
}

/* ---------------------------------------------------------- aviso de cookies (Tarea 11) */
/* Una franja fija abajo, no un velo: ocupa lo que necesita su texto y deja ver y tocar la página de encima. En el móvil se apoya
   justo encima de la barra de botones (--barra-h, más la zona segura del iPhone, que la barra también suma); en escritorio, en
   el borde de abajo. Nace oculto (hidden): solo consentimiento.js lo enseña. Si la pantalla es muy baja, la franja no pasa del
   60 % y se desplaza por dentro. */
.aviso-cookies {
  position: fixed;
  right: 0;
  bottom: calc(var(--barra-h) + env(safe-area-inset-bottom, 0px));
  left: 0;
  z-index: 55;
  max-height: 60vh;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  background: var(--cal);
  box-shadow: 0 -8px 28px rgba(21, 23, 28, .12);
  color: var(--ink);
  font-size: .9375rem;
  line-height: 1.5;
}

/* Salvaguarda: hoy el aviso no fija su display, pero en cuanto alguien se lo ponga, el [hidden] del navegador perdería contra él. */
.aviso-cookies[hidden] {
  display: none;
}

/* El foco que le lleva el script al reabrirlo desde el pie: un anillo hacia dentro, porque hacia fuera (el de base.css) se saldría
   de la pantalla por los lados y por abajo se montaría en la barra. */
.aviso-cookies:focus-visible {
  outline-offset: -3px;
}

.aviso-cookies__fila {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.aviso-cookies__texto {
  max-width: 46em;
  margin: 0;
}

.aviso-cookies__texto a {
  color: var(--ink);
  text-underline-offset: 3px;
  white-space: nowrap;
}

@media (hover: hover) {
  .aviso-cookies__texto a:hover {
    text-decoration-thickness: 2px;
  }
}

/* Aceptar y Rechazar, iguales: mismo tamaño, mismo peso y mismos colores, uno al lado del otro (la rejilla les da el mismo ancho
   aunque una palabra sea más larga que la otra). Rechazar no puede costar más que aceptar. */
.aviso-cookies__botones {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 10px;
}

.aviso-cookies__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 2px solid transparent;   /* invisible, pero en alto contraste de Windows se dibuja y el botón conserva su forma */
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font: 700 .9375rem/1.2 var(--f);
  text-align: center;
  cursor: pointer;
  transition: background .2s;
}

/* El :hover solo con ratón: en una pantalla táctil se queda pegado al último botón tocado y, al reabrir el aviso, uno de los dos
   saldría de otro color que el otro. */
@media (hover: hover) {
  .aviso-cookies__boton:hover {
    background: var(--m-ab);
  }
}

@media (min-width: 800px) {
  .aviso-cookies__fila {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px 40px;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .aviso-cookies__botones {
    grid-auto-columns: minmax(8.5rem, 1fr);
    flex: none;
  }
}

/* Mientras el aviso está a la vista (consentimiento.js pone la clase y mide su alto en --aviso-h), la página deja ese relleno abajo
   y el desplazamiento por teclado cuenta con él: el final del pie y lo que recibe el foco quedan por encima del aviso, no debajo.
   En el móvil se suma a la barra; en escritorio, solo el aviso. Al decidir, la clase se va y todo vuelve a lo de antes. */
.con-aviso {
  scroll-padding-bottom: calc(var(--barra-h) + var(--aviso-h) + 16px);
}

.con-aviso body {
  padding-bottom: calc(var(--barra-h) + var(--aviso-h) + env(safe-area-inset-bottom, 0px));
}