/* ═══════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════ */
:root {
  --bg:           #e8e8e8;
  --surface:      #efefef;
  --surface-deep: #e0e0e0;
  --panel:        #ffffff;

  --text-primary:   #1e1e1e;
  --text-secondary: #6b6b6b;
  --text-muted:     #a8a8a8;
  --text-inverse:   #ffffff;

  --accent:        #1e1e1e;
  --accent-hover:  #383838;
  --accent-soft:   rgba(30, 30, 30, 0.07);
  --accent-softer: rgba(30, 30, 30, 0.04);

  --positive:    #3a9e6f;
  --positive-bg: #d6f0e4;
  --warning:     #c8860a;
  --warning-bg:  #fef0d0;
  --danger:      #c0392b;
  --danger-bg:   #fde8e6;

  --border:      rgba(0, 0, 0, 0.08);
  --border-soft: rgba(0, 0, 0, 0.05);
  --light-edge:  rgba(255, 255, 255, 0.80);

  --radius-xs:   5px;
  --radius-sm:   8px;
  --radius-md:   11px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 999px;

  /* Sombra muy leve (componentes flotando sobre bg) */
  --shadow-xs:
    0 1px 2px  rgba(0,0,0,0.07),
    inset 0 1px 0 rgba(255,255,255,0.70);

  --shadow-sm:
0 1px 3px rgb(141 141 141 / 96%), 0 2px 6px rgb(0 0 0 / 0%), inset 0 1px 0 rgba(255, 255, 255, 0.75);

  --shadow-inset:
    inset 2px 2px 6px  rgba(0,0,0,0.10),
    inset 0   0   3px  rgba(0,0,0,0.05),
    inset -1px -1px 4px rgba(255,255,255,0.65);

  /* Sombra hundida para campos de formulario */
  --shadow-field:
    inset 2px 2px 4px  rgba(0,0,0,0.14),
    inset 1px 1px 1px  rgba(0,0,0,0.10),
    inset -1px -1px 3px rgba(255,255,255,0.90);

  --font: 'DM Sans', 'Helvetica Neue', sans-serif;
  --font-display: 'DM Serif Display', Georgia, serif;

  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --t:   0.18s;
  --t-slow: 0.32s;
}

/* ═══════════════════════════════════════════════
   RESET
═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════
   DROPDOWN SELECT
═══════════════════════════════════════════════ */
.dropdown-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}

.dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  min-height: calc(0.83rem * 1.5 + 22px);
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-top-color: rgba(0,0,0,0.12);
  border-left-color: rgba(0,0,0,0.10);
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
  transition: all var(--t);
  box-shadow: var(--shadow-field);
}

.dropdown-trigger:hover {
  background: #f5f5f5;
  border-color: rgba(30,30,30,0.10);
  border-top-color: rgba(30,30,30,0.18);
}

.dropdown-trigger.open {
  border-color: rgba(30,30,30,0.10);
  border-top-color: rgba(30,30,30,0.18);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.dropdown-value {
  flex: 1;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--text-primary);
}

.dropdown-value.placeholder {
  color: var(--text-muted);
  font-weight: 400;
}

.dropdown-arrow {
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform var(--t-slow) var(--ease);
}

.dropdown-trigger.open .dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--panel);
  border: 1px solid rgba(30,30,30,0.14);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow:
    0 6px 18px rgba(0,0,0,0.10),
    0 2px 5px  rgba(0,0,0,0.06);
  z-index: 100;
  overflow: hidden;
  display: none;
  animation: menuIn 0.14s var(--ease);
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.10) transparent;
}

.dropdown-trigger.open ~ .dropdown-list {
  display: block;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--t), color var(--t);
  user-select: none;
}

.dropdown-item:hover {
  background: var(--accent-soft);
  color: var(--text-primary);
}

.dropdown-item.selected {
  color: var(--text-primary);
  font-weight: 600;
}

.dropdown-item.selected::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: auto;
  flex-shrink: 0;
}

.dropdown-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-muted);
}

.dropdown-sep {
  height: 1px;
  margin: 3px 10px;
  background: transparent;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.75),
    0 -1px 0 rgba(0,0,0,0.07);
}

/* ═══════════════════════════════════════════════
   PANEL
═══════════════════════════════════════════════ */
.panel {
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  /* border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6);*/
  gap: 12px;
}

.panel-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.panel-subtitle {
  font-size: 0.70rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.panel-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.panel-body {
  padding: 20px;
}

.panel-footer {
  padding: 12px 20px;
  /* border-top: 1px solid var(--border-soft); 
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);*/
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}




/* ═══════════════════════════════════════════════
   1. TOGGLE
═══════════════════════════════════════════════ */
.toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.toggle {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--surface-deep);
  transition: background var(--t) var(--ease);
  box-shadow: var(--shadow-inset);
  flex-shrink: 0;
}

.toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform var(--t) var(--ease), background var(--t) var(--ease);
  box-shadow:
    0 1px 3px rgba(0,0,0,0.20),
    0 0 0 1px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.5);
}

.toggle.on {
  background: var(--accent);
}

.toggle.on::after {
  transform: translateX(20px);
  background: #ffffff;
}

.toggle-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--t);
}

.toggle.on + .toggle-label {
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════
   2 & 3. BUTTONS
═══════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--font);
  font-size: 0.83rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: none;
  border-radius: var(--radius-md);
  padding: 10px 20px;
  cursor: pointer;
  transition: all var(--t) var(--ease);
  user-select: none;
  white-space: nowrap;
  outline: none;
}

.btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Primary */
.btn-primary {
  background: var(--accent);
  color: var(--text-inverse);
  box-shadow:
    0 2px 5px rgba(0,0,0,0.20),
    0 1px 2px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.10);
}

.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow:
    0 4px 10px rgba(0,0,0,0.22),
    0 1px 3px rgba(0,0,0,0.15);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}

/* Secondary */
.btn-secondary {
  background: #ffffff;
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background: var(--panel);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.09),
    inset 0 1px 0 rgba(255,255,255,0.80);
  transform: translateY(-1px);
}

.btn-secondary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-inset);
  background: var(--surface-deep);
}

/* Sizes */
.btn-sm { font-size: 0.75rem; padding: 7px 14px; border-radius: var(--radius-sm); }
.btn-lg { font-size: 0.92rem; padding: 13px 28px; border-radius: var(--radius-lg); }
.btn-icon { padding: 9px; border-radius: var(--radius-md); }

