/************************************************
 * 1) TABLA BASE: estilo general moderno, sin scroll
 ************************************************/
 table.table {
  width: 100%;
  table-layout: fixed; /* 🔧 Esto sí respeta los widths definidos */
  font-size: 0.85rem;
}


/* Permite que el texto rompa a la siguiente línea si se excede el ancho */
table.table th,
table.table td {
  white-space: normal; /* Permite saltos de línea */
  word-wrap: break-word;
}

/* Ajusta la tabla con bordes suaves */
table.table-bordered {
  border: 1px solid #dee2e6; /* bordes suaves */
}

/* Encabezado oscuro con texto blanco */
table.table-bordered thead th {
  background-color: #343a40; /* fondo oscuro */
  color: #fff;               /* texto blanco */
  text-align: center;
  vertical-align: middle;
  border-color: #454d55;     /* un gris más oscuro */
}

/* Celdas del tbody con bordes suaves */
table.table-bordered tbody td {
  border-color: #dee2e6;
}

/* Zebra-stripes en las filas impares */
table.table-bordered tbody tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}

/************************************************
 * 2) COLUMNAS Y CELDAS
 ************************************************/
/* Opcional: ajusta el ancho de la columna ID */
/* Columna ID */
table thead th:nth-child(1),
table tbody td:nth-child(1) {
  width: 50px;
  text-align: center;
}

/* Columna Acción (modificá si no es la 22) */
table thead th:nth-child(22),
table tbody td:nth-child(22) {
  width: 100px;
  text-align: center;
}

/* Encabezado fijo al hacer scroll */
table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #343a40; /* Igual que tu fondo original */
  color: white;
}

.table-responsive {
  max-height: 75vh;
  overflow-y: auto;
}

/* Centra las celdas del tbody */
table tbody td {
  text-align: center;
  vertical-align: middle;
}

/************************************************
 * 3) BOTONES: mismo tamaño, apilados
 ************************************************/
td button {
  display: block;
  width: 100%;
  margin-bottom: 0.4rem; /* espacio vertical entre ellos */
}
td button:last-child {
  margin-bottom: 0; /* quita el último margen */
}

/* Clase .btn-accion (opcional, si quieres un estilo unificado) */
.btn-accion {
  font-size: 0.85rem;
  border-radius: 0.25rem;
}

/************************************************
 * 4) TÍTULOS DE SECCIÓN (opcional)
 ************************************************/
h2 {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  text-align: center;
  font-weight: 700;
  font-size: 1.4rem;
  color: #333;
}

p.text-center.text-secondary {
  margin-bottom: 2rem;
}

/************************************************
 * 5) ESTILOS DE BOTONES ("Ver", "Enviar", "Parcial")
 ************************************************/
.btn-info.btn-sm {
  background-color: #17a2b8;
  border-color: #17a2b8;
  color: #fff;
}
.btn-info.btn-sm:hover {
  background-color: #138996;
  border-color: #117a8b;
}

.btn-success.btn-sm {
  background-color: #28a745;
  border-color: #28a745;
  color: #fff;
}
.btn-success.btn-sm:hover {
  background-color: #218838;
  border-color: #1e7e34;
}

.btn-warning.btn-sm {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #212529;
}
.btn-warning.btn-sm:hover {
  background-color: #e0a800;
  border-color: #d39e00;
}

/************************************************
 * 6) ESTILOS DE "REMITO" (modal "Ver")
 ************************************************/
.remito-document {
  border: 2px solid #000;
  padding: 1rem;
  background-color: #fff;
  color: #000;
  font-size: 0.85rem;  /* Ajusta a tu gusto */
}

/* Cabecera con logo y datos */
.remito-header {
  display: flex;
  align-items: center;
  border: 1px solid #000;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  gap: 0.5rem; /* espacio entre logo y la info */
}

.remito-logo {
  max-width: 80px;
  object-fit: contain;
}

.remito-info {
  display: flex;
  flex-direction: column;
}

.remito-title {
  margin: 0 0 0.3rem;
  font-size: 1.1rem;
  font-weight: bold;
  text-transform: uppercase;
}

/* Fila TELA / CORTADOR */
.remito-row {
  display: flex;
  justify-content: space-between;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

/* Separador horizontal */
.remito-separator {
  border: none;
  border-top: 2px solid #000;
  margin: 0.5rem 0;
}

/* Secciones (Curva de Tallas, Colores...) */
.remito-section {
  margin-bottom: 0.5rem;
}

.remito-section h4 {
  margin-bottom: 0.3rem;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1rem;
}

/* Tablas dentro del remito */
.remito-table {
  border: 2px solid #000;
  border-collapse: collapse;
  width: 100%;
  background-color: #fff;
  font-size: 0.85rem; /* ajusta si quieres */
}

.remito-table th,
.remito-table td {
  border: 1px solid #000;
  padding: 0.3rem 0.5rem;
  text-align: center;
  vertical-align: middle;
}

.col-id       { width: 50px; }
.col-fecha    { width: 110px; }
.col-corte    { width: 80px; }
.col-cortador { width: 120px; }
.col-modelo   { width: 200px; }
.col-tela     { width: 140px; }
.col-ubic     { width: 120px; }

.col-xs, .col-s, .col-m, .col-l,
.col-xl, .col-xxl, .col-xxxl {
  width: 60px;
}

.col-colores  { width: 300px; }
.col-total    { width: 80px; }
.col-icono    { width: 80px; }
.col-estado   { width: 140px; }
.col-categoria{ width: 100px; }
.col-madre    { width: 80px; }
.col-completo { width: 100px; }
.col-accion   { width: 120px; }