/* Design tokens - all themes override via --_* primitives */
:root {
  /* Color semantic tokens reference theme-specific primitives */
  --color-bg:            var(--_bg);
  --color-surface:       var(--_surface);
  --color-surface-alt:   var(--_surface-alt);
  --color-text:          var(--_text);
  --color-text-muted:    var(--_text-muted);
  --color-text-inverse:  var(--_text-inverse);
  --color-primary:       var(--_primary);
  --color-primary-hover: var(--_primary-hover);
  --color-primary-text:  var(--_primary-text);
  --color-accent:        var(--_accent);
  --color-border:        var(--_border);
  --color-border-strong: var(--_border-strong);
  --color-success:       var(--_success);
  --color-warning:       var(--_warning);
  --color-danger:        var(--_danger);
  --color-info:          var(--_info);

  /* Spacing */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* Shadows (overridable by theme) */
  --shadow-sm: var(--_shadow-sm);
  --shadow-md: var(--_shadow-md);
  --shadow-lg: var(--_shadow-lg);

  /* ── Tipografía ────────────────────────────────────────────────────────
     La fuente BASE es del producto (Barlow, alojada en /fonts/, ver css/fonts.css):
     igual en todos los equipos y en todos los talleres. Un TEMA puede elegir otra
     sobrescribiendo --font-body / --font-display (el de Maliv usa Rajdhani).
     Antes decía 'Inter' pero nunca se cargaba: cada equipo caía en su fuente de
     sistema y la app se veía distinta en Android, iPhone y Windows. */
  --font-body:      'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display:   'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Angosta: patentes, encabezados de tabla, etiquetas densas. */
  --font-condensed: 'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;
  --font-mono:      ui-monospace, 'SF Mono', monospace;

  /* Escala ÚNICA de tamaños: siete pasos. La auditoría del 2026-09-20 encontró 2.199
     tamaños escritos a mano en 90 valores distintos (.72, .74, .76, .78rem…): nadie
     distingue .76 de .78, pero juntos hacen que nada calce. Se elige un paso, no un
     número. En rem para respetar el tamaño de letra que el usuario fijó en su equipo. */
  --fs-11: 0.6875rem;   /* micro: contadores, insignias. No usar para leer. */
  --fs-12: 0.75rem;     /* detalle: metadatos, encabezados de tabla */
  --fs-13: 0.8125rem;   /* apoyo: texto secundario, tarjetas densas */
  --fs-14: 0.875rem;    /* cuerpo: el tamaño por defecto de la interfaz */
  --fs-16: 1rem;        /* destacado: montos, títulos de tarjeta, campos en el celular */
  --fs-20: 1.25rem;     /* título de sección */
  --fs-28: 1.75rem;     /* portada, cifras grandes */
  /* Nombres anteriores: siguen valiendo y apuntan a la misma escala. */
  --font-size-xs:  var(--fs-12);
  --font-size-sm:  var(--fs-14);
  --font-size-md:  var(--fs-16);
  --font-size-lg:  var(--fs-20);
  --font-size-xl:  var(--fs-28);
  --font-size-2xl: 2.5rem;
  --line-height-tight: 1.2;
  --line-height-base:  1.5;
  /* Cuatro pesos y nada más (había 800 y 900 repartidos; caen en bold). */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* ── Alturas de control ────────────────────────────────────────────────
     Campo, selector y botón en una misma fila miden LO MISMO. Antes la altura salía
     de sumar padding + letra de cada uno: convivían 31, 36, 28 y 34 px en una fila. */
  --control-xs: 24px;   /* insignias que se tocan (estado, patente, folio) y botones mínimos sobre una miniatura */
  --control-sm: 32px;   /* dentro de tablas y tarjetas densas */
  --control-md: 40px;   /* el normal */
  --control-lg: 48px;   /* acción principal en el celular (dedo) */

  /* ── Bordes ── un grosor, un color. */
  --border-width: 1px;
  --border:        var(--border-width) solid var(--color-border);
  --border-strong: var(--border-width) solid var(--color-border-strong);
  --radius-xs:   4px;   /* insignias, patentes, celdas */

  /* ── Íconos (js/icono.js) ── siempre uno de estos cuatro tamaños. */
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 20px;
  --icon-xl: 24px;

  /* Transitions */
  --transition-fast: 120ms ease-out;
  --transition-med:  240ms ease-out;
  --transition-slow: 400ms ease-out;

  /* Z-index */
  --z-header:  80;
  --z-nav:     90;
  --z-modal:   1000;
  --z-toast:   2000;

  /* Layout */
  --topnav-height: 44px;
}