/* ═══════════════════════════════════════════════
   4. TABLE
═══════════════════════════════════════════════ */
.table-wrap {
  background: #ffffff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-soft);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.data-table thead {
  background: #f5f5f5;
  box-shadow: inset 0 -1px 0 var(--border);
}

.data-table thead tr,
.data-table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.data-table tbody {
  display: block;
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.10) transparent;
}

.data-table tbody::-webkit-scrollbar {
  width: 6px;
}
.data-table tbody::-webkit-scrollbar-track {
  background: transparent;
  margin-bottom: 6px;
}
.data-table tbody::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
  border-radius: var(--radius-full);
}

.data-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 0.70rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #545050;
  white-space: nowrap;
  background: #d4d4d4;
}

.data-table td {
  padding: 11px 16px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-soft);
  transition: background var(--t);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table:not(.integrations-no-hover) tbody tr:hover td {
  background: var(--accent-softer);
  color: var(--text-primary);
}

/* Table badge inline */
.t-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--radius-full);
}
.t-badge.green  { background: var(--positive-bg); color: var(--positive); }
.t-badge.yellow { background: var(--warning-bg);  color: var(--warning); }
.t-badge.red    { background: var(--danger-bg);   color: var(--danger); }

/* ═══════════════════════════════════════════════
   5. TEXT INPUT
═══════════════════════════════════════════════ */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.input {
  width: 100%;
  border: 1px solid rgba(0,0,0,0.06);
  border-top-color: rgba(0,0,0,0.12);
  border-left-color: rgba(0,0,0,0.10);
  border-radius: var(--radius-md);
  padding: 10px 13px;
  font-family: var(--font);
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--text-primary);
  background: #ffffff;
  outline: none;
  transition: all var(--t) var(--ease);
  box-shadow: var(--shadow-field);
  -webkit-appearance: none;
}

.input::placeholder { color: var(--text-muted); }

.input:focus {
  background: #f5f5f5;
  border-color: rgba(30,30,30,0.14);
  border-top-color: rgba(30,30,30,0.20);
  box-shadow:
    var(--shadow-field),
    0 0 0 3px rgba(30,30,30,0.07);
}

.input-wrap {
  position: relative;
}

.input-wrap .input { padding-left: 38px; }

.input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════
   6. ACCORDION / DROPDOWN COLLAPSIBLE
═══════════════════════════════════════════════ */
.accordion {
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 15px;
  cursor: pointer;
  user-select: none;
  transition: background var(--t);
  gap: 10px;
  background: #d4d4d4;
  color: #545050;
  border-bottom: 1px solid var(--border);
}

.accordion-header:hover { background: #cbcbcb; }

/* Variante elevada 3D (por defecto) */
.accordion.elevated .accordion-header {
  box-shadow:
    0 1px 3px rgb(141 141 141 / 60%),
    inset 0 1px 0 rgba(255,255,255,0.75);
}

.accordion-title {
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
}

.accordion-arrow {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  transition: transform var(--t-slow) var(--ease);
  flex-shrink: 0;
}

.accordion.open .accordion-arrow {
  transform: rotate(180deg);
}

.accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-slow) var(--ease);
  border-top: 0px solid var(--border);
}

.accordion.open .accordion-body {
  grid-template-rows: 1fr;
  border-top-width: 1px;
}

.accordion-inner {
  overflow: hidden;
  padding: 0 15px;
  transition: padding var(--t-slow) var(--ease);
}

.accordion.open .accordion-inner {
  padding: 12px 15px;
}

.accordion-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  font-size: 0.80rem;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 1px solid var(--border-soft);
  transition: color var(--t);
}

.accordion-item:last-child { border-bottom: none; }
.accordion-item:hover { color: var(--text-primary); }

/* ═══════════════════════════════════════════════
   7. DATE PICKER
═══════════════════════════════════════════════ */
.datepicker-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}

.datepicker-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  min-height: calc(0.83rem * 1.5 + 22px);
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-top-color: rgba(0,0,0,0.12);
  border-left-color: rgba(0,0,0,0.10);
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
  transition: all var(--t);
  box-shadow: var(--shadow-field);
}

.datepicker-trigger:hover {
  background: #f5f5f5;
  border-color: rgba(30,30,30,0.10);
  border-top-color: rgba(30,30,30,0.18);
}

.datepicker-trigger.open {
  border-color: rgba(30,30,30,0.10);
  border-top-color: rgba(30,30,30,0.18);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: var(--shadow-field);
}

.datepicker-value {
  flex: 1;
  font-size: 0.83rem;
  color: var(--text-primary);
}
.datepicker-value.placeholder { color: var(--text-muted); }

.datepicker-icon {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.datepicker-arrow {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  transition: transform var(--t-slow) var(--ease);
  flex-shrink: 0;
}

.datepicker-trigger.open .datepicker-arrow {
  transform: rotate(180deg);
}

.datepicker-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow:
    0 6px 16px rgba(0,0,0,0.10),
    0 2px 4px rgba(0,0,0,0.06);
  z-index: 100;
  overflow: hidden;
  display: none;
}

.datepicker-trigger.open ~ .datepicker-dropdown {
  display: block;
}

.dp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
  font-size: 0.80rem;
  font-weight: 600;
  color: var(--text-primary);
}

.dp-nav-btn {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: all var(--t);
}
.dp-nav-btn:hover { background: var(--accent-soft); color: var(--text-primary); }

.dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 4px 10px 12px;
}

.dp-day-label {
  text-align: center;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 4px 0;
  text-transform: uppercase;
}

.dp-day {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-secondary);
  padding: 5px 3px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--t);
}
.dp-day:hover { background: var(--accent-soft); color: var(--text-primary); }
.dp-day.today { font-weight: 700; color: rgb(230,163,72); }
.dp-day.selected {
  background: var(--accent);
  color: var(--text-inverse);
  border-radius: var(--radius-sm);
}
.dp-day.today.selected {
  background: rgb(230,163,72);
  color: #ffffff;
}
.dp-day.muted { color: var(--text-muted); }

/* ═══════════════════════════════════════════════
   8. TABS
═══════════════════════════════════════════════ */
.tabs {
  display: inline-flex;
  gap: 2px;
  background: var(--surface-deep);
  border-radius: var(--radius-md);
  padding: 3px;
  box-shadow: var(--shadow-inset);
}

