:root{
  /* paleta oficial de la marca (manual de Caro, agosto 2026) */
  --tinta:#10453D;        /* verde tinta -- texto principal */
  --verde:#51AA72;        /* verde medio -- SOLO bloque/icono, nunca texto (contraste 3.78) */
  --celeste:#A8D4ED;      /* fondo con texto tinta (contraste 6.86) */
  --azul:#217DCA;         /* acento */
  --rosa:#FDA5BE;         /* fondo con texto tinta (contraste 5.82) */
  --rosa-suave:#F7D8E7;   /* rosa claro -- fondo de tarjeta (contraste 8.21) */
  --coral:#FF6D3C;        /* naranja oficial -- SOLO bloque/icono, nunca texto (contraste 3.87) */
  /* el rosa fuerte de la marca. los bloques grandes lo necesitan porque el rosa
     suave contra el papel da poco contraste y se pierde. no es un color oficial
     del manual, se mantiene igual que antes -- ver nota aparte */
  --crema:#F3F0EF; --crema2:#E9E4E1;
  /* el secundario NO es gris: es un tinte del verde tinta oficial. Nada de la
     app se dibuja en gris neutro (pedido de Flo, 29/8), y va como rgba del color
     de la marca y no como un hex nuevo, que es la regla de §6 del CLAUDE.
     .75 y no menos: por debajo no llega a 4.5 sobre el papel (acá da 4.85) */
  --gris:rgba(16,69,61,.75); --lila:#B49AD8; --verde-tinta:#10453D;
  /* versiones oscuras derivadas de los colores oficiales, para texto chico sobre
     el papel: verde-medio y naranja NO se pueden usar como texto (ver arriba),
     asi que estas variantes mas oscuras cumplen contraste AA (>=4.5) */
  --verde-txt:#1F6E48; --coral-txt:#B8451F;
  /* tipografia (criterio del 29/8, sacado del workbook del retiro 2025):
     los titulos van en una serif display pesada -- Gloock, que es lo mas
     parecido en Google Fonts a la de sus piezas de Canva -- y el cuerpo en una
     sans neutra, que es lo que ella usa. Lekton (mono) no era de la marca.
     --serif queda como alias de --display: todo lo que ya pedia serif era un
     titulo o un numero grande, y es justo lo que va en display */
  --display:"Gloock","Playfair Display",Georgia,serif;
  --serif:var(--display);
  --sans:"Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* la letra a mano queda para lo que se escribe a mano: la frase de Caro
     firmada y lo que ella misma escribe (la frase ancla). Nunca un titulo */
  --mano:"Mansalva","Segoe Script",cursive;
  /* el halo: el borde claro alrededor de la letra del titulo, que es LA marca
     del workbook. Se pinta con text-shadow en ocho direcciones y no con
     text-stroke, que sin paint-order se come la letra en los celulares viejos.
     Sobre el papel va en rosa suave; sobre un bloque rosa se cambia a blanco */
  --halo-c:var(--rosa-suave);
  --nav:80px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;overscroll-behavior-y:contain}
body{background:#DED8D4;color:var(--tinta);font-family:var(--sans);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;font-synthesis:none}
/* el halo de los titulos (ver --halo-c en :root). Uno por pantalla: es el
   titulo de la pantalla, no cualquier subtitulo. En em para que escale con el
   cuerpo de la letra: a 30px son 2px de borde, a 46px son 3.5 */
.halo{
  text-shadow:
    .075em 0 0 var(--halo-c),-.075em 0 0 var(--halo-c),0 .075em 0 var(--halo-c),0 -.075em 0 var(--halo-c),
    .053em .053em 0 var(--halo-c),-.053em .053em 0 var(--halo-c),.053em -.053em 0 var(--halo-c),-.053em -.053em 0 var(--halo-c);
}
/* la textura sale de sus propios posts: recorte de una zona limpia de papel,
   filtrado para quedarse solo con el relieve y espejado para repetir sin costura.
   va en overlay porque el gris medio del tile es neutro: solo agrega relieve,
   no cambia el color de fondo */
.papel{ background-color:var(--crema); position:relative; isolation:isolate }
.papel::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/png;base64,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");
  background-size:128px 128px;background-repeat:repeat;
  mix-blend-mode:overlay;opacity:.85;
}
.papel > *{position:relative;z-index:1}

button{font-family:inherit;font-size:inherit;color:inherit;border:none;background:none;cursor:pointer;text-align:left}
input{font-family:inherit;font-size:17px}
*:focus-visible{outline:3px solid var(--rosa);outline-offset:2px}

/* ============ estructura ============ */
/* 100dvh y no 100vh, con el vh de fallback para lo viejo: en Safari de iOS
   `100vh` es la ventana CON las barras del navegador plegadas, asi que la
   pagina siempre mide un poco mas que lo que se ve. Esa diferencia es la que
   hacia que la barra de abajo, al scrollear, se despegara y quedara flotando
   en el medio hasta que el dedo soltaba (Ro, 30/8). `dvh` mide lo que se ve
   de verdad, y se ajusta solo cuando la barra de Safari se achica. */
#app{max-width:460px;margin:0 auto;min-height:100vh;min-height:100dvh;position:relative;box-shadow:0 0 0 1px rgba(16,69,61,.1)}
#vista{padding-bottom:calc(var(--nav) + env(safe-area-inset-bottom))}
#app.limpio #vista{padding-bottom:0}
/* ⚠️ Con el marco del recurso a la vista, el lugar que se le deja a la barra de
   abajo lo lleva EL MARCO y no #vista: el marco es hermano de #vista y va
   después (ver index.html), así que ese padding quedaba metido entre los chips
   y la herramienta -- ochenta píxeles de hueco en el medio de la pantalla
   (Ro, 1/9). */
#app.con-marco #vista{padding-bottom:0}
#app.con-marco:not(.limpio) #rec-marco{padding-bottom:calc(var(--nav) + env(safe-area-inset-bottom))}
.wrap{padding:22px 20px 34px}

.bar{position:sticky;top:0;z-index:20;background:var(--crema);padding:15px 20px 12px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(16,69,61,.13)}
.bar h1{font-family:var(--serif);font-size:21px;margin:0;font-weight:400;flex:1;line-height:1.2}
.atras{width:46px;height:46px;margin:-8px 0 -8px -12px;border-radius:50%;display:grid;place-items:center;font-size:25px}
.atras:active{background:var(--crema2)}
/* el "Activar edición" de Moodle. Va en la barra de arriba, a la derecha del
   título: editar donde estás, sin bajar al menú a prender un modo. Apagado es
   un lápiz solo; prendido se pone coral -- el color de "ahora" (§6ter) -- y
   dice la palabra, porque un modo que no se ve encima es un modo que sorprende */
/* ⚠️ Ya no flota: va arriba de todo y en el flujo (Flo, 1/9). Fijo abajo a la
   izquierda tapaba el contenido -- la primera fila del recorrido, la lista de
   gastos -- todo el tiempo, para un control que se usa un rato. Acá empuja en
   vez de tapar, y encima queda arriba del banner, que es lo primero que se ve.
   Se fue con él el cálculo de `--nav` + `env(safe-area-inset-bottom)`, que
   estaba para que la barra de abajo no se lo comiera. */
/* ⚠️ Y va SIEMPRE anidado en `.editar-fila`: `.editar` es también el lápiz de
   cada fila del control de gastos (grepear antes de nombrar, §6). Suelta, esta
   regla se le colaba ahí -- le llegaban el borde redondo, la sombra y hasta el
   `position:fixed` de cuando flotaba. */
.editar-fila{display:flex;justify-content:flex-end;align-items:center;gap:6px;padding:12px 20px 0}
/* deshacer y rehacer. Van pegadas al interruptor y solo con el modo prendido:
   son las dos flechas de siempre, sin recuadro, como los controles de una fila.
   Apagadas cuando no hay nada que deshacer -- una flecha que no hace nada es
   peor que ninguna, porque hace dudar de si el cambio se guardó */
.editar-fila .hist{
  width:44px;height:44px;flex:none;border:none;background:transparent;border-radius:50%;
  display:grid;place-items:center;font-size:21px;color:var(--tinta);
}
.editar-fila .hist:active{background:rgba(16,69,61,.08)}
.editar-fila .hist[disabled]{opacity:.28}
.editar-fila .editar{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 15px;
        border-radius:99px;border:2px solid var(--tinta);background:var(--crema);
        font-size:14px;font-weight:700;color:var(--tinta);
        box-shadow:0 2px 10px rgba(16,69,61,.16)}
.editar-fila .editar i{font-style:normal;font-size:13px}
.editar-fila .editar.on{background:var(--coral);border-color:var(--tinta)}
.editar-fila .editar:active{transform:scale(.96)}
/* mientras se edita, la app entera avisa que está en ese modo con un borde:
   sin esto, una pantalla con lápices se confunde con la de siempre */
body:has(.editar-fila .editar.on) .bar{box-shadow:inset 0 3px 0 var(--coral)}

/* ---- los controles de un paso, en edición ----
   ⚠️ Iban `position:absolute` arriba a la derecha, ENCIMA del texto: en un
   celular quedaban pegados al borde y tapados por el título, y Ro los reportó
   como "no están" (1/9). Ahora ocupan su lugar en la fila y el texto se corre
   solo, así que no hay forma de que queden abajo de nada.
   ⚠️ Y no van juntos (Flo, 1/9, con una captura de Moodle de referencia): el
   manijo abre la fila y el menú la cierra. Los dos son glifos pelados, sin
   recuadro ni color, como en la referencia y como los controles de una fila de
   gastos (§4bis): al lado del título de la fila, dos círculos con borde grueso
   gritaban más que el dato. El área tocable sigue siendo de 44px. */
.arrastre,.menu-fila{
  width:44px;height:44px;flex:none;border:none;background:transparent;border-radius:50%;
  display:grid;place-items:center;color:var(--tinta);opacity:.55;line-height:1;
}
.arrastre:active,.menu-fila:active{opacity:1;background:rgba(16,69,61,.08)}
/* en el Camino la fila es más chica y el manijo se alinea con la bolita */
.paso > .arrastre,.paso > .menu-fila{width:40px;height:40px;align-self:flex-start}
.menu-fila{font-size:24px}
/* el manijo de arrastrar. `touch-action:none` es lo que hace que el dedo
   arrastre la fila en vez de scrollear la página: sin eso el paso no se mueve */
.arrastre{font-size:19px;touch-action:none;cursor:grab;letter-spacing:-1px}
.arrastre:active{cursor:grabbing;background:var(--celeste);opacity:1}

/* La mitad tocable de una fila que además tiene controles. Un <button> adentro
   de otro <button> no es html válido, así que editando la fila deja de ser un
   botón y pasa a ser un div con esto adentro. */
.cuerpo-fila{flex:1;min-width:0;display:flex;align-items:center;gap:14px;
  text-align:left;background:transparent;border:none;padding:0;font:inherit;color:inherit}

/* ⚠️ Con el manijo adelante, la línea del recorrido tiene que correrse con la
   bolita o queda dibujada sobre el manijo: 40px de manijo + 15px de gap = 55,
   más los 19 de siempre (el centro de la bolita menos media línea) = 74. */
.paso.con-manijo .linea{left:74px}
/* ---- la fila agarrada ----
   ⚠️ Vale para las DOS formas de fila (Flo, 1/9): esto era solo `.paso`, así que
   en el archivo --donde las filas son `.fila`-- no pasaba nada visible ni
   cuando el arrastre empezó a funcionar. Se despega del papel: sombra larga,
   un pelo más grande y sin transición, que la posición la maneja el dedo. */
