/* Youmorrow — sistema de diseno propio: sin librerias, sin imagenes. Un solo tipo de letra (Inter, local) y SVG en linea. */
@font-face { font-family:"Inter"; src:url(/inter.woff2) format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }

:root {
  color-scheme: light dark;
  --bg:#eef3f1; --bg2:#e4eeea; --card:#ffffff; --field:#f5f8f7; --ink:#0f1c19; --muted:#5d706a; --line:#dbe5e1;
  --brand:#0d9488; --brand-2:#14b8a6; --on-brand:#ffffff; --tint:rgba(13,148,136,.10); --ring:rgba(13,148,136,.28);
  --danger:#c0392b; --warn:#d97706; --ok:#16a34a; --heart:#e11d48; --wordmark:#0a7f7a;
  --shadow:0 1px 2px rgba(15,28,25,.05), 0 8px 24px -12px rgba(15,28,25,.18);
  --r:18px; --font:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#08100e; --bg2:#0c1714; --card:#111c19; --field:#0b1512; --ink:#e9f2ef; --muted:#93a8a1; --line:#21322d;
    --brand:#2dd4bf; --brand-2:#5eead4; --on-brand:#04201b; --tint:rgba(45,212,191,.12); --ring:rgba(45,212,191,.30);
    --danger:#f87171; --warn:#fbbf24; --ok:#4ade80; --heart:#fb7185; --wordmark:#2dd4bf;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 28px -14px rgba(0,0,0,.7);
  }
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; color:var(--ink); font:400 16px/1.55 var(--font); font-feature-settings:"cv11","ss01";
  background:radial-gradient(1100px 520px at 50% -180px, var(--tint), transparent 70%), linear-gradient(var(--bg), var(--bg2)) fixed;
  min-height:100dvh;
}
main { max-width:640px; margin:0 auto; padding:0 16px 28px; }
body.with-tabs main { padding-bottom:calc(92px + env(safe-area-inset-bottom)); }

/* ---- barra superior ---- */
.appbar { display:flex; align-items:center; gap:12px; padding:18px 2px 14px; }
.apptitle { min-width:0; }
.statuschip { margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:99px; background:var(--card); border:1px solid var(--line); font-size:.78rem; font-weight:600; color:var(--muted); }
.statuschip .dot { margin:0; width:9px; height:9px; }
/* Marca: el simbolo (con sus colores) y la palabra (un solo color que cambia con el tema). Vienen de marca/generar.mjs. */
.simbolo { flex:none; width:38px; height:38px; }
.palabra { display:block; height:20px; width:auto; aspect-ratio:880 / 140; fill:var(--wordmark); }
h1 .palabra { margin:2px 0; }
h1 { font-size:1.12rem; line-height:1.2; font-weight:700; letter-spacing:-.01em; margin:0; }
#hello { margin:2px 0 0; font-size:.82rem; }
h2 { font-size:1.02rem; font-weight:650; letter-spacing:-.005em; margin:18px 0 8px; }
.card > h2:first-child { margin-top:0; }

/* ---- tarjetas ---- */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px; margin-bottom:14px; box-shadow:var(--shadow); animation:rise .28s ease both; }
@keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.muted { color:var(--muted); font-size:.9rem; }
.error { color:var(--danger); font-size:.92rem; }
code { background:var(--tint); color:var(--brand); padding:2px 7px; border-radius:7px; font:500 .86em ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
ul, ol { padding-left:1.2rem; }
li { margin:6px 0; }
b { font-weight:650; }
pre { white-space:pre-wrap; background:var(--field); border:1px solid var(--line); padding:12px 14px; border-radius:12px; font:inherit; font-size:.9rem; margin:12px 0 0; }

/* ---- formularios ---- */
input[type=tel], input[type=text], textarea, select {
  width:100%; padding:12px 14px; font:inherit; color:var(--ink); background:var(--field); border:1px solid var(--line);
  border-radius:12px; margin:6px 0 10px; transition:border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--ring); }
::placeholder { color:var(--muted); opacity:.75; }
.check { display:flex; gap:12px; align-items:flex-start; margin:12px 0; }
.check input { margin-top:3px; width:20px; height:20px; flex:none; accent-color:var(--brand); }
.check span { flex:1; min-width:0; }