.tab {
  font-size: 0.79rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--t) var(--ease);
  user-select: none;
  white-space: nowrap;
}

.tab:hover { color: var(--text-primary); }

.tab.active {
  background: var(--panel);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.10),
    0 1px 1px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.80);
}

/* Tabs underline variant */
.tabs-line {
  display: inline-flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
}

.tabs-line .tab {
  background: none;
  border-radius: 0;
  padding: 8px 18px 9px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  box-shadow: none;
}

.tabs-line .tab.active {
  background: none;
  box-shadow: none;
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}

/* ═══════════════════════════════════════════════
   9. DIVIDER (hendido / inset)
═══════════════════════════════════════════════ */
.divider {
  width: 100%;
  height: 2px;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.80),
    0 -1px 0 rgba(0,0,0,0.10);
  margin: 4px 0;
}

.divider-labeled {
  display: flex;
  align-items: center;
  gap: 12px;
}

.divider-labeled::before,
.divider-labeled::after {
  content: '';
  flex: 1;
  height: 0;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.80),
    0 -1px 0 rgba(0,0,0,0.10);
}

.divider-text {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════
   10. BAR CHART
═══════════════════════════════════════════════ */
.chart-wrap {
  background: #ffffff;
  border-radius: var(--radius-lg);
  padding: 20px 20px 14px;
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--border-soft);
}

.chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}

.chart-title {
  font-size: 0.80rem;
  font-weight: 600;
  color: var(--text-primary);
}

.chart-subtitle {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.chart-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  color: var(--text-secondary);
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Bar chart SVG bars */
.bar-rect {
  rx: 4px;
  transition: opacity var(--t);
}
.bar-rect:hover { opacity: 0.75; }

/* ═══════════════════════════════════════════════
   11. LINE CHART (fill)
   12. RADAR CHART
   — SVG charts share chart-wrap
═══════════════════════════════════════════════ */
.chart-svg {
  width: 100%;
  overflow: visible;
}

.chart-axis-line {
  stroke: var(--border);
  stroke-width: 1;
}

.chart-grid-line {
  stroke: var(--border-soft);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.chart-axis-label {
  font-family: var(--font);
  font-size: 10px;
  fill: var(--text-muted);
}

/* ═══════════════════════════════════════════════
   13. SEARCH INPUT
═══════════════════════════════════════════════ */
/* Uses .input-wrap + .input-icon already defined above */

.search-clear {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-muted);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t);
}

.search-clear svg {
  width: 10px;
  height: 10px;
  color: #fff;
}

.search-clear:hover { background: var(--accent); }

.input-wrap:focus-within .search-clear.visible {
  display: flex;
}

/* ═══════════════════════════════════════════════
   EXTRA A — BADGE / TAG
═══════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  user-select: none;
}
.badge-default { background: var(--surface-deep); color: var(--text-secondary); }
.badge-dark    { background: var(--accent); color: var(--text-inverse); }
.badge-green   { background: var(--positive-bg); color: var(--positive); }
.badge-yellow  { background: var(--warning-bg);  color: var(--warning); }
.badge-red     { background: var(--danger-bg);   color: var(--danger); }

/* ═══════════════════════════════════════════════
   EXTRA B — CHECKBOX
═══════════════════════════════════════════════ */
.checkbox-wrap {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
}

.checkbox {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,0.06);
  border-top-color: rgba(0,0,0,0.12);
  border-left-color: rgba(0,0,0,0.10);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t) var(--ease);
  flex-shrink: 0;
  box-shadow: var(--shadow-field);
}

.checkbox svg {
  width: 11px;
  height: 11px;
  color: transparent;
  transition: color var(--t);
}

.checkbox-wrap.checked .checkbox {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.checkbox-wrap.checked .checkbox svg {
  color: #fff;
}

.checkbox-text {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════
   EXTRA C — RADIO
═══════════════════════════════════════════════ */
.radio-wrap {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
}

.radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.06);
  border-top-color: rgba(0,0,0,0.12);
  border-left-color: rgba(0,0,0,0.10);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t) var(--ease);
  flex-shrink: 0;
  box-shadow: var(--shadow-field);
}

.radio::after {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
  transition: background var(--t);
}

.radio-wrap.selected .radio {
  border-color: var(--accent);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.radio-wrap.selected .radio::after {
  background: var(--accent);
}

.radio-text {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════
   EXTRA D — PROGRESS BAR
═══════════════════════════════════════════════ */
.progress-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.progress-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.progress-value {
  font-size: 0.70rem;
  color: var(--text-muted);
}

.progress-track {
  height: 7px;
  background: var(--surface-deep);
  border-radius: var(--radius-full);
  overflow: hidden;
  box-shadow: var(--shadow-inset);
}

.progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--accent);
  transition: width 0.6s var(--ease);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20);
}

.progress-fill.green { background: var(--positive); }
.progress-fill.warn  { background: var(--warning); }

/* ═══════════════════════════════════════════════
   EXTRA E — ALERT / NOTIFICATION
═══════════════════════════════════════════════ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-size: 0.80rem;
  line-height: 1.45;
  border: 1px solid transparent;
}

.alert svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.alert-title {
  font-weight: 600;
  margin-bottom: 2px;
}

.alert-info    { background: #e8f0fe; border-color: #c5d5f8; color: #2a5acf; }
.alert-success { background: var(--positive-bg); border-color: #a8dfc4; color: #2a7a53; }
.alert-warning { background: var(--warning-bg);  border-color: #f0d080; color: #8a5c00; }
.alert-danger  { background: var(--danger-bg);   border-color: #f0b0aa; color: #9a2a20; }

/* ═══════════════════════════════════════════════
   N1. BREADCRUMB
═══════════════════════════════════════════════ */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 0.78rem;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--t);
}
.breadcrumb-item:hover { color: var(--text-primary); }
.breadcrumb-item.active { color: var(--text-primary); font-weight: 500; cursor: default; }

.breadcrumb-sep {
  color: var(--text-muted);
  opacity: 0.5;
  font-size: 0.70rem;
  user-select: none;
}

/* ═══════════════════════════════════════════════
   N2. PAGINATION
═══════════════════════════════════════════════ */
.pagination {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: 4px;
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--border-soft);
}

.page-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--t) var(--ease);
  user-select: none;
  border: none;
  background: none;
  font-family: var(--font);
}

.page-btn:hover { background: var(--accent-soft); color: var(--text-primary); }

