/* ==========================================================================
   CALVEC - personalizaciones propias sobre la plantilla Velok.
   Mantener aqui los ajustes de marca para no tocar los CSS de la plantilla.
   ========================================================================== */

/* ==========================================================================
   DESIGN TOKENS CALVEC  —  "plantilla general" del proyecto.
   Punto UNICO de verdad para colores, tipografia, bordes y sombras de marca.
   Cuando llegue la guia oficial, SOLO se cambian los valores de aqui y todo
   el proyecto se actualiza solo (botones, filtros, badges, inputs, cards...).
   Los valores marcados TODO heredan de Velok/Bootstrap para no romper nada
   hasta tener el dato real. Namespace propio (--calvec-*) para NO pisar los
   tokens --bs-* del theme (que en este theme estan intercambiados).
   ========================================================================== */
:root {
  /* --- Marca (CONFIRMADO) --- */
  --calvec-primary: #7FB900;
  --calvec-primary-hover: #6C9D00;
  --calvec-primary-active: #6C9D00;
  --calvec-primary-subtle: rgba(127, 185, 0, 0.15);

  /* --- Colores semanticos (TODO: confirmar con la guia) --- */
  --calvec-success: #7FB900;
  --calvec-info: #0d6efd;
  --calvec-warning: #fd7e14;
  --calvec-danger: #dc3545;

  /* --- Neutros / texto (TODO: confirmar con la guia) --- */
  --calvec-body-color: var(--bs-body-color);
  --calvec-muted: var(--bs-secondary-color, #6c757d);
  --calvec-border: var(--bs-border-color);
  --calvec-surface: var(--bs-body-bg);
  --calvec-surface-subtle: var(--bs-tertiary-bg, #f8f9fa);

  /* --- Tipografia (TODO: confirmar familia/pesos con la guia) --- */
  --calvec-font-base: var(--bs-body-font-family);
  --calvec-font-weight-normal: 400;
  --calvec-font-weight-medium: 500;
  --calvec-font-weight-bold: 600;

  /* --- Bordes y radios --- */
  --calvec-radius-sm: .25rem;
  --calvec-radius: .5rem;
  --calvec-radius-lg: .75rem;

  /* --- Sombras --- */
  --calvec-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --calvec-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

/* Logo CALVEC dentro del sidebar expandido */
.wrapper .main-nav .logo-box .logo-calvec-sidebar {
  height: auto;
  max-height: 54px;
  max-width: 168px;
  width: 168px;
}

/* Inset del menu para que el recuadro activo no toque los bordes del sidebar */
.wrapper .main-nav .navbar-nav#navbar-nav {
  padding-left: 12px;
  padding-right: 12px;
}

/* Item seleccionado: recuadro relleno del color principal con texto blanco */
.wrapper .main-nav .navbar-nav .menu-item .menu-link.active {
  background-color: var(--calvec-primary);
  border-radius: 8px;
}

.wrapper .main-nav .navbar-nav .menu-item .menu-link.active .nav-text,
.wrapper .main-nav .navbar-nav .menu-item .menu-link.active .menu-arrow {
  color: #fff;
}

.wrapper .main-nav .navbar-nav .menu-item .menu-link.active .nav-icon,
.wrapper .main-nav .navbar-nav .menu-item .menu-link.active .nav-icon svg {
  color: #fff;
  fill: #fff;
  fill-opacity: 0.25;
}

/* Ocultar la barrita lateral que Velok mostraba en el item activo */
.wrapper .main-nav .navbar-nav .menu-item.active .menu-link::before,
.wrapper .main-nav .navbar-nav .menu-item .menu-link.active::before {
  display: none;
}

/* ==========================================================================
   Boton primario CALVEC: mismo estilo que el boton "Iniciar Sesion" del login.
   Verde principal #7FB900, hover/activo en verde oscuro #6C9D00.
   Aplica a TODO el proyecto (cualquier .btn-primary).
   ========================================================================== */
.btn-primary {
  --bs-btn-bg: var(--calvec-primary);
  --bs-btn-border-color: var(--calvec-primary);
  --bs-btn-hover-bg: var(--calvec-primary-hover);
  --bs-btn-hover-border-color: var(--calvec-primary-hover);
  --bs-btn-active-bg: var(--calvec-primary-active);
  --bs-btn-active-border-color: var(--calvec-primary-active);
  --bs-btn-disabled-bg: var(--calvec-primary);
  --bs-btn-disabled-border-color: var(--calvec-primary);
}

/* Boton outline primario (ej. "Limpiar", "Modificar grupos") en verde de marca. */
.btn-outline-primary {
  --bs-btn-color: var(--calvec-primary);
  --bs-btn-border-color: var(--calvec-primary);
  --bs-btn-hover-bg: var(--calvec-primary);
  --bs-btn-hover-border-color: var(--calvec-primary);
  --bs-btn-active-bg: var(--calvec-primary-active);
  --bs-btn-active-border-color: var(--calvec-primary-active);
}

/* ==========================================================================
   Badges de estatus de Obra: clases propias con color fijo cada una, sin
   reutilizar success/primary/danger de Bootstrap. Este theme tiene esos
   tokens intercambiados (--bs-success es azul, --bs-primary es el verde de
   marca) y reutilizarlos aqui causaba que cambiar uno rompiera al otro
   (ej. validacion de formularios vs. badge "Terminada"). Cada estatus queda
   100% independiente.
   ========================================================================== */
.badge-estatus-activa {
  background-color: rgba(127, 185, 0, 0.15);
  color: var(--calvec-primary);
}
.badge-estatus-terminada {
  background-color: rgba(13, 110, 253, 0.15);
  color: #0d6efd;
}
.badge-estatus-suspendida {
  background-color: rgba(253, 126, 20, 0.15);
  color: #fd7e14;
}
.badge-estatus-cancelada {
  background-color: rgba(220, 53, 69, 0.15);
  color: #dc3545;
}

/* ==========================================================================
   Feedback de formularios (was-validated + :valid) en verde real. Se
   sobreescribe directo (sin tocar --bs-success/--bs-form-valid-border-color,
   que ya usamos para el badge "Terminada"=azul) para no acoplar ambos temas.
   ========================================================================== */
.was-validated .form-control:valid,
.was-validated .form-control:valid:focus,
.was-validated .form-select:valid,
.was-validated .form-select:valid:focus {
  border-color: var(--calvec-primary);
}
.was-validated .form-control:valid {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%237FB900' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/%3E%3C/svg%3E");
}
.was-validated .form-control:valid:focus,
.was-validated .form-select:valid:focus {
  box-shadow: 0 0 0 .15rem rgba(127, 185, 0, .25);
}
.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"] {
  --bs-form-select-bg-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%237FB900' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Scroll horizontal mas delgado y discreto para tablas (.table-responsive,
   incluye el wrapper de DataTables) — el scrollbar nativo del navegador se
   ve muy pesado/feo cuando la tabla es mas ancha que su contenedor.
   ========================================================================== */
.table-responsive,
.dataTables_scrollBody {
  scrollbar-width: thin;
}
.table-responsive::-webkit-scrollbar,
.dataTables_scrollBody::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
.table-responsive::-webkit-scrollbar-track,
.dataTables_scrollBody::-webkit-scrollbar-track {
  background: transparent;
}
.table-responsive::-webkit-scrollbar-thumb,
.dataTables_scrollBody::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

/* DataTables reserva espacio extra en cada encabezado ordenable para su
   icono de flechas (esto no existia en la tabla hecha a mano de antes, y es
   lo que ahora empuja el ancho total a desbordar). Se reduce ese espacio. */
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc {
  padding-right: 18px !important;
  background-position: right 2px center !important;
}

/* Los encabezados centrados (.text-center, p. ej. "Estatus") quedan
   visualmente desplazados a la izquierda por el padding-right de arriba
   (reservado para el icono de orden). Se agrega el mismo padding a la
   izquierda para que el texto quede realmente centrado. */
table.dataTable thead > tr > th.text-center.sorting,
table.dataTable thead > tr > th.text-center.sorting_asc,
table.dataTable thead > tr > th.text-center.sorting_desc {
  padding-left: 18px !important;
}

/* Estado localizado al recargar los campos del generador por unidad. */
.generator-unit-card {
  position: relative;
}

.generator-unit-card > .card-body,
.generator-unit-card > .card-footer {
  transition: opacity 160ms cubic-bezier(.23, 1, .32, 1);
}

.generator-unit-card.is-unit-loading > .card-body,
.generator-unit-card.is-unit-loading > .card-footer {
  opacity: .42;
}

.generator-unit-loading {
  align-items: center;
  background: rgba(var(--bs-body-bg-rgb), .68);
  border-radius: inherit;
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 160ms cubic-bezier(.23, 1, .32, 1), visibility 0s linear 160ms;
  visibility: hidden;
  z-index: 5;
}

.generator-unit-card.is-unit-loading > .generator-unit-loading {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
  visibility: visible;
}

.generator-unit-loading__message {
  align-items: center;
  background: var(--calvec-surface);
  border: 1px solid var(--calvec-border);
  border-radius: var(--calvec-radius);
  box-shadow: var(--calvec-shadow-sm);
  color: var(--calvec-body-color);
  display: flex;
  font-weight: var(--calvec-font-weight-medium);
  gap: .625rem;
  padding: .75rem 1rem;
}

.generator-unit-loading__message .spinner-border {
  color: var(--calvec-primary);
}

@media (prefers-reduced-motion: reduce) {
  .generator-unit-card > .card-body,
  .generator-unit-card > .card-footer,
  .generator-unit-loading {
    transition: none;
  }

  .generator-unit-loading__message .spinner-border {
    animation: none;
  }
}

/* ==========================================================================
   Select2 (tema bootstrap-5) calcado al look de .form-select de Velok —
   el tema generico de Select2 no conoce el font-size/padding/radio propios
   de este theme, asi que se igualan a mano para que no se note la diferencia.
   ========================================================================== */
.select2-container--bootstrap-5 .select2-selection {
  border: var(--bs-border-width) solid var(--bs-input-border-color);
  border-radius: .25rem;
  min-height: calc(1.5em + 1rem + 2px);
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  padding: .5rem 1rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--bs-body-color);
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
  height: calc(1.5em + 1rem);
}
/* Igual que .form-select:focus del theme: solo cambia el borde, SIN glow
   (el theme nunca usa box-shadow en foco, ver app.min.css). */
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--bs-input-focus-border-color);
  box-shadow: none;
  outline: 0;
}
/* OJO: el dropdown de Select2 (.select2-dropdown, incluye la caja de
   busqueda) NO vive dentro de .select2-container — Select2 lo agrega como
   hijo de <body> (o de dropdownParent), separado del select cerrado. Un
   selector que exija .select2-container como ancestro de esto NUNCA hace
   match — por eso estas reglas van sueltas, sin ese prefijo. */
