/* =======================================================
   Costify — sistema de diseno (2026-05-19)

   Hoja compartida por todas las vistas que migren al chrome B.
   Tipografia Inter (Google Fonts) con fallback a system-ui.
   Iconos SVG Lucide via CostifyIcons::render() en PHP.

   Componentes:
   - Reset basico + variables CSS
   - .app, .header, .nav, .nav-group, .nav-dropdown
   - .search, .iconbtn, .avatar
   - .page-bar, .breadcrumb, .btn
   - .kpi-grid, .kpi
   - .card, .pill
   - .alert
   - .quick (accesos rapidos)
   ======================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --border: #e2e6ec;
  --text: #1a2230;
  --text-soft: #5e6a7d;
  /* --primary y --accent se pueden sobrescribir por empresa via
     <style> inline en el chrome (branding por tenant). Las variantes
     -dark y -soft se calculan automáticamente con color-mix() para no
     pedir al cliente más de un color por canal. Requiere navegadores
     modernos (Chrome 111+, Firefox 113+, Safari 16.4+) — aceptable
     para una app SaaS de 2026. */
  --primary: #3F7D4F;
  --primary-dark: color-mix(in srgb, var(--primary) 78%, black);
  --primary-soft: color-mix(in srgb, var(--primary) 14%, white);
  /* Color de MARCA qartalia (verde del logo). NO se sobreescribe por empresa:
     el override de branding por tenant solo toca --primary/--accent. El logo
     y el wordmark del producto usan --brand para mantener identidad fija. */
  --brand: #3F7D4F;
  --brand-dark: color-mix(in srgb, var(--brand) 78%, black);
  --brand-soft: color-mix(in srgb, var(--brand) 14%, white);
  --accent: #1a8c5a;
  --accent-dark: color-mix(in srgb, var(--accent) 78%, black);
  --accent-soft: color-mix(in srgb, var(--accent) 14%, white);
  --warn: #c08020;
  --warn-soft: #fbf0db;
  --danger: #c43d3d;
  --danger-soft: #fce8e8;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 8px 24px rgba(60, 90, 57, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
}

body {
  font-family: 'Inter', -apple-system, "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }

/* Cajas de texto multilínea: heredan la tipografía de la app. Sin esto, el
   navegador las pinta con su fuente por defecto (normalmente monospace), que
   desentona con el resto del formulario. Aplica a TODOS los <textarea> de una
   sola vez, sin depender de selectores por apartado. */
textarea {
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
}

/* Tinte de marca en formularios: el resaltado de la opcion seleccionada en
   los <select> (azul del navegador por defecto) pasa al verde de marca, igual
   que checkboxes/radios/range. `accent-color` lo respetan Chrome/Edge/Firefox
   modernos; algunos navegadores moviles imponen el resaltado del sistema. No
   necesita clase: aplica a TODOS los <select> de la app de una sola vez. */
select, input[type="checkbox"], input[type="radio"], input[type="range"] {
  accent-color: var(--primary);
}
option:checked {
  background-color: var(--primary-soft);
  color: var(--primary-dark);
}

/* SVG icons */
.icon {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  flex-shrink: 0;
}
.icon-sm { width: 14px; height: 14px; }
.icon-lg { width: 22px; height: 22px; }
.icon-xl { width: 28px; height: 28px; }

/* App shell */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ============ Header ============ */
.header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 22px;
  gap: 8px;
  height: 56px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 50;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 24px;
  color: var(--brand);
  margin-right: 28px;
  letter-spacing: -0.2px;
}
.brand .logo {
  /* SVG inline en _chrome.php; hereda el color via `currentColor` desde
     `.brand` (que usa `color: var(--brand)` = verde de marca FIJO). El logo
     del producto NO cambia con el branding por empresa (eso solo toca
     --primary); la marca qartalia se ve siempre en su verde #3F7D4F. */
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

/* Nav con dropdowns */
.nav {
  display: flex;
  gap: 2px;
  height: 100%;
  align-items: center;
}
.nav-group {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
.nav-trigger {
  padding: 8px 13px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: -0.1px;
}
.nav-trigger:hover {
  background: var(--primary-soft);
  color: var(--primary-dark);
}
/* Mientras el menu de un grupo esta desplegado, su disparador queda sombreado
   (no solo al pasar el raton por encima del propio disparador). Sin esto, al
   bajar el raton al dropdown el titulo del grupo se apaga y el usuario pierde
   la referencia de en que grupo esta. Cubre escritorio (:hover/:focus-within)
   y movil/click (.is-open). */
.nav-group:hover > .nav-trigger,
.nav-group:focus-within > .nav-trigger,
.nav-group.is-open > .nav-trigger {
  background: var(--primary-soft);
  color: var(--primary-dark);
}
.nav-group.active .nav-trigger {
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-weight: 600;
}
.nav-group.active .nav-trigger::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 8px;
  right: 8px;
  height: 2px;
  background: var(--primary);
  border-radius: 1px;
}
.nav-trigger .caret {
  width: 12px;
  height: 12px;
  opacity: 0.5;
}

.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  min-width: 240px;
  padding: 6px;
  z-index: 60;
}
.nav-group:hover .nav-dropdown,
.nav-group:focus-within .nav-dropdown { display: block; }
.nav-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  font-size: 13px;
  color: var(--text);
  border-radius: 5px;
  font-weight: 500;
}
.nav-dropdown a:hover {
  background: var(--primary-soft);
  color: var(--primary-dark);
}
.nav-dropdown a.active {
  background: var(--primary);
  color: white;
}
.nav-dropdown a.active .icon { color: white; }
.nav-dropdown a .icon { color: var(--text-soft); }
.nav-dropdown a:hover .icon { color: var(--primary); }
.nav-dropdown .divider {
  height: 1px;
  background: var(--border);
  margin: 5px 0;
}
.nav-dropdown .nav-subgroup-label {
  padding: 4px 11px 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-soft);
}

