:root { --ai-panel-width: 430px; } /* * Publicación temporal sin acceso visible al Panel IA. * La lógica, módulos y panel siguen cargándose normalmente; únicamente se * ocultan su botón y su superficie visual. Para reactivarlo basta retirar * la clase `ai-ui-hidden` del elemento . */ html.ai-ui-hidden #mobileAiPanelButton, html.ai-ui-hidden #aiPanel { display: none !important; } html.ai-ui-hidden body.ai-panel-open #appLayout { padding-right: 0 !important; } #aiPanel.ai-panel { position: fixed; z-index: 1450; top: var(--app-header-height, 50px); right: 0; bottom: 0; width: min(var(--ai-panel-width), 94vw); display: flex; flex-direction: column; min-width: 320px; color: #e7eef9; background: #0d1728; border-left: 1px solid #31445f; box-shadow: -12px 0 28px rgba(3, 10, 22, .28); font: 12px/1.4 "Segoe UI", sans-serif; } #aiPanel.hidden { display: none !important; } .ai-panel-open #appLayout { padding-right: min(var(--ai-panel-width), 94vw); } .ai-panel-splitter { position: absolute; z-index: 3; top: 0; bottom: 0; left: -6px; width: 12px; cursor: col-resize; touch-action: none; } .ai-panel-splitter::after { content: ""; position: absolute; top: 0; bottom: 0; left: 5px; width: 2px; background: #31445f; transition: width .12s ease, left .12s ease, background .12s ease; } .ai-panel-splitter:hover::after, .ai-panel-splitter.dragging::after { left: 4px; width: 4px; background: #168be4; } .ai-header { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px 7px 14px; border-bottom: 1px solid #2b3e59; background: #142238; } .ai-header div { display: grid; gap: 1px; } .ai-header strong { font-size: 13px; } .ai-header small { color: #91a4bf; font-size: 10px; } .ai-header button { border: 0; color: #dbe8f7; background: transparent; font-size: 23px; cursor: pointer; } .ai-settings { border-bottom: 1px solid #273a54; background: #101d31; } .ai-settings summary { display: flex; justify-content: space-between; gap: 10px; padding: 9px 13px; cursor: pointer; } .ai-settings summary small { color: #7ea6d7; } .ai-settings-body { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 13px 12px; } .ai-settings-body label { display: grid; gap: 4px; color: #9eb0c8; font-size: 10px; } .ai-settings-body label:last-of-type, .ai-key-note { grid-column: 1 / -1; } .ai-settings select, .ai-settings input, .ai-clarification select { min-width: 0; height: 32px; padding: 0 8px; color: #e8f0fa; background: #0b1525; border: 1px solid #3a506f; border-radius: 4px; } .ai-key-note { color: #758ba7; font-size: 9px; } .ai-usage-summary { grid-column: 1 / -1; display: grid; gap: 2px; padding: 8px 9px; border: 1px solid #2d4664; border-radius: 5px; background: #0c192a; } .ai-usage-summary strong { color: #dce9f8; font-size: 10px; } .ai-usage-summary span { color: #9fc8ef; font-size: 9px; } .ai-usage-summary small { color: #7289a6; font-size: 8px; } .ai-catalog { display: flex; align-items: center; gap: 9px; padding: 8px 13px; border-bottom: 1px solid #24364e; } .ai-catalog > span { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #60748f; } .ai-catalog > span.working { background: #e8b83f; box-shadow: 0 0 0 3px rgba(232,184,63,.14); } .ai-catalog > span.ready { background: #34c97b; box-shadow: 0 0 0 3px rgba(52,201,123,.14); } .ai-catalog > span.error { background: #ef5f68; } .ai-catalog div { display: grid; min-width: 0; } .ai-catalog strong { font-size: 10px; } .ai-catalog small { color: #8498b3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; } .ai-conversations { flex: 0 0 auto; border-bottom: 1px solid #263a54; background: #101c2f; } .ai-conversations summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 33px; padding: 0 13px; color: #d9e6f6; cursor: pointer; font-weight: 600; list-style-position: inside; } .ai-conversations summary small { min-width: 20px; padding: 1px 6px; border-radius: 9px; color: #9fc8ef; background: #1c3550; text-align: center; font-size: 9px; } .ai-conversation-list { max-height: min(230px, 34vh); padding: 4px 8px 8px; overflow: auto; display: grid; gap: 4px; } .ai-conversation-item { display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 4px; align-items: stretch; border: 1px solid #2c405c; border-radius: 6px; background: #111f34; } .ai-conversation-item.active { border-color: #168be4; background: #142944; box-shadow: inset 3px 0 0 #168be4; } .ai-conversation-open, .ai-conversation-delete { border: 0; color: #dce8f7; background: transparent; cursor: pointer; } .ai-conversation-open { min-width: 0; padding: 7px 8px; display: grid; gap: 2px; text-align: left; } .ai-conversation-open strong, .ai-conversation-open small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ai-conversation-open strong { font-size: 10px; } .ai-conversation-open small { color: #7f94b0; font-size: 8px; font-weight: 400; } .ai-conversation-open:hover { background: rgba(22, 139, 228, .09); } .ai-conversation-delete { margin: 4px 4px 4px 0; border-radius: 4px; color: #ed9aa2; font-size: 18px; } .ai-conversation-delete:hover { color: #fff; background: #7e2631; } .ai-conversation-empty { padding: 13px 8px; color: #7f94b0; text-align: center; font-size: 9px; } .ai-messages { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; } .ai-message { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; } .ai-message.user { align-items: flex-end; } .ai-message-bubble { max-width: 88%; padding: 9px 10px; border-radius: 10px; white-space: pre-wrap; word-break: break-word; background: #1b2b42; border: 1px solid #30455f; } .ai-message.user .ai-message-bubble { background: #076dc6; border-color: #1483e6; } .ai-message.has-table .ai-message-bubble { width: min(100%, 760px); max-width: 100%; box-sizing: border-box; } .ai-message small { max-width: 90%; color: #7489a5; font-size: 9px; } .ai-table-wrap { width: 100%; margin-top: 8px; overflow: auto; border: 1px solid #3a506f; border-radius: 6px; } .ai-result-table { width: 100%; min-width: 320px; border-collapse: collapse; white-space: nowrap; background: #0d192b; font-size: 10px; } .ai-result-table th, .ai-result-table td { padding: 6px 8px; border-right: 1px solid #283c56; border-bottom: 1px solid #283c56; text-align: left; vertical-align: top; } .ai-result-table th { position: sticky; top: 0; z-index: 1; color: #dce9f8; background: #172943; font-weight: 700; } .ai-result-table td:last-child, .ai-result-table th:last-child { border-right: 0; } .ai-result-table tbody tr:last-child td { border-bottom: 0; } .ai-result-table tbody tr:hover td { background: rgba(21, 144, 238, .08); } .ai-message-attachments { display: grid; gap: 5px; margin-top: 9px; padding-top: 8px; border-top: 1px solid #344b68; } .ai-message-attachments > small { color: #91a7c2; font-size: 9px; overflow-wrap: anywhere; } .ai-report-download { width: fit-content; min-height: 31px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; color: #fff; background: #137a45; border: 1px solid #28a862; border-radius: 5px; text-decoration: none; font-weight: 700; } .ai-report-download:hover { background: #198b50; border-color: #47c77e; } .ai-report-download svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ai-report-unavailable { padding: 7px 8px; color: #96a7bd; background: #111d2d; border: 1px dashed #41546c; border-radius: 5px; font-size: 9px; } .ai-clarification { margin: 0 12px 9px; padding: 10px; display: grid; gap: 8px; border: 1px solid #456487; border-radius: 6px; background: #14243a; } .ai-clarification.hidden { display: none; } .ai-clarification-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ai-clarification .ai-clarification-cancel { min-width: 26px; min-height: 26px; padding: 0; border-color: transparent; background: transparent; color: #b9cae0; font-size: 20px; line-height: 1; } .ai-clarification .ai-clarification-cancel:hover { color: #fff; background: #263b55; border-color: #456487; } .ai-clarification button, .ai-compose button { min-height: 32px; padding: 0 12px; color: white; background: #0876d1; border: 1px solid #1892ed; border-radius: 4px; cursor: pointer; font-weight: 600; } .ai-progress { padding: 8px 12px; border-top: 1px solid #263b55; background: #101d30; } .ai-progress.hidden { display: none; } .ai-progress div { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 5px; color: #a9bad0; font-size: 9px; } .ai-progress progress { width: 100%; height: 7px; accent-color: #1590ee; } .ai-compose { padding: 10px 12px; border-top: 1px solid #2a3d57; background: #111e31; } .ai-compose textarea { box-sizing: border-box; width: 100%; min-height: 66px; max-height: 160px; resize: vertical; padding: 9px; color: #eaf2fc; background: #0a1423; border: 1px solid #3a506e; border-radius: 5px; font: inherit; } .ai-compose > div { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; } .ai-compose-tools { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px; } .ai-compose-actions { display: inline-flex; align-items: center; gap: 7px; } .ai-voice-button { width: 34px; min-width: 34px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; color: #e8f0fa !important; background: #1b2a40 !important; border-color: #3d526d !important; } .ai-voice-button svg { width: 17px; height: 17px; overflow: visible; } .ai-voice-button svg rect { fill: currentColor; stroke: currentColor; } .ai-voice-button svg path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ai-mic-button svg rect { fill: none; } .ai-mic-button.recording { color: white !important; background: #9f1f2f !important; border-color: #ef5f68 !important; box-shadow: 0 0 0 3px rgba(239, 95, 104, .15); } .ai-mic-button.recording svg rect { fill: currentColor; stroke: none; } .ai-speak-button.active { color: #fff !important; background: #0876d1 !important; border-color: #1892ed !important; box-shadow: 0 0 0 3px rgba(24, 146, 237, .12); } .ai-compose button.ai-secondary { color: #c7d5e7; background: #1b2a40; border-color: #3d526d; } .ai-compose button:disabled { opacity: .55; cursor: default; } @media (max-width: 1100px) { #aiPanel.ai-panel { top: 0; width: 100vw; max-width: none; } .ai-panel-open #appLayout { padding-right: 0; } .ai-panel-splitter { display: none; } } /* Tablas interactivas del Panel IA: una sola experiencia para cualquier resultado tabular. */ .ai-table-controls { width: 100%; margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; white-space: normal; } .ai-table-viewer-toggle { min-height: 28px; display: inline-flex; align-items: center; gap: 7px; color: #cfe0f4; cursor: pointer; user-select: none; font-size: 9px; font-weight: 600; } .ai-table-viewer-toggle input { width: 14px; height: 14px; margin: 0; accent-color: #1590ee; cursor: pointer; } .ai-table-viewer-toggle.is-disabled { color: #70839d; cursor: default; } .ai-table-viewer-toggle.is-disabled input { cursor: default; } .ai-table-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; } .ai-table-status { color: #849ab5 !important; font-size: 9px !important; white-space: nowrap; } .ai-table-toggle { min-height: 27px; padding: 0 9px; color: #dceafb; background: #182b44; border: 1px solid #3b5878; border-radius: 4px; cursor: pointer; font: inherit; font-size: 9px; font-weight: 700; } .ai-table-toggle:hover { color: #fff; background: #1d3a5c; border-color: #1b8de0; } .ai-table-toggle.hidden { display: none; } .ai-interactive-table-wrap { position: relative; overscroll-behavior: contain; } .ai-interactive-table-wrap.is-expanded { max-height: min(430px, 48vh); overflow: auto; } .ai-result-table th { padding: 0; } .ai-table-sort { width: 100%; min-height: 31px; padding: 6px 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 0; color: inherit; background: transparent; cursor: pointer; font: inherit; font-weight: 700; text-align: left; white-space: nowrap; } .ai-table-sort:hover { background: rgba(21, 144, 238, .12); } .ai-table-sort-indicator { min-width: 11px; color: #6f93b8; text-align: center; font-size: 10px; } .ai-result-table tbody tr:not(.ai-table-virtual-spacer) { cursor: default; } .ai-result-table tbody tr:not(.ai-table-virtual-spacer):hover td { background: rgba(21, 144, 238, .08); } .ai-result-table tbody tr.is-selected td { color: #eff7ff; background: rgba(21, 144, 238, .20); box-shadow: inset 0 1px 0 rgba(74, 174, 246, .18), inset 0 -1px 0 rgba(74, 174, 246, .18); } .ai-result-table tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 #1590ee, inset 0 1px 0 rgba(74, 174, 246, .18), inset 0 -1px 0 rgba(74, 174, 246, .18); } .ai-table-virtual-spacer td { background: transparent !important; pointer-events: none; } /* IA · filtros, sumas y scroll estable en tablas de resultados. */ .ai-interactive-table-wrap { scrollbar-gutter: stable both-edges; touch-action: pan-x pan-y; } .ai-result-table { min-width: max-content; } .ai-table-header-cell { position: sticky; top: 0; z-index: 3; min-width: 118px; background: #102238; vertical-align: top; } .ai-table-header-main { min-height: 31px; display: flex; align-items: stretch; min-width: 0; } .ai-table-header-main .ai-table-sort { flex: 1 1 auto; min-width: 0; } .ai-table-header-label { overflow: hidden; text-overflow: ellipsis; } .ai-table-filter-button { flex: 0 0 25px; width: 25px; min-height: 31px; padding: 0; border: 0; border-left: 1px solid rgba(91, 126, 164, .32); color: #7f9cbb; background: transparent; cursor: pointer; font-size: 9px; } .ai-table-filter-button:hover, .ai-table-filter-button.active { color: #72c7ff; background: rgba(21, 144, 238, .15); } .ai-table-filter-button.active { box-shadow: inset 0 -2px 0 #38bdf8; } .ai-table-column-total { display: block; max-width: 100%; padding: 0 7px 5px; overflow: hidden; color: #38bdf8; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; font-weight: 700; line-height: 12px; } .ai-table-column-total.hidden { display: none; } .ai-table-filter-popup { position: fixed; z-index: 100080; width: 290px; max-width: calc(100vw - 16px); padding: 8px; color: #dceafb; background: #122236; border: 1px solid #416080; border-radius: 6px; box-shadow: 0 14px 32px rgba(0, 0, 0, .42); font-size: 10px; } .ai-table-filter-search { width: 100%; height: 29px; margin: 0 0 7px; padding: 0 8px; color: #eaf4ff; background: #0d1a2b; border: 1px solid #385572; border-radius: 4px; outline: none; font: inherit; } .ai-table-filter-search:focus { border-color: #1590ee; box-shadow: 0 0 0 2px rgba(21, 144, 238, .12); } .ai-table-filter-list { position: relative; height: min(235px, 36vh); margin-top: 5px; overflow: auto; overscroll-behavior: contain; border-top: 1px solid rgba(79, 108, 142, .3); } .ai-table-filter-list-inner { position: relative; width: 100%; min-height: 1px; } .ai-table-filter-option { height: 28px; display: grid; grid-template-columns: 18px minmax(0, 1fr) max-content; align-items: center; gap: 6px; padding: 0 5px; color: #d8e6f6; cursor: pointer; user-select: none; } .ai-table-filter-list .ai-table-filter-option { position: absolute; left: 0; right: 0; } .ai-table-filter-option:hover { background: rgba(21, 144, 238, .12); } .ai-table-filter-option input { width: 13px; height: 13px; margin: 0; accent-color: #1590ee; } .ai-table-filter-option span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ai-table-filter-option small { color: #7891ac; font-size: 8px; } .ai-table-filter-all { grid-template-columns: 18px minmax(0, 1fr); min-height: 28px; border-radius: 3px; font-weight: 700; } .ai-table-filter-loading { padding: 18px 8px; color: #7891ac; text-align: center; }