/* ==========================================================================
   GENPROYECTS — Enterprise Design System (SaaS Grade / WCAG 2.2 AA Compliant)
   Tokens claro/oscuro. Los tokens --g-* son leídos dinámicamente por GenuviaCharts.
   ========================================================================== */

:root {
  /* Surface & Base */
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --surface-3: #e2e8f0;
  --surface-hover: #f8fafc;
  --surface-active: #edf2f7;

  /* Borders & Dividers */
  --border: #e2e8f0;
  --border-subtle: #edf2f7;
  --border-hover: #cbd5e1;
  --border-focus: #3b82f6;

  /* Typography / Text hierarchy (WCAG 2.2 AA: contrast >= 4.5:1) */
  --text: #0f172a;
  --text-2: #334155;
  --muted: #526077;
  --text-inverted: #ffffff;

  /* Brand & Accents */
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-active: #1e40af;
  --primary-2: #eff6ff;
  --primary-3: #dbeafe;
  --primary-ink: #ffffff;
  --primary-focus-ring: rgba(37, 99, 235, 0.24);

  /* Semantics */
  --success: #059669;
  --success-bg: #ecfdf5;
  --success-border: #a7f3d0;
  --warning: #d97706;
  --warning-bg: #fffbeb;
  --warning-border: #fde68a;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --danger-border: #fecaca;
  --info: #0284c7;
  --info-bg: #f0f9ff;
  --info-border: #bae6fd;

  /* Sidebar */
  --sidebar: #0f172a;
  --sidebar-surface: #1e293b;
  --sidebar-ink: #94a3b8;
  --sidebar-ink-hover: #f8fafc;
  --sidebar-active: #2563eb;
  --sidebar-active-ink: #ffffff;
  --sidebar-border: rgba(255, 255, 255, 0.08);

  /* Shadows (Enterprise soft elevation scale) */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --shadow-drawer: -4px 0 24px rgba(15, 23, 42, 0.15);

  /* Geometry & Motion */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 5px;
  --radius-pill: 9999px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 140ms var(--ease);
  --transition-normal: 220ms var(--ease);

  /* Tokens consumidos por GenuviaCharts */
  --g-primary: #2563eb;
  --g-success: #059669;
  --g-warning: #d97706;
  --g-danger: #dc2626;
  --g-info: #0284c7;
  --g-text-muted: #64748b;
  --g-border: #e2e8f0;
  --g-surface: #ffffff;

  color-scheme: light;
}

:root[data-theme="dark"] {
  /* Surface & Base */
  --bg: #090d16;
  --surface: #111726;
  --surface-2: #171f33;
  --surface-3: #1e2942;
  --surface-hover: #192238;
  --surface-active: #212c47;

  /* Borders & Dividers */
  --border: #232d44;
  --border-subtle: #1c2438;
  --border-hover: #374463;
  --border-focus: #60a5fa;

  /* Typography / Text hierarchy */
  --text: #f8fafc;
  --text-2: #cbd5e1;
  --muted: #8b9bb4;
  --text-inverted: #0f172a;

  /* Brand & Accents */
  --primary: #3b82f6;
  --primary-hover: #60a5fa;
  --primary-active: #2563eb;
  --primary-2: #172554;
  --primary-3: #1e3a8a;
  --primary-ink: #ffffff;
  --primary-focus-ring: rgba(59, 130, 246, 0.35);

  /* Semantics */
  --success: #10b981;
  --success-bg: rgba(16, 185, 129, 0.12);
  --success-border: rgba(16, 185, 129, 0.28);
  --warning: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.12);
  --warning-border: rgba(245, 158, 11, 0.28);
  --danger: #ef4444;
  --danger-bg: rgba(239, 68, 68, 0.12);
  --danger-border: rgba(239, 68, 68, 0.28);
  --info: #38bdf8;
  --info-bg: rgba(56, 189, 248, 0.12);
  --info-border: rgba(56, 189, 248, 0.28);

  /* Sidebar */
  --sidebar: #0b0f19;
  --sidebar-surface: #141b2b;
  --sidebar-ink: #94a3b8;
  --sidebar-ink-hover: #ffffff;
  --sidebar-active: #2563eb;
  --sidebar-active-ink: #ffffff;
  --sidebar-border: rgba(255, 255, 255, 0.07);

  /* Shadows (Dark elevation with inner rim highlights) */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-xl: 0 20px 38px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --shadow-drawer: -6px 0 32px rgba(0, 0, 0, 0.7), inset 1px 0 0 rgba(255, 255, 255, 0.05);

  /* Tokens consumidos por GenuviaCharts */
  --g-primary: #3b82f6;
  --g-success: #10b981;
  --g-warning: #f59e0b;
  --g-danger: #ef4444;
  --g-info: #38bdf8;
  --g-text-muted: #8b9bb4;
  --g-border: #232d44;
  --g-surface: #111726;

  color-scheme: dark;
}

/* ==========================================================================
   Base & Reset
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  height: 100%;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

[hidden] {
  display: none !important;
}

a {
  color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--primary-hover);
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text);
  letter-spacing: -0.015em;
  font-weight: 600;
  line-height: 1.25;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
h4 { font-size: 0.9rem; }

.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.nowrap { white-space: nowrap; }
.pre { white-space: pre-wrap; word-break: break-word; }

/* Focus ring accesible para teclado (WCAG 2.2 AA) */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ==========================================================================
   Botones y Campos
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 0.48rem 0.95rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 500;
  font-size: 0.88rem;
  line-height: 1.2;
  white-space: nowrap;
  user-select: none;
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-fast);
}

.btn:hover {
  background: var(--surface-hover);
  border-color: var(--border-hover);
  color: var(--text);
}

.btn:active {
  transform: scale(0.985);
}

a.btn {
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-ink);
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
}

.btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--primary-ink);
  box-shadow: 0 3px 8px rgba(37, 99, 235, 0.35);
}

.btn-danger {
  color: var(--danger);
  border-color: var(--danger-border);
  background: var(--surface);
}

.btn-danger:hover {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}

.btn-ghost {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.btn-ghost:hover {
  background: var(--surface-2);
  border-color: transparent;
}

.btn-sm {
  padding: 0.3rem 0.65rem;
  font-size: 0.82rem;
  border-radius: var(--radius-xs);
}

.btn-icon {
  padding: 0.42rem;
  min-width: 32px;
  min-height: 32px;
}

/* Campos de Formulario */
label.campo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.84rem;
  font-weight: 550;
  color: var(--text-2);
}

label.campo .ayuda {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

input[type="text"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="date"],
select,
textarea {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 0.52rem 0.75rem;
  font-size: 0.91rem;
  outline: none;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 14px 14px;
  padding-right: 2.2rem;
}

:root[data-theme="dark"] input[type="date"] { color-scheme: dark; }

:root[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

textarea {
  resize: vertical;
  min-height: 6rem;
  line-height: 1.5;
}

::placeholder {
  color: var(--muted);
  opacity: 0.75;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-focus-ring);
}

input:disabled,
select:disabled,
textarea:disabled,
textarea[readonly] {
  background: var(--surface-2);
  color: var(--muted);
  cursor: not-allowed;
  border-color: var(--border-subtle);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.15rem;
}

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

.acciones {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}

/* ==========================================================================
   Layout Principal
   ========================================================================== */

.shell {
  display: flex;
  min-height: 100vh;
  background: var(--bg);
}

/* Sidebar */
.sidebar {
  width: 240px;
  flex: 0 0 240px;
  background: var(--sidebar);
  color: var(--sidebar-ink);
  display: flex;
  flex-direction: column;
  padding: 1.15rem 0.85rem;
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid var(--sidebar-border);
  transition: width var(--transition-normal), flex-basis var(--transition-normal);
  z-index: 40;
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem 0.6rem 1.25rem;
  color: #ffffff;
}

.marca-logo {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1rem;
  color: #ffffff;
  flex: 0 0 36px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}

.marca-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #ffffff;
}

.marca-texto {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

.marca-texto strong {
  font-size: 0.96rem;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marca-texto span {
  font-size: 0.74rem;
  color: var(--sidebar-ink);
  font-weight: 450;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nav-titulo {
  font-size: 0.68rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  padding: 1rem 0.65rem 0.4rem;
}

.nav a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--sidebar-ink);
  text-decoration: none;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  position: relative;
  transition: all var(--transition-fast);
}

.nav a:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--sidebar-ink-hover);
}

.nav a.activo {
  background: var(--sidebar-active);
  color: var(--sidebar-active-ink);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}

.nav svg, .btn svg, svg.icono, .icono, .seccion-panel h3 svg, h1 svg, h2 svg, h3 svg, h4 svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-block;
  vertical-align: middle;
}

.sidebar-pie {
  margin-top: auto;
  padding: 0.75rem 0.65rem;
  font-size: 0.76rem;
  color: #64748b;
  border-top: 1px solid var(--sidebar-border);
}

