/* ════════════════════════════════════════════════════════════
   CONTROLES DE FORMULARIO — REMISIONES
   Bootstrap pinta sus campos en blanco fijo, así que en el tema
   oscuro los formularios quedaban como recuadros blancos con texto
   claro encima. Aquí toman las superficies del sistema, que ya
   llevan el matiz de esta plataforma y cambian con el tema.
   Es un archivo propio de remisiones: lo que se cambie aquí no
   afecta a las demás plataformas.
   ════════════════════════════════════════════════════════════ */

.dc-sistema .form-control,
.dc-sistema .form-select,
.dc-sistema .input-group-text,
.dc-sistema textarea.form-control,
.dc-sistema .form-check-input{
  background-color:var(--dc-2);
  border-color:var(--dc-li);
  color:var(--dc-tx);
}
.dc-sistema .form-control::placeholder,
.dc-sistema textarea.form-control::placeholder{ color:var(--dc-tx3); opacity:1; }

.dc-sistema .form-control:focus,
.dc-sistema .form-select:focus{
  background-color:var(--dc-2);
  border-color:var(--dc-ac);
  color:var(--dc-tx);
  box-shadow:0 0 0 3px var(--dc-ac-s);
}
.dc-sistema .form-check-input:checked{
  background-color:var(--dc-ac);
  border-color:var(--dc-ac);
}
.dc-sistema .form-label,
.dc-sistema .col-form-label{ color:var(--dc-tx2); }
.dc-sistema .form-text{ color:var(--dc-tx3); }

/* Contenedores de formulario que Bootstrap deja en blanco */
.dc-sistema .client-form,
.dc-sistema .form-section,
.dc-sistema .page-header,
.dc-sistema .card,
.dc-sistema .list-group-item,
.dc-sistema .modal-content,
.dc-sistema .dropdown-menu{
  background-color:var(--dc-0);
  border-color:var(--dc-li);
  color:var(--dc-tx);
}
.dc-sistema .form-section{ background-color:var(--dc-2); }

.dc-sistema .btn-outline-secondary{
  background-color:transparent;
  border-color:var(--dc-li2);
  color:var(--dc-tx2);
}
.dc-sistema .btn-outline-secondary:hover{
  background-color:var(--dc-2);
  color:var(--dc-tx);
}
/* Las celdas heredan el color de su contenedor en vez de imponerlo:
   dentro de un documento imprimible el contenedor es papel y su texto
   debe seguir siendo oscuro, aunque la interfaz esté en tema oscuro. */
.dc-sistema .table{ --bs-table-bg:transparent; color:inherit; }
.dc-sistema .table > :not(caption) > * > *{
  background-color:transparent; color:inherit; border-color:var(--dc-li);
}

