body {
    font-family: var(--ia-font);
    margin: 0;
    padding: 0;
    background: var(--ia-bg);
    color: var(--ia-text-2);
}

a {
    color: var(--ia-accent-400);
    text-decoration: none;
}

a:hover {
    color: var(--ia-accent);
}

/* El subrayado sólo tiene sentido dentro de texto corrido, donde el enlace
   compite con las palabras de alrededor. Un elemento de menú o una acción de fila
   son controles: ahí el indicio es el fondo, no una raya. */
p a:hover,
li a:hover,
.markdown-body a:hover,
.ia-state-text a:hover {
    text-decoration: underline;
}

.admin-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 240px;
    flex: 0 0 auto;
    background: var(--ia-chrome);
    color: var(--ia-text-2);
    display: flex;
    flex-direction: column;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--ia-rule);
}

.sidebar-mark {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: var(--ia-accent-soft);
    color: var(--ia-accent-300);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 13px;
}

.sidebar-brand-text {
    min-width: 0;
}

.sidebar-title {
    color: var(--ia-text);
    font-weight: 700;
    font-size: 14px;
}

.sidebar-subtitle {
    color: var(--ia-text-3);
    font-size: 12px;
}

.nav {
    flex: 1 1 auto;
    padding: 12px 8px;
    overflow: auto;
}

.nav-group {
    margin-bottom: 8px;
}

.nav-group-title {
    padding: 8px 12px 6px;
    color: var(--ia-text-3);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.nav-link,
.nav-menu .nav-link {
    display: block;
    padding: 10px 12px;
    margin: 2px 0;
    border-radius: 6px;
    color: var(--ia-text-2);
    text-decoration: none;
}

.nav-link:hover {
    background: var(--ia-chrome);
    color: var(--ia-text);
    text-decoration: none;
}

.main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    background: var(--ia-panel);
    border-bottom: 1px solid var(--ia-rule);
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar-eyebrow {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ia-text-3);
}

.topbar-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--ia-text);
}

.topbar-status {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.status-pill,
.identity-slot {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
}

.status-neutral {
    background: var(--ia-sunken);
    color: var(--ia-text-2);
    border: 1px solid var(--ia-rule);
}

.identity-slot {
    background: var(--ia-sunken);
    color: var(--ia-text-2);
    border: 1px dashed var(--ia-rule);
}

.content {
    padding: 24px;
    overflow: auto;
}

.footer {
    padding: 12px 24px 20px;
    color: var(--ia-text-3);
    font-size: 13px;
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.page-kicker {
    margin: 0 0 4px;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ia-text-3);
}

.page-title {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    color: var(--ia-text);
}

.page-description {
    margin: 6px 0 0;
    color: var(--ia-text-2);
}

.page-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.page-actions .page-action-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--ia-accent);
    border-radius: 6px;
    background: var(--ia-accent-soft);
    color: var(--ia-accent-300);
    padding: 8px 12px;
    font: inherit;
    cursor: pointer;
}

.page-actions .page-action-primary:hover {
    background: var(--ia-accent-soft);
    border-color: var(--ia-accent);
}

.page-actions .page-action-primary:focus-visible {
    outline: 2px solid var(--ia-accent);
    outline-offset: 2px;
}

.page-actions .page-action-icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
    flex: 0 0 auto;
}

.section-card,
.stat-card,
.empty-state,
.error-state,
.loading-state {
    background: var(--ia-panel);
    border: 1px solid var(--ia-rule);
    border-radius: 8px;
    box-shadow: 0 1px 2px var(--ia-shadow-ink);
}

.section-card {
    overflow: hidden;
    margin-bottom: 16px;
}

.section-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--ia-rule);
}

.section-card-header h2,
.section-card h2 {
    margin: 0;
    color: var(--ia-text);
    font-size: 16px;
}

.section-card-header p,
.section-card p {
    margin: 4px 0 0;
    color: var(--ia-text-3);
}

.section-card-body {
    padding: 16px 18px;
}

.stat-card {
    display: block;
    padding: 16px;
    color: inherit;
    text-decoration: none;
}

.stat-card-label {
    font-size: 12px;
    color: var(--ia-text-3);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.stat-card-value {
    font-size: 24px;
    font-weight: 700;
    margin: 6px 0;
    color: var(--ia-text);
}

.stat-card-hint {
    color: var(--ia-text-2);
    font-size: 13px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.status-success { background: var(--ia-ok-soft); color: var(--ia-ok); }
.status-warning { background: var(--ia-attn-soft); color: var(--ia-attn); }
.status-danger { background: var(--ia-err-soft); color: var(--ia-err); }
.status-neutral { background: var(--ia-hover); color: var(--ia-text-2); }

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ia-text-3);
    font-size: 13px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.breadcrumbs a {
    color: var(--ia-text-2);
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: var(--ia-accent-400);
}

.loading-state,
.error-state,
.empty-state {
    padding: 16px 18px;
    margin: 16px 0;
}

.error-state {
    border-color: var(--ia-err-border);
    background: var(--ia-err-soft);
    color: var(--ia-err);
}

.empty-state {
    border-style: dashed;
}

.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 16px;
}

.pagination-actions {
    display: flex;
    gap: 8px;
}

button {
    border: 1px solid var(--ia-rule);
    background: var(--ia-panel);
    color: var(--ia-text);
    border-radius: 6px;
    padding: 8px 14px;
}

button:hover {
    background: var(--ia-sunken);
}

button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

input,
select {
    border: 1px solid var(--ia-rule);
    border-radius: 6px;
    padding: 9px 12px;
    background: var(--ia-panel);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--ia-rule);
    text-align: left;
    vertical-align: top;
}

.companies-filters {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
}

.companies-filter-field {
    min-width: 0;
}

.companies-filter-field label,
.company-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ia-text);
}

.companies-filter-actions,
.companies-grid-actions,
.companies-confirmation-actions,
.company-form-footer {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.companies-filter-actions {
    justify-content: flex-end;
}

.companies-grid-panel {
    display: grid;
    gap: 12px;
}

.companies-grid {
    min-height: 320px;
}

.companies-window .k-window-content,
.companies-confirmation-window .k-window-content {
    padding: 0;
    overflow: hidden;
}

.companies-window-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 16px;
    gap: 12px;
}

.company-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.company-form-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    height: 100%;
}

.company-form-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.company-form-footer {
    justify-content: flex-end;
    padding-top: 12px;
    border-top: 1px solid var(--ia-rule);
    padding-bottom: 22px;
}

.company-general-tab {
    padding: 8px 0 16px;
}

.company-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.company-field-wide {
    grid-column: 1 / -1;
}

.company-field-inline {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.company-switch-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.company-switch-label {
    font-size: 12px;
    color: var(--ia-text-3);
}

.companies-tab-placeholder {
    padding: 12px 4px;
    color: var(--ia-text-3);
}

.company-locations-tab {
    padding: 8px 0 16px;
}

.company-locations-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.company-location-editor {
    height: 100%;
    overflow: auto;
    padding: 4px 2px 12px;
}
.company-branding-tab,
.company-templates-tab,
.company-document-settings-tab {
    padding: 8px 0 16px;
}

.company-field-hint {
    color: var(--ia-text-3);
    font-size: 12px;
}

.company-templates-toolbar,
.company-template-preview-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.company-template-editor {
    height: 100%;
    overflow: auto;
    padding: 4px 2px 12px;
}

.company-template-tokens {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.company-template-preview-frame {
    width: 100%;
    min-height: 260px;
    border: 1px solid var(--ia-rule);
    background: var(--ia-panel);
}

.company-template-preview-text {
    min-height: 180px;
    max-height: 320px;
    overflow: auto;
    white-space: pre-wrap;
}

.companies-confirmation-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
    gap: 12px;
}

.companies-confirmation-title {
    margin: 0;
    font-weight: 700;
    color: var(--ia-text);
}

.companies-confirmation-text {
    margin: 0;
    color: var(--ia-text-2);
}

@media (max-width: 1024px) {
    .sidebar { width: 220px; }
    .page-header { flex-direction: column; }
    .page-actions { justify-content: flex-start; }
    .companies-filters,
    .company-field-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .admin-shell { flex-direction: column; }
    .sidebar { width: auto; }
    .topbar { position: static; padding: 16px; }
    .content { padding: 16px; }
    .footer { padding: 12px 16px 20px; }
}
.company-assets-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.company-asset-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border, var(--ia-rule));
    border-radius: 10px;
    background: var(--surface-soft, var(--ia-sunken));
}

.company-asset-field > label {
    font-weight: 600;
}

.company-asset-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 10px;
    border-radius: 8px;
    background: repeating-conic-gradient(var(--ia-hover) 0 25%, var(--ia-panel) 0 50%) 50% / 16px 16px;
}

.company-asset-preview img {
    display: block;
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
}

.company-asset-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.company-asset-error { color: var(--danger, var(--ia-err)); font-size: 0.875rem; }

@media (max-width: 900px) {
    .company-assets-grid { grid-template-columns: 1fr; }
}

/* Shared Page/Grid/Form language. Mirrors the Companies editors while keeping
   feature pages independent from company-specific component classes. */
.admin-form {
    display: grid;
    /*grid-template-columns: repeat(2, minmax(0, 1fr));*/
    gap: 18px 20px;
    width: 100%;
    /* Sin tope propio: quien decide el ancho es la pantalla o la ventana que lo
       contiene. Un formulario centrado a 1120 px dentro de un contenedor de 1700
       dejaba dos margenes vacios que parecian un error de maquetacion. */
    max-width: none;
}

.admin-form > h3,
.admin-form > fieldset,
.admin-form > .actions,
.admin-form > .validation-summary-valid,
.admin-form > .validation-summary-errors,
.admin-form > .text-danger,
.admin-form > .text-success,
.admin-form > p,
.admin-form > table {
    grid-column: 1 / -1;
}

.admin-form > h3 {
    margin: 8px 0 -2px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--ia-rule);
    color: var(--ia-text);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.admin-form > h3:first-of-type { margin-top: 0; }

.admin-form > div:not(.actions),
.admin-form fieldset > div:not(.actions) {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.admin-form > div:has(> textarea) {
    grid-column: 1 / -1;
}

.admin-form label,
.admin-form legend {
    color: var(--ia-text);
    font-size: 13px;
    font-weight: 650;
}

.admin-form > label:not(:has(input[type="checkbox"])),
.admin-form fieldset > label:not(:has(input[type="checkbox"])) {
    grid-column: 1 / -1;
    margin-bottom: -13px;
}

.admin-form > input:not([type="checkbox"]),
.admin-form > select,
.admin-form > textarea { grid-column: 1 / -1; }

.admin-form input:not([type="checkbox"]),
.admin-form select,
.admin-form textarea,
.admin-form .k-input,
.admin-form .k-picker {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    border-color: var(--ia-rule);
    border-radius: 7px;
    background: var(--ia-panel);
    color: var(--ia-text);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.admin-form input:not([type="checkbox"]):focus,
.admin-form select:focus,
.admin-form textarea:focus,
.admin-form .k-input:focus-within,
.admin-form .k-picker:focus-within {
    border-color: var(--ia-accent);
    box-shadow: 0 0 0 3px var(--ia-accent-soft);
    outline: none;
}

.admin-form input:disabled,
.admin-form select:disabled,
.admin-form textarea:disabled {
    background: var(--ia-sunken);
    color: var(--ia-text-3);
    cursor: not-allowed;
}

.admin-form textarea {
    min-height: 92px;
    resize: vertical;
    line-height: 1.5;
}

.admin-form textarea[rows="8"],
.admin-form textarea[rows="10"],
.admin-form textarea[rows="12"],
.admin-form textarea[rows="16"] {
    font-family: var(--ia-font-mono);
    font-size: 12.5px;
    tab-size: 2;
}

.admin-form small,
.admin-form .field-hint {
    color: var(--ia-text-3);
    font-size: 12px;
    line-height: 1.45;
}

.admin-form > label:has(input[type="checkbox"]),
.admin-form div > label:has(input[type="checkbox"]) {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    font-weight: 600;
}

.admin-form input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--ia-accent-400);
}

.admin-form fieldset {
    display: grid;
    /*grid-template-columns: repeat(2, minmax(0, 1fr));*/
    gap: 14px 18px;
    min-width: 0;
    margin: 2px 0 0;
    padding: 18px;
    border: 1px solid var(--ia-rule);
    border-radius: 10px;
    background: var(--ia-sunken);
}

.admin-form fieldset legend {
    padding: 0 8px;
    color: var(--ia-text-2);
}

.admin-form fieldset > p,
.admin-form fieldset > table,
.admin-form fieldset > .actions { grid-column: 1 / -1; }

.admin-form .validation-summary-errors,
.admin-form .text-danger {
    margin: 0;
    padding: 11px 13px;
    border: 1px solid var(--ia-err-border);
    border-radius: 7px;
    background: var(--ia-err-soft);
    color: var(--ia-err);
    font-size: 13px;
}

.admin-form .validation-summary-errors ul {
    margin: 0;
    padding-left: 20px;
}

.admin-form .validation-message {
    color: var(--ia-err);
    font-size: 12px;
}

.admin-form .actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid var(--ia-rule);
}
/* Fixed admin viewport and independent scrolling */
html, body, #app { height: 100%; overflow: hidden; }
.admin-shell { height: 100vh; min-height: 0; overflow: hidden; }
.sidebar { height: 100vh; min-height: 0; overflow: hidden; }
.sidebar-brand { flex: 0 0 auto; }
.nav { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.main { height: 100vh; min-height: 0; overflow: hidden; }
.topbar { flex: 0 0 auto; position: relative; top: auto; }
.content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.content > .page-header { position: sticky; top: -24px; z-index: 8; margin: -24px -24px 16px; padding: 24px 24px 16px; background: var(--ia-sunken); border-bottom: 1px solid var(--ia-rule); backdrop-filter: blur(10px); }
.section-card { display: flex; flex-direction: column; max-height: calc(100vh - 190px); min-height: 0; }
.section-card-header { flex: 0 0 auto; background: var(--ia-panel); z-index: 2; }
.section-card-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.footer { flex: 0 0 auto; padding: 8px 24px; border-top: 1px solid var(--ia-rule); background: var(--ia-sunken); }

/* Collapsible navigation groups */
.nav-group { margin-bottom: 6px; border-radius: 8px; }
.nav-group-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; border-radius: 7px; user-select: none; }
.nav-group-title::-webkit-details-marker { display: none; }
.nav-group-title:hover, .nav-group-title:focus-visible { color: var(--ia-text-2); background: var(--ia-chrome); outline: none; }
.nav-group-title:focus-visible { box-shadow: 0 0 0 2px var(--ia-accent-soft) inset; }
.nav-group-chevron { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .16s ease; margin-right: 4px; }
.nav-group:not([open]) .nav-group-chevron { transform: rotate(-45deg); }
.nav-group-links { padding: 2px 0 4px; }
.nav-group:not([open]) .nav-group-links { display: none; }

@media (max-width: 800px) {
    .sidebar { width: 210px; }
    .content { padding: 16px; }
    .content > .page-header { top: -16px; margin: -16px -16px 12px; padding: 16px; }
    .section-card { max-height: calc(100vh - 170px); }
}

.permission-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .65rem; margin-top: 1rem; }
.checkbox-field { display: flex; align-items: center; gap: .55rem; }
.alert-warning { border: 1px solid var(--ia-attn-border); background: var(--ia-attn-soft); color: var(--ia-attn); padding: 1rem 1.25rem; border-radius: .65rem; margin-bottom: 1rem; }
.alert-warning code { display: block; overflow-wrap: anywhere; margin: .5rem 0; }

.application-credentials { border: 1px solid var(--ia-rule); border-radius: 12px; padding: 18px; background: var(--ia-sunken); }
.application-credentials legend { padding: 0 8px; font-weight: 700; color: var(--ia-text); }
.credential-status { display: inline-flex; width: fit-content; padding: 4px 10px; border-radius: 999px; background: var(--ia-ok-soft); color: var(--ia-ok); font-weight: 700; }
.field-help { color: var(--ia-text-3); line-height: 1.5; }
/* ── Entrada ───────────────────────────────────────────────────────────────
   Pantalla a sangre, sin tarjeta: la marca a la izquierda y el formulario a la
   derecha, los dos centrados verticalmente sobre el fondo de la aplicación.
   Los campos son una línea, no una caja: en una pantalla con dos campos, el
   recuadro es ruido y la línea basta para decir dónde se escribe. */
.login-page {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    overflow: auto;
    position: relative;
    background: var(--ia-bg);
    color: var(--ia-text);
    font-family: var(--ia-font);
}
.login-shell {
    width: min(1040px, calc(100% - 64px));
    display: grid;
    grid-template-columns: 1fr 368px;
    gap: 80px;
    align-items: center;
    padding: 64px 0;
}

.login-brand-panel { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
/* El PNG de marca trae margen transparente propio (ocupa el 84% de su alto),
   asi que la altura declarada es mayor que el tamaño visible del logotipo. */
.login-brand-panel img { height: 80px; width: auto; margin-bottom: 22px; }
.login-brand-panel h1 {
    margin: 0;
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--ia-text);
}
/* Regla corta de acento bajo el título: la firma de la marca en la pantalla. */
.login-rule { width: 58px; height: 2px; margin: 20px 0 22px; border: 0; background: var(--ia-accent); }
.login-brand-panel p { margin: 0; max-width: 58ch; color: var(--ia-text-3); font-size: 13.5px; line-height: 1.7; }
/* Cada frase, un bloque: se parte donde termina la idea y no donde deja de caber. */
.login-blurb span { display: block; text-wrap: pretty; }

