/* ==========================================================================
   SISTEMA DE DISEÑO · Sistema de Lotes  (único archivo de tokens y componentes)
   Reglas: docs/DISENO.md · Galería viva: /estilos
   Prefijo ds- en todas las clases (se distinguen de las heredadas y se pueden auditar con una búsqueda).
   Regla de oro: ningún color, tamaño ni espaciado suelto fuera de este archivo.
   ORDEN: 1 Tokens · 2 Base · 3 Marco (lateral+barra) · 4 Botón · 5 Formularios · 6 Tabla · 7 Insignia y tarjetas
          8 Superposiciones (modal, panel, toast, alerta) · 9 Estados (vacío, carga, error) · 10 Navegación interna · 11 Responsive · 12 Impresión
   ========================================================================== */

/* 1 · TOKENS ------------------------------------------------------------- */
:root {
  /* espaciado: solo esta escala */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;
  /* tipografía */
  --fuente: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  --t12: 12px; --t13: 13px; --t14: 14px; --t16: 16px; --t20: 20px; --t24: 24px;
  --p400: 400; --p500: 500; --p600: 600;
  /* forma */
  --radio: 8px; --radio-peq: 6px; --borde-ancho: 1px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .08), 0 2px 8px rgba(16, 24, 40, .06);
  /* alturas */
  --h-control: 36px; --h-tabla: 32px; --h-fila: 40px; --h-pistola: 48px; --h-barra: 56px; --ancho-lateral: 240px;
  /* colores semánticos · CLARO */
  --fondo: #f4f6f8;  --superficie: #ffffff;  --superficie-2: #f8fafb;  --borde: #d9e0e7;
  --texto: #1a2430;  --texto-2: #536170;
  --marca: #1f4e79;  --marca-hover: #163a5a;  --marca-suave: #e3edf7;  --sobre-marca: #ffffff;
  --ok: #166534;       --ok-fondo: #dcfce7;
  --atencion: #854d0e; --atencion-fondo: #fef3c7;
  --error: #b91c1c;    --error-fondo: #fee2e2;
  --info: #1e40af;     --info-fondo: #dbeafe;
  --neutro: #475569;   --neutro-fondo: #e8edf2;
  --foco: #d97706;     --velo: rgba(15, 23, 32, .5);
  color-scheme: light;
}
/* OSCURO: mismos nombres, otros valores. Lo activa tema.js con data-bs-theme="dark" (se conserva el atributo) */
html[data-bs-theme="dark"] {
  --fondo: #0f1720;  --superficie: #17212c;  --superficie-2: #1c2834;  --borde: #2c3a48;
  --texto: #e6edf3;  --texto-2: #9db0c1;
  --marca: #6aa6dc;  --marca-hover: #8dbbe6;  --marca-suave: #1d3449;  --sobre-marca: #0b1620;
  --ok: #86efac;       --ok-fondo: #13321f;
  --atencion: #fcd34d; --atencion-fondo: #35290c;
  --error: #fca5a5;    --error-fondo: #3b1717;
  --info: #93c5fd;     --info-fondo: #172a4a;
  --neutro: #b3c0cc;   --neutro-fondo: #243240;
  --foco: #fbbf24;     --velo: rgba(0, 0, 0, .65);
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

/* 2 · BASE --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.ds { margin: 0; background: var(--fondo); color: var(--texto); font: var(--p400) var(--t14)/1.5 var(--fuente); }
.ds h1, .ds h2, .ds h3 { margin: 0; font-weight: var(--p600); line-height: 1.3; }
.ds h1 { font-size: var(--t24); } .ds h2 { font-size: var(--t16); } .ds h3 { font-size: var(--t14); }
.ds p { margin: 0; }
.ds :where(a:not(.ds-btn)) { color: var(--marca); text-decoration: none; } .ds :where(a:not(.ds-btn):hover) { text-decoration: underline; }
.ds :focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: var(--radio-peq); }
.ds ::selection { background: var(--marca-suave); color: var(--texto); }
.ds-icono { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.ds-icono--20 { width: 20px; height: 20px; }
.ds-mono { font-family: var(--mono); font-size: var(--t13); }
.ds-num { font-variant-numeric: tabular-nums; }
.ds-sec { color: var(--texto-2); } .ds-peq { font-size: var(--t12); color: var(--texto-2); }
.ds-solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ds-saltar { position: absolute; left: -999px; top: var(--e2); z-index: 1000; background: var(--superficie); padding: var(--e2) var(--e3); border-radius: var(--radio); box-shadow: var(--sombra); }
.ds-saltar:focus { left: var(--e2); }
@media (prefers-reduced-motion: reduce) { .ds *, .ds *::before, .ds *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* 3 · MARCO: lateral fija 240 + barra superior 56 --------------------------- */
.ds-app { display: grid; grid-template-columns: var(--ancho-lateral) minmax(0, 1fr); min-height: 100vh; }
.ds-lateral { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--superficie); border-right: var(--borde-ancho) solid var(--borde); display: flex; flex-direction: column; padding: 0 var(--e3) var(--e4); z-index: 40; }
.ds-marca { display: flex; align-items: center; gap: var(--e3); height: var(--h-barra); padding: 0 var(--e2); color: var(--texto); font-weight: var(--p600); font-size: var(--t16); flex: none; }
.ds-marca:hover { text-decoration: none; }
.ds-logo { width: 32px; height: 32px; border-radius: var(--radio); background: var(--marca); color: var(--sobre-marca); display: inline-flex; align-items: center; justify-content: center; font-size: var(--t13); font-weight: var(--p600); flex: none; }
.ds-nav-grupo { margin: var(--e4) var(--e2) var(--e1); font-size: var(--t12); font-weight: var(--p600); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }
.ds-nav { display: flex; flex-direction: column; gap: 2px; }
.ds-nav a { display: flex; align-items: center; gap: var(--e3); height: var(--h-control); padding: 0 var(--e3); border-radius: var(--radio); color: var(--texto); font-weight: var(--p500); white-space: nowrap; }
.ds-nav a:hover { background: var(--superficie-2); text-decoration: none; }
.ds-nav a[aria-current="page"] { background: var(--marca-suave); color: var(--marca); }
.ds-nav a .ds-icono { color: var(--texto-2); } .ds-nav a[aria-current="page"] .ds-icono { color: var(--marca); }
.ds-lateral-pie { margin-top: auto; padding-top: var(--e4); display: flex; flex-direction: column; gap: var(--e2); }
.ds-columna { display: flex; flex-direction: column; min-width: 0; }
.ds-barra { position: sticky; top: 0; z-index: 30; height: var(--h-barra); background: var(--superficie); border-bottom: var(--borde-ancho) solid var(--borde); display: flex; align-items: center; gap: var(--e4); padding: 0 var(--e5); }
.ds-barra-titulo { font-size: var(--t16); font-weight: var(--p600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ds-barra-sucursal { display: inline-flex; align-items: center; gap: var(--e1); color: var(--texto-2); font-size: var(--t13); white-space: nowrap; }
.ds-barra-centro { flex: 1; display: flex; justify-content: center; min-width: 0; }
.ds-barra-usuario { display: flex; align-items: center; gap: var(--e3); }
.ds-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--marca-suave); color: var(--marca); display: inline-flex; align-items: center; justify-content: center; font-weight: var(--p600); font-size: var(--t13); flex: none; }
.ds-barra-usuario .ds-quien { line-height: 1.2; text-align: right; } .ds-quien b { display: block; font-weight: var(--p600); font-size: var(--t13); } .ds-quien span { font-size: var(--t12); color: var(--texto-2); }
.ds-btn.ds-menu-boton { display: inline-flex; }
.ds-app.is-colapsado { grid-template-columns: minmax(0, 1fr); } .ds-app.is-colapsado .ds-lateral { display: none; }
.ds-contenido { width: 100%; max-width: 1320px; margin: 0 auto; padding: var(--e5); flex: 1; }
.ds-velo-lateral { display: none; }

/* buscador global (selector de tipo + campo de pistoleo compacto) */
.ds-global { display: flex; width: 100%; max-width: 560px; height: var(--h-control); border: var(--borde-ancho) solid var(--borde); border-radius: var(--radio); background: var(--superficie); overflow: hidden; }
.ds-global:focus-within { border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave); }
.ds-global select { border: 0; border-right: var(--borde-ancho) solid var(--borde); background: var(--superficie-2); color: var(--texto); font: inherit; font-size: var(--t13); padding: 0 var(--e3); outline: 0; max-width: 150px; }
.ds-global input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--texto); font: inherit; padding: 0 var(--e3); outline: 0; }
.ds-global button { border: 0; background: transparent; color: var(--texto-2); padding: 0 var(--e3); cursor: pointer; display: inline-flex; align-items: center; }
.ds-global button:hover { color: var(--marca); }

/* 4 · BOTÓN: 4 variantes, 2 tamaños --------------------------------------- */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); height: var(--h-control); padding: 0 var(--e4); border: var(--borde-ancho) solid transparent; border-radius: var(--radio); font: var(--p500) var(--t14)/1 var(--fuente); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .12s, border-color .12s, color .12s; position: relative; }
.ds-btn:hover { text-decoration: none; }
.ds-btn--primario { background: var(--marca); color: var(--sobre-marca); } .ds-btn--primario:hover { background: var(--marca-hover); }
.ds-btn--secundario { background: var(--superficie); color: var(--texto); border-color: var(--borde); } .ds-btn--secundario:hover { background: var(--superficie-2); border-color: var(--texto-2); }
.ds-btn--fantasma { background: transparent; color: var(--texto); } .ds-btn--fantasma:hover { background: var(--neutro-fondo); }
.ds-btn--peligro { background: var(--error); color: #fff; } .ds-btn--peligro:hover { filter: brightness(.9); }
html[data-bs-theme="dark"] .ds-btn--peligro { color: #1b0a0a; }
.ds-btn--sm { height: var(--h-tabla); padding: 0 var(--e3); font-size: var(--t13); border-radius: var(--radio-peq); }
.ds-btn--icono { width: var(--h-control); padding: 0; } .ds-btn--icono.ds-btn--sm { width: var(--h-tabla); }
.ds-btn--bloque { width: 100%; }
.ds-btn:disabled, .ds-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.ds-btn.is-cargando { color: transparent !important; pointer-events: none; }
.ds-btn.is-cargando::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid var(--sobre-marca); border-right-color: transparent; border-radius: 50%; animation: ds-gira .7s linear infinite; }
.ds-btn--secundario.is-cargando::after, .ds-btn--fantasma.is-cargando::after { border-color: var(--texto-2); border-right-color: transparent; }
@keyframes ds-gira { to { transform: rotate(360deg); } }
.ds-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }

/* 5 · FORMULARIOS --------------------------------------------------------- */
.ds-campo { display: flex; flex-direction: column; gap: var(--e1); min-width: 0; }
.ds-etiqueta { font-size: var(--t13); font-weight: var(--p500); color: var(--texto); }
.ds-obligatorio::after { content: " *"; color: var(--error); }
.ds-ayuda { font-size: var(--t12); color: var(--texto-2); }
.ds-error { font-size: var(--t12); color: var(--error); display: flex; align-items: center; gap: var(--e1); }
.ds-input, .ds-select, .ds-textarea { width: 100%; height: var(--h-control); padding: 0 var(--e3); border: var(--borde-ancho) solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--texto); font: inherit; transition: border-color .12s, box-shadow .12s; }
.ds-textarea { height: auto; min-height: 88px; padding: var(--e2) var(--e3); resize: vertical; }
.ds-select { appearance: none; padding-right: var(--e6); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23788796' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--e3) center; }
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--texto-2); opacity: .7; }
.ds-input:hover, .ds-select:hover, .ds-textarea:hover { border-color: var(--texto-2); }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus { outline: 0; border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave); }
.ds-input:focus-visible, .ds-select:focus-visible, .ds-textarea:focus-visible { outline: 0; }
.ds-input:disabled, .ds-select:disabled, .ds-textarea:disabled { background: var(--neutro-fondo); color: var(--texto-2); cursor: not-allowed; }
.is-error, [aria-invalid="true"] { border-color: var(--error) !important; }
.ds-input.is-error:focus, .ds-select.is-error:focus { box-shadow: 0 0 0 3px var(--error-fondo); }
.ds-input.is-cargando { background-image: linear-gradient(90deg, transparent, var(--marca-suave), transparent); background-size: 200% 100%; animation: ds-brillo 1.2s linear infinite; }
.ds-input--corto { max-width: 160px; } .ds-input--medio { max-width: 280px; }
.ds-input[type="number"], .ds-input--num { font-variant-numeric: tabular-nums; text-align: right; }
.ds-input--color { width: 64px; padding: var(--e1); cursor: pointer; }
.ds-input--mono { font-family: var(--mono); font-size: var(--t13); }
.ds-check { display: inline-flex; align-items: center; gap: var(--e2); min-height: var(--h-control); cursor: pointer; font-size: var(--t14); }
.ds-check input { appearance: none; width: 18px; height: 18px; margin: 0; border: var(--borde-ancho) solid var(--texto-2); background: var(--superficie); border-radius: 4px; display: grid; place-content: center; cursor: pointer; flex: none; }
.ds-check input[type="radio"] { border-radius: 50%; }
.ds-check input:checked { background: var(--marca); border-color: var(--marca); }
.ds-check input[type="checkbox"]:checked::after { content: ""; width: 10px; height: 6px; border: 2px solid var(--sobre-marca); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.ds-check input[type="radio"]:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sobre-marca); }
.ds-check input:disabled { opacity: .5; cursor: not-allowed; } .ds-check:has(input:disabled) { color: var(--texto-2); cursor: not-allowed; }
.ds-switch { display: inline-flex; align-items: center; gap: var(--e3); min-height: var(--h-control); cursor: pointer; }
.ds-switch input { appearance: none; width: 36px; height: 20px; margin: 0; border-radius: 999px; background: var(--borde); position: relative; cursor: pointer; transition: background-color .15s; flex: none; }
.ds-switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .15s; }
.ds-switch input:checked { background: var(--marca); } .ds-switch input:checked::after { transform: translateX(16px); }
.ds-switch input:disabled { opacity: .5; cursor: not-allowed; }
.ds-buscador { position: relative; } .ds-buscador .ds-icono { position: absolute; left: var(--e3); top: 50%; margin-top: -8px; color: var(--texto-2); pointer-events: none; }
.ds-buscador .ds-input { padding-left: var(--e6); }
/* campo de pistoleo: 48 px, grande, con confirmación visual al leer */
.ds-pistola { display: flex; align-items: center; gap: var(--e3); height: var(--h-pistola); padding: 0 var(--e4); border: 2px solid var(--marca); border-radius: var(--radio); background: var(--superficie); transition: background-color .2s, border-color .2s, box-shadow .2s; }
.ds-pistola .ds-icono { color: var(--marca); width: 20px; height: 20px; }
.ds-pistola input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--texto); font: var(--p500) var(--t16)/1 var(--mono); outline: 0; }
.ds-pistola:focus-within { box-shadow: 0 0 0 4px var(--marca-suave); }
.ds-pistola.is-leido { background: var(--ok-fondo); border-color: var(--ok); } .ds-pistola.is-leido .ds-icono { color: var(--ok); }
.ds-pistola.is-error { background: var(--error-fondo); border-color: var(--error); }
.ds-pistola .ds-pistola-estado { font-size: var(--t13); font-weight: var(--p500); white-space: nowrap; }
.ds-form { display: flex; flex-direction: column; gap: var(--e5); max-width: 640px; }
.ds-form--ancho { max-width: none; }
.ds-seccion-form { display: flex; flex-direction: column; gap: var(--e4); padding-bottom: var(--e5); border-bottom: var(--borde-ancho) solid var(--borde); }
.ds-seccion-form > h3 { font-size: var(--t16); }
.ds-grilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); }
.ds-grilla-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); }
.ds-form-pie { display: flex; justify-content: flex-end; gap: var(--e2); }   /* Cancelar (secundario) + primario a la derecha */
.ds-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e3); }
.ds-filtros .ds-campo { flex: 0 1 180px; } .ds-filtros .ds-ancho-fila { flex: 1 1 320px; }

/* 6 · TABLA ---------------------------------------------------------------- */
.ds-tabla-caja { background: var(--superficie); border: var(--borde-ancho) solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.ds-tabla-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); border-bottom: var(--borde-ancho) solid var(--borde); }
.ds-tabla-toolbar .ds-buscador { flex: 0 1 280px; } .ds-tabla-toolbar .ds-espacio { flex: 1; }
.ds-tabla-scroll { overflow: auto; max-height: min(70vh, 720px); }   /* si no cabe, se desplaza aquí, nunca la página */
.ds-tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t14); }
.ds-tabla th, .ds-tabla td { height: var(--h-fila); padding: 0 var(--e3); text-align: left; border-bottom: var(--borde-ancho) solid var(--borde); white-space: nowrap; vertical-align: middle; }
.ds-tabla thead th { position: sticky; top: 0; z-index: 2; background: var(--superficie-2); font-size: var(--t12); font-weight: var(--p600); text-transform: uppercase; letter-spacing: .04em; color: var(--texto-2); }
.ds-tabla tbody tr:hover td { background: var(--superficie-2); }
.ds-tabla tbody tr:last-child td { border-bottom: 0; }
.ds-tabla .ds-input, .ds-tabla .ds-select { height: var(--h-tabla); font-size: var(--t13); min-width: 96px; } .ds-tabla .ds-input--corto { min-width: 72px; }
.ds-tabla form { margin: 0; } .ds-tabla .ds-fila { flex-wrap: nowrap; gap: var(--e2); }
.ds-tabla .ds-n { text-align: right; font-variant-numeric: tabular-nums; }
.ds-tabla .ds-cod { font-family: var(--mono); font-size: var(--t13); }
.ds-tabla .ds-corta { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }   /* texto completo en title="" */
.ds-tabla .ds-acc { width: 1%; text-align: right; } .ds-tabla .ds-acc .ds-acciones { justify-content: flex-end; flex-wrap: nowrap; gap: var(--e1); }
.ds-tabla tr.is-atencion td { background: var(--atencion-fondo); }
.ds-tabla-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e3) var(--e4); border-top: var(--borde-ancho) solid var(--borde); font-size: var(--t13); color: var(--texto-2); }
.ds-paginacion { display: flex; gap: var(--e1); align-items: center; }
.ds-paginacion a, .ds-paginacion span { min-width: var(--h-tabla); height: var(--h-tabla); padding: 0 var(--e2); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radio-peq); color: var(--texto); font-variant-numeric: tabular-nums; }
.ds-paginacion a:hover { background: var(--neutro-fondo); text-decoration: none; }
.ds-paginacion [aria-current="page"] { background: var(--marca); color: var(--sobre-marca); font-weight: var(--p600); }
.ds-paginacion .is-off { color: var(--texto-2); opacity: .5; }
/* menú de acciones de fila (el resto de acciones, sin JS: <details>) */
.ds-menu { position: relative; display: inline-block; } .ds-menu > summary { list-style: none; } .ds-menu > summary::-webkit-details-marker { display: none; }
.ds-menu-lista { position: absolute; right: 0; top: calc(100% + var(--e1)); z-index: 20; min-width: 180px; background: var(--superficie); border: var(--borde-ancho) solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: var(--e1); display: flex; flex-direction: column; text-align: left; }
.ds-menu-lista a, .ds-menu-lista button { display: flex; align-items: center; gap: var(--e2); height: var(--h-tabla); padding: 0 var(--e3); border: 0; background: transparent; color: var(--texto); font: inherit; font-size: var(--t13); border-radius: var(--radio-peq); cursor: pointer; width: 100%; text-align: left; }
.ds-menu-lista a:hover, .ds-menu-lista button:hover { background: var(--neutro-fondo); text-decoration: none; }
.ds-menu-lista .ds-peligro-txt { color: var(--error); }

/* 7 · INSIGNIA, TARJETAS, ENCABEZADOS ------------------------------------------ */
.ds-insignia { display: inline-flex; align-items: center; gap: var(--e1); height: 22px; padding: 0 var(--e2); border-radius: 999px; font-size: var(--t12); font-weight: var(--p500); white-space: nowrap; background: var(--neutro-fondo); color: var(--neutro); }
.ds-insignia::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ds-insignia--ok { background: var(--ok-fondo); color: var(--ok); }
.ds-insignia--atencion { background: var(--atencion-fondo); color: var(--atencion); }
.ds-insignia--error { background: var(--error-fondo); color: var(--error); }
.ds-insignia--info { background: var(--info-fondo); color: var(--info); }
.ds-insignia--neutro { background: var(--neutro-fondo); color: var(--neutro); }
.ds-tarjeta { background: var(--superficie); border: var(--borde-ancho) solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: var(--e4); display: flex; flex-direction: column; gap: var(--e3); min-width: 0; }
.ds-tarjeta-enc { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.ds-grilla-kpi { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--e4); grid-auto-rows: 1fr; }   /* misma altura */
.ds-kpi { background: var(--superficie); border: var(--borde-ancho) solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: var(--e4); display: flex; flex-direction: column; justify-content: space-between; gap: var(--e3); min-height: 112px; color: var(--texto); }
a.ds-kpi:hover { border-color: var(--marca); text-decoration: none; }
.ds-kpi-etiqueta { font-size: var(--t13); color: var(--texto-2); }
.ds-kpi-valor { font-size: var(--t24); font-weight: var(--p600); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ds-kpi-pie { min-height: 22px; display: flex; align-items: center; }
.ds-pagina-enc { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--e4); margin-bottom: var(--e5); }
.ds-pagina-enc h1 { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.ds-pagina-enc .ds-sub { color: var(--texto-2); margin-top: var(--e1); }
.ds-migas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1); font-size: var(--t13); color: var(--texto-2); margin-bottom: var(--e2); }
.ds-migas a { color: var(--texto-2); } .ds-migas [aria-current] { color: var(--texto); }
.ds-chip-prov { display: inline-block; padding: 0 var(--e2); border-left: var(--e2) solid var(--borde); border-radius: 4px; background: var(--neutro-fondo); }
.ds-oculto { display: none; }

