/*
 * srpyme-skote.css
 * Ajustes propios sobre el bootstrap de Skote (Plantilla/Skote/dist/assets/css/bootstrap.min.css, Bootstrap 5.3.8
 * compilado por Skote con su paleta, fondos y modo oscuro). Los colores salen de ese archivo; aqui solo va
 * lo que es del ERP. Va despues de bootstrap.min.css y de app.css de Skote.
 */
:root,
[data-bs-theme="light"] {
  /* Skote usa Poppins; se deja Source Sans Pro (la que se usaba con AdminLTE) porque es mas angosta
     y las grillas no cambian de ancho */
  --bs-body-font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ======================================================================
   Pantallas de filtros + grilla
   ====================================================================== */

/* Barra de filtros sobre la grilla. Se usa en dos formas que ya tenian las vistas:
   <div class="card card-filtros"><form class="card-body">...</form></div>
   <nav class="navbar card-filtros">filtros a la izquierda, acciones a la derecha</nav> */
.card-filtros {
  background-color: #eef1fd;
  border: 1px solid #dde2fa;
  border-radius: .25rem;
  box-shadow: 0 .75rem 1.5rem rgba(18, 38, 63, .03);
  margin-bottom: .75rem !important;
}

.card.card-filtros > .card-body,
.card.card-filtros > form.card-body {
  padding: .75rem 1rem;
}

.navbar.card-filtros {
  padding: .5rem 1rem;
  gap: .5rem;
}

.card-filtros label {
  color: #495057;
  font-weight: 600;
  margin-bottom: .25rem;
}

.card-filtros .form-control,
.card-filtros .form-select,
.card-filtros .select2-container .select2-selection {
  background-color: #fff;
}

/* Grillas (table.dataTable). Las cabeceras se pueden partir en dos lineas como antes; sin partirse la grilla se
   ensancha y se sale de la pantalla (ej. Presupuesto/RepControlPresupuesto) */
table.dataTable > thead > tr > th {
  background-color: #eff2f7;
  color: #343a40;
  font-weight: 600;
  vertical-align: middle;
}

/* Botones de un btn-group (ej. "Ver" + "Distribucion" en una grilla) en una sola linea: si la columna queda angosta
   el texto del boton se partia y el icono quedaba arriba del texto */
.btn-group > .btn {
  white-space: nowrap;
}

table.dataTable > thead > tr > th,
table.dataTable > tbody > tr > td,
table.dataTable > tfoot > tr > th,
table.dataTable > tfoot > tr > td {
  padding: .5rem .75rem;
}

table.dataTable.table-sm > thead > tr > th,
table.dataTable.table-sm > tbody > tr > td,
table.dataTable.table-sm > tfoot > tr > th,
table.dataTable.table-sm > tfoot > tr > td {
  padding: .3rem .5rem;
}

table.dataTable > tbody > tr > td {
  vertical-align: middle;
}

/* Montos y fechas alineados a la derecha no se parten en dos lineas ("$ 453.384") */
table.dataTable > tbody > tr > td.text-right,
table.dataTable > tbody > tr > td.text-end,
table.dataTable > tbody > tr > td.dt-type-numeric,
table.dataTable > tbody > tr > td.dt-type-date {
  white-space: nowrap;
}

table.dataTable > tfoot > tr > th,
table.dataTable > tfoot > tr > td {
  font-weight: 600;
}

/* Botones de exportar / buscador de DataTables */
div.dt-container div.dt-search input,
div.dt-container div.dt-length select {
  border-color: #ced4da;
}

/* Cabeceras de tabla con color (<thead class="bg-success-subtle">): en BS 5.3 cada celda pinta su propio fondo
   y tapa el del thead; se deja transparente para que se vea el color */
.table > thead[class*="bg-"] > tr > *,
table.dataTable > thead[class*="bg-"] > tr > th {
  --bs-table-bg: transparent;
  background-color: transparent;
}

/* ======================================================================
   Login y paginas de clave (contenedor .account-pages de Skote)
   Skote las deja en 13px; se suben a 15px para que se lean y escriban comodo
   ====================================================================== */
.account-pages {
  --bs-body-font-size: .9375rem;
  font-size: .9375rem;
}

.account-pages .form-label,
.account-pages .form-control,
.account-pages .form-select,
.account-pages .form-check-label,
.account-pages .input-group-text,
.account-pages .btn,
.account-pages .alert {
  font-size: .9375rem;
}

.account-pages h5 {
  font-size: 1.125rem;
}

/* Bordes de tabla con el color de la tabla. El bootstrap de Skote trae `.table > :not(:first-child) { border-top: 0 }`,
   que deja el color del borde de tbody/tfoot en el color del texto; las filas lo heredan y donde una celda no tiene
   borde (fila separadora <tr class="border-0"> de la OC) aparece una linea o recuadro oscuro */
.table > :not(caption) {
  border-color: var(--bs-table-border-color);
}

.table > :not(:first-child) {
  border-top-color: var(--bs-table-border-color);
}

.table > :not(caption) > tr.border-0 > * {
  border-width: 0;
}

/* Pie de card: el bootstrap de Skote deja las cards sin borde (--bs-card-border-width: 0) y el card-footer queda sin
   linea de separacion, confundiendose con el cuerpo (ej. modal de factura) */
.card-footer {
  border-top: 1px solid #e9ecef;
}

/* Tabs: el activo de Skote solo cambia a fondo blanco con borde #eff2f7, sobre una card blanca no se distingue */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--bs-primary);
  font-weight: 600;
  border-color: #dee2e6 #dee2e6 var(--bs-card-bg, #fff);
}

