/* styles.css - Estilos modernos para IA Multi-archivo HTML5 */

:root {
    --primary-color: #1A1A1A;
    --primary-hover: #4A4A4A;
    --secondary-color: #6B6B6B;
    --success-color: #1D7A5F;
    --danger-color: #C0392B;
    --warning-color: #B8922A;
    --info-color: #1A1A1A;
    
    --bg-primary: #FFFFFF;
    --bg-secondary: #F7F6F2;
    --bg-tertiary: #EDECEA;
    --card-bg: #FFFFFF;
    --border-color: rgba(0,0,0,0.10);
    --text-primary: #1A1A1A;
    --text-secondary: #6B6B6B;
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.08);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.06);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: #F2F1EE;
    height: 100dvh;
    overflow: hidden;
    color: var(--text-primary);
    line-height: 1.6;
}

.app-container {
    max-width: 100%;
    margin: 0;
    height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* Header */
.app-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 0.5rem 2rem;
    box-shadow: var(--shadow-lg);
    margin: 0;
    border-radius: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 72px;
}

.header-content h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
}

.subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.status-indicator {
    display: none; /* reemplazado por badge flotante en index.html */
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--secondary-color);
    animation: pulse 2s infinite;
}

.status-dot.online {
    background: var(--success-color);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Tabs Navigation */
.tabs-nav {
    display: flex;
    gap: 0.5rem;
    padding: 0 1rem;
    margin: 0 1rem;
    overflow-x: auto;
}

.tab-btn {
    background: rgba(255, 255, 255, 0.7);
    border: none;
    padding: 1rem 1.5rem;
    border-radius: 0.75rem 0.75rem 0 0;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    color: var(--text-secondary);
}

.tab-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.tab-btn.active {
    background: var(--bg-primary);
    color: var(--primary-color);
    font-weight: 600;
}

/* Main Content */
.main-content {
    flex: 1;
    min-height: 0;
    background: var(--bg-primary);
    margin: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Cards */
.card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow);
}

.card h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.75rem;
}

.card-description {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.7;
}

/* Forms */
.form-section {
    margin: 2rem 0;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="password"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: all 0.2s ease;
    font-family: inherit;
}

.form-group input[type="file"] {
    display: block;
    width: 100%;
    padding: 0.75rem;
    border: 2px dashed var(--border-color);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.form-group input[type="file"]:hover {
    border-color: var(--primary-color);
    background: var(--bg-secondary);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.file-hint {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}

.info-box {
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

.info-box h4 {
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
    color: var(--primary-color);
    font-size: 1rem;
}

.info-box code {
    background-color: #e3e3e3;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

.info-box a {
    color: var(--primary-color);
    text-decoration: none;
}

.info-box a:hover {
    text-decoration: underline;
}

/* Checkboxes and Radios */
input[type="checkbox"],
input[type="radio"] {
    margin-right: 0.5rem;
    width: 1.2rem;
    height: 1.2rem;
    cursor: pointer;
}

/* Range Inputs */
input[type="range"] {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-tertiary);
    outline: none;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: none;
}

/* Buttons */
.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: var(--secondary-color);
    color: white;
}

.btn-secondary:hover {
    background: #4b5563;
}

.btn-danger {
    background: var(--danger-color);
    color: white;
}

.btn-danger:hover {
    background: #dc2626;
}

.btn-success {
    background: var(--success-color);
    color: white;
}

.btn-success:hover {
    background: #059669;
}

.btn-export {
    background: var(--success-color);
    color: white;
}

.btn-export:hover {
    background: #059669;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    margin-left: 0.5rem;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.button-group {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.export-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

/* Alerts */
.alert {
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

.alert-info {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #1e40af;
}

.alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #92400e;
}

/* Progress */
.progress-container {
    margin: 2rem 0;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-radius: 0.5rem;
}

.progress-bar {
    width: 100%;
    height: 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--info-color));
    border-radius: 6px;
    transition: width 0.3s ease;
    width: 0%;
}

.progress-text {
    text-align: center;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Results */
.result-container {
    margin-top: 2rem;
    padding: 2rem;
    background: var(--bg-secondary);
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
}

.result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.result-header h3 {
    margin: 0;
}

.result-text {
    width: 100%;
    min-height: 300px;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
    line-height: 1.6;
    background: white;
    resize: vertical;
}

.result-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--border-color);
}

.result-tab {
    padding: 0.75rem 1.5rem;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
}

.result-tab:hover {
    color: var(--text-primary);
}

.result-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.result-panel {
    display: none;
}

.result-panel.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Files Preview */
.files-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
    overflow-x: auto; /* Permitir scroll horizontal para previews anchas */
}

/* Documento OCR: usar layout de visor ancho en columna */
#doc-preview.files-preview {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    overflow-x: hidden;
}

.file-preview-item {
    padding: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    text-align: center;
    position: relative;
}

.file-preview-item img {
    max-width: 100%;
    max-height: 100px;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
}

.file-preview-item .filename {
    font-size: 0.875rem;
    color: var(--text-secondary);
    word-break: break-word;
}

