/* ==========================================================================
   VigíaRespira Areandina — estilos
   Paleta y formas tomadas del diseño (PDF "CHATBOT").
   Tipografía: Outfit (licencia OFL, libre) como sustituta de Brown Std.
   ========================================================================== */

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/outfit-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/outfit-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --green: #7FB536;
  --green-2: #8AC72B;
  --green-3: #1F8A40;
  --ink: #1D3F1C;
  --text: #1D1D1B;
  --pale: #EEFFCC;
  --bg: #FDFFF8;
  --orange: #F59C2F;
  --orange-pale: #F4BD82;
  --orange-pale-2: #FFDBBB;
  --pink: #E6007E;
  --pink-pale: #E588BF;
  --pink-pale-2: #FFB6E5;
  /* Tonos oscuros de cada color para flechas y títulos sobre fondos claros
     (contraste mínimo 3:1 sobre todas las tarjetas del mismo color) */
  --green-ink: #467318;
  --orange-ink: #9A4D00;
  --pink-ink: #8C004B;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* Colores por módulo: --accent (línea/ícono), --fill (tarjeta principal), --fill2 (opciones, tono más claro) */
.c-green  { --accent-ink: var(--green-ink);  --accent: var(--green);  --fill: var(--pale);        --fill2: var(--pale);          --glyph: #B0D67E; --soft: rgba(238,255,204,.6); --btn-fg: var(--ink); }
.c-orange { --accent-ink: var(--orange-ink); --accent: var(--orange); --fill: var(--orange-pale); --fill2: var(--orange-pale-2); --glyph: #fff;    --soft: rgba(244,189,130,.6); --btn-fg: var(--ink); }
.c-pink   { --accent-ink: var(--pink-ink);   --accent: var(--pink);   --fill: var(--pink-pale);   --fill2: var(--pink-pale-2);   --glyph: #fff;    --soft: rgba(229,136,191,.6); --btn-fg: #fff; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* texto solo para lectores de pantalla */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

html, body { height: 100%; margin: 0; }
body {
  background: var(--green);
  color: var(--text);
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font-family: inherit; }
/* lo resaltado dentro de los textos: semi-negrita, se nota sin "gritar" */
strong, b { font-weight: 600; }
img { -webkit-user-drag: none; user-select: none; }

/* ------------------------------------------------------------- marco */
/* Como en el diseño: marco verde (cabecera arriba, bordes a los lados y
   abajo) y un panel claro con esquinas inferiores redondeadas donde va el
   contenido. Ocupa siempre toda la pantalla, en cualquier tamaño; en
   pantallas anchas el contenido va en una columna centrada (--col). */
:root { --col: 620px; }
.stage { min-height: 100dvh; display: flex; align-items: stretch; justify-content: stretch; }
.device {
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 9px max(20px, calc(var(--safe-b) + 8px));
  background: var(--green);
  position: relative;
  overflow: hidden;
}
.panel {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--bg);
  border-radius: 0 0 28px 28px;
  overflow: hidden;
}
/* Columna centrada: en celulares ocupa todo el ancho; en tabletas y
   computadores el contenido no se estira de lado a lado */
.view > * { width: 100%; max-width: var(--col); margin-left: auto; margin-right: auto; }
@media (min-width: 700px) {
  .device { padding-left: 14px; padding-right: 14px; }
  .panel { border-radius: 0 0 36px 36px; }
}

.side { display: none; }   /* panel lateral: solo en computador (ver el final del archivo) */

/* ------------------------------------------------------------ cabecera */
.topbar {
  flex: none;
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  padding: calc(var(--safe-t) + 30px) max(4px, calc((100% - var(--col)) / 2)) 26px;
  background: var(--green);
}
.topbar__brand { grid-column: 2; display: flex; justify-content: center; }
.topbar__logo { width: 176px; height: auto; filter: brightness(0) invert(1); }
.iconbtn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  padding: 0;
}
.iconbtn svg { width: 26px; height: 26px; }
#btn-back { grid-column: 1; }
#btn-info { grid-column: 3; justify-self: end; }
#btn-info svg { transform: rotate(90deg); }
.topbar--top #btn-back { visibility: hidden; }

/* -------------------------------------------------------------- vistas */
.view {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 16px 14px;
  background: var(--bg) url("../assets/img/waves.svg") center top / 440px auto repeat;
  outline: none;
  /* desvanece el borde inferior para sugerir que hay más contenido */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
}
.enter { animation: rise .38s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------- burbujas */
/* Borde verde grueso con un "volumen" desplazado, como en el diseño */
.bubble {
  position: relative;
  background: var(--bg);
  color: var(--ink);
  border: 3px solid var(--green);
  border-radius: 20px;
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.2;
}
.bubble p { margin: 0; }
.bubble--big {
  border-radius: 32px; padding: 20px 18px 20px 36px; font-size: 15px; line-height: 1.2;
  box-shadow: 4px -8px 0 var(--green);
}
.bubble--small {
  border-width: 4px; border-radius: 999px; padding: 4px 12px;
  font-size: 13.5px; font-weight: 600; line-height: 1.2; color: var(--text);
}
.bubble--tail-down::after {
  content: ""; position: absolute; right: 38px; bottom: -17px; width: 26px; height: 16px;
  background: var(--green); clip-path: polygon(0 0, 100% 0, 30% 100%);
}
.bubble--tail-left::after {
  content: ""; position: absolute; left: 20px; top: -13px; width: 22px; height: 12px;
  background: var(--green); clip-path: polygon(0 0, 100% 100%, 30% 100%);
}

/* ----------------------------------------------------------- bienvenida */
.welcome {
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 8px 0 24px; cursor: pointer; outline: none;
}
.welcome .bubble { width: min(259px, 100%); margin-left: 36px; }
.welcome__title { margin: 0 0 12px; font-size: 24px; font-weight: 800; line-height: 1.1; color: var(--ink); }
.welcome__mascot { align-self: flex-start; margin-left: 14px; width: min(68vw, 272px); height: auto; animation: float 3.2s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-7px) rotate(1deg); } }

/* --------------------------------------------------------------- inicio */
.home { min-height: 100%; display: flex; flex-direction: column; gap: 18px; padding-top: 0; }
/* La burbuja se ancla abajo del bloque (no arriba), así siempre queda
   separada de los botones aunque la pantalla sea más baja. */
.home__hero { position: relative; min-height: 410px; }
.home__mascot { position: absolute; left: 0; top: 76px; width: min(62vw, 257px); height: auto; display: block; }
.home__bubble {
  position: absolute; right: -6px; bottom: 12px; width: min(46vw, 181px);
  font-size: 13.5px; line-height: 1.15; padding: 10px 10px 12px 12px;
  border-width: 2.5px; border-radius: 22px; box-shadow: -5px 6px 0 var(--green);
}
.home__bubble.bubble--tail-left::after { left: 24px; top: -12px; }
.ctas { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; margin-top: auto; padding: 0 31px 4px 0; }
.ctas .opt { width: min(100%, 253px); min-height: 59px; border-radius: 999px; padding: 4px 16px 4px 15px; gap: 7px; }
.ctas .opt__label { font-size: 17.5px; font-weight: 600; line-height: 1.02; text-align: left; }
.ctas .opt__icon { width: 49px; height: 49px; }
.ctas .arrow { width: 23px; height: 23px; }

