/* Las letras de la marca, servidas por Floro (antes se pedian a Google Fonts: una llamada a otro
   servidor que ademas no funciona sin conexion). Son las mismas de Bretaro y la Nube, con su OFL. */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url("/fuentes/space-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/fuentes/dm-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ===== Centro de Mando · estilos ===== */
:root {
  /* Kresko · versión juvenil (oscuro por defecto) */
  --bg: #0A1D20; --panel: #10292D; --raised: #163639; --sunk: #0C2225;
  --line: #1E4146; --line-2: #2A555B;
  --text: #F2F4F3; --dim: #A9BDB9; --faint: #6E8A85;
  --green: #19B39B; --green-2: #0E7F6E; --green-bg: rgba(25,179,155,.15);
  --amber: #F3C366; --amber-bg: rgba(243,195,102,.14);
  --blue: #5AB8FF; --blue-bg: rgba(90,184,255,.14);
  --violet: #A98BFF; --violet-bg: rgba(169,139,255,.15);
  --red: #FF7A6B; --red-bg: rgba(255,122,107,.14);
  --pop: #C6F36D;
  --on-acc: #0F2A2E;
  --ui: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Space Grotesk', 'DM Sans', system-ui, sans-serif;
  --mono: 'Space Grotesk', 'DM Sans', system-ui, sans-serif;
  /* Radios anidados (21/10, del lienzo): control 13 + 8 de aire ≈ tarjeta 20; tarjeta 20 + 16 = hoja 36.
     Mismos números que marca/tokens.css de Bretaro. OJO: Floro NO lee ese archivo, los valores están
     copiados a mano; si cambian allá, hay que cambiarlos aquí. */
  --r: 20px; --r-sm: 13px; --r-hoja: 36px;
  --curva: cubic-bezier(.2, .8, .25, 1);
  /* Sombra en dos capas: contacto a 1 px + altura difusa y desplazada. Nunca una sola borrosa. */
  --shadow: 0 1px 2px rgba(0,0,0,.40), 0 10px 24px -12px rgba(0,0,0,.55);
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F2F4F3; --panel: #FFFFFF; --raised: #F7F9F8; --sunk: #E9EEEC;
    --line: #D5DCDA; --line-2: #C2CCC9;
    --text: #0F2A2E; --dim: #51645F; --faint: #8A9A96;
    --green: #0E9F89; --green-2: #0E7F6E; --green-bg: rgba(25,179,155,.12);
    --amber: #B9790E; --amber-bg: rgba(217,154,30,.13);
    --blue: #1F7BD1; --blue-bg: rgba(31,123,209,.1);
    --violet: #6A4FE0; --violet-bg: rgba(106,79,224,.1);
    --red: #C8463F; --red-bg: rgba(200,70,63,.1);
    --pop: #7DB51F;
    --shadow: 0 1px 2px rgba(15,42,46,.05), 0 10px 24px -14px rgba(15,42,46,.22);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #F2F4F3; --panel: #FFFFFF; --raised: #F7F9F8; --sunk: #E9EEEC;
  --line: #D5DCDA; --line-2: #C2CCC9;
  --text: #0F2A2E; --dim: #51645F; --faint: #8A9A96;
  --green: #0E9F89; --green-2: #0E7F6E; --green-bg: rgba(25,179,155,.12);
  --amber: #B9790E; --amber-bg: rgba(217,154,30,.13);
  --blue: #1F7BD1; --blue-bg: rgba(31,123,209,.1);
  --violet: #6A4FE0; --violet-bg: rgba(106,79,224,.1);
  --red: #C8463F; --red-bg: rgba(200,70,63,.1);
  --pop: #7DB51F;
  --shadow: 0 1px 2px rgba(15,42,46,.05), 0 10px 24px -14px rgba(15,42,46,.22);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15.5px/1.5 var(--ui); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.muted { color: var(--dim); }
.mono { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---- Marca (logo Kresko) ---- */
.brand-mark { width: 26px; height: 26px; display: inline-block; flex: none; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 10 50 44'%3E%3Cpath d='M16 46 L30 34 L38 40 L50 18' fill='none' stroke='%2319B39B' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='16' cy='46' r='6.5' fill='%2319B39B'/%3E%3Ccircle cx='50' cy='18' r='7.5' fill='%23C6F36D'/%3E%3C/svg%3E"); }
.brand-mark.big { width: 64px; height: 64px; }

/* ---- Estructura ---- */
.shell { min-height: 100vh; }
main { padding: 0 16px calc(96px + var(--safe-b)); max-width: 1180px; margin: 0 auto; }
.top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: calc(18px + env(safe-area-inset-top, 0px)) 0 14px; }
.top h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.eyebrow { margin: 0 0 2px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.sync { display: inline-flex; align-items: center; gap: 7px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; font-size: 12px; color: var(--dim); font-family: var(--mono); }
.sync i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.sync.ok i { background: var(--green); }
.sync.saving i { background: var(--amber); animation: pulse 1s infinite; }
.sync.error i, .sync.pin i { background: var(--red); }
.sync.nube i { background: var(--amber); }
.card.aviso-copia { border: 1px solid var(--amber); }
.card.aviso-copia b { color: var(--amber); }
.card.aviso-copia .btn { min-height: 44px; }
.card.aviso-copia a { color: var(--green); font-weight: 600; display: inline-block; padding: 12px 0; }
.sync.offline i { background: var(--faint); }
@keyframes pulse { 50% { opacity: .35; } }

.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-around;
  background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line); padding: 6px 4px calc(6px + var(--safe-b)); }
.nav-brand { display: none; }
.nav button { flex: 1; background: none; border: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; color: var(--faint); font-size: 11px; font-weight: 500; border-radius: 10px; }
.nav svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav button.on { color: var(--text); }
.nav button.on svg { stroke: var(--green); }

@media (min-width: 900px) {
  .nav { top: 0; right: auto; width: 220px; flex-direction: column; justify-content: flex-start; gap: 4px; border-top: 0; border-right: 1px solid var(--line); padding: 22px 14px; }
  .nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; padding: 0 10px 22px; letter-spacing: -.01em; }
  .nav button { flex: none; flex-direction: row; gap: 12px; padding: 10px 12px; font-size: 14.5px; justify-content: flex-start; }
  .nav button:hover { background: var(--raised); color: var(--text); }
  .nav button.on { background: var(--raised); }
  main { margin-left: 220px; padding: 0 32px 48px; max-width: 1240px; }
  .top { padding-top: 28px; }
}

.view { animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- Tarjetas ---- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow); margin-bottom: 14px; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.card-h h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.card-h .aux { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.why { font-size: 12px; color: var(--faint); margin: 10px 0 0; line-height: 1.5; }
.grid-hoy { display: grid; gap: 0 18px; grid-template-columns: minmax(0, 1fr); }   /* 1.28: nada más ancho que la pantalla (con letra grande se salía) */
@media (min-width: 900px) { .grid-hoy { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } }
.cols-2 { display: grid; gap: 14px; }
@media (min-width: 760px) { .cols-2 { grid-template-columns: 1fr 1fr; } }

/* ---- Botones ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--raised); padding: 9px 14px; font-weight: 500; font-size: 14px; transition: transform .15s var(--curva), background .15s; }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--green); border-color: var(--green); color: #07130D; font-weight: 600; }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); background: transparent; }
.btn.sm { padding: 6px 10px; font-size: 13px; border-radius: 10px; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; background: var(--raised); border: 1px solid var(--line); color: var(--dim); white-space: nowrap; }
.chip.green { color: var(--green); background: var(--green-bg); border-color: transparent; }
.chip.amber { color: var(--amber); background: var(--amber-bg); border-color: transparent; }
.chip.red { color: var(--red); background: var(--red-bg); border-color: transparent; }
.chip.blue { color: var(--blue); background: var(--blue-bg); border-color: transparent; }
.chip.violet { color: var(--violet); background: var(--violet-bg); border-color: transparent; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.seg { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; background: var(--sunk); border: 1px solid var(--line); border-radius: 11px; padding: 3px; gap: 2px; }
.seg button { background: none; border: 0; padding: 6px 12px; border-radius: 8px; font-size: 13px; color: var(--dim); font-weight: 500; }
.seg button.on { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.18); }

/* ---- Hero de Hoy ---- */
.hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.ring { width: 92px; height: 92px; position: relative; }
@media (min-width: 600px) { .ring { width: 104px; height: 104px; } }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .bg { stroke: var(--line); }
.ring .fg { stroke: var(--green); transition: stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1); stroke-linecap: round; }
.ring .val { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.ring .val b { font-family: var(--mono); font-size: 26px; font-weight: 600; line-height: 1; display: block; }
.ring .val small { font-size: 10.5px; color: var(--dim); letter-spacing: .04em; text-transform: uppercase; }
.hero h2 { margin: 0 0 3px; font-size: 19px; letter-spacing: -.01em; }
.hero-now { grid-column: 1 / -1; }
.identity { margin: 0; color: var(--dim); font-size: 13.5px; font-style: italic; }
.now { display: flex; align-items: center; gap: 10px; background: var(--sunk); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.now .lbl { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; font-family: var(--mono); }
.now .nm { font-weight: 600; font-size: 14.5px; }
.now .tm { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.now .go { margin-left: auto; }
.hero-chips { margin-top: 12px; grid-column: 1 / -1; }
.ifthen { grid-column: 1 / -1; margin-top: 10px; font-size: 13px; color: var(--dim); background: var(--amber-bg); border-radius: 10px; padding: 8px 10px; }
.ifthen b { color: var(--amber); font-weight: 600; }

/* ---- Embudo ---- */
.emb-top { display: flex; align-items: baseline; gap: 8px; }
.emb-top .big { font-family: var(--mono); font-size: 34px; font-weight: 600; line-height: 1; }
.emb-top .of { font-family: var(--mono); color: var(--dim); font-size: 15px; }
.emb-top .st { margin-left: auto; }
.bar { height: 8px; background: var(--sunk); border-radius: 99px; overflow: hidden; margin: 10px 0 14px; border: 1px solid var(--line); }
.bar i { display: block; height: 100%; background: var(--green); border-radius: 99px; transition: width .4s cubic-bezier(.2,.8,.2,1); }
.bar.amber i { background: var(--amber); }
.bar.blue i { background: var(--blue); }
.bar.violet i { background: var(--violet); }
.tap2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tapbig { position: relative; border: 1px solid var(--line-2); background: var(--raised); border-radius: 14px; transition: transform .08s, border-color .2s; overflow: hidden; }
.tapbig:active { transform: scale(.97); }
.tap-area { display: block; width: 100%; background: none; border: 0; padding: 14px 12px 12px; text-align: left; min-height: 86px; }
.tap-area .t { display: flex; }
.tap-area .n { display: block; }
.tapbig .t { font-size: 12.5px; color: var(--dim); display: flex; align-items: center; gap: 6px; }
.tapbig .n { font-family: var(--mono); font-size: 26px; font-weight: 600; margin-top: 2px; }
.tapbig .n small { font-size: 13px; color: var(--faint); }
.tapbig .plus { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border-radius: 10px; background: var(--green); color: #07130D; display: grid; place-items: center; font-size: 22px; font-weight: 600; }
.tapbig .minus { position: absolute; right: 10px; bottom: 10px; background: none; border: 1px solid var(--line-2); width: 28px; height: 24px; border-radius: 7px; color: var(--dim); font-size: 14px; line-height: 1; }
.tapbig.done { border-color: var(--green); }
.steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.step { background: var(--sunk); border: 1px solid var(--line); border-radius: 11px; padding: 8px 6px; text-align: center; }
.step .l { font-size: 10.5px; color: var(--dim); line-height: 1.2; min-height: 26px; display: flex; align-items: center; justify-content: center; }
.step .v { font-family: var(--mono); font-size: 18px; font-weight: 600; }
.step .ctl { display: flex; gap: 4px; justify-content: center; margin-top: 4px; }
.step .ctl button { width: 30px; height: 26px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--raised); font-size: 14px; line-height: 1; }
.step .ctl button.p { background: var(--green-bg); border-color: transparent; color: var(--green); font-weight: 600; }
.kpi-line { font-family: var(--mono); font-size: 12px; color: var(--dim); margin-top: 12px; line-height: 1.7; }

/* ---- Línea de tiempo ---- */
.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl > li { position: relative; padding-left: 26px; }
.tl > li::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.tl > li:first-child::before { top: 22px; }
.tl > li:last-child::before { bottom: calc(100% - 22px); }
.tl .dot { position: absolute; left: 3px; top: 17px; width: 12px; height: 12px; border-radius: 50%; background: var(--panel); border: 2px solid var(--line-2); z-index: 1; }
.tl li.done .dot { background: var(--green); border-color: var(--green); }
.tl li.current .dot { border-color: var(--amber); box-shadow: 0 0 0 4px var(--amber-bg); }
.tl li.missed .dot { border-color: var(--red); }
.blk { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; margin: 0 0 8px; transition: border-color .2s, background .2s; }
.tl li.current > .blk { border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); }
.blk-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; }
.chk { flex: none; width: 28px; height: 28px; border-radius: 9px; border: 2px solid var(--line-2); background: transparent; display: grid; place-items: center; transition: all .2s; }
.chk svg { width: 16px; height: 16px; stroke: #07130D; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.5); transition: all .2s; }
.chk.on { background: var(--green); border-color: var(--green); }
.chk.on svg { opacity: 1; transform: none; }
.chk.pop { animation: pop .35s; }
@keyframes pop { 40% { transform: scale(1.18); } }
.blk-main { flex: 1; min-width: 0; background: none; border: 0; text-align: left; padding: 0; }
.blk-name { font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 7px; }
.blk-name .ic { font-size: 16px; }
.tl li.done .blk-name span.t { color: var(--dim); text-decoration: line-through; text-decoration-color: var(--faint); }
.blk-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; font-size: 12px; color: var(--dim); font-family: var(--mono); }
.blk-meta .cur { color: var(--amber); }
.blk-meta .miss { color: var(--red); }
.blk-meta .fire { color: var(--amber); }
.blk-meta .nm2 { color: var(--red); font-family: var(--ui); }
.blk-play { flex: none; width: 36px; height: 36px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--raised); display: grid; place-items: center; }
.blk-play svg { width: 14px; height: 14px; fill: var(--text); }
.blk-play.run { background: var(--amber); border-color: var(--amber); }
.blk-play.run svg { fill: #1A1204; }
.blk-x { padding: 0 12px 12px 52px; display: grid; gap: 10px; }
.mins { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mins .v { font-family: var(--mono); font-size: 13px; margin-right: 4px; }
.mins button, .foco button { min-width: 38px; height: 30px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--raised); font-family: var(--mono); font-size: 12.5px; }
.foco { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--dim); }
.foco button { min-width: 30px; }
.foco button.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.minibar { height: 4px; background: var(--sunk); border-radius: 99px; overflow: hidden; }
.minibar i { display: block; height: 100%; background: var(--blue); }
.minibar.over i { background: var(--amber); }
.lockbox { margin: 0 12px 12px 52px; padding: 10px 12px; border: 1px dashed var(--amber); border-radius: 10px; font-size: 13px; color: var(--dim); line-height: 1.5; }
.lockbox b { color: var(--amber); }
.lockbox .btn { margin-top: 8px; }
.gp-head { width: 100%; display: flex; align-items: center; gap: 10px; background: var(--raised); border: 1px solid var(--line); border-radius: 13px; padding: 11px 12px; margin-bottom: 8px; text-align: left; }
.gp-head .t { font-weight: 700; white-space: nowrap; }
.gp-head .s { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--dim); text-align: right; }
.gp-sub { list-style: none; padding: 0; margin: 0; }
.rest { text-align: center; padding: 26px 10px; color: var(--dim); }
.rest .e { font-size: 34px; }

