/* PATRITO AI — Design system (tokens Rubik + marca Patrito: navy / cian / casco naranja) */
[data-theme="light"] {
  --bg-primary:#FFFFFF; --bg-secondary:#F3F5F9; --bg-tertiary:#E7EBF2;
  --text-primary:#0B1424; --text-secondary:#46506A; --text-muted:#6E7891;
  --border:#D3D9E4; --accent:#0A2A5E; --accent-hover:#071F47; --accent-text:#FFFFFF;
  --brand-cyan:#0E8FD0; --brand-orange:#E8930C;
  --danger:#C0392B; --success:#1A7A4A; --warning:#B8650A;
  --surface:#FFFFFF; --shadow:rgba(10,42,94,.10);
}
[data-theme="dark"] {
  --bg-primary:#0B0F18; --bg-secondary:#121826; --bg-tertiary:#1A2233;
  --text-primary:#EEF2F8; --text-secondary:#A3ADC2; --text-muted:#78829A;
  --border:#263047; --accent:#2EA8F0; --accent-hover:#1A93DA; --accent-text:#04121F;
  --brand-cyan:#2EA8F0; --brand-orange:#F5A524;
  --danger:#E05252; --success:#3DBE7A; --warning:#E8900A;
  --surface:#121826; --shadow:rgba(0,0,0,.45);
}

*, *::before, *::after {
  box-sizing:border-box; -webkit-user-select:none; -moz-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
}
input, textarea, select, [contenteditable="true"] { -webkit-user-select:text; user-select:text; }
html, body { margin:0; }
body {
  font-family:Inter, system-ui, sans-serif; font-size:15px; line-height:1.6;
  background:var(--bg-primary); color:var(--text-primary);
  transition:background .25s, color .25s;
}
h1,h2,h3,h4 { font-weight:600; margin:0; line-height:1.25; }
h1 { font-size:28px; } h2 { font-size:22px; } h3 { font-size:18px; } h4 { font-size:15px; }
a { color:var(--accent); }
button { cursor:pointer; font-family:inherit; }
[hidden] { display:none !important; }
.label { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); font-weight:600; }
.muted { color:var(--text-muted); }
svg.lucide { width:20px; height:20px; stroke-width:2; }

/* Animación de vistas (native feel) */
.vista { animation:slideIn .28s cubic-bezier(.4,0,.2,1); }
@keyframes slideIn { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .vista { animation:none; } * { transition:none !important; } }

