/*
 * sigex.css — SIGEX Design Foundation for Adquisiciones
 * Scopeado bajo .sigex-shell para no contaminar otras apps.
 * Tokens de diseño: ver design_handoff_expedientes/README.md
 */

/* ============================================================
   GOOGLE FONTS: Public Sans ya cargado por base_adquisicion.html
   ============================================================ */

/* ============================================================
   VARIABLES DE DISEÑO (CSS Custom Properties)
   ============================================================ */
.sigex-shell {
  /* Paleta institucional */
  --sigex-blue:         #0b4dc2;
  --sigex-blue-hover:   #033a9f;
  --sigex-gold:         #F2C230;

  /* Fondos */
  --sigex-bg-app:       #eef1f6;
  --sigex-bg-form:      #dde4ec;
  --sigex-bg-card:      #ffffff;
  --sigex-bg-input:     #f6f8fb;

  /* Bordes */
  --sigex-border-card:  #e4e9f2;
  --sigex-border-form:  #cdd8e6;
  --sigex-border-input: #cbd5e1;
  --sigex-border-form-input: #c2cee0;
  --sigex-divider:      #eef1f6;

  /* Textos */
  --sigex-text:         #1f2937;
  --sigex-text-navy:    #0f2c5c;
  --sigex-text-muted:   #64748b;
  --sigex-text-muted2:  #94a3b8;
  --sigex-text-label:   #334155;
  --sigex-text-label2:  #475569;

  /* Tablas */
  --sigex-table-head-bg:  #f7f9fc;
  --sigex-row-hover:      #f3f7ff;

  /* Navy sidebar */
  --sigex-navy-start:   #1a2742;
  --sigex-navy-end:     #0e1726;
  --sigex-nav-text:     #aebdd6;
  --sigex-nav-section:  #7089bd;

  /* Radios */
  --sigex-r-input:  8px;
  --sigex-r-btn:    9px;
  --sigex-r-card:   12px;
  --sigex-r-modal:  16px;
  --sigex-r-badge:  20px;

  /* Sombras */
  --sigex-shadow-card:   0 1px 2px rgba(15,30,60,.04);
  --sigex-shadow-btn:    0 2px 6px rgba(11,77,194,.28);
  --sigex-shadow-kebab:  0 12px 32px rgba(15,30,60,.18);
  --sigex-shadow-modal:  0 24px 60px rgba(8,21,48,.4);

  /* Layout */
  --sigex-sidebar-w: 250px;
  --sigex-topbar-h:  64px;
  /* Carril de la barra de scroll del menú. Lo reserva `.sigex-nav` y lo
     compensan las barras fijas del sidebar (marca, buscador, pie) para que
     todo caiga en la misma vertical. */
  --sigex-nav-scroll: 8px;

  /* NOMBRES ALTERNATIVOS QUE APARECIERON EN LAS PLANTILLAS.
     Estos tres nunca estuvieron definidos en ninguna hoja (barrido del
     08-09-2026: 217 usos sin fallback en 65 plantillas), asi que su var()
     no resolvia y la declaracion caia a su valor inicial: `color` heredaba
     -- por eso no se notaba -- y todo `border-bottom` que los usa
     simplemente NO SE PINTA. Van como ALIAS y no como colores nuevos: el
     valor no se inventa, lo declararon los propios usos que si traen
     fallback (9 unanimes `var(--sigex-accent,#0b4dc2)`, uno
     `var(--sigex-border, #e4e9f2)`), y `--sigex-text-main` toma
     `--sigex-text` porque es lo que sus 25 usos heredan HOY del shell: asi
     la publicacion no cambia un pixel de lo que ya se ve bien. Siendo alias
     y no copias, un cambio del azul institucional los sigue arrastrando. */
  --sigex-accent:    var(--sigex-blue);
  --sigex-border:    var(--sigex-border-card);
  --sigex-text-main: var(--sigex-text);
}

/* ============================================================
   SHELL RAÍZ — neutraliza el fondo oscuro heredado del .page-wrapper
   ============================================================ */
.sigex-shell {
  display: flex;
  min-height: 100vh;
  width: 100%;
  background: var(--sigex-bg-app);
  font-family: 'Public Sans', system-ui, -apple-system, sans-serif;
  color: var(--sigex-text);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

.sigex-shell *,
.sigex-shell *::before,
.sigex-shell *::after {
  box-sizing: border-box;
}

/* Override: asegura que el wrapper global no imprima su fondo oscuro */
.page-wrapper.chiller-theme .sigex-shell,
.page-wrapper .sigex-shell {
  background: var(--sigex-bg-app);
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sigex-sidebar {
  width: var(--sigex-sidebar-w);
  flex: none;
  background: linear-gradient(185deg, var(--sigex-navy-start) 0%, var(--sigex-navy-end) 100%);
  color: var(--sigex-nav-text);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow: hidden;
}

/* Bloque de marca */
.sigex-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  flex: none;
}

.sigex-brand-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--sigex-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #16213a;
  font-size: 19px;
  flex: none;
}

.sigex-brand-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .5px;
  color: #fff;
  line-height: 1;
}

.sigex-brand-sub {
  font-size: 10px;
  letter-spacing: 1.2px;
  color: #90a6d4;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Nav */
.sigex-nav {
  padding: 14px 0;
  flex: 1;
  overflow-y: auto;
  /* El menú es lo único que scrollea dentro del sidebar; la marca, el buscador
     y el pie son barras fijas fuera del scroller.

     `scrollbar-gutter: stable` reserva el carril SIEMPRE, tenga o no scroll:
     sin él el menú se encoge de golpe al desplegar una sección (aparece la
     barra) y el pie no se puede alinear con una compensación fija. */
  scrollbar-gutter: stable;
  /* Llegar al final del menú no arrastra el scroll de la página. */
  overscroll-behavior: contain;
  /* El contenido corre por debajo de la marca y del pie: sin esta señal, el
     ítem que se asoma a medias hace que las tres piezas se lean como bloques
     sueltos en vez de una sola columna. */
  box-shadow: inset 0 7px 8px -8px rgba(0,0,0,.65),
              inset 0 -7px 8px -8px rgba(0,0,0,.65);
}

/* Barra de scroll del menú, integrada al navy — con las propiedades ESTÁNDAR
   (`scrollbar-width`/`scrollbar-color`), sin pseudo-elementos ::-webkit-* y
   sin @supports. Es la TERCERA versión de este bloque y el porqué importa:

   1) La primera estilaba `::-webkit-scrollbar*` y dejaba el estándar para un
      `@supports not selector(::-webkit-scrollbar)` «para Firefox». Ese guard
      es FALSO en el Firefox real: por el estándar de compatibilidad WHATWG
      (compat.spec.whatwg.org, en Firefox desde la v63), todo pseudo-elemento
      `-webkit-` desconocido parsea como VÁLIDO aunque no haga nada — así que
      `selector(::-webkit-scrollbar)` da true, el `not` da false y el respaldo
      no aplica nunca: Firefox quedaba con la barra del sistema, clara y ancha
      (~15px la clásica de Windows), la franja que el usuario reportó tres
      veces. OJO: el Firefox de Playwright NO lo reproduce — trae esa compat
      apagada (hasta `::-webkit-input-placeholder` le parsea inválido), o sea
      que ahí el guard sí aplica y todo se ve bien; el headless miente.

   2) Además los pseudos webkit empataban en especificidad con el
      `.sigex-shell ::-webkit-scrollbar-thumb` global del bloque «SCROLLBAR
      PERSONALIZADO» y perdían por orden: en Chrome el pulgar salía gris claro.

   Con el estándar directo las dos trampas desaparecen: Chrome ≥121 y Firefox
   64+ lo soportan igual, y en Chrome `scrollbar-width` declarado en el
   elemento ANULA los pseudos webkit que lo alcancen (medido en Chrome 151),
   así que la regla global del shell ya no puede pintar este carril. Safari
   ignora ambas y usa su overlay de macOS, que no ocupa ancho ni pinta franja.

   El carril `thin` mide ~8-9px según el motor; `--sigex-nav-scroll` (8px) es
   la mejor aproximación única para la compensación del pie — un desfase de
   ±1px es invisible, los ~7px de la clásica de Windows no lo eran. */
.sigex-nav {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.28) transparent;
}

.sigex-nav:hover {
  scrollbar-color: rgba(255,255,255,.40) transparent;
}

.sigex-nav-section {
  padding: 6px 22px 8px;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sigex-nav-section);
  margin-top: 6px;
}

.sigex-nav-section:first-child {
  margin-top: 0;
}

.sigex-nav-link {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 22px;
  color: #aebfe1;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.sigex-nav-link:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
  text-decoration: none;
}

.sigex-nav-link.active {
  color: #fff;
  font-weight: 600;
  background: rgba(255,255,255,.1);
  border-left-color: var(--sigex-gold);
}

.sigex-nav-link i {
  width: 18px;
  text-align: center;
  font-size: 15px;
  flex: none;
}

/* Grupo colapsable del nav (p.ej. «Decretos»): toggle + submenú indentado */
.sigex-nav-group-toggle {
  width: 100%;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  font-family: inherit;
  text-align: left;
}
.sigex-nav-caret {
  margin-left: auto;
  width: auto !important;
  font-size: 11px !important;
  transition: transform .18s;
}
.sigex-nav-group.open .sigex-nav-caret { transform: rotate(180deg); }
.sigex-nav-sub { display: none; }
.sigex-nav-group.open .sigex-nav-sub { display: block; }
.sigex-nav-sublink {
  display: block;
  padding: 9px 22px 9px 53px;
  color: #93a4c6;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s;
}
.sigex-nav-sublink:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
  text-decoration: none;
}
.sigex-nav-sublink.active {
  color: #fff;
  font-weight: 600;
  background: rgba(255,255,255,.1);
  border-left-color: var(--sigex-gold);
}

