/* Los cuatro valores que se pueden tocar desde Técnico → Cómo se ve. Todo lo
   demás del diseño sale de aquí: si cambias el amarillo, cambia en las 34
   sitios donde se usa, no hay que buscarlos. El JavaScript de ajustes.js los
   reescribe en el <html> al cargar cada página. */
:root {
  --amarillo: #ff9f43;
  --letra: 16px;
  --alto-boton: 3rem;

  /* La piel: noche de ciudad. Las capas son cristal oscuro semitransparente
     para que se vea el fondo (fondo.jpg) a través; por eso no hay grises
     fijos en el resto del fichero, solo estos nombres. */
  --noche: #070a16;
  --capa-honda: rgba(8, 11, 24, 0.82);
  --capa: rgba(20, 25, 46, 0.66);
  --capa-alta: rgba(255, 255, 255, 0.07);
  --capa-encima: rgba(255, 255, 255, 0.12);
  --acento-capa: color-mix(in srgb, var(--amarillo) 16%, transparent);
  --acento-capa-encima: color-mix(in srgb, var(--amarillo) 26%, transparent);
  --acento-capa-suave: color-mix(in srgb, var(--amarillo) 9%, transparent);
  --peligro-capa: rgba(255, 70, 110, 0.13);
  --peligro-capa-encima: rgba(255, 70, 110, 0.22);
  --peligro-linea: rgba(255, 90, 130, 0.38);
  --linea: rgba(255, 255, 255, 0.09);
  --linea-fuerte: rgba(255, 255, 255, 0.16);
  --texto: #eef1ff;
  --texto-2: #c9cfe6;
  --texto-3: #9ba4c4;
  --texto-4: #7a83a3;
  --bien: #5cf0b4;
  --mal: #ff7a96;
  --festivo: #ff6f61;
  --magenta: #ff4f9a;
  --violeta: #a271ff;
  --naranja: #ff9f43;
  --degradado: linear-gradient(120deg, var(--naranja), var(--magenta) 62%, var(--violeta));
  --brillo: 0 0 0 1px color-mix(in srgb, var(--naranja) 55%, transparent),
    0 0 22px color-mix(in srgb, var(--magenta) 35%, transparent);
  --sombra: 0 10px 30px rgba(0, 0, 0, 0.45);
  --cristal: blur(14px) saturate(140%);
  --curva: 14px;
}

html {
  font-size: var(--letra);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: var(--capa-honda);
  color: var(--texto);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

header {
  background: var(--capa-honda);
  padding: 1rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--linea);
}

header h1 {
  margin: 0 1rem 0 0;
  font-size: 1.1rem;
  color: var(--amarillo);
}

nav a {
  color: var(--texto-2);
  text-decoration: none;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 1rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

nav a.activo,
nav a:hover {
  background: var(--capa-alta);
  color: var(--texto);
}

main {
  padding: 1rem;
  max-width: 700px;
  margin: 0 auto;
}

select {
  font: inherit;
  text-transform: uppercase;
  padding: 0.4rem;
  margin-bottom: 1rem;
  background: var(--capa-honda);
  color: var(--texto);
  border: 2px solid var(--linea-fuerte);
  border-radius: 8px;
  min-height: 44px;
}

/* Windows pinta la lista desplegada con los colores del sistema si no se le
   dice nada, y sale texto claro sobre blanco. */
select option {
  background: var(--capa-honda);
  color: var(--texto);
}

.tramo {
  background: var(--capa);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

.tramo h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  color: var(--amarillo);
}

.tramo ul {
  margin: 0;
  padding-left: 1.2rem;
}

.tramo li {
  padding: 0.15rem 0;
}

.nota {
  color: var(--texto-3);
  font-style: italic;
  font-size: 0.9rem;
}

.notas-dia {
  color: var(--mal);
  margin-bottom: 1rem;
}

.modo-bar {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

#estado {
  color: var(--texto-3);
  margin-bottom: 1rem;
}

.bloque {
  margin-bottom: 0.75rem;
}

.bloque-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.bloque-cabecera h3 {
  margin: 0.5rem 0 0.25rem 0;
  font-size: 0.9rem;
  color: var(--texto-2);
}

button {
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  background: var(--capa-alta);
  color: var(--texto);
  border: 1px solid var(--linea-fuerte);
  border-radius: 8px;
  padding: 0.75rem 1.1rem;
  min-height: 44px;
  cursor: pointer;
}

button:hover {
  background: var(--capa-encima);
}

/* Botones de borrar (Quitar): destacados en rojo, mismo tamaño grande. */
button.boton-borrar,
.lista-simple button {
  background: var(--peligro-capa);
  border-color: var(--peligro-linea);
  color: var(--mal);
}

.lista-simple button:hover {
  background: var(--peligro-capa-encima);
}

.tramo li {
  list-style: none;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--linea);
}

.tramo li.hecho label {
  color: var(--bien);
  text-decoration: line-through;
}

.tramo li label {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 0.6rem;
}

.tramo li input[type="checkbox"] {
  transform: scale(1.8);
  flex-shrink: 0;
}

.amarillo {
  color: var(--amarillo);
  font-size: 0.85rem;
  margin-left: 1.6rem;
}

.ayuda {
  color: var(--texto-3);
  margin-bottom: 1rem;
}

#form-alta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

#form-alta input[type="text"] {
  flex: 1;
  min-width: 160px;
}

#form-alta input,
#form-alta select {
  font: inherit;
  font-size: 1rem;
  text-transform: uppercase;
  padding: 0.65rem;
  min-height: 44px;
}

#form-alta button,
#form-alta .toggle-grupo {
  flex-basis: 100%;
}

h2 {
  color: var(--amarillo);
  font-size: 1rem;
  margin: 1rem 0 0.4rem 0;
}

.lista-simple {
  margin: 0 0 1rem 0;
  padding: 0;
}

.lista-simple li {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--linea);
}

.lista-simple li em {
  color: var(--amarillo);
  font-style: normal;
}

.dias-semana {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

.dias-semana label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.9rem;
  min-height: 44px;
}

.dias-semana input[type="checkbox"] {
  transform: scale(1.5);
}

input[type="time"] {
  font: inherit;
  font-size: 1rem;
  padding: 0.5rem;
  min-height: 44px;
}

select {
  min-height: 44px;
  font-size: 1rem;
}

.header-inicio {
  justify-content: center;
}

