/* ==========================================================================
   El Faro — Calendario de la Ribera de Chapala
   --------------------------------------------------------------------------
   THEME NOTE: These brand tokens are copied verbatim from the Directorio app
   (assets/dir.css) — a neutral-but-polished placeholder (lake blues + warm
   faro amber). The site's final theme is pending Jack's A/B pick
   (A = "Faro Nocturno", B = "Ribera Cálida"). When chosen, override the :root
   custom properties below to match dir.css so both apps stay in lock-step;
   component rules read only from tokens, so a theme swap should not require
   touching layout/component CSS.
   The --t-* tokens (event-type colors) are calendar-specific and layered on
   top of the shared brand palette.
   No third-party fonts, no CDN, no cookies. Light + dark via prefers-color-scheme.
   ========================================================================== */

:root {
  /* brand (mirror of dir.css) */
  --lake-900:#082f3d; --lake-800:#0e4d64; --lake-700:#12657f; --lake-600:#1a7d9a;
  --lake-500:#2e97b5; --lake-100:#dceef3;
  --amber-600:#d9772b; --amber-500:#e8873a; --amber-400:#f2a34e;

  /* semantic (light) */
  --bg:#f6f8f9; --bg-soft:#eef2f4; --surface:#ffffff; --surface-2:#f9fbfc;
  --ink:#12242b; --ink-soft:#4a5c64; --ink-faint:#7d8b91;
  --line:#e2e8eb; --line-strong:#cfd9dd;
  --brand:var(--lake-700); --brand-ink:var(--lake-800); --accent:var(--amber-500);
  --ring:rgba(26,125,154,.35);
  --shadow-sm:0 1px 2px rgba(8,47,61,.06),0 1px 3px rgba(8,47,61,.08);
  --shadow-md:0 4px 14px rgba(8,47,61,.10);
  --shadow-lg:0 18px 50px rgba(8,47,61,.28);
  --radius:14px; --radius-sm:10px;
  --header-h:56px;
  --maxw:1240px;

  /* event-type colors (calendar-specific) */
  --t-fiesta_patronal:#d9772b;  /* warm amber — the big cohete fiestas */
  --t-religiosa:#7c5cc4;        /* liturgical purple */
  --t-civica:#1a7d9a;           /* civic lake blue */
  --t-cultural:#c04ea8;         /* culture magenta */
  --t-tianguis:#4a9e57;         /* market green */
  --t-comunitaria:#5b6ee1;      /* community indigo */
  --t-musica:#e0447a;           /* music / dance rose */
  --t-fallback:#94a3b8;

  --conf-ok:#2fa980; --conf-mid:var(--amber-600); --conf-low:#d15b5b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0a1418; --bg-soft:#0e1c22; --surface:#12222a; --surface-2:#16282f;
    --ink:#e8f0f2; --ink-soft:#a9bcc2; --ink-faint:#7c9198;
    --line:#213540; --line-strong:#2b4550;
    --brand:var(--lake-500); --brand-ink:#bfe4ef; --accent:var(--amber-400);
    --ring:rgba(46,151,181,.45);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 6px 20px rgba(0,0,0,.5);
    --shadow-lg:0 20px 56px rgba(0,0,0,.6);

    --t-fiesta_patronal:#f0a24e; --t-religiosa:#a68ae0; --t-civica:#4bb6d6;
    --t-cultural:#e07ac8; --t-tianguis:#69c078; --t-comunitaria:#8496f0; --t-musica:#f06a9c;
    --conf-ok:#5fcea6; --conf-mid:var(--amber-400); --conf-low:#e88;
  }
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.45; -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;
}
a { color:var(--brand); }
button { font-family:inherit; cursor:pointer; }
h1,h2,h3 { margin:0; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 clamp(12px,3vw,24px); width:100%; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.skip { position:absolute; left:-9999px; top:0; background:var(--brand); color:#fff; padding:10px 14px; z-index:1000; border-radius:0 0 8px 0; }
.skip:focus { left:0; }

/* ---------- Header (shared with Directorio) ---------- */
.site-header { position:sticky; top:0; z-index:600; background:var(--lake-800); color:#eaf6fa; box-shadow:var(--shadow-sm); }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:var(--header-h); gap:12px; }
.brand { display:flex; align-items:center; gap:10px; color:#eaf6fa; text-decoration:none; }
.brand-mark { color:var(--amber-400); display:flex; }
.brand-text { display:flex; flex-direction:column; line-height:1.05; }
.brand-text b { font-size:1.05rem; letter-spacing:.2px; }
.brand-text em { font-style:normal; font-size:.72rem; color:#a9d4e0; letter-spacing:.3px; }
.header-actions { display:flex; align-items:center; gap:10px; }
.header-link { color:#cfeaf1; text-decoration:none; font-size:.85rem; white-space:nowrap; }
.header-link:hover { color:#fff; text-decoration:underline; }
.lang-toggle { display:inline-flex; background:rgba(255,255,255,.10); border-radius:999px; padding:3px; }
.lang-toggle button { border:0; background:transparent; color:#cfeaf1; font-size:.78rem; font-weight:600; padding:4px 11px; border-radius:999px; }
.lang-toggle button.is-active { background:var(--amber-500); color:#2a1602; }

/* ---------- Hero ---------- */
.hero { background:linear-gradient(180deg,var(--lake-800),var(--lake-700)); color:#eaf6fa; padding:20px 0 22px; }
.hero h1 { margin:0 0 6px; font-size:clamp(1.35rem,3.4vw,2rem); letter-spacing:-.01em; }
.hero-sub { margin:0 0 8px; font-size:clamp(.9rem,2vw,1.02rem); color:#d5edf3; max-width:64ch; }
.hero-today { margin:0; font-size:.92rem; color:#bfe0ea; }
.hero-today strong { color:var(--amber-400); font-variant-numeric:tabular-nums; }

/* ---------- ¿Por qué los cohetes hoy? ---------- */
.cohetes-wrap { margin-top:-14px; position:relative; z-index:2; }
.cohetes-panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-md); padding:14px 16px 16px; }
.cp-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.cp-title { display:flex; align-items:center; gap:8px; font-size:1.05rem; color:var(--ink); }
.cp-spark { font-size:1.15rem; line-height:1; }
.cp-townpick select {
  height:38px; max-width:230px; padding:0 30px 0 11px; border:1px solid var(--line-strong);
  border-radius:10px; background:var(--surface); color:var(--ink); font-size:.88rem; box-shadow:var(--shadow-sm);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%237d8b91' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
}
.cp-townpick select:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--ring); }
.cp-body { display:flex; flex-direction:column; gap:9px; }
.cp-item { display:flex; gap:11px; padding:11px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); border-left:4px solid var(--tc,var(--t-fallback)); cursor:pointer; transition:border-color .12s, box-shadow .12s; }
.cp-item:hover { box-shadow:var(--shadow-sm); border-color:var(--line-strong); border-left-color:var(--tc,var(--t-fallback)); }
.cp-item-top .cp-loud { color:var(--tc,var(--t-fallback)); }
.cp-rank { flex:0 0 auto; font-size:1.35rem; line-height:1.1; }
.cp-item-main { min-width:0; flex:1; }
.cp-sentence { margin:0 0 6px; font-size:.98rem; color:var(--ink); font-weight:600; line-height:1.3; }
.cp-sentence .cp-day { color:var(--tc,var(--t-fallback)); }
.cp-sub { margin:0 0 7px; font-size:.82rem; color:var(--ink-soft); }
.cp-elems { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:6px; }
.cp-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.74rem; color:var(--ink-faint); }
.cp-src { font-style:italic; }
.cp-empty { padding:14px 12px; border:1px dashed var(--line-strong); border-radius:var(--radius-sm); color:var(--ink-soft); font-size:.92rem; background:var(--surface-2); }
.cp-empty strong { color:var(--ink); }
.cp-more { border:0; background:transparent; color:var(--brand); font-size:.85rem; font-weight:600; padding:4px 0; text-align:left; }
.cp-more:hover { text-decoration:underline; }

.elem-chip { display:inline-flex; align-items:center; gap:4px; font-size:.72rem; padding:2px 8px; border-radius:999px; background:var(--bg-soft); color:var(--ink-soft); line-height:1.5; white-space:nowrap; }
.elem-chip.is-loud { background:rgba(217,119,43,.14); color:var(--amber-600); font-weight:600; }
@media (prefers-color-scheme: dark){ .elem-chip.is-loud { background:rgba(242,163,78,.16); color:var(--amber-400); } }

/* confidence badges */
.badge-conf { font-size:.66rem; padding:2px 8px; border-radius:6px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; white-space:nowrap; }
.conf-confirmado { background:rgba(47,169,128,.15); color:var(--conf-ok); }
.conf-probable { background:rgba(217,119,43,.14); color:var(--conf-mid); }
.conf-por-confirmar { background:rgba(209,91,91,.14); color:var(--conf-low); }

/* ---------- Toolbar ---------- */
.cal-toolbar { position:sticky; top:var(--header-h); z-index:400; background:var(--bg); padding-top:14px; padding-bottom:10px; margin-top:16px; border-bottom:1px solid var(--line); }
.tb-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.tb-row-nav { justify-content:space-between; margin-bottom:10px; }
.seg-toggle { display:inline-flex; background:var(--bg-soft); border:1px solid var(--line); border-radius:999px; padding:3px; }
.seg-toggle button { border:0; background:transparent; color:var(--ink-soft); font-size:.85rem; font-weight:600; padding:7px 16px; border-radius:999px; }
.seg-toggle button.is-active { background:var(--brand); color:#fff; }
.navgroup { display:inline-flex; align-items:center; gap:8px; }
.navbtn { width:38px; height:38px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); border-radius:10px; font-size:1.25rem; line-height:1; box-shadow:var(--shadow-sm); }
.navbtn:hover { border-color:var(--brand); color:var(--brand); }
.today-btn { height:38px; padding:0 16px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); border-radius:10px; font-size:.85rem; font-weight:600; box-shadow:var(--shadow-sm); }
.today-btn:hover { border-color:var(--brand); color:var(--brand); }
.period-label { font-size:1.05rem; font-weight:700; color:var(--ink); text-transform:capitalize; margin-left:6px; min-width:9ch; }

.tb-row-filters { justify-content:space-between; }
.type-filters { display:flex; flex-wrap:wrap; gap:7px; }
.type-chip { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); border-radius:999px; font-size:.82rem; font-weight:600; box-shadow:var(--shadow-sm); transition:opacity .12s, border-color .12s; }
.type-chip .tc-dot { width:10px; height:10px; border-radius:50%; background:var(--tc,var(--t-fallback)); flex:0 0 auto; }
.type-chip .tc-count { font-size:.72rem; color:var(--ink-faint); font-weight:600; }
.type-chip[aria-pressed="true"] { border-color:var(--tc,var(--t-fallback)); }
.type-chip[aria-pressed="false"] { opacity:.42; }
.type-chip[aria-pressed="false"] .tc-dot { background:var(--ink-faint); }
.type-chip:hover { border-color:var(--tc,var(--t-fallback)); }
.tf-actions { display:inline-flex; gap:6px; }
.tf-mini { height:34px; padding:0 12px; border:1px solid var(--line); background:transparent; color:var(--ink-soft); border-radius:999px; font-size:.78rem; font-weight:600; }
.tf-mini:hover { border-color:var(--brand); color:var(--brand); }

/* ---------- Views shell ---------- */
.views { padding-top:16px; padding-bottom:44px; flex:1 0 auto; }
.loadstate { text-align:center; color:var(--ink-faint); padding:36px 0; font-size:.9rem; }
.loadstate.done { display:none; }
.view-empty { text-align:center; padding:44px 16px; color:var(--ink-soft); }
.view-empty p:first-child { font-size:1.1rem; font-weight:650; color:var(--ink); margin:0 0 6px; }

/* ---------- Month grid ---------- */
.month-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.mg-dow { background:var(--surface-2); color:var(--ink-soft); font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; text-align:center; padding:8px 2px; }
.mg-cell { background:var(--surface); min-height:106px; padding:6px 6px 8px; display:flex; flex-direction:column; gap:4px; cursor:default; position:relative; }
.mg-cell.is-outside { background:var(--surface-2); }
.mg-cell.is-outside .mg-daynum { color:var(--ink-faint); }
.mg-cell.has-events { cursor:pointer; }
.mg-cell.has-events:hover { background:var(--bg-soft); }
.mg-daynum { font-size:.82rem; font-weight:700; color:var(--ink); width:26px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:8px; }
.mg-cell.is-today .mg-daynum { background:var(--brand); color:#fff; }
.mg-chips { display:flex; flex-direction:column; gap:3px; min-width:0; }
.mg-chip { display:flex; align-items:center; gap:5px; font-size:.72rem; line-height:1.25; padding:2px 6px 2px 5px; border-radius:6px; background:var(--surface-2); border-left:3px solid var(--tc,var(--t-fallback)); color:var(--ink); text-align:left; border-top:0; border-right:0; border-bottom:0; width:100%; overflow:hidden; }
.mg-chip .mg-chip-txt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mg-chip:hover { background:var(--bg-soft); }
.mg-more { font-size:.7rem; color:var(--ink-soft); font-weight:600; background:transparent; border:0; padding:2px 4px; text-align:left; }
.mg-more:hover { color:var(--brand); }

/* ---------- Week agenda ---------- */
.week-agenda { display:flex; flex-direction:column; gap:10px; }
.wa-day { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 14px; box-shadow:var(--shadow-sm); }
.wa-day.is-today { border-color:var(--brand); box-shadow:0 0 0 2px var(--ring); }
.wa-date { font-size:.9rem; font-weight:700; color:var(--ink); text-transform:capitalize; margin:0 0 8px; display:flex; align-items:center; gap:8px; }
.wa-date .wa-today-tag { font-size:.66rem; font-weight:700; text-transform:uppercase; background:var(--brand); color:#fff; padding:2px 7px; border-radius:999px; }
.wa-empty { font-size:.85rem; color:var(--ink-faint); }
.wa-events { display:flex; flex-direction:column; gap:6px; }

/* ---------- Agenda / list ---------- */
.agenda-list { display:flex; flex-direction:column; gap:16px; }
.al-daygroup { display:flex; flex-direction:column; gap:6px; }
.al-date { font-size:.86rem; font-weight:700; color:var(--brand-ink); text-transform:capitalize; padding:2px 2px 4px; border-bottom:1px solid var(--line); margin-bottom:2px; display:flex; align-items:center; gap:8px; }
.al-date .al-today-tag { font-size:.64rem; font-weight:700; text-transform:uppercase; background:var(--brand); color:#fff; padding:2px 7px; border-radius:999px; }

/* ---------- Shared event row (week + agenda + day modal) ---------- */
.ev-row { display:flex; align-items:flex-start; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); border-left:4px solid var(--tc,var(--t-fallback)); cursor:pointer; transition:box-shadow .12s, border-color .12s; }
.ev-row:hover { box-shadow:var(--shadow-sm); border-color:var(--line-strong); border-left-color:var(--tc,var(--t-fallback)); }
.ev-main { min-width:0; flex:1; }
.ev-name { margin:0; font-size:.92rem; font-weight:650; color:var(--ink); line-height:1.28; }
.ev-sub { margin:2px 0 0; font-size:.78rem; color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:5px 9px; align-items:center; }
.ev-type-tag { display:inline-flex; align-items:center; gap:5px; }
.ev-type-tag .tc-dot { width:8px; height:8px; border-radius:50%; background:var(--tc,var(--t-fallback)); }
.ev-daytag { font-size:.7rem; font-weight:700; color:var(--tc,var(--t-fallback)); background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:1px 8px; white-space:nowrap; }

/* ---------- Modal ---------- */
.modal-overlay { position:fixed; inset:0; z-index:900; background:rgba(8,20,24,.55); display:flex; align-items:flex-start; justify-content:center; padding:5vh 16px 16px; overflow-y:auto; }
.modal-overlay[hidden] { display:none; }
@media (prefers-color-scheme: dark){ .modal-overlay { background:rgba(0,0,0,.66); } }
.modal { position:relative; width:100%; max-width:560px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:22px 22px 20px; }
.modal-close { position:absolute; top:12px; right:12px; width:34px; height:34px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink-soft); border-radius:9px; font-size:.9rem; }
.modal-close:hover { border-color:var(--line-strong); color:var(--ink); }
.m-type-chip { display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:700; padding:3px 10px; border-radius:999px; color:#fff; background:var(--tc,var(--t-fallback)); margin-bottom:10px; }
.m-title { font-size:1.2rem; line-height:1.25; color:var(--ink); margin:0 0 3px; padding-right:28px; }
.m-title-alt { font-size:.86rem; color:var(--ink-faint); margin:0 0 12px; font-style:italic; }
.m-dates { display:flex; align-items:center; gap:8px; font-size:.95rem; font-weight:600; color:var(--brand-ink); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:9px 12px; margin:0 0 14px; }
.m-dates .m-dates-ico { color:var(--brand); flex:0 0 auto; }
.m-dates .m-dates-recur { font-weight:500; color:var(--ink-soft); font-size:.82rem; }
.m-section { margin:0 0 12px; }
.m-label { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); margin:0 0 5px; }
.m-loc { font-size:.9rem; color:var(--ink-soft); margin:0; display:flex; align-items:center; gap:6px; }
.m-desc { font-size:.92rem; color:var(--ink); line-height:1.55; margin:0; }
.m-elems { display:flex; flex-wrap:wrap; gap:6px; }
.m-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.m-source { font-size:.76rem; color:var(--ink-faint); font-style:italic; max-width:60%; }
.m-dirlink { display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:600; color:var(--brand); text-decoration:none; border:1px solid var(--line-strong); border-radius:999px; padding:6px 13px; background:var(--surface-2); }
.m-dirlink:hover { border-color:var(--brand); background:var(--lake-100); text-decoration:none; }
@media (prefers-color-scheme: dark){ .m-dirlink:hover { background:rgba(46,151,181,.16); } }
.m-daylist { display:flex; flex-direction:column; gap:7px; margin-top:6px; }

/* ---------- Footer (shared) ---------- */
.site-footer { background:var(--lake-900); color:#c8dde4; padding:28px 0; margin-top:auto; flex:0 0 auto; }
.footer-inner { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; font-size:.85rem; }
.site-footer a { color:#8fd0e0; }
.site-footer strong { color:#eaf6fa; }
.foot-badge-legend { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.foot-suggest a { font-weight:700; }
.foot-priv { color:#93b4bd; font-size:.8rem; }
.foot-tz { margin-top:6px; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .mg-cell { min-height:74px; padding:4px 3px 6px; }
  .mg-chip .mg-chip-txt { display:none; }             /* dots-only chips on small screens */
  .mg-chip { justify-content:center; padding:3px; border-left-width:0; background:var(--tc,var(--t-fallback)); height:7px; border-radius:999px; }
  .mg-chips { flex-direction:row; flex-wrap:wrap; gap:3px; }
  .mg-more { width:100%; }
  .period-label { width:100%; margin-left:0; order:3; text-align:center; }
  .tb-row-nav { justify-content:center; }
  .cp-title { font-size:.98rem; }
}
@media (max-width: 560px) {
  .header-link[data-i18n="back_site"] { display:none; }
  .tb-row-filters { flex-direction:column; align-items:flex-start; }
  .m-source { max-width:100%; }
}
@media (prefers-reduced-motion: reduce){ *{ transition:none!important; } }

/* Event location → Google Maps outlink */
.m-loc .m-maplink { color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:6px; border-bottom:1px dashed var(--line-strong,currentColor); }
.m-loc .m-maplink:hover { color:var(--accent); }
.m-loc .m-maplink svg { opacity:.6; flex:none; }
.m-loc .m-maplink:hover svg { opacity:1; }