/* ============================================================
   MEMORIALIS — identidad aplicada a la aplicación
   Fuente: MANUAL_VISUAL_MEMORIALIS. Los hex son los del manual,
   sin retocar.

   Concepto: "El Ciclo de la Vida y el Recuerdo Eterno".
   Tono:     empático, profesional, sereno y respetuoso.

   La landing es editorial: tipos grandes y aire. Esto es una
   herramienta que se usa de pie, con una mano y con prisa. Misma
   marca, otra densidad.
   ============================================================ */

/* ---------- Tipografía ----------
   Minion Variable Concept es de Adobe y no tiene licencia web;
   se sustituye por EB Garamond, la humanista antigua más cercana.
   Ya se hizo así en la landing: las dos piezas tienen que
   parecerse. Montserrat es la del manual, tal cual. */
@font-face{
  font-family:"EB Garamond";font-style:normal;font-weight:400 600;
  src:url("/assets/fuentes/EBGaramond.woff2") format("woff2");font-display:swap;
}
@font-face{
  font-family:"EB Garamond";font-style:italic;font-weight:400 600;
  src:url("/assets/fuentes/EBGaramond-Italic.woff2") format("woff2");font-display:swap;
}
@font-face{
  font-family:Montserrat;font-style:normal;font-weight:400 600;
  src:url("/assets/fuentes/Montserrat.woff2") format("woff2");font-display:swap;
}

:root{
  /* ---------- Colores del manual, exactos ---------- */
  --marino:#1c1f40;   /* Azul marino profundo — formalidad y solemnidad */
  --musgo:#6d852c;    /* Verde musgo — naturaleza, paz, continuidad */
  /* El musgo de marca da 3,51:1 sobre crema: vale para elementos gráficos, que
     piden 3:1, pero NO para texto pequeño, que pide 4,5:1. Este es el mismo
     matiz nueve pasos más oscuro: 4,66:1 sobre crema, 5,01:1 sobre tarjeta.
     Los enlaces y el texto en verde usan éste; los iconos siguen con --musgo. */
  --musgo-enlace:#5c7025;
  --verde:#a0b545;
  --crema:#efecdd;    /* Crema amanecer — "calidez más suave que el blanco puro" */
  --ceniza:#5f5f5f;   /* Gris ceniza — neutralidad */
  --dorado:#c2a25c;   /* Dorado luz del recuerdo — "detalles sutiles, relieves o bordes" */

  /* ---------- Roles de interfaz ---------- */
  --fondo:var(--crema);
  --tarjeta:#f6f4ea;
  --tinta:var(--marino);
  --tinta-suave:#5c5849;
  --tinta-tenue:#6b6656;
  --franja:var(--marino);
  --franja-tinta:var(--crema);

  --filete:rgba(28,31,64,.13);
  --filete-fuerte:rgba(28,31,64,.24);
  --filete-oro:rgba(194,162,92,.55);   /* el dorado sólo como borde, como manda el manual */

  --accion:#5a6e24;          /* botón principal: musgo oscurecido para contraste AA */
  --accion-tinta:#fff;

  /* ---------- Estados ----------
     Derivados de la paleta, no importados. Un rojo de semáforo y un
     ámbar de aviso genéricos se pelearían con el marino y el crema, y
     el resultado parecería otra marca dentro de la misma pantalla.

     El dorado es literalmente "luz del recuerdo": para llamar la
     atención ya sirve. Se oscurece sólo lo justo para que el texto
     pase AA sobre crema. */
  --critico:#8c2f2b;         /* óxido: alarma sin gritar */
  --critico-fondo:#f7e9e6;
  --atencion:#8a6d24;        /* el dorado, llevado a contraste legible */
  --atencion-fondo:#f6efdc;
  --bien:#4d5f1f;            /* musgo oscuro */
  --bien-fondo:#eaeedb;

  /* ---------- Medidas ----------
     Más apretadas que en la landing: esto se lee en un teléfono
     modesto, de pie, no en un portátil con calma. */
  --gutter:1rem;
  --radio:10px;
  --sombra:0 1px 2px rgba(28,31,64,.05), 0 10px 24px -16px rgba(28,31,64,.35);
  --barra-alta:56px;         /* barra superior */
  --barra-baja:64px;         /* navegación inferior, en la zona del pulgar */
  --diana:44px;              /* diana táctil mínima */
  --grano:.05;               /* la textura de lino del manual, muy tenue */
}

/* El manual es de una sola pieza: crema y marino, con luz cálida.
   No hay versión oscura, y forzarla inventaría una marca que no existe. */
:root{color-scheme:light}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--fondo);
  color:var(--tinta);
  font-family:Montserrat,"Segoe UI",system-ui,sans-serif;
  font-size:15px;
  line-height:1.55;
  -webkit-text-size-adjust:100%;
  /* que el contenido no quede debajo de la barra de gestos ni del notch */
  padding-bottom:calc(var(--barra-baja) + env(safe-area-inset-bottom));
}

/* La textura de lino que atraviesa todo el manual. Muy suave: aquí es
   fondo de trabajo, no portada. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  opacity:var(--grano);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,h2,h3,.display{
  font-family:"EB Garamond",Georgia,"Times New Roman",serif;
  font-weight:500;line-height:1.2;text-wrap:balance;margin:0 0 .5rem;
}

/* El manual pone MEMORIALIS con tracking 400 (0.4em). Se respeta
   sólo en la marca; en un rótulo de interfaz sería ilegible. */
.marca-texto{
  font-family:"EB Garamond",Georgia,serif;
  letter-spacing:.4em;text-transform:uppercase;
}

.rotulo{
  font-size:.75rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-tenue);
}

