/* Ajustes de Qonforme sobre Velzon. Marca: brand/README.md (petroleo #0F766E, grafito #1E293B,
   UI en Plus Jakarta Sans, que se importa al inicio de app.min.css). */

:root {
    --vz-primary: #0f766e;
    --vz-primary-rgb: 15, 118, 110;
    --vz-primary-text-emphasis: #115e59;
    --vz-primary-bg-subtle: #ccfbf1;
    --vz-primary-border-subtle: #99f6e4;
    --vz-link-color: #0f766e;
    --vz-link-color-rgb: 15, 118, 110;
    --vz-link-hover-color: #115e59;
    --vz-link-hover-color-rgb: 17, 94, 89;
}

[data-theme=default] {
    --vz-font-family-primary: "Plus Jakarta Sans", sans-serif;
    --vz-font-family-secondary: "Plus Jakarta Sans", sans-serif;
}

/* Bootstrap trae estos dos con el hex del primario de Velzon fijo, no con la variable */
.btn-primary {
    --vz-btn-bg: #0f766e;
    --vz-btn-border-color: #0f766e;
    --vz-btn-hover-bg: #115e59;
    --vz-btn-hover-border-color: #115e59;
    --vz-btn-focus-shadow-rgb: 15, 118, 110;
    --vz-btn-active-bg: #134e4a;
    --vz-btn-active-border-color: #134e4a;
    --vz-btn-disabled-bg: #0f766e;
    --vz-btn-disabled-border-color: #0f766e;
}

.btn-outline-primary {
    --vz-btn-color: #0f766e;
    --vz-btn-border-color: #0f766e;
    --vz-btn-hover-bg: #0f766e;
    --vz-btn-hover-border-color: #0f766e;
    --vz-btn-active-bg: #0f766e;
    --vz-btn-active-border-color: #0f766e;
}

/* el template acentua en verde (menu activo, circulo tras los iconos); la marca es petroleo */
.navbar-landing .navbar-nav .nav-item .nav-link.active,
.navbar-landing .navbar-nav .nav-item .nav-link:focus,
.navbar-landing .navbar-nav .nav-item .nav-link:hover {
    color: var(--vz-primary) !important;
}

.icon-effect::before {
    background-color: rgba(var(--vz-primary-rgb), .2);
}

/* footer en grafito de marca, no el gris oscuro de Bootstrap */
.custom-footer.bg-dark {
    background-color: #1e293b !important;
}

/* las capturas del portal son 16:10; que no brinque el carrusel mientras cargan */
.demo-carousel .carousel-item img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top left;
}

/* El acordeon de Velzon pinta su flecha con Material Design Icons; aqui solo va Remix. */
.custom-accordionwithicon .accordion-button::after {
    font-family: remixicon;
    content: "\ea6e";
}

.custom-accordionwithicon .accordion-button:not(.collapsed)::after {
    content: "\ea4e";
}

/* aviso de privacidad */
.aviso h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: .75rem;
}

.aviso p,
.aviso li {
    color: var(--vz-secondary-color);
    line-height: 1.7;
}

/* cinco secciones en el menu: sin partir "Cómo funciona" en dos renglones */
.navbar-landing .navbar-nav .nav-link,
.navbar-landing .btn {
    white-space: nowrap;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-landing .navbar-nav .nav-item .nav-link {
        padding-left: 6px;
        padding-right: 6px;
    }

    /* selector de idioma e "Iniciar sesion" */
    .navbar-landing .btn-link {
        padding-left: 6px;
        padding-right: 6px;
    }
}

/* reportes: pestañas en petroleo, no en el verde del template */
.reportes-tabs .nav-link {
    color: var(--vz-body-color);
    background-color: var(--vz-light);
}

.reportes-tabs .nav-link.active {
    color: #fff;
    background-color: var(--vz-primary);
}

/* formatos impresos: la captura es la hoja; la tarjeta muestra su parte de arriba */
.formato .card-img-top {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: top center;
    border-bottom: 1px solid var(--vz-border-color);
}

.formato:hover {
    box-shadow: 0 .5rem 1.5rem rgba(var(--vz-primary-rgb), .15);
}

/* la etiqueta es apaisada: entera, sin recortar */
.formato .card-img-top.completa {
    object-fit: contain;
    padding: 1rem;
    background-color: #fff;
}

/* visor: capturas y formatos que se amplian en un modal */
.visor-link,
.formato {
    cursor: zoom-in;
}

#visor .modal-dialog {
    max-width: min(1440px, 94vw);
}

#visor-img {
    max-height: 88vh;
    cursor: zoom-out;
}

/* fondo mas oscuro solo con el visor abierto, no con "Iniciar sesion" */
body:has(#visor.show) .modal-backdrop.show {
    opacity: .75;
}

/* Al abrir un modal, Bootstrap quita la barra de scroll y compensa con padding en el body, pero
   no en el navbar fijo, que ademas anima su padding (transition .5s): logo y menu brincaban.
   Con el hueco de la barra siempre reservado no hay nada que compensar. */
html {
    scrollbar-gutter: stable;
}

body.modal-open {
    padding-right: 0 !important;
}