/* ========================================
   SWEETALERT-CUSTOM.CSS - Estilos de SweetAlert2
   Personalización para TGIRS
   ======================================== */

/* Contenedor principal - más compacto */
.swal2-popup {
   font-size: 0.875rem !important;
   padding: 1.25rem !important;
   border-radius: 0.5rem !important;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
   max-width: 400px !important;
}

/* Título - más pequeño y elegante */
.swal2-title {
   font-size: 1.125rem !important;
   font-weight: 600 !important;
   margin-bottom: 0.75rem !important;
   padding: 0 !important;
   line-height: 1.4 !important;
}

/* Contenido - más compacto */
.swal2-html-container {
   font-size: 0.8125rem !important;
   line-height: 1.5 !important;
   margin: 0.5rem 0 !important;
   padding: 0 !important;
}

/* Iconos - más pequeños y con mejores colores */
.swal2-icon {
   width: 4rem !important;
   height: 4rem !important;
   margin: 0.75rem auto 1rem !important;
   border-width: 3px !important;
}

.swal2-icon .swal2-icon-content {
   font-size: 2.5rem !important;
}

/* Success - Verde elegante */
.swal2-success {
   border-color: #10b981 !important;
}

.swal2-success .swal2-success-ring {
   border-color: rgba(16, 185, 129, 0.3) !important;
}

.swal2-success [class^='swal2-success-line'] {
   background-color: #10b981 !important;
}

.swal2-success .swal2-success-fix {
   background-color: transparent !important;
}

.swal2-success-circular-line-left,
.swal2-success-circular-line-right {
   background-color: transparent !important;
}

/* Error - Rojo elegante */
.swal2-error {
   border-color: #ef4444 !important;
}

.swal2-error [class^='swal2-x-mark-line'] {
   background-color: #ef4444 !important;
}

/* Warning - Ámbar elegante */
.swal2-warning {
   border-color: #f59e0b !important;
   color: #f59e0b !important;
}

/* Info - Azul elegante */
.swal2-info {
   border-color: #3b82f6 !important;
   color: #3b82f6 !important;
}

/* Question - Púrpura elegante */
.swal2-question {
   border-color: #8b5cf6 !important;
   color: #8b5cf6 !important;
}

/* Botones - más compactos y elegantes */
.swal2-actions {
   margin: 1rem 0 0 0 !important;
   gap: 0.5rem !important;
}

.swal2-styled {
   padding: 0.5rem 1.25rem !important;
   font-size: 0.8125rem !important;
   font-weight: 500 !important;
   border-radius: 0.375rem !important;
   min-width: 80px !important;
   transition: all 0.2s ease !important;
}

/* Botón Confirm - Verde elegante */
.swal2-confirm {
   background-color: #10b981 !important;
   border: none !important;
   box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;
}

.swal2-confirm:hover {
   background-color: #059669 !important;
   box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
   transform: translateY(-1px) !important;
}

.swal2-confirm:focus {
   box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
}

/* Botón Cancel - Gris elegante */
.swal2-cancel {
   background-color: #6b7280 !important;
   border: none !important;
   box-shadow: 0 2px 8px rgba(107, 114, 128, 0.3) !important;
}

.swal2-cancel:hover {
   background-color: #4b5563 !important;
   box-shadow: 0 4px 12px rgba(107, 114, 128, 0.4) !important;
   transform: translateY(-1px) !important;
}

.swal2-cancel:focus {
   box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.2) !important;
}

/* Botón Deny - Rojo elegante */
.swal2-deny {
   background-color: #ef4444 !important;
   border: none !important;
   box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
}

.swal2-deny:hover {
   background-color: #dc2626 !important;
   box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
   transform: translateY(-1px) !important;
}

.swal2-deny:focus {
   box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

/* Overlay - más suave */
.swal2-container {
   backdrop-filter: blur(2px) !important;
   background-color: rgba(0, 0, 0, 0.4) !important;
}

/* Input y Textarea - más compactos */
.swal2-input,
.swal2-textarea {
   font-size: 0.8125rem !important;
   padding: 0.5rem 0.75rem !important;
   border-radius: 0.375rem !important;
   border: 1px solid #d1d5db !important;
}

.swal2-input:focus,
.swal2-textarea:focus {
   border-color: #3b82f6 !important;
   box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Footer - más pequeño */
.swal2-footer {
   font-size: 0.75rem !important;
   padding: 0.75rem 0 0 0 !important;
   margin-top: 0.75rem !important;
   border-top: 1px solid #e5e7eb !important;
}

/* Timer progress bar - más elegante */
.swal2-timer-progress-bar {
   background-color: rgba(0, 0, 0, 0.2) !important;
   height: 3px !important;
}

/* Close button - más pequeño */
.swal2-close {
   font-size: 1.25rem !important;
   width: 1.75rem !important;
   height: 1.75rem !important;
   line-height: 1.75rem !important;
   color: #6b7280 !important;
   transition: all 0.2s ease !important;
}

.swal2-close:hover {
   color: #1f2937 !important;
   background-color: #f3f4f6 !important;
}

/* Colores de título según tipo */
.swal2-popup.swal2-icon-success .swal2-title {
   color: #059669 !important;
}

.swal2-popup.swal2-icon-error .swal2-title {
   color: #dc2626 !important;
}

.swal2-popup.swal2-icon-warning .swal2-title {
   color: #d97706 !important;
}

.swal2-popup.swal2-icon-info .swal2-title {
   color: #2563eb !important;
}

.swal2-popup.swal2-icon-question .swal2-title {
   color: #7c3aed !important;
}

/* Loading spinner - más compacto */
.swal2-loader {
   width: 2rem !important;
   height: 2rem !important;
   border-width: 0.25rem !important;
}

/* Validation message - más compacto */
.swal2-validation-message {
   font-size: 0.75rem !important;
   padding: 0.375rem 0.75rem !important;
   margin: 0.5rem 0 0 0 !important;
   background-color: #fee2e2 !important;
   color: #991b1b !important;
   border-radius: 0.25rem !important;
}

/* Animaciones suaves */
.swal2-show {
   animation: swal2-show 0.25s !important;
}

.swal2-hide {
   animation: swal2-hide 0.2s !important;
}

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

@keyframes swal2-hide {
   0% {
      transform: scale(1);
      opacity: 1;
   }
   100% {
      transform: scale(0.5);
      opacity: 0;
   }
}