@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..700&family=Sora:wght@500..800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ────────────────────────────────────────────────────────
     DS REMOS — Editorial-Minimal (dark)
     Refresh 2026-06-13 — Fase 0 del rediseño.
     Aliases legacy preservados para no romper componentes
     antes de la propagación.
     ──────────────────────────────────────────────────────── */

  /* ── Colors — backgrounds ──────────────────────────────── */
  --bg-canvas:   #0A0A0B;   /* body, capa más profunda */
  --bg-surface:  #111113;   /* cards, panels */
  --bg-elevated: #18181B;   /* modals, dropdowns, popovers */
  --bg-overlay:  rgba(10, 10, 11, 0.72);

  /* legacy aliases — migrar progresivamente a canvas/surface/elevated */
  --bg-primary:   var(--bg-canvas);
  --bg-secondary: var(--bg-surface);
  --bg-tertiary:  var(--bg-elevated);

  /* ── Colors — text ─────────────────────────────────────── */
  --text-primary:   #FAFAFA;   /* headings, body fuerte */
  --text-secondary: #A1A1AA;   /* body normal, meta */
  --text-tertiary:  #71717A;   /* hints, placeholders, captions */

  /* ── Colors — borders ──────────────────────────────────── */
  --border-subtle: #27272A;
  --border-strong: #3F3F46;   /* hover de inputs, focus secundario */

  /* ── Colors — accent (uso estricto: CTA primario, item activo, focus, link) ── */
  --accent:        #E11D48;
  --accent-hover:  #BE123C;
  --accent-bg:     rgba(225, 29, 72, 0.10);  /* fondo sutil "activo" en sidebar */
  --accent-indigo: #6366F1;                   /* uso exclusivo: ring del avatar (gradient) */
  --logo-secondary: #EA580C;                  /* logo-only, no decorativo */
  --color-on-accent: #FFFFFF;
  --color-purple:    #C084FC;   /* waitingOn client + status esperando_cliente */

  /* ── Colors — semantic (solo estado real, no decoración) ── */
  --color-success: #22C55E;
  --color-warning: #EAB308;
  --color-error:   #EF4444;
  --color-info:    #60A5FA;

  /* Variantes "dark" — solo para gradients de barras (SLA health bar, etc.). */
  --color-success-dark: #16A34A;
  --color-warning-dark: #CA8A04;
  --color-error-dark:   #B91C1C;

  /* ── Colors — prioridad (tickets, alertas, severidad) ──── */
  --prio-critical-bg:   rgba(239, 68, 68, 0.12);
  --prio-critical-text: #EF4444;
  --prio-high-bg:       rgba(249, 115, 22, 0.12);
  --prio-high-text:     #F97316;
  --prio-medium-bg:     rgba(234, 179, 8, 0.12);
  --prio-medium-text:   #EAB308;
  --prio-low-bg:        rgba(113, 113, 122, 0.12);
  --prio-low-text:      #A1A1AA;

  /* ── Colors — badge & dot ──────────────────────────────── */
  --badge-bg:     var(--bg-elevated);
  --badge-border: var(--border-subtle);

  --dot-neutral: var(--text-secondary);
  --dot-info:    var(--color-info);
  --dot-success: var(--color-success);
  --dot-warning: var(--color-warning);
  --dot-danger:  var(--color-error);
  --dot-brand:   var(--accent);

  /* Severidad semántica — alias para health score, SLA pre-breach, backup staleness.
     Editorial-Minimal: ok = info neutral (no verde, que satura en listas con muchos items). */
  --severity-ok:   var(--dot-info);
  --severity-warn: var(--color-warning);
  --severity-risk: var(--color-error);

  /* dots de categoría — solo .badge--chip, no semánticos */
  --dot-cat-1: #60A5FA;  /* networking */
  --dot-cat-2: #F87171;  /* security */
  --dot-cat-3: #7DD3FC;  /* cloud */
  --dot-cat-4: #C4B5FD;  /* voip */
  --dot-cat-5: #4ADE80;  /* enterprise */

  /* ── Typography ────────────────────────────────────────── */
  --font-heading: 'Sora', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --heading-letter-spacing: -0.02em;

  /* Escala (line-heights pareados a cada size) */
  --text-display: 40px;   /* hero exclusivo */
  --text-h1:      32px;   /* page heading */
  --text-h2:      24px;   /* section heading */
  --text-h3:      18px;   /* subsection */
  --text-body:    15px;
  --text-small:   13px;
  --text-label:   12px;
  --text-xs:      11px;
  --text-mono:    13px;

  --lh-display: 1.10;
  --lh-h1:      1.15;
  --lh-h2:      1.25;
  --lh-h3:      1.35;
  --lh-body:    1.55;
  --lh-small:   1.50;
  --lh-label:   1.40;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;   /* DEPRECATED — no usar en chrome nuevo */

  /* ── Reading typography — comentarios, descripciones, notas ── */
  --text-body-soft: #E4E4E7;
  --weight-reading: 380;
  --lh-reading:     1.65;
  --track-reading:  0.005em;

  /* ── Border radius ─────────────────────────────────────── */
  --radius-xs:   4px;     /* badges */
  --radius-sm:   6px;     /* status, input small */
  --radius-md:   8px;     /* buttons */
  --radius-base: 10px;    /* inputs */
  --radius-lg:   12px;    /* cards (bajó 14→12, más editorial) */
  --radius-xl:   16px;    /* modals */
  --radius-2xl:  24px;    /* avatars grandes */
  --radius-full: 9999px;  /* pills, avatars */
  --radius:      var(--radius-lg);  /* legacy alias */

  /* ── Shadows (funcionales, sin glow ni colored shadows) ── */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.50);
  --shadow-lg:    0 16px 40px rgba(0, 0, 0, 0.60);
  --shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.30);  /* hover-only lift on interactive cards */
  --shadow:       var(--shadow-sm);  /* legacy alias */

  /* Skeleton shimmer tokens (dark surfaces). Highlight is a subtle pale wash. */
  --skeleton-base:      rgba(255, 255, 255, 0.05);
  --skeleton-highlight: rgba(255, 255, 255, 0.10);

  /* Subtle hover wash for surfaces that can't shift background (sidebar items,
     popovers, profile button). Quieter than --bg-tertiary. */
  --bg-hover-subtle: rgba(255, 255, 255, 0.04);

  /* Backdrop blur for any glass overlay (modal, drawer, mobile sidebar). */
  --blur-overlay: blur(4px);

  /* ── Glass system — extiende los 4 sabores canónicos
     (filter-chip, tb__center, dropdown-panel, sidebar).
     Cualquier surface glass nueva DEBE consumir estos tokens — no inventar rgba/blur libres. */
  --glass-toolbar-bg:     rgba(255, 255, 255, 0.04);  /* nivel 1 — chips, hero sticky, tabs */
  --glass-toolbar-hover:  rgba(255, 255, 255, 0.07);  /* hover nivel 1 */
  --glass-toolbar-border: rgba(255, 255, 255, 0.08);  /* border nivel 1 */
  --glass-panel-bg:       rgba(24, 24, 27, 0.86);     /* nivel 2 — dropdown, cards prominentes, sheets */
  --glass-modal-bg:       rgba(10, 10, 11, 0.55);     /* nivel 3 — sidebar fija */

  --blur-sm: blur(8px);    /* filter-chip */
  --blur-md: blur(10px);   /* topbar, hero/tabs sticky */
  --blur-lg: blur(22px);   /* dropdown-panel, aggregate cards, mobile sheet */
  --blur-xl: blur(28px);   /* sidebar */
  --glass-saturate: saturate(140%);

  /* Ambient glow — mismas familias que el body ambient pero más sutiles,
     para mantener glow accent en páginas con scroll donde el ambient global
     queda fuera del viewport central. */
  --ambient-glow-warm: rgba(225, 29, 72, 0.10);   /* accent wine — top-right ellipse */
  --ambient-glow-cool: rgba(99, 102, 241, 0.06);  /* indigo — bottom-left ellipse */

  /* ── Motion ─────────────────────────────────────────────
     Toda animación responde a una acción del usuario.
     No idle, no decorative. Solo ease-out cubic. */
  --ease-out:    cubic-bezier(0.16, 1.00, 0.30, 1.00);
  --ease-in-out: cubic-bezier(0.65, 0.00, 0.35, 1.00);

  --dur-fast: 120ms;   /* hover, focus, color shifts */
  --dur-base: 180ms;   /* modal, popover, dropdown */
  --dur-slow: 280ms;   /* page transitions, list reorder */
  --dur-xslow: 420ms;  /* drawer entry, sidebar collapse, list group expand */

  /* legacy aliases */
  --transition-fast:   var(--dur-fast)  var(--ease-out);
  --transition-normal: var(--dur-base)  var(--ease-out);
  --transition-slow:   var(--dur-slow)  var(--ease-out);
  --transition-xslow:  var(--dur-xslow) var(--ease-out);

  /* ── Spacing — base 4px ─────────────────────────────────
     Escala numérica para layouts arbitrarios. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-14: 56px;
  --space-20: 80px;

  /* Spacing semantic — usar primero, antes que la escala numérica */
  --space-card-pad:    20px;   /* padding interno de .card */
  --space-content-gap: 24px;   /* gap entre bloques en una página */
  --space-section:     56px;   /* separación entre secciones grandes */
  --space-dense:       8px;    /* tablas, listas, denso operacional */

  /* legacy aliases (chrome shell) */
  --space-sidebar-h: 16px;
  --space-sidebar-v: 20px;
  --space-content-h: 40px;
  --space-content-v: 32px;
  --space-mobile-h:  20px;
  --space-mobile-v:  20px;
  --space-mobile-gap: 20px;

  /* ── Z-index scale ──────────────────────────────────────
     Reemplaza el rango caótico 199–1200 anterior. */
  --z-base:     1;
  --z-sticky:   100;
  --z-fixed:    200;
  --z-overlay:  900;
  --z-modal:    1000;
  --z-popover:  1100;
  --z-toast:    1200;
  --z-tooltip:  1300;

  /* Breakpoints (reference only — use min-width, mobile-first)
     Mobile:  0 – 767px
     Tablet:  768 – 1023px
     Desktop: 1024 – 1439px
     Wide:    1440px+
  */
}

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

svg:not(.no-scale-fix) path,
svg:not(.no-scale-fix) circle,
svg:not(.no-scale-fix) line,
svg:not(.no-scale-fix) polyline,
svg:not(.no-scale-fix) polygon,
svg:not(.no-scale-fix) rect {
  vector-effect: non-scaling-stroke;
  stroke-width: 1.5;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  /* Ambient background — Variant B + C combined (approved 2026-06-18).
     Static base layer (C): wine-burgundy ellipse top + accent BR.
     Animated overlay (B, via ::before/::after): drifting blobs.
     background-attachment: fixed → static layer pinned to viewport. */
  background:
    radial-gradient(ellipse 95% 70% at 50% -15%, rgba(127, 29, 41, 0.35), transparent 65%),
    radial-gradient(circle at 92% 100%, rgba(159, 18, 57, 0.12), transparent 45%),
    var(--bg-canvas);
  background-attachment: fixed;
  color: var(--text-primary);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11' 1, 'ss03' 1;
}

/* Animated ambient blobs — float very slowly behind all content.
   pointer-events: none so they don't block clicks. */
body::before,
body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
body::before {
  width: 50vw;
  height: 50vw;
  top: -15vw;
  right: -8vw;
  background: rgba(159, 18, 57, 0.22);
  animation: ambient-drift-tr 42s ease-in-out infinite alternate;
}
body::after {
  width: 45vw;
  height: 45vw;
  bottom: -18vw;
  left: -10vw;
  background: rgba(99, 102, 241, 0.16);
  animation: ambient-drift-bl 58s ease-in-out infinite alternate;
}
@keyframes ambient-drift-tr {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-8%, 10%) scale(1.08); }
}
@keyframes ambient-drift-bl {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(12%, -10%) scale(1.12); }
}

/* All main containers sit above the animated ambient layer. */
.app-shell,
.app-layout,
.auth-shell {
  position: relative;
  z-index: 1;
}

/* Respect reduced motion preferences. */
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after { animation: none !important; }
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--heading-letter-spacing);
}

/* ── Reading treatment — para superficies de lectura larga ──
   Aplicado directamente en los selectores de body de comentarios,
   descripciones y notas. Esta clase queda disponible como utility. */
.text-reading {
  font-weight: var(--weight-reading);
  line-height: var(--lh-reading);
  letter-spacing: var(--track-reading);
  color: var(--text-body-soft);
}

/* ── Card (base class) ────────────────────────────────── */
.card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

/* ── Badge (base class) ──────────────────────────────── */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  line-height: 1.4;
}

.badge--sm {
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  font-size: var(--text-xs);
}

/* ── Badge — modifiers semánticos (regla 70-25-5) ──────── */
/* Todos usan bg neutro var(--badge-bg). El color aporta la semántica.
   Categorías (no semánticas) usan .badge--chip + --dot-current data-driven. */
.badge--neutral { background: var(--badge-bg); color: var(--text-secondary); }
.badge--info    { background: var(--badge-bg); color: var(--dot-info); }
.badge--success { background: var(--badge-bg); color: var(--color-success); }
.badge--warning { background: var(--badge-bg); color: var(--color-warning); }
.badge--danger  { background: var(--badge-bg); color: var(--color-error); }
.badge--brand   { background: var(--badge-bg); color: var(--accent); }

/* .badge--ghost: variante sin fondo, solo borde sutil */
.badge--ghost {
  background: transparent;
  border: 1px solid var(--badge-border);
}

/* .badge--chip: chip neutro con dot indicador 6×6.
   Usar con style="--dot-current: var(--dot-cat-N)" para categorías. */
.badge--chip {
  background: var(--badge-bg);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
}
.badge--chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--dot-current, var(--dot-neutral));
  flex-shrink: 0;
}
/* data-cat resuelve --dot-current para chips de categoría sin inline styles */
.badge--chip[data-cat="1"] { --dot-current: var(--dot-cat-1); }
.badge--chip[data-cat="2"] { --dot-current: var(--dot-cat-2); }
.badge--chip[data-cat="3"] { --dot-current: var(--dot-cat-3); }
.badge--chip[data-cat="4"] { --dot-current: var(--dot-cat-4); }
.badge--chip[data-cat="5"] { --dot-current: var(--dot-cat-5); }

/* .badge--pill: shape full radius (label estilo pill) */
.badge--pill { border-radius: var(--radius-full); }

/* ── Card — modifiers ──────────────────────────────────── */
.card--flat        { background: transparent; }
.card--interactive {
  cursor: pointer;
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.card--interactive:hover {
  border-color: var(--text-secondary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}
.card--interactive:active {
  transform: translateY(0);
  box-shadow: none;
}
.card--elevated    { box-shadow: var(--shadow-sm); }

/* ── Select universal (appearance:none + chevron SVG) ──── */
/* Reemplaza el control nativo del OS por uno alineado al DS. */
.select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--bg-secondary);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-small);
  line-height: 1.4;
  padding: 10px 36px 10px 14px;
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition-fast);
}
.select:hover  { border-color: var(--text-secondary); }
.select:focus  { border-color: var(--accent); }
.select:disabled { opacity: .5; cursor: not-allowed; }

/* ── Filter chips (alternativa al <select> con pocas opciones) ── */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.filter-chips__label {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--text-secondary);
  margin-right: 4px;
}
/* Pills used everywhere in toolbars (filter chips, quick filters, view tabs).
   Glass-on-ambient for consistency with the topbar search + page-toolbar triggers. */
.filter-chip,
.dash-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-small);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.filter-chip:hover,
.dash-tab:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-primary);
}
.filter-chip:focus-visible,
.dash-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.filter-chip--active,
.dash-tab.is-active {
  background: var(--accent-bg);
  border-color: transparent;
  color: var(--accent);
  backdrop-filter: none;
}

/* Selects living inside .page-toolbar adopt the same glass pill look. */
.page-toolbar .select,
.page-toolbar select.select {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  padding: 7px 28px 7px 12px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-small);
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 10px;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.page-toolbar .select:hover {
  background-color: rgba(255, 255, 255, 0.07);
  color: var(--text-primary);
}

/* ── Input inline (compact inputs in tables/lists) ───── */
.input-inline {
  padding: 8px 10px;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-small);
  outline: none;
  transition: border-color var(--transition-fast);
}
.input-inline:focus { border-color: var(--accent);
}

/* ── Data table (base class) ──────────────────────────── */
.data-table-wrap {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
}

.data-table thead th {
  text-align: left;
  padding: 12px 16px;
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.data-table tbody tr {
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover { background: var(--bg-tertiary); }

.data-table tbody td {
  padding: 12px 16px;
  vertical-align: middle;
  color: var(--text-primary);
  white-space: nowrap;
}

/* ── App layout ────────────────────────────────────────── */
.app-layout {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── Sidebar ───────────────────────────────────────────── */
.sidebar {
  width: 240px;
  min-width: 240px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  /* Glass panel: dark semi-translucent over the ambient body background. */
  background: rgba(10, 10, 11, 0.55);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  z-index: var(--z-fixed);
  overflow-y: auto;
  padding: var(--space-sidebar-v) 0 56px;
  gap: 4px;
  transition: width var(--transition-xslow), min-width var(--transition-xslow);
}

.sidebar.is-collapsed {
  width: 64px;
  min-width: 64px;
  /* Let tooltips escape the sidebar bounds when items are icon-only. */
  overflow: visible;
}
.sidebar.is-collapsed .sidebar-nav { overflow: visible; }

.sidebar.is-collapsed .sidebar-header { padding: 1rem .5rem .75rem; align-items: center; }
.sidebar.is-collapsed .sidebar-logo { display: none; }
.sidebar.is-collapsed .sidebar-brand { display: none; }
.sidebar.is-collapsed .sidebar-isotipo { display: flex; }

.sidebar-isotipo {
  display: none;
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* Labels and titles fade out before the width finishes collapsing, so we
   never see them squashed mid-transition. */
.sidebar .nav-item span,
.sidebar .nav-group__label,
.sidebar .nav-group__chevron,
.sidebar .sidebar-brand {
  transition: opacity var(--transition-fast);
}
.sidebar.is-collapsed .nav-item span,
.sidebar.is-collapsed .nav-group__label,
.sidebar.is-collapsed .nav-group__chevron,
.sidebar.is-collapsed .sidebar-brand {
  opacity: 0;
  pointer-events: none;
}

.sidebar.is-collapsed .nav-item span,
.sidebar.is-collapsed .nav-group__label,
.sidebar.is-collapsed .nav-group__chevron {
  /* hide from layout once faded; keeps width pure */
  display: none;
}

.sidebar.is-collapsed .nav-group__header { padding-left: 0; padding-right: 0; justify-content: center; }
.sidebar.is-collapsed .nav-group__items { max-height: none !important; overflow: visible; }
.sidebar.is-collapsed .nav-item { justify-content: center; padding-left: 0; padding-right: 0; margin: 0 8px; }
.sidebar.is-collapsed .nav-item--sub { padding-left: 0; }
/* Collapsed: button stays anchored at viewport bottom-left, just rotated. */

/* Tooltips on hover when the sidebar is collapsed: floating chip to the right
   of each nav-item, fed by [data-tooltip]. CSS-only, no JS. */
.sidebar.is-collapsed .nav-item::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: 1000;
}
.sidebar.is-collapsed .nav-item:hover::after,
.sidebar.is-collapsed .nav-item:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.sidebar-header {
  padding: 1.5rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: .5rem;
}

.sidebar-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transform: translateX(-10%);
}

.sidebar.is-collapsed .sidebar-logo-link {
  transform: none;
}

.sidebar-logo {
  height: 56px;
}

.sidebar-brand {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 300;
  color: var(--text-tertiary);
  opacity: 0.6;
  letter-spacing: 0.01em;
}

/* App footer (global, flows at the natural end of .main-content, centered).
   Layout vertical: línea meta (versión + links) + línea social en su propia row. */
.app-footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: auto;
  padding: 56px 16px 24px;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.app-footer__line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.app-footer__link {
  color: var(--text-tertiary);
  text-decoration: none;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: .02em;
  transition: color var(--transition-fast);
}
.app-footer__link:hover { color: var(--text-secondary); }
.app-footer__env {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  letter-spacing: .06em;
}
.app-footer__sep { color: var(--border-strong); user-select: none; }

/* Social row — cuadritos uniformes 28×28, hover bg sutil. */
.app-footer__social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.app-footer__social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-tertiary);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.app-footer__social-btn:hover,
.app-footer__social-btn:focus-visible {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  outline: none;
}
html.is-embedded .app-footer { display: none !important; }

/* Collapse toggle — anchored at the sidebar footer; icon-only when collapsed. */
/* Icon-only collapse button — viewport-anchored so it doesn't move when the
   sidebar collapses (center-aligned within the 64px collapsed width). */
.sidebar-collapse-btn {
  position: fixed;
  bottom: 14px;
  left: 16px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 0;
  margin: 0;
  z-index: 60;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.sidebar-collapse-btn:hover {
  background: var(--bg-hover-subtle);
  color: var(--text-primary);
}
.sidebar-collapse-btn svg {
  flex-shrink: 0;
  display: block;
  transition: transform var(--transition-normal);
}

.sidebar.is-collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }

.sidebar-nav {
  flex: 1;
  padding: .5rem 0;
}

.nav-group {
  margin-bottom: .25rem;
}

/* Legacy class kept as label fallback */
.nav-group-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
  padding: 0 var(--space-sidebar-h) 4px;
}

/* New nav-group clickable header (renders chevron + collapses children) */
.nav-group__header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 20px 6px;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
  text-transform: none;
  cursor: pointer;
  text-align: left;
  transition: color var(--transition-fast);
}
.nav-group__header:hover { color: var(--text-secondary); }

.nav-group__label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-group__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--text-tertiary);
  transform: rotate(-90deg);
  transition: transform var(--transition-normal), color var(--transition-fast);
  flex-shrink: 0;
}
.nav-group.is-open .nav-group__chevron { transform: rotate(0deg); }

/* Items wrapper that animates collapse via max-height */
.nav-group__items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-xslow);
}
.nav-group.is-open .nav-group__items {
  max-height: var(--nav-group-h, 600px);
}

/* ── Sync footer (main content) ─────────────────────────── */
.content-sync-bar {
  margin-top: auto;
  padding-top: 2.5rem;
  margin-bottom: 0;
  border-top: 1px solid var(--border-subtle);
}

.content-sync-bar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  width: 100%;
}

.content-sync-bar__meta--row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  flex: 1;
  min-width: 0;
  font-size: var(--text-small);
  color: var(--text-secondary);
  line-height: 1.45;
}

.content-sync-bar__label {
  margin: 0;
  flex-shrink: 0;
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  color: var(--text-tertiary);
}

.content-sync-bar__result {
  color: var(--text-primary);
  font-weight: var(--weight-regular);
  font-size: var(--text-small);
}

.content-sync-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
}

.content-sync-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.content-sync-bar__btn svg {
  flex-shrink: 0;
  opacity: 0.85;
}

.content-sync-bar__btn.is-syncing svg {
  animation: spin 0.8s linear infinite;
}

.content-sync-bar__btn.is-syncing {
  pointer-events: none;
  opacity: 0.65;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: 0 12px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  transition: background var(--transition-fast), color var(--transition-fast);
  border-radius: var(--radius-md);
}

.nav-item:hover {
  background: var(--bg-hover-subtle, rgba(255,255,255,0.04));
  color: var(--text-primary);
}

.nav-item.is-active {
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: var(--weight-medium);
}

.nav-item.is-active svg {
  stroke: var(--accent);
}

.nav-item--sub {
  padding-left: 1.5rem;
  font-size: var(--text-small);
}

.nav-item svg {
  flex-shrink: 0;
  opacity: .7;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-item:hover svg {
  opacity: 1;
  transform: scale(1.08);
}
.nav-item.is-active svg {
  opacity: 1;
  transform: scale(1.05);
}

/* ── Mobile header bar ─────────────────────────────────── */
.mobile-header {
  display: none;
  position: sticky;
  top: 0;
  z-index: 130;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-subtle);
  padding: .65rem 1rem;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.mobile-header__left {
  display: flex;
  align-items: center;
  gap: .25rem;
}
.mobile-header__logo-link {
  display: flex;
  align-items: center;
}
.mobile-header__logo {
  height: 28px;
}
.mobile-header__back {
  background: none;
  border: none;
  padding: .35rem;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}
.mobile-header__back:hover {
  color: var(--text-primary);
}
.mobile-header__title {
  font-family: var(--font-heading);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-header__icons {
  display: flex;
  align-items: center;
  gap: .25rem;
}
.mobile-header__icon {
  background: none;
  border: none;
  padding: .35rem;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}
.mobile-header__icon:hover {
  color: var(--text-primary);
}

/* ── Mobile search overlay ─────────────────────────────── */
.mobile-search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg-primary);
  flex-direction: column;
}
.mobile-search-overlay.is-open {
  display: flex;
}
.mobile-search__bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
}
.mobile-search__input {
  flex: 1;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: .6rem .75rem;
  font-family: inherit;
  font-size: var(--text-body);
  color: var(--text-primary);
  outline: none;
}
.mobile-search__input:focus {
  border-color: var(--accent);
}
.mobile-search__close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: .25rem .5rem;
}
.mobile-search__results {
  flex: 1;
  overflow-y: auto;
  padding: .5rem 0;
}
.mobile-search__group {
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  padding: .75rem 1rem .35rem;
}
.mobile-search__item {
  display: block;
  padding: .65rem 1rem;
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--text-small);
  border-bottom: 1px solid var(--border-subtle);
}
.mobile-search__item:active {
  background: var(--bg-tertiary);
}
.mobile-search__item-num {
  color: var(--text-secondary);
  font-family: var(--font-heading);
}
.mobile-search__empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-secondary);
  opacity: .5;
}

/* Hamburger (inside mobile header) */
.sidebar-toggle {
  display: none;
  background: none;
  border: none;
  padding: .35rem;
  color: var(--text-primary);
  cursor: pointer;
}

.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: var(--blur-overlay);
  z-index: 140;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}
.sidebar-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 768px) {
  .mobile-header {
    display: flex;
  }
  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
    box-shadow: var(--shadow-lg);
  }
  .sidebar.is-open {
    transform: translateX(0);
  }
  .sidebar.is-swiping {
    transition: none;
  }
  .sidebar-toggle {
    display: flex;
  }
  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }
  .sidebar-header {
    display: none;
  }
  .sidebar-collapse-btn {
    display: none;
  }
  .sidebar {
    padding-top: 1rem;
  }
}

/* ── Page transition ───────────────────────────────────── */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/*  TOPBAR PERSISTENTE  (mounted by /js/topbar.js)                              */
/*  Pattern V2 (command-bar with context) + V3 avatar (ring-only)               */
/* ═══════════════════════════════════════════════════════════════════════════ */
.tb {
  position: fixed;
  top: 0;
  left: 250px;
  right: 0;
  height: 60px;
  z-index: 90;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(280px, 2fr) minmax(180px, 1fr);
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  /* Glass panel matching sidebar — sits above ambient body bg. */
  background: rgba(10, 10, 11, 0.50);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: left var(--transition-normal);
}
.sidebar.is-collapsed ~ .tb,
body.sidebar-is-collapsed .tb { left: 64px; }

body.has-topbar .main-content { padding-top: calc(60px + 1.25rem); }

/* ── Left: back + page title + sub ── */
.tb__left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tb__back {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); color: var(--text-secondary);
  cursor: pointer; padding: 0;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.tb__back:hover { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-strong); }
.tb__back svg { display: block; }
.tb__title { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; gap: 1px; }

/* Breadcrumb: SECTION / Page  — earlier crumbs muted, last one is current. */
.tb__crumbs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.tb__crumb {
  color: var(--text-tertiary);
  font-weight: var(--weight-medium);
  letter-spacing: -.005em;
  text-decoration: none;
  transition: color var(--transition-fast);
}
a.tb__crumb:hover { color: var(--text-primary); }
.tb__crumb--current {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  cursor: default;
}
.tb__sep {
  color: var(--border-strong);
  font-weight: var(--weight-regular);
  font-size: 11px;
  user-select: none;
}

/* Dynamic context line — each page may push stats / status via custom event. */
.tb__title-s {
  font-size: 11px; color: var(--text-tertiary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb__title-s:empty { display: none; }

/* ── Center: search pill (glass, blends with topbar) ── */
.tb__center {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.tb__center:hover { background: rgba(255, 255, 255, 0.06); }
.tb__center:focus-within {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.tb__center > svg { color: var(--text-tertiary); flex-shrink: 0; }
.tb__center input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  color: var(--text-primary); font-family: inherit; font-size: var(--text-small);
}
.tb__center input::placeholder { color: var(--text-tertiary); }
.tb__kbd {
  font-family: var(--font-mono); font-size: 10px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xs);
  color: var(--text-tertiary); letter-spacing: .04em;
  flex-shrink: 0;
}

/* ── Right: icons + avatar ── */
.tb__right { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.tb__icon-btn {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: var(--radius-sm);
  color: var(--text-secondary); cursor: pointer; padding: 0;
  position: relative; text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.tb__icon-btn:hover,
.tb__icon-btn[aria-expanded="true"] { background: var(--bg-surface); color: var(--text-primary); }
.tb__icon-btn svg { display: block; }
.tb__dot {
  position: absolute; top: 8px; right: 9px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--bg-canvas);
}

/* Avatar: ring gradient + photo/initials inside. */
.tb__avatar-wrap {
  width: 36px; height: 36px;
  border-radius: 50%; padding: 2px;
  background: linear-gradient(135deg, var(--accent), var(--accent-indigo));
  border: none; cursor: pointer; margin-left: 6px;
  transition: transform var(--transition-fast);
}
.tb__avatar-wrap:hover,
.tb__avatar-wrap[aria-expanded="true"] { transform: scale(1.04); }
.tb__avatar {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 50%;
  background: linear-gradient(135deg, var(--bg-elevated), var(--border-strong));
  overflow: hidden;
  font-size: 12px; font-weight: 700; color: var(--text-primary);
}
.tb__avatar img { width: 100%; height: 100%; object-fit: cover; }
.tb__avatar-initials { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

/* ── Popovers (notif + user) ── */
.tb-popover {
  position: fixed;
  width: 320px;
  max-width: calc(100vw - 24px);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tb-popover.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.tb-popover--user { width: 240px; }
.tb-popover__header {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.tb-popover__header > span:only-child,
.tb-popover__header:has(.tb-popover__count) {
  flex-direction: row; align-items: center; justify-content: space-between; gap: 12px;
}
.tb-popover--notif .tb-popover__header { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.tb-popover__title {
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}
.tb-popover__sub { font-size: var(--text-xs); color: var(--text-tertiary); }
.tb-popover__count { font-size: var(--text-xs); color: var(--text-tertiary); }
.tb-popover__list { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; }
.tb-popover__footer { padding: 10px 14px; border-top: 1px solid var(--border-subtle); text-align: center; }
.tb-popover__mock { font-size: var(--text-xs); color: var(--text-tertiary); font-style: italic; }

.tb-popover__item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: none; border: none;
  color: var(--text-primary);
  font-family: inherit; font-size: var(--text-small);
  text-decoration: none; cursor: pointer; text-align: left; width: 100%;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.tb-popover__item:hover { background: var(--bg-surface); }
.tb-popover__item svg { opacity: .7; flex-shrink: 0; }
.tb-popover__item--danger { color: var(--text-secondary); border-top: 1px solid var(--border-subtle); }
.tb-popover__item--danger:hover { color: var(--accent); background: var(--accent-bg); }
.tb-popover__item--danger:hover svg { opacity: 1; }

.tb-notif-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.tb-notif-item:last-child { border-bottom: none; }
.tb-notif-item__title { font-size: var(--text-small); color: var(--text-primary); line-height: 1.35; }
.tb-notif-item__time { font-size: var(--text-xs); color: var(--text-tertiary); }
.tb-notif-item.is-unread { background: var(--bg-surface); }
.tb-notif-item.is-unread .tb-notif-item__title { font-weight: var(--weight-medium); }

/* ── Mobile ── */
@media (max-width: 768px) {
  .tb {
    left: 0;
    grid-template-columns: auto 1fr auto;
    padding: 0 14px;
    gap: 10px;
    height: 56px;
  }
  body.has-topbar .main-content { padding-top: calc(56px + 1rem); }
  .tb__back { display: none; }
  .tb__title-s { display: none; }
  .tb__kbd { display: none; }
  /* Mobile: only show the current crumb to save width. */
  .tb__crumb:not(.tb__crumb--current),
  .tb__sep { display: none; }
  .tb__center { padding: 7px 12px; }
  .tb__icon-btn { width: 32px; height: 32px; }
  .tb__avatar-wrap { width: 32px; height: 32px; margin-left: 2px; }
}

/* Hide topbar in embedded iframes (drawer use case). */
html.is-embedded .tb { display: none !important; }
html.is-embedded body.has-topbar .main-content { padding-top: 0 !important; }

/* ── Main content ──────────────────────────────────────── */
.main-content {
  animation: fadeSlideIn .25s ease-out;
  margin-left: 250px;
  flex: 1;
  min-width: 0;
  padding: 2rem clamp(1rem, 2vw, 2rem);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(100% - 250px);
  max-width: none;
  transition: margin-left var(--transition-normal), width var(--transition-normal);
}

.sidebar.is-collapsed ~ .main-content,
.app-layout.sidebar-collapsed .main-content {
  margin-left: 60px;
  width: calc(100% - 60px);
}

/* Centra el bloque de contenido en el viewport (columna junto al sidebar) */
.main-content > * {
  width: 100%;
  max-width: 95%;
}

@media (max-width: 1024px) {
  .main-content {
    padding: 1.5rem clamp(1rem, 3vw, 2rem);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/*  CANONICAL PAGE LAYOUT  (.page-header + .page-toolbar)                       */
/*  Single source of truth for the dashboard pages so every list/grid page     */
/*  uses the same hierarchy: title block → toolbar (search + filters) → body.   */
/* ═══════════════════════════════════════════════════════════════════════════ */

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: var(--space-section);
  flex-wrap: wrap;
}
.page-header__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  flex: 1;
}
.page-header__title {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  letter-spacing: var(--heading-letter-spacing);
  line-height: var(--lh-h1);
  margin: 0;
}
.page-header__sub {
  font-size: var(--text-body);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
  max-width: 620px;
}
.page-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Toolbar: chips (left) · end actions (right). Search lives in the topbar. */
.page-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.page-toolbar__filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.page-toolbar__end {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}

/* ─── Canonical dropdown / popover panel — used app-wide.
   Glass-elevated to sit on the ambient bg without breaking the system. ─── */
.dropdown-panel,
.tickets-v2__dropdown,
.cl-filters-panel,
.cl-columns-panel {
  background: rgba(24, 24, 27, 0.86);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
}

/* Trigger button used in toolbars (filter add, sort, view switch). */
.page-toolbar__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--text-small);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.page-toolbar__trigger:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-primary);
}
.page-toolbar__trigger svg { flex-shrink: 0; opacity: .75; }

/* Variante icon-only — sin texto, padding cuadrado. */
.page-toolbar__trigger--icon {
  padding: 7px 9px;
  gap: 0;
}
.page-toolbar__trigger--icon svg { opacity: 1; }

/* Wrapper that positions a dropdown menu under a trigger. */
.page-toolbar__menu-wrap { position: relative; }

@media (max-width: 720px) {
  .page-header { gap: 12px; margin-bottom: 28px; }
  .page-header__title { font-size: var(--text-h2); }
  .page-header__sub { font-size: var(--text-small); }
  .page-header__actions { width: 100%; }
  .page-header__actions .btn--primary { flex: 1; justify-content: center; }
  .page-toolbar { gap: 8px; margin-bottom: 16px; }
}

/* ── Topbar ─────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .5rem 0;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  background: var(--bg-primary);
  z-index: var(--z-sticky);
}

.topbar-search-wrap {
  position: relative;
  width: 200px;
  flex-shrink: 0;
}

.topbar-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  pointer-events: none;
}

.topbar-search {
  width: 100%;
  padding: 10px 14px 10px 30px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  outline: none;
  transition: border-color var(--transition-fast);
}

.topbar-search:focus {
  border-color: var(--accent);
}

.topbar-search::placeholder {
  color: var(--text-secondary);
  opacity: .5;
}

.topbar-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  max-height: 280px;
  overflow-y: auto;
  list-style: none;
  z-index: var(--z-popover);
  display: none;
  box-shadow: var(--shadow-md);
}

.topbar-results.is-open { display: block; }

.topbar-results li {
  padding: .55rem .85rem;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.topbar-results li:hover,
.topbar-results li.is-active {
  background: var(--bg-tertiary);
}

.topbar-results .result-name {
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
}

.topbar-results .result-meta {
  font-size: var(--text-label);
  color: var(--text-secondary);
}

.topbar-results .no-results {
  padding: .75rem .85rem;
  color: var(--text-secondary);
  font-size: var(--text-small);
  cursor: default;
}

.topbar-profile {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: .6rem 1rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-base);
  min-width: 0;
}

.topbar-avatar-wrap {
  flex-shrink: 0;
}

.topbar-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--border-subtle);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.topbar-avatar-wrap:hover .topbar-avatar {
  border-color: var(--text-secondary);
  transform: scale(1.05);
}

.topbar-avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
}

.topbar-info {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
  flex: 1;
}

.topbar-name-row {
  display: flex;
  align-items: center;
  gap: .45rem;
}

.topbar-name {
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-status {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(34, 197, 94, 0.12);
  color: var(--color-success);
  white-space: nowrap;
}

.topbar-role {
  font-size: var(--text-label);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-details {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: .1rem;
}

.topbar-detail {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: var(--text-label);
  color: var(--text-secondary);
  cursor: pointer;
  padding: .15rem .35rem;
  border-radius: var(--radius-xs);
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}

.topbar-detail:hover {
  background: var(--bg-primary);
  color: var(--text-primary);
}

.topbar-detail svg {
  opacity: .5;
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
}

.topbar-detail:hover svg {
  opacity: 1;
}

.topbar-clear {
  flex-shrink: 0;
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: .25rem;
  border-radius: var(--radius-xs);
  transition: color var(--transition-fast), background var(--transition-fast);
  display: flex;
}

.topbar-clear:hover {
  color: var(--accent);
  background: rgba(225, 29, 72, .1);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
  .topbar { display: none; }
}

/* ── Dashboard ──────────────────────────────────────────── */
.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .65rem; margin-bottom: 1.5rem; }
/* .dash-kpi — inherits from .card */
.dash-kpi {
  border-radius: var(--radius-base);
  padding: .85rem 1rem; display: flex; flex-direction: column; gap: .15rem;
}
.dash-kpi__label { font-size: var(--text-label); color: var(--text-secondary); }
.dash-kpi__value { font-family: var(--font-heading); font-size: 1.6rem; font-weight: var(--weight-medium); color: var(--text-primary); }
.dash-kpi__sub { font-size: var(--text-label); color: var(--text-secondary); opacity: .6; }
.dash-kpi__sub--warn { color: var(--accent); opacity: 1; }

.dash-section { margin-bottom: 1.25rem; }
.dash-section--flex { flex: 1; }
.dash-section__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; }
.dash-section__title { font-family: var(--font-heading); font-size: var(--text-body); font-weight: var(--weight-medium); color: var(--text-primary); display: flex; align-items: center; gap: .5rem; }
.dash-section__count { font-size: var(--text-label); font-weight: var(--weight-regular); color: var(--text-secondary); opacity: .6; }
.dash-section__tabs { display: flex; gap: .5rem; }
.dash-tab {
  background: transparent; border: 1px solid var(--border-subtle); color: var(--text-secondary);
  padding: 6px 14px; border-radius: var(--radius-md); font-size: var(--text-label); font-weight: var(--weight-medium); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.dash-tab:hover { border-color: var(--text-secondary); color: var(--text-primary); }
.dash-tab.is-active { background: var(--bg-tertiary); border-color: var(--text-secondary); color: var(--text-primary); }
.dash-link { font-size: var(--text-label); color: var(--accent); text-decoration: none; }
.dash-link:hover { text-decoration: underline; }

.dash-table-wrap { overflow-x: auto; }
/* .dash-table — inherits from .data-table, no overrides needed */
.dash-tk-row { cursor: pointer; transition: background var(--transition-fast); }
.dash-tk-row:hover { background: rgba(255,255,255,.02); }
.dash-tk-title { font-size: var(--text-small); color: var(--text-primary); font-weight: var(--weight-regular); }
.dash-tk-sub { font-size: var(--text-label); color: var(--text-secondary); }
.dash-tk-prio { font-size: var(--text-label); font-weight: var(--weight-medium); }
.dash-tk-status { font-size: var(--text-label); color: var(--text-secondary); }
.dash-tk-time { font-size: var(--text-label); color: var(--text-secondary); opacity: .6; }
.dash-tk-assignee { font-size: var(--text-label); color: var(--text-secondary); }

.dash-bottom { display: grid; grid-template-columns: 1fr 260px; gap: 1rem; }
.dash-pj {
  padding: .55rem .75rem; border-left: 3px solid var(--border-subtle);
  margin-bottom: .35rem; transition: border-color var(--transition-fast);
}
.dash-pj:hover { border-color: var(--accent); }
.dash-pj__info { display: flex; align-items: center; gap: .5rem; }
.dash-pj__name { font-size: var(--text-small); color: var(--text-primary); font-weight: var(--weight-regular); }
.dash-pj__badge { font-size: var(--text-label); font-weight: var(--weight-medium); }
.dash-pj__meta { font-size: var(--text-label); color: var(--text-secondary); opacity: .5; }

/* .dash-quick — inherits from .card */
.dash-quick {
  border-radius: var(--radius-base);
  padding: 1rem; display: flex; flex-direction: column; gap: .4rem;
}
.dash-quick__title { font-size: var(--text-small); font-weight: var(--weight-regular); color: var(--text-secondary); margin-bottom: .5rem; }
.dash-quick__btn {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .5rem; border-radius: var(--radius-sm); font-size: var(--text-small); text-decoration: none;
  border: 1px solid var(--border-subtle); color: var(--text-primary); background: var(--bg-tertiary);
  transition: border-color var(--transition-fast); cursor: pointer;
}
.dash-quick__btn:hover { border-color: var(--text-secondary); }
.dash-quick__btn--primary { background: var(--accent); border-color: var(--accent); color: var(--color-on-accent); font-weight: var(--weight-medium); }
.dash-quick__btn--primary:hover { opacity: .9; }

/* ── FAB (mobile only) ─────────────────────────────────── */
.fab {
  display: none;
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 120;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--color-on-accent);
  border: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-fast);
}
.fab:active { transform: scale(.92); }
.fab::before {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6rem;
  background: linear-gradient(to top, rgba(11, 11, 11, .9) 0%, transparent 100%);
  z-index: 119;
  pointer-events: none;
}
.fab.is-open svg {
  transform: rotate(45deg);
  transition: transform var(--transition-fast);
}
.fab svg {
  transition: transform var(--transition-fast);
}

.fab-menu {
  display: none;
}
.fab-menu.is-open {
  display: block;
}
.fab-menu__overlay {
  position: fixed;
  inset: 0;
  z-index: 119;
  background: rgba(0, 0, 0, .5);
}
.fab-menu__sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 121;
  background: var(--bg-secondary);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 1.25rem 1rem 2rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.fab-menu__item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--text-body);
  transition: background var(--transition-fast);
}
.fab-menu__item:hover {
  background: var(--bg-tertiary);
}
.fab-menu__item--primary {
  color: var(--accent);
  font-weight: var(--weight-medium);
}
.fab-menu__handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border-subtle);
  margin: 0 auto .75rem;
}
.fab-menu__cancel {
  display: block;
  width: 100%;
  padding: .75rem;
  margin-top: .25rem;
  font-family: inherit;
  font-size: var(--text-body);
  color: var(--text-secondary);
  background: none;
  border: none;
  border-top: 1px solid var(--border-subtle);
  cursor: pointer;
  text-align: center;
}

