:root {
  --cfp-naranja: #f37021;
  --cfp-azul: #1b3a5b;
  --cfp-gris: #f4f6f9;
}
body { background: var(--cfp-gris); }
.navbar-cfp { background: var(--cfp-azul); }
.navbar-cfp .navbar-brand,
.navbar-cfp .nav-link { color: #fff !important; }
.navbar-cfp .nav-link.active { color: var(--cfp-naranja) !important; font-weight: 600; }

/* ===== Menu por proceso: hover + submenu anidado ===== */
/* El sombreado (fondo) ocupa el tamano exacto de la opcion; SOLO el texto
   crece un poco al pasar el mouse (animacion). El texto va envuelto en
   .lbl (lo hace un JS en base.html) para escalarlo sin mover la caja. */
/* Animacion de hover COMUN a TODAS las listas desplegables: navbar por proceso,
   menu de usuario ("Cambiar de usuario"), "+ Nueva", categorias, filtros y
   autocompletados. Al pasar el mouse el TEXTO (envuelto en .lbl por un JS de
   base.html) crece un poco y la fila cambia sutilmente de color para
   referenciar donde esta el puntero. */
.dropdown-menu .dropdown-item,
.list-group.shadow .list-group-item-action {
  transition: background-color .15s ease;
}
.dropdown-menu .dropdown-item:hover:not(.disabled),
.dropdown-menu .dropdown-item:focus:not(.disabled),
.list-group.shadow .list-group-item-action:hover,
.list-group.shadow .list-group-item-action:focus {
  background-color: rgba(27, 58, 91, .16);   /* azul CFP tenue pero VISIBLE */
  color: inherit;
}
.dropdown-menu .dropdown-item .lbl,
.list-group.shadow .list-group-item-action .lbl {
  display: inline-block;
  transform-origin: left center;
  transition: transform .15s ease;
}
.dropdown-menu .dropdown-item:hover:not(.disabled) .lbl,
.dropdown-menu .dropdown-item:focus:not(.disabled) .lbl,
.list-group.shadow .list-group-item-action:hover .lbl,
.list-group.shadow .list-group-item-action:focus .lbl {
  transform: scale(1.06);            /* solo el texto crece un poco */
}
/* Item ACTIVO (el modulo/vista actual): acento navy TRANSLUCIDO en vez de
   solido, para que el menu se vea igual de "glass" en TODAS las vistas. Antes
   era navy opaco y, al entrar a un modulo, la opcion activa hacia parecer que
   el desplegable perdia el efecto de vidrio. */
.nav-proc .dropdown-item.active,
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item.active:hover,
.dropdown-menu .dropdown-item.active:focus {
  background-color: rgba(27, 58, 91, .82);
  color: #fff;
}
/* Submenu anidado (p.ej. "Vehiculos y Equipos"): se despliega a la derecha
   al pasar el mouse por su opcion padre. */
.nav-proc .dropdown-submenu { position: relative; }
.nav-proc .dropdown-submenu > .dropdown-menu {
  top: 0; left: 100%;
  margin-top: -.35rem; margin-left: .1rem;
  display: none;
}
.nav-proc .dropdown-submenu:hover > .dropdown-menu { display: block; }
.nav-proc .dropdown-submenu > .toggle-sub {
  display: flex; align-items: center; justify-content: space-between;
}
.nav-proc .dropdown-submenu > .toggle-sub::after {
  content: "\203A";                /* › : indica que hay un submenu */
  margin-left: .75rem;
  font-weight: 700;
  color: var(--cfp-naranja);
}

/* ===== Listas desplegables con VIDRIO ESMERILADO tipo iOS (como las
   notificaciones). Vidrio CLARO para que el texto de las opciones siga
   legible; se aplica a todos los .dropdown-menu (navbar, "+ Nueva", campana,
   usuario, filtros, etc.). ===== */
.dropdown-menu {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .20), inset 0 1px 0 rgba(255, 255, 255, .5);
  padding: .4rem;
}
.dropdown-menu .dropdown-item { border-radius: 10px; }
.dropdown-menu .dropdown-divider { border-color: rgba(15, 23, 42, .12); }
/* Encabezados dentro del menu (ej. "Notificaciones") sobre el vidrio */
.dropdown-menu .dropdown-header { color: #475569; }
/* Navegadores sin backdrop-filter: fondo mas opaco para no perder contraste */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dropdown-menu { background: rgba(255, 255, 255, .97); }
}

