/**
 * swalAlertcustom.css - Estilo unificado SweetAlert2 para todo el proyecto.
 * Sustituye a raycoalert.css. Mismo aspecto en login, layout y standalone.
 */

:root {
  --swal-primary: var(--rayco-primary, #0c4a6e);
  --swal-primary-dark: var(--rayco-primary-dark, #0a3d5c);
  --swal-popup-radius: var(--rayco-radius, 20px);
  --swal-border: var(--rayco-border, #e2e8f0);
  --swal-text: var(--rayco-text, #1e293b);
  --swal-text-muted: var(--rayco-text-muted, #64748b);
  --swal-danger: var(--rayco-danger, #dc3545);
  --swal-danger-dark: var(--rayco-danger-dark, #c82333);
}

/* Layout: grid vertical compacto */
.swal2-popup {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "icon title close"
    "message message message"
    "actions actions actions";
  padding: 1em 1.2em !important;
  gap: 0 0.6rem;
  row-gap: 0.5em !important;
  align-items: start;
  max-width: 28em !important;
  border-radius: var(--swal-popup-radius) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid var(--swal-border) !important;
}

/* Fila 1: Icono */
.swal2-icon {
  grid-area: icon !important;
  margin: 0 !important;
  align-self: center !important;
  transform: scale(0.55) !important;
  transform-origin: center center !important;
  margin-right: -2rem !important;
  margin-left: -0.5rem !important;
}

.swal2-loader {
  grid-area: icon !important;
  margin: 0 !important;
  align-self: center !important;
  width: 2rem !important;
  height: 2rem !important;
}

/* Fila 1: Título y margen respecto al icono */
.swal2-title {
  grid-area: title !important;
  text-align: left !important;
  padding: 0 !important;
  margin: 0 0 1rem 0 !important;
  margin-left: 0.75rem !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--swal-text) !important;
  align-self: center !important;
}

/* Fila 1: Cerrar */
.swal2-close {
  grid-area: close !important;
  position: relative !important;
  margin: 0 !important;
  align-self: center !important;
  justify-self: end !important;
}

/* Fila 2: Mensaje */
.swal2-html-container,
.swal2-content {
  grid-area: message !important;
  text-align: left !important;
  padding: 0.4em 0 0 !important;
  margin: 0 0 1.5rem 0 !important;
  margin-left: 0.75rem !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: var(--swal-text-muted) !important;
  justify-content: flex-start !important;
}

.swal2-html-container > div > p:last-of-type {
  margin-top: 0.25em !important;
}

/* Fila 3: Botones */
.swal2-actions {
  grid-area: actions !important;
  margin: 0.6rem 0 0 !important;
  padding: 0 !important;
  justify-content: flex-end !important;
}

/* Borde de acento lateral por tipo */
.swal2-popup:has(.swal2-warning) {
  border-left: 4px solid #f39c12 !important;
}

.swal2-popup:has(.swal2-error) {
  border-left: 4px solid #f27474 !important;
}

.swal2-popup:has(.swal2-success) {
  border-left: 4px solid #a5dc86 !important;
}

.swal2-popup:has(.swal2-info) {
  border-left: 4px solid #3fc3ee !important;
}

/* Botones */
.swal2-confirm {
  background: var(--swal-primary) !important;
  border: none !important;
  border-radius: var(--swal-popup-radius) !important;
  padding: 12px 30px !important;
  font-weight: 500 !important;
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(255,255,255,0.25), 0 1px 2px rgba(0,0,0,0.25) !important;
  box-shadow: 0 2px 8px rgba(13, 110, 253, 0.25) !important;
}

.swal2-confirm:hover {
  background: var(--swal-primary-dark) !important;
  color: #fff !important;
}

.swal2-confirm:focus {
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25) !important;
}

.swal2-deny {
  background: var(--swal-danger) !important;
  border-radius: var(--swal-popup-radius) !important;
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(255,255,255,0.25), 0 1px 2px rgba(0,0,0,0.25) !important;
  border: none !important;
  padding: 0.5em 1.25em !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
}

.swal2-deny:hover {
  background: var(--swal-danger-dark) !important;
  color: #fff !important;
}

.swal2-cancel {
  background: #6c757d !important;
  border-radius: var(--swal-popup-radius) !important;
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(255,255,255,0.25), 0 1px 2px rgba(0,0,0,0.25) !important;
  border: none !important;
  padding: 0.5em 1.25em !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
}

.swal2-cancel:hover {
  background: #5a6268 !important;
  color: #fff !important;
}

/* Animación y backdrop */
.swal2-show {
  animation: swal2-show 0.3s ease-out !important;
}

@keyframes swal2-show {
  0% { opacity: 0; transform: scale(0.9) translateY(-10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes swal-spin {
  to { transform: rotate(360deg); }
}

.swal2-backdrop {
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(4px) !important;
}

/* Toast: texto blanco sobre fondo de color (success/error/etc.) */
.swal2-toast .swal2-title,
.swal2-toast .swal2-html-container,
.swal2-toast .swal2-content {
  color: #fff !important;
}

/* Modo oscuro */
body[data-theme=dark] .swal2-popup {
  background: #323743 !important;
}

body[data-theme=dark] .swal2-title {
  color: #e1e1e1 !important;
}

body[data-theme=dark] .swal2-html-container,
body[data-theme=dark] .swal2-content {
  color: #b2b9bf !important;
}

body[data-theme=dark] .swal2-close {
  color: #b2b9bf !important;
}

body[data-theme=dark] .swal2-close:hover {
  color: #f27474 !important;
}

body[data-theme=dark] .swal2-deny {
  background: var(--swal-danger) !important;
  color: #fff !important;
}

body[data-theme=dark] .swal2-deny:hover {
  background: var(--swal-danger-dark) !important;
  color: #fff !important;
}

body[data-theme=dark] .swal2-cancel {
  background: #6c757d !important;
  color: #fff !important;
}

body[data-theme=dark] .swal2-cancel:hover {
  background: #5a6268 !important;
  color: #fff !important;
}

/* Utilidad: popup ancho (ej. beneficiosasignados) */
.swal-wide .swal2-html-container {
  margin: 0 !important;
}