/* Identidad Soluciones GPS sobre Tabler 1.0.
   1) Fuentes locales  2) Tokens propios (--sg-*) y pisado de --tblr-*  3) Base  4) Utilidades  5) Estructura
   6) Componentes (chip, patente, kpi, tabla, pestañas, tareas)  7) Pantallas */

/* ---- 1. Fuentes (IBM Plex, OFL; archivos en static/fonts) ---------------------------------- */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }

/* ---- 2. Tokens -------------------------------------------------------------------------------- */
:root {
  /* Superficies y líneas */
  --sg-fondo: #edf2f2;
  --sg-tarjeta: #ffffff;
  --sg-hundido: #e2eaea;
  --sg-linea: #d3dcdc;
  --sg-borde-control: #6c8488;
  /* Texto */
  --sg-texto: #0f2a30;
  --sg-texto-atenuado: #496065;
  /* Marca */
  --sg-marca: #0d7c86;
  --sg-marca-hover: #0a6670;
  --sg-marca-texto: #09616a;
  --sg-marca-tinte: #daeff0;
  --sg-profunda: #0b3b46;
  --sg-profunda-hover: #124c59;
  --sg-sobre-profunda: #e8f3f4;
  --sg-sobre-profunda-atenuado: #9cc3c8;
  --sg-senal: #4fc3ce;
  /* Estados: texto (sobre tinte), tinte (fondo), sólido (puntos, barras) */
  --sg-ok: #14683a;       --sg-ok-tinte: #dcf2e4;       --sg-ok-solido: #198249;
  --sg-atencion: #7f4b00; --sg-atencion-tinte: #fbebc6; --sg-atencion-solido: #b97a00;
  --sg-peligro: #a6231b;  --sg-peligro-tinte: #fadfdc;  --sg-peligro-solido: #d13a2f;
  --sg-info: #1a559a;     --sg-info-tinte: #dce9f7;     --sg-info-solido: #2e78c7;
  --sg-patente: #1f4e9c;
  /* Tipografía */
  --sg-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sg-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Radios */
  --sg-radio-sm: 4px;
  --sg-radio: 6px;
  --sg-radio-lg: 10px;
  /* Estructura */
  --sg-sidebar: 248px;
  --sg-topbar: 56px;
  --sg-contenido-max: 1280px;

  /* Tabler: mismos valores con sus nombres */
  --tblr-body-bg: var(--sg-fondo);
  --tblr-body-bg-rgb: 237, 242, 242;
  --tblr-body-color: var(--sg-texto);
  --tblr-body-color-rgb: 15, 42, 48;
  --tblr-bg-surface: var(--sg-tarjeta);
  --tblr-bg-surface-secondary: var(--sg-hundido);
  --tblr-bg-surface-tertiary: var(--sg-fondo);
  --tblr-bg-forms: var(--sg-tarjeta);
  --tblr-border-color: var(--sg-linea);
  --tblr-border-color-translucent: var(--sg-linea);
  --tblr-secondary: var(--sg-texto-atenuado);
  --tblr-secondary-rgb: 73, 96, 101;
  --tblr-secondary-color: var(--sg-texto-atenuado);
  --tblr-muted: var(--sg-texto-atenuado);
  --tblr-primary: var(--sg-marca);
  --tblr-primary-rgb: 13, 124, 134;
  --tblr-primary-darken: var(--sg-marca-hover);
  --tblr-primary-text: var(--sg-marca-texto);
  --tblr-primary-lt: var(--sg-marca-tinte);
  --tblr-primary-lt-rgb: 218, 239, 240;
  --tblr-link-color: var(--sg-marca-texto);
  --tblr-link-color-rgb: 9, 97, 106;
  --tblr-link-hover-color: var(--sg-marca-hover);
  --tblr-success: var(--sg-ok-solido);   --tblr-success-rgb: 25, 130, 73;
  --tblr-warning: var(--sg-atencion-solido); --tblr-warning-rgb: 185, 122, 0;
  --tblr-danger: var(--sg-peligro-solido); --tblr-danger-rgb: 209, 58, 47;
  --tblr-info: var(--sg-info-solido);    --tblr-info-rgb: 46, 120, 199;
  --tblr-font-sans-serif: var(--sg-sans);
  --tblr-font-monospace: var(--sg-mono);
  --tblr-body-font-size: 0.875rem;       /* 14 px */
  --tblr-body-line-height: 1.5;          /* 21 px */
  --tblr-border-radius-sm: var(--sg-radio-sm);
  --tblr-border-radius: var(--sg-radio);
  --tblr-border-radius-lg: var(--sg-radio-lg);
  --tblr-box-shadow: none;
  --tblr-box-shadow-card: none;
  --tblr-box-shadow-card-hover: none;
  --tblr-box-shadow-input: none;
  --tblr-shadow-card: none;
}

