/* ============================================================================
   iAureo Agents Platform — UI kit
   Fuente única de verdad del estilo. Tema oscuro (único tema).
   Todo valor visual sale de una variable de este archivo; Tailwind las lee
   desde tailwind.config.js (ver handoff/tailwind.config.js).
   Base tipográfica: Inter. Iconos: Phosphor (clases .ph / .ph-fill).
   ========================================================================= */

/* Inter e iconos Phosphor viajan con la aplicacion: el despliegue es on-prem y no
   puede pedirle la tipografia a fonts.googleapis.com. */
@import url('../vendor/inter/inter.css');
@import url('../vendor/phosphor/regular/style.css');
@import url('../vendor/phosphor/fill/style.css');

:root {
  /* ── Fondos ───────────────────────────────────────────────────────────── */
  --ia-bg: #161826;          /* fondo de la aplicación */
  --ia-chrome: #1c1e2b;      /* topbar, menú lateral, cabecera de modal */
  --ia-panel: #1e202d;       /* tarjetas, tablas, paneles */
  --ia-sunken: #20222f;      /* campos de formulario, superficies hundidas */
  --ia-hover: #212330;       /* hover de filas y elementos de menú */

  /* ── Líneas ───────────────────────────────────────────────────────────── */
  --ia-rule: #2f323e;        /* separador por defecto */
  --ia-rule-soft: #262936;   /* separador entre filas de tabla */
  --ia-rule-strong: #3f424d; /* borde de campos y botones secundarios */

  /* ── Texto ────────────────────────────────────────────────────────────── */
  --ia-text: #e9e9ed;        /* texto principal */
  --ia-text-2: #b2b6ca;      /* texto secundario en tablas */
  --ia-text-3: #9397ab;      /* etiquetas, descripciones */
  --ia-text-4: #75798c;      /* iconos de menú, texto terciario */
  --ia-text-faint: #64687a;   /* metadatos, contadores, timestamps */

  /* ── Acento de marca (azul iAureo) ────────────────────────────────────── */
  --ia-accent: #3d90ea;
  --ia-accent-300: #bcd9f8;  /* texto sobre relleno tintado */
  --ia-accent-400: #8fc0f6;  /* iconos y enlaces sobre fondo oscuro */
  --ia-accent-600: #2a6cb4;  /* pressed / degradado de gráficos */
  --ia-accent-soft: rgba(61, 144, 234, .14);   /* relleno tintado */
  --ia-accent-soft-2: rgba(61, 144, 234, .22); /* hover del relleno */

  /* ── Semánticos (estado del dominio) ──────────────────────────────────── */
  --ia-ok: #5ec98a;          /* Activo, Completada, Publicada, Vigente */
  --ia-ok-soft: rgba(94, 201, 138, .12);
  --ia-ok-border: rgba(94, 201, 138, .32);
  --ia-attn: #fbb612;        /* Degradado, En espera, Deprecada, aprobaciones */
  --ia-attn-soft: rgba(251, 182, 18, .15);
  --ia-attn-border: rgba(251, 182, 18, .32);
  --ia-err: #e88b8b;         /* Con error, Fallida, Revocada */
  --ia-err-soft: rgba(232, 139, 139, .12);
  --ia-err-border: rgba(232, 139, 139, .32);
  --ia-info: var(--ia-accent-400); /* En curso */
  --ia-info-soft: rgba(61, 144, 234, .12);
  --ia-info-border: rgba(61, 144, 234, .34);

  /* ── Tipografía ───────────────────────────────────────────────────────── */
  --ia-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ia-font-mono: ui-monospace, "SFMono-Regular", "Consolas", monospace;

  /* ── Radios, sombras, medidas del armazón ─────────────────────────────── */
  --ia-radius-sm: 4px;
  --ia-radius-md: 8px;
  --ia-radius-lg: 14px;
  --ia-shadow-sm: 0 0 0 1px #3f424d;
  --ia-shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0, 0, 0, .55);
  --ia-shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0, 0, 0, .65);
  --ia-topbar-h: 58px;
  --ia-sidebar-w: 248px;
  --ia-rail-w: 64px;
  /* El contenido usa el ancho disponible. A 1320 px una consola densa deja dos
     franjas muertas a los lados en cualquier monitor moderno; el tope alto sigue
     estando para que una linea de texto no se haga ilegible en un ultrapanoramico. */
  --ia-content-max: 1720px;
  /* Ancho de las ventanas de edición: el 85% de lo que queda a la derecha del
     menú, y nunca menos de lo que medían antes.

     El 85% es un suelo, no un techo: en una pantalla de 1280 px ese porcentaje
     daba 877 px, más estrecho que los 960 px que ya tenían las ventanas, así que
     el `max()` conserva el ancho anterior donde el porcentaje se quedaría corto.
     Se calcula contra el menú desplegado —el valor mayor— para que la ventana no
     llegue nunca a montarse encima del menú cuando está abierto. */
  --ia-modal-w: max(
      calc((100vw - var(--ia-sidebar-w)) * .85),
      min(960px, calc(100vw - var(--ia-sidebar-w) - 32px))
  );

  /* ── Roles añadidos al integrar el kit ────────────────────────────────────
     Nacen aquí, no en las hojas que los consumen: el color sigue teniendo un
     único origen. Los usa el puente de Telerik y la capa heredada de site.css. */
  --ia-on-accent: var(--ia-bg);   /* texto sobre un relleno de acento sólido */
  --ia-scrim: rgba(9, 10, 18, .62); /* velo bajo modales y paneles flotantes */
  --ia-shadow-ink: rgba(0, 0, 0, .55); /* tinta de las sombras de lo que flota */
  --ia-code-bg: #191b28;          /* bloques de código y JSON, más hundidos que el campo */
  --ia-ok-strong: #7ad7a2;        /* icono o cifra correcta sobre relleno tintado */
  --ia-attn-strong: #ffcc4d;
  --ia-err-strong: #f3a7a7;
  /* Serie del gráfico: acento primero, luego los semánticos y dos apoyos fríos. */
  --ia-series-1: var(--ia-accent);
  --ia-series-2: var(--ia-ok);
  --ia-series-3: var(--ia-attn);
  --ia-series-4: #9b8cf0;
  --ia-series-5: #4fc3d9;
  --ia-series-6: var(--ia-err);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
/* Le dice al navegador que sus propios controles —desplegables nativos, selector
   de fecha, barras de scroll, autorrelleno— se dibujen en oscuro. Sin esto siguen
   saliendo en claro por mucho que el CSS pinte lo de alrededor. */
