@font-face {
    font-family: AplFont;
    src: url('../fonts/conthrax-sb.ttf');
}


@font-face {
    font-family: Montserrat;
    src: url('../fonts/Montserrat.ttf');
}


/* Recoleta-Regular.otf es una versión demo (sin á/é/í/ó/ú/ñ/¿/¡, dibuja una
   marca de agua "DEMO latinotype" en su lugar). Rozha One es la alternativa
   gratuita: el mismo peso ligero y aire elegante, con acentuación completa. */
@font-face {
    font-family: 'Rozha One';
    src: url('../fonts/RozhaOne-Regular.woff2') format('woff2');
}

body{
    font-family:Montserrat;
    background-color: var(--apl-background-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1 0 auto;
}

.site-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    background-color: var(--apl-primary-color);
    color: var(--apl-secondary-color);
    font-size: .85rem;
}

.site-footer-left,
.site-footer-right {
    margin: 0;
    opacity: 0.6;
}
.site-footer-p {
    padding: 1.25rem 1.5rem;
}

.site-footer-img-lf {
    height: 54px;
    padding: 6px 0px;
    margin-left: -24px;
}

.site-footer-img-rg {
    height: 54px;
    padding: 10px 0px;
    margin: 0px 24px 0px -16px;
}

@media (max-width: 575.98px) {
    .site-footer {
        justify-content: center;
        text-align: center;
    }
}


.bg-apl-primary {
    background-color: var(--apl-primary-color) !important;
}

a {
    color: var(--link-font-color);
}

a:hover {
    color: var(--link-hover-font-color);
}

.btn-apl {
    background-color: var(--apl-primary-color) !important;
    min-width: var(--btn-min-width);
    color: var(--btn-font-color);
    transition: transform .12s ease, background-color .15s ease-in-out;
}

    .btn-apl:hover, .btn-apl:active, .btn-apl:focus {
        background-color: var(--apl-primary-hover-color) !important;
        color: var(--btn-font-color);
    }

    .btn-apl:active {
        transform: scale(.97);
    }

/* Bootstrap hardcodea el azul de foco/activo en estos selectores (no usan variables),
   as� que se sobrescriben directamente para seguir la paleta de marca. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--apl-strawberry-mousse-color);
    box-shadow: 0 0 0 .25rem rgba(var(--apl-strawberry-mousse-color-rgb), .25);
}

.form-check-input:checked {
    background-color: var(--apl-primary-color);
    border-color: var(--apl-primary-color);
}

/* Formularios: label e input en la misma línea; en pantallas pequeñas, el label va encima del input. */
.field-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
}

    .field-row > .form-label {
        flex: 0 0 7rem;
        margin-bottom: 0;
    }

    .field-row > .form-control,
    .field-row > .form-select,
    .field-row > .input-group {
        flex: 1 1 8rem;
        min-width: 0;
    }

.modal-header {
    background-color: var(--apl-primary-color);
    color: var(--apl-background-color);
}

.modal-header .btn-close {
    /* Bootstrap pinta la X con un SVG de fondo (fill fijo, no sigue "color"),
       así que para teñirla del color deseado se usa como máscara: el color
       real lo pone background-color, la forma la recorta el propio SVG. */
    background-color: var(--apl-background-color);
    background-image: none;
    -webkit-mask: var(--bs-btn-close-bg) center / 1em auto no-repeat;
    mask: var(--bs-btn-close-bg) center / 1em auto no-repeat;
}

@media (max-width: 575.98px) {
    .field-row {
        flex-direction: column;
        align-items: stretch;
        gap: .25rem;
    }

        .field-row > .form-label {
            flex-basis: auto;
        }
}

.btn-primary {
    --bs-btn-bg: var(--apl-primary-color);
    --bs-btn-border-color: var(--apl-primary-color);
    --bs-btn-hover-bg: var(--apl-primary-hover-color);
    --bs-btn-hover-border-color: var(--apl-primary-hover-color);
    --bs-btn-active-bg: var(--apl-primary-hover-color);
    --bs-btn-active-border-color: var(--apl-primary-hover-color);
    --bs-btn-focus-shadow-rgb: var(--apl-primary-color-rgb);
    --bs-btn-disabled-bg: var(--apl-primary-color);
    --bs-btn-disabled-border-color: var(--apl-primary-color);
}