/* ---- botones ---- */
button, .btn {
  font:inherit; font-weight:600; font-size:.95rem; padding:11px 18px; min-height:46px; border:0; border-radius:13px; cursor:pointer;
  color:var(--on-brand); background:linear-gradient(140deg, var(--brand-2), var(--brand)); box-shadow:0 6px 16px -8px var(--ring);
  transition:transform .12s, box-shadow .15s, filter .15s, background-color .15s;
}
button:hover, .btn:hover { filter:brightness(1.06); }
button:active, .btn:active { transform:scale(.97); }
button:focus-visible, .btn:focus-visible, .tab:focus-visible { outline:3px solid var(--ring); outline-offset:2px; }
button.secondary { background:transparent; color:var(--brand); box-shadow:inset 0 0 0 1.5px var(--brand); }
button.secondary:hover { background:var(--tint); filter:none; }
button.danger { background:transparent; color:var(--danger); box-shadow:inset 0 0 0 1.5px var(--danger); }
button.danger:hover { background:rgba(220,38,38,.08); filter:none; }
button.small, .btn.small { padding:6px 13px; min-height:36px; font-size:.84rem; border-radius:10px; }
button:disabled { opacity:.45; cursor:default; transform:none; filter:none; }
.btn { display:inline-block; text-decoration:none; text-align:center; margin:8px 0; }
.btn[hidden] { display:none; }
.btn.ghost { background:transparent; color:var(--brand); box-shadow:inset 0 0 0 1.5px var(--brand); }
a { color:var(--brand); }
.btn, .btn:hover { color:var(--on-brand); }
.btn.ghost, .btn.ghost:hover { color:var(--brand); }
.row { display:flex; gap:10px; flex-wrap:wrap; }

/* ---- estado ---- */
.dot { display:inline-block; width:11px; height:11px; border-radius:50%; background:var(--ok); vertical-align:middle; margin-right:4px; box-shadow:0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent); animation:pulse 2.4s ease-in-out infinite; }
.dot.off { background:#8b9a95; box-shadow:0 0 0 4px rgba(139,154,149,.2); animation:none; }
.dot.warn { background:var(--warn); box-shadow:0 0 0 4px color-mix(in srgb, var(--warn) 22%, transparent); }
@keyframes pulse { 50% { box-shadow:0 0 0 7px color-mix(in srgb, var(--ok) 6%, transparent); } }
.code { font:700 2.3rem/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing:.16em; text-align:center; padding:16px 0; margin:14px 0; background:var(--field); border:1.5px dashed var(--brand); border-radius:14px; user-select:all; color:var(--brand); }

/* ---- navegacion: barra inferior en el celular, control segmentado en pantallas anchas ---- */
.tabs { position:fixed; left:0; right:0; bottom:0; z-index:20; display:flex; gap:4px; padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--card) 86%, transparent); backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4); border-top:1px solid var(--line); }
.tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 4px 6px; min-height:0; font-size:.72rem; font-weight:600;
  background:transparent; color:var(--muted); box-shadow:none; border-radius:12px; }
