@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ════════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES — paleta naranja Mistral BS
   ════════════════════════════════════════════════════════════ */
:root {
    /* Brand */
    --color-accent:          #F97316;
    --color-accent-hover:    #FB923C;
    --color-accent-dark:     #EA580C;
    --color-accent-soft:     #FDBA74;
    --color-accent-glow:     rgba(249,115,22,0.35);
    --color-accent-glow-sm:  rgba(249,115,22,0.12);
    --color-accent-bg:       rgba(249,115,22,0.08);
    --color-accent-bg-xs:    rgba(249,115,22,0.04);

    /* Backgrounds */
    --bg-base:     #0C0C0E;
    --bg-topbar:   #0D0D12;
    --bg-sidebar:  #111116;
    --bg-hover:    #16161C;
    --bg-input:    #1A1A22;
    --bg-modal:    #13131A;
    --bg-card:     #111116;

    /* Borders */
    --border-base:   #1E1E28;
    --border-mid:    #252530;
    --border-strong: #353545;

    /* Text */
    --text-primary:    #EEEEF6;
    --text-secondary:  #9292A8;
    --text-tertiary:   #787890;
    --text-placeholder:#58586A;
    --text-table:      #C0C0CE;
    --text-th:         #686880;

    /* Status */
    --color-error:   #F87171;
    --color-warning: #FBBF24;
    --color-success: #4ADE80;

    /* Gradients */
    --gradient-brand:    linear-gradient(120deg, var(--color-accent), var(--color-accent-soft));
    --gradient-logo:     linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
    --gradient-progress: linear-gradient(90deg, var(--color-accent), var(--color-accent-dark));

    /* Radii */
    --radius-xs:  6px;
    --radius-sm:  8px;
    --radius-md:  10px;
    --radius-lg:  14px;
    --radius-xl:  16px;
    --radius-full:50%;

    /* Shadows */
    --shadow-glow:   0 0 24px var(--color-accent-glow);
    --shadow-glow-sm:0 0 16px var(--color-accent-glow);
    --shadow-logo:   0 0 40px var(--color-accent-glow);
    --shadow-modal:  0 0 60px rgba(249,115,22,0.10), 0 30px 60px rgba(0,0,0,0.70);
    --shadow-card:   0 8px 30px rgba(249,115,22,0.08);
    --shadow-deep:   0 20px 60px rgba(0,0,0,0.60);

    /* Transitions */
    --t-fast:   0.12s ease;
    --t-base:   0.18s ease;
    --t-slow:   0.28s ease;
    --t-spring: 0.3s cubic-bezier(0.4,0,0.2,1);

    /* Sidebar */
    --sidebar-width: 240px;
    --topbar-height: 52px;
}

/* ════════════════════════════════════════════════════════════
   RESET & BASE
   ════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
* { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

/* Base font size: bumped up so text reads a bit larger across the whole app.
   Everything uses rem (incl. Tailwind utilities), so this scales text uniformly. */
html { font-size: 17px; }

/* ════════════════════════════════════════════════════════════
   SCROLLBARS
   ════════════════════════════════════════════════════════════ */
.scrollbar-hide { -ms-overflow-style:none; scrollbar-width:none; }
.scrollbar-hide::-webkit-scrollbar { display:none; }

::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-mid); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--border-strong); }

/* ════════════════════════════════════════════════════════════
   TOPBAR
   ════════════════════════════════════════════════════════════ */
.topbar {
    height: var(--topbar-height);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: var(--bg-topbar);
    border-bottom: 1px solid var(--border-base);
    position: relative;
    z-index: 30;
}
.topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.topbar-logo {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    background: var(--gradient-logo);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-glow-sm);
    transition: box-shadow var(--t-base), transform var(--t-base);
}
.topbar-brand:hover .topbar-logo {
    box-shadow: var(--shadow-glow);
    transform: scale(1.05);
}
.topbar-name {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.topbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--radius-md);
    transition: background var(--t-fast);
}
.topbar-user:hover { background: var(--bg-input); }
.topbar-user-info { text-align: right; }
.topbar-user-name {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
    display: block;
    line-height: 1.2;
}
.topbar-user-role {
    font-size: 0.7rem;
    color: var(--text-secondary);
    display: block;
}