.paso.moviendo,.fila.moviendo{
  position:relative;z-index:30;background:#fff;border-radius:16px;
  box-shadow:0 10px 26px rgba(16,69,61,.26);transform-origin:center;
  cursor:grabbing;transition:none;
}
.paso.moviendo{background:var(--crema2);opacity:.97}
.fila.moviendo{border-color:var(--tinta);border-width:2px}
.paso.moviendo .linea{display:none}
/* la de al lado se corre con animación: es lo que dice dónde va a caer */
.pasos-fase .paso,.pasos-fase .fila{transition:transform .16s ease-out}
.pasos-fase .paso.moviendo,.pasos-fase .fila.moviendo{transition:none}
@media (prefers-reduced-motion:reduce){
  .pasos-fase .paso,.pasos-fase .fila{transition:none}
}

/* ---- el "+" entre paso y paso ----
   Una línea punteada de lado a lado con el signo en el medio, como el "Añadir
   una actividad" de Moodle (la referencia que pasó Ro): así se lee como un
   lugar donde meter algo y no como un botón suelto. Antes era una rayita que
   arrancaba a 44px y se perdía contra el fondo. */
.mas-aqui{display:flex;align-items:center;justify-content:center;width:100%;
  height:46px;margin:0;background:transparent;border:none;position:relative;
  z-index:3;touch-action:manipulation}
.mas-aqui::before{content:"";position:absolute;left:0;right:0;top:50%;
  border-top:2px dashed rgba(16,69,61,.30)}
.mas-aqui i{position:relative;font-style:normal;font-weight:700;font-size:20px;
  line-height:1;width:34px;height:34px;border-radius:50%;display:grid;
  place-items:center;background:var(--verde);border:2px solid var(--tinta);
  color:var(--tinta);box-shadow:0 1px 4px rgba(16,69,61,.18)}
.mas-aqui:active i{background:var(--coral);transform:scale(.94)}

/* las fotos que sube el equipo adentro de un encuentro */
.fotos-enc{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 12px}
.fotos-enc figure{position:relative;margin:0;width:88px;height:88px}
.fotos-enc img{width:100%;height:100%;object-fit:cover;border-radius:12px;
  border:1.5px solid var(--linea)}
.fotos-enc button{position:absolute;top:-7px;right:-7px;width:26px;height:26px;
  border-radius:50%;border:2px solid var(--tinta);background:var(--crema);
  font-size:15px;line-height:1;color:var(--tinta)}

/* ============ tipografia ============ */
.rotulo{font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--verde-txt);margin:0}
.rotulo.coral{color:var(--coral-txt)}
.saludo{font-family:var(--serif);font-size:30px;font-weight:400;line-height:1.08;margin:2px 0 6px}
.saludo em,.plano .titulo em,.pregunta em{font-style:normal;color:var(--azul)}
.sub{color:rgba(16,69,61,.66);font-size:15px;margin:0}
.mano{font-family:var(--mano);font-size:23px;line-height:1.3}
.mano.rosa{color:var(--tinta);font-weight:700}

/* miniatura tipo hoja de calendario, reemplaza el icono generico */
.cal-ico{
  width:44px;height:44px;flex:none;border-radius:11px;overflow:hidden;
  border:2px solid var(--tinta);background:#fff;display:flex;flex-direction:column;
  line-height:1;text-align:center;
}
.cal-ico i{
  font-style:normal;display:block;background:var(--c,var(--verde));color:var(--tinta);
  font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:3px 0 2.5px;
}
.cal-ico b{
  flex:1;display:grid;place-items:center;font-family:var(--serif);font-weight:400;
  font-size:19px;color:var(--tinta);
}
.cal-ico.pasado{opacity:.5}

/* estas mirando la app con los ojos de otra */
.impersonando{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:11px;
  background:var(--tinta);color:var(--crema);padding:11px 16px;
}
.impersonando .av{
  width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--serif);font-weight:400;font-size:15px;color:var(--tinta);
}
.impersonando .txt{flex:1;min-width:0;line-height:1.2}
.impersonando .txt b{display:block;font-size:14.5px;font-weight:600}
.impersonando .txt small{display:block;font-size:12px;opacity:.72;margin-top:1px}
.impersonando button{
  flex:none;background:var(--rosa);color:var(--tinta);border-radius:99px;
  padding:9px 15px;font-size:13px;font-weight:600;min-height:40px;
}

/* ============ portada ============ */
/* mismo formato que el bloque destino: misma caja, mismo redondeo, mismo aire */
/* height:auto anula el atributo height del <img>: sin eso la altura queda fija
   en 450px, el ancho se achica con la ventana y cover recorta los costados */
.portada{
  display:block;width:100%;height:auto;
  border-radius:22px;margin:0 0 20px;
}

/* ============ carrusel de fotos ============ */
/* El album de la generacion que ya termino, arriba del archivo. Se pasa
   arrastrando: el scroll-snap lo hace el navegador solo, sin biblioteca y sin
   un timer que mueva las fotos sin que ella toque nada.
   Misma caja que .portada -- mismo ancho, mismo redondeo, mismo aire abajo. */
.carrusel{margin:0 0 20px}
.carrusel-tira{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  border-radius:22px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  /* llegada al final de la tira: el gesto muere aca y no se lo lleva la pagina
     (ni el gesto de volver del navegador, que en Chrome cuelga del overscroll) */
  overscroll-behavior-x:contain;
}
/* la barra de scroll no va: el carrusel se pasa con el dedo y los puntitos ya
   dicen en cual esta */
.carrusel-tira::-webkit-scrollbar{display:none}
.carrusel-foto{
  position:relative;flex:0 0 100%;margin:0;scroll-snap-align:center;
  aspect-ratio:16/9;background:var(--crema2);overflow:hidden;
}
.carrusel-foto img{display:block;width:100%;height:100%;object-fit:cover}
/* la portada no es una foto: es un grafico con letras, y recortarlo se come el
   titulo. Va entera, con el papel a los costados */
.carrusel-foto img.grafica{object-fit:contain;background:var(--crema)}
/* El pie va ENCIMA de la foto. Debajo, cada slide mediria distinto segun lo
   largo del titulo y la tira saltaria de alto al pasar de una a otra.
   El degrade es del verde tinta oficial y no un negro nuevo (regla de §6), y
   abajo llega a .88: sobre una foto no hay contraste que se pueda calcular de
   antemano, asi que el fondo del renglon tiene que ser oscuro de verdad. */
.carrusel-foto figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:28px 15px 12px;
  background:linear-gradient(rgba(16,69,61,0), rgba(16,69,61,.88));
  color:#fff;font-size:13.5px;font-weight:600;line-height:1.3;
}
/* los puntitos: el dibujo es chico pero el area tocable es de 44px, igual que
   el lapiz de la lista de gastos */
.carrusel-guia{display:flex;justify-content:center;gap:2px;margin-top:2px}
.carrusel-guia button{width:30px;height:44px;display:grid;place-items:center}
.carrusel-guia i{
  display:block;width:8px;height:8px;border-radius:50%;
  background:rgba(16,69,61,.3);transition:background .2s,transform .2s;
}
.carrusel-guia .on i{background:var(--tinta);transform:scale(1.4)}

/* ============ la voz de Caro ============ */
/* manuscrita con subrayado a mano. nunca mas de uno por pantalla */
.cita{
  font-family:var(--mano);font-size:27px;font-weight:700;line-height:1.2;color:var(--tinta);
  margin:0;display:inline-block;transform:rotate(-1.5deg);
}
.cita.clara{color:var(--crema)}
.cita.blanca{color:#fff}
.cita.verde{color:var(--verde-txt)}
.firma-caro{display:block;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--gris);margin-top:12px}
/* lo que Caro te contesta despues de ponerte una etiqueta */
.firma-perfil{text-align:center;padding:26px 18px 4px}
.firma-perfil .flor{display:block;margin:0 auto 16px}
.firma-perfil .cita-larga{max-width:20ch;margin:0 auto}
.firma-perfil .firma-caro{margin-top:14px}

/* la frase larga: registro editorial, serif con contraste */
.cita-larga{
  font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.22;
  color:var(--tinta);margin:0;text-wrap:balance;
}
.cita-larga.rosa{color:var(--tinta)}
.cita-larga.clara{color:var(--crema)}

/* ============ botones ============ */
.btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:58px;padding:16px 20px;border-radius:16px;font-size:16px;font-weight:700;border:2px solid var(--tinta);transition:transform .1s;text-align:center}
/* mientras el pedido esta en vuelo. Misma opacidad que las flechas apagadas
   del calendario y del selector de mes: apagado en esta app es opacidad, no un
   gris nuevo (§6, nada se dibuja en gris neutro) */
.btn[disabled]{opacity:.45}
.btn:active{transform:scale(.98)}
/* UN solo primario, y es VERDE (Flo, 29/8): la pasada de marca lo habia puesto
   en coral, que es el color protagonista del workbook, y Flo lo devolvio a
   verde al verlo -- el coral queda para el circulo del medio de la barra, el
   paso actual y lo activo, que es "ahora"; el boton es "hace". Antes convivian
   dos primarios, uno verde y uno tinta, sin regla de cual iba donde. La letra
   va en tinta (3.78) y en negrita: el blanco sobre verde no llega */
.btn-verde{background:var(--verde);color:var(--tinta);border-color:var(--verde)}
/* el secundario va en rosa y no en el crema apagado: leido al lado del verde del
   principal, el crema pasaba por gris de sistema y por boton apagado.
   Va como tinte rgba del rosa OFICIAL (#FDA5BE) y no en rosa pleno, porque el
   pleno ya es .btn-tinta: en "Voy / No puedo" el pleno es el estado elegido, y
   con los dos iguales no se distinguia el elegido del que no */
.btn-crema{background:rgba(253,165,190,.45);color:var(--tinta);border-color:rgba(16,69,61,.3)}
/* el rosa pleno con borde de tinta es el estado ELEGIDO (Voy / No puedo) y
   las acciones de Caro sobre una inversora. Se llamaba .btn-tinta, por el
   borde: el nombre decia lo contrario de lo que se veia */
.btn-rosa{background:var(--rosa);color:var(--tinta);border-color:var(--tinta)}
.btn + .btn{margin-top:10px}
.btn-chico{min-height:46px;padding:11px 18px;font-size:15px;border-radius:12px;width:auto;display:inline-flex}

