/* =============================================================================
   progress.css — BARRAS DE PROGRESO UNIFICADAS
   ─────────────────────────────────────────────────────────────────────────────
   Fuente canónica para TODAS las barras de progreso del proyecto.

   Carga bajo demanda desde cualquier PHP element que las use:
     $this->Html->css('progress', ['block' => true]);
   CakePHP deduplica: si se incluye varias veces en la misma página, solo
   se emite una etiqueta <link>.

   VARIANTES
   ──────────
   A. Base animation         → .js-progress-bar + --progress + .is-revealed
   B. Acción: total-bar      → contador de firmas pequeño en widget de formulario
   C. Acción: cpn-counter-bar→ barra grande animada exclusiva de actions.php
   D. Donativo: donation-progress-component → recaudación / hitos / fundraiser

   ANIMACIÓN
   ──────────
   · PHP:       style="--progress: XX%"       (valor objetivo)
   · CSS:       width: 0% → transition → var(--progress)
   · modern.js: añade .is-revealed vía IntersectionObserver al entrar en viewport
   · Fallback:  si modern.js no está, donation_progress.js lo activa directamente

   TOKENS REQUERIDOS
   ──────────────────
   De actions/_tokens.css: --form-progress-bg, --form-progress-fill,
     --form-font-size-base, --form-color-gray, --counter-bar-*
   De giving/_tokens.css:  --giving-color-yellow, --giving-color-blue,
     --giving-border-yellow, --giving-color-midnight, --giving-color-white,
     --giving-color-lightgray, --giving-color-gray, --giving-color-darkgray
   ============================================================================= */


/* ════════════════════════════════════════════════════════════════════════════
   A. BASE ANIMATION — .js-progress-bar
   ════════════════════════════════════════════════════════════════════════════

   Mecanismo compartido por TODAS las barras.
   No añade color ni dimensiones: eso lo hace cada variante.

   Uso mínimo en PHP:
     <div class="progress-bar js-progress-bar" style="--progress: 42%"></div>
   ════════════════════════════════════════════════════════════════════════════ */

