/* overlay.css — CRM Everest (Grupo Pixelia)
   Motor de overlays apilables: modales (centrados) y drawers (panel lateral).
   Usa los tokens del sistema para verse nativo. */

body.ov-abierto { overflow: hidden; }

/* Sección del padre mientras se refresca tras cerrar un overlay */
.is-refrescando { opacity: .5; pointer-events: none; transition: opacity .15s ease; }

/* Backdrop — z-index crece por nivel de apilado (--ov-nivel) */
.ov-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(2000 + var(--ov-nivel, 0) * 10);
    display: flex;
    padding: var(--gap);
    background: rgba(27, 34, 63, .5);
    opacity: 0;
    transition: opacity .18s ease;
}
.ov-backdrop.is-visible { opacity: 1; }

/* Panel base */
.ov-panel {
    position: relative;
    background: var(--color-panel);
    border: 1px solid var(--color-borde);
    box-shadow: 0 18px 50px rgba(27, 34, 63, .28);
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.ov-cerrar {
    position: absolute;
    top: 8px; right: 10px;
    z-index: 2;
    border: 0;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    color: var(--color-secundario);
    cursor: pointer;
    width: 32px; height: 32px;
    border-radius: var(--radio);
}
.ov-cerrar:hover { background: var(--color-fondo); color: var(--color-marino); }
.ov-cuerpo { padding: 20px; overflow: auto; min-height: 0; }
.ov-cargando { color: var(--color-secundario); padding: 20px 0; text-align: center; }
/* El encabezado de la vista deja sitio al botón de cerrar */
.ov-cuerpo > .page > h1:first-child,
.ov-cuerpo > .page > h2:first-child,
.ov-cuerpo > section > h1:first-child,
.ov-cuerpo > section > h2:first-child { padding-right: 36px; }

/* --- Modal (centrado) --- */
.ov--modal { align-items: center; justify-content: center; }
.ov--modal .ov-panel {
    width: min(560px, 100%);
    max-height: calc(100vh - var(--gap) * 2);
    border-radius: var(--radio);
    transform: translateY(10px) scale(.99);
    opacity: 0;
    transition: transform .18s ease, opacity .18s ease;
}
.ov--modal.is-visible .ov-panel { transform: none; opacity: 1; }

/* --- Drawer (panel lateral deslizable) --- */
.ov--drawer { align-items: stretch; justify-content: flex-end; padding: 0; }
.ov--drawer .ov-panel {
    width: min(440px, 100%);
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    border-top: 0; border-right: 0; border-bottom: 0;
    transform: translateX(100%);
    transition: transform .22s ease;
}
.ov--drawer.is-visible .ov-panel { transform: none; }

/* Las vistas duales traen su propio <link>/page; neutralizamos el padding extra */
.ov-cuerpo .page { padding: 0; }

/* Toast de confirmación (tras guardar en un overlay) */
.ov-toast {
    position: fixed;
    left: 50%; bottom: 24px;
    transform: translate(-50%, 12px);
    z-index: 4000;
    background: var(--color-marino);
    color: #fff;
    padding: 10px 16px;
    border-radius: var(--radio);
    box-shadow: 0 8px 24px rgba(27, 34, 63, .35);
    font-size: 14px;
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
}
.ov-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 480px) {
    .ov--modal { padding: 0; align-items: flex-end; }
    .ov--modal .ov-panel { width: 100%; max-height: 92vh; border-radius: var(--radio) var(--radio) 0 0; }
    .ov--drawer .ov-panel { width: 100%; }
}