/* ── Dash section toggle (mobile) ──────────────────────── */
.dash-section {
  position: relative;
}
.dash-section__toggle {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  padding: .35rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: transform var(--transition-fast);
}
.dash-section.is-collapsed .dash-section__toggle {
  transform: rotate(-90deg);
}
.dash-section.is-collapsed > *:not(.dash-section__head):not(.dash-section__toggle) {
  display: none;
}

@media (max-width: 768px) {
  .dash-quick--desktop { display: none; }
  .fab { display: flex; }
  .dash-section__toggle { display: flex; }
}

.fab--page {
  display: none;
}
/* Gradient fade behind FAB */
.fab--page::before {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6rem;
  background: linear-gradient(to top, rgba(11, 11, 11, .9) 0%, transparent 100%);
  z-index: 119;
  pointer-events: none;
}
@media (max-width: 768px) {
  .fab--page { display: flex; }
}

@media (max-width: 900px) {
  .dash-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dash-kpis { grid-template-columns: 1fr 1fr; }
  .dash-section__head { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .dash-section__tabs { justify-content: center; width: 100%; }
}


/* ── Home layout (legacy) ──────────────────────────────── */
.home-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 50vh;
  gap: .75rem;
  color: var(--text-secondary);
}

.home-empty__icon {
  opacity: .25;
  margin-bottom: .5rem;
}

.home-empty h2 {
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.home-empty p {
  max-width: 380px;
  font-size: var(--text-body);
  line-height: 1.5;
}

.home-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.home-left {
  flex: 1;
  min-width: 0;
}

.home-right {
  width: 280px;
  flex-shrink: 0;
  position: sticky;
  top: 4.5rem;
}

/* ── Right panel (collaborator) ────────────────────────── */
.rpanel {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}

.rpanel-photo-wrap {
  margin-bottom: .25rem;
}

.rpanel-photo {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--border-subtle);
  transition: border-color var(--transition-normal), transform var(--transition-normal);
}

.rpanel-photo-wrap:hover .rpanel-photo {
  border-color: var(--text-secondary);
  transform: scale(1.04);
}

.rpanel-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
}

.rpanel-name {
  font-size: 1.1rem;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  text-align: center;
  line-height: 1.3;
}

.rpanel-status {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  padding: .2rem .55rem;
  border-radius: var(--radius-full);
  background: rgba(34, 197, 94, .15);
  color: var(--color-success);
}

.rpanel-details {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-top: .5rem;
}

.rpanel-detail {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .55rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.rpanel-detail:hover {
  background: var(--bg-primary);
}

.rpanel-detail__icon {
  flex-shrink: 0;
  color: var(--text-secondary);
  opacity: .5;
  display: flex;
  transition: opacity var(--transition-fast);
}

.rpanel-detail:hover .rpanel-detail__icon {
  opacity: 1;
}

.rpanel-detail__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rpanel-detail__label {
  font-size: var(--text-label);
  color: var(--text-secondary);
  letter-spacing: .03em;
  font-weight: var(--weight-regular);
}

.rpanel-detail__value {
  font-size: var(--text-small);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px) {
  .home-layout {
    flex-direction: column-reverse;
  }
  .home-right {
    width: 100%;
    position: static;
  }
  .rpanel {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .rpanel-photo { width: 72px; height: 72px; }
  .rpanel-details { flex-direction: row; flex-wrap: wrap; }
  .rpanel-detail { flex: 1; min-width: 140px; }
}

/* ── Page header ────────────────────────────────────────── */
.page-header {
  margin-bottom: var(--space-section);
}
.page-header h1 {
  font-size: var(--text-h1);
  line-height: var(--lh-h1);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  letter-spacing: var(--heading-letter-spacing);
}
.page-header p {
  color: var(--text-secondary);
  margin-top: var(--space-2);
  font-size: var(--text-body);
}

/* ── Search box ─────────────────────────────────────────── */
.search-box {
  position: relative;
  width: 100%;
}

.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 14px;
  color: var(--text-secondary);
  pointer-events: none;
}

.search-input-wrap input {
  width: 100%;
  padding: .85rem 1rem .85rem 44px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-input-wrap input::placeholder {
  color: var(--text-secondary);
}

.search-input-wrap input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(225, 29, 72, .15);
}

.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  list-style: none;
  max-height: 280px;
  overflow-y: auto;
  display: none;
  box-shadow: var(--shadow-lg);
}

.search-results.is-open {
  display: block;
}

.search-results li {
  padding: .7rem 1rem .7rem 44px;
  cursor: pointer;
  transition: background var(--transition-fast);
  border-bottom: 1px solid var(--border-subtle);
}

.search-results li:last-child {
  border-bottom: none;
}

.search-results li:hover,
.search-results li.is-active {
  background: var(--bg-tertiary);
}

.search-results li .result-name {
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  font-size: var(--text-body);
}

.search-results li .result-meta {
  font-size: var(--text-small);
  color: var(--text-secondary);
  margin-top: 1px;
}

.search-results .no-results {
  padding: 1rem 1rem 1rem 44px;
  color: var(--text-secondary);
  font-size: var(--text-small);
}

/* ── Collaborator panel ────────────────────────────────────── */
.collaborator-panel {
  margin-top: 2rem;
}

/* .collab-card — inherits from .card */
.collab-card {
  display: flex;
  gap: 24px;
  padding: 24px;
  margin-bottom: 1.5rem;
}

.collab-card__left {
  flex-shrink: 0;
}

.collab-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--logo-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: var(--text-h2);
  color: var(--color-on-accent);
  flex-shrink: 0;
  overflow: hidden;
}
.collab-avatar.has-photo {
  background: none;
  border: 2px solid var(--border-subtle);
  cursor: pointer;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.collab-avatar.has-photo:hover {
  border-color: var(--text-secondary);
  transform: scale(1.05);
}
.collab-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Photo modal ───────────────────────────────────────── */
.photo-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, .85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
  cursor: zoom-out;
}
.photo-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.photo-overlay img {
  max-width: 360px;
  max-height: 80vh;
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
  transform: scale(.9);
  transition: transform var(--transition-normal);
}
.photo-overlay.is-open img {
  transform: scale(1);
}

.collab-card__main {
  flex: 1;
  min-width: 0;
}

.collab-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}

.collab-card__top h2 {
  font-size: 1.15rem;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.collab-role {
  font-size: var(--text-small);
  color: var(--text-secondary);
  margin-top: 4px;
}

.collab-status {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  padding: .2rem .65rem;
  border-radius: var(--radius-full);
  background: rgba(34, 197, 94, .12);
  color: var(--color-success);
}

.collab-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem 1.5rem;
}

.collab-detail {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--text-small);
  color: var(--text-secondary);
  padding: .3rem .5rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
  cursor: pointer;
  position: relative;
  user-select: none;
}

.collab-detail:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.collab-detail:active {
  transform: scale(.97);
}

/* ── Toast notification ─────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  padding: 12px 24px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal), transform var(--transition-normal);
  z-index: 400;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.toast svg {
  color: var(--color-success);
  flex-shrink: 0;
}

.collab-detail:hover svg {
  opacity: 1;
}

.collab-detail svg {
  flex-shrink: 0;
  opacity: .45;
  transition: opacity var(--transition-fast);
}

.collab-detail span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.collab-docs h3 {
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  margin-bottom: .5rem;
  letter-spacing: .5px;
  opacity: .6;
}

/* ── Doc rows (compact home list) ──────────────────────── */
.doc-rows {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.doc-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.doc-row:hover {
  border-color: var(--accent);
  background: var(--bg-tertiary);
}

.doc-row__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(225, 29, 72, .1);
  color: var(--accent);
}

.doc-row__icon svg {
  width: 14px;
  height: 14px;
}

.doc-row__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.doc-row__title {
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
}

.doc-row__desc {
  font-size: var(--text-label);
  color: var(--text-secondary);
  opacity: .7;
}

.doc-row .badge {
  font-size: var(--text-label);
  padding: .1rem .45rem;
  flex-shrink: 0;
}

.doc-row__arrow {
  color: var(--text-secondary);
  font-size: var(--text-small);
  opacity: .4;
  transition: opacity var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.doc-row:hover .doc-row__arrow {
  opacity: 1;
  color: var(--accent);
  transform: translateX(2px);
}

/* ── Collaborator equipos ──────────────────────────────── */
.collab-equipos {
  margin-top: 1.5rem;
}

.collab-equipos h3 {
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  margin-bottom: .75rem;
  letter-spacing: .5px;
}

.equipo-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .85rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: .5rem;
  transition: border-color var(--transition-fast);
}

.equipo-item:hover {
  border-color: var(--accent);
}

.equipo-item__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: rgba(225, 29, 72, .1);
  color: var(--accent);
}

.equipo-item__info {
  flex: 1;
  min-width: 0;
}

.equipo-item__name {
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.equipo-item__meta {
  font-size: var(--text-label);
  color: var(--text-secondary);
}

.equipo-item__action {
  flex-shrink: 0;
}

.collab-equipos-empty {
  padding: 1rem;
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--text-small);
}

/* ── Records list page ──────────────────────────────────── */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-small);
  margin-bottom: 1.25rem;
  transition: color var(--transition-fast);
}
.back-link:hover { color: var(--accent); }

.records-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.record-row {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.record-row:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.record-info {
  flex: 1;
  min-width: 0;
}
.record-info .record-title {
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: var(--text-body);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.record-info .record-meta {
  font-size: var(--text-small);
  color: var(--text-secondary);
  margin-top: .15rem;
}

.record-actions {
  display: flex;
  gap: .5rem;
  flex-shrink: 0;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-base);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.btn:active { transform: scale(.97); }
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn:disabled, .btn.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.btn--primary {
  position: relative;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: var(--color-on-accent);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 2px 8px rgba(225, 29, 72, 0.28),
    0 1px 2px rgba(0, 0, 0, 0.30);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast), background var(--transition-fast);
}
.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 4px 14px rgba(225, 29, 72, 0.38),
    0 2px 4px rgba(0, 0, 0, 0.35);
  filter: brightness(1.05);
}
.btn--primary:active {
  transform: translateY(0);
  filter: brightness(0.95);
}
.btn--primary svg { opacity: 0.95; }

.btn--secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}
.btn--secondary:hover { background: var(--border-subtle); }

.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
}
.btn--ghost:hover { background: var(--bg-tertiary); color: var(--text-primary); }

.btn--danger {
  background: rgba(225, 29, 72, 0.1);
  color: var(--accent);
  border-color: rgba(225, 29, 72, 0.3);
}
.btn--danger:hover { background: rgba(225, 29, 72, 0.18); }

.btn--outline {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-subtle);
}
.btn--outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Small buttons */
.btn--sm {
  padding: 6px 14px;
  border-radius: var(--radius-md);
  font-size: var(--text-small);
}

/* Icon-only buttons */
.btn--icon {
  padding: 8px;
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  border-color: var(--border-subtle);
  color: var(--text-secondary);
}
.btn--icon:hover { color: var(--text-primary); }

/* ── Modal ──────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, .7);
  backdrop-filter: var(--blur-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}
.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  width: 96vw;
  max-width: 1200px;
  height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
  transform: translateY(16px) scale(.98);
  transition: transform var(--transition-normal);
}
.modal-overlay.is-open .modal {
  transform: translateY(0) scale(1);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1.25rem;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  flex-shrink: 0;
}
.modal-title {
  font-family: var(--font-heading);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 1rem;
}
.modal-actions {
  display: flex;
  gap: .5rem;
  flex-shrink: 0;
}
/* Form variant: full-width footer with separator (tickets nuevo, plantillas) */
.modal-actions--form {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-subtle);
  justify-content: flex-end;
  gap: .75rem;
  background: var(--bg-secondary);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.modal-close:hover { color: var(--text-primary); background: var(--bg-secondary); }

.modal-body {
  flex: 1;
  overflow: hidden;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
/* Form variant: scrollable body, no rounded bottom (actions has the radius) */
.modal--form .modal-body {
  overflow-y: auto;
  border-radius: 0;
}
.modal-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: var(--bg-tertiary);
}

/* Modal modifier: compact form modal (tickets nuevo, plantillas).
   Override the wide PDF-preview defaults so a form sits at a comfortable width. */
.modal--form {
  width: 100%;
  max-width: 640px;
  height: auto;
  max-height: calc(100vh - 4rem);
  border-radius: var(--radius-lg);
}

/* ── Skeleton system ──────────────────────────────────────
   Animated placeholders shown while async data is fetching.
   Use via window.Skeletons (public/js/skeletons.js) which builds
   semantic rows / cards / detail trees from these primitives. */
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.skeleton {
  position: relative;
  display: block;
  background: var(--skeleton-base);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--skeleton-highlight) 50%,
    transparent 100%
  );
  animation: shimmer 1.4s var(--ease-in-out) infinite;
}

.skeleton--text { height: 0.85em; width: 100%; border-radius: var(--radius-xs); }
.skeleton--text-sm { height: 0.7em; }
.skeleton--text-lg { height: 1.1em; }
.skeleton--circle { border-radius: var(--radius-full); aspect-ratio: 1 / 1; }
.skeleton--badge { width: 64px; height: 22px; border-radius: var(--radius-xs); }
.skeleton--button { width: 92px; height: 32px; border-radius: var(--radius-md); }
.skeleton--block { height: 60px; border-radius: var(--radius-md); }

/* Row used in tables: a single tr-like band with gridded cells */
.skeleton-row {
  display: grid;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.skeleton-row .skeleton { height: 14px; }
.skeleton--narrow { width: 60%; }
.skeleton--mid    { width: 80%; }
.skeleton--wide   { width: 100%; }

/* Card placeholder for grid layouts */
.skeleton-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.skeleton-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.skeleton-card__head .skeleton--circle { width: 36px; height: 36px; }
.skeleton-card__head-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.skeleton-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Detail placeholder for drawer / detail page */
.skeleton-detail {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
}
.skeleton-detail__head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.skeleton-detail__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ── Drawer system ────────────────────────────────────────
   Side-panel detail (tickets, future detail views).
   Inherits modal-overlay's blur + opacity transitions. */
@keyframes drawerSlideInRight {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes drawerSlideInBottom {
  from { transform: translateY(100%); }
  to   { transform: translateY(0);    }
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: var(--blur-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
}
.drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.drawer {
  position: relative;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-subtle);
  width: min(640px, 92vw);
  max-width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  transform: translateX(24px);
  opacity: 0;
  transition: transform var(--transition-xslow), opacity var(--transition-normal);
}
.drawer-overlay.is-open .drawer {
  transform: translateX(0);
  opacity: 1;
}

.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-tertiary);
  flex-shrink: 0;
}
.drawer__title {
  font-family: var(--font-heading);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.drawer__close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.drawer__close:hover { color: var(--text-primary); background: var(--bg-secondary); }

.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.drawer__body--iframe {
  overflow: hidden;
}
.drawer__iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: var(--bg-primary);
  display: block;
}
.drawer__handle {
  display: none;
}

/* Embedded mode: page rendered inside a drawer iframe — hide its chrome */
html.is-embedded body { padding: 0 !important; }
html.is-embedded .sidebar,
html.is-embedded .sidebar-overlay,
html.is-embedded .mobile-header,
html.is-embedded .topbar,
html.is-embedded .content-sync-bar,
html.is-embedded .feedback-btn,
html.is-embedded .fab,
html.is-embedded .sidebar-version {
  display: none !important;
}
html.is-embedded .main-content,
html.is-embedded .app-shell .main-content {
  margin-left: 0 !important;
  width: 100% !important;
  padding: 1rem 1.25rem !important;
  animation: none !important;
}
html.is-embedded #app-shell { display: block; }

@media (max-width: 720px) {
  .drawer-overlay {
    align-items: flex-end;
  }
  .drawer {
    width: 100%;
    height: 92vh;
    border-left: none;
    border-top: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    transform: translateY(24px);
  }
  .drawer-overlay.is-open .drawer {
    transform: translateY(0);
  }
  .drawer__handle {
    display: block;
    width: 36px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--border-subtle);
    margin: 8px auto 0;
    flex-shrink: 0;
  }
}

/* ── Filter badge ──────────────────────────────────────── */
.filter-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  margin-bottom: 1rem;
  background: rgba(225, 29, 72, .1);
  border: 1px solid rgba(225, 29, 72, .25);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-size: var(--text-small);
}

.filter-clear {
  color: var(--accent);
  text-decoration: none;
  font-weight: var(--weight-regular);
  margin-left: .25rem;
}

.filter-clear:hover {
  text-decoration: underline;
}

/* .status--* eliminados — dead code. Si vuelve: .badge .badge--sm .badge--{warning|success}. */

/* ── Forms ─────────────────────────────────────────────── */
/* .form-card — inherits from .card */
.form-card {
  padding: 24px;
}

.form-section-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--text-tertiary);
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border-subtle);
}

.form-optional {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-secondary);
  opacity: .6;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.form-group--full {
  grid-column: 1 / -1;
}

.form-group label {
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 10px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  outline: none;
  transition: border-color var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent);
}

.form-group input:disabled,
.form-group select:disabled,
.form-group textarea:disabled {
  opacity: 0.5;
  background: var(--bg-primary);
  border-color: var(--bg-tertiary);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-secondary);
  opacity: .5;
}

.form-group select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 36px;
}

.form-group textarea {
  resize: vertical;
  min-height: 56px;
}

.assign-toggle {
  margin-bottom: 1rem;
}

.toggle-label {
  display: flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  font-size: var(--text-small);
  color: var(--text-secondary);
}

.toggle-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

.assign-fields {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 1rem 1.25rem;
  padding: 1rem;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  margin-bottom: .5rem;
}

.search-box--inline {
  position: relative;
}

.search-box--inline .search-input-wrap input {
  padding: .65rem .85rem .65rem 36px;
  background: var(--bg-primary);
  font-size: var(--text-small);
}

.search-box--inline .search-icon {
  left: 10px;
  width: 16px;
  height: 16px;
}

.colab-selected {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .85rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-top: .35rem;
}

.colab-selected img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.colab-selected .colab-sel-info {
  flex: 1;
  min-width: 0;
}

.colab-selected .colab-sel-name {
  font-weight: var(--weight-regular);
  font-size: var(--text-small);
  color: var(--text-primary);
}

.colab-selected .colab-sel-role {
  font-size: var(--text-label);
  color: var(--text-secondary);
}

.form-actions {
  margin-top: 1.75rem;
  display: flex;
  justify-content: flex-end;
}

.btn--lg {
  padding: .75rem 1.5rem;
  font-size: var(--text-body);
}

@media (max-width: 1024px) {
  .form-grid { grid-template-columns: 1fr; }
  .assign-fields { grid-template-columns: 1fr; }
}

/* ── Inventory filters ─────────────────────────────────── */
.inv-filters {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.inv-filter {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  padding: 6px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.inv-filter:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.inv-filter.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--color-on-accent);
}

.inv-search {
  margin-left: auto;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-small);
  outline: none;
  width: 220px;
  transition: border-color var(--transition-fast);
}

.inv-search:focus {
  border-color: var(--accent);
}

.inv-search::placeholder {
  color: var(--text-secondary);
  opacity: .5;
}

/* .inv-colab-tag — inherits from .badge */
.inv-colab-tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: rgba(34, 197, 94, .12);
  color: var(--color-success);
}

.inv-colab-tag--none {
  background: rgba(234, 179, 8, .12);
  color: var(--color-warning);
}

/* ── Recibos — totals & filters ────────────────────────── */
.recibo-totals {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.recibo-stat {
  flex: 1;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-base);
  padding: 1rem 1.25rem;
  text-align: center;
  transition: border-color var(--transition-fast);
}

.recibo-stat:hover {
  border-color: var(--text-secondary);
}

.recibo-stat__num {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.recibo-stat--cop .recibo-stat__num { color: var(--color-info); }
.recibo-stat--usd .recibo-stat__num { color: #fbbf24; }

.recibo-stat__label {
  font-size: var(--text-label);
  color: var(--text-secondary);
  letter-spacing: .5px;
  margin-top: .2rem;
  display: block;
}

.recibo-filters {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.recibo-filter-row {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.recibo-filter-row + .recibo-filter-row {
  margin-left: .25rem;
  padding-left: .75rem;
  border-left: 1px solid var(--border-subtle);
}

.recibo-filter-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  letter-spacing: .4px;
  opacity: .5;
  flex-shrink: 0;
}

.recibo-filter-group {
  display: flex;
  gap: .2rem;
  flex-wrap: wrap;
}

.recibo-filter-btn {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  padding: 6px 14px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.recibo-filter-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.recibo-filter-btn.is-active {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-weight: var(--weight-regular);
}

.recibo-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.recibo-dot--banco { background: #60a5fa; }
.recibo-dot--crypto { background: #fbbf24; }


/* .recibo-badge y .estado-tag eliminados — dead code, sin uso en HTML/JS.
   Si vuelven a hacer falta: usar .badge .badge--{info|warning|success|neutral}. */

.record-amount {
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: var(--text-body);
  color: var(--text-primary);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 120px;
  text-align: right;
}

.record-amount--usd {
  color: #fbbf24;
}

@media (max-width: 900px) {
  .recibo-totals { flex-direction: column; }
  .recibo-filters { gap: .35rem; }
  .recibo-filter-row + .recibo-filter-row { margin-left: 0; padding-left: 0; border-left: none; }
  .record-amount { min-width: auto; text-align: left; }
}

/* ── Empty state ────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-secondary);
}
.empty-state svg { width: 64px; height: 64px; margin-bottom: 1rem; opacity: .4; }
.empty-state p { font-size: var(--text-body); }

/* ── Loading spinner ────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid var(--border-subtle);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
.spinner--sm { width: 14px; height: 14px; border-width: 2px; vertical-align: middle; }

/* ── Roadmap ───────────────────────────────────────────── */

/* Filters */
.rm-toolbar { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.25rem; }
.rm-filter-row { display: flex; align-items: center; gap: .75rem; }
.rm-filter-label { font-size: var(--text-label); color: var(--text-tertiary); min-width: 75px; }
.rm-filter-group { display: flex; gap: .3rem; flex-wrap: wrap; }
.rm-filter-btn {
  background: transparent; border: 1px solid var(--border-subtle); color: var(--text-secondary);
  padding: 6px 14px; border-radius: var(--radius-md); font-size: var(--text-label); font-weight: var(--weight-medium); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.rm-filter-btn:hover { border-color: var(--text-secondary); color: var(--text-primary); }
.rm-filter-btn.is-active { background: var(--bg-tertiary); border-color: var(--text-secondary); color: var(--text-primary); }

/* Kanban board */
.rm-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: 1.5rem; }
/* .rm-col — inherits from .card */
.rm-col { border-radius: var(--radius-base); padding: .65rem; min-height: 180px; }
.rm-col__head { display: flex; align-items: center; gap: .45rem; margin-bottom: .6rem; padding-bottom: .45rem; border-bottom: 1px solid var(--border-subtle); }
.rm-col__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.rm-col__title { font-size: var(--text-small); font-weight: var(--weight-regular); color: var(--text-primary); }
.rm-col__count { margin-left: auto; font-size: var(--text-label); color: var(--text-secondary); background: var(--bg-tertiary); padding: .1rem .35rem; border-radius: var(--radius-xs); }
.rm-col__cards { display: flex; flex-direction: column; gap: .4rem; }
.rm-col__empty { text-align: center; padding: 1.25rem .5rem; color: var(--text-secondary); font-size: var(--text-label); opacity: .5; }
.rm-empty { text-align: center; padding: 1.5rem; color: var(--text-secondary); opacity: .5; }

/* Cards */
/* .rm-card — inherits from .card */
.rm-card {
  padding: 16px; cursor: pointer; transition: border-color var(--transition-fast);
}
.rm-card:hover { border-color: var(--text-secondary); }
.rm-card__head { display: flex; align-items: center; gap: .35rem; margin-bottom: .25rem; }
.rm-card__prio { font-size: var(--text-xs); font-weight: var(--weight-medium); padding: 2px 6px; border-radius: var(--radius-xs); }
.rm-card__prio--critical { background: var(--prio-critical-bg); color: var(--prio-critical-text); }
.rm-card__prio--high     { background: var(--prio-high-bg);     color: var(--prio-high-text); }
.rm-card__prio--medium   { background: var(--prio-medium-bg);   color: var(--prio-medium-text); }
.rm-card__prio--low      { background: var(--prio-low-bg);      color: var(--prio-low-text); }
.rm-card__cat { font-size: var(--text-xs); color: var(--text-secondary); opacity: .6; margin-left: auto; }
.rm-card__title { font-size: var(--text-small); font-weight: var(--weight-regular); color: var(--text-primary); line-height: 1.3; margin-bottom: .3rem; }
.rm-card__progress { display: flex; align-items: center; gap: .4rem; margin-bottom: .25rem; }
.rm-card__bar { flex: 1; height: 3px; background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden; }
.rm-card__fill { height: 100%; border-radius: 2px; transition: width var(--transition-normal); }
.rm-card__pct { font-size: var(--text-xs); color: var(--text-secondary); opacity: .6; }
.rm-card__foot { display: flex; align-items: center; justify-content: space-between; }
.rm-card__id { font-size: var(--text-xs); color: var(--text-secondary); opacity: .4; font-family: monospace; }
.rm-card__tasks { font-size: var(--text-xs); color: var(--text-secondary); opacity: .5; }

/* Bugfixes */
.rm-bugs { margin-bottom: 1.25rem; }
.rm-bugs__title { font-size: var(--text-small); font-weight: var(--weight-regular); color: var(--text-secondary); margin-bottom: .5rem; }
.rm-bugs__list { display: flex; flex-direction: column; gap: .3rem; }
.rm-bug-row {
  display: flex; align-items: center; gap: .5rem; padding: .45rem .7rem;
  background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-left: 3px solid #ef4444; border-radius: var(--radius-sm);
}
.rm-bug-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.rm-bug-title { font-size: var(--text-small); color: var(--text-primary); flex: 1; }
.rm-bug-id { font-size: var(--text-xs); color: var(--text-secondary); opacity: .5; font-family: monospace; }
.rm-bug-progress { display: flex; align-items: center; gap: .35rem; width: 90px; flex-shrink: 0; }
.rm-bug-bar { flex: 1; height: 3px; background: var(--bg-tertiary); border-radius: 2px; overflow: hidden; }
.rm-bug-fill { height: 100%; border-radius: 2px; }
.rm-bug-pct { font-size: var(--text-xs); color: var(--text-secondary); opacity: .5; }

/* Changelog */
.rm-changelog { padding-top: 1rem; border-top: 1px solid var(--border-subtle); }
.rm-changelog h3 { font-size: var(--text-label); font-weight: var(--weight-regular); color: var(--text-secondary); opacity: .5; margin-bottom: .5rem; }
.rm-changelog__list { display: flex; flex-direction: column; gap: .2rem; }
.rm-log { display: flex; align-items: baseline; gap: .6rem; font-size: var(--text-label); }
.rm-log__date { color: var(--text-secondary); opacity: .5; font-family: monospace; flex-shrink: 0; }
.rm-log__text { color: var(--text-secondary); opacity: .7; }

/* ── Back button ───────────────────────────────────────── */
.rm-back-row { margin-bottom: 1rem; }
.rm-back-btn {
  display: inline-flex; align-items: center; gap: .35rem; background: none; border: none;
  color: var(--text-secondary); font-size: var(--text-small); cursor: pointer; padding: .25rem 0; transition: color var(--transition-fast);
}
.rm-back-btn:hover { color: var(--text-primary); }
.rm-back-btn svg { flex-shrink: 0; }

/* ── Detail view (full page) ──────────────────────────── */
.rm-dt-header { margin-bottom: 1rem; }
.rm-dt-header__top { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.rm-dt-id { font-size: var(--text-label); color: var(--text-secondary); opacity: .5; font-family: monospace; }
.rm-dt-cat { font-size: var(--text-label); color: var(--text-secondary); opacity: .6; }
.rm-dt-title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: var(--weight-medium); color: var(--text-primary); line-height: 1.3; margin-bottom: .35rem; }
.rm-dt-desc { font-size: var(--text-small); color: var(--text-secondary); font-weight: var(--weight-reading); line-height: var(--lh-reading); letter-spacing: var(--track-reading); }

/* Status + progress */
.rm-dt-status-row { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-subtle); }
.rm-dt-status-btns { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .65rem; }
.rm-dt-status-btn {
  background: transparent; border: 1px solid var(--border-subtle); color: var(--text-secondary);
  padding: .3rem .65rem; border-radius: 5px; font-size: var(--text-label); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.rm-dt-status-btn:hover { border-color: var(--sc); color: var(--sc); }
.rm-dt-status-btn.is-active { background: var(--sc); border-color: var(--sc); color: var(--color-on-accent); }
.rm-dt-status-btn:disabled { opacity: 1; cursor: default; }
.rm-dt-progress-wrap { display: flex; flex-direction: column; gap: .25rem; }
.rm-dt-progress { height: 7px; background: var(--bg-tertiary); border-radius: var(--radius-xs); overflow: hidden; }
.rm-dt-progress-fill { height: 100%; border-radius: var(--radius-xs); transition: width var(--transition-normal); }
.rm-dt-progress-label { font-size: var(--text-label); color: var(--text-secondary); opacity: .6; }

/* Two-column grid */
.rm-dt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.rm-dt-panel__title { font-size: var(--text-small); font-weight: var(--weight-regular); color: var(--text-secondary); margin-bottom: .5rem; padding-bottom: .3rem; border-bottom: 1px solid var(--border-subtle); }

/* Tasks */
.rm-dt-tasks { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .5rem; }
.rm-dt-task { display: flex; align-items: center; gap: .3rem; padding: .2rem 0; }
.rm-dt-task__label { display: flex; align-items: center; gap: .4rem; flex: 1; cursor: pointer; font-size: var(--text-small); color: var(--text-primary); }
.rm-dt-task__label input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; }
.rm-dt-task__text.is-done { text-decoration: line-through; opacity: .4; }
.rm-dt-task__w { font-size: var(--text-xs); color: var(--text-secondary); opacity: .45; background: var(--bg-tertiary); padding: .1rem .3rem; border-radius: 3px; flex-shrink: 0; }
.rm-dt-task__del { background: none; border: none; color: var(--text-secondary); opacity: 0; font-size: var(--text-body); cursor: pointer; padding: 0 .15rem; transition: opacity var(--transition-fast); }
.rm-dt-task:hover .rm-dt-task__del { opacity: .4; }
.rm-dt-task__del:hover { opacity: 1 !important; color: var(--color-error); }

/* Add row (shared for tasks + achievements) */
.rm-dt-add-row { display: flex; gap: .3rem; align-items: center; }
/* .rm-dt-add-row inputs — inherit from .input-inline */
.rm-dt-add-row input[type="text"] { flex: 1; }
.rm-dt-add-row select { color: var(--text-secondary); cursor: pointer; }

/* Notes */
.rm-dt-notes { font-size: var(--text-small); color: var(--text-secondary); font-weight: var(--weight-reading); line-height: 1.6; letter-spacing: var(--track-reading); font-style: italic; padding: .5rem .65rem; background: rgba(255,255,255,.03); border-radius: var(--radius-sm); margin-bottom: .85rem; }

/* Achievements */
.rm-dt-achs { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .5rem; }
.rm-dt-ach { display: flex; align-items: baseline; gap: .4rem; font-size: var(--text-small); padding: .15rem 0; }
.rm-dt-ach__date { font-size: var(--text-xs); color: var(--text-secondary); opacity: .5; font-family: monospace; flex-shrink: 0; }
.rm-dt-ach__text { color: var(--text-primary); flex: 1; }
.rm-dt-ach__del { background: none; border: none; color: var(--text-secondary); opacity: 0; font-size: var(--text-small); cursor: pointer; transition: opacity var(--transition-fast); }
.rm-dt-ach:hover .rm-dt-ach__del { opacity: .4; }
.rm-dt-ach__del:hover { opacity: 1 !important; color: var(--color-error); }
.rm-dt-empty { font-size: var(--text-label); color: var(--text-secondary); opacity: .4; margin-bottom: .4rem; }

/* Edit (collapsed) */
.rm-dt-edit-wrap { margin-top: 1rem; }
.rm-dt-edit-toggle { font-size: var(--text-label); color: var(--text-secondary); opacity: .5; cursor: pointer; padding: .3rem 0; }
.rm-dt-edit-toggle:hover { opacity: .8; }
.rm-dt-edit { display: flex; flex-direction: column; gap: .45rem; margin-top: .5rem; }
.rm-dt-field label { display: block; font-size: var(--text-xs); color: var(--text-secondary); opacity: .6; margin-bottom: .1rem; }
/* .rm-dt-field inputs — inherit from .input-inline */
.rm-dt-field input, .rm-dt-field textarea, .rm-dt-field select { width: 100%; }
.rm-dt-field textarea { resize: vertical; min-height: 48px; }
.rm-dt-field select { cursor: pointer; }
.rm-dt-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }

/* Meta */
.rm-dt-meta { display: flex; gap: .75rem; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--border-subtle); }
.rm-dt-meta span { font-size: var(--text-xs); color: var(--text-secondary); opacity: .5; }

/* Responsive */
@media (max-width: 1024px) {
  .rm-board { grid-template-columns: 1fr 1fr; }
  .rm-dt-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .rm-board { grid-template-columns: 1fr; }
  .rm-filter-row { flex-direction: column; align-items: flex-start; gap: .25rem; }
}

/* ── CRM Clientes ──────────────────────────────────────── */

.page-header__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.cl-toolbar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.cl-search {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: .5rem .75rem;
}

.cl-search svg {
  color: var(--text-secondary);
  flex-shrink: 0;
}

.cl-search input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--text-small);
  width: 100%;
}

.cl-search input::placeholder {
  color: var(--text-secondary);
  opacity: .6;
}

.cl-filters {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* List row styles */
a.cl-row {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
}

.cl-card__code {
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  padding: .12rem .35rem;
  border-radius: var(--radius-xs);
  margin-left: .4rem;
  vertical-align: middle;
}

/* Status badges — .cl-status inherits from .badge */

.cl-status--lg {
  font-size: var(--text-small);
  padding: 4px 12px;
}

.cl-status--activo {
  background: rgba(34, 197, 94, .15);
  color: #4ade80;
}

.cl-status--en-curso {
  background: rgba(234, 179, 8, .15);
  color: #facc15;
}

.cl-status--sin-contactar {
  background: rgba(161, 161, 170, .15);
  color: #a1a1aa;
}

.cl-status--inactivo {
  background: rgba(239, 68, 68, .15);
  color: #f87171;
}

/* Service tags */
/* .cl-tag — inherits from .badge */
.cl-tag {
  background: rgba(225, 29, 72, .12);
  color: var(--accent);
}

.cl-tag--lg {
  font-size: var(--text-small);
  padding: 4px 12px;
}

/* Form modal */
.cl-form-modal {
  max-width: 640px;
  width: min(100%, 640px);
  height: auto;
  max-height: 92vh;
}

/* Modal edición cliente — más ancho para formularios largos */
.cl-form-modal--wide {
  max-width: min(98vw, 1120px);
  width: min(98vw, 1120px);
  max-height: 94vh;
}

.modal.cl-form-modal--wide {
  height: auto;
  max-height: 94vh;
}

.cl-form-modal--wide .modal-body {
  max-height: calc(94vh - 3.75rem);
  overflow-y: auto;
}

.form-hint {
  font-size: var(--text-small);
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0 0 .75rem;
}

.cl-inline-row {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: stretch;
  margin-bottom: 0;
  width: 100%;
  grid-column: 1 / -1;
}

.cl-form-modal .cl-inline-row,
.form-grid .cl-inline-row {
  margin-bottom: 0;
}

.cl-inline-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: .65rem .85rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-small);
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.cl-inline-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(225, 29, 72, .12);
}

