/* =============================================================
   THEME · Calendar · Madrid
   Marca Madrid: azul #004373 · azul activo #005692 · gris #494949 · blanco.
   Rebrand per city by editing the :root tokens.
   ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700&family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  /* ---- BRAND (Calendar Madrid) ---- */
  --brand:        #004373;      /* azul principal Madrid */
  --brand-ink:    #005692;      /* azul activo Madrid */
  --brand-soft:   #E5F0F6;
  --wm-grey:      #494949;      /* gris del nombre de ciudad */

  /* ---- grey structure ---- */
  --ink:          #1B1C1E;
  --ink-2:        #45484D;
  --muted:        #71767E;
  --hair:         #E7E9ED;
  --surface:      #F5F6F8;
  --bg:           #FFFFFF;

  --radius:       14px;
  --radius-sm:    9px;
  --shadow:       0 1px 2px rgba(20,22,26,.05), 0 8px 24px rgba(20,22,26,.06);
  --font:         'Inter', system-ui, sans-serif;
  --display:      'Space Grotesk', system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  font-family:var(--font); color:var(--ink);
  background:#E9EBEF; -webkit-font-smoothing:antialiased; line-height:1.4;
}
a{ color:inherit; }
button{ font-family:inherit; }

/* Phone-like frame (looks like a phone on desktop too) */
.app{
  max-width:430px; margin:0 auto; min-height:100vh;
  background:var(--bg); position:relative; padding-bottom:56px;
  box-shadow:0 0 0 1px var(--hair), 0 24px 60px rgba(20,22,26,.14);
}

/* ---------- brand (logo at the very top) ---------- */
.brand{ display:flex; align-items:center; gap:11px; padding:16px 18px 12px; background:var(--bg); }
.logo{ height:30px; width:auto; flex:0 0 auto; display:block; }
/* Wordmark matches the logo: "calendar" azul + ".madrid" gris.
   To use the real logo image: put logo.svg in assets/ and set
   .logo{ background:url(../assets/logo.svg) center/contain no-repeat; }
   then drop the inline <svg> and .wordmark from brandBar(). */
.wordmark{ font-family:'Baloo 2', var(--display); font-size:23px; font-weight:700; letter-spacing:-.2px;
  display:flex; align-items:center; line-height:1; }
.wm-cal{ color:var(--brand); }
.wm-dot{ color:var(--brand); }
.wm-madrid{ color:var(--wm-grey); }
.brand-sub{
  margin-left:auto; font-size:11px; font-weight:600; letter-spacing:.4px;
  text-transform:uppercase; color:var(--brand-ink);
  background:var(--brand-soft); padding:4px 8px; border-radius:20px;
}

