/* Momsy: cielo suave arriba, paneles blancos, tinta negra y un personaje de color que habla en globos negros. */
:root {
  --cielo: #DCEDFF;
  --marca: #FF3D7F;
  --fondo: #F3F6FA;
  --papel: #FFFFFF;
  --tinta: #000000;
  --gris: #5B6470;
  --linea: #E6EEF6;
  --suave: #EEF3F8;
  --amarillo: #FFE680;
  --naranja: #FF9A6E;
  --rojo: #F2542D;
  --verde: #A5EB7C;
  --display: 'Outfit', 'Manrope', system-ui, sans-serif;
  --texto: 'Manrope', system-ui, -apple-system, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 15px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; text-align: left; }
input, select { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.oscuro :focus-visible { outline-color: #FFFFFF; }
h1, h2, p { margin: 0; }

#app {
  min-height: 100dvh;
  background: linear-gradient(180deg, var(--cielo) 0, var(--fondo) 300px);
}
#vista {
  max-width: 480px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 28px) 20px calc(env(safe-area-inset-bottom, 0px) + 200px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Tipos */
.h1 { font-family: var(--display); font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; text-wrap: balance; }
.h2 { font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin-top: 6px; }
.nota { font-size: 13px; color: var(--gris); }
.fuerte { font-weight: 800; }
.grande { font-family: var(--display); font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

/* Cabecera de Hoy */
.cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.cab-txt { display: flex; flex-direction: column; gap: 4px; padding-bottom: 10px; min-width: 0; }
.hola { font-family: var(--display); font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.clima { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.ico { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Personajes */
.fig { flex: none; display: block; overflow: visible; }
.fig .flota { animation: flotar 3.2s ease-in-out infinite; }
.fig .ojos { transform-box: fill-box; transform-origin: center; animation: parpadeo 4.6s infinite; }
.fig .boca { transform-box: fill-box; transform-origin: center top; }
.hablando .fig.voz .boca { animation: hablar 0.28s ease-in-out infinite; }
.fig .brillo { animation: brillo 3.5s ease-in-out infinite; }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes parpadeo { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.08); } }
@keyframes hablar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.45); } }
@keyframes brillo { 0%, 60%, 100% { transform: translateX(0); opacity: 1; } 75% { transform: translateX(34px); opacity: 0.4; } }

