/* --- Variables de Color y Fuentes --- */
:root {
  --brand-red: #de2567;
  --text-dark: #333333;
  --text-medium: #555555;
  --text-light: #777777;
  --text-label: #888888;
  --border-light: #e0e0e0;
  --border-medium: #cccccc;
  --background-widget: #ffffff;
  --background-light-gray: #f9f9f9;
  --background-hover: #f5f5f5;
  --status-green: #28a745;
  --accent-blue-green: #00796b;

  --font-primary: "Arial", sans-serif;
  --font-size-base: 14px;
  --font-size-small: 12px;
  --font-size-large: 16px;
  --font-size-xlarge: 18px;

  /* --- Dimensiones de la Muesca del HEADER (¡AJUSTAR ESTOS VALORES!) --- */
  --header-notch-main-width-before-slant: 40%; /* % del ancho del header donde empieza la inclinación */
  --header-notch-slant-depth: 30px; /* Profundidad horizontal de la inclinación */
  --header-notch-slant-height: 35px; /* Caída vertical de la inclinación superior */
  --header-total-height: 70px; /* Altura total del header */

  --modal-bg-light: #f8f9fa;      /* Un gris muy claro para fondos */
  --modal-border-color: #dee2e6; /* Color de borde sutil */
  --modal-text-muted: #6c757d;   /* Color para texto secundario */
}

/* --- Reset Básico y Estilos Generales --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- Contenedor Principal del Widget/Módulo (Ahora es un rectángulo simple) --- */
.remittance-widget {
  background-color: var(--background-widget);
  border: 1px solid var(--border-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin: 2rem auto;
  /* max-width: 900px; */
  width: 100%;
  border-radius: 4px; /* Puede tener radios si el header recortado no los necesita */
}

/* --- Cabecera del Widget con la Forma --- */
.widget-header {
  background-color: var(
    --background-widget
  ); /* Color de fondo visible para depuración */
  position: relative;
  padding-left: 20px;
  padding-right: 20px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  height: var(--header-total-height); /* Usa tu variable de altura */
  box-sizing: border-box;
}
/* Barra roja de acento */
.widget-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(
    (var(--header-total-height) - 40px) / 2
  ); /* Centrar barra de 40px */
  width: 5px;
  height: 40px;
  background-color: var(--brand-red);
  z-index: 1; /* Para estar sobre el fondo del header */
}

/* Contenido del Header Izquierdo (El div que contiene la barra y los títulos) */
.header-left {
  display: flex; /* Para alinear la barra (si fuera un div) y el div de títulos */
  align-items: center; /* Alinear verticalmente */
  position: relative; /* Para z-index */
  z-index: 2; /* Sobre el ::before si la barra fuera externa */
  /* El padding-left del .widget-header ya da espacio */
  margin-left: 15px; /* Espacio después de la barra roja (que está en ::before del header) */
}

/* Si la barra roja es un div separado y no un pseudo-elemento del header:
.red-accent-bar {
    width: 5px; (o 6px como en tu CSS anterior)
    background-color: var(--brand-red);
    margin-right: 15px;
    height: 40px; (o 100% si .header-left tiene altura definida)
}
*/

/* Div que contiene main-title y secondary-link */
.header-titles {
  /* Asumiendo que tienes un div wrapper para los dos textos */
  /* No se necesita mucho aquí si .header-left ya los alinea */
}

.main-title {
  /* Aplicado directamente al h1 o p */
  font-size: var(--font-size-xlarge);
  font-weight: bold;
  text-transform: uppercase;
  color: var(--text-dark);
  margin: 0 0 4px 0; /* Ajustado margen */
  line-height: 1.2;
}

.secondary-link {
  /* Aplicado directamente al a */
  font-size: var(--font-size-small);
  color: var(--brand-red);
  display: flex;
  align-items: center;
  text-decoration: none;
}
.secondary-link:hover {
  text-decoration: underline;
}
.secondary-link .icon-chevron {
  margin-left: 5px;
  font-size: 0.8em;
}

/* Contenido del Header Derecho (Leyenda y paginación) */
/* Este se posiciona en el espacio de la muesca */
.header-right-legend {
  position: absolute;
  top: var(
    --header-notch-slant-height
  ); /* Donde empieza la plataforma de la muesca */
  right: 0; /* Pegado al borde derecho */
  height: calc(
    var(--header-total-height) - var(--header-notch-slant-height)
  ); /* Altura de la plataforma */
  /* Ancho: calculado para encajar en la parte más ancha de la muesca */
  width: calc(
    100% -
      (
        var(--header-notch-main-width-before-slant) +
          var(--header-notch-slant-depth)
      ) - 5px
  ); /* Ajusta el -5px como margen */
  max-width: 250px; /* Un máximo para que no se extienda demasiado si el header es muy ancho */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-right: 15px; /* Padding dentro de la muesca */
  box-sizing: border-box;
  z-index: 1;
}

