:root {
  color-scheme: light;
  --fondo: #f4f3f0;
  --superficie: #fcfcfb;
  --superficie-2: #f0efec;
  --borde: #e2e0da;
  --texto: #0b0b0b;
  --texto-2: #52514e;
  --texto-3: #7a7973;
  --acento: #2a78d6;
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --serie-3: #1baf7a;
  --serie-4: #eda100;
  --serie-5: #e87ba4;
  --serie-6: #8b5cf6;
  --serie-7: #0e9fb3;
  --rejilla: #e8e6e1;
  --bueno: #0f7b3f;
  --malo: #c23b3a;
  --alta: #c23b3a;
  --media: #a86b00;
  --sombra: 0 1px 2px rgba(0,0,0,.05);
  /* gasolina: regular verde, premium rojo, diésel negro (en oscuro, gris claro para que se vea) */
  --gas-regular: #1baf7a;
  --gas-premium: #d32f2f;
  --gas-diesel: #1f1f1f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fondo: #121211;
    --superficie: #1a1a19;
    --superficie-2: #242422;
    --borde: #33332f;
    --texto: #ffffff;
    --texto-2: #c3c2b7;
    --texto-3: #8f8e86;
    --acento: #3987e5;
    --serie-1: #3987e5;
    --serie-2: #d95926;
    --serie-3: #199e70;
    --serie-4: #c98500;
    --serie-5: #d55181;
    --serie-6: #a084f5;
    --serie-7: #26b4c6;
    --rejilla: #2c2c29;
    --bueno: #4cc27f;
    --malo: #f07472;
    --alta: #f07472;
    --media: #e0a23a;
    --sombra: none;
    --gas-regular: #199e70;
    --gas-premium: #f0605d;
    --gas-diesel: #d6d6d0;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --gas-regular: #199e70;
  --gas-premium: #f0605d;
  --gas-diesel: #d6d6d0;
  --fondo: #121211;
  --superficie: #1a1a19;
  --superficie-2: #242422;
  --borde: #33332f;
  --texto: #ffffff;
  --texto-2: #c3c2b7;
  --texto-3: #8f8e86;
  --acento: #3987e5;
  --serie-1: #3987e5;
  --serie-2: #d95926;
  --serie-3: #199e70;
  --serie-4: #c98500;
  --serie-5: #d55181;
  --serie-6: #a084f5;
  --serie-7: #26b4c6;
  --rejilla: #2c2c29;
  --bueno: #4cc27f;
  --malo: #f07472;
  --alta: #f07472;
  --media: #e0a23a;
  --sombra: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fondo);
  color: var(--texto);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
.tenue { color: var(--texto-3); font-weight: 400; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- login ---------- */
body.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-caja { width: 100%; max-width: 360px; padding: 28px; display: grid; gap: 14px; }
.login-caja h1 { font-size: 20px; margin: 4px 0 0; }
.login-caja label { display: grid; gap: 6px; color: var(--texto-2); font-size: 13px; }
.login-caja input {
  padding: 10px 12px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie);
}
.login-caja input:focus-visible, select:focus-visible, button:focus-visible, .tab:focus-visible, .lateral summary:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 1px;
}
.login-caja button {
  margin-top: 6px; padding: 10px; border: 0; border-radius: 8px; background: var(--acento);
  color: #fff; font-weight: 600; cursor: pointer;
}
.error { margin: 0; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--malo) 12%, transparent);
  color: var(--malo); font-size: 13px; }

