/* ============================================
   MODAL ALERT PARTIAL CSS
   Estilos para views/partials/modal-alert.ejs
   ============================================ */


/* ============================================
   CONTENIDO DEL MODAL
   ============================================ */

.alert-modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-2) 0;
}

@media (min-width: 768px) {
  .alert-modal-content {
    padding: var(--space-4) 0;
  }
}


/* ============================================
   ÍCONO
   ============================================ */

.alert-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .alert-icon svg {
    width: 48px;
    height: 48px;
  }
}


/* ============================================
   MENSAJE
   ============================================ */

.alert-message {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

@media (min-width: 768px) {
  .alert-message {
    font-size: var(--font-size-lg);
  }
}


/* ============================================
   FOOTER — BOTÓN
   ============================================ */

.modal-alert .modal-footer {
  justify-content: center;
}

@media (min-width: 768px) {
  .modal-alert .modal-footer {
    justify-content: flex-end;
  }
}