.js-progress-bar {
  width:      0%;
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-progress-bar.is-revealed {
  width: var(--progress, 0%);
}

/* Para barras que ya tienen width inline (fundraiser Bootstrap compat):
   se sobreescribe con la var cuando modern.js revela */
.progress-bar.js-progress-bar {
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.progress-bar.js-progress-bar.is-revealed {
  width: var(--progress, 0%) !important;
}

/* Accesibilidad: sin transición si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  .js-progress-bar,
  .progress-bar.js-progress-bar {
    transition: none;
    width: var(--progress, 0%) !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   B. VARIANTE ACCIÓN — TOTAL BAR (contador de firmas pequeño)
   Generado por form-post-counter.php · $display = 'counter'
   ════════════════════════════════════════════════════════════════════════════ */

/* Override Bootstrap .progress para acción */
.progress {
  height:        8px;
  font-size:     1%;
  margin-bottom: 0;
  background:    var(--form-progress-bg, #dbd9db);
  border-color:  var(--form-progress-bg, #dbd9db);
}

.progress-bar {
  background-color: var(--form-progress-fill, #DC1D13);
  border-color:     var(--form-progress-fill, #DC1D13);
}

.progress-bar-branded {
  background-color: var(--form-progress-fill, #DC1D13);
}

/* Contenedor del contador pequeño */
#form-counter {
  display:       block;
  font-size:     var(--form-font-size-base, 0.85rem);
  color:         var(--form-color-gray, #75787b);
  margin-bottom: 0.75rem;
}

.total-bar {
  padding:       0;
  margin-top:    0 !important;
  margin-bottom: 0.8rem !important;
}

.total-bar span { display: inline; }

.total-bar .progress {
  height:        8px;
  font-size:     1%;
  margin-bottom: 0;
  border-radius: 0;
}

.total-bar .float-end {
  font-size:  0.75rem;
  margin-top: 0.2rem;
  color:      var(--form-color-gray, #75787b);
}


/* ════════════════════════════════════════════════════════════════════════════
   C. VARIANTE ACCIÓN — CPN COUNTER BAR (barra grande de campaña)
   Generado por form-post-counter.php · $display = 'bar'
   Animado por modern.js via .js-progress-bar + IntersectionObserver
   ════════════════════════════════════════════════════════════════════════════ */

.cpn-counter-bar {
  background:  var(--counter-bar-bg, #1d252c);
  color:       var(--counter-bar-text, #fff);
  padding:     0.65rem 1.25rem;
  display:     flex;
  align-items: center;
  gap:         1rem;
  flex-shrink: 0;
  font-family: var(--counter-bar-font, inherit);
}

.cpn-counter-bar__icon {
  color:       var(--counter-bar-accent, #DC1D13);
  flex-shrink: 0;
}
.cpn-counter-bar__icon svg {
  display: block;
  width:   24px;
  height:  24px;
}

.cpn-counter-bar__item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  min-width:      60px;
}

.cpn-counter-bar__label {
  font-size:      0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity:        0.55;
  line-height:    1;
}

.cpn-counter-bar__value {
  font-size:            1.35rem;
  font-weight:          900;
  color:                var(--counter-bar-accent, #DC1D13);
  line-height:          1.1;
  font-variant-numeric: tabular-nums;
}

.cpn-counter-bar__progress {
  flex:          1;
  height:        4px;
  background:    var(--counter-bar-track, rgba(255,255,255,0.15));
  border-radius: 2px;
  overflow:      hidden;
}

/* Fill usa el mecanismo base .js-progress-bar */
.cpn-counter-bar__fill {
  height:        100%;
  background:    var(--counter-bar-accent, #DC1D13);
  border-radius: 2px;
}


/* ════════════════════════════════════════════════════════════════════════════
   D. VARIANTE DONATIVO — DONATION PROGRESS COMPONENT
   Usado por: landing-progress.php, fundraiser.php, landing-goal.php
   ════════════════════════════════════════════════════════════════════════════ */

/* Contenedor raíz */
#donation-progress-component {
  container-type: inline-size;
}

/* Track de la barra */
.progress-bar-container {
  background-color: var(--giving-color-gray, #EAEAE7);
  border-radius:    100px;
  overflow:         hidden;
  position:         relative;
  /* height lo inyecta PHP via style="height:Xpx" */
}

/* Fill base para donativos: usa el color blue del giving token */
.donation-progress-component .progress-bar {
  height:               100%;
  background-color:     var(--giving-color-blue, #369ff4);
  border-radius:        100px;
  font-weight:          bold;
  font-variant-numeric: tabular-nums;
}

/* Modificador: color amarillo/warning (landing-goal, fundraiser) */
.donation-progress-component .progress-bar--warning,
.donation-progress-component .progress-bar.bg-warning {
  background-color: var(--giving-color-yellow, #EACD27) !important;
  border-color:     var(--giving-border-yellow, #FFCA0A) !important;
}

/* Modificador: degradado dorado → naranja (variante milestones) */
.donation-progress-component .progress-bar--gradient {
  background: linear-gradient(
    to right,
    var(--giving-color-yellow, #EACD27),
    #bf360c
  ) !important;
}

/* Texto del porcentaje dentro de la barra (variante milestones) */
.donation-progress-component .progress-bar.has-label {
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--giving-color-white, #FFFFFF);
  font-size:       0.75rem;
  min-width:       2.5rem; /* asegura que el label no se corte */
}

/* ── Hitos (variante milestones) ─────────────────────────────────────────── */

.donation-progress-component .milestone {
  position:         absolute;
  top:              0;
  bottom:           0;
  width:            2px;
  background-color: rgba(255, 255, 255, 0.8);
  z-index:          2;
}

.donation-progress-component .milestone-label {
  display:       none;
  position:      absolute;
  top:           -35px;
  left:          -60px;
  width:         120px;
  background:    var(--giving-color-midnight, #333232);
  color:         var(--giving-color-white, #FFFFFF);
  text-align:    center;
  font-size:     0.8rem;
  padding:       4px 6px;
  border-radius: 6px;
  z-index:       10;
}

@keyframes floatUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.donation-progress-component .milestone-label.is-visible {
  display:   block;
  animation: floatUp 0.4s ease-out forwards;
}

/* ── Texto de stats debajo de la barra ───────────────────────────────────── */

.donation-progress-component .progress-stats {
  display:         flex;
  justify-content: space-between;
  font-size:       0.8rem;
  color:           var(--giving-color-darkgray, #9b9b94);
  margin-top:      0.5rem;
}

/* ── Fundraiser: Bootstrap .progress wrapper ─────────────────────────────── */
/* Cuando fundraiser.php usa <div class="progress"> en vez de progress-bar-container */

.fundraiser-progress-wrap .progress {
  border-radius: 100px;
  overflow:      hidden;
  background:    var(--giving-color-gray, #EAEAE7);
}