/* horario.cl. Idea: el letrero esmaltado que cuelga en la puerta de un local, y la franja de horas que todo local tiene pegada en el vidrio.
   Tres piezas se repiten en todo el sitio: el riel del que cuelga el letrero, la franja de 06 a 24 con su aguja, y la calle del pie.
   Medidas de Astra 4.14: contenido 1200 + 20 por lado, lectura 750, cortes 921 y 544. Espacios en escala de 4 px.
   Letra: Epilogue para títulos y horas, por su peso de rótulo pintado. Lexend para leer, porque cansa menos la vista. Nada bajo 15 px. */
@font-face {
  font-family: 'Lexend'; src: url('/fuentes/lexend-texto.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Epilogue'; src: url('/fuentes/epilogue-titulos.woff2') format('woff2');
  font-weight: 600 800; font-style: normal; font-display: swap;
}

:root {
  --contenido: 1200px; --margen: 20px; --lectura: 750px; --separacion: 40px;
  --t1: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); --t2: 1.5rem; --t3: 1.125rem; --t4: .9375rem;
  --r1: 8px; --r2: 12px; --r3: 16px;
  --titulos: 'Epilogue', 'Trebuchet MS', sans-serif;

  --letrero: #FFAE3B; --letrero-borde: #C9771A; --letrero-tinta: #2B1B2E; --crema: #FFF3E4;
  --riel: #2B1B2E; --riel-sombra: #1A0F1D; --riel-suave: #D9C7DD; --cuerda: #2B1B2E; --pie: #2B1B2E;
  --fondo: #FFF5EA; --muro: #FFE5C9; --superficie: #FFFFFF; --superficie-2: #FFF8F0; --pista: #F4E8DB; --marca-hora: #D9C6B3;
  --tinta: #2B1B2E; --tinta-2: #5D4A61; --linea: #EAD7C4; --enlace: #A33D08;
  --abierto: #0E6B3F; --abierto-fondo: #DCF3E5;
  --pronto: #7A4E00; --pronto-fondo: #FFEBC2;
  --cerrado: #55505C; --cerrado-fondo: #ECE7EE;
  --confirmar: #6B4A00; --confirmar-fondo: #FFF1C7;
  --ley: #6B2A63; --ley-fondo: #F4E2F1;
  --r-supermercados: #1F7A58; --r-tiendas: #9A5B00; --r-bancos: #2C5F8D; --r-publicos: #5E4FA2; --r-envios: #0E7283;
  --s1: 0 1px 2px rgba(43, 27, 46, .07);
  --s2: 0 1px 2px rgba(43, 27, 46, .08), 0 4px 10px -4px rgba(43, 27, 46, .10), 0 16px 28px -18px rgba(43, 27, 46, .26);
  --s3: 0 18px 30px -16px rgba(43, 27, 46, .42), 0 6px 12px -6px rgba(43, 27, 46, .2);
  color-scheme: light;
}
:root[data-tema='oscuro'] {
  --fondo: #1A1220; --muro: #241930; --superficie: #271C2E; --superficie-2: #2F2337; --pista: #3A2D43; --marca-hora: #57465F;
  --tinta: #F8EFE6; --tinta-2: #CFC1D4; --linea: #443650; --enlace: #FFB877;
  --riel: #120C17; --riel-sombra: #0A060D; --cuerda: #8B7A92;
  --abierto: #7BE2AC; --abierto-fondo: #17402C;
  --pronto: #FFD27A; --pronto-fondo: #4A3510;
  --cerrado: #D3CBD8; --cerrado-fondo: #3B3042;
  --confirmar: #FFDD8C; --confirmar-fondo: #453512;
  --ley: #F0B6E7; --ley-fondo: #4A2445;
  --r-supermercados: #5FD0A6; --r-tiendas: #F0B35C; --r-bancos: #8CBEEA; --r-publicos: #B9AEF0; --r-envios: #62CBD9;
  --s1: 0 1px 2px rgba(0, 0, 0, .4);
  --s2: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 10px -4px rgba(0, 0, 0, .4), 0 16px 28px -18px rgba(0, 0, 0, .7);
  --s3: 0 18px 30px -16px rgba(0, 0, 0, .8), 0 6px 12px -6px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    --fondo: #1A1220; --muro: #241930; --superficie: #271C2E; --superficie-2: #2F2337; --pista: #3A2D43; --marca-hora: #57465F;
    --tinta: #F8EFE6; --tinta-2: #CFC1D4; --linea: #443650; --enlace: #FFB877;
    --riel: #120C17; --riel-sombra: #0A060D; --cuerda: #8B7A92;
    --abierto: #7BE2AC; --abierto-fondo: #17402C;
    --pronto: #FFD27A; --pronto-fondo: #4A3510;
    --cerrado: #D3CBD8; --cerrado-fondo: #3B3042;
    --confirmar: #FFDD8C; --confirmar-fondo: #453512;
    --ley: #F0B6E7; --ley-fondo: #4A2445;
    --r-supermercados: #5FD0A6; --r-tiendas: #F0B35C; --r-bancos: #8CBEEA; --r-publicos: #B9AEF0; --r-envios: #62CBD9;
    --s1: 0 1px 2px rgba(0, 0, 0, .4);
    --s2: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 10px -4px rgba(0, 0, 0, .4), 0 16px 28px -18px rgba(0, 0, 0, .7);
    --s3: 0 18px 30px -16px rgba(0, 0, 0, .8), 0 6px 12px -6px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
@media (max-width: 544px) { :root { --margen: 16px; --separacion: 32px; --t2: 1.375rem; } }

/* Un color por rubro: lo leen la placa del título y la franja. */
[data-rubro='supermercados'] { --acento: var(--r-supermercados); }
[data-rubro='tiendas'] { --acento: var(--r-tiendas); }
[data-rubro='bancos'] { --acento: var(--r-bancos); }
[data-rubro='publicos'] { --acento: var(--r-publicos); }
[data-rubro='envios'] { --acento: var(--r-envios); }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
html[data-letra='grande'] { font-size: 112.5%; }
body {
  position: relative; margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--fondo); color: var(--tinta);
  font-family: 'Lexend', 'Trebuchet MS', sans-serif; font-weight: 350;
  font-size: clamp(1.0625rem, .875rem + 1.1vw, 1.125rem); line-height: 1.55;
}
/* El muro del que cuelga el letrero */
body::before { content: ''; position: absolute; inset: 0 0 auto; height: 204px; z-index: -1; background: var(--muro); border-bottom: 1px solid var(--linea); }
main { flex: 1; width: 100%; }
h1, h2, h3 { margin: 0; font-family: var(--titulos); font-weight: 700; line-height: 1.15; letter-spacing: -.015em; }
h2 { font-size: var(--t2); }
h3 { font-size: var(--t3); }
p { margin: 0 0 12px; }
a { color: var(--enlace); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
b { font-weight: 600; }
small { font-size: var(--t4); }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--enlace); outline-offset: 2px; border-radius: 4px; }