/* ---- Micro-metas ---- */
.todo { list-style: none; margin: 0; padding: 0; }
.todo li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--line); }
.todo li:first-child { border-top: 0; }
.todo .chk { width: 24px; height: 24px; border-radius: 7px; margin-top: 1px; }
.todo .chk svg { width: 13px; height: 13px; }
.todo .tx { flex: 1; min-width: 0; font-size: 14px; }
.todo .tx small { display: block; color: var(--faint); font-size: 12px; margin-top: 1px; }
.todo li.done .tx { color: var(--faint); text-decoration: line-through; }
.todo .late { color: var(--red); }
.empty { color: var(--dim); font-size: 13.5px; padding: 6px 0; }

/* ---- Suma / Cierre ---- */
.suma { display: flex; flex-wrap: wrap; gap: 8px; }
.suma button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--raised); font-size: 13px; transition: all .15s; }
.suma button.on { background: var(--green-bg); border-color: var(--green); color: var(--green); }
.suma button .w { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.rowq { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.rowq:first-of-type { border-top: 0; }
.opts { display: flex; gap: 5px; }
.opts button { min-width: 36px; height: 32px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--raised); font-family: var(--mono); font-size: 13px; }
.opts button.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.opts button.on.g { background: var(--green); border-color: var(--green); color: #07130D; }
.opts button.on.r { background: var(--red); border-color: var(--red); }
textarea, input[type=text], input[type=number], input[type=date], input[type=password], select {
  width: 100%; background: var(--sunk); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; font-size: 14.5px; resize: vertical; }
textarea:focus, input:focus, select:focus { outline: none; border-color: var(--blue); }
label.f { display: block; font-size: 12.5px; color: var(--dim); margin: 10px 0 5px; }
.idea { border-left: 3px solid var(--violet); padding: 4px 0 4px 12px; font-size: 14.5px; line-height: 1.55; }
.idea small { display: block; color: var(--faint); font-size: 12px; margin-top: 6px; font-style: normal; }

/* ---- Metas ---- */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.meta-h { display: flex; gap: 12px; align-items: flex-start; }
.meta-h .nm { font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.meta-h .pct { margin-left: auto; font-family: var(--mono); font-size: 20px; font-weight: 600; }
.meta-sub { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.meta-card .bar { margin: 12px 0 6px; }
.group-t { font-family: var(--mono); font-size: 11.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; margin: 12px 0 2px; }
.addrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.addrow input[type=text] { flex: 1 1 100%; }
.addrow input[type=date] { flex: 1; }
@media (min-width: 600px) { .addrow input[type=text] { flex: 1 1 auto; width: auto; } .addrow input[type=date] { flex: 0 0 160px; } }
details.more > summary { cursor: pointer; color: var(--dim); font-size: 13px; padding: 6px 0; list-style: none; }
details.more > summary::-webkit-details-marker { display: none; }

/* ---- Libros ---- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.stat .v { font-family: var(--mono); font-size: 24px; font-weight: 600; }
.stat .l { font-size: 12px; color: var(--dim); }
.stat .d { font-size: 11.5px; color: var(--faint); font-family: var(--mono); }
.books { display: grid; gap: 12px; }
@media (min-width: 760px) { .books { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .books { grid-template-columns: repeat(3, 1fr); } }
.book { display: flex; gap: 14px; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; width: 100%; box-shadow: var(--shadow); transition: transform .15s var(--curva), border-color .2s; }
.book:hover { border-color: var(--line-2); }
.book:active { transform: scale(.99); }
.cover { flex: none; width: 54px; height: 78px; border-radius: 4px 8px 8px 4px; display: grid; place-items: center; text-align: center; padding: 6px; font-size: 9.5px; font-weight: 700; line-height: 1.15; color: #fff; position: relative; overflow: hidden; box-shadow: inset 4px 0 0 rgba(0,0,0,.18), 0 3px 8px rgba(0,0,0,.25); }
.book .bi { flex: 1; min-width: 0; }
.book .ti { font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.book .au { color: var(--dim); font-size: 13px; }
.book .bar { margin: 10px 0 4px; height: 6px; }
.book .pg { font-family: var(--mono); font-size: 11.5px; color: var(--faint); display: flex; justify-content: space-between; gap: 8px; }
.stars { color: var(--amber); letter-spacing: 1px; font-size: 13px; }
.starpick { display: flex; gap: 4px; }
.starpick button { background: none; border: 0; font-size: 26px; color: var(--line-2); padding: 0 2px; }
.starpick button.on { color: var(--amber); }

/* ---- Progreso ---- */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
@media (min-width: 900px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.heat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.heat i { width: 16px; height: 16px; border-radius: 4px; background: var(--sunk); border: 1px solid var(--line); display: block; }
.heat i.l1 { background: color-mix(in srgb, var(--green) 25%, var(--sunk)); border-color: transparent; }
.heat i.l2 { background: color-mix(in srgb, var(--green) 50%, var(--sunk)); border-color: transparent; }
.heat i.l3 { background: color-mix(in srgb, var(--green) 75%, var(--sunk)); border-color: transparent; }
.heat i.l4 { background: var(--green); border-color: transparent; }
.heat i.t { outline: 2px solid var(--amber); outline-offset: 1px; }
.heat i.x { visibility: hidden; }
.legend { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--faint); margin-top: 8px; font-family: var(--mono); }
.legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
svg.chart { width: 100%; height: auto; display: block; overflow: visible; }
svg.chart text { font-family: var(--mono); font-size: 10px; fill: var(--faint); }
svg.chart .goal { stroke: var(--amber); stroke-dasharray: 4 4; stroke-width: 1.5; }
svg.chart .grid { stroke: var(--line); stroke-width: 1; }
.hbar { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: center; font-size: 13px; margin: 8px 0; }
.hbar .tr { height: 10px; background: var(--sunk); border-radius: 99px; position: relative; overflow: hidden; border: 1px solid var(--line); }
.hbar .tr i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--blue); }
.hbar .tr i.over { background: var(--amber); }
.hbar .n { font-family: var(--mono); font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.funnel { display: grid; gap: 6px; }
.funnel .fr { display: grid; grid-template-columns: 112px 1fr 52px; gap: 10px; align-items: center; font-size: 13px; }
.funnel .fb { height: 22px; border-radius: 6px; background: var(--green); min-width: 3px; transition: width .5s; }
.funnel .fv { font-family: var(--mono); font-size: 12.5px; text-align: right; }
.funnel .cv { grid-column: 2 / 4; font-family: var(--mono); font-size: 11px; color: var(--faint); margin: -3px 0 2px; }
.streaks { display: grid; gap: 8px; }
.streaks .s { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.streaks .s .n { margin-left: auto; font-family: var(--mono); color: var(--amber); }

/* ---- Retro ---- */
.stepper { display: flex; gap: 5px; margin-bottom: 14px; }
.stepper i { flex: 1; height: 4px; border-radius: 99px; background: var(--line); }
.stepper i.on { background: var(--green); }
.retro-q { font-size: 18px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 4px; }
.retro-hint { color: var(--dim); font-size: 13px; margin: 0 0 12px; }
.scale { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.scale button { height: 40px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--raised); font-family: var(--mono); font-weight: 600; }
.scale button.on { background: var(--green); color: #07130D; border-color: var(--green); }
.retro-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.mrow { display: flex; justify-content: space-between; font-size: 13.5px; padding: 6px 0; border-top: 1px solid var(--line); }
.mrow:first-child { border-top: 0; }
.mrow b { font-family: var(--mono); font-weight: 500; }
.past-retro { border-left: 3px solid var(--amber); padding-left: 12px; margin: 12px 0; font-size: 13.5px; }
.past-retro .h { display: flex; justify-content: space-between; font-weight: 600; }
.plan-list { max-height: 260px; overflow: auto; font-size: 13px; color: var(--dim); background: var(--sunk); border-radius: 10px; padding: 8px 12px; margin: 10px 0; }

/* ---- Hoja inferior (sheet) ---- */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet-bg { position: absolute; inset: 0; background: rgba(0,0,0,.5); animation: fadeIn .2s; }
.sheet { position: relative; width: 100%; max-width: 560px; max-height: 92vh; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 20px 20px 0 0; padding: 10px 18px calc(20px + var(--safe-b)); animation: up .28s cubic-bezier(.2,.8,.2,1); }
.sheet::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 99px; background: var(--line-2); margin: 0 auto 12px; }
.sheet h3 { margin: 0 0 6px; font-size: 18px; }
.sheet .acts { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.sheet .acts .btn { flex: 1; }
@media (min-width: 900px) { .sheet-wrap { align-items: center; } .sheet { border-radius: 20px; } }
@keyframes up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }

/* ---- Modo foco ---- */
.focus { position: fixed; inset: 0; z-index: 60; background: radial-gradient(1200px 700px at 50% 30%, color-mix(in srgb, var(--green) 10%, var(--bg)), var(--bg)); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; animation: fadeIn .3s; }
.focus .fl { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.focus .fn { font-size: 26px; font-weight: 700; margin: 6px 0 18px; letter-spacing: -.01em; }
.focus .fring { width: min(72vw, 300px); aspect-ratio: 1; position: relative; }
.focus .fring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.focus .fring .bg { stroke: var(--line); }
.focus .fring .fg { stroke: var(--green); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.focus .ft { position: absolute; inset: 0; display: grid; place-items: center; }
.focus .ft b { font-family: var(--mono); font-size: clamp(40px, 12vw, 64px); font-weight: 500; letter-spacing: -.02em; }
.focus .ft small { display: block; color: var(--dim); font-family: var(--mono); font-size: 13px; margin-top: -6px; }
.focus .fnext { margin: 20px 0 0; max-width: 420px; color: var(--dim); font-size: 14px; }
.focus .fnext b { color: var(--text); }
.focus .fbreak { margin-top: 12px; color: var(--amber); font-size: 14px; }
.focus .facts { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; justify-content: center; }

/* ---- Pantalla de PIN ---- */
.lock { position: fixed; inset: 0; z-index: 80; background: var(--bg); display: grid; place-items: center; padding: 24px; }
.lock-card { width: 100%; max-width: 340px; text-align: center; }
.lock-card h1 { margin: 16px 0 4px; font-size: 24px; letter-spacing: -.02em; }
.lock-card input { text-align: center; font-family: var(--mono); font-size: 22px; letter-spacing: .3em; margin: 16px 0 12px; }
.lock-err { color: var(--red); font-size: 13px; min-height: 18px; }
/* 1.21: una sola acción principal (entrar con la Cuenta Kresko); el PIN, debajo y más pequeño */
.lock-cuenta { margin-top: 20px; min-height: 48px; }
.lock-pin { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); text-align: left; }
.lock-pin label { display: block; font-size: 13px; color: var(--dim); margin-bottom: 8px; }
.lock-pin-fila { display: flex; gap: 8px; align-items: center; }
.lock-pin-fila input { flex: 1; min-width: 0; margin: 0; font-size: 18px; min-height: 44px; }
.lock-pin-fila .btn { min-height: 44px; }
.lock-pie { margin-top: 22px; font-size: 12px; color: var(--faint); }
#preparar .muted { margin: 10px 0 20px; line-height: 1.5; }
#prepGo { min-height: 48px; }
#preparar .btn.ghost { margin-top: 6px; min-height: 44px; }

/* ---- Toast y confeti ---- */
.toast { position: fixed; left: 50%; bottom: calc(92px + var(--safe-b)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 70; background: var(--text); color: var(--bg); padding: 11px 16px; border-radius: 12px; font-size: 14px; font-weight: 500; max-width: calc(100vw - 32px); text-align: center; transition: all .25s; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.big { background: var(--green); color: #07130D; font-size: 16px; font-weight: 600; }
@media (min-width: 900px) { .toast { bottom: 28px; margin-left: 110px; } }
/* 1.21.1: la versión nueva se avisa con una barra QUE NO SE VA y lleva su botón (antes un aviso decía «ve a Ajustes» y
   nadie encontraba Ajustes: regla 32, una pantalla nunca nombra un control que no está a la vista) */
.version-barra { position: fixed; left: 12px; right: 12px; bottom: calc(152px + var(--safe-b)); /* encima del botón de Kreski (86-142 px), que si no tapaba «Actualizar» */ z-index: 65; display: flex; align-items: center; gap: 12px;
  justify-content: space-between; padding: 10px 10px 10px 16px; border-radius: 16px; background: var(--raised); border: 1px solid var(--line-2);
  box-shadow: 0 1px 0 rgba(0,0,0,.2), 0 12px 32px rgba(0,0,0,.28); font-size: 14px; font-weight: 600; color: var(--text); }
.version-barra[hidden] { display: none; }
.version-barra .btn { min-height: 44px; flex: none; }
@media (min-width: 900px) { .version-barra { left: calc(220px + 24px); right: auto; bottom: 24px; max-width: 460px; } }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 75; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 13px; border-radius: 2px; animation: fall 1.6s cubic-bezier(.3,.6,.4,1) forwards; }
@keyframes fall { to { transform: translate3d(var(--dx), 105vh, 0) rotate(var(--rot)); opacity: .9; } }
.install { display: flex; align-items: center; gap: 12px; background: var(--blue-bg); border: 1px solid color-mix(in srgb, var(--blue) 35%, transparent); }
.install p { margin: 0; font-size: 13.5px; flex: 1; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ===== Kresko juvenil: títulos, formas y detalles ===== */
h1, h2, h3, .hero h2, .card-h h2, .retro-q, .meta-h .nm, .book .ti, .focus .fn, .nav-brand, .lock-card h1 { font-family: var(--display); }
.top h1 { font-size: 30px; letter-spacing: -.025em; }
.eyebrow { font-family: var(--display); font-weight: 600; letter-spacing: .14em; color: var(--green); }
.btn, .chip, .seg, .seg button, .suma button, .sync { border-radius: 999px; }
.btn { font-family: var(--display); font-weight: 600; padding: 10px 18px; }
.btn.primary { background: var(--green); border-color: var(--green); color: var(--on-acc); box-shadow: 0 6px 18px rgba(25,179,155,.28); }
.btn.primary:hover { filter: brightness(1.08); }
.card { border-radius: var(--r); }
.card-h h2 { font-size: 16px; font-weight: 700; }
/* Hero con brillo de marca */
#view-hoy .card:has(.hero) { background: radial-gradient(120% 140% at 100% 0%, rgba(25,179,155,.22), transparent 55%), radial-gradient(80% 120% at 0% 100%, rgba(198,243,109,.10), transparent 60%), var(--panel); border-color: color-mix(in srgb, var(--green) 30%, var(--line)); }
.hero h2 { font-size: 22px; letter-spacing: -.02em; }
.ring .fg { stroke: url(#kg); }
.ring .val b, .emb-top .big, .stat .v, .tapbig .n, .step .v, .meta-h .pct, .focus .ft b { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; }
.now { border-radius: 16px; background: color-mix(in srgb, var(--sunk) 70%, transparent); }
.chip.green { color: var(--on-acc); background: var(--green); }
html:not([data-theme="light"]) .chip.green { color: #0F2A2E; }
.tapbig { border-radius: 18px; }
.tapbig .plus { background: linear-gradient(135deg, var(--green), var(--pop)); color: var(--on-acc); border-radius: 12px; font-weight: 700; box-shadow: 0 4px 12px rgba(25,179,155,.35); }
.tapbig.done { border-color: var(--green); background: color-mix(in srgb, var(--green) 10%, var(--raised)); }
.bar i { background: linear-gradient(90deg, var(--green), var(--pop)); }
.step, .stat, .book, .blk, .gp-head, .now { border-radius: 16px; }
.chk { border-radius: 10px; }
.chk.on { background: linear-gradient(135deg, var(--green), var(--pop)); border-color: transparent; }
.chk svg { stroke: var(--on-acc); }
.tl li.done .dot { background: var(--green); }
.nav button.on svg { stroke: var(--green); }
@media (min-width: 900px) { .nav button.on { background: var(--green-bg); color: var(--text); } }
.focus { background: radial-gradient(1100px 700px at 50% 25%, rgba(25,179,155,.20), var(--bg)); }
.focus .fring .fg { stroke: url(#kg); }
.toast.big { background: linear-gradient(135deg, var(--green), var(--pop)); color: var(--on-acc); }
.heat i { border-radius: 5px; }
.funnel .fb { background: linear-gradient(90deg, var(--green), var(--pop)); }
.lock { background: radial-gradient(900px 600px at 50% 0%, rgba(25,179,155,.22), transparent), var(--bg); } /* 1.21: el brillo va ENCIMA de un fondo opaco (antes, arriba se veía Hoy a través) */
.lock-card h1 { font-size: 28px; }
.nav-brand small { display: block; font-family: var(--ui); font-weight: 500; font-size: 11px; color: var(--faint); letter-spacing: .04em; }
.wave { display: inline-block; animation: wave 2.2s ease-in-out 1; transform-origin: 70% 70%; }
@keyframes wave { 0%,60%,100% { transform: rotate(0); } 10%,30% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); } }
.tapbig .tap-area:active .plus { transform: scale(1.12) rotate(90deg); transition: transform .15s; }

/* ---- Mi Programa (v1.5) ---- */
.em-canales { display: flex; gap: 18px; flex-wrap: wrap; }
.em-canales .chk-l { min-height: 44px; margin: 4px 0; }
.emb-metodo .acts .btn, .tar-metodo .acts .btn { min-height: 44px; }
.todo .paso-abrir { flex-shrink: 0; }
@media (pointer: coarse) { .todo .paso-abrir { min-height: 44px; } }
.tar-lista { margin: 6px 0 8px; padding-left: 20px; }
.tar-lista li { margin: 3px 0; }
.em-err { color: var(--red); font-size: 14px; margin: 6px 0 0; }
.chk-l { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; font-size: 14px; color: var(--text); }
.dias-sel { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; }
.dias-sel label { display: inline-flex; align-items: center; gap: 4px; }
.prog-a { margin: 6px 0; }
.prog-a > summary { font-weight: 600; }
.suma-r { margin-top: 4px; }

/* ---- Mis textos (v1.6) ---- */
.texto-prev { margin: 6px 0 10px; color: var(--dim); font-size: 14px; white-space: pre-line; }
.voz-card { border-color: var(--green); }
.identity .btn { padding: 0 8px; min-height: 28px; vertical-align: middle; }

/* ===== Color de Floro (v1.12): Kresko, Rosa, Lavanda, Coral, Océano. Solo cambia el color principal. ===== */
:root[data-acento="rosa"]    { --green: #F472B6; --green-2: #BE3F86; --green-bg: rgba(244,114,182,.15); --pop: #F9A8D4; }
:root[data-acento="lavanda"] { --green: #A78BFA; --green-2: #7357D8; --green-bg: rgba(167,139,250,.15); --pop: #C4B5FD; }
:root[data-acento="coral"]   { --green: #FB923C; --green-2: #C2571A; --green-bg: rgba(251,146,60,.15); --pop: #FDBA74; }
:root[data-acento="oceano"]  { --green: #38BDF8; --green-2: #1679B5; --green-bg: rgba(56,189,248,.15); --pop: #7DD3FC; }
@media (prefers-color-scheme: light) {
  :root[data-acento="rosa"]:not([data-theme="dark"])    { --green: #E85A9C; --green-bg: rgba(232,90,156,.12); --pop: #DB4F8F; }
  :root[data-acento="lavanda"]:not([data-theme="dark"]) { --green: #9880F7; --green-bg: rgba(152,128,247,.12); --pop: #7E63E8; }
  :root[data-acento="coral"]:not([data-theme="dark"])   { --green: #E07020; --green-bg: rgba(224,112,32,.12); --pop: #D0661C; }
  :root[data-acento="oceano"]:not([data-theme="dark"])  { --green: #1597D6; --green-bg: rgba(21,151,214,.12); --pop: #1288C2; }
}
:root[data-theme="light"][data-acento="rosa"]    { --green: #E85A9C; --green-bg: rgba(232,90,156,.12); --pop: #DB4F8F; }
:root[data-theme="light"][data-acento="lavanda"] { --green: #9880F7; --green-bg: rgba(152,128,247,.12); --pop: #7E63E8; }
:root[data-theme="light"][data-acento="coral"]   { --green: #E07020; --green-bg: rgba(224,112,32,.12); --pop: #D0661C; }
:root[data-theme="light"][data-acento="oceano"]  { --green: #1597D6; --green-bg: rgba(21,151,214,.12); --pop: #1288C2; }
.seg.acentos { flex-wrap: wrap; }
.punto-acento { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; background: #19B39B; }
.punto-acento[data-a="rosa"] { background: #F472B6; } .punto-acento[data-a="lavanda"] { background: #A78BFA; }
.punto-acento[data-a="coral"] { background: #FB923C; } .punto-acento[data-a="oceano"] { background: #38BDF8; }

/* ===== Mi Método Kresko (v1.13, plan Pro) ===== */
.met-mod { padding: 8px 0; border-top: 1px solid var(--line); }
.met-mod:first-of-type { border-top: 0; }
.met-mod-h { width: 100%; display: flex; justify-content: space-between; gap: 10px; background: none; border: 0; color: var(--text); font: inherit; font-weight: 600; padding: 6px 0; text-align: left; cursor: pointer; }
.met-clase { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.met-check { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line-2); background: none; color: #fff; font-weight: 700; cursor: pointer; }
.met-clase.hecha .met-check { background: var(--green); border-color: var(--green); }
.met-clase.hecha .met-tit b { color: var(--dim); text-decoration: line-through; text-decoration-color: var(--line-2); }
.met-tit { flex: 1; background: none; border: 0; color: var(--text); font: inherit; text-align: left; padding: 4px 0; cursor: pointer; }
.met-dias { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 8px; font-size: 14px; }
.met-dias label { display: inline-flex; align-items: center; gap: 4px; }
#metPlan textarea, #metPlan select, #metPlan input[type=date] { width: 100%; box-sizing: border-box; margin: 4px 0 10px; }
#metPlan .lbl { display: block; font-size: 13px; color: var(--dim); margin-top: 6px; }
/* El lector: sin seleccionar, con tu licencia encima y difuminado si sales de la app. */
.met-lector { position: relative; overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.met-lector .met-texto { font-size: 16.5px; line-height: 1.6; }
.met-lector .met-texto h3 { margin: 18px 0 6px; font-size: 18px; }
.met-lector .met-texto li { margin: 4px 0 4px 18px; }
.met-lector .met-texto blockquote { margin: 10px 0; padding: 6px 12px; border-left: 3px solid var(--green); color: var(--dim); }
.met-lector .met-nota { background: var(--green-bg); border-radius: 10px; padding: 8px 12px; }
.met-lic { display: inline-block; margin: 4px 0 10px; font-size: 12px; color: var(--dim); background: var(--raised); border-radius: 99px; padding: 3px 10px; }
.met-marca { position: absolute; inset: -40px; display: flex; flex-wrap: wrap; align-content: space-around; justify-content: space-around; gap: 60px 30px; pointer-events: none; opacity: .07; font-size: 13px; font-weight: 600; z-index: 0; }
.met-cab, .met-texto { position: relative; z-index: 1; }
.met-lector.borroso .met-texto, .met-lector.borroso .met-cab h2 { filter: blur(9px); transition: filter .1s; }
.met-noprint { display: none; }
@media print {
  body.met-leyendo .met-lector, body.met-leyendo .shell { display: none !important; }
  body.met-leyendo .met-noprint { display: block !important; font-size: 18px; }
}

/* El botón de salida de una clase: leerla en Floro cuando Bretaro aún no la tenga (21/10/2026). */
.met-aqui { flex: none; width: 30px; height: 30px; border: 1px solid var(--line, #d5dcda); border-radius: 9px; background: transparent; color: var(--muted, #51645f); font-size: 14px; line-height: 1; cursor: pointer; opacity: .55; transition: opacity .15s ease, border-color .15s ease; }
.met-aqui:hover, .met-aqui:focus-visible { opacity: 1; border-color: var(--acc, #19b39b); }

/* ===== Modo sprint (v1.15) ==========================================================================
   El sprint toma el mando de «Hoy»: una tarjeta grande, un número que no deja dudas de cuánto queda, y
   UNA sola cosa con un toque. El resto del día vive debajo, plegado, nunca borrado.
   Acabados: radio exterior = radio interior + padding (30 = 14 + 16); sombras en dos capas (contacto a
   1px + altura difusa); pulsación 0.96 en 150 ms con transición; entradas escalonadas cada 100 ms; todo
   el movimiento detrás de «reducir movimiento». Los colores salen de los tokens, así que el modo claro
   funciona sin una sola línea extra. */
.card.sprint {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 16px; border-radius: 30px;
  border: 1px solid var(--green-2);
  background: linear-gradient(152deg, var(--green-bg) 0%, var(--panel) 62%);
  box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 18px 38px -20px rgba(25,179,155,.55);
}
.card.sprint[data-sprint-estado="vencido"] { border-color: var(--amber); background: linear-gradient(152deg, var(--amber-bg) 0%, var(--panel) 62%); box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 18px 38px -20px rgba(243,195,102,.45); }
.card.sprint[data-sprint-estado="terminado"] { border-color: var(--pop); }

.sprint-h { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.sprint-tag { flex: none; font-family: var(--display); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.sprint-nm { flex-grow: 1; min-width: 0; font-size: 13px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sprint-x { flex: none; }

/* El número de días: lo más grande de la pantalla, porque es la única pregunta que importa en un sprint. */
.sprint-cuenta { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.sprint-dias { font-family: var(--display); font-size: 54px; line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.sprint-dl { font-size: 14px; line-height: 19px; color: var(--dim); }

/* Radio 14 + padding 16 del contenedor = los 30 de la tarjeta. */
.sprint-una { background: var(--sunk); border: 1px solid var(--line); border-radius: 14px; padding: 15px; margin-bottom: 12px; }
.sprint-lbl { font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 5px; }
.sprint-tit { font-family: var(--display); font-size: 19px; line-height: 25px; font-weight: 600; color: var(--text); margin-bottom: 13px; }
.sprint-go { width: 100%; border-radius: 999px; padding: 13px 16px; font-size: 15px; }

.sprint-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 9px; font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.sprint-atras { color: var(--amber); }
.sprint-mas { margin-top: 11px; }
.sprint-mas summary { font-size: 13px; color: var(--dim); cursor: pointer; }
.sprint-fin, .sprint-vencido { font-size: 14px; line-height: 20px; }
.sprint-big { font-size: 38px; line-height: 1; margin-bottom: 8px; }
.sprint-warn { color: var(--amber); }

/* El resto del día: sigue entero, a un toque, sin competir con el sprint por la atención. */
.resto-dia > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 0 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--dim); font-size: 14px; font-weight: 500; }
.resto-dia > summary::-webkit-details-marker { display: none; }
.resto-dia > summary::after { content: '▾'; font-size: 11px; opacity: .7; }
.resto-dia[open] > summary::after { content: '▴'; }
.resto-dia > summary:hover, .resto-dia > summary:focus-visible { color: var(--text); border-color: var(--line-2); }

/* El selector de ritmo en El Puente. */
.ritmo-sel { display: flex; width: 100%; }
.ritmo-sel button { flex: 1; }

/* Pulsación y entradas. */
.sprint-go, .resto-dia > summary, .ritmo-sel button { transition: transform .15s cubic-bezier(.2,.8,.25,1), background .15s ease, border-color .15s ease, color .15s ease; }
.sprint-go:active, .resto-dia > summary:active, .ritmo-sel button:active { transform: scale(.96); }
@keyframes sprint-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.card.sprint { animation: sprint-entra .5s cubic-bezier(.2,.8,.25,1) both; }
.card.sprint .sprint-cuenta { animation: sprint-entra .5s cubic-bezier(.2,.8,.25,1) .1s both; }
.card.sprint .sprint-una { animation: sprint-entra .5s cubic-bezier(.2,.8,.25,1) .2s both; }
.card.sprint .sprint-pie { animation: sprint-entra .5s cubic-bezier(.2,.8,.25,1) .3s both; }
@media (prefers-reduced-motion: reduce) {
  .card.sprint, .card.sprint .sprint-cuenta, .card.sprint .sprint-una, .card.sprint .sprint-pie { animation: none; opacity: 1; transform: none; }
  .sprint-go, .resto-dia > summary, .ritmo-sel button { transition: none; }
  .sprint-go:active, .resto-dia > summary:active, .ritmo-sel button:active { transform: none; }
}


/* ===== Acabado Kresko (21/10, del lienzo) =====================================================
   Lo que sigue es la misma letra pequeña en las tres apps: cifras que no bailan, el toque que se
   siente, las tarjetas que entran una detrás de otra, y el grano que mata el bandeado del oscuro.
   Todo el movimiento va detrás de «prefers-reduced-motion». */

/* 1. Cifras tabulares: una columna de números no se mueve al cambiar un dígito. */
body, .metric, .num, table, .card { font-variant-numeric: tabular-nums; }

/* 2. Pulsación: 0.96 en 150 ms con transition, nunca con keyframes (un keyframe no se puede
      interrumpir a media pulsación y se ve como un tic). */
.btn, .tap, .chip, .seg button, .nav button { transition: transform .15s var(--curva), background .15s, border-color .15s; }
.btn:active, .tap:active, .chip:active, .seg button:active, .nav button:active { transform: scale(.96); }

/* 3. Entradas escalonadas cada 100 ms con la curva de Kresko.
      SOLO cuando la sección APARECE (la clase `entra` la pone render() al cambiar de sección).
      Antes la animación estaba en `.card` a secas, y como repintar rehace todas las tarjetas, la
      pantalla entera se desvanecía y volvía cada 30 segundos. Repintar no es entrar. */
@keyframes kr-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.entra .card { animation: kr-entra .4s var(--curva) both; }
.entra .card:nth-of-type(1) { animation-delay: 0s; }
.entra .card:nth-of-type(2) { animation-delay: .1s; }
.entra .card:nth-of-type(3) { animation-delay: .2s; }
.entra .card:nth-of-type(4) { animation-delay: .3s; }
.entra .card:nth-of-type(n+5) { animation-delay: .4s; }

/* 4. Grano al 4 % con mix-blend-mode: overlay, solo sobre los fondos oscuros. En un degradado
      oscuro el ojo ve escalones (bandeado); un grano muy leve los rompe. No tapa nada: no recibe
      clics y se queda detrás del contenido. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
:root[data-theme="light"] body::after { display: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) body::after { display: none; } }

/* 5. Quien pidió no ver movimiento, no lo ve. */
@media (prefers-reduced-motion: reduce) {
  .card { animation: none; }
  .btn, .tap, .chip, .seg button, .nav button { transition: none; }
  .btn:active, .tap:active, .chip:active, .seg button:active, .nav button:active { transform: none; }
}

/* ---- El tope vivo (1.16, coach.js) ----
   Pensado para el pulgar: botones de 44 px, nada que dependa de pasar el cursor (regla 33).
   Sin rojos: aquí nadie ha hecho nada mal. */
.coach { border-color: color-mix(in srgb, var(--green) 35%, var(--line)); }
.coach p { margin: 6px 0 0; line-height: 1.5; }
.coach .muted { color: var(--faint); font-size: 13px; }
.coach-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.coach-acts .btn { min-height: 44px; }
.coach-opciones { display: grid; gap: 8px; width: 100%; }
.coach-op { justify-content: flex-start; text-align: left; width: 100%; min-height: 44px; }
.coach-porque { margin-top: 12px; }
.coach-porque summary { cursor: pointer; color: var(--green-2); font-size: 13px; font-weight: 500; padding: 6px 0; min-height: 32px; }
.coach-barras { display: flex; gap: 14px; align-items: flex-end; margin-top: 10px; }
.coach-sem { flex: 1; display: grid; justify-items: center; gap: 4px; }
.coach-col { position: relative; width: 100%; max-width: 64px; height: 84px; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.coach-b { display: block; width: 40%; border-radius: 6px 6px 2px 2px; min-height: 2px; }
.coach-b.puestas, .coach-pt.puestas { background: color-mix(in srgb, var(--faint) 35%, transparent); }
.coach-b.hechas, .coach-pt.hechas { background: var(--green); }
.coach-num { font-size: 13px; font-variant-numeric: tabular-nums; }
.coach-sem small { color: var(--faint); font-size: 11px; }
.coach-ley { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--faint); }
.coach-pt { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 6px; }
.coach-tope { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.coach-mm { min-width: 48px; min-height: 48px; font-size: 22px; padding: 0; }
.coach-n { font-size: 28px; min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }

/* ---- El obstáculo (1.17, entrega D): las preguntas al crear una meta y la tarjeta cuando aparece ---- */
details.woop { margin-top: 12px; border: 1px solid var(--line); border-radius: 13px; padding: 4px 12px 12px; }
details.woop > summary { min-height: 44px; display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; list-style: none; }
details.woop > summary::-webkit-details-marker { display: none; }
details.woop > summary::before { content: '▸'; color: var(--faint); transition: transform .15s ease; }
details.woop[open] > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { details.woop > summary::before { transition: none; } }
.woop .muted { color: var(--faint); font-weight: 400; font-size: 13px; }
.woop-accion { padding: 10px 12px; border-radius: 13px; background: color-mix(in srgb, var(--green) 12%, transparent); }
.woop-form { margin-top: 10px; }
.woop-form input { width: 100%; }
.woop-cambiar { flex-basis: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: var(--dim); font: inherit; font-size: 14px; text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.woop-resumen div + div { margin-top: 4px; }

/* 1.18: un chip que se TOCA es un botón: en pantallas táctiles, al menos 44 px de alto (regla 34). Los chips que solo
   informan (<span>) se quedan como estaban. Lo midió prueba-revision.py: «Hoy toca tu retro» medía 28 px. */
@media (pointer: coarse) { button.chip { min-height: 44px; display: inline-flex; align-items: center; white-space: normal; text-align: left; } }

/* 1.19: tu curso de Bretaro en «Mi Método Kresko» (curso-vista.js). Fase › sección › módulo › clase, como en Bretaro. */
.cur-fase > summary, .cur-sec > summary { list-style: none; cursor: pointer; }
.cur-fase > summary::-webkit-details-marker, .cur-sec > summary::-webkit-details-marker { display: none; }
.cur-sum { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.cur-fsum h2 { margin: 0; }
.cur-sum::after { content: '›'; color: var(--faint); font-size: 20px; transition: transform .15s; }
details[open] > .cur-sum::after { transform: rotate(90deg); }
.cur-sum .aux { margin-left: auto; font-variant-numeric: tabular-nums; }
.cur-sec { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.cur-nom { font-weight: 600; }
.cur-mod { margin-top: 8px; }
.cur-modh { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); margin: 6px 0 2px; }
.cur-final { margin-top: 14px; padding-top: 8px; border-top: 1px dashed var(--line-2); }
.cur-chip { font-size: 11px; padding: 2px 8px; vertical-align: middle; }
.cur-ico { flex: none; width: 28px; text-align: center; }
.cur-check { position: relative; }
.cur-check::after { content: ''; position: absolute; inset: -8px; } /* 44 px para el pulgar sin agrandar el círculo (regla 34) */
.cur-donde { margin: 0; font-size: 13px; }
.cur-sigtit { margin: 4px 0 10px; font-size: 17px; }

/* ===== 1.22 (entrega 1b): la primera vez de alguien nuevo ===== */
.rut-ops { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rut-op { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 104px; padding: 14px; text-align: left;
  background: var(--sunk); border: 1px solid var(--line); border-radius: 16px; color: var(--text); font: inherit; cursor: pointer;
  transition: transform .15s, border-color .15s; }
.rut-op:active { transform: scale(.97); border-color: var(--green); }
@media (hover: hover) { .rut-op:hover { border-color: var(--green); } }
.rut-op .rut-i { font-size: 24px; line-height: 1; }
.rut-op b { font-size: 15px; }
.rut-op small { color: var(--dim); font-size: 12.5px; line-height: 1.35; }
.rut-lista { display: flex; flex-direction: column; gap: 8px; }
.rut-chk { display: grid; grid-template-columns: 24px 1fr; gap: 2px 10px; align-items: center; min-height: 52px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 13px; background: var(--sunk); cursor: pointer; }
.rut-chk input { width: 20px; height: 20px; margin: 0; grid-row: span 2; accent-color: var(--green); }
.rut-chk small { color: var(--dim); font-size: 12.5px; }
.rut-chk:has(input:checked) { border-color: var(--green); background: var(--green-bg); }
.cont-r { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.cont-r:first-of-type { border-top: 0; }
.cont-l { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.cont-n { min-width: 58px; text-align: center; color: var(--dim); font-variant-numeric: tabular-nums; }
.cont-n b { font-size: 20px; color: var(--text); }
.cont-r.ok .cont-n b { color: var(--green); }
.cont-b { width: 44px; height: 44px; flex: none; border-radius: 13px; border: 1px solid var(--line-2); background: var(--sunk); color: var(--text);
  font-size: 22px; line-height: 1; cursor: pointer; transition: transform .15s; }
.cont-b.mas { background: var(--green); border-color: var(--green); color: var(--on-acc); }
.cont-b:active { transform: scale(.94); }
.cont-b:disabled { opacity: .4; }
#anSug { margin-top: 10px; }
#anSug .chip { min-height: 40px; }
/* 1.27: los botones de la tarjeta de una meta (＋1, Contarla sola, y cerrar una meta vencida) se tocan con el dedo: 44 px. */
@media (pointer: coarse) { .meta-card .chips .btn.sm { min-height: 44px; } }

/* 1.28 (paso 3 de «Floro sano»): editar desde Hoy manteniendo pulsado, la meta que llena cada cosa y cómo se ve Floro. */
[data-editar] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
[data-editar].pulsando { transform: scale(.98); transition: transform .45s ease-out; }
.meta-ll { font-family: var(--mono); font-size: 11px; color: var(--green); margin-left: 6px; white-space: nowrap; }
.card-h:has(.editar-t) { justify-content: flex-start; }
.card-h:has(.editar-t) .aux { margin-left: auto; }
.editar-t { flex: none; }
.cosa-lista { display: grid; gap: 8px; }
.cosa-lista .btn { justify-content: flex-start; text-align: left; }
.cosa-meta { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.cosa-meta .cm-t { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.cosa-meta .btn { margin-top: 8px; }
.cosa-err { color: var(--red); margin: 10px 0 0; }
.aviso-rep { border: 1px solid var(--amber); background: var(--amber-bg); border-radius: 12px; padding: 10px 12px; margin: 8px 0 4px; }
.aviso-rep p { margin: 0 0 8px; }
.toast.con-accion { pointer-events: auto; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.toast-b { background: transparent; border: 1px solid currentColor; color: inherit; border-radius: 999px; padding: 6px 14px; font-weight: 600; min-height: 36px; }
.solo-cursor { display: none; }
@media (hover: hover) and (pointer: fine) { .solo-cursor { display: inline; } .solo-tactil { display: none; } }
@media (pointer: coarse) { .editar-t, .toast-b, .seg button, .color-propio { min-height: 44px; } .cosa-lista .btn { min-height: 48px; } }
.color-propio { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-size: 13px; color: var(--dim); font-weight: 500; cursor: pointer; }
.color-propio.on { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.color-propio input { width: 22px; height: 22px; border: 0; padding: 0; background: none; border-radius: 50%; cursor: pointer; }
.seg + .seg { margin-top: 8px; }
:root[data-letra="grande"] body { zoom: 1.12; }
/* Lo que está fijo en la pantalla (la barra de abajo, Kreski, los avisos, «Actualizar») se queda de su tamaño: con letra
   grande se salía por los lados (lo cazaron las capturas). */
:root[data-letra="grande"] :is(.nav, [data-kreski], .toast, #versionBarra) { zoom: calc(1 / 1.12); }

/* 1.29 (paso 4): «📥 Por organizar» en Hoy y la línea de lo que hace Socio (una vez por semana). */
.org-l { list-style: none; margin: 0; padding: 0; }
.org-l li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 0; border-top: 1px solid var(--line); }
.org-l li:first-child { border-top: 0; }
.org-t { flex: 1 1 160px; min-width: 0; }
.org-b { display: flex; gap: 6px; flex: none; }
.org-f { position: relative; overflow: hidden; }
.org-f input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.socio-l { color: var(--green); margin: 8px 0 0; }
@media (pointer: coarse) { .org-b .btn { min-height: 44px; min-width: 44px; } }
/* La ventana de Kreski (de la Nube) toma el color de Floro: se lo dice por estas dos variables (widget 0.56). */
:root { --kreski-acento: var(--green); --kreski-sobre: var(--on-acc); }