.legend-link {
  font-size: var(--font-size-small);
  color: var(--brand-red);
  display: flex;
  align-items: center;
  cursor: pointer;
  white-space: nowrap; /* Evitar que el texto se parta */
}
.legend-link .icon-info {
  margin-right: 5px;
  font-size: 1.2em;
}

.pagination-buttons button {
  background-color: var(--background-widget);
  border: 1px solid var(--border-light);
  color: var(--text-medium);
  padding: 5px 8px;
  border-radius: 3px;
  cursor: pointer;
  margin-left: 5px;
  line-height: 1;
}
.pagination-buttons button:hover {
  background-color: var(--background-light-gray);
}
.pagination-buttons button .icon-arrow {
  font-size: 0.9em;
}

/* --- Pestañas/Filtros --- */
.filter-tabs {
  display: flex;
  padding: 15px 25px 10px 25px;
  border-bottom: 1px solid var(--border-light);
}
.tab {
  padding: 8px 15px;
  margin-right: 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: var(--font-size-base);
  cursor: pointer;
  color: var(--text-medium);
  background-color: transparent;
}
.tab.active {
  background-color: var(--background-widget);
  border-color: var(--border-medium);
  color: var(--text-dark);
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.tab:not(.active):hover {
  background-color: var(--background-light-gray);
}

/* --- Lista de Elementos (Remesas) --- */
.remittance-list {
  padding: 0 25px 20px 25px;
}
.remittance-item {
  background-color: var(--background-widget);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 15px 20px;
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
.remittance-item:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07);
}
.item-info-main {
  flex-grow: 1;
}
.item-title {
  color: var(--accent-blue-green);
  font-size: var(--font-size-large);
  font-weight: 500;
  margin-bottom: 5px;
}
.item-subtitle {
  font-size: var(--font-size-small);
  color: var(--text-medium);
  line-height: 1.4;
}
.item-subtitle .label {
  color: var(--text-label);
}
.item-details-column {
  text-align: left;
  flex-basis: 120px;
  flex-shrink: 0;
}
.item-details-column .label {
  font-size: var(--font-size-small);
  color: var(--text-label);
  display: block;
  margin-bottom: 2px;
}
.item-details-column .value {
  font-size: var(--font-size-base);
  font-weight: bold;
  color: var(--text-dark);
}
.item-status {
  display: flex;
  align-items: center;
  color: var(--text-medium);
  font-size: var(--font-size-base);
  flex-basis: 120px;
  flex-shrink: 0;
  justify-content: flex-start;
}
.item-status .icon-status {
  font-size: 1.3em;
  color: var(--status-green);
  margin-right: 8px;
}

/* --- Sección "Enviar nueva remesa" --- */
.new-remittance-section {
  padding: 20px 25px;
  border-top: 1px solid var(--border-light);
}
.section-heading {
  font-size: var(--font-size-large);
  font-weight: bold;
  margin-bottom: 15px;
  color: var(--text-dark);
}
.action-boxes-container {
  display: flex;
  gap: 20px;
  justify-content: space-between;
}
.action-box {
  background-color: var(--background-widget);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 120px;
}
.action-box:hover {
  border-color: var(--border-medium);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
.drop-zone {
  border-style: dashed;
  background-color: var(--background-light-gray);
  flex-basis: 40%;
}
.drop-zone .icon-upload {
  font-size: 2.5em;
  color: var(--brand-red);
  margin-bottom: 10px;
}
.drop-zone p {
  font-size: var(--font-size-small);
  color: var(--text-medium);
}
.tool-box .icon-tool {
  font-size: 2em;
  color: var(--brand-red);
  margin-bottom: 10px;
}
.tool-box p {
  font-size: var(--font-size-base);
  color: var(--text-dark);
  font-weight: 500;
}

/* --- Media Queries para Responsividad --- */
@media (max-width: 768px) {
  .remittance-widget {
    clip-path: none;
    border-radius: 4px;
    margin: 1rem;
  }
  .widget-header,
  .filter-tabs,
  .remittance-list,
  .new-remittance-section {
    padding-left: 15px;
    padding-right: 15px;
  }
  .widget-header {
    height: auto;
    flex-direction: column;
    align-items: stretch; /* Estirar hijos */
  }
  .widget-header::before {
    /* Barra roja en móvil */
    top: 15px; /* Ajustar posición */
    height: 30px; /* Ajustar altura */
  }
  .header-left {
    margin-left: calc(5px + 10px); /* Ajustar si la barra es externa */
    padding-top: 0; /* Resetear */
    margin-bottom: 10px; /* Espacio antes de .header-right-legend */
  }
  .header-right-legend {
    position: static; /* Flujo normal */
    width: 100%;
    height: auto;
    justify-content: space-between; /* Distribuir elementos */
    margin-top: 10px;
    padding-right: 0; /* Resetear padding */
    gap: 5px;
  }
  .remittance-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .item-details-column,
  .item-status {
    flex-basis: auto;
    width: 100%;
    text-align: left;
    margin-top: 5px;
  }
  .item-status {
    justify-content: flex-start;
  }
  .action-boxes-container {
    flex-direction: column;
  }
  .action-box {
    min-height: auto;
    padding: 15px;
  }
}

/* Estilo base para la fila (importante para la transición y z-index) */
table.table-shopping tbody tr,
table.table tbody tr {
  /* Transición suave SOLO para la sombra */
  transition: box-shadow 0.2s ease-in-out;
  /* Necesario para que z-index funcione correctamente */
  position: relative;
  z-index: 1; /* z-index base */
}

/* Efecto al pasar el ratón por encima (hover) */
table.table-shoppingtbody tr:hover,
table.table tbody tr:hover {
  /* -- SE ELIMINA la línea 'background-color' -- */

  /* Añade SOLO la sombra inferior */
  box-shadow: 0 4px 8px -3px rgba(0, 0, 0, 0.15);

  /* Asegura que la fila activa (y su sombra) esté visualmente por encima */
  z-index: 2;
}

table.table-shopping thead th {
  font-weight: bold; /* O puedes usar el valor numérico 700 */
}

/* Contenedor general de la lista de logs dentro del modal */
#modalLogsRemesaBody .logs-list-minimalist {
  padding: 10px 0; /* Un poco de padding vertical, sin padding horizontal (los items lo tendrán) */
}