.contenedor { max-width: calc(var(--contenido) + 2 * var(--margen)); margin: 0 auto; padding: 0 var(--margen); width: 100%; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: 8px; top: -60px; background: var(--superficie); color: var(--tinta); padding: 8px 12px; z-index: 20; border-radius: var(--r1); }
.saltar:focus { top: 8px; }
.icono { width: 24px; height: 24px; flex: none; }
.icono-chico { width: 16px; height: 16px; margin-left: 4px; vertical-align: -2px; }

/* Cabecera: el riel */
.cabecera { position: relative; z-index: 2; background: var(--riel); color: var(--crema); box-shadow: 0 3px 0 var(--riel-sombra), 0 10px 16px -8px rgba(43, 27, 46, .55); }
.cabecera-fila { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.marca { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-family: var(--titulos); font-weight: 800; font-size: 1.375rem; letter-spacing: -.02em; }
.marca b { font-weight: 700; color: var(--letrero); }
.logo-letrero { width: 38px; height: 38px; color: var(--riel-suave); }
.menu { margin-left: auto; }
.menu ul { display: flex; gap: 4px; }
.menu a { position: relative; display: block; padding: 10px 12px; color: var(--crema); text-decoration: none; border-radius: var(--r1); font-size: 1rem; font-weight: 400; }
.menu a:hover { background: rgba(255, 255, 255, .1); }
.menu a[aria-current]::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 3px; border-radius: 2px; background: var(--letrero); }
.menu-movil { display: none; margin-left: auto; position: relative; }
.menu-movil summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; cursor: pointer; list-style: none; border-radius: var(--r1); font-size: 1rem; }
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil[open] summary { background: rgba(255, 255, 255, .12); }
.menu-movil nav { position: absolute; right: 0; top: calc(100% + 8px); z-index: 10; min-width: 240px; background: var(--riel); border-radius: var(--r2); padding: 8px; box-shadow: var(--s3); }
.menu-movil a { display: block; padding: 12px; color: var(--crema); text-decoration: none; border-radius: var(--r1); }
.menu-movil a:hover, .menu-movil a[aria-current] { background: rgba(255, 255, 255, .1); }
.hora-viva { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border-radius: var(--r1); background: rgba(255, 255, 255, .08); color: var(--riel-suave); font-size: var(--t4); white-space: nowrap; }
.hora-viva time { min-width: 3em; font-family: var(--titulos); font-weight: 700; color: var(--letrero); font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.ajustes { display: flex; gap: 4px; }
.ajuste { min-width: 44px; height: 44px; display: inline-grid; place-items: center; border: 0; background: transparent; color: var(--crema); border-radius: var(--r1); cursor: pointer; font-weight: 600; }
.ajuste:hover, .ajuste[aria-pressed='true'] { background: rgba(255, 255, 255, .12); }

/* El letrero: esmalte con filete, dos argollas y escalón */
.letrero {
  position: relative; margin-top: 16px; padding: 14px 24px 16px; border-radius: var(--r3);
  background: var(--letrero);
  color: var(--letrero-tinta);
  box-shadow: inset 0 0 0 6px var(--letrero), inset 0 0 0 7px rgba(43, 27, 46, .32), 0 5px 0 var(--letrero-borde), var(--s3);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: center;
}
.letrero::before, .letrero::after {
  content: ''; position: absolute; top: -18px; width: 11px; height: 29px;
  background: radial-gradient(circle 4.5px at 50% calc(100% - 5.5px), var(--letrero-tinta) 96%, transparent 100%), linear-gradient(var(--cuerda), var(--cuerda)) 50% 0 / 3px calc(100% - 6px) no-repeat;
}
.letrero::before { left: 10%; }
.letrero::after { right: 10%; }
.letrero h1 { font-size: var(--t1); font-weight: 800; line-height: 1.08; letter-spacing: -.025em; }
.letrero-fecha { margin: 6px 0 0; font-family: var(--titulos); font-weight: 700; font-size: var(--t3); }
.letrero-frase { margin: 4px 0 0; max-width: 62ch; }
.letrero--pagina { align-items: start; }
.letrero--chico { padding-bottom: 14px; }
/* La esfera solo donde hay aire entre el título y la bandeja */
.letrero:not(.letrero--pagina):has(.dias) { background-image: url('/iconos/esfera.svg'); background-repeat: no-repeat; background-size: 132px; background-position: calc(100% - 472px) 50%; }
.letrero a { color: var(--letrero-tinta); }
.migas ol { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: var(--t4); margin-bottom: 6px; }
.migas li + li::before { content: '›'; margin-right: 8px; }

/* La placa de horas de cada marca, atornillada al letrero */
.letrero-dato {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; width: 384px; padding: 12px 16px 14px;
  border-radius: var(--r2); background: var(--letrero-tinta); color: var(--crema); box-shadow: 0 2px 0 rgba(43, 27, 46, .3);
  --acento: var(--letrero); --pista: rgba(255, 255, 255, .14); --marca-hora: rgba(255, 255, 255, .22);
}
.letrero-dato .letrero-fecha { margin: 0; font-family: inherit; font-weight: 400; font-size: 1rem; color: var(--riel-suave); }
.letrero-horas { grid-column: 1 / -1; margin: 2px 0 0; font-family: var(--titulos); font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--letrero); font-variant-numeric: tabular-nums; }
.letrero-dato .barra { grid-column: 1 / -1; margin-top: 8px; }
.letrero-dato .estado { background: var(--crema); color: var(--letrero-tinta); }

