/* =========================
   1) BASE / VARIABLES / GENERALES
   ========================= */
:root{
  --amarillo:#FFE100;
  --amarillo-oscuro:#E6C931;
  --rojo:#BD0912;
  --azul:#085591;
  --negro:#000000;
}

/* =========================

   4) NOTIFICACIONES NAVEGADOR

   ========================= */

#navbarNotificacionesBtn.oc-bell-has-unread {
  color: var(--azul) !important;
}

#navbarNotificacionesBtn.oc-bell-has-unread #navbarNotificacionesBadge {
  animation: ocNotifBadgePulse 1.8s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(189, 9, 18, .35);
}

#navbarNotificacionesBtn.oc-bell-ringing i {
  animation: ocNotifBellRing .85s ease-in-out 2;
  transform-origin: top center;
}

.oc-notif-permission-host {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1094;
  width: min(380px, calc(100vw - 24px));
}

.oc-notif-permission-card {
  border: 1px solid rgba(8, 85, 145, .14);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
  padding: 16px 16px 14px;
}

.oc-notif-permission-title {
  color: #12263a;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.25;
  margin-bottom: 8px;
}

.oc-notif-permission-body {
  color: #475467;
  font-size: .92rem;
  line-height: 1.5;
  margin-bottom: 14px;
}

.oc-notif-permission-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.oc-notif-permission-primary,
.oc-notif-permission-secondary {
  border-radius: 999px;
  padding: 9px 14px;
  font-size: .84rem;
  font-weight: 700;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}

.oc-notif-permission-primary {
  border: none;
  background: var(--azul);
  color: #fff;
}

.oc-notif-permission-primary:hover {
  background: #0a69b3;
  box-shadow: 0 10px 20px rgba(8, 85, 145, .22);
  transform: translateY(-1px);
}

.oc-notif-permission-primary:disabled {
  opacity: .7;
  cursor: wait;
  transform: none;
  box-shadow: none;
}

.oc-notif-permission-secondary {
  border: 1px solid rgba(8, 85, 145, .22);
  background: #fff;
  color: #234;
}

.oc-notif-permission-secondary:hover {
  background: #eef5fc;
  transform: translateY(-1px);
}

@keyframes ocNotifBellRing {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(16deg); }
  40% { transform: rotate(-12deg); }
  60% { transform: rotate(9deg); }
  80% { transform: rotate(-6deg); }
}

@keyframes ocNotifBadgePulse {
  0% { box-shadow: 0 0 0 0 rgba(189, 9, 18, .35); }
  70% { box-shadow: 0 0 0 10px rgba(189, 9, 18, 0); }
  100% { box-shadow: 0 0 0 0 rgba(189, 9, 18, 0); }
}

@media (max-width: 767.98px) {
  .oc-notif-permission-host {
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
  }
}

/* Tipografía base */
body{ font-family:'Montserrat',sans-serif; }

/* Títulos */
.titulo{ font-family:'Roboto Black',sans-serif; font-weight:900; font-size:2rem; }
.subtitulo{ font-family:'Roboto Medium',sans-serif; font-weight:500; font-size:1.25rem; }

