/* ==========================================================================
   SISTEMA RP — Estilos base
   Identidad tomada de catalogo.promowatch.com.mx (tokens equivalentes).
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* Marca: rojo institucional de promowatch.com.mx (--pw-rojo #E10600) y negro #050505 */
  --brand-red: #e10600;
  --color-black: #050505;
  --color-white: #ffffff;
  --accent: var(--brand-red);          /* bordes y acentos de marca (no es color de error) */
  --accent-strong: #b30500;
  --accent-soft: rgba(225, 6, 0, 0.06);
  --on-accent: #ffffff;

  /* ---- Tema claro (predeterminado) ---- */
  --bg: #ffffff;
  --bg-alt: #f4f4f2;
  --surface: #ffffff;
  --surface-2: #fcfcfc;
  --hover: #f7f7f7;
  --field-bg: #ffffff;
  --border: #d9d9d9;
  --border-soft: #ececec;
  --border-strong: #b5b5b5;
  --ink: #050505;
  --ink-soft: #5f5f5f;
  --ink-mute: #8f8f8f;
  --nav-mute: #b3b3b3;
  --fill-strong: #1a1a1a;              /* barras de avance, botón principal, avisos */
  --fill-strong-hover: #000000;
  --on-fill-strong: #ffffff;
  --shadow: rgba(0, 0, 0, 0.12);
  --overlay: rgba(0, 0, 0, 0.45);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23050505' fill='none' stroke-width='1.3'/%3E%3C/svg%3E");

  /* Estados funcionales (clientes, prioridades, pendientes): se conservan */
  --success: #00843d;
  --success-soft: rgba(0, 132, 61, 0.08);
  --success-border: #bfe3cc;
  --warning: #a35f00;
  --warning-soft: rgba(163, 95, 0, 0.1);
  --error: #b3261e;
  --error-soft: rgba(179, 38, 30, 0.08);
  --error-row: #fff8f7;
  --info: #1f4f8f;
  --info-soft: rgba(31, 79, 143, 0.08);
  --neutral-soft: rgba(0, 0, 0, 0.05);
  --potencial-bg: #e7f0fb;
  --potencial-ink: #1f4f8a;
  --potencial-border: #b9d0ee;
  --prueba: #6b2fb3;

  /* Tipografía */
  --font-ui: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Barlow Condensed", "Montserrat", sans-serif;

  /* Forma */
  --radius: 7px;
  --radius-lg: 14px;
  --header-h: 60px;
  --max-width: 1320px;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* ---- Tema oscuro: automático según la preferencia del dispositivo (cambia sin recargar) ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #e10600;
    --accent-strong: #ff4d45;           /* versión legible del rojo de marca sobre negro */
    --accent-soft: rgba(225, 6, 0, 0.14);
    --bg: #050505;
    --bg-alt: #141414;
    --surface: #0f0f0f;
    --surface-2: #131313;
    --hover: #1b1b1b;
    --field-bg: #0a0a0a;
    --border: #2f2f2f;
    --border-soft: #222222;
    --border-strong: #4d4d4d;
    --ink: #f2f2f2;
    --ink-soft: #a9a9a9;
    --ink-mute: #7c7c7c;
    --fill-strong: #ededed;
    --fill-strong-hover: #ffffff;
    --on-fill-strong: #050505;
    --shadow: rgba(0, 0, 0, 0.6);
    --overlay: rgba(0, 0, 0, 0.7);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23e0e0e0' fill='none' stroke-width='1.3'/%3E%3C/svg%3E");
    --success: #4cc38a;
    --success-soft: rgba(76, 195, 138, 0.14);
    --success-border: #1f5a3c;
    --warning: #f0b450;
    --warning-soft: rgba(240, 180, 80, 0.14);
    --error: #ff6b61;
    --error-soft: rgba(255, 107, 97, 0.14);
    --error-row: rgba(255, 107, 97, 0.07);
    --info: #86b4ff;
    --info-soft: rgba(134, 180, 255, 0.14);
    --neutral-soft: rgba(255, 255, 255, 0.08);
    --potencial-bg: rgba(134, 180, 255, 0.14);
    --potencial-ink: #9cc2ff;
    --potencial-border: #2d4d7a;
    --prueba: #9b6bd9;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
strong, b { font-weight: 600; }
[hidden] { display: none !important; }