/* ════════════════════════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════════════════════════ */
.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-base);
    height: 100%;
    overflow: hidden;
    position: relative;
    transition: width var(--t-base), min-width var(--t-base);
}
/* Disable the width transition while the user is dragging the resize handle */
.sidebar.resizing {
    transition: none;
}
/* Draggable handle on the right edge to resize the sidebar */
.sidebar-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    z-index: 40;
    background: transparent;
    transition: background var(--t-fast);
}
.sidebar-resize-handle:hover,
.sidebar.resizing .sidebar-resize-handle {
    background: var(--color-accent);
}
/* No resizing while collapsed */
.sidebar.collapsed .sidebar-resize-handle {
    display: none;
}
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ════════════════════════════════════════════════════════════
   NAV ITEMS
   ════════════════════════════════════════════════════════════ */
.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), border-left-color var(--t-fast);
    border-left: 2px solid transparent;
    text-decoration: none;
    position: relative;
    outline: none;
}
.nav-item:hover {
    background: var(--bg-hover);
    color: #C8C8DA;
}
.nav-item:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.nav-item.active {
    background: var(--color-accent-bg);
    border-left-color: var(--color-accent);
    color: var(--color-accent);
}
.nav-item .nav-icon {
    width: 15px;
    text-align: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.nav-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Submenu */
.submenu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 7px 12px 7px 30px;
    font-size: 0.8rem;
    color: var(--text-tertiary);
    border-left: 2px solid transparent;
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    transition: color var(--t-fast), background var(--t-fast), border-left-color var(--t-fast);
    background: transparent;
    cursor: pointer;
    outline: none;
}
.submenu-item .nav-icon {
    width: 15px;
    text-align: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}
.submenu-item:hover {
    color: var(--color-accent);
    border-left-color: rgba(249,115,22,0.4);
    background: var(--color-accent-bg-xs);
}
.submenu-item.active {
    color: var(--color-accent);
    border-left-color: var(--color-accent);
    background: var(--color-accent-bg);
}

/* ════════════════════════════════════════════════════════════
   SIDEBAR COLLAPSE TOGGLE
   ════════════════════════════════════════════════════════════ */
.sidebar-footer {
    flex-shrink: 0;
    padding: 10px;
    border-top: 1px solid var(--border-base);
    display: flex;
    justify-content: flex-end;
}
.sidebar-toggle {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-base);
    cursor: pointer;
    outline: none;
    transition: background var(--t-fast), color var(--t-fast);
}
.sidebar-toggle:hover {
    background: var(--bg-hover);
    color: var(--color-accent);
}
.sidebar-toggle i {
    font-size: 0.8rem;
    transition: transform var(--t-base);
}

/* Collapsed state: show icons only */
.sidebar.collapsed {
    width: 64px;
    min-width: 64px;
}
.sidebar.collapsed .nav-label {
    display: none;
}
.sidebar.collapsed .nav-arrow {
    display: none;
}
/* Collapsed: keep the subsection icons visible as an icon-only rail */
.sidebar.collapsed .nav-submenu {
    max-height: none !important;
    overflow: visible !important;
    padding: 2px 0 !important;
    margin-top: 0 !important;
}
.sidebar.collapsed .nav-submenu br {
    display: none;
}
.sidebar.collapsed .submenu-item {
    justify-content: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
    border-left-color: transparent;
    border-radius: var(--radius-sm);
}
.sidebar.collapsed .nav-item {
    justify-content: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
}
.sidebar.collapsed .sidebar-footer {
    justify-content: center;
}
.sidebar.collapsed .sidebar-toggle i {
    transform: rotate(180deg);
}

/* ════════════════════════════════════════════════════════════
   AVATAR
   ════════════════════════════════════════════════════════════ */
.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--gradient-logo);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0;
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.topbar-user:hover .user-avatar {
    transform: scale(1.06);
    box-shadow: 0 0 12px rgba(249,115,22,0.4);
}