:root { color-scheme: dark; }
body {
  margin: 0; background: var(--ia-bg); color: var(--ia-text);
  font-family: var(--ia-font); font-size: 14px; line-height: 1.55;
}
/* Normalización de controles. En el tema claro un input sin `color` heredaba el
   negro por defecto del navegador y nadie lo notaba; sobre fondo oscuro es texto
   invisible. Los controles heredan la tipografía y el color del documento y sólo
   lo cambian quienes lo declaran. */
input, select, textarea, button, optgroup { font-family: inherit; font-size: inherit; color: inherit; }
option, optgroup { background: var(--ia-sunken); color: var(--ia-text); }
textarea { resize: vertical; }
hr { border: 0; border-top: 1px solid var(--ia-rule); }
code, kbd, samp, pre { font-family: var(--ia-font-mono); }
fieldset { border: 1px solid var(--ia-rule); border-radius: var(--ia-radius-md); }
legend { color: var(--ia-text-3); }
table { border-color: var(--ia-rule-soft); }
:disabled { cursor: not-allowed; }
h1, h2, h3, h4 { font-weight: 500; letter-spacing: -.02em; margin: 0; line-height: 1.15; }
h1 { font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 15px; }
a { color: var(--ia-accent); text-decoration: none; }
a:hover { color: var(--ia-accent-400); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ia-accent); outline-offset: 2px; }
::selection { background: var(--ia-accent-soft); }
::placeholder { color: var(--ia-text-faint); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ia-rule-strong); border-radius: 8px; border: 3px solid var(--ia-bg); }

.ia-mono { font-family: var(--ia-font-mono); }
.ia-muted { color: var(--ia-text-3); }
.ia-faint { color: var(--ia-text-faint); }
/* Rótulo de sección: mayúsculas espaciadas sobre cada título de página */
.ia-kicker { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--ia-text-4); }
/* Regla que se desvanece en los extremos (firma visual del sistema) */
.ia-hr { height: 1px; border: 0; margin: 0; background: linear-gradient(to right, transparent, var(--ia-rule), var(--ia-rule), transparent); }

/* ── Armazón: topbar + menú/rail + contenido ─────────────────────────────── */
.ia-shell { height: 100vh; display: grid; grid-template-rows: var(--ia-topbar-h) 1fr; }
.ia-topbar {
  display: flex; align-items: center; gap: 18px; padding: 0 20px;
  border-bottom: 1px solid var(--ia-rule); background: var(--ia-chrome);
}
.ia-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ia-brand img { height: 26px; width: auto; }
.ia-brand span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ia-text-3); padding-top: 4px; }
.ia-topbar-center { flex: 1; display: flex; justify-content: center; min-width: 0; }
.ia-topbar-right { flex-shrink: 0; display: flex; align-items: center; gap: 10px; }

.ia-body { display: grid; grid-template-columns: var(--ia-sidebar-w) 1fr; min-height: 0; }
.ia-body.is-collapsed { grid-template-columns: var(--ia-rail-w) 1fr; }
.ia-sidebar {
  border-right: 1px solid var(--ia-rule); background: var(--ia-chrome);
  min-height: 0; display: flex; flex-direction: column;
}
.ia-sidebar-scroll { flex: 1; overflow-y: auto; padding: 16px 12px 24px; display: flex; flex-direction: column; gap: 20px; }
.ia-sidebar-footer { flex-shrink: 0; border-top: 1px solid var(--ia-rule); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.ia-navgroup { display: flex; flex-direction: column; gap: 2px; }
.ia-navgroup > .ia-navgroup-title { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ia-text-faint); padding: 0 11px 6px; }
.ia-navlink {
  display: flex; align-items: center; gap: 10px; padding: 8px 11px;
  border-radius: var(--ia-radius-md); color: var(--ia-text-2); white-space: nowrap;
}
.ia-navlink i { font-size: 16px; color: var(--ia-text-4); }
.ia-navlink:hover { background: var(--ia-hover); color: var(--ia-text); }
.ia-navlink.is-active { background: var(--ia-accent-soft); color: var(--ia-accent-400); box-shadow: inset 2px 0 0 var(--ia-accent); }
.ia-navlink.is-active i { color: var(--ia-accent-400); }
.ia-navlink-count { margin-left: auto; font-family: var(--ia-font-mono); font-size: 11px; color: var(--ia-text-faint); }
/* Rail plegado: se ocultan las etiquetas y el icono se centra.
   Al pasar el ratón el menú se expande por encima del contenido. */
.ia-body.is-collapsed .ia-sidebar { position: absolute; top: var(--ia-topbar-h); bottom: 0; left: 0; width: var(--ia-rail-w); z-index: 35; transition: width .14s ease; }
.ia-body.is-collapsed .ia-sidebar:hover { width: var(--ia-sidebar-w); box-shadow: var(--ia-shadow-lg); }
.ia-body.is-collapsed .ia-sidebar:not(:hover) .ia-navlink { justify-content: center; }
.ia-body.is-collapsed .ia-sidebar:not(:hover) .ia-navgroup-title,
.ia-body.is-collapsed .ia-sidebar:not(:hover) .ia-navlink-label,
.ia-body.is-collapsed .ia-sidebar:not(:hover) .ia-navlink-count,
.ia-body.is-collapsed .ia-sidebar:not(:hover) .ia-hide-collapsed { display: none; }

