/* Admin Panel — global Filament presentation. */
html[data-ww-custom-app] body.fi-body {
    background-color: var(--ww-app-background);
}


/* Identidad del Perfil Chat: valor destacado de forma consistente. */
.profile-chat-name {
    color: var(--ww-info);
    font-weight: 600;
}

/* Bases de Conocimiento: tema claro */
html:not(.dark) .kb-title,
html:not(.dark) .kb-label {
    color: var(--ww-text);
}

html:not(.dark) .kb-variable {
    color: var(--ww-info);
}

/* Bases de Conocimiento: preservar tema oscuro original */
html.dark .kb-title,
html.dark .kb-profile-value {
    color: var(--ww-info);
}

html.dark .kb-label {
    color: var(--ww-warning);
}

html.dark .kb-variable:not(.kb-profile-value) {
    color: inherit;
}

/*
 * Resumen operativo.
 *
 * Contrato visual:
 * - nombres: texto normal del tema;
 * - valores configurativos/constantes: azul en claro, naranja en oscuro;
 * - estados: mismo color semántico en ambos temas.
 *
 * Estas reglas viven en el <head> del panel para que Filament/Tailwind no
 * neutralice los colores del HTML generado por ProfileSummary.
 */
html:not(.dark) .profile-summary .profile-summary-name,
html:not(.dark) .profile-summary .profile-summary-separator {
    color: var(--ww-text);
}

html.dark .profile-summary .profile-summary-name,
html.dark .profile-summary .profile-summary-separator {
    color: var(--ww-warning);
}

/* Nombres del Resumen operativo: contrato por sección y tema. */
html:not(.dark) .profile-summary .profile-summary-ai-name {
    color: var(--ww-warning);
}

html.dark .profile-summary .profile-summary-ai-name {
    color: var(--ww-info);
}

html:not(.dark) .profile-summary .profile-summary-channel-name {
    color: var(--ww-warning);
}

html.dark .profile-summary .profile-summary-channel-name {
    color: var(--ww-info);
}

/* Los nombres de las Bases de conocimiento: naranja en claro, azul en oscuro. */
html:not(.dark) .profile-summary .profile-summary-knowledge-name {
    color: var(--ww-warning);
}

html.dark .profile-summary .profile-summary-knowledge-name {
    color: var(--ww-info);
}

html:not(.dark) .profile-summary .profile-summary-constant {
    color: var(--ww-info);
}

html.dark .profile-summary .profile-summary-constant {
    color: var(--ww-warning);
}

.profile-summary .profile-summary-constant,
.profile-summary .profile-summary-state {
    font-weight: 600;
}

.profile-summary .profile-summary-state-success {
    color: var(--ww-success);
}

.profile-summary .profile-summary-state-info {
    color: var(--ww-info);
}

.profile-summary .profile-summary-state-danger {
    color: var(--ww-danger);
}

.profile-summary .profile-summary-state-muted {
    color: var(--ww-text-muted);
}

/*
 * Tablas de configuración: ficha vertical exclusivamente en móvil.
 *
 * La tabla sigue siendo convencional en escritorio.
 * No se activa columnsLayout de Filament.
 */