/* Pie del sidebar */
.sigex-sidebar-footer {
  /* El pie está FUERA del scroller, así que por sí solo ocuparía los 250px
     completos mientras el menú, de arriba, se queda en 242: los 8px del carril
     de la barra de scroll. Ese desfase es el defecto reportado — el pie
     «sobrepasa el ancho hasta el scroll vertical» del menú.

     Se cierra en DOS planos y hacen falta los dos:
     - `margin-right` saca al pie del carril, así su CAJA (y con ella la línea
       divisoria de arriba) termina donde termina la columna del menú, no 8px
       más a la derecha;
     - `padding` de 22px, el mismo margen lateral que un ítem del menú, para
       que el contenido siga cayendo en la misma vertical que los íconos y los
       chevrons. Sumados dan los 30px de antes: los botones NO se mueven, lo
       único que cambia es dónde corta el borde. */
  margin-right: var(--sigex-nav-scroll);
  padding: 14px 22px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  gap: 11px;
  flex: none;
}

.sigex-sidebar-footer-info {
  flex: 1;
  min-width: 0;
}

.sigex-sidebar-footer-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sigex-sidebar-footer-role {
  font-size: 11px;
  color: #90a6d4;
}

.sigex-sidebar-footer-signout {
  color: #90a6d4;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
  transition: color .15s;
}

.sigex-sidebar-footer-signout:hover {
  color: #fff;
}

/* ============================================================
   COLUMNA DERECHA (topbar + contenido)
   ============================================================ */
.sigex-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ============================================================
   TOPBAR
   ============================================================ */
.sigex-topbar {
  height: var(--sigex-topbar-h);
  flex: none;
  background: #fff;
  border-bottom: 1px solid var(--sigex-border-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  z-index: 100;
}

.sigex-breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--sigex-text-muted2);
}

.sigex-breadcrumb a {
  color: var(--sigex-text-muted2);
  text-decoration: none;
}

.sigex-breadcrumb a:hover {
  color: var(--sigex-blue);
}

.sigex-breadcrumb .sep {
  font-size: 12px;
}

.sigex-breadcrumb .crumb-active {
  color: var(--sigex-text-label);
  font-weight: 600;
}

.sigex-topbar-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Buscador topbar */
.sigex-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.sigex-search-wrap .sigex-search-icon {
  position: absolute;
  left: 13px;
  color: #9aa7bd;
  font-size: 13px;
  pointer-events: none;
}

/* Especificidad (.sigex-shell .sigex-search-wrap .sigex-search-input) = (0,3,0)
   para ganarle a la regla global de inputs (0,2,1) que si no pisa el padding-left
   y el texto se solapa con la lupa. */
.sigex-shell .sigex-search-wrap .sigex-search-input {
  border: 1px solid #dde4ec;
  background: var(--sigex-bg-input);
  border-radius: var(--sigex-r-btn);
  padding: 9px 14px 9px 34px;
  font-size: 13.5px;
  width: 250px;
  color: var(--sigex-text);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s, background .15s;
  outline: none;
}

.sigex-shell .sigex-search-wrap .sigex-search-input:focus {
  border-color: var(--sigex-blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(11,77,194,.13);
}

/* Campana */
.sigex-bell {
  position: relative;
  cursor: pointer;
  color: #475569;
  font-size: 18px;
  line-height: 1;
}

.sigex-bell-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 9px;
  height: 9px;
  background: var(--sigex-gold);
  border: 2px solid #fff;
  border-radius: 50%;
}

/* Separador topbar */
.sigex-topbar-sep {
  width: 1px;
  height: 28px;
  background: var(--sigex-border-card);
}

/* Avatar topbar */
.sigex-avatar-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}

.sigex-avatar {
  border-radius: 50%;
  background: #16213a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex: none;
}

.sigex-avatar-sm {
  width: 34px;
  height: 34px;
  font-size: 13px;
}

.sigex-avatar-md {
  width: 38px;
  height: 38px;
  font-size: 14px;
  background: var(--sigex-gold);
  color: #16213a;
}

/* ============================================================
   ÁREA DE CONTENIDO
   ============================================================ */
.sigex-content-area {
  flex: 1;
  overflow-y: auto;
  background: var(--sigex-bg-app);
}

.sigex-content {
  padding: 30px 32px 48px;
}

/* ============================================================
   TIPOGRAFÍA
   ============================================================ */
.sigex-shell h1,
.sigex-h1 {
  font-size: 25px;
  font-weight: 800;
  color: var(--sigex-text-navy);
  margin: 0;
  letter-spacing: -.3px;
  font-family: 'Public Sans', system-ui, sans-serif;
}

.sigex-subtitle {
  margin: 6px 0 0;
  color: var(--sigex-text-muted);
  font-size: 14px;
}

.sigex-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--sigex-text-navy);
}

.sigex-section-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--sigex-text-muted2);
}

/* ============================================================
   TARJETAS
   ============================================================ */
.sigex-card {
  background: var(--sigex-bg-card);
  border: 1px solid var(--sigex-border-card);
  border-radius: var(--sigex-r-card);
  box-shadow: var(--sigex-shadow-card);
}

.sigex-card-body {
  padding: 22px 24px;
}

.sigex-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--sigex-divider);
}

.sigex-card-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #e7efff;
  color: var(--sigex-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex: none;
}

/* ============================================================
   BOTONES — overrides Bootstrap, scopeados a .sigex-shell
   ============================================================ */
.sigex-shell .btn-primary,
.sigex-shell .btn-sigex-primary {
  background: var(--sigex-blue) !important;
  border-color: var(--sigex-blue) !important;
  color: #fff !important;
  border-radius: var(--sigex-r-btn);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--sigex-shadow-btn);
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background .15s;
  font-family: inherit;
}

.sigex-shell .btn-primary:hover,
.sigex-shell .btn-sigex-primary:hover {
  background: var(--sigex-blue-hover) !important;
  border-color: var(--sigex-blue-hover) !important;
}

.sigex-shell .btn-primary:focus,
.sigex-shell .btn-sigex-primary:focus {
  box-shadow: var(--sigex-shadow-btn), 0 0 0 3px rgba(11,77,194,.2) !important;
}

.sigex-shell .btn-outline-secondary,
.sigex-shell .btn-sigex-outline {
  background: #fff !important;
  border: 1px solid var(--sigex-border-input) !important;
  color: var(--sigex-text-label) !important;
  border-radius: var(--sigex-r-btn);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
  font-family: inherit;
}

.sigex-shell .btn-outline-secondary:hover,
.sigex-shell .btn-sigex-outline:hover {
  border-color: var(--sigex-blue) !important;
  color: var(--sigex-blue) !important;
  background: #fff !important;
}

.sigex-shell .btn-danger,
.sigex-shell .btn-sigex-danger {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
  border-radius: var(--sigex-r-btn);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background .15s;
  font-family: inherit;
}

.sigex-shell .btn-danger:hover,
.sigex-shell .btn-sigex-danger:hover {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
}

/* Botón de icono cuadrado 34px */
.sigex-shell .btn-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--sigex-r-input);
  border: 1px solid var(--sigex-border-card);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  font-size: 14px;
  transition: background .15s, border-color .15s;
}

/* Foco: sin el anillo negro del user-agent que queda al volver el foco desde un
   modal (Bootstrap devuelve el foco al botón que lo abrió). Se conserva un anillo
   visible SOLO en navegación por teclado (:focus-visible), por accesibilidad. */
.sigex-shell .btn-icon:focus { outline: none; box-shadow: none; }
.sigex-shell .btn-icon:focus-visible {
  outline: 2px solid var(--sigex-blue);
  outline-offset: 1px;
}

.sigex-shell .btn-icon-blue { color: var(--sigex-blue); }
.sigex-shell .btn-icon-danger { color: #dc2626; border-color: #f6dada; }

/* GLOBAL — botón de ELIMINAR (basurero) en formsets/líneas: SIEMPRE caja con ícono
   rojo, como el resto de botones-ícono. :has() apunta SOLO a los .btn-icon que
   contienen un basurero, así no afecta otros .btn-icon (descargar, etc.). El
   !important gana sobre estilos inline heredados (border:none / background:none /
   color) que traían algunas plantillas (p.ej. la línea de orden de compra). Cubre
   filas estáticas y las que agrega jquery.formset (deleteCssClass:'btn-icon' +
   deleteText basurero). */
.sigex-shell .btn-icon:has(.fa-trash-o),
.sigex-shell .btn-icon:has(.fa-trash) {
  color: #dc2626 !important;
  border: 1px solid #f6dada !important;
  background: #fff !important;
}
.sigex-shell .btn-icon:has(.fa-trash-o):hover,
.sigex-shell .btn-icon:has(.fa-trash):hover {
  background: #fdecea !important;
  border-color: #dc2626 !important;
}

/* ============================================================
   INPUTS — overrides Bootstrap, scopeados
   ============================================================ */
.sigex-shell .form-control,
.sigex-shell input[type="text"],
.sigex-shell input[type="email"],
.sigex-shell input[type="number"],
.sigex-shell input[type="date"],
.sigex-shell input[type="password"],
.sigex-shell textarea,
.sigex-shell select {
  border-radius: var(--sigex-r-input);
  border: 1px solid var(--sigex-border-input);
  padding: 10px 12px;
  font-size: 14px;
  color: var(--sigex-text);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}

.sigex-shell .form-control:focus,
.sigex-shell input[type="text"]:focus,
.sigex-shell input[type="email"]:focus,
.sigex-shell input[type="number"]:focus,
.sigex-shell input[type="date"]:focus,
.sigex-shell input[type="password"]:focus,
.sigex-shell textarea:focus,
.sigex-shell select:focus {
  border-color: var(--sigex-blue);
  box-shadow: 0 0 0 3px rgba(11,77,194,.15);
  outline: none;
}

/* Campos de archivo: misma caja con borde que el resto de form-control.
   Solicitud usa .form-control (ya enmarcado); aquí unificamos TODO
   input[type=file] del shell — sin importar si trae .form-control o
   .form-control-file — para que CUALQUIER campo de archivo quede envuelto
   con la línea, igual que en la solicitud de compra. */
.sigex-shell input[type="file"] {
  display: block;
  width: 100%;
  border-radius: var(--sigex-r-input);
  border: 1px solid var(--sigex-border-input);
  padding: 10px 12px;
  font-size: 14px;
  color: var(--sigex-text);
  background: #fff;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.sigex-shell input[type="file"]:focus,
.sigex-shell input[type="file"]:focus-within {
  border-color: var(--sigex-blue);
  box-shadow: 0 0 0 3px rgba(11,77,194,.15);
  outline: none;
}

/* Labels */
.sigex-shell label,
.sigex-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sigex-text-label);
  display: block;
  margin-bottom: 5px;
}

.sigex-label-required::after {
  content: ' *';
  color: #dc2626;
}

/* ============================================================
   TABLA
   ============================================================ */
.sigex-shell .sigex-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Public Sans', system-ui, sans-serif;
}

.sigex-shell .sigex-table thead th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--sigex-text-muted);
  background: var(--sigex-table-head-bg);
  padding: 13px 18px;
  border-bottom: 1px solid var(--sigex-border-card);
  white-space: nowrap;
}

.sigex-shell .sigex-table tbody td {
  padding: 15px 18px;
  font-size: 14px;
  border-bottom: 1px solid var(--sigex-divider);
  vertical-align: middle;
}

.sigex-shell .sigex-table tbody tr:hover td {
  background: var(--sigex-row-hover);
}

/* ============================================================
   BADGES DE ESTADO
   ============================================================ */
.sigex-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--sigex-r-badge);
  font-size: 12px;
  font-weight: 700;
}

.sigex-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}

.sigex-badge-abierto {
  background: #e7efff;
  color: #0b4dc2;
}
.sigex-badge-abierto::before { background: #0b4dc2; }

.sigex-badge-tramite {
  background: #fdf3d3;
  color: #8a6d00;
}
.sigex-badge-tramite::before { background: var(--sigex-gold); }

.sigex-badge-observado {
  background: #fdecec;
  color: #c0392b;
}
.sigex-badge-observado::before { background: #dc2626; }

.sigex-badge-cerrado {
  background: #e6f6ec;
  color: #1d8a4e;
}
.sigex-badge-cerrado::before { background: #22a85c; }

.sigex-badge-archivado {
  background: var(--sigex-bg-app);
  color: var(--sigex-text-muted);
}
.sigex-badge-archivado::before { background: var(--sigex-text-muted2); }

/* ============================================================
   BADGES DE PRIORIDAD
   ============================================================ */
.sigex-priority {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
}
.sigex-priority-alta { color: #dc2626; }
.sigex-priority-media { color: #c08a00; }
.sigex-priority-baja { color: #1d8a4e; }

/* ============================================================
   TARJETAS PLACEHOLDER / WELCOME
   ============================================================ */
.sigex-welcome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.sigex-welcome-card {
  background: var(--sigex-bg-card);
  border: 1px solid var(--sigex-border-card);
  border-radius: var(--sigex-r-card);
  box-shadow: var(--sigex-shadow-card);
  padding: 22px 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: box-shadow .15s;
  text-decoration: none;
  color: inherit;
}

.sigex-welcome-card:hover {
  box-shadow: 0 4px 16px rgba(11,77,194,.10);
  text-decoration: none;
  color: inherit;
}

.sigex-welcome-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #e7efff;
  color: var(--sigex-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex: none;
}

.sigex-welcome-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--sigex-text-navy);
  margin: 0 0 4px;
}

.sigex-welcome-card-desc {
  font-size: 13px;
  color: var(--sigex-text-muted);
  margin: 0;
}

/* ============================================================
   CABECERA DE PÁGINA (h1 + botones de acción)
   ============================================================ */
.sigex-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.sigex-page-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* ============================================================
   PAGINACIÓN
   ============================================================ */
.sigex-pagination {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sigex-page-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--sigex-r-input);
  border: 1px solid var(--sigex-border-card);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--sigex-text-label);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}

.sigex-page-btn:hover {
  border-color: var(--sigex-blue);
  color: var(--sigex-blue);
}

.sigex-page-btn.active {
  background: var(--sigex-blue);
  border-color: var(--sigex-blue);
  color: #fff;
}

/* ============================================================
   MODAL DE ELIMINACIÓN
   ============================================================ */
.sigex-shell .modal-content {
  border-radius: var(--sigex-r-modal);
  border: none;
  box-shadow: var(--sigex-shadow-modal);
}

.sigex-modal-danger-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fdecec;
  color: #dc2626;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin: 0 auto 16px;
}

/* Gemela de la anterior en tono ámbar, para modales de AVISO (no hay nada que
   destruir, solo una acción que no corresponde). Ej.: "el acta de recepción
   CENABAST solo se emite con factura". */
.sigex-modal-warn-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff7e6;
  color: #b45309;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin: 0 auto 16px;
}

/* ============================================================
   FILTER PANEL PLEGABLE
   ============================================================ */
.sigex-filter-panel {
  background: var(--sigex-bg-card);
  border: 1px solid var(--sigex-border-card);
  border-radius: var(--sigex-r-card);
  margin-bottom: 22px;
  box-shadow: var(--sigex-shadow-card);
  overflow: hidden;
}

.sigex-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
}

.sigex-filter-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--sigex-text-navy);
}

.sigex-filter-body {
  padding: 4px 20px 20px;
  border-top: 1px solid var(--sigex-divider);
}

.sigex-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.sigex-filter-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--sigex-divider);
}

/* Chevron animado */
.sigex-chevron {
  color: var(--sigex-text-muted);
  font-size: 18px;
  transition: transform .2s;
}

.sigex-chevron.open {
  transform: rotate(180deg);
}

/* ============================================================
   KEBAB / DROPDOWN ACCIONES
   ============================================================ */
.sigex-shell .sigex-kebab-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--sigex-r-input);
  border: 1px solid var(--sigex-border-card);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--sigex-text-muted);
  transition: background .15s;
}

.sigex-shell .sigex-kebab-btn:hover {
  background: var(--sigex-bg-app);
}

.sigex-shell .sigex-dropdown-menu {
  min-width: 178px;
  border-radius: 11px;
  border: 1px solid var(--sigex-border-card);
  box-shadow: var(--sigex-shadow-kebab);
  padding: 6px 0;
  /* El menú abierto lo pone en `position: fixed` el módulo compartido
     `js/aps_dropdown_tabla.js`, así que sale del `overflow` del contenedor de la
     tabla pero compite en apilamiento con lo que venga después en el documento.
     El valor es el mismo 1080 que ponía inline el bloque que ese módulo
     reemplazó (2026-09-07); por encima del backdrop de un modal (1040) y de su
     diálogo (1050), para que un kebab abierto dentro de un modal se siga viendo.
     `.dropdown-menu` de Bootstrap trae 1000, que no alcanza. Los shells que
     cargan `base_aps.css` no dependen de esta regla: ahí manda su
     `.dropdown-menu { z-index: 2000 !important }`. */
  z-index: 1080;
}

/* Kebab que no cabe ni volteando: `aps_dropdown_tabla.js` le calcula un
   `max-height` con el espacio libre real y marca `data-aps-scroll`; el scroll lo
   activa el CSS. Las dos mitades tienen que vivir en la MISMA hoja que el shell
   carga: el `max-height` sin `overflow` recorta la caja pero deja los ítems
   pintados por fuera, sobre la tabla (medido en «Garantías a Finanzas», 11
   ítems, al traer este shell al módulo compartido el 2026-09-07 — la regla
   gemela existía solo en `base_aps.css`, que abastecimiento y adquisicion no
   cargan).

   NO hay `max-height` de respaldo en la regla base, igual que en `base_aps.css`:
   si el JS no carga, el menú se comporta como antes. Acá el motivo de la flecha
   no aplica —el menú SIGEX no tiene `::before`—, pero el criterio se conserva
   para que las dos hojas se lean igual. */
.sigex-shell .sigex-dropdown-menu[data-aps-scroll] {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 44, 92, .20) transparent;
}
.sigex-shell .sigex-dropdown-menu[data-aps-scroll]::-webkit-scrollbar { width: 6px; }
.sigex-shell .sigex-dropdown-menu[data-aps-scroll]::-webkit-scrollbar-track { background: transparent; }
.sigex-shell .sigex-dropdown-menu[data-aps-scroll]::-webkit-scrollbar-thumb {
  background: rgba(15, 44, 92, .20);
  border-radius: 3px;
}

.sigex-shell .sigex-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 13.5px;
  color: var(--sigex-text);
  text-decoration: none;
  cursor: pointer;
  transition: background .12s;
}

.sigex-shell .sigex-dropdown-item:hover {
  background: var(--sigex-bg-app);
  color: var(--sigex-text);
  text-decoration: none;
}