/* ════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════ */
.accent-btn {
    background: var(--color-accent);
    color: #fff;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-sm);
    transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.accent-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0);
    transition: background var(--t-fast);
    border-radius: inherit;
}
.accent-btn:hover {
    background: var(--color-accent-hover);
    box-shadow: var(--shadow-glow);
    transform: translateY(-1px);
}
.accent-btn:hover::after { background: rgba(255,255,255,0.04); }
.accent-btn:active { transform: translateY(0); box-shadow: none; }
.accent-btn:disabled {
    background: var(--border-mid);
    color: var(--text-secondary);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.cancel-btn {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-sm);
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
    cursor: pointer;
}
.cancel-btn:hover {
    background: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

/* ════════════════════════════════════════════════════════════
   FORM INPUTS
   ════════════════════════════════════════════════════════════ */
.form-input {
    background: var(--bg-hover);
    border: 1px solid var(--border-mid);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 9px 13px;
    width: 100%;
    font-size: 0.875rem;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
    outline: none;
}
.form-input:hover { border-color: var(--border-strong); }
.form-input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-glow-sm);
    background: var(--bg-input);
}
.form-input::placeholder { color: var(--text-placeholder); }
select.form-input option { background: var(--bg-hover); color: var(--text-primary); }

/* ── Checkboxes: the native control is too faint against the dark background ── */
.form-checkbox {
    appearance: none;
    width: 17px;
    height: 17px;
    flex: none;
    border-radius: 4px;
    border: 1.5px solid var(--border-strong);
    background: var(--bg-hover);
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.form-checkbox:checked {
    background: var(--color-success);
    border-color: var(--color-success);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230C0C0E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 11px;
}
.form-checkbox:disabled { opacity: 0.5; cursor: not-allowed; }
.form-checkbox:focus-visible { outline: 2px solid var(--color-success); outline-offset: 1px; }

/* ── Drag & drop zone ── */
.drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1rem 1.25rem;
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    transition: border-color var(--t-fast), background var(--t-fast);
    text-align: center;
}
.drop-zone.dragover {
    border-color: var(--color-accent);
    background: var(--color-accent-glow-sm);
}
.drop-zone-icon {
    font-size: 1.4rem;
    color: var(--color-accent);
    pointer-events: none;
}
.drop-zone-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
    pointer-events: none;
    margin: 0;
}

/* ════════════════════════════════════════════════════════════
   SECTION HEADER
   ════════════════════════════════════════════════════════════ */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-base);
    flex-shrink: 0;
    min-height: 58px;
    gap: 12px;
    flex-wrap: wrap;
}
.section-header-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   MODAL OVERLAYS
   ════════════════════════════════════════════════════════════ */
#objectModalEdit, #objectModalNew,
#categoryModalEdit, #categoryModalNew,
#subcategoryModalEdit, #subcategoryModalNew,
#ooFieldModalEdit, #ooFieldModalNew,
#chatModalEdit, #chatModalNew,
#chatbotModalEdit, #chatbotModalNew,
#kbModal {
    justify-content: center;
    align-items: center;
    background: rgba(5,5,8,0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#objectModalEditContainer, #objectModalNewContainer,
#categoryModalEditContainer, #categoryModalNewContainer,
#subcategoryModalEditContainer, #subcategoryModalNewContainer,
#ooFieldModalEditContainer, #ooFieldModalNewContainer,
#chatModalEditContainer, #chatModalNewContainer,
#chatbotModalEditContainer, #chatbotModalNewContainer {
    background: var(--bg-modal);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    padding: 28px;
}

#kbModalContainer {
    background: var(--bg-modal);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    padding: 32px 36px;
}

/* ════════════════════════════════════════════════════════════
   USER MENU SLIDE PANEL
   ════════════════════════════════════════════════════════════ */
.menu-slide {
    transform: translateX(100%);
    transition: transform var(--t-spring);
}
.menu-slide.open { transform: translateX(0); }

/* ════════════════════════════════════════════════════════════
   LOADING MODAL
   ════════════════════════════════════════════════════════════ */
@keyframes loading-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

#loadingModal {
    z-index: 9999 !important;
    background: rgba(8,8,12,0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#loadingModal svg {
    animation: loading-spin 1s linear infinite;
    transform-origin: center center;
    will-change: transform;
}

/* ════════════════════════════════════════════════════════════
   ANIMACIONES MODALES
   ════════════════════════════════════════════════════════════ */