/* páginas públicas y de error (sin menú) */
.ds-publico { min-height: 100vh; display: grid; place-items: center; padding: var(--e5) var(--e4); }
.ds-publico-caja { width: min(440px, 100%); }
.ds-publico-marca { display: flex; justify-content: center; }
.ds-logo--grande { width: 56px; height: 56px; font-size: var(--t20); border-radius: var(--radio); }
.ds-centro { text-align: center; } .ds-centrar { justify-content: center; }
.ds-error-codigo { font-size: 48px; font-weight: var(--p600); color: var(--marca); line-height: 1; }
/* stickers de cargadores: SIEMPRE negro sobre blanco (se imprimen), también en modo oscuro */
.ds-stickers { display: flex; flex-wrap: wrap; gap: var(--e2); }
.ds-sticker { border: var(--borde-ancho) dashed #999; padding: var(--e2); background: #fff; color: #000; text-align: center; font-size: var(--t12); }
.ds-fotos { display: flex; flex-wrap: wrap; gap: var(--e2); }
.ds-fotos img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radio); border: var(--borde-ancho) solid var(--borde); display: block; }
.ds-fotos a:hover img { border-color: var(--marca); }
.ds-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--e1) var(--e4); }   /* hoja de testeo */
.ds-ancho-completo { grid-column: 1 / -1; }
.ds-progreso { display: inline-flex; align-items: center; gap: var(--e2); min-width: 112px; }
.ds-progreso b { font-size: var(--t13); font-weight: var(--p500); min-width: 40px; text-align: right; }
.ds-progreso-barra { flex: 1; height: 8px; appearance: none; border: 0; border-radius: 999px; background: var(--neutro-fondo); overflow: hidden; }
.ds-progreso-barra::-webkit-progress-bar { background: var(--neutro-fondo); }
.ds-progreso-barra::-webkit-progress-value { border-radius: 999px; background: var(--ok); }
.ds-progreso-barra::-moz-progress-bar { border-radius: 999px; background: var(--ok); }
.ds-progreso--atencion::-webkit-progress-value { background: var(--atencion); } .ds-progreso--atencion::-moz-progress-bar { background: var(--atencion); }
.ds-progreso--error::-webkit-progress-value { background: var(--error); } .ds-progreso--error::-moz-progress-bar { background: var(--error); }
.ds-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }   /* lista simple con separadores */
.ds-lista li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); padding: var(--e3) 0; border-top: var(--borde-ancho) solid var(--borde); }
.ds-lista li:first-child { border-top: 0; padding-top: 0; } .ds-lista li:last-child { padding-bottom: 0; }
.ds-lista .ds-crece { flex: 1; min-width: 0; }
.ds-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--e4); }
.ds-cifras .ds-num { font-size: var(--t24); font-weight: var(--p600); display: block; }
.ds-select--filtro { max-width: 180px; }
.ds-relleno { padding: var(--e3) var(--e4); }
.ds-nav-grupo--pie { margin: 0; }
.ds-toast-txt { flex: 1; }
.ds-pila { display: flex; flex-direction: column; gap: var(--e5); }
.ds-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.ds-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--e4) var(--e5); margin: 0; }   /* etiqueta y valor */
.ds-datos dt { font-size: var(--t12); color: var(--texto-2); margin-bottom: 2px; } .ds-datos dd { margin: 0; font-weight: var(--p500); }
.ds-dos-col { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--e5); align-items: start; }

/* 8 · SUPERPOSICIONES: modal, panel lateral, toast, alerta ---------------------- */
dialog.ds-modal, dialog.ds-panel { border: 0; padding: 0; color: var(--texto); background: var(--superficie); box-shadow: var(--sombra), 0 16px 48px rgba(0, 0, 0, .3); }
dialog.ds-modal::backdrop, dialog.ds-panel::backdrop { background: var(--velo); }
dialog.ds-modal { border-radius: var(--radio); width: min(480px, calc(100vw - var(--e5))); max-height: calc(100vh - var(--e6)); margin: auto; }
dialog.ds-panel { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(440px, 100vw); border-radius: var(--radio) 0 0 var(--radio); }
.ds-modal-cuerpo { display: flex; flex-direction: column; max-height: inherit; }
.ds-modal-enc, .ds-modal-pie { display: flex; align-items: center; gap: var(--e3); padding: var(--e4) var(--e5); }
.ds-modal-enc { justify-content: space-between; border-bottom: var(--borde-ancho) solid var(--borde); } .ds-modal-enc h2 { font-size: var(--t16); }
.ds-modal-med { padding: var(--e5); overflow: auto; flex: 1; display: flex; flex-direction: column; gap: var(--e3); }
.ds-modal-pie { justify-content: flex-end; border-top: var(--borde-ancho) solid var(--borde); }
.ds-panel .ds-modal-cuerpo { height: 100vh; }
.ds-confirmar-icono { width: 40px; height: 40px; border-radius: 50%; background: var(--error-fondo); color: var(--error); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ds-toasts { position: fixed; right: var(--e4); bottom: var(--e4); z-index: 100; display: flex; flex-direction: column; gap: var(--e2); width: min(360px, calc(100vw - var(--e5))); }
.ds-toast, .ds-alerta { display: flex; align-items: flex-start; gap: var(--e3); padding: var(--e3) var(--e4); border-radius: var(--radio); border: var(--borde-ancho) solid transparent; font-size: var(--t14); }
.ds-toast { background: var(--superficie); border-color: var(--borde); box-shadow: var(--sombra), 0 8px 24px rgba(0, 0, 0, .15); }
.ds-toast .ds-icono, .ds-alerta .ds-icono { margin-top: 2px; }
.ds-toast--ok .ds-icono { color: var(--ok); } .ds-toast--error .ds-icono { color: var(--error); } .ds-toast--atencion .ds-icono { color: var(--atencion); } .ds-toast--info .ds-icono { color: var(--info); }
.ds-alerta--ok { background: var(--ok-fondo); color: var(--ok); } .ds-alerta--atencion { background: var(--atencion-fondo); color: var(--atencion); }
.ds-alerta--error { background: var(--error-fondo); color: var(--error); } .ds-alerta--info { background: var(--info-fondo); color: var(--info); }
.ds-alerta > div { flex: 1; color: var(--texto); } .ds-alerta strong { font-weight: var(--p600); }
.ds-cerrar { border: 0; background: transparent; color: var(--texto-2); cursor: pointer; padding: var(--e1); border-radius: var(--radio-peq); display: inline-flex; }
.ds-cerrar:hover { background: var(--neutro-fondo); color: var(--texto); }

/* 9 · ESTADOS: vacío, carga, error --------------------------------------------- */
.ds-vacio, .ds-estado-error { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--e3); padding: var(--e7) var(--e5); color: var(--texto-2); }
.ds-vacio > .ds-icono, .ds-estado-error > .ds-icono { width: 40px; height: 40px; stroke-width: 1.5; }
.ds-vacio h3, .ds-estado-error h3 { color: var(--texto); font-size: var(--t16); } .ds-estado-error > .ds-icono { color: var(--error); }
.ds-esqueleto { display: block; height: 14px; border-radius: var(--radio-peq); background: linear-gradient(90deg, var(--neutro-fondo) 25%, var(--superficie-2) 50%, var(--neutro-fondo) 75%); background-size: 200% 100%; animation: ds-brillo 1.3s linear infinite; }
.ds-esqueleto--fila { height: var(--h-fila); border-radius: 0; margin-bottom: 1px; }
@keyframes ds-brillo { to { background-position: -200% 0; } }