.ia-main { overflow-y: auto; padding: 26px 30px 44px; }
.ia-main-inner { max-width: var(--ia-content-max); margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
/* Una pantalla que es un explorador -tres paneles que ya reparten su propio espacio- no gana nada centrada en
   1720px: gana en poder enseñar la tabla entera. La pagina lo pide poniendo .ia-fullbleed en su raiz, y el
   contenedor del armazon se ensancha por :has() sin que el layout tenga que saber quien esta dentro. */
.ia-main-inner:has(> .ia-fullbleed) { max-width: none; }

/* Cabecera de página: rótulo + título + descripción + acciones a la derecha */
.ia-pageheader { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.ia-pageheader p { margin: 6px 0 0; color: var(--ia-text-3); font-size: 13.5px; }
.ia-pageheader-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ── Botones ──────────────────────────────────────────────────────────────
   La acción primaria es un contorno de acento, nunca un relleno saturado. */
.ia-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 14px; border: 1px solid var(--ia-rule-strong); border-radius: var(--ia-radius-md);
  background: transparent; color: var(--ia-text-2);
  font-family: inherit; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.ia-btn:hover { border-color: var(--ia-accent); color: var(--ia-accent-400); }
.ia-btn i { font-size: 15px; }
.ia-btn-primary { border-color: var(--ia-accent); background: var(--ia-accent-soft); color: var(--ia-accent-300); }
.ia-btn-primary:hover { background: var(--ia-accent-soft-2); color: var(--ia-accent-300); }
.ia-btn-ghost { border-color: transparent; }
.ia-btn-ghost:hover { border-color: transparent; background: var(--ia-hover); color: var(--ia-text); }
.ia-btn-danger:hover { border-color: var(--ia-err); color: var(--ia-err); }
.ia-btn-sm { padding: 5px 11px; font-size: 12px; }
.ia-btn:disabled { opacity: .45; cursor: not-allowed; }
.ia-btn:disabled:hover { border-color: var(--ia-rule-strong); color: var(--ia-text-2); }
.ia-iconbtn {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid var(--ia-rule); border-radius: var(--ia-radius-md);
  background: var(--ia-sunken); color: var(--ia-text-2); cursor: pointer; position: relative;
}
.ia-iconbtn:hover { border-color: var(--ia-accent); color: var(--ia-accent-400); }
.ia-iconbtn-sm { width: 28px; height: 28px; border-radius: var(--ia-radius-sm); background: transparent; }
.ia-iconbtn-badge {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; line-height: 16px;
  border-radius: 999px; background: var(--ia-attn); color: var(--ia-bg);
  font-size: 10px; font-weight: 600; text-align: center;
}
/* Grupo segmentado: ámbito, rangos de fecha, filtros excluyentes */
.ia-seg { display: inline-flex; align-items: stretch; flex-shrink: 0; border: 1px solid var(--ia-rule-strong); border-radius: var(--ia-radius-md); overflow: hidden; background: var(--ia-sunken); }
.ia-seg > * { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border: 0; background: transparent; color: var(--ia-text-3); font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer; }
.ia-seg > * + * { border-left: 1px solid var(--ia-rule-strong); }
.ia-seg > .is-active { background: var(--ia-accent-soft); color: var(--ia-accent-300); }

/* ── Formularios ─────────────────────────────────────────────────────────── */
.ia-field { display: flex; flex-direction: column; gap: 7px; }
.ia-field > label, .ia-label { font-size: 12.5px; color: var(--ia-text-2); }
.ia-hint { font-size: 11.5px; color: var(--ia-text-faint); }
.ia-input, .ia-select, .ia-textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--ia-rule-strong);
  border-radius: var(--ia-radius-md); background: var(--ia-sunken); color: var(--ia-text);
  font-family: inherit; font-size: 13.5px; outline: none;
}
.ia-textarea { resize: vertical; min-height: 80px; }
.ia-select { appearance: none; cursor: pointer; padding-right: 32px; }
.ia-input:hover, .ia-select:hover, .ia-textarea:hover { border-color: var(--ia-rule-strong); }
.ia-input:focus, .ia-select:focus, .ia-textarea:focus { border-color: var(--ia-accent); }
.ia-input.is-invalid, .ia-select.is-invalid, .ia-textarea.is-invalid { border-color: var(--ia-err); }
/* Sólo lectura ≠ deshabilitado: lectura conserva contraste, deshabilitado lo pierde */
.ia-input[readonly] { color: var(--ia-text); background: var(--ia-panel); border-style: dashed; }
.ia-input:disabled, .ia-select:disabled, .ia-textarea:disabled { opacity: .45; cursor: not-allowed; }
.ia-error { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ia-err); }
/* Campo con icono o acción dentro (búsqueda, contraseña, copiar) */
.ia-inputgroup { display: flex; align-items: center; gap: 9px; padding: 0 11px; border: 1px solid var(--ia-rule-strong); border-radius: var(--ia-radius-md); background: var(--ia-sunken); }
.ia-inputgroup:focus-within { border-color: var(--ia-accent); }
.ia-inputgroup > i { font-size: 14px; color: var(--ia-text-4); flex-shrink: 0; }
.ia-inputgroup > input, .ia-inputgroup > select { flex: 1; min-width: 0; padding: 10px 0; border: 0; background: transparent; color: var(--ia-text); font: inherit; font-size: 13.5px; outline: none; }
.ia-kbd { font-family: var(--ia-font-mono); font-size: 11px; border: 1px solid var(--ia-rule-strong); border-radius: var(--ia-radius-sm); padding: 0 5px; color: var(--ia-text-faint); }
/* Interruptor */
.ia-switch { position: relative; flex-shrink: 0; width: 46px; height: 26px; padding: 0; border: 1px solid var(--ia-rule-strong); border-radius: 999px; background: var(--ia-sunken); cursor: pointer; }
.ia-switch::after { content: ""; position: absolute; top: 2px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ia-text-4); transition: left .14s ease; }
.ia-switch.is-on { border-color: var(--ia-accent); background: var(--ia-accent-soft); }
.ia-switch.is-on::after { left: 22px; background: var(--ia-accent-300); }
.ia-check { width: 15px; height: 15px; margin: 0; accent-color: var(--ia-accent); }

/* ── Tarjetas y paneles ──────────────────────────────────────────────────── */
.ia-card { border: 1px solid var(--ia-rule); border-radius: var(--ia-radius-md); background: var(--ia-panel); }
.ia-card-header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--ia-rule); }
.ia-card-header h3 { flex-shrink: 0; }
.ia-card-body { padding: 16px 18px; }
.ia-card-footer { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--ia-rule); }
/* Métrica: etiqueta, cifra en mono, delta y una línea de contexto */
.ia-stat { border: 1px solid var(--ia-rule); border-radius: var(--ia-radius-md); background: var(--ia-panel); padding: 18px 20px; }
.ia-stat-label { font-size: 12px; color: var(--ia-text-3); margin-bottom: 10px; }
.ia-stat-value { font-family: var(--ia-font-mono); font-size: 28px; letter-spacing: -.02em; }
.ia-stat-meta { margin-top: 10px; font-size: 11.5px; color: var(--ia-text-faint); }
.ia-delta-up { font-size: 12px; color: var(--ia-ok); }
.ia-delta-down { font-size: 12px; color: var(--ia-attn); }

/* ── Barra de filtros del patrón search grid ─────────────────────────────── */
.ia-filterbar { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border: 1px solid var(--ia-rule); border-radius: var(--ia-radius-md); background: var(--ia-panel); }
.ia-filterbar .ia-field { flex: 0 0 auto; width: 190px; }
.ia-filterbar .ia-field-search { flex: 1 1 220px; max-width: 340px; }
.ia-filterbar-label { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ia-text-faint); }
.ia-filterbar-actions { display: flex; align-items: center; gap: 9px; margin-left: auto; }