/* Barra lateral colapsada (default enterprise en desktop) */
.shell.colapsado .sidebar {
  width: 70px;
  flex-basis: 70px;
  padding: 1.15rem 0.55rem;
}

.shell.colapsado .marca {
  padding: 0.25rem 0 1.25rem;
  justify-content: center;
}

.shell.colapsado .marca-texto,
.shell.colapsado .nav a span,
.shell.colapsado .sidebar-pie {
  display: none;
}

.shell.colapsado .nav-titulo {
  font-size: 0;
  padding: 0.4rem 0;
  margin: 0.4rem 0.3rem 0;
  border-top: 1px solid var(--sidebar-border);
}

.shell.colapsado .nav a {
  justify-content: center;
  padding: 0.65rem 0;
  position: relative;
}

.shell.colapsado .nav svg {
  width: 20px;
  height: 20px;
}

/* Tooltip elegante al hover en sidebar colapsada */
.shell.colapsado .nav a[title]:hover::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: #0f172a;
  color: #f8fafc;
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-xs);
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 100;
  animation: aparecer 0.12s ease-out;
}

/* Área Principal */
.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: 62px;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.75rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.topbar .titulo {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Switch Normal | Asistente */
.modo-switch {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 3px;
  box-shadow: var(--shadow-xs);
}

.modo-switch button {
  border: 0;
  background: transparent;
  padding: 0.35rem 0.95rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 550;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all var(--transition-fast);
}

.modo-switch button:hover {
  color: var(--text);
}

.modo-switch button.activo {
  background: var(--primary);
  color: var(--primary-ink);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
}

/* User chip */
.usuario-chip {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.86rem;
  font-weight: 550;
  color: var(--text-2);
  padding: 0.25rem 0.55rem 0.25rem 0.35rem;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-weight: 650;
  font-size: 0.78rem;
}

/* Contenido Principal */
.contenido {
  padding: 1rem 1.75rem 1.75rem;
  max-width: 1560px;
  width: 100%;
  margin: 0 auto;
}

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

.encabezado .sub {
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: 0.25rem;
}

/* El título de cada pantalla vive solo en la barra superior: en la página queda una fila fina
   con filtros y acciones (alineada a la derecha) o, en el proyecto, el volver y el contexto. */
.encabezado.solo-acciones {
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 1rem;
}

/* Sin nada que mostrar (ej.: el selector de cliente solo existe para Genuvia): la fila no ocupa lugar. */
.encabezado.solo-acciones:not(:has(button, select, input, a, span)) {
  display: none;
}

.encabezado.compacto {
  align-items: center;
  margin-bottom: 0.75rem;
}

/* Selects chicos para barras de herramientas (cliente, estado del proyecto): misma altura que btn-sm. */
select.sel-compacto {
  width: auto;
  min-width: 180px;
  padding: 0.3rem 2rem 0.3rem 0.65rem;
  font-size: 0.84rem;
  border-radius: var(--radius-xs);
}

/* Proyecto: volver + pestañas + contexto/estado en una sola fila. */
.proy-barra {
  display: flex;
  align-items: flex-end;
  gap: 0.25rem 0.75rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.proy-barra .tabs {
  border-bottom: 0;
  margin-bottom: -1px;
  min-width: 0;
}

.proy-barra .tabs button {
  margin-bottom: 0;
  padding: 0.6rem 0.75rem;  /* 0.75 y no más: con 5 solapas (Facturación) la barra entra en una fila a 1285 px */
}

.proy-volver {
  align-self: center;
  text-decoration: none;
  font-size: 1.1rem;
  color: var(--text-2);
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-xs);
}

.proy-volver:hover {
  color: var(--primary);
  background: var(--surface-2);
}

.proy-barra__acciones {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  padding: 0.35rem 0;
  flex-wrap: wrap;
}

/* ==========================================================================
   Tarjetas & KPIs
   ========================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.card:hover {
  border-color: var(--border-hover);
}

.card-body {
  padding: 1.25rem 1.4rem;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--border);
}

/* Grid de KPIs */
.grid-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.kpi {
  padding: 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  position: relative;
  overflow: hidden;
}

.kpi .etq {
  font-size: 0.76rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kpi .valor {
  font-size: 1.95rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.1;
}

.kpi .pista {
  font-size: 0.8rem;
  color: var(--text-2);
}

/* Acentos en KPIs: franja superpuesta (no un border), así todas las tarjetas alinean igual tengan o no acento. */
.kpi::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--kpi-acento, transparent);
}
.kpi-acento { --kpi-acento: var(--primary); }
.kpi-ok { --kpi-acento: var(--success); }
.kpi-alerta { --kpi-acento: var(--warning); }
.kpi-peligro { --kpi-acento: var(--danger); }
.kpi-info { --kpi-acento: #1f6fa8; }

.kpi .valor {
  font-variant-numeric: tabular-nums;
}

/* KPI interactivo con link */
a.kpi {
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

a.kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-hover);
}

a.kpi::after {
  content: "Ver →";
  position: absolute;
  top: 1rem;
  right: 1.15rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
  opacity: 0;
  transform: translateX(-4px);
  transition: all var(--transition-fast);
}

a.kpi:hover::after, a.kpi:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

/* Grillas secundarias */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.chart-box {
  position: relative;
  height: 270px;
}

/* ==========================================================================
   Dashboard Toolbar & Executive Headers
   ========================================================================== */
.dashboard-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.dashboard-toolbar h1 {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0.15rem 0 0.25rem 0;
}

.dashboard-toolbar p {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  margin-bottom: 0.2rem;
}

.ia-sparkle {
  color: #7a5af8;
  font-size: 0.9rem;
}

/* ==========================================================================
   Insight Hero Banner (SaaS Action Banner)
   ========================================================================== */
@keyframes badgePulse {
  0% { transform: scale(0.95); opacity: 0.75; }
  50% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.75; }
}

.insight-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 1.6rem;
  border-radius: var(--radius);
  margin-bottom: 1.35rem;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: all var(--transition-fast);
}

.insight-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
}

.insight-control::before { background: var(--success); }
.insight-control {
  background: linear-gradient(90deg, rgba(5, 150, 105, 0.06) 0%, var(--surface) 40%);
  border-color: rgba(5, 150, 105, 0.25);
}

.insight-atencion::before, .insight-alerta::before { background: var(--warning); }
.insight-atencion, .insight-alerta {
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.08) 0%, var(--surface) 40%);
  border-color: rgba(217, 119, 6, 0.28);
}

.insight-riesgo::before { background: var(--danger); }
.insight-riesgo {
  background: linear-gradient(90deg, rgba(220, 38, 38, 0.08) 0%, var(--surface) 40%);
  border-color: rgba(220, 38, 38, 0.28);
}

.insight-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.insight-hero .signal {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.insight-hero .signal span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
  animation: badgePulse 2s infinite ease-in-out;
}

.insight-control .signal { color: var(--success); }
.insight-atencion .signal, .insight-alerta .signal { color: var(--warning); }
.insight-riesgo .signal { color: var(--danger); }

.insight-hero h2 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}

.insight-hero p {
  color: var(--text-2);
  font-size: 0.88rem;
  margin: 0 0 0.35rem 0;
  max-width: 650px;
  line-height: 1.45;
}

.insight-action {
  align-self: flex-start;
  margin-top: 0.25rem;
  font-weight: 600;
}

.insight-hero__metric {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding-left: 1.5rem;
  border-left: 1px solid var(--border-subtle);
  min-width: 140px;
}

.insight-hero__metric span {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.insight-hero__metric strong {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.insight-hero__metric small {
  font-size: 0.78rem;
  color: var(--muted);
}

/* ==========================================================================
   Tarjetas de Proyectos (SaaS Elite)
   ========================================================================== */
.proyectos-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 1.2rem;
}

.proy-card {
  padding: 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  cursor: pointer;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
  transition: all var(--transition-normal);
}

.proy-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  transition: background var(--transition-fast);
}

.proy-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(37, 99, 235, 0.4);
}

.proy-card:hover::before {
  background: linear-gradient(90deg, var(--primary), #7a5af8);
}

.proy-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.proy-card .cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
}

.proy-card .cab-izq {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-width: 0;
}

/* Debajo del nombre: estado y cliente (2026-10-28). */
.proy-card .proy-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.5rem;
  margin-top: 0.3rem;
}
.proy-card .proy-sub .badge { white-space: nowrap; }

.proy-card .proy-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(122, 90, 248, 0.16));
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  flex: 0 0 36px;
  border: 1px solid rgba(37, 99, 235, 0.2);
}