/* Botones de marca */
.btn-primario{ background-color:var(--azul); color:#fff; border:none; }
.btn-primario:hover{ background-color:var(--amarillo-oscuro); color:var(--negro); }
.btn-error{ background-color:var(--rojo); color:#fff; border:none; }
.btn-error:hover{ background-color:#990000; }

/* Tablas “corporativas” */
.tabla-base{ border:1px solid var(--amarillo-oscuro); border-radius:.5rem; }
.tabla-base th{
  background-color:var(--amarillo);
  color:var(--negro);
  font-family:'Roboto Medium',sans-serif;
}

/* Enlaces */
a{ color:var(--azul); text-decoration:none; font-weight:500; }
a:hover{ color:var(--rojo); text-decoration:underline; }

/* Modales (colores de encabezado) */
.modal-header.bg-primary{ background-color:var(--azul); }
.modal-footer .btn-primario{ background-color:var(--azul); color:#fff; }
.modal-footer .btn-primario:hover{ background-color:var(--amarillo-oscuro); color:var(--negro); }
.modal-header.info{ background-color:#f8f9fa; color:var(--negro); }
.modal-header.exito{ background-color:var(--azul); color:#fff; }
.modal-header.error{ background-color:var(--rojo); color:#fff; }

/* Espaciados cómodos por defecto */
.container-fluid>.row{ row-gap:.5rem; }

/* Imágenes fluidas */
main img,.card img,.modal img{ max-width:100%; height:auto; }

/* Evitar desbordes de textos largos en componentes generales (no en celdas de tabla) */
.card,.list-group-item,.badge,.btn{ overflow-wrap:anywhere; }

/* Celdas con números/documentos largos: tipografía monoespaciada */
td[data-type="doc"],td[data-type="id"],td[data-type="hash"]{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  letter-spacing:.2px;
}

/* Navbar siempre visible y por debajo del modal */
.navbar{ position:sticky; top:0; z-index:1020 !important; }
.navbar-brand,.navbar .fw-bold,.navbar .nav-link{ white-space:nowrap; }
.nav-user-name{ display:none; }              /* se muestra desde SM en adelante */

/* Tablas en escritorio: comportamiento normal (sin romper palabras) */
.table-responsive{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table th,.table td{ white-space:nowrap; word-break:normal; overflow-wrap:normal; }
/* Utilidad: permitir quiebres si la agregas en el HTML */
.table th.wrap,.table td.wrap{ white-space:normal; overflow-wrap:anywhere; }

/* Botón de ruta: no partir palabras ni encoger en flex */
#btn-ruta{
  white-space: nowrap;     /* evita saltos de línea */
  overflow-wrap: normal;   /* anula el anywhere global de .btn */
  word-break: keep-all;    /* no corte dentro de palabras */
  flex-shrink: 0;          /* que el flex no lo aplaste */
}

.notif-center { position: relative; display: inline-block; margin-right: 12px; }
.notif-bell { background: transparent; border: 0; cursor: pointer; position: relative; }
.notif-count { position: absolute; top: -6px; right: -6px; font-size: 11px; padding: 2px 6px; border-radius: 999px; background: #e11d48; color: #fff; }
.notif-dropdown { position: absolute; right: 0; top: 120%; width: 320px; max-height: 380px; overflow: auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 10px 25px rgba(0,0,0,.08); z-index: 99; }
.notif-header, .notif-footer { padding: 8px 12px; border-bottom: 1px solid #f1f5f9; }
.notif-footer { border-top: 1px solid #f1f5f9; border-bottom: 0; }
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-list li { padding: 10px 12px; border-bottom: 1px solid #f8fafc; }
.notif-list li a { display: block; text-decoration: none; color: inherit; }
.notif-empty { padding: 12px; color: #64748b; }

/* =========================
   2) ESCRITORIO (≥ 992px)
   ========================= */
  /* ===== estilos rutas entrega ===== */
  /* Encabezado compacto y alineado */
  .rt-card .muted { color: #6c757d; }
  .rt-card .value { font-weight: 600; color: #212529; }
  .rt-count .lbl { font-size: .85rem; color: #6c757d; margin-bottom: 0; }
  .rt-count .val { font-weight: 700; }

  /* Base (mobile-first): NO truncar en ninguna tabla por defecto */
  .rt-table th,
  .rt-table td {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Chips de ruta — versión sobria */
.rt-chip{
  display:inline-block;
  padding:.32rem .6rem;
  border-radius:999px;
  border:1px solid currentColor;
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.2px;
  text-transform:uppercase;
  line-height:1;
  white-space:nowrap;
}

/* Contiene "RUTA" -> azul (formal) */
.rt-chip--ruta{
  color:#0d6efd;                 /* Bootstrap primary */
  border-color:#0d6efd;
  background:rgba(13,110,253,.08);
}

/* NO contiene "RUTA" -> naranja/rojo (llama la atención) */
.rt-chip--alert{
  color:#fd7e14;                 /* Bootstrap orange (puedes cambiar a #dc3545 si prefieres rojo) */
  border-color:#fd7e14;
  background:rgba(253,126,20,.10);
}

/* Toggle cajón: un tris más oscuro */
.rt-card .btn-toggle{
  border-color:#d1d7de;   /* antes #e9ecef */
  border-width:1px;
  color:#5b6770;          /* texto/ícono un poco más marcado */
  background:rgba(0,0,0,.02);
  padding:.35rem .5rem;
  border-radius:.6rem;
  transition:color .15s, border-color .15s, background .15s, box-shadow .15s;
}
.rt-card .btn-toggle:hover,
.rt-card .btn-toggle:focus{
  border-color:#b8c2cc;
  background:rgba(0,0,0,.05);
  box-shadow:0 0 0 .15rem rgba(13,110,253,.08);
  color:#4a5563;
}
.rt-card .btn-toggle[aria-expanded="true"]{
  color:#0d6efd;
  border-color:#9ec5fe;
  background:#eef4ff;
  box-shadow:none;
}


  @media (min-width: 768px) {
    /* En escritorio, truncar SOLO las tablas de salidas DENTRO de los cajones */
    .rt-card .rt-table { table-layout: fixed; }
    .rt-card .rt-table th,
    .rt-card .rt-table td {
      white-space: nowrap !important;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: normal;
      overflow-wrap: normal;
    }
      /* Anchuras por columna en la tabla del cajón (>= md) */
  .rt-card .rt-table thead th:nth-child(1),
  .rt-card .rt-table tbody td:nth-child(1) { width: 6ch; }   /* Orden */

  .rt-card .rt-table thead th:nth-child(2),
  .rt-card .rt-table tbody td:nth-child(2) { width: 9ch; }   /* Salida */

  .rt-card .rt-table thead th:nth-child(3),
  .rt-card .rt-table tbody td:nth-child(3) { width: 12ch; }  /* Cliente (ID) */

  .rt-card .rt-table thead th:nth-child(4),
  .rt-card .rt-table tbody td:nth-child(4) { width: 22ch; }  /* Nombre */

  .rt-card .rt-table thead th:nth-child(5),
  .rt-card .rt-table tbody td:nth-child(5) { width: 30ch; }  /* Dirección */

  .rt-card .rt-table thead th:nth-child(6),
  .rt-card .rt-table tbody td:nth-child(6) { width: 26ch; }  /* Observaciones */

  .rt-card .rt-table thead th:nth-child(7),
  .rt-card .rt-table tbody td:nth-child(7) { width: 7ch; }   /* Cant. */

  .rt-card .rt-table thead th:nth-child(8),
  .rt-card .rt-table tbody td:nth-child(8) { width: 12ch; }  /* Acción */

  }

  /* Modal: forzar SIEMPRE multilinea (sin elipsis), gane a cualquier otro estilo */
  #rtModal .rt-table { table-layout: auto !important; }
  #rtModal .rt-table th,
  #rtModal .rt-table td,
  #rtModal .rt-table .text-truncate,
  #rtModal .rt-table [class*="text-truncate"] {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
  #rtModal .rt-table th,
  #rtModal .rt-table td { width: auto !important; max-width: none !important; }

  /* Espacio al final del listado de cajones */
  #rtResultados { padding-bottom: 1rem; margin-bottom: 1.25rem; }
  #rtResultados .rt-card:last-of-type { margin-bottom: 1.25rem; }
  #vista-rutas { padding-bottom: 1.25rem; }

  /* Móvil: mover la flecha al borde derecho del cajón */
  @media (max-width: 767.98px) {
    .rt-card { position: relative; }
    .rt-card [data-bs-toggle="collapse"] {
      position: absolute;
      top: .5rem;
      right: .5rem;
      margin: 0;
    }
  }

  /* ===== Header bonito en modal ===== */
#rtModal .rt-stats { gap: 1.25rem; }
#rtModal .rt-stat .lbl { font-size: .8rem; color: #6c757d; margin-bottom: .125rem; }
#rtModal .rt-stat .val { font-weight: 600; }

#rtModal .rt-info-card {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: .5rem;
}

#rtModal .rt-info-card i {
  font-size: 1rem;
  color: #6c757d;
  margin-top: .2rem;
}

#rtModal .rt-info-card .muted { color: #6c757d; }
#rtModal .rt-info-card .fw-semibold { font-weight: 600; }

/* Etiquetas y valores de las stats del modal */
#rtModalDetalle .rt-stats-row .lbl { font-size: .8rem; color: #6c757d; margin-bottom: .125rem; }
#rtModalDetalle .rt-stats-row .val { font-weight: 600; }

/* Tarjeta de info del modal (cliente/dirección/observación) */
#rtModalDetalle .rt-info-card {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: .5rem;
}
#rtModalDetalle .rt-info-card i { font-size: 1rem; color: #6c757d; margin-top: .2rem; }
#rtModalDetalle .rt-info-card .muted { color: #6c757d; }
#rtModalDetalle .rt-info-card .fw-semibold { font-weight: 600; }

/* Botón del cajón del mapa: más visible y con estados claros */
#rtMapToggle {
  border-width: 1.5px;
}
#rtMapToggle:hover,
#rtMapToggle:focus {
  box-shadow: 0 0.25rem 0.5rem rgba(13,110,253,.15); /* acorde a primary */
}

/* Cuando está abierto, que se vea como "activo" */
#rtMapToggle[aria-expanded="true"] {
  color: #fff;
  background-color: #0d6efd;   /* primary */
  border-color: #0d6efd;
}

/* Resaltado de filas que coinciden con la búsqueda */
.rt-hit { background: #fff9db; }         /* amarillo suave */
.rt-hit td { font-weight: 500; }
mark { background: #ffe08a; padding: 0 .15em; border-radius: .2rem; }


@media (min-width:992px){

  /* Nombre de usuario visible en navbar a partir de SM (y ≥992 por cascada) */
  .nav-user-name{ display:inline; }

  /* Asignar permisos: grupo superior en una fila y botones horizontales */
  #permisos-app .d-flex.gap-2.align-items-center{
    flex-wrap:nowrap !important;
    gap:.5rem !important;
  }
  #pu-usuario{ min-width:320px; width:auto; }
  #pu-recargar,#pu-guardar{
    writing-mode:horizontal-tb !important;
    transform:none !important;
    position:static !important;
    display:inline-flex !important;
    align-items:center; justify-content:center;
    height:auto !important; width:auto !important;
    white-space:nowrap;
    padding:.35rem .8rem;           /* tamaño tipo btn-sm */
    min-width:96px;
    margin:0 !important;
  }
  #permisos-app [data-orient="vertical"],
  #permisos-app .btn-vertical,
  #permisos-app .permisos-actions-vertical{
    writing-mode:horizontal-tb !important;
    transform:none !important;
    position:static !important;
    height:auto !important; width:auto !important;
  }
}


  /* Botón redondo con solo icono (muy compacto) */
  .rt-sta{
    display:inline-grid;place-items:center;
    width:1.75rem;height:1.75rem;border-radius:50%;
    border:1px solid;line-height:1;background:#fff;cursor:default;
    transition:transform .08s ease;
  }
  .rt-sta i{ font-size:.95rem }
  .rt-sta:hover{ transform:scale(1.05) }

  /* Colores por estado */
  .rt-sta--ok{        color:#166534; background:#dcfce7; border-color:#86efac }   /* COMPLETO */
  .rt-sta--warn{      color:#92400e; background:#fef3c7; border-color:#fcd34d }   /* PARCIAL  */
  .rt-sta--danger{    color:#991b1b; background:#fee2e2; border-color:#fca5a5 }   /* NO_ENT.   */
  .rt-sta--info{      color:#1e40af; background:#dbeafe; border-color:#93c5fd }   /* EN CAMINO */
  .rt-sta--muted{     color:#374151; background:#f3f4f6; border-color:#e5e7eb }   /* PENDIENTE */

  /* Ancho mínimo de la columna para que no se corte */
  .rt-col-estado{ min-width:72px; text-align:center }

  /* Evitar hueco entre “Estado” y “Acción” */
  .rt-col-obs{ width:40%; }
  @media (max-width: 991.98px){ .rt-col-obs{ width:auto; } }

  .rt-col-accion{ width:110px; text-align:center; white-space:nowrap; }
  .rt-col-accion .btn{ min-width:96px; }

  /* Reserva de ancho fijo para el chip en escritorio y mantiene fluido en móvil */
.rt-chip-slot{ display:flex; }
@media (min-width: 992px){      /* >= lg */
  .rt-chip-slot{ flex: 0 0 140px; max-width: 140px; }  /* ajusta 140px si quieres */
}

/* === SOLO ESCRITORIO (≥ 992px) === */
@media (min-width: 992px) {
  /* Reserva de ancho para el chip */
 .rt-chip-slot{
    flex: 0 0 200px;   /* ancho reservado */
    max-width: 200px;  /* evita que invada la placa */
  }

  /* Línea de cabecera en una sola fila */
  .rt-head-line{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:nowrap;
  }

  /* Par clave/valor compacto; sin saltos */
  .rt-kv{
    display:flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
  }
  .rt-kv .value{
    max-width:280px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

/* Más ancho para el valor en pantallas muy grandes (≥ 1200px) */
@media (min-width: 1200px){
  .rt-kv .value{ max-width:360px; }
}

/* === Móvil: chip abajo-izquierda, "Ver mapa" abajo-derecha, flecha arriba-derecha === */
@media (max-width: 991.98px){
  /* Asegura un ancla para posicionar la flecha */
  .rt-card .card-body{ position:relative; padding-right:2.5rem; }

  /* La fila de acciones ocupa todo el ancho y reparte chip / mapa */
  .rt-actions{
    display:flex;
    align-items:center;
    justify-content:space-between; /* chip a la izq, mapa a la der */
    margin-top:.5rem;
  }

  /* Orden explícito por si hay estilos previos */
  .rt-actions .rt-chip{ order:1; }
  .rt-actions .btn-ver-mapa{ order:2; margin-left:auto; }

  /* La flecha (toggle) se mantiene arriba a la derecha */
  .rt-actions .btn-toggle{
    position:absolute;
    top:.5rem;
    right:.5rem;
  }
}


/* === Rutas: alineación estable en escritorio + orden en móvil === */

/* Escritorio (≥ 992px):
   - La columna derecha (chip/acciones) se mantiene estable
   - La flecha vuelve a flujo normal (no absoluta) */
@media (min-width: 992px){
  .rt-card .col-lg-5{ display:flex; align-items:center; gap:1rem; flex-wrap:nowrap; }
  .rt-card .col-lg-4{ display:flex; justify-content:center; }
  .rt-card .col-lg-3{ 
    display:flex; justify-content:flex-end; align-items:center; gap:.5rem;
    min-width: 300px;            /* ancho estable para chip + botón + flecha */
  }
  .rt-card [data-bs-toggle="collapse"]{
    position: static;            /* la flecha NO absoluta en desktop */
    margin: 0;
  }
}

/* Móvil (≤ 991.98px):
   - Chip y botón de mapa (si existe) se van al “pie” de la tarjeta:
     chip a la izquierda, mapa a la derecha
   - NO se duplica nada: es el mismo chip, solo reordenamos */
@media (max-width: 991.98px){
  .rt-actions{
    width:100%;
    display:flex; align-items:center; justify-content:space-between;
    margin-top:.5rem;
  }
  .rt-actions .rt-chip{ order:0; }            /* izquierda */
  .rt-actions .btn-ver-mapa{ order:1; margin-left:auto; }  /* derecha (si existe) */
  /* La flecha sigue con la regla que ya tenías (absoluta en móvil) */
}

/* ---- Contadores del encabezado (Facturas / Clientes / Productos) ---- */
@media (min-width: 992px) {
  /* contenedor de los 3 contadores del cajón */
  .rt-card .d-flex.justify-content-evenly.text-center {
    justify-content: center; /* centrados */
    gap: 24px;               /* separación visible entre ellos */
  }

  /* cada contador ocupa un mínimo para que no se “aplasten” */
  .rt-card .rt-count {
    min-width: 84px;         /* ajusta 76–96px a tu gusto */
    text-align: center;
  }

  .rt-card .rt-count .lbl {
    display: block;          /* label arriba */
    /* opcional: tamaño/color si quieres */
    /* font-size: .85rem; color: #6b7280; */
  }
  .rt-card .rt-count .val {
    display: block;          /* valor debajo */
    font-weight: 600;
  }
}

/* En pantallas pequeñas no tocamos nada: ya se veía bien */

/* Móvil: separa la etiqueta del valor en Placa / Conductor */
@media (max-width: 575.98px) {
  .rt-card .rt-kv .value {
    margin-left: .35rem;   /* espacio entre “Placa” y “JOX011”, etc. */
  }
  /* opcional, para asegurar simetría */
  .rt-card .rt-kv .muted {
    margin-right: .05rem;
  }
}



/* =========================
   3) RESPONSIVE (TABLET/MÓVIL)
   ========================= */

/* Tablet & móvil (≤ 991.98px) */
@media (max-width:991.98px){

  /* Evitar cortes de contenido en vistas con sidebar interno */
  html,body{ overflow-y:auto !important; }
  #wrapper{ overflow:visible !important; }
  #page-content-wrapper{
    overflow-x:visible !important;
    overflow-y:visible !important;
    height:auto !important;
    min-height:100dvh;
  }

  /* Formularios multicolumna → una columna */
  .form-row .col-6,.form-row .col-4,.form-row .col-3{
    width:100%; flex:0 0 100%; max-width:100%;
  }
  .form-row>[class*="col-"]+[class*="col-"]{ margin-top:.5rem; }

  /* Tablas “stackable”: no hay scroll horizontal, se ven como tarjetas */
  .table.stackable thead{ display:none; }
  .table.stackable{                /* rompe table-layout:fixed si viene inline */
    display:block; width:100% !important; table-layout:auto !important;
  }
  .table.stackable colgroup,.table.stackable col{ display:none !important; }
  .table.stackable tbody,.table.stackable tr{ display:block; width:100%; }

  .table.stackable tbody tr{
    display:block;
    margin-bottom:.75rem;
    border:1px solid #dee2e6;
    border-radius:.5rem;
    background:#fff;
    overflow:hidden;
  }
  .table.stackable tbody td{
    display:flex; align-items:flex-start; justify-content:flex-start;
    gap:.6rem; padding:.55rem .75rem;
    white-space:normal; word-break:break-word; overflow-wrap:anywhere;
    border-top:1px dashed #eee;
  }
  .table.stackable tbody td:first-child{ border-top:none; }
  .table.stackable tbody td::before{
    content:attr(data-label);
    font-weight:600; opacity:.8;
    flex:0 0 46%; max-width:50%;
    margin-right:.25rem;
  }
  .table.stackable tbody td:last-child{
    border-top:1px solid #f3f4f6; flex-wrap:wrap;
  }
  .table.stackable tbody td:last-child .btn{
    padding:.45rem .7rem; font-size:.92rem; line-height:1.2;
    margin-right:.5rem; margin-top:.25rem;
  }

  /* Quitar ocultamientos y truncados que rompen los valores en modo stack */
  .table.stackable tr>.d-none,
  .table.stackable tr>.d-sm-none,
  .table.stackable tr>.d-md-none,
  .table.stackable tr>.d-lg-none,
  .table.stackable tr>.d-xl-none,
  .table.stackable tr>.d-xxl-none{ display:flex !important; }
  .table.stackable .d-none,
  .table.stackable .d-sm-none,
  .table.stackable .d-md-none,
  .table.stackable .d-lg-none,
  .table.stackable .d-xl-none,
  .table.stackable .d-xxl-none{ display:inline !important; }
  .table.stackable .text-truncate,
  .table.stackable .text-nowrap{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    max-width:100% !important;
  }

  /* Árbol de permisos: fluido, sin scroll lateral y con toolbar ordenada */
  #permisosTree,.permisos-tree,.tree-container{
    min-width:0 !important; width:100% !important;
    overflow-x:hidden !important; overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    white-space:normal; word-break:break-word;
    max-width:100%;
  }
  .toolbar-permisos,.btn-group-permisos,.permisos-actions,.filtros-acciones{
    display:flex !important; flex-wrap:wrap !important; align-items:center;
    gap:.5rem; margin-bottom:.5rem;
  }
  .toolbar-permisos .btn,.btn-group-permisos .btn,.permisos-actions .btn{
    padding:.5rem .8rem; font-size:.95rem; line-height:1.2;
  }

  /* Botones verticales (si algún JS los pone así) → horizontales */
  .btn-vertical,.acciones-vertical,.permisos-actions-vertical,
  [data-orient="vertical"],[style*="writing-mode:vertical"],
  [style*="writing-mode: vertical"]{
    writing-mode:horizontal-tb !important;
    transform:none !important;
    position:static !important;
    display:inline-flex !important;
    flex-direction:row !important;
    height:auto !important; width:auto !important;
    margin:.25rem .5rem .5rem 0 !important; inset:auto !important;
  }
  .permisos-actions-vertical,.permisos-sticky,.permisos-toolbar-right{
    position:static !important; right:auto !important; left:auto !important;
    top:auto !important; bottom:auto !important;
    writing-mode:horizontal-tb !important; transform:none !important;
  }

  /* Encabezados/elementos del árbol que envuelvan correctamente */
  .tree-container .list-group-item,.jstree-anchor,.tree-node,.tree-item{
    white-space:normal !important; word-break:break-word !important;
  }

  /* Botones y toolbars globales más compactos */
  .page-actions,.toolbar,.filtros-acciones,.btn-toolbar,.btn-group{ gap:.5rem; }
  .page-actions,.toolbar,.filtros-acciones,.btn-toolbar,.btn-group{
    display:flex; flex-wrap:wrap; align-items:center;
  }
  .btn{ padding:.45rem .8rem; font-size:.95rem; line-height:1.2; }
  .btn.w-100{ width:auto !important; }
}

/* XS (≤ 575.98px) */
@media (max-width:575.98px){

  /* Tamaños de texto/controles algo más contenidos */
  .titulo{ font-size:1.35rem; }
  .btn{ padding:.6rem .9rem; }
  .form-control,.form-select{ font-size:.95rem; }
  .navbar .fw-bold{ font-size:1rem; }
  .card{ margin-bottom:.75rem; }
  .container-fluid .row{ row-gap:.75rem; }

  /* Navbar: título centrado; solo ícono de usuario (oculta nombre) */
  .navbar .d-flex>.fw-bold{
    position:absolute; left:50%; transform:translateX(-50%);
  }
  .nav-user-name{ display:none; }

  /* Modales full-screen y usables en móvil */
  .modal .modal-dialog{
    margin:0 !important; max-width:none !important; width:100% !important; height:100% !important;
  }
  .modal .modal-content{
    height:100%; border-radius:0; background-color:#fff;
    padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
  }
  .modal .modal-header{
    position:sticky; top:0; z-index:2; background:#fff; border-bottom:1px solid #e9ecef;
    display:flex !important; align-items:center; justify-content:space-between;
    min-height:3.25rem; padding:.5rem .75rem;
  }
  .modal .modal-title{
    flex:1 1 auto; margin:0 !important; text-align:center; font-size:1.1rem; line-height:1.3;
    white-space:normal; color:#212529;
  }
  .modal .modal-header.bg-primary .modal-title,
  .modal .modal-header.exito .modal-title,
  .modal .modal-header.error .modal-title{ color:#fff; }
  .modal .btn-close{ margin-left:auto; }
  .modal .modal-body{ overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .modal .modal-footer{
    position:sticky; bottom:0; z-index:2; background:#fff; border-top:1px solid #e9ecef;
  }

  /* Navbar compacta */
  .navbar .nav{ row-gap:.25rem; }
  .navbar .nav-link{ padding:.4rem .5rem; }
  .navbar-brand{ font-size:1rem; }

  #btn-ruta{ font-size:.95rem; }  /* ~5% más pequeño solo en móvil */

}

/* === Permisos (mobile fix) ============================================ */
@media (max-width: 991.98px) {
  /* Cabecera y grupo de controles: que envuelvan bien */
  #permisos-app .d-flex.align-items-center.justify-content-between { 
    flex-wrap: wrap !important; gap: .5rem 1rem !important;
  }
  #permisos-app .d-flex.gap-2.align-items-center { 
    flex-wrap: wrap !important; 
  }

  /* Select de usuario y filtro: ancho fluido */
  #pu-usuario { min-width: 0 !important; width: 100% !important; }
  #pu-filtro   { min-width: 0 !important; width: 100% !important; margin-left: 0 !important; }

  /* Árbol: sin ancho mínimo ni scroll lateral */
  #pu-tree {
    min-width: 0 !important; width: 100% !important;
    overflow-x: hidden !important; overflow-y: auto !important;
    max-height: 65vh; -webkit-overflow-scrolling: touch;
    white-space: normal !important; word-break: break-word !important;
  }

  /* Botones “verticales” forzados por inline styles -> horizontales */
  #pu-recargar, #pu-guardar,
  #permisos-app [data-orient="vertical"],
  #permisos-app [style*="writing-mode"] {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    position: static !important;
    display: inline-flex !important;
    height: auto !important; width: auto !important;
    inset: auto !important;
    margin: .25rem .5rem .25rem 0 !important;
  }

  /* Si existiera un rail/columna fija a la derecha, llévala al flujo */
  #permisos-app .permisos-actions-vertical,
  #permisos-app .permisos-toolbar-right,
  #permisos-app .pu-rail {
    position: static !important;
    right: auto !important; left: auto !important;
    top: auto !important; bottom: auto !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
  }
}

/* === Permisos (desktop normalize) ===================================== */
@media (min-width: 992px) {
  /* Controles en una línea */
  #permisos-app .d-flex.gap-2.align-items-center {
    flex-wrap: nowrap !important; gap: .5rem !important;
  }
  #pu-usuario { min-width: 320px; width: auto; }

  /* Botones normales, horizontales */
  #pu-recargar, #pu-guardar {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    position: static !important;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    white-space: nowrap;
    padding: .35rem .8rem;
    min-width: 96px;
    height: auto !important; width: auto !important;
    margin: 0 !important;
  }
}