/* ================================================================
   PUNTOSFAMILIA — COMPONENTES REUTILIZABLES
   Cards, botones, inputs, progress bar, badges, utilities.
   Usa exclusivamente variables de design-system.css.
   ================================================================ */

/* ---- CARDS ---------------------------------------------------- */

.pf-card {
  background:     var(--bg-surface);
  border:         1px solid var(--border-default);
  border-radius:  var(--radius-lg);
  padding:        var(--space-6);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow:     var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.06);
  transition:
    transform       var(--transition-normal),
    box-shadow      var(--transition-normal),
    border-color    var(--transition-normal);
  animation: fadeInUp var(--duration-normal) var(--ease-out) both;
}

.pf-card:hover {
  transform:    translateY(-4px);
  box-shadow:   var(--shadow-lg), var(--glow-primary), inset 0 1px 0 rgba(255,255,255,0.08);
  border-color: var(--border-strong);
}

.pf-card-title {
  font-size:   var(--text-xl);
  font-weight: var(--weight-bold);
  color:       var(--text-primary);
  margin:      0 0 var(--space-4) 0;
  background:  var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- BOTONES -------------------------------------------------- */

.pf-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  padding:         10px var(--space-6);
  border-radius:   var(--radius-md);
  border:          none;
  font-family:     var(--font-sans);
  font-size:       var(--text-sm);
  font-weight:     var(--weight-semibold);
  cursor:          pointer;
  text-decoration: none;
  white-space:     nowrap;
  transition:
    transform   var(--transition-fast),
    box-shadow  var(--transition-fast),
    filter      var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.pf-btn:active { transform: scale(0.96); }

.pf-btn-primary {
  background:  var(--gradient-primary);
  color:       var(--text-on-color);
  box-shadow:  0 4px 16px var(--color-primary-glow);
}
.pf-btn-primary:hover {
  filter:     brightness(1.12);
  box-shadow: 0 6px 28px var(--color-primary-glow),
              0 0 0 1px rgba(255,255,255,0.1) inset;
}

.pf-btn-secondary {
  background:  var(--gradient-accent);
  color:       var(--text-on-color);
  box-shadow:  0 4px 16px var(--color-accent-glow);
}
.pf-btn-secondary:hover {
  filter:     brightness(1.12);
  box-shadow: 0 6px 28px var(--color-accent-glow);
}

.pf-btn-success {
  background:  var(--gradient-success);
  color:       var(--text-on-color);
  box-shadow:  0 4px 16px var(--color-success-glow);
}
.pf-btn-success:hover { filter: brightness(1.12); }

.pf-btn-danger {
  background:  var(--gradient-danger);
  color:       var(--text-on-color);
  box-shadow:  0 4px 16px var(--color-danger-dim);
}
.pf-btn-danger:hover { filter: brightness(1.12); }

.pf-btn-ghost {
  background:   var(--bg-surface-2);
  border:       1px solid var(--border-default);
  color:        var(--text-primary);
}
.pf-btn-ghost:hover { border-color: var(--color-primary); }

.pf-btn-full  { width: 100%; }
.pf-btn-block { width: 100%; }
.pf-btn-sm    { padding: 6px var(--space-4); font-size: var(--text-xs); }

.pf-btn:disabled {
  opacity:   0.38;
  cursor:    not-allowed;
  filter:    none;
  transform: none;
  box-shadow: none;
}

/* ---- INPUTS --------------------------------------------------- */

.pf-input {
  width:        100%;
  padding:      10px var(--space-4);
  background:   var(--bg-surface-2);
  border:       1px solid var(--border-default);
  border-radius: var(--radius-md);
  color:        var(--text-primary);
  font-family:  var(--font-sans);
  font-size:    var(--text-md);
  transition:
    border-color  var(--transition-fast),
    box-shadow    var(--transition-fast);
}

.pf-input::placeholder { color: var(--text-muted); }

.pf-input:focus {
  outline:      none;
  border-color: var(--color-primary);
  box-shadow:   0 0 0 3px var(--color-primary-dim);
}

textarea.pf-input { resize: vertical; min-height: 80px; line-height: 1.5; }
select.pf-input   { cursor: pointer; }

/* ---- FORMULARIO ---------------------------------------------- */

.pf-form    { display: flex; flex-direction: column; gap: var(--space-4); }
.form-group { display: flex; flex-direction: column; gap: var(--space-1); }

.pf-label {
  display:     block;
  font-size:   var(--text-sm);
  font-weight: var(--weight-medium);
  color:       var(--text-secondary);
}

/* ---- PROGRESS BAR -------------------------------------------- */

.pf-progress-bar {
  width:         100%;
  height:        10px;
  border-radius: var(--radius-full);
  background:    var(--bg-surface-2);
  overflow:      visible;
  border:        1px solid var(--border-subtle);
  position:      relative;
}

.pf-progress-fill {
  position:      relative;
  height:        100%;
  border-radius: var(--radius-full);
  background:    var(--gradient-primary);
  transition:    width 700ms var(--ease-out);
  overflow:      visible;
  min-width:     0;
}

/* Rayo ⚡ deslizante en el extremo derecho del fill */
.pf-progress-fill::after {
  content:     '⚡';
  position:    absolute;
  right:       -10px;
  top:         50%;
  transform:   translateY(-50%);
  font-size:   14px;
  line-height: 1;
  filter:      drop-shadow(0 0 6px rgba(251, 191, 36, 0.9))
               drop-shadow(0 0 12px rgba(251, 191, 36, 0.5));
  animation:   energyPulse 1.4s ease-in-out infinite;
  pointer-events: none;
}

/* Ocultar el rayo si el fill esta al 0% */
.pf-progress-fill[style*="width: 0"]::after,
.pf-progress-fill[style*="width:0"]::after { display: none; }

/* ---- CERRAR SESION ------------------------------------------- */

.pf-footer .pf-link-btn {
  padding:       8px var(--space-5);
  border-radius: var(--radius-full);
  border:        1px solid rgba(239, 68, 68, 0.35);
  background:    rgba(239, 68, 68, 0.08);
  color:         #FC8585;
  font-size:     var(--text-sm);
  font-weight:   var(--weight-semibold);
  letter-spacing: 0.02em;
  transition:
    background  var(--transition-fast),
    color       var(--transition-fast),
    border-color var(--transition-fast),
    transform   var(--transition-fast),
    box-shadow  var(--transition-fast);
}

.pf-footer .pf-link-btn:hover {
  background:   rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.6);
  color:        #FF6B6B;
  box-shadow:   0 0 16px rgba(239, 68, 68, 0.25);
  transform:    scale(1.04);
}