.proy-card .proy-titulos {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.proy-card .nombre {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.3;
  letter-spacing: -0.015em;
  transition: color var(--transition-fast);
  /* Nombres sin espacios (ej.: Propuesta_descargas_fiscales_Arcor) se cortan donde haga falta, en 2 líneas. */
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.proy-card:hover .nombre {
  color: var(--primary);
}

.proy-card .desc {
  color: var(--text-2);
  font-size: 0.86rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.proy-card .referentes-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--muted);
  background: var(--surface-2);
  padding: 0.4rem 0.65rem;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-subtle);
}

.proy-card .referentes-box svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: var(--muted);
}

.proy-card .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
}

.proy-card .meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.proy-card .meta-item svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: var(--muted);
}

.proy-card .proy-arrow {
  opacity: 0;
  transform: translateX(-4px);
  transition: all var(--transition-fast);
  color: var(--primary);
  font-weight: 700;
  font-size: 0.95rem;
}

.proy-card:hover .proy-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ==========================================================================
   Activity Timeline Feed
   ========================================================================== */
.feed {
  list-style: none;
  padding: 0.85rem 1.4rem;
  margin: 0;
  position: relative;
  /* Nombres de proyecto o archivo sin espacios no se salen de la tarjeta. */
  overflow-wrap: anywhere;
}

.feed::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  bottom: 1.5rem;
  left: 1.95rem;
  width: 2px;
  background: var(--border-subtle);
}

.feed li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  position: relative;
  padding: 0.75rem 0;
  transition: transform var(--transition-fast);
}

.feed li:not(:last-child) {
  border-bottom: 1px solid var(--border-subtle);
}

.feed .punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 2px var(--primary-focus-ring);
  margin-top: 0.3rem;
  flex: 0 0 10px;
  z-index: 1;
}

.feed .punto.fin {
  background: #0e9384;
  box-shadow: 0 0 0 2px rgba(14, 147, 132, 0.25);
}

.feed-content {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.feed .quien {
  font-weight: 600;
  color: var(--text);
  font-size: 0.86rem;
}

.feed .detalle {
  color: var(--text-2);
  font-size: 0.85rem;
}

.feed .cuando {
  font-size: 0.78rem;
  color: var(--muted);
}

.feed .cuando a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.feed .cuando a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Badges & Estados
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.30rem;
  padding: 0.14rem 0.50rem;
  border-radius: var(--radius-pill);
  font-size: 0.69rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
  letter-spacing: 0.01em;
}

.badge-gris {
  background: var(--surface-2);
  color: var(--text-2);
  border-color: var(--border);
}

.badge-punto {
  width: 5.5px;
  height: 5.5px;
  border-radius: 50%;
  flex: 0 0 5.5px;
}

/* Leyenda de estados (Configuración) */
.leyenda-estados {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.leyenda-estados li {
  display: grid;
  grid-template-columns: 10.5rem 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 0.86rem;
}

.leyenda-estados .que { color: var(--text-2); }
.leyenda-estados .quien { color: var(--muted); font-size: 0.78rem; }

/* KPIs en chat (bloque ```kpis) */
.cuerpo .kpis-chat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin: 0.5rem 0 1rem;
}

.cuerpo .kpis-chat .kpi {
  padding: 0.8rem 0.95rem;
  background: var(--surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.cuerpo .kpis-chat .kpi .valor {
  font-size: 1.5rem;
}

/* Feed / Línea de actividad */
.feed {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 560px;
  overflow-y: auto;
}

.feed li {
  display: flex;
  gap: 0.85rem;
  padding: 0.8rem 1.4rem;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.86rem;
  align-items: flex-start;
  transition: background var(--transition-fast);
}

.feed li:hover {
  background: var(--surface-hover);
}

.feed li:last-child {
  border-bottom: 0;
}

.feed .punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--primary);
  margin-top: 0.45rem;
  flex: 0 0 9px;
  box-shadow: 0 0 0 3px var(--primary-2);
}

.feed .punto.fin {
  background: var(--warning);
  box-shadow: 0 0 0 3px var(--warning-bg);
}

.feed .quien {
  font-weight: 600;
  color: var(--text);
}

.feed .cuando {
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 0.15rem;
}

