/* ============================================================ Nidu PWA — Componentes reutilizables ============================================================ */ /* ---------------- Top bar ---------------- */ .topbar { flex: none; z-index: var(--z-topbar); height: calc(var(--topbar-h) + var(--safe-t)); padding: var(--safe-t) var(--sp-3) 0; display: flex; align-items: center; gap: var(--sp-2); /* SIN fondo propio. Pintar `--bg` acá tapaba el degradado de la app y dejaba una franja horizontal visible justo debajo de la barra — un corte que el prototipo no tiene, porque ahí la barra flota sobre el fondo del frame. No hace falta fondo: la topbar es hermana del scroll (`.app` es flex y `#app` scrollea aparte), así que el contenido nunca le pasa por debajo. */ background: transparent; transition: transform var(--dur-fast) var(--ease-press); } /* Gesto de "tirar del hilo" (handoff 4a): al apretar volver, la barra entera se corre 6px a la izquierda antes de navegar — el mismo sentido que el hilo que se tira. Solo cuando hay back: sin botón no hay de dónde tirar. */ .topbar:has([data-action="back"]:active) { transform: translateX(-6px); } /* Título de pantalla: ALINEADO A LA IZQUIERDA, como en el prototipo. Centrado quedaba descolgado en cuanto la fila dejó de ser simétrica (la marca ya no está en el medio). */ .topbar__title { flex: 0 1 auto; min-width: 0; font-size: var(--fs-23); font-weight: var(--fw-x); color: var(--ink); text-align: left; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Envoltorio del título con back (todo TopBar salvo brand/vacío): mismo flex-shrink que tenía `.topbar__title` sola, para que la elipsis siga funcionando igual — el hilo se ancla a este wrapper, no al `

`. */ .topbar__titlewrap { position: relative; flex: 0 1 auto; min-width: 0; } .topbar__hilo { position: absolute; left: 0; top: 100%; margin-top: -5px; width: 100%; height: 9px; overflow: visible; pointer-events: none; } /* El check remata la línea, siempre pegado a su final (no al ancho del wrapper: con elipsis el hilo termina ahí igual). Tamaño fijo — si se estirara con el hilo dejaría de leerse como un círculo. */ .topbar__hilo-check { position: absolute; right: -15px; top: 100%; margin-top: -7px; pointer-events: none; } /* Marca: el logotipo COMPLETO en PNG, alineado a la izquierda. No lleva `flex:1` —eso lo centraba— sino que el hueco lo empuja `.topbar__gap`. */ .topbar__title--brand { flex: none; display: flex; align-items: center; } .topbar__brand-mark { height: 28px; width: auto; max-width: none; flex: none; display: block; } .topbar__gap { flex: 1; } /* Vuelta a la conversación con Nidu en WhatsApp. Ya no lleva punto de aviso: estaba siempre encendido y no avisaba de nada. */ .topbar__canal { position: relative; flex: none; width: 44px; height: 44px; border-radius: var(--r-pill); display: grid; place-items: center; color: var(--green); background: var(--surface); box-shadow: var(--sh-sm); transition: transform var(--dur-fast) var(--ease-out); } .topbar__canal:active { transform: scale(.92); } /* Avatar del perfil (arriba a la derecha). Anillo blanco para despegarlo del fondo menta; inicial sobre el menta de marca cuando no hay foto. */ .topbar__avatar { flex: none; width: 42px; height: 42px; border-radius: var(--r-pill); display: grid; place-items: center; overflow: hidden; text-decoration: none; background: var(--green-soft); color: var(--green-dk); font-weight: var(--fw-black); font-size: var(--fs-16); box-shadow: var(--sh-sm); border: 2px solid var(--surface); transition: transform var(--dur-fast) var(--ease-out); } .topbar__avatar:active { transform: scale(.92); } .topbar__avatar-img { width: 100%; height: 100%; object-fit: cover; } .topbar__avatar-ini { line-height: 1; } /* Botón circular (back, acciones de la topbar) */ .icon-btn { flex: none; width: 42px; height: 42px; border-radius: var(--r-pill); display: grid; place-items: center; color: var(--ink); background: var(--surface); box-shadow: var(--sh-sm); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .icon-btn:hover { transform: translateY(-1px); box-shadow: var(--sh-md); } .icon-btn:active { transform: scale(.94); } .icon-btn svg { width: 22px; height: 22px; } /* ---------------- Botones ---------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 var(--sp-5); border-radius: var(--r-pill); font-weight: var(--fw-bold); font-size: var(--fs-13-5); transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); user-select: none; } .btn svg { width: 20px; height: 20px; } .btn:active { transform: scale(.97); } .btn--primary { background: var(--green); color: #fff; box-shadow: var(--sh-brand); } .btn--primary:hover { background: var(--green-hover); } .btn--dark { background: var(--ink); color: #fff; box-shadow: var(--sh-md); } .btn--secondary { background: var(--green-soft); color: var(--green-dk); } .btn--secondary:hover { background: color-mix(in srgb, var(--green-soft) 82%, var(--green) 18%); } .btn--ghost { background: transparent; color: var(--green); border: 1.5px solid var(--line); } .btn--ghost:hover { border-color: var(--green); background: color-mix(in srgb, var(--green-soft) 45%, transparent); } .btn--block { display: flex; width: 100%; } .btn--lg { min-height: 54px; font-size: var(--fs-16); } .btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; } /* CTA inferior: va al FINAL del contenido, en flujo normal. Antes era `position: sticky; bottom: 0` —pegada al pulgar—, pero flotaba sobre lo último de la pantalla y tapaba campos al scrollear (en Crear se comía "¿Para cuándo?" y "Prioridad"). Ahora se apoya después de todo: se llega scrolleando y no cubre nada. El degradado y el sangrado a los bordes eran para enmascarar lo que pasaba por detrás de la barra fija; sin fija, sobran. */ .bottom-cta { margin-top: var(--sp-6); padding-bottom: var(--safe-b); /* Grid y no bloque: el detalle apila el cierre y la vuelta a WhatsApp. */ display: grid; gap: var(--sp-2); } /* ---------------- Chips / badges ---------------- */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-pill); font-size: var(--fs-13); font-weight: var(--fw-x); line-height: 1; background: var(--surface-sunk); color: var(--ink-2); } .chip__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .chip--exito { background: var(--exito-bg); color: var(--exito); } .chip--alerta { background: var(--alerta-bg); color: var(--alerta); } .chip--info { background: var(--info-bg); color: var(--info); } .chip--green { background: var(--green-soft); color: var(--green-dk); } /* Prioridad (punto) */ .prio { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); font-weight: var(--fw-bold); color: var(--ink-2); } .prio__dot { width: 8px; height: 8px; border-radius: 50%; } .prio--alta .prio__dot { background: var(--alerta); } .prio--media .prio__dot { background: var(--coral); } .prio--baja .prio__dot { background: var(--green); } /* ---------------- Tarjeta de pendiente (Ruta, Agenda) ---------------- Valores del prototipo. La tarjeta es BLANCA y el color de la categoría vive en el tile del icono. Antes se teñía la tarjeta entera: con seis categorías la lista quedaba un arcoíris donde nada resaltaba, justo lo contrario de una ruta priorizada. */ .pcard { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; padding: 13px; margin-bottom: 9px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-sm); transform-style: preserve-3d; animation: cardIn var(--dur-base) var(--ease-out) both; transition: transform .32s var(--ease-out), opacity .32s var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .pcard:hover { box-shadow: var(--sh-md); } /* Al resolver, la tarjeta se encoge y se va antes de que la lista se reordene. */ .pcard.is-resolving { transform: scale(.95); opacity: 0; } /* Zona táctil que abre el detalle (separada del check para no anidar botones en enlaces) */ .pcard__hit { display: flex; align-items: center; gap: 13px; flex: 1 1 auto; min-width: 0; color: inherit; border-radius: var(--r-sm); } /* Tile del icono: degradado desde el tint de la categoría hacia el blanco, con un brillo interno arriba. El `translateZ` lo despega de la tarjeta — se lee como una pieza apoyada encima, no como un cuadrado pintado. */ .pcard__ic { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(145deg, var(--tint-cat, var(--green-soft)), #ffffff 155%); border: 1px solid var(--borde-cat, var(--line)); box-shadow: inset 0 1px 1px rgba(255,255,255,.7), 0 4px 10px rgba(37,51,49,.10); color: var(--acento-cat, var(--green)); transform: translateZ(20px); } .pcard__ic svg { width: 22px; height: 22px; } .pcard__body { flex: 1 1 auto; min-width: 0; display: block; } /* Chip "Prioridad alta": solo cuando además vence HOY —empate real entre varios pendientes del mismo día (reporte de campo), no un rótulo permanente de prioridad. Mismo tratamiento ámbar que `.mcard__chip` en el Mapa. */ .pcard__prio { display: inline-flex; align-items: center; margin-bottom: 3px; font-size: 10px; font-weight: var(--fw-x); line-height: 1; padding: 3px 7px; border-radius: var(--r-pill); background: var(--amber-bg); color: var(--amber-ink); } .pcard__title { display: block; max-width: 100%; font-size: var(--fs-14-5); font-weight: var(--fw-bold); color: var(--ink); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pcard__meta { display: flex; gap: 8px; margin-top: 3px; font-size: var(--fs-12); font-weight: var(--fw-semi); color: var(--muted); } /* El `` marca la categoría; no es cursiva, es el color oscuro de su paleta. */ .pcard__meta em { font-style: normal; color: var(--texto-cat, var(--ink-2)); } .pcard__vencido { color: var(--alerta); font-weight: var(--fw-x); } .pcard__right { flex: none; display: flex; align-items: center; gap: var(--sp-2); color: var(--ink-3); } .pcard__right svg { width: 20px; height: 20px; } /* Check de la tarjeta: cuadrado redondeado con el acento de la categoría, no un círculo gris. En el prototipo el check nunca es neutro. */ .pcard__check { flex: none; width: 34px; height: 34px; padding: 0; border-radius: 11px; border: 2.5px solid var(--borde-cat, var(--line)); background: none; display: grid; place-items: center; color: var(--acento-cat, var(--green)); transition: all var(--dur-base) var(--ease-spring); } .pcard__check:active { transform: scale(.86); } .pcard__check.is-done { background: var(--acento-cat, var(--green)); border-color: var(--acento-cat, var(--green)); color: #fff; } /* Círculo de completar genérico (notas de Inicio y demás) */ .check { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; color: transparent; background: var(--surface); transition: all var(--dur-fast) var(--ease-out); } .check svg { width: 16px; height: 16px; } .check:hover { border-color: var(--green); } .check.is-done { background: var(--green); border-color: var(--green); color: #fff; } /* ---------------- Stat tiles (resumen) ---------------- */ .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); } .stat { padding: var(--sp-3) var(--sp-3) var(--sp-4); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-sm); } .stat__num { font-size: var(--fs-28); font-weight: var(--fw-black); line-height: 1; color: var(--ink); } .stat__label { margin-top: 6px; font-size: var(--fs-12); font-weight: var(--fw-bold); color: var(--ink-2); } .stat--green { background: var(--green-soft); border-color: transparent; } .stat--green .stat__num { color: var(--green-dk); } .stat--coral { background: var(--cat-compra-paper); border-color: transparent; } .stat--coral .stat__num { color: var(--cat-compra-accent); } /* ---------------- Contenedor genérico (card) ---------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-sm); padding: var(--sp-4); } .card--flat { box-shadow: none; } .card--sunk { background: var(--surface-2); } /* Bloque destacado "próximo paso" en Inicio */ .next { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: var(--sp-5); background: var(--grad); color: #fff; box-shadow: var(--sh-brand); } .next__label { font-size: var(--fs-12); font-weight: var(--fw-x); letter-spacing: .05em; text-transform: uppercase; opacity: .85; } .next__title { margin-top: 6px; font-size: var(--fs-20); font-weight: var(--fw-x); line-height: 1.2; } .next__meta { margin-top: 8px; font-size: var(--fs-14); opacity: .9; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .next__actions { margin-top: var(--sp-4); display: flex; gap: var(--sp-2); } .next .btn--secondary { background: rgba(255,255,255,.16); color: #fff; } .next .btn--secondary:hover { background: rgba(255,255,255,.26); } .next .btn--light { background: #fff; color: var(--green-dk); } .next__blob { position: absolute; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.08); top: -70px; right: -50px; pointer-events: none; } /* ---------------- Segmented control (orden de la ruta · lista/mapa) ---------- La pastilla blanca es UN elemento que se desliza, no un fondo que se enciende en cada botón. `--n` es la cantidad de opciones y `--i` la activa: el prototipo tiene el 3 clavado porque su Ruta siempre tiene tres, pero acá el mismo control se usa con dos en Trámites. */ .segmented { position: relative; display: flex; padding: 4px; background: var(--track); border-radius: var(--r-pill); margin-bottom: 16px; } .segmented__thumb { position: absolute; top: 4px; bottom: 4px; width: calc((100% - 8px) / var(--n, 3)); left: calc(4px + (100% - 8px) * var(--i, 0) / var(--n, 3)); background: var(--surface); border-radius: var(--r-pill); box-shadow: var(--sh-sm); transition: left var(--dur-base) var(--ease-spring); } .segmented__btn { position: relative; flex: 1; justify-content: center; padding: 10px 4px; font-size: 13.5px; font-weight: var(--fw-x); color: var(--muted); display: inline-flex; align-items: center; gap: 6px; transition: color var(--dur-fast) var(--ease-out); } .segmented__btn svg { width: 16px; height: 16px; } .segmented__btn.is-active { color: var(--ink); } .segmented--block { display: flex; } /* ---------------- Campos de formulario ---------------- */ .field { display: block; } .field__label { display: block; font-size: var(--fs-13); font-weight: var(--fw-x); color: var(--ink-2); margin-bottom: 6px; } .input, .textarea { width: 100%; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; font-size: var(--fs-16); color: var(--ink); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .input::placeholder, .textarea::placeholder { color: var(--ink-3); } .input:focus, .textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green-soft) 70%, transparent); } .field__opt { font-weight: var(--fw-semi); color: var(--ink-3); } .field__hint { display: block; margin-top: 6px; font-size: var(--fs-12); color: var(--muted); line-height: 1.4; } /* ---- Editar perfil ---- */ .is-hidden { display: none !important; } .ed-foto { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 0 4px; } .ed-foto__ring { position: relative; display: grid; place-items: center; width: 104px; height: 104px; border-radius: var(--r-pill); background: var(--green-dk); color: #fff; border: 4px solid var(--surface); box-shadow: var(--sh-md); } .ed-foto__img { width: 100%; height: 100%; border-radius: var(--r-pill); object-fit: cover; } .ed-foto__ini { font-size: 40px; font-weight: var(--fw-black); letter-spacing: -.03em; } .ed-foto__cam { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-pill); background: var(--green); color: #fff; border: 3px solid var(--surface); } .ed-foto__acts { display: flex; align-items: center; gap: 8px; } .ed-form { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; } .ed-guardar { margin-top: 20px; } /* Dónde vivís/trabajás: el input de siempre + la lupa para "buscar en el mapa" en vez de escribirlo a mano. */ .ed-lugar { display: flex; gap: 8px; } .ed-lugar .input { flex: 1; min-width: 0; } .ed-lugar__buscar { flex: none; display: grid; place-items: center; width: 48px; border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-2); } .ed-lugar__buscar:active { background: var(--cream); } /* Panel de búsqueda (Places, sin restricción de radio — buscarLugarPorTexto): una sola instancia compartida entre casa y trabajo, se abre debajo del formulario con la lupa que se tocó. */ .ed-buscador { margin-top: 18px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); } .ed-buscador__tit { font-size: var(--fs-13); font-weight: var(--fw-x); color: var(--ink-2); margin-bottom: 10px; } .ed-buscador__head { display: flex; gap: 8px; } .ed-buscador__head .input { flex: 1; min-width: 0; padding: 12px 14px; font-size: var(--fs-15); } .ed-buscador__res { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .ed-buscador__item { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 10px 12px; text-align: left; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-md); } .ed-buscador__item:active { background: var(--green-soft); } .ed-buscador__nombre { font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--ink); } .ed-buscador__dir { font-size: var(--fs-12-5); color: var(--muted); } .ed-buscador__estado { padding: 8px 2px; font-size: var(--fs-13); color: var(--muted); } .ed-buscador__cerrar { display: block; margin: 10px auto 0; padding: 6px 12px; font-size: var(--fs-12-5); font-weight: var(--fw-bold); color: var(--muted); } /* Fecha/hora: en iOS Safari el input nativo trae SU propio fondo y forma de píldora que pisa el borde y el radio de `.input` — se ve como un elemento pegado, ajeno al resto de la tarjeta (reporte de campo, 3/8: "Recordar" en la Ruta). `appearance: none` deja el picker nativo (la rueda al tocar, que sigue siendo la correcta) pero el CAMPO cerrado usa el mismo fondo, borde y radio que cualquier otro `.input`. */ input[type="date"], input[type="time"], input[type="datetime-local"] { -webkit-appearance: none; appearance: none; color-scheme: light; } .textarea { min-height: 132px; resize: vertical; line-height: 1.5; } /* Selector de categoría (chips seleccionables) */ .choice-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .choice { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--line); background: var(--surface); font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--ink-2); transition: all var(--dur-fast) var(--ease-out); } .choice svg { width: 18px; height: 18px; } .choice[aria-pressed="true"] { border-color: var(--green); background: var(--green-soft); color: var(--green-dk); } /* Grupo RESUELTO: el texto del pendiente ya dijo la respuesta, así que se muestra solo esa y no las cinco. No se esconde el grupo entero — la salida para corregir una lectura equivocada es el botón "Elijo yo", que le saca este atributo y deja todas las opciones a la vista. */ [data-resuelto] .choice:not([aria-pressed="true"]) { display: none; } /* Salida discreta: es una corrección, no la acción de la pantalla. */ .link-suave { display: inline-block; font-size: var(--fs-12); font-weight: var(--fw-bold); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; } .link-suave:active { color: var(--green-dk); } /* ---------------- Grabador de audio (Crear) ---------------- */ .recorder { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-5) 0; } .mic-btn { width: 92px; height: 92px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; box-shadow: var(--sh-brand); transition: transform var(--dur-fast) var(--ease-out); } .mic-btn svg { width: 38px; height: 38px; } .mic-btn:active { transform: scale(.95); } .mic-btn.is-recording { background: var(--coral); animation: pulse 1.4s var(--ease-out) infinite; } @keyframes pulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(233,137,115,.5);} 50%{ box-shadow: 0 0 0 16px rgba(233,137,115,0);} } .rec-time { font-variant-numeric: tabular-nums; font-weight: var(--fw-x); font-size: var(--fs-20); color: var(--ink); } /* ---------------- Instrucciones numeradas (Conectar) ---------------- Distinto de `.step` de Detalle: aquello se tilda y es una tarjeta que responde al toque; esto es una lista de lectura, en orden, dentro de una `.card`. Compartían clase y por eso el rediseño de los pasos se le colaba. */ .instruccion { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-2) 0; } .instruccion__n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--green-soft); color: var(--green-dk); display: grid; place-items: center; font-weight: var(--fw-x); font-size: var(--fs-13); } .instruccion__texto { padding-top: 3px; font-size: var(--fs-15); color: var(--ink); } /* ---------------- Skeletons ---------------- */ .skeleton { position: relative; overflow: hidden; background: var(--surface-sunk); border-radius: var(--r-md); } .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); transform: translateX(-100%); animation: shimmer 1.3s infinite; } @keyframes shimmer { to { transform: translateX(100%); } } .sk-card { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); } .sk-tile { width: 48px; height: 48px; border-radius: var(--r-md); flex: none; } .sk-line { height: 12px; border-radius: 6px; } .sk-line.w-70 { width: 70%; } .sk-line.w-45 { width: 45%; } .sk-line.w-90 { width: 90%; } /* ---------------- Estados vacío / error / offline ---------------- */ .state { text-align: center; padding: var(--sp-10) var(--sp-4); display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); } .state__art { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: var(--green-soft); color: var(--green); } .state__art svg { width: 40px; height: 40px; } .state--error .state__art { background: var(--alerta-bg); color: var(--alerta); } .state--offline .state__art { background: var(--info-bg); color: var(--info); } .state__title { font-size: var(--fs-20); font-weight: var(--fw-x); color: var(--ink); } .state__text { font-size: var(--fs-15); color: var(--ink-2); max-width: 34ch; } /* ---------------- Resolver: campo verde (rediseño ago 2026) ---------------- El paso previo a revisar un pendiente (`resolver.js`, `estadoResolver` + `pintarEstado`): campo verde `#0B3C2F` de ancho completo, con su propio encabezado (la pantalla pide `hideTop` y oculta la `.topbar` compartida), ovillo animado de fondo y un botón que se "monta" sobre la costura con la zona crema de abajo. NO es `.state` (arriba): esa clase la comparten `EmptyState`/`ErrorState` en el resto de la app y no hay que tocarla. */ /* `#app` ya es columna flex (`base.css`) con UN solo `.screen` adentro; acá se lo hace crecer hasta el alto disponible SOLO cuando envuelve el campo verde —`:has()` en vez de acoplarlo a `.sin-top` a secas, porque «Tu día» (`.dia-sheet`) también usa `sin-top` y a propósito NO fuerza 100%: un sheet corto forzado a pantalla completa dejaba una franja vacía abajo (reporte de campo, 3/8). Acá el caso es al revés: el campo verde SIEMPRE va de punta a punta, tenga poco o mucho texto. */ /* ── Alquileres: HERO verde de categoría. Mismo verde profundo que ya domina Resolver/Ruta/Calendario (`--green-dk`, NO un tono nuevo) en el encabezado de las pantallas del vertical (filtros y seguimiento), con el contenido en crema debajo. Scope acotado: `.viv-hero` lo usan SÓLO esas pantallas, no toca el resto de la app. */ .viv-hero { margin: calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) var(--sp-5); padding: calc(var(--safe-t) + var(--sp-5)) var(--sp-5) var(--sp-6); background: var(--green-dk); color: var(--app-bg); border-radius: 0 0 var(--r-xl) var(--r-xl); } .viv-hero__eyebrow { margin: 0 0 var(--sp-2); font-size: 13px; font-weight: var(--fw-x); letter-spacing: .1em; text-transform: uppercase; color: var(--sage); } .viv-hero__title { margin: 0; color: var(--app-bg); font-size: 30px; line-height: 1.12; font-weight: var(--fw-x); letter-spacing: -.01em; } .viv-hero__sub { margin: var(--sp-2) 0 0; color: rgba(247,245,240,.82); font-size: 15px; } .viv-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-4); } .viv-hero__meta .empleo__meta { color: rgba(247,245,240,.86); } .viv-hero__chip { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--r-pill); background: rgba(247,245,240,.16); color: var(--app-bg); font-size: 13px; font-weight: var(--fw-semi); } .screen:has(> .res-hero) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .res-hero { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .res-hero__field { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; position: relative; overflow: hidden; background: var(--green-dk); color: var(--app-bg); border-radius: 0 0 34px 34px; /* `padding-bottom:66px` es del handoff: es el aire entre el párrafo y la costura, sobre el que se monta el botón (que sube -28px). Con menos, el botón queda pegado al párrafo; con este valor, el párrafo respira y el botón se apoya en la curva como en el diseño. El top lo maneja el header (safe-area), por eso acá va 0. */ padding: 0 20px 66px; animation: resHeroFieldIn .7s cubic-bezier(.2,.85,.25,1) both; } /* El ovillo va DETRÁS del texto siempre: decorativo, `aria-hidden`, nunca se colorea más fuerte ni se engrosa (ver "qué no hacer" del handoff). */ .res-hero__ovillo { /* Posición del handoff (opción 2b). No pisa el título porque el contenido va empujado ABAJO del campo (un solo `margin-top:auto` antes del mark), así el ovillo tiene todo el aire de arriba para él solo. */ position: absolute; z-index: 0; right: -74px; top: 40px; /* `max-width:none` anula el reset `svg{max-width:100%}`, que si no capa el ovillo al ancho del campo (~390) y le come el sangrado a la derecha. */ width: 410px; max-width: none; height: auto; opacity: .5; pointer-events: none; } .res-hero__ovillo-madeja { animation: resHeroSpin 90s linear infinite; } .res-hero__head { position: relative; z-index: 1; flex: none; display: flex; align-items: center; gap: 8px; padding-top: calc(var(--safe-t) + 14px); animation: resHeroRise .5s var(--ease-out) .12s both; } .res-hero__icbtn { flex: none; width: 38px; height: 38px; border-radius: var(--r-pill); display: grid; place-items: center; color: var(--app-bg); background: rgba(247,245,240,.14); transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .res-hero__icbtn svg { width: 20px; height: 20px; } .res-hero__icbtn:hover { background: rgba(247,245,240,.24); } .res-hero__icbtn:active { transform: scale(.94); } .res-hero__eyebrow { font-size: 13px; font-weight: var(--fw-x); letter-spacing: .1em; text-transform: uppercase; color: var(--sage); } .res-hero__gap { flex: 1; } /* La vuelta a Nidu reusa `VolverANidu()` —mismo componente e ícono que la topbar clara—; acá solo se retoca para que ande translúcida sobre el verde en vez de blanca sobre superficie. */ .res-hero__head .topbar__canal { width: 38px; height: 38px; background: rgba(247,245,240,.14); color: var(--app-bg); box-shadow: none; } .res-hero__head .topbar__canal:hover { background: rgba(247,245,240,.24); } .res-hero__mark { position: relative; z-index: 1; flex: none; /* EL único "aire flexible" del campo (handoff): este `margin-top:auto` empuja el mark —y todo lo que sigue: título, PRÓXIMO PASO, párrafo— hacia abajo del campo verde, dejando al ovillo todo el aire de arriba. PRÓXIMO PASO ya NO usa auto (usa un padding fijo), así que el bloque de abajo queda compacto, no repartido. */ margin-top: auto; width: 46px; height: 46px; border-radius: var(--r-pill); background: rgba(247,245,240,.12); color: var(--app-bg); animation: resHeroRise .5s var(--ease-out) .5s both; } .res-hero__mark-ic { display: grid; place-items: center; width: 100%; height: 100%; animation: resHeroPulse 3.2s ease-in-out 1s infinite; } .res-hero__mark svg { width: 24px; height: 24px; } /* `display:contents`: el título/kicker/texto pasan a ser hijos DIRECTOS de la columna flex de `.res-hero__field` —así los DOS `margin-top:auto` (el del mark y el del rótulo) reparten el mismo aire disponible en vez de que el segundo herede uno propio ya reducido. `#buscarBox` sigue existiendo como nodo único para que `pintarEstado` lo siga pudiendo reemplazar entero; solo deja de generar caja (por eso `margin`/`z-index` bajan a los hijos). */ .res-hero__body { display: contents; } .res-hero__title { position: relative; z-index: 1; flex: none; display: flex; flex-direction: column; margin-top: 18px; line-height: 1; letter-spacing: -.035em; animation: resHeroRise .6s var(--ease-out) .62s both; } .res-hero__title-lead { font-size: 26px; font-weight: var(--fw-bold); color: var(--sage); } .res-hero__title-strong { margin-top: 14px; margin-left: 30px; font-size: 40px; font-weight: var(--fw-x); color: var(--app-bg); } .res-hero__title-bar { display: block; margin-top: 8px; width: 56px; height: 3px; border-radius: var(--r-pill); background: var(--mint); transform: scaleX(0); transform-origin: left; animation: resHeroBar .5s var(--ease-out) 1.05s forwards; } .res-hero__kicker { position: relative; z-index: 1; /* `padding-top:52px` FIJO (valor del handoff), no `auto`: el único aire flexible del campo es el del mark (arriba). Así el bloque título → PRÓXIMO PASO → párrafo queda compacto y pegado abajo, con la separación exacta del diseño entre el h1 y este rótulo. */ flex: none; padding-top: 52px; font-size: 10.5px; font-weight: var(--fw-x); letter-spacing: .13em; text-transform: uppercase; color: var(--sage); animation: resHeroRise .5s var(--ease-out) .88s both; } .res-hero__text { position: relative; z-index: 1; /* SIN `margin-bottom:auto`: el único aire flexible es el del mark (arriba), así el bloque compacto (mark→título→PRÓXIMO PASO→párrafo) baja hasta el pie del campo verde. El párrafo queda contra la costura y el botón "Empezar" sube a su lado, sin el hueco verde que quedaba en el medio (pedido: "subí el botón empezar"). El ovillo llena el aire de arriba. */ flex: none; margin-top: 8px; font-size: var(--fs-15); line-height: 1.5; color: #E4EDE8; max-width: 34ch; animation: resHeroRise .5s var(--ease-out) .98s both; } /* `pintarEstado` marca el body repintado (`buscar-ahora` que termina en `pedirDocumento`/`pedirAclaracion`/`fallaBusqueda`): la entrada escalonada es del primer vistazo, no de después de una acción que la persona ya esperó — sin esto quedaba casi 1s de verde en blanco tras "Empezar". */ .is-repintado .res-hero__title, .is-repintado .res-hero__kicker, .is-repintado .res-hero__text { animation: resHeroRise .3s var(--ease-out) both; } /* Zona crema debajo del campo verde: acá vive el CTA (montado sobre la costura), la nota de privacidad y el pie de siempre (`pieDeAcciones`). Con `hideTop`, `#app` pierde su padding lateral — este bloque lo repone. */ .res-hero__foot { flex: none; padding: 0 20px calc(var(--safe-b) + 20px); } .res-hero__cta { position: relative; z-index: 2; } .res-hero__cta:not(:empty) { margin-top: -28px; animation: resHeroRise .55s cubic-bezier(.2,.9,.25,1) 1.18s both; } /* Botón "Empezar": 56px de alto y tipografía 15.5/800 (handoff), un punto más grande que el `.btn` general porque es la única decisión de la pantalla. */ .res-hero__cta .btn { min-height: 56px; font-size: 15.5px; font-weight: var(--fw-x); } /* Primario del CTA: crema sobre verde, no verde sobre crema — es el único lugar de la app donde `.btn--primary` se lee así, porque es el único botón que "flota" sobre el campo oscuro en vez de vivir sobre superficie clara. */ .res-hero__cta .btn--primary { background: var(--app-bg); color: var(--green-dk); box-shadow: var(--sh-md); } .res-hero__cta .btn--primary:hover { background: #fff; color: var(--green-hover); } .res-hero__privacy { display: flex; align-items: flex-start; gap: 6px; margin-top: 14px; font-size: 11.5px; line-height: 1.45; color: var(--muted); animation: resHeroRise .5s var(--ease-out) 1.34s both; } .res-hero__privacy svg { flex: none; width: 14px; height: 14px; margin-top: 1px; } /* El pie compartido (`pieDeAcciones`) también lo usa la pantalla YA resuelta (con tarjetas) — la entrada solo corre acá, adentro del campo verde. */ .res-hero__foot .res-acts { animation: resHeroRise .5s var(--ease-out) 1.5s both; } /* "Una sola acción rellena por fila": Recordármelo y Marcar resuelto van lado a lado acá (spec del rediseño) — contorno + ancho por contenido el primero, el resto para el segundo. Sigue apilado en la pantalla YA resuelta (no hay `.res-hero__foot` ahí): esto es puramente visual, no toca `pieDeAcciones`. El selector mira `.btn--secondary` a propósito: cuando el pago sin link sube "Recordármelo" a primario (única acción real, ver `pieDeAcciones`) se queda ancho completo con su hermano — apagarlo ahí lo volvería a hacer secundario visualmente, que es justo lo que esa regla de negocio evita. */ .res-hero__foot .res-acts__row { display: flex; flex-direction: row; gap: 10px; } /* `min-width:0`: sin esto un botón flex no se achica más allá del ancho de su propio contenido (mínimo intrínseco de flexbox) y en un teléfono angosto la fila se sale del viewport en vez de ceder — se vio como scroll horizontal en las pruebas, con "Marcar resuelto" empujado fuera de la pantalla. */ .res-hero__foot .res-acts__row .btn { flex: 1 1 auto; min-width: 0; } .res-hero__foot .res-acts__row .btn--secondary:first-child { /* `width:auto` deshace `.btn--block` (`width:100%`): sin esto, `flex:none` igual pedía el ancho ENTERO de la fila como `flex-basis` (lo resuelve `width` cuando `flex-basis` es `auto`) y dejaba a "Marcar resuelto" sin lugar — el bug del scroll horizontal que se vio en las pruebas. */ flex: none; width: auto; padding: 0 18px; min-height: 52px; background: transparent; color: var(--green-dk); border: 1.5px solid #CFD8D3; } .res-hero__foot .res-acts__row .btn--secondary:first-child:hover { background: var(--green-soft); border-color: #B7CFC3; } @keyframes resHeroFieldIn { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } } @keyframes resHeroRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes resHeroBar { to { transform: scaleX(1); } } @keyframes resHeroSpin { to { transform: rotate(360deg); } } @keyframes resHeroPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } } /* Reducción de movimiento: se apaga TODO —incluido el giro continuo de la madeja—, salvo una excepción obligatoria. Sin ella, los trazos del ovillo (`stroke-dashoffset:100` de arranque) y el check (`scale(0)` de arranque) quedarían clavados en su estado INICIAL invisible: la madeja y la hebra desaparecerían y el check quedaría flotando solo. Se autoriza el estado final, no el inicial. */ @media (prefers-reduced-motion: reduce) { .res-hero, .res-hero * { animation: none !important; } .res-hero__ovillo ellipse, .res-hero__ovillo path { stroke-dashoffset: 0 !important; } .res-hero__ovillo g[style*="scale"] { transform: scale(1) !important; } } /* ---------------- Banner offline ---------------- */ .offline-banner { z-index: var(--z-banner); display: flex; align-items: center; gap: 8px; justify-content: center; /* SIN padding vertical mientras está oculto. Con `max-height:0` + flex el padding igual reservaba 16px de alto en el FLUJO (no en lo visible), y ese hueco empujaba el `#app` hacia abajo dejando asomar el fondo crema del `body` por arriba. En las pantallas crema no se notaba; sobre el campo verde de Resolver se veía como una franja blanca al tope. El padding vertical vuelve recién cuando el banner aparece (`.is-visible`). */ padding: 0 14px; font-size: var(--fs-13); font-weight: var(--fw-bold); background: var(--info-bg); color: var(--info); transform: translateY(-100%); max-height: 0; overflow: hidden; transition: transform var(--dur-base) var(--ease-out), max-height var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out); } .offline-banner svg { width: 16px; height: 16px; } .offline-banner.is-visible { transform: none; max-height: 60px; padding: 8px 14px; } /* ---------------- Bottom nav ---------------- */ /* Barra en píldora flotante (handoff `pwa-barra-inferior/`). Con dos destinos y una acción, ocupar los 390 px del ancho dejaba ~200 px de vacío en el medio y mandaba "Ruta" y "Perfil" a los bordes, justo donde el pulgar no llega. ⚠️ Dos cambios sobre el archivo del handoff: 1. Sus tokens venían con el vocabulario en español (`--texto-3`, `--suave`, `--brand-grad`, `--t-fast`…), que en esta app NO EXISTEN: tokens.css usa los nombres del prototipo y su cabecera pide expresamente no traducirlo. Se tradujeron las REFERENCIAS, no los valores: son los mismos tokens. --texto-3→--ink-3 · --verde-oscuro→--green-dk · --suave→--green-soft --brand-grad→--grad · --sh-3→--sh-lg · --t-fast→--dur-fast · --ease→--ease-out 2. `position: sticky` → `absolute`. Acá el