/* =====================================================================
   DISEÑO NUEVO «RIEL» · 20/10/2026 · SOLO APP DE PRUEBAS
   ---------------------------------------------------------------------
   Capa final, cargada DESPUÉS de app.css y taller.css. Quitar su <link>
   (y el <script> de js/ui-pro.js) en index.html devuelve el diseño anterior.

   Estructura: un riel de íconos a la izquierda (una entrada por área de
   trabajo), las pestañas de los módulos del área arriba y el contenido en
   un panel flotante. Colores de la propuesta C: azul marino, cobalto y
   gris niebla, con modo claro y oscuro.

   Regla heredada de app.css: NO se tocan tamaños ni posiciones de .tb-*,
   .jpcb-* ni .vcuf-* (su geometría se calcula en JS). Aquí solo color,
   tipografía de igual tamaño, bordes y radios.
   ===================================================================== */

:root{
  --f:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* oscuro (por defecto en la App) */
  --bg:#050914; --panel:#0f1830; --panel2:#152142; --panel3:#1d2a52; --panel4:#122040;
  --linea:#26345a; --linea2:#36477a;
  --txt:#f5f7fc; --txt2:#c0c9dc; --txt3:#8b97b4;
  --azul:#5b8aff; --azul2:rgba(91,138,255,.20); --azulc:#b9cbff;
  --verde:#2bb673; --verde2:rgba(43,182,115,.15); --verdec:#86e0b2;
  --ambar:#f2a33a; --ambar2:rgba(242,163,58,.15); --ambarc:#f6c681;
  --rojo:#ef5a60; --rojo2:rgba(239,90,96,.15); --rojoc:#f6a3a7;
  --morado:#9b7cf4; --morado2:rgba(155,124,244,.16); --moradoc:#cbbcfa;
  --cyan:#2bb5cc; --cyan2:rgba(43,181,204,.15); --cyanc:#8fdbe7;
  --riel:#02050d; --riel-txt:#9aa6c2; --riel-on:#1d2b52;

  --marca-grad:var(--azul);
  --sutil-bg:#18264a; --neutro-bg:#22305a; --neutro-txt:#d3daea;
  --borde-tabla:#1f2b4d; --fila-hover:#17244a;
  --login-glow:#121c38;
  --sombra:0 16px 40px rgba(0,0,0,.45);
  --sombra-tj:none; --sombra-boton-pri:none; --sombra-boton-pri-hover:none;
  --r:14px;
  --foco:0 0 0 3px rgba(76,125,255,.30);
}
:root[data-theme="light"]{
  --bg:#dde2eb; --panel:#ffffff; --panel2:#f2f4f9; --panel3:#e6eaf2; --panel4:#ffffff;
  --linea:#d6dce7; --linea2:#bcc5d5;
  --txt:#081229; --txt2:#334060; --txt3:#5b6784;
  --azul:#1f47db; --azul2:#e2e9ff; --azulc:#14309e;
  --verde:#1f9a5f; --verde2:#e6f6ee; --verdec:#17784b;
  --ambar:#d98a1c; --ambar2:#fdf3e1; --ambarc:#a15c07;
  --rojo:#e5484d; --rojo2:#fdecec; --rojoc:#b42328;
  --morado:#6e4fd6; --morado2:#f1ecfd; --moradoc:#5634b5;
  --cyan:#13879a; --cyan2:#e5f5f7; --cyanc:#0b6574;
  --riel:#0e1a33; --riel-txt:#8592aa; --riel-on:#1f2d4d;

  --marca-grad:var(--azul);
  --sutil-bg:#eceff6; --neutro-bg:#e4e8f1; --neutro-txt:#334060;
  --borde-tabla:#e6e9f1; --fila-hover:#f0f3fa;
  --login-glow:#dfe6f7;
  --sombra:0 16px 40px rgba(14,26,51,.12);
  --foco:0 0 0 3px rgba(37,80,232,.22);
}