.cl-inline-row .btn {
  flex-shrink: 0;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
}

.cl-lists-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  width: 100%;
  min-height: 2.55rem;
  padding: .5rem .75rem;
  margin-bottom: .5rem;
  box-sizing: border-box;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.cl-list-chip {
  font-size: var(--text-small);
  padding: .35rem .65rem;
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  line-height: 1.3;
}

.cl-extra-row {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-subtle);
}

.cl-extra-row:last-of-type {
  border-bottom: none;
}

.cl-contact-notify-block {
  width: 100%;
  grid-column: 1 / -1;
}

.cl-notify-checks {
  margin-top: .75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  width: 100%;
}

.form-grid > .form-section-title,
.form-grid > .form-hint {
  grid-column: 1 / -1;
}

.cl-notify-checks__title {
  font-size: var(--text-label);
  color: var(--text-secondary);
  width: 100%;
  margin-bottom: .15rem;
}

.cl-check-label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--text-small);
  color: var(--text-primary);
  cursor: pointer;
}

.cl-check-label input {
  accent-color: var(--accent);
}

.cl-email-block {
  padding: .65rem 0;
  border-bottom: 1px solid var(--border-subtle);
}

.cl-email-block:last-child {
  border-bottom: none;
}

.cl-email-block__addr {
  font-weight: var(--weight-medium);
}

.cl-email-block__label {
  font-size: var(--text-small);
  color: var(--text-secondary);
  font-weight: var(--weight-regular);
}

.cl-email-block__lists {
  margin-top: .35rem;
}

.cl-email-block__hint {
  font-size: var(--text-label);
  color: var(--text-secondary);
  margin-right: .25rem;
}

/* Client detail page */
.cl-back {
  margin-bottom: 1.25rem;
}

.btn--sm {
  font-size: var(--text-small);
  padding: .35rem .65rem;
  gap: .3rem;
}

.cl-link {
  color: var(--accent);
  text-decoration: none;
  font-size: var(--text-small);
}

.cl-link:hover {
  text-decoration: underline;
}

/* ── Cliente: shell tipo CRM (tabs + tablas) ───────────── */

.cl-list-sub {
  color: var(--text-secondary);
  font-size: var(--text-small);
}

.cl-list-hero {
  margin-bottom: 1.25rem;
}

.cl-list-hero__label {
  display: block;
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  margin-bottom: .5rem;
}

.cl-search--hero {
  padding: 10px 14px;
  border-radius: var(--radius-base);
  border: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
}

.cl-search--hero input {
  font-size: var(--text-body);
}

.cl-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
}

/* .cl-directory-table — inherits from .data-table, no overrides needed */

.cl-dir-row__name strong {
  font-weight: var(--weight-regular);
  color: var(--text-primary);
}

.cl-dir-row__muted {
  color: var(--text-secondary);
  font-size: var(--text-small);
  max-width: 14rem;
}

.cl-dir-row__phone {
  color: var(--text-secondary);
  font-size: var(--text-small);
  white-space: nowrap;
}

.cl-dir-row__go {
  width: 4rem;
  text-align: right;
}

.cl-dir-row__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  opacity: 0.85;
}

.cl-dir-row__arrow svg {
  display: block;
}

.cl-directory-table tbody tr:hover .cl-dir-row__arrow {
  opacity: 1;
}

.cl-dir-row__warn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  line-height: 1;
  vertical-align: middle;
  color: #fbbf24;
  background: rgba(180, 83, 9, 0.35);
  border: 1px solid rgba(251, 191, 36, 0.45);
  flex-shrink: 0;
}

.cl-client-top {
  margin-bottom: 1rem;
}

.cl-client-top__nav {
  margin-bottom: .75rem;
}

.cl-client-top__nav--split {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.cl-client-top__nav--solo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.cl-codigo-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cl-input-codigo {
  max-width: 5rem;
  font-family: ui-monospace, monospace;
}

.cl-contact-notify-block {
  padding: 0.75rem 0;
  border-top: 1px solid var(--border-subtle);
}

.cl-client-top__main {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-subtle);
}

.cl-client-top__hero {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.cl-client-avatar {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: 1.05rem;
  color: var(--color-on-accent);
  background: linear-gradient(145deg, var(--accent) 0%, #8b1538 55%, #5c0f28 100%);
  border: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-sm);
}

.cl-client-top__hero-text {
  flex: 1;
  min-width: 0;
}

.cl-client-top__titles {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem .75rem;
  margin-bottom: .5rem;
}

.cl-client-top__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin-bottom: 0.35rem;
}

.cl-client-top__title-row .cl-client-top__name {
  margin: 0;
}

.cl-client-top__warn-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: #fbbf24;
  background: rgba(180, 83, 9, 0.35);
  border: 1px solid rgba(251, 191, 36, 0.45);
  flex-shrink: 0;
  cursor: help;
}

.cl-client-top__meta-compact {
  margin: 0.35rem 0 0;
  font-size: var(--text-small);
  line-height: 1.45;
  color: var(--text-secondary);
  word-break: break-word;
}

.cl-pg-plan-name {
  font-weight: var(--weight-regular);
  color: var(--text-primary);
}

.cl-pg-plan-hint {
  margin-top: 0.25rem;
  font-size: var(--text-label);
  line-height: 1.35;
  color: var(--text-secondary);
  opacity: 0.95;
}

.cl-pg-charge-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.12rem 0.45rem;
  border-radius: var(--radius-xs);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  vertical-align: middle;
}
.cl-pg-charge-badge--mrc {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
}
.cl-pg-charge-badge--nrc {
  background: rgba(168, 85, 247, 0.2);
  color: #d8b4fe;
}
.cl-pg-muted {
  font-size: var(--text-small);
  color: var(--text-secondary);
  line-height: 1.45;
  white-space: pre-wrap;
}
.cl-textarea-plan-includes {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 5.5rem;
  padding: 0.6rem 0.75rem;
  font-size: var(--text-small);
  line-height: 1.45;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  resize: vertical;
}

.cl-client-top__name {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.cl-client-top__alias {
  margin: 0.35rem 0 0.5rem;
  font-size: var(--text-small);
  color: var(--text-secondary);
  line-height: 1.35;
}

.cl-client-top__alias-k {
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  opacity: 0.75;
  margin-right: 0.35rem;
}

.cl-client-top__loc-block {
  margin: 0.4rem 0 0;
  max-width: 100%;
}

.cl-client-top__loc-line1,
.cl-client-top__loc-line2 {
  margin: 0;
  font-size: var(--text-small);
  line-height: 1.45;
  color: var(--text-secondary);
  word-break: break-word;
}

.cl-client-top__loc-line2 {
  margin-top: 0.2rem;
  font-size: var(--text-small);
  opacity: 0.95;
}

.cl-client-top__links-line {
  margin-top: 0.45rem;
}

.cl-client-top__pipe-line {
  margin: 0.35rem 0 0;
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--text-secondary);
  word-break: break-word;
}

.cl-client-top__pipe-line .cl-pipe {
  margin: 0 0.35rem;
  opacity: 0.45;
  user-select: none;
}

.cl-client-top__pipe-link {
  color: var(--accent);
  text-decoration: none;
}

.cl-client-top__pipe-link:hover {
  text-decoration: underline;
}

.cl-client-top__pipe-link--tel {
  font-variant-numeric: tabular-nums;
}

.cl-tag--principal {
  border-color: rgba(220, 38, 38, 0.55);
  background: rgba(220, 38, 38, 0.15);
  color: #fecaca;
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  vertical-align: middle;
  margin-right: 0.35rem;
}

.cl-dir-contact__line--name {
  display: block;
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  margin-bottom: 0.15rem;
}

.cl-client-top__code {
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  padding: .2rem .45rem;
  border-radius: var(--radius-xs);
}

.cl-client-top__id {
  font-size: var(--text-label);
  color: var(--text-secondary);
  opacity: .7;
  font-family: ui-monospace, monospace;
}

.cl-client-top__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.cl-client-top__meta {
  font-size: var(--text-small);
  color: var(--text-secondary);
}

.cl-client-top__summary {
  margin-top: 0.55rem;
  max-width: 100%;
}

.cl-client-top__summary-line {
  margin: 0;
  font-size: var(--text-small);
  line-height: 1.45;
  color: var(--text-secondary);
  word-break: break-word;
}

.cl-client-top__summary-line--meta {
  margin-top: 0.25rem;
  font-size: var(--text-label);
  opacity: 0.92;
}

.cl-profile-header__subtitle {
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  opacity: 0.88;
  line-height: 1.35;
}

.cl-profile-alert--top {
  margin-top: 0;
  margin-bottom: 0.85rem;
}

.cl-profile-alert {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 2.25rem 0.85rem 1rem;
  margin-bottom: 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(234, 179, 8, 0.45);
  background: rgba(234, 179, 8, 0.1);
  color: var(--text-primary);
  font-size: var(--text-small);
  line-height: 1.45;
}

.cl-profile-alert.is-dismissed {
  display: none !important;
}

.cl-profile-alert-dismiss {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.cl-profile-alert-dismiss:hover {
  background: rgba(0, 0, 0, 0.12);
  color: var(--text-primary);
}

.cl-profile-alert__icon {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-bold);
  font-size: var(--text-body);
  background: rgba(234, 179, 8, 0.35);
  color: #422006;
}

.cl-profile-alert__one {
  margin: 0.35rem 0 0;
  font-size: var(--text-small);
  line-height: 1.45;
  opacity: 0.95;
}

.cl-profile-alert__pipe {
  opacity: 0.4;
  margin: 0 0.4rem;
  font-weight: var(--weight-regular);
}

.cl-empty-field {
  color: var(--text-secondary);
  opacity: 0.65;
  font-style: italic;
}

.cl-table-empty-msg {
  color: var(--text-secondary);
  font-size: var(--text-small);
  padding: 0.65rem 0.65rem !important;
}

/* Cliente: perfil colapsable + tags de sección */
.cl-profile-shell {
  margin-bottom: 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  overflow: hidden;
}

.cl-profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.85rem 1.1rem;
  margin: 0;
  border: none;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.cl-profile-header:hover {
  background: rgba(225, 29, 72, 0.08);
}

.cl-profile-header__left {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.cl-profile-header__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: var(--text-body);
}

.cl-profile-header__lines {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: left;
  max-width: 100%;
}

.cl-profile-header__line {
  font-size: var(--text-small);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cl-profile-header__line--meta {
  font-size: var(--text-label);
  opacity: 0.9;
}

.cl-profile-header__chev {
  flex-shrink: 0;
  opacity: 0.75;
  transition: transform var(--transition-normal);
}

.cl-profile-shell.is-collapsed .cl-profile-header__chev {
  transform: rotate(-90deg);
}

.cl-profile-body {
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid var(--border-subtle);
}

.cl-section-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin-bottom: 0.75rem;
  align-items: center;
}

.cl-back-to-dir {
  flex-shrink: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.cl-section-tags__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  flex: 1;
  min-width: 0;
  align-items: center;
}

.cl-section-tag {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  padding: 6px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.cl-section-tag:hover {
  color: var(--text-primary);
  border-color: rgba(225, 29, 72, 0.35);
}

.cl-section-tag.is-active {
  color: var(--text-primary);
  background: rgba(225, 29, 72, 0.12);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(225, 29, 72, 0.15);
}

.cl-section-panels {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.25rem 1.5rem;
  min-height: 10rem;
}

.cl-section-panel.is-active {
  display: block;
}

.cl-section-panel[hidden] {
  display: none !important;
}

.cl-kb-sub {
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
}

.cl-kb-sub:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.cl-kb-hint {
  margin: 0 0 0.75rem;
  font-size: var(--text-small);
}

.cl-kb-inline {
  margin-top: 0.75rem;
}

.cl-extra-list {
  margin-bottom: 0.75rem;
}

.cl-extra-table-wrap {
  margin-top: 1rem;
}

.cl-quick-links {
  margin: 0;
  padding-left: 1.15rem;
  list-style: disc;
}

.cl-quick-links__a {
  color: var(--accent);
  text-decoration: none;
}

.cl-quick-links__a:hover {
  text-decoration: underline;
}

.cl-tool-posts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cl-tool-posts__item {
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cl-tool-posts__link {
  color: var(--accent);
  font-weight: var(--weight-regular);
  text-decoration: none;
}

.cl-tool-posts__link:hover {
  text-decoration: underline;
}

.cl-tool-posts__note {
  font-size: var(--text-small);
  color: var(--text-secondary);
}

.cl-ticket-status {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  letter-spacing: 0.02em;
}

.cl-ticket-status--abierto {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.cl-ticket-status--proceso {
  background: rgba(234, 179, 8, 0.2);
  color: #fde047;
  border: 1px solid rgba(234, 179, 8, 0.4);
}

.cl-ticket-status--cerrado {
  background: rgba(148, 163, 184, 0.2);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.cl-dense-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cl-dense-wrap--tight {
  gap: 0.75rem;
}

.cl-loc-input-full {
  width: 100%;
  box-sizing: border-box;
}

.cl-phone-editor {
  margin-bottom: 0.25rem;
}

.cl-phone-editor__preview {
  font-size: var(--text-small);
  color: var(--text-secondary);
  margin: 0.35rem 0 0.75rem;
}

.cl-phone-editor__preview-k {
  opacity: 0.75;
}

.cl-phone-preview-value {
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.cl-phone-editor__actions {
  margin-bottom: 0.5rem;
}

.form-hint--block {
  display: block;
  margin-bottom: 0.5rem;
}

/* Filas de formulario en modal (no dependen del .form-grid de 2 cols) */
.cl-form-row-2,
.cl-form-row-3 {
  display: grid;
  gap: 1rem 1.25rem;
  grid-column: 1 / -1;
}
.cl-form-row-2 {
  grid-template-columns: 1fr 1fr;
}
.cl-form-row-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cl-con-add-bar {
  grid-column: 1 / -1;
  margin-bottom: 0.35rem;
}

.cl-con-contact-fields {
  margin-bottom: 0.35rem;
}

.cl-con-phone-row {
  margin-top: 0.25rem;
  margin-bottom: 0.35rem;
}

.cl-con-phone-preview {
  display: block;
  padding: 0.45rem 0.5rem;
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.cl-svc-date-input {
  font-variant-numeric: tabular-nums;
  min-width: 7.5rem;
}
@media (max-width: 720px) {
  .cl-form-row-2,
  .cl-form-row-3 {
    grid-template-columns: 1fr;
  }
}

.form-section-title--tight {
  margin-top: 0.35rem;
  margin-bottom: 0;
  grid-column: 1 / -1;
}

.form-hint-inline {
  font-weight: var(--weight-regular);
  opacity: 0.75;
  font-size: var(--text-label);
  text-transform: none;
  letter-spacing: 0;
}

/* Perfil compacto (vista lectura) */
.cl-dense-block--profile {
  margin: 0;
}
.cl-dense-block--profile .cl-dense-block__head {
  margin-bottom: 0.5rem;
}
.cl-profile-panel {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-base);
  padding: 0.65rem 0.85rem 0.75rem;
  background: var(--bg-tertiary);
}
.cl-profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem 0.85rem;
  font-size: var(--text-small);
}
@media (max-width: 720px) {
  .cl-profile-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 420px) {
  .cl-profile-grid {
    grid-template-columns: 1fr;
  }
}
.cl-pg-cell {
  min-width: 0;
}
.cl-pg-cell--full {
  grid-column: 1 / -1;
}
.cl-pg-k {
  display: block;
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  margin-bottom: 0.12rem;
}

.cl-dense-block--profile .cl-pg-k {
  text-transform: none;
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  letter-spacing: 0.02em;
}

.cl-dense-block--profile .cl-pg-v {
  word-break: break-word;
}

.cl-contact-name-cell {
  display: inline;
}

.cl-contact-name-cell .cl-tag--principal {
  margin-left: 0.35rem;
  vertical-align: middle;
}

.cl-con-make-primary {
  margin-top: 0.5rem;
  margin-right: 0.5rem;
}
.cl-pg-v {
  color: var(--text-primary);
  word-break: break-word;
  line-height: 1.35;
}
.cl-pg-v--muted {
  color: var(--text-secondary);
  font-size: var(--text-small);
}
.cl-pg-webline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: baseline;
}
.cl-pg-webline a.cl-link {
  font-size: var(--text-small);
}

.cl-dense-block__title {
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  margin: 0 0 .5rem;
}

.cl-kv {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
}

.cl-kv th {
  text-align: left;
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  padding: .4rem .75rem .4rem 0;
  width: 38%;
  max-width: 12rem;
  vertical-align: top;
}

.cl-kv td {
  padding: .4rem 0;
  color: var(--text-primary);
  word-break: break-word;
}

.cl-kv tr:not(:last-child) th,
.cl-kv tr:not(:last-child) td {
  border-bottom: 1px solid var(--border-subtle);
}

/* .cl-data-table — inherits from .data-table, only overrides below */
.cl-data-table { margin-top: .35rem; }
.cl-data-table td { vertical-align: top; }

.cl-muted {
  font-size: var(--text-small);
  color: var(--text-secondary);
  line-height: 1.45;
}
.cl-muted--inline { margin: 0; }

.cl-empty-panel {
  padding: 1rem 0;
}

.cl-thread {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.25rem;
  max-height: 22rem;
  overflow-y: auto;
}

.cl-thread__item {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-subtle);
}

.cl-thread__item:last-child {
  border-bottom: none;
}

.cl-thread__time {
  display: block;
  font-size: var(--text-label);
  color: var(--text-secondary);
  margin-bottom: .35rem;
}

.cl-thread__body {
  font-size: var(--text-small);
  line-height: 1.5;
  white-space: pre-wrap;
}

.cl-compose {
  padding-top: .5rem;
  border-top: 1px solid var(--border-subtle);
}

.cl-compose__label {
  display: block;
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  margin-bottom: .4rem;
}

.cl-compose__textarea {
  width: 100%;
  padding: .65rem .85rem;
  margin-bottom: .65rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--text-small);
  resize: vertical;
}

.cl-compose__input {
  width: 100%;
  padding: .55rem .75rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-small);
}

.cl-kb-add {
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
}

.cl-kb-snippet {
  font-size: var(--text-small);
  color: var(--text-secondary);
  margin-top: .35rem;
  line-height: 1.4;
}

/* Clientes: filtros + columnas */
.cl-filters-bar {
  margin-bottom: 0.75rem;
  width: 100%;
}
.cl-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
}
.cl-filters-dropdown {
  position: relative;
}
.cl-columns-dropdown {
  position: relative;
}
/* .cl-btn-columns-toggle inherits its visual from .page-toolbar__trigger.
   .cl-columns-panel inherits its surface from the canonical .dropdown-panel rule. */
.cl-columns-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 25;
  min-width: min(280px, 92vw);
  padding: 12px;
}
.cl-columns-panel__hint {
  margin: 0 0 0.65rem;
  font-size: var(--text-label);
  color: var(--text-secondary);
  line-height: 1.4;
}
.cl-columns-panel__item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast);
}
.cl-columns-panel__item:hover {
  background: rgba(255, 255, 255, 0.04);
}
/* Custom checkbox estilo REMOS — reemplaza el azul nativo del browser. */
.cl-columns-panel__item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid var(--border-muted);
  border-radius: 4px;
  background: var(--bg-primary);
  cursor: pointer;
  position: relative;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  flex-shrink: 0;
}
.cl-columns-panel__item input[type="checkbox"]:hover {
  border-color: var(--text-secondary);
}
.cl-columns-panel__item input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.cl-columns-panel__item input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 4px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--color-on-accent);
  border-bottom: 2px solid var(--color-on-accent);
  transform: rotate(45deg);
}
.cl-columns-panel__item input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.cl-dir-row__contact {
  font-size: var(--text-small);
  color: var(--text-secondary);
  max-width: 18rem;
}
.cl-dir-contact {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* Listado clientes: filas siempre en una sola línea, table-wrap permite scroll horizontal. */
.cl-directory-table { table-layout: auto; }
.cl-directory-table tbody td,
.cl-directory-table tbody th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 28rem;
}
.cl-directory-table .cl-dir-row__contact,
.cl-directory-table .cl-dir-row__muted {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* .cl-btn-filters-toggle inherits visual from .page-toolbar__trigger.
   .cl-filters-panel inherits its surface from the canonical .dropdown-panel rule. */
.cl-filters-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  min-width: min(320px, 92vw);
  padding: 12px;
}
.cl-filters-panel .rm-filter-row {
  margin-bottom: 0.65rem;
}
.cl-filters-panel .rm-filter-row:last-child {
  margin-bottom: 0;
}

/* Cliente: bloques con editar sutil */
.cl-dense-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.cl-dense-block__head .cl-dense-block__title {
  margin-bottom: 0;
}
.cl-btn-section-edit {
  flex-shrink: 0;
  padding: 0.2rem 0.55rem;
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.cl-btn-section-edit:hover {
  color: var(--accent);
  border-color: rgba(225, 29, 72, 0.35);
}
.cl-btn-section-edit--float {
  margin-left: auto;
}
.cl-panel-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.65rem;
}

.cl-loc-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.cl-loc-inline input[type="text"] {
  flex: 1;
  min-width: 140px;
  padding: 0.65rem 0.85rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-small);
}
.cl-btn-add-mini {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: var(--weight-regular);
  line-height: 1;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.cl-btn-add-mini:hover {
  color: var(--accent);
  border-color: rgba(225, 29, 72, 0.4);
}
.cl-phone-inline {
  display: flex;
  gap: 0.4rem;
  align-items: stretch;
}
.cl-phone-inline input[type="text"] {
  flex: 1;
  min-width: 0;
}
.cl-btn-icon-plus {
  flex-shrink: 0;
  width: 2.35rem;
  min-height: 2.45rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: var(--weight-regular);
  line-height: 1;
  color: var(--text-secondary);
  background: transparent;
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.cl-btn-icon-plus:hover {
  color: var(--accent);
  border-color: rgba(225, 29, 72, 0.45);
  background: rgba(225, 29, 72, 0.06);
}

.cl-svc-table-wrap {
  overflow-x: auto;
}
/* cl-svc-edit inputs — inherit from .input-inline */
.cl-svc-edit-table input[type="text"],
.cl-svc-edit-table .cl-svc-date-input {
  width: 100%;
  max-width: 100%;
}

/* ── Planes REMOS (catálogo) ─────────────────────────────── */
.rp-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.rp-global {
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
}
.rp-section-title {
  margin: 0 0 1rem;
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
}
.rp-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.rp-table {
  margin: 0;
  min-width: 1100px;
}
.rp-inp--includes {
  min-width: 12rem;
  max-width: 22rem;
}
.rp-inp--charge {
  max-width: 4.5rem;
}
.rp-table .rp-inp {
  width: 100%;
  min-width: 0;
  padding: 0.4rem 0.5rem;
  font-size: var(--text-small);
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  box-sizing: border-box;
}
.rp-inp--id {
  font-family: ui-monospace, monospace;
  font-size: var(--text-label);
}
.rp-inp--num {
  max-width: 6.5rem;
}
.rp-inp--label {
  min-width: 10rem;
}
.rp-th-actions {
  width: 1%;
  white-space: nowrap;
}
.rp-actions {
  white-space: nowrap;
}
.rp-footer-hint {
  margin-top: 1rem;
  max-width: 52rem;
}
.rp-cards-intro {
  margin-bottom: 1rem;
  max-width: 52rem;
}
.rp-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 56rem;
}
.rp-cards-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-secondary);
}
.rp-card {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
}
.rp-card__body {
  flex: 1;
  min-width: 0;
}
.rp-card__row1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.35rem;
}
.rp-card__id {
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
}
.rp-card__badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
}
.rp-card__badge--mrc {
  background: rgba(59, 130, 246, 0.22);
  color: #93c5fd;
}
.rp-card__badge--nrc {
  background: rgba(168, 85, 247, 0.25);
  color: #d8b4fe;
}
.rp-card__title {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  font-weight: var(--weight-regular);
  line-height: 1.35;
  color: var(--text-primary);
}
.rp-card__meta {
  margin: 0 0 0.5rem;
  font-size: var(--text-small);
  color: var(--text-secondary);
}
.rp-card__price {
  margin: 0;
  font-size: var(--text-body);
  color: var(--text-primary);
}
.rp-card__price-val {
  font-weight: var(--weight-regular);
  font-variant-numeric: tabular-nums;
}
.rp-card__price-ref {
  margin-left: 0.35rem;
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  text-transform: lowercase;
}
.rp-card__edit {
  align-self: center;
  flex-shrink: 0;
}
.rp-plan-modal__body {
  padding: 1rem 1.25rem 1.25rem;
  max-height: min(85vh, 720px);
  overflow-y: auto;
}
.rp-m-hint {
  margin-bottom: 1rem;
}
.rp-m-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle);
}
.rp-m-actions-right {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
}
.rp-btn-delete {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.35);
}
.rp-btn-delete:hover {
  background: rgba(248, 113, 113, 0.12);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Billing: lista de planes (tabla tipo Team) */
.rp-plans-list-block {
  margin-top: 0.5rem;
}
.rp-plans-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}
.rp-plans-toolbar__search {
  flex: 1;
  min-width: 200px;
}
.rp-plans-search-input {
  width: 100%;
  max-width: 28rem;
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--text-small);
}
.rp-plans-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}
.rp-plans-select {
  padding: 0.45rem 0.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--text-small);
  min-width: 9rem;
}
.rp-plans-cols-panel {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  padding: 0.35rem 0.65rem;
  font-size: var(--text-small);
}
.rp-plans-cols-summary {
  cursor: pointer;
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  list-style: none;
}
.rp-plans-cols-summary::-webkit-details-marker {
  display: none;
}
.rp-plans-cols-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-subtle);
}
.rp-plans-col-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  color: var(--text-primary);
  font-size: var(--text-small);
}
.rp-plans-table-wrap {
  margin-top: 0.25rem;
}
.rp-plans-table {
  min-width: 640px;
}
.rp-plan-cell-main strong {
  font-weight: var(--weight-regular);
  color: var(--text-primary);
}
.rp-plan-id-code {
  font-size: var(--text-small);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
  background: var(--bg-tertiary);
}
.rp-plan-cell-num {
  white-space: nowrap;
  font-size: var(--text-small);
}
.rp-plan-cell-plabel {
  font-size: var(--text-small);
  color: var(--text-secondary);
  max-width: 14rem;
  line-height: 1.35;
}
.rp-plans-empty-cell {
  padding: 1.5rem 1rem !important;
  text-align: center;
  vertical-align: middle;
}
.rp-plans-filter-hint {
  margin-top: 0.5rem;
  font-size: var(--text-small);
  color: var(--text-secondary);
}

.billing-strip {
  font-size: var(--text-small);
  color: var(--text-secondary);
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  max-width: 56rem;
}
.billing-strip--plans {
  background: rgba(59, 130, 246, 0.08);
}
.billing-strip--fx {
  background: rgba(16, 185, 129, 0.08);
}
.rp-global-explainer {
  margin: 0 0 1rem;
  max-width: 52rem;
  line-height: 1.45;
}
.rp-fx-inline-new {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border-subtle);
  max-width: 56rem;
}
.rp-fx-inline-new__title {
  font-size: var(--text-body);
  margin: 0 0 0.5rem;
  font-weight: var(--weight-regular);
}
.rp-fx-new-grid {
  margin-top: 0.5rem;
}

/* Billing: secciones en una página */
.billing-section {
  scroll-margin-top: 1rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
}
.billing-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.billing-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.billing-section__title {
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  margin: 0;
  color: var(--text-primary);
}

/* Monedas / TRM (planes admin) */
.rp-fx-section {
  margin: 2rem 0 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  max-width: 56rem;
}
.rp-fx-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.rp-fx-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.rp-fx-intro {
  margin-bottom: 1rem;
  max-width: 52rem;
}
.rp-fx-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.rp-fx-empty {
  padding: 1.25rem;
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--text-body);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-lg);
}
.rp-fx-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
}
.rp-fx-card__body {
  flex: 1;
  min-width: 0;
}
.rp-fx-card__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.rp-fx-card__code {
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}
.rp-fx-card__badge {
  font-size: var(--text-small);
  color: var(--text-primary);
  opacity: 0.9;
}
.rp-fx-card__off {
  font-size: var(--text-label);
  color: var(--text-secondary);
}
.rp-fx-card__name {
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}
.rp-fx-card__trm {
  font-size: var(--text-small);
  color: var(--text-secondary);
}
.rp-fx-modal__body {
  padding: 1rem 1.25rem 1.25rem;
  max-height: min(80vh, 560px);
  overflow-y: auto;
}

.rp-fallback-banner {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(234, 179, 8, 0.45);
  background: rgba(234, 179, 8, 0.12);
  color: var(--text-primary);
  font-size: var(--text-small);
  line-height: 1.45;
}
.rp-fallback-banner code {
  font-size: 0.85em;
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
  background: var(--bg-primary);
}

/* ── Admin: Team (mock) ─────────────────────────────── */
.adm-team-access .form-label-like {
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
}
.adm-pass-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0.35rem 0 0.75rem;
}
.adm-field-password {
  flex: 1;
  min-width: 220px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-small);
}
.adm-users-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.adm-users-banner {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
  font-size: var(--text-small);
  color: var(--text-secondary);
}
.adm-users-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.adm-users-table {
  margin: 0;
  min-width: 720px;
}
.adm-cell-email {
  font-size: var(--text-small);
  color: var(--text-secondary);
}
.adm-cell-date {
  white-space: nowrap;
  font-size: var(--text-small);
  color: var(--text-secondary);
}
.adm-cell-actions {
  width: 1%;
  white-space: nowrap;
}
.adm-status {
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
}
.adm-status--on {
  color: #4ade80;
}
.adm-status--off {
  color: var(--text-secondary);
}
.adm-user-modal__body {
  padding: 1rem 1.25rem 1.25rem;
  max-height: min(78vh, 900px);
  overflow-y: auto;
}
.adm-perm-heading {
  margin: 1.25rem 0 0.5rem;
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
}
.adm-perm-hint {
  margin-bottom: 0.75rem;
}
.adm-perm-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
}
/* .adm-perm-table — inherits from .data-table, no overrides needed */
.adm-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-weight: var(--weight-medium);
}
.adm-user-modal__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle);
}
.adm-user-modal__footer-right {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

/* ── API Docs ──────────────────────────────────────────── */
.apid-search-wrap { margin-bottom: 1.25rem; }
.apid-search {
  width: 100%; padding: .6rem .85rem; background: var(--bg-secondary); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-small);
  outline: none; box-sizing: border-box;
}
.apid-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(225,29,72,.08); }
.apid-search::placeholder { color: var(--text-secondary); opacity: .5; }