a{color:var(--accion-texto,#4d5f1f)}
:focus-visible{outline:2px solid var(--musgo);outline-offset:2px;border-radius:4px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ============================================================
   ARMAZÓN — la marca manda, el comportamiento es de Android
   ============================================================ */

/* La barra de arriba identifica; la de abajo se usa. Por eso una es
   delgada y la otra tiene dianas grandes. */
/* El logotipo, arriba a la izquierda. Es un enlace al inicio, así que tiene
   que cumplir la diana táctil de 44 px aunque el dibujo mida menos. */
.marca{
  display:flex;align-items:center;gap:.7rem;
  min-height:var(--diana);
  color:inherit;text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.marca-logo{flex:none;height:36px;width:auto;display:block}
/* El RIF sale de la fila del logotipo y baja a su propia línea. Con el nombre
   Y el RIF apilados al lado, el logotipo competía con dos renglones de texto y
   toda la cabecera se leía como una sola línea horizontal larga. */
.rif-barra{
  /* El filete dorado cierra la franja aquí, no entre el logotipo y el RIF:
     ahí partía en dos un bloque que tiene que leerse como uno solo. */
  border-bottom:1px solid var(--filete-oro);
  position:sticky;top:calc(var(--barra-alta) + env(safe-area-inset-top));z-index:19;
  margin:0;padding:0 var(--gutter) .45rem;
  background:var(--franja);color:color-mix(in srgb, var(--franja-tinta) 62%, transparent);
  font:400 .75rem/1.2 Montserrat,"Segoe UI",system-ui,sans-serif;letter-spacing:.03em;
}
/* Por debajo de 360 px el nombre estorba: manda el símbolo. */
@media (max-width:359px){ .marca-nombre{display:none} .marca-logo{height:38px} }

.barra-alta{
  position:sticky;top:0;z-index:20;
  height:var(--barra-alta);
  display:flex;align-items:center;gap:.75rem;
  padding:0 var(--gutter);
  padding-top:env(safe-area-inset-top);
  background:var(--marino);color:var(--crema);
}
.barra-alta .marca-nombre{
  font-family:"EB Garamond",Georgia,serif;font-size:1rem;
  letter-spacing:.26em;text-transform:uppercase;line-height:1;
}
.barra-alta .rif{
  display:block;font-size:.75rem;letter-spacing:.05em;
  color:rgba(239,236,221,.7);margin-top:.15em;
}
.barra-alta svg{width:26px;height:26px;flex:none}
.barra-alta .a-la-derecha{margin-left:auto;display:flex;gap:.25rem}

/* NAVEGACIÓN INFERIOR — en la zona del pulgar.
   Arriba obliga a recolocar la mano en un teléfono grande, y el vendedor
   la usa de pie, con una mano y con prisa. */
.barra-baja{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  background:var(--tarjeta);
  border-top:1px solid var(--filete);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -1px 12px rgba(28,31,64,.06);
}
.barra-baja .tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.2rem;min-height:var(--barra-baja);
  background:none;border:0;padding:.35rem .25rem;
  text-decoration:none;color:var(--tinta-tenue);
  /* 12 px: el suelo tipográfico fijado en la auditoría. Estaba a .66rem
     (10,56 px) y ahí una etiqueta de pestaña ya no se lee de un vistazo. */
  font:500 .75rem/1 Montserrat,"Segoe UI",system-ui,sans-serif;
  letter-spacing:.02em;
  -webkit-tap-highlight-color:transparent;
  /* Sólo se anima el toque, y rápido. La navegación entre pestañas NO: se usa
     decenas de veces al día y ahí una animación se percibe como lentitud. */
  transition:transform .14s cubic-bezier(.23,1,.32,1);
}
.barra-baja .tab svg{width:23px;height:23px;fill:currentColor;flex:none}
.barra-baja .tab:active{background:rgba(109,133,44,.08);transform:scale(.94)}
.barra-baja .tab:focus-visible{outline:2px solid var(--accion);outline-offset:-2px}
/* Activo: color, peso y filete. Nunca sólo color. */
.barra-baja .tab--activo{color:var(--accion);font-weight:700;box-shadow:inset 0 2px 0 0 var(--accion)}
.barra-baja .tab--activo svg{transform:translateY(-1px)}
/* En un dedo no existe el hover, y en táctil se dispara al tocar. */
@media (hover:hover) and (pointer:fine){ .barra-baja .tab:hover{color:var(--tinta)} }
@media (prefers-reduced-motion:reduce){ .barra-baja .tab{transition:none} .barra-baja .tab:active{transform:none} }

/* El botón grande del vendedor: "Nueva afiliación" es el 90 % de lo que hace,
   así que no puede ser un icono más de la fila. */
.barra-baja .principal{color:var(--accion)}
.barra-baja .principal svg{width:34px;height:34px;margin-top:-6px}

main{position:relative;z-index:1;padding:var(--gutter)}
.pantalla{max-width:38rem;margin-inline:auto}
h1{font-size:clamp(1.6rem,5.5vw,2.1rem);margin:.25rem 0 1.25rem}

/* Tarjeta de aviso, con el nivel a la izquierda en una franja de color: se
   distingue de un vistazo sin depender del color solo. */
.aviso{
  display:flex;gap:.9rem;padding:.95rem 1rem;margin-bottom:.75rem;
  border-radius:var(--radio);border:1px solid var(--filete);
  background:var(--tarjeta);
}
.aviso::before{content:"";flex:none;width:3px;border-radius:2px;background:var(--filete-fuerte)}
.aviso--critico{background:var(--critico-fondo);border-color:rgba(140,47,43,.25)}
.aviso--critico::before{background:var(--critico)}
.aviso--atencion{background:var(--atencion-fondo);border-color:rgba(138,109,36,.28)}
.aviso--atencion::before{background:var(--atencion)}
.aviso h2{
  font-family:Montserrat,sans-serif;font-size:.92rem;font-weight:600;
  margin:0 0 .2rem;color:var(--tinta);line-height:1.35;
}
.aviso p{margin:0;font-size:.85rem;line-height:1.5;color:var(--tinta-suave)}
.aviso .que-hacer{
  display:block;margin-top:.45rem;font-weight:600;color:var(--accion);
}
.aviso-icono{flex:none;width:20px;height:20px;margin-top:.1rem}
.aviso--critico .aviso-icono{color:var(--critico)}
.aviso--atencion .aviso-icono{color:var(--atencion)}

/* ── El panel del menú ───────────────────────────────────────────────────────
   Sube desde abajo, no baja desde arriba: en un teléfono grande el pulgar
   llega abajo y no arriba. Es un <dialog> nativo, así que el foco queda
   atrapado y Escape cierra sin que haya que programarlo. */
.panel{
  width:100%;max-width:520px;
  margin:auto auto 0;              /* pegado abajo, centrado en pantallas anchas */
  padding:0;border:0;background:none;
  max-height:88dvh;
  overflow:visible;
}
.panel::backdrop{
  background:color-mix(in srgb, var(--marino) 62%, transparent);
  opacity:0;transition:opacity .28s ease-out;
}
.panel.abierto::backdrop{opacity:1}

.panel-caja{
  background:var(--crema);
  border-radius:18px 18px 0 0;
  border-top:2px solid var(--dorado);
  padding:.5rem var(--gutter) calc(1rem + env(safe-area-inset-bottom));
  max-height:88dvh;overflow-y:auto;
  transform:translateY(100%);
  /* La curva de cajón de iOS: sale rápido y frena al final. */
  transition:transform .34s cubic-bezier(.32,.72,0,1);
}
.panel.abierto .panel-caja{transform:translateY(0)}

.panel-asa{
  width:38px;height:4px;border-radius:2px;
  background:color-mix(in srgb, var(--marino) 24%, transparent);
  margin:.4rem auto .9rem;
}


.panel-rotulo{
  margin:1.2rem 0 .4rem;
  font:600 .75rem/1 Montserrat,"Segoe UI",system-ui,sans-serif;
  letter-spacing:.12em;text-transform:uppercase;
  color:color-mix(in srgb, var(--marino) 52%, transparent);
}
.panel-pendiente{list-style:none;margin:0;padding:0}
.panel-pendiente li{
  display:flex;align-items:center;gap:.85rem;
  min-height:40px;padding:0 .35rem;
  font:400 .92rem/1.2 Montserrat,"Segoe UI",system-ui,sans-serif;
  color:color-mix(in srgb, var(--marino) 48%, transparent);
}
.panel-pendiente svg{width:20px;height:20px;fill:currentColor;flex:none;opacity:.7}

.panel-cerrar{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;min-height:var(--diana);margin-top:1.1rem;
  background:none;border:1px solid color-mix(in srgb, var(--marino) 20%, transparent);
  border-radius:10px;color:var(--tinta);
  font:600 .92rem Montserrat,"Segoe UI",system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;
}
.panel-cerrar svg{width:18px;height:18px;fill:currentColor}
.panel-cerrar:active{transform:scale(.985)}

@media (prefers-reduced-motion:reduce){
  .panel-caja{transition:none;transform:none}
  .panel::backdrop{transition:none;opacity:1}
}


/* Que el contenido no quede debajo de la barra. El +1px es el filete. */
body{padding-bottom:calc(var(--barra-baja) + 1px + env(safe-area-inset-bottom))}

.panel-pie{
  margin:1.4rem 0 0;
  font:400 .78rem/1.5 Montserrat,"Segoe UI",system-ui,sans-serif;
  color:color-mix(in srgb, var(--marino) 45%, transparent);
}

@media (prefers-reduced-motion:reduce){ .tab{transition:none} .tab:active{transform:none} }

/* Clases que sustituyen a los estilos en línea: sin ellos la CSP no necesita
   'unsafe-inline' para los estilos. */
.rejilla-planes{display:grid;gap:.6rem}
.rotulo-planes{margin-top:2.5rem;scroll-margin-top:calc(var(--barra-alta) + 1rem)}

/* El sprite de iconos: se oculta sin display:none, que en algunos navegadores
   ha dado problemas con <use>, y sin style en línea, que la CSP bloquearía. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ── Pantalla del cliente, adaptada de SOFI ──────────────────────────────────
   El orden lo decide la urgencia: saludo, socorro, atajos, plan. */
.saludo{
  font-family:"EB Garamond",Georgia,serif;font-size:1.7rem;font-weight:500;
  margin:.2rem 0 1.1rem;color:var(--tinta);
}

/* El bloque de asistencia. Va primero y pesa: es marino, que es el máximo peso
   visual del sistema, y su botón ocupa el ancho entero. */
.socorro{
  background:var(--marino);color:var(--crema);
  border-radius:14px;padding:1.3rem 1.2rem 1.2rem;
  border-top:2px solid var(--dorado);
  position:relative;overflow:hidden;
}
.socorro-icono{
  position:absolute;right:-14px;top:-10px;width:104px;height:104px;
  color:var(--crema);opacity:.07;pointer-events:none;
}
.socorro h2{
  font-family:"EB Garamond",Georgia,serif;font-weight:500;
  font-size:1.32rem;line-height:1.2;margin:0 0 .35rem;color:var(--crema);
}
.socorro p{
  margin:0 0 1rem;font-size:.9rem;line-height:1.5;
  color:color-mix(in srgb, var(--crema) 78%, transparent);max-width:34ch;
}
.boton-socorro{
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  width:100%;min-height:52px;
  background:var(--crema);color:var(--marino);
  border-radius:10px;text-decoration:none;
  font:700 1rem Montserrat,"Segoe UI",system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;
  transition:transform .14s cubic-bezier(.23,1,.32,1);
}
.boton-socorro svg{width:20px;height:20px;fill:currentColor}
.boton-socorro:active{transform:scale(.975)}
.boton-socorro:focus-visible{outline:2px solid var(--dorado);outline-offset:3px}

/* Accesos rápidos deslizables. En 320 px caben tres y medio: ese medio visible
   es lo que le dice al dedo que hay más a la derecha. */
.atajos{
  display:flex;gap:.55rem;margin:1.3rem 0 1.6rem;
  overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:.3rem;scrollbar-width:none;
  margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);
  padding-left:var(--gutter);padding-right:var(--gutter);
}
.atajos::-webkit-scrollbar{display:none}
.atajo{
  /* 84 px y la etiqueta puede partirse en dos líneas: «Beneficiarios» no cabe
     en 76 y se comía la etiqueta de al lado. Alto fijo para que los discos
     queden alineados aunque unas etiquetas ocupen una línea y otras dos. */
  flex:none;width:84px;scroll-snap-align:start;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  text-decoration:none;color:var(--tinta);
  -webkit-tap-highlight-color:transparent;
}
.atajo-disco{
  width:54px;height:54px;border-radius:50%;
  background:var(--tarjeta);border:1px solid var(--filete);
  display:flex;align-items:center;justify-content:center;
  transition:transform .14s cubic-bezier(.23,1,.32,1);
}
.atajo-disco svg{width:24px;height:24px;color:var(--musgo)}
.atajo:active .atajo-disco{transform:scale(.92)}
.atajo-texto{font:500 .75rem/1.25 Montserrat,"Segoe UI",system-ui,sans-serif;text-align:center;min-height:2.5em;display:flex;align-items:flex-start;justify-content:center;hyphens:auto}
.atajo:focus-visible .atajo-disco{outline:2px solid var(--musgo);outline-offset:2px}

.cabecera-seccion{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 .7rem}
.cabecera-seccion h2{
  font-family:"EB Garamond",Georgia,serif;font-weight:500;font-size:1.3rem;margin:0;
}
.ver-todo{
  /* Diana de 44 px aunque el texto mida 16: el margen negativo evita que el
     área pulsable descuadre la línea base del encabezado de al lado. */
  display:inline-flex;align-items:center;min-height:44px;padding:0 .35rem;
  margin:-14px -.35rem;
  font:600 .82rem Montserrat,"Segoe UI",system-ui,sans-serif;
  color:var(--musgo-enlace);text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.ver-todo:focus-visible,.ver-detalles:focus-visible{
  outline:2px solid var(--musgo-enlace);outline-offset:2px;border-radius:6px;
}

/* La tarjeta del plan. Aquí está la diferencia con SOFI: el estado de cobertura. */
.tarjeta-plan{
  background:var(--tarjeta);border:1px solid var(--filete);
  border-radius:12px;padding:1rem;margin-bottom:.75rem;
}
.tarjeta-plan header{display:flex;align-items:center;gap:.7rem;margin-bottom:.85rem}
.tarjeta-arbol{width:30px;height:30px;color:var(--musgo);flex:none}
.tarjeta-plan h3{
  font:600 1.05rem/1.2 Montserrat,"Segoe UI",system-ui,sans-serif;margin:0;color:var(--tinta);
}
.tarjeta-plan .numero{margin:.12rem 0 0;font-size:.79rem;color:var(--tinta-suave)}

/* El estado nunca depende sólo del color: lleva icono y frase. Quien no
   distinga el musgo del dorado tiene que poder saberlo igual. */
.estado{
  display:flex;align-items:flex-start;gap:.55rem;
  margin:0 0 .9rem;padding:.6rem .7rem;border-radius:8px;
  font-size:.86rem;line-height:1.45;
}
.estado svg{width:18px;height:18px;flex:none;margin-top:.1rem;fill:currentColor}
.estado strong{font-weight:700;display:block}
.estado--cubierta{background:color-mix(in srgb,var(--musgo) 11%,transparent);color:#4d5f1e}
.estado--carencia{background:color-mix(in srgb,var(--dorado) 17%,transparent);color:#7a5f1c}
.estado--suspendida{background:color-mix(in srgb,#a33 10%,transparent);color:#8d2b2b}

.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:0 0 .85rem}
.cifras dt{
  font:600 .75rem/1 Montserrat,"Segoe UI",system-ui,sans-serif;
  letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-suave);margin-bottom:.2rem;
}
.cifras dd{margin:0;font:700 .95rem Montserrat,"Segoe UI",system-ui,sans-serif;color:var(--tinta)}
.ver-detalles{
  display:inline-flex;align-items:center;min-height:44px;
  font:600 .85rem Montserrat,"Segoe UI",system-ui,sans-serif;
  color:var(--musgo-enlace);text-decoration:none;
}
.nota-muestra{
  margin:1.4rem 0 0;font-size:.79rem;line-height:1.5;
  color:var(--tinta-suave);padding-left:.7rem;border-left:2px solid var(--filete);
}
@media (prefers-reduced-motion:reduce){
  .boton-socorro,.atajo-disco{transition:none}
  .boton-socorro:active,.atajo:active .atajo-disco{transform:none}
}

/* ── Detalle del plan y perfil, adaptados de SOFI ────────────────────────────
   La estructura es la suya; la paleta y la tipografía, las del manual. */
.titulo-plan{
  display:flex;align-items:center;gap:.55rem;
  font-family:"EB Garamond",Georgia,serif;font-weight:500;font-size:1.75rem;
  margin:.15rem 0 .9rem;color:var(--tinta);
}
.titulo-plan svg{width:30px;height:30px;color:var(--musgo);flex:none}
.volver{
  display:inline-flex;align-items:center;gap:.4rem;min-height:44px;
  margin:0 0 .3rem -.35rem;padding:0 .35rem;
  font:600 .88rem Montserrat,"Segoe UI",system-ui,sans-serif;
  color:var(--tinta-suave);text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.volver svg{width:18px;height:18px;fill:currentColor}
.estado--grande{font-size:.95rem;padding:.85rem .9rem;margin-bottom:1.1rem}
.estado--grande svg{width:22px;height:22px}

/* El bloque del siguiente pago: el importe manda, como en SOFI. */
.siguiente{
  background:var(--tarjeta);border:1px solid var(--filete);
  border-radius:14px;padding:1.1rem;margin-bottom:1.5rem;
}
.siguiente-fila{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.siguiente-rotulo{
  font:600 .75rem/1 Montserrat,"Segoe UI",system-ui,sans-serif;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-suave);
}
.siguiente-cuenta{
  font:600 .78rem Montserrat,"Segoe UI",system-ui,sans-serif;color:var(--musgo-enlace);
}
.siguiente-monto{
  font-family:"EB Garamond",Georgia,serif;font-weight:500;
  font-size:2.5rem;line-height:1.05;margin:.4rem 0 .15rem;color:var(--tinta);
}
.siguiente-fecha{margin:0 0 1.1rem;font-size:.82rem;color:var(--tinta-suave)}

.acciones{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.accion{
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  min-height:44px;text-decoration:none;color:var(--tinta);
  -webkit-tap-highlight-color:transparent;
}
.accion-disco{
  width:48px;height:48px;border-radius:50%;
  background:color-mix(in srgb, var(--musgo) 12%, transparent);
  display:flex;align-items:center;justify-content:center;
  transition:transform .14s cubic-bezier(.23,1,.32,1);
}
.accion-disco svg{width:22px;height:22px;color:var(--musgo-enlace)}
.accion--principal .accion-disco{background:var(--marino)}
.accion--principal .accion-disco svg{color:var(--crema)}
.accion-texto{
  font:500 .75rem/1.25 Montserrat,"Segoe UI",system-ui,sans-serif;
  text-align:center;min-height:2.5em;
}
.accion:active .accion-disco{transform:scale(.92)}
.accion:focus-visible .accion-disco{outline:2px solid var(--musgo-enlace);outline-offset:2px}

/* Historial. Los distintivos de SOFI, con NUESTROS estados de pago. */
.historial{list-style:none;margin:0;padding:0}
.historial li{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.8rem 0;border-bottom:1px solid var(--filete);
}
.historial li:last-child{border-bottom:0}
.historial-monto{margin:0;font:700 .98rem Montserrat,"Segoe UI",system-ui,sans-serif;color:var(--tinta)}
.historial-fecha{margin:.1rem 0 0;font-size:.79rem;color:var(--tinta-suave)}
.marca-estado{
  flex:none;padding:.28rem .6rem;border-radius:20px;white-space:nowrap;
  font:700 .75rem/1.3 Montserrat,"Segoe UI",system-ui,sans-serif;
  letter-spacing:.04em;text-transform:uppercase;
}
.marca-estado--verificado{background:color-mix(in srgb,var(--musgo) 15%,transparent);color:#465c1c}
.marca-estado--reportado{background:color-mix(in srgb,var(--dorado) 22%,transparent);color:#6f5516}
.marca-estado--rechazado{background:color-mix(in srgb,#a33 12%,transparent);color:#8d2b2b}

.cabecera-seccion--aire{margin-top:1.6rem}
.ficha{margin:0}
.ficha > div{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.62rem 0;border-bottom:1px solid var(--filete);
}
.ficha > div:last-child{border-bottom:0}
.ficha dt{font-size:.85rem;color:var(--tinta-suave)}
.ficha dd{margin:0;font:600 .88rem Montserrat,"Segoe UI",system-ui,sans-serif;text-align:right}

/* ── Perfil: lista agrupada, la estructura que mejor envejece ─────────────── */
.persona{display:flex;align-items:center;gap:.85rem;margin:0 0 1.6rem}
.persona-inicial{
  width:52px;height:52px;border-radius:50%;flex:none;
  background:var(--marino);color:var(--crema);
  display:flex;align-items:center;justify-content:center;
  font:600 1.05rem Montserrat,"Segoe UI",system-ui,sans-serif;letter-spacing:.04em;
}
.persona-nombre{margin:0;font:600 1.05rem Montserrat,"Segoe UI",system-ui,sans-serif;color:var(--tinta)}
.persona-dato{margin:.12rem 0 0;font-size:.8rem;color:var(--tinta-suave)}

.grupo-rotulo{
  margin:1.5rem 0 .5rem;
  font:600 .75rem/1 Montserrat,"Segoe UI",system-ui,sans-serif;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-suave);
}
.lista-ajustes{
  list-style:none;margin:0;padding:0;
  background:var(--tarjeta);border:1px solid var(--filete);border-radius:12px;overflow:hidden;
}
.lista-ajustes li + li{border-top:1px solid var(--filete)}
.lista-ajustes a{
  display:flex;align-items:center;gap:.85rem;min-height:56px;padding:.55rem .9rem;
  text-decoration:none;color:var(--tinta);
  -webkit-tap-highlight-color:transparent;
}
.lista-ajustes a:active{background:color-mix(in srgb,var(--musgo) 8%,transparent)}
.lista-ajustes a:focus-visible{outline:2px solid var(--musgo-enlace);outline-offset:-2px}
.lista-icono{width:22px;height:22px;color:var(--musgo);flex:none}
.lista-texto{
  flex:1;min-width:0;
  font:500 .95rem/1.3 Montserrat,"Segoe UI",system-ui,sans-serif;
}
.lista-texto small{display:block;font-size:.78rem;font-weight:400;color:var(--tinta-suave);margin-top:.1rem}
/* La flecha es el icono «atrás» girado: un icono menos que mantener. */
.lista-flecha{width:16px;height:16px;color:var(--tinta-suave);flex:none;transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){ .accion-disco{transition:none} .accion:active .accion-disco{transform:none} }

/* ── El inicio con un servicio en curso ──────────────────────────────────────
   Sustituye a todo lo demás. Una familia que acaba de perder a alguien no
   necesita ver su cuota del mes: necesita saber por dónde va y a quién llamar. */
.curso{
  background:var(--marino);color:var(--crema);
  border-radius:14px;padding:1.2rem;border-top:2px solid var(--dorado);
}
.curso-rotulo{
  display:flex;align-items:center;gap:.5rem;margin:0 0 .5rem;
  font:600 .75rem/1 Montserrat,"Segoe UI",system-ui,sans-serif;
  letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in srgb, var(--crema) 72%, transparent);
}
.curso-pulso{
  width:9px;height:9px;border-radius:50%;background:var(--verde);flex:none;
  box-shadow:0 0 0 0 color-mix(in srgb, var(--verde) 70%, transparent);
  animation:latido 2.2s ease-out infinite;
}
/* Único sitio de la aplicación con animación continua, y con motivo: dice que
   la información se está actualizando sola, que es justo lo que hace falta
   saber cuando estás esperando. */
@keyframes latido{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--verde) 60%, transparent)}
  70%{box-shadow:0 0 0 9px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
.curso-nombre{
  font-family:"EB Garamond",Georgia,serif;font-weight:500;
  font-size:1.5rem;line-height:1.2;margin:0;color:var(--crema);
}
.curso-lugar{margin:.15rem 0 1.1rem;font-size:.85rem;color:color-mix(in srgb,var(--crema) 68%,transparent)}

.linea{list-style:none;margin:0 0 1.2rem;padding:0}
.paso{
  display:grid;grid-template-columns:auto 1fr auto;gap:.1rem .8rem;
  align-items:start;position:relative;padding-bottom:1rem;
}
.paso:last-child{padding-bottom:0}
/* El hilo que une los pasos */
.paso:not(:last-child)::before{
  content:"";position:absolute;left:5px;top:16px;bottom:0;width:2px;
  background:color-mix(in srgb, var(--crema) 22%, transparent);
}
.paso-marca{
  width:12px;height:12px;border-radius:50%;margin-top:3px;flex:none;position:relative;z-index:1;
  border:2px solid color-mix(in srgb, var(--crema) 34%, transparent);
}
.paso--hecho .paso-marca{background:var(--verde);border-color:var(--verde)}
.paso--ahora .paso-marca{background:var(--dorado);border-color:var(--dorado);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--dorado) 22%, transparent)}
.paso-texto{margin:0;font:600 .93rem/1.3 Montserrat,"Segoe UI",system-ui,sans-serif}
.paso--pendiente .paso-texto{font-weight:400;color:color-mix(in srgb,var(--crema) 55%,transparent)}
.paso-pie{margin:.1rem 0 0;font-size:.79rem;color:color-mix(in srgb,var(--crema) 62%,transparent)}
.paso-hora{
  font:500 .78rem/1.4 Montserrat,"Segoe UI",system-ui,sans-serif;white-space:nowrap;
  color:color-mix(in srgb,var(--crema) 62%,transparent);
}
.curso-quien{
  margin:.8rem 0 0;text-align:center;font-size:.82rem;
  color:color-mix(in srgb,var(--crema) 68%,transparent);
}
/* El enlace dentro de la nota va en línea con el texto, así que la diana de
   44 px se consigue con padding vertical y margen negativo: crece el área
   pulsable sin abrir un hueco en el párrafo. */
.nota-muestra a{
  display:inline-block;color:var(--musgo-enlace);font-weight:600;
  padding:13px 0;margin:-13px 0;
}
@media (prefers-reduced-motion:reduce){ .curso-pulso{animation:none} }

/* ── Importes: el dólar manda, el bolívar acompaña ───────────────────────────
   Los contratos están redactados en dólares, así que ésa es la cifra del
   acuerdo; el bolívar es lo que se paga hoy a la tasa del BCV. Invertir la
   jerarquía diría que el precio es en bolívares, y no lo es. */
.precio{display:inline-flex;flex-direction:column;line-height:1.2}
.precio-usd{font-weight:700;color:var(--tinta)}
.precio-bs{
  font:400 .78rem/1.35 Montserrat,"Segoe UI",system-ui,sans-serif;
  color:var(--tinta-suave);
  /* tabular-nums: en una columna de importes, las cifras tienen que alinearse */
  font-variant-numeric:tabular-nums;
}
/* Tamaño ABSOLUTO, no relativo: en em heredaba el cuerpo de la cifra y al
   pasar a bolívares se iba a 31 px. */
.precio-tasa{
  font:400 .76rem/1.35 Montserrat,"Segoe UI",system-ui,sans-serif;
  color:var(--tinta-suave);order:3;
}
/* Con el orden invertido hay que devolver la nota al final. */
.en-bolivares .precio-tasa{order:-1}

.precio--linea .precio-usd{font-size:.95rem}
.precio--linea .precio-bs{font-size:.75rem}

.precio--grande{margin:.4rem 0 .15rem}
.precio--grande .precio-usd{
  font-family:"EB Garamond",Georgia,serif;font-weight:500;
  font-size:2.5rem;line-height:1.05;
}
.precio--grande .precio-bs{font-size:.88rem;margin-top:.15rem}

/* En la franja marino los importes heredan el crema */
.socorro .precio-usd,.curso .precio-usd{color:var(--crema)}
.socorro .precio-bs,.curso .precio-bs{color:color-mix(in srgb,var(--crema) 68%,transparent)}
.ficha .precio{align-items:flex-end}
.cifras .precio,.historial .precio{align-items:flex-start}
/* En el aviso, el importe va en línea con el texto que lo rodea */
.que-hacer .precio{display:inline-flex;flex-direction:row;align-items:baseline;gap:.35rem}
.que-hacer .precio-bs{font-size:.92em}

/* ── El control de moneda ────────────────────────────────────────────────────
   Segmentado y no píldora: se ven las dos opciones, así que nadie tiene que
   adivinar qué pasa al pulsar. La tasa va al lado, como dato. */
.rif-barra{display:flex;align-items:center;justify-content:space-between;gap:.7rem}
.tasa-dice{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:color-mix(in srgb, var(--franja-tinta) 62%, transparent);
}
/* La tasa y el control forman un bloque: uno explica al otro. */
.grupo-moneda{display:flex;align-items:center;gap:.5rem;flex:none}
.tasa-valor{
  white-space:nowrap;
  font:400 .75rem/1 Montserrat,"Segoe UI",system-ui,sans-serif;
  color:color-mix(in srgb, var(--franja-tinta) 72%, transparent);
  font-variant-numeric:tabular-nums;
}
.segmentado{
  position:relative;display:inline-flex;flex:none;
  /* La zona tocable mide 44 px; lo que se DIBUJA mide 32. El margen negativo
     devuelve la diferencia para que la franja no crezca, y como el dibujo lo
     hacen pseudo-elementos de 32 px, nada se sale de la banda. Ése fue el
     fallo de la primera versión: el fondo llenaba los 44 y asomaba. */
  margin:-.375rem 0;
}
.segmentado::before{
  content:"";position:absolute;inset:.375rem 0;border-radius:20px;pointer-events:none;
  border:1px solid color-mix(in srgb, var(--crema) 22%, transparent);
}
.seg-op{
  position:relative;z-index:1;
  /* min-width para que «Bs», que tiene dos letras, cumpla los 44 px igual
     que «USD», que tiene tres. Sin esto medía 41. */
  padding:1rem .82rem;min-width:44px;background:none;border:0;
  color:color-mix(in srgb, var(--crema) 68%, transparent);
  font:600 .75rem/1 Montserrat,"Segoe UI",system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;
  transition:color .14s ease;
}
/* El dorado lo pinta un pseudo-elemento de 32 px, no el fondo del botón. */
.seg-op::before{
  content:"";position:absolute;inset:.375rem 0;z-index:-1;
  background:transparent;transition:background-color .14s ease;
}
.seg-op:first-child::before{border-radius:20px 0 0 20px}
.seg-op:last-child::before{border-radius:0 20px 20px 0}
.seg-op[aria-pressed="true"]{color:var(--marino);font-weight:700}
.seg-op[aria-pressed="true"]::before{background:var(--dorado)}
.seg-op:focus-visible{outline:2px solid var(--dorado);outline-offset:-6px;border-radius:20px}
@media (prefers-reduced-motion:reduce){ .seg-op,.seg-op::before{transition:none} }

/* El cambio en sí: se invierte el orden y el peso, no se oculta nada. Quien
   mira precios en bolívares sigue queriendo ver el dólar del contrato. */
.en-bolivares .precio{flex-direction:column-reverse}
.en-bolivares .precio-usd{
  font-weight:400;font-size:.78rem;color:var(--tinta-suave);
  font-family:Montserrat,"Segoe UI",system-ui,sans-serif;
}
.en-bolivares .precio-bs{
  font-weight:700;font-size:.95rem;color:var(--tinta);
}
.en-bolivares .precio--grande .precio-usd{font-size:.88rem;margin-top:.15rem}
.en-bolivares .precio--grande .precio-bs{
  font-family:"EB Garamond",Georgia,serif;font-weight:500;
  font-size:2.1rem;line-height:1.05;
}
.en-bolivares .precio--linea .precio-usd{font-size:.75rem}
.en-bolivares .precio--linea .precio-bs{font-size:.95rem}
.en-bolivares .socorro .precio-usd,.en-bolivares .curso .precio-usd{
  color:color-mix(in srgb,var(--crema) 68%,transparent);
}
.en-bolivares .socorro .precio-bs,.en-bolivares .curso .precio-bs{color:var(--crema)}
/* En línea con texto alrededor no hay que invertir nada, sólo el peso */
.en-bolivares .que-hacer .precio{flex-direction:row-reverse}
@media (prefers-reduced-motion:reduce){ .chip-tasa{transition:none} .chip-tasa:active{transform:none} }
/* ============================================================================
   El asistente — hoja COMPARTIDA entre la aplicación y el sitio corporativo.

   Un solo sitio donde tocar el chat. El sitio corporativo es estático y vive
   en otro servidor, pero su asistente es el mismo: mismas reglas, mismo
   comportamiento (`asistente.js`) y estos mismos estilos. Duplicarlos era
   garantizar que en tres meses fueran dos chats distintos.

   ⚠ Usa los nombres de color de la aplicación (--fondo, --tinta, --tarjeta…).
     El sitio corporativo los define en términos de los suyos antes de incluir
     esta hoja; ver `landing/partes/estilos.html`.
   ============================================================================ */

/* ── El asistente ────────────────────────────────────────────────────────────
   Sustituye al botón de WhatsApp. Un visitante con dudas y un botón de
   WhatsApp tiene que decidir si molestar a alguien; la mayoría se va. */
.burbuja{
  position:fixed;right:var(--gutter);z-index:25;
  bottom:calc(var(--barra-baja) + 1px + env(safe-area-inset-bottom) + .7rem
                + var(--aviso-cookies, 0px));
  display:flex;align-items:center;gap:.5rem;
  min-height:56px;padding:0 1.05rem 0 .4rem;
  background:var(--marino);color:var(--crema);
  border-radius:26px;
  /* ⚠ Un filete claro, no `border:0`. En la aplicación el fondo es crema y el
     botón marino se recorta solo; en el sitio corporativo cae encima de una
     franja MARINO y desaparecía: sólo se veía el disco blanco flotando, sin
     borde, como un error. El filete lo despega de cualquier fondo. */
  border:1px solid color-mix(in srgb, var(--crema) 22%, transparent);
  box-shadow:0 6px 20px rgba(28,31,64,.28), 0 0 0 1px rgba(28,31,64,.18);
  font:600 .9rem Montserrat,"Segoe UI",system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;
  transition:transform .16s cubic-bezier(.23,1,.32,1);
}
/* El disco claro con el símbolo. Es lo que convierte el botón en «alguien»
   en vez de en un icono de sistema. */
.burbuja-disco{
  position:relative;flex:none;
  width:42px;height:42px;border-radius:50%;background:var(--crema);
  display:flex;align-items:center;justify-content:center;
}
.burbuja-disco svg{width:24px;height:24px;color:var(--musgo)}
/* Punto verde: hay alguien al otro lado. El borde del color del botón lo
   despega del disco en vez de dejarlo pegado. */
.burbuja-punto{
  position:absolute;right:-1px;bottom:-1px;
  width:13px;height:13px;border-radius:50%;
  background:var(--verde);border:2.5px solid var(--marino);
}
.burbuja:active{transform:scale(.95)}
.burbuja:focus-visible{outline:2px solid var(--dorado);outline-offset:3px}
/* EN EL TELÉFONO, SÓLO EL CÍRCULO — igual que PaciGest, que enseña el rótulo
   a partir de 640 px y en móvil deja el disco solo.
   No es sólo estética: con el rótulo, el óvalo mide unos 150 px de ancho y en
   la portada se montaba encima del segundo botón del hero. Un lanzador que
   tapa una llamada a la acción es un lanzador que cuesta dinero. */
@media (max-width:639px){
  .burbuja-texto{display:none}
  .burbuja{width:56px;padding:0;justify-content:center;border-radius:50%}
}

/* ⚠ Cuando exista aviso de cookies, sumarle su alto aquí. En PaciGest se
   midió que el lanzador tapaba el botón «Aceptar» en el teléfono: nadie podía
   aceptar las cookies porque el chat estaba encima. */

/* El panel ocupa la pantalla entera en el teléfono. Un panel flotante de
   380 px en un móvil es un panel con un teclado encima tapándolo. */
.asistente{
  position:fixed;inset:0;z-index:60;
  display:flex;flex-direction:column;
  background:var(--fondo);
  transform:translateY(100%);
  transition:transform .34s cubic-bezier(.32,.72,0,1);
}
.asistente.abierto{transform:translateY(0)}
@media (min-width:640px){
  .asistente{
    inset:auto 1.5rem 1.5rem auto;width:390px;height:min(620px,84vh);
    border-radius:16px;overflow:hidden;box-shadow:0 18px 48px rgba(28,31,64,.3);
  }
}

/* La flecha atrás cierra en el teléfono; la equis, en escritorio. Nunca las
   dos: dos formas de cerrar en la misma barra es una de más. */
.asistente-volver{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:var(--diana);height:var(--diana);margin-left:calc(var(--gutter) * -.45);
  border:0;background:none;color:var(--crema);
  -webkit-tap-highlight-color:transparent;
}
.asistente-volver svg{width:22px;height:22px;fill:currentColor}
.asistente-volver:active{opacity:.6}
.asistente-volver:focus-visible{outline:2px solid var(--dorado);outline-offset:-2px;border-radius:50%}

/* El punto verde del «En línea»: dice que hay alguien al otro lado. */
.asistente-punto{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#22c55e;margin-right:.4rem;vertical-align:middle;
}

.asistente-barra{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:calc(env(safe-area-inset-top) + .8rem) var(--gutter) .8rem;
  background:var(--marino);color:var(--crema);flex:none;
  border-bottom:1px solid var(--filete-oro);
}
.asistente-marca{display:flex;align-items:center;gap:.65rem;min-width:0;flex:1}
.asistente-marca > span{min-width:0}
.asistente-logo{height:26px;width:auto;display:block;flex:none}
.asistente-nombre{
  display:block;font:600 .95rem/1.2 Montserrat,"Segoe UI",system-ui,sans-serif;
  /* Con el botón de WhatsApp al lado, el nombre y su pie tienen que caber en
     una línea cada uno: si no, la cabecera crece a tres renglones en 320 px. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.asistente-pie{
  display:block;margin-top:.1rem;font-size:.75rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:color-mix(in srgb,var(--crema) 66%,transparent);
}
/* WhatsApp permanente en la cabecera del chat. Es una salida, no un premio:
   quien quiere una persona no debería tener que pedírselo a una máquina. */
.asistente-wa{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.35rem;flex:none;
  /* Diana de 44 px sin engordar la cabecera: el alto lo da el relleno y el
     margen negativo lo devuelve. La píldora que se ve mide 36 y la pinta un
     ::before, igual que en el control de moneda. */
  min-height:44px;min-width:44px;padding:.4rem .7rem;margin:-.25rem 0 -.25rem auto;
  color:var(--crema);text-decoration:none;
  font:600 .78rem Montserrat,"Segoe UI",system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;
}
.asistente-wa::before{
  content:"";position:absolute;inset:.25rem 0;border-radius:18px;z-index:-1;
  background:color-mix(in srgb, var(--crema) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--crema) 26%, transparent);
}
.asistente-wa svg{width:16px;height:16px;fill:currentColor;position:relative}
.asistente-wa span{position:relative}
.asistente-wa:active{opacity:.75}
.asistente-wa:focus-visible{outline:2px solid var(--verde);outline-offset:2px}
@media (max-width:359px){ .asistente-wa span{display:none} .asistente-wa{padding:0 .5rem} }

.asistente-cerrar{
  display:flex;align-items:center;justify-content:center;
  /* flex:none — sin esto el contenedor lo encogía a 43,86 px y se quedaba a
     un pelo de la diana de 44. Una diana que casi cumple no cumple. */
  flex:none;
  width:var(--diana);height:var(--diana);margin-right:-.5rem;
  background:none;border:0;color:inherit;-webkit-tap-highlight-color:transparent;
}
.asistente-cerrar svg{width:20px;height:20px;fill:currentColor}
.asistente-cerrar:active{opacity:.6}

/* El hilo. Se desplaza ESTE, nunca la página. */
.hilo{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:1rem var(--gutter);display:flex;flex-direction:column;gap:.7rem;
  overscroll-behavior:contain;
}
.mensaje{max-width:84%;padding:.65rem .85rem;border-radius:14px;position:relative}
.mensaje p{margin:0;font-size:.92rem;line-height:1.5}
.mensaje time{display:block;margin-top:.25rem;font-size:.68rem;opacity:.6}
.mensaje--el{align-self:flex-start;background:var(--tarjeta);border:1px solid var(--filete);border-bottom-left-radius:5px}
.mensaje--yo{align-self:flex-end;background:var(--marino);color:var(--crema);border-bottom-right-radius:5px}
.mensaje--yo time{color:color-mix(in srgb,var(--crema) 70%,transparent)}

.mensaje--pensando{display:flex;gap:5px;padding:.85rem}
.mensaje--pensando span{
  width:7px;height:7px;border-radius:50%;background:var(--tinta-suave);
  animation:latir 1.3s ease-in-out infinite;
}
.mensaje--pensando span:nth-child(2){animation-delay:.18s}
.mensaje--pensando span:nth-child(3){animation-delay:.36s}
@keyframes latir{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.sugerencias{
  display:flex;gap:.45rem;overflow-x:auto;flex:none;
  padding:0 var(--gutter) .7rem;scrollbar-width:none;
}
.sugerencias::-webkit-scrollbar{display:none}
.sugerencia{
  flex:none;min-height:38px;padding:.5rem .85rem;
  background:none;border:1px solid var(--musgo-enlace);border-radius:19px;
  color:var(--musgo-enlace);white-space:nowrap;
  font:600 .8rem Montserrat,"Segoe UI",system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;
}
.sugerencia:active{background:color-mix(in srgb,var(--musgo) 12%,transparent)}
.sugerencia:focus-visible{outline:2px solid var(--musgo-enlace);outline-offset:2px}

.redactar{
  display:flex;gap:.5rem;flex:none;align-items:center;
  padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--filete);background:var(--tarjeta);
}
.redactar input{
  flex:1;min-width:0;min-height:44px;padding:.6rem .9rem;
  border:1px solid var(--filete);border-radius:22px;background:var(--fondo);
  color:var(--tinta);font:400 1rem Montserrat,"Segoe UI",system-ui,sans-serif;
}
.redactar input:focus{outline:2px solid var(--musgo-enlace);outline-offset:-1px}
.enviar{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;border:0;border-radius:50%;
  background:var(--marino);color:var(--crema);
  -webkit-tap-highlight-color:transparent;
  transition:transform .14s cubic-bezier(.23,1,.32,1);
}
.enviar svg{width:19px;height:19px;fill:currentColor;margin-left:-2px}
.enviar:active{transform:scale(.92)}
.enviar:focus-visible{outline:2px solid var(--dorado);outline-offset:2px}

.visualmente-oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
@media (prefers-reduced-motion:reduce){
  .asistente,.burbuja,.enviar{transition:none}
  .mensaje--pensando span{animation:none;opacity:.5}
}

/* ⚠ QUIÉN CIERRA, SEGÚN EL TAMAÑO — va al FINAL a propósito.
   Estaba escrito arriba, junto al resto de la flecha, y NO funcionaba: la
   regla `.asistente-cerrar{display:flex}` viene después y, a igual
   especificidad, gana la última. La equis seguía saliendo en el teléfono
   encima de la flecha. Una media consulta no añade especificidad; sólo cuenta
   el orden. */
@media (min-width:640px){ .asistente-volver{display:none} }
@media (max-width:639px){ .asistente-cerrar{display:none} }