.page-btn.active {
  background: var(--accent);
  color: var(--text-inverse);
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}

.page-btn.disabled { opacity: 0.35; pointer-events: none; }

.page-btn svg { width: 14px; height: 14px; }

.page-dots {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  user-select: none;
}

/* ═══════════════════════════════════════════════
   N3. STEPPER / WIZARD
═══════════════════════════════════════════════ */
.stepper {
  display: flex;
  align-items: flex-start;
  gap: 0;
  position: relative;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}

.step-connector {
  position: absolute;
  top: 14px;
  left: calc(50% + 14px);
  right: calc(-50% + 14px);
  height: 2px;
  background: var(--surface-deep);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.80),
    0 -1px 0 rgba(0,0,0,0.08);
  z-index: 0;
}

.step:last-child .step-connector { display: none; }

.step-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  position: relative;
  z-index: 1;
  transition: all var(--t) var(--ease);
  box-shadow: var(--shadow-xs);
}

.step.done .step-circle {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-inverse);
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

.step.active .step-circle {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 4px rgba(30,30,30,0.08);
}

.step-done .step-connector { background: var(--accent); }

.step-label {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 7px;
  text-align: center;
  white-space: nowrap;
}

.step.active .step-label { color: var(--text-primary); font-weight: 600; }
.step.done  .step-label  { color: var(--text-secondary); }

/* ═══════════════════════════════════════════════
   N4. TOAST / SNACKBAR
═══════════════════════════════════════════════ */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--text-inverse);
  font-size: 0.80rem;
  font-weight: 500;
  min-width: 260px;
  max-width: 360px;
  pointer-events: all;
  box-shadow:
    0 4px 16px rgba(0,0,0,0.22),
    0 1px 4px rgba(0,0,0,0.14),
    inset 0 1px 0 rgba(255,255,255,0.12);
  animation: toastIn 0.28s var(--ease) both;
}

.toast.hiding { animation: toastOut 0.22s var(--ease) forwards; }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes toastOut {
  to   { opacity: 0; transform: translateY(8px)  scale(0.95); }
}

.toast svg { width: 16px; height: 16px; flex-shrink: 0; }
.toast-msg { flex: 1; }

.toast-close {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--t);
  flex-shrink: 0;
}
.toast-close:hover { opacity: 1; }
.toast-close svg { width: 12px; height: 12px; }

.toast.toast-success { background: var(--positive); }
.toast.toast-warning { background: var(--warning); }
.toast.toast-danger  { background: var(--danger); }

/* ═══════════════════════════════════════════════
   N5. SKELETON LOADER
═══════════════════════════════════════════════ */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--surface-deep) 25%,
    #e8e8e8            50%,
    var(--surface-deep) 75%
  );
  background-size: 800px 100%;
  animation: shimmer 1.6s infinite linear;
}

.skeleton-text   { height: 12px; border-radius: var(--radius-full); }
.skeleton-title  { height: 18px; border-radius: var(--radius-full); }
.skeleton-circle { border-radius: 50%; }
.skeleton-card {
  border-radius: var(--radius-lg);
  height: 80px;
}

/* ═══════════════════════════════════════════════
   N6. EMPTY STATE
═══════════════════════════════════════════════ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  gap: 12px;
}

.empty-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-lg);
  background: var(--surface-deep);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-inset);
  margin-bottom: 4px;
}
.empty-icon svg { width: 22px; height: 22px; color: var(--text-muted); }

.empty-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
}

.empty-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  max-width: 260px;
  line-height: 1.55;
}

/* ═══════════════════════════════════════════════
   N7. TOOLTIP
═══════════════════════════════════════════════ */
.tooltip-wrap {
  position: relative;
  display: inline-flex;
}

.tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--text-inverse);
  font-size: 0.70rem;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
  transform: translateX(-50%) translateY(4px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.20);
  z-index: 100;
}

.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--accent);
}

.tooltip-wrap:hover .tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ═══════════════════════════════════════════════
   N8. KPI CARD
═══════════════════════════════════════════════ */
.kpi-card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  padding: 20px 22px 16px;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kpi-label {
  font-size: 0.70rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.kpi-icon {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  background: var(--surface-deep);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-inset);
}
.kpi-icon svg { width: 14px; height: 14px; color: var(--text-secondary); }

.kpi-value {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}

.kpi-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.70rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}
.kpi-trend.up   { background: var(--positive-bg); color: var(--positive); }
.kpi-trend.down { background: var(--danger-bg);   color: var(--danger); }

.kpi-sparkline { flex: 1; height: 28px; }

/* ═══════════════════════════════════════════════
   N9. DONUT CHART  — SVG inside chart-wrap
═══════════════════════════════════════════════ */
.donut-wrap {
  display: flex;
  align-items: center;
  gap: 24px;
}

.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.donut-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.donut-legend-color {
  width: 10px; height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.donut-legend-pct {
  margin-left: auto;
  padding-left: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════
   N10. GAUGE — SVG inside chart-wrap
═══════════════════════════════════════════════ */
/* No extra CSS needed beyond chart-wrap — all in SVG */

/* ═══════════════════════════════════════════════
   N11. RANGE SLIDER
═══════════════════════════════════════════════ */
.slider-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.slider-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.slider-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.slider-value {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
}

.slider-track {
  position: relative;
  height: 28px;
  display: flex;
  align-items: center;
}

input[type="range"].slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 7px;
  background: var(--surface-deep);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-inset);
  outline: none;
  cursor: pointer;
}

input[type="range"].slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--panel);
  border: 2px solid var(--border);
  box-shadow:
    0 2px 5px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.8);
  transition: box-shadow var(--t);
  cursor: grab;
}

input[type="range"].slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  box-shadow:
    0 3px 8px rgba(0,0,0,0.22),
    0 0 0 4px rgba(30,30,30,0.08),
    inset 0 1px 0 rgba(255,255,255,0.8);
}

/* ═══════════════════════════════════════════════
   N12. TAG / CHIP INPUT
═══════════════════════════════════════════════ */
.tag-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tag-input-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-inset);
  cursor: text;
  min-height: 42px;
  align-items: center;
  transition: border-color var(--t), box-shadow var(--t);
}

.tag-input-wrap:focus-within {
  border-color: rgba(30,30,30,0.25);
  box-shadow: var(--shadow-inset), 0 0 0 3px rgba(30,30,30,0.07);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--surface-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 3px 9px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  transition: all var(--t);
}

.chip:hover { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }

.chip-remove {
  width: 14px; height: 14px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--t);
  flex-shrink: 0;
}
.chip-remove:hover { opacity: 1; }
.chip-remove svg { width: 9px; height: 9px; }

.tag-text-input {
  border: none;
  background: none;
  outline: none;
  font-family: var(--font);
  font-size: 0.82rem;
  color: var(--text-primary);
  min-width: 80px;
  flex: 1;
}
.tag-text-input::placeholder { color: var(--text-muted); }

/* ═══════════════════════════════════════════════
   N13. TEXTAREA
═══════════════════════════════════════════════ */
.textarea {
  width: 100%;
  border: 1px solid rgba(0,0,0,0.06);
  border-top-color: rgba(0,0,0,0.12);
  border-left-color: rgba(0,0,0,0.10);
  border-radius: var(--radius-md);
  padding: 10px 13px;
  font-family: var(--font);
  font-size: 0.83rem;
  color: var(--text-primary);
  background: #ffffff;
  outline: none;
  resize: vertical;
  min-height: 90px;
  line-height: 1.55;
  transition: all var(--t) var(--ease);
  box-shadow: var(--shadow-field);
  -webkit-appearance: none;
}
.textarea::placeholder { color: var(--text-muted); }
.textarea:focus {
  background: #f5f5f5;
  border-color: rgba(30,30,30,0.14);
  border-top-color: rgba(30,30,30,0.20);
  box-shadow: var(--shadow-field), 0 0 0 3px rgba(30,30,30,0.07);
}

/* ═══════════════════════════════════════════════
   N14. FILE UPLOAD / DRAG & DROP
═══════════════════════════════════════════════ */
.upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition: all var(--t) var(--ease);
  background: #ffffff;
  box-shadow: var(--shadow-inset);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.upload-zone:hover,
.upload-zone.drag-over {
  border-color: rgba(30,30,30,0.30);
  background: var(--accent-soft);
  box-shadow:
    inset 2px 2px 6px rgba(0,0,0,0.06),
    0 0 0 4px rgba(30,30,30,0.05);
}

.upload-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: var(--surface-deep);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.upload-icon svg { width: 18px; height: 18px; color: var(--text-muted); }

.upload-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}

.upload-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.upload-types {
  font-size: 0.65rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════
   N15. AVATAR + STATUS BADGE
═══════════════════════════════════════════════ */
.avatar-wrap {
  position: relative;
  display: inline-flex;
}

.avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c0c0c0, #909090);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2);
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 28px; height: 28px; font-size: 0.65rem; }
.avatar-lg { width: 48px; height: 48px; font-size: 0.92rem; }

.avatar-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg);
}
.avatar-status.online  { background: var(--positive); }
.avatar-status.offline { background: var(--text-muted); }
.avatar-status.busy    { background: var(--danger); }
.avatar-status.away    { background: var(--warning); }

.avatar-group {
  display: inline-flex;
}
.avatar-group .avatar-wrap + .avatar-wrap { margin-left: -10px; }
.avatar-group .avatar { border: 2px solid var(--bg); }

/* ═══════════════════════════════════════════════
   N16. CONTEXT MENU (3 dots)
═══════════════════════════════════════════════ */
.ctx-wrap {
  position: relative;
  display: inline-flex;
}

.ctx-trigger {
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: all var(--t);
  border: none;
  background: none;
}
.ctx-trigger:hover { background: var(--accent-soft); color: var(--text-primary); }
.ctx-trigger svg { width: 16px; height: 16px; }

.ctx-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px;
  min-width: 170px;
  box-shadow:
    0 6px 20px rgba(0,0,0,0.12),
    0 2px 6px rgba(0,0,0,0.07);
  z-index: 200;
  display: none;
  animation: menuIn 0.14s var(--ease);
}

@keyframes menuIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ctx-wrap.open .ctx-menu { display: block; }

.ctx-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.80rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--t);
  user-select: none;
}
.ctx-item:hover { background: var(--accent-soft); color: var(--text-primary); }
.ctx-item.danger:hover { background: var(--danger-bg); color: var(--danger); }
.ctx-item svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.7; }

.ctx-sep {
  height: 1px;
  background: var(--border-soft);
  margin: 3px 6px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.7);
}

/* ═══════════════════════════════════════════════
   N17. MODAL / DIALOG
═══════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.28);
  backdrop-filter: blur(3px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.18s var(--ease);
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-overlay.hidden { display: none; }

.modal {
  background: var(--panel);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 480px;
  box-shadow:
    0 24px 64px rgba(0,0,0,0.20),
    0 4px 12px rgba(0,0,0,0.10);
  animation: modalIn 0.22s var(--ease);
  overflow: hidden;
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--border-soft);
}

.modal-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.modal-close {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: all var(--t);
  border: none; background: none;
}
.modal-close:hover { background: var(--accent-soft); color: var(--text-primary); }
.modal-close svg { width: 15px; height: 15px; }

.modal-body {
  padding: 20px 22px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px 20px;
  border-top: 1px solid var(--border-soft);
}

/* ═══════════════════════════════════════════════
   N18. NOTIFICATION BELL
═══════════════════════════════════════════════ */
.notif-wrap {
  position: relative;
  display: inline-flex;
}

.notif-btn {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  color: var(--text-secondary);
  transition: all var(--t);
  box-shadow: var(--shadow-xs);
}
.notif-btn:hover { background: var(--panel); color: var(--text-primary); }
.notif-btn svg { width: 17px; height: 17px; }

.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--danger);
  color: #fff;
  font-size: 0.60rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--bg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.20);
}

.notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 300px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow:
    0 10px 32px rgba(0,0,0,0.13),
    0 2px 6px rgba(0,0,0,0.07);
  z-index: 300;
  overflow: hidden;
  display: none;
  animation: menuIn 0.16s var(--ease);
}
.notif-wrap.open .notif-panel { display: block; }

.notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border-soft);
}

.notif-panel-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.notif-view-log-btn {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid var(--border-soft);
  background: #fff;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.notif-view-log-btn svg {
  width: 14px;
  height: 14px;
}
.notif-view-log-btn:hover {
  color: var(--text-primary);
  border-color: var(--border);
}

.notif-panel-title {
  font-size: 0.80rem;
  font-weight: 600;
  color: var(--text-primary);
}

.notif-mark-all {
  font-size: 0.68rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--t);
}
.notif-mark-all:hover { color: var(--text-primary); }