/* Search */
.search {
  flex: 1;
  max-width: 360px;
  position: relative;
  margin-left: 18px;
}
.search input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  font-size: 13px;
  outline: none;
  font-family: inherit;
}
.search input:focus {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(60, 90, 57, 0.1);
}
.search > .icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  pointer-events: none;
}

/* Header actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.iconbtn {
  width: 36px;
  height: 36px;
  border-radius: 7px;
  background: var(--bg);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--text-soft);
}
.iconbtn:hover {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--primary-soft);
}
.iconbtn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5a7d57, #3F7D4F);
  color: white;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  letter-spacing: 0.3px;
}

/* ============ Badge de tenant en el header (chrome) ============ */
.chrome-tenant-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  margin-right: 6px;
  white-space: nowrap;
  cursor: help;
}
.chrome-tenant-badge.tenant {
  background: var(--primary-soft);
  color: var(--primary-dark);
  border: 1px solid rgba(60, 90, 57,0.18);
}
.chrome-tenant-badge.super {
  background: var(--warn-soft);
  color: #8a5712;
  border: 1px solid rgba(192,128,32,0.22);
}
/* Super-admin actuando como una empresa concreta: aviso más fuerte
   para que nunca se confunda con sesión normal de admin. */
.chrome-tenant-badge.acting {
  background: #ffe9d6;
  color: #8a3a12;
  border: 1px solid #f5b07a;
  cursor: default;
}
/* Dropdown "Actuar como…" del super-admin. Discreto, junto al badge. */
.chrome-acting-select {
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 11px;
  font-family: inherit;
  margin-right: 6px;
  cursor: pointer;
}
.chrome-acting-select:hover { border-color: var(--primary); }
/* Botón "Salir" del modo acting. */
.chrome-acting-clear {
  height: 26px;
  padding: 0 10px;
  border: 1px solid #f5b07a;
  border-radius: 6px;
  background: transparent;
  color: #8a3a12;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  margin-right: 6px;
}
.chrome-acting-clear:hover { background: #ffe9d6; }

/* ============ Menu de usuario (avatar + popover con logout) ============ */
.user-menu {
  position: relative;
  /* Padding inferior + popover con top: 100% crean un puente invisible para
     que el hover no se pierda al cruzar el ratón hacia el popover. */
  padding-bottom: 8px;
  margin-bottom: -8px;
}
.user-menu .user-popover {
  position: absolute;
  top: 100%;
  right: 0;
  width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-hover);
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.12s, transform 0.12s, visibility 0.12s;
  z-index: 80;
  overflow: hidden; /* Para que el hover del botón respete border-radius */
}
.user-menu:hover .user-popover,
.user-menu:focus-within .user-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* === Notificaciones (dropdown del icono campana en el chrome) === */
.notif-menu {
  position: relative;
  padding-bottom: 8px;
  margin-bottom: -8px;
}
.notif-toggle {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  color: var(--text-soft);
}
.notif-toggle:hover { background: var(--bg); color: var(--primary); }
.notif-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  border: 1.5px solid var(--surface);
}
.notif-popover {
  position: absolute;
  top: 100%;
  right: 0;
  width: 360px;
  max-height: 460px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-hover);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.12s, transform 0.12s, visibility 0.12s;
  z-index: 80;
}
.notif-menu:hover .notif-popover,
.notif-menu:focus-within .notif-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.notif-popover-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background: var(--surface);
  font-size: 12px;
}
.notif-popover-head strong { font-weight: 700; }
.notif-all {
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
}
.notif-empty {
  padding: 22px 14px;
  text-align: center;
  color: var(--text-soft);
  font-size: 12px;
}
.notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.notif-item {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.notif-item:last-child { border-bottom: 0; }
.notif-tone {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 6px;
}
.notif-tone-info   { background: var(--primary); }
.notif-tone-ok     { background: var(--accent); }
.notif-tone-warn   { background: var(--warn); }
.notif-tone-danger { background: var(--danger); }
.notif-body { min-width: 0; }
.notif-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.notif-entity {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-soft);
  text-transform: lowercase;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--bg);
}
.notif-detail {
  font-size: 11.5px;
  color: var(--text);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notif-meta {
  font-size: 10.5px;
  color: var(--text-soft);
}
.user-popover-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.user-popover-head .name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}
.user-popover-head .meta {
  font-size: 11px;
  color: var(--text-soft);
  margin-top: 2px;
}
/* Form de logout: reset de margenes del navegador para que el botón ocupe
   exactamente el ancho del popover sin descolgarse. */