.file-preview-item .remove-file {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: var(--danger-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

/* Files Loaded Container (Big Cards) */
.files-loaded-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.file-loaded-card {
    background: linear-gradient(135deg, #FAFAF8 0%, #F2F1EE 100%);
    border: 2px solid rgba(0,0,0,0.10);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.file-loaded-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    border-color: #1A1A1A;
}

.file-visual-preview {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 150px;
    background: #ffffff;
    border-radius: 8px;
    padding: 1rem;
}

.file-visual-preview img {
    max-width: 100%;
    max-height: 300px;
    border-radius: 8px;
    object-fit: contain;
}

.loading-preview {
    font-size: 1.5rem;
    color: #94a3b8;
    padding: 2rem;
}

.file-icon-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem 1rem;
}

.file-big-icon {
    font-size: 4rem;
    line-height: 1;
}

.file-type-label {
    font-size: 1rem;
    font-weight: 600;
    color: #4A4A4A;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.375rem 1rem;
    background: linear-gradient(135deg, #F0EFE9 0%, #E4E2DA 100%);
    border-radius: 999px;
}

.file-info-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
}

.file-name-display {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
    word-break: break-word;
    line-height: 1.4;
}

.file-size-display {
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 500;
}

.remove-file-btn {
    width: 100%;
    padding: 0.625rem 1rem;
    background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
    color: #991b1b;
    border: 2px solid #f87171;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.remove-file-btn:hover {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    color: white;
    border-color: #dc2626;
    transform: scale(1.02);
}

.remove-file-btn span {
    font-size: 1.125rem;
}

/* Preview Section Title */
.preview-section-title {
    font-size: 0.3125rem;
    font-weight: 600;
    color: #1f2937;
    margin: 2rem 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Preview Footer */
.preview-footer {
    font-size: 0.75rem;
    font-weight: 400;
    color: #6b7280;
    margin-top: 1.5rem;
    padding: 0.75rem 0;
    text-align: center;
    border-top: 1px solid #e5e7eb;
}

/* Document Page Preview */
.document-page-preview {
    margin: 1rem auto 2rem;
    border: 2px solid rgba(0,0,0,0.10);
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease;
    width: 100%;
    max-width: 1200px;
}

.document-page-preview:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1.25rem;
    background: linear-gradient(135deg, #1A1A1A 0%, #3A3A3A 100%);
    color: white;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
}

.preview-header:hover {
    background: linear-gradient(135deg, #2A2A2A 0%, #4A4A4A 100%);
}

.preview-title {
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: 0.01em;
}

.preview-toggle {
    font-size: 1.3rem;
    transition: transform 0.3s ease;
    opacity: 0.9;
}

.preview-toggle.collapsed {
    transform: rotate(-90deg);
}

.preview-content {
    max-height: 2400px;
    overflow-x: hidden;
    overflow-y: auto;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    opacity: 1;
}

.preview-content.collapsed {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
}

/* Preview Type Subtitle */
.preview-type-subtitle {
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #FBF5E6 0%, #F4E9CC 100%);
    color: #7A5C10;
    font-weight: 600;
    font-size: 0.95rem;
    border-bottom: 2px solid #D4B060;
}

/* Preview Info Content */
.preview-info-content {
    padding: 1.5rem;
    background: white;
}

.preview-info-content p {
    margin: 0.5rem 0;
    color: #4b5563;
    font-size: 0.95rem;
}

.preview-info-content p strong {
    color: #1f2937;
    font-weight: 600;
}

/* Preview Action Note (dentro del contenido) */
.preview-action-note {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #86efac;
    border-radius: 10px;
    font-size: 0.9rem;
    color: #166534;
    line-height: 1.6;
}

.preview-action-note strong {
    color: #15803d;
    font-weight: 700;
}

.preview-canvas-container {
    padding: 1rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(to bottom, #f8fafc 0%, #f1f5f9 100%);
    overflow-x: hidden;
    overflow-y: auto;
}

.preview-canvas {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin: 0 auto;
}

.preview-doc-info {
    padding: 0.9rem 1.25rem;
    background: linear-gradient(135deg, #F0EFE9 0%, #E4E2DA 100%);
    color: #1A1A1A;
    font-weight: 600;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(0,0,0,0.12);
    word-break: break-word;
}

.preview-pdf-content {
    padding: 1rem 1.25rem 1.5rem;
    background: #ffffff;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.preview-pdf-content .preview-stats {
    margin-bottom: 1rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.preview-image-content {
    padding: 1.25rem;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    overflow: hidden;
}

.preview-image-media {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: min(78vh, 980px);
    object-fit: contain;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
    background: #ffffff;
}

.preview-placeholder {
    padding: 3rem 2rem;
    text-align: center;
    color: var(--text-secondary);
    background: linear-gradient(to bottom, #fafafa 0%, #f5f5f5 100%);
}

.preview-placeholder-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.8;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.preview-info-box {
    display: inline-block;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem 2rem;
    margin: 1rem auto;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.preview-info-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1rem;
    text-align: center;
}

.preview-info-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    font-size: 0.95rem;
    color: #4b5563;
}

.preview-info-row strong {
    color: #1f2937;
    font-weight: 600;
}

.preview-action-message {
    margin-top: 1.5rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #86efac;
    border-radius: 10px;
    font-size: 0.9rem;
    color: #166534;
    line-height: 1.6;
}

.preview-action-message strong {
    color: #15803d;
    font-weight: 700;
}

.preview-note {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: #F0EFE9;
    border-left: 4px solid #B8922A;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #7A5C10;
    text-align: left;
}

.preview-text-content {
    text-align: left;
    background: white;
    padding: 1.5rem;
    font-family: 'Courier New', monospace;
    white-space: pre-wrap;
    max-height: 500px;
    overflow-y: auto;
    font-size: 0.45rem;
    line-height: 1.6;
    color: #374151;
    border: none;
}

.preview-stats {
    margin-top: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
    font-size: 0.85rem;
    color: #6b7280;
}

/* Word document preview */
.preview-doc-info {
    padding: 0.75rem 1.25rem;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.875rem;
    color: #475569;
    font-weight: 500;
}

.preview-word-content {
    padding: 2rem 2.5rem;
    background: #fff;
    max-height: 1600px;
    overflow-y: auto;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 0.475rem;
    line-height: 1.8;
    color: #1e293b;
    border-bottom: 1px solid #e2e8f0;
}

.preview-word-content h1,
.preview-word-content h2,
.preview-word-content h3 {
    font-weight: 700;
    margin: 1rem 0 0.5rem;
    color: #0f172a;
}

.preview-word-content p {
    margin: 0.5rem 0;
}

.preview-word-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0;
}

.preview-word-content td,
.preview-word-content th {
    border: 1px solid #cbd5e1;
    padding: 0.4rem 0.75rem;
    font-size: 0.4375rem;
}

/* Excel table preview */
.preview-excel-container {
    max-height: 1200px;
    overflow: auto;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
}

.preview-excel-container table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.41rem;
}

.preview-excel-container td,
.preview-excel-container th {
    border: 1px solid #e2e8f0;
    padding: 0.35rem 0.65rem;
    white-space: nowrap;
    color: #1e293b;
}

.preview-excel-container tr:nth-child(even) {
    background: #f8fafc;
}

.preview-excel-container tr:first-child td,
.preview-excel-container tr:first-child th {
    background: #E4E2DA;
    font-weight: 600;
    color: #1A1A1A;
    position: sticky;
    top: 0;
}

/* Video Frame Preview - Uses same professional styling as document preview */
.video-frame-preview {
    margin: 1.5rem 0;
    border: 2px solid rgba(0,0,0,0.10);
    border-radius: 12px;
    overflow: hidden;
    background: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease;
}

.video-frame-preview:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.video-frame-preview .preview-canvas {
    background: #000;
    border-radius: 8px;
}

/* Video Frame Preview Simple (sin estructura colapsable) */
.video-frame-preview-simple {
    margin: 1.5rem 0;
}

.video-preview-simple-content {
    background: white;
    border: 2px solid rgba(0,0,0,0.10);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.video-preview-simple-content .preview-canvas {
    background: #000;
    border-radius: 8px;
}

/* Video Preview */
.video-preview,
.screen-preview {
    margin: 2rem 0;
    text-align: center;
}

.video-preview video,
.screen-preview video,
.recorded-video-container video {
    max-width: 100%;
    border-radius: 0.75rem;
    box-shadow: var(--shadow-lg);
}

/* Recording Indicator */
.recording-indicator {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.recording-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--danger-color);
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Screen Analysis */
.screen-analysis {
    margin-top: 2rem;
    padding: 1.5rem;
    background: white;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
}

/* Configuration Sections */
.config-section {
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-radius: 0.5rem;
    margin-bottom: 2rem;
}

/* Config Collapsible Section */
.config-collapsible-section {
    margin: 2rem 0;
    border: 2px solid rgba(0,0,0,0.10);
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease;
}

.config-collapsible-section:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.config-collapse-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #1A1A1A 0%, #3A3A3A 100%);
    color: white;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
}

.config-collapse-header:hover {
    background: linear-gradient(135deg, #2A2A2A 0%, #4A4A4A 100%);
}

.config-collapse-title {
    font-weight: 600;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    letter-spacing: 0.01em;
}

.config-collapse-title span:first-child {
    font-size: 1.5rem;
    line-height: 1;
}

.config-collapse-toggle {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
    font-weight: bold;
    transform: rotate(90deg); /* expanded: ▶ points down */
}

.config-collapse-toggle.collapsed {
    transform: rotate(0deg); /* collapsed: ▶ points right */
}

.config-collapse-content {
    max-height: 2000px;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 1.5rem;
}

.config-collapse-content.collapsed {
    max-height: 0;
    padding: 0 !important;
    overflow: hidden;
}

/* Colapsables del Asistente IA: limitar altura y añadir scroll interno */
#analysis-result-content,
#session-history-content {
    max-height: 380px;
    overflow-y: auto;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

#analysis-result-content.collapsed,
#session-history-content.collapsed {
    max-height: 0;
    padding: 0 !important;
    overflow: hidden;
}

/* Chat diagnóstico: altura máxima para que el input no se pierda */
#hd-chat-messages {
    max-height: calc(100vh - 340px) !important;
    min-height: 150px;
}

/* Memory Section */
.memory-section {
    background: #f9fafb;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    border: 1px solid #e5e7eb;
}

.memory-name-container {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.memory-name-container input {
    flex: 1;
    min-width: 200px;
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

.memory-actions {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.memory-collapsible {
    margin: 0;
}

.memory-collapsible .config-collapse-header {
    background: linear-gradient(135deg, #B8922A 0%, #8A6A20 100%);
    padding: 0.75rem 1.25rem;
}

.memory-collapsible .config-collapse-header:hover {
    background: linear-gradient(135deg, #A07820 0%, #7A5C18 100%);
}

.memory-collapsible .config-collapse-title {
    font-size: 0.95rem;
}

.memory-collapsible .config-collapse-toggle {
    font-size: 1rem;
}

.memory-display {
    padding: 1rem;
    background: white;
    border-radius: 6px;
    max-height: 400px;
    overflow-y: auto;
}

.memory-display pre {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #374151;
}

.memory-item {
    padding: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 0.5rem;
}

.memory-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.memory-item-header {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.memory-item-content {
    color: #6b7280;
    font-size: 0.85rem;
    line-height: 1.5;
}

.memory-item-timestamp {
    color: #9ca3af;
    font-size: 0.75rem;
    margin-top: 0.25rem;
    font-style: italic;
}

/* System Status */
.system-status {
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 0.5rem;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

.system-status pre {
    margin: 0;
    white-space: pre-wrap;
}

/* Metadata */
.metadata {
    margin-top: 1rem;
    padding: 1rem;
    background: white;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    font-size: 0.875rem;
}

/* Footer */
.app-footer {
    display: none;
}

.footer-links a {
    color: var(--primary-color);
    text-decoration: none;
    margin: 0 0.5rem;
}

.footer-links a:hover {
    text-decoration: underline;
}

/* Chat Styles */
.chat-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    margin: 1.5rem 0;
    max-height: 600px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    min-height: 400px;
    max-height: 600px;
}

.chat-message {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-radius: 0.5rem;
    animation: fadeIn 0.3s ease;
}

.chat-message.user {
    background: linear-gradient(135deg, #F0EFE9 0%, #E8E7E1 100%);
    border-left: 4px solid #1A1A1A;
    margin-left: 2rem;
}

.chat-message.assistant {
    background: linear-gradient(135deg, #EDF4F1 0%, #D9EDE7 100%);
    border-left: 4px solid #1D7A5F;
    margin-right: 2rem;
}

.chat-message.system {
    background: linear-gradient(135deg, #FBF5E6 0%, #F4E9CC 100%);
    border-left: 4px solid #B8922A;
    text-align: center;
    font-style: italic;
}

.message-content {
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.message-content strong {
    font-weight: 600;
    color: var(--text-primary);
}

.chat-input-area {
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    background: white;
}

.chat-input-area textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
    margin-bottom: 1rem;
}

.chat-input-area textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.chat-input-controls {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
    backdrop-filter: blur(4px);
}

.modal-content {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    max-width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideDown 0.3s ease;
    color: #111827;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
    flex-shrink: 0;
}

.modal-header h3 {
    margin: 0;
    color: #111827;
    font-size: 1.25rem;
}

.modal-close {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 2rem;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: #e2e8f0;
    color: #111827;
    transform: scale(1.1);
}

.modal-body {
    padding: 1.5rem;
    color: #111827;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    background: #f8fafc;
    flex-shrink: 0;
}

/* Catalog iframe modal — fullscreen */
.catalog-iframe-modal-content {
    max-width: 100% !important;
    max-height: 100vh !important;
    width: 100vw;
    height: 100vh;
    margin: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
}
.catalog-iframe-modal-header {
    padding: 0.6rem 1rem !important;
    background: linear-gradient(135deg, #1e1b4b, #312e81) !important;
    border-bottom: 1px solid rgba(99, 102, 241, 0.3) !important;
}
.catalog-iframe-modal-header h3 {
    color: #fff !important;
    font-size: 1rem !important;
}
.catalog-iframe-modal-header .modal-close {
    color: #c7d2fe !important;
}
.catalog-iframe-modal-header .modal-close:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

/* CMDB topology modal */
.cmdb-topology-modal {
    width: min(1100px, 96vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    box-shadow: 0 28px 80px rgba(2, 6, 23, 0.55);
    overflow: hidden;
}

.cmdb-topology-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, #1e293b, #334155);
}

.cmdb-topology-header span {
    color: #e2e8f0;
    font-size: 0.88rem;
    font-weight: 700;
}

.cmdb-topology-header-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.cmdb-topology-map-toggle {
    border: 1px solid rgba(56, 189, 248, 0.45);
    background: rgba(14, 165, 233, 0.14);
    color: #e0f2fe;
    cursor: pointer;
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.cmdb-topology-map-toggle:hover {
    background: rgba(14, 165, 233, 0.24);
}

.cmdb-topology-map-toggle.is-map {
    border-color: rgba(74, 222, 128, 0.55);
    background: rgba(34, 197, 94, 0.18);
    color: #dcfce7;
}

.cmdb-topology-close {
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1.05rem;
    width: 28px;
    height: 28px;
    border-radius: 6px;
}

.cmdb-topology-close:hover {
    background: rgba(148, 163, 184, 0.18);
    color: #e2e8f0;
}

.cmdb-topology-body {
    flex: 1;
    overflow: auto;
    padding: 1rem;
    background:
        radial-gradient(1200px 320px at 8% -15%, rgba(14, 165, 233, 0.09), transparent),
        radial-gradient(1200px 360px at 95% 0%, rgba(59, 130, 246, 0.08), transparent),
        var(--card-bg);
}

.cmdb-topology-loading,
.cmdb-topology-error,
.cmdb-topology-empty {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--input-bg);
    padding: 0.8rem;
    font-size: 0.8rem;
    color: #64748b;
}

.cmdb-topology-error {
    color: #dc2626;
    border-color: #fecaca;
    background: #fff1f2;
}

/* ── CMDB Slide Panel (lateral detail) ── */
.cmdb-slide-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 520px;
    max-width: 100vw;
    background: var(--bg-primary, #fff);
    border-left: 2px solid #4f46e5;
    box-shadow: -8px 0 30px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    z-index: 210;
    transform: translateX(100%);
    transition: transform 0.25s ease;
}
.cmdb-slide-panel.open {
    transform: translateX(0);
}
.cmdb-slide-panel-header {
    padding: 0.55rem 0.9rem;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border-bottom: 2px solid #4f46e5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    gap: 0.5rem;
}
.cmdb-slide-panel-close {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.3rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.cmdb-slide-panel-close:hover {
    opacity: 0.9;
}
.cmdb-slide-panel-identity {
    display: none;
    padding: 0.5rem 0.8rem;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, rgba(79,70,229,0.04), rgba(124,58,237,0.02));
    flex-shrink: 0;
}
.cmdb-slide-panel-body {
    padding: 0.6rem 0.8rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.cmdb-slide-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 200;
    display: none;
}
.cmdb-slide-backdrop.open {
    display: block;
}
@media (max-width: 640px) {
    .cmdb-slide-panel {
        width: 100vw;
    }
}

/* ── CMDB Graph Explorer ── */
.cmdb-graph-explorer-shell {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-height: clamp(560px, calc(100vh - 210px), 900px);
    height: clamp(560px, calc(100vh - 210px), 900px);
    position: relative;
    isolation: isolate;
}

.cmdb-graph-explorer-shell::before {
    content: '';
    position: absolute;
    inset: -18% -10% auto -10%;
    height: 180px;
    pointer-events: none;
    background:
        radial-gradient(50% 70% at 15% 50%, rgba(14, 165, 233, 0.26), transparent 70%),
        radial-gradient(40% 65% at 82% 55%, rgba(244, 63, 94, 0.2), transparent 72%);
    filter: blur(26px);
    opacity: 0.95;
    z-index: -1;
}

.cmdb-graph-explorer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex-shrink: 0;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, #f9fcff, #edf7ff 55%, #fef3f8);
    border: 1px solid rgba(56, 189, 248, 0.42);
    border-radius: 10px;
    box-shadow:
        inset 0 0 0 1px rgba(15, 23, 42, 0.06),
        0 10px 28px rgba(15, 23, 42, 0.1);
}

.cmdb-graph-explorer-search {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.cmdb-graph-explorer-controls {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.cmdb-graph-explorer-toolbar label,
.cmdb-graph-explorer-toolbar .cmdb-graph-depth-label,
.cmdb-graph-explorer-toolbar .cmdb-graph-status {
    color: #0f172a !important;
    text-shadow: none;
}

.cmdb-graph-explorer-toolbar input,
.cmdb-graph-explorer-toolbar select {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #93b5d4 !important;
}

.cmdb-graph-explorer-toolbar input::placeholder {
    color: #64748b !important;
    opacity: 0.95;
}

.cmdb-graph-explorer-toolbar select option {
    background: #ffffff;
    color: #0f172a;
}

.cmdb-graph-explorer-toolbar input:focus,
.cmdb-graph-explorer-toolbar select:focus {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2);
}

.cmdb-graph-explorer-toolbar .btn,
.cmdb-graph-explorer-toolbar button {
    color: #f8fafc;
}

.cmdb-graph-explorer-main {
    display: flex;
    flex: 1 1 auto;
    gap: 0;
    border: 1px solid rgba(148, 163, 184, 0.45);
    border-radius: 12px;
    overflow: hidden;
    min-height: 0;
    height: 100%;
    background: linear-gradient(180deg, #f8fcff, #eef5ff);
}

.cmdb-graph-canvas {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
    height: 100%;
    background:
        radial-gradient(1200px 280px at 8% -12%, rgba(56, 189, 248, 0.2), transparent),
        radial-gradient(1100px 320px at 95% 0%, rgba(244, 63, 94, 0.18), transparent),
        linear-gradient(160deg, #f8fcff 0%, #eef7ff 54%, #fef2f8 100%);
    border-radius: 0 0 12px 12px;
    box-shadow: inset 0 0 38px rgba(14, 116, 144, 0.15);
    animation: cmdb-graph-glow-shift 11s ease-in-out infinite;
}

@keyframes cmdb-graph-glow-shift {
    0%, 100% {
        background-position: 0% 50%, 100% 0%, 0 0;
    }
    50% {
        background-position: 8% 44%, 92% 8%, 0 0;
    }
}

#cmdb-graph-status {
    color: #334155 !important;
}

.cmdb-graph-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    text-align: center;
    color: #475569;
    font-size: 0.84rem;
    text-align: center;
    max-width: 340px;
    line-height: 1.5;
}

.cmdb-graph-sidebar {
    width: 280px;
    flex-shrink: 0;
    border-left: 1px solid #cbd5e1;
    background: linear-gradient(180deg, #f8fbff, #eef6ff);
    overflow-y: auto;
    max-height: none;
    height: 100%;
}

@media (max-width: 1180px) {
    .cmdb-graph-explorer-shell {
        min-height: clamp(500px, calc(100vh - 180px), 760px);
        height: clamp(500px, calc(100vh - 180px), 760px);
    }
}

@media (max-width: 900px) {
    .cmdb-graph-explorer-shell {
        min-height: 520px;
        height: auto;
    }

    .cmdb-graph-explorer-main {
        min-height: 430px;
    }
}

@media (max-width: 760px) {
    .cmdb-graph-explorer-main {
        flex-direction: column;
    }

    .cmdb-graph-canvas {
        min-height: 360px;
        height: 360px;
        border-radius: 0;
    }

    .cmdb-graph-sidebar {
        width: 100%;
        border-left: none;
        border-top: 1px solid #cbd5e1;
        max-height: 240px;
        height: auto;
    }
}

.cmdb-graph-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #cbd5e1;
    font-weight: 700;
    font-size: 0.82rem;
    color: #0f172a;
}

.cmdb-graph-sidebar-body-row {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0.75rem;
    font-size: 0.74rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.45);
}

.cmdb-graph-sidebar-body-row .k {
    color: #475569;
    min-width: 70px;
}

.cmdb-graph-sidebar-body-row .v {
    color: #0f172a;
    text-align: right;
    word-break: break-all;
    max-width: 160px;
}

/* Graph stage (radial layout) */
.cmdb-graph-stage {
    position: relative;
    margin: 0 auto;
}

.cmdb-graph-center-node {
    position: absolute;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff;
    border-radius: 50%;
    width: 110px;
    height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 0 24px rgba(124, 58, 237, 0.4);
    z-index: 5;
    cursor: default;
    padding: 0.3rem;
}

.cmdb-graph-center-node .ttl {
    font-weight: 800;
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 96px;
}

.cmdb-graph-center-node .sub {
    font-size: 0.6rem;
    opacity: 0.85;
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmdb-graph-node {
    position: absolute;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    padding: 0.35rem 0.6rem;
    min-width: 80px;
    max-width: 150px;
    text-align: center;
    font-size: 0.7rem;
    cursor: pointer;
    border: 1.5px solid;
    z-index: 4;
    transition: box-shadow 0.15s, transform 0.15s;
    background: #ffffff;
}

.cmdb-graph-node:hover {
    transform: translate(-50%, -50%) scale(1.08);
    z-index: 10;
}

.cmdb-graph-node .ttl {
    font-weight: 700;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmdb-graph-node .sub {
    display: block;
    font-size: 0.6rem;
    opacity: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Node type colors */
.cmdb-graph-node.ci-device     { border-color: #3b82f6; color: #93c5fd; box-shadow: 0 0 10px rgba(59, 130, 246, 0.2); }
.cmdb-graph-node.ci-user       { border-color: #22c55e; color: #86efac; box-shadow: 0 0 10px rgba(34, 197, 94, 0.2); }
.cmdb-graph-node.ci-software   { border-color: #f97316; color: #fdba74; box-shadow: 0 0 10px rgba(249, 115, 22, 0.2); }
.cmdb-graph-node.ci-service    { border-color: #a855f7; color: #d8b4fe; box-shadow: 0 0 10px rgba(168, 85, 247, 0.2); }
.cmdb-graph-node.ci-network    { border-color: #06b6d4; color: #67e8f9; box-shadow: 0 0 10px rgba(6, 182, 212, 0.2); }
.cmdb-graph-node.ci-default    { border-color: #64748b; color: #cbd5e1; box-shadow: 0 0 10px rgba(100, 116, 139, 0.2); }

/* Edge lines */
.cmdb-graph-edge {
    position: absolute;
    height: 2px;
    transform-origin: 0 50%;
    z-index: 1;
    pointer-events: none;
}

.cmdb-graph-edge.rel-depends_on     { background: #f97316; }
.cmdb-graph-edge.rel-runs_on        { background: #3b82f6; }
.cmdb-graph-edge.rel-owned_by       { background: #22c55e; }
.cmdb-graph-edge.rel-connected_to   { background: #06b6d4; }
.cmdb-graph-edge.rel-member_of      { background: #a855f7; }
.cmdb-graph-edge.rel-default        { background: #475569; }

.cmdb-graph-edge-label {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: 0.56rem;
    color: #334155;
    background: rgba(255, 255, 255, 0.92);
    padding: 0 0.2rem;
    border-radius: 3px;
    z-index: 2;
    pointer-events: none;
    white-space: nowrap;
}

/* Truncation banner */
.cmdb-graph-truncated {
    background: rgba(245, 158, 11, 0.18);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #92400e;
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    font-size: 0.74rem;
    text-align: center;
    margin-bottom: 0.5rem;
}

/* ── SVG Graph — Neo4j Bloom Style ── */
.gr-svg {
    display: block;
    margin: 0 auto;
    cursor: grab;
    user-select: none;
    background: radial-gradient(ellipse at 50% 50%, #1a1a2e 0%, #0d0d1a 50%, #050510 100%);
    border-radius: 12px;
    border: 1px solid #1f1f3a;
}
.gr-svg:active { cursor: grabbing; }

.gr-edge {
    stroke-linecap: round;
    transition: opacity 0.3s;
}
.gr-edge-group {
    stroke-dasharray: none;
}

.gr-node { cursor: pointer; transition: transform 0.2s ease, filter 0.2s; }
.gr-node:hover { transform: scale(1.12); z-index: 100; }
.gr-node.gr-dragging { cursor: grabbing; }

/* Center node — large with intense glow */
.gr-node.gr-center circle {
    filter: drop-shadow(0 0 18px var(--node-glow, rgba(100,200,255,0.6)))
            drop-shadow(0 0 6px var(--node-glow, rgba(100,200,255,0.3)));
}
.gr-node.gr-center .gr-center-ring {
    fill: none;
    animation: gr-bloom-pulse 3s ease-in-out infinite;
}
@keyframes gr-bloom-pulse {
    0%, 100% { opacity: 0.25; stroke-width: 2; }
    50% { opacity: 0.6; stroke-width: 3.5; }
}

/* Group nodes — glow + hover bloom */
.gr-node.gr-group circle {
    filter: drop-shadow(0 0 12px rgba(255,255,255,0.15))
            drop-shadow(0 0 4px rgba(255,255,255,0.1));
    transition: all 0.25s;
}
.gr-node.gr-group:hover circle {
    filter: drop-shadow(0 0 22px rgba(255,255,255,0.4))
            drop-shadow(0 0 8px rgba(255,255,255,0.2));
}

/* Child nodes — subtle glow, hover bloom */
.gr-node.gr-child circle,
.gr-node.gr-child rect,
.gr-node.gr-child polygon {
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.1));
    transition: all 0.2s;
}
.gr-node.gr-child:hover circle,
.gr-node.gr-child:hover rect,
.gr-node.gr-child:hover polygon {
    filter: drop-shadow(0 0 16px rgba(255,255,255,0.4))
            drop-shadow(0 0 6px rgba(255,255,255,0.2));
}

/* Labels — always visible, white, clean */
.gr-icon {
    font-size: 16px;
    fill: #fff;
    dominant-baseline: middle;
}
.gr-child-icon {
    font-size: 11px;
    fill: #fff;
    dominant-baseline: middle;
}
.gr-label {
    font-size: 11px;
    fill: #e8e8f0;
    font-weight: 700;
    letter-spacing: 0.02em;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.9));
}
.gr-child-label {
    font-size: 8.5px;
    fill: #c8c8e0;
    opacity: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
    pointer-events: none;
}
.gr-count {
    font-size: 12px;
    fill: #fff;
    font-weight: 800;
}
.gr-type-label {
    font-size: 9.5px;
    fill: #a0a0c0;
    font-weight: 600;
    text-transform: capitalize;
}
.gr-expand-hint {
    font-size: 11px;
    fill: #fbbf24;
    font-weight: 700;
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.7));
}

/* Truncation banner */
.cmdb-graph-truncated {
    background: linear-gradient(135deg, #451a03, #78350f);
    color: #fcd34d;
    font-size: 0.75rem;
    padding: 0.4rem 0.8rem;
    border-radius: 8px 8px 0 0;
    text-align: center;
    border-bottom: 1px solid #92400e;
}

/* Breadcrumb navigation */
.gr-breadcrumb {
    background: linear-gradient(135deg, #1e1b4b, #312e81);
    color: #c7d2fe;
    font-size: 0.75rem;
    padding: 0.4rem 0.8rem;
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid #4338ca;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}
.gr-crumb {
    cursor: pointer;
    color: #a5b4fc;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.gr-crumb:hover { color: #fff; }
.gr-crumb-active {
    color: #fff;
    font-weight: 700;
}

/* Sub-level edges */
.gr-edge-sub {
    stroke: #475569;
    stroke-width: 1;
    opacity: 0.3;
    stroke-dasharray: 3 2;
}

/* Nodes with expandable children */
.gr-node.gr-has-children circle {
    stroke: #fbbf24 !important;
    stroke-width: 2.5 !important;
}
.gr-node.gr-has-children:hover circle {
    filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.5));
}

/* Sub-level nodes (smaller) */
.gr-node.gr-sub circle {
    opacity: 0.8;
}
.gr-node.gr-sub .gr-child-label {
    font-size: 7px;
}

/* Legend bar for relation types */
.gr-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    background: #1e293b;
    border-bottom: 1px solid #334155;
}
.gr-legend-pill {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border: 1.5px solid #64748b;
    border-radius: 12px;
    color: #cbd5e1;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}
.gr-legend-pill:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.gr-legend-pill.active {
    color: #fff;
    font-weight: 600;
}

/* Depth-2 nodes */
.gr-node.gr-depth2 .gr-child-label {
    font-size: 7.5px;
    opacity: 0.8;
}

/* Impact mode highlight */
.cmdb-graph-canvas.impact-mode {
    background:
    radial-gradient(1200px 320px at 8% -15%, rgba(220, 38, 38, 0.2), transparent),
    radial-gradient(1200px 360px at 95% 0%, rgba(251, 113, 133, 0.18), transparent),
    linear-gradient(165deg, #fff7f7 0%, #ffeef0 58%, #fff7f7 100%);
}

.cmdb-graph-canvas.impact-mode .cmdb-graph-center-node {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 0 24px rgba(220, 38, 38, 0.5);
}

/* Search results dropdown */
.cmdb-graph-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0 0 8px 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 20;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.cmdb-graph-search-item {
    padding: 0.45rem 0.65rem;
    font-size: 0.78rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(148, 163, 184, 0.35);
    color: #0f172a;
}

.cmdb-graph-search-item:hover {
    background: rgba(14, 165, 233, 0.11);
}

.cmdb-graph-search-item .type-badge {
    display: inline-block;
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    margin-right: 0.3rem;
    text-transform: uppercase;
}

/* ── Neural Network (GNN) — 3-Panel Layout ── */
.nn-layout {
    display: grid;
    grid-template-columns: minmax(190px, 15vw) 1fr minmax(220px, 18vw);
    gap: 0;
    border: 1px solid rgba(56, 189, 248, 0.34);
    border-radius: 12px;
    overflow: hidden;
    background: radial-gradient(220% 140% at 50% -20%, #f8fcff, #edf6ff 58%, #eef2ff 100%);
    min-height: clamp(600px, calc(100vh - 210px), 900px);
    height: clamp(600px, calc(100vh - 210px), 900px);
    box-shadow:
        0 14px 30px rgba(15, 23, 42, 0.1),
        inset 0 0 0 1px rgba(14, 165, 233, 0.12);
}
@media (max-width: 900px) {
    .nn-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(440px, 1fr) auto;
        min-height: 620px;
        height: auto;
    }
}

/* Left panel */
.nn-panel-left {
    background: linear-gradient(180deg, #0f172a, #1e1b4b);
    border-right: 1px solid #334155;
    padding: 0;
    overflow-y: auto;
    max-height: none;
    min-height: 0;
    height: 100%;
    transition: width 0.3s ease, min-width 0.3s ease;
    scrollbar-width: thin;
}
.nn-panel-left.nn-collapsed { width: 38px !important; min-width: 38px !important; max-width: 38px !important; overflow: hidden; }
.nn-panel-left.nn-collapsed .nn-panel-body { display: none; }
.nn-panel-left.nn-collapsed .nn-panel-toggle { justify-content: center; }
.nn-panel-left.nn-collapsed .nn-panel-toggle-label { writing-mode: vertical-rl; text-orientation: mixed; font-size: 0.65rem; }
.nn-panel-left.nn-collapsed .nn-panel-toggle-arrow { transform: rotate(180deg); }
.nn-panel-toggle {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.6rem 0.75rem; cursor: pointer; background: rgba(99, 102, 241, 0.1);
    border-bottom: 1px solid #334155; user-select: none; transition: background 0.15s;
}
.nn-panel-toggle:hover { background: rgba(99, 102, 241, 0.2); }
.nn-panel-toggle-label { font-size: 0.72rem; font-weight: 600; color: #a5b4fc; }
.nn-panel-toggle-arrow { color: #64748b; font-size: 0.7rem; transition: transform 0.2s; }
.nn-panel-body { padding: 0.6rem 0.7rem; }
.nn-ctrl-section { margin-bottom: 0.7rem; border-bottom: 1px solid #1e293b; padding-bottom: 0.6rem; }
.nn-ctrl-section:last-child { border-bottom: none; }
.nn-ctrl-label {
    display: block;
    font-size: 0.62rem;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.nn-input, .nn-select {
    width: 100%;
    padding: 0.4rem 0.55rem;
    border-radius: 6px;
    border: 1px solid #475569;
    background: #0f172a;
    color: #f1f5f9;
    font-size: 0.72rem;
    outline: none;
    box-sizing: border-box;
}
.nn-input:focus, .nn-select:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.15);
}
.nn-hier-type-list {
    list-style: none; padding: 0; margin: 0;
}
.nn-hier-type-item {
    display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.45rem;
    border-radius: 6px; cursor: pointer; font-size: 0.68rem; color: #cbd5e1;
    transition: all 0.15s; margin-bottom: 2px;
}
.nn-hier-type-item:hover { background: rgba(255,255,255,0.05); }
.nn-hier-type-item.expanded { background: rgba(99,102,241,0.12); border-left: 2px solid currentColor; padding-left: 0.35rem; }
.nn-hier-type-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.nn-hier-type-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.nn-hier-type-count { margin-left: auto; color: #475569; font-size: 0.6rem; font-weight: 500; }
.nn-hier-actions { display: flex; flex-direction: column; gap: 0.3rem; }
.nn-btn {
    width: 100%;
    padding: 0.4rem;
    border: none;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.nn-btn-ghost { background: transparent; color: #94a3b8; border: 1px solid #334155; }
.nn-btn-ghost:hover { background: #1e293b; color: #e2e8f0; }
.nn-btn-primary { background: #4f46e5; color: white; }
.nn-btn-primary:hover { background: #6366f1; }
.nn-btn-admin {
    background: linear-gradient(135deg, #db2777, #7c3aed);
    color: #ffffff;
}
.nn-btn-admin:hover { filter: brightness(1.06); }
.nn-stats-panel {
    font-size: 0.62rem;
    color: #94a3b8;
    padding: 0.4rem;
    border-top: 1px solid #1e293b;
    margin-top: 0.5rem;
    line-height: 1.6;
}
.nn-stats-panel strong { color: #a5b4fc; }
.nn-search-results {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #475569;
    border-radius: 6px;
    background: #0f172a;
    display: none;
}
.nn-search-results.active { display: block; }
.nn-search-item {
    padding: 0.3rem 0.5rem;
    font-size: 0.68rem;
    color: #e2e8f0;
    cursor: pointer;
    border-bottom: 1px solid rgba(51, 65, 85, 0.5);
}
.nn-search-item:hover { background: rgba(99, 102, 241, 0.12); color: #f1f5f9; }
.nn-search-item .nn-si-type {
    display: inline-block;
    font-size: 0.58rem;
    padding: 0.05rem 0.25rem;
    border-radius: 4px;
    margin-right: 0.3rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Center panel */
.nn-panel-center {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background:
        radial-gradient(70% 85% at 20% -5%, rgba(244, 63, 94, 0.24), transparent 66%),
        radial-gradient(80% 90% at 85% 0%, rgba(56, 189, 248, 0.2), transparent 68%),
        radial-gradient(ellipse at 50% 52%, #ffffff 0%, #f0f8ff 54%, #e7f2ff 100%);
}
#nn-3d-container {
    flex: 1;
    min-height: 0;
    height: 100%;
    position: relative;
}
.nn-legend {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    gap: 0.3rem;
    padding: 0.35rem 0.6rem;
    background: rgba(255, 255, 255, 0.9);
    border-top: 1px solid #d7e2f0;
}
.nn-legend-pill {
    font-size: 0.6rem;
    padding: 0.12rem 0.4rem;
    border-radius: 10px;
    color: #1f2937;
    background: #f8fbff;
    border: 1px solid rgba(148, 163, 184, 0.35);
    font-weight: 600;
}

/* Right panel */
.nn-panel-right {
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(238, 246, 255, 0.98));
    border-left: 1px solid rgba(56, 189, 248, 0.26);
    padding: 0.7rem;
    overflow-y: auto;
    max-height: none;
    min-height: 0;
    height: 100%;
}

@media (max-width: 640px) {
    .nn-layout {
        min-height: 560px;
    }

    #nn-3d-container {
        min-height: 340px;
        height: 340px;
    }
}
.nn-detail-placeholder {
    color: #64748b;
    font-size: 0.72rem;
    text-align: center;
    padding: 2rem 0.5rem;
}
.nn-detail-header {
    font-size: 0.82rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.4rem;
    word-break: break-all;
}
.nn-detail-type {
    font-size: 0.62rem;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 0.5rem;
}
.nn-detail-section {
    margin-bottom: 0.6rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #dbe4f0;
}
.nn-detail-section-title {
    font-size: 0.65rem;
    color: #475569;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
}
.nn-similar-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0;
    font-size: 0.68rem;
    color: #334155;
    cursor: pointer;
}
.nn-similar-item:hover { color: #0f172a; }
.nn-similar-score {
    font-size: 0.6rem;
    color: #db2777;
    font-weight: 700;
    min-width: 2.5rem;
}
.nn-cluster-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 700;
    background: #ede9fe;
    color: #5b21b6;
}

/* Tooltip (shared) */
.cmdb-nn-tooltip {
    position: absolute;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
    font-size: 0.72rem;
    color: #1f2937;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
    z-index: 50;
    max-width: 220px;
    line-height: 1.4;
}
.cmdb-nn-tooltip .nn-tt-type {
    font-size: 0.62rem;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0.8;
    margin-bottom: 2px;
}
.cmdb-nn-tooltip .nn-tt-name {
    font-weight: 700;
    font-size: 0.78rem;
    color: #0f172a;
}

/* ── CMDB KPI Cards ── */
.cmdb-kpi {
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    text-align: center;
    transition: box-shadow 0.2s;
}
.cmdb-kpi:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

/* ── CMDB Tabs ── */
.cmdb-tab {
    padding: 0.45rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    user-select: none;
}
.cmdb-tab:hover { color: var(--text-primary); }
.cmdb-tab.active { color: #4f46e5; border-bottom-color: #4f46e5; }

/* ── CMDB Operator Cockpit Layout ── */
.cmdb-cockpit-shell {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.cmdb-cockpit-top {
    display: flex;
    flex-direction: column;
}

.cmdb-cockpit-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: 0.75rem;
    align-items: start;
}

.cmdb-cockpit-workspace {
    min-width: 0;
}

.cmdb-cockpit-inventory-wrap {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.cmdb-cockpit-rail {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    position: sticky;
    top: 0.45rem;
}

.cmdb-cockpit-rail-card {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.65rem 0.7rem;
    background: var(--card-bg);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.cmdb-cockpit-action-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.cmdb-cockpit-action-list .btn {
    width: 100%;
    justify-content: flex-start;
}

.cmdb-cockpit-state-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.cmdb-cockpit-state {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.13rem 0.48rem;
    border: 1px solid transparent;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.cmdb-cockpit-state-ok {
    background: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
}

.cmdb-cockpit-state-warning {
    background: #fffbeb;
    color: #92400e;
    border-color: #fde68a;
}

.cmdb-cockpit-state-critical {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.cmdb-cockpit-state-running {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

@media (max-width: 1180px) {
    .cmdb-cockpit-main {
        grid-template-columns: 1fr;
    }

    .cmdb-cockpit-rail {
        position: static;
    }
}

@media (max-width: 760px) {
    .cmdb-cockpit-rail-card {
        padding: 0.55rem 0.6rem;
    }

    .cmdb-cockpit-action-list .btn {
        font-size: 0.72rem !important;
    }
}

.cmdb-kpi .val {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}
.cmdb-kpi .lbl {
    font-size: 0.68rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.cmdb-kpi-alert .val { color: #ef4444; }
.cmdb-kpi-alert { border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.04); }

/* ── CMDB Visual Refresh ── */
.hd-cmdb-page {
    position: relative;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 16px;
    padding: 0.45rem 0.5rem 0.7rem;
    background:
        radial-gradient(1100px 260px at 7% -10%, rgba(14, 165, 233, 0.16), transparent),
        radial-gradient(900px 250px at 95% -25%, rgba(34, 197, 94, 0.10), transparent),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.98));
    overflow: clip;
}

.hd-cmdb-page::before,
.hd-cmdb-page::after {
    content: '';
    position: absolute;
    pointer-events: none;
    border-radius: 999px;
    opacity: 0.35;
}

.hd-cmdb-page::before {
    width: 280px;
    height: 280px;
    right: -120px;
    top: -145px;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.45) 0%, rgba(14, 165, 233, 0) 72%);
}

.hd-cmdb-page::after {
    width: 260px;
    height: 260px;
    left: -140px;
    bottom: -150px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.25) 0%, rgba(251, 191, 36, 0) 72%);
}

.cmdb-hero-title,
.cmdb-hero-subtitle,
.cmdb-tabs-bar,
.cmdb-cockpit-shell {
    position: relative;
    z-index: 1;
}

.cmdb-hero-title {
    margin-bottom: 0.2rem;
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: 0.01em;
}

.cmdb-hero-subtitle {
    margin: 0 0 0.75rem;
    color: #475569;
    font-size: 0.82rem;
    line-height: 1.45;
}

.cmdb-tabs-bar {
    border: 1px solid rgba(148, 163, 184, 0.32) !important;
    border-radius: 12px;
    padding: 0.22rem;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(8px);
    margin-bottom: 0.8rem !important;
}

.cmdb-tabs-bar .cmdb-tab {
    border-radius: 9px;
    border-bottom: none;
    padding: 0.5rem 0.9rem;
    color: #475569;
}

.cmdb-tabs-bar .cmdb-tab:hover {
    color: #0f172a;
    background: rgba(15, 23, 42, 0.06);
}

.cmdb-tabs-bar .cmdb-tab.active {
    color: #0c4a6e;
    border-bottom: none;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(34, 197, 94, 0.14));
    box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.24);
}

.hd-cmdb-page .cmdb-cockpit-shell {
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 14px;
    padding: 0.7rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.94));
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.hd-cmdb-page .cmdb-kpi {
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: cmdbKpiIn 0.35s ease both;
}

.hd-cmdb-page .cmdb-kpi:nth-child(2) { animation-delay: 0.03s; }
.hd-cmdb-page .cmdb-kpi:nth-child(3) { animation-delay: 0.06s; }
.hd-cmdb-page .cmdb-kpi:nth-child(4) { animation-delay: 0.09s; }
.hd-cmdb-page .cmdb-kpi:nth-child(5) { animation-delay: 0.12s; }
.hd-cmdb-page .cmdb-kpi:nth-child(6) { animation-delay: 0.15s; }

.hd-cmdb-page .cmdb-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}

.hd-cmdb-page .cmdb-kpi .val {
    color: #0f172a;
    text-shadow: none;
}

.hd-cmdb-page .cmdb-kpi .lbl {
    letter-spacing: 0.02em;
    color: #475569;
}

.hd-cmdb-page .cmdb-kpi-alert {
    background: linear-gradient(145deg, #fff1f2, #fff7ed);
    border-color: rgba(239, 68, 68, 0.35);
}

.hd-cmdb-page #cmdb-alert-banner {
    border-radius: 12px !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    background:
        linear-gradient(135deg, rgba(254, 226, 226, 0.72), rgba(255, 241, 242, 0.86)) !important;
    box-shadow: 0 8px 18px rgba(239, 68, 68, 0.16);
}

.hd-cmdb-page .cmdb-cockpit-workspace,
.hd-cmdb-page .cmdb-cockpit-rail {
    min-width: 0;
}

.hd-cmdb-page .cmdb-cockpit-inventory-wrap {
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    border-left: 3px solid #0284c7 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.9);
}

.hd-cmdb-page .cmdb-cockpit-inventory-wrap > div:first-child {
    background: linear-gradient(135deg, #0f172a, #164e63) !important;
    border-bottom: 2px solid rgba(14, 165, 233, 0.28) !important;
}

.hd-cmdb-page .cmdb-cockpit-rail {
    gap: 0.7rem;
}

.hd-cmdb-page .cmdb-cockpit-rail-card {
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07);
}

.hd-cmdb-page #cmdb-host-bar {
    border-radius: 10px !important;
    border-color: rgba(51, 65, 85, 0.55) !important;
    background: linear-gradient(145deg, #0f172a, #164e63) !important;
}

.hd-cmdb-page .cmdb-cockpit-action-list .btn {
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}

.hd-cmdb-page .cmdb-cockpit-state {
    font-size: 0.65rem;
    padding: 0.16rem 0.52rem;
}

.hd-cmdb-page .cmdb-activity-shell,
.hd-cmdb-page .cmdb-chat-shell {
    border: 1px solid rgba(148, 163, 184, 0.36) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.hd-cmdb-page .cmdb-chat-shell {
    padding: 0.8rem;
}

.hd-cmdb-page #cmdb-chat-history {
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 10px;
    padding: 0.55rem;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.9), rgba(255, 255, 255, 0.95));
}

.hd-cmdb-page #cmdb-panel-chat-ia input {
    border-radius: 9px !important;
    border-color: rgba(148, 163, 184, 0.42) !important;
}

.hd-cmdb-page #cmdb-panel-chat-ia .btn {
    border-radius: 9px;
}

.graph-cockpit-shell {
    border: 1px solid rgba(148, 163, 184, 0.36);
    border-radius: 12px;
    background: linear-gradient(168deg, rgba(248, 250, 252, 0.96), rgba(239, 246, 255, 0.92));
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    padding: 0.8rem;
}

.graph-cockpit-topbar {
    display: flex;
    gap: 0.7rem;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 0.65rem;
}

.graph-cockpit-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.45rem;
    flex: 1;
    min-width: 280px;
}

.graph-cockpit-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.graph-cockpit-field span {
    font-size: 0.7rem;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}

.graph-cockpit-field input,
.graph-cockpit-field select {
    border: 1px solid rgba(148, 163, 184, 0.42);
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.79rem;
    padding: 0.35rem 0.5rem;
}

.graph-cockpit-field-mini {
    max-width: 140px;
}

.graph-cockpit-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.graph-cockpit-actions .btn {
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    font-size: 0.76rem;
    padding: 0.34rem 0.7rem;
    font-weight: 700;
}

.graph-cockpit-status {
    border: 1px solid rgba(148, 163, 184, 0.34);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    color: #334155;
    font-size: 0.76rem;
    padding: 0.4rem 0.55rem;
    margin-bottom: 0.65rem;
}

.graph-cockpit-status.is-ok {
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(220, 252, 231, 0.72);
    color: #166534;
}

.graph-cockpit-status.is-warn {
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(254, 243, 199, 0.74);
    color: #92400e;
}

.graph-cockpit-status.is-error {
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(254, 226, 226, 0.74);
    color: #991b1b;
}

.graph-cockpit-status.is-info {
    border-color: rgba(14, 165, 233, 0.44);
    background: rgba(224, 242, 254, 0.76);
    color: #0c4a6e;
}

.graph-cockpit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.graph-cockpit-card {
    border: 1px solid rgba(148, 163, 184, 0.34);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    overflow: hidden;
}

.graph-cockpit-card h3 {
    margin: 0;
    padding: 0.5rem 0.65rem;
    font-size: 0.76rem;
    color: #0f172a;
    border-bottom: 1px solid rgba(148, 163, 184, 0.26);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.graph-cockpit-body {
    padding: 0.6rem;
    font-size: 0.78rem;
    color: #1f2937;
}

.graph-cockpit-card-wide {
    grid-column: 1 / -1;
}

.graph-cockpit-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
}

.graph-cockpit-kpi {
    border: 1px solid rgba(14, 165, 233, 0.24);
    border-radius: 8px;
    background: linear-gradient(145deg, #ffffff, #eff6ff);
    padding: 0.45rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.graph-cockpit-kpi span {
    font-size: 0.68rem;
    color: #475569;
}

.graph-cockpit-kpi strong {
    font-size: 1.02rem;
    color: #0c4a6e;
}

.graph-cockpit-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
}

.graph-cockpit-pill {
    border-radius: 999px;
    border: 1px solid rgba(14, 165, 233, 0.25);
    background: rgba(239, 246, 255, 0.9);
    color: #0c4a6e;
    font-size: 0.7rem;
    padding: 0.16rem 0.5rem;
}

.graph-cockpit-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.graph-cockpit-mini-grid > div {
    border: 1px dashed rgba(148, 163, 184, 0.45);
    border-radius: 8px;
    padding: 0.38rem 0.48rem;
    background: rgba(248, 250, 252, 0.88);
}

.graph-cockpit-mini-grid strong {
    font-size: 0.68rem;
    color: #64748b;
    text-transform: uppercase;
}

.graph-cockpit-mini-grid div > div {
    color: #0f172a;
    font-weight: 700;
    margin-top: 0.18rem;
    word-break: break-word;
}

.graph-cockpit-list {
    display: grid;
    gap: 0.3rem;
    margin-top: 0.35rem;
}

.graph-cockpit-list > strong {
    font-size: 0.72rem;
    color: #334155;
}

.graph-cockpit-list > div {
    display: flex;
    justify-content: space-between;
    gap: 0.45rem;
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 7px;
    padding: 0.3rem 0.45rem;
    background: rgba(255, 255, 255, 0.9);
}

.graph-cockpit-list small {
    color: #64748b;
}

.graph-cockpit-bars {
    display: grid;
    gap: 0.34rem;
}

.graph-cockpit-bar-row {
    display: grid;
    grid-template-columns: 1.7fr 1fr auto;
    gap: 0.45rem;
    align-items: center;
}

.graph-cockpit-bar-label {
    font-size: 0.72rem;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.graph-cockpit-bar-track {
    height: 9px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.3);
    overflow: hidden;
}

.graph-cockpit-bar-track span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #0ea5e9, #06b6d4);
}

.graph-cockpit-bar-value {
    font-size: 0.72rem;
    color: #0c4a6e;
    font-weight: 700;
}

.graph-cockpit-table-wrap {
    overflow-x: auto;
}

.graph-cockpit-heatmap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
}

.graph-cockpit-heatmap-table th,
.graph-cockpit-heatmap-table td {
    border: 1px solid rgba(148, 163, 184, 0.3);
    padding: 0.34rem 0.4rem;
    text-align: center;
}

.graph-cockpit-heatmap-table th {
    background: rgba(241, 245, 249, 0.9);
    color: #334155;
    font-weight: 700;
}

.graph-cockpit-heatmap-table td {
    color: #0f172a;
    min-width: 72px;
}

.graph-cockpit-heatmap-table td span {
    display: block;
    font-weight: 700;
}

.graph-cockpit-heatmap-table td small {
    display: block;
    margin-top: 0.1rem;
    color: rgba(15, 23, 42, 0.76);
}

.graph-cockpit-empty {
    font-size: 0.76rem;
    color: #64748b;
    padding: 0.1rem 0;
}

@keyframes cmdbKpiIn {
    from {
        transform: translateY(4px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 860px) {
    .hd-cmdb-page {
        padding: 0.35rem;
        border-radius: 12px;
    }

    .cmdb-hero-title {
        font-size: 1.15rem;
    }

    .cmdb-hero-subtitle {
        font-size: 0.76rem;
        margin-bottom: 0.55rem;
    }

    .cmdb-tabs-bar .cmdb-tab {
        flex: 1;
        text-align: center;
        font-size: 0.75rem;
        padding: 0.45rem 0.4rem;
    }

    .hd-cmdb-page .cmdb-cockpit-shell {
        padding: 0.55rem;
    }

    .graph-cockpit-grid {
        grid-template-columns: 1fr;
    }

    .graph-cockpit-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .graph-cockpit-mini-grid {
        grid-template-columns: 1fr;
    }

    .graph-cockpit-bar-row {
        grid-template-columns: 1fr;
    }
}

/* ── CMDB Expanded user activity panel ── */
.cmdb-user-activity {
    padding: 0.75rem;
    background: var(--bg-secondary, #f8fafc);
    border-top: 1px solid var(--border-color);
}
.cmdb-user-activity .act-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
@media (max-width: 768px) {
    .cmdb-user-activity .act-grid { grid-template-columns: 1fr; }
}
.cmdb-user-activity .act-section {
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
}
.cmdb-user-activity .act-section h4 {
    margin: 0 0 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.cmdb-user-activity .sec-check {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    padding: 0.15rem 0;
}
.cmdb-user-activity .bar-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.76rem;
    padding: 0.1rem 0;
}
.cmdb-user-activity .bar-row .bar {
    flex: 1;
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    overflow: hidden;
}
.cmdb-user-activity .bar-row .bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

.cmdb-top-user-card {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(30, 41, 59, 0.75));
    padding: 0.8rem;
    margin-bottom: 0.85rem;
}

.cmdb-top-user-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.cmdb-top-user-header .avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
}

.cmdb-top-user-header .name {
    color: #e2e8f0;
    font-size: 0.86rem;
    font-weight: 700;
}

.cmdb-top-user-header .meta {
    color: #94a3b8;
    font-size: 0.72rem;
}

.cmdb-top-user-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.6rem;
}

.cmdb-top-user-pill {
    border: 1px solid #334155;
    color: #cbd5e1;
    background: rgba(15, 23, 42, 0.42);
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    font-size: 0.68rem;
    white-space: nowrap;
}

.cmdb-top-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.65rem;
}

.cmdb-top-stats span {
    background: rgba(2, 132, 199, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.38);
    color: #e0f2fe;
    border-radius: 8px;
    padding: 0.12rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 600;
}

.cmdb-top-tree {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cmdb-top-map-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.cmdb-top-map-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    border-radius: 10px;
    padding: 0.45rem 0.6rem;
}

.cmdb-top-map-toolbar strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.78rem;
}

.cmdb-top-map-toolbar span {
    color: #64748b;
    font-size: 0.69rem;
}

.cmdb-top-map-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.cmdb-top-map-hint {
    color: #64748b;
    font-size: 0.67rem;
    font-weight: 600;
}

.cmdb-top-map-back {
    border: 1px solid var(--border-color);
    background: #fff;
    color: #0f172a;
    border-radius: 8px;
    padding: 0.2rem 0.55rem;
    font-size: 0.67rem;
    font-weight: 700;
    cursor: pointer;
}

.cmdb-top-map-canvas-wrap {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background:
        radial-gradient(860px 240px at 20% 5%, rgba(59, 130, 246, 0.1), transparent),
        radial-gradient(860px 260px at 82% 85%, rgba(14, 165, 233, 0.1), transparent),
        var(--card-bg);
    overflow: auto;
    padding: 0.5rem;
}

.cmdb-top-map-stage {
    position: relative;
    margin: 0 auto;
    min-width: 720px;
}

.cmdb-top-map-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 262px;
    min-height: 160px;
    border-radius: 14px;
    border: 1px solid rgba(59, 130, 246, 0.45);
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.88));
    box-shadow: 0 16px 30px rgba(2, 6, 23, 0.35);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0.18rem;
    text-align: center;
    padding: 0.45rem 0.58rem;
    z-index: 3;
}

.cmdb-top-map-center .ttl {
    color: #f8fafc;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.cmdb-top-map-center .sub {
    color: #bae6fd;
    font-size: 0.67rem;
    font-weight: 700;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.cmdb-top-map-center .meta {
    color: #94a3b8;
    font-size: 0.62rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.cmdb-top-map-center .details {
    width: 100%;
    margin-top: 0.18rem;
    border-top: 1px solid rgba(148, 163, 184, 0.25);
    padding-top: 0.24rem;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
}

.cmdb-top-map-center .details .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
}

.cmdb-top-map-center .details .k {
    color: #94a3b8;
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 700;
}

.cmdb-top-map-center .details .v {
    color: #e2e8f0;
    font-size: 0.6rem;
    max-width: 58%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}

.cmdb-top-map-link {
    position: absolute;
    height: 2px;
    transform-origin: left center;
    background: rgba(100, 116, 139, 0.38);
    z-index: 1;
}

.cmdb-top-map-link.coverage {
    background: rgba(56, 189, 248, 0.45);
}

.cmdb-top-map-link.device {
    background: rgba(99, 102, 241, 0.45);
}

.cmdb-top-map-link.gap,
.cmdb-top-map-link.gap-ok {
    background: rgba(251, 146, 60, 0.5);
}

.cmdb-top-map-link.ip {
    background: rgba(14, 165, 233, 0.5);
}

.cmdb-top-map-link.software,
.cmdb-top-map-link.software-empty {
    background: rgba(37, 99, 235, 0.5);
}

.cmdb-top-map-link.software-category {
    background: rgba(30, 64, 175, 0.5);
}

.cmdb-top-map-node {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 164px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #fff;
    color: var(--text-primary);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
    padding: 0.28rem 0.45rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.08rem;
    text-align: left;
    z-index: 2;
}

.cmdb-top-map-node .ttl {
    font-size: 0.67rem;
    font-weight: 800;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmdb-top-map-node .sub {
    font-size: 0.62rem;
    color: #64748b;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmdb-top-map-node:disabled {
    cursor: default;
}

.cmdb-top-map-node.device {
    border-color: rgba(99, 102, 241, 0.45);
    background: linear-gradient(145deg, #eef2ff, #e0e7ff);
    cursor: pointer;
}

.cmdb-top-map-node.device:hover {
    box-shadow: 0 10px 24px rgba(79, 70, 229, 0.26);
}

.cmdb-top-map-node.coverage-on {
    border-color: rgba(34, 197, 94, 0.42);
    background: #f0fdf4;
}

.cmdb-top-map-node.coverage-off {
    border-color: rgba(239, 68, 68, 0.32);
    background: #f8fafc;
}

.cmdb-top-map-node.ip {
    border-color: rgba(14, 165, 233, 0.35);
    background: #f0f9ff;
}

.cmdb-top-map-node.gap {
    border-color: #fdba74;
    background: #fff7ed;
}

.cmdb-top-map-node.gap-ok {
    border-color: #86efac;
    background: #f0fdf4;
}

.cmdb-top-map-node.software {
    border-color: rgba(37, 99, 235, 0.35);
    background: #eff6ff;
}

.cmdb-top-map-node.software-category {
    border-color: rgba(30, 64, 175, 0.35);
    background: linear-gradient(145deg, #dbeafe, #eff6ff);
}

.cmdb-top-map-node.software-empty {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.cmdb-top-node {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--input-bg);
    overflow: hidden;
}

.cmdb-top-node > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.65rem;
    cursor: pointer;
    user-select: none;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(15, 23, 42, 0.04));
}

.cmdb-top-node > summary::-webkit-details-marker {
    display: none;
}

.cmdb-top-icon {
    width: 24px;
    text-align: center;
    font-size: 1rem;
}

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

.cmdb-top-main strong {
    font-size: 0.77rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmdb-top-sub {
    color: #64748b;
    font-size: 0.69rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmdb-top-right {
    display: flex;
    gap: 0.25rem;
}

.cmdb-top-source-chip {
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.08rem 0.42rem;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #475569;
}

.cmdb-top-source-chip.is-on {
    background: #ecfeff;
    border-color: #67e8f9;
    color: #0e7490;
}

.cmdb-top-source-chip.is-off {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #94a3b8;
}

.cmdb-top-node-body {
    padding: 0.6rem 0.75rem 0.7rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.cmdb-top-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 0.6rem;
}

.cmdb-top-grid > div {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.3rem 0.45rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem;
    align-items: baseline;
    background: var(--card-bg);
}

.cmdb-top-grid .k {
    font-size: 0.66rem;
    color: #64748b;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cmdb-top-grid .v {
    font-size: 0.72rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmdb-top-ips,
.cmdb-top-gaps,
.cmdb-top-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.cmdb-top-sw-meta {
    color: #475569;
    font-size: 0.68rem;
    font-weight: 600;
}

.cmdb-top-sw-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.35rem;
}

.cmdb-top-sw-category {
    border: 1px solid rgba(30, 64, 175, 0.2);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(219, 234, 254, 0.7), rgba(239, 246, 255, 0.75));
    padding: 0.25rem 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
}

.cmdb-top-sw-category .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
}

.cmdb-top-sw-category .cat {
    color: #1e3a8a;
    font-size: 0.67rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cmdb-top-sw-category .n {
    min-width: 20px;
    text-align: center;
    border-radius: 999px;
    border: 1px solid rgba(30, 64, 175, 0.25);
    background: #ffffff;
    color: #1e3a8a;
    font-size: 0.64rem;
    font-weight: 800;
    padding: 0.04rem 0.28rem;
}

.cmdb-top-sw-category .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
}

.cmdb-top-sw-category.empty {
    border-color: #e2e8f0;
    background: #f8fafc;
    color: #94a3b8;
    font-size: 0.66rem;
    font-weight: 600;
}

.cmdb-top-sw-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
}

.cmdb-top-sw-chip {
    border: 1px solid rgba(37, 99, 235, 0.3);
    border-radius: 8px;
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
    padding: 0.1rem 0.42rem;
    font-size: 0.66rem;
    font-weight: 600;
}

.cmdb-top-sw-chip.small {
    font-size: 0.6rem;
    padding: 0.08rem 0.34rem;
    border-radius: 7px;
}

.cmdb-top-sw-chip.muted {
    border-color: #e2e8f0;
    background: #f8fafc;
    color: #94a3b8;
    font-weight: 500;
}

.cmdb-top-ip {
    border: 1px solid rgba(14, 165, 233, 0.3);
    border-radius: 8px;
    background: rgba(14, 165, 233, 0.08);
    color: #0369a1;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.68rem;
    padding: 0.1rem 0.4rem;
}

.cmdb-top-ip.muted {
    color: #94a3b8;
    border-color: #e2e8f0;
    background: #f8fafc;
    font-family: inherit;
}

.cmdb-top-gap {
    border-radius: 8px;
    border: 1px solid #fed7aa;
    background: #fff7ed;
    color: #9a3412;
    padding: 0.12rem 0.45rem;
    font-size: 0.67rem;
    font-weight: 600;
}

.cmdb-top-gap.ok {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.cmdb-top-btn {
    border: none;
    border-radius: 7px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    font-size: 0.69rem;
    font-weight: 700;
    padding: 0.28rem 0.65rem;
    cursor: pointer;
}

.cmdb-top-btn:hover {
    opacity: 0.9;
}

/* CMDB device ficha readability layer */
.cmdb-device-shell {
    gap: 0.8rem;
}

.cmdb-source-bar {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.cmdb-source-btn {
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.cmdb-source-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.22);
}

.cmdb-section-nav {
    backdrop-filter: blur(4px);
}

.cmdb-section-nav-btn {
    white-space: nowrap;
}

.cmdb-device-main-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
}

.cmdb-device-section {
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.cmdb-device-section-head {
    letter-spacing: 0.01em;
}

.cmdb-device-section-body {
    line-height: 1.45;
}

.cmdb-device-section-footer {
    font-size: 0.75rem;
}

.cmdb-op-summary-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1.15fr) minmax(280px, 1fr);
    gap: 0.55rem;
    align-items: start;
}

.cmdb-op-kpi-grid {
    align-content: start;
}

.cmdb-op-signal-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 0.5rem;
}

.cmdb-op-signal {
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #f8fafc;
    color: #475569;
    font-size: 0.64rem;
    font-weight: 700;
    padding: 0.14rem 0.5rem;
    letter-spacing: 0.02em;
}

.cmdb-op-signal.ok {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.cmdb-op-signal.warn {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.cmdb-op-signal.error {
    border-color: #fecaca;
    background: #fff1f2;
    color: #b91c1c;
}

.cmdb-op-signal.neutral {
    border-color: #dbeafe;
    background: #eff6ff;
    color: #1d4ed8;
}

.cmdb-op-identity {
    padding: 0.1rem 0;
}

.cmdb-op-meta-block {
    min-width: 140px;
}

.cmdb-op-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem;
    margin-top: 0.35rem;
}

.cmdb-op-pill {
    border-radius: 999px;
    padding: 0.12rem 0.55rem;
    font-size: 0.67rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.cmdb-op-pills-more,
.cmdb-op-extra-ips {
    width: 100%;
    margin-top: 0.35rem;
}

.cmdb-op-pills-more > summary,
.cmdb-op-extra-ips > summary {
    list-style: none;
    cursor: pointer;
    font-size: 0.66rem;
    color: #2563eb;
    font-weight: 700;
}

.cmdb-op-pills-more > summary::-webkit-details-marker,
.cmdb-op-extra-ips > summary::-webkit-details-marker {
    display: none;
}

.cmdb-op-mini-card {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.cmdb-op-mini-label {
    opacity: 0.9;
}

.cmdb-op-mini-value {
    line-height: 1.25;
}

.cmdb-op-summary-actions {
    border-top: 1px dashed rgba(148, 163, 184, 0.38);
    padding-top: 0.45rem;
}

.cmdb-user-subtitle {
    font-size: 0.66rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmdb-user-facts {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    margin-top: 0.18rem;
}

.cmdb-user-fact-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background: rgba(79, 70, 229, 0.08);
    color: #3730a3;
    border: 1px solid rgba(79, 70, 229, 0.2);
    border-radius: 999px;
    padding: 0.02rem 0.38rem;
    font-size: 0.6rem;
    font-weight: 700;
    max-width: 190px;
}

.cmdb-user-fact-chip-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmdb-general-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.35rem;
    margin-bottom: 0.55rem;
}

.cmdb-general-card {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.45rem 0.6rem;
    min-width: 0;
}

.cmdb-general-card-k {
    font-size: 0.62rem;
    color: #6b7280;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.cmdb-general-card-v {
    font-size: 0.8rem;
    color: var(--text-primary);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1120px) {
    .cmdb-op-summary-grid {
        grid-template-columns: 1fr;
    }

    .cmdb-op-meta-block {
        width: 100%;
        text-align: left !important;
        margin-top: 0.25rem;
    }

    .cmdb-device-main-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .cmdb-source-bar {
        gap: 0.35rem;
        padding: 0.45rem 0.55rem !important;
    }

    .cmdb-source-btn {
        padding: 0.36rem 0.62rem !important;
        font-size: 0.68rem !important;
    }

    .cmdb-section-nav {
        gap: 0.24rem !important;
        padding: 0.34rem 0.46rem !important;
    }

    .cmdb-section-nav-btn {
        font-size: 0.62rem !important;
        padding: 0.18rem 0.4rem !important;
    }

    .cmdb-op-signal {
        font-size: 0.6rem;
        padding: 0.12rem 0.44rem;
    }

    .cmdb-op-pill {
        font-size: 0.63rem;
    }

    .cmdb-user-subtitle {
        white-space: normal;
        line-height: 1.2;
    }

    .cmdb-user-facts {
        gap: 0.2rem;
    }

    .cmdb-user-fact-chip {
        max-width: 100%;
        font-size: 0.56rem;
        padding: 0.04rem 0.32rem;
    }

    .cmdb-general-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.3rem;
    }

    .cmdb-general-card-v {
        font-size: 0.73rem;
    }
}

@media (max-width: 520px) {
    .cmdb-general-card-grid {
        grid-template-columns: 1fr;
    }
}

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

    .cmdb-top-right {
        display: none;
    }

    .cmdb-topology-modal {
        width: 100%;
        max-height: 92vh;
    }

    .cmdb-topology-header-actions {
        gap: 0.35rem;
    }

    .cmdb-topology-map-toggle {
        padding: 0.16rem 0.52rem;
        font-size: 0.63rem;
    }

    .cmdb-top-map-stage {
        min-width: 640px;
    }

    .cmdb-top-map-node {
        width: 146px;
    }

    .cmdb-top-map-center {
        width: 210px;
    }
}

/* High-contrast readability for form modals — light background */
#action-form-modal .modal-content,
#action-view-modal .modal-content,
#action-execute-modal .modal-content,
#session-logs-modal .modal-content,
#memory-modal .modal-content,
#skill-form-modal .modal-content,
#kb-edit-modal .modal-content,
#policy-edit-modal .modal-content,
#report-dyn-modal .modal-content,
#report-edit-modal .modal-content {
    background: #ffffff !important;
    color: #111827 !important;
}

#action-form-modal .modal-content label,
#action-view-modal .modal-content label,
#action-execute-modal .modal-content label,
#session-logs-modal .modal-content label,
#memory-modal .modal-content label,
#skill-form-modal .modal-content label,
#report-dyn-modal .modal-content label,
#action-form-modal .modal-content p,
#action-view-modal .modal-content p,
#action-execute-modal .modal-content p,
#session-logs-modal .modal-content p,
#memory-modal .modal-content p,
#skill-form-modal .modal-content p,
#report-dyn-modal .modal-content p,
#action-form-modal .modal-content h1,
#action-form-modal .modal-content h2,
#action-form-modal .modal-content h3,
#action-form-modal .modal-content h4,
#action-view-modal .modal-content h1,
#action-view-modal .modal-content h2,
#action-view-modal .modal-content h3,
#action-view-modal .modal-content h4,
#action-execute-modal .modal-content h1,
#action-execute-modal .modal-content h2,
#action-execute-modal .modal-content h3,
#action-execute-modal .modal-content h4,
#session-logs-modal .modal-content h1,
#session-logs-modal .modal-content h2,
#session-logs-modal .modal-content h3,
#session-logs-modal .modal-content h4,
#memory-modal .modal-content h1,
#memory-modal .modal-content h2,
#memory-modal .modal-content h3,
#memory-modal .modal-content h4,
#skill-form-modal .modal-content h1,
#skill-form-modal .modal-content h2,
#skill-form-modal .modal-content h3,
#skill-form-modal .modal-content h4,
#report-dyn-modal .modal-content h1,
#report-dyn-modal .modal-content h2,
#report-dyn-modal .modal-content h3,
#report-dyn-modal .modal-content h4 {
    color: #111827 !important;
}

/* Report & log viewer modals — light readable background */
#report-view-modal .modal-content,
#session-log-detail-modal .modal-content {
    background: #ffffff !important;
    color: #111827 !important;
    max-height: 95vh;
    width: min(1200px, 95vw);
    max-width: 95%;
}

#report-view-modal .modal-header,
#session-log-detail-modal .modal-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    color: #111827 !important;
    padding: 1rem 1.5rem 0.75rem !important;
    flex-shrink: 0;
}

#report-view-modal .modal-header h3,
#session-log-detail-modal .modal-header h3 {
    color: #111827 !important;
}

#report-view-modal .modal-body,
#session-log-detail-modal .modal-body {
    color: #111827 !important;
    padding: 2rem;
    background: #ffffff !important;
}

#report-view-modal .modal-footer,
#session-log-detail-modal .modal-footer {
    background: #f8fafc !important;
    border-top: 1px solid #e5e7eb !important;
    flex-shrink: 0;
}

#report-view-modal .modal-close,
#session-log-detail-modal .modal-close {
    color: #64748b;
}

#report-view-modal .modal-close:hover,
#session-log-detail-modal .modal-close:hover {
    background: #e2e8f0 !important;
    color: #111827;
}
#action-form-modal .modal-content input,
#action-form-modal .modal-content textarea,
#action-form-modal .modal-content select,
#action-view-modal .modal-content input,
#action-view-modal .modal-content textarea,
#action-view-modal .modal-content select,
#action-execute-modal .modal-content input,
#action-execute-modal .modal-content textarea,
#action-execute-modal .modal-content select,
#session-logs-modal .modal-content input,
#session-logs-modal .modal-content textarea,
#session-logs-modal .modal-content select,
#memory-modal .modal-content input,
#memory-modal .modal-content textarea,
#memory-modal .modal-content select,
#skill-form-modal .modal-content input,
#skill-form-modal .modal-content textarea,
#skill-form-modal .modal-content select,
#session-log-detail-modal .modal-content input,
#session-log-detail-modal .modal-content textarea,
#session-log-detail-modal .modal-content select,
#report-view-modal .modal-content input,
#report-view-modal .modal-content textarea,
#report-view-modal .modal-content select {
    background: #f9fafb !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}

@keyframes slideDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 400px;
}

.toast {
    padding: 1rem 1.5rem;
    background: white;
    border-radius: 0.5rem;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 1rem;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast.success {
    border-left: 4px solid var(--success-color);
}

.toast.error {
    border-left: 4px solid var(--danger-color);
}

.toast.info {
    border-left: 4px solid var(--info-color);
}

.toast.warning {
    border-left: 4px solid var(--warning-color);
}

.toast-icon {
    font-size: 1.5rem;
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.toast-message {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Accordion Styles */
.accordion-btn {
    width: 100%;
    background: linear-gradient(135deg, #1A1A1A 0%, #3A3A3A 100%);
    color: white;
    border: none;
    padding: 1rem 1.5rem;
    margin: 1rem 0 0 0;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.accordion-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2);
}

.accordion-btn.active {
    background: linear-gradient(135deg, #1D7A5F 0%, #145E48 100%);
}

.accordion-icon {
    font-size: 1.5rem;
}

.accordion-title {
    flex: 1;
    text-align: left;
}

.accordion-arrow {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.accordion-btn.active .accordion-arrow {
    transform: rotate(180deg);
}

.accordion-content {
    overflow: hidden;
    transition: all 0.3s ease;
    margin-top: 0;
}

.accordion-content .form-section {
    padding-top: 1.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .app-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .header-content h1 {
        font-size: 1.5rem;
    }
    
    .tabs-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    
    .main-content {
        padding: 1rem;
    }
    
    .card {
        padding: 1.5rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .result-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .export-buttons {
        flex-direction: column;
    }
    
    .export-buttons .btn {
        width: 100%;
        justify-content: center;
    }
    
    .toast-container {
        left: 1rem;
        right: 1rem;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .app-container {
        margin: 0;
    }
    
    .app-header,
    .main-content,
    .app-footer {
        margin: 0.5rem;
        border-radius: 0.5rem;
    }
    
    .tabs-nav {
        margin: 0 0.5rem;
        padding: 0 0.5rem;
    }
    
    .tab-btn {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
}

/* Print Styles */
@media print {
    body {
        background: white;
    }
    
    .app-header,
    .tabs-nav,
    .app-footer,
    .btn,
    .button-group,
    .export-buttons {
        display: none;
    }
    
    .main-content {
        box-shadow: none;
        margin: 0;
    }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
}

::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-primary);
}

/* ============================================= */
/* Acciones del Sistema */
/* ============================================= */

.actions-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.action-card {
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 1.25rem;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.action-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.action-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.action-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-word;
}

.action-card-type {
    padding: 0.25rem 0.5rem;
    background: var(--bg-secondary);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.action-card-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.action-card-footer {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}

.action-card-footer .btn {
    flex: 1;
    padding: 0.5rem;
    font-size: 0.875rem;
}

.btn-execute {
    background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%);
    color: white;
    border: none;
}

.btn-execute:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: scale(1.02);
}

.btn-delete-action {
    background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
    color: #991b1b;
    border: 2px solid #f87171;
}

.btn-delete-action:hover {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    color: white;
    border-color: #dc2626;
}

/* Action card disabled state */
.action-card-disabled {
    opacity: 0.55;
    border-color: var(--border-color) !important;
}
.action-card-disabled .btn-execute {
    background: #6b7280;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Action toggle switch */
.action-toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    cursor: pointer;
}
.action-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.action-toggle-slider {
    position: absolute;
    inset: 0;
    background: #4b5563;
    border-radius: 20px;
    transition: background 0.25s;
}
.action-toggle-slider::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    left: 3px;
    top: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.25s;
}
.action-toggle input:checked + .action-toggle-slider {
    background: var(--success-color, #10b981);
}
.action-toggle input:checked + .action-toggle-slider::before {
    transform: translateX(16px);
}

#action-code {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.9rem;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    resize: vertical;
    min-height: 200px;
}

#action-code:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.loading-spinner {
    color: var(--text-secondary);
    font-style: italic;
}

@media (max-width: 768px) {
    .actions-list {
        grid-template-columns: 1fr;
    }
    
    .action-card-footer {
        flex-direction: column;
    }
}

/* === SOPORTE HD STYLES === */

/* HD Sidebar Navigation */
.hd-nav-btn {
    width: 100%;
    padding: 0.45rem 0.75rem;
    margin-bottom: 0.18rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 7px;
    color: #C8C8C8;
    font-size: 0.84rem;
    cursor: pointer;
    transition: all 0.18s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
}

.hd-nav-btn:hover {
    background: rgba(184, 146, 42, 0.18);
    border-color: rgba(184, 146, 42, 0.60);
    color: #D4A843;
    transform: translateX(2px);
}

.hd-nav-btn.active {
    background: rgba(184, 146, 42, 0.22);
    border-color: rgba(184, 146, 42, 0.70);
    color: #D4A843;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    transform: translateX(2px);
}

.hd-nav-icon {
    font-size: 1.2rem;
    display: inline-block;
    width: 1.5rem;
    text-align: center;
}

/* HD Pages */
.hd-page {
    display: none;
}

.hd-page.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Knowledge Hub tabs can grow a lot; force an internal scroll container to avoid viewport clipping. */
#hd-page-knowledge.active,
#hd-page-knowledge-management.active {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 1rem;
}

/* Asistente page needs flex layout to allow chat to fill remaining height */
#hd-page-asistente.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* HD Metric Cards */
.hd-metric-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    transition: all 0.2s ease;
}

.hd-metric-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(94, 129, 244, 0.2);
}

.hd-metric-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.hd-metric-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.hd-metric-delta {
    font-size: 0.75rem;
    color: var(--success-color);
}

/* HD Section Titles */
.hd-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hd-section-title:first-child {
    margin-top: 0;
}

/* HD Metric Cards */
.hd-metric-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    transition: all 0.2s ease;
}

.hd-metric-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(94, 129, 244, 0.2);
}

.hd-clickable-card {
    cursor: pointer;
    transition: all 0.3s ease;
}

.hd-clickable-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(94, 129, 244, 0.25);
}

.hd-clickable-card:active {
    transform: translateY(-2px);
}

/* Tarjetas KB y Políticas */
.hd-kb-card {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%);
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: 12px;
    padding: 0.75rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 0;
}

.hd-kb-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(59, 130, 246, 0.1), transparent);
    transform: rotate(45deg);
    transition: all 0.5s ease;
}

.hd-kb-card:hover::before {
    right: 100%;
}

.hd-kb-card:hover {
    border-color: rgba(59, 130, 246, 0.6);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
}

.hd-kb-icon {
    font-size: 2rem;
    margin-bottom: 0.25rem;
    filter: drop-shadow(0 2px 4px rgba(59, 130, 246, 0.3));
}

.hd-kb-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(59, 130, 246);
    margin-bottom: 0.25rem;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.2;
}

.hd-kb-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    line-height: 1;
}

.hd-pol-card {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.1) 0%, rgba(249, 115, 22, 0.05) 100%);
    border: 2px solid rgba(251, 146, 60, 0.3);
    border-radius: 12px;
    padding: 0.75rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 0;
}

.hd-pol-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(251, 146, 60, 0.1), transparent);
    transform: rotate(45deg);
    transition: all 0.5s ease;
}

