:root{
--bg-body:#F7F4EE;--bg-hero:#EFE9DC;--bg-panel:#F3EFE6;--bg-card:#FFFcf7;--bg-input:#FFFcf7;--sidebar-bg:#FFFcf7;
--text-main:#1D1F24;--text-muted:#5C6470;--primary:#1B2A4A;--primary-hover:#142038;
--accent-gold:#C4A35A;--border:#D9D2C5;
--chat-ai-bg:#FFFcf7;--chat-user-bg:#1B2A4A;--chat-user-text:#fff;
--shadow:0 4px 24px #0000000f;--nav-height:70px; --collapser-arrow: #1B2A4A;
--font-sans:'Source Sans 3', 'Source Sans Pro', sans-serif;
--font-serif:'Playfair Display', Georgia, serif;
--spark-lg:#E8B21F;--spark-sm:#2563EB;
--upload-queue: 0.8;
--upload-done: #2F6B4F;
--upload-fail: #A33B3B;
--upload-proc: #1B2A4A;

/* Panel de Uso and the admin panels were written against a palette that was
   never defined here: 17 variables resolved to nothing, so the bars, the donut
   ring and the legend swatches were drawn in no colour at all. They are aliases
   of the app's own tokens, so both themes follow automatically. */
--tokens-in-color:var(--spark-sm);      /* entrada  — blue  */
--tokens-out-color:var(--spark-lg);     /* salida   — amber */
--storage-color:var(--upload-done);     /* capacity — green */
--total-tokens-color:#1B2A4A;           /* total    — navy, see the dark block */
--chart-grid:var(--border);
--progress-bg:var(--bg-hero);
--status-normal:var(--upload-done);
--status-moderate:var(--spark-lg);
--status-high:var(--upload-fail);
/* Aliases for the names the imported components use. */
--bg-dark:var(--bg-panel);--bg-main:var(--bg-body);--bg-tertiary:var(--bg-panel);
--surface-color:var(--bg-card);--text-color:var(--text-main);--text-primary:var(--text-main);
--text-secondary:var(--text-muted);--border-color:var(--border);
}
[data-theme="dark"]{
--bg-body:#121820;--bg-hero:#162033;--bg-panel:#162033;--bg-card:#1A2436;--bg-input:#121820;--sidebar-bg:#1A2436;
--text-main:#E8E4DA;--text-muted:#9AA3B0;--primary:#C4A35A;--primary-hover:#D4B56E;
--accent-gold:#C4A35A;--border:#2C3A52;
--chat-ai-bg:#1A2436;--chat-user-bg:#1B2A4A;--chat-user-text:#fff;
--shadow:0 4px 24px #00000080; --collapser-arrow: #E8E4DA;
--spark-lg:#F2C94C;--spark-sm:#5B9BFF;
--upload-queue: opacity:.45;
--upload-done: #4CAF7A;
--upload-fail: #E06B6B;
--upload-proc: #C4A35A;
/* Navy disappears on the dark ground; the total keeps its own light slate. */
--total-tokens-color:#A9BBDA;}
/* Base type scale for the whole application. Everything is sized in rem/em
   from here, so this single value moves the entire UI; 17.5px is about 1pt
   larger than the browser default of 16px. */
html{font-size:17.5px}
body{font-family:var(--font-sans);background-color:var(--bg-body);color:var(--text-main);margin:0;transition:background-color 0.3s,color .3s}
h1,h2,h3,.hero-text h1,.section-header h2,.feature-card h3,.logo-wordmark,.bubble-brand,.modal-header-row h2{font-family:var(--font-serif);}

/* NAVBAR & BUTTONS */
.navbar{ height:var(--nav-height);background:var(--bg-card);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 2rem;position:sticky;top:0;z-index:100}
.nav-brand { display: flex; align-items: center; }
.hero-brand { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0 auto 2.5rem; }
#nav-lex-brand.hero-brand { justify-content: flex-start; margin: 0; }
#nav-lex-brand .hero-brand-mark { width: 40px; }
#nav-lex-brand .hero-brand-title { font-size: 1.5rem; }
.hero-brand-mark { width: 72px; height: auto; display: block; flex-shrink: 0; }
.hero-brand-title { font-family: var(--font-serif); font-size: 3.25rem; font-weight: 600; line-height: 1; margin: 0; color: var(--text-main); }
.hero-brand-title em { font-style: normal; color: var(--accent-gold); }
.hero-lead { color: var(--text-main); font-size: 1.35rem; font-weight: 500; line-height: 1.35; margin: 0 0 1rem; }
.nav-container{width:100%;margin:0 auto;display:flex;justify-content:space-between;align-items:center}
.logo { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 500; color: var(--text-main); }
.logo-wordmark { font-family: var(--font-serif); font-weight: 600; letter-spacing: 0.01em; }
.logo-wordmark em { font-style: normal; color: var(--accent-gold); font-weight: 600; }
.logo-icon_old { width: 24px; height: 24px; background: var(--primary); border-radius: 4px; }
.logo-circle{width:44px;height:50px;border-radius:0;display:flex;align-items:center;justify-content:center}
.logo-icon{width:36px;height:auto;object-fit:contain;display:block}
.btn-primary { background: var(--primary); color: white; border: none; padding: 10px 10px; border-radius: 4px; cursor: pointer; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary.big { padding: 0.9rem 2rem; font-size: 1rem; }
.btn-secondary.big { background:var(--bg-card);border:1px solid var(--border);color:var(--text-main);padding:.9rem 2rem;font-size:1rem;border-radius:6px;cursor:pointer;font-weight:500}
.btn-success { background-color: #418f46; }
.btn-error {background-color:#E45252;}
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text-main); padding: 8px 16px; border-radius: 6px; cursor: pointer; }
.btn-icon { background: none; border: none; font-size: 1.2rem; cursor: pointer; padding: 8px; margin-right: 10px; }
.btn-text { background: none; border: none; color: var(--text-muted); cursor: pointer; text-decoration: underline; }

/* The spinner */
.btn-primary .spinner { display: none; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.4); border-top-color: var(--collapser-arrow); border-radius: 50%; animation: spin 0.7s linear infinite; }
.btn-primary.loading .spinner { display: inline-block; position: relative; top: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }


/* HERO SECTION */
.hero-section { background: var(--bg-hero); padding: 4rem 0; border-bottom: 1px solid var(--border); }
.container { margin: 0 auto; padding: 0 2rem; }
.hero-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
@media (max-width: 900px) {
    .hero-layout { grid-template-columns: 1fr; gap: 2rem; }
    .hero-login { margin: 0 auto; }
}
.hero-text h1 { color: var(--text-main); font-size: 3.5rem; font-weight: 600; line-height: 1.1; margin-bottom: 1.5rem; }
.hero-text .highlight { color: var(--accent-gold); }
.hero-sub { color: var(--text-muted); font-size: 1.25rem; line-height: 1.6; margin-bottom: 2.5rem; }
.hero-actions { display: flex; gap: 1rem; }
.hero-visual { display: flex; justify-content: center; align-items: center; }
.hero-login { width: 100%; max-width: 420px; margin: 0 auto; }
.hero-login .modal-content { box-shadow: none; margin: 0 auto; }
.hero-login .modal-header h2 { font-family: var(--font-serif); margin: 0 0 0.4rem; color: var(--text-main); }
.hero-login .modal-header p { margin: 0 0 1.25rem; color: var(--text-muted); font-size: 0.95rem; }

/* MOCKUP WINDOW */
.mockup-window{background:var(--bg-card);border-radius:12px;box-shadow:0 20px 50px -12px #00000026;border:1px solid var(--border);overflow:hidden;transform:perspective(1000px) rotateY(-5deg) rotateX(2deg);transition:transform .3s ease}
.mockup-window:hover { transform: perspective(1000px) rotateY(0deg) rotateX(0deg); }
.mockup-header { background: var(--bg-panel); padding: 12px 16px; display: flex; gap: 8px; border-bottom: 1px solid var(--border); }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dotHome { width: 10px; height: 10px; border-radius: 50%; }
.red { background: #ff5f56; } .yellow { background: #ffbd2e; } .green { background: #27c93f; }
.mockup-body { padding: 24px; background: var(--bg-card); display: flex; flex-direction: column; gap: 16px; height: 250px; }
.mock-chat-bubble { padding: 12px; border-radius: 8px; width: 80%; }
.mock-chat-bubble.ai { background: var(--bg-panel); align-self: flex-start; }
.mock-chat-bubble.user { background: var(--primary); align-self: flex-end; width: 60%; }
.mock-line { height: 8px; background: var(--border); border-radius: 4px; margin-bottom: 6px; }
.mock-chat-bubble.user .mock-line { background: rgba(255,255,255,0.4); }
.long { width: 90%; } .short { width: 50%; } .medium { width: 70%; }
.mock-source { font-size: 0.6rem; color: var(--primary); margin-top: 8px; font-weight: 600; }

/* FEATURES SECTION */
.features-section { padding: 5rem 0; background: var(--bg-body); }
.section-header { text-align: center; margin-bottom: 3.5rem; }
.section-header h2 { font-size: 2rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--text-main); }
.section-header p { color: var(--text-muted); }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.75rem; }
.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 1.75rem 1.75rem 2rem;
    position: relative;
    transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}