.vacio {
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* ==========================================================================
   Pestañas
   ========================================================================== */

.tabs {
  display: flex;
  gap: 0.4rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
}

.tabs button {
  border: 0;
  background: transparent;
  padding: 0.6rem 1rem;
  cursor: pointer;
  font-weight: 550;
  color: var(--text-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: all var(--transition-fast);
}

.tabs button:hover {
  color: var(--text);
  border-bottom-color: var(--border-hover);
}

.tabs button.activo {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

.tabs .contador {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.05rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.tabs button.activo .contador {
  background: var(--primary-2);
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}

/* ==========================================================================
   GenuviaGrid Enterprise
   ========================================================================== */

.gsh-grid {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.gsh-grid__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
}

.gsh-grid__left, .gsh-grid__right, .gsh-grid__extra {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.gsh-grid__right {
  flex-wrap: wrap;
}

.gsh-grid__left {
  flex: 1;
  min-width: 0;
}

.gsh-grid__search {
  max-width: 340px;
  padding: 0.46rem 0.8rem !important;
  font-size: 0.87rem !important;
}

.gsh-grid__count {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 500;
}

.chip-filtro {
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
  background: var(--primary-2);
  color: var(--primary);
  border-radius: var(--radius-pill);
  padding: 0.28rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.chip-filtro:hover {
  filter: brightness(0.95);
  box-shadow: var(--shadow-xs);
}

.gsh-grid__scroll {
  overflow: visible;
}

.gsh-grid__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.80rem;
}

.gsh-grid__table th {
  position: sticky;
  top: 62px;
  background: var(--surface-2);
  text-align: left;
  padding: 0.45rem 0.35rem 0.5rem;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--text-2);
  vertical-align: top;
  z-index: 2;
  box-shadow: 0 1px 0 var(--border);
}

.gc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gc-multi {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.gc .badge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Encabezado con Ordenamiento */
.gsh-grid__sort {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  width: 100%;
  border: 0;
  background: none;
  padding: 0 0 0.40rem;
  cursor: pointer;
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--text-2);
  text-align: left;
  transition: color var(--transition-fast);
}

.gsh-grid__sort:hover {
  color: var(--text);
}

.gsh-grid__label {
  min-width: 0;
  white-space: nowrap;
}

.gsh-grid__arrow {
  flex: 0 0 auto;
  font-size: 0.80rem;
  color: var(--muted);
  display: none;
}

.gsh-grid__sort:hover .gsh-grid__arrow,
.gsh-grid__sort:focus-visible .gsh-grid__arrow,
th.ordenada .gsh-grid__arrow {
  display: inline-block;
  opacity: 0.8;
}

th.ordenada .gsh-grid__sort {
  color: var(--primary);
}

th.ordenada .gsh-grid__arrow {
  opacity: 1;
  color: var(--primary);
}

/* Filtros en celdas de encabezado */
.gsh-grid__filter {
  width: 100%;
  min-width: 0;
  padding: 0.22rem 0.45rem !important;
  font-size: 0.76rem !important;
  font-weight: 400;
  height: 1.85rem;
  border-radius: var(--radius-xs) !important;
}

/* Filtro desplegable multi-select */
.gsh-grid__ms {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-xs);
  color: var(--text-2);
  height: 2rem;
  padding: 0 0.5rem;
  font-size: 0.8rem;
  transition: all var(--transition-fast);
}

.gsh-grid__ms:hover {
  border-color: var(--border-hover);
}

.gsh-grid__ms span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.gsh-grid__ms-flecha {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.68rem;
}

.gsh-grid__ms.activo {
  border-color: var(--primary);
  background: var(--primary-2);
  color: var(--primary);
  font-weight: 600;
}

.gsh-ms {
  position: fixed;
  z-index: 80;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xl);
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  box-sizing: border-box;
  animation: aparecer 0.15s ease-out;
}

.gsh-ms__buscar {
  flex: 0 0 auto;
  padding: 0.4rem 0.65rem !important;
  font-size: 0.84rem !important;
}

.gsh-ms__lista {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gsh-ms__item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.42rem 0.5rem;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 0.86rem;
  color: var(--text);
  user-select: none;
  line-height: 1.35;
  transition: background var(--transition-fast);
}

.gsh-ms__item:hover {
  background: var(--surface-2);
}

.gsh-ms__item input {
  margin: 0.12rem 0 0;
  accent-color: var(--primary);
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  cursor: pointer;
}

.gsh-ms__valor {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.gsh-ms__n {
  color: var(--muted);
  font-size: 0.78rem;
}

.gsh-ms__solo {
  display: none;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 0.1rem 0.35rem;
  cursor: pointer;
  margin-left: 0.3rem;
  line-height: 1.2;
  transition: all var(--transition-fast);
}

.gsh-ms__item:hover .gsh-ms__solo,
.gsh-ms__solo:focus-visible {
  display: inline-block;
}

.gsh-ms__solo:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.gsh-ms__color {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 9px;
  margin-top: 0.35rem;
}

.gsh-ms__todos {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  font-weight: 600;
  padding-bottom: 0.5rem;
}

.gsh-ms__vacio {
  color: var(--muted);
  font-size: 0.84rem;
  padding: 0.65rem;
}

.gsh-ms__pie {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  border-top: 1px solid var(--border);
  padding-top: 0.55rem;
}

.gsh-ms__pie [data-ok] {
  margin-left: auto;
}

.gsh-grid__filter-vacio {
  height: 2rem;
}

/* Filas y Celdas de la Grilla */
.gsh-grid__table td {
  padding: 0.48rem 0.55rem;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
  line-height: 1.38;
  transition: background var(--transition-fast);
}

/* La primera fila arranca contra el borde y la sombra del encabezado fijo: un poco más de aire arriba. */
.gsh-grid__table tbody tr:first-child td {
  padding-top: 0.70rem;
}

.gsh-grid__table tbody tr:hover td {
  background: var(--surface-hover);
}

.gsh-grid__empty {
  padding: 0 !important;
  border-bottom: none !important;
}

.gsh-grid__table tbody tr:hover .gsh-grid__empty {
  background: transparent !important;
}

.grid-empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 1.5rem;
  text-align: center;
  gap: 0.5rem;
}

.grid-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.grid-empty-icon svg {
  width: 22px;
  height: 22px;
}

.grid-empty-title {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--text);
  max-width: 420px;
}

.grid-empty-sub {
  font-size: 0.82rem;
  color: var(--muted);
  max-width: 380px;
  line-height: 1.45;
}

.grid-empty-btn {
  margin-top: 0.5rem;
}

.celda-titulo {
  font-size: 0.81rem;
  font-weight: 600;
  color: var(--text);
}

.celda-sec {
  font-size: 0.77rem;
  color: var(--text-2);
}

.celda-muted {
  color: var(--muted);
  font-size: 0.77rem;
}

.celda-tipo {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.adj-mini {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  margin-left: 0.4rem;
  white-space: nowrap;
}

.adj-mini svg {
  width: 13px;
  height: 13px;
}

.gsh-grid__table tbody tr.clickable {
  cursor: pointer;
}

.gsh-grid__table tbody tr.clickable:hover td {
  background: var(--primary-2);
}

.gsh-grid__empty {
  text-align: center;
  color: var(--muted);
  padding: 3rem 1.5rem !important;
}

/* ==========================================================================
   Modales & Drawers (Paneles Laterales)
   ========================================================================== */

.velo {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 50;
  animation: aparecer 0.16s ease-out;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(640px, 100vw);
  background: var(--surface);
  z-index: 51;
  box-shadow: var(--shadow-drawer);
  display: flex;
  flex-direction: column;
  animation: deslizar 0.22s var(--ease);
  border-left: 1px solid var(--border);
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.drawer-foot {
  padding: 1rem 1.4rem;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 0.65rem;
  justify-content: space-between;
  align-items: center;
  background: var(--surface-2);
}

/* Pestañas y paneles dentro de Drawers */
.drawer-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  padding: 0 1.4rem;
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 10;
  margin-top: -1.4rem;
  margin-left: -1.4rem;
  margin-right: -1.4rem;
  margin-bottom: 1.15rem;
}

.drawer-tabs button {
  border: 0;
  background: transparent;
  padding: 0.75rem 0.95rem;
  cursor: pointer;
  font-weight: 550;
  color: var(--text-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: all var(--transition-fast);
}

.drawer-tabs button:hover {
  color: var(--text);
  border-bottom-color: var(--border-hover);
}

.drawer-tabs button.activo {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

.drawer-tab-pane {
  display: none;
  flex-direction: column;
  gap: 1.15rem;
  animation: aparecer 0.15s ease-out;
}

.drawer-tab-pane.activo {
  display: flex;
}

/* Encabezado y ayuda de registro */
.registro-head {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.registro-head__badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.registro-head__id {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--primary);
  background: var(--primary-2);
  border: 1px solid var(--primary-3);
  padding: 0.12rem 0.5rem;
  border-radius: var(--radius-xs);
}

.registro-head h2 {
  font-size: 1.18rem;
  font-weight: 650;
  color: var(--text);
  letter-spacing: -0.015em;
  margin: 0;
}

.campo-ayuda-estado {
  font-size: 0.78rem;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: var(--radius-xs);
  padding: 0.3rem 0.55rem;
  line-height: 1.35;
  margin-top: 0.15rem;
  border: 1px solid var(--border-subtle);
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(580px, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  overflow: auto;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xl);
  z-index: 51;
  animation: popModal 0.2s var(--ease);
  border: 1px solid var(--border);
}

.modal .card-head {
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 2;
}

.modal-body {
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.modal-foot {
  padding: 1rem 1.4rem;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.seccion-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.15rem;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.seccion-panel h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
}

@keyframes deslizar {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

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

@keyframes popModal {
  from { transform: translate(-50%, -46%) scale(0.97); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ==========================================================================
   Archivos & Carga
   ========================================================================== */

.archivos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.archivos li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.88rem;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.archivos li:hover {
  border-color: var(--border-hover);
  background: var(--surface-hover);
}

.archivos .nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 550;
  color: var(--text);
}

.archivos .ext {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-2);
  border-radius: var(--radius-xs);
  padding: 0.15rem 0.45rem;
  text-transform: uppercase;
}

.adjuntos {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.archivos:empty {
  display: none;
}

.archivos li.vacio {
  justify-content: center;
  color: var(--muted);
  border-style: dashed;
  background: transparent;
}

/* Es un <label>: sin display propio queda en línea y su relleno se encima con la lista de arriba. */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  width: 100%;
  box-sizing: border-box;
  border: 1.5px dashed var(--border-hover);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
  cursor: pointer;
  background: var(--surface-2);
  transition: all var(--transition-fast);
}

.dropzone svg {
  width: 22px;
  height: 22px;
  color: var(--primary);
}

.dropzone-texto strong {
  font-weight: 600;
  color: var(--text);
}

.dropzone-texto u {
  color: var(--primary);
  text-underline-offset: 2px;
}

.dropzone-ayuda {
  font-size: 0.78rem;
  color: var(--muted);
}

.dropzone:hover, .dropzone.sobre,
.dropzone:focus-visible {
  border-color: var(--primary);
  background: var(--primary-2);
  outline: none;
}

/* ==========================================================================
   Toasts & Alertas
   ========================================================================== */

.toasts {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  z-index: 100;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  background: #0f172a;
  color: #f8fafc;
  padding: 0.8rem 1.15rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xl);
  font-size: 0.88rem;
  font-weight: 500;
  max-width: 400px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  animation: aparecer 0.16s ease-out;
}

.toast.error {
  background: var(--danger);
  color: #ffffff;
  border-color: transparent;
}

.toast.ok {
  background: var(--success);
  color: #ffffff;
  border-color: transparent;
}

.alerta {
  padding: 0.75rem 0.95rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  line-height: 1.4;
  border: 1px solid transparent;
}

.alerta.error {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger);
}

.alerta.info {
  background: var(--primary-2);
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
  color: var(--text);
}

/* ==========================================================================
   Login
   ========================================================================== */

.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--bg);
}

.login-arte {
  background: radial-gradient(1200px 700px at 15% 15%, #2563eb 0%, #1e3a8a 55%, #0b152e 100%);
  color: #ffffff;
  padding: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.login-arte::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

.login-arte h1 {
  font-size: 2.35rem;
  font-weight: 700;
  max-width: 28rem;
  letter-spacing: -0.03em;
  color: #ffffff;
  line-height: 1.2;
}

.login-arte p {
  color: #bfdbfe;
  max-width: 32rem;
  font-size: 1.05rem;
  line-height: 1.6;
}

.login-arte ul {
  padding-left: 1.2rem;
  color: #e0e7ff;
  line-height: 1.7;
}

.login-form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  background: var(--surface);
}

.login-caja {
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.login-logo {
  height: 60px;
  display: flex;
  align-items: center;
}

.login-logo img {
  max-height: 60px;
  max-width: 240px;
  object-fit: contain;
}

/* Logo de Genuvia sobre el panel azul del login: versión blanca monocroma (el original tiene texto negro). */
.login-arte-logo {
  height: 60px;
  width: auto;
  align-self: flex-start;
  filter: brightness(0) invert(1);
}

/* Logo a color sobre el formulario (login de admin). En modo oscuro se invierte: el texto negro pasa a
   blanco y el ícono azul conserva el tono. */
:root[data-theme="dark"] .login-logo img.logo-genuvia {
  filter: invert(1) hue-rotate(180deg);
}

/* ==========================================================================
   Modo Asistente (Chat)
   ========================================================================== */

.chat {
  display: grid;
  grid-template-columns: 1fr;
  height: calc(100vh - 62px);
}

.chat-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
}

.chat-mensajes {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.chat-ancho {
  flex: 1 0 auto;  /* ocupa todo el alto: la bienvenida (margin: auto) queda centrada vertical */
  width: min(880px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.msg {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.msg.usuario {
  justify-content: flex-end;
}

.msg.usuario .burbuja {
  background: var(--primary);
  color: var(--primary-ink);
  border-radius: 16px 16px 4px 16px;
  padding: 0.75rem 1.1rem;
  max-width: 80%;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: var(--shadow-sm);
  font-size: 0.94rem;
  line-height: 1.5;
}

.msg.asistente .cuerpo {
  flex: 1;
  min-width: 0;
  line-height: 1.65;
  font-size: 0.94rem;
}

.msg .ia-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #ffffff;
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}

.ia-avatar svg {
  width: 17px;
  height: 17px;
  stroke: #ffffff;
}

.ia-avatar.ia-avatar-lg {
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  margin: 0 auto 1.25rem;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ia-avatar.ia-avatar-lg svg {
  width: 26px;
  height: 26px;
}

.cuerpo p { margin: 0 0 0.8rem; }
.cuerpo p:last-child { margin-bottom: 0; }
.cuerpo ul, .cuerpo ol { margin: 0 0 0.8rem; padding-left: 1.4rem; }
.cuerpo h1, .cuerpo h2, .cuerpo h3, .cuerpo h4 { margin: 1rem 0 0.5rem; }

.cuerpo code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 0.1rem 0.35rem;
  font-size: 0.88em;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.cuerpo pre {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.9rem;
  overflow-x: auto;
}

.cuerpo pre code {
  border: 0;
  padding: 0;
  background: none;
}

.cuerpo .tabla-wrap {
  overflow-x: auto;
  margin: 0.5rem 0 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.cuerpo table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.88rem;
}

.cuerpo th, .cuerpo td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.cuerpo th {
  background: var(--surface-2);
  font-weight: 600;
  color: var(--text-2);
}

.cuerpo .grafico {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem;
  margin: 0.5rem 0 1rem;
  box-shadow: var(--shadow-xs);
}

.cuerpo .grafico .chart-box {
  height: 270px;
}

.estado-ia {
  color: var(--muted);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.puntos::after {
  content: "…";
  animation: titilar 1s infinite;
}

@keyframes titilar { 50% { opacity: 0.2; } }

/* Dock de entrada del Chat */
.chat-input {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 1rem 1.75rem;
}

.chat-input .caja {
  width: min(880px, 100%);
  margin: 0 auto;
  display: flex;
  gap: 0.65rem;
  align-items: flex-end;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.chat-input .caja:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-focus-ring);
}

/* El foco lo marca la caja (focus-within): el textarea no dibuja contorno propio, si no queda doble recuadro. */
.chat-input textarea,
.chat-input textarea:focus,
.chat-input textarea:focus-visible {
  border: 0;
  outline: none;
  box-shadow: none !important;
}

.chat-input textarea {
  min-height: 2.4rem;
  max-height: 14rem;
  resize: none;
  padding: 0.45rem 0.5rem;
  background: transparent;
  font-size: 0.94rem;
}

.chat-input .adjuntos-chat {
  width: min(880px, 100%);
  margin: 0 auto 0.6rem;
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.chat-input .pista {
  width: min(880px, 100%);
  margin: 0.5rem auto 0;
  font-size: 0.78rem;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
}

.chat-bienvenida {
  text-align: center;
  margin: auto;
  max-width: 640px;
  padding: 0.5rem 1rem;
}

.chat-bienvenida h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.sugerencias {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.5rem;
  text-align: left;
}

.sugerencias button {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--text-2);
  line-height: 1.4;
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-fast);
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  text-align: left;
}

.sugerencias button:hover {
  border-color: var(--primary);
  background: var(--surface-hover);
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.sug-icon {
  color: var(--primary);
  flex: 0 0 16px;
  margin-top: 0.15rem;
  display: inline-flex;
}

.sug-icon svg {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

@media (max-width: 1100px) {
  .grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
  }

  .sidebar.abierta {
    transform: translateX(0);
    box-shadow: var(--shadow-xl);
  }

  .shell.colapsado .sidebar {
    width: 240px;
    flex-basis: 240px;
    padding: 1.15rem 0.85rem;
  }

  .shell.colapsado .marca-texto,
  .shell.colapsado .nav a span,
  .shell.colapsado .sidebar-pie {
    display: revert;
  }

  .shell.colapsado .nav-titulo {
    font-size: 0.68rem;
    padding: 1rem 0.65rem 0.4rem;
    margin: 0;
    border: 0;
  }

  .shell.colapsado .nav a {
    justify-content: flex-start;
    padding: 0.55rem 0.75rem;
  }

  .shell.colapsado .marca {
    justify-content: flex-start;
    padding: 0.25rem 0.6rem 1.25rem;
  }

  .grid-2, .form-grid {
    grid-template-columns: 1fr;
  }

  .login {
    grid-template-columns: 1fr;
  }

  .login-arte {
    display: none;
  }

  .chat {
    grid-template-columns: 1fr;
  }

  /* En pantallas móviles la grilla permite scroll horizontal suave */
  .gsh-grid__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .gsh-grid__table {
    table-layout: auto;
    min-width: 760px;
  }

  .gsh-grid__table th {
    position: static;
  }

  .contenido {
    padding: 1rem;
  }

  .topbar {
    padding: 0 1rem;
  }

  .usuario-chip span,
  .btn-clave span {
    display: none;
  }

  .sugerencias {
    grid-template-columns: 1fr;
  }

  .drawer {
    width: 100vw;
  }
}

/* ==========================================================================
   UX premium 2026 · foco operativo, profundidad sobria y estados completos
   ========================================================================== */

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

.app-boot {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.9rem;
  color: var(--text-2);
}
.app-boot__logo {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  box-shadow: 0 12px 28px rgba(37,99,235,.28);
  font-size: 1.1rem;
  font-weight: 750;
}
.app-boot strong { font-size: 0.86rem; }
.app-boot i {
  width: 150px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-3);
  position: relative;
}
.app-boot i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 45%;
  border-radius: inherit;
  background: var(--primary);
  animation: boot-progress 1.15s var(--ease) infinite alternate;
}
@keyframes boot-progress { to { transform: translateX(125%); } }

body {
  background:
    radial-gradient(circle at 18% -10%, rgba(37, 99, 235, 0.055), transparent 30rem),
    radial-gradient(circle at 92% 4%, rgba(14, 165, 233, 0.035), transparent 26rem),
    var(--bg);
}

:root[data-theme="dark"] body {
  background:
    radial-gradient(circle at 18% -10%, rgba(59, 130, 246, 0.11), transparent 34rem),
    radial-gradient(circle at 92% 2%, rgba(14, 165, 233, 0.06), transparent 28rem),
    var(--bg);
}

.sidebar {
  background:
    radial-gradient(circle at 50% -5%, rgba(59, 130, 246, 0.18), transparent 13rem),
    var(--sidebar);
}

.nav a::before {
  content: "";
  position: absolute;
  left: -0.55rem;
  width: 3px;
  height: 0;
  border-radius: 0 4px 4px 0;
  background: #60a5fa;
  transition: height var(--transition-fast);
}

.nav a.activo::before { height: 22px; }

.topbar {
  height: 66px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 1px 0 var(--border), 0 8px 30px rgba(15, 23, 42, 0.025);
}

.topbar .titulo {
  font-size: 1.02rem;
  letter-spacing: -0.018em;
}

.contenido { padding-top: 1.25rem; }

.card {
  box-shadow: var(--shadow), 0 12px 30px rgba(15, 23, 42, 0.025);
}

:root[data-theme="dark"] .card {
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.025);
}

.card-head h2 { letter-spacing: -0.025em; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.115em;
}

.dashboard-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.15rem 0 1rem;
}

.dashboard-toolbar p,
.config-head p {
  color: var(--muted);
  margin: 0.2rem 0 0;
  font-size: 0.86rem;
}

.insight-hero {
  --signal: var(--primary);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  min-height: 158px;
  margin-bottom: 1rem;
  padding: 1.5rem 1.65rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--signal) 23%, var(--border));
  border-radius: calc(var(--radius) + 3px);
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--signal) 10%, var(--surface)) 0%, var(--surface) 55%),
    var(--surface);
  box-shadow: var(--shadow-md);
}