.login-card { display: flex; flex-direction: column; gap: 22px; }
.login-form { display: flex; flex-direction: column; gap: 22px; }
/* Etiqueta y control forman una unidad; el hueco entre pares es el del formulario. */
.login-field { display: flex; flex-direction: column; gap: 4px; }
.login-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.login-form label,
.login-field-head label {
    padding-left: 12px;
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ia-text-4);
}
.login-form input[type=email],
.login-form input[type=password],
.login-form input[type=text] {
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid var(--ia-rule-strong);
    border-radius: 0;
    background: transparent;
    color: var(--ia-text);
    font: inherit;
    font-size: 15px;
}
.login-form input:focus { border-bottom-color: var(--ia-accent); outline: none; }
.login-form input:focus-visible { outline: 2px solid var(--ia-accent); outline-offset: 4px; }
/* Mostrar la contraseña es una acción del campo, no un botón de la pantalla. */
.login-reveal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ia-text-4);
    font: inherit;
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
}
.login-reveal:hover { color: var(--ia-accent-400); }
.login-reveal i { font-size: 14px; letter-spacing: normal; }

.login-options { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 12px; }
.login-remember { display: flex; align-items: center; gap: 9px; color: var(--ia-text-2); font-size: 13px; }
.login-remember input { width: 15px; height: 15px; margin: 0; accent-color: var(--ia-accent); }
.login-forgot {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ia-accent-400);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.login-forgot:hover { color: var(--ia-accent-300); }
/* La nota de "no hay autoservicio" aparece bajo el enlace, no en un toast. */
.login-forgot-note { margin: -8px 0 0; padding: 0 12px; color: var(--ia-text-3); font-size: 12.5px; line-height: 1.6; }
.login-forgot-note[hidden] { display: none; }

.login-form button[type=submit],
.login-sso {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 46px;
    padding: 11px 16px;
    border-radius: var(--ia-radius-md);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
.login-form button[type=submit] {
    border: 1px solid var(--ia-accent);
    background: var(--ia-accent-soft);
    color: var(--ia-accent-300);
}
.login-form button[type=submit]:hover { background: var(--ia-accent-soft-2); }
.login-sso {
    justify-content: flex-start;
    border: 1px solid var(--ia-rule-strong);
    background: transparent;
    color: var(--ia-text-2);
    text-decoration: none;
}
.login-sso:hover { border-color: var(--ia-accent); color: var(--ia-accent-400); }
.login-sso .login-sso-arrow { margin-left: auto; color: var(--ia-text-4); }
.login-sso:hover .login-sso-arrow { color: var(--ia-accent-400); }

.login-error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--ia-err-border);
    border-radius: var(--ia-radius-md);
    background: var(--ia-err-soft);
    color: var(--ia-err);
    font-size: 13px;
}
.login-error:empty { display: none; }
.login-security-note { margin: 0; max-width: 40ch; color: var(--ia-text-faint); font-size: 12px; line-height: 1.6; }

@media (max-width: 900px) {
    .login-shell { grid-template-columns: 1fr; gap: 40px; width: min(420px, calc(100% - 48px)); }
    .login-brand-panel p { max-width: none; }
}

/* Single-scroll viewport stabilization */
html, body, app { height: 100%; min-height: 0; margin: 0; overflow: hidden; }
app { display: block; }
.content:has(> .section-card) { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.content:has(> .section-card) > .page-header { position: relative; top: auto; flex: 0 0 auto; margin: 0 0 16px; padding: 0; border-bottom: 0; background: transparent; backdrop-filter: none; }
.content:has(> .section-card) > .section-card {  max-height: none; min-height: 0; margin-bottom: 0; }
.k-window { max-height: calc(100dvh - 32px); overflow: hidden; }
.k-window .k-window-content { min-height: 0; }
.companies-window .k-window-content,
.company-template-window .k-window-content,
.company-location-window .k-window-content { display: flex; flex-direction: column; overflow: hidden; }
.json-property-window .k-window-content,
.schema-property-window .k-window-content { overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
@media (max-width: 800px) {
    .content:has(> .section-card) > .page-header { top: auto; margin: 0 0 12px; padding: 0; }
}
/* Agent Version full-width override */
.admin-form.agent-version-form {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.admin-form.agent-version-form > .agent-version-tabs,
.admin-form.agent-version-form .k-tabstrip,
.admin-form.agent-version-form .k-tabstrip-content,
.admin-form.agent-version-form fieldset.agent-editor-section,
.admin-form.agent-version-form fieldset.agent-editor-section > .agent-editor-grid {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

.admin-form.agent-version-form > .agent-version-tabs {
    display: block !important;
    grid-column: 1 / -1;
}

.admin-form.agent-version-form fieldset.agent-editor-section {
    display: block !important;
}

.admin-form.agent-version-form fieldset.agent-editor-section > .agent-editor-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
}

.admin-form.agent-version-form fieldset.agent-editor-section > .structured-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.admin-form.agent-version-form input:not([type="checkbox"]),
.admin-form.agent-version-form select,
.admin-form.agent-version-form textarea,
.admin-form.agent-version-form .form-control,
.admin-form.agent-version-form .k-input,
.admin-form.agent-version-form .k-picker {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

@media (max-width: 1100px) {
    .admin-form.agent-version-form fieldset.agent-editor-section > .structured-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Governed AI Agent Builder */
.agent-builder-workspace { display:flex; flex-direction:column; gap:18px; min-height:0; }
.agent-builder-scope { margin:0; padding:18px; border:1px solid var(--ia-rule); border-radius:12px; background:var(--ia-sunken); }
.agent-builder-scope legend { padding:0 8px; color:var(--ia-text); font-weight:750; }
.agent-builder-scope > label, .agent-builder-grid label { display:block; margin-bottom:7px; color:var(--ia-text); font-size:13px; font-weight:700; }
.agent-builder-scope textarea, .agent-builder-grid input, .agent-builder-grid select { width:100%; box-sizing:border-box; }
.agent-builder-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.agent-builder-scope .actions { display:flex; justify-content:flex-end; gap:10px; margin-top:14px; }
.agent-builder-review-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border:1px solid var(--ia-rule); border-radius:10px; background:var(--ia-panel); color:var(--ia-text-3); }
.admin-form.agent-builder-form { max-width:none; padding:18px 4px; }
.admin-form.agent-builder-form fieldset { grid-column:1/-1; }
.admin-form.agent-builder-form .wide { grid-column:1/-1; }
.agent-builder-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; padding:18px 4px; }
.agent-builder-choice-grid fieldset { min-width:0; padding:18px; border:1px solid var(--ia-rule); border-radius:10px; background:var(--ia-sunken); }
.agent-builder-choice-grid legend { padding:0 8px; font-weight:750; }
.agent-builder-choice { display:flex; gap:11px; align-items:flex-start; padding:12px; margin:8px 0; border:1px solid var(--ia-rule); border-radius:9px; background:var(--ia-panel); cursor:pointer; }
.agent-builder-choice input { margin-top:3px; }
.agent-builder-choice span { display:flex; flex-direction:column; gap:3px; min-width:0; }
.agent-builder-choice small { color:var(--ia-text-3); line-height:1.4; }
.agent-builder-validation { display:flex; flex-direction:column; gap:16px; padding:18px 4px; }
.agent-builder-footer { position:sticky; bottom:0; z-index:4; display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; padding:14px 2px 2px; border-top:1px solid var(--ia-rule); background:var(--ia-panel); }
.agent-builder-footer label { display:flex; align-items:center; gap:7px; margin-right:auto; }
@media (max-width:900px) { .agent-builder-grid,.agent-builder-choice-grid { grid-template-columns:1fr; } .agent-builder-review-header { align-items:flex-start; flex-direction:column; } }

.capability-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .65rem;
    margin-top: .45rem;
}

.capability-check-grid label {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem .75rem;
    border: 1px solid var(--border-color, var(--ia-rule));
    border-radius: .5rem;
    background: var(--ia-panel);
    font-weight: 500;
}

.tenant-model-form,
.tenant-model-form fieldset,
.tenant-model-form .advanced-settings {
    grid-column: 1 / -1;
    width: 100%;
}

.advanced-settings {
    padding: .85rem 1rem;
    border: 1px solid var(--border-color, var(--ia-rule));
    border-radius: .5rem;
}

.agent-builder-mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}.agent-builder-mode{display:flex;flex-direction:column;gap:4px;text-align:left;padding:14px;border:1px solid var(--ia-rule);border-radius:10px;background:var(--ia-panel);color:var(--ia-text)}.agent-builder-mode span{font-size:12px;color:var(--ia-text-3)}.agent-builder-mode.active{border-color:var(--ia-accent);background:var(--ia-sunken);box-shadow:0 0 0 2px var(--ia-accent-soft)}.agent-builder-conversation{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:16px;min-height:420px}.builder-chat,.builder-checklist{border:1px solid var(--ia-rule);border-radius:12px;background:var(--ia-panel);padding:16px;min-width:0}.builder-chat{display:flex;flex-direction:column}.builder-messages{display:flex;flex-direction:column;gap:10px;max-height:360px;overflow:auto;padding:4px}.builder-message{padding:12px 14px;border-radius:10px;background:var(--ia-sunken)}.builder-message.user{margin-left:12%;background:var(--ia-sunken)}.builder-message p{margin:5px 0 0;white-space:pre-wrap}.builder-composer{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;margin-top:14px}.builder-checklist ul{padding-left:18px}.builder-resource{display:grid;gap:4px;padding:10px 0;border-top:1px solid var(--ia-rule)}.builder-resource span{font-size:12px;color:var(--ia-text-3)}@media(max-width:900px){.agent-builder-mode-grid,.agent-builder-conversation{grid-template-columns:1fr}.builder-composer{grid-template-columns:1fr}}
/* Agent Builder wizard modal */
.agent-builder-window .k-window-content,
.company-connector-window .k-window-content { padding: 0; background: var(--surface, var(--ia-panel)); }
.agent-builder-window .k-window-titlebar,
.company-connector-window .k-window-titlebar { padding: .85rem 1.25rem; font-size: 1.05rem; }

.agent-builder-modal { display: flex; flex-direction: column; gap: 1.25rem; height: 100%; overflow-y: auto; padding: 1.25rem 1.5rem; }
.agent-builder-modal > p.section-description { margin: 0; color: var(--muted, var(--ia-text-2)); font-size: .92rem; line-height: 1.5; }
.agent-builder-modal fieldset { border: 1px solid var(--border, var(--ia-rule)); border-radius: 10px; padding: 1rem 1.25rem; margin: 0; background: var(--surface, var(--ia-panel)); }
.agent-builder-modal legend { font-weight: 600; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, var(--ia-text-2)); padding: 0 .45rem; }
.agent-builder-modal label { font-weight: 500; display: block; margin-bottom: .3rem; }
.agent-builder-modal textarea, .agent-builder-modal input[type=text], .agent-builder-modal select { width: 100%; }
.agent-builder-modal ul { margin: .35rem 0 0; padding-left: 1.15rem; }
.agent-builder-modal li { margin-bottom: .3rem; line-height: 1.45; }
.agent-builder-modal .k-tabstrip { border: 0; }
.agent-builder-modal .field-help { color: var(--muted, var(--ia-text-2)); font-size: .83rem; }

.builder-step-label { margin-left: .9rem; font-weight: 400; font-size: .85rem; opacity: .75; }

.builder-proposal { border: 1px solid var(--border, var(--ia-rule)); border-left: 4px solid var(--accent, var(--ia-accent)); border-radius: 8px; padding: .75rem 1rem; margin: .6rem 0; background: var(--ia-accent-soft); }
.builder-proposal > label { display: flex; align-items: center; gap: .5rem; font-weight: 600; margin-bottom: .35rem; }
.builder-proposal p { margin: .25rem 0; font-size: .92rem; }
.builder-proposal small { color: var(--muted, var(--ia-text-2)); font-size: .82rem; }
.builder-proposal code { font-size: .8rem; background: var(--ia-chrome); padding: .1rem .35rem; border-radius: 4px; }
.builder-proposal pre { max-height: 240px; overflow: auto; font-size: .78rem; white-space: pre-wrap; background: var(--ia-chrome); padding: .6rem; border-radius: 6px; margin: .4rem 0 0; }
.builder-proposal details summary { cursor: pointer; font-size: .85rem; color: var(--accent, var(--ia-accent-400)); }

.builder-question { border-bottom: 1px solid var(--border, var(--ia-rule)); padding: .85rem 0; }
.builder-question:last-child { border-bottom: 0; }
.builder-question label { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.builder-question .badge,
.agent-builder-modal .badge { font-size: .7rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; padding: .15rem .45rem; border-radius: 999px; background: var(--ia-accent-soft); color: var(--accent, var(--ia-accent-400)); }

.agent-builder-modal .admin-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.agent-builder-modal .admin-table th { text-align: left; font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted, var(--ia-text-2)); border-bottom: 2px solid var(--border, var(--ia-rule)); padding: .5rem .6rem; }
.agent-builder-modal .admin-table td { border-bottom: 1px solid var(--border, var(--ia-rule)); padding: .5rem .6rem; vertical-align: top; }
.agent-builder-modal .admin-table tr:hover td { background: var(--ia-accent-soft); }
.agent-builder-modal .k-grid { width: 100%; }

.agent-builder-window .k-window-footer,
.company-connector-window .k-window-footer { padding: .85rem 1.5rem; border-top: 1px solid var(--border, var(--ia-rule)); background: var(--surface-muted, var(--ia-sunken)); }
.agent-builder-window .k-window-footer .actions,
.company-connector-window .k-window-footer .actions { display: flex; gap: .6rem; align-items: center; justify-content: flex-end; margin: 0; }

.builder-advanced { margin-top: .75rem; }
.builder-advanced summary { cursor: pointer; font-size: .88rem; color: var(--accent, var(--ia-accent-400)); margin-bottom: .5rem; }
.builder-confirm { display: inline-flex; align-items: center; gap: .35rem; margin: 0 .5rem; font-weight: 400; }

/* Agent Builder wizard: stepper, welcome screen and prerequisite checklist */
.builder-actions { flex-wrap: wrap; }
.builder-footer-hint { margin-right: auto; color: var(--muted, var(--ia-text-2)); font-size: .84rem; max-width: 52ch; line-height: 1.4; }
.agent-builder-window .k-window-footer .k-button { min-width: 7.5rem; }
.agent-builder-window .k-window-footer .k-button-solid-primary { min-width: 11rem; font-weight: 600; }

.builder-stepper { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.builder-stepper li { display: flex; align-items: center; gap: .5rem; flex: 1 1 8rem; min-width: 0; padding: .55rem .8rem; border: 1px solid var(--border, var(--ia-rule)); border-radius: 8px; background: var(--surface, var(--ia-panel)); font-size: .85rem; }
.builder-stepper-index { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; flex: 0 0 auto; border-radius: 999px; background: var(--ia-chrome); font-size: .78rem; font-weight: 700; }
.builder-stepper-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.builder-stepper .is-current { border-color: var(--accent, var(--ia-accent)); background: var(--ia-accent-soft); font-weight: 600; }
.builder-stepper .is-current .builder-stepper-index { background: var(--accent, var(--ia-accent-soft)); color: var(--ia-accent-300); }
.builder-stepper .is-done { color: var(--muted, var(--ia-text-2)); }
.builder-stepper .is-done .builder-stepper-index { background: var(--ia-ok-soft); color: var(--ia-ok-strong); }
.builder-stepper .is-pending { opacity: .6; }

.builder-welcome { display: flex; flex-direction: column; gap: 1.1rem; }
.builder-welcome-intro h2 { margin: 0 0 .4rem; font-size: 1.2rem; }
.builder-welcome-intro p { margin: 0; color: var(--muted, var(--ia-text-2)); line-height: 1.55; max-width: 90ch; }
.builder-howto { margin: 0; padding-left: 1.25rem; }
.builder-howto li { margin-bottom: .45rem; line-height: 1.5; }

.builder-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: .55rem; }
.builder-checks li { display: flex; align-items: flex-start; gap: .6rem; padding: .6rem .75rem; border: 1px solid var(--border, var(--ia-rule)); border-radius: 8px; margin: 0; }
.builder-checks li > span:nth-child(2) { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.builder-checks small { color: var(--muted, var(--ia-text-2)); font-size: .82rem; line-height: 1.4; }
.builder-check-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; flex: 0 0 auto; border-radius: 999px; font-size: .8rem; font-weight: 700; color: var(--ia-text); }
.builder-checks .ok .builder-check-mark { background: var(--ia-ok-soft); }
.builder-checks .blocking { border-color: var(--ia-err); background: var(--ia-err-soft); }
.builder-checks .blocking .builder-check-mark { background: var(--ia-err-soft); }
.builder-checks .warning { border-color: var(--ia-attn); background: var(--ia-attn-soft); }
.builder-checks .warning .builder-check-mark { background: var(--ia-attn-soft); }
.builder-check-action { margin-left: auto; align-self: center; font-size: .82rem; white-space: nowrap; }
.agent-builder-modal .badge-success { background: var(--ia-ok-soft); color: var(--ia-ok); }
.agent-builder-scope-row { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: nowrap; }
.agent-builder-scope-row > div { flex: 1 1 0; min-width: 0; }