.home-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.boton-grande {
  display: block;
  text-align: center;
  background: var(--capa);
  color: var(--texto);
  border: 1px solid var(--linea-fuerte);
  border-radius: 10px;
  padding: 1.25rem 1rem;
  font-size: 1.1rem;
  text-decoration: none;
  cursor: pointer;
}

.boton-grande:hover {
  background: var(--capa-encima);
}

.boton-grande small {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: var(--texto-3);
  text-transform: none;
}

.boton-principal {
  background: var(--acento-capa);
  border-color: var(--amarillo);
  color: var(--amarillo);
}

.boton-principal:hover {
  background: var(--acento-capa-encima);
}

.boton-enlace {
  background: none;
  border: none;
  color: var(--texto-3);
  text-decoration: underline;
  padding: 0.4rem;
}

.chooser {
  background: var(--capa);
  border-radius: 10px;
  padding: 1rem;
  margin-top: 1rem;
}

/* Grupo de opciones tipo botón: el circulito del radio/checkbox se oculta y
   toda la etiqueta pasa a ser lo que se pulsa, resaltando cuando está
   marcada. Así no hay que acertarle a un punto pequeño. */
.toggle-grupo {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.toggle-grupo label {
  flex: 1;
  min-width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.4rem;
  background: var(--capa);
  border: 1px solid var(--linea-fuerte);
  border-radius: 8px;
  padding: 0.9rem 0.6rem;
  min-height: 44px;
  cursor: pointer;
}

.toggle-grupo label:has(input:checked) {
  background: var(--acento-capa);
  border-color: var(--amarillo);
  color: var(--amarillo);
}

.toggle-grupo input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.chooser-botones {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.nav-paso {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  position: sticky;
  bottom: 0;
  background: var(--capa-honda);
  padding: 0.75rem 0;
}

.nav-paso button {
  flex: 1;
  padding: 0.75rem;
  font-size: 1rem;
}

.nav-paso button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pendientes {
  background: var(--peligro-capa);
  border: 1px solid var(--peligro-linea);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

.pendientes h3 {
  margin: 0 0 0.4rem 0;
  color: var(--mal);
  font-size: 0.9rem;
}

.pendientes ul {
  margin: 0;
  padding-left: 1.2rem;
}

/* Plegado, el tirador hace de cabecera: mismo rojo que el <h3> que sustituye,
   y alto de botón porque es lo único que se toca de cerrado. */
.pendientes-plegado > summary {
  color: var(--mal);
  font-size: 0.9rem;
  cursor: pointer;
  min-height: 2rem;
  display: flex;
  align-items: center;
  list-style: none;
}

.pendientes-plegado > summary::-webkit-details-marker {
  display: none;
}

.pendientes-plegado > summary::after {
  content: " ▾";
}

.pendientes-plegado[open] > summary::after {
  content: " ▴";
}

.pendientes-plegado[open] > summary {
  margin-bottom: 0.4rem;
}

.amarillo-bloque {
  background: var(--acento-capa-suave);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}

.amarillo-bloque h3 {
  margin: 0.2rem 0;
  font-size: 0.85rem;
  color: var(--amarillo);
}

/* El bloque de carga con lo apuntado a mano para ese viaje. Va arriba del todo
   y con el fondo de los apuntes: es lo que no está en la lista de siempre. */
.bloque-apuntado {
  background: var(--acento-capa-suave);
  border-radius: 8px;
  padding: 0.25rem 1rem 0.5rem 1rem;
}

.bloque-apuntado .bloque-cabecera h3 {
  color: var(--amarillo);
}

/* El botón que abre el resumen del día, en el paso de cierre. */
.boton-resumen {
  display: block;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  background: var(--capa-alta);
  color: var(--texto);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  margin: 0.5rem 0;
}

/* El resumen del día: solo se lee, así que las líneas no llevan check ni el
   alto de un botón. Lo hecho se marca en verde, como en el reparto. */
.resumen-paradas li {
  list-style: none;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--linea);
}

.resumen-paradas li.hecho {
  color: var(--bien);
}

.resumen-lleva {
  color: var(--amarillo);
  font-size: 0.85rem;
  margin-left: 1.6rem;
}

.resumen-cuenta {
  color: var(--texto-3);
  font-size: 0.85rem;
}

.resumen-viaje {
  margin: 1rem 0 0.25rem 0;
  font-size: 0.95rem;
  color: var(--texto-2);
}

/* Barra de arriba del reparto: día simulado y acceso a los apuntes. */
.barra-dia {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.barra-dia button {
  flex: 1;
}

#selector-dia label.dia-activo {
  background: var(--acento-capa);
  border-color: var(--amarillo);
  color: var(--amarillo);
}

/* Una línea de apunte: el QUÉ a la izquierda y la CANTIDAD a la derecha, con
   − y + grandes. Empieza en 0, que es lo normal; cuando pasa de 0 se resalta
   para que salte a la vista lo que sí hay que llevar. */
.linea {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--linea);
}

.linea-que {
  flex: 1;
  color: var(--texto-3);
}

.linea-pedida .linea-que {
  color: var(--amarillo);
  font-weight: 600;
}

.linea-cantidad {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.linea-cantidad button {
  width: 52px;
  min-height: 48px;
  font-size: 1.4rem;
  padding: 0;
}

.cantidad {
  min-width: 68px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
}

.linea-pedida .cantidad {
  color: var(--amarillo);
}

.nuevo-cantidad {
  justify-content: center;
  flex-basis: 100%;
}

.apunte-acciones {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.que-nuevo {
  flex: 1;
  min-width: 160px;
  font: inherit;
  font-size: 1rem;
  text-transform: uppercase;
  padding: 0.65rem;
  min-height: 44px;
}

h2.seccion {
  margin-top: 1.5rem;
}

.dia-historial {
  background: var(--capa);
  border-radius: 8px;
  padding: 0.5rem 1rem 0.75rem;
  margin-bottom: 0.75rem;
}

.dia-historial h2 {
  margin-top: 0.5rem;
}

.dia-historial ul {
  margin: 0;
  padding-left: 1.2rem;
}

.dia-historial li {
  padding: 0.2rem 0;
}

.dia-historial em {
  color: var(--amarillo);
  font-style: normal;
}

/* Apuntes: chips de lo que suele pedir cada uno, para no teclear. */
.apunte {
  background: var(--capa);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

.apunte h2 {
  margin-top: 0;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.chip {
  flex: 1 1 auto;
  min-width: 120px;
}

.chip-activo {
  background: var(--acento-capa);
  border-color: var(--amarillo);
  color: var(--amarillo);
}

.apunte-texto {
  font: inherit;
  font-size: 1rem;
  text-transform: uppercase;
  width: 100%;
  padding: 0.65rem;
  min-height: 44px;
  margin-bottom: 0.5rem;
}

.apunte-nada {
  width: 100%;
}

.apunte-estado {
  margin: 0.3rem 0;
  font-size: 0.9rem;
}

.apunte-ok {
  color: var(--bien);
}

.apunte-falta {
  color: var(--mal);
}

/* Lo apuntado de un cliente, al lado de su parada en el viaje. */
.apunte-parada {
  color: var(--amarillo);
  font-size: 0.85rem;
  margin-left: 1.6rem;
}

/* Selector de fecha: atajos para lo de casi siempre y calendario para el
   resto, con la fecha escrita debajo ("lunes 17 de agosto"). */
.fecha-barra {
  margin-bottom: 1rem;
}

.fecha-atajos {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.fecha-input {
  font: inherit;
  font-size: 1rem;
  width: 100%;
  padding: 0.65rem;
  min-height: 44px;
}

.fecha-texto {
  margin: 0.4rem 0 0 0;
  color: var(--amarillo);
  font-weight: 600;
}

.pendiente-apunte {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--mal);
}

/* Los números se teclean: las cantidades de Machado (bollas, baguettes) las
   apunta uno directamente, no a base de dar a +. Campo grande, teclado
   numérico en el móvil. */
.cantidad-input {
  width: 96px;
  min-height: 48px;
  font: inherit;
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
  padding: 0.3rem;
  background: var(--capa-honda);
  color: var(--texto);
  border: 2px solid var(--linea-fuerte);
  border-radius: 8px;
}

.linea-pedida .cantidad-input {
  border-color: var(--amarillo);
  color: var(--amarillo);
}

.linea-unidad {
  color: var(--texto-4);
  min-width: 28px;
}

/* Llevo / no llevo: lo que siempre es la misma cantidad (la harina del Durán,
   5 kg) no tiene número que apuntar. Botón entero, no una casilla pequeña. */
.linea-simple {
  flex-wrap: wrap;
}

.boton-lleva {
  flex: 1;
  min-width: 200px;
  min-height: 56px;
  text-align: left;
  font-size: 1rem;
  background: var(--capa);
  border: 2px solid var(--linea-fuerte);
}

.boton-lleva.lleva-si {
  background: var(--acento-capa);
  border-color: var(--amarillo);
  color: var(--amarillo);
}

/* El peso del tupper de azúcar: se apunta después, cuando se pesa. */
.linea-peso {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* MODO TÉCNICO */
.campo {
  display: block;
  margin: 0.75rem 0 0.25rem;
  color: var(--texto-3);
  font-size: 0.85rem;
}

.campo input,
.campo select {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  margin-bottom: 0;
  font-size: 1rem;
  color: var(--texto);
}

.campo input {
  background: var(--capa-honda);
  border: 2px solid var(--linea-fuerte);
  border-radius: 8px;
  min-height: 48px;
  padding: 0.5rem;
  font-family: inherit;
  text-transform: uppercase;
}

.fila-que {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--linea);
}

.fila-que select {
  margin-bottom: 0;
  min-height: 44px;
  flex: 1;
  min-width: 180px;
}

.que-corto {
  width: 130px;
  font: inherit;
  font-size: 0.95rem;
  text-transform: uppercase;
  padding: 0.5rem;
  min-height: 44px;
  background: var(--capa-honda);
  color: var(--texto);
  border: 2px solid var(--linea-fuerte);
  border-radius: 8px;
}

.plantilla h3 {
  margin: 1rem 0 0.25rem;
  font-size: 0.9rem;
  color: var(--amarillo);
}

.que-largo {
  width: 100%;
  flex-basis: 100%;
  font-size: 1rem;
}

/* MODO TÉCNICO — la lista del reparto.
   Cada fila se abre al tocarla y enseña sus opciones; cerrada solo se ve el
   qué y en qué días sale. Con casi cien filas, tenerlas todas abiertas sería
   ilegible en el móvil. */
.grupo-cabecera {
  margin: 1.2rem 0 0.4rem;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--texto-4);
}

.fila-reparto {
  border: 1px solid var(--linea);
  border-radius: 8px;
  margin-bottom: 0.4rem;
  overflow: hidden;
}

.fila-reparto.abierta {
  border-color: var(--amarillo);
}

.fila-cabecera {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 0.9rem;
  text-align: left;
  background: var(--capa);
  border: 0;
  color: inherit;
  font: inherit;
}

.fila-texto {
  display: block;
}

.fila-dias {
  display: block;
  margin-top: 0.2rem;
  font-family: ui-monospace, monospace;
  letter-spacing: 0.15em;
  font-size: 0.8rem;
  color: var(--texto-4);
}

.fila-detalle {
  padding: 0.6rem 0.9rem 0.9rem;
  border-top: 1px solid var(--linea);
}

/* Los siete días, en bloque y a lo ancho: son botones de dedo, no casillas. */
.dias-toggle {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 0.3rem;
}

.dia-btn {
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: var(--capa);
  color: var(--texto-4);
  font: inherit;
  font-weight: 700;
}

.dia-on {
  background: var(--amarillo);
  border-color: var(--amarillo);
  color: #1a1a1a;
}

.nombres-viaje {
  margin-bottom: 0.6rem;
}

/* LA PUERTA — tapa la web entera hasta que esté instalada y con los avisos
   activados. Ver public/gate.js. */
body.con-puerta {
  overflow: hidden;
}

#puerta {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--capa-honda);
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.puerta-caja {
  max-width: 26rem;
  width: 100%;
  text-align: center;
}

.puerta-icono {
  font-size: 3.5rem;
  line-height: 1;
  margin-bottom: 0.75rem;
}

.puerta-caja h2 {
  color: var(--amarillo);
  margin: 0 0 1rem;
  font-size: 1.4rem;
}

.puerta-caja p {
  color: var(--texto-2);
  line-height: 1.5;
  margin: 0 0 1rem;
}

.puerta-nota {
  color: var(--texto-4);
  font-size: 0.9rem;
}

.puerta-pasos {
  text-align: left;
  color: var(--texto-2);
  line-height: 1.6;
  margin: 0 0 1.25rem;
  padding-left: 1.5rem;
}

.puerta-pasos li {
  margin-bottom: 0.6rem;
}

.puerta-pasos b {
  color: var(--amarillo);
}

.puerta-caja .boton-grande {
  width: 100%;
  margin-top: 0.5rem;
}

/* Probar los avisos (alarmas.html) */
.probar-avisos {
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.probar-avisos h2 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  color: var(--amarillo);
}

.botones-prueba {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin: 0.75rem 0;
}

.botones-prueba button {
  min-height: 44px;
  width: 100%;
}

/* Apuntar: la hora de aviso, y las paradas metidas por un apunte */
.linea-avisar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  color: var(--texto-2);
}

.linea-avisar input[type="time"] {
  flex: 1;
}

/* Una parada que no está en la ruta fija: la puso un apunte y es solo de hoy. */
li.parada-apuntada > label {
  border-left: 3px solid var(--amarillo);
  padding-left: 0.6rem;
}

/* Cada vez que se le pregunta a un cliente fijo (Técnico) */
.momento {
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
}

.momento .boton-borrar {
  width: 100%;
  min-height: 44px;
  margin-top: 0.5rem;
}

/* El aviso que sale debajo del botón de la puerta: el camino a mano cuando el
   navegador no ofrece el botón, o el "ya está, ábrela desde su icono". */
.puerta-pista {
  background: var(--capa);
  border-left: 3px solid var(--amarillo);
  border-radius: 6px;
  padding: 0.75rem;
  text-align: left;
  color: var(--texto-2);
  line-height: 1.5;
}

.puerta-pista b {
  color: var(--amarillo);
}

.puerta-caja .boton-enlace {
  width: 100%;
  min-height: 44px;
  margin-top: 0.75rem;
}

/* La pantalla de entrar (login.html). Reaprovecha la caja de la puerta, pero
   el campo de la contraseña tiene que ser tan grande como el botón: se teclea
   con el dedo y muchas veces con la furgo parada un momento. */
#form-entrar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#form-entrar input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  font-size: 1.1rem;
  text-align: center;
  /* La contraseña es lo único de la web que NO va en mayúsculas: se escribe
     tal cual, y convertirla engañaría sobre lo que se está tecleando. */
  text-transform: none;
  color: var(--texto);
  background: var(--capa);
  border: 1px solid var(--linea-fuerte);
  border-radius: 8px;
}

#form-entrar input[type="password"]:focus {
  outline: none;
  border-color: var(--amarillo);
}

#form-entrar .boton-grande {
  width: 100%;
  margin: 0;
}

