/* LA HOJA DE ESTILOS DEL BACK OFFICE.

   Vivia dentro de templates/base.html (700 lineas en un <style>) y viajaba
   entera en cada pagina. Desde el 07/11/2026 es un archivo estatico: el
   navegador la guarda y una sola hoja es la que se cuida. El orden de las
   reglas es el mismo que tenia: primero la identidad, al final la capa del
   formato del tablero de Indicadores que gana por especificidad. */

/* ── Identidad Exacto Logistic ───────────────────────────────────────────
   rojo #e20000 · tinta #0e0e0e · gris #63666d · líneas #e6e4f0 · fondo #f8f7ff
   Inter para texto, Montserrat para títulos.
   El rojo de marca solo va en el cromo (nav activa, CTA), nunca en un dato. */
:root{
  /* El fondo es lavanda muy claro, NO blanco, y es a proposito.
     Se probo en blanco el 03/09/2026 y se revirtio el mismo dia: con el
     fondo y las tarjetas del mismo blanco lo unico que separa es el
     borde, y las pantallas "se pierden" —palabras del dueno—. Se intento
     compensar subiendo el borde y anadiendo sombra, y aun asi no
     convencio. El tinte hace el trabajo que ni el borde ni la sombra
     hacen: da a las tarjetas blancas un papel sobre el que apoyarse.
     Si vuelve a proponerse el blanco, esto ya se intento. */
  --brand:#e20000;--ink:#0e0e0e;--mut:#63666d;--line:#e6e4f0;--bg:#f8f7ff;
  --card:#ffffff;--sub:#fafbfc;--faint:#9aa1ac;
  --red:#b42318;--amber:#b54708;--grn:#067647;--blu:#175cd3;--side:#141216;
  /* Acción secundaria: mismo rojo de marca pero en tinte, para que una
     tarjeta con varias herramientas tenga jerarquía en vez de ser un muro
     rojo. Medido: #b80000 sobre #fef3f2 da 6.36:1, mejor que el 4.96:1 del
     blanco sobre el rojo sólido. */
  --brand-hover:#b80000;
  /* El fondo del tinte apenas se separa de la tarjeta blanca (1.09:1), asi
     que lo que delimita el boton es el borde: #d96b62 da 3.37:1 y cumple
     el minimo de 3:1 para bordes de controles. Un rosa mas claro se veia
     mejor pero dejaba el boton sin contorno perceptible. */
  --soft-bg:#fef3f2;--soft-ink:#b80000;--soft-br:#d96b62;
}
/* Paleta oscura: no existe en el reporte, se derivó de su color de barra
   lateral (#141216) manteniendo las mismas relaciones de contraste. */
.dark{
  --ink:#f2f0f5;--mut:#a09da8;--line:#2b282f;--bg:#141216;
  --card:#1c1a1f;--sub:#211f25;--faint:#7c7986;
  --red:#f87171;--amber:#fbbf24;--grn:#4ade80;--blu:#7aa7f5;
  /* En oscuro el rojo de marca como TEXTO da 3.48:1 sobre la tarjeta:
     reprueba AA. Por eso el tinte usa un rojo aclarado (6.87:1). El rojo
     de marca se conserva como FONDO del boton primario, donde el texto
     blanco encima si pasa.
     El fondo del tinte casi no se distingue de la tarjeta (1.06:1) porque
     todo rojo oscuro tiene luminancia baja, asi que lo que delimita el
     boton es el borde: va en #a85f5f, que da 3.67:1 y cumple el minimo de
     3:1 para bordes de controles. */
  --soft-bg:#33181b;--soft-ink:#ff7a7a;--soft-br:#a85f5f;
}

body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);color:var(--ink);
  -webkit-text-size-adjust:100%;
  /* El recuadro gris que pinta iOS al tocar una liga se queda un instante
     encima del boton y parece un error de dibujo. Los estados :hover y
     :focus ya dicen lo mismo y se ven bien. */
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3{font-family:Montserrat,Inter,sans-serif;letter-spacing:-.4px}
/* El titulo de una pantalla pesa lo mismo en todas.
   El portal arrastra dos sistemas de diseno: el armazon usa `.ph`
   (Montserrat 800) y 24 de las plantillas de dentro usan Tailwind, con
   `text-2xl font-semibold` (Montserrat 600). Mismo tipo y mismo tamano,
   distinto grosor, asi que el titulo ADELGAZA al pasar de Inicio a
   Conductores o a Horario. Se nota y parece un error de carga.
   Se arregla aqui y no en las 24 plantillas: `.hub-inner h1` tiene mas
   especificidad que `.font-semibold`, asi que gana sin tocar el marcado
   --que es la misma decision con la que se aplico la identidad en su
   momento--. Si algun dia se unifica el sistema, esta regla sobra. */
.hub-inner h1{font-weight:800}
/* Cuantas transferencias esperan conciliarse, junto a su propia entrada
   del menu. Antes este numero vivia en una franja de pestanas que solo
   salia en cuatro pantallas; aqui se ve desde cualquiera, que es lo que
   hace util un pendiente. */