/* ---- 3. Base ---------------------------------------------------------------------------------- */
body { background: var(--sg-fondo); color: var(--sg-texto); font-family: var(--sg-sans); font-size: 14px; line-height: 21px; }
.page-title, h1.page-title, h2.page-title { font-size: 24px; line-height: 30px; font-weight: 600; color: var(--sg-texto); }
.page-pretitle { color: var(--sg-texto-atenuado); letter-spacing: .04em; }
code, kbd, pre, .mono { font-family: var(--sg-mono); }
code { color: var(--sg-texto); background: var(--sg-hundido); }
.text-secondary, .text-muted { color: var(--sg-texto-atenuado) !important; }
.small, small, .detalle { font-size: 12.5px; line-height: 18px; }

/* Tarjetas: se separan por borde, no por sombra */
.card { --tblr-card-box-shadow: none; box-shadow: none; border: 1px solid var(--sg-linea); border-radius: var(--sg-radio-lg); }
.card-header, .card-footer { border-color: var(--sg-linea); }
.dropdown-menu { border-color: var(--sg-linea); box-shadow: 0 8px 24px rgba(15, 42, 48, .12); }

/* Controles */
.form-control, .form-select { border-color: var(--sg-borde-control); }
.form-control::placeholder { color: #5a6f74; }
.form-label { font-weight: 500; }

/* Botones */
.btn-primary {
  --tblr-btn-bg: var(--sg-marca); --tblr-btn-border-color: var(--sg-marca);
  --tblr-btn-hover-bg: var(--sg-marca-hover); --tblr-btn-hover-border-color: var(--sg-marca-hover);
  --tblr-btn-active-bg: var(--sg-marca-hover); --tblr-btn-active-border-color: var(--sg-marca-hover);
}
.btn { box-shadow: none; }

/* Foco visible por teclado (contraste ≥ 3:1 sobre claro y sobre profundo) */
:focus-visible { outline: 3px solid var(--sg-marca); outline-offset: 2px; }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible {
  outline: 3px solid var(--sg-marca); outline-offset: 2px; box-shadow: none;
}

/* Insignias "lt" de Tabler con los pares texto/tinte propios (contraste AA) */
.bg-success-lt, .bg-green-lt { color: var(--sg-ok) !important; background-color: var(--sg-ok-tinte) !important; }
.bg-warning-lt, .bg-yellow-lt, .bg-orange-lt { color: var(--sg-atencion) !important; background-color: var(--sg-atencion-tinte) !important; }
.bg-danger-lt, .bg-red-lt { color: var(--sg-peligro) !important; background-color: var(--sg-peligro-tinte) !important; }
.bg-info-lt, .bg-azure-lt, .bg-blue-lt { color: var(--sg-info) !important; background-color: var(--sg-info-tinte) !important; }
.bg-primary-lt { color: var(--sg-marca-texto) !important; background-color: var(--sg-marca-tinte) !important; }
.bg-secondary-lt { color: var(--sg-texto-atenuado) !important; background-color: var(--sg-hundido) !important; }
.text-success { color: var(--sg-ok) !important; }
.text-danger { color: var(--sg-peligro) !important; }
.text-warning { color: var(--sg-atencion) !important; }
.text-info { color: var(--sg-info) !important; }
.alert-danger { --tblr-alert-color: var(--sg-peligro); background: var(--sg-peligro-tinte); border-color: transparent; }
.alert-warning { --tblr-alert-color: var(--sg-atencion); background: var(--sg-atencion-tinte); border-color: transparent; }
.alert-success { --tblr-alert-color: var(--sg-ok); background: var(--sg-ok-tinte); border-color: transparent; }
.alert-info { --tblr-alert-color: var(--sg-info); background: var(--sg-info-tinte); border-color: transparent; }
.alert { color: var(--tblr-alert-color); box-shadow: none; }

/* ---- 4. Utilidades ---------------------------------------------------------------------------- */
.min-w-0 { min-width: 0; }
.cifra { font-family: var(--sg-mono); font-variant-numeric: tabular-nums; }

/* ---- 5. Estructura: barra lateral + barra superior ---------------------------------------- */
.sg-saltar { position: absolute; left: -999px; top: 8px; z-index: 2000; background: var(--sg-tarjeta); color: var(--sg-texto);
  padding: .5rem 1rem; border-radius: var(--sg-radio); }
.sg-saltar:focus { left: 8px; }

.sg-app { min-height: 100vh; }
.sg-sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sg-sidebar); z-index: 1030;
  display: flex; flex-direction: column; background: var(--sg-profunda); color: var(--sg-sobre-profunda);
  overflow-y: auto;
}
.sg-sidebar-cab { display: flex; align-items: center; justify-content: space-between; padding-right: .5rem; }
.sg-cerrar-menu { display: none; width: 44px; height: 44px; border: 0; border-radius: var(--sg-radio); background: transparent;
  color: var(--sg-sobre-profunda); font-size: 1.4rem; align-items: center; justify-content: center; }
