/* ===== VortekPOS — Estilos de alertas (SweetAlert2) =====
   Referencia visual aprobada. Convive con el CSS de SweetAlert de la
   plantilla mediante clases propias (vf-*) aplicadas vía customClass.
   NO sobreescribe el CSS original de SweetAlert. */

.swal2-container.vf-backdrop { background: rgba(17, 24, 39, .45); }
.vf-modal { border: 1px solid #b0b5ba; border-radius: 10px; box-shadow: 0 8px 30px rgba(17, 24, 39, .12); }
.vf-modal .swal2-title { font-size: 1.05rem; font-weight: 600; color: #1f2937; margin-top: .4rem; }
.vf-modal .swal2-html-container { font-size: .9rem; color: #4b5563; line-height: 1.5; }
.vf-modal .swal2-icon { transform: scale(.85); }
.vf-modal .swal2-timer-progress-bar { background: #c7d2fe; }
.vf-modal .swal2-actions { gap: .6rem; }
.vf-btn { border: 1px solid transparent; border-radius: 6px; padding: .5rem 1.5rem; font-size: .875rem; font-weight: 500; cursor: pointer; transition: filter .15s ease; }
.vf-btn:hover { filter: brightness(.97); }
.vf-btn-warning { background: #fff8e6; border-color: #f3d98b; color: #8a6d1a; }
.vf-btn-error   { background: #fdecec; border-color: #f1b6b6; color: #9b1c1c; }
.vf-btn-success { background: #ecf9f0; border-color: #1de9b6; color: #1de9b6; }
.vf-btn-info    { background: #e8f6fc; border-color: #9bd7ee; color: #0a6e90; }
.vf-btn-cancel  { background: #f3f4f6; border: 1.5px solid #cbd1d9; color: #374151; }
.vf-btn-primary { background: #eaf1ff; border-color: #a9c4ff; color: #2f5bd7; }

/* ===== Complementos no incluidos en la referencia (no alteran lo aprobado) ===== */

/* Input de VortekAlert.prompt() (swal2-input) — alineado a la estética vf */
.vf-modal .swal2-input {
    border: 1.5px solid #cbd1d9;
    border-radius: 6px;
    font-size: .95rem;
    box-shadow: none;
}
.vf-modal .swal2-input:focus { border-color: #a9c4ff; box-shadow: 0 0 0 3px rgba(70, 128, 255, .15); }
.vf-modal .swal2-input-label { font-size: .875rem; color: #4b5563; }

/* Modal "Procesando..." (Swal.showLoading) — spinner en tono neutro de la paleta */
.vf-modal .swal2-loader {
    border-color: #c7d2fe transparent #c7d2fe transparent;
}
.vf-modal.vf-loading .swal2-title { margin-top: .9rem; }

/* ===== Modo oscuro =====
   El fondo del popup ya lo adapta la plantilla (.swal2-popup usa --bs-body-bg);
   aquí solo se corrigen los colores fijos de texto, borde y botones. */

[data-pc-theme="dark"] .swal2-container.vf-backdrop { background: rgba(0, 0, 0, .55); }
[data-pc-theme="dark"] .vf-modal { border-color: #303f50; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
[data-pc-theme="dark"] .vf-modal .swal2-title { color: #e5e7eb; }
[data-pc-theme="dark"] .vf-modal .swal2-html-container { color: #9ca3af; }

/* Mensaje de Swal.showValidationMessage(): fondo gris claro por defecto */
[data-pc-theme="dark"] .swal2-validation-message { background: #263240; color: #f87171; }

[data-pc-theme="dark"] .vf-btn:hover { filter: brightness(1.15); }
[data-pc-theme="dark"] .vf-btn-warning { background: rgba(243, 217, 139, .12); border-color: #8a6d1a; color: #fcd34d; }
[data-pc-theme="dark"] .vf-btn-error   { background: rgba(220, 38, 38, .15); border-color: #9b1c1c; color: #f87171; }
[data-pc-theme="dark"] .vf-btn-success { background: rgba(34, 197, 94, .15); border-color: #166534; color: #4ade80; }
[data-pc-theme="dark"] .vf-btn-info    { background: rgba(13, 202, 240, .15); border-color: #0a6e90; color: #67d8f4; }
[data-pc-theme="dark"] .vf-btn-cancel  { background: #263240; border-color: #3a4a5c; color: #cbd5e1; }
[data-pc-theme="dark"] .vf-btn-primary { background: rgba(70, 128, 255, .15); border-color: #2f5bd7; color: #8fb3ff; }

[data-pc-theme="dark"] .vf-modal .swal2-input { border-color: #3a4a5c; color: #e5e7eb; background: transparent; }
[data-pc-theme="dark"] .vf-modal .swal2-input:focus { border-color: #2f5bd7; box-shadow: 0 0 0 3px rgba(70, 128, 255, .25); }
[data-pc-theme="dark"] .vf-modal .swal2-input-label { color: #9ca3af; }

/* ===== VortekToast: avisos que no interrumpen (vortek-toast.js) =====
   Estilo "SaaS" (Stripe / Linear): tarjeta blanca de borde fino y sombra en capas,
   icono en un recuadro teñido, título compacto, descripción en gris y una línea
   de progreso de 2px. Siempre arriba a la derecha, bajo la cabecera. */
.vf-toasts { position: fixed; top: 84px; right: 20px; z-index: 2200; display: flex; flex-direction: column; gap: 10px; width: min(384px, calc(100vw - 32px)); pointer-events: none; }
.vf-toast { position: relative; overflow: hidden; pointer-events: auto; background: #fff; color: #0f172a;
    border: 1px solid #e2e8f0; border-radius: 12px;
    box-shadow: 0 10px 25px -3px rgba(15, 23, 42, .08), 0 4px 6px -4px rgba(15, 23, 42, .04), 0 0 0 1px rgba(15, 23, 42, .03);
    transform-origin: top center; opacity: 0; transform: translateY(-12px) scale(.96);
    transition: transform .28s cubic-bezier(.16, 1, .3, 1), opacity .22s cubic-bezier(.16, 1, .3, 1), box-shadow .2s ease; }
.vf-toast.vf-toast-visible { opacity: 1; transform: none; }
.vf-toast:hover { box-shadow: 0 20px 30px -6px rgba(15, 23, 42, .12), 0 8px 10px -6px rgba(15, 23, 42, .05), 0 0 0 1px rgba(15, 23, 42, .05); }
.vf-toast-cuerpo { display: flex; align-items: flex-start; gap: 12px; padding: 14px; }
.vf-toast-icono { width: 24px; height: 24px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 14px;
    background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.vf-toast-texto { flex: 1 1 auto; min-width: 0; }
.vf-toast-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vf-toast-titulo { font-size: 13px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; color: #0f172a; overflow: hidden; text-overflow: ellipsis; }
.vf-toast-veces { font-weight: 600; color: #94a3b8; font-size: 12px; margin-left: 2px; }
.vf-toast-mensaje { font-size: 12px; color: #64748b; line-height: 1.55; margin: 2px 0 0; overflow-wrap: anywhere; }
.vf-toast-cerrar { flex-shrink: 0; border: 0; background: transparent; color: #94a3b8; padding: 0 2px; line-height: 1; font-size: 13px; border-radius: 4px; transition: color .15s; }
.vf-toast-cerrar:hover, .vf-toast-cerrar:focus-visible { color: #0f172a; outline: none; }
.vf-toast-pie { margin-top: 10px; padding-top: 8px; border-top: 1px solid #edf2f7; display: flex; justify-content: flex-end; }
.vf-toast-accion { border: 0; background: transparent; padding: 0; font-size: 12px; font-weight: 600; color: #2563eb; }
.vf-toast-accion:hover, .vf-toast-accion:focus-visible { color: #1d4ed8; outline: none; text-decoration: underline; }
.vf-toast-riel { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #f1f5f9; overflow: hidden; }
.vf-toast-barra { display: block; height: 100%; width: 100%; background: #10b981; transform-origin: left center; }

.vf-toast-warning .vf-toast-icono { background: #fffbeb; color: #d97706; border-color: #fde68a; }
.vf-toast-warning .vf-toast-barra { background: #f59e0b; }
.vf-toast-info .vf-toast-icono { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; }
.vf-toast-info .vf-toast-barra { background: #3b82f6; }
.vf-toast-danger .vf-toast-icono { background: #fff1f2; color: #e11d48; border-color: #fecdd3; }
.vf-toast-danger .vf-toast-barra { background: #f43f5e; }

/* Apilado: el más nuevo arriba y entero; los anteriores se encogen detrás de él.
   Al pasar el mouse por la pila se abren todos para leerlos. */
.vf-toasts:not(:hover) .vf-toast.vf-toast-visible[data-fondo="1"] { transform: scale(.96); opacity: .9; }
.vf-toasts:not(:hover) .vf-toast.vf-toast-visible[data-fondo="2"] { transform: scale(.92); opacity: .7; }
.vf-toasts:not(:hover) .vf-toast.vf-toast-visible[data-fondo="3"] { transform: scale(.88); opacity: .45; }
.vf-toasts:not(:hover) .vf-toast[data-fondo="1"] { margin-top: -6px; }
.vf-toasts:not(:hover) .vf-toast[data-fondo="2"], .vf-toasts:not(:hover) .vf-toast[data-fondo="3"] { margin-top: -10px; }

[data-pc-theme="dark"] .vf-toast { background: #1b232d; color: #f1f5f9; border-color: #303f50;
    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, .45), 0 4px 6px -4px rgba(0, 0, 0, .3); }
[data-pc-theme="dark"] .vf-toast-titulo { color: #f1f5f9; }
[data-pc-theme="dark"] .vf-toast-mensaje { color: #9fb0c3; }
[data-pc-theme="dark"] .vf-toast-cerrar:hover, [data-pc-theme="dark"] .vf-toast-cerrar:focus-visible { color: #fff; }
[data-pc-theme="dark"] .vf-toast-pie { border-top-color: #303f50; }
[data-pc-theme="dark"] .vf-toast-accion { color: #60a5fa; }
[data-pc-theme="dark"] .vf-toast-riel { background: #263240; }
[data-pc-theme="dark"] .vf-toast-icono { background: rgba(16, 185, 129, .14); color: #34d399; border-color: rgba(16, 185, 129, .35); }
[data-pc-theme="dark"] .vf-toast-warning .vf-toast-icono { background: rgba(245, 158, 11, .14); color: #fbbf24; border-color: rgba(245, 158, 11, .35); }
[data-pc-theme="dark"] .vf-toast-info .vf-toast-icono { background: rgba(59, 130, 246, .14); color: #60a5fa; border-color: rgba(59, 130, 246, .35); }
[data-pc-theme="dark"] .vf-toast-danger .vf-toast-icono { background: rgba(244, 63, 94, .14); color: #fb7185; border-color: rgba(244, 63, 94, .35); }
@media (max-width: 575.98px) { .vf-toasts { top: 68px; right: 8px; left: 8px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .vf-toast { transition: opacity .2s ease; transform: none !important; } }