/* ---------- Encabezado (igual que el catálogo) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  height: var(--header-h);
  background: var(--color-black);
  color: var(--color-white);
  border-bottom: 2px solid var(--brand-red);
}
.site-header__inner {
  height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  --header-gap: 28px;
  display: flex; align-items: center; gap: var(--header-gap);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; flex-shrink: 0; }
.brand-logo { height: 22px; width: auto; display: block; }
.brand-text { font-weight: 700; letter-spacing: .02em; }
.brand-sep { width: 1px; height: 18px; background: #444; }
.brand-app { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: .04em; }

.site-nav { display: flex; align-items: center; gap: 22px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a {
  font-size: 12.5px; font-weight: 400; color: var(--nav-mute);
  text-decoration: none; white-space: nowrap;
  padding: 4px 0; border-bottom: 1px solid transparent;
  transition: color .15s var(--ease);
}
.site-nav a:hover { color: #fff; }
.site-nav a.active { color: #fff; border-bottom-color: var(--accent); }

.header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.icon-btn {
  background: transparent; border: 0; color: #fff; cursor: pointer;
  width: 36px; height: 36px; border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: #1f1f1f; }
.icon-btn svg { width: 18px; height: 18px; }
.search-trigger {
  display: flex; align-items: center; gap: 8px;
  background: #141414; border: 1px solid #2a2a2a; color: var(--nav-mute);
  border-radius: var(--radius); padding: 7px 10px; cursor: pointer; font-size: 12.5px;
}
.search-trigger:hover { color: #fff; border-color: #444; }
.search-trigger svg { width: 15px; height: 15px; }
.kbd { font-size: 10.5px; border: 1px solid #3a3a3a; border-radius: 4px; padding: 0 5px; color: #888; }
.nav-toggle { display: none; }

/* ---------- Aviso de demostración ---------- */
.demo-banner {
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 12px; font-weight: 500;
  border-bottom: 1px solid var(--accent);
}
.demo-banner__inner {
  max-width: var(--max-width); margin: 0 auto; padding: 7px 24px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.demo-banner button {
  margin-left: auto; background: none; border: 0; color: var(--ink);
  text-decoration: underline; cursor: pointer; font-size: 12px; font-weight: 500; padding: 0;
}

/* ---------- Sub-navegación por área ---------- */
.subnav { border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: var(--header-h); z-index: 30; }
.subnav__inner {
  max-width: var(--max-width); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: stretch; gap: 4px; overflow-x: auto; scrollbar-width: none;
}
.subnav__inner::-webkit-scrollbar { display: none; }
.subnav a {
  display: flex; align-items: center; white-space: nowrap;
  padding: 13px 12px; font-size: 13px; font-weight: 400;
  color: var(--ink-soft); text-decoration: none; border-bottom: 2px solid transparent;
}
.subnav a:hover { color: var(--ink); }
.subnav a.active { color: var(--ink); font-weight: 500; border-bottom-color: var(--accent); }
.subnav__group {
  display: flex; align-items: center; padding: 0 6px 0 14px; margin-left: 8px;
  border-left: 1px solid var(--border-soft);
  font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute);
}
.subnav__group:first-child { border-left: 0; margin-left: 0; padding-left: 0; }

/* ---------- Página ---------- */
.page { max-width: var(--max-width); margin: 0 auto; padding: 28px 24px 80px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 4px; }
.page-title { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1; margin: 0; letter-spacing: .005em; }
.page-desc { margin: 8px 0 0; color: var(--ink-soft); max-width: 680px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.section-title { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); margin: 30px 0 12px; display: flex; align-items: center; gap: 10px; }
.section-title .count { color: var(--ink-mute); font-weight: 500; }
.section-title a { margin-left: auto; font-size: 11px; text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 500; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg); color: var(--ink);
  font-size: 12.5px; font-weight: 500; padding: 9px 14px; cursor: pointer;
  text-decoration: none; white-space: nowrap; transition: background .15s var(--ease), border-color .15s var(--ease);
}
.btn:hover { border-color: var(--border-strong); background: var(--hover); }
.btn svg { width: 15px; height: 15px; }
.btn-primary { background: var(--fill-strong); color: var(--on-fill-strong); border-color: var(--fill-strong); }
.btn-primary:hover { background: var(--fill-strong-hover); border-color: var(--accent); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-accent:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--bg-alt); border-color: transparent; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn[disabled], .btn.is-disabled { opacity: .45; cursor: not-allowed; }
.btn[disabled]:hover { border-color: var(--border); background: var(--bg); }
.btn-primary[disabled]:hover { background: var(--fill-strong); border-color: var(--fill-strong); }
.btn .tag-pending { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }

/* ---------- Tarjetas ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; }
.card-title { font-size: 15px; font-weight: 500; margin: 0 0 4px; }
.card-sub { color: var(--ink-soft); font-size: 12.5px; margin: 0; }
.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; align-items: start; }

/* KPI */
.kpi { display: block; text-decoration: none; }
a.kpi:hover { border-color: var(--accent); }
.kpi__label { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.kpi__value { font-size: 24px; font-weight: 600; margin-top: 6px; letter-spacing: -.01em; }
.kpi__hint { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.kpi--alert .kpi__value { color: var(--error); }

/* Accesos rápidos */
.quick { display: flex; flex-direction: column; gap: 10px; text-decoration: none; cursor: pointer; text-align: left; }
.quick:hover { border-color: var(--accent); }
.quick__icon { width: 34px; height: 34px; border-radius: 50%; background: var(--bg-alt); display: flex; align-items: center; justify-content: center; }
.quick__icon svg { width: 17px; height: 17px; }
.quick__label { font-weight: 500; font-size: 13.5px; }
.quick__area { font-size: 11px; color: var(--ink-soft); }

/* ---------- Etiquetas (badge del catálogo) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9.9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 20px; white-space: nowrap;
  background: var(--neutral-soft); color: var(--ink-soft);
}
.badge--success { background: var(--success-soft); color: var(--success); }
.badge--warning { background: var(--warning-soft); color: var(--warning); }
.badge--error { background: var(--error-soft); color: var(--error); }
.badge--info { background: var(--info-soft); color: var(--info); }
.badge--dark { background: var(--fill-strong); color: var(--on-fill-strong); }
.badge--demo { background: transparent; color: var(--accent-strong); border: 1px dashed var(--accent); padding: 2px 7px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; border: 1px solid var(--border-strong); }

/* ---------- Barra de herramientas / búsqueda ---------- */
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.search { position: relative; flex: 1; min-width: 220px; max-width: 420px; }
.search svg { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--ink-soft); }
.search input {
  width: 100%; border: 0; border-bottom: 1px solid var(--border); background: transparent;
  padding: 9px 4px 9px 24px; outline: none; font-size: 13.5px;
}
.search input:focus { border-bottom-color: var(--accent); }
.select {
  border: 0; border-bottom: 1px solid var(--border); background: transparent;
  padding: 9px 22px 9px 4px; font-size: 13px; cursor: pointer; outline: none;
  appearance: none; -webkit-appearance: none;
  background-image: var(--select-arrow);
  background-repeat: no-repeat; background-position: right 4px center;
}
.select:focus { border-bottom-color: var(--accent); }
.select option, .field select option { background: var(--surface); color: var(--ink); }
.toolbar__count { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-left: auto; }

/* ---------- Tabla ---------- */
.table-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; background: var(--surface); }
table.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
  text-align: left; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap;
}
.table td { padding: 11px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr.clickable { cursor: pointer; }
.table tbody tr.clickable:hover td { background: var(--hover); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .muted, .muted { color: var(--ink-soft); }
.table .strong { font-weight: 500; }
.table .mono, .mono { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--ink-soft); letter-spacing: .02em; }
.cell-main { font-weight: 500; }
.cell-sub { font-size: 11.5px; color: var(--ink-soft); }
.empty { padding: 36px 20px; text-align: center; color: var(--ink-soft); }

/* ---------- Pendiente / por definir ---------- */
.pending-box {
  border: 1px dashed var(--border-strong); border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: var(--radius);
  padding: 14px 16px; color: var(--ink-soft); font-size: 12.5px;
  display: flex; gap: 10px; align-items: flex-start;
}
.pending-box svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.pending-box strong { color: var(--ink); }
.pending-box svg { color: var(--accent); }
.tbd { color: var(--ink-mute); font-style: italic; font-size: 12px; }

/* ---------- Listas ---------- */
.list { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.list-item { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); text-decoration: none; }
.list-item:last-child { border-bottom: 0; }
a.list-item:hover, .list-item.clickable:hover { background: var(--hover); cursor: pointer; }
.list-item__body { flex: 1; min-width: 0; }
.list-item__title { font-weight: 500; font-size: 13px; }
.list-item__meta { font-size: 11.5px; color: var(--ink-soft); }
.list-item__side { text-align: right; font-size: 12px; white-space: nowrap; }

/* Pares clave-valor */
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 14px; font-size: 13px; margin: 0; }
.kv dt { color: var(--ink-soft); }
.kv dd { margin: 0; }

/* Barra de avance */
.progress { height: 6px; border-radius: 6px; background: var(--bg-alt); overflow: hidden; min-width: 80px; }
.progress > span { display: block; height: 100%; background: var(--fill-strong); border-radius: 6px; }
.progress--accent > span { background: var(--accent); }