.sigex-shell .sigex-dropdown-item.text-blue { color: var(--sigex-blue); }
.sigex-shell .sigex-dropdown-item.text-danger { color: #dc2626; }

/* ============================================================
   KEBAB — SECCIONES EN TARJETA (opt-in)
   ============================================================
   El `.dropdown-header` de Bootstrap 4 mide 14px: MAS que el item
   (13.5px), con el mismo gris, la misma caja y mas sangria — el titulo
   de seccion se leia como una opcion deshabilitada y los usuarios le
   hacian clic (reporte del 23-09-2026 sobre el kebab de garantias).
   Aca el titulo deja de ser una fila: es la cabecera tenida de una
   tarjeta, y el hover del item es GRIS NEUTRO para que el color del
   titulo y el de la fila viva no compitan.

   Gemelo SIGEX del bloque «Kebab reskin» de `base_aps.css` (:520-546),
   que estos shells no cargan — la misma divergencia entre las dos hojas
   que el 08-09-2026 dejo al menu sin `overflow-y` (ui_patrones.md:181).

   Va por OPT-IN (`sigex-dropdown-menu-grupos` en el menu,
   `sigex-dropdown-group` por seccion): ningun kebab que no las use
   cambia de aspecto. */
.sigex-shell .sigex-dropdown-menu-grupos { padding: 6px; }

.sigex-shell .sigex-dropdown-group {
  border: 1px solid var(--sigex-border-card);
  border-radius: 9px;
  overflow: hidden;          /* recorta la cabecera contra el radio */
  margin-bottom: 6px;
}

.sigex-shell .sigex-dropdown-group .dropdown-header {
  padding: 7px 12px 6px;
  margin: 0;
  background: rgba(11,77,194,.07);
  border-bottom: 1px solid rgba(11,77,194,.14);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--sigex-text-navy);
}

.sigex-shell .sigex-dropdown-menu-grupos .sigex-dropdown-item {
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 500;
}

.sigex-shell .sigex-dropdown-menu-grupos .sigex-dropdown-item:hover {
  background: var(--sigex-bg-app);
  color: var(--sigex-text-navy);
}

/* Icono en placa. `aps_iconos.css` carga DESPUES y pinta el glifo con
   !important (aps-ico-pdf y hermanos), asi que aca solo va el fondo. */
.sigex-shell .sigex-dropdown-menu-grupos .sigex-dropdown-item i {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 12px;
  background: rgba(11,77,194,.10);
  color: var(--sigex-blue);
}

.sigex-shell .sigex-dropdown-menu-grupos .sigex-dropdown-item.text-danger i,
.sigex-shell .sigex-dropdown-menu-grupos .sigex-dropdown-item i.aps-ico-pdf,
.sigex-shell .sigex-dropdown-menu-grupos .sigex-dropdown-item i.aps-ico-rojo {
  background: rgba(217,48,37,.10);
}

.sigex-shell .sigex-dropdown-menu-grupos .sigex-dropdown-item.disabled i {
  background: #f1f4f9;
  color: #adb5bd;
}

.sigex-shell .sigex-dropdown-menu-grupos .dropdown-divider {
  margin: 6px 4px;
  border-top-color: var(--sigex-divider);
}

/* ============================================================
   CAMPO DE FORMULARIO (grupo label + input)
   ============================================================ */
.sigex-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Grid de campos en formularios — FLEX para distribución dinámica.
   Antes era `grid` con auto-fit minmax(220px,1fr), pero auto-fit NO colapsa
   los tracks vacíos cuando hay un hijo full-width (grid-column:1/-1): ese hijo
   ocupa todos los tracks, así que una fila con 2 campos quedaba con 7 columnas
   vacías a la derecha (hueco grande). Con flex + flex-grow los campos SIEMPRE
   crecen para llenar el ancho disponible, sin importar cuántos sean. */
.sigex-form-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.sigex-form-grid > .sigex-field-group {
  flex: 1 1 220px;
  min-width: 0;
}
/* Campo que ocupa toda la fila (reemplaza al viejo inline grid-column:1/-1) */
.sigex-form-grid > .sigex-field-group.sigex-field-full {
  flex-basis: 100%;
}

/* ============================================================
   SCROLLBAR PERSONALIZADO (dentro del shell)
   ============================================================ */
.sigex-shell ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.sigex-shell ::-webkit-scrollbar-thumb {
  background: #c5cfde;
  border-radius: 7px;
  border: 2px solid var(--sigex-bg-app);
}

.sigex-shell ::-webkit-scrollbar-track {
  background: transparent;
}

/* ============================================================
   UTILIDADES
   ============================================================ */
.sigex-shell .text-navy { color: var(--sigex-text-navy); }
.sigex-shell .text-muted-sigex { color: var(--sigex-text-muted); }
.sigex-shell .text-blue { color: var(--sigex-blue); }
.sigex-shell .fw-700 { font-weight: 700; }
.sigex-shell .fw-600 { font-weight: 600; }
.sigex-shell .fw-800 { font-weight: 800; }
.sigex-shell a.link-blue { color: var(--sigex-blue); font-weight: 700; text-decoration: none; }
.sigex-shell a.link-blue:hover { color: var(--sigex-blue-hover); text-decoration: underline; }

/* ============================================================
   RESPONSIVE — colapso del sidebar en móvil
   ============================================================ */
.sigex-topbar-left { display:flex; align-items:center; gap:14px; min-width:0; }
.sigex-hamburger { display:none; border:none; background:transparent; font-size:20px; color:#475569; cursor:pointer; padding:4px 8px; line-height:1; }
.sigex-sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(8,21,48,.45); z-index:200; }

/* El corte va en 1024px y no en 768: medido, a 768 exactos la media query ya
   no aplica, así que en TABLET VERTICAL (iPad 768, iPad Air 820, iPad Pro 834)
   el menú quedaba fijo comiéndose 250px y el contenido bajaba a 518-570px. Con
   el corte acá, toda tablet en vertical pliega el menú y lo abre con la
   hamburguesa, que ya existía. Un iPad en horizontal (1024) conserva el menú a
   la vista, que es donde sí hay ancho para los dos. */
@media (max-width: 1023.98px) {
  .sigex-hamburger { display:inline-flex; }
  .sigex-sidebar { position:fixed; left:0; top:0; z-index:300; transform:translateX(-100%); transition:transform .2s ease; }
  .sigex-shell.sidebar-open .sigex-sidebar { transform:none; }
  .sigex-shell.sidebar-open .sigex-sidebar-overlay { display:block; }
}

@media (max-width: 768px) {
  .sigex-shell .sigex-search-wrap .sigex-search-input { width:150px; }
  .sigex-content { padding:20px 16px 40px; }
}

/* La clase global `js-form-submit-spinner` (base_aps) trae un fondo crema;
   en SIGEX el form va sin fondo (las tarjetas blancas van sobre el bg de la app). */
.sigex-shell .js-form-submit-spinner { background: transparent; }

/* Anula la regla global `form{}` de base.css (fondo beige + sombra + padding) dentro de SIGEX. */
.sigex-shell form { background: transparent; padding: 0; border-radius: 0; box-shadow: none; }

/* ============================================================
   SELECT2 (autocompletes dal) — REGLA GLOBAL DEL SHELL
   Todo autocomplete ocupa el ancho de su campo y NUNCA desborda
   ni se solapa con campos vecinos; alto consistente con los inputs.
   ============================================================ */
.sigex-shell .select2-container {
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  vertical-align: top;
}

/* Selección simple — flex centra verticalmente el texto. (line-height solo
   dejaba el texto ~10px más abajo del centro de la caja, desbordándola.) */
.sigex-shell .select2-container--default .select2-selection--single {
  height: 42px;
  background: #fff;
  border: 1px solid var(--sigex-border-input);
  border-radius: var(--sigex-r-input);
  display: flex;
  align-items: center;
}
.sigex-shell .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: normal;
  padding-left: 12px;
  padding-right: 30px;
  color: var(--sigex-text);
  flex: 1 1 auto;
  min-width: 0;
}
.sigex-shell .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--sigex-text-muted2);
}
.sigex-shell .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px;
  right: 8px;
}

/* Selección múltiple — flex para centrar verticalmente las pills */
.sigex-shell .select2-container--default .select2-selection--multiple {
  min-height: 42px;
  background: #fff;
  border: 1px solid var(--sigex-border-input);
  border-radius: var(--sigex-r-input);
  padding: 3px 6px;
  display: flex;
  align-items: center;
}
.sigex-shell .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* ESPECIFICIDAD, que acá NO es un detalle: la hoja de select2 4.1 que empaqueta
   dal_select2 declara el chip con TRES clases y `base_aps.css` repite esta misma
   corrección, global, con CUATRO. Se intercala `__rendered` —el `<ul>` que siempre
   contiene los chips— para llegar a CINCO y ganarle a las dos sin un solo
   `!important`. Medido en producción el 09-09-2026: con cuatro clases, fuera del
   shell el chip seguía saliendo gris (#e4e4e4) porque `select2.min.css` se carga
   DESPUÉS de `base_aps.css` y a igualdad de especificidad gana la última. */
/* Piezas de ADENTRO del multiselect (dal / ModelSelect2Multiple). La hoja de dal
   (static/autocomplete_light/select2.css) las pinta con las variables del admin
   de Django —`--darkened-bg` / `--border-color`—, que FUERA del admin no existen:
   el chip de cada elegido cae al gris de fábrica de select2 y no se parece a
   ningún otro chip del sistema. Acá se alinean con `.sigex-chip-info`, que es el
   chip azul del propio shell. Cubre a TODA pantalla dentro de `.sigex-shell`. */
.sigex-shell .select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  margin: 3px 6px 3px 0;
  padding: 2px 10px;
  border: 1px solid #d3e2ff;
  border-radius: 999px;
  background: #e7efff;
  color: var(--sigex-blue);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  /* la hoja de la 4.1 deja el chip `nowrap` con `overflow:hidden`: el diagnostico
     largo se corta sin elipsis util. Con flex, `min-width:0` deja truncar. */
  overflow: hidden;
  min-width: 0;
}
/* La x va a la DERECHA del texto, y para eso hay que DEVOLVERLA AL FLUJO.
   dal_select2 empaqueta el JS de select2 4.0.13 con la hoja de la 4.1: el JS emite
   `<span class="__choice__remove">x</span>` + el texto pelado dentro del `<li>`,
   mientras la hoja de la 4.1 espera un `<button>` fuera de flujo y le pone
   `position:absolute; left:0` reservandole el hueco con `padding-left:20px` en el
   chip. Cualquier regla que pise ese padding —cualquier chip propio— deja la x
   IMPRESA ENCIMA de la primera letra, y ahi `order` no hace nada: un absoluto no
   es item de flex. `position:static` la devuelve al flujo y recien entonces
   `order:2` la manda al final. Se leia como vineta y, peor, quedaba justo bajo el
   cursor al elegir el siguiente elemento. */