/* ============ destino ============ */
.destino{background:var(--rosa);color:var(--tinta);border-radius:22px;padding:24px;margin-bottom:20px;position:relative;overflow:hidden}
.destino .halo{position:absolute;right:-70px;top:-80px;width:230px;height:230px;border-radius:50%;background:rgba(255,255,255,.09)}
.destino .n{font-family:var(--serif);font-size:58px;font-weight:400;line-height:.95;position:relative}
.destino .n.brujula{font-family:var(--sans);font-size:46px;line-height:1;margin-bottom:4px}
.destino .q{font-family:var(--serif);font-size:26px;font-weight:400;line-height:1.12;margin-top:6px;max-width:15ch;position:relative;--halo-c:#fff}
.barra{height:10px;background:rgba(0,0,0,.16);border-radius:99px;overflow:hidden;margin-top:18px}
.barra i{display:block;height:100%;background:#fff;border-radius:99px;transition:width .6s ease}
/* la de arriba se rellena de blanco porque vive sobre el rosa de .destino.
   Esta es la misma barra sobre el papel, donde el blanco no se ve */
.barra-papel{height:10px;background:var(--crema2);border-radius:99px;overflow:hidden;margin-top:4px}
.barra-papel i{display:block;height:100%;background:var(--rosa);border-radius:99px}
.destino .pie{font-size:14px;font-weight:500;margin-top:10px}
/* ---- el hero del mes en gastos (29/8) ----
   La misma caja que .destino pero en blanco y con el selector de mes adentro:
   el color de la pantalla de gastos se lo lleva el dato (la franja verde del
   ingreso, el bloque de lo que entro, el coral de pasarse), no el marco.
   Antes el total iba en rosa pleno, el selector con dos rayas y las cifras
   sueltas: tres cosas para un solo dato */
/* en rosa, como el .destino de siempre: Flo la devolvio al rosa al verla en blanco (29/8) */
.destino.mes{padding:20px;margin:0 0 14px}
.destino.mes .q{font-size:44px;line-height:1;max-width:none}
.destino.mes .pie{color:rgba(16,69,61,.9);margin-top:8px}
.destino.mes .cifras{margin-top:14px}

/* ============ ahora ============ */
.ahora{background:#fff;border:3px solid var(--coral);border-radius:20px;padding:22px;margin-bottom:24px}
.ahora.verde{border-color:var(--verde)}
.ahora h2{font-family:var(--serif);font-size:25px;line-height:1.15;margin:8px 0 6px;font-weight:400}
.ahora p{margin:0 0 18px;font-size:15px;color:rgba(16,69,61,.7)}
.atrasado{display:inline-flex;align-items:center;gap:6px;background:#FDE7DF;color:#C1391A;border-radius:99px;padding:5px 12px;font-size:12.5px;font-weight:600;margin-bottom:10px}

/* ============ camino ============ */
/* el cabezal de cada fase, en el rosa oficial de Caro y no en el crema apagado
   (pedido de Flo, 29/8): en el archivo de la 2026 son los unicos titulos de la
   pantalla, y en crema pasaban por separador de sistema.
   La fase que esta corriendo ya no puede distinguirse por el color, porque el
   rosa lo tienen todas: la marca el borde de tinta */
.tramo{margin:28px 0 14px;padding:14px 16px;border-radius:14px;background:var(--rosa);color:var(--tinta)}
.tramo.activo{box-shadow:inset 0 0 0 2px var(--tinta)}
/* el cabezal que abre y cierra su sección (Flo, 1/9). Es el bloque entero y no
   una flechita suelta: el título es lo que ya se lee como "esta sección", y un
   blanco de 16px al costado no lo encuentra nadie con el pulgar. La flecha va
   al extremo derecho, que es donde se la busca, y el texto ocupa el resto */
.tramo.plegable{display:flex;align-items:center;gap:12px;width:100%}
.tramo.plegable .t-txt{flex:1;min-width:0}
/* ⚠️ La flecha es la MISMA `›` que abre una fila (Flo, 1/9): dos dibujos
   distintos para "esto se abre" obligan a aprender los dos. Gira 90° cuando la
   sección está abierta, y lo decide `aria-expanded`, que es el mismo dato que
   escucha el lector de pantalla: no hay un estado visual y otro real. */
.tramo.plegable .fle{flex:none;font-size:26px;line-height:1;opacity:.9;
  transition:transform .18s ease-out;transform:rotate(0deg)}
.tramo.plegable[aria-expanded="true"] .fle{transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){ .tramo.plegable .fle{transition:none} }
.tramo.plegable:active{transform:scale(.995)}
/* el cuerpo que ese cabezal esconde. Hoy ninguna de las dos clases fija
   `display`, así que alcanza el `[hidden]` del navegador -- pero es hoja de
   usuario y pierde contra cualquier clase, y eso ya mordió dos veces (.nav y
   .switch). Queda escrito para que agregarle un display a .pasos-fase no
   devuelva secciones plegadas que se siguen viendo. */
.pasos-fase[hidden]{display:none}
/* en ajustes de gastos el cabezal es un titulo con su linea, no un bloque:
   cuatro bloques rosas en una pantalla de ajustes eran cuatro gritos (29/8) */
.tramo.liso{background:transparent;padding:0 0 8px;border-radius:0;border-bottom:2px solid var(--tinta);margin-bottom:10px}
/* .9 y no .7: sobre el rosa, a .7 da 3.6 y a .85 queda justo en 4.50; a .9 da 4.93 */
.tramo .n{font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;opacity:.9}
/* en display, como los titulos de seccion del workbook, y sin las mayusculas
   de sistema que lo hacian separador */
.tramo .t{font-family:var(--display);font-weight:400;font-size:21px;line-height:1.1;margin-top:3px}

.paso{display:flex;gap:15px;align-items:flex-start;position:relative;padding-bottom:16px}
.paso .linea{position:absolute;left:19px;top:42px;bottom:-2px;width:3px;background:rgba(16,69,61,.13);border-radius:2px}
.paso.hecho .linea{background:var(--verde)}
.paso.ultimo .linea{display:none}
.bolita{width:40px;height:40px;border-radius:50%;flex:none;z-index:1;display:grid;place-items:center;font-size:16px;font-weight:700;border:3px solid var(--tinta);background:var(--crema)}
.paso.hecho .bolita{background:var(--verde);color:var(--tinta);border-color:var(--verde)}
.paso.actual .bolita{background:var(--coral);color:var(--tinta);border-color:var(--coral);box-shadow:0 0 0 6px rgba(255,109,60,.2)}
.paso.futuro .bolita{border-color:rgba(16,69,61,.22);color:var(--gris);background:transparent}
.paso .txt{padding-top:7px;flex:1;min-width:0}
.paso .txt b{display:block;font-size:16.5px;font-weight:600;line-height:1.25}
.paso .txt small{display:block;font-size:14px;color:var(--gris);margin-top:2px}
.paso.futuro .txt b{color:var(--gris);font-weight:500}
.paso.actual .txt b{color:var(--coral-txt);font-weight:700}
.paso.hecho .txt b{color:rgba(16,69,61,.6)}
.paso.meta .txt b{font-family:var(--serif);font-size:20px;font-weight:400}
.paso.tocable{cursor:pointer}
.paso .accion{margin:12px 0 4px}
.paso .accion .cita{font-size:22px;margin-bottom:14px}
/* el video de 1 minuto donde Caro presenta el ejercicio de la semana */
.video-caro{display:flex;align-items:center;gap:10px;width:100%;margin:10px 0 4px;padding:10px 12px;
  background:#fff;border:1px solid rgba(16,69,61,.16);border-radius:14px;text-align:left}
.video-caro .play-mini{width:34px;height:34px;flex:none;border-radius:50%;background:var(--rosa);color:var(--tinta);
  display:grid;place-items:center;font-size:13px;border:2px solid var(--tinta)}
.video-caro .vc-txt b{display:block;font-size:14px}
.video-caro .vc-txt small{display:block;font-size:12.5px;color:var(--gris);line-height:1.3}
/* los ejercicios que todavia no se abrieron */
.paso.cerrado{opacity:.55}
.paso.cerrado .bolita{background:var(--crema2);border-color:rgba(16,69,61,.3);font-size:14px}
.paso .accion .btn{width:100%;max-width:280px}

/* ============ tarjetas ============ */
.tarjeta{background:#fff;border:1px solid rgba(16,69,61,.16);border-radius:18px;padding:20px;margin-bottom:14px}
.tarjeta.suave{background:var(--crema2);border-color:rgba(16,69,61,.18)}
/* el desafio de los 21 dias, en el rosa oficial: es lo unico de la pantalla que
   no es plata, y el color lo separa de las tarjetas de numeros */
.tarjeta.rosa{background:var(--rosa);border-color:rgba(16,69,61,.28)}
/* el rosa pleno es fondo para texto TINTA (5.82). Todo lo secundario venia en
   rgba(...,.66/.72), que sobre el rosa cae a 3.1-3.5: sube a .9 (4.93).
   Y el "Dia N de 21" venia en coral-txt, que sobre el rosa da 2.88 -- es el caso
   de §6, el coral no se dice como texto: sobre esta tarjeta va en tinta */
.tarjeta.rosa p,.tarjeta.rosa .sub{color:rgba(16,69,61,.9)}
.tarjeta.rosa .mano{color:var(--tinta)}
/* los dias sin anotar van en blanco: sobre el rosa, el crema se leia gris */
.tarjeta.rosa .reto i{background:#fff;border-color:rgba(16,69,61,.2)}
/* el coral contra el rosa son dos claros pegados (1.51): sin el aro de tinta,
   el dia anotado y el vacio se leian casi igual y la grilla dejaba de decir algo */
.tarjeta.rosa .reto i.on{background:var(--coral);border-color:var(--tinta)}
.tarjeta.rosa .reto i.futuro{background:transparent;border-color:rgba(16,69,61,.35)}
.tarjeta.rosa .reto i.hoy{box-shadow:0 0 0 2px var(--rosa),0 0 0 4px var(--tinta)}
.tarjeta h3{font-family:var(--serif);font-size:20px;margin:6px 0 6px;font-weight:400}
.tarjeta p{margin:0;font-size:15px;color:rgba(16,69,61,.72)}

.fila{display:flex;align-items:center;gap:14px;width:100%;background:#fff;border:1px solid rgba(16,69,61,.16);border-radius:16px;padding:15px;margin-bottom:11px;min-height:72px}
/* mismo fondo blanco que el resto: la jerarquia la marca el borde, no el relleno */
.fila.tenue{background:#fff;border-color:rgba(16,69,61,.16)}
/* lista de materiales: un solo peso visual, el marco fino y el titulo mandando */
.fila.material{align-items:flex-start;padding:14px 15px;min-height:0}
.fila.material .ico{margin-top:1px}
.fila.material .cuerpo b{font-size:15.5px;line-height:1.3}
.fila.material .cuerpo small{margin-top:3px;line-height:1.35}
.fila.material .baja{font-size:19px;color:var(--gris);align-self:center;flex:none}
.fila.material .lapiz{align-self:center}
.fila.alerta{border-color:var(--coral);border-width:3px}
.fila .ico{width:44px;height:44px;border-radius:13px;flex:none;display:grid;place-items:center;font-size:18px;border:1px solid rgba(16,69,61,.16);background:var(--crema2)}
/* el icono de un material no lleva marco ni color propio: el emoji ya dice el tipo */
.fila .ico.emoji{border:none;background:transparent;font-size:27px;width:38px;height:38px}
.fila .ico.redondo{border-radius:50%;font-family:var(--serif);font-weight:400;font-size:18px}
/* si una palabra no entra (un correo, un nombre de archivo) se parte en vez
   de desbordar y meterse abajo de lo que tenga al lado */
.fila .cuerpo{flex:1;min-width:0;overflow-wrap:anywhere}
.fila .cuerpo b{display:block;font-size:16px;font-weight:600;line-height:1.25}
.fila .cuerpo small{display:block;font-size:13.5px;color:var(--gris);margin-top:2px}
/* solo donde el texto es un dato largo sin cortes, como un correo */
.fila .cuerpo small.corta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila .flecha{font-size:22px;color:var(--gris)}

/* queda pegado al borde de arriba mientras scrolleas: el resultado de una
   decision tiene que verse aunque la fila que tocaste este lejos.
   El z-index le gana al de .bar (20) y al de .impersonando (40) a proposito:
   el aviso se pinta antes que ellos en el DOM, asi que con el mismo z-index
   la barra del titulo le pasaba por encima y la frase quedaba tapada. */
/* ⚠️ Dejó de ser un bloque verde (Flo, 1/9, con una imagen de referencia). El
   verde medio pedía letra tinta --lo único que habilita el manual-- así que el
   aviso era un rectángulo de color con texto adentro del mismo peso que el
   resto de la pantalla, y en una pantalla que ya tiene rosa, verde y coral no
   se despegaba de nada. Ahora es una TARJETA CLARA que flota: papel, borde
   fino, sombra larga y esquinas grandes. Lo que dice "esto es de ahora" no es
   el fondo, son las otras dos piezas -- el emoji en su círculo y el reloj de
   abajo, que se vacía mientras dura. Un cartel que se está yendo se mira.
   La regla de §6ter se respeta igual: el color va en bloque (el reloj), nunca
   en el texto, y la letra sigue siendo tinta sobre papel (9,5 de contraste). */
.aviso-hecho{
  position:sticky;top:10px;z-index:45;display:flex;align-items:center;gap:12px;
  /* papel blanco, que es el fondo de tarjeta de toda la app, y no un crema
     nuevo: contra el `--crema` de la pantalla se despega, y §6 es explícito con
     que no se inventan colores fuera del manual */
  background:#fff;color:var(--tinta);border:1px solid rgba(16,69,61,.14);border-radius:18px;
  padding:14px 15px;margin-bottom:14px;box-shadow:0 10px 28px rgba(16,69,61,.20);
  overflow:hidden;
}
/* el reloj: la barra de abajo que se vacía en los 5 segundos que dura el aviso.
   Va en coral, que es el color de "ahora" (§6ter), y es un bloque sin texto.
   ⚠️ La duración la pone el JS con `animation-duration` desde AVISO_MS: escrita
   acá, el día que el aviso dure otra cosa la barra mentiría. */
.aviso-hecho .reloj{
  position:absolute;left:0;bottom:0;height:4px;width:100%;
  background:var(--coral);border-radius:0 3px 3px 0;
  transform-origin:left center;animation:avisoReloj linear forwards;
}
@keyframes avisoReloj{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){ .aviso-hecho .reloj{animation:none;opacity:.5} }
.aviso-hecho b{flex:1;font-size:15px;font-weight:600;line-height:1.3}
/* el emoji va en un círculo blanco: suelto sobre el verde medio se pierde, y
   el círculo es lo que hace que el aviso se vea de reojo (Flo, 1/9) */
.aviso-hecho .emo{
  flex:none;width:36px;height:36px;border-radius:50%;background:var(--crema);
  border:1px solid rgba(16,69,61,.14);display:grid;place-items:center;font-size:19px;
}
/* los dos botones dejan de ser bloques con borde: sobre papel, el texto solo ya
   se lee, y el Deshacer tiene que pesar menos que la frase, que es el dato */
.aviso-hecho button{border:none;background:transparent}
/* entra bajando, sale subiendo. 200ms es lo que el ojo detecta sin estar
   mirando justo ahí, que es el caso: ella está mirando la fila que tocó */
.aviso-hecho.entra{animation:avisoEntra .24s ease-out}
.aviso-hecho.yendose{animation:avisoSale .22s ease-in forwards;pointer-events:none}
@keyframes avisoEntra{
  from{opacity:0;transform:translateY(-14px) scale(.97)}
  to{opacity:1;transform:none}
}
@keyframes avisoSale{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(-12px)}
}
@media (prefers-reduced-motion:reduce){
  .aviso-hecho.entra,.aviso-hecho.yendose{animation:none}
  /* sin animación igual tiene que desaparecer, o queda hasta el repintado */
  .aviso-hecho.yendose{opacity:0}
}
.aviso-hecho button.cerrar{
  padding:6px 8px;font-size:20px;line-height:1;
  background:transparent;border:none;color:rgba(16,69,61,.7);
}
.aviso-hecho button[data-deshacer]{
  flex:none;background:var(--crema);color:var(--tinta);border:1px solid rgba(16,69,61,.22);
  border-radius:99px;padding:8px 14px;font-size:14px;font-weight:700;
}
/* ---- hay una version nueva ----
   Va en rosa y no en verde como .aviso-hecho: el verde es "lo que hiciste salio
   bien" y esto no lo hizo ella. Rosa pleno con letra tinta (5.82), que es lo
   unico que el manual habilita para el rosa (§6).
   No se puede cerrar a proposito: es el unico camino a la version nueva para
   quien tiene la PWA agregada al inicio y no la cierra nunca. */
.aviso-version{
  position:sticky;top:10px;z-index:46;display:flex;align-items:center;gap:12px;
  background:var(--rosa);color:var(--tinta);border:2px solid var(--tinta);border-radius:16px;
  padding:13px 15px;margin-bottom:14px;box-shadow:0 6px 18px rgba(16,69,61,.18);
}
.aviso-version b{flex:1;font-size:15px;font-weight:600;line-height:1.3}
.aviso-version small{display:block;font-size:12.5px;font-weight:400;opacity:.9;margin-top:1px}
.aviso-version button{
  flex:none;background:var(--verde);color:var(--tinta);border:2px solid var(--tinta);
  border-radius:99px;padding:9px 16px;font-size:14.5px;font-weight:700;
}
/* los dos avisos se pegan arriba en el mismo top: sin esto, el de "listo" se
   dibuja justo encima del de la version nueva y tapa el boton de refrescar */
.aviso-version ~ .aviso-hecho{top:78px}

.pill{display:inline-block;padding:5px 12px;border-radius:99px;font-size:12px;font-weight:600;border:2px solid var(--tinta);white-space:nowrap}
.p-verde{background:var(--verde);color:var(--tinta);border-color:var(--verde)}
.p-coral{background:var(--coral);color:var(--tinta);border-color:var(--coral)}
.p-celeste{background:var(--celeste)}
.p-crema{background:var(--crema2);border-color:rgba(16,69,61,.2);color:var(--gris)}
.p-lila{background:var(--lila);color:var(--tinta);border-color:var(--lila)}

.dato{background:#fff;border:2px solid var(--tinta);border-radius:18px;padding:18px}
.dato .n{font-family:var(--serif);font-size:38px;font-weight:400;line-height:1}
.dato .l{font-size:13px;color:rgba(16,69,61,.7);margin-top:4px;line-height:1.3}
.datos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}

.medidor{display:flex;align-items:center;gap:12px;margin-bottom:10px;font-size:14px}
.medidor .l{width:96px;flex:none;font-weight:600}
.medidor .t{flex:1;height:18px;border-radius:6px;background:rgba(16,69,61,.09);overflow:hidden;border:2px solid var(--tinta)}
.medidor .t i{display:block;height:100%}
.medidor .v{width:26px;text-align:right;font-weight:700;font-family:var(--serif)}

/* ============ ingreso ============ */
.ingreso{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:40px 26px;text-align:center;position:relative;overflow:hidden;
  /* rosa pleno con la cuadricula blanca. La pasada de marca lo habia cambiado
     por la hoja rayada en crema de la tapa del workbook, y Flo lo devolvio a
     como estaba (29/8): el rosa es la pantalla de entrada de la app */
  background-color:var(--rosa);
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.14) 0 2px,transparent 2px 30px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 2px,transparent 2px 30px);
}
.ingreso .bloque{position:relative;z-index:1;width:100%;max-width:360px}
.ingreso .mancha{position:absolute;border-radius:50%;pointer-events:none}
.ingreso .m1{width:300px;height:300px;background:var(--rosa-suave);opacity:.6;top:-70px;left:-110px}
.ingreso .m2{width:220px;height:220px;background:var(--tinta);opacity:.22;bottom:-60px;right:-80px}

/* el recorte con borde, la firma de la marca */
.recorte-caro{
  width:186px;height:186px;border-radius:50%;margin:0 auto 20px;
  border:7px solid var(--crema);outline:5px solid var(--rosa-suave);
  overflow:hidden;background:var(--celeste);display:grid;place-items:center;
}
.recorte-caro img{width:100%;height:100%;object-fit:cover;display:block}

.ingreso .firma{font-family:var(--mano);font-size:28px;color:var(--tinta);line-height:1;margin:0 0 14px;transform:rotate(-2deg)}
/* sobre el rosa la marca va en tinta (5.82), con el halo en blanco: es el
   titulo de la pantalla, como el del post-it del workbook. El coral con halo
   rosa era para la version en crema, que Flo devolvio al rosa (29/8) */
.ingreso .marca{
  font-family:var(--serif);font-weight:400;font-size:46px;line-height:1;
  color:var(--tinta);margin:0 0 12px;--halo-c:#fff;
}
.ingreso .flor{display:block;margin:26px auto 0}
.ingreso .bajada{font-size:16.5px;color:var(--tinta);opacity:1;margin:0 auto 26px;max-width:26ch;line-height:1.4}
.ingreso .bajada.bienvenida{
  font-family:var(--sans);font-weight:800;font-size:19px;letter-spacing:.06em;text-transform:uppercase;
  line-height:1.15;opacity:1;margin-bottom:8px;max-width:14ch;
}

.btn-google{background:var(--crema);border:3px solid var(--tinta);color:var(--tinta);font-weight:600;box-shadow:4px 4px 0 var(--tinta)}
.btn-google:active{box-shadow:2px 2px 0 var(--tinta)}
.btn-google svg{width:22px;height:22px;flex:none}

/* elegir cuenta y sin acceso, sobre crema */
.plano{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:36px 26px;text-align:center}
.plano .titulo{font-family:var(--serif);font-size:30px;font-weight:400;line-height:1.1;margin:0 0 8px}
.plano .bajada{font-size:15.5px;color:rgba(16,69,61,.7);margin:0 auto 24px;max-width:32ch;line-height:1.45}
.cuentas{text-align:left;margin-bottom:14px}
.cuenta{display:flex;align-items:center;gap:12px;width:100%;background:#fff;border:2px solid var(--tinta);border-radius:14px;padding:13px 15px;margin-bottom:9px;min-height:66px}
.cuenta .av{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--serif);font-weight:400;font-size:17px;color:#fff}
.cuenta b{display:block;font-size:15.5px;line-height:1.2}
.cuenta small{display:block;font-size:13px;color:var(--gris);margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.plano .ayuda{margin:16px 0 0;font-size:13.5px;color:var(--gris)}

/* ============ test ============ */
.pasos-test{display:flex;gap:6px;margin:0 0 24px}
.pasos-test i{flex:1;height:7px;border-radius:99px;background:rgba(16,69,61,.13)}
.pasos-test i.on{background:var(--coral)}
.pregunta{font-family:var(--serif);font-size:27px;font-weight:400;line-height:1.2;margin:0 0 24px}
.opcion{display:flex;align-items:center;width:100%;min-height:70px;padding:18px 20px;margin-bottom:12px;border:2px solid var(--tinta);border-radius:16px;background:#fff;font-size:16.5px;line-height:1.35;transition:transform .1s}
.opcion:active{transform:scale(.98);background:var(--crema2)}
.resultado{border-radius:22px;padding:28px 22px;text-align:center;color:var(--tinta);margin-bottom:20px}
.resultado .cara{width:88px;height:88px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;font-family:var(--serif);font-size:35px;font-weight:400;background:var(--crema);color:var(--tinta);border:4px solid #fff}
.resultado .nom{font-family:var(--serif);font-size:31px;font-weight:400;line-height:1.05;margin-bottom:8px}
.resultado .frase{font-family:var(--mano);font-size:25px;margin-bottom:14px}
.resultado p{font-size:15px;line-height:1.5;margin:0;opacity:.95}

/* ============ encuentro ============ */
.video{aspect-ratio:16/9;border-radius:18px;border:2px solid var(--tinta);background:var(--rosa);color:var(--tinta);display:grid;place-items:center;text-align:center;padding:20px;margin-bottom:16px}
.video .play{width:62px;height:62px;border-radius:50%;background:var(--crema);color:var(--tinta);display:grid;place-items:center;font-size:24px;margin:0 auto 10px}
.procesando{background:var(--crema2);border:2px dashed rgba(16,69,61,.3);border-radius:18px;padding:24px;text-align:center;margin-bottom:16px}
.punto{display:flex;gap:11px;align-items:flex-start;margin-bottom:12px;font-size:15px;line-height:1.45}
.punto span{width:22px;height:22px;border-radius:50%;background:var(--verde);color:var(--tinta);flex:none;display:grid;place-items:center;font-size:12px;font-weight:700;margin-top:2px}

/* ============ avisos ============ */
.banner{background:var(--celeste);border-radius:16px;padding:16px 18px;margin-bottom:18px;font-size:14.5px;line-height:1.45}
.banner b{font-size:15.5px}

/* ============ nav ============ */
/* el translateZ(0) no es magia de copiar y pegar: le da capa propia a la barra
   para que iOS la reubique durante el scroll y no recien al final del gesto,
   que es la otra mitad de por que quedaba flotando. La misma capa se le da al
   switch, que va colgado de la barra y saltaba con ella. */
.nav{position:fixed;bottom:0;left:0;right:0;z-index:30;max-width:460px;margin:0 auto;background:var(--crema);border-top:2px solid var(--tinta);display:flex;padding-bottom:env(safe-area-inset-bottom);transform:translateZ(0)}
.nav[hidden]{display:none}
.nav button{flex:1;padding:10px 4px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12px;font-weight:600;color:var(--gris);min-height:var(--nav);text-align:center;position:relative}
.nav button svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav button .emo{--flip:1;font-size:23px;line-height:1;display:block;filter:grayscale(.55);opacity:.65;transform:scaleX(var(--flip));transition:transform .12s}
.nav button .emo.flip{--flip:-1}
.nav button[aria-current="page"] .emo{filter:none;opacity:1;transform:scaleX(var(--flip)) scale(1.14)}
.nav button:active .emo{transform:scaleX(var(--flip)) scale(.9)}
/* coral-txt (4.7 sobre el papel): es el mismo color del circulo del medio
   y del paso actual del camino. Coral = ahora, en toda la app */
.nav button[aria-current="page"]{color:var(--coral-txt)}
/* el botón del medio sobresale de la barra, como el QR de Mercado Pago. Es lo
   que se toca todos los días, y entre cuatro iconos iguales quedaba perdido.
   El círculo va posicionado (no con margen negativo) para que la etiqueta no se
   mueva con él: así los cinco textos quedan alineados entre sí. */
.nav button.destacado{padding-top:32px}
.nav button.destacado .emo{
  position:absolute;top:-19px;left:50%;margin-left:-27px;
  width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--coral);font-size:26px;
  /* el borde del color del papel recorta la línea de la barra por detrás */
  border:3px solid var(--crema);
  box-shadow:0 3px 10px rgba(16,69,61,.2);
  filter:none;opacity:1;
}
.nav button.destacado[aria-current="page"]{color:var(--coral-txt)}
/* el círculo ya destaca solo: agrandarlo al estar activo lo hacía saltar */
.nav button.destacado[aria-current="page"] .emo{transform:scaleX(var(--flip))}
.nav button.destacado:active .emo{transform:scaleX(var(--flip)) scale(.93)}

.nav .punto-rojo{position:absolute;top:12px;right:calc(50% - 20px);width:9px;height:9px;border-radius:50%;background:var(--coral)}
.nav .marca-lat{display:none}
.nav .usuario-lat{display:none}

/* ============ escritorio ============ */
@media(min-width:860px){
  #app{max-width:1060px;display:grid;grid-template-columns:236px 1fr;min-height:100vh}
  #app.limpio{display:block;max-width:520px}
  #vista{padding-bottom:0;border-left:2px solid var(--tinta);min-width:0}
  .wrap{padding:30px 34px 60px;max-width:740px}
  .bar{padding:22px 34px 16px}
  .nav{position:sticky;top:0;height:100vh;flex-direction:column;justify-content:flex-start;max-width:none;margin:0;border-top:none;background:var(--crema2);padding:22px 14px;left:auto;right:auto;bottom:auto}
  .nav .marca-lat{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:400;font-size:18px;padding:0 12px 22px;color:var(--tinta);line-height:1.2}
  .nav button{flex:none;flex-direction:row;justify-content:flex-start;gap:13px;min-height:54px;padding:0 14px;border-radius:12px;font-size:15.5px;margin-bottom:4px}
  .nav button[aria-current="page"]{background:var(--rosa);color:var(--tinta)}
  .nav button .emo{font-size:20px}
  .nav button[aria-current="page"] .emo{transform:scaleX(var(--flip))}
  /* en la barra lateral no hay "medio" que valga: el círculo flotante vuelve a
     ser una fila más, con el redondel en línea para que se siga notando */
  .nav button.destacado{padding:0 14px}
  .nav button.destacado .emo{
    position:static;margin:0;width:32px;height:32px;font-size:17px;border-width:2px;
    box-shadow:none;flex:none;
  }
  .nav .punto-rojo{position:static;margin-left:auto}
  .nav .usuario-lat{
    display:flex;align-items:center;gap:11px;margin-top:auto;padding:14px 12px 4px;
    border-top:2px solid rgba(16,69,61,.14);
  }
  .nav .usuario-lat .av{
    width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
    font-family:var(--serif);font-weight:400;font-size:15px;color:#fff;
  }
  .nav .usuario-lat .txt{min-width:0}
  .nav .usuario-lat b{
    display:block;font-size:15px;font-weight:600;color:var(--tinta);line-height:1.2;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .nav .usuario-lat button{
    all:unset;cursor:pointer;font-size:13px;color:var(--gris);text-decoration:underline;
    margin-top:1px;display:block;
  }
  .nav .usuario-lat button:hover{color:var(--coral-txt)}
  .datos{grid-template-columns:repeat(4,1fr)}
  .dos-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
}

.switch{position:fixed;z-index:50;bottom:calc(var(--nav) + env(safe-area-inset-bottom) + 14px);right:14px;background:var(--tinta);border-radius:99px;padding:4px;display:flex;gap:3px;transform:translateZ(0)}
/* ⚠️ Sin esto el atributo `hidden` NO esconde nada: el `display:flex` de arriba
   le gana al `[hidden]{display:none}` del navegador, que es hoja de usuario y
   pierde contra cualquier clase. app.js venía poniendo .hidden bien y el
   selector seguía dibujado igual -- se veía en la pantalla de ingreso, que es
   la primera que ve cualquiera. Es la misma trampa que ya había mordido con
   .nav (ver .nav[hidden] más arriba): cada vez que una clase de la app fija
   `display`, si algo la esconde con `hidden` hay que repetir la regla acá. */
.switch[hidden]{display:none}
.switch button{padding:8px 14px;border-radius:99px;font-size:12px;font-weight:600;color:#fff}
.switch button[aria-pressed="true"]{background:var(--rosa);color:var(--tinta)}
@media(min-width:860px){.switch{bottom:16px;right:16px}}

.festejo{background:var(--verde);color:var(--tinta);border-radius:20px;padding:26px 22px;margin-bottom:22px;text-align:center;position:relative;overflow:hidden}
.festejo .estrella{font-size:44px;line-height:1;margin-bottom:8px;display:block}
.festejo h2{font-family:var(--serif);font-size:27px;line-height:1.1;margin:0 0 8px;font-weight:400}
.festejo p{margin:0 0 18px;font-size:15px;opacity:.94}

.consulta{background:#fff;border:1px solid rgba(16,69,61,.16);border-radius:18px;padding:18px;margin-bottom:13px}
.consulta.abierta{border-color:var(--coral)}
.consulta .quien{display:flex;align-items:center;gap:9px;margin-bottom:9px;font-size:13px;color:var(--gris)}
.consulta .quien .av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;background:var(--crema2);color:var(--gris);flex:none}
.consulta .txt{font-size:16px;font-weight:500;line-height:1.45;margin-bottom:10px;color:var(--tinta)}
.consulta .resp{background:var(--crema2);border-radius:13px;padding:14px;font-size:14.5px;line-height:1.45}
.consulta .resp b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--verde-txt);margin-bottom:6px}
.consulta .esperando{font-size:14px;color:var(--coral-txt);font-weight:600}

.grande{
  display:block;width:100%;background:var(--verde);color:var(--tinta);border:2px solid var(--verde);
  border-radius:20px;padding:22px;margin-bottom:12px;position:relative;transition:transform .1s;
}
.grande.alt{background:var(--celeste);color:var(--tinta);border-color:var(--tinta)}
.grande.balanz{background:var(--lila);color:var(--tinta);border-color:var(--lila)}
/* los dos hitos del embudo, juntos para poder compararlos de un vistazo */
.embudo{display:grid;gap:12px;margin-bottom:12px}
.embudo .grande{margin-bottom:0}
@media(min-width:640px){.embudo{grid-template-columns:1fr 1fr}}
.grande:active{transform:scale(.99)}
.grande .num{display:block;font-family:var(--serif);font-size:52px;font-weight:400;line-height:1}
.grande .num i{font-style:normal;font-size:24px;opacity:.75}
.grande .txt{display:block;font-size:16px;font-weight:600;margin-top:4px;line-height:1.25}
.grande .ver{display:block;font-size:13px;margin-top:12px;opacity:.85;font-weight:600}

.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin:0 -20px;padding-left:20px;padding-right:20px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 15px;border-radius:99px;border:2px solid var(--tinta);background:transparent;font-size:14px;font-weight:600;white-space:nowrap}
.chip.on{background:var(--rosa);color:var(--tinta);border-color:var(--tinta)}
/* la etiqueta de quién ve una cosa, en el inventario: se LEE, no se toca --
   por eso va sin borde y en la caja crema, para no parecer un chip apagado */
.chip.etiqueta{border-color:transparent;background:var(--crema2);font-size:13px;font-weight:700;
               min-height:32px;padding:0 11px;white-space:normal;text-align:right}

/* el borrador: lo mismo que la fila oculta, en tarjeta. Se ve apagado pero
   legible -- es material que el equipo sigue usando, no basura */
.tarjeta.borrador{background:repeating-linear-gradient(-45deg,var(--crema2) 0 8px,#fff 8px 16px);
                  border-style:dashed}
.tarjeta.borrador .chip.etiqueta{background:#fff}

/* el pie del desplegable de visibilidad: dice a qué generaciones llega HOY la
   regla elegida, que es lo que no se puede adivinar leyendo el nombre */
.campo.vis{margin-top:12px}
.pie-vis{font-size:13px;margin:7px 0 0}

.gen-tit{display:flex;align-items:baseline;gap:8px;margin:24px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--tinta)}
.gen-tit b{font-family:var(--serif);font-size:19px;font-weight:400}
.gen-tit span{font-size:13px;color:var(--gris)}

.wa{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--verde);border:2px solid var(--tinta);color:var(--tinta)}
.wa svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.wa:active{transform:scale(.94)}

/* calendario */
.cal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal-top b{font-family:var(--serif);font-size:21px;font-weight:400;text-transform:capitalize}
.cal-nav{display:flex;gap:7px}
.cal-nav button{width:48px;height:48px;border-radius:12px;border:2px solid var(--tinta);display:grid;place-items:center;font-size:19px;background:var(--crema)}
.cal-nav button[disabled]{opacity:.3}
.cal-dias{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.cal-dias span{text-align:center;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.leyenda{display:flex;gap:14px;flex-wrap:wrap;margin:16px 0 20px;font-size:13px}
.leyenda span{display:flex;align-items:center;gap:6px}
.leyenda i{width:10px;height:10px;border-radius:50%;display:block}

.lapiz{width:46px;height:46px;flex:none;border-radius:50%;border:2px solid var(--tinta);background:var(--crema2);display:grid;place-items:center;font-size:18px}
/* el ojito de mostrar u ocultar */
.lapiz.ojo{background:var(--verde);border-color:var(--verde);color:var(--tinta)}
/* ---- lo que no se muestra ----
   ⚠️ Se ve en GRIS y de lejos (Flo, 1/9): antes era una diagonal muy tenue y
   una palabra chica abajo del título, o sea que había que leer la fila entera
   para saber que esa no la ve nadie. Ahora la fila entera pierde el color
   (`grayscale`) y el borde es punteado: en una lista de doce, la que está en
   borrador se distingue sin leer nada. Legible igual -- se sigue editando. */
.fila.oculta,.paso.oculta{filter:grayscale(1);opacity:.75}
.fila.oculta{background:rgba(16,69,61,.05);border-style:dashed;border-color:rgba(16,69,61,.4)}
.fila.oculta .cuerpo b{opacity:.7}
.paso.oculta .txt b{opacity:.7}
.lapiz:active{transform:scale(.94)}
/* el lapiz mira para el otro lado */
.flip{display:inline-block;transform:scaleX(-1)}
a.fila{color:inherit}
/* foro */
.reacciones{display:flex;gap:5px;flex-wrap:wrap}
.reac{display:flex;align-items:center;gap:4px;padding:0 9px;border-radius:99px;border:1.5px solid rgba(16,69,61,.16);background:transparent;font-size:14px;line-height:1;min-height:34px}
.reac i{font-style:normal;font-size:12.5px;font-weight:700;color:var(--gris)}
.reac.mia{border-color:var(--verde);background:#DFF3E8}
.reac.mia i{color:var(--verde-txt)}
.reac:active{transform:scale(.94)}
/* el pie de la tarjeta: reacciones a la izquierda, respuestas a la derecha, un solo renglon */
.pie-consulta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:11px;border-top:1px solid rgba(16,69,61,.12)}
.pie-consulta .ver-hilo{margin-left:auto;padding:0;border:none;background:none}
.ver-hilo{font-size:13.5px;font-weight:600;color:var(--verde-txt);white-space:nowrap}
.ver-hilo.sin{color:var(--coral-txt)}
.resp-hilo{background:var(--crema2);border-radius:16px;padding:16px;margin-bottom:11px;border:2px solid rgba(16,69,61,.14)}
.resp-hilo.deCaro{background:#DFF3E8;border-color:var(--verde)}
/* donde se escribe es un bloque celeste, como las cajas del workbook: el
   color dice "aca va lo tuyo" sin necesitar un marco. Tinte del celeste
   oficial y no un hex nuevo (§6) */
textarea{width:100%;padding:15px;border:1px solid rgba(16,69,61,.14);border-radius:12px;background:rgba(168,212,237,.32);font-family:inherit;font-size:16px;color:var(--tinta);resize:vertical;line-height:1.45}
textarea:focus{outline:3px solid var(--rosa);outline-offset:1px}
input[type=search]{width:100%;padding:15px 17px;border:1px solid rgba(16,69,61,.14);border-radius:12px;background:rgba(168,212,237,.32);color:var(--tinta)}
/* el rotulo del campo en frase y no en versalitas: en el workbook dice
   "Vine a la experiencia por:" y nada mas */
.campo label{display:block;font-size:14.5px;font-weight:600;color:var(--tinta);margin-bottom:6px}
.campo .err, .err{
  margin:7px 0 0;font-size:14px;font-weight:600;color:var(--coral-txt);
  display:flex;align-items:center;gap:6px;
}
.campo .err::before, .err::before{content:"▲";font-size:11px}
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"]{border-color:var(--coral)}
.campo input{width:100%;padding:14px 16px;border:1px solid rgba(16,69,61,.14);border-radius:12px;background:rgba(168,212,237,.32);color:var(--tinta)}
/* el desplegable con la misma caja que los campos de texto: si no, al lado de
   un input redondeado el select nativo parece de otra pantalla */
.campo select{
  width:100%;padding:14px 16px;border:1px solid rgba(16,69,61,.14);border-radius:12px;
  background:rgba(168,212,237,.32);color:var(--tinta);font-family:inherit;font-size:17px;line-height:1.2;
  -webkit-appearance:none;appearance:none;
  /* la flecha, dibujada acá para no depender de la del sistema */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2310453D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px;
  padding-right:42px;
}

/* una herramienta embebida dentro de una sección (hoy, el simulador). Ocupa lo
   que queda de pantalla y scrollea por dentro: el alto se descuenta a mano
   porque arriba está la barra del título y los chips, y abajo la nav */
/* el marco vive fuera de #vista (ver el comentario de index.html): sin esto no
   tendría ni ancho ni fondo propios */
#rec-marco{width:100%}
#rec-frame{width:100%;border:0;display:block;background:var(--crema)}
.marco-rec{
  width:100%;border:0;display:block;background:var(--crema);
  height:calc(100dvh - 232px);min-height:360px;
}
@media(min-width:860px){
  /* en escritorio la nav es lateral: no hay barra abajo que descontar */
  .marco-rec{height:calc(100dvh - 172px)}
}

/* ---- foto y perfil ----
   object-fit recorta sin deformar: las fotos de celular vienen verticales y
   estirarlas a un cuadrado deja caras raras */
.av-foto{border-radius:50%;object-fit:cover;flex:none;display:block;background:var(--crema2)}
/* `.av` a secas nunca tuvo estilo propio: siempre venía de un contexto
   (.cuenta .av, .usuario-lat .av). Suelto salía cuadrado, de ahí esta clase */
.av-inicial{
  border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--serif);font-weight:400;color:#fff;
}

/* la foto grande del perfil, con el lapicito encima */
.foto-zona{display:flex;flex-direction:column;align-items:center;gap:14px}
.foto-btn{position:relative;display:block;border-radius:50%;line-height:0;cursor:pointer}
.foto-btn .lapiz{
  position:absolute;right:0;bottom:2px;
  width:34px;height:34px;border-radius:50%;
  background:var(--tinta);color:var(--crema);
  display:grid;place-items:center;font-size:16px;line-height:1;
  border:3px solid var(--crema);
}
.foto-btn:active{transform:scale(.97)}
.foto-acciones{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.foto-acciones .btn{margin-top:0;cursor:pointer}

/* la tarjeta de "Yo" que lleva al perfil */
.perfil-card{align-items:center}

/* los enlaces de cada ficha */
/* ---- la ficha del directorio (29/8, la que mando Flo) ----
   Una fila: el avatar en rosa, los datos en el medio y el boton de WhatsApp
   a la derecha. Las redes van en un renglon de texto, cada una con su color
   de texto de la marca (coral-txt y verde-txt cumplen contraste; el verde y
   el coral plenos no, §6). El WhatsApp es el unico boton: verde pleno con el
   logo en blanco, sin borde -- es el contacto directo, para lo que esta el
   directorio. */
.ficha-dir{
  display:flex;align-items:center;gap:14px;
  background:#fff;border:1px solid rgba(16,69,61,.1);border-radius:20px;
  padding:16px 16px 16px 14px;margin-bottom:12px;box-shadow:0 2px 12px rgba(16,69,61,.05);
}
.ficha-dir .av-inicial{color:#fff;font-family:var(--serif)}
/* el aro coral alrededor de la foto o la inicial (Flo, 29/8): con un filete
   blanco en el medio para que el coral no se pegue al rosa de la inicial */
.ficha-dir .av-inicial,.ficha-dir .av-foto{box-shadow:0 0 0 2px #fff,0 0 0 5px var(--coral);margin:5px 5px 5px 6px}
/* la profesion como etiqueta rosa, sin negrita (Flo, 29/8) */
.gen-pill{
  display:inline-block;vertical-align:1px;padding:2px 10px;border-radius:99px;background:var(--rosa);
  font-size:12.5px;font-weight:400;color:var(--tinta);line-height:1.45;white-space:nowrap;
}
.ficha-dir .quien{flex:1;min-width:0}
.ficha-dir .quien b{display:block;font-size:17px;font-weight:700;line-height:1.25}
.ficha-dir .quien small{display:block;color:var(--gris);font-size:14px;margin-top:2px;line-height:1.35}
.ficha-dir .redes{margin:3px 0 0;font-size:14px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.ficha-dir .redes a{color:var(--tinta);text-decoration:none;padding:13px 2px}
.ficha-dir .redes a.instagram{color:var(--coral-txt)}
.ficha-dir .redes a.linkedin{color:var(--verde-txt)}
.ficha-dir .redes a.web{text-decoration:underline;text-underline-offset:3px}
.ficha-dir .redes .sep{color:var(--gris);font-weight:400}
.ficha-dir .celu{display:block;font-size:15px;font-weight:600;margin-top:3px;font-variant-numeric:tabular-nums}
.ficha-dir .wa{
  width:50px;height:50px;border:0;background:var(--verde);color:#fff;
  box-shadow:0 2px 8px rgba(81,170,114,.35);text-decoration:none;
}
.ficha-dir .wa svg{width:26px;height:26px;fill:currentColor;stroke:none}
/* solo para el lector de pantalla */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* el desafío de los 21 días: un puntito por día. Siete columnas, así son tres
   semanas parejas -- envuelto en flex quedaba un huérfano en la segunda fila */
.reto{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:14px;max-width:260px}
/* en la tarjeta compacta de gastos los 21 van en UNA fila (29/8): tres filas de
   circulos grandes eran media pantalla, arriba del numero del mes */
.reto-card .reto{grid-template-columns:repeat(21,1fr);gap:4px;max-width:none;margin-top:12px}
/* con borde verde oscuro: a este tamaño el aro claro casi no se veia (Flo, 29/8) */
.reto-card .reto i{border:1.5px solid var(--verde-txt);background:transparent}
.reto-card .reto i.futuro{border-style:solid;opacity:.55}
.reto-card .reto i.on{background:var(--rosa);border-color:var(--verde-txt)}
.reto-card .reto i.hoy{box-shadow:0 0 0 1.5px #fff,0 0 0 3px var(--tinta)}
.reto i{
  display:block;aspect-ratio:1;border-radius:50%;
  background:var(--crema2);border:1px solid rgba(16,69,61,.14);
}
.reto i.on{background:var(--coral);border-color:var(--coral)}
/* los días que todavía no llegaron se insinúan, no se marcan como perdidos */
.reto i.futuro{background:transparent;border-style:dashed}
/* hoy, con un aro: sin esto, en el día 1 sin anotar nada la grilla entera se
   ve igual y no se sabe dónde está parada */
.reto i.hoy{box-shadow:0 0 0 2px var(--crema),0 0 0 4px var(--tinta)}

/* ============ control de gastos ============ */

/* el botón de ajustes, a la derecha del título. .bar es flex y el h1 tiene
   flex:1, así que esto queda pegado al borde solo */
.ico-bar{
  width:44px;height:44px;margin:-6px -8px -6px 0;border-radius:50%;
  display:grid;place-items:center;font-size:20px;flex:none;
}
/* la ruedita de gastos, a 36 (pedido de Flo, 29/8). La caja de 48 es el minimo
   de area tocable.
   ⚠️ El modificador se llama .rueda y NO .grande: `.grande` ya existia -- es la
   tarjeta verde grande del panel (§.grande, mas arriba) -- y ponerselo al boton
   le metia background verde, display:block y padding:22px. Se veia como un
   circulo verde con el ⚙ corrido a un costado, y no habia nada verde ni en el
   markup ni en ninguna regla de .ico-bar: el color entraba por el nombre de la
   clase. Antes de reusar un nombre de clase suelto, grepearlo. */
.ico-bar.rueda{width:48px;height:48px;font-size:36px;color:var(--tinta);opacity:1}
.ico-bar.rueda:active{opacity:.6}
.ico-bar:active{background:var(--crema2)}

/* el monto y su moneda en la misma línea: la moneda es del monto, no un campo
   aparte al que haya que bajar */
.con-moneda{display:flex;gap:8px;align-items:stretch}
.con-moneda input{flex:1;min-width:0}
.seg{display:flex;border:1px solid rgba(16,69,61,.2);border-radius:14px;overflow:hidden;background:#fff;flex:none}
.seg button{
  padding:0 14px;min-height:48px;font-size:15px;font-weight:700;color:var(--gris);
  display:grid;place-items:center;
}
.seg button + button{border-left:1px solid rgba(16,69,61,.2)}
.seg button.on{background:var(--rosa);color:var(--tinta)}

/* los chips de categoría llevan el emoji adelante */
.chips-cat .chip{gap:6px}

/* el mes que se está mirando. Las flechas son el control principal de la
   pantalla, por eso son grandes y no un desplegable escondido */
.mes-nav{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:22px 0 4px;padding:6px 0;
  border-top:1px solid rgba(16,69,61,.13);border-bottom:1px solid rgba(16,69,61,.13);
}
.mes-nav b{font-family:var(--serif);font-size:18px;font-weight:400;text-align:center;flex:1}
.mes-nav button{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  font-size:26px;line-height:1;flex:none;
}
.mes-nav button:active{background:var(--crema2)}
.mes-nav button[disabled]{opacity:.28}

/* las tres cifras del mes: contra el mes pasado, por día, y cómo cierra */
.cifras{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 4px}
.cifras div{
  flex:1 1 120px;background:var(--crema2);border-radius:14px;padding:12px 14px;
  border:1px solid rgba(16,69,61,.13);
}
.cifras b{display:block;font-family:var(--serif);font-size:20px;font-weight:400;line-height:1.1}
.cifras small{display:block;font-size:12.5px;color:var(--gris);margin-top:3px;line-height:1.3}

/* pasada del tope la barra cambia de color: el rosa dice "vas bien" */
.barra-papel.pasado i{background:var(--coral)}

/* una sola frase de dato, arriba de los gráficos. Vale más que tres barras */
.frase-dato{
  margin:16px 0 0;padding:14px 16px;background:var(--celeste);border-radius:14px;
  font-size:15px;line-height:1.45;
}

/* los seis meses. Barras verticales chiquitas: la forma se lee de un vistazo
   y no hacen falta ni eje ni leyenda */
.meses{display:flex;gap:8px;align-items:stretch;height:96px}
.meses div{display:flex;flex:1;flex-direction:column;gap:5px;min-width:0}
/* la barra mide contra ESTA zona y no contra la columna entera: midiendo de
   punta a punta, la etiqueta de abajo se comia el tramo de arriba y todo lo
   que pasara del 83% terminaba dibujado igual de alto */
.meses .col{flex:1;display:flex;align-items:flex-end}
.meses i{display:block;width:100%;background:var(--crema2);border-radius:6px 6px 0 0;border:1px solid rgba(16,69,61,.14)}
.meses div.on i{background:var(--rosa);border-color:var(--rosa)}
.meses small{font-size:11.5px;color:var(--gris);line-height:1;text-align:center}
.meses div.on small{color:var(--tinta);font-weight:700}

/* repetir el ultimo: un renglon discreto debajo del boton, no otro boton
   grande compitiendo con el de anotar */
.repetir{
  display:block;margin-top:12px;font-size:14.5px;font-weight:600;
  color:var(--verde-txt);text-decoration:underline;text-underline-offset:3px;
  padding:6px 0;
}

/* ---- las notas del mes (29/8) ----
   Una tarjeta blanca y un renglon por dato, separados por una linea fina.
   Eran cuatro bloques de cuatro colores: se leian como cuatro avisos */
.notas-mes{background:#fff;border:1px solid rgba(16,69,61,.16);border-radius:16px;margin:0 0 4px}
.notas-mes .nota{margin:0;padding:14px 16px;font-size:15px;line-height:1.45}
.notas-mes .nota + .nota{border-top:1px solid rgba(16,69,61,.12)}
.notas-mes .nota .btn-chico{min-height:42px;padding:9px 16px;font-size:14.5px}

/* el cuerpo de la fila cuando además es el botón de editar */
.cuerpo-btn{background:none;border:none;padding:0;margin:0;font:inherit}

/* editar y borrar un gasto. Antes el unico control visible era una × suelta y
   editar salia de tocar la fila, que no se ve por ningun lado: ahora son dos
   botones a la vista, pero DISIMULADOS (Flo, 29/8) -- sin recuadro de color y
   sin emoji, que al lado de un renglon de plata gritaban mas que el gasto.
   Los glifos son los mismos que el panel: ✎ para editar y × para sacar.
   El area tocable sigue siendo de 44px aunque el dibujo sea chico */
.acc-gasto{display:flex;gap:2px;align-self:center;flex:none}
.acc-gasto button{
  width:44px;height:44px;flex:none;border:none;background:transparent;
  display:grid;place-items:center;line-height:1;color:var(--tinta);opacity:.5;
}
.acc-gasto .editar{font-size:19px}
.acc-gasto .borrar{font-size:23px}
.acc-gasto button:active{transform:scale(.9);opacity:1}
/* la fila que esta abierta en el formulario de arriba: sin esto, al tocar el
   lapiz la pantalla scrollea al form y no queda dicho cual esta editando.
   El borde alcanza: pintarle el fondo la hacia gritar mas que las demas */
.fila.editando{border-color:var(--tinta);border-width:2px}
.fila.mov.editando{border-width:0 0 1px;background:rgba(16,69,61,.05)}
.fila.editando .acc-gasto .editar{opacity:1}

/* la cuota: el numero chico al lado del monto de una compra financiada */
.cuota-nota{
  margin:8px 0 0;padding:9px 12px;background:var(--celeste);border-radius:11px;
  font-size:14px;line-height:1.35;
}

/* glosario */
.termino{background:#fff;border:1px solid rgba(16,69,61,.16);border-radius:16px;padding:17px 19px;margin-bottom:12px}
/* como el Diccionario HSC del workbook: el termino en tinta, precedido por el
   triangulo rosa. Dibujado con bordes y no con el caracter ▶, que en iOS sale
   como emoji azul */
.termino b{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:700;color:var(--tinta);margin-bottom:5px}
.termino b::before{content:"";flex:none;width:0;height:0;border-left:11px solid var(--rosa);border-top:7px solid transparent;border-bottom:7px solid transparent}
/* la "Definicion simple" del Diccionario HSC, arriba de la explicacion larga:
   una linea, en tinta y con mas peso, que es lo primero que se lee */
.termino .simple{font-weight:600;color:var(--tinta);margin-bottom:6px}
.termino p{margin:0;font-size:15px;line-height:1.5}

/* calendario */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cel{
  aspect-ratio:1;border-radius:10px;border:2px solid rgba(16,69,61,.13);background:var(--crema);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:2px;
  min-width:0;overflow:hidden;
}
.cel .d{font-size:14px;font-weight:600;color:var(--gris);line-height:1}
.cel.lleno{background:#fff;border-color:rgba(16,69,61,.3)}
.cel.lleno .d{color:var(--tinta);font-weight:700}
.cel.hoy{border-color:var(--tinta);border-width:3px;background:#fff}
.cel.vacia{visibility:hidden;border:none;background:none}
.cel[data-enc]{cursor:pointer}
/* en celular el evento es un punto; el detalle esta en la lista de abajo */
.cel .marcas{display:flex;gap:3px;justify-content:center;flex-wrap:wrap;line-height:0}
.cel .marca{
  font-style:normal;display:block;width:7px;height:7px;border-radius:50%;
  font-size:0;color:transparent;overflow:hidden;flex:none;
}
.cel .marca.mas{background:var(--crema2);border:1px solid var(--gris)}
@media(min-width:860px){
  .cel{aspect-ratio:auto;min-height:88px;justify-content:flex-start;align-items:stretch;padding:5px 4px;gap:3px}
  .cel .d{text-align:center}
  .cel .marcas{flex-direction:column;gap:2px;margin-top:2px;line-height:1.25}
  .cel .marca{
    width:auto;height:auto;border-radius:5px;padding:3px 5px;font-size:10.5px;font-weight:700;
    color:inherit;text-align:center;white-space:nowrap;text-overflow:ellipsis;
  }
  .cel .marca.mas{background:var(--crema2);color:var(--gris);border:none}
}

.burbuja{background:#DFF3E8;border:2px solid var(--verde);border-radius:16px;border-bottom-right-radius:5px;padding:14px 16px;font-size:15px;line-height:1.45}
.legal{font-size:12.5px;line-height:1.5;color:var(--gris);margin:22px 0 56px}
@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms !important;animation-duration:.001ms !important}}

/* ============ la foto grupal del encuentro ============
   Pedido de Flo (26/8): la foto de cada encuentro como distintivo emocional.
   En la lista va del tamaño del icono que reemplaza, para que las filas no
   salten de alto; en la ficha del encuentro va entera, arriba de todo. */
.fila .ico.foto{object-fit:cover;padding:0;border:1px solid rgba(16,69,61,.16)}
.foto-enc{
  display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  border-radius:18px;margin-bottom:14px;background:var(--crema2);
}


/* ================================================================
   control de gastos -- la pasada de diseño del 29/8
   La pantalla tenia cada bloque resolviendo su espaciado por su cuenta, con
   margenes sueltos en el HTML: los titulos caian a distinta altura y las
   tarjetas no respiraban igual. Todo el ritmo vertical sale de aca.
   ================================================================ */

/* el titulo de cada seccion, siempre a la misma altura de la anterior */
.tit-seccion{
  font-family:var(--serif);font-size:19px;font-weight:400;
  margin:26px 0 12px;letter-spacing:-.01em;
}
.pie-lista{margin:12px 0 0;font-size:13.5px}

/* ---- abrir el formulario ----
   Dos botones y no uno con un desplegable: anotar un gasto y anotar un ingreso
   son dos intenciones distintas, y la de gasto es la de todos los dias -- por
   eso va primera y en verde, y la de ingreso en rosa. */
.abrir-form{display:flex;gap:9px;margin:0 0 14px}
.abrir-form .btn{flex:1;min-height:54px;padding:14px 12px;font-size:15px;margin-top:0}

/* la tarjeta del formulario, cuando esta abierto */
.form-mov{border-color:rgba(16,69,61,.3);box-shadow:0 8px 22px rgba(16,69,61,.09);margin-bottom:14px}
/* el ingreso se distingue por el borde y nada mas: no es otra pantalla */
.form-mov.es-ingreso{border-color:var(--verde);border-width:2px}
.form-cab{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.form-cab b{flex:1;font-size:16px;font-weight:700}
/* el conmutador gasto / ingreso, arriba del formulario abierto */
.seg-tipo{flex:1}
.seg-tipo button{flex:1;justify-content:center;text-align:center;font-size:15px}
.cerrar-form{
  width:40px;height:40px;margin:-8px -8px -8px 0;border-radius:50%;flex:none;
  display:grid;place-items:center;font-size:24px;line-height:1;color:var(--tinta);opacity:.5;
}
.cerrar-form:active{opacity:1;background:var(--crema2)}

/* el segmentado de personal / negocio, a lo ancho */
.seg-ancho{width:100%}
.seg-ancho button{flex:1;justify-content:center;text-align:center}

/* el filtro de arriba de la lista */
/* los margenes laterales negativos son los de .chips: sin ellos el "margin"
   de aca los pisaba y los chips quedaban corridos 20px del borde (Flo, 29/8).
   Y aire abajo, para que no se peguen a la caja del numero */
.filtro-ambito{margin:14px -20px 16px}

/* una categoria de "Donde se te va": el nombre y el monto en una linea y la
   barra abajo, con el mismo aire entre las dos que entre categoria y categoria */
.cat-fila{margin-bottom:12px}
.cat-fila .barra-papel{height:7px}
.cat-cab{display:flex;justify-content:space-between;gap:10px;font-size:15px;margin-bottom:5px}
.cat-cab b{white-space:nowrap}

/* el ingreso, en la lista del mes y en el resumen: verde, y con el + adelante.
   El color solo no alcanza -- el verde no llega a contraste como texto (§6) --
   asi que lo que lo dice es el signo */
/* gasto o ingreso se tiene que ver sin leer el renglon (Flo, 29/8). El signo
   solo no alcanzaba: en una lista de veinte, un "+" de 15px no se ve.
   Va una franja de color en el canto izquierdo -- verde el ingreso, rosa el
   gasto -- que es color en BLOQUE y no en texto, que es la regla de §6.
   El monto del ingreso ademas en verde-txt, que si cumple contraste como texto. */
/* renglones livianos (29/8): sin tarjeta blanca por fila -- doce marcos con
   sombra y esquinas eran mas dibujo que dato. Queda la linea fina entre uno y
   otro, y la franja de color en el canto, que es lo que dice gasto o ingreso */
.fila.mov{
  position:relative;overflow:hidden;padding:12px 0 12px 16px;min-height:62px;
  background:transparent;border:0;border-radius:0;border-bottom:1px solid rgba(16,69,61,.12);margin:0;
}
.fila.mov .cuerpo b{font-size:15.5px}
.fila.mov::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:2px;background:var(--rosa);
}
.fila.mov.es-ingreso::before{background:var(--verde)}
.fila.mov.es-ingreso .ico{background:transparent}
.fila.mov.es-ingreso .cuerpo b{color:var(--verde-txt)}

/* lo que entro en el mes, en bloque verde y no en un renglon mas (Flo, 29/8):
   es la otra mitad del mes y tiene que pesar como el total de arriba, que va en
   el rosa pleno de .destino.
   El verde de bloque es el OSCURO. El verde medio no sostiene texto chico ni
   siendo fondo -- tinta sobre --verde da 3.79 y el "entro en agosto" es de
   12.5px --, y sobre --verde-txt la letra crema da 5.4 y el numero blanco 6.2.
   Es la regla de §6 hasta el final: el color va en el bloque y la letra queda
   blanca, con el verde que aguanta la letra. */
.cifras .entra{background:var(--verde-txt);border-color:var(--verde-txt)}
.cifras .entra b{color:#fff}
.cifras .entra small{color:rgba(255,255,255,.92)}

/* la grabacion embebida: el player de Drive adentro de la ficha. Mas alto que
   el 16:9 del video a proposito (16/11 y un piso de 240px): la barra del player
   -- play, volumen, pantalla completa -- vive DENTRO del iframe, y con el marco
   justo al video quedaba sin lugar y no se veia (Flo, 29/8). El resto lo
   letterboxea el player en oscuro. El fondo tinta es lo que se ve el instante
   antes de cargar, que si no parpadea en crema. */
/* ⚠️ Y lleva aire ABAJO (Flo, 1/9): `.tarjeta` no trae margen de arriba, así
   que el cuadro del resumen quedaba pegado al borde del player y los dos se
   leían como una sola pieza -- la del video con un pie de página. Son dos
   cosas distintas: una se mira y la otra se lee. */
.video-enc{
  display:block;width:100%;aspect-ratio:16/11;min-height:240px;border:0;
  border-radius:16px;margin:14px 0 22px;background:var(--tinta);
}

/* la leyenda del grafico */
.leyenda{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:10px 0 0;font-size:13px;color:var(--gris)}
.leyenda .ll{width:11px;height:11px;border-radius:3px;flex:none;border:1px solid rgba(16,69,61,.2)}
.leyenda .ll.gasto{background:var(--rosa)}
.leyenda .ll.queda{background:var(--verde)}
.leyenda .ll.exceso{background:var(--coral)}
.leyenda .ll:not(:first-child){margin-left:10px}

/* ---- la barra apilada del mes ----
   Una sola columna por mes, partida en tramos. Lo que se apila es lo que ENTRO:
   abajo lo que se fue y arriba lo que quedo, que juntos son ese mes entero.
   Apilar gasto + ingreso a secas daria una columna cuya altura no significa
   nada -- no son partes de un mismo total, y el mes que mas entro se dibujaria
   igual de alto que el mes que mas se gasto. */
.meses .pila{
  width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  border-radius:6px 6px 0 0;overflow:hidden;
}
.meses .pila i{border:none;border-radius:0;background:var(--crema2)}
.meses .pila i.gastado{background:var(--rosa)}
.meses .pila i.queda{background:var(--verde)}
/* gasto mas de lo que entro: el sobrante no cabe adentro y va arriba, en coral */
.meses .pila i.exceso{background:var(--coral)}
/* el mes que todavia no tiene nada: una rayita al ras, del color del papel.
   La columna vacia del todo se lee como que el grafico se rompio, y el crema no
   se confunde con un gasto chiquito -- un gasto se dibuja en rosa */
.meses .pila i.nada{height:3px;background:var(--crema2)}
.meses div.on .pila{box-shadow:inset 0 0 0 1.5px var(--tinta)}

/* un boton que se lee como un enlace, adentro de un parrafo.
   El padding horizontal no es decorativo: sin el, el recuadro que dibuja el
   navegador al tocarlo quedaba pegado a las letras y les comia los bordes
   (Flo, 29/8). El margen negativo lo devuelve a su lugar en el renglon, para
   que el aire de adentro no lo separe del "¿No te calza ninguna?" */
.enlace{
  font:inherit;color:var(--verde-txt);text-decoration:underline;text-underline-offset:3px;
  font-weight:700;padding:5px 8px;margin:0 -3px;border-radius:9px;
  display:inline-block;line-height:1.3;
}
.enlace:active{background:rgba(81,170,114,.16)}

/* ---- la invitacion al desafio ----
   Es lo primero que ve la primera vez, asi que se lee como una carta y no como
   un formulario: el titulo a mano, y las tres salidas separadas por peso */
.invita .reto{margin-top:16px;max-width:none;gap:6px;opacity:.55}
.invita-pie{display:flex;gap:8px;margin-top:10px}
.invita-pie button{
  flex:1;min-height:46px;border-radius:12px;text-align:center;
  font-size:14px;font-weight:600;color:var(--tinta);opacity:.75;
  border:1.5px solid rgba(16,69,61,.28);background:transparent;
}
.invita-pie button:active{opacity:1;background:rgba(16,69,61,.06)}

/* ---- la hoja de la categoria nueva ----
   Sube desde abajo y no aparece en el medio: en un celular, el pulgar esta
   abajo y lo que aparece arriba obliga a estirar la mano para contestarlo. */
.tapa{
  position:fixed;inset:0;z-index:60;background:rgba(16,69,61,.42);
  animation:aparece .16s ease-out;
}
.hoja{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:61;
  width:100%;max-width:460px;background:var(--crema);
  border-radius:22px 22px 0 0;border-top:2px solid var(--tinta);
  padding:22px 20px calc(22px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 30px rgba(16,69,61,.2);
  animation:sube .2s ease-out;
}
.hoja > b{display:block;font-family:var(--serif);font-size:20px;font-weight:400}
/* las opciones del menú de una fila: renglones anchos, uno abajo del otro, con
   la línea fina entre medio -- la misma forma que la lista de movimientos de
   gastos (§4bis). Nada de tarjetas: son tres cosas para elegir, no tres datos */
.menu-lista{display:flex;flex-direction:column;margin-bottom:10px}
.menu-lista button{
  display:flex;align-items:center;gap:12px;width:100%;min-height:56px;
  padding:12px 4px;font-size:16px;font-weight:600;color:var(--tinta);
  border:none;border-bottom:1px solid rgba(16,69,61,.13);background:transparent;
}
.menu-lista button:last-child{border-bottom:none}
.menu-lista button:active{background:rgba(16,69,61,.06)}
/* los íconos van dibujados y con `currentColor`: heredan el color del renglón,
   así el de eliminar sale coral sin una regla propia */
.menu-lista .ico-menu{flex:none;opacity:.85}
/* borrar se dice en coral y NO en un botón coral: el coral es un ícono, nunca
   un fondo de botón (§6ter). Va el glifo y el texto en coral-txt */
.menu-lista button.peligro{color:var(--coral-txt)}
.hoja .chip-ico{padding:0 12px;font-size:19px}
@keyframes aparece{from{opacity:0}to{opacity:1}}
@keyframes sube{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){
  .tapa,.hoja{animation:none}
}

/* ==================== Acciones ====================
   La fila del catálogo que ya está en Mi lista se marca con bloque (rosa suave
   + borde tinta) y no con color de texto, que es la regla de §6. El "+" pasa a
   "✓" en negativo: el mismo botón dice en qué estado está y qué va a pasar si
   lo tocás de nuevo. */
.fila.sigo{background:var(--rosa-suave);border-color:var(--tinta)}
.fila .mas{
  flex:none;align-self:center;display:grid;place-items:center;
  width:32px;height:32px;border-radius:50%;border:2px solid var(--tinta);
  font-size:17px;font-weight:700;line-height:1;
}
.fila.sigo .mas{background:var(--tinta);color:#fff}
/* El marco de "Acá se mira, no se compra" se puede cerrar, así que la × necesita
   lugar propio: el título le deja el hueco a la derecha para no pasarle por
   debajo. El área tocable es de 44px aunque el glifo sea chico, que es la regla
   de la app; el ícono en tinta al 55% y sin recuadro, disimulado como el ✎ y la
   × de gastos -- una cruz con fondo de color gritaría más que la aclaración. */
.marco-acc{position:relative}
.marco-acc .mano{font-size:27px;padding-right:34px}
.marco-acc .cerrar-marco{
  position:absolute;top:4px;right:4px;width:44px;height:44px;
  border:0;background:transparent;color:rgba(16,69,61,.55);
  font-size:25px;line-height:1;border-radius:50%;display:grid;place-items:center;
}
.marco-acc .cerrar-marco:active{background:rgba(16,69,61,.10)}
/* los dos links del pie del marco en un renglón: el que lleva a algún lado se
   queda a la izquierda, donde estaba, y el de apagar el cartel va contra el
   borde derecho (Ro, 30/8). En pantalla angosta el de la derecha baja solo a su
   propio renglón, y ahí sigue alineado a la derecha */
.pie-marco{display:flex;flex-wrap:wrap;align-items:center;gap:2px 18px;margin-top:10px}
/* en el celular los dos links heredaban los 17px del cuerpo y, subrayados y en
   negrita, el pie pesaba más que la aclaración que venía a hacer (Ro, 30/8).
   Bajan a 14.5 y 13.5 -- el que lleva a algún lado sigue siendo el más grande.
   El padding sube para compensar: el área tocable no se achica con la letra. */
.pie-marco .enlace{font-size:14.5px;padding:9px 8px;margin-left:-3px}
.pie-marco .apagado{font-size:13.5px;padding:9px 6px;margin-left:auto;margin-right:-3px;
                    text-decoration-color:rgba(16,69,61,.35)}
/* "No mostrarme esto de nuevo" y "¿Por qué?" no compiten con el link que sí
   lleva a algún lado: van en el secundario, no en el verde de los enlaces, y el
   subrayado va apagado -- se sigue viendo que se toca, sin gritar */
.enlace.apagado{color:var(--gris);font-weight:600}

/* el link de vuelta que piden los términos de los widgets gratis de TradingView.
   Chico y al pie del widget, como en su snippet oficial */
.tradingview-widget-copyright{font-size:11px;text-align:center;margin:5px 0 0;line-height:1.3}
.tradingview-widget-copyright a{color:var(--gris);text-decoration:none}