/* =====================================================
   TREE SPINNER — arbolito creciendo
   Duración: --ts-dur (sm = 1.8s · lg = 2.6s)
   Timeline % se mantiene igual en ambos tamaños

   Secuencia de animación (% del loop):
   0–5 %  : fade-in del SVG wrapper
   5–18%  : tronco crece desde abajo
   18–30% : ramas principales se dibujan
   23–35% : rama central
   28–42% : ramas secundarias
   37–53% : follaje exterior aparece con rebote
   44–60% : follaje central
   52–67% : follaje superior
   60–73% : destellos de hojitas
   73–80% : árbol completo visible (hold)
   80–88% : fade-out del SVG wrapper
   88–100%: reset invisible → listo para el loop
   ===================================================== */

/* ── Variables y contenedor ─────────────────────────── */

.ts-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  --ts-dur: 2.4s;
}

.ts-sm {
  width: 26px;
  height: 28px;
  --ts-dur: 1.8s;
}

.ts-lg {
  width: 150px;
  height: 160px;
  --ts-dur: 2.6s;
}

/* ── SVG principal: fade in / out del ciclo ─────────── */

.ts-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: ts-fade var(--ts-dur) ease-in-out infinite;
  will-change: opacity;
}

@keyframes ts-fade {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  73%  { opacity: 1; }
  85%  { opacity: 0; }
  100% { opacity: 0; }
}

/* ── Tronco: crece desde abajo (5–18%) ──────────────── */

.ts-trunk {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: ts-trunk-grow var(--ts-dur) ease-out infinite;
  will-change: transform;
}

@keyframes ts-trunk-grow {
  0%, 5%  { transform: scaleY(0); }
  18%     { transform: scaleY(1); }
  85%     { transform: scaleY(1); }
  100%    { transform: scaleY(0); }
}

/* ── Sombra de suelo (sincronizada con tronco) ──────── */

.ts-ground {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: ts-ground-grow var(--ts-dur) ease-out infinite;
}

@keyframes ts-ground-grow {
  0%, 5%  { transform: scaleX(0); opacity: 0; }
  18%     { transform: scaleX(1); opacity: 1; }
  85%     { transform: scaleX(1); opacity: 1; }
  100%    { transform: scaleX(0); opacity: 0; }
}

/* ── Ramas principales: se dibujan (18–30 / 20–32%) ─── */

.ts-bl1 {
  stroke-dasharray: 25;
  stroke-dashoffset: 25;
  animation: ts-draw-bl1 var(--ts-dur) ease-in-out infinite;
}

.ts-br1 {
  stroke-dasharray: 25;
  stroke-dashoffset: 25;
  animation: ts-draw-br1 var(--ts-dur) ease-in-out infinite;
}

@keyframes ts-draw-bl1 {
  0%, 18% { stroke-dashoffset: 25; }
  30%     { stroke-dashoffset: 0; }
  85%     { stroke-dashoffset: 0; }
  100%    { stroke-dashoffset: 25; }
}

@keyframes ts-draw-br1 {
  0%, 20% { stroke-dashoffset: 25; }
  32%     { stroke-dashoffset: 0; }
  85%     { stroke-dashoffset: 0; }
  100%    { stroke-dashoffset: 25; }
}

/* ── Rama central (23–35%) ──────────────────────────── */

.ts-bc {
  stroke-dasharray: 18;
  stroke-dashoffset: 18;
  animation: ts-draw-bc var(--ts-dur) ease-in-out infinite;
}

@keyframes ts-draw-bc {
  0%, 23% { stroke-dashoffset: 18; }
  35%     { stroke-dashoffset: 0; }
  85%     { stroke-dashoffset: 0; }
  100%    { stroke-dashoffset: 18; }
}

/* ── Ramas secundarias (28–42%) ─────────────────────── */

.ts-bl2 {
  stroke-dasharray: 21;
  stroke-dashoffset: 21;
  animation: ts-draw-bl2 var(--ts-dur) ease-in-out infinite;
}

.ts-br2 {
  stroke-dasharray: 21;
  stroke-dashoffset: 21;
  animation: ts-draw-br2 var(--ts-dur) ease-in-out infinite;
}