/* Desplegables CUSTOM (no Bootstrap): autocompletado de items de la RQ, selector
   de categoria, buscadores de EDE/remisiones... todos son .list-group.shadow
   flotantes. Mismo vidrio; los items van transparentes para que se vea el blur. */
.list-group.shadow {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .20) !important;
}
.list-group.shadow .list-group-item {
  background: transparent;
  border-color: rgba(15, 23, 42, .08);
  border-radius: 10px;
}
.list-group.shadow .list-group-item-action:hover,
.list-group.shadow .list-group-item-action:focus,
.list-group.shadow .list-group-item-action.active {
  background: rgba(27, 58, 91, .16);
  color: inherit;
  border-color: transparent;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .list-group.shadow { background: rgba(255, 255, 255, .97); }
}

/* Filtros tipo EXCEL de las tablas (menu que arma tabla-filtros.js): ordenar,
   buscar y checkboxes. Mismo vidrio (se sobreescribe el fondo blanco inline). */
.tabla-excel-menu {
  background: rgba(255, 255, 255, .82) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .55) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .20) !important;
  overflow: hidden;
}
.tabla-excel-menu .f-lista { background: rgba(255, 255, 255, .35) !important; }
.tabla-excel-menu .btn-light { background: rgba(255, 255, 255, .5); border: 0; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tabla-excel-menu { background: rgba(255, 255, 255, .97) !important; }
}

/* Filtros con VIDRIO: la lista abierta de un <select> nativo la dibuja el
   sistema operativo y NO acepta blur/redondeo. Por eso los <select> de FILTRO
   se reemplazan (via glass-select.js) por este desplegable propio: el boton
   imita al select y la lista es un .dropdown-menu que si lleva el vidrio. El
   <select> real queda oculto como fuente de verdad para enviar el formulario. */