.sg-cerrar-menu:hover { background: var(--sg-profunda-hover); }
.sg-logo { display: flex; align-items: center; gap: .65rem; padding: 1rem 1.25rem; color: var(--sg-sobre-profunda); text-decoration: none; min-height: 44px; }
.sg-logo:hover { color: var(--sg-sobre-profunda); text-decoration: none; }
.sg-logo strong { display: block; font-weight: 600; font-size: 15px; line-height: 20px; }
.sg-logo small { display: block; color: var(--sg-sobre-profunda-atenuado); font-size: 12.5px; line-height: 16px; }
.sg-nav { flex: 1; padding: .25rem .75rem 1rem; }
.sg-nav ul { list-style: none; margin: 0; padding: 0; }
.sg-nav-grupo { margin: 1rem .5rem .35rem; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sg-sobre-profunda-atenuado); }
.sg-nav-item { display: flex; align-items: center; gap: .65rem; padding: .5rem .65rem; border-radius: var(--sg-radio);
  color: var(--sg-sobre-profunda); text-decoration: none; font-weight: 500; position: relative; }
.sg-nav-item .ti { font-size: 1.15rem; color: var(--sg-sobre-profunda-atenuado); }
.sg-nav-item:hover { background: var(--sg-profunda-hover); color: var(--sg-sobre-profunda); text-decoration: none; }
.sg-nav-item.activo { background: var(--sg-profunda-hover); }
.sg-nav-item.activo::before { content: ""; position: absolute; left: -.75rem; top: .35rem; bottom: .35rem; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--sg-senal); }
.sg-nav-item.activo .ti { color: var(--sg-senal); }
.sg-nav-subs { margin: .15rem 0 .35rem 2.15rem !important; border-left: 1px solid rgba(232, 243, 244, .18); }
.sg-nav-sub { display: block; padding: .3rem .75rem; color: var(--sg-sobre-profunda-atenuado); text-decoration: none; font-size: 13px; }
.sg-nav-sub:hover, .sg-nav-sub.activo { color: var(--sg-sobre-profunda); text-decoration: none; }
.sg-nav-sub.activo { font-weight: 600; }
.sg-sidebar :focus-visible { outline-color: var(--sg-senal); }

.sg-usuario { border-top: 1px solid rgba(232, 243, 244, .14); padding: .75rem; }
.sg-usuario-btn { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .4rem .5rem; border: 0; border-radius: var(--sg-radio);
  background: transparent; color: var(--sg-sobre-profunda); }
.sg-usuario-btn:hover { background: var(--sg-profunda-hover); }
.sg-usuario-btn small { color: var(--sg-sobre-profunda-atenuado); }
.sg-avatar { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sg-marca); color: #fff; font-weight: 600; }

.sg-principal { margin-left: var(--sg-sidebar); min-height: 100vh; display: flex; flex-direction: column; }
.sg-topbar { position: sticky; top: 0; z-index: 1020; height: var(--sg-topbar); display: flex; align-items: center; gap: .75rem;
  padding: 0 1.5rem; background: var(--sg-tarjeta); border-bottom: 1px solid var(--sg-linea); }
.sg-boton-menu, .sg-topbar-logo, .sg-boton-buscar, .sg-buscar-cerrar { display: none; }
.sg-topbar-logo img { display: block; }
.sg-buscar { position: relative; flex: 1; max-width: 480px; }
.sg-buscar .ti { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--sg-texto-atenuado); }
.sg-buscar input { width: 100%; height: 38px; padding: 0 2.5rem 0 2.25rem; border: 1px solid var(--sg-borde-control);
  border-radius: var(--sg-radio); background: var(--sg-tarjeta); color: var(--sg-texto); }
.sg-buscar input::placeholder { color: #5a6f74; }
.sg-buscar kbd { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); padding: 0 .4rem;
  background: var(--sg-hundido); color: var(--sg-texto-atenuado); border: 1px solid var(--sg-linea); border-radius: var(--sg-radio-sm);
  font-size: 12px; box-shadow: none; }
