/*---- Generales  */
input::placeholder 
{
    font-size: 0.9em;      /* más pequeño */
    font-style: italic;    /* cursiva */
    text-transform: lowercase;
}

body
{
    font-family: "Trebuchet MS";
    /*font-size: small !important;*/
    /*background: linear-gradient(0.25turn, #c5fbc1, #a6fba0);*/
    /*background-color: rgba(124, 183, 251, 0.33) !important;*/
}

/*imagen del fondo del login*/
.fondo-login 
{
    background-image: url("../img/fondo.jpg"); /* ⬅️ tu imagen */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
}

.soloMirar {
    pointer-events: none; /* Bloquea todos los elementos dentro */
    opacity: 0.9;
}

input[type="text"]
{
    /* Tus estilos aquí */
    border: 1px solid #007bff; /* Ejemplo: borde azul */
    /*padding: 8px;*/ /* Espacio interno */
    border-radius: 4px; /* Bordes redondeados */
}

select
{
    /* Tus estilos aquí */
    border: 1px solid #007bff !important; /* Ejemplo: borde azul */
    /*padding: 8px !important;*/ /* Espacio interno */
    border-radius: 4px !important; /* Bordes redondeados */
    background-color: #f8f9fa !important; /* Color de fondo  blancp*/
}


/*---- tabla elegidos*/
/*---- Estilos generales para tablas con clase "tablaElegidos" ----*/

/* Estilos para el encabezado */
.tablaElegidos thead tr {
    background-color: midnightblue; /* Fondo azul */
    color: white; /* Letras blancas */
}

.tablaElegidos th {
    border: 1px solid black; /* Celdas con recuadro */
    text-align: center; /* Texto centrado */
}

/* Estilos para las filas del cuerpo de la tabla */
.tablaElegidos td {
    border: 1px solid rgb(191, 188, 188); /* Celdas con borde */
    text-align: center; /* Texto centrado */
}

/* Segunda celda de cada fila (columna específica, nombre del producto) */
.tablaElegidos tbody tr td:nth-child(2) {
    background-color: rgb(254, 251, 192); /* Amarillo claro */
}

/* Estilo para las filas del cuerpo */
.tablaElegidos tbody tr {
    cursor: pointer;
    background-color: white; /* Fondo blanco */
    border: 0.12rem solid rgb(79, 79, 79); /* Línea separadora */
    border-top: none;
}

/* Inputs dentro de las celdas (por ejemplo, fecha) */
.tablaElegidos td input {
    width: 100%; /* Ancho completo */
    height: 100%; /* Alto completo */
    border: none; /* Sin borde */
    padding: 0; /* Sin padding */
    margin: 0; /* Sin margen */
    box-sizing: border-box; /* Ajuste del tamaño */
}

#filaBotones .btn {
    min-width: 130px;
}

/*-------- ESTILO TABLA FOTOLITOS --------*/
/* Encabezado: fondo y texto */
.cssTablaFoto thead tr {
    background-color: #174e02;
    color: white;
}

.cssTablaFoto th {
    border: 1px solid black;
    text-align: center;
}

/* Celdas del cuerpo */
.cssTablaFoto td {
    border: 1px solid rgb(191, 188, 188);
    text-align: center;
}

/* Columna 2: color específico si lo deseas */
.cssTablaFoto tbody tr td:nth-child(2) {
    /* background-color: rgb(254, 251, 192); */
}

/* Filas: fondo y borde inferior */
.cssTablaFoto tbody tr {
    background-color: #e7f5fb;
    border: 0.12rem solid rgb(79, 79, 79);
    border-top: none;
}