.feature-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--accent-gold);
}
.feature-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-4px);
    border-color: var(--accent-gold);
}
.feature-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.35rem;
}
.feature-index {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--accent-gold);
}
.feature-icon {
    width: 56px;
    height: 56px;
    color: var(--primary);
    background: var(--bg-hero);
    border: 1px solid var(--accent-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.feature-icon svg { width: 28px; height: 28px; display: block; }
.icon-box { height: 48px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: white; margin-bottom: 1.5rem; }
.blue { background: #1B2A4A; } .purple { background: #5C4A2A; } .green { background: #2F6B4F; }
.feature-card h3 { font-size: 1.35rem; font-weight: 600; margin: 0 0 0.75rem; color: var(--text-main); }
.feature-card p { color: var(--text-muted); line-height: 1.6; margin: 0; font-size: 0.98rem; }
.link-arrow { text-decoration: none; color: var(--primary); font-weight: 600; font-size: 0.9rem; }

/* APP LAYOUT */
/* Full-bleed app row: the sidebar is flush left and one border divides it from
   the chat, instead of two bordered cards floating inside a page gutter. */
.app-layout { display: flex; width: 100%; overflow: hidden; height: calc(100vh - var(--nav-height)); }
#app-view.container { padding: 0; margin-top: 0 !important; max-width: none; }

/* Sidebar groups are bare — the metric cards inside them carry the surface.
   Group labels are small uppercase eyebrows in the body face (no mono font). */
.sidebar .panel { background: transparent; border: none; padding: 0; border-radius: 0; margin-bottom: 1.25rem; }
.sidebar .panel h3 { font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin: 0; }
/* The upload group needs no heading: the drop zone says what it is. */
.sidebar .panel h3[data-i18n="sidebar.upload"] { display: none; }
.sidebar .panel-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.sidebar .panel .small-text { font-size: 0.8rem; color: var(--text-muted); margin: 6px 0 8px; line-height: 1.4; }

/* Metric card: tabular numerals so 12,480 and 86 align. */
.stat-box { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 9px; padding: 9px 12px; margin-bottom: 6px;
            font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; color: var(--primary); line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat-box small { font-size: 0.64rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; display: block; margin-top: 3px; }
.dropdown { width: 100%; padding: 8px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-main); }

/* UPLOAD AREA */
.upload-area { border: 1px dashed var(--border); background: var(--bg-panel); padding: 2rem; text-align: center; border-radius: 9px; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.upload-area:hover, .upload-area.dragover { border-color: var(--primary); background: rgba(27, 42, 74, 0.05); }
.status-text { padding-top: 15px; max-width: 100%; overflow-wrap: break-word; word-break: break-word; white-space: normal; }
.lds-dual-ring, .lds-dual-ring:after { box-sizing: border-box; } .lds-dual-ring { float:left; padding-right: 25px; width: 20px; height: 20px; } .lds-dual-ring:after { content: " "; display: block; width: 16px; height: 16px; margin: 4px; border-radius: 50%; border: 6.4px solid currentColor; border-color: var(--border) transparent currentColor transparent; animation: lds-dual-ring 1.2s linear infinite; } @keyframes lds-dual-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* CHAT AREA */
/* No outer card: the chat area is the page ground, bubbles carry the surface. */
.chat-container { border: none; border-radius: 0; display: flex; flex-direction: column; background: var(--bg-body); overflow: hidden; height: 100%; }

.message1 { max-width: 75%; padding: 12px 18px; border-radius: 12px; font-size: 0.95rem; line-height: 1.5; position: relative; word-wrap: break-word; margin-bottom: 10px; }
.message1.user { min-width: 150px; text-align: right; align-self: flex-end; background-color: var(--chat-user-bg); color: var(--chat-user-text); border-bottom-right-radius: 2px; }
.message1.ai { align-self: flex-start; background-color: var(--chat-ai-bg); color: var(--text-main); border-bottom-left-radius: 2px; border: 1px solid var(--border); }
.message1.ai { align-self: flex-start; background-color: var(--bg-panel); color: var(--text-main); border-bottom-left-radius: 2px; border: 1px solid var(--border); }

/* ── Base bubble ── */
.message { max-width: 75%; padding: 22px 20px; border-radius: 18px; font-size: 0.95rem; line-height: 1.5; position: relative; word-wrap: break-word; margin-bottom: 10px; border: 1px solid var(--border);}
    .message p {
      font-size: 0.9rem;
      line-height: 1.6;
      text-align: left;
    }

    /* ── Left — light gray ── */
    .message.ai {
       align-self: flex-start; min-width: 150px; background-color: var(--chat-ai-bg); color: var(--text-main);
      padding-bottom: 42px;
      box-shadow: none;
      border: 1px solid var(--border);
    }

    .message.ai::after,
    .message.ai::before {
      content: none;
    }

    /* ── Right — light blue ── */
    .message.user {
       min-width: 150px; text-align: right; align-self: flex-end; background-color: var(--chat-user-bg); color: var(--chat-user-text);
      box-shadow: none;
      border: 1px solid rgba(0, 0, 0, 0.12);
    }
    .message.user p { color: white; text-align: right; }

    .message.user::after,
    .message.user::before {
      content: none;
    }




.message.ai .small-text {font-size: 0.75em;color: var(--text-muted);}
.bubble-header {
    display: flex; align-items: center; gap: 7px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.07);
}
.bubble-logo {
    width: 20px; height: 22px;
    border-radius: 0;
    object-fit: contain;
    flex-shrink: 0;
}
.bubble-brand {
    font-size: 0.8rem; font-weight: 600;
    color: var(--primary);
    letter-spacing: 0.01em;
    flex: 1;
}
.bubble-ts {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.bubble-actions {
    position: absolute; bottom: 6px; left: 10px; right: auto;
    display: flex; align-items: center; gap: 4px;
    opacity: 0; transition: opacity 0.2s;
}
.message.ai:hover .bubble-actions { opacity: 0.9; }
.bubble-action-btn {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted);
    padding: 6px; border-radius: 6px;
    line-height: 1; display: inline-flex; align-items: center; justify-content: center;
    transition: color 0.15s, background 0.15s, opacity 0.15s;
}
.bubble-action-btn svg {
    width: 22px; height: 22px; min-width: 22px; min-height: 22px; display: block;
    /* The inline SVGs ship stroke-width="2", which reads too heavy at this size.
       A CSS declaration overrides the presentation attribute, so every icon
       (including any added later) gets a hairline stroke from one place. */
    stroke-width: 1;
}
.bubble-action-btn:hover:not(:disabled) { color: var(--primary); background: rgba(0,0,0,0.04); opacity: 1; }
.bubble-action-btn.selected { color: var(--primary); opacity: 1; }
.bubble-action-btn.copied { color: var(--primary); }
.bubble-action-btn:disabled { opacity: 0.35; cursor: default; }
.bubble-export-btn { /* kept as alias class on export icon button */ }
.feedback-reasons {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border);
}
.feedback-reasons.hidden { display: none; }
.feedback-reasons-label {
    font-size: 0.75rem; color: var(--text-muted); margin-right: 4px;
}
.feedback-reason-chip {
    background: transparent; border: 1px solid var(--border); color: var(--text-main);
    border-radius: 4px; padding: 4px 8px; font-size: 0.75rem; cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.feedback-reason-chip:hover {
    border-color: var(--primary); color: var(--primary); background: rgba(0,0,0,0.03);
}
.approved-badge {
    font-size: 0.75rem; color: var(--text-muted); margin: 0 0 8px;
    font-style: italic;
}
.approved-answers-list .doc-row { grid-template-columns: 1fr 120px; }
.approved-edit-box textarea {
    width: 100%; min-height: 90px; padding: 8px; box-sizing: border-box;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-input); color: var(--text-main); font-family: inherit;
    margin-bottom: 8px;
}
.chat-input-area { padding: 1.5rem; border-top: 1px solid var(--border); display: flex; gap: 10px; background: var(--bg-card); }
.chat-input-area input { flex: 1; padding: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-input); color: var(--text-main); }

/* DOC MANAGER MODAL */
.modal-header-row { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 1rem; }
.modal-actions {display: flex;justify-content: space-between;}
.modal-header-row h2 { margin: 0; font-size: 1.5rem; color: var(--text-main); }
.close-icon { font-size: 1.5rem; line-height: 1; padding: 4px 8px; color: var(--text-muted); border-radius: 4px; transition: color 0.15s, background 0.15s; }
.close-icon:hover { color: var(--text-main); background: var(--border); text-decoration: none; }
.filter-bar { margin-bottom: 1rem; }
.filter-input { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-input); color: var(--text-main); box-sizing: border-box; }
.docs-table-header { display: grid; grid-template-columns: 1fr 100px; padding: 8px 16px; background: var(--bg-panel); border: 1px solid var(--border); border-bottom: none; font-weight: 600; color: var(--text-muted); }
.docs-list-container { max-height: 400px; overflow-y: auto; border: 1px solid var(--border); background: var(--bg-card); }
/* Admin → Billing: cards, inline editors and aligned grids (header + rows share one template). */
#admin-modal .modal-content{max-height:88vh;display:flex;flex-direction:column;box-sizing:border-box;padding:1.4rem 2rem 1.2rem}
#admin-modal .modal-header-row{flex:none;padding-bottom:.7rem}
#admin-modal .modal-header-row h2{font-size:1.3rem}
#admin-modal nav.tab{flex:none}
#admin-modal .tabcontent.active{flex:1;min-height:0;overflow-y:auto;padding:16px 6px 4px}
#admin-modal .admin-card,#admin-modal .tabcontent>div[style*="var(--bg-panel)"]{margin-bottom:14px}
.modal-title-wrap{display:flex;flex-direction:column;gap:2px}
.modal-back{align-self:flex-start;text-decoration:none;font-size:.85rem;color:var(--primary);padding:0}
.modal-back:hover{text-decoration:underline}
.admin-card{background:var(--bg-panel);padding:16px;border-radius:8px;margin-bottom:20px;border:1px solid var(--border)}
.admin-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:12px}
.admin-card-head h4{margin:0 0 2px}
.admin-card-head small{color:var(--text-muted);display:block;line-height:1.35}
.admin-inline{display:flex;align-items:center;gap:8px;white-space:nowrap}
.admin-inline input[type=month],.admin-select{padding:6px 8px;border-radius:4px;border:1px solid var(--border);background:var(--bg-dark);color:var(--text-main);font:inherit;font-size:.85rem}
.admin-select{width:100%;box-sizing:border-box;min-width:0}
.admin-card-head h4[data-i18n]{margin:0}
.admin-editor{background:var(--bg-dark);padding:12px 14px;border-radius:6px;margin-bottom:14px;border:1px solid var(--border)}
.admin-editor h5{margin:0 0 10px;font-size:.95rem}
.admin-form-grid{display:grid;gap:10px;margin-bottom:10px}
.admin-form-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.admin-form-grid label,.admin-form-full{display:flex;flex-direction:column;gap:4px;min-width:0}
.admin-form-full{margin-bottom:10px}
.admin-form-grid small,.admin-form-full small{color:var(--text-muted);font-size:.75rem}
.admin-form-grid input,.admin-form-grid select,.admin-form-full input{width:100%;padding:8px;box-sizing:border-box;border:1px solid var(--border);border-radius:4px;background:var(--bg-card);color:var(--text-main);font:inherit}
.admin-form-actions{display:flex;gap:10px;align-items:center}
.admin-empty{padding:14px;color:var(--text-muted)}
.admin-empty.err{color:var(--usage-over)}
.docs-table-header.grid-plans,.doc-row.grid-plans{grid-template-columns:minmax(120px,1.2fr) 90px 100px 90px 60px minmax(120px,2fr) 96px;gap:10px}
.docs-table-header.grid-accounts,.doc-row.grid-accounts{grid-template-columns:minmax(110px,1.1fr) minmax(110px,1.1fr) minmax(120px,1.3fr) minmax(110px,1.1fr) 150px 108px 96px;gap:12px}
.docs-table-header.grid-plans,.docs-table-header.grid-accounts{font-size:.78rem;text-transform:uppercase;letter-spacing:.03em}
.doc-row.grid-plans,.doc-row.grid-accounts{padding:10px 16px;font-size:.9rem;align-items:center}
.doc-row.grid-plans>div,.doc-row.grid-accounts>div{min-width:0}
.col-actions{display:flex;gap:6px;justify-content:flex-end}
.cell-strong{font-weight:600}
.cell-muted{color:var(--text-muted)}
.cell-sub{font-size:.75rem;color:var(--text-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn-icon{background:var(--bg-card);border:1px solid var(--border);border-radius:4px;padding:4px 7px;cursor:pointer;font-size:.85rem;line-height:1}
.btn-icon:hover{background:var(--bg-panel)}
.btn-icon.danger:hover{background:#fee2e2;border-color:#fca5a5}
.btn-icon[disabled]{opacity:.4;cursor:not-allowed}
.acct-usage{display:grid;grid-template-columns:52px 1fr 36px;align-items:center;gap:6px;font-size:.72rem}
.acct-usage+.acct-usage{margin-top:4px}
.acct-usage-label{color:var(--text-muted)}
.acct-usage .usage-bar{display:block;height:4px;background:var(--border);border-radius:2px;overflow:hidden}
.acct-usage .usage-bar i{display:block;height:100%;border-radius:2px;background-repeat:no-repeat;background-position:left center}
.acct-usage-val{text-align:right;font-variant-numeric:tabular-nums}
.acct-usage-val.lvl-warn{color:var(--usage-warn)}
.acct-usage-val.lvl-over{color:var(--usage-over);font-weight:600}
/* Conexión IA card */
#llm-card code{font-size:.8em;background:var(--bg-dark);padding:1px 4px;border-radius:3px}
.llm-top{display:grid;grid-template-columns:260px 1fr;gap:10px 16px;align-items:end;margin-bottom:12px}
.llm-top label{display:flex;flex-direction:column;gap:4px}
.llm-top .llm-check{flex-direction:row;align-items:center;gap:8px;font-size:.85rem;color:var(--text-main);padding-bottom:6px}
.llm-top #llm-order{grid-column:1/-1}
.docs-table-header.grid-llm,.doc-row.grid-llm{grid-template-columns:170px minmax(200px,1.1fr) minmax(220px,1.3fr) 190px;gap:12px}
.docs-table-header.grid-llm-tasks,.doc-row.grid-llm-tasks{grid-template-columns:240px 200px 1fr;gap:12px}
.docs-table-header.grid-llm,.docs-table-header.grid-llm-tasks{font-size:.78rem;text-transform:uppercase;letter-spacing:.03em}
.llm-row{padding:10px 16px;align-items:center}
.llm-row>div{min-width:0}
.llm-row input[type=text],.llm-row input[type=password],.llm-row select{width:100%;box-sizing:border-box;padding:6px 8px;border:1px solid var(--border);border-radius:4px;background:var(--bg-card);color:var(--text-main);font:inherit;font-size:.85rem}
.llm-row input::placeholder{color:var(--text-muted);font-size:.8rem}
.llm-mrow,.llm-keywrap{display:flex;gap:6px;align-items:center}
.llm-enable{display:flex;align-items:center;gap:6px;cursor:pointer}
.llm-test{justify-content:flex-start;flex-wrap:wrap;gap:6px 8px}
.llm-res{font-size:.76rem;color:var(--text-muted);max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.llm-res.ok{color:var(--usage-ok)}
.llm-res.err{color:var(--usage-over)}
.llm-sub{margin:14px 0 6px;font-size:.9rem}
#llm-providers,#llm-tasks{max-height:none;overflow:visible}
.llm-status{margin-top:8px;min-height:1em}
.llm-status.ok{color:var(--usage-ok)}
.llm-status.err{color:var(--usage-over)}
.doc-row { display: grid; grid-template-columns: 1fr 100px; padding: 12px 16px; border-bottom: 1px solid var(--border); align-items: center; transition: background 0.1s; color: var(--text-main); }
.doc-row:hover { background: var(--bg-panel); }
.doc-name { display: flex; align-items: center; gap: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-name a { color: var(--text-main); text-decoration: none; }
.btn-delete { background: #fee2e2; color: #dc2626; border: none; padding: 6px 10px; border-radius: 4px; cursor: pointer; font-size: 0.8rem; font-weight: 600; }
.btn-delete:hover { background: #fecaca; }
.doc-meta-sub{font-size:.75rem;color:#888;margin-top:2px}

/* LOADING DOTS */
.typing-dots { display: flex; gap: 4px; padding: 4px; }
.dot { width: 6px; height: 6px; background: var(--text-muted); border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; }
.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

/* UTILS */
.hidden { display: none !important; }
.modal { position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:999; }
.modal-content { background: var(--bg-card); padding: 2.5rem; border-radius: 8px; border: 1px solid var(--border); box-shadow: var(--shadow); }
.input-group { margin-bottom: 1rem; }
.input-group label { display: block; font-size: 0.875rem; color: var(--text-main); margin-bottom: 0.5rem; font-weight: 500; }
.input-group input { width: 100%; padding: 0.6rem; border: 1px solid var(--border); border-radius: 4px; box-sizing: border-box; background: var(--bg-input); color: var(--text-main); }
.full-width { width: 100%; margin-top: 1rem; }

/* --- MARKDOWN RICH TEXT STYLES --- */ /* 1. Code Blocks */ 
.message pre{background:#2d2d2d;/* Dark background for code */ color:#e0e0e0;padding:12px;border-radius:6px;overflow-x:auto; margin:10px 0;font-family:'Consolas','Monaco',monospace;font-size:0.9em;}
.message code{background:rgba(0,0,0,0.1);padding:2px 4px;border-radius:4px;font-family:'Consolas','Monaco',monospace;font-size:0.9em;}
/* 2. Tables (Great for financial data) */ .message table{border-collapse:collapse;width:100%;margin:15px 0;font-size:0.9rem;}
.message th,.message td{border:1px solid var(--border);padding:8px 12px;text-align:left;}
.message th{background-color:rgba(0,0,0,0.05);font-weight:600;}
/* 3. Lists and Blockquotes */ .message ul,.message ol{margin-left:20px;margin-bottom:10px;}
.message blockquote{text-align:right; border-left:4px solid var(--primary);margin:10px 0;padding-left:15px;color:var(--text-muted);font-style:italic;background:rgba(0,0,0,0.07);padding:8px 15px;}
/* Dark Mode Adjustments */ [data-theme="dark"] .message code{background:rgba(255,255,255,0.15);}
[data-theme="dark"] .message th{background-color:rgba(255,255,255,0.1);}

/* Sidebar Transitions */
.sidebar.collapsed #toggle-sidebar-btn{transform:rotate(180deg)}
.sidebar.collapsed.sideBar { background-color: var(--bg-card); }
/* Footer line: version and the collapse control share it. */
#version { margin-top: auto; border-top: 1px solid var(--border); padding-top: 10px;
           display: flex; justify-content: space-between; align-items: center;
           font-size: 0.72rem; letter-spacing: 0.04em; color: var(--text-muted); text-align: left;
           /* Sticky so the collapse/expand arrow is always visible: on a short
              window the sidebar scrolls, and this used to sit below the fold. */
           /* Sticky so the collapse/expand arrow is always reachable: on a short
              window the sidebar scrolls, and this used to sit below the fold.
              The sidebar carries no bottom padding (see .sidebar) so bottom:0
              lands flush on its edge and the footer's own padding covers the
              content scrolling underneath. */
           position: sticky; bottom: 0; background: var(--sidebar-bg); z-index: 2;
           padding-bottom: 16px; }
.collapser { padding: 0; }
.sidebar.collapsed #version { justify-content: center; }
.sidebar.collapsed .version-text { display: none; }
.btn-collapser{text-decoration:none;background:none;border:none;padding:0 2px;width:auto;height:auto;
               cursor:pointer;color:var(--text-muted);font-size:.8rem;line-height:1;transition:color .15s}
.btn-collapser:hover{color:var(--text-main);background:none}

/* The Wrapper */
/* Sidebar: its own surface, one border-right dividing it from the chat. */
.sidebar{box-sizing:border-box;width:280px;min-width:280px;background:var(--sidebar-bg);border-right:1px solid var(--border);
         transition:width .3s ease,min-width .3s ease;display:flex;flex-direction:column;
         overflow-x:hidden;position:relative;padding:16px 14px 0}

/* The Collapsed State */
.sidebar.collapsed{width:60px;min-width:60px;padding:16px 8px 0}

/* Hide text content when collapsed */
/* !important because updateNavForUser() sets display inline on the upload
   panels by role; without it they stayed in the 60px rail, made it 1227px tall
   and pushed the expand control below the fold. */
.sidebar.collapsed h2,.sidebar.collapsed .panel,.sidebar.collapsed .doc-item,.sidebar.collapsed #app-version-display,.sidebar.collapsed .sidebar-footer{display:none !important;opacity:0}

/* The Main Chat Area (Fluid Width) */
main{flex:1;display:flex;flex-direction:column;position:relative}

/* History grid styles */
/* Container for the list (Scrollable Body) */
.history-grid{display:flex;flex-direction:column;overflow-y:auto;max-height:600px;border:1px solid var(--border);border-radius:8px;background:var(--surface-color)}

/* The Header Row (Stays at the top) */
.history-header{display:grid;grid-template-columns:1fr 1fr 2fr 1fr;gap:10px;padding:12px 15px;background:var(--sidebar-bg);border-bottom:2px solid var(--border);font-weight:700;color:var(--text-color);position:sticky;top:0;z-index:10}

/* Individual Data Rows */
.history-row{display:grid;grid-template-columns:1fr 1fr 2fr 1fr;gap:10px;padding:10px 15px;border-bottom:1px solid var(--border);align-items:center;font-size:.9rem;transition:background .2s}

/* Zebra Striping for readability */
.history-row:nth-child(even) { background-color: rgba(0, 0, 0, 0.02); }

.history-row:hover { background-color: rgba(0, 0, 0, 0.05); }

.filter-bar{display:flex;flex-direction:row;gap:10px;margin-bottom:15px;align-items:center;flex-wrap:nowrap}

.filter-group{display:flex;flex-direction:row;gap:10px;flex-wrap:nowrap;min-width:0}

.password {position: relative; display: inline-block; width:100%;}
.password .fa-eye {position: absolute;top: 70%;right: 10px;transform: translateY(-50%); cursor: pointer;}
.password .fa-eye-slash {position: absolute;top: 70%;right: 10px;transform: translateY(-50%);cursor: pointer;}

.sources-list a {color: var(--primary)}

.dropdown-container{position:relative;width:230px;display:inline-block;background:var(--bg-card);color:var(--text-main);border:1px solid var(--border); border-radius: 6px;}
.dropdown-selected{border:none;padding:14px 16px;cursor:pointer;display:flex;align-items:center;gap:12px;transition:background .2s ease}
.flag-icon{width:24px;height:18px;flex-shrink:0}
.country-name{flex:1;font-size:0.9rem;font-weight:500}
.arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid var(--text-main);transition:transform .2s ease}
.arrow.open{transform:rotate(180deg)}
.dropdown-options{position:absolute;top:100%;left:0;right:0;background:var(--bg-card);max-height:0;overflow:hidden;transition:max-height .2s ease;z-index:1000;box-shadow:0 2px 8px var(--border);}
.dropdown-options.open{max-height:300px;overflow-y:auto}
.dropdown-option{padding:14px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:background .15s ease;border-bottom:1px solid #ecf0f1}
.dropdown-option:last-child{border-bottom:none}
.dropdown-options::-webkit-scrollbar{width:6px}
.dropdown-options::-webkit-scrollbar-track{background:transparent}

.btnContainer{width:auto; display:flex; justify-content:space-between;}

/* Flat tab navigation */
.tab{display:flex;background-color:var(--bg-card);border-bottom:2px solid #e0e0e0}
.tab button{flex:1;background-color:transparent;border:none;outline:none;cursor:pointer;padding:16px 20px;font-size:0.9rem;font-weight:500;color:#666;transition:all 0.2s ease;border-bottom:3px solid transparent;position:relative}
.tab button:hover {color: #333;}
.tab button.active{color:#2196F3;border-bottom-color:#2196F3;background-color:transparent}

/* Flat tab content */
.tabcontent {display: none;padding: 30px 24px;background-color: #fff;}
.tabcontent.active {display: block;}
.tabcontent h3 {font-size: 1.4rem;font-weight: 600;color: #333;margin-bottom: 12px;}
.tabcontent p {font-size: 0.9rem;line-height: 1.6;color: #666;}

/* NEW APPOROACH FOR TEXT BOX */
.timestamp {color: var(--text-muted);font-size: x-small; position: absolute; top: -20px; left: 2px;}

/* Flex child of .chat-container (a column): with height:100% the notices banner
   above it pushed the composer / lock sign below the fold. */
.content-container{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.chat-container>.account-notices-bar{flex:0 0 auto}
.box-container{flex:0 0 auto}
.chat-history{scrollbar-width:none;-ms-overflow-style:none;overflow-y:scroll;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:2rem;display:flex;flex-direction:column;gap:1.5rem}

.box-container{width:100%;display:flex;justify-content:center;padding:15px 0;border-top:1px var(--border) solid;background-color:var(--bg-main);color:var(--text-main)}
.box{position:relative;border-radius:12px;border:1.5px solid var(--border);box-shadow:0 2px 12px var(--border);width:90%;padding:0 10px}

  /* Mirror + textarea share identical text styles. The mirror is a transparent
     copy of the text laid over the textarea; its <mark>s are the @comando
     highlights, so both layers must use the same font (the textarea defaults
     to monospace) and the same text origin, or the highlight covers a fixed
     width instead of the word. The mirror is positioned on .box, which pads
     10px (8px on phones), plus the textarea's own 2px. */
#mirror,#user-input{width:100%;padding:12px 2px 2px;font-family:monospace;font-size:0.95rem;line-height:1.6;letter-spacing:normal;white-space:pre-wrap;word-break:break-word}
#mirror{position:absolute;inset:0;padding-left:12px;padding-right:12px;overflow-y:auto;pointer-events:none;color:transparent;border-radius:12px}
#mirror mark{background:#2563eb33;color:transparent;border-radius:4px}
#user-input{position:relative;display:block;border:none;outline:none;border-radius:12px;resize:vertical;background:transparent;color:var(--text-main);caret-color:var(--collapser-arrow);min-height:100px}
/* Composer actions: icon + label, grouped left; the mode switch and the mobile
   send button sit on the right. Icon-only buttons read as decoration — the
   Diálogo one especially, which is why both now carry their name. */
.footer{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 12px 10px;border-top:1px solid var(--border)}
/* Labels share one muted tone across the row (Adjuntar, Diálogo, Chatear con
   IA); only the Diálogo mark itself carries colour. */
.attach-btn-label{font-size:0.85rem;color:var(--text-muted);white-space:nowrap;line-height:1}
.attach-btn:hover .attach-btn-label{color:var(--primary)}
/* ── Cuentas grid: header and rows share one template ── */
.docs-table-header.grid-cuentas,.doc-row.grid-cuentas{grid-template-columns:minmax(140px,1.4fr) minmax(110px,1.2fr) 78px 78px 46px 46px 42px 70px 82px 136px;gap:8px;align-items:center}
.docs-table-header.grid-cuentas{font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.doc-row.grid-cuentas{padding:12px 16px;font-size:.9rem}
.doc-row.grid-cuentas>div{min-width:0}
/* Estado sub-lines (grant, demo expiry + its edit pencil) may wrap; never clip them. */
.doc-row.grid-cuentas .cell-sub{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
/* Toggles: a bordered track so the off state is visible, gold when on. */
.acct-toggle{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:.78rem;color:var(--text-muted);user-select:none}
.acct-toggle .acct-switch{width:36px;height:20px}
.acct-toggle .toggle-slider{background:var(--bg-body);border:1px solid var(--border);box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}
.acct-toggle .toggle-slider::before{background:#fff;border:1px solid var(--border);box-shadow:0 1px 2px rgba(0,0,0,.2);height:14px;width:14px;left:2px;top:2px;box-sizing:border-box}
/* Specificity above the generic .toggle-switch rules further down the sheet. */
.acct-toggle .toggle-switch input:checked + .toggle-slider{background:var(--accent-gold);border-color:#A8883F}
.acct-toggle .toggle-switch input:checked + .toggle-slider::before{transform:translateX(16px);border-color:#A8883F}
.acct-toggle .toggle-switch input:focus-visible + .toggle-slider{outline:2px solid var(--accent-gold);outline-offset:2px}
.acct-toggle .toggle-switch input:disabled + .toggle-slider{opacity:.5}
.acct-toggle .acct-toggle-txt{min-width:16px;font-weight:600}
[data-theme="dark"] .acct-toggle .toggle-slider{background:var(--bg-body)}
[data-theme="dark"] .acct-toggle .toggle-slider::before{background:var(--text-main)}
/* Actions: two outlined buttons of equal height, red only on hover / for delete. */
.acct-actions{display:flex;gap:6px;align-items:center;flex-wrap:nowrap}
.acct-btn{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 9px;border-radius:6px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-main);font:600 .78rem var(--font-sans);cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.acct-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--bg-panel)}
.acct-btn.is-on{border-color:var(--accent-gold);color:#8a6d1f}
.acct-btn.danger{padding:0 8px;color:var(--text-muted)}
.acct-btn.danger:hover{border-color:#dc2626;color:#dc2626;background:rgba(220,38,38,.08)}
[data-theme="dark"] .acct-btn.is-on{color:var(--accent-gold)}
[data-theme="dark"] .acct-btn:hover{color:var(--primary-hover)}

/* ── Pending-request badges ── */
.tab-pill{display:inline-block;margin-left:6px;min-width:18px;padding:0 6px;border-radius:999px;background:#dc2626;color:#fff;font-size:.7rem;font-weight:700;line-height:18px;text-align:center;vertical-align:middle}
#admin-btn{position:relative}
.nav-count{position:absolute;top:-6px;right:4px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#dc2626;color:#fff;font-size:.65rem;font-weight:700;line-height:16px;text-align:center;box-shadow:0 0 0 2px var(--bg-card)}
#nav-sheet-admin .nav-count{position:static;margin-left:6px;box-shadow:none}
/* ── Operator answers above the chat ── */
/* Right padding keeps clear of the absolutely positioned “Borrar historial” button. */
.account-notices{display:flex;flex-direction:column;gap:10px;overflow:auto}
.account-notice{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:var(--bg-card);box-shadow:0 2px 10px rgba(0,0,0,.06);animation:fadeInUp .4s ease both}
.account-notice.ok{border-left:4px solid #2ea043}
.account-notice.no{border-left:4px solid var(--accent-gold)}
.account-notice .notice-icon{font-size:1.3rem;line-height:1.2}
.account-notice .notice-body{flex:1;min-width:0;font-size:.9rem}
.account-notice .notice-meta{font-size:.75rem;color:var(--text-muted);margin-top:2px}
.account-notice .notice-reply{margin:6px 0 0;padding:8px 10px;border-radius:6px;background:var(--bg-panel);white-space:pre-wrap;line-height:1.4}
.account-notice .notice-ok{align-self:center;white-space:nowrap}
@media (max-width:640px){.account-notice{flex-wrap:wrap}.account-notice .notice-ok{width:100%}}

/* ── Account status: badges (Cuentas, Facturas), requests, bills grid ── */
.acct-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.02em;white-space:nowrap;border:1px solid transparent}
.acct-badge.st-active,.acct-badge.st-pagada{background:rgba(46,160,67,.12);color:#2ea043;border-color:rgba(46,160,67,.3)}
.acct-badge.st-limit_reached,.acct-badge.st-pendiente{background:rgba(232,178,31,.14);color:#a16207;border-color:rgba(232,178,31,.35)}
.acct-badge.st-suspended,.acct-badge.st-vencida{background:rgba(220,38,38,.12);color:#c0392b;border-color:rgba(220,38,38,.3);margin-left:4px}
.acct-badge.st-demo_expired{background:rgba(107,114,128,.14);color:var(--text-muted);border-color:rgba(107,114,128,.3)}
[data-theme="dark"] .acct-badge.st-limit_reached,[data-theme="dark"] .acct-badge.st-pendiente{color:#f2c94c}
.acct-request{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:10px 16px}
/* Demo accounts: one row per prospect in kb_demo */
.docs-table-header.grid-demos,.doc-row.grid-demos{grid-template-columns:minmax(100px,1.1fr) 85px 65px minmax(95px,1fr) minmax(110px,1.1fr) 75px minmax(300px,auto);gap:10px}
.doc-row.grid-demos{padding:10px 16px;font-size:.9rem;align-items:center}
.docs-table-header.grid-demos{font-size:.78rem;text-transform:uppercase;letter-spacing:.03em}
.doc-row.grid-demos .acct-actions{justify-content:flex-end;flex-wrap:nowrap}
.demo-bar{height:4px;border-radius:2px;background:var(--border);overflow:hidden;margin-top:3px}
.demo-bar i{display:block;height:100%;background:var(--primary)}
.demo-bar i.lvl-warn{background:var(--accent-gold)}
.demo-bar i.lvl-over{background:#d14343}
@media (max-width:1100px){.docs-table-header.grid-demos>:nth-child(2),.doc-row.grid-demos>:nth-child(2){display:none}}
.docs-table-header.grid-bills,.doc-row.grid-bills{grid-template-columns:minmax(120px,1.3fr) minmax(100px,1fr) 90px minmax(90px,1fr) 100px 90px 110px;gap:12px}
.doc-row.grid-bills{padding:10px 16px;font-size:.9rem;align-items:center}
.docs-table-header.grid-bills{font-size:.78rem;text-transform:uppercase;letter-spacing:.03em}

/* ── Locked account: the sign left where the composer was ── */
body.account-locked .box{border-style:dashed;opacity:.55;min-height:0}
body.account-locked.lock-done .box{display:none}
/* Dialog over the blurred page */
.notice-overlay,.account-lock-overlay{position:fixed;inset:0;z-index:1400;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(20,24,34,.35);backdrop-filter:blur(7px) saturate(.9);-webkit-backdrop-filter:blur(7px) saturate(.9);animation:fadeIn .25s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.account-lock-dialog{position:relative;width:min(680px,100%);max-height:90vh;display:flex}
.notice-dialog{position:relative;width:min(680px,100%);max-height:86vh;display:flex;flex-direction:column;gap:12px;padding:20px 22px;border-radius:14px;border:1px solid var(--border);background:var(--bg-card);box-shadow:0 24px 60px rgba(0,0,0,.35);animation:fadeInUp .35s ease both}
.notice-dialog>h3{margin:0;padding-right:34px;font-size:1.05rem}
.account-notices-bar{display:flex;align-items:center;gap:10px;margin:10px 190px 0 20px;padding:9px 14px;border:1px solid var(--border);border-left:4px solid #2ea043;border-radius:10px;background:var(--bg-card);font-size:.9rem}
.account-notices-bar .bar-icon{font-size:1.05rem;line-height:1}
.account-notices-bar b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.account-notices-bar .btn-text{white-space:nowrap;color:var(--primary);font-weight:600}
@media (max-width:820px){.account-notices-bar{margin:44px 12px 0}}
.account-lock-dialog .account-placard{width:100%;margin:0;max-height:none;box-shadow:0 24px 60px rgba(0,0,0,.35);animation:fadeInUp .35s ease both}
.notice-close,.account-lock-close{position:absolute;top:8px;right:10px;z-index:1;width:32px;height:32px;border:none;border-radius:50%;background:transparent;color:var(--text-muted);font-size:1.5rem;line-height:1;cursor:pointer}
.notice-close:hover,.account-lock-close:hover{background:var(--bg-panel);color:var(--text-main)}
/* The bar where the composer was */
.account-lock-bar{display:flex;align-items:center;gap:10px;width:90%;margin:0 auto;padding:10px 14px;border:1.5px dashed var(--accent-gold);border-radius:12px;background:var(--bg-card);font-size:.9rem}
.account-lock-bar .bar-icon{font-size:1.1rem;line-height:1}
.account-lock-bar .bar-sub{color:var(--text-muted);font-size:.8rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-lock-bar .btn-text{white-space:nowrap;color:var(--primary);font-weight:600}
@media (max-width:640px){.account-lock-bar{flex-wrap:wrap}.account-lock-overlay{padding:10px;align-items:flex-end}}
body.account-locked .box-container{flex-wrap:wrap}
.eaten{visibility:hidden !important;pointer-events:none !important}
/* A control under the gavel: jolts, tilts, cracks and fades. */
.struck{animation:struck .5s cubic-bezier(.3,.9,.4,1) forwards;transform-origin:center 20%;position:relative}
@keyframes struck{0%{transform:none;filter:none;opacity:1}12%{transform:translateY(5px) scale(1.03,.94) rotate(-1.5deg)}30%{transform:translateY(2px) rotate(2.5deg)}55%{transform:translateY(4px) rotate(-1deg);filter:blur(.4px);opacity:.75}100%{transform:translateY(10px) rotate(3deg) scale(.96);filter:blur(2px);opacity:0}}
.struck::after{content:"";position:absolute;inset:-2px;pointer-events:none;background:
  linear-gradient(115deg,transparent 46%,rgba(60,40,20,.55) 47%,transparent 48.5%),
  linear-gradient(60deg,transparent 58%,rgba(60,40,20,.45) 59%,transparent 60.5%),
  linear-gradient(150deg,transparent 30%,rgba(60,40,20,.4) 31%,transparent 32%);
  opacity:0;animation:crack .5s steps(1) forwards}
@keyframes crack{0%{opacity:0}18%{opacity:1}100%{opacity:1}}
.account-placard{display:flex;gap:16px;align-items:flex-start;width:90%;margin:6px auto 0;max-height:46vh;overflow:auto;padding:16px 18px;border:1.5px solid var(--accent-gold);border-radius:12px;background:var(--bg-card);box-shadow:0 2px 12px var(--border);animation:fadeInUp .5s ease both}
.account-placard .placard-icon{font-size:2rem;line-height:1}
.account-placard h3{margin:0 0 6px;font-size:1.05rem}
.account-placard p{margin:0 0 8px;color:var(--text-main);line-height:1.45}
.account-placard .placard-sub,.account-placard .placard-foot{font-size:.8rem;color:var(--text-muted)}
.account-placard .placard-actions{display:flex;gap:8px;align-items:flex-end;margin:8px 0}
.account-placard textarea{flex:1;min-width:0;resize:vertical;font:inherit;font-size:.85rem;padding:6px 8px;border:1px solid var(--border);border-radius:6px;background:var(--bg-panel);color:var(--text-main)}
.account-placard .placard-sent{margin:8px 0;color:#2ea043;font-weight:600}
@media (max-width:640px){.account-placard{flex-direction:column;gap:8px}.account-placard .placard-actions{flex-direction:column;align-items:stretch}}

/* ── The gavel ── */
#gavel{position:fixed;left:0;top:0;width:88px;height:120px;z-index:9999;pointer-events:none;transition:transform .45s cubic-bezier(.45,.05,.35,1);will-change:transform}
#gavel.leave{transition-duration:.7s;transition-timing-function:cubic-bezier(.5,0,.8,.4)}
#gavel .gavel-shadow{position:absolute;left:14px;bottom:0;width:60px;height:12px;border-radius:50%;background:rgba(0,0,0,.28);filter:blur(3px);transform:scale(.55);opacity:.5;transition:transform .19s ease-in,opacity .19s}
#gavel.strike .gavel-shadow{transform:scale(1);opacity:.85}
/* The arm pivots at the end of the handle; at rest it is raised, on .strike it drops. */
#gavel .gavel-arm{position:absolute;left:44px;top:14px;width:0;height:0;transform:rotate(-58deg);transform-origin:0 0;animation:gavel-hover 1.4s ease-in-out infinite}
#gavel.strike .gavel-arm{animation:gavel-strike .36s cubic-bezier(.55,0,.9,.6) forwards}
@keyframes gavel-hover{0%,100%{transform:rotate(-58deg)}50%{transform:rotate(-64deg)}}
@keyframes gavel-strike{0%{transform:rotate(-60deg)}52%{transform:rotate(-2deg)}64%{transform:rotate(-9deg)}100%{transform:rotate(-56deg)}}
#gavel .gavel-handle{position:absolute;left:-5px;top:0;width:10px;height:66px;border-radius:5px;background:linear-gradient(90deg,#6b3f1d,#a9713d 45%,#7a4a22);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
#gavel .gavel-head{position:absolute;left:-24px;top:58px;width:48px;height:26px;border-radius:7px;background:linear-gradient(180deg,#8a5a2b,#5a3414 60%,#4a2a10);box-shadow:0 3px 8px rgba(0,0,0,.35),inset 0 2px 0 rgba(255,255,255,.18)}
#gavel .gavel-head::before,#gavel .gavel-head::after{content:"";position:absolute;top:2px;width:7px;height:22px;border-radius:3px;background:linear-gradient(90deg,#3a1f0a,#6b3f1d)}
#gavel .gavel-head::before{left:2px}#gavel .gavel-head::after{right:2px}
#gavel .gavel-say{position:absolute;left:100px;top:-4px;padding:5px 10px;border-radius:12px;background:var(--bg-card);color:var(--text-main);border:1px solid var(--border);font:700 .82rem var(--font-sans);white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.15)}
@media (max-width:640px){#gavel .gavel-say{left:auto;right:-8px;top:-30px}}

/* ── Provider incidents pill (navbar, system operators) ── */
.incident-wrap{position:relative;display:inline-flex;align-items:center;margin-right:12px}
.incident-pill{border:1px solid rgba(232,178,31,.6);background:rgba(232,178,31,.14);color:#a16207;border-radius:999px;padding:3px 10px;font:600 .8rem var(--font-sans);cursor:pointer;line-height:1.3}
.incident-pill.fatal{border-color:rgba(220,38,38,.6);background:rgba(220,38,38,.12);color:#c0392b;animation:inc-pulse 1.6s ease-in-out infinite}
@keyframes inc-pulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.35)}50%{box-shadow:0 0 0 6px rgba(220,38,38,0)}}
[data-theme="dark"] .incident-pill{color:#f2c94c}
.incident-panel{position:absolute;right:0;top:calc(100% + 8px);width:min(440px,92vw);max-height:70vh;overflow:auto;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.25);padding:12px 14px;z-index:1200;font-size:.82rem;text-align:left}
.incident-panel .inc-head{margin-bottom:6px}
.incident-panel .inc-provs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.incident-panel .inc-prov{padding:2px 8px;border-radius:999px;background:var(--bg-panel);border:1px solid var(--border)}
.incident-panel .inc-item{padding:6px 0;border-top:1px solid var(--border)}
.incident-panel .inc-item.fatal b{color:#c0392b}
.incident-panel .inc-at{color:var(--text-muted);font-variant-numeric:tabular-nums;margin-right:4px}
.incident-panel .inc-err{color:var(--text-muted);font-size:.76rem;word-break:break-word;margin-top:2px}
.incident-panel .inc-foot{margin-top:8px;color:var(--text-muted);font-size:.76rem}
@media (max-width:600px){.incident-wrap{margin-right:6px}.incident-pill{padding:2px 7px}}

/* Recordatorios: the bell in the navbar (every signed-in user). Neutral when
   only tomorrow has entries, amber when something is due today, red when a
   reminder passed without being marked. */
.reminder-pill{border-color:var(--border);background:var(--bg-panel);color:var(--text-main)}
.reminder-pill.today{border-color:rgba(232,178,31,.6);background:rgba(232,178,31,.14);color:#a16207}
.reminder-pill.overdue{border-color:rgba(220,38,38,.6);background:rgba(220,38,38,.12);color:#c0392b}
[data-theme="dark"] .reminder-pill.today{color:#f2c94c}
.reminder-panel .rem-group{margin:8px 0 2px;color:var(--text-muted);font-weight:600;font-size:.76rem;text-transform:uppercase;letter-spacing:.03em}
.reminder-panel .rem-item{display:flex;align-items:flex-start;gap:8px;padding:6px 0;border-top:1px solid var(--border)}
.reminder-panel .rem-time{min-width:44px;font-variant-numeric:tabular-nums;font-weight:600}
.reminder-panel .rem-body{flex:1;min-width:0}
.reminder-panel .rem-meta{color:var(--text-muted);font-size:.76rem}
.reminder-panel .rem-done{border:1px solid var(--border);background:none;border-radius:6px;cursor:pointer;color:var(--text-muted);font-size:.8rem;padding:1px 6px;line-height:1.4}
.reminder-panel .rem-done:hover{color:var(--primary);border-color:var(--primary)}
.reminder-panel .rem-item.overdue .rem-time{color:#c0392b}

/* Conexión IA — attempt order: one chip per provider, moved with the arrows.
   Position 1 is the primary, so the chip list and the primary select are two
   views of the same value. */
.llm-order-wrap { grid-column: 1 / -1; }
.llm-order-wrap > small { display: block; color: var(--text-muted); font-size: .78rem; margin-bottom: 5px; }
.llm-order-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.llm-order-item { display: inline-flex; align-items: center; gap: 6px; padding: 3px 5px 3px 8px;
    border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); font-size: .82rem; }
.llm-order-item.first { border-color: var(--accent-gold); }
.llm-order-item .ord-n { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent-gold); font-size: .72rem; }
.llm-order-item .ord-primary { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-gold); }
.llm-order-item .ord-btn { background: none; border: none; cursor: pointer; color: var(--text-muted);
    padding: 0 2px; line-height: 1; font-size: .8rem; border-radius: 4px; }
.llm-order-item .ord-btn:hover:not([disabled]) { color: var(--primary); background: var(--bg-panel); }
.llm-order-item .ord-btn[disabled] { opacity: .3; cursor: default; }
.llm-order-off { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
    border: 1px dashed var(--border); background: transparent; color: var(--text-muted);
    font-size: .78rem; text-decoration: line-through; }

/* Expediente picker: sits with the composer actions, styled like the language
   select in the navbar so the two selects read as one control family. */
.scope-picker { display:inline-flex; align-items:center; gap:7px; color:var(--text-muted); cursor:pointer; }
/* Says what the select does: the chosen expediente is what answers come from. */
.scope-label { font-size:0.85rem; color:var(--text-muted); white-space:nowrap; line-height:1; }
.scope-picker select { appearance:none; -webkit-appearance:none; background:var(--bg-card);
    color:var(--text-main); border:1px solid var(--border); border-radius:6px;
    padding:5px 24px 5px 8px; font:inherit; font-size:0.8rem; cursor:pointer;
    max-width:170px; text-overflow:ellipsis;
    background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);
    background-position:calc(100% - 13px) 50%,calc(100% - 8px) 50%;
    background-size:5px 5px; background-repeat:no-repeat; }
.scope-picker select.scoped { border-color:var(--accent-gold); color:var(--text-main); font-weight:600; }
/* On a phone the row already carries Diálogo, the mode switch and send, so the
   label drops out and the select (defaulting to "Todos los expedientes") stands
   on its own. */
@media (max-width: 640px) {
    .scope-label { display:none; }
    .scope-picker select { max-width:104px; padding:5px 22px 5px 6px; font-size:0.78rem; }
}

/* Diálogo: two filled sparkles, amber and blue, like the ✨ in the manual. */
#chat-dialog-btn .spark-lg{fill:var(--spark-lg);stroke:none}
#chat-dialog-btn .spark-sm{fill:var(--spark-sm);stroke:none}

/* Chat attachments: drop target, chip and the paperclip button. */
.box.drag-over { outline:2px dashed var(--primary); outline-offset:-6px; background:rgba(0,0,0,0.02); }
.attach-chip { display:flex; align-items:center; gap:8px; margin:0 12px 4px; padding:5px 10px;
               border:1px solid var(--border); border-radius:16px; background:var(--bg-panel);
               font-size:0.8rem; color:var(--text-main); max-width:calc(100% - 24px); width:fit-content; }
.attach-chip .attach-name { font-weight:600; max-width:260px; overflow:hidden;
                            text-overflow:ellipsis; white-space:nowrap; }
.attach-chip .attach-status { color:var(--text-muted); font-size:0.75rem; }
.attach-chip .attach-remove { background:none; border:none; cursor:pointer; color:var(--text-muted);
                              font-size:1.05rem; line-height:1; padding:0 2px; }
.attach-chip .attach-remove:hover { color:var(--text-main); }
/* Filing button on the chip (pending attachments, admins/uploaders only);
   once filed the chip turns into the document's expediente badge. */
.attach-chip .attach-save { background:none; border:none; cursor:pointer; color:var(--text-muted);
                            padding:0 2px; display:inline-flex; align-items:center; }
.attach-chip .attach-save svg { width:16px; height:16px; }
.attach-chip .attach-save:hover { color:var(--primary); }
.attach-chip.saved { border-color:var(--primary); }
.attach-chip.saved .attach-name { color:var(--primary); }
.attach-btn { background:none; border:none; cursor:pointer; color:var(--text-muted);
              padding:4px 8px; display:inline-flex; align-items:center; gap:7px; border-radius:6px;
              stroke-width:1; }
.attach-btn:hover { color:var(--primary); background:rgba(0,0,0,0.04); }

/* Export-answer modal: content/format option rows. */
.export-opt { display:flex; align-items:flex-start; gap:9px; padding:6px 2px; cursor:pointer;
              font-size:0.9rem; color:var(--text-main); }
.export-opt input { margin-top:2px; flex:0 0 auto; cursor:pointer; }
.export-opt:hover { color:var(--primary); }
.export-hint { color:var(--text-muted); font-size:0.8rem; }

/* Small on/off toggle switch (used for "Chatear con IA" in the chat footer). */
.toggle-switch{position:relative;display:inline-block;width:38px;height:20px;flex:0 0 auto}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:#bbb;border-radius:20px;transition:.2s}
.toggle-slider::before{content:"";position:absolute;height:14px;width:14px;left:3px;top:3px;
                       background:#fff;border-radius:50%;transition:.2s}
.toggle-switch input:checked + .toggle-slider{background:var(--primary)}
.toggle-switch input:checked + .toggle-slider::before{transform:translateX(18px)}

  
/* Responsive design */
@media (max-width: 768px) {
    .tab {
        flex-wrap: wrap;
    }

    .tab button {
        flex: 1 1 50%;
        font-size: 0.85rem;
        padding: 14px 16px;
    }
}

@media (max-width: 480px) {
    .tab button {
        flex: 1 1 100%;
    }
}


/* ========================================
   TOKEN USAGE DASHBOARD STYLES
======================================== */

/* Dashboard Modal */
.dashboard-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.dashboard-modal.active {
    display: flex;
}

.dashboard-container {
    background: var(--bg-body);
    width: 100%;
    max-width: 1200px;
    max-height: 90vh;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Administración → Consumo: the same panel, inline in the tab. It keeps its own
   layout but drops the modal chrome (shadow, height cap, close button). */
.usage-host .dashboard-container.is-inline { max-width: none; max-height: none; box-shadow: none; border-radius: 10px; }
.usage-host .dashboard-container.is-inline .dashboard-content { max-height: none; overflow: visible; }
.usage-host .dashboard-container.is-inline .close-dashboard { display: none; }
/* One column inline: the admin modal is narrower than the standalone panel, and
   the 12-month bar chart needs the full width to stay legible. */
.usage-host .dashboard-container.is-inline .charts-section { grid-template-columns: 1fr; }

/* Dashboard Header */
.dashboard-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashboard-title {
    display: flex;
    align-items: center;
    gap: 15px;
}

.dashboard-title h2 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--text-main);
}

.dashboard-tabs {
    display: flex;
    gap: 10px;
}

.tab-btn {
    background: transparent;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-muted);
    font-weight: 500;
    transition: all 0.2s;
}

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

.dashboard-controls {
    display: flex;
    gap: 15px;
    align-items: center;
}

.year-selector {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-main);
    cursor: pointer;
}

.time-filter {
    display: flex;
    gap: 5px;
    background: var(--bg-panel);
    padding: 4px;
    border-radius: 6px;
}

.time-filter button {
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.time-filter button.active {
    background: var(--bg-card);
    color: var(--text-main);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.export-btn {
    padding: 8px 16px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
}

.export-btn:hover {
    background: var(--primary-hover);
}

.close-dashboard {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 5px;
    line-height: 1;
}

/* Dashboard Content */
.dashboard-content {
    padding: 30px;
    overflow-y: auto;
    max-height: calc(90vh - 80px);
    background: var(--bg-body);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px 18px 22px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
}

.stat-card.tokens-in::before {
    background: var(--tokens-in-color);
}

.stat-card.tokens-out::before {
    background: var(--tokens-out-color);
}

.stat-card.storage::before {
    background: var(--storage-color);
}

.stat-card.total::before {
    background: var(--total-tokens-color);
}

.stat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    min-height: 2.2em;      /* two-line titles keep every card the same height */
}

/* The tinted icon block was dropped: the number carries the metric's colour,
   which is the thing you actually scan for. */
.stat-icon { display: none; }

/* The account selector used to carry hard-coded dark colours inline, so in the
   light theme it was a dark box on cream. */
.dash-kb-label { font-size: 0.82rem; color: var(--text-muted); white-space: nowrap; }
.dash-kb-select {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.35rem 0.7rem;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    max-width: 16rem;
}
.dash-kb-select:focus { outline: 2px solid var(--primary); outline-offset: 1px; }

.stat-title {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.stat-card.tokens-in  .stat-number { color: var(--tokens-in-color); }
.stat-card.tokens-out .stat-number { color: var(--tokens-out-color); }
.stat-card.storage    .stat-number { color: var(--storage-color); }
.stat-card.total      .stat-number { color: var(--total-tokens-color); }

/* The ceiling a quota is measured against: "0,31 GB" alone cannot tell anyone
   whether to act. Sits under the number, in the muted tone. */
.stat-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    margin-bottom: 4px;
}

.stat-change {
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.stat-change.positive {
    color: var(--status-normal);
}

.stat-change.negative {
    color: var(--status-high);
}

/* Charts Section */
.charts-section {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

/* Grid children default to min-width:auto and refuse to shrink below their
   content, which pushed the charts past the panel when it is mounted inside
   Administración (966 px instead of the modal's 1200). */
.charts-section > * { min-width: 0; }

.chart-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 25px;
}

.chart-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 20px;
}

.chart-legend {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    justify-content: center;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.legend-color.tokens-in {
    background: var(--tokens-in-color);
}

.legend-color.tokens-out {
    background: var(--tokens-out-color);
}

/* Bar Chart */
.bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 250px;
    gap: 15px;
    padding: 20px 0;
    border-bottom: 2px solid var(--border);
    position: relative;
}

.bar-chart::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: repeating-linear-gradient(
        to top,
        var(--chart-grid) 0px,
        var(--chart-grid) 1px,
        transparent 1px,
        transparent 50px
    );
    pointer-events: none;
}

.bar-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    height: 100%;
    position: relative;
}

.bars {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    width: 100%;
    height: 100%;
    justify-content: center;
}

.bar {
    width: 20px;
    border-radius: 4px 4px 0 0;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.bar.tokens-in {
    background: var(--tokens-in-color);
}

.bar.tokens-out {
    background: var(--tokens-out-color);
}

.bar:hover {
    opacity: 0.8;
    transform: translateY(-3px);
}

.month-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Donut Chart */
.donut-chart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.donut-chart {
    position: relative;
    width: 200px;
    height: 200px;
}

.donut-chart svg {
    transform: rotate(-90deg);
}

.donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.donut-percentage {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1;
}

.donut-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.ratio-stats {
    width: 100%;
}

.ratio-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.ratio-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ratio-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.ratio-dot.tokens-in {
    background: var(--tokens-in-color);
}

.ratio-dot.tokens-out {
    background: var(--tokens-out-color);
}

.ratio-name {
    font-size: 0.9rem;
    color: var(--text-main);
}

.ratio-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
}

.storage-progress {
    margin-top: 20px;
}

.storage-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;                 /* the label and the figure ran together */
    flex-wrap: wrap;
    margin-bottom: 8px;
    font-size: 0.85rem;
}

.storage-label-text {
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.storage-value {
    color: var(--storage-color);
    font-weight: 700;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--progress-bg);
    border-radius: 10px;
    overflow: hidden;
}

/* A quota bar earns attention only near the ceiling. */
.progress-fill.is-moderate { background: var(--status-moderate) !important; }
.progress-fill.is-high     { background: var(--status-high) !important; }

.progress-fill {
    height: 100%;
    background: var(--storage-color);
    border-radius: 10px;
    transition: width 0.5s ease;
}

/* Monthly Breakdown Table */
.breakdown-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 25px;
}

.breakdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.breakdown-filters {
    display: flex;
    gap: 10px;
    background: var(--bg-panel);
    padding: 4px;
    border-radius: 6px;
}

.breakdown-filters button {
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.breakdown-filters button.active {
    background: var(--bg-card);
    color: var(--text-main);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.breakdown-table {
    width: 100%;
    border-collapse: collapse;
}

.breakdown-table thead {
    background: var(--bg-panel);
}

.breakdown-table th {
    padding: 12px;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border);
}

.breakdown-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}

.breakdown-table tbody tr:hover {
    background: var(--bg-panel);
}

.breakdown-table td {
    padding: 15px 12px;
    color: var(--text-main);
}

.month-cell {
    font-weight: 600;
}

.tokens-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.token-bar {
    height: 6px;
    border-radius: 3px;
    min-width: 60px;
    max-width: 120px;
}

.token-bar.tokens-in {
    background: var(--tokens-in-color);
}

.token-bar.tokens-out {
    background: var(--tokens-out-color);
}

.storage-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.storage-badge.normal {
    background: rgba(46, 204, 113, 0.1);
    color: var(--status-normal);
}

.storage-badge.moderate {
    background: rgba(243, 156, 18, 0.1);
    color: var(--status-moderate);
}

.storage-badge.high {
    background: rgba(231, 76, 60, 0.1);
    color: var(--status-high);
}

.trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 0.85rem;
}

.trend.up {
    color: var(--status-normal);
}

.trend.down {
    color: var(--status-high);
}

/* Responsive */
@media (max-width: 968px) {
    .charts-section {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 640px) {
    .dashboard-content {
        padding: 15px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .bar-chart {
        height: 200px;
    }

    .breakdown-table {
        font-size: 0.85rem;
    }

    .dashboard-controls {
        flex-wrap: wrap;
    }
}


/* Responsive design */
@media (max-width: 768px) {
    .tab {
        flex-wrap: wrap;
    }

    .tab button {
        flex: 1 1 50%;
        font-size: 0.85rem;
        padding: 14px 16px;
    }
}

@media (max-width: 480px) {
    .tab button {
        flex: 1 1 100%;
    }
}


/* Diálogo — adaptive intake interview */
.dialog-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 12px 4px;padding:6px 10px;border:1px dashed var(--primary);border-radius:8px;font-size:.8rem;color:var(--text-muted);background:var(--bg-card)}
.dialog-bar strong{color:var(--primary)}
.dialog-bar .dialog-bar-btn{background:transparent;border:1px solid var(--border);color:var(--text-main);border-radius:4px;padding:3px 8px;font-size:.75rem;cursor:pointer}
.dialog-bar .dialog-bar-btn:hover{border-color:var(--primary);color:var(--primary)}
.dialog-bar .dialog-summary{flex-basis:100%;white-space:pre-wrap;color:var(--text-main);font-size:.78rem;max-height:160px;overflow:auto;margin-top:4px}
.dialog-badge{display:inline-block;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--primary);border:1px solid var(--primary);border-radius:4px;padding:1px 6px;margin:0 0 6px}
.message.ai.dialog-q{border-left:3px solid var(--primary)}
.dialog-question{margin:8px 0}
.dialog-question .dialog-default{display:block;font-size:.75rem;color:var(--text-muted);font-style:italic;margin-top:2px}
.dialog-options{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.dialog-option-chip,.dialog-action-chip{background:transparent;border:1px solid var(--border);color:var(--text-main);border-radius:4px;padding:4px 8px;font-size:.75rem;cursor:pointer;transition:border-color .15s,color .15s}
.dialog-option-chip:hover,.dialog-action-chip:hover{border-color:var(--primary);color:var(--primary)}
.dialog-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:8px;border-top:1px solid var(--border)}
.dialog-group{display:flex;flex-direction:column;gap:1.5rem}
.dialog-collapsed-line{display:none;font-size:.78rem;color:var(--text-muted);cursor:pointer;padding:4px 0;user-select:none}
.dialog-group.collapsed>.message{display:none}
.dialog-group.collapsed>.dialog-collapsed-line{display:block}
.user-tag{display:block;font-size:.7rem;color:var(--text-muted);font-style:italic;margin-bottom:4px}

/* ── Collapsed rail ─────────────────────────────────────────────────────────
   Keeps the two counts and the two actions you would reopen the sidebar for. */
.sidebar-mini { display: none; }
.sidebar.collapsed .sidebar-mini { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mini-btn { width: 36px; height: 36px; box-sizing: border-box; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 9px;
            background: var(--bg-panel); color: var(--text-main); display: grid; place-items: center; cursor: pointer;
            transition: background .15s, color .15s, border-color .15s; }
.mini-btn:hover { color: var(--primary); border-color: var(--primary); }
.mini-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.mini-stat { text-align: center; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mini-stat b { display: block; font-size: .82rem; font-weight: 600; color: var(--primary); }
.mini-stat span { display: block; font-size: .55rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }

/* ── Source cards under an answer ──────────────────────────────────────────
   One card per source: relevance gutter, filename + page, and the matching
   passage with the answer's own terms highlighted. */
.source-cards { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.source-cards .sources-label { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.source-card { display: flex; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-panel); overflow: hidden;
               text-decoration: none; color: inherit; transition: border-color .15s; }
.source-card:hover { border-color: var(--primary); }
.source-card .src-gutter { width: 38px; flex: none; border-right: 1px solid var(--border); background: var(--bg-card);
                           display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 8px 0; }
.source-card .src-score { font-size: .65rem; font-weight: 600; letter-spacing: -0.02em; color: var(--accent-gold); font-variant-numeric: tabular-nums; }
.source-card .src-bar { width: 4px; flex: 1; min-height: 20px; border-radius: 3px; background: var(--border); position: relative; overflow: hidden; }
.source-card .src-bar i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--accent-gold); display: block; }
.source-card .src-body { padding: 8px 11px; min-width: 0; flex: 1; }
.source-card .src-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.source-card .src-name { font-size: .78rem; font-weight: 600; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; }
.source-card .src-loc { font-size: .7rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.source-card .src-badge { font-size: .6rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--primary);
                          border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
.source-card .src-snippet { margin: 0; font-size: .78rem; color: var(--text-muted); line-height: 1.5; }
.source-card .src-snippet mark { background: rgba(196,163,90,.22); color: var(--text-main); border-radius: 3px; padding: 1px 3px; }
.message.user .source-cards { display: none; }

/* ── Diálogo wizard: one question at a time ─────────────────────────────── */
.message.ai.dialog-wizard{max-width:min(75%,720px);width:100%}
.dw-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px}
.dw-tab{background:transparent;border:1px solid var(--border);color:var(--text-muted);border-radius:999px;padding:3px 10px;font-size:.72rem;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.dw-tab.done{color:var(--text-main)}
.dw-tab.active{border-color:var(--primary);color:var(--primary);background:rgba(27,42,74,.06);font-weight:600}
[data-theme="dark"] .dw-tab.active{background:rgba(196,163,90,.12)}
.dw-question{margin:4px 0 10px}
.dw-text{font-weight:600;font-size:.98rem;line-height:1.4;margin-bottom:4px}
.dw-why{font-size:.78rem;color:var(--text-muted);margin-bottom:10px}
.dw-options{display:flex;flex-direction:column;gap:6px}
.dw-opt{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg-panel);cursor:pointer;font-size:.88rem;transition:border-color .15s,background .15s}
.dw-opt:hover{border-color:var(--primary)}
.dw-opt.checked{border-color:var(--primary);background:rgba(27,42,74,.06)}
[data-theme="dark"] .dw-opt.checked{background:rgba(196,163,90,.12)}
.dw-opt input{accent-color:var(--primary);margin:0;flex:none}
.dw-other{width:100%;box-sizing:border-box;margin-top:2px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg-input);color:var(--text-main);font:inherit;font-size:.88rem}
.dw-other.hidden{display:none}
.dw-other:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.dw-default{font-size:.75rem;color:var(--text-muted);font-style:italic;margin-top:8px}
.dw-nav{display:flex;align-items:center;gap:8px;margin-top:12px}
.dw-spacer{flex:1}
.dw-btn{border-radius:8px;padding:7px 14px;font-size:.85rem;cursor:pointer;font-weight:600;transition:background .15s,color .15s,border-color .15s}
.dw-btn.primary{background:var(--primary);color:#fff;border:1px solid var(--primary)}
.dw-btn.primary:hover{background:var(--primary-hover)}
[data-theme="dark"] .dw-btn.primary{color:#121820}
.dw-btn.ghost{background:transparent;color:var(--text-main);border:1px solid var(--border)}
.dw-btn.ghost:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}
.dw-btn:disabled{opacity:.45;cursor:not-allowed}

/* Expediente scope chip (composer) and the footer tag that sets it */
.scope-chip .attach-name { color: var(--primary); }
.scope-link { color: inherit; text-decoration: underline dotted; cursor: pointer; }
.scope-link:hover { color: var(--primary); }

/* ── Ayuda modal: fixed width, scrolls vertically, compact type ─────────── */
#help-modal .help-content{width:640px;max-width:92vw;max-height:82vh;overflow-y:auto;padding:1.25rem 1.5rem 1.5rem;box-sizing:border-box}
#help-modal .modal-header-row{padding-bottom:.6rem;margin-bottom:.5rem}
#help-modal .modal-header-row h2{font-size:1.15rem}
.help-accordion details{border:1px solid var(--border);border-radius:8px;background:var(--bg-panel);margin:8px 0}
.help-accordion summary{list-style:none;cursor:pointer;padding:9px 12px;font-weight:600;font-size:.9rem;color:var(--text-main);display:flex;align-items:center;gap:8px}
.help-accordion summary::-webkit-details-marker{display:none}
.help-accordion summary::before{content:'▸';color:var(--text-muted);font-size:.8rem;transition:transform .15s}
.help-accordion details[open] summary::before{transform:rotate(90deg)}
.help-accordion summary:hover{color:var(--primary)}
.help-body{padding:0 14px 12px;font-size:.85rem;line-height:1.5;color:var(--text-main);overflow-wrap:anywhere}
.help-body p{margin:6px 0}
.help-body h4{margin:10px 0 4px;font-size:.85rem;font-weight:600;color:var(--text-main)}
.help-body ul{margin:4px 0 8px 18px;padding:0}
.help-body li{margin:3px 0}
.help-body kbd{font-family:var(--font-sans);font-size:.78rem;border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;padding:0 5px;background:var(--bg-card)}
.help-badge{font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);border:1px solid var(--border);border-radius:4px;padding:0 5px;vertical-align:middle}
.help-tip{border-left:3px solid var(--accent-gold);background:var(--bg-card);padding:8px 10px;border-radius:6px;margin-top:8px;font-size:.82rem}
.tag-x{color:#A33B3B;font-weight:600}.tag-check{color:#2F6B4F;font-weight:600}
[data-theme="dark"] .tag-x{color:#E06B6B}[data-theme="dark"] .tag-check{color:#4CAF7A}

/* ── @comandos: autocomplete popover, choice chips, help table ───────────── */
.cmd-popover{position:absolute;left:8px;right:8px;bottom:calc(100% + 6px);background:var(--bg-card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);max-height:300px;overflow-y:auto;z-index:60;padding:4px}
.cmd-popover.hidden{display:none}
.cmd-row{display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;padding:6px 10px;border-radius:6px;cursor:pointer;font-size:.85rem;align-items:center}
.cmd-row.active,.cmd-row:hover{background:var(--bg-panel)}
.cmd-name{font-weight:600;color:var(--primary);white-space:nowrap}
.cmd-args{color:var(--text-muted);font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmd-desc{grid-column:1 / -1;color:var(--text-muted);font-size:.78rem;line-height:1.35}
.cmd-cost{font-size:.6rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--border);border-radius:4px;padding:1px 5px;color:var(--text-muted);white-space:nowrap}
.cmd-cost-gratis{color:#2F6B4F}.cmd-cost-pesado{color:#A33B3B}
[data-theme="dark"] .cmd-cost-gratis{color:#4CAF7A}[data-theme="dark"] .cmd-cost-pesado{color:#E06B6B}
.cmd-choices{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:8px;border-top:1px solid var(--border)}
.help-cmd-table{width:100%;border-collapse:collapse;font-size:.8rem;margin:6px 0}
.help-cmd-table td{padding:6px 6px;border-top:1px solid var(--border);vertical-align:top}
.help-cmd-table tr:first-child td{border-top:none}
.help-cmd-table td:first-child{white-space:nowrap}
.help-cmd-table td:last-child{text-align:right}
.help-cmd-table .help-cmd-sub td{border-top:none;padding-top:0;color:var(--text-muted);font-size:.95em}
.help-cmd-table .help-cmd-sub td:first-child{padding-left:14px}

/* ── Plan usage bars (sidebar + collapsed rail) ─────────────────────────── */
:root{--usage-ok:#32CD32;--usage-warn:#C98A1B;--usage-over:#A33B3B;--usage-gradient:linear-gradient(90deg,var(--usage-ok) 0%,var(--usage-ok) 45%,var(--usage-warn) 78%,var(--usage-over) 100%)}
[data-theme="dark"]{--usage-ok:#4ADE4A;--usage-warn:#E0A63A;--usage-over:#E06B6B}
.plan-box{background:var(--bg-panel);border:1px solid var(--border);border-radius:9px;padding:9px 12px;margin-top:6px}
.plan-box.hidden{display:none}
.plan-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.plan-name{font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--primary)}
.plan-month{font-size:.66rem;color:var(--text-muted);font-variant-numeric:tabular-nums}
.usage-row{display:flex;justify-content:space-between;font-size:.72rem;color:var(--text-muted);margin-top:6px;font-variant-numeric:tabular-nums}
.usage-row span:last-child{color:var(--text-main)}
.usage-bar{height:4px;border-radius:3px;background:var(--border);overflow:hidden;margin-top:3px}
.usage-bar i,.mini-usage i{display:block;height:100%;width:0;border-radius:3px;transition:width .4s ease,background .3s}
.usage-bar i{background-repeat:no-repeat;background-position:left center}
.usage-note{font-size:.68rem;line-height:1.35;margin-top:6px;color:var(--text-muted)}
.usage-note:empty{display:none}
.usage-note.lvl-warn{color:var(--usage-warn);background:none}
.usage-note.lvl-over{color:var(--usage-over);background:none}
.mini-usage{display:flex;flex-direction:column;gap:3px;width:36px}
.mini-usage i{height:3px;width:100%;background:var(--border)}

/* ========================================
   LANDING PAGE — trust row, how-it-works, plans, footer, nav extras
======================================== */
.hero-sub { margin-bottom: 1.5rem; }
.trust-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.trust-row li { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-main); font-size: 0.95rem; font-weight: 500; }
.trust-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-gold); flex-shrink: 0; }

/* Login card help lines */
.login-help { margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--text-muted); }
.login-help p { margin: 0 0 0.35rem; }
.login-help a { color: var(--primary); font-weight: 600; text-decoration: none; }
.login-help a:hover { text-decoration: underline; }

/* Nav: language select + landing-only sign-in link (see also the 600px block below) */
.lang-select { appearance: none; -webkit-appearance: none; background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border); border-radius: 6px; padding: 6px 28px 6px 10px; font: inherit; font-size: 0.85rem; cursor: pointer; margin-right: 10px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.nav-login-link { display: none; text-decoration: none; padding: 8px 14px; border-radius: 4px; font-size: 0.9rem; }
/* Shown only while the landing view is on screen and the card is a scroll away. */
@media (max-width: 900px) {
    body:has(#landing-view:not(.hidden)) .nav-login-link { display: inline-flex; }
}

/* How it works */
.how-section { padding: 4.5rem 0 3.5rem; background: var(--bg-body); border-bottom: 1px solid var(--border); }
/* Equal halves, vertically centred: the steps are set larger and joined by a
   hairline so the column carries as much weight as the screenshot beside it. */
.how-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: center; }
.how-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2.4rem; position: relative; }
.how-steps::before { content: ""; position: absolute; left: 24px; top: 24px; bottom: 24px; width: 1px; background: var(--border); }
.how-steps li { display: flex; gap: 1.25rem; align-items: flex-start; position: relative; }
.how-num { width: 48px; height: 48px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-weight: 600; font-size: 1.35rem; color: var(--primary); background: var(--bg-hero); border: 1px solid var(--accent-gold); box-shadow: 0 0 0 6px var(--bg-body); }
.how-steps h4 { margin: 0.3rem 0 0.45rem; font-family: var(--font-serif); font-size: 1.45rem; font-weight: 600; color: var(--text-main); }
.how-steps p { margin: 0; color: var(--text-muted); line-height: 1.65; font-size: 1.05rem; max-width: 34rem; }
.how-steps code, .feature-card code { font-family: Consolas, 'SFMono-Regular', monospace; font-size: 0.88em; background: var(--bg-hero); border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; color: var(--text-main); }
.how-shot { margin: 0; max-width: 700px; justify-self: center; width: 100%; }
.how-shot img { width: 100%; height: auto; display: block; border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow); background: var(--bg-card); }
.how-shot figcaption { margin-top: 0.6rem; font-size: 0.85rem; color: var(--text-muted); text-align: center; font-style: italic; }

/* Plans */
.plans-section { padding: 4.5rem 0; background: var(--bg-hero); border-bottom: 1px solid var(--border); }
.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.25rem; }
.plan-card { background: var(--bg-card); border: 1px solid var(--border); border-top: 3px solid var(--accent-gold); padding: 1.5rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.6rem; }
.plan-card h3 { margin: 0; font-family: var(--font-serif); font-size: 1.35rem; font-weight: 600; color: var(--text-main); }
.plan-card .plan-price { font-size: 1.1rem; font-weight: 600; color: var(--primary); }
.plan-card .plan-price small { font-weight: 400; color: var(--text-muted); font-size: 0.8rem; }
.plan-card ul { list-style: none; margin: 0.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; color: var(--text-main); font-size: 0.95rem; }
.plan-card li { display: flex; justify-content: space-between; gap: 0.75rem; border-bottom: 1px dotted var(--border); padding-bottom: 0.3rem; }
.plan-card li span:last-child { font-weight: 600; white-space: nowrap; }
.plan-card .plan-desc { margin: 0.4rem 0 0; color: var(--text-muted); font-size: 0.88rem; line-height: 1.5; }
.plans-note { text-align: center; color: var(--text-muted); font-size: 0.9rem; margin: 1.75rem 0 0; }
.plans-empty { text-align: center; color: var(--text-muted); grid-column: 1 / -1; }

/* Footer */
.site-footer { background: var(--bg-card); border-top: 1px solid var(--border); padding: 3rem 0 1.5rem; color: var(--text-muted); font-size: 0.92rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr; gap: 2.5rem; }
.footer-brand-row { display: flex; align-items: center; gap: 10px; margin-bottom: 0.6rem; }
.footer-mark { width: 30px; height: auto; }
.footer-name { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; color: var(--text-main); }
.footer-name em { font-style: normal; color: var(--accent-gold); }
.footer-brand p, .footer-legal p { margin: 0 0 0.5rem; line-height: 1.55; }
.site-footer h5 { margin: 0 0 0.7rem; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-main); font-weight: 600; }
.footer-links { display: flex; flex-direction: column; gap: 0.45rem; }
.footer-links a { color: var(--text-muted); text-decoration: none; }
.footer-links a:hover { color: var(--primary); text-decoration: underline; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2.25rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.85rem; }
.footer-version { font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
    /* A returning user comes for the login card: put it first on small screens. */
    .hero-visual { order: -1; }
    .how-layout, .footer-grid { grid-template-columns: 1fr; }
    .trust-row { flex-direction: column; gap: 0.45rem; }
}
@media (max-width: 480px) {
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
    /* The wordmark + select + sign-in + theme toggle do not fit a 70 px bar on
       a phone: keep the shield only and tighten the controls. */
    .navbar { padding: 0 1rem; }
    .nav-hero-brand .hero-brand-title { display: none; }
    .nav-links { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; }
    .nav-links .btn-icon, .lang-select { margin-right: 0; }
    .lang-select { padding: 6px 24px 6px 8px; font-size: 0.8rem; }
    .nav-login-link { padding: 7px 10px; font-size: 0.85rem; white-space: nowrap; }
}

/* ========================================
   MOBILE / SMALL SCREENS (phones and tablets in portrait)
   The workspace becomes a single full-height chat column. The sidebar goes,
   but not the ability to file documents: "Subir documento" in the menu drives
   the same uploader (its progress window is body-level, so it shows here too),
   and the composer keeps its paperclip for the attach-and-ask flow.
======================================== */

/* Nav sheet: the app actions that do not fit a phone navbar. */
.nav-more-btn { display: none; font-size: 1.05rem; line-height: 1; }
.nav-sheet {
    position: fixed; top: var(--nav-height); right: 8px; z-index: 200;
    min-width: 232px; max-width: calc(100vw - 16px);
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 18px 40px rgba(0,0,0,.18); padding: 6px;
    display: flex; flex-direction: column; gap: 2px;
}
.nav-sheet-user { padding: 8px 12px 6px; font-weight: 600; color: var(--text-main); font-size: 0.9rem;
                  border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.nav-sheet-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: none; border: none; border-radius: 8px; cursor: pointer;
    padding: 11px 12px; font: inherit; font-size: 0.92rem; color: var(--text-main); text-align: left;
}
.nav-sheet-item:hover, .nav-sheet-item:focus-visible { background: var(--bg-panel); }
.nav-sheet-item.danger { color: var(--usage-over, #A33B3B); }
.nav-sheet-item .nav-sheet-ico { width: 18px; text-align: center; flex: none; opacity: .8; }
.nav-sheet-sep { height: 1px; background: var(--border); margin: 4px 2px; }

/* Send button: on a phone the on-screen keyboard's Enter inserts a newline,
   so the composer needs an explicit send control. Hidden on desktop. */
.chat-send-btn {
    display: none; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 40px; border: none; border-radius: 50%;
    background: var(--primary); color: #fff; cursor: pointer;
}
.chat-send-btn:disabled { opacity: .45; cursor: default; }
.chat-send-btn svg { width: 19px; height: 19px; display: block; }

@media (max-width: 820px) {
    /* ── Navbar ─────────────────────────────────────────────────────────── */
    .navbar { padding: 0 0.85rem; }
    #user-display, #admin-btn, #settings-btn, #logout-btn { display: none !important; }
    body:has(#app-view:not(.hidden)) .nav-more-btn { display: inline-flex; }
    .nav-links { gap: 6px; }

    /* ── Layout: one column, no sidebar ────────────────────────────────── */
    .app-layout { flex-direction: column; height: calc(100vh - var(--nav-height)); height: calc(100dvh - var(--nav-height)); }
    #sidebar { display: none !important; }
    .chat-container { width: 100%; flex: 1; min-height: 0; }
    .content-container { min-height: 0; }

    /* ── Chat ──────────────────────────────────────────────────────────── */
    .chat-history { padding: 1rem 0.7rem 0.5rem; gap: 1rem; }
    .message { max-width: 100%; padding: 14px 15px; border-radius: 14px; font-size: 0.94rem; }
    .message.ai.dialog-wizard { max-width: 100%; }
    /* There is no hover on a touch screen: the answer's actions must be visible. */
    .message.ai .bubble-actions { opacity: 0.9; position: static; margin-top: 10px; }
    .source-card .src-name { overflow-wrap: anywhere; white-space: normal; }
    .message table { display: block; width: 100%; overflow-x: auto; }
    .message pre { font-size: 0.82em; }

    /* Clear-history control: icon-only chip, so it stops overlapping the text. */
    #clear-history-btn { background: var(--bg-card); border: 1px solid var(--border);
                         border-radius: 999px; padding: 6px 9px; text-decoration: none; }
    #clear-history-btn span { display: none; }

    /* ── Composer: icon-only tool buttons, so attach + diálogo + scope fit ── */
    .attach-btn .attach-btn-label { display: none; }
    .attach-btn { padding: 6px 8px; }
    .box-container { padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); }
    .box { width: 100%; padding: 0 8px; border-radius: 12px; box-shadow: none; }
    /* 16px keeps iOS from zooming the whole page when the field takes focus. */
    #mirror, #user-input { font-size: 1rem; padding-top: 10px; }
    #mirror { padding-left: 10px; padding-right: 10px; }   /* .box pads 8px here + the textarea's 2px */
    /* rows="4" is right for a desktop composer but eats a phone screen once
       the keyboard is up, so the height is set explicitly here. */
    #user-input { height: 76px; min-height: 76px; max-height: 40vh; resize: none; }
    .footer { padding: 6px 6px 8px; gap: 8px; }
    .chat-send-btn { display: inline-flex; }
    #chat-mode-switch-label { font-size: 0.8rem; }
    .attach-chip .attach-name { max-width: 46vw; }
    .cmd-popover { max-height: 45vh; }

    /* ── Modals: fit the viewport (inline widths are capped by max-width) ── */
    .modal-content { padding: 1.4rem 1.1rem; max-width: 96vw; max-height: 92vh; overflow-y: auto; }
    .modal-header-row h2 { font-size: 1.15rem; }
    #admin-modal .modal-content { width: 96vw; max-width: 96vw; }
    /* Admin grids are wider than a phone: let each table scroll sideways
       instead of stretching the modal. */
    #admin-modal .tabcontent.active { overflow-x: auto; }
    #admin-modal .docs-table-header, #admin-modal .doc-row { min-width: 640px; }
    .admin-form-grid, .admin-form-grid.cols-4, .grid-llm, .grid-llm-tasks { grid-template-columns: 1fr !important; }
    /* Card headers pair a title with action buttons on one row; on a phone they
       wrap instead of pushing the buttons past the card's edge. */
    #admin-modal .admin-card-head, #admin-modal .llm-top { flex-wrap: wrap; grid-template-columns: 1fr; gap: 10px; }
    #admin-modal .admin-card-head > * { min-width: 0; }
    #admin-modal .btnContainer { flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
    #admin-modal .btnContainer .btn-primary { margin-left: 0 !important; flex: 1 1 auto; }
    #admin-modal .btn-primary, #admin-modal .btn-outline { white-space: normal; }
    /* The three storage figures read as a column rather than a squeezed row. */
    #admin-modal div[style*="orangered"] { display: flex; flex-direction: column; gap: 2px; }
    /* A card whose content is genuinely wider (a provider table) scrolls itself
       instead of being clipped at the card's edge. */
    #admin-modal .admin-card { overflow-x: auto; }
    /* Control clusters inside a card head (Month + Refresh, filters) wrap and
       let their inputs shrink, instead of pushing a button off the card. */
    #admin-modal .admin-inline { flex-wrap: wrap; gap: 8px; width: 100%; }
    #admin-modal .admin-inline input, #admin-modal .admin-inline select { flex: 1 1 120px; min-width: 0; }
}

@media (max-width: 820px) {
    /* Panel de uso: its header is one row of title + KB picker + export + close,
       which runs off a phone. Stack it and let the picker take the width. */
    .dashboard-modal { padding: 8px; }
    .dashboard-container { max-height: 94vh; }
    .dashboard-header { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; }
    .dashboard-title { gap: 10px; }
    .dashboard-title h2 { font-size: 1.15rem; }
    .dashboard-controls { flex-wrap: wrap; gap: 8px; }
    #dashboard-kb-selector-wrap { flex: 1 1 100%; }
    #dashboard-kb-select { flex: 1; min-width: 0; }
    .dashboard-content { padding: 14px; max-height: calc(94vh - 132px); }
    .stats-grid { grid-template-columns: 1fr; gap: 12px; }
    .charts-section { grid-template-columns: 1fr; }
    .breakdown-table { font-size: 0.82rem; }
}

@media (max-width: 480px) {
    .chat-history { padding: 0.85rem 0.5rem 0.4rem; }
    .message { padding: 13px 13px; }
    .nav-sheet { right: 4px; left: 4px; min-width: 0; max-width: none; }
}

/* Administración → Sistema: the embedding models, shown but not settable. */
.embed-models { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:10px;
                padding-top:10px; border-top:1px solid var(--border); font-size:.8rem }
.embed-models .embed-label { color:var(--text-muted); text-transform:uppercase; font-weight:600; letter-spacing:.03em }
.embed-models .embed-pair { display:flex; gap:8px; flex-wrap:wrap }
.embed-models code { background:var(--bg-body); border:1px solid var(--border); border-radius:4px;
                     padding:1px 6px; font-size:.95em; color:var(--text-main) }
.embed-models .embed-note { color:var(--text-muted); font-style:italic }


/* ═══════════════════════════════════════════════════════════════════════════
   Administración as a page: a left rail and a scrolling panel, the full
   height of the window (the six-tab dialog is gone). Same shell as
   tenacity-rag, on Lex's palette.
   ═══════════════════════════════════════════════════════════════════════════ */
.admin-view { display: flex; height: calc(100vh - var(--nav-height)); width: 100%; overflow: hidden; background: var(--bg-body); }
.admin-view.hidden { display: none; }

.admin-rail { box-sizing: border-box; width: 232px; min-width: 232px; background: var(--sidebar-bg); border-right: 1px solid var(--border);
              display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; overflow-y: auto; }
.admin-back { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; cursor: pointer;
              color: var(--text-muted); font: 500 .82rem var(--font-sans); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; }
.admin-back:hover { background: var(--bg-panel); color: var(--text-main); }
.admin-back .ic { width: 16px; height: 16px; flex: 0 0 auto; }
.admin-rail-nav { display: flex; flex-direction: column; gap: 2px; }
.admin-rail-btn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none;
                  cursor: pointer; color: var(--text-main); font: 500 .9rem var(--font-sans); padding: 10px 12px; border-radius: 9px;
                  transition: background .15s, color .15s; position: relative; }
.admin-rail-btn:hover { background: var(--bg-panel); }
.admin-rail-btn.active { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); font-weight: 600; }
.admin-rail-btn .ic { width: 17px; height: 17px; flex: 0 0 auto; vertical-align: 0; }
.admin-rail-btn.hidden { display: none; }

.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.admin-main-head { flex: 0 0 auto; display: flex; align-items: baseline; gap: 12px; padding: 18px 28px 14px; border-bottom: 1px solid var(--border);
                   background: var(--bg-card); }
.admin-main-head h1 { margin: 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text-main); }
.admin-main-kb { font-size: .8rem; color: var(--text-muted); }
.admin-panels { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 28px 40px; }
.admin-panel { display: none; }
.admin-panel.active { display: block; animation: admin-fade .18s ease; }
@keyframes admin-fade { from { opacity: 0 } to { opacity: 1 } }

/* The pending-requests pill rides the rail entry instead of a tab. */
.admin-rail-btn .tab-pill { margin-left: auto; }
.admin-sizes { display: flex; gap: 14px; font-size: .8rem; color: var(--text-muted); white-space: nowrap; }
.admin-sizes b { color: var(--text-main); font-weight: 600; }
.admin-filter { padding: 6px 8px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-main); font: inherit; font-size: .85rem; min-width: 160px; }

/* Registro de actividad */
.docs-table-header.grid-audit, .doc-row.grid-audit { grid-template-columns: 150px minmax(110px, .9fr) minmax(150px, 1fr) minmax(140px, 1fr) minmax(240px, 2.2fr); gap: 10px; }
.docs-table-header.grid-audit { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.doc-row.grid-audit { padding: 9px 16px; font-size: .86rem; align-items: center; }
.doc-row.grid-audit > div { min-width: 0; }
.doc-row.grid-audit .audit-detail { font-size: .78rem; color: var(--text-muted); line-height: 1.35; overflow-wrap: anywhere; }
.audit-action { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .74rem; font-weight: 600; border: 1px solid var(--border); background: var(--bg-card); white-space: nowrap; }
.audit-action.account, .audit-action.demo { border-color: rgba(196,163,90,.5); }
.audit-action.request { border-color: rgba(46,160,67,.4); }
.audit-action.plan, .audit-action.billing, .audit-action.bill { border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.audit-action.llm, .audit-action.library, .audit-action.tsj { border-color: rgba(220,38,38,.35); }
.audit-scope { display: flex; align-items: center; gap: 8px; margin: 6px 16px; font-size: .8rem; color: var(--text-muted); }
.audit-scope button { border: none; background: none; cursor: pointer; font-size: 1rem; color: var(--text-muted); }
.cell-muted { color: var(--text-muted); }
.cell-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) {
    /* The rail becomes a scrolling strip of chips above the panel. */
    .admin-view { flex-direction: column; height: auto; min-height: calc(100vh - var(--nav-height)); }
    .admin-rail { width: 100%; min-width: 0; flex-direction: row; align-items: center; gap: 6px; overflow-x: auto; overflow-y: hidden;
                  border-right: none; border-bottom: 1px solid var(--border); padding: 8px 10px; }
    .admin-back { width: auto; margin: 0 4px 0 0; }
    .admin-back span { display: none; }
    .admin-rail-nav { flex-direction: row; gap: 4px; }
    .admin-rail-btn { white-space: nowrap; padding: 8px 12px; }
    .admin-main-head { padding: 14px 16px 12px; }
    .admin-panels { padding: 16px 14px 32px; }
}