@media print {
    @page {
        margin: 3rem 5rem 5rem 7rem; /* top, right, bottom, left */
    }

    #divImprimir {
        margin: 10px; /* Reset the margins within the page */
        padding: 10px;
    }

    .print-container {
        padding-left: 1rem; /* Adjust the left padding */
        padding-right: 1rem; /* Adjust the right padding */
    }


    body {
        color: #000000 !important;
        font-weight: 600 !important;
        background-color: #ffffff !important;
        font-size: 10px !important;
    }

    h4, h5, h6, p, small, strong, li {
        color: #000000 !important;
        font-weight: 600 !important;
    }
}

@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;
    }

    .img-nav {
        width: auto;
        max-height: 12vw;
    }
}


/*Slate*/

.color-slate-500 {
    color: #64748b;
}

.color-slate-600 {
    color: #475569;
}

.color-slate-700 {
    color: #334155;
}

.color-slate-800 {
    color: #1e293b;#334155
}

/*BackGround color*/

.bg-gray-50 {
    background-color: #f9fafb;
}

.bg-gray-200 {
    background-color: #e5e7eb;
}

.bg-gray-300 {
    background-color: #d1d5db;
}

.bg-gray-400 {
    background-color: #9ca3af;
}

.bg-gray-500 {
    background-color: #6b7280;
}

.bg-gray-600 {
    background-color: #4b5563;
}

/*TEAL*/

.bg-teal-50 {
    background-color: #f0fdfa;
}

.bg-teal-100 {
    background-color: #ccfbf1;
}

.bg-teal-200 {
    background-color: #99f6e4;
}

.bg-teal-300 {
    background-color: #5eead4;
}

.bg-teal-400 {
    background-color: #2dd4bf;
}

.bg-teal-500 {
    background-color: #14b8a6;
}

.bg-teal-600 {
    background-color: #0d9488;
}

/*TEAL Color*/


.color-teal-50 {
   color: #f0fdfa;
}

.color-teal-200 {
    color: #99f6e4;
}

.color-teal-300 {
    color: #5eead4;
}

.color-teal-400 {
   color: #2dd4bf;
}

.color-teal-500 {
    color: #14b8a6;
}

.color-teal-600 {
    color: #0d9488;
}


/*Sky*/


.bg-sky-50 {
    background-color: #f0f9ff;
}

.bg-sky-200 {
    background-color: #bae6fd;
}

.bg-sky-300 {
    background-color: #7dd3fc;
}

.bg-sky-400 {
    background-color: #38bdf8;
}

.bg-sky-500 {
    background-color: #0ea5e9;
}

.bg-sky-600 {
    background-color: #0284c7;
}

/*Rose*/


.bg-rose-50 {
    background-color: #fff1f2;
}

.bg-rose-200 {
    background-color: #fecdd3;
}

.bg-rose-300 {
    background-color: #fda4af;
}

.bg-rose-400 {
    background-color: #fb7185;
}

.bg-rose-500 {
    background-color: #f43f5e;
}

.bg-rose-600 {
    background-color: #e11d48;
}

/*Rose color*/

.color-rose-500 {
    color: #f43f5e;
}

.color-rose-600 {
    color: #e11d48;
}


/* SLATE */

.bg-slate-100 {
    background-color: #f1f5f9;
}

.bg-slate-700 {
    background-color: #334155;
}


.text-crear {
    color: #0284c7; /*Sky 600*/
}

.text-editar {
    color: #0d9488; /*Teal 600*/
}

.text-detalle {
    color: #d97706; /*Amber 600*/
}

.text-borrar {
    color: #e11d48; /*Rose 600*/
}

.text-regresar {
    color: #4338ca; /*indigo 700*/
}

.foot-button {
    margin: 10px 4px;
    font-size: 0.9em; /* Reduce ligeramente el tamaño de la fuente */
    /*background-color: #f5f7f8;*/ /* Fondo ligeramente gris */
    display: flex; /* Equivalente a d-flex */
    justify-content: space-between; /* Equivalente a justify-content-between */
    border-top: none; /* Elimina la línea en la parte superior */
}

