/* Fold animado para interfaces. Fondo transparente, funciona en claro y oscuro. */
/* Component: .fold[data-estado][data-tema]. Pantallas: .fold-pantalla-* (abajo). */

.fold {
  display: inline-block;
  width: 64px;
  height: 56px;
  position: relative;
  line-height: 0;
  --f-brazo: #DCD6C8; /* oscuro, tema de la casa, por defecto */
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) .fold { --f-brazo: #1E2026; }
}
[data-tema="claro"] .fold, .fold[data-tema="claro"] { --f-brazo: #1E2026; }
[data-tema="oscuro"] .fold, .fold[data-tema="oscuro"] { --f-brazo: #DCD6C8; }
.fold svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* --- cuerpo: respira en reposo, reacciona en el resto --- */
.f-cuerpo { transform-box: fill-box; transform-origin: 50% 100%; }
.fold:not([data-estado]) .f-cuerpo,
.fold[data-estado="reposo"] .f-cuerpo { animation: f-respira 4.8s ease-in-out infinite; }
@keyframes f-respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.006); } }

.fold[data-estado="ok"] .f-cuerpo { animation: f-bote .55s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes f-bote { 0% { transform: translateY(0); } 35% { transform: translateY(-10px); } 60%, 100% { transform: translateY(0); } }

.fold[data-estado="celebra"] .f-cuerpo { animation: f-bote2 1.4s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes f-bote2 { 0% { transform: translateY(0); } 18% { transform: translateY(-9px); } 36% { transform: translateY(0); } 54% { transform: translateY(-5px); } 70%, 100% { transform: translateY(0); } }

.fold[data-estado="sorpresa"] .f-cuerpo { animation: f-tiembla .45s ease-in-out forwards; }
@keyframes f-tiembla { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.fold.f-despertando .f-cuerpo { animation: f-bote .5s cubic-bezier(.16,1,.3,1) forwards; }

/* --- ojos: parpadeo en reposo, siguen el puntero, o hacen su gesto --- */
.f-globo { transform-box: fill-box; transform-origin: center; }
.f-ojo { transform-box: fill-box; transform-origin: center; animation: f-parpadeo 6.4s ease-in-out infinite; animation-delay: var(--f-retraso, 0s); }
@keyframes f-parpadeo { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }

.f-ojos { transform-box: fill-box; transform-origin: center; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.fold:not([data-estado]) .f-ojos,
.fold[data-estado="reposo"] .f-ojos { transform: translate(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px)); }
.fold[data-estado="piensa"] .f-ojos { transform: translateY(-5px); }
.fold[data-estado="lee"] .f-ojos { transform: translateY(4px) scaleY(.87); animation: f-lee-ojos 2.2s ease-in-out infinite; }
@keyframes f-lee-ojos {
  0%, 100% { transform: translateY(4px) scaleY(.87) translateX(0); }
  25% { transform: translateY(4px) scaleY(.87) translateX(-5px); }
  75% { transform: translateY(4px) scaleY(.87) translateX(5px); }
}
.fold[data-estado="sorpresa"] .f-ojos { transform: scale(1.18); }
.fold[data-estado="duerme"] .f-ojo { animation: none; transform: scaleY(.1); }

/* --- boca: tres variantes, cruzan por opacidad --- */
.f-boca { transition: opacity .25s cubic-bezier(.16,1,.3,1); opacity: 0; }
.f-boca-sonrisa, .f-boca-linea { fill: none; stroke: #1E2026; stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; }
.f-boca-o { fill: #1E2026; }
.fold:not([data-estado]) .f-boca-sonrisa,
.fold[data-estado="reposo"] .f-boca-sonrisa,
.fold[data-estado="ok"] .f-boca-sonrisa,
.fold[data-estado="celebra"] .f-boca-sonrisa,
.fold[data-estado="saluda"] .f-boca-sonrisa,
.fold[data-estado="senala"] .f-boca-sonrisa { opacity: 1; }
.fold[data-estado="piensa"] .f-boca-linea,
.fold[data-estado="lee"] .f-boca-linea,
.fold[data-estado="duerme"] .f-boca-linea { opacity: 1; }
.fold[data-estado="sorpresa"] .f-boca-o { opacity: 1; }

.f-cejas { fill: none; stroke: #1E2026; stroke-width: 5; stroke-linecap: round; opacity: 0; transition: opacity .25s; }
.fold[data-estado="sorpresa"] .f-cejas { opacity: 1; }

/* --- lee: barra de avance bajo el renglón --- */
.f-progreso { opacity: 0; transform-origin: left; transform: scaleX(0); fill: #3358FF; }
.fold[data-estado="lee"] .f-progreso { animation: f-avance 1.7s ease-in-out infinite; }
@keyframes f-avance { 0% { transform: scaleX(0); opacity: 1; } 55% { transform: scaleX(1); opacity: 1; } 75% { opacity: 0; } 100% { transform: scaleX(0); opacity: 0; } }

/* --- piensa: la esquina se pliega y tres burbujas de papel --- */
.f-esquinagrp { transform-box: fill-box; transform-origin: top right; }
.fold[data-estado="piensa"] .f-esquinagrp { animation: f-pliega 1.7s ease-in-out infinite; }
@keyframes f-pliega { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.82); } }

.f-burbuja { opacity: 0; }
.fold[data-estado="piensa"] .f-burbuja { animation: f-burbuja 1.8s ease-in-out infinite; }
.fold[data-estado="piensa"] .f-burbuja:nth-of-type(2) { animation-delay: .2s; }
.fold[data-estado="piensa"] .f-burbuja:nth-of-type(3) { animation-delay: .4s; }
@keyframes f-burbuja { 0%, 100% { opacity: 0; transform: scale(.6); } 40% { opacity: 1; transform: scale(1); } }

/* --- ok: la esquina dibuja un visto cobalto --- */
.f-check { fill: none; stroke: #3358FF; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; opacity: 0; }
.fold[data-estado="ok"] .f-check { animation: f-check .9s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes f-check { 0% { opacity: 1; stroke-dashoffset: 40; } 45% { stroke-dashoffset: 0; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* --- brazos: ocultos en reposo, cada estado enseña los suyos --- */
.f-brazo { opacity: 0; stroke: var(--f-brazo); fill: none; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; transition: opacity .25s; }
.f-alza-i { transform-box: fill-box; transform-origin: 100% 100%; }
.f-alza-d { transform-box: fill-box; transform-origin: 0% 100%; }
.fold[data-estado="saluda"] .f-alza-d { opacity: 1; animation: f-onda .8s ease-in-out 2; }
@keyframes f-onda { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-16deg); } }
.fold[data-estado="celebra"] .f-alza-i,
.fold[data-estado="celebra"] .f-alza-d { opacity: 1; animation: f-fiesta 1.4s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes f-fiesta { 0% { opacity: 0; transform: rotate(0); } 15% { opacity: 1; } 30% { transform: rotate(-10deg); } 45% { transform: rotate(6deg); } 85% { opacity: 1; } 100% { opacity: 0; } }
.fold[data-estado="sorpresa"] .f-susto-i,
.fold[data-estado="sorpresa"] .f-susto-d { opacity: 1; animation: f-susto .55s ease-out forwards; }
@keyframes f-susto { 0% { opacity: 0; } 20%, 80% { opacity: 1; } 100% { opacity: 0; } }

.f-brazo-senala { stroke: var(--f-brazo); fill: none; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.f-senala { opacity: 0; transform-box: fill-box; transform-origin: 0% 100%; transition: opacity .25s; }
.fold[data-estado="senala"] .f-senala { opacity: 1; animation: f-toca 1.4s ease-in-out infinite; }
@keyframes f-toca { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

.f-chispa { opacity: 0; stroke: #3358FF; fill: none; stroke-width: 3.5; stroke-linecap: round; transition: opacity .25s; }
.fold[data-estado="saluda"] .f-chispa { opacity: 1; animation: f-chispea 1.6s ease-in-out infinite; }
@keyframes f-chispea { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* --- duerme: ojos cerrados y Zzz que sube y se apaga --- */
.f-zzz { opacity: 0; transition: opacity .3s; }
.fold[data-estado="duerme"] .f-zzz { opacity: 1; }
.f-zzz text { fill: #3358FF; font-family: Archivo, system-ui, sans-serif; font-weight: 800; animation: f-zzz 2.4s ease-in-out infinite; }
.f-zzz text:nth-child(2) { animation-delay: .5s; }
@keyframes f-zzz { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 80% { opacity: .2; } 100% { opacity: 0; transform: translateY(-10px); } }

/* --- sorpresa/error amable: el renglón avisa en ámbar --- */
.f-renglon { transition: stroke .2s; }
.fold[data-estado="sorpresa"] .f-renglon { stroke: #F5A524; }

/* --- celebra: papelitos --- */
.f-confeti rect { opacity: 0; transform-box: fill-box; transform-origin: center; }
.fold[data-estado="celebra"] .f-confeti rect { animation: f-confeti .9s ease-out forwards; }
@keyframes f-confeti { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .fold * { animation: none !important; transition: none !important; }
  .fold[data-estado="ok"] .f-check { opacity: 1; stroke-dashoffset: 0; }
  .fold[data-estado="sorpresa"] .f-boca-o, .fold[data-estado="sorpresa"] .f-cejas { opacity: 1; }
  .fold[data-estado="duerme"] .f-zzz { opacity: 1; }
  .fold[data-estado="duerme"] .f-ojo { transform: scaleY(.1); }
  .fold[data-estado="saluda"] .f-alza-d,
  .fold[data-estado="celebra"] .f-alza-i,
  .fold[data-estado="celebra"] .f-alza-d,
  .fold[data-estado="senala"] .f-senala { opacity: 1; }
  .fold[data-estado="lee"] .f-progreso { opacity: 1; transform: scaleX(1); }
}

/* ================= PANTALLAS LISTAS PARA USAR ================= */
/* Usan los tokens de tokens.css si estan cargados; si no, caen en el oscuro de casa. */

.fold-pantalla {
  display: grid;
  place-items: center;
  gap: 16px;
  padding: 40px 20px;
  text-align: center;
  font-family: var(--fuente, Archivo, system-ui, sans-serif);
  color: var(--texto, #F2EEE6);
}
.fold-pantalla p { margin: 0; color: var(--texto-2, #BDB8AE); font-size: .95rem; }
.fold-pantalla-carga { position: relative; }
.fold-pantalla .fold { width: 96px; height: 84px; }

/* 1. Carga de pagina completa: Fold dobla una hoja y la mete en la carpeta */
.fold-carpeta-caja { position: relative; width: 96px; height: 60px; }
.fold-carpeta-icono { width: 100%; height: 100%; }
.fold-hoja {
  position: absolute; left: 50%; top: -30px; width: 22px; height: 28px;
  background: #F2EEE6; border: 1px solid #C9C3B6; border-radius: 2px;
  animation: fold-mete-hoja 1.6s cubic-bezier(.5,0,.75,0) infinite;
}
@keyframes fold-mete-hoja {
  0% { transform: translate(-50%, 0) scale(1); opacity: 1; }
  70% { transform: translate(-10%, 40px) scale(.5); opacity: 1; }
  100% { transform: translate(-10%, 44px) scale(.15); opacity: 0; }
}

/* 2. Barra de progreso con Fold caminando */
.fold-barra { position: relative; width: 100%; max-width: 420px; padding-top: 40px; }
.fold-barra-pista { height: 8px; border-radius: 4px; background: var(--linea-fuerte, rgba(242,238,230,.18)); overflow: hidden; }
.fold-barra-relleno { height: 100%; border-radius: 4px; background: var(--accion, #3358FF); width: calc(var(--progreso, 0) * 1%); transition: width .3s cubic-bezier(.16,1,.3,1); }
.fold-barra-viajero {
  position: absolute; top: 0; width: 56px; height: 49px;
  left: calc(var(--progreso, 0) * 1% - 28px);
  transition: left .3s cubic-bezier(.16,1,.3,1);
  animation: fold-camina 1.1s ease-in-out infinite;
}
@keyframes fold-camina { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-4px) rotate(3deg); } }

/* 3. Subiendo tu archivo: Fold se come el papel */
.fold-subida { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fold-subida-papel {
  position: absolute; top: 0; left: 50%; width: 18px; height: 24px;
  background: #F2EEE6; border: 1px solid #C9C3B6; border-radius: 2px;
  animation: fold-come 1.3s cubic-bezier(.5,0,.75,0) infinite;
}
@keyframes fold-come {
  0% { transform: translate(-50%, -44px) scale(1); opacity: 1; }
  70% { transform: translate(-4px, 6px) scale(.35); opacity: 1; }
  100% { transform: translate(-4px, 6px) scale(.1); opacity: 0; }
}

/* 4. Pensando la respuesta: burbuja con puntos */
.fold-piensa-burbuja { display: flex; align-items: center; gap: 10px; }
.fold-piensa-burbuja .fold { width: 56px; height: 49px; }
.fold-puntos { display: flex; gap: 5px; padding: 10px 14px; border-radius: 14px; background: var(--panel, #181B21); }
.fold-puntos i { width: 6px; height: 6px; border-radius: 50%; background: var(--texto-3, #8F8B83); font-style: normal; animation: fold-punto 1.1s ease-in-out infinite; }
.fold-puntos i:nth-child(2) { animation-delay: .15s; }
.fold-puntos i:nth-child(3) { animation-delay: .3s; }
@keyframes fold-punto { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

/* 5. Estado vacio, 6. 404, 7. error de conexion: usan .fold-pantalla + data-estado="senala"/"sorpresa" */
.fold-pantalla-titulo { font-size: 1.15rem; font-weight: 650; margin: 0; }
.fold-pantalla-cifra { font-size: clamp(2.4rem, 8vw, 4rem); font-weight: 800; line-height: 1; margin: 0; color: var(--acento-texto, #8FA6FF); }
.fold-pantalla button {
  margin-top: 6px; padding: 10px 22px; border: 0; border-radius: 6px;
  background: var(--accion, #3358FF); color: var(--accion-etiqueta, #FFFFFF);
  font: inherit; font-weight: 650; cursor: pointer; transition: background .2s cubic-bezier(.16,1,.3,1);
}
.fold-pantalla button:hover { background: var(--accion-hover, #2D4DE0); }

@media (prefers-reduced-motion: reduce) {
  .fold-hoja, .fold-barra-viajero, .fold-subida-papel, .fold-puntos i { animation: none !important; }
}