.sigex-shell .select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice__remove {
  position: static;
  order: 2;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--sigex-blue);
  opacity: .5;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}
.sigex-shell .select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice__remove:hover,
.sigex-shell .select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice__remove:focus {
  background: transparent;
  opacity: 1;
  color: #c0392b;
  outline: none;
}
/* El x de borrar TODO se esconde: es identico al de cada elemento y va pegado a
   ellos, asi que un clic corrido borra la lista entera sin aviso. Se quitan de a
   uno, que es lo que se hace al corregir. */
.sigex-shell .select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__clear { display: none; }
/* El buscador de adentro no es un campo aparte: sin esto queda una caja con borde
   DENTRO de la caja. El `!important` responde al de base_aps.css, que le pone
   borde a todo `input[type="search"]` del shell (0,1,1 con !important); estos 4
   selectores le ganan por especificidad. */
.sigex-shell .select2-container--default .select2-selection__rendered .select2-search--inline .select2-search__field {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent;
  margin: 3px 0;
  padding: 0 4px;
  min-height: 26px;
  font-size: 13px;
}

/* Foco coherente con el resto de inputs */
.sigex-shell .select2-container--default.select2-container--focus .select2-selection--single,
.sigex-shell .select2-container--default.select2-container--focus .select2-selection--multiple,
.sigex-shell .select2-container--default.select2-container--open .select2-selection--single,
.sigex-shell .select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--sigex-blue);
  box-shadow: 0 0 0 3px rgba(11,77,194,.15);
}

/* Tabla de líneas de compra: columnas de ancho fijo y TODO control (input,
   select, textarea, Select2) ocupa el 100% de su celda — así las columnas de
   la derecha no se pierden ni se recortan. table-layout:fixed ignora min-width,
   por eso cada columna lleva su width (en %) explícito en el <th> de la cabecera
   (el Select2 trunca con elipsis al achicarse: flex:1 1 auto + min-width:0). */
.sigex-shell .sigex-lineas-table { table-layout: fixed; width: 100%; }
.sigex-shell .sigex-lineas-table th,
.sigex-shell .sigex-lineas-table td { vertical-align: top; padding-left: 12px; padding-right: 12px; }
.sigex-shell .sigex-lineas-table td input,
.sigex-shell .sigex-lineas-table td select,
.sigex-shell .sigex-lineas-table td textarea,
.sigex-shell .sigex-lineas-table td .select2-container { width: 100% !important; }
.sigex-shell .sigex-lineas-table td input,
.sigex-shell .sigex-lineas-table td select { padding: 8px 10px; }

/* ============================================================
   MONTO REFERENCIAL — total de líneas (tfoot) + barra fija
   ============================================================ */
.sigex-shell .sigex-lineas-table tfoot td {
  padding: 14px 18px;
  border-top: 2px solid var(--sigex-border-card);
  background: var(--sigex-table-head-bg);
}
.sigex-shell .js-subtotal { white-space: nowrap; }
.sigex-monto-sticky {
  position: sticky;
  bottom: 16px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.25rem;
  padding: 14px 22px;
  background: var(--sigex-bg-card);
  border: 1px solid var(--sigex-border-card);
  border-left: 5px solid var(--sigex-gold);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(15,30,60,.12);
}
.sigex-monto-sticky-label { font-weight: 700; color: var(--sigex-text-navy); font-size: .95rem; }
.sigex-monto-sticky-label .fa { color: var(--sigex-blue); margin-right: .4rem; }
.sigex-monto-sticky-value { font-weight: 800; font-size: 1.35rem; color: var(--sigex-blue); }

/* ============================================================
   SPINNER en botones (submit / acción) — circular AZUL SÓLIDO
   Backport de Bootstrap 4.2 (MDB 4.1.1 no lo trae) scopeado a .sigex-shell;
   base_aps.css NO se carga en adquisicion, por eso va aquí.
   El spinner usa `currentColor`; en los botones de acción, al enviarse se
   agrega `.is-loading` que vuelve el botón blanco con texto azul → el spinner
   queda AZUL y visible (en vez de blanco invisible sobre el azul sólido).
   ============================================================ */
@keyframes spinner-border { to { transform: rotate(360deg); } }
.sigex-shell .spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: -0.125em;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: 0.75s linear infinite spinner-border;
}
.sigex-shell .spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.2em;
}
/* Rango de fechas en el panel de filtros: ocupa 2 columnas del grid (dos date
   inputs no caben en una sola celda de ~280px → se desbordaban sobre el campo
   vecino). Los inputs se encogen para repartir el ancho de las 2 columnas. */
.sigex-shell .sigex-filter-grid .sigex-field-daterange { grid-column: span 2; }
.sigex-shell .sigex-daterange-inputs { display: flex; gap: .5rem; align-items: center; }
.sigex-shell .sigex-daterange-inputs input { flex: 1 1 0; min-width: 0; }

/* …pero en móvil la grilla queda de UNA columna (auto-fit + minmax 210px), y
   ahí `span 2` no reparte: CREA una segunda columna implícita y la grilla
   entera se sale del panel. Medido en /farmacia/movimientos/fraccionamiento/
   listado/ a 390px: panel de 288px con columnas de `210px 144px`, o sea los
   campos de la segunda columna terminaban 133px fuera de la pantalla. En una
   sola columna los dos date inputs sí caben (se encogen con el flex de
   arriba), que es justo el caso que la regla de 2 columnas venía a evitar. */
@media (max-width: 767.98px) {
  .sigex-shell .sigex-filter-grid .sigex-field-daterange { grid-column: auto; }
  /* El pie del panel es un flex SIN wrap alineado a la derecha: cuando los
     botones no caben (tres en 288px), el desborde sale por la IZQUIERDA y el
     primero —"Aplicar filtros", el que más se usa— queda cortado contra el
     borde de la pantalla. Con wrap bajan de línea. */
  .sigex-shell .sigex-filter-footer { flex-wrap: wrap; justify-content: flex-start; }
}

/* Estado "cargando" del botón: blanco + azul → el spinner (currentColor) se ve azul.
   `transition:none` es OBLIGATORIO: .btn-primary tiene `transition:background`, y una
   transición en curso pisa incluso a `!important` en la cascada, dejando el fondo azul. */
.sigex-shell .btn.is-loading {
  background: #fff !important;
  background-color: #fff !important;
  color: var(--sigex-blue) !important;
  border: 1px solid var(--sigex-blue) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transition: none !important;
  cursor: progress !important;   /* cursor "de carga", no el pointer de hover */
}
/* Margen del spinner inyectado en modales (cuando va pegado al texto del botón). */
.sigex-shell .btn.is-loading > .spinner-border:first-child { margin-right: .4rem; }

/* ============================================================
   ACCIONES DE FILA estilo GMAIL (listados)
   En reposo la celda derecha muestra la fecha; al hover/focus de la fila la
   fecha se oculta y aparece una tira de íconos a la derecha (sin reflow: la
   tira es absoluta y la celda reserva ancho con min-width). Fila clickeable
   con .sigex-row-link (handler en base_adquisicion.html).
   ============================================================ */
.sigex-shell .sigex-cell-actions { position: relative; text-align: right; min-width: 150px; }
.sigex-shell .sigex-cell-date { transition: opacity .12s; }
.sigex-shell .sigex-row-actions {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  display: inline-flex; gap: 2px; align-items: center;
  opacity: 0; pointer-events: none; transition: opacity .12s;
}
.sigex-shell .sigex-table tbody tr:hover .sigex-row-actions,
.sigex-shell .sigex-table tbody tr:focus-within .sigex-row-actions { opacity: 1; pointer-events: auto; }
.sigex-shell .sigex-table tbody tr:hover .sigex-cell-date,
.sigex-shell .sigex-table tbody tr:focus-within .sigex-cell-date { opacity: 0; }
.sigex-shell .sigex-action-btn {
  position: relative;
  width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sigex-text-muted); cursor: pointer; font-size: 19px; text-decoration: none;
  transition: background .12s, color .12s;
}
.sigex-shell .sigex-action-btn:hover { background: var(--sigex-border-card); color: var(--sigex-text); }
.sigex-shell .sigex-action-btn.sigex-action-danger:hover { background: #fdeaea; color: #dc2626; }
/* Sin anillo de foco negro del navegador al clickear con mouse; el indicador de
   foco se muestra SOLO con teclado (:focus-visible). Evita el "círculo negro"
   que quedaba sobre el ícono al cerrar el modal (Bootstrap devuelve el foco al
   disparador). El blur en hidden.bs.modal (base_adquisicion.html) completa el fix. */
.sigex-shell .sigex-action-btn:focus { outline: none; box-shadow: none; }
.sigex-shell .sigex-action-btn:focus-visible { outline: 2px solid var(--sigex-blue); outline-offset: 2px; }
/* Tooltip estilo Gmail (pill oscuro + caret) al hacer hover sobre el ícono.
   Va ARRIBA del ícono: el contenedor de la tabla tiene overflow → un tooltip
   debajo se recortaría en la última/única fila. */
.sigex-shell .sigex-action-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  background: #3c4043; color: #fff; font-size: 11px; font-weight: 600; line-height: 1;
  padding: 5px 8px; border-radius: 4px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .12s ease .3s; z-index: 1090;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.sigex-shell .sigex-action-btn[data-tooltip]::before {
  content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #3c4043;
  opacity: 0; pointer-events: none; transition: opacity .12s ease .3s; z-index: 1090;
}
.sigex-shell .sigex-action-btn[data-tooltip]:hover::after,
.sigex-shell .sigex-action-btn[data-tooltip]:hover::before { opacity: 1; }
/* En la celda de acciones (borde derecho de la tabla) el tooltip va alineado a la
   derecha del botón, no centrado: aunque esté con opacity:0, el ::after centrado
   sobresale del contenedor overflow-x:auto y fuerza una barra de scroll lateral
   fantasma en los listados (p.ej. "Importar ofertas desde MP" en licitaciones).
   El desborde hacia la izquierda no genera scroll en LTR. El caret ::before queda
   centrado en el botón. */
.sigex-shell .sigex-cell-actions .sigex-action-btn[data-tooltip]::after {
  left: auto; right: 0; transform: none;
}
.sigex-shell .sigex-row-link { cursor: pointer; }
/* Dispositivos sin hover (táctil): mostrar siempre los íconos junto a la fecha */
@media (hover: none) {
  .sigex-shell .sigex-row-actions { position: static; transform: none; opacity: 1; pointer-events: auto; }
  .sigex-shell .sigex-table tbody tr .sigex-cell-date { opacity: 1; }
}

/* ============================================================
   TAMAÑO UNIFORME DE BOTONES DENTRO DEL SHELL SIGEX
   ------------------------------------------------------------
   El bloque BOTONES de más arriba solo da tamaño a 3 variantes
   (.btn-primary / .btn-outline-secondary / .btn-danger). Toda otra
   variante de color (.btn-secondary, .btn-default, .btn-warning,
   .btn-success, .btn-dark-green, .btn-outline-*, …) caía al `.btn`
   global de base_aps.css (`padding:.35rem .75rem; font-size:.85rem`),
   así que en un mismo grupo convivían dos alturas: medido en
   /farmacia/cenabast/icp/nuevo/, "Volver" 31,6px vs "Crear" 41,0px.
   Acá se igualan todas al tamaño SIGEX.

   Esta hoja es la ÚLTIMA que carga el shell (después de bootstrap,
   mdb y base_aps), así que estas reglas ganan los empates de
   especificidad (0,2,0) sin necesidad de !important. El color de
   cada variante lo siguen poniendo MDB/base_aps: acá solo se toca
   geometría (padding / font-size / margin / sombra).

   Se listan las variantes una por una a propósito, en vez de un
   `.sigex-shell .btn` genérico: esa regla (0,2,0) le ganaría por
   orden a `.btn.btn-kebab` y a `.sigex-shell .btn-icon`, y rompería
   el kebab de acciones y los botones-ícono cuadrados de 34px.
   ============================================================ */
.sigex-shell .btn-secondary,
.sigex-shell .btn-default,
.sigex-shell .btn-warning,
.sigex-shell .btn-success,
.sigex-shell .btn-info,
.sigex-shell .btn-light,
.sigex-shell .btn-dark,
.sigex-shell .btn-dark-green,
.sigex-shell .btn-light-green,
.sigex-shell .btn-green,
.sigex-shell .btn-yellow,
.sigex-shell .btn-amber,
.sigex-shell .btn-outline-primary,
.sigex-shell .btn-outline-danger,
.sigex-shell .btn-outline-success,
.sigex-shell .btn-outline-info {
  /* Altura por `min-height` y no por padding vertical: cada variante trae un
     ancho de borde distinto (`.btn-primary` de SIGEX es `border:none`, pero
     `.btn-default` recibe `border:1px solid !important` de base_aps y los
     `.btn-outline-*` traen 2px de MDB), y como el box es border-box ese borde
     se sumaba a la altura. Medido en el form de egreso dañado: "Guardar" 41,01px
     contra "Regresar al listado" 42,83px — 1,82px = los 2 bordes. Con una altura
     fija y el contenido centrado por flex, el borde deja de mover la altura y
     todas las variantes miden exactamente lo mismo. 41px = la altura que ya
     tenía `.btn-primary` con su padding de 10px, para no cambiarle el tamaño. */
  min-height: 41px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;                    /* MDB le mete .375rem a `.btn` */
  border-radius: var(--sigex-r-btn);
  display: inline-flex;
  align-items: center;
  align-self: center;           /* ver nota abajo */
  gap: 8px;
  font-family: inherit;
  box-shadow: none;             /* la sombra MDB choca con el plano SIGEX */
  cursor: pointer;
}
/* Sobre `align-self: center`: varios contenedores de botones del shell son flex
   sin `align-items` propio (`.sigex-filter-footer`, los `d-flex` de los forms),
   así que los items caen en `stretch` y el botón se estira a la altura de la
   línea en vez de quedarse en la suya. Medido en el pie de filtros de
   /farmacia/cenabast/icp/listado/: el botón Excel salía 45,45px contra 33,47px
   de "Aplicar filtros" y "Limpiar" — desalineado y 12px más alto. Con
   `align-self: center` los tres quedan en 33,47px. En un contenedor no-flex la
   propiedad se ignora, así que es inocua fuera de este caso. */

/* Tamaño compacto: `.btn-sm` dentro del shell.
   Antes quedaba en tierra de nadie — `.sigex-shell .btn-primary` (0,2,0)
   le gana a `.btn.btn-sm` de MDB, así que SIGEX IGNORABA el `btn-sm` en sus
   3 variantes mientras las demás sí lo respetaban. Resultado medido en el
   panel de filtros de /farmacia/cenabast/icp/listado/, con los tres botones
   marcados `btn-sm`: "Aplicar filtros" 10/18px·14px, Excel 8/25,6px·10,24px
   y "Limpiar" 6,08/16px·14px — tres tamaños en una misma fila.
   Este bloque va DESPUÉS del anterior a propósito: mismo (0,2,0), gana por
   orden, y así `btn-primary btn-sm` sí queda compacto.
   Altura ≈ 33px, cercana al botón estándar de la app (31,6px), para que las
   toolbars y los botones dentro de tablas no crezcan ni desborden. */
.sigex-shell .btn-sm {
  min-height: 33.5px;           /* misma razón que el min-height de arriba */
  padding: 0 14px;
  font-size: 13px;
  line-height: 1.5;
}

/* BLINDAJE: el botón-ícono cuadrado, el kebab y el botón de acción de fila
   llevan geometría propia y NO deben heredar el padding de texto de los dos
   bloques de arriba. El caso no es hipotético: `fraccionamiento_form.html`
   tiene un `btn btn-warning btn-icon`, y como la regla de variantes de color
   empata en especificidad (0,2,0) con `.sigex-shell .btn-icon` pero se declara
   después, le ganaría y le reventaría el cuadrado de 34px.
   Se sube a (0,3,0) para que gane siempre, venga o no con `btn-sm`. */
.sigex-shell .btn.btn-icon,
.sigex-shell .btn.btn-kebab,
.sigex-shell .btn.sigex-action-btn {
  padding: 0;
  margin: 0;
  min-height: 0;                /* si no, el min-height de arriba los estira */
  font-size: 14px;
}
.sigex-shell .btn.btn-icon {
  width: 34px;
  height: 34px;
  justify-content: center;
}

/* ============================================================
   LÍNEA DE TIEMPO Y AVANCE DEL TRÁMITE
   Componente del seguimiento de una solicitud de compra
   (abastecimiento/solicitud_compra/solicitud_compra_detail.html).
   Reemplaza a la `ul.timeline` legacy, que era una lista con un riel
   dibujado a mano y sin estados. Vive acá y no en la hoja de la app
   porque es un patrón del sistema: cualquier pantalla que muestre el
   avance de un trámite (expedientes, decretos) lo puede reusar.
   ============================================================ */

/* ── Métricas del encabezado ───────────────────────────────── */
.sigex-shell .sigex-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sigex-shell .sigex-metric {
  flex: 1 1 140px;
  min-width: 130px;
  background: var(--sigex-bg-input);
  border: 1px solid var(--sigex-border-card);
  border-radius: var(--sigex-r-input);
  padding: 10px 12px;
}
.sigex-shell .sigex-metric-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sigex-text-muted2);
}
.sigex-shell .sigex-metric-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--sigex-text-navy);
  margin-top: 2px;
  line-height: 1.25;
}
.sigex-shell .sigex-metric-sub {
  font-size: 11.5px;
  color: var(--sigex-text-muted);
}

/* ── Stepper de etapas ─────────────────────────────────────── */
.sigex-shell .sigex-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  overflow-x: auto;
  padding-bottom: 4px;
}
.sigex-shell .sigex-step {
  flex: 1 1 0;
  min-width: 104px;
  text-align: center;
  position: relative;
  padding: 0 4px;
}
/* El riel se dibuja como dos medias líneas por paso: así el primero y el
   último no sacan riel fuera del componente y no hace falta :not(). */
