/* ── Tooltip wrapper (position: relative context) ── */
.k1-tooltip-wrap {
  position: relative;
  display: inline-flex;
}

/* ── Base bubble ── */
.k1-tooltip {
  position: absolute;
  z-index: 500;
  max-width: 240px;
  padding: var(--space-3) var(--space-4);   /* 12px 16px */
  border-radius: var(--radius-md);           /* 8px */
  font-family: var(--font);
  font-size: var(--text-md);                 /* 14px */
  font-weight: var(--fw-regular);
  line-height: 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  white-space: normal;
}

/* ── Themes ── */
.k1-tooltip-light {
  background: #ffffff;
  color: #131523;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}
.k1-tooltip-dark {
  background: #131523;
  color: #ffffff;
  box-shadow: var(--shadow-md);
}

/* ── Arrow ── */
.k1-tooltip::after {
  content: '';
  position: absolute;
  width: 0; height: 0;
  border: 6px solid transparent;
}

/* ── Position: bottom (arrow at bottom of bubble) ── */
.k1-tooltip-bottom { bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px); }
.k1-tooltip-bottom::after { top: 100%; left: 50%; transform: translateX(-50%); }
.k1-tooltip-light.k1-tooltip-bottom::after { border-top-color: #ffffff; }
.k1-tooltip-dark.k1-tooltip-bottom::after  { border-top-color: #131523; }

/* ── Position: top (arrow at top of bubble) ── */
.k1-tooltip-top { top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-4px); }
.k1-tooltip-top::after { bottom: 100%; left: 50%; transform: translateX(-50%); }
.k1-tooltip-light.k1-tooltip-top::after { border-bottom-color: #ffffff; }
.k1-tooltip-dark.k1-tooltip-top::after  { border-bottom-color: #131523; }

/* ── Position: right ── */
.k1-tooltip-right { left: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(-4px); }
.k1-tooltip-right::after { right: 100%; top: 50%; transform: translateY(-50%); }
.k1-tooltip-light.k1-tooltip-right::after { border-right-color: #ffffff; }
.k1-tooltip-dark.k1-tooltip-right::after  { border-right-color: #131523; }

/* ── Position: left ── */
.k1-tooltip-left { right: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(4px); }
.k1-tooltip-left::after { left: 100%; top: 50%; transform: translateY(-50%); }
.k1-tooltip-light.k1-tooltip-left::after { border-left-color: #ffffff; }
.k1-tooltip-dark.k1-tooltip-left::after  { border-left-color: #131523; }

/* ── Show on hover ── */
.k1-tooltip-wrap:hover .k1-tooltip-bottom,
.k1-tooltip-wrap:hover .k1-tooltip-top {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
.k1-tooltip-wrap:hover .k1-tooltip-right,
.k1-tooltip-wrap:hover .k1-tooltip-left {
  opacity: 1; transform: translateY(-50%) translateX(0);
}

<!-- pTooltip directive — 4 positions -->
<button
  pTooltip="Ver detalles del incidente"
  tooltipPosition="bottom"
  styleClass="k1-tooltip-dark"
  class="k1-btn k1-btn-icon-only k1-btn-ghost"
>
  <!-- icon -->
</button>

<!-- tooltipPosition options: bottom | top | right | left -->
<!-- styleClass: k1-tooltip-light (white bg) OR k1-tooltip-dark (dark bg) -->

/* Override PrimeNG tooltip to match K1 spec */
.p-tooltip .p-tooltip-text {
  font-family: var(--font);         /* Public Sans */
  font-size: var(--text-md);         /* 14px */
  font-weight: var(--fw-regular);    /* 400 */
  line-height: 20px;
  padding: var(--space-3) var(--space-4);  /* 12px 16px */
  border-radius: var(--radius-md);   /* 8px */
  max-width: 240px;
  box-shadow: var(--shadow-md);
}

/* Dark theme (default for K1 dark mode) */
.p-tooltip.k1-tooltip-dark .p-tooltip-text {
  background: #131523;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.08);
}
.p-tooltip.k1-tooltip-dark.p-tooltip-bottom .p-tooltip-arrow  { border-bottom-color: #131523; }
.p-tooltip.k1-tooltip-dark.p-tooltip-top    .p-tooltip-arrow  { border-top-color: #131523; }
.p-tooltip.k1-tooltip-dark.p-tooltip-right  .p-tooltip-arrow  { border-right-color: #131523; }
.p-tooltip.k1-tooltip-dark.p-tooltip-left   .p-tooltip-arrow  { border-left-color: #131523; }

/* Light theme */
.p-tooltip.k1-tooltip-light .p-tooltip-text {
  background: #ffffff;
  color: #131523;
  border: 1px solid var(--color-border);
}
.p-tooltip.k1-tooltip-light.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #ffffff; }
.p-tooltip.k1-tooltip-light.p-tooltip-top    .p-tooltip-arrow { border-top-color: #ffffff; }
.p-tooltip.k1-tooltip-light.p-tooltip-right  .p-tooltip-arrow { border-right-color: #ffffff; }
.p-tooltip.k1-tooltip-light.p-tooltip-left   .p-tooltip-arrow { border-left-color: #ffffff; }

/* ── Dropdown ── */
.p-dropdown {
  height: var(--h-md);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-md);
  font-family: var(--font);
  color: var(--field-text);
  transition: border-color 0.15s ease;
}
.p-dropdown:hover { border-color: var(--color-primary); }
.p-dropdown.p-focus { box-shadow: var(--focus-ring); border-color: var(--color-primary); outline: none; }

/* ── Dropdown Panel ── */
.p-dropdown-panel {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
}
.p-dropdown-item {
  font-family: var(--font);
  font-size: var(--text-base);
  color: var(--color-text-1);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
}
.p-dropdown-item:hover,
.p-dropdown-item.p-highlight {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}

/* ── InputText ── */
.p-inputtext {
  height: var(--h-md);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: var(--text-base);
  color: var(--field-text);
  padding: 0 var(--space-3);
  width: 100%;
}
.p-inputtext:focus { box-shadow: var(--focus-ring); border-color: var(--color-primary); outline: none; }

/* ── Calendar / DatePicker ── */
.p-calendar .p-inputtext { width: 100%; }
.p-datepicker {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
}
.p-datepicker td > span:hover,
.p-datepicker td > span.p-highlight {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  border-radius: var(--radius-sm);
}

// Design System components
import { K1Select, K1Input, K1Textarea, K1Number, K1DatePicker } from '@/design-system/components';

// K1Select — wraps PrimeReact Dropdown
<K1Select
  value={value}
  options={['Option A', 'Option B']}
  onChange={v => setValue(v)}
  placeholder="Select…"
/>

// With object options
<K1Select
  value={status}
  options={[
    { label: 'Active', value: 'active' },
    { label: 'Closed', value: 'closed' },
  ]}
  onChange={v => setStatus(v)}
/>

// K1Input
<K1Input value={val} onChange={e => setVal(e.target.value)} placeholder="Enter text…" />

// k1-status-pill variant (for status dropdowns)
<K1Select
  className="k1-status-pill"
  value={status}
  options={statusOptions}
  onChange={v => setStatus(v)}
  style={{ background: 'var(--color-primary)', color: '#fff' }}
/>

.p-dialog {
  background: var(--panel-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
}
.p-dialog .p-dialog-header {
  background: var(--panel-header-bg);
  border-bottom: 1px solid var(--border);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-lg); font-weight: var(--fw-semibold);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.p-dialog .p-dialog-content {
  padding: var(--space-5) var(--space-6);
  background: var(--panel-bg);
}
.p-dialog .p-dialog-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: var(--space-2);
}
.p-dialog-mask { background: var(--overlay-bg); }
.p-dialog .p-dialog-header-icon {
  color: var(--text-tertiary);
  &:hover { background: var(--chip); color: var(--text-primary); }
}

.p-toast .p-toast-message {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  color: var(--text-primary);
}
.p-toast .p-toast-message.p-toast-message-success {
  border-color: var(--success);
  border-left: 3px solid var(--success);
}
.p-toast .p-toast-message.p-toast-message-error {
  border-left: 3px solid var(--error);
}
.p-toast .p-toast-message.p-toast-message-warn {
  border-left: 3px solid var(--warning);
}
.p-toast .p-toast-message-content {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
}

.p-datatable { border-radius: var(--radius-lg); overflow: hidden; }
.p-datatable .p-datatable-thead > tr > th {
  background: var(--panel-header-bg);
  color: var(--text-tertiary);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.p-datatable .p-datatable-tbody > tr {
  background: var(--row-bg);
  border-bottom: 1px solid var(--border);
  transition: background 0.10s;
  &:hover { background: var(--row-hover); }
}
.p-datatable .p-datatable-tbody > tr > td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base); color: var(--text-primary);
  border: none;
}
.p-paginator {
  background: var(--panel-bg);
  border-top: 1px solid var(--border);
  padding: var(--space-2) var(--space-4);
}
.p-paginator .p-paginator-page.p-highlight {
  background: var(--primary);
  color: #fff; border-radius: var(--radius-sm);
}

.p-tag {
  font-size: var(--text-xs); font-weight: 600; border-radius: var(--radius-sm);
  padding: 2px var(--space-2); border: 1px solid transparent;
}
.p-tag.p-tag-success { background: var(--success-subtle-bg); color: var(--success); border-color: var(--success-subtle-border); }
.p-tag.p-tag-warning { background: var(--warning-subtle-bg); color: var(--warning); border-color: var(--warning-subtle-border); }
.p-tag.p-tag-danger  { background: var(--error-subtle-bg);   color: var(--error);   border-color: var(--error-subtle-border); }
.p-tag.p-tag-info    { background: var(--color-primary-subtle); color: var(--primary); }

.p-chip {
  background: var(--chip);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: var(--text-xs); height: 24px; padding: 0 var(--space-2);
}

// Set dark mode
document.documentElement.setAttribute('data-theme', 'dark');

// Set light mode
document.documentElement.setAttribute('data-theme', 'light');

// React hook example
const useTheme = () => {
  const [theme, setTheme] = useState<'dark' | 'light'>('dark');
  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
  }, [theme]);
  return { theme, setTheme };
};

<div className="k1-field">
  <label className="k1-label" htmlFor="incident-title">
    Incident Title <span className="k1-required">*</span>
  </label>
  <K1Input
    id="incident-title"
    value={title}
    onChange={e => setTitle(e.target.value)}
    placeholder="e.g. Traffic accident on Av. Principal"
  />
  {error && <span className="k1-field-error">{error}</span>}
</div>

const STATUS_COLORS: Record<string, string> = {
  nuevo:    'var(--status-nuevo-bg)',
  revision: 'var(--status-revision-bg)',
  asignado: 'var(--status-asignado-bg)',
  escena:   'var(--status-escena-bg)',
  cerrado:  'var(--status-cerrado-bg)',
};

<K1Select
  className="k1-status-pill"
  value={status}
  options={statusOptions}
  onChange={v => setStatus(v)}
  style={{ background: STATUS_COLORS[status] }}
/>

<div style={{ display: 'flex', height: '100vh', overflow: 'hidden' }}>
  {/* Sidebar — fixed 210px */}
  <aside style={{
    width: '210px',
    flexShrink: 0,
    background: 'var(--sidebar-bg)',
    borderRight: '1px solid var(--color-border)',
    display: 'flex',
    flexDirection: 'column',
    overflowY: 'auto',
  }}>
    <SidebarNav />
  </aside>

  {/* Main content — flex-1 */}
  <main style={{
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
    overflow: 'hidden',
    background: 'var(--color-bg)',
  }}>
    <HeaderBar />
    <div style={{ flex: 1, overflowY: 'auto', padding: 'var(--space-6)' }}>
      <Outlet />
    </div>
  </main>
</div>

/* ── K1 PrimeNG Base Override ── */
:root {
  /* Map PrimeNG theme vars to K1 tokens */
  --primary-color:      var(--color-primary);
  --primary-color-text: #ffffff;
  --surface-0:  var(--color-bg);
  --surface-50: var(--color-surface-1);
  --surface-100:var(--color-surface-2);
  --surface-200:var(--color-surface-3);
  --surface-300:var(--color-surface-4);
  --text-color:        var(--color-text-1);
  --text-color-secondary:var(--color-text-2);
  --border-radius:     var(--radius-md);
  --focus-ring:        var(--focus-ring);
}

/* Force Public Sans on all PrimeNG elements */
.p-component { font-family: var(--font) !important; }
.p-inputtext { font-family: var(--font) !important; }
.p-button    { font-family: var(--font) !important; }
.p-dropdown  { font-family: var(--font) !important; }
.p-datatable { font-family: var(--font) !important; }

/* Remove ALL PrimeNG button defaults */
.p-button {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--h-lg);             /* 40px */
  padding: 0 var(--space-4);        /* 0 16px */
  border-radius: var(--radius-md);  /* 8px */
  font-family: var(--font);
  font-size: var(--text-md);        /* 14px */
  font-weight: var(--fw-medium);    /* 500 */
  background: var(--color-primary);
  color: #fff;
  border: 1px solid transparent;
  transition: background 0.12s, box-shadow 0.12s;
  white-space: nowrap;

  &:hover  { background: var(--color-primary-hover); }
  &:focus  { outline: none; box-shadow: var(--focus-ring); }
  &:active { background: var(--color-primary-active); }

  &.p-button-secondary {
    background: var(--color-surface-4);
    color: var(--color-text-1);
    border-color: var(--color-border);
    &:hover { background: var(--color-surface-3); }
  }

  &.p-button-outlined {
    background: transparent;
    color: var(--color-text-1);
    border-color: var(--color-border-strong);
    &:hover { background: var(--color-surface-2); }
  }

  &:disabled {
    opacity: 0.4;
    pointer-events: none;
  }
}

/* Small variant */
.p-button.p-button-sm {
  height: var(--h-sm);    /* 32px */
  padding: 0 var(--space-3); /* 0 12px */
  font-size: var(--text-sm); /* 12px */
  border-radius: var(--radius-sm);
}

.p-inputtext {
  height: var(--h-md);               /* 36px */
  padding: 0 var(--space-3);          /* 0 12px */
  border-radius: var(--radius-md);    /* 8px */
  border: 1px solid var(--color-border);
  background: var(--color-surface-3);
  color: var(--color-text-1);
  font-family: var(--font);
  font-size: var(--text-base);        /* 13px */
  font-weight: var(--fw-regular);
  transition: border-color 0.12s, box-shadow 0.12s;
  box-shadow: none;

  &::placeholder { color: var(--color-text-3); }
  &:enabled:hover  { border-color: var(--color-border-strong); }
  &:enabled:focus  { border-color: var(--color-primary); box-shadow: var(--focus-ring); }
  &.ng-invalid.ng-dirty { border-color: var(--color-error); }
}

/* p-dropdown wrapper */
.p-dropdown {
  height: var(--h-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-3);

  .p-dropdown-label { font-family: var(--font); font-size: var(--text-base); }
  .p-dropdown-panel { background: var(--color-surface-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
  .p-dropdown-item  { font-family: var(--font); font-size: var(--text-base); padding: var(--space-2) var(--space-3); }
  .p-dropdown-item:hover { background: var(--color-surface-4); }
  .p-dropdown-item.p-highlight { background: var(--color-primary-subtle); color: var(--color-primary); }
}

.p-datatable {
  .p-datatable-thead > tr > th {
    background: var(--color-surface-2);
    color: var(--color-text-3);
    font-family: var(--font);
    font-size: 10px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--color-border);
  }
  .p-datatable-tbody > tr > td {
    font-family: var(--font);
    font-size: var(--text-base);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-2);
  }
  .p-datatable-tbody > tr:hover > td {
    background: var(--color-surface-3);
  }
  .p-datatable-tbody > tr.p-highlight > td {
    background: var(--color-primary-subtle);
  }
}

.p-dialog {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  font-family: var(--font);

  .p-dialog-header {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    color: var(--color-text-1);
  }
  .p-dialog-content { padding: var(--space-6); }
  .p-dialog-footer  {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
  }
}

.p-dialog-mask { background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); }

.p-toast .p-toast-message {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  color: var(--color-text-1);
}
.p-toast .p-toast-message.p-toast-message-success { border-left: 3px solid var(--color-success); }
.p-toast .p-toast-message.p-toast-message-error   { border-left: 3px solid var(--color-error);   }
.p-toast .p-toast-message.p-toast-message-warn    { border-left: 3px solid var(--color-warning); }
.p-toast .p-toast-message.p-toast-message-info    { border-left: 3px solid var(--color-info);    }
.p-toast .p-toast-message-content { padding: var(--space-3) var(--space-4); font-size: var(--text-base); }

.p-datatable { border-radius: var(--radius-lg); overflow: hidden; }
.p-datatable .p-datatable-thead > tr > th {
  background: var(--color-surface-4);
  color: var(--color-text-3);
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.p-datatable .p-datatable-tbody > tr {
  background: var(--color-surface-1);
  border-bottom: 1px solid var(--color-border);
  transition: background 0.10s;
  &:hover { background: var(--color-surface-3); }
}
.p-datatable .p-datatable-tbody > tr > td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base); color: var(--color-text-1);
  border: none;
}
.p-paginator {
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-4);
}
.p-paginator .p-paginator-page.p-highlight {
  background: var(--color-primary);
  color: #fff; border-radius: var(--radius-sm);
}

.p-tag {
  font-size: var(--text-xs); font-weight: 600;
  border-radius: var(--radius-sm); padding: 2px var(--space-2);
  border: 1px solid transparent;
}
.p-tag.p-tag-success { background: var(--color-success-subtle); color: var(--color-success); border-color: var(--color-success-border); }
.p-tag.p-tag-warning { background: var(--color-warning-subtle); color: var(--color-warning); border-color: var(--color-warning-border); }
.p-tag.p-tag-danger  { background: var(--color-error-subtle);   color: var(--color-error);   border-color: var(--color-error-border); }
.p-tag.p-tag-info    { background: var(--color-primary-subtle); color: var(--color-primary); }

.p-chip {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-2);
  font-size: var(--text-xs); height: 24px; padding: 0 var(--space-2);
}

src/
  styles/
    tokens.css         # CSS custom properties (copy from Tokens page)
    primeng.scss       # PrimeNG overrides (copy from PrimeNG page)
    components.css     # k1-btn, k1-input, k1-badge, k1-card, etc.
    global.scss        # @import all of the above

  app/
    components/
      k1-button/       # Wraps p-button with K1 defaults
      k1-input/        # Wraps pInputText + k1-field + k1-label
      k1-badge/        # Status / resource / generic badge
      k1-incident-card/# Kanban tile with all states
      k1-kanban/       # Board container + columns
      k1-toolbar/      # Vertical sidebar toolbar
      k1-header/       # App header bar with clock

"styles": [
  "node_modules/primeng/resources/themes/lara-dark-blue/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  "node_modules/primeicons/primeicons.css",
  "src/styles/tokens.css",      // K1 tokens
  "src/styles/components.css",  // K1 component classes
  "src/styles/primeng.scss",    // PrimeNG overrides (LAST — highest specificity)
  "src/styles.scss"
]

@Component({
  selector: 'k1-input',
  template: `
    <div class="k1-field">
      <label class="k1-label" *ngIf="label">
        {{ label }}
        <span style="color:var(--color-error)" *ngIf="required"> *</span>
      </label>
      <div [class.k1-input-icon-wrap]="iconLeft">
        <ng-content select="[slot=icon-left]"></ng-content>
        <input
          pInputText
          [class.k1-input]="true"
          [class.is-error]="control?.invalid && control?.touched"
          [placeholder]="placeholder"
          [disabled]="disabled"
          [formControl]="control"
        />
      </div>
      <span class="k1-error" *ngIf="control?.invalid && control?.touched">
        {{ errorMessage }}
      </span>
      <span class="k1-hint" *ngIf="hint && !control?.invalid">{{ hint }}</span>
    </div>
  `
})
export class K1InputComponent {
  @Input() label = '';
  @Input() placeholder = '';
  @Input() hint = '';
  @Input() errorMessage = 'Campo requerido';
  @Input() required = false;
  @Input() disabled = false;
  @Input() iconLeft = false;
  @Input() control!: FormControl;
}