/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 02/06/2017, 17:57:08
    Author     : daniel
*/
/*
Opción 1:

Fondo: #2E2E2E
Marcos: #1E1E1E
Barra de cabecera: #4D4D4D
Pie: #2E2E2E
Color de texto sobre fondos oscuros: #FFFFFF
Color de texto sobre fondos claros: #000000
Fuentes:
Título: "Roboto", sans-serif
Subtítulo: "Lora", serif
Párrafo: "Open Sans", sans-serif
Opción 2:

Fondo: #1A1A1A
Marcos: #333333
Barra de cabecera: #777777
Pie: #1A1A1A
Color de texto sobre fondos oscuros: #FFFFFF
Color de texto sobre fondos claros: #000000
Fuentes:
Título: "Montserrat", sans-serif
Subtítulo: "EB Garamond", serif
Párrafo: "Nunito", sans-serif
Opción 3:

Fondo: #0D0D0D
Marcos: #4C4C4C
Barra de cabecera: #707070
Pie: #0D0D0D
Color de texto sobre fondos oscuros: #FFFFFF
Color de texto sobre fondos claros: #333333
Fuentes:
Título: "Playfair Display", serif
Subtítulo: "Raleway", sans-serif
Párrafo: "Roboto", sans-serif

*/
.carusel-alto {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    color: white;
}

/* Asegurar visibilidad de las imágenes dentro del carrusel */
.carousel-item img {
    display: block;
    width: 100%;
    height: auto;
}


.info {
    /*width: 32px;*/
    /*height: 32px;*/
    /*background:url('imagenes/icons/icons8-document-64.png');*/
}

.practica {
    /*background:url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSj3XfIpf-OOJRCcWz4iN2CU3qMKVVbj0p0bRvKNGVo1U9pk_8ZIlyR8pWreA');*/
}

.pie {
    margin-top: 25px;
    height: 350px;
    background-color: #2b2b2b;

}
.custom-img {
    width: 350px;
    height: 450px;
    object-fit: cover; // Esto asegura que la imagen se ajuste a la caja definida sin estirarse
border: 3px solid #000; // Un borde de 3px de color negro
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); // Sombras para dar un aspecto de marco de foto
}
@media only screen and (max-width: 568px) {
    .custom-img {

        width: 100%;
        height: auto;
    }

    .suprecion {
        display: none;
    }

    .ventana_emergente {
        z-index: 75;
        position: relative;
        overflow-y: scroll;
        min-height: 50px;
        max-height: 150px;
        width: 350px;
        top: 2px;
        left: 15px;
        background-color: #c6c8ca;
        font-size: 20px;

    }

    body {
        font-size: 10px;

    }

    a {
        font-size: 12px;
    }

    .subtitulos {
        text-align: center;
        float: right;
        color: #dddddd;
    }

    .tablareceta {
        left: 5px;
        width: 100%;
        padding: 3px;
        min-height: 550px;
    }


}

@media screen and (max-width: 1440px) and (min-width: 640px) {
    .suprecion {
        display: block;
    }

    .ventana_emergente {
        z-index: 75;
        position: relative;
        overflow-y: scroll;
        min-height: 50px;
        max-height: 150px;
        width: 350px;
        top: 130px;
        left: -150px;
        background-color: #c6c8ca;
        font-size: 20px;

    }

    .navbar {
        font-size: 23px;

        color: #FFFFFF;
        /*background: #0D0D0D;*/
    }

    /*    .tablareceta {
            left: 5px;
            width: 100%;
            padding: 3px;
            background-color: aqua;
            min-height: 850px;
        }*/
}

@media screen and (min-width: 1240px) {
    .ventana_emergente {
        z-index: 75;
        position: relative;
        overflow-y: scroll;
        min-height: 50px;
        max-height: 150px;
        width: 350px;
        top: 80px;
        left: -260px;
        background-color: #c6c8ca;
        /*font-size: 20px;*/

    }
    .container{
        min-height: 750px;
    }

    .tablareceta {
        float: right;
        background-color: aqua;
        left: 5px;
        width: 70%;
        padding: 3px;
        min-height: 350px;

    }

    .menucolumna {
        float: left;
        width: 25%;
        background-color: #0f6674;
    }

    .buscar {
        /*overflow-y: scroll;*/
        /*height: 160px;*/
        z-index: 2;
        background-color: #9fcdff;
        position: relative;
        padding: 1px;
    }

}