.apid-group { margin-bottom: 1.5rem; }
.apid-group__title {
  font-family: var(--font-heading); font-size: var(--text-body); font-weight: var(--weight-medium);
  color: var(--text-primary); margin-bottom: .6rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; gap: .5rem;
}
.apid-group__count {
  font-size: var(--text-label); color: var(--text-secondary); background: var(--bg-tertiary);
  padding: .1rem .4rem; border-radius: var(--radius-xs); font-weight: var(--weight-regular);
}

.apid-endpoint {
  padding: .55rem .75rem; margin-bottom: .3rem; background: var(--bg-secondary);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md); transition: border-color var(--transition-fast);
}
.apid-endpoint:hover { border-color: var(--text-secondary); }
.apid-endpoint__head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.apid-method {
  font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--color-on-accent); padding: 2px 6px;
  border-radius: var(--radius-xs); font-family: var(--font-body); letter-spacing: .03em;
  min-width: 42px; text-align: center;
}
.apid-path { font-size: var(--text-small); color: var(--text-primary); font-family: 'System Monospace', monospace; }
.apid-badges { display: flex; gap: .3rem; margin-left: auto; }
.apid-badge {
  font-size: var(--text-xs); padding: .1rem .35rem; border-radius: 3px; font-weight: var(--weight-medium); letter-spacing: .02em;
}
/* DEPRECATED — migrar a .badge .badge--warning/success/info */
.apid-badge--auth { background: rgba(234,179,8,.12); color: var(--color-warning); }
.apid-badge--public { background: rgba(34,197,94,.12); color: var(--color-success); }
.apid-badge--perm { background: rgba(168,85,247,.12); color: #a855f7; }
.apid-desc { font-size: var(--text-label); color: var(--text-secondary); margin-top: .25rem; line-height: 1.4; }

/* Modal */
.apid-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1100;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.apid-modal {
  background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  width: 100%; max-width: 560px; max-height: 80vh; overflow-y: auto;
}
.apid-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .85rem 1.15rem; border-bottom: 1px solid var(--border-subtle);
}
.apid-modal__head code { font-size: var(--text-small); color: var(--text-primary); }
.apid-modal__close {
  background: none; border: none; color: var(--text-secondary); font-size: 1.3rem;
  cursor: pointer; padding: 0; line-height: 1;
}
.apid-modal__close:hover { color: var(--text-primary); }
.apid-modal__body { padding: 1.15rem; }
.apid-modal-desc { font-size: var(--text-small); color: var(--text-primary); margin-bottom: .75rem; }
.apid-modal-detail {
  font-size: var(--text-small); color: var(--text-secondary); line-height: 1.55;
  padding: .75rem .85rem; background: var(--bg-tertiary); border-radius: var(--radius-md); margin-bottom: .85rem;
}
.apid-modal-example { margin-top: .5rem; }
.apid-modal-example-label { font-size: var(--text-label); color: var(--text-secondary); opacity: .5; display: block; margin-bottom: .25rem; }
.apid-modal-example pre {
  font-size: var(--text-label); color: var(--text-primary); background: var(--bg-primary);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: .65rem .85rem;
  overflow-x: auto; white-space: pre-wrap; word-break: break-all; line-height: 1.5;
}

@media (max-width: 640px) {
  .apid-endpoint__head { flex-direction: column; align-items: flex-start; gap: .25rem; }
  .apid-badges { margin-left: 0; }
}

/* ── Mi cuenta ─────────────────────────────────────────── */

/* Avatar — primitiva consolidada (--sm, --md, --lg) */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--bg-tertiary);
  position: relative;
  flex: none;
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
}
.avatar__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar__initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar__img[hidden],
.avatar__initials[hidden] { display: none; }
.avatar__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .55);
  color: var(--color-on-accent);
  font-size: var(--text-label);
  letter-spacing: .02em;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.avatar--sm { width: 28px; height: 28px; font-size: var(--text-xs); }
.avatar--md { width: 52px; height: 52px; font-size: var(--text-small); }
.avatar--lg { width: 96px; height: 96px; font-size: 1.4rem; }
.avatar--editable {
  cursor: pointer;
  border: none;
  padding: 0;
}
.avatar--editable:hover .avatar__overlay,
.avatar--editable:focus-visible .avatar__overlay { opacity: 1; }
.avatar--editable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Account hero — identidad arriba del fold */
.account-hero {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 0 20px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 20px;
}
.account-hero__info { min-width: 0; flex: 1; }
.account-hero__name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  line-height: 1.15;
  letter-spacing: var(--heading-letter-spacing);
  color: var(--text-primary);
}
.account-hero__email {
  margin: .25rem 0 .75rem;
  font-size: var(--text-body);
  color: var(--text-secondary);
  word-break: break-word;
}
.account-hero__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Account section — card-like container dentro de cada tab panel */
.surface-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}
.surface-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.surface-section__title {
  font-family: var(--font-heading);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}
.surface-section__help {
  font-size: var(--text-small);
  color: var(--text-secondary);
  margin: -.5rem 0 1rem;
}
.surface-section__actions {
  margin-top: 1.25rem;
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
}

/* Toggle switch — primitiva promovida (era .mc-notif-toggle) */
.toggle-switch {
  position: relative;
  width: 38px;
  height: 22px;
  /* rgba sobre fg garantiza contraste contra cualquier --bg-* del tema,
     incluso cuando el row está en estado hover (que usa --bg-tertiary). */
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-full);
  flex-shrink: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  display: inline-block;
  cursor: pointer;
}
.toggle-switch__dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--text-primary);
  border-radius: 50%;
  transition: transform var(--transition-fast), background var(--transition-fast);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.toggle-switch.is-on { background: var(--accent); border-color: var(--accent); }
.toggle-switch.is-on .toggle-switch__dot {
  transform: translateX(16px);
  background: var(--color-on-accent);
}

/* Notification row — usa .toggle-switch */
.notif-list { display: flex; flex-direction: column; gap: .25rem; }
.notif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem .85rem;
  border-radius: var(--radius-base);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.notif-row:hover { background: var(--bg-tertiary); }
.notif-row__text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.notif-row__label { font-size: var(--text-body); color: var(--text-primary); }
.notif-row__help { font-size: var(--text-label); color: var(--text-secondary); }

/* Session / login-history row */
.session-list { display: flex; flex-direction: column; gap: 0; }
.session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--border-subtle);
}
.session-row:last-child { border-bottom: none; }
.session-row__info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.session-row__browser {
  font-size: var(--text-small);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.session-row__meta {
  font-size: var(--text-label);
  color: var(--text-secondary);
}
.session-row__ip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Form message — promovido (era .mc-form-msg) */
.form-msg {
  font-size: var(--text-small);
  padding: .5rem .75rem;
  border-radius: var(--radius-sm);
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
}
.form-msg--error { color: var(--color-error); }
.form-msg--ok { color: var(--color-success); }

/* Permissions grid — read-only */
.perms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .5rem;
}
.perm-mod {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .55rem .7rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.perm-mod--none { opacity: .4; }
.perm-mod__name { font-size: var(--text-label); color: var(--text-primary); font-weight: var(--weight-medium); }
.perm-mod__actions { font-size: var(--text-label); color: var(--text-secondary); }

/* Activity timeline */
.activity-list { display: flex; flex-direction: column; gap: 0; }
.activity-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--border-subtle);
}
.activity-row:last-child { border-bottom: none; }
.activity-row__info { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.activity-row__action { font-size: var(--text-small); color: var(--text-primary); }
.activity-row__meta { font-size: var(--text-label); color: var(--text-secondary); }
.activity-row__detail { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.activity-row__browser { font-size: var(--text-label); color: var(--text-secondary); }
.activity-row__ip {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.activity-empty { font-size: var(--text-small); color: var(--text-secondary); padding: 1rem 0; }

/* 2FA — QR + verify input (específicos) */
.security-2fa-status {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--text-small);
  color: var(--text-primary);
  margin-bottom: .85rem;
}
.security-2fa-status svg { flex-shrink: 0; color: var(--color-success); }
.security-2fa-status--off svg { color: var(--text-secondary); opacity: .6; }
.security-2fa-setup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
}
.security-2fa-instruction {
  font-size: var(--text-small);
  color: var(--text-secondary);
  text-align: center;
}
.security-2fa-manual { margin-top: .25rem; }
.security-2fa-qr {
  padding: .75rem;
  /* QR debe ir sobre superficie blanca para ser escaneable. */
  background: var(--color-on-accent);
  border-radius: var(--radius-lg);
  display: inline-flex;
}
.security-2fa-qr img { display: block; }
.security-2fa-secret {
  font-size: var(--text-label);
  padding: .4rem .8rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  user-select: all;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.security-2fa-verify {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: .35rem;
}
.security-2fa-verify-label {
  font-size: var(--text-label);
  color: var(--text-secondary);
  text-align: center;
}
.security-2fa-verify-row {
  display: flex;
  gap: .4rem;
}
.security-2fa-verify-row input {
  flex: 1;
  padding: .55rem .75rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1.1rem;
  text-align: center;
  letter-spacing: .25em;
  outline: none;
}
.security-2fa-verify-row input:focus { border-color: var(--accent); }
.security-2fa-cancel {
  margin-top: .5rem;
  align-self: center;
}
.security-2fa-loading {
  font-size: var(--text-small);
  color: var(--text-secondary);
  padding: 1rem 0;
  text-align: center;
}

/* Mobile: hero apila vertical */
@media (max-width: 640px) {
  .account-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 0 16px;
    margin-bottom: 16px;
  }
  .surface-section { padding: 1rem 1.1rem; }
  .session-row { flex-wrap: wrap; }
}

/* Avatar cropper modal */
.cropper {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .7);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.cropper[hidden] { display: none; }
.cropper__panel {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 380px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: var(--shadow-lg);
}
.cropper__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cropper__title {
  font-family: var(--font-heading);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}
.cropper__close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 .35rem;
  border-radius: var(--radius-sm);
}
.cropper__close:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.cropper__stage {
  position: relative;
  width: 320px;
  height: 320px;
  max-width: 100%;
  margin: 0 auto;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  cursor: grab;
}
.cropper__stage:active { cursor: grabbing; }
.cropper__img {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  pointer-events: none;
  max-width: none;
}
.cropper__mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at center, transparent 0 49.5%, rgba(0,0,0,.55) 50.5%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.cropper__controls {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.cropper__zoom-icon {
  display: inline-flex;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.cropper__zoom {
  flex: 1;
  min-width: 120px;
  accent-color: var(--accent);
}
.cropper__hint {
  flex-basis: 100%;
  font-size: var(--text-label);
  color: var(--text-secondary);
  text-align: center;
}
.cropper__actions {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .page-header h1 { font-size: 1.35rem; }
  .page-header__row { flex-direction: column; }
  .record-row { flex-direction: column; align-items: flex-start; }
  .record-actions { width: 100%; }
  .record-actions .btn { flex: 1; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════
   Proyectos module
   ══════════════════════════════════════════════════════════ */

.proy-sub {
  color: var(--text-secondary);
  font-size: var(--text-small);
  margin-top: .25rem;
}

/* ── KPI cards ────────────────────────────────────────────── */
.proy-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* .proy-kpi-card — inherits from .card */
.proy-kpi-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.proy-kpi-card__label {
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
}

.proy-kpi-card__value {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  line-height: 1.2;
}

.proy-kpi-card__value--success { color: var(--color-success); }
.proy-kpi-card__value--warning { color: var(--color-warning); }
.proy-kpi-card__value--accent  { color: var(--accent); }

.proy-kpi-card__sub {
  font-size: var(--text-label);
  color: var(--text-secondary);
  opacity: .7;
}

/* ── Filters bar ──────────────────────────────────────────── */
.proy-filters-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

/* Override puntual sobre .select para el filtro de cliente — solo min-width.
   El resto (background, border, padding, chevron, appearance) lo aporta .select. */
.proy-filter-select {
  min-width: 160px;
}

.proy-search {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-base);
  padding: 0 14px;
  flex: 1;
  min-width: 200px;
}

.proy-search svg { color: var(--text-secondary); flex-shrink: 0; }

.proy-search input {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: var(--text-small);
  padding: 10px 0;
  width: 100%;
  outline: none;
}

.proy-search input::placeholder { color: var(--text-secondary); opacity: .6; }

/* ── Data table ───────────────────────────────────────────── */
.proy-table-wrap {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* .proy-table — inherits from .data-table, no overrides needed */

.proy-cell-name {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.proy-cell-name__main {
  font-weight: var(--weight-medium);
}
.proy-cell-name__link {
  color: var(--text-primary);
  text-decoration: none;
}
.proy-cell-name__link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.proy-cell-sub {
  font-size: var(--text-label);
  color: var(--text-secondary);
}

.proy-cell-monto {
  font-weight: var(--weight-regular);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.proy-cell-date {
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: var(--text-small);
}

/* .proy-estado--* y .proy-area--* eliminados — dead code, sin uso en HTML/JS.
   Si se reintroducen badges de estado de proyecto:
   - estado → .badge .badge--{neutral|info|success|warning|danger}
   - area → .badge .badge--chip con data-cat=N */

/* ── Quick action icons ───────────────────────────────────── */
.proy-quick-actions {
  display: flex;
  gap: .25rem;
  align-items: center;
}
.proy-qa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.proy-qa-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}
.proy-qa-btn--danger:hover {
  color: var(--color-error);
  border-color: rgba(239,68,68,.3);
  background: rgba(239,68,68,.08);
}

/* ── Confirm dialog ──────────────────────────────────────── */
.proy-confirm-dialog {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  width: 380px;
  max-width: 90vw;
  padding: 24px;
  text-align: center;
  animation: proy-confirm-in var(--transition-fast);
}
@keyframes proy-confirm-in {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}
.proy-confirm-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .75rem;
}
.proy-confirm-icon--danger {
  background: rgba(239,68,68,.12);
  color: var(--color-error);
}
.proy-confirm-icon--info {
  background: rgba(59,130,246,.12);
  color: #3b82f6;
}
.proy-confirm-title {
  font-family: var(--font-heading);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: .5rem;
}
.proy-confirm-msg {
  font-size: var(--text-small);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}
.proy-confirm-actions {
  display: flex;
  gap: .5rem;
  justify-content: center;
}
.proy-confirm-actions .btn {
  min-width: 100px;
}

/* PIN input */
.proy-pin-input {
  display: block;
  width: 140px;
  margin: 0 auto .5rem;
  text-align: center;
  font-size: 1.25rem;
  letter-spacing: .4em;
  padding: .6rem .75rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  outline: none;
}
.proy-pin-input:focus { border-color: var(--accent); }
.proy-ver-type-btn {
  flex: 1;
  font-size: var(--text-small) !important;
  padding: .5rem .6rem !important;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.proy-ver-type-btn.is-selected {
  border-color: var(--accent);
  background: rgba(225, 29, 72, .1);
  color: var(--accent);
}
.proy-pin-error {
  color: var(--color-error);
  font-size: var(--text-small);
  min-height: 1.2em;
  margin-bottom: .75rem;
}

/* Monto column toggle */
.proy-monto-th {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.proy-montos-toggle {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 2px;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
}
.proy-montos-toggle:hover { color: var(--text-primary); }

/* ── Monto input ──────────────────────────────────────────── */
.proy-monto-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.proy-monto-prefix {
  padding: .5rem .6rem;
  color: var(--text-secondary);
  font-weight: var(--weight-regular);
  font-size: var(--text-small);
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-subtle);
}

.proy-monto-wrap input {
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  flex: 1;
}

/* ── Service pills in form ────────────────────────────────── */
.proy-servicios-grid {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.proy-svc-pill {
  position: relative;
  cursor: pointer;
  display: flex;
}

.proy-svc-pill input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.proy-svc-pill__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: .6rem 1.1rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  transition: border-color var(--transition-fast), background var(--transition-fast);
  min-width: 120px;
  text-align: center;
}

.proy-svc-pill:hover .proy-svc-pill__body {
  border-color: var(--text-secondary);
}

.proy-svc-pill input:checked + .proy-svc-pill__body {
  border-color: var(--accent);
  background: rgba(225, 29, 72, .1);
}

.proy-svc-pill__tier {
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
}

.proy-svc-pill__price {
  font-size: var(--text-label);
  color: var(--text-secondary);
}

/* ── Proyecto detail & YAML editor ────────────────────────── */
.proy-back-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-small);
  margin-bottom: 1rem;
  transition: color var(--transition-fast);
}
.proy-back-link:hover { color: var(--accent); }

.proy-detail-header {
  margin-bottom: 1.5rem;
}
.proy-detail-header__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}
.proy-detail-header__info { flex: 1; }
.proy-detail-title {
  font-size: var(--text-h3);
  line-height: 1.3;
  margin-bottom: .25rem;
}
.proy-detail-client {
  font-size: var(--text-body);
  color: var(--text-secondary);
}
.proy-detail-sub {
  color: var(--text-secondary);
  opacity: .7;
}
.proy-detail-header__actions {
  display: flex;
  gap: .5rem;
  flex-shrink: 0;
  align-items: flex-start;
}

/* Badges row */
.proy-detail-badges {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}
.proy-badge--subtle {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: var(--text-label);
}

/* Metadata grid */
.proy-detail-meta {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.proy-detail-meta__item {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.proy-detail-meta__label {
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  letter-spacing: .3px;
}
.proy-detail-meta__value {
  font-size: var(--text-small);
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

/* Timestamps bar */
.proy-timestamps {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--text-label);
  color: var(--text-secondary);
  margin-top: .75rem;
  flex-wrap: wrap;
}
.proy-ts-sep { opacity: .4; }
.proy-versions-btn {
  background: none;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  padding: .15rem .5rem;
  border-radius: var(--radius-xs);
  font-size: var(--text-label);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.proy-versions-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Document headings */
.proy-doc-h2 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  margin: 1.5rem 0 .75rem;
}
.proy-doc-h3 {
  font-family: var(--font-heading);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  margin: 0;
}
.proy-scope-includes-label {
  margin: .75rem 0 .25rem;
  font-size: var(--text-small);
}

/* Document bullet list (read mode) */
.proy-doc-list {
  padding-left: 1.5rem;
  margin: .5rem 0;
}
.proy-doc-list li {
  font-size: var(--text-small);
  color: var(--text-primary);
  line-height: 1.6;
  margin-bottom: .25rem;
}

/* Section toggles */
.proy-section {
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  margin-bottom: 0;
  overflow: visible;
}
.proy-section--scope {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  overflow: visible;
}
.proy-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.proy-section__toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1;
  padding: .75rem 0;
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}
.proy-section--scope .proy-section__header {
  padding: 0;
}
.proy-section--scope .proy-section__toggle {
  display: none; /* scope sections are always open, no toggle */
}
.proy-section__toggle:hover .proy-section__title { color: var(--accent); }
.proy-section__chevron {
  flex-shrink: 0;
  transition: transform var(--transition-normal);
  color: var(--text-secondary);
}
.proy-section__title {
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
}
.proy-section__body {
  padding: 0 0 1rem;
}
.proy-section--scope .proy-section__read,
.proy-section--scope .proy-section__write {
  padding: .5rem 0;
}

/* Edit button (pencil) */
.proy-edit-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  padding: .35rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.proy-edit-btn:hover {
  color: var(--accent);
  border-color: var(--border-subtle);
  background: var(--bg-tertiary);
}

/* Read/write toggle */
.is-hidden { display: none !important; }

/* Editor fields — inherit from .input-inline */
.proy-section__editor,
.proy-scope-textarea {
  width: 100%;
  background: var(--bg-tertiary);
  line-height: 1.5;
  resize: vertical;
  min-height: 80px;
}

.proy-scope-field { margin-bottom: .75rem; }
.proy-scope-label {
  display: block;
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  letter-spacing: .3px;
  margin-bottom: .35rem;
}

/* Editable list items */
.proy-scope-list,
.proy-edit-list {
  list-style: none;
  padding: 0;
  margin: 0 0 .5rem;
}
.proy-scope-item,
.proy-list-item {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .35rem;
}
/* scope/list inputs — inherit from .input-inline */
.proy-scope-item__input,
.proy-list-item__input {
  flex: 1;
  background: var(--bg-tertiary);
}
.proy-list-item__remove {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1.1rem;
  padding: .2rem .4rem;
  border-radius: var(--radius-xs);
  line-height: 1;
}
.proy-list-item__remove:hover {
  color: var(--color-error);
  background: rgba(239,68,68,.1);
}

/* Editor group */
.proy-editor-group { margin-bottom: 1rem; }
.proy-editor-group__title {
  font-family: var(--font-heading);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  margin-bottom: .5rem;
}

/* Empty content state */
.proy-empty-content {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-secondary);
}
.proy-empty-content p { margin-bottom: .5rem; }

/* Subsection titles */
.proy-subsection-title {
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  margin: 1rem 0 .5rem;
}

/* Control de versiones meta */
.proy-cv-meta {
  display: flex;
  gap: 2rem;
  margin-bottom: .75rem;
}
.proy-cv-meta__item {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  font-size: var(--text-small);
}
.proy-cv-meta__label {
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  letter-spacing: .3px;
}

/* Mini tables (revisiones, responsables) */
.proy-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
  margin-bottom: .75rem;
}
/* .proy-mini-table — inherits from .data-table, no overrides needed */

/* Revision row actions */
.proy-rev-actions {
  display: flex;
  gap: .25rem;
  justify-content: flex-end;
}
.proy-rev-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background: none;
  border: 1px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.proy-rev-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-subtle);
  background: var(--bg-tertiary);
}
.proy-rev-btn--del:hover {
  color: var(--color-error);
  border-color: rgba(239,68,68,.3);
  background: rgba(239,68,68,.08);
}

/* Doc text (disclaimer) */
.proy-doc-text {
  font-size: var(--text-small);
  color: var(--text-secondary);
  line-height: 1.6;
  white-space: pre-wrap;
}

/* Gantt chart */
.proy-gantt-info {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: .75rem;
  font-size: var(--text-small);
}
.proy-gantt-note {
  font-size: var(--text-small);
  color: var(--text-secondary);
}
.proy-gantt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
}
/* .proy-gantt-table — inherits from .data-table, only layout overrides */
.proy-gantt-table th { text-align: center; }
.proy-gantt-table th:first-child {
  text-align: left;
  min-width: 280px;
}
.proy-gantt-activity {
  padding: .6rem .6rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
}
.proy-gantt-cell {
  text-align: center;
  padding: .6rem .4rem;
  border-bottom: 1px solid var(--border-subtle);
}
.proy-gantt-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
}
.proy-gantt-empty {
  color: var(--border-subtle);
  font-size: 1.2rem;
}
.proy-gantt-legend {
  font-size: var(--text-label);
  color: var(--text-secondary);
  margin-top: .5rem;
}

/* Save button pulse when dirty */
.btn--has-changes {
  animation: proy-pulse 1.5s ease-in-out infinite;
}
@keyframes proy-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0); }
  50% { box-shadow: 0 0 0 4px rgba(225, 29, 72, .25); }
}

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

@media (max-width: 768px) {
  .proy-kpis { grid-template-columns: repeat(2, 1fr); }
  .proy-filters-bar { flex-direction: column; }
  .proy-filter-select { width: 100%; }
  .proy-search { width: 100%; }
  .proy-table-wrap { overflow-x: auto; }
  .proy-table { min-width: 700px; }
}

/* ==========================================================================
   TICKETS MODULE
   ========================================================================== */

/* ── KPIs ─────────────────────────────────────────────────── */
.tk-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.tk-kpi-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.tk-kpi-card__label {
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  letter-spacing: .5px;
}

.tk-kpi-card__value {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  line-height: 1.2;
}

/* ── Filters bar ──────────────────────────────────────────── */
.tk-filters-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

/* DEPRECATED — clase huérfana tras Tickets v2 (Linear-inspired). Limpieza pendiente Fase 5.
   Se mantiene sin appearance:auto para no leak el control nativo si algo aún la usa. */
.tk-filter-select {
  min-width: 150px;
}

.tk-search {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-base);
  padding: 0 14px;
  flex: 1;
  min-width: 200px;
}

.tk-search__icon {
  color: var(--text-secondary);
  flex-shrink: 0;
}

.tk-search__input {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: var(--text-small);
  padding: 10px 0;
  width: 100%;
  outline: none;
}

.tk-filters-toggle {
  display: none;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-small);
  padding: .5rem .75rem;
  cursor: pointer;
}

/* ── Table ────────────────────────────────────────────────── */
.tk-table-wrap {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* .tk-table — inherits from .data-table, only sort overrides */
.tk-table thead th { transition: color var(--transition-fast); }
.tk-table thead th[data-sort]:hover { color: var(--text-primary); }
.tk-table thead th.is-sorted { color: var(--accent); border-bottom-color: var(--accent); }

.tk-table .tk-col-title {
  white-space: normal;
  max-width: 300px;
  font-weight: var(--weight-regular);
}

.tk-table .tk-col-number {
  font-family: var(--font-heading);
  font-size: var(--text-label);
  color: var(--text-secondary);
  font-weight: var(--weight-regular);
}

/* ── Badge ────────────────────────────────────────────────── */
/* .tk-badge — inherits from .badge .badge--sm */
.tk-badge {
  white-space: nowrap;
}

/* ── Mobile card list ─────────────────────────────────────── */
.tk-card-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.tk-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: .85rem 1rem .85rem 1.15rem;
  cursor: pointer;
  transition: border-color var(--transition-fast);
  border-left: 3px solid var(--border-subtle);
  position: relative;
}
.tk-card--waiting-remos { border-left-color: var(--accent); }
.tk-card--waiting-client { border-left-color: var(--color-warning); }
.tk-card--in-progress { border-left-color: var(--color-info); }
.tk-card:active {
  border-color: var(--accent);
  border-left-color: var(--accent);
}
.tk-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: .2rem;
}
.tk-card__title {
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  flex: 1;
  min-width: 0;
}
.tk-card__title::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 3rem;
  background: linear-gradient(to right, transparent, var(--bg-secondary));
  pointer-events: none;
}
.tk-card__time {
  font-size: var(--text-label);
  color: var(--text-secondary);
  font-weight: var(--weight-regular);
  flex-shrink: 0;
  margin-left: .75rem;
}
.tk-card__sub {
  font-size: var(--text-label);
  color: var(--text-secondary);
  margin-bottom: .5rem;
}
.tk-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tk-card__badges {
  display: flex;
  gap: .35rem;
  align-items: center;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.tk-card__waiting {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
}
.tk-card__waiting--remos { color: var(--accent); }
.tk-card__waiting--client { color: var(--color-warning); }
.tk-card__waiting-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.tk-card__waiting--remos .tk-card__waiting-dot { background: var(--accent); }
.tk-card__waiting--client .tk-card__waiting-dot { background: var(--color-warning); }
.tk-card__assignee {
  font-size: var(--text-label);
  color: var(--text-secondary);
  flex-shrink: 0;
  margin-left: .5rem;
}
.tk-card-list__more {
  display: block;
  width: 100%;
  text-align: center;
  padding: .75rem;
  font-size: var(--text-small);
  font-family: inherit;
  color: var(--accent);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  margin-top: .25rem;
}

/* ── Quick filters (mobile only) ──────────────────────────── */
.tk-quick-filters {
  display: none;
  gap: .35rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.proy-quick-filters,
.cl-quick-filters {
  display: none;
  gap: .35rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.cl-kpis {
  display: none;
}
@media (max-width: 768px) {
  .cl-kpis { display: grid; }
}
.tk-filters-overlay,
.proy-filters-overlay,
.cl-filters-overlay {
  display: none;
}

/* ── Detail page layout ───────────────────────────────────── */
.tk-detail-page {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 60px);
}

/* Right panel (fixed, full height) */
.tk-right-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-subtle);
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transition: width var(--transition-normal), transform var(--transition-normal);
}

.tk-right-panel.is-collapsed {
  width: 40px;
  overflow: hidden;
}

.tk-right-panel.is-collapsed .tk-right-panel__content { display: none; }
.tk-right-panel.is-collapsed .tk-right-panel__collapse svg { transform: rotate(180deg); }

.tk-right-panel__collapse {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-top: 1px solid var(--border-subtle);
  padding: .5rem;
  cursor: pointer;
  color: var(--text-secondary);
  flex-shrink: 0;
  margin-top: auto;
}

.tk-right-panel__collapse:hover { color: var(--text-primary); }

.tk-right-panel__collapse svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-normal);
}

.tk-right-panel__content {
  flex: 1;
  overflow-y: auto;
  padding: .75rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* Adjust main content when right panel is present.
   .tk-has-right-panel and .tk-right-collapsed are on #app-shell.
   Right panel is position:fixed, so main-content just needs padding-right */
.tk-has-right-panel > .main-content {
  padding-right: calc(310px + clamp(1rem, 2vw, 2rem));
}

/* Only animate padding after initial load */
.tk-has-right-panel.tk-loaded > .main-content {
  transition: padding-right var(--transition-normal);
}

.tk-right-collapsed.tk-has-right-panel > .main-content {
  padding-right: calc(50px + clamp(1rem, 2vw, 2rem));
}

.tk-detail__breadcrumb {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--text-label);
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.tk-detail__breadcrumb a {
  color: var(--accent);
  text-decoration: none;
}

.tk-detail__breadcrumb a:hover { text-decoration: underline; }

.tk-detail__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.tk-detail__header-left {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  flex: 1;
  min-width: 0;
}

.tk-detail__number {
  font-family: var(--font-heading);
  font-size: var(--text-small);
  color: var(--text-secondary);
  font-weight: var(--weight-regular);
}

.tk-detail__title {
  font-size: 1.35rem;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  line-height: 1.3;
}

.tk-detail__client-label {
  font-size: var(--text-small);
  color: var(--text-secondary);
  font-weight: var(--weight-regular);
}

.tk-detail__badges {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  margin-top: .25rem;
}

.tk-detail__header-actions {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-shrink: 0;
}

.tk-detail__body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex: 1;
  min-height: 0;
}

/* When right panel is present, reduce main-content width */

/* ── Detail sections ──────────────────────────────────────── */
.tk-section {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.tk-section__heading {
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tk-description {
  font-size: var(--text-small);
  color: var(--text-body-soft);
  font-weight: var(--weight-reading);
  line-height: var(--lh-reading);
  letter-spacing: var(--track-reading);
  white-space: pre-wrap;
}

.tk-description code {
  background: var(--bg-tertiary);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: .8em;
}

.tk-description pre {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: .75rem 1rem;
  overflow-x: auto;
  font-size: var(--text-small);
  line-height: 1.5;
  margin: .5rem 0;
}

.tk-description pre code {
  background: none;
  padding: 0;
}

/* ── Time entries ─────────────────────────────────────────── */
.tk-time-summary {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}

.tk-time-summary__total {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: var(--weight-medium);
  color: var(--accent);
}

.tk-time-summary__label {
  font-size: var(--text-label);
  color: var(--text-secondary);
}

.tk-time-table {
  width: 100%;
  border-collapse: collapse;
}

/* .tk-time-table — inherits from .data-table, no overrides needed */

.tk-time-table .tk-time-hours {
  font-family: var(--font-heading);
  font-weight: var(--weight-regular);
}

.tk-time-type {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
}

.tk-time-type--timer  { background: #172554; color: var(--color-info); }
.tk-time-type--manual { background: #422006; color: #fbbf24; }

/* ── Timer (compact bar) ──────────────────────────────────── */
.tk-timer {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .15rem .5rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  font-size: var(--text-label);
}

.tk-timer__btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.tk-timer__btn:hover { transform: scale(1.1); }

.tk-timer__btn--start {
  background: var(--color-success, #4ade80);
  color: #052e16;
}

.tk-timer__btn--stop {
  background: var(--color-danger, #f87171);
  color: #450a0a;
}

.tk-timer__display {
  font-family: var(--font-heading);
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  min-width: 52px;
  text-align: center;
}

.tk-timer__label {
  font-size: var(--text-label);
  color: var(--text-secondary);
}

.tk-timer.is-active {
  border-color: var(--color-success, #4ade80);
  background: rgba(74, 222, 128, .06);
}

.tk-timer.is-stopped {
  border-color: var(--color-warning, #fbbf24);
  background: rgba(251, 191, 36, .06);
}

/* ── Timer save modal ─────────────────────────────────────── */
.tk-timer-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.tk-timer-modal {
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 560px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: var(--text-small);
  line-height: 1.45;
}

.tk-timer-modal__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}

.tk-timer-modal__time {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: var(--weight-medium);
  color: var(--accent);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.tk-timer-modal__sub {
  font-size: var(--text-small);
  color: var(--text-secondary);
  text-align: center;
  margin-top: -8px;
}

.tk-timer-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tk-timer-modal__field label {
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.tk-timer-modal__field textarea,
.tk-timer-modal__field select,
.tk-timer-modal__field input[type="text"],
.tk-timer-modal__field input[type="number"] {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-small);
  line-height: 1.45;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.tk-timer-modal__field textarea {
  min-height: 84px;
  resize: vertical;
}
.tk-timer-modal__field textarea:focus,
.tk-timer-modal__field select:focus,
.tk-timer-modal__field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12);
}

.tk-timer-modal__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}

@media (max-width: 600px) {
  .tk-timer-modal { padding: 20px 18px; max-width: 100%; }
  .tk-timer-modal__row { flex-direction: column; align-items: stretch; }
}

/* ── Time entry form ──────────────────────────────────────── */
.tk-add-time {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: flex-end;
}

.tk-add-time__field {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.tk-add-time__field label {
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
}

.tk-add-time__field input,
.tk-add-time__field select {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--text-small);
  padding: .4rem .5rem;
}

.tk-add-time__field input:focus,
.tk-add-time__field select:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── Comments thread (chat style) ─────────────────────────── */
.tk-thread {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.tk-comment {
  display: flex;
  gap: .75rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--border-subtle);
}

.tk-comment:last-child { border-bottom: none; }

.tk-comment__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  flex-shrink: 0;
}

.tk-comment--internal .tk-comment__avatar {
  background: #422006;
  color: #fbbf24;
}

.tk-comment--client .tk-comment__avatar {
  background: #172554;
  color: var(--color-info);
}

.tk-comment__content {
  flex: 1;
  min-width: 0;
}

.tk-comment__header {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .35rem;
  flex-wrap: wrap;
}

.tk-comment__author {
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
}

.tk-comment__type {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: 1px 5px;
  border-radius: 3px;
}

.tk-comment__type--internal {
  background: #422006;
  color: #fbbf24;
}

.tk-comment__type--client {
  background: #172554;
  color: var(--color-info);
}

.tk-comment__date {
  font-size: var(--text-label);
  color: var(--text-secondary);
  margin-left: auto;
  font-weight: var(--weight-regular);
}

.tk-comment__body {
  font-size: var(--text-xs);
  color: var(--text-body-soft);
  font-weight: var(--weight-reading);
  line-height: 1.5;
  letter-spacing: var(--track-reading);
  white-space: pre-wrap;
}

.tk-comment__body code {
  background: var(--bg-tertiary);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: .8em;
}

.tk-comment__body pre {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: .5rem .75rem;
  overflow-x: auto;
  font-size: var(--text-label);
  line-height: 1.5;
  margin: .5rem 0;
}

.tk-comment__body pre code {
  background: none;
  padding: 0;
}

.tk-comment__content .tk-comment-form__textarea {
  width: 100%;
  box-sizing: border-box;
}

.tk-comment__content [id^="tk-comment-edit-actions-"] {
  display: none;
}

.tk-comment__content [id^="tk-comment-edit-actions-"].is-visible {
  display: flex;
}

/* ── Comment form ─────────────────────────────────────────── */
.tk-comment-form {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.tk-comment-form__type-toggle {
  display: flex;
  gap: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  align-self: flex-start;
}

.tk-comment-form__type-btn {
  padding: .35rem .75rem;
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  border: none;
  cursor: pointer;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.tk-comment-form__type-btn.is-active {
  color: var(--text-primary);
}

.tk-comment-form__type-btn.is-active[data-type="internal"] {
  background: rgba(251, 191, 36, .15);
  color: #fbbf24;
}

.tk-comment-form__type-btn.is-active[data-type="client"] {
  background: rgba(96, 165, 250, .15);
  color: var(--color-info);
}

.tk-comment-form__textarea {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-small);
  font-family: inherit;
  padding: .75rem;
  min-height: 80px;
  resize: vertical;
}

.tk-comment-form__textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.tk-comment-form__actions {
  display: flex;
  justify-content: flex-end;
}

/* ── Client context sidebar ───────────────────────────────── */
.tk-client-context {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.tk-client-context__name {
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.tk-client-context__code {
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
}

.tk-client-context__info {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.tk-client-context__row {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--text-small);
  color: var(--text-primary);
}

.tk-client-context__row svg {
  width: 14px;
  height: 14px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.tk-quick-links {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.tk-quick-links a {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--text-small);
  color: var(--accent);
  text-decoration: none;
  padding: .35rem .5rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.tk-quick-links a:hover {
  background: var(--bg-tertiary);
}

.tk-quick-links a svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.tk-quick-links a[target="_blank"]::after {
  content: '';
}

/* ── Client bar (below ticket title) ──────────────────────── */
.tk-client-bar {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
}

.tk-client-bar__toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .6rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  text-align: left;
}

.tk-client-bar__toggle svg {
  width: 14px;
  height: 14px;
  color: var(--text-secondary);
  transition: transform var(--transition-normal);
  flex-shrink: 0;
}

.tk-client-bar__toggle.is-open svg {
  transform: rotate(180deg);
}

.tk-client-bar__toggle-name {
  font-weight: var(--weight-regular);
}

.tk-client-bar__toggle-code {
  color: var(--text-secondary);
  font-size: var(--text-label);
}

.tk-client-bar__body {
  display: none;
  padding: 0 1rem .75rem;
  gap: .5rem;
}

.tk-client-bar__body.is-open {
  display: flex;
  flex-wrap: wrap;
}

.tk-client-bar__item {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--text-small);
  color: var(--text-primary);
  padding: .25rem .5rem;
  border-radius: var(--radius-xs);
  background: var(--bg-tertiary);
}

.tk-client-bar__item svg {
  width: 13px;
  height: 13px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.tk-client-bar__link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--text-label);
  color: var(--accent);
  text-decoration: none;
  padding: .25rem .5rem;
}

.tk-client-bar__link:hover { text-decoration: underline; }

/* ── Long comment collapse ────────────────────────────────── */
.tk-comment__body.is-long {
  max-height: 120px;
  overflow: hidden;
  position: relative;
}

.tk-comment__body.is-long::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(transparent, var(--bg-primary));
  pointer-events: none;
}

.tk-comment__body.is-expanded {
  max-height: none;
}

.tk-comment__body.is-expanded::after {
  display: none;
}

.tk-comment__expand {
  background: none;
  border: none;
  color: var(--accent);
  font-size: var(--text-label);
  cursor: pointer;
  padding: .25rem 0;
}

/* ── Consistent toggle ────────────────────────────────────── */
.tk-toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .5rem .75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-primary);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  text-align: left;
  transition: background var(--transition-fast);
}

.tk-toggle:hover { background: var(--bg-tertiary); }

.tk-toggle__chevron {
  width: 14px;
  height: 14px;
  color: var(--text-secondary);
  transition: transform var(--transition-normal);
  flex-shrink: 0;
}

.tk-toggle.is-open .tk-toggle__chevron {
  transform: rotate(180deg);
}

.tk-toggle__label {
  flex: 1;
}

.tk-toggle__meta {
  font-size: var(--text-label);
  color: var(--text-secondary);
  font-weight: var(--weight-regular);
}

.tk-toggle__edit {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 2px;
  opacity: .4;
  transition: opacity var(--transition-fast);
}

.tk-toggle__edit:hover { opacity: 1; }

.tk-toggle-body {
  display: none;
  padding: .5rem .75rem .75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  margin-top: -1px;
  margin-bottom: .75rem;
}

.tk-toggle-body.is-open {
  display: block;
}

.tk-toggle + .tk-toggle-body:not(.is-open) + .tk-toggle,
.tk-toggle {
  margin-bottom: .5rem;
}

/* Separate comment form from thread */
.tk-comment-form-wrap {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: .75rem;
  margin-bottom: 1rem;
}

/* Comments sort bar */
.tk-thread-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .5rem;
}

.tk-thread-sort {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: var(--text-label);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .25rem;
}

.tk-thread-sort:hover { color: var(--text-primary); }

/* ── Copy button for client data ──────────────────────────── */
.tk-copyable {
  display: flex;
  align-items: center;
  gap: .35rem;
  cursor: pointer;
  border-radius: var(--radius-xs);
  padding: 1px 4px;
  margin: -1px -4px;
  transition: background var(--transition-fast);
}

.tk-copyable:hover { background: var(--bg-tertiary); }

.tk-copyable__icon {
  width: 12px;
  height: 12px;
  color: var(--text-secondary);
  opacity: 0;
  transition: opacity var(--transition-fast);
  flex-shrink: 0;
}

.tk-copyable:hover .tk-copyable__icon { opacity: 1; }

/* ── Collapsible section ──────────────────────────────────── */
.tk-collapsible__toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  letter-spacing: .5px;
}

.tk-collapsible__toggle svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-normal);
}