.workspace-home {
    border: 0;
    font: inherit;
    cursor: pointer;
}
.companies-delete-window .k-window-content {
    padding: 0;
}

.companies-delete-shell {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
}

.companies-delete-warning {
    display: grid;
    gap: .35rem;
    padding: 1rem;
    border: 1px solid var(--ia-err-border);
    border-radius: .75rem;
    color: var(--ia-err);
    background: var(--ia-err-soft);
}

.companies-delete-company {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.companies-delete-company span {
    color: var(--muted-text, var(--ia-text-3));
}

.companies-delete-impact {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
}

.companies-delete-impact span {
    padding: .75rem;
    border: 1px solid var(--border-color, var(--ia-rule));
    border-radius: .6rem;
    background: var(--surface-subtle, var(--ia-sunken));
}

.companies-delete-confirmation {
    display: grid;
    gap: .5rem;
}

.companies-delete-mismatch {
    color: var(--ia-err);
    font-size: .875rem;
}

@media (max-width: 640px) {
    .companies-delete-impact {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---- Agent playground ---------------------------------------------------- */
.agent-playground { display: flex; flex-direction: column; gap: 1rem; height: 100%; }
.agent-playground-transcript { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: .75rem; padding: .25rem; }
.agent-playground-empty { color: var(--bs-secondary-color, var(--ia-text-3)); font-size: .9rem; padding: 1.5rem; text-align: center; }
.agent-playground-turn { border-radius: .5rem; padding: .65rem .85rem; max-width: 85%; }
.agent-playground-turn-user { align-self: flex-end; background: var(--ia-hover); }
.agent-playground-turn-agent { align-self: flex-start; background: var(--ia-sunken); border: 1px solid var(--ia-rule); }
.agent-playground-author { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; margin-bottom: .25rem; display: flex; align-items: center; gap: .5rem; }
.agent-playground-chip { font-size: .7rem; font-weight: 600; padding: .05rem .4rem; border-radius: .75rem; background: var(--ia-hover); text-transform: none; letter-spacing: 0; }
.agent-playground-chip-ok { background: var(--ia-ok-soft); color: var(--ia-ok); }
.agent-playground-chip-error { background: var(--ia-err-soft); color: var(--ia-err); }
.agent-playground-chip-busy { background: var(--ia-hover); color: var(--ia-text-2); }
.agent-playground-meta { font-size: .7rem; font-weight: 400; color: var(--ia-text-3); text-transform: none; letter-spacing: 0; }
.agent-playground-text { white-space: pre-wrap; word-break: break-word; }
.agent-playground-pending { color: var(--ia-text-3); font-style: italic; }
.agent-playground-failure { color: var(--ia-err); }
.agent-playground-details { margin-top: .5rem; font-size: .8rem; }
.agent-playground-details ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.agent-playground-composer { flex: 0 0 auto; display: flex; flex-direction: column; gap: .5rem; }
.agent-playground-composer .actions { display: flex; align-items: center; gap: .5rem; justify-content: flex-end; }
.agent-playground-model { margin-right: auto; }

/* ---- Agent version configuration ----------------------------------------- */
.agent-version-configuration { display: flex; flex-direction: column; gap: 1rem; margin-top: .5rem; }
.agent-version-checklist { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; max-height: 320px; overflow-y: auto; }
.agent-version-checklist label { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; cursor: pointer; }
.agent-version-checklist input[type="checkbox"] { margin: 0; }
.agent-version-meta { font-size: .8rem; color: var(--ia-text-3); }
.agent-version-tag { font-size: .7rem; font-weight: 600; padding: .05rem .4rem; border-radius: .75rem; background: var(--ia-hover); color: var(--ia-text-2); }
.agent-version-assign-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.agent-version-assign-row .form-select { flex: 1 1 320px; }
.agent-version-assign-row .form-control { width: 100px; }

/* ---- Connector operations ------------------------------------------------ */
.connector-operation-list { list-style: none; margin: .5rem 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; max-height: 340px; overflow-y: auto; }
.connector-operation-list label { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; cursor: pointer; }
.connector-operation-list code { background: var(--ia-hover); padding: .05rem .35rem; border-radius: .25rem; }
.connector-operation-tag { font-size: .7rem; font-weight: 600; padding: .05rem .4rem; border-radius: .75rem; background: var(--ia-hover); color: var(--ia-text-2); }
.connector-operation-summary { font-size: .8rem; color: var(--ia-text-3); }
.agent-version-tag-off { background: var(--ia-err-soft); color: var(--ia-err); }
.connector-operation-tag-off { background: var(--ia-err-soft); color: var(--ia-err); }
.connector-operation-toggle { margin-left: .5rem; font-size: .75rem; }

/* ---- Governed tools table ------------------------------------------------ */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Agent chat ---------------------------------------------------------- */
.chat-scope { display: flex; gap: 1rem; flex-wrap: wrap; align-items: end; margin-bottom: 1rem; }
.chat-scope > div { min-width: 200px; }
.chat-scope-actions { display: flex; gap: .5rem; align-items: center; min-width: auto; }
.chat-layout { display: grid; grid-template-columns: 260px 1fr 320px; gap: 1rem; height: 68vh; }
.chat-layout-collapsed { grid-template-columns: 260px 1fr; }
.chat-conversations, .chat-log { border: 1px solid var(--border, var(--ia-rule)); border-radius: .5rem; overflow-y: auto; background: var(--ia-sunken); }
.chat-panel-title { position: sticky; top: 0; background: var(--ia-sunken); padding: .5rem .75rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, var(--ia-text-2)); display: flex; justify-content: space-between; align-items: center; }
.chat-log-clear { border: none; background: none; font-size: .7rem; color: var(--ia-text-2); cursor: pointer; text-transform: none; letter-spacing: 0; }
.chat-conversation { display: block; width: 100%; text-align: left; border: none; background: none; padding: .55rem .75rem; border-bottom: 1px solid var(--ia-rule); cursor: pointer; }
.chat-conversation:hover { background: var(--ia-sunken); }
.chat-conversation.is-current { background: var(--ia-sunken); }
.chat-conversation-title { display: block; font-size: .85rem; font-weight: 600; }
.chat-conversation-meta { display: block; font-size: .72rem; color: var(--muted, var(--ia-text-3)); }
.chat-thread-panel { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.chat-thread { flex: 1 1 auto; overflow-y: auto; border: 1px solid var(--border, var(--ia-rule)); border-radius: .5rem; padding: .75rem; display: flex; flex-direction: column; gap: .6rem; }
.chat-empty { color: var(--muted, var(--ia-text-3)); font-size: .85rem; padding: 1.5rem; text-align: center; }
.chat-message { border-radius: .5rem; padding: .6rem .8rem; max-width: 82%; }
.chat-message-user { align-self: flex-end; background: var(--ia-hover); }
.chat-message-agent { align-self: flex-start; background: var(--ia-sunken); border: 1px solid var(--ia-rule); }
.chat-message-author { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; margin-bottom: .2rem; color: var(--muted, var(--ia-text-2)); }
.chat-message-text { white-space: pre-wrap; word-break: break-word; }
/* The line somebody reads while they wait. Not italic grey text any more: it has to look alive, because the
   question it answers is "is this still going?" and a static label answers that badly. */
.chat-pending { color: var(--ia-text-3); display: flex; align-items: center; gap: .5rem; }
.chat-pending-label { font-style: italic; }
.chat-pending-elapsed { font-size: .78rem; font-variant-numeric: tabular-nums; opacity: .7; }
.chat-pending-dots { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.chat-pending-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .35; animation: chat-pending-pulse 1.2s infinite ease-in-out; }
.chat-pending-dots i:nth-child(2) { animation-delay: .18s; }
.chat-pending-dots i:nth-child(3) { animation-delay: .36s; }

@keyframes chat-pending-pulse {
    0%, 80%, 100% { opacity: .25; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-2px); }
}

/* Somebody watching a slow answer should not also be watching something jitter. */
@media (prefers-reduced-motion: reduce) {
    .chat-pending-dots i { animation: none; opacity: .55; }
}
.chat-message-tools { margin-top: .4rem; font-size: .78rem; }
.chat-message-tools ul { margin: .25rem 0 0; padding-left: 1.1rem; }
/* Chat: knowledge attached to a conversation and files uploaded into it */
.chat-knowledge-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .45rem .1rem .1rem; font-size: .82rem; }
.chat-knowledge-label { color: var(--muted, var(--ia-text-2)); }
.chat-knowledge-chip { display: inline-flex; align-items: center; padding: .15rem .55rem; border: 1px solid var(--border, var(--ia-rule)); border-radius: 999px; background: var(--ia-accent-soft); color: var(--accent, var(--ia-accent-400)); }
.chat-knowledge-chip.is-owned { background: var(--ia-ok-soft); color: var(--ia-ok); border-color: var(--ia-ok); }
.chat-knowledge-edit { border: 0; background: none; padding: 0 .25rem; color: var(--accent, var(--ia-accent-400)); cursor: pointer; text-decoration: underline; font-size: .82rem; }

.chat-knowledge { display: flex; flex-direction: column; gap: 1.1rem; }
.chat-knowledge h4 { margin: 0 0 .5rem; font-size: .95rem; }
.chat-knowledge-documents { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.chat-knowledge-documents li { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border: 1px solid var(--border, var(--ia-rule)); border-radius: 8px; }
.chat-knowledge-document-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-knowledge-document-meta { color: var(--muted, var(--ia-text-2)); font-size: .82rem; margin-right: auto; }
.chat-knowledge-upload { display: block; margin: .4rem 0 .3rem; }
.chat-knowledge-help { margin: 0; color: var(--muted, var(--ia-text-2)); font-size: .82rem; line-height: 1.45; }
.chat-knowledge-choice { display: flex; align-items: flex-start; gap: .6rem; padding: .5rem .6rem; margin-bottom: .35rem; border: 1px solid var(--border, var(--ia-rule)); border-radius: 8px; cursor: pointer; }
.chat-knowledge-choice span { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.chat-knowledge-choice small { color: var(--muted, var(--ia-text-2)); font-size: .82rem; }

/* Un documento fijado que el agente ya no puede leer sigue en la lista y se ve apagado: quitarlo solo porque
   se retiró el permiso escondería justo el hecho que explica por qué las respuestas cambiaron. */
.chat-knowledge-documents li.is-unreadable { border-style: dashed; opacity: .65; }
.chat-knowledge-pin-picker { margin: .5rem 0 .4rem; }
.chat-knowledge-candidates { list-style: none; margin: .35rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; max-height: 12rem; overflow-y: auto; }
.chat-knowledge-candidates button { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; width: 100%; padding: .4rem .6rem; text-align: left; background: none; border: 1px solid var(--border, var(--ia-rule)); border-radius: 8px; cursor: pointer; }
.chat-knowledge-candidates button:hover:not(:disabled) { border-color: var(--accent, var(--ia-accent)); }
.chat-knowledge-candidates small { color: var(--muted, var(--ia-text-2)); font-size: .8rem; }

.chat-composer { display: flex; gap: .5rem; align-items: flex-end; }

/* The file input itself is unusable as a control and unstyleable across browsers, so it is made invisible and the
   label around it becomes the button. The input still receives the click, which is what keeps it accessible. */
.chat-attach { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border: 1px solid var(--ia-rule); border-radius: .6rem; cursor: pointer; font-size: 1.05rem; background: var(--ia-panel); transition: background .15s ease, border-color .15s ease; }
.chat-attach:hover { background: var(--ia-hover); border-color: var(--ia-rule-strong); }
.chat-attach:focus-within { border-color: var(--ia-accent); box-shadow: 0 0 0 .2rem var(--ia-accent-soft); }
.chat-attach input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.chat-attach:has(input:disabled) { opacity: .5; cursor: not-allowed; }

/* The attached files, above the composer and removable from there. Wraps rather than scrolls: somebody who has
   attached six files should see six, not a row with a hidden end. */
.chat-attachments { display: flex; flex-wrap: wrap; gap: .4rem; padding: .1rem .1rem .45rem; }
.chat-attachment { display: inline-flex; align-items: center; gap: .4rem; max-width: 22rem; padding: .3rem .35rem .3rem .5rem; border: 1px solid var(--ia-rule); border-radius: .5rem; background: var(--ia-sunken); font-size: .82rem; }
.chat-attachment-icon { flex: 0 0 auto; }
.chat-attachment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-attachment-meta { flex: 0 0 auto; font-variant-numeric: tabular-nums; opacity: .6; }
.chat-attachment-remove { flex: 0 0 auto; border: 0; background: transparent; cursor: pointer; line-height: 1; font-size: 1.05rem; padding: 0 .15rem; border-radius: .25rem; color: var(--ia-text-3); }
.chat-attachment-remove:hover:not(:disabled) { background: var(--ia-hover); color: var(--ia-err); }
.chat-attachment-remove:disabled { opacity: .4; cursor: not-allowed; }
.chat-attachment.is-pending { opacity: .75; font-style: italic; }

.chat-composer-notice { font-size: .82rem; color: var(--ia-text-2); padding: .25rem .1rem .4rem; }
.chat-composer-notice.is-error { color: var(--ia-err); }
.chat-composer .k-button { flex: 0 0 auto; height: 2.6rem; }
.chat-composer textarea { flex: 1 1 auto; }
.chat-log-entries { list-style: none; margin: 0; padding: 0; font-size: .75rem; font-family: var(--ia-font-mono); }
.chat-log-entry { display: flex; gap: .5rem; padding: .3rem .75rem; border-bottom: 1px solid var(--ia-rule); }
.chat-log-time { color: var(--ia-text-3); flex: 0 0 auto; }
.chat-log-text { word-break: break-word; }
.chat-log-error .chat-log-text { color: var(--ia-err); }
@media (max-width: 1200px) { .chat-layout, .chat-layout-collapsed { grid-template-columns: 1fr; height: auto; } }

/* ---- Rendered agent answers ---------------------------------------------- */
.chat-message-rendered { white-space: normal; }
.chat-message-rendered > :first-child { margin-top: 0; }
.chat-message-rendered > :last-child { margin-bottom: 0; }
.chat-message-rendered p { margin: 0 0 .5rem; }
.chat-message-rendered ul, .chat-message-rendered ol { margin: .25rem 0 .5rem; padding-left: 1.2rem; }
.chat-message-rendered table { border-collapse: collapse; width: 100%; margin: .5rem 0; font-size: .85rem; display: block; overflow-x: auto; }
.chat-message-rendered th { text-align: left; background: var(--ia-hover); border-bottom: 1px solid var(--ia-rule); padding: .35rem .55rem; white-space: nowrap; }
.chat-message-rendered td { border-bottom: 1px solid var(--ia-rule); padding: .35rem .55rem; vertical-align: top; }
.chat-message-rendered tr:last-child td { border-bottom: none; }
.chat-message-rendered code { background: var(--ia-hover); padding: .05rem .3rem; border-radius: .25rem; font-size: .82rem; }
.chat-message-rendered pre { background: var(--ia-sunken); padding: .6rem; border-radius: .4rem; overflow-x: auto; }
.chat-message-rendered pre code { background: none; padding: 0; }
.chat-message-agent { max-width: 92%; }
.connector-mapping { margin: .5rem 0 .75rem 1.6rem; padding: .6rem .75rem; border-left: 3px solid var(--ia-rule); background: var(--ia-sunken); }
.connector-mapping-table { width: 100%; border-collapse: collapse; font-size: .85rem; margin: .5rem 0; }
.connector-mapping-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ia-text-2); padding: .3rem .4rem; border-bottom: 1px solid var(--ia-rule); }
.connector-mapping-table td { padding: .25rem .4rem; vertical-align: middle; }
.connector-mapping-table td code { background: var(--ia-hover); padding: .1rem .35rem; border-radius: .25rem; }

/* ---- Chat conversation management ---------------------------------------- */
.chat-search { padding: .4rem .5rem; border-bottom: 1px solid var(--ia-rule); }
.chat-conversation-row { border-bottom: 1px solid var(--ia-rule); }
.chat-conversation-row.is-current { background: var(--ia-sunken); }
.chat-conversation-row .chat-conversation { border-bottom: none; }
.chat-conversation-actions { display: none; gap: .35rem; padding: 0 .75rem .45rem; }
.chat-conversation-row:hover .chat-conversation-actions, .chat-conversation-row.is-current .chat-conversation-actions { display: flex; }
.chat-conversation-actions button { border: none; background: none; font-size: .72rem; color: var(--ia-text-2); cursor: pointer; padding: 0; }
.chat-conversation-actions button:hover { text-decoration: underline; }
.chat-danger { color: var(--ia-err) !important; }
.chat-rename { padding: .5rem .75rem; display: flex; flex-direction: column; gap: .35rem; }
.chat-rename .actions { display: flex; gap: .5rem; }
.chat-message-actions { display: none; gap: .5rem; margin-top: .35rem; }
.chat-message:hover .chat-message-actions { display: flex; }
.chat-message-actions button { border: none; background: none; font-size: .72rem; color: var(--ia-text-2); cursor: pointer; padding: 0; }
.chat-message-actions button:hover { text-decoration: underline; }
.chat-confirm { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* Grows with what is typed instead of scrolling inside one line. field-sizing does it without measuring in
   script; the rows attribute keeps the closed height at one line where it is not supported, so the fallback is
   the behaviour we had rather than a broken box. */
.chat-input {
    resize: none;
    overflow-y: auto;
    min-height: 2.6rem;
    max-height: 220px;
    line-height: 1.45;
    field-sizing: content;
    padding: .55rem .75rem;
    border-radius: .6rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.chat-input:focus {
    border-color: var(--ia-accent);
    box-shadow: 0 0 0 .2rem var(--ia-accent-soft);
    outline: none;
}

.chat-input:disabled { background: var(--ia-hover); }
.chat-message-author { display: flex; justify-content: space-between; gap: .75rem; }
.chat-message-time { font-weight: 400; color: var(--ia-text-3); text-transform: none; letter-spacing: 0; }

/* ---- Approvals and quick replies in the thread ---------------------------- */
.chat-approval { align-self: stretch; border: 1px solid var(--ia-attn-border); background: var(--ia-attn-soft); border-radius: .5rem; padding: .65rem .85rem; }
.chat-approval-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ia-attn); }
.chat-approval-text { margin: .2rem 0; }
.chat-approval-meta { font-size: .75rem; color: var(--ia-text-3); margin-bottom: .5rem; }
.chat-quick-replies { display: flex; gap: .5rem; align-self: flex-start; }
.chat-quick-replies button { border: 1px solid var(--ia-rule); background: var(--ia-panel); border-radius: 1rem; padding: .25rem .9rem; font-size: .85rem; cursor: pointer; }
.chat-quick-replies button:hover { background: var(--ia-sunken); border-color: var(--ia-accent); }

.chat-editing { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--ia-attn-soft); border: 1px solid var(--ia-attn-border); border-radius: .4rem; padding: .4rem .7rem; font-size: .85rem; }
.chat-editing button { border: none; background: none; color: var(--ia-text-2); cursor: pointer; font-size: .8rem; }

/* ---- Chat settings and layout variants ------------------------------------ */
.chat-no-conversations { grid-template-columns: 1fr 320px; }
.chat-no-log { grid-template-columns: 260px 1fr; }
.chat-no-conversations.chat-no-log { grid-template-columns: 1fr; }
.chat-conversation-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-scale-compact .chat-message-text { font-size: .85rem; }
.chat-scale-large .chat-message-text { font-size: 1.05rem; line-height: 1.6; }
.chat-theme-paper .chat-thread { background: var(--ia-sunken); }
.chat-theme-paper .chat-message-agent { background: var(--ia-sunken); border-color: var(--ia-attn-border); }
.chat-theme-slate .chat-thread { background: var(--ia-sunken); }
.chat-theme-slate .chat-message-agent { background: var(--ia-panel); border-color: var(--ia-rule); }

/* ---- Chat: only the thread scrolls ---------------------------------------- */
/* The page holds its height and every panel keeps its own scroll, so reading an answer never moves the
   composer, the agent selector or the log out of view. min-height:0 is what lets a grid child shrink
   below its content instead of pushing the page taller. */
/* The shell owns the viewport and .section-card-body owns page scrolling, so the chat fills the space it is
   given instead of measuring the window. Making the body a flex column is what lets the layout take the
   remaining height without pushing the card past its cap. */
.chat-page { display: flex; min-height: 0; }
.chat-page .section-card { flex: 1 1 auto; min-height: 0; }
.chat-page .section-card-body { display: flex; flex-direction: column; overflow: hidden; }
.chat-layout, .chat-no-conversations, .chat-no-log { flex: 1 1 auto; min-height: 320px; overflow: hidden; }
.chat-layout > * { min-height: 0; }
.chat-thread-panel { min-height: 0; overflow: hidden; }
.chat-thread { min-height: 0; overscroll-behavior: contain; }
.chat-conversations, .chat-log { overscroll-behavior: contain; }
.chat-settings { display: flex; flex-direction: column; gap: 1rem; }
.chat-settings-scope { margin: 0; font-size: .82rem; color: var(--muted, var(--ia-text-3)); }
.chat-settings section { display: flex; flex-direction: column; gap: .4rem; }
.chat-settings h4 { margin: 0; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ia-text-2); }
.chat-settings label { display: flex; align-items: center; gap: .5rem; font-size: .9rem; margin: 0; }
.chat-settings-field { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.chat-settings-field .form-select { width: 180px; }
.chat-settings-window .k-window-content { overflow: visible; }

/* Stacked cards: a search bar, a rule and the results
   ---------------------------------------------------
   The single-scroll layout above assumes one card filling the viewport. Stacking two made both flex children of a
   fixed-height column with no flex declared, so both shrank below their content and section-card-body clipped what
   did not fit - which is why a row of filters came out sliced in half. */
/* Not scoped to a direct child of .content any more: the same stack appears inside a tab strip, where the cards
   are nested and the old selector silently stopped applying. */
.section-card-compact { flex: 0 0 auto; max-height: none; }
.section-card-compact > .section-card-body { overflow: visible; }
.content:has(> .section-card) > hr { flex: 0 0 auto; width: 100%; margin: 16px 0; border: 0; border-top: 1px solid var(--ia-rule); }

/* The filter row every list screen uses. It had a class and no rule behind it, so the controls sat jammed together
   in default inline flow and overflowed rather than wrapping. */
/* filters-grid is the same row under an older name, used by screens this convention has not reached yet. */
.filters,
.filters-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
}

.filters > div, .filters-grid > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.filters label, .filters-grid label { font-size: 12px; font-weight: 600; color: var(--ia-text-2); }
.filters input:not([type=checkbox]), .filters select,
.filters-grid input:not([type=checkbox]), .filters-grid select { min-width: 180px; }

/* Paging under a grid, which had the same problem. */
.paging { display: flex; align-items: center; gap: 10px; padding-top: 12px; }
.paging span { color: var(--ia-text-2); font-size: 13px; }

/* A tab strip that owns the rest of the page, with the stacked cards inside each tab. */
.content:has(> .section-card) > .k-tabstrip,
.tabbed-admin { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.tabbed-admin .k-tabstrip-content { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.tabbed-admin .k-tabstrip-content > .section-card:last-child { flex: 1 1 auto; min-height: 0; }
.tabbed-admin hr { flex: 0 0 auto; width: 100%; margin: 16px 0; border: 0; border-top: 1px solid var(--ia-rule); }

/* Rehearsing a draft: a transcript, what it cost in turns and seconds, and what a reviewer would flag. */
.agent-builder-rehearsal { display:flex; flex-direction:column; gap:14px; padding:18px 4px; }
.rehearsal-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rehearsal-meter { margin-left:auto; color:var(--ia-text-3); font-size:.85rem; }
.rehearsal-transcript { list-style:none; margin:0; padding:14px; max-height:340px; overflow-y:auto; border:1px solid var(--ia-rule); border-radius:10px; background:var(--ia-sunken); }
.rehearsal-transcript li { display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--ia-rule-soft); }
.rehearsal-transcript li:last-child { border-bottom:none; }
.rehearsal-who { flex:0 0 64px; font-weight:750; color:var(--ia-text-3); font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; }
.rehearsal-transcript li.is-agent .rehearsal-who { color:var(--ia-accent-400); }
.rehearsal-said { white-space:pre-wrap; min-width:0; }
.rehearsal-compose { display:flex; gap:10px; align-items:flex-start; }
.rehearsal-compose textarea { flex:1; }
.rehearsal-notes { padding:14px 18px; border:1px solid var(--ia-rule); border-radius:10px; background:var(--ia-panel); }
.rehearsal-notes ul { margin:0; padding-left:18px; }
.rehearsal-notes li { padding:3px 0; }
.rehearsal-notes li.is-problem { color:var(--ia-attn); }
.rehearsal-notes li.is-fact { color:var(--ia-text-2); }

/* Choosing whether the agent talks on the telephone, before anything is written. */
.builder-runtime-choice { margin-bottom:18px; }
.builder-runtime-choice h3 { margin:0 0 4px; }
.builder-runtime-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:10px; }
.builder-runtime { display:flex; gap:11px; align-items:flex-start; padding:14px; border:1px solid var(--ia-rule); border-radius:10px; background:var(--ia-panel); cursor:pointer; }
.builder-runtime.is-chosen { border-color:var(--ia-accent); background:var(--ia-sunken); }
.builder-runtime input { margin-top:3px; }
.builder-runtime span { display:flex; flex-direction:column; gap:3px; min-width:0; }
.builder-runtime small { color:var(--ia-text-3); line-height:1.4; }
@media (max-width:900px) { .builder-runtime-options { grid-template-columns:1fr; } }


/* ---- Installed agent editor -------------------------------------------------
   It was a single column of fieldsets inside a modal inside a card, so the modal
   scrolled, the card scrolled and the form scrolled - three bars for one form.
   Header and footer are pinned and exactly one element scrolls. */
.installed-agent { display: flex; flex-direction: column; gap: 0; max-height: min(78vh, 860px); }

.installed-agent-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 0 .75rem; border-bottom: 1px solid var(--ia-rule); }
.installed-agent-title { display: flex; flex-direction: column; gap: .15rem; }
.installed-agent-title strong { font-size: 1.02rem; }
.installed-agent-title span { font-size: .82rem; color: var(--ia-text-3); }

.installed-agent-tabs { display: flex; gap: .25rem; padding: .6rem 0; border-bottom: 1px solid var(--ia-rule); flex-wrap: wrap; }
.installed-agent-tabs button { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid transparent; background: transparent; padding: .4rem .8rem; border-radius: .5rem; cursor: pointer; font-size: .9rem; color: var(--ia-text-2); }
.installed-agent-tabs button:hover { background: var(--ia-hover); }
.installed-agent-tabs button.is-active { background: var(--ia-accent-soft); border-color: var(--ia-info-border); color: var(--ia-accent-400); font-weight: 600; }

/* The agent cannot answer without a model, so the tab carries the fact rather than
   leaving it to be discovered by opening it. */
.installed-agent-flag { display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--ia-err-soft); color: var(--ia-err-strong); font-size: .7rem; font-weight: 700; }

.installed-agent-body { flex: 1 1 auto; overflow-y: auto; padding: 1rem .15rem; display: flex; flex-direction: column; gap: .9rem; }
.installed-agent-body > fieldset { margin: 0; }

.installed-agent-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; }
.installed-agent-company-models h3 { margin: 0 0 .35rem; font-size: .95rem; }
.installed-agent-company-models tr.is-unused td { color: var(--ia-text-4); }
.installed-agent-company-models input[type="checkbox"], .installed-agent-company-models input[type="radio"] { accent-color: var(--ia-accent); }
.installed-agent-manual { margin-top: 1rem; }
.installed-agent-manual > summary { cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--ia-text-2); margin-bottom: .5rem; }
.installed-agent-add { border: 1px solid var(--ia-rule); border-radius: .6rem; padding: .9rem 1rem; }
.installed-agent-add legend { font-size: .85rem; font-weight: 600; padding: 0 .35rem; }

/* Wraps into columns instead of a single tall list, which is most of what made the
   applications section its own scroll. */
.installed-agent-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .35rem .9rem; }
.installed-agent-apps label { display: flex; align-items: center; gap: .4rem; }

.installed-agent-foot { padding: .75rem 0 0; border-top: 1px solid var(--ia-rule); }
.installed-agent-foot .actions { display: flex; gap: .5rem; }

.hint.warning { border-left: 3px solid var(--ia-err); padding-left: .75rem; }

/* Pushes the destructive actions away from Save, so the two are not neighbours. */
.installed-agent-foot .actions { align-items: center; }
.installed-agent-spacer { flex: 1 1 auto; }

/* Catálogos en pestañas: cada uno ocupa el alto disponible en vez de compartirlo con el de abajo. */
.catalog-tabs { width:100%; }
.catalog-tabs .k-tabstrip-content { padding:16px 0 0; border:none; }
.catalog-tabs .k-grid { font-size:.92rem; }