/* Estilo para cada item de log */
#modalLogsRemesaBody .log-item {
  padding: 15px 20px; /* Buen padding interno */
  margin-bottom: 10px; /* Espacio entre items */
  background-color: #f9f9f9; /* Un fondo muy sutil, casi blanco */
  border-radius: 8px; /* Bordes redondeados suaves */
  border: 1px solid #e9ecef; /* Borde muy ligero */
  transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out; /* Transición suave para hover */
}

#modalLogsRemesaBody .log-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* Contenido principal del log (el mensaje) */
#modalLogsRemesaBody .log-item-content .log-text {
  margin: 0;
  color: #333; /* Color de texto principal oscuro */
  font-size: 0.95rem;
  line-height: 1.6;
  word-break: break-word; /* Para que textos largos no rompan el layout */
}

/* Estilo para logs preformateados (si son JSON/XML) */
#modalLogsRemesaBody .log-item-content .log-preformatted {
  margin: 0;
  padding: 10px;
  background-color: #eef1f3; /* Fondo ligeramente diferente para pre */
  border-radius: 6px;
  font-size: 0.85rem; /* Texto un poco más pequeño para pre */
  color: #2c3e50; /* Color de texto para pre */
  white-space: pre-wrap; /* Para que el contenido se ajuste */
  word-break: break-all;
  border: 1px solid #dfe3e6;
}

/* Metadatos del log (ej. factura, cliente) */
#modalLogsRemesaBody .log-item-meta {
  margin-top: 10px;
  font-size: 0.8rem;
  color: #7c0e0e; /* Color de texto secundario, más claro */
  text-align: right; /* Alinear a la derecha si se prefiere */
}

/* Estilo para el encabezado opcional de la lista de logs */
#modalLogsRemesaBody .logs-list-header {
  font-size: 0.9rem;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 15px;
  padding-left: 5px; /* Pequeña indentación */
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

/* Estado vacío (cuando no hay logs) */
#modalLogsRemesaBody .logs-empty-state {
  color: #6c757d; /* Color de texto para estado vacío */
  font-size: 1rem;
}
#modalLogsRemesaBody .logs-empty-state svg {
  width: 48px;
  height: 48px;
  opacity: 0.7;
}

/* Estilos específicos para #venserModal */

#venserModal .modal-content {
  /* Clase original: custom-modal-content */
  border-radius: 0.75rem;
  border: none;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
}

#venserModal .modal-header {
  /* Clase original: custom-modal-header */
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  padding: 1rem 1.5rem;
  align-items: center;
}

#venserModal .modal-header .modal-title {
  font-weight: 600;
  font-size: 1.1rem;
  color: #343a40;
}

#venserModal .modal-header .btn-close {
  background-image: none;
  opacity: 0.7;
  font-size: 1.2rem;
}
#venserModal .modal-header .btn-close:hover {
  opacity: 1;
}

#venserModal .modal-body {
  /* Clase original: custom-modal-body */
  padding: 1.5rem;
}

#venserModal .subtle-label {
  font-size: 0.8rem;
  color: #6c757d;
  margin-bottom: 0.25rem;
  display: block;
}

#venserModal .form-control-plaintext {
  padding-left: 0;
  padding-right: 0;
  background-color: transparent;
  border-color: transparent;
  font-weight: 500;
}
#venserModal .form-control-plaintext:focus {
  box-shadow: none;
  border-color: transparent;
}

/* Barra de búsqueda y acciones dentro de #venserModal */
#venserModal .search-and-actions-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