/* Tablero (kanban) */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.board-col { background: var(--bg-alt); border-radius: var(--radius); padding: 10px; min-height: 200px; }
.board-col__head { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 10px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); }
.board-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-bottom: 8px; cursor: pointer; }
.board-card:hover { border-color: var(--accent); }
.board-card__title { font-weight: 500; font-size: 13px; margin: 4px 0 2px; }

/* Barras simples (reportes) */
.bars { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 110px 1fr 110px; gap: 10px; align-items: center; font-size: 12.5px; }
.bar-track { height: 10px; background: var(--bg-alt); border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--fill-strong); border-radius: 3px; }

/* ---------- Panel lateral (como "Mi selección" del catálogo) ---------- */
.drawer-overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 80; opacity: 0; transition: opacity .2s var(--ease); }
.drawer-overlay.open { opacity: 1; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(560px, 100vw);
  background: var(--bg); display: flex; flex-direction: column; border-left: 2px solid var(--accent);
  transform: translateX(100%); transition: transform .25s var(--ease);
  box-shadow: -10px 0 30px var(--shadow);
}
.drawer.open { transform: none; }
.drawer--wide { width: min(820px, 100vw); }
.drawer__head { padding: 20px 24px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: 10px; }
.drawer__title { font-size: 19px; font-weight: 600; margin: 0; }
.drawer__close { margin-left: auto; background: none; border: 0; cursor: pointer; font-size: 22px; line-height: 1; color: var(--ink-soft); padding: 2px 6px; }
.drawer__body { padding: 20px 24px; overflow-y: auto; flex: 1; }
.drawer__foot { padding: 14px 24px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* Formularios */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 12px; font-weight: 500; }
.field label .opt { color: var(--ink-mute); font-weight: 400; }
.field input, .field select, .field textarea {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 9px 11px; font-size: 13.5px; background: var(--field-bg); color: var(--ink); outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.field input[disabled], .field select[disabled], .field textarea[disabled], .field input[readonly] { background: var(--bg-alt); color: var(--ink-soft); cursor: not-allowed; }
.field input::placeholder, .field textarea::placeholder, .search input::placeholder { color: var(--ink-mute); }
.field textarea { min-height: 70px; resize: vertical; }
.field .help { font-size: 11px; color: var(--ink-soft); }
.form-section { grid-column: 1 / -1; font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); margin-top: 6px; }

/* Pestañas internas */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: 0 0 16px; overflow-x: auto; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 9px 12px; cursor: pointer; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
.tabs button.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 500; }

/* Toast */
.toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--fill-strong); color: var(--on-fill-strong); border-left: 3px solid var(--accent); padding: 11px 16px; border-radius: var(--radius); font-size: 13px; box-shadow: 0 8px 24px var(--shadow); max-width: min(520px, 92vw); animation: toast-in .2s var(--ease); }
.toast--pending { background: var(--surface); color: var(--ink); border: 1px solid var(--accent); }
.toast--pending b { color: var(--accent-strong); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* Búsqueda global */
.cmd-overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 100; display: flex; justify-content: center; align-items: flex-start; padding-top: 10vh; }
.cmd { width: min(640px, 94vw); background: var(--surface); border: 1px solid var(--border); border-top: 2px solid var(--accent); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 20px 60px var(--shadow); }
.cmd__input { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.cmd__input svg { width: 18px; height: 18px; color: var(--ink-soft); }
.cmd__input input { flex: 1; border: 0; outline: none; font-size: 16px; background: transparent; color: var(--ink); }
.cmd__results { max-height: 60vh; overflow-y: auto; }
.cmd__group { padding: 10px 18px 4px; font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-mute); }
.cmd__item { display: flex; align-items: center; gap: 12px; padding: 9px 18px; cursor: pointer; }
.cmd__item.sel, .cmd__item:hover { background: var(--bg-alt); }
.cmd__item-main { flex: 1; min-width: 0; }
.cmd__item-title { font-size: 13.5px; font-weight: 500; }
.cmd__item-sub { font-size: 11.5px; color: var(--ink-soft); }
.cmd__foot { padding: 8px 18px; border-top: 1px solid var(--border-soft); font-size: 11px; color: var(--ink-mute); }