/* El rastro de la centralita: qué decidió y cuándo, legible de un vistazo. */
.voice-log { display:flex; flex-direction:column; gap:12px; }
.voice-log-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.voice-log-filters { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.voice-log-filters label { display:flex; align-items:center; gap:6px; font-size:.88rem; color:var(--ia-text-2); }
.voice-log-live { user-select:none; }
.voice-log-summary { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.voice-log-entries { list-style:none; margin:0; padding:0; max-height:420px; overflow-y:auto; border:1px solid var(--ia-rule); border-radius:10px; background:var(--ia-sunken); }
.voice-log-entries li { display:flex; gap:12px; padding:9px 14px; border-bottom:1px solid var(--ia-rule-soft); border-left:3px solid transparent; }
.voice-log-entries li:last-child { border-bottom:none; }
.voice-log-entries li.is-error { border-left-color:var(--ia-err); background:var(--ia-err-soft); }
.voice-log-entries li.is-warning { border-left-color:var(--ia-attn); background:var(--ia-attn-soft); }
.voice-log-time { flex:0 0 62px; font-variant-numeric:tabular-nums; color:var(--ia-text-3); font-size:.85rem; }
.voice-log-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.voice-log-message { line-height:1.4; }
.voice-log-meta { color:var(--ia-text-3); font-size:.78rem; }
.voice-log-data pre { margin:4px 0 0; padding:8px; background:var(--ia-panel); border:1px solid var(--ia-rule); border-radius:6px; font-size:.78rem; white-space:pre-wrap; word-break:break-word; }
.status-pill.status-error { background:var(--ia-err-soft); color:var(--ia-err); }
.status-pill.status-warning { background:var(--ia-attn-soft); color:var(--ia-attn); }

/* Llamadas a las APIs: filtros arriba, rejilla debajo. Los filtros se envuelven en vez de encogerse porque en
   una pantalla estrecha es mejor leerlos en dos filas que adivinar cuál es cuál. */
.api-call-filters { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.api-call-filters label { display:flex; flex-direction:column; gap:4px; font-size:.86rem; color:var(--ia-text-2); }
.api-call-filters input, .api-call-filters select { padding:6px 8px; border:1px solid var(--ia-rule); border-radius:6px; background:var(--ia-panel); }
.api-call-toggle { flex-direction:row !important; align-items:center; gap:6px !important; user-select:none; }
.api-call-shortcuts { display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }
.api-call-summary { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.api-call-slow { color:var(--ia-attn); font-weight:600; }
.api-call-error { color:var(--ia-err); font-size:.85rem; word-break:break-word; }

/* Perfil de voz: agrupado por lo que decide, no por el orden del JSON. Cada campo lleva su explicación debajo
   porque casi todos tienen un punto en el que mejorar una cosa empeora otra, y eso no cabe en una etiqueta. */
.voice-profile { display:flex; flex-direction:column; gap:20px; }
.voice-profile-group { border:1px solid var(--ia-rule); border-radius:10px; padding:16px 18px; background:var(--ia-panel); }
.voice-profile-group > header { margin-bottom:14px; }
.voice-profile-group h4 { margin:0 0 2px; font-size:1rem; color:var(--ia-text); }
.voice-profile-group > header p { margin:0; font-size:.86rem; color:var(--ia-text-3); }
.voice-profile-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.voice-profile-fields > label { display:flex; flex-direction:column; gap:5px; }
.voice-profile-fields > label.voice-profile-wide { grid-column:1/-1; }
.voice-profile-label { font-weight:600; font-size:.9rem; color:var(--ia-text); }
.voice-profile-fields input[type=text], .voice-profile-fields input:not([type]), .voice-profile-fields input[type=number],
.voice-profile-fields select, .voice-profile-fields textarea { padding:7px 9px; border:1px solid var(--ia-rule); border-radius:6px; font:inherit; }
.voice-profile-fields small { font-size:.82rem; color:var(--ia-text-3); line-height:1.45; }
.voice-profile-fields small code { background:var(--ia-sunken); padding:1px 4px; border-radius:3px; }
.voice-profile-input { display:flex; align-items:center; gap:6px; }
.voice-profile-input input { flex:1; min-width:0; }
.voice-profile-unit { color:var(--ia-text-3); font-size:.85rem; }
.voice-profile-toggle { flex-direction:row !important; align-items:flex-start; gap:10px !important; }
.voice-profile-toggle input { margin-top:3px; }
.voice-profile-toggle > span { display:flex; flex-direction:column; gap:3px; }
.voice-profile-raw summary { cursor:pointer; font-size:.85rem; color:var(--ia-text-3); }
.voice-profile-raw pre { background:var(--ia-sunken); border:1px solid var(--ia-rule); border-radius:8px; padding:12px; overflow-x:auto; font-size:.8rem; }

/* Prueba de configuración de un proveedor: el resultado de llamarle de verdad, con su respuesta al lado. */
.provider-probe { border:1px solid var(--ia-rule); border-left-width:4px; border-radius:10px; padding:16px 18px; margin:16px 0; background:var(--ia-panel); }
.provider-probe.ok { border-left-color:var(--ia-ok); }
.provider-probe.attention { border-left-color:var(--ia-attn); }
.provider-probe > header { margin-bottom:12px; }
.provider-probe h3 { margin:0 0 2px; font-size:1rem; }
.provider-probe > header p { margin:0; color:var(--ia-text-3); font-size:.88rem; }
.provider-probe-result { border-top:1px solid var(--ia-rule-soft); padding:12px 0; }
.provider-probe-result:last-of-type { padding-bottom:0; }
.provider-probe-heading { display:flex; align-items:flex-start; gap:10px; }
.provider-probe-heading b { font-size:1.05rem; line-height:1.3; }
.provider-probe-result.passed .provider-probe-heading b { color:var(--ia-ok); }
.provider-probe-result.failed .provider-probe-heading b { color:var(--ia-err); }
.provider-probe-heading > div { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.provider-probe-heading small { color:var(--ia-text-3); font-size:.82rem; }
.provider-probe-code { background:var(--ia-err-soft); color:var(--ia-err); padding:2px 6px; border-radius:4px; font-size:.78rem; white-space:nowrap; }
.provider-probe-message { margin:6px 0 4px 26px; font-size:.9rem; word-break:break-word; }
.provider-probe details { margin-left:26px; }
.provider-probe summary { cursor:pointer; font-size:.84rem; color:var(--ia-text-3); }
.provider-probe pre { background:var(--ia-sunken); border:1px solid var(--ia-rule); border-radius:8px; padding:12px; overflow-x:auto; font-size:.8rem; max-height:320px; }
.provider-probe-configuration { margin-top:12px; margin-left:0 !important; }

/* Gestionar un agente: una cabecera con su identidad y cinco pestañas. Antes eran tres apartados del menú
   listando el mismo agente con tres nombres, y su ficha era una rejilla de etiquetas en negrita sin jerarquía. */
.agent-row-identity { display:flex; flex-direction:column; gap:2px; line-height:1.3; }
.agent-row-name { font-weight:600; color:var(--ia-text); }
.agent-row-identity code { font-size:.76rem; color:var(--ia-text-3); background:var(--ia-sunken); padding:1px 5px; border-radius:4px; align-self:flex-start; }

.agent-identity { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:0 0 12px; border-bottom:1px solid var(--ia-rule); }
.agent-identity-avatar { flex:0 0 auto; width:56px; height:56px; border-radius:50%; overflow:hidden; background:var(--ia-accent-soft); border:1px solid var(--ia-info-border); display:flex; align-items:center; justify-content:center; }
.agent-identity-avatar img { width:100%; height:100%; object-fit:cover; }
.agent-identity-initials { font-size:1.2rem; font-weight:700; color:var(--ia-accent-400); letter-spacing:.02em; }
.agent-identity-body { flex:1 1 320px; min-width:0; display:flex; flex-direction:column; gap:4px; }
.agent-identity-title { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.agent-identity-meta { margin:0; font-size:.85rem; color:var(--ia-text-3); }
.agent-identity-meta code { background:var(--ia-sunken); padding:1px 5px; border-radius:4px; }
/* Una linea: la descripcion completa esta en la pestana Ficha, y aqui solo sirve para reconocer el agente. */
.agent-identity-summary { margin:0; font-size:.9rem; color:var(--ia-text-2); max-width:70ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Los tres datos por los que se entra a esta pantalla, sin tener que abrir una pestaña para verlos. */
.agent-identity-facts { display:flex; gap:22px; margin:0; flex-wrap:wrap; }
.agent-identity-facts > div { display:flex; flex-direction:column; gap:2px; }
.agent-identity-facts dt { font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ia-text-3); }
.agent-identity-facts dd { margin:0; font-size:1.05rem; font-weight:600; color:var(--ia-text); }

/* La ficha: lo que se edita del agente, y lo que no.
   -------------------------------------------------
   El codigo y la empresa se enseñan como hechos y no como campos apagados. Un desplegable con una sola opcion
   que ademas no responde parece una pantalla rota, y no dice por que no se deja cambiar. */
.agent-card-fixed { grid-column:1 / -1; display:flex; gap:28px; flex-wrap:wrap; margin:0; padding:12px 14px; background:var(--ia-sunken); border:1px solid var(--ia-rule); border-radius:8px; }
.agent-card-fixed > div { display:flex; flex-direction:column; gap:2px; min-width:0; }
.agent-card-fixed dt { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ia-text-3); font-weight:700; }
.agent-card-fixed dd { margin:0; font-size:.92rem; font-weight:600; color:var(--ia-text); }
.agent-card-fixed dd code { background:var(--ia-accent-soft); color:var(--ia-accent-400); padding:1px 6px; border-radius:4px; font-size:.86rem; }
.agent-card-fixed .agent-card-fixed-why { font-size:.78rem; font-weight:400; color:var(--ia-text-3); max-width:46ch; }

/* Tipo y categoria se eligen a la vez y son dos listas cortas: una debajo de la otra gastaba media pantalla. */
.admin-form > div.agent-card-pair { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:18px 20px; }
.agent-card-pair > div { display:flex; flex-direction:column; gap:7px; min-width:0; }

.agent-card-source { margin:0; padding:10px 12px; background:var(--ia-sunken); border:1px solid var(--ia-info-border); border-radius:8px; font-size:.88rem; color:var(--ia-accent-400); }
.agent-card-elsewhere { margin-top:4px; }

/* Un scroll, y dentro de la pestana.
   ----------------------------------
   La pantalla llegaba a apilar tres: el cuerpo de la tarjeta, el de la tarjeta que el editor embebido pinta
   dentro, y el del propio editor de la instalacion. Tres barras una encima de otra, y ninguna de las tres
   movia lo que se estaba mirando. La cabecera del agente y la fila de pestanas se quedan quietas; lo unico que
   se desplaza es el contenido de la pestana abierta. */
.content:has(> .section-card) > .section-card:has(.agent-tabs) { flex: 1 1 auto; }
.section-card-body:has(> .agent-tabs) { display:flex; flex-direction:column; min-height:0; overflow:hidden; scrollbar-gutter:auto; }
.section-card-body:has(> .agent-tabs) > *:not(.agent-tabs) { flex:0 0 auto; }

/* Los selectores llevan .k-tabstrip a proposito: compiten con el tema de Kendo, que cualifica los suyos con
   .k-tabstrip-top, y con la misma especificidad ganaria el tema en la mitad de las reglas. */
.k-tabstrip.agent-tabs { width:100%; margin-top:4px; display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.k-tabstrip.agent-tabs > .k-tabstrip-items-wrapper { flex:0 0 auto; }
.k-tabstrip.agent-tabs > .k-tabstrip-content { flex:1 1 auto; min-height:0; padding:16px 4px 0; border:none; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }

/* Los editores embebidos traen su propia tarjeta. Dentro de una pestana es una tarjeta dentro de otra con su
   propio recorte: se aplana y deja de desplazarse por su cuenta. */
.agent-tabs .section-card { max-height:none; min-height:0; margin:0; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible; }
.agent-tabs .section-card > .section-card-body { padding:0; overflow:visible; scrollbar-gutter:auto; }

/* El editor de la instalacion trae su propio alto en vh y su propia barra, que es lo correcto cuando ocupa la
   pantalla. Dentro de la pestana lo suelta: quien se desplaza es la pestana. La regla vive aqui y no en el
   componente porque el atributo `class` de un EditForm no admite contenido mixto, y porque la pestana es la que
   se ha quedado con el desplazamiento. */
.agent-tabs .installed-agent { max-height:none; }
.agent-tabs .installed-agent-body { flex:0 0 auto; overflow:visible; padding:1rem .15rem 0; }

.agent-tabs .actions { display:flex; gap:.5rem; flex-wrap:wrap; margin:12px 0; }
.agent-tabs h3 { margin:20px 0 8px; font-size:1rem; }
.agent-tabs .filters { margin-bottom:12px; }
.agent-action-message { margin:12px 0 0; color:var(--ia-accent-400); }
.agent-version-current { margin-left:6px; font-size:.72rem; color:var(--ia-accent-400); background:var(--ia-accent-soft); border-radius:4px; padding:1px 5px; }

/* Lo que ha costado el agente, antes de la rejilla que lo detalla. */
.agent-cost-totals { display:flex; gap:14px; flex-wrap:wrap; margin:4px 0 14px; }
.agent-cost-total { display:flex; flex-direction:column; gap:2px; min-width:170px; border:1px solid var(--ia-rule); border-radius:10px; padding:12px 16px; background:var(--ia-sunken); }
.agent-cost-label { font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ia-text-3); }
.agent-cost-value { font-size:1.35rem; font-weight:700; color:var(--ia-text); font-variant-numeric:tabular-nums; }
.agent-cost-hint { font-size:.78rem; color:var(--ia-text-3); }

.agent-avatar-field { margin:4px 0 8px; }
.agent-avatar-field small { display:block; margin-top:4px; font-size:.8rem; color:var(--ia-text-3); }

/* Dos clases que la aplicación usaba desde hace tiempo sin ninguna regla detrás. */
.hint { font-size:.88rem; color:var(--ia-text-2); line-height:1.5; }
.text-muted { color:var(--ia-text-3); }

/* La ventana de una version: identidad arriba y el contenido en pestañas.
   ----------------------------------------------------------------------
   Era una columna de <pre> con todo en crudo -del prompt compilado a los cuatro esquemas-, asi que leer un
   apartado obligaba a recorrer la pantalla entera y el Markdown salia como un muro de almohadillas. */
.version-identity { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:0 0 12px; border-bottom:1px solid var(--ia-rule); }
.version-identity-number { flex:0 0 auto; min-width:56px; height:56px; padding:0 12px; border-radius:12px; background:var(--ia-chrome); color:var(--ia-text); display:flex; align-items:center; justify-content:center; font-size:1.15rem; font-weight:700; font-variant-numeric:tabular-nums; }
.version-identity-body { flex:1 1 320px; min-width:0; display:flex; flex-direction:column; gap:4px; }
.version-identity-title { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.version-identity-title h2 { margin:0; font-size:1.15rem; line-height:1.2; }
.version-identity-meta { margin:0; font-size:.85rem; color:var(--ia-text-3); }

/* El runtime, que no se enseñaba en ningun sitio y es justo lo que se perdia al copiar una version. */
.version-runtime { display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; border:1px solid var(--ia-rule); background:var(--ia-sunken); color:var(--ia-text-2); font-size:12px; font-weight:600; }
.version-runtime.is-voice { border-color:var(--ia-accent); background:var(--ia-hover); color:var(--ia-accent-400); }

.version-description { margin:12px 0 0; color:var(--ia-text-2); max-width:80ch; }
.version-tabs .k-tabstrip-content > .hint { margin:0 0 14px; }

.version-sections { display:flex; flex-direction:column; gap:14px; }
.version-section { border:1px solid var(--ia-rule); border-radius:10px; padding:14px 16px; background:var(--ia-panel); }
.version-section > h3 { margin:0 0 8px; font-size:.95rem; color:var(--ia-text); display:flex; align-items:center; gap:8px; }
.version-section.is-empty { background:var(--ia-sunken); }
.version-section.is-empty > h3 { margin:0; color:var(--ia-text-3); }
.version-section-note { font-size:.75rem; font-weight:500; color:var(--ia-text-3); }
.version-section pre { margin:0; padding:12px; border-radius:8px; background:var(--ia-sunken); border:1px solid var(--ia-rule-soft); overflow-x:auto; font-size:.8rem; line-height:1.55; }

.version-sections-missing { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:16px 0 0; font-size:.82rem; color:var(--ia-text-3); }
.version-section-chip { padding:2px 8px; border:1px dashed var(--ia-rule); border-radius:999px; }

/* El perfil de voz enseñado por lo que decide, no por el JSON que lo guarda. */
.version-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin:0; }
.version-facts > div { display:flex; flex-direction:column; gap:2px; border:1px solid var(--ia-rule); border-radius:10px; padding:11px 14px; background:var(--ia-panel); }
.version-facts dt { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ia-text-3); }
.version-facts dd { margin:0; color:var(--ia-text); font-weight:600; overflow-wrap:anywhere; }
.version-raw { margin-top:14px; }
.version-raw summary { cursor:pointer; font-size:.84rem; color:var(--ia-text-3); }
.version-raw pre { margin:8px 0 0; padding:12px; border-radius:8px; background:var(--ia-sunken); border:1px solid var(--ia-rule-soft); overflow-x:auto; font-size:.8rem; }

/* Markdown ya renderizado: instrucciones y perfil se escriben en Markdown y hasta ahora se leian en crudo. */
.markdown-body { color:var(--ia-text); line-height:1.65; overflow-wrap:anywhere; }
.markdown-body > :first-child { margin-top:0; }
.markdown-body > :last-child { margin-bottom:0; }
.markdown-body h1 { font-size:1.2rem; margin:22px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--ia-rule); color:var(--ia-text); }
.markdown-body h2 { font-size:1.02rem; margin:20px 0 8px; color:var(--ia-text); }
.markdown-body h3 { font-size:.93rem; margin:16px 0 6px; color:var(--ia-text-2); }
.markdown-body p { margin:0 0 10px; max-width:82ch; }
.markdown-body ul, .markdown-body ol { margin:0 0 10px; padding-left:22px; }
.markdown-body li { margin:3px 0; }
.markdown-body li > p { margin:0; }
.markdown-body blockquote { margin:0 0 10px; padding:2px 0 2px 14px; border-left:3px solid var(--ia-rule); color:var(--ia-text-2); }
.markdown-body code { font-family: var(--ia-font-mono); font-size:.85em; background:var(--ia-sunken); border-radius:4px; padding:1px 5px; }
.markdown-body pre { margin:0 0 12px; padding:12px; border-radius:8px; background:var(--ia-sunken); border:1px solid var(--ia-rule-soft); overflow-x:auto; }
.markdown-body pre code { background:none; padding:0; font-size:.8rem; line-height:1.55; }
.markdown-body table { width:auto; min-width:50%; border-collapse:collapse; margin:0 0 12px; font-size:.9rem; }
.markdown-body th, .markdown-body td { border:1px solid var(--ia-rule); padding:7px 10px; text-align:left; vertical-align:top; }
.markdown-body th { background:var(--ia-sunken); font-weight:600; }
.markdown-body hr { margin:18px 0; border:0; border-top:1px solid var(--ia-rule); }
.markdown-body a { color:var(--ia-accent-400); }

/* Importar un agente: primero el informe, despues el boton.
   -------------------------------------------------------
   Un agente trae dentro herramientas, perfiles de modelo, conocimiento y despliegues que en la plataforma de
   destino pueden no existir. Descubrirlo a base de errores tras haberlo creado a medias no es una forma de
   trabajar, asi que lo que no cuadra se enseña antes y se agrupa por si impide importar o solo queda pendiente. */
.agent-import { display:flex; flex-direction:column; gap:16px; }
.agent-import-pick { display:flex; flex-direction:column; gap:6px; }
.agent-import-pick label { font-weight:600; color:var(--ia-text); font-size:13px; }
.agent-import-pick small { color:var(--ia-text-3); font-size:12px; }
.agent-import-file { margin:0; font-size:.85rem; color:var(--ia-text-2); }
.agent-import-file strong { color:var(--ia-text); }

.agent-import-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; border:1px solid var(--ia-rule); border-left-width:4px; border-radius:10px; padding:14px 16px; background:var(--ia-sunken); }
.agent-import-summary.is-ready { border-left-color:var(--ia-ok); }
.agent-import-summary.is-blocked { border-left-color:var(--ia-err); }
.agent-import-summary > div { display:flex; flex-direction:column; gap:2px; min-width:0; }
.agent-import-summary strong { color:var(--ia-text); overflow-wrap:anywhere; }
.agent-import-summary code { font-size:.78rem; color:var(--ia-text-3); background:var(--ia-sunken); border-radius:4px; padding:1px 5px; align-self:flex-start; }
.agent-import-summary small { color:var(--ia-text-3); font-size:.78rem; }
.agent-import-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ia-text-3); }

.agent-import-findings { display:flex; flex-direction:column; gap:8px; border:1px solid var(--ia-rule); border-radius:10px; padding:14px 16px; }
.agent-import-findings h3 { margin:0; font-size:.9rem; color:var(--ia-text); }
.agent-import-findings.is-blocking { border-color:var(--ia-err-border); background:var(--ia-sunken); }
.agent-import-findings.is-warning { border-color:var(--ia-attn-border); background:var(--ia-attn-soft); }
.agent-import-findings.is-info { border-color:var(--ia-rule); background:var(--ia-sunken); }
.agent-import-findings .hint { margin:0; }

.agent-import-finding { display:flex; gap:12px; align-items:flex-start; padding-top:8px; border-top:1px solid var(--ia-rule); }
.agent-import-finding:first-of-type { border-top:0; padding-top:0; }
.agent-import-finding > code { flex:0 0 auto; max-width:210px; overflow-wrap:anywhere; font-size:.76rem; background:var(--ia-panel); border:1px solid var(--ia-rule); border-radius:4px; padding:2px 6px; color:var(--ia-text-2); }
.agent-import-finding > div { min-width:0; display:flex; flex-direction:column; gap:2px; }
.agent-import-finding p { margin:0; font-size:.88rem; color:var(--ia-text-2); }
.agent-import-finding small { color:var(--ia-text-3); font-size:.8rem; }

/* Lo que el documento no contesta y quien importa si: el codigo cuando choca, y el tipo y la categoria cuando el
   documento describe un agente en vez de exportarlo. Mandar a otra pantalla y volver a empezar no era respuesta. */
