:root {
  --celex-blue: #1166d8;
  --celex-navy: #122d50;
}

body { background: #f3f7fd; }
.sidebar { background: #fff; border-color: #e0e8f2; }
.brand { min-height: 0; justify-content: flex-start; gap: 10px; padding: 0 10px 27px; }
.brand-mark {
  display: grid; width: 35px; height: 35px; place-items: center;
  border-radius: 11px; background: linear-gradient(145deg, #0b59c7, #32b9ee);
  color: #fff; font: 700 19px 'Segoe UI', sans-serif; box-shadow: 0 5px 12px #1473d429;
}
.brand-name { display: block; }
.brand-name strong { font: 700 16px 'Segoe UI', sans-serif; letter-spacing: -.4px; color: var(--celex-navy); }
.brand-name small { font-size: 10px; color: #8292a8; margin-top: 3px; }
.main {
  background-color: #f1f6ff;
  background-image: linear-gradient(rgba(244,248,255,.88), rgba(245,249,255,.94)), url('/celex-waves.png');
  background-position: center; background-size: cover; background-attachment: fixed;
}
.topbar, .footer { background: rgba(255,255,255,.82); border-color: #e0e8f2; backdrop-filter: blur(14px); }
.nav-item.active { background: #eaf2ff; color: #17477f; }
.nav-item.active .nav-icon { color: #1768cb; }
.local-status { border-color: #e7edf5; }
.welcome { margin-top: -32px; }
.welcome-logo { width: 148px; height: 126px; position: relative; overflow: hidden; margin: 0 auto 14px; }
.welcome-logo img {
  position: absolute; left: 50%; top: 50%; width: 360px; max-width: none; height: auto;
  transform: translate(-50%, -50%); mix-blend-mode: multiply; filter: drop-shadow(0 8px 14px #1876d52a);
}
.welcome-icon { background: rgba(255,255,255,.78); border-color: #dce8f7; color: #2472c8; box-shadow: 0 6px 18px #1c5fa112; }
.eyebrow { color: #6684a8; }
.welcome h1 { color: #153151; }
.subheading { color: #70829a; }
.suggestion { border-color: #dce6f1; box-shadow: 0 5px 17px #17375c08; transition: transform .16s, border-color .16s, box-shadow .16s; }
.suggestion:hover { border-color: #a8c8ef; box-shadow: 0 8px 20px #2468a318; }
.suggestion > span { color: #357dc8; }
.composer { border-color: #d4e1f0; box-shadow: 0 8px 25px #17375c10; }
.send { background: linear-gradient(145deg, #155dc3, #1686dc); box-shadow: 0 3px 9px #1675ca36; }
.footer { border-top-color: #e0e8f2; }
.chat-history { width: min(690px, 100%); max-height: min(54vh, 520px); overflow-y: auto; padding: 8px 5px; }
.chat-history[hidden], .welcome[hidden] { display: none; }
.chat-message { display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 17px; }
.chat-message.user { align-items: flex-end; }
.chat-role { color: #59718d; font-size: 11px; margin: 0 5px 5px; }
.chat-bubble { max-width: min(88%, 590px); padding: 12px 15px; border: 1px solid #dce6f1; border-radius: 14px 14px 14px 4px; background: rgba(255,255,255,.94); color: #21364e; font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 4px 15px #17375c08; }
.chat-bubble p { margin: 0 0 9px; }
.chat-bubble p:last-child { margin-bottom: 0; }
.chat-bubble ul { margin: 2px 0 10px; padding-left: 22px; }
.chat-bubble li { margin: 3px 0; }
.chat-bubble strong { color: #173a63; font-weight: 650; }
.chat-bubble code { border-radius: 4px; padding: 1px 4px; background: #edf3fa; font-family: Consolas, monospace; font-size: .92em; }
.chat-message.user .chat-bubble { border-color: #c9e2ff; border-radius: 14px 14px 4px 14px; background: #e6f2ff; }
.chat-message.pending .chat-bubble { color: #70829a; font-style: italic; }
.chat-message.error .chat-bubble { border-color: #f2c6c6; background: #fff5f4; color: #9b3535; }

/* Barra lateral Celex: contraste propio de marca, distinta del lienzo de chat. */
.sidebar {
  background: linear-gradient(165deg, #081a33 0%, #0b2445 58%, #0d2b50 100%);
  border-right: 1px solid #17365a;
  box-shadow: 8px 0 28px rgba(10, 35, 67, .08);
}
.brand-mark {
  background: linear-gradient(145deg, #1b78e5, #28c2e8);
  box-shadow: 0 5px 16px rgba(27, 141, 231, .28);
}
.brand-name strong { color: #f5f9ff; }
.brand-name small { color: #9bb2ce; }
.new-chat {
  border-color: rgba(142, 184, 229, .28);
  background: rgba(255, 255, 255, .055);
  color: #f4f8ff;
  transition: background .16s, border-color .16s;
}
.new-chat:hover { background: rgba(62, 157, 232, .16); border-color: rgba(115, 190, 250, .6); }
.new-chat span { color: #72cfff; }
.nav-label { color: #829bb9; }
.nav-item { color: #b5c7dd; }
.nav-icon { color: #91a9c6; }
.nav-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-item.active {
  position: relative;
  background: linear-gradient(90deg, rgba(27, 111, 204, .34), rgba(19, 83, 151, .18));
  color: #fff;
}
.nav-item.active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: #39c8ed;
}
.nav-item.active .nav-icon { color: #64d9f2; }
.settings-link { color: #b5c7dd; }
.local-status { border-color: rgba(163, 190, 220, .17); color: #9eb3cd; }
.status-dot { box-shadow: 0 0 10px rgba(62, 182, 132, .55); }

@media (max-width: 700px) {
  .brand { min-height: 0; padding: 0 5px 24px; justify-content: center; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-name { display: none; }
  .sidebar { box-shadow: 4px 0 18px rgba(10, 35, 67, .1); }
  .main { background-attachment: scroll; }
  .welcome { margin-top: 0; }
  .chat-history { max-height: 54vh; }
  .welcome-logo { width: 132px; height: 112px; }
  .welcome-logo img { width: 322px; }
}

/* Tipografía global solicitada; el navegador usa el fallback hasta que esté instalada. */
* {
  font-family: 'Congenial Light', 'Congenial', 'Segoe UI', sans-serif !important;
  font-weight: 300 !important;
}
.sidebar .brand-name,
.sidebar .brand-name strong,
.sidebar .brand-name small,
.sidebar .nav-label,
.sidebar .nav-item,
.sidebar .settings-link,
.sidebar .new-chat,
.sidebar .local-status { color: #fff; }
.sidebar .nav-icon,
.sidebar .nav-item.active .nav-icon { color: #79ddf5; }

.sidebar nav [data-view="finance"],
.sidebar nav [data-view="legal"],
.sidebar nav [data-view="memory"],
.sidebar > [data-view="settings"] { display: none; }
.auth-screen[hidden], .shell[hidden], .auth-card[hidden] { display: none !important; }
.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(145deg, #edf5ff, #f8fbff 56%, #e6f1ff); }
.auth-card { width: min(420px, 100%); padding: 34px; border: 1px solid #dce7f5; border-radius: 20px; background: rgba(255,255,255,.94); box-shadow: 0 20px 70px rgba(27,73,125,.12); }
.auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 30px; }
.auth-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(145deg, #1b78e5, #28c2e8); color: #fff; font: 700 22px 'Segoe UI', sans-serif; }
.auth-brand strong { display: block; color: #122d50; font: 700 18px 'Segoe UI', sans-serif; }
.auth-brand small { color: #8292a8; font-size: 11px; }
.auth-card .eyebrow { margin: 0 0 8px; }
.auth-card h1 { margin: 0; color: #153151; font-size: 25px; }
.auth-description { margin: 8px 0 24px; color: #71849a; font-size: 13px; line-height: 1.55; }
.auth-field { display: block; margin: 0 0 15px; color: #36516f; font-size: 12px; font-weight: 600; }
.auth-field input { display: block; width: 100%; height: 43px; margin-top: 7px; padding: 0 12px; border: 1px solid #cfdeee; border-radius: 9px; outline: none; background: #fbfdff; color: #173151; font-size: 14px; }
.auth-field input:focus { border-color: #4a9be1; box-shadow: 0 0 0 3px #4a9be11c; }
.auth-status { min-height: 19px; margin: 2px 0 12px; color: #a43d3d; font-size: 12px; line-height: 1.5; }
.auth-submit { width: 100%; min-height: 43px; border: 0; border-radius: 9px; background: linear-gradient(120deg, #155dc3, #1686dc); color: #fff; font-size: 13px; cursor: pointer; }
.auth-submit:disabled { opacity: .65; cursor: wait; }
.logout-button { padding: 7px 10px; border: 1px solid #d9e4f0; border-radius: 8px; background: #fff; color: #516a84; font-size: 11px; cursor: pointer; }
.logout-button:hover { border-color: #aac5e3; color: #17477f; }

.files-page { width: min(1120px, 100%); max-height: 100%; overflow-y: auto; padding: 8px 0 28px; }
.files-heading { margin: 0 0 18px; }
.files-heading .eyebrow { margin-bottom: 5px; }
.files-heading h1 { margin: 0; color: #153151; font-size: 27px; font-weight: 600; }
.files-heading .subheading { margin: 7px 0 0; }
.upload-card { display: flex; align-items: center; gap: 15px; padding: 17px; border: 1px dashed #a8c7e8; border-radius: 14px; background: rgba(255,255,255,.78); }
.upload-icon { width: 39px; height: 39px; display: grid; place-items: center; flex: none; border-radius: 12px; background: #e9f3ff; color: #1b72ca; font-size: 21px; }
.upload-card > div:nth-child(2) { flex: 1; }
.upload-card strong { color: #173857; font-size: 13px; }
.upload-card p { margin: 5px 0 0; color: #71849a; font-size: 11px; }
.file-picker, .upload-submit, #apply-header-row { display: inline-flex; align-items: center; justify-content: center; min-height: 35px; padding: 0 13px; border: 1px solid #cbddef; border-radius: 8px; background: #fff; color: #17477f; font-size: 11px; cursor: pointer; }
.file-picker { position: relative; overflow: hidden; }
.file-picker input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-picker[data-filename]::after { content: attr(data-filename); position: absolute; inset: 0; padding: 9px; background: white; color: #17477f; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.upload-submit { border-color: #1768cb; background: #1768cb; color: white; }
.upload-submit:disabled { opacity: .55; cursor: wait; }
.file-status { min-height: 18px; margin: 9px 2px 11px; color: #607d9b; font-size: 11px; }
.file-status.error { color: #a53c3c; }
.file-layout { display: grid; grid-template-columns: minmax(240px, .34fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.file-list-panel, .file-detail-panel { min-width: 0; border: 1px solid #dce6f1; border-radius: 12px; background: rgba(255,255,255,.87); box-shadow: 0 5px 18px #17375c08; }
.file-list-panel { padding: 15px 11px; }
.file-list-panel h2 { margin: 0 4px 11px; color: #203e5b; font-size: 13px; }
.file-list { display: grid; gap: 7px; }
.file-list-empty { margin: 8px 5px; color: #8292a8; font-size: 11px; }
.file-item { display: grid; grid-template-columns: 37px minmax(0,1fr); gap: 8px; padding: 9px 7px; border: 1px solid transparent; border-radius: 9px; }
.file-item.selected { border-color: #c8dff9; background: #f1f7ff; }
.file-type-icon { width: 35px; height: 33px; display: grid; place-items: center; border-radius: 7px; background: #e8f5f0; color: #31896e; font-size: 8px; font-weight: 700; }
.file-item-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.file-item-info strong { overflow: hidden; color: #304a64; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.file-item-info small { color: #8292a8; font-size: 9px; }
.file-actions { grid-column: 2; display: flex; gap: 6px; }
.file-actions button { border: 0; background: transparent; color: #3470aa; font-size: 9px; cursor: pointer; }
.file-actions button:last-child { color: #a35353; }
.file-detail-panel { padding: 16px; }
.file-empty { min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #8093a9; }
.file-empty span { margin-bottom: 9px; color: #4385c7; font-size: 22px; }
.file-empty strong { color: #33516f; font-size: 12px; }
.file-empty p { max-width: 250px; font-size: 10px; line-height: 1.5; }
.preview-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #e7edf5; }
.preview-title h2 { margin: 0; color: #203e5b; font-size: 14px; overflow-wrap: anywhere; }
.preview-title p { margin: 5px 0 0; color: #8292a8; font-size: 10px; }
.sheet-control, .header-row-picker { display: flex; flex-direction: column; gap: 5px; color: #71849a; font-size: 9px; }
.sheet-control select, .header-row-picker input { max-width: 200px; min-height: 31px; padding: 4px 8px; border: 1px solid #d6e2ef; border-radius: 7px; background: white; color: #2d4762; font: inherit; }
.columns-heading { display: flex; align-items: center; gap: 9px; margin: 13px 0 8px; }
.columns-heading h3 { margin: 0 auto 0 0; color: #294867; font-size: 11px; }
.header-row-picker input { width: 68px; }
#apply-header-row { min-height: 30px; padding: 0 9px; font-size: 9px; }
.column-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.column-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #dbe7f3; border-radius: 7px; background: #f7faff; }
.column-badge strong { color: #355573; font-size: 9px; }
.column-badge small { color: #4279b3; font-size: 8px; }
.validation-box { margin: 10px 0; padding: 9px 10px; border: 1px solid #cfe8dc; border-radius: 8px; background: #f3fbf7; color: #33765d; font-size: 10px; }
.validation-box.has-warnings { border-color: #f0dfb2; background: #fffaf0; color: #80642d; }
.validation-box ul { margin: 6px 0 0; padding-left: 17px; line-height: 1.5; }
.table-wrap { max-width: 100%; overflow: auto; border: 1px solid #e2eaf3; border-radius: 8px; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 9px; white-space: nowrap; }
.table-wrap th, .table-wrap td { padding: 8px 9px; border-bottom: 1px solid #eaf0f6; text-align: left; color: #425b75; }
.table-wrap th { position: sticky; top: 0; background: #f3f7fc; color: #254362; font-weight: 600; }
.table-wrap td:first-child, .table-wrap th:first-child { color: #91a0b0; }
.table-wrap tr:last-child td { border-bottom: 0; }

@media (max-width: 900px) {
  .file-layout { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .upload-card { flex-wrap: wrap; }
  .upload-card > div:nth-child(2) { flex-basis: calc(100% - 60px); }
  .file-picker, .upload-submit { flex: 1; }
  .preview-title { flex-direction: column; }
  .columns-heading { flex-wrap: wrap; }
}