/* style-index.css (estilos completos para SweetAlert2) */
.swal2-container {
  display: none;
  position: fixed;
  z-index: 1060;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s;
}

.swal2-container.swal2-shown {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.swal2-modal {
  background-color: white;
  width: 32em;
  max-width: 100%;
  padding: 1.25em;
  border-radius: 5px;
  box-sizing: border-box;
  box-shadow: 0 0.625em 1.875em rgba(0, 0, 0, 0.2);
  text-align: center;
  overflow: hidden;
}

.swal2-title {
  font-size: 1.5em;
  margin: 0 0 0.8em;
}

.swal2-content {
  font-size: 1.125em;
  margin-bottom: 1.5em;
}

.swal2-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.swal2-confirm,
.swal2-cancel,
.swal2-deny {
  background-color: #3085d6;
  color: white;
  border: none;
  padding: 0.625em 1.1em;
  border-radius: 0.25em;
  font-size: 1em;
  cursor: pointer;
}

.swal2-confirm:hover,
.swal2-cancel:hover,
.swal2-deny:hover {
  background-color: #286090;
}

.swal2-error {
  color: #f27474;
  font-size: 4em;
  margin: 0.5em 0;
}

.swal2-icon {
  font-size: 3.75em;
  margin: 1em 0;
}

.swal2-success {
  color: #a5dc86;
}

.swal2-warning {
  color: #f8bb86;
}

.swal2-info {
  color: #3fc3ee;
}

@keyframes swal2-show {
  0% { transform: scale(0.7); }
  45% { transform: scale(1.05); }
  80% { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.swal2-show {
  animation: swal2-show 0.3s;
}

/* Modal base */
.custom-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1060;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.4);
  animation: fade-in 0.3s forwards;
}

.custom-modal--visible {
  display: flex;
  animation: scale-in 0.3s forwards;
}

/* Fondo oscuro */
.custom-modal-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1059;
}

/* Contenido del modal */
.custom-modal-content {
  background-color: white;
  border-radius: 5px;
  padding: 1.25em;
  max-width: 90%;
  width: 32em;
  box-shadow: 0 0.625em 1.875em rgba(0, 0, 0, 0.2);
  text-align: center;
  position: relative;
}

/* Título */
.custom-modal-title {
  font-size: 1.5em;
  margin: 0 0 0.8em;
}

/* Contenido */
.custom-modal-body {
  font-size: 1.125em;
  margin-bottom: 1.5em;
}

/* Botones */
.custom-modal-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.custom-modal-btn {
  border: none;
  padding: 0.625em 1.1em;
  border-radius: 0.25em;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.2s;
}

.custom-modal-btn:hover {
  opacity: 0.8;
}

/* Tipos de alertas */
.custom-modal--success .custom-modal-content {
  border-left: 5px solid #4CAF50;
}

.custom-modal--error .custom-modal-content {
  border-left: 5px solid #f44336;
}

.custom-modal--warning .custom-modal-content {
  border-left: 5px solid #ff9800;
}

.custom-modal--info .custom-modal-content {
  border-left: 5px solid #2196F3;
}

/* Iconos */
.custom-modal-icon {
  font-size: 3.75em;
  margin: 1em 0;
}

.custom-modal-icon-success {
  color: #4CAF50;
}

.custom-modal-icon-error {
  color: #f44336;
}

.custom-modal-icon-warning {
  color: #ff9800;
}

.custom-modal-icon-info {
  color: #2196F3;
}

/* Animaciones */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scale-in {
  from { transform: scale(0.7); }
  to { transform: scale(1); }
}

/* Barra de progreso */
.custom-modal-timer {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  background: #2196F3;
  width: 100%;
  animation: progress 2s linear forwards;
}

@keyframes progress {
  0% { width: 100%; }
  100% { width: 0%; }
}