.agent-import-fix { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; border:1px solid var(--ia-rule); border-radius:10px; padding:12px 14px; background:var(--ia-panel); }
.agent-import-fix h3 { flex:1 0 100%; margin:0; font-size:.9rem; color:var(--ia-text); }
.agent-import-fix > div { display:flex; flex-direction:column; gap:4px; min-width:0; }
.agent-import-fix label { font-size:12px; font-weight:600; color:var(--ia-text-2); }
.agent-import-fix input, .agent-import-fix select { min-width:240px; padding:7px 9px; border:1px solid var(--ia-rule); border-radius:7px; font:inherit; }

/* Que versiones del documento se traen. Un agente con doce versiones de historia no tiene por que llevarselas
   todas a otra empresa, donde ni los numeros de alli ni los borradores de nadie significan nada. */
.agent-import-mode { display:flex; flex-direction:column; gap:6px; border:1px solid var(--ia-rule); border-radius:10px; padding:12px 14px; background:var(--ia-panel); }
.agent-import-mode h3 { margin:0 0 2px; font-size:.9rem; color:var(--ia-text); }
.agent-import-mode label { display:flex; align-items:flex-start; gap:10px; padding:6px 8px; border-radius:7px; cursor:pointer; }
.agent-import-mode label:hover { background:var(--ia-sunken); }
.agent-import-mode label > span { display:flex; flex-direction:column; gap:2px; }
.agent-import-mode small { color:var(--ia-text-3); font-size:.78rem; }
.agent-import-versions { display:flex; flex-direction:column; gap:6px; border:1px solid var(--ia-rule); border-radius:10px; padding:12px 14px; background:var(--ia-panel); }
.agent-import-versions h3 { margin:0; font-size:.9rem; color:var(--ia-text); }
.agent-import-versions .hint { margin:0 0 4px; font-size:.8rem; color:var(--ia-text-3); }
.agent-import-versions label { display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:7px; cursor:pointer; }
.agent-import-versions label:hover { background:var(--ia-sunken); }
.agent-import-versions label.is-chosen { background:var(--ia-sunken); }
.agent-import-version-number { font-weight:700; color:var(--ia-accent-400); min-width:38px; }
.agent-import-version-name { flex:1 1 auto; min-width:0; color:var(--ia-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.agent-import-versions small { color:var(--ia-text-3); font-size:.78rem; white-space:nowrap; }

/* Elegir que se exporta, en la ficha del agente. */
.agent-export-choice { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.agent-export-choice p { margin:0; }
.agent-export-choice select { min-width:280px; padding:6px 9px; border:1px solid var(--ia-rule); border-radius:7px; font:inherit; }

/* El recuento de lo que se lleva por delante un borrado. Va delante de la confirmacion porque una confirmacion
   escrita a ciegas -«¿seguro?»- no dice cuanto habia detras, y esto no se deshace. */
.agent-delete-confirm p { margin:0 0 6px; }
.agent-delete-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* De cual parte el Builder. Va antes de describir porque cambia lo que el modelo tiene delante al escribir. */
.builder-template-choice { display:flex; flex-direction:column; gap:6px; margin-bottom:18px; padding:12px 14px; border:1px solid var(--ia-rule); border-radius:var(--ia-radius-md); background:var(--ia-sunken); }
.builder-template-choice h3 { margin:0; font-size:.95rem; color:var(--ia-text); }
.builder-template-choice select { max-width:520px; }

/* Valorar una ejecucion donde se ve la ejecucion. Elegir el resultado es un clic y no pide escribir nada: si
   hubiera que escribir para guardar, no se guardaria, y sin notas el bucle de mejora no tiene de que aprender. */
.execution-feedback { display:flex; flex-direction:column; gap:10px; }
.execution-feedback h3 { margin:0; font-size:1rem; color:var(--ia-text); }
.execution-feedback-choices { display:flex; gap:8px; flex-wrap:wrap; }
.execution-feedback-choices button { display:flex; flex-direction:column; gap:2px; align-items:flex-start; min-width:180px; padding:9px 12px; border:1px solid var(--ia-rule); border-radius:var(--ia-radius-md); background:var(--ia-panel); cursor:pointer; text-align:left; font:inherit; }
.execution-feedback-choices button:hover { border-color:var(--ia-rule-strong); background:var(--ia-hover); }
.execution-feedback-choices button.is-chosen { border-color:var(--ia-accent); background:var(--ia-accent-soft); }
.execution-feedback-choices strong { color:var(--ia-text); font-size:.92rem; }
.execution-feedback-choices small { color:var(--ia-text-3); font-size:.78rem; }
.execution-feedback-field { display:flex; flex-direction:column; gap:4px; max-width:720px; }
.execution-feedback-field label { font-size:12px; font-weight:600; color:var(--ia-text-2); }
.execution-feedback-field input, .execution-feedback-field textarea { padding:7px 9px; border:1px solid var(--ia-rule); border-radius:var(--ia-radius-sm); background:var(--ia-panel); color:var(--ia-text); font:inherit; }
.execution-feedback-done { margin:0; padding:9px 12px; background:var(--ia-ok-soft); border:1px solid var(--ia-ok-border); border-radius:var(--ia-radius-md); color:var(--ia-ok-strong); font-size:.9rem; }
.execution-feedback-again { margin-left:8px; border:none; background:none; color:var(--ia-accent); cursor:pointer; font:inherit; text-decoration:underline; }
.execution-feedback-history { margin:4px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.execution-feedback-history li { padding:8px 10px; border-left:3px solid var(--ia-rule); background:var(--ia-sunken); border-radius:0 var(--ia-radius-sm) var(--ia-radius-sm) 0; font-size:.86rem; color:var(--ia-text-2); }
.execution-feedback-history p { margin:4px 0 0; }
.execution-feedback-outcome { font-weight:700; color:var(--ia-text); margin-right:8px; }
.execution-feedback-correction { color:var(--ia-text); }

.agent-import-foot { display:flex; gap:.5rem; justify-content:flex-end; padding-top:12px; border-top:1px solid var(--ia-rule); }

/* Elegir lo que un agente puede hacer.
   -----------------------------------
   Antes eran las ciento y pico herramientas con una casilla por fila. Con esa lista delante nadie lee: se marca
   lo que suena y el agente acaba con quince funciones «por si acaso». Arriba va lo que lleva -que es la pregunta
   que se hace de verdad- y añadir es un acto aparte, con su directorio. */
.tool-picker { display:flex; flex-direction:column; gap:14px; }
.tool-picker-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.tool-picker-head h3 { margin:0 0 3px; font-size:1rem; }
.tool-picker-head .hint { margin:0; max-width:62ch; }
.tool-picker-count { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; min-width:88px; padding:8px 14px; border:1px solid var(--ia-rule); border-radius:10px; background:var(--ia-sunken); }
.tool-picker-count strong { font-size:1.5rem; line-height:1; font-variant-numeric:tabular-nums; color:var(--ia-text); }
.tool-picker-count span { font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ia-text-3); }
.tool-picker-count.is-crowded { border-color:var(--ia-attn-border); background:var(--ia-attn-soft); }
.tool-picker-count.is-crowded strong { color:var(--ia-attn); }
.tool-picker-assigned { border:1px solid var(--ia-rule); border-radius:10px; overflow:hidden; }

.tool-table { width:100%; border-collapse:collapse; font-size:.9rem; background:var(--ia-panel); }
.tool-table th { text-align:left; padding:9px 12px; background:var(--ia-sunken); border-bottom:1px solid var(--ia-rule); font-weight:600; color:var(--ia-text-2); font-size:.8rem; white-space:nowrap; }
.tool-table td { padding:9px 12px; border-bottom:1px solid var(--ia-rule-soft); vertical-align:top; }
.tool-table tr:last-child td { border-bottom:0; }
.tool-table tr.is-inactive { background:var(--ia-sunken); color:var(--ia-text-3); }
.tool-name { font-weight:600; color:var(--ia-text); }
.tool-table code { font-size:.76rem; color:var(--ia-text-3); background:var(--ia-sunken); border-radius:4px; padding:1px 5px; }
.tool-description { margin:5px 0 0; font-size:.83rem; color:var(--ia-text-3); max-width:70ch; }

/* El directorio: se busca, se lee y se añade. */
.tool-directory { display:flex; flex-direction:column; gap:14px; }
.tool-directory-filters { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.tool-directory-filters input[type=search] { flex:1 1 260px; min-width:200px; padding:7px 10px; border:1px solid var(--ia-rule); border-radius:7px; font:inherit; }
.tool-directory-filters select { padding:7px 10px; border:1px solid var(--ia-rule); border-radius:7px; font:inherit; }
.tool-directory-switch { display:inline-flex; align-items:center; gap:7px; font-size:.86rem; color:var(--ia-text-2); white-space:nowrap; }

/* Los juegos: el atajo que hace esto más rápido que las casillas, no solo más cómodo. */
.tool-set-strip { display:flex; gap:6px; flex-wrap:wrap; padding-bottom:2px; }
.tool-set-strip button { border:1px solid var(--ia-rule); background:var(--ia-panel); border-radius:999px; padding:5px 13px; font:inherit; font-size:.84rem; color:var(--ia-text-2); cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.tool-set-strip button:hover { background:var(--ia-sunken); }
.tool-set-strip button.is-active { background:var(--ia-accent-soft); border-color:var(--ia-info-border); color:var(--ia-accent-400); font-weight:600; }
.tool-set-count { font-size:.74rem; color:var(--ia-text-3); font-variant-numeric:tabular-nums; }
.tool-set-strip button.is-active .tool-set-count { color:var(--ia-accent-400); }

.tool-set-banner { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; border:1px solid var(--ia-info-border); border-radius:10px; padding:12px 16px; background:var(--ia-sunken); }
.tool-set-banner strong { color:var(--ia-text); }
.tool-set-banner p { margin:2px 0 0; font-size:.87rem; color:var(--ia-text-2); max-width:70ch; }

.tool-directory-table { border:1px solid var(--ia-rule); border-radius:10px; overflow:auto; max-height:46vh; }
.tool-directory-table thead th { position:sticky; top:0; z-index:1; }
.tool-added { font-size:.8rem; color:var(--ia-ok); background:var(--ia-hover); border-radius:4px; padding:3px 9px; }
.tool-blocked { font-size:.8rem; color:var(--ia-text-3); border:1px dashed var(--ia-rule); border-radius:4px; padding:3px 9px; }

.tool-directory-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; border-top:1px solid var(--ia-rule); }

/* Crear una herramienta sin salir del directorio: se crea para usarla ahora, no para dejarla puesta. */
.tool-create { display:flex; flex-direction:column; gap:12px; }
.tool-create h3 { margin:0; font-size:1rem; }

/* ══════════════════════════════════════════════════════════════════════════
   Capa de compatibilidad con el patrón
   --------------------------------------------------------------------------
   Las pantallas que todavía no se han reescrito usan las clases estructurales
   heredadas (.filters, .paging, .actions, .empty-state…). Aquí se les da la
   anatomía del sistema nuevo: la barra de filtros es una tarjeta, la paginación
   se separa con una línea superior, el estado vacío se centra.

   Es una capa puente y tiene fecha de caducidad: cuando una pantalla pasa al
   marcado .ia-*, deja de depender de este bloque. Cuando ya no queden pantallas
   con estas clases, este bloque se borra entero.
   ══════════════════════════════════════════════════════════════════════════ */

/* Barra de filtros: mismo cuerpo que .ia-filterbar. */
.filters,
.filters-grid {
    align-items: flex-end;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--ia-rule);
    border-radius: var(--ia-radius-md);
    background: var(--ia-panel);
}
.filters label,
.filters-grid label {
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ia-text-faint);
}
/* Los botones sueltos de la barra son acciones secundarias, no controles del sistema. */
.filters > button,
.filters-grid > button {
    display: inline-flex;
    align-items: 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-size: 13px;
    cursor: pointer;
}
.filters > button:hover,
.filters-grid > button:hover { border-color: var(--ia-accent); color: var(--ia-accent-400); }

/* Campos nativos dentro de la barra y de los formularios heredados. */
.filters input:not([type=checkbox]),
.filters select,
.filters-grid input:not([type=checkbox]),
.filters-grid select {
    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-size: 13.5px;
}
.filters input:focus,
.filters select:focus,
.filters-grid input:focus,
.filters-grid select:focus { border-color: var(--ia-accent); outline: none; }

/* Paginación: se separa con una línea, y el rango va en mono porque es un dato. */
.paging {
    justify-content: flex-start;
    gap: 14px;
    margin-top: 14px;
    padding: 12px 0 0;
    border-top: 1px solid var(--ia-rule);
}
.paging span {
    font-family: var(--ia-font-mono);
    font-size: 11.5px;
    color: var(--ia-text-faint);
}
.paging button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--ia-rule-strong);
    border-radius: var(--ia-radius-sm);
    background: transparent;
    color: var(--ia-text-2);
    font-size: 12.5px;
    cursor: pointer;
}
.paging button:hover:not(:disabled) { border-color: var(--ia-accent); color: var(--ia-accent-400); }
.paging button:disabled { opacity: .45; cursor: not-allowed; }

/* Fila de acciones de un formulario o de una fila de tabla. */
.actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* La separación es una línea de 1px, no una sombra: la sombra queda para lo que flota. */
.section-card,
.stat-card,
.empty-state,
.error-state,
.loading-state { box-shadow: none; }

/* Estados de pantalla heredados, con la forma de .ia-state. */
.empty-state,
.error-state,
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 44px 20px;
    text-align: center;
}
.empty-state h3,
.error-state strong { font-size: 14px; font-weight: 500; color: var(--ia-text); }
.empty-state p,
.error-state p,
.loading-state { font-size: 12.5px; color: var(--ia-text-3); max-width: 44ch; }
.empty-state { border-style: dashed; border-color: var(--ia-rule-strong); }

/* Los <hr /> que separaban tarjetas: el sistema separa con espacio, no con reglas. */
.content > hr,
.ia-main-inner > hr { display: none; }

/* La ventana ya decide cuánto mide; dentro de ella el formulario no vuelve a
   estrecharse a 1120 px, porque eso dejaba dos márgenes vacíos a los lados. */
.k-window .admin-form,
.k-window .company-form,
.k-window .crud-modal-content > * {
    max-width: none;
    margin-inline: 0;
}

/* ---- Agent builder as a page ------------------------------------------------
   The same flow that renders inside a window, laid out for a page: it keeps its
   own scroll so the stepper and the actions stay put, and the actions sit under
   the flow instead of in a window footer. */
.agent-builder-page { display: flex; flex-direction: column; gap: 0; }
.agent-builder-page .agent-builder-modal { max-height: min(72vh, 900px); overflow-y: auto; padding-right: .25rem; }
.agent-builder-page-foot { border-top: 1px solid var(--ia-rule); padding-top: .85rem; margin-top: .85rem; }
.agent-builder-page-foot .builder-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.agent-builder-page-foot .builder-footer-hint { flex: 1 1 auto; color: var(--ia-text-3); font-size: .85rem; }

/* ══════════════════════════════════════════════════════════════════════════
   Chat — armazón de tres zonas
   --------------------------------------------------------------------------
   Conversaciones · hilo · actividad. Cada zona se desplaza por su cuenta y el
   documento no se mueve: es la regla de una barra de scroll por zona llevada a
   una pantalla que tiene tres.
   ══════════════════════════════════════════════════════════════════════════ */

/* El chat es la única pantalla que va a sangre: el contenedor de contenido le
   quita sus márgenes y su ancho máximo, porque un espacio de trabajo de tres
   columnas centrado a 1320 px deja dos franjas muertas a los lados. */
.ia-main:has(.chat-page) { padding: 0; overflow: hidden; }
.ia-main:has(.chat-page) > .ia-main-inner { max-width: none; height: 100%; gap: 0; }

.chat-page {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 300px;
    background: var(--ia-bg);
}
.chat-page.chat-no-conversations { grid-template-columns: minmax(0, 1fr) 300px; }
.chat-page.chat-no-log { grid-template-columns: 280px minmax(0, 1fr); }
.chat-page.chat-no-conversations.chat-no-log { grid-template-columns: minmax(0, 1fr); }

/* ── Conversaciones ─────────────────────────────────────────────────────── */
.chat-conversations {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 12px;
    padding: 16px 14px 0;
    border-right: 1px solid var(--ia-rule);
    background: var(--ia-chrome);
}
.chat-conv-head { display: flex; align-items: center; gap: 9px; }
.chat-panel-title {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ia-text-4);
    margin: 0;
    padding: 0;
    border: 0;
}
.chat-conv-count { font-size: 11.5px; color: var(--ia-text-faint); }

.chat-search {
    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);
}
.chat-search > i { font-size: 14px; color: var(--ia-text-4); }
.chat-search input {
    flex: 1;
    min-width: 0;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: var(--ia-text);
    font: inherit;
    font-size: 13px;
    outline: none;
}
.chat-search:focus-within { border-color: var(--ia-accent); }

.chat-conv-tabs { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--ia-rule); }
.chat-conv-tabs button {
    padding: 7px 11px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--ia-text-3);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}
.chat-conv-tabs button:hover { color: var(--ia-text); }
.chat-conv-tabs button.is-active { color: var(--ia-accent-400); border-bottom-color: var(--ia-accent); }

.chat-conv-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 16px; display: flex; flex-direction: column; gap: 14px; }
.chat-conv-group { display: flex; flex-direction: column; gap: 2px; }
/* El corte por día es la única jerarquía que hace falta: una lista plana con la
   hora al lado no dice cuál es de hoy. */