.sg-contenido { flex: 1; outline: none; }
.sg-contenido .container-xl { max-width: var(--sg-contenido-max); padding-left: 1.5rem; padding-right: 1.5rem; }
.sg-contenido .page-header { margin-top: 1.5rem; }
.sg-contenido .page-body { margin-top: 1.25rem; margin-bottom: 2rem; }
.sg-fondo-menu { position: fixed; inset: 0; z-index: 1025; background: rgba(15, 42, 48, .45); }

/* Sin sesión (acceso, errores) */
.sg-sin-sesion { min-height: 100vh; }
.sg-mensajes-sin-sesion { position: fixed; top: 1rem; right: 1rem; z-index: 1050; max-width: 420px; }

/* Sin scroll de la página mientras el menú está abierto */
.sg-sin-scroll { overflow: hidden; }

/* Contenido: 16 px de margen en celular, 24 px desde tablet */
.sg-contenido .container-xl { padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 576px) { .sg-contenido .container-xl { padding-left: 1.5rem; padding-right: 1.5rem; } }

/* Zona segura de celulares con muesca / barra de gestos */
.sg-topbar { padding-top: env(safe-area-inset-top); height: calc(var(--sg-topbar) + env(safe-area-inset-top)); }
.sg-sidebar { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }

/* < 992 px: el menú lateral es un panel que se desliza (offcanvas) */
@media (max-width: 991.98px) {
  .sg-sidebar { width: min(86vw, 320px); transform: translateX(-100%); visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s; padding-left: env(safe-area-inset-left); }
  .sg-app.menu-abierto .sg-sidebar { transform: none; visibility: visible; transition: transform .2s ease, visibility 0s; }
  .sg-cerrar-menu { display: inline-flex; }
  .sg-principal { margin-left: 0; }
  .sg-topbar { padding-left: max(.5rem, env(safe-area-inset-left)); padding-right: max(.5rem, env(safe-area-inset-right)); gap: .25rem; }
  .sg-boton-menu, .sg-topbar-logo { display: inline-flex; }
  .sg-topbar-logo { align-items: center; padding: 0 .4rem; min-height: 44px; }
  .sg-buscar kbd { display: none; }
}
/* < 768 px: el buscador es un ícono que se abre a ancho completo sobre la barra */
@media (max-width: 767.98px) {
  .sg-boton-buscar { display: inline-flex; }
  .sg-buscar { display: none; max-width: none; }
  .sg-topbar.buscando { position: sticky; }
  .sg-topbar.buscando .sg-buscar { display: block; position: absolute; inset: env(safe-area-inset-top) 0 0 0; z-index: 2; flex: none;
    padding: .5rem max(.5rem, env(safe-area-inset-right)) .5rem max(.5rem, env(safe-area-inset-left)); background: var(--sg-tarjeta); }
  .sg-topbar.buscando .sg-buscar input { height: 44px; padding-right: 3rem; }
  .sg-topbar.buscando .sg-buscar > .ti { left: calc(max(.5rem, env(safe-area-inset-left)) + .75rem); }
  .sg-topbar.buscando .sg-buscar-cerrar { display: inline-flex; position: absolute; right: max(.5rem, env(safe-area-inset-right)); top: 50%;
    transform: translateY(-50%); width: 44px; height: 44px; align-items: center; justify-content: center; border: 0; background: transparent;
    color: var(--sg-texto-atenuado); font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .sg-sidebar { transition: none; } }

/* ---- Tacto: objetivos de 44 px, texto de 16 px en campos (evita el zoom de iOS) ---------------- */
@media (max-width: 991.98px) {
  .btn, .dropdown-item, .nav-link, .sg-nav-item, .sg-nav-sub, .sg-pestana, .page-link, .form-check-input + .form-check-label {
    min-height: 44px; }
  .btn { display: inline-flex; align-items: center; justify-content: center; }
  .btn-icon { min-width: 44px; padding-left: 0; padding-right: 0; }
  .sg-nav-sub { display: flex; align-items: center; }
  .dropdown-item { display: flex; align-items: center; }
  .form-control, .form-select, .form-control-sm, .form-select-sm, input, select, textarea { font-size: 16px !important; }
  .form-control, .form-select { min-height: 44px; }
  .form-control-sm, .form-select-sm { min-height: 44px; }
  .form-check-input { width: 1.4rem; height: 1.4rem; }
  .form-check { min-height: 44px; display: flex; align-items: center; gap: .5rem; padding-left: 0; }
  .form-check .form-check-input { float: none; margin: 0; }
}

/* Barra anterior (se conserva solo para las hojas imprimibles que la referencian) */
.marca-titulo { font-weight: 600; color: var(--sg-profunda); }

/* ---- 6. Componentes --------------------------------------------------------------------------- */
.sg-acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sg-acciones > form { margin: 0; }
@media (min-width: 768px) { .sg-acciones { justify-content: flex-end; } }

/* Chip de estado */
.sg-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .55rem; border-radius: 999px;
  font-size: 12.5px; line-height: 18px; font-weight: 500; white-space: nowrap; }