.insight-hero::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: -115px;
  top: -145px;
  border-radius: 50%;
  border: 42px solid color-mix(in srgb, var(--signal) 8%, transparent);
  pointer-events: none;
}

.insight-riesgo { --signal: var(--danger); }
.insight-atencion { --signal: var(--warning); }
.insight-control { --signal: var(--success); }

.insight-hero__copy { position: relative; z-index: 1; }

.insight-hero .signal {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--text-2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.insight-hero .signal span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--signal) 14%, transparent);
}

.insight-hero h2 {
  max-width: 760px;
  margin-top: 0.62rem;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  letter-spacing: -0.035em;
}

.insight-hero p {
  max-width: 720px;
  margin: 0.4rem 0 0.9rem;
  color: var(--text-2);
}

.insight-action {
  background: color-mix(in srgb, var(--signal) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--signal) 30%, var(--border));
  color: var(--text);
}

.insight-hero__metric {
  position: relative;
  z-index: 1;
  min-width: 150px;
  padding: 0.9rem 1rem;
  border-left: 1px solid color-mix(in srgb, var(--signal) 25%, var(--border));
  display: flex;
  flex-direction: column;
}

.insight-hero__metric span,
.insight-hero__metric small { color: var(--muted); font-size: 0.75rem; }
.insight-hero__metric strong { font-size: 2.5rem; line-height: 1.05; letter-spacing: -0.055em; }

