/* Layout: marcador del countdown arriba, cuatro pestañas (Hoy · Bandeja · Métricas · Equipo), una columna en el celular */
:root {
  --bg: #EEF1EC; --surface: #FFFFFF; --sunk: #E4E8E2; --ink: #14181C; --muted: #59626B; --line: #D3D8D0;
  --accent: #2547D0; --accent-ink: #FFFFFF; --chip: #E3E8FA; --hi: #E2AE14;
  --good: #1E844A; --warn: #A86400; --crit: #BE3329; --good-bg: #E1F2E8; --warn-bg: #F7ECD9; --crit-bg: #F8E3E0;
  --c-ig: #C2417A; --c-tt: #1B9AA6; --c-yt: #D9472B;
  --f-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --r: 10px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0F1215; --surface: #171B1F; --sunk: #12161A; --ink: #EBEEE9; --muted: #98A1A9; --line: #283037;
  --accent: #8098FF; --accent-ink: #0C1122; --chip: #1E2643; --hi: #F0C440;
  --good: #52C483; --warn: #E6A646; --crit: #F2786A; --good-bg: #15291E; --warn-bg: #2C2213; --crit-bg: #2E1714;
  --c-ig: #E7739F; --c-tt: #4CC3CD; --c-yt: #F07A5E; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #0F1215; --surface: #171B1F; --sunk: #12161A; --ink: #EBEEE9; --muted: #98A1A9; --line: #283037;
  --accent: #8098FF; --accent-ink: #0C1122; --chip: #1E2643; --hi: #F0C440;
  --good: #52C483; --warn: #E6A646; --crit: #F2786A; --good-bg: #15291E; --warn-bg: #2C2213; --crit-bg: #2E1714;
  --c-ig: #E7739F; --c-tt: #4CC3CD; --c-yt: #F07A5E; color-scheme: dark }

* { box-sizing: border-box }
body { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg) }
.wrap { max-width: 760px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 0 48px }
button, input, select, textarea { font: inherit; color: inherit }
button { cursor: pointer }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
a { color: var(--accent) }
.num { font-variant-numeric: tabular-nums }

/* Cabecera fija con las pestañas */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); margin: 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))) 0; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)) }
.brand { display: flex; align-items: baseline; justify-content: space-between; gap: 12px }
.brand b { font-family: var(--f-display); font-weight: 700; font-size: 22px; letter-spacing: .02em }
.brand span { color: var(--muted); font-size: 13px }
.tabs { display: flex; gap: 2px; margin-top: 8px; overflow-x: auto; scrollbar-width: none }
.tabs button { flex: 1 0 auto; background: none; border: 0; border-bottom: 3px solid transparent; padding: 8px 10px 9px; font-family: var(--f-display); font-weight: 600; font-size: 17px; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 6px }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent) }
.badge { background: var(--crit); color: #fff; font-family: var(--f-body); font-size: 11px; font-weight: 600; border-radius: 99px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0 }

section[role="tabpanel"] { padding-top: 18px; display: grid; gap: 18px }
h2 { font-family: var(--f-display); font-weight: 600; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px }
.stack { display: grid; gap: 10px }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.muted { color: var(--muted) }
.small { font-size: 13px }
.empty { color: var(--muted); font-size: 14px; padding: 14px; border: 1px dashed var(--line); border-radius: var(--r); background: var(--sunk) }

/* Marcador */
.board { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: end }
.big { font-family: var(--f-display); font-weight: 700; font-size: clamp(72px, 22vw, 128px); line-height: .82; letter-spacing: -.01em }
.big small { display: block; font-size: 15px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); line-height: 1.2; margin-bottom: 6px }
.facts { display: grid; gap: 6px; padding-bottom: 6px; min-width: 0 }
.fact { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 4px; font-size: 14px }
.fact b { font-family: var(--f-display); font-weight: 600; font-size: 19px; line-height: 1 }
.rail { grid-column: 1 / -1; position: relative; height: 10px; background: var(--sunk); border-radius: 99px; overflow: hidden; margin-top: 10px }
.rail i { position: absolute; inset: 0; background: var(--accent); border-radius: 99px; transform-origin: left center }
.rail em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--hi) }
.railnote { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: 12px; color: var(--muted) }

