/* Identidad visual NovaDesk: la lógica se conserva en app.js. */
:root {
    --nova-navy: #0b1f3a;
    --nova-blue: #123b69;
    --nova-cyan: #13b9b3;
    --nova-ink: #17324d;
    --nova-muted: #6d8198;
    --nova-line: #dce7f1;
    --nova-surface: #ffffff;
    --nova-canvas: #f4f8fc;
}

* { box-sizing: border-box; }

body {
    color: var(--nova-ink) !important;
    background: var(--nova-canvas) !important;
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* Barra superior y acceso */
body > header {
    min-height: 76px;
    padding: 14px 24px !important;
    color: white;
    background: linear-gradient(108deg, var(--nova-navy), var(--nova-blue)) !important;
    border-color: rgba(255,255,255,.12) !important;
    box-shadow: 0 4px 18px rgba(11,31,58,.18) !important;
}
body > header h1 { color: white !important; letter-spacing: -.02em; }
body > header p { color: #c4d5e7 !important; }
body > header .novabot-logo-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    height: 42px;
    padding: 5px 9px;
    background: rgba(255,255,255,.98) !important;
    border-radius: 10px !important;
    box-shadow: 0 5px 14px rgba(4,31,59,.22);
}
.novabot-logo {
    display: block;
    width: auto;
    max-width: 164px;
    height: 31px;
    object-fit: contain;
}
.novabot-logo-frame-login {
    display: inline-flex !important;
    min-width: 0 !important;
    width: 210px;
    height: 68px !important;
    padding: 8px 12px !important;
}
.novabot-logo-login {
    max-width: 186px;
    height: 44px;
}
body > header > div:nth-child(2) {
    color: #deebf8;
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.14) !important;
    backdrop-filter: blur(10px);
}
body > header > div:nth-child(2) > span { color: #deebf8 !important; }
body > header #current-user-panel {
    border-color: rgba(255,255,255,.14) !important;
    background: rgba(255,255,255,.08) !important;
}
body > header #current-user-name { color: white !important; }
body > header #current-user-role { color: #b7cbe0 !important; }
body > header #btn-logout { color: #d5e4f1 !important; }
body > header #btn-logout:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; }

#login-overlay {
    background:
        radial-gradient(circle at 20% 15%, rgba(19,185,179,.24), transparent 29%),
        radial-gradient(circle at 82% 82%, rgba(54,131,207,.25), transparent 31%),
        linear-gradient(135deg, #081729, #123b69) !important;
}
#login-form {
    border: 1px solid rgba(255,255,255,.5);
    background: rgba(255,255,255,.97) !important;
    box-shadow: 0 26px 70px rgba(1,15,35,.35) !important;
}
#login-form .novabot-logo-frame { box-shadow: 0 9px 20px rgba(19,185,179,.2); }
#login-form h2 { color: var(--nova-navy) !important; }
#login-submit, #settings-form > button, #btn-generate-qr {
    background: linear-gradient(135deg, var(--nova-blue), var(--nova-cyan)) !important;
    box-shadow: 0 5px 12px rgba(18,59,105,.18);
}
#login-submit:hover, #settings-form > button:hover, #btn-generate-qr:hover { filter: brightness(1.06); }

/* Estructura de trabajo */
aside, #control-center { background: var(--nova-surface) !important; border-color: var(--nova-line) !important; }
aside { width: 304px !important; }
#control-center { width: 380px !important; box-shadow: -8px 0 24px rgba(25,58,92,.035); }
main { background: linear-gradient(145deg, #f6faff, #edf5fb) !important; }
aside > div:first-child, #active-chat-header, #input-area-container { border-color: var(--nova-line) !important; }
#active-chat-header, #input-area-container { background: rgba(255,255,255,.92) !important; }
#active-chat-header h3 { color: var(--nova-navy) !important; }

/* Formularios y controles */
input, textarea, select {
    color: var(--nova-ink) !important;
    border-color: #cddcea !important;
    background-color: #fff !important;
    border-radius: 9px !important;
}
input::placeholder, textarea::placeholder { color: #94a6b8 !important; }
input:focus, textarea:focus, select:focus {
    border-color: var(--nova-cyan) !important;
    box-shadow: 0 0 0 3px rgba(19,185,179,.13) !important;
}
#chat-search { background: #f7fafd !important; }
#send-button {
    background: linear-gradient(135deg, var(--nova-blue), var(--nova-cyan)) !important;
    border-radius: 9px !important;
    box-shadow: 0 5px 12px rgba(18,59,105,.16);
}
#send-button:hover { filter: brightness(1.06); }
#send-button:disabled { background: #b8c7d5 !important; box-shadow: none; }

/* Conversaciones y mensajes */
#chats-list > * { border-color: #e7eef5 !important; }
#chats-list > *:hover { background: #eff9f8 !important; }
.bubble {
    max-width: 75%;
    position: relative;
    box-shadow: 0 5px 14px rgba(23,50,77,.08) !important;
    border-radius: 14px !important;
}
.bubble-received {
    background: white !important;
    border: 1px solid #e0eaf2;
    border-top-left-radius: 4px !important;
}
.bubble-sent-bot {
    background: linear-gradient(135deg, #d8f8f1, #e6fbf7) !important;
    color: #0d4c52 !important;
    border-top-right-radius: 4px !important;
}
.bubble-sent-user {
    background: #dcecff !important;
    color: #143c66 !important;
    border-top-right-radius: 4px !important;
}

/* Centro de administración */
#control-center > div:first-child { background: #f7fafd !important; border-color: var(--nova-line) !important; }
.tab-btn { color: var(--nova-muted) !important; border-color: transparent !important; }
.tab-btn:hover { background: #edf7f8 !important; color: var(--nova-blue) !important; }
.tab-btn.border-green-500 {
    color: var(--nova-blue) !important;
    border-color: var(--nova-cyan) !important;
    background: #fff !important;
}
#dropzone { border-color: #b7d6dd !important; background: #f8fdfd; }
#dropzone:hover { border-color: var(--nova-cyan) !important; background: #effcfa !important; }
#llm-status-card, #tab-settings .bg-gray-50 { border-color: var(--nova-line) !important; background: #f7fafd !important; }
#tab-settings h4, #tab-files h3 { color: var(--nova-navy) !important; }
#btn-fetch-models, #simulator-form button { background: var(--nova-blue) !important; }
#user-form button { background: var(--nova-navy) !important; }

/* Badges y estados */
#bot-status-badge { border: 1px solid rgba(255,255,255,.15); }
#bot-status-badge.bg-red-100 { background: rgba(255,237,237,.95) !important; color: #b42318 !important; }
#bot-status-badge.bg-green-100 { background: #d9f8ed !important; color: #087443 !important; }
#wa-connection-status.bg-red-100 { background: #fee9e7 !important; color: #b42318 !important; }
#wa-connection-status.bg-green-100 { background: #d9f8ed !important; color: #087443 !important; }
#chat-mode-indicator span { background: #e2f0ff !important; color: #155b9c !important; }

/* Scrollbars y transiciones */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: #eef4f8; }
::-webkit-scrollbar-thumb { background: #b6c8d8; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #7f9bb3; }
.tab-content { transition: opacity .15s linear; }
.transition-all { transition: all .2s ease-in-out; }

@media (max-width: 1100px) {
    aside { width: 270px !important; }
    #control-center { width: 330px !important; }
    body > header { padding: 12px 16px !important; }
}