/* 10 · PESTAÑAS, LISTA DE AJUSTES, LÍNEA DE TIEMPO -------------------------------- */
.ds-tabs { display: flex; gap: var(--e1); border-bottom: var(--borde-ancho) solid var(--borde); overflow-x: auto; overflow-y: hidden; }
.ds-tabs a, .ds-tabs button { display: inline-flex; align-items: center; gap: var(--e2); height: 40px; padding: 0 var(--e4); border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--texto-2); font: var(--p500) var(--t14) var(--fuente); cursor: pointer; white-space: nowrap; }
.ds-tabs a:hover, .ds-tabs button:hover { color: var(--texto); text-decoration: none; }
.ds-tabs [aria-selected="true"], .ds-tabs [aria-current="page"] { color: var(--marca); border-bottom-color: var(--marca); }
.ds-tabs .ds-insignia { height: 18px; }
.ds-panel-tab[hidden] { display: none; }
.ds-ajustes-grupo { display: flex; flex-direction: column; gap: var(--e2); }
.ds-ajustes-grupo > h2 { font-size: var(--t13); font-weight: var(--p600); text-transform: uppercase; letter-spacing: .05em; color: var(--texto-2); }
.ds-ajustes { background: var(--superficie); border: var(--borde-ancho) solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.ds-ajuste { display: flex; align-items: center; gap: var(--e4); min-height: 56px; padding: var(--e2) var(--e4); border-bottom: var(--borde-ancho) solid var(--borde); color: var(--texto); }
.ds-ajuste:last-child { border-bottom: 0; } .ds-ajuste:hover { background: var(--superficie-2); text-decoration: none; }
.ds-ajuste-icono { width: 36px; height: 36px; border-radius: var(--radio); background: var(--marca-suave); color: var(--marca); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ds-ajuste-txt { flex: 1; min-width: 0; } .ds-ajuste-txt b { display: block; font-weight: var(--p500); } .ds-ajuste-txt span { display: block; font-size: var(--t13); color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-ajuste-conteo { font-size: var(--t13); color: var(--texto-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-ajuste > .ds-icono:last-child { color: var(--texto-2); }
.ds-linea { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ds-linea li { position: relative; display: flex; gap: var(--e3); padding-bottom: var(--e4); }
.ds-linea li::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: 0; width: 2px; background: var(--borde); }
.ds-linea li:last-child { padding-bottom: 0; } .ds-linea li:last-child::before { display: none; }
.ds-linea-punto { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--marca); background: var(--superficie); flex: none; margin-top: 2px; }
.ds-linea b { font-weight: var(--p500); } .ds-linea time { display: block; font-size: var(--t12); color: var(--texto-2); }

/* 11 · RESPONSIVE ---------------------------------------------------------------- */
@media (max-width: 1023px) {
  .ds-app { grid-template-columns: minmax(0, 1fr); }
  .ds-lateral { position: fixed; inset: 0 auto 0 0; width: var(--ancho-lateral); transform: translateX(-100%); transition: transform .2s; box-shadow: none; }
  .ds-app.is-menu .ds-lateral { transform: none; box-shadow: var(--sombra), 0 16px 48px rgba(0, 0, 0, .3); }
  .ds-app.is-menu .ds-velo-lateral { display: block; position: fixed; inset: 0; background: var(--velo); z-index: 35; }

  .ds-barra { padding: 0 var(--e4); }
  .ds-barra-usuario .ds-quien { display: none; }
  .ds-dos-col { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .ds-contenido { padding: var(--e4); }
  .ds-grilla-2, .ds-grilla-3 { grid-template-columns: minmax(0, 1fr); }
  .ds-barra-sucursal { display: none; } .ds-barra-titulo { font-size: var(--t14); }
  .ds-global select { max-width: 96px; padding: 0 var(--e2); }
  .ds-grilla-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-filtros .ds-campo { flex: 1 1 100%; }
  .ds-form-pie { flex-direction: column-reverse; } .ds-form-pie .ds-btn { width: 100%; }
  dialog.ds-panel { border-radius: 0; }
}
@media (max-width: 520px) { .ds-barra-titulo { display: none; } .ds-barra-centro { justify-content: stretch; } }   /* el título ya está en el encabezado de la página */
/* Pantallas táctiles (tablet y celular en el taller): objetivos de toque de 44 px */
@media (pointer: coarse) {
  .ds-btn, .ds-input, .ds-select, .ds-global, .ds-check, .ds-switch { min-height: 44px; }
  .ds-btn--sm { min-height: 40px; } .ds-btn--icono { min-width: 44px; }
  .ds-nav a { height: 44px; } .ds-pistola { height: 56px; }
  .ds-tabla th, .ds-tabla td { height: 48px; }
}

/* 12 · IMPRESIÓN ----------------------------------------------------------------- */
@media print {
  .ds-lateral, .ds-barra, .ds-toasts, .ds-noprint, .ds-velo-lateral { display: none !important; }
  .ds-app { display: block; } body.ds { background: #fff; color: #000; }
  .ds-contenido { max-width: none; padding: 0; } .ds-tarjeta, .ds-tabla-caja, .ds-kpi { box-shadow: none; }
  .ds-tabla-scroll { max-height: none; overflow: visible; } .ds-tabla thead th { position: static; }
}

/* TABLERO DEL LOTE (Panel del gerente) -------------------------------------- */
.ds-seccion-titulo { font-size: var(--t16); margin-top: var(--e3); }
.ds-lote-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e4); background: var(--superficie); border: var(--borde-ancho) solid var(--borde); border-left: var(--e2) solid var(--marca); border-radius: var(--radio); box-shadow: var(--sombra); padding: var(--e4) var(--e5); }
.ds-lote-id h2 { font-size: var(--t24); display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.ds-resumen { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--e4); align-items: stretch; }
.ds-dona-caja { align-items: center; justify-content: center; text-align: center; }
.ds-dona { position: relative; width: 168px; height: 168px; margin: 0; }
.ds-dona svg { width: 100%; height: 100%; display: block; }
.ds-dona-fondo { fill: none; stroke: var(--neutro-fondo); stroke-width: 14; }
.ds-dona-valor { fill: none; stroke: var(--ok); stroke-width: 14; stroke-linecap: round; }
.ds-dona--atencion .ds-dona-valor { stroke: var(--atencion); } .ds-dona--error .ds-dona-valor { stroke: var(--error); }
.ds-dona figcaption { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ds-dona figcaption b { font-size: 40px; font-weight: var(--p600); line-height: 1; } .ds-dona figcaption span { font-size: var(--t13); color: var(--texto-2); }
.ds-kpis-lote { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-kpis-lote .ds-kpi-valor small { font-size: var(--t14); font-weight: var(--p400); }
.ds-kpis-lote .ds-progreso { min-width: 0; width: 100%; }
.ds-pipeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--e3); }
.ds-paso { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--e1); padding: var(--e4) var(--e2); border: var(--borde-ancho) solid var(--borde); border-radius: var(--radio); background: var(--superficie-2); text-align: center; }
.ds-paso:not(:last-child)::after { content: ""; position: absolute; right: calc(-1 * var(--e3) - 1px); top: 50%; width: var(--e3); border-top: 2px solid var(--borde); }
.ds-paso-nombre { font-size: var(--t13); font-weight: var(--p500); color: var(--texto-2); text-transform: uppercase; letter-spacing: .04em; }
.ds-paso-n { font-size: 32px; font-weight: var(--p600); line-height: 1.1; }
.ds-paso.is-lider { background: var(--marca-suave); border-color: var(--marca); } .ds-paso.is-lider .ds-paso-n, .ds-paso.is-lider .ds-paso-nombre { color: var(--marca); }
.ds-paso.is-vacio .ds-paso-n { color: var(--texto-2); opacity: .6; }
.ds-grilla-graficos { align-items: stretch; }
.ds-embudo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e3); }
.ds-embudo li { display: grid; grid-template-columns: 96px minmax(0, 1fr) 84px; align-items: center; gap: var(--e3); }
.ds-embudo-nombre { font-size: var(--t13); } .ds-embudo-n { font-size: var(--t13); text-align: right; white-space: nowrap; }
.ds-progreso--marca::-webkit-progress-value { background: var(--marca); } .ds-progreso--marca::-moz-progress-bar { background: var(--marca); }
.ds-progreso--gruesa { height: 14px; }
.ds-hoy { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e2); }
.ds-hoy-item { display: flex; flex-direction: column; gap: 2px; padding: var(--e2) var(--e3); background: var(--superficie-2); border-radius: var(--radio); }
.ds-hoy-item b { font-size: var(--t24); font-weight: var(--p600); line-height: 1.1; }
.ds-grafico { width: 100%; height: auto; display: block; }
.ds-grafico-eje { stroke: var(--borde); stroke-width: 1; }
.ds-grafico-barra { fill: var(--marca); opacity: .55; } .ds-grafico-barra.is-hoy { opacity: 1; }
.ds-grafico-valor { fill: var(--texto); font-size: 12px; font-weight: 600; } .ds-grafico-dia { fill: var(--texto-2); font-size: 11px; } .ds-grafico-dia.is-hoy { fill: var(--texto); font-weight: 600; }
.ds-modal-lotes { gap: var(--e1); }
dialog.ds-modal:has(.ds-modal-lotes) { width: min(560px, calc(100vw - var(--e5))); }
.ds-lote-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto 140px; align-items: center; gap: var(--e3); padding: var(--e3); border-radius: var(--radio); color: var(--texto); }
.ds-lote-fila:hover { background: var(--superficie-2); text-decoration: none; } .ds-lote-fila.is-actual { background: var(--marca-suave); }
@media (max-width: 1023px) { .ds-resumen { grid-template-columns: minmax(0, 1fr); } .ds-pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ds-paso:nth-child(3n)::after { display: none; } }
@media (max-width: 720px) { .ds-kpis-lote { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ds-hoy { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ds-embudo li { grid-template-columns: 76px minmax(0, 1fr) 70px; } .ds-lote-fila { grid-template-columns: minmax(0, 1fr) auto; } .ds-lote-fila .ds-progreso { grid-column: 1 / -1; } .ds-lote-cab { padding: var(--e4); } }

/* TABLERO v2: íconos, composición, observaciones y panel de Soporte ------------------ */
.ds-chip { width: 36px; height: 36px; border-radius: var(--radio); display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--info-fondo); color: var(--info); }
.ds-chip--ok { background: var(--ok-fondo); color: var(--ok); } .ds-chip--atencion { background: var(--atencion-fondo); color: var(--atencion); }
.ds-chip--error { background: var(--error-fondo); color: var(--error); } .ds-chip--info { background: var(--info-fondo); color: var(--info); }
.ds-chip--marca { background: var(--marca-suave); color: var(--marca); } .ds-chip--neutro { background: var(--neutro-fondo); color: var(--neutro); }
.ds-chip--grande { width: 48px; height: 48px; } .ds-chip--chico { width: 32px; height: 32px; }
.ds-kpi-cab { display: flex; align-items: center; gap: var(--e3); }
.ds-kpi-valor small { font-size: var(--t14); font-weight: var(--p400); color: var(--texto-2); }
.ds-kpi-pie { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--e1); }
.ds-kpi-pie .ds-progreso { min-width: 0; width: 100%; }
.ds-kpis-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ds-segmento { display: inline-flex; padding: var(--e1); gap: var(--e1); background: var(--neutro-fondo); border-radius: var(--radio); align-self: flex-start; margin-bottom: var(--e4); }
.ds-segmento a { display: inline-flex; align-items: center; gap: var(--e2); height: 32px; padding: 0 var(--e4); border-radius: var(--radio-peq); color: var(--texto-2); font-weight: var(--p500); }
.ds-segmento a:hover { text-decoration: none; color: var(--texto); } .ds-segmento a[aria-current="page"] { background: var(--superficie); color: var(--marca); box-shadow: var(--sombra); }
.ds-lote-cab { justify-content: flex-start; } .ds-lote-cab .ds-acciones { margin-left: auto; }
.ds-lote-id p .ds-icono { margin-right: 2px; }
.ds-resumen-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); }
.ds-sub-caja { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e4); border: var(--borde-ancho) solid var(--borde); border-radius: var(--radio); background: var(--superficie-2); min-width: 0; }
.ds-sub-caja h3 { font-size: var(--t14); }
.ds-composicion { display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap; }
.ds-composicion .ds-dona { width: 128px; height: 128px; flex: none; } .ds-composicion .ds-dona figcaption b { font-size: 26px; }
.ds-dona-seg { fill: none; stroke-width: 14; } .ds-dona-seg--ok { stroke: var(--ok); } .ds-dona-seg--info { stroke: var(--info); } .ds-dona-seg--atencion { stroke: var(--atencion); } .ds-dona-seg--error { stroke: var(--error); }
.ds-leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e2); flex: 1; min-width: 150px; font-size: var(--t13); }
.ds-leyenda li { display: flex; align-items: center; gap: var(--e2); }
.ds-punto { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--neutro); }
.ds-punto--ok { background: var(--ok); } .ds-punto--info { background: var(--info); } .ds-punto--atencion { background: var(--atencion); } .ds-punto--error { background: var(--error); }
.ds-registro { font-size: var(--t24); font-weight: var(--p600); line-height: 1.1; }
.ds-paso > .ds-icono { width: 24px; height: 24px; color: var(--texto-2); } .ds-paso.is-lider > .ds-icono { color: var(--marca); }
.ds-embudo-nombre .ds-icono { color: var(--texto-2); margin-right: 2px; }
.ds-acciones-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ds-acciones-lista li + li { border-top: var(--borde-ancho) solid var(--borde); }
.ds-acciones-lista a { display: flex; align-items: center; gap: var(--e3); padding: var(--e2) 0; color: var(--texto); }
.ds-acciones-lista a:hover { text-decoration: none; color: var(--marca); } .ds-acciones-lista a > .ds-icono:last-child { color: var(--texto-2); }
.ds-tarjeta h2 .ds-icono, .ds-tabla-toolbar h2 .ds-icono { margin-right: var(--e1); color: var(--marca); }
/* panel de Soporte */
.ds-barras2 { display: flex; gap: var(--e4); flex-wrap: wrap; font-size: var(--t12); color: var(--texto-2); }
.ds-grafico-barra--b { fill: var(--ok); opacity: .85; } .ds-grafico-barra--a { fill: var(--marca); opacity: .85; }
.ds-cubos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e3); }
.ds-cubos li { display: grid; grid-template-columns: 22px 150px minmax(0, 1fr) 36px; align-items: center; gap: var(--e3); font-size: var(--t13); }
.ds-cubos .ds-progreso--cb-ok::-webkit-progress-value { background: var(--ok); } .ds-cubos .ds-progreso--cb-info::-webkit-progress-value { background: var(--info); }
.ds-cubos .ds-progreso--cb-atencion::-webkit-progress-value { background: var(--atencion); } .ds-cubos .ds-progreso--cb-error::-webkit-progress-value { background: var(--error); }
.ds-cubos .ds-progreso--cb-ok::-moz-progress-bar { background: var(--ok); } .ds-cubos .ds-progreso--cb-info::-moz-progress-bar { background: var(--info); }
.ds-cubos .ds-progreso--cb-atencion::-moz-progress-bar { background: var(--atencion); } .ds-cubos .ds-progreso--cb-error::-moz-progress-bar { background: var(--error); }
.ds-recorrido .ds-paso-nombre { text-transform: none; letter-spacing: 0; text-align: center; }
@media (max-width: 1280px) { .ds-kpis-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ds-resumen-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .ds-kpis-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ds-resumen-3 { grid-template-columns: minmax(0, 1fr); } .ds-cubos li { grid-template-columns: 22px 110px minmax(0, 1fr) 30px; } .ds-lote-cab .ds-acciones { margin-left: 0; } }
.ds-embudo--simple li { grid-template-columns: minmax(80px, 120px) minmax(0, 1fr) 40px; }
.ds-embudo .ds-progreso-barra, .ds-cubos .ds-progreso-barra { width: 100%; }
.ds-leyenda .ds-crece { min-width: 0; }
.ds-campana { position: relative; } .ds-noti { position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--error); color: #fff; font-size: 11px; font-weight: var(--p600); display: inline-flex; align-items: center; justify-content: center; }
html[data-bs-theme="dark"] .ds-noti { color: #1b0a0a; }
/* números del tablero: porcentajes con color, ayudas y separación */
.ds-pct { font-weight: var(--p600); color: var(--marca); font-variant-numeric: tabular-nums; }
.ds-pct--ok { color: var(--ok); } .ds-pct--atencion { color: var(--atencion); } .ds-pct--error { color: var(--error); }
.ds-paso .ds-pct { font-size: var(--t14); }
.ds-paso.is-lider .ds-pct { font-size: var(--t16); }
.ds-kpi-ayuda { font-size: var(--t12); color: var(--texto-2); line-height: 1.3; }
.ds-dona-seg--neutro { stroke: var(--borde); }
.ds-ancho-pct { min-width: 40px; text-align: right; }
.ds-dona figcaption b.ds-pct { font-size: 26px; }
.ds-embudo-n .ds-pct { min-width: 36px; display: inline-block; text-align: right; }
.ds-dos-col--form { grid-template-columns: minmax(0, 680px) minmax(280px, 380px); justify-content: start; }
.ds-datos--una { grid-template-columns: 1fr; gap: var(--e3); }
@media (max-width: 1023px) { .ds-dos-col--form { grid-template-columns: minmax(0, 1fr); } }

/* TICKET de soporte (ticketera térmica 80 mm, Epson): ancho útil 72 mm. Siempre negro sobre blanco, también en modo oscuro. */
:root { --ancho-ticket: 80mm; }
@page ticket { size: 80mm auto; margin: 2mm; }
.ds-ticket-papel { display: flex; justify-content: center; page: ticket; }
.ds-ticket { width: var(--ancho-ticket); background: #fff; color: #000; font: 12px/1.35 var(--mono); padding: 4mm 4mm 6mm; border: var(--borde-ancho) solid var(--borde); border-radius: var(--radio-peq); box-shadow: var(--sombra); }
.ds-ticket-cab { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 13px; }
.ds-ticket-cab span { font-size: 11px; letter-spacing: .15em; }
.ds-ticket-num { text-align: center; font-size: 26px; font-weight: 700; letter-spacing: .06em; margin: 8px 0 2px; }
.ds-ticket-barras { display: flex; justify-content: center; overflow: hidden; } .ds-ticket-barras svg { max-width: 100%; height: auto; }
.ds-ticket-linea { border-top: 1px dashed #000; margin: 8px 0; }
.ds-ticket-datos { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.ds-ticket-datos div { display: flex; flex-direction: column; } .ds-ticket-datos dt { font-size: 10px; letter-spacing: .08em; } .ds-ticket-datos dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.ds-ticket-centro { text-align: center; margin: 6px 0; } .ds-ticket-url { font-size: 10px; overflow-wrap: anywhere; }
.ds-ticket-legal { font-size: 9px; line-height: 1.3; margin: 8px 0; text-align: justify; }
.ds-ticket-firma { margin-top: 14mm; padding-top: 4px; border-top: 1px solid #000; text-align: center; font-size: 11px; }
.ds-ticket-gracias { margin-top: 8px; font-size: 11px; }
@media print {
  .ds-contenido > *:not(.ds-ticket-papel) { display: none !important; }
  .ds-ticket-papel { display: block; } .ds-ticket { width: 72mm; border: 0; box-shadow: none; padding: 0; margin: 0 auto; border-radius: 0; }
}

/* SEGUIMIENTO del cliente (página pública) */
.ds-publico-caja--ancha { width: min(640px, 100%); }
.ds-seg { gap: var(--e5); padding: var(--e5); }
.ds-seg-cab { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--e2); }
.ds-seg-cab h1 { font-size: var(--t24); } .ds-seg-cab h1.ds-mono { font-size: 32px; letter-spacing: .04em; }
.ds-seg-estado { height: 28px; padding: 0 var(--e3); font-size: var(--t14); }
.ds-seg-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--e1); }
.ds-seg-paso { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--e2); text-align: center; font-size: var(--t12); color: var(--texto-2); }
.ds-seg-paso:not(:last-child)::after { content: ""; position: absolute; top: 19px; left: calc(50% + 22px); right: calc(-50% + 22px); border-top: 2px solid var(--borde); }
.ds-seg-paso.is-hecho:not(:last-child)::after { border-top-color: var(--ok); }
.ds-seg-punto { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--borde); background: var(--superficie); display: inline-flex; align-items: center; justify-content: center; z-index: 1; }
.ds-seg-paso.is-hecho .ds-seg-punto { background: var(--ok); border-color: var(--ok); color: var(--superficie); }
.ds-seg-paso.is-actual .ds-seg-punto { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); box-shadow: 0 0 0 4px var(--marca-suave); }
.ds-seg-paso.is-actual { color: var(--texto); font-weight: var(--p600); }
.ds-seg-informe { background: var(--superficie-2); border-radius: var(--radio); padding: var(--e4); display: flex; flex-direction: column; gap: var(--e2); }
@media (max-width: 520px) { .ds-seg-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--e4); } .ds-seg-paso:nth-child(3n)::after, .ds-seg-paso:last-child::after { display: none; } }
.ds-dos-col--igual { align-items: stretch; } .ds-dos-col--igual > .ds-tarjeta { justify-content: flex-start; }
.ds-embudo li { grid-template-columns: 110px minmax(0, 1fr) 128px; }
.ds-dos-col--igual .ds-tarjeta:first-child .ds-embudo { flex: 1; justify-content: space-around; }
@media (max-width: 720px) { .ds-embudo li { grid-template-columns: 84px minmax(0, 1fr) 104px; } }