/* ==============================================
   LAYOUT RESPONSIVO — SIDEBAR ADAPTABLE (A)
   ============================================== */

/* Ajustar contenedor principal: sin padding ni tab-radius */
.main-content {
    padding: 0;
    border-radius: 1rem;
    overflow: hidden;
}

/* Sidebar — extraído de inline styles */
.hd-sidebar {
    width: 230px;
    height: 100%;
    background: linear-gradient(180deg, #1A1A1A 0%, #0D0D0D 100%);
    padding: 0 1rem 1rem;
    border-right: none;
    flex-shrink: 0;
    transition: width 0.25s ease, padding 0.25s ease;
    overflow-x: hidden;
    overflow-y: auto;
}

/* ── Colapso del sidebar de navegación — funciona en TODOS los tamaños ── */
.hd-layout.sidebar-collapsed .hd-sidebar {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}
.hd-layout.sidebar-collapsed .hd-sidebar > * {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}

/* Botón toggle del sidebar de navegación — fijo en borde izquierdo, espejo del widgets-panel-toggle */
#sidebar-nav-toggle {
    position: fixed;
    top: 0;
    left: 260px;
    transform: none;
    z-index: 49;
    background: #1A1A1A;
    color: #D4A843;
    border: none;
    border-radius: 0 6px 6px 0;
    padding: 0.55rem 0.32rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
    transition: background 0.2s, left 0.25s;
}
#sidebar-nav-toggle:hover { background: #2a2a2a; }