@keyframes ts-draw-bl2 {
  0%, 28% { stroke-dashoffset: 21; }
  42%     { stroke-dashoffset: 0; }
  85%     { stroke-dashoffset: 0; }
  100%    { stroke-dashoffset: 21; }
}

@keyframes ts-draw-br2 {
  0%, 30% { stroke-dashoffset: 21; }
  44%     { stroke-dashoffset: 0; }
  85%     { stroke-dashoffset: 0; }
  100%    { stroke-dashoffset: 21; }
}

/* ── Follaje exterior izq/der (37–53%) ──────────────── */

.ts-fol,
.ts-for,
.ts-foc,
.ts-fot,
.ts-sp1,
.ts-sp2,
.ts-sp3 {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  will-change: transform;
}

.ts-fol { animation: ts-fol var(--ts-dur) ease-in-out infinite; }
.ts-for { animation: ts-for var(--ts-dur) ease-in-out infinite; }
.ts-foc { animation: ts-foc var(--ts-dur) ease-in-out infinite; }
.ts-fot { animation: ts-fot var(--ts-dur) ease-in-out infinite; }
.ts-sp1 { animation: ts-sp1 var(--ts-dur) ease-in-out infinite; }
.ts-sp2 { animation: ts-sp2 var(--ts-dur) ease-in-out infinite; }
.ts-sp3 { animation: ts-sp3 var(--ts-dur) ease-in-out infinite; }

@keyframes ts-fol {
  0%, 37% { transform: scale(0); }
  50%     { transform: scale(1.1); }
  56%     { transform: scale(1); }
  85%     { transform: scale(1); }
  100%    { transform: scale(0); }
}

@keyframes ts-for {
  0%, 39% { transform: scale(0); }
  52%     { transform: scale(1.1); }
  58%     { transform: scale(1); }
  85%     { transform: scale(1); }
  100%    { transform: scale(0); }
}

@keyframes ts-foc {
  0%, 44% { transform: scale(0); }
  57%     { transform: scale(1.12); }
  63%     { transform: scale(1); }
  85%     { transform: scale(1); }
  100%    { transform: scale(0); }
}

@keyframes ts-fot {
  0%, 52% { transform: scale(0); }
  65%     { transform: scale(1.15); }
  71%     { transform: scale(1); }
  85%     { transform: scale(1); }
  100%    { transform: scale(0); }
}

@keyframes ts-sp1 {
  0%, 60% { transform: scale(0); opacity: 0; }
  68%     { transform: scale(1.5); opacity: 1; }
  73%     { transform: scale(1);   opacity: 1; }
  85%     { transform: scale(1);   opacity: 1; }
  100%    { transform: scale(0);   opacity: 0; }
}

@keyframes ts-sp2 {
  0%, 63% { transform: scale(0); opacity: 0; }
  71%     { transform: scale(1.5); opacity: 1; }
  76%     { transform: scale(1);   opacity: 1; }
  85%     { transform: scale(1);   opacity: 1; }
  100%    { transform: scale(0);   opacity: 0; }
}

@keyframes ts-sp3 {
  0%, 66% { transform: scale(0); opacity: 0; }
  74%     { transform: scale(1.5); opacity: 1; }
  79%     { transform: scale(1);   opacity: 1; }
  85%     { transform: scale(1);   opacity: 1; }
  100%    { transform: scale(0);   opacity: 0; }
}

/* =====================================================
   PAGE LOADER — overlay de pantalla completa
   ===================================================== */

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 253, 248, 0.93);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: pl-appear 0.28s ease both;
}

@keyframes pl-appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.page-loader__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Texto con puntitos animados */
.page-loader__text {
  margin: 0;
  font: 600 0.78rem/1 var(--font-sans, sans-serif);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #4a7c59;
}

.pl-dot {
  opacity: 0;
  animation: pl-dot 1.2s ease-in-out infinite;
  animation-fill-mode: both;
}

.pl-dot--1 { animation-delay: 0s; }
.pl-dot--2 { animation-delay: 0.28s; }
.pl-dot--3 { animation-delay: 0.56s; }

@keyframes pl-dot {
  0%, 100% { opacity: 0; }
  50%       { opacity: 1; }
}