.modal-enter         { transition: transform 0.22s ease-out, opacity 0.22s ease-out; transform: scale(0.95) translateY(8px); opacity:0; }
.modal-enter-active  { transform: scale(1) translateY(0); opacity:1; }
.modal-leave         { transition: transform 0.16s ease-in, opacity 0.16s ease-in; transform: scale(1) translateY(0); opacity:1; }
.modal-leave-active  { transform: scale(0.95) translateY(8px); opacity:0; }

/* ════════════════════════════════════════════════════════════
   ANIMACIONES GENERALES
   ════════════════════════════════════════════════════════════ */

/* Fade-in con slide-up (mensajes chat, cards, elementos de entrada) */
.message-fade-in {
    animation: fadeSlideUp 0.28s ease-out both;
}
@keyframes fadeSlideUp {
    from { opacity:0; transform: translateY(10px); }
    to   { opacity:1; transform: translateY(0); }
}

/* Fade-in suave para secciones de página */
.page-fade-in {
    animation: pageFadeIn 0.4s ease-out both;
}
@keyframes pageFadeIn {
    from { opacity:0; }
    to   { opacity:1; }
}

/* Slide-up para cards de bienvenida */
.card-slide-up {
    animation: cardSlideUp 0.45s ease-out both;
}
@keyframes cardSlideUp {
    from { opacity:0; transform: translateY(18px); }
    to   { opacity:1; transform: translateY(0); }
}
.card-slide-up:nth-child(1) { animation-delay: 0.05s; }
.card-slide-up:nth-child(2) { animation-delay: 0.12s; }
.card-slide-up:nth-child(3) { animation-delay: 0.19s; }

/* Dots de escritura IA */
.typing-dots { display:inline-block; animation: typingDots 1.4s infinite; }
@keyframes typingDots {
    0%,20%  { opacity:0.2; }
    40%     { opacity:1;   }
    60%,100%{ opacity:0.2; }
}

/* Pulso suave en el logo de loading */
@keyframes pulseSoft {
    0%,100% { opacity:1; }
    50%     { opacity:0.6; }
}

/* Aparición de mensajes toast/feedback */
.toast-enter {
    animation: toastEnter 0.32s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes toastEnter {
    from { opacity:0; transform: translateX(24px); }
    to   { opacity:1; transform: translateX(0); }
}
.toast-leave {
    animation: toastLeave 0.22s ease-in both;
}
@keyframes toastLeave {
    from { opacity:1; transform: translateX(0); }
    to   { opacity:0; transform: translateX(12px); }
}

/* Entrada de filas de tabla */
.row-enter {
    animation: rowEnter 0.22s ease-out both;
}
@keyframes rowEnter {
    from { opacity:0; transform: translateX(-6px); }
    to   { opacity:1; transform: translateX(0); }
}

/* Skeleton loader */
.skeleton {
    background: linear-gradient(90deg, var(--bg-hover) 25%, var(--bg-input) 50%, var(--bg-hover) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: var(--radius-sm);
}
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Spin loader pequeño */
.spin { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Spinner del indicador de "pensando" — siempre activo */
.thinking-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.12);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

/* ════════════════════════════════════════════════════════════
   REDUCE MOTION — accesibilidad
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    /* Excepción: el spinner de "pensando" siempre gira */
    .thinking-spinner {
        animation-duration: 0.75s !important;
        animation-iteration-count: infinite !important;
    }
}

/* ════════════════════════════════════════════════════════════
   CHAT TEXTAREA
   ════════════════════════════════════════════════════════════ */
#messageInput {
    height: 44px;
    max-height: 160px;
    overflow-y: auto;
    resize: none;
    transition: height var(--t-fast);
}

/* ════════════════════════════════════════════════════════════
   SEND BUTTON OVERRIDE
   ════════════════════════════════════════════════════════════ */
#sendButton {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
}

/* ════════════════════════════════════════════════════════════
   TABLAS (generadas por JS)
   ════════════════════════════════════════════════════════════ */

/* Contenedor de tabla */
.table-wrapper {
    overflow: auto;
    max-height: calc(100vh - 220px);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-base);
    background: #0A0A0F;
}

