/* Colorimetría TTB (Transporte y Traslados del Bajío), tomada de su logo:
     azul    #3471BA  (las dos T)      naranja #E1633D  (la B)
     negro   #0A0A0A  (barra superior)
   Los dos primeros están medidos del logo que compartió Pablo. Viene de un
   cuadro de video comprimido, así que si algún día aparece el archivo vectorial
   original conviene volver a tomarlos de ahí.

   Azul para la acción y naranja para acentuar. Se separan a propósito del rojo,
   que queda reservado para lo negativo: un botón naranja junto a una utilidad
   en rojo se confunde de un vistazo.

   Verde y ámbar no son de la marca y se conservan: en un tablero de utilidad el
   color es información, no decoración. */
:root{
  /* --surface y --surface2 son TRANSLÚCIDAS: el vidrio se arma con ellas más
     el desenfoque del bloque "Vidrio" al final del archivo. --solid es para lo
     que NO puede transparentarse: la columna fija de las tablas, por donde se
     vería pasar el resto de los renglones. */
  --bg:#E4E9EF; --surface:rgba(255,255,255,.55); --surface2:rgba(255,255,255,.32);
  --solid:#F8FAFC; --ink:#0E1013; --muted:#5B6067; --line:rgba(16,24,40,.09);
  --brillo:rgba(255,255,255,.9);                         /* filo superior del vidrio */
  --sombra:0 10px 30px rgba(16,24,40,.09), 0 1px 2px rgba(16,24,40,.05);
  --vidrio:saturate(165%) blur(18px);
  --sign:#0A0A0A; --sign-2:#000000; --on-sign:#FFFFFF;   /* barra de identidad oscura */
  --hero:#101114; --on-hero:#FFFFFF;                     /* panel oscuro del indicador principal */
  --pri:#2B5E9E; --on-pri:#FFFFFF;                       /* azul TTB, oscurecido para que el texto blanco contraste */
  --acento:#E1633D;                                      /* naranja TTB */
  --amber:#B5730B; --loss:#B01F14; --gain:#0E7A4F;
  --focus:#3471BA;
  --f:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fc:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#06080B; --surface:rgba(24,30,38,.58); --surface2:rgba(255,255,255,.055);
  --solid:#11161C; --ink:#FFFFFF; --muted:#A2ACB6; --line:rgba(255,255,255,.13);
  --brillo:rgba(255,255,255,.16);
  --sombra:0 12px 34px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35);
  --sign:rgba(10,10,10,.72); --sign-2:#000000; --hero:rgba(18,23,30,.72); --pri:#4A90D9; --acento:#E1633D;
  --amber:#E0A93A; --loss:#F2564A; --gain:#3FBE86; --focus:#6FB0E8;
}}
:root[data-theme="dark"]{
  --bg:#06080B; --surface:rgba(24,30,38,.58); --surface2:rgba(255,255,255,.055);
  --solid:#11161C; --ink:#FFFFFF; --muted:#A2ACB6; --line:rgba(255,255,255,.13);
  --brillo:rgba(255,255,255,.16);
  --sombra:0 12px 34px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35);
  --sign:rgba(10,10,10,.72); --sign-2:#000000; --hero:rgba(18,23,30,.72); --pri:#4A90D9; --acento:#E1633D;
  --amber:#E0A93A; --loss:#F2564A; --gain:#3FBE86; --focus:#6FB0E8;
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
/* El vidrio necesita algo que desenfocar: sobre un fondo plano no se ve nada.
   Son los dos colores de TTB, muy diluidos, fijos al viewport para que el
   fondo no se mueva con el scroll. */
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;min-height:100vh}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(70vw 70vh at 12% 8%,  color-mix(in srgb,#3471BA 92%,transparent), transparent 72%),
    radial-gradient(62vw 62vh at 90% 12%, color-mix(in srgb,#E1633D 80%,transparent), transparent 70%),
    radial-gradient(84vw 74vh at 64% 98%, color-mix(in srgb,#3471BA 72%,transparent), transparent 72%),
    radial-gradient(62vw 58vh at 8%  84%, color-mix(in srgb,#E1633D 46%,transparent), transparent 70%);}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) body::before{opacity:.5} }
:root[data-theme="dark"] body::before{opacity:.5}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.num{font-family:var(--fc);font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* Encabezado tipo señalamiento carretero */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:transparent;padding:10px 12px 0}
.sign{background:var(--sign);color:var(--on-sign);border-radius:10px;padding:4px;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.sign-in{border:1px solid rgba(181,183,184,.22);border-radius:7px;padding:8px 12px;display:flex;align-items:center;gap:12px}
.sign .marca{height:40px;width:auto;flex:none;background:#fff;border-radius:6px;padding:3px 6px}
.permod{border:1px solid var(--line);border-radius:8px;padding:9px 11px;margin-bottom:7px;background:var(--surface2)}
.permod .pt{font-weight:600;font-size:13.5px;margin-bottom:6px}
.permod .pt small{display:block;font-weight:400;color:var(--muted);font-size:12px}
.permod .pac{display:flex;flex-wrap:wrap;gap:6px 14px}
.pchk{display:flex;align-items:center;gap:5px;font-size:13px;white-space:nowrap;cursor:pointer}
.pchk input{width:auto;margin:0}
.fg .w2{grid-column:span 2}
.fg input[type=file]{padding:6px 8px;background:var(--surface2)}
.fsec{grid-column:1/-1;font-weight:600;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--line);padding-bottom:5px;margin:10px 0 2px}
.fsec:first-child{margin-top:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sign h1{margin:0;font-weight:600;font-size:22px;letter-spacing:.005em;line-height:1.1}
.sign small{display:block;font-size:12.5px;opacity:.85;font-weight:500}

.sign .state{margin-left:auto;font-size:12px;font-weight:500;opacity:.9;text-align:right}
nav.tabs{display:flex;gap:4px;overflow-x:auto;padding:10px 0 8px;scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs button{border:0;background:transparent;padding:8px 14px;border-radius:999px;font-weight:600;color:var(--muted);white-space:nowrap;cursor:pointer}
nav.tabs button[aria-current="page"]{background:var(--ink);color:var(--bg)}
main{padding:4px 12px 40px;max-width:1240px;margin:0 auto}
.top-wrap{max-width:1240px;margin:0 auto}

/* Bloques */
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0 14px}
.bar h2{margin:0 auto 0 0;font-size:20px;font-weight:600}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:14px}
.panel h3{margin:0 0 10px;font-size:15.5px;font-weight:600}
.panel h3 span{font-weight:400;color:var(--muted);font-size:13.5px}
/* `min-width:0` no es adorno: sin él, un elemento de rejilla NO se encoge por
   debajo de su contenido, así que una tabla ancha estira el panel y en el
   celular toda la pantalla se corre de lado. Con esto, el panel se queda en su
   sitio y la tabla se desplaza sola dentro de su `.tbl-wrap`. */
.grid2{display:grid;gap:14px;grid-template-columns:1fr}
.grid2>*,.panel,.kpi{min-width:0}
.tbl-wrap{max-width:100%}
@media (min-width:860px){.grid2{grid-template-columns:1fr 1fr}}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:14px}
@media (min-width:760px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--surface);padding:12px 14px}
.kpi .l{font-size:13px;color:var(--muted);font-weight:500}
.kpi .v{font-family:var(--fc);font-size:27px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi .s{font-size:12.5px;color:var(--muted)}
.kpi.hero{background:var(--hero);color:var(--on-hero);box-shadow:inset 4px 0 0 var(--acento)}
.kpi.hero .l,.kpi.hero .s{color:rgba(255,255,255,.85)}
.pos{color:var(--gain)} .neg{color:var(--loss)}
.kpi.hero .neg{color:#FFD2CC}
.chart{position:relative;height:260px}
.chart.tall{height:300px}

.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:7px 8px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-weight:600;color:var(--muted);font-size:12.5px}
/* Si fuera translúcida se vería pasar el resto de los renglones por debajo. */
th:first-child,td:first-child{text-align:left;position:sticky;left:0;background:var(--solid)}
tfoot td{font-weight:700;border-top:2px solid var(--ink);border-bottom:0}
td.num,th.num{font-family:var(--fc);font-size:15px}

.btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 13px;font-weight:600;cursor:pointer}
.btn.pri{background:var(--pri);border-color:var(--pri);color:var(--on-pri)}
.btn.danger{color:var(--loss);border-color:color-mix(in srgb,var(--loss) 55%,var(--line));background:color-mix(in srgb,var(--loss) 7%,var(--surface))}
.btn.sm{padding:5px 10px;font-size:13.5px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.seg{display:flex;gap:2px;background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:2px;overflow-x:auto}
.seg button{border:0;background:transparent;padding:6px 10px;border-radius:6px;font-weight:600;font-size:13.5px;color:var(--muted);cursor:pointer;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
input,select,textarea{background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:8px 10px;width:100%;min-width:0}
input[type=date]{min-height:38px}
.dates{display:flex;gap:6px;align-items:center}
.dates input{width:auto}

/* Lista de viajes */
.list{display:flex;flex-direction:column;gap:8px}
.row{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:11px 13px;display:grid;grid-template-columns:1fr auto;gap:2px 12px;cursor:pointer;text-align:left;width:100%}
.row:hover{border-color:var(--muted)}
.row .t{font-weight:600}
.row .m{font-size:13.5px;color:var(--muted)}
.row .r{text-align:right}
.row .big{font-family:var(--fc);font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.chip{display:inline-block;font-size:12px;font-weight:600;padding:1px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);vertical-align:1px}
.chip.programado{color:var(--muted)}
.chip.en_ruta{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 50%,var(--line))}
.chip.entregado{color:var(--focus);border-color:color-mix(in srgb,var(--focus) 45%,var(--line))}
.chip.liquidado{color:var(--gain);border-color:color-mix(in srgb,var(--gain) 45%,var(--line))}
.chip.cancelado{color:var(--loss);text-decoration:line-through}
.empty{padding:28px 16px;text-align:center;color:var(--muted);background:var(--surface);border:1px dashed var(--line);border-radius:10px}
.empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}
.note{font-size:13px;color:var(--muted);margin:6px 0 0}
.banner{background:color-mix(in srgb,var(--amber) 16%,var(--surface));border:1px solid color-mix(in srgb,var(--amber) 45%,var(--line));padding:9px 12px;border-radius:8px;font-size:13.5px;margin-bottom:12px}
.callout{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}

/* Modal */
.back{position:fixed;inset:0;background:rgba(8,12,18,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:50;display:flex;align-items:flex-end;justify-content:center}
@media (min-width:720px){.back{align-items:center;padding:20px}}
.sheet{background:var(--surface);width:100%;max-width:760px;max-height:calc(100% - env(safe-area-inset-top,0px) - 16px);display:flex;flex-direction:column;border-radius:14px 14px 0 0;animation:up .18s ease-out}
@media (min-width:720px){.sheet{border-radius:12px;max-height:92%}}
@keyframes up{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}}
.sheet header{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line)}
.sheet header h3{margin:0;font-size:17px;font-weight:600;flex:1}
.sheet .body{padding:14px 16px;overflow-y:auto}
.sheet footer{display:flex;gap:8px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);flex-wrap:wrap}
.sheet footer .sp{flex:1}
.x{border:0;background:transparent;font-size:24px;line-height:1;cursor:pointer;color:var(--muted);padding:2px 6px}
.fg{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 12px}
@media (min-width:620px){.fg{grid-template-columns:repeat(3,1fr)}}
.fg label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);font-weight:500}
.fg .full{grid-column:1/-1}
.sec{margin:16px 0 8px;font-weight:600;font-size:14.5px;display:flex;align-items:center;gap:8px}
.sec .btn{margin-left:auto}
.gastos{display:flex;flex-direction:column;gap:8px}
.grow{display:grid;grid-template-columns:1.3fr 1fr 1fr auto;gap:6px;align-items:center;background:var(--surface2);padding:8px;border-radius:8px}
.grow .lt{grid-column:1/3}
.grow .pp{grid-column:3/5}
@media (min-width:620px){.grow{grid-template-columns:1.4fr 1fr .8fr 1.1fr auto}.grow .lt,.grow .pp{grid-column:auto}}
.sum{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border-radius:8px;overflow:hidden;margin-top:14px}
@media (min-width:620px){.sum{grid-template-columns:repeat(4,1fr)}}
.sum div{background:var(--surface2);padding:8px 10px}
.sum span{display:block;font-size:12px;color:var(--muted)}
.sum b{font-family:var(--fc);font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
.pick{display:flex;flex-direction:column;gap:6px}
.pick label{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:9px 10px;background:var(--surface2);border-radius:8px;cursor:pointer}
.pick input{width:18px;height:18px}
#toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:8px;font-weight:500;z-index:80;opacity:0;pointer-events:none;transition:opacity .2s}
#toast.on{opacity:1}
.cat-h{display:flex;align-items:center;gap:8px;margin:18px 0 8px}
.cat-h h3{margin:0;font-size:16px;font-weight:600;flex:1}
.sign .state button{margin-top:4px;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:6px;padding:3px 9px;font-size:12px;font-weight:600;cursor:pointer}
.crow{display:grid;grid-template-columns:1fr 1fr auto;gap:6px;align-items:center;background:var(--surface2);padding:8px;border-radius:8px}
.crow .cl{grid-column:1/-1}
@media (min-width:620px){.crow{grid-template-columns:1.7fr 1.1fr 1fr auto}.crow.adm{grid-template-columns:1.6fr 1.1fr 1fr 1fr auto}.crow .cl{grid-column:auto}}
.crow.adm{grid-template-columns:1fr 1fr 1fr auto}
.crow.adm .cl{grid-column:1/-1}
@media (min-width:620px){.crow.adm .cl{grid-column:auto}}
.crow label{display:flex;flex-direction:column;gap:2px;font-size:11.5px;color:var(--muted)}
.board{display:grid;gap:8px;grid-template-columns:1fr}
@media (min-width:720px){.board{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.board{grid-template-columns:1fr 1fr 1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 13px;display:flex;flex-direction:column;gap:4px}
.card .t{font-weight:600;display:flex;gap:8px;align-items:center}
.card .m{font-size:13.5px;color:var(--muted)}
.card .acts{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none}
.dot.ruta{background:var(--amber)} .dot.libre{background:var(--gain)} .dot.prog{background:var(--focus)}
.kpis.k3{grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){.kpis.k3{grid-template-columns:repeat(4,1fr)}}
.lbl{font-size:12px;color:var(--muted)}
.urow{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px;background:var(--surface2);padding:8px 10px 10px;border-radius:8px}
@media (min-width:620px){.urow{grid-template-columns:repeat(4,1fr)}}
.urow label{display:flex;flex-direction:column;gap:2px;font-size:11.5px;color:var(--muted);min-width:0}
.urow .w2{grid-column:span 2}
.urow .rh{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:13.5px}
details.cpbox{margin-top:16px;border:1px solid var(--line);border-radius:10px;padding:0 12px}
details.cpbox summary{cursor:pointer;padding:12px 0;font-weight:600;font-size:15px}
/* Solicitudes del operador */
.chip.pendiente{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 50%,var(--line))}
.chip.aprobada{color:var(--gain);border-color:color-mix(in srgb,var(--gain) 45%,var(--line))}
.chip.rechazada{color:var(--loss);border-color:color-mix(in srgb,var(--loss) 45%,var(--line))}
/* El botón que abre la cámara es una etiqueta con el input escondido adentro. */
label.btn{cursor:pointer}
.chip.cp-timbrada{color:var(--gain);border-color:color-mix(in srgb,var(--gain) 45%,var(--line))}
.chip.cp-lista{color:var(--focus);border-color:color-mix(in srgb,var(--focus) 45%,var(--line))}
.chip.cp-incompleta{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 50%,var(--line))}

/* ==================== Vidrio =========================================
   Las superficies ya son translúcidas (ver :root). Aquí se les agrega el
   desenfoque, el filo de luz de arriba y la sombra que las separa del fondo.

   Tres reglas que no se rompen:
   1. El desenfoque va SOLO en los bloques que se apoyan en el fondo de la
      página. Anidar vidrio dentro de vidrio desenfoca lo ya desenfocado: se
      ve sucio y cuesta el doble.
   2. Lo que lleva números encima sube su opacidad. En un tablero de utilidad
      la legibilidad gana siempre.
   3. Quien no tenga `backdrop-filter`, o pida menos transparencia, ve el
      sistema opaco y completo. El vidrio es adorno, no estructura.
   =================================================================== */
.top,.panel,.kpi,.row,.card,.empty,.sheet,.seg,.banner,.permod,details.cpbox{
  backdrop-filter:var(--vidrio); -webkit-backdrop-filter:var(--vidrio);
}
/* Lo que se desplaza por debajo de la barra se ve difuminado, no tapado. */
.top{padding-bottom:2px}
.panel,.row,.card,.empty,.kpis,details.cpbox{
  box-shadow:var(--sombra), inset 0 1px 0 var(--brillo);
}
.panel,.row,.card,.empty,.kpis,.sheet,details.cpbox{border-radius:16px}
.panel{padding:16px}
.sign{box-shadow:var(--sombra); border:1px solid var(--brillo)}
.seg,input,select,textarea{box-shadow:inset 0 1px 0 var(--brillo)}

/* El indicador principal y la barra de identidad son los únicos oscuros:
   vidrio ahumado, para que el número grande siga leyéndose de lejos. */
.kpi.hero{backdrop-filter:saturate(140%) blur(18px);-webkit-backdrop-filter:saturate(140%) blur(18px)}

.sheet{box-shadow:0 -10px 60px rgba(8,12,18,.35); border:1px solid var(--brillo); border-bottom:0}
@media (min-width:720px){.sheet{border-bottom:1px solid var(--brillo)}}

.btn{box-shadow:var(--sombra), inset 0 1px 0 var(--brillo); backdrop-filter:var(--vidrio); -webkit-backdrop-filter:var(--vidrio); transition:transform .12s ease, box-shadow .12s ease}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn:active:not(:disabled){transform:translateY(0)}
.btn.pri{box-shadow:0 6px 18px color-mix(in srgb,var(--pri) 38%,transparent), inset 0 1px 0 rgba(255,255,255,.28)}
nav.tabs button[aria-current="page"]{box-shadow:0 6px 16px rgba(16,24,40,.22)}
.row{transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease}
.row:hover{transform:translateY(-1px); box-shadow:0 14px 34px rgba(16,24,40,.13), inset 0 1px 0 var(--brillo)}

/* Los recuadros de adentro (gastos, resúmenes, selectores de viaje) NO llevan
   desenfoque propio: ya están sobre un panel de vidrio. */
.grow,.crow,.urow,.sum div,.pick label,.fg input[type=file]{backdrop-filter:none;-webkit-backdrop-filter:none}

/* Las tablas necesitan más cuerpo que el resto del vidrio. */
.panel .tbl-wrap table{background:color-mix(in srgb,var(--solid) 46%,transparent)}
tfoot td{background:color-mix(in srgb,var(--solid) 45%,transparent)}

/* La columna fija tapa lo que pasa por debajo al desplazar la tabla de lado,
   pero sin volverse una franja blanca dentro del panel de color: deja pasar un
   poco del tinte y desenfoca lo que cruza. */
th:first-child,td:first-child,tfoot td:first-child{
  background:color-mix(in srgb,var(--solid) 78%,transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  th:first-child,td:first-child,tfoot td:first-child{background:var(--solid)}}
@media (prefers-reduced-transparency:reduce){
  th:first-child,td:first-child,tfoot td:first-child{background:var(--solid);backdrop-filter:none;-webkit-backdrop-filter:none}}

/* --- Sin soporte de vidrio: todo opaco, nada se pierde ------------------ */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  :root{--surface:#FFFFFF; --surface2:#F3F6F9}
  .top{background:var(--bg)}
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--surface:#12171E; --surface2:#1A2028} }
  :root[data-theme="dark"]{--surface:#12171E; --surface2:#1A2028}
  body::before{opacity:.35}
}

/* --- Quien pide menos transparencia la recibe --------------------------- */
@media (prefers-reduced-transparency:reduce){
  :root{--surface:#FFFFFF; --surface2:#F3F6F9}
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--surface:#12171E; --surface2:#1A2028} }
  :root[data-theme="dark"]{--surface:#12171E; --surface2:#1A2028}
  body::before{display:none}
  .top,.sign,.panel,.kpi,.row,.card,.empty,.sheet,.seg,.banner,.permod,.btn,.back,details.cpbox{
    backdrop-filter:none; -webkit-backdrop-filter:none}
  .top{background:var(--bg)}
  .back{background:rgba(0,0,0,.6)}
}

@media (prefers-reduced-motion:reduce){
  .btn:hover:not(:disabled),.row:hover{transform:none}
}