/* =====================================================================
   NOTIFICACIONES DEL SISTEMA (toasts) + CONFIRMACIÓN PROPIA
   Reemplaza los alert()/confirm() nativos del navegador (las "pestañas
   negras de Google") por avisos con el lenguaje visual del CRM.
   Se incluye en TODAS las páginas junto con toast.js.
   ===================================================================== */

/* ---- Contenedor de toasts: arriba a la derecha, apilados ---- */
.crm-toasts {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none; /* no bloquea clicks debajo; cada toast reactiva sus propios eventos */
    max-width: min(380px, calc(100vw - 36px));
}

.crm-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--blanco, #fff);
    color: var(--texto-oscuro, #101828);
    border: 1px solid var(--gris-borde, #E1E5EE);
    border-left: 4px solid var(--azul-cerceta, #007D8C);
    border-radius: var(--radio-borde, 12px);
    box-shadow: var(--sombra-flotante, 0 12px 32px rgba(11,28,63,0.18));
    padding: 12px 14px;
    font-family: var(--fuente-base, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 13.5px;
    line-height: 1.45;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity .25s ease, transform .25s ease;
}
.crm-toast.visible { opacity: 1; transform: translateX(0); }
.crm-toast.saliendo { opacity: 0; transform: translateX(24px); }

.crm-toast-icono {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.crm-toast-icono svg { width: 13px; height: 13px; }

.crm-toast-cuerpo { flex: 1; min-width: 0; }
.crm-toast-titulo { font-weight: 700; margin-bottom: 1px; }
.crm-toast-texto { color: var(--gris-texto, #667085); white-space: pre-line; overflow-wrap: break-word; }
.crm-toast-texto:only-child { color: var(--texto-oscuro, #101828); font-weight: 600; }

.crm-toast-cerrar {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gris-texto, #667085);
    padding: 2px;
    margin: -2px -4px 0 0;
    border-radius: 6px;
    line-height: 0;
}
.crm-toast-cerrar:hover { background: var(--gris-frio, #EEF1F6); color: var(--texto-oscuro, #101828); }
.crm-toast-cerrar svg { width: 13px; height: 13px; }

/* ---- Variantes por tipo ---- */
.crm-toast.exito { border-left-color: var(--verde-exito, #1a8f5e); }
.crm-toast.exito .crm-toast-icono { background: rgba(26,143,94,0.14); color: var(--verde-exito, #1a8f5e); }

.crm-toast.error { border-left-color: var(--borgona, #801C2D); }
.crm-toast.error .crm-toast-icono { background: rgba(128,28,45,0.12); color: var(--borgona, #801C2D); }

.crm-toast.aviso { border-left-color: var(--amarillo-alerta, #b8860b); }
.crm-toast.aviso .crm-toast-icono { background: rgba(184,134,11,0.14); color: var(--amarillo-alerta, #b8860b); }

.crm-toast.info .crm-toast-icono { background: rgba(0,125,140,0.12); color: var(--azul-cerceta, #007D8C); }

/* Barra de tiempo restante (se anima por JS ajustando el ancho) */
.crm-toast-progreso {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    border-radius: 0 0 var(--radio-borde, 12px) var(--radio-borde, 12px);
    overflow: hidden;
}
.crm-toast { position: relative; overflow: hidden; }
.crm-toast-progreso > span {
    display: block;
    height: 100%;
    background: currentColor;
    opacity: .25;
    width: 100%;
    transform-origin: left;
}
.crm-toast.exito .crm-toast-progreso { color: var(--verde-exito, #1a8f5e); }
.crm-toast.error .crm-toast-progreso { color: var(--borgona, #801C2D); }
.crm-toast.aviso .crm-toast-progreso { color: var(--amarillo-alerta, #b8860b); }
.crm-toast.info  .crm-toast-progreso { color: var(--azul-cerceta, #007D8C); }

/* ---- Modal de confirmación propio (reemplaza confirm()) ---- */
.crm-confirmar-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(11,28,63,0.45);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity .18s ease;
}
.crm-confirmar-overlay.visible { opacity: 1; }

.crm-confirmar-caja {
    background: var(--blanco, #fff);
    border-radius: var(--radio-lg, 16px);
    box-shadow: var(--sombra-flotante, 0 12px 32px rgba(11,28,63,0.18));
    width: 100%;
    max-width: 420px;
    padding: 22px 22px 18px;
    font-family: var(--fuente-base, 'Plus Jakarta Sans', system-ui, sans-serif);
    transform: translateY(10px) scale(.98);
    transition: transform .18s ease;
}
.crm-confirmar-overlay.visible .crm-confirmar-caja { transform: translateY(0) scale(1); }

.crm-confirmar-cabecera {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.crm-confirmar-icono {
    width: 34px; height: 34px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(184,134,11,0.14);
    color: var(--amarillo-alerta, #b8860b);
    flex-shrink: 0;
}
.crm-confirmar-caja.peligro .crm-confirmar-icono {
    background: rgba(128,28,45,0.12);
    color: var(--borgona, #801C2D);
}
.crm-confirmar-icono svg { width: 17px; height: 17px; }

.crm-confirmar-titulo {
    font-size: 15px;
    font-weight: 800;
    color: var(--navy-profundo, #0B1C3F);
    margin: 0;
}
.crm-confirmar-texto {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--gris-texto, #667085);
    margin: 0 0 18px;
    white-space: pre-line;
}
.crm-confirmar-botones {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.crm-confirmar-botones .btn { min-width: 96px; }
.btn-peligro { background: var(--borgona, #801C2D); color: var(--blanco, #fff); box-shadow: 0 2px 8px rgba(128,28,45,0.28); }
.btn-peligro:hover { filter: brightness(1.08); }

@media (max-width: 520px) {
    .crm-toasts { top: auto; bottom: 14px; right: 14px; left: 14px; max-width: none; }
    .crm-toast { transform: translateY(16px); }
    .crm-toast.visible { transform: translateY(0); }
    .crm-toast.saliendo { transform: translateY(16px); }
    .crm-confirmar-botones { flex-direction: column-reverse; }
    .crm-confirmar-botones .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .crm-toast, .crm-confirmar-overlay, .crm-confirmar-caja { transition: none; }
}