/* ── Tabla ───────────────────────────────────────────────────────────────── */
.ia-tablewrap { border: 1px solid var(--ia-rule); border-radius: var(--ia-radius-md); background: var(--ia-panel); overflow: hidden; }
.ia-tablebar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--ia-rule); font-size: 13px; color: var(--ia-text-2); }
.ia-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ia-table th {
  text-align: left; font-weight: 500; padding: 11px 18px;
  border-bottom: 1px solid var(--ia-rule-soft);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ia-text-4);
}
.ia-table td { padding: 12px 18px; border-bottom: 1px solid var(--ia-rule-soft); }
.ia-table tbody tr:hover { background: var(--ia-hover); }
.ia-table .ia-col-actions { text-align: right; }
.ia-rowactions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.ia-pagination { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-top: 1px solid var(--ia-rule); }
.ia-pagination-pages { display: flex; align-items: center; gap: 4px; }
.ia-page { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--ia-rule-strong); border-radius: var(--ia-radius-sm); background: transparent; color: var(--ia-text-2); font: inherit; font-size: 12.5px; cursor: pointer; }
.ia-page:hover { border-color: var(--ia-accent); color: var(--ia-accent-400); }
.ia-page.is-active { border-color: var(--ia-accent); background: var(--ia-accent-soft); color: var(--ia-accent-300); }
.ia-pagination-info { font-family: var(--ia-font-mono); font-size: 11.5px; color: var(--ia-text-faint); }

/* ── Badges ──────────────────────────────────────────────────────────────── */
/* .ia-badge = etiqueta neutra. .ia-status = ÚNICO renderizador de estado del
   dominio: siempre punto + texto, nunca color como único indicio. */
.ia-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--ia-rule-strong); font-size: 11.5px; color: var(--ia-text-2); }
.ia-status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; border: 1px solid var(--ia-rule-strong); background: transparent; color: var(--ia-text-3); }
.ia-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ia-status-ok { color: var(--ia-ok); background: var(--ia-ok-soft); border-color: var(--ia-ok-border); }
.ia-status-warn { color: var(--ia-attn); background: var(--ia-attn-soft); border-color: var(--ia-attn-border); }
.ia-status-err { color: var(--ia-err); background: var(--ia-err-soft); border-color: var(--ia-err-border); }
.ia-status-info { color: var(--ia-info); background: var(--ia-info-soft); border-color: var(--ia-info-border); }
.ia-status-neutral { color: var(--ia-text-3); background: transparent; border-color: var(--ia-rule-strong); }
/* Chip de código de empresa / aplicación */
.ia-code-chip { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: var(--ia-radius-sm); background: var(--ia-accent-soft); color: var(--ia-accent-300); font-family: var(--ia-font-mono); font-size: 10.5px; }
.ia-version { font-family: var(--ia-font-mono); font-size: 11px; color: var(--ia-text-faint); }

/* ── Pestañas (pantalla de detalle) ──────────────────────────────────────── */
.ia-tabs { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--ia-rule); }
.ia-tab { padding: 10px 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ia-text-3); font: inherit; font-size: 13.5px; cursor: pointer; }
.ia-tab:hover { color: var(--ia-text); }
.ia-tab.is-active { color: var(--ia-accent-400); border-bottom-color: var(--ia-accent); }
.ia-tab:disabled { color: var(--ia-text-faint); cursor: not-allowed; }
/* La pantalla de detalle tiene UNA sola barra de scroll y está en la pestaña */
.ia-tabpanel { flex: 1; min-height: 0; overflow-y: auto; padding-top: 18px; }