#venserModal .search-input-group {
  flex-grow: 1;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
}
#venserModal .search-input-group .form-control {
  border: none;
}
#venserModal .search-input-group .form-control:focus {
  box-shadow: none;
}
#venserModal .search-input-group .search-icon-wrapper {
  background-color: transparent;
  border: none;
  padding-left: 0.75rem;
  color: #6c757d;
}
#venserModal
  .search-input-group
  .search-icon-wrapper
  .material-symbols-outlined {
  font-size: 1.25rem;
}

#venserModal .btn-auto-assign {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1rem;
}
#venserModal .btn-auto-assign .material-symbols-outlined {
  font-size: 1.2rem;
}

/* Área de gestión de series dentro de #venserModal */
#venserModal .series-management-area {
  margin-top: 1.5rem;
}
#venserModal .series-column {
  display: flex;
  flex-direction: column;
}
#venserModal .series-list-header {
  font-weight: 600;
  color: #495057;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#venserModal .badge.bg-secondary-soft {
  background-color: #e9ecef;
  color: #495057;
  font-weight: 500;
}
#venserModal .badge.bg-primary-soft {
  background-color: #cfe2ff;
  color: #0d6efd;
  font-weight: 500;
}

#venserModal .scrollable-list {
  max-height: 250px;
  overflow-y: auto;
  padding: 0.25rem;
  border: 1px solid #e9ecef;
  border-radius: 0.375rem;
  background-color: #f8f9fa;
  min-height: 150px;
}

/* Estilo para los items de serie (botones) dentro de #venserModal */
#venserModal .series-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: left;
  margin-bottom: 0.35rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  border: 1px solid transparent;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
#venserModal .series-item .material-symbols-outlined {
  font-size: 1rem;
  opacity: 0.6;
}

#venserModal .series-item.available {
  background-color: #fff;
  border: 1px solid #ced4da;
  color: #212529;
}
#venserModal .series-item.available:hover {
  background-color: #e9f5ff;
  border-color: #a6d5ff;
}
#venserModal .series-item.available .series-item-action {
  color: #0d6efd;
}

#venserModal .series-item.selected {
  background-color: #e9f5ff;
  border: 1px solid #a6d5ff;
  color: #0a58ca;
}
#venserModal .series-item.selected:hover {
  background-color: #d1e7fd;
  border-color: #8dc2fa;
}
#venserModal .series-item.selected .series-item-action {
  color: #0a58ca;
}

#venserModal .series-item-manual-add {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
  background-color: #f8f9fa;
  border-radius: 0.25rem;
  margin-top: 0.5rem;
}
#venserModal .btn-link {
  color: #0d6efd;
  text-decoration: none;
  font-weight: 500;
}
#venserModal .btn-link:hover {
  text-decoration: underline;
}
#venserModal .btn-link .material-symbols-outlined {
  font-size: 1.1rem;
  vertical-align: middle;
  margin-right: 0.25rem;
}

#venserModal .modal-footer {
  /* Clase original: custom-modal-footer */
  background-color: #f8f9fa;
  border-top: 1px solid #e9ecef;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: flex-end; /* Alinea botones a la derecha */
  gap: 0.5rem; /* NUEVO: Añade espacio entre los elementos flexibles hijos (los botones) */
}

#venserModal .modal-footer .btn {
  min-width: 100px;
}

/* Ajustes responsivos específicos para #venserModal */
@media (max-width: 767px) {
  #venserModal .search-and-actions-bar {
    flex-direction: column;
    align-items: stretch;
  }
  #venserModal .btn-auto-assign {
    margin-top: 0.5rem;
  }
  #venserModal .series-management-area .col-md-6 {
    margin-bottom: 1rem;
  }
  #venserModal .series-management-area .col-md-6:last-child {
    margin-bottom: 0;
  }
}

#venserModal .series-item {
  display: flex; /* Clave para alinear contenido e ícono */
  justify-content: space-between; /* Empuja contenido e ícono a los extremos */
  align-items: center; /* Centra verticalmente */
  width: 100%;
  text-align: left;
  margin-bottom: 0.35rem;
  padding: 0.65rem 0.75rem; /* Ajusta el padding para un buen tamaño */
  font-size: 0.9rem;
  border: 1px solid transparent;
  border-radius: 0.25rem; /* Bordes redondeados para cada item */
  cursor: pointer; /* Indica que es clickeable */
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

#venserModal .series-item .series-item-content {
  flex-grow: 1; /* Permite que el contenido ocupe el espacio disponible */
}
#venserModal .series-item .series-item-content strong {
  display: block; /* Hace que la serie ocupe su propia línea si hay detalles */
}
#venserModal .series-item .series-item-details {
  font-size: 0.75rem; /* Detalles más pequeños */
  color: #6c757d; /* Color grisáceo para los detalles */
  margin-top: 0.15rem;
}