/* Utilidades */
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.mt-0 { margin-top: 0; }
.mt { margin-top: 18px; }
.right { margin-left: auto; }
.text-error { color: var(--error); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.nowrap { white-space: nowrap; }
.small { font-size: 12px; }
.divider { height: 1px; background: var(--border-soft); margin: 18px 0; }
.footer-note { max-width: var(--max-width); margin: 0 auto; padding: 0 24px 30px; font-size: 11px; color: var(--ink-mute); }

/* ---------- Catálogo por marca ---------- */
.source-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-alt); }
.cat-groups { display: flex; flex-direction: column; gap: 10px; }
.cat-group { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.cat-group__head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: none; border: 0; cursor: pointer; text-align: left; }
.cat-group__head:hover { background: var(--hover); }
.cat-group__title { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; min-width: 0; }
.cat-group__name { font-size: 15px; font-weight: 500; }
.cat-group__chev { width: 16px; height: 16px; flex-shrink: 0; margin-left: auto; color: var(--ink-soft); transition: transform .15s var(--ease); }
.cat-group.is-open .cat-group__chev { transform: rotate(180deg); }
.cat-group.is-open .cat-group__head { border-bottom: 1px solid var(--border); }
.cat-group__body { max-height: 520px; overflow-y: auto; }
.cat-group__body .table th { position: sticky; top: 0; }
.cat-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 640px) { .cat-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .cat-kpis .card { padding: 12px; } .cat-kpis .kpi__label { font-size: 9px; } .cat-kpis .kpi__hint { display: none; } }
.sku-code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; font-weight: 600; white-space: pre; }
.id-code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; letter-spacing: .02em; }

/* ---------- Filtros tipo chip ---------- */
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 6px; }
.chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); border-radius: 20px; padding: 7px 14px; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.chip:hover { border-color: var(--accent); }
.chip.active { background: var(--fill-strong); border-color: var(--accent); color: var(--on-fill-strong); }
.chip__n { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; background: var(--bg-alt); color: var(--ink); }
.chip.active .chip__n { background: var(--surface); color: var(--ink); }
.contact-val { word-break: break-all; }
/* Sin correo ni teléfono: misma familia roja, con prioridad visual (sólido) */
.badge--critical { background: var(--error); color: var(--color-white); }
.chip--critical .chip__n { background: var(--error-soft); color: var(--error); }
.chip--critical.active .chip__n { background: var(--error); color: var(--color-white); }
.table tbody tr.row--critical td:first-child { box-shadow: inset 3px 0 0 var(--error); }
.pend-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 12px; background: var(--bg-alt); border-radius: var(--radius); }
.addr-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; font-size: 13px; }
.req { color: var(--error); font-weight: 600; }
.chip--ok .chip__n { background: var(--success-soft); color: var(--success); }
.chip--ok.active { background: var(--success); border-color: var(--success); }
.chip--ok.active .chip__n { background: var(--surface); color: var(--success); }
.chip--ok.active { color: var(--color-white); }
.avance { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-top: 18px; }
.avance__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.avance__valor { font-size: 20px; font-weight: 600; margin-top: 4px; }
.avance__valor .muted { font-size: 14px; font-weight: 400; }
.progress--ok > span { background: var(--success); }
.fiscal-form { background: var(--bg-alt); border-radius: var(--radius); padding: 14px; }
.fiscal-form input:not([disabled]) { background: var(--field-bg); }
.save-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.field input.is-error { border-color: var(--error); }
.form--nested { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
@media (max-width: 640px) { .form--nested { grid-template-columns: 1fr; } }
.only-mobile { display: none !important; }
@media (max-width: 640px) { .hide-mobile { display: none; } .only-mobile { display: flex !important; } }

/* ---------- Productos y precios ---------- */
.price-bar { gap: 14px; align-items: flex-end; }
.price-field { display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.price-field input { width: 110px; border: 0; border-bottom: 1px solid var(--border); padding: 8px 4px; font-size: 13.5px; background: transparent; outline: none; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink); }
.price-field input:focus { border-bottom-color: var(--ink); }
.price-field .select { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink); }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.seg button { background: var(--surface); border: 0; padding: 7px 12px; font-size: 12.5px; cursor: pointer; color: var(--ink-soft); }
.seg button + button { border-left: 1px solid var(--border); }
.seg button.active { background: var(--fill-strong); color: var(--on-fill-strong); box-shadow: inset 0 -2px 0 var(--accent); }
.precio { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Estados vacíos y cotizaciones ---------- */
.empty-state { border: 1px dashed var(--border); border-radius: var(--radius-lg); padding: 44px 24px; text-align: center; background: var(--surface-2); }
.empty-state__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--bg-alt); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.empty-state__icon svg { width: 22px; height: 22px; }
.empty-state h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.empty-state p { margin: 0 auto 16px; color: var(--ink-soft); max-width: 460px; }
.partida { display: grid; grid-template-columns: minmax(0, 2.2fr) 90px 130px 120px 32px; gap: 10px; align-items: end; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.partida .field input { width: 100%; }
.partida__imp > div { padding: 9px 0; text-align: right; }
.partida__del { margin-bottom: 4px; }
.partida__info { grid-column: 1 / -1; margin-top: -4px; }
@media (max-width: 640px) { .partida { grid-template-columns: 1fr 1fr; } .partida .field:first-child { grid-column: 1 / -1; } }

/* ---------- Seguimiento de cotizaciones ---------- */
.table tbody tr.row--hoy td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
.table tbody tr.row--critical td { background: var(--error-row); }
.chip--warn .chip__n { background: var(--warning-soft); color: var(--warning); }
.chip--warn.active { background: var(--warning); border-color: var(--warning); color: var(--color-black); }
.chip--warn.active .chip__n { background: var(--surface); color: var(--warning); }
.seg-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.seg-row-acc .btn { padding: 4px 8px; font-size: 11.5px; }

.quick__badge { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 600; padding: 1px 8px; border-radius: 10px; background: var(--fill-strong); color: var(--on-fill-strong); vertical-align: 1px; }

/* ---------- Envíos ---------- */
.req--guia { color: var(--warning); }
.paquete { display: grid; grid-template-columns: 80px repeat(4, minmax(0, 1fr)) 32px; gap: 10px; align-items: end; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.paquete .paquete__desc { grid-column: 1 / 5; }
.paquete .field:last-child { grid-column: 5 / 7; }
.paquete input { width: 100%; }
.check-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; font-size: 13px; }
.check-card.is-ok { border-color: var(--success-border); background: var(--success-soft); }
.check-card ul { margin: 8px 0 0; padding-left: 18px; color: var(--ink-soft); font-size: 12.5px; }
.dhl-panel { border: 1px dashed var(--border-strong); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 14px; background: var(--surface-2); }
.dhl-panel .dhl-btn { margin: 0 6px 6px 0; }
.checklist { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13px; }
@media (max-width: 640px) { .paquete { grid-template-columns: 1fr 1fr; } .paquete .paquete__desc, .paquete .field:last-child { grid-column: 1 / -1; } }

/* Pedidos de prueba */
.badge--prueba { background: var(--prueba); color: var(--color-white); letter-spacing: .08em; }

/* Buscador de clientes */
.cli-sug-wrap { position: relative; width: 100%; }
.cli-sug-wrap > input { width: 100%; }
.cli-sug { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 150; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 10px 28px var(--shadow); max-height: 320px; overflow-y: auto; min-width: 280px; }
.cli-sug__item { padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--border-soft); }
.cli-sug__item:last-child { border-bottom: 0; }
.cli-sug__item:hover, .cli-sug__item.is-sel { background: var(--bg-alt); }
.cli-sug__nombre { font-size: 13.5px; font-weight: 500; color: var(--ink); text-transform: none; letter-spacing: 0; }
.cli-sug__meta { font-size: 11.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; }
.cli-sug__vacio, .cli-sug__mas { padding: 10px 12px; font-size: 12px; color: var(--ink-soft); }