.pf-footer .pf-link-btn:active { transform: scale(0.97); }

/* ---- BADGES / PILLS ------------------------------------------ */

.pf-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       3px 10px;
  border-radius: var(--radius-full);
  font-size:     var(--text-xs);
  font-weight:   var(--weight-semibold);
  border:        1px solid;
}

/* ---- NOTIF BADGE (campanita) ---------------------------------- */

.notif-badge {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  min-width:        18px;
  height:           18px;
  padding:          0 5px;
  background:       var(--color-hot);
  color:            #fff;
  font-size:        10px;
  font-weight:      var(--weight-bold);
  border-radius:    var(--radius-full);
  margin-left:      6px;
  box-shadow:       0 0 10px var(--color-hot-glow);
  animation:        pulse 2s ease-in-out infinite;
  transition:       transform var(--transition-fast);
}

.notif-link:hover .notif-badge {
  transform: scale(1.2);
}

/* ---- TEXTOS DE UTILIDAD -------------------------------------- */

.pf-card-subtitle {
  font-size:   var(--text-sm);
  font-weight: var(--weight-semibold);
  color:       var(--text-secondary);
  margin:      0 0 var(--space-2) 0;
}

.pf-text         { color: var(--text-secondary); font-size: var(--text-sm); }
.pf-small        { font-size: var(--text-xs); color: var(--text-muted); }
.pf-text-center  { text-align: center; }
.pf-subtitle     { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-primary); }
.pf-info         { color: var(--color-success); font-size: var(--text-sm); }
.pf-error        { color: var(--color-danger);   font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.pf-success      { color: var(--color-success);  font-size: var(--text-sm); font-weight: var(--weight-semibold); }

.pf-link {
  color:       var(--color-primary);
  text-decoration: none;
  font-weight: var(--weight-semibold);
  transition:  color var(--transition-fast);
}
.pf-link:hover { color: var(--color-hot); text-decoration: underline; }

.pf-link-btn {
  background:  transparent;
  border:      none;
  cursor:      pointer;
  color:       var(--text-muted);
  font-size:   var(--text-sm);
  font-family: var(--font-sans);
  padding:     0;
  transition:  color var(--transition-fast);
}
.pf-link-btn:hover { color: var(--text-primary); }

/* ---- UTILIDADES ---------------------------------------------- */

.pf-hidden { display: none !important; visibility: hidden !important; }

.pf-divider {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-4) 0;
}

/* ---- RESPONSIVE ---------------------------------------------- */

@media (max-width: 480px) {
  .pf-card { padding: var(--space-4); border-radius: var(--radius-md); }
  .pf-btn  { padding: 10px var(--space-4); }
}