/*
Archivo: proveedores.css
Funciones:
- Estilos del formulario/listado de Proveedores (alineado al esquema de Vehículos).
- Barra de acciones, tabla, paginación y responsive coherentes.
Uso:
- Importado en templates/proveedores/index.html.
Acción:
- Ajusta tamaños y anchos mínimos para buena densidad de columnas.
*/

#formProveedoresSection{
  max-width:1480px!important; width:100%;
  margin:18px auto 0 auto!important; padding:0!important;
  background:#fcf7f7; border-radius:14px;
  box-shadow:0 4px 28px rgba(60,130,180,0.13);
  overflow-x:auto; box-sizing:border-box!important;
}
.fila-acciones-filtros{display:flex; flex-direction:column; align-items:flex-start; width:100%; background:#e9eef6; border-radius:14px 14px 0 0; padding:1em 2em .2em 2em; margin:0; box-sizing:border-box; margin-bottom:1.1em;}
.fila-acciones-filtros>.titulo{font-size:1.82em; font-weight:bold; color:#2a67b6; margin:0 0 1.1em 12px; height:10px;}
.fila-opciones{display:flex; width:100%; justify-content:space-between; align-items:center; gap:12px;}
.acciones-izq{display:flex; align-items:center; gap:18px;}
.filtros-der{display:flex; align-items:center; gap:1.2em;}
.filtros-der label{margin-right:3px; font-weight:600; font-size:1,8em; color:#2176ae;}
.filtros-der select,.filtros-der input{padding:.4em 1em; border-radius:5px; border:1px solid #e3edf7;}
.filtros-der input{min-width:150px;}
.filtros-der button{background:none!important; border:none!important; padding:0!important; border-radius:0!important; box-shadow:none!important; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;}
.filtros-der select{min-width:110px; font-size:1,6em;}

.icon-btn{background:none; border:none; padding:0; margin:0 2px; cursor:pointer; vertical-align:middle;}
.icono-accion{width:25px; height:25px; display:inline-block; vertical-align:middle;}
.icono-accion-filtro{width:20px; height:20px; vertical-align:middle;}
.icono-nuevo{width:38px!important; height:38px!important; display:inline-block; vertical-align:middle;}
.descargar-btn .icono-accion{width:26px; height:26px;}
.salir-btn .icono-accion{width:28px; height:28px; filter:grayscale(80%);}

.tabla-contenedor{width:100%; overflow-x:auto; padding:0 18px; box-sizing:border-box;}
#formProveedoresSection table{
  width:100%; border-collapse:collapse; background:#fff; box-shadow:0 2px 9px rgba(60,130,180,.07);
  border-radius:10px; font-size:1.30em; table-layout:auto; min-width:1000px; border:1px solid #cfd8dc;
}
#formProveedoresSection th,#formProveedoresSection td{
  padding:.25em .6em; border:1px solid #cfd8dc; text-align:left; min-width:90px; background:#fff; line-height:1.12;
}
#formProveedoresSection th{background:#e3edf7; font-weight:600; letter-spacing:.3px; white-space:nowrap;}
#formProveedoresSection .acciones-col{text-align:center; min-width:110px;}
/* Anchos sugeridos para ID, Nombre y Email */
#formProveedoresSection table th:nth-child(1), #formProveedoresSection table td:nth-child(1){min-width:56px!important; width:56px; text-align:center; padding:0 .4em;}
#formProveedoresSection table th:nth-child(2), #formProveedoresSection table td:nth-child(2){min-width:160px!important; width:180px; max-width:260px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#formProveedoresSection table th:nth-child(5), #formProveedoresSection table td:nth-child(5){min-width:180px!important; width:220px; max-width:320px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.paginacion{display:flex; justify-content:center; align-items:center; margin-top:1em; gap:.5em;}
.pagina-activa{font-weight:bold; color:#2176ae; background:#e3f2fd; padding:.35em .75em; border-radius:6px;}
.pagina-link{color:#444; background:#fff; padding:.35em .75em; border-radius:6px; text-decoration:none; border:1px solid #eee; transition:background .2s;}
.pagina-link:hover{background:#e3f2fd; color:#2176ae;}

@media (max-width:850px){
  #formProveedoresSection{padding:0!important;}
  .fila-acciones-filtros{gap:1em; padding:1em 2em .2em 2em; margin:0;}
  .fila-opciones{flex-direction:column; align-items:flex-start; gap:1em; width:100%;}
  .acciones-izq,.filtros-der{width:100%; justify-content:flex-start; gap:.5em; flex-wrap:wrap;}
  .tabla-contenedor{padding-left:5px; padding-right:5px;}
}


/* -----------------------------------------------------------------------------
   Fusión: Corrección de alineación en modales de Proveedores (Nuevo/Editar)
   Funciones:
   - Apila etiqueta sobre el input en cada celda de la grilla.
   - Uniforma anchos y espaciados de labels/inputs/selects.
   - Asegura consistencia entre los modales Nuevo y Editar.
   Uso:
   - Colocar este bloque al FINAL del archivo para que sobrescriba estilos previos.
   Acción:
   - Evita que label e input queden en la misma línea y corrige desalineaciones.
----------------------------------------------------------------------------- */

#modalNuevoProveedor .grid-prov,
#modalEditarProveedor .grid-prov {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1em 2em !important;
  margin-bottom: 0.5em !important;
}

#modalNuevoProveedor .grid-prov > div,
#modalEditarProveedor .grid-prov > div {
  display: flex !important;
  flex-direction: column !important;
}

#modalNuevoProveedor .grid-prov label,
#modalEditarProveedor .grid-prov label {
  font-weight: 600;
  margin-bottom: 0.25em;
  font-size: 1.3em;
}

#modalNuevoProveedor .grid-prov input,
#modalNuevoProveedor .grid-prov select,
#modalEditarProveedor .grid-prov input,
#modalEditarProveedor .grid-prov select {
  width: 100%;
  padding: 0.35em 0.5em;
  border: 1px solid #bcd;
  border-radius: 4px;
  font-size: 1.2em;
  box-sizing: border-box;
}