.card {
    box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
    padding: 0vw;
    border-radius: 5px;
    /*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 */
    font-family: 'Roboto', sans-serif; /* Fuente legible */
    line-height: 1.6; /* Mejora la legibilidad */
}

.card-header, .card-body, .card-footer {
    padding: 1vw; /* Asegura un padding consistente en todas las subclases */
}

.card-header {
    border-bottom: 1px solid #e0e0e0; /* Añade una línea divisoria */
    /*font-weight: bold;*/ /* Hace el texto del encabezado más destacado */
    font-size: 1.2em; /* Aumenta el tamaño de la fuente */
    background-color: #fff; /* Fondo blanco */
}

.card-body {
    /* Mantiene el padding consistente con la tarjeta */
}

.card-text {
    margin: 0.5vw 0; /* Añade margen vertical para separar el texto */
    color: #333; /* Color de texto más oscuro para mejor legibilidad */
}

.card-footer {
    font-size: 0.9em; /* Reduce ligeramente el tamaño de la fuente */
    background-color: #f5f7f8; /* Fondo ligeramente gris */
    display: flex; /* Equivalente a d-flex */
    justify-content: space-between; /* Equivalente a justify-content-between */
    border-top: none; /* Elimina la línea en la parte superior */
}


img {
    width: auto;
    max-height: 30vw;
    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: 4vw;
    object-fit: cover;
    margin: 0 auto;
    display: block;
    border: 1px solid rgba(128, 128, 128, 0.5);
    border-radius: 5px;
    /*box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);*/
}
.img-firma {
    
    max-width: 90%; /* Ajusta el tamaño máximo según tus necesidades */
    height: auto; /* Mantiene la proporción de la imagen */
    object-fit: contain; /* Asegura que la imagen se ajuste dentro del contenedor sin distorsionarse */
    margin: 10px auto; /* Agrega espacio alrededor de la imagen */
    display: block;
    /*border: 1px solid rgba(128, 128, 128, 0.5);
    border-radius: 5px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);*/ /* Agrega una sombra suave para un efecto más profesional */
}

.img-Imprimir {
    width: auto; /* La anchura se ajusta automáticamente */
    max-height: 15vw; /* La altura máxima es el 10% del ancho de la ventana */
    object-fit: cover; /* La imagen se ajusta al contenedor manteniendo su proporción */
    margin: 0; /* Centra la imagen horizontalmente */
    display: block; /* Hace que la imagen se comporte como un bloque */   
    /*box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);*/ /* Sombra opcional */
    /*border: 1px solid rgba(128, 128, 128, 0.5);*/ /* Borde gris con 50% de opacidad */
    border-radius: 5px; /* Esquinas redondeadas de 5px */

}


.img-nav {
    width: auto;
    max-height: 2vw;
    object-fit: cover;
    margin: 0 auto;
    display: block;
    border-radius: 5px;
    box-shadow: none;
}



.modal {
    z-index: 1055; /* Bootstrap por defecto ya tiene 1050, pero puedes probar aumentar a 1055 */
}


.footer {
    width: 100%; /* Asegura que el footer ocupe el ancho completo del card */
    padding: 16px; /* Ajusta el padding para una mejor presentación */
    box-sizing: border-box; /* Hace que el padding se incluya dentro del ancho del footer */
    margin-top: auto; /* Empuja el footer hacia abajo si es necesario */
   /* background-color: #f5f7f8;*/
    border-radius: 5px;
}

.card-hr {
    width: 25%; /* Cambia este valor al porcentaje que desees */
    padding: 4px; /* con esto ajusto el grosor*/
    border: none; /* Elimina el estilo de borde predeterminado */  
    float: right; /* Alinea el <hr> a la derecha */    
    background-color: #09757a; /* Cambia el color del <hr> */
}


/*16 04 2024*/


table {
    font-size: small;
    width: 100%;
    border-collapse: collapse;
}

    /* Ajusta el tamaño de las celdas para que se adapten al contenido */
    table th, table td {
        padding: 2px;
        text-align: center;
        /*border: 1px solid #ddd;*/
    }

thead{
    background-color: #111111;
    color: #fff;    
}

a {
    text-decoration: none;
}