/* ===========================================================================
   correos.css — Correos de alcance FGS
   Fichas → base → cabecera → mesa → horario → envío → hoja → adaptación →
   movimiento reducido → impresión.
   =========================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Mesa de despacho: banda institucional arriba (azul con el filete amarillo del
   propio correo); a la izquierda el horario semanal de los 24 grupos y los
   botones de copiar, fijos al desplazar; a la derecha la hoja del correo tal
   como llega a Outlook. La hoja es siempre blanca: es lo que se pega. */
:root {
  --suelo: #EDF0F6;
  --superficie: #FFFFFF;
  --superficie-2: #F4F6FA;
  --linea: #D5DBE8;
  --tinta: #16203A;
  --suave: #5B6582;
  --enfasis: #1B3C9A;
  --foco: #1B3C9A;
  --banda: #0B2161;
  --banda-texto: #C9D2E8;
  --banda-fuerte: #FFFFFF;
  --oro: #F7D44C;
  --sobre-oro: #0B2161;
  --boton: #0B2161;
  --boton-hover: #16337F;
  --boton-texto: #FFFFFF;
  --ok: #1E7A4B;
  --sombra: rgba(11, 33, 97, .16);

  --display: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --texto: 'Source Sans 3', 'Segoe UI', Calibri, Arial, sans-serif;

  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --suelo: #0A0F1E;
    --superficie: #111933;
    --superficie-2: #18223F;
    --linea: #29345B;
    --tinta: #E6EAF4;
    --suave: #9CA6C4;
    --enfasis: #A3B6F3;
    --foco: #F7D44C;
    --banda: #0C1636;
    --banda-texto: #AEB9D6;
    --banda-fuerte: #FFFFFF;
    --boton: #2E50C2;
    --boton-hover: #3B5FD8;
    --boton-texto: #FFFFFF;
    --ok: #6CCB98;
    --sombra: rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --suelo: #0A0F1E;
  --superficie: #111933;
  --superficie-2: #18223F;
  --linea: #29345B;
  --tinta: #E6EAF4;
  --suave: #9CA6C4;
  --enfasis: #A3B6F3;
  --foco: #F7D44C;
  --banda: #0C1636;
  --banda-texto: #AEB9D6;
  --banda-fuerte: #FFFFFF;
  --boton: #2E50C2;
  --boton-hover: #3B5FD8;
  --boton-texto: #FFFFFF;
  --ok: #6CCB98;
  --sombra: rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* --- Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--suelo);
  color: var(--tinta);
  font: 400 1rem/1.5 var(--texto);
}
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

.contenedor {
  max-width: 1180px;
  margin-inline: auto;
  padding-left: max(clamp(16px, 3vw, 32px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(16px, 3vw, 32px), env(safe-area-inset-right, 0px));
}
.oculto {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Cabecera -------------------------------------------------------------- */
.cabecera {
  background: var(--banda);
  color: var(--banda-texto);
  border-bottom: 4px solid var(--oro);
}
.cabecera-in {
  display: grid;
  gap: 10px;
  padding-block: calc(env(safe-area-inset-top, 0px) + clamp(22px, 3vw, 34px)) clamp(22px, 3vw, 30px);
}
.cabecera :focus-visible { outline-color: var(--oro); }
.antetitulo {
  margin: 0;
  font: 700 .75rem/1.45 var(--display);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--oro);
  max-width: 70ch;
}
h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 84%;
  font-size: clamp(1.7rem, 1.25rem + 1.6vw, 2.5rem);
  line-height: 1.06;
  letter-spacing: -.01em;
  color: var(--banda-fuerte);
  text-wrap: balance;
}
.como {
  margin: 0;
  max-width: 66ch;
  font-size: 1.0625rem;
  line-height: 1.55;
}
.como b { color: var(--banda-fuerte); font-weight: 600; }

/* --- Mesa ------------------------------------------------------------------ */
.mesa {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 32px);
  padding-block: clamp(20px, 3vw, 32px) 56px;
}
.mando {
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
}
.panel {
  min-width: 0;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 16px;
}

/* --- Horario: días en filas, franjas en columnas --------------------------- */
/* Las columnas las pone el JS en `fr` (--plantilla): cada franja mide lo que su
   día más lleno, y así todos los botones salen del mismo ancho a cualquier tamaño. */
.rejilla {
  display: grid;
  grid-template-columns: 2.25rem var(--plantilla, repeat(3, minmax(0, 1fr)));
  gap: 8px 10px;
  align-items: center;
}
.franja,
.dia {
  font: 700 .6875rem/1.2 var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--suave);
  font-variant-numeric: tabular-nums;
  transition: color .15s ease;
}
.franja {
  align-self: end;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--linea);
  transition: color .15s ease, border-color .15s ease;
}
.franja.activo { color: var(--tinta); border-bottom-color: var(--oro); }
.dia.activo { color: var(--tinta); }
.celda {
  display: grid;
  grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr));
  gap: 4px;
  min-height: 2.25rem;
  align-items: center;
}
.celda.vacia {
  align-self: stretch;
  border-radius: 6px;
  background: repeating-linear-gradient(135deg, transparent 0 5px, var(--linea) 5px 6px);
  opacity: .55;
}
.chip {
  appearance: none;
  width: 100%;
  height: 2.25rem;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--linea);
  background: var(--superficie-2);
  color: var(--tinta);
  font: 700 .9375rem/1 var(--display);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.chip:hover { border-color: var(--enfasis); }
.chip[aria-pressed="true"] {
  background: var(--oro);
  border-color: var(--oro);
  color: var(--sobre-oro);
}