/* Botones */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:44px; padding:.65rem 1.25rem; border-radius:10px; border:1px solid transparent;
  font-size:15px; font-weight:600; transition:transform .1s, background .15s, opacity .1s;
}
.btn:active { transform:scale(.96); }
.btn-primary { background:var(--accent); color:var(--accent-text); }
.btn-primary:hover { background:var(--accent-hover); }
.btn-ghost { background:var(--bg-secondary); color:var(--text-primary); border-color:var(--border); }
.btn-orange { background:var(--brand-orange); color:#1B1203; }
.btn[disabled] { opacity:.6; pointer-events:none; }
.icon-btn {
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; border:1px solid var(--border); background:var(--bg-primary); color:var(--text-primary);
}
.theme-toggle .icon-dark { display:none; }
[data-theme="dark"] .theme-toggle .icon-dark { display:inline-flex; }
[data-theme="dark"] .theme-toggle .icon-light { display:none; }

/* Ripple */
.ripple { position:relative; overflow:hidden; }
.ripple-wave { position:absolute; border-radius:50%; background:rgba(255,255,255,.35); transform:scale(0);
  animation:ripple-anim .6s linear; pointer-events:none; }
.btn-ghost .ripple-wave, .icon-btn .ripple-wave, .nav-item .ripple-wave { background:rgba(10,42,94,.15); }
@keyframes ripple-anim { to { transform:scale(4); opacity:0; } }

/* Splash */
.splash { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(1200px 600px at 80% -10%, #14448F 0%, #0A2A5E 45%, #061A3B 100%);
  color:#fff; transition:opacity .5s; overflow:hidden; }
.splash-grid { position:absolute; inset:0; opacity:.12;
  background-image:linear-gradient(#2EA8F0 1px, transparent 1px), linear-gradient(90deg, #2EA8F0 1px, transparent 1px);
  background-size:42px 42px; transform:perspective(600px) rotateX(55deg) translateY(30%); transform-origin:bottom; }
.splash-inner { position:relative; text-align:center; padding:1.5rem; }
.splash-logo { width:132px; height:132px; border-radius:28px; box-shadow:0 20px 60px rgba(0,0,0,.45); }
.splash h1 { font-size:34px; margin-top:1.25rem; letter-spacing:.02em; }
.splash p { color:#A9C6EA; margin:.25rem 0 1.75rem; }
.splash-track { width:220px; height:3px; margin:0 auto; background:rgba(255,255,255,.15); border-radius:3px; overflow:hidden; }
.splash-bar { height:100%; width:0; background:linear-gradient(90deg, #2EA8F0, #F5A524); transition:width .1s linear; }

/* ===== HOME ===== */
.topbar { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg-primary) 88%, transparent);
  border-bottom:1px solid var(--border); }
@supports not (background: color-mix(in srgb, red 50%, blue)) { .topbar { background:var(--bg-primary); } }
.topbar-in { max-width:1200px; margin:0 auto; padding:.75rem 1.5rem; display:flex; align-items:center; gap:.75rem; }
.brand { display:flex; align-items:center; gap:.65rem; font-weight:800; letter-spacing:.02em; color:var(--text-primary); text-decoration:none; }
.brand img { width:38px; height:38px; border-radius:9px; }
.spacer { flex:1; }

.hero { position:relative; overflow:hidden; }
.hero-in { max-width:1200px; margin:0 auto; padding:4.5rem 1.5rem 3.5rem; display:flex; gap:3rem; align-items:center; }
.hero-copy { flex:1.25; min-width:0; }
.hero-tag { display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .75rem; border-radius:999px;
  background:var(--bg-secondary); border:1px solid var(--border); font-size:12px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-secondary); }
.hero-tag .dot { width:8px; height:8px; border-radius:50%; background:var(--brand-orange); }
.hero h1 { font-size:clamp(34px, 5.4vw, 60px); line-height:1.04; letter-spacing:-.02em; margin:1.1rem 0 1rem; font-weight:800; }
.hero h1 em { font-style:normal; color:var(--brand-cyan); }
.hero p.lead { font-size:17px; color:var(--text-secondary); max-width:560px; margin:0 0 1.75rem; }
.hero-cta { display:flex; gap:.75rem; flex-wrap:wrap; }
.hero-visual { flex:1; position:relative; min-height:360px; }
.hv-plate { position:absolute; inset:0 0 0 12%; border-radius:28px 6px 28px 6px;
  background:linear-gradient(150deg, #0A2A5E 0%, #12468F 60%, #0E8FD0 100%); box-shadow:0 30px 80px var(--shadow); overflow:hidden; }
.hv-plate::after { content:""; position:absolute; inset:0; opacity:.18;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size:28px 28px; }
.hv-logo { position:absolute; right:8%; top:12%; width:46%; max-width:220px; border-radius:22px; z-index:2;
  box-shadow:0 24px 60px rgba(0,0,0,.35); transform:rotate(-4deg); }
.hv-chip { position:absolute; z-index:3; background:var(--surface); color:var(--text-primary); border:1px solid var(--border);
  border-radius:14px; padding:.7rem .9rem; box-shadow:0 14px 34px var(--shadow); font-size:13px; display:flex; gap:.6rem; align-items:center; max-width:250px; }
.hv-chip.c1 { left:0; top:22%; } .hv-chip.c2 { left:6%; bottom:12%; }
.hv-chip .ic { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hv-chip.c1 .ic { background:#25D366; color:#fff; } .hv-chip.c2 .ic { background:var(--brand-orange); color:#1B1203; }

.strip { border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-secondary); }
.strip-in { max-width:1200px; margin:0 auto; padding:0 1.5rem; display:flex; }
.strip-item { flex:1; padding:1.4rem 1.25rem; border-left:1px solid var(--border); }
.strip-item:first-child { border-left:0; padding-left:0; }
.strip-item b { display:block; font-size:22px; font-weight:800; }

.feat { max-width:1200px; margin:0 auto; padding:4rem 1.5rem; display:flex; gap:2.5rem; }
.feat-head { flex:0 0 32%; }
.feat-head h2 { font-size:30px; line-height:1.15; margin:.5rem 0 .75rem; font-weight:800; }
.feat-list { flex:1; display:flex; flex-direction:column; gap:0; }
.feat-row { display:flex; gap:1.1rem; padding:1.25rem 0; border-top:1px solid var(--border); }
.feat-row:nth-child(even) { padding-left:2.5rem; }
.feat-num { font-size:12px; font-weight:700; color:var(--brand-orange); letter-spacing:.08em; padding-top:.2rem; min-width:28px; }
.feat-row h3 { margin-bottom:.2rem; }
.feat-row p { margin:0; color:var(--text-secondary); }
.foot { max-width:1200px; margin:0 auto; padding:2rem 1.5rem 3rem; color:var(--text-muted); font-size:13px; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

/* ===== LOGIN ===== */
.login-wrap { min-height:100vh; display:flex; }
.login-side { flex:1.1; position:relative; overflow:hidden; color:#fff; padding:3rem;
  background:linear-gradient(160deg, #061A3B 0%, #0A2A5E 50%, #12468F 100%); display:flex; flex-direction:column; justify-content:space-between; }
.login-side::before { content:""; position:absolute; right:-120px; bottom:-120px; width:420px; height:420px; border-radius:50%;
  border:60px solid rgba(46,168,240,.18); }
.login-side .brand { color:#fff; }
.login-side h2 { font-size:36px; font-weight:800; line-height:1.1; max-width:440px; position:relative; }
.login-side p { color:#A9C6EA; max-width:420px; position:relative; }
.login-main { flex:1; display:flex; align-items:center; justify-content:center; padding:2rem 1.5rem; position:relative; }
.login-main .theme-toggle { position:absolute; top:1rem; right:1rem; }
.login-card { width:100%; max-width:380px; }
.login-card h1 { font-size:28px; font-weight:800; margin-bottom:.25rem; }
.field { margin-top:1.1rem; }
.field label { display:block; margin-bottom:.35rem; }
.input { width:100%; min-height:48px; padding:.7rem .9rem; border-radius:10px; border:1px solid var(--border);
  background:var(--bg-secondary); color:var(--text-primary); font-size:15px; outline:none; font-family:inherit; }
.input:focus { border-color:var(--brand-cyan); box-shadow:0 0 0 3px rgba(14,143,208,.18); }
.password-field { position:relative; }
.password-field .input { padding-right:3rem; }
.toggle-password { position:absolute; right:2px; top:50%; transform:translateY(-50%); background:none; border:0;
  color:var(--text-muted); width:44px; height:44px; display:flex; align-items:center; justify-content:center; }
.login-card .btn-primary { width:100%; margin-top:1.5rem; min-height:50px; }

/* ===== PANEL ===== */
.admin-layout { display:flex; min-height:100vh; }
.admin-sidebar { width:248px; flex-shrink:0; padding:1.25rem 1rem; border-right:1px solid var(--border);
  background:var(--bg-secondary); display:flex; flex-direction:column; gap:.25rem; position:sticky; top:0; height:100vh; }
.admin-sidebar .brand { padding:.25rem .5rem 1.25rem; }
.nav-item { display:flex; align-items:center; gap:.7rem; padding:.65rem .75rem; min-height:44px; border-radius:10px;
  color:var(--text-secondary); text-decoration:none; font-weight:500; border:0; background:none; width:100%; text-align:left; font-size:15px; }
.nav-item:hover { background:var(--bg-tertiary); color:var(--text-primary); }
.nav-item.active { background:var(--accent); color:var(--accent-text); }
.nav-sep { height:1px; background:var(--border); margin:.75rem 0; }
.admin-content { flex:1; min-width:0; }
.admin-top { display:flex; align-items:center; gap:.75rem; padding:1rem 1.5rem; border-bottom:1px solid var(--border); }
.admin-top h2 { font-size:20px; }
.vista-container { max-width:1200px; margin:0 auto; padding:2rem 1.5rem; }

.status-band { display:flex; gap:1.25rem; align-items:stretch; flex-wrap:wrap; margin-bottom:1.5rem; }
.status-main { flex:2 1 360px; border-radius:18px 4px 18px 4px; padding:1.5rem; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(135deg, #0A2A5E, #12468F); }
.status-main .label { color:#A9C6EA; }
.status-main h3 { font-size:24px; margin:.35rem 0; font-weight:800; }
.status-main p { color:#CFE0F5; margin:0 0 1rem; }
.status-pill { display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .65rem; border-radius:999px; font-size:12px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; background:rgba(255,255,255,.14); }
.status-pill .dot { width:8px; height:8px; border-radius:50%; background:#F5A524; }
.status-pill.ok .dot { background:#3DDC84; }
.status-side { flex:1 1 220px; display:flex; flex-direction:column; gap:.75rem; }
.kpi { border:1px solid var(--border); border-left:4px solid var(--brand-cyan); border-radius:4px 14px 14px 4px; padding:1rem 1.1rem; background:var(--surface); }
.kpi.o { border-left-color:var(--brand-orange); }
.kpi b { display:block; font-size:24px; font-weight:800; }

.empty-state { text-align:center; padding:3rem 1.5rem; border:1px dashed var(--border); border-radius:16px; background:var(--bg-secondary); }
.empty-icon { width:56px; height:56px; margin:0 auto 1rem; border-radius:16px; background:var(--bg-tertiary); display:flex; align-items:center; justify-content:center; color:var(--brand-cyan); }
.empty-icon svg.lucide { width:28px; height:28px; }
.empty-state p { color:var(--text-secondary); max-width:420px; margin:.4rem auto 1.25rem; }

/* WhatsApp */
.wa-layout { display:flex; gap:1.5rem; align-items:flex-start; }
.wa-main { flex:1.6; min-width:0; display:flex; flex-direction:column; gap:1rem; }
.wa-main .status-main { flex:none; }
.wa-side { flex:1; min-width:260px; display:flex; flex-direction:column; gap:.75rem; }
.wa-side .kpi .muted { display:block; font-size:13px; }
.wa-qr { display:flex; gap:1.5rem; align-items:center; padding:1.25rem; border:1px solid var(--border); border-radius:4px 18px 4px 18px; background:var(--surface); }
.wa-qr img { width:260px; height:260px; background:#fff; padding:8px; border-radius:12px; flex-shrink:0; image-rendering:pixelated; }
.wa-pasos { margin:0; padding-left:1.2rem; color:var(--text-secondary); line-height:1.9; }
.wa-acciones { display:flex; gap:.75rem; flex-wrap:wrap; }
.wa-danger { color:var(--danger); }
.wa-test { display:flex; flex-direction:column; gap:.6rem; padding:1rem; border:1px solid var(--border); border-radius:14px; background:var(--bg-secondary); }
.wa-test textarea { resize:vertical; min-height:80px; }
@media (max-width: 1024px) { .wa-layout { flex-direction:column; align-items:stretch; } .wa-side { min-width:0; } }
@media (max-width: 768px) { .wa-qr { flex-direction:column; text-align:left; } .wa-qr img { width:100%; max-width:300px; height:auto; aspect-ratio:1; } }

/* Modales */
.modal-wrapper { position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:1000; padding:1rem; }
.modal { background:var(--bg-primary); border-radius:14px; width:100%; max-width:560px; max-height:90vh; display:flex; flex-direction:column; }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; border-bottom:1px solid var(--border); }
.modal-body { flex:1; overflow-y:auto; padding:1.25rem; -webkit-overflow-scrolling:touch; }
.modal-footer { padding:1rem 1.25rem; border-top:1px solid var(--border); display:flex; gap:.75rem; justify-content:flex-end; }
.mas-grid { display:flex; flex-wrap:wrap; gap:.75rem; }
.mas-item { flex:1 1 calc(33% - .75rem); min-width:96px; min-height:88px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem;
  border:1px solid var(--border); border-radius:14px; background:var(--bg-secondary); color:var(--text-primary); font-size:13px; font-weight:500; }

/* Toast */
.toast { position:fixed; bottom:88px; left:50%; transform:translateX(-50%); padding:.75rem 1.25rem; border-radius:10px; font-size:14px;
  z-index:10001; max-width:calc(100vw - 2rem); pointer-events:none; color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.toast-error { background:var(--danger); } .toast-success { background:var(--success); } .toast-warning { background:var(--warning); }

/* Footer nav mobile */
.app-footer-nav { display:none; }

@media (max-width: 1024px) {
  .hero-in { gap:2rem; }
  .feat { flex-direction:column; } .feat-head { flex:none; }
}
@media (max-width: 768px) {
  .topbar-in { padding:.65rem 1rem; }
  .hero-in { flex-direction:column; padding:2.5rem 1rem 2rem; align-items:stretch; }
  .hero-visual { min-height:300px; }
  .hv-plate { inset:0 0 0 6%; }
  .strip-in { flex-wrap:wrap; padding:0 1rem; }
  .strip-item { flex:1 1 50%; padding:1rem .5rem; border-left:0; }
  .feat { padding:2.5rem 1rem; }
  .feat-row:nth-child(even) { padding-left:0; }
  .login-side { display:none; }
  .admin-sidebar { display:none; }
  .admin-top { padding:.85rem 1rem; }
  .vista-container { padding:1.25rem 1rem 6rem; }
  .modal-wrapper { align-items:flex-end; padding:0; }
  .modal { max-width:none; border-radius:18px 18px 0 0; }
  .app-footer-nav { display:flex; position:fixed; bottom:0; left:0; right:0; height:calc(64px + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom); background:var(--bg-primary); border-top:1px solid var(--border); z-index:999; }
  .app-footer-nav a { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:12px;
    color:var(--text-muted); text-decoration:none; min-height:44px; }
  .app-footer-nav a.active { color:var(--brand-cyan); }
}

/* ---------- Agente IA ---------- */
.ag-layout { display:flex; gap:1.5rem; align-items:flex-start; }
.ag-main { flex:2; min-width:0; display:flex; flex-direction:column; gap:1rem; }
.ag-main .status-main { flex:none; }
.ag-side { flex:1; min-width:270px; display:flex; flex-direction:column; gap:.75rem; }
.ag-side .kpi .muted { display:block; font-size:13px; }
.ag-key { font-size:13px; word-break:break-all; }
.ag-row { display:flex; gap:.5rem; }
.ag-row .btn { flex:1; }
.ag-chat { border:1px solid var(--border); border-radius:4px 18px 18px 18px; background:var(--surface); display:flex; flex-direction:column; overflow:hidden; }
.ag-chat-head { display:flex; gap:1rem; align-items:flex-start; justify-content:space-between; padding:1rem 1.1rem; border-bottom:1px solid var(--border); }
.ag-chat-head p { margin:.25rem 0 0; font-size:13px; }
.ag-msgs { height:440px; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.7rem; background:
  linear-gradient(var(--bg-secondary), var(--bg-secondary)); -webkit-overflow-scrolling:touch; }
.ag-msg { display:flex; flex-direction:column; max-width:82%; }
.ag-msg.in { align-self:flex-end; align-items:flex-end; }
.ag-msg.out { align-self:flex-start; }
.ag-bubble { padding:.6rem .85rem; border-radius:14px; white-space:pre-wrap; word-break:break-word; font-size:14px; line-height:1.5;
  -webkit-user-select:text; user-select:text; }
.ag-msg.in .ag-bubble { background:var(--accent); color:var(--accent-text); border-bottom-right-radius:4px; }
.ag-msg.out .ag-bubble { background:var(--surface); color:var(--text-primary); border:1px solid var(--border); border-bottom-left-radius:4px; }
.ag-msg.err .ag-bubble { border-color:var(--danger); color:var(--danger); }
.ag-meta { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.35rem; }
.ag-tag { display:inline-flex; align-items:center; gap:.25rem; font-size:12px; padding:.1rem .5rem; border-radius:999px; background:var(--bg-tertiary); color:var(--text-secondary); }
.ag-tag svg { width:13px; height:13px; }
.ag-tag.der { background:rgba(232,147,12,.16); color:var(--warning); font-weight:600; }
.ag-tag.sin { background:rgba(192,57,43,.12); color:var(--danger); }
.ag-tag.tok { background:transparent; color:var(--text-muted); }
.ag-typing { display:flex; gap:4px; padding:.8rem 1rem; }
.ag-typing span { width:7px; height:7px; border-radius:50%; background:var(--text-muted); animation:agDot 1s infinite ease-in-out; }
.ag-typing span:nth-child(2) { animation-delay:.15s; } .ag-typing span:nth-child(3) { animation-delay:.3s; }
@keyframes agDot { 0%,80%,100% { opacity:.25; transform:translateY(0); } 40% { opacity:1; transform:translateY(-3px); } }
.ag-empty { margin:auto; text-align:center; color:var(--text-secondary); max-width:420px; }
.ag-empty > svg { width:36px; height:36px; color:var(--brand-cyan); }
.ag-sugs { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:.75rem; }
.ag-sug { border:1px solid var(--border); background:var(--surface); color:var(--text-primary); border-radius:999px; padding:.5rem .85rem; font-size:13px; min-height:40px; font-family:inherit; }
.ag-sug:hover { border-color:var(--brand-cyan); }
.ag-input { display:flex; gap:.5rem; padding:.75rem; border-top:1px solid var(--border); align-items:flex-end; }
.ag-input textarea { resize:none; min-height:48px; max-height:140px; }
.ag-input .btn { min-width:52px; height:48px; }
.ag-box { border:1px solid var(--border); border-radius:14px; padding:1rem; background:var(--surface); }
.ag-fuentes, .ag-log { list-style:none; margin:.6rem 0 0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.ag-fuentes li { display:flex; align-items:center; gap:.5rem; font-size:13px; }
.ag-fuentes li svg { width:16px; height:16px; color:var(--brand-cyan); flex:none; }
.ag-fuentes li span { flex:1; }
.ag-fuentes em { font-style:normal; font-size:12px; color:var(--text-muted); }
.ag-fuentes em.ok { color:var(--success); font-weight:600; }
.ag-log li { display:flex; flex-direction:column; font-size:13px; border-left:3px solid var(--border); padding-left:.6rem; }
.ag-log li b { font-size:12px; }
.ag-log .st-ok { color:var(--success); } .ag-log .st-error { color:var(--danger); } .ag-log .st-omitido { color:var(--warning); }
.ag-log small { color:var(--text-muted); font-size:12px; }
@media (max-width: 1024px) {
  .ag-layout { flex-direction:column; }
  .ag-side { width:100%; min-width:0; }
}
@media (max-width: 768px) {
  .ag-msgs { height:58vh; }
  .ag-msg { max-width:90%; }
  .ag-chat-head .btn { padding:.5rem .7rem; }
}

/* ---------- Conversaciones ---------- */
.cv-layout { display:flex; gap:1.25rem; align-items:stretch; height:calc(100vh - 150px); min-height:520px; }
.cv-list { flex:0 0 340px; display:flex; flex-direction:column; min-height:0; border:1px solid var(--border); border-radius:18px 4px 18px 18px; background:var(--surface); overflow:hidden; }
.cv-filtros { padding:.85rem; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:.6rem; }
.cv-search { position:relative; }
.cv-search svg { position:absolute; left:.8rem; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--text-muted); }
.cv-search .input { padding-left:2.4rem; }
.cv-chips { display:flex; gap:.4rem; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.cv-chip { flex:none; border:1px solid var(--border); background:var(--bg-secondary); color:var(--text-secondary); border-radius:999px; padding:.35rem .7rem; font-size:12px; font-weight:600; min-height:34px; font-family:inherit; }
.cv-chip b { font-weight:700; color:var(--text-muted); margin-left:.15rem; }
.cv-chip.on { background:var(--accent); color:var(--accent-text); border-color:var(--accent); }
.cv-chip.on b { color:inherit; opacity:.85; }
.cv-items { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.cv-items .empty-state { margin:1rem; padding:2rem 1rem; }
.cv-cargando { padding:2rem; text-align:center; color:var(--text-muted); }
.cv-item { width:100%; display:flex; gap:.75rem; align-items:flex-start; text-align:left; padding:.85rem; border:0; border-bottom:1px solid var(--border);
  background:transparent; color:var(--text-primary); font-family:inherit; min-height:72px; }
.cv-item:hover { background:var(--bg-secondary); }
.cv-item.on { background:var(--bg-tertiary); box-shadow:inset 3px 0 0 var(--brand-cyan); }
.cv-av { flex:none; width:42px; height:42px; border-radius:12px 4px 12px 12px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px;
  background:var(--bg-tertiary); color:var(--text-primary); }
.cv-av.m-ia { background:rgba(14,143,208,.14); color:var(--brand-cyan); }
.cv-av.m-humano { background:rgba(232,147,12,.16); color:var(--brand-orange); }
.cv-av.m-finalizado { background:var(--bg-tertiary); color:var(--text-muted); }
.cv-it-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:.15rem; }
.cv-it-top { display:flex; justify-content:space-between; gap:.5rem; }
.cv-it-top b { font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-it-top small { color:var(--text-muted); font-size:12px; flex:none; }
.cv-it-msg { font-size:13px; color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-badges { display:flex; gap:.3rem; flex-wrap:wrap; margin-top:.15rem; }
.cv-badge { font-size:12px; font-weight:700; padding:0 .45rem; border-radius:6px; line-height:20px; background:var(--bg-tertiary); color:var(--text-secondary); }
.cv-badge.m-ia { background:rgba(14,143,208,.14); color:var(--brand-cyan); }
.cv-badge.m-humano { background:rgba(232,147,12,.16); color:var(--warning); }
.cv-badge.pausa { background:rgba(192,57,43,.12); color:var(--danger); }
.cv-badge.der { background:var(--brand-orange); color:#1B1203; }

.cv-chat { flex:1; min-width:0; display:flex; flex-direction:column; border:1px solid var(--border); border-radius:4px 18px 18px 18px; background:var(--surface); overflow:hidden; }
.cv-nochat { margin:auto; border:0; background:transparent; }
.cv-head { display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; border-bottom:1px solid var(--border); }
.cv-head-t { flex:1; min-width:0; display:flex; flex-direction:column; }
.cv-head-t b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-head-t small { color:var(--text-muted); font-size:12px; }
.cv-back { display:none; }
.cv-convsel { width:auto; max-width:220px; min-height:40px; font-size:13px; padding:.4rem .6rem; }
.cv-control { display:flex; gap:.6rem; align-items:center; padding:.7rem 1rem; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.cv-seg { display:flex; background:var(--bg-secondary); border:1px solid var(--border); border-radius:12px; padding:3px; gap:3px; }
.cv-seg-b { display:inline-flex; align-items:center; gap:.35rem; border:0; background:transparent; color:var(--text-secondary); font-weight:600; font-size:13px;
  padding:.45rem .8rem; border-radius:9px; min-height:40px; font-family:inherit; }
.cv-seg-b svg { width:16px; height:16px; }
.cv-seg-b.on { color:#fff; }
.cv-seg-b.on.m-ia { background:var(--brand-cyan); }
.cv-seg-b.on.m-humano { background:var(--brand-orange); color:#1B1203; }
.cv-seg-b.on.m-finalizado { background:var(--text-secondary); color:var(--bg-primary); }
.cv-pausa { margin-left:auto; min-height:44px; }
.cv-estado { display:flex; align-items:center; gap:.5rem; padding:.55rem 1rem; font-size:13px; background:var(--bg-secondary); color:var(--text-secondary); border-bottom:1px solid var(--border); }
.cv-estado svg { width:16px; height:16px; flex:none; }
.cv-estado.m-ia svg { color:var(--brand-cyan); }
.cv-estado.m-humano { background:rgba(232,147,12,.10); }
.cv-estado.m-pausa { background:rgba(192,57,43,.08); color:var(--danger); }
.cv-msgs { flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.55rem; background:var(--bg-secondary); -webkit-overflow-scrolling:touch; }
.cv-msg { display:flex; flex-direction:column; max-width:78%; }
.cv-msg small { font-size:12px; color:var(--text-muted); margin-top:.15rem; }
.cv-msg.in { align-self:flex-start; }
.cv-msg.out { align-self:flex-end; align-items:flex-end; }
.cv-bubble { padding:.55rem .8rem; border-radius:14px; white-space:pre-wrap; word-break:break-word; font-size:14px; line-height:1.5; -webkit-user-select:text; user-select:text; }
.cv-msg.in .cv-bubble { background:var(--surface); border:1px solid var(--border); border-bottom-left-radius:4px; }
.cv-msg.o-ia .cv-bubble { background:var(--accent); color:var(--accent-text); border-bottom-right-radius:4px; }
.cv-msg.o-humano .cv-bubble { background:var(--brand-orange); color:#1B1203; border-bottom-right-radius:4px; }
.cv-msg.o-sistema .cv-bubble { background:var(--bg-tertiary); color:var(--text-secondary); border:1px dashed var(--border); }
.cv-ev { align-self:center; text-align:center; }
.cv-ev span { display:inline-block; font-size:12px; line-height:1.45; color:var(--text-muted); background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:.25rem .7rem; max-width:92%; }
.cv-compose { display:flex; gap:.5rem; padding:.7rem; border-top:1px solid var(--border); align-items:flex-end; }
.cv-compose textarea { resize:none; min-height:48px; max-height:140px; }
.cv-compose .btn { min-width:52px; height:48px; }
.cv-hint { margin:0; padding:0 1rem .6rem; font-size:12px; color:var(--text-muted); }

@media (max-width: 1024px) { .cv-list { flex-basis:290px; } }
@media (max-width: 768px) {
  .cv-layout { height:calc(100vh - 150px); min-height:0; display:block; }
  .cv-list, .cv-chat { height:100%; border-radius:16px; }
  .cv-layout .cv-chat { display:none; }
  .cv-layout.has-id .cv-list { display:none; }
  .cv-layout.has-id .cv-chat { display:flex; }
  .cv-back { display:inline-flex; }
  .cv-convsel { max-width:120px; }
  .cv-control { padding:.6rem; }
  .cv-seg { flex:1; }
  .cv-seg-b { flex:1; justify-content:center; padding:.45rem .3rem; font-size:12px; }
  .cv-pausa { width:100%; margin-left:0; }
  .cv-msg { max-width:88%; }
}

/* ---------- Dashboard (Fase 5) ---------- */
.db-wrap { --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; }
[data-theme="dark"] .db-wrap { --s1:#3987e5; --s2:#d95926; --s3:#199e70; }
.btn-sm { padding:.45rem .8rem; font-size:13px; min-height:36px; }
.btn-light { background:#fff; color:#0A2A5E; border-color:#fff; }
.db-top { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.db-wa { flex:3 1 380px; }
.db-wa-row { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.db-ia { flex:1 1 240px; border:1px solid var(--border); border-radius:4px 18px 4px 18px; padding:1.25rem; background:var(--surface);
  border-top:4px solid var(--warning); display:flex; flex-direction:column; gap:.3rem; align-items:flex-start; }
.db-ia.ok { border-top-color:var(--success); }
.db-ia b { font-size:20px; font-weight:800; }
.db-ia p { margin:0 0 .5rem; font-size:13px; }
.db-alert { display:flex; align-items:center; gap:.75rem; padding:.8rem 1rem; margin-bottom:1rem; border-radius:12px;
  background:rgba(232,147,12,.12); border:1px solid rgba(232,147,12,.45); color:var(--text-primary); font-weight:600; }
.db-alert > svg { color:var(--warning); flex:none; }
.db-alert span { flex:1; }
.db-kpis { display:flex; gap:.75rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.db-kpi { flex:1 1 170px; position:relative; border:1px solid var(--border); background:var(--surface); border-radius:14px 4px 14px 4px;
  padding:1rem 1rem .9rem; display:flex; flex-direction:column; gap:.15rem; min-height:118px; overflow:hidden; }
.db-kpi::after { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--brand-cyan); }
.db-kpi.k2::after { background:var(--accent); } .db-kpi.k3::after { background:var(--brand-orange); }
.db-kpi.k4::after { background:var(--success); } .db-kpi.k5::after { background:var(--text-muted); }
.db-kpi b { font-size:28px; font-weight:800; line-height:1.15; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.db-kpi small { font-size:12px; color:var(--text-secondary); }
.db-kpi .label { padding-right:24px; }
.db-kpi-i { position:absolute; right:.8rem; top:.8rem; color:var(--text-muted); opacity:.7; }
.db-kpi-i svg { width:18px; height:18px; }
.db-kpi.sk, .db-sk-chart { background:linear-gradient(90deg, var(--bg-secondary), var(--bg-tertiary), var(--bg-secondary)); background-size:200% 100%; animation:dbsk 1.2s infinite linear; }
.db-sk-chart { height:200px; border-radius:10px; }
@keyframes dbsk { to { background-position:-200% 0; } }
.db-grid { display:flex; gap:1rem; align-items:flex-start; }
.db-col-main { flex:1.7 1 0; min-width:0; display:flex; flex-direction:column; gap:1rem; }
.db-col-side { flex:1 1 300px; min-width:0; display:flex; flex-direction:column; gap:1rem; }
.db-card { border:1px solid var(--border); background:var(--surface); border-radius:16px; padding:1.1rem 1.15rem; }
.db-card-h { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; margin-bottom:.75rem; }
.db-card-h h4 { margin:.1rem 0 0; font-size:16px; font-weight:700; }
.db-count { min-width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--bg-tertiary); font-size:15px; }
.db-pend { border-top:4px solid var(--brand-orange); }
.db-chart { position:relative; }
.db-svg { width:100%; height:auto; display:block; overflow:visible; }
.db-grid-l { stroke:var(--border); stroke-width:1; stroke-dasharray:2 4; } .db-grid-l.base { stroke-dasharray:none; stroke:var(--text-muted); opacity:.5; }
.db-ax { fill:var(--text-muted); font-size:12px; font-family:inherit; }
.db-bar { fill:var(--s1); }
.db-hit { fill:transparent; cursor:pointer; } .db-hit.on { fill:var(--text-primary); opacity:.05; }
.db-tip { position:absolute; top:-6px; transform:translateY(-100%); background:var(--bg-primary); border:1px solid var(--border); border-radius:10px;
  padding:.5rem .7rem; box-shadow:0 10px 24px var(--shadow); font-size:12px; display:flex; flex-direction:column; gap:.15rem; pointer-events:none; white-space:nowrap; z-index:5; }
.db-tip b { color:var(--text-primary); } .db-tip span { color:var(--text-secondary); display:flex; align-items:center; gap:.35rem; }
.sw { display:inline-block; width:10px; height:10px; border-radius:3px; flex:none; }
.sw.s1 { background:var(--s1); } .sw.s2 { background:var(--s2); } .sw.s3 { background:var(--s3); }
.db-stack { display:flex; gap:2px; height:18px; border-radius:6px; overflow:hidden; background:var(--surface); }
.db-stack span { min-width:4px; } .db-stack .s1 { background:var(--s1); } .db-stack .s2 { background:var(--s2); } .db-stack .s3 { background:var(--s3); }
.db-legend { display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; margin-top:.75rem; font-size:13px; color:var(--text-secondary); }
.db-legend span { display:flex; align-items:center; gap:.4rem; } .db-legend b { color:var(--text-primary); } .db-legend small { color:var(--text-muted); font-size:12px; }
.db-table { width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
.db-table th, .db-table td { padding:.4rem .5rem; border-bottom:1px solid var(--border); text-align:right; }
.db-table th:first-child, .db-table td:first-child { text-align:left; } .db-table th { color:var(--text-muted); font-weight:600; font-size:12px; }
.db-row { width:100%; display:flex; align-items:center; gap:.7rem; padding:.6rem .4rem; background:none; border:0; border-bottom:1px solid var(--border);
  text-align:left; color:var(--text-primary); font:inherit; border-radius:8px; min-height:56px; }
.db-row:last-child { border-bottom:0; } .db-row:hover { background:var(--bg-secondary); }
.db-row .cv-av { width:36px; height:36px; font-size:13px; }
.db-row-b { flex:1; min-width:0; display:flex; flex-direction:column; }
.db-row-b b { font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.db-row-b small { font-size:12px; color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.db-row-t { font-size:12px; color:var(--text-muted); flex:none; }
.db-more { width:100%; margin-top:.5rem; }
.db-modo { width:100%; display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .6rem; padding:.55rem .4rem; background:none; border:0; color:var(--text-primary);
  font:inherit; font-size:14px; text-align:left; border-radius:8px; min-height:48px; }
.db-modo:hover { background:var(--bg-secondary); }
.db-modo svg { width:16px; height:16px; color:var(--text-muted); } .db-modo span:not(.db-modo-bar) { flex:1; } .db-modo b { font-variant-numeric:tabular-nums; }
.db-modo-bar { flex:0 0 100%; height:6px; border-radius:3px; background:var(--bg-tertiary); overflow:hidden; display:block; }
.db-modo-bar span { display:block; height:100%; border-radius:3px; background:var(--brand-cyan); }
.db-modo-bar .m-pausada { background:var(--text-muted); } .db-modo-bar .m-humano { background:var(--brand-orange); } .db-modo-bar .m-finalizado { background:var(--success); }
.db-empty { text-align:center; padding:1.25rem .75rem; color:var(--text-secondary); font-size:13px; }
.db-empty svg { width:26px; height:26px; color:var(--text-muted); }
.db-empty p { margin:.4rem auto .75rem; max-width:300px; }
.db-empty-chart { min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px dashed var(--border); border-radius:12px; background:var(--bg-secondary); }
.db-feed { list-style:none; margin:0; padding:0; }
.db-feed-i { width:100%; display:flex; align-items:baseline; gap:.6rem; padding:.5rem .3rem; background:none; border:0; color:var(--text-secondary); font:inherit; font-size:13px; text-align:left; border-radius:8px; }
.db-feed-i:hover { background:var(--bg-secondary); } .db-feed-i b { color:var(--text-primary); }
.db-feed-i > span:nth-child(2) { flex:1; min-width:0; } .db-feed-i small { color:var(--text-muted); flex:none; font-size:12px; }
.db-feed-dot { width:8px; height:8px; border-radius:50%; background:var(--brand-cyan); flex:none; transform:translateY(-1px); }
.db-feed-dot.t-derivada_ia, .db-feed-dot.t-tomada_panel, .db-feed-dot.t-tomada_telefono, .db-feed-dot.t-modo_humano { background:var(--brand-orange); }
.db-feed-dot.t-modo_finalizado { background:var(--success); } .db-feed-dot.t-ia_pausada { background:var(--text-muted); }
.cv-periodo { padding:.5rem .7rem; font-size:13px; min-height:40px; }
.cv-chip b:empty { display:none; }
@media (max-width: 1024px) { .db-grid { flex-direction:column; align-items:stretch; } .db-col-side { flex:none; order:-1; } }
@media (max-width: 768px) {
  .db-kpis { gap:.6rem; } .db-kpi { flex:1 1 calc(50% - .6rem); min-height:108px; } .db-kpi b { font-size:24px; }
  .db-kpi:last-child { flex-basis:100%; }
  .db-alert { flex-wrap:wrap; } .db-alert .btn { width:100%; }
}

/* ---------- Conocimiento (Fase 6) ---------- */
.kb-head { display:flex; gap:1rem; align-items:stretch; flex-wrap:wrap; margin-bottom:1rem; }
.kb-intro { flex:2 1 380px; }
.kb-intro h3 { margin:.2rem 0 .3rem; font-size:20px; font-weight:800; }
.kb-intro p { margin:0; max-width:620px; }
.kb-meter { flex:1 1 260px; border:1px solid var(--border); border-left:4px solid var(--brand-cyan); border-radius:4px 14px 14px 4px; padding:.85rem 1rem;
  background:var(--surface); display:flex; flex-direction:column; gap:.15rem; }
.kb-meter b { font-size:17px; } .kb-meter small { font-size:12px; }
.kb-meter-bar { display:block; height:6px; border-radius:3px; background:var(--bg-tertiary); overflow:hidden; margin-top:.35rem; }
.kb-meter-bar span { display:block; height:100%; background:var(--brand-cyan); border-radius:3px; transition:width .4s; }
.kb-meter-bar span.full { background:var(--brand-orange); }
.kb-tabs { display:flex; gap:.25rem; border-bottom:1px solid var(--border); margin-bottom:1rem; overflow-x:auto; scrollbar-width:none; }
.kb-tab { display:flex; align-items:center; gap:.45rem; padding:.75rem 1rem; background:none; border:0; border-bottom:3px solid transparent; margin-bottom:-1px;
  color:var(--text-secondary); font:inherit; font-weight:600; font-size:14px; white-space:nowrap; min-height:48px; }
.kb-tab svg { width:17px; height:17px; }
.kb-tab.on { color:var(--text-primary); border-bottom-color:var(--brand-orange); }
.kb-toolbar { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-bottom:.6rem; }
.kb-search { flex:1 1 260px; }
.kb-estado { flex:0 1 210px; }
.kb-chips { margin-bottom:1rem; }
.kb-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:.85rem; }
.kb-list > .empty-state { grid-column:1 / -1; }
.kb-card { border:1px solid var(--border); background:var(--surface); border-radius:16px 4px 16px 16px; padding:1rem 1.05rem .8rem; display:flex; flex-direction:column; gap:.4rem; min-width:0; transition:opacity .2s; }
.kb-card.sk { min-height:170px; background:linear-gradient(90deg, var(--bg-secondary), var(--bg-tertiary), var(--bg-secondary)); background-size:200% 100%; animation:dbsk 1.2s infinite linear; }
.kb-card.off { opacity:.62; border-style:dashed; }
.kb-card h4 { margin:.1rem 0 0; font-size:15px; font-weight:700; line-height:1.35; overflow-wrap:anywhere; }
.kb-card p { margin:0; font-size:13px; color:var(--text-secondary); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; white-space:pre-line; flex:1; }
.kb-card-top, .kb-card-foot { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.kb-card-foot { border-top:1px solid var(--border); padding-top:.5rem; margin-top:.2rem; }
.kb-card-foot small { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kb-acc { display:flex; gap:.25rem; flex:none; }
.kb-acc .icon-btn { width:40px; height:40px; }
.icon-btn.danger:hover { color:var(--danger); border-color:var(--danger); }
.kb-tipo { display:inline-flex; align-items:center; gap:.35rem; font-size:12px; font-weight:700; padding:.2rem .55rem; border-radius:999px; background:var(--bg-tertiary); color:var(--text-secondary); }
.kb-tipo svg { width:14px; height:14px; }
.kb-tipo.t-institucional { background:rgba(10,42,94,.10); color:var(--accent); }
.kb-tipo.t-servicio { background:rgba(14,143,208,.13); color:var(--brand-cyan); }
.kb-tipo.t-qa { background:rgba(26,122,74,.12); color:var(--success); }
.kb-tipo.t-promo { background:rgba(232,147,12,.16); color:var(--warning); }
.kb-tipo.t-politica { background:rgba(192,57,43,.10); color:var(--danger); }
[data-theme="dark"] .kb-tipo.t-institucional { background:rgba(46,168,240,.12); }
/* Switch accesible (checkbox real) */
.kb-switch { display:flex; align-items:center; gap:.7rem; cursor:pointer; margin-top:1.1rem; }
.kb-switch.sm { margin:0; min-width:44px; min-height:44px; justify-content:flex-end; }
.kb-switch input { position:absolute; opacity:0; width:1px; height:1px; }
.kb-sw { flex:none; width:42px; height:24px; border-radius:999px; background:var(--bg-tertiary); border:1px solid var(--border); position:relative; transition:background .2s; }
.kb-sw::after { content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .2s; }
.kb-switch input:checked + .kb-sw { background:var(--success); border-color:var(--success); }
.kb-switch input:checked + .kb-sw::after { transform:translateX(18px); }
.kb-switch input:focus-visible + .kb-sw { box-shadow:0 0 0 3px rgba(14,143,208,.35); }
.kb-switch input:disabled + .kb-sw { opacity:.5; }
.kb-switch b { display:block; font-size:14px; } .kb-switch small { font-size:12px; }
.kb-modal { max-width:680px; }
.kb-textarea { resize:vertical; min-height:180px; line-height:1.55; }
.kb-ta-foot { display:flex; justify-content:space-between; gap:.5rem; margin-top:.25rem; }
.kb-ta-foot small, .kb-ayuda { font-size:12px; }
.kb-ayuda { display:block; color:var(--text-muted); margin-top:.3rem; }
.kb-err { color:var(--danger); font-size:12px; min-height:1em; }
.input.err { border-color:var(--danger); }
.kb-probar-f { border:1px solid var(--border); background:var(--surface); border-radius:16px; padding:1rem 1.1rem; display:flex; flex-direction:column; gap:.5rem; margin-bottom:1rem; }
.kb-probar-row { display:flex; gap:.6rem; } .kb-probar-row .input { flex:1; }
.kb-probar-f small { font-size:12px; }
.kb-fuentes { display:flex; gap:.85rem; flex-wrap:wrap; margin-bottom:1rem; }
.kb-fuente { flex:1 1 240px; border:1px solid var(--border); background:var(--surface); border-radius:14px; padding:.9rem 1rem; }
.kb-fuente .label { display:flex; align-items:center; gap:.4rem; } .kb-fuente .label svg { width:15px; height:15px; }
.kb-fuente .label b { margin-left:auto; color:var(--text-primary); }
.kb-fuente ul { margin:.5rem 0 0; padding-left:1.1rem; font-size:13px; } .kb-fuente li { margin:.2rem 0; overflow-wrap:anywhere; }
.kb-fuente p { margin:.5rem 0 0; font-size:13px; }
.kb-prompt { border:1px solid var(--border); border-radius:14px; background:var(--bg-secondary); }
.kb-prompt summary { padding:.8rem 1rem; cursor:pointer; font-weight:600; font-size:14px; display:flex; align-items:center; gap:.5rem; min-height:44px; }
.kb-prompt summary svg { width:16px; height:16px; }
.kb-prompt pre { margin:0; padding:1rem; border-top:1px solid var(--border); max-height:420px; overflow:auto; white-space:pre-wrap; font-size:12px; line-height:1.5; color:var(--text-secondary); -webkit-user-select:text; user-select:text; }
@media (max-width: 768px) {
  .kb-list { grid-template-columns:1fr; }
  .kb-toolbar .btn-primary { width:100%; } .kb-estado { flex:1 1 100%; }
  .kb-probar-row { flex-direction:column; }
  .kb-tab { padding:.7rem .8rem; }
}

/* ---------- Documentos (Fase 6) ---------- */
.dc-view { min-width:0; }
.dc-upload { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; border:3px dashed var(--border); border-left-color:var(--brand-orange); border-radius:18px 4px 18px 4px; background:var(--bg-secondary); padding:1.3rem; margin-bottom:1.2rem; transition:border-color .2s, background .2s; }
.dc-upload.dc-drag { border-color:var(--brand-cyan); background:var(--bg-tertiary); }
.dc-upload-icon { display:flex; align-items:center; justify-content:center; flex:none; width:54px; height:60px; border:1px solid var(--border); border-bottom:4px solid var(--brand-orange); border-radius:14px 4px 14px 4px; background:var(--surface); color:var(--accent); }
.dc-upload-icon svg { width:28px; height:28px; }
.dc-upload-copy { flex:1 1 280px; min-width:0; }
.dc-upload-copy h3 { margin:.2rem 0 .4rem; font-size:19px; overflow-wrap:anywhere; }
.dc-upload-copy p { margin:0 0 .3rem; color:var(--text-secondary); font-size:14px; }
.dc-upload-copy small { display:block; color:var(--text-secondary); font-size:12px; }
.dc-upload-btn { flex:none; }
.dc-upload-status { flex:1 0 100%; min-width:0; padding-top:.8rem; border-top:1px solid var(--border); font-size:13px; }
.dc-progress-head { display:flex; justify-content:space-between; align-items:center; gap:.5rem; flex-wrap:wrap; }
.dc-progress-head small { font-size:12px; color:var(--text-secondary); }
.dc-upload-filename { display:block; font-size:12px; color:var(--text-secondary); overflow-wrap:anywhere; margin:.25rem 0 .5rem; }
.dc-progress { height:8px; overflow:hidden; border-radius:4px; background:var(--bg-tertiary); }
.dc-progress-fill { display:block; height:100%; width:0; background:var(--brand-cyan); border-radius:4px; transition:width .15s; }
.dc-toolbar { margin-bottom:.7rem; }
.dc-search { min-width:0; }
.dc-chips { flex-wrap:wrap; overflow:visible; gap:.5rem; }
.dc-chip { min-height:44px; }
.dc-chip.on { color:var(--bg-primary); }
.dc-list { grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.dc-card { gap:.55rem; }
.dc-card.dc-card-warning { border-color:var(--warning); border-left-width:4px; }
.dc-card.dc-card-error { border-color:var(--danger); border-left-width:4px; }
.dc-card.dc-card-off { border-style:dashed; }
.dc-type { color:var(--accent); }
.dc-meta, .dc-detail-meta { font-size:12px; color:var(--text-secondary); overflow-wrap:anywhere; }
.dc-badge { align-self:flex-start; border:1px solid currentColor; border-radius:6px; font-size:12px; font-weight:700; padding:.1rem .5rem; background:var(--bg-secondary); }
.dc-badge-success { color:var(--success); }
.dc-badge-warning, .dc-tone-warning { color:var(--warning); }
.dc-badge-danger, .dc-tone-danger { color:var(--danger); }
.dc-badge-muted { color:var(--text-secondary); }
.dc-document-error { display:block; font-size:12px; overflow-wrap:anywhere; white-space:pre-wrap; }
.dc-card-foot { margin-top:auto; }
.dc-date { color:var(--text-secondary); }
.dc-card-foot .dc-date { white-space:normal; overflow-wrap:anywhere; }
.dc-actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.dc-actions .dc-action, .dc-action { min-width:44px; min-height:44px; width:44px; height:44px; flex:none; }
.dc-action:disabled { opacity:.5; cursor:wait; }
.dc-danger { color:var(--danger); }
.dc-danger:hover { border-color:var(--danger); }
.dc-download { text-decoration:none; }
.dc-list-note { margin:0 0 .75rem; font-size:13px; color:var(--text-secondary); }
.dc-empty { min-width:0; }
.dc-modal { max-width:760px; max-height:90vh; max-height:90dvh; }
.dc-modal-small { max-width:460px; }
.dc-modal-head { flex-shrink:0; gap:.75rem; }
.dc-modal-head h3 { overflow-wrap:anywhere; }
.dc-modal-head > div { min-width:0; }
.dc-modal-body { min-height:0; }
.dc-modal-footer { flex-shrink:0; flex-wrap:wrap; padding-bottom:max(1rem, env(safe-area-inset-bottom)); }
.dc-detail-meta { margin:0 0 1rem; }
.dc-detail-warning { font-size:13px; color:var(--warning); background:var(--bg-secondary); border-left:3px solid var(--warning); padding:.7rem .85rem; border-radius:4px; overflow-wrap:anywhere; }
.dc-text { margin:0; padding:1rem; border:1px solid var(--border); border-radius:12px 4px 12px 4px; background:var(--bg-secondary); color:var(--text-primary); font-family:inherit; font-size:13px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; -webkit-user-select:text; user-select:text; }
.dc-name-input { margin-top:.4rem; }
.dc-field-error { display:block; margin-top:.3rem; color:var(--danger); font-size:12px; min-height:1em; }
.dc-invalid { border-color:var(--danger); }
.dc-action:focus-visible, .dc-chip:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.dc-switch input:focus-visible + .kb-sw { outline:2px solid var(--accent); outline-offset:3px; }
@media (max-width:768px) {
  .dc-list { grid-template-columns:1fr; }
  .dc-upload { padding:.9rem; gap:.75rem; }
  .dc-upload-icon { width:44px; height:50px; }
  .dc-upload-copy { flex:1 1 180px; }
  .dc-upload-copy h3 { font-size:17px; }
  .dc-upload-btn { width:100%; }
  .dc-card { padding:.9rem; }
  .dc-modal-head, .dc-modal-body, .dc-modal-footer { padding-left:1rem; padding-right:1rem; }
  .dc-modal-footer { gap:.5rem; }
}
@media (prefers-reduced-motion:reduce) {
  .dc-card { animation:none; }
  .dc-upload, .dc-progress-fill { transition:none; }
}