.letrero-hojas { display: flex; gap: 12px; }
.letrero-hojas .hoja { width: 84px; box-shadow: 0 2px 0 rgba(43, 27, 46, .3), 0 8px 14px -8px rgba(43, 27, 46, .5); }
.letrero-hojas .hoja-mes { padding: 5px 0 3px; font-size: 1rem; }
.letrero-hojas .hoja-dia { padding: 8px 0 6px; font-size: 2.25rem; color: var(--tinta); }

/* Elegir el día: bandeja oscura sobre el letrero */
.dias { display: grid; gap: 6px; padding: 6px; border-radius: 14px; background: var(--letrero-tinta); box-shadow: 0 2px 0 rgba(43, 27, 46, .3); }
.dias-fila { display: flex; gap: 4px; }
.dia { min-height: 44px; padding: 8px 14px; border: 0; border-radius: 10px; background: transparent; color: var(--crema); cursor: pointer; font-weight: 500; font-size: 1rem; line-height: 1.2; white-space: nowrap; }
.dia:hover { background: rgba(255, 255, 255, .12); }
.dia[aria-pressed='true'], .dia[aria-pressed='true']:hover { background: var(--letrero); color: var(--letrero-tinta); box-shadow: 0 2px 0 var(--letrero-borde); }
.dias :focus-visible { outline-color: var(--letrero); }
.dia .corto { display: none; }
.dia-otra { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: rgba(255, 255, 255, .08); cursor: pointer; }
.dia-otra input { border: 0; background: transparent; color: inherit; font-size: 1rem; min-height: 28px; max-width: 160px; color-scheme: dark; cursor: pointer; }