.user-popover form {
  margin: 0;
  padding: 0;
}
.user-popover-action {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.user-popover-action:hover {
  background: var(--bg);
  color: var(--primary);
}
.user-popover-action.danger { color: var(--danger); }
.user-popover-action.danger:hover { background: var(--danger-soft); color: var(--danger); }
/* Separacion visual fuerte alrededor de "Solicitar eliminacion" para
   evitar mis-clicks. La zona peligrosa lleva borde superior y mas
   espaciado vertical; "Cerrar sesion" (zona neutra) queda separada de
   ella con otro borde superior. */
.user-popover .user-popover-danger-zone {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 6px;
}
.user-popover .user-popover-logout-zone {
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 4px;
}

/* Modal de confirmacion "escribe BORRAR" para acciones peligrosas.
   Overlay full-screen con caja centrada. El boton confirmar empieza
   deshabilitado y se habilita via JS cuando el input coincide con la
   palabra clave del idioma activo. */
.confirm-modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(15, 25, 45, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.18s ease-out;
}
.confirm-modal-overlay[hidden] { display: none; }
.confirm-modal-overlay.is-open { opacity: 1; }
.confirm-modal {
  background: var(--surface);
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(15, 25, 45, 0.35);
  width: 100%; max-width: 460px;
  padding: 28px 30px 24px;
  font-family: inherit;
}
.confirm-modal-title {
  font-size: 18px; font-weight: 800; color: var(--danger);
  letter-spacing: -0.2px;
  margin: 0 0 12px;
  text-align: center;
}
.confirm-modal-body {
  font-size: 13.5px; line-height: 1.7; color: var(--text);
  margin: 0 0 18px;
}
/* La palabra clave se renderiza inline como una "pildora" roja para que
   el usuario la identifique de un vistazo: monoespaciada (igual al
   input), fondo rojo suave, borde rojo, font-weight: 900, ligeramente
   mas grande que el texto para que sobresalga. Aparece tanto en el
   cuerpo del modal como en la etiqueta del input. */
.confirm-modal-keyword {
  display: inline-block;
  font-family: 'Consolas', 'Monaco', monospace;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: var(--danger);
  background: var(--danger-soft);
  border: 1.5px solid var(--danger);
  border-radius: 5px;
  padding: 2px 9px;
  margin: 0 3px;
  font-size: 1.05em;
  text-transform: none;
  box-shadow: 0 1px 3px rgba(196, 61, 61, 0.18);
  vertical-align: baseline;
}
.confirm-modal-label {
  display: block;
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--text-soft);
  margin-bottom: 6px;
  text-align: center;
}
.confirm-modal-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px; font-weight: 700;
  font-family: 'Consolas', 'Monaco', monospace;
  letter-spacing: 2px;
  border: 2px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.confirm-modal-input:focus {
  border-color: var(--danger);
  background: var(--surface);
}
.confirm-modal-input.is-match {
  border-color: var(--danger);
  background: var(--danger-soft);
}
.confirm-modal-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 20px;
}
.confirm-modal-cancel,
.confirm-modal-confirm {
  padding: 9px 16px;
  font-size: 13px; font-weight: 700;
  border-radius: 6px;
  border: none; cursor: pointer;
  font-family: inherit;
}
.confirm-modal-cancel {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border);
}
.confirm-modal-cancel:hover { background: var(--surface); }
.confirm-modal-confirm {
  background: var(--danger); color: white;
}
.confirm-modal-confirm:hover:not(:disabled) {
  filter: brightness(0.92);
}
.confirm-modal-confirm:disabled {
  background: var(--border); color: var(--text-soft);
  cursor: not-allowed;
}