.tk-collapsible__toggle.is-collapsed svg {
  transform: rotate(-90deg);
}

.tk-collapsible__body {
  overflow: hidden;
  transition: max-height var(--transition-normal);
}

.tk-collapsible__body.is-collapsed {
  max-height: 0 !important;
  overflow: hidden;
}

/* ── Sidebar action fields ────────────────────────────────── */
.tk-sidebar-field {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

/* ── Sidebar properties (key:value rows, light style) ──────── */
.tk-sidebar-fields {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5rem .75rem;
  align-items: center;
}

.tk-sidebar-field__label {
  font-size: var(--text-small);
  color: var(--text-secondary);
  white-space: nowrap;
  text-align: left;
  font-weight: var(--weight-regular);
}

.tk-sidebar-field__label::after {
  content: ':';
}

.tk-sidebar-field__value select,
.tk-sidebar-field__value input {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  color: var(--text-primary);
  font-size: var(--text-small);
  font-family: inherit;
  font-weight: var(--weight-regular);
  padding: .3rem .5rem;
  width: 100%;
  min-width: 0;
  cursor: pointer;
}

.tk-sidebar-field__value textarea {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  color: var(--text-primary);
  font-size: var(--text-label);
  font-family: inherit;
  padding: .3rem .5rem;
  width: 100%;
  min-width: 0;
  resize: vertical;
}

.tk-sidebar-field__value input { cursor: text; }

.tk-sidebar-field__value select:focus,
.tk-sidebar-field__value input:focus,
.tk-sidebar-field__value textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── New ticket modal — form-internal classes ────────────────
   Chrome (overlay, modal frame, header, title, close, actions)
   uses the shared .modal-overlay / .modal.modal--form pattern.
   These classes only style the form *inside* the modal body. */
.tk-new-modal__body {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
  flex: 1;
}

.tk-new-modal__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.tk-new-modal__field {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.tk-new-modal__field--full {
  grid-column: 1 / -1;
}

.tk-new-modal__field label {
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
}

.tk-new-modal__field input,
.tk-new-modal__field select,
.tk-new-modal__field textarea {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-small);
  font-family: inherit;
  padding: .5rem .75rem;
}

.tk-new-modal__field textarea {
  min-height: 100px;
  resize: vertical;
}

.tk-new-modal__field input:focus,
.tk-new-modal__field select:focus,
.tk-new-modal__field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.tk-new-modal__actions {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
}

/* ── Empty state ──────────────────────────────────────────── */
.tk-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-secondary);
}

.tk-empty__icon {
  font-size: 2.5rem;
  margin-bottom: .75rem;
  opacity: .4;
}

.tk-empty__text {
  font-size: var(--text-small);
}

/* ── Ticket page header ───────────────────────────────────── */
.tk-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.tk-page-header__left {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.tk-page-header__title {
  font-size: 1.75rem;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.tk-page-header__sub {
  font-size: var(--text-small);
  color: var(--text-secondary);
}

/* ── Resolution notes ─────────────────────────────────────── */
.tk-resolution {
  background: rgba(74, 222, 128, .06);
  border: 1px solid rgba(74, 222, 128, .2);
  border-radius: var(--radius-md);
  padding: .75rem 1rem;
}

.tk-resolution__label {
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  color: #4ade80;
  letter-spacing: .5px;
  margin-bottom: .35rem;
}

.tk-resolution__text {
  font-size: var(--text-small);
  color: var(--text-primary);
  line-height: 1.6;
  white-space: pre-wrap;
}

/* ── Accordion for mobile ─────────────────────────────────── */
.tk-accordion-toggle {
  display: none;
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  padding: .75rem 1rem;
  cursor: pointer;
  text-align: left;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1200px) {
  .tk-kpis { grid-template-columns: repeat(3, 1fr); }
  .tk-detail__body { grid-template-columns: 1fr 260px; }
}

@media (max-width: 768px) {
  .tk-kpis { grid-template-columns: repeat(2, 1fr); }

  .tk-filters-bar { flex-direction: column; }
  .tk-filter-select { width: 100%; }
  .tk-search { width: 100%; }
  .tk-filters-toggle { display: block; }
  .tk-filters-bar.is-collapsed .tk-filter-select { display: none; }
  .tk-filters-bar.is-collapsed .tk-search { display: flex; }

  .tk-table-wrap { overflow-x: auto; }
  .tk-table { min-width: 600px; }
  .tk-table .tk-col-hide-mobile { display: none; }

  .tk-detail__body {
    grid-template-columns: 1fr;
  }

  .tk-detail__sidebar {
    padding-left: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle);
  }

  .tk-detail__main {
    padding-right: 0;
    border-right: none;
  }

  .tk-accordion-toggle { display: block; }
  .tk-detail__sidebar.is-collapsed { display: none; }

  .tk-new-modal__row {
    grid-template-columns: 1fr;
  }

  .modal--form {
    max-width: none;
    width: 100%;
    max-height: 100vh;
    height: 100%;
    border-radius: 0;
  }
  .modal--form .modal-actions--form {
    border-radius: 0;
  }

  .tk-page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .tk-detail__header {
    flex-direction: column;
  }

  .tk-detail__header-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .tk-right-panel {
    width: 100%;
    position: static;
    border-left: none;
    border-top: 1px solid var(--border-subtle);
  }

  .tk-right-panel.is-collapsed {
    width: 100%;
  }

  .tk-has-right-panel > .main-content,
  .tk-right-collapsed.tk-has-right-panel > .main-content {
    padding-right: clamp(1rem, 2vw, 2rem) !important;
  }

  .tk-detail__breadcrumb { display: none; }
  .tk-detail__number { display: none; }

  .tk-detail__title {
    text-align: center;
    font-size: 1.15rem;
  }

  .tk-detail__header-left {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Hide search (already in mobile header) */
  .tk-search { display: none !important; }

  /* Hide avatars in comments */
  .tk-comment__avatar { display: none; }

  /* Comments: better visual separation */
  .tk-comment {
    padding: .75rem 0;
    border-bottom: 1px solid var(--border-subtle);
  }
  .tk-comment__author {
    font-weight: var(--weight-semibold);
    font-size: var(--text-body);
  }
  .tk-comment__header {
    margin-bottom: .5rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid rgba(255,255,255,.04);
  }
  .tk-comment__body {
    font-size: var(--text-body);
    color: var(--text-secondary);
  }

  .tk-detail__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
  }

  #tk-timer-area {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: .5rem;
  }
}

/* ── Ticket chat (mobile) ─────────────────────────────────── */
.tk-chat {
  display: flex;
  flex-direction: column;
  padding-bottom: 7rem;
}
.tk-chat__messages {
  padding: .75rem 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.tk-chat__msg {
  max-width: 85%;
  padding: .6rem .85rem;
  border-radius: var(--radius-lg);
  font-size: var(--text-small);
  line-height: 1.45;
  position: relative;
}
.tk-chat__msg--mine {
  align-self: flex-end;
  background: rgba(225, 29, 72, .12);
  border-bottom-right-radius: 4px;
}
.tk-chat__msg:not(.tk-chat__msg--mine) {
  align-self: flex-start;
  background: var(--bg-tertiary);
  border-bottom-left-radius: 4px;
}
.tk-chat__msg--client {
  border-left: 2px solid #3b82f6;
}
.tk-chat__msg--internal:not(.tk-chat__msg--mine) {
  border-left: 2px solid var(--border-subtle);
}
.tk-chat__msg-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .25rem;
}
.tk-chat__msg-author {
  font-weight: var(--weight-medium);
  font-size: var(--text-label);
  color: var(--text-primary);
}
.tk-chat__msg-badge {
  font-size: var(--text-xs);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}
.tk-chat__msg-badge--client {
  background: rgba(59, 130, 246, .15);
  color: var(--color-info);
}
.tk-chat__msg-badge--internal {
  background: rgba(161, 161, 170, .1);
  color: var(--text-secondary);
}
.tk-chat__msg-body {
  color: var(--text-primary);
}
.tk-chat__msg-body p {
  margin: 0;
}
.tk-chat__msg-time {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  opacity: .6;
  margin-top: .25rem;
  display: block;
}

/* Chat input bar */
.tk-chat__input-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 110;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-subtle);
  padding: .5rem 1rem calc(.5rem + env(safe-area-inset-bottom, 0px));
}
.tk-chat__type-toggle {
  display: flex;
  gap: .35rem;
  margin-bottom: .5rem;
}
.tk-chat__type-btn {
  font-family: inherit;
  font-size: var(--text-xs);
  padding: .25rem .75rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.tk-chat__type-btn.is-active {
  background: var(--bg-tertiary);
  border-color: var(--text-secondary);
  color: var(--text-primary);
}
.tk-chat__input-row {
  display: flex;
  gap: .5rem;
  align-items: flex-end;
}
.tk-chat__textarea {
  flex: 1;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: .55rem .75rem;
  font-family: inherit;
  font-size: var(--text-small);
  color: var(--text-primary);
  resize: none;
  outline: none;
  min-height: 38px;
  max-height: 120px;
}
.tk-chat__textarea:focus {
  border-color: var(--accent);
}
.tk-chat__send {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--color-on-accent);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
}
.tk-chat__send:active {
  opacity: .8;
}
.tk-chat__attach {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  padding: .35rem;
  flex-shrink: 0;
  transition: color var(--transition-fast);
}
.tk-chat__attach:hover {
  color: var(--text-primary);
}
.tk-chat__file-preview {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  padding-top: .5rem;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.tk-chat__file-tag {
  display: flex;
  align-items: center;
  gap: .25rem;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  padding: .2rem .5rem;
}
.tk-chat__file-remove {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: .85rem;
  padding: 0 .15rem;
}

/* Reply quote in comment */
.tk-comment__reply-quote {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border-left: 2px solid var(--accent);
  padding: .25rem .5rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: .35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tk-comment__reply-author {
  font-weight: var(--weight-medium);
  color: var(--accent);
}
/* Swipe reply hint icon */
.tk-comment__reply-hint {
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  display: none;
  align-items: center;
  justify-content: center;
}
.tk-comment {
  position: relative;
}

/* Reply preview above input */
.tk-chat__reply-preview {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .75rem;
  background: var(--bg-tertiary);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-bottom: .5rem;
}
.tk-chat__reply-preview span {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tk-chat__reply-cancel {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0 .25rem;
  flex-shrink: 0;
}

/* ==========================================================================
   ADMIN PANEL
   ========================================================================== */

.adm-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 1.5rem;
  overflow-x: auto;
}

.adm-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: var(--text-small);
  font-family: inherit;
  padding: .6rem 1rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.adm-tab:hover { color: var(--text-primary); }
.adm-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

.adm-panel { display: none; }
.adm-panel.is-active { display: block; }

/* .adm-users-table — inherits from .data-table, no overrides needed */

.adm-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.adm-user-initials {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
}

.adm-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.adm-status-dot--active { background: #4ade80; }
.adm-status-dot--inactive { background: #f87171; }

/* Permissions grid */
.adm-perms-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-label);
}

.adm-perms-grid th {
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  padding: .4rem .5rem;
  text-align: center;
  border-bottom: 1px solid var(--border-subtle);
}

.adm-perms-grid th:first-child { text-align: left; }

.adm-perms-grid td {
  padding: .4rem .5rem;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.04);
}

.adm-perms-grid td:first-child {
  text-align: left;
  color: var(--text-primary);
  font-weight: var(--weight-regular);
}

.adm-perms-grid input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}

/* KPI cards for dashboard */
.adm-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .75rem;
  margin-bottom: 1.5rem;
}

.adm-kpi {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1rem;
}

.adm-kpi__label {
  font-size: var(--text-label);
  color: var(--text-secondary);
  font-weight: var(--weight-regular);
}

.adm-kpi__value {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

/* Audit log */
.adm-audit-table {
  width: 100%;
  border-collapse: collapse;
}

/* .adm-audit-table — inherits from .data-table, no overrides needed */

/* ==========================================================================
   MOBILE — 480px and below
   Global mobile rules for all components. Targets phones in portrait mode.
   ========================================================================== */

@media (max-width: 480px) {

  /* ── Layout ──────────────────────────────────────────────── */
  .main-content {
    padding: 1rem .75rem;
  }
  .main-content > * {
    max-width: 100%;
  }

  /* ── Topbar ──────────────────────────────────────────────── */
  .topbar {
    gap: .5rem;
    padding: .5rem;
  }
  .topbar-profile {
    padding: .5rem .65rem;
    gap: .65rem;
  }
  .topbar-avatar {
    width: 36px;
    height: 36px;
  }
  .topbar-name {
    font-size: var(--text-small);
  }
  .topbar-role {
    font-size: var(--text-xs);
  }

  /* ── Page header ─────────────────────────────────────────── */
  .page-header {
    display: none;
  }

  /* ── Data tables ─────────────────────────────────────────── */
  .data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .data-table {
    min-width: 500px;
  }
  .data-table thead th {
    padding: 8px 10px;
    font-size: var(--text-xs);
  }
  .data-table tbody td {
    padding: 8px 10px;
  }

  /* ── Record rows (doc lists) ─────────────────────────────── */
  .record-row {
    flex-direction: column;
    align-items: flex-start;
    padding: .75rem 1rem;
    gap: .65rem;
  }
  .record-actions {
    width: 100%;
  }
  .record-actions .btn {
    flex: 1;
    justify-content: center;
  }
  .record-amount {
    min-width: auto;
    text-align: left;
    font-size: var(--text-small);
  }

  /* ── Forms ───────────────────────────────────────────────── */
  .form-grid {
    grid-template-columns: 1fr;
  }
  .assign-fields {
    grid-template-columns: 1fr;
  }
  .form-actions {
    flex-direction: column;
  }
  .form-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* ── Modals ──────────────────────────────────────────────── */
  .modal {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
  .modal-header {
    border-radius: 0;
    padding: .65rem .75rem;
  }
  .modal-body {
    border-radius: 0;
  }

  /* ── Search box ──────────────────────────────────────────── */
  .search-input-wrap {
    font-size: var(--text-small);
  }

  /* ── Buttons ─────────────────────────────────────────────── */
  .btn--lg {
    padding: .65rem 1rem;
    font-size: var(--text-small);
  }

  /* ── Empty state ─────────────────────────────────────────── */
  .empty-state {
    padding: 2rem .75rem;
  }
  .empty-state svg {
    width: 48px;
    height: 48px;
  }

  /* ── Dashboard / KPIs — all modules ──────────────────────── */
  .dash-kpis,
  .tk-kpis,
  .proy-kpis,
  .adm-kpis,
  .cl-kpis {
    grid-template-columns: repeat(4, 1fr);
    gap: .4rem;
  }
  .dash-kpi,
  .tk-kpi-card,
  .proy-kpi,
  .adm-kpi {
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: .6rem .5rem;
    text-align: center;
    align-items: center;
  }
  .dash-kpi__value,
  .tk-kpi-card__value,
  .proy-kpi__value,
  .adm-kpi__value {
    font-size: 1.3rem;
  }
  .dash-kpi__label,
  .tk-kpi-card__label,
  .proy-kpi-card__label,
  .adm-kpi__label {
    font-size: var(--text-xs);
  }
  .dash-kpi__sub,
  .tk-kpi-card__sub,
  .proy-kpi-card__sub,
  .adm-kpi__sub {
    display: none;
  }
  .dash-kpis {
    grid-template-columns: repeat(4, 1fr);
  }
  .dash-kpi:last-child:nth-child(odd) {
    grid-column: auto;
  }
  .dash-quick {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Home layout ─────────────────────────────────────────── */
  .rpanel-photo {
    width: 56px;
    height: 56px;
  }
  .rpanel-detail {
    min-width: 100%;
  }

  /* ── Inventory filters ───────────────────────────────────── */
  .inv-filters {
    flex-direction: column;
    align-items: stretch;
  }
  .inv-filter {
    width: 100%;
  }

  /* ── Recibo / Constancia ─────────────────────────────────── */
  .recibo-totals {
    flex-direction: column;
    gap: .5rem;
  }
  .recibo-filters {
    flex-direction: column;
    gap: .35rem;
  }
  .recibo-filter-row + .recibo-filter-row {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
  }

  /* ── CRM Clientes ────────────────────────────────────────── */
  .cl-form-row-2,
  .cl-form-row-3 {
    grid-template-columns: 1fr;
  }
  .cl-profile-grid {
    grid-template-columns: 1fr;
  }

  /* ── Billing ─────────────────────────────────────────────── */
  .billing-section__head {
    flex-direction: column;
    gap: .5rem;
  }

  /* ── Proyectos ───────────────────────────────────────────── */
  .proy-kpis {
    grid-template-columns: repeat(4, 1fr);
  }
  .proy-filters-bar {
    flex-direction: column;
  }
  .proy-filter-select,
  .proy-search {
    width: 100%;
  }

  /* ── Tickets ─────────────────────────────────────────────── */
  .tk-kpis {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Hide page headers on mobile (info is in mobile header) */
  .tk-page-header { display: none; }

  /* Quick filters for all modules */
  .proy-quick-filters,
  .cl-quick-filters {
    display: flex;
  }
  .proy-filters-bar,
  .cl-filters-bar {
    display: none !important;
  }
  .proy-filters-bar.is-sheet,
  .cl-filters-bar.is-sheet {
    display: flex !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 200;
    background: var(--bg-secondary);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 1.25rem 1rem 2rem;
    flex-direction: column;
    gap: .75rem;
    box-shadow: 0 -4px 24px rgba(0,0,0,.4);
  }

  /* Quick filters visible, full filters hidden by default */
  .tk-quick-filters {
    display: flex;
  }
  .tk-filters-bar {
    display: none !important;
  }
  .tk-filters-bar.is-sheet {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--bg-secondary);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 1.25rem 1rem 2rem;
    flex-direction: column;
    gap: .75rem;
    box-shadow: 0 -4px 24px rgba(0,0,0,.4);
  }
  .tk-filters-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 199;
    background: rgba(0,0,0,.5);
  }
  .tk-filters-bar {
    flex-direction: column;
  }
  .tk-filter-select,
  .tk-search {
    width: 100%;
  }
  .tk-detail__body {
    grid-template-columns: 1fr;
  }
  .tk-detail__sidebar {
    padding-left: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle);
  }
  .tk-detail__main {
    padding-right: 0;
    border-right: none;
  }

  /* ── Roadmap ─────────────────────────────────────────────── */
  .rm-board {
    grid-template-columns: 1fr;
  }
  .rm-filter-row {
    flex-direction: column;
  }
  .rm-dt-grid {
    grid-template-columns: 1fr;
  }

  /* ── Admin ───────────────────────────────────────────────── */
  .adm-kpis {
    grid-template-columns: repeat(4, 1fr);
  }

  /* ── API Docs ────────────────────────────────────────────── */
  .apid-endpoint__head {
    flex-direction: column;
  }
  .apid-badges {
    margin-left: 0;
  }

  /* ── iOS zoom fix — inputs must be ≥16px ─────────────── */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* ── Safari/iOS fixes ────────────────────────────────── */
  .tk-chat__messages,
  .tk-thread,
  .data-table-wrap {
    -webkit-overflow-scrolling: touch;
  }

  /* Safe area for notch devices */
  .mobile-header {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  .tk-chat__input-bar {
    padding-bottom: max(.5rem, env(safe-area-inset-bottom));
  }
}

/* ──────────────────────────────────────────────────────────
   Feedback beta — FAB, modal, admin page
   ────────────────────────────────────────────────────────── */

/* Floating button (Intercom-style, bottom right) */
.feedback-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 180;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem .95rem;
  background: var(--accent);
  color: var(--color-on-accent);
  border: none;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.feedback-fab:hover { background: var(--accent-hover); transform: translateY(-1px); }
.feedback-fab:active { transform: translateY(0); }
.feedback-fab svg { display: block; }
@media (max-width: 767px) {
  .feedback-fab {
    right: 1rem;
    bottom: max(5.5rem, calc(env(safe-area-inset-bottom) + 5rem));
    padding: .55rem;
  }
  .feedback-fab__label { display: none; }
}

/* Modal */
.feedback-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: rgba(0, 0, 0, .7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
  padding: 1rem;
}
.feedback-modal-overlay.is-open { opacity: 1; visibility: visible; }
.feedback-modal-overlay.is-capturing { visibility: hidden; opacity: 0; }

.feedback-modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
  transform: translateY(16px) scale(.98);
  transition: transform var(--transition-normal);
  overflow: hidden;
}
.feedback-modal-overlay.is-open .feedback-modal { transform: translateY(0) scale(1); }

.feedback-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
}
.feedback-modal__title {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.feedback-modal__close {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: .25rem;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.feedback-modal__close:hover { color: var(--text-primary); background: var(--bg-tertiary); }

.feedback-modal__body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  overflow-y: auto;
}

.feedback-label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  margin-bottom: -.25rem;
}

.feedback-types {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.feedback-type {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .85rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.feedback-type:hover { color: var(--text-primary); }
.feedback-type.is-active {
  background: var(--accent);
  color: var(--color-on-accent);
  border-color: var(--accent);
}

.feedback-textarea {
  width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-base);
  color: var(--text-primary);
  padding: .75rem .85rem;
  font-family: var(--font-body);
  font-size: var(--text-body);
  resize: vertical;
  min-height: 110px;
  transition: border-color var(--transition-fast);
}
.feedback-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.feedback-shot { display: flex; flex-direction: column; gap: .5rem; }
.feedback-shot__btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  align-self: flex-start;
  padding: .5rem .85rem;
  background: var(--bg-tertiary);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-base);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.feedback-shot__btn:hover:not(:disabled) { color: var(--text-primary); border-color: var(--text-secondary); }
.feedback-shot__btn:disabled { opacity: .7; cursor: not-allowed; }
.feedback-shot__preview {
  position: relative;
  display: flex;
}
.feedback-shot__preview img {
  max-width: 100%;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.feedback-shot__remove {
  position: absolute;
  top: .35rem;
  right: .35rem;
  width: 22px;
  height: 22px;
  background: rgba(0,0,0,.7);
  border: none;
  color: var(--text-primary);
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feedback-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  padding: .9rem 1.25rem;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-primary);
}

.feedback-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1rem;
  border-radius: var(--radius-base);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.feedback-btn--primary {
  background: var(--accent);
  color: var(--color-on-accent);
}
.feedback-btn--primary:hover:not(:disabled) { background: var(--accent-hover); }
.feedback-btn--primary:disabled { opacity: .5; cursor: not-allowed; }
.feedback-btn--ghost {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}
.feedback-btn--ghost:hover { background: var(--bg-secondary); }

.feedback-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: var(--radius-full);
  animation: feedback-spin .8s linear infinite;
  display: inline-block;
}
@keyframes feedback-spin { to { transform: rotate(360deg); } }

/* Toast (own copy, scoped) */
.feedback-toast {
  position: fixed;
  bottom: 5rem;
  right: 1.25rem;
  z-index: 240;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  padding: .65rem 1rem;
  border-radius: var(--radius-base);
  font-family: var(--font-body);
  font-size: var(--text-small);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}
.feedback-toast.is-visible { opacity: 1; transform: translateY(0); }
.feedback-toast.is-error { border-color: var(--accent); color: var(--accent); }

/* ── Admin page ──────────────────────────────────────────── */
.fb-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.fb-page-header__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 0 0 .25rem 0;
}
.fb-page-header__sub {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--text-secondary);
  margin: 0;
}

.fb-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.fb-kpi {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1rem;
}
.fb-kpi__value {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.fb-kpi__label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  color: var(--text-secondary);
  margin-top: .15rem;
}
.fb-kpi--nuevo .fb-kpi__value { color: var(--accent); }
.fb-kpi--revisado .fb-kpi__value { color: #EA580C; }
.fb-kpi--resuelto .fb-kpi__value { color: #16a34a; }

.fb-filters {
  display: flex;
  gap: .5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.fb-filters select {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-base);
  color: var(--text-primary);
  padding: .5rem .75rem;
  font-family: var(--font-body);
  font-size: var(--text-small);
  cursor: pointer;
}

.fb-list { display: flex; flex-direction: column; gap: .85rem; }
.fb-loading { display: flex; justify-content: center; padding: 3rem 0; }
.fb-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-small);
}

.fb-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
}
.fb-card--nuevo { border-left-color: var(--accent); }
.fb-card--revisado { border-left-color: #EA580C; }
.fb-card--resuelto { border-left-color: #16a34a; opacity: .85; }
.fb-card--descartado { opacity: .55; }

.fb-card__top {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .65rem;
  flex-wrap: wrap;
}
.fb-card__date {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* .fb-pill — migrado a .badge .badge--sm .badge--pill .badge--{tipo|estado}.
   Mapping en js/feedback.js (TIPO_VARIANT, ESTADO_VARIANT). */

.fb-card__desc {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--text-primary);
  margin: 0 0 .65rem 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.fb-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-bottom: .5rem;
}
.fb-card__origen {
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--border-subtle);
  word-break: break-all;
}
.fb-card__origen:hover { color: var(--text-primary); }
.fb-card__notas {
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  padding: .55rem .75rem;
  margin-bottom: .65rem;
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--text-primary);
}
.fb-card__notas strong { color: var(--text-secondary); font-weight: var(--weight-medium); }

.fb-card__actions {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}
.fb-action, .fb-card__shot-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .7rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.fb-action:hover, .fb-card__shot-btn:hover { color: var(--text-primary); border-color: var(--text-secondary); }
.fb-action--ok { color: #16a34a; border-color: rgba(22,163,74,.3); }
.fb-action--ok:hover { background: rgba(22,163,74,.12); color: #16a34a; }
.fb-action--danger { color: var(--accent); border-color: rgba(225,29,72,.3); }
.fb-action--danger:hover { background: rgba(225,29,72,.12); color: var(--accent); }
.fb-action--muted { color: var(--text-secondary); }

.fb-shot-overlay {
  position: fixed;
  inset: 0;
  z-index: 230;
  background: rgba(0,0,0,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}
.fb-shot-overlay.is-open { opacity: 1; visibility: visible; }
.fb-shot-overlay img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.fb-shot-overlay__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fb-shot-overlay__close:hover { background: rgba(255,255,255,.2); }

/* ──────────────────────────────────────────────────────────
   Changelog page (/docs/changelog.html)
   ────────────────────────────────────────────────────────── */
.cl-page-header { margin-bottom: 1.5rem; }
.cl-page-header__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 0 0 .25rem 0;
}
.cl-page-header__sub {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--text-secondary);
  margin: 0;
}

.cl-timeline {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 820px;
}
.cl-loading { display: flex; justify-content: center; padding: 3rem 0; }
.cl-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-small);
}

.cl-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
}
.cl-card--major { border-left-color: var(--accent); }
.cl-card--minor { border-left-color: var(--color-warning); }
.cl-card--patch { border-left-color: var(--color-info); }
.cl-card.is-latest {
  box-shadow: var(--shadow-sm);
  background: linear-gradient(180deg, rgba(225,29,72,.04), transparent 30%), var(--bg-secondary);
}

.cl-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .65rem;
  flex-wrap: wrap;
}
.cl-card__version-row { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cl-version {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.cl-card__date {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* .cl-pill — migrado a .badge .badge--sm .badge--pill .badge--{danger|warning|info|brand}.
   Mapping en js/changelog.js (TYPE_VARIANT). */

.cl-card__headline {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 0 0 .35rem 0;
}
.cl-card__summary {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 1rem 0;
}

.cl-card__sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: .5rem;
}
.cl-section { display: flex; flex-direction: column; gap: .4rem; }
.cl-section__head {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}
.cl-section__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.cl-section__list li {
  position: relative;
  padding-left: 1rem;
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--text-primary);
  line-height: 1.5;
}
.cl-section__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55rem;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════
   Tickets v2 — Linear-inspired listing + detail
   Scoped under .tickets-v2 (listing) and .ticket-detail-v2 (detail).
   Uses CSS vars only. Mobile-first.
   ═══════════════════════════════════════════════════════════════════ */

/* .tickets-v2 wrapper removed — tickets now lives directly inside .main-content
   like proyectos, so widths and top-spacing are identical. */

.tickets-v2__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.tickets-v2__header-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tickets-v2__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-h3);
  letter-spacing: var(--heading-letter-spacing);
  color: var(--text-primary);
}
.tickets-v2__sub {
  font-size: var(--text-small);
  color: var(--text-secondary);
}
/* tickets-v2__new-btn rule replaced by global .btn--primary (see ~line 2701). */

/* Saved-view tabs — rendered as glass pills (same language as filter-chips). */
.tickets-v2__tabs {
  display: contents; /* let children join the parent flex row directly */
}
.tickets-v2__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.tickets-v2__tab:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-primary);
}
.tickets-v2__tab.is-active {
  background: var(--accent-bg);
  border-color: transparent;
  color: var(--accent);
  backdrop-filter: none;
}
.tickets-v2__tab-count {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.10);
  color: inherit;
}
.tickets-v2__tab.is-active .tickets-v2__tab-count {
  background: var(--accent);
  color: var(--color-on-accent);
}

/* Command bar */
.tickets-v2__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-base);
}
.tickets-v2__search {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 200px;
  min-width: 160px;
}
.tickets-v2__search svg { color: var(--text-secondary); flex-shrink: 0; }
.tickets-v2__search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  min-width: 0;
}
.tickets-v2__search kbd {
  font-size: 10px;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border-radius: var(--radius-xs);
  padding: 2px 5px;
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
}

/* Applied-filter chip: same glass pill look as .filter-chip + a remove button. */
.tickets-v2__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  padding: 4px 4px 4px 12px;
  font-size: var(--text-small);
  color: var(--text-primary);
}
.tickets-v2__chip-label { color: var(--text-tertiary); }
.tickets-v2__chip-remove {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  line-height: 1;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.tickets-v2__chip-remove:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.08); }

.tickets-v2__add-filter {
  background: transparent;
  border: 1px dashed var(--border-subtle);
  color: var(--text-secondary);
  padding: 5px 10px;
  border-radius: var(--radius-md);
  font-size: var(--text-small);
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.tickets-v2__add-filter:hover { border-color: var(--text-secondary); color: var(--text-primary); }

/* Dropdown for filter values */
/* Tickets dropdowns use the canonical .dropdown-panel look (see below). */
.tickets-v2__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  z-index: 100;
  display: none;
}
.tickets-v2__dropdown.is-open { display: block; }
.tickets-v2__dropdown-section {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  padding: 8px 10px 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tickets-v2__dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-primary);
  font-size: var(--text-small);
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.tickets-v2__dropdown-item:hover { background: rgba(255, 255, 255, 0.06); }
.tickets-v2__dropdown-item.is-checked { color: var(--accent); }