/* La franja: de 06 a 24, con marcas a las 12 y a las 18, y la aguja de ahora */
.barra {
  display: block; width: 100%; height: 12px; border-radius: 3px; overflow: hidden;
  background: linear-gradient(90deg, transparent calc(33.33% - 1px), var(--marca-hora) 0 calc(33.33% + 1px), transparent 0 calc(66.66% - 1px), var(--marca-hora) 0 calc(66.66% + 1px), transparent 0), var(--pista);
}
.barra-tramo { fill: var(--acento, var(--letrero-borde)); }
.barra[data-tipo='confirmar'] .barra-tramo { fill-opacity: .45; }
.barra[data-tipo='ley'] { background: repeating-linear-gradient(135deg, var(--ley-fondo) 0 6px, transparent 6px 12px), var(--pista); }
.barra-ahora { fill: var(--tinta); }
.letrero-dato .barra-ahora { fill: var(--crema); }

/* Superficies */
.caja { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r2); box-shadow: var(--s2); }

/* Portada: tablero con todas las marcas sobre una misma regla, y el lado con el calendario */
.portada-grilla { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 20px; margin-top: 28px; align-items: start; }
.tablero { --c-nombre: 11.5rem; --c-horas: 9.5rem; --c-estado: 10rem; overflow: hidden; }
.tablero-cabeza { display: grid; grid-template-columns: var(--c-nombre) minmax(0, 1fr) var(--c-horas) var(--c-estado); column-gap: 16px; align-items: end; padding: 10px 16px 6px; color: var(--tinta-2); font-size: var(--t4); }
.tablero-cabeza p { margin: 0; }
.regla { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.lado { display: grid; gap: 20px; position: sticky; top: 16px; min-width: 0; }

.rubro { min-width: 0; }
.rubro h2, .rubro h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; padding: 8px 16px; font-size: var(--t3); background: var(--superficie-2); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.rubro h2 a { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.rubro h2 a:hover span:last-child { text-decoration: underline; text-decoration-thickness: 2px; }
.rubro h3 { display: flex; }
.placa { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: var(--r1); color: var(--acento); background: color-mix(in srgb, var(--acento) 14%, var(--superficie)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento) 30%, transparent); }
.placa .icono { width: 22px; height: 22px; }
.rubro-resumen { margin-left: auto; font-family: 'Lexend', sans-serif; font-size: var(--t4); font-weight: 500; letter-spacing: 0; color: var(--tinta-2); white-space: nowrap; }

.filas li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'nombre estado' 'horas estado' 'barra barra' 'nota nota'; gap: 0 12px; align-items: center; padding: 10px 16px; }
.filas li + li { border-top: 1px solid var(--linea); }
.filas li:hover { background: var(--superficie-2); }
.fila-nombre { grid-area: nombre; font-weight: 550; }
.fila-nombre a { color: inherit; text-decoration: none; }
.fila-nombre a:hover { color: var(--enlace); text-decoration: underline; }
.fila-horas { grid-area: horas; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.filas .estado { grid-area: estado; justify-self: end; }
.filas .barra { grid-area: barra; margin-top: 8px; }
.fila-nota { grid-area: nota; margin-top: 4px; color: var(--tinta-2); }
.bloque .filas { overflow: hidden; }

.estado { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: var(--r1); font-size: var(--t4); font-weight: 500; line-height: 1.35; white-space: nowrap; }
.estado::before { content: ''; width: 8px; height: 8px; flex: none; border-radius: 50%; background: currentColor; }
.estado--abierto { background: var(--abierto-fondo); color: var(--abierto); }
.estado--pronto { background: var(--pronto-fondo); color: var(--pronto); }
.estado--cerrado { background: var(--cerrado-fondo); color: var(--cerrado); }
.estado--confirmar { background: var(--confirmar-fondo); color: var(--confirmar); }
.estado--ley { background: var(--ley-fondo); color: var(--ley); }

/* El calendario de hojas */
.especiales { overflow: hidden; }
.especiales h2, .leer h2 { display: flex; align-items: center; gap: 10px; padding: 12px 16px 8px; font-size: var(--t3); }
.especiales li + li { border-top: 1px solid var(--linea); }
.especiales ul a { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 16px; color: inherit; text-decoration: none; }
.especiales ul a:hover { background: var(--superficie-2); }
.especiales ul a:hover b { text-decoration: underline; text-decoration-thickness: 2px; }
.hoja { display: grid; justify-items: center; overflow: hidden; border-radius: var(--r1); background: var(--superficie); box-shadow: 0 0 0 1px var(--linea), var(--s1); line-height: 1; }
.hoja-mes { width: 100%; padding: 3px 0 2px; text-align: center; font-size: var(--t4); font-weight: 500; background: var(--riel); color: var(--crema); }
.hoja-dia { padding: 5px 0 4px; font-family: var(--titulos); font-size: 1.5rem; font-weight: 800; }
.especiales b { display: block; font-weight: 550; line-height: 1.3; }
.especiales span.detalle { display: block; color: var(--tinta-2); font-size: var(--t4); line-height: 1.35; }

.leer { padding-bottom: 12px; }
.leyenda { display: grid; gap: 10px; padding: 0 16px; margin-bottom: 12px; }
.leyenda li { display: grid; gap: 2px; justify-items: start; font-size: var(--t4); line-height: 1.4; }
.leer > p { padding: 0 16px; margin: 0; font-size: var(--t4); line-height: 1.45; color: var(--tinta-2); }

/* Bloques de lectura */
.bloque { margin-top: var(--separacion); }
.letrero + .bloque { margin-top: 28px; }
.bloque > h2 { margin-bottom: 12px; }
.bloque > p { max-width: var(--lectura); }
.frase-dia { font-size: var(--t3); }
.fuentes { display: grid; gap: 4px; margin-bottom: 12px; }

/* Preguntas, con la puerta del local al lado */
.bloque--preguntas { display: grid; grid-template-columns: minmax(0, var(--lectura)) minmax(0, 1fr); column-gap: 32px; }
.bloque--preguntas > h2 { grid-column: 1 / -1; }
.bloque--preguntas::after { content: ''; min-height: 248px; border-radius: var(--r2); background: #FFD9AE url('/iconos/puerta.svg') center bottom / cover no-repeat; box-shadow: var(--s2); }
.preguntas { display: grid; gap: 8px; align-content: start; }
.preguntas details { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r2); box-shadow: var(--s1); }
.preguntas details[open] { box-shadow: var(--s2); }
.preguntas summary { position: relative; display: block; padding: 12px 44px 12px 16px; cursor: pointer; font-weight: 550; list-style: none; border-radius: var(--r2); }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary:hover { background: var(--superficie-2); }
.preguntas summary::after { content: '+'; position: absolute; right: 16px; top: 8px; font-family: var(--titulos); font-size: 1.5rem; font-weight: 600; color: var(--enlace); }
.preguntas details[open] summary::after { content: '–'; }
.preguntas p { margin: 0; padding: 0 16px 14px; }

/* Tablas */
.caja-tabla { overflow: hidden; margin-top: 24px; }
table { width: 100%; border-collapse: collapse; }
caption { text-align: left; font-family: var(--titulos); font-weight: 700; font-size: var(--t3); padding: 12px 16px 8px; }
th, td { text-align: left; padding: 10px 16px; vertical-align: top; }
td { font-variant-numeric: tabular-nums; }
thead th { font-weight: 500; font-size: var(--t4); color: var(--tinta-2); background: var(--superficie-2); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
tbody tr + tr > * { border-top: 1px solid var(--linea); }
tbody tr:hover > * { background: var(--superficie-2); }
tbody th { font-weight: 550; }
tbody th small, td small { display: block; font-weight: 350; color: var(--tinta-2); }
tbody th a { color: inherit; }
.tabla-rubro thead th:nth-child(2), .celda-dia { background: color-mix(in srgb, var(--letrero) 10%, var(--superficie)); }
tbody tr:hover > .celda-dia { background: color-mix(in srgb, var(--letrero) 16%, var(--superficie)); }
.celda-dia { width: 30%; min-width: 196px; font-weight: 500; }
.tabla-rubro td.corto { white-space: nowrap; }
html[data-letra='grande'] .tabla-rubro td.corto { white-space: normal; }
.celda-dia .estado { margin-top: 4px; font-weight: 500; }
.celda-dia .barra { margin-top: 8px; }
.tabla-semana td:last-child { white-space: nowrap; }
.nota-tabla { display: flex; flex-wrap: wrap; gap: 0 8px; margin: 16px 0 0; padding: 10px 16px; border-radius: var(--r2); background: var(--superficie); border: 1px solid var(--linea); box-shadow: var(--s1); }
.dos-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.dos-columnas > div > .caja-tabla:first-child { margin-top: 28px; }
.ver-todo { margin: 12px 0 0; }
.aviso-vencido { margin: 20px 0 0; padding: 12px 16px; border-radius: var(--r2); background: var(--confirmar-fondo); color: var(--confirmar); box-shadow: var(--s1); }

/* La semana de una marca, en franjas */
.semana { padding: 8px 0 4px; font-family: 'Lexend', sans-serif; font-weight: 400; letter-spacing: 0; }
.semana-regla { display: flex; justify-content: space-between; margin-left: 28px; color: var(--tinta-2); font-size: var(--t4); font-variant-numeric: tabular-nums; }
.semana-dia { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 22px; font-size: var(--t4); color: var(--tinta-2); }
.semana-dia[data-hoy] { color: var(--tinta); font-weight: 600; }
.semana-dia[data-hoy] .barra { outline: 2px solid var(--letrero); outline-offset: 1px; }

/* Días especiales: las cajas de cada rubro */
.rubros { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.rubros .rubro { overflow: hidden; grid-column: span 2; }
.rubros .rubro:nth-child(n + 4) { grid-column: span 3; }
.rubros .rubro h3 { border-top: 0; }

/* Páginas de texto */
.pagina-texto { display: grid; grid-template-columns: minmax(0, var(--lectura)) minmax(0, 1fr); gap: 32px; margin-top: 24px; align-items: start; }
.texto h2 { margin: 24px 0 8px; }
.texto h2:first-child { margin-top: 0; }
.lado-nav { padding: 8px; position: sticky; top: 16px; }
.lado-nav a { display: block; padding: 10px 12px; border-radius: var(--r1); color: inherit; text-decoration: none; }
.lado-nav a:hover { background: var(--superficie-2); }
.lado-nav a[aria-current] { background: color-mix(in srgb, var(--letrero) 22%, var(--superficie)); font-weight: 550; }
.correo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; border-radius: var(--r2); background: var(--superficie); border: 1px solid var(--linea); box-shadow: var(--s1); overflow-wrap: anywhere; }
.boton { min-height: 44px; padding: 8px 16px; border-radius: var(--r1); border: 0; background: var(--riel); color: var(--crema); cursor: pointer; font-weight: 500; box-shadow: 0 2px 0 var(--riel-sombra); }
.boton:hover { background: var(--letrero-tinta); color: var(--letrero); }
.copiado { color: var(--abierto); }

/* Pie: la calle de los locales */
.pie { margin-top: 112px; position: relative; background: var(--pie); color: var(--riel-suave); padding: 28px 0 16px; }
.pie::before { content: ''; position: absolute; left: 0; right: 0; top: -71px; height: 72px; background: url('/iconos/calle.svg') bottom left / 960px 72px repeat-x; }
.pie-columnas { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 24px; }
.pie .marca { display: inline-flex; padding: 0; color: var(--crema); }
.pie-marca p { margin: 10px 0 0; max-width: 34ch; font-size: var(--t4); line-height: 1.45; }
.pie h2 { font-family: var(--titulos); font-size: 1.0625rem; color: var(--crema); margin-bottom: 8px; }
.pie a { display: inline-block; padding: 4px 0; color: var(--riel-suave); text-decoration: none; }
.pie li a:hover { color: var(--letrero); text-decoration: underline; }
.pie-legal { display: flex; flex-wrap: wrap; gap: 0 24px; justify-content: space-between; margin-top: 16px; padding-top: 12px; font-size: var(--t4); border-top: 1px solid rgba(255, 255, 255, .14); }
.pie-legal p { margin: 0 0 4px; }
.instalar { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; padding: 0 12px; border: 1px solid var(--riel-suave); border-radius: var(--r1); background: transparent; color: var(--crema); cursor: pointer; }
.instalar[hidden] { display: none; }
.instalar-ayuda { margin-top: 8px; font-size: var(--t4); }

/* En oscuro, la escena de la puerta no debe encandilar */
:root[data-tema='oscuro'] .bloque--preguntas::after { filter: brightness(.8); }
@media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) .bloque--preguntas::after { filter: brightness(.8); } }