/* Monitoring detail tables (Time / Money / Tokens): capped shorter than the generic wrapper so the
   table never runs to the very bottom of the screen. That leaves a margin below it for the record
   count / "Showing N of M records" text, which was otherwise cut off (SOAI-244 feedback). Scoped
   to the three Monitoring containers so no other table in the app is affected. */
#tcTimeContent .table-wrapper,
#tcMoneyContent .table-wrapper,
#tcTokensContent .table-wrapper {
    max-height: calc(100vh - 340px);
}

table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

/* Suprimir bordes de Tailwind; usar solo border-bottom */
table th,
table td {
    border: none !important;
    border-bottom: 1px solid var(--border-base) !important;
}

th, td {
    padding: 11px 16px;
    text-align: left;
}

/* SOAI-248: Time Consumption detail table — columns centered, unlike every other table. */
.tc-centered-table th,
.tc-centered-table td {
    text-align: center;
}

th {
    background: #0D0D12;
    color: #72728A;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 5;
}

/* Acento naranja en el borde izquierdo del primer th */
.table-wrapper table th:first-child {
    border-left: 2px solid var(--color-accent) !important;
}

td {
    background: transparent;
    color: #C4C4D6;
    font-size: 0.84rem;
    transition: background var(--t-fast), color var(--t-fast);
}

/* Primera columna destacada */
table td:first-child {
    color: #DEDED0;
    font-weight: 500;
}

/* Última fila sin borde inferior */
table tr:last-child td {
    border-bottom: none !important;
}

tr:hover td {
    background: rgba(249,115,22,0.05) !important;
    color: #E2E2EA;
}

tr:hover td:first-child { color: #F97316; }

tr.selected td { background: var(--color-accent-bg) !important; color: var(--color-accent); }

/* Iconos de acción */
table .fa-trash-alt  { color: #6A6A80 !important; transition: color var(--t-fast); }
table .fa-trash-alt:hover  { color: #F87171 !important; }
table .fa-pencil-alt { color: #6A6A80 !important; transition: color var(--t-fast); }
table .fa-pencil-alt:hover { color: var(--color-accent) !important; }

/* ════════════════════════════════════════════════════════════
   PROGRESS BAR (wizard)
   ════════════════════════════════════════════════════════════ */
#modalProgressBar {
    background: var(--gradient-progress);
    transition: width 0.35s ease;
}

/* ════════════════════════════════════════════════════════════
   LOGIN PAGE
   ════════════════════════════════════════════════════════════ */
.login-glow-orb {
    position: fixed;
    border-radius: var(--radius-full);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
    animation: orbFloat 8s ease-in-out infinite alternate;
}
.login-glow-orb:nth-child(2) { animation-delay: -4s; }
@keyframes orbFloat {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(12px, -18px) scale(1.04); }
}

/* ════════════════════════════════════════════════════════════
   WELCOME PAGE
   ════════════════════════════════════════════════════════════ */
.welcome-greeting {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* ════════════════════════════════════════════════════════════
   FEATURE CARDS (welcome)
   ════════════════════════════════════════════════════════════ */
.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-lg);
    padding: 20px;
    transition: border-color var(--t-slow), transform var(--t-slow), box-shadow var(--t-slow);
    text-decoration: none;
    display: block;
    cursor: pointer;
    outline: none;
}
.feature-card:hover {
    border-color: rgba(249,115,22,0.30);
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
}
.feature-card:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}
.feature-card:active { transform: translateY(-1px); }

.feature-card .card-icon {
    transition: transform var(--t-base);
}
.feature-card:hover .card-icon { transform: scale(1.1) rotate(-3deg); }

/* ════════════════════════════════════════════════════════════
   CHAT INPUT WRAPPER
   ════════════════════════════════════════════════════════════ */
.chat-input-wrap {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    background: var(--bg-sidebar);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-lg);
    padding: 10px 12px;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.chat-input-wrap:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-glow-sm);
}

/* ════════════════════════════════════════════════════════════
   PASSWORD INPUT — ocultar controles nativos del navegador
   ════════════════════════════════════════════════════════════ */
input[type=password]::-ms-reveal,
input[type=password]::-ms-clear { display:none; }

/* ════════════════════════════════════════════════════════════
   BRAND TEXT — helper reutilizable
   ════════════════════════════════════════════════════════════ */