/* Modal Editar Ítem · panel Compatibilidad — limpieza UX.
   Override del HTML hardcoded en views/_shared/item-modal.js:
   1. Oculta la primera sección "Compatibilidad de vehículos" (compat
      del ÍTEM suelto que nunca se usa cuando la pieza pertenece a una
      familia, queda vacía y confunde al usuario).
   2. Renombra la segunda sección "Compatibilidad de la pieza" →
      "Compatibilidad de vehículos" usando ::before/::after sobre el
      label original (font-size:0 lo oculta y los pseudo-elementos
      muestran el texto nuevo; el span del contador conserva su
      font-size propio).
*/
.if-mpanel[data-panel="compat"] > .inv-section-label:nth-of-type(1),
.if-mpanel[data-panel="compat"] > #if-compat-list,
.if-mpanel[data-panel="compat"] > #if-add-compat {
  display: none !important;
}
.if-mpanel[data-panel="compat"] > .inv-section-label:nth-of-type(2) {
  margin-top: 0 !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
}
.if-mpanel[data-panel="compat"] > .inv-section-label:nth-of-type(2)::before {
  content: "Compatibilidad de vehículos (";
  font-size: var(--font-size-xs);
  letter-spacing: 0.06em;
  font-weight: var(--font-weight-bold);
}
.if-mpanel[data-panel="compat"] > .inv-section-label:nth-of-type(2) > #if-fam-compat-count {
  font-size: var(--font-size-xs);
  letter-spacing: 0.06em;
  font-weight: var(--font-weight-bold);
}
.if-mpanel[data-panel="compat"] > .inv-section-label:nth-of-type(2)::after {
  content: ")";
  font-size: var(--font-size-xs);
  letter-spacing: 0.06em;
  font-weight: var(--font-weight-bold);
}

/* Dropdown "Asignar técnico": nombres completos visibles y posicionamiento
   responsivo. Por defecto (Responsables OT general) ancla a la izquierda del
   botón. En la lista "POR TRABAJO" — donde el botón vive al borde derecho —
   ancla a la derecha para no salirse por el borde derecho del viewport.
   Sobrescribe los estilos hardcoded en view.html y tabs/cotizacion.js. */
.tc-tec-drop {
  min-width: 240px !important;
  max-width: min(320px, calc(100vw - 1rem)) !important;
}
.tc-tec-item > span {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}
.ot-resp-trabajos .tc-tec-drop,
.tc-tec-picker[data-resp-trab-wrap] .tc-tec-drop {
  left: auto !important;
  right: 0 !important;
}

/* ── Ticks de WhatsApp ────────────────────────────────────────────────────
   La distinción entregado/leído existía en el HTML pero no se veía: el tick
   sin leer heredaba el color del meta de la burbuja, que sobre el tinte azul
   del saliente queda casi igual de celeste que el --color-info del leído. Se
   fuerza gris apagado para enviado/entregado y un azul WhatsApp más saturado
   para leído. Vive acá porque wa-chat.js no es editable desde este entorno.  */
.otwc-checks, .crm-checks {
  color: color-mix(in srgb, var(--color-text) 55%, transparent) !important;
  opacity: 1;
}
.otwc-checks-read, .crm-checks-read { color: #34b7f1 !important; }

/* ── Compras / Abastecimiento ──────────────────────────────────────────────
   Dos ajustes pedidos sobre la vista de repuestos. view.html de compras es de
   root y no es editable desde este entorno, así que van acá.

   1) Ancho completo: el padding lo pone #view, no la vista (la regla .co2-root
      del propio archivo es código muerto: nadie aplica esa clase). Se apunta al
      #view que contiene la toolbar de compras, así no afecta a las demás
      vistas. Toolbar y resumen conservan su respiro con margen propio.
   2) El rosado sale de --color-accent, que en el tema oscuro es
      hsl(340,85%,65%) y no tiene nada que ver con la identidad Maliv. Acá se
      reemplaza por el color primario.                                         */
#view:has(> .co2-toolbar) { padding-left: 0; padding-right: 0; }
#view:has(> .co2-toolbar) > .co2-toolbar,
#view:has(> .co2-toolbar) > .co2-summary { margin-left: var(--space-sm); margin-right: var(--space-sm); }
#view:has(> .co2-toolbar) > #co2-chips,
#view:has(> .co2-toolbar) > #co2-loading { margin-left: var(--space-sm); margin-right: var(--space-sm); }
#view:has(> .co2-toolbar) .co2-section,
#view:has(> .co2-toolbar) .co2-kb-board { margin-left: var(--space-2xs); margin-right: var(--space-2xs); }

.co2-btn-quick,
.co2-btn-assign-ot,
.co2-vista-btn[aria-pressed="true"] { background: var(--color-primary) !important; color: #fff !important; }
.co2-btn-quick:hover,
.co2-btn-assign-ot:hover { background: var(--color-primary-hover, var(--color-primary)) !important; }
.co2-btn-chg-sup:hover { color: var(--color-primary); border-color: var(--color-primary); }