.nav-tabs .nav-link:not(.active):hover {
  border-color: #eff2f7 #eff2f7 #dee2e6;
}

/* Controles chicos: Skote los deja en 11.4px; se suben a 12.5px, cerca de lo que se veia antes y del select2 */
.form-control-sm,
.form-select-sm,
.col-form-label-sm,
.btn-sm,
.btn-group-sm > .btn,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
  font-size: .78125rem;
}

/* Wizard (jquery-steps): como antes, el wizard es transparente y sus cards internas se ven normales. Solo los pasos
   sin card propia (ej. paso 1 de OC masiva) llevan fondo de card, para que los campos no queden sueltos sobre el gris */
.wizard > .content > .body:not(:has(.card)) {
  background-color: #fff;
  border-radius: .25rem;
  box-shadow: 0 .75rem 1.5rem rgba(18, 38, 63, .03);
}

/* Cards dentro de modales: blancas sobre fondo blanco, con la sombra suave de Skote no se ve su borde. Las paginas
   con _Layout ya la tienen en todas las cards (srpyme-compat.css); esto es para las que cargan solo este archivo */
.modal .card {
  box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);
}

/* Filas de color (table-success, table-danger...): el bootstrap de Skote trae el hover, el rayado y la fila activa
   compilados en negro con texto blanco. Como en Bootstrap estandar: el mismo color de la fila un poco mas oscuro */
.table-primary,
.table-secondary,
.table-success,
.table-info,
.table-warning,
.table-danger,
.table-light {
  --bs-table-striped-bg: color-mix(in srgb, var(--bs-table-bg), #000 5%);
  --bs-table-striped-color: #000;
  --bs-table-active-bg: color-mix(in srgb, var(--bs-table-bg), #000 10%);
  --bs-table-active-color: #000;
  --bs-table-hover-bg: color-mix(in srgb, var(--bs-table-bg), #000 7.5%);
  --bs-table-hover-color: #000;
}

.table-dark {
  --bs-table-striped-bg: color-mix(in srgb, var(--bs-table-bg), #fff 5%);
  --bs-table-striped-color: #fff;
  --bs-table-active-bg: color-mix(in srgb, var(--bs-table-bg), #fff 10%);
  --bs-table-active-color: #fff;
  --bs-table-hover-bg: color-mix(in srgb, var(--bs-table-bg), #fff 7.5%);
  --bs-table-hover-color: #fff;
}