/* ── Modal y panel lateral ───────────────────────────────────────────────── */
.ia-overlay { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 32px; background: var(--ia-scrim); }
.ia-modal { width: 100%; max-width: var(--ia-modal-w); max-height: 100%; display: flex; flex-direction: column; border: 1px solid var(--ia-rule-strong); border-radius: var(--ia-radius-lg); background: var(--ia-chrome); box-shadow: var(--ia-shadow-lg); overflow: hidden; }
.ia-modal-sm { max-width: 460px; }
.ia-modal-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--ia-rule); background: var(--ia-panel); }
.ia-modal-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.ia-modal-footer { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--ia-rule); background: var(--ia-panel); }
.ia-modal-footer .ia-btn:first-of-type { margin-left: auto; }
.ia-drawer { position: fixed; top: 74px; right: 18px; bottom: 18px; z-index: 70; width: 440px; display: flex; flex-direction: column; border: 1px solid var(--ia-rule-strong); border-radius: var(--ia-radius-lg); background: var(--ia-chrome); box-shadow: var(--ia-shadow-lg); overflow: hidden; }
.ia-menu { position: absolute; z-index: 60; min-width: 260px; border: 1px solid var(--ia-rule-strong); border-radius: var(--ia-radius-md); background: var(--ia-panel); box-shadow: var(--ia-shadow-lg); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.ia-menu-title { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ia-text-faint); padding: 6px 10px 4px; }
.ia-menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: var(--ia-radius-sm); background: transparent; color: var(--ia-text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.ia-menu-item:hover { background: var(--ia-hover); color: var(--ia-text); }
.ia-menu-item i { font-size: 16px; color: var(--ia-text-3); }

/* ── Estados de página ───────────────────────────────────────────────────── */
.ia-state { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 52px 20px; text-align: center; }
.ia-state i { font-size: 22px; color: var(--ia-text-4); }
.ia-state-title { font-size: 14px; }
.ia-state-text { font-size: 12.5px; color: var(--ia-text-3); max-width: 44ch; }
.ia-state-empty { border: 1px dashed var(--ia-rule-strong); border-radius: var(--ia-radius-md); }
.ia-state-error i { color: var(--ia-err); }
.ia-state-denied i { color: var(--ia-attn); }
/* Esqueleto: replica la forma del contenido que sustituye */
.ia-skel { background: linear-gradient(90deg, var(--ia-hover), var(--ia-panel), var(--ia-hover)); background-size: 200% 100%; border-radius: var(--ia-radius-sm); animation: ia-skel 1.4s ease-in-out infinite; }
.ia-skel-text { height: 12px; }
.ia-skel-row { height: 44px; border-radius: 0; border-bottom: 1px solid var(--ia-rule-soft); }
@keyframes ia-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.ia-spinner { width: 15px; height: 15px; border: 2px solid var(--ia-rule-strong); border-top-color: var(--ia-accent); border-radius: 50%; animation: ia-spin .7s linear infinite; }
@keyframes ia-spin { to { transform: rotate(360deg); } }

/* ── Avisos ──────────────────────────────────────────────────────────────── */
.ia-alert { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; border: 1px solid var(--ia-rule-strong); border-radius: var(--ia-radius-md); background: var(--ia-panel); font-size: 13px; }
.ia-alert i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.ia-alert-ok { border-color: var(--ia-ok-border); background: var(--ia-ok-soft); }
.ia-alert-ok i { color: var(--ia-ok); }
.ia-alert-warn { border-color: var(--ia-attn-border); background: var(--ia-attn-soft); }
.ia-alert-warn i { color: var(--ia-attn); }
.ia-alert-err { border-color: var(--ia-err-border); background: var(--ia-err-soft); }
.ia-alert-err i { color: var(--ia-err); }
.ia-alert-info { border-color: var(--ia-info-border); background: var(--ia-info-soft); }
.ia-alert-info i { color: var(--ia-accent-400); }

/* ── Utilidades de disposición (gap, nunca márgenes sueltos) ─────────────── */
.ia-row { display: flex; align-items: center; gap: 10px; }
.ia-col { display: flex; flex-direction: column; gap: 10px; }
.ia-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ia-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ia-grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.ia-spacer { margin-left: auto; }

@media (max-width: 1100px) {
  .ia-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .ia-body { grid-template-columns: var(--ia-rail-w) 1fr; }
}
@media (max-width: 720px) {
  .ia-grid-2, .ia-grid-4 { grid-template-columns: 1fr; }
  .ia-main { padding: 18px 16px 32px; }
  .ia-overlay { padding: 0; }
  .ia-modal { max-width: none; height: 100%; border-radius: 0; }
  .ia-drawer { top: var(--ia-topbar-h); right: 0; bottom: 0; width: 100%; border-radius: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Añadidos de la integración
   Roles que la aplicación necesita y el kit no traía. Viven aquí, con el resto
   del sistema, para que ninguna pantalla tenga que inventarse un valor suelto.
   ══════════════════════════════════════════════════════════════════════════ */

/* Tarjeta que se dimensiona por su contenido en lugar de repartirse el alto con
   las demás: una barra de filtros tiene altura natural y nunca debe desplazarse
   dentro de sí misma. */
.ia-card-compact { flex: 0 0 auto; }

/* El logotipo trae margen transparente propio, asi que se le da algo mas de
   alto del que ocupa a la vista. */
.ia-brand img { height: 30px; }

/* El menú lateral se pinta con NavLink, que añade su clase de activo al enlace.
   El kit sólo conocía `.is-active`; se acepta también la de Blazor. */
.ia-navlink.active { background: var(--ia-accent-soft); color: var(--ia-accent-400); box-shadow: inset 2px 0 0 var(--ia-accent); }
.ia-navlink.active i { color: var(--ia-accent-400); }

/* El rail plegado se superpone al contenido: sin este hueco, el contenido queda
   debajo del menú en lugar de al lado. */
.ia-body.is-collapsed > .ia-main { grid-column: 2; }

/* Estado de carga: el spinner sustituye al icono y no hereda su tamaño de fuente. */
.ia-state-loading .ia-spinner { width: 20px; height: 20px; }

/* Fila de pestañas de una pantalla de detalle: cabecera y pestañas quietas, y la
   única barra de scroll dentro de la pestaña abierta. */
.ia-detail { display: flex; flex-direction: column; min-height: 0; height: 100%; gap: 14px; }

/* Menú de acciones de una fila. El velo cierra el menú al pulsar fuera; va por
   debajo de él y por encima de todo lo demás, sin fondo propio. */
.ia-menu-scrim { position: fixed; inset: 0; z-index: 55; }
.ia-menu-row { top: 30px; right: 0; min-width: 220px; }

/* Selector de contexto de la topbar. El icono de la empresa es el único del grupo
   y va más grande: es lo que dice de un vistazo dentro de qué empresa estás. */
.ia-seg .ia-seg-icon { font-size: 19px; }
.ia-seg .ia-seg-caret { font-size: 12px; }

/* Título que existe para los lectores de pantalla pero no ocupa sitio: la
   pantalla de entrada ya se explica sola visualmente y un "Entrar" repetido
   sobre el formulario sería ruido. */
.ia-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* El título de grupo del menú es un control: pliega su grupo. */
.ia-navgroup > .ia-navgroup-title {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 0; background: transparent; font: inherit; cursor: pointer;
}
.ia-navgroup > .ia-navgroup-title:hover { color: var(--ia-text-3); }
.ia-navgroup-caret { margin-left: auto; font-size: 11px; transition: transform .12s ease; }
.ia-navgroup.is-folded .ia-navgroup-caret { transform: rotate(-90deg); }
.ia-navgroup-items { display: flex; flex-direction: column; gap: 2px; }
.ia-navgroup.is-folded .ia-navgroup-items { display: none; }
/* Plegado a rail, los grupos salen siempre abiertos: un grupo cerrado dentro del
   rail esconde iconos que ya no hay forma de volver a abrir. */
.ia-body.is-collapsed .ia-sidebar:not(:hover) .ia-navgroup.is-folded .ia-navgroup-items { display: flex; }

/* Acceso a la configuración de la empresa, pegado a su nombre. */
.ia-seg-action {
  display: grid; place-items: center; width: 34px; align-self: stretch;
  border-left: 1px solid var(--ia-rule-strong); color: var(--ia-text-3);
}
.ia-seg-action:hover { background: var(--ia-hover); color: var(--ia-accent-400); }

/* ══════════════════════════════════════════════════════════════════════════
   Ventana de configuración (handoff «Editar conector de empresa»)
   Cabecera, menú lateral y pie quietos; sólo el contenido de la sección abierta
   se desplaza. El modo Básico / Avanzado decide qué se pinta, no qué se guarda.
   ══════════════════════════════════════════════════════════════════════════ */

/* La ventana de Telerik pone el marco: aquí se le quita su barra de título,
   porque la cabecera la dibuja la propia ventana de configuración. */
.k-window.ia-cfgwin { border: 1px solid var(--ia-rule-strong); border-radius: var(--ia-radius-lg); background: var(--ia-chrome); box-shadow: var(--ia-shadow-lg); overflow: hidden; }
.k-window.ia-cfgwin > .k-window-titlebar { display: none; }
.k-window.ia-cfgwin > .k-window-content { padding: 0; overflow: hidden; background: var(--ia-chrome); }
.k-window.ia-cfgwin .crud-modal-content { padding: 0; overflow: hidden; }

.ia-cfg { height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; color: var(--ia-text); }

.ia-cfg-head { display: flex; align-items: center; gap: 13px; padding: 15px 20px; border-bottom: 1px solid var(--ia-rule); background: var(--ia-panel); }
.ia-cfg-icon { flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--ia-radius-md); background: var(--ia-accent-soft); color: var(--ia-accent-400); }
.ia-cfg-icon i { font-size: 18px; }
.ia-cfg-titles { min-width: 0; line-height: 1.3; }
.ia-cfg-titleline { display: flex; align-items: center; gap: 10px; }
.ia-cfg-title { margin: 0; font-size: 15.5px; font-weight: 400; }
.ia-cfg-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 2px; font-size: 12px; color: var(--ia-text-3); }
.ia-cfg-sub-sep { color: var(--ia-text-faint); }
.ia-cfg-code { display: inline-flex; align-items: center; gap: 6px; }
.ia-cfg-code > span:first-child { padding: 0 5px; border-radius: var(--ia-radius-sm); background: var(--ia-accent-soft); color: var(--ia-accent-300); font-family: var(--ia-font-mono); font-size: 10.5px; }
.ia-cfg-headactions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ia-cfg-close { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 1px solid var(--ia-rule); border-radius: var(--ia-radius-sm); background: transparent; color: var(--ia-text-3); cursor: pointer; }
.ia-cfg-close:hover { border-color: var(--ia-accent); background: transparent; color: var(--ia-accent-400); }

/* Selector Básico / Avanzado: el mismo segmentado del kit, a tamaño de cabecera. */
.ia-seg.ia-seg-sm > * { padding: 5px 11px; font-size: 12px; gap: 6px; border-radius: 0; }
.ia-seg.ia-seg-sm > * i { font-size: 14px; }
.ia-seg > button:not(.is-active):hover { background: var(--ia-hover); color: var(--ia-text); }

.ia-cfg-body { min-height: 0; display: grid; grid-template-columns: 232px minmax(0, 1fr); }
.ia-cfg-body.is-single { grid-template-columns: minmax(0, 1fr); }
.ia-cfg-main { min-height: 0; overflow-y: auto; padding: 24px 28px 32px; }
.ia-cfg-stack { display: flex; flex-direction: column; gap: 20px; }
.ia-cfg-heading h2 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -.015em; }
.ia-cfg-intro { margin: 6px 0 0; max-width: 100ch; font-size: 13px; line-height: 1.6; color: var(--ia-text-3); }
/* En sólo lectura el contenido se deshabilita entero de una vez. */
.ia-cfg-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 16px; }
.ia-cfg-pane { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ia-cfg-pane[hidden] { display: none; }
/* Lo avanzado que se oculta sin desmontarse no añade caja propia a la maqueta. */
.ia-advanced-slot { display: contents; }
.ia-advanced-slot[hidden] { display: none; }

/* Menú lateral de secciones */
.ia-vtabs { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 16px 12px; border-right: 1px solid var(--ia-rule); background: var(--ia-chrome); }
.ia-vtab { width: 100%; display: flex; align-items: center; gap: 11px; padding: 10px 11px; border: 0; border-radius: var(--ia-radius-md); background: transparent; color: var(--ia-text-2); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.ia-vtab:hover { background: var(--ia-hover); }
.ia-vtab.is-active { background: var(--ia-accent-soft); box-shadow: inset 2px 0 0 var(--ia-accent); color: var(--ia-accent-300); }
.ia-vtab > i { flex-shrink: 0; font-size: 16px; }
.ia-vtab-text { flex: 1; min-width: 0; }
.ia-vtab-text > span { display: block; }
.ia-vtab-hint { margin-top: 2px; font-size: 11px; color: var(--ia-text-4); }
.ia-vtab-dot, .ia-vtabs-legend i { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.ia-vtab-dot.is-ok, .ia-vtabs-legend .is-ok { background: var(--ia-ok); }
.ia-vtab-dot.is-missing, .ia-vtabs-legend .is-missing { background: var(--ia-attn); }
.ia-vtab-dot.is-optional, .ia-vtabs-legend .is-optional { background: var(--ia-rule-strong); }
.ia-vtabs-legend { margin-top: auto; padding: 12px 11px 4px; display: flex; flex-direction: column; gap: 7px; font-size: 11px; color: var(--ia-text-faint); }
.ia-vtabs-legend > span { display: flex; align-items: center; gap: 7px; }
.ia-vtabs-legend i { width: 6px; height: 6px; }

.ia-cfg-foot { display: flex; align-items: center; gap: 10px; padding: 13px 20px; border-top: 1px solid var(--ia-rule); background: var(--ia-panel); }
.ia-cfg-savestate { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ia-text-4); }
.ia-cfg-savestate i { font-size: 14px; }
.ia-cfg-savestate.is-dirty { color: var(--ia-attn); }
.ia-cfg-savestate.is-dirty i { font-size: 8px; }
.ia-cfg-foot .ia-spacer { display: flex; align-items: center; gap: 8px; }

/* En página (Inline): la página se desplaza entera, el menú se queda fijo arriba
   y el pie con Guardar se queda anclado abajo, a la vista en todo momento. */
.ia-cfg.is-inline { height: auto; display: flex; flex-direction: column; border: 1px solid var(--ia-rule); border-radius: var(--ia-radius-lg); background: var(--ia-chrome); }
.ia-cfg.is-inline > .ia-cfg-head { border-radius: var(--ia-radius-lg) var(--ia-radius-lg) 0 0; }
.ia-cfg.is-inline .ia-cfg-body { align-items: start; }
.ia-cfg.is-inline .ia-vtabs { position: sticky; top: 0; max-height: calc(100vh - var(--ia-topbar-h) - 24px); border-right: 0; }
.ia-cfg.is-inline .ia-cfg-main { overflow: visible; min-height: 60vh; border-left: 1px solid var(--ia-rule); }
.ia-cfg.is-inline > .ia-cfg-foot { position: sticky; bottom: 0; z-index: 5; border-radius: 0 0 var(--ia-radius-lg) var(--ia-radius-lg); }

@media (max-width: 900px) {
  .ia-cfg.is-inline .ia-vtabs { position: static; max-height: none; }
  .ia-cfg.is-inline .ia-cfg-main { border-left: 0; }
  .ia-cfg-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .ia-vtabs { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--ia-rule); padding: 8px; }
  .ia-vtab { width: auto; flex-shrink: 0; }
  .ia-vtab-hint, .ia-vtabs-legend { display: none; }
  .ia-cfg-main { padding: 18px; }
}

/* Ficha con muchas pestañas (SideTabsLayout): el menú se queda fijo a la
   izquierda mientras se desplaza la página. */
.ia-sidetabs { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 20px; align-items: start; }
.ia-sidetabs > .ia-vtabs { position: sticky; top: 0; max-height: calc(100vh - var(--ia-topbar-h) - 24px); padding: 10px 8px; border: 1px solid var(--ia-rule); border-radius: var(--ia-radius-md); background: var(--ia-panel); }
.ia-sidetabs-content { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ia-sidetabs-pane { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 900px) {
  .ia-sidetabs { grid-template-columns: minmax(0, 1fr); }
  .ia-sidetabs > .ia-vtabs { position: static; flex-direction: row; overflow-x: auto; max-height: none; }
  .ia-sidetabs > .ia-vtabs .ia-vtab { width: auto; flex-shrink: 0; }
  .ia-sidetabs > .ia-vtabs .ia-vtab-hint { display: none; }
}

/* Tarjeta de sección */
.ia-sec { border: 1px solid var(--ia-rule); border-radius: var(--ia-radius-md); background: var(--ia-panel); }
.ia-sec-head { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px; border-bottom: 1px solid var(--ia-rule-soft); }
.ia-sec-title { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ia-text-faint); }
.ia-sec-num { width: 20px; height: 20px; display: grid; place-items: center; flex-shrink: 0; border-radius: 50%; background: var(--ia-accent-soft); color: var(--ia-accent-300); font-family: var(--ia-font-mono); font-size: 11px; }
.ia-sec-aside { margin-left: auto; display: flex; align-items: center; gap: 8px; font-family: var(--ia-font-mono); font-size: 11px; color: var(--ia-text-faint); }
.ia-sec-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; padding: 16px; }
.ia-sec-body.ia-cols-1 { grid-template-columns: minmax(0, 1fr); }
.ia-sec-body.ia-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ia-sec-body.ia-cols-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.ia-sec-body.ia-cols-token { grid-template-columns: minmax(0, 2.2fr) minmax(0, .8fr) minmax(0, .8fr); }
.ia-sec-body.ia-stack { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; }
.ia-sec-text { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ia-text-3); }
.ia-sec-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-top: 1px solid var(--ia-rule-soft); }
.ia-sec-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--ia-rule-soft); font-size: 12px; color: var(--ia-text-faint); }
.ia-wide { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .ia-sec-body, .ia-sec-body.ia-cols-3, .ia-sec-body.ia-cols-2-1, .ia-sec-body.ia-cols-token { grid-template-columns: minmax(0, 1fr); }
}

