html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}
/* Inicio por departamento en cuadritos (diseño aprobado "cuadritos", 10-oct-2026). */
:root { --paq-azul: #163a5f; --paq-gris: #5b6b7a; --paq-borde: #d8dfe6; --paq-borde-btn: #c7d2dc; --paq-linea: #e4eaef; --paq-hilo: #dbe3ea; --paq-cobre: #b07a3c; --paq-texto: #1f2937; }
body { font-family: "Public Sans", "Segoe UI", system-ui, sans-serif; color: var(--paq-texto); }
.inicio-titulo { font-size: 1.6rem; font-weight: 600; color: var(--paq-azul); letter-spacing: -0.01em; }
.depto-card { background: #fff; border: 1px solid var(--paq-borde); border-radius: 8px; overflow: hidden; border-top: 6px solid var(--paq-azul); scroll-margin-top: 80px; display: flex; flex-direction: column; }
.depto-card:target { box-shadow: 0 0 0 3px #258cfb; }
.depto-cabeza { padding: 20px 22px 14px; display: flex; gap: 14px; align-items: flex-start; }
.depto-cabeza .depto-svg { color: var(--paq-cobre); flex: none; }
.depto-nombre { margin: 0; font-size: 1.35rem; font-weight: 600; color: var(--paq-azul); letter-spacing: -0.01em; }
.depto-responsable { margin: 3px 0 0; font-size: .85rem; color: var(--paq-gris); }
.depto-linea { height: 1px; background: var(--paq-linea); margin: 0 22px; }
.depto-cuerpo { padding: 20px 26px 24px; }
.depto-pasos { list-style: none; margin: 0; padding: 0; }
.depto-paso { display: flex; gap: 14px; }
.depto-paso-marca { display: flex; flex-direction: column; align-items: center; width: 28px; flex: none; }
.depto-paso-num { width: 28px; height: 28px; border-radius: 50%; background: var(--paq-azul); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.depto-paso-hilo { flex: 1; width: 2px; background: var(--paq-hilo); margin-top: 6px; }
.depto-paso-cuerpo { flex: 1; min-width: 0; padding-bottom: 26px; }
.depto-paso:last-child .depto-paso-cuerpo { padding-bottom: 0; }
.depto-paso-titulo { margin: 4px 0 1px; font-size: 13px; font-weight: 700; color: var(--paq-azul); letter-spacing: .08em; text-transform: uppercase; }
.depto-paso-desc { margin: 0 0 11px; font-size: 12.5px; color: var(--paq-gris); }
.navbar .dropdown-menu { max-height: 75vh; overflow-y: auto; }
.depto-actual, .barra-grupo, .navbar .nav-link { white-space: nowrap; }
.depto-actual { color: var(--paq-azul) !important; }
.depto-actual .depto-svg { color: var(--paq-cobre); vertical-align: -3px; margin-right: 4px; }
/* Departamento en botones (/Departamento/{clave}). */
.depto-liga { color: inherit; text-decoration: none; }
.depto-liga:hover { text-decoration: underline; text-decoration-color: var(--paq-cobre); }
.depto-liga-icono { color: inherit; display: inline-flex; }
.depto-pagina { max-width: 72rem; }
.depto-cabeza-pagina { padding: 4px 0 20px; }
.depto-cabeza-pagina .depto-nombre { font-size: 1.7rem; }
.depto-pasos-pagina .depto-paso-titulo { font-size: 14px; }
.depto-pasos-pagina .depto-paso-cuerpo { padding-bottom: 30px; }
.fn-bloque + .fn-bloque { margin-top: 14px; }
.fn-grupo { margin: 0 0 6px; font-size: 11.5px; font-weight: 600; color: var(--paq-gris); letter-spacing: .06em; text-transform: uppercase; }
.fn-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.fn-boton {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--paq-borde-btn);
  border-radius: 6px; background: #fff; color: var(--paq-texto); font-size: 14px; font-weight: 500; text-decoration: none;
}
.fn-boton:hover, .fn-boton:focus-visible { border-color: var(--paq-azul); background: #f4f7fa; color: var(--paq-azul); }
.fn-boton[target="_blank"]::after { content: "↗"; color: #7a8a99; font-size: 12px; }
.fn-modulo { font-size: 11.5px; color: var(--paq-gris); font-weight: 400; }
.depto-config { margin: 24px 0 0 42px; padding: 16px 18px 18px; border: 1px solid var(--paq-borde); border-top: 4px solid var(--paq-cobre); border-radius: 8px; background: #fbfaf8; }
.depto-config-titulo { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: var(--paq-cobre); letter-spacing: .08em; text-transform: uppercase; }
.depto-bloque { border: 1px solid var(--paq-borde); border-top: 6px solid var(--paq-azul); border-radius: 8px; padding: 18px 22px 22px; background: #fff; }
.selector-sucursal .btn { min-height: 36px; }
@media (max-width: 575px) { .depto-config { margin-left: 0; } .fn-boton { flex: 1 1 100%; } }
/* Roles y permisos: árbol Departamento → Paso → Botón. */
.arbol-permisos { list-style: none; padding-left: 0; margin: 0; }
.arbol-permisos ul { list-style: none; padding-left: 1.6rem; margin: 2px 0 6px; }
.arbol-permisos label { cursor: pointer; }
.arbol-permisos .arbol-depto > label { font-weight: 700; color: var(--paq-azul); }
.arbol-permisos .arbol-paso > label { font-weight: 600; }
.arbol-permisos .arbol-boton code { font-size: 11.5px; color: var(--paq-gris); white-space: nowrap; }
.arbol-botones { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 0 1rem; }
/* Inicio "Opción B" (aprobada 10-oct-2026): por niveles. Fila de arriba Paquetería sola a todo lo ancho (dueño, 11-oct-2026: cada paso
   en su fila, etiqueta a la izquierda y hasta 4 cuadritos repartidos a lo ancho); en medio Tráfico y el resto en hasta 4 columnas
   (inicio-cols-N = cuántas hay, sin huecos; 8 → 2 filas de 4); al final Catálogos a lo ancho, borde y número cobre, cuadritos en una
   fila. Número de importancia en círculo. Tableta: 2 columnas; celular: 1 (Paquetería 2×2). */
body:has(.inicio-deptos) { background: #f6f8fa; }
@media (min-width: 1200px) { body:has(.inicio-deptos) > .container { max-width: 1360px; } }
.inicio-deptos { display: flex; flex-direction: column; gap: 14px; }
.inicio-fila { display: grid; gap: 14px; align-items: stretch; }
.inicio-arriba, .inicio-cols-1, .inicio-abajo { grid-template-columns: minmax(0, 1fr); }
.inicio-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inicio-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.inicio-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.depto-card .depto-cabeza { padding: 16px 18px 12px; gap: 12px; }
.depto-card .depto-nombre { font-size: 1.2rem; }
.depto-card .depto-responsable { font-size: .8rem; }
.depto-card .depto-linea { margin: 0 18px; }
.depto-num {
  flex: none; width: 22px; height: 22px; margin-top: 5px; border-radius: 50%; background: var(--paq-azul); color: #fff;
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
}
.depto-card-catalogos { border-top-color: var(--paq-cobre); }
.depto-card-catalogos .depto-num { background: var(--paq-cobre); }
.cuadritos { list-style: none; margin: 0; padding: 12px 18px 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.cuadritos > li { min-width: 0; }
.cuadrito {
  position: relative; height: 100%; min-height: 72px; border: 1px solid var(--paq-borde-btn); border-radius: 10px; background: #fff;
  display: flex; align-items: center; gap: 10px; padding: 12px; text-align: left; color: var(--paq-texto); text-decoration: none;
}
a.cuadrito:hover, a.cuadrito:focus-visible { border-color: var(--paq-azul); background: #f4f7fa; }
.cuadrito:focus-visible { outline: 3px solid #258cfb; outline-offset: 2px; }
.cuadrito-svg { color: var(--paq-cobre); flex: none; }
.cuadrito-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cuadrito-nombre { font-size: 13.5px; font-weight: 600; color: var(--paq-azul); line-height: 1.15; overflow-wrap: break-word; }
.cuadrito-contiene { font-size: 11px; color: var(--paq-gris); line-height: 1.2; }
.cuadrito-num { position: absolute; top: 5px; right: 8px; font-size: 10.5px; font-weight: 700; color: var(--paq-gris); }
/* Paquetería (dueño, 11-oct-2026): una fila por paso del flujo, etiqueta pequeña "1 Recolecciones" arriba y sus cuadritos propios
   compactos (ícono + nombre + número). Mismas 4 columnas en todas las filas para que los cuadritos se alineen. */
.pasos-inicio { padding: 6px 18px 16px; display: flex; flex-direction: column; }
.paso-fila { padding-top: 10px; }
.paso-fila + .paso-fila { margin-top: 10px; border-top: 1px dashed var(--paq-linea); }
.paso-etq { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--paq-azul); text-decoration: none; }
.paso-etq:hover span:last-child { text-decoration: underline; text-decoration-color: var(--paq-cobre); }
.paso-etq-num { width: 19px; height: 19px; border-radius: 50%; background: var(--paq-azul); color: #fff; font-size: 11px; display: inline-flex;
  align-items: center; justify-content: center; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.pasos-inicio .paso-fila .cuadritos.cuadritos-paso { padding: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cuadritos-paso .cuadrito { min-height: 58px; padding: 9px 24px 9px 11px; gap: 9px; }
.cuadritos-paso .cuadrito-svg { width: 22px; height: 22px; }
.cuadritos-paso .cuadrito-nombre { font-size: 13.5px; }
/* Paquetería a todo lo ancho (fila de arriba): la etiqueta del paso a la izquierda y sus cuadritos en el resto del renglón. */
@media (min-width: 992px) {
  .inicio-arriba .pasos-inicio { padding: 4px 22px 16px; }
  .inicio-arriba .paso-fila { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; column-gap: 18px; padding-top: 10px; }
  .inicio-arriba .paso-etq { margin-bottom: 0; font-size: 12px; }
  .inicio-arriba .cuadritos-paso .cuadrito { min-height: 62px; padding: 10px 26px 10px 14px; gap: 11px; }
  .inicio-arriba .cuadritos-paso .cuadrito-svg { width: 24px; height: 24px; }
  .inicio-arriba .cuadritos-paso .cuadrito-nombre { font-size: 14.5px; }
}
/* Catálogos: todos sus cuadritos en una fila (--n = cuántos ve el usuario), sin número de funciones. */
.depto-card-catalogos .cuadritos { grid-template-columns: repeat(var(--n, 9), minmax(0, 1fr)); }
.depto-card-catalogos .cuadrito { flex-direction: column; justify-content: center; text-align: center; min-height: 96px; gap: 6px; padding: 10px 8px; }
.depto-card-catalogos .cuadrito-num { display: none; }
.cuadrito-pendiente { border-style: dashed; background: #fbfaf8; }
.cuadrito-pendiente .cuadrito-contiene { color: #8a5a22; font-weight: 600; }
@media (max-width: 1199.98px) {
  .depto-card-catalogos .cuadritos { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
}
@media (max-width: 991.98px) {
  .inicio-cols-3, .inicio-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .inicio-fila, .inicio-cols-2, .inicio-cols-3, .inicio-cols-4 { grid-template-columns: minmax(0, 1fr); }
  .cuadritos, .depto-card-catalogos .cuadritos { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 16px 16px; }
  .depto-card .depto-cabeza { padding: 14px 16px 10px; }
  .depto-card .depto-linea { margin: 0 16px; }
  .pasos-inicio { padding: 4px 16px 14px; }
  .pasos-inicio .paso-fila .cuadritos.cuadritos-paso { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Áreas de un departamento (/Departamento/{clave}): un bloque por cuadrito con su ancla. */
.depto-areas { display: grid; gap: 16px; }
.depto-bloque, .depto-paso, .depto-config { scroll-margin-top: 16px; }
.depto-bloque:target, .depto-paso:target .depto-paso-cuerpo, .depto-config:target { box-shadow: 0 0 0 3px #258cfb; border-radius: 8px; }
.depto-area-cabeza { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.depto-area-titulo { margin: 0 0 2px; font-size: 1.15rem; font-weight: 600; color: var(--paq-azul); }
/* Página de una sola sección (/Departamento/{clave}/{área}): miga al departamento arriba del título. */
.seccion-miga { margin: 0 0 2px; font-size: 13px; color: var(--paq-gris); }
.seccion-miga a { color: var(--paq-azul); text-decoration: none; font-weight: 600; }
.seccion-miga a:hover { text-decoration: underline; }
.depto-paso:target .depto-paso-cuerpo { padding-left: 10px; padding-top: 2px; }
/* Áreas-cuadrito dentro de un paso de Paquetería (1 Recolecciones → Portal cliente, Ventanilla, Mesa...): cada una con su ancla. */
.fn-area { scroll-margin-top: 16px; border-radius: 8px; }
.fn-area + .fn-area { margin-top: 18px; }
.fn-area:target { box-shadow: 0 0 0 3px #258cfb; padding: 8px 10px 10px; }
.fn-area-cabeza { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 9px; margin-bottom: 8px; }
.fn-area-titulo { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--paq-azul); }
.fn-area-desc { font-size: 12.5px; color: var(--paq-gris); }
.pir-paso { margin-top: 6px; padding: 6px 0 2px; border-top: 1px solid var(--paq-linea); font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--paq-azul); }
.pir-paso + .pir-cuadrito, .pir-cuadrito-en-paso { border-top: 0; }
.pir-cuadrito-en-paso { padding-left: 30px; }
/* Pirámide de permisos (Roles y permisos, Usuario): Alcance (usuario) → Departamento → Cuadrito → Botón (rol). */
.pir-deptos { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 12px; align-items: start; }
.pir-depto { border: 1px solid var(--paq-borde); border-top: 5px solid var(--paq-azul); border-radius: 8px; background: #fff; padding: 10px 12px 8px; }
.pir-depto.pir-completo { background: #f4f7fa; }
.pir-depto-cabeza { display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; }
.pir-depto-cabeza .depto-svg { color: var(--paq-cobre); flex: none; }
.pir-depto-nombre { font-weight: 700; color: var(--paq-azul); font-size: 1.02rem; flex: 1; min-width: 0; }
.pir-cuenta { font-size: 11.5px; font-weight: 700; color: var(--paq-gris); font-variant-numeric: tabular-nums; }
.pir-etq { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-radius: 4px; padding: 1px 6px; }
.pir-etq-corp { color: #8a5a22; background: #f6ecdf; border: 1px solid #e6cfae; }
.pir-etq-suc { color: #2f5d3a; background: #e9f3ec; border: 1px solid #c7dfcd; }
.pir-depto > .pir-etq { margin: 4px 0 2px 26px; }
.pir-cuadritos { list-style: none; margin: 6px 0 0; padding: 0; }
.pir-cuadrito { border-top: 1px solid var(--paq-linea); padding: 6px 0 4px 18px; }
.pir-cuadrito-cabeza { display: flex; align-items: center; gap: 7px; cursor: pointer; margin: 0; }
.pir-cuadrito-nombre { font-weight: 600; font-size: 14px; flex: 1; min-width: 0; }
.pir-svg { color: var(--paq-cobre); flex: none; }
.pir-fino { margin: 2px 0 0 25px; }
.pir-fino > summary { font-size: 12px; color: var(--paq-gris); cursor: pointer; }
.pir-botones { list-style: none; margin: 4px 0 2px; padding: 0; font-size: 13px; }
.pir-botones li { padding: 1px 0; }
.pir-botones code { font-size: 11px; color: var(--paq-gris); white-space: nowrap; }
.pir-alcance-nota { color: var(--paq-gris); }
/* Pantalla de usuario: niveles numerados. */
.pir-nivel { border: 1px solid var(--paq-borde); border-left: 5px solid var(--paq-azul); border-radius: 8px; padding: 12px 16px 14px; background: #fff; }
.pir-nivel-titulo { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 1rem; font-weight: 700; color: var(--paq-azul); }
.pir-num { width: 26px; height: 26px; border-radius: 50%; background: var(--paq-azul); color: #fff; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pir-opcion { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--paq-borde-btn); border-radius: 8px; padding: 10px 12px; cursor: pointer; height: 100%; }
.pir-opcion:has(input:checked) { border-color: var(--paq-azul); background: #f4f7fa; box-shadow: inset 0 0 0 1px var(--paq-azul); }
.pir-opcion-titulo { font-weight: 700; color: var(--paq-azul); }
.pir-opcion-desc { font-size: 12.5px; color: var(--paq-gris); }
.pir-resumen { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 8px; }
.pir-res-depto { border: 1px solid var(--paq-borde); border-radius: 8px; padding: 8px 10px; background: #fff; }
.pir-res-depto h6 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 13.5px; font-weight: 700; color: var(--paq-azul); }
.pir-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pir-chip { font-size: 12px; border: 1px solid var(--paq-borde-btn); border-radius: 999px; padding: 1px 9px; background: #f4f7fa; color: var(--paq-texto); }
.pir-chip small { color: var(--paq-gris); font-weight: 600; }
.pir-ignorado { color: #8b96a1 !important; background: #f1f2f4 !important; border-color: #dfe3e7 !important; text-decoration: line-through; text-decoration-color: #b8c0c8; }
.pir-res-depto.pir-ignorado { text-decoration: none; }
.pir-res-depto.pir-ignorado h6 { color: #8b96a1; }
.pir-res-nota { font-size: 11.5px; color: #8b96a1; margin: 4px 0 0; }
/* Franja "Pendientes del equipo" de Paquetería (_PendientesEquipo.cshtml): compacta, colapsable, columnas apiladas en celular. */
.pend { margin: 8px 0 24px; border: 1px solid var(--paq-borde); border-top: 4px solid var(--paq-cobre); border-radius: 8px; background: #fbfaf8; font-size: 13.5px; }
.pend-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 8px 14px; }
.pend-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 2px; margin: -4px 0; border: 0; background: none; color: var(--paq-azul); border-radius: 4px; }
.pend-toggle:focus-visible { outline: 2px solid var(--paq-azul); outline-offset: 2px; }
.pend-chevron { color: var(--paq-cobre); transition: transform .15s ease; }
.pend-colapsada .pend-chevron { transform: rotate(-90deg); }
.pend-titulo { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pend-sucursal { color: var(--paq-texto); }
.pend-sucursal strong { color: var(--paq-azul); font-weight: 600; }
/* Selector de alcance (solo corporativo): "Esta sucursal · Todas las sucursales". */
.pend-alcance { display: inline-flex; border: 1px solid var(--paq-borde-btn); border-radius: 999px; overflow: hidden; background: #fff; }
.pend-alcance-op { border: 0; background: none; padding: 2px 11px; font-size: 12px; font-weight: 600; color: var(--paq-gris); line-height: 1.6; }
.pend-alcance-op + .pend-alcance-op { border-left: 1px solid var(--paq-borde-btn); }
.pend-alcance-op[aria-pressed="true"] { background: var(--paq-azul); color: #fff; }
.pend-alcance-op:disabled { color: #b8c0c8; cursor: not-allowed; }
.pend-alcance-op:focus-visible { outline: 2px solid var(--paq-azul); outline-offset: -2px; }
.pend-resumen { display: inline-flex; gap: 6px; }
.pend-chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #fff; border: 1px solid var(--paq-borde); }
.pend-chip-rojo { color: #a32a1f; } .pend-chip-rojo .pend-punto { background: #c0392b; }
.pend-chip-amarillo { color: #8a5a00; } .pend-chip-amarillo .pend-punto { background: #d69e2e; }
.pend-nota { margin-left: auto; font-size: 12px; color: var(--paq-gris); }
.pend-sin-conexion .pend-nota::after { content: " · sin conexión, reintentando"; color: #a32a1f; }
.pend-cuerpo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--paq-linea); }
.pend-cuerpo[hidden] { display: none; }
.pend-col { padding: 10px 14px 12px; min-width: 0; }
.pend-col + .pend-col { border-left: 1px solid var(--paq-linea); }
.pend-col-titulo { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; color: var(--paq-azul); letter-spacing: .08em; text-transform: uppercase; }
.pend-lista { list-style: none; margin: 0; padding: 0; }
.pend-fila { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 3px 6px; margin: 0 -6px; border-radius: 4px; color: var(--paq-texto); text-decoration: none; }
a.pend-fila:hover, a.pend-fila:focus-visible { background: #fff; color: var(--paq-azul); }
a.pend-fila:hover .pend-texto { text-decoration: underline; text-decoration-color: var(--paq-cobre); }
.pend-punto { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #2f8f5b; }
.pend-amarillo .pend-punto { background: #d69e2e; }
.pend-rojo .pend-punto { background: #c0392b; }
.pend-texto { flex: 1; min-width: 0; }
.pend-fila::after { content: ""; flex: none; width: 10px; }
a.pend-fila::after { content: "›"; color: var(--paq-cobre); font-weight: 700; text-align: right; } /* con enlace: abre la pantalla de esos pendientes */
.pend-num { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--paq-azul); }
.pend-amarillo .pend-num { color: #8a5a00; }
.pend-rojo .pend-num { color: #a32a1f; }
@media (max-width: 767.98px) {
  .pend-cuerpo { grid-template-columns: 1fr; }
  .pend-col + .pend-col { border-left: 0; border-top: 1px solid var(--paq-linea); }
  .pend-nota { margin-left: 0; width: 100%; }
  .pend-fila { min-height: 40px; }
  .pend-alcance-op { padding: 6px 12px; }
}
.depto-pendiente { font-size: 13.5px; font-weight: 600; color: #8a5a22; border: 1px dashed #e6cfae; background: #fbfaf8; border-radius: 6px; padding: 10px 14px; display: inline-block; }
.pir-etq-mixto { color: #5b4a1f; background: #f7f1e3; border: 1px solid #e6cfae; text-transform: none; letter-spacing: 0; }
.pir-pendiente { margin: 2px 0 2px 25px; font-size: 12px; font-weight: 600; color: #8a5a22; }
/* Enlaces externos (Samsara, Fleetio, HubSpot, Slack): pestaña con nombre fijo, nunca iframe. Color de acento por servicio (sin logos):
   borde izquierdo de 5 px, fondo tenue, ícono y flecha ↗ del color; nombre en gris oscuro (contraste AA sobre el fondo tenue).
   Para otro servicio: BotonFuncion.Marca y su clase .saas-{marca} con --saas-c / --saas-bg. */
.saas-samsara { --saas-c: #0f62fe; --saas-bg: #eef4ff; }
.saas-fleetio { --saas-c: #1f9d55; --saas-bg: #ecf8f1; }
.saas-hubspot { --saas-c: #ff7a59; --saas-bg: #fff3ef; }
.saas-slack   { --saas-c: #4a154b; --saas-bg: #f6eef6; }
.cuadrito-externo[class*="saas-"], .fn-externo[class*="saas-"] { border-color: var(--saas-c); border-left-width: 5px; background: var(--saas-bg); }
.cuadrito-externo[class*="saas-"] .cuadrito-svg, .cuadrito-externo[class*="saas-"] .cuadrito-num-externo,
.fn-externo[class*="saas-"] .fn-externo-svg { color: var(--saas-c); }
.cuadrito-externo .cuadrito-nombre, .fn-externo { color: #1f2937; }
.cuadrito-externo .cuadrito-contiene { color: #4b5563; }
a.cuadrito-externo[class*="saas-"]:hover, a.cuadrito-externo[class*="saas-"]:focus-visible,
.fn-externo[class*="saas-"]:hover, .fn-externo[class*="saas-"]:focus-visible { border-color: var(--saas-c); background: var(--saas-bg); color: #1f2937; box-shadow: 0 0 0 1px var(--saas-c); }
.fn-externo-svg { color: var(--paq-cobre); flex: none; }
.cuadrito-num-externo { color: var(--paq-cobre); top: 6px; }
.pir-etq-ext { color: #1f2937; background: #eaf1f8; border: 1px solid #c9d8e8; text-transform: none; letter-spacing: 0; }
.pir-etq-ext[class*="saas-"] { background: var(--saas-bg); border-color: var(--saas-c); border-left-width: 4px; }
/* Slack en la barra: RELLENO del color del servicio, texto e íconos blancos (contraste ~13:1). */
.barra-slack.saas-slack { background: var(--saas-c); border: 1px solid var(--saas-c); color: #fff; font-weight: 600; }
.barra-slack.saas-slack:hover, .barra-slack.saas-slack:focus-visible { background: #3a0f3b; border-color: #3a0f3b; color: #fff; }
.barra-slack.saas-slack svg { color: #fff; }
/* Botón Slack de la barra (pestaña con nombre fijo "slack"). */
.barra-slack { display: inline-flex; align-items: center; gap: 5px; min-height: 31px; white-space: nowrap; }
/* El anillo de foco solo con teclado: al volver de la pestaña de Slack en el celular no queda el borde azul. */
.barra-slack:focus:not(:focus-visible), .navbar-toggler:focus:not(:focus-visible) { box-shadow: none; outline: 0; }
/* Bloque de cuenta: Slack · sucursal · usuario y Salir. Escritorio: en línea a la derecha. */
.barra-cuenta { display: flex; align-items: center; gap: 8px; }
.barra-usuario { display: flex; align-items: center; gap: 8px; margin: 0; }
.barra-usuario-nombre { display: inline-flex; align-items: center; gap: 5px; padding: 0; color: var(--paq-texto); text-decoration: none; }
.barra-usuario-nombre:hover { color: var(--paq-azul); }
.barra-usuario-svg { color: var(--paq-gris); }
.selector-sucursal.navbar-text { padding: 0; }
/* Celular, menú desplegado: filas limpias a todo lo ancho, 44 px de alto (dedo), separadas del resto por una línea. */
@media (max-width: 575px) {
  .barra-cuenta { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 10px; padding: 12px 0 6px; border-top: 1px solid var(--paq-borde); }
  .barra-cuenta .barra-slack { justify-content: center; min-height: 44px; font-size: 15px; }
  .barra-cuenta .selector-sucursal { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 12px;
    border: 1px solid var(--paq-borde); border-radius: 6px; background: #f8fafc; font-size: 14px; }
  .barra-cuenta .selector-sucursal.dropdown { padding: 0; border: 0; background: none; }
  .barra-cuenta .selector-sucursal .btn { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; }
  .barra-cuenta .selector-sucursal .dropdown-menu { width: 100%; }
  .barra-usuario { justify-content: space-between; min-height: 44px; }
  .barra-usuario-nombre { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .barra-salir { min-height: 44px; min-width: 96px; }
}
/* Inicio con permisos recortados (1 a 3 departamentos sin contar Catálogos): centrado, una fila, ancho máximo proporcional; Catálogos
   debajo con el mismo ancho. Con 1, cuadritos más grandes (ícono 32 px, texto 16 px) y todos en una fila. */
.inicio-compacto { margin: 0 auto; }
.inicio-compacto-1 { max-width: 960px; }
.inicio-compacto-2 { max-width: 1120px; }
.inicio-compacto-3 { max-width: 1280px; }
.inicio-compacto-1 .depto-card:not(.depto-card-catalogos):not(.depto-card-pasos) .cuadritos { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.inicio-compacto-1 .depto-card:not(.depto-card-catalogos):not(.depto-card-pasos) .cuadrito { flex-direction: column; justify-content: center; text-align: center; min-height: 128px; gap: 8px; }
.inicio-compacto-1 .depto-card:not(.depto-card-catalogos):not(.depto-card-pasos) .cuadrito-svg { width: 32px; height: 32px; }
.inicio-compacto-1 .depto-card:not(.depto-card-catalogos):not(.depto-card-pasos) .cuadrito-nombre { font-size: 16px; }
.inicio-compacto-1 .depto-card:not(.depto-card-catalogos):not(.depto-card-pasos) .cuadrito-contiene { font-size: 12px; }
.inicio-compacto-1 .depto-card-catalogos .cuadrito-nombre { font-size: 14.5px; }
@media (max-width: 575px) {
  .inicio-compacto-1 .depto-card:not(.depto-card-catalogos):not(.depto-card-pasos) .cuadritos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Barra de empleados (dueño, 11-oct-2026): sin menú "Departamentos"; el logo y la casita llevan al inicio en todas las pantallas. */
.barra-marca { gap: 2px; }
.barra-marca .navbar-brand { margin-right: 6px; font-weight: 700; color: var(--paq-azul); }
.barra-inicio { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin-right: 10px;
  border: 1px solid var(--paq-borde-btn); border-radius: 8px; color: var(--paq-azul); background: #fff; }
.barra-inicio:hover, .barra-inicio:focus-visible { border-color: var(--paq-azul); background: #f4f7fa; color: var(--paq-azul); }
/* Entrada "Portal de Colaboradores" (Views/Cuenta/Login, dueño, 11-oct-2026). Foto de la flota con velo #163a5f: con el velo al 72 % el
   píxel más claro de la foto (blanco) queda en ~#57718c y el texto blanco conserva ≥ 4.7:1 (AA). Escritorio: foto a la izquierda a toda
   la altura y tarjeta a la derecha; celular (< 768 px): la foto como franja arriba (flota-movil-780) y el formulario debajo. */
body.entrada { margin: 0; background: #f6f8fa; min-height: 100vh; }
.entrada-pagina { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(380px, 1fr); min-height: 100vh; }
.entrada-foto { position: relative; overflow: hidden; background: var(--paq-azul); min-height: 100vh; }
.entrada-foto picture { position: absolute; inset: 0; }
.entrada-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.entrada-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 58, 95, .72) 0%, rgba(22, 58, 95, .74) 45%, rgba(22, 58, 95, .9) 100%); }
.entrada-lema { position: relative; z-index: 1; height: 100%; min-height: inherit; display: flex; flex-direction: column; justify-content: space-between;
  padding: 40px 56px 64px; color: #fff; }
.entrada-marca { margin: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; color: #fff; display: inline-flex; align-items: center; gap: 12px; }
.entrada-marca::after { content: ""; width: 36px; height: 3px; background: var(--paq-cobre); border-radius: 2px; }
.entrada-titulo { margin: 0 0 14px; font-size: clamp(2.4rem, 4.2vw, 3.9rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.025em; color: #fff; max-width: 12ch; }
.entrada-frase { margin: 0; max-width: 30ch; font-size: clamp(1.15rem, 1.6vw, 1.45rem); font-weight: 500; line-height: 1.35; color: #fff; }
.entrada-panel { display: flex; align-items: center; justify-content: center; padding: 48px 40px; }
.entrada-tarjeta { width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--paq-borde); border-top: 6px solid var(--paq-azul); border-radius: 10px;
  padding: 30px 30px 26px; box-shadow: 0 10px 30px rgba(22, 58, 95, .08); }
.entrada-ceja { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a5a22; }
.entrada-subtitulo { margin: 0 0 20px; font-size: 1.5rem; font-weight: 700; color: var(--paq-azul); letter-spacing: -0.01em; }
.entrada .form-label { font-size: 14px; font-weight: 600; color: var(--paq-texto); margin-bottom: 6px; }
.entrada-campo { min-height: 44px; border-color: var(--paq-borde-btn); font-size: 16px; }
.entrada-campo:focus { border-color: var(--paq-azul); box-shadow: 0 0 0 3px rgba(22, 58, 95, .2); }
.entrada-boton { min-height: 44px; background: var(--paq-azul); border: 1px solid var(--paq-azul); color: #fff; font-weight: 600; font-size: 16px; }
.entrada-boton:hover, .entrada-boton:focus-visible { background: #0f2a46; border-color: #0f2a46; color: #fff; }
.entrada-boton:focus-visible, .entrada-google:focus-visible { outline: 3px solid var(--paq-cobre); outline-offset: 2px; box-shadow: none; }
.entrada-o { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--paq-gris); font-size: 13px; }
.entrada-o::before, .entrada-o::after { content: ""; flex: 1; height: 1px; background: var(--paq-linea); }
.entrada-google { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #fff;
  border: 1px solid var(--paq-borde-btn); color: var(--paq-texto); font-weight: 600; font-size: 15px; }
.entrada-google:hover { border-color: var(--paq-azul); background: #f4f7fa; color: var(--paq-azul); }
.entrada-error ul { margin: 0 0 14px; padding: 10px 12px; list-style: none; border-radius: 6px; background: #fdecec; color: #8a1c1c; font-size: 14px; }
.entrada-error.validation-summary-valid { display: none; }
.entrada-aviso { margin: 0 0 14px; padding: 10px 12px; border-radius: 6px; background: #fbf4ea; color: #6b4415; font-size: 14px; }
.entrada-ayuda { margin: 18px 0 0; font-size: 13px; color: var(--paq-gris); }
@media (max-width: 991.98px) {
  .entrada-pagina { grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr); }
  .entrada-lema { padding: 32px 32px 48px; }
}
@media (max-width: 767.98px) {
  .entrada-pagina { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .entrada-foto { min-height: 0; height: 250px; }
  .entrada-img { object-position: 60% 50%; }
  .entrada-lema { padding: 18px 20px 22px; }
  .entrada-marca { font-size: 1.25rem; }
  .entrada-titulo { font-size: 2rem; max-width: none; margin-bottom: 8px; }
  .entrada-frase { font-size: 1.05rem; }
  .entrada-panel { padding: 20px 16px 32px; align-items: flex-start; }
  .entrada-tarjeta { padding: 24px 20px 22px; }
}
/* Fila del medio en 4 columnas (Tráfico ya no está arriba): cuadritos un poco más compactos para que "Liquidaciones" quepa entero. */
@media (min-width: 1200px) {
  .inicio-medio.inicio-cols-4 .cuadrito { padding: 12px 8px 12px 9px; gap: 7px; }
  .inicio-medio.inicio-cols-4 .cuadrito-svg { width: 22px; height: 22px; }
  .inicio-medio.inicio-cols-4 .cuadrito-nombre { font-size: 13px; }
}