/* Los bloques que se abren en Técnico. Con cien filas, verlas todas de golpe
   es scroll y nada más. La cabecera es el botón: toda ella, no una flechita. */
.grupo-plegable {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: var(--alto-boton);
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  text-align: left;
  color: var(--amarillo);
  background: var(--capa);
  border: 1px solid var(--linea);
  border-radius: 10px;
  font: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.grupo-plegable.grupo-abierto {
  border-color: var(--amarillo);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.grupo-flecha {
  flex: none;
  width: 1rem;
}

/* Cuántas filas hay dentro, para saber si merece la pena abrirlo. */
.grupo-cuantas {
  flex: none;
  margin-left: auto;
  padding: 0.15rem 0.5rem;
  color: var(--texto-4);
  background: var(--capa-honda);
  border-radius: 999px;
  font-size: 0.85rem;
}

.grupo-cuerpo {
  border: 1px solid var(--amarillo);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  padding: 0.5rem;
}

/* Los deslizadores de "Cómo se ve": el pulgar tiene que ser de dedo, no de
   ratón. */
input[type="range"] {
  width: 100%;
  height: 2.5rem;
  accent-color: var(--amarillo);
}

input[type="color"] {
  width: 100%;
  height: 3rem;
  padding: 0.25rem;
  background: var(--capa);
  border: 1px solid var(--linea-fuerte);
  border-radius: 8px;
}

/* Que el alto de botón que se elija mande de verdad. */
.boton-grande,
.boton-lleva {
  min-height: var(--alto-boton);
}

/* Técnico: el submenú de secciones. Antes todo iba seguido en una página muy
   larga y llegar al final era bajar y bajar; ahora solo se ve la sección
   elegida, y la barra de arriba se queda pegada para saltar a otra. */
.submenu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1rem 0;
  padding: 0.5rem 0;
  position: sticky;
  top: 0;
  background: var(--capa-honda);
  z-index: 2;
}

.submenu .chip {
  min-width: 0;
  flex: 0 0 auto;
  padding: 0.5rem 0.6rem;
  font-size: 0.95rem;
}

/* En el móvil las ocho secciones en varias filas se comerían un cuarto de la
   pantalla, y la barra va pegada arriba todo el rato. En una sola fila que se
   arrastra de lado ocupa lo que ocupa un botón. */
@media (max-width: 600px) {
  .submenu {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .submenu::-webkit-scrollbar {
    display: none;
  }
}

/* Lo que se le deja a cada casa, debajo de su nombre en el viaje. Antes esto
   no estaba en ninguna parte: el pan de las casas se cargaba como un bulto
   ("12 N, 2 B, 6 C") y cuánto llevaba cada una había que sabérselo. */
.lleva {
  color: var(--texto-3);
  font-size: 0.9em;
  margin: 0.15rem 0 0 1.9rem;
}

/* LO QUE LLEVA UNA PARADA, PLEGADO CUANDO SON MUCHAS COSAS.
   El tirador es lo único que se ve de cerrado, así que se toca con la furgo
   parada y de un dedo: alto de botón y no un renglón de texto. */
.lleva-plegado {
  margin: 0.15rem 0 0 1.9rem;
}

.lleva-plegado > summary {
  color: var(--amarillo, #f2b90c);
  font-size: 0.9em;
  cursor: pointer;
  padding: 0.35rem 0;
  min-height: 2rem;
  display: flex;
  align-items: center;
  list-style: none;
}

.lleva-plegado > summary::-webkit-details-marker {
  display: none;
}

/* La flecha la pone el CSS y no el texto: así dice sola si está abierto o
   cerrado, sin repintar nada. */
.lleva-plegado > summary::after {
  content: " ▾";
}

.lleva-plegado[open] > summary::after {
  content: " ▴";
}

.lleva-plegado[open] > summary {
  color: var(--texto-3);
}

/* Abierta, la lista va con el mismo gris de siempre y sin el margen de
   `.lleva`, que ya lo pone el propio desplegable. */
.lleva-plegado > ul.lleva {
  margin: 0;
  padding-left: 1.1rem;
}

.lleva-plegado > ul.lleva > li {
  margin: 0.15rem 0;
}

/* Las tres columnas del Excel (N, B, C) en la ficha de una parada. Van en fila
   y estrechas: son números de un dígito, y puestas una debajo de otra la ficha
   se hacía el doble de larga. */
.piezas {
  display: flex;
  gap: 0.5rem;
  margin: 0.35rem 0;
}

.pieza {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.85rem;
  color: var(--texto-3);
}

.pieza input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 0.5rem;
  min-height: 44px;
  text-align: center;
}

/* Cada fecha marcada como festivo, con su botón de quitar y las excepciones
   de ese día ("la Sede abre igual") debajo. */
.festivo {
  background: var(--capa);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.6rem;
}

.festivo-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* Resumen: el calendario para ver el de otro día. Solo se pueden tocar los
   días con algo apuntado (y hoy); los demás salen apagados, que así se ve de
   un vistazo qué días hay. */
.fecha-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  position: relative;
}

.boton-fecha {
  flex: 1 1 auto;
  text-align: left;
  text-transform: none;
}

.fecha-barra .chip {
  flex: 0 0 auto;
  min-width: 0;
}

.calendario {
  flex: 1 1 100%;
  background: var(--capa);
  border: 1px solid var(--linea-fuerte);
  border-radius: 8px;
  padding: 0.5rem;
  max-width: 24rem;
}

.cal-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.cal-titulo {
  color: var(--amarillo);
  font-weight: 600;
}

.cal-flecha {
  min-width: 44px;
  padding: 0.4rem 0.8rem;
  font-size: 1.3rem;
  line-height: 1;
}

.cal-flecha:disabled {
  opacity: 0.25;
  cursor: default;
}

.cal-semana,
.cal-dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}

