/* Layout: banda verde Limón Soda con el avance arriba; abajo, una columna de trabajo con pestañas y filas por día. */
:root {
  --bg: #F5F4EE; --surface: #FFFFFF; --line: #E0DED4; --fg: #25293A; --muted: #5B6075;
  --blue: #414FFF; --blue-ink: #2F3BD1; --green: #1F7A33; --green-soft: #DDF0DF;
  --yellow: #F2E63A; --yellow-soft: #FBF3B0; --yellow-ink: #6B5600; --red: #B3261E; --red-soft: #F9DEDC;
  --band-a: #12501F; --band-b: #1B6E2E; --band-c: #3C9A36; --band-fg: #F5F4EE; --band-muted: #CFE6CB;
  --f-display: 'League Spartan', 'Arial', sans-serif;
  --f-body: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --f-num: 'Barlow Condensed', 'Arial Narrow', sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #151812; --surface: #1E2219; --line: #33392C; --fg: #EEF0E8; --muted: #A9AF9E;
  --blue: #8C95FF; --blue-ink: #A9B0FF; --green: #6CCB7A; --green-soft: #1F3A23;
  --yellow-soft: #3A3510; --yellow-ink: #F2E63A; --red: #FF8A80; --red-soft: #3D1F1C;
  color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #151812; --surface: #1E2219; --line: #33392C; --fg: #EEF0E8; --muted: #A9AF9E;
  --blue: #8C95FF; --blue-ink: #A9B0FF; --green: #6CCB7A; --green-soft: #1F3A23;
  --yellow-soft: #3A3510; --yellow-ink: #F2E63A; --red: #FF8A80; --red-soft: #3D1F1C;
  color-scheme: dark }
* { box-sizing: border-box }
body { background: var(--bg); color: var(--fg); font-family: var(--f-body); font-size: 15px; line-height: 1.45 }
.wrap { max-width: 1040px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.band { background: linear-gradient(125deg, var(--band-a), var(--band-b) 55%, var(--band-c)); color: var(--band-fg) }
.band .wrap { padding-block: 28px 24px; display: grid; gap: 20px }
.eyebrow { font-family: var(--f-display); font-weight: 600; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--yellow) }
h1 { font-family: var(--f-num); font-style: italic; font-weight: 800; font-size: clamp(36px, 7vw, 56px); line-height: .95; text-transform: uppercase; margin: 6px 0 0; text-wrap: balance }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px }
.stat { background: rgba(8, 40, 14, .35); border-radius: 14px; padding: 14px 16px; display: grid; gap: 6px; min-width: 0 }
.stat .k { font-size: 13px; color: var(--band-muted) }
.stat .v { font-family: var(--f-num); font-style: italic; font-weight: 800; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums }
.stat .v small { font-size: 18px; color: var(--band-muted); font-weight: 700 }
.bar { height: 6px; border-radius: 3px; background: rgba(245, 244, 238, .2); overflow: hidden }
.bar i { display: block; height: 100%; background: var(--yellow); width: 0; transition: width .4s }
.stat.alert .v { color: var(--yellow) }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-top: 20px; overflow-x: auto }
.tab { font: 600 15px var(--f-body); color: var(--muted); background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 14px; cursor: pointer; white-space: nowrap }
.tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--blue) }
.tab:focus-visible, .chip:focus-visible, .box:focus-visible, input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px }

.filters { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding-block: 16px }
.group { display: flex; flex-wrap: wrap; gap: 6px }
.chip { font: 600 13px var(--f-body); color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg) }
.toggle { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); margin-left: auto; cursor: pointer }

