/* alcaldIA — Admin Panel — Sistema visual SaaS moderno */

:root {
  /* Nunito: terminaciones redondeadas y contadores circulares, que es el
     caracter "redondito" pedido, con suficiente peso para una interfaz densa.
     Inter se retira: era el default y no aportaba personalidad. */
  --font-sans: 'Nunito', ui-rounded, 'Segoe UI Variable', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Neutros de una sola familia (fríos, con un punto de verde) para que no
     convivan grises cálidos y fríos como antes. */
  --bg: #f4f6f6;
  --surface: #ffffff;
  --surface-2: #eef1f1;
  --surface-3: #e3e8e8;
  --border: #dde3e3;
  --border-strong: #c6d0d0;

  /* Texto con más contraste: el gris secundario anterior (#7a746c sobre
     crema) rozaba el mínimo legible, que es parte de "no se entiende". */
  --text: #10201e;
  --text-2: #3d4f4d;
  --text-3: #5f7371;
  --text-4: #8a9c9a;

  /* Un solo acento, verde azulado: civico y sobrio, ni el naranja anterior
     ni el morado de gradiente que lleva todo producto de IA. Saturacion
     contenida para que conviva con los neutros en lugar de gritar. */
  --accent: #0e8c7f;
  --accent-hover: #0b7368;
  --accent-active: #095c53;
  --accent-soft: #d5eeea;
  --accent-softer: #ecf7f5;
  --on-accent: #ffffff;

  --success: #1a7f52;  --success-soft: #d8f0e3;
  --warning: #9a6400;  --warning-soft: #fbeccb;
  --danger:  #b8342c;  --danger-soft:  #fbe0de;
  --info:    #1a6ba8;  --info-soft:    #dfecf8;

  /* Sombras teñidas con el tono del fondo en vez de negro puro. */
  --shadow-sm:    0 1px 2px rgba(16,40,38,.05);
  --shadow-md:    0 1px 3px rgba(16,40,38,.07), 0 6px 16px rgba(16,40,38,.05);
  --shadow-lg:    0 6px 18px rgba(16,40,38,.09), 0 20px 40px rgba(16,40,38,.07);
  --shadow-focus: 0 0 0 3px var(--accent-soft);

  /* Radios más generosos y escalonados: apretado dentro, suave fuera. */
  --r-xs: 5px; --r-sm: 8px; --r-md: 11px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px;
  --density-y: 13px; --density-x: 15px; --row-h: 46px;
  --sidebar-w: 248px;

  /* Escala de z-index, para acabar con los 9999 sueltos. */
  --z-sticky: 10; --z-dropdown: 50; --z-overlay: 100; --z-modal: 200; --z-toast: 300;
}

[data-theme="dark"] {
  --bg: #101615; --surface: #171f1e; --surface-2: #1e2726; --surface-3: #263130;
  --border: #2a3534; --border-strong: #3a4746;
  --text: #eef4f3; --text-2: #b6c4c2; --text-3: #869795; --text-4: #5d6d6c;
  --accent: #2bb3a2; --accent-hover: #3ec4b3; --accent-active: #55d2c2;
  --accent-soft: #113531; --accent-softer: #0d2422;
  /* Los colores semanticos tambien se aclaran: en el tema oscuro solo se
     redefinian los fondos suaves, y el texto seguia en el tono oscuro del
     tema claro (la pildora "API activa" quedaba verde oscuro sobre negro). */
  --success: #46c98a;  --success-soft: #0f2c22;
  --warning: #e0a63c;  --warning-soft: #3a2a0c;
  --danger:  #f0736a;  --danger-soft:  #3a1713;
  --info:    #58a8e8;  --info-soft:    #0f2336;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 1px 3px rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.3);
  --shadow-lg: 0 6px 18px rgba(0,0,0,.45), 0 20px 40px rgba(0,0,0,.35);
}

[data-density="compact"]     { --density-y: 8px;  --density-x: 10px; --row-h: 36px; }
[data-density="comfortable"] { --density-y: 16px; --density-x: 18px; --row-h: 52px; }

*, *::before, *::after { box-sizing: border-box; }
html, body, #app-root { height: 100%; margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans); background: var(--bg); color: var(--text);
  /* 15px en lugar de 14: Nunito tiene una altura de x menor que Inter, asi
     que al mismo tamaño se leia mas pequeña. */
  font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased;
  /* Los feature settings anteriores eran de Inter y no existen en Nunito. */
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}
/* Jerarquía de titulares: tracking negativo y peso alto, que es lo que
   faltaba para distinguirlos del cuerpo de un vistazo. */
h1, h2, h3, h4, h5 { margin: 0; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance; }
h1 { font-size: 26px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; letter-spacing: -0.015em; }
h4 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
p  { text-wrap: pretty; }

/* Foco visible en todo lo interactivo: antes solo lo tenían los inputs. */
:where(button, [role="button"], a, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}
button  { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent-soft); color: var(--accent); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-4); }

/* ── Layout ── */
/* 100dvh en lugar de 100vh: evita el salto de la barra de Safari movil. */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; height: 100dvh; }
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.topbar {
  height: 64px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 16px; padding: 0 24px;
  background: var(--surface); flex-shrink: 0;
}
.topbar .crumbs { color: var(--text-3); font-size: 13.5px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.topbar .crumbs .sep { color: var(--text-4); }
.topbar .crumbs .cur { color: var(--text); font-weight: 700; }
.topbar .search { flex: 1; max-width: 480px; margin-left: auto; position: relative; }
.topbar .search input { width: 100%; height: 38px; border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--r-md); padding: 0 12px 0 34px; outline: none; transition: all .15s; }
.topbar .search input:focus { background: var(--surface); border-color: var(--accent); box-shadow: var(--shadow-focus); }
.topbar .search .s-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; font-size: 18px; }
.topbar .actions { display: flex; align-items: center; gap: 8px; }
/* La columna de contenido se limita desde el propio contenedor, con relleno
   lateral, en lugar de dar `max-width` y `margin-inline:auto` a cada hijo.
   Con lo segundo cada caja se centraba por su cuenta: la cabecera (ancha) y
   el submenu de Ajustes (estrecho) acababan en bordes izquierdos distintos en
   pantallas grandes. Asi todos comparten el mismo borde. */
.content {
  flex: 1; min-height: 0; overflow: auto;
  padding-block: 32px;
  padding-inline: max(32px, calc((100% - 1440px) / 2));
}
.content > * { max-width: 100%; margin-inline: 0; }
/* Vistas que gestionan su propio scroll interno (chat) */
.content.full-bleed { padding: 0; overflow: hidden; }