.cal-semana span {
  text-align: center;
  color: var(--texto-4);
  font-size: 0.8rem;
  padding: 0.2rem 0;
}

.cal-dia {
  padding: 0;
  min-height: 44px;
  font-weight: 400;
  background: transparent;
  border-color: transparent;
  color: var(--texto-4);
}

.cal-dia:disabled {
  cursor: default;
}

.cal-dia:disabled:hover {
  background: transparent;
}

/* Los que tienen algo: son los que se pueden tocar. */
.cal-dia.cal-con-info {
  background: var(--capa-alta);
  border-color: var(--linea-fuerte);
  color: var(--texto);
  font-weight: 600;
}

.cal-dia.cal-hoy {
  border-color: var(--amarillo);
  color: var(--texto);
}

.cal-dia.cal-elegido {
  background: var(--acento-capa);
  border-color: var(--amarillo);
  color: var(--amarillo);
}

/* Un añadido de "y además": lo que una parada lleva solo algunos días. Va
   recuadrado porque son varios campos que forman una sola cosa, y puede haber
   más de uno seguidos en la misma fila. */
.ademas {
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 0.6rem;
  margin: 0.5rem 0;
  background: var(--capa-honda);
}

/* El aviso de un día marcado en la línea que la parada no sale: la línea está
   escrita y parece puesta, y lo que pasa es que no se mira nunca. Va en
   amarillo y dentro del propio recuadro, donde se acaba de escribir. */