/* Inputs dentro de celdas */
.cssTablaFoto td input {
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* FIN --- ESTILO TABLA FOTOLITOS --------*/

/*---- Tabla de los productos pedidos  */

/* aqui para el encabezado : titulo */
#tablaFotolitos thead tr
{
    background-color: #174e02;      /* Titulo : fondo azul */
    color: white;                   /* Titulo : letras blancas */
}

#tablaFotolitos th                      
{
    border: 1px solid black;            /* Titulo : celdas con recuadro */
    text-align: center;                 /* Titulo : celdas texto centrado*/
}

/*aqui para las filas con resultados */
#tablaFotolitos td
{
    border: 1px solid rgb(191, 188, 188);   /* CELDAS : con marco */   
    text-align: center;                     /* CELDAS : celdas con textos centrados  */        
}

#tablaFotolitos tbody tr td:nth-child(2)
{
    /*background-color: rgb(254, 251, 192);*/   /* CELDA[2] : amarillito - nombre producto */
}

#tablaFotolitos tbody tr
{
    background-color: #e7f5fb;                    /* FILA : todo el fondo blanco */   
    border: 0.12rem solid rgb(79, 79, 79);      /* FILA : con rayita abajo */
    border-top:none;
}

#tablaFotolitos td input    /* Celda con Fecha*/
{
    width: 100%;            /* Ocupa todo el ancho de la celda */
    height: 100%;           /* Ocupa todo el alto de la celda */
    border: none;           /* Elimina el borde del input */
    padding: 0;             /* Elimina el padding del input */
    margin: 0;              /* Elimina el margen del input */
    box-sizing: border-box; /* Incluye el padding y el borde en el tamaño total */
}

#tablaFotolitos tbody tr:hover 
{
    background-color: #b3d1ff; /* Color al pasar el mouse, ajusta según prefieras */
}



/* estilo para decoraciones */

.cssTablaDecoraciones thead tr  /* aqui para el encabezado : titulo */
{
    background-color: #050458;      /* Titulo : fondo completo :  azul */
    color: white;                   /* Titulo : fondo completo : letras blancas */
}

.cssTablaDecoraciones th   /* */                   
{
    border: 1px solid black;            /* Titulo : cada celdas con recuadro */
    text-align: center;                 /* Titulo : cada celdas texto centrado*/
}

/*aqui para las filas con resultados */
.cssTablaDecoraciones td
{
    border: 1px solid rgb(191, 188, 188);   /* CELDAS : con marco */   
    /*text-align: center;*/                     /* CELDAS : celdas con textos centrados  */        
}

.cssTablaDecoraciones tbody tr td:nth-child(2)
{
    /*background-color: rgb(254, 251, 192);*/   /* CELDA[2] : amarillito - nombre producto */
}

.cssTablaDecoraciones tbody tr
{
    background-color: #e7f5fb;                    /* FILA : todo el fondo blanco */   
    border: 0.12rem solid rgb(79, 79, 79);      /* FILA : con rayita abajo */
    border-top:none;
}

.cssTablaDecoraciones td input    /* Celda con Fecha*/
{
    width: 100%;            /* Ocupa todo el ancho de la celda */
    height: 100%;           /* Ocupa todo el alto de la celda */
    border: none;           /* Elimina el borde del input */
    padding: 0;             /* Elimina el padding del input */
    margin: 0;              /* Elimina el margen del input */
    box-sizing: border-box; /* Incluye el padding y el borde en el tamaño total */
}

.cssTablaDecoraciones tbody tr.fila-seleccionada {
    background-color: #a7d8ff !important;  /* Azul más intenso al seleccionar */
    font-weight: bold;
}

.cssTablaDecoraciones tbody tr:hover 
{
    background-color: #b3d1ff; /* Color al pasar el mouse, ajusta según prefieras */
}

#tablaDecoraciones tbody tr:hover 
{
    background-color: #b3d1ff; /* Color al pasar el mouse, ajusta según prefieras */
}

/* ---- fin estilo decoraciones */

/* Estilos reutilizables para un div flotante de búsqueda */
.fondoBuscar 
{
    position: fixed;
    top: 0px; /* Ajusta la posición vertical */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background-color: #fefefe;
    border: 0.1rem solid rgb(138, 137, 137);
    border-radius: 10px; /* Bordes redondeados */
    max-height: 100vh; /* Altura máxima del div */
    overflow-y: auto;
    width: 100%; /* Ancho del div */
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
}

@media (min-width: 700px) {
    .fondoBuscar {
        width: 85%;
        top: 20px;
    }
}


/* Estilos para la tabla de resultados */
#tablaClientes
{
    width: 100%;            /* ancho total*/
    margin-top: 10px;        /* separacion del texto de fondoBuscar */
    border: 0.13rem solid #99caff;
    /*background-color: black !important;*/  /*color de fondo*/
}

#tablaClientes tbody tr
{
    /*cursor: pointer;*/
    cursor: default;
    border-bottom:0.1rem solid white;  /* linea entre fila*/
}

/* Alternar colores en filas */
#tablaClientes tbody tr:nth-child(odd) 
{
    background-color: #e7f1fc;   /* impares : celeste*/
}

#tablaClientes tbody tr:nth-child(even) 
{
    background-color: #fcfcfc;                /* pares : blanco */
}
#tablaClientes tbody tr:hover 
{
    background-color: #b3d1ff; /* Color al pasar el mouse, ajusta según prefieras */
}

/*-------------------------------*/
.fondoDatos
{
    background-color: rgb(231, 245, 251);
}

.espaFondoDatos [class*="col-"]
{
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}

@media (min-width: 700px)
{
    .espaFondoDatos [class*="col-"]
    {
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }
}

.esconder
{
    display: none;
}

.mayusculas
{
    text-transform: uppercase;
}