/* CAMPANA de notificaciones: desplegable en la barra superior */
.ds-notis > summary.ds-campana { list-style: none; }
.ds-notis-panel { right: 0; left: auto; width: min(380px, calc(100vw - var(--e4))); padding: 0; max-height: 70vh; overflow-y: auto; }
.ds-notis-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e3) var(--e4); border-bottom: var(--borde-ancho) solid var(--borde); position: sticky; top: 0; background: var(--superficie); }
.ds-menu-lista a.ds-noti-item, .ds-menu-lista .ds-noti-item { height: auto; align-items: flex-start; gap: var(--e3); padding: var(--e3) var(--e4); border-radius: 0; border-bottom: var(--borde-ancho) solid var(--borde); font-size: var(--t13); }
.ds-noti-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ds-noti-txt > span { overflow-wrap: anywhere; } .ds-noti-txt small { color: var(--texto-2); }
.ds-noti-vacio { display: flex; flex-direction: column; align-items: center; gap: var(--e2); padding: var(--e5); color: var(--texto-2); text-align: center; }
.ds-menu-lista a.ds-notis-pie { justify-content: center; height: 44px; border-radius: 0; color: var(--marca); font-weight: var(--p600); position: sticky; bottom: 0; background: var(--superficie); border-top: var(--borde-ancho) solid var(--borde); }

