/* ============================================================================
   Ajwebx — Popups v1.0 (avisos, preguntas, subida y loader)
   Archivo: css/class/popups-v-1.0.css
   Creado:  2026-11-01
   Requiere: css/tokens/aj-tokens-v-1.0.css
   Origen:  estilos extraídos de xForm-sodis-v-1.2.css (bloque «Notificaciones»)
   Cambios: superficie de vidrio, radios, sombras, foco visible y tipografía
            propia. Mismas clases, mismos ids, mismos tiempos y misma animación
            de 12 s. Sin dependencia obligatoria de xForm.

   Estructura que genera popups-v-1.0.js:

   <div class="cont-notificacion" id="nota-popup" role="status" aria-live="polite">
       <svg class="icono-notificacion icono-noti-ok">…</svg>
       <div class="lista-parrafos-noti"><p>…</p></div>
       <button class="btn-cerrar-notificacion icono-noti-ok">…</button>
   </div>

   <div class="cont-pregunta" id="nota-pregunta" role="alertdialog">
       <button class="btn-cerrar-notificacion uAbsoluteTR5 icono-noti-pr">…</button>
       <p class="titulo-xform tCen" id="nota-pregunta-titulo">Pregunta</p>
       <div class="lista-parrafos-preg"><p>…</p></div>
       <div class="cont-lista-btn-noti">
           <button class="btn">Ok</button><button class="btn">No</button>
       </div>
   </div>

   <div class="cont-subida" id="nota-subida" role="status">…</div>
   <div id="base_loader"><span class="loader"></span></div>
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1. Aviso (toast)
   ---------------------------------------------------------------------------- */
.cont-notificacion
{
    position: fixed;
    top: 50px;
    right: 15px;
    z-index: 99500000;

    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: var(--aj-sp-4, 12px);

    width: 320px;
    max-width: calc(100vw - 24px);
    padding: 14px 36px 14px 16px;

    background: var(--aj-s3, rgba(255, 255, 255, .88));
    -webkit-backdrop-filter: blur(var(--aj-blur-lg, 20px)) saturate(var(--aj-sat, 140%));
    backdrop-filter:         blur(var(--aj-blur-lg, 20px)) saturate(var(--aj-sat, 140%));
    border: 1px solid var(--aj-line, rgba(15, 23, 42, .08));
    border-radius: var(--aj-r-lg, 14px);
    box-shadow: var(--aj-sh3, 0 24px 64px rgba(2, 32, 71, .18)), var(--aj-edge, inset 0 1px 0 rgba(255,255,255,.75));
    overflow: hidden;

    transform: translateX(calc(100% + 24px));
    animation: aj_popup_entrada 12s var(--aj-ease, cubic-bezier(.2,.8,.2,1)) 0s 1 normal forwards;
}