/* Globo */
.globo { position: relative; background: var(--tinta); color: #FFFFFF; border-radius: 28px; padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.globo::before { content: ''; position: absolute; right: 68px; top: -8px; width: 22px; height: 22px; border-radius: 5px; background: var(--tinta); transform: rotate(45deg); }
.globo.lado { border-radius: 22px; padding: 14px 16px; flex: 1 1 auto; min-width: 0; }
.globo.lado::before { right: auto; left: -6px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 4px; }
.globo > * { position: relative; }
.quien { font-size: 13px; font-weight: 800; }
.frase { font-family: var(--display); font-size: 24px; font-weight: 600; line-height: 1.18; letter-spacing: -0.01em; }
.globo.lado .frase { font-size: 19px; line-height: 1.2; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.con-fig { display: flex; align-items: center; gap: 14px; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 999px; font-weight: 800; font-size: 15px; text-decoration: none; text-align: center; }
.btn-negro { background: var(--tinta); color: #FFFFFF; }
.btn-linea { border: 2px solid var(--tinta); }
.btn-claro { border: 2px solid #FFFFFF; color: #FFFFFF; }
.btn-color { color: #000000; }
.btn-ancho { width: 100%; min-height: 54px; font-size: 16px; }
.btn-chico { min-height: 44px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
.dos .btn-chico { padding: 0 8px; font-size: 13.5px; }
.btn-texto { min-height: 44px; font-size: 13px; font-weight: 800; text-decoration: underline; }
.btn-suave { background: var(--suave); }
.btn[disabled] { opacity: 0.45; cursor: default; }

/* Paneles y filas */
.panel { background: var(--papel); border-radius: 28px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.lista { background: var(--papel); border-radius: 28px; padding: 4px 18px; }
.fila { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.lista > :last-child, .lista > :last-child > .fila { border-bottom: 0; }
.fila-hora { flex: none; width: 66px; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fila-cuerpo { flex: 1 1 auto; min-width: 0; }
.fila-t { display: block; font-size: 16px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.fila-n { display: block; font-size: 13px; color: var(--gris); overflow-wrap: anywhere; }
.pasado .fila-hora, .pasado .fila-t { color: var(--gris); }
.tachado .fila-t { text-decoration: line-through; }
.bloque { padding: 14px 0; border-bottom: 1px solid var(--linea); display: flex; flex-direction: column; gap: 10px; }
.bloque .fila { min-height: 0; padding: 0; border: 0; align-items: flex-start; }
.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.paso { padding: 9px 10px; border-radius: 14px; background: var(--suave); }
.paso b { display: block; font-size: 13px; font-weight: 800; line-height: 1.2; }
.paso span { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.paso.hecho { background: var(--tinta); color: #FFFFFF; }
.paso.ahora { background: var(--amarillo); }
.paso.tarde { background: var(--naranja); }
.caja { flex: none; width: 26px; height: 26px; border: 2.5px solid var(--tinta); border-radius: 9px; background: #FFFFFF; color: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.caja.si { background: var(--tinta); }
.caja svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.pill { flex: none; padding: 7px 14px; border-radius: 999px; background: var(--suave); font-size: 13px; font-weight: 800; }
.pill.amarillo { background: var(--amarillo); }
.pill.naranja { background: var(--naranja); }
.pill.verde { background: var(--verde); }
.mini { padding: 4px 10px; font-size: 12px; }
.entre { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.base { align-items: baseline; }
.vacio { background: var(--papel); border-radius: 28px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.ejemplo { min-height: 48px; padding: 10px 18px; border-radius: 18px; background: var(--suave); font-size: 15px; font-weight: 700; line-height: 1.25; width: 100%; }
.pregunta { background: var(--amarillo); border-radius: 28px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.pregunta .frase { font-weight: 700; font-size: 22px; }

/* Salida */
.salida-hora { display: flex; align-items: baseline; gap: 6px; }
.salida-hora .grande { font-size: 60px; }
.salida-hora small { font-family: var(--display); font-size: 20px; font-weight: 700; }
.trafico { display: flex; gap: 3px; height: 10px; }
.trafico i { display: block; border-radius: 999px; background: var(--tinta); min-width: 6px; }
.trafico i + i { background: var(--rojo); }
.mapa { height: 190px; border-radius: 20px; overflow: hidden; background: var(--suave); position: relative; z-index: 0; }
.mapa .leaflet-container { height: 100%; width: 100%; font-family: var(--texto); }
.sep { padding-top: 12px; border-top: 1px solid var(--linea); display: flex; gap: 10px; align-items: flex-start; }
.dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* Metas y plata */
.puntos { display: flex; flex-wrap: wrap; gap: 4px; }
.punto { width: 23px; height: 23px; border-radius: 999px; border: 2px solid var(--linea); background: #FFFFFF; color: var(--gris); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.punto.si { background: var(--tinta); border-color: var(--tinta); color: #FFFFFF; }
.punto.hoy { border-color: var(--rojo); color: var(--tinta); }
.medidor { height: 12px; border-radius: 999px; background: var(--suave); overflow: hidden; }
.medidor i { display: block; height: 100%; border-radius: 999px; background: var(--tinta); }
.medidor.riesgo i { background: var(--rojo); }
.dato { padding: 10px 12px; border-radius: 14px; background: var(--suave); }
.dato b { display: block; font-size: 15px; font-weight: 800; }
.dato span { font-size: 13px; }
.alerta { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; }
.alerta .ico { width: 16px; height: 16px; stroke-width: 2.4; }

/* Personajes para elegir */
.persona { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 26px; background: var(--papel); border: 2.5px solid var(--papel); }
.persona[data-on="true"] { border-color: var(--tinta); }
.persona-n { font-family: var(--display); font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.voces { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.vozbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 76px; padding: 6px 2px; border-radius: 18px; background: var(--suave); border: 2.5px solid var(--suave); font-size: 11.5px; font-weight: 800; text-align: center; line-height: 1.1; }
.vozbtn[aria-pressed="true"] { border-color: var(--tinta); background: #FFFFFF; }
.interruptor { flex: none; width: 50px; height: 30px; padding: 0 3px; border-radius: 999px; border: 2.5px solid var(--tinta); background: #FFFFFF; display: flex; align-items: center; }
.interruptor i { width: 18px; height: 18px; border-radius: 999px; background: var(--tinta); }
[aria-pressed="true"] > .interruptor { background: var(--tinta); justify-content: flex-end; }
[aria-pressed="true"] > .interruptor i { background: #FFFFFF; }
.paso-num { display: flex; align-items: center; gap: 8px; flex: none; }
.paso-num button { width: 44px; height: 44px; border-radius: 999px; background: var(--suave); font-size: 20px; font-weight: 800; text-align: center; }
.paso-num b { min-width: 58px; text-align: center; font-variant-numeric: tabular-nums; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 13px; font-weight: 800; }
.entrada { width: 100%; min-width: 0; height: 52px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--tinta); background: #FFFFFF; font-size: 16px; font-weight: 600; }
.linea-entrada { display: flex; gap: 8px; }
.linea-entrada .entrada { flex: 1 1 auto; }

/* Barra de abajo */
#nav {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 20;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  width: min(452px, calc(100% - 28px));
  padding: 8px; border-radius: 999px; background: var(--papel);
  box-shadow: 0 10px 30px rgba(31, 78, 128, 0.18);
  display: flex; align-items: center; gap: 2px;
}
.tab { flex: 1 1 0; min-width: 0; min-height: 52px; border-radius: 999px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--gris); font-size: 11px; font-weight: 800; }
.tab[aria-pressed="true"] { background: var(--tinta); color: #FFFFFF; }
.tab .ico { width: 21px; height: 21px; }
.mic { position: absolute; right: 2px; bottom: calc(100% + 14px); width: 68px; height: 68px; border-radius: 999px; border: 4px solid #FFFFFF; box-shadow: 0 10px 26px rgba(31, 78, 128, 0.28); display: flex; align-items: center; justify-content: center; }
.mic svg { width: 28px; height: 28px; fill: none; stroke: #000000; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Hoja */
#hoja { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: flex-end; background: rgba(0, 0, 0, 0.55); }
.hoja-in { width: 100%; max-width: 480px; margin: 0 auto; max-height: 92dvh; overflow-y: auto; background: var(--papel); border-radius: 32px 32px 0 0; padding: 16px 20px calc(env(safe-area-inset-bottom, 0px) + 26px); display: flex; flex-direction: column; gap: 16px; }
.hoja-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hoja-t { font-family: var(--display); font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.cerrar { flex: none; width: 44px; height: 44px; border-radius: 999px; background: var(--suave); display: flex; align-items: center; justify-content: center; }
.onda { display: flex; align-items: center; justify-content: center; gap: 6px; height: 48px; }
.onda i { width: 8px; border-radius: 999px; background: var(--tinta); transform: scaleY(0.25); }
.onda i { transition: transform 0.08s linear; }
.onda.voz i { animation: onda 0.9s ease-in-out infinite; }
.onda.voz i:nth-child(2n) { animation-delay: -0.3s; }
.onda.voz i:nth-child(3n) { animation-delay: -0.6s; }
@keyframes onda { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
.dicho { min-height: 28px; text-align: center; font-family: var(--display); font-size: 20px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.entendi { background: var(--suave); border-radius: 24px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.entendi .grande { font-size: 26px; line-height: 1.1; overflow-wrap: anywhere; }
.opcion { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 14px; border-radius: 16px; background: var(--suave); border: 2.5px solid var(--suave); }
.opcion[aria-pressed="true"] { background: #FFFFFF; border-color: var(--tinta); }
.col { display: flex; flex-direction: column; gap: 8px; }

#toast { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 180px); width: max-content; max-width: min(440px, calc(100% - 32px)); padding: 12px 18px; border-radius: 20px; background: var(--tinta); color: #FFFFFF; font-weight: 700; font-size: 14px; line-height: 1.3; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }

/* Bienvenida */
.bien-arte { position: relative; height: 300px; margin: 0 -20px; overflow: hidden; }
.bien-arte > div { position: absolute; }
.marca { font-family: var(--display); font-size: clamp(72px, 26vw, 104px); font-weight: 800; line-height: 1; letter-spacing: -0.05em; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .fig .flota, .fig .ojos, .fig .brillo, .hablando .fig.voz .boca, .onda.voz i { animation: none; }
  .onda.voz i { transform: scaleY(0.7); }
}

/* v1.1 */
.vozbtn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn .ico { width: 18px; height: 18px; }
.opcs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.opc2 { min-height: 46px; border-radius: 14px; background: var(--suave); border: 2.5px solid var(--suave); font-weight: 800; font-size: 14px; text-align: center; }
.opc2[aria-pressed="true"] { background: #FFFFFF; border-color: var(--tinta); }
.vrow { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 8px; }
.entrada.cuad { border-radius: 16px; padding: 0 14px; }
.diag { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--linea); font-size: 14px; }
.diag b { text-align: right; }
.paso-num b { min-width: 66px; font-size: 14px; }
.pasos-lista { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.mapa .leaflet-control-attribution { font-size: 10px; background: rgba(255, 255, 255, 0.7); }

/* v1.5: registro por pasos, días de la semana */
.progreso { display: flex; gap: 6px; }
.progreso i { width: 28px; height: 6px; border-radius: 999px; background: #FFFFFF; }
.progreso i.si { background: var(--tinta); }
.perf-pie { display: flex; gap: 10px; margin-top: 6px; }
.perf-pie .btn { min-height: 54px; font-size: 16px; }
.perf-pie .btn-negro { flex: 1 1 auto; }
.dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.dia { min-height: 44px; border-radius: 14px; background: var(--suave); border: 2.5px solid var(--suave); font-weight: 800; font-size: 14px; text-align: center; }
.dia[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #FFFFFF; }
.hab-cab { width: 100%; align-items: center; min-height: 44px; }
.punto.libre { border-style: dashed; opacity: 0.55; }
.panel > .fila { border-bottom: 0; padding: 0; min-height: 0; }

/* v1.6: fondo según el clima, ánimo de los personajes */
#app { background: linear-gradient(180deg, var(--cielo) 0, var(--fondo) 480px); }
.pill-btn { align-self: flex-start; min-height: 40px; display: inline-flex; align-items: center; margin-top: 6px; }
.fig.tenue .flota { opacity: 0.7; filter: saturate(0.55); }
.fig.muytenue .flota { opacity: 0.42; filter: saturate(0.2); }
.fig .lagrima { transform-box: fill-box; animation: gota 2.4s ease-in infinite; }
.fig .humo { animation: humo 1.2s ease-in-out infinite; }
@keyframes gota { 0%, 55% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(9px); opacity: 0; } }
@keyframes humo { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-3px); opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .fig .lagrima, .fig .humo { animation: none; } }
.mapa { height: 210px; }
.mapa.chica { height: 150px; }
.mapa { flex: none; }

/* 1.8: agendar conversando, categorías, perfil */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--tinta); background: #FFFFFF; font-weight: 800; font-size: 13.5px; white-space: nowrap; }
.chip[aria-pressed="true"] { background: var(--tinta); color: #FFFFFF; }
.ficha { border: 2px solid var(--linea); border-radius: 24px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.linea-entrada .btn { flex: none; }
.micbtn { width: 52px; min-height: 52px; padding: 0; }
.micbtn svg { width: 22px; height: 22px; fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#f-resp .btn-linea { padding: 0 14px; }
.cdot { display: inline-block; width: 9px; height: 9px; border-radius: 999px; margin-right: 5px; border: 1.5px solid #000000; }
.avatar { flex: none; border-radius: 999px; background: var(--tinta); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; object-fit: cover; }
.tramo { display: flex; gap: 10px; align-items: center; }
.tramo i { flex: none; width: 16px; height: 16px; border-radius: 999px; border: 3px solid #000000; }
.lapiz { flex: none; color: var(--gris); }
.lapiz .ico { width: 18px; height: 18px; }
.leaflet-tooltip.rotulo { font: 800 11px/1.2 var(--texto); padding: 2px 7px; border: 0; border-radius: 999px; color: #000000; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); }
.leaflet-tooltip.rotulo::before { display: none; }

/* 2.0: el rosado de la marca manda en botones, pestañas y selecciones. Los globos de los personajes siguen negros. */
.btn-negro { background: var(--marca); }
.tab[aria-pressed="true"] { background: var(--marca); }
.chip[aria-pressed="true"], .dia[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); }
.caja.si { background: var(--marca); border-color: var(--marca); }
[aria-pressed="true"] > .interruptor { background: var(--marca); border-color: var(--marca); }
[aria-pressed="true"] > .interruptor i { background: #FFFFFF; }
.progreso i.si { background: var(--marca); }
.avatar { background: var(--marca); }
.mic { background: var(--marca); box-shadow: 0 10px 26px rgba(20, 30, 50, 0.28); }
.mic svg { stroke: #FFFFFF; }
.marca { white-space: nowrap; font-size: clamp(64px, 23vw, 100px); }
.tu-dijo { align-self: flex-end; max-width: 85%; background: var(--suave); border-radius: 18px 18px 4px 18px; padding: 10px 14px; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.tu-dijo:empty { display: none; }
.chatbar { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 18px; border-radius: 999px; background: #FFFFFF; border: 2px solid var(--tinta); font-size: 15px; font-weight: 700; color: var(--gris); text-align: left; }
.chatbar svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--marca); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chatbar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ella-dijo { align-self: flex-start; max-width: 88%; background: var(--tinta); color: #FFFFFF; border-radius: 18px 18px 18px 4px; padding: 10px 14px; font-size: 14px; font-weight: 600; opacity: 0.82; overflow-wrap: anywhere; }
.sug { gap: 10px; border-left: 6px solid var(--marca); }