.tab:hover { background:var(--tint); filter:none; }
.tab svg { width:22px; height:22px; }
.tab.active { color:var(--brand); background:var(--tint); box-shadow:none; }
.sprite { position:absolute; width:0; height:0; overflow:hidden; }
.i { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media (min-width:720px) {
  main { padding:0 24px 40px; }
  body.with-tabs main { padding-bottom:40px; }
  .tabs { position:sticky; top:10px; left:auto; right:auto; bottom:auto; margin:0 0 16px; padding:5px; border:1px solid var(--line); border-radius:15px; box-shadow:var(--shadow); }
  .tab { flex-direction:row; justify-content:center; gap:8px; font-size:.9rem; padding:9px 8px; }
  .tab svg { width:18px; height:18px; }
}

/* ---- zona horaria ---- */
.clockrow { display:flex; gap:12px; margin:10px 0 14px; }
.clockrow > div { flex:1; background:var(--field); border:1px solid var(--line); border-radius:14px; padding:12px 14px; }
.clock { font:700 1.8rem/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing:-.02em; }
.adj { align-items:center; gap:10px; }
.adjval { min-width:64px; text-align:center; font:700 1.1rem ui-monospace, Menlo, Consolas, monospace; }

/* ---- tutorial ---- */
progress { appearance:none; -webkit-appearance:none; width:100%; height:8px; margin:6px 0 12px; border:0; border-radius:99px; overflow:hidden; background:var(--line); }
progress::-webkit-progress-bar { background:var(--line); }
progress::-webkit-progress-value { background:linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius:99px; transition:width .5s ease; }
progress::-moz-progress-bar { background:linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius:99px; }
.steps { list-style:none; padding:0; margin:14px 0 0; }
.step { display:flex; gap:14px; align-items:flex-start; margin:0; padding:14px 0; border-top:1px solid var(--line); }
.step .tick { flex:none; width:26px; height:26px; border-radius:50%; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; color:var(--on-brand); margin-top:1px; transition:background-color .25s, border-color .25s; }
.step.done .tick { background:linear-gradient(140deg, var(--brand-2), var(--brand)); border-color:transparent; }
.step.done b { opacity:.55; text-decoration:line-through; text-decoration-thickness:1.5px; }
.step .example { align-items:center; margin:8px 0; gap:8px; flex-wrap:wrap; }
.step code { font-size:.9em; word-break:break-word; }

/* ---- asistente (chat) ---- */
#chat { display:flex; flex-direction:column; padding:14px; height:calc(100dvh - 190px - env(safe-area-inset-bottom)); min-height:380px; }
.chathead { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.seg { display:inline-flex; padding:3px; gap:2px; background:var(--field); border:1px solid var(--line); border-radius:12px; }
.seg button { min-height:34px; padding:5px 13px; font-size:.84rem; background:transparent; color:var(--muted); box-shadow:none; border-radius:9px; }
.seg button.on { background:var(--card); color:var(--brand); box-shadow:0 1px 3px rgba(0,0,0,.14); }
.seg button:hover { filter:none; color:var(--ink); }
#chat-hint { margin:10px 2px 0; font-size:.82rem; }
.chatlog { flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; overflow-y:auto; padding:12px 2px; margin:6px 0; scroll-behavior:smooth; overscroll-behavior:contain; }
.msg { max-width:88%; padding:10px 14px; border-radius:18px; overflow-wrap:anywhere; line-height:1.45; animation:rise .22s ease both; }
.msg p { margin:0 0 8px; white-space:pre-wrap; }
.msg ul, .msg ol { margin:2px 0 8px; padding-left:1.35rem; }
.msg li { margin:2px 0; white-space:pre-wrap; }
.msg li::marker { color:inherit; opacity:.7; }
.msg > :last-child { margin-bottom:0; }
.msg code { background:rgba(127,127,127,.18); color:inherit; }
.msg.note, .msg.done { white-space:pre-wrap; }
.msg.user { align-self:flex-end; color:var(--on-brand); background:linear-gradient(140deg, var(--brand-2), var(--brand)); border-bottom-right-radius:6px; box-shadow:0 6px 14px -8px var(--ring); }
.msg.assistant { align-self:flex-start; background:var(--field); border:1px solid var(--line); border-bottom-left-radius:6px; }
.msg.note { align-self:center; max-width:94%; text-align:center; font-size:.85rem; color:var(--muted); background:transparent; padding:6px 10px; }
.msg.done { align-self:flex-start; font-size:.88rem; background:var(--tint); border:1px solid var(--ring); color:var(--ink); border-radius:14px; }
.msg.typing { display:flex; gap:5px; padding:14px 16px; }
.msg.typing i { width:7px; height:7px; border-radius:50%; background:var(--muted); animation:blink 1.2s infinite ease-in-out; }
.msg.typing i:nth-child(2) { animation-delay:.18s; } .msg.typing i:nth-child(3) { animation-delay:.36s; }
@keyframes blink { 0%, 80%, 100% { opacity:.25; transform:scale(.8); } 40% { opacity:1; transform:scale(1); } }
.chips { display:flex; gap:8px; flex-wrap:wrap; padding:2px 0 8px; }
.chip { min-height:34px; padding:6px 13px; font-size:.84rem; font-weight:550; color:var(--brand); background:var(--tint); border-radius:99px; box-shadow:inset 0 0 0 1px var(--ring); }
.composer { display:flex; gap:8px; align-items:flex-end; }
.composer textarea { flex:1; margin:0; border-radius:22px; padding:12px 16px; resize:none; max-height:140px; line-height:1.4; }
.composer .send { flex:none; width:46px; height:46px; padding:0; border-radius:50%; display:grid; place-items:center; }
.composer .send svg { width:21px; height:21px; }
#chat-usage { margin:8px 2px 0; font-size:.76rem; text-align:right; }
@media (min-width:720px) { #chat { height:calc(100dvh - 230px); } }

/* Teclado abierto en el celular (clase puesta por app.js): el chat ocupa solo el area visible y se esconde lo demas. */
body.kb .appbar, body.kb .tabs, body.kb #chat-hint, body.kb #chat-usage, body.kb #chat-chips { display:none; }
body.kb main { padding:0; }
body.kb #chat { position:fixed; left:0; right:0; top:var(--vvtop, 0px); height:var(--vvh, 100dvh); min-height:0; margin:0; padding:10px 12px; border:0; border-radius:0; box-shadow:none; z-index:30; animation:none; }
body.kb .composer textarea { max-height:96px; }

/* ---- pantalla de carga ---- */
.boot { position:fixed; inset:0; z-index:50; display:grid; place-items:center; background:var(--bg); }
.boot .simbolo { width:76px; height:76px; animation:pulse2 1.4s ease-in-out infinite; }
@keyframes pulse2 { 50% { transform:scale(.92); opacity:.7; } }

/* ---- administracion ---- */
table { width:100%; border-collapse:collapse; font-size:.9rem; }
th { color:var(--muted); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; }
th, td { text-align:left; padding:10px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
[hidden] { display:none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ---- tarjeta "Hoy" ---- */
.todayhead { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.todayhead h2 { margin:0 0 4px; font-size:1.25rem; letter-spacing:-.02em; }
.agday { margin:16px 0 6px; font-size:.72rem; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.agday:first-child { margin-top:8px; }
.agrow { display:flex; align-items:center; gap:12px; padding:10px 2px; border-top:1px solid var(--line); animation:rise .22s ease both; }
.agday + .agrow { border-top:0; }
.agtime { flex:none; min-width:50px; text-align:center; padding:3px 8px; border-radius:8px; font:600 .82rem ui-monospace, "SF Mono", Menlo, Consolas, monospace; color:var(--brand); background:var(--tint); }
.agtext { flex:1; min-width:0; overflow-wrap:anywhere; }
.agtext small { display:block; color:var(--muted); font-size:.78rem; }
.agrow.hecha .agtext { opacity:.45; text-decoration:line-through; }
.chk, .agx { flex:none; padding:0; min-height:0; background:transparent; box-shadow:none; color:var(--muted); display:grid; place-items:center; }
.chk { width:26px; height:26px; border-radius:50%; border:2px solid var(--line); color:var(--on-brand); font-size:.8rem; transition:background-color .2s, border-color .2s; }
.chk:hover { border-color:var(--brand); background:var(--tint); filter:none; }
.agrow.hecha .chk { background:linear-gradient(140deg, var(--brand-2), var(--brand)); border-color:transparent; }
.agx { width:30px; height:30px; border-radius:8px; font-size:1.25rem; line-height:1; opacity:.55; }
.agx:hover { opacity:1; color:var(--danger); background:rgba(220,38,38,.08); filter:none; }
.agempty { padding:18px 4px 6px; text-align:center; }
.agempty p { margin:0 0 12px; }

/* ---- tarjeta "Tu plan" ---- */
.badge { padding:3px 12px; border-radius:99px; font-size:.78rem; font-weight:650; letter-spacing:.02em; color:var(--brand); background:var(--tint); box-shadow:inset 0 0 0 1px var(--ring); }
.meter { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-top:12px; font-size:.9rem; }
.meter span { color:var(--muted); }
#plan progress { margin:4px 0 2px; }
#plan-note { margin:12px 0 0; }

/* ---- avisos de Inicio (ventana de 24 h, notificaciones) ---- */
.alert { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:14px 16px; margin-bottom:14px; background:var(--card); border:1px solid var(--line); border-left:4px solid var(--warn); border-radius:var(--r); box-shadow:var(--shadow); animation:rise .28s ease both; }
.alert.info { border-left-color:var(--brand); }
.alert > div:first-child { flex:1; min-width:210px; }
.alert p { margin:2px 0 0; }
.alert .btn { margin:0; }

/* ---- ajuste fino plegable (zona horaria) ---- */
details.fino { margin-top:4px; }
details.fino summary { cursor:pointer; color:var(--brand); font-weight:600; font-size:.9rem; padding:10px 0; list-style:none; }
details.fino summary::-webkit-details-marker { display:none; }
details.fino summary::before { content:"▸ "; }
details.fino[open] summary::before { content:"▾ "; }

/* ---- ayuda: comandos con ejemplo ---- */
.cmd { padding:12px 0; border-top:1px solid var(--line); }
.agday + .cmd { border-top:0; }
.cmd .example { align-items:center; margin:8px 0 2px; gap:8px; flex-wrap:wrap; }
.cmd code { font-size:.9em; word-break:break-word; }
.cmd .btn { margin:0; }
#nudge-next { margin:4px 0 12px; }

/* ---- tips de Inicio: carrusel horizontal ---- */
.tips { position:relative; margin-bottom:14px; }
.tips-track { display:flex; min-height:11.5rem; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; border-radius:var(--r); outline-offset:3px; }
.tips-track::-webkit-scrollbar { display:none; }
/* Todas las tarjetas miden lo mismo: cabecera, texto de hasta 4 lineas y un pie (donde va el boton, si el tip tiene uno). */
.tip { flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always; display:grid; grid-template-rows:auto 1fr auto; row-gap:4px; height:11.5rem; padding:12px 16px 10px 18px;
  background:linear-gradient(140deg, var(--tint), transparent 75%), var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); }
.tiphead { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tipcat { font-size:.72rem; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); }
.tiptext { margin:0; font-size:.95rem; line-height:1.5; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; line-clamp:4; align-self:start; }
.tipfoot { min-height:32px; display:flex; align-items:center; }
.tip .btn, .tip button.small { margin:0; }
@media (max-width:350px) { .tiptext { font-size:.88rem; } }
.tipheart { flex:none; width:38px; height:38px; min-height:0; margin:-6px -6px -6px 0; padding:0; border-radius:50%; background:transparent; box-shadow:none; color:var(--muted); display:grid; place-items:center; }
.tipheart:hover { background:var(--tint); filter:none; }
.tipheart svg { width:20px; height:20px; transition:transform .18s; }
.tipheart:active svg { transform:scale(1.25); }
.tipheart[aria-pressed="true"] { color:var(--heart); }
.tipheart[aria-pressed="true"] svg { fill:currentColor; }
.tips-dots { display:flex; justify-content:center; flex-wrap:wrap; margin-top:2px; }
.tips-dots button { width:20px; height:20px; min-height:0; padding:6px; border-radius:99px; background:var(--line); background-clip:content-box; box-shadow:none; transition:width .2s, background-color .2s; }
.tips-dots button:hover { filter:none; background-color:var(--muted); }
.tips-dots button[aria-current="true"] { width:32px; background-color:var(--brand); }
.tipnav { display:none; position:absolute; top:50%; transform:translateY(-70%); width:34px; height:34px; min-height:0; padding:0; border-radius:50%; font-size:1.3rem; line-height:1; background:var(--card); color:var(--brand); box-shadow:0 1px 6px rgba(0,0,0,.18); z-index:2; }
.tipnav.prev { left:-12px; }
.tipnav.next { right:-12px; }
@media (hover:hover) and (pointer:fine) { .tipnav { display:grid; place-items:center; } }