/* ------------------------------------------------------- botones-opción */
.opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 57px;
  padding: 6px 16px 6px 14px;
  background: var(--fill);
  border: 2px solid var(--accent);
  border-radius: 22px;
  color: var(--text);
  font-weight: 600; text-align: left; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.opt:hover { box-shadow: 0 5px 14px rgba(29,63,28,.13); }
.opt:active { transform: scale(.98); }
.opt__icon {
  flex: none; width: 47px; height: 47px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
}
.opt__icon img { width: 60%; height: 60%; object-fit: contain; }
.opt__icon svg { width: 56%; height: 56%; }
.numicon { font-size: 21px; font-weight: 800; line-height: 1; }
/* En el diseño el texto de los botones se recuesta a la derecha, junto a la flecha */
/* el nombre va a la izquierda, junto a su ícono (la flecha queda a la derecha) */
.opt__label { flex: 1; min-width: 0; overflow-wrap: break-word; font-size: 17.5px; line-height: 1.05; text-align: left; }
.arrow { flex: none; width: 21px; height: 21px; color: var(--accent-ink); display: grid; place-items: center; }
.arrow svg { width: 100%; height: 100%; }

/* Tarjetas del menú de módulos (sin flecha) */
.opt--noarrow .opt__label { font-size: 13px; line-height: 1.15; }
.opt__iconset { display: flex; flex: none; gap: 6px; margin-left: 12px; }
.opt--cluster { min-height: 76px; }
.opt--cluster .opt__iconset .opt__icon { width: 39px; height: 39px; }
.opt--cluster .opt__label { font-size: 16px; }
.opt--mini { min-height: 36px; padding: 3px 8px 3px 5px; gap: 6px; border-radius: 12px; }
.opt--mini .opt__icon { width: 38px; height: 38px; }
.opt--mini .opt__label { font-size: 12.5px; }
.opt--mini .opt__icon svg { width: 58%; height: 58%; }

:where(button, a, input, .welcome, .introcard--link):focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* ---------------------------------------------------- fila de la mascota */
.mrow { display: flex; align-items: flex-start; gap: 12px; margin-top: 8px; }
.mrow__mascot { flex: none; width: 76px; height: auto; margin-left: 12px; }
.mrow .bubble { margin-top: 30px; flex: 0 1 auto; max-width: calc(100% - 100px); }
/* Texto largo de presentación de un módulo: recuadro en vez de píldora */
.mrow .bubble:not(.bubble--small) { border-width: 5px; border-radius: 16px; padding: 7px 12px; font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--text); }
/* En el chat la mascota se queda fija arriba, como en el diseño */
.chat > .mrow--small {
  position: sticky; top: -6px; z-index: 2;
  margin: -6px -16px 0; padding: 10px 16px 12px;
  background: linear-gradient(180deg, var(--bg) 78%, rgba(253,255,248,0));
}

/* ------------------------------------------------ mascota animada */
/* En todas las pantallas: llega saltando desde la izquierda, saluda con el
   brazo (las rayitas parpadean) y queda en su posición de siempre.
   .m-loop (mascota de "¡Aquí estoy…!" y la de bienvenida): después sigue
   flotando y vuelve a saludar cada pocos segundos. */
.mascot-anim { display: block; height: auto; overflow: visible; cursor: pointer; transform-origin: 50% 100%; }
.mascot-anim .m-arm { transform-box: fill-box; transform-origin: 8% 92%; }
.mascot-anim.is-playing { animation: m-enter .75s cubic-bezier(.2,.9,.3,1.15) both; }
.mascot-anim.is-playing .m-arm { animation: m-wave 1.6s ease-in-out .7s both; }
.mascot-anim.is-playing .m-spark { animation: m-spark 1.6s ease-in-out .7s both; }
.mascot-anim.is-playing.m-loop { animation: m-enter .75s cubic-bezier(.2,.9,.3,1.15) both, m-bob 8s ease-in-out .75s infinite; }
.mascot-anim.is-playing.m-loop .m-arm { animation: m-wave-loop 8s ease-in-out .7s infinite; }
.mascot-anim.is-playing.m-loop .m-spark { animation: m-spark-loop 8s ease-in-out .7s infinite; }

/* El texto de la burbuja aparece cuando el robot termina de saludar.
   En las escenas en bucle se oculta justo antes de cada saludo y vuelve a
   aparecer al terminarlo (ciclo de 8 s: ~2 s de saludo, ~6 s de texto). */
.m-scene > .bubble { transform-origin: 12% 0; }
.welcome.m-scene > .bubble { transform-origin: 85% 100%; }
.m-scene.is-playing > .bubble { animation: b-in .45s cubic-bezier(.3,1.5,.5,1) 2.3s both; }
.m-scene--loop.is-playing > .bubble { animation: b-loop 8s ease-out .7s infinite both; }
@keyframes b-in {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: 1; transform: none; }
}
@keyframes b-loop {
  0%, 22.5% { opacity: 0; transform: scale(.4); }
  25%       { opacity: 1; transform: scale(1.06); }
  27%, 96%  { opacity: 1; transform: none; }
  99.5%, 100% { opacity: 0; transform: scale(.85); }
}
/* La mascota pequeña de la tarjeta de encabezado (reflejada) aparece con un
   saltito en vez de entrar de lado, y luego saluda */
.introcard__mascot.mascot-anim.is-playing { animation: m-pop .5s cubic-bezier(.3,1.6,.5,1) .3s both; }

@keyframes m-enter {
  0%   { opacity: 0; transform: translate(-70px, 6px) rotate(-14deg); }
  45%  { opacity: 1; transform: translate(6px, -16px) rotate(5deg); }
  70%  { transform: translate(0, 2px) rotate(-3deg) scale(1.03, .97); }
  85%  { transform: translate(0, -3px) rotate(1deg); }
  100% { transform: none; }
}
/* flota suavemente y, al final de cada ciclo, salta y gira sobre sí mismo
   (se agacha, da una vuelta en el aire y aterriza con un rebote) */
@keyframes m-bob {
  0%, 25%, 50%, 75%, 82% { transform: perspective(600px) translateY(0) rotateY(0) rotate(0) scale(1, 1); }
  12.5%, 37.5%, 62.5%    { transform: perspective(600px) translateY(-5px) rotateY(0) rotate(-2deg) scale(1, 1); }
  85%  { transform: perspective(600px) translateY(3px) rotateY(0) rotate(0) scale(1.06, .92); }
  89%  { transform: perspective(600px) translateY(-30px) rotateY(180deg) rotate(0) scale(.96, 1.05); }
  93%  { transform: perspective(600px) translateY(0) rotateY(360deg) rotate(0) scale(1.06, .93); }
  96%, 100% { transform: perspective(600px) translateY(0) rotateY(360deg) rotate(0) scale(1, 1); }
}
/* Saludo: el brazo gira sobre el hombro, de lado a lado, tres veces */
@keyframes m-wave {
  0%, 100% { transform: rotate(0); }
  12% { transform: rotate(-12deg); }
  28% { transform: rotate(20deg); }
  44% { transform: rotate(-12deg); }
  60% { transform: rotate(20deg); }
  76% { transform: rotate(-12deg); }
  90% { transform: rotate(4deg); }
}
/* Igual, pero en bucle: saluda al comienzo de cada ciclo y descansa el resto */
@keyframes m-wave-loop {
  0%, 24.5%, 100% { transform: rotate(0); }
  2.8%  { transform: rotate(-12deg); }
  6.7%  { transform: rotate(20deg); }
  10.7% { transform: rotate(-12deg); }
  14.6% { transform: rotate(20deg); }
  18.6% { transform: rotate(-12deg); }
  22.5% { transform: rotate(4deg); }
}
@keyframes m-spark { 0%, 100% { opacity: 1; } 20%, 60% { opacity: 0; } 40%, 80% { opacity: 1; } }
@keyframes m-spark-loop {
  0%, 22.5%, 100% { opacity: 1; transform: scale(1); }
  4.5%, 13.5% { opacity: 0; transform: scale(.7); }
  9%, 18% { opacity: 1; transform: scale(1.35); }
}
@keyframes m-pop { from { scale: 0; } to { scale: 1; } }