/* Cuando el sidebar está colapsado, el botón se desplaza al borde izquierdo */
.hd-layout.sidebar-collapsed #sidebar-nav-toggle {
    left: 0;
}

@media (max-width: 640px) {
    #sidebar-nav-toggle { display: none; }
}

/* Flex container — extraído de inline style */
.hd-layout {
    display: flex;
    height: 100%;
}

/* Área de contenido — extraída de inline style */
.hd-main-content {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Botón hamburguesa (visible solo en móvil) */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.hamburger-btn span {
    display: block;
    width: 100%;
    height: 2.5px;
    background: var(--primary-color);
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Overlay oscuro para móvil */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 99;
    backdrop-filter: blur(2px);
}

.sidebar-overlay.visible {
    display: block;
}

/* Mobile split tabs: hidden by default (desktop), shown in @media 640px */
.mobile-split-tabs {
    display: none;
}

/* ─── TABLET (641px - 1024px): sidebar de solo íconos + colapso ─── */

/* Botón colapsar — oculto por defecto, visible sólo en tablet */
.sidebar-collapse-tab {
    display: none;
}

@media (max-width: 1024px) and (min-width: 641px) {
    #sidebar-nav-toggle {
        left: 64px;
    }
    .hd-layout.sidebar-collapsed #sidebar-nav-toggle {
        left: 0;
        background: #1A1A1A;
    }

    .hd-layout {
        position: relative;
    }

    /* Botón colapsar: se ancla al borde derecho del sidebar */
    .sidebar-collapse-tab {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 64px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 50;
        width: 18px;
        height: 52px;
        background: #0D0D0D;
        color: #C8C8C8;
        border: 1px solid rgba(184, 146, 42, 0.25);
        border-left: none;
        border-radius: 0 6px 6px 0;
        cursor: pointer;
        font-size: 1.15rem;
        line-height: 1;
        padding: 0;
        transition: background 0.2s, left 0.25s;
        box-shadow: 2px 0 8px rgba(0,0,0,0.45);
    }

    .sidebar-collapse-tab:hover {
        background: #1A1A1A;
        color: #D4A843;
    }

    /* Estado colapsado */
    .hd-layout.sidebar-collapsed .sidebar-collapse-tab {
        left: 0;
    }

    .hd-layout.sidebar-collapsed .hd-sidebar {
        width: 0;
        padding: 0;
        border: none;
        overflow: hidden;
    }

    .hd-sidebar {
        width: 64px;
        padding: 1.25rem 0.5rem;
        transition: width 0.25s ease, padding 0.25s ease;
    }

    .hd-sidebar .hd-nav-btn > span:not(.hd-nav-icon) {
        display: none;
    }

    .hd-sidebar .hd-nav-btn {
        justify-content: center;
        padding: 0.8rem 0;
        position: relative;
    }

    .hd-sidebar .hd-nav-btn:hover::after {
        content: attr(data-tooltip);
        position: absolute;
        left: calc(100% + 10px);
        top: 50%;
        transform: translateY(-50%);
        background: #0D0D0D;
        color: #F0F0F0;
        padding: 0.4rem 0.85rem;
        border-radius: 6px;
        font-size: 0.85rem;
        white-space: nowrap;
        z-index: 200;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(184, 146, 42, 0.35);
        pointer-events: none;
    }

    .hd-sidebar > div:not(:first-child):not(.sidebar-collapse-tab) {
        transition: opacity 0.2s;
    }

    .hd-layout.sidebar-collapsed .hd-sidebar > * {
        opacity: 0;
        pointer-events: none;
    }

    /* Mantener el botón colapsar siempre visible */
    .hd-layout.sidebar-collapsed .sidebar-collapse-tab {
        opacity: 1;
        pointer-events: auto;
    }

    .hd-sidebar > div:first-child,
    .hd-sidebar > div:last-child {
        display: none;
    }

    .hd-main-content {
        padding: 1.5rem;
    }

    #hd-page-asistente > div > div[style*="grid-template-columns: 2fr 1fr"] {
        display: block !important;
    }
}