/* KPI cards — always visible, like proyectos. */
.tickets-v2__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.tickets-v2__kpis:empty { display: none; margin: 0; }
.tickets-v2__kpi {
  background: rgba(17, 17, 19, 0.5);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
@media (max-width: 720px) {
  .tickets-v2__kpis { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
  .tickets-v2__kpi { padding: 12px; }
}
.tickets-v2__kpi-label {
  font-size: var(--text-label);
  color: var(--text-secondary);
}
.tickets-v2__kpi-value {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 20px;
  color: var(--text-primary);
}
.tickets-v2__kpi-value--accent { color: var(--accent); }
.tickets-v2__kpi-value--ok { color: var(--color-success); }
.tickets-v2__kpi-value--warn { color: var(--color-warning); }

/* Bulk toolbar */
.tickets-v2__bulk {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
}
.tickets-v2__bulk.is-active { display: flex; flex-wrap: wrap; }
.tickets-v2__bulk-count {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-small);
  color: var(--text-primary);
}
.tickets-v2__bulk-actions { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.tickets-v2__bulk-btn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  font-size: var(--text-small);
  font-family: var(--font-body);
  cursor: pointer;
}
.tickets-v2__bulk-btn:hover { border-color: var(--text-secondary); }
.tickets-v2__bulk-btn--clear { color: var(--text-secondary); }
.tickets-v2__bulk-btn--danger {
  color: var(--color-error);
  border-color: rgba(239, 68, 68, 0.30);
}
.tickets-v2__bulk-btn--danger:hover {
  border-color: var(--color-error);
  background: rgba(239, 68, 68, 0.10);
}

/* List */
.tickets-v2__table {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.tickets-v2__list {
  display: flex;
  flex-direction: column;
}
.tickets-v2__list-header {
  display: none;
}
.tickets-v2__row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.tickets-v2__row:last-child { border-bottom: none; }
.tickets-v2__row:hover { background: var(--bg-tertiary); }
.tickets-v2__row.is-selected { background: rgba(225, 29, 72, 0.08); }
.tickets-v2__check {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.tickets-v2__row-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.tickets-v2__row-title {
  font-size: var(--text-body);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tickets-v2__row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.3;
}
.tickets-v2__row-num {
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
  color: var(--text-secondary);
}
.tickets-v2__row-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.tickets-v2__avatar {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  flex-shrink: 0;
  overflow: hidden;
}
.tickets-v2__avatar img { width: 100%; height: 100%; object-fit: cover; }
.tickets-v2__avatar-fallback { width: 100%; height: 100%; align-items: center; justify-content: center; }
.tickets-v2__assignee {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: var(--text-small);
  color: var(--text-primary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tickets-v2__time {
  font-size: var(--text-label);
  color: var(--text-secondary);
  white-space: nowrap;
}
/* Kebab: positioned absolutely so it never breaks the row grid in any breakpoint. */
.tickets-v2__row-kebab {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
  transition: opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.tickets-v2__row:hover .tickets-v2__row-kebab { opacity: 1; }
.tickets-v2__row-kebab:hover { background: var(--bg-tertiary); color: var(--text-primary); opacity: 1; }
.tickets-v2__row-kebab:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; opacity: 1; }

/* Row needs position so the kebab can anchor; and reserve right padding for it. */
.tickets-v2__row { position: relative; padding-right: 40px; }

/* SLA indicator */
.tickets-v2__sla {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-label);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.tickets-v2__sla-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.tickets-v2__sla-text { white-space: nowrap; }
.tickets-v2__sla--ok .tickets-v2__sla-dot { background: var(--color-success); }
.tickets-v2__sla--warn .tickets-v2__sla-dot { background: var(--color-warning); }
.tickets-v2__sla--breach .tickets-v2__sla-dot { background: var(--color-error); }
.tickets-v2__sla--breach .tickets-v2__sla-text { color: var(--color-error); }
.tickets-v2__sla--closed .tickets-v2__sla-dot { background: var(--text-secondary); opacity: 0.4; }

/* .tk2-badge eliminado — dead code. Usar .badge .badge--sm si vuelve a hacer falta. */

/* Empty */
.tickets-v2__empty {
  padding: 48px 16px;
  text-align: center;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.tickets-v2__empty svg { opacity: 0.4; }

/* Dropdown wrapper (positioning) */
.tickets-v2__dropdown-wrap { position: relative; }

/* Styled native form controls inside tickets v2 — replace ugly OS look */
.tickets-v2 select,
.ticket-detail-v2 select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--bg-tertiary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 26px;
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-small);
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 10px;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.tickets-v2 select:hover,
.ticket-detail-v2 select:hover { border-color: var(--text-secondary); }
.tickets-v2 select:focus,
.ticket-detail-v2 select:focus { outline: none; border-color: var(--accent); }

.ticket-detail-v2 input[type="text"],
.ticket-detail-v2 input[type="date"],
.ticket-detail-v2 input[type="number"] {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-small);
  padding: 6px 10px;
}
.ticket-detail-v2 input[type="text"]:focus,
.ticket-detail-v2 input[type="date"]:focus,
.ticket-detail-v2 input[type="number"]:focus { outline: none; border-color: var(--accent); }

/* Toast (reuse existing .toast but ensure styles in scope) */
.tickets-v2__toast-undo {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-size: var(--text-label);
  margin-left: 8px;
  cursor: pointer;
}

/* Table header (desktop only — on mobile we keep the card-stack layout) */
.tickets-v2__head { display: none; }
.tk2-th {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.tk2-th--sortable {
  cursor: pointer;
  transition: color var(--transition-fast);
}
.tk2-th--sortable:hover { color: var(--text-primary); }
.tk2-th.is-active { color: var(--text-primary); }
.tk2-th__arrow { font-size: 10px; line-height: 1; color: var(--text-secondary); }

/* Desktop layout — head and rows share an identical grid string so columns
   align vertically. Kebab lives outside the grid (absolute right). */
@media (min-width: 768px) {
  .tickets-v2 { padding: var(--space-content-v) var(--space-content-h); gap: 20px; }
  .tickets-v2__title { font-size: var(--text-h2); }
  .tickets-v2__head {
    display: grid;
    grid-template-columns: 28px 84px minmax(0, 1fr) 108px 132px 88px 160px 96px;
    gap: 12px;
    padding: 10px 44px 10px 12px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-tertiary);
  }
  .tickets-v2__row {
    grid-template-columns: 28px 84px minmax(0, 1fr) 108px 132px 88px 160px 96px;
    gap: 12px;
    padding: 8px 44px 8px 12px;
    min-height: 40px;
    box-shadow: inset 2px 0 0 transparent;
  }
  .tickets-v2__row:hover { box-shadow: inset 2px 0 0 var(--accent); }
  .tickets-v2__row.is-selected { box-shadow: inset 2px 0 0 var(--accent); }
  .tickets-v2__row-num { font-size: var(--text-small); text-align: left; font-variant-numeric: tabular-nums; }
  .tickets-v2__row-main { flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
  .tickets-v2__row { min-height: 48px; }
  .tickets-v2__time { text-align: right; }
  /* Checkbox: visible only on hover or when there's an active selection */
  .tickets-v2__check { opacity: 0.25; transition: opacity var(--transition-fast); }
  .tickets-v2__row:hover .tickets-v2__check,
  .tickets-v2__row.is-selected .tickets-v2__check { opacity: 1; }
}

/* ─── Ticket detail v2 ───────────────────────────────────── */
/* La página de ticket detail vive en una altura fija y solo el feed de
   comentarios scrollea. El main-content padre pierde su padding para no sumar
   altura al layout. */
.main-content:has(.ticket-detail-v2) { padding: 0; }
.ticket-detail-v2 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: 16px;
  padding: 8px var(--space-mobile-h) var(--space-mobile-h);
  height: 100dvh;
  overflow: hidden;
}
.ticket-detail-v2__scroll {
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-subtle) transparent;
  scrollbar-gutter: stable;
  padding-right: 12px;
}
.ticket-detail-v2__info-toggle {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: var(--text-small);
  font-family: var(--font-body);
  cursor: pointer;
  padding: 4px 0;
}
.ticket-detail-v2__info-toggle:hover { color: var(--text-primary); }
.ticket-detail-v2__info-toggle .tkd-info-toggle__chev {
  transition: transform var(--transition-fast);
}
.ticket-detail-v2__info-toggle[aria-expanded="false"] .tkd-info-toggle__chev {
  transform: rotate(-90deg);
}
.ticket-detail-v2__info-toggle[aria-expanded="false"] + .ticket-detail-v2__info { display: none; }
.ticket-detail-v2__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.ticket-detail-v2__info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  flex-shrink: 0;
}
@media (max-width: 900px) {
  .ticket-detail-v2__info { grid-template-columns: 1fr; }
}
.ticket-detail-v2__info-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 0;
}
.ticket-detail-v2__info-col h3 {
  font-size: 10px;
  font-weight: var(--weight-medium);
  color: var(--text-tertiary, var(--text-secondary));
  margin: 0 0 6px;
}
.ticket-detail-v2__info-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  min-height: 22px;
  padding: 0;
}
.ticket-detail-v2__info-row > span:first-child {
  color: var(--text-secondary);
  font-weight: var(--weight-regular);
  font-size: 11px;
}
.ticket-detail-v2__info-row > .ticket-detail-v2__info-val {
  color: var(--text-primary);
  font-weight: var(--weight-regular);
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
/* Selects del bloque Detalles — todos comparten el lenguaje pill del
   selector de Estado (appearance:none + chevron SVG + radius full + padding
   simétrico). El .tkd-status-pill se monta encima con tonalidad por estado. */
.ticket-detail-v2__info-col select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--bg-tertiary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  border-radius: var(--radius-full);
  padding: 3px 22px 3px 10px;
  min-height: 0;
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.ticket-detail-v2__info-col select:hover { border-color: var(--text-tertiary); }
.ticket-detail-v2__info-col select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12);
}
.ticket-detail-v2__info-col select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ticket-detail-v2__main { display: flex; flex-direction: column; }
/* Wrapper de la Conversación: sin caja propia — los comentarios son los que
   llevan su caja. El scroll lo maneja el contenedor padre (.scroll). */
.ticket-detail-v2__card--conv {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  padding: 0;
}
.ticket-detail-v2__conv-title {
  font-size: var(--text-small);
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
  margin-bottom: 10px;
}
.ticket-detail-v2__add-comment-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.ticket-detail-v2__add-comment-btn:hover {
  color: var(--text-primary);
  border-color: var(--text-secondary);
  background: var(--bg-tertiary);
}
.ticket-detail-v2__card--conv .ticket-detail-v2__chat { margin-top: 12px; }
.ticket-detail-v2__comment-text {
  font-size: 12px;
  line-height: 1.55;
}
/* Código inline y en bloque dentro de comentarios: fondo oscuro, texto accent. */
.ticket-detail-v2__comment-text code,
.ticket-detail-v2__comment-text pre {
  background: #0a0a0a;
  color: var(--accent);
  border-radius: var(--radius-xs);
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
  font-size: 0.92em;
}
.ticket-detail-v2__comment-text code {
  padding: 1px 6px;
  border: 1px solid rgba(255,255,255,0.06);
}
.ticket-detail-v2__comment-text pre {
  padding: 10px 12px;
  margin: 6px 0;
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,0.06);
}
.ticket-detail-v2__comment-text pre code {
  padding: 0;
  border: none;
  background: transparent;
}

/* El chat ya no tiene scroll propio — vive dentro del wrapper scrolleable. */
.ticket-detail-v2__chat { padding-right: 0; }
.ticket-detail-v2__chat::-webkit-scrollbar { width: 8px; }
.ticket-detail-v2__chat::-webkit-scrollbar-track { background: transparent; }
.ticket-detail-v2__chat::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.ticket-detail-v2__chat::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary, var(--text-secondary));
  background-clip: padding-box;
}

/* Segmented switch (compacto, sutil) — solo señal del destino del comentario.
   Thumb deslizante con color distinto por lado. */
.ticket-detail-v2__editor-switch {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  padding: 2px;
  isolation: isolate;
  width: max-content;
  flex: 0 0 auto;
  align-self: center;
  line-height: 1;
}
.ticket-detail-v2__editor-switch::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(50% - 2px);
  border-radius: var(--radius-full);
  background: var(--text-tertiary, var(--text-secondary));
  z-index: 0;
  transform: translateX(0);
  transition: transform var(--transition-normal, .25s) cubic-bezier(.4,0,.2,1),
              background var(--transition-normal, .25s) ease;
}
.ticket-detail-v2__editor-switch:has(.ticket-detail-v2__editor-switch-opt[data-ctype="client"].is-active)::before {
  transform: translateX(100%);
  background: var(--accent);
}
.ticket-detail-v2__editor-switch-opt {
  position: relative;
  z-index: 1;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-regular);
  letter-spacing: 0;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
  flex: 0 0 auto;
  transition: color var(--transition-fast);
}
.ticket-detail-v2__editor-switch-opt:hover { color: var(--text-primary); }
.ticket-detail-v2__editor-switch-opt.is-active { color: #fff; }

/* Botón de enviar circular tipo Apple Mail */
.ticket-detail-v2__send-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--color-on-accent);
  border: none;
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.ticket-detail-v2__send-icon:hover { background: var(--accent-strong, var(--accent)); transform: scale(1.05); }
.ticket-detail-v2__send-icon:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.ticket-detail-v2__breadcrumb {
  font-size: var(--text-small);
  color: var(--text-secondary);
  display: flex;
  gap: 6px;
  align-items: center;
}
.ticket-detail-v2__breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
}
.ticket-detail-v2__breadcrumb a:hover { color: var(--text-primary); }
.ticket-detail-v2__title-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.ticket-detail-v2__num {
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
  font-size: var(--text-small);
  color: var(--text-secondary);
  padding: 4px 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  margin-top: 4px;
}
.ticket-detail-v2__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-h3);
  letter-spacing: var(--heading-letter-spacing);
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
.ticket-detail-v2__title-edit {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
}
.ticket-detail-v2__title-edit:hover { color: var(--text-primary); background: var(--bg-secondary); }
.ticket-detail-v2__title-input {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--heading-letter-spacing);
  padding: 6px 10px;
}
.ticket-detail-v2__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.ticket-detail-v2__actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.ticket-detail-v2__action {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  font-size: var(--text-small);
  font-family: var(--font-body);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.ticket-detail-v2__action:hover { color: var(--text-primary); border-color: var(--text-secondary); }
.ticket-detail-v2__action:disabled,
.ticket-detail-v2__action[disabled] { opacity: 0.5; cursor: not-allowed; }

.ticket-detail-v2__main { display: flex; flex-direction: column; gap: 14px; }
.ticket-detail-v2__panel { display: flex; flex-direction: column; gap: 12px; }

.ticket-detail-v2__card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ticket-detail-v2__card-title {
  font-size: var(--text-small);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ticket-detail-v2__card-title-text { font-weight: var(--weight-regular); color: var(--text-primary); }
.ticket-detail-v2__card-edit {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 2px;
}
.ticket-detail-v2__card-edit:hover { color: var(--text-primary); }

.ticket-detail-v2__desc {
  font-size: var(--text-body);
  color: var(--text-body-soft);
  font-weight: var(--weight-reading);
  line-height: var(--lh-reading);
  letter-spacing: var(--track-reading);
  white-space: pre-wrap;
  word-break: break-word;
}
.ticket-detail-v2__desc-empty { color: var(--text-secondary); font-style: italic; }
.ticket-detail-v2__desc-input {
  width: 100%;
  min-height: 120px;
  background: var(--bg-tertiary);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  padding: 8px 10px;
  resize: vertical;
}

/* Activity feed */
.ticket-detail-v2__feed { display: flex; flex-direction: column; gap: 10px; }
.ticket-detail-v2__feed-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--border-subtle);
}
.ticket-detail-v2__feed-item--client { border-left-color: var(--accent); background: rgba(225, 29, 72, 0.04); }
.ticket-detail-v2__feed-item--internal { border-left-color: var(--text-secondary); }
.ticket-detail-v2__feed-item--time { border-left-color: var(--logo-secondary); background: rgba(234, 88, 12, 0.04); }
.ticket-detail-v2__feed-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-label);
  color: var(--text-secondary);
  flex-wrap: wrap;
}
.ticket-detail-v2__feed-author {
  font-weight: var(--weight-regular);
  color: var(--text-primary);
}
.ticket-detail-v2__feed-type {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border-radius: var(--radius-xs);
  padding: 1px 6px;
  font-size: 10px;
}
.ticket-detail-v2__feed-type--client { background: rgba(225,29,72,0.12); color: var(--accent); }
.ticket-detail-v2__feed-type--internal { background: var(--bg-secondary); color: var(--text-secondary); }
.ticket-detail-v2__feed-type--time { background: rgba(234,88,12,0.12); color: var(--logo-secondary); }
.ticket-detail-v2__feed-body {
  font-size: var(--text-xs);
  color: var(--text-body-soft);
  font-weight: var(--weight-reading);
  line-height: 1.5;
  letter-spacing: var(--track-reading);
  white-space: pre-wrap;
  word-break: break-word;
}
.ticket-detail-v2__feed-edited {
  font-size: 10px;
  color: var(--text-secondary);
  font-style: italic;
}

.ticket-detail-v2__comment-form { display: flex; flex-direction: column; gap: 8px; }
.ticket-detail-v2__comment-toggle { display: flex; gap: 4px; }
.ticket-detail-v2__comment-toggle button {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: var(--text-small);
  font-family: var(--font-body);
  cursor: pointer;
}
.ticket-detail-v2__comment-toggle button.is-active {
  background: var(--bg-secondary);
  border-color: var(--accent);
  color: var(--text-primary);
}
.ticket-detail-v2__comment-textarea {
  width: 100%;
  min-height: 80px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  padding: 8px 10px;
  resize: vertical;
}
.ticket-detail-v2__comment-textarea:focus { outline: none; border-color: var(--accent); }
.ticket-detail-v2__comment-actions { display: flex; gap: 8px; justify-content: flex-end; }
.ticket-detail-v2__comment-send {
  background: var(--accent);
  color: var(--color-on-accent);
  border: none;
  border-radius: var(--radius-md);
  padding: 6px 14px;
  font-size: var(--text-small);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.ticket-detail-v2__comment-send:hover { background: var(--accent-hover); }
.ticket-detail-v2__comment-send:disabled { opacity: 0.6; cursor: wait; }

/* Right panel */
.ticket-detail-v2__panel-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  font-size: var(--text-small);
}
.ticket-detail-v2__panel-label {
  font-size: var(--text-label);
  color: var(--text-secondary);
}
.ticket-detail-v2__panel-value {
  color: var(--text-primary);
  min-width: 0;
}
.ticket-detail-v2__panel-value select,
.ticket-detail-v2__panel-value input,
.ticket-detail-v2__panel-value textarea {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  font-family: var(--font-body);
  font-size: var(--text-small);
  width: 100%;
  cursor: pointer;
}
.ticket-detail-v2__panel-value select:focus,
.ticket-detail-v2__panel-value input:focus,
.ticket-detail-v2__panel-value textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.ticket-detail-v2__sla-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-small);
  padding: 6px 0;
}
.ticket-detail-v2__sla-line--ok { color: var(--color-success); }
.ticket-detail-v2__sla-line--warn { color: var(--color-warning); }
.ticket-detail-v2__sla-line--breach { color: var(--color-error); }
.ticket-detail-v2__sla-line--closed { color: var(--text-secondary); }

.ticket-detail-v2__time-total {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 18px;
  color: var(--accent);
}
.ticket-detail-v2__time-add {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  padding: 4px 10px;
  font-size: var(--text-small);
  font-family: var(--font-body);
  cursor: pointer;
}
.ticket-detail-v2__time-add:hover { border-color: var(--accent); color: var(--accent); }
.ticket-detail-v2__time-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: var(--text-label);
  border-bottom: 1px solid var(--border-subtle);
}
.ticket-detail-v2__time-entry:last-child { border-bottom: none; }
.ticket-detail-v2__time-entry-desc {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}
.ticket-detail-v2__time-entry-hours {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}
.ticket-detail-v2__time-entry-del {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  opacity: 0.4;
}
.ticket-detail-v2__time-entry-del:hover { opacity: 1; color: var(--color-error); }

.ticket-detail-v2__client-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--text-small);
  color: var(--text-secondary);
}
.ticket-detail-v2__client-name {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}
.ticket-detail-v2__client-link {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: var(--text-label);
  text-decoration: none;
  display: inline-block;
  margin-top: 4px;
}
.ticket-detail-v2__client-link:hover { border-color: var(--accent); color: var(--accent); }

.ticket-detail-v2__dates {
  font-size: var(--text-label);
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}

/* Back button in detail header */
.ticket-detail-v2__back {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-small);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--radius-md);
  cursor: pointer;
  width: fit-content;
  text-decoration: none;
}
.ticket-detail-v2__back:hover { color: var(--text-primary); background: var(--bg-secondary); }

/* Inline description (no card) */
.ticket-detail-v2__desc-inline {
  font-size: var(--text-body);
  color: var(--text-primary);
  line-height: 1.6;
  padding: 0;
  margin: 4px 0 8px;
  white-space: pre-wrap;
  word-break: break-word;
}
.ticket-detail-v2__desc-inline .ticket-detail-v2__desc-empty {
  color: var(--text-secondary);
  font-style: italic;
  font-size: var(--text-small);
}

/* Subtle inline metadata (created/updated/closed) */
.ticket-detail-v2__meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: var(--text-label);
  color: var(--text-secondary);
  opacity: 0.75;
  margin-top: 4px;
}

/* Chat-style feed */
.ticket-detail-v2__chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 0;
}
.ticket-detail-v2__bubble {
  display: flex;
  gap: 8px;
  max-width: 88%;
  align-self: flex-start;
}
.ticket-detail-v2__bubble--mine { align-self: flex-end; flex-direction: row-reverse; }
.ticket-detail-v2__bubble-body {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 14px 14px 14px 4px;
  padding: 8px 12px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ticket-detail-v2__bubble--mine .ticket-detail-v2__bubble-body {
  background: rgba(225, 29, 72, 0.10);
  border-color: rgba(225, 29, 72, 0.35);
  border-radius: 14px 14px 4px 14px;
}
.ticket-detail-v2__bubble--client .ticket-detail-v2__bubble-body {
  border-style: dashed;
  border-color: var(--logo-secondary);
}
.ticket-detail-v2__bubble-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-secondary);
  flex-wrap: wrap;
}
.ticket-detail-v2__bubble-author {
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}
.ticket-detail-v2__bubble-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}
.ticket-detail-v2__bubble-tag--client {
  background: rgba(234, 88, 12, 0.16);
  color: var(--logo-secondary);
}
.ticket-detail-v2__bubble-text {
  font-size: var(--text-small);
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}
.ticket-detail-v2__bubble-text code {
  background: var(--bg-tertiary);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
  font-size: 12px;
}
.ticket-detail-v2__bubble-text pre {
  background: var(--bg-tertiary);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-size: 12px;
}
.ticket-detail-v2__bubble-actions {
  display: none;
  gap: 6px;
  font-size: 11px;
}
.ticket-detail-v2__bubble:hover .ticket-detail-v2__bubble-actions { display: inline-flex; }
.ticket-detail-v2__bubble-edit {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}
.ticket-detail-v2__bubble-edit:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.ticket-detail-v2__bubble-edited { font-size: 10px; font-style: italic; opacity: 0.6; }

/* Time entry as a divider in the chat */
.ticket-detail-v2__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px 0;
  font-size: 11px;
  color: var(--text-secondary);
}
.ticket-detail-v2__divider::before,
.ticket-detail-v2__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}
.ticket-detail-v2__divider-chip {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 3px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Attachments inside a bubble */
.ticket-detail-v2__atts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.ticket-detail-v2__att {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: 11px;
  color: var(--text-primary);
  text-decoration: none;
}
.ticket-detail-v2__att:hover { border-color: var(--accent); color: var(--accent); }
.ticket-detail-v2__att-img {
  max-width: 240px;
  max-height: 180px;
  border-radius: var(--radius-sm);
  display: block;
  cursor: pointer;
}

/* Comment editor: toolbar + textarea + attach */
.ticket-detail-v2__editor {
  border: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}
/* Glow accent que se desvanece al focus — feedback de "nueva acción", no border solid. */
.ticket-detail-v2__editor:focus-within {
  border-color: rgba(225, 29, 72, 0.35);
  box-shadow:
    0 0 0 4px rgba(225, 29, 72, 0.12),
    0 0 14px rgba(225, 29, 72, 0.18);
  animation: tkdEditorGlow 1.8s ease-out 1;
}
@keyframes tkdEditorGlow {
  0%   { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.40), 0 0 22px rgba(225, 29, 72, 0.35); }
  60%  { box-shadow: 0 0 0 5px rgba(225, 29, 72, 0.18), 0 0 18px rgba(225, 29, 72, 0.22); }
  100% { box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.12), 0 0 14px rgba(225, 29, 72, 0.18); }
}
.ticket-detail-v2__editor-textarea:focus,
.ticket-detail-v2__editor-textarea:focus-visible { outline: none; }
.ticket-detail-v2__editor-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.ticket-detail-v2__editor-toolbar-divider {
  width: 1px;
  height: 18px;
  background: var(--border-subtle);
  margin: 0 4px;
}
.ticket-detail-v2__editor-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ticket-detail-v2__editor-btn:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.ticket-detail-v2__editor-btn--bold { font-weight: var(--weight-bold); }
.ticket-detail-v2__editor-btn--italic { font-style: italic; }
.ticket-detail-v2__editor-textarea {
  width: 100%;
  min-height: 90px;
  background: var(--bg-secondary);
  border: none;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  padding: 10px 12px;
  resize: vertical;
  outline: none;
  line-height: 1.5;
}
/* Placeholder simulado en contenteditable (no soporta el atributo nativo). */
div.ticket-detail-v2__editor-textarea:empty::before {
  content: attr(data-placeholder);
  color: var(--text-secondary);
  font-weight: var(--weight-regular);
  opacity: 0.45;
  pointer-events: none;
}
.ticket-detail-v2__editor-textarea::placeholder {
  color: var(--text-secondary);
  font-weight: var(--weight-regular);
  opacity: 0.45;
}
/* Formateos básicos dentro del editor rich-text */
.ticket-detail-v2__editor-textarea ul,
.ticket-detail-v2__editor-textarea ol { padding-left: 22px; margin: 6px 0; }
.ticket-detail-v2__editor-textarea code {
  background: #0a0a0a;
  color: var(--accent);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
  font-size: 0.92em;
}
.ticket-detail-v2__editor-textarea a { color: var(--accent); }
.ticket-detail-v2__editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-top: 1px solid var(--border-subtle);
}
.ticket-detail-v2__editor-types {
  display: flex;
  gap: 4px;
}
.ticket-detail-v2__editor-type {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font-size: var(--text-label);
  font-family: var(--font-body);
  cursor: pointer;
}
.ticket-detail-v2__editor-type.is-active {
  border-color: var(--accent);
  color: var(--text-primary);
  background: rgba(225, 29, 72, 0.08);
}
.ticket-detail-v2__editor-pending {
  display: flex;
  gap: 4px;
  padding: 4px 8px;
  flex-wrap: wrap;
}
.ticket-detail-v2__editor-pending:empty { display: none; padding: 0; }
.ticket-detail-v2__editor-pending-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 3px 6px;
  font-size: 11px;
}
.ticket-detail-v2__editor-pending-remove {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0 2px;
  font-size: 12px;
}

/* Image preview modal (lightbox-ish, no extra deps) */
.ticket-detail-v2__lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}
.ticket-detail-v2__lightbox.is-open { display: flex; }
.ticket-detail-v2__lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-md);
}

/* Sutil resumen plegado en panel cuando hay panel cards */
.ticket-detail-v2__panel-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Desktop layout: stacked rows — header, info-bar 3-cols, conversación abajo */
@media (min-width: 1024px) {
  .ticket-detail-v2 {
    grid-template-columns: 1fr;
    padding: var(--space-content-v) var(--space-content-h);
    gap: 20px;
  }
}

/* ==========================================================================
   Settings hub + email subpages
   ========================================================================== */

.settings-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.settings-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease;
  min-height: 140px;
}

.settings-card:hover {
  border-color: var(--text-tertiary);
  background: var(--bg-secondary, var(--bg-primary));
}

.settings-card__icon {
  color: var(--text-tertiary);
  display: inline-flex;
}

.settings-card__title {
  font-size: var(--text-h3);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.settings-card__desc {
  font-size: var(--text-small);
  color: var(--text-secondary);
  line-height: 1.5;
}

.settings-empty {
  color: var(--text-tertiary);
  font-size: var(--text-small);
}

/* email-accounts table */
.ea-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.ea-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-small);
}

.ea-table th,
.ea-table td {
  text-align: left;
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.ea-table th {
  color: var(--text-tertiary);
  font-weight: 500;
}

/* email-accounts/templates: chip de categoría reutiliza .badge.
   Spacing entre chips lo da .ea-chips wrapper con gap. */
.ea-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }

.ea-actions {
  display: inline-flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.ea-action {
  background: transparent;
  border: none;
  padding: 4px 8px;
  color: var(--text-secondary);
  font-size: var(--text-small);
  font-family: inherit;
  cursor: pointer;
  border-radius: var(--radius-md);
}

.ea-action:hover {
  color: var(--text-primary);
  background: var(--bg-secondary, rgba(255, 255, 255, 0.04));
}

.ea-action--danger {
  color: var(--color-error);
}

.ea-action--danger:hover {
  color: var(--color-error);
  background: rgba(239, 68, 68, 0.08);
  opacity: 0.85;
}

/* modal usado por email-accounts */
.ea-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.ea-modal-backdrop.is-open {
  display: flex;
}

.ea-modal {
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-5);
}

.ea-modal__title {
  font-size: var(--text-h3);
  font-weight: 500;
  margin-bottom: var(--space-4);
  color: var(--text-primary);
}

.ea-modal__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-3);
}

.ea-modal__row label {
  font-size: var(--text-small);
  color: var(--text-secondary);
}

.ea-modal__row input[type="text"],
.ea-modal__row input[type="number"],
.ea-modal__row input[type="password"],
.ea-modal__row input[type="email"] {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-secondary, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-body);
  font-family: inherit;
}

.ea-modal__grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.ea-modal__checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ea-modal__check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-size: var(--text-small);
  color: var(--text-secondary);
  cursor: pointer;
}

.ea-modal__check input { margin: 0; }

.ea-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* email templates list + editor */
.et-list {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-small);
}

.et-list th,
.et-list td {
  text-align: left;
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.et-list th {
  color: var(--text-tertiary);
  font-weight: 500;
}

/* .et-badge → migrado a .badge .badge--sm .badge--neutral .badge--pill */

.et-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.et-editor__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.et-editor__side {
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: fit-content;
  position: sticky;
  top: var(--space-4);
}

.et-editor__html {
  width: 100%;
  min-height: 60vh;
  padding: 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--text-mono);
  line-height: 1.5;
  resize: vertical;
}

.et-editor__subject {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-body);
  font-family: inherit;
}

.et-preview {
  width: 100%;
  min-height: 60vh;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-on-accent);
}

.et-vars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.et-vars__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  background: var(--bg-secondary, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 4px 8px;
  cursor: pointer;
}

@media (max-width: 900px) {
  .et-editor {
    grid-template-columns: 1fr;
  }
  .et-editor__side {
    position: static;
  }
}

@media (max-width: 480px) {
  .ea-modal__grid-2 {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Clientes v2 — listado denso + detail layout vertical (F1)
   ========================================================= */

/* Dot 6×6 que reemplaza el border-left coloreado */
.cl-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  margin-right: var(--space-2);
  vertical-align: middle;
  flex-shrink: 0;
}
.cl-dot--warn  { background: var(--dot-warning); }
.cl-dot--info  { background: var(--dot-info); }
.cl-dot--muted { background: var(--dot-neutral); }

/* Card mobile: quita border-left coloreado (versión flush) */
.tk-card.tk-card--flush {
  border-left-color: var(--border-subtle);
}

/* Columna ACV (mono right-aligned) */
.cl-dir-th--acv { text-align: right; }
.cl-dir-row__mono {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--text-secondary);
  text-align: right;
  white-space: nowrap;
}

/* ── Detalle: layout vertical (hero + sidebar + content) ── */

.cl-detail-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  grid-template-areas:
    "hero hero"
    "tabs content";
  gap: var(--space-4) var(--space-6);
  align-items: start;
}

.cl-detail-hero {
  grid-area: hero;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.cl-detail-hero__stats {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Sidebar vertical */
.cl-detail-tabs {
  grid-area: tabs;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  position: sticky;
  top: var(--space-4);
  align-self: start;
}

.cl-detail-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-small);
  color: var(--text-tertiary);
  text-decoration: none;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}
.cl-detail-back:hover { color: var(--text-primary); }

/* Cada tab del sidebar: override del cl-section-tag */
.cl-detail-tabs .cl-detail-tab {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  border: 0;
  background: transparent;
  border-radius: 0;
  text-align: left;
  font-size: var(--text-small);
  color: var(--text-secondary);
  font-weight: var(--weight-regular, 400);
  box-shadow: none;
  transition: color var(--transition-fast);
}
.cl-detail-tabs .cl-detail-tab:hover {
  color: var(--text-primary);
  border-color: transparent;
}
.cl-detail-tabs .cl-detail-tab.is-active {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}
.cl-detail-tabs .cl-detail-tab.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--accent);
}

/* Content área */
.cl-detail-content {
  grid-area: content;
  max-width: 880px;
}

/* Layout vacío del panel cuando no usa wrap dense */
.cl-detail-content.cl-section-panels {
  padding: var(--space-4) var(--space-5);
}

/* ── Resumen: KPI cards + tags row ── */

.cl-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.cl-summary-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-canvas);
}
.cl-summary-card__k {
  font-size: var(--text-label);
  color: var(--text-tertiary);
}
.cl-summary-card__v {
  font-family: var(--font-mono);
  font-size: var(--text-h3);
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

/* Variante "formulario" — sin card-block, sólo label arriba + value como input ghost.
   Multi-columna como cualquier grid (la info no necesita columna única). */
.cl-summary-grid--form {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  column-gap: var(--space-5);
  row-gap: 4px;
}
.cl-summary-grid--form .cl-summary-card {
  padding: 10px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  gap: 4px;
}
.cl-summary-grid--form .cl-summary-card__k {
  font-size: var(--text-label);
  color: var(--text-secondary);
}
.cl-summary-grid--form .cl-summary-card__v {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
}
/* Hover override del banner: en variante form no queremos el bg/border de la card sólida. */
#cl-detail-page .cl-summary-grid--form .cl-summary-card,
#cl-detail-page .cl-summary-grid--form .cl-summary-card:hover {
  background: transparent;
  border-color: transparent transparent var(--border-subtle) transparent;
  backdrop-filter: none;
}

.cl-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) 0 var(--space-1);
}

/* Micro-stats inline en hero */
.cl-stat-mono {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
}
.cl-stat-mono__k {
  color: var(--text-tertiary);
  font-size: var(--text-label);
  font-family: var(--font-body);
}
.cl-stat-mono__v {
  color: var(--text-primary);
}

/* Placeholder "Próximamente" */
.cl-tab-placeholder {
  border: 1px dashed var(--border-subtle);
  background: var(--bg-canvas);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-5);
}
.cl-tab-placeholder__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display, var(--font-body));
  font-size: var(--text-h3);
  color: var(--text-primary);
}
.cl-tab-placeholder p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-small);
  max-width: 50ch;
  margin-inline: auto;
}

/* Hero compacto override (sin badges apilados) */
.cl-client-top--compact .cl-client-top__badges { display: none; }
.cl-client-top--compact .cl-client-top__meta-compact { margin-top: var(--space-2); }

/* Actividad: ajustes para audit timeline */
.activity-row__who {
  font-size: var(--text-label);
  color: var(--text-secondary);
}
.activity-row__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

/* Tags modal: chips removibles */
.cl-list-chip--removable {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.cl-list-chip__rm {
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 1.1em;
  line-height: 1;
  padding: 0 2px;
}
.cl-list-chip__rm:hover { color: var(--color-error); }

/* ── Responsive: sidebar → tabs horizontales scrollable en mobile ── */

@media (max-width: 768px) {
  .cl-detail-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "tabs"
      "content";
    gap: var(--space-3);
  }

  .cl-detail-hero {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .cl-detail-hero__stats {
    gap: var(--space-3);
  }

  .cl-detail-tabs {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: static;
    gap: var(--space-3);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--border-subtle);
    scrollbar-width: thin;
  }

  .cl-detail-tabs .cl-detail-back { display: none; }

  .cl-detail-tabs .cl-detail-tab {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-2) var(--space-3);
    border-bottom: 2px solid transparent;
    border-radius: 0;
  }
  .cl-detail-tabs .cl-detail-tab.is-active {
    border-bottom-color: var(--accent);
  }
  .cl-detail-tabs .cl-detail-tab.is-active::before { display: none; }

  .cl-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 380px) {
  .cl-summary-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Billing config (public/docs/billing-config.html)
   Tabs simples + tablas + modal genérico + form emisor.
   ───────────────────────────────────────────────────────────────────────────── */

.bc-tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  margin: 0 0 var(--space-6);
  overflow-x: auto;
  scrollbar-width: thin;
}

.bc-tab {
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  font-size: var(--text-small);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .12s ease, border-color .12s ease;
}

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

.bc-tab.is-active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}

.bc-panel { animation: bc-fade .12s ease; }

@keyframes bc-fade {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: none; }
}

.bc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.bc-toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.bc-inline-label {
  font-size: var(--text-small);
  color: var(--text-secondary);
}

.bc-inline-select {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: var(--text-small);
}

.bc-help {
  font-size: var(--text-small);
  color: var(--text-secondary);
  margin: 0;
  max-width: 70ch;
}

.bc-empty {
  text-align: center;
  color: var(--text-tertiary);
  padding: var(--space-6);
  font-size: var(--text-small);
}

.bc-muted { color: var(--text-tertiary); font-size: var(--text-small); }
.bc-mono  { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-mono); color: var(--text-secondary); }

