:root {
--navy: #071d3a;
--navy2: #0b356d;
--blue: #0a3a78;
--orange: #f59b00;
--orange2: #ffb21a;
--text: #0e1b33;
--muted: #67728a;
--line: #dfe5ee;
--bg: #f6f8fb;
--card: #ffffff;
--shadow: 0 10px 25px rgba(10, 30, 60, 0.08);
}

* {
  box-sizing: border-box;
  }

body {
margin: 0;
font-family: "Segoe UI", Arial, sans-serif;
background: radial-gradient(circle at top right, #fff 0, #f7f9fc 45%, #edf2f8 100%);
color: var(--text);
display: flex;
min-height: 100vh;
}

/* =========================
SIDEBAR
========================= */

.sidebar {
width: 300px;
background: linear-gradient(180deg, #061a34 0%, #001225 100%);
color: #fff;
display: flex;
flex-direction: column;
box-shadow: 10px 0 40px rgba(0,0,0,.18);
}

.brand {
background: #fff;
padding: 20px;
min-height: 100px;
display: flex;
align-items: center;
}

.brand img {
width: 230px;
max-width: 100%;
}

.new-chat {
margin: 16px;
border: 0;
border-radius: 10px;
background: linear-gradient(135deg, var(--orange2), var(--orange));
color: #fff;
font-weight: 800;
padding: 14px;
cursor: pointer;
box-shadow: 0 10px 22px rgba(245,155,0,.25);
}

.history-title {
border-top: 1px solid rgba(255,255,255,.10);
padding: 18px 20px 10px;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 800;
}

.history-list {
padding: 8px;
overflow-y: auto;
flex: 1;
}

.history-item {
display: grid;
grid-template-columns: 24px 1fr auto;
gap: 8px;
padding: 12px;
border-radius: 10px;
cursor: pointer;
color: rgba(255,255,255,.95);
margin-bottom: 8px;
transition: .2s;
}

.history-item:hover,
.history-item.active {
background: linear-gradient(135deg, var(--orange), #ffae00);
}

.history-item .text {
font-size: 13px;
line-height: 1.35;
}

.history-item .time {
font-size: 11px;
opacity: .85;
}

.sidebar-footer {
padding: 18px;
}

.logout {
width: 100%;
padding: 12px;
border-radius: 9px;
background: transparent;
border: 1px solid rgba(255,255,255,.25);
color: #fff;
font-weight: 700;
}

/* =========================
MAIN
========================= */

.main {
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
min-width: 0;
}

.topbar {
background: rgba(255,255,255,.9);
border-radius: 14px;
padding: 20px 24px;
box-shadow: var(--shadow);
display: flex;
justify-content: space-between;
align-items: center;
}

.topbar h1 {
margin: 0;
font-size: 24px;
color: #071d3a;
}

.topbar p {
margin: 6px 0 0;
color: #0f2b55;
}

.avatar {
width: 46px;
height: 46px;
border-radius: 50%;
background: linear-gradient(135deg, var(--orange2), var(--orange));
display: grid;
place-items: center;
font-size: 24px;
}

/* =========================
CHAT
========================= */

.chat {
flex: 1;
overflow-y: auto;
padding: 20px 6px;
}

.message {
display: flex;
margin: 16px 0;
gap: 12px;
}

.message.user {
justify-content: flex-end;
}

.bubble-user {
max-width: 60%;
padding: 14px 16px;
border-radius: 14px 14px 4px 14px;
color: #fff;
background: linear-gradient(135deg, #0a3a78, #06295a);
box-shadow: 0 8px 20px rgba(6,41,90,.18);
font-size: 14px;
}

.bot-icon {
flex: 0 0 42px;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--blue);
color: #fff;
display: grid;
place-items: center;
font-size: 22px;
}

.bot-card {
flex: 1;
background: var(--card);
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: var(--shadow);
padding: 14px;
}

/* =========================
GRID
========================= */


.panel {
border: 1px solid var(--line);
border-radius: 12px;
padding: 12px;
background: #fff;
height: auto;
}

.panel-title {
display: flex;
align-items: center;
gap: 10px;
font-weight: 800;
margin-bottom: 10px;
font-size: 15px;
}

.panel-title .ico {
color: var(--orange);
font-size: 20px;
}

/* =========================
SQL
========================= */

.sql-block {
background: #f7f9fc;
border: 1px solid #e2e8f0;
border-radius: 9px;
padding: 10px;
font-family: Consolas, monospace;
white-space: pre-wrap;
overflow-x: auto;
overflow-y: auto;
font-size: 12px;
line-height: 1.35;
max-height: 140px;
}

.copy-btn,
.excel-btn {
margin-top: 10px;
border: 1px solid var(--line);
background: #fff;
border-radius: 8px;
padding: 8px 12px;
cursor: pointer;
font-weight: 650;
}

/* =========================
ANALISIS
========================= */

.insights {
margin: 0;
padding-left: 18px;
}

.insights li {
margin: 6px 0;
font-size: 14px;
}

/* =========================
TABLA
========================= */

.table-wrap {
overflow: auto;
max-height: 220px;
border-radius: 9px;
border: 1px solid var(--line);
}

table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}

th {
background: linear-gradient(135deg, #06295a, #0a3a78);
color: #fff;
position: sticky;
top: 0;
z-index: 1;
}

th,
td {
padding: 8px 9px;
border-bottom: 1px solid #e5eaf1;
}

tr:nth-child(even) td {
background: #f8fafc;
}

td.num {
text-align: right;
font-variant-numeric: tabular-nums;
}

/* =========================
GRAFICA
========================= */

.chart-box {
height: 220px;
}

/* =========================
LOADING
========================= */

.loading {
color: var(--muted);
display: flex;
align-items: center;
gap: 10px;
}

.spinner {
width: 18px;
height: 18px;
border: 3px solid #d7deea;
border-top-color: var(--orange);
border-radius: 50%;
animation: spin 1s linear infinite;
}

@keyframes spin {
to {
transform: rotate(360deg);
}
}

/* =========================
COMPOSER
========================= */

.composer {
display: flex;
gap: 12px;
background: #fff;
border: 1px solid #bfc8d6;
border-radius: 12px;
padding: 10px;
box-shadow: var(--shadow);
}

.composer input {
flex: 1;
border: 0;
outline: none;
padding: 12px 6px;
font-size: 15px;
}

.composer button {
border: 0;
border-radius: 10px;
background: linear-gradient(135deg, var(--orange2), var(--orange));
color: #fff;
font-weight: 850;
padding: 0 24px;
cursor: pointer;
}

/* =========================
FOOTER
========================= */

.powered {
text-align: center;
padding: 12px 0 2px;
color: #6a7385;
font-size: 13px;
}

.powered span {
color: var(--orange);
}

/* =========================
RESPONSIVE
========================= */

@media (max-width: 1200px) {

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

}

@media (max-width: 980px) {

body {
flex-direction: column;
}

.sidebar {
width: 100%;
max-height: 280px;
}

.bubble-user {
max-width: 90%;
}

}
.stack-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

.stack-layout .panel {
  width: 100% !important;
}

.big-chart {
  height: 520px !important;
  width: 100%;
}

.summary-title {
  font-size: 22px;
  line-height: 1.4;
}
.stack-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

.stack-layout .panel {
  width: 100% !important;
}

.sql-panel {
  order: 1;
}

.result-panel {
  order: 2;
}

.analysis-panel {
  order: 3;
}

.chart-panel {
  order: 4;
}

.big-chart,
.chart-box {
  height: 520px !important;
  width: 100% !important;
}[hidden]{display:none!important}body{display:block;background:#f5f6fa;color:#292c38}.workspace{display:flex;min-height:100vh}.login-screen{display:grid;grid-template-columns:1.1fr 1fr;min-height:100vh}.login-story{position:relative;overflow:hidden;background:#f2f3f7;padding:48px 9%;display:flex;flex-direction:column;align-items:flex-start}.login-logo{width:220px;margin-bottom:65px}.eyebrow{font-size:11px;letter-spacing:2.5px;font-weight:700;color:#546183}.login-story h1{font-size:clamp(38px,4.5vw,68px);letter-spacing:-3px;line-height:1.08;margin:22px 0;color:#282c39}.login-story em{font-style:normal;color:#26376f}.login-story p{max-width:390px;color:#666e80;line-height:1.8}.visual-mark{display:flex;align-items:flex-end;gap:18px;height:165px;position:relative;margin:25px 0 30px 30px;padding:28px 38px;border:2px solid #dfe2ed;border-radius:28px;transform:rotate(-5deg);background:#ffffffa0}.visual-mark i{display:block;width:32px;border-radius:7px;background:#273970;height:45px}.visual-mark i:nth-of-type(2){height:75px;background:#798aaa}.visual-mark i:nth-of-type(3){height:104px;background:#ffad0a}.visual-mark span{position:absolute;right:-35px;top:-37px;color:#ffad0a;font-size:95px}.story-tags{display:flex;gap:10px;margin-bottom:40px}.story-tags span{padding:9px 16px;border-radius:30px;background:#fff;font-size:12px;color:#3b4563}.login-story small{margin-top:auto;color:#7f8490}.login-side{background:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:50px}.login-card{width:100%;max-width:380px}.app-symbol{background:#fff4d9;color:#e89a00;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:35px;margin-bottom:25px}.login-card h2{font-size:30px;letter-spacing:-1px;margin:14px 0 10px}.login-card p{color:#737a8b;line-height:1.6;font-size:14px;margin-bottom:27px}.login-card label{display:block;font-size:13px;font-weight:650;margin:20px 0 8px}.login-card input{width:100%;border:1px solid #dce0e9;background:#fafbfc;border-radius:10px;padding:14px;font-size:14px;color:#292e3d;min-width:0}.login-card input:focus{outline:2px solid #ffad0a;outline-offset:2px}.login-card input[readonly]{color:#72798a}.password-field{display:flex;position:relative}.password-field input{padding-right:80px}.password-field button{position:absolute;right:10px;top:12px;border:0;background:transparent;color:#47547a;padding:4px;cursor:pointer}.primary{width:100%;padding:16px;border:0;border-radius:10px;background:#ffad0a;color:#282d3d;font-size:14px;font-weight:750;display:flex;justify-content:space-between;cursor:pointer;box-shadow:0 8px 20px #ffad0a22}.login-card small{display:block;text-align:center;margin-top:18px;color:#737b8c;font-size:11px}.login-card .login-error{color:#af3232;margin:12px 0;font-size:13px}.login-card .privacy-note{font-size:11px;text-align:center;margin-top:22px}.login-bottom{font-size:11px;color:#8c92a0;margin-top:40px}.sidebar{width:265px;background:#fff;color:#343b50;box-shadow:none;border-right:1px solid #e4e7ef}.brand{padding:27px}.brand img{width:200px}.new-chat{background:#ffad0a;color:#2c3140;box-shadow:none;font-weight:650}.history-title{border-color:#e8eaf0;font-size:12px;color:#7a8192;font-weight:600}.history-item{color:#4e5972}.history-item:hover{background:#fff3d8}.sidebar-footer{border-top:1px solid #e8eaf0}.logout{color:#586078;border-color:#e1e4ec;cursor:pointer}.main{padding:28px 36px}.topbar{border-bottom:1px solid #e2e6ef;background:transparent;box-shadow:none;border-radius:0;padding:0 0 24px}.topbar h1{font-size:24px;color:#30364a}.topbar p{font-size:13px;color:#7a8395}.user-badge{display:flex;align-items:center;gap:12px;font-size:12px;color:#65708b}.avatar{background:#ebeefa;color:#26376f;font-size:17px;width:38px;height:38px}.welcome{max-width:720px;margin:75px auto;text-align:center}.welcome .app-symbol{margin:0 auto 24px}.welcome h2{font-size:36px;letter-spacing:-1px;color:#2a324a}.welcome p{color:#778095}.welcome small{color:#8a92a4;font-size:12px}.suggestions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:32px 0}.suggestions button{padding:25px 16px;background:white;border:1px solid #e0e4ed;border-radius:14px;color:#45516e;font-size:13px;line-height:1.6;cursor:pointer}.suggestions button:hover{border-color:#ffad0a;background:#fffaf0}.composer{border:1px solid #e0e4ed;box-shadow:0 5px 30px #28376a08}.composer button{color:#293044;background:#ffad0a}.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.bot-card{padding:24px;box-shadow:0 6px 20px #28376a06}.bot-card h3{line-height:1.6;font-size:17px}.chart-box{height:300px!important}.bubble-user{background:#26376f}.bot-icon{background:#fff1d3;color:#b78010}.powered{font-size:11px}button:disabled{opacity:.55;cursor:wait}button:focus-visible{outline:3px solid #ffad0a;outline-offset:3px}@media(max-width:1000px){.login-story{padding:35px 7%}.login-side{padding:35px}.card-grid{grid-template-columns:1fr}.main{padding:24px}.user-badge span{max-width:160px;overflow-wrap:anywhere}}@media(max-width:720px){.login-screen{grid-template-columns:1fr}.login-story{padding:28px}.login-logo{width:180px;margin-bottom:30px}.login-story h1{font-size:38px;letter-spacing:-1.5px}.visual-mark,.story-tags,.login-story small{display:none}.login-side{padding:35px 25px}.workspace{flex-direction:column}.sidebar{width:100%;max-height:220px;border-right:0}.brand{padding:15px}.brand img{width:145px}.sidebar-footer{padding:10px}.history-title,.history-list{display:none}.new-chat{margin:0 15px 10px}.main{padding:20px 14px}.topbar{align-items:flex-start}.topbar p{max-width:220px}.user-badge span{display:none}.welcome{margin:35px auto}.welcome h2{font-size:28px}.suggestions{grid-template-columns:1fr;gap:8px}.suggestions button{padding:15px}.composer input{min-width:0}.composer button{padding:0 15px}.bot-icon{display:none}.bot-card{padding:14px}.bubble-user{max-width:90%}}

/* Acceso a cerrar sesión en el extremo superior derecho. */
.topbar { gap: 16px; }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-shrink: 0; margin-left: auto; }
.topbar-actions .logout { width: auto; white-space: nowrap; padding: 10px 14px; background: #fff; }
.topbar-actions .logout:hover { background: #fff4d9; border-color: #ffad0a; }
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; }
  .topbar-actions { gap: 8px; }
  .topbar-actions .logout { padding: 9px 11px; }
}