:root {
  --bg: #0b0c10;
  --card: #15171d;
  --card-2: #1c1f27;
  --line: rgba(255, 255, 255, .07);
  --fg: #eef0f4;
  --mut: #9196a4;
  --dim: #5f6474;
  --accent: #ffb84d;
  --up: #34d399;
  --down: #f87171;
  --blue: #7aa2ff;
  --r: 22px;
  --gap: 14px;
  --round: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--fg); overscroll-behavior: none; }
body {
  font: 400 clamp(14px, 1.32vw, 20px)/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
input { -webkit-user-select: text; user-select: text; }

/* ---------- distribución ---------- */
#app {
  position: fixed; inset: 0;
  display: grid; grid-template-columns: 1.12fr 1fr 1fr; gap: var(--gap);
  padding: max(var(--gap), env(safe-area-inset-top)) max(var(--gap), env(safe-area-inset-right))
           max(var(--gap), env(safe-area-inset-bottom)) max(var(--gap), env(safe-area-inset-left));
  transition: transform 2s ease;
}
.col { display: flex; flex-direction: column; gap: var(--gap); min-height: 0; min-width: 0; }
.agenda { flex: 1.25; }
.tasks { flex: 1; }
.weather { flex: 1; }
.markets { flex: 0 1 auto; max-height: 52%; }
.news { flex: 1; }

@media (orientation: portrait) {
  #app { grid-template-columns: 1fr 1fr; grid-template-rows: 1.45fr 1fr; }
  .col-c { grid-column: 1 / 3; flex-direction: row; }
  .col-c > .card { flex: 1; max-height: none; }
}

/* ---------- tarjetas ---------- */
.card {
  position: relative; min-height: 0; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1em 1.15em; display: flex; flex-direction: column;
}
.card > header { display: flex; align-items: center; justify-content: space-between; gap: .6em; margin-bottom: .7em; flex: none; }
.card h2 { font-size: .72em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.meta { font-size: .78em; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.body { flex: 1; min-height: 0; overflow: hidden; }
.empty { color: var(--dim); font-size: .9em; padding: .2em 0; }
.empty b { color: var(--mut); font-weight: 500; }

.icon-btn {
  border: 0; background: transparent; color: var(--dim);
  width: 2.1em; height: 2.1em; border-radius: 50%; display: grid; place-items: center; flex: none;
}
.icon-btn:active { background: var(--card-2); color: var(--fg); }
.icon-btn.small { width: 1.7em; height: 1.7em; font-size: 1.15em; background: var(--card-2); color: var(--mut); margin: -.3em -.2em -.3em 0; }

/* ---------- reloj ---------- */
.clock { flex: none; padding: .9em 1.2em 1.1em; }
.settings-btn { position: absolute; top: .55em; right: .55em; opacity: .7; }
.time {
  font-family: var(--round); font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: clamp(64px, 10.2vw, 168px); line-height: 1; letter-spacing: -.035em; margin-left: -.03em;
}
.date { font-size: 1.35em; font-weight: 500; margin-top: .25em; }
.date::first-letter { text-transform: uppercase; }
.sun { margin-top: .5em; color: var(--mut); font-size: .9em; display: flex; gap: 1.2em; font-variant-numeric: tabular-nums; }
.sun span { display: inline-flex; align-items: center; gap: .35em; }

/* ---------- tiempo ---------- */
.wx-now { display: flex; align-items: center; gap: .55em; }
.wx-icon { font-size: 3.3em; line-height: 1; }
.wx-temp { font-family: var(--round); font-size: 3.5em; font-weight: 600; line-height: 1; letter-spacing: -.03em; }
.wx-desc { font-size: 1.1em; font-weight: 500; }
.wx-feel { color: var(--mut); font-size: .88em; }
.wx-stats { display: flex; flex-wrap: wrap; gap: .45em 1.1em; margin: .85em 0 .9em; font-size: .88em; color: var(--mut); }
.wx-stats b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.wx-hours { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(2.9em, 1fr); gap: .25em; border-top: 1px solid var(--line); padding-top: .8em; }
.wx-h { text-align: center; font-variant-numeric: tabular-nums; }
.wx-h .h { color: var(--dim); font-size: .78em; }
.wx-h .i { font-size: 1.35em; line-height: 1.5; }
.wx-h .t { font-weight: 600; }
.wx-h .p { color: var(--blue); font-size: .72em; min-height: 1.2em; }
.wx-h.now .h { color: var(--accent); font-weight: 600; }
.wx-days { margin-top: .7em; padding-top: .45em; border-top: 1px solid var(--line); }
.wx-d { display: grid; grid-template-columns: 5.2em 1.8em 2.6em 2.2em 1fr 2.2em; align-items: center; gap: .4em; padding: .32em 0; font-variant-numeric: tabular-nums; }
.wx-d .dn { font-weight: 500; }
.wx-d .di { font-size: 1.2em; text-align: center; }
.wx-d .dp { color: var(--blue); font-size: .8em; }
.wx-d .lo { color: var(--mut); text-align: right; }
.wx-d .hi { font-weight: 600; }
.wx-d .rng { position: relative; height: .3em; border-radius: 1em; background: var(--card-2); }
.wx-d .rng i { position: absolute; top: 0; bottom: 0; border-radius: 1em; background: linear-gradient(90deg, #7aa2ff, #ffb84d); }
.agenda .body, .news .body, .weather .body { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 2.2em), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 2.2em), transparent); }

/* ---------- agenda ---------- */
.ag-day { font-size: .74em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin: .9em 0 .4em; }
.ag-day:first-child { margin-top: 0; }
.ag-day.today { color: var(--accent); }
.ev { display: grid; grid-template-columns: 3.6em 3px 1fr; gap: .7em; align-items: stretch; padding: .42em .5em .42em 0; border-radius: 12px; }
.ev .t { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; font-size: .95em; line-height: 1.25; }
.ev .t small { display: block; color: var(--dim); font-weight: 400; font-size: .8em; }
.ev .bar { border-radius: 3px; background: var(--blue); }
.ev .n { min-width: 0; }
.ev .n div { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev .n small { display: block; color: var(--mut); font-size: .8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev.past { opacity: .4; }
.ev.now { background: rgba(255, 184, 77, .1); }
.ev.now .bar { background: var(--accent); }
.ev.allday .t { color: var(--mut); font-weight: 500; font-size: .78em; padding-top: .15em; }

/* ---------- tareas ---------- */
.task-list { list-style: none; flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0 -.3em; }
.task { display: flex; align-items: center; gap: .7em; padding: .45em .3em; border-radius: 10px; }
.task .chk {
  width: 1.45em; height: 1.45em; border-radius: 50%; border: 2px solid var(--dim); flex: none;
  display: grid; place-items: center; background: transparent; padding: 0;
}
.task.done .chk { background: var(--up); border-color: var(--up); }
.task.done .chk::after { content: ""; width: .35em; height: .65em; border: solid #0b0c10; border-width: 0 2.5px 2.5px 0; transform: translateY(-.07em) rotate(45deg); }
.task .txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.task .txt small { display: block; color: var(--mut); font-size: .8em; margin-top: .1em; }
.task .pin { color: var(--accent); }
.due { flex: none; font-size: .75em; font-weight: 600; padding: .1em .5em; border-radius: 6px; background: var(--card-2); color: var(--mut); text-transform: capitalize; }
.due.today { color: var(--accent); background: rgba(255, 184, 77, .12); }
.due.late { color: var(--down); background: rgba(248, 113, 113, .12); }
.empty.warn { color: var(--accent); font-size: .8em; }
.link { border: 0; background: none; color: var(--blue); font-size: 1em; padding: 0; }
code { font: .9em ui-monospace, Menlo, monospace; background: var(--card-2); padding: .05em .35em; border-radius: 5px; }
.task.done .txt { color: var(--dim); text-decoration: line-through; }
.task .del { border: 0; background: transparent; color: var(--dim); font-size: 1em; width: 1.8em; height: 1.8em; border-radius: 50%; flex: none; }
.task .del:active { background: var(--card-2); color: var(--down); }
.task-add { display: flex; gap: .5em; margin-top: .6em; flex: none; }
.task-add input {
  flex: 1; min-width: 0; background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; padding: .55em .8em; outline: none;
}
.task-add input:focus { border-color: var(--accent); }
.task-add button { width: 2.4em; border: 0; border-radius: 12px; background: var(--accent); color: #1a1205; font-size: 1.25em; font-weight: 600; }

/* ---------- mercados ---------- */
.eur { display: flex; align-items: baseline; justify-content: space-between; gap: .5em; padding-bottom: .65em; margin-bottom: .35em; border-bottom: 1px solid var(--line); }
.eur .l { font-weight: 600; }
.eur .l small { display: block; color: var(--dim); font-weight: 400; font-size: .78em; }
.eur .v { font-family: var(--round); font-size: 1.6em; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; line-height: 1.1; }
.eur .v small { display: block; font-family: -apple-system, system-ui, sans-serif; font-size: .5em; font-weight: 500; color: var(--mut); }
.q { display: grid; grid-template-columns: minmax(0, 1fr) 4.4em auto; align-items: center; gap: .7em; padding: .38em 0; }
.q .nm { min-width: 0; }
.q .nm div { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q .nm small { color: var(--dim); font-size: .76em; }
.q svg { width: 100%; height: 1.7em; overflow: visible; }
.q .px { text-align: right; font-variant-numeric: tabular-nums; }
.q .px div { font-weight: 600; }
.pill { display: inline-block; font-size: .78em; font-weight: 600; padding: .05em .45em; border-radius: 6px; margin-top: .1em; }
.pill.up { color: var(--up); background: rgba(52, 211, 153, .12); }
.pill.down { color: var(--down); background: rgba(248, 113, 113, .12); }
.pill.flat { color: var(--mut); background: var(--card-2); }

/* ---------- noticias ---------- */
.news .body { display: flex; flex-direction: column; gap: .2em; }
.feat {
  position: relative; flex: none; height: 42%; min-height: 7.5em; border-radius: 14px; overflow: hidden; background: var(--card-2);
  display: block; color: inherit; text-decoration: none; margin-bottom: .45em;
}
.feat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .8s; }
.feat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.85)); }
.feat .cap { position: absolute; left: .8em; right: .8em; bottom: .65em; z-index: 1; }
.feat .cap div { font-weight: 600; font-size: 1.05em; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.feat .cap small { color: rgba(255,255,255,.7); font-size: .76em; }
.nw { display: block; color: inherit; text-decoration: none; padding: .45em 0; border-top: 1px solid var(--line); }
.nw:first-of-type { border-top: 0; }
.nw div { font-weight: 500; line-height: 1.28; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nw small, .src { color: var(--dim); font-size: .76em; }
.nw:active, .feat:active { opacity: .7; }

/* ---------- modo noche ---------- */
#night {
  position: fixed; inset: 0; background: #000; color: #8a4a2c; z-index: 50;
  display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  transition: transform 2s ease;
}
body.night #night { display: flex; }
body.night #app { visibility: hidden; }
.n-time { font-family: var(--round); font-weight: 500; font-size: 22vw; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
@media (orientation: portrait) { .n-time { font-size: 30vw; } }
.n-date { font-size: 2.4vw; margin-top: .6em; color: #6b3a24; }
.n-date::first-letter { text-transform: uppercase; }
.n-line { font-size: 1.9vw; margin-top: 1.4em; color: #5a311f; }

/* ---------- ajustes ---------- */
.sheet { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 3vh 3vw; }
.sheet[hidden] { display: none; }
.sheet-panel {
  width: min(760px, 100%); max-height: 100%; display: flex; flex-direction: column;
  background: #121419; border: 1px solid var(--line); border-radius: 26px; overflow: hidden;
}
.sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 1em 1.2em .6em 1.5em; }
.sheet-head h2 { font-size: 1.4em; font-weight: 700; }
.sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 1.5em 1.5em; }
.set { padding: 1.1em 0; border-top: 1px solid var(--line); }
.set h3 { font-size: 1.05em; font-weight: 600; margin-bottom: .2em; }
.hint { color: var(--mut); font-size: .85em; margin-bottom: .7em; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: .7em 1em; }
.row label { display: inline-flex; align-items: center; gap: .45em; color: var(--mut); }
.set input[type=text], .set input[type=search], .set input[type=time] {
  background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; padding: .6em .8em; outline: none; min-width: 0;
}
.set input[type=text], .set input[type=search] { flex: 1; width: 100%; }
.set input:focus { border-color: var(--accent); }
.btn { border: 0; background: var(--card-2); border-radius: 12px; padding: .6em 1em; font-weight: 600; }
.btn:active { background: #2a2e39; }
.wl { list-style: none; margin-bottom: .7em; }
.wl li { display: flex; align-items: center; gap: .6em; padding: .45em 0; border-bottom: 1px solid var(--line); }
.wl li span { flex: 1; min-width: 0; }
.wl li small { color: var(--dim); }
.wl li button { border: 0; background: var(--card-2); width: 2em; height: 2em; border-radius: 10px; color: var(--mut); }
.wl li button.rm { color: var(--down); }
.results { list-style: none; margin-top: .4em; }
.results li { display: flex; justify-content: space-between; gap: .8em; padding: .6em .8em; border-radius: 10px; }
.results li:active { background: var(--card-2); }
.results li small { color: var(--dim); }
.status { list-style: none; margin-bottom: .8em; font-size: .9em; }
.status li { padding: .35em 0; display: flex; gap: .6em; }
.status li small { color: var(--dim); display: block; overflow-wrap: anywhere; }
.dot { width: .6em; height: .6em; border-radius: 50%; margin-top: .45em; flex: none; background: var(--dim); }
.dot.ok { background: var(--up); }
.dot.ko { background: var(--down); }
.switch { cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch span { width: 2.6em; height: 1.55em; border-radius: 1em; background: var(--card-2); position: relative; transition: background .2s; }
.switch span::after { content: ""; position: absolute; top: .15em; left: .15em; width: 1.25em; height: 1.25em; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch input:checked + span { background: var(--up); }
.switch input:checked + span::after { transform: translateX(1.05em); }