.chat-conv-group-title {
    padding: 6px 8px 4px;
    font-size: 10.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ia-text-faint);
}

.chat-conversation-row { position: relative; border-radius: var(--ia-radius-md); }
.chat-conversation-row:hover { background: var(--ia-hover); }
.chat-conversation-row.is-current { background: var(--ia-accent-soft); box-shadow: inset 2px 0 0 var(--ia-accent); }
.chat-conversation-row .chat-conversation {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    background: transparent;
    color: var(--ia-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.chat-conversation-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.chat-conversation-head i { font-size: 14px; color: var(--ia-text-4); }
.chat-conversation-agent {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--ia-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-conversation-time { font-size: 11px; color: var(--ia-text-faint); flex-shrink: 0; }
.chat-conversation-title {
    font-size: 12.5px;
    color: var(--ia-text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-conversation-meta { font-size: 11px; color: var(--ia-text-faint); }
.chat-conversation-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: none;
    gap: 2px;
}
.chat-conversation-row:hover .chat-conversation-actions { display: flex; }
.chat-conversation-actions button {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: var(--ia-radius-sm);
    background: var(--ia-panel);
    color: var(--ia-text-3);
    cursor: pointer;
}
.chat-conversation-actions button:hover { color: var(--ia-accent-400); }
.chat-conversation-actions .chat-danger:hover { color: var(--ia-err); }

/* ── Hilo ───────────────────────────────────────────────────────────────── */
.chat-thread-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--ia-bg);
}

.chat-agent {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--ia-rule);
    background: var(--ia-chrome);
}
.chat-agent-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: 1px solid var(--ia-info-border);
    border-radius: var(--ia-radius-md);
    background: var(--ia-accent-soft);
    color: var(--ia-accent-400);
    font-size: 18px;
}
.chat-agent-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-agent-name { display: flex; align-items: center; gap: 9px; }
.chat-agent-name strong { font-size: 15px; font-weight: 500; }
.chat-agent-sub { font-size: 12.5px; color: var(--ia-text-3); }
.chat-agent-scope { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.chat-agent-scope .ia-inputgroup { padding: 0 10px; }
.chat-agent-scope select { padding: 6px 0; font-size: 12.5px; max-width: 190px; }
.chat-agent-scope .ia-iconbtn.is-active { border-color: var(--ia-accent); color: var(--ia-accent-400); }

.chat-banner { flex: 0 0 auto; margin: 14px 20px 0; }

.chat-thread {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.chat-turn { display: flex; gap: 12px; align-items: flex-start; }
.chat-turn.is-user { justify-content: flex-end; }
.chat-turn-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    margin-top: 2px;
    border: 1px solid var(--ia-rule);
    border-radius: var(--ia-radius-md);
    background: var(--ia-sunken);
    color: var(--ia-text-3);
    font-size: 15px;
}
.chat-turn-body { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.chat-turn.is-user .chat-turn-body { align-items: flex-end; max-width: 72%; }
.chat-turn.is-agent .chat-turn-body { flex: 1; }

/* La pregunta va en burbuja tintada; la respuesta no lleva burbuja, porque suele
   ser larga y una caja de color alrededor de doce líneas cansa de leer. */
.chat-bubble {
    padding: 10px 14px;
    border: 1px solid var(--ia-info-border);
    border-radius: var(--ia-radius-md);
    background: var(--ia-accent-soft);
    color: var(--ia-text);
    font-size: 13.5px;
    white-space: pre-wrap;
}
.chat-answer { font-size: 13.5px; line-height: 1.65; color: var(--ia-text); }

.chat-turn-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11.5px;
    color: var(--ia-text-faint);
}
.chat-turn-meta .ia-mono { font-size: 11.5px; }
.chat-turn-measure {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ia-accent-400);
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
}
.chat-turn-measure:hover { color: var(--ia-accent-300); }
/* Las acciones del turno aparecen al acercarse: doce iconos permanentes en una
   conversación larga compiten con el texto que hay que leer. */
.chat-turn-meta .ia-iconbtn { opacity: 0; }
.chat-turn:hover .chat-turn-meta .ia-iconbtn,
.chat-turn-meta .ia-iconbtn:focus-visible { opacity: 1; }

/* ── Lo que hizo el agente antes de contestar ───────────────────────────── */
.chat-tool {
    border: 1px solid var(--ia-rule);
    border-radius: var(--ia-radius-md);
    background: var(--ia-panel);
    overflow: hidden;
}
.chat-tool > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
    list-style: none;
    font-size: 12.5px;
    color: var(--ia-text-2);
}
.chat-tool > summary::-webkit-details-marker { display: none; }
.chat-tool > summary:hover { background: var(--ia-hover); }
.chat-tool > summary > i:first-child { font-size: 15px; color: var(--ia-text-4); }
.chat-tool-code { color: var(--ia-text); font-size: 12.5px; }
.chat-tool-meta { color: var(--ia-text-faint); font-size: 11.5px; }
.chat-tool-caret { margin-left: auto; font-size: 12px; color: var(--ia-text-4); transition: transform .12s ease; }
.chat-tool[open] .chat-tool-caret { transform: rotate(180deg); }
.chat-tool > *:not(summary) { border-top: 1px solid var(--ia-rule); }

/* Ficha de campos: lo que devolvió una herramienta cuando es un solo objeto. */
.chat-tool-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--ia-rule-soft);
}
.chat-tool-field { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; background: var(--ia-panel); }
.chat-tool-field-label {
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ia-text-4);
}
.chat-tool-field-value { font-size: 12.5px; color: var(--ia-text); overflow-wrap: anywhere; }

.chat-tool-card { background: var(--ia-panel); }
.chat-tool-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--ia-rule);
    font-size: 13px;
}
/* La tabla del resultado se desplaza dentro de su caja: una herramienta con doce
   columnas no puede empujar el hilo entero a lo ancho. */
.chat-tool-tablewrap { overflow-x: auto; }
.chat-tool-table { font-size: 12.5px; }
.chat-tool-table th { padding: 9px 14px; }
.chat-tool-table td { padding: 9px 14px; color: var(--ia-text-2); white-space: nowrap; }
.chat-tool-raw {
    margin: 0;
    padding: 12px 14px;
    max-height: 260px;
    overflow: auto;
    font-size: 12px;
    color: var(--ia-text-2);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ── Contexto y compositor ──────────────────────────────────────────────── */
.chat-context {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 20px 0;
}
.chat-context-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px 5px 11px;
    border: 1px solid var(--ia-rule-strong);
    border-radius: var(--ia-radius-md);
    background: var(--ia-panel);
    color: var(--ia-text-2);
    font-size: 12.5px;
}
.chat-context-chip > i:first-child { font-size: 14px; color: var(--ia-text-4); }
.chat-context-chip.is-fixed { border-style: dashed; }
.chat-context-chip button {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: var(--ia-radius-sm);
    background: transparent;
    color: var(--ia-text-4);
    cursor: pointer;
}
.chat-context-chip button:hover:not(:disabled) { background: var(--ia-hover); color: var(--ia-err); }
.chat-context-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px dashed var(--ia-rule-strong);
    border-radius: var(--ia-radius-md);
    background: transparent;
    color: var(--ia-text-3);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}
.chat-context-add:hover:not(:disabled) { border-color: var(--ia-accent); color: var(--ia-accent-400); }
.chat-context-model { margin-left: auto; padding-right: 6px; cursor: pointer; }
.chat-context-model select { border: 0; background: transparent; color: inherit; font: inherit; padding: 0 2px; cursor: pointer; }
.chat-context-model select:focus { outline: none; }
.chat-context-model:focus-within { border-color: var(--ia-accent); }

.chat-composer {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin: 12px 20px 0;
    padding: 10px 12px;
    border: 1px solid var(--ia-rule-strong);
    border-radius: var(--ia-radius-md);
    background: var(--ia-sunken);
}
.chat-composer:focus-within { border-color: var(--ia-accent); }
.chat-composer .chat-input {
    flex: 1;
    min-width: 0;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: var(--ia-text);
    font: inherit;
    font-size: 13.5px;
    box-shadow: none;
}
.chat-composer .chat-input:focus { border: 0; box-shadow: none; outline: none; }
.chat-composer .chat-attach { flex-shrink: 0; }
.chat-composer .chat-dictate { flex-shrink: 0; }
.chat-dictate.is-unavailable { opacity: .45; cursor: help; }
/* Mientras graba, siempre a la vista: que se le está escuchando, desde cuándo, y cómo pararlo. */
.iaureo-dictation-status { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 4px 6px 4px 10px; border: 1px solid var(--ia-rule-strong); border-radius: var(--ia-radius-md); background: var(--ia-panel); color: var(--ia-text-2); font-size: 12.5px; white-space: nowrap; }
.iaureo-dictation-status.is-recording { border-color: var(--ia-err-border); color: var(--ia-err); }
.iaureo-dictation-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ia-err); animation: iaureo-dictation-blink 1s ease-in-out infinite; }
@keyframes iaureo-dictation-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .iaureo-dictation-dot { animation: none; } }
.iaureo-dictation-stop { border: 1px solid var(--ia-err-border); border-radius: var(--ia-radius-sm); background: transparent; color: var(--ia-err); font: inherit; font-weight: 600; padding: 2px 8px; cursor: pointer; }
.iaureo-dictation-stop:hover { background: var(--ia-err-soft); }
/* Grabando: el mismo rojo que un botón de grabar en cualquier aparato, y un pulso para que se note que escucha. */
.chat-dictate.is-recording { color: var(--ia-err); border-color: var(--ia-err); animation: chat-dictate-pulse 1.4s ease-in-out infinite; }
@keyframes chat-dictate-pulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 .25rem var(--ia-err-border); } }
@media (prefers-reduced-motion: reduce) { .chat-dictate.is-recording { animation: none; } }

.chat-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 20px 16px;
    font-size: 11.5px;
    color: var(--ia-text-faint);
}
.chat-foot-scope { font-family: var(--ia-font); }

.chat-editing {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 20px 0;
    padding: 10px 14px;
    border: 1px solid var(--ia-attn-border);
    border-radius: var(--ia-radius-md);
    background: var(--ia-attn-soft);
    color: var(--ia-text-2);
    font-size: 12.5px;
}
.chat-editing > i { color: var(--ia-attn); font-size: 15px; }

/* ── Actividad ──────────────────────────────────────────────────────────── */
.chat-activity {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-left: 1px solid var(--ia-rule);
    background: var(--ia-chrome);
}
.chat-activity-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--ia-rule);
}
.chat-activity-stats {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--ia-rule);
    border-bottom: 1px solid var(--ia-rule);
}
.chat-activity-stats .ia-stat { border: 0; border-radius: 0; padding: 14px 16px; background: var(--ia-chrome); }
.chat-activity-stats .ia-stat-value { font-size: 20px; }
.chat-activity-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 16px; }

/* Línea de tiempo de la ejecución: lo que el agente hizo, en orden inverso,
   porque lo último es lo que se está mirando. */
.chat-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.chat-timeline-item { display: flex; gap: 11px; }
.chat-timeline-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--ia-text-4);
}
.chat-timeline-item.chat-level-information .chat-timeline-dot { background: var(--ia-accent-400); }
.chat-timeline-item.chat-level-warning .chat-timeline-dot { background: var(--ia-attn); }
.chat-timeline-item.chat-level-error .chat-timeline-dot { background: var(--ia-err); }
.chat-timeline-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.chat-timeline-head { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; color: var(--ia-text); }
.chat-timeline-time { margin-left: auto; font-size: 11px; color: var(--ia-text-faint); flex-shrink: 0; }
.chat-timeline-text { font-size: 11.5px; color: var(--ia-text-3); overflow-wrap: anywhere; }

.chat-activity .chat-log-entries { margin: 0; padding: 0; }
.chat-activity-foot { flex: 0 0 auto; margin: 0 14px 14px; justify-content: center; }

@media (max-width: 1400px) {
    .chat-page { grid-template-columns: 250px minmax(0, 1fr) 270px; }
}
@media (max-width: 1180px) {
    /* Con poco ancho, la actividad estorba más de lo que informa. */
    .chat-page,
    .chat-page.chat-no-log { grid-template-columns: 240px minmax(0, 1fr); }
    .chat-activity { display: none; }
}
@media (max-width: 820px) {
    .chat-page,
    .chat-page.chat-no-log,
    .chat-page.chat-no-conversations { grid-template-columns: minmax(0, 1fr); }
    .chat-conversations { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   AI Builder — asistente de siete pasos
   --------------------------------------------------------------------------
   Segunda excepción documentada al "editar en modal", junto al estudio de
   workflows: es un flujo de siete pasos que lee documentos, hace preguntas y
   publica un agente. Una ventana arrastrable sobre una rejilla hacía que todo
   eso pareciera provisional.

   Cabecera y raíl quietos; sólo se desplaza el contenido del paso.
   ══════════════════════════════════════════════════════════════════════════ */

.ab-shell {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: var(--ia-bg);
    color: var(--ia-text);
}
/* Dentro de una ventana de Telerik ocupa la ventana, no la pantalla. */
.k-window .ab-shell { position: relative; inset: auto; height: 100%; z-index: auto; }
.agent-builder-window .k-window-titlebar { display: none; }

/* ── Cabecera ───────────────────────────────────────────────────────────── */
.ab-head {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--ia-rule);
    background: var(--ia-chrome);
}
.ab-head-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 1px solid var(--ia-accent);
    border-radius: var(--ia-radius-md);
    background: var(--ia-accent-soft);
    color: var(--ia-accent-400);
    font-size: 17px;
}
.ab-head-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ab-head-copy strong { font-size: 15px; font-weight: 500; }
/* La miga va en mono: empresa, aplicación y paso son datos, no prosa. */
.ab-head-copy span {
    font-family: var(--ia-font-mono);
    font-size: 11px;
    color: var(--ia-text-faint);
}
.ab-head-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ── Cuerpo: raíl de progreso + paso ────────────────────────────────────── */
.ab-body { display: grid; grid-template-columns: 268px minmax(0, 1fr); min-height: 0; }

.ab-rail {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 14px;
    border-right: 1px solid var(--ia-rule);
    background: var(--ia-chrome);
}
.ab-rail-head { display: flex; align-items: baseline; gap: 10px; padding: 0 8px 6px; }
.ab-rail-head span:first-child {
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ia-text-4);
}
.ab-rail-count { margin-left: auto; font-family: var(--ia-font-mono); font-size: 11px; color: var(--ia-text-faint); }
/* Barra de avance: una línea, no un porcentaje escrito. */
.ab-rail-bar { height: 2px; margin: 0 8px 12px; background: var(--ia-rule); border-radius: 2px; overflow: hidden; }
.ab-rail-bar > span { display: block; height: 100%; background: var(--ia-accent); transition: width .2s ease; }

.ab-step {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    width: 100%;
    padding: 10px 11px;
    border: 1px solid transparent;
    border-radius: var(--ia-radius-md);
    background: transparent;
    color: var(--ia-text-2);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.ab-step:disabled { cursor: default; }
.ab-step:hover:not(:disabled):not(.is-current) { background: var(--ia-hover); }
.ab-step.is-current { border-color: var(--ia-accent); background: var(--ia-accent-soft); }
.ab-step-index {
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    flex-shrink: 0;
    margin-top: 1px;
    border: 1px solid var(--ia-rule-strong);
    border-radius: 50%;
    font-family: var(--ia-font-mono);
    font-size: 10.5px;
    color: var(--ia-text-3);
}
.ab-step.is-current .ab-step-index { border-color: var(--ia-accent); color: var(--ia-accent-300); }
/* Un paso resuelto se marca; el número ya no aporta nada. */
.ab-step.is-done .ab-step-index { border-color: var(--ia-ok-border); background: var(--ia-ok-soft); color: var(--ia-ok); }
.ab-step-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ab-step-copy strong { font-size: 13px; font-weight: 500; color: var(--ia-text); }
.ab-step.is-current .ab-step-copy strong { color: var(--ia-accent-300); }
.ab-step-copy small { font-size: 11.5px; color: var(--ia-text-faint); line-height: 1.35; }

.ab-main { min-width: 0; min-height: 0; overflow-y: auto; padding: 26px 30px 40px; }
.ab-main-inner { max-width: 1180px; display: flex; flex-direction: column; gap: 20px; }

.ab-kicker {
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ia-text-4);
}
.ab-title { margin: 6px 0 0; font-size: 26px; font-weight: 500; letter-spacing: -.02em; }
.ab-lead { margin: 10px 0 0; max-width: 90ch; color: var(--ia-text-3); font-size: 13.5px; line-height: 1.65; }

/* ── Requisitos: lo que esta empresa ya tiene ───────────────────────────── */
.ab-panel {
    border: 1px solid var(--ia-rule);
    border-radius: var(--ia-radius-md);
    background: var(--ia-panel);
}
.ab-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--ia-rule);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ia-text-4);
}
.ab-panel-count { margin-left: auto; font-family: var(--ia-font-mono); font-size: 11px; text-transform: none; letter-spacing: normal; }

/* Rejilla de requisitos separada por líneas de 1px, no por huecos: son celdas
   de una misma comprobación, no tarjetas sueltas. */