.sigex-shell .sigex-step::before,
.sigex-shell .sigex-step::after {
  content: '';
  position: absolute;
  top: 15px;
  height: 2px;
  background: var(--sigex-border-form);
  width: 50%;
}
.sigex-shell .sigex-step::before { left: 0; }
.sigex-shell .sigex-step::after  { right: 0; }
.sigex-shell .sigex-step:first-child::before,
.sigex-shell .sigex-step:last-child::after { display: none; }
.sigex-shell .sigex-step-done::before,
.sigex-shell .sigex-step-done::after,
.sigex-shell .sigex-step-current::before { background: #22a85c; }

.sigex-shell .sigex-step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  position: relative;
  z-index: 1;
  background: #fff;
  border: 2px solid var(--sigex-border-form);
  color: var(--sigex-text-muted2);
}
.sigex-shell .sigex-step-done .sigex-step-dot {
  background: #e6f6ec;
  border-color: #22a85c;
  color: #1d8a4e;
}
.sigex-shell .sigex-step-current .sigex-step-dot {
  background: #fdf3d3;
  border-color: var(--sigex-gold);
  color: #8a6d00;
  box-shadow: 0 0 0 4px rgba(242,194,48,.22);
}
.sigex-shell .sigex-step-na .sigex-step-dot {
  border-style: dashed;
  background: var(--sigex-bg-app);
}
.sigex-shell .sigex-step-titulo {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sigex-text-navy);
  line-height: 1.25;
}
.sigex-shell .sigex-step-pending .sigex-step-titulo,
.sigex-shell .sigex-step-na .sigex-step-titulo { color: var(--sigex-text-muted2); }
.sigex-shell .sigex-step-meta {
  font-size: 11px;
  color: var(--sigex-text-muted);
  margin-top: 2px;
  line-height: 1.3;
  word-break: break-word;
}

/* Pastilla de días sobre la unión de dos pasos: se posiciona sobre el riel
   (top:15px, igual que ::before/::after) y por encima del punto (z-index:2 >
   el z-index:1 del punto) para cortarlo limpio; el fondo blanco es el de
   .sigex-card-body, que no declara color propio. */
.sigex-shell .sigex-step-gap {
  position: absolute;
  top: 15px;
  left: 0;
  transform: translate(-50%, -50%);
  z-index: 2;
  background: #fff;
  border: 1px solid var(--sigex-border-form);
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 7px;
  color: var(--sigex-text-muted);
  white-space: nowrap;
}
.sigex-shell .sigex-step-gap-alto {
  background: #c0392b;
  color: #fff;
  border-color: #c0392b;
}
.sigex-shell .sigex-step-alerta .sigex-step-dot {
  background: #fdecea;
  border-color: #c0392b;
  color: #c0392b;
}
/* El riel de un paso alerta (devolución): la mitad de ENTRADA siempre se
   pinta — el trámite SÍ avanzó hasta la devolución. La mitad de SALIDA se
   apaga solo cuando la devolución es el último movimiento, y eso lo dice el
   servidor con `.sigex-step-detenida`, que el template ya emite. Un
   `:has(+ .sigex-step-done)` daría el mismo resultado —el proyecto lo usa en
   base_aps.css donde no hay alternativa, como detectar un ícono dentro de un
   botón—, pero acá el dato ya viaja en el markup: preferirlo evita depender
   del soporte del navegador para algo que el servidor sabe de antemano. */