/* Barra de estado: color según el tipo. Sin :has() queda el acento corporativo. */
.cont-notificacion::before
{
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--aj-accent, #0174DF);
}
.cont-notificacion:has(.icono-noti-ok)::before {background: var(--aj-ok, #0E8A6B);}
.cont-notificacion:has(.icono-noti-er)::before {background: var(--aj-error, #B3261E);}
.cont-notificacion:has(.icono-noti-in)::before {background: var(--aj-info, #0B6FA4);}
.cont-notificacion:has(.icono-noti-cu)::before {background: var(--aj-warn, #B26A00);}

@keyframes aj_popup_entrada
{
    0%    {transform: translateX(calc(100% + 24px)); opacity: 0;}
    2%    {transform: translateX(0);                  opacity: 1;}
    97%   {transform: translateX(0);                  opacity: 1;}
    100%  {transform: translateX(calc(100% + 24px));  opacity: 0;}
}


/* ----------------------------------------------------------------------------
   2. Pregunta
   ---------------------------------------------------------------------------- */
.cont-pregunta
{
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99500000;

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--aj-sp-3, 8px);

    width: 320px;
    max-width: calc(100vw - 24px);
    padding: 18px;

    background: var(--aj-s3, rgba(255, 255, 255, .9));
    -webkit-backdrop-filter: blur(var(--aj-blur-xl, 24px)) saturate(var(--aj-sat, 140%));
    backdrop-filter:         blur(var(--aj-blur-xl, 24px)) saturate(var(--aj-sat, 140%));
    border: 1px solid var(--aj-line, rgba(15, 23, 42, .08));
    border-radius: var(--aj-r-xl, 18px);
    box-shadow: var(--aj-sh3, 0 24px 64px rgba(2, 32, 71, .18)), var(--aj-edge, inset 0 1px 0 rgba(255,255,255,.75));
}

/* Título: replica .titulo-xform/.tCen para no depender de xForm. */
.cont-pregunta > .titulo-xform
{
    font-family: textoB, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.3;
    color: var(--aj-ink, #1B2735);
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--aj-line, rgba(15, 23, 42, .08));
}
.cont-pregunta > .tCen {text-align: center;}

/* Botón de cierre de la pregunta (la clase uAbsoluteTR5 viene del markup). */
.cont-pregunta > .btn-cerrar-notificacion,
.cont-pregunta > .uAbsoluteTR5
{
    position: absolute;
    top: 10px;
    right: 10px;
}

.cont-pregunta .cont-lista-btn-noti
{
    display: flex;
    gap: var(--aj-sp-3, 8px);
    margin-top: var(--aj-sp-2, 6px);
}


/* ----------------------------------------------------------------------------
   3. Botones dentro de popups (alcance limitado: no toca .btn del resto)
   ---------------------------------------------------------------------------- */
.cont-pregunta .btn,
.cont-subida .btn
{
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-height: 40px;
    padding: 8px 12px;

    font-family: textoR, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.2;

    color: #FFFFFF;
    background: var(--aj-accent, #0174DF);
    border: 1px solid var(--aj-accent, #0174DF);
    border-radius: var(--aj-r-md, 10px);
    box-shadow: var(--aj-sh1, 0 1px 2px rgba(2, 32, 71, .06));
    cursor: pointer;
    transition: background-color var(--aj-t1, 120ms) var(--aj-ease, ease),
                border-color var(--aj-t1, 120ms) var(--aj-ease, ease);
}
.cont-pregunta .btn:hover,
.cont-subida .btn:hover
{
    background: var(--aj-accent-hover, #0163C0);
    border-color: var(--aj-accent-hover, #0163C0);
}
.cont-pregunta .btn:focus-visible,
.cont-subida .btn:focus-visible,
.btn-cerrar-notificacion:focus-visible
{
    outline: none;
    box-shadow: var(--aj-focus, 0 0 0 2px #FFF, 0 0 0 4px #0B4F9E);
}

/* Reparto: en la pregunta los botones se dividen el ancho; en la subida, el botón ocupa todo */
.cont-pregunta .cont-lista-btn-noti .btn {flex: 1 1 0;}
.cont-subida .btn {width: 100%;}


/* ----------------------------------------------------------------------------
   4. Estado de subida
   ---------------------------------------------------------------------------- */
.cont-subida
{
    position: fixed;
    top: 50px;
    right: 15px;
    z-index: 99500000;

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--aj-sp-4, 12px);

    width: 320px;
    max-width: calc(100vw - 24px);
    padding: 16px;

    background: var(--aj-s3, rgba(255, 255, 255, .9));
    -webkit-backdrop-filter: blur(var(--aj-blur-lg, 20px)) saturate(var(--aj-sat, 140%));
    backdrop-filter:         blur(var(--aj-blur-lg, 20px)) saturate(var(--aj-sat, 140%));
    border: 1px solid var(--aj-line, rgba(15, 23, 42, .08));
    border-radius: var(--aj-r-lg, 14px);
    box-shadow: var(--aj-sh3, 0 24px 64px rgba(2, 32, 71, .18)), var(--aj-edge, inset 0 1px 0 rgba(255,255,255,.75));

    transform: translateX(calc(100% + 24px));
    animation: aj_subida_entrada 1s var(--aj-ease, cubic-bezier(.2,.8,.2,1)) 0s 1 normal forwards;
}

@keyframes aj_subida_entrada
{
    from {transform: translateX(calc(100% + 24px)); opacity: 0;}
    to   {transform: translateX(0);                  opacity: 1;}
}

.cont-cuerpo-subida
{
    display: flex;
    align-items: center;
    gap: var(--aj-sp-4, 12px);
}
.cont-cuerpo-subida p
{
    margin: 0;
    font-family: textoL, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: var(--aj-ink, #1B2735);
}
.cont-cuerpo-subida #val-pgs
{
    font-family: textoB, system-ui, sans-serif;
    color: var(--aj-link, #0B4F9E);
}


/* ----------------------------------------------------------------------------
   5. Textos y utilidades compartidas de los popups
   ---------------------------------------------------------------------------- */
.icono-notificacion
{
    flex: none;
    width: 36px;
    height: 36px;
}

/* Colores de estado (fill se hereda al path del svg) */
.icono-noti-ok {fill: var(--aj-ok, #0E8A6B);    color: var(--aj-ok, #0E8A6B);}
.icono-noti-er {fill: var(--aj-error, #B3261E); color: var(--aj-error, #B3261E);}
.icono-noti-in {fill: var(--aj-info, #0B6FA4);  color: var(--aj-info, #0B6FA4);}
.icono-noti-cu {fill: var(--aj-warn, #B26A00);  color: var(--aj-warn, #B26A00);}
.icono-noti-pr {fill: var(--aj-accent, #0174DF);color: var(--aj-accent, #0174DF);}

.lista-parrafos-noti,
.lista-parrafos-preg
{
    display: flex;
    flex-direction: column;
    gap: var(--aj-sp-2, 6px);
    width: 100%;
    min-width: 0;
}

.lista-parrafos-noti p,
.lista-parrafos-preg p
{
    margin: 0;
    font-family: textoL, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: var(--aj-ink, #1B2735);
    overflow-wrap: anywhere;
}

/* Botón de cierre: 18 px de icono, área táctil de 32 px */
.btn-cerrar-notificacion
{
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--aj-r-pill, 999px);
    cursor: pointer;
    transition: background-color var(--aj-t1, 120ms) var(--aj-ease, ease),
                transform var(--aj-t1, 120ms) var(--aj-ease, ease);
}
.btn-cerrar-notificacion > svg
{
    width: 18px;
    height: 18px;
    fill: currentColor;
}
.btn-cerrar-notificacion:hover
{
    background: rgba(15, 23, 42, .06);
    transform: scale(1.05);
}

/* En el toast el cierre va en la esquina, fuera del flujo */
.cont-notificacion > .btn-cerrar-notificacion
{
    position: absolute;
    top: 6px;
    right: 6px;
}


/* ----------------------------------------------------------------------------
   6. Loader de procesos
   ---------------------------------------------------------------------------- */
#base_loader
{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 99500001;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 30px;

    background: var(--aj-s3, rgba(255, 255, 255, .9));
    -webkit-backdrop-filter: blur(var(--aj-blur-md, 16px)) saturate(var(--aj-sat, 140%));
    backdrop-filter:         blur(var(--aj-blur-md, 16px)) saturate(var(--aj-sat, 140%));
    border: 1px solid var(--aj-line, rgba(15, 23, 42, .08));
    border-radius: var(--aj-r-pill, 999px);
    box-shadow: var(--aj-sh2, 0 8px 24px rgba(2, 32, 71, .08));
}

.loader,
.loader::before,
.loader::after
{
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    animation-fill-mode: both;
    animation: aj_bblFadInOut 1.8s infinite ease-in-out;
}
.loader
{
    position: relative;
    color: var(--aj-accent, #0174DF);
    font-size: 7px;
    text-indent: -9999em;
    transform: translateZ(0);
    animation-delay: -0.16s;
}
.loader::before,
.loader::after
{
    content: "";
    position: absolute;
    top: 0;
}
.loader::before {left: -3.5em; animation-delay: -0.32s;}
.loader::after  {left:  3.5em;}

@keyframes aj_bblFadInOut
{
    0%, 80%, 100% {box-shadow: 0 2.5em 0 -1.3em;}
    40%           {box-shadow: 0 2.5em 0 0;}
}


/* ----------------------------------------------------------------------------
   7. Pantallas estrechas
   ---------------------------------------------------------------------------- */
@media screen and (max-width: 420px)
{
    .cont-notificacion,
    .cont-subida
    {
        top: 12px;
        right: 12px;
        width: calc(100vw - 24px);
    }
    .cont-pregunta
    {
        top: 18%;
        width: calc(100vw - 24px);
    }
}


/* ----------------------------------------------------------------------------
   8. Degradación: sin backdrop-filter, sin transparencia o sin movimiento
   ---------------------------------------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))
{
    .cont-notificacion,
    .cont-pregunta,
    .cont-subida,
    #base_loader
    {
        background: #FFFFFF;
    }
}

@media (prefers-reduced-transparency: reduce)
{
    .cont-notificacion,
    .cont-pregunta,
    .cont-subida,
    #base_loader
    {
        background: #FFFFFF;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (prefers-reduced-motion: reduce)
{
    .cont-notificacion,
    .cont-subida
    {
        animation: none;
        transform: none;
    }
    .btn-cerrar-notificacion {transition: none;}
}