.bc-row-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  white-space: nowrap;
}

.bc-link {
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--text-small);
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--border-subtle);
  transition: color .12s ease, text-decoration-color .12s ease;
}

.bc-link:hover { color: var(--text-primary); text-decoration-color: var(--text-primary); }

.bc-link--danger { color: var(--color-error); }
.bc-link--danger:hover { color: var(--color-error); opacity: .85; }

/* Form del emisor (panel sin modal) */
.bc-form {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-top: var(--space-4);
}

.bc-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}

.bc-field { display: flex; flex-direction: column; gap: 6px; }
.bc-field--full { grid-column: 1 / -1; }

.bc-field label {
  font-size: var(--text-label);
  color: var(--text-secondary);
  letter-spacing: 0;
}

.bc-field input,
.bc-field textarea {
  background: var(--bg-canvas);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: var(--text-body);
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}

.bc-field input:focus,
.bc-field textarea:focus {
  outline: none;
  border-color: var(--border-strong);
}

.bc-form-subtitle {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--text-h3);
  font-weight: 500;
  color: var(--text-primary);
}

.bc-form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.bc-form-status {
  font-size: var(--text-small);
  color: var(--text-secondary);
}

.bc-checkbox-row label {
  font-size: var(--text-body);
  color: var(--text-primary);
}

@media (max-width: 720px) {
  .bc-form-grid { grid-template-columns: 1fr; }
  .bc-toolbar { flex-direction: column; align-items: stretch; }
  .bc-toolbar-actions { justify-content: space-between; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Facturas — listado (public/docs/facturas.html) y detalle (public/docs/factura.html)
   ───────────────────────────────────────────────────────────────────────────── */

.fc-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.fc-search {
  flex: 1;
  background: var(--bg-canvas);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: var(--text-small);
}

.fc-search:focus { outline: none; border-color: var(--border-strong); }

.fc-tab-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 6px;
  margin-left: 6px;
  background: var(--bg-elevated);
  color: var(--text-tertiary);
  border-radius: var(--radius-xs);
  font-size: var(--text-xs);
  text-align: center;
}

.bc-tab.is-active .fc-tab-count {
  background: var(--accent-bg);
  color: var(--text-primary);
}

.fc-row { cursor: pointer; transition: background .12s ease; }
.fc-row:hover { background: var(--bg-elevated); }

/* Detalle */
.fa-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.fa-header__left { flex: 1; min-width: 280px; }
.fa-header__right { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.fa-back {
  margin: 0 0 var(--space-2);
  font-size: var(--text-small);
}

.fa-back a {
  color: var(--text-tertiary);
  text-decoration: none;
}

.fa-back a:hover { color: var(--text-secondary); }

.fa-title {
  font-size: var(--text-h1);
  font-weight: 500;
  margin: 0 0 var(--space-2);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.fa-title code {
  font-size: var(--text-body);
  color: var(--text-secondary);
  background: var(--bg-elevated);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.fa-meta {
  font-size: var(--text-small);
  color: var(--text-secondary);
  margin: 0;
}

.fa-client-link {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
}
.fa-client-link:hover { color: var(--accent); }

.fa-section {
  margin-bottom: var(--space-8);
}

.fa-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.fa-section__title {
  font-size: var(--text-h3);
  font-weight: 500;
  margin: 0;
  color: var(--text-primary);
}

.fa-items-table .fa-num { text-align: right; white-space: nowrap; }
.fa-items-table .fa-item-num { color: var(--text-tertiary); width: 32px; }

.fa-foot-label {
  text-align: right;
  color: var(--text-secondary);
  font-weight: 400;
  font-size: var(--text-small);
}

.fa-foot-total {
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--text-body);
}

.fa-notes {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: var(--text-small);
  color: var(--text-secondary);
  margin: 0;
  white-space: pre-wrap;
}

.fa-audit {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.fa-audit__item {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-4);
  padding: var(--space-3);
  border-left: 2px solid var(--border-subtle);
}

.fa-audit__time {
  font-size: var(--text-small);
  color: var(--text-tertiary);
}

.fa-audit__body strong { color: var(--text-primary); font-weight: 500; }
.fa-audit__note { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--text-small); }

/* Modal de agregar item — tabs de origen */
.fa-source-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
  scrollbar-width: thin;
}

.fa-source-tab {
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  font-size: var(--text-small);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.fa-source-tab:hover { color: var(--text-primary); }
.fa-source-tab.is-active { color: var(--text-primary); border-bottom-color: var(--accent); }

.fa-shift-preview {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin: var(--space-3) 0;
  font-size: var(--text-small);
}

.fa-shift-preview__row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  color: var(--text-secondary);
}

.fa-shift-preview__total {
  border-top: 1px solid var(--border-subtle);
  margin-top: 4px;
  padding-top: 8px;
  color: var(--text-primary);
}

.fa-shift-preview__err {
  margin: 0;
  color: var(--color-error);
  font-size: var(--text-small);
}

.btn--danger {
  border-color: var(--color-error);
  color: var(--color-error);
}
.btn--danger:hover {
  background: rgba(239, 68, 68, 0.10);
}

@media (max-width: 720px) {
  .fa-header { flex-direction: column; align-items: stretch; }
  .fa-audit__item { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* Envíos programados de factura */
.fa-sched {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.fa-sched__item {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
}

.fa-sched__when strong { color: var(--text-primary); }
.fa-sched__body { color: var(--text-secondary); }

@media (max-width: 640px) {
  .fa-sched__item { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* ==========================================================================
   AUTH PAGES — login / forgot-password / reset-password (split-screen shell)
   ========================================================================== */

body.auth-page {
  margin: 0;
}

.auth-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

.auth-shell__form {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 48px 64px;
  background: var(--bg-canvas);
}

.auth-shell__brand {
  position: relative;
  background-color: var(--bg-surface);
  overflow: hidden;
}

.auth-shell__brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/img/auth-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center;
  will-change: transform;
  animation: auth-bg-zoom 24s ease-in-out infinite;
}

.auth-shell__brand::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10, 10, 11, 0.82) 0%, rgba(10, 10, 11, 0.62) 50%, rgba(10, 10, 11, 0.80) 100%);
  pointer-events: none;
}

@keyframes auth-bg-zoom {
  0%,
  100% { transform: scale(1.02); }
  50%  { transform: scale(1.18); }
}

body.auth-page .sr-only:focus,
body.auth-page .sr-only:focus-visible {
  position: fixed;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  padding: 10px 16px;
  margin: 0;
  clip: auto;
  background: var(--accent);
  color: var(--text-primary);
  border-radius: var(--radius-base);
  font-size: var(--text-small);
  z-index: 1000;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.auth-logo {
  color: var(--text-primary);
  line-height: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.auth-logo img,
.auth-logo svg {
  height: 72px;
  width: auto;
  display: block;
  transform: translateX(-14px);
}

.auth-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.auth-title {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--heading-letter-spacing);
  line-height: var(--lh-h1);
  color: var(--text-primary);
  margin: 0;
}

.auth-subtitle {
  font-size: var(--text-body);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-field__control {
  position: relative;
  display: block;
}

.auth-field__control--pw .auth-field__input {
  padding-right: 48px;
}

.auth-field__control--pw .auth-pw-toggle {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
}

.auth-field__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.auth-field__label {
  font-size: var(--text-label);
  color: var(--text-secondary);
  font-weight: 500;
}

.auth-field__input {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  padding: 14px 16px;
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.auth-field__input::placeholder {
  color: var(--text-tertiary);
}

.auth-field__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12);
}

.auth-pw-toggle {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 0;
  touch-action: manipulation;
  transition: color 150ms ease;
}

.auth-pw-toggle:hover {
  color: var(--text-secondary);
}

.auth-pw-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--accent);
  color: var(--text-primary);
  border: 0;
  border-radius: var(--radius-base);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 500;
  padding: 0 var(--space-5);
  height: 48px;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  touch-action: manipulation;
  transition: background 150ms ease;
}

.auth-btn__label {
  display: inline-block;
}

.auth-btn:hover {
  background: var(--accent-hover);
}

.auth-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.auth-btn:disabled,
.auth-btn[aria-busy="true"] {
  opacity: 0.7;
  cursor: not-allowed;
}

.auth-btn__arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.auth-btn[aria-busy="true"] .auth-btn__arrow {
  display: none;
}

.auth-spinner {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border: 2px solid rgba(250, 250, 250, 0.35);
  border-top-color: var(--text-primary);
  border-radius: 50%;
  animation: auth-spin 0.7s linear infinite;
}

@keyframes auth-spin {
  to { transform: rotate(360deg); }
}

.auth-link {
  background: none;
  border: 0;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-small);
  cursor: pointer;
  text-decoration: none;
  padding: 0;
  transition: color 150ms ease;
}

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

.auth-link--center {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 12px 0;
  text-align: center;
  margin-top: var(--space-1);
  touch-action: manipulation;
}

.auth-error,
.auth-msg {
  border-radius: var(--radius-base);
  padding: 10px 14px;
  font-size: var(--text-small);
  line-height: 1.4;
  display: none;
}

.auth-error {
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: var(--color-error);
}

.auth-msg {
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.25);
  color: var(--color-success);
}

.auth-remember-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.auth-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-small);
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
  min-height: 32px;
}

.auth-checkbox__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.auth-checkbox__box {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.auth-checkbox:hover .auth-checkbox__box {
  border-color: var(--text-secondary);
}

.auth-checkbox__input:focus-visible + .auth-checkbox__box {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12);
}

.auth-checkbox__input:checked + .auth-checkbox__box {
  background: var(--accent);
  border-color: var(--accent);
}

.auth-checkbox__input:checked + .auth-checkbox__box::after {
  content: '';
  width: 10px;
  height: 5px;
  border: 2px solid var(--text-primary);
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg) translate(0, -1px);
}

.auth-totp {
  display: flex;
  gap: 8px;
}

.auth-totp__cell {
  flex: 1 1 0;
  min-width: 0;
  height: 56px;
  text-align: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-base);
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 500;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.auth-totp__cell::-webkit-outer-spin-button,
.auth-totp__cell::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.auth-totp__cell:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12);
}

.auth-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.auth-qr__img {
  /* QR escaneable: blanco literal requerido para contraste con bars negros */
  background: white;
  padding: 12px;
  border-radius: var(--radius-md);
  display: block;
  line-height: 0;
}

.auth-qr__img img {
  display: block;
  width: 180px;
  height: 180px;
}

.auth-qr__placeholder {
  font-size: var(--text-small);
  color: var(--text-tertiary);
  padding: 84px 0;
}

.auth-secret {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.auth-secret__label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.auth-secret__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.08em;
  line-height: 1.4;
  background: var(--bg-elevated);
  color: var(--text-primary);
  padding: 8px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: all;
  word-break: break-all;
  text-align: center;
  transition: border-color 150ms ease, color 150ms ease;
}

.auth-secret__chip:hover {
  border-color: var(--border-strong);
}

.auth-secret__copied {
  font-size: var(--text-xs);
  color: var(--color-success);
  height: 14px;
  opacity: 0;
  transition: opacity 150ms ease;
}

.auth-secret__copied.is-visible {
  opacity: 1;
}

.auth-rules {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--space-1);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 200ms ease, max-height 200ms ease;
}

.auth-rules.is-visible {
  opacity: 1;
  max-height: 240px;
}

.auth-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  transition: color 120ms ease;
}

.auth-rule__icon {
  width: 12px;
  height: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.auth-rule--ok {
  color: var(--color-success);
}

.auth-footer {
  position: absolute;
  bottom: 32px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
  margin: 0;
}

.auth-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-step[hidden] {
  display: none;
}

.auth-step--enter {
  animation: auth-fade-in 150ms ease-out;
}

@keyframes auth-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Mobile — single column, form only */
@media (max-width: 900px) {
  .auth-shell {
    grid-template-columns: 1fr;
  }
  .auth-shell__brand {
    display: none;
  }
  .auth-shell__form {
    padding: 40px 20px 28px;
    justify-content: flex-start;
    gap: 32px;
  }
  .auth-logo img,
  .auth-logo svg {
    height: 56px;
  }
  .auth-card {
    max-width: none;
  }
  .auth-field__input,
  .auth-btn {
    height: 48px;
  }
  .auth-totp {
    gap: 6px;
  }
  .auth-totp__cell {
    height: 48px;
    font-size: 18px;
  }
}

/* Mobile XS — iPhone SE and small Android */
@media (max-width: 400px) {
  .auth-shell__form {
    padding: 32px 16px 24px;
  }
  .auth-totp {
    gap: 4px;
  }
  .auth-totp__cell {
    height: 44px;
    font-size: 16px;
  }
}

/* Keyboard focus polish — visible ring on any interactive element using a
   real keyboard, never on mouse click. Uses the focus-visible pseudo-class. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.nav-item:focus-visible,
.drawer__close:focus-visible,
.modal-close:focus-visible,
.sidebar-collapse-btn:focus-visible,
.tb__icon-btn:focus-visible,
.tb__avatar-wrap:focus-visible,
.tb-popover__item:focus-visible,
.nav-group__header:focus-visible {
  outline-offset: 0;
}

/* ─── Tickets v2 — iteración rediseño Tickets (KPI filters, prio chips, SLA bar) ─── */

/* KPI cards como botones de filtro accionables. Mantienen el look base de las KPIs
   originales y suman estado activo (border accent + bg). */
.tickets-v2__kpi--filter {
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.tickets-v2__kpi--filter:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(24, 24, 27, 0.65);
}
.tickets-v2__kpi--filter:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}
/* Estado activo neutro: el énfasis viene del contraste con el bg-tertiary y el
   border más definido, no del rose. Evitamos el carnaval cuando varios filtros
   están activos simultáneamente (KPIs + chips + tab + Nuevo ticket). */
.tickets-v2__kpi--filter.is-active {
  border-color: var(--border-strong);
  background: var(--bg-tertiary);
}
.tickets-v2__kpi--filter.is-active .tickets-v2__kpi-label {
  color: var(--text-primary);
}
.tickets-v2__kpi-value--error { color: var(--color-error); }
/* Si el KPI de "SLA vencido" está activo, no apilamos dos rojos en la misma card. */
.tickets-v2__kpi--filter.is-active .tickets-v2__kpi-value--error {
  color: var(--text-primary);
}

/* Quick priority chips */
.tickets-v2__priority-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.tickets-v2__priority-chips:empty { display: none; margin: 0; }
.tickets-v2__prio-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-label);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
  /* Reuse existing token-driven padding from .badge/.chip family — no new spacing introduced. */
}
.tickets-v2__prio-chip { padding: 4px 10px; }
.tickets-v2__prio-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--chip-dot, var(--text-tertiary));
  flex-shrink: 0;
}
.tickets-v2__prio-chip:hover {
  color: var(--text-primary);
  border-color: var(--text-secondary);
}
.tickets-v2__prio-chip:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}
.tickets-v2__prio-chip.is-active {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: var(--bg-tertiary);
}

/* Asignado: columna sin avatar, solo el indicador del email. Tabular numerics +
   ellipsis para mantener anchos compactos. */
.tickets-v2__assignee--indicator {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-small);
  color: var(--text-primary);
}

/* SLA pill en lista — patrón Linear/Stripe. Dot + tiempo, sin barra (la barra se
   reserva para el header del detalle donde hay espacio). */
.tickets-v2__sla-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-size: var(--text-label);
  font-variant-numeric: tabular-nums;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  white-space: nowrap;
}
.tickets-v2__sla-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--text-tertiary);
  flex-shrink: 0;
}
.tickets-v2__sla--ok .tickets-v2__sla-pill-dot { background: var(--color-success); }
.tickets-v2__sla--ok .tickets-v2__sla-pill {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.25);
  color: var(--color-success);
}
.tickets-v2__sla--warn .tickets-v2__sla-pill-dot { background: var(--color-warning); }
.tickets-v2__sla--warn .tickets-v2__sla-pill {
  background: rgba(234, 179, 8, 0.10);
  border-color: rgba(234, 179, 8, 0.30);
  color: var(--color-warning);
}
.tickets-v2__sla--breach .tickets-v2__sla-pill-dot { background: var(--color-error); }
.tickets-v2__sla--breach .tickets-v2__sla-pill {
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.30);
  color: var(--color-error);
}
.tickets-v2__sla--closed .tickets-v2__sla-pill {
  background: var(--bg-tertiary);
  border-color: var(--border-subtle);
  color: var(--text-tertiary);
  opacity: 0.6;
}

/* SLA progress bar legacy (sla-bar) — mantengo por compatibilidad si otro lugar la usa. */
.sla-bar {
  display: inline-block;
  width: 56px;
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  vertical-align: middle;
  flex-shrink: 0;
}
.sla-bar__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--text-tertiary);
  transition: width var(--transition-normal);
}
.sla-bar--ok .sla-bar__fill { background: var(--color-success); }
.sla-bar--warn .sla-bar__fill { background: var(--color-warning); }
.sla-bar--breach .sla-bar__fill { background: var(--color-error); }
.sla-bar--closed .sla-bar__fill { background: var(--text-secondary); opacity: 0.4; }

/* ─── SLA "health bar" estilo videogame (lista de tickets) ────────────────── */
/* Layout: texto encima (mono, tabular) + barra debajo. La barra se va vaciando
   conforme avanza el tiempo. Color shifts según vida restante. */
.sla-life {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  min-width: 72px;
  max-width: 100%;
}
.sla-life__head {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1;
}
.sla-life__head .sla-hourglass {
  flex-shrink: 0;
  opacity: 0.85;
}
.sla-life__text {
  font-size: var(--text-label);
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
  color: var(--text-secondary);
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
}
.sla-life__bar {
  position: relative;
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  box-sizing: border-box;
}
.sla-life__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--text-tertiary);
  transition: width 600ms ease-out, background 400ms ease-out;
  box-shadow: 0 0 6px currentColor;
  color: var(--text-tertiary);
}
.tickets-v2__sla--ok .sla-life__fill {
  background: linear-gradient(90deg, var(--color-success-dark) 0%, var(--color-success) 100%);
  color: rgba(34, 197, 94, 0.55);
}
.tickets-v2__sla--ok .sla-life__text { color: var(--color-success); }
.tickets-v2__sla--warn .sla-life__fill {
  background: linear-gradient(90deg, var(--color-warning-dark) 0%, var(--color-warning) 100%);
  color: rgba(234, 179, 8, 0.55);
}
.tickets-v2__sla--warn .sla-life__text { color: var(--color-warning); }
.tickets-v2__sla--breach .sla-life__fill {
  background: linear-gradient(90deg, var(--color-error-dark) 0%, var(--color-error) 100%);
  color: rgba(239, 68, 68, 0.65);
  animation: sla-life-pulse 1.6s ease-in-out infinite;
}
.tickets-v2__sla--breach .sla-life__text {
  color: var(--color-error);
  font-weight: 500;
}
.tickets-v2__sla--closed .sla-life__fill {
  background: var(--text-tertiary);
  opacity: 0.3;
  box-shadow: none;
}
.tickets-v2__sla--closed .sla-life__text { opacity: 0.5; }

@keyframes sla-life-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px currentColor; }
  50%      { opacity: 0.72; box-shadow: 0 0 10px currentColor; }
}

/* ─── SLA countdown (header detalle) — vivo: barra de vida + dd HH:MM ────── */
.sla-countdown {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 10px;
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  font-variant-numeric: tabular-nums;
}
.sla-countdown .sla-hourglass {
  flex-shrink: 0;
  opacity: 0.9;
}
.sla-countdown--breach .sla-hourglass {
  animation: sla-hourglass-shake 2s ease-in-out infinite;
}
@keyframes sla-hourglass-shake {
  0%, 100% { transform: rotate(0deg); }
  45%      { transform: rotate(0deg); }
  50%      { transform: rotate(180deg); }
  95%      { transform: rotate(180deg); }
}
.sla-countdown__bar {
  position: relative;
  width: 64px;
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  flex-shrink: 0;
}
.sla-countdown__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--text-tertiary);
  transition: width 600ms ease-out, background 400ms ease-out;
  box-shadow: 0 0 6px currentColor;
  color: var(--text-tertiary);
}
.sla-countdown__text {
  font-size: var(--text-body);
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  line-height: 1;
}
.sla-countdown--ok {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.25);
}
.sla-countdown--ok .sla-countdown__fill {
  background: linear-gradient(90deg, var(--color-success-dark) 0%, var(--color-success) 100%);
  color: rgba(34, 197, 94, 0.55);
}
.sla-countdown--ok .sla-countdown__text { color: var(--color-success); }
.sla-countdown--warn {
  background: rgba(234, 179, 8, 0.10);
  border-color: rgba(234, 179, 8, 0.30);
}
.sla-countdown--warn .sla-countdown__fill {
  background: linear-gradient(90deg, var(--color-warning-dark) 0%, var(--color-warning) 100%);
  color: rgba(234, 179, 8, 0.55);
}
.sla-countdown--warn .sla-countdown__text { color: var(--color-warning); }
.sla-countdown--breach {
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.35);
}
.sla-countdown--breach .sla-countdown__fill {
  background: linear-gradient(90deg, var(--color-error-dark) 0%, var(--color-error) 100%);
  color: rgba(239, 68, 68, 0.65);
  animation: sla-life-pulse 1.6s ease-in-out infinite;
}
.sla-countdown--breach .sla-countdown__text {
  color: var(--color-error);
  font-weight: 500;
}
.sla-countdown--closed {
  opacity: 0.6;
}

/* Dropdown items: separador + variante destructiva (delete ticket). */
.tickets-v2__dropdown-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 4px 0;
}
.tickets-v2__dropdown-item--danger {
  color: var(--color-error);
}
.tickets-v2__dropdown-item--danger:hover {
  background: rgba(239, 68, 68, 0.08);
}

/* Delete confirmation modal — usa el modal-overlay/modal--form existente, solo
   ajusta el color del header y el botón submit cuando habilitado. */
.modal--danger .modal-title {
  color: var(--color-error);
}
.tk-delete-warning {
  font-size: var(--text-small);
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 12px;
}
.tk-delete-warning strong {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}
#tk-delete-submit:not(:disabled) {
  background: var(--color-error);
  border-color: var(--color-error);
  color: var(--color-on-accent);
}
#tk-delete-submit:not(:disabled):hover {
  filter: brightness(1.1);
}

/* ─── Ticket detail v2 — iteración rediseño Tickets ─── */

/* Breadcrumb: RTK# bold + más grande (referencia visual fuerte) · cliente · cust_id.
   Sin pills. Cliente y cust_id son texto sutil con underline en hover; ambos
   linkean a la ficha del cliente. */
.ticket-detail-v2__breadcrumb {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--text-secondary);
  flex-wrap: wrap;
}
.ticket-detail-v2__crumb-num {
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color var(--transition-fast);
  padding: 0;
  background: transparent;
  border: none;
}
.ticket-detail-v2__crumb-num:hover {
  color: var(--accent);
}
.ticket-detail-v2__crumb-sep {
  color: var(--text-tertiary);
  user-select: none;
  font-size: var(--text-small);
}
.ticket-detail-v2__crumb-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
.ticket-detail-v2__crumb-link:hover {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--text-tertiary);
}
.ticket-detail-v2__crumb-link--mono {
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
}
.ticket-detail-v2__crumb-link--empty {
  color: var(--text-tertiary);
  font-style: italic;
  cursor: default;
}
.ticket-detail-v2__crumb-link--empty:hover {
  color: var(--text-tertiary);
  text-decoration: none;
}

/* Título del ticket — al tier visual del page-header canonical. */
.ticket-detail-v2__title {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-h1);
  letter-spacing: var(--heading-letter-spacing);
  color: var(--text-primary);
  margin: 0;
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
@media (max-width: 720px) {
  .ticket-detail-v2__title { font-size: var(--text-h2); }
}
/* Input de edición de título: mismo tamaño y peso que el título display. Solo
   el border accent y el padding revelan que es editable. */
.ticket-detail-v2__title-input {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-h1);
  letter-spacing: var(--heading-letter-spacing);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
}
@media (max-width: 720px) {
  .ticket-detail-v2__title-input { font-size: var(--text-h2); }
}
.ticket-detail-v2__title-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.ticket-detail-v2__badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* SLA pill en el header del detalle (mismo patrón que la lista, consistencia). */
.ticket-detail-v2__sla-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-label);
  font-variant-numeric: tabular-nums;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  white-space: nowrap;
}
.ticket-detail-v2__sla-pill--ok {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.25);
  color: var(--color-success);
}
.ticket-detail-v2__sla-pill--ok .tickets-v2__sla-pill-dot { background: var(--color-success); }
.ticket-detail-v2__sla-pill--warn {
  background: rgba(234, 179, 8, 0.10);
  border-color: rgba(234, 179, 8, 0.30);
  color: var(--color-warning);
}
.ticket-detail-v2__sla-pill--warn .tickets-v2__sla-pill-dot { background: var(--color-warning); }
.ticket-detail-v2__sla-pill--breach {
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.30);
  color: var(--color-error);
}
.ticket-detail-v2__sla-pill--breach .tickets-v2__sla-pill-dot { background: var(--color-error); }
.ticket-detail-v2__sla-pill--closed {
  color: var(--text-tertiary);
  opacity: 0.7;
}
.ticket-detail-v2__sla-pill--closed .tickets-v2__sla-pill-dot {
  background: var(--text-tertiary);
}

/* Panel de detalles con base gráfica (card visual). El padding interno aquí es
   inherente al card nuevo — sin él, las 3 columnas tocan los bordes y la card se
   ve rota. No es una recalibración del spacing existente, es spacing nativo del
   componente nuevo. */
.ticket-detail-v2__info {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 4px 0 0;
  box-sizing: border-box;
  width: 100%;
}

/* Header del card de conversación: título + CTA "Agregar comentario" como primary action. */
.ticket-detail-v2__conv-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ticket-detail-v2__conv-title > span:first-child {
  font-size: var(--text-small);
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
}
/* CTA Agregar comentario promovido a primary (más visible que el outline tenue). */
.ticket-detail-v2__add-comment-btn {
  margin-left: auto;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--color-on-accent);
  font-weight: var(--weight-medium);
}
.ticket-detail-v2__add-comment-btn:hover {
  background: var(--accent-strong, var(--accent));
  border-color: var(--accent-strong, var(--accent));
  color: var(--color-on-accent);
  filter: brightness(1.06);
}

/* Toggle de orden del feed de Conversación (más recientes ↔ más antiguos). */
.tkd-feed-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: var(--weight-medium);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.tkd-feed-sort:hover {
  background: rgba(255,255,255,0.04);
  color: var(--text-primary);
  border-color: var(--text-tertiary);
}
.tkd-feed-sort svg { display: block; flex: 0 0 auto; }

/* Comentarios: grid 200px / 1fr + background translúcido sutil. Padding/gap
   conservan los valores previos del inline style — solo bg + border son nuevos. */
.ticket-detail-v2__comment {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 18px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
}
@media (max-width: 720px) {
  .ticket-detail-v2__comment { grid-template-columns: 1fr; gap: 12px; }
}

/* Segmented control Interno / Al cliente — sliding thumb pattern (iOS).
   El estado activo vive en el container (data-active="internal|client"). El thumb
   lee de ahí — eso garantiza que CSS aplique transitions correctamente. */
.tkd-segmented {
  position: relative;
  display: inline-flex;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 3px;
  gap: 0;
  isolation: isolate;
}
.tkd-segmented__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  bottom: 3px;
  width: calc(50% - 3px);
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  transition:
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.tkd-segmented[data-active="internal"] .tkd-segmented__thumb {
  transform: translateX(0);
  background: var(--bg-secondary);
  border-color: var(--border-subtle);
}
.tkd-segmented[data-active="client"] .tkd-segmented__thumb {
  transform: translateX(100%);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 1px 6px rgba(225, 29, 72, 0.25);
}
.tkd-segmented__opt {
  position: relative;
  z-index: 1;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  cursor: pointer;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
  min-width: 100px;
  justify-content: center;
  width: 50%;
}
.tkd-segmented[data-active="internal"] .tkd-segmented__opt[data-ctype="internal"] { color: var(--text-primary); }
.tkd-segmented[data-active="client"] .tkd-segmented__opt[data-ctype="client"] { color: var(--color-on-accent); }
.tkd-segmented__opt:hover { color: var(--text-primary); }
.tkd-segmented__opt:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.tkd-segmented__opt svg { flex-shrink: 0; opacity: 0.9; }

/* Banner aviso "Al cliente" inline en el header del card de conversación.
   Variante inline: chip compacto de 1 línea, no afecta el flow ni redimensiona el editor. */
.tkd-client-warning {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin: 0;
  font-size: var(--text-label);
  color: var(--text-secondary);
  opacity: 0;
  transition: opacity var(--transition-normal);
}
.tkd-client-warning.is-visible {
  display: inline-flex;
  opacity: 1;
}
.tkd-client-warning--inline {
  padding: 3px 10px;
  background: rgba(225, 29, 72, 0.08);
  border: 1px solid rgba(225, 29, 72, 0.22);
  border-radius: var(--radius-full);
  white-space: nowrap;
  margin-left: 8px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tkd-client-warning strong {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.tkd-client-warning svg {
  flex-shrink: 0;
  color: var(--accent);
}
.tkd-client-warning--missing {
  background: rgba(234, 179, 8, 0.08);
  border-color: rgba(234, 179, 8, 0.30);
}
.tkd-client-warning--missing svg { color: var(--color-warning); }

/* Email del autor en comentarios — más contraste para legibilidad. */
.tkd-comment-email {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
  margin-top: 2px;
  letter-spacing: 0.01em;
  word-break: break-all;
}

/* Botón enviar: paper plane con micro-animación. */
.tkd-send {
  position: relative;
  overflow: hidden;
}
.tkd-send__plane {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.tkd-send:hover .tkd-send__plane {
  transform: translate(1px, -1px) rotate(-8deg);
}
.tkd-send.is-flying .tkd-send__plane {
  animation: tkdSendFly 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes tkdSendFly {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  40%  { transform: translate(18px, -18px) rotate(-12deg); opacity: 0.85; }
  60%  { transform: translate(28px, -28px) rotate(-12deg); opacity: 0; }
  61%  { transform: translate(-22px, 22px) rotate(-12deg); opacity: 0; }
  100% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
}

/* Flash toast verde premium — confirmación positiva flotante. */
.tkd-flash {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translate(-50%, 12px) scale(0.96);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  background: rgba(20, 22, 24, 0.92);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: var(--radius-full);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(34, 197, 94, 0.12) inset;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  transition: opacity 0.32s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.tkd-flash.is-visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.tkd-flash.is-leaving {
  opacity: 0;
  transform: translate(-50%, -8px) scale(0.98);
  transition: opacity 0.28s ease, transform 0.34s ease;
}
.tkd-flash__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-success);
  color: var(--bg-canvas);
  flex-shrink: 0;
}
.tkd-flash__text { letter-spacing: 0.005em; }

/* Cliente — sección Tickets del cliente: métricas + tabla. */
.cl-tickets-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.cl-tickets-metric {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cl-tickets-metric__value {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.cl-tickets-metric__label {
  font-size: var(--text-label);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
}
.cl-tickets-table { width: 100%; }
.cl-ticket-row__num {
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  text-decoration: none;
}
.cl-ticket-row__num:hover { color: var(--accent); }
.cl-ticket-row__title { color: var(--text-primary); }
.cl-ticket-row__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-label);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}
.cl-ticket-row__status--abierto { color: var(--accent-indigo); }
.cl-ticket-row__status--en_progreso { color: var(--color-warning); }
.cl-ticket-row__status--esperando_cliente { color: var(--text-secondary); }
.cl-ticket-row__status--resuelto { color: var(--color-success); }
.cl-ticket-row__status--cerrado { color: var(--text-tertiary); }
.cl-ticket-row__priority {
  font-size: var(--text-label);
  color: var(--text-secondary);
}
.cl-ticket-row__hours {
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.cl-ticket-row__assignee {
  font-size: var(--text-small);
  color: var(--text-secondary);
}
.cl-ticket-row__when {
  font-size: var(--text-label);
  color: var(--text-tertiary);
  white-space: nowrap;
}
.cl-tickets-empty {
  background: var(--bg-secondary);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.cl-tickets-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* ─── REMOS Number Stepper (Horas / Minutos) ─── */
.rms-stepper {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  width: 100%;
  max-width: 110px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.rms-stepper:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12);
}
.rms-stepper input[type="number"] {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  padding: 8px 10px;
  text-align: center;
  outline: none;
  /* Hide spinners */
  -moz-appearance: textfield;
  appearance: textfield;
}
.rms-stepper input[type="number"]::-webkit-outer-spin-button,
.rms-stepper input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.rms-stepper__btns {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border-subtle);
}
.rms-stepper__btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0 8px;
  font-size: 9px;
  line-height: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.rms-stepper__btn:hover { color: var(--accent); background: rgba(225, 29, 72, 0.08); }
.rms-stepper__btn:active { background: rgba(225, 29, 72, 0.15); }
.rms-stepper__btn + .rms-stepper__btn { border-top: 1px solid var(--border-subtle); }

/* ─── REMOS Date Picker ─── */
.rms-datepicker {
  position: relative;
  width: 100%;
}
.rms-datepicker__input {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.rms-datepicker__input:hover { border-color: var(--text-tertiary); }
.rms-datepicker.is-open .rms-datepicker__input {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12);
}
.rms-datepicker__input svg { color: var(--text-secondary); flex-shrink: 0; }
.rms-datepicker__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1100;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  padding: 14px;
  min-width: 280px;
  animation: rmsDatepickerIn 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes rmsDatepickerIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rms-datepicker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.rms-datepicker__nav {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.rms-datepicker__nav:hover { color: var(--accent); background: var(--bg-tertiary); }
.rms-datepicker__title {
  font-family: var(--font-heading);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.rms-datepicker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}
.rms-datepicker__wd {
  font-size: 10px;
  color: var(--text-tertiary);
  text-align: center;
  letter-spacing: 0.04em;
  padding: 4px 0;
}
.rms-datepicker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.rms-datepicker__day {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-regular);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  padding: 6px 0;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.rms-datepicker__day:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.rms-datepicker__day--out { color: var(--text-tertiary); opacity: 0.5; }
.rms-datepicker__day--today {
  color: var(--accent);
  border-color: rgba(225, 29, 72, 0.25);
}
.rms-datepicker__day--selected {
  background: var(--accent);
  color: var(--color-on-accent);
  font-weight: var(--weight-semibold);
}
.rms-datepicker__day--selected:hover { background: var(--accent); }

/* ─── Timer modal: layout más respirado y selects/inputs REMOS ─── */
.tk-timer-modal__row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
.tk-timer-modal__row--duration { max-width: 260px; }
.tk-timer-modal__field--grow { flex: 1; min-width: 0; }
.tk-timer-modal__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--bg-tertiary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding: 8px 30px 8px 12px;
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-md);
  width: 100%;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.tk-timer-modal__select:hover { border-color: var(--text-tertiary); }
.tk-timer-modal__select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12);
}

/* ─── Login biométrico (WebAuthn) ─── */
.auth-biometric {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auth-biometric__sep {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-tertiary);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.auth-biometric__sep::before,
.auth-biometric__sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}
.auth-btn--secondary {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
}
.auth-btn--secondary:hover {
  background: var(--bg-tertiary);
  border-color: var(--text-tertiary);
}
.auth-btn--secondary .auth-btn__label {
  font-weight: var(--weight-medium);
}
.auth-biometric__icon {
  margin-right: 8px;
  flex-shrink: 0;
}
.auth-biometric__hint {
  font-size: var(--text-label);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.45;
  text-align: center;
}
.auth-biometric__hint--error { color: var(--color-warning); }

/* ─── Estado como pill editable en el panel info ─── */
/* El select queda transparente y el wrap visual se renderiza como pill tonal,
   basado en el data-status del select. Tipografía y peso del status priorizan
   lectura sobre edición — el chevron del select indica que es editable. */
.ticket-detail-v2__info-col select.tkd-status-pill {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--bg-tertiary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  border-radius: var(--radius-full);
  padding: 3px 22px 3px 10px;
  min-height: 0;
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.ticket-detail-v2__info-col select.tkd-status-pill:hover { border-color: var(--text-tertiary); }
.ticket-detail-v2__info-col select.tkd-status-pill:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12);
}
/* Colores tonales por status */
.tkd-status-pill[data-status="abierto"]      { background-color: rgba(99, 102, 241, 0.10); border-color: rgba(99, 102, 241, 0.30); color: var(--accent-indigo); }
.tkd-status-pill[data-status="en_progreso"]  { background-color: rgba(234, 179, 8, 0.10);  border-color: rgba(234, 179, 8, 0.30);  color: var(--color-warning); }
.tkd-status-pill[data-status="esperando_cliente"] { background-color: rgba(192, 132, 252, 0.10); border-color: rgba(192, 132, 252, 0.30); color: var(--color-purple); }
.tkd-status-pill[data-status="resuelto"]     { background-color: rgba(34, 197, 94, 0.10);  border-color: rgba(34, 197, 94, 0.30);  color: var(--color-success); }
.tkd-status-pill[data-status="cerrado"]      { background-color: rgba(113, 113, 122, 0.15); border-color: rgba(113, 113, 122, 0.35); color: var(--text-tertiary); }

