/* ============================================================
   PLENO — Tokens EXTENSIÓN v2 (additive — no modifica tokens.css)
   Colores de proyecto · superficies inmersivas de Foco · cuadernos
   ============================================================ */

/* Botón "Empezar a enfocarme" (pantalla de Foco) — feedback al tocar */
.pl-foco-start { transition: transform .12s ease, box-shadow .12s ease; -webkit-tap-highlight-color: transparent; }
.pl-foco-start:active { transform: scale(0.975); box-shadow: 0 4px 12px rgba(196,150,90,0.30); }

:root {
  /* ---------- COLORES DE PROYECTO (6) ----------
     Mid-tones desaturados que armonizan con cream/ónix/oro.
     Cada uno se usa en: borde izq. de card, barra de progreso,
     tinte de fondo (vía color-mix) y portada de cuaderno. */
  --pl-proj-coral:     #CB7A63;  /* rojo coral cálido */
  --pl-proj-salvia:    #7C9474;  /* verde salvia suave */
  --pl-proj-azul:      #7A8FA6;  /* azul polvo */
  --pl-proj-violeta:   #92829E;  /* violeta pizarra */
  --pl-proj-terracota: #B06B45;  /* terracota / ladrillo */
  --pl-proj-musgo:     #6E7A4C;  /* verde musgo */
  --pl-proj-ocre:      #C19B58;  /* ocre suave */
  --pl-proj-pizarra:   #6D828E;  /* pizarra grisáceo */
  --pl-proj-malva:     #B88C94;  /* rosa malva viejo */
  --pl-proj-pino:      #5C7C6D;  /* verde pino */

  /* ---------- FOCO — inmersivo (más oscuro que la app) ---------- */
  --pl-foco-bg:        #1A1712;  /* arena profunda, negro cálido */
  --pl-foco-bg-2:      #221D17;
  --pl-foco-surface:   #262019;  /* card sobre foco */
  --pl-foco-border:    #3A332A;
  --pl-foco-text:      #F1EBDF;  /* blanco hueso */
  --pl-foco-soft:      #A79E8C;
  --pl-foco-mute:      #756B5B;

  /* Descanso — un punto más claro y verdoso (respiro) */
  --pl-foco-break-bg:     #19211C;
  --pl-foco-break-bg-2:   #1F2A23;
  --pl-foco-break-surf:   #233029;
  --pl-foco-break-accent: #82B49C;  /* turquesa salvia suave */
  --pl-foco-break-soft:   #93B7A6;
}

/* En modo noche los colores de proyecto se aclaran un punto para brillar
   sobre negro cálido (mantienen identidad y contraste de texto blanco). */
.pl-dark {
  --pl-proj-coral:     #DD9079;
  --pl-proj-salvia:    #94AD8B;
  --pl-proj-azul:      #93A8BE;
  --pl-proj-violeta:   #AB9BB6;
  --pl-proj-terracota: #C9835C;
  --pl-proj-musgo:     #8E9A66;
  --pl-proj-ocre:      #D7B372;
  --pl-proj-pizarra:   #8CA3B0;
  --pl-proj-malva:     #D4A7AF;
  --pl-proj-pino:      #779C8C;
}

/* Utilidad: tinte translúcido de un color de proyecto (fondo de card/área) */
.pl-proj-tint { background: color-mix(in srgb, var(--pl-proj) 12%, var(--pl-surface)); }

/* Barra de progreso genérica reutilizable */
.pl-track { height: 7px; border-radius: 999px; background: var(--pl-surface-2); overflow: hidden; }
.pl-track > i { display: block; height: 100%; border-radius: 999px; transition: width .6s var(--pl-ease); }

/* shimmer dorado de celebración (sesión de foco completada) */
.pl-shimmer { position: relative; overflow: hidden; }
.pl-shimmer::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(207,174,99,.32) 50%, transparent 70%);
  transform: translateX(-100%); animation: pl-shimmer-go 2.2s var(--pl-ease) .2s;
}
@keyframes pl-shimmer-go { to { transform: translateX(100%); } }

/* ---------- Feedback de "mantené apretado" (Esfera de voz) ---------- */
/* Halo pulsante alrededor de la esfera central mientras se escucha.
   Comunica que la captura está ACTIVA en este momento. */
.pl-hold-halo {
  position: absolute; left: 50%; top: 50%;
  width: 96px; height: 96px; margin: -48px 0 0 -48px;
  border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(207,174,99,.55);
  animation: pl-hold-pulse 1.4s ease-out infinite;
}
.pl-hold-halo.d2 { animation-delay: .7s; }
@keyframes pl-hold-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(207,174,99,.5); opacity: .9; }
  70%  { box-shadow: 0 0 0 34px rgba(207,174,99,0); opacity: 0; }
  100% { box-shadow: 0 0 0 34px rgba(207,174,99,0); opacity: 0; }
}

/* Indicador inferior: la "esfera chica" iluminada donde está el dedo. */
.pl-hold-dot {
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 28%, #FFE7A5 0%, #E5C158 38%, #AA7C11 78%, #5A3A0B 100%);
  box-shadow: 0 0 0 6px rgba(207,174,99,.18), 0 0 22px 4px rgba(229,193,88,.55), 0 6px 16px rgba(0,0,0,.35);
  animation: pl-hold-breathe 1.25s ease-in-out infinite;
}
@keyframes pl-hold-breathe {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 6px rgba(207,174,99,.16), 0 0 18px 3px rgba(229,193,88,.45), 0 6px 16px rgba(0,0,0,.35); }
  50%      { transform: scale(1.08); box-shadow: 0 0 0 9px rgba(207,174,99,.26), 0 0 30px 8px rgba(229,193,88,.7),  0 6px 16px rgba(0,0,0,.35); }
}