/* CLASES de testeo (PP, P, PQ, QP, Q, R, REMATE) y pantallas de testeo */
.ds-clase { display: inline-flex; align-items: center; gap: var(--e1); height: 24px; padding: 0 var(--e2); border-radius: var(--radio-peq); font-size: var(--t12); border: var(--borde-ancho) solid transparent; white-space: nowrap; background: var(--neutro-fondo); color: var(--neutro); }
.ds-clase b { font-weight: var(--p600); letter-spacing: .03em; } .ds-clase .ds-icono { width: 14px; height: 14px; }
.ds-clase--pp { background: var(--ok-fondo); color: var(--ok); border-color: var(--ok); }
.ds-clase--p { background: var(--ok-fondo); color: var(--ok); }
.ds-clase--pq, .ds-clase--qp { background: var(--info-fondo); color: var(--info); }
.ds-clase--q { background: var(--neutro-fondo); color: var(--neutro); }
.ds-clase--r { background: var(--error-fondo); color: var(--error); }
.ds-clase--remate { background: var(--atencion-fondo); color: var(--atencion); border-color: var(--atencion); font-weight: var(--p600); }
.ds-clase-txt { font-weight: var(--p400); margin-left: var(--e1); white-space: normal; }
.ds-franja { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); padding: var(--e3) var(--e4); border-bottom: var(--borde-ancho) solid var(--borde); background: var(--superficie-2); }
.ds-franja > .ds-espacio { flex: 1; }
.ds-fila-link { cursor: pointer; }
.ds-chips { display: inline-flex; flex-wrap: wrap; gap: var(--e1); }
.ds-chips a { text-decoration: none; }
/* clases como botones grandes táctiles (testeo manual) */
.ds-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--e3); }
.ds-opcion { display: flex; align-items: flex-start; gap: var(--e3); padding: var(--e3) var(--e4); min-height: 64px; border: 2px solid var(--borde); border-radius: var(--radio); background: var(--superficie); cursor: pointer; }
.ds-opcion:hover { border-color: var(--texto-2); }
.ds-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.ds-opcion:has(input:checked) { border-color: var(--marca); background: var(--marca-suave); }
.ds-opcion:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
.ds-opcion:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.ds-opcion-txt { display: flex; flex-direction: column; gap: 2px; font-size: var(--t13); color: var(--texto-2); } .ds-opcion-txt b { color: var(--texto); font-size: var(--t14); }
/* barras de reportes por lote */
.ds-barra-celda { display: flex; align-items: center; gap: var(--e2); min-width: 160px; } .ds-barra-celda .ds-progreso-barra { flex: 1; }
.ds-detalle-resumen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e3); }
@media (max-width: 900px) { .ds-detalle-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ds-kpis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1280px) { .ds-kpis-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .ds-kpis-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ds-falla { display: flex; gap: var(--e3); padding: var(--e3); border: var(--borde-ancho) solid var(--error); border-radius: var(--radio); background: var(--error-fondo); } .ds-falla b { color: var(--error); }
.ds-progreso--cb-error::-webkit-progress-value { background: var(--error); } .ds-progreso--cb-error::-moz-progress-bar { background: var(--error); }
.ds-barra-celda .ds-progreso-barra { height: 10px; }

/* ==========================================================================
   TEMA v3 · «Industrial Operations — Premium» (12/11/2026)
   Más profundidad (fondo < lateral < panel < elevado), acción en azul eléctrico, un solo scroll (el de la página),
   estados «bien» discretos para que el ámbar y el rojo se noten. Estos valores reemplazan a los del bloque 1.
   ========================================================================== */
:root {
  --fondo: #e9edf3; --superficie: #ffffff; --superficie-2: #f4f6fa; --superficie-3: #ffffff; --lateral-fondo: #ffffff; --borde: #d0d8e2;
  --texto: #121a26; --texto-2: #4a586b;
  --marca: #1c4fa8; --marca-hover: #143c82; --marca-suave: #e4ecfb; --sobre-marca: #ffffff;
  --ok: #17703a; --ok-fondo: #e1f4e8; --atencion: #8a5200; --atencion-fondo: #fff0cf; --error: #b4231a; --error-fondo: #fde4e1; --info: #1d4fb0; --info-fondo: #e1ebfc;
  --neutro: #465568; --neutro-fondo: #e6ebf2;
  --sombra: 0 1px 2px rgba(18, 26, 38, .06), 0 4px 12px rgba(18, 26, 38, .05);
}
html[data-bs-theme="dark"] {
  --fondo: #080c12; --lateral-fondo: #0c121b; --superficie: #111824; --superficie-2: #172030; --superficie-3: #1e2a3d; --borde: #263449;
  --texto: #e9eff7; --texto-2: #9bacc0;
  --marca: #5d9bff; --marca-hover: #86b4ff; --marca-suave: #132641; --sobre-marca: #07101e;
  --ok: #6fe3a0; --ok-fondo: #0e2a1c; --atencion: #ffc65c; --atencion-fondo: #2f2409; --error: #ff8a80; --error-fondo: #36141a; --info: #8ab6ff; --info-fondo: #11233f;
  --neutro: #aab8ca; --neutro-fondo: #1d2838;
  --sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .35);
}
.ds-lateral { background: var(--lateral-fondo); }
.ds-barra { background: color-mix(in srgb, var(--superficie) 92%, transparent); backdrop-filter: blur(6px); }
dialog.ds-modal, dialog.ds-panel, .ds-menu-lista, .ds-toast { background: var(--superficie-3); }
/* un solo scroll: el de la página (las tablas anchas solo se desplazan hacia el lado, dentro de su caja) */
.ds-tabla-scroll { max-height: none; overflow-y: visible; overflow-x: auto; }
.ds-tabla thead th { position: static; box-shadow: none; }
/* barra lateral compacta: que quepa completa sin scroll propio en pantallas de 1080 px o más */
.ds-nav a { height: 34px; } .ds-nav-grupo { margin-top: var(--e3); }
.ds-lateral { padding-bottom: var(--e3); } .ds-lateral-pie { padding-top: var(--e3); border-top: var(--borde-ancho) solid var(--borde); }
.ds-pie-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); }
.ds-segmento--tema { margin: 0; padding: 2px; align-self: auto; }
.ds-seg-btn { width: 32px; height: 28px; border: 0; border-radius: var(--radio-peq); background: transparent; color: var(--texto-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ds-seg-btn:hover { color: var(--texto); } .ds-seg-btn.active, .ds-seg-btn[aria-pressed="true"] { background: var(--superficie); color: var(--marca); box-shadow: var(--sombra); }
/* «bien» discreto: solo texto con punto; el color fuerte se reserva para lo que pide atención */
.ds-kpi .ds-insignia--ok, .ds-tarjeta .ds-kpi-pie .ds-insignia--ok { background: transparent; padding-left: 0; }
/* alturas: nada se estira para igualar columnas con contenido muy distinto */
.ds-dos-col--igual { align-items: start; }
.ds-dos-col--igual .ds-tarjeta:first-child .ds-embudo { flex: initial; justify-content: flex-start; }

/* CENTRO DE ALERTAS */
.ds-kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1100px) { .ds-kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ds-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 720px) { .ds-kpis-3 { grid-template-columns: minmax(0, 1fr); } }
.ds-chips-filtro { display: flex; flex-wrap: wrap; gap: var(--e2); }
.ds-chips-filtro a { display: inline-flex; align-items: center; gap: var(--e1); height: 30px; padding: 0 var(--e3); border: var(--borde-ancho) solid var(--borde); border-radius: 999px; background: var(--superficie); color: var(--texto); font-size: var(--t13); }
.ds-chips-filtro a:hover { text-decoration: none; border-color: var(--texto-2); } .ds-chips-filtro a[aria-current="true"] { background: var(--marca); color: var(--sobre-marca); border-color: var(--marca); }
.ds-chips-filtro b { font-variant-numeric: tabular-nums; } .ds-chips-limpiar { color: var(--texto-2) !important; }
.ds-alertas-grupo { display: flex; flex-direction: column; gap: var(--e2); }
.ds-alertas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e2); }
.ds-alerta-fila { display: flex; align-items: center; gap: var(--e4); padding: var(--e3) var(--e4); background: var(--superficie); border: var(--borde-ancho) solid var(--borde); border-left: 4px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.ds-alerta-fila--error { border-left-color: var(--error); } .ds-alerta-fila--atencion { border-left-color: var(--atencion); } .ds-alerta-fila--info { border-left-color: var(--info); }
.ds-alerta-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ds-alerta-cuerpo p { overflow-wrap: anywhere; }
.ds-alerta-meta { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e4); font-size: var(--t12); color: var(--texto-2); } .ds-alerta-meta > * { display: inline-flex; align-items: center; gap: var(--e1); }
@media (max-width: 720px) { .ds-alerta-fila { flex-wrap: wrap; } .ds-alerta-fila .ds-acciones { width: 100%; } }