#venserModal .series-item .material-symbols-outlined.series-item-action {
  font-size: 1.1rem; /* Tamaño del ícono de flecha */
  opacity: 0.7;
  margin-left: 0.5rem; /* Espacio si el ícono está a la derecha */
  margin-right: 0.5rem; /* Espacio si el ícono está a la izquierda */
}

#venserModal .series-item.available {
  background-color: #fff;
  border: 1px solid #dee2e6; /* Borde más estándar */
  color: #212529;
}
#venserModal .series-item.available:hover {
  background-color: #e9f5ff;
  border-color: #a6d5ff;
}
#venserModal .series-item.available .series-item-action {
  color: #0d6efd;
}

#venserModal .series-item.selected {
  background-color: #e0eefd; /* Un azul muy claro para seleccionados */
  border: 1px solid #a6d5ff;
  color: #0a58ca;
}
#venserModal .series-item.selected:hover {
  background-color: #d1e7fd;
  border-color: #8dc2fa;
}
#venserModal .series-item.selected .series-item-action {
  color: #0a58ca;
}

/* Estilos para los placeholders cuando no hay series */
#venserModal .scrollable-list .text-muted {
  font-style: italic;
  font-size: 0.9rem;
}

/* Estilos específicos para #comserModal */

/* Usaremos .custom-modal-content, .custom-modal-header, .custom-modal-body, .custom-modal-footer
   que ya deberían estar definidos y prefijados con #venserModal.
   Si quieres que #comserModal tenga estilos ligeramente diferentes para esos elementos base,
   duplica esas reglas y prefíjalas con #comserModal.
   Por simplicidad, asumiré que comparten esos estilos base. */

#comserModal .custom-alert-info {
  background-color: #e0eefd; /* Un azul muy claro */
  border: 1px solid #a6d5ff;
  color: #0a58ca; /* Texto azul oscuro */
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.9rem;
}
#comserModal .custom-alert-info .alert-icon {
  font-size: 1.5rem; /* Ícono de info más grande */
  margin-right: 0.75rem;
  line-height: 1; /* Para mejor alineación vertical */
}
#comserModal .custom-alert-info .alert-text strong {
  font-weight: 600;
}

#comserModal #btnGenerarSeriesAuto {
  display: inline-flex; /* Para alinear ícono y texto */
  align-items: center;
  gap: 0.35rem;
}
#comserModal #btnGenerarSeriesAuto .material-symbols-outlined {
  font-size: 1.1rem;
}

#comserModal .series-input-area {
  margin-top: 1rem;
}

#comserModal .series-table-wrapper {
  max-height: 300px; /* O la altura que desees antes del scroll */
  overflow-y: auto;
  border: 1px solid #e9ecef;
  border-radius: 0.375rem;
}

#comserModal .custom-series-table {
  margin-bottom: 0; /* Para que no haya doble margen con el wrapper */
}
#comserModal .custom-series-table th {
  font-weight: 500;
  font-size: 0.85rem;
  color: #495057;
  padding: 0.5rem 0.75rem; /* Menos padding en la cabecera de la tabla */
  white-space: nowrap;
}
#comserModal .custom-series-table td {
  padding: 0.35rem 0.75rem; /* Menos padding en las celdas */
  vertical-align: middle;
}

#comserModal .series-input-field {
  border: 1px solid #ced4da; /* Borde estándar para los inputs */
  /* Si quieres un look más integrado hasta que tenga foco: */
  /* border: 1px solid transparent; */
  /* background-color: transparent; */
  /* padding-left: 2px; */
  font-size: 0.9rem;
}
#comserModal .series-input-field:focus {
  /* border-color: #86b7fe; */ /* Color de foco de Bootstrap */
  /* box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); */
  /* background-color: #fff; */
}

#comserModal .btn-icon.btn-danger-soft {
  /* Botón de eliminar más sutil */
  color: #dc3545;
  background-color: transparent;
  border-color: transparent;
  padding: 0.25rem 0.4rem;
}
#comserModal .btn-icon.btn-danger-soft:hover {
  background-color: #f8d7da; /* Un rojo muy claro al pasar el ratón */
  color: #842029;
}
#comserModal .btn-icon.btn-danger-soft .material-symbols-outlined {
  font-size: 1.1rem; /* Ajusta el tamaño del ícono de borrar */
}

#comserModal #btnAddSerieRow {
  /* Estilo para el botón de "Añadir Fila" */
  color: #0d6efd;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
#comserModal #btnAddSerieRow:hover {
  text-decoration: underline;
}
#comserModal #btnAddSerieRow .material-symbols-outlined {
  font-size: 1.1rem;
}

#comserModal .article-display-box {
  background-color: #f8f9fa; /* Fondo muy claro, similar a un input deshabilitado o lista */
  border: 1px solid #e9ecef; /* Borde sutil */
  border-radius: 0.375rem; /* Bordes redondeados consistentes */
  padding: 0.75rem 1rem; /* Padding interno */
  display: flex;
  align-items: center;
}