/* --- Envío ----------------------------------------------------------------- */
.envio { display: grid; gap: 14px; }
.lbl { display: grid; gap: 2px; }
.lbl-grupo {
  font: 700 1.625rem/1.1 var(--display);
  font-stretch: 84%;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.lbl-hora { font-size: .9375rem; color: var(--suave); }
.asunto-fila { display: grid; gap: 8px; justify-items: start; }
.subject {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: var(--superficie-2);
  font-size: .9375rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.btn {
  appearance: none;
  border-radius: 6px;
  font: 700 .9375rem/1 var(--display);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .2s ease;
}
.btn.alt {
  padding: 10px 14px;
  background: transparent;
  color: var(--enfasis);
  border: 1px solid var(--linea);
}
.btn.alt:hover { border-color: var(--enfasis); }
.btn.main {
  width: 100%;
  padding: 16px 18px;
  font-size: 1.0625rem;
  background: var(--boton);
  color: var(--boton-texto);
  border: 0;
}
.btn.main:hover { background: var(--boton-hover); }
.btn.hecho { box-shadow: 0 0 0 3px var(--oro); }
.status {
  margin: 0;
  min-height: 1.45em;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--ok);
}
.status[data-estado="sel"] { color: var(--enfasis); }

/* --- La hoja del correo ---------------------------------------------------- */
.hoja-zona { min-width: 0; }
.hoja-scroll {
  overflow-x: auto;
  padding: 2px 0 24px;
  -webkit-overflow-scrolling: touch;
}
/* Colores fijos a propósito: la hoja representa el correo, que es blanco en
   los dos temas. Lo que se copia es su HTML, con sus propios estilos en línea. */
#correo {
  width: 680px;
  margin: 0 auto;
  background: #FFFFFF;
  color: #000000;
  color-scheme: light;
  border-radius: 2px;
  box-shadow: 0 1px 2px var(--sombra), 0 22px 44px -22px var(--sombra);
}

/* El JS le pone `zoom` cuando la pantalla es más estrecha que el correo. */
.hoja-escala { width: 100%; }

/* --- Barra inferior (móvil y tableta) --------------------------------------- */
/* Aparece cuando «Copiar correo» sale de la pantalla al bajar por el correo. */
.barra-movil {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  background: var(--superficie);
  border-top: 1px solid var(--linea);
  box-shadow: 0 -10px 28px -14px var(--sombra);
  padding-block: 10px calc(10px + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .22s ease, visibility 0s linear .22s;
}
.barra-movil.visible {
  transform: none;
  visibility: visible;
  transition: transform .22s ease;
}
.barra-in {
  max-width: 680px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.barra-texto {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  display: grid;
  gap: 1px;
}
.barra-grupo {
  font: 700 1.125rem/1.15 var(--display);
  font-stretch: 84%;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.barra-hora {
  font-size: .8125rem;
  line-height: 1.3;
  color: var(--suave);
}
.barra-hora[data-estado="ok"] { color: var(--ok); font-weight: 600; }
.barra-hora[data-estado="sel"] { color: var(--enfasis); font-weight: 600; }
.barra-movil .btn.main {
  width: auto;
  flex: 0 0 auto;
  min-height: 48px;
  padding: 12px 18px;
  font-size: 1rem;
}

/* --- Adaptación ------------------------------------------------------------ */
/* Teléfono: cabecera más corta, paneles más ceñidos, los dos botones a todo
   el ancho, y sitio al final para que la barra no tape el pie del correo. */
@media (max-width: 719.98px) {
  .cabecera-in { gap: 8px; padding-block: calc(env(safe-area-inset-top, 0px) + 18px) 18px; }
  .antetitulo { font-size: .6875rem; letter-spacing: .1em; }
  .como { font-size: 1rem; line-height: 1.5; }
  .mesa { gap: 14px; padding-block: 14px calc(96px + env(safe-area-inset-bottom, 0px)); }
  .mando { gap: 12px; }
  .panel { padding: 14px 12px; border-radius: 8px; }
  .rejilla { gap: 8px 8px; grid-template-columns: 2rem var(--plantilla, repeat(3, minmax(0, 1fr))); }
  .envio { gap: 12px; }
  .lbl-grupo { font-size: 1.5rem; }
  .asunto-fila { justify-items: stretch; }
  .btn.alt { padding: 12px 14px; }
  .hoja-scroll { padding-bottom: 8px; }
}
@media (min-width: 720px) and (max-width: 1179.98px) {
  .mando { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .mesa { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 1180px) {
  .mesa { grid-template-columns: 360px minmax(0, 1fr); align-items: start; }
  .mando { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 20px); }
  .hoja-scroll { overflow: visible; padding-top: 0; }
  .barra-movil { display: none; }
}
/* Dedos, no ratón: objetivos de 44 px y sin el retraso del doble toque. */
@media (pointer: coarse) {
  .chip { height: 2.75rem; }
  .celda { min-height: 2.75rem; }
  .btn.alt { min-height: 44px; }
  .btn.main { min-height: 50px; }
  .chip, .btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .chip:active, .btn:active { transform: scale(.97); }
}

/* --- Movimiento reducido --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .chip:active, .btn:active { transform: none; }
}

/* --- Impresión: solo la hoja ----------------------------------------------- */
@media print {
  body { background: #FFFFFF; }
  .cabecera, .mando, .barra-movil { display: none; }
  .mesa { display: block; padding: 0; }
  .hoja-escala { zoom: 1 !important; }
  #correo { box-shadow: none; }
}