/* ============================================================================
   ds.css — SISTEMA DE DISEÑO COMPARTIDO entre el panel y la web/app (#81, 14-oct-2026).
   Un solo archivo para los componentes base: tokens (colores, radios, sombras, tipografía),
   botones, campos de formulario, tarjetas, chips, pills, títulos de sección y tablas.
   · Nace en css/ds.css (panel). sync-buscador.sh lo copia a clientes/css/ds.css y de ahí a
     portal/css (la web). Se carga DESPUÉS de las hojas propias de cada superficie, así lo que
     define acá manda sobre lo viejo: tocar un componente base acá cambia en los dos lados.
   · Lo que NO es base (grillas de resultados, orden de los formularios, módulos de
     configuración, el mapa, la barra de la app) sigue en cada hoja: eso es a propósito (#81 §3).
   · Densidad: el panel es compacto (escritorio) y la app es cómoda (celular). Las medidas
     salen de tokens que cada <body> ajusta: body.ds-panel / body.ds-app.
   ========================================================================== */
:root{
  /* color */
  --bg:#F6F6F4; --surface:#fff; --suave:#F4F3F0;
  --ink:#161615; --ink-2:#4C4C49; --ink-3:#8B8B86;
  --line:#E7E7E2; --line-2:#D9D9D3;
  --accent:#ED1D32; --accent-dark:#C21829; --accent-soft:#FEEDEF;
  /* el rojo de SELECCIÓN es un pelo más oscuro que el del logo: el texto blanco llega a 4,5:1 */
  --sel:#D91B2E; --sel-app:#D91B2E;
  --ok:#1E8E4E; --ok-text:#17743F; --ok-soft:#E9F5EE;
  --warn:#B77414; --warn-text:#96600F; --warn-soft:#FCF3E1;
  --side:#151514; --side-ink:#B9B9B2; --side-line:#2A2A28;
  /* forma */
  --r:14px; --r-s:10px; --r-card:18px; --r-pill:14px;
  --shadow:0 1px 2px rgba(22,22,21,.04),0 6px 18px rgba(22,22,21,.06);
  --shadow-alta:0 10px 30px rgba(22,22,21,.12);
  --sombra-sel:0 4px 14px rgba(217,27,46,.22);
  /* letra */
  --font-ui:'Inter',system-ui,-apple-system,sans-serif;
  --font-display:'Jost',sans-serif;
  /* densidad (el panel por defecto; la app la sube) */
  --ds-texto:14px; --ds-ctrl:40px; --ds-ctrl-mini:32px; --ds-btn:13px; --ds-btn-mini:12px; --ds-label:12.5px; --ds-pad:9px 12px; --ds-rotulo:11px;
}
body.ds-app{--ds-texto:17px; --ds-ctrl:48px; --ds-ctrl-mini:40px; --ds-btn:16.5px; --ds-btn-mini:14px; --ds-label:15px; --ds-pad:12px 13px; --ds-rotulo:12.5px}

/* ---------- tipografía ---------- */
.ds-panel h1,.ds-panel h2,.ds-panel h3,.ds-app h1,.ds-app h2,.ds-app h3{font-family:var(--font-display);font-weight:500;letter-spacing:.03em}
.ds-panel .tb-titulo h1{font-weight:500}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:var(--ds-ctrl);padding:0 16px;
  border-radius:var(--r);font-family:var(--font-display);font-weight:600;font-size:var(--ds-btn);letter-spacing:.04em;
  line-height:1.15;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,color .15s,filter .15s,box-shadow .15s}