/* ── Sidebar ── */
.sidebar { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; }
.sidebar-brand { height: 64px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--border); }
.sidebar-brand .logo { width: 32px; height: 32px; border-radius: var(--r-md); background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-weight: 700; font-size: 15px; letter-spacing: -0.02em; box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 35%, transparent); flex-shrink: 0; }
.sidebar-brand .name { font-weight: 700; font-size: 16px; letter-spacing: -0.02em; }
.sidebar-brand .name b { font-weight: 700; color: var(--accent); }
.sidebar-section { padding: 16px 10px 8px; }
.sidebar-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-4); padding: 6px 10px; font-weight: 600; }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--r-md); color: var(--text-2); font-size: 14px; font-weight: 600; cursor: pointer; user-select: none; transition: all .12s; width: 100%; text-align: left; position: relative; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--accent-softer); color: var(--accent); }
.nav-item.active::before { content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; background: var(--accent); border-radius: 0 3px 3px 0; }
.nav-item .nav-icon { color: var(--text-3); flex-shrink: 0; font-size: 18px; }
.nav-item.active .nav-icon { color: var(--accent); }
.nav-item .count { margin-left: auto; font-size: 11px; color: var(--text-3); background: var(--surface-3); padding: 1px 6px; border-radius: 999px; font-weight: 500; }
.sidebar-footer { margin-top: auto; padding: 12px; border-top: 1px solid var(--border); }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-sm); cursor: pointer; transition: background .12s; }
.sidebar-user:hover { background: var(--surface-2); }
.sidebar-user .s-avatar { width: 32px; height: 32px; border-radius: var(--r-md); background: linear-gradient(140deg, var(--accent), var(--accent-active)); color: white; font-weight: 600; font-size: 12px; display: grid; place-items: center; flex-shrink: 0; }
.sidebar-user .who { min-width: 0; flex: 1; }
.sidebar-user .who .n { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user .who .e { font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-pill { margin: 8px; padding: 6px 10px; border-radius: var(--r-sm); background: var(--success-soft); color: var(--success); font-size: 11.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.status-pill .dot { width: 6px; height: 6px; border-radius: 99px; background: var(--success); }
.status-pill .dot.anim { animation: pulse 1.8s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 15px; border-radius: var(--r-md);
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em;
  border: 1px solid transparent; white-space: nowrap;
  transition: background-color .16s ease, border-color .16s ease,
              box-shadow .16s ease, transform .1s ease, color .16s ease;
}
/* Hundimiento al pulsar: antes solo bajaba medio pixel y no se notaba. */
.btn:active { transform: scale(.975); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); box-shadow: var(--shadow-md); }
.btn-primary:active:not(:disabled) { background: var(--accent-active); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-danger { background: var(--danger-soft); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: white; }
.btn-icon { width: 38px; padding: 0; justify-content: center; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-sm.btn-icon { width: 32px; }
.btn-xs { height: 27px; padding: 0 10px; font-size: 12.5px; }
.btn-xs.btn-icon { width: 27px; }

/* ── Chips ── */
.chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: var(--r-full); font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); white-space: nowrap; }
.chip .dot { width: 6px; height: 6px; border-radius: 99px; background: currentColor; opacity: .9; }
.chip.success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.chip.warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.chip.danger  { background: var(--danger-soft);  color: var(--danger);  border-color: transparent; }
.chip.info    { background: var(--info-soft);    color: var(--info);    border-color: transparent; }
.chip.accent  { background: var(--accent-soft);  color: var(--accent);  border-color: transparent; }

/* ── Cards & Panels ── */
/* Los paneles se separan del fondo por sombra y no por un borde duro:
   apilar borde + sombra + fondo blanco es el aspecto de tarjeta generico. */
.card, .panel {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.panel { overflow: hidden; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px; border-bottom: 1px solid var(--border);
}
.panel-head h3 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.012em; }
.panel-head .sub { font-size: 12.5px; color: var(--text-3); font-weight: 500; }
.panel-body { padding: 16px 18px; }
.panel-body.flush { padding: 0; }

/* ── Page header ── */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.page-title { font-size: 26px; font-weight: 800; letter-spacing: -0.025em; margin: 0 0 5px; }
.page-subtitle { font-size: 14px; color: var(--text-3); margin: 0; max-width: 62ch; }

/* ── Tabs ── */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.tab { padding: 11px 16px; font-size: 13.5px; font-weight: 600; color: var(--text-3); border-bottom: 2.5px solid transparent; margin-bottom: -1px; cursor: pointer; border-radius: var(--r-sm) var(--r-sm) 0 0; transition: color .16s, background-color .16s, border-color .16s; }
.tab:hover { background: var(--surface-2); }
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-color: var(--accent); }
.tab .count { font-size: 11px; color: var(--text-4); margin-left: 4px; }

/* ── Segmented ── */
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); padding: 2px; border-radius: var(--r-md); }
.seg button { padding: 4px 10px; font-size: 12px; font-weight: 500; color: var(--text-3); border-radius: 5px; transition: all .12s; }
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* ── Progress ── */
.progress { height: 4px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .6s cubic-bezier(.2,.7,.3,1); }
.progress.success > span { background: var(--success); }
.progress.warning > span { background: var(--warning); }

/* ── Empty ── */
.empty { text-align: center; padding: 48px 24px; color: var(--text-3); }
.empty .ico { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--surface-2); color: var(--text-3); display: inline-grid; place-items: center; margin-bottom: 12px; font-size: 20px; }
.empty h4 { margin: 0 0 4px; font-size: 14px; color: var(--text); }
.empty p { margin: 0; font-size: 13px; }

/* ── Entity list ── */
.entity-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.entity-toolbar .search-local { position: relative; min-width: 260px; }
.entity-toolbar .search-local input { width: 100%; height: 34px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-md); padding: 0 12px 0 32px; outline: none; }
.entity-toolbar .search-local input:focus { border-color: var(--accent); box-shadow: var(--shadow-focus); }
.entity-toolbar .search-local .s-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: 16px; }
.entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.entity-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; cursor: pointer; transition: all .15s; position: relative; display: flex; flex-direction: column; gap: 14px; }
.entity-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.entity-card .head { display: flex; align-items: flex-start; gap: 12px; }
/* Escudo de entidad: squircle en lugar de circulo o cuadrado, y seis tonos
   distintos (antes c0 y c5 eran el mismo rojo). Los degradados son radiales
   descentrados para que no parezcan todos el mismo bloque. */