.brand-text {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* ════════════════════════════════════════════════════════════
   MISC HELPERS
   ════════════════════════════════════════════════════════════ */
#newMTOButton { text-align:right; }

/* Línea divisoria sutil */
.divider {
    height: 1px;
    background: var(--border-base);
    margin: 12px 0;
}

/* Badge de estado */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.status-badge.ok      { background: rgba(74,222,128,0.12); color: var(--color-success); }
.status-badge.error   { background: rgba(248,113,113,0.12); color: var(--color-error); }
.status-badge.warning { background: rgba(251,191,36,0.12); color: var(--color-warning); }

/* Icono de acción en tablas */
.action-icon {
    cursor: pointer;
    color: var(--text-secondary);
    transition: color var(--t-fast), transform var(--t-fast);
    padding: 4px;
    border-radius: var(--radius-xs);
}
.action-icon:hover { color: var(--color-accent); transform: scale(1.15); }
.action-icon.danger:hover { color: var(--color-error); transform: scale(1.15); }

/* ════════════════════════════════════════════════════════════
   ANALYTICS — dataviz tokens (paleta validada con la skill dataviz
   contra la superficie oscura real de la app, --bg-card #111116 /
   --bg-base #0C0C0E). Dos series fijas, nunca intercambiadas:
   naranja = Total, azul = Media. Ver PR de SOAI-248 para el
   informe de validación (CVD, contraste, banda de luminosidad).
   ════════════════════════════════════════════════════════════ */
:root {
    --viz-series-total: #d95926;
    --viz-series-avg:   #3987e5;
    /* SOAI-249: third series, for the GPT call count. Kept out of the orange/blue pair on purpose —
       on the "GPT Calls and Time" screen orange already means "Total time" and blue "Average time",
       and the rule above is that those two are never reassigned.

       Validated with the dataviz skill against this surface (validate_palette.js, --mode dark
       --surface #111116): the 3-colour set passes the lightness band, chroma floor, normal-vision
       floor and 3:1 contrast. Its weakest adjacent pair is calls↔avg (teal↔blue): ΔE 15.6 protan
       but only 4.8 tritan. That is acceptable here *because those two never share a plot* — the
       call count is alone in the left chart, and the right chart holds only orange+blue, whose own
       separation is ΔE 26.8 protan / 32.4 tritan. Teal and blue only ever meet as KPI swatches,
       each sitting next to its own written label, so identity never rests on hue alone. If a future
       ticket ever plots calls and average time together, re-run the validator first. */
    --viz-series-calls: #2aa89d;
    --viz-grid:         var(--border-base);
    --viz-axis-text:    var(--text-secondary);
}

/* ── KPI stat tiles ── */
.kpi-card {
    background: var(--bg-card);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.kpi-card-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}
/* Identity comes from a small swatch beside the label, never from coloring the value itself
   (dataviz skill, marks-and-anatomy.md: "text never wears the data color"). */
.kpi-card-swatch {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.kpi-card-swatch.total   { background: var(--viz-series-total); }
.kpi-card-swatch.avg     { background: var(--viz-series-avg); }
.kpi-card-swatch.calls   { background: var(--viz-series-calls); }
/* SOAI-249: the Success/Error sub-figures reuse the same semantic green/red as the status badges
   in the detail table below them, instead of the generic total/avg palette — green=success/red=error
   is already an established meaning in this app, unlike an arbitrary categorical color pairing. */
.kpi-card-swatch.success { background: var(--color-success); }
.kpi-card-swatch.error   { background: var(--color-error); }
.kpi-card-value {
    font-size: 1.9rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.15;
    letter-spacing: -0.01em;
}
/* Per-source split shown under a KPI value (SOAI-184). Same colour as the value it breaks down,
   so it reads as part of the same figure rather than as secondary metadata. */
.kpi-card-breakdown {
    font-size: 0.72rem;
    color: var(--text-primary);
}

/* SOAI-249 — "GPT Calls and Time" KPI row.

   Left tile: one big call-count total with the per-status figures small underneath, exactly as the
   ticket asks ("Nº grande que muestre el total y números pequeños para mostrar nº por Status").
   The small figures are deliberately NOT .kpi-card-value: a second 1.9rem number would compete
   with the total for the same glance, which is the opposite of the requested hierarchy. */
.kpi-card-substats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 2px;
}
.kpi-card-substat {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    color: var(--text-secondary);
}
.kpi-card-substat strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Right tile: Total time and Average time share ONE card, side by side ("los KPIs, juntarlos en el
   espacio a la derecha"). Two separate cards in the right half would also desync the row's heights
   against the single tile on the left; one card with two figures keeps the existing 2-column grid
   intact and needs no change to the screen's layout. */
.kpi-card-pair {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px 36px;
}
.kpi-card-pair-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* SOAI-184/248: Money's KPI cards are tighter than the app-wide defaults (fits 4 KPIs without
   growing the row). Scoped to .mn-compact so no other screen's KPI cards change. */
.mn-compact .kpi-card {
    padding: 11px 16px;
    gap: 3px;
}
.mn-compact .kpi-card-value {
    font-size: 1.5rem;
}
/* Tighter table rows so more rows fit on screen without scrolling — used by both the Time and
   Money detail tables. */
.compact-table th,
.compact-table td {
    padding: 5px 14px;
}

/* SOAI-244: the Tokens detail table has 11 columns (6 fixed + a subset of gptlog's token fields)
   — noticeably more than Time/Money's tables. Scoped to .tk-detail-table so it doesn't affect
   .compact-table elsewhere: much tighter padding/font than the default, and headers are
   abbreviated (full name available via the th's title attribute on hover) so every column fits
   on screen at once without horizontal scrolling on a normal desktop width. */
.tk-detail-table th,
.tk-detail-table td {
    padding: 4px 6px;
    font-size: 0.72rem;
    white-space: nowrap;
}
.tk-detail-table th {
    font-size: 0.62rem;
    letter-spacing: 0.03em;
    cursor: help;
}

/* ── Chart cards ── */
.chart-card {
    background: var(--bg-card);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-lg);
    padding: 16px 18px 8px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.chart-card-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.chart-card-subtitle {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    margin-bottom: 10px;
}
.chart-card-canvas-wrap {
    position: relative;
    height: 320px;
}

/* ── Chat feedback thumbs (SOAI-304) ── */
.feedback-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-mid);
    cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.feedback-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