.sg-chip-punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 7px; }
.sg-chip-ok { color: var(--sg-ok); background: var(--sg-ok-tinte); }
.sg-chip-ok .sg-chip-punto { background: var(--sg-ok-solido); }
.sg-chip-warn { color: var(--sg-atencion); background: var(--sg-atencion-tinte); }
.sg-chip-warn .sg-chip-punto { background: var(--sg-atencion-solido); }
.sg-chip-danger { color: var(--sg-peligro); background: var(--sg-peligro-tinte); }
.sg-chip-danger .sg-chip-punto { background: var(--sg-peligro-solido); }
.sg-chip-info { color: var(--sg-info); background: var(--sg-info-tinte); }
.sg-chip-info .sg-chip-punto { background: var(--sg-info-solido); }
.sg-chip-neutral { color: var(--sg-texto-atenuado); background: var(--sg-hundido); }

/* Patente */
.sg-patente { display: inline-block; padding: 0 .4rem; border: 1.5px solid var(--sg-patente); border-radius: var(--sg-radio-sm);
  color: var(--sg-patente); background: #fff; font-family: var(--sg-mono); font-weight: 600; font-size: 13px; line-height: 20px;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }

/* Indicadores */
.sg-kpis { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; margin-bottom: 1.25rem; }
@media (min-width: 576px) { .sg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 992px) { .sg-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sg-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sg-kpi { display: block; padding: 1rem 1.15rem; background: var(--sg-tarjeta); border: 1px solid var(--sg-linea);
  border-radius: var(--sg-radio-lg); color: var(--sg-texto); text-decoration: none; }
a.sg-kpi:hover { border-color: var(--sg-marca); text-decoration: none; color: var(--sg-texto); }
.sg-kpi-etiqueta { color: var(--sg-texto-atenuado); font-size: 12.5px; line-height: 18px; font-weight: 500; }
.sg-kpi-valor { overflow-wrap: anywhere; font-size: 26px; line-height: 34px; font-weight: 600; margin-top: .15rem; font-variant-numeric: tabular-nums; }
.sg-kpi-nota { color: var(--sg-texto-atenuado); font-size: 12.5px; line-height: 18px; }
.sg-kpi-ok .sg-kpi-valor { color: var(--sg-ok); }
.sg-kpi-warn .sg-kpi-valor { color: var(--sg-atencion); }
.sg-kpi-danger .sg-kpi-valor { color: var(--sg-peligro); }

/* Tabla de datos: encabezado fijo, números a la derecha con cifras tabulares, hover, scroll horizontal */
.sg-tabla-scroll { overflow: auto; max-height: min(72vh, 760px); }
.sg-tabla { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; }
.sg-tabla thead th { position: sticky; top: 0; z-index: 1; background: var(--sg-hundido); color: var(--sg-texto-atenuado);
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: .6rem 1rem;
  border-bottom: 1px solid var(--sg-linea); white-space: nowrap; }
.sg-tabla td { padding: .65rem 1rem; border-bottom: 1px solid var(--sg-linea); vertical-align: middle; }
.sg-tabla tbody tr:last-child td { border-bottom: 0; }
@media (hover: hover) { .sg-tabla tbody tr:hover td { background: #f5f8f8; } }
.sg-tabla .num, .sg-tabla th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sg-tabla td.num { font-family: var(--sg-mono); }
@media (max-width: 575.98px) { .sg-tabla td, .sg-tabla thead th { padding: .55rem .6rem; } }
.text-md-nowrap { white-space: normal; }
@media (min-width: 768px) { .text-md-nowrap { white-space: nowrap; } }
.sg-tabla .vacia { text-align: center; color: var(--sg-texto-atenuado); padding: 2rem 1rem; }
.sg-tabla a.fila-titulo { color: var(--sg-texto); font-weight: 600; }
.sg-tabla a.fila-titulo:hover { color: var(--sg-marca-texto); }

/* Tablas → tarjetas en celular (< 576 px). El HTML es el mismo; app.js marca cada celda con su rol y etiqueta */
@media (max-width: 575.98px) {
  .sg-tabla-tarjetas { max-height: none; overflow: visible; background: var(--sg-fondo); padding: .5rem; }
  .sg-tarjetas, .sg-tarjetas tbody { display: block; }
  .sg-tarjetas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sg-tarjetas tbody tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; row-gap: .2rem;
    padding: .75rem .9rem; margin-bottom: .5rem; background: var(--sg-tarjeta); border: 1px solid var(--sg-linea); border-radius: var(--sg-radio-lg); }
  .sg-tarjetas tbody tr:last-child { margin-bottom: 0; }
  .sg-tarjetas tbody td { display: block; padding: 0; border: 0; background: transparent; min-width: 0; }
  .sg-tarjetas td.t-titulo { grid-column: 1; grid-row: 1; font-weight: 600; font-size: 15px; line-height: 22px; word-break: break-word; }
  .sg-tarjetas td.t-estado { grid-column: 2; grid-row: 1; align-self: start; justify-self: end; }
  /* El título es un enlace que cubre toda la tarjeta: el área táctil es la tarjeta entera */
  .sg-tarjetas td.t-titulo a::after { content: ""; position: absolute; inset: 0; border-radius: var(--sg-radio-lg); }
  .sg-tarjetas td.t-dato { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    font-size: 13.5px; line-height: 20px; text-align: right; }
  .sg-tarjetas td.t-dato::before { content: attr(data-label); flex: none; color: var(--sg-texto-atenuado); font-size: 12.5px; text-align: left; }
  .sg-tarjetas td.t-dato a, .sg-tarjetas td.t-acciones a, .sg-tarjetas td.t-acciones .btn { position: relative; z-index: 1; }
  .sg-tarjetas td.t-acciones { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: .5rem; margin-top: .35rem; }
  .sg-tarjetas td.t-acciones:empty { display: none; }
  .sg-tarjetas td.num { text-align: right; font-family: inherit; }
  .sg-tarjetas td.vacia { grid-column: 1 / -1; padding: 1.5rem .5rem; text-align: center; }
}

/* Pestañas de filtro y contador */
.sg-pestanas, .card-header-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain; }
.sg-pestanas::-webkit-scrollbar, .card-header-tabs::-webkit-scrollbar { display: none; }
.sg-pestanas { display: flex; gap: .25rem; border-bottom: 1px solid var(--sg-linea); padding: 0 .75rem; }
.card-header-tabs .nav-item { flex: none; }
.card-header-tabs .nav-link { white-space: nowrap; }
.sg-pestana { display: inline-flex; align-items: center; gap: .45rem; padding: .7rem .75rem; margin-bottom: -1px;
  color: var(--sg-texto-atenuado); font-weight: 500; text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.sg-pestana:hover { color: var(--sg-texto); text-decoration: none; }
.sg-pestana.activa { color: var(--sg-marca-texto); border-bottom-color: var(--sg-marca); }
.sg-contador { display: inline-block; min-width: 1.5rem; padding: 0 .4rem; border-radius: 999px; background: var(--sg-hundido);
  color: var(--sg-texto-atenuado); font-size: 12px; line-height: 18px; text-align: center; }
.sg-pestana.activa .sg-contador, .nav-link.active .sg-contador { background: var(--sg-marca-tinte); color: var(--sg-marca-texto); }

/* Filtros de listados: en celular se pliegan detrás de un botón "Filtros"; desde 576 px se ven siempre, en la misma fila */
.sg-filtros-contador { display: inline-block; min-width: 1.35rem; margin-left: .35rem; padding: 0 .35rem; border-radius: 999px;
  background: var(--sg-marca); color: #fff; font-size: 12px; line-height: 20px; text-align: center; }
@media (min-width: 576px) {
  .sg-filtros, .sg-filtros-fila { display: contents !important; }
  .sg-filtros-fila > * { padding-left: calc(var(--tblr-gutter-x) * .5); padding-right: calc(var(--tblr-gutter-x) * .5); margin-top: var(--tblr-gutter-y); }
}

/* Cola "Para resolver hoy" */
.sg-tareas { list-style: none; margin: 0; padding: 0; }
.sg-tarea { display: flex; align-items: center; gap: 1rem; padding: .85rem 1.15rem; border-bottom: 1px solid var(--sg-linea); }
.sg-tarea:last-child { border-bottom: 0; }
.sg-tarea-numero { min-width: 2.5rem; font-size: 24px; line-height: 30px; font-weight: 600; text-align: right; }
.sg-tarea-texto { flex: 1; min-width: 0; }
.sg-tarea-texto strong { display: block; font-weight: 600; }
.sg-tarea-texto small { display: block; color: var(--sg-texto-atenuado); }
.sg-tono-ok { color: var(--sg-ok); }
.sg-tono-warn { color: var(--sg-atencion); }
.sg-tono-danger { color: var(--sg-peligro); }
.sg-tono-info { color: var(--sg-info); }
.sg-tono-neutral { color: var(--sg-texto-atenuado); }

/* ---- 7. Pantallas ----------------------------------------------------------------------------- */
/* Panel: barras apiladas de facturación (HTML/CSS, sin librerías) */
.sg-barras { display: flex; align-items: flex-end; gap: .75rem; height: 220px; padding-top: 1.5rem; }
.sg-barra-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; min-width: 0; }
.sg-barra { display: flex; flex-direction: column-reverse; border-radius: var(--sg-radio-sm) var(--sg-radio-sm) 0 0; overflow: hidden;
  min-height: 2px; background: var(--sg-hundido); }
.sg-barra > span { display: block; min-height: 2px; }
.sg-barra-valor { font-size: 12px; line-height: 16px; color: var(--sg-texto-atenuado); text-align: center; margin-bottom: .25rem; white-space: nowrap; }
.sg-barra-mes { text-align: center; margin-top: .4rem; color: var(--sg-texto-atenuado); font-size: 12.5px; }
.sg-barra-abonos { background: var(--sg-marca); }
.sg-barra-equipos { background: var(--sg-profunda); }
.sg-barra-instalaciones { background: var(--sg-senal); }
@media (max-width: 575.98px) {
  .sg-barras { gap: .35rem; height: 200px; }
  .sg-barra-valor { letter-spacing: -.02em; }
}
.sg-leyenda { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; list-style: none; padding: 0; margin: 1rem 0 0; font-size: 12.5px; }
.sg-leyenda li { display: flex; align-items: center; gap: .4rem; }
.sg-leyenda span { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* Acceso: pantalla partida */
.sg-acceso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.sg-acceso-marca { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 2.5rem;
  background: var(--sg-profunda); color: var(--sg-sobre-profunda); overflow: hidden; }
.sg-acceso-logo { display: flex; align-items: center; gap: .75rem; }
.sg-acceso-logo strong { display: block; font-size: 17px; line-height: 22px; font-weight: 600; }
.sg-acceso-logo small { display: block; font-size: 12.5px; color: var(--sg-sobre-profunda-atenuado); }
.sg-acceso-arcos { position: absolute; right: 2rem; bottom: 140px; width: min(60%, 400px); color: var(--sg-senal); }
.sg-acceso-lema { position: relative; max-width: 22ch; margin: 0; font-size: 30px; line-height: 38px; font-weight: 600; }
.sg-acceso-form { display: flex; align-items: center; justify-content: center; padding: 2rem 1.5rem; background: var(--sg-tarjeta); }
.sg-acceso-caja { width: 100%; max-width: 380px; }
.sg-acceso-titulo { font-size: 24px; line-height: 30px; font-weight: 600; margin-bottom: .25rem; }
.sg-acceso-logo-movil { display: none; margin-bottom: 2rem; color: var(--sg-profunda); }
.sg-acceso-logo-movil small { color: var(--sg-texto-atenuado); }
.btn-lg { min-height: 48px; font-weight: 600; font-size: 16px; }
@media (max-width: 991.98px) {
  .sg-acceso { grid-template-columns: 1fr; }
  .sg-acceso-marca { display: none; }
  .sg-acceso-logo-movil { display: flex; }
  .sg-acceso-form { align-items: flex-start; padding-top: 3rem; }
}

/* Operaciones de stock (entrega en celular): alternador y botón fijo abajo */
.sg-alternador { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--sg-borde-control); border-radius: var(--sg-radio);
  overflow: hidden; }
.sg-alternador .btn { border: 0; border-radius: 0; min-height: 44px; font-weight: 600; background: var(--sg-tarjeta); color: var(--sg-texto); }
.sg-alternador .btn + .btn-check + .btn, .sg-alternador .btn-check + .btn ~ .btn-check + .btn { border-left: 1px solid var(--sg-borde-control); }
.sg-alternador .btn-check:checked + .btn { background: var(--sg-marca); color: #fff; }
.sg-alternador .btn-check:focus-visible + .btn { outline: 3px solid var(--sg-marca); outline-offset: -3px; }
.sg-series { font-size: 15px; line-height: 24px; letter-spacing: .02em; min-height: 12rem; }
.sg-barra-accion { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
@media (max-width: 767.98px) {
  .sg-operacion, .sg-form-largo { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
  .sg-barra-accion { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1010; margin: 0; flex-wrap: nowrap;
    padding: .75rem max(1rem, env(safe-area-inset-right)) max(.75rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    background: var(--sg-tarjeta); border-top: 1px solid var(--sg-linea); }
  .sg-barra-accion .btn-primary, .sg-barra-accion .btn-success { flex: 1; }
  .sg-barra-accion .btn:not(.btn-primary):not(.btn-success) { flex: none; }
}

/* Ficha: el bloque de datos se pliega debajo de 992 px (arriba, antes de las pestañas) */
.sg-ficha-cab { display: flex; align-items: center; gap: .75rem; }
.sg-ficha-toggle { display: none; }
.sg-ficha-toggle .ti { transition: transform .15s ease; }
.sg-ficha-toggle[aria-expanded="true"] .ti { transform: rotate(180deg); }
@media (max-width: 991.98px) { .sg-ficha-toggle { display: inline-flex; margin-left: auto; flex: none; } }
@media (min-width: 992px) { .sg-plegable { display: block !important; height: auto !important; } }

/* Acciones de cabecera: en celular el principal queda a la vista y el resto pasa al menú de tres puntos */
.sg-en-menu { width: 100%; border: 0 !important; background: transparent !important; text-align: left; justify-content: flex-start !important;
  color: var(--sg-texto) !important; box-shadow: none !important; }
.sg-mas .dropdown-menu form { margin: 0; }

/* Firma en pantalla y fotos de las órdenes de trabajo */
.sg-firma canvas { display: block; width: 100%; height: 200px; background: #fff; border: 1.5px dashed var(--sg-borde-control);
  border-radius: var(--sg-radio); touch-action: none; cursor: crosshair; }
.sg-firma.con-firma canvas { border-style: solid; border-color: var(--sg-marca); }
.sg-firma-img { max-width: 220px; max-height: 110px; border: 1px solid var(--sg-linea); border-radius: var(--sg-radio-sm); background: #fff; margin-top: .35rem; }
.sg-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; }
.sg-fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--sg-radio); border: 1px solid var(--sg-linea); }
.sg-hoy { border-color: var(--sg-marca); }
/* Mis trabajos (instalador, celular): tarjetas grandes, todo el bloque es el área táctil */
.sg-trabajo-enlace { display: block; padding: 1rem; color: var(--sg-texto); text-decoration: none; min-height: 44px; }
.sg-trabajo-enlace:hover { color: var(--sg-texto); text-decoration: none; }
.sg-atrasado { border-color: var(--sg-peligro-solido); }
.sg-trabajo .fs-4 { font-size: 17px !important; line-height: 24px; }
.sg-agenda-item { padding-top: .75rem; padding-bottom: .75rem; }

/* Ficha de cliente: datos en pares etiqueta / valor */
.sg-datos { margin: 0; }
.sg-datos dt { font-size: 12.5px; line-height: 18px; font-weight: 500; color: var(--sg-texto-atenuado); margin-top: .65rem; }
.sg-datos dt:first-child { margin-top: 0; }
.sg-datos dd { margin: 0; }
.card-header-tabs .nav-link { display: inline-flex; align-items: center; gap: .4rem; }
/* Lista de datos con ícono (otras fichas) */
.ficha-datos li { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .4rem; word-break: break-word; }
.ficha-datos .ti { color: var(--sg-texto-atenuado); margin-top: .15rem; }
.tabla-precios input { min-width: 7rem; max-width: 10rem; margin-left: auto; }
.tabla-precios select { min-width: 5rem; max-width: 6rem; }

/* Renglones de presupuestos y comprobantes */
.tabla-renglones td { vertical-align: top; }
.resumen-totales { min-width: 16rem; }

/* ---- Dashboard: gráficos en SVG ---- */
.sg-grafico-caja { overflow-x: auto; display: flex; flex-direction: row-reverse; }   /* row-reverse: arranca mostrando el final (los meses más recientes) */
.sg-grafico { flex: 0 0 100%; min-width: 500px; height: auto; display: block; max-height: 280px; }
.sg-leyendas { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-bottom: .5rem; font-size: 12.5px; color: var(--sg-texto-atenuado); }
.sg-leyenda { display: inline-flex; align-items: center; gap: .35rem; }
.sg-leyenda b { display: inline-block; width: .75rem; height: .75rem; border-radius: 2px; }
.sg-grafico-datos { margin-top: .5rem; font-size: 12.5px; }
.sg-grafico-datos summary { cursor: pointer; color: var(--sg-marca-texto); min-height: 24px; }