/* Partes extra del zorro (el robot no las tiene, así que no le afectan).
   Siempre: la cola se mueve, parpadea, mueve las orejas y balancea el brazo bajo.
   Con el saludo: inclina la cabeza. Cuando aparece el texto: mueve la boca. */
.mascot-anim .m-tail  { transform-box: fill-box; transform-origin: 100% 45%; }
.mascot-anim .m-arm2  { transform-box: fill-box; transform-origin: 78% 4%; }
.mascot-anim .m-head  { transform-box: fill-box; transform-origin: 50% 96%; }
.mascot-anim .m-ear-l { transform-box: fill-box; transform-origin: 70% 90%; }
.mascot-anim .m-ear-r { transform-box: fill-box; transform-origin: 30% 90%; }
.mascot-anim .m-eyes  { transform-box: fill-box; transform-origin: 50% 50%; }
.mascot-anim .m-mouth { transform-box: fill-box; transform-origin: 50% 10%; }
.mascot-anim .m-eye-r { transform-box: fill-box; transform-origin: 50% 50%; }

.mascot-anim.is-playing .m-tail  { animation: m-tail 1.5s ease-in-out infinite alternate; }
.mascot-anim.is-playing .m-arm2  { animation: m-arm2 3.4s ease-in-out infinite; }
.mascot-anim.is-playing .m-eyes  { animation: m-blink 4.3s ease-in-out 1s infinite; }
.mascot-anim.is-playing .m-ear-l { animation: m-ear-l 5.5s ease-in-out 1.5s infinite; }
.mascot-anim.is-playing .m-ear-r { animation: m-ear-r 5.5s ease-in-out 1.5s infinite; }
.mascot-anim.is-playing .m-head  { animation: m-head 1.6s ease-in-out .7s both; }
.mascot-anim.is-playing .m-mouth { animation: m-talk 1.2s ease-in-out 2.4s both, m-smile 8s linear .7s infinite; }
.mascot-anim.is-playing.m-loop .m-head  { animation: m-head-loop 8s ease-in-out .7s infinite; }
.mascot-anim.is-playing.m-loop .m-mouth { animation: m-talk-loop 8s ease-in-out .7s infinite, m-smile 8s linear .7s infinite; }
/* Expresión (ciclo de 8 s): sonríe mientras saluda y habla, guiña un ojo,
   se pone serio (cejas abajo, boca cerrada) y vuelve a sonreír. */
.mascot-anim.is-playing .m-eye-r { animation: m-wink 8s ease-in-out .7s infinite; }
.mascot-anim.is-playing .m-brows { animation: m-brows 8s ease-in-out .7s infinite; }
.mascot-anim.is-playing .m-mouth-serious { animation: m-serious 8s linear .7s infinite; }
/* El robot no se pone serio: su boca solo habla, siempre sonriente */
.mascot-anim.is-playing .m-mouth--always { animation: m-talk 1.2s ease-in-out 2.4s both; }
.mascot-anim.is-playing.m-loop .m-mouth--always { animation: m-talk-loop 8s ease-in-out .7s infinite; }
.mascot-anim.is-playing .m-wink-lid { animation: m-lid 8s ease-in-out .7s infinite; }

@keyframes m-wink    { 0%, 43%, 52%, 100% { transform: scaleY(1); } 46%, 49% { transform: scaleY(.08); } }
@keyframes m-brows   { 0%, 41%, 53%, 88%, 100% { transform: translateY(0); } 45%, 49% { transform: translateY(-4px); } 57%, 84% { transform: translateY(5px); } }
@keyframes m-lid     { 0%, 44%, 51%, 100% { opacity: 0; } 46%, 49% { opacity: 1; } }
@keyframes m-smile   { 0%, 53%, 89%, 100% { opacity: 1; } 56%, 86% { opacity: 0; } }
@keyframes m-serious { 0%, 53%, 89%, 100% { opacity: 0; } 56%, 86% { opacity: 1; } }
@keyframes m-tail  { from { transform: rotate(-7deg); } to { transform: rotate(10deg); } }
@keyframes m-arm2  { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(6deg); } }
@keyframes m-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes m-ear-l { 0%, 84%, 100% { transform: rotate(0); } 87% { transform: rotate(-12deg); } 90% { transform: rotate(0); } 93% { transform: rotate(-7deg); } }
@keyframes m-ear-r { 0%, 84%, 100% { transform: rotate(0); } 87% { transform: rotate(12deg); } 90% { transform: rotate(0); } 93% { transform: rotate(7deg); } }
/* cabeza: se inclina al ritmo del saludo */
@keyframes m-head {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-6deg); } 45% { transform: rotate(4deg); } 70% { transform: rotate(-6deg); }
}
/* en bucle: se inclina al saludar y, más tarde, ladea la cabeza con curiosidad */
@keyframes m-head-loop {
  0%, 22.5%, 36%, 62%, 76%, 100% { transform: none; }
  5% { transform: rotate(-6deg); } 11% { transform: rotate(4deg); } 17% { transform: rotate(-6deg); }
  26%, 32% { transform: translateY(3%); } 29% { transform: none; }
  66%, 72% { transform: rotate(8deg); }
}
/* boca: "habla" mientras aparece el texto */
@keyframes m-talk {
  0%, 100% { transform: scaleY(1); }
  15% { transform: scaleY(.45); } 30% { transform: scaleY(1); } 45% { transform: scaleY(.5); }
  60% { transform: scaleY(1); } 75% { transform: scaleY(.5); }
}
@keyframes m-talk-loop {
  0%, 24%, 40%, 100% { transform: scaleY(1); }
  26% { transform: scaleY(.45); } 28% { transform: scaleY(1); } 30% { transform: scaleY(.5); }
  32% { transform: scaleY(1); } 34% { transform: scaleY(.45); } 36% { transform: scaleY(1); } 38% { transform: scaleY(.55); }
}

/* ------------------------------------------ robot: cuerpo y reacciones */
/* Respira siempre (el pecho sube y baja, la "A" se ilumina al inhalar y
   salen nubecitas al exhalar), los audífonos brillan cuando habla, da un
   saltito de vez en cuando y reacciona a lo que pasa en la app:
   piensa (puntos), alerta (pantalla naranja y "!"), se duerme (Zzz),
   celebra al terminar un tema y guía "Respira conmigo". */