/* Campos: marcas de obligatorio / opcional, nombre técnico y valores técnicos */
.ia-field > label { display: flex; align-items: center; gap: 8px; }
.ia-field-req { color: var(--ia-attn); }
.ia-field-opt { font-size: 11px; color: var(--ia-text-faint); }
.ia-techkey { font-family: var(--ia-font-mono); font-size: 11px; color: var(--ia-text-faint); }
.ia-cfg .ia-input, .ia-cfg .ia-select, .ia-cfg .ia-textarea { padding: 9px 12px; }
.ia-cfg .ia-textarea { min-height: 0; line-height: 1.6; }
.ia-input.ia-mono, .ia-textarea.ia-mono { font-family: var(--ia-font-mono); font-size: 13px; }
.ia-cfg .ia-inputgroup > input, .ia-cfg .ia-inputgroup > select { padding: 9px 0; }
.ia-inputgroup > select { appearance: none; cursor: pointer; }
.ia-inputgroup > .ia-inputgroup-suffix { flex-shrink: 0; font-size: 12px; color: var(--ia-text-4); }
.ia-inputgroup.ia-mono > input { font-family: var(--ia-font-mono); font-size: 13px; }
.ia-preview { padding: 9px 12px; border: 1px dashed var(--ia-rule-strong); border-radius: var(--ia-radius-md); font-family: var(--ia-font-mono); font-size: 12.5px; color: var(--ia-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-result { display: flex; align-items: center; gap: 6px; font-family: var(--ia-font-mono); font-size: 11.5px; color: var(--ia-text-3); }
.ia-result.is-ok { color: var(--ia-ok); }
.ia-result.is-err { color: var(--ia-err); }
.ia-result i { font-size: 13px; }
.ia-checkline { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; cursor: pointer; }
.ia-checkline .ia-check { margin-top: 2px; flex-shrink: 0; }
.ia-checkline small { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.5; color: var(--ia-text-faint); }
.ia-linkbtn { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: var(--ia-accent-400); font: inherit; font-size: 12.5px; cursor: pointer; }
.ia-linkbtn:hover { background: transparent; color: var(--ia-accent-300); }

/* Interruptores: tamaño de fila y de tabla, y la variante de riesgo */
.ia-switch.ia-switch-md { width: 40px; height: 22px; }
.ia-switch.ia-switch-md::after { top: 2px; left: 2px; width: 16px; height: 16px; }
.ia-switch.ia-switch-md.is-on::after { left: 20px; }
.ia-switch.ia-switch-sm { width: 36px; height: 20px; }
.ia-switch.ia-switch-sm::after { top: 2px; left: 2px; width: 14px; height: 14px; }
.ia-switch.ia-switch-sm.is-on::after { left: 18px; }
.ia-switch.is-on.is-risk { border-color: var(--ia-attn); background: var(--ia-attn-soft); }
.ia-switch.is-on.is-risk::after { background: var(--ia-attn); }
.ia-switch:disabled { opacity: .45; cursor: not-allowed; }

/* Fila de ajuste: icono, texto, valor e interruptor */
.ia-setting { display: flex; align-items: center; gap: 14px; padding: 16px; }
.ia-setting + .ia-setting { border-top: 1px solid var(--ia-rule-soft); }
.ia-setting-icon { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--ia-radius-md); background: var(--ia-sunken); color: var(--ia-text-3); }
.ia-setting-icon i { font-size: 16px; }
.ia-setting-text { flex: 1; min-width: 0; }
.ia-setting-title { font-size: 13.5px; }
.ia-setting-desc { margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--ia-text-3); }
.ia-setting-value { min-width: 22px; font-size: 12px; color: var(--ia-text-4); text-align: right; }
.ia-setting.is-on .ia-setting-icon { background: var(--ia-accent-soft); color: var(--ia-accent-400); }
.ia-setting.is-on .ia-setting-value { color: var(--ia-accent-300); }
.ia-setting.is-risk .ia-setting-icon { background: var(--ia-attn-soft); color: var(--ia-attn); }
.ia-setting.is-risk .ia-setting-value { color: var(--ia-attn); }