/* info-row full-width: para el preview de la nota de resolución que necesita
   romper el grid label/valor. */
.ticket-detail-v2__info-row--full {
  display: block;
  grid-template-columns: none;
  padding: 4px 0 0;
}
.ticket-detail-v2__info-row--full > * { width: 100%; }

/* ─── CC emails (chips estilo email) ─── */
.tkd-cc-row {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-top: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.015);
  flex-wrap: wrap;
}
.tkd-cc-row[data-active="1"] { display: flex; }
.tkd-cc-row__label {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  letter-spacing: 0.08em;
}
.tkd-cc-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.tkd-cc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 9px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-size: var(--text-label);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.tkd-cc-chip__x {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 5px;
  border-radius: var(--radius-full);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.tkd-cc-chip__x:hover { color: var(--accent); background: rgba(225, 29, 72, 0.10); }
.tkd-cc-input {
  flex: 1;
  min-width: 160px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-label);
  padding: 4px 0;
  outline: none;
}
.tkd-cc-input::placeholder { color: var(--text-tertiary); }

/* ─── Resolución como comentario (toggle + badge verified + preview) ─── */

/* Toggle row dentro del editor — debajo del footer. */
.tkd-resolution {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--border-subtle);
  background: rgba(34, 197, 94, 0.02);
  flex-wrap: wrap;
  transition: background var(--transition-normal);
}
.tkd-resolution.is-active {
  background: rgba(34, 197, 94, 0.06);
}
.tkd-resolution__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  transition: color var(--transition-fast);
}
.tkd-resolution__toggle:hover { color: var(--text-primary); }
.tkd-resolution__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  background: transparent;
  color: transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.tkd-resolution.is-active .tkd-resolution__check {
  background: var(--color-success);
  border-color: var(--color-success);
  color: var(--bg-canvas);
}
.tkd-resolution.is-active .tkd-resolution__toggle { color: var(--color-success); }
.tkd-resolution.is-active .tkd-resolution__label {
  font-weight: var(--weight-semibold);
}
.tkd-resolution__type {
  flex: 1;
  min-width: 180px;
  max-width: 260px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--bg-tertiary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2322C55E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding: 6px 30px 6px 12px;
  border: 1px solid rgba(34, 197, 94, 0.30);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-small);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.tkd-resolution__type:hover { border-color: rgba(34, 197, 94, 0.45); }
.tkd-resolution__type:focus {
  outline: none;
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

/* Badge verified en comentarios marcados como nota de resolución. */
.tkd-resolution-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: var(--radius-full);
  font-size: var(--text-label);
  color: var(--color-success);
  letter-spacing: 0.01em;
  align-self: flex-start;
  font-weight: var(--weight-medium);
}
.tkd-resolution-badge strong {
  color: var(--color-success);
  font-weight: var(--weight-semibold);
}
.tkd-resolution-badge__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background: var(--color-success);
  color: var(--bg-canvas);
  flex-shrink: 0;
}

/* Comentario marcado como resolución: borde lateral verde sutil para destacarlo. */
.ticket-detail-v2__comment--resolution {
  border-left: 3px solid var(--color-success);
  background: rgba(34, 197, 94, 0.03);
}

/* MOCK badge para campos pendientes de cableado funcional. */
.tkd-mock-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: rgba(234, 179, 8, 0.15);
  color: var(--color-warning);
  margin-left: 6px;
  vertical-align: 1px;
}

/* Acción "Eliminar ticket" en el header del detalle. */
.ticket-detail-v2__action--danger {
  color: var(--text-secondary);
  border-color: var(--border-subtle);
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.ticket-detail-v2__action--danger:hover {
  color: var(--color-error);
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.08);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .auth-step--enter,
  .auth-spinner,
  .auth-field__input,
  .auth-btn,
  .auth-link,
  .auth-rules,
  .auth-rule,
  .auth-secret__copied,
  .auth-secret__chip,
  .auth-pw-toggle {
    animation: none !important;
    transition: none !important;
  }
  .auth-shell__brand::before {
    animation: none;
    transform: scale(1.05);
  }
}

/* ── Global reduced motion coverage ─────────────────────────
   Catches every motion primitive introduced after the auth
   block: skeletons, drawer, modal, sidebar collapse, nav-group
   expand, page transitions, card hovers, dropdowns, toasts. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .skeleton::after {
    animation: none !important;
    background: var(--skeleton-highlight);
  }
  .modal,
  .drawer {
    transform: none !important;
  }
  .auth-shell__brand::before {
    animation: none !important;
    transform: scale(1.05);
  }
}

/* ===========================================================================
   Cliente detail — Prop B (réplica patrón dashboard):
   page-header + dash-kpis + dash-section tabs + secciones planas por tab.
   Cero card-en-card en el flow principal.
   Hereda layout natural de .main-content (no sticky hero, no aside).
   =========================================================================== */

/* Ambient accent — refuerza glow accent en zona central donde los blobs del
   body se desvanecen. background-attachment: fixed mantiene el wash al scroll. */
.main-content:has(#cl-detail-page) {
  background:
    radial-gradient(ellipse 70% 55% at 80% 20%, var(--ambient-glow-warm), transparent 60%),
    radial-gradient(ellipse 50% 40% at 15% 85%, var(--ambient-glow-cool), transparent 65%);
  background-attachment: fixed;
}

/* Panel system — un panel visible por tab.
   Animación de entrada: fade + slide sutil para que el cambio de tab se sienta
   fluido en vez de un corte abrupto. */
.cl-tab-panel { display: none; }
.cl-tab-panel--active,
.cl-tab-panel.is-active {
  display: block;
  animation: cl-tab-enter var(--dur-slow) var(--ease-out);
}

@keyframes cl-tab-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Tabs underline fluidas en el cliente.
   En vez de animar el border-bottom-color de cada tab, una franja accent
   absoluta (.cl-tabs__indicator) se desliza entre tabs con transition cubic-bezier
   suave para feel 120fps. El border-bottom de cada tab queda transparent. */
#cl-detail-page .bc-tab {
  transition: color var(--dur-base) var(--ease-out);
  border-bottom-color: transparent;
}
#cl-detail-page .bc-tab.is-active {
  border-bottom-color: transparent;
}

.cl-tabs-wrap {
  position: relative;
  overflow-y: hidden;   /* el indicator absoluto no debe disparar scroll vertical */
}
.cl-tabs-wrap::-webkit-scrollbar { display: none; }
.cl-tabs-wrap { scrollbar-width: none; }

.cl-tabs__indicator {
  position: absolute;
  bottom: -1px;             /* superpone el border-bottom del .bc-tabs */
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  pointer-events: none;
  opacity: 0;
  will-change: transform, width;
  transform: translateX(0);
  /* Slide fluido — cubic-bezier estilo Linear/Vercel, easing perceptible.
     Width y transform animan a la vez para que la franja "se deslice" entre tabs. */
  transition:
    transform 360ms cubic-bezier(0.32, 0.72, 0, 1),
    width 360ms cubic-bezier(0.32, 0.72, 0, 1),
    opacity 200ms ease-out;
}
.cl-tabs__indicator.is-ready { opacity: 1; }

/* Body de la sección colapsable también respeta el fade al expandir,
   para que el toggle se sienta consistente con el cambio de tab. */
.dash-section--collapsible:not(.is-collapsed) > .dash-section__body {
  animation: cl-tab-enter var(--dur-base) var(--ease-out);
}

/* Banner del cliente — reusa el header del ticket con su línea sutil debajo.
   Margen abajo suficiente para separarlo del KPI strip. */
.cl-banner {
  margin-bottom: var(--space-6);
}

/* Wrapper de tabs underline en el cliente — spacing extra arriba para separar del KPI strip. */
.cl-tabs-wrap { margin-top: var(--space-4); }

/* Cards casi transparentes en el cliente — alpha sutil del glass-toolbar
   para que se sienta el ambient detrás. Aplica solo dentro de #cl-detail-page. */
#cl-detail-page .dash-kpi,
#cl-detail-page .cl-summary-card {
  background: var(--glass-toolbar-bg);
  border-color: var(--glass-toolbar-border);
  backdrop-filter: var(--blur-sm) var(--glass-saturate);
  -webkit-backdrop-filter: var(--blur-sm) var(--glass-saturate);
}
#cl-detail-page .dash-kpi:hover,
#cl-detail-page .cl-summary-card:hover {
  background: var(--glass-toolbar-hover);
  border-color: var(--border-strong);
}

/* F4 — Contactos lista editorial (visual-design-lead v2).
   Sin avatar, sin background. Dot semántico 8px + nombre body semibold +
   cargo inline con "·" + email/phone Inter regular small. Acciones colapsadas
   en overflow menu (⋯). Border-bottom como único separador. */
.cl-contact-list,
.cl-canales-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Contactos + canales: card glass translúcida (mismo lenguaje que las notas).
   Avatar circular con iniciales a la izquierda — color HSL derivado del nombre. */
.cl-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  flex-shrink: 0;
  user-select: none;
}
.cl-avatar--square {
  border-radius: 10px;
}

.cl-contact-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  backdrop-filter: blur(10px);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.cl-contact-row:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.10);
}
.cl-contact-row--principal {
  border-color: rgba(225, 29, 72, 0.30);
  background: rgba(225, 29, 72, 0.05);
}
.cl-contact-row__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cl-contact-row__heading {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.cl-contact-row__name {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.cl-contact-row__cargo {
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
}
.cl-contact-row__sep {
  color: var(--text-tertiary);
  margin: 0 4px;
}
.cl-contact-row__badge {
  font-size: var(--text-label);
  padding: 1px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}
.cl-contact-row__contacts {
  font-size: var(--text-small);
  color: var(--text-secondary);
}
.cl-contact-row__link {
  color: var(--text-secondary);
  text-decoration: none;
}
.cl-contact-row__link:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

/* Botones de acción icon-only en headers de sección (Editar lápiz, Agregar +) */
.cl-section-edit,
.cl-section-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.cl-section-edit:hover,
.cl-section-add:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.14);
}

/* Overflow ⋯ button — discreto, hover bg-tertiary */
.cl-overflow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.cl-overflow-btn:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

/* Pop menu contextual del overflow (contactos / canales) */
.cl-popmenu {
  background: var(--glass-panel-bg);
  backdrop-filter: var(--blur-lg) var(--glass-saturate);
  -webkit-backdrop-filter: var(--blur-lg) var(--glass-saturate);
  border: 1px solid var(--glass-toolbar-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  min-width: 180px;
  z-index: var(--z-popover);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cl-popmenu__item {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: var(--text-small);
  font-family: var(--font-body);
  padding: 8px 12px;
  text-align: left;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.cl-popmenu__item:hover {
  background: var(--bg-tertiary);
}
.cl-popmenu__item--danger {
  color: var(--color-error);
}
.cl-popmenu__item--danger:hover {
  background: rgba(225, 29, 72, 0.10);
}

/* Icon buttons compactos para acciones inline */
.cl-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.cl-icon-btn:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}
.cl-icon-btn--danger:hover {
  color: var(--color-error);
}

/* Card de canal: glass translúcida + avatar a la izquierda + main + acciones */
.cl-canal-card {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  backdrop-filter: blur(10px);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.cl-canal-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.10);
}
.cl-canal-card--inactivo {
  opacity: 0.5;
}
.cl-canal-card__heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.cl-canal-card__dept-label {
  font-size: 10px;
  text-transform: lowercase;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}
.cl-canal-card__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cl-canal-card__headline {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: 0;
}
.cl-canal-card__emails {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: var(--text-small);
}
.cl-canal-card__email {
  color: var(--text-primary);
}
.cl-canal-card__email:hover {
  text-decoration: underline;
}
.cl-canal-card__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Toggle switch nativo del DS */
.cl-toggle {
  position: relative;
  width: 32px;
  height: 18px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.cl-toggle__track {
  display: block;
  width: 32px;
  height: 18px;
  background: var(--border-strong);
  border-radius: 9px;
  position: relative;
  transition: background var(--transition-fast);
}
.cl-toggle__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--text-primary);
  border-radius: 50%;
  transition: transform var(--transition-fast);
}
.cl-toggle--on .cl-toggle__track {
  background: var(--accent);
}
.cl-toggle--on .cl-toggle__track::after {
  transform: translateX(14px);
}

/* Notas con autor + tipo + fecha (formato profesional similar a tickets) */
/* Thread de notas — estilo bubble alineado con ticket-detail-v2.
   Cada nota = una burbuja translúcida con meta inline (tipo · fecha · autor). */
.cl-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--space-5);
  padding: 4px 0;
}
.cl-note {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 88%;
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px 14px 14px 4px;
  padding: 10px 14px;
  backdrop-filter: blur(8px);
}
.cl-note--mine {
  align-self: flex-end;
  background: rgba(225, 29, 72, 0.08);
  border-color: rgba(225, 29, 72, 0.28);
  border-radius: 14px 14px 4px 14px;
}
.cl-note__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  color: var(--text-secondary);
}
.cl-note__type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  background: var(--bg-tertiary);
  font-weight: var(--weight-medium);
  font-size: 10px;
  color: var(--text-secondary);
}
.cl-note__type-icon {
  font-family: var(--font-mono);
  color: var(--accent);
}
.cl-note__sep { color: var(--text-tertiary); }
.cl-note__time, .cl-note__author {
  font-variant-numeric: tabular-nums;
}
.cl-note__author {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}
.cl-note__body {
  font-size: var(--text-small);
  color: var(--text-primary);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.cl-note__body code {
  background: var(--bg-tertiary);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 12px;
}
.cl-note__delete {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--radius-xs);
  opacity: 0;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}
.cl-note:hover .cl-note__delete,
.cl-note__delete:focus-visible {
  opacity: 1;
}
.cl-note__delete:hover {
  color: var(--color-error);
}

/* Confirm dialog REMOS — reemplaza confirm() nativo.
   Modal pequeño y centrado, con header + msg + 2 botones. */
.cl-confirm-modal {
  width: 92vw;
  max-width: 420px;
  height: auto;
  max-height: 80vh;
}
.cl-confirm-modal .modal-header {
  padding: 14px 18px 0;
  border-bottom: none;
}
.cl-confirm-modal .modal-body {
  padding: 12px 18px 4px;
  overflow: visible;
}
.cl-confirm-modal__msg {
  margin: 0;
  font-size: var(--text-small);
  color: var(--text-secondary);
  line-height: 1.5;
}
.cl-confirm-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--border-subtle);
  margin-top: 12px;
}

/* Composer compacto — glass textarea + bar inline (type select + Publicar). */
.cl-compose {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  backdrop-filter: blur(10px);
  margin-top: var(--space-4);
}
.cl-compose__textarea {
  width: 100%;
  font-family: var(--font-body);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-base);
  color: var(--text-primary);
  font-size: var(--text-small);
  line-height: 1.5;
  padding: 10px 12px;
  resize: vertical;
  min-height: 64px;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.cl-compose__textarea:focus {
  outline: none;
  border-color: rgba(225, 29, 72, 0.45);
  background: rgba(255, 255, 255, 0.05);
}
.cl-compose__textarea::placeholder {
  color: var(--text-tertiary);
}
.cl-compose__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.cl-compose__type {
  flex: 0 0 auto;
  min-width: 150px;
  padding: 6px 30px 6px 10px;
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-small);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  transition: border-color var(--transition-fast);
}
.cl-compose__type:focus {
  outline: none;
  border-color: rgba(225, 29, 72, 0.45);
}

/* Lista de enlaces (tab Enlaces) — fila con dot color cat + label/url + cat + ⋯ */
.cl-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.cl-link-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-4);
  padding: 14px 4px;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--transition-fast);
}
.cl-link-row:last-child { border-bottom: none; }
.cl-link-row:hover {
  background: rgba(255, 255, 255, 0.025);
}
.cl-link-row__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cl-link-row__label {
  font-size: var(--text-body);
  color: var(--text-primary);
  font-weight: var(--weight-medium);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cl-link-row__label:hover {
  text-decoration: underline;
}
.cl-link-row__url {
  font-size: var(--text-label);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}
.cl-link-row__desc {
  margin-top: 2px;
  font-size: var(--text-label);
  color: var(--text-secondary);
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}
.cl-link-row__cat {
  font-size: var(--text-label);
  text-transform: lowercase;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}
/* Pill por categoría — color como tag. "otros" queda neutro. */
.cl-link-row[data-cat="monitoring"] .cl-link-row__cat { background: rgba(96, 165, 250, 0.14); color: var(--color-info); }
.cl-link-row[data-cat="ticketing"]  .cl-link-row__cat { background: rgba(168, 85, 247, 0.14); color: #C4A8FF; }
.cl-link-row[data-cat="cloud"]      .cl-link-row__cat { background: rgba(34, 197, 94, 0.12); color: var(--color-success); }
.cl-link-row[data-cat="network"]    .cl-link-row__cat { background: rgba(234, 88, 12, 0.14); color: var(--logo-secondary); }
.cl-link-row__private {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  padding: 1px 7px;
  border-radius: var(--radius-xs);
  background: rgba(234, 88, 12, 0.16);
  color: var(--logo-secondary);
  text-decoration: none;
}
.cl-link-form__hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: rgba(234, 88, 12, 0.10);
  color: var(--logo-secondary);
  font-size: var(--text-label);
}

/* Pills input — input + chips estilo email tags (canal de comunicación) */
.cl-pills-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-base);
  min-height: 44px;
  cursor: text;
  transition: border-color var(--transition-fast);
}
.cl-pills-input:focus-within {
  border-color: var(--accent);
}
.cl-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.cl-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-size: var(--text-small);
  color: var(--text-primary);
}
.cl-pill__text {
  font-variant-numeric: tabular-nums;
}
.cl-pill__remove {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  border-radius: 50%;
  padding: 0;
}
.cl-pill__remove:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}
.cl-pills-input > input {
  flex: 1;
  min-width: 160px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-small);
  padding: 4px 2px;
}

/* Empty state — line + CTA centrados */
.cl-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-10) var(--space-4);
}
.cl-empty-state__label {
  font-size: var(--text-body);
  color: var(--text-secondary);
  margin: 0;
}

/* Channelog — feed unificado de eventos del cliente.
   Filtros chip arriba (reusa .filter-chip + variant) + tabla data-table. */
.cl-channelog-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.cl-channelog-chip {
  font-variant-numeric: tabular-nums;
}
.cl-channelog-chip__icon {
  margin-right: 4px;
  font-family: var(--font-mono);
}
/* Channelog rows usan .activity-row (canónico). Extra space para que kind badge respire. */
.cl-channelog-row .activity-row__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cl-channelog-kind {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cl-channelog-kind--change       { background: var(--badge-bg); color: var(--text-secondary); }
.cl-channelog-kind--comercial    { background: rgba(225, 29, 72, 0.10); color: var(--accent); }
.cl-channelog-kind--tecnico      { background: rgba(96, 165, 250, 0.12); color: var(--color-info); }
.cl-channelog-kind--comunicacion { background: rgba(34, 197, 94, 0.10); color: var(--color-success); }

/* Health card — gauge SVG circular + breakdown de factores debajo.
   Diseno por visual-design-lead: score grande neutro + dot severity arriba +
   barra horizontal con fill animado + lista tabular de factores.
   El gauge SVG circular fue rechazado (decoracion, no informacion). */
.cl-health-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
}
.cl-health-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.cl-health-card__head-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Info button — circle (ⓘ) trigger del popover de factores */
.cl-health-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 0;
  outline: none;
  transition: color var(--transition-fast);
}
.cl-health-info:hover,
.cl-health-info:focus-visible {
  color: var(--text-primary);
  outline: none;
}

/* Floating popover — montado en body, escapa cualquier overflow/stacking del padre. */
.cl-floating-popover {
  position: fixed;
  z-index: 9999;
  min-width: 260px;
  max-width: 360px;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out);
  pointer-events: none;
}
.cl-floating-popover.is-open {
  opacity: 1;
  transform: translateY(0);
}
.cl-floating-popover .cl-health-popover__title {
  margin: 0 0 8px;
  font-size: var(--text-label);
  color: var(--text-tertiary);
}
.cl-health-popover__title {
  margin: 0 0 8px;
  font-size: var(--text-label);
  color: var(--text-tertiary);
  text-transform: none;
  letter-spacing: 0;
}

/* Score: H1 Sora neutro + suffix tertiary baseline-aligned */
.cl-health-score {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: var(--space-1);
}
.cl-health-score__num {
  font-family: var(--font-heading);
  font-size: var(--text-h1);              /* 32px — el doble de un valor KPI normal */
  font-weight: var(--weight-semibold);
  letter-spacing: var(--heading-letter-spacing);
  line-height: 1;
  color: var(--text-primary);             /* neutro: la jerarquia la da el tamaño */
  font-variant-numeric: tabular-nums;
}
.cl-health-score__suffix {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Severity badge — dot + label arriba a la derecha. Doble señal sin saturar. */
.cl-health-severity {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-label);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.cl-health-severity__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-tertiary);
}
.cl-health-severity--ok   .cl-health-severity__dot { background: var(--color-success); }
.cl-health-severity--warn .cl-health-severity__dot { background: var(--color-warning); }
.cl-health-severity--risk .cl-health-severity__dot { background: var(--color-error); }

/* Barra de progreso horizontal — el unico elemento coloreado de la card.
   Fill anima width desde 0% al score (600ms ease-out, una sola vez al montar). */
.cl-health-bar {
  width: 100%;
  height: 4px;
  background: var(--bg-elevated);
  border-radius: 2px;
  overflow: hidden;
  margin-top: var(--space-1);
}
.cl-health-bar__fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  width: 0;
  animation: cl-health-fill 600ms var(--ease-out) forwards;
}
.cl-health-bar__fill--ok   { background: var(--color-success); }
.cl-health-bar__fill--warn { background: var(--color-warning); }
.cl-health-bar__fill--risk { background: var(--color-error); }
@keyframes cl-health-fill {
  from { width: 0; }
  to   { width: var(--health-fill, 0%); }
}

/* Divider sutil entre la barra y la lista de factores */
.cl-health-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-4) 0 var(--space-3);
}

/* Lista tabular de factores: label / ratio mono / delta mono */
.cl-health-factors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.cl-health-factor {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: var(--space-4);
  font-size: var(--text-small);
}
.cl-health-factor__label {
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cl-health-factor__ratio,
.cl-health-factor__delta {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
}
.cl-health-factor__ratio {
  color: var(--text-primary);
}
.cl-health-factor__delta {
  color: var(--text-tertiary);
  text-align: right;
  min-width: 36px;
}
.cl-health-factor__delta--positive { color: var(--color-success); }
.cl-health-factor__delta--negative { color: var(--color-error); }

/* Secciones colapsables — head clickeable con chevron animado.
   Los botones data-open-cl-modal hacen stopPropagation en JS. */
.dash-section--collapsible > .dash-section__head {
  cursor: pointer;
  user-select: none;
}
.dash-section__chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-tertiary);
  transition: transform var(--transition-fast);
}
.dash-section--collapsible.is-collapsed .dash-section__chevron {
  transform: rotate(-90deg);
}
.dash-section--collapsible.is-collapsed > .dash-section__body {
  display: none;
}
.dash-section__body {
  margin-top: var(--space-3);
}

/* Quick-links flat — chips inline, sin wrapper de grupos ni aside-block */
.cliente-quicklinks-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cliente-quicklink-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  border-radius: var(--radius-full);
  font-size: var(--text-small);
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color var(--transition-fast);
}
.cliente-quicklink-chip:hover { border-color: var(--border-strong); }
.cliente-quicklink-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Health badge — círculo con ring progress + icono central (check/warn/x) + número.
   Ring se llena al % del score. Icono interior comunica la severity de un vistazo. */
.cl-health {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-small);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.cl-health__ring {
  flex-shrink: 0;
  display: block;
}
.cl-health__ring-bg {
  stroke: var(--border-subtle);
}
.cl-health__num {
  min-width: 22px;
  text-align: right;
  opacity: 0;
  transition: opacity 120ms var(--ease-out);
}
.cl-health:hover .cl-health__num,
.cl-health:focus-within .cl-health__num {
  opacity: 1;
}

/* Severities — verde / naranja / rojo en el ring + icono central. */
.cl-health--ok   .cl-health__ring-fg,
.cl-health--ok   .cl-health__ring { color: var(--color-success); stroke: var(--color-success); }
.cl-health--warn .cl-health__ring-fg,
.cl-health--warn .cl-health__ring { color: var(--color-warning); stroke: var(--color-warning); }
.cl-health--risk .cl-health__ring-fg,
.cl-health--risk .cl-health__ring { color: var(--color-error); stroke: var(--color-error); }
.cl-health--risk .cl-health__num  { color: var(--color-error); }
.cl-health--unknown { color: var(--text-tertiary); }


/* ===========================================================================
   Utilities — sustituyen inline styles en JS injection (cliente.js).
   No abusar. Usar solo cuando no aplica un componente compartido.
   =========================================================================== */
.cl-mt-1 { margin-top: 4px; }
.cl-mt-2 { margin-top: 8px; }
.cl-mt-3 { margin-top: 12px; }
.cl-mt-4 { margin-top: 16px; }
.cl-mt-6 { margin-top: 24px; }
.cl-mb-3 { margin-bottom: 12px; }
.cl-mb-6 { margin-bottom: 24px; }

/* Stack denso (col flex con gap mínimo) — sustituye style="display:flex;flex-direction:column;gap:2px" */
.cl-stack-tight {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Fila inline wrap (header de item de directorio) — sustituye style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0" */
.cl-row-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

/* Texto small secundario — sustituye style="font-size:var(--text-small);color:var(--text-secondary)" */
.cl-text-meta {
  font-size: var(--text-small);
  color: var(--text-secondary);
}

.cl-text-small {
  font-size: var(--text-small);
}

/* Variante de .cl-muted con margen vertical asimétrico (hints de panel) */
.cl-muted--hint {
  margin: 4px 0 12px;
}

/* Fila tipo directorio (contacto/enlace) con border-bottom — sustituye padding+border inline */
.cl-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.cl-row:last-child { border-bottom: none; }

/* Body de modal con scroll — sustituye style="padding:1.25rem;overflow-y:auto" en 5 modales */
.modal-body--scroll {
  padding: 1.25rem;
  overflow-y: auto;
}

/* Title h3 inline con margin-bottom — sustituye style="font-size:var(--text-h3);margin-bottom:12px" */
.cl-h3-title {
  font-size: var(--text-h3);
  margin-bottom: 12px;
}

/* Inline form error — usado en /admin (nuevo usuario, etc.). Texto rojo bajo el input. */
.adm-form-err {
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: rgba(239, 68, 68, 0.10);
  color: var(--color-error);
  font-size: var(--text-label);
  line-height: 1.4;
}

/* ── @-mention chip + popover (ticket comments) ────────────────
   Chip se renderiza tanto en el editor (contenteditable=false) como en el
   feed. Popover es position:absolute añadido al <body> por el JS. */
.mention {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 1px;
  border-radius: 999px;
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 500;
  font-size: 0.92em;
  line-height: 1.5;
  white-space: nowrap;
  cursor: default;
}
.tkd-mention-pop {
  position: absolute;
  z-index: 9999;
  min-width: 240px;
  max-width: 320px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.tkd-mention-pop__empty {
  padding: 12px 10px;
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
}
.tkd-mention-pop__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: var(--text-primary);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.tkd-mention-pop__item.is-active,
.tkd-mention-pop__item:hover { background: rgba(255, 255, 255, 0.06); }
.tkd-mention-pop__item .tku-avatar { flex: 0 0 28px; }
.tkd-mention-pop__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tkd-mention-pop__name {
  color: var(--text-primary);
  font-weight: 500;
}
.tkd-mention-pop__email {
  color: var(--text-secondary);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── User avatar (tku-avatar) ──────────────────────────────────
   Sistema genérico para foto de user con fallback de iniciales coloreadas.
   Usado en panel Watchers (variant sm + grouped con overlap), popover de
   @mentions (variant sm en lista vertical). */
.tku-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-tertiary);
  border: 2px solid var(--bg-surface);
  box-sizing: border-box;
}
.tku-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tku-avatar__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-accent);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}
.tku-avatar--sm { width: 28px; height: 28px; font-size: 10px; }
.tku-avatar--sm .tku-avatar__fallback { font-size: 10px; }
.tku-avatar--md { width: 36px; height: 36px; font-size: 12px; }
.tku-avatar--md .tku-avatar__fallback { font-size: 12px; }
.tku-avatar--more {
  background: var(--bg-surface);
  border: 2px solid var(--border-primary);
  color: var(--text-secondary);
  font-weight: 600;
  overflow: visible;
}
.tku-avatar.is-me::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  pointer-events: none;
}

/* ── Watchers pill (fila de badges del header) ─────────────────
   Un único pill clickable que combina AvatarGroup + verbo. Look neutral en
   ambos estados; el verbo cambia y al hacer hover sobre "Siguiendo" aparece
   "Dejar de seguir". Se renderiza dentro de .ticket-detail-v2__badges. */
.tkd-watch-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 140ms, border-color 140ms, color 140ms;
}
.tkd-watch-pill__avatars {
  display: inline-flex;
  align-items: center;
}
.tku-avatar--grouped { margin-left: -7px; }
.tku-avatar--grouped:first-child { margin-left: 0; }
.tkd-watch-pill__dot { color: var(--text-muted); margin: 0 1px; }
.tkd-watch-pill__label-default { display: inline; }
.tkd-watch-pill__label-hover   { display: none; }

/* Estado idle (no sigues): hover invita con tinte accent */
.tkd-watch-pill.is-idle:hover {
  background: var(--accent-bg);
  border-color: rgba(225, 29, 72, 0.32);
  color: var(--accent);
}

/* Estado following: hover muestra el verbo destructivo */
.tkd-watch-pill.is-following:hover {
  background: rgba(225, 29, 72, 0.08);
  border-color: rgba(225, 29, 72, 0.32);
}
.tkd-watch-pill.is-following:hover .tkd-watch-pill__label-default { display: none; }
.tkd-watch-pill.is-following:hover .tkd-watch-pill__label-hover {
  display: inline;
  color: var(--accent);
}
.tkd-watch-pill:disabled { opacity: 0.55; cursor: progress; }

/* ── SLA countdown: empujar a la derecha + label "restante" ──── */
.ticket-detail-v2__badges .sla-countdown { margin-left: auto; }
.sla-countdown__label {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.2px;
  opacity: 0.78;
}

/* ── Channellog: botón icon-only + modal overlay ────────────────
   Botón vive en .ticket-detail-v2__actions junto a "Marcar resuelto".
   Click abre overlay con timeline cronológico de eventos del ticket. */
.ticket-detail-v2__action--icon {
  padding: 6px 8px;
  gap: 0;
}
.ticket-detail-v2__action--icon svg { display: block; }

.tkd-channelog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 64px 16px 24px;
  overflow-y: auto;
}
.tkd-channelog-modal {
  width: 100%;
  max-width: 620px;
  background: var(--bg-surface);
  border: 1px solid var(--border-primary);
  border-radius: 14px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 88px);
}
.tkd-channelog-modal__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-subtle);
}
.tkd-channelog-modal__title {
  margin: 0;
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}
.tkd-channelog-modal__close {
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: inline-flex;
}
.tkd-channelog-modal__close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}
.tkd-channelog-body {
  padding: 8px 8px 16px;
  overflow-y: auto;
}
.tkd-channelog-empty {
  padding: 28px 16px;
  color: var(--text-secondary);
  font-size: 13px;
  text-align: center;
}
.tkd-channelog-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.tkd-channelog-item:last-child { border-bottom: none; }
.tkd-channelog-item__icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
}
.tkd-channelog-item__icon--mention      { background: rgba(225,29,72,0.16); color: var(--accent); }
.tkd-channelog-item__icon--created      { background: rgba(34,197,94,0.16);  color: var(--color-success); }
.tkd-channelog-item__icon--resolved     { background: rgba(34,197,94,0.16);  color: var(--color-success); }
.tkd-channelog-item__icon--reopened     { background: rgba(234,179,8,0.16);  color: var(--color-warning); }
.tkd-channelog-item__icon--comment,
.tkd-channelog-item__icon--comment_edit { background: rgba(96,165,250,0.16); color: var(--color-info); }
.tkd-channelog-item__icon--watch_join,
.tkd-channelog-item__icon--watch_leave  { background: rgba(168,85,247,0.16); color: var(--color-purple); }
.tkd-channelog-item__body { flex: 1; min-width: 0; }
.tkd-channelog-item__text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.tkd-channelog-item__text strong {
  color: var(--text-primary);
  font-weight: 500;
}
.tkd-channelog-item__author {
  color: var(--text-primary);
  font-weight: 500;
}
.tkd-channelog-item__meta {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
}
.tkd-watch-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.tkd-watch-toggle:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); }
.tkd-watch-toggle.is-following {
  background: var(--accent-bg);
  border-color: rgba(225, 29, 72, 0.32);
  color: var(--accent);
}
.tkd-watch-toggle.is-following:hover { background: rgba(225, 29, 72, 0.18); }
.tkd-watch-toggle:disabled { opacity: 0.55; cursor: progress; }

/* ── API tokens (Mi cuenta > tab tokens · Admin > tab tokens) ──────────── */

.form-group__hint {
  display: block;
  font-size: var(--text-label);
  color: var(--text-secondary);
  margin-top: .35rem;
  line-height: 1.4;
}

.tk-list__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .75rem;
}
.tk-item {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.tk-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.tk-item__name {
  font-family: var(--font-heading);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-item__scopes {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.tk-scope {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--text-label);
  padding: .18rem .5rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}
.tk-item__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem .75rem;
  margin: 0;
  font-size: var(--text-label);
}
.tk-item__meta > div { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.tk-item__meta dt { color: var(--text-secondary); font-weight: var(--weight-regular); }
.tk-item__meta dd { margin: 0; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-item__actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  border-top: 1px solid var(--border-subtle);
  padding-top: .75rem;
}
.tk-item__hint { font-size: var(--text-label); color: var(--text-secondary); }

/* Modal genérico (usado por token create/reveal). Overlay oscuro centrado. */
.mc-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(4px);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.mc-modal__panel {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.mc-modal__panel--reveal { max-width: 620px; }
.mc-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 1.4rem .5rem;
  gap: 1rem;
}
.mc-modal__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-body-lg, 1rem);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}
.mc-modal__close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: .25rem .5rem;
  border-radius: var(--radius-sm);
}
.mc-modal__close:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.mc-modal__body {
  padding: .5rem 1.4rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mc-modal__actions {
  padding: 1rem 1.4rem 1.25rem;
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  border-top: 1px solid var(--border-subtle);
}

/* Preset chips (create modal) */
.tk-presets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .5rem;
}
.tk-preset {
  text-align: left;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-base);
  padding: .65rem .75rem;
  cursor: pointer;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  gap: .2rem;
  font-family: inherit;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.tk-preset:hover { border-color: var(--text-secondary); }
.tk-preset.is-active {
  border-color: var(--accent);
  background: var(--accent-bg);
}
.tk-preset__label { font-size: var(--text-body); font-weight: var(--weight-medium); }
.tk-preset__help { font-size: var(--text-label); color: var(--text-secondary); }

/* Reveal modal — warning + copy box */
.tk-reveal__warn {
  background: var(--accent-bg);
  border: 1px solid rgba(225, 29, 72, .32);
  color: var(--text-primary);
  padding: .75rem 1rem;
  border-radius: var(--radius-base);
  font-size: var(--text-small);
  line-height: 1.5;
}
.tk-reveal__box {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-base);
  padding: .75rem;
}
.tk-reveal__box code {
  flex: 1;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--text-small);
  color: var(--text-primary);
  overflow-x: auto;
  white-space: nowrap;
  padding: .2rem 0;
}
.tk-reveal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  font-size: var(--text-label);
  color: var(--text-secondary);
}
.tk-reveal__meta strong { color: var(--text-primary); font-weight: var(--weight-medium); }

@media (max-width: 640px) {
  .tk-list__grid { grid-template-columns: 1fr; }
  .tk-item__meta { grid-template-columns: 1fr; }
  .tk-presets { grid-template-columns: 1fr; }
  .mc-modal__panel { max-height: 100vh; border-radius: var(--radius-lg); }
}