/* ─── MÓVIL (< 641px): sidebar como drawer lateral ─── */
@media (max-width: 640px) {
    .app-header {
        padding: 0.6rem 0.75rem;
        gap: 0.6rem;
        margin: 0;
        border-radius: 0;
        height: 58px;
    }

    /* Logo más pequeño en móvil */
    .app-header img {
        height: 40px !important;
    }

    .header-content h1 {
        font-size: 1rem;
    }

    .subtitle {
        display: none;
    }

    /* Texto cabecera compacto */
    .app-header > div > div > div:first-child {
        font-size: 1rem !important;
    }
    .app-header > div > div > div:last-child {
        display: none;
    }

    /* Indicador de estado: solo el dot */
    /* Indicador de estado: ajustar left en móvil (sin sidebar) */
    #apiStatus {
        left: 1rem !important;
    }

    .status-indicator .status-text {
        display: none;
    }

    #apiStatus .status-text {
        display: none;
    }

    .main-content {
        margin: 0;
        border-radius: 0;
    }

    .hamburger-btn {
        display: flex;
    }

    .hd-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100dvh;
        width: 280px;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.28s ease;
        padding: 1.25rem 0.85rem;
    }

    .hd-sidebar.open {
        transform: translateX(0);
        box-shadow: 6px 0 28px rgba(0, 0, 0, 0.55);
    }

    .hd-sidebar .hd-nav-btn > span:not(.hd-nav-icon) {
        display: inline !important;
    }

    .hd-sidebar .hd-nav-btn {
        justify-content: flex-start !important;
        padding: 0.85rem 1rem !important;
        font-size: 0.95rem !important;
    }

    .hd-sidebar > div:first-child,
    .hd-sidebar > div:last-child {
        display: block !important;
    }

    .hd-layout {
        min-height: 100dvh;
    }

    .hd-main-content {
        padding: 0.85rem;
        width: 100%;
    }

    /* Cards de métricas: 2 columnas en móvil */
    .hd-metrics-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    div[style*="grid-template-columns: 2fr 1fr"],
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="grid-template-columns: 1fr 1fr 1fr"],
    div[style*="grid-template-columns: repeat"] {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Botones de acción apilables */
    .hd-list-actions {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    /* Modales a pantalla completa */
    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0.75rem 0.75rem 0 0;
        max-height: 95dvh;
        margin-top: auto;
    }

    /* Drag handle indicator on modal header */
    .modal-header::before {
        content: '';
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: rgba(0,0,0,0.2);
    }
    .modal-header {
        position: relative;
        padding-top: 1.2rem !important;
    }

    /* Modal backdrop — align to bottom (sheet-style) */
    .modal {
        align-items: flex-end !important;
    }

    /* Keyboard-aware body height */
    body {
        height: calc(100dvh - var(--keyboard-h, 0px));
        overflow: hidden;
    }

    /* Pop-up de contenido ref */
    #ref-popup-overlay > div {
        max-width: 100% !important;
        border-radius: 0.75rem 0.75rem 0 0 !important;
        max-height: 92dvh;
        align-self: flex-end;
    }

    /* ── Mobile split tabs (Chat / Análisis) ─── */
    .mobile-split-tabs {
        display: flex !important;
        gap: 0;
        background: var(--card-bg, #fff);
        border: 1px solid var(--border-color, #e5e7eb);
        border-radius: 10px;
        padding: 3px;
        margin-bottom: 0.4rem;
        flex-shrink: 0;
    }
    .mobile-split-tab {
        flex: 1;
        background: none;
        border: none;
        padding: 0.45rem 0.5rem;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--text-secondary, #7a7a78);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
    }
    .mobile-split-tab.active {
        background: var(--primary-color, #1a1a1a);
        color: #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    }

    /* In mobile, the split is column and analysis is hidden by default */
    #asistente-split {
        flex-direction: column !important;
        gap: 0 !important;
    }
    #hd-analysis-result {
        display: none;
        flex-direction: column;
        max-width: 100% !important;
        flex: 1 !important;
    }

    /* Compact header for mobile */
    .app-header {
        height: 44px !important;
        min-height: 44px;
        padding: 0.3rem 0.6rem !important;
    }
    .app-header img {
        height: 32px !important;
    }

    /* Chat fills available space */
    #mode-chat {
        flex: 1 !important;
        min-height: 0;
    }

    /* Sticky chat input area at bottom */
    #mode-chat > div:last-of-type {
        position: sticky;
        bottom: 0;
        background: var(--bg-secondary, #f4f3f0);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        z-index: 10;
    }

    /* Chat action bar: horizontal scroll, not wrap */
    #chat-action-bar {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.3rem !important;
        padding-bottom: 0.2rem;
        scrollbar-width: none;
    }
    #chat-action-bar::-webkit-scrollbar { display: none; }
    #chat-action-bar .btn {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Touch-friendly nav buttons: min 44px tap target */
    .hd-sidebar .hd-nav-btn {
        min-height: 44px !important;
    }

    /* Touch-friendly buttons everywhere */
    .btn, button {
        min-height: 38px;
    }

    /* Main content: no padding waste */
    .hd-main-content {
        padding: 0.5rem 0.5rem !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }

    /* Asistente page: fill height */
    #hd-page-asistente {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 0 !important;
    }
}