/* ---------- estructura ---------- */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra); }
.marca { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.marca-punto { width: 10px; height: 10px; border-radius: 3px; background: var(--acento); }
.logo { display: block; height: 32px; width: auto; border-radius: 6px; }
.login-caja .marca { flex-direction: column; gap: 6px; font-size: 16px; }
.login-caja .logo { height: 72px; }
/* el texto del logo es azul oscuro: en tema oscuro va sobre una placa clara */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo { background: #fff; padding: 3px 6px; } }
:root[data-theme="dark"] .logo { background: #fff; padding: 3px 6px; }

header.barra {
  position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--borde);
}
.barra-in { padding: 10px 16px; display: flex; align-items: center; gap: 14px; min-height: 53px; }
.menu-btn { font-size: 16px; line-height: 1; padding: 6px 9px; }
.ruta { display: flex; gap: 6px; align-items: center; min-width: 0; color: var(--texto-3); font-size: 13px; white-space: nowrap; overflow: hidden; }
.ruta span:last-child { color: var(--texto); font-weight: 600; }
.ruta .sep { color: var(--texto-3); }

/* ---------- menú lateral (giro → área → pantalla) ---------- */
.cuerpo { display: grid; grid-template-columns: 240px minmax(0, 1fr); }
body.menu-oculto .cuerpo { grid-template-columns: minmax(0, 1fr); }
body.menu-oculto .lateral { display: none; }
.lateral {
  position: sticky; top: 53px; align-self: start; height: calc(100vh - 53px); overflow-y: auto;
  padding: 12px 10px 24px; border-right: 1px solid var(--borde); background: var(--superficie);
}
.lateral summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; border-radius: 6px; user-select: none; }
.lateral summary::-webkit-details-marker { display: none; }
.lateral summary::before { content: "›"; display: inline-block; width: 10px; transition: transform .15s; color: var(--texto-3); }
.lateral details[open] > summary::before { transform: rotate(90deg); }
.lateral summary:hover { background: var(--superficie-2); }
.giro { margin-bottom: 6px; }
.giro > summary { padding: 7px 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }
/* color por giro (pedido del usuario): franja a la izquierda y nombre del giro; gas verde, gasolina azul */
.giro[data-giro="gas"] { --giro: var(--serie-3); }
.giro[data-giro="gasolina"] { --giro: var(--serie-1); }
.giro[data-giro] { border-left: 3px solid var(--giro); padding-left: 4px; border-radius: 2px; }
.giro[data-giro] > summary { color: var(--giro); }
.giro.admin { border-top: 1px solid var(--borde); padding-top: 8px; margin-top: 8px; }
.area { margin: 2px 0 4px 8px; }
/* áreas (Call Center, Comercial, Catálogos…) en negritas; sus pantallas con sangría y línea guía */
.area > summary { padding: 6px 8px; font-size: 14.5px; font-weight: 700; color: var(--texto); }
.area > .tab { margin-left: 17px; width: calc(100% - 17px); padding-left: 14px; border-left: 1px solid var(--borde); border-radius: 0 7px 7px 0; }
.tab {
  display: block; width: 100%; text-align: left; border: 0; background: none; padding: 6px 10px 6px 26px; margin: 1px 0;
  border-radius: 7px; color: var(--texto-2); cursor: pointer; font-weight: 500;
}
.giro.admin > .tab { padding-left: 26px; }
.tab:hover { background: var(--superficie-2); color: var(--texto); }
.tab[aria-current="page"] { background: color-mix(in srgb, var(--acento) 14%, transparent); color: var(--acento); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--acento); }
.lateral [hidden] { display: none; }
.velo { position: fixed; inset: 53px 0 0; background: rgba(0,0,0,.35); z-index: 6; }
.usuario { margin-left: auto; display: flex; align-items: center; gap: 12px; color: var(--texto-2); font-size: 13px; }
.usuario a { color: var(--texto-2); }
.icono-btn { border: 1px solid var(--borde); background: var(--superficie); border-radius: 8px; padding: 4px 8px; cursor: pointer; }

main { max-width: 1280px; width: 100%; margin: 0 auto; padding: 16px 16px 48px; min-width: 0; }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 16px; }
.filtros label { display: grid; gap: 4px; font-size: 12px; color: var(--texto-3); }
.filtros select {
  padding: 7px 10px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); min-width: 150px;
}
.boton {
  padding: 7px 12px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie);
  cursor: pointer; text-decoration: none; color: var(--texto); display: inline-flex; gap: 6px; align-items: center;
}
.boton:hover { background: var(--superficie-2); }
.nota { color: var(--texto-3); font-size: 12px; }
.filtros .nota { margin-left: auto; align-self: center; }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { padding: 14px 16px; }
.kpi .et { color: var(--texto-2); font-size: 12.5px; }
/* fichas de Comercial directivo */
#kpis-dir { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.kpi-dir { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px;
  grid-template-areas: "ico tit tit" "ico val val" "crec crec ppto" "crec crec graf"; padding: 14px 14px 12px; border-left: 4px solid var(--c); }
