﻿@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
/* Importar la fuente Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
    color: #1d1d1d;
    /* font-weight: 500 !important;*/
    font-family: 'Roboto', sans-serif;
    background-color: #F8FAFC;
}

.img-fondo {
    background-image: url('/img/fondo_login.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
}


.card {
    
    box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
    padding: 1vw;
    border-radius: 10px;
    background-color: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    max-width: 100%; /* Asegura que la tarjeta no exceda el ancho de la pantalla */
    margin: 10px auto; /* Centra la tarjeta y añade margen */    
    line-height: 1.6; /* Mejora la legibilidad */
}

img {
    width: auto;
    max-height: 40vw;
    object-fit: cover; /* Cubre el contenedor, manteniendo la proporción */
    margin: 0 auto; /* Centra la imagen horizontalmente */
    display: block; /* Asegura que el centrado funcione correctamente */
    border-radius: 5px;
    box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
}

.img-table {
    width: auto;
    max-height: 5vw;
    object-fit: cover; /* Cubre el contenedor, manteniendo la proporción */
    margin: 0 auto; /* Centra la imagen horizontalmente */
    display: block; /* Asegura que el centrado funcione correctamente */
    border-radius: 5px;
    box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
}

.img-header {
    width: auto;
    max-height: 5vw;
    object-fit: cover;
    display: block;
    border-radius: 0px;
    box-shadow: none;
    margin-left: 0; /* Alinea a la izquierda */
    
}

@media (max-width: 600px) {
    .card {
        padding: 2vw; /* Ajusta el padding para pantallas pequeñas */
    }

    img {
        max-height: 100%;
    }

    .img-table {
        width: 12vw;
        max-height: 12vw;
    }
}

a {
    /*color: #2a5298;*/
    text-decoration: none;
}



a:link, a:visited, a:hover, a:active {
    text-decoration: none; /* Elimina el subrayado en todos los estados */

}

/*a:hover {
    text-decoration: underline;
}*/


.form-group input {
    border: 0px;
    /*border-radius: 16px;*/
    color: #1e293b;
    border-bottom: 1px solid #e5e5e5; /*stone-500  en hex ##78716c*/
}




.text-crear {
    color: #0284c7; /*Sky 600*/
}

.text-editar {
    color: #0d9488; /*Teal 600*/
}

.text-detalle {
    color: #d97706; /*Amber 600*/
}

.text-borrar {
    /*color: #e11d48;*/ /*Rose 600*/
    /* color: #ec442c;*/
    color: #DC4C64;
}

.text-gris {
    color: #455a64;
}

.text-texto {
    color: #263238;
}

.text-regresar {
    color: #7c3aed; /*Violet 600*/
}

.btn-verde {
    background-color: #263238; /*antes Teal 600*/
    color: #fff;
    border-radius: 5px;
    padding: 0.8rem;
    font-weight: 500 !important;
    border: none;
}

    .btn-verde:hover {
        color: #fff;
        background-color: #455a64;
    }

    /*02_05_2025*/
.btn-Azul {
    background-color: #3B71CA; /*antes Teal 600*/
    color: #fff;
    border-radius: 5px;
    padding: 0.8rem;
    font-weight: 500 !important;
    border: none;
}

    .btn-Azul:hover {
        color: #fff;
        background-color: #3B71CA;
    }
