/*
 * Semanly · vistas.css (agente «Vistas»): Foco, Mes y Ritmo (docs/rediseno.md, parte 9).
 * Solo variables del sistema (base.css): así andan claro, oscuro y los cuatro estilos. Movimiento: solo transform y
 * opacity; con movimiento reducido, fundidos.
 */

/* ============ Foco: una sola cosa en la pantalla ============ */
.fx{display:flex;flex-direction:column;align-items:center;padding-bottom:8px}
.fx-arriba{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;width:100%;margin-top:6px;min-width:0}
.fx-chico{display:inline-flex;align-items:center;gap:7px;min-width:0;min-height:44px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-ctl);background:var(--surface);color:var(--ink);font:600 13px/1.2 var(--f);white-space:nowrap;cursor:pointer;transition:background-color var(--d-1),border-color var(--d-1),transform var(--d-1) var(--salida)}
.fx-chico:hover{border-color:color-mix(in srgb,var(--accent) 34%,transparent);background:color-mix(in srgb,var(--surface) 92%,var(--accent))}
.fx-chico:active{transform:scale(.98)}
.fx-chico>span{min-width:0}
#fxMetodo{flex:none;max-width:100%}
#fxDespuesBtn{flex:none;margin-left:auto}
.fx-ico{display:inline-flex;flex:none}
.fx-chico .fx-ico .ico{color:var(--ink-3)}
.fx-num{display:inline-block;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:var(--on-accent);font:600 12px/20px var(--f);text-align:center;font-variant-numeric:tabular-nums}

.fx-escena{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;max-width:440px;margin:18px auto 0;text-align:center}

/* El post-it de la tarea, en grande */
.fx-papel{position:relative;display:flex;flex-direction:column;align-items:stretch;width:min(100%,276px);min-height:198px;padding:18px 18px 14px;border:0;border-radius:var(--r-nota);background:var(--papel,var(--p-sin));color:var(--nota-ink);box-shadow:var(--sh-nota);text-align:left;cursor:pointer;transition:transform var(--d-2) var(--salida)}
.fx-papel::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--sh-alto);opacity:0;transition:opacity var(--d-2) var(--salida);pointer-events:none}
@media (hover:hover){.fx-papel:hover{transform:translateY(-2px)}.fx-papel:hover::before{opacity:1}}
.fx-papel:active{transform:translateY(-1px) scale(.995)}
.fx-papel-txt{font:600 20px/1.3 var(--f);letter-spacing:-.012em;overflow-wrap:break-word}
.fx-papel-sub{margin-top:8px;font:500 13px/1.45 var(--f);color:var(--nota-ink-2)}