.sigex-shell .sigex-step-alerta::before,
.sigex-shell .sigex-step-alerta::after { background: #22a85c; }
.sigex-shell .sigex-step-alerta.sigex-step-detenida::after {
  background: var(--sigex-border-form);
}

/* ── Línea de tiempo ───────────────────────────────────────── */
.sigex-shell .sigex-tl {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.sigex-shell .sigex-tl::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--sigex-divider);
}
.sigex-shell .sigex-tl-item {
  position: relative;
  padding: 0 0 18px 46px;
}
.sigex-shell .sigex-tl-item:last-child { padding-bottom: 0; }
.sigex-shell .sigex-tl-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: #eef1f6;
  color: var(--sigex-text-muted);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--sigex-border-card);
}
.sigex-shell .sigex-tl-ok      .sigex-tl-dot { background: #e6f6ec; color: #1d8a4e; }
.sigex-shell .sigex-tl-info    .sigex-tl-dot { background: #e7efff; color: #0b4dc2; }
.sigex-shell .sigex-tl-alerta  .sigex-tl-dot { background: #fdecec; color: #c0392b; }
.sigex-shell .sigex-tl-neutro  .sigex-tl-dot { background: var(--sigex-bg-app); color: var(--sigex-text-muted2); }

.sigex-shell .sigex-tl-card {
  border: 1px solid var(--sigex-border-card);
  border-radius: var(--sigex-r-input);
  background: var(--sigex-bg-card);
  padding: 12px 14px;
}
.sigex-shell .sigex-tl-neutro .sigex-tl-card { background: var(--sigex-bg-app); }
.sigex-shell .sigex-tl-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.sigex-shell .sigex-tl-titulo {
  font-size: 14px;
  font-weight: 700;
  color: var(--sigex-text-navy);
}
.sigex-shell .sigex-tl-neutro .sigex-tl-titulo {
  color: var(--sigex-text-muted);
  text-decoration: line-through;
}
.sigex-shell .sigex-tl-fecha {
  font-size: 12px;
  font-weight: 600;
  color: var(--sigex-text-muted);
  white-space: nowrap;
}
.sigex-shell .sigex-tl-sub {
  font-size: 12.5px;
  color: var(--sigex-text-muted);
  margin-top: 2px;
}
.sigex-shell .sigex-tl-detalle {
  font-size: 12.5px;
  color: var(--sigex-text);
  margin-top: 6px;
  background: var(--sigex-bg-input);
  border-left: 3px solid var(--sigex-border-form);
  border-radius: 0 6px 6px 0;
  padding: 6px 10px;
}
.sigex-shell .sigex-tl-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.sigex-shell .sigex-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: var(--sigex-r-badge);
  background: var(--sigex-bg-app);
  color: var(--sigex-text-muted);
  border: 1px solid var(--sigex-border-card);
}
.sigex-shell .sigex-chip-ok     { background: #e6f6ec; color: #1d8a4e; border-color: #cdeeda; }
.sigex-shell .sigex-chip-alerta { background: #fdecec; color: #c0392b; border-color: #f8d7d7; }
.sigex-shell .sigex-chip-info   { background: #e7efff; color: #0b4dc2; border-color: #d3e2ff; }

/* Detalle en filas clave/valor — no es una tabla: en móvil una tabla de dos
   columnas dentro de la tarjeta obliga a scroll horizontal. */
.sigex-shell .sigex-tl-filas {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px dashed var(--sigex-divider);
  /* Tope de ancho: sin él, en un monitor de 1700px la clave queda pegada al
     borde izquierdo y su valor al derecho, con medio metro de puntos entre
     medio, y el par deja de leerse como par. */
  max-width: 780px;
}
.sigex-shell .sigex-tl-filas li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-size: 12.5px;
  border-bottom: 1px dashed var(--sigex-divider);
}
.sigex-shell .sigex-tl-filas li:last-child { border-bottom: none; }
.sigex-shell .sigex-tl-filas .k { color: var(--sigex-text-muted); }
.sigex-shell .sigex-tl-filas .v {
  font-weight: 600;
  color: var(--sigex-text);
  text-align: right;
}
/* El nowrap va SÓLO en los montos: un valor de texto libre (el objetivo de la
   solicitud, un destino largo) desborda la tarjeta a media pantalla, donde el
   media query de móvil todavía no aplica. */
.sigex-shell .sigex-tl-filas .v-num { white-space: nowrap; }
.sigex-shell .sigex-tl-filas .v-ok     { color: #1d8a4e; }
.sigex-shell .sigex-tl-filas .v-alerta { color: #c0392b; }

.sigex-shell .sigex-tl-docs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.sigex-shell .sigex-tl-doc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--sigex-r-btn);
  border: 1px solid var(--sigex-border-input);
  background: #fff;
  color: var(--sigex-blue);
  text-decoration: none;
}
.sigex-shell .sigex-tl-doc:hover {
  background: var(--sigex-row-hover);
  color: var(--sigex-blue-hover);
  text-decoration: none;
}

/* Pastilla «N días» entre dos hechos: es la información que convierte la
   lista en un diagnóstico (dónde se detuvo el trámite). */
.sigex-shell .sigex-tl-gap {
  position: relative;
  padding: 0 0 10px 46px;
  font-size: 11.5px;
  color: var(--sigex-text-muted2);
  font-weight: 600;
}
.sigex-shell .sigex-tl-gap-alto { color: #c0392b; }

@media (max-width: 640px) {
  .sigex-shell .sigex-tl-item { padding-left: 40px; }
  .sigex-shell .sigex-tl-gap  { padding-left: 40px; }
  .sigex-shell .sigex-tl-filas li { flex-direction: column; gap: 0; }
  .sigex-shell .sigex-tl-filas .v { text-align: left; }
}

/* ============================================================
   FORMSET DE LÍNEAS — piezas que faltaban para reusar
   `.sigex-lineas-table` desde cualquier app
   ============================================================ */

/* Un checkbox/radio hereda el `width:100%` de los controles de la celda y sale
   como una caja gigante. Van centrados y a su tamaño natural. */
.sigex-shell .sigex-lineas-table td input[type="checkbox"],
.sigex-shell .sigex-lineas-table td input[type="radio"] {
  width: auto !important;
  padding: 0;
  margin: 10px auto 0;
  display: block;
  transform: scale(1.2);
}

/* Errores de campo dentro de la celda: el `alert alert-danger` de Bootstrap es
   un bloque con 1rem de padding que hace crecer la fila al doble. */
.sigex-shell .sigex-lineas-table .sigex-field-error {
  color: #c0392b;
  font-size: 11.5px;
  margin-top: 4px;
  line-height: 1.3;
}
.sigex-shell .sigex-lineas-table .sigex-field-error ul {
  margin: 0;
  padding-left: 14px;
  list-style: disc;
}

/* Fila del botón «Agregar»: la inserta jquery.formset dentro del <tbody>
   (`<tr class="formset_row-add">`), así que se estiliza acá y no en cada
   plantilla. Sin hover de fila: no es un dato. */
.sigex-shell .sigex-lineas-table tbody tr[class$="-add"] > td {
  padding: 12px;
  background: var(--sigex-table-head-bg);
  border-top: 1px dashed var(--sigex-border-form);
}
.sigex-shell .sigex-lineas-table tbody tr[class$="-add"]:hover > td {
  background: var(--sigex-table-head-bg);
}

/* Columnas de servicio de la tabla de líneas. */
.sigex-shell .sigex-lineas-table .sigex-col-num { text-align: right; white-space: nowrap; }
.sigex-shell .sigex-lineas-table .sigex-col-centro { text-align: center; }
.sigex-shell .sigex-lineas-table .sigex-col-acciones { text-align: center; }

/* Bloques apilados (considerandos y todo formset de un solo texto largo por
   fila): una tabla de una columna con un textarea adentro desperdicia el ancho
   y se lee peor. */
.sigex-shell .sigex-bloques {
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-reset: sigex-bloque;
}
.sigex-shell .sigex-bloque {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--sigex-border-card);
  border-radius: var(--sigex-r-input);
  background: var(--sigex-bg-card);
  padding: 12px 14px;
}
.sigex-shell .sigex-bloque-num {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e7efff;
  color: var(--sigex-blue);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sigex-shell .sigex-bloque-num::before {
  /* La numeración va en CSS porque jquery.formset clona el markup: un número
     impreso en el template saldría repetido en cada bloque nuevo. Un bloque
     con display:none (el que el plugin esconde al eliminarlo) no incrementa
     el contador, así que la numeración se cierra sola. */
  counter-increment: sigex-bloque;
  content: counter(sigex-bloque);
}
.sigex-shell .sigex-bloque-campos { flex: 1 1 auto; min-width: 0; }
/* Bloque de dos columnas: el par «Donde dice / Debe decir» del decreto de
   modificación es una comparación, y leerla en dos textareas apilados obliga a
   ir y volver con la vista. */
.sigex-shell .sigex-bloque-campos.sigex-bloque-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 900px) {
  .sigex-shell .sigex-bloque-campos.sigex-bloque-2col { grid-template-columns: 1fr; }
}
/* El botón de eliminar que inserta el plugin como último hijo del bloque. */
.sigex-shell .sigex-bloque > a { flex: none; align-self: flex-start; }
.sigex-shell .sigex-bloque-campos textarea,
.sigex-shell .sigex-bloque-campos input,
.sigex-shell .sigex-bloque-campos select { width: 100%; }

/* Un textarea dentro de una fila de líneas nace con las filas del widget del
   modelo (TextField → 10 filas): 100px de alto por fila hacen que una tabla de
   cinco líneas no quepa en pantalla. Se compacta y queda redimensionable a
   mano por si el texto es largo. */
.sigex-shell .sigex-lineas-table td textarea {
  min-height: 62px;
  height: 62px;
  resize: vertical;
}

/* Variante de ancho automático de la tabla de líneas: la usa el componente
   `_formset_tabla.html`, que arma sus columnas desde los campos del formset y
   por lo tanto no puede declarar un ancho por columna. `table-layout: fixed`
   repartiría el ancho en partes iguales y dejaría el select de un catálogo del
   mismo porte que una casilla de sí/no. */
.sigex-shell .sigex-lineas-table.sigex-lineas-auto { table-layout: auto; }
.sigex-shell .sigex-lineas-table.sigex-lineas-auto td .select2-container { min-width: 160px; }

/* El `<select>` que Select2 esconde detrás del control conserva el `width:100%`
   de la celda y, como es `position:absolute`, se estira fuera de la tarjeta y
   deja la PÁGINA con scroll horizontal (medido en el alta de oferta: 1.732px de
   ancho, 300px fuera del viewport). Select2 lo declara en 1px por accesibilidad
   y esta regla se lo devuelve; la de arriba le gana por especificidad. */
.sigex-shell .sigex-lineas-table td select.select2-hidden-accessible {
  width: 1px !important;
  min-width: 0 !important;
}

/* Bloques: el textarea nace con las filas del widget del modelo (10) y ocupa
   media pantalla por considerando. Compacto y redimensionable a mano. */
.sigex-shell .sigex-bloque-campos textarea {
  min-height: 90px;
  height: 90px;
  resize: vertical;
}
/* El botón «Agregar» que el plugin inserta como hermano del último bloque:
   `.sigex-bloques` es flex column, así que sin esto se estira a todo el ancho
   y deja de parecer un botón. */
.sigex-shell .sigex-bloques > a { align-self: flex-start; }

/* El `<select>` que Select2 esconde detrás del control es `position: absolute`.
   Dentro de una tabla de líneas con scroll horizontal, su contenedor de bloque
   NO era el wrapper que scrollea —ningún ancestro estaba posicionado— sino el
   documento: el overflow no lo recortaba y estiraba la PÁGINA hasta donde cae
   su celda. Medido en móvil (390px) en el alta de placa: la página se desplazaba
   290px de lado, con el select a x=665 dentro de una tabla de 922px.
   Dándole a la celda un contenedor posicionado, el absoluto queda dentro del
   scroll de la tabla, que es donde corresponde. */
.sigex-shell .sigex-lineas-table td { position: relative; }

/* ============================================================
   LÍNEAS EN MÓVIL: la planilla se convierte en TARJETAS
   ============================================================
   En 390px una tabla de 7 columnas repartía 338px entre todas y los inputs
   quedaban en **22px de ancho** (medido en el alta de solicitud): ilegibles e
   intocables con el dedo. Cada fila pasa a ser una tarjeta y cada celda una
   línea etiquetada con su rótulo, que el `<thead>` ya no muestra.

   El rótulo sale de `data-label` en el `<td>` — la MISMA técnica del partial
   `components/lineas_formset_planilla.html`, que ya usa plan_compra. Una celda
   sin `data-label` (subtotal, acciones) no pinta rótulo.
   ============================================================ */
@media (max-width: 767.98px) {
  .sigex-shell .sigex-lineas-table { table-layout: auto; min-width: 0; }
  .sigex-shell .sigex-lineas-table thead { display: none; }
  .sigex-shell .sigex-lineas-table,
  .sigex-shell .sigex-lineas-table tbody,
  .sigex-shell .sigex-lineas-table tfoot,
  .sigex-shell .sigex-lineas-table tr,
  .sigex-shell .sigex-lineas-table td { display: block; width: auto; }

  .sigex-shell .sigex-lineas-table tbody tr {
    position: relative;
    counter-increment: sigex-linea;
    background: var(--sigex-bg-card);
    border: 1px solid var(--sigex-border-card);
    border-radius: 10px;
    margin: 12px;
    padding: 30px 14px 12px;
  }
  /* Número de la línea: ubica al funcionario cuando la solicitud tiene varias
     y ya no hay una fila por renglón que lo haga evidente. */
  .sigex-shell .sigex-lineas-table tbody tr::before {
    content: 'Línea ' counter(sigex-linea);
    position: absolute;
    top: 8px; left: 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sigex-text-muted2);
  }
  .sigex-shell .sigex-lineas-table tbody { counter-reset: sigex-linea; }

  .sigex-shell .sigex-lineas-table td {
    border: none;
    padding: 7px 0 0;
  }
  .sigex-shell .sigex-lineas-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sigex-text-label);
  }
  /* Los controles ocupan el ancho de la tarjeta y llegan a la altura táctil. */
  .sigex-shell .sigex-lineas-table td input,
  .sigex-shell .sigex-lineas-table td select,
  .sigex-shell .sigex-lineas-table td textarea,
  .sigex-shell .sigex-lineas-table td .select2-container {
    width: 100% !important;
    max-width: none !important;
  }
  .sigex-shell .sigex-lineas-table td input:not([type="checkbox"]):not([type="radio"]),
  .sigex-shell .sigex-lineas-table td select { min-height: 42px; }
  .sigex-shell .sigex-lineas-table td input[type="checkbox"],
  .sigex-shell .sigex-lineas-table td input[type="radio"] { margin: 6px 0 0; }
  .sigex-shell .sigex-lineas-table td.sigex-col-centro { text-align: left; }
  .sigex-shell .sigex-lineas-table td textarea { min-height: 76px; }

  /* Subtotal: a la derecha y sin caja, como un total de la tarjeta. */
  .sigex-shell .sigex-lineas-table td.sigex-col-num { text-align: right; font-size: 15px; }

  /* El basurero va a la esquina de la tarjeta, no como una fila más. */
  .sigex-shell .sigex-lineas-table td.sigex-col-acciones {
    position: absolute;
    top: 4px; right: 8px;
    padding: 0;
    width: auto;
  }
  .sigex-shell .sigex-lineas-table td.sigex-col-acciones::before { display: none; }

  /* La fila del botón «Agregar» que inserta jquery.formset. */
  .sigex-shell .sigex-lineas-table tbody tr[class$="-add"] {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0 12px 12px;
  }
  .sigex-shell .sigex-lineas-table tbody tr[class$="-add"]::before { content: none; }
  .sigex-shell .sigex-lineas-table tbody tr[class$="-add"] > td { padding: 0; border: none; }
  .sigex-shell .sigex-lineas-table tbody tr[class$="-add"] a { display: block; text-align: center; }

  /* Pie de totales. */
  .sigex-shell .sigex-lineas-table tfoot td { padding: 10px 14px; text-align: left !important; }
}

/* Celda cuyo contenido el JS dejó oculto: en la planilla es una columna en
   blanco y se tolera, pero en el modo tarjeta de móvil sería un rótulo sin
   nada debajo. La marca la pone la pantalla (`toggleReferencias`). */
@media (max-width: 767.98px) {
  .sigex-shell .sigex-lineas-table td.sigex-celda-vacia { display: none; }
}