.notif-item {
  display: flex;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-soft);
  transition: background var(--t);
  cursor: pointer;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--accent-softer); }
.notif-item.unread { background: rgba(30,30,30,0.03); }

.notif-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 5px;
}
.notif-item:not(.unread) .notif-dot { opacity: 0; }
.notif-item[data-notif-sev="success"] .notif-dot { background: #22c55e; }
.notif-item[data-notif-sev="info"] .notif-dot { background: #3b82f6; }
.notif-item[data-notif-sev="warning"] .notif-dot,
.notif-item[data-notif-sev="medium"] .notif-dot { background: #f59e0b; }
.notif-item[data-notif-sev="error"] .notif-dot,
.notif-item[data-notif-sev="high"] .notif-dot,
.notif-item[data-notif-sev="critical"] .notif-dot { background: #ef4444; }

.notif-content { flex: 1; min-width: 0; }
.notif-text { font-size: 0.76rem; color: var(--text-primary); line-height: 1.4; }
.notif-time { font-size: 0.65rem; color: var(--text-muted); margin-top: 2px; }

.notif-log-modal {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.46);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 36000;
}
.notif-log-modal.open {
  display: flex;
}
.notif-log-modal-card {
  width: min(1120px, calc(100vw - 40px));
  max-height: min(82vh, 780px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  display: grid;
  grid-template-rows: auto auto 1fr;
  overflow: hidden;
}
.notif-log-modal-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.notif-log-modal-head h3 {
  margin: 0;
  font-size: 18px;
}
.notif-log-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  background: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.notif-log-modal-filters {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-soft);
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 0.9fr auto;
  gap: 12px;
  align-items: end;
}
.notif-log-actions {
  display: flex;
  justify-content: flex-end;
}
.notif-log-modal-body {
  padding: 0;
  overflow: auto;
}
.notif-log-table th,
.notif-log-table td {
  font-size: 12px;
}

/* ═══════════════════════════════════════════════
   N19. TIMELINE / ACTIVITY FEED
═══════════════════════════════════════════════ */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.timeline-item {
  display: flex;
  gap: 14px;
  position: relative;
  padding-bottom: 20px;
}

.timeline-item:last-child { padding-bottom: 0; }

.timeline-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 28px;
}

.timeline-node {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-xs);
  z-index: 1;
}
.timeline-node svg { width: 13px; height: 13px; color: var(--text-muted); }
.timeline-node.success { border-color: var(--positive); background: var(--positive-bg); }
.timeline-node.success svg { color: var(--positive); }
.timeline-node.danger  { border-color: var(--danger);   background: var(--danger-bg); }
.timeline-node.danger  svg { color: var(--danger); }

.timeline-line {
  flex: 1;
  width: 1px;
  margin-top: 4px;
  box-shadow: 1px 0 0 rgba(0,0,0,0.10), -1px 0 0 rgba(255,255,255,0.7);
  min-height: 16px;
}

.timeline-content {
  flex: 1;
  padding-top: 4px;
}

.timeline-title {
  font-size: 0.80rem;
  font-weight: 600;
  color: var(--text-primary);
}

.timeline-desc {
  font-size: 0.74rem;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.4;
}

.timeline-time {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════
   CHECK-LIST TABLE
═══════════════════════════════════════════════ */
.checklist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.checklist-body {
  display: flex;
  flex-direction: column;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.10) transparent;
}

.checklist-body::-webkit-scrollbar {
  width: 6px;
}
.checklist-body::-webkit-scrollbar-track {
  background: transparent;
  margin-bottom: 6px;
}
.checklist-body::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
  border-radius: var(--radius-full);
}

.checklist-header {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}  
  
.checklist-header .tooltip {
  bottom: auto;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
}

.checklist-header .tooltip-wrap:hover .tooltip {
  transform: translateX(-50%) translateY(0);
}

.checklist-header .tooltip::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--accent);
}
  

/* Header con seleccionar-todo */
.checklist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  color: #545050;
  background: #d4d4d4;
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 -1px 0 var(--border-soft);
  position: sticky;
  top: 0;
}

.checklist-header-label {
  font-size: 0.70rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #545050;
}

.checklist-item:last-child {
  border-bottom: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}  
  
.checklist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: #ffffff;
  cursor: pointer;
  user-select: none;
  transition: background var(--t) var(--ease);
  border-bottom: 1px solid var(--border-soft);
}

.checklist-item:last-child {
  border-bottom: none;
}

.checklist-item:hover {
  background: var(--accent-softer);
}

.checklist-item.checked {
  background: var(--accent-softer);
}

.checklist-box {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--t) var(--ease);
  box-shadow: var(--shadow-inset);
}

.checklist-box svg {
  width: 11px;
  height: 11px;
  color: transparent;
  transition: color var(--t) var(--ease);
}

.checklist-item.checked .checklist-box {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.checklist-item.checked .checklist-box svg {
  color: #fff;
}

.checklist-label {
  flex: 1;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--t);
}

.checklist-item.checked .checklist-label {
  color: var(--text-primary);
}

.checklist-meta {
  font-size: 0.70rem;
  color: var(--text-muted);
  flex-shrink: 0;
}


.checklist-all-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.checklist-all-btn {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: background var(--t), color var(--t);
  position: relative;
}

.checklist-all-btn:hover {
  background: var(--accent-soft);
  color: var(--text-primary);
}

.checklist-all-btn svg {
  width: 14px;
  height: 14px;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════
   INFO / HELP ICON BUTTONS  (N18)
═══════════════════════════════════════════════ */
:root {
  --info-accent:      #2563eb;
  --info-bg:          #dbeafe;
  --help-accent:      #7c3aed;
  --help-bg:          #ede9fe;
  --docs-accent:      #0891b2;
  --docs-bg:          #cffafe;
  --shortcuts-accent: #475569;
  --shortcuts-bg:     #e2e8f0;
}

/* Base button */
.info-icon-btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  border:           none;
  border-radius:    var(--radius-full);
  cursor:           pointer;
  transition:       background var(--t) var(--ease),
                    color var(--t) var(--ease),
                    transform 0.12s var(--ease),
                    box-shadow var(--t) var(--ease);
  flex-shrink:      0;
  line-height:      1;
}

.info-icon-btn:active { transform: scale(0.92); }

/* Sizes */
.info-icon-btn.info-size-sm  { width:18px; height:18px; }
.info-icon-btn.info-size-sm svg { width:12px; height:12px; }