.hd-pol-card:hover::before {
    right: 100%;
}

.hd-pol-card:hover {
    border-color: rgba(251, 146, 60, 0.6);
    box-shadow: 0 8px 24px rgba(251, 146, 60, 0.3);
}

.hd-pol-icon {
    font-size: 2rem;
    margin-bottom: 0.25rem;
    filter: drop-shadow(0 2px 4px rgba(251, 146, 60, 0.3));
}

.hd-pol-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(251, 146, 60);
    margin-bottom: 0.25rem;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.2;
}

.hd-pol-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    line-height: 1;
}

.hd-metric-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
    font-weight: 500;
}

.hd-metric-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.3rem;
}

.hd-metric-delta {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 400;
}

/* HD Info Boxes */
.hd-info-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-primary);
}

.hd-info-box p {
    margin: 0.5rem 0;
}

.hd-info-box p:first-child {
    margin-top: 0;
}

.hd-info-box p:last-child {
    margin-bottom: 0;
}

.hd-info-box strong {
    color: var(--text-primary);
    font-weight: 600;
}

.hd-info-box code {
    background: var(--bg-tertiary);
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85rem;
    color: var(--primary-color);
}

/* HD Alert Cards */
.hd-alert {
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    background: rgba(239, 68, 68, 0.1);
    border-left: 3px solid var(--error-color);
    border-radius: 6px;
    font-size: 0.9rem;
}

.hd-alert:first-child {
    margin-top: 0;
}

.hd-alert:last-child {
    margin-bottom: 0;
}

.hd-alert strong {
    color: var(--error-color);
    font-weight: 600;
    display: block;
    margin-bottom: 0.25rem;
}

/* ══════════════════════════════════════════════════
   WIDGETS FLOTANTES — Alertas + Máquina Remota
   Fijos en esquina superior derecha del viewport
   ══════════════════════════════════════════════════ */
#hd-widgets-bar {
    position: fixed;
    top: 72px;
    bottom: 0.5rem;
    right: 0.75rem;
    z-index: 48;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform 0.3s ease;
}

/* Override del ancho inline heredado de los widgets hijos */
#hd-widgets-bar > div {
    width: 100% !important;
    flex-shrink: 0 !important;
}

