/* --------------------------------------------------------------------------------------
BASE: cond-vip-bog-v-2.0
alto header: 36px
padding: 5px x 2 = 10px
gap: 5px
sin footer → main ocupa: calc(100% - 46px)
-------------------------------------------------------------------------------------- */



/* ----------------------------------------------------------------------------------- */
/* Transiciones */
.transicion-03s {transition: .3s;}

/* ----------------------------------------------------------------------------------- */



/* ----------------------------------------------------------------------------------- */
/* Colores del proyecto (heredan de :root en ptf-cond-vip-bog.css + Estructura-v-1.1.css) */
.cl-texto-pri0 {color: var(--cl-pri0);}
.cl-texto-pri1 {color: var(--cl-pri1);}

/* ----------------------------------------------------------------------------------- */



/* ----------------------------------------------------------------------------------- */
/* Tipografía */
.textoBold {font-family: textoB;}
.titulo-xform {font-family: textoB; font-size: 1.3rem;}
.tCen {text-align: center;}

/* ----------------------------------------------------------------------------------- */



/* ----------------------------------------------------------------------------------- */
/* Posicionamiento absoluto */
.uAbsoluteTR10 {position: absolute; top: 10px; right: 10px;}

/* ----------------------------------------------------------------------------------- */



/* ----------------------------------------------------------------------------------- */
/* ID: sub-body */
body
{
    overflow: hidden;

    #sub-body
    {
        position: absolute; top: 0; left: 0; min-width: 360px; width: 100%;
        max-width: 1920px; min-height: 100%; display: flex; flex-direction: column;
        align-items: center; padding: 5px; height: 100%; max-height: 100%; gap: 5px;
        overflow: hidden;
    }

}

/* ----------------------------------------------------------------------------------- */



/* ----------------------------------------------------------------------------------- */
/* header y contenido */
#header-ajwebx
{
    display: flex; width: 100%; align-items: center; gap: 5px; height: 36px;
    background-color: var(--cl-blanco); padding: 5px; border-radius: 3px;
    border: solid 1px var(--cl-gris2);

    /* ------------------------------------------------------------------------------- */
    /* Logo */
    .link-logo-principal {display: flex; justify-content: center; align-items: center;}
    #logo-corporativo {width: 28px; height: 28px;}

    .lineaV {width: 1px; height: 22px;}
}

/* ----------------------------------------------------------------------------------- */



/* ----------------------------------------------------------------------------------- */
/* main y contenido */
main
{
    width: 100%; height: calc(100% - 51px); position: relative;
}

/* ----------------------------------------------------------------------------------- */



/* ----------------------------------------------------------------------------------- */
/* Formularios dentro de modales */
#form-login, #form-cambio-contra
{
    display: flex; flex-direction: column; gap: 5px;
}

/* Tamaño máximo de ventanas modales (mobile-first) */
.cont-login.cont-ventana-modal,
.cont-cambio-contra.cont-ventana-modal
{
    max-width: 320px;
    max-height: 85%;
    height: max-content;

    .cont-cuerpo {overflow-y: auto;}
}

/* ----------------------------------------------------------------------------------- */





/* ------------------------------------------------------------------------------- */
/* Objeto: Área de trabajo */
#main-area-trabajo
{
    width: 100%; height: 100%; position: absolute; left: 0; top: 0;
    display: flex; flex-direction: column;
    background-color: var(--cl-gris4);
}

#main-area-trabajo[display="off"] {display: none;}

.servicios-cabecera
{
    flex-shrink: 0;
    padding: 4px 8px 12px 8px;

    .servicios-titulo {font-family: textoB; font-size: 1.2rem; color: var(--cl-pri0);}
    .servicios-fecha {font-family: textoL; font-size: 0.85rem; color: var(--cl-gris1);}

    #servicios-indicador {color: var(--cl-pri2);}
}

.servicios-scroll
{
    flex: 1; overflow-y: auto; padding: 0 8px;
}

.servicios-lista
{
    display: flex; flex-direction: column; gap: 10px;
}

.servicios-separador-fecha
{
    display: flex; justify-content: space-between; align-items: center;
    font-family: textoB; font-size: 0.95rem; color: var(--cl-pri0);
    padding: 22px 8px 8px 8px;
    margin-top: 28px;
    border-bottom: solid 2px var(--cl-pri25);
    background-color: var(--cl-pri4);

    .servicios-sep-cant
    {
        font-family: textoM; font-size: 0.7rem;
        background-color: var(--cl-pri3); color: var(--cl-pri0);
        padding: 1px 6px; border-radius: 10px;
    }
}

.servicio-card
{
    background-color: var(--cl-blanco);
    border: solid 1px var(--cl-gris3);
    border-left: 3px solid var(--cl-pri1);
    border-radius: 8px;
    padding: 12px;
    display: flex; flex-direction: column; gap: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.servicio-card.servicio-hoy    {border-left-color: var(--cl-ok);}
.servicio-card.servicio-futuro {border-left-color: var(--cl-cuidado);}

.servicio-card-header
{
    display: flex; justify-content: space-between; align-items: center;

    .servicio-tipo {font-family: textoB; font-size: 0.9rem; color: var(--cl-pri0);}
    .servicio-hora {font-family: textoB; font-size: 1.1rem; color: var(--cl-negro2);}
}

.servicio-pasajero
{
    font-family: textoB; font-size: 1rem; color: var(--cl-negro1);
    margin-top: 2px;
    word-break: break-word;
}

.servicio-detalle
{
    font-family: textoL; font-size: 0.85rem; color: var(--cl-negro2);
    word-break: break-word;
}

.servicio-info
{
    font-family: textoL; font-size: 0.75rem; color: var(--cl-gris1);
    margin-top: 4px;
    padding-top: 6px;
    border-top: solid 1px var(--cl-gris4);
    word-break: break-word;
}

.servicio-fecha-card
{
    display: flex; align-items: center;
    font-family: textoL; font-size: 0.7rem; color: var(--cl-gris2);

    > span:last-child {margin-left: auto;}
}

.servicio-agrupado
{
    font-family: textoB; color: var(--cl-pri1);
}

.servicios-total
{
    flex-shrink: 0;
    text-align: center; font-family: textoL; font-size: 0.8rem;
    color: var(--cl-gris1); padding: 10px 8px;
    background-color: var(--cl-gris4);
    border-top: solid 1px var(--cl-gris3);
}

/* =================================================================================== */





/* =================================================================================== */
/* Menú desplegable del perfil (normalmente en xForm-sodis-v-1.2.css) */
/* =================================================================================== */

/* Contenedor del menú desplagable */
.cont-menu-desp {position: relative; width: max-content; height: max-content;}

/* Contenedor lista de items */
.menu-desp
{
    position: absolute;
    width: max-content;
    max-width: 340px;
    min-width: 200px;
    padding: 0 5px;
    background-color: var(--cl-blanco);
    border: solid 1px var(--cl-gris3);
    border-radius: 3px; display: flex;
    flex-direction: column;
    z-index: 100000000;

    .menu-fila-1 {
        display: flex;
        justify-content: center;
        padding-block: 5px;

        > p {
            padding: 0;
            font-size: 1.1rem;
            font-family: textoB;
        }
    }

    .menu-fila-2 {
        display: flex;
        flex-direction: column;
        padding-block: 5px;
        border-top: solid 1px var(--cl-gris2);
        padding-inline: 5px;

        > p {
            padding: 0;
            font-size: var(--tm-texto);
            font-family: textoR;

            span {
                color: var(--cl-pri1);
            }
        }

        > .nombre {
            font-size: var(--tm-texto);
            font-family: textoB;
            color: var(--cl-pri1);
        }
    }

    /* Item */
    .menu-desp-item {
        display: flex;
        padding-block: 5px;
        border-top: solid 1px var(--cl-gris3);

        > div {
            width: 100%;
            justify-content: space-between;
            padding-inline: 5px;
        }

        > button, > .label-input-file {
            border: transparent;
            border-radius: 3px;
            background-color: transparent;
            color: var(--cl-negro2);
            transition: 0.3s;
            padding: 0 5px;
            font-family: textoR;
            cursor: pointer;
            width: 100%;
            text-align: left;
            font-size: var(--tm-texto);
        }

        > button:hover, > .label-input-file:hover {
            background-color: var(--cl-pri25);
            color: var(--cl-negro1);
        }

        > button:focus, > .label-input-file:focus {
            outline: none;
            background-color: var(--cl-pri25);
        }
    }
}

/* Posición del contenedor de lista de items */
.uMenu-despBR-5 {position: absolute; top: calc(100% + 6px); right: -5px;}
.uMenu-despBR0 {position: absolute; top: calc(100% + 13px); right: 0px;}
/* =================================================================================== */





/* =================================================================================== */
/* Popups y notificaciones (normalmente en xForm-sodis-v-1.2.css) */
/* =================================================================================== */

/* Fondo semitransparente para popups (preguntas, loader) */
.cubierta_fondo
{
    display: flex; justify-content: center; align-items: center; position: absolute;
    left: 0; top: 0; width: 100%; height: 100%; background-color: var(--cl-cubierta-fondo);
    overflow-y: auto;
}

@media screen and (min-width: 480px) {
    .cubierta_fondo {min-height: 680px;}
}

/* Contenedor para notificaciones (ok, error, info, cuidado) */
.cont-notificacion
{
    display: flex; gap: 10px; padding: 5px; border: solid 1px var(--cl-gris1);
    border-radius: 3px; background-color: var(--cl-blanco); width: 320px;
    box-shadow: 0 0 2px 3px var(--cl-gris3); position: absolute; top: 50px;
    right: -320px; animation: popup_animacion 12s ease 0s 1 normal forwards;
    z-index: 99500000;
}

@keyframes popup_animacion {
    0%    {right: -320px;}
    5%    {right: 15px;}
    95%   {right: 15px;}
    100%  {right: -320px;}
}

/* Contenedor para preguntas (confirmación) */
.cont-pregunta
{
    display: flex; gap: 5px; padding: 5px; border: solid 1px var(--cl-gris1);
    border-radius: 3px; flex-direction: column; background-color: var(--cl-blanco);
    width: 320px; box-shadow: 0 0 2px 3px var(--cl-gris3); position: absolute;
    left: calc(50% - 160px); top: 30%; z-index: 99500000;
}

/* Contenedor para informe de subida */
.cont-subida
{
    display: flex; gap: 5px; padding: 5px; border: solid 1px var(--cl-gris1);
    border-radius: 3px; flex-direction: column; background-color: var(--cl-blanco);
    width: 320px; box-shadow: 0 0 2px 3px var(--cl-gris3); position: absolute;
    right: -320px; top: 50px; z-index: 99500000;
    animation: popup_subida_on 1s ease 0s 1 normal forwards;
}

@keyframes popup_subida_on {
    from {right: -320px;}
    to   {right: 15px;}
}

/* Tamaño para el icono de una notificación */
.icono-notificacion {width: 36px; height: 36px;}

/* Colores para personalizar notificaciones */
.icono-noti-ok {fill: var(--cl-popup-ok);}
.icono-noti-er {fill: var(--cl-popup-error);}
.icono-noti-in {fill: var(--cl-popup-info);}
.icono-noti-cu {fill: var(--cl-porup-cuidado);}
.icono-noti-pr {fill: var(--cl-pri1);}

/* Estructura párrafos en una notificación */
.lista-parrafos-noti {display: flex; flex-direction: column; gap: 5px; width: 248px;}

/* Estructura párrafos en una pregunta */
.lista-parrafos-preg
{
    display: flex; flex-direction: column; gap: 5px; width: 100%; padding-inline: 5px;
}

.cont-cuerpo-subida {display: flex; gap: 7px;}

/* Estilo para los párrafos */
.lista-parrafos-noti p, .lista-parrafos-preg p, .cont-cuerpo-subida p, span
{font-family: textoL; font-size: 16px;}

/* Botón para cerrar notificaciones */
.btn-cerrar-notificacion
{
    background-color: transparent; border: none; width: 18px; height: 18px;
    display: flex; justify-content: center; align-items: center; cursor: pointer;
}
.btn-cerrar-notificacion > svg {width: 18px; height: 18px;}
.btn-cerrar-notificacion:hover svg {transform: scale(1.3);}

/* Estructura para la lista de botones en una pregunta */
.cont-lista-btn-noti {display: flex; gap: 5px; margin-top: 7px;}
.cont-lista-btn-noti button {width: calc(50% - 2.5px);}

/* Posicionamiento para botón cerrar en pregunta */
.uAbsoluteTR5 {position: absolute; top: 5px; right: 5px;}

/* =================================================================================== */