/* Tarjetas seleccionables (método de autenticación) */
.ia-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ia-choice { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--ia-rule-strong); border-radius: var(--ia-radius-md); background: var(--ia-sunken); color: var(--ia-text); font: inherit; text-align: left; cursor: pointer; }
.ia-choice:hover { border-color: var(--ia-accent); background: var(--ia-sunken); }
.ia-choice.is-selected { border-color: var(--ia-accent); background: var(--ia-accent-soft); }
.ia-choice-title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.ia-choice-title i { font-size: 16px; color: var(--ia-accent-400); }
.ia-choice-desc { font-size: 12px; line-height: 1.5; color: var(--ia-text-3); }
@media (max-width: 900px) { .ia-choices { grid-template-columns: minmax(0, 1fr); } }

/* Secreto: configurado (enmascarado) → rotar / eliminar, nunca en claro */
.ia-secret { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 4px 4px 12px; border: 1px solid var(--ia-rule-strong); border-radius: var(--ia-radius-md); background: var(--ia-panel); }
.ia-secret > .ph-lock-simple { font-size: 15px; color: var(--ia-ok); }
.ia-secret-mask { flex: 1; min-width: 0; font-family: var(--ia-font-mono); font-size: 13px; color: var(--ia-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-secret.is-editing { padding: 0 4px 0 0; border-color: var(--ia-accent); background: var(--ia-sunken); }
.ia-secret.is-editing > input { flex: 1; min-width: 0; padding: 9px 12px; border: 0; background: transparent; color: var(--ia-text); font-family: var(--ia-font-mono); font-size: 13px; outline: none; }
.ia-secret.is-empty { border-color: var(--ia-rule-strong); }
.ia-secret.is-cleared { border-style: dashed; border-color: var(--ia-err-border); }
.ia-secret.is-cleared .ia-secret-mask { color: var(--ia-err); text-decoration: line-through; }
.ia-secret .ia-secret-remove:hover { border-color: var(--ia-err); color: var(--ia-err); }

/* Etiquetas de host */
.ia-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ia-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 11px; border: 1px solid var(--ia-rule-strong); border-radius: 999px; background: var(--ia-sunken); font-family: var(--ia-font-mono); font-size: 12px; color: var(--ia-text-2); }
.ia-chip-x { width: 18px; height: 18px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ia-text-4); cursor: pointer; }
.ia-chip-x:hover { background: var(--ia-err-soft); color: var(--ia-err); }
.ia-chip-x i { font-size: 10px; }
.ia-addline { display: flex; align-items: center; gap: 8px; }
.ia-addline > .ia-input { flex: 1; min-width: 0; }