/* ---------- search bar (V2) ---------- */
.searchbar{ position:relative; padding:4px 18px 12px; }
.searchbar svg{ position:absolute; left:32px; top:calc(50% - 6px); width:16px; height:16px; color:var(--brand); pointer-events:none; }
.searchbar input{
  width:100%; border:1px solid var(--hair); border-radius:10px;
  padding:11px 14px 11px 40px; font-size:15px; background:var(--surface); color:var(--ink);
}
.searchbar input::placeholder{ color:var(--muted); }
.searchbar input:focus{ outline:none; border-color:var(--brand); background:#fff; }

/* ---------- horizontal scrollers (week + categories) ---------- */
.weeknav, .catbar{
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scroll-snap-type:x proximity;
  background:var(--bg);
  /* right-edge fade = visible "swipe for more" hint */
  -webkit-mask-image:linear-gradient(to right, #000 87%, transparent 100%);
          mask-image:linear-gradient(to right, #000 87%, transparent 100%);
}
.weeknav::-webkit-scrollbar, .catbar::-webkit-scrollbar{ display:none; }
.weeknav{ padding:2px 30px 12px 18px; }
.catbar{ padding:4px 30px 14px 18px; border-bottom:1px solid var(--hair); }
.week, .cat{ scroll-snap-align:start; flex:0 0 auto; }

.week{
  text-align:left; cursor:pointer; border:1px solid var(--hair); background:var(--bg);
  border-radius:var(--radius-sm); padding:8px 12px; min-width:104px;
  display:flex; flex-direction:column; gap:2px; transition:.15s;
}
.week .wk-name{ font-size:12.5px; font-weight:600; color:var(--ink-2); white-space:nowrap; }
.week .wk-range{ font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
.week.is-active{ background:var(--brand); border-color:var(--brand); }
.week.is-active .wk-name{ color:#fff; }
.week.is-active .wk-range{ color:#DCEAF3; }

.cat{
  cursor:pointer; white-space:nowrap; border:1px solid var(--hair); background:var(--bg);
  border-radius:20px; padding:8px 14px; font-size:13px; font-weight:600; color:var(--ink-2);
  display:flex; align-items:center; gap:7px; transition:.15s;
}
.cat .cdot{ width:8px; height:8px; border-radius:50%; }

/* ---------- day (floating header on scroll) ---------- */
.day{ border-bottom:1px solid var(--hair); }
.day-head{
  width:100%; display:flex; align-items:center; gap:8px; cursor:pointer;
  background:var(--surface); border:0; border-top:1px solid var(--hair); text-align:left;
  padding:11px 18px; position:sticky; top:0; z-index:10;
}
.day-label{ font-family:var(--display); font-weight:600; font-size:12.5px; letter-spacing:.6px; color:var(--ink); }
.day-count{ margin-left:auto; font-size:11.5px; color:var(--muted); }
.day-caret{ font-size:14px; color:var(--muted); transition:.2s; }
.day.is-open .day-caret{ transform:rotate(180deg); }
.day-body{ display:none; }
.day.is-open .day-body{ display:block; }
.day.is-empty .day-head{ cursor:default; background:var(--bg); }
.day.is-empty .day-label{ color:var(--muted); font-weight:500; }

/* ---------- compact event: primary colour line (left) + secondary dots (right) ---------- */
.event{
  width:100%; cursor:pointer; text-align:left; display:flex; gap:13px; align-items:flex-start;
  background:var(--bg); border:0; border-bottom:1px solid var(--hair);
  border-left:5px solid var(--cat, transparent); padding:13px 16px 13px 14px;
}
.event:last-child{ border-bottom:0; }
.event:active{ background:var(--surface); }
.event .time{
  flex:0 0 auto; min-width:46px; padding-top:1px;
  font-family:var(--display); font-weight:600; font-size:13px;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.event .body{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.event .title{ font-size:14.5px; font-weight:600; line-height:1.3; color:var(--ink); }
.event .place{ font-size:12.5px; color:var(--muted); }
.event .dots{ flex:0 0 auto; display:flex; gap:5px; align-items:center; padding-top:5px; }
.sdot{ width:9px; height:9px; border-radius:50%; }

/* ---------- expanded detail (inline) ---------- */
.detail{ display:none; background:var(--surface); border-bottom:1px solid var(--hair); }
.detail.is-open{ display:block; }
.detail-inner{ padding:2px 18px 18px; }
.detail-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12px; color:var(--muted); padding-top:14px; }
.detail-meta .sep{ opacity:.5; }
.detail-summary{ font-size:14px; color:var(--ink-2); margin:12px 0; line-height:1.5; }
.detail-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.cattag{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-2);
  background:var(--bg); border:1px solid var(--hair); border-radius:20px; padding:3px 10px;
}
.cattag::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--c); }
.cattag.is-primary{ font-weight:600; color:var(--ink); }
.detail-actions{ display:flex; align-items:center; gap:14px; }
.cta{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  background:var(--brand); color:#fff; font-weight:600; font-size:14px;
  padding:11px 18px; border-radius:var(--radius-sm);
}
.cta span{ font-size:13px; }
.src{ font-size:12px; color:var(--muted); }

/* ---------- empty state ---------- */
.empty-week{ text-align:center; color:var(--ink-2); font-size:14.5px; padding:60px 30px; line-height:1.6; }
.empty-week span{ color:var(--muted); font-size:13px; }

/* ---------- version footer tag ---------- */
.proto-tag{
  position:fixed; left:50%; transform:translateX(-50%); bottom:14px; z-index:30;
  background:var(--ink); color:#fff; font-size:11.5px; font-weight:600;
  padding:7px 14px; border-radius:20px; opacity:.92; letter-spacing:.3px;
}
.proto-tag a{ color:#C9CCD2; text-decoration:none; margin-left:8px; }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }

/* ---------- powered-by (theBizTour) ---------- */
.powered-wrap{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:20px 16px 30px; text-align:center; }
.powered{ display:flex; align-items:center; justify-content:center; gap:10px; text-decoration:none; color:var(--muted); }
.powered span{ font-size:12px; letter-spacing:.3px; font-weight:500; }
.powered img{ height:30px; width:auto; display:block; opacity:.95; }
.powered:hover span{ color:var(--ink-2); }
.formerly{ font-size:11.5px; line-height:1.25; color:var(--muted); text-decoration:none; }
.formerly:hover{ color:var(--brand); text-decoration:underline; text-underline-offset:2px; }
.nowrap{ white-space:nowrap; }
.wilhelm-link{ color:var(--brand); font-weight:600; }