:root {
    --color-fondo-claro: rgb(254, 234, 222);
    --color-texto-oscuro: #65030D;
}

html {
    font-size: 12px;
}

@media (min-width: 768px) {
    html {
        font-size: 14px;
    }
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.body-expositivo {
    font-size: small;
    color: var(--color-texto-oscuro);
    text-align: justify;
    margin-right: 15vw;
    margin-left: 15vw;
}

.body-avisos {
    font-size: small;
    color: var(--color-texto-oscuro);
    text-align: justify;
    margin-right: 8vw;
    margin-left: 8vw;
}

.body-titulo {
    color: var(--color-texto-oscuro);
    margin-right: 15px;
}

.body-titulo.estrecho {
    margin-left: 30px;
    margin-right: 30px;
}

.body-deslizante-entrada {
    position: relative;
    z-index: -90;
    min-height: 35vh;
    height: auto;
    max-width: 60%;
    margin-right: 20%;
    margin-left: 20%;
    font-size: 1.1em;
    font-family: Calibri, Arial, sans-serif;
    font-style: normal;
    color: var(--color-texto-oscuro);
    text-align: center;
    animation-duration: 5s;
    animation-delay: 0.5s;
    animation-name: desliza;
    border-top-width: 2px;
    border-right-width: 0px;
    border-bottom-width: 2px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-top-color: #330000;
    border-right-color: #330000;
    border-bottom-color: #330000;
    border-left-color: #330000;
    line-height: 25px;
}

@keyframes desliza {
    from {
        top: -200px;
        color: #FFFFFF;
    }

    to {
        top: 0px;
        color: var(--color-texto-oscuro);
    }
}

.body-marco-fondo {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #000000;
    text-align: center;
    position: absolute;
    top: 0px;
    left: 0px;
    padding-top: 0px;
    min-height: 95vh;
    width: 100vw;
    opacity: 0.25;
    z-index: -100;
}

.body-marco-fondo.imagenentrada {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-image: url(/Imagenes/IMG_0969.jpeg);
}

/* ESTILOS PARA BARRA DE NAVEGACIÓN*/

.navbar-brand.mibanda {
    color: rgba(251, 249, 249, 0.9) !important;
}

.navbar-brand.mibanda:hover {
    color: rgba(251, 249, 249, 1) !important;
}

.text-dark.mitextomenu {
    color: rgba(251, 249, 249, 0.6) !important;
}

.text-dark.mitextomenu:hover {
    color: rgba(251, 249, 249, 1) !important;
}

.navbar-toggler-icon.miicono {
    background-image: url("data:image/svg+xml;charset=UTF8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(250,250,250,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.enlaces {
    color: var(--color-texto-oscuro);
    text-decoration: underline;
}

.enlaces:hover {
    color: black;
    text-decoration: none;
}

/* mis estilos para cabeceras y pies*/
.cabeza-menu-general {
    position: fixed;
    margin-top: 0px;
    width: 100%;
    z-index: 1030;
}

.pie-textoaviso {
    font-size: 10px;
    left: 20px;
    right: 20px;
    text-align: center;
}

.pie-menu-general {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-grow: 1 !important;
    justify-content: space-evenly;
    width: 100%;
}

.pie-menu-opciones {
    font-size: 12px;
    color: var(--color-texto-oscuro);
    text-decoration: none;
}

.pie-menu-opciones:hover {
    color: black;
    text-decoration: underline;
}

.pie-fondo {
    background-color: var(--color-fondo-claro);
    margin-bottom: 0px;
    width: 100%;
    position: absolute;
    bottom: 0px;
}

/*estilo para marca registrada*/
.marcareg {
    font-size: x-small;
}

/*tipo de contenedores usados*/
.flex-contenedor {
    display: flex;
    padding: 0px;
    margin: 0px;
    list-style: none;
    border: 1px solid silver;
}

.flex-contenedor.desliza {
    flex-wrap: wrap;
    justify-content: space-around;
}

.flex-contenedor.nodesliza {
    flex-wrap: nowrap;
}

.flex-contenedor-desliza-vertical {
    display: flex;
    padding: 0px;
    margin: 10px;
    width: auto;
    max-width: 90%;
    list-style: none;
    border: 1px solid silver;
    flex-wrap: wrap;
    justify-content: space-around;
    flex-direction: column;
}

.flex-contenedor-elemento {
    background-color: var(--color-fondo-claro);
    padding: 0px;
    margin: 10px;
    width: 370px;
    height: auto;
    color: maroon;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}

.flex-contenedor-elemento-descriptivo {
    background-color: var(--color-fondo-claro);
    padding: 0px;
    margin: 5px;
    color: maroon;
    font-weight: normal;
    font-size: 0.5em;
    text-align: left;
    max-width: 100%;
}

.flex-contenedor-elemento-descriptivo.medio {
    font-size: 1em;
}

.flex-contenedor-elemento-descriptivo.grande {
    font-weight: bold;
    font-size: 2em;
}

.flex-contenedor-elemento-titulo {
    text-decoration: underline;
    font-weight: bold;
    font-size: 1em;
}

.menu_opcion_con_fondo {
    color: var(--color-texto-oscuro);
    margin-left: 30px;
    margin-right: 30px;
    background-color: var(--color-fondo-claro);
}


/* estilos para formularios */

.col-50-fija {
    width: 50%;
    flex-grow: 0; /*no crecerá aunque necesite especio*/
    flex-shrink: 0; /*no encogerá aunque le falten espacio a los demás*/
    flex-basis: 45rem; /*tendrá su tamaño a partir de sus propiedades como with y contenido*/
    margin-bottom: 0.5rem;
    padding: 0.5rem;
}

.col-50-ampliable {
    flex-grow: 1; /*no crecerá aunque necesite especio*/
    flex-shrink: 0; /*no encogerá aunque le falten espacio a los demás*/
    flex-basis: 45rem; /*tendrá su tamaño a partir de sus propiedades como with y contenido*/
    margin-bottom: 0.5rem;
    padding: 0.5rem;
}

.col-33-fija {
    width: 33%;
    flex-grow: 0; /*no crecerá aunque necesite especio*/
    flex-shrink: 0; /*no encoferá aunque le falten espacio a los demás*/
    flex-basis: 30rem; /*tendrá su tamaño a partir de sus propiedades como with y contenido*/
    margin-bottom: 0.5rem;
    padding: 0.5rem;
}

.col-33-ampliable {
    flex-grow: 1; /*no crecerá aunque necesite especio*/
    flex-shrink: 0; /*no encoferá aunque le falten espacio a los demás*/
    flex-basis: 30rem; /*tendrá su tamaño a partir de sus propiedades como with y contenido*/
    margin-bottom: 0.5rem;
    padding: 0.5rem;
}

.col-25-fija {
    width: 20%;
    flex-grow: 0; /*no crecerá aunque necesite especio*/
    flex-shrink: 0; /*no encoferá aunque le falten espacio a los demás*/
    flex-basis: 25%; /*tendrá su tamaño a partir de sus propiedades como with y contenido*/
}

.col-25-ampliable {
    flex-grow: 1; /*no crecerá aunque necesite especio*/
    flex-shrink: 0; /*no encoferá aunque le falten espacio a los demás*/
    flex-basis: 20rem; /*tendrá su tamaño a partir de sus propiedades como with y contenido*/
    margin-bottom: 0.5rem;
    padding: 0.5rem;
}

.contenedor-mio-desliza {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid black;
    margin-bottom: 5px;
    padding: 5px;
}

.contenedor_colorfondo {
    border: 1px solid black;
    margin: 5px;
    padding: 5px;
    background-color: lavender;
}
.contenedor_colorclaro {
    border: 1px solid black;
    margin: 5px;
    padding: 5px;
    background-color: antiquewhite;
}
.form-label-mio{
    margin-bottom: .1rem;
    color: var(--color-texto-oscuro);
    font-size: smaller;
}
.form-control-mio {
    padding: .25rem .75rem .25rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    display: block;
    width: 100%;
}
.form-select-mio {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    display: block;
    width: 100%;
    padding: .25rem 2.25rem .25rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.grupo_inputs {
    border: 1px solid black;
    margin: 5px;
    padding: 5px;
    display: block;
    background-color: lavender;
}

.inputsmio-fondoclaro {
    display: inline-block;
    max-width: 100%; /* Nunca sobrepasa el contenedor */
    box-sizing: border-box; /* Incluye padding en el ancho */
    color: var(--color-texto-oscuro);
    background-color: var(--color-fondo-claro);
}
.inputsmio-10 {
    width: 10rem;
    display: inline-block;
    max-width: 100%; /* Nunca sobrepasa el contenedor */
    box-sizing: border-box; /* Incluye padding en el ancho */
}
.inputsmio-15 {
    width: 15rem;
    display: inline-block;
    max-width: 100%; /* Nunca sobrepasa el contenedor */
    box-sizing: border-box; /* Incluye padding en el ancho */
}

.inputsmio-20 {
    width: 20rem;
    display: inline-block;
    max-width: 100%; /* Nunca sobrepasa el contenedor */
    box-sizing: border-box; /* Incluye padding en el ancho */
}
.inputsmio-30 {
    width: 30rem;
    display: inline-block;
    max-width: 100%; /* Nunca sobrepasa el contenedor */
    box-sizing: border-box; /* Incluye padding en el ancho */
}
.inputsmio-40 {
    width: 40rem;
    display: inline-block;
    max-width: 100%; /* Nunca sobrepasa el contenedor */
    box-sizing: border-box; /* Incluye padding en el ancho */
}
.inputsmio-80 {
    width: 80rem;
    display: inline-block;
    max-width: 100%; /* Nunca sobrepasa el contenedor */
    box-sizing: border-box; /* Incluye padding en el ancho */
}
.inputsmio-100 {
    width: 100rem;
    display: inline-block;
    max-width: 100%; /* Nunca sobrepasa el contenedor */
    box-sizing: border-box; /* Incluye padding en el ancho */
}
.mb-3-mio { /*se aplica a cada elemento formado por etiqueta+input-span de un campo (dentro de los grupos) cambiar como style el ancho 35rem*/
    margin-bottom: 0px;
    display: inline-block;
    max-width: 100%; /* Nunca sobrepasa el contenedor */
    box-sizing: border-box; /* Incluye padding en el ancho */
}

.texto-NScol {
    text-decoration: underline;
    font-weight: bold;
    font-size: 1em;
    color: var(--color-texto-oscuro);
}

.texto-Scol {
    text-decoration: underline;
    font-size: 1em;
    color: var(--color-texto-oscuro);
}

.texto-Ncol {
    font-weight: bold;
    font-size: 1em;
    color: var(--color-texto-oscuro);
}

.texto-col {
    font-size: 1em;
    color: var(--color-texto-oscuro);
}

.texto-col-inverso {
    padding: 0.5rem;
    font-size: 1em;
    background-color: var(--color-texto-oscuro);
    color: white;
}

.texto-derecha {
    text-align: right;
}
.titulo1-granate {
    text-decoration: underline;
    font-weight: bold;
    font-size: 1.5em;
    color: var(--color-texto-oscuro);
}
.titulo2-granate {
    /*text-decoration: underline;*/
    font-weight: bold;
    font-size: 1.5em;
    color: var(--color-texto-oscuro);
}
.titulo2-granate-inverso {
    /*text-decoration: underline;*/
    font-weight: bold;
    font-size: 1.5em;
    background-color: var(--color-texto-oscuro);
    color:white;
}
.titulo3-granate {
    text-decoration: underline;
    font-size: 1.5em;
    color: var(--color-texto-oscuro);
}


/* botones*/
.boton-mio-danger {
    font-size:1rem;
    padding-block: 0;
    width: 2.5rem;
    display: inline;
    line-height: 2rem;
    background-color: #c20404;
    color: #c20404;
    border-color: #c20404;
    border: none;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.boton-mio-verde {
    font-size: 1rem;
    padding-block: 0;
    width: 2.5rem;
    display: inline;
    line-height: 2rem;
    background-color: forestgreen;
    color: #1f571a;
    border-color: #1f571a;
    border: none;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left:   0px;
    margin-right: 0px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.boton-mio-verde-sinancho {
    font-size: 1rem;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 5px;
    padding-top: 5px;
    display: inline;
    background-color: forestgreen;
    color: white;
    border-color: #1f571a;
    border: none;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}


.boton-mio-naranja {
    font-size: 1rem;
    padding-block: 0;
    width: 2.5rem;
    display: inline;
    line-height: 2rem;
    color: white;
    background-color: #ea7d3c;
    border-color: #ea7d3c;
    border: none;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 10px;
    margin-right: 10px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.boton-mio-naranja-sinancho {
    font-size: 1rem;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 5px;
    padding-top: 5px;
    display: inline;
    background-color: #ea7d3c;
    color: white;
    border-color: #ea7d3c;
    border: none;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

/* CONTINUAR EN EL ESPACIO ANTERIOR */
/* Banner de Cookies */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: maroon;
    color: rgb(254, 234, 222);
    padding: 20px;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.4s ease-in-out;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

        .cookie-banner.show {
            transform: translateY(0);
        }

    .cookie-content {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .cookie-text h4 {
        margin: 0 0 8px 0;
        font-size: 1.2rem;
        font-weight: 600;
        color: rgb(254, 234, 222);
    }

    .cookie-text p {
        margin: 0;
        font-size: 0.95rem;
        line-height: 1.4;
        color: rgb(254, 234, 222);
        opacity: 0.95;
    }

    .cookie-actions {
        display: flex;
        align-items: center;
        gap: 15px;
        flex-shrink: 0;
    }

    .cookie-link {
        color: rgb(254, 234, 222);
        text-decoration: underline;
        font-size: 0.9rem;
        transition: opacity 0.3s ease;
    }

        .cookie-link:hover {
            color: rgb(254, 234, 222);
            opacity: 0.8;
        }

    .cookie-accept-btn {
        background-color: rgb(254, 234, 222);
        color: maroon;
        border: none;
        padding: 12px 24px;
        border-radius: 6px;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }

        .cookie-accept-btn:hover {
            background-color: rgb(245, 220, 200);
            transform: translateY(-1px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }

        .cookie-accept-btn:active {
            transform: translateY(0);
        }

    /* Responsive */
    @media (max-width: 768px) {
        .cookie-content {
            flex-direction: column;
            text-align: center;
            gap: 15px;
        }

        .cookie-text h4 {
            font-size: 1.1rem;
        }

        .cookie-text p {
            font-size: 0.9rem;
        }

        .cookie-actions {
            width: 100%;
            justify-content: center;
            gap: 20px;
        }

        .cookie-accept-btn {
            padding: 14px 28px;
            font-size: 1rem;
        }
    }

    @media (max-width: 480px) {
        .cookie-banner {
            padding: 15px;
        }

        .cookie-actions {
            flex-direction: column;
            gap: 12px;
        }

        .cookie-accept-btn {
            width: 100%;
            max-width: 250px;
        }
        .mb-3-mio {
            display: block;
            padding-right: 10px;
            width: 100%
        }
    }

    /* Centrado y tamaño responsivo del vídeo */
    .video-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 1.5rem 0;
    }

    /* Limita tamaño máximo; ancho 100% para ser responsive */
    .video-fluid {
        width: 50%;
        max-width: 720px; /* ajusta según necesites */
        height: auto;
        border-radius: 4px; /* opcional */
        display: block;
    }

    /* Contenedor centrado para gif */
    .gif-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 1rem 0;
    }

    /* Imagen responsiva: ocupa 100% del contenedor hasta un máximo */
    .gif-fluid {
        display: block;
        width: 50%;
        max-width: 420px; /* tamaño por defecto en móvil/tablet */
        height: auto;
    }

    /* Ajustes para pantallas más grandes */
    @media (min-width: 768px) {
        .gif-fluid {
            max-width: 560px;
        }
    }

    @media (min-width: 1200px) {
        .gif-fluid {
            max-width: 560px;
        }
    }

    /* Alternativa con utilidades Bootstrap (si prefieres no añadir CSS): antex 720
   <div class="d-flex justify-content-center my-3">
     <img src="..." class="img-fluid" style="max-width:420px" />
   </div>
*/

    /* Gotchas y recomendaciones:
 - No uses height fija (rompe la proporción y puede pixelar la animación).
 - width:100% + max-width hace la imagen responsiva y centrada.
 - Los GIF grandes consumen ancho de banda; si es muy pesado valora convertir a MP4/WebM y usar <video> o usar un poster estático.
 - Limpia caché (Ctrl+F5) tras cambiar CSS.
*/