.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--chip); color: var(--ink); border-radius: 99px; padding: 3px 10px; font-size: 13px; font-weight: 500 }
.chip.hito { background: var(--hi); color: #1A1500 }
.pill { display: inline-block; border-radius: 99px; padding: 2px 9px; font-size: 12px; font-weight: 600; letter-spacing: .02em }
.pill.ok { background: var(--good-bg); color: var(--good) }
.pill.warn { background: var(--warn-bg); color: var(--warn) }
.pill.crit { background: var(--crit-bg); color: var(--crit) }
.pill.off { background: var(--sunk); color: var(--muted) }

/* Guion */
.dayhead { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.dayhead h3 { font-family: var(--f-display); font-weight: 700; font-size: 26px; margin: 0; line-height: 1.05 }
.nav { display: flex; gap: 6px }
.icon { width: 40px; height: 40px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-size: 18px; display: inline-flex; align-items: center; justify-content: center }
.icon:disabled { opacity: .35; cursor: default }
.hook { font-family: var(--f-display); font-weight: 600; font-size: 22px; line-height: 1.15; text-wrap: balance; margin: 0 }
.hook::before { content: "Hook"; display: block; font-family: var(--f-body); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden }
.seg button { background: var(--surface); border: 0; border-right: 1px solid var(--line); padding: 11px 6px; font-weight: 600; font-size: 14px }
.seg button:last-child { border-right: 0 }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink) }
.seg button:disabled { cursor: default }
.md { min-width: 0; overflow-wrap: anywhere }
.md h1, .md h2, .md h3 { font-family: var(--f-display); text-transform: none; letter-spacing: 0; color: var(--ink); margin: 18px 0 6px; line-height: 1.15 }
.md h1 { font-size: 24px; margin-top: 0 } .md h2 { font-size: 20px; font-weight: 700 } .md h3 { font-size: 18px; font-weight: 600 }
.md p { margin: 6px 0 } .md ul, .md ol { margin: 6px 0; padding-left: 22px } .md li { margin: 3px 0 }
.md blockquote { margin: 8px 0; padding: 10px 12px; background: var(--chip); border-radius: 8px; font-size: 16px; line-height: 1.45 }
.md code { background: var(--sunk); border: 1px solid var(--line); padding: 0 5px; border-radius: 5px; font-size: .92em }
.md .tbl { overflow-x: auto } .md table { border-collapse: collapse; font-size: 14px; margin: 8px 0 } .md td, .md th { border: 1px solid var(--line); padding: 5px 8px; text-align: left; vertical-align: top }
.md li.task { list-style: none; margin-left: -20px }
details > summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 8px }
details > summary::-webkit-details-marker { display: none }
details > summary::after { content: "+"; color: var(--muted); font-weight: 500 }
details[open] > summary::after { content: "–" }

/* Bandeja */
.item { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line) }
.item:first-child { border-top: 0; padding-top: 2px }
.item p { margin: 0 }
.item .meta { font-size: 12px; color: var(--muted) }
.btn { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 9px 14px; font-weight: 600; font-size: 14px }
.btn.pri { background: var(--accent); border-color: var(--accent); color: var(--accent-ink) }
.btn.bad { color: var(--crit) }
.btn:disabled { opacity: .5; cursor: default }
input[type="text"], input[type="number"], select, textarea { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; width: 100%; min-width: 0 }
textarea { resize: vertical; min-height: 70px }
label.f { display: grid; gap: 4px; font-size: 13px; color: var(--muted); font-weight: 500 }

/* Métricas */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px }
.kpi span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600 }
.kpi b { display: block; font-family: var(--f-display); font-weight: 700; font-size: 30px; line-height: 1.05; margin-top: 2px }
.kpi em { font-style: normal; font-size: 12px; color: var(--muted) }
.chart svg { width: 100%; height: auto; display: block }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted) }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px }

/* Equipo */
.team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.member { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: grid; gap: 4px; align-content: start }
.member b { font-weight: 600 }
.member .area { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600 }
.log { display: grid; gap: 6px; font-size: 14px }
.log div { display: grid; grid-template-columns: 48px 1fr; gap: 8px }
.log time { color: var(--muted); font-variant-numeric: tabular-nums }
.conex { display: grid; gap: 8px }
.conex div { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line) }
.conex div:last-child { border-bottom: 0; padding-bottom: 0 }
.conex i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: -1px }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 99px; font-size: 14px; font-weight: 500; z-index: 20 }

@media (max-width: 560px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .team { grid-template-columns: 1fr }
  .board { grid-template-columns: 1fr }
  .facts { padding-bottom: 0 }
}
@media (prefers-reduced-motion: no-preference) { .rail i { transition: transform .6s ease } }

/* Negocio (celular): tarjetas que abren los paneles de la Oficina */
.negocio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.negc { display: grid; gap: 2px; text-align: left; cursor: pointer; color: inherit; font: inherit }
.negc b { font-family: var(--f-display); font-weight: 700; font-size: 30px; line-height: 1.05 }
.negc:last-child:nth-child(odd) { grid-column: 1 / -1 }
@media (max-width: 420px) { .tabs button { padding: 8px 6px 9px; font-size: 15px; letter-spacing: .01em } }