#comserModal .article-display-box .article-icon {
  font-size: 1.5rem; /* Tamaño del ícono */
  color: #495057; /* Color del ícono */
  margin-right: 0.75rem;
}

#comserModal .article-display-box #articleNameComserDisplay {
  font-weight: 500; /* Ligeramente más grueso que el texto normal */
  font-size: 1rem; /* Tamaño de fuente para el nombre del artículo */
  color: #212529; /* Color principal del texto */
  line-height: 1.2; /* Para mejor legibilidad si el nombre es largo y hace wrap */
}

/* Estilos específicos para #modalReglasPrecios (si son diferentes a los base) */
/* Asumimos que .custom-modal-content, .custom-modal-header, .custom-modal-body,
   .custom-modal-footer, .subtle-label ya están definidos y son adecuados. */

#modalReglasPrecios .form-label.form-label-sm {
  /* Etiquetas más pequeñas dentro de las secciones */
  font-size: 0.78rem; /* Un poco más pequeño que subtle-label */
  color: #6c757d;
  margin-bottom: 0.2rem;
  display: block;
}

#modalReglasPrecios .form-control-sm,
#modalReglasPrecios .form-select-sm {
  font-size: 0.85rem; /* Inputs y selects más pequeños */
  padding: 0.35rem 0.6rem;
}

#modalReglasPrecios .rule-section {
  border: 1px solid #e9ecef; /* Borde suave para la sección */
  border-radius: 0.375rem; /* Bordes redondeados */
  margin-bottom: 1.25rem;
}

#modalReglasPrecios .rule-section-header {
  background-color: #f8f9fa; /* Fondo claro para la cabecera de la sección */
  padding: 0.6rem 1rem;
  font-weight: 500;
  font-size: 0.9rem;
  color: #495057;
  border-bottom: 1px solid #e9ecef;
  border-top-left-radius: 0.375rem; /* Redondear esquinas superiores */
  border-top-right-radius: 0.375rem;
  display: flex;
  align-items: center;
}
#modalReglasPrecios .rule-section-header .material-symbols-outlined {
  font-size: 1.1rem;
  margin-right: 0.5rem;
  color: #6c757d;
}

#modalReglasPrecios .rule-section-body {
  padding: 1rem;
}

/* Para ocultar/mostrar detalles de condición */
#modalReglasPrecios .condition-detail,
#modalReglasPrecios .value-between-block {
  /* Se mostrarán con JS */
}

.my-swal-actions-horizontal {
  display: flex !important; /* Usa flexbox */
  flex-direction: row !important; /* Dirección horizontal */
  justify-content: center !important; /* O space-around, space-between, flex-end según prefieras */
  gap: 0.5rem !important; /* Espacio entre botones (opcional) */
  width: 100% !important; /* Asegura que ocupe el ancho para distribuir */
}

/* Opcional: Si los botones son demasiado anchos y quieres que se ajusten a su contenido */
.my-swal-actions-horizontal .swal2-confirm,
.my-swal-actions-horizontal .swal2-deny,
.my-swal-actions-horizontal .swal2-cancel {
  flex-grow: 1; /* Descomenta si quieres que los botones crezcan para llenar el espacio */
  /* min-width: 120px; */ /* Ancho mínimo para cada botón si es necesario */
  margin: 0.25em !important; /* SweetAlert2 puede añadir márgenes, ajústalos si es necesario */
}

.input-group .btn.btn-with-icon { /* Sé específico para no afectar a otros botones */
    padding-top: 0.25rem;    /* Reduce el padding superior, ajusta según sea necesario */
    padding-bottom: 0.25rem; /* Reduce el padding inferior, ajusta según sea necesario */
    line-height: 1.2;       /* Ajusta la altura de línea, puede ayudar a centrar el texto/icono */
    /* Intenta también alinear el icono si es necesario */
}

/* Si el icono dentro del botón también necesita ajuste */
.input-group .btn.btn-with-icon .material-symbols-outlined {
    vertical-align: middle; /* O intenta con 'text-bottom', 'sub', etc. */
    font-size: 1.0rem; /* Ajusta el tamaño del icono si es necesario */
}

/* Estilos para el Modal de Lotes Minimalista */
#loteModal .modal-content {
    border-radius: 0.5rem; /* Bordes más redondeados para el modal */
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.1); /* Sombra sutil */
    border: none;
}

#loteModal .modal-header {
    border-bottom: 1px solid #e9ecef; /* Línea separadora más suave */
    padding: 1rem 1.5rem;
}

#loteModal .modal-title {
    font-weight: 500; /* Título un poco más ligero */
    font-size: 1.125rem;
}

#loteModal .close {
    font-size: 1.75rem;
    opacity: 0.6;
    transition: opacity 0.2s ease-in-out;
}
#loteModal .close:hover {
    opacity: 0.9;
}

#loteModal .modal-body {
    padding: 1.5rem;
}