/* Reservar espacio para evitar solapamiento con los widgets fijos */
#hd-page-asistente {
    padding-right: 298px;
    transition: padding-right 0.3s ease;
}

/* ── Botón toggle del panel lateral derecho ── */
#widgets-panel-toggle {
    position: fixed;
    top: 72px;
    right: 0;
    z-index: 49;
    background: #1A1A1A;
    color: #D4A843;
    border: none;
    border-radius: 6px 0 0 6px;
    padding: 0.55rem 0.32rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: -2px 2px 8px rgba(0,0,0,0.3);
    transition: background 0.2s, right 0.3s;
    writing-mode: horizontal-tb;
}
#widgets-panel-toggle:hover { background: #2a2a2a; }

/* ── Estado panel oculto ── */
body.widgets-hidden #hd-widgets-bar {
    transform: translateX(296px);
}
body.widgets-hidden #hd-page-asistente {
    padding-right: 30px;
}

/* ── Chat en modo foco/expandido ── */
body.chat-focus #hd-chat-messages {
    min-height: calc(100vh - 290px) !important;
    max-height: calc(100vh - 200px) !important;
}

/* Padding mínimo del área principal (Asistente IA debe caber sin scroll) */
.hd-main-content {
    padding: 0.6rem 1.25rem;
}

/* ─── Asistente IA: overrides de compacidad (NO afectan otras páginas) ─── */
#hd-page-asistente .form-group {
    margin-bottom: 0.4rem;
}
#hd-page-asistente .form-group label {
    margin-bottom: 0.15rem;
    font-size: 0.82rem;
}
#hd-page-asistente .form-group textarea {
    padding: 0.35rem 0.6rem;
    font-size: 0.87rem;
    line-height: 1.45;
}
#hd-page-asistente .btn {
    padding: 0.42rem 1rem;
    font-size: 0.87rem;
}
#hd-page-asistente #dry-run-label {
    padding: 0.42rem 0.75rem;
}
/* Historial de sesión más compacto */
#session-history-header {
    padding: 0.45rem 0.9rem !important;
}
#session-history-header .config-collapse-title {
    font-size: 0.88rem;
}

/* ─── Tablet (641-1100px): widgets más estrechos ─── */
@media (max-width: 1100px) and (min-width: 641px) {
    #hd-widgets-bar {
        width: 210px;
    }
    #hd-page-asistente {
        padding-right: 226px;
    }
    body.widgets-hidden #hd-widgets-bar {
        transform: translateX(220px);
    }
    body.widgets-hidden #hd-page-asistente {
        padding-right: 30px;
    }
    .hd-main-content {
        padding: 0.5rem 0.9rem;
    }
}

/* ─── Móvil (<641px): widgets as compact chips ─── */
@media (max-width: 640px) {
    #hd-widgets-bar {
        position: static;
        width: 100%;
        flex-direction: row;
        flex-wrap: nowrap;
        margin-bottom: 0.4rem;
        gap: 0.35rem;
        transform: none !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0.2rem 0;
    }
    #hd-widgets-bar::-webkit-scrollbar { display: none; }
    #hd-widgets-bar > div {
        flex: 0 0 auto;
        min-width: 0;
        max-width: 180px;
    }
    /* Chip-style sections */
    #hd-widgets-bar .cos-rp-section {
        border-radius: 20px;
        padding: 0.2rem 0.5rem;
    }
    #hd-widgets-bar .cos-rp-header {
        padding: 0.15rem 0;
        gap: 0.3rem;
    }
    #hd-widgets-bar .cos-rp-icon {
        font-size: 0.85rem;
    }
    #hd-widgets-bar .cos-rp-title {
        font-size: 0.72rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Body hidden by default, expand on tap */
    #hd-widgets-bar .cos-rp-body {
        display: none;
    }
    #hd-widgets-bar .cos-rp-section.expanded .cos-rp-body {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 50;
        background: var(--card-bg, #fff);
        border: 1px solid var(--border-color, #e5e7eb);
        border-radius: 10px;
        padding: 0.5rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    #hd-widgets-bar .cos-rp-section {
        position: relative;
    }
    #hd-page-asistente {
        padding-right: 0;
    }
    .hd-main-content {
        padding: 0.65rem;
    }
    #widgets-panel-toggle {
        display: none;
    }
}

.hd-alert span {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.hd-no-alerts {
    color: var(--success-color);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── Split Resizer (divisor arrastrable chat / resultado) ── */
#split-resizer {
    width: 6px;
    cursor: col-resize;
    background: transparent;
    border-radius: 3px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    transition: background 0.15s;
}
#split-resizer:hover,
#split-resizer.dragging {
    background: rgba(212, 168, 67, 0.5);
}
#split-resizer::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 32px;
    border-radius: 1px;
    background: rgba(212, 168, 67, 0.25);
    transition: background 0.15s, height 0.15s;
}
#split-resizer:hover::after,
#split-resizer.dragging::after {
    background: rgba(212, 168, 67, 0.7);
    height: 48px;
}
@media (max-width: 640px) {
    #split-resizer { display: none; }
}

/* ── Alert Config Modal ── */
.alert-config-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.8rem;
    margin-bottom: 0.4rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    gap: 0.75rem;
}
.alert-config-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    flex-shrink: 0;
}
.alert-config-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #D4A843;
    cursor: pointer;
}
.alert-config-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}
.alert-config-threshold {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.alert-threshold-input {
    width: 52px;
    padding: 0.25rem 0.4rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-primary);
    font-size: 0.85rem;
    text-align: center;
    font-weight: 600;
}
.alert-threshold-input:focus {
    outline: none;
    border-color: #D4A843;
    box-shadow: 0 0 0 2px rgba(212, 168, 67, 0.2);
}

.hd-flow-diagram {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.75rem;
    line-height: 1.4;
    overflow-x: auto;
    color: #9fa8da;
}

/* HD Tabs (dentro de páginas) */
.hd-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.hd-tab-btn {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
    margin-bottom: -0.5rem;
}

.hd-tab-btn:hover {
    color: var(--text-primary);
}

.hd-tab-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    font-weight: 600;
}

.hd-tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.hd-tab-content.active {
    display: block;
}

/* HD Proposal Container */
.hd-proposal {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1rem 0;
}

.hd-proposal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.hd-proposal-status {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.hd-proposal-status.pending {
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
}

.hd-proposal-status.validated {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.hd-proposal-status.rejected {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.hd-proposal-body {
    line-height: 1.6;
}

.hd-proposal-commands {
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 1rem;
    margin: 1rem 0;
}

.hd-proposal-commands pre {
    margin: 0;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85rem;
    color: #9fa8da;
}

.hd-proposal-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* HD KB/Policy Articles */
/* ─── Collapsible list — KB & Políticas ─── */
.hd-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.hd-list-item {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.hd-list-item:hover {
    box-shadow: 0 2px 10px rgba(94, 129, 244, 0.12);
}

.hd-list-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.875rem;
    background: var(--bg-secondary);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}

.hd-list-row:hover {
    background: var(--bg-tertiary);
}

.hd-list-chevron {
    font-size: 0.6rem;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.hd-list-item.open .hd-list-chevron {
    transform: rotate(90deg);
}

.hd-list-title {
    flex: 1;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hd-list-badge {
    font-size: 0.72rem;
    padding: 0.2rem 0.6rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    color: #1e40af;
    white-space: nowrap;
    flex-shrink: 0;
}

.hd-list-actions {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

/* Body colapsado por defecto */
.hd-list-body {
    display: none;
    padding: 0.875rem 1rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.hd-list-item.open .hd-list-body {
    display: block;
}

.hd-list-meta {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 0.6rem;
}

.hd-list-content {
    line-height: 1.6;
    color: var(--text-secondary);
    font-size: 0.9rem;
    white-space: pre-wrap;
}

/* Mantener tags para KB */
.hd-article-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.hd-article-tag {
    padding: 0.25rem 0.5rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    font-size: 0.75rem;
    color: #166534;
}

/* HD Reports — list rows */
.hd-report-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
    flex-shrink: 0;
    margin-right: 0.5rem;
}

.hd-report-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    cursor: pointer;
}

.hd-report-info .hd-list-title {
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}

.hd-report-sub {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* HD Reports — viewer modal body */
.report-body {
    color: #374151;
    line-height: 1.6;
    font-size: 0.92rem;
    word-wrap: break-word;
    max-width: 100%;
}

.report-body .rh1 {
    color: #111827;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0.75rem 0 0.4rem;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid #4f46e5;
}

.report-body .rh2 {
    color: #1e293b;
    font-size: 1rem;
    font-weight: 600;
    margin: 0.9rem 0 0.35rem;
    padding-bottom: 0.15rem;
    border-bottom: 1px solid #cbd5e1;
}

.report-body .rh3 {
    color: #334155;
    font-size: 0.92rem;
    font-weight: 600;
    margin: 0.65rem 0 0.25rem;
}

.report-body .rq {
    border-left: 4px solid #6366f1;
    background: #eff6ff;
    padding: 0.5rem 1rem;
    margin: 0.5rem 0;
    font-style: italic;
    color: #1e40af;
    border-radius: 0 6px 6px 0;
}

.report-body .rhr {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 0.75rem 0;
}

.report-body .report-code {
    background: #f8fafc;
    color: #059669;
    padding: 1rem;
    border-radius: 6px;
    overflow-x: auto;
    border: 1px solid #d1d5db;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 1rem 0;
}

.report-body .report-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    background: #f9fafb;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.report-body .report-table th {
    padding: 0.65rem 0.85rem;
    text-align: left;
    background: #f3f4f6;
    color: #111827;
    font-weight: 600;
    border-bottom: 2px solid #d1d5db;
}

.report-body .report-table td {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid #e5e7eb;
    color: #374151;
}

/* Pequeños ajustes de botones */
.btn-small {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
}

/* ─── HD List — title group with subtitle ─────────────────────────── */
.hd-list-title-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.hd-list-title-group .hd-list-title {
    flex: unset;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hd-list-subtitle {
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Page header layout ──────────────────────────────────────────── */
.hd-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.hd-page-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.hd-page-header-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* ─── Filter bar ──────────────────────────────────────────────────── */
.hd-filter-bar {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.hd-filter-bar input,
.hd-filter-bar select {
    flex: 1;
    min-width: 160px;
    max-width: 280px;
}

/* ─── Knowledge Visual Refresh ─────────────────────────────────────── */
.hd-knowledge-page {
    position: relative;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 16px;
    padding: 0.45rem 0.5rem 0.75rem;
    background:
        radial-gradient(920px 240px at 9% -8%, rgba(20, 184, 166, 0.14), transparent),
        radial-gradient(860px 240px at 92% -15%, rgba(14, 116, 144, 0.12), transparent),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.99));
    overflow: hidden;
}

.hd-knowledge-page::before,
.hd-knowledge-page::after {
    content: '';
    position: absolute;
    pointer-events: none;
    border-radius: 999px;
    opacity: 0.28;
}

.hd-knowledge-page::before {
    width: 260px;
    height: 260px;
    right: -130px;
    top: -150px;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.5) 0%, rgba(20, 184, 166, 0) 72%);
}

.hd-knowledge-page::after {
    width: 220px;
    height: 220px;
    left: -120px;
    bottom: -150px;
    background: radial-gradient(circle, rgba(14, 116, 144, 0.42) 0%, rgba(14, 116, 144, 0) 72%);
}

.hd-knowledge-page .knowledge-page-header,
.hd-knowledge-page .knowledge-filter-bar,
.hd-knowledge-page .knowledge-results,
.hd-knowledge-page .knowledge-km-card,
.hd-knowledge-page .knowledge-km-meeting,
.hd-knowledge-page .knowledge-km-jobs,
.hd-knowledge-page .knowledge-km-selection {
    position: relative;
    z-index: 1;
}

.hd-knowledge-page .knowledge-page-header {
    margin-bottom: 1rem;
    padding: 1rem 1.05rem;
    border: 1px solid rgba(20, 184, 166, 0.28);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.13), rgba(8, 145, 178, 0.09));
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

.hd-knowledge-page .knowledge-page-header h2 {
    font-size: 1.32rem;
    letter-spacing: 0.01em;
    color: #0f172a;
}

.hd-knowledge-page .knowledge-page-header p {
    color: #334155 !important;
    font-size: 0.82rem;
}

.hd-knowledge-page .knowledge-hub-switch {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin: -0.2rem 0 0.85rem;
    padding: 0.45rem;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

.hd-knowledge-page .knowledge-hub-tab {
    border: 1px solid rgba(148, 163, 184, 0.45);
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.34rem 0.78rem;
    cursor: pointer;
    transition: all 0.18s ease;
}

.hd-knowledge-page .knowledge-hub-tab:hover {
    border-color: rgba(14, 116, 144, 0.42);
    color: #0c4a6e;
}

.hd-knowledge-page .knowledge-hub-tab.active {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.2), rgba(14, 116, 144, 0.16));
    color: #0f172a;
    border-color: rgba(14, 116, 144, 0.42);
    box-shadow: inset 0 0 0 1px rgba(14, 116, 144, 0.2);
}

.hd-knowledge-page .knowledge-hub-enrich {
    margin-left: auto;
    border: none;
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #0f766e, #0ea5a4);
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(15, 118, 110, 0.24);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hd-knowledge-page .knowledge-hub-enrich:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(15, 118, 110, 0.28);
}

.hd-knowledge-page .knowledge-header-actions {
    gap: 0.4rem;
}

.hd-knowledge-page .knowledge-header-actions .btn {
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hd-knowledge-page .knowledge-header-actions .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 9px 16px rgba(15, 23, 42, 0.15);
}

.hd-knowledge-page .knowledge-batch-progress {
    border-radius: 12px !important;
    border-color: rgba(14, 116, 144, 0.24) !important;
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.92), rgba(236, 253, 245, 0.88)) !important;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}

.hd-knowledge-page .knowledge-filter-bar {
    padding: 0.65rem;
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 5px 12px rgba(15, 23, 42, 0.05);
}

.hd-knowledge-page .knowledge-filter-bar input,
.hd-knowledge-page .knowledge-filter-bar select {
    border-radius: 9px;
}

.hd-knowledge-page .knowledge-filter-chips {
    margin: 0.6rem 0 0.85rem;
}

.hd-knowledge-page .knowledge-filter-chips button {
    border-radius: 999px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.hd-knowledge-page .knowledge-results {
    border: 1px solid rgba(148, 163, 184, 0.30);
    border-radius: 14px;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.07);
}

.hd-knowledge-page .knowledge-results .hd-list {
    gap: 0.5rem;
}

.hd-knowledge-page .knowledge-results .hd-list-item {
    border-radius: 10px;
    border-color: rgba(148, 163, 184, 0.34);
    background: linear-gradient(150deg, #ffffff, #f8fafc);
}

.hd-knowledge-page .knowledge-results .hd-list-item:hover {
    box-shadow: 0 9px 18px rgba(15, 23, 42, 0.11);
}

.hd-knowledge-page .knowledge-results .hd-list-row {
    background: transparent;
}

.hd-knowledge-page .knowledge-results .hd-list-row:hover {
    background: rgba(15, 23, 42, 0.04);
}

.hd-knowledge-page .knowledge-results .hd-list-badge {
    border-radius: 999px;
}

.hd-knowledge-page .knowledge-results .hd-list-content {
    color: #334155;
}

.hd-knowledge-management-page .knowledge-km-intro {
    border-radius: 12px;
    border-left-width: 5px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.hd-knowledge-management-page .knowledge-km-sources {
    border: 1px solid rgba(148, 163, 184, 0.34) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.88) !important;
}

.hd-knowledge-management-page .knowledge-km-sources label {
    color: #1e293b;
    font-weight: 600;
}

.hd-knowledge-management-page .knowledge-km-card {
    border-color: rgba(148, 163, 184, 0.35) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07);
}

.hd-knowledge-management-page #km-admin-config-card.knowledge-km-card {
    border-color: rgba(59, 130, 246, 0.35) !important;
    background: linear-gradient(135deg, rgba(219, 234, 254, 0.9), rgba(236, 253, 245, 0.8)) !important;
}

.hd-knowledge-management-page #km-sp-list,
.hd-knowledge-management-page #km-bmc-list {
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.hd-knowledge-management-page #km-sp-list label,
.hd-knowledge-management-page #km-bmc-list label {
    padding: 0.42rem 0.28rem !important;
    border-bottom-color: rgba(226, 232, 240, 0.85) !important;
}

.hd-knowledge-management-page #km-sp-list label:hover,
.hd-knowledge-management-page #km-bmc-list label:hover {
    background: rgba(15, 23, 42, 0.04);
}

