/* ==========================================================================
   CONCRETO · concreto-bridge.css
   Re-pinta los componentes de Bootstrap con los tokens del sistema, para
   unificar color/tipografía/radios SIN reescribir el markup de los templates.
   --------------------------------------------------------------------------
   Cargar DESPUÉS de bootstrap.min.css. Como gana en la cascada por orden, casi
   nunca hace falta !important (solo en utilidades .bg-*/.text-* que Bootstrap
   define con !important; ahí va comentado).
   Bajo data-theme="dark" los tokens ya resuelven a superficies oscuras, así que
   estos mapeos funcionan en oscuro automáticamente.
   Punto de partida: cubre los componentes globales. Añade aquí SOLO componentes
   Bootstrap genéricos no cubiertos que aparezcan al migrar; lo específico de una
   app va a static/css/concreto/apps/concreto-<app>.css.
   Doc: Concreto-Migracion-Diseno/01-ARQUITECTURA-CSS.md §3
   ========================================================================== */

/* ---- Base tipográfica ----
   La UI legacy trabajaba a 12px con una sans del sistema. Mundial tiene una
   mancha visual mayor: 14px/300 conserva legibilidad y recupera la densidad
   anterior sin volver a una base demasiado pequeña. */
body,
html[data-theme] body {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-thin);
  color: var(--c-ink);
  background: var(--c-surface-2);
}
/* Títulos en Regular; <strong>/<b> y .fw-bold usan Demibold, no Bold. */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-weight: var(--fw-regular); }
b, strong, .fw-bold, .fw-bolder { font-weight: var(--fw-demi) !important; }
a { color: var(--c-navy); }
a:hover { color: var(--c-navy-black); }
/* En oscuro, el navy de los enlaces (y peor el navy-black del hover) es ilegible
   sobre superficies navy — mismo problema sistémico que .text-primary. Los enlaces
   sin clase pasan al gris celeste (primario de marca). Surgió en Informacion: cards
   de elegir-modelo envueltos en <a> heredaban navy → texto/iconos invisibles.
   IMPORTANTE — se EXCLUYE .btn con :not(.btn): un <a class="btn-success"> es enlace,
   así que sin la exclusión esta regla (espec. 0,1,1) le ganaba a .btn-*:hover (0,1,0)
   y pintaba el texto del botón gris-celeste (reposo) o BLANCO sobre el barrido blanco
   (hover) → ilegible. Con :not(.btn) los botones mantienen su propio color de texto. */
[data-theme="dark"] a:not(.btn) { color: var(--c-gray-celeste); }
[data-theme="dark"] a:not(.btn):hover { color: var(--c-white); }