.sin-salida {
  color: var(--amarillo, #f2b90c);
  font-size: 0.85rem;
  margin: 0.4rem 0 0;
}

.sin-salida button {
  font: inherit;
  margin-left: 0.3rem;
  padding: 0.2rem 0.5rem;
  min-height: 0;
}

.ademas input[data-campo="l-extra"] {
  width: 100%;
  font: inherit;
  padding: 0.5rem;
  min-height: 44px;
  margin-top: 0.35rem;
}

/* Los atajos de una tira de días: todos, ninguno, entre semana, finde. Van
   pequeños y debajo, que son la ayuda y no lo principal. */
.dias-atajos {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.dias-atajos button {
  font: inherit;
  font-size: 0.8rem;
  padding: 0.25rem 0.6rem;
  min-height: 0;
  background: var(--capa);
  border: 1px solid var(--linea);
  border-radius: 999px;
  color: var(--texto-3);
}

.dias-atajos button.dia-on {
  background: var(--acento-capa);
  border-color: var(--amarillo);
  color: var(--amarillo);
}

/* Buscar una fila entre cien. Va pegada arriba para no perderla al bajar. */
.buscar {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 0.6rem;
  min-height: 44px;
  margin-bottom: 0.6rem;
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Cómo queda el día: listas de solo lectura, sin botones ni checks. */
.previa-lista {
  margin: 0.3rem 0 0.8rem;
  padding-left: 1.2rem;
}

.previa-lista li {
  margin: 0.2rem 0;
}

.previa-lleva {
  color: var(--amarillo);
}

/* TRAER LO QUE FALTE DE FÁBRICA.
   Cada hueco es una tarjeta con su casilla: la casilla manda —solo se trae lo
   marcado— y debajo, en pequeño, qué va a pasar exactamente. */
h3.seccion-menor {
  margin: 1.6rem 0 0.4rem;
  font-size: 1.05rem;
  color: var(--amarillo);
}

.falta-fila {
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 0.6rem;
  margin: 0.5rem 0;
  background: var(--capa-honda);
}

.falta-fila label {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  cursor: pointer;
}

.falta-fila input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin: 0;
  flex: none;
}

.falta-titulo {
  font-weight: bold;
}

.falta-fila .ayuda {
  margin: 0.35rem 0 0 2.1rem;
}

.falta-mano {
  border-left: 3px solid var(--amarillo);
  padding-left: 0.7rem;
  margin: 0.8rem 0;
}

/* MIS DÍAS — el calendario de cuándo se trabaja.
   Rejilla de siete columnas, y cada día un botón de dedo: se toca en la furgo
   y con guantes, así que ninguno baja de 44 px. */
.mes-mandos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.mes-mandos h2 {
  margin: 0;
  text-align: center;
  flex: 1;
}

.mes-mandos button {
  min-width: 56px;
}

.calendario-cabecera,
.calendario {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendario-cabecera {
  margin: 0.6rem 0 0.2rem;
  text-align: center;
  color: var(--texto-4);
  font-size: 0.85rem;
}

.dia-mes {
  min-height: 44px;
  padding: 0;
  font: inherit;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--capa-honda);
  color: var(--texto-4);
}

/* Un día marcado se ve de un vistazo, que es para lo que está el calendario. */
.dia-trabajo {
  background: var(--amarillo);
  border-color: var(--amarillo);
  color: #1a1a1a;
  font-weight: bold;
}

/* Y medio día, medio pintado: la mitad de abajo amarilla. Se ve de lejos que
   no es un día entero sin tener que leer nada. */
.dia-medio {
  background: linear-gradient(to bottom, var(--capa-honda) 50%, var(--amarillo) 50%);
  border-color: var(--amarillo);
  color: var(--amarillo);
  font-weight: bold;
}

/* El festivo lleva su propio borde: viene de los festivos de Técnico y no de
   haberlo marcado aquí, y conviene poder distinguirlo. */
.dia-festivo {
  border-color: var(--festivo);
  border-width: 2px;
}

/* Y el que se decidió a mano lleva un punto: es el que uno puede querer
   deshacer, y sin marca no se distingue de un domingo. */
.dia-mano::after {
  content: "•";
  display: block;
  line-height: 0.5;
  font-size: 1.1rem;
}

.dia-hoy {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

.dia-hueco {
  min-height: 44px;
}

.cuenta-linea {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--linea);
}

.cuenta-total {
  border-bottom: none;
  border-top: 2px solid var(--linea-fuerte);
  font-weight: bold;
  font-size: 1.15rem;
}

.cuenta-aviso {
  color: var(--festivo);
}

.campos-sueldo {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.campos-sueldo .campo {
  flex: 1;
  min-width: 140px;
}

/* Hoy no toca: la portada lo dice antes que nada, porque es lo primero que uno
   quiere saber al abrirla a las seis de la mañana. */
.hoy-libre {
  border: 1px solid var(--linea-fuerte);
  border-left: 4px solid var(--amarillo);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.8rem;
  background: var(--capa-honda);
}

.hoy-libre p {
  margin: 0.2rem 0 0;
  color: var(--texto-4);
  font-size: 0.9rem;
}

/* LA HOJA — el reparto entero en una tabla.
   Es la única pantalla que se sale de los 700px de siempre: las demás se leen
   con una mano y la furgo en marcha, y esta es de sentarse a cotejar. En el
   móvil no cambia nada —el ancho manda sobre el máximo—. */
main.ancho,
main:has(.panel.ancho:not([hidden])) {
  max-width: 1100px;
}

/*
   La pantalla del móvil no da para trece columnas, así que la tabla se
   desplaza a lo ancho dentro de su caja y la cabecera se queda pegada arriba:
   sin eso, a la fila sesenta ya no se sabe qué columna es cuál. */
.hoja-mandos {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 0.6rem;
}

.hoja-mandos .campo {
  flex: 1;
  min-width: 140px;
}

.hoja-scroll {
  overflow-x: auto;
  border: 1px solid var(--linea);
  border-radius: 8px;
}

.hoja-tabla {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.85rem;
}

.hoja-tabla th,
.hoja-tabla td {
  padding: 0.3rem 0.45rem;
  border-bottom: 1px solid var(--linea);
  text-align: left;
  vertical-align: top;
}

.hoja-tabla thead th {
  position: sticky;
  top: 0;
  background: var(--capa);
  color: var(--amarillo);
  white-space: nowrap;
  z-index: 1;
}

.hoja-grupo th {
  background: var(--capa);
  color: var(--texto-2);
  position: sticky;
  top: 1.9rem;
}

.hoja-grupo small {
  color: var(--texto-4);
  font-weight: normal;
}

.hoja-i {
  color: var(--texto-4);
  text-align: right;
}

.hoja-texto {
  min-width: 12rem;
}

.hoja-extra {
  color: var(--texto-3);
  min-width: 10rem;
}

/* Los días marcados llevan su letra y los que no, nada: una columna con
   huecos se lee de un vistazo, y una de sí/no hay que ir leyéndola. */
.hoja-dia {
  width: 1.4rem;
  text-align: center;
  color: var(--texto-4);
}

.hoja-dia-si {
  color: var(--amarillo);
  font-weight: bold;
}

.hoja-num {
  text-align: right;
  width: 2.2rem;
  font-variant-numeric: tabular-nums;
}

.hoja-auto {
  color: var(--texto-4);
  font-size: 0.8rem;
  white-space: nowrap;
}

.hoja-ademas {
  color: var(--texto-4);
  font-size: 0.8rem;
}

/* Lo que se carga no es una parada: se distingue por el fondo, que si no la
   hoja parece una lista de sitios con cosas raras en medio. */
.hoja-cargar {
  background: var(--capa);
}

.hoja-nota .hoja-texto {
  color: var(--texto-4);
  font-style: italic;
}

.hoja-total td {
  border-top: 2px solid var(--linea-fuerte);
  font-weight: bold;
  background: var(--capa);
}

.hoja-copia {
  width: 100%;
  font-family: monospace;
  font-size: 0.75rem;
}

/* Lo que una fila hace en festivo se dice SIEMPRE, aunque se esté mirando un
   martes normal: es justo lo que no se puede ver en el Excel ni recordar. */
.hoja-marca {
  color: var(--amarillo);
  font-size: 0.8rem;
}

/* Mirando el festivo, la fila que ese día no sale se apaga en vez de
   desaparecer: que algo no salga es de lo que se viene a comprobar, y una
   fila que falta no se ve. */
.hoja-fuera {
  opacity: 0.45;
}

.campo-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}


/* ─── LO QUE NO SE USA TODOS LOS DÍAS, PLEGADO ─────────────────────────────
   Al abrir una parada salían dieciocho controles de golpe y lo de diario
   quedaba enterrado entre los festivos, las vacaciones y los avisos. Ahora eso
   va cerrado, y la cabecera dice si tiene algo puesto: plegar no puede
   convertirse en esconder. */
.plegable {
  border: 1px solid var(--linea);
  border-radius: 8px;
  margin: 0.5rem 0;
  overflow: hidden;
}
.plegable-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.8rem;
  text-align: left;
  background: var(--capa);
  border: 0;
  color: inherit;
  font: inherit;
}
.plegable.abierta .plegable-cabecera {
  border-bottom: 1px solid var(--linea);
}
.plegable > *:not(.plegable-cabecera) {
  padding: 0 0.8rem;
}
.plegable > *:last-child:not(.plegable-cabecera) {
  padding-bottom: 0.8rem;
}
.plegable-estado {
  flex: none;
  color: var(--texto-4);
  font-size: 0.85em;
}
/* Una sección con algo puesto se ve estando cerrada: si no, plegarla sería
   esconder que esa parada tiene vacaciones o un aviso. */
.plegable-puesta {
  color: var(--amarillo, #f2b90c);
}

/* La ayuda deja de estar siempre abierta. Los textos son buenos, pero seis
   párrafos en cada parada tapan lo que uno viene a hacer. */
.ayuda-plegada {
  margin: 0.3rem 0 0.8rem;
}
.ayuda-plegada > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: 50%;
  color: var(--texto-3);
  cursor: pointer;
  list-style: none;
}
.ayuda-plegada > summary::-webkit-details-marker {
  display: none;
}
.ayuda-plegada[open] > summary {
  margin-bottom: 0.4rem;
}
.ayuda-plegada .ayuda {
  margin-bottom: 0;
}

/* ─── LO QUE NO CUADRA ─────────────────────────────────────────────────────
   "No hay entregas sin carga" es la regla. Cuando algo se sale de ella, se
   dice arriba del todo de la vista previa y se ve: el fallo que esto caza no
   se nota mirando la pantalla —la parada está y lo que lleva está—, se nota a
   las siete de la mañana en el Trigal, cuando no lo has cargado. */
.descuadres {
  border: 1px solid var(--amarillo, #f2b90c);
  border-radius: 8px;
  padding: 0.2rem 0.8rem 0.6rem;
  margin-bottom: 1rem;
}
.descuadres > .seccion {
  color: var(--amarillo, #f2b90c);
}

/* LO DE LAS CASAS, ARRIBA DEL TODO EN LA CARGA.
   Es lo único que se mira repartiendo: el pan de las casas y el saco de los
   encargos. La cuenta del pan en grande y en amarillo, que se lea con el
   móvil en la mano y sin pararse; el saco, apretado para que quepa entero
   sin bajar. */
.lo-de-las-casas {
  border: 2px solid var(--amarillo);
  padding: 0.6rem 0.9rem 0.4rem 0.9rem;
}

.lo-de-las-casas h3 {
  margin: 0 0 0.2rem 0;
  font-size: 0.95rem;
  color: var(--amarillo);
}

.lo-de-las-casas ul {
  padding-left: 0;
}

.casas-pan label > span {
  display: flex;
  flex-direction: column;
}

.casas-pan small {
  color: var(--texto-3);
  font-size: 0.8rem;
}

.casas-pan strong {
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--amarillo);
}

.casas-pan li.hecho strong {
  color: inherit;
}

.casas-saco {
  margin-top: 0.4rem;
}

.casas-saco button {
  min-height: 2.4rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
}

.lo-de-las-casas .casas-saco li {
  padding: 0;
  font-size: 0.85rem;
  letter-spacing: 0;
  line-height: 1.2;
}

.lo-de-las-casas .casas-saco li label {
  min-height: 2.1rem;
}

.casas-saco > button {
  display: block;
  width: 100%;
  margin: 0.3rem 0 0.2rem 0;
}

.lo-de-las-casas li:last-child {
  border-bottom: 0;
}

/* LO QUE NO SE MIRA, PLEGADO.
   Los avisos del día, lo apuntado y cada bloque del resto de la carga. Lo
   único que se ve cerrado es el tirador, así que va con alto de botón y
   diciendo cuánto hay dentro: cerrado no se esconde nada. */
.plegable,
.bloque-plegado {
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 0 0.9rem;
  margin-bottom: 0.5rem;
}

.plegable > summary,
.bloque-plegado > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  font-size: 0.9rem;
  color: var(--texto-2);
  cursor: pointer;
  list-style: none;
}

.plegable > summary::-webkit-details-marker,
.bloque-plegado > summary::-webkit-details-marker {
  display: none;
}

.plegable > summary::after,
.bloque-plegado > summary::after {
  content: "▾";
  color: var(--texto-4);
}

.plegable[open] > summary::after,
.bloque-plegado[open] > summary::after {
  content: "▴";
}

.plegable-notas > summary {
  color: var(--mal);
}

.plegable-notas .notas-dia {
  margin: 0 0 0.6rem 0;
}

.plegable.amarillo-bloque > summary {
  color: var(--amarillo);
}

/* La cuenta va pegada a la flecha, a la derecha del nombre del bloque. */
.bloque-plegado > summary > span:first-child {
  flex: 1;
}

.bloque-cuenta {
  color: var(--texto-4);
  font-size: 0.85rem;
}

.bloque-plegado > .bloque-cabecera {
  justify-content: flex-end;
}

.bloque-plegado.bloque-apuntado > summary {
  color: var(--amarillo);
}

.resto-de-la-carga {
  margin: 0.25rem 0 0.5rem 0;
  font-size: 0.85rem;
  color: var(--texto-4);
}

/* ------------------------------------------------------------------
   La piel: noche de ciudad. Va al final a propósito: solo cambia cómo
   se ve -fondo, cristal, brillo, iconos-, nunca dónde está cada cosa ni
   qué hace. Si algún día se quita este bloque, la web sigue entera.
   ------------------------------------------------------------------ */

html {
  background: var(--noche);
  color-scheme: dark;
  accent-color: var(--amarillo);
}

body {
  min-height: 100vh;
  background: transparent;
  font-family: "Segoe UI Variable Display", "SF Pro Display", Roboto, system-ui, sans-serif;
  letter-spacing: 0.035em;
  -webkit-tap-highlight-color: transparent;
}

/* El fondo va en una capa fija aparte y no en el body: así no se mueve al
   hacer scroll ni se repite en las páginas largas. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 60% at 50% 35%, rgba(7, 10, 22, 0.05), rgba(7, 10, 22, 0.6) 75%),
    linear-gradient(to bottom, rgba(7, 10, 22, 0.55), rgba(7, 10, 22, 0.15) 45%, rgba(7, 10, 22, 0.85)),
    url("/fondo.jpg") center 30% / cover no-repeat,
    var(--noche);
}

/* En las pantallas de trabajo (todas menos el inicio) el fondo se apaga más,
   que ahí se lee mucho y deprisa. */
body:not(:has(.header-inicio, #form-entrar))::before {
  background:
    linear-gradient(to bottom, rgba(7, 10, 22, 0.78), rgba(7, 10, 22, 0.95)),
    url("/fondo.jpg") center 30% / cover no-repeat,
    var(--noche);
  filter: blur(3px);
  transform: scale(1.04);
}

header {
  position: sticky;
  top: 0;
  z-index: 50;
  align-items: center;
  background: rgba(7, 10, 22, 0.62);
  backdrop-filter: var(--cristal);
  -webkit-backdrop-filter: var(--cristal);
  border-bottom: 1px solid var(--linea);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 30px rgba(0, 0, 0, 0.35);
}

header h1 {
  color: var(--texto);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-shadow: 0 0 18px color-mix(in srgb, var(--magenta) 45%, transparent);
}

.header-inicio {
  position: static;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding-top: 2.6rem;
}

.header-inicio h1 {
  font-size: 1.6rem;
  margin: 0;
}

nav a {
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

nav a.activo {
  background: var(--acento-capa);
  border-color: color-mix(in srgb, var(--amarillo) 45%, transparent);
  color: var(--texto);
}

h2 {
  font-weight: 800;
  letter-spacing: 0.07em;
  background: var(--degradado);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  width: fit-content;
}

/* Cristal: las cajas grandes */
.tramo,
.chooser,
.apunte,
.dia-historial,
.festivo,
.calendario,
.bloque-plegado,
.plegable,
.grupo-plegable,
.fila-reparto,
.pendientes,
.amarillo-bloque,
.lo-de-las-casas,
.hoy-libre,
.probar-avisos {
  backdrop-filter: var(--cristal);
  -webkit-backdrop-filter: var(--cristal);
  border-radius: var(--curva);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--sombra);
}

.tramo,
.chooser,
.apunte,
.dia-historial {
  border: 1px solid var(--linea);
}

/* Botones */
button,
.boton-grande,
.toggle-grupo label,
.chip {
  transition: transform 0.12s ease, background 0.2s, border-color 0.2s, box-shadow 0.25s;
}

button {
  border-radius: 12px;
  border-color: var(--linea-fuerte);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 14px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.05em;
}

button:hover {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07));
}