.grid-kpi { gap: 0.85rem; }

.kpi {
  min-height: 122px;
  border-color: color-mix(in srgb, var(--kpi-acento, var(--border)) 18%, var(--border));
}

.kpi::before {
  width: 4px;
  height: auto;
  top: 15px;
  bottom: 15px;
  right: auto;
  border-radius: 0 4px 4px 0;
}

.kpi .valor { font-size: 2.05rem; }

.proy-card {
  position: relative;
  overflow: hidden;
}

.proy-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), #38bdf8);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.proy-card:hover::after,
.proy-card:focus-visible::after { opacity: 1; }

.gsh-grid {
  overflow: clip;
}

.gsh-grid__toolbar {
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface-2) 36%, var(--surface)));
}

.gsh-grid__table tbody tr.clickable {
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.gsh-grid__table tbody tr.clickable:hover {
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
  box-shadow: inset 3px 0 0 var(--primary);
}

.proy-barra {
  position: sticky;
  top: 66px;
  z-index: 18;
  margin: -0.25rem 0 1rem;
  padding-top: 0.35rem;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Skeletons: mismas masas visuales que la pantalla final. */
.loading-state { width: 100%; }
.skeleton-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.85rem; }
.skeleton-card,
.skeleton-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  position: relative;
}
.skeleton-card { min-height: 116px; padding: 1.25rem; }
.skeleton-panel { min-height: 310px; margin-top: 1rem; padding: 1.5rem; }
.skeleton-card span,
.skeleton-card strong,
.skeleton-card i,
.skeleton-panel span,
.skeleton-panel i {
  display: block;
  border-radius: 6px;
  background: var(--surface-3);
  overflow: hidden;
  position: relative;
}
.skeleton-card span { width: 42%; height: 10px; }
.skeleton-card strong { width: 26%; height: 30px; margin-top: 14px; }
.skeleton-card i { width: 58%; height: 9px; margin-top: 12px; }
.skeleton-panel span { width: 25%; height: 16px; }
.skeleton-panel i { height: 12px; margin-top: 25px; }
.skeleton-panel i:nth-child(2) { width: 88%; }
.skeleton-panel i:nth-child(3) { width: 72%; }
.skeleton-panel i:nth-child(4) { width: 81%; }
.skeleton-card::after,
.skeleton-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation: skeleton-shimmer 1.5s infinite;
}
:root[data-theme="dark"] .skeleton-card::after,
:root[data-theme="dark"] .skeleton-panel::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.045), transparent); }
@keyframes skeleton-shimmer { 100% { transform: translateX(100%); } }
.grid-loading { display: grid; gap: 0.7rem; padding: 1rem 5%; }
.grid-loading i {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: var(--surface-3);
  position: relative;
  overflow: hidden;
}
.grid-loading i:nth-child(2) { width: 84%; }
.grid-loading i:nth-child(3) { width: 92%; }
.grid-loading i:nth-child(4) { width: 68%; }
.grid-loading i::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  animation: skeleton-shimmer 1.5s infinite;
}
:root[data-theme="dark"] .grid-loading i::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent); }

.empty-premium {
  min-height: 360px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.7rem;
  text-align: center;
  padding: 3rem;
  border: 1px dashed var(--border-hover);
  border-radius: var(--radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 82%, transparent), var(--surface-2));
}
.empty-premium__icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  color: var(--primary);
  border: 1px solid var(--primary-3);
  border-radius: 16px;
  background: var(--primary-2);
}
.empty-premium__icon svg { width: 25px; height: 25px; }
.empty-premium strong { font-size: 1.15rem; }
.empty-premium p { max-width: 450px; margin: 0; color: var(--muted); }
.standalone-state { min-height: 100vh; display: grid; padding: clamp(1rem, 4vw, 3rem); background: var(--bg); }
.standalone-state .empty-premium { width: min(720px, 100%); margin: auto; align-self: center; }

/* Configuración: índice persistente y guardado que informa el estado real. */
.config-head {
  position: sticky;
  top: 66px;
  z-index: 16;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin: -0.35rem 0 1rem;
  padding: 0.8rem 0;
  background: color-mix(in srgb, var(--bg) 91%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.config-head h2 { margin-top: 0.15rem; font-size: 1.25rem; }
.config-save { display: flex; align-items: center; gap: 0.8rem; }
.config-save span { color: var(--muted); font-size: 0.78rem; font-weight: 600; }
.config-save span.pendiente { color: var(--warning); }
.config-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1rem; align-items: start; }
.config-index {
  position: sticky;
  top: 158px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.config-index > strong { padding: 0.35rem 0.55rem 0.65rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.config-index button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.58rem 0.62rem;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
  font-size: 0.82rem;
}
.config-index button:hover { background: var(--surface-2); color: var(--text); }
.config-index button span,
.section-number { color: var(--primary); font-variant-numeric: tabular-nums; font-size: 0.7rem; font-weight: 750; }
.config-card { margin-bottom: 1rem; scroll-margin-top: 158px; }
.config-card .card-head > div { display: flex; align-items: center; gap: 0.65rem; }
.config-card .campo { padding: 0.15rem 0; }

/* Permisos por proyecto: directorio visual con contrato CSV compatible. */
.permission-picker {
  padding: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-2) 68%, var(--surface));
}
.permission-picker__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.permission-picker__head > div { display: flex; flex-direction: column; gap: 0.15rem; }
.permission-picker__head strong { font-size: 0.82rem; }
.permission-picker__head span:not(.permission-security) { color: var(--muted); font-size: 0.72rem; }
.permission-security {
  flex: none;
  padding: 0.22rem 0.48rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--success) 12%, var(--surface));
  color: var(--success);
  font-size: 0.65rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.permission-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.75rem 0 0.6rem; }