/* ---- Botones ---- */
.btn { border-radius: var(--radius-md); font-weight: var(--fw-medium); }
.btn-primary,
.btn-warning {                 /* el dorado viejo se unifica al amarillo de marca */
  background-color: var(--main-yellow); border-color: var(--main-yellow); color: var(--c-navy-black);
}
.btn-primary:hover, .btn-warning:hover,
.btn-primary:focus, .btn-warning:focus {
  background-color: var(--c-yellow-700); border-color: var(--c-yellow-700); color: var(--c-navy-black);
}
.btn-secondary, .btn-dark {
  background-color: var(--c-navy-black); border-color: var(--c-navy-black); color: var(--c-yellow);
}
.btn-success { background-color: var(--c-success-700); border-color: var(--c-success-700); color: #fff; }
.btn-danger  { background-color: var(--c-danger);  border-color: var(--c-danger);  color: #fff; }
.btn-info    { background-color: var(--c-navy);    border-color: var(--c-navy);    color: #fff; }
.btn-outline-warning, .btn-outline-primary { color: var(--main-yellow); border-color: var(--main-yellow); }
.btn-outline-warning:hover, .btn-outline-primary:hover {
  background-color: var(--main-yellow); border-color: var(--main-yellow); color: var(--c-navy-black);
}
.btn-altprimary { background-color: var(--c-navy); border-color: var(--c-navy); color: #fff; }
.btn-altprimary:hover { background-color: var(--c-navy-black); border-color: var(--c-navy-black); color: #fff; }
.btn-outline-light { color: var(--c-ink); border-color: var(--c-line-strong); }
.btn-outline-light:hover { background-color: rgba(255,255,255,.12); color: var(--c-white); }
.btn:focus-visible { outline: 2px solid var(--main-yellow); outline-offset: 2px; box-shadow: none; }
/* Texto sobre botón sólido amarillo = navy-black SIEMPRE (regla 00-SISTEMA §1.6: nunca blanco
   sobre amarillo). Red de seguridad por si el markup trae .text-light por error sobre un botón
   amarillo. !important: .text-light de Bootstrap también lo usa, hay que ganarle. */
.btn-primary.text-light, .btn-warning.text-light { color: var(--c-navy-black) !important; }

/* ---- Hover "barrido blanco" (firma del sistema) sobre botones Bootstrap ----
   Replica el hover de .c-btn del sistema de diseño: un panel blanco entra desde
   la izquierda (translateX -101% → 0, 300ms) y el contenido escala 1.02. El texto
   cambia a un color legible sobre el blanco. SOLO en variantes sólidas; outline/
   link/tiles-con-logo NO lo llevan. z-index:-1 pinta el barrido sobre el fondo del
   botón pero debajo del texto/iconos. Doc: 00-SISTEMA-DISENO.md §5 y §7.1. */
.btn {
  position: relative; z-index: 0; isolation: isolate; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, color .25s ease;
}
.btn::before {
  content: ""; position: absolute; inset: -1px; background: #fff; border-radius: inherit;
  transform: translateX(-101%); transition: transform .3s ease-out; z-index: -1; pointer-events: none;
}
.btn:hover::before { transform: translateX(0); }
.btn:hover  { transform: scale(1.02); }
.btn:active { transform: scale(1); }
/* Texto legible sobre el barrido blanco, por variante sólida */
.btn-secondary:hover, .btn-dark:hover, .btn-info:hover, .btn-altprimary:hover { color: var(--c-navy); }
.btn-success:hover { color: var(--c-success-700); }
.btn-danger:hover  { color: var(--c-danger); }
/* Variantes NO sólidas / utilitarias: sin barrido (usan tinte de fondo en hover) */
.btn-outline-primary::before, .btn-outline-secondary::before, .btn-outline-success::before,
.btn-outline-danger::before, .btn-outline-warning::before, .btn-outline-info::before,
.btn-outline-light::before, .btn-outline-dark::before, .btn-link::before,
.btn-light::before { content: none; }
@media (prefers-reduced-motion: reduce) {
  .btn::before { display: none; }
  .btn:hover, .btn:active { transform: none; }
}

/* ---- Cards ---- */
.card {
  background-color: var(--c-surface); color: var(--c-ink);
  border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  /* Sombra en capas (referencia Marketplace) → más relieve sobre el navy. */
  box-shadow: var(--shadow-card);
}
.card-header, .card-footer { background-color: transparent; border-color: var(--c-line); }
/* El bridge sube el radio del .card a --radius-lg (16px), pero el header/footer
   mantenían el radio chico de Bootstrap → si llevan fondo (p.ej. .bg-altdark) sus
   esquinas cuadradas asoman fuera del card ("cortadas"). Se redondean al radio del
   card (menos el borde de 1px para anidar limpio). */
.card > .card-header:first-child { border-top-left-radius: calc(var(--radius-lg) - 1px); border-top-right-radius: calc(var(--radius-lg) - 1px); }
.card > .card-footer:last-child  { border-bottom-left-radius: calc(var(--radius-lg) - 1px); border-bottom-right-radius: calc(var(--radius-lg) - 1px); }

/* ---- Formularios ---- */
.form-control, .form-select {
  background-color: var(--c-surface); color: var(--c-ink);
  border: 1.5px solid var(--field-border); border-radius: var(--radius-sm);
}
.form-control::placeholder { color: var(--field-placeholder); }
.form-control:focus, .form-select:focus {
  border-color: var(--field-border-focus); box-shadow: var(--shadow-focus);
  background-color: var(--c-surface); color: var(--c-ink);
}
/* Disabled / readonly: Bootstrap les pone fondo gris CLARO, y como el texto es claro
   (color de arriba) quedaban ilegibles (claro sobre claro). Se re-pintan a superficie
   del sistema con texto legible. opacity/-webkit-text-fill-color vencen el atenuado
   del navegador. Genérico → cubre todos los inputs disabled/readonly del sistema. */
.form-control:disabled, .form-control[readonly],
.form-select:disabled, .form-select[readonly],
textarea.form-control:disabled, textarea.form-control[readonly] {
  background-color: var(--c-surface-2);
  color: var(--c-ink);
  -webkit-text-fill-color: var(--c-ink);
  opacity: 1;
}
.form-label { color: var(--field-label); font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.form-check-input:checked { background-color: var(--c-navy); border-color: var(--c-navy); }
.form-check-input:focus { border-color: var(--field-border-focus); box-shadow: var(--shadow-focus); }

/* ---- Tablas (look de referencia Marketplace/Aura: cabecera con superficie sutil,
   etiqueta muted, hover de fila, grid legible y padding cómodo; sin uppercase para
   no romper encabezados largos) ---- */
.table { color: var(--c-ink); --bs-table-bg: transparent; vertical-align: middle; }
.table > thead > tr > th,
.table-dark > thead > tr > th {
  color: var(--c-muted);
  background-color: color-mix(in srgb, var(--c-ink) 4%, transparent);
  font-weight: var(--fw-medium);
  border-bottom: 1px solid var(--c-line-strong);
}
.table-dark { --bs-table-bg: var(--c-navy-black); color: var(--c-white); }
/* Muchas tablas usan .table-dark SIN la clase base .table. El grid se aplica a
   ambas variantes, excepto a .table-borderless. Se dibuja un solo borde por eje
   para que DataTables (border-collapse: separate) no duplique las divisiones. */
.table:not(.table-borderless) > :not(caption) > * > *,
.table-dark:not(.table-borderless) > :not(caption) > * > * {
  border-color: var(--c-line);
  border-style: solid;
  border-width: 0 1px 1px 0;
}
.table:not(.table-borderless) > :not(caption) > * > *:first-child,
.table-dark:not(.table-borderless) > :not(caption) > * > *:first-child {
  border-left-width: 1px;
}
.table:not(.table-borderless) > thead > tr:first-child > *,
.table-dark:not(.table-borderless) > thead > tr:first-child > * {
  border-top-width: 1px;
}
.table-dark > thead > tr > th { border-bottom-color: var(--c-line-strong); }
.table-dark > tbody > tr:hover > * { background-color: color-mix(in srgb, var(--c-white) 6%, transparent); }
.table > :not(caption) > * > *,
.table-dark > :not(caption) > * > * {
  border-bottom-color: var(--c-line);
  padding: .6rem .65rem;
}
/* .table-bordered conserva el mismo grid unificado y sus tokens. */
.table-bordered > :not(caption) > * > * { border-color: var(--c-line); }
/* .table-sm debe seguir compacta (mi padding de arriba no debe inflarla). */
.table-sm > :not(caption) > * > * { padding: .3rem .5rem; }
/* Hover de fila — resalta la fila bajo el cursor (sutil, sirve también sin .table-hover). */
.table > tbody > tr:hover > *,
.table-hover > tbody > tr:hover > * { background-color: color-mix(in srgb, var(--c-ink) 5%, transparent); }

/* FixedColumns de DataTables. La extensión aplica position:sticky y offsets;
   aquí se integra visualmente con el tema oscuro y se garantiza un fondo opaco
   para que las columnas fijadas no transparenten las celdas que pasan por debajo. */
table.dataTable th.dtfc-fixed-left,
table.dataTable th.dtfc-fixed-right {
  z-index: 2;
  background-color: var(--c-surface-3);
  background-clip: padding-box;
}
table.dataTable td.dtfc-fixed-left,
table.dataTable td.dtfc-fixed-right {
  z-index: 1;
  background-color: var(--bs-table-bg, var(--c-surface));
  background-clip: padding-box;
}
table.dataTable tbody tr:hover > td.dtfc-fixed-left,
table.dataTable tbody tr:hover > td.dtfc-fixed-right {
  background-color: color-mix(in srgb, var(--c-white) 6%, var(--bs-table-bg, var(--c-surface)));
}
table.dataTable .dtfc-fixed-left { box-shadow: 1px 0 0 var(--c-line-strong); }
table.dataTable .dtfc-fixed-right { box-shadow: -1px 0 0 var(--c-line-strong); }
.dtfc-left-top-blocker,
.dtfc-left-bottom-blocker,
.dtfc-right-top-blocker,
.dtfc-right-bottom-blocker {
  background-color: var(--c-surface-3) !important;
}

/* ---- Modales ---- */
.modal-content {
  background-color: var(--c-surface); color: var(--c-ink);
  border: 1px solid var(--c-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.modal-header, .modal-footer { border-color: var(--c-line); }

/* ---- Navbar / Footer (shell base; detalle propio en concreto-shell.css) ---- */
.navbar { background-color: var(--c-navy-black); }
.navbar .nav-link { color: rgba(255,255,255,.85); font-weight: var(--fw-medium); }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--main-yellow); }
footer, .app-shell-footer { background-color: var(--c-navy-black); color: rgba(255,255,255,.7); }

/* ---- Badges / utilidades de color ---- */
.badge { border-radius: var(--radius-pill); font-weight: var(--fw-demi); }
.bg-warning { background-color: var(--main-yellow) !important; color: var(--c-navy-black) !important; } /* !important: Bootstrap define .bg-* con !important */
.bg-primary { background-color: var(--c-navy) !important; }
.bg-success { background-color: var(--c-success) !important; }
.bg-danger  { background-color: var(--c-danger)  !important; }
.bg-info    { background-color: var(--c-navy)    !important; }
.text-warning { color: var(--main-yellow) !important; } /* !important: idem utilidades .text-* */
.text-primary { color: var(--c-navy) !important; }
/* En oscuro el navy de .text-primary queda casi invisible sobre superficies navy.
   Como el proyecto es dark-only, lo reasignamos al "primario" de marca (gris celeste),
   visible sobre oscuro. Evita tener que editar cada .text-primary del markup (labels,
   iconos KPI, etc.). Si algún día hay light mode, la regla base (navy) sigue para claro.
   Surgió migrando Cumplimiento (calificar_proveedor tiene decenas de labels .text-primary). */
[data-theme="dark"] .text-primary { color: var(--c-gray-celeste) !important; }
.text-success { color: var(--c-success) !important; }
.text-danger  { color: var(--c-danger)  !important; }

/* ---- Dropdown ---- */
.dropdown-menu {
  background-color: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
.dropdown-item { color: var(--c-ink); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--c-lila); color: var(--c-navy); }

/* ---- Select2 (lib global que carga base_concreto) → superficie del sistema en oscuro ----
   select2-bootstrap-5-theme pinta el control en BLANCO; base_limpia_v2 lo oscurecía por JS,
   base_concreto no. Se re-pinta aquí en CSS, una sola vez para todas las apps migradas.
   !important: el CSS de select2-bootstrap-5-theme se carga DESPUÉS del bridge y fija el fondo
   con la misma especificidad; es el único modo limpio de ganarle. */
.select2-container--bootstrap-5 .select2-selection {
  background-color: var(--c-surface) !important; border-color: var(--field-border) !important; color: var(--c-ink) !important;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--field-border-focus) !important; box-shadow: var(--shadow-focus) !important;
}
.select2-container--bootstrap-5 .select2-selection__rendered { color: var(--c-ink) !important; }
.select2-container--bootstrap-5 .select2-selection__placeholder { color: var(--field-placeholder) !important; }
.select2-container--bootstrap-5 .select2-dropdown,
.select2-dropdown { background-color: var(--c-surface) !important; border-color: var(--c-line) !important; }
.select2-container--bootstrap-5 .select2-results__option { color: var(--c-ink); }
.select2-container--bootstrap-5 .select2-results__option--highlighted,
.select2-container--bootstrap-5 .select2-results__option[aria-selected="true"] {
  background-color: var(--c-navy) !important; color: var(--c-white) !important;
}
.select2-container--bootstrap-5 .select2-search__field { background-color: var(--c-surface) !important; color: var(--c-ink) !important; }
/* multiselect: chips */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
  background-color: var(--c-navy) !important; border-color: var(--c-navy) !important; color: var(--c-white) !important;
}

/* ---- Paginación (Bootstrap .pagination) → tokens. Activo navy, hover lila ----
   Genérico; surgió en Catalogo (panel) pero sirve a cualquier listado paginado. */
.pagination { --bs-pagination-bg: transparent; }
.page-link {
  background-color: var(--c-surface); color: var(--c-ink);
  border: 1px solid var(--c-line);
}
.page-link:hover { background-color: var(--c-lila); color: var(--c-navy); border-color: var(--c-line-strong); }
.page-link:focus { box-shadow: var(--shadow-focus); }
.page-item.active .page-link {
  background-color: var(--c-navy); border-color: var(--c-navy); color: var(--c-white);
}
.page-item.disabled .page-link { background-color: transparent; color: var(--c-muted); border-color: var(--c-line); }

/* ---- Tabs (Bootstrap .nav-tabs) → activo con borde amarillo (firma .c-tabs) ----
   Genérico; surgió en Catalogo (administrar categorías). */
.nav-tabs { border-bottom-color: var(--c-line); }
.nav-tabs .nav-link {
  color: var(--c-ink-soft); border: none; border-bottom: 2px solid transparent;
  border-radius: 0; font-weight: var(--fw-demi);
}
.nav-tabs .nav-link:hover { color: var(--c-ink); border-bottom-color: var(--c-line-strong); }
.nav-tabs .nav-link.active {
  background-color: transparent; color: var(--c-ink);
  border-bottom-color: var(--main-yellow);
}

/* ---- Toast (Bootstrap .toast) → superficie del sistema ----
   Genérico; surgió en Catalogo (gestión de insumos / formulario de categoría). */
.toast {
  background-color: var(--c-surface); color: var(--c-ink);
  border: 1px solid var(--c-line); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
.toast-header { background-color: transparent; color: var(--c-ink); border-bottom-color: var(--c-line); }

/* ---- Legibilidad dark de formularios y modales (genérico) ----
   --field-label (#33424d) no cambia bajo [data-theme=dark] → los .form-label quedaban
   oscuro-sobre-oscuro en cualquier formulario migrado. Y el icono .btn-close de Bootstrap
   es negro → invisible en modales con superficie oscura (mucho markup usa .btn-close a
   secas, sin .btn-close-white). Fix sistémico. Surgió en CatalogoMaestro (modales CRUD). */
[data-theme="dark"] .form-label { color: var(--c-ink-soft); }
[data-theme="dark"] .btn-close {
  /* mismo filtro que usa Bootstrap en .btn-close-white */
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ---- Breadcrumb (Bootstrap .breadcrumb) → tokens, legible en oscuro ----
   Genérico; surgió en CatalogoMaestro (todas sus páginas llevan breadcrumb). */
.breadcrumb-item a { color: var(--c-gray-celeste); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--c-ink); }
.breadcrumb-item.active { color: var(--c-ink-soft); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--c-muted); }

/* ---- Alertas (Bootstrap .alert-*) → tokens del sistema ----
   Los hex de borde/texto (#BFE6CF, #14693F, …) son los mismos que define
   concreto-core.css para .c-alert--*; el sistema no los tokeniza, se espejan tal cual. */
.alert { border-radius: var(--radius-md); border: 1px solid transparent; }
.alert-success { background-color: var(--c-success-bg); border-color: #BFE6CF; color: #14693F; }
.alert-danger  { background-color: var(--c-danger-bg);  border-color: #F2C4C0; color: #9E211A; }
.alert-warning { background-color: var(--c-warning-bg); border-color: #F2DFA0; color: #8A6400; }
.alert-info    { background-color: var(--c-info-bg);    border-color: #C7DBF1; color: var(--c-navy); }