/* Hojitas flotantes */
.page-loader__leaves {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.pl-leaf {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -7px;
  margin-left: -5px;
  width: 10px;
  height: 14px;
  background: #4a7c59;
  border-radius: 50% 8% 50% 8%;
  opacity: 0;
}

.pl-l1 { animation: pl-float1 3.8s ease-out infinite; animation-delay: 0.5s; }
.pl-l2 { animation: pl-float2 4.2s ease-out infinite; animation-delay: 1.2s; }
.pl-l3 { animation: pl-float3 3.5s ease-out infinite; animation-delay: 2.0s; }
.pl-l4 { animation: pl-float4 4.0s ease-out infinite; animation-delay: 0.2s; background: #82c98f; }
.pl-l5 { animation: pl-float5 3.7s ease-out infinite; animation-delay: 2.8s; background: #82c98f; }
.pl-l6 { animation: pl-float6 4.5s ease-out infinite; animation-delay: 1.6s; background: #a3d9a5; }

@keyframes pl-float1 {
  0%   { transform: translate(0, 0) rotate(0deg) scale(0.9);   opacity: 0; }
  12%  { opacity: 0.65; }
  100% { transform: translate(-140px, -200px) rotate(-120deg) scale(0.3); opacity: 0; }
}

@keyframes pl-float2 {
  0%   { transform: translate(0, 0) rotate(0deg) scale(0.9);  opacity: 0; }
  12%  { opacity: 0.5; }
  100% { transform: translate(130px, -190px) rotate(90deg) scale(0.3); opacity: 0; }
}

@keyframes pl-float3 {
  0%   { transform: translate(0, 0) rotate(0deg) scale(0.85); opacity: 0; }
  12%  { opacity: 0.6; }
  100% { transform: translate(70px, -240px) rotate(60deg) scale(0.2); opacity: 0; }
}

@keyframes pl-float4 {
  0%   { transform: translate(0, 0) rotate(0deg) scale(0.7);  opacity: 0; }
  12%  { opacity: 0.45; }
  100% { transform: translate(-90px, -170px) rotate(-80deg) scale(0.25); opacity: 0; }
}

@keyframes pl-float5 {
  0%   { transform: translate(0, 0) rotate(0deg) scale(0.8);  opacity: 0; }
  12%  { opacity: 0.55; }
  100% { transform: translate(40px, -220px) rotate(150deg) scale(0.2); opacity: 0; }
}

@keyframes pl-float6 {
  0%   { transform: translate(0, 0) rotate(0deg) scale(0.85); opacity: 0; }
  12%  { opacity: 0.4; }
  100% { transform: translate(-55px, -195px) rotate(-45deg) scale(0.3); opacity: 0; }
}

/* =====================================================
   ALERT PROVIDER — small action feedback, React parity
   ===================================================== */

.alert-stack {
  position: fixed;
  top: 84px;
  right: 18px;
  z-index: 2500;
  display: grid;
  gap: 10px;
  width: min(380px, calc(100vw - 24px));
  pointer-events: none;
}

.app-alert {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid #dfd0bc;
  border-left: 4px solid #cbb895;
  border-radius: 10px;
  background: rgba(255, 253, 248, 0.98);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #1a120b;
  padding: 12px 12px 12px 10px;
  box-shadow: 0 18px 46px rgba(26, 18, 11, 0.2);
  animation: alertIn 0.22s ease both;
}

.app-alert.is-leaving {
  animation: alertOut 0.2s ease both;
}

.app-alert p {
  margin: 0;
  font: 800 0.82rem/1.35 var(--font-sans, sans-serif);
}

.app-alert.tone-success {
  border-color: #b8d5bc;
  border-left-color: #4a7c59;
  background: rgba(240, 248, 243, 0.98);
}

.app-alert.tone-error {
  border-color: #e2b8ae;
  border-left-color: #a3392d;
  background: rgba(253, 244, 242, 0.98);
}

.app-alert.tone-info {
  border-color: #cbb895;
  border-left-color: #8f6d3f;
}

@keyframes alertIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes alertOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8px); }
}

@media (max-width: 640px) {
  .alert-stack {
    top: 70px;
    right: 8px;
    width: calc(100vw - 16px);
  }
}