.fade-out {
    transition: opacity 0.5s; /* Duración del efecto de desvanecimiento */
    opacity: 0;
}

.ocultar{

        display:none !important;

}

#nnom{
	
  display:none;

}

#logo_login{
	 display:none;
	margin:0 auto;
	margin-bottom: 10px;
}

	@media only screen and (max-width: 700px) {
		#nnom{
   display:block;
		}
		
#logo_login{
	 display:block;
}
}

 .items p{
		  	margin-top:-8px;
			line-height:15px;
	  }
	  
	  
	
/* sección Acopios */
	
 #results-list
 {
	 width:96px z-index:200 !important; 
	 max-height: 70px !important; 
	 overflow-y: auto;
	   
 } 
 
  #results-list li
 {
   cursor:pointer;
  
 }
	  
	  
 #filtros
 {
	 width:100%;
	 background:rgba(0,0,0,0.1);
	 display:flex;
	 flex-wrap:wrap;
	 height:auto;
	 padding:5px;
	 margin-bottom:20px;
 } 
 
 #bodyTabla td {
	 background:rgba(0,0,0,0.03) !important;
 }
	  
	  
	  

  /* CSS DE LA HOME */
  
    #fil_t{
		display:flex;
		justify-content:center;
		align-items:center;
        padding:5px;
        border: 1px solid black;
        border-radius:20px;
        margin-bottom:10px !important;
        text-align:center;
       }




	@media only screen and (max-width: 700px) {
	
     #fil_t{
		 
		 flex-direction:column;
	 }



    }



.table {
	color:#3b3c45;
}
















	  
	  
@media (max-width: 700px) {
    .dats{
      display: flex;
      justify-content: flex-start;
      align-items:stretch;
      width: 100%;
      flex-wrap: wrap;
    }

		 .items
	  {
		width: 50%;
	
	  }
	  
	 
	  
	  h1{ 
	  font-size:18px !important;
	  }
  }
  
  
  
  <style>
/* =============================================
   RESPONSIVE PROVEEDORES FACTURAS - MOBILE
   ============================================= */

/* En pantallas chicas, la tabla se convierte en cards */
@media (max-width: 767px) {

    /* Cards superiores: una sola columna */
    .col-md-5, .col-md-3, .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Tabla principal: formato card por fila */
    #tablaFacturas thead {
        display: none;
    }

    #tablaFacturas tbody tr {
        display: block;
        margin-bottom: 12px;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        padding: 10px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }

    #tablaFacturas tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 8px;
        border: none;
        border-bottom: 1px solid #f0f0f0;
        font-size: 13px;
        text-align: right !important;
    }

    #tablaFacturas tbody td:last-child {
        border-bottom: none;
        justify-content: center;
        padding-top: 10px;
    }

    /* Labels antes de cada celda */
    #tablaFacturas tbody td:nth-child(1)::before { content: "Tipo"; }
    #tablaFacturas tbody td:nth-child(2)::before { content: "Número"; }
    #tablaFacturas tbody td:nth-child(3)::before { content: "Fecha"; }
    #tablaFacturas tbody td:nth-child(4)::before { content: "Descripción"; }
    #tablaFacturas tbody td:nth-child(5)::before { content: "Monto Original"; }
    #tablaFacturas tbody td:nth-child(6)::before { content: "Saldo Pendiente"; }
    #tablaFacturas tbody td:nth-child(7)::before { content: "Estado"; }
    #tablaFacturas tbody td:nth-child(8)::before { content: ""; }

    #tablaFacturas tbody td::before {
        font-weight: 600;
        color: #555;
        text-align: left;
        flex-shrink: 0;
        margin-right: 10px;
    }

    /* Modal de pago: cards de resumen en columna */
    #modal_pago .row.mb-3 > div {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 8px;
    }

    /* Modales: max width para no desbordar */
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: 95vw;
        margin: 10px auto;
    }

    /* Tablas dentro de modales (historial, pagos previos) */
    #modal_historial .table,
    #pagos_previos_section .table {
        font-size: 11px;
    }

    #modal_historial .table thead {
        display: none;
    }

    #modal_historial .table tbody tr {
        display: block;
        margin-bottom: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 8px;
    }

    #modal_historial .table tbody td {
        display: flex;
        justify-content: space-between;
        padding: 4px 6px;
        border: none;
        border-bottom: 1px solid #f0f0f0;
    }

    #modal_historial .table tbody td:nth-child(1)::before { content: "Fecha"; }
    #modal_historial .table tbody td:nth-child(2)::before { content: "Monto"; }
    #modal_historial .table tbody td:nth-child(3)::before { content: "Medio"; }
    #modal_historial .table tbody td:nth-child(4)::before { content: "Cheque"; }
    #modal_historial .table tbody td:nth-child(5)::before { content: "Desc."; }

    #modal_historial .table tbody td::before {
        font-weight: 600;
        color: #666;
        margin-right: 8px;
    }

    /* Select proveedor más grande para touch */
    #sel_proveedor {
        font-size: 16px !important;
        padding: 10px;
    }

    /* Heading más chico */
    .h3 {
        font-size: 1.1rem;
    }

    /* Botones de acción más grandes para touch */
    #tablaFacturas .btn-sm {
        padding: 8px 12px;
        font-size: 14px;
    }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 991px) {
    #tablaFacturas {
        font-size: 12px;
    }
    #tablaFacturas th,
    #tablaFacturas td {
        padding: 6px 4px;
        white-space: nowrap;
    }
}
</style>