/* pastillas de etapa y filtros activos (Equipos) y pestañas de grupo (Soporte) */
.ds-etapas-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.ds-etapas-chips a { display: inline-flex; align-items: center; gap: var(--e2); height: 36px; padding: 0 var(--e4); border: var(--borde-ancho) solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--texto); font-weight: var(--p500); }
.ds-etapas-chips a:hover { text-decoration: none; border-color: var(--texto-2); }
.ds-etapas-chips a[aria-current="true"] { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }
.ds-etapas-chips b { font-weight: var(--p600); } .ds-etapas-aviso { display: inline-flex; align-items: center; gap: var(--e1); color: var(--atencion); font-size: var(--t13); margin-left: auto; }
.ds-filtros-activos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.ds-filtro-chip { display: inline-flex; align-items: center; gap: var(--e1); height: 28px; padding: 0 var(--e3); border-radius: 999px; background: var(--marca-suave); color: var(--marca); font-size: var(--t13); }
.ds-filtro-chip:hover { text-decoration: none; filter: brightness(1.1); }
.ds-fila-cerrada td { color: var(--texto-2); } .ds-fila-cerrada .ds-insignia { opacity: .8; }
.ds-corta--cliente { max-width: 340px; }
.ds-pipeline--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } @media (max-width: 1023px) { .ds-pipeline--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* panel de Soporte: urgencias y tiempo */
.ds-urgente { border-left: 4px solid var(--error); } .ds-urgente--ok { border-left-color: var(--ok); }
.ds-lista-urgente { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ds-lista-urgente li { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) 0; border-top: var(--borde-ancho) solid var(--borde); }
.ds-lista-urgente li:first-child { border-top: 0; } .ds-urg-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ds-urg-txt small { color: var(--texto-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e2); }
.ds-tiempo { display: inline-flex; align-items: center; gap: var(--e2); }
.ds-tabla td { white-space: normal; } .ds-tabla td.ds-cod, .ds-tabla td.ds-n, .ds-tabla th { white-space: nowrap; }
.ds-urg-linea { display: block; overflow-wrap: anywhere; }
.ds-embudo.ds-embudo--simple li { grid-template-columns: minmax(70px, 110px) minmax(0, 1fr) 36px; }
.ds-tabla td.ds-corta { white-space: nowrap; }
.ds-grilla-graficos.ds-grilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1280px) { .ds-grilla-graficos.ds-grilla-3 { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   TEMA v4 · Rediseño de Claude Design (12/11/2026) — solo presentación
   Riel de iconos de 88 px (desde 721 px), barra de escaneo grande, barra inferior en celular,
   y componentes nuevos de composición (barra por etapa, héroe, siguiente paso, decisiones).
   ========================================================================== */
.ds-inferior { display: none; }
@media (min-width: 721px) {
  :root { --ancho-lateral: 88px; }
  .ds-app, .ds-app.is-colapsado { grid-template-columns: var(--ancho-lateral) minmax(0, 1fr); }
  .ds-app.is-colapsado .ds-lateral { display: flex; }
  .ds-lateral { position: sticky; inset: auto; top: 0; transform: none; width: auto; align-items: center; padding: var(--e3) var(--e2); overflow-x: hidden; box-shadow: none; }
  .ds-marca { height: auto; padding: var(--e1) 0 var(--e3); justify-content: center; }
  .ds-logo { width: 40px; height: 40px; border-radius: 12px; font-size: var(--t16); }
  .ds-marca-txt { display: none; }
  .ds-lateral nav { width: 100%; }
  .ds-nav-grupo { font-size: 0; height: 1px; padding: 0; background: var(--borde); margin: var(--e2) var(--e3); }
  nav > .ds-nav-grupo:first-child { display: none; }
  .ds-nav { gap: 4px; }
  .ds-nav a { flex-direction: column; justify-content: center; gap: 4px; height: auto; min-height: 56px; padding: var(--e2) 2px; font-size: 11px; font-weight: var(--p600); text-align: center; white-space: normal; line-height: 1.15; border-radius: 12px; color: var(--texto-2); overflow-wrap: anywhere; }
  .ds-nav a .ds-icono { width: 20px; height: 20px; color: inherit; }
  .ds-nav a:hover { color: var(--texto); }
  .ds-nav a[aria-current="page"] { background: var(--marca-suave); color: var(--marca); }
  .ds-lateral-pie { width: 100%; align-items: center; }
  .ds-pie-fila { flex-direction: column; gap: var(--e2); }
  .ds-segmento--tema { flex-direction: column; }
  .ds-lateral-pie .ds-btn { flex-direction: column; height: auto; padding: var(--e2) var(--e1); font-size: 11px; gap: 2px; }
  .ds-btn.ds-menu-boton { display: none; }
  .ds-barra { height: 64px; padding: 0 var(--e6); }
  .ds-barra-titulo { display: none; }
  .ds-barra-centro { justify-content: flex-start; }
  .ds-global { height: 48px; max-width: 640px; border-radius: 12px; }
  .ds-global input { font-size: var(--t16); }
  .ds-contenido { max-width: 1360px; padding: var(--e5) var(--e6) var(--e7); }
}
@media (max-width: 720px) {
  body.ds { padding-bottom: 76px; }
  .ds-btn.ds-menu-boton { display: none; }
  .ds-inferior { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; align-items: flex-end; background: var(--lateral-fondo); border-top: var(--borde-ancho) solid var(--borde); padding: 0 var(--e1); }
  .ds-inferior a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 60px; font-size: 11px; font-weight: var(--p600); color: var(--texto-2); }
  .ds-inferior a:hover { text-decoration: none; } .ds-inferior a[aria-current="page"] { color: var(--marca); }
  .ds-inferior .ds-inferior-escanear { flex: 0 0 76px; }
  .ds-inferior-escanear span { width: 56px; height: 56px; border-radius: 50%; background: var(--marca); color: var(--sobre-marca); display: flex; align-items: center; justify-content: center; margin-top: -24px; box-shadow: 0 0 0 5px var(--lateral-fondo); }
  .ds-global { height: 48px; border-radius: 12px; }
  .ds-toasts { bottom: 84px; }
}

/* barra apilada por etapa (proporcional: sirve igual para 14 que para 3 000) */
.ds-apilada { display: flex; height: 36px; border-radius: 12px; overflow: hidden; gap: 2px; background: var(--fondo); }
.ds-apilada--fina { height: 12px; border-radius: 999px; }
.ds-apilada i { display: block; min-width: 3px; flex: var(--n, 1) 1 0; background: var(--c, var(--marca)); }
.ds-apilada i.ds-vacia { background: transparent; box-shadow: inset 0 0 0 1.5px var(--texto-2); opacity: .55; }
.ds-c-reg { --c: #34507a; } .ds-c-clo { --c: #3f6db5; } .ds-c-tes { --c: #4d86e0; } .ds-c-lim { --c: #78acff; }
.ds-c-enc { --c: #2fb877; } .ds-c-ven { --c: #7c8da5; } .ds-c-sop { --c: #e0a526; } .ds-c-des { --c: #e5534b; }
.ds-leyenda { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--e2); }
.ds-leyenda a, .ds-leyenda div { display: flex; flex-direction: column; gap: 2px; min-height: 64px; padding: var(--e3); border: var(--borde-ancho) solid var(--borde); border-radius: 12px; background: var(--superficie-2); color: var(--texto); }
.ds-leyenda a:hover { text-decoration: none; border-color: var(--marca); }
.ds-leyenda span { display: flex; align-items: center; gap: var(--e2); font-size: var(--t13); color: var(--texto-2); } .ds-leyenda span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--texto-2)); }
.ds-leyenda b { font-size: var(--t24); font-variant-numeric: tabular-nums; line-height: 1.1; } .ds-leyenda small { color: var(--texto-2); font-size: var(--t12); }
/* héroe: una cifra grande con su base */
.ds-heroe { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e2) var(--e4); }
.ds-heroe-n { font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ds-heroe-de { font-size: var(--t20); font-weight: var(--p600); color: var(--texto-2); }
.ds-heroe-pct { font-size: var(--t20); font-weight: 800; } .ds-heroe-pct--atencion { color: var(--atencion); } .ds-heroe-pct--ok { color: var(--ok); } .ds-heroe-pct--error { color: var(--error); }
/* siguiente paso (una sola acción principal) */
.ds-siguiente { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e5); border-radius: 16px; background: linear-gradient(180deg, var(--marca-suave), var(--superficie)); border: var(--borde-ancho) solid color-mix(in srgb, var(--marca) 45%, var(--borde)); }
.ds-siguiente .ds-etiqueta { font-size: var(--t12); font-weight: var(--p600); letter-spacing: .06em; text-transform: uppercase; color: var(--marca); }
.ds-siguiente h2 { font-size: var(--t20); line-height: 1.25; } .ds-siguiente .ds-btn { min-height: 48px; justify-content: center; }
/* decisiones: conteos que abren la lista ya filtrada */
.ds-decisiones { list-style: none; margin: 0; padding: 0; } .ds-decisiones a { display: flex; align-items: center; gap: var(--e4); min-height: 56px; padding: var(--e2) 0; border-top: var(--borde-ancho) solid var(--borde); color: var(--texto); }
.ds-decisiones li:first-child a { border-top: 0; } .ds-decisiones a:hover { text-decoration: none; background: var(--superficie-2); }
.ds-decisiones b { min-width: 56px; font-size: var(--t24); font-variant-numeric: tabular-nums; } .ds-decisiones .ds-error { color: var(--error); } .ds-decisiones .ds-atn { color: var(--atencion); } .ds-decisiones .ds-ok { color: var(--ok); }
.ds-decisiones span { flex: 1; } .ds-decisiones .ds-icono { color: var(--texto-2); }
.ds-etiqueta-sup { font-size: var(--t12); font-weight: var(--p600); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }
.ds-apilada svg { display: block; } .ds-apilada svg rect { fill: var(--c, var(--marca)); }
.ds-apilada svg rect.ds-c-vacia { fill: var(--texto-2); fill-opacity: .28; }
.ds-c-vacia { --c: var(--texto-2); }
.ds-leyenda-linea { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e1) var(--e5); font-size: var(--t13); }
.ds-leyenda-linea li { display: inline-flex; align-items: center; gap: var(--e2); }
.ds-punto-c { width: 12px; height: 12px; border-radius: 4px; background: var(--c); } .ds-punto-c.ds-c-vacia { background: transparent; box-shadow: inset 0 0 0 1.5px var(--texto-2); }
.ds-leyenda a span::before { background: var(--c); }
.ds-sub-caja .ds-progreso-barra { flex: none; }
@media (min-width: 721px) { .ds-lateral { padding-inline: var(--e1); } .ds-nav a { font-size: 10.5px; overflow-wrap: normal; word-break: normal; letter-spacing: -.1px; } }
.ds-stock-cel { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--e3); } .ds-medidor { width: 96px; height: 8px; }
.ds-etapas-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ds-etapas-lista li { display: grid; grid-template-columns: 130px 64px minmax(80px, 1fr) minmax(150px, auto); align-items: center; gap: var(--e3); min-height: 56px; border-top: var(--borde-ancho) solid var(--borde); }
.ds-etapas-lista li:first-child { border-top: 0; } .ds-etapa-nombre { display: flex; align-items: center; gap: var(--e2); font-weight: var(--p600); }
.ds-etapa-n { font-size: var(--t20); text-align: right; } .ds-etapas-lista .ds-progreso-barra { width: 100%; height: 10px; }
.ds-etapas-lista .ds-punto-c { background: var(--c); }
.ds-fila-sin-enlace { display: flex; align-items: center; gap: var(--e4); min-height: 56px; border-top: var(--borde-ancho) solid var(--borde); } .ds-fila-sin-enlace b { min-width: 56px; font-size: var(--t24); }
@media (max-width: 720px) { .ds-etapas-lista li { grid-template-columns: 1fr 56px; } .ds-etapas-lista .ds-progreso-barra { grid-column: 1 / -1; } .ds-etapas-lista li > a, .ds-etapas-lista li > span:last-child { grid-column: 1 / -1; } }
/* Códigos y series: siguiente código en grande */
.ds-mono-grande { font-family: var(--mono); font-size: 48px; letter-spacing: -.02em; } .ds-heroe-medio { font-size: var(--t24); }
.ds-heroe > .ds-crece { min-width: 240px; display: flex; flex-direction: column; gap: var(--e2); }
/* Testeo manual: las 16 comprobaciones como botones grandes (siguen siendo las mismas casillas; desmarcar = falla) */
.ds-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--e2); }
.ds-checks .ds-check { min-height: 56px; padding: 0 var(--e4); border: 1.5px solid color-mix(in srgb, var(--ok) 55%, var(--borde)); border-radius: 12px; background: var(--ok-fondo); font-weight: var(--p600); cursor: pointer; }
.ds-checks .ds-check:has(input:not(:checked)) { border-color: var(--error); background: var(--error-fondo); color: var(--error); }
.ds-checks .ds-check:has(input:not(:checked)) input { accent-color: var(--error); }
/* Ficha del equipo: recorrido por etapas */
.ds-recorrido-eq ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--e2); }
.ds-recorrido-eq li { display: flex; flex-direction: column; gap: var(--e1); color: var(--texto-2); }
.ds-rec-barra { height: 6px; border-radius: 999px; background: var(--borde); }
.ds-recorrido-eq li.is-hecha .ds-rec-barra { background: var(--marca); opacity: .6; } .ds-recorrido-eq li.is-hecha b { color: var(--texto); }
.ds-recorrido-eq li.is-actual .ds-rec-barra { background: var(--marca); } .ds-recorrido-eq li.is-actual b { color: var(--marca); }
.ds-recorrido-eq small { font-size: var(--t12); }
@media (max-width: 720px) { .ds-recorrido-eq ol { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--e3); } }

/* ==========================================================================
   TEMA v4 · pulido global (todas las vistas): títulos, tarjetas, tablas, formularios, pestañas, insignias
   ========================================================================== */