.condiciones { line-height: 1.6; font-size: 13px; border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px 14px; background: var(--surface-2); }
.condiciones strong { font-weight: 600; }

/* ---------- Responsivo ---------- */
@media (max-width: 1080px) {
  .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; }
  .search-trigger .label, .search-trigger .kbd { display: none; }
}
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed; top: var(--header-h); left: 0; right: 0; background: #000;
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 16px;
    display: none; overflow: visible;
  }
  .site-nav.open { display: flex; }
  .site-nav a { font-size: 15px; padding: 12px 0; border-bottom: 1px solid #1f1f1f; }
  .site-nav a.active { border-bottom-color: var(--accent); }
  .header-actions { margin-left: auto; }
  .brand-sep, .brand-app { display: none; }
}
@media (max-width: 640px) {
  .site-header__inner, .page, .subnav__inner, .demo-banner__inner, .footer-note { padding-left: 16px; padding-right: 16px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-title { font-size: 36px; }
  .kpi__value { font-size: 19px; }
  .demo-banner__inner { font-size: 11px; }
  .form { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 120px 1fr; }
  .bar-row { grid-template-columns: 80px 1fr 90px; }
}

/* Vista previa del documento de cotización (formato "Formato Cotización.pdf") */
.doc-preview { display: block; width: 100%; min-height: 420px; border: 1px solid var(--border, #d9d9d9); border-radius: 7px; background: #fff; }

/* Cliente Potencial a Futuro (clasificación manual; independiente de colores de contacto) */
.badge--potencial { background: var(--potencial-bg); color: var(--potencial-ink); border: 1px solid var(--potencial-border); }
.chip--potencial.active { background: var(--potencial-ink); border-color: var(--potencial-ink); color: var(--bg); }

/* ---------- Tema: enfoque, selección y barras de desplazamiento ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:focus-visible, .chip:focus-visible { outline-offset: 1px; }
::selection { background: var(--accent); color: var(--on-accent); }
.subnav, .drawer__foot { background: var(--bg); }
.drawer__head { background: var(--bg); }
.page-title { color: var(--ink); }
input, select, textarea { accent-color: var(--brand-red); }
/* Los documentos (cotización, OC) se muestran siempre sobre blanco, sin importar el tema */
.doc-preview { background: #ffffff; color-scheme: light; }
@media print {
  :root { color-scheme: light; }
  body { background: #ffffff; color: #000000; }
}

/* ---------- Inventarios por sucursal (Almacén Timepro) ---------- */
.inv-usuario { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: flex-end; padding: 12px 16px; margin-bottom: 14px; border-left: 3px solid var(--accent); }
.inv-usuario .field { min-width: 220px; margin: 0; }
.inv-usuario__permisos { flex: 1; min-width: 240px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.inv-sucursal { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: .02em; margin: 0 0 12px; }
.inv-ref { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; height: 30px; padding: 0 6px; border: 1px dashed var(--border-strong); border-radius: 5px; font-size: 10.5px; color: var(--ink-soft); background: var(--surface-2); white-space: nowrap; }
.th-orden { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; white-space: nowrap; }
.th-orden:hover, .th-orden:focus-visible { color: var(--accent-strong); }
.inv-variables { grid-template-columns: max-content 1fr; }
.inv-variables dd strong { font-size: 18px; }
label.check { display: flex; gap: 8px; align-items: center; font-size: 13px; grid-column: 1 / -1; }
/* Móvil: la tabla de existencias se presenta como tarjetas con TODAS las cantidades */
@media (max-width: 760px) {
  .inv-tabla { border: 0; background: transparent; overflow: visible; }
  .inv-tabla table, .inv-tabla tbody, .inv-tabla tr, .inv-tabla td { display: block; width: 100%; }
  .inv-tabla thead { display: none; }
  .inv-tabla tr { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: 10px; padding: 8px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
  .inv-tabla td { border: 0 !important; padding: 4px 0 !important; text-align: left !important; }
  .inv-tabla td::before { content: attr(data-label); display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }
  .inv-tabla td[data-label="Nombre del producto"], .inv-tabla td[data-label="Acción"] { grid-column: 1 / -1; }
  .inv-tabla td[data-label="Acción"]::before { display: none; }
  .inv-tabla td.num { font-size: 15px; }
}

/* ---------- Trazabilidad documental ---------- */
.trz-cab { align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.trz-usuario { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); }
.trz-usuario select { border: 1px solid var(--border); border-radius: 5px; padding: 5px 8px; background: var(--field-bg); color: var(--ink); font: inherit; }
.trz-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; overflow-x: auto; }
.trz-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; font: inherit; font-size: 13px; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.trz-tab.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.trz-flujo { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; counter-reset: etapa; }
.trz-etapa { position: relative; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; background: var(--surface-2); min-width: 0; }
.trz-etapa--con { border-color: var(--border-strong); background: var(--surface); border-top: 3px solid var(--accent); }
.trz-etapa h4 { margin: 0 0 8px; font-family: var(--font-display); font-size: 15px; display: flex; gap: 6px; }
.trz-etapa h4::before { counter-increment: etapa; content: counter(etapa) '. '; color: var(--ink-mute); font-weight: 600; margin-right: 2px; }
.trz-etapa h4 .count { margin-left: auto; }
.trz-doc { border-top: 1px dashed var(--border); padding-top: 7px; margin-top: 7px; min-width: 0; }
.trz-doc:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.trz-doc__head { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.trz-doc__meta { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--ink-soft); margin-top: 4px; overflow-wrap: anywhere; }
.trz-folio { font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.trz-tiempo { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--border); }
.trz-evento { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 4px 14px; padding: 0 0 14px 6px; }
.trz-evento::before { content: ''; position: absolute; left: -23px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink-mute); }
.trz-evento--cotizacion::before { border-color: var(--accent); } .trz-evento--pedido::before, .trz-evento--produccion::before { border-color: var(--success); }
.trz-evento--oc::before { border-color: var(--warning); } .trz-evento--entrega::before { border-color: var(--info); } .trz-evento--relacion::before { border-color: var(--error); }
.trz-evento__fecha { font-size: 12px; color: var(--ink-soft); }
.trz-evento__titulo { font-weight: 600; font-size: 13.5px; }
.trz-evento__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink-soft); margin-top: 3px; }
.trz-indicador { display: inline-flex; gap: 3px; background: none; border: 0; padding: 2px; cursor: pointer; }
.trz-dot { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 4px; border-radius: 4px; font-size: 10px; font-weight: 700; border: 1px solid var(--border); color: var(--ink-mute); background: var(--surface-2); }
.trz-dot--on { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.trz-dot--mid { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); }
.trz-dot--err { background: var(--error-soft); color: var(--error); border-color: var(--error); }
.trz-dot--na { border-style: dashed; }

@media (max-width: 640px) {
  .trz-flujo { grid-template-columns: 1fr; }
  .trz-evento::before { left: -23px; }
  .trz-evento { grid-template-columns: 1fr; }
  .trz-cab { flex-direction: column; align-items: stretch; }
  .trz-usuario { flex-wrap: wrap; }
}

/* ---------- Sesión ---------- */
.sesion-usuario { display: flex; align-items: center; gap: 10px; margin-right: 10px; color: var(--color-white); font-size: 12.5px; white-space: nowrap; }
.sesion-usuario__nombre { font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; display: none; }
.sesion-usuario__ini { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #1f1f1f; border: 1px solid #444; font-size: 11px; font-weight: 700; letter-spacing: .03em; }
@media (min-width: 1500px) { .sesion-usuario__nombre { display: inline; } .sesion-usuario__ini { display: none; } }
@media (max-width: 1440px) { .search-trigger .label, .search-trigger .kbd { display: none; } }
.sesion-usuario__salir { background: transparent; border: 1px solid #444; color: var(--nav-mute); border-radius: 5px; padding: 5px 9px; font: inherit; font-size: 12px; cursor: pointer; }
.sesion-usuario__salir:hover, .sesion-usuario__salir:focus-visible { color: #fff; border-color: var(--brand-red); }
@media (max-width: 640px) { .sesion-usuario { margin-right: 4px; gap: 6px; } }
.sesion-aviso { position: fixed; inset: 0; z-index: 400; background: var(--overlay); display: grid; place-items: center; padding: 16px; }
.sesion-aviso__caja { background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: var(--radius-lg); padding: 22px; width: min(420px, 100%); }
.sesion-aviso__caja p { margin: 8px 0 16px; color: var(--ink-soft); }
.inv-usuario__nombre { padding: 8px 0; font-weight: 600; }
@media (max-width: 1366px) and (min-width: 861px) { .site-nav { gap: 16px; } }

/* ---------- Empresa activa (multiempresa) ---------- */
.empresa-activa { display: flex; align-items: center; gap: 6px; margin-right: 10px; color: var(--color-white); font-size: 12px; white-space: nowrap; }
.empresa-activa__etq { color: var(--nav-mute); text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; }
.empresa-activa strong { font-weight: 700; letter-spacing: .03em; }
.empresa-activa select { background: #1f1f1f; color: #fff; border: 1px solid #444; border-radius: 5px; padding: 4px 6px; font: inherit; font-weight: 700; letter-spacing: .03em; cursor: pointer; }
.empresa-activa select:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 1px; }
@media (max-width: 640px) {
  .empresa-activa { margin-right: 2px; }
  .empresa-activa__etq { display: none; }
  .empresa-activa select { padding: 3px 0 3px 3px; font-size: 11px; letter-spacing: .01em; }
  .empresa-activa strong { font-size: 11px; }
}
/* En teléfonos la empresa activa tiene prioridad sobre las iniciales (el nombre sigue en Configuración › Usuarios) */
@media (max-width: 420px) {
  .sesion-usuario__ini { display: none; }
  .header-actions { gap: 4px; }
  .sesion-usuario { margin-right: 2px; }
  .sesion-usuario__salir { padding: 5px 7px; }
}
.drawer__empresa { display: inline-block; margin: 0 0 6px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--ink-soft); }

/* ---------- Menú completo en escritorio (dos renglones cuando no cabe en uno; ver ajustarMenu en app.js) ---------- */
@media (min-width: 861px) {
  :root.header-2l { --header-h: 104px; }
  :root.header-2l .site-header__inner {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: 58px 44px; column-gap: var(--header-gap); row-gap: 0; align-items: center;
  }
  :root.header-2l .brand { grid-row: 1; grid-column: 1; }
  :root.header-2l .header-actions { grid-row: 1; grid-column: 2; justify-self: end; }
  :root.header-2l .site-nav { grid-row: 2; grid-column: 1 / -1; align-self: stretch; border-top: 1px solid #1f1f1f; overflow: visible; flex-wrap: wrap; }
}