.mascot-anim { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.mascot-anim .m-body  { transform-box: fill-box; transform-origin: 50% 100%; }
.mascot-anim .m-spark { transform-box: fill-box; transform-origin: 100% 100%; }
.mascot-anim.is-robot .m-arm2 { transform-origin: 82% 5%; }
.mascot-anim .m-puff  { transform-box: fill-box; transform-origin: 100% 100%; opacity: 0; }
.mascot-anim .m-alert, .mascot-anim .m-dot, .mascot-anim .m-z { transform-box: fill-box; transform-origin: 50% 50%; }
.mascot-anim .m-closed, .mascot-anim .m-think, .mascot-anim .m-alert, .mascot-anim .m-zzz { opacity: 0; transition: opacity .3s; }
.mascot-anim .m-screen, .mascot-anim .m-phone, .mascot-anim .m-chest-a { transition: fill .6s; }
.mascot-anim .m-look, .mascot-anim .m-mouth { transition: opacity .25s; }
.mascot-anim .m-look { transform-box: fill-box; }

.mascot-anim.is-playing .m-body    { animation: m-breath 4s ease-in-out 1s infinite; }
.mascot-anim.is-playing .m-chest-a { animation: m-glow-a 4s ease-in-out 1s infinite; }
.mascot-anim.is-playing .m-puff    { animation: m-puff 4s ease-out 1s infinite; }
.mascot-anim.is-playing .m-phone   { animation: m-phone 1.2s ease-in-out 2.4s both; }
.mascot-anim.is-playing.m-loop .m-phone { animation: m-phone-loop 8s ease-in-out .7s infinite; }

@keyframes m-breath { 0%, 100% { transform: scale(1, 1); } 45% { transform: scale(1.025, 1.045); } }
@keyframes m-glow-a { 0%, 100% { fill: #E7F2C8; } 45% { fill: #FFFFFF; } }
@keyframes m-puff {
  0%, 52% { opacity: 0; transform: translate(0, 0) scale(.5); }
  62%     { opacity: .95; }
  100%    { opacity: 0; transform: translate(-35%, -30%) scale(1.15); }
}
@keyframes m-phone      { 0%, 100% { fill: #1F8A40; } 20%, 80% { fill: #74E04B; } }
@keyframes m-phone-loop { 0%, 23%, 42%, 100% { fill: #1F8A40; } 26%, 38% { fill: #74E04B; } }

/* Pensando: mientras el chat prepara la respuesta */
.vr-thinking .mascot-anim.is-robot .m-think { opacity: 1; }
.vr-thinking .mascot-anim.is-robot .m-mouth { opacity: 0; }
.vr-thinking .mascot-anim .m-look { transform: translate(0, -25%); }
.vr-thinking .mascot-anim .m-dot { animation: m-dot .9s ease-in-out infinite; }
.vr-thinking .mascot-anim .m-dot2 { animation-delay: .15s; }
.vr-thinking .mascot-anim .m-dot3 { animation-delay: .3s; }
@keyframes m-dot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-45%); } }

/* Alerta: cuando alguien describe una urgencia */
.vr-alert .mascot-anim .m-screen { fill: #FFD27A; }
.vr-alert .mascot-anim .m-alert  { opacity: 1; animation: m-alert .55s ease-in-out infinite alternate; }
.vr-alert .mascot-anim.is-robot .m-look, .vr-alert .mascot-anim.is-robot .m-mouth { opacity: 0; }
.vr-alert .mascot-anim.is-playing .m-phone { animation: m-phone-alert .5s steps(1) infinite; }
@keyframes m-alert { from { transform: rotate(-12deg) scale(1); } to { transform: rotate(-12deg) scale(1.15); } }
@keyframes m-phone-alert { 0% { fill: #E53935; } 50% { fill: #1F8A40; } }

/* Dormido: si nadie usa la app por un rato */
.vr-sleep .mascot-anim.is-robot .m-look { opacity: 0; }
.vr-sleep .mascot-anim.is-robot .m-closed { opacity: 1; }
.vr-sleep .mascot-anim .m-zzz { opacity: 1; }
.vr-sleep .mascot-anim .m-z { animation: m-z 2.4s ease-in-out infinite; }
.vr-sleep .mascot-anim .m-z2 { animation-delay: .4s; }
.vr-sleep .mascot-anim .m-z3 { animation-delay: .8s; }
.vr-sleep .mascot-anim.is-playing .m-arm,
.vr-sleep .mascot-anim.is-playing .m-spark,
.vr-sleep .mascot-anim.is-playing .m-mouth--always { animation: none; }
.vr-sleep .mascot-anim.is-playing .m-head { animation: m-doze 4s ease-in-out infinite; }
@keyframes m-z { 0% { opacity: 0; transform: translate(0, 0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(15%, -35%); } }
@keyframes m-doze { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(-9deg) translateY(2%); } }

/* Celebra al llegar al final de un tema */
.m-cheer-row { margin: 10px 0 2px; }
.m-cheer-row:not(.is-playing) > * { opacity: 0; }   /* aparece cuando se llega al final */
.mascot-anim.is-playing.m-cheer { animation: m-enter .75s cubic-bezier(.2,.9,.3,1.15) both, m-cheer .7s ease-in-out .8s 3; }
.mascot-anim.is-playing.m-cheer .m-arm   { animation: m-wave 1.1s ease-in-out .8s 2; }
.mascot-anim.is-playing.m-cheer .m-spark { animation: m-spark-loop 1.1s ease-in-out .8s 2; }
@keyframes m-cheer {
  0%   { transform: perspective(600px) translateY(0) rotateY(0) scale(1, 1); }
  40%  { transform: perspective(600px) translateY(-22px) rotateY(180deg) scale(1, 1); }
  75%  { transform: perspective(600px) translateY(0) rotateY(360deg) scale(1.05, .95); }
  100% { transform: perspective(600px) translateY(0) rotateY(360deg) scale(1, 1); }
}

/* "Respira conmigo" (mantener presionada la mascota) */
.m-breathe > .mascot-anim, .m-breathe > .mascot-anim * { animation: none !important; }
.m-breathe > .bubble { animation: none !important; opacity: 1; transform: none; font-weight: 600; }
.m-breathe .m-body { transition: transform 4s ease-in-out; }
.m-breathe.ph-in .m-body, .m-breathe.ph-hold .m-body { transform: scale(1.06, 1.12); }
.m-breathe.ph-out .m-body { transition-duration: 6s; transform: scale(1, 1); }
.m-breathe.ph-in .m-phone, .m-breathe.ph-hold .m-phone { fill: #74E04B; transition-duration: 1.5s; }
.m-breathe.ph-in .m-chest-a, .m-breathe.ph-hold .m-chest-a { fill: #FFFFFF; transition-duration: 3s; }
.m-breathe.ph-hold .mascot-anim.is-robot .m-look { opacity: 0; }
.m-breathe.ph-hold .mascot-anim.is-robot .m-closed { opacity: 1; }
.m-breathe.ph-out > .mascot-anim .m-puff { animation: m-puff-ex 6s ease-out both !important; }
@keyframes m-puff-ex {
  0%   { opacity: 0; transform: translate(0, 0) scale(.5); }
  12%  { opacity: .95; }
  80%  { opacity: .8; }
  100% { opacity: 0; transform: translate(-45%, -40%) scale(1.3); }
}

/* --------------------------------------------------------------- módulo */
/* Las tarjetas quedan abajo, junto a la barra de escritura, y la mascota
   arriba (en medio queda el fondo libre), como en el diseño. */
.module, .detail, .menu-block { display: flex; flex-direction: column; gap: 12px; }
.module { min-height: 100%; }
.module > .introcard { margin-top: auto; }

/* Tarjeta de encabezado: color del módulo + mascota asomada en la esquina */
.introcard {
  position: relative;
  display: flex; align-items: center;
  min-height: 91px;
  margin: 24px 3px 0 5px;
  padding: 12px 72px 12px 10px;
  background: var(--fill);
  border: 2px solid var(--accent);
  border-radius: 20px;
}
.introcard__text { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.1; color: var(--text); }
.introcard--long .introcard__text { font-size: 19.5px; }
.introcard__mascot {
  position: absolute; top: 4px; right: -12px;
  width: 58px; height: auto;
  /* En el mockup la mascota de esta esquina está reflejada: el brazo
     levantado queda hacia la izquierda (hacia el texto). */
  transform: scaleX(-1);
}
.introcard--link { cursor: pointer; }

.options { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px 6px; margin: 0 7px 0 15px; }
.options .opt { width: 100%; min-height: 76px; background: var(--fill2); }
.options .opt--compact {
  width: calc(50% - 3px); min-width: 0; flex-shrink: 1;
  min-height: 57px; padding: 4px 7px 4px 6px; gap: 5px;
}
.options .opt--compact .opt__icon { width: 34px; height: 34px; }
.options .opt--compact .opt__label {
  font-size: 12.5px; line-height: 1.15;
  /* Partir por palabras completas, nunca a la mitad de una palabra */
  overflow-wrap: normal; word-break: normal; hyphens: none;
}
.options .opt--compact .arrow { width: 15px; height: 15px; }
/* celulares: en las tarjetas en pareja se quita la flecha y se achica el ícono
   para que el texto (ya en 12,5 px) tenga más espacio y no se apriete */
@media (max-width: 480px) {
  .options .opt--compact { padding: 6px 10px 6px 6px; gap: 7px; }
  .options .opt--compact .opt__icon { width: 30px; height: 30px; }
  .options .opt--compact .arrow { display: none; }
}
.options .opt--noarrow { padding-right: 14px; }

/* Menú de módulos: tarjetas con el color pleno del módulo */
.options--menu .opt { background: var(--fill); }
.options--menu .opt:not(.opt--cluster):not(.opt--mini) { min-height: 57px; }
.options--menu .opt--compact .opt__icon { width: 38px; height: 38px; }
/* en el menú todas las tarjetas usan el mismo tamaño de letra e ícono, anchas o angostas */
.options--menu .opt .opt__label { font-size: 14px; line-height: 1.15; }
.options--menu .opt:not(.opt--compact):not(.opt--cluster) .opt__icon { width: 38px; height: 38px; }
.options--menu .opt:not(.opt--compact):not(.opt--cluster) .opt__label { text-align: left; }

/* Fila de Ruta/Biblioteca: más angosta y centrada */
.opt-minirow { flex: 0 0 auto; width: 100%; margin: 0; display: flex; gap: 6px; }
.opt-minirow .opt.opt--mini { width: calc(50% - 3px); flex: none; min-height: 57px; }
.opt-minirow .opt.opt--mini .opt__label { font-size: 14px; line-height: 1.15; }

/* Colores de las opciones por módulo, página por página del diseño */
.module--enfermedades .options .opt { background: var(--fill); }
.module--aire .options .opt--compact { background: #FFDDF1; }
.module--sistema .options .opt--compact { background: #FFF3E8; }
.module--riesgo .options .opt--compact { background: #FFDDF1; }

/* Ser Social Areandino: encabezado y opciones en forma de píldora, a la derecha */
.module--social .introcard {
  min-height: 59px; margin-left: 30%; border-radius: 999px; padding: 8px 60px 8px 16px;
}
.module--social .introcard__text { font-size: 19.5px; }
.module--social .introcard__mascot { top: -18px; right: -8px; }
.module--social .options { margin-left: 30%; margin-right: 3px; gap: 9px; }
.module--social .options .opt { min-height: 59px; border-radius: 999px; padding: 5px 14px 5px 11px; }
.module--social .opt__label { font-size: 13px; line-height: 1.15; }

/* ------------------------------------------------ Ruta (camino de 5 etapas) */
/* Cada etapa: tarjeta blanca con el color de su etapa, ícono en un círculo
   con su número, y una línea punteada que une las etapas del 1 al 5. */
.timeline { position: relative; list-style: none; margin: 2px 2px 0 5px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.timeline::before {
  content: ""; position: absolute; left: 35px; top: 28px; bottom: 28px;
  border-left: 3px dashed rgba(127,181,54,.6);
}
.tl { position: relative; }
.tl__card {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 12px 14px 12px 10px;
  background: #FFFFFF; color: var(--text); text-align: left; cursor: pointer;
  border: 2px solid var(--accent); border-radius: 18px;
  box-shadow: 0 4px 12px rgba(29,63,28,.07);
  transition: transform .15s ease, box-shadow .15s ease;
}
.tl__card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(29,63,28,.13); }
.tl__card:active { transform: scale(.985); }
.tl__badge { position: relative; flex: none; width: 48px; height: 48px; }
.tl__icon { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; }
.tl__icon svg, .tl__icon img { width: 55%; height: 55%; object-fit: contain; }
.tl__num {
  position: absolute; right: -6px; top: -6px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; border: 2px solid var(--accent);
  color: var(--accent-ink); font-size: 12px; font-weight: 700; line-height: 1;
}
.tl__body { flex: 1; min-width: 0; }
.tl__title { display: block; font-size: 18px; font-weight: 700; line-height: 1.1; color: var(--accent-ink); }
.tl__desc { display: block; margin-top: 3px; font-size: 14px; line-height: 1.3; }

/* ------------------------------------------------ Biblioteca (tarjetas) */
/* Tarjeta blanca con franja superior rosa, ícono y "Ver recursos". */
.libtiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 2px 0 5px; }
.libtile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  min-height: 150px; padding: 18px 14px 12px;
  background: #FFFFFF; color: var(--text); text-align: left; cursor: pointer;
  border: 2px solid var(--pink-pale-2); border-radius: 20px;
  box-shadow: inset 0 6px 0 var(--accent), 0 4px 12px rgba(29,63,28,.07);
  transition: transform .15s ease, box-shadow .15s ease;
}
.libtile:hover { transform: translateY(-2px); box-shadow: inset 0 6px 0 var(--accent), 0 8px 18px rgba(29,63,28,.13); }
.libtile:active { transform: scale(.98); }
.libtile__icon { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; }
.libtile__icon svg, .libtile__icon img { width: 55%; height: 55%; object-fit: contain; }
.libtile__title { flex: 1 0 auto; font-size: 17px; font-weight: 700; line-height: 1.15; }
.libtile__meta { font-size: 13px; font-weight: 600; color: var(--accent-ink); }

/* ----------------------------------------------------------------- chat */
.chat { display: flex; flex-direction: column; min-height: 100%; }
.thread { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.msgwrap { display: flex; flex-direction: column; gap: 8px; max-width: 90%; }
.msg--bot  { align-self: flex-end; align-items: flex-end; }
.msg--user { align-self: flex-start; align-items: flex-start; }
.msg {
  background: var(--pale); color: var(--text);
  border: 1.5px solid var(--green);
  border-radius: 22px;
  padding: 10px 16px; font-size: 15px; line-height: 1.4;
}
.msg--pill { border-radius: 24px; }
.msg--user-bubble { background: #fff; border-color: var(--ink); color: var(--ink); }
.results { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.result {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px 10px 16px;
  background: var(--fill); border: 1.5px solid var(--accent); border-radius: 20px;
  text-align: left; color: var(--text); cursor: pointer;
}
.result__txt { flex: 1; display: flex; flex-direction: column; gap: 1px; font-size: 14.5px; line-height: 1.25; }
.result__txt small { font-size: 12px; opacity: .72; }
.msg--alert { scroll-margin-top: 96px; background: #FFF1DE; border: 2px solid var(--orange); width: 100%; display: flex; flex-direction: column; gap: 10px; }
.msg--alert p { margin: 0; }
.alert__head { display: flex; align-items: flex-start; gap: 8px; font-weight: 700; color: #A45200; font-size: 15.5px; line-height: 1.3; }
.alert__ico { flex: none; display: grid; }
.alert__head svg { width: 24px; height: 24px; }
.alert__list { margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.4; }
.alert__list li + li { margin-top: 3px; }
.alert__call {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  background: var(--pink); color: #fff; text-decoration: none; font-weight: 700;
  padding: 10px 18px; border-radius: 999px;
}
.alert__call svg, .infocall svg { width: 20px; height: 20px; }
.alert__foot { font-weight: 700; font-size: 14px; }
.typing .msg { display: flex; gap: 5px; padding: 14px 18px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: blink 1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%,80%,100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }

/* ------------------------------------------------------- detalle / botones */
.card {
  background: #fff; border: 1.5px solid var(--accent); border-radius: 24px;
  padding: 18px; font-size: 16px; line-height: 1.6;
}
.card.card > * + * { margin-top: 12px; }
.card p { margin: 0; }
.card ul, .card ol { margin: 0; padding-left: 22px; }
.card li + li { margin-top: 6px; }
.note { background: #FBFDF4; border: 1px solid rgba(29,63,28,.14); border-left: 5px solid var(--accent); border-radius: 12px; padding: 10px 14px; }
.note p + p { margin-top: 8px; }
.pending { background: #FFF8E1; border: 1px dashed var(--orange); color: #7A4B00; font-size: 13.5px; line-height: 1.4; border-radius: 12px; padding: 8px 12px; }
.figure { max-width: 100%; border-radius: 14px; display: block; }

/* contenido tomado del documento: subtítulos, listas, glosario, tablas, imágenes */
.card h2, .card h3 { margin: 0; line-height: 1.25; color: var(--ink); font-weight: 700; }
.card h2 { font-size: 19px; padding-left: 11px; border-left: 4px solid var(--accent); }
.card h3 { font-size: 16.5px; }
.card.card > h2, .card.card > h3 { margin-top: 24px; }
.card.card > h2:first-child, .card.card > h3:first-child { margin-top: 0; }
.card.card > h2 + *, .card.card > h3 + * { margin-top: 8px; }
.card a { color: var(--green-ink); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.card a.btn { color: var(--btn-fg, #fff); text-decoration: none; }
.card ul ul, .card ol ul { margin-top: 6px; }
.card li::marker { color: var(--accent); }

.gl { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.gl dt { font-weight: 700; color: var(--ink); font-size: 16px; line-height: 1.25; }
.gl dd { margin: 3px 0 0; font-size: 14.5px; line-height: 1.55; padding-bottom: 12px; border-bottom: 1px solid rgba(29,63,28,.12); }
.gl div:last-child dd, .gl dd:last-child { border-bottom: 0; padding-bottom: 0; }

/* Tablas del documento */
.tablefig { margin: 0; }
.tablewrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  background: #fff; border: 1.5px solid var(--accent); border-radius: 14px;
}
.dtable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; line-height: 1.4; }
.dtable th, .dtable td {
  padding: 8px 10px; text-align: left; vertical-align: top;
  border-bottom: 1px solid rgba(29,63,28,.12);
}
.dtable td + td, .dtable th + td { border-left: 1px solid rgba(29,63,28,.08); }
.dtable tbody tr:last-child > * { border-bottom: 0; }
.dtable thead th {
  background: var(--fill); color: var(--text); font-weight: 600;
  border-bottom: 2px solid var(--accent); white-space: normal;
}
.dtable thead th + th { border-left: 1px solid rgba(29,63,28,.12); }
.dtable tbody th { font-weight: 600; color: var(--ink); background: #FBFDF4; }
.dtable tbody tr:nth-child(even) td { background: #FCFDF9; }
/* Tablas de 3 o más columnas: ancho mínimo por columna y primera columna fija al deslizar */
.dtable--wide th, .dtable--wide td { min-width: 150px; }
.dtable--wide th:first-child { min-width: 112px; max-width: 132px; position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 rgba(29,63,28,.14); }
.dtable--wide thead th:first-child { z-index: 2; }
/* Filas del semáforo: franja con su color */
.dtable tr.row--green  > th { box-shadow: inset 5px 0 0 #4CAF50; }
.dtable tr.row--yellow > th { box-shadow: inset 5px 0 0 #F2C200; }
.dtable tr.row--orange > th { box-shadow: inset 5px 0 0 #F59C2F; }
.dtable tr.row--red    > th { box-shadow: inset 5px 0 0 #E53935; }
.dtable tr.row--purple > th { box-shadow: inset 5px 0 0 #8E44AD; }
.dtable--wide tr[class^="row--"] > th:first-child { box-shadow: inset 5px 0 0 var(--row), 1px 0 0 rgba(29,63,28,.14); }
.dtable tr.row--green  { --row: #4CAF50; } .dtable tr.row--yellow { --row: #F2C200; }
.dtable tr.row--orange { --row: #F59C2F; } .dtable tr.row--red    { --row: #E53935; }
.dtable tr.row--purple { --row: #8E44AD; }
.tablehint { display: none; margin-top: 5px; text-align: center; font-size: 12.5px; color: #5B6551; }
.is-scroll .tablehint { display: block; }

/* Introducción de la Ruta (antes de las etapas) */
.ruta__intro { padding: 16px; font-size: 15px; line-height: 1.5; }

.fig { margin: 0; }
.figbtn { display: block; width: 100%; padding: 0; background: #fff; border: 1.5px solid var(--accent); border-radius: 14px; overflow: hidden; cursor: zoom-in; }
/* las imágenes nunca se estiran más allá de su tamaño real (se verían borrosas) */
.figbtn .figure { width: auto; max-width: 100%; height: auto; margin: 0 auto; border-radius: 0; }
.fig figcaption { margin-top: 5px; text-align: center; font-size: 12.5px; color: #5E625A; }
.fig figcaption > span { display: block; }
.fig__title { margin: 0 0 8px; text-align: center; font-size: 16px; font-weight: 700; color: var(--ink); }
.fig__caption { font-size: 14px; font-weight: 600; color: var(--text); }
.fig__source { font-size: 12.5px; overflow-wrap: anywhere; }
.fig__source a { color: var(--green-ink); }

.flow, .flow ul { list-style: none; padding-left: 0 !important; }
.flow ul { margin: 8px 0 0 8px; padding-left: 12px !important; border-left: 2px solid var(--accent); }
.flow li + li { margin-top: 10px; }

dialog.zoom { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: rgba(15,30,14,.94); }
dialog.zoom::backdrop { background: rgba(15,30,14,.94); }
dialog.zoom .zoom__close { position: fixed; top: calc(10px + var(--safe-t)); right: 12px; z-index: 2; min-height: 40px; padding: 6px 18px; background: #fff; color: var(--ink); border-color: #fff; }
.zoom__scroll { width: 100%; height: 100%; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 56px 8px 16px; }
.zoom__img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; background: #fff; border-radius: 8px; cursor: zoom-in; }
.zoom--full .zoom__scroll { align-items: flex-start; justify-content: flex-start; }
.zoom--full .zoom__img { max-width: none; max-height: none; width: 220%; cursor: zoom-out; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 20px;
  background: var(--accent); color: var(--btn-fg, #fff);
  border: 1.5px solid var(--accent); border-radius: 999px;
  font-size: 15px; font-weight: 600; line-height: 1.15; text-align: center; text-decoration: none; cursor: pointer;
}
.btn--ghost { background: transparent; color: var(--ink); }
/* documento anexo descargable (ej. la ficha de notificación en Excel) */
.anexo { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 1.5px solid #D5DAC6; border-radius: 14px; background: #F6F8F0; }
.anexo__tag { flex: none; display: flex; align-items: center; justify-content: center; width: 52px; height: 60px; border-radius: 6px 16px 6px 6px; background: #1D6F42; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.anexo__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.anexo__title { font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.anexo__text { margin: 0; font-size: 14.5px; line-height: 1.45; }
.anexo__tag--pdf { background: #B3261E; }
.anexo__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.card .anexo a.btn--ghost { background: #fff; color: var(--ink); }
.anexo__btn { min-height: 42px; padding: 8px 18px; font-size: 14.5px; }
.btn--off { background: #ECEFE4; border-color: #D5DAC6; color: #7C826E; cursor: default; }
.actions { display: flex; flex-direction: column; gap: 10px; padding-bottom: 4px; }

/* ------------------------------------------------------------- biblioteca */
.reslist { display: flex; flex-direction: column; gap: 12px; }
.res { background: #fff; border: 1.5px solid var(--accent); border-radius: 20px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.res h2 { margin: 4px 0 0; font-size: 16.5px; line-height: 1.25; }
.res p { margin: 0; font-size: 14px; color: #4a4f3f; line-height: 1.45; }
.res .btn { align-self: flex-start; min-height: 40px; padding: 6px 18px; font-size: 14px; }
.chip { display: inline-block; background: var(--fill); border: 1px solid var(--accent); border-radius: 999px; padding: 2px 11px; font-size: 12px; font-weight: 600; }

/* --------------------------------------------------------------- créditos */
.credits__card { padding: 14px 16px; font-size: 14.5px; line-height: 1.45; }
.credits__card.card > * + * { margin-top: 8px; }
.credits__card h2 { font-size: 17px; color: var(--green-ink); }
.credits__foot { margin: 2px 0 4px; text-align: center; font-size: 12.5px; color: #5B6551; }

/* ------------------------------------------------------- barra de escritura */
.inputbar {
  flex: none; display: flex; align-items: center; gap: 7px;
  width: calc(100% - 44px); max-width: calc(var(--col) - 44px);
  margin: 6px auto 20px;
  padding: 9px 14px;
  background: #fff; border: 2px solid var(--green); border-radius: 999px;
}
.inputbar:focus-within { box-shadow: 0 0 0 3px rgba(127,181,54,.35); }
.inputbar input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  padding: 8px 2px; font-family: inherit; font-size: 14px; color: var(--text);
}
.inputbar input::placeholder { color: #6B7560; font-weight: 600; font-size: 12.5px; }
.inputbar__dots, .inputbar__send {
  flex: none; width: 37px; height: 37px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; background: var(--green); color: #fff; cursor: pointer;
}
.inputbar__dots svg { width: 22px; height: 22px; }
.inputbar__send svg { width: 22px; height: 22px; margin-left: 2px; }
.inputbar__send:active, .inputbar__dots:active { transform: scale(.93); }

/* --------------------------------------------------------------- diálogo */
dialog#info {
  max-height: 88dvh; overflow-y: auto;
  width: min(92vw, 360px); border: 2px solid var(--green); border-radius: 26px;
  padding: 22px 20px 18px; background: var(--bg); color: var(--ink);
}
dialog#info::backdrop { background: rgba(29,63,28,.5); }
dialog#info h2 { margin: 0 0 8px; font-size: 20px; }
dialog#info p { margin: 0 0 12px; font-size: 15px; line-height: 1.5; }
dialog#info .info__body ul { margin: 0 0 12px; padding-left: 20px; font-size: 15px; line-height: 1.5; }
dialog#info .info__body li + li { margin-top: 6px; }
dialog#info .btn { width: 100%; margin-top: 8px; }
.infocall { background: var(--pink); border-color: var(--pink); color: #fff; }
.tip { font-size: 13px !important; opacity: .8; }

/* Celulares pequeños o de poca altura: mascota y espacios más compactos */
@media (max-height: 700px), (max-width: 340px) {
  .home__hero { min-height: 300px; }
  .home__mascot { top: 20px; width: 190px; }
  .home__bubble { bottom: 8px; font-size: 12.5px; }
  .welcome__mascot { width: 180px; }
  .ctas .opt { min-height: 54px; }
  .ctas .opt__label { font-size: 15.5px; }
  .introcard__text { font-size: 19.5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------ computador (horizontal) */
/* Solo en pantallas anchas y horizontales: dos paneles. A la izquierda la
   mascota grande con su burbuja y el menú de módulos; a la derecha el
   contenido, más grande y aprovechando el ancho. */
@media (min-width: 1024px) and (orientation: landscape) {
  :root { --col: 860px; }
  .device { padding: 0 16px 16px; }
  .topbar { padding-left: 28px; padding-right: 28px; }
  .topbar__logo { width: 210px; }
  .panel {
    display: grid;
    grid-template-columns: clamp(290px, 27vw, 390px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "side view" "side input";
    border-radius: 0 0 36px 36px;
  }
  #view { grid-area: view; padding: 18px 36px 22px; }
  .inputbar { grid-area: input; }
  body[data-screen="welcome"] .panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "view" "input"; }
  body[data-screen="welcome"] .side { display: none; }

  /* panel lateral */
  .side {
    grid-area: side; min-height: 0;
    display: flex; flex-direction: column; gap: 12px;
    padding: 18px 16px 16px;
    background: linear-gradient(180deg, #F3FAE3, #EAF4D6);
    border-right: 2px solid rgba(127,181,54,.35);
  }
  .side__scene { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .side__bubble { width: 100%; max-width: 320px; font-size: 15px; line-height: 1.3; padding: 12px 16px; }
  .side__bubble.bubble--tail-down::after { right: calc(50% - 13px); }
  .side__mascot { width: clamp(130px, 12vw, 190px); height: auto; margin-top: 12px; }
  .side__nav { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; padding: 2px 4px 2px 0; }
  .side__item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border: 2px solid transparent; border-radius: 16px;
    color: var(--text); text-decoration: none; font-size: 14.5px; font-weight: 600; line-height: 1.15;
    transition: background .15s, border-color .15s;
  }
  .side__item:hover { background: var(--fill); }
  .side__item.is-active { background: var(--fill); border-color: var(--accent); }
  .side__icon { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; }
  .side__icon img, .side__icon svg { width: 58%; height: 58%; object-fit: contain; }

  /* la mascota de cada pantalla ya está en el panel lateral */
  .view .mrow:not(.m-cheer-row), .chat > .mrow--small { display: none; }
  .module > .introcard { margin-top: 6px; }
  .thread { padding-top: 6px; }

  /* contenido más grande */
  .view > * { zoom: 1.1; }
  .options { gap: 12px; }
  .options .opt, .options .opt--compact { width: calc(50% - 6px); }
  /* en dos columnas todas las opciones tienen el mismo tamaño */
  .options .opt--compact { min-height: 76px; padding: 6px 16px 6px 14px; gap: 10px; }
  .options .opt--compact .opt__icon { width: 47px; height: 47px; }
  .options .opt--compact .opt__label { font-size: 16px; line-height: 1.1; }
  .options .opt--compact .arrow { width: 21px; height: 21px; }
  .options--menu .opt--compact .opt__label, .options--menu .opt:not(.opt--compact):not(.opt--cluster) .opt__label { font-size: 16px; }
  .opt-minirow { width: 100%; }
  .opt-minirow .opt.opt--mini { min-height: 56px; }
  .opt-minirow .opt.opt--mini .opt__icon { width: 38px; height: 38px; }
  .opt-minirow .opt.opt--mini .opt__label { font-size: 14px; }
  .module--social .introcard, .module--social .options { margin-left: 0; }
  .card { font-size: 17px; }

  /* inicio: presentación y tres accesos grandes */
  .home { justify-content: center; gap: 28px; }
  .home__hero { min-height: 0; }
  .home .home__mascot { display: none; }
  .home__hero > .bubble.home__bubble {
    position: static; width: auto; animation: none; opacity: 1; transform: none;
    font-size: 20px; line-height: 1.4; padding: 26px 30px; border-radius: 28px; box-shadow: -6px 7px 0 var(--green);
  }
  .home__bubble.bubble--tail-left::after { display: none; }
  .ctas { flex-direction: row; justify-content: center; align-items: stretch; flex-wrap: wrap; gap: 16px; margin-top: 0; padding: 0; }
  .ctas .opt { width: 230px; min-height: 150px; flex-direction: column; justify-content: center; gap: 12px; padding: 20px 16px; border-radius: 28px; }
  .ctas .opt__label { text-align: center; font-size: 19px; }
  .ctas .opt__icon { width: 60px; height: 60px; }
  .ctas .arrow { display: none; }
}
@media (min-width: 1440px) and (min-height: 820px) and (orientation: landscape) {
  .view > * { zoom: 1.22; }
  .side__item { font-size: 15.5px; padding: 8px 12px; }
  .side__icon { width: 38px; height: 38px; }
}
@media (min-width: 1024px) and (max-height: 760px) and (orientation: landscape) {
  .side__mascot { width: 110px; margin-top: 8px; }
  .side__bubble { font-size: 13.5px; padding: 9px 12px; }
  .topbar { padding-top: calc(var(--safe-t) + 18px); padding-bottom: 16px; }
}

/* Computador: el contenido empieza arriba (no pegado a la barra de escritura)
   y el menú de módulos es una cuadrícula de 3 columnas con tarjetas iguales:
   ícono arriba y nombre centrado debajo. */
@media (min-width: 1024px) and (orientation: landscape) {
  #view .chat { min-height: 0; }
  #view .thread { margin-top: 0; padding-top: 4px; }
  #view .menu-block .introcard { margin: 0 0 4px; min-height: 76px; }
  #view .options--menu {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
    margin: 0;
  }
  #view .options--menu .opt-minirow { display: contents; }
  #view .options--menu .opt {
    width: auto; min-height: 108px; margin: 0;
    flex-direction: column; justify-content: center; align-items: center; gap: 10px;
    padding: 16px 14px; border-radius: 22px; text-align: center;
  }
  #view .options--menu .opt .opt__label { flex: none; font-size: 16px; line-height: 1.2; text-align: center; }
  #view .options--menu .opt .opt__icon { width: 52px; height: 52px; }
  #view .options--menu .opt__iconset { margin: 0; gap: 6px; }
  #view .options--menu .opt__iconset .opt__icon { width: 42px; height: 42px; }

}

/* Computador: fondo liso con un degradado muy suave (sin ondas). Va en todo
   el panel (contenido y barra de escritura) para que no quede una franja de
   otro color entre ambos. */
@media (min-width: 1024px) and (orientation: landscape) {
  .panel { background: radial-gradient(120% 90% at 60% 0%, #FFFFFF 0%, #FBFEF4 45%, #EDF6DA 100%); }
  #view { background: transparent; }
}

/* Menú de módulos: "Módulo N", un solo ícono y cantidad de temas. En el
   celular no se muestran (el menú queda como en el diseño). */
.opt__kicker, .opt__meta, .opt__icon.opt__icon--single { display: none; }

/* Computador: tarjetas blancas con franja superior del color del módulo,
   sombra suave y un leve "salto" al pasar el mouse. 4 columnas (2 filas
   exactas para los 8 módulos); en pantallas medianas, 2 columnas. */
@media (min-width: 1024px) and (orientation: landscape) {
  #view .options--menu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  #view .options--menu .opt {
    min-height: 0; align-items: flex-start; justify-content: flex-start; gap: 4px;
    padding: 16px 16px 12px; text-align: left;
    background: #FFFFFF; border: 1.5px solid rgba(29,63,28,.10); border-radius: 20px;
    box-shadow: inset 0 6px 0 var(--accent), 0 6px 18px rgba(29,63,28,.08);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  #view .options--menu .opt:hover,
  #view .options--menu .opt:focus-visible {
    transform: translateY(-4px);
    box-shadow: inset 0 6px 0 var(--accent), 0 14px 28px rgba(29,63,28,.15);
  }
  #view .options--menu .opt .opt__icon { width: 48px; height: 48px; margin: 2px 0 8px; }
  #view .options--menu .opt__iconset { display: none; }
  #view .options--menu .opt__icon.opt__icon--single { display: grid; }
  #view .options--menu .opt__kicker {
    display: block; font-size: 12px; font-weight: 600; letter-spacing: .07em;
    text-transform: uppercase; color: var(--accent-ink);
  }
  #view .options--menu .opt .opt__label { flex: 1 0 auto; font-size: 17px; font-weight: 700; line-height: 1.2; text-align: left; color: var(--text); }
  #view .options--menu .opt__meta { display: block; margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--accent-ink); }
}
@media (min-width: 1280px) and (orientation: landscape) {
  #view .options--menu { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Computador: la Biblioteca en 4 columnas en pantallas grandes */
@media (min-width: 1280px) and (orientation: landscape) {
  #view .libtiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Celulares: íconos algo más pequeños en el menú de módulos para que los
   nombres (13 px) quepan en menos líneas */
@media (max-width: 480px) {
  .options--menu .opt--compact .opt__icon,
  .opt-minirow .opt.opt--mini .opt__icon { width: 32px; height: 32px; }
  .opt--cluster .opt__iconset .opt__icon { width: 34px; height: 34px; }
  .opt--cluster .opt__iconset { gap: 4px; margin-left: 6px; }
  .options--menu .opt.opt--compact, .opt-minirow .opt.opt--mini { padding-left: 8px; gap: 8px; }
}