.ds h1 { font-size: 28px; font-weight: 800; letter-spacing: -.015em; }
.ds-tarjeta, .ds-tabla-caja, .ds-sub-caja { border-radius: 16px; }
.ds-tarjeta > h2:first-child, .ds-tarjeta-enc h2 { font-size: 18px; }
.ds-btn { border-radius: 10px; font-weight: var(--p600); }
.ds-btn:not(.ds-btn--sm):not(.ds-btn--icono) { min-height: 40px; }
.ds-input, .ds-select, .ds-textarea { border-radius: 10px; min-height: 44px; }
.ds-pistola { border-radius: 14px; border-width: 2px; min-height: 60px; }
.ds-pistola input { font-size: 20px; font-family: var(--mono); }
.ds-tabla th { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-2); background: var(--superficie-2); }
.ds-tabla td { height: 52px; border-bottom: var(--borde-ancho) solid var(--borde); }
.ds-tabla tbody tr:hover td { background: color-mix(in srgb, var(--marca) 6%, transparent); }
.ds-tabla td.ds-cod a, .ds-tabla td.ds-cod { font-weight: var(--p600); }
.ds-tabla-toolbar { padding: var(--e3) var(--e4); }
.ds-insignia { border-radius: 6px; font-weight: var(--p600); }
.ds-tabs [role="tab"] { min-height: 48px; font-weight: var(--p600); }
.ds-ajuste, .ds-ajustes > * { border-radius: 14px; }
.ds-alerta { border-radius: 12px; }
dialog.ds-modal, dialog.ds-panel { border-radius: 16px; }
.ds-kpi { border-radius: 14px; }
.ds-kpi-valor { font-variant-numeric: tabular-nums; }
/* cifras de resumen de cualquier vista (franja de datos con base y estado) */
.ds-franja-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--e2); }
.ds-franja-datos > div { display: flex; flex-direction: column; gap: 2px; padding: var(--e3) var(--e4); border: var(--borde-ancho) solid var(--borde); border-radius: 12px; background: var(--superficie); }
.ds-franja-datos span { font-size: var(--t12); font-weight: var(--p600); letter-spacing: .05em; text-transform: uppercase; color: var(--texto-2); }
.ds-franja-datos b { font-size: var(--t24); font-variant-numeric: tabular-nums; line-height: 1.15; } .ds-franja-datos small { color: var(--texto-2); font-size: var(--t12); }
.ds-franja-datos .ds-error { color: var(--error); } .ds-franja-datos .ds-atn { color: var(--atencion); } .ds-franja-datos .ds-ok { color: var(--ok); }
/* recorrido por estados (orden de soporte, compras, envíos…) */
.ds-recorrido-est ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--e2); }
.ds-recorrido-est li { display: flex; flex-direction: column; gap: var(--e1); color: var(--texto-2); font-size: var(--t13); }
.ds-recorrido-est .ds-rec-barra { height: 6px; border-radius: 999px; background: var(--borde); }
.ds-recorrido-est li.is-hecha .ds-rec-barra { background: var(--marca); opacity: .55; } .ds-recorrido-est li.is-hecha b { color: var(--texto); }
.ds-recorrido-est li.is-actual .ds-rec-barra { background: var(--marca); } .ds-recorrido-est li.is-actual b { color: var(--marca); }
/* Formularios: secciones numeradas en tarjeta (solo presentación) */
.ds-form { counter-reset: seccion; }
.ds-form .ds-seccion-form { counter-increment: seccion; background: var(--superficie); border: var(--borde-ancho) solid var(--borde); border-radius: 16px; padding: var(--e5); }
.ds-form .ds-seccion-form > h3 { display: flex; align-items: center; gap: var(--e3); font-size: var(--t16); margin-bottom: var(--e4); }
.ds-form .ds-seccion-form > h3::before { content: counter(seccion); width: 28px; height: 28px; border-radius: 50%; background: var(--marca-suave); color: var(--marca); display: inline-flex; align-items: center; justify-content: center; font-size: var(--t13); font-weight: 800; flex: none; }
.ds-form { display: flex; flex-direction: column; gap: var(--e4); }
.ds-form-pie { position: sticky; bottom: 0; background: color-mix(in srgb, var(--fondo) 92%, transparent); padding: var(--e3) 0; backdrop-filter: blur(6px); }
@media (max-width: 720px) { .ds-form-pie { bottom: 76px; } }
/* Soporte: selector de vistas y tablero por estado */
.ds-vistas { display: inline-flex; gap: 2px; padding: 3px; background: var(--superficie); border: var(--borde-ancho) solid var(--borde); border-radius: 10px; align-self: flex-start; flex-wrap: wrap; }
.ds-vistas a { display: inline-flex; align-items: center; gap: var(--e2); min-height: 40px; padding: 0 var(--e4); border-radius: 8px; color: var(--texto-2); font-weight: var(--p600); }
.ds-vistas a:hover { text-decoration: none; color: var(--texto); } .ds-vistas a[aria-current="page"] { background: var(--marca-suave); color: var(--marca); }
.ds-tablero { display: flex; gap: var(--e3); overflow-x: auto; padding-bottom: var(--e2); align-items: flex-start; }
.ds-carril { flex: 1 0 224px; min-width: 224px; display: flex; flex-direction: column; gap: var(--e2); }
.ds-carril-cab { display: flex; align-items: baseline; gap: var(--e2); padding: 0 var(--e1); border-bottom: 3px solid var(--borde); padding-bottom: var(--e2); } .ds-carril-cab b { flex: 1; font-size: var(--t14); } .ds-carril-n { font-size: var(--t20); font-weight: 800; }
.ds-os-tarjeta { display: flex; flex-direction: column; gap: var(--e1); padding: var(--e3); border-radius: 12px; background: var(--superficie); border: var(--borde-ancho) solid var(--borde); border-left: 5px solid var(--ok); color: var(--texto); min-height: 44px; }
.ds-os-tarjeta:hover { text-decoration: none; border-color: var(--marca); }
.ds-os--atencion { border-left-color: var(--atencion); } .ds-os--error { border-left-color: var(--error); }
.ds-os-linea { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); } .ds-os-tiempo { font-weight: 800; font-variant-numeric: tabular-nums; }
.ds-os--atencion .ds-os-tiempo { color: var(--atencion); } .ds-os--error .ds-os-tiempo { color: var(--error); } .ds-os--ok .ds-os-tiempo { color: var(--ok); }
.ds-carril-mas { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px dashed var(--borde); border-radius: 12px; font-size: var(--t13); font-weight: var(--p600); text-align: center; padding: 0 var(--e2); }
.ds-carril-vacio { padding: var(--e3); }
.ds-leyenda-linea a { color: var(--texto); display: inline-flex; align-items: center; gap: var(--e2); } .ds-leyenda-linea a:hover { text-decoration: none; color: var(--marca); }
.ds-franja-datos a { font-size: var(--t13); font-weight: var(--p600); }
.ds-barra-bloque { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); background: var(--marca-suave); border-bottom: var(--borde-ancho) solid var(--borde); }
.ds-resumen-cambio { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e7); align-items: baseline; padding: var(--e4) var(--e5); border: var(--borde-ancho) solid color-mix(in srgb, var(--marca) 45%, var(--borde)); border-radius: 16px; background: var(--marca-suave); }
.ds-resumen-cambio .ds-heroe-n { font-size: 40px; }
/* Equipos: filtros con conteos a un costado (pantallas anchas); en pantallas chicas quedan las pastillas de siempre */
.ds-con-facetas { display: block; }
.ds-facetas { display: none; }
@media (min-width: 1180px) {
  .ds-con-facetas { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: var(--e5); align-items: start; }
  .ds-facetas { display: flex; flex-direction: column; gap: var(--e5); position: sticky; top: 80px; }
  .ds-facetas-contenido > .ds-etapas-chips { display: none; }
}
.ds-faceta { display: flex; flex-direction: column; gap: 2px; } .ds-faceta h2 { font-size: var(--t12); font-weight: var(--p600); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); padding: 0 var(--e3) var(--e2); }
.ds-faceta a { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); min-height: 40px; padding: 0 var(--e3); border-radius: 10px; color: var(--texto); }
.ds-faceta a:hover { text-decoration: none; background: var(--superficie-2); } .ds-faceta a[aria-current="true"] { background: var(--marca-suave); color: var(--marca); font-weight: var(--p600); }
.ds-faceta b { color: var(--texto-2); font-weight: var(--p500); font-size: var(--t13); } .ds-faceta a[aria-current="true"] b { color: var(--marca); }
/* listas de barras horizontales (clase, qué falla, etc.) */
.ds-barras-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ds-barras-lista a { display: grid; grid-template-columns: minmax(70px, 150px) minmax(60px, 1fr) 44px; align-items: center; gap: var(--e3); min-height: 44px; color: var(--texto); border-radius: 8px; }
.ds-barras-lista a:hover { text-decoration: none; background: var(--superficie-2); } .ds-barras-lista .ds-progreso-barra { width: 100%; height: 10px; } .ds-barras-lista .ds-num { text-align: right; font-weight: var(--p600); }
/* pasos numerados (importar) */
.ds-pasos-num { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--e3); }
.ds-pasos-num li { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); border: var(--borde-ancho) solid var(--borde); border-radius: 12px; background: var(--superficie); }
.ds-pasos-num b { width: 28px; height: 28px; border-radius: 50%; background: var(--marca-suave); color: var(--marca); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex: none; }

/* TEMA v4 · pantallas públicas: ingreso dividido, teclado de PIN, error 404 */
.ds-publico--dividido { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); place-items: stretch; padding: 0; }
.ds-publico--dividido .ds-publico-caja { align-self: center; justify-self: center; padding: var(--e5) var(--e4); }
.ds-publico-lateral { display: flex; flex-direction: column; justify-content: space-between; gap: var(--e6); padding: 64px; background: linear-gradient(160deg, color-mix(in srgb, var(--marca) 28%, var(--fondo)), var(--fondo) 75%); }
.ds-lateral-marca { display: flex; align-items: center; gap: var(--e3); font-size: var(--t20); }
.ds-publico-lateral h2 { font-size: 40px; line-height: 1.1; letter-spacing: -.02em; max-width: 460px; margin: 0 0 var(--e4); }
.ds-publico-lateral p { color: var(--texto-2); font-size: var(--t16); line-height: 1.6; max-width: 420px; margin: 0; }
.ds-publico-lateral small { color: var(--texto-2); }
.ds-publico--dividido .ds-publico-marca { display: none; }
@media (max-width: 900px) { .ds-publico--dividido { display: grid; grid-template-columns: 1fr; place-items: center; padding: var(--e5) var(--e4); } .ds-publico-lateral { display: none; } .ds-publico--dividido .ds-publico-marca { display: flex; } }
.ds-login h1 { font-size: 28px; margin: 0; }
.ds-input--pin { letter-spacing: .4em; font-size: var(--t20); }
.ds-teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2); }
.ds-tecla { min-height: 60px; border-radius: 12px; border: var(--borde-ancho) solid var(--borde); background: var(--superficie); color: var(--texto); font-size: 22px; font-weight: var(--p600); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ds-tecla:hover { border-color: var(--marca); } .ds-tecla:active { background: var(--marca-suave); } .ds-tecla--sec { color: var(--texto-2); }
.ds-error-codigo { font-size: 88px; font-weight: 800; color: var(--borde); letter-spacing: -.03em; }
.ds-fchips { display: inline-flex; flex-wrap: wrap; gap: var(--e2); }
.ds-fchip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--e4); border-radius: 999px; border: var(--borde-ancho) solid var(--borde); background: var(--superficie); color: var(--texto-2); font-weight: var(--p600); }
.ds-fchip:hover { text-decoration: none; color: var(--texto); } .ds-fchip.is-activo { background: var(--marca-suave); border-color: var(--marca); color: var(--marca); }