.info-icon-btn.info-size-md  { width:26px; height:26px; }
.info-icon-btn.info-size-md svg { width:15px; height:15px; }

.info-icon-btn.info-size-lg  { width:34px; height:34px; }
.info-icon-btn.info-size-lg svg { width:19px; height:19px; }

/* Default (no size modifier) — same as sm when inline */
.info-icon-btn:not([class*="info-size-"]) { width:18px; height:18px; }
.info-icon-btn:not([class*="info-size-"]) svg { width:12px; height:12px; }

/* Type variants */
.info-type-info {
  background: var(--info-bg);
  color:      var(--info-accent);
  box-shadow: 0 1px 2px rgba(37,99,235,0.10);
}
.info-type-info:hover {
  background: #bfdbfe;
  box-shadow: 0 2px 6px rgba(37,99,235,0.18);
}

.info-type-help {
  background: var(--help-bg);
  color:      var(--help-accent);
  box-shadow: 0 1px 2px rgba(124,58,237,0.10);
}
.info-type-help:hover {
  background: #ddd6fe;
  box-shadow: 0 2px 6px rgba(124,58,237,0.18);
}

.info-type-warning {
  background: var(--warning-bg);
  color:      var(--warning);
  box-shadow: 0 1px 2px rgba(200,134,10,0.10);
}
.info-type-warning:hover {
  background: #fde68a;
  box-shadow: 0 2px 6px rgba(200,134,10,0.20);
}

.info-type-tip {
  background: var(--positive-bg);
  color:      var(--positive);
  box-shadow: 0 1px 2px rgba(58,158,111,0.10);
}
.info-type-tip:hover {
  background: #bbf7d0;
  box-shadow: 0 2px 6px rgba(58,158,111,0.18);
}

.info-type-docs {
  background: var(--docs-bg);
  color:      var(--docs-accent);
  box-shadow: 0 1px 2px rgba(8,145,178,0.10);
}
.info-type-docs:hover {
  background: #a5f3fc;
  box-shadow: 0 2px 6px rgba(8,145,178,0.18);
}

.info-type-shortcuts {
  background: var(--shortcuts-bg);
  color:      var(--shortcuts-accent);
  box-shadow: 0 1px 2px rgba(71,85,105,0.10);
}
.info-type-shortcuts:hover {
  background: #cbd5e1;
  box-shadow: 0 2px 6px rgba(71,85,105,0.18);
}

/* Inline label + icon wrapper */
.info-inline {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  font-size:   0.83rem;
  font-weight: 500;
  color:       var(--text-primary);
}

/* ── Info Modal ── */
.info-modal {
  max-width: 440px;
}

.info-modal-icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  margin-right:    8px;
  flex-shrink:     0;
  vertical-align:  middle;
  margin-top:      -1px;
}

.info-modal-body {
  font-size:   0.875rem;
  line-height: 1.65;
  color:       var(--text-secondary);
}

.info-modal-body strong { color: var(--text-primary); font-weight: 600; }
.info-modal-body em     { font-style: italic; color: var(--text-primary); }
.info-modal-body code {
  font-family:   'SFMono-Regular', 'Consolas', monospace;
  font-size:     0.78rem;
  background:    var(--surface-deep);
  border:        1px solid var(--border);
  border-radius: 4px;
  padding:       1px 5px;
  color:         var(--text-primary);
}

/* Shortcuts grid inside modal */
.shortcut-grid {
  display:               grid;
  grid-template-columns: auto 1fr;
  gap:                   8px 14px;
  align-items:           center;
  margin-top:            4px;
}

.kbd {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  font-family:     'SFMono-Regular', 'Consolas', monospace;
  font-size:       0.72rem;
  font-weight:     600;
  padding:         2px 7px;
  background:      var(--surface-deep);
  border:          1px solid var(--border);
  border-bottom:   2px solid rgba(0,0,0,0.15);
  border-radius:   5px;
  white-space:     nowrap;
  color:           var(--text-primary);
  box-shadow:      var(--shadow-xs);
}

/* Type-specific header accent stripe */
.info-modal[data-type="info"]      .modal-header { border-top: 3px solid var(--info-accent);      border-radius: var(--radius-md) var(--radius-md) 0 0; }
.info-modal[data-type="help"]      .modal-header { border-top: 3px solid var(--help-accent);      border-radius: var(--radius-md) var(--radius-md) 0 0; }
.info-modal[data-type="warning"]   .modal-header { border-top: 3px solid var(--warning);           border-radius: var(--radius-md) var(--radius-md) 0 0; }
.info-modal[data-type="tip"]       .modal-header { border-top: 3px solid var(--positive);          border-radius: var(--radius-md) var(--radius-md) 0 0; }
.info-modal[data-type="docs"]      .modal-header { border-top: 3px solid var(--docs-accent);       border-radius: var(--radius-md) var(--radius-md) 0 0; }
.info-modal[data-type="shortcuts"] .modal-header { border-top: 3px solid var(--shortcuts-accent);  border-radius: var(--radius-md) var(--radius-md) 0 0; }