.permission-tabs button {
  padding: 0.35rem 0.58rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-2);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 650;
  cursor: pointer;
}
.permission-tabs button.active { border-color: var(--primary); background: var(--primary-2); color: var(--primary); }
.available-users { display: flex; flex-wrap: wrap; gap: 0.4rem; min-height: 34px; }
.available-users > button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.48rem 0.28rem 0.3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-2);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 650;
  cursor: pointer;
}
.available-users > button:hover { border-color: var(--border-hover); color: var(--text); }
.available-users > button.selected { border-color: var(--primary); background: var(--primary-2); color: var(--primary); }
.available-users > button:disabled { cursor: default; opacity: 0.7; }
.user-avatar { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-3); font-size: 0.64rem; }
.selected .user-avatar { background: var(--primary); color: white; }
.user-check { margin-left: 0.1rem; font-weight: 800; }
.user-token-preview { display: flex; flex-wrap: wrap; gap: 0.32rem; margin-top: 0.38rem; min-height: 25px; }
.permission-assignment {
  position: relative;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.permission-role-title { color: var(--text-2); font-size: 0.76rem; font-weight: 700; }
.permission-source {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.user-token {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.48rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--primary-2);
  color: var(--primary);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 750;
}
button.user-token { cursor: pointer; }
.user-token span { font-size: 0.9rem; line-height: 1; }
.permission-empty { align-self: center; color: var(--muted); font-size: 0.72rem; }

/* Asistente: herramienta de trabajo compacta, densidad de app profesional (pedido de Diego, 2026-10-25:
   "muy grande todo, ni entra en una pantalla"). Todo el asistente entra sin scroll desde ~600 px de alto. */
/* Alto real de la topbar (con 62 px aparecía un segundo scroll). minmax(0, 1fr): con 1fr una tabla ancha
   estiraba toda la conversación en el celular en vez de scrollear dentro de su recuadro. */
.chat { height: calc(100vh - 66px); grid-template-columns: minmax(0, 1fr); }
.chat-mensajes { padding: 1rem 1.5rem; gap: 1rem; }
.chat-ancho { width: min(1080px, 100%); gap: 1rem; }
.msg { gap: 0.7rem; }
.msg.usuario .burbuja { padding: 0.5rem 0.85rem; border-radius: 14px 14px 4px 14px; font-size: 0.875rem; }
.msg.asistente .cuerpo { font-size: 0.875rem; line-height: 1.6; }
.msg .ia-avatar { width: 28px; height: 28px; flex-basis: 28px; box-shadow: none; }
.ia-avatar svg { width: 15px; height: 15px; }
/* Respuestas densas: una respuesta no puede comerse la pantalla. Títulos chicos; tablas como las grillas
   (sin scroll propio salvo el horizontal cuando de verdad no entran, nombres sin cortarse por palabra,
   números a la derecha en columnas angostas); KPIs en una tira de una línea, no tarjetas. */
.cuerpo p, .cuerpo ul, .cuerpo ol { margin-bottom: 0.55rem; }
.cuerpo li + li { margin-top: 0.15rem; }
.cuerpo h1, .cuerpo h2, .cuerpo h3, .cuerpo h4 { margin: 0.85rem 0 0.35rem; line-height: 1.3; letter-spacing: -0.01em; }
.cuerpo h1 { font-size: 1.05rem; }
.cuerpo h2 { font-size: 1rem; }
.cuerpo h3, .cuerpo h4 { font-size: 0.9rem; }
.cuerpo > :first-child { margin-top: 0; }
.cuerpo .tabla-wrap { margin: 0.4rem 0 0.7rem; box-shadow: none; }
.cuerpo table { font-size: 0.8rem; line-height: 1.4; }
.cuerpo th, .cuerpo td { padding: 0.38rem 0.65rem; }
.cuerpo th { font-size: 0.72rem; line-height: 1.25; vertical-align: bottom; }
.cuerpo tbody tr:last-child td { border-bottom: 0; }
.cuerpo td:not([class]) { min-width: 12rem; }  /* columnas de texto (título, proyecto): no partir palabra por palabra */
.cuerpo th.num, .cuerpo td.num { width: 1%; text-align: right; font-variant-numeric: tabular-nums; }
.cuerpo th.th-larga { min-width: 6.5rem; }
.cuerpo td.num, .cuerpo td.fecha, .cuerpo td.corta { white-space: nowrap; }
.cuerpo th.fecha, .cuerpo td.fecha, .cuerpo th.corta, .cuerpo td.corta { width: 1%; }
.cuerpo td.fecha { font-variant-numeric: tabular-nums; }
.cuerpo td .badge { padding: 0.08rem 0.45rem; font-size: 0.66rem; white-space: nowrap; }
.cuerpo pre { padding: 0.65rem; font-size: 0.8rem; }
.cuerpo .grafico { padding: 0.65rem; margin: 0.4rem 0 0.7rem; box-shadow: none; }
.cuerpo .grafico .chart-box { height: 220px; }
.cuerpo .kpis-chat {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  margin: 0.4rem 0 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}
.cuerpo .kpis-chat .kpi {
  min-height: 0;
  margin-left: -1px;  /* el separador de la primera queda bajo el borde del contenedor */
  padding: 0.5rem 0.8rem;
  gap: 0.05rem;
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}
.cuerpo .kpis-chat .kpi::before { top: 0.6rem; bottom: 0.6rem; width: 3px; }
.cuerpo .kpis-chat .kpi .etq,
.cuerpo .kpis-chat .kpi .pista { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuerpo .kpis-chat .kpi .etq { font-size: 0.66rem; }
.cuerpo .kpis-chat .kpi .valor { font-size: 1.15rem; line-height: 1.25; }
.cuerpo .kpis-chat .kpi .pista { font-size: 0.72rem; color: var(--muted); }

.chat-bienvenida { width: min(640px, 100%); max-width: none; margin: auto; padding: 0; text-align: left; }
.suggestion-label { margin: 0; color: var(--muted); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.sugerencias { margin-top: 0.5rem; gap: 0.5rem; }
.sugerencias button { align-items: center; padding: 0.55rem 0.75rem; font-size: 0.82rem; line-height: 1.35; box-shadow: none; }
.sugerencias button > span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sugerencias button:hover { transform: none; box-shadow: var(--shadow-xs); }
.sug-icon { flex-basis: 14px; margin-top: 0; }
.sug-icon svg { width: 14px; height: 14px; }

.chat-input {
  padding: 0.6rem 1.5rem 0.5rem;
  background: color-mix(in srgb, var(--surface) 91%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.chat-input .caja,
.chat-input .adjuntos-chat,
.chat-input .pista { width: min(1080px, 100%); }
.chat-input .caja { gap: 0.4rem; padding: 0.35rem; border-radius: 12px; box-shadow: var(--shadow-xs); }
.chat-input textarea { min-height: 2.1rem; padding: 0.4rem; font-size: 0.875rem; }
.chat-input .pista { margin-top: 0.3rem; font-size: 0.7rem; }
.chat-input .pista strong { color: var(--text-2); font-weight: 650; }

.drawer { border-radius: 18px 0 0 18px; }
.drawer-head { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface-2) 35%, var(--surface))); }

@media (max-width: 1100px) {
  .config-layout { grid-template-columns: 1fr; }
  .config-index { position: static; flex-direction: row; overflow-x: auto; }
  .config-index > strong { display: none; }
  .config-index button { width: auto; white-space: nowrap; }
  .insight-hero__metric { min-width: 130px; }
}

@media (max-width: 900px) {
  .topbar { height: 62px; gap: 0.45rem; }
  .contenido { padding-top: 0.85rem; }
  .dashboard-toolbar { align-items: center; }
  .dashboard-toolbar > div:first-child { display: none; }
  .dashboard-toolbar { justify-content: flex-end; }
  .insight-hero { grid-template-columns: 1fr; padding: 1.25rem; }
  .insight-hero__metric { display: none; }
  .insight-hero h2 { font-size: 1.32rem; }
  .config-head { top: 62px; }
  .config-head > div:first-child p { display: none; }
  .config-save span { display: none; }
  .proy-barra { top: 62px; }
  .chat { height: calc(100vh - 62px); }
  .chat-mensajes, .chat-input { padding-inline: 0.85rem; }
  .chat-input .pista strong { display: none; }
}

@media (max-width: 520px) {
  .modo-switch button { padding-inline: 0.7rem; }
  .usuario-chip { padding-right: 0.35rem; }
  #btn-clave { display: none; }
  .btn-clave { padding-inline: 0.35rem; }
  .insight-hero { min-height: auto; }
  .insight-hero p { font-size: 0.84rem; }
  .grid-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { min-height: 108px; padding: 1rem; }
  .kpi .valor { font-size: 1.7rem; }
  .kpi .pista { font-size: 0.72rem; }
  .config-head h2 { font-size: 1rem; }
  .config-head .eyebrow { display: none; }
  .chat-input .pista { font-size: 0.68rem; }
  .permission-picker__head { flex-direction: column; gap: 0.45rem; }
}

/* ===== Asistente: historial de conversaciones y memoria (docs/DISENO.md §3.8) ===== */
/* Acciones del chat (nueva, conversaciones, memoria) en la línea de la pista, bajo la caja: no flotan sobre
   la respuesta ni comen alto (pedido de Diego). */
.chat-input .pista { align-items: center; gap: 0.75rem; }
.chat-acciones { display: flex; align-items: center; gap: 0.1rem; margin-left: -0.45rem; }
.chat-acciones .btn { padding: 0.12rem 0.45rem; font-size: 0.72rem; color: var(--muted); font-weight: 550; }
.chat-acciones .btn:hover { color: var(--text); }
.chat-acciones .btn svg { width: 13px; height: 13px; }
.pista-teclas { margin-left: auto; white-space: nowrap; }
@media (max-width: 900px) {
  .pista-teclas { display: none; }
  .chat-acciones { margin-right: auto; }
}
@media (max-width: 420px) {
  .modo-switch button svg { display: none; }  /* la topbar se pasaba del ancho en un celular de 390 px */
}
@media (max-width: 520px) {
  .chat-acciones .btn span { display: none; }
  .chat-acciones .btn svg { width: 15px; height: 15px; }
}

.conv-resumen {
  font-size: 0.8rem;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.chat-retomada {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.78rem;
  max-width: 100%;
}
.chat-retomada span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.memoria-aviso {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.65rem;
  padding: 0.2rem 0.3rem 0.2rem 0.7rem;
  border-radius: 999px;
  background: var(--primary-2);
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 550;
}
.memoria-aviso .btn { padding: 0.15rem 0.55rem; font-size: 0.78rem; }

.memoria-prefs { display: flex; flex-direction: column; gap: 0.6rem; }
.memoria-switch {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
}
.memoria-switch input { margin-top: 0.2rem; accent-color: var(--primary); width: 1rem; height: 1rem; flex: 0 0 auto; }
.memoria-switch > span { display: flex; flex-direction: column; gap: 0.15rem; }
.memoria-alta {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.85rem;
  border: 1px dashed var(--border-hover);
  border-radius: 12px;
  background: var(--surface-2);
}
.memoria-alta textarea { resize: vertical; }
.memoria-alta-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.memoria-alta-pie select { flex: 1 1 12rem; min-width: 0; }
.memoria-alta-pie label { display: inline-flex; align-items: center; gap: 0.35rem; }
.memoria-grupo h3 { margin: 0; font-size: 0.95rem; display: flex; align-items: center; gap: 0.45rem; }
.memoria-grupo > p { margin: 0.2rem 0 0.6rem; }
.memoria-lista, .conv-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.memoria-item, .conv-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.conv-item.actual { border-color: var(--primary); }
.memoria-texto { flex: 1; min-width: 0; font-size: 0.88rem; white-space: pre-wrap; word-break: break-word; }
.memoria-meta { display: block; margin-top: 0.25rem; font-size: 0.74rem; color: var(--muted); }
.memoria-acciones { display: flex; gap: 0.1rem; flex: 0 0 auto; }
.conv-abrir {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.conv-abrir strong { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-abrir:hover strong { color: var(--primary); }
.memoria-buscar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
}
.memoria-buscar input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; padding: 0; box-shadow: none; }
.memoria-borrar-todo { align-self: flex-start; color: var(--danger); }
/* Pestañas fijas de un drawer: pegadas al borde (cubren el relleno superior) para que el contenido no asome
   por encima al hacer scroll. */
.drawer-body > .drawer-tabs:first-child { top: -1.4rem; }

/* Panel de un registro: entra entero sin scroll a 1285×645 (pedido de Diego, 2026-10-25). Encabezado, solapas y pie
   bajos; Tipo/Estado/Prioridad en una fila y los referentes en otra; la caja de texto de cada solapa (Descripción,
   Comentarios, Info Facturación) ocupa el alto que sobra. */
.drawer-registro .drawer-head { padding: 0.7rem 1.25rem; }
.drawer-registro .registro-head { gap: 0.2rem; }
.drawer-registro .registro-head h2 { font-size: 1.05rem; line-height: 1.3; }
.drawer-registro .registro-head .small { font-size: 0.74rem; }
.drawer-registro .drawer-body { padding: 0 1.25rem 0.9rem; gap: 0; }
.drawer-registro .drawer-body > .drawer-tabs:first-child { top: 0; margin: 0 -1.25rem 0.85rem; padding: 0 1.25rem; flex-shrink: 0; }
.drawer-registro .drawer-tabs button { padding: 0.6rem 0.8rem; font-size: 0.84rem; }
.drawer-registro .drawer-tab-pane { gap: 0.45rem; }
.drawer-registro .drawer-tab-pane.activo { flex: 1; min-height: 0; }
.drawer-registro .drawer-tab-pane > p { margin: 0; }
.drawer-registro .drawer-foot { padding: 0.6rem 1.25rem; }
.drawer-registro label.campo,
.drawer-registro .autocomplete-field label { font-size: 0.8rem; gap: 0.25rem; }
.drawer-registro .autocomplete-field { display: flex; flex-direction: column; gap: 0.25rem; }
.drawer-registro input[type="text"],
.drawer-registro input[type="number"],
.drawer-registro input[type="date"],
.drawer-registro select,
.drawer-registro textarea { padding: 0.42rem 0.65rem; font-size: 0.86rem; }
.drawer-registro .registro-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: auto; gap: 0.7rem 0.9rem; flex: 1; min-height: 0; }
.drawer-registro .registro-grid > :last-child { min-height: 0; }
.drawer-registro .registro-grid .c2 { grid-column: span 2; }
.drawer-registro .registro-grid .c3 { grid-column: span 3; }
.drawer-registro .registro-grid .c6 { grid-column: 1 / -1; }
/* General: título, tipo/estado/prioridad, ayuda del estado, ranking y fechas, referentes; la descripción ocupa el resto. */
.drawer-registro .registro-grid { grid-template-rows: auto auto auto auto auto minmax(0, 1fr); }
/* Solapa Info Facturación: estado y entidad Holo, la ayuda del estado debajo y la caja de texto ocupa el resto. */
.drawer-registro .registro-grid.registro-grid--fc { grid-template-rows: auto auto minmax(0, 1fr); }
.drawer-registro .registro-grid .c4 { grid-column: span 4; }
.drawer-registro .campo-ayuda-estado { margin: -0.35rem 0 0; padding: 0; border: 0; background: none; font-size: 0.74rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-registro .campo-crece { flex: 1; min-height: 0; }
.drawer-registro .campo-crece textarea { flex: 1; min-height: 5.5rem; resize: none; }
/* Celular: el panel scrollea normal (no se fuerza a entrar en el alto) y las solapas se deslizan de costado. */
@media (max-width: 560px) {
  .drawer-registro .drawer-tabs { overflow-x: auto; scrollbar-width: none; }
  .drawer-registro .drawer-tabs::-webkit-scrollbar { display: none; }
  .drawer-registro .drawer-tabs button { flex: 0 0 auto; white-space: nowrap; }
  .drawer-registro .registro-grid .c2,
  .drawer-registro .registro-grid .c3,
  .drawer-registro .registro-grid .c4 { grid-column: 1 / -1; }
  .drawer-registro .registro-grid { grid-template-rows: none; flex: none; }
  .drawer-registro .drawer-tab-pane.activo { flex: none; }
  .drawer-registro .campo-crece { flex: none; }
  .drawer-registro .campo-ayuda-estado { white-space: normal; overflow: visible; }
  .drawer-registro .campo-crece textarea { min-height: 9rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Componentes Específicos: Autocomplete, Referentes y Seguimiento KPIs
   ========================================================================== */

/* Autocomplete en Panel de Registro */
.autocomplete-field {
  position: relative;
}

.autocomplete-wrapper {
  position: relative;
  width: 100%;
}

.autocomplete-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: 120;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 0.3rem 0;
}

.autocomplete-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.42rem 0.75rem;
  cursor: pointer;
  font-size: 0.80rem;
  color: var(--text);
  transition: background var(--transition-fast);
  gap: 0.5rem;
}

.autocomplete-item:hover,
.autocomplete-item.activo {
  background: var(--surface-hover);
  color: var(--primary);
}

.autocomplete-item mark {
  background: rgba(59, 130, 246, 0.25);
  color: inherit;
  padding: 0.05rem 0.2rem;
  border-radius: 2px;
  font-weight: 700;
}

.autocomplete-vacio {
  padding: 0.75rem 0.9rem;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
}

.badge-genuvia {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
  font-size: 0.65rem;
}

.badge-cliente {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
  font-size: 0.65rem;
}

/* Referentes en grilla: Genuvia y Cliente apilados, rol chico en gris y nombre entero (sin chips que se corten) */
.refs {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}

.ref-linea {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  min-width: 0;
  line-height: 1.3;
}

.ref-rol {
  flex: 0 0 2.9rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}

.ref-nombre {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
}

/* KPIs compactos en Seguimiento */
.seguimiento-kpis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

.seguimiento-kpi-card {
  display: flex;
  flex-direction: column;
  padding: 0.55rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: left;
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-fast);
}

.seguimiento-kpi-card:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.seguimiento-kpi-card .kpi-label {
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 0.15rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.seguimiento-kpi-card .kpi-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 6px;
}

.seguimiento-kpi-card .kpi-num {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.seguimiento-kpi-card .kpi-sub {
  font-size: 0.69rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.1rem;
}

/* Ranking editable en la grilla de Seguimiento (2026-10-28). */
.celda-ranking {
  width: 100%;
  max-width: 3.2rem;
  height: 1.7rem;
  min-height: 0;
  padding: 0 0.3rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
}
.celda-ranking::-webkit-outer-spin-button,
.celda-ranking::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.celda-ranking:hover { border-color: var(--border-hover); }
.celda-ranking:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--primary-focus-ring); }
.celda-ranking::placeholder { color: var(--muted); }
.ranking { font-weight: 600; font-size: 0.82rem; }
.celda-num { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.82rem; }

/* Compromiso: próxima fecha estimada (PY o PD); en rojo si venció. */
.compromiso {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  white-space: nowrap;
}
.compromiso__etapa {
  padding: 0 0.28rem;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.compromiso--vencido { color: var(--danger); font-weight: 600; }
.compromiso--vencido .compromiso__etapa { background: var(--danger-bg); color: var(--danger); }

/* Solapa Facturación: horas de lo que se ve, por entidad Holo. */
.fc-resumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  margin-bottom: 0.6rem;
  font-size: 0.78rem;
  color: var(--text-2);
}
.fc-resumen:empty { display: none; }
.fc-resumen__total { margin-right: 0.25rem; }
.fc-resumen__total strong { font-size: 0.9rem; color: var(--text); }
.fc-resumen__item {
  padding: 0.18rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}
.fc-resumen__item--sin { border-style: dashed; color: var(--muted); }
.fc-resumen__nota { color: var(--muted); }