.cuenta-pend{margin-left:7px;font-size:11px;font-weight:700;padding:1px 7px;
  border-radius:999px;background:#fef0c7;color:var(--amber);vertical-align:1px}

/* ── Componentes compartidos con el portal ─────────────────────────────── */
/* Logotipo: el punto rojo es la única marca de color en el cromo. */
.marca{font-family:Montserrat,Inter,sans-serif;font-weight:800;font-size:18px;
       letter-spacing:-.5px;color:var(--ink);text-decoration:none}
.marca span{color:var(--brand)}

/* Logotipo: el lockup real (camión + ExactoLogistic + Delivery Company).
   El PNG trae transparencia, pero el nombre va en negro, así que en modo
   oscuro se apoya en una placa clara. No se le aplica un filtro de
   inversión a propósito: eso cambiaría el rojo de marca por otro color. */
.logo{display:block;width:auto;height:64px;border-radius:6px}
.logo-acceso{margin:0 auto 14px}
/* En el cromo el lockup completo queda ilegible ("Delivery Company" se
   vuelve una mancha), así que se recorta al camión con object-fit en vez
   de mantener un segundo archivo que se pueda desincronizar del oficial.
   Medido sobre el PNG: el camión llega al 51.8% del alto y el texto
   arranca en el 59.4%, o sea el corte limpio va en 55.6%. Con
   object-fit:cover manda el ancho: 118 / (380/197) = 61.2 px renderizados,
   y una ventana de 34 px deja ver justo ese 55.6% superior. */
.logo-cromo{height:34px;width:118px;object-fit:cover;object-position:50% 0}
/* En oscuro solo el lockup completo necesita placa: su nombre va en negro.
   El camión del cromo no la lleva — es rojo con el avión en blanco opaco,
   así que se lee solo y una placa ahí metería un recuadro innecesario.
   No se usa un filtro de inversión porque alteraría el rojo de marca. */
.dark .logo-acceso{background:#fff;padding:12px 16px}

/* ── Hub del back office ───────────────────────────────────────────────
   Barra superior a todo lo ancho + barra lateral plegable + área de
   trabajo. Sustituye al menú horizontal de tres ligas, que se quedaba
   corto conforme entran más módulos. */
.hub-top{display:flex;align-items:center;gap:14px;padding:11px 20px;
         background:var(--card);border-bottom:1px solid var(--line)}
.hub-top .sep{padding-left:12px;border-left:1px solid var(--line);
              font-size:14px;color:var(--mut);font-weight:500}
.hub-top .derecha{margin-left:auto;display:flex;align-items:center;gap:14px;
                  font-size:13.5px;color:var(--mut)}
/* EL CLIENTE QUE SE ESTA MIRANDO. Dos botones pegados, con el puesto en
   oscuro: a un vistazo se ve en cual estas sin leer nada. Van en la
   cabecera y no en un ajuste porque mirar la carga de un cliente
   creyendo que es la del otro no se nota hasta que alguien cobra mal. */
.hub-top .clientes{display:flex;margin-left:12px;border:1px solid var(--line);
                   border-radius:8px;overflow:hidden}
.hub-top .clientes form{margin:0}
.hub-top .cliente{display:flex;align-items:center;gap:7px;
                  padding:5px 11px;font-size:13px;line-height:1.3;
                  background:var(--card);color:var(--mut);border:0;
                  cursor:pointer;white-space:nowrap}
/* EL LOGO DEL CLIENTE. Redondeado porque el de DiDi viene con su fondo
   naranja de punta a punta y en cuadrado se ve como un parche pegado. */
.hub-top .cliente img,.hub-top .sep img{width:18px;height:18px;
                                        border-radius:4px;object-fit:cover}
.hub-top .sep{display:flex;align-items:center;gap:7px}
.hub-top .clientes form + form .cliente{border-left:1px solid var(--line)}
.hub-top .cliente:hover{background:var(--line)}
.hub-top .cliente.aqui{background:var(--tinta,#111827);color:#fff;
                       font-weight:600}
/* El boton del menu y su telon solo existen en pantalla angosta, que es
   donde la lateral se guarda. En escritorio la lateral esta siempre a la
   vista y los dos sobran. */
.hub-menu{display:none}
.hub-backdrop{display:none}
.hub-cerrar{display:none}

.hub{display:grid;grid-template-columns:248px 1fr;
     min-height:calc(100vh - 58px)}
/* Sin align-items:start a propósito: la lateral debe estirarse hasta abajo
   para que su borde derecho corra a todo lo alto, como en la referencia. */
.hub-side{background:var(--card);border-right:1px solid var(--line);
          padding:12px 10px 10px;display:flex;flex-direction:column;gap:1px}
.hub-sec{border:0;background:none;width:100%;display:flex;align-items:center;
         gap:11px;padding:10px 11px;border-radius:9px;cursor:pointer;
         color:var(--ink);font-family:inherit;font-size:14.5px;font-weight:600;
         text-align:left;letter-spacing:-.1px;text-decoration:none}
.hub-sec:hover{background:var(--sub)}
.hub-sec .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
              white-space:nowrap}
.hub-sec .chev{width:13px;height:13px;flex:none;stroke:var(--faint);fill:none;
               stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
               transition:transform .18s ease}
.hub-sec[aria-expanded="true"] .chev{transform:rotate(180deg)}
.hub-sec.activa{color:var(--brand)}
.hub-sec .ic{width:19px;height:19px;flex:none;stroke:currentColor;fill:none;
             stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
             color:var(--mut)}
.hub-sec.activa .ic{color:var(--brand)}

.hub-subs{display:none;flex-direction:column;gap:1px;padding:2px 0 6px 42px}
.hub-subs.abierta{display:flex}
.hub-subs a{font-size:13.5px;color:var(--mut);text-decoration:none;
            padding:8px 10px;border-radius:7px;display:block;overflow:hidden;
            text-overflow:ellipsis;white-space:nowrap;
            box-shadow:inset 2px 0 0 transparent}
.hub-subs a:hover{background:var(--sub);color:var(--ink);
                  box-shadow:inset 2px 0 0 var(--brand)}
.hub-subs a.aqui{color:var(--ink);font-weight:600;
                 box-shadow:inset 2px 0 0 var(--brand)}
/* LA SUBCABECERA DE UN GRUPO (Padron / Seguimiento, Pago semanal /
   Efectivo / Recibos): una seccion de mas de ocho entradas se lee mal
   de corrido. Es texto, no liga: no se resalta ni se pulsa. */
.hub-grupo{display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;
           text-transform:uppercase;color:var(--faint);padding:9px 10px 3px}
.hub-subs a + .hub-grupo{margin-top:4px;border-top:1px solid var(--line)}
.hub-mod-b .hub-grupo{padding:4px 2px 0;margin-top:2px}
.hub-mod-b .btn + .hub-grupo{margin-top:6px}

.hub-main{min-width:0;padding:24px 22px 44px}
/* `min-width` y `overflow-wrap`: nada empuja la pagina a lo ancho. Un
   correo largo, un token o un nombre de zona sin espacios ensanchaban el
   contenido y dejaban la pantalla del telefono desplazable en horizontal,
   con la barra superior cortada a la derecha. */
.hub-inner{max-width:1024px;min-width:0;overflow-wrap:break-word}

/* Toda tabla se desplaza DENTRO de su propia caja. La caja se la pone el
   guion del final de staff_base a las que no la traigan, en vez de tocar
   las dieciseis plantillas que ya existen --y acordarse de cada nueva--.
   Es la misma decision con la que se aplico la identidad en su momento:
   una regla aqui en lugar de una edicion por pantalla. */
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}

/* Las pantallas de TABLA piden el ancho completo: con nueve columnas,
   1024px corta la ultima y deja media pantalla vacia. Las demas se
   quedan en 1024 a proposito --un formulario o un texto a todo lo ancho
   de un monitor se lee peor, porque el ojo pierde el renglon al
   regresar--. Se pide con {% block ancho %}ancho{% endblock %}. */
.hub-inner.ancho{max-width:none}

/* Rejilla de módulos de la pantalla de inicio: una tarjeta por módulo con
   sus herramientas como botones, para llegar en un clic desde el inicio. */
/* Columnas en vez de rejilla: las tarjetas no miden lo mismo (Onboarding
   tiene cinco herramientas y Recibos una), y con grid quedaban huecos
   grandes debajo de las cortas. Con columnas se rellena hacia abajo. */
.hub-grid{columns:3 244px;column-gap:16px}
.hub-mod{background:var(--card);border:1px solid var(--line);border-radius:12px;
         overflow:hidden;box-shadow:0 1px 2px rgba(14,14,14,.04);
         break-inside:avoid;display:inline-block;width:100%;margin-bottom:16px}
.hub-mod-h{display:flex;align-items:center;gap:9px;padding:14px 16px 12px;
           border-bottom:1px solid var(--line)}
.hub-mod-h h3{margin:0;font-family:Montserrat,Inter,sans-serif;font-size:14.5px;
              font-weight:700;letter-spacing:-.2px;flex:1;min-width:0}
.hub-mod-h .ic{width:16px;height:16px;flex:none;stroke:var(--mut);fill:none;
               stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hub-mod-b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:9px}
.hub-mod-b .btn{padding:11px 13px;font-size:13.5px;line-height:1.35}
.hub-pronto{border:1px dashed var(--line);background:var(--card);color:var(--faint);
            border-radius:8px;padding:11px 13px;font-size:13px;font-weight:600;
            text-align:center}
/* Pie de tarjeta: para avisar cosas que el botón no alcanza a decir,
   como que Administración abre otra interfaz distinta. */
.hub-nota{margin:2px 0 0;font-size:12px;color:var(--faint);line-height:1.45}

.box{background:var(--card);border:1px solid var(--line);border-radius:12px;
     padding:20px 18px;box-shadow:0 1px 2px rgba(14,14,14,.04)}
.ph{margin:0 0 4px;font-size:24px;font-weight:800;font-family:Montserrat,Inter,sans-serif}
.psub{margin:0 0 20px;color:var(--mut);font-size:14.5px}
.btn{display:inline-block;border:0;border-radius:8px;padding:11px 18px;font-size:14.5px;
     font-weight:700;font-family:inherit;cursor:pointer;text-align:center;
     background:var(--ink);color:var(--bg)}
.btn:hover{opacity:.88}
.btn-brand{background:var(--brand);color:#fff}
.btn-brand:hover{opacity:.9}
/* Acción secundaria. Misma familia que el botón primario, menos peso:
   deja que en cada tarjeta se lea cuál es la entrada principal. */
.btn-soft{background:var(--soft-bg);color:var(--soft-ink);
          border:1px solid var(--soft-br)}
.btn-soft:hover{border-color:var(--brand);opacity:1}
.btn-block{display:block;width:100%}
.field-label{display:block;font-size:13px;font-weight:600;margin-bottom:5px;color:var(--ink)}
.aviso{border-radius:10px;border:1px solid;padding:12px 14px;font-size:14px;margin-bottom:14px}
/* Color semántico para datos, separado del rojo de marca. Van al final de
   la hoja para ganarle a las utilidades de color de Tailwind, y usan los
   tokens, así que se adaptan solos al modo oscuro — a diferencia de
   text-amber-900, que sobre fondo oscuro quedaba café ilegible. */
.pos{color:var(--grn)}
.neg{color:var(--red)}
.warn{color:var(--amber)}

.aviso-ok{background:#ecfdf3;border-color:#abefc6;color:#067647}
.aviso-err{background:#fef3f2;border-color:#fecdca;color:#b42318}
.dark .aviso-ok{background:#0f2a1a;border-color:#2f6b45;color:#86efac}
.dark .aviso-err{background:#2a1416;border-color:#7a3b3b;color:#f87171}

/* Campos de formulario: Django los pinta sin clases, se estilan por elemento. */
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=number],input[type=date],input[type=url],select,textarea{
  width:100%;background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:8px;padding:10px 12px;
  font:inherit;font-size:15px;
}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand);
}
input::placeholder,textarea::placeholder{color:var(--faint)}

/* Grupos de opciones (radio). Van aparte de los campos de texto: un
   radio con ancho completo manda la bolita al extremo derecho y tira la
   etiqueta al renglon de abajo, que es como se veia el alta. */
.campo-opciones{
  display:flex;flex-direction:column;gap:2px;
  border:1px solid var(--line);border-radius:8px;
  background:var(--card);padding:4px;
}
.campo-opciones label{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:6px;cursor:pointer;
  font-size:15px;line-height:1.3;
}
.campo-opciones label:hover{background:var(--sub)}
.campo-opciones input[type=radio]{
  width:16px;height:16px;flex:none;margin:0;accent-color:var(--brand);
}

/* ── Ajustes de la escala Tailwind en oscuro ───────────────────────────── */
.dark .bg-white     { background-color:var(--card) !important; }
.dark .bg-gray-50   { background-color:var(--sub)  !important; }
.dark .bg-gray-100  { background-color:var(--sub)  !important; }
.dark .hover\:bg-gray-50:hover  { background-color:var(--sub) !important; }
.dark .hover\:bg-gray-100:hover { background-color:#2b282f !important; }

.dark .text-gray-900 { color:var(--ink)   !important; }
.dark .text-gray-700 { color:#d8d5de      !important; }
.dark .text-gray-600 { color:#b8b5c0      !important; }
.dark .text-gray-500 { color:var(--mut)   !important; }
.dark .text-gray-400 { color:var(--faint) !important; }
.dark .hover\:text-gray-900:hover { color:#fff !important; }

.dark .border-gray-100,.dark .border-gray-200 { border-color:var(--line) !important; }
.dark .border-gray-300 { border-color:#3a3640 !important; }
.dark .border-gray-900 { border-color:var(--mut) !important; }
.dark .divide-gray-100 > * + * { border-color:var(--line) !important; }

/* Los botones de tinta se invierten: negro sobre negro no se ve. */
.dark .bg-gray-900 { background-color:var(--ink) !important; color:var(--bg) !important; }
.dark .hover\:bg-gray-800:hover,
.dark .hover\:bg-gray-700:hover { background-color:#cbc8d2 !important; }
.dark .btn { background:var(--ink);color:var(--bg) }
.dark .btn-brand { background:var(--brand);color:#fff }
/* Hace falta repetirlo aqui: `.dark .btn` de arriba tiene mas
   especificidad que `.btn-soft` y si no, en oscuro el boton secundario
   sale con los colores del primario de tinta. */
.dark .btn-soft { background:var(--soft-bg);color:var(--soft-ink);
                  border:1px solid var(--soft-br) }

.dark .text-red-600,.dark .text-red-700,.dark .text-red-800 { color:var(--red) !important; }
.dark .text-green-700 { color:var(--grn) !important; }
.dark .text-amber-700,.dark .text-amber-800,.dark .text-amber-900 { color:var(--amber) !important; }
.dark .bg-red-50,.dark .bg-red-100 { background-color:#2a1416 !important; }
.dark .bg-green-100 { background-color:#0f2a1a !important; }
.dark .bg-amber-50  { background-color:#2a2114 !important; }
.dark .border-red-300,.dark .border-red-700 { border-color:#7a3b3b !important; }
.dark .border-green-300 { border-color:#2f6b45 !important; }
.dark .border-amber-300 { border-color:#7a5c1e !important; }
.dark .text-green-800 { color:#86efac !important; }

/* ── El telefono ────────────────────────────────────────────────────────
   Hasta el 06/09/2026 la lateral se quedaba EN EL FLUJO, de ancho
   completo y encima del contenido. En el telefono eso obligaba a pasar
   las seis secciones --con sus submenus abiertos, media pantalla de puro
   menu-- antes de llegar a lo que se venia a ver: abrir la ficha de un
   conductor empezaba con un dedazo de scroll. Ahora la lateral es un
   cajon que entra por la izquierda y se abre con el boton de la barra. */
@media (max-width:900px){
  .hub-menu{display:flex;align-items:center;justify-content:center;
            width:40px;height:40px;flex:none;padding:0;cursor:pointer;
            border:1px solid var(--line);border-radius:9px;
            background:var(--card);color:var(--ink)}
  .hub-menu svg{width:20px;height:20px;stroke:currentColor;fill:none;
                stroke-width:2;stroke-linecap:round}

  /* La barra se queda pegada arriba. Es la unica forma de volver al menu
     sin subir hasta el principio de una tabla de doscientos renglones.
     El relleno de arriba suma la muesca del telefono, que con
     viewport-fit=cover queda ENCIMA de la pagina. */
  .hub-top{position:sticky;top:0;z-index:40;gap:10px;
           padding:9px 14px;
           padding-top:calc(9px + env(safe-area-inset-top));
           padding-left:calc(14px + env(safe-area-inset-left));
           padding-right:calc(14px + env(safe-area-inset-right))}
  .hub-top .derecha{gap:12px}
  .hub-top .derecha .correo{display:none}
  .logo-cromo{height:30px;width:auto}

  .hub{grid-template-columns:1fr;min-height:0}

  .hub-side{position:fixed;top:0;left:0;bottom:0;z-index:60;
            width:min(86vw,300px);overflow-y:auto;
            /* Sin esto, al llegar al final del menu el dedo sigue y
               arrastra la pagina de atras. */
            overscroll-behavior:contain;
            border-right:1px solid var(--line);border-bottom:0;
            box-shadow:0 0 40px rgba(14,14,14,.3);
            /* `visibility` ademas de `transform`: un cajon cerrado que
               solo se corre a la izquierda sigue OCUPANDO su sitio en el
               orden del tabulador y en el arbol del lector.
               El retraso de .22s es para que al CERRAR no desaparezca a
               media salida; al abrir se quita (regla de abajo) y cambia
               de golpe, porque si no, el guion no puede llevar el foco
               dentro: un elemento con visibility:hidden no lo acepta y
               `focus()` se pierde. */
            visibility:hidden;
            transform:translateX(-100%);
            transition:transform .22s ease, visibility 0s linear .22s;
            padding-top:calc(12px + env(safe-area-inset-top));
            padding-bottom:calc(16px + env(safe-area-inset-bottom));
            padding-left:calc(10px + env(safe-area-inset-left))}
  .hub-side.abierto{transform:none;visibility:visible;
                    transition:transform .22s ease, visibility 0s linear 0s}
  /* La equis, dentro del cajon y arriba a la derecha. El telon tambien
     cierra, pero el boton de la barra queda TAPADO por el cajon --el
     cajon arranca en el borde de arriba-- asi que sin esto no habria
     nada visible que dijera "cerrar". */
  .hub-cerrar{display:flex;align-items:center;justify-content:center;
              align-self:flex-end;width:40px;height:40px;flex:none;
              margin:0 2px 4px 0;padding:0;border:0;background:none;
              border-radius:9px;cursor:pointer;color:var(--mut)}
  .hub-cerrar:hover{background:var(--sub)}
  .hub-cerrar svg{width:20px;height:20px;stroke:currentColor;fill:none;
                  stroke-width:2;stroke-linecap:round}

  /* El telon oscurece lo de atras y ademas es donde se toca para cerrar:
     cerrar tocando fuera es lo primero que se intenta en un telefono,
     antes de buscar una equis. */
  .hub-backdrop{display:block;position:fixed;inset:0;z-index:50;
                background:rgba(14,14,14,.5);opacity:0;pointer-events:none;
                transition:opacity .22s ease}
  .hub-backdrop.visible{opacity:1;pointer-events:auto}
  /* Con el cajon abierto la pagina de atras se queda quieta. */
  body.menu-abierto{overflow:hidden}

  .hub-main{padding:18px 14px 40px;
            padding-left:calc(14px + env(safe-area-inset-left));
            padding-right:calc(14px + env(safe-area-inset-right));
            /* La barra del gesto del iPhone tapa el ultimo boton si el
               contenido termina justo en el borde. */
            padding-bottom:calc(40px + env(safe-area-inset-bottom))}

  /* Blancos de toque de 44 px: el minimo de Apple y el de Android. Con
     los rellenos de escritorio las entradas del menu median 38. */
  .hub-sec{padding:12px 11px;font-size:15.5px}
  .hub-subs{padding-left:38px}
  .hub-subs a{padding:11px 10px;font-size:14.5px}
  .btn{padding:13px 18px;min-height:44px}

  /* 16 px EXACTOS en los campos. Por debajo de eso Safari en iPhone
     acerca la pagina al tocar el campo y ya no la regresa: se queda
     torcida y hay que pellizcar para volver. */
  input[type=text],input[type=email],input[type=password],input[type=tel],
  input[type=number],input[type=date],input[type=url],select,textarea{
    font-size:16px;padding:11px 12px;
  }

  /* Los titulos de las 24 pantallas que usan Tailwind llevan `text-2xl`
     --24px-- y en 375 px de ancho se comen dos renglones. `.hub-inner h1`
     les gana en especificidad, igual que ya hace con el grosor. */
  .hub-inner h1{font-size:21px}
  .ph{font-size:21px}
  .psub{font-size:14px;margin-bottom:16px}
  .box{padding:16px 14px}
}
/* El logotipo del cromo se aprieta mas todavia, y "Back office" sale
   sobrando: en la aplicacion instalada el nombre ya va en el icono. */
@media (max-width:520px){
  .hub-top .sep{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hub-sec .chev{transition:none}
  .hub-side,.hub-backdrop{transition:none}
}

/* ── EL FORMATO DEL TABLERO DE INDICADORES, EN TODO EL BACK OFFICE (07/11/2026) ─────────
   El dueño vio el tablero de Indicadores del equipo de operación («los colores me
   gustaron mucho... vale la pena actualizar a ese formato más
   profesional»). Negro #111 + rojo #d0213a + blanco: barra de arriba
   negra con raya roja, tarjetas con raya roja arriba, títulos de tarjeta
   con una barrita roja, encabezados de tabla en negro.
   VA AQUÍ, AL FINAL, Y NO EN LAS PLANTILLAS: la misma decisión con la que
   se aplicó la identidad --38 plantillas, 24 de ellas con Tailwind--. Las
   reglas llevan `.hub-inner` delante para ganarle a las utilidades de
   Tailwind (`bg-gray-50`, `text-gray-500`) por especificidad.
   El rojo sigue siendo CROMO (rayas, la sección activa), nunca un dato.
   El fondo lavanda se queda: el blanco ya se probó y se revirtió. */
:root{--gx-negro:#111;--gx-rojo:#d0213a;--gx-rojo-suave:rgba(208,33,58,.08)}

/* La barra de arriba, como el encabezado de su tablero. */
.hub-top{background:var(--gx-negro);border-bottom:4px solid var(--gx-rojo);color:#fff}
.hub-top .sep{color:#c9c9c9;border-left-color:#333;white-space:nowrap}
.hub-top .derecha{color:#c9c9c9}
.hub-top .derecha button{color:#fff}
.hub-top .derecha button.rounded-md{border-color:#444;background:#222}
.hub-top .derecha button.rounded-md:hover{background:#333}
.hub-top .clientes{border-color:#444}
.hub-top .cliente{background:#222;color:#cfcfcf}
.hub-top .clientes form + form .cliente{border-left-color:#444}
.hub-top .cliente:hover{background:#2c2c2c;color:#fff}
.hub-top .cliente.aqui{background:var(--gx-rojo);color:#fff}
.hub-menu{background:#222 !important;border-color:#444 !important;color:#fff !important}
/* EL BUSCADOR GLOBAL (07/11/2026, del diagnostico): una caja en la barra
   que busca lo mismo que Gestion de conductores --nombre, telefono,
   EX-0142, DR-0133, ID de DiDi-- y, si hay una sola coincidencia, abre
   la ficha directo. Se acaba el «¿en que pantalla busco a este?». */
.hub-top .buscar{display:flex;align-items:center;margin:0;position:relative}
.hub-top .buscar input{width:230px;max-width:34vw;padding:6px 10px 6px 30px;
                       font-size:13px;line-height:1.3;color:#fff;background:#222;
                       border:1px solid #444;border-radius:8px}
.hub-top .buscar input::placeholder{color:#8a8a8a}
.hub-top .buscar input:focus{outline:0;border-color:var(--gx-rojo);background:#1a1a1a}
.hub-top .buscar svg{position:absolute;left:9px;width:15px;height:15px;
                     stroke:#8a8a8a;fill:none;stroke-width:2;pointer-events:none}
.hub-top .buscar-lupa{display:none}
@media (max-width:760px){
  .hub-top .buscar{display:none}
  .hub-top .buscar-lupa{display:flex;align-items:center;justify-content:center;
                        width:34px;height:34px;border-radius:8px;background:#222;
                        border:1px solid #444}
  .hub-top .buscar-lupa svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2}
}

/* La sección donde estás: como la pestaña activa de su barra. */
.hub-subs a.aqui{background:var(--gx-rojo-suave);box-shadow:inset 3px 0 0 var(--gx-rojo)}
.hub-sec.activa{color:var(--gx-rojo)}
.hub-sec.activa .ic{color:var(--gx-rojo)}

/* Tarjetas: raya roja arriba. Las propias (.box, .hub-mod) y las de
   Tailwind (`rounded-lg border bg-white`, 334 en las plantillas). Una
   tarjeta DENTRO de otra no la lleva: dos rayas apiladas se ven sucias. */
.hub-inner .box,.hub-mod,
.hub-inner div.bg-white.border.rounded-lg,.hub-inner section.bg-white.border.rounded-lg,
.hub-inner div.bg-white.border.rounded-xl,.hub-inner section.bg-white.border.rounded-xl,
.hub-inner article.bg-white.border.rounded-lg{border-top:3px solid var(--gx-rojo)}
.hub-inner .box .box,.hub-inner .bg-white.border .bg-white.border,
.hub-inner .box .bg-white.border,.hub-inner .bg-white.border .box{border-top-width:1px;border-top-color:var(--line)}
.dark .hub-inner .bg-white.border .bg-white.border{border-top-color:#2e2e2e}

/* El título de cada tarjeta, con su barrita roja. Solo el h2 que es hijo
   DIRECTO de la tarjeta (o de su primer renglón), para no marcar
   cualquier h2 suelto. */
.hub-inner .box>h2,.hub-inner .bg-white.border>h2,
.hub-inner .box>div:first-child>h2,.hub-inner .bg-white.border>div:first-child>h2,
.hub-inner .box>header>h2,.hub-inner .bg-white.border>header>h2{display:flex;align-items:center;gap:.5rem}
.hub-inner .box>h2::before,.hub-inner .bg-white.border>h2::before,
.hub-inner .box>div:first-child>h2::before,.hub-inner .bg-white.border>div:first-child>h2::before,
.hub-inner .box>header>h2::before,.hub-inner .bg-white.border>header>h2::before{
  content:"";width:4px;height:1.1em;border-radius:2px;background:var(--gx-rojo);flex:none}

/* Tablas: encabezado negro con letra blanca, como las suyas. */
.hub-inner thead,.hub-inner thead tr,.hub-inner thead th{background:var(--gx-negro) !important}
.hub-inner thead th{color:#fff !important;font-weight:600;border-color:#111 !important}
.hub-inner thead th a{color:#fff}
.hub-inner tbody tr:hover>td{background-color:var(--gx-rojo-suave)}
.dark .hub-inner thead,.dark .hub-inner thead tr,.dark .hub-inner thead th{background:#000 !important}

/* ── TODAS LAS PANTALLAS COMO LA FICHA (07/11/2026) ─────────────────────
   El dueño: «todas las páginas deben quedar como la que acabas de hacer
   y la de Indicadores». Son 82 plantillas con tres formas de encabezado:
     a) <div><h1/><p/></div>                 (la mayoría)
     b) <div class="flex"><div><h1/><p/></div><controles/></div>
     c) <h1/> suelto y luego <p/>            (.ph/.psub, Gestión)
   Con `:has()` las tres se visten desde aquí sin tocar el marcado: el
   primer bloque que contiene el h1 se vuelve la banda negra. Las
   pantallas que ya traen la suya (.fx-head, .hx-head, .ex-head) quedan
   fuera. Las cifras («Escribieron 1123») son toda tarjeta chica que
   empieza con una etiqueta y un número grande, o al revés. */

/* El logo de la barra: el camión limpio y el nombre en texto. */
.hub-marca{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.logo-cromo{height:38px;width:auto;object-fit:contain;object-position:50% 50%;border-radius:0;image-rendering:auto}
.hub-marca-texto{font-family:Montserrat,Inter,sans-serif;font-weight:800;font-size:19px;
  letter-spacing:-.5px;color:#fff;line-height:1;white-space:nowrap}
.hub-marca-texto b{font-weight:800;color:#ff4d5e}
@media (max-width:640px){.hub-marca-texto{display:none}}
/* Los logos de los clientes como íconos de app: redondeados y con un
   aro blanco, para que el naranja de DiDi no choque con el rojo del
   botón activo y el de T1 no parezca un parche blanco pegado. */
.hub-top .cliente img,.hub-top .sep img{width:20px;height:20px;border-radius:5px;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.85)}
.hub-top .cliente{padding:6px 12px 6px 9px;gap:8px}
/* CADA CLIENTE CON SU FONDO, siempre: DiDi en negro (su logo naranja se
   ve ahí), T1 en rojo. Lo pidió el dueño así («lo rojo era de fondo de
   T1 y lo negro al de DiDi»). El activo se distingue por el aro blanco y
   porque el otro va apagado. */
/* Como el boceto del dueño (07/11/2026): dos píldoras separadas, DiDi
   blanca con letra oscura y su logo naranja, T1 roja con letra blanca. */
.hub-top .clientes{border:0;gap:10px;overflow:visible;margin-left:14px}
.hub-top .clientes form + form .cliente{border-left:0}
.hub-top .cliente{border-radius:10px;padding:7px 14px 7px 10px;font-size:13.5px;font-weight:700;gap:9px}
.hub-top .cliente img,.hub-top .sep img{box-shadow:none;width:22px;height:22px;border-radius:6px}
.hub-top .cliente[data-cliente="didi"]{background:#fff;color:#111}
.hub-top .cliente[data-cliente="t1"]{background:#e0233f;color:#fff}
.hub-top .cliente:not(.aqui){opacity:.6}
.hub-top .cliente:not(.aqui):hover{opacity:.9}
.hub-top .cliente.aqui{box-shadow:0 2px 10px rgba(0,0,0,.45)}


/* a) y b): la banda. */
:is(.hub-inner > *:has(> h1), .hub-inner > *:has(> div > h1)):not(.fx-head,.hx-head,.ex-head),
.hub-inner > h1{
  background:linear-gradient(135deg,#111 0%,#111 62%,#2a0d12 100%);color:#fff;border-radius:10px;
  border-bottom:4px solid var(--gx-rojo);padding:1.2rem 1.5rem;margin-bottom:1.25rem !important}
/* c): el h1 suelto y su párrafo son una sola banda partida en dos. */
.hub-inner > h1:has(+ p){background:#111;border-radius:10px 10px 0 0;border-bottom:0;
  margin-bottom:0 !important;padding-bottom:.25rem}
.hub-inner > h1 + p{background:#111;color:#b8b8b8;padding:0 1.5rem 1.1rem;border-radius:0 0 10px 10px;
  border-bottom:4px solid var(--gx-rojo);margin:0 0 1.25rem !important}
.hub-inner > h1.ph,.hub-inner > h1 + p.psub{font-size:inherit}
.hub-inner > h1.ph{font-size:1.75rem}
.hub-inner > h1 + p.psub{font-size:.9rem}

:is(.hub-inner > *:has(> h1), .hub-inner > *:has(> div > h1)):not(.fx-head,.hx-head,.ex-head) h1,
.hub-inner > h1{color:#fff;letter-spacing:-.3px;line-height:1.15;overflow-wrap:normal;word-break:normal}
/* Lo gris se aclara, lo negro se vuelve blanco. */
:is(:is(.hub-inner > *:has(> h1), .hub-inner > *:has(> div > h1)):not(.fx-head,.hx-head,.ex-head), .hub-inner > h1 + p)
  :is(.text-gray-500,.text-gray-400,.text-gray-600,.text-gray-700,.text-gray-800,.text-gray-900,.psub,p){color:#c9c9c9}
:is(:is(.hub-inner > *:has(> h1), .hub-inner > *:has(> div > h1)):not(.fx-head,.hx-head,.ex-head), .hub-inner > h1 + p)
  :is(b,strong,.font-medium,.font-semibold,.text-gray-900){color:#fff}
:is(:is(.hub-inner > *:has(> h1), .hub-inner > *:has(> div > h1)):not(.fx-head,.hx-head,.ex-head), .hub-inner > h1 + p)
  .text-gray-300{color:#555}
:is(:is(.hub-inner > *:has(> h1), .hub-inner > *:has(> div > h1)):not(.fx-head,.hx-head,.ex-head), .hub-inner > h1 + p)
  a:not(.rounded-md,.btn,.rounded,.rounded-lg){color:#e5e5e5;text-decoration:underline}
:is(:is(.hub-inner > *:has(> h1), .hub-inner > *:has(> div > h1)):not(.fx-head,.hx-head,.ex-head), .hub-inner > h1 + p)
  a:not(.rounded-md,.btn,.rounded,.rounded-lg):hover{color:#fff}
/* Campos y selectores, oscuros. */
:is(.hub-inner > *:has(> h1), .hub-inner > *:has(> div > h1)):not(.fx-head,.hx-head,.ex-head)
  :is(select,input,textarea){background:#222 !important;border-color:#444 !important;color:#fff;color-scheme:dark}
:is(.hub-inner > *:has(> h1), .hub-inner > *:has(> div > h1)):not(.fx-head,.hx-head,.ex-head)
  input::placeholder{color:#8a8a8a}
/* Botones: el secundario oscuro, el principal rojo (en negro no se vería). */
:is(.hub-inner > *:has(> h1), .hub-inner > *:has(> div > h1)):not(.fx-head,.hx-head,.ex-head)
  :is(a,button,summary):is(.border-gray-300,.border-gray-200,.btn-soft,.bg-white){
  background:#222 !important;border-color:#444 !important;color:#fff !important}
:is(.hub-inner > *:has(> h1), .hub-inner > *:has(> div > h1)):not(.fx-head,.hx-head,.ex-head)
  :is(a,button,summary):is(.border-gray-300,.border-gray-200,.btn-soft,.bg-white):hover{background:#2c2c2c !important}
:is(.hub-inner > *:has(> h1), .hub-inner > *:has(> div > h1)):not(.fx-head,.hx-head,.ex-head)
  :is(a,button):is(.bg-gray-900,.border-gray-900,.btn,.btn-brand,.bg-red-600,.bg-brand){
  background:var(--gx-rojo) !important;border-color:var(--gx-rojo) !important;color:#fff !important;font-weight:600}
:is(.hub-inner > *:has(> h1), .hub-inner > *:has(> div > h1)):not(.fx-head,.hx-head,.ex-head)
  :is(a,button):is(.bg-gray-900,.border-gray-900,.btn,.btn-brand,.bg-red-600,.bg-brand):hover{background:#b31a31 !important;opacity:1}
/* Etiquetas de color y separadores, en su versión para fondo negro. */
:is(:is(.hub-inner > *:has(> h1), .hub-inner > *:has(> div > h1)):not(.fx-head,.hx-head,.ex-head), .hub-inner > h1 + p)
  :is(.bg-green-50,.bg-green-100){background:rgba(46,160,90,.22) !important}
:is(:is(.hub-inner > *:has(> h1), .hub-inner > *:has(> div > h1)):not(.fx-head,.hx-head,.ex-head), .hub-inner > h1 + p)
  :is(.text-green-700,.text-green-800,.pos){color:#8fe0a8 !important}
:is(:is(.hub-inner > *:has(> h1), .hub-inner > *:has(> div > h1)):not(.fx-head,.hx-head,.ex-head), .hub-inner > h1 + p)
  .bg-amber-50{background:rgba(230,160,40,.2) !important}
:is(:is(.hub-inner > *:has(> h1), .hub-inner > *:has(> div > h1)):not(.fx-head,.hx-head,.ex-head), .hub-inner > h1 + p)
  :is(.text-amber-700,.text-amber-800,.text-amber-900,.warn){color:#f5c26b !important}
:is(:is(.hub-inner > *:has(> h1), .hub-inner > *:has(> div > h1)):not(.fx-head,.hx-head,.ex-head), .hub-inner > h1 + p)
  :is(.bg-red-50,.bg-red-100){background:rgba(208,33,58,.28) !important}
:is(:is(.hub-inner > *:has(> h1), .hub-inner > *:has(> div > h1)):not(.fx-head,.hx-head,.ex-head), .hub-inner > h1 + p)
  :is(.text-red-600,.text-red-700,.text-red-800,.text-red-900,.neg){color:#ff8f9b !important}
:is(:is(.hub-inner > *:has(> h1), .hub-inner > *:has(> div > h1)):not(.fx-head,.hx-head,.ex-head), .hub-inner > h1 + p)
  :is(.bg-gray-100,.bg-gray-50){background:#2a2a2a !important;color:#e5e5e5}
:is(:is(.hub-inner > *:has(> h1), .hub-inner > *:has(> div > h1)):not(.fx-head,.hx-head,.ex-head), .hub-inner > h1 + p)
  :is(.border-gray-200,.border-gray-100,.border-t,.border-b){border-color:#333}
:is(:is(.hub-inner > *:has(> h1), .hub-inner > *:has(> div > h1)):not(.fx-head,.hx-head,.ex-head), .hub-inner > h1 + p)
  :is(.font-mono,code){color:#e5e5e5}
/* Etiquetas de estado DENTRO de la banda: fondo sólido y letra oscura.
   Con fondo translúcido y letra clara no se leían («si vas a sombrear,
   pon un color de contraste», el dueño). Van al final para ganarle a
   las reglas de color de arriba. */
:is(:is(.hub-inner > *:has(> h1), .hub-inner > *:has(> div > h1)):not(.fx-head,.hx-head,.ex-head), .hub-inner > h1 + p)
  :is(.bg-amber-50,[class*="bg-amber-1"],.bg-yellow-50,.bg-yellow-100):is(span,b,a,div,p){background:#f5c26b !important;color:#1a1200 !important;font-weight:600}
:is(:is(.hub-inner > *:has(> h1), .hub-inner > *:has(> div > h1)):not(.fx-head,.hx-head,.ex-head), .hub-inner > h1 + p)
  :is(.bg-green-50,.bg-green-100):is(span,b,a,div,p){background:#8fe0a8 !important;color:#052e16 !important;font-weight:600}
:is(:is(.hub-inner > *:has(> h1), .hub-inner > *:has(> div > h1)):not(.fx-head,.hx-head,.ex-head), .hub-inner > h1 + p)
  :is(.bg-red-50,.bg-red-100):is(span,b,a,div,p){background:#ff8f9b !important;color:#3b0a0f !important;font-weight:600}
:is(:is(.hub-inner > *:has(> h1), .hub-inner > *:has(> div > h1)):not(.fx-head,.hx-head,.ex-head), .hub-inner > h1 + p)
  :is(.bg-gray-100,.bg-gray-50):is(span,b,a):not(.rounded-md){background:#e5e5e5 !important;color:#111 !important;font-weight:600}
:is(:is(.hub-inner > *:has(> h1), .hub-inner > *:has(> div > h1)):not(.fx-head,.hx-head,.ex-head), .hub-inner > h1 + p)
  :is(.bg-amber-50,[class*="bg-amber-1"],.bg-green-50,.bg-green-100,.bg-red-50,.bg-red-100,.bg-gray-100):is(span,b,a,div,p) *{color:inherit !important}

/* Las cifras: tarjeta chica que es etiqueta + número grande (o número +
   etiqueta). Nada con título, tabla, lista o formulario adentro. */
.hub-inner :is(div,a).bg-white.border:is(.rounded-lg,.rounded-xl,.rounded):is(:has(> :is(p,span):first-child + :is(p,div,span):is(.text-2xl,.text-xl,.text-3xl,.text-lg.font-semibold,.text-lg.font-bold)),:has(> :is(p,div,span):first-child:is(.text-2xl,.text-3xl,.text-xl.font-semibold))):not(:has(h2,h3,table,ul,ol,form,select,input)){
  background:#111 !important;border-color:#111 !important;border-top:3px solid var(--gx-rojo) !important;
  color:#fff;border-radius:8px;display:flex;flex-direction:column;min-width:0}
.hub-inner :is(div,a).bg-white.border:is(.rounded-lg,.rounded-xl,.rounded):is(:has(> :is(p,span):first-child + :is(p,div,span):is(.text-2xl,.text-xl,.text-3xl,.text-lg.font-semibold,.text-lg.font-bold)),:has(> :is(p,div,span):first-child:is(.text-2xl,.text-3xl,.text-xl.font-semibold))):not(:has(h2,h3,table,ul,ol,form,select,input)) > *{order:3;margin:0}
/* La etiqueta arriba, el número en medio, las notas abajo. */
.hub-inner :is(div,a).bg-white.border:is(.rounded-lg,.rounded-xl,.rounded):is(:has(> :is(p,span):first-child + :is(p,div,span):is(.text-2xl,.text-xl,.text-3xl,.text-lg.font-semibold,.text-lg.font-bold)),:has(> :is(p,div,span):first-child:is(.text-2xl,.text-3xl,.text-xl.font-semibold))):not(:has(h2,h3,table,ul,ol,form,select,input))
  > :is(:is(p,span):first-child:not(.text-2xl,.text-3xl,.text-xl), :is(.text-2xl,.text-3xl,.text-xl):first-child + p){
  order:1;font-size:.68rem !important;text-transform:uppercase;letter-spacing:.06em;font-weight:600;
  color:#b8b8b8 !important;line-height:1.25;margin-bottom:.3rem}
.hub-inner :is(div,a).bg-white.border:is(.rounded-lg,.rounded-xl,.rounded):is(:has(> :is(p,span):first-child + :is(p,div,span):is(.text-2xl,.text-xl,.text-3xl,.text-lg.font-semibold,.text-lg.font-bold)),:has(> :is(p,div,span):first-child:is(.text-2xl,.text-3xl,.text-xl.font-semibold))):not(:has(h2,h3,table,ul,ol,form,select,input))
  > :is(.text-2xl,.text-3xl,.text-xl,.text-lg.font-semibold,.text-lg.font-bold){
  order:2;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:1.65rem !important;line-height:1.1;
  color:#fff;margin-bottom:.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-inner :is(div,a).bg-white.border:is(.rounded-lg,.rounded-xl,.rounded):is(:has(> :is(p,span):first-child + :is(p,div,span):is(.text-2xl,.text-xl,.text-3xl,.text-lg.font-semibold,.text-lg.font-bold)),:has(> :is(p,div,span):first-child:is(.text-2xl,.text-3xl,.text-xl.font-semibold))):not(:has(h2,h3,table,ul,ol,form,select,input)) > :is(.text-xs,.text-sm):not(:first-child){
  font-size:.72rem;color:#9a9a9a;line-height:1.35}
.hub-inner :is(div,a).bg-white.border:is(.rounded-lg,.rounded-xl,.rounded):is(:has(> :is(p,span):first-child + :is(p,div,span):is(.text-2xl,.text-xl,.text-3xl,.text-lg.font-semibold,.text-lg.font-bold)),:has(> :is(p,div,span):first-child:is(.text-2xl,.text-3xl,.text-xl.font-semibold))):not(:has(h2,h3,table,ul,ol,form,select,input)) :is(.text-gray-500,.text-gray-400,.text-gray-600){color:#9a9a9a}
.hub-inner :is(div,a).bg-white.border:is(.rounded-lg,.rounded-xl,.rounded):is(:has(> :is(p,span):first-child + :is(p,div,span):is(.text-2xl,.text-xl,.text-3xl,.text-lg.font-semibold,.text-lg.font-bold)),:has(> :is(p,div,span):first-child:is(.text-2xl,.text-3xl,.text-xl.font-semibold))):not(:has(h2,h3,table,ul,ol,form,select,input)) :is(.text-green-700,.text-green-800,.pos){color:#8fe0a8 !important}
.hub-inner :is(div,a).bg-white.border:is(.rounded-lg,.rounded-xl,.rounded):is(:has(> :is(p,span):first-child + :is(p,div,span):is(.text-2xl,.text-xl,.text-3xl,.text-lg.font-semibold,.text-lg.font-bold)),:has(> :is(p,div,span):first-child:is(.text-2xl,.text-3xl,.text-xl.font-semibold))):not(:has(h2,h3,table,ul,ol,form,select,input)) :is(.text-amber-700,.text-amber-800,.warn){color:#f5c26b !important}
.hub-inner :is(div,a).bg-white.border:is(.rounded-lg,.rounded-xl,.rounded):is(:has(> :is(p,span):first-child + :is(p,div,span):is(.text-2xl,.text-xl,.text-3xl,.text-lg.font-semibold,.text-lg.font-bold)),:has(> :is(p,div,span):first-child:is(.text-2xl,.text-3xl,.text-xl.font-semibold))):not(:has(h2,h3,table,ul,ol,form,select,input)) :is(.text-red-700,.text-red-600,.neg){color:#ff8f9b !important}
.hub-inner :is(div,a).bg-white.border:is(.rounded-lg,.rounded-xl,.rounded):is(:has(> :is(p,span):first-child + :is(p,div,span):is(.text-2xl,.text-xl,.text-3xl,.text-lg.font-semibold,.text-lg.font-bold)),:has(> :is(p,div,span):first-child:is(.text-2xl,.text-3xl,.text-xl.font-semibold))):not(:has(h2,h3,table,ul,ol,form,select,input)) a{color:#e5e5e5}
.hub-inner a.bg-white.border:is(.rounded-lg,.rounded-xl,.rounded):is(:has(> :is(p,span):first-child + :is(p,div,span):is(.text-2xl,.text-xl,.text-3xl,.text-lg.font-semibold,.text-lg.font-bold)),:has(> :is(p,div,span):first-child:is(.text-2xl,.text-3xl,.text-xl.font-semibold))):not(:has(h2,h3,table,ul,ol,form,select,input)):hover{background:#1e1e1e !important;border-top-color:#ff4d5e !important}

/* Botones principales en negro y rojo al pasar; títulos de tarjeta con
   peso; etiquetas de dato chicas en mayúscula (la hoja de datos de la
   ficha, en todas). */
.hub-inner :is(a,button).bg-gray-900{background:#111 !important}
.hub-inner :is(a,button).bg-gray-900:hover,.hub-inner .btn:not(.btn-soft,.btn-brand):hover{background:var(--gx-rojo) !important;opacity:1}
.hub-inner :is(a,button).border-gray-900:not(.bg-gray-900){background:#111;color:#fff;border-color:#111;font-weight:600}
.hub-inner :is(a,button).border-gray-900:not(.bg-gray-900):hover{background:var(--gx-rojo);border-color:var(--gx-rojo)}
.dark .hub-inner :is(a,button).border-gray-900:not(.bg-gray-900){background:#f4f4f5;color:#111;border-color:#f4f4f5}
.hub-inner :is(.bg-white.border,.box) h2.font-medium{font-weight:700;letter-spacing:-.2px}
.hub-inner :is(.bg-white.border,.box) dt.text-gray-500{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;
  font-weight:600;color:var(--faint)}
.hub-inner :is(.bg-white.border,.box){border-radius:10px;
  box-shadow:0 1px 3px rgba(17,17,17,.06),0 6px 18px -12px rgba(17,17,17,.18)}
.hub-inner :is(.bg-white.border,.box) :is(.bg-white.border,.box){box-shadow:none}

/* Nada se sale de su caja ni empuja la página a lo ancho: un selector
   con una opción larga o un campo con ancho fijo se encogen. */
.hub-inner :is(select,input,form,button){max-width:100%}
.hub-inner :is(select,input){min-width:0}

@media (max-width:640px){
  :is(.hub-inner > *:has(> h1), .hub-inner > *:has(> div > h1)):not(.fx-head,.hx-head,.ex-head),
  .hub-inner > h1{padding:1rem 1.1rem}
  .hub-inner > h1 + p{padding:0 1.1rem .9rem}
  /* En el teléfono las cifras van de dos en dos: «-$339,071.36» a
     1.65rem se desborda y salía cortado con puntos suspensivos. */
  .hub-inner :is(div,a).bg-white.border:is(.rounded-lg,.rounded-xl,.rounded):is(:has(> :is(p,span):first-child + :is(p,div,span):is(.text-2xl,.text-xl,.text-3xl,.text-lg.font-semibold,.text-lg.font-bold)),:has(> :is(p,div,span):first-child:is(.text-2xl,.text-3xl,.text-xl.font-semibold))):not(:has(h2,h3,table,ul,ol,form,select,input))
    > :is(.text-2xl,.text-3xl,.text-xl,.text-lg.font-semibold,.text-lg.font-bold){font-size:1.3rem !important}
}
/* En la barra angosta solo caben los logos de los clientes; el nombre
   se esconde (sigue ahí para el lector de pantalla). */
@media (max-width:520px){
  .hub-top .cliente{font-size:0;gap:0;padding:6px 8px}
  .hub-top .cliente img{width:22px;height:22px}
}

/* ── QUE TOCA HOY y ROBOTS, en el Inicio (Etapa 2, 07/11/2026) ──────────────
   Dos tarjetas a la par; en angosto, una debajo de la otra. Cada renglón
   lleva un punto de color por gravedad: rojo = alerta o robot atrasado,
   ámbar = aviso, gris = informativo o sin latido, verde = en orden. El rojo
   aquí SÍ es dato (semántico, var(--red)), no el rojo de marca. */
.qt-fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:900px){.qt-fila{grid-template-columns:1fr}}
.qt-caja{min-width:0}
.qt-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.qt-lista li{display:flex;align-items:flex-start;gap:10px;min-width:0}
.qt-punto{flex:none;width:10px;height:10px;border-radius:50%;margin-top:6px;background:var(--faint)}
.qt-alerta .qt-punto,.qt-vencido .qt-punto{background:var(--red);box-shadow:0 0 0 3px rgba(220,38,38,.15)}
.qt-aviso .qt-punto{background:var(--amber)}
.qt-ok .qt-punto{background:var(--grn)}
.qt-texto{min-width:0;font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.qt-texto a{color:var(--ink);text-decoration:none;font-weight:500}
.qt-texto a:hover{text-decoration:underline}
.qt-ok .qt-texto,.qt-ok .qt-texto a{color:var(--mut);font-weight:400}
.qt-texto small{display:block;font-size:12.5px;color:var(--mut)}
.qt-robots{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
@media (max-width:640px){.qt-robots{grid-template-columns:1fr}}
.qt-robots .qt-texto{font-size:13px}
.qt-nunca .qt-texto{color:var(--mut)}
.qt-detalle{margin-top:10px}
.qt-detalle summary{cursor:pointer;font-size:13px;color:var(--mut);list-style:none;display:inline-block}
.qt-detalle summary::-webkit-details-marker{display:none}
.qt-detalle summary::before{content:"▸ ";font-size:11px}
.qt-detalle[open] summary::before{content:"▾ "}
/* Un correo o un nombre largo en el h1 de la banda no empuja la pagina a lo
   ancho en el telefono (se vio con «preview@exactologistic.com»). */
.hub-inner h1{overflow-wrap:anywhere}