/* Card principal de recordatorios */
.rec-card{
  max-width: 720px;
  margin: 0 auto 2.3rem;
  background: var(--card);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 1.4rem 1.4rem 1.8rem;
}

.rec-title{
  margin: 0 0 1rem;
  font-size: 1.25rem;
  color: var(--brand-dark);
}

/* Contenedor de lista */
.rec-list{
  border-top: 1px solid #f1e4f0;
  padding-top: .3rem;
}

/* Item individual */
.recordatorio{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.75rem 0;
  border-bottom:1px solid #f5f5f7;
}

.recordatorio:last-child{
  border-bottom:none;
}

.rec-main{
  flex:1;
}

.rec-text{
  font-size:.95rem;
  color:var(--ink);
}

/* Estado */
.estado{
  cursor:pointer;
  font-size:.85rem;
  font-weight:700;
}

.estado.pendiente{
  color:#f8b400; /* warn */
}

.estado.completado{
  color:#23b26d; /* ok */
}

/* Iconos de acciones */
.acciones-iconos{
  display:flex;
  align-items:center;
  gap:10px;
}

.acciones-iconos i{
  cursor:pointer;
  color:#888;
  font-size:.95rem;
}

.acciones-iconos i:hover{
  color:var(--brand);
}

/* Ajustes hero para esta página */
.hero-card.hero-sm{
  padding:1.3rem 1.2rem;
  margin-bottom:1.5rem;
}

.hero-card.hero-sm .hero-text h1{
  font-size:1.4rem;
}

.hero-card.hero-sm .hero-text p{
  font-size:.9rem;
}

/* Botones en hero ya vienen como .hero-btn / hero-btn-primary / hero-btn-ghost de registrar_cita.css,
   pero por si esta página se usa sola: */
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}

/* Responsive pequeño ajuste */
@media (max-width:640px){
  .rec-card{
    margin: 0 .2rem 2rem;
    border-radius:20px;
  }
}