.feedback-btn:disabled { cursor: default; }
.feedback-btn.selected-up { color: #4ADE80; border-color: #4ADE80; background: rgba(74,222,128,0.10); }
.feedback-btn.selected-down { color: #F87171; border-color: #F87171; background: rgba(248,113,113,0.10); }

/* ── Granularity segmented control ── */
.granularity-group {
    display: inline-flex;
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.granularity-btn {
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-right: 1px solid var(--border-mid);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.granularity-btn:last-child { border-right: none; }
.granularity-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.granularity-btn.active {
    background: var(--color-accent-bg);
    color: var(--color-accent);
}

/* ── Monitoring filter row (Time / Money / Tokens): every control the same height and
   vertically centered, with a larger loading spinner aligned to the row (SOAI-244). Scoped
   to .mon-filters so the shared .form-input / .granularity-* styles are untouched elsewhere. ── */
.mon-filters { align-items: center; }
.mon-filters .form-input {
    width: auto;
    min-width: 190px;
    height: 38px;
    padding-top: 0;
    padding-bottom: 0;
}
.mon-filters .granularity-group { height: 38px; }
.mon-filters .granularity-btn {
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}
/* Only size/colour here — visibility stays controlled by the toggled `hidden` class. */
.mon-filter-spinner {
    font-size: 1.4rem;
    color: var(--color-accent);
}

/* ── Aggregate table (the "table-view twin" of the 4 charts, per the dataviz skill:
   every chart needs a non-visual equivalent so no value is reachable only via hover) ── */
.aggregate-table-toggle {
    font-size: 0.78rem;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
}
.aggregate-table-toggle:hover { color: var(--color-accent); }

/* ── Analytics footer bar (timestamps, record count, reload buttons) ── */
.analytics-footer {
    border-top: 1px solid var(--border-base);
    padding-top: 12px;
    font-size: 0.76rem;
    color: var(--text-secondary);
}
.analytics-footer strong { color: var(--text-primary); font-weight: 600; }