/* Complemento del marcado HTML sin React (pnpm html). Se carga DESPUÉS de zinquo.css o nucleo.css.
   Solo cubre lo que el CSS del sistema no resuelve sin JavaScript: marco de página público,
   filas de opción con input nativo (estado :checked en vez de la clase --activa) y utilidades de formulario. */

.zq-publico {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--z-fondo);
  color: var(--z-texto);
  font-family: Urbanist, system-ui, sans-serif;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
  -webkit-text-size-adjust: 100%;
}
.zq-publico *, .zq-publico *::before, .zq-publico *::after { box-sizing: border-box; }
.zq-publico__cabecera,
.zq-publico__columna,
.zq-publico__pie {
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  padding-inline: 20px;
}
/* El logo va a la derecha y discreto: firma la página sin competir con el título (Tudor, 28/10/2026) */
.zq-publico__cabecera { display: flex; justify-content: flex-end; padding-top: 24px; padding-bottom: 0; }
.zq-publico__marca {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.zq-publico__marca .zq-logo { height: 20px; width: auto; min-width: 0; }
/* Con poco contenido, el bloque queda centrado en vertical entre la cabecera y el pie; si no cabe, empieza arriba (safe) */
.zq-publico__columna { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-content: safe center; gap: 20px; padding-top: 28px; padding-bottom: 48px; }
/* Título de la pantalla pública (un h1 por página): titular-2. Entradilla: cuerpo-grande. Pie y notas: pequeno. */
.zq-publico__titulo {
  margin: 0;
  font-size: var(--z-tipo-titular-2-tam);
  line-height: var(--z-tipo-titular-2-alto);
  letter-spacing: var(--z-tipo-titular-2-tracking);
  font-weight: var(--z-tipo-titular-2-peso);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.zq-publico__texto {
  margin: 0;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-cuerpo-grande-tam);
  line-height: var(--z-tipo-cuerpo-grande-alto);
  text-wrap: pretty;
}
.zq-publico__nota {
  margin: 0;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  text-wrap: pretty;
}
.zq-publico-zona {
  display: grid;
  gap: 0.25rem;
  padding: 1rem 0;
  border-block: 1px solid var(--z-borde);
}
.zq-publico-zona__etiqueta {
  margin: 0;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-etiqueta-tam);
  font-weight: var(--z-tipo-etiqueta-peso);
  letter-spacing: var(--z-tipo-etiqueta-tracking);
  line-height: var(--z-tipo-etiqueta-alto);
  text-transform: uppercase;
}
.zq-publico-zona__lugar {
  margin: 0;
  font-size: var(--z-tipo-titular-4-tam);
  font-weight: var(--z-tipo-titular-4-peso);
  letter-spacing: var(--z-tipo-titular-4-tracking);
  line-height: var(--z-tipo-titular-4-alto);
}
.zq-publico-zona__ahora {
  margin: 0;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
}
.zq-publico-zona__ahora strong { color: var(--z-texto); }
.zq-publico-zona__cambiar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.zq-publico-zona__cambiar label {
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
}
.zq-publico-zona__select {
  min-width: 0;
  min-height: var(--z-zona-tactil);
  padding: 0 0.75rem;
  border: 0;
  border-radius: var(--z-radio);
  background: var(--z-fondo);
  box-shadow: inset 0 0 0 1px var(--z-borde-f);
  color: var(--z-texto);
  font-family: inherit;
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
}
.zq-publico-zona__select:focus-visible { outline: 2px solid var(--z-foco); outline-offset: 2px; }
.zq-publico__pie {
  padding-top: 20px;
  padding-bottom: 32px;
  border-top: 1px solid var(--z-borde);
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  line-height: var(--z-tipo-pequeno-alto);
  text-wrap: pretty;
}
.zq-publico__pie p { margin: 0 0 4px; }