.glass-select { position: relative; }
.glass-select-toggle { text-align: left; }
.glass-select-toggle .gs-lbl {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.glass-select-menu { min-width: 100%; max-height: 320px; overflow-y: auto; }

/* ===== Pestañas del navbar CENTRADAS en el eje de la barra ===== */
/* En pantallas anchas (>=1200px, con espacio de sobra) el menu se centra de
   verdad respecto a toda la barra, no en el hueco libre; el bloque de la
   derecha (campana + usuario) queda pegado a la derecha. En pantallas mas
   angostas se mantiene el mx-auto (centrado en el hueco) para no solaparse
   con el nombre de usuario. */
@media (min-width: 1200px) {
  .navbar-cfp > .container-fluid { position: relative; }
  /* Centrado SIN transform: 'transform' crearia un contexto de apilamiento
     que dejaria los desplegables por detras del contenido. Con left/right:0 +
     margin auto y ancho al contenido, el menu se centra y sus dropdowns
     conservan su z-index normal (siempre por delante). */
  .navbar-cfp #nav > .navbar-nav.mx-auto {
    position: absolute;
    left: 0;
    right: 0;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto !important;
  }
  .navbar-cfp #nav > .navbar-nav:last-child { margin-left: auto; }
}
.text-cfp { color: var(--cfp-naranja) !important; }
.bg-cfp { background: var(--cfp-naranja) !important; color:#fff; }
.btn-cfp { background: var(--cfp-naranja); border-color: var(--cfp-naranja); color:#fff; }
.btn-cfp:hover { background:#d85f17; border-color:#d85f17; color:#fff; }
.card-kpi { border:none; border-left:5px solid var(--cfp-naranja); }
.card-kpi .num { font-size:2rem; font-weight:700; color:var(--cfp-azul); }
.login-wrap { min-height:100vh; display:flex; align-items:center;
  background:linear-gradient(135deg,#1b3a5b,#2d5a8a); }
.logo-cfp { font-weight:800; letter-spacing:1px; }
.logo-cfp .logo-sub { font-size:.6rem; font-weight:600; letter-spacing:4px;
  color: var(--cfp-naranja); margin-top:1px; }
.form-section-title { color:var(--cfp-azul); font-weight:600;
  border-bottom:2px solid var(--cfp-naranja); padding-bottom:4px; margin:1.2rem 0 .8rem; }
.tabla-doc th { background:var(--cfp-azul); color:#fff; font-size:.85rem; }
.ficha-label { font-size:.78rem; color:#6c757d; text-transform:uppercase; letter-spacing:.4px; }
.ficha-val { font-weight:600; }
@media print {
  .no-print { display:none !important; }
  .navbar, .btn { display:none !important; }
  body { background:#fff; }
}

/* --- Matrices EDE/RQ: alerta visual de subsanados y semaforo de antiguedad --- */
/* Fila cuyo documento fue reenviado tras una observacion: parpadea unas veces
   y queda con un fondo ambar tenue hasta que el aprobador lo abre. */
@keyframes cfp-parpadeo {
  0%, 100% { background-color: rgba(255, 193, 7, .12); }
  50%      { background-color: rgba(255, 193, 7, .45); }
}
tr.fila-subsanada > td { background-color: rgba(255, 193, 7, .12); }
tr.fila-subsanada { animation: cfp-parpadeo 1.2s ease-in-out 5; }

/* Fila OBSERVADA: un EDE rechazado por Gerencia de Operaciones que el
   solicitante o el Lider deben subsanar. Parpadea en ROJO al cargar la lista
   (llama la atencion) y queda con un fondo rojo tenue hasta que se subsana. */
@keyframes cfp-parpadeo-rojo {
  0%, 100% { background-color: rgba(220, 53, 69, .12); }
  50%      { background-color: rgba(220, 53, 69, .45); }
}
tr.fila-observada > td { background-color: rgba(220, 53, 69, .12); }
tr.fila-observada { animation: cfp-parpadeo-rojo 1.2s ease-in-out 6; }

/* Punto discreto de antiguedad (dias sin movimiento en el estado actual) */
.punto-antiguedad {
  display: inline-block; width: .55rem; height: .55rem; border-radius: 50%;
  margin-left: .3rem; vertical-align: middle;
}
.punto-antiguedad.verde    { background: #198754; }
.punto-antiguedad.amarillo { background: #ffc107; }
.punto-antiguedad.rojo     { background: #dc3545; }

/* Asa para redimensionar columnas (tabla-ancho.js): franja en el borde
   derecho de cada encabezado; se ilumina al pasar el mouse. */
.col-redim {
  position: absolute; top: 0; right: -4px; width: 9px; height: 100%;
  cursor: col-resize; user-select: none; z-index: 6;
}
.col-redim:hover { background: rgba(13, 110, 253, .35); border-radius: 2px; }

/* Celdas de texto largo (descripcion en las matrices): el texto usa TODO el
   ancho de la columna y se corta VISUALMENTE a 2 lineas con puntos
   suspensivos. Al ensanchar la columna entra mas texto por linea; al
   achicarla se envuelve (el texto completo va en el title y en data-sort). */
.txt-2lineas {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

/* Tablas de ancho FIJO (data-ancho-fijo, ej. items del form RQ): JAMAS mas
   anchas que la pagina — sin barra horizontal; el resize intercambia espacio
   entre columnas vecinas (tabla-ancho.js). */
table[data-ancho-fijo] { width: 100% !important; max-width: 100%; }

/* Tablas del modulo FLOTA (matriz de km, programa de mtto y hoja de vida): con
   el navegador al 90% las placas, custodios y km quedaban muy chicos. Los
   inputs de Bootstrap (.form-control-sm / .form-select-sm) traen tamano fijo
   propio, por eso se suben aparte; si no, quedan mas chicos que su fila. */
.tabla-flota { font-size: .95rem; }
.tabla-flota th { font-size: .9rem; }
.tabla-flota .form-control-sm,
.tabla-flota .form-select-sm { font-size: .92rem; padding: .2rem .45rem; }
.tabla-flota .badge { font-size: .8rem; }
.tabla-flota .small,
.tabla-flota .form-text { font-size: .82rem; }
.tabla-flota .btn-sm { font-size: .85rem; }

/* Arrastrar y soltar archivos (soltar-archivo.js). La zona se marca con
   [data-soltar]; el borde punteado solo aparece cuando hay algo encima, para no
   ensuciar el formulario cuando no se esta arrastrando nada. */
.cfp-soltar { position: relative; border-radius: .375rem; transition: background-color .12s, box-shadow .12s; }
.cfp-soltar-pista { margin-top: .15rem; font-size: .78rem; }
.cfp-soltar-activa {
  background-color: rgba(13, 110, 253, .06);
  box-shadow: 0 0 0 2px rgba(13, 110, 253, .45);
}
.cfp-soltar-activa * { pointer-events: none; }

/* Renglon CONTINUACION: otro N° de parte del mismo item del pedido, cotizado
   por el proveedor en una linea aparte. Va pegado a su renglon (no al final) y
   con una guia a la izquierda para que se lea como parte de el. */
.cfp-continuacion > td { background-color: rgba(13, 202, 240, .07); }
.cfp-continuacion > td:first-child { border-left: 3px solid rgba(13, 202, 240, .7); color: #0aa2c0; font-weight: 600; }

/* ===== Matriz de kilometraje: vista redisenada (2026-08) ===== */
/* Navegador de semana con flechas + estado (EN CURSO / CERRADA). */
.sem-nav { display: inline-flex; align-items: center; border: 1px solid #dee2e6;
           border-radius: .375rem; background: #fff; overflow: hidden; }
.sem-nav .sem-ar { padding: .3rem .6rem; color: #495057; text-decoration: none; }
.sem-nav .sem-ar:hover { background: rgba(27, 58, 91, .08); }
.sem-nav .sem-ar.off { color: #ced4da; pointer-events: none; }
.sem-nav .sem-tx { padding: .3rem .7rem; font-weight: 600; font-size: .92rem;
                   display: flex; gap: 10px; align-items: center;
                   border-left: 1px solid #dee2e6; border-right: 1px solid #dee2e6; }
.chip-sem { border-radius: 50rem; font-size: .7rem; font-weight: 700; padding: .22rem .6rem; }
.chip-sem.viva { background: #d1e7dd; color: #0a3622; }
.chip-sem.lock { background: #e9ecef; color: #495057; }
/* Franja fina de semana bloqueada (reemplaza al alert grande). */
.lockbar-km { display: flex; align-items: center; gap: 8px; background: #eceff3;
              border-left: 4px solid #6c757d; border-radius: .375rem;
              padding: .5rem .9rem; margin: 10px 0; font-size: .85rem; color: #495057; }
/* Tarjetas-resumen clicables (variante por color del card-kpi del dashboard). */
.kpis-km { display: flex; gap: 12px; margin: 12px 0 8px; }
.kpi-km { flex: 1; border: none; border-left: 5px solid var(--cfp-naranja);
          padding: .5rem .9rem .45rem; cursor: pointer; }
.kpi-km .num { font-size: 1.6rem; font-weight: 700; color: var(--cfp-azul); line-height: 1.15; }
.kpi-km .lbl-kpi { font-size: .78rem; color: #6c757d; }
.kpi-km.activa { outline: 2px solid var(--cfp-azul); }
/* Chips de filtro por estado (conviven con los filtros por columna: estos
   ocultan por CLASE, los de columna por style.display). */
.chips-km { display: flex; gap: 8px; align-items: center; margin: 2px 0 10px; flex-wrap: wrap; }
.chip-km { border: 1px solid #dee2e6; background: #fff; border-radius: 50rem;
           padding: .2rem .7rem; font-size: .82rem; cursor: pointer; }
.chip-km.on { background: var(--cfp-azul); border-color: var(--cfp-azul); color: #fff; }
tr.fila-oculta-chip { display: none !important; }
/* Filo de color por estado de la fila (el semaforo, visible de reojo).
   Generico: cualquier tabla del modulo lo usa con la clase tabla-estados. */
.tabla-estados tr[data-estado="vencido"] > td:first-child { box-shadow: inset 3px 0 0 #dc3545; }
.tabla-estados tr[data-estado="proximo"] > td:first-child { box-shadow: inset 3px 0 0 #ffc107; }
.tabla-estados tr[data-estado="aldia"] > td:first-child,
.tabla-estados tr[data-estado="servido"] > td:first-child { box-shadow: inset 3px 0 0 rgba(25, 135, 84, .35); }
.tabla-estados tr[data-estado="sinlectura"] > td:first-child { box-shadow: inset 3px 0 0 #e2c93f; }
.prog-centrada { margin-left: auto; margin-right: auto; }
/* Columna Vehiculo: placa arriba, tipo y custodio abajo. */
.veh-sub { font-size: .78rem; color: #6c757d; margin-top: 1px; }
.un-chip { font-size: .68rem; border: 1px solid #dee2e6; background: #f8f9fa; color: #495057;
           border-radius: .25rem; padding: .05rem .3rem; font-weight: 600; vertical-align: 1px; }
/* Fuente del Final: B = Boltrack, C = check list. El chip vive en un CARRIL
   de ancho fijo (.src-slot) presente en TODAS las filas, con o sin chip: el
   kilometraje termina siempre en el mismo borde y el chip queda pegado al
   numero en vez de empujarlo (pedido del usuario, 2026-08-24). */
.src-slot { display: inline-block; width: 36px; flex: 0 0 36px;
            text-align: left; padding-left: 3px; white-space: nowrap; }
/* El campo del kilometraje CRECE con la columna (tabla-ancho la deja
   redimensionar): base 96px como siempre, se estira si la ensanchan y
   se encoge con piso si la angostan. El carril del chip no cambia. */
.tabla-matriz input.km-f,
.tabla-matriz input.km-g { flex: 1 1 96px; width: 96px; min-width: 62px; }
.src-km { font-size: .62rem; font-weight: 700; border-radius: .25rem; padding: .1rem .32rem;
          vertical-align: 1px; }
.src-km.b { background: #e7f1ff; color: #0a58ca; }
.src-km.c { background: #d1e7dd; color: #0a3622; }
.src-km.cb { background: #d1e7dd; color: #0a3622; border: 1px solid #9ec5fe; }  /* check + resto Boltrack */
/* Barra de avance del intervalo, bajo el badge de "Para mtto". */
.prog-km { height: 4px; background: #e9ecef; border-radius: 2px; margin-top: 5px;
           width: 112px; max-width: 100%; margin-left: auto; }
.prog-km i { display: block; height: 100%; border-radius: 2px; }
/* Tira de cobertura del check list (un punto por dia). */
.dias-lbl { display: flex; gap: 4px; margin-bottom: 2px; }
.dias-lbl span { width: 16px; text-align: center; font-size: .58rem; color: #adb5bd; font-weight: 600; }
.dias-dots { display: flex; gap: 4px; }
.dot-km { width: 16px; height: 16px; border-radius: 50%; font-size: .6rem; color: #fff;
          display: flex; align-items: center; justify-content: center; }
.dot-km.ok { background: #198754; }
.dot-km.obs { background: var(--cfp-naranja); }
.dot-km.none { background: #fff; border: 1.6px solid #ced4da; }
.dot-km.futuro { background: #f1f3f5; border: 1px dashed #ced4da; }
/* Fila pendiente de lectura: crema SUTIL (el table-warning de Bootstrap
   gritaba tanto que con media flota pendiente la tabla entera era amarilla). */
.tabla-matriz tr.fila-pendiente > td { background-color: #fffdf3; }
.tabla-matriz tr.fila-pendiente > td:first-child { box-shadow: inset 3px 0 0 #e2c93f; }
/* Inputs FANTASMA en la matriz: se ven como numeros limpios (la propuesta) y
   recuperan su borde al pasar el mouse o al entrar a editar. */
.tabla-matriz input.form-control,
.tabla-matriz textarea.desc-auto { border-color: transparent; background: transparent; }
.tabla-matriz input.form-control:hover,
.tabla-matriz textarea.desc-auto:hover { border-color: #dee2e6; }
.tabla-matriz input.form-control:focus,
.tabla-matriz textarea.desc-auto:focus { border-color: #86b7fe; background: #fff;
  box-shadow: 0 0 0 .15rem rgba(13, 110, 253, .15); }
/* Sin el SPINNER de Chrome (las flechitas que salen al pasar el mouse): el
   numero va alineado a la derecha y las flechitas se ponian ENCIMA de los
   ultimos digitos ("un simbolo como una e" que tapaba el kilometraje). El
   odometro se escribe; incrementar de a 1 no sirve de nada. */
.tabla-matriz input[type="number"]::-webkit-outer-spin-button,
.tabla-matriz input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0; }
.tabla-matriz input[type="number"] { -moz-appearance: textfield; }
/* Resumen de la semana cerrada. */
.res-km { display: flex; gap: 12px; margin: 0 0 12px; }
.res-km .card { flex: 1; padding: .5rem .9rem .45rem; border-left: 5px solid var(--cfp-naranja); }
.res-km .num { font-size: 1.35rem; font-weight: 700; color: var(--cfp-azul); line-height: 1.2; }
.res-km .lbl-kpi { font-size: .76rem; color: #6c757d; }
.mini-km { height: 5px; background: #e9ecef; border-radius: 3px; margin-top: 6px; }
.mini-km i { display: block; height: 100%; border-radius: 3px; background: #198754; }