button:active,
.boton-grande:active,
.toggle-grupo label:active {
  transform: scale(0.97);
}

button:disabled {
  opacity: 0.4;
  box-shadow: none;
}

button.boton-borrar,
.lista-simple button {
  background: var(--peligro-capa);
  border-color: var(--peligro-linea);
}

.boton-enlace,
.boton-enlace:hover {
  background: none;
  box-shadow: none;
}

:focus-visible {
  outline: 2px solid var(--amarillo);
  outline-offset: 2px;
}

/* Los botones grandes del inicio */
.home-buttons {
  gap: 0.9rem;
  margin-top: 1.5rem;
}

.boton-grande {
  position: relative;
  overflow: hidden;
  background: rgba(14, 18, 36, 0.6);
  backdrop-filter: var(--cristal);
  -webkit-backdrop-filter: var(--cristal);
  border: 1px solid var(--linea-fuerte);
  border-radius: 18px;
  padding: 1.35rem 1.1rem;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--sombra);
}

.boton-grande:hover {
  background: rgba(24, 30, 56, 0.66);
}

.boton-grande small {
  color: var(--texto-3);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.boton-principal {
  color: var(--texto);
  background:
    linear-gradient(rgba(14, 16, 34, 0.55), rgba(14, 16, 34, 0.55)) padding-box,
    var(--degradado) border-box;
  border: 2px solid transparent;
  box-shadow: 0 0 26px color-mix(in srgb, var(--magenta) 30%, transparent),
    0 0 46px color-mix(in srgb, var(--amarillo) 18%, transparent), var(--sombra);
}

.boton-principal:hover {
  background:
    linear-gradient(rgba(24, 22, 48, 0.5), rgba(24, 22, 48, 0.5)) padding-box,
    var(--degradado) border-box;
}

/* Un barrido de luz lento sobre el botón principal: lo único que se mueve
   solo en toda la web, para que se vea dónde se empieza. */
.boton-principal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.13) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: barrido 5s ease-in-out 1.2s infinite;
  pointer-events: none;
}