/* ============ Page bar (breadcrumb + acciones) ============ */
.page-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.breadcrumb {
  color: var(--text-soft);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.breadcrumb a { color: var(--primary); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { opacity: 0.5; }
.breadcrumb .current { color: var(--text); font-weight: 600; }
.page-actions {
  display: flex;
  gap: 8px;
}

/* ============ Main ============ */
.main {
  padding: 22px 32px 32px;
  flex: 1;
}

.page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.page-head h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.page-head .subtitle {
  color: var(--text-soft);
  font-size: 13px;
  margin-top: 3px;
  font-weight: 400;
}
.page-head-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ============ Botones ============ */
.btn {
  background: var(--primary);
  color: white;
  padding: 9px 16px;
  border-radius: 7px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: -0.1px;
}
.btn:hover { background: var(--primary-dark); }
.btn .icon { color: white; }
.btn.secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn.secondary:hover {
  background: var(--bg);
  border-color: var(--primary);
  color: var(--primary-dark);
}
.btn.secondary .icon { color: var(--text-soft); }
.btn.secondary:hover .icon { color: var(--primary); }
.btn.danger {
  background: white;
  color: var(--danger);
  border: 1px solid var(--danger);
}
.btn.danger:hover { background: var(--danger-soft); }

/* ============ Status badge (estado conexion) ============ */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}
.status-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.status-badge.ok {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: rgba(26, 140, 90, 0.18);
}
.status-badge.error {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: rgba(196, 61, 61, 0.2);
}
.status-badge.pending {
  color: var(--warn);
  background: var(--warn-soft);
  border-color: rgba(192, 128, 32, 0.2);
}

/* ============ KPI grid ============ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 13px 16px;
  box-shadow: var(--shadow);
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
  display: block;
}
a.kpi { cursor: pointer; }
a.kpi:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
  border-color: var(--primary);
}
.kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.kpi .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-soft);
  font-weight: 600;
}
.kpi-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: grid;
  place-items: center;
}
.kpi-icon .icon { width: 14px; height: 14px; }
.kpi.products .kpi-icon { background: #fff3df; color: #b8771a; }
.kpi.materials .kpi-icon { background: var(--accent-soft); color: var(--accent); }
.kpi.formulas .kpi-icon { background: var(--primary-soft); color: var(--primary); }
.kpi.sheets .kpi-icon { background: var(--danger-soft); color: var(--danger); }
.kpi.tariffs .kpi-icon { background: #f0e8fc; color: #6a3ab8; }
.kpi.attrs .kpi-icon { background: #e0f0f5; color: #1a6a8a; }
.kpi .value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  letter-spacing: -1px;
}
.kpi .sub {
  font-size: 11px;
  color: var(--text-soft);
  margin-top: 4px;
  font-weight: 500;
}
.kpi .sub.ok { color: var(--accent); }
.kpi .sub.warn { color: var(--warn); }
.kpi .sub.negative { color: var(--danger); }

/* ============ Card ============ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.card-head h3 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-soft);
}
.card-head a {
  font-size: 11px;
  color: var(--primary);
  font-weight: 600;
}
.card-head a:hover { text-decoration: underline; }

.card .item {
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.card .item:last-child { border-bottom: none; }
.card .item .name {
  font-weight: 600;
  color: var(--text);
}
.card .item .meta {
  color: var(--text-soft);
  font-size: 11px;
  margin-top: 1px;
  font-weight: 400;
}

/* ============ Pills ============ */
.pill {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.pill.ok { background: var(--accent-soft); color: var(--accent); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.draft { background: var(--bg); color: var(--text-soft); border: 1px solid var(--border); }
.pill.danger { background: var(--danger-soft); color: var(--danger); }
.pill.primary { background: var(--primary-soft); color: var(--primary-dark); }

/* ============ Alerts ============ */
.alert {
  padding: 10px 12px;
  border-radius: 7px;
  font-size: 12px;
  border-left: 3px solid;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  line-height: 1.4;
  margin-bottom: 8px;
}
.alert:last-child { margin-bottom: 0; }
.alert .icon { margin-top: 1px; flex-shrink: 0; }
.alert.warn {
  background: var(--warn-soft);
  border-color: var(--warn);
  color: #8a5712;
}
.alert.warn .icon { color: var(--warn); }
.alert.info {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-dark);
}
.alert.info .icon { color: var(--primary); }
.alert.ok {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: #0f5c39;
}
.alert.ok .icon { color: var(--accent); }
.alert .alert-action {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
  display: inline-block;
}

/* ============ Quick links (accesos rapidos) ============ */
.quick {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.quick a {
  background: var(--primary-soft);
  color: var(--primary-dark);
  padding: 9px 11px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.quick a:hover {
  background: var(--primary);
  color: white;
}
.quick a:hover .icon { color: white; }
.quick a .icon { color: var(--primary); }

/* ============ List search (input con icono + boton X) ============ */
.list-search {
  position: relative;
}
.list-search > .icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  pointer-events: none;
}
.list-search input {
  width: 100%;
  padding: 7px 12px 7px 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  background: var(--bg);
  outline: none;
  font-family: inherit;
  color: var(--text);
}
.list-search input:focus {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(60, 90, 57, 0.1);
}
.list-search .clear {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.list-search .clear:hover {
  background: var(--text-soft);
  color: white;
}
.list-search .clear .icon {
  width: 12px;
  height: 12px;
}
.list-search.has-value .clear { display: flex; }
.list-search.has-value input { padding-right: 32px; }

/* ============ Tablas compactas ============ */
table.compact {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: 6px;
  overflow: hidden;
  font-size: 12px;
}
table.compact th {
  background: var(--bg);
  padding: 6px 10px;
  text-align: left;
  font-weight: 600;
  color: var(--text-soft);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--border);
}
table.compact td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
}
table.compact tr:last-child td { border-bottom: none; }
table.compact td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ============ Notas colaborativas (#E) ============ */
.collab-notes {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 18px;
}
.collab-notes-head { margin-bottom: 10px; display: flex; align-items: baseline; gap: 14px; }
.collab-notes-head h3 { margin: 0; font-size: 13px; font-weight: 700; color: var(--text); }
.collab-notes-help { font-size: 11.5px; color: var(--text-soft); flex: 1; }
.collab-note-form { margin-bottom: 12px; }
.collab-note-form textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  min-height: 50px;
  background: var(--surface);
  color: var(--text);
}
.collab-note-form textarea:focus { border-color: var(--primary); outline: none; }
.collab-note-actions { margin-top: 6px; text-align: right; }
.collab-note-actions .btn { padding: 5px 14px; font-size: 12px; }
.collab-notes-empty {
  font-size: 12px;
  color: var(--text-soft);
  padding: 8px 0;
  font-style: italic;
}
.collab-notes-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.collab-note-item {
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 6px;
  border-left: 3px solid var(--primary);
}

/* =====================================================================
   Searchable select (combobox con búsqueda) — reemplaza visualmente a
   <select data-searchable> con un input + dropdown filtrable. El select
   nativo sigue en el DOM (oculto) para que el form lo envíe normal.
   ===================================================================== */
.ss-hidden-native {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}
.ss-wrap { position: relative; display: block; width: 100%; }
.ss-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  background: var(--surface, white);
  border: 1px solid var(--border, #d8dde6);
  border-radius: 5px;
  font: inherit;
  font-size: 13px;
  color: var(--text, #1a2230);
  cursor: pointer;
  text-align: left;
  min-height: 34px;
}
.ss-trigger:hover { border-color: var(--primary, #3F7D4F); }
.ss-wrap.ss-open .ss-trigger {
  border-color: var(--primary, #3F7D4F);
  box-shadow: 0 0 0 3px rgba(60, 90, 57, 0.12);
}
.ss-trigger-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ss-trigger-label.ss-placeholder { color: var(--text-soft, #5e6a7d); }
.ss-trigger-caret {
  flex-shrink: 0;
  color: var(--text-soft, #5e6a7d);
  font-size: 11px;
}
.ss-disabled .ss-trigger { background: var(--bg, #f5f6f8); cursor: not-allowed; opacity: 0.6; }
.ss-panel {
  display: none;
  /* position:fixed + coordenadas calculadas en JS (searchable-select.js) para
     que NO lo recorte ningún contenedor con overflow (detail del escandallo,
     cards, etc.). El JS fija top/left/width/bottom al abrir. */
  position: fixed;
  z-index: 1000;
  background: var(--surface, white);
  border: 1px solid var(--border, #d8dde6);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(15, 25, 45, 0.14);
  overflow: hidden;
}
.ss-wrap.ss-open .ss-panel { display: block; }
.ss-search {
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--border, #d8dde6);
  font: inherit;
  font-size: 13px;
  outline: none;
  background: var(--bg, #f5f6f8);
}
.ss-list {
  list-style: none;
  padding: 4px 0;
  margin: 0;
  max-height: 240px;
  overflow-y: auto;
}
.ss-option {
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text, #1a2230);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ss-option:hover, .ss-option.ss-highlighted {
  background: var(--primary-soft, #e8f0fb);
}
.ss-option.ss-selected {
  font-weight: 600;
  color: var(--primary, #3F7D4F);
}
.ss-empty {
  padding: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text-soft, #5e6a7d);
  font-style: italic;
}

/* =====================================================================
   Panel de atajos de teclado (overlay con `?`).
   ===================================================================== */
.kbd-help-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 25, 45, 0.42);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
.kbd-help-backdrop.show { display: flex; }
.kbd-help-panel {
  background: var(--surface, white);
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 18px 22px 22px;
}
.kbd-help-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.kbd-help-head h2 { margin: 0; font-size: 18px; }
.kbd-help-close {
  background: transparent;
  border: 0;
  font-size: 22px;
  cursor: pointer;
  color: var(--text-soft, #5e6a7d);
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.kbd-help-close:hover { background: var(--bg, #f5f6f8); }
.kbd-help-panel h3 {
  margin: 14px 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-soft, #5e6a7d);
  font-weight: 700;
}
.kbd-help-panel ul {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 6px 14px;
}
.kbd-help-panel li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border, #e5e8ed);
  font-size: 13px;
}
.kbd-help-panel li:last-child { border-bottom: 0; }
.kbd-keys { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.kbd-keys kbd {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--border, #d8dde6);
  background: var(--bg, #f5f6f8);
  color: var(--text, #1a2230);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px;
  box-shadow: 0 1px 0 var(--border, #d8dde6);
  min-width: 22px;
  text-align: center;
}
.kbd-sep { font-size: 11px; color: var(--text-soft, #5e6a7d); }
.kbd-lbl { color: var(--text, #1a2230); }

/* =====================================================================
   Tooltips de ayuda en campos de formulario (data-help="…").
   Se desactivan globalmente si el usuario marca esa preferencia en su
   perfil. Posicionados absolutamente, con flecha discreta.
   ===================================================================== */
.field-help-tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5000;
  max-width: 280px;
  background: #1a2230;
  color: white;
  padding: 8px 11px;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px);
  transition: opacity 0.15s, transform 0.15s;
}
.field-help-tip.show {
  opacity: 1;
  transform: translateY(0);
}
.field-help-tip::after {
  content: '';
  position: absolute;
  left: 50%;
  margin-left: -6px;
  width: 0; height: 0;
  border-style: solid;
}
.field-help-tip[data-placement="top"]::after {
  bottom: -5px;
  border-width: 6px 6px 0 6px;
  border-color: #1a2230 transparent transparent transparent;
}
.field-help-tip[data-placement="bottom"]::after {
  top: -5px;
  border-width: 0 6px 6px 6px;
  border-color: transparent transparent #1a2230 transparent;
}
.collab-note-meta { font-size: 11px; color: var(--text-soft); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.collab-note-meta strong { color: var(--text); }
.collab-note-meta .inline-form { display: inline; }
.collab-note-del {
  background: transparent;
  border: 0;
  color: var(--danger);
  cursor: pointer;
  font-size: 11px;
  padding: 0;
  font-family: inherit;
}
.collab-note-del:hover { text-decoration: underline; }
.collab-note-body {
  margin-top: 5px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.45;
  word-wrap: break-word;
}

/* ============ Responsive ============ */
@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 780px) {
  .header { padding: 0 14px; }
  .nav { display: none; }
  .main { padding: 16px 14px 24px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .search { display: none; }
}

/* ============================================================
   Estado vacío del detalle de catálogo (costify_detail_empty_state).
   Se muestra al entrar a un catálogo sin elemento seleccionado, en
   lugar del formulario de alta. Logo + nombre app + invitación.
   ============================================================ */
.detail-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 12px; padding: 56px 24px; color: var(--text-soft);
  max-width: 440px; margin: 32px auto;
}
.detail-empty-brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--primary); font-weight: 800; font-size: 22px; letter-spacing: -0.5px;
  margin-bottom: 4px;
}
.detail-empty h3 { font-size: 16px; font-weight: 700; color: var(--text); margin: 0; }
.detail-empty p { font-size: 13px; line-height: 1.55; margin: 0; }
.detail-empty .btn { margin-top: 8px; }

/* ============================================================
   RESPONSIVIDAD (pase 1, 2026-06). Por debajo de 900px (tablet/móvil,
   donde ya aparece la hamburguesa) apilamos el master-detail, soltamos el
   scroll bloqueado y colapsamos las rejillas de formulario por clase a una
   columna. TODO va dentro del @media → el ESCRITORIO no se ve afectado.
   Se usa !important porque cada catalog_*.php define su layout en un <style>
   inline que va DESPUÉS de este fichero en el orden de la cascada.
   Sub-rejillas con `style="grid-template-columns:..."` inline NO se colapsan
   aquí (limitación conocida; se ajustan por pantalla si hace falta).
   ============================================================ */
@media (max-width: 900px) {
  /* Soltar el scroll-lock del master-detail para que el contenido apilado se
     desplace en vertical con normalidad. */
  html, body { height: auto !important; overflow: auto !important; }
  .app { height: auto !important; min-height: 100vh; }

  /* Apilar lista (master) sobre el detalle, ambos a ancho completo. */
  .workspace, .workspace.with-rail { display: block !important; }
  .master, .detail { width: 100% !important; max-width: none !important; min-width: 0 !important; }
  /* La lista, acotada y con scroll propio, para no empujar el formulario
     fuera de pantalla en móvil. */
  .master { max-height: 42vh !important; overflow-y: auto !important; margin-bottom: 12px; }

  /* Rejillas de formulario por clase → una sola columna. */
  .form-grid,
  .form-grid.two-cols,
  .form-grid.three-cols,
  .form-grid.four-cols { grid-template-columns: 1fr !important; }

  /* Cabecera de página: que el título y las acciones apilen si no caben. */
  .page-head { flex-wrap: wrap; gap: 10px; }
}