@media (max-width: 767px) {
    /*
     * Una tabla con ww-mobile-resource-cell deja de ser una tabla
     * horizontal en móvil: su cuerpo se representa como fichas verticales.
     * La cabecera tabular no debe participar en el cálculo intrínseco de
     * columnas, porque esas columnas ya no existen visualmente en móvil.
     */
    .fi-ta-table:has(
        > tbody > tr.fi-ta-row > td.ww-mobile-resource-cell
    ) > thead {
        display: none !important;
    }

    tr.fi-ta-row:has(> td.ww-mobile-resource-cell) {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    tr.fi-ta-row:has(> td.ww-mobile-resource-cell)
        > td.ww-mobile-resource-cell {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /*
     * Filament conserva el padding vertical de cada TextColumn.
     * Al apilarlas en móvil ese padding se acumula, especialmente
     * en Usuarios. Lo compactamos sin alterar la estructura.
     */
    tr.fi-ta-row:has(> td.ww-mobile-resource-cell)
        > td.ww-mobile-resource-cell .fi-ta-text {
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
    }

    tr.fi-ta-row:has(> td.ww-mobile-resource-cell)
        > td.ww-mobile-resource-cell:first-of-type .fi-ta-text {
        padding-top: 0.5rem;
    }

    .ww-mobile-created-at {
        white-space: nowrap;
    }

    tr.fi-ta-row:has(> td.ww-mobile-resource-cell)
        > td.ww-mobile-resource-cell > * {
        max-width: 100%;
        min-width: 0;
    }

    tr.fi-ta-row:has(> td.ww-mobile-resource-cell)
        > td.fi-ta-actions-cell {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    tr.fi-ta-row:has(> td.ww-mobile-resource-cell)
        > td.fi-ta-actions-cell > div {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        white-space: normal;
    }

    tr.fi-ta-row:has(> td.ww-mobile-resource-cell)
        > td.fi-ta-actions-cell .fi-ta-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* Users only: use the available width and let long labels wrap. */
@media (min-width: 768px) {
    .fi-main:has(.ww-users-table) {
        max-width: none;
    }
    .fi-ta:has(.ww-users-table) .fi-ta-header-cell > span {
        white-space: normal;
    }
    .fi-ta:has(.ww-users-table) .fi-ta-text-item-label {
        overflow-wrap: anywhere;
    }
    .fi-ta:has(.ww-users-table) .fi-ta-text .w-max:has(> .fi-badge) {
        width: auto;
        min-width: 0;
    }
    .fi-ta:has(.ww-users-table) .fi-badge .truncate {
        white-space: normal;
        overflow-wrap: anywhere;
    }
    /* Users: compact boolean status and keep row actions aligned like the
     * rest of the resource tables. */
    .fi-ta:has(.ww-users-table) .ww-users-pending-column {
        width: 1%;
        min-width: 0;
        white-space: nowrap;
    }
    .fi-ta:has(.ww-users-table) .fi-ta-actions {
        flex-wrap: nowrap;
        white-space: normal;
    }
}


/*
 * Cabecera del panel. Filament sigue siendo propietario de la geometría del
 * shell/sidebar; esta capa sólo unifica identidad y control de apertura.
 * El título se pinta una única vez junto al control y no depende del estado
 * abierto/cerrado de la barra lateral.
 */
.fi-sidebar-header .fi-logo {
    display: none !important;
}

/* Evita un segundo control de colapso dentro de la cabecera lateral. */
@media (min-width: 1024px) {
    .fi-sidebar-header > button {
        display: none !important;
    }
}

.ww-panel-identity {
    position: static;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.ww-panel-sidebar-toggle {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.ww-panel-sidebar-toggle:hover {
    background: rgb(148 163 184 / 0.12);
}

.ww-panel-sidebar-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.ww-panel-sidebar-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
}

.ww-panel-brand {
    position: static;
    display: block;
    min-width: 0;
    max-width: min(60vw, 28rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 700;
}

html.dark .ww-panel-brand { color: var(--ww-text); }

/* Autoría del producto: visible, discreta y estable en todo el panel. */
.ww-authorship {
    width: 100%;
    padding: 0.75rem 1rem 1rem;
    text-align: center;
    font-family: inherit;
    font-size: 0.6875rem;
    line-height: 1rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--ww-text-muted);
    opacity: 0.78;
}

html.dark .ww-authorship {
    color: var(--ww-text-muted);
}

/* El único control visible del menú es el estable de ww-panel-identity. */
.fi-topbar nav > button:first-of-type {
    display: none !important;
}


/* Selector compartido. El wrapper Filament gobierna borde, foco y dark mode. */
.ww-channel-kb-select { position: relative; min-width: 0; }
.ww-kb-trigger { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; min-width: 0; min-height: 2.25rem; padding: .375rem .75rem; background: transparent; border: 0; color: inherit; font: inherit; font-size: .875rem; text-align: left; }
.ww-kb-trigger > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ww-kb-trigger > svg { flex-shrink: 0; }
.ww-kb-trigger:disabled { opacity: .5; cursor: not-allowed; }
.ww-kb-menu { position: absolute; z-index: 40; top: calc(100% + .25rem); inset-inline: 0; display: grid; gap: .5rem; padding: .5rem; min-width: 0; border: 1px solid var(--ww-text); border-radius: .5rem; background: var(--ww-surface); color: var(--ww-text); box-shadow: 0 8px 20px rgb(0 0 0 / .12); }
.dark .ww-kb-menu { background: var(--ww-surface-raised); color: var(--ww-text); border-color: var(--ww-border); }
.ww-kb-options { max-height: min(16rem, 40dvh); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.ww-kb-option { display: flex; align-items: flex-start; gap: .5rem; padding: .5rem; border-radius: .375rem; cursor: pointer; font-size: .875rem; }
.ww-kb-option > input { flex-shrink: 0; margin-top: .125rem; }
.ww-kb-option > span { min-width: 0; overflow-wrap: anywhere; }
.ww-kb-option:hover, .ww-kb-option:focus-within { background: var(--ww-surface-muted); }
.dark .ww-kb-option:hover, .dark .ww-kb-option:focus-within { background: var(--ww-surface-muted); }
.ww-kb-empty { padding: .5rem; font-size: .875rem; }

/* Filament 5 places controls directly inside nav.fi-topbar. */
.fi-topbar > .fi-topbar-open-sidebar-btn,
.fi-topbar > .fi-topbar-close-sidebar-btn,
.fi-topbar > .fi-topbar-start { display: none !important; }
.ww-panel-logo { max-width: min(45vw, 14rem); max-height: 2rem; object-fit: contain; }
.ww-panel-logo-dark { display: none; }
html.dark .ww-panel-logo-light.ww-has-dark-logo { display: none; }
html.dark .ww-panel-logo-dark { display: block; }

/* Protected administration only: a persistent band, never a click-blocking overlay. */
.ww-integrity-warning {
    flex: 0 0 auto;
    position: relative;
    margin: 1rem;
    padding: clamp(1rem, 3vw, 2rem);
    border: 3px solid #b91c1c;
    border-radius: .75rem;
    background: #7f1d1d;
    color: #ffffff;
    text-align: center;
    overflow-wrap: anywhere;
    animation: ww-integrity-pulse 5s ease-in-out infinite;
}
.ww-integrity-warning h2 {font-size:clamp(1.25rem, 2vw, 1.75rem);font-weight:800;}
.ww-integrity-warning p {margin-top:.75rem;font-size:clamp(1rem, 1.6vw, 1.25rem);font-weight:700;}
.ww-integrity-warning .ww-integrity-explanation {font-size:1rem;font-weight:400;}
@keyframes ww-integrity-pulse {0%,25%,100% {box-shadow:0 0 0 0 rgb(185 28 28 / .1);} 12% {box-shadow:0 0 0 8px rgb(185 28 28 / .2);}}
@media (prefers-reduced-motion: reduce) {.ww-integrity-warning {animation:none;}}

.dark .ww-integrity-warning {background:#3b151b;color:#ffe4e6;border-color:#fda4af;}

/* The warning retains readable contrast even while the panel changes theme. */
.ww-integrity-warning, .ww-integrity-warning :is(h2,p) {color:#ffffff!important;}

/* Bases de conocimiento: lista compacta. Sin columna de fuentes ni
   desbordamiento causado por títulos, acciones o metadatos internos. */
.ww-knowledge-bases-table { min-width: 0; max-width: 100%; }
.ww-knowledge-bases-table .fi-ta-ctn { min-width: 0; max-width: 100%; }
.ww-knowledge-bases-table .fi-ta-header { flex-wrap: wrap; }
.ww-knowledge-bases-table td.ww-kb-desktop-title,
.ww-knowledge-bases-table td.ww-kb-desktop-profile {
    min-width: 0;
    max-width: 30rem;
    overflow-wrap: anywhere;
}
.ww-knowledge-bases-table td.ww-kb-desktop-title .fi-ta-text-item-label,
.ww-knowledge-bases-table td.ww-kb-desktop-profile .fi-ta-text-item-label {
    overflow-wrap: anywhere;
    white-space: normal;
}
.ww-knowledge-bases-table .fi-ta-actions { gap: .45rem; align-items: center; }
.ww-knowledge-bases-table .ww-kb-copy-action { white-space: nowrap; }

/* Las columnas de fichas tienen breakpoint xl (1280px); usar exactamente
   ese límite también en CSS evita la franja intermedia con tabla desbordada. */
@media (max-width: 1279px) {
    .ww-knowledge-bases-table .fi-ta-table:has(td.ww-kb-mobile-cell),
    .ww-knowledge-bases-table .fi-ta-table:has(td.ww-kb-mobile-cell) > tbody,
    .ww-knowledge-bases-table .fi-ta-table:has(td.ww-kb-mobile-cell) > tbody > tr.fi-ta-row {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
    .ww-knowledge-bases-table .fi-ta-table:has(td.ww-kb-mobile-cell) > thead {
        display: none;
    }
    .ww-knowledge-bases-table .fi-ta-table td.ww-kb-mobile-cell,
    .ww-knowledge-bases-table .fi-ta-table tr.fi-ta-row > td.fi-ta-actions-cell {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .ww-knowledge-bases-table .fi-ta-table td.ww-kb-mobile-cell .fi-ta-text,
    .ww-knowledge-bases-table .fi-ta-table td.ww-kb-mobile-cell > * {
        min-width: 0;
        max-width: 100%;
    }
    .ww-knowledge-bases-table .fi-ta-table tr.fi-ta-row > td.fi-ta-actions-cell .fi-ta-actions {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: .5rem;
    }
}
.ww-record-value { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }