.header-logo-only {
    /* Color de fondo */
    background-color: #2f5190; ; 
    
    /* Imagen de fondo */
    background-image: url('../img/banner1.jpg');
    background-repeat: no-repeat;
    
    /* Posición: Pegado al inicio (izquierda) y centrado verticalmente */
    background-position: 0 center; 
    
    /* Ancho total y borde inferior sutil */
    width: 100%;
    border-bottom: 1px solid #d1d1d1;
    padding: 0;
    transition: all 0.3s ease;
}

/* --- VISTA: PC Y TABLETS (Logo proporcional y elegante) --- */
@media (min-width: 768px) {
    .header-logo-only {
        min-height: 80px; /* Altura más compacta para PC */
        background-size: auto 70%; /* El logo ocupa el 70% de la altura */
        /* Un pequeño margen de 10px para que no toque el borde físico del monitor */
        background-position: 10px center; 
    }
}

/* --- VISTA: CELULARES (Logo más grande y pegado al borde) --- */
@media (max-width: 767px) {
    .header-logo-only {
        min-height: 70px; /* Altura ideal para móviles */
        
        /* Agrandamos el logo para que sea bien visible */
        /* 'auto' mantiene la proporción, '85%' lo hace resaltar */
        background-size: auto 85%; 
        
        /* Pegado totalmente al inicio (0) */
        background-position: 0 center; 
    }
}


	.tbodyDiv{
			max-height: clamp(30em,10vh,50px);
			max-width: clamp(60em,10vh,50px);
			overflow: auto;
		}
		
		tbody {
			font-size: 8px;
		    font-family: 'Arial', sans-serif; 
		}


        .custom-table {
            border-radius: 0.5rem; /* Esquinas redondeadas */
            border: 2px solid #007bff; /* Color del borde */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombreado */
        }
        .custom-table th, .custom-table td {
            border-color: #007bff; /* Color del borde interno */
        }
		
	/* Ocultar flechas en Chrome, Safari, Edge y Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Ocultar flechas en Firefox */
    input[type=number] {
        -moz-appearance: textfield;
    }
		
	/* Ajuste responsivo: si la pantalla es muy pequeña (móvil), 
       reducimos la distancia para que sigan cabiendo uno al lado del otro */
    @media (max-width: 576px) {
        .d-flex[style*="gap: 40px"] {
            gap: 15px !important; /* Distancia menor en celulares */
            justify-content: space-between; /* Opcional: los manda a los extremos en móvil */
        }
        
        /* Opcional: si quieres que en móvil ocupen todo el ancho, descomenta esto:
        .d-flex[style*="gap: 40px"] button {
            flex: 1;
        }
        */
    }
	
	

	
	
	
	/* Reduce el relleno interno y la altura de todos los campos */
    #form_busqueda .form-control, 
    #form_busqueda .form-select {
        padding-top: 0.25rem;    /* Menos espacio arriba */
        padding-bottom: 0.25rem; /* Menos espacio abajo */
        min-height: 30px;        /* Altura mínima reducida */
        font-size: 11px;         /* Letra más pequeña para que quepa en menos altura */
    }

    /* Ajusta también los labels (etiquetas) para que no ocupen tanto espacio */
    #form_busqueda .form-label {
        margin-bottom: 2px;      /* Acerca el texto al cuadro */
        font-size: 11px;         /* Etiquetas más compactas */
    }

    /* Si usas los botones, también puedes achicarlos */
    #form_busqueda .btn {
        padding-top: 2px;
        padding-bottom: 2px;
        font-size: 12px;
    }
		


		
		
/* 1. Control del ancho fijo y la capa del buscador */
.ts-wrapper {
    max-width: 600px !important; /* Cambia 300px por el valor que prefieras */
    position: relative;
    z-index: 1021; /* Por encima del sticky-top de la tabla */
}

/* 2. Control de la capa de la lista desplegable */
.ts-dropdown {
    z-index: 9999 !important; /* Por encima de absolutamente todo */
    max-width: 600px !important; /* Debe coincidir con el ancho del wrapper */
	font-size: 12px !important; /* Suele verse bien un poco más pequeña que el buscador */
}
		
/* Quitamos todos los bordes de las celdas */
    #id_tbody_tabla1 td, #id_tbody_tabla1 th {
        border: none !important;
    }

    /* Aplicamos el borde solo a la fila (tr) */
    #id_tbody_tabla1 tr {
        border-bottom: 1px solid #dee2e6 !important; /* Línea horizontal */
    }

    /* Opcional: Quitar la línea de la última fila para que se vea más limpio */
    #id_tbody_tabla1 tr:last-child {
        border-bottom: none !important;
    }
	
/* Controla el tamaño de fuente de todas las celdas dentro de ese tbody */
    #id_tbody_tabla1 td {
        font-size: 11px !important; /* Ajusta el número según necesites */
        line-height: 1.2;          /* Opcional: para que las filas no sean muy altas */
    }