/* Sin post-it elegido: los 3 primeros pendientes, para tocar, y «Ver todos» */
.fx-elegir{display:flex;flex-direction:column;align-items:center;width:100%}
.fx-elegir-t{font:600 var(--t2-tam)/1.3 var(--f);letter-spacing:-.01em;text-align:center}
.fx-elegir-sub{margin-top:6px;font:500 13px/1.45 var(--f);color:var(--ink-2);text-align:center}
.fx-papelitos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;max-width:400px;margin-top:14px;padding:0 2px}
.fx-papelito{position:relative;display:flex;flex-direction:column;min-width:0;min-height:104px;padding:10px 10px 9px;border:0;border-radius:var(--r-nota);background:var(--papel);color:var(--nota-ink);box-shadow:var(--sh-nota);text-align:left;cursor:pointer;transition:transform var(--d-2) var(--salida)}
.fx-papelito::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--sh-alto);opacity:0;transition:opacity var(--d-2) var(--salida);pointer-events:none}
@media (hover:hover){.fx-papelito:hover{transform:translateY(-2px)}.fx-papelito:hover::before{opacity:1}}
.fx-papelito:active{transform:scale(.98)}
.fx-papelito-txt{font:500 13px/1.35 var(--f);overflow-wrap:break-word}
.fx-papelito.s-l .fx-papelito-txt{font-weight:600}
.fx-papelito-pie{display:flex;align-items:center;gap:6px;min-width:0;margin-top:auto;padding-top:8px;font:500 12px/1.2 var(--f);color:var(--nota-ink-2)}
.fx-papelito.antes::after{content:"";position:absolute;top:0;right:0;width:13px;height:13px;border-radius:0 0 0 2px;background:linear-gradient(225deg,var(--bg) 50%,color-mix(in srgb,var(--papel) 82%,var(--nota-ink)) 50%)}
.fx-ver-todos{gap:4px;min-height:44px;margin-top:8px}
.fx-ver-todos .ico{width:16px;height:16px}
.fx-papel-pie{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:10px;font:500 12.5px/1.2 var(--f);color:var(--nota-ink-2);min-width:0}
.fx-papel-pie:empty{display:none}
.fx-proy{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow-wrap:anywhere}
.fx-proy .punto,.fx-item .punto{background:var(--punto)}
.fx-sem{margin-left:auto;flex:none;color:#7E5A22;font-weight:600;font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .fx-sem{color:#E7C483}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fx-sem{color:#E7C483}}
.fx-papel.antes::after{content:"";position:absolute;top:0;right:0;width:18px;height:18px;border-radius:0 0 0 2px;background:linear-gradient(225deg,var(--bg) 50%,color-mix(in srgb,var(--papel) 82%,var(--nota-ink)) 50%);box-shadow:-1px 1px 1.5px rgba(31,47,77,.10)}
.fx-papel .agujero{position:absolute;left:50%;top:50%;width:7%;aspect-ratio:1;border-radius:50%;background:var(--agujero);transform:translate(-50%,-50%)}
.fx-papel.volando .fx-papel-txt,.fx-papel.volando .fx-papel-pie{transition:none}

/* El tiempo, la línea, el estado y los botones */
.fx-reloj{display:flex;flex-direction:column;align-items:center;width:100%;margin-top:16px}
.fx-tiempo{font:500 64px/1 var(--f);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.fx-linea{width:min(100%,276px);height:2px;margin-top:14px;border-radius:1px;background:var(--track);overflow:hidden}
.fx-linea>i{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);transition:transform .5s linear}
.fx-linea.descanso>i{background:var(--ok)}
.fx-estado{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 10px;min-height:20px;margin-top:12px;font:500 13px/1.4 var(--f);color:var(--ink-2);font-variant-numeric:tabular-nums}
.fx-puntos{display:inline-flex;gap:5px}
.fx-puntos i{width:6px;height:6px;border-radius:50%;box-shadow:inset 0 0 0 1.3px var(--line-2)}
.fx-puntos i.lleno{background:var(--accent);box-shadow:none}
.fx-puntos i.actual{box-shadow:inset 0 0 0 1.6px var(--accent)}
.fx-botones{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}
.fx-botones .btn{min-width:136px}

/* «¿La terminaste?» */
.fx-pregunta{display:flex;flex-direction:column;align-items:center;width:100%;margin-top:22px;transition:opacity 180ms ease-in,transform 180ms ease-in}
.fx-pregunta.saliendo{opacity:0;transform:translateY(6px);pointer-events:none}
.fx-hecho{font:500 13px/1.4 var(--f);color:var(--ink-2)}
.fx-preg-t{margin-top:4px;font:600 var(--t1-tam)/1.15 var(--f);letter-spacing:-.025em}
.fx-tres{display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:340px}
.fx-tres>:first-child{grid-column:1/-1}
.fx-tres .btn{min-width:0}
.fx-pinche{position:absolute;left:0;right:0;width:96px;height:112px;margin:0 auto;z-index:2;pointer-events:none}
.fx-ofrecer{margin-top:16px;font:500 13px/1.45 var(--f);color:var(--ink-2)}

/* El descanso: el círculo que respira (4 s inhalar, 6 s soltar) */
.fx-respira{position:relative;width:min(100%,220px);aspect-ratio:1;flex:none}
.fx-aro{position:absolute;inset:0;border-radius:50%;border:1px dashed color-mix(in srgb,var(--ok) 55%,transparent)}
.fx-circulo{position:absolute;inset:0;border-radius:50%;background:color-mix(in srgb,var(--ok) 20%,var(--bg));transform:scale(.62)}
.fx-circulo>i{position:absolute;inset:36%;border-radius:50%;background:color-mix(in srgb,var(--ok) 52%,var(--bg))}
.fx-respira.con-max .fx-circulo{animation:fx-respirar 10s infinite}
@keyframes fx-respirar{0%{transform:scale(.62);animation-timing-function:cubic-bezier(.37,0,.63,1)}40%{transform:scale(1);animation-timing-function:cubic-bezier(.37,0,.63,1)}100%{transform:scale(.62)}}
@keyframes fx-respirar-suave{0%{opacity:.5}40%{opacity:1}100%{opacity:.5}}
.fx-resp-lbl{display:none;margin:2px 0 14px;font:600 var(--t2-tam)/1.3 var(--f);color:var(--ink)}
.fx.descanso .fx-resp-lbl{display:grid}
.fx-resp-lbl>span{grid-area:1/1}
.fx-resp-lbl .fx-inhala,.fx-resp-lbl .fx-solta{display:none}
.fx-resp-lbl.con-max .fx-inhala,.fx-resp-lbl.con-max .fx-solta{display:block}
.fx-resp-lbl.con-max .fx-quieto{display:none}
.fx-resp-lbl.con-max .fx-inhala{animation:fx-lbl-a 10s infinite}
.fx-resp-lbl.con-max .fx-solta{opacity:0;animation:fx-lbl-b 10s infinite}
@keyframes fx-lbl-a{0%,37%{opacity:1}41%,97%{opacity:0}100%{opacity:1}}
@keyframes fx-lbl-b{0%,37%{opacity:0}41%,96%{opacity:1}100%{opacity:0}}
.fx.descanso .fx-reloj{margin-top:16px}

/* Abajo: «Anotá y seguí», el sonido de fondo, el foco de hoy */
.fx-abajo{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%;max-width:440px;margin:30px auto 0}
.fx-anotar{display:flex;gap:8px;width:100%}
.fx-anotar .entrada{flex:1;min-width:0}
.fx-anotar-ok{flex:none;width:44px;height:44px}
.fx-sonido{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.fx-seg{width:100%;max-width:380px}
.fx-seg>button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:44px;font-size:13px;overflow:visible}
.fx-seg>button::after{content:"";position:absolute;inset:-3px -1px}
.fx-seg>button>span{min-width:0}
.fx-seg>button.bloq{color:var(--ink-2)}
.fx-sonido .etiqueta{color:var(--ink-2)}
.fx-seg>button .ico{width:13px;height:13px}
.fx-pie{font:500 12.5px/1.45 var(--f);color:var(--ink-2);text-align:center;font-variant-numeric:tabular-nums}
.fx-pie b{color:var(--ink);font-weight:600}

/* Lo anotado vuela hasta «Para después» */
.fx-volando{max-width:220px;padding:6px 10px;border-radius:var(--r-nota);background:var(--p-amarillo);color:var(--nota-ink);font:500 12.5px/1.3 var(--f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:var(--sh-nota);will-change:transform,opacity}

/* En el celu, un punto en «Foco» de la barra de abajo mientras corre un bloque */
.fx-corre .barra-vistas [data-v="focus"]{position:relative}
.fx-corre .barra-vistas [data-v="focus"]::after{content:"";position:absolute;top:9px;left:calc(50% + 8px);width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--bg)}
body.fx-corre[data-view="focus"] .barra-vistas [data-v="focus"]::after{display:none}

/* Las hojas de Foco: elegir el post-it, el método, «Para después» */
.fx-hoja .hoja-cab{margin-bottom:14px}
.fx-lista{display:grid;gap:8px;padding:2px}
.fx-item{display:flex;align-items:center;gap:10px;width:100%;min-height:54px;padding:10px 12px;border:0;border-radius:var(--r-nota);background:var(--papel);color:var(--nota-ink);box-shadow:var(--sh-nota);text-align:left;cursor:pointer;transition:transform var(--d-1) var(--salida)}
.fx-item:active{transform:scale(.99)}
.fx-item[aria-pressed="true"]{box-shadow:0 0 0 2px var(--accent),var(--sh-nota)}
.fx-item.suelto{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.fx-item.suelto[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--accent)}
.fx-item.suelto .fx-item-pie{color:var(--ink-2)}
.fx-item-cuerpo{flex:1;min-width:0;display:grid;gap:4px}
.fx-item-txt{font:600 14px/1.35 var(--f);overflow-wrap:break-word}
.fx-item-pie{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;font:500 12px/1.2 var(--f);color:var(--nota-ink-2);overflow-wrap:anywhere}
.fx-item .fx-ico .ico{color:var(--accent)}
.fx-item:not(.suelto) .fx-ico .ico{color:var(--nota-ink)}
.fx-vacio-lista{padding:8px 4px;font:500 13px/1.4 var(--f);color:var(--ink-2)}
.fx-metodos{display:grid;gap:6px}
.fx-m{display:grid;gap:3px;width:100%;min-height:44px;padding:11px 14px;border:1px solid var(--line-2);border-radius:var(--r-ctl);background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;transition:border-color var(--d-1),box-shadow var(--d-1)}
.fx-m:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.fx-m[aria-checked="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.fx-m[aria-disabled="true"]{opacity:.5}
.fx-m-cab{display:flex;align-items:baseline;gap:8px;min-width:0}
.fx-m-cab b{font:600 14.5px/1.3 var(--f)}
.fx-m-cab em{margin-left:auto;flex:none;font:500 12.5px/1.3 var(--f);font-style:normal;color:var(--ink-2)}
.fx-m-desc{font:500 12.5px/1.4 var(--f);color:var(--ink-2)}
.fx-m.locked{background:transparent}
.fx-m.locked .fx-m-cab b{color:var(--ink-2)}
.fx-m-max{display:inline-flex;align-items:center;gap:5px;margin-top:2px;font:600 12px/1.2 var(--f);color:var(--accent)}
.fx-m-max .ico{width:13px;height:13px}
.fx-met-nota{margin-top:10px;font:500 12.5px/1.4 var(--f);color:var(--ink-2)}
.fx-ajuste{display:grid;gap:14px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.fx-ajuste .fx-met-nota{margin-top:0}
.fx-fila-aj{display:grid;gap:8px}
.fx-chips{gap:6px}
.fx-chips .chip{min-width:44px;min-height:38px;padding:0 11px;justify-content:center;font-size:13px;font-variant-numeric:tabular-nums}
.fx-opciones{margin-top:18px}
.fx-opciones .fila{min-height:48px;padding:4px 16px}
.fx-fila-vol{display:grid!important;gap:6px;padding:10px 16px!important}
.fx-vol{width:100%;height:44px;margin:0;accent-color:var(--accent)}
.fx-reiniciar{align-self:flex-start;margin:12px 0 0 -10px}
.fx-notas{list-style:none;display:grid;gap:8px;margin-top:14px;padding:2px}
.fx-nota-item{display:flex;align-items:center;gap:10px;padding:8px 6px 8px 12px;border-radius:var(--r-nota);background:var(--p-amarillo);color:var(--nota-ink);box-shadow:var(--sh-nota)}
.fx-nota-txt{flex:1;min-width:0;font:500 13.5px/1.4 var(--f);overflow-wrap:anywhere}
.fx-nota-btns{display:flex;align-items:center;gap:2px;flex:none}
.fx-nota-item .btn{background:transparent;border-color:color-mix(in srgb,var(--nota-ink) 24%,transparent);color:var(--nota-ink)}
.fx-nota-item .btn:hover{background:color-mix(in srgb,var(--nota-ink) 7%,transparent)}
.fx-tirar{width:44px;height:44px;color:var(--danger)!important}
.fx-tirar:hover{background:color-mix(in srgb,var(--nota-ink) 7%,transparent)!important}
.fx-notas-vacio{display:grid;justify-items:center;gap:10px;padding:18px 8px 6px;text-align:center;font:500 13.5px/1.45 var(--f);color:var(--ink-2)}
.fx-dib{width:92px;height:auto;color:var(--ink-3)}

/* ============ Lo compartido de Mes y Ritmo: «Con Semanly Max» y el ejemplo atenuado ============ */
.vx-ico{display:inline-flex;flex:none}
.vx-max{display:flex;align-items:center;gap:16px;margin-top:14px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.vx-max-dib{flex:none;width:52px;color:var(--accent)}
.vx-max-dib svg{width:52px;height:auto}
.vx-max-txt{flex:1;min-width:0}
.vx-max h2{font:600 var(--t2-tam)/1.3 var(--f);letter-spacing:-.01em}
.vx-max p{margin-top:4px;font:500 13px/1.45 var(--f);color:var(--ink-2)}
.vx-max .btn{flex:none}
.vx-ejemplo{margin-top:18px;opacity:.5;filter:saturate(.7);pointer-events:none;user-select:none;-webkit-user-select:none}
:root[data-theme="dark"] .vx-ejemplo{opacity:.4}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vx-ejemplo{opacity:.4}}
.vx-ejemplo .mes-barra{margin-top:0}
.vx-fantasma{position:fixed;visibility:hidden;pointer-events:none}
@media (max-width:640px){.vx-max{flex-wrap:wrap;align-items:flex-start;gap:12px 14px}.vx-max-dib{width:44px}.vx-max-dib svg{width:44px}.vx-max .btn{width:100%}}

/* ============ Mes: un calendario de verdad ============ */
.mes-barra{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;min-width:0}
.mes-nav{display:flex;align-items:center;gap:4px;flex:none}
.mes-nav .btn-icono{width:44px;height:44px}
.mes-nav .btn.chico{min-height:44px;margin-left:4px}
.mes-hechas{flex:0 1 auto;gap:10px;min-width:0;font:500 13px/1.25 var(--f);color:var(--ink-2)}
.mes-hechas>span{flex:0 1 auto;text-align:right}

/* compu: tiras de color, el lunes a la izquierda y «en la semana» abajo */
.mes-grilla.compu{margin-top:18px;border:1px solid var(--line);border-radius:var(--r-board);background:var(--surface);overflow:hidden}
.mes-grilla.compu .mes-cab{display:grid;grid-template-columns:64px repeat(7,minmax(0,1fr));border-bottom:1px solid var(--line)}
.mes-grilla.compu .mes-cab span{padding:11px 10px 9px;font:600 10.5px/1 var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.mes-sem{display:grid;grid-template-columns:64px repeat(7,minmax(0,1fr));border-top:1px solid var(--line)}
.mes-cab+.mes-sem{border-top:0}
.mes-lunes{grid-row:1/span 2;grid-column:1;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:44px;padding:10px 10px;border:0;background:transparent;color:var(--ink-2);font:500 12.5px/1.2 var(--f);text-align:left;cursor:pointer;transition:background-color var(--d-1),color var(--d-1)}
.mes-lunes b{font-weight:500;white-space:nowrap}
.mes-lunes:hover{background:var(--hover);color:var(--ink)}
.mes-lunes small{font:600 11px/1 var(--f);color:var(--accent)}
.mes-sem.esta .mes-lunes{color:var(--ink);box-shadow:inset 3px 0 0 var(--accent)}
.mes-sem.esta .mes-lunes b{font-weight:600}
.mes-dia{grid-row:1;display:flex;flex-direction:column;gap:3px;min-width:0;min-height:116px;padding:6px 6px 8px;border-left:1px solid var(--line)}
.mes-dia.finde{background:color-mix(in srgb,var(--surface) 55%,var(--seg))}
.mes-dia.fuera{background:color-mix(in srgb,var(--surface) 35%,var(--bg))}
.mes-num{display:inline-grid;place-items:center;align-self:flex-start;min-width:24px;height:24px;margin-bottom:2px;padding:0 5px;border-radius:12px;font:600 12.5px/1 var(--f);color:var(--ink);font-variant-numeric:tabular-nums}
.mes-dia.fuera .mes-num{color:var(--ink-3);font-weight:500}
.mes-dia.hoy .mes-num{background:var(--accent);color:var(--on-accent)}
.mes-tira{position:relative;display:block;flex:none;width:100%;height:22px;padding:0 6px 0 9px;border:0;border-radius:3px;background:var(--papel);color:var(--nota-ink);box-shadow:inset 3px 0 0 var(--punto);font:500 12px/22px var(--f);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:transform var(--d-1) var(--salida)}
.mes-tira:hover{background:color-mix(in srgb,var(--papel) 90%,var(--nota-ink))}
.mes-tira:active{transform:scale(.98)}
.mes-tira.paso{box-shadow:inset 3px 0 0 var(--warm)}
.mes-tira.hecha{opacity:.55;text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--nota-ink) 50%,transparent);cursor:default}
.mes-tira.hecha:hover{background:var(--papel)}
.mes-mas{align-self:flex-start;flex:none;min-height:22px;padding:0 6px;border:0;border-radius:4px;background:transparent;color:var(--accent);font:600 12px/22px var(--f);font-variant-numeric:tabular-nums;cursor:pointer}
.mes-mas:hover{background:var(--hover)}
.mes-ensemana{grid-column:2/-1;grid-row:2;display:flex;align-items:center;gap:6px;min-width:0;padding:6px 8px 8px;border-top:1px dashed var(--line);border-left:1px solid var(--line);overflow:hidden}
.mes-es-lbl{flex:none;margin-right:4px;font:500 12px/1.2 var(--f);color:var(--ink-2)}
.mes-es-lbl b{color:var(--ink);font-weight:600}
.mes-ensemana .mes-tira{flex:0 1 auto;width:auto;min-width:64px;max-width:176px}

/* celu: puntos por día y la agenda del día elegido */
.mes-grilla.celu{margin-top:14px}
.mes-grilla.celu .mes-cab{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.mes-grilla.celu .mes-cab span{padding:2px 0 8px;text-align:center;font:600 11px/1 var(--f);color:var(--ink-2)}
.mes-dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.mes-dia-b{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;height:52px;padding:6px 0 0;border:0;border-radius:var(--r-ctl);background:transparent;color:var(--ink);cursor:pointer;transition:background-color var(--d-1)}
.mes-dia-b .mes-num{align-self:center;min-width:30px;height:30px;margin:0;border-radius:15px;font-weight:500;font-size:14px}
.mes-dia-b.fuera .mes-num{color:var(--ink-3)}
.mes-dia-b.hoy .mes-num{background:var(--accent);color:var(--on-accent);font-weight:600}
.mes-dia-b[aria-pressed="true"]{background:var(--accent-soft)}
.mes-dia-b[aria-pressed="true"] .mes-num{font-weight:600}
.mes-puntos{display:flex;gap:3px;height:5px}
.mes-puntos i{width:5px;height:5px;border-radius:50%;background:var(--punto)}
.mes-puntos i.g-sin{background:var(--ink-3)}
.mes-puntos i.hecha{background:transparent;box-shadow:inset 0 0 0 1.2px var(--punto)}
.mes-puntos i.hecha.g-sin{box-shadow:inset 0 0 0 1.2px var(--ink-3)}
.mes-agenda{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.mes-ag-t{display:flex;align-items:baseline;gap:8px;font:600 var(--t2-tam)/1.3 var(--f);letter-spacing:-.01em}
.mes-ag-hoy{font:600 12.5px/1 var(--f);color:var(--accent)}
.mes-tarjetas{display:grid;gap:8px;margin-top:10px;padding:2px}
.mes-tarjeta{position:relative;display:grid;gap:8px;width:100%;min-height:44px;padding:11px 12px 10px;border:0;border-radius:var(--r-nota);background:var(--papel);color:var(--nota-ink);box-shadow:var(--sh-nota);text-align:left;cursor:pointer;transition:transform var(--d-1) var(--salida)}
.mes-tarjeta:active{transform:scale(.99)}
.mes-tj-txt{font:500 14px/1.38 var(--f);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word}
.mes-tj-pie{display:flex;align-items:center;gap:8px;min-width:0;font:500 12px/1.2 var(--f);color:var(--nota-ink-2)}
.mes-proy{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow-wrap:anywhere}
.mes-proy .punto{background:var(--punto)}
.mes-tj-pie .der{margin-left:auto;flex:none}
.mes-tj-pie .sem,.mes-tj-pie .paso{color:#7E5A22;font-weight:600}
:root[data-theme="dark"] .mes-tj-pie .sem,:root[data-theme="dark"] .mes-tj-pie .paso{color:#E7C483}
.mes-tarjeta.hecha{opacity:.6;cursor:default}
.mes-tarjeta.hecha .mes-tj-txt{text-decoration:line-through}
.mes-tarjeta.antes::after{content:"";position:absolute;top:0;right:0;width:14px;height:14px;border-radius:0 0 0 2px;background:linear-gradient(225deg,var(--bg) 50%,color-mix(in srgb,var(--papel) 82%,var(--nota-ink)) 50%)}
.mes-hoja .mes-tarjeta.antes::after{background:linear-gradient(225deg,var(--sheet) 50%,color-mix(in srgb,var(--papel) 82%,var(--nota-ink)) 50%)}
.mes-nada{margin-top:8px;font:500 13px/1.45 var(--f);color:var(--ink-2)}
.mes-ag-sem{margin-top:22px}
.mes-ag-semcab{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px}
.mes-ag-semcab .btn{gap:4px}
.mes-ag-semcab .btn .ico{width:16px;height:16px}
.mes-hoja .mes-tarjetas{margin-top:0}
.mes-vacio{margin-top:8px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mes-tj-pie .sem,:root:not([data-theme="light"]) .mes-tj-pie .paso{color:#E7C483}}

/* ============ Ritmo: una lectura principal y tres datos ============ */
.ri{padding-top:2px}
.ri-frase{max-width:30ch;margin-top:10px;font:500 21px/1.32 var(--f);letter-spacing:-.015em;color:var(--ink);font-variant-numeric:tabular-nums}
.ri-frase b{font-weight:600}
.ri-grilla{display:grid;gap:14px;margin-top:20px}
/* Acomodar (ronda 8): el botón arriba a la derecha de las tarjetas, la línea de lo oculto abajo y la compu en tramos */
.ri-acc{display:flex;justify-content:flex-end;margin-top:14px;margin-bottom:-6px}
.ri-acc .btn{gap:7px}
.ri-acc .btn .ico{width:18px;height:18px}
.ri-ocultos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 8px;margin-top:14px;font:500 13px/1.4 var(--f);color:var(--ink-2)}
.ri-ocultos .enlace{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.ri-todo-oculto .btn{margin-top:4px}
.ri-tramo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:16px;min-width:0}
.ri-col{display:grid;align-content:start;gap:16px;min-width:0}
/* La hoja «Acomodar Ritmo»: un renglón por tarjeta, con la manija, el nombre, para qué sirve y el interruptor */
.ac-lista{position:relative;display:grid;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.ac-fila{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;min-height:60px;padding:8px 8px 8px 2px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);transition:background-color var(--d-2),border-color var(--d-2)}
.ac-asa{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ink-3);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.ac-asa:hover{color:var(--ink-2);background:var(--hover)}
.ac-asa .ico{width:18px;height:18px}
/* el interruptor, en un label de 44 × 44 (se toca entero; revisión, 4/11/2026: el área táctil de 44 px) */
.ac-sw{display:grid;place-items:center;min-width:44px;min-height:44px;cursor:pointer}
.ac-txt{display:grid;gap:3px;min-width:0}
.ac-txt b{font:600 14.5px/1.25 var(--f);color:var(--ink)}
.ac-txt span{font:500 12.5px/1.3 var(--f);color:var(--ink-2)}
.ac-fila.off{background:transparent;border-style:dashed}
.ac-fila.off .ac-txt b,.ac-fila.off .ac-txt span{color:var(--ink-3)}
/* levantado: sobre los demás, con sombra, un poco más grande y girado; el hueco marca dónde va a caer */
.ac-fila.alzada{position:absolute;left:0;z-index:2;margin:0;border-color:transparent;box-shadow:var(--sh-alto);transform:scale(1.02) rotate(-.6deg);cursor:grabbing}
.ac-fila.alzada .ac-asa{cursor:grabbing}
.ac-hueco{border-radius:var(--r-card);background:color-mix(in srgb,var(--accent) 7%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 35%,transparent)}
.ac-pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-top:18px}
.ac-pie .enlace{display:inline-flex;align-items:center;min-height:44px}
@media (prefers-reduced-motion:reduce){.ac-fila.alzada{transform:none}}
.ri-bloque{min-width:0;padding:16px 16px 14px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.ri-t{display:flex;align-items:center;gap:8px;font:600 15px/1.3 var(--f);letter-spacing:-.005em;color:var(--ink)}
.ri-cuenta{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;border-radius:10px;background:color-mix(in srgb,var(--warm) 14%,transparent);color:#7E5A22;font:600 12px/1 var(--f)}
.ri-ley{display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px;margin-top:6px;font:500 12px/1.3 var(--f);color:var(--ink-2)}
.ri-ley i{display:inline-block;width:10px;height:10px;border-radius:2px}
.ri-ley-c{box-shadow:inset 0 0 0 1.3px var(--ink-3)}
.ri-ley-r{margin-left:8px;background:var(--accent)}
.ri-graf{position:relative;margin-top:12px;min-width:0}
.ri-graf-sem{margin-left:-16px;margin-right:-16px}
.ri-mas{display:inline-flex;align-items:center;min-height:44px;margin-top:4px!important}
.ri-svg{display:block;overflow:visible}
.ri-svg text{font:600 12px/1 var(--f);font-variant-numeric:tabular-nums;fill:var(--ink-2)}
.ri-svg .ri-x{font-weight:500;fill:var(--ink-2)}
.ri-svg .ri-x.esta{fill:var(--accent);font-weight:600}
.ri-svg .ri-x.top,.ri-svg .ri-val.top{fill:var(--ink);font-weight:600}
.ri-base{stroke:var(--line-2);stroke-width:1}
.ri-total{fill:none;stroke:var(--ink-3);stroke-width:1.25}
.ri-col.esta .ri-total{stroke:var(--accent);stroke-dasharray:3 2.5}
.ri-hecho{fill:var(--accent)}
.ri-col.esta .ri-val{fill:var(--accent)}
.ri-col{transition:opacity var(--d-2)}
.ri-svg.con-activa .ri-col{opacity:.35}
.ri-svg.con-activa .ri-col.activa{opacity:1}
.ri-toques{position:absolute;inset:0}
.ri-toque{position:absolute;top:0;bottom:0;padding:0;border:0;border-radius:var(--r-ctl);background:transparent;cursor:pointer}
.ri-toque:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ri-pie{margin-top:8px;font:500 13px/1.4 var(--f);color:var(--ink-2)}
.ri-dia{fill:color-mix(in srgb,var(--ok) 42%,var(--surface))}
.ri-dia.top{fill:var(--ok)}
.ri-svg .ri-val.chico{font-weight:500;fill:var(--ink-2)}
.ri-dato{margin-top:6px;font:600 var(--t2-tam)/1.3 var(--f);letter-spacing:-.01em;color:var(--ink)}
.ri-sub{margin-top:4px;font:500 13px/1.45 var(--f);color:var(--ink-2)}
.ri-grande{margin-top:8px;font:500 14px/1.35 var(--f);color:var(--ink-2)}
.ri-grande b{display:block;margin-bottom:2px;font:600 30px/1.05 var(--f);letter-spacing:-.025em;color:var(--ink)}
.ri-nada{display:flex;align-items:center;gap:8px;margin-top:8px;font:500 13.5px/1.45 var(--f);color:var(--ink-2)}
.ri-nada .ico{color:var(--ok)}
.ri-papeles{display:grid;gap:8px;margin-top:12px;padding:2px}
.ri-papel{position:relative;display:grid;gap:8px;width:100%;padding:10px 12px;border:0;border-radius:var(--r-nota);background:var(--papel);color:var(--nota-ink);box-shadow:var(--sh-nota);text-align:left;cursor:pointer;transition:transform var(--d-1) var(--salida)}
.ri-papel:active{transform:scale(.99)}
.ri-papel::after{content:"";position:absolute;top:0;right:0;width:14px;height:14px;border-radius:0 0 0 2px;background:linear-gradient(225deg,var(--surface) 50%,color-mix(in srgb,var(--papel) 82%,var(--nota-ink)) 50%)}
.ri-papel-txt{font:500 13.5px/1.38 var(--f);overflow-wrap:break-word}
.ri-papel-pie{display:flex;align-items:center;gap:8px;min-width:0;font:500 12px/1.2 var(--f);color:var(--nota-ink-2)}
.ri-proy{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow-wrap:anywhere}
.ri-proy .punto{background:var(--punto)}
.ri-sem{margin-left:auto;flex:none;color:#7E5A22;font-weight:600}
:root[data-theme="dark"] .ri-sem,:root[data-theme="dark"] .ri-cuenta{color:#E7C483}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ri-sem,:root:not([data-theme="light"]) .ri-cuenta{color:#E7C483}}
.ri-mas{margin-top:12px;font-size:13px}
.ri-ir{margin-top:12px}
.ri-vacio{margin-top:28px}
/* Lo primero: un cuadradito por cada post-it grande de la semana, lleno si se hizo en su semana (la pila crece hacia
   arriba; su alto, el de la semana con más grandes, mínimo 2) */
.ri-cuads{--c:16px;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));align-items:end;gap:4px;margin-top:14px}
.ri-cuad-col{display:grid;justify-items:center;gap:8px;min-width:0}
.ri-cuad-pila{display:flex;flex-direction:column-reverse;align-items:center;justify-content:flex-start;gap:4px;min-height:calc(var(--filas,2) * (var(--c) + 4px))}
.ri-cuad{display:block;width:var(--c);height:var(--c);border-radius:3px;box-shadow:inset 0 0 0 1.3px var(--ink-3)}
.ri-cuad.hecho{background:var(--accent);box-shadow:none}
.ri-cuad-col.esta .ri-cuad:not(.hecho){box-shadow:inset 0 0 0 1.3px var(--accent)}
.ri-cuad-nada{display:block;width:var(--c);height:1.3px;background:var(--line-2)}
.ri-cuad-x{font:500 12px/1 var(--f);color:var(--ink-2);white-space:nowrap}
.ri-cuad-col.esta .ri-cuad-x{color:var(--accent);font-weight:600}
.ri-primero .ri-ley{margin-top:12px}
/* Por proyecto: el reparto (una barra en el color de cada proyecto; «Sin proyecto», gris) y la lista */
.ri-reparto{display:flex;gap:2px;height:12px;margin-top:14px;border-radius:6px;overflow:hidden}
.ri-reparto i{display:block;min-width:4px;background:var(--punto)}
.ri-reparto i.sin{background:var(--line-2)}
.ri-proys{display:grid;margin:12px 0 0;padding:0;list-style:none}
.ri-proys li{display:grid;grid-template-columns:auto minmax(0,1fr) auto 3.2em;align-items:center;gap:10px;min-height:36px;padding:4px 0;border-top:1px solid var(--line);font:500 14px/1.3 var(--f);color:var(--ink)}
.ri-proys li:first-child{border-top:0}
.ri-proys .punto{background:var(--punto)}
.ri-proys li.sin{color:var(--ink-2)}
.ri-proys li.sin .punto{background:transparent;box-shadow:inset 0 0 0 1.3px var(--ink-3)}
.ri-proys-n{overflow-wrap:anywhere}
.ri-proys-c{font-weight:600;text-align:right}
.ri-proys-p{color:var(--ink-2);text-align:right}

@media (max-width:1023px){
  .fx-chips .chip,.fx-nota-item .btn,.ri-ir,.vx-max .btn,.mes-ag-semcab .btn,.mes-hoja .hoja-pie .btn{min-height:44px}
  .fx-papelito-pie:has(.fx-sem) .fx-proy{font-size:0;gap:0}
}
@media (min-width:1024px){
  .fx-papelitos{grid-template-columns:repeat(3,164px);gap:16px;max-width:none;margin-top:18px}
  .fx-papelito{min-height:141px;padding:13px 13px 11px}
  .fx-papelito-txt{font-size:14px}
  .fx-elegir-t{font-size:20px}
  .ri-graf-sem{margin-left:-22px;margin-right:-22px}
  .fx{min-height:calc(100dvh - var(--arriba,0px) - 150px);justify-content:center;padding-bottom:28px}
  .fx-arriba{width:auto;margin:0;gap:10px}
  .fx-escena{max-width:560px;margin-top:28px}
  .fx-papel{width:360px;min-height:274px;padding:22px 22px 16px}
  .fx-papel.vacio .fx-papel-txt{font-size:20px}
  .fx-papel-txt{font-size:24px;line-height:1.28}
  .fx-reloj{margin-top:26px}
  .fx-tiempo{font-size:88px}
  .fx-linea{width:360px}
  .fx-respira{width:268px}
  .fx-abajo{margin-top:34px}
  .ri-frase{max-width:32ch;margin-top:14px;font-size:28px;line-height:1.25}
  /* «Semana a semana» a lo ancho y las demás en dos columnas, en tramos (ritmo.js, grilla y repartir) */
  .ri-grilla{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:26px;max-width:1120px}
  .ri-acc{max-width:1120px;margin-top:20px}
  .ri-acc+.ri-grilla{margin-top:20px}
  .ri-ocultos{max-width:1120px}
  .ri-cuads{--c:18px}
  .ri-bloque{padding:20px 22px 18px}
}
@media (min-width:1024px) and (max-height:880px){
  .fx-papel{width:320px;min-height:243px}
  .fx-linea{width:320px}
  .fx-tiempo{font-size:76px}
  .fx-reloj{margin-top:20px}
  .fx-respira{width:236px}
}
@media (max-width:374px){
  .fx-chico>.fx-ico:first-child{display:none}
  .mes-nav .btn.chico{padding:0 10px}
  .mes-hechas{font-size:12.5px;gap:8px}
  .fx-chico{padding:0 10px;gap:6px;font-size:12.5px}
  .fx-papel{width:min(100%,264px);min-height:190px}
  .fx-papel-txt{font-size:18.5px}
  .fx-tiempo{font-size:58px}
}
@media (prefers-reduced-motion:reduce){
  .fx-respira.con-max .fx-circulo{animation:fx-respirar-suave 10s infinite;transform:scale(.86)}
  .fx-linea>i{transition:none}
  .fx-papel,.fx-papel::before{transition:none}
}