/* ================================================================
   PUNTOSFAMILIA — INDEX / DASHBOARD
   ================================================================ */

/* ---- BLOQUES DE PROGRESO ------------------------------------- */

.pf-progress-block {
  margin-bottom: var(--space-6);
}

.pf-progress-block:last-child { margin-bottom: 0; }

/* Separador entre bloques */
.pf-progress-block + .pf-progress-block {
  padding-top:  var(--space-6);
  border-top:   1px solid var(--border-subtle);
}

.pf-subtitle {
  font-size:   var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:       var(--text-muted);
  margin-bottom: var(--space-3);
}

/* Nombre del usuario */
#dashUserName {
  font-size:   var(--text-xl);
  font-weight: var(--weight-bold);
  color:       var(--text-primary);
  margin-bottom: var(--space-2);
}

.pf-text strong {
  color:       var(--text-primary);
  font-weight: var(--weight-semibold);
}

/* Texto "Faltan X puntos" */
#dashUserTierNext,
#dashPairTierNext {
  font-size:    var(--text-xs);
  color:        var(--text-muted);
  margin-top:   var(--space-2);
  font-style:   italic;
}

/* ---- BARRA PAREJA (color diferente) -------------------------- */

.pf-progress-bar-secondary .pf-progress-fill {
  background: var(--gradient-accent);
}

/* ---- ACCIONES RAPIDAS ---------------------------------------- */

.dashboard-actions {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-3);
  margin-top:            var(--space-4);
}

@media (min-width: 480px) {
  .dashboard-actions { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 700px) {
  .dashboard-actions { grid-template-columns: repeat(3, 1fr); }
}

/* Botones adicionales de acciones rapidas */
.pf-btn-info {
  background: linear-gradient(135deg, #0891B2, #06B6D4);
  color:      var(--text-on-color);
  box-shadow: 0 4px 16px rgba(6, 182, 212, 0.25);
}
.pf-btn-info:hover { filter: brightness(1.1); }

.pf-btn-notif {
  background:  linear-gradient(135deg, #EC4899, #F43F5E);
  color:       var(--text-on-color);
  box-shadow:  0 4px 16px rgba(236, 72, 153, 0.30);
  position:    relative;
}
.pf-btn-notif:hover { filter: brightness(1.1); }

.pf-btn-chat {
  background:  linear-gradient(135deg, #6366F1, #8B5CF6);
  color:       var(--text-on-color);
  box-shadow:  0 4px 16px rgba(99, 102, 241, 0.30);
}
.pf-btn-chat:hover { filter: brightness(1.1); }

.pf-btn-rewards {
  background:  linear-gradient(135deg, #F59E0B, #EF4444);
  color:       var(--text-on-color);
  box-shadow:  0 4px 16px rgba(245, 158, 11, 0.30);
}
.pf-btn-rewards:hover { filter: brightness(1.1); }

/* Badge de conteo sobre boton de notificaciones */
.dash-notif-count {
  display:          inline-flex !important;
  align-items:      center;
  justify-content:  center;
  min-width:        20px;
  height:           20px;
  padding:          0 5px;
  background:       #fff;
  color:            #EC4899;
  font-size:        11px;
  font-weight:      800;
  border-radius:    999px;
  margin-left:      6px;
  animation:        pulse 1.5s ease-in-out infinite;
}

/* Tarjeta de acceso rapido a notificaciones (index.page.js) */
.notif-quick-card {
  display:         block;
  padding:         var(--space-4);
  margin-bottom:   var(--space-3);
  background:      var(--color-primary-dim);
  border:          1px solid var(--border-default);
  border-radius:   var(--radius-md);
  text-decoration: none;
  color:           inherit;
  transition:      transform var(--transition-fast), box-shadow var(--transition-fast);
}

.notif-quick-card:hover {
  transform:   translateX(4px);
  box-shadow:  var(--glow-primary);
  border-color: var(--color-primary);
}

.notif-quick-card .pf-card-title {
  font-size: var(--text-md);
  margin-bottom: var(--space-1);
}

.notif-quick-card .pf-text  { margin: 0; color: var(--text-secondary); }
.notif-quick-card .pf-note  { font-size: var(--text-xs); color: var(--color-primary); margin-top: 4px; }

/* ---- COMENTARIOS Y SUGERENCIAS ------------------------------ */

.resena-form .form-group { margin-bottom: 0; }

.resena-textarea {
  resize:      vertical;
  font-family: inherit;
}

.resenas-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  margin-top:     var(--space-4);
}

/* Card expandible con slide */
.resena-card {
  background:    var(--bg-surface-2);
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  cursor:        pointer;
  transition:
    border-color  var(--transition-fast),
    box-shadow    var(--transition-fast);
  animation:     slideDown var(--duration-normal) var(--ease-out) both;
}

.resena-card:hover {
  border-color: var(--color-primary-dim);
  box-shadow:   var(--shadow-sm);
}

.resena-card-header {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  padding:       var(--space-3) var(--space-4);
  border-bottom: 1px solid transparent;
  transition:    border-color var(--transition-fast);
  user-select:   none;
}

.resena-card.expanded .resena-card-header {
  border-bottom-color: var(--border-subtle);
}

.resena-card-meta {
  display:    flex;
  align-items: center;
  gap:         var(--space-2);
  flex:        1;
  min-width:   0;
}

.resena-autor {
  font-size:   var(--text-sm);
  font-weight: var(--weight-semibold);
  color:       var(--text-primary);
  white-space: nowrap;
}

.resena-categoria {
  font-size:     var(--text-xs);
  font-weight:   var(--weight-semibold);
  color:         var(--color-primary);
  background:    var(--color-primary-dim);
  padding:       2px 8px;
  border-radius: var(--radius-full);
  white-space:   nowrap;
  flex-shrink:   0;
}

.resena-preview {
  font-size:     var(--text-xs);
  color:         var(--text-muted);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  flex:          1;
  min-width:     0;
}

.resena-arrow {
  font-size:   0.8rem;
  color:       var(--text-muted);
  flex-shrink: 0;
  transition:  transform var(--transition-fast);
}

.resena-card.expanded .resena-arrow { transform: rotate(180deg); }

/* Cuerpo colapsable */
.resena-body {
  max-height: 0;
  overflow:   hidden;
  transition: max-height 350ms var(--ease-out);
}

.resena-card.expanded .resena-body { max-height: 800px; }

.resena-body-inner {
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.resena-texto {
  font-size:   var(--text-sm);
  color:       var(--text-secondary);
  line-height: 1.65;
  margin:      0 0 var(--space-2) 0;
  white-space: pre-wrap;
  word-break:  break-word;
}

.resena-fecha {
  display:   block;
  font-size: var(--text-xs);
  color:     var(--text-muted);
}

/* ---- NOTIF LIST (en otras paginas que usan este CSS) --------- */

.notif-list    { display: flex; flex-direction: column; gap: var(--space-2); }
.notif-item    { background: var(--bg-surface-2); border-radius: var(--radius-md); padding: var(--space-3); display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--border-subtle); }
.notif-actions { display: flex; gap: var(--space-2); }