/* Tabla de pares nombre / valor (cabeceras, cuerpo del token) */
.ia-kv { display: flex; flex-direction: column; }
.ia-kv-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 36px; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--ia-rule-soft); }
.ia-kv.is-typed .ia-kv-row { grid-template-columns: minmax(0, 1fr) 118px minmax(0, 1.4fr) 36px; }
.ia-kv-head { padding-top: 10px; padding-bottom: 8px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ia-text-faint); }
.ia-kv-input { width: 100%; padding: 7px 9px; border: 1px solid transparent; border-radius: var(--ia-radius-sm); background: transparent; color: var(--ia-text); font-family: var(--ia-font-mono); font-size: 12.5px; outline: none; }
.ia-kv-input:hover { border-color: var(--ia-rule); }
.ia-kv-input:focus { border-color: var(--ia-rule-strong); background: var(--ia-sunken); }
.ia-kv-input.is-key { color: var(--ia-accent-300); }
.ia-kv-type { width: 100%; padding: 4px 8px; border: 1px solid var(--ia-rule-strong); border-radius: 999px; background: var(--ia-sunken); color: var(--ia-text-3); font-size: 11.5px; appearance: none; cursor: pointer; text-align: center; }
.ia-kv-empty { padding: 14px 12px; font-size: 12.5px; color: var(--ia-text-faint); }
.ia-kv-sub { border: 1px solid var(--ia-rule); border-radius: var(--ia-radius-md); background: var(--ia-chrome); }
.ia-kv-subhead { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--ia-rule-soft); font-size: 12.5px; color: var(--ia-text-2); }

/* Métricas del catálogo */
.ia-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--ia-rule); border-radius: var(--ia-radius-md); background: var(--ia-panel); }
.ia-metric { min-width: 0; padding: 14px 16px; }
.ia-metric + .ia-metric { border-left: 1px solid var(--ia-rule-soft); }
.ia-metric-label { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ia-text-faint); }
.ia-metric-value { margin-top: 6px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-metric-value.ia-mono { font-size: 12.5px; color: var(--ia-accent-300); }

/* Nota en panel con icono */
.ia-note { display: flex; align-items: flex-start; gap: 11px; padding: 12px 15px; border: 1px solid var(--ia-rule); border-radius: var(--ia-radius-md); background: var(--ia-panel); font-size: 12.5px; line-height: 1.6; color: var(--ia-text-2); }
.ia-note > i { flex-shrink: 0; margin-top: 2px; font-size: 15px; color: var(--ia-accent-400); }
.ia-note strong { font-weight: 400; color: var(--ia-text); }

/* Operaciones: filtros con recuento, tabla que se desplaza en horizontal y barra de selección */
.ia-opsbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.ia-opsbar > .ia-inputgroup { flex: 1 1 240px; max-width: 360px; }
.ia-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ia-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var(--ia-rule-strong); border-radius: 999px; background: transparent; color: var(--ia-text-3); font: inherit; font-size: 12px; cursor: pointer; }
.ia-pill:hover { border-color: var(--ia-accent); background: transparent; color: var(--ia-text); }
.ia-pill.is-active { border-color: var(--ia-accent); background: var(--ia-accent-soft); color: var(--ia-accent-300); }
.ia-pill-count { font-family: var(--ia-font-mono); font-size: 11px; color: var(--ia-text-4); }
.ia-pill.is-active .ia-pill-count { color: var(--ia-accent-400); }
.ia-tablewrap.is-scroll { overflow-x: auto; }
.ia-table.ia-table-ops { min-width: 880px; }
.ia-table.ia-table-ops th { padding: 10px 14px; border-bottom: 1px solid var(--ia-rule); }
.ia-table.ia-table-ops td { padding: 12px 14px; vertical-align: top; border-bottom: 1px solid var(--ia-rule-soft); }
.ia-table.ia-table-ops .ia-col-check { width: 36px; }
.ia-op { min-width: 0; }
.ia-op-name { font-size: 13px; }
.ia-op-meta { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 4px; }
.ia-method { flex-shrink: 0; padding: 0 5px; border-radius: var(--ia-radius-sm); background: var(--ia-accent-soft); color: var(--ia-accent-300); font-family: var(--ia-font-mono); font-size: 10.5px; }
.ia-op-path { min-width: 0; max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--ia-font-mono); font-size: 11.5px; color: var(--ia-text-3); }
.ia-op-desc { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--ia-text-4); }
.ia-op-tool { font-size: 12.5px; color: var(--ia-text-4); white-space: nowrap; }
.ia-op-tool.is-on { color: var(--ia-ok); }
.ia-table.ia-table-ops tr.ia-op-detail td { background: var(--ia-chrome); }
.ia-table-empty { padding: 28px 14px; text-align: center; font-size: 13px; color: var(--ia-text-faint); }
.ia-selbar { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--ia-accent); border-radius: var(--ia-radius-md); background: var(--ia-accent-soft); font-size: 13px; }
.ia-selbar small { display: block; margin-top: 2px; font-size: 12px; color: var(--ia-text-3); }