/* ============================================================================
   Lumina CRM · fiora.css — Fiora, la hoja de la «r» (M-090, ADR-0119): el personaje del dueño, compartido por la demo con Fiora
   (/prueba) y la app de los centros (su cara en el soporte y Fiora guiando los tutoriales). Los dos bloques de abajo son los del dueño,
   copiados tal cual («FIORA · LA HOJA DE LA R» y el añadido «FIORA · APUNTA»); al final, su cara en un círculo y Fiora acompañando un
   tutorial en la app. El dibujo y la geometría viven en js/fiora-personaje.js (LuminaFioraPersonaje).
   ========================================================================== */

/* ============ FIORA · LA HOJA DE LA R (bloque reutilizable: copiar tal cual) ============ */
/* En el estado «palo» el dibujo ES la r de la marca (tallo bosque y hoja verde del logotipo, sin tocar). Al caer se vuelve Fiora: la hoja en el verde de la marca, con ojos blancos de medio párpado, media sonrisa de lado y su hojita de mano.
   Tres grupos anidados: .f-todo (dónde está y cuánto mide), .f-giro (la vuelta, alrededor de su centro) y .f-ancho (se ensancha al volverse personaje, y se aplasta o estira). */
.fiora { overflow: visible; display: block; --f-ease: cubic-bezier(.2, 0, 0, 1); }
.fiora * { transform-box: view-box; }
.fiora .f-todo { transform: translate(48px, 108px) rotate(6deg) scale(1.55); }
.fiora .f-giro { transform-origin: 0px -26px; }
.fiora .f-ancho { transform: scale(1.29, 1); }
.fiora .f-brazo { transform-origin: 6.5px -14px; }
.fiora .f-ojos { transform-origin: -2.5px -15.5px; }
.fiora .f-sombra { opacity: .13; transform-origin: 48px 108.5px; }
.fiora .r-palo { opacity: 0; }
.fiora .f-ojos-felices, .fiora .f-boca-feliz, .fiora .f-boca-o, .fiora .f-logo { opacity: 0; }
/* El color de Fiora: el verde de la marca, en dos planos (lado de luz y lado de sombra) y un filo claro. */
.fiora .f-luz { fill: #A9C277; }
.fiora .f-som { fill: #8AA35E; }
.fiora .f-filo { stroke: #CBDDA0; }
.fiora .f-todo, .fiora .f-ancho, .fiora .f-ojos { transition: transform .26s var(--f-ease); }
.fiora .f-brazo, .fiora .f-sombra { transition: transform .26s var(--f-ease), opacity .2s linear; }
.fiora .r-palo, .fiora .f-cara, .fiora .f-vena, .fiora .f-logo, .fiora .f-nueva, .fiora .f-parpados, .fiora .f-boca, .fiora .f-boca-o, .fiora .f-boca-feliz, .fiora .f-ojos-felices { transition: opacity .2s linear; }
.fiora .f-pupilas { transition: transform .26s var(--f-ease); }

/* ---- palo: descansa como la r de la marca (así se esconde) ---- */
.fiora[data-estado="palo"] .f-todo, .fiora[data-estado="vuelve"] .f-todo { transform: translate(40.2px, 50.2px) rotate(56.7deg) scale(1); }
.fiora[data-estado="palo"] .f-ancho, .fiora[data-estado="vuelve"] .f-ancho { transform: scale(1, 1); }
.fiora[data-estado="palo"] .r-palo, .fiora[data-estado="vuelve"] .r-palo { opacity: 1; }
.fiora[data-estado="palo"] .f-cara, .fiora[data-estado="palo"] .f-brazo, .fiora[data-estado="palo"] .f-vena, .fiora[data-estado="palo"] .f-sombra,
.fiora[data-estado="vuelve"] .f-cara, .fiora[data-estado="vuelve"] .f-brazo, .fiora[data-estado="vuelve"] .f-vena, .fiora[data-estado="vuelve"] .f-sombra { opacity: 0; }
.fiora[data-estado="palo"] .f-logo, .fiora[data-estado="vuelve"] .f-logo { opacity: 1; }
.fiora[data-estado="palo"] .f-nueva, .fiora[data-estado="vuelve"] .f-nueva { opacity: 0; }

/* ---- cae: se suelta del palo, cae meciéndose, aterriza y abre los ojos (así aparece) ---- */
.fiora[data-estado="cae"] .f-todo { animation: f-cae 1.35s cubic-bezier(.45, 0, .55, 1) both; }
.fiora[data-estado="cae"] .f-ancho { animation: f-cae-ancho 1.35s linear both; }
.fiora[data-estado="cae"] .r-palo { animation: f-cae-palo 1.35s linear both; }
.fiora[data-estado="cae"] .f-cara, .fiora[data-estado="cae"] .f-brazo, .fiora[data-estado="cae"] .f-vena { animation: f-cae-cara 1.35s linear both; }
.fiora[data-estado="cae"] .f-ojos { animation: f-cae-ojos 1.35s linear both; }
.fiora[data-estado="cae"] .f-sombra { animation: f-cae-sombra 1.35s linear both; }
@keyframes f-cae {
  0% { transform: translate(40.2px, 50.2px) rotate(56.7deg) scale(1); }
  9% { transform: translate(40.2px, 50.2px) rotate(48deg) scale(1); }
  17% { transform: translate(40.2px, 50.2px) rotate(64deg) scale(1); }
  25% { transform: translate(41px, 51px) rotate(74deg) scale(1); }
  44% { transform: translate(64px, 70px) rotate(-20deg) scale(1.18); }
  62% { transform: translate(38px, 90px) rotate(24deg) scale(1.38); }
  78% { transform: translate(48px, 108px) rotate(-4deg) scale(1.55); }
  100% { transform: translate(48px, 108px) rotate(6deg) scale(1.55); }
}
@keyframes f-cae-ancho { 0%, 25% { transform: scale(1, 1); } 70% { transform: scale(1.2, 1.04); } 79% { transform: scale(1.56, .84); } 89% { transform: scale(1.2, 1.07); } 100% { transform: scale(1.29, 1); } }
@keyframes f-cae-palo { 0%, 26% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes f-cae-cara { 0%, 30% { opacity: 0; } 42%, 100% { opacity: 1; } }
@keyframes f-cae-ojos { 0%, 34% { transform: scaleY(.1); } 44%, 74% { transform: scaleY(1.12); } 80%, 84% { transform: scaleY(.12); } 96%, 100% { transform: scaleY(1); } }
/* cae: la hoja del logotipo se vuelve Fiora, cae con los ojos abiertos y aterriza */
.fiora[data-estado="cae"] .f-logo { animation: f-cae-logo 1.35s linear both; }
.fiora[data-estado="cae"] .f-nueva { animation: f-cae-nueva 1.35s linear both; }
.fiora[data-estado="cae"] .f-parpados { animation: f-cae-parpados 1.35s linear both; }
.fiora[data-estado="cae"] .f-boca { animation: f-cae-boca 1.35s linear both; }
.fiora[data-estado="cae"] .f-boca-o { animation: f-cae-boca-o 1.35s linear both; }
@keyframes f-cae-logo { 0%, 27% { opacity: 1; } 38%, 100% { opacity: 0; } }
@keyframes f-cae-nueva { 0%, 27% { opacity: 0; } 38%, 100% { opacity: 1; } }
@keyframes f-cae-parpados { 0%, 76% { opacity: 0; } 88%, 100% { opacity: 1; } }
@keyframes f-cae-boca { 0%, 80% { opacity: 0; } 92%, 100% { opacity: 1; } }
@keyframes f-cae-boca-o { 0%, 34% { opacity: 0; } 42%, 78% { opacity: 1; } 88%, 100% { opacity: 0; } }
@keyframes f-cae-sombra { 0%, 60% { opacity: 0; transform: scale(.4); } 80%, 100% { opacity: .13; transform: scale(1); } }

/* ---- vuelve: toma impulso, salta al palo y vuelve a ser la r (así se esconde con movimiento) ---- */
.fiora[data-estado="vuelve"] .f-todo { animation: f-vuelve .95s cubic-bezier(.4, 0, .3, 1) both; }
.fiora[data-estado="vuelve"] .f-ancho { animation: f-vuelve-ancho .95s linear both; }
.fiora[data-estado="vuelve"] .r-palo { animation: f-vuelve-palo .95s linear both; }
.fiora[data-estado="vuelve"] .f-cara, .fiora[data-estado="vuelve"] .f-brazo, .fiora[data-estado="vuelve"] .f-vena { animation: f-vuelve-cara .95s linear both; }
.fiora[data-estado="vuelve"] .f-sombra { animation: f-vuelve-sombra .95s linear both; }
@keyframes f-vuelve {
  0%, 16% { transform: translate(48px, 108px) rotate(6deg) scale(1.55); }
  52% { transform: translate(54px, 56px) rotate(38deg) scale(1.15); }
  78% { transform: translate(40.2px, 50.2px) rotate(66deg) scale(1); }
  89% { transform: translate(40.2px, 50.2px) rotate(51deg) scale(1); }
  100% { transform: translate(40.2px, 50.2px) rotate(56.7deg) scale(1); }
}
@keyframes f-vuelve-ancho { 0% { transform: scale(1.29, 1); } 16% { transform: scale(1.54, .82); } 36% { transform: scale(1.1, 1.1); } 78%, 100% { transform: scale(1, 1); } }
@keyframes f-vuelve-palo { 0%, 12% { opacity: 0; } 46%, 100% { opacity: 1; } }
@keyframes f-vuelve-cara { 0%, 14% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes f-vuelve-sombra { 0%, 14% { opacity: .13; } 44%, 100% { opacity: 0; } }
/* vuelve: salta al palo y vuelve a ser la hoja del logotipo */
.fiora[data-estado="vuelve"] .f-logo { animation: f-vuelve-logo .95s linear both; }
.fiora[data-estado="vuelve"] .f-nueva { animation: f-vuelve-nueva .95s linear both; }
@keyframes f-vuelve-logo { 0%, 60% { opacity: 0; } 76%, 100% { opacity: 1; } }
@keyframes f-vuelve-nueva { 0%, 60% { opacity: 1; } 76%, 100% { opacity: 0; } }

/* ---- espera: la mece el viento y parpadea ---- */
.fiora[data-estado="espera"] .f-todo { animation: f-espera 3.8s ease-in-out infinite; }
.fiora[data-estado="espera"] .f-ojos { animation: f-parpadea 4.4s linear infinite; }
.fiora[data-estado="espera"] .f-brazo { animation: f-mece 3.8s ease-in-out infinite; }
@keyframes f-espera { 0%, 100% { transform: translate(48px, 108px) rotate(6deg) scale(1.55); } 50% { transform: translate(48px, 108px) rotate(0deg) scale(1.58); } }
@keyframes f-parpadea { 0%, 90%, 100% { transform: scaleY(1); } 93%, 96% { transform: scaleY(.1); } }
@keyframes f-mece { 50% { transform: rotate(-9deg); } }

/* ---- señala: se inclina, mira y estira la hojita hacia donde hay que tocar ---- */
.fiora[data-estado="senala"] .f-todo { transform: translate(45px, 108px) rotate(17deg) scale(1.55); }
.fiora[data-estado="senala"] .f-pupilas { transform: translateX(1.4px); }
.fiora[data-estado="senala"] .f-brazo { transform: rotate(-10deg) scale(1.5); animation: f-apunta 1.1s ease-in-out infinite; }
@keyframes f-apunta { 0%, 100% { transform: rotate(-10deg) scale(1.45); } 50% { transform: rotate(-4deg) scale(1.65); } }

/* ---- celebra: solo movimiento. Toma impulso, salta dando una vuelta y remata con dos brinquitos ---- */
.fiora[data-estado="celebra"] .f-todo { animation: f-celebra 1.6s cubic-bezier(.3, 0, .4, 1) both; }
.fiora[data-estado="celebra"] .f-giro { animation: f-celebra-giro 1.6s cubic-bezier(.4, 0, .3, 1) both; }
.fiora[data-estado="celebra"] .f-ancho { animation: f-celebra-ancho 1.6s linear both; }
.fiora[data-estado="celebra"] .f-sombra { animation: f-celebra-sombra 1.6s linear both; }
.fiora[data-estado="celebra"] .f-ojos, .fiora[data-estado="celebra"] .f-boca { opacity: 0; }
.fiora[data-estado="celebra"] .f-ojos-felices, .fiora[data-estado="celebra"] .f-boca-feliz { opacity: 1; }
.fiora[data-estado="celebra"] .f-brazo { transform: rotate(-32deg) scale(1.25); }
@keyframes f-celebra {
  0%, 10% { transform: translate(48px, 108px) rotate(6deg) scale(1.55); }
  32% { transform: translate(48px, 80px) rotate(6deg) scale(1.55); }
  52% { transform: translate(48px, 108px) rotate(6deg) scale(1.55); }
  64% { transform: translate(48px, 98px) rotate(-8deg) scale(1.55); }
  75% { transform: translate(48px, 108px) rotate(2deg) scale(1.55); }
  86% { transform: translate(48px, 101px) rotate(15deg) scale(1.55); }
  100% { transform: translate(48px, 108px) rotate(6deg) scale(1.55); }
}
@keyframes f-celebra-giro { 0%, 10% { transform: rotate(0deg); } 52%, 100% { transform: rotate(360deg); } }
@keyframes f-celebra-ancho { 0% { transform: scale(1.29, 1); } 10% { transform: scale(1.56, .8); } 24% { transform: scale(1.14, 1.12); } 52% { transform: scale(1.5, .86); } 60% { transform: scale(1.24, 1.03); } 75% { transform: scale(1.4, .93); } 100% { transform: scale(1.29, 1); } }
@keyframes f-celebra-sombra { 0%, 10%, 52%, 75%, 100% { transform: scale(1); opacity: .13; } 32% { transform: scale(.6); opacity: .06; } 64%, 86% { transform: scale(.85); opacity: .1; } }

/* ---- piensa: se balancea y mira hacia arriba (mientras responde) ---- */
.fiora[data-estado="piensa"] .f-todo { animation: f-piensa 1.7s ease-in-out infinite; }
.fiora[data-estado="piensa"] .f-pupilas { transform: translate(1.1px, -1.3px); }
@keyframes f-piensa { 0%, 100% { transform: translate(48px, 108px) rotate(-3deg) scale(1.55); } 50% { transform: translate(48px, 108px) rotate(13deg) scale(1.55); } }

/* ---- aqui: dice que no con el cuerpo (cuando tocan en otra parte) ---- */
.fiora[data-estado="aqui"] .f-todo { animation: f-aqui .55s ease-in-out both; }
.fiora[data-estado="aqui"] .f-boca { opacity: 0; }
.fiora[data-estado="aqui"] .f-boca-o { opacity: 1; }
.fiora[data-estado="aqui"] .f-pupilas { transform: translateY(.9px); }
@keyframes f-aqui { 0%, 100% { transform: translate(48px, 108px) rotate(6deg) scale(1.55); } 20% { transform: translate(45px, 108px) rotate(-8deg) scale(1.55); } 45% { transform: translate(51px, 108px) rotate(18deg) scale(1.55); } 70% { transform: translate(46px, 108px) rotate(-3deg) scale(1.55); } }

/* ---- saluda: agita la hojita, con la boca abierta ---- */
.fiora[data-estado="saluda"] .f-todo { transform: translate(48px, 108px) rotate(-3deg) scale(1.55); }
.fiora[data-estado="saluda"] .f-boca { opacity: 0; }
.fiora[data-estado="saluda"] .f-boca-feliz { opacity: 1; }
.fiora[data-estado="saluda"] .f-brazo { animation: f-saluda 1.3s ease-in-out both; }
@keyframes f-saluda { 0%, 100% { transform: rotate(0deg) scale(1); } 15%, 45%, 75% { transform: rotate(-38deg) scale(1.4); } 30%, 60%, 90% { transform: rotate(12deg) scale(1.4); } }

@media (prefers-reduced-motion: reduce) {
  .fiora, .fiora * { animation: none !important; transition: none !important; }
}
/* sobre fondos oscuros: el tallito se aclara para no perderse */
.fiora--oscuro .f-tallo { fill: #7E9A5F; }
.fiora--oscuro .f-sombra { fill: #1E2B18; opacity: .5; }
/* ============ fin del bloque ============ */
/* ============ FIORA · APUNTA (añadido a la demo: el brazo, el cuerpo y la mirada van hacia un punto de verdad) ============ */
/* fiora-personaje.js pone en el <svg>: la clase es-espejo si el punto queda a su izquierda, y las variables --f-brazo (giro del brazo),
   --f-inclina (inclinación del cuerpo) y --f-mira-x / --f-mira-y (hacia dónde miran las pupilas). */
.fiora.es-espejo { transform: scaleX(-1); }
.fiora[data-estado="apunta"] .f-todo { transform: translate(46px, 108px) rotate(calc(var(--f-inclina, 12) * 1deg)) scale(1.55); }
.fiora[data-estado="apunta"] .f-pupilas { transform: translate(calc(var(--f-mira-x, 1.2) * 1px), calc(var(--f-mira-y, 0) * 1px)); }
.fiora[data-estado="apunta"] .f-brazo { transform: rotate(calc(var(--f-brazo, -10) * 1deg)) scale(1.5); animation: f-apunta-a 1.1s ease-in-out infinite; }
@keyframes f-apunta-a { 0%, 100% { transform: rotate(calc(var(--f-brazo, -10) * 1deg)) scale(1.45); } 50% { transform: rotate(calc(var(--f-brazo, -10) * 1deg)) scale(1.7); } }
/* ============ fin del añadido ============ */

/* ---------------------------------------------------------------- su cara en un círculo (el soporte de la app)
   Como en el panel «Respondiendo en el chat» del artefacto del dueño: el dibujo entero, más grande que el círculo y corrido para que se
   vea la cara. En porcentajes del círculo, así sirve a cualquier tamaño. Quieta en `espera` (no distrae); en `piensa`, se balancea. */
.fiora-cara { position: relative; overflow: hidden; display: inline-block; border-radius: 50%; background: var(--primary-soft); }
.fiora-cara > .fiora { position: absolute; width: 222%; height: 258%; left: -55.5%; top: -136%; }
.fiora-cara > .fiora[data-estado="espera"] .f-todo, .fiora-cara > .fiora[data-estado="espera"] .f-ojos, .fiora-cara > .fiora[data-estado="espera"] .f-brazo { animation: none; }

/* ---------------------------------------------------------------- Fiora acompañando un tutorial en la app («Hazlo conmigo» y el
   reproductor de Aprende): se para junto al botón (LuminaFioraPersonaje.acompanante, con sitioJunto) y su frase va pegada a ella. */
.fiora-guia { position: absolute; left: 0; top: 0; width: 48px; height: 56px; pointer-events: none; transition: transform .35s cubic-bezier(.3, 1.3, .5, 1); }
.fiora-guia > .fiora { width: 100%; height: 100%; transition: transform .2s ease; }
.fiora-guia .fiora.es-espejo[data-estado="palo"], .fiora-guia .fiora.es-espejo[data-estado="cae"], .fiora-guia .fiora.es-espejo[data-estado="vuelve"] { transform: none; }
.fiora-globo { position: absolute; left: 0; top: 0; width: min(288px, calc(100% - 24px)); box-sizing: border-box; background: #34482A; color: #fff; border-radius: 14px; box-shadow: 0 6px 18px rgba(30, 40, 25, 0.25); }
.fiora-globo.cola-abajo-izq { border-bottom-left-radius: 4px; }
.fiora-globo.cola-abajo-der { border-bottom-right-radius: 4px; }
.fiora-globo.cola-arriba-izq { border-top-left-radius: 4px; }
.fiora-globo.cola-arriba-der { border-top-right-radius: 4px; }
/* la guía punteada de su hojita al botón, cuando Fiora queda lejos (lo que sigue va debajo del botón: acompanante().lejos); la misma de /prueba */
.fiora-punteada { position: absolute; left: 0; top: 0; width: 0; height: 0; margin-top: -1.5px; border-top: 3px dotted #fff; transform-origin: 0 50%; opacity: 0; pointer-events: none; filter: drop-shadow(0 0 1.5px rgba(52, 72, 42, 0.9)); transition: opacity .4s ease; }
.fiora-punteada.vive { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fiora-guia, .fiora-guia > .fiora, .fiora-punteada { transition: none; } }