/* El documento imprimible conserva su aspecto de papel */
@media print{
  .dc-sistema .form-control,
  .dc-sistema .form-select,
  .dc-sistema .card{ background:#fff; color:#000; }
}

/* Utilidades de texto de Bootstrap: traen colores fijos de tema claro
   y sobre el fondo oscuro se quedaban en 1.3:1. */
.dc-sistema .text-muted{ color:var(--dc-tx2) !important; }
.dc-sistema .text-dark,
.dc-sistema .text-body{ color:var(--dc-tx) !important; }
.dc-sistema .text-secondary{ color:var(--dc-tx2) !important; }
.dc-sistema .bg-light{ background-color:var(--dc-2) !important; }
.dc-sistema .bg-white{ background-color:var(--dc-0) !important; }
.dc-sistema .border{ border-color:var(--dc-li) !important; }

/* Encabezados heredados de estilos.css con gris fijo de tema claro */
.dc-sistema .page-title,
.dc-sistema .page-header h1,
.dc-sistema .page-header h2,
.dc-sistema .form-section h5,
.dc-sistema .form-section h6,
.dc-sistema .card-title{ color:var(--dc-tx); }
.dc-sistema .page-subtitle,
.dc-sistema .page-header p{ color:var(--dc-tx2); }

/* Dentro de los contenedores de Bootstrap el texto seguía heredando
   el gris oscuro que trae la librería, sobre superficies que ya son
   oscuras. Se acota a esos contenedores, no a toda la página. */
.dc-sistema .card,
.dc-sistema .form-section,
.dc-sistema .page-header,
.dc-sistema .modal-content,
.dc-sistema .list-group-item{ color:var(--dc-tx); }

.dc-sistema .card h1, .dc-sistema .card h2, .dc-sistema .card h3,
.dc-sistema .card h4, .dc-sistema .card h5, .dc-sistema .card h6,
.dc-sistema .form-section h1, .dc-sistema .form-section h2,
.dc-sistema .form-section h3, .dc-sistema .form-section h4,
.dc-sistema .form-section h5, .dc-sistema .form-section h6{ color:var(--dc-tx); }

/* Etiquetas y textos de ayuda de las pantallas de detalle */
.dc-sistema [class$="-lbl"],
.dc-sistema [class*="-hint"],
.dc-sistema [class$="-meta-lbl"]{ color:var(--dc-tx2); }

/* Botones y etiquetas de contorno de Bootstrap: su color va fijo al
   gris oscuro de la librería y sobre el tema oscuro no se leían. */
.dc-sistema .btn-outline-dark{
  /* Bootstrap resuelve el color de sus botones por sus propias
     variables; fijar sólo `color` no basta porque la suya gana. */
  --bs-btn-color:var(--dc-tx);
  --bs-btn-border-color:var(--dc-li2);
  --bs-btn-hover-color:var(--dc-tx);
  --bs-btn-hover-bg:var(--dc-2);
  --bs-btn-hover-border-color:var(--dc-li2);
  --bs-btn-active-color:var(--dc-tx);
  --bs-btn-active-bg:var(--dc-2);
  color:var(--dc-tx);
  border-color:var(--dc-li2);
}
.dc-sistema .btn-outline-dark:hover{
  background-color:var(--dc-2);
  color:var(--dc-tx);
  border-color:var(--dc-li2);
}
.dc-sistema .form-label,
.dc-sistema .form-label.fw-bold{ color:var(--dc-tx); }

/* ── Ventanas, avisos y tablas de Bootstrap ────────────────
   Todo esto vive oculto hasta que se abre un modal o un panel,
   y por eso arrastraba los colores claros de la librería. */
.dc-sistema .modal-content,
.dc-sistema .offcanvas,
.dc-sistema .popover,
.dc-sistema .toast{
  background-color:var(--dc-0);
  color:var(--dc-tx);
  border-color:var(--dc-li);
}
.dc-sistema .modal-header,
.dc-sistema .modal-footer,
.dc-sistema .offcanvas-header{ border-color:var(--dc-li); }
.dc-sistema .modal-title,
.dc-sistema .offcanvas-title{ color:var(--dc-tx); }
.dc-sistema .btn-close{ filter:invert(1) grayscale(1) brightness(2); }

.dc-sistema .breadcrumb-item,
.dc-sistema .breadcrumb-item a,
.dc-sistema .breadcrumb-item.active,
.dc-sistema .breadcrumb-item + .breadcrumb-item::before{ color:var(--dc-tx2); }

.dc-sistema .alert{ background-color:var(--dc-2); border-color:var(--dc-li); color:var(--dc-tx); }
.dc-sistema .alert-secondary{ background-color:var(--dc-2); color:var(--dc-tx); }
.dc-sistema .alert-info{ background-color:var(--dc-ac-s); border-color:var(--dc-ac); color:var(--dc-tx); }
.dc-sistema .alert-success{ background-color:var(--dc-ok-s); border-color:var(--dc-ok); color:var(--dc-tx); }
.dc-sistema .alert-warning{ background-color:var(--dc-av-s); border-color:var(--dc-av); color:var(--dc-tx); }
.dc-sistema .alert-danger{ background-color:var(--dc-mal-s); border-color:var(--dc-mal); color:var(--dc-tx); }

.dc-sistema .table-light,
.dc-sistema .table-light > td, .dc-sistema .table-light > th,
.dc-sistema .table-secondary,
.dc-sistema .table-striped > tbody > tr:nth-of-type(odd) > *{
  --bs-table-bg:transparent;
  background-color:var(--dc-2);
  color:var(--dc-tx);
}
.dc-sistema .table-success{ background-color:var(--dc-ok-s); color:var(--dc-tx); }
.dc-sistema .table-warning{ background-color:var(--dc-av-s); color:var(--dc-tx); }
.dc-sistema .table-danger { background-color:var(--dc-mal-s); color:var(--dc-tx); }
.dc-sistema .table-info   { background-color:var(--dc-ac-s); color:var(--dc-tx); }

.dc-sistema .list-group-item{ background-color:var(--dc-0); color:var(--dc-tx); border-color:var(--dc-li); }
.dc-sistema .nav-tabs .nav-link{ color:var(--dc-tx2); }
.dc-sistema .nav-tabs .nav-link.active{
  background-color:var(--dc-0); color:var(--dc-tx); border-color:var(--dc-li) var(--dc-li) var(--dc-0);
}
.dc-sistema .accordion-item,
.dc-sistema .accordion-button{ background-color:var(--dc-0); color:var(--dc-tx); border-color:var(--dc-li); }
.dc-sistema .accordion-button:not(.collapsed){ background-color:var(--dc-2); color:var(--dc-tx); }

/* Enlaces y títulos que heredaban colores de la librería o del tema
   claro. El documento en papel queda fuera: tiene los suyos. */
/* Sólo los enlaces de texto: los que ya son botones traen su propio
   fondo de color y su texto tiene que contrastar con ese fondo. */
/* La hoja de "Más" es cromo del sistema, no texto de la pantalla:
   ahí el acento marca solo la sección en la que estás. */
.dc-sistema a:not([class*="btn"]):not([class*="badge"]):not([class*="footer"]):not([class*="action"]):not(.dc-mas-i):not(.dc-mas-b):not(.dc-app),
.dc-sistema .alert-link{ color:var(--dc-ac-tx); }
.dc-sistema .cot-wrapper a{ color:#004898 !important; }
/* En una cabecera de color, el título hereda su contraste */
.dc-sistema .modal-header .modal-title,
.dc-sistema [class*="-header"] [class*="-title"]{ color:inherit; }

/* Botón de confirmar un borrado: va sobre rojo sólido, así que su
   texto debe contrastar con ese rojo y no seguir al tema. */
.dc-sistema [class*="modal-confirm"],
.dc-sistema [class*="modal-delete"],
.dc-sistema [class*="modal-del-conf"]{
  /* Rojo sólido, no el del tema: el de tema oscuro es un rojo claro
     pensado para texto, y con blanco encima no se lee. */
  background:#c62828;
  color:#ffffff;
  border-color:#c62828;
}
.dc-sistema [class*="modal-confirm"]:hover,
.dc-sistema [class*="modal-delete"]:hover{
  background:#a91f1f;
  color:#ffffff;
}
.dc-sistema .btn-outline-danger{ color:var(--dc-mal); border-color:var(--dc-mal); background:transparent; }
.dc-sistema .btn-outline-danger:hover{ background:var(--dc-mal); color:#fff; }

/* Título dentro de una cabecera con color propio: hereda su contraste
   en vez de seguir al tema. */
.dc-sistema .modal-header[style*="background"] .modal-title,
.dc-sistema .modal-header[style*="gradient"] .modal-title,
.dc-sistema .modal-header[style*="background"] *{ color:#ffffff; }

/* ── Cabeceras de tarjeta ───────────────────────────────────
   Bootstrap las pinta con su color a todo lo ancho (bg-primary,
   bg-success…). Aquí van sobrias: superficie del sistema y el color
   reducido al icono, que es lo que distingue una sección de otra. */
.dc-sistema .card-header.bg-primary,
.dc-sistema .card-header.bg-success,
.dc-sistema .card-header.bg-warning,
.dc-sistema .card-header.bg-info,
.dc-sistema .card-header.bg-secondary,
.dc-sistema .card-header.bg-dark{
  background-color:var(--dc-2) !important;
  color:var(--dc-tx) !important;
  border-bottom:1px solid var(--dc-li);
}
.dc-sistema .card-header.bg-primary i{ color:var(--dc-ac); }
.dc-sistema .card-header.bg-success i{ color:var(--dc-ok); }
.dc-sistema .card-header.bg-warning i{ color:var(--dc-av); }
.dc-sistema .card-header.bg-info i{ color:var(--dc-ac); }
.dc-sistema .card-header.text-white,
.dc-sistema .card-header.text-dark{ color:var(--dc-tx) !important; }

/* ── Foco al navegar con el teclado ─────────────────────────
   Al recorrer los resultados con las flechas hay que ver cuál está
   señalado. Antes el resaltado era del mismo color que la superficie
   y no se distinguía nada. */
.dc-sistema .autocomplete-item-active,
.dc-sistema .list-group-item.active,
.dc-sistema .dc-buscador-activo,
.dc-sistema [data-index].activo{
  /* Opaco: con el acento translúcido se veía lo que hay detrás. */
  background-color:color-mix(in srgb, var(--dc-ac) 20%, var(--dc-0)) !important;
  border-color:var(--dc-ac) !important;
  color:var(--dc-tx) !important;
  box-shadow:inset 3px 0 0 var(--dc-ac);
  position:relative;
}
/* La cifra y la categoría del elemento señalado también se realzan */
.dc-sistema .autocomplete-item-active strong,
.dc-sistema .list-group-item.active strong{ color:var(--dc-tx); }
.dc-sistema .autocomplete-item-active small,
.dc-sistema .list-group-item.active small{ color:var(--dc-tx2); }
.dc-sistema .autocomplete-item-active .badge,
.dc-sistema .list-group-item.active .badge{ border-color:var(--dc-ac); }

/* Y el propio campo, mientras se navega */
.dc-sistema #buscarProducto:focus,
.dc-sistema input[type="search"]:focus{
  border-color:var(--dc-ac);
  box-shadow:0 0 0 3px var(--dc-ac-s);
}


/* ── Cantidad dentro del buscador de productos ─────────────────
   Permite escribir cuántas unidades y agregar de una vez, sin
   tener que corregir el 1 después en la lista. */
.ac-cant{display:inline-flex;align-items:center;gap:.25rem;margin-right:.5rem}
.ac-cant-input{
  width:62px;padding:.3rem .4rem;text-align:center;
  background:var(--dc-0);color:var(--dc-tx);
  border:1px solid var(--dc-li);border-radius:8px;
  font-family:var(--dc-fuente);font-size:.85rem;font-weight:700;
  -moz-appearance:textfield;
}
.ac-cant-input::-webkit-outer-spin-button,
.ac-cant-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ac-cant-input:focus{outline:0;border-color:var(--dc-ac);box-shadow:0 0 0 3px var(--dc-ac-s)}
.ac-cant-btn{
  display:inline-grid;place-items:center;width:30px;height:30px;flex-shrink:0;
  border:1px solid var(--dc-ac);border-radius:8px;cursor:pointer;
  background:var(--dc-ac);color:var(--dc-ac-c);font-size:.8rem;line-height:1;
  transition:filter .15s;
}
.ac-cant-btn:hover{filter:brightness(1.08)}