/* ---------- Base ---------- */
body{font-family:var(--f);letter-spacing:0;background:var(--bg);}
button,select,input,textarea{font-family:var(--f);}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:var(--linea2);border-radius:8px;border:2px solid transparent;background-clip:padding-box;}
:focus-visible{outline:none;box-shadow:var(--foco);}
.jpcb-pat,.fst-pat,.pat,.ln-pat,.efect-ficha-patente{font-family:var(--f-mono);letter-spacing:.02em;}

/* Sin rótulos en MAYÚSCULAS (salvo las etiquetas de código: DYP, COBRAR…) */
body :is(div,span,th,label,h4,h5,small,p,a,b,strong,summary):not(.chip):not(.chip-tc){text-transform:none!important;}
.jpcb-col-tit,.citas-tit,.lbl,.flt-lbl{letter-spacing:0!important;}

/* ---------- Botones y campos ---------- */
button,select,input,textarea{border-radius:10px;}
button:hover:not(:disabled){border-color:var(--linea2);background:var(--panel3);}
button.pri,button.pri:hover:not(:disabled){background:var(--azul);border-color:var(--azul);color:#fff;box-shadow:none;transform:none;filter:none;}
button.pri:hover:not(:disabled){filter:brightness(1.08);}
input:focus,select:focus,textarea:focus{border-color:var(--azul);box-shadow:var(--foco);}

/* ---------- Estructura: riel + panel flotante ---------- */
.app{grid-template-columns:72px 1fr!important;background:var(--bg);}
.lateral{background:var(--riel)!important;border-right:0!important;width:72px;min-width:72px;overflow:visible;position:relative;z-index:30;}
.lateral > :not(.riel){display:none!important;}
.lat-toggle{display:none!important;}
.riel{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;padding:14px 0 12px;box-sizing:border-box;}
.riel .logo{width:38px;height:38px;border-radius:11px;background:#fff;color:#0e1a33;font-weight:700;font-size:16px;
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.riel .r-btn{position:relative;width:46px;height:46px;border-radius:12px;border:0;background:transparent;color:var(--riel-txt);
  display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;}
.riel .r-btn svg{width:21px;height:21px;}
.riel .r-btn:hover{background:var(--riel-on);color:#e8ecf5;border:0;}
.riel .r-btn.on{background:var(--riel-on);color:#fff;}
.riel .r-btn.on::before{content:"";position:absolute;left:-13px;top:11px;bottom:11px;width:3px;border-radius:0 3px 3px 0;background:var(--azul);}
.riel .r-btn .tip{position:absolute;left:58px;top:50%;transform:translateY(-50%);white-space:nowrap;background:#0e1a33;color:#fff;
  font-size:12.5px;font-weight:600;padding:6px 10px;border-radius:8px;pointer-events:none;opacity:0;transition:opacity .12s;
  box-shadow:0 6px 20px rgba(0,0,0,.3);}
.riel .r-btn:hover .tip,.riel .r-btn:focus-visible .tip{opacity:1;}
.riel .r-badge{position:absolute;top:6px;right:6px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--rojo);
  color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;box-sizing:border-box;}
.riel .sp{flex:1;}
.riel .r-av{width:36px;height:36px;border-radius:50%;background:#2550e8;color:#fff;font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:6px;}

.principal{background:var(--bg);}
.barra{background:transparent!important;border-bottom:0!important;padding:10px 16px 8px 18px!important;min-height:58px;gap:14px;flex-wrap:wrap;}
.barra #titulo{display:none;}
.barra .area{font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--txt);white-space:nowrap;}
.modtabs{display:flex;gap:2px;background:var(--panel3);border-radius:12px;padding:3px;overflow-x:auto;max-width:100%;}
:root:not([data-theme="light"]) .modtabs{background:var(--panel);}
.modtabs button{height:32px;padding:0 13px;border-radius:9px;border:0;background:transparent;color:var(--txt2);
  font-size:13.5px;font-weight:500;white-space:nowrap;}
.modtabs button:hover{background:transparent;color:var(--txt);border:0;}
.modtabs button.on{background:var(--panel);color:var(--txt);font-weight:650;box-shadow:0 1px 3px rgba(14,26,51,.14);}
:root:not([data-theme="light"]) .modtabs button.on{background:var(--panel3);box-shadow:none;}
.pill{font-size:11.5px;font-weight:600;text-transform:none;letter-spacing:0;border-radius:7px;padding:3px 8px;}
.barra .gente .av{font-weight:600;}

.vista{margin:0 12px 12px;border-radius:18px;background:var(--panel);border:1px solid var(--linea);overflow:hidden;}
:root[data-theme="light"] .vista{border-color:#cfd6e3;box-shadow:0 1px 3px rgba(8,18,41,.08);}

.buscar-k{display:inline-flex;align-items:center;gap:10px;min-width:250px;height:38px;padding:0 12px;
  border:1px solid var(--linea);background:var(--panel)!important;color:var(--txt3);border-radius:12px;font-size:13px;cursor:pointer;}
.buscar-k:hover{border-color:var(--linea2)!important;color:var(--txt2);}
.buscar-k svg{width:15px;height:15px;}
.buscar-k kbd{margin-left:auto;font:600 11px var(--f-mono);color:var(--txt3);}

/* ---------- Pestañas internas de cada módulo ---------- */
.tabs,.subtabs{gap:4px;padding:0 18px;border-bottom:1px solid var(--linea)!important;}
.tab,.subtab{font-size:13.5px;font-weight:500;color:var(--txt2);padding:13px 10px;margin-bottom:-1px;border-bottom:2px solid transparent;}
.tab:hover,.subtab:hover{color:var(--txt);}
.tab.on,.subtab.on{color:var(--txt);font-weight:650;border-bottom-color:var(--azul);background:transparent;}
.tab .n{background:var(--panel3);color:var(--txt2);font-weight:600;}

/* ---------- Indicadores: un solo panel de instrumentos ---------- */
.kpis{gap:0!important;flex-wrap:nowrap;overflow-x:auto;border:1px solid var(--linea);border-radius:14px;background:var(--panel);margin-top:12px;}
.kpis .kpi{flex:1 1 0;min-width:118px;background:transparent!important;border:0!important;border-radius:0!important;
  border-right:1px solid var(--linea)!important;padding:13px 16px 12px!important;box-shadow:none!important;position:relative;}
.kpis .kpi:last-child{border-right:0!important;}
.kpi .v{font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums;}
.kpi .k{font-size:12px;text-transform:none;letter-spacing:0;color:var(--txt3);margin-top:2px;white-space:nowrap;}
.kpis .kpi.tw-kpi-atencion::before,.kpis .kpi.tw-kpi-critica::before{content:"";position:absolute;left:16px;right:16px;top:0;height:3px;border-radius:0 0 3px 3px;}
.kpis .kpi.tw-kpi-atencion::before{background:var(--ambar);}
.kpis .kpi.tw-kpi-critica::before{background:var(--rojo);}

/* ---------- Secciones, tablas y etiquetas ---------- */
.seccion{border-radius:14px;box-shadow:none;}
.seccion > h4{font-size:14px;font-weight:650;}
thead th{font-size:12px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--txt3);background:var(--panel2);}
tbody tr:hover td{background:var(--fila-hover);}
.chip,.chip-tc{font-weight:650;border-radius:7px;letter-spacing:0;}

/* ---------- JPCB: tarjetas y columnas ---------- */
.jpcb-col{border-radius:14px!important;}
.jpcb-col-tit{font-weight:700!important;}

/* ---------- Ingreso ---------- */
.login{background:var(--bg);}
.login .caja{border-radius:20px;border:1px solid var(--linea);box-shadow:var(--sombra);}
.login .logo{background:#0e1a33;color:#fff;box-shadow:none;}
:root:not([data-theme="light"]) .login .logo{background:#fff;color:#0e1a33;}
.login h1{font-weight:700;letter-spacing:-.02em;}

/* ---------- Paleta de comandos (Ctrl+K) ---------- */
.cmdk-fondo{position:fixed;inset:0;z-index:10000;background:rgba(5,9,20,.5);display:flex;justify-content:center;align-items:flex-start;padding-top:12vh;}
:root[data-theme="light"] .cmdk-fondo{background:rgba(14,26,51,.25);}
.cmdk{width:min(620px,92vw);background:var(--panel);border:1px solid var(--linea2);border-radius:16px;box-shadow:var(--sombra);overflow:hidden;animation:cmdk-in .14s ease-out;}
@keyframes cmdk-in{from{opacity:0;transform:translateY(-6px) scale(.99);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.cmdk{animation:none;}}
.cmdk input{width:100%;border:0;border-bottom:1px solid var(--linea);border-radius:0;background:transparent;font-size:15px;padding:16px 18px;box-shadow:none!important;}
.cmdk ul{list-style:none;margin:0;padding:6px;max-height:min(420px,56vh);overflow:auto;}
.cmdk li{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;cursor:pointer;color:var(--txt2);font-size:14px;}
.cmdk li .ic{width:18px;height:18px;color:var(--txt3);display:inline-flex;}
.cmdk li .ic svg{width:16px;height:16px;}
.cmdk li .g{margin-left:auto;font-size:12px;color:var(--txt3);}
.cmdk li.sel{background:var(--azul2);color:var(--txt);}
.cmdk li.sel .ic{color:var(--azul);}
.cmdk .vacio{padding:18px;color:var(--txt3);font-size:13.5px;}
.cmdk .pie{display:flex;gap:16px;padding:9px 16px;border-top:1px solid var(--linea);font-size:12px;color:var(--txt3);}
.cmdk .pie kbd{font:600 11px var(--f-mono);border:1px solid var(--linea2);border-radius:4px;padding:0 5px;margin-right:4px;}

/* ---------- Pantallas de la Plataforma (Carlos) ---------- */
.plat-cont{padding:0;gap:0;}
.plat-frame{border:0;border-radius:0;}
.plat-aviso{border-radius:0;border-bottom:1px solid var(--linea);background:var(--ambar2);color:var(--ambarc);padding:10px 18px;font-size:13px;}

/* ---------- Celular / tablet: el riel pasa abajo ---------- */
@media (max-width:1080px){
  .app{grid-template-columns:1fr!important;padding-bottom:64px;}
  .lateral{position:fixed!important;left:0;right:0;bottom:0;top:auto;width:auto;min-width:0;height:64px;transform:none!important;}
  .riel{flex-direction:row;justify-content:space-around;padding:0 6px;height:64px;}
  .riel .logo,.riel .sp,.riel .tip{display:none;}
  .riel .r-btn.on::before{left:11px;right:11px;top:auto;bottom:-9px;width:auto;height:3px;border-radius:3px 3px 0 0;}
  .buscar-k{min-width:0;}.buscar-k span,.buscar-k kbd{display:none;}
  .vista{margin:0 8px 8px;}
  #menu{display:none!important;}
}

/* ---------- JPCB: la fila del filtro de asesor sube a la línea de las
   pestañas (JPCB, Flujo…) para dejar más alto al tablero. Su posición la
   calcula js/ui-pro.js (--jpcb-filtro-top / --jpcb-filtro-h). ---------- */
@media (min-width:1300px){
  #tw{position:relative;}
  #tw .tw-cuerpo-jpcb .filtros.sube{position:absolute;right:58px;top:var(--jpcb-filtro-top,0);height:var(--jpcb-filtro-h,44px);
    margin:0;padding:0;border:0;background:transparent;display:flex;align-items:center;gap:10px;z-index:6;width:auto;min-height:0;}
  #tw .tw-cuerpo-jpcb .filtros.sube select{height:34px;padding-top:0;padding-bottom:0;}
}