/* Pendientes · estilo Jardín (spec §2.1). Sale del prototipo aprobado
   (docs/maquetas/2026-10-13-prototipo-jardin.html), sin sus animaciones: el movimiento lo hace GSAP
   (src/movimiento.js). Ningún HTML lleva estilos en línea: el CSP (style-src 'self') no los deja. */

@font-face { font-family: 'Nunito'; src: url('../assets/fuentes/nunito-variable.woff2') format('woff2'); font-weight: 600 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../assets/fuentes/fraunces-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

* { box-sizing: border-box; }
html { background: #F8FCFA; color-scheme: light; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; background: linear-gradient(180deg, #D9F0E3 0, #EAF6EF 260px, #F6FBF8 580px, #F8FCFA 900px) no-repeat; color: #1E3B32; font-family: 'Nunito', system-ui, sans-serif; font-weight: 600; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid #05464F; outline-offset: 2px; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Colores de cada área (spec §2.1): suave · fuerte · banda · texto de banda · punto */
.c-azul     { --suave: #E4ECFF; --fuerte: #2C4FC2; --banda: #3461E6; --banda-tx: #FFFFFF; --punto: #5B8CFF; }
.c-violeta  { --suave: #EFE7FF; --fuerte: #6234C2; --banda: #7C4DDB; --banda-tx: #FFFFFF; --punto: #A179F2; }
.c-petroleo { --suave: #DCF3F2; --fuerte: #00666C; --banda: #00787F; --banda-tx: #FFFFFF; --punto: #14B8B8; }
.c-ambar    { --suave: #FFF0D2; --fuerte: #8A5A00; --banda: #FFB020; --banda-tx: #3A2600; --punto: #FFAA00; }
.c-rosa     { --suave: #FDE5EE; --fuerte: #B0285A; --banda: #D13467; --banda-tx: #FFFFFF; --punto: #F7578C; }
.c-gris     { --suave: #EDF0F2; --fuerte: #4E585E; --banda: #66717A; --banda-tx: #FFFFFF; --punto: #B8BDC3; }

/* ── Disposición: teléfono primero ── */
.lado, .captura, .solo-ancha, .panel { display: none; }
.pantalla { max-width: 640px; margin: 0 auto; }
.fin { height: 110px; }

/* Encabezados */
.c-head { padding: 28px 20px 2px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.c-dia { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 42px; letter-spacing: -.01em; line-height: 1.05; color: #143A2F; }
.c-tit { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 36px; line-height: 1.08; color: #143A2F; }
.c-fecha { margin: 4px 0 0; font-size: 16px; font-weight: 600; color: #3F6357; }
.ico-btn { position: relative; flex: none; width: 46px; height: 46px; margin-top: 4px; border: 0; border-radius: 50%; background: rgba(255,255,255,.85); color: #05464F; display: grid; place-items: center; box-shadow: 0 8px 18px -12px rgba(5,70,79,.5); }
.ico-btn svg { width: 22px; height: 22px; }
.badge { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #05464F; color: #FFFFFF; font-size: 12px; font-weight: 800; display: grid; place-items: center; border: 2px solid #E3F3EA; }
.atras { display: inline-flex; align-items: center; gap: 2px; min-height: 40px; margin: 14px 0 0 10px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: #05464F; font-size: 16px; font-weight: 800; }
.atras svg { width: 20px; height: 20px; }
.sub-head { padding: 2px 20px 4px; }
.sub-head .c-tit { overflow-wrap: anywhere; }
/* Una sola separación entre el encabezado y la primera tarjeta: 14 px en Bandeja (el .tip), Área, Etiqueta y Archivadas. */
.sub-head + .card { margin-top: 14px; }

/* El jardín de la semana */
.garden { display: block; margin: 16px 16px 4px; background: rgba(255,255,255,.78); border-radius: 24px; padding: 14px 14px 10px; box-shadow: 0 10px 24px -18px rgba(5,70,79,.35); }
.g-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; row-gap: 2px; padding: 0 2px; }
.g-top b { font-size: 14px; font-weight: 800; color: #2F5247; }
.g-top span { font-size: 13px; font-weight: 700; color: #3F6357; font-variant-numeric: tabular-nums; }
.dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin-top: 6px; }
.d { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.d svg { width: 40px; height: 44px; overflow: visible; }
.d .l { font-size: 12px; font-weight: 800; color: #5B776D; width: 24px; height: 22px; border-radius: 11px; display: grid; place-items: center; }
.d.hoy .l { background: #05464F; color: #FFFFFF; }
.d.fut svg { opacity: .45; }
.fantasma { opacity: .3; }

/* Chips y separadores */
.chips { display: flex; gap: 8px; padding: 12px 16px 2px; overflow-x: auto; scrollbar-width: none; }
/* Los filtros de Hoy bajan a la línea siguiente si no caben (no se desplazan): así «Cuando puedas» se ve entero a 360 y 390. */
.chips-hoy { flex-wrap: wrap; overflow: visible; }
.chips button { flex: none; min-height: 38px; padding: 0 15px; border-radius: 999px; border: 1px solid #CFE4DA; background: rgba(255,255,255,.72); font-size: 14px; font-weight: 800; color: #2F5247; display: inline-flex; align-items: center; gap: 7px; }
.chips button[aria-pressed="true"] { background: #05464F; border-color: #05464F; color: #FFFFFF; }
.pt { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--punto); }
.mom { display: flex; align-items: center; gap: 8px; padding: 18px 22px 8px; font-size: 15px; font-weight: 800; }
.mom svg { width: 18px; height: 18px; color: #2B8F7B; }
.mom span { font-weight: 700; color: #5B776D; }

/* Proyectos (la banda viene de la dirección B) */
.proy { margin-top: 14px; }
.banda { display: flex; align-items: center; gap: 10px; width: calc(100% - 32px); margin: 0 16px 8px; height: 46px; padding: 0 8px 0 7px; border: 0; border-radius: 18px; text-align: left; font-size: 16px; font-weight: 800; background: var(--banda); color: var(--banda-tx); box-shadow: 0 10px 20px -16px rgba(5,40,50,.55); }
.banda .b-ic { flex: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.24); display: grid; place-items: center; font-size: 14px; }
.banda .b-n { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.banda .b-c { flex: none; min-width: 28px; height: 26px; padding: 0 9px; border-radius: 13px; background: rgba(255,255,255,.24); display: grid; place-items: center; font-size: 13px; font-variant-numeric: tabular-nums; }

/* Tarjetas */
.card { margin: 0 16px 10px; background: #FFFFFF; border-radius: 22px; display: flex; align-items: center; gap: 4px; padding: 8px 6px 8px 12px; box-shadow: 0 10px 22px -16px rgba(5,70,79,.4); }
.card .tx { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; border: 0; background: transparent; text-align: left; padding: 4px 0; border-radius: 16px; }
.ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 16px; background: var(--suave); color: var(--fuerte); }
.mom-ic svg { width: 20px; height: 20px; }
.tx-in { min-width: 0; display: flex; flex-direction: column; }
.t { font-size: 16px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.s { margin-top: 2px; font-size: 13px; font-weight: 600; color: #4C6B60; }
.rojo { color: #B4233F; }
.tag-s { color: #6234C2; font-weight: 800; }
.card-bandeja { flex-direction: column; align-items: stretch; padding: 12px 12px 10px 14px; }
.extra { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 0; }
.ic-area { width: 36px; height: 36px; font-size: 14px; border: 0; }
.mini { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid #CFE4DA; background: #F3FAF6; font-size: 13px; font-weight: 800; color: #2F5247; display: inline-flex; align-items: center; gap: 6px; }
.mini svg { width: 14px; height: 14px; }
.mini.rojo { border-color: #F3C5CF; background: #FFF5F7; color: #B4233F; }
.mini.peligro { border-color: #B4233F; background: #B4233F; color: #FFFFFF; }
.card-arch { flex-direction: column; align-items: stretch; padding: 12px 12px 10px 14px; }
.confirma { margin-top: 10px; padding: 10px 12px; border-radius: 16px; background: #FDECEF; color: #7A1A2E; font-size: 13px; line-height: 1.4; }
.confirma p { margin: 0 0 8px; }
.confirma .extra { margin: 0; }

/* El check: estados quietos. La animación entre ellos es de GSAP (movimiento.js). */
.chk { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; padding: 0; border-radius: 50%; }
.chk-in { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #A6CEC0; display: grid; place-items: center; color: #FFFFFF; }
.chk-in svg { width: 17px; height: 17px; }
.chk-in svg path { stroke-dasharray: 22; stroke-dashoffset: 22; }
.hecha .chk-in, .chk[aria-pressed="true"] .chk-in { background: #05464F; border-color: #05464F; }
.hecha .chk-in svg path, .chk[aria-pressed="true"] .chk-in svg path { stroke-dashoffset: 0; }
/* El título de una tarea es un elemento EN LÍNEA (.tt) dentro de .t o de .fila-t. Así la línea del
   tachado mide lo que mide el texto y, si el título ocupa dos renglones, tacha cada uno en orden
   (box-decoration-break: slice). Un hijo directo de un flex se vuelve bloque y la línea cruzaría toda
   la fila: por eso, en las filas flex, el texto va dentro de un contenedor (.fila-t) que es el que crece. */
.tt { background: linear-gradient(#9DBDB1, #9DBDB1) no-repeat 0 62% / 0% 1.5px; -webkit-box-decoration-break: slice; box-decoration-break: slice; }
.hecha .tt { background-size: 100% 1.5px; color: #82A095; }

/* Cumplido hoy */
.cumplido { margin: 0 16px; padding: 6px 10px 6px 14px; background: rgba(255,255,255,.6); border-radius: 20px; }
.cumplido .fila { display: flex; align-items: center; gap: 4px; }
.cumplido .fila-t { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: #4C6B60; overflow-wrap: anywhere; }
.cumplido .chk-in { width: 24px; height: 24px; }
.cumplido .hr { font-size: 12px; font-weight: 700; color: #5B776D; font-variant-numeric: tabular-nums; padding-right: 6px; }
.vacio { margin: 16px 22px 6px; font-size: 15px; color: #4C6B60; }
.foto { max-width: 640px; margin: 10px auto 0; padding: 0 22px; font-size: 13px; line-height: 1.35; color: #4C6B60; }
.vacio-card { margin: 16px 16px 6px; padding: 36px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; background: #FFFFFF; border-radius: 22px; box-shadow: 0 10px 22px -16px rgba(5,70,79,.4); }
.vacio-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--suave); color: var(--fuerte); font-size: 22px; font-weight: 800; }
.vacio-ic svg { width: 28px; height: 28px; }
.vacio-t { margin: 16px 0 0; font-size: 17px; font-weight: 800; color: #143A2F; overflow-wrap: anywhere; }
.vacio-l { margin: 6px 0 0; font-size: 14px; color: #4C6B60; overflow-wrap: anywhere; }
.vacio-btn { height: 54px; margin-top: 22px; padding: 0 26px; border: 0; border-radius: 27px; background: #05464F; color: #FFFFFF; font-size: 16px; font-weight: 800; }
.tip { margin: 14px 16px 4px; padding: 14px; border-radius: 20px; background: rgba(255,255,255,.8); display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: #2F5247; }
.tip svg { flex: none; width: 22px; height: 22px; color: #2E9A82; margin-top: 1px; }

/* Un área (lista de T1) */
.area-card { margin: 14px 16px 14px; border-radius: 24px; padding: 14px; display: flex; align-items: center; gap: 12px; background: var(--banda); color: var(--banda-tx); }
.area-card .ic { width: 48px; height: 48px; font-size: 20px; background: #FFFFFF; color: var(--fuerte); }
.area-n { margin: 0; font-size: 19px; font-weight: 800; overflow-wrap: anywhere; }
.area-card > div { min-width: 0; }
.area-card span { font-size: 14px; font-weight: 700; }
.area-edit { flex: none; width: 44px; height: 44px; margin-left: auto; border: 0; border-radius: 50%; background: rgba(255,255,255,.24); color: var(--banda-tx); display: grid; place-items: center; }
.area-edit svg { width: 20px; height: 20px; }
.colores { display: flex; flex-wrap: wrap; gap: 12px; padding-bottom: 6px; }
.color { position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--banda); color: var(--banda-tx); display: grid; place-items: center; }
.color input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.color-c svg { display: none; width: 20px; height: 20px; }
.color:has(input:checked) { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px #05464F; }
.color:has(input:checked) .color-c svg { display: block; }
.color:has(input:focus-visible) { outline: 2px solid #05464F; outline-offset: 4px; }

/* Botones */
.fab { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 10; width: 60px; height: 60px; border-radius: 50%; border: 0; background: #05464F; color: #FFFFFF; display: grid; place-items: center; box-shadow: 0 12px 24px -10px rgba(5,70,79,.75); }
.fab svg { width: 26px; height: 26px; }
.ok { flex: none; height: 56px; border: 0; border-radius: 28px; background: #05464F; color: #FFFFFF; font-size: 17px; font-weight: 800; }
.ok:disabled { opacity: .45; }
.ok.borde { background: #FFFFFF; color: #05464F; border: 2px solid #05464F; padding: 0 24px; }
.reintentar { display: block; margin: 8px auto 0; }
.txt-btn { flex: none; min-height: 44px; border: 0; background: transparent; color: #4C6B60; font-size: 15px; font-weight: 800; }
.c-acc { position: relative; display: flex; gap: 10px; flex: none; }
.menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 15; min-width: 200px; padding: 6px; background: #FFFFFF; border-radius: 22px; box-shadow: 0 14px 32px -10px rgba(5,70,79,.45), 0 2px 6px rgba(5,70,79,.12); }
.menu-fila { display: flex; align-items: center; gap: 12px; width: 100%; height: 48px; padding: 0 14px; border: 0; border-radius: 16px; background: transparent; font-size: 15px; font-weight: 800; color: #2F5247; text-align: left; white-space: nowrap; }
.menu-fila svg { flex: none; width: 20px; height: 20px; }
.menu-fila.apagado { color: #4C6B60; }
.menu-sep { height: 1px; margin: 4px 8px; background: #D5E5DD; }

/* La hoja (anotar y editar). Su posición de entrada y salida la anima GSAP. */
.velo { position: fixed; inset: 0; background: rgba(10,30,26,.36); z-index: 20; }
.hoja { position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; margin: 0; max-height: calc(100dvh - 36px); overflow-y: auto; overscroll-behavior: contain; background: #FFFFFF; border-radius: 30px 30px 0 0; padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 12px; box-shadow: 0 -10px 30px rgba(0,0,0,.12); }
/* Guardar de «Anotar» queda fijo abajo: con muchas subtareas o el teclado abierto siempre se alcanza. La sombra blanca
   le da fondo y tapa lo que pasa por debajo, también sobre la zona segura del iPhone. */
.hoja .ok { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 1; box-shadow: 0 calc(10px + env(safe-area-inset-bottom, 0px)) 0 10px #FFFFFF; }
/* En «Anotar» Guardar vive en una franja fija (.hoja-pie) de fondo sólido que llega al borde de abajo, zona segura incluida:
   lo que se desplaza desaparece limpio debajo de ella. El margen superior negativo la monta sobre el hueco de 12 px del
   flex, así que sin desbordar la hoja queda como si la franja no existiera. Una línea fina la separa solo cuando hay contenido
   debajo: son dos fondos de la hoja, uno que se desplaza con la vista (la línea) y otro que va con el contenido (blanco, sobre
   el final, y tapa la línea al llegar abajo). */
.hoja { --pie-x: 18px; --pie-b: calc(18px + env(safe-area-inset-bottom, 0px)); --pie-h: calc(12px + 56px + var(--pie-b)); }
.hoja:has(> .hoja-pie) { padding-bottom: 0; background: linear-gradient(#FFFFFF, #FFFFFF) local 0 100% / 100% calc(var(--pie-h) + 2px) no-repeat, linear-gradient(#DCE8E2, #DCE8E2) scroll 0 calc(100% - var(--pie-h)) / 100% 1px no-repeat, #FFFFFF; }
.hoja-pie { position: sticky; bottom: 0; z-index: 1; display: flex; flex-direction: column; margin: -12px calc(-1 * var(--pie-x)) 0; padding: 12px var(--pie-x) var(--pie-b); background: #FFFFFF; }
.hoja-pie .ok { position: static; box-shadow: none; }
/* Los hijos de la hoja no se encogen: con overflow:hidden (título y notas del detalle) el flex los aplastaba antes de dejar que la hoja se desplazara. */
.hoja > * { flex-shrink: 0; }
.hoja-asa { display: flex; flex-direction: column; gap: 2px; touch-action: none; }
.grab { flex: none; width: 38px; height: 5px; border-radius: 3px; background: #D5E2DC; margin: 0 auto 2px; }
.hoja-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hoja-top h2 { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 26px; color: #143A2F; }
.x { flex: none; width: 44px; height: 44px; border: 0; background: #F1F7F4; border-radius: 50%; display: grid; place-items: center; color: #4C6B60; }
.x svg { width: 20px; height: 20px; }
.hoja input[type="text"], .entrada-caja input { width: 100%; height: 52px; border-radius: 18px; border: 1.5px solid #D5E5DD; padding: 0 16px; font-size: 16px; color: #1E3B32; background: #FFFFFF; }
.hoja input[type="text"]:focus, .entrada-caja input:focus { outline: none; border-color: #05464F; }
.lbl { margin: 2px 0 -4px; font-size: 13px; font-weight: 800; color: #4C6B60; }
.hoja .chips { padding: 0; flex-wrap: wrap; overflow: visible; }
.hoja .chips button { max-width: 100%; min-width: 0; overflow-wrap: anywhere; text-align: left; }
.ayuda { margin: 0; font-size: 13px; color: #4C6B60; line-height: 1.4; }
.ayuda code { font-family: ui-monospace, Menlo, monospace; font-size: 12px; background: #F1F7F4; padding: 1px 5px; border-radius: 6px; }

/* ── El detalle de la tarea (spec 2026-10-13-tarea-completa §4; maqueta docs/maquetas/2026-10-13-tarea-completa.html) ──
   Es la misma hoja de «Anotar». Aquí hay botones y campos de verdad, no los span de la maqueta: cada
   uno se reinicia (borde 0, fondo transparente, font heredada) antes de vestirlo. `.hoja input[type="text"]`
   (arriba) le pone 52 px de alto y un borde a todo campo de texto de la hoja, así que los campos de
   subtarea y de etiqueta lo sobrescriben con un selector MÁS específico: el mismo más su clase. */
.zona { display: flex; flex-direction: column; gap: 12px; }
.det-area { max-width: 100%; min-width: 0; overflow-wrap: anywhere; text-align: left; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px 0 6px; border: 0; border-radius: 999px; background: var(--suave); color: var(--fuerte); font-size: 14px; font-weight: 800; }
.det-area .ic { width: 24px; height: 24px; font-size: 12px; background: #FFFFFF; }
.det-t { display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; resize: none; overflow: hidden; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 27px; line-height: 1.15; color: #143A2F; text-wrap: balance; }
.hechos { display: flex; gap: 8px; flex-wrap: wrap; }
.hecho { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: #F1F7F4; font-size: 13px; font-weight: 800; color: #2F5247; }
.hecho svg { width: 15px; height: 15px; color: #2B8F7B; }
.hecho.rojo { background: #FDECEF; color: #B4233F; }
.hecho.rojo svg { color: #B4233F; }
.hecho.mas, .tag.mas { background: #FFFFFF; box-shadow: inset 0 0 0 1.5px #D5E5DD; color: #4C6B60; }
.hecho.mas svg, .tag.mas svg { width: 13px; height: 13px; color: #4C6B60; }
/* La fecha límite: el calendario del sistema va encima del chip, invisible. En el teléfono, tocar el chip lo abre. */
.hecho.vence { padding-right: 4px; }
.hecho.mas.vence { padding-right: 12px; }
.vence-sel { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.vence-sel input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.hx { flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; display: grid; place-items: center; }
.hecho .hx svg { width: 13px; height: 13px; color: inherit; }

/* Subtareas */
.subs { display: flex; flex-direction: column; background: #F6FBF8; border-radius: 20px; padding: 4px 8px; }
.subs .fila { display: flex; align-items: center; gap: 2px; }
.subs .chk-in { width: 24px; height: 24px; }
.subs .fila-t { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; }
.sub-t { display: block; width: 100%; min-height: 44px; padding: 0; border: 0; background: transparent; text-align: left; font-size: 15px; font-weight: 600; color: inherit; overflow-wrap: anywhere; }
.hoja input[type="text"].sub-in { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 0; border-radius: 14px; font-size: 16px; font-weight: 600; box-shadow: inset 0 0 0 1.5px #D5E5DD; }
.hoja input[type="text"].sub-in:focus { box-shadow: inset 0 0 0 1.5px #05464F; }
/* Las filas de la hoja Anotar (llevan data-k) se leen como filas del detalle: sin contorno, y el contorno solo con foco.
   El margen negativo (y el relleno que lo devuelve) deja el texto donde lo pone el botón de una subtarea del detalle (44 + 2 de hueco). */
.hoja input[type="text"].sub-in[data-k] { margin-left: -8px; padding: 0 12px 0 8px; box-shadow: none; background: transparent; }
.hoja input[type="text"].sub-in[data-k]:focus { box-shadow: inset 0 0 0 1.5px #05464F; background: #FFFFFF; }
.subs button.fila.nueva { width: 100%; padding: 0; border: 0; background: transparent; text-align: left; }
.sub-x { flex: none; width: 44px; height: 44px; border: 0; background: transparent; display: grid; place-items: center; color: #4C6B60; }
.sub-x svg { width: 16px; height: 16px; }
.sub-mas { font-size: 15px; font-weight: 700; color: #4C6B60; }
.mas-c { flex: none; width: 44px; height: 44px; display: grid; place-items: center; }
.mas-c span { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #C9DDD3; display: grid; place-items: center; color: #4C6B60; }
.mas-c svg { width: 13px; height: 13px; }

/* Etiquetas. La ✕ se ve siempre; solo con mouse se oculta hasta pasar el cursor o enfocar el chip. */
.tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tag { display: inline-flex; align-items: center; min-height: 32px; padding: 0 4px 0 12px; border: 0; border-radius: 999px; background: #EFE7FF; color: #6234C2; font-size: 13px; font-weight: 800; }
.tag.mas { gap: 4px; padding: 0 12px 0 10px; }
.tag-ir { min-height: 32px; padding: 0; border: 0; background: transparent; color: inherit; font-size: 13px; font-weight: 800; }
.tag-x { flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; display: grid; place-items: center; }
.tag-x svg { width: 13px; height: 13px; }
.eti-z { display: contents; }
.hoja input[type="text"].eti-in { flex: 1 1 140px; width: auto; min-width: 0; height: 36px; padding: 0 14px; border-radius: 999px; font-size: 16px; }
.sugs { flex: 0 0 100%; display: flex; gap: 6px; flex-wrap: wrap; }
.sugs:empty { display: none; }
.sug { min-height: 32px; padding: 0 12px; border: 1px solid #DCD0F5; border-radius: 999px; background: #FFFFFF; color: #6234C2; font-size: 13px; font-weight: 800; }
@media (hover: hover) and (pointer: fine) {
  .tag-x { opacity: 0; }
  .tag:hover .tag-x, .tag:focus-within .tag-x { opacity: 1; }
}

/* Notas (16 px: con menos, Safari del iPhone acerca la pantalla al tocar el campo) */
.notas { display: block; width: 100%; margin: 0; padding: 12px 14px; border: 0; border-radius: 18px; resize: none; overflow: hidden; background: #F6FBF8; font: inherit; font-size: 16px; font-weight: 600; line-height: 1.5; color: #2F5247; }
.notas::placeholder { color: #8AA399; }

/* Avisos. GSAP los muestra y los oculta (autoAlpha), centrados con xPercent -50. */
/* Sin transform en el CSS: GSAP lo centra con xPercent -50. Si el CSS trajera translateX(-50%), GSAP
   lo leería en px y lo sumaría al xPercent, y el aviso quedaría corrido. */
.toast { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); visibility: hidden; opacity: 0; pointer-events: none; z-index: 40; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); padding: 8px 8px 8px 16px; min-height: 44px; border-radius: 999px; background: rgba(20,35,30,.94); color: #FFFFFF; font-size: 14px; font-weight: 700; }
.toast.ver { pointer-events: auto; }
.toast span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast button { flex: none; min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(255,255,255,.12); color: #9FE3CF; font-weight: 800; }

/* La entrada */
.entrada { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.entrada-caja { width: 100%; max-width: 380px; background: rgba(255,255,255,.85); border-radius: 30px; padding: 28px 22px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 10px 22px -16px rgba(5,70,79,.4); }
.entrada-planta svg { display: block; width: 72px; height: 80px; margin: 0 auto; }
.entrada-caja .c-tit, .entrada-caja .c-fecha { text-align: center; }
.entrada-caja .ok { margin-top: 8px; }
.error { margin: 0; font-size: 14px; color: #B4233F; }

/* ── La computadora (spec §6): barra lateral, captura arriba, proyectos lado a lado, panel a la derecha ── */
@media (min-width: 920px) {
  .app { display: grid; grid-template-columns: 250px minmax(0, 1fr); }
  .lado { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100dvh; overflow-y: auto; padding: 26px 14px 18px; background: rgba(255,255,255,.5); border-right: 1px solid rgba(5,70,79,.08); }
  .lado-logo { margin: 0 10px 16px; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 26px; color: #143A2F; }
  .lado-nav { display: flex; flex-direction: column; gap: 2px; }
  .lado-nav button { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border: 0; border-radius: 14px; background: transparent; font-size: 15px; font-weight: 800; color: #2F5247; text-align: left; }
  .lado-nav button:hover { background: rgba(255,255,255,.6); }
  .lado-nav button[aria-current="page"] { background: #FFFFFF; color: #05464F; box-shadow: 0 8px 18px -14px rgba(5,70,79,.5); }
  .lado-nav svg { flex: none; width: 20px; height: 20px; }
  .lado-nav .pt { width: 12px; height: 12px; border-radius: 4px; margin: 0 4px; background: var(--banda); }
  .lado-nav button > span { min-width: 0; overflow-wrap: anywhere; }
  .lado-nav button.apagado { color: #4C6B60; }
  .lado-nav .cnt { flex: none; margin-left: auto; font-size: 13px; font-weight: 800; color: #5B776D; font-variant-numeric: tabular-nums; }
  .lado-sec { margin: 18px 12px 6px; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #5B776D; }
  .salir-lado { margin-top: auto; align-self: flex-start; padding: 0 12px; }
  .cuerpo { min-width: 0; }
  .captura { display: flex; gap: 10px; padding: 20px 28px 4px; margin: 0; }
  .captura .campo { flex: 1; min-width: 0; height: 54px; border-radius: 27px; background: #FFFFFF; display: flex; align-items: center; gap: 10px; padding: 0 20px; box-shadow: 0 10px 22px -16px rgba(5,70,79,.45); color: #5B776D; }
  .captura .campo svg { flex: none; width: 20px; height: 20px; }
  .captura .campo:focus-within { box-shadow: 0 0 0 2px #05464F; }
  .captura input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 16px; color: #1E3B32; }
  .captura-ok { flex: none; height: 54px; padding: 0 26px; border: 0; border-radius: 27px; background: #05464F; color: #FFFFFF; font-size: 16px; font-weight: 800; }
  .solo-ancha { display: inline; }
  .solo-movil, .fab { display: none !important; }
  .pantalla { max-width: none; margin: 0; padding: 0 12px 28px; }
  /* Las listas van en grilla de tarjetas y a la izquierda, como Hoy: el título arranca en la misma x (278 px =
     250 de la barra + 12 de .pantalla + 16 de .angosta) y a la misma distancia de la barra de anotar (59 px = 57 + 2 del sub-head). */
  .angosta { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); column-gap: 14px; row-gap: 10px; align-content: start; align-items: start; max-width: none; margin: 0; padding: 57px 16px 0; }
  .angosta > :not(.card) { grid-column: 1 / -1; }
  .angosta > .card { margin: 0; min-width: 0; }
  .angosta .sub-head { padding: 2px 0 4px; }
  .angosta .area-card { margin: 2px 0 4px; }
  .angosta .tip { margin: 14px 0 0; }
  .angosta .vacio { margin: 16px 6px 6px; }
  .vacio-card { max-width: 560px; }
  .angosta .vacio-card { margin: 6px 0 0; }
  .angosta .mom { padding: 8px 6px 0; }
  .angosta > .tablero-hoy { padding: 10px 0 0; }
  .hoy-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 18px 16px 4px; }
  .hoy-top .c-head { padding: 0; flex: none; }
  .hoy-top .c-fecha { white-space: nowrap; }
  .hoy-top .c-dia { font-size: 48px; }
  .hoy-top .garden { margin: 0; flex: 0 1 420px; min-width: 300px; }
  .tablero-hoy { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; padding: 10px 16px 0; align-items: start; }
  .tablero-hoy[data-n="1"] { box-sizing: content-box; max-width: 560px; }
  .tablero-hoy[data-n="2"] { box-sizing: content-box; max-width: calc(2 * 560px + 18px); }
  .tablero-hoy .proy { margin-top: 0; }
  .tablero-hoy .banda { width: 100%; margin: 0 0 8px; }
  .tablero-hoy .card { margin: 0 0 10px; }
  .cumplido { max-width: 640px; }
  .velo { background: rgba(10,30,26,.16); }
  .hoja { left: auto; top: 0; width: 430px; max-height: none; border-radius: 28px 0 0 28px; padding: 18px 24px 24px; box-shadow: -24px 0 48px -24px rgba(5,40,50,.4);  --pie-x: 24px; --pie-b: 24px; }
  .hoja .grab { display: none; }
  .toast { bottom: 28px; }
  .fin { height: 24px; }
}

/* ── El panel «Tu semana» (D2): tercera columna, solo cuando el centro aún cabe en 2 columnas de Hoy ── */
@media (min-width: 1240px) {
  .app { grid-template-columns: 250px minmax(0, 1fr) 320px; }
  .hoy-top .garden { display: none; }
  .panel { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 0; height: 100dvh; overflow-x: hidden; overflow-y: auto; padding: 26px 14px 18px; background: rgba(255,255,255,.5); border-left: 1px solid rgba(5,70,79,.08); }
  .panel .garden { margin: 0; padding: 14px 6px 10px; }
  .panel .g-top { flex-direction: column; align-items: flex-start; gap: 2px; padding: 0 4px; }
  .panel .g-top b { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 20px; color: #143A2F; }
  .panel .dias { gap: 0; margin-top: 10px; }
  .panel .d svg { width: 50px; height: 55px; margin: 0 -5px; }
  .pn-sec { display: flex; flex-direction: column; gap: 2px; }
  .pn-t { margin: 0 8px 6px; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #5B776D; }
  .pn-dia { margin: 8px 8px 2px; font-size: 13px; font-weight: 800; color: #2F5247; }
  .pn-vacio { margin: 0 8px; font-size: 14px; color: #4C6B60; }
  .pn-fila { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 4px 8px; border: 0; border-radius: 14px; background: transparent; text-align: left; font-size: 14px; font-weight: 700; color: #1E3B32; }
  .pn-fila:hover { background: rgba(255,255,255,.7); }
  .pn-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .pn-tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pn-s { font-size: 12px; font-weight: 700; }
}

/* ── /autorizar: Claude pide entrar con la cuenta (spec 2026-10-20 §10). Solo clases .az-; reusa .entrada-caja, .ok, .lbl y .error. ── */
.entrada-caja.az-caja { max-width: 440px; padding: 28px 22px 24px; gap: 14px; }
.az-marca { display: flex; align-items: center; justify-content: center; gap: 10px; }
.az-marca svg { flex: none; width: 36px; height: 40px; }
.az-nombre { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 26px; line-height: 1.1; color: #143A2F; }
.az-pide { margin: 6px 0 -6px; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #4C6B60; }
.az-tit { margin: 0; text-align: center; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 28px; line-height: 1.15; color: #143A2F; overflow-wrap: anywhere; }
.az-texto { margin: 0; text-align: center; font-size: 15px; line-height: 1.4; color: #4C6B60; overflow-wrap: anywhere; }
.az-destino { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; font-size: 14px; color: #4C6B60; }
.az-host { min-width: 0; max-width: 100%; padding: 4px 12px; border-radius: 999px; background: #E4F3EA; color: #05464F; font-weight: 800; overflow-wrap: anywhere; }
.az-permiso { text-wrap: balance; margin: 0; padding: 14px 16px; border-radius: 18px; background: #F1F7F4; text-align: center; font-size: 16px; line-height: 1.4; color: #1E3B32; overflow-wrap: anywhere; }
.az-aviso { text-wrap: balance; text-align: center; padding: 12px 14px; border-radius: 16px; background: #FDE5EA; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.az-botones { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.az-botones .ok, .az-entrar .ok { min-height: 56px; margin-top: 0; }
.az-entrar { display: flex; flex-direction: column; gap: 10px; }
.az-entrar .lbl { margin: 4px 0 -4px; }
.az-entrar .ok { margin-top: 8px; }
.az-salida { display: flex; align-items: center; justify-content: center; min-height: 56px; text-decoration: none; }