.day { margin-bottom: 18px }
.day-h { display: flex; align-items: baseline; gap: 10px; padding: 8px 2px; position: sticky; top: env(safe-area-inset-top, 0px); background: var(--bg); z-index: 2 }
.day-h h2 { font-family: var(--f-display); font-weight: 700; font-size: 20px; margin: 0 }
.day-h .count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; margin-left: auto }
.list { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden }
.row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; border-top: 1px solid var(--line) }
.row:first-child { border-top: 0 }
.row.done .title { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line) }
.box { width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--fg); background: none; cursor: pointer; display: grid; place-items: center; padding: 0; margin-top: 1px }
.box svg { width: 16px; height: 16px; opacity: 0 }
.row.done .box { background: var(--green); border-color: var(--green) }
.row.done .box svg { opacity: 1 }
.box[disabled] { cursor: default; opacity: .5 }
.title { font-weight: 600; overflow-wrap: anywhere }
.meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center }
.tag { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted) }
.tag.propio { border-left: 4px solid var(--blue) }
.tag.influencer { border-left: 4px solid var(--green) }
.tag.stories { border-left: 4px solid var(--line) }
.pill { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px }
.pill.pend { background: var(--yellow-soft); color: var(--yellow-ink) }
.pill.late { background: var(--red-soft); color: var(--red) }
.pill.today { background: var(--blue); color: #FFFFFF }
.pill.ok { background: var(--green-soft); color: var(--green) }
a.pill { text-decoration: none }
a.pill:hover { filter: brightness(.96) }
.who { font-size: 12px; color: var(--muted) }
.red { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; text-align: right }
.link { display: flex; gap: 6px; margin-top: 8px; max-width: 420px }
.link input { flex: 1; min-width: 0; font: 13px var(--f-body); color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px }
.link a { font-size: 13px; color: var(--blue-ink); overflow-wrap: anywhere }

.hito-row { grid-template-columns: 28px 92px minmax(0, 1fr) auto }
.date { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px }
.panel { padding-block: 8px 48px }
.note { font-size: 14px; color: var(--muted); max-width: 65ch }
.empty { padding: 32px 20px; text-align: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--line); border-radius: 14px }
.ref { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px }
.ref section { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px }
.ref h3 { font-family: var(--f-display); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--green); margin: 0 0 10px }
.ref ol { margin: 0; padding-left: 20px; display: grid; gap: 8px }
.legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px }

@media (max-width: 560px) {
  .row { grid-template-columns: 28px minmax(0, 1fr) }
  .row .red { grid-column: 2; text-align: left; order: -1 }
  .hito-row { grid-template-columns: 28px minmax(0, 1fr) }
  .hito-row .date { grid-column: 2 }
  .toggle { margin-left: 0 }
}
@media (prefers-reduced-motion: reduce) { .bar i { transition: none } }

/* Web propia: barra de usuario, pantalla de ingreso y aviso */
.top { display: flex; justify-content: space-between; align-items: start; gap: 16px; flex-wrap: wrap }
.me { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--band-muted) }
.me button { font: 600 13px var(--f-body); color: var(--band-fg); background: rgba(8, 40, 14, .35); border: 1px solid rgba(245, 244, 238, .25); border-radius: 8px; padding: 6px 12px; cursor: pointer }
.login { min-height: 100%; display: grid; place-items: center; padding-block: 48px; background: linear-gradient(125deg, var(--band-a), var(--band-b) 55%, var(--band-c)); color: var(--band-fg) }
.login .card { max-width: 440px; display: grid; gap: 18px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.login p { color: var(--band-muted) }
.login a.btn { justify-self: start; display: inline-flex; align-items: center; gap: 10px; background: var(--yellow); color: #1B1E2B; font: 700 16px var(--f-body); text-decoration: none; padding: 12px 18px; border-radius: 10px }
.login a.btn:focus-visible { outline: 2px solid var(--band-fg); outline-offset: 3px }
.err { background: rgba(179, 38, 30, .25); border: 1px solid rgba(255, 138, 128, .6); color: #FFE3E0; padding: 10px 14px; border-radius: 10px; font-size: 14px }
.live { font-size: 12px; color: var(--band-muted); display: inline-flex; gap: 6px; align-items: center }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow) }
.live.off i { background: #FF8A80 }
#flash { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-size: 14px; z-index: 20; max-width: calc(100% - 32px) }
html, body { height: 100% }
[hidden] { display: none !important }
.form { display: grid; gap: 10px }
.form label { font-size: 13px; font-weight: 600; color: var(--band-fg) }
.form > div { display: grid; gap: 10px }
.form input { font: 16px var(--f-body); color: #1B1E2B; background: #F5F4EE; border: 0; border-radius: 10px; padding: 12px 14px; width: 100% }
.form input:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px }
.login .btn { justify-self: start; margin-top: 6px; background: var(--yellow); color: #1B1E2B; font: 700 16px var(--f-body); border: 0; padding: 12px 22px; border-radius: 10px; cursor: pointer }
.login .btn:focus-visible { outline: 2px solid var(--band-fg); outline-offset: 3px }
.login .btn[disabled] { opacity: .6; cursor: default }
.me a.home { color: var(--band-fg); text-decoration: none; font-weight: 600; padding: 6px 10px; border-radius: 8px }
.me a.home:hover { background: rgba(8, 40, 14, .35) }
/* Volver a la portada de la campaña (arriba del título) */
.volver-c { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 6px 13px 6px 10px; border-radius: 999px; text-decoration: none;
  font: 600 13px var(--f-body); color: var(--band-fg); background: rgba(8, 40, 14, .35); border: 1px solid rgba(245, 244, 238, .2); transition: background .25s }
.volver-c:hover { background: rgba(8, 40, 14, .55) }
.volver-c span { color: var(--yellow); transition: transform .35s cubic-bezier(.2, .8, .2, 1) }
.volver-c:hover span { transform: translateX(-3px) }
.volver-c:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px }