.hd-knowledge-management-page .knowledge-km-selection {
    border-radius: 11px !important;
    border-style: solid !important;
    border-color: rgba(14, 116, 144, 0.45) !important;
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.8), rgba(239, 246, 255, 0.9)) !important;
    color: #0f172a !important;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.07);
}

.hd-knowledge-management-page .knowledge-km-meeting {
    border-radius: 12px !important;
    border-color: rgba(56, 189, 248, 0.42) !important;
    box-shadow: 0 10px 20px rgba(14, 116, 144, 0.12);
}

.hd-knowledge-management-page #km-meeting-result,
.hd-knowledge-management-page #km-meeting-clips {
    border-color: rgba(148, 163, 184, 0.34) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.92) !important;
}

.hd-knowledge-management-page #km-meeting-clips article {
    border-color: rgba(14, 165, 233, 0.35) !important;
    border-radius: 10px !important;
    background: linear-gradient(145deg, #ffffff, #f8fafc) !important;
}

.hd-knowledge-management-page .knowledge-km-footer-actions .btn {
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(15, 118, 110, 0.25);
}

.hd-knowledge-management-page .knowledge-km-jobs {
    border-radius: 12px !important;
    border-color: rgba(45, 212, 191, 0.42) !important;
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.88), rgba(240, 253, 250, 0.82)) !important;
    box-shadow: 0 8px 18px rgba(15, 118, 110, 0.12);
}

.hd-knowledge-management-page .knowledge-km-jobs > div {
    border-radius: 10px !important;
}

.hd-knowledge-management-page .knowledge-km-results {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.hd-knowledge-management-page .knowledge-km-results article {
    border: 1px solid rgba(148, 163, 184, 0.32) !important;
    border-radius: 12px !important;
    background: linear-gradient(150deg, #ffffff, #f8fafc) !important;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.07);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hd-knowledge-management-page .knowledge-km-results article:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 22px rgba(15, 23, 42, 0.12);
}

.hd-knowledge-management-page .knowledge-km-results h4 {
    color: #0f172a !important;
}

.hd-knowledge-management-page .knowledge-km-results p {
    color: #334155 !important;
}

.hd-knowledge-page .knowledge-page-header,
.hd-knowledge-page .knowledge-results,
.hd-knowledge-management-page .knowledge-km-card,
.hd-knowledge-management-page .knowledge-km-meeting,
.hd-knowledge-management-page .knowledge-km-jobs {
    animation: knowledgeRise 0.38s ease both;
}

.hd-knowledge-page .knowledge-results { animation-delay: 0.05s; }
.hd-knowledge-management-page .knowledge-km-card:nth-of-type(2) { animation-delay: 0.04s; }
.hd-knowledge-management-page .knowledge-km-card:nth-of-type(3) { animation-delay: 0.08s; }

@keyframes knowledgeRise {
    from {
        transform: translateY(6px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 980px) {
    .hd-knowledge-page {
        border-radius: 13px;
        padding: 0.32rem;
    }

    .hd-knowledge-page .knowledge-page-header {
        padding: 0.8rem;
    }

    .hd-knowledge-page .knowledge-page-header h2 {
        font-size: 1.12rem;
    }

    .hd-knowledge-page .knowledge-header-actions .btn {
        min-height: 34px;
    }
}

@media (max-width: 760px) {
    .hd-knowledge-page .knowledge-header-actions {
        width: 100%;
    }

    .hd-knowledge-page .knowledge-hub-switch {
        gap: 0.35rem;
        padding: 0.4rem;
    }

    .hd-knowledge-page .knowledge-hub-tab {
        flex: 1 1 calc(50% - 0.35rem);
        text-align: center;
        min-width: 0;
    }

    .hd-knowledge-page .knowledge-hub-enrich {
        margin-left: 0;
        width: 100%;
    }

    .hd-knowledge-page .knowledge-header-actions .btn {
        flex: 1 1 calc(50% - 0.4rem);
        min-width: 0;
        font-size: 0.74rem;
        padding: 0.34rem 0.55rem;
    }

    .hd-knowledge-page .knowledge-filter-bar {
        padding: 0.5rem;
        gap: 0.45rem;
    }

    .hd-knowledge-page .knowledge-results,
    .hd-knowledge-management-page .knowledge-km-card,
    .hd-knowledge-management-page .knowledge-km-meeting {
        padding: 0.55rem;
    }

    .hd-knowledge-management-page .knowledge-km-footer-actions .btn {
        width: 100%;
    }
}

/* ─── Proposal / analysis sections ───────────────────────────────── */
.proposal-section {
    margin-bottom: 1rem;
}

.proposal-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin: 0 0 0.4rem;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE STAFF MODE — Bottom Tab Bar + Full-screen pages
   Applies ONLY when: body.mobile-staff-mode (mobile + admin/tecnico)
   ═══════════════════════════════════════════════════════════════════════ */

/* Bottom Tab Bar: hidden by default, shown in mobile-staff-mode */
.mobile-bottom-tabs {
    display: none;
}

body.mobile-staff-mode .mobile-bottom-tabs {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--card-bg, #fff);
    border-top: 1px solid var(--border-color, #e5e7eb);
    z-index: 9999;
    align-items: stretch;
    justify-content: space-around;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
}

.mob-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: none;
    background: none;
    color: var(--text-secondary, #888);
    font-size: 0.65rem;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 2px;
    min-height: 48px;
    position: relative;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.mob-tab-icon {
    font-size: 1.25rem;
    line-height: 1;
}
.mob-tab-label {
    font-size: 0.62rem;
    letter-spacing: 0.02em;
}
.mob-tab.active {
    color: var(--primary-color, #1a1a1a);
    font-weight: 700;
}
.mob-tab.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 2.5px;
    border-radius: 0 0 2px 2px;
    background: var(--primary-color, #1a1a1a);
}

/* Submenu panels (slide up from bottom tabs) */
.mob-submenu {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: var(--card-bg, #fff);
    border-top: 1px solid var(--border-color, #e5e7eb);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
    padding: 1rem 0.75rem 0.6rem;
    animation: mobSubmenuSlideUp 0.2s ease;
    z-index: 1;
}
@keyframes mobSubmenuSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.mob-submenu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}
.mob-submenu-grid button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--border-color, #e5e7eb);
    background: var(--bg-secondary, #f8f8f6);
    border-radius: 12px;
    padding: 0.7rem 0.4rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-primary, #1a1a1a);
    cursor: pointer;
    min-height: 56px;
    transition: background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.mob-submenu-grid button:active {
    transform: scale(0.95);
    background: var(--border-color, #e5e7eb);
}
.mob-submenu-grid button span {
    font-size: 1.3rem;
}

/* ── Mobile Staff: Layout Overrides ─── */
body.mobile-staff-mode {
    overflow: hidden;
}

body.mobile-staff-mode .app-header {
    height: 42px !important;
    min-height: 42px;
    padding: 0.2rem 0.6rem !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
body.mobile-staff-mode .app-header img {
    height: 28px !important;
}
body.mobile-staff-mode .header-content h1,
body.mobile-staff-mode .app-header > div > div > div:first-child {
    font-size: 0.88rem !important;
}
body.mobile-staff-mode .subtitle,
body.mobile-staff-mode .app-header > div > div > div:last-child {
    display: none !important;
}

/* Hide sidebar, hamburger, old mobile tabs, split resizer, widgets toggle */
body.mobile-staff-mode .hd-sidebar,
body.mobile-staff-mode .hamburger-btn,
body.mobile-staff-mode .hamburger-btn-mobile,
body.mobile-staff-mode #sidebar-nav-toggle,
body.mobile-staff-mode #mobile-split-tabs,
body.mobile-staff-mode #split-resizer,
body.mobile-staff-mode #widgets-panel-toggle,
body.mobile-staff-mode .cos-panel-toggle,
body.mobile-staff-mode .sidebar-overlay {
    display: none !important;
}

/* Main content fills screen minus top bar and bottom tabs */
body.mobile-staff-mode .hd-layout {
    min-height: calc(100dvh - 44px - 56px - env(safe-area-inset-bottom, 0px));
    margin-top: 44px;
}
body.mobile-staff-mode .hd-main-content {
    padding: 0.4rem 0.5rem !important;
    padding-bottom: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
    height: calc(100dvh - 44px - 56px - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Pages: full height, scrollable */
body.mobile-staff-mode .hd-page {
    height: 100%;
    overflow-y: auto;
}

/* Session bar compact */
body.mobile-staff-mode .cos-session-bar {
    padding: 0.25rem 0 !important;
    margin-bottom: 0.1rem !important;
    gap: 0.5rem !important;
}
body.mobile-staff-mode .cos-session-title {
    font-size: 13px !important;
}
body.mobile-staff-mode .cos-session-expand {
    display: none !important;
}

/* Asistente page: chat fills available space */
body.mobile-staff-mode #hd-page-asistente.active {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding-right: 0 !important;
}
body.mobile-staff-mode #asistente-split {
    flex-direction: column !important;
    gap: 0 !important;
    flex: 1 !important;
    min-height: 0 !important;
}
body.mobile-staff-mode #mode-chat {
    flex: 1 !important;
    min-height: 0 !important;
}
/* Analysis result: hidden on chat, toggle via old mobile tabs or separate page */
body.mobile-staff-mode #hd-analysis-result {
    display: none !important;
}

/* Chat input sticky at bottom */
body.mobile-staff-mode #mode-chat > div:last-of-type {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: var(--bg-secondary, #f4f3f0);
    padding-bottom: 0.25rem;
}

/* Chat action bar: horizontal scroll */
body.mobile-staff-mode #chat-action-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.25rem !important;
}
body.mobile-staff-mode #chat-action-bar::-webkit-scrollbar { display: none; }
body.mobile-staff-mode #chat-action-bar .btn {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 0.78rem;
    padding: 0.35rem 0.65rem;
}

/* Widgets bar: horizontal chip strip */
body.mobile-staff-mode #hd-widgets-bar {
    position: static !important;
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 0.3rem;
    transform: none !important;
    padding: 0.15rem 0;
    scrollbar-width: none;
}
body.mobile-staff-mode #hd-widgets-bar::-webkit-scrollbar { display: none; }

/* Tables: horizontal scroll wrapper */
body.mobile-staff-mode table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
body.mobile-staff-mode table thead,
body.mobile-staff-mode table tbody {
    display: table;
    width: 100%;
}

/* Forms: single column, full width */
body.mobile-staff-mode div[style*="grid-template-columns"],
body.mobile-staff-mode div[style*="display: grid"] {
    display: flex !important;
    flex-direction: column !important;
}
body.mobile-staff-mode input,
body.mobile-staff-mode select,
body.mobile-staff-mode textarea {
    max-width: 100% !important;
    font-size: 16px !important; /* prevents iOS zoom on focus */
}

/* Touch targets */
body.mobile-staff-mode .btn,
body.mobile-staff-mode button {
    min-height: 44px;
}

/* Modals: full-screen bottom sheet */
body.mobile-staff-mode .modal {
    align-items: flex-end !important;
}
body.mobile-staff-mode .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92dvh;
    border-radius: 14px 14px 0 0 !important;
    margin-top: auto;
}

/* Status indicator compact */
body.mobile-staff-mode #apiStatus .status-text { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE TOP BAR — User info + logout for mobile
   ═══════════════════════════════════════════════════════════════════════ */
.mobile-top-bar {
    display: none;
}
body.mobile-staff-mode .mobile-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    padding: 0 0.6rem;
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--cos-sidebar, #0f172a);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    z-index: 9998;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
body.mobile-staff-mode .app-header {
    display: none !important;
}

.mob-topbar-left {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.mob-topbar-logo {
    height: 26px;
    width: auto;
    border-radius: 4px;
}
.mob-topbar-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--cos-gold, #c8a97e);
}
.mob-topbar-role {
    font-size: 0.58rem;
    font-weight: 600;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: rgba(200,169,126,0.12);
    color: var(--cos-gold, #c8a97e);
    border: 1px solid rgba(200,169,126,0.25);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.mob-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.mob-topbar-user {
    font-size: 0.72rem;
    color: var(--cos-text-sec, #94a3b8);
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mob-topbar-logout {
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.3);
    color: #ef4444;
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    cursor: pointer;
    min-height: 32px;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE UX REFINEMENTS — iPhone 14 / SE / small screens
   ═══════════════════════════════════════════════════════════════════════ */

/* Ensure non-active pages are truly hidden */
body.mobile-staff-mode .hd-page:not(.active) {
    display: none !important;
}

/* Pages other than asistente: proper padding and scroll */
body.mobile-staff-mode .hd-page.active {
    padding-bottom: 1rem;
}

/* Submenu: better spacing for smaller screens */
@media (max-width: 390px) {
    .mob-submenu-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.4rem;
    }
    .mob-submenu-grid button {
        padding: 0.55rem 0.3rem;
        font-size: 0.68rem;
    }
    .mob-topbar-user {
        max-width: 60px;
    }
}

/* Fix ticket-skills section filters overflow on mobile */
body.mobile-staff-mode #hd-page-ticket-skills .tsk-tab {
    padding: 0.35rem 0.6rem;
    font-size: 0.72rem;
}

/* Correlation section: compact layout */
body.mobile-staff-mode #hd-page-ticket-skills div[style*="display:flex"][style*="gap:0.5rem"] {
    flex-direction: column;
    gap: 0.3rem;
}

/* Bottom tab safe area padding for phones with gesture bar */
body.mobile-staff-mode .mobile-bottom-tabs {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ═══════════════════════════════════════════════════════════════════════
   TABLET STAFF MODE — Mini sidebar (60px) + Content area
   Applies ONLY when: body.tablet-staff-mode (tablet + admin/tecnico)
   ═══════════════════════════════════════════════════════════════════════ */

body.tablet-staff-mode .mobile-bottom-tabs {
    display: none !important;
}

body.tablet-staff-mode .hd-sidebar {
    position: fixed !important;
    width: 60px !important;
    top: 0 !important;
    left: 0 !important;
    height: 100dvh !important;
    z-index: 100;
    overflow: hidden;
    transform: none !important;
    padding: 0.5rem 0.3rem !important;
    transition: width 0.25s ease;
}
body.tablet-staff-mode .hd-sidebar:hover {
    width: 240px !important;
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
}

/* Sidebar nav: icon only, label on hover */
body.tablet-staff-mode .hd-sidebar .hd-nav-btn {
    justify-content: center !important;
    padding: 0.6rem !important;
    min-height: 44px;
    overflow: hidden;
}
body.tablet-staff-mode .hd-sidebar .hd-nav-btn > span:not(.hd-nav-icon) {
    display: none !important;
}
body.tablet-staff-mode .hd-sidebar:hover .hd-nav-btn {
    justify-content: flex-start !important;
    padding: 0.6rem 0.8rem !important;
}
body.tablet-staff-mode .hd-sidebar:hover .hd-nav-btn > span:not(.hd-nav-icon) {
    display: inline !important;
}

/* Sidebar section labels hidden until hover */
body.tablet-staff-mode .hd-sidebar .hd-nav-group-title {
    display: none;
}
body.tablet-staff-mode .hd-sidebar:hover .hd-nav-group-title {
    display: block;
}

/* Sidebar footer: compact */
body.tablet-staff-mode .hd-sidebar > div:first-child,
body.tablet-staff-mode .hd-sidebar > div:last-child {
    overflow: hidden;
}

/* Hide hamburger and overlay — sidebar always visible */
body.tablet-staff-mode .hamburger-btn,
body.tablet-staff-mode .hamburger-btn-mobile,
body.tablet-staff-mode .sidebar-overlay,
body.tablet-staff-mode #mobile-split-tabs {
    display: none !important;
}

/* Content area: offset by sidebar */
body.tablet-staff-mode .hd-main-content {
    margin-left: 60px !important;
    padding: 0.6rem 0.8rem !important;
    width: calc(100% - 60px) !important;
    transition: margin-left 0.25s ease;
}

/* Header compact */
body.tablet-staff-mode .app-header {
    height: 48px !important;
    margin-left: 60px !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
}

/* Analysis panel: collapsible on right */
body.tablet-staff-mode #hd-analysis-result {
    max-width: 280px !important;
    min-width: 200px !important;
}

/* Asistente page: no extra padding */
body.tablet-staff-mode #hd-page-asistente {
    padding-right: 0 !important;
}

/* Widgets bar inside right panel, not absolute */
body.tablet-staff-mode #hd-widgets-bar {
    position: static !important;
    width: 100% !important;
    transform: none !important;
}