:root {
  --tinta: #082654; --azul: #2467e8; --azul-osc: #1d53bc; --azul-claro: #3f7de9;
  --borde: #dce6f2; --borde-2: #c3d6ec; --fondo: #f7fafe; --sol: #ffc928; --sol-100: #fff4cc; --sol-700: #997000;
  --sec: #63758f; --blanco: #ffffff; --verde: #16a34a; --verde-50: #f0fdf4; --verde-700: #15803d; --rojo: #dc2626; --rojo-700: #b91c1c;
  --sombra: 0 1px 2px rgb(8 38 84 / .04), 0 6px 16px rgb(8 38 84 / .05);
  --sombra-lg: 0 2px 4px rgb(8 38 84 / .04), 0 18px 40px rgb(8 38 84 / .12);
  --display: "Sora", "Segoe UI", system-ui, sans-serif; --body: "Inter", "Segoe UI", system-ui, sans-serif; --num: "Manrope", "Inter", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--azul); }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 2px; }
.page { max-width: 760px; margin: 0 auto; padding: 24px 16px 56px; display: flex; flex-direction: column; gap: 18px; }
header.top { display: flex; align-items: center; gap: 14px; }
.escudo { width: 48px; height: 48px; border-radius: 14px; flex: none; object-fit: contain; background: var(--tinta); padding: 6px; }
.top .kicker { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--azul); margin: 0; }
.top h1 { font-family: var(--display); font-size: 22px; font-weight: 700; margin: 2px 0 0; line-height: 1.2; text-wrap: balance; }
.top p.lead { margin: 4px 0 0; font-size: 14px; color: var(--sec); }
.tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.tab { border: 1px solid var(--borde); background: var(--blanco); border-radius: 14px; padding: 10px 12px; text-align: left; color: var(--tinta); box-shadow: var(--sombra); transition: transform .15s, border-color .15s; display: flex; flex-direction: column; gap: 2px; }
.tab:hover { transform: translateY(-1px); border-color: var(--borde-2); }
.tab small { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sec); }
.tab b { font-family: var(--display); font-size: 14px; font-weight: 600; line-height: 1.25; }
.tab[aria-selected="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.tab[aria-selected="true"] small { color: var(--sol); }
.stage { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.phone { position: relative; width: 340px; max-width: 100%; height: 640px; border-radius: 36px; background: #0b1f44; padding: 10px; box-shadow: var(--sombra-lg), inset 0 0 0 1px rgb(255 255 255 / .08); cursor: pointer; }
.phone::before { content: ""; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 88px; height: 22px; background: #0b1f44; border-radius: 12px; z-index: 5; }
.glass { position: relative; width: 100%; height: 100%; border-radius: 28px; overflow: hidden; background: var(--fondo); }
.scr { position: absolute; inset: 0; overflow: hidden; }
.scr-inner { position: relative; min-height: 100%; padding: 46px 14px 78px; display: flex; flex-direction: column; gap: 14px; font-size: 13px; line-height: 1.4; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.scr.enter .scr-inner { animation: slideIn .4s cubic-bezier(.2,.7,.2,1); }
@keyframes slideIn { from { opacity: 0; translate: 18px 0; } to { opacity: 1; translate: 0 0; } }
.ex { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; text-align: center; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sec); background: rgb(247 250 254 / .9); padding: 4px 0 6px; pointer-events: none; }
.ring { position: absolute; z-index: 4; border: 3px solid var(--sol); border-radius: 16px; box-shadow: 0 0 0 4px rgb(255 201 40 / .28), 0 0 0 9999px rgb(8 38 84 / .32); pointer-events: none; transition: top .4s, left .4s, width .4s, height .4s; }
.ring::after { content: ""; position: absolute; right: -10px; bottom: -10px; width: 26px; height: 26px; border-radius: 50%; background: var(--sol); border: 3px solid #fff; box-shadow: 0 4px 10px rgb(8 38 84 / .35); animation: tap 1.4s ease-in-out infinite; }
@keyframes tap { 0%, 100% { transform: scale(1); } 50% { transform: scale(.72); } }
.caption { width: 100%; max-width: 560px; background: var(--blanco); border: 1px solid var(--borde); border-radius: 20px; box-shadow: var(--sombra); padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 10px; }
.caption .meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.caption .who { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sec); }
.caption .n { font-family: var(--num); font-weight: 800; font-size: 13px; color: var(--azul); font-variant-numeric: tabular-nums; }
.caption h2 { font-family: var(--display); font-size: 18px; font-weight: 700; margin: 0; line-height: 1.3; text-wrap: balance; }
.caption p { margin: 0; font-size: 15px; color: #23385c; max-width: 62ch; }
.bar { height: 5px; border-radius: 999px; background: var(--borde); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--azul); border-radius: 999px; }
.bar i.run { animation: fill var(--dur) linear forwards; }
@keyframes fill { from { width: 0; } to { width: 100%; } }
.controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.dots { display: flex; gap: 5px; flex-wrap: wrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--borde-2); }
.dot.on { background: var(--azul); width: 20px; border-radius: 999px; }
.dot.done { background: var(--tinta); }
.btns { display: flex; gap: 6px; }
.cbtn { height: 40px; min-width: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--borde); background: var(--blanco); color: var(--tinta); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; transition: transform .12s, background .12s; }
.cbtn:hover { background: var(--fondo); transform: translateY(-1px); }
.cbtn.play { background: var(--azul); border-color: var(--azul); color: #fff; }
.cbtn.play:hover { background: var(--azul-osc); }
.cbtn svg { width: 16px; height: 16px; fill: currentColor; }
.index { width: 100%; max-width: 560px; background: var(--blanco); border: 1px solid var(--borde); border-radius: 20px; box-shadow: var(--sombra); padding: 6px 8px; }
.index summary { cursor: pointer; padding: 8px 10px; font-family: var(--display); font-weight: 600; font-size: 14px; }
.index ol { margin: 0; padding: 0 10px 8px 28px; font-size: 14px; color: var(--sec); }
.index li { padding: 3px 0; }
.index li button { background: none; border: 0; padding: 0; color: var(--tinta); font-weight: 500; text-align: left; }
.index li button:hover { color: var(--azul); }
.index li.on button { color: var(--azul); font-weight: 700; }
.share { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; font-size: 14px; color: var(--sec); }
.share a, .share button { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--borde); background: var(--blanco); color: var(--tinta); font-weight: 600; font-size: 14px; text-decoration: none; }
.share a.wa { background: #25d366; border-color: #25d366; color: #fff; }
.others { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; font-size: 13px; }
.others a { border: 1px solid var(--borde); background: #fff; border-radius: 999px; padding: 6px 12px; text-decoration: none; color: var(--azul-osc); font-weight: 600; }
footer.foot { text-align: center; font-size: 12px; color: var(--sec); }
footer.foot a { color: var(--sec); }

/* ===== Pantallas reconstruidas ===== */
.s-h1 { font-family: var(--display); font-size: 20px; font-weight: 700; line-height: 1.2; margin: 0; }
.s-sub { color: var(--sec); font-size: 12px; margin: 2px 0 0; }
.s-back { color: var(--azul); font-weight: 600; font-size: 12px; }
.s-card { background: #fff; border: 1px solid var(--borde); border-radius: 16px; box-shadow: var(--sombra); padding: 13px 14px; }
.s-card b { font-family: var(--display); font-weight: 600; font-size: 15px; display: block; }
.s-card span { color: var(--sec); font-size: 12px; }
.s-card.sol { background: var(--sol-100); border-color: #ffe08a; }
.s-card.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.s-card.row b { font-size: 14px; }
.s-card.row i { color: var(--azul); font-style: normal; }
.s-h2 { font-family: var(--display); font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.s-grid { display: grid; gap: 8px; }
.s-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.s-btn { height: 34px; padding: 0 12px; border-radius: 12px; font-weight: 600; font-size: 12px; display: inline-flex; align-items: center; border: 1px solid var(--borde); background: #fff; color: var(--azul-osc); white-space: nowrap; }
.s-btn.pri { background: var(--azul); border-color: var(--azul); color: #fff; box-shadow: var(--sombra); }
.s-btn.ok { background: var(--verde); border-color: var(--verde); color: #fff; }
.s-btn.danger { color: var(--rojo-700); border-color: #fecaca; }
.s-cta { height: 46px; border-radius: 14px; background: var(--azul); color: #fff; font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: center; box-shadow: var(--sombra-lg); }
.s-cta.sol { background: var(--sol); color: var(--tinta); }
.s-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: rgb(255 255 255 / .96); border-top: 1px solid var(--borde); display: flex; justify-content: space-around; align-items: center; padding: 0 6px; z-index: 3; }
.s-nav div { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; font-weight: 600; color: var(--sec); width: 56px; padding: 6px 4px; border-radius: 10px; }
.s-nav div.on { color: var(--azul); }
.s-nav div svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.75; }
.s-nav .plus { width: 44px; height: 44px; border-radius: 50%; background: var(--azul); color: #fff; margin-top: -18px; display: grid; place-items: center; font-size: 22px; font-weight: 700; box-shadow: var(--sombra-lg); }
.s-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.s-chip { padding: 7px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; border: 1px solid var(--borde); background: #fff; color: var(--azul-osc); }
.s-chip.on { background: var(--azul); border-color: var(--azul); color: #fff; }
.s-hd { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
table.s-t { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--borde); border-radius: 16px; overflow: hidden; box-shadow: var(--sombra); font-size: 12px; }
.s-t th { background: rgb(247 250 254 / .8); text-align: left; padding: 8px 10px; font-weight: 600; border-bottom: 1px solid var(--borde); font-size: 11px; }
.s-t th.c, .s-t td.c { text-align: center; }
.s-t th.c { color: var(--sec); text-transform: uppercase; letter-spacing: .06em; }
.s-t td { padding: 6px 10px; border-bottom: 1px solid var(--borde); }
.s-t tr:last-child td { border-bottom: 0; }
.s-t td.c { font-family: var(--num); font-weight: 700; }
.s-t td.d { color: var(--borde-2); text-align: center; padding: 6px 4px; }
.s-t td.d.a { color: var(--rojo-700); font-weight: 700; }
.s-t td.d.t, .s-t td.d.l { color: var(--sol-700); font-weight: 700; }
.s-t td.d.j { color: var(--azul-osc); font-weight: 700; }
.s-t td.d.p { color: var(--verde-700); font-weight: 700; }
.s-t th.d { text-align: center; padding: 8px 4px; font-family: var(--num); color: var(--sec); }
.s-badge { display: inline-block; background: var(--sol-100); color: var(--sol-700); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.s-badge.ok { background: var(--verde-50); color: var(--verde-700); }
.s-badge.bad { background: #fef2f2; color: var(--rojo-700); }
.s-badge.info { background: #eef4fd; color: var(--azul-osc); }
.s-ok { background: var(--verde-50); color: var(--verde-700); font-weight: 500; font-size: 12px; padding: 9px 12px; border-radius: 12px; }
.s-info { background: #eef4fd; color: var(--azul-osc); font-size: 12px; padding: 9px 12px; border-radius: 12px; }
.s-warn { background: var(--sol-100); color: var(--sol-700); font-size: 12px; padding: 9px 12px; border-radius: 12px; }
.s-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.s-bar label { font-weight: 600; font-size: 12px; display: flex; align-items: center; gap: 6px; }
.s-date { height: 36px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--borde); background: rgb(247 250 254 / .6); display: inline-flex; align-items: center; font-weight: 400; font-size: 13px; }
.s-bar .s-btn { margin-left: auto; }
.s-list { background: #fff; border: 1px solid var(--borde); border-radius: 16px; box-shadow: var(--sombra); }
.s-list > div { padding: 9px 12px; border-bottom: 1px solid var(--borde); display: flex; flex-direction: column; gap: 6px; }
.s-list > div:last-child { border-bottom: 0; }
.s-list .nm { font-weight: 500; font-size: 13px; }
.s-list .nm small { color: var(--sec); font-size: 10px; margin-left: 6px; font-weight: 400; }
.s-list .hrs { font-family: var(--num); font-size: 11px; font-weight: 600; color: var(--azul-osc); }
.s-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.s-4 span { height: 36px; border-radius: 10px; border: 1px solid var(--borde); background: rgb(247 250 254 / .6); color: var(--sec); font-weight: 700; font-size: 14px; display: grid; place-items: center; }
.s-4 span.p { background: var(--verde); border-color: var(--verde); color: #fff; }
.s-4 span.a { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.s-4 span.t, .s-4 span.l { background: #f5b400; border-color: #f5b400; color: #fff; }
.s-4 span.j { background: var(--azul); border-color: var(--azul); color: #fff; }
.s-month { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid var(--borde); border-radius: 16px; padding: 8px 10px; box-shadow: var(--sombra); font-size: 12px; }
.s-month b { font-family: var(--display); font-weight: 600; font-size: 13px; }
.s-month span { color: var(--azul-osc); font-weight: 600; }
.s-stats { display: flex; gap: 22px; background: #fff; border: 1px solid var(--borde); border-radius: 16px; padding: 12px 14px; box-shadow: var(--sombra); }
.s-stats b { font-family: var(--num); font-size: 20px; font-weight: 800; display: block; line-height: 1.1; }
.s-stats span { font-size: 11px; color: var(--sec); font-weight: 500; }
.s-topbar { display: flex; justify-content: space-between; align-items: center; }
.s-topbar .lg { font-family: var(--display); font-weight: 700; font-size: 13px; }
.s-topbar .lg em { font-style: normal; color: var(--azul); }
.s-topbar .av { width: 28px; height: 28px; border-radius: 50%; background: var(--sol-100); border: 1px solid #ffe08a; }
.s-wrap { overflow: hidden; }
.s-form { display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--borde); border-radius: 16px; padding: 14px; box-shadow: var(--sombra); }
.s-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; }
.s-form .in { height: 38px; border-radius: 12px; border: 1px solid var(--borde); background: rgb(247 250 254 / .6); padding: 0 10px; display: flex; align-items: center; font-weight: 400; font-size: 13px; color: var(--tinta); }
.s-form .in.ph { color: var(--sec); }
.s-form .ta { height: 64px; align-items: flex-start; padding-top: 8px; }
.s-form .in.foc { border-color: var(--azul-claro); background: #fff; box-shadow: 0 0 0 3px rgb(36 103 232 / .15); }
.s-form .seg { display: flex; gap: 4px; flex-wrap: wrap; }
.s-form .seg span { padding: 6px 10px; border-radius: 10px; border: 1px solid var(--borde); font-size: 11px; font-weight: 600; color: var(--azul-osc); }
.s-form .seg span.on { background: var(--azul); border-color: var(--azul); color: #fff; }
.s-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.s-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; font-size: 10px; }
.s-week div { background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: 6px 4px; min-height: 70px; }
.s-week div b { display: block; font-size: 10px; color: var(--sec); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.s-week div span { display: block; background: #eef4fd; color: var(--azul-osc); border-radius: 6px; padding: 3px 4px; margin-bottom: 3px; font-weight: 600; line-height: 1.15; }
.s-pw { font-family: var(--num); font-size: 18px; font-weight: 800; letter-spacing: .06em; background: var(--sol-100); border: 1px dashed #ffe08a; border-radius: 12px; padding: 10px; text-align: center; }
.s-menu { display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid var(--borde); border-radius: 16px; padding: 8px; box-shadow: var(--sombra); }
.s-menu span { padding: 8px 10px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--sec); }
.s-menu span.on { background: var(--azul); color: #fff; }
.s-home { background: var(--tinta); color: #fff; border-radius: 16px; padding: 14px; }
.s-home h3 { font-family: var(--display); font-size: 16px; margin: 0 0 6px; }
.s-home p { margin: 0; font-size: 11px; color: #c3d6ec; }
.s-home .s-btn { margin-top: 10px; }
.s-hbar { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 8px 10px; }
.s-hbar b { font-family: var(--display); font-size: 12px; }
.s-hbar .s-btn { height: 30px; font-size: 11px; }
.s-prog { height: 6px; border-radius: 999px; background: var(--borde); }
.s-prog i { display: block; height: 100%; border-radius: 999px; background: var(--azul); }
.s-prog i.bad { background: var(--rojo); }
.s-in { display: inline-block; width: 40px; height: 30px; border-radius: 8px; border: 1px solid var(--borde); background: rgb(247 250 254 / .6); text-align: center; line-height: 28px; font-family: var(--num); font-weight: 700; font-size: 12px; }
.s-in.e { color: var(--borde-2); }
.s-in.foc { border-color: var(--azul-claro); background: #fff; box-shadow: 0 0 0 3px rgb(36 103 232 / .15); }
.s-grow { display: flex; flex-direction: column; gap: 6px; }
.s-grow .g { display: grid; grid-template-columns: repeat(4, 1fr) 44px 44px; gap: 4px; align-items: center; }
.s-grow .g b { font-family: var(--num); text-align: center; font-size: 13px; }
.s-grow .g b.f { background: #eef4fd; border-radius: 8px; padding: 6px 0; }
@media (prefers-reduced-motion: reduce) { .scr.enter .scr-inner { animation: none; } .ring::after { animation: none; } .ring, .scr-inner { transition: none; } }