/* Layout: widget de una columna (máx. 640px) para iframe; antetítulo, selector de modo a todo el ancho, título y descripción, fecha, leyenda con fechas y una rejilla de 10 semanas de alto fijo. Tema único claro: va sobre el blanco de la web de EC. */
@font-face{font-family:"Confi Sans";font-weight:400;font-style:normal;font-display:swap;src:url(ConfiSans-400-Regular.woff2) format("woff2")}
@font-face{font-family:"Confi Sans";font-weight:500;font-style:normal;font-display:swap;src:url(ConfiSans-500-Medium.woff2) format("woff2")}
@font-face{font-family:"Confi Sans";font-weight:700;font-style:normal;font-display:swap;src:url(ConfiSans-700-Bold.woff2) format("woff2")}

:root{
  --azul:#0F2124; --ambar:#CC7A4B; --bronce-claro:#DBA281;
  --acero:#BFC7CE; --acero-claro:#D2D8DD; --mate:#EFEFEF; --hover:#D4D4D4;
  --negro:#121212; --gris:#737373; --pie:#4f4f4f; --blanco:#ffffff; --aviso:#F6ECE5;
  /* colores de fase (se prueban variantes en comparar_colores.html) */
  /* variante C con elecciones en ámbar (petición de diseño, 2-10-2026): campaña acero oscuro, reflexión acero, disolución negro */
  --fase-firma:var(--negro); --txt-firma:var(--blanco);
  --fase-boe:var(--mate); --borde-boe:var(--negro);
  --fase-pre:var(--mate);
  --fase-camp:#484F54; --txt-camp:var(--blanco);
  --fase-refl:#99A2AB; --txt-refl:var(--negro);
  --fase-elec:var(--ambar); --txt-elec:var(--negro);
  --f:"Confi Sans",Roboto,Arial,sans-serif;
  color-scheme:light;
}
html,body{background:var(--blanco)}
body{margin:0;color:var(--negro);font-family:var(--f)}
.w{max-width:640px;margin:0 auto;padding-inline:16px;padding-block:16px 12px;font-variant-numeric:tabular-nums}
.kicker{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);margin:0 0 14px}
h2{font-size:20px;line-height:24px;margin:0 0 6px;text-wrap:balance}
.desc{font-size:15px;line-height:21px;color:var(--pie);margin:0 0 14px;max-width:62ch}
button{font-family:var(--f)}
button:focus-visible,input:focus-visible{outline:2px solid var(--ambar);outline-offset:1px}

/* controles */
.ctrl{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.fila{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.campo{display:flex;flex-direction:column;gap:4px;min-width:0}
.etq{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.modos{display:flex;flex-direction:column;gap:4px;margin:4px 0 16px}
.seg{display:flex;gap:2px}
.seg button{flex:1 1 0;height:40px;font-size:14px}
.chip,.paso{height:32px;padding:0 12px;border:0;border-radius:2px;background:var(--mate);color:var(--negro);font-size:13px;font-weight:500;cursor:pointer}
.seg button{padding:0 12px;border:0;border-radius:2px;background:var(--mate);color:var(--negro);font-weight:500;cursor:pointer}
.seg button:hover,.chip:hover,.paso:hover{background:var(--hover)}
.fecha{display:flex;gap:2px}
.paso{padding:0;width:32px;font-size:16px}
.seg button[aria-pressed=true],.chip[aria-pressed=true]{background:var(--negro);color:var(--blanco)}
input[type=date]{font-family:var(--f);font-size:15px;color:var(--negro);background:var(--blanco);border:1px solid var(--acero);border-radius:2px;height:32px;padding:0 8px;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.fijo-txt{font-size:15px;font-weight:700;line-height:32px}
@media (max-width:480px){.chip,.paso,input[type=date]{height:40px}.paso{width:40px}.fijo-txt{line-height:40px}}

.aviso{font-size:14px;line-height:19px;background:var(--aviso);border-left:3px solid var(--ambar);padding:8px 10px;margin:0 0 12px}
.aviso button{font:inherit;font-weight:700;color:var(--negro);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}

/* leyenda con fechas */
.leyenda{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 14px;padding:0;list-style:none;font-size:14px;line-height:18px;color:var(--pie)}
.leyenda li{display:flex;align-items:center;gap:7px;white-space:nowrap}
.leyenda i{width:12px;height:12px;border-radius:2px;flex:none}
.leyenda b{color:var(--negro);font-weight:700}
@media (max-width:480px){.leyenda{gap:6px 12px;font-size:13px}.chip{padding:0 10px}}

/* calendario */
.cal{display:grid;grid-template-columns:34px repeat(7,1fr);gap:3px}
.cal .h{font-size:11px;font-weight:700;color:var(--gris);text-align:center;padding-bottom:2px}
.cal .mes{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;align-self:center}
.cal .d{height:34px;border:0;border-radius:2px;padding:0;font-size:14px;color:var(--negro);background:var(--blanco);position:relative;cursor:pointer}
.cal .d:hover{box-shadow:inset 0 0 0 2px var(--gris)}
.cal .fuera{color:var(--acero)}
.cal .fuera:hover{color:var(--negro)}
.cal .pre{background:var(--fase-pre)}
.cal .firma{background:var(--fase-firma);color:var(--txt-firma);font-weight:700}
.cal .boe{background:var(--fase-boe);box-shadow:inset 0 0 0 2px var(--borde-boe);font-weight:700}
.cal .camp{background:var(--fase-camp);color:var(--txt-camp);font-weight:500}
.cal .refl{background:var(--fase-refl);color:var(--txt-refl)}
.cal .elec{background:var(--fase-elec);color:var(--txt-elec);font-weight:700}
.cal .firma:hover{box-shadow:inset 0 0 0 2px var(--ambar)}
.cal .elec:hover{box-shadow:inset 0 0 0 2px var(--negro)}
.cal .hoy::after{content:"";position:absolute;left:50%;bottom:4px;margin-left:-2px;width:4px;height:4px;border-radius:50%;background:currentColor}
.cal .uno{font-weight:700}
.cal.fijo .d{cursor:default}
.cal.fijo .d:hover{box-shadow:none}
@media (max-width:480px){.cal{grid-template-columns:28px repeat(7,1fr)}.cal .d{height:32px;font-size:13px}}
.pie{font-size:12px;line-height:16px;color:var(--pie);text-align:right;margin:10px 0 0}