.btn:active{filter:brightness(.96)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-rojo{background:var(--sel);color:#fff;box-shadow:var(--sombra-sel)}
.btn-rojo:hover{background:var(--accent-dark)}
.btn-negro{background:var(--ink);color:#fff}
.btn-borde{border:1px solid var(--line-2);background:var(--surface);color:var(--ink)}
.btn-borde:hover{border-color:var(--ink-3)}
.btn-mini{min-height:var(--ds-ctrl-mini);padding:0 12px;font-size:var(--ds-btn-mini)}
.lnk{font-family:var(--font-ui);color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px;font-weight:600;font-size:inherit;letter-spacing:0}

/* ---------- campos de formulario ---------- */
.f-campo{display:flex;flex-direction:column;gap:6px}
.f-campo>label{font-size:var(--ds-label);font-weight:600;color:var(--ink-2)}
.f-campo input,.f-campo select,.f-campo textarea,.toolbar select,.toolbar .mini-num,.pill-sel select{
  border:1px solid var(--line-2);border-radius:var(--r-s);padding:var(--ds-pad);background:var(--surface);color:var(--ink);
  font-family:var(--font-ui);font-size:var(--ds-texto);outline:none;width:100%;transition:border-color .14s,box-shadow .14s}
.toolbar select,.toolbar .mini-num{width:auto;min-height:var(--ds-ctrl)}
.f-campo input:focus,.f-campo select:focus,.f-campo textarea:focus,.toolbar select:focus,.pill-sel select:focus{
  border-color:var(--ink);box-shadow:0 0 0 3px rgba(22,22,21,.07)}
.f-campo input::placeholder,.f-campo textarea::placeholder{color:var(--ink-3)}
.buscador{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-s);padding:0 12px;min-height:var(--ds-ctrl)}
.buscador input{border:none;outline:none;width:100%;background:none;font-size:var(--ds-texto)}
.buscador svg{width:16px;height:16px;color:var(--ink-3);flex:none}
.err-form{color:var(--accent-dark);font-size:var(--ds-label);min-height:18px;margin-top:6px}

/* ---------- tarjetas y secciones ---------- */
.card,.pt-card,.card-mini{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.sec-head h2{font-family:var(--font-display);font-weight:500;font-size:16px;letter-spacing:.04em}
/* etiqueta pequeña en mayúsculas: encabezados de tabla, títulos de sección de fichas, rótulos de filas de pills */
th,.fs>h4,.pills-l,.pt-sel span,.spec span,.of-grupo{font-family:var(--font-ui);font-size:var(--ds-rotulo);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- chips (estados) ---------- */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap;font-family:var(--font-ui);letter-spacing:0;text-transform:none}
.chip.ok{background:var(--ok-soft);color:var(--ok-text)}
.chip.warn{background:var(--warn-soft);color:var(--warn-text)}
.chip.rojo{background:var(--accent-soft);color:var(--accent-dark)}
.chip.neutro{background:var(--suave);color:var(--ink-2)}
.chip.oscuro{background:var(--ink);color:#fff}
.chip.linea{background:none;border:1px solid var(--line-2);color:var(--ink-2);font-weight:500}

/* ---------- pills (selección a un clic): el panel usa .pill, el buscador de la app .pt-b ---------- */
.pill,.pt-b{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--ds-ctrl);padding:0 14px;
  border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);
  font-family:var(--font-display);font-weight:600;font-size:var(--ds-btn);letter-spacing:.03em;text-transform:uppercase;line-height:1.15;
  text-align:center;cursor:pointer;transition:background .14s,color .14s,border-color .14s,transform .1s,box-shadow .14s}
.pill:active,.pt-b:active{transform:scale(.98)}
.pill i,.pt-b i{font-style:normal;font-family:var(--font-ui);font-size:12px;font-weight:600;color:var(--ink-2);letter-spacing:0;background:var(--suave);border-radius:20px;padding:2px 7px;line-height:1.2}
.pill.on,.pt-b.on{background:var(--sel);color:#fff;border-color:var(--sel);box-shadow:var(--sombra-sel)}
.pill.on i,.pt-b.on i{color:#fff;background:rgba(255,255,255,.2)}
.pill.off,.pt-b.off{border-color:var(--line);color:var(--ink-3)}
.pill.off i,.pt-b.off i{color:var(--ink-3)}
.pill.on.off,.pt-b.on.off{background:var(--sel);border-color:var(--sel);color:#fff}
.pill.on.off i,.pt-b.on.off i{color:#fff;background:rgba(255,255,255,.2)}
@media (hover:hover) and (pointer:fine){
  .pill:hover,.pt-b:hover{border-color:var(--ink-3);box-shadow:var(--shadow)}
  .pill.on:hover,.pt-b.on:hover{background:var(--sel);color:#fff;border-color:var(--sel)}
}
.pills{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pills.grilla .pill{flex:1 1 150px}
.bq-pills .pill{min-height:var(--ds-ctrl-mini);padding:0 10px;font-size:var(--ds-btn-mini);flex:1 1 110px}
.bq-pills.nums .pill{flex:0 0 auto;min-width:40px}

/* ---------- barras de monto ---------- */
.bq-barra{width:100%;margin:10px 0 4px;accent-color:var(--accent);cursor:pointer;height:28px}
.bq-rango-l{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-3)}

/* ---------- tablas (sólo el estilo: tipografía, bordes, colores; no las columnas) ---------- */
.ds-panel table{width:100%;border-collapse:collapse;font-size:13px}
.ds-panel th{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.ds-panel td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.ds-panel .tabla-wrap{overflow-x:auto;border-radius:var(--r-card)}

/* ---------- modal ---------- */
.modal{border-radius:var(--r-card);box-shadow:var(--shadow-alta)}
.modal-head h3{font-family:var(--font-display);font-weight:500;font-size:18px;letter-spacing:.03em}