/* ========================================
   SWEETALERT2 - ESTILO iOS 17
   Diseño preciso siguiendo HIG de Apple
   ======================================== */

/* ========================================
   VARIABLES Y CONFIGURACIÓN
   ======================================== */

   :root {
      /* Colores iOS 17 */
      --ios-blue: #007AFF;
      --ios-green: #34C759;
      --ios-red: #FF3B30;
      --ios-yellow: #FFCC00;
      --ios-orange: #FF9500;
      --ios-purple: #AF52DE;
      --ios-gray: #8E8E93;
      --ios-gray2: #AEAEB2;
      --ios-gray3: #C7C7CC;
      --ios-gray4: #D1D1D6;
      --ios-gray5: #E5E5EA;
      --ios-gray6: #F2F2F7;
  
      /* Backgrounds */
      --ios-bg-primary: #FFFFFF;
      --ios-bg-secondary: #F2F2F7;
      --ios-bg-tertiary: #FFFFFF;
  
      /* Dark mode */
      --ios-dark-bg-primary: #1C1C1E;
      --ios-dark-bg-secondary: #2C2C2E;
      --ios-dark-bg-tertiary: #3A3A3C;
  
      /* Tipografía */
      --ios-text-primary: #000000;
      --ios-text-secondary: #3C3C43;
      --ios-text-tertiary: #8E8E93;
  
      /* Sombras */
      --ios-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
      --ios-shadow-md: 0 8px 20px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.02);
      --ios-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(0, 0, 0, 0.06);
  
      /* Espaciado */
      --ios-spacing-xs: 4px;
      --ios-spacing-sm: 8px;
      --ios-spacing-md: 16px;
      --ios-spacing-lg: 24px;
      --ios-spacing-xl: 32px;
  }
  
  /* ========================================
     POPUP PRINCIPAL
     ======================================== */
  
  .swal2-popup {
      width: 92%;
      max-width: 360px;
      border-radius: 28px;
      padding: var(--ios-spacing-lg);
      background: var(--ios-bg-primary);
      font-family: -apple-system, BlinkMacSystemFont,
          "SF Pro Text", "SF Pro Display",
          "Helvetica Neue", Arial, sans-serif;
  
      box-shadow: var(--ios-shadow-lg);
  
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
  }
  
  /* ========================================
     ICONOS iOS 17
     ======================================== */
  
  .swal2-icon {
      margin: var(--ios-spacing-xs) auto var(--ios-spacing-md);
      transform: scale(0.95);
      border-width: 3px;
      position: relative;
      box-shadow: var(--ios-shadow-sm);
  }
  
  /* Success */
  .swal2-success {
      border-color: var(--ios-green);
      color: var(--ios-green);
  }
  
  .swal2-success .swal2-success-ring {
      border-color: rgba(52, 199, 89, 0.15);
  }
  
  .swal2-success [class^='swal2-success-line'] {
      background-color: var(--ios-green);
      height: 3px;
  }
  
  .swal2-success .swal2-success-line-tip {
      width: 1.6em;
      transform: rotate(45deg) translate(0.2em, 0.3em);
  }
  
  .swal2-success .swal2-success-line-long {
      width: 2.8em;
      transform: rotate(-45deg) translate(0.1em, -0.1em);
  }
  
  /* Error */
  .swal2-error {
      border-color: var(--ios-red);
      color: var(--ios-red);
  }
  
  .swal2-error [class^='swal2-x-mark-line'] {
      background-color: var(--ios-red);
      height: 3px;
      width: 2em;
  }
  
  /* Warning */
  .swal2-warning {
      border-color: var(--ios-yellow);
      color: var(--ios-yellow);
      font-size: 2em;
      line-height: 1.2;
  }
  
  /* Question */
  .swal2-question {
      border-color: var(--ios-blue);
      color: var(--ios-blue);
      font-size: 2em;
      line-height: 1.2;
  }
  
  /* Info */
  .swal2-info {
      border-color: var(--ios-blue);
      color: var(--ios-blue);
      font-size: 2em;
  }
  
  /* ========================================
     TIPOGRAFÍA PRECISA
     ======================================== */
  
  .swal2-title {
      font-size: 1.35rem;
      font-weight: 630;
      color: var(--ios-text-primary);
      padding: 0;
      margin: 0 0 var(--ios-spacing-xs);
      line-height: 1.3;
      letter-spacing: -0.02em;
  }
  
  .swal2-html-container {
      font-size: 0.95rem;
      color: var(--ios-text-secondary);
      line-height: 1.45;
      margin: var(--ios-spacing-xs) 0 var(--ios-spacing-sm);
      font-weight: 400;
      letter-spacing: -0.01em;
  }
  
  /* ========================================
     INPUTS Y FORMULARIOS (iOS Style)
     ======================================== */
  
  .swal2-input,
  .swal2-textarea,
  .swal2-select {
      border-radius: 14px;
      border: 1px solid var(--ios-gray5);
      padding: 0.9rem 1.2rem;
      font-size: 1rem;
      font-family: inherit;
      transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
      background: var(--ios-bg-secondary);
      color: var(--ios-text-primary);
      width: 100%;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) inset;
      margin: var(--ios-spacing-xs) 0;
  }
  
  .swal2-input:hover,
  .swal2-textarea:hover {
      border-color: var(--ios-gray4);
  }
  
  .swal2-input:focus,
  .swal2-textarea:focus {
      border-color: var(--ios-blue);
      outline: none;
      box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
  }
  
  .swal2-input::placeholder,
  .swal2-textarea::placeholder {
      color: var(--ios-gray);
      opacity: 0.8;
  }
  
  /* Checkbox y Radio */
  .swal2-checkbox,
  .swal2-radio {
      font-size: 0.95rem;
      color: var(--ios-text-primary);
      margin: var(--ios-spacing-sm) 0;
      display: flex;
      align-items: center;
      gap: var(--ios-spacing-sm);
  }
  
  .swal2-checkbox input,
  .swal2-radio input {
      width: 20px;
      height: 20px;
      accent-color: var(--ios-blue);
      margin: 0;
  }
  
  /* Select */
  .swal2-select {
      appearance: none;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
      background-repeat: no-repeat;
      background-position: right 1rem center;
      padding-right: 2.5rem;
  }
  
  /* Textarea */
  .swal2-textarea {
      min-height: 100px;
      resize: vertical;
  }
  
  /* ========================================
     BOTONES - iOS 17 PRECISE
     ======================================== */
  
  .swal2-actions {
      margin-top: var(--ios-spacing-xl);
      gap: var(--ios-spacing-sm);
      flex-wrap: wrap;
  }
  
  /* Base button */
  .swal2-confirm,
  .swal2-cancel,
  .swal2-deny {
      flex: 1;
      min-width: 110px;
      height: 52px;
      border-radius: 16px;
      font-size: 1.05rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      border: none;
      transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
      padding: 0 1.5rem;
      cursor: pointer;
      position: relative;
      overflow: hidden;
  }
  
  /* Efecto ripple para botones */
  .swal2-confirm::after,
  .swal2-cancel::after,
  .swal2-deny::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 5px;
      height: 5px;
      background: rgba(255, 255, 255, 0.5);
      opacity: 0;
      border-radius: 100%;
      transform: scale(1, 1) translate(-50%, -50%);
      transform-origin: 50% 50%;
  }
  
  .swal2-confirm:active::after,
  .swal2-cancel:active::after,
  .swal2-deny:active::after {
      animation: ripple 0.3s ease-out;
  }
  
  @keyframes ripple {
      0% {
          transform: scale(0, 0) translate(-50%, -50%);
          opacity: 0.5;
      }
  
      100% {
          transform: scale(20, 20) translate(-50%, -50%);
          opacity: 0;
      }
  }
  
  /* Botón Confirmar (Primary) */
  .swal2-confirm {
      background: var(--ios-blue);
      color: white;
      box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
  }
  
  .swal2-confirm:hover {
      background: #0063CE;
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(0, 122, 255, 0.35);
  }
  
  .swal2-confirm:active {
      background: #004999;
      transform: translateY(1px);
      box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
  }
  
  /* Botón Cancelar (Secondary) */
  .swal2-cancel {
      background: var(--ios-gray6);
      color: var(--ios-blue);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  }
  
  .swal2-cancel:hover {
      background: #E5E5EA;
      color: var(--ios-blue);
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
  }
  
  .swal2-cancel:active {
      background: #D1D1D6;
      transform: translateY(1px);
  }
  
  /* Botón Deny (Destructive) */
  .swal2-deny {
      background: var(--ios-red);
      color: white;
      box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3);
  }
  
  .swal2-deny:hover {
      background: #D63027;
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(255, 59, 48, 0.35);
  }
  
  .swal2-deny:active {
      background: #B32B22;
      transform: translateY(1px);
  }
  
  /* Botón outline (alternativo) */
  .swal2-confirm.swal2-outline {
      background: transparent;
      border: 2px solid var(--ios-blue);
      color: var(--ios-blue);
      box-shadow: none;
  }
  
  /* Botones deshabilitados */
  .swal2-confirm.swal2-disabled,
  .swal2-cancel.swal2-disabled,
  .swal2-deny.swal2-disabled {
      opacity: 0.4;
      pointer-events: none;
      transform: none;
      box-shadow: none;
  }
  
  /* ========================================
     ANIMACIONES IOS 17
     ======================================== */
  
  @keyframes iosEnter {
      0% {
          transform: scale(1.05) translateY(10px);
          opacity: 0;
      }
  
      70% {
          transform: scale(1) translateY(-2px);
      }
  
      100% {
          transform: scale(1) translateY(0);
          opacity: 1;
      }
  }
  
  @keyframes iosExit {
      0% {
          transform: scale(1) translateY(0);
          opacity: 1;
      }
  
      30% {
          transform: scale(1.02) translateY(-3px);
      }
  
      100% {
          transform: scale(0.95) translateY(20px);
          opacity: 0;
      }
  }
  
  .swal2-show {
      animation: iosEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  .swal2-hide {
      animation: iosExit 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  
  
  /* ========================================
     LOADER Y PROGRESS
     ======================================== */
  
  .swal2-loader {
      border-color: var(--ios-blue) transparent var(--ios-blue) transparent;
      border-width: 3px;
      width: 2.8em;
      height: 2.8em;
      margin: var(--ios-spacing-md) auto;
  }
  
  /* Progress steps */
  .swal2-progress-steps {
      margin: var(--ios-spacing-md) 0;
      flex-wrap: wrap;
      justify-content: center;
  }
  
  .swal2-progress-step {
      background: var(--ios-gray6);
      color: var(--ios-gray);
      border-radius: 24px;
      padding: var(--ios-spacing-xs) var(--ios-spacing-md);
      font-size: 0.9rem;
      font-weight: 500;
  }
  
  .swal2-progress-step.swal2-active-progress-step {
      background: var(--ios-blue);
      color: white;
      box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
  }
  
  /* ========================================
     TOAST NOTIFICATIONS (iOS Style)
     ======================================== */
  
  .swal2-toast {
      border-radius: 50px;
      padding: var(--ios-spacing-sm) var(--ios-spacing-md);
      box-shadow: var(--ios-shadow-md);
      background: rgba(255, 255, 255, 0.9);
  
      max-width: 90%;
  }
  
  .swal2-toast .swal2-title {
      font-size: 1rem;
      margin: 0;
  }
  
  .swal2-toast .swal2-icon {
      transform: scale(0.7);
      margin: 0 var(--ios-spacing-xs) 0 0;
  }
  
  /* ========================================
     RESPONSIVE AVANZADO
     ======================================== */
  
  @media (max-width: 480px) {
      .swal2-popup {
          width: 94%;
          max-width: 340px;
          border-radius: 24px;
          padding: var(--ios-spacing-lg) var(--ios-spacing-md);
      }
  
      .swal2-actions {
          flex-direction: flex;
          gap: var(--ios-spacing-sm);
          margin-top: var(--ios-spacing-lg);
      }
  
      .swal2-confirm,
      .swal2-cancel,
      .swal2-deny {
          width: 100%;
          min-width: auto;
          height: 56px;
          font-size: 1.1rem;
          border-radius: 14px;
      }
  
      .swal2-title {
          font-size: 1.25rem;
      }
  
      .swal2-html-container {
          font-size: 1rem;
      }
  
      .swal2-icon {
          transform: scale(0.9);
          margin: var(--ios-spacing-xs) auto var(--ios-spacing-sm);
      }
  
      .swal2-input,
      .swal2-textarea {
          font-size: 16px;
          /* Previene zoom en iOS */
      }
  }
  
  /* Pantallas muy pequeñas */
  @media (max-width: 360px) {
      .swal2-popup {
          padding: var(--ios-spacing-md);
      }
  
      .swal2-actions {
          gap: var(--ios-spacing-xs);
      }
  
      .swal2-confirm,
      .swal2-cancel,
      .swal2-deny {
          height: 50px;
          font-size: 1rem;
      }
  }
  
  /* ========================================
     DARK MODE PERFECTO
     ======================================== */
  
  @media (prefers-color-scheme: dark) {
      .swal2-popup {
          background: var(--ios-dark-bg-primary);
          color: white;
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
      }
  
      .swal2-title {
          color: white;
      }
  
      .swal2-html-container {
          color: #98989E;
      }
  
      .swal2-cancel {
          background: #2C2C2E;
          color: var(--ios-blue);
      }
  
      .swal2-cancel:hover {
          background: #3A3A3C;
      }
  
      .swal2-cancel:active {
          background: #48484A;
      }
  
      .swal2-input,
      .swal2-textarea,
      .swal2-select {
          background: #2C2C2E;
          border-color: #3A3A3C;
          color: white;
      }
  
      .swal2-input::placeholder,
      .swal2-textarea::placeholder {
          color: #636366;
      }
  
      .swal2-checkbox,
      .swal2-radio {
          color: white;
      }
  
      .swal2-progress-step {
          background: #2C2C2E;
          color: #98989E;
      }
  
      .swal2-progress-step.swal2-active-progress-step {
          background: var(--ios-blue);
          color: white;
      }
  
      .swal2-toast {
          background: rgba(44, 44, 46, 0.9);
          color: white;
      }
  }
  
  /* ========================================
     ACCESIBILIDAD Y MEJORAS
     ======================================== */
  
  /* Reduce motion si está activado */
  @media (prefers-reduced-motion: reduce) {
  
      .swal2-show,
      .swal2-hide,
      .swal2-confirm,
      .swal2-cancel,
      .swal2-deny {
          animation: none;
          transition: none;
      }
  }
  
  /* Focus visible para teclado */
  .swal2-confirm:focus-visible,
  .swal2-cancel:focus-visible,
  .swal2-deny:focus-visible,
  .swal2-input:focus-visible,
  .swal2-textarea:focus-visible {
      outline: 3px solid var(--ios-blue);
      outline-offset: 3px;
  }
  
  /* High contrast mode */
  @media (forced-colors: active) {
  
      .swal2-confirm,
      .swal2-cancel,
      .swal2-deny {
          border: 2px solid currentColor;
      }
  }
  
  /* ========================================
     UTILIDADES ADICIONALES
     ======================================== */
  
  /* Clases personalizadas para diferentes contextos */
  .swal2-popup.swal2-compact {
      max-width: 300px;
      padding: var(--ios-spacing-md);
  }
  
  .swal2-popup.swal2-wide {
      max-width: 480px;
  }
  
  /* Badge o etiqueta dentro del popup */
  .swal2-badge {
      background: var(--ios-gray6);
      color: var(--ios-text-secondary);
      padding: 4px 12px;
      border-radius: 50px;
      font-size: 0.85rem;
      font-weight: 500;
      display: inline-block;
      margin-bottom: var(--ios-spacing-sm);
  }
  
  /* Separador */
  .swal2-divider {
      height: 1px;
      background: var(--ios-gray5);
      margin: var(--ios-spacing-md) 0;
      width: 100%;
  }