.ab-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--ia-rule-soft); }
.ab-check { display: flex; flex-direction: column; gap: 6px; padding: 15px 16px; background: var(--ia-panel); }
.ab-check-head { display: flex; align-items: flex-start; gap: 9px; }
.ab-check-head > i { font-size: 15px; margin-top: 1px; flex-shrink: 0; }
.ab-check.is-ok .ab-check-head > i { color: var(--ia-ok); }
.ab-check.is-blocked .ab-check-head > i { color: var(--ia-err); }
.ab-check-title { flex: 1; min-width: 0; font-size: 13px; color: var(--ia-text); }
.ab-check p { margin: 0; font-size: 12px; color: var(--ia-text-3); line-height: 1.5; }
.ab-check a { font-size: 12.5px; }

/* ── Quién escribe y quién paga ─────────────────────────────────────────── */
.ab-profile { display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: 26px; padding: 16px; }
.ab-profile-note { margin: 0; color: var(--ia-text-3); font-size: 13px; line-height: 1.65; }
.ab-profile-meta { margin-top: 8px; font-family: var(--ia-font-mono); font-size: 11px; color: var(--ia-text-faint); }

/* ── Tarjetas numeradas que explican el flujo ───────────────────────────── */
.ab-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.ab-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 15px 16px;
    border: 1px solid var(--ia-rule);
    border-radius: var(--ia-radius-md);
    background: var(--ia-panel);
}
.ab-card-head { display: flex; align-items: center; gap: 10px; }
.ab-card-index {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 1px solid var(--ia-rule-strong);
    border-radius: 50%;
    font-family: var(--ia-font-mono);
    font-size: 10px;
    color: var(--ia-text-4);
}
.ab-card-head strong { font-size: 13.5px; font-weight: 500; }
.ab-card p { margin: 0; font-size: 12.5px; color: var(--ia-text-3); line-height: 1.55; }

/* Cuerpo de un panel del asistente. */
.ab-card-body { padding: 15px 16px; }

/* Paso 3: el requisito a la izquierda y la ayuda a la derecha, para que la guía
   esté a la vista mientras se escribe y no en un desplegable que nadie abre. */
.ab-describe { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.ab-describe .ia-textarea { min-height: 340px; }
.ab-guide { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ab-guide li { display: flex; gap: 9px; font-size: 12.5px; color: var(--ia-text-3); line-height: 1.5; }
.ab-guide li::before { content: ""; width: 5px; height: 5px; flex-shrink: 0; margin-top: 7px; border-radius: 50%; background: var(--ia-text-4); }

/* La tarjeta también es un control cuando se usa para elegir. */
button.ab-card { text-align: left; font: inherit; cursor: pointer; color: var(--ia-text); }
button.ab-card:hover { border-color: var(--ia-accent); }
.ab-card.is-chosen { border-color: var(--ia-accent); background: var(--ia-accent-soft); }
.ab-card.is-chosen .ab-card-head strong { color: var(--ia-accent-300); }
.ab-card-head > i { font-size: 16px; color: var(--ia-text-4); }
.ab-card.is-chosen .ab-card-head > i { color: var(--ia-accent-400); }

@media (max-width: 1100px) { .ab-describe { grid-template-columns: minmax(0, 1fr); } }

/* ── Tabla de operaciones del conector ──────────────────────────────────── */
.ab-ops-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ab-ops-meta { margin-left: auto; font-family: var(--ia-font-mono); font-size: 11.5px; color: var(--ia-text-faint); }
.ab-op-name { display: flex; flex-direction: column; gap: 3px; }
.ab-op-name code { font-size: 12.5px; color: var(--ia-text); }
.ab-op-name small { font-size: 12px; color: var(--ia-text-3); line-height: 1.5; }
.ab-op-path { font-family: var(--ia-font-mono); font-size: 11px; color: var(--ia-text-faint); }
.ab-op-inputs { font-family: var(--ia-font-mono); font-size: 11.5px; color: var(--ia-text-3); line-height: 1.6; }

/* ── Análisis ───────────────────────────────────────────────────────────── */
.ab-analysis { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.ab-understanding { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ia-text); }
.ab-objectives { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ab-objectives li { display: flex; gap: 10px; font-size: 13px; color: var(--ia-text-2); }
.ab-objectives li::before { content: "→"; color: var(--ia-text-4); flex-shrink: 0; }

/* Una herramienta propuesta: qué es, qué riesgo tiene y qué contrato pide. */
.ab-proposal { display: flex; flex-direction: column; gap: 7px; padding: 15px 16px; border-bottom: 1px solid var(--ia-rule-soft); }
.ab-proposal:last-child { border-bottom: 0; }
.ab-proposal-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ab-proposal-head strong { font-size: 13.5px; font-weight: 500; }
.ab-proposal-head code { font-family: var(--ia-font-mono); font-size: 12px; color: var(--ia-accent-400); }
.ab-proposal p { margin: 0; font-size: 12.5px; color: var(--ia-text-3); }
.ab-proposal-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--ia-font-mono); font-size: 11.5px; color: var(--ia-text-faint); }
.ab-proposal-meta .ia-btn { margin-left: auto; font-family: var(--ia-font); }
.ab-contract {
    margin: 0;
    padding: 12px 14px;
    max-height: 260px;
    overflow: auto;
    border: 1px solid var(--ia-rule);
    border-radius: var(--ia-radius-sm);
    background: var(--ia-code-bg);
    font-family: var(--ia-font-mono);
    font-size: 11.5px;
    color: var(--ia-text-2);
    white-space: pre;
}

.ab-aside { display: flex; flex-direction: column; gap: 14px; }
.ab-summary { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ab-summary li { display: flex; align-items: baseline; gap: 11px; font-size: 12.5px; color: var(--ia-text-3); }
.ab-summary b { font-family: var(--ia-font-mono); font-size: 19px; font-weight: 400; color: var(--ia-text); }
.ab-summary li.is-warn b { color: var(--ia-attn); }
.ab-assumptions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ab-assumptions li { display: flex; gap: 10px; font-size: 12.5px; color: var(--ia-text-3); line-height: 1.55; }
.ab-assumptions li > i { color: var(--ia-text-4); font-size: 14px; flex-shrink: 0; margin-top: 2px; }

/* ── Preguntas ──────────────────────────────────────────────────────────── */
.ab-questions { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; align-items: start; }
.ab-question {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 16px;
    border: 1px solid var(--ia-rule);
    border-radius: var(--ia-radius-md);
    background: var(--ia-panel);
}
.ab-question-head { display: flex; align-items: flex-start; gap: 10px; }
.ab-question-index {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
    border: 1px solid var(--ia-rule-strong);
    border-radius: 50%;
    font-family: var(--ia-font-mono);
    font-size: 10px;
    color: var(--ia-text-4);
}
.ab-question-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ab-question-copy strong { font-size: 13.5px; font-weight: 500; }
.ab-question-copy small { font-size: 12px; color: var(--ia-text-faint); line-height: 1.5; }
/* Respuestas típicas: contestar de un clic sin quitar la caja de texto, porque
   la lista nunca cubre todos los casos. */
.ab-options { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ab-option {
    padding: 6px 12px;
    border: 1px solid var(--ia-rule-strong);
    border-radius: var(--ia-radius-md);
    background: transparent;
    color: var(--ia-text-2);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}
.ab-option:hover { border-color: var(--ia-accent); color: var(--ia-accent-400); }
.ab-option.is-chosen { border-color: var(--ia-accent); background: var(--ia-accent-soft); color: var(--ia-accent-300); }
.ab-question-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Lo que pasa si se deja en blanco, junto al botón de dejarlo en blanco: saltarse
   una pregunta tiene consecuencia y quien la salta debe verla antes. */
.ab-blank-note { font-size: 11.5px; color: var(--ia-text-faint); line-height: 1.45; }

/* ── Recursos creados ───────────────────────────────────────────────────── */
.ab-resource { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--ia-rule-soft); }
.ab-resource:last-child { border-bottom: 0; }
.ab-resource-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border: 1px solid var(--ia-rule);
    border-radius: var(--ia-radius-md);
    background: var(--ia-sunken);
    color: var(--ia-text-3);
    font-size: 15px;
}
.ab-resource-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ab-resource-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ab-resource-head strong { font-size: 13.5px; font-weight: 500; }
.ab-resource-head code { font-family: var(--ia-font-mono); font-size: 11.5px; color: var(--ia-accent-400); }
.ab-resource-copy p { margin: 0; font-size: 12.5px; color: var(--ia-text-3); }
.ab-skipped { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ab-skipped li { font-family: var(--ia-font-mono); font-size: 11.5px; color: var(--ia-text-faint); line-height: 1.5; }

/* ── Pie ────────────────────────────────────────────────────────────────── */
.ab-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 20px;
    border-top: 1px solid var(--ia-rule);
    background: var(--ia-chrome);
}
/* Lo que va a pasar al pulsar, a la izquierda del botón que lo hace. */
.ab-foot-hint { font-size: 12.5px; color: var(--ia-text-3); }
.ab-foot-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ab-confirm { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ia-text-2); }

/* 1280 es una resolución demasiado común para perder ahí la segunda columna:
   el corte va por debajo, donde el texto de al lado ya no cabría. */
@media (max-width: 1100px) {
    .ab-analysis { grid-template-columns: minmax(0, 1fr); }
    .ab-profile { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 980px) {
    .ab-body { grid-template-columns: minmax(0, 1fr); }
    .ab-rail { display: none; }
    .ab-main { padding: 20px 16px 32px; }
}

/* Telerik coloca y dimensiona la ventana desde JavaScript y escribe un ancho en
   pixeles sobre el elemento, asi que el ancho del sistema tiene que declararse con
   mas fuerza o se pierde en cuanto la ventana se abre. Sin esto, `Width` se queda
   en lo que Telerik decida y las ventanas salen estrechas.

   Solo lo llevan las ventanas de edicion: una confirmacion sigue siendo estrecha,
   porque no tiene formulario, solo una frase y dos botones. */
.k-window.ia-wide-window {
    width: var(--ia-modal-w) !important;
    max-width: calc(100vw - 32px) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Configuración de la empresa
   Raíl de secciones quieto a la izquierda y una sola zona que se desplaza.
   ══════════════════════════════════════════════════════════════════════════ */
.cfg-layout { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 24px; align-items: start; }

.cfg-rail { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; }
.cfg-rail-title {
    padding: 0 8px 8px;
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ia-text-4);
}
.cfg-section {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 12px;
    border: 1px solid transparent;
    border-radius: var(--ia-radius-md);
    background: transparent;
    color: var(--ia-text-2);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.cfg-section:hover:not(.is-current) { background: var(--ia-hover); }
.cfg-section.is-current { border-color: var(--ia-accent); background: var(--ia-accent-soft); }
.cfg-section > i { font-size: 16px; margin-top: 1px; flex-shrink: 0; color: var(--ia-text-4); }
.cfg-section.is-current > i { color: var(--ia-accent-400); }
.cfg-section-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cfg-section-copy strong { font-size: 13px; font-weight: 500; color: var(--ia-text); }
.cfg-section.is-current .cfg-section-copy strong { color: var(--ia-accent-300); }
.cfg-section-copy small { font-size: 11.5px; color: var(--ia-text-faint); line-height: 1.35; }

.cfg-content { min-width: 0; display: flex; flex-direction: column; gap: 18px; }

@media (max-width: 1000px) {
    .cfg-layout { grid-template-columns: minmax(0, 1fr); }
    .cfg-rail { position: static; flex-direction: row; flex-wrap: wrap; }
    .cfg-rail-title { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Gestor de conexiones (/connections).

   Dos zonas: quien llama a la izquierda, lo que puede llamar a la derecha. La
   decision se toma comparando, y en una sola columna habria que recordar la
   aplicacion anterior mientras se lee la siguiente.
   --------------------------------------------------------------------------- */

.ia-connections {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.ia-connections-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.ia-connections-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: min(560px, 60vh);
    overflow-y: auto;
}

.ia-connections-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: var(--ia-radius-md);
    background: transparent;
    color: var(--ia-text);
    text-align: left;
    cursor: pointer;
}

.ia-connections-item:hover {
    background: var(--ia-sunken);
}

.ia-connections-item.is-current {
    border-color: var(--ia-rule-strong);
    background: var(--ia-sunken);
}

.ia-connections-item-name {
    font-weight: 600;
    font-size: 13px;
}

.ia-connections-item-meta {
    color: var(--ia-text-3);
    font-size: 11.5px;
}

.ia-connections-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.ia-connections-facts > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    font-size: 13px;
}

/* Una sola columna cuando no caben las dos: la lista arriba y el detalle debajo
   sigue siendo legible; dos columnas estrechas no. */
@media (max-width: 1100px) {
    .ia-connections {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* El "pruebalo" del acceso de cliente: el codigo listo para pegar.

   El desbordamiento horizontal no es decoracion. Una linea larga -la de <handlers>, sin ir mas lejos- rompe el
   ancho del dialogo y empuja el boton de cerrar fuera de la pantalla si no se acota aqui. */
.client-access-technologies {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.client-access-code {
    margin: 0 0 10px;
    padding: 12px 14px;
    max-height: 420px;
    overflow: auto;
    border-radius: var(--ia-radius-md);
    background: var(--ia-code-bg);
    color: var(--ia-text);
    font-family: var(--ia-font-mono);
    font-size: 12.5px;
    line-height: 1.5;
    white-space: pre;
}

/* ── Respuestas interactivas del agente (bloques ```iaureo) ────────────────── */
/* Tablas con selección, botones que declara el agente, mapas y las ventanas que
   abren. Reutilizan la tarjeta y la tabla de los resultados de herramienta, para
   que un dato se vea igual venga de donde venga. */
.answer-view { display: flex; flex-direction: column; gap: 10px; }
.answer-block { border: 1px solid var(--ia-rule); border-radius: var(--ia-radius-md); overflow: hidden; }
.answer-block:not(.chat-tool-card) { padding: 10px 12px; background: var(--ia-panel); }
.answer-table-wrap { max-height: 420px; overflow: auto; }
.answer-table thead th { position: sticky; top: 0; background: var(--ia-panel); z-index: 1; }
.answer-table tbody tr.is-selected td { background: var(--ia-accent-soft); }
.answer-table tbody tr:hover td { background: var(--ia-sunken); }
.answer-table tbody tr.is-selected:hover td { background: var(--ia-accent-soft); }
.answer-select { width: 34px; text-align: center; }
.answer-select input { accent-color: var(--ia-accent-400); cursor: pointer; }
.answer-align-right { text-align: right; }
.answer-align-center { text-align: center; }
.answer-sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.answer-sort:focus-visible { outline: 2px solid var(--ia-accent); outline-offset: 2px; }
.answer-align-right .answer-sort { justify-content: flex-end; width: 100%; }
.answer-selected { font-size: 12px; color: var(--ia-text-3); }
.answer-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--ia-rule); }
.answer-block:not(.chat-tool-card) .answer-actions { border-top: none; padding: 0; }
.answer-actions-title { font-size: 13px; margin-bottom: 8px; color: var(--ia-text-2); }
.answer-notice { font-size: 12.5px; color: var(--ia-text-3); display: flex; gap: 6px; align-items: center; }
.answer-invalid { border: 1px solid var(--ia-err-border); background: var(--ia-err-soft); border-radius: var(--ia-radius-md); padding: 8px 12px; font-size: 12.5px; }
.answer-invalid summary { cursor: pointer; color: var(--ia-err-strong); }
.answer-invalid pre { margin: 8px 0 0; max-height: 220px; overflow: auto; white-space: pre-wrap; }
.answer-modal { min-height: 100%; }

.answer-map-canvas { height: 360px; background: var(--ia-sunken); }
.answer-modal .answer-map-canvas { height: min(560px, 60vh); }
.answer-map-missing { font-size: 12px; color: var(--ia-text-3); }
.answer-map-unavailable { padding: 10px 14px; font-size: 12.5px; color: var(--ia-text-3); }
.answer-map-list { padding: 8px 14px; font-size: 12.5px; border-top: 1px solid var(--ia-rule); }
.answer-map-list summary { cursor: pointer; color: var(--ia-text-2); }
.answer-map-list ul { list-style: none; margin: 8px 0 0; padding: 0; max-height: 220px; overflow: auto; }
.answer-map-list li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--ia-rule); }
.answer-map-label { font-weight: 600; }
.answer-map-detail, .answer-map-nolocation { color: var(--ia-text-3); }
.answer-map-point { fill-opacity: .8; }
.answer-map-group-0 { stroke: var(--ia-series-1); fill: var(--ia-series-1); }
.answer-map-group-1 { stroke: var(--ia-series-2); fill: var(--ia-series-2); }
.answer-map-group-2 { stroke: var(--ia-series-3); fill: var(--ia-series-3); }
.answer-map-group-3 { stroke: var(--ia-series-4); fill: var(--ia-series-4); }
.answer-map-group-4 { stroke: var(--ia-series-5); fill: var(--ia-series-5); }
.answer-map-group-5 { stroke: var(--ia-series-6); fill: var(--ia-series-6); }
.answer-map-popup { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }

/* ---- Modelos de una cuenta de proveedor (varios despliegues por cuenta) ---- */
.provider-model-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 14px; align-items: end; padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--ia-rule); border-radius: var(--ia-radius-md); background: var(--ia-panel); }
.provider-model-row.is-disabled { opacity: .6; }
.provider-model-row-actions { display: flex; justify-content: flex-end; align-items: center; }