/* Datos de la cita: lista con filetes entre filas, sin recuadro (una lista no es una tarjeta). */
.zq-publico-datos { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-block: 1px solid var(--z-borde); }
.zq-publico-datos__fila { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; padding: 14px 0; }
.zq-publico-datos__fila + .zq-publico-datos__fila { border-top: 1px solid var(--z-borde); }
.zq-publico-datos dt { color: var(--z-texto-2); font-size: var(--z-tipo-pequeno-tam); line-height: var(--z-tipo-pequeno-alto); }
.zq-publico-datos dd { margin: 0; font-size: var(--z-tipo-cuerpo-tam); line-height: var(--z-tipo-cuerpo-alto); font-weight: 600; overflow-wrap: anywhere; }
.zq-publico-datos__sub {
  display: block;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-pequeno-tam);
  font-weight: 400;
  line-height: var(--z-tipo-pequeno-alto);
}
.zq-publico-datos a { color: var(--z-accion); font-weight: 600; }
.zq-publico-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.zq-publico-grupo + .zq-publico-acciones { margin-top: 28px; }
.zq-publico-acciones a.zq-boton { text-decoration: none; }
@media (max-width: 480px) { .zq-publico-datos__fila { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* Campos y grupos de formulario */
.zq-publico-campo { display: grid; gap: 8px; margin-top: 20px; }
/* Todo enunciado (un dato, una pregunta de elegir o una de escribir) va en titular-4, por encima de lo que se responde.
   El legend de un grupo lleva la especificidad del grupo: .zq-grupo-radio legend lo dejaba en pequeño */
.zq-publico-campo__etiqueta { font-size: var(--z-tipo-titular-4-tam); line-height: var(--z-tipo-titular-4-alto); font-weight: var(--z-tipo-titular-4-peso); }
.zq-publico-pregunta,
:is(.zq-grupo-radio, .zq-publico-grupo) > legend.zq-publico-pregunta {
  margin: 0 0 8px;
  padding: 0;
  font-size: var(--z-tipo-titular-4-tam);
  line-height: var(--z-tipo-titular-4-alto);
  font-weight: var(--z-tipo-titular-4-peso);
  text-wrap: pretty;
}
/* «(opcional)» detrás de la etiqueta: lo obligatorio es lo normal y no se marca */
.zq-publico-campo__opcional { font-weight: 400; color: var(--z-texto-2); }
.zq-publico-campo__area {
  width: 100%;
  min-height: 44px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--z-radio);
  background: var(--z-fondo);
  box-shadow: inset 0 0 0 1px var(--z-borde-f);
  color: var(--z-texto);
  font: inherit;
  font-size: var(--z-tipo-cuerpo-tam); /* los campos nunca por debajo de 16 px: iOS no hace zoom */
  line-height: var(--z-tipo-cuerpo-alto);
  resize: vertical;
}
.zq-publico-campo__area:focus-visible { outline: 2px solid var(--z-foco); outline-offset: 2px; }
.zq-publico-grupo { margin-top: 32px; }
.zq-publico-grupo legend { margin-bottom: 4px; }
:is(.zq-grupo-radio, .zq-publico-grupo) > legend.zq-publico-pregunta { margin-bottom: 12px; }
.zq-publico-grupo .zq-seleccion { position: relative; }

/* Radios nativos con el aspecto de GrupoRadio: filas con borde, una por línea.
   El pulsado (--z-activo), el hover con guarda y user-select vienen de .zq-radio-tarjeta (acciones.css). */
.zq-grupo-radio__opciones--filas { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.zq-radio-tarjeta--nativa { cursor: pointer; }
/* En un formulario público la respuesta va en texto normal: el enunciado de la pregunta (zq-publico-pregunta) es lo que manda */
.zq-publico-grupo .zq-radio-tarjeta__titulo { font-size: var(--z-tipo-cuerpo-tam); line-height: var(--z-tipo-cuerpo-alto); font-weight: 400; }
.zq-radio-tarjeta--nativa input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.zq-radio-tarjeta--nativa:has(input:checked) { box-shadow: inset 0 0 0 2px var(--z-texto); }
.zq-radio-tarjeta--nativa:has(input:checked) .zq-radio-tarjeta__punto { box-shadow: inset 0 0 0 6px var(--z-boton); }
.zq-radio-tarjeta--nativa:has(input:focus-visible) { outline: 2px solid var(--z-foco); }
@media (hover: hover) and (pointer: fine) {
  .zq-radio-tarjeta--nativa:hover { box-shadow: inset 0 0 0 1px var(--z-borde-f); }
  .zq-radio-tarjeta--nativa:has(input:checked):hover { box-shadow: inset 0 0 0 2px var(--z-texto); }
}

/* Sin huecos: la salida es escribir, así que el correo se ve grande y en azul de acción, y se pulsa entero */
/* Va justo después del bloque de la zona, que ya trae su raya inferior: aquí solo la de abajo, para no doblarla */
.zq-publico-sin-huecos { display: grid; gap: 8px; padding: 4px 0 20px; border-bottom: 1px solid var(--z-borde); }
.zq-publico-sin-huecos__titulo {
  margin: 0;
  font-size: var(--z-tipo-titular-4-tam);
  line-height: var(--z-tipo-titular-4-alto);
  font-weight: var(--z-tipo-titular-4-peso);
}
.zq-publico-sin-huecos__correo {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 4px;
  color: var(--z-azul-accion);
  font-size: var(--z-tipo-titular-3-tam);
  line-height: var(--z-tipo-titular-3-alto);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
}
.zq-publico-sin-huecos__correo:focus-visible { outline: 2px solid var(--z-foco); outline-offset: 4px; }
.zq-publico-sin-huecos__correo:active { color: var(--z-texto); }


.zq-publico:has(.ze-anual) :is(.zq-publico__cabecera, .zq-publico__columna, .zq-publico__pie) { max-width: 1080px; }
.zq-publico:has(.ze-anual) .zq-publico__columna { align-content: start; }

.ze-anual { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: 32px 24px; }
.ze-mes { min-width: 0; }
.ze-mes__titulo {
  margin: 0 0 8px;
  color: var(--z-texto);
  font-size: var(--z-tipo-cuerpo-tam);
  line-height: var(--z-tipo-cuerpo-alto);
  font-weight: 600;
}
.ze-mes__dias, .ze-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ze-mes__dias span {
  padding: 4px 0;
  color: var(--z-texto-2);
  font-size: var(--z-tipo-minimo-tam);
  line-height: var(--z-tipo-minimo-alto);
  font-weight: 500;
  text-align: center;
}
.ze-mes__cuadricula { border-top: 1px solid var(--z-borde); border-left: 1px solid var(--z-borde); }

/* Cada semana es tan alta como un día es ancho (unos 48 px): los días quedan en cuadros. Con 2 o 3 ediciones a la vez, crece. */
.ze-semana--carriles-0 { grid-template-rows: minmax(3rem, auto); }
.ze-semana--carriles-1 { grid-template-rows: 1.5rem minmax(1.5rem, auto); }
.ze-semana--carriles-2 { grid-template-rows: 1.5rem 1.375rem 1.375rem; }
.ze-semana--carriles-3 { grid-template-rows: 1.5rem 1.375rem 1.375rem 1.375rem; }

.ze-dia {
  grid-row: 1 / -1;
  min-width: 0;
  padding: 2px 4px;
  border-right: 1px solid var(--z-borde);
  border-bottom: 1px solid var(--z-borde);
  background: var(--z-fondo);
}
.ze-dia--fuera { background: var(--z-sup); }
.ze-dia__numero {
  display: block;
  color: var(--z-texto);
  font-size: var(--z-tipo-minimo-tam);
  line-height: var(--z-tipo-minimo-alto);
  font-weight: 600;
}
.ze-dia--pasado .ze-dia__numero { color: var(--z-texto-3); font-weight: 400; }
.ze-dia--hoy .ze-dia__numero { color: var(--z-azul-accion); }

/* La barra de una edición: azul acción con texto blanco, de punta a punta de sus días en la semana */
.ze-banda {
  position: relative;
  z-index: 1;
  display: block;
  align-self: start;
  min-width: 0;
  height: 1.25rem;
  margin: 1px 0;
  padding: 0 4px;
  overflow: hidden;
  color: var(--z-sobre-dest);
  background: var(--z-azul-accion);
  font-size: var(--z-tipo-minimo-tam);
  line-height: 1.25rem;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.ze-banda:focus-visible { outline: 2px solid var(--z-foco); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .ze-banda:hover { text-decoration: underline; } }

.ze-c1 { grid-column-start: 1; }
.ze-c2 { grid-column-start: 2; }
.ze-c3 { grid-column-start: 3; }
.ze-c4 { grid-column-start: 4; }
.ze-c5 { grid-column-start: 5; }
.ze-c6 { grid-column-start: 6; }
.ze-c7 { grid-column-start: 7; }
.ze-s1 { grid-column-end: span 1; }
.ze-s2 { grid-column-end: span 2; }
.ze-s3 { grid-column-end: span 3; }
.ze-s4 { grid-column-end: span 4; }
.ze-s5 { grid-column-end: span 5; }
.ze-s6 { grid-column-end: span 6; }
.ze-s7 { grid-column-end: span 7; }
.ze-l1 { grid-row: 2; }
.ze-l2 { grid-row: 3; }
.ze-l3 { grid-row: 4; }