.kd-icono { grid-area: ico; align-self: start; width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center;
  background: var(--c); color: #fff; box-shadow: 0 2px 6px color-mix(in srgb, var(--c) 35%, transparent); }
.kd-icono svg { width: 28px; height: 28px; }
/* diésel: en tema oscuro el "negro" es gris claro, el icono va oscuro para que contraste */
.kpi-dir[style*="--gas-diesel"] .kd-icono { color: var(--fondo); }
.kd-tit { grid-area: tit; font-size: 13.5px; font-weight: 600; color: var(--texto-2); }
.kd-val { grid-area: val; align-self: start; line-height: 1.15; font-size: 25px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kd-crec { grid-area: crec; align-self: center; margin-top: 6px; font-size: 12.5px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.kd-crec .nota { font-size: 11.5px; }
.kd-ppto { grid-area: ppto; margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.kd-ppto .nota { font-size: 11px; line-height: 1.25; white-space: nowrap; }
.kd-anillo { position: relative; width: 54px; height: 54px; color: var(--c); flex: none; }
.kd-anillo svg { width: 100%; height: 100%; display: block; }
.kd-anillo span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: var(--texto); }
.kd-graf { grid-area: graf; align-self: end; color: var(--c); }
.kd-spark { width: 100%; height: 32px; display: block; margin-top: 4px; }

/* tabla por UDN: barra azul marino, encabezados por grupo y mapa de calor */
.seccion.seccion-navy { --navy: #12345e; padding: 0; overflow: hidden; }
:root[data-theme="dark"] .seccion-navy { --navy: #1b3f6b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seccion-navy { --navy: #1b3f6b; } }
.barra-navy { background: var(--navy); color: #fff; padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.seccion-navy .barra-navy h2 { margin: 0; color: #fff; font-size: 17px; }
.seccion-navy .barra-navy h2::before { content: "▮▮▮"; letter-spacing: -2px; font-size: 13px; margin-right: 10px; opacity: .9; }
.barra-navy .nota { color: #d6e2f2; margin: 0 0 0 auto; font-size: 11.5px; max-width: 760px; text-align: right; }
.seccion-navy .tabla-scroll { margin-top: 0; }
:is(#t-dir-plazas, #t-dir-ter) thead th { color: var(--texto); font-weight: 600; border-bottom: 1px solid var(--borde); }
:is(#t-dir-plazas, #t-dir-ter) thead tr:first-child th { font-size: 13px; padding: 8px 6px; }
:is(#t-dir-plazas, #t-dir-ter) th.udn { font-size: 14px; font-weight: 700; text-align: left; vertical-align: middle; background: var(--superficie-2); padding-left: 16px; }
:is(#t-dir-plazas, #t-dir-ter) th.g-ant, :is(#t-dir-plazas, #t-dir-ter) th.g-ppto, :is(#t-dir-plazas, #t-dir-ter) th.g-cump, :is(#t-dir-plazas, #t-dir-ter) th.g-crec { background: var(--superficie-2); }
:is(#t-dir-plazas, #t-dir-ter) th.g-vcump, :is(#t-dir-plazas, #t-dir-ter) th.g-vcrec { background: color-mix(in srgb, var(--serie-3) 16%, var(--superficie)); }
:is(#t-dir-plazas, #t-dir-ter) th.g-act { background: color-mix(in srgb, var(--serie-1) 18%, var(--superficie)); }
:is(#t-dir-plazas, #t-dir-ter) th.linea { background: var(--c); color: #fff; }
:is(#t-dir-plazas, #t-dir-ter) td:first-child { font-weight: 700; padding-left: 16px; }
/* columna UDN fija al desplazar a los lados (como inmovilizar en Excel) */
:is(#t-dir-plazas, #t-dir-ter) th.udn, :is(#t-dir-plazas, #t-dir-ter) td:first-child { position: sticky; left: 0; z-index: 2; min-width: 64px;
  box-shadow: inset -1px 0 0 var(--borde), 4px 0 6px -4px rgba(0,0,0,.18); }
:is(#t-dir-plazas, #t-dir-ter) tbody td:first-child { background: var(--superficie); }
:is(#t-dir-plazas, #t-dir-ter) tbody tr:hover td:first-child { background: var(--superficie-2); }
:is(#t-dir-plazas, #t-dir-ter) tbody tr.sel td:first-child { background: color-mix(in srgb, var(--acento) 10%, var(--superficie)); }
:is(#t-dir-plazas, #t-dir-ter) tfoot td:first-child { background: var(--navy); }
:is(#t-dir-plazas, #t-dir-ter) td.fuerte { font-weight: 700; }
:is(#t-dir-plazas, #t-dir-ter) td.calor { color: var(--texto); font-weight: 600; }
:is(#t-dir-plazas, #t-dir-ter) td.h-100 { background: color-mix(in srgb, #1baf7a 34%, transparent); }
:is(#t-dir-plazas, #t-dir-ter) td.h-95 { background: color-mix(in srgb, #8fd14f 30%, transparent); }
:is(#t-dir-plazas, #t-dir-ter) td.h-90 { background: color-mix(in srgb, #e6d44a 32%, transparent); }
:is(#t-dir-plazas, #t-dir-ter) td.h-80 { background: color-mix(in srgb, #f2a93b 32%, transparent); }
:is(#t-dir-plazas, #t-dir-ter) td.h-60 { background: color-mix(in srgb, #ee6a5a 32%, transparent); }
:is(#t-dir-plazas, #t-dir-ter) td.h-0 { background: color-mix(in srgb, #e0405a 44%, transparent); }
:is(#t-dir-plazas, #t-dir-ter) tfoot td { background: var(--navy); color: #fff; font-weight: 700; border-color: var(--navy); padding-top: 9px; padding-bottom: 9px; }
:is(#t-dir-plazas, #t-dir-ter) tfoot td.calor { background: var(--navy); color: #fff; }
:is(#t-dir-plazas, #t-dir-ter) tfoot td.bien { color: #7fe0a8; }
:is(#t-dir-plazas, #t-dir-ter) tfoot td.malo { color: #ff9a96; }
:is(#t-dir-plazas, #t-dir-ter) tfoot td[title] { text-decoration-color: #9fb4cf; }
.kpi .val { font-size: 26px; font-weight: 650; letter-spacing: -.01em; margin: 2px 0 4px; font-variant-numeric: tabular-nums; }
.kpi .val small { font-size: 14px; font-weight: 500; color: var(--texto-2); margin-left: 4px; }
.kpi .deltas { display: grid; gap: 1px; font-size: 12px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.d-bien { color: var(--bueno); font-weight: 600; }
.d-mal { color: var(--malo); font-weight: 600; }
.d-neutro { color: var(--texto-2); font-weight: 600; }

/* ---------- gráficas ---------- */
.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.rejilla .ancha { grid-column: 1 / -1; }
.graf { padding: 14px 16px 10px; min-width: 0; }
.graf h2, .seccion h2 { font-size: 14px; margin: 0; font-weight: 600; }
.graf .sub { color: var(--texto-3); font-size: 12px; margin: 2px 0 8px; }
.lienzo { position: relative; height: 240px; }
.lienzo.alto { height: 300px; }
.leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--texto-2); margin-top: 6px; }
.leyenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  background: var(--c); margin-right: 6px; vertical-align: -1px; }
.leyenda span.linea::before { height: 2px; border-radius: 1px; vertical-align: 3px; }

/* ---------- tablas ---------- */
.seccion { padding: 14px 16px; margin-bottom: 16px; }
.tabla-scroll { overflow-x: auto; margin-top: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--borde); text-align: right; white-space: nowrap; }
th { color: var(--texto-3); font-weight: 500; font-size: 12px; position: sticky; top: 0; background: var(--superficie); }
th:first-child, td:first-child { text-align: left; }
td { font-variant-numeric: tabular-nums; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--superficie-2); }
tr.sel { background: color-mix(in srgb, var(--acento) 10%, transparent); }
tfoot td { font-weight: 650; border-bottom: 0; }

/* ---------- sin servicio ---------- */
.lista-llamadas td { white-space: normal; text-align: left; vertical-align: top; }
.lista-llamadas td.n { text-align: right; white-space: nowrap; }
.lista-llamadas th { text-align: left; }
.lista-llamadas a { color: var(--acento); }
.chip { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600;
  border: 1px solid currentColor; }
.chip.Alta { color: var(--alta); }
.chip.Media { color: var(--media); }
.frase { color: var(--texto); }
details summary { cursor: pointer; color: var(--acento); font-size: 12px; }
details p { color: var(--texto-2); font-size: 12.5px; margin: 6px 0 0; max-width: 900px; }

.vacio { padding: 40px; text-align: center; color: var(--texto-3); }
.cargando { opacity: .55; transition: opacity .2s; }

@media (max-width: 860px) {
  .rejilla { grid-template-columns: 1fr; }
  .barra-in { flex-wrap: wrap; gap: 8px 10px; }
  .ruta { order: 3; width: 100%; }
  /* en pantalla angosta el menú es un panel que se abre con ☰ encima del contenido */
  .cuerpo, body.menu-oculto .cuerpo { grid-template-columns: minmax(0, 1fr); }
  .lateral { display: block; position: fixed; top: 0; left: 0; bottom: 0; height: auto; align-self: stretch; width: min(280px, 85vw); z-index: 7;
    transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 24px rgba(0,0,0,.2); padding-top: 16px; }
  body.menu-abierto .lateral { transform: none; }
  body.menu-oculto .lateral { display: block; }
  .velo { inset: 0; }
  .filtros .nota { margin-left: 0; }
}

/* ---------- vistas con filtros compartidos ---------- */
body:not([data-vista="indicadores"]) .solo-indicadores { display: none; }
body:not([data-vista="diario"]) .solo-diario { display: none; }
#vista-diario.sin-datos > :not(#kpis-dd) { display: none; }
#vista-indicadores.sin-datos > :not(#kpis) { display: none; }
td.finde { color: var(--texto-3); }
body[data-vista="sinservicio"] #filtros-globales { display: none; }
body:is([data-vista="directivo"], [data-vista="gasolina"]) #filtros-globales { display: none; }
#vista-directivo > .filtros { margin-bottom: 16px; }
#t-dir-plazas td.bien, #t-dir-ter td.bien, #t-dir-mes td.bien, #t-dir-est td.bien { color: var(--bueno); font-weight: 600; }
#t-dir-plazas td.malo, #t-dir-ter td.malo, #t-dir-mes td.malo, #t-dir-est td.malo { color: var(--malo); font-weight: 600; }
#t-dir-est td:first-child, #t-dir-est th:first-child { text-align: left; }
/* de la columna UDN en adelante, centrado (pedido del usuario 13/10) */
#t-dir-est td:not(:first-child), #t-dir-est th:not(:first-child) { text-align: center; }
.cab-est { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 16px; }
.cab-est .filtros { margin-bottom: 0; }

/* ---------- tablas ordenables ---------- */
table.ordenable th { cursor: pointer; user-select: none; }
table.ordenable th:hover { color: var(--texto); }
table.ordenable th[aria-sort="descending"]::after { content: " ↓"; }
table.ordenable th[aria-sort="ascending"]::after { content: " ↑"; }
table.ordenable tbody tr { cursor: default; }
.barra-pct { display: inline-block; height: 6px; border-radius: 3px; background: var(--serie-1); vertical-align: middle;
  margin-left: 6px; }

/* ---------- mapa de calor ---------- */
.mapa { display: grid; gap: 2px; font-size: 11.5px; font-variant-numeric: tabular-nums; min-width: 640px; }
.mapa .eje { color: var(--texto-3); display: flex; align-items: center; justify-content: center; padding: 2px; }
.mapa .eje.fila { justify-content: flex-start; padding-right: 8px; color: var(--texto-2); }
.mapa .celda { height: 30px; border-radius: 4px; display: flex; align-items: center; justify-content: center;
  color: var(--texto); cursor: default; }
.mapa .celda { color: #0b0b0b; }
.mapa .celda.oscura { color: #fff; }
.mapa .celda:hover { outline: 2px solid var(--texto); outline-offset: -1px; }
.escala { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--texto-3); }
.escala .grad { width: 160px; height: 8px; border-radius: 4px; }

/* ---------- casillas ---------- */
.login-caja label.casilla, label.casilla { display: flex; gap: 8px; align-items: center; color: var(--texto-2); font-size: 13px; }
label.casilla input { width: 16px; height: 16px; margin: 0; accent-color: var(--acento); }

/* ---------- usuarios y diálogos ---------- */
.boton.primario { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; }
.boton.primario:hover { background: color-mix(in srgb, var(--acento) 88%, #000); }
.dialogo { width: min(520px, calc(100vw - 32px)); padding: 22px; color: var(--texto); }
.dialogo::backdrop { background: rgba(0,0,0,.45); }
.dialogo h2 { margin: 0 0 14px; font-size: 17px; }
.dialogo .campos { display: grid; gap: 12px; }
.dialogo label { display: grid; gap: 5px; font-size: 13px; color: var(--texto-2); }
.dialogo input:not([type=checkbox]), .dialogo select {
  padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); width: 100%;
}
.dialogo input:invalid:not(:placeholder-shown) { border-color: var(--malo); }
.dialogo fieldset { border: 1px solid var(--borde); border-radius: 8px; padding: 10px 12px; margin: 0; }
.dialogo fieldset:disabled { opacity: .5; }
.dialogo legend { font-size: 13px; color: var(--texto-2); padding: 0 4px; }
.plazas-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px 12px; }
.plazas-acciones { margin-top: 8px; font-size: 12px; }
.plazas-acciones a, .usuario a#abrir-password { color: var(--acento); }
.dialogo-botones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.ok { margin: 8px 0 0; color: var(--bueno); font-size: 13px; }
.dialogo .error { margin-top: 12px; }
.lista-usuarios td { white-space: normal; text-align: left; }
.lista-usuarios th { text-align: left; }
.lista-usuarios tbody tr { cursor: default; }
.lista-usuarios tr.inactivo td { color: var(--texto-3); }
.etiqueta { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600;
  background: var(--superficie-2); color: var(--texto-2); margin: 1px 4px 1px 0; }
.etiqueta.admin { background: color-mix(in srgb, var(--acento) 16%, transparent); color: var(--acento); }
.aviso-plazas { padding: 12px 14px; margin-bottom: 16px; color: var(--texto-2); font-size: 13px; }
body[data-vista="usuarios"] #filtros-globales { display: none; }
.dialogo label.casilla { display: flex; gap: 8px; align-items: center; color: var(--texto); }

/* ---------- proyección de cierre ---------- */
.proyeccion { border-color: color-mix(in srgb, var(--acento) 35%, var(--borde)); }
.proy-cuerpo { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 18px; margin-top: 10px; align-items: start; }
.proy-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.proy-kpi { padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; }
.proy-kpi.principal { grid-column: 1 / -1; }
.proy-kpi .et { color: var(--texto-2); font-size: 12px; }
.proy-kpi .val { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; margin: 2px 0; }
.proy-kpi.principal .val { font-size: 30px; }
.proy-kpi .rango, .proy-kpi .deltas { font-size: 12px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.proy-kpi .deltas { display: grid; gap: 1px; margin-top: 2px; }
.proy-graf { min-width: 0; }
@media (max-width: 860px) { .proy-cuerpo { grid-template-columns: 1fr; } }
.proy-graf .lienzo { height: 420px; }
.proy-subtitulo { margin-top: 20px !important; }
.cap-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-top: 10px; }
td.falta { color: var(--malo); font-weight: 650; }
.dias-botones { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.dias-botones .boton { padding: 5px 10px; font-size: 12.5px; }
.dias-botones .boton[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: #fff; }
.proy-hoy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 10px; padding: 10px 14px;
  border: 1px solid var(--borde); border-radius: 10px; font-size: 13px; color: var(--texto-2); }
.proy-hoy .val { font-size: 20px; font-weight: 700; color: var(--texto); }

/* ---------- comercial ---------- */
body:not([data-vista="comercial"]) .solo-comercial { display: none; }
#vista-comercial.sin-datos > :not(#kpis-com) { display: none; }
.tabla-com { font-size: 12.5px; }
.tabla-com th, .tabla-com td { padding: 6px 7px; }
.tabla-com thead th { text-align: center; position: static; }
.tabla-com thead tr:first-child th { color: var(--texto-2); font-weight: 600; }
.tabla-com th.grupo, .tabla-com td.grupo { border-left: 1px solid var(--borde); }
.tabla-com tbody tr, .tabla-fija tbody tr { cursor: default; }
.tabla-com td.malo, .tabla-fija td.malo { color: var(--malo); font-weight: 600; }
.tabla-com td.bien { color: var(--bueno); font-weight: 600; }
.tabla-com td.vacia { color: var(--texto-3); }
.tabla-com tr.hoy td:first-child::after { content: " · en curso"; color: var(--texto-3); font-size: 11px; }
.tabla-com tfoot tr:first-child td { border-top: 2px solid var(--borde); }
.tabla-com tfoot tr.obj td { font-weight: 500; color: var(--texto-2); }
.tabla-com td[title] { text-decoration: underline dotted var(--texto-3); text-underline-offset: 3px; cursor: help; }
.cab-dia-ag { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.cab-dia-ag input { font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 6px; padding: 4px 6px; margin-left: 4px; }
#t-ag-dia td:first-child, #t-ag-dia th:first-child { text-align: left; }
#t-ag-dia td.conectado::before { content: "● "; color: var(--bueno); }
.subtitulo-com { font-size: 13px; font-weight: 600; margin: 18px 0 2px; color: var(--texto-2); }
.subtitulo-com:first-of-type { margin-top: 10px; }
#t-com-uni { width: auto; min-width: 60%; }
.titulo-bloque { font-size: 17px; font-weight: 650; margin: 28px 0 2px; padding-top: 18px; border-top: 1px solid var(--borde); }
.nota-bloque { margin: 0 0 12px; max-width: 900px; }
.tabla-com td.fuerte { font-weight: 700; }

/* Clientes especiales */
body:is([data-vista="catalogos"], [data-vista="proximamente"]) #filtros-globales { display: none; }
.proximamente { padding: 40px 24px; text-align: center; }
.proximamente h2 { margin: 0 0 8px; font-size: 18px; }
.proximamente p { margin: 0 auto; max-width: 520px; color: var(--texto-2); }
.subcatalogos { display: none; }  /* el catálogo se elige en el menú lateral */
.subcatalogos .boton { padding: 7px 14px; font-size: 14px; }
#f-cli-buscar { min-width: 200px; }
.lista-clientes td:nth-child(2) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lista-clientes td:last-child { text-align: right; white-space: nowrap; }
.boton.peligro { color: var(--malo); border-color: var(--malo); margin-right: auto; }

/* Revisión del día: tiempo excedido bajo la pausa */
#t-ag-dia .excedido { font-size: 11.5px; font-weight: 600; color: var(--malo); white-space: nowrap; }
#t-ag-dia td { white-space: nowrap; }

/* ---------- Comercial: diseño de tablas (como Comercial directivo) ---------- */
#vista-comercial .nota-tabla { margin: 0; padding: 10px 16px 8px; }
#vista-comercial .tabla-com { font-size: 12.5px; }
#vista-comercial .tabla-com td { text-align: center; }
#vista-comercial .tabla-com td:first-child, #vista-comercial .tabla-com th.col-dia { text-align: left; }
#vista-comercial .tabla-com thead th { background: var(--superficie-2); color: var(--texto); font-weight: 600; border-bottom: 1px solid var(--borde); }
#vista-comercial .tabla-com thead tr:first-child th { font-size: 12.5px; padding-top: 8px; padding-bottom: 8px; }
#vista-comercial .tabla-com thead tr:nth-child(2) th { font-size: 11.5px; font-weight: 600; color: var(--texto-2); }
#vista-comercial .tabla-com th.col-dia { vertical-align: middle; font-size: 13px; }
#vista-comercial .tabla-com th.tipo { box-shadow: inset 0 3px 0 var(--c); background: color-mix(in srgb, var(--c) 12%, var(--superficie)); color: var(--texto); }
#vista-comercial .tabla-com th.tipo-CIL { --c: var(--serie-1); }
#vista-comercial .tabla-com th.tipo-PIPA { --c: var(--serie-2); }
#vista-comercial .tabla-com tbody td { background-color: var(--superficie); }
#vista-comercial .tabla-com tbody tr:nth-child(even) td { background-color: color-mix(in srgb, var(--superficie-2) 45%, var(--superficie)); }
#vista-comercial .tabla-com tbody tr.domingo td { background-color: var(--superficie-2); color: var(--texto-2); }
#vista-comercial .tabla-com tbody tr.hoy td { background-color: color-mix(in srgb, var(--serie-4) 12%, var(--superficie)); }
#vista-comercial .tabla-com tbody tr.sel td { background-color: color-mix(in srgb, var(--acento) 13%, var(--superficie)); }
#vista-comercial .tabla-com tbody tr:hover td { background-color: color-mix(in srgb, var(--acento) 7%, var(--superficie)); }
#vista-comercial .tabla-com tbody tr.hoy td:first-child { box-shadow: inset 3px 0 0 var(--serie-4); }
#vista-comercial .tabla-com tbody td.malo { color: var(--malo); background-image: linear-gradient(color-mix(in srgb, var(--malo) 11%, transparent), color-mix(in srgb, var(--malo) 11%, transparent)); }
#vista-comercial .tabla-com tbody td.bien { color: var(--bueno); }
#vista-comercial .tabla-com td:first-child { font-weight: 600; }
#vista-comercial .seccion-navy .tabla-com td:first-child, #vista-comercial .seccion-navy .tabla-com th:first-child { padding-left: 16px; }
#vista-comercial .seccion-navy .tabla-com td:last-child, #vista-comercial .seccion-navy .tabla-com th:last-child { padding-right: 16px; }
/* primera columna fija al desplazar a lo ancho */
#vista-comercial .tabla-com td:first-child, #vista-comercial .tabla-com th.col-dia { position: sticky; left: 0; z-index: 1; }
/* total en azul marino; objetivo y cumplimiento en gris */
#vista-comercial .tabla-com { --navy: #12345e; }
:root[data-theme="dark"] #vista-comercial .tabla-com { --navy: #1b3f6b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #vista-comercial .tabla-com { --navy: #1b3f6b; } }
#vista-comercial .tabla-com tfoot tr:first-child td { background: var(--navy); color: #fff; font-weight: 700; border-top: 0; border-color: var(--navy); padding-top: 9px; padding-bottom: 9px; }
#vista-comercial .tabla-com tfoot tr:first-child td.malo { color: #ff9a96; }
#vista-comercial .tabla-com tfoot tr:first-child td.bien { color: #7fe0a8; }
#vista-comercial .tabla-com tfoot tr.obj td { background: var(--superficie-2); color: var(--texto-2); font-weight: 600; }
#vista-comercial .tabla-com tfoot tr.obj td.malo { color: var(--malo); }
#vista-comercial .tabla-com tfoot tr.obj td.bien { color: var(--bueno); }
#vista-comercial .tabla-com tfoot td[title] { text-decoration-color: #9fb4cf; }
/* filas que llevan a otra UDN */
#vista-comercial .tabla-com tbody tr[tabindex] { cursor: pointer; }
/* conteos: barra con el porcentaje */
#vista-comercial .tabla-conteo td.barra-pct { min-width: 130px; font-weight: 600; }
#vista-comercial .bp { display: flex; align-items: center; gap: 8px; }
#vista-comercial .bp-pista { flex: 1; min-width: 50px; height: 8px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--serie-1) 12%, transparent); }
#vista-comercial .bp-pista i { display: block; height: 100%; border-radius: 4px; background: var(--serie-1); }
#vista-comercial .bp span { min-width: 46px; text-align: right; }
#vista-comercial #t-com-uni { width: 100%; }
#vista-comercial .tabla-conteo th:last-child, #vista-comercial .tabla-conteo td:last-child { text-align: right; }
#vista-comercial .tabla-conteo thead th { text-align: center; }
#vista-comercial .tabla-conteo thead th:first-child { text-align: left; }
#vista-comercial .tabla-com td { vertical-align: middle; }

/* fichas de Comercial (sin icono): franja y tinte del color de su línea, cumple / no cumple como etiqueta */
.kpi-com { position: relative; border-left: 4px solid var(--c); padding: 14px 16px 12px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--c) 10%, var(--superficie)) 0%, var(--superficie) 60%); }
.kpi-com .et { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--texto-2); }
.kpi-com .et::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.kpi-com .val { font-size: 27px; font-weight: 700; margin: 4px 0 6px; white-space: nowrap; }
.kpi-com .nota { line-height: 1.45; }
.kpi-com .estado { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 11px; line-height: 18px;
  background: color-mix(in srgb, currentColor 13%, transparent); }
.kpi-com.no-cumple .val { color: var(--malo); }
.kpi-com .deltas { margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--borde); }
/* título, cifra y detalle alineados entre fichas aunque un título ocupe dos renglones */
.kpi-com { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; align-content: start; }
.kpi-com .et { align-self: start; }

/* ---------- Gas › Comercial › Capacidad ---------- */
body[data-vista="capacidad"] #filtros-globales { display: none; }
#vista-capacidad > .filtros { margin-bottom: 16px; }
#vista-capacidad input[type=date] { padding: 6px 10px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); }
.cap-semaforo { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; padding: 14px; }
.cap-udn { --st: var(--texto-3); border: 1px solid var(--borde); border-left: 5px solid var(--st); border-radius: 10px; padding: 10px 12px;
  background: var(--superficie); cursor: pointer; display: grid; gap: 8px; align-content: start; }
.cap-udn:hover, .cap-udn:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--st) 40%, transparent); outline: none; }
.cap-udn.sel { box-shadow: 0 0 0 2px var(--acento); }
.cap-udn h3 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.cap-udn h3 .luz { width: 12px; height: 12px; border-radius: 50%; background: var(--st); }
.cap-udn h3 .estado { margin-left: auto; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--st); }
.cap-tipo { display: grid; gap: 3px; font-size: 12.5px; line-height: 1.35; color: var(--texto-2); padding-top: 8px; border-top: 1px solid var(--borde); }
.cap-tipo .cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cap-tipo .t { font-weight: 600; font-size: 13.5px; color: var(--texto); }
.cap-tipo .hora-critica b { color: var(--texto); font-weight: 600; }
.cap-tipo .nota { font-size: 11.5px; }
.cap-tipo .big { font-size: 20px; font-weight: 700; color: var(--st-t, var(--texto)); font-variant-numeric: tabular-nums; }
.cap-tipo .big small { font-size: 12px; font-weight: 500; color: var(--texto-2); }
.cap-tipo .alerta { color: var(--malo); font-weight: 600; }
.st-verde { --st: var(--bueno); } .st-amarillo { --st: var(--media); } .st-rojo { --st: var(--malo); }
.cap-tipo.st-verde, .cap-tipo.st-amarillo, .cap-tipo.st-rojo { --st-t: var(--st); }
.cap-mapa { border-collapse: separate; border-spacing: 3px; margin: 8px 0; }
.cap-mapa th { font-size: 12px; color: var(--texto-2); font-weight: 600; padding: 2px 4px; position: static; background: none; }
.cap-mapa td { min-width: 46px; height: 34px; text-align: center; border-radius: 6px; font-size: 12.5px; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--c, transparent) calc(var(--a, 0) * 100%), var(--superficie-2)); color: var(--texto); }
.cap-mapa td.fuerte { color: #fff; font-weight: 600; }
.cap-mapa td.vacio-c { background: none; color: var(--texto-3); }
.cap-mapa tr.hoy-dow th { color: var(--acento); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cap-mapa td.fuerte { color: #111; } }
:root[data-theme="dark"] .cap-mapa td.fuerte { color: #111; }

/* ---------- Gas › Compras ---------- */
body[data-vista="compras"] #filtros-globales { display: none; }
#t-comp td, #t-comp-prov td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#t-comp td:first-child, #t-comp-prov td:first-child { text-align: left; }
#t-comp tr.udn td { font-weight: 700; color: var(--texto); background: color-mix(in srgb, var(--borde) 35%, var(--superficie)); }
:is(#t-comp, #t-comp-prov) { font-size: 12px; }
:is(#t-comp, #t-comp-prov) :is(th, td) { padding: 5px 5px; }
/* primera columna fija al deslizar la tabla (celular) */
:is(#t-comp, #t-comp-prov) :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background: var(--superficie); }
#t-comp tr.udn td:first-child { background: color-mix(in srgb, var(--borde) 35%, var(--superficie)); }
#t-comp tfoot td:first-child { background: var(--navy); }
#kpis-comp .val { overflow-wrap: anywhere; }
@media (max-width: 600px) { #kpis-comp .val { font-size: 22px; } }
#t-comp tr.prov td:first-child { padding-left: 22px; }
#t-comp tr.prov td:first-child::before, #t-comp-prov td:first-child::before { content: ""; display: inline-block; width: 9px; height: 9px;
  border-radius: 2px; background: var(--c, transparent); margin-right: 7px; }
#t-comp td.tot, #t-comp-prov td.tot { font-weight: 700; border-left: 1px solid var(--borde); }
#t-comp td.sep, #t-comp th.sep, #t-comp-prov td.sep, #t-comp-prov th.sep { border-left: 1px solid var(--borde); }
#t-comp td.vacia, #t-comp-prov td.vacia { color: var(--texto-3); }
#t-comp tfoot td { background: var(--navy); color: #fff; font-weight: 700; border-color: var(--navy); }

/* ---------- imagen para compartir (📷) ---------- */
.tarjeta.seccion, .tarjeta.graf { position: relative; }
.btn-foto { position: absolute; top: 8px; right: 8px; z-index: 3; border: 1px solid var(--borde); background: var(--superficie);
  border-radius: 8px; padding: 2px 7px; font-size: 14px; line-height: 1.4; cursor: pointer; opacity: 0; transition: opacity .15s; }
.seccion-navy > .btn-foto { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
.tarjeta:hover > .btn-foto, .btn-foto:focus-visible { opacity: 1; }
@media (hover: none) { .btn-foto { opacity: .8; } }
.btn-foto:disabled, #foto-pantalla:disabled { cursor: progress; opacity: .5; }
body.capturando .tabla-scroll { overflow: visible; }
.dialogo-foto { width: min(760px, calc(100vw - 24px)); }
.foto-vista { max-height: 60vh; overflow: auto; border: 1px solid var(--borde); border-radius: 8px; background: var(--fondo); }
.foto-vista img { display: block; width: 100%; height: auto; }
.dialogo-foto .nota { margin: 10px 0 0; }
.dialogo-foto .dialogo-botones { flex-wrap: wrap; }

/* Pedidos › Quejas y servicios técnicos: barra de fondo con la parte del total de la UDN (como las barras de datos del Excel) */
#t-com-qs td.qs-barra { position: relative; min-width: 74px; }
#t-com-qs td.qs-barra i { position: absolute; left: 0; top: 4px; bottom: 4px; border-radius: 0 3px 3px 0; pointer-events: none; }
#t-com-qs td.qs-barra span { position: relative; }
#t-com-qs td.qs-ok i { background: linear-gradient(90deg, color-mix(in srgb, var(--bueno) 10%, transparent), color-mix(in srgb, var(--bueno) 38%, transparent)); }
#t-com-qs td.qs-mal i { background: linear-gradient(90deg, color-mix(in srgb, var(--malo) 38%, transparent), color-mix(in srgb, var(--malo) 10%, transparent)); }
#t-com-qs td.qs-ok span { color: var(--bueno); font-weight: 600; }
#t-com-qs td.qs-mal span { color: var(--malo); font-weight: 600; }
#t-com-qs tfoot td.qs-ok span { color: #7fe0a8; }
#t-com-qs tfoot td.qs-mal span { color: #ff9a96; }
#t-com-qs tbody tr { cursor: pointer; }