/* 1100 (medido): el lado ya no cabe junto al tablero y baja como dos cajas */
@media (max-width: 1100px) {
  .hora-viva { display: none; }
  .portada-grilla { grid-template-columns: minmax(0, 1fr); }
  .lado { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .letrero:not(.letrero--pagina):has(.dias) { background-image: none; }
}

/* En escritorio el tablero pone las franjas en una misma columna: la aguja forma una sola línea */
@media (min-width: 922px) {
  body { font-size: 1.1875rem; }
  .tablero .filas li { grid-template-columns: var(--c-nombre) minmax(0, 1fr) var(--c-horas) var(--c-estado); grid-template-areas: 'nombre barra horas estado' 'nota nota nota nota'; column-gap: 16px; padding-block: 8px; }
  .tablero .filas .barra { margin-top: 0; }
  .tablero .filas .estado { justify-self: start; }
  .tablero .fila-horas { color: var(--tinta); }
}

/* 921: menú en el botón y una columna donde corresponde */
@media (max-width: 921px) {
  .menu { display: none; }
  .menu-movil { display: block; }
  .tablero-cabeza { grid-template-columns: minmax(0, 1fr); }
  .tablero-cabeza p { display: none; }
  .letrero, .letrero--pagina { grid-template-columns: minmax(0, 1fr); }
  .letrero-dato { width: auto; }
  .dos-columnas, .pagina-texto, .bloque--preguntas { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bloque--preguntas::after { display: none; }
  .lado-nav { position: static; margin-top: 24px; }
  .rubros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rubros .rubro, .rubros .rubro:nth-child(n + 4) { grid-column: auto; }
  .rubros .rubro:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .letrero-hojas { display: none; }
}

/* 921: la tabla por marca no cabe; cada fila pasa a tarjeta con su rótulo */
@media (max-width: 921px) {
  .tabla-rubro thead, .tabla-reglas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla-rubro, .tabla-rubro tbody, .tabla-rubro tr, .tabla-rubro th, .tabla-rubro td,
  .tabla-reglas, .tabla-reglas tbody, .tabla-reglas tr, .tabla-reglas th, .tabla-reglas td { display: block; width: 100%; }
  .tabla-reglas caption { display: block; width: 100%; }
  .tabla-rubro tr, .tabla-reglas tr { padding: 8px 0; }
  .tabla-rubro th, .tabla-reglas th { padding: 4px 16px; border: 0 !important; }
  .tabla-rubro td, .tabla-reglas td { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; padding: 2px 16px; border: 0 !important; }
  .tabla-rubro td::before, .tabla-reglas td::before { content: attr(data-titulo); color: var(--tinta-2); font-size: var(--t4); }
  .tabla-rubro td.corto { white-space: normal; }
  tbody tr:hover > * { background: transparent; }
  .celda-dia, tbody tr:hover > .celda-dia { display: block !important; width: 100%; min-width: 0; background: transparent; }
  .celda-dia::before { content: none !important; }
  .celda-dia [data-h='horas'] { font-weight: 550; margin-right: 8px; }
  .celda-dia .estado { margin-top: 0; }
  .celda-dia .barra { margin: 6px 0 4px; }
}

/* 720 (medido): las dos cajas del lado ya no caben juntas */
@media (max-width: 720px) {
  .lado { grid-template-columns: minmax(0, 1fr); }
}

/* 544: celular */
@media (max-width: 544px) {
  body::before { height: 180px; }
  .rubros { grid-template-columns: minmax(0, 1fr); }
  .rubros .rubro:last-child:nth-child(odd) { grid-column: auto; }
  .portada-grilla { margin-top: 20px; gap: 16px; }
  .letrero { padding: 10px 16px 14px; margin-top: 12px; box-shadow: inset 0 0 0 4px var(--letrero), inset 0 0 0 5px rgba(43, 27, 46, .32), 0 4px 0 var(--letrero-borde), var(--s3); }
  .letrero::before, .letrero::after { top: -14px; height: 24px; }
  .dias-fila { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
  .dia { padding: 8px 2px; font-size: var(--t4); }
  .dia .largo { display: none; }
  .dia .corto { display: inline; }
  .dia-otra { padding: 4px 12px; }
  .dia-otra input { font-size: var(--t4); max-width: 140px; }
  .letrero-dato { padding: 10px 12px 12px; }
  .letrero + .bloque { margin-top: 20px; }
  .bloque > h2 { margin-bottom: 8px; }
  .frase-dia { margin-bottom: 8px; font-size: 1rem; }
  .rubros { margin-top: 8px; }
  .tabla-semana thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla-semana, .tabla-semana tbody, .tabla-semana tr, .tabla-semana th, .tabla-semana td { display: block; width: 100%; }
  .tabla-semana caption { display: block; }
  .tabla-semana tr { padding: 8px 0; }
  .tabla-semana th { padding: 2px 12px; border: 0 !important; }
  .tabla-semana td { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; padding: 2px 12px; border: 0 !important; white-space: normal; }
  .tabla-semana td::before { content: attr(data-titulo); color: var(--tinta-2); font-size: var(--t4); }
  .tabla-especiales thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla-especiales, .tabla-especiales tbody, .tabla-especiales tr, .tabla-especiales th, .tabla-especiales td { display: block; width: 100%; }
  .tabla-especiales caption { display: block; }
  .tabla-especiales tr { padding: 8px 0; }
  .tabla-especiales tr + tr { border-top: 1px solid var(--linea); }
  .tabla-especiales th, .tabla-especiales td { padding: 2px 12px; border: 0 !important; }
  .pie { margin-top: 96px; }
  .pie-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .pie-marca { grid-column: 1 / -1; }
  .marca { font-size: 1.25rem; }
  .logo-letrero { width: 34px; height: 34px; }
  html[data-letra='grande'] .menu-movil summary span { display: none; }
  html[data-letra='grande'] .marca { font-size: 1.0625rem; gap: 6px; }
  html[data-letra='grande'] .cabecera-fila { gap: 4px; }
  th, td { padding: 8px 12px; }
}

/* 360 (medido): en 320 px no caben logo, menú y dos ajustes en una fila con estos rótulos */
@media (max-width: 360px) {
  .menu-movil summary span { display: none; }
  .cabecera-fila { gap: 8px; }
}

@media print {
  .cabecera, .pie, .dias, .saltar, .barra, .lado-nav { display: none; }
  body { background: #fff; color: #000; }
  body::before { content: none; }
  .letrero { box-shadow: none; background: #fff; border: 1px solid #000; }
  .letrero::before, .letrero::after, .bloque--preguntas::after { content: none; }
  .caja { box-shadow: none; }
}