.select2-dropdown {
  font-size: .8125rem;
}
.select2-search__field {
  border: var(--bs-border-width) solid var(--bs-input-border-color);
  border-radius: .25rem;
  font-size: .8125rem;
  outline: none;
}
.select2-search__field:focus {
  border-color: var(--bs-input-focus-border-color);
  box-shadow: none;
  outline: none;
}

/* ==========================================================================
   Select2 — modo oscuro.
   Cuando Velok pone data-bs-theme="dark" en <html>, las variables Bootstrap
   cambian de valor, pero select2-bootstrap-5-theme usa algunos colores
   hardcodeados. Se sobreescriben aqui para que el select siga al tema.
   ========================================================================== */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__placeholder {
  color: var(--bs-secondary-color);
}
/* El dropdown se agrega como hijo directo de <body> — pero <body> vive dentro
   de <html data-bs-theme="dark">, así que este selector sí hace match. */
[data-bs-theme="dark"] .select2-dropdown {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .select2-search__field {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .select2-results__option {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .select2-results__option--highlighted[aria-selected],
[data-bs-theme="dark"] .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--bs-primary);
  color: #fff;
}
[data-bs-theme="dark"] .select2-results__option[aria-selected="true"] {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

/* Requisiciones: la calculadora comparte el flujo de la pagina sin cubrir el
   formulario ni desmontarlo al alternar su visibilidad. */
.requisition-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.requisition-workspace.is-calculator-open {
  grid-template-columns: minmax(0, 1fr) minmax(24rem, 42%);
}

.requisition-workspace__main,
.requisition-workspace__calculator {
  min-width: 0;
}

.requisition-workspace__calculator[hidden] {
  display: none !important;
}

.requisition-workspace__calculator {
  max-height: calc(100vh - 8rem);
  overflow: hidden;
  position: sticky;
  top: 1rem;
}

.requisition-workspace__calculator .card-body {
  min-height: 0;
  overflow: auto;
}

.requisition-workspace__calculator-frame {
  min-height: 32rem;
}

/* Requisiciones: la descripcion de la linea usa una columna compacta; en el
   formulario su captura y lectura se hacen desde un modal con preview de dos
   lineas, y en el detalle de solo lectura se ensancha a la misma medida. */
.col-description {
  width: 22%;
}

/* La tabla de lineas conserva anchos legibles para codigos, unidad y
   cantidades; cuando el espacio falta, .table-responsive activa el scroll
   horizontal en lugar de comprimir las columnas. */
.requisition-workspace .lines-table {
  min-width: 1500px;
}

/* En macOS las barras de scroll overlay estan ocultas hasta desplazar, y sin
   indicacion visual el usuario no descubre las columnas recortadas: forzamos
   una barra siempre visible en tonos piedra. Chrome/Safari usan la variante
   webkit; Firefox (que no la soporta) recibe scrollbar-color. Las propiedades
   estandar no se declaran en conjunto: desactivarian las reglas webkit. */
.requisition-workspace .table-responsive {
  overflow-x: auto;
}

@supports selector(::-webkit-scrollbar) {
  /* Anula el scrollbar-width: thin global de arriba: en Chrome 121+ la
     propiedad estandar desactiva las reglas ::-webkit-scrollbar y en macOS
     produce una barra overlay auto-oculta que esconde el desplazamiento. */
  .requisition-workspace .table-responsive {
    scrollbar-width: auto;
  }

  .requisition-workspace .table-responsive::-webkit-scrollbar {
    height: 10px;
    -webkit-appearance: none;
  }

  .requisition-workspace .table-responsive::-webkit-scrollbar-thumb {
    background: #b8b6b3;
    border-radius: 5px;
  }

  .requisition-workspace .table-responsive::-webkit-scrollbar-thumb:hover {
    background: #585554;
  }

  .requisition-workspace .table-responsive::-webkit-scrollbar-track {
    background: #f1f0ef;
    border-radius: 5px;
  }
}

@supports not selector(::-webkit-scrollbar) {
  .requisition-workspace .table-responsive {
    scrollbar-width: thin;
    scrollbar-color: #b8b6b3 transparent;
  }
}

.requisition-workspace .description-preview {
  display: none;
}

.description-modal-mode .requisition-workspace td.col-description
textarea[name$="-description"] {
  display: none;
}

.description-modal-mode .requisition-workspace .description-preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: pre-line;
  min-height: 3em;
  margin-bottom: 0;
}

.description-modal-mode .requisition-workspace .description-preview.is-empty {
  color: var(--bs-secondary-color, #6c757c);
  font-style: italic;
}

@media (max-width: 1199.98px) {
  .requisition-workspace.is-calculator-open {
    grid-template-columns: minmax(0, 1fr);
  }

  .requisition-workspace__calculator {
    max-height: none;
    position: static;
  }
}