/* ═══════════════════════════════════════════════
   N11b — COMPARISON GAUGE (read-only)
═══════════════════════════════════════════════ */
.cgauge-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cgauge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.cgauge-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.cgauge-deviation {
  font-size: 0.70rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  padding: 1px 8px;
  flex-shrink: 0;
}
.cgauge-dev-positive { color: #2e8b57; background: rgba(46,139,87,0.12); }
.cgauge-dev-warning  { color: #c8860a; background: rgba(200,134,10,0.12); }
.cgauge-dev-orange   { color: #d4620a; background: rgba(212,98,10,0.12); }
.cgauge-dev-danger   { color: #c0392b; background: rgba(192,57,43,0.12); }

.cgauge-track-wrap { padding: 12px 0 4px; }
.cgauge-track {
  position: relative;
  height: 8px;
  background: var(--surface-deep);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-inset);
  pointer-events: none;
  user-select: none;
}
.cgauge-fill {
  position: absolute;
  top: 0; height: 100%;
  border-radius: var(--radius-full);
}
.cgauge-vr-line {
  position: absolute;
  top: -5px; bottom: -5px;
  width: 2px; margin-left: -1px;
  background: var(--text-primary);
  border-radius: 2px;
  opacity: 0.30;
}
.cgauge-vr-line::after {
  content: '';
  position: absolute;
  top: -3px; left: 50%;
  transform: translateX(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-primary);
  opacity: 0.5;
}
.cgauge-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cgauge-thumb-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--thumb-color, #1e1e1e);
  border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18), 0 0 0 2px var(--thumb-bg, rgba(0,0,0,0.1));
  flex-shrink: 0;
}
.cgauge-thumb-label {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%; transform: translateX(-50%);
  font-size: 0.68rem; font-weight: 700;
  color: var(--thumb-color, var(--text-primary));
  white-space: nowrap;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  box-shadow: var(--shadow-xs);
  pointer-events: none;
}
.cgauge-axis {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}
.cgauge-axis-val { font-size: 0.65rem; color: var(--text-muted); }
.cgauge-axis-ref { font-size: 0.65rem; font-weight: 600; color: var(--text-secondary); }
.cgauge-axis-ref em { font-style: normal; font-weight: 400; color: var(--text-muted); }


/* ═══════════════════════════════════════════════
   N11c — PROGRESS BAR GAUGE (read-only)
═══════════════════════════════════════════════ */
.pgauge-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.pgauge-values {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-primary);
}
.pgauge-values em {
  font-style: normal;
  font-weight: 400;
  color: var(--text-muted);
}
.pgauge-track-wrap { padding: 6px 0 4px; }
.pgauge-track {
  position: relative;
  height: 10px;
  background: var(--surface-deep);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-inset);
  overflow: visible;
  pointer-events: none;
  user-select: none;
}
.pgauge-bar {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.6s cubic-bezier(0.25,0.46,0.45,0.94),
              background 0.4s var(--ease);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
/* Reference marker: vertical pin above the bar */
.pgauge-vr-line {
  position: absolute;
  top: -6px; bottom: -6px;
  width: 2px; margin-left: -1px;
  background: var(--text-primary);
  border-radius: 2px;
  opacity: 0.28;
  pointer-events: none;
}
.pgauge-vr-tip {
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(30,30,30,0.28);
}

/* ═══════════════════════════════════════════════
   PROBABILITY TOKENS
═══════════════════════════════════════════════ */
:root {
  --prob-high:     #3a9e6f; --prob-high-bg: #d6f0e4;
  --prob-good:     #2563eb; --prob-good-bg: #dbeafe;
  --prob-mid:      #c8860a; --prob-mid-bg:  #fef0d0;
  --prob-low:      #c0392b; --prob-low-bg:  #fde8e6;
}

/* ── Badge blue variant ── */
.badge-blue { background: var(--prob-good-bg); color: var(--prob-good); }

/* ═══════════════════════════════════════════════
   N20 — PROBABILIDAD · ARCO SEMICIRCULAR
═══════════════════════════════════════════════ */
.prob-arc-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* ═══════════════════════════════════════════════
   N21 — PROBABILIDAD · BARRA SEGMENTADA
═══════════════════════════════════════════════ */
.prob-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.prob-label {
  font-size: 0.70rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.prob-seg-wrap { display: flex; flex-direction: column; gap: 7px; }

.prob-seg-track {
  position: relative;
  height: 10px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-inset);
  display: flex;
  overflow: hidden;
  background: var(--surface-deep);
}
.prob-seg-zone          { height: 100%; transition: opacity var(--t); }
.prob-seg-zone.z1       { flex: 25; background: var(--prob-low); }
.prob-seg-zone.z2       { flex: 25; background: var(--prob-mid); }
.prob-seg-zone.z3       { flex: 25; background: var(--prob-good); }
.prob-seg-zone.z4       { flex: 25; background: var(--prob-high); }
.prob-seg-zone.dimmed   { opacity: 0.14; }

.prob-seg-needle {
  position: absolute;
  top: -3px; bottom: -3px;
  width: 2.5px; margin-left: -1.25px;
  background: var(--text-primary);
  border-radius: 2px;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.85);
}

.prob-seg-zones-label {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
}
.prob-seg-zones-label span {
  font-size: 0.58rem;
  color: var(--text-muted);
  flex: 1;
  text-align: center;
}
.prob-seg-zones-label span:first-child { text-align: left; }
.prob-seg-zones-label span:last-child  { text-align: right; }
.prob-al { font-weight: 700; color: var(--prob-low); }
.prob-am { font-weight: 700; color: var(--prob-mid); }
.prob-ag { font-weight: 700; color: var(--prob-good); }
.prob-ah { font-weight: 700; color: var(--prob-high); }

/* Inline list */
.prob-inline-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--border-soft);
}
.prob-inline-row:last-child { border-bottom: none; }
.prob-inline-name  { font-size: 0.82rem; color: var(--text-secondary); flex: 1; }
.prob-inline-bar-wrap {
  width: 90px; height: 6px;
  background: var(--surface-deep); border-radius: var(--radius-full);
  box-shadow: var(--shadow-inset); overflow: hidden; flex-shrink: 0;
}
.prob-inline-bar   { height: 100%; border-radius: var(--radius-full); }
.prob-inline-pct   { font-size: 0.75rem; font-weight: 700; min-width: 32px; text-align: right; flex-shrink: 0; }

/* ═══════════════════════════════════════════════
   N22 — PROBABILIDAD · ANILLO CIRCULAR
═══════════════════════════════════════════════ */
.prob-ring-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.prob-ring-inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════
   N23 — PROBABILIDAD · TERMÓMETRO VERTICAL
═══════════════════════════════════════════════ */
.prob-thermo-outer {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.prob-thermo-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.prob-thermo-tube {
  border-radius: var(--radius-full);
  background: var(--surface-deep);
  box-shadow: var(--shadow-inset);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.prob-thermo-fill  { width: 100%; border-radius: var(--radius-full); }
.prob-thermo-bulb  { border-radius: 50%; box-shadow: var(--shadow-sm); flex-shrink: 0; }
.prob-thermo-labels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.prob-thermo-zone-lbl {
  font-size: 0.60rem; color: var(--text-muted);
  white-space: nowrap; display: flex; align-items: center; gap: 5px;
}
.prob-thermo-zone-lbl::before {
  content: ''; width: 6px; height: 1.5px;
  border-radius: 1px; background: currentColor; opacity: 0.45; flex-shrink: 0;
}
.tl { font-weight: 700; color: var(--prob-low); }
.tm { font-weight: 700; color: var(--prob-mid); }
.tg { font-weight: 700; color: var(--prob-good); }
.th { font-weight: 700; color: var(--prob-high); }