.entity-card .crest {
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--border);
  display: grid; place-items: center; flex-shrink: 0;
  font-size: 17px; font-weight: 800; letter-spacing: -0.02em; overflow: hidden;
}
.entity-card .crest.c0 { background: radial-gradient(120% 120% at 25% 15%, #d9f0ec, #b4e0da); color: #0b6f65; border-color: transparent; }
.entity-card .crest.c1 { background: radial-gradient(120% 120% at 25% 15%, #dcf1e5, #c0e5d1); color: #17734b; border-color: transparent; }
.entity-card .crest.c2 { background: radial-gradient(120% 120% at 25% 15%, #dfeaf8, #c3d8f0); color: #1a5f96; border-color: transparent; }
.entity-card .crest.c3 { background: radial-gradient(120% 120% at 25% 15%, #fbeccd, #f5dca6); color: #8a5a00; border-color: transparent; }
.entity-card .crest.c4 { background: radial-gradient(120% 120% at 25% 15%, #e8e3f6, #d3cbec); color: #5c46a0; border-color: transparent; }
.entity-card .crest.c5 { background: radial-gradient(120% 120% at 25% 15%, #f8e0e6, #eec6d2); color: #a13a5c; border-color: transparent; }
.entity-card h3 { margin: 0 0 2px; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.entity-card .region { font-size: 12px; color: var(--text-3); }
.entity-card .stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.entity-card .stat .v { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.entity-card .stat .l { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-4); font-weight: 500; }
.entity-card .foot { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--text-3); }
.entity-card .menu-btn { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 6px; color: var(--text-3); display: grid; place-items: center; opacity: 0; transition: opacity .12s; font-size: 18px; }
.entity-card:hover .menu-btn { opacity: 1; }
.entity-card .menu-btn:hover { background: var(--surface-2); }

/* ── Detail hero ── */
.detail-hero { display: flex; gap: 20px; align-items: flex-start; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 20px; }
.detail-hero .crest { width: 68px; height: 68px; border-radius: 20px; display: grid; place-items: center; flex-shrink: 0; font-size: 24px; font-weight: 700; }
.detail-hero .meta { flex: 1; min-width: 0; }
.detail-hero h1 { margin: 0 0 4px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.detail-hero .sub { color: var(--text-3); font-size: 13px; }
.detail-hero .facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12.5px; color: var(--text-3); }
.detail-hero .facts span b { color: var(--text-2); font-weight: 500; }
.detail-hero .actions { display: flex; gap: 8px; flex-shrink: 0; align-items: flex-start; }

/* ── KPI / split ── */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.kpi { padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.kpi .label { font-size: 12px; color: var(--text-3); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.kpi .value { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.kpi .sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.split { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
@media (max-width: 1100px) { .split { grid-template-columns: 1fr; } }

/* ── Timeline ── */
.timeline { display: flex; flex-direction: column; gap: 2px; }
.tl-item { display: flex; gap: 12px; padding: 10px 16px; align-items: flex-start; }
.tl-item:hover { background: var(--surface-2); }
.tl-item .ico { width: 28px; height: 28px; border-radius: 7px; background: var(--surface-2); color: var(--text-3); display: grid; place-items: center; flex-shrink: 0; font-size: 16px; }
.tl-item.accent .ico { background: var(--accent-soft); color: var(--accent); }
.tl-item.success .ico { background: var(--success-soft); color: var(--success); }
.tl-item.info .ico { background: var(--info-soft); color: var(--info); }
.tl-item.warn .ico { background: var(--warning-soft); color: var(--warning); }
.tl-item .body { flex: 1; min-width: 0; }
.tl-item .body p { margin: 0; font-size: 13px; }
.tl-item .body .when { font-size: 11.5px; color: var(--text-4); margin-top: 2px; }

/* ── Doc table ── */
.doc-table { width: 100%; border-collapse: collapse; }
.doc-table th, .doc-table td { padding: 10px 14px; font-size: 13px; border-bottom: 1px solid var(--border); text-align: left; }
.doc-table tr:last-child td { border-bottom: 0; }
.doc-table th { background: var(--surface-2); font-weight: 600; color: var(--text-2); font-size: 12px; position: sticky; top: 0; z-index: 1; }
.doc-table tbody tr:hover { background: var(--surface-2); }
.doc-table .doc-name { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.doc-table .ft { width: 28px; height: 32px; border-radius: 4px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; background: var(--accent-softer); color: var(--accent); }
.doc-table .ft.pdf  { background: var(--danger-soft);  color: var(--danger); }
.doc-table .ft.xlsx { background: var(--success-soft); color: var(--success); }
.doc-table .ft.docx { background: var(--info-soft);    color: var(--info); }

/* ── Upload zone ── */
.upload-zone { border: 2px dashed var(--border); border-radius: var(--r-lg); padding: 32px; text-align: center; cursor: pointer; transition: all .15s; color: var(--text-3); }
.upload-zone:hover, .upload-zone.drag-over { border-color: var(--accent); background: var(--accent-softer); color: var(--accent); }
.upload-zone .u-icon { font-size: 32px; margin-bottom: 8px; }
.upload-zone p { margin: 4px 0; font-size: 13px; }
.upload-zone small { font-size: 11.5px; color: var(--text-4); }

/* ── Ramas ── */
.rama-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
/* El color de cada rama llega como --chip desde RamasCard.js. */
.rama-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 6px 5px 10px; border-radius: var(--r-full);
  font-size: 12.5px; font-weight: 500; line-height: 1.4;
  cursor: pointer; user-select: none; transition: all .12s;
  color: var(--chip, var(--text-2));
  background: color-mix(in srgb, var(--chip, var(--text-3)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--chip, var(--text-3)) 28%, transparent);
  opacity: .75;
}
.rama-chip:hover { opacity: 1; }
/* El estado activo se marca con fondo y borde mas firmes, no con un anillo
   duro: con el gris del chip Default el anillo parecia un borde negro. */
.rama-chip.active {
  opacity: 1; font-weight: 700;
  background: color-mix(in srgb, var(--chip, var(--text-3)) 20%, transparent);
  border-color: color-mix(in srgb, var(--chip, var(--text-3)) 50%, transparent);
  box-shadow: var(--shadow-sm);
}
.rama-chip .ico { font-size: 14px; flex-shrink: 0; }
.rama-chip .lbl { white-space: nowrap; }
/* El boton de borrar tenia solo clases Tailwind, que no se cargan en este
   proyecto: no habia area de pulsacion ni estado hover. */
.rama-chip .del {
  display: grid; place-items: center; flex-shrink: 0;
  width: 18px; height: 18px; padding: 0; margin-left: 2px;
  border: 0; border-radius: var(--r-full);
  color: inherit; background: transparent; cursor: pointer;
  opacity: .6; transition: background .12s, opacity .12s, color .12s;
}
.rama-chip .del .material-icons { font-size: 13px; line-height: 1; }
.rama-chip .del:hover {
  opacity: 1; color: var(--danger);
  background: color-mix(in srgb, var(--danger) 16%, transparent);
}
.rama-chip .del:focus-visible {
  opacity: 1; outline: 2px solid var(--danger); outline-offset: 1px;
}

/* ── Chat ── */
.chat-shell { display: grid; grid-template-columns: 260px 1fr; height: 100%; min-height: 0; overflow: hidden; background: var(--bg); }
@media (max-width: 1024px) { .chat-shell { grid-template-columns: 1fr; } .chat-history { display: none; } }
.chat-history { background: var(--surface); border-right: 1px solid var(--border); padding: 14px 10px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.chat-history .ch-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-4); font-weight: 600; padding: 8px 10px; }
.chat-history-item { padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; display: flex; flex-direction: column; gap: 2px; transition: background .1s; }
.chat-history-item:hover { background: var(--surface-2); }
.chat-history-item.active { background: var(--surface-2); }
.chat-history-item .t { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-history-item .m { font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; overflow: hidden; background: var(--bg); }
.chat-head { padding: 14px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; background: var(--surface); flex-shrink: 0; }
.chat-head .crest { width: 34px; height: 34px; border-radius: var(--r-md); display: grid; place-items: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.chat-head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.chat-head .sub { font-size: 12px; color: var(--text-3); }
.chat-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 24px 32px 12px; }
.chat-messages { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; min-height: 0; }
.msg { display: flex; gap: 13px; }
.msg + .msg { margin-top: 22px; }
.msg .avatar { width: 32px; height: 32px; border-radius: var(--r-md); flex-shrink: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.msg .avatar .material-icons { font-size: 17px; }
.msg .avatar.user { background: var(--surface-3); color: var(--text-2); }
.msg .avatar.bot  { background: var(--accent); color: var(--on-accent); }
.msg .body { flex: 1; min-width: 0; }
.msg .meta { font-size: 12.5px; color: var(--text-3); margin-bottom: 5px; display: flex; align-items: center; gap: 8px; }
.msg .meta b { color: var(--text); font-weight: 700; }
.msg .content { font-size: 15px; line-height: 1.65; color: var(--text); max-width: 74ch; }
.msg .content p { margin: 0 0 8px; }
.msg .content p:last-child { margin-bottom: 0; }
.msg .content ul { margin: 8px 0; padding-left: 20px; }
.msg .content li { margin-bottom: 4px; }
.msg .content code { font-family: var(--font-mono); background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; border: 1px solid var(--border); }
.msg-actions { display: flex; align-items: center; gap: 4px; margin-top: 8px; opacity: 0; transition: opacity .15s; }
.msg:hover .msg-actions { opacity: 1; }
.msg-actions button { width: 26px; height: 26px; border-radius: 6px; color: var(--text-3); display: grid; place-items: center; transition: all .1s; font-size: 16px; }
.msg-actions button:hover { background: var(--surface-2); color: var(--text); }
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.suggestion { padding: 6px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-full); font-size: 12.5px; color: var(--text-2); cursor: pointer; transition: all .1s; }
.suggestion:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-softer); }
.chat-composer-wrap { padding: 12px 32px 20px; background: var(--bg); flex-shrink: 0; }
.chat-composer { max-width: 720px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 10px 10px 14px; box-shadow: var(--shadow-md); transition: border-color .12s; }
.chat-composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-md); }
.chat-composer textarea { width: 100%; border: 0; resize: none; outline: 0; background: transparent; font-size: 14px; line-height: 1.5; min-height: 22px; max-height: 180px; }
.chat-composer textarea::placeholder { color: var(--text-4); }
.chat-composer .tools { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.chat-composer .tools .sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.chat-composer .tool-btn { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: 6px; font-size: 12px; color: var(--text-3); transition: all .1s; }
.chat-composer .tool-btn:hover { background: var(--surface-2); color: var(--text); }
.chat-composer .send { margin-left: auto; width: 28px; height: 28px; border-radius: 7px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; transition: all .12s; font-size: 18px; }
.chat-composer .send:hover { background: var(--accent-hover); }
.chat-composer .send:disabled { background: var(--border-strong); cursor: not-allowed; }
.chat-disclaimer { text-align: center; font-size: 11.5px; color: var(--text-4); margin-top: 6px; max-width: 720px; margin-left: auto; margin-right: auto; }

/* ── Settings ── */
/* El max-width de 1000px se centraba solo, porque `.content > *` lleva
   margin-inline:auto para limitar el ancho en pantallas grandes. Eso dejaba el
   submenú 64px a la derecha del título, que sí ocupa todo el ancho. Con
   margin-inline:0 la caja se alinea con la cabecera de la página. */
/* Sin max-width propio: la caja ocupa el mismo ancho que la cabecera y es la
   columna del panel la que se limita, de modo que ambos comparten borde. */
.settings-shell {
  display: grid; grid-template-columns: 210px minmax(0, 760px);
  gap: 28px; align-items: start;
}
/* El submenu es una columna de navegacion: se queda a la vista al bajar. */
.settings-nav { position: sticky; top: 0; }

.settings-nav { display: flex; flex-direction: column; gap: 2px; }
.settings-nav button { padding: 8px 10px; border-radius: var(--r-sm); font-size: 13px; color: var(--text-2); text-align: left; display: flex; align-items: center; gap: 8px; transition: all .12s; }
.settings-nav button:hover { background: var(--surface-2); color: var(--text); }
.settings-nav button.active { background: var(--surface-2); color: var(--text); font-weight: 500; }
/* space-between empujaba el control al borde derecho del panel, dejando
   hasta 475px de vacio entre la etiqueta y su campo. Con el texto limitado a
   su ancho natural, el control queda a una distancia legible. */
.setting-row {
  display: flex; align-items: center; gap: 32px;
  padding: 16px 0; border-bottom: 1px solid var(--border);
}
.setting-row > :first-child { flex: 1 1 auto; min-width: 0; max-width: 46ch; }
.setting-row:last-child { border-bottom: 0; }
.setting-row .label {
  font-weight: 600; font-size: 14px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
}
.setting-row .desc { font-size: 12.5px; color: var(--text-3); margin-top: 3px; line-height: 1.45; }
.setting-row .control { flex-shrink: 0; margin-left: auto; }

@media (max-width: 720px) {
  /* En estrecho, etiqueta arriba y control debajo: en una sola linea el campo
     se comprime hasta ser inusable. */
  .setting-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .setting-row > :first-child { max-width: none; }
  .setting-row .control { margin-left: 0; }
  .setting-row .control .input { width: 100% !important; }
}
.switch { position: relative; width: 34px; height: 20px; background: var(--border-strong); border-radius: 99px; cursor: pointer; transition: background .15s; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: white; border-radius: 99px; box-shadow: var(--shadow-sm); transition: transform .15s; }
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(14px); }

/* ── Input ── */
.input {
  height: 40px; width: 100%; padding: 0 13px;
  border: 1.5px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-2); outline: none;
  font-size: 14px; font-weight: 500; color: var(--text);
  transition: background-color .16s, border-color .16s, box-shadow .16s;
}
.input::placeholder { color: var(--text-4); font-weight: 400; }
.input:hover:not(:focus) { border-color: var(--border-strong); }
.input:focus { background: var(--surface); border-color: var(--accent); box-shadow: var(--shadow-focus); }
textarea.input { height: auto; min-height: 84px; padding: 10px 13px; line-height: 1.55; resize: vertical; }
select.input { cursor: pointer; }

/* ── Modal ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); backdrop-filter: blur(4px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); width: 100%; max-width: 440px; overflow: hidden; animation: modal-in .15s ease; }
@keyframes modal-in { from{transform:scale(.96);opacity:0} to{transform:scale(1);opacity:1} }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 14px; border-bottom: 1px solid var(--border); }
.modal-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); }
.form-label { font-size: 13px; font-weight: 500; color: var(--text-2); margin-bottom: 6px; display: block; }
.form-error { font-size: 12px; color: var(--danger); margin-top: 4px; }

/* ── Badges ── */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.badge.ingestado { background: var(--success-soft); color: var(--success); }
.badge.pendiente  { background: var(--warning-soft); color: var(--warning); }
.badge.error      { background: var(--danger-soft);  color: var(--danger); }
.badge.vacio      { background: var(--surface-2);    color: var(--text-3); }

/* ── Dashboard ── */
.dash-header { margin-bottom: 24px; }
.dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.dash-kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 18px; display: flex; align-items: flex-start; gap: 14px;
  box-shadow: var(--shadow-sm); transition: box-shadow .15s;
}
.dash-kpi:hover { box-shadow: var(--shadow-md); }
.dk-icon { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; flex-shrink: 0; }
.dk-icon .material-icons { font-size: 22px; }
.dk-val { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.dk-label { font-size: 13px; font-weight: 500; color: var(--text-2); margin-top: 4px; }
.dk-sub { font-size: 11.5px; color: var(--text-4); margin-top: 2px; }
.dash-cols { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.dash-main { display: flex; flex-direction: column; gap: 16px; }
.dash-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.dash-ent-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--border); transition: background .1s;
}
.dash-ent-row:last-child { border-bottom: 0; }
.dash-ent-row:hover { background: var(--surface-2); }
.dash-rank { width: 20px; font-size: 13px; font-weight: 600; color: var(--text-4); text-align: center; flex-shrink: 0; }
.dash-bar-wrap { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.dash-bar { flex: 1; height: 4px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.dash-bar-fill { height: 100%; background: var(--accent); border-radius: 99px; transition: width .4s; }
.dash-alert-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  border-bottom: 1px solid var(--border); transition: background .1s;
}
.dash-alert-row:last-child { border-bottom: 0; }
.dash-alert-row:hover { background: var(--surface-2); }
@media (max-width: 1100px) { .dash-kpis { grid-template-columns: repeat(2,1fr); } .dash-cols { grid-template-columns: 1fr; } .dash-side { position: static; } }

/* ── Helpers ── */
.hr { height: 1px; background: var(--border); border: 0; margin: 16px 0; }
.spin { animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Login Page ── */
.login-page {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
  /* Dos degradados radiales descentrados en vez de un lineal de 45 grados:
     da profundidad sin parecer una plantilla. */
  background:
    radial-gradient(1100px 520px at 12% -8%, var(--accent-softer) 0%, transparent 58%),
    radial-gradient(900px 480px at 92% 104%, var(--accent-soft) 0%, transparent 62%),
    var(--bg);
}
.login-card {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: var(--r-xl); padding: 40px 36px; width: 100%; max-width: 420px;
  box-shadow: var(--shadow-lg);
}
.login-brand { text-align: center; margin-bottom: 32px; }
.login-logo {
  width: 60px; height: 60px; border-radius: 20px;
  background: linear-gradient(145deg, var(--accent), var(--accent-active));
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 36%, transparent),
              inset 0 1px 0 rgba(255,255,255,.28);
}
.login-logo .material-icons { font-size: 30px; }
.login-brand h1 { font-size: 27px; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 7px; color: var(--text); }
.login-brand h1 span { color: var(--accent); }
.login-brand p  { font-size: 14px; color: var(--text-3); margin: 0 auto; font-weight: 500; max-width: 30ch; line-height: 1.5; }
.login-form { display: flex; flex-direction: column; gap: 17px; }
.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-group > label {
  font-size: 13px; font-weight: 700; color: var(--text-2); letter-spacing: -0.005em;
}
.form-group > input, .form-group > select, .form-group > textarea {
  width: 100%; height: 44px; padding: 0 14px;
  border: 1.5px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--text);
  font-size: 15px; font-weight: 500; outline: none;
  transition: background-color .16s, border-color .16s, box-shadow .16s;
}
.form-group > textarea { height: auto; min-height: 96px; padding: 11px 14px; line-height: 1.55; resize: vertical; }
.form-group > input::placeholder { color: var(--text-4); font-weight: 400; }
.form-group > input:hover:not(:focus) { border-color: var(--border-strong); }
.form-group > input:focus, .form-group > select:focus, .form-group > textarea:focus {
  background: var(--surface); border-color: var(--accent); box-shadow: var(--shadow-focus);
}
.login-error {
  display: flex; align-items: center; gap: 8px;
  background: var(--danger-soft); color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 22%, transparent);
  border-radius: var(--r-md); padding: 11px 14px; font-size: 13.5px; font-weight: 600;
}
.btn-full { width: 100%; justify-content: center; height: 44px; font-size: 14.5px; }
.login-footer { text-align: center; margin-top: 24px; font-size: 12px; color: var(--text-4); }

/* ── Sidebar role badge + logout ── */
.sidebar-role {
  display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 6px;
  border-radius: var(--r-full); text-transform: uppercase; letter-spacing: .3px;
  margin-left: 4px; vertical-align: 1px;
}
.sidebar-role.superadmin { background: var(--accent-soft); color: var(--accent); }
.sidebar-role.admin      { background: var(--info-soft);   color: var(--info); }
.btn-logout { margin-left: auto; opacity: .6; }
.btn-logout:hover { opacity: 1; }

/* ── Users page ── */
.users-grid { display: flex; flex-direction: column; gap: 10px; }
.user-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 16px 20px;
  transition: box-shadow .15s;
}
.user-card:hover { box-shadow: var(--shadow-md); }
.user-card-head { display: flex; align-items: center; gap: 12px; }
.user-avatar {
  width: 40px; height: 40px; min-width: 40px; border-radius: var(--r-full);
  background: var(--accent); color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 14px; font-weight: 700;
}
.user-info { flex: 1; min-width: 0; }
.user-name { font-weight: 600; font-size: 14px; }
.user-meta { font-size: 12px; color: var(--text-3); margin-top: 1px; }
.user-actions { display: flex; align-items: center; gap: 6px; }
.user-ents { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border); }

/* ── Form helpers ── */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-hint { font-size: 12px; color: var(--text-3); margin: 2px 0 8px; }
.entidades-check-list { display: flex; flex-direction: column; gap: 6px; max-height: 180px; overflow-y: auto; }
.check-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer;
  transition: background .12s;
}
.check-item:hover { background: var(--surface-2); }
.check-item input { accent-color: var(--accent); width: 15px; height: 15px; }

/* chips extra */
.chip-green { background: var(--success-soft); color: var(--success); }
.chip-blue  { background: var(--info-soft);    color: var(--info); }



/* ── Entity type filter bar ── */
.tipo-filter-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tipo-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px; border-radius: var(--r-full);
  border: 1px solid var(--border); font-size: 12.5px;
  background: var(--surface); color: var(--text-2); cursor: pointer;
  transition: all .15s;
}
.tipo-chip:hover { background: var(--surface-2); }
.tipo-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Card tipo selector ── */
.card-tipo-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 0; border-top: 1px solid var(--border); margin-top: 10px;
}
.tipo-select {
  flex: 1; border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 3px 8px; font-size: 12px; background: var(--surface);
  color: var(--text-2); cursor: pointer; transition: all .15s;
  height: 26px;
}
.tipo-select:hover { border-color: var(--accent); }
.tipo-select:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }

/* ── IA type rows in settings ── */
.ia-type-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.ia-type-row:last-child { border-bottom: none; }
.ia-type-row:hover { background: var(--surface-2); }
.ia-type-icon {
  width: 42px; height: 42px; border-radius: var(--r-md); flex-shrink: 0;
  display: grid; place-items: center;
}
.ia-type-icon .material-icons { font-size: 20px; }

/* ── Responsive ── */
/* Tablet: la barra lateral se reduce a iconos. */
@media (max-width: 1000px) {
  :root { --sidebar-w: 64px; }
  .app { grid-template-columns: var(--sidebar-w) 1fr; }
  .sidebar-brand { justify-content: center; padding: 0; }
  .sidebar-brand .name, .nav-item .lbl, .sidebar-user .who,
  .nav-item .count, .status-pill { display: none; }
  .nav-item { justify-content: center; padding: 11px 0; }
  .sidebar-user { justify-content: center; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-hero { flex-direction: column; align-items: flex-start; }
  .content { padding: 20px; }
  .topbar .search { max-width: 260px; }
}

/* Movil: la barra lateral pasa abajo como barra de pestañas, que es donde
   el pulgar alcanza. Antes por debajo de 900px no habia nada y la rejilla
   fija de 240px dejaba el contenido sin espacio. */
@media (max-width: 680px) {
  .app { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .sidebar {
    grid-row: 2; flex-direction: row; align-items: center;
    border-right: 0; border-top: 1px solid var(--border);
    padding: 6px 4px env(safe-area-inset-bottom, 6px);
    overflow-x: auto;
  }
  .sidebar-brand, .sidebar-footer { display: none; }
  .sidebar-section { display: flex; flex: 1; gap: 4px; padding: 0; }
  .sidebar-section-title { display: none; }
  .nav-item { flex: 1; flex-direction: column; gap: 3px; padding: 8px 4px; font-size: 11px; }
  .nav-item .lbl { display: block; font-size: 10.5px; }
  .nav-item.active::before { display: none; }
  .main { grid-row: 1; }
  .topbar { height: 56px; padding: 0 14px; gap: 10px; }
  .topbar .crumbs { display: none; }
  .topbar .search { max-width: none; margin-left: 0; }
  .content { padding: 16px 14px 20px; }
  .page-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .page-title { font-size: 22px; }
  .kpi-grid { grid-template-columns: 1fr; }
  .panel-head { flex-wrap: wrap; padding: 13px 14px; }
  .panel-body { padding: 14px; }
  /* Las tablas se desbordan en su propio contenedor, nunca la pagina. */
  .doc-table, .users-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ── Chat: cuerpo del mensaje en Markdown ──────────────────── */
/* El asistente responde en Markdown; antes se inyectaba crudo y se veian
   los asteriscos literales. renderMarkdown() escapa y reconstruye. */
.msg-body > *:first-child { margin-top: 0; }
.msg-body > *:last-child  { margin-bottom: 0; }
.msg-body p  { margin: 0 0 8px; }
.msg-body ul, .msg-body ol { margin: 6px 0 8px; padding-left: 20px; }
.msg-body li { margin: 3px 0; }
.msg-body h3, .msg-body h4, .msg-body h5, .msg-body h6 {
  margin: 12px 0 6px; font-size: 13.5px; font-weight: 600; line-height: 1.35;
}
.msg-body code {
  font-family: var(--font-mono); font-size: 12.5px;
  background: var(--surface-3); padding: 1px 5px; border-radius: var(--r-xs);
}
.msg-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.msg-body strong { font-weight: 600; }

/* Marcador de cita [1] dentro del texto */
.msg-body .cite {
  display: inline-block; min-width: 15px; height: 15px; line-height: 15px;
  margin: 0 1px 0 2px; padding: 0 3px;
  font-size: 9.5px; font-weight: 600; font-family: var(--font-mono);
  text-align: center; vertical-align: 2px;
  color: var(--accent); background: var(--accent-soft);
  border-radius: var(--r-xs);
}

/* ── Chat: bloque de fuentes citadas ───────────────────────── */
.msg-sources { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.msg-sources summary {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 500; color: var(--text-3);
  cursor: pointer; user-select: none; list-style: none;
}
.msg-sources summary::-webkit-details-marker { display: none; }
.msg-sources summary:hover { color: var(--text-2); }
.msg-sources summary .material-icons { font-size: 13px; }
.msg-sources[open] summary { margin-bottom: 6px; }
.msg-sources ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.msg-sources li {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--text-3); line-height: 1.4;
}
.msg-sources .src-n {
  flex-shrink: 0; min-width: 15px; height: 15px; line-height: 15px;
  font-size: 9.5px; font-weight: 600; font-family: var(--font-mono); text-align: center;
  color: var(--accent); background: var(--accent-soft); border-radius: var(--r-xs);
}
.msg-sources .src-file { color: var(--text-2); font-weight: 500; word-break: break-word; }
.msg-sources .src-page { color: var(--text-4); font-variant-numeric: tabular-nums; }
.msg-sources .src-head { color: var(--text-4); }

/* ── Zona de arrastre de documentos ────────────────────────── */
/* Antes llevaba `margin:0 16px` y un `padding` declarado dos veces, asi que
   no ocupaba el ancho del panel. Ahora se pega a los bordes del panel. */
.dropzone {
  display: flex; align-items: center; gap: 10px;
  width: 100%; margin: 0; padding: 14px 16px;
  background: var(--accent-softer);
  border: 0; border-bottom: 1px solid var(--border);
  /* El borde discontinuo se dibuja dentro para no alterar el ancho. */
  box-shadow: inset 0 0 0 2px transparent;
  cursor: pointer; text-align: left;
  transition: background .12s, box-shadow .12s;
}
.dropzone:hover { background: var(--accent-soft); }
.dropzone:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dropzone.drag-over {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.dropzone .dz-icon { color: var(--accent); font-size: 20px; flex-shrink: 0; }
.dropzone .dz-text { min-width: 0; }
.dropzone .dz-title { font-size: 13px; font-weight: 500; }
.dropzone .dz-hint  { font-size: 12px; color: var(--text-3); }
.dropzone.drag-over .dz-title { color: var(--accent); }

@media (max-width: 520px) {
  .dropzone { padding: 12px; }
  .dropzone .dz-title { font-size: 12.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Capa de compatibilidad de utilidades
   ─────────────────────────────────────────────────────────────────────
   Los componentes se escribieron con clases de Tailwind, pero Tailwind
   nunca se cargo en este proyecto: index.html solo trae css/app.css. El
   resultado era que ~118 usos de clases de maquetacion no hacian nada, y
   de ahi que la interfaz se viera desarmada.

   En vez de reescribir el markup de 7.000 lineas, aqui se definen esas
   utilidades de verdad, mapeadas sobre los tokens de este sistema. Los
   colores `slate` apuntan a los neutros propios, asi que el tema oscuro y
   el claro funcionan sin variantes `dark:` duplicadas.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Display y flexbox ── */
.flex        { display: flex; }
.inline-flex { display: inline-flex; }
.grid        { display: grid; }
.block       { display: block; }
.inline-block{ display: inline-block; }
.hidden      { display: none; }
.flex-col    { flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.flex-1      { flex: 1 1 0%; }
.flex-shrink-0, .shrink-0 { flex-shrink: 0; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.self-start { align-self: flex-start; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.inset-0  { inset: 0; }

/* ── Espaciado (escala de 4px, como la de Tailwind) ── */
.gap-1{gap:4px}    .gap-1\.5{gap:6px}  .gap-2{gap:8px}   .gap-2\.5{gap:10px}
.gap-3{gap:12px}   .gap-4{gap:16px}    .gap-5{gap:20px}  .gap-6{gap:24px}
.p-0\.5{padding:2px} .p-1{padding:4px} .p-1\.5{padding:6px} .p-2{padding:8px}
.p-3{padding:12px} .p-4{padding:16px}  .p-5{padding:20px} .p-6{padding:24px}
.px-2{padding-inline:8px}  .px-3{padding-inline:12px} .px-4{padding-inline:16px}
.px-5{padding-inline:20px} .px-6{padding-inline:24px}
.py-1{padding-block:4px}   .py-1\.5{padding-block:6px} .py-2{padding-block:8px}
.py-2\.5{padding-block:10px} .py-3{padding-block:12px} .py-5{padding-block:20px}
.pt-6{padding-top:24px} .pb-4{padding-bottom:16px} .pb-6{padding-bottom:24px}
.pl-10{padding-left:40px} .pr-4{padding-right:16px}
.mb-1{margin-bottom:4px} .mb-1\.5{margin-bottom:6px} .mb-2{margin-bottom:8px}
.mb-4{margin-bottom:16px} .mb-6{margin-bottom:24px}
.mt-0\.5{margin-top:2px} .mt-2{margin-top:8px} .ml-0\.5{margin-left:2px}
.mx-auto{margin-inline:auto}

/* ── Tipografía ── */
.text-xs   { font-size: 12px;   line-height: 1.45; }
.text-sm   { font-size: 13.5px; line-height: 1.5; }
.text-base { font-size: 15px;   line-height: 1.55; }
.text-lg   { font-size: 17px;   line-height: 1.4; }
.text-xl   { font-size: 20px;   line-height: 1.3; }
.text-2xl  { font-size: 24px;   line-height: 1.25; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.text-center { text-align: center; }
.text-left   { text-align: left; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uppercase { text-transform: uppercase; letter-spacing: .06em; }
.whitespace-nowrap { white-space: nowrap; }

/* ── Color: los nombres `slate` se reasignan a los neutros del sistema,
      de modo que el tema oscuro funciona sin declarar variantes dark:. ── */
.text-slate-800, .text-slate-900 { color: var(--text); }
.text-slate-700, .text-slate-600 { color: var(--text-2); }
.text-slate-500                  { color: var(--text-3); }
.text-slate-400, .text-slate-300 { color: var(--text-4); }
.text-white   { color: #fff; }
.text-primary { color: var(--accent); }
.text-red-500 { color: var(--danger); }
.bg-white     { background: var(--surface); }
.bg-slate-50  { background: var(--surface-2); }
.bg-slate-100 { background: var(--surface-2); }
.bg-slate-200, .bg-slate-700, .bg-slate-800, .bg-slate-900 { background: var(--surface-3); }
.bg-primary   { background: var(--accent); color: var(--on-accent); }
.bg-transparent { background: transparent; }
/* Las variantes dark: quedan neutralizadas: los tokens ya cambian solos. */
[class*="dark\:bg-slate"], [class*="dark\:text-slate"], [class*="dark\:border-slate"] { }

/* ── Bordes y radios ── */
.border    { border: 1px solid var(--border); }
.border-t  { border-top: 1px solid var(--border); }
.border-b  { border-bottom: 1px solid var(--border); }
.border-slate-100, .border-slate-200, .border-slate-700, .border-slate-800 { border-color: var(--border); }
.border-red-400 { border-color: var(--danger); }
.rounded      { border-radius: var(--r-sm); }
.rounded-lg   { border-radius: var(--r-md); }
.rounded-xl   { border-radius: var(--r-lg); }
.rounded-2xl  { border-radius: var(--r-xl); }
.rounded-full { border-radius: var(--r-full); }

/* ── Sombras, opacidad, transiciones ── */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow    { box-shadow: var(--shadow-md); }
.shadow-2xl, .shadow-lg { box-shadow: var(--shadow-lg); }
.opacity-70 { opacity: .7; }
.transition-all, .transition-colors, .transition-opacity {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease,
              box-shadow .18s ease, opacity .18s ease, transform .18s ease;
}
.duration-200 { transition-duration: .2s; }
.cursor-pointer { cursor: pointer; }
.select-none { user-select: none; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }

/* ── Estados interactivos, que era lo que mas se echaba en falta ── */
.hover\:opacity-100:hover { opacity: 1; }
.hover\:bg-slate-100:hover, .hover\:bg-slate-200:hover { background: var(--surface-2); }
.hover\:bg-slate-800:hover, .hover\:bg-slate-700:hover { background: var(--surface-3); }
.hover\:text-slate-600:hover { color: var(--text-2); }
.hover\:brightness-110:hover { filter: brightness(1.08); }
.active\:scale-95:active { transform: scale(.97); }

/* ── Tipo de IA: el color es indicador, no color de texto ──── */
/* Los colores los define el usuario en Ajustes y pueden ser claros (lima,
   amarillo). Usarlos como color de texto los volvia ilegibles sobre blanco. */
.chip.tipo-badge { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); gap: 6px; }
.chip.tipo-badge .tipo-dot {
  width: 7px; height: 7px; border-radius: var(--r-full);
  background: var(--tipo, var(--text-3)); flex-shrink: 0;
}
.chip.tipo-badge .material-icons { font-size: 13px; color: var(--tipo, var(--text-3)); }

.card-tipo-row .tipo-select {
  color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border); border-left: 3px solid var(--tipo, var(--border-strong));
  font-weight: 600;
}
.card-tipo-row .tipo-select:hover { border-color: var(--border-strong); border-left-color: var(--tipo, var(--border-strong)); }

/* ── Salud del sistema ─────────────────────────────────────── */
.health-row + .health-row { margin-top: 0; }
.health-label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 7px;
}
.health-label .health-value { color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.health-track { height: 7px; background: var(--surface-3); border-radius: var(--r-full); overflow: hidden; }
.health-fill {
  height: 100%; border-radius: var(--r-full); background: var(--accent);
  transition: width .4s cubic-bezier(.4,0,.2,1);
}
.health-fill.warn { background: var(--warning); }
.health-fill.bad  { background: var(--danger); }

/* ── Buscador global ───────────────────────────────────────── */
/* El input existia en la barra superior desde el principio pero no tenia
   ningun listener: escribir en el no hacia nada. */
.topbar .search { position: relative; }
.search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  z-index: var(--z-dropdown);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: 6px; max-height: 60vh; overflow-y: auto;
}
.search-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 10px; border-radius: var(--r-md); text-align: left;
  color: var(--text); transition: background-color .12s;
}
.search-item:hover, .search-item.active { background: var(--accent-softer); }
.search-item .si-ico { font-size: 18px; color: var(--text-3); flex-shrink: 0; }
.search-item.active .si-ico { color: var(--accent); }
.search-item .si-text { display: flex; flex-direction: column; min-width: 0; }
.search-item .si-title {
  font-size: 13.5px; font-weight: 600; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-item .si-sub {
  font-size: 12px; color: var(--text-3); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-empty { padding: 16px 12px; font-size: 13px; color: var(--text-3); text-align: center; }

/* ── Tabla de entidades ────────────────────────────────────── */
/* `.entity-table` no tenia ni una regla: salia como tabla del navegador,
   sin contenedor, sin ancho completo y con las cabeceras pegadas. */
.table-wrap { padding: 0; overflow-x: auto; }
.entity-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.entity-table th, .entity-table td {
  padding: 13px 16px; text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.entity-table thead th {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--surface-2); color: var(--text-3);
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding-block: 11px;
}
.entity-table tbody tr { cursor: pointer; transition: background-color .12s; }
.entity-table tbody tr:hover { background: var(--accent-softer); }
.entity-table tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.entity-table tbody tr:last-child td { border-bottom: 0; }
/* Los números se alinean a la derecha y con cifras de ancho fijo, para poder
   compararlos de un vistazo entre filas. */
.entity-table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.entity-table .col-entidad { width: 34%; min-width: 240px; white-space: normal; }
.entity-table .col-fecha { color: var(--text-3); font-size: 13px; }

.entity-table .ent-cell { display: flex; align-items: center; gap: 11px; }
/* El escudo estaba definido solo bajo .entity-card, asi que en la tabla
   aparecia como texto suelto sin fondo. */
.entity-table .crest {
  width: 34px; height: 34px; border-radius: var(--r-md);
  display: grid; place-items: center; flex-shrink: 0;
  font-size: 12px; font-weight: 800; letter-spacing: -0.02em;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
}
.entity-table .crest.c0 { background: radial-gradient(120% 120% at 25% 15%, #d9f0ec, #b4e0da); color: #0b6f65; border-color: transparent; }
.entity-table .crest.c1 { background: radial-gradient(120% 120% at 25% 15%, #dcf1e5, #c0e5d1); color: #17734b; border-color: transparent; }
.entity-table .crest.c2 { background: radial-gradient(120% 120% at 25% 15%, #dfeaf8, #c3d8f0); color: #1a5f96; border-color: transparent; }
.entity-table .crest.c3 { background: radial-gradient(120% 120% at 25% 15%, #fbeccd, #f5dca6); color: #8a5a00; border-color: transparent; }
.entity-table .crest.c4 { background: radial-gradient(120% 120% at 25% 15%, #e8e3f6, #d3cbec); color: #5c46a0; border-color: transparent; }
.entity-table .crest.c5 { background: radial-gradient(120% 120% at 25% 15%, #f8e0e6, #eec6d2); color: #a13a5c; border-color: transparent; }

.entity-table .ent-name { display: flex; flex-direction: column; min-width: 0; }
.entity-table .ent-name .n { font-weight: 700; color: var(--text); line-height: 1.3; }
.entity-table .ent-name .i { font-size: 12px; color: var(--text-4); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  /* En pantallas estrechas se ocultan las columnas secundarias antes que
     forzar un scroll horizontal de siete columnas. */
  .entity-table th:nth-child(2), .entity-table td:nth-child(2),
  .entity-table th:nth-child(6), .entity-table td:nth-child(6),
  .entity-table th:nth-child(7), .entity-table td:nth-child(7) { display: none; }
}

/* ── Ajustes: controles aún no implementados ───────────────── */
/* Antes se veían idénticos a los que sí funcionan, y los interruptores
   cambiaban de color sin guardar nada. */
.chip.soon {
  background: var(--warning-soft); color: var(--warning);
  border-color: transparent; font-size: 10.5px; height: 19px;
  padding: 0 7px; margin-left: 7px; vertical-align: 1px; letter-spacing: .01em;
}
.setting-row.is-soon .label { color: var(--text-2); }
.setting-row.is-soon .desc  { color: var(--text-4); }
.setting-row.is-soon .control { opacity: .55; }
.setting-row.is-soon .control :disabled,
.setting-row.is-soon .switch.is-disabled { cursor: not-allowed; }
.switch.is-disabled { pointer-events: none; }

/* ── Chat flotante del detalle de entidad ──────────────────── */
/* Antes reutilizaba el diseño del chat a pantalla completa: avatar, nombre y
   párrafo apilados. En un panel de 380 px eso repetía "Tú" dos veces y dejaba
   el texto muy separado de quién lo dice. Con burbujas se lee de un vistazo. */
.inline-chat-msgs { display: flex; flex-direction: column; gap: 12px; }
.ic-msg { display: flex; }
.ic-msg.user { justify-content: flex-end; }
.ic-msg.bot  { justify-content: flex-start; }
.ic-bubble {
  max-width: 88%; padding: 9px 12px;
  font-size: 13.5px; line-height: 1.55;
  border-radius: var(--r-lg);
}
.ic-msg.user .ic-bubble {
  background: var(--accent); color: var(--on-accent);
  border-bottom-right-radius: var(--r-xs);
}
.ic-msg.bot .ic-bubble {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: var(--r-xs);
}
.ic-bubble .msg-body p { margin: 0 0 7px; }
.ic-bubble .msg-body > *:last-child { margin-bottom: 0; }
.ic-bubble .msg-body ul, .ic-bubble .msg-body ol { padding-left: 18px; margin: 5px 0; }

/* Bloque de fuentes en versión compacta para el panel estrecho. */
.msg-sources.compact { margin-top: 8px; padding-top: 7px; }
.msg-sources.compact summary { font-size: 11px; }
.msg-sources.compact li { font-size: 11px; gap: 5px; }
.msg-sources.compact .src-file { word-break: break-all; }

/* Por debajo de 820px la rejilla de dos columnas deja el panel en una tira
   estrecha, con cada etiqueta partida en tres lineas. El submenu pasa a ser
   una fila de pestañas desplazable y el panel ocupa todo el ancho. */
@media (max-width: 820px) {
  .settings-shell { grid-template-columns: 1fr; gap: 18px; max-width: none; }
  .settings-nav {
    position: static; flex-direction: row; gap: 6px;
    overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav button {
    flex-shrink: 0; white-space: nowrap;
    border: 1px solid var(--border); border-radius: var(--r-full);
    padding: 8px 14px;
  }
  .settings-nav button.active {
    background: var(--accent-softer); color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  }
}

/* ── Listas anidadas en las respuestas del chat ────────────── */
/* El asistente numera pasos y mete viñetas dentro. Sin estas reglas los
   subpuntos quedaban pegados al punto padre y sin sangría propia. */
.msg-body li > ul, .msg-body li > ol { margin: 5px 0 2px; padding-left: 17px; }
.msg-body li > ul li, .msg-body li > ol li { margin: 2px 0; }
.msg-body ol { list-style-position: outside; }
.msg-body ul { list-style: disc outside; }