@keyframes barrido {
  0%, 70% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .boton-principal::after { animation: none; }
}

/* Opciones tipo botón */
.toggle-grupo label {
  border-radius: 12px;
  border-color: var(--linea-fuerte);
}

.toggle-grupo label:has(input:checked),
.chip-activo,
.dia-on {
  box-shadow: var(--brillo);
}

/* Campos */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="time"],
input[type="date"],
input[type="search"],
textarea,
select {
  background: rgba(5, 8, 20, 0.7);
  color: var(--texto);
  border: 1px solid var(--linea-fuerte);
  border-radius: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--amarillo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amarillo) 25%, transparent);
}

select option {
  background: #10142a;
}

/* La barra de abajo que se queda pegada: cristal también */
.nav-paso {
  background: rgba(7, 10, 22, 0.7);
  backdrop-filter: var(--cristal);
  -webkit-backdrop-filter: var(--cristal);
  margin-left: -1rem;
  margin-right: -1rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--linea);
}

/* La pantalla de entrar */
#puerta {
  background: transparent;
}

.puerta-caja {
  background: rgba(12, 16, 34, 0.6);
  backdrop-filter: var(--cristal);
  -webkit-backdrop-filter: var(--cristal);
  border: 1px solid var(--linea-fuerte);
  border-radius: 22px;
  padding: 2rem 1.4rem;
  box-shadow: var(--sombra), 0 0 60px color-mix(in srgb, var(--violeta) 18%, transparent);
}

/* Iconos: piel.js cambia cada emoji conocido por un <span class="ico">
   que conserva el emoji como texto (para que lo sigan leyendo el
   JavaScript y quien copie) pero lo pinta con su PNG. */
.ico {
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  vertical-align: -0.3em;
  background: center / contain no-repeat;
  color: transparent;
  overflow: hidden;
  line-height: 1;
  text-align: center;
  user-select: all;
}

.boton-grande .ico {
  width: 2.1em;
  height: 2.1em;
  vertical-align: middle;
  margin-right: 0.45em;
}

.puerta-icono .ico {
  width: 1.5em;
  height: 1.5em;
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--magenta) 55%, transparent));
}

/* El emoji de dentro es transparente, pero su sombra no: sin esto sale un
   cuadrado oscuro detrás del icono en los títulos con brillo. */
.ico {
  text-shadow: none;
  -webkit-text-fill-color: transparent;
}

nav a {
  gap: 0.45em;
}