/* Información del lote seleccionado */
.selected-lote-info {
    margin-bottom: 1.5rem;
    padding: 0.875rem 1.25rem;
    background-color: #e9f5ff; /* Un azul muy claro para destacar la selección */
    border: 1px solid #b8d عقدfff; /* Borde a juego */
    border-radius: 0.375rem;
    display: none; /* Oculto hasta que se seleccione un lote */
}
.selected-lote-info small {
    color: #0056b3; /* Color de texto para la etiqueta "Lote Seleccionado" */
    font-size: 0.8rem;
}
.selected-lote-info span {
    color: #003d80; /* Color de texto para los valores */
}
/* --- Estilos para Modal de Lotes Rediseñado --- */

/* Contenido General del Modal */
#loteModal .modal-content {
    border-radius: 0.5rem; /* Bordes más suaves */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sombra más definida pero suave */
    border: none; /* Sin borde por defecto */
}

/* Encabezado del Modal */
#loteModal .modal-header {
    background-color: #f8f9fa; /* Fondo sutil para el encabezado */
    border-bottom: 1px solid #e9ecef; /* Línea separadora fina */
    padding: 0.9rem 1.25rem;
}

#loteModal .modal-title {
    font-size: 1.1rem; /* Tamaño de título ligeramente ajustado */
    font-weight: 500; /* Un peso medio */
    color: #333; /* Color de texto oscuro pero no negro puro */
}

#loteModal .close {
    font-size: 1.6rem;
    opacity: 0.6;
    transition: opacity 0.2s;
    padding: 0.9rem 1.25rem;
    margin: -0.9rem -1.25rem -0.9rem auto;
}
#loteModal .close:hover {
    opacity: 0.9;
}

/* Cuerpo del Modal */
#loteModal .modal-body {
    padding: 1.25rem;
}

/* Estilos para los Labels e Inputs superiores */
.cool-form-group {
    margin-bottom: 0.5rem; /* Menos margen inferior si están en la misma fila */
}
.cool-label {
    display: block;
    font-size: 0.75rem; /* Label más pequeño */
    font-weight: 500;
    color: #555;
    margin-bottom: 0.25rem;
    text-transform: uppercase; /* Opcional: para un look más "etiquetado" */
    letter-spacing: 0.5px;
}
.cool-readonly-input.form-control-sm {
    background-color: #f0f2f5 !important; /* Fondo distintivo para readonly */
    border-color: #d3d9e0;
    font-size: 0.875rem;
    cursor: default;
    color: #333; /* Asegurar que el texto sea legible */
}
.input-group .btn-outline-cool-clear {
    border-color: #d3d9e0; /* Borde que coincida con el input */
    color: #6c757d;
    padding: 0.2rem 0.4rem; /* Botón pequeño */
}
.input-group .btn-outline-cool-clear:hover {
    background-color: #e9ecef;
    color: #495057;
}
.input-group .btn-outline-cool-clear .material-symbols-outlined {
    font-size: 1.1rem; /* Tamaño del icono */
    vertical-align: middle;
}

/* Título para la tabla de lotes */
.available-lotes-title {
    font-size: 0.85rem;
    font-weight: 500;
    color: #333;
    margin-top: 1.25rem; /* Espacio antes de la tabla */
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #eee; /* Sutil línea debajo del título */
    display: inline-block; /* Para que el borde solo ocupe el ancho del texto */
}

/* Contenedor de la Tabla y Scrollbar */
.cool-table-wrapper {
    max-height: 260px; /* Altura máxima antes de scroll */
    overflow-y: auto;
    border: 1px solid #e9ecef; /* Borde sutil alrededor de la tabla */
    border-radius: 0.3rem;
    margin-bottom: 0.5rem; /* Espacio si hay mensaje de "no lotes" debajo */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #adb5bd #f0f2f5; /* Firefox */
}
.cool-table-wrapper::-webkit-scrollbar {
    width: 6px; /* Scrollbar más delgada */
}
.cool-table-wrapper::-webkit-scrollbar-track {
    background: #f0f2f5; /* Fondo del track */
    border-radius: 0.3rem;
}
.cool-table-wrapper::-webkit-scrollbar-thumb {
    background-color: #adb5bd; /* Color del thumb */
    border-radius: 10px;
    border: 1px solid #f0f2f5; /* Borde sutil alrededor del thumb */
}

/* Estilo general del modal info */
#infoModal .modal-content {
    border-radius: 0.75rem; /* Bordes más redondeados */
    border: none;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15) !important;
}

/* Cabecera y pie de página */
#infoModal .modal-header,
#infoModal .modal-footer {
    background-color: var(--modal-bg-light);
    border-color: var(--modal-border-color);
}

#infoModal .modal-title {
    font-weight: 600;
}

/* Encabezados de cada sección (Stock, Ventas, etc.) */
.section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Espacio entre el icono y el texto */
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--modal-border-color);
}

.section-header .material-symbols-outlined {
    color: var(--modal-primary-color);
    font-size: 1.75rem; /* Icono un poco más grande */
}

.section-header .section-title {
    font-size: 1rem;
    font-weight: 600;
    color: #343a40;
    margin: 0;
}

/* Estilo limpio para las tablas */
.table-clean {
    margin-top: 0;
}

.table-clean thead th {
    background-color: var(--modal-bg-light);
    border: none;
    font-weight: 600;
    color: var(--modal-text-muted);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.table-clean tbody td {
    border-top: 1px solid var(--modal-border-color);
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    vertical-align: middle;
}

.table-clean tbody tr:first-child td {
    border-top: none; /* Sin borde para la primera fila */
}

/* Botón de cierre con el color de acento */
/* =================================================================
   ESTILOS MODERNOS PARA FIELDSET EN FORMULARIOS
   ================================================================= */

.form-fieldset {
    /* El contenedor principal del fieldset */
    border: 1px solid rgba(0, 0, 0, 0.12); /* Un borde muy sutil, típico de Material Design */
    border-radius: 8px; /* Bordes redondeados */
    padding: 1.5rem;   /* Espacio interior generoso */
    margin-bottom: 2.5rem; /* Espacio entre secciones */
    background-color: #fff;
}

.form-fieldset legend {
    /* El título de la sección (el <legend>) */
    width: auto; /* Para que el borde no lo atraviese */
    padding: 0 10px; /* Espaciado horizontal */
    margin-left: 15px; /* Lo mueve un poco hacia adentro */
    font-size: 1.1rem; /* Un poco más grande que el texto normal */
    font-weight: 600; /* Lo hace más prominente */
    color: #3C4858; /* Un color oscuro pero no negro puro, típico del tema */
}

/* Opcional: Ajusta el espaciado de las filas dentro del fieldset */
.form-fieldset .row {
    margin-top: 1rem !important;
}
.form-fieldset .row:first-of-type {
    margin-top: 0 !important;
}

/*
  Estilo para el contenedor de Select2 cuando el select original
  tiene la clase .is-invalid en Bootstrap 4.
*/
select.is-invalid + .select2-container .select2-selection--single {
    border-color: #dc3545; /* Color de error de Bootstrap 4 */
}


/*
 * Personalización del botón "clear" de Select2 con Material Icons a la izquierda
 */

/*
 * VERSIÓN REVISADA Y ROBUSTA
 * Personalización del botón "clear" de Select2 con Material Icons a la izquierda
 */

/* 1. Mover el contenedor del botón y ocultar la '×' original de forma segura */
.select2-selection__clear {
    /* Ocultamos la '×' original haciéndola transparente e invisible */
    color: transparent !important;
    font-size: 1px !important; /* La encogemos para que no ocupe espacio */

    /* Posicionamiento a la izquierda */
    left: 8px;
    right: auto !important;

    /* Estilos de posicionamiento y tamaño (igual que antes) */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* 2. Dejar espacio a la izquierda para el nuevo icono */
.select2-selection__rendered {
    padding-left: 32px !important; /* Aumentamos un poco el padding si es necesario */
}

/* 3. Crear nuestro icono usando el código Unicode de Material Icons */
.select2-selection__clear::before {
    /* La fuente que debe usar */
    font-family: 'Material Icons';
    
    /* CÓDIGO UNICODE para el icono 'close'. Esto es más fiable que 'content: "close";' */
    content: "\e5cd"; 
    
    /* Estilos del icono */
    font-size: 18px;
    color: red; /* Gris estándar */
    
    /* Posicionamiento preciso del icono DENTRO del área del botón */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* Transición suave para el hover */
    transition: color 0.2s ease-in-out;
}

/* 4. Efecto hover para el icono */
.select2-selection__clear:hover::before {
    color: #212529; /* Negro/gris oscuro */
}

/*
  Estilo para los inputs deshabilitados que están DENTRO
  de un elemento con la clase .table-inputs.
*/
.table-inputs .form-control:disabled {
  background-color: #e9ecef; /* O un gris más oscuro como #dddddd si prefieres */
  color: #6c757d;
  cursor: not-allowed;
  opacity: 1; /* Asegura que no se vea semitransparente */
  border-color: #ced4da;
}

/* Opcional: También puedes aplicar un estilo para los inputs readonly en el mismo contexto */
.table-inputs .form-control[readonly] {
  background-color: #f8f9fa; /* Un color ligeramente diferente para readonly si lo deseas */
  cursor: text; /* Mantenemos el cursor de texto para que se pueda seleccionar */
}

/* Estilo para filas de devolución o abono */
.fila-devolucion {
    background-color: #f8d7da; /* Un rojo claro, típico de Bootstrap para danger */
    color: #721c24; /* Texto oscuro para que sea legible */
}

/* Opcional: Para que los enlaces también se vean bien */
.fila-devolucion a {
    color: #721c24;
    font-weight: bold;
}