/* ==================================================================
   Almirall · Procurement AI — sistema de diseño
   Producto Tobogan · morado Tobogan (#7C3AED) · tema claro de producción
   ================================================================== */
:root {
  --brand: #7C3AED; --brand-2: #6D28D9; --brand-3: #8B5CF6; --brand-4: #A78BFA;
  --brand-soft: #F4EFFF; --brand-soft-2: #EBE2FE; --brand-line: #DDD0FB; --brand-ink: #4C1D95;
  --cyan: #0891B2; --cyan-soft: #E7F6FA; --cyan-line: #BCE6F0;
  --humano: #D97706; --humano-soft: #FEF5E6; --humano-line: #F6DCAE; --humano-ink: #92400E;
  --ok: #15803D; --ok-soft: #EAF7EF; --ok-line: #BFE6CD;
  --no: #DC2626; --no-soft: #FDEFEF; --no-line: #F5C9C9;
  --info: #2563EB; --info-soft: #EDF3FE; --info-line: #C9DAFB;
  --pink: #DB2777; --pink-soft: #FDEEF6;
  --slate: #64748B;

  --bg: #F4F3F9; --fondo: #F9F8FD; --panel: #FFFFFF;
  --tinta: #17132B; --tinta-2: #554E6F; --tinta-3: #8D88A4;
  --linea: #E7E4F1; --linea-2: #F0EEF7;

  --radio: 14px; --radio-sm: 10px; --radio-xs: 8px;
  --sombra-sm: 0 1px 2px rgba(23,19,43,.06);
  --sombra: 0 1px 2px rgba(23,19,43,.05), 0 10px 30px rgba(23,19,43,.07);
  --sombra-lg: 0 24px 60px rgba(23,19,43,.22);
  --fuente: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--fuente); color: var(--tinta); background: var(--bg); font-size: 14px; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
svg { flex: none; }
::selection { background: rgba(124,58,237,.22); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #D4CFE4; border-radius: 20px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #BDB6D4; background-clip: padding-box; }

/* =============================== Login =============================== */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.08fr .92fr; background: #140F2B; }
.login-hero { position: relative; overflow: hidden; color: #ECE8FA; padding: 52px 60px; display: flex; flex-direction: column; justify-content: space-between;
  background: radial-gradient(900px 520px at 85% -10%, rgba(139,92,246,.35), transparent 60%), radial-gradient(700px 460px at -10% 110%, rgba(8,145,178,.22), transparent 55%), linear-gradient(160deg, #1A1236 0%, #231848 55%, #150F2D 100%); }
.login-top { display: flex; align-items: center; justify-content: space-between; }
.login-hero-logo { height: 40px; width: auto; }
.login-by { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #B8AEDD; }
.login-hero-mid { max-width: 560px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #C4B5FD; background: rgba(139,92,246,.14); border: 1px solid rgba(167,139,250,.3); padding: 6px 12px; border-radius: 999px; }
.login-hero h1 { font-size: 42px; line-height: 1.08; letter-spacing: -1.2px; margin: 22px 0 16px; font-weight: 800; color: #fff; }
.login-hero h1 span { background: linear-gradient(90deg, #C4B5FD, #67E8F9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.login-hero p { font-size: 16px; line-height: 1.6; color: #BDB4DC; margin: 0; }
.login-team { display: flex; gap: 14px; margin-top: 30px; }
.login-agent { flex: 1; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: 14px; display: flex; gap: 12px; }
.login-agent .la-name { font-weight: 750; color: #fff; font-size: 14.5px; }
.login-agent .la-role { font-size: 12px; color: #B3A9D6; }
.login-agent .la-txt { font-size: 12px; color: #A59BC9; margin-top: 6px; line-height: 1.5; }
.login-agent .la-ch { display: flex; gap: 5px; margin-top: 9px; }
.login-feats { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 22px; font-size: 12.5px; color: #C9C0E6; }
.login-feats span { display: inline-flex; align-items: center; gap: 7px; }
.login-hero-foot { font-size: 12px; color: #8D83B5; display: flex; gap: 18px; flex-wrap: wrap; }
.login-panel { background: var(--panel); display: flex; align-items: center; justify-content: center; padding: 40px; }
.login-card { width: 100%; max-width: 380px; }
.login-brandmini { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; }
.login-brandmini .lb-txt { font-weight: 800; font-size: 15px; letter-spacing: -.2px; }
.login-brandmini .lb-txt span { color: var(--brand); }
.login-card h2 { font-size: 23px; margin: 0 0 5px; letter-spacing: -.4px; }
.login-lead { color: var(--tinta-2); font-size: 14px; margin: 0 0 24px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; font-weight: 650; color: var(--tinta-2); margin-bottom: 6px; }
.input, .select, .textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--linea); border-radius: var(--radio-sm); color: var(--tinta); background: var(--fondo); outline: none; transition: border-color .15s, box-shadow .15s; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand-3); box-shadow: 0 0 0 3px rgba(124,58,237,.14); background: #fff; }
.textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
.sso-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 11px; border: 1px solid var(--linea); border-radius: var(--radio-sm); background: #fff; font-weight: 650; cursor: pointer; margin-bottom: 14px; color: var(--tinta); }
.sso-btn:hover { background: var(--fondo); }
.login-or { display: flex; align-items: center; gap: 10px; color: var(--tinta-3); font-size: 12px; margin: 4px 0 14px; }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.login-btn { width: 100%; margin-top: 6px; padding: 13px; border: 0; border-radius: var(--radio-sm); cursor: pointer; background: linear-gradient(180deg, #8B5CF6, #7C3AED); color: #fff; font-weight: 750; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 10px 24px rgba(124,58,237,.32); }
.login-btn:hover { box-shadow: 0 12px 28px rgba(124,58,237,.42); }
.login-hint { font-size: 12px; color: var(--tinta-3); text-align: center; margin-top: 18px; line-height: 1.6; }
@media (max-width: 960px) { .login { grid-template-columns: 1fr; } .login-hero { display: none; } }

/* =============================== Shell =============================== */
.layout { display: flex; min-height: 100vh; }
.sidebar { width: 256px; flex: none; position: sticky; top: 0; height: 100vh; overflow-y: auto; background: linear-gradient(185deg, #1B1437 0%, #231A48 58%, #19122F 100%); color: #DCD6F2; display: flex; flex-direction: column; padding: 0 14px 16px; }
.marca { height: 64px; margin: 0 -14px 12px; padding: 0 18px; display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,.07); }
.marca-img { height: 28px; width: auto; }
.org-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radio-sm); padding: 10px 12px; margin-bottom: 12px; }
.org-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .9px; color: #9A90C2; font-weight: 750; }
.org-name { font-size: 13px; font-weight: 650; margin-top: 4px; color: #F1EDFF; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-titulo { font-size: 10px; text-transform: uppercase; letter-spacing: .9px; color: #867CB0; font-weight: 800; margin: 14px 0 5px; padding: 0 10px; }
.nav-item { display: flex; align-items: center; gap: 11px; width: 100%; position: relative; background: transparent; border: 0; cursor: pointer; text-align: left; color: #C6BEE4; padding: 9px 10px; border-radius: 10px; font-size: 13.5px; font-weight: 550; transition: background .14s, color .14s; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-lbl { flex: 1; }
.nav-badge { font-size: 11px; font-weight: 750; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 7px; display: grid; place-items: center; background: var(--humano); color: #fff; }
.nav-badge.soft { background: rgba(167,139,250,.22); color: #DDD6FE; }
.nav-on { background: linear-gradient(90deg, rgba(124,58,237,.95), rgba(124,58,237,.6)); color: #fff; box-shadow: 0 6px 16px rgba(124,58,237,.35); }
.nav-on:hover { background: linear-gradient(90deg, rgba(124,58,237,.95), rgba(124,58,237,.6)); }
.side-agents { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.side-agent { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); cursor: pointer; }
.side-agent:hover { background: rgba(255,255,255,.08); }
.side-agent .sa-name { font-size: 12.5px; font-weight: 650; color: #F1EDFF; }
.side-agent .sa-sub { font-size: 10.5px; color: #9A90C2; display: flex; align-items: center; gap: 5px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 3px rgba(52,211,153,.2); display: inline-block; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(52,211,153,.2); } 50% { box-shadow: 0 0 0 5px rgba(52,211,153,.05); } }
.side-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.side-user { display: flex; align-items: center; gap: 10px; }
.side-user-name { font-size: 13px; font-weight: 650; color: #F1EDFF; }
.side-user-role { font-size: 11px; color: #A097C8; }
.side-logout { margin-top: 10px; width: 100%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); color: #C6BEE4; padding: 7px; border-radius: 9px; font-size: 12.5px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; }
.side-logout:hover { background: rgba(255,255,255,.09); color: #fff; }
.powered { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; font-size: 11px; color: #8D83B5; }
.powered b { color: #C4B5FD; font-weight: 700; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 60px; flex: none; background: rgba(255,255,255,.88); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--linea); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; position: sticky; top: 0; z-index: 40; }
.crumbs { display: flex; align-items: center; gap: 8px; color: var(--tinta-3); font-size: 13px; }
.crumb-link { cursor: pointer; } .crumb-link:hover { color: var(--brand); }
.crumb-actual { color: var(--tinta); font-weight: 650; }
.topbar-der { display: flex; align-items: center; gap: 10px; }
.tb-pill { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--tinta-2); background: var(--fondo); border: 1px solid var(--linea); padding: 6px 11px; border-radius: 999px; white-space: nowrap; }
.tb-sync { cursor: pointer; color: var(--ok); background: var(--ok-soft); border-color: var(--ok-line); font-weight: 600; }
.tb-icon-btn { position: relative; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--linea); background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--tinta-2); }
.tb-icon-btn:hover { border-color: #D2CCE6; color: var(--tinta); }
.tb-dot { position: absolute; top: 6px; right: 7px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--no); color: #fff; font-size: 10px; font-weight: 750; display: grid; place-items: center; border: 2px solid #fff; padding: 0 3px; }
.dropdown { position: absolute; top: 54px; right: 24px; width: 380px; background: #fff; border: 1px solid var(--linea); border-radius: 14px; box-shadow: var(--sombra-lg); z-index: 60; overflow: hidden; }
.dropdown-head { padding: 12px 14px; border-bottom: 1px solid var(--linea-2); font-weight: 750; font-size: 13.5px; display: flex; justify-content: space-between; align-items: center; }
.contenido { padding: 22px 24px 70px; }
.tab { max-width: 1440px; margin: 0 auto; }

/* =============================== Cabecera de página =============================== */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; }
.page-title { font-size: 22px; font-weight: 800; letter-spacing: -.5px; margin: 0; display: flex; align-items: center; gap: 11px; }
.pt-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--brand); color: #fff; box-shadow: 0 6px 14px rgba(124,58,237,.28); }
.pt-ico.cyan { background: var(--cyan); box-shadow: 0 6px 14px rgba(8,145,178,.26); }
.pt-ico.amber { background: var(--humano); box-shadow: 0 6px 14px rgba(217,119,6,.26); }
.page-sub { font-size: 13.5px; color: var(--tinta-2); margin: 7px 0 0; max-width: 760px; line-height: 1.55; }
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.subtabs { display: flex; gap: 3px; background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; padding: 4px; margin-bottom: 18px; overflow-x: auto; box-shadow: var(--sombra-sm); }
.subtab { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 9px; border: 0; background: transparent; cursor: pointer; color: var(--tinta-2); font-size: 13px; font-weight: 600; white-space: nowrap; }
.subtab:hover { background: var(--fondo); color: var(--tinta); }
.subtab-on, .subtab-on:hover { background: var(--brand); color: #fff; box-shadow: 0 4px 12px rgba(124,58,237,.26); }
.subtab-n { font-size: 11px; font-weight: 750; background: rgba(23,19,43,.07); padding: 1px 7px; border-radius: 20px; }
.subtab-on .subtab-n { background: rgba(255,255,255,.24); }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--tinta-2); cursor: pointer; margin-bottom: 12px; background: none; border: 0; padding: 0; }
.back-link:hover { color: var(--brand); }

/* =============================== Botones =============================== */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--linea); background: #fff; color: var(--tinta); font-size: 13px; font-weight: 650; cursor: pointer; transition: all .12s; white-space: nowrap; text-decoration: none; }
.btn:hover { border-color: #D2CCE6; background: var(--fondo); }
.btn-primario { background: linear-gradient(180deg, #8B5CF6, #7C3AED); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(124,58,237,.26); }
.btn-primario:hover { background: linear-gradient(180deg, #8B5CF6, #6D28D9); border-color: transparent; }
.btn-cyan { background: var(--cyan); border-color: transparent; color: #fff; }
.btn-cyan:hover { background: #0E7490; border-color: transparent; }
.btn-ok { background: var(--ok); border-color: transparent; color: #fff; }
.btn-ok:hover { background: #166534; }
.btn-danger { background: #fff; border-color: var(--no-line); color: var(--no); }
.btn-danger:hover { background: var(--no-soft); border-color: var(--no-line); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--tinta-2); }
.btn-ghost:hover { background: var(--fondo); color: var(--tinta); border-color: transparent; }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 8px; gap: 5px; }
.btn-lg { padding: 11px 18px; font-size: 14px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.icon-btn { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--linea); background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--tinta-2); }
.icon-btn:hover { background: var(--fondo); color: var(--tinta); }

/* =============================== KPI / cards =============================== */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.kpi-grid.k3 { grid-template-columns: repeat(3, 1fr); } .kpi-grid.k5 { grid-template-columns: repeat(5, 1fr); }
.kpi { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 16px; box-shadow: var(--sombra-sm); position: relative; overflow: hidden; }
.kpi::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--kpi-c, var(--brand)); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.kpi-label { font-size: 12px; color: var(--tinta-2); font-weight: 600; }
.kpi-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--fondo); color: var(--kpi-c, var(--brand)); }
.kpi-valor { font-size: 26px; font-weight: 800; letter-spacing: -.6px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 11.5px; color: var(--tinta-3); margin-top: 5px; line-height: 1.4; }
.card { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra-sm); margin-bottom: 16px; overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--linea-2); flex-wrap: wrap; }
.card-title { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 750; margin: 0; }
.card-title .ct-ico { color: var(--brand); display: grid; place-items: center; }
.card-title small { font-weight: 500; color: var(--tinta-3); font-size: 12px; }
.card-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card-body { padding: 16px; }
.card-body.flush { padding: 0; }
.card-foot { padding: 11px 16px; border-top: 1px solid var(--linea-2); background: var(--fondo); font-size: 12.5px; color: var(--tinta-2); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-2-1 { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 16px; }
.grid-1-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 16px; }
.grid-2 > .card, .grid-3 > .card, .grid-2-1 > .card, .grid-1-2 > .card { margin-bottom: 0; }
.mb { margin-bottom: 16px; } .mt { margin-top: 14px; } .mt-sm { margin-top: 8px; } .mb0 { margin-bottom: 0 !important; }
@media (max-width: 1180px) { .grid-2, .grid-3, .grid-2-1, .grid-1-2 { grid-template-columns: 1fr; } .kpi-grid, .kpi-grid.k5 { grid-template-columns: repeat(2, 1fr); } }

/* =============================== Tablas =============================== */
.tabla-wrap { width: 100%; overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla thead th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .45px; color: var(--tinta-3); font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--linea); background: var(--fondo); white-space: nowrap; }
.tabla tbody td { padding: 11px 14px; border-bottom: 1px solid var(--linea-2); vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr.click { cursor: pointer; }
.tabla tbody tr.click:hover td { background: #FAF8FF; }
.tabla .num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla .fuerte { font-weight: 720; }
.tabla-compacta tbody td { padding: 8px 12px; } .tabla-compacta thead th { padding: 8px 12px; }
.cell-main { font-weight: 650; color: var(--tinta); }
.cell-sub { font-size: 11.5px; color: var(--tinta-3); margin-top: 2px; }
.mono { font-family: var(--mono); font-size: 12px; }
.tnum { font-variant-numeric: tabular-nums; }

/* =============================== Badges / chips / tags =============================== */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; line-height: 1.5; }
.badge svg { width: 12px; height: 12px; }
.badge-gris { background: var(--linea-2); color: var(--tinta-2); }
.badge-brand { background: var(--brand-soft); color: var(--brand-2); }
.badge-cyan { background: var(--cyan-soft); color: #0E7490; }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-no { background: var(--no-soft); color: var(--no); }
.badge-amber { background: var(--humano-soft); color: var(--humano-ink); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-pink { background: var(--pink-soft); color: var(--pink); }
.badge-outline { background: #fff; border: 1px solid var(--linea); color: var(--tinta-2); }
.badge-lg { font-size: 12px; padding: 4px 11px; }
.tag-ia { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--brand-2); background: var(--brand-soft); border: 1px solid var(--brand-line); padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.tag-humano { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--humano-ink); background: var(--humano-soft); border: 1px solid var(--humano-line); padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.pill-src { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 650; color: var(--tinta-2); background: var(--fondo); border: 1px solid var(--linea); padding: 2px 8px; border-radius: 7px; white-space: nowrap; }
.chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--linea); background: #fff; color: var(--tinta-2); padding: 5px 11px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.chip:hover { border-color: #D2CCE6; color: var(--tinta); }
.chip-on, .chip-on:hover { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.chip-n { font-size: 10.5px; background: rgba(23,19,43,.07); border-radius: 10px; padding: 0 6px; }
.chip-on .chip-n { background: rgba(255,255,255,.2); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.flag { font-size: 14px; line-height: 1; }

/* =============================== Avatares =============================== */
.av { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 750; font-size: 12px; color: #fff; background: linear-gradient(135deg, #A78BFA, #7C3AED); position: relative; }
.av.xs { width: 22px; height: 22px; font-size: 9.5px; } .av.sm { width: 28px; height: 28px; font-size: 11px; } .av.md { width: 38px; height: 38px; font-size: 14px; } .av.lg { width: 48px; height: 48px; font-size: 17px; }
.av.persona { background: linear-gradient(135deg, #64748B, #334155); }
.av.u-a { background: linear-gradient(135deg, #F59E0B, #D97706); } .av.u-b { background: linear-gradient(135deg, #38BDF8, #0284C7); } .av.u-c { background: linear-gradient(135deg, #F472B6, #DB2777); } .av.u-d { background: linear-gradient(135deg, #34D399, #059669); } .av.u-e { background: linear-gradient(135deg, #818CF8, #4F46E5); } .av.u-f { background: linear-gradient(135deg, #FB7185, #E11D48); }
.av.prov { background: #fff; color: var(--tinta-2); border: 1px solid var(--linea); }
.av-ia { position: absolute; bottom: -3px; right: -5px; font-size: 8px; font-weight: 800; background: #fff; color: var(--brand); border: 1.5px solid var(--brand); border-radius: 6px; padding: 0 3px; line-height: 12px; letter-spacing: .2px; }
.av.agent-sourcing { background: linear-gradient(135deg, #A78BFA, #7C3AED); } .av.agent-p2p { background: linear-gradient(135deg, #22D3EE, #0891B2); }
.av-stack { display: flex; } .av-stack .av { border: 2px solid #fff; margin-left: -7px; } .av-stack .av:first-child { margin-left: 0; }

/* Canales */
.ch { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: #fff; flex: none; }
.ch.lg { width: 30px; height: 30px; border-radius: 8px; } .ch.xs { width: 17px; height: 17px; border-radius: 5px; }
.ch.whatsapp { background: #25D366; } .ch.slack { background: #4A154B; } .ch.email { background: #0F6CBD; } .ch.teams { background: #5B5FC7; }
.ch.llamada { background: #7C3AED; } .ch.ariba { background: #0A6ED1; } .ch.sap { background: #0A6ED1; } .ch.web { background: #0891B2; } .ch.linkedin { background: #0A66C2; } .ch.portal { background: #64748B; } .ch.papel { background: #78716C; } .ch.facturae { background: #B91C1C; }

/* =============================== Feed / timeline =============================== */
.feed { display: flex; flex-direction: column; }
.feed-item { display: flex; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--linea-2); }
.feed-item:last-child { border-bottom: 0; }
.feed-body { flex: 1; min-width: 0; }
.feed-tit { font-size: 13px; line-height: 1.45; }
.feed-tit b { font-weight: 720; }
.feed-meta { font-size: 11.5px; color: var(--tinta-3); margin-top: 4px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.link { font-size: 12px; font-weight: 650; color: var(--brand); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; }
.link:hover { text-decoration: underline; }
.timeline { position: relative; }
.tl-item { position: relative; padding: 0 0 16px 28px; }
.tl-item::before { content: ""; position: absolute; left: 9px; top: 20px; bottom: -2px; width: 2px; background: var(--linea); }
.tl-item:last-child::before { display: none; }
.tl-node { position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--linea); color: var(--tinta-3); z-index: 1; }
.tl-node.ia { border-color: var(--brand); color: var(--brand); } .tl-node.humano { border-color: var(--humano); color: var(--humano); }
.tl-node.ok { border-color: var(--ok); background: var(--ok); color: #fff; } .tl-node.no { border-color: var(--no); background: var(--no); color: #fff; }
.tl-node.prov { border-color: var(--cyan); color: var(--cyan); }
.tl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tl-tit { font-size: 13px; font-weight: 650; }
.tl-time { font-size: 11px; color: var(--tinta-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-desc { font-size: 12.5px; color: var(--tinta-2); margin-top: 4px; line-height: 1.55; }

/* =============================== Callouts =============================== */
.callout { display: flex; gap: 11px; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--linea); background: var(--fondo); align-items: flex-start; }
.callout.ia { background: var(--brand-soft); border-color: var(--brand-line); }
.callout.info { background: var(--info-soft); border-color: var(--info-line); }
.callout.ok { background: var(--ok-soft); border-color: var(--ok-line); }
.callout.warn { background: var(--humano-soft); border-color: var(--humano-line); }
.callout.no { background: var(--no-soft); border-color: var(--no-line); }
.callout-ico { flex: none; margin-top: 1px; }
.callout.ia .callout-ico { color: var(--brand); } .callout.ok .callout-ico { color: var(--ok); } .callout.warn .callout-ico { color: var(--humano); } .callout.info .callout-ico { color: var(--info); } .callout.no .callout-ico { color: var(--no); }
.callout-tit { font-weight: 720; font-size: 13.5px; }
.callout-txt { font-size: 12.8px; color: var(--tinta-2); margin-top: 3px; line-height: 1.55; }
.ai-note { display: flex; gap: 10px; padding: 12px 14px; border-radius: 0 10px 10px 0; background: var(--brand-soft); border-left: 3px solid var(--brand); font-size: 13px; line-height: 1.6; color: var(--tinta); }
.ai-note .who { font-weight: 750; color: var(--brand-2); white-space: nowrap; }

/* =============================== Score =============================== */
.score { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.score-track { flex: 1; height: 7px; border-radius: 20px; background: var(--linea); overflow: hidden; min-width: 50px; }
.score-fill { height: 100%; border-radius: 20px; background: var(--brand); }
.score-num { font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums; }
.bar-track { height: 8px; border-radius: 20px; background: var(--linea); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 20px; background: var(--brand); }

/* =============================== ROI ribbon =============================== */
.roi-ribbon { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--sombra-sm); }
.roi-cell { padding: 15px 18px; border-right: 1px solid var(--linea-2); position: relative; }
.roi-cell:last-child { border-right: 0; }
.roi-val { font-size: 25px; font-weight: 800; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
.roi-lbl { font-size: 12px; color: var(--tinta-2); margin-top: 3px; font-weight: 600; }
.roi-sub { font-size: 11px; color: var(--tinta-3); margin-top: 2px; }
@media (max-width: 900px) { .roi-ribbon { grid-template-columns: 1fr 1fr; } }

/* =============================== Home · equipo de agentes =============================== */
.team-card { border: 1px solid var(--linea); border-radius: 14px; padding: 15px; background: #fff; margin-bottom: 12px; }
.team-card:last-child { margin-bottom: 0; }
.team-top { display: flex; gap: 12px; align-items: center; }
.team-name { font-weight: 800; font-size: 15px; }
.team-role { font-size: 12px; color: var(--tinta-2); }
.team-status { font-size: 12px; color: var(--tinta-2); display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.team-ch { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.ch-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 5px; border-radius: 9px; border: 1px solid var(--linea); background: #fff; font-size: 12px; font-weight: 650; color: var(--tinta); cursor: pointer; }
.ch-btn:hover { background: var(--fondo); border-color: #D2CCE6; }
.team-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--linea-2); font-size: 12px; color: var(--tinta-2); }

/* =============================== HITL =============================== */
.hitl { display: flex; flex-direction: column; gap: 10px; }
.hitl-card { border: 1px solid var(--linea); border-radius: 12px; padding: 14px 15px; background: #fff; display: flex; gap: 13px; align-items: flex-start; position: relative; }
.hitl-card.prio::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--humano); }
.hitl-main { flex: 1; min-width: 0; }
.hitl-tit { font-size: 14px; font-weight: 750; margin-top: 5px; }
.hitl-desc { font-size: 12.5px; color: var(--tinta-2); margin-top: 3px; line-height: 1.5; }
.hitl-rec { font-size: 12.5px; margin-top: 8px; display: flex; gap: 8px; align-items: flex-start; color: var(--tinta); }
.hitl-rec b { color: var(--brand-2); }
.hitl-acc { display: flex; gap: 7px; margin-top: 11px; flex-wrap: wrap; align-items: center; }
.hitl-side { flex: none; text-align: right; min-width: 110px; }
.hitl-amount { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hitl-meta { font-size: 11px; color: var(--tinta-3); margin-top: 2px; }
.hitl-sent { font-size: 11px; color: var(--tinta-3); display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; }

/* =============================== Kanban (Trello) =============================== */
.board-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.kan-col { flex: 0 0 292px; background: #EDEBF5; border-radius: 14px; display: flex; flex-direction: column; max-height: calc(100vh - 240px); border: 1px solid #E4E1EF; }
.kan-col.drop { background: #E6DEFB; border-color: var(--brand-3); }
.kan-head { padding: 11px 12px 8px; display: flex; align-items: center; gap: 8px; }
.kan-head .kh-name { font-weight: 750; font-size: 13px; flex: 1; }
.kan-head .kh-n { font-size: 11.5px; font-weight: 700; color: var(--tinta-2); background: rgba(255,255,255,.7); padding: 1px 8px; border-radius: 10px; }
.kan-sub { font-size: 11px; color: var(--tinta-3); padding: 0 12px 8px; display: flex; justify-content: space-between; }
.kan-cards { padding: 0 8px 8px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 40px; }
.kan-card { background: #fff; border-radius: 11px; box-shadow: 0 1px 1px rgba(23,19,43,.08), 0 1px 3px rgba(23,19,43,.06); padding: 10px 11px 10px; cursor: pointer; border: 1px solid transparent; transition: box-shadow .12s, transform .12s, border-color .12s; position: relative; }
.kan-card:hover { box-shadow: 0 6px 16px rgba(23,19,43,.12); border-color: var(--brand-line); }
.kan-card.human { border-left: 3px solid var(--humano); }
.kan-card.dragging { opacity: .45; transform: rotate(2deg); }
.kan-labels { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 7px; }
.kan-label { height: 8px; min-width: 36px; border-radius: 4px; }
.kan-label.txt { height: auto; min-width: 0; font-size: 10px; font-weight: 750; padding: 1px 7px; color: #fff; }
.kan-title { font-size: 13px; font-weight: 700; line-height: 1.35; }
.kan-id { font-size: 11px; color: var(--tinta-3); margin-top: 3px; font-family: var(--mono); }
.kan-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 12px; }
.kan-val { font-weight: 750; font-variant-numeric: tabular-nums; }
.kan-save { color: var(--ok); font-weight: 700; font-size: 11.5px; }
.kan-steps { display: flex; gap: 2px; margin-top: 8px; }
.kan-steps i { flex: 1; height: 4px; border-radius: 2px; background: var(--linea); }
.kan-steps i.done { background: var(--brand-3); } .kan-steps i.cur { background: var(--brand); } .kan-steps i.cur.h { background: var(--humano); }
.kan-step-txt { font-size: 11.5px; color: var(--tinta-2); margin-top: 6px; display: flex; align-items: center; gap: 5px; }
.kan-next { margin-top: 8px; font-size: 11.5px; padding: 6px 8px; border-radius: 8px; background: var(--fondo); display: flex; gap: 6px; align-items: flex-start; line-height: 1.35; }
.kan-next.h { background: var(--humano-soft); color: var(--humano-ink); font-weight: 600; }
.kan-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; }
.kan-counters { display: flex; gap: 9px; font-size: 11px; color: var(--tinta-3); }
.kan-counters span { display: inline-flex; align-items: center; gap: 3px; }
.kan-add { margin: 0 8px 8px; padding: 8px; border-radius: 9px; border: 0; background: transparent; color: var(--tinta-2); font-size: 12.5px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.kan-add:hover { background: rgba(255,255,255,.7); color: var(--tinta); }

/* =============================== Licitación · rail de pasos =============================== */
.t-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.t-title { font-size: 20px; font-weight: 800; letter-spacing: -.4px; margin: 6px 0 5px; }
.t-meta { font-size: 12.5px; color: var(--tinta-2); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.t-meta span { display: inline-flex; align-items: center; gap: 5px; }
.t-right { text-align: right; }
.t-val { font-size: 23px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rail { display: flex; gap: 0; overflow-x: auto; padding: 14px 10px 12px; }
.rail-step { flex: 1; min-width: 108px; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; cursor: pointer; padding: 0 4px; border: 0; background: none; }
.rail-step::before { content: ""; position: absolute; top: 16px; left: -50%; right: 50%; height: 3px; background: var(--linea); z-index: 0; }
.rail-step:first-child::before { display: none; }
.rail-step.done::before, .rail-step.cur::before { background: var(--brand-3); }
.rail-num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: #fff; border: 2px solid var(--linea); color: var(--tinta-3); position: relative; z-index: 1; transition: transform .12s; }
.rail-step:hover .rail-num { transform: scale(1.06); }
.rail-step.done .rail-num { background: var(--brand-3); border-color: var(--brand-3); color: #fff; }
.rail-step.cur .rail-num { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 0 0 5px rgba(124,58,237,.16); }
.rail-step.cur.h .rail-num { background: var(--humano); border-color: var(--humano); box-shadow: 0 0 0 5px rgba(217,119,6,.18); }
.rail-step.sel .rail-lbl { color: var(--brand-2); }
.rail-step.sel::after { content: ""; position: absolute; bottom: -12px; left: 18%; right: 18%; height: 3px; border-radius: 3px; background: var(--brand); }
.rail-lbl { font-size: 11.5px; font-weight: 700; margin-top: 7px; line-height: 1.25; color: var(--tinta); }
.rail-who { font-size: 10px; color: var(--tinta-3); margin-top: 2px; display: inline-flex; align-items: center; gap: 3px; }
.rail-step.done .rail-who { color: var(--ok); }
.step-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px; border-bottom: 1px solid var(--linea-2); flex-wrap: wrap; }
.step-badge { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; font-size: 16px; color: #fff; background: var(--brand); flex: none; }
.step-badge.h { background: var(--humano); }
.step-title { font-size: 17px; font-weight: 800; letter-spacing: -.3px; margin: 0; }
.step-desc { font-size: 12.8px; color: var(--tinta-2); margin-top: 3px; }
.section-t { font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .45px; color: var(--tinta-3); margin: 0 0 10px; display: flex; align-items: center; gap: 7px; }

/* Petición */
.doc-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; }
.doc-field { padding: 10px 13px; border-bottom: 1px solid var(--linea-2); border-right: 1px solid var(--linea-2); }
.doc-field:nth-child(2n) { border-right: 0; }
.doc-field .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .35px; color: var(--tinta-3); font-weight: 650; }
.doc-field .v { font-size: 13px; font-weight: 650; margin-top: 3px; }
.doc-field.full { grid-column: 1 / -1; border-right: 0; }
.checklist { display: flex; flex-direction: column; gap: 7px; }
.check-row { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.45; padding: 8px 10px; border-radius: 9px; background: var(--fondo); }
.check-row .ci { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.check-row.ok .ci { background: var(--ok); } .check-row.aviso .ci { background: var(--humano); } .check-row.no .ci { background: var(--no); }
.file-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--linea); border-radius: 9px; font-size: 12px; background: #fff; }
.file-ext { font-size: 9px; font-weight: 800; color: #fff; padding: 2px 4px; border-radius: 4px; text-transform: uppercase; }
.file-ext.pdf { background: #DC2626; } .file-ext.xlsx { background: #15803D; } .file-ext.docx { background: #2563EB; } .file-ext.xml { background: #D97706; }
.gate { border: 2px solid var(--humano-line); background: linear-gradient(180deg, #FFFBF3, #fff); border-radius: 14px; padding: 16px; }
.gate.done { border-color: var(--ok-line); background: linear-gradient(180deg, #F4FBF6, #fff); }
.gate-tit { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 8px; }

/* RFP */
.rfp-doc { border: 1px solid var(--linea); border-radius: 12px; background: #fff; }
.rfp-doc-bar { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--linea-2); background: var(--fondo); border-radius: 12px 12px 0 0; font-size: 12px; color: var(--tinta-2); font-weight: 600; }
.rfp-doc-body { padding: 16px 20px; max-height: 520px; overflow-y: auto; }
.rfp-sec { margin-bottom: 14px; }
.rfp-sec h5 { margin: 0 0 6px; font-size: 13.5px; }
.rfp-sec ul { margin: 0; padding-left: 18px; font-size: 12.8px; line-height: 1.7; color: var(--tinta-2); }
.lesson { display: flex; gap: 10px; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--linea); background: #fff; margin-bottom: 8px; }
.lesson-ico { flex: none; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; }
.lesson.riesgo .lesson-ico { background: var(--no-soft); color: var(--no); } .lesson.mejora .lesson-ico { background: var(--humano-soft); color: var(--humano); } .lesson.ok .lesson-ico { background: var(--ok-soft); color: var(--ok); }
.lesson-t { font-size: 13px; font-weight: 700; }
.lesson-d { font-size: 12.3px; color: var(--tinta-2); margin-top: 2px; line-height: 1.5; }
.lesson-f { font-size: 11px; color: var(--tinta-3); margin-top: 4px; }

/* Búsqueda de proveedores */
.funnel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.funnel-step { border-radius: 11px; padding: 12px; text-align: center; background: var(--brand-soft); border: 1px solid var(--brand-line); position: relative; }
.funnel-step:nth-child(2) { background: #EFE7FE; } .funnel-step:nth-child(3) { background: #E8DDFD; } .funnel-step:nth-child(4) { background: var(--brand); border-color: var(--brand); color: #fff; }
.funnel-n { font-size: 24px; font-weight: 800; }
.funnel-l { font-size: 11.5px; font-weight: 650; opacity: .85; }
.sup-card { border: 1px solid var(--linea); border-radius: 12px; background: #fff; margin-bottom: 10px; overflow: hidden; }
.sup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 11px 13px; }
.sup-name { font-weight: 750; font-size: 13.5px; display: flex; align-items: center; gap: 7px; }
.sup-det { font-size: 12px; color: var(--tinta-2); margin-top: 3px; line-height: 1.45; }
.sup-src { font-size: 11px; color: var(--tinta-3); margin-top: 4px; display: flex; align-items: center; gap: 5px; }
.sup-contacts { border-top: 1px solid var(--linea-2); background: var(--fondo); padding: 8px 13px; }
.contact-row { display: flex; gap: 9px; align-items: flex-start; padding: 6px 0; font-size: 12.3px; line-height: 1.45; }
.contact-row + .contact-row { border-top: 1px dashed var(--linea); }
.contact-when { font-size: 11px; color: var(--tinta-3); white-space: nowrap; min-width: 86px; font-variant-numeric: tabular-nums; }
.dir { font-size: 10px; font-weight: 750; padding: 0 5px; border-radius: 4px; }
.dir.out { background: var(--brand-soft); color: var(--brand-2); } .dir.in { background: var(--cyan-soft); color: #0E7490; }
.sup-motivo { font-size: 12px; color: var(--no); padding: 8px 13px; border-top: 1px solid var(--linea-2); background: #FFFAFA; }

/* Conversaciones con proveedores */
.conv-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 480px; }
.conv-list { border-right: 1px solid var(--linea-2); background: var(--fondo); }
.conv-item { padding: 11px 13px; border-bottom: 1px solid var(--linea-2); cursor: pointer; }
.conv-item:hover { background: #fff; }
.conv-item.on { background: #fff; box-shadow: inset 3px 0 0 var(--brand); }
.conv-item .ci-name { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.conv-item .ci-sub { font-size: 11px; color: var(--tinta-3); margin-top: 3px; display: flex; gap: 8px; }
.conv-thread { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.bub-row { display: flex; gap: 9px; max-width: 86%; }
.bub-row.agente, .bub-row.humano { align-self: flex-start; }
.bub-row.prov { align-self: flex-end; flex-direction: row-reverse; }
.bub { padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5; }
.bub-row.agente .bub { background: var(--brand-soft); border: 1px solid var(--brand-line); border-top-left-radius: 4px; }
.bub-row.humano .bub { background: var(--humano-soft); border: 1px solid var(--humano-line); border-top-left-radius: 4px; }
.bub-row.prov .bub { background: #fff; border: 1px solid var(--linea); border-top-right-radius: 4px; }
.bub-meta { font-size: 10.5px; color: var(--tinta-3); margin-bottom: 3px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bub-row.prov .bub-meta { justify-content: flex-end; }
.escalado { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: var(--humano-ink); background: #fff; border: 1px solid var(--humano-line); padding: 1px 7px; border-radius: 6px; margin-top: 6px; }
.call-card { border: 1px solid var(--brand-line); background: linear-gradient(180deg, #FBF9FF, #F6F1FF); border-radius: 12px; padding: 12px 14px; }
.call-top { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; flex-wrap: wrap; }
.call-wave { display: inline-flex; gap: 2px; align-items: center; height: 14px; }
.call-wave i { width: 2px; background: var(--brand-3); border-radius: 2px; display: block; }
.call-sum { font-size: 12.8px; color: var(--tinta); margin-top: 7px; line-height: 1.55; }
.call-points { margin: 7px 0 0; padding-left: 18px; font-size: 12.3px; color: var(--tinta-2); line-height: 1.6; }
.adenda { display: flex; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--info-soft); border: 1px solid var(--info-line); font-size: 12.5px; margin-bottom: 7px; }
.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pc-item { font-size: 12.3px; padding: 6px 9px; border-radius: 7px; margin-bottom: 5px; line-height: 1.45; }
.pc-item.pro { background: var(--ok-soft); color: #14532D; } .pc-item.con { background: var(--no-soft); color: #7F1D1D; }

/* Negociación */
.target-row { display: grid; grid-template-columns: 1.4fr .8fr 24px .8fr 1.6fr; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linea-2); font-size: 13px; }
.target-row:last-child { border-bottom: 0; }
.price-old { color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.price-new { color: var(--ok); font-weight: 800; font-variant-numeric: tabular-nums; }
.approval-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linea-2); }
.approval-row:last-child { border-bottom: 0; }

/* Contrato */
.ins, ins { background: #E6F6EC; color: #0E6B3D; text-decoration: none; border-radius: 3px; padding: 0 2px; }
.del, del { background: #FCEAEA; color: #B23838; text-decoration: line-through; border-radius: 3px; padding: 0 2px; }
.clause { padding: 12px 0; border-bottom: 1px solid var(--linea-2); }
.clause:last-child { border-bottom: 0; }
.clause-n { font-weight: 750; font-size: 13px; margin-bottom: 5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.clause-body { font-size: 12.8px; line-height: 1.7; }
.clause-note { font-size: 11.8px; color: var(--brand-2); background: var(--brand-soft); border-radius: 8px; padding: 6px 10px; margin-top: 7px; display: flex; gap: 7px; align-items: flex-start; }
.pending-panel { text-align: center; padding: 38px 20px; color: var(--tinta-2); }
.pending-ico { width: 54px; height: 54px; border-radius: 15px; background: var(--fondo); border: 1px dashed var(--linea); display: grid; place-items: center; margin: 0 auto 12px; color: var(--tinta-3); }

/* =============================== P2P =============================== */
.pipe { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; background: #fff; border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; margin-bottom: 16px; box-shadow: var(--sombra-sm); }
.pipe-step { padding: 12px 14px; position: relative; cursor: pointer; border-right: 1px solid var(--linea-2); }
.pipe-step:last-child { border-right: 0; }
.pipe-step:hover { background: var(--fondo); }
.pipe-step.on { background: var(--brand-soft); }
.pipe-k { font-size: 11px; font-weight: 700; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .4px; display: flex; align-items: center; gap: 6px; }
.pipe-n { font-size: 22px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }
.pipe-s { font-size: 11.5px; color: var(--tinta-2); }
.pipe-step.h .pipe-n { color: var(--humano); }
.pipe-arrow { position: absolute; right: -8px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: #fff; border: 1px solid var(--linea); border-radius: 50%; display: grid; place-items: center; z-index: 2; color: var(--tinta-3); }
.src-card { border: 1px solid var(--linea); border-radius: 12px; padding: 13px; background: #fff; }
.src-top { display: flex; align-items: center; gap: 10px; }
.src-name { font-weight: 750; font-size: 13.5px; }
.src-det { font-size: 11.5px; color: var(--tinta-3); }
.src-vol { font-size: 20px; font-weight: 800; margin-top: 10px; font-variant-numeric: tabular-nums; }
.src-foot { font-size: 11px; color: var(--tinta-3); margin-top: 6px; display: flex; justify-content: space-between; gap: 6px; }
.dropzone { display: block; border: 2px dashed var(--brand-line); border-radius: 14px; background: linear-gradient(180deg, #FCFAFF, #F7F2FF); padding: 26px; text-align: center; cursor: pointer; transition: all .15s; }
.dropzone:hover, .dropzone.over { border-color: var(--brand); background: var(--brand-soft); }
.dz-ico { width: 48px; height: 48px; border-radius: 13px; background: var(--brand); color: #fff; display: grid; place-items: center; margin: 0 auto 10px; box-shadow: 0 8px 18px rgba(124,58,237,.3); }
.dz-tit { font-weight: 750; font-size: 14.5px; }
.dz-sub { font-size: 12.5px; color: var(--tinta-2); margin-top: 4px; }
.upq { margin-top: 12px; }
.upq-row { display: grid; grid-template-columns: 34px minmax(0, 1.5fr) auto minmax(0, 1.3fr); gap: 10px; align-items: center; padding: 9px 12px; border: 1px solid var(--linea); border-radius: 10px; background: #fff; margin-bottom: 7px; font-size: 12.5px; }
.upq-steps { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; }
.upq-step { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: var(--linea-2); color: var(--tinta-3); }
.upq-step.done { background: var(--ok-soft); color: var(--ok); } .upq-step.run { background: var(--brand-soft); color: var(--brand-2); }
.spin { width: 12px; height: 12px; border: 2px solid var(--brand-line); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.extract { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; }
.inv-paper { border: 1px solid var(--linea); border-radius: 10px; background: #fff; box-shadow: 0 10px 30px rgba(23,19,43,.08); padding: 22px 22px 18px; font-size: 11.5px; color: #2A2440; position: relative; }
.inv-paper .ip-top { display: flex; justify-content: space-between; align-items: flex-start; }
.inv-paper .ip-logo { font-weight: 800; font-size: 15px; color: #1F3A68; letter-spacing: -.2px; }
.inv-paper .ip-title { font-size: 17px; font-weight: 800; letter-spacing: 1px; color: #1F3A68; }
.inv-paper table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.inv-paper th { text-align: left; font-size: 9.5px; text-transform: uppercase; color: #6B6585; border-bottom: 1px solid #DDD; padding: 4px; }
.inv-paper td { padding: 5px 4px; border-bottom: 1px solid #F0F0F0; }
.hl { background: rgba(124,58,237,.12); outline: 1.5px solid rgba(124,58,237,.55); border-radius: 3px; padding: 0 2px; }
.conf { display: flex; align-items: center; gap: 6px; min-width: 88px; }
.conf .bar-track { flex: 1; height: 5px; }

/* Verificaciones 4 vías */
.docs-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.doc-card { border: 1px solid var(--linea); border-radius: 12px; padding: 11px 12px; background: #fff; cursor: pointer; border-top: 3px solid var(--dc); position: relative; }
.doc-card:hover { box-shadow: var(--sombra); }
.doc-card.missing { background: repeating-linear-gradient(135deg, #fff, #fff 8px, #FDF3F3 8px, #FDF3F3 16px); }
.doc-card .dc-k { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--dc); display: flex; justify-content: space-between; align-items: center; }
.doc-card .dc-num { font-size: 14px; font-weight: 750; margin-top: 5px; font-family: var(--mono); }
.doc-card .dc-sub { font-size: 11.5px; color: var(--tinta-3); margin-top: 2px; }
.d-po { --dc: #7C3AED; } .d-gr { --dc: #D97706; } .d-fac { --dc: #0891B2; } .d-con { --dc: #DB2777; }
.chk-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.8px; }
.chk-table th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; font-weight: 800; padding: 10px 12px; text-align: left; background: var(--fondo); border-bottom: 1px solid var(--linea); white-space: nowrap; }
.chk-table th.c-po { color: #7C3AED; box-shadow: inset 0 3px 0 #7C3AED; } .chk-table th.c-gr { color: #D97706; box-shadow: inset 0 3px 0 #D97706; } .chk-table th.c-fac { color: #0891B2; box-shadow: inset 0 3px 0 #0891B2; } .chk-table th.c-con { color: #DB2777; box-shadow: inset 0 3px 0 #DB2777; }
.chk-table td { padding: 10px 12px; border-bottom: 1px solid var(--linea-2); vertical-align: middle; }
.chk-table tr.err td { background: #FFF8F8; } .chk-table tr.warn td { background: #FFFCF5; }
.chk-table td.cell-bad { color: var(--no); font-weight: 750; }
.chk-table td.cell-good { color: var(--ok); font-weight: 650; }
.chk-name { font-weight: 700; }
.compara { display: flex; gap: 3px; margin-top: 4px; flex-wrap: wrap; }
.cmp { font-size: 9.5px; font-weight: 800; padding: 1px 5px; border-radius: 4px; color: #fff; text-transform: uppercase; letter-spacing: .3px; }
.cmp.po { background: #7C3AED; } .cmp.gr { background: #D97706; } .cmp.fac { background: #0891B2; } .cmp.con { background: #DB2777; }
.verdict { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 750; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.verdict.ok { background: var(--ok-soft); color: var(--ok); } .verdict.error { background: var(--no-soft); color: var(--no); } .verdict.aviso { background: var(--humano-soft); color: var(--humano-ink); } .verdict.na { background: var(--linea-2); color: var(--tinta-3); }
.v-nota { font-size: 11.5px; color: var(--tinta-2); margin-top: 3px; }
.match-summary { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.big-verdict { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; }
.big-verdict.error { background: var(--no-soft); border: 1px solid var(--no-line); } .big-verdict.ok { background: var(--ok-soft); border: 1px solid var(--ok-line); } .big-verdict.aviso { background: var(--humano-soft); border: 1px solid var(--humano-line); }
.bv-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex: none; }
.big-verdict.error .bv-ico { background: var(--no); } .big-verdict.ok .bv-ico { background: var(--ok); } .big-verdict.aviso .bv-ico { background: var(--humano); }

/* Decisión de pago */
.pay { border: 2px solid var(--brand-line); border-radius: 16px; background: linear-gradient(180deg, #FCFAFF, #fff); overflow: hidden; margin-bottom: 16px; }
.pay-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--brand-line); flex-wrap: wrap; }
.pay-step { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--brand-2); }
.pay-title { font-size: 17px; font-weight: 800; margin-top: 2px; }
.pay-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; padding: 14px 16px; }
.pay-opt { border: 1.5px solid var(--linea); border-radius: 12px; padding: 12px; background: #fff; cursor: pointer; position: relative; transition: all .12s; text-align: left; }
.pay-opt:hover { border-color: var(--brand-4); }
.pay-opt.sel { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(124,58,237,.14); }
.pay-opt .po-rec { position: absolute; top: -9px; right: 10px; font-size: 10px; font-weight: 800; background: var(--brand); color: #fff; padding: 1px 8px; border-radius: 6px; }
.pay-opt .po-t { font-weight: 750; font-size: 13.5px; display: flex; align-items: center; gap: 7px; }
.pay-opt .po-amt { font-size: 19px; font-weight: 800; margin-top: 6px; font-variant-numeric: tabular-nums; }
.pay-opt .po-d { font-size: 12px; color: var(--tinta-2); margin-top: 4px; line-height: 1.45; }
.pay-opt .po-warn { font-size: 11.5px; color: var(--no); margin-top: 6px; display: flex; gap: 5px; }
.pay-foot { display: flex; gap: 10px; align-items: flex-end; padding: 12px 16px 16px; flex-wrap: wrap; }
.pay-foot .textarea { flex: 1; min-width: 240px; min-height: 42px; }
.pay-done { padding: 16px; }
.pay-done-top { display: flex; gap: 12px; align-items: center; }

/* =============================== Canales (WhatsApp · Slack · Teams · Email) =============================== */
.chat-app { display: grid; grid-template-columns: 330px minmax(0, 1fr); height: calc(100vh - 176px); min-height: 560px; background: #fff; border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; box-shadow: var(--sombra-sm); }
.chat-side { border-right: 1px solid var(--linea); display: flex; flex-direction: column; min-height: 0; }
.chat-side-top { padding: 12px; border-bottom: 1px solid var(--linea-2); }
.chat-list { overflow-y: auto; flex: 1; }
.chat-item { display: flex; gap: 10px; padding: 11px 12px; cursor: pointer; border-bottom: 1px solid var(--linea-2); position: relative; }
.chat-item:hover { background: var(--fondo); }
.chat-item.on { background: var(--brand-soft); }
.chat-item .ci-ch { position: absolute; left: 34px; top: 34px; }
.ci-body { flex: 1; min-width: 0; }
.ci-top { display: flex; justify-content: space-between; gap: 6px; }
.ci-t { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-h { font-size: 11px; color: var(--tinta-3); white-space: nowrap; }
.ci-p { font-size: 12px; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ci-unread { min-width: 18px; height: 18px; border-radius: 9px; background: #25D366; color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; padding: 0 5px; }
.chat-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.chat-top { display: flex; align-items: center; gap: 11px; padding: 10px 16px; border-bottom: 1px solid var(--linea); min-height: 58px; }
.chat-top .ct-t { font-weight: 750; font-size: 14px; }
.chat-top .ct-s { font-size: 11.5px; color: var(--tinta-3); }
.chat-scroll { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; }
.chat-compose { border-top: 1px solid var(--linea); padding: 10px 12px; display: flex; gap: 8px; align-items: center; background: #fff; }
.chat-compose .input { background: var(--fondo); border-radius: 22px; padding: 10px 16px; }
.send-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff; background: var(--brand); flex: none; }
.day-sep { align-self: center; font-size: 11px; font-weight: 650; color: var(--tinta-2); background: rgba(255,255,255,.9); padding: 3px 10px; border-radius: 8px; margin: 8px 0; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.typing { display: inline-flex; gap: 3px; } .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--tinta-3); animation: typing 1s infinite; display: block; } .typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
/* WhatsApp */
.wa .chat-scroll { background-color: #EFEAE2; background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px); background-size: 16px 16px; }
.wa .chat-top { background: #F0F2F5; }
.wa-msg { max-width: 72%; padding: 6px 9px 4px; border-radius: 8px; font-size: 13.5px; line-height: 1.45; box-shadow: 0 1px .5px rgba(11,20,26,.13); white-space: pre-wrap; word-wrap: break-word; position: relative; }
.wa-msg.in { align-self: flex-start; background: #fff; border-top-left-radius: 0; }
.wa-msg.out { align-self: flex-end; background: #D9FDD3; border-top-right-radius: 0; }
.wa-time { float: right; font-size: 10.5px; color: #667781; margin: 6px 0 -2px 10px; display: inline-flex; align-items: center; gap: 3px; }
.wa-ticks { color: #53BDEB; }
.wa-name { font-size: 12px; font-weight: 700; color: #7C3AED; margin-bottom: 1px; }
.wa .chat-compose { background: #F0F2F5; } .wa .chat-compose .input { background: #fff; } .wa .send-btn { background: #00A884; }
/* Slack */
.sl-msg { display: flex; gap: 10px; padding: 6px 4px; border-radius: 6px; }
.sl-msg:hover { background: #F8F8F8; }
.sl-av { width: 36px; height: 36px; border-radius: 8px; }
.sl-name { font-weight: 800; font-size: 14px; color: #1D1C1D; }
.sl-app { font-size: 10px; font-weight: 700; background: #EEE; color: #616061; padding: 0 4px; border-radius: 3px; margin-left: 5px; }
.sl-time { font-size: 11.5px; color: #616061; margin-left: 7px; }
.sl-txt { font-size: 14px; color: #1D1C1D; line-height: 1.46; white-space: pre-wrap; margin-top: 1px; }
.sl-list { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; }
.sl-list-item { display: flex; gap: 8px; align-items: center; border: 1px solid #E8E8E8; border-left: 4px solid var(--c); border-radius: 6px; padding: 7px 10px; font-size: 13px; background: #fff; }
.sl-react { display: inline-flex; gap: 4px; margin-top: 5px; font-size: 12px; background: #EFF6FC; border: 1px solid #1D9BD1; color: #1264A3; border-radius: 12px; padding: 0 7px; }
.sl .chat-top { background: #fff; } .sl .send-btn { background: #007A5A; border-radius: 6px; }
/* Teams */
.tm .chat-top { background: #EBEBF5; } .tm .chat-scroll { background: #F5F5F5; }
.tm-msg { max-width: 76%; display: flex; gap: 8px; }
.tm-msg.out { align-self: flex-end; flex-direction: row-reverse; }
.tm-bubble { background: #fff; border-radius: 6px; padding: 8px 12px; font-size: 13.5px; line-height: 1.45; box-shadow: 0 1px 2px rgba(0,0,0,.08); white-space: pre-wrap; }
.tm-msg.out .tm-bubble { background: #E8EBFA; }
.tm-head { font-size: 11.5px; color: #616161; margin-bottom: 2px; }
.tm-head b { color: #242424; font-weight: 700; margin-right: 6px; }
.tm .send-btn { background: #5B5FC7; border-radius: 6px; }
/* Email */
.em-view { padding: 20px 26px; overflow-y: auto; flex: 1; }
.em-subject { font-size: 20px; font-weight: 700; margin: 0 0 14px; }
.em-from { display: flex; gap: 11px; align-items: flex-start; padding-bottom: 12px; border-bottom: 1px solid var(--linea-2); }
.em-body { font-size: 14px; line-height: 1.65; padding-top: 14px; white-space: pre-wrap; }
.em-table { border-collapse: collapse; width: 100%; margin: 10px 0 14px; font-size: 12.8px; white-space: normal; }
.em-table th { background: #F3F2F1; text-align: left; padding: 7px 9px; border: 1px solid #E1DFDD; font-weight: 700; }
.em-table td { padding: 7px 9px; border: 1px solid #E1DFDD; }
/* Tarjeta de aprobación dentro de un chat */
.appr { margin-top: 7px; background: #fff; border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; white-space: normal; }
.appr-body { padding: 9px 11px; font-size: 13px; }
.appr-btns { display: flex; border-top: 1px solid var(--linea-2); }
.appr-btn { flex: 1; padding: 9px 6px; border: 0; background: #fff; font-weight: 700; font-size: 12.5px; color: #027EB5; cursor: pointer; border-right: 1px solid var(--linea-2); }
.appr-btn:last-child { border-right: 0; }
.appr-btn:hover { background: var(--fondo); }
.appr-done { padding: 8px 11px; font-size: 12px; font-weight: 700; color: var(--ok); background: var(--ok-soft); display: flex; gap: 6px; align-items: center; }
.appr-done.no { color: var(--no); background: var(--no-soft); }

/* =============================== Autonomía =============================== */
.auton-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--linea-2); }
.auton-row:last-child { border-bottom: 0; }
.auton-info { flex: 1; min-width: 0; }
.auton-tit { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.auton-desc { font-size: 12.5px; color: var(--tinta-2); margin-top: 4px; line-height: 1.5; max-width: 640px; }
.auton-meta { font-size: 11.5px; color: var(--tinta-3); margin-top: 7px; display: flex; gap: 14px; flex-wrap: wrap; }
.auton-meta b { color: var(--tinta-2); }
.seg { display: inline-flex; background: var(--fondo); border: 1px solid var(--linea); border-radius: 10px; padding: 3px; gap: 2px; flex: none; }
.seg-opt { padding: 6px 12px; border-radius: 8px; border: 0; background: transparent; cursor: pointer; font-size: 12px; font-weight: 650; color: var(--tinta-2); white-space: nowrap; display: flex; align-items: center; gap: 5px; }
.seg-opt:hover:not(:disabled) { color: var(--tinta); background: #fff; }
.seg-opt:disabled { opacity: .38; cursor: not-allowed; }
.seg-opt.on-manual { background: var(--humano); color: #fff; } .seg-opt.on-copilot { background: var(--brand); color: #fff; } .seg-opt.on-auto { background: var(--ok); color: #fff; }
.auton-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.auton-badge.manual { background: var(--humano-soft); color: var(--humano-ink); } .auton-badge.copilot { background: var(--brand-soft); color: var(--brand-2); } .auton-badge.auto { background: var(--ok-soft); color: var(--ok); }
.switch { position: relative; width: 38px; height: 22px; flex: none; cursor: pointer; display: inline-block; }
.switch input { display: none; }
.switch .track { position: absolute; inset: 0; border-radius: 20px; background: var(--linea); transition: background .16s; }
.switch .thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .16s; }
.switch input:checked + .track { background: var(--brand); }
.switch input:checked + .track + .thumb { left: 19px; }

/* =============================== Consola =============================== */
.console { background: #14102A; border-radius: 12px; overflow: hidden; border: 1px solid #241B45; }
.console-head { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid #241B45; }
.console-dots { display: flex; gap: 6px; } .console-dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.console-title { font-size: 12px; color: #A99BDB; font-family: var(--mono); }
.console-body { padding: 12px 14px; font-family: var(--mono); font-size: 12px; line-height: 1.75; color: #CFC6F0; max-height: 420px; overflow-y: auto; }
.console-line { display: flex; gap: 10px; }
.console-time { color: #6F64A0; flex: none; }
.console-sys { color: #C4B5FD; font-weight: 600; flex: none; }
.console-line.ok .console-sys { color: #6EE7B7; } .console-line.humano .console-sys { color: #FCD34D; }
.console-cursor { display: inline-block; width: 8px; height: 15px; background: #A78BFA; vertical-align: middle; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.run-bar { display: flex; align-items: center; gap: 14px; padding: 13px 15px; border: 1px solid var(--brand-line); background: linear-gradient(180deg, #FCFAFF, #F5EFFF); border-radius: 12px; margin-bottom: 16px; }
.run-ico { flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--brand); color: #fff; display: grid; place-items: center; }
.run-tit { font-size: 13.5px; font-weight: 720; }
.run-sub { font-size: 12px; color: var(--tinta-2); margin-top: 2px; }
.run-track { height: 6px; border-radius: 20px; background: var(--brand-line); overflow: hidden; margin-top: 8px; }
.run-fill { height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-3)); border-radius: 20px; transition: width .4s ease; }

/* =============================== Modal / documentos =============================== */
.modal-bg { position: fixed; inset: 0; background: rgba(20,15,40,.5); backdrop-filter: blur(3px); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal { background: var(--panel); border-radius: 16px; box-shadow: var(--sombra-lg); width: 100%; max-width: 720px; overflow: hidden; animation: pop .18s; }
.modal.wide { max-width: 980px; }
@keyframes pop { from { transform: translateY(8px) scale(.99); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--linea-2); }
.modal-title { font-size: 16px; font-weight: 750; display: flex; align-items: center; gap: 10px; }
.modal-body { padding: 18px; max-height: 70vh; overflow-y: auto; }
.modal-foot { padding: 12px 18px; border-top: 1px solid var(--linea-2); display: flex; justify-content: flex-end; gap: 8px; background: var(--fondo); flex-wrap: wrap; }
.docx { border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; }
.docx-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--fondo); border-bottom: 1px solid var(--linea-2); font-size: 11.5px; color: var(--tinta-2); font-weight: 600; }
.docx-paper { padding: 20px 22px; background: #fff; font-size: 13px; line-height: 1.6; }
.docx-paper h4 { margin: 0 0 3px; font-size: 15px; }
.kv { display: grid; grid-template-columns: 180px 1fr; gap: 6px 16px; margin: 12px 0; font-size: 13px; }
.kv .k { color: var(--tinta-3); } .kv .v { font-weight: 600; }
.stamp { display: inline-flex; align-items: center; gap: 7px; border: 2px solid currentColor; border-radius: 8px; padding: 3px 10px; font-weight: 800; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; transform: rotate(-2deg); }

/* =============================== Toasts =============================== */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; width: 360px; max-width: calc(100vw - 40px); }
.toast { background: #fff; border: 1px solid var(--linea); border-left: 4px solid var(--brand); border-radius: 12px; box-shadow: var(--sombra); padding: 12px 13px; display: flex; gap: 10px; animation: slidein .22s; cursor: pointer; }
.toast.ok { border-left-color: var(--ok); } .toast.humano { border-left-color: var(--humano); } .toast.cyan { border-left-color: var(--cyan); }
@keyframes slidein { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.toast-tit { font-size: 13px; font-weight: 750; }
.toast-txt { font-size: 12px; color: var(--tinta-2); margin-top: 2px; line-height: 1.45; }

/* =============================== Varios =============================== */
.muted { color: var(--tinta-3); } .strong { font-weight: 720; } .right { text-align: right; } .center { text-align: center; } .nowrap { white-space: nowrap; }
.row { display: flex; align-items: center; gap: 8px; } .row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .wrap { flex-wrap: wrap; } .col { display: flex; flex-direction: column; gap: 6px; }
.hr { height: 1px; background: var(--linea-2); border: 0; margin: 14px 0; }
.empty { text-align: center; padding: 40px 20px; color: var(--tinta-3); }
.legend { display: flex; flex-direction: column; gap: 7px; }
.legend-item { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.legend-swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.legend-val { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.antes-ahora { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--linea-2); font-size: 13px; }
.antes-ahora:last-child { border-bottom: 0; }
.aa-old { color: var(--tinta-3); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.aa-new { color: var(--ok); font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .sidebar { display: none; } .contenido { padding: 16px 12px 60px; } .chat-app { grid-template-columns: 1fr; } .chat-side { display: none; } .docs-strip, .funnel, .pipe { grid-template-columns: 1fr 1fr; } .conv-layout { grid-template-columns: 1fr; } .conv-list { display: none; } }
.inv-paper td:not(:first-child), .inv-paper th:not(:first-child) { white-space: nowrap; }

/* =============================== v3 · Hilos de email =============================== */
.contact-row.clickable { cursor: pointer; border-radius: 8px; margin: 0 -6px; padding-left: 6px; padding-right: 6px; transition: background .12s; }
.contact-row.clickable:hover { background: #fff; box-shadow: 0 0 0 1px var(--brand-line); }
.contact-open { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--brand); opacity: .75; white-space: nowrap; }
.contact-row.clickable:hover .contact-open { opacity: 1; }
.bub.clickable { cursor: pointer; transition: box-shadow .12s; }
.bub.clickable:hover { box-shadow: 0 0 0 2px var(--brand-line); }
.bub-open { margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--brand); display: flex; align-items: center; gap: 4px; opacity: .7; }
.bub.clickable:hover .bub-open { opacity: 1; }
.hilo-head { display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: var(--fondo); border: 1px solid var(--linea-2); border-radius: 12px; margin-bottom: 12px; }
.em-thread { display: flex; flex-direction: column; gap: 12px; }
.em-card { border: 1px solid var(--linea); border-radius: 12px; background: #fff; overflow: hidden; scroll-margin-top: 10px; }
.em-card.hl { border-color: var(--brand-3); box-shadow: 0 0 0 3px rgba(124,58,237,.14); }
.em-card-head { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid var(--linea-2); background: #FCFBFE; font-size: 13px; }
.em-card-when { text-align: right; flex: none; }
.em-card-sub { padding: 10px 16px 0; font-weight: 750; font-size: 14px; }
.em-card-body { padding: 8px 16px 14px; font-size: 13.5px; line-height: 1.65; color: #26213A; }
.em-card-att { padding: 10px 16px; border-top: 1px dashed var(--linea); gap: 6px; color: var(--tinta-3); }
.em-call { display: flex; gap: 8px; align-items: center; padding: 9px 12px; border: 1px dashed var(--brand-line); border-radius: 10px; font-size: 12.8px; cursor: pointer; background: var(--brand-soft); }

/* =============================== v3 · Transcripción de llamadas =============================== */
.call-hero { padding: 12px 14px; border: 1px solid var(--brand-line); background: linear-gradient(180deg, #FBF9FF, #F4EEFF); border-radius: 12px; margin-bottom: 10px; }
.player { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 12px; background: #fff; margin-bottom: 14px; position: sticky; top: -18px; z-index: 3; box-shadow: 0 4px 10px rgba(23,19,43,.05); }
.player-btn { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--brand); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; box-shadow: 0 6px 14px rgba(124,58,237,.3); }
.player-wave { flex: 1; height: 30px; display: flex; align-items: center; gap: 2px; position: relative; cursor: pointer; overflow: hidden; }
.player-wave i { flex: 1; background: #D9CFF6; border-radius: 2px; display: block; min-width: 2px; }
.player-prog { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(124,58,237,.18); border-right: 2px solid var(--brand); transition: width .5s ease; pointer-events: none; }
.player-time { font-size: 12px; color: var(--tinta-2); white-space: nowrap; }
.tr-list { display: flex; flex-direction: column; gap: 2px; }
.tr-turn { display: flex; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer; transition: background .15s; border-left: 3px solid transparent; }
.tr-turn:hover { background: var(--fondo); }
.tr-turn.ia .tr-meta b { color: var(--brand-2); }
.tr-turn.in .tr-meta b { color: #0E7490; }
.tr-turn.alm .tr-meta b { color: var(--humano-ink); }
.tr-turn.on { background: var(--brand-soft); border-left-color: var(--brand); }
.tr-turn.past .tr-txt { color: var(--tinta-2); }
.tr-body { flex: 1; min-width: 0; }
.tr-meta { display: flex; gap: 8px; align-items: baseline; font-size: 12px; }
.tr-meta .mono { color: var(--tinta-3); font-size: 11px; }
.tr-txt { font-size: 13.5px; line-height: 1.6; margin-top: 2px; }

/* =============================== v3 · Investigación P2P =============================== */
.inv-causa { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 9px 12px; background: var(--fondo); border: 1px solid var(--linea-2); border-radius: 10px; margin: 10px 0 14px; }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.inv-q { border: 1px solid var(--linea); border-radius: 12px; padding: 12px; background: #fff; cursor: pointer; display: flex; flex-direction: column; transition: box-shadow .12s, border-color .12s; }
.inv-q:hover { border-color: var(--brand-line); box-shadow: var(--sombra); }
.inv-q-motivo { display: flex; gap: 6px; font-size: 12.3px; color: var(--tinta-2); margin-top: 9px; line-height: 1.45; }
.inv-q-motivo svg { color: var(--brand); margin-top: 2px; }
.inv-q-concl { display: flex; gap: 6px; font-size: 12.5px; margin-top: 8px; padding: 7px 9px; border-radius: 8px; background: var(--ok-soft); color: #14532D; line-height: 1.45; }
.inv-q-concl svg { color: var(--ok); margin-top: 1px; }
.inv-q-wait { display: flex; gap: 6px; font-size: 12.3px; margin-top: 8px; padding: 7px 9px; border-radius: 8px; background: var(--humano-soft); color: var(--humano-ink); line-height: 1.45; }
.inv-q-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 10px; font-size: 11.5px; gap: 8px; }
.inv-ask { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--linea); }
.tm-hilo { background: #F5F5F5; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.sl-hilo { border: 1px solid var(--linea); border-radius: 12px; padding: 8px; background: #fff; }

/* =============================== v3 · Configuración =============================== */
.sel-sm { padding: 5px 8px; font-size: 12.5px; background: #fff; min-width: 190px; }
.sel-sm.chg, .select.chg { border-color: var(--humano); box-shadow: 0 0 0 2px rgba(217,119,6,.12); }
.row-off td { opacity: .5; }
.perm-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.perm-table th, .perm-table td { border-bottom: 1px solid var(--linea-2); }
.perm-table thead th { background: var(--fondo); padding: 8px 4px; vertical-align: bottom; position: sticky; top: 0; z-index: 1; }
.perm-name { text-align: left; padding: 8px 14px !important; min-width: 260px; position: sticky; left: 0; background: #fff; z-index: 1; }
thead .perm-name { background: var(--fondo) !important; font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--tinta-3); }
.perm-role { width: 86px; }
.perm-role div { font-size: 10.5px; font-weight: 750; color: var(--tinta-2); line-height: 1.25; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.perm-group td { background: var(--brand-soft); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--brand-ink); padding: 7px 14px; }
.perm-cell { text-align: center; cursor: pointer; color: var(--tinta-3); transition: background .1s; }
.perm-cell:hover { background: var(--fondo); }
.perm-cell.on { color: var(--ok); }
.perm-cell.on svg { background: var(--ok-soft); border-radius: 6px; padding: 3px; width: 22px; height: 22px; }
.perm-cell.chg { background: #FFF8EC; box-shadow: inset 0 0 0 1px var(--humano-line); }
.perm-off { font-weight: 700; opacity: .5; }
.wf-map { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
.wf-map-step { border: 1px solid var(--linea); background: #fff; border-radius: 11px; padding: 9px 8px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wf-map-step:hover { border-color: var(--brand-line); }
.wf-map-step.on { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(124,58,237,.12); }
.wf-map-n { width: 22px; height: 22px; border-radius: 7px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.wf-map-n.h { background: var(--humano); }
.wf-map-name { font-size: 11.5px; font-weight: 750; line-height: 1.25; }
.wf-map-sub { font-size: 10px; color: var(--tinta-3); }
.wf-step { background: #fff; border: 1px solid var(--linea); border-radius: 14px; margin-bottom: 10px; overflow: hidden; scroll-margin-top: 80px; }
.wf-step.open { box-shadow: var(--sombra-sm); }
.wf-head { display: flex; gap: 12px; align-items: center; padding: 13px 16px; cursor: pointer; }
.wf-head:hover { background: var(--fondo); }
.wf-head-r { display: flex; align-items: center; gap: 10px; color: var(--tinta-3); flex: none; }
.wf-body { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 18px; padding: 4px 16px 16px; border-top: 1px solid var(--linea-2); padding-top: 14px; }
.wf-acts { display: flex; flex-direction: column; gap: 6px; }
.wf-act { display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; border: 1px solid var(--linea-2); border-radius: 10px; background: var(--fondo); }
.wf-act.off { opacity: .55; }
.wf-act.chg { border-color: var(--humano-line); background: #FFFBF3; }
.wf-num { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--linea); display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--tinta-2); flex: none; }
.wf-act-txt { font-size: 13px; line-height: 1.5; }
.wf-input { padding: 6px 9px; font-size: 13px; background: #fff; }
.wf-cond { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 650; color: var(--info); background: var(--info-soft); border: 1px solid var(--info-line); padding: 1px 7px; border-radius: 6px; }
.wf-add { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, 1.2fr) auto; gap: 6px; margin-top: 10px; align-items: center; }
.wf-add .input, .wf-add .select { padding: 7px 9px; font-size: 12.5px; background: #fff; }
.wf-side { border-left: 1px solid var(--linea-2); padding-left: 16px; }
.wf-ul { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.65; color: var(--tinta-2); }
@media (max-width: 1180px) { .wf-map { grid-template-columns: repeat(3, 1fr); } .wf-body { grid-template-columns: 1fr; } .wf-side { border-left: 0; padding-left: 0; } .wf-add { grid-template-columns: 1fr 1fr; } }

.ch.veeva { background: #F28C28; } .ch.icertis { background: #1E4E9C; }
.wf-input { resize: vertical; line-height: 1.45; min-height: 34px; font-family: inherit; }

/* =============================== Documentos de proveedores =============================== */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 12px; padding: 14px 16px 16px; }
.doc-card { border: 1px solid var(--linea); border-radius: 12px; background: #fff; overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s, transform .15s; }
.doc-card:hover { border-color: var(--brand-line); box-shadow: var(--sombra); transform: translateY(-1px); }
.doc-thumb { position: relative; height: 150px; overflow: hidden; background: linear-gradient(180deg, #EFEDF6, #E6E3F0); cursor: pointer; padding: 12px 20px 0; border-bottom: 1px solid var(--linea-2); }
.doc-thumb svg { display: block; width: 100%; height: auto; border-radius: 3px 3px 0 0; box-shadow: 0 2px 10px rgba(23,19,43,.16); }
.doc-thumb-pags { position: absolute; right: 8px; bottom: 8px; font-size: 10.5px; font-weight: 700; color: #fff; background: rgba(23,19,43,.62); padding: 2px 7px; border-radius: 6px; }
.doc-thumb-open { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #fff; background: rgba(76,29,149,.55); opacity: 0; transition: opacity .15s; }
.doc-thumb:hover .doc-thumb-open { opacity: 1; }
.doc-info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.doc-name { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; min-width: 0; }
.doc-name .file-ext, .doc-mini .file-ext, .vw-file .file-ext { flex: none; }
.doc-name > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-prov { display: flex; align-items: center; gap: 6px; font-size: 12.5px; flex-wrap: wrap; }

.doc-meta { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--tinta-3); flex-wrap: wrap; }
.doc-actions { display: flex; gap: 4px; margin-top: auto; padding-top: 2px; }
.file-ext.lg { font-size: 11px; padding: 6px 7px; border-radius: 7px; }
.doc-minis { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.doc-mini { display: inline-flex; align-items: center; gap: 5px; font-size: 11.3px; font-weight: 600; color: var(--tinta-2); background: #fff; border: 1px solid var(--linea); border-radius: 7px; padding: 2px 7px 2px 3px; cursor: pointer; white-space: nowrap; }
.doc-mini:hover { border-color: var(--brand-line); color: var(--brand-ink); background: var(--brand-soft); }
.doc-mini .file-ext { font-size: 8px; padding: 1px 3px; }

.modal.visor { max-width: 1380px; height: calc(100vh - 56px); display: flex; flex-direction: column; margin-top: -24px; }
.vw-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 16px; border-bottom: 1px solid var(--linea-2); }
.vw-file { display: flex; align-items: center; gap: 11px; min-width: 0; }
.vw-name { font-size: 14.5px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--tinta-2); margin-top: 3px; }
.icon-btn[disabled] { opacity: .4; cursor: default; }
.icon-btn.sm { width: 26px; height: 26px; border-radius: 7px; }
.vw-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 112px minmax(0, 1fr) 350px; background: #E9E7F0; }
.vw-thumbs { position: relative; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; background: #F3F2F8; border-right: 1px solid var(--linea); }
.vw-thumb { position: relative; cursor: pointer; border-radius: 4px; border: 2px solid transparent; padding: 2px; }
.vw-thumb svg { display: block; width: 100%; height: auto; box-shadow: 0 1px 5px rgba(23,19,43,.18); }
.vw-thumb span { display: block; text-align: center; font-size: 10.5px; font-weight: 650; color: var(--tinta-3); margin-top: 3px; }
.vw-thumb.on { border-color: var(--brand); background: var(--brand-soft); }
.vw-thumb.on span { color: var(--brand-ink); }
.vw-center { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.vw-tool { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 14px; background: #fff; border-bottom: 1px solid var(--linea); }
.vw-app { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.vw-app.pdf { color: #B91C1C; background: #FDEEEE; } .vw-app.docx { color: #1D4ED8; background: #EDF3FE; }
.vw-pg { font-size: 12px; font-weight: 650; color: var(--tinta-2); }
.vw-zoom { min-width: 48px; text-align: center; font-size: 12px; font-weight: 650; color: var(--tinta-2); }
.vw-scroll { position: relative; flex: 1; overflow: auto; padding: 18px 22px 30px; scroll-behavior: auto; }
.vw-pages { --z: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.vw-page { width: calc(680px * var(--z)); max-width: none; flex: none; background: #fff; box-shadow: 0 2px 14px rgba(23,19,43,.16); border-radius: 2px; }
.vw-page svg { display: block; width: 100%; height: auto; }
.vw-page.flash { animation: vwflash 1.3s ease-out; }
@keyframes vwflash { 0% { box-shadow: 0 0 0 4px rgba(124,58,237,.75), 0 2px 14px rgba(23,19,43,.16); } 100% { box-shadow: 0 0 0 4px rgba(124,58,237,0), 0 2px 14px rgba(23,19,43,.16); } }
.vw-side { overflow-y: auto; background: #fff; border-left: 1px solid var(--linea); padding: 14px 14px 18px; }
.vw-side-h { display: flex; gap: 9px; align-items: flex-start; min-width: 0; padding-bottom: 11px; margin-bottom: 11px; border-bottom: 1px solid var(--linea-2); }
.vw-cmp { border: 1px solid var(--ok-line); background: #F6FBF8; border-radius: 10px; padding: 6px 10px; margin-bottom: 11px; }
.vw-cmp-row { display: grid; grid-template-columns: 1fr 74px 74px 18px; gap: 6px; align-items: center; font-size: 12px; padding: 4px 0; }
.vw-cmp-row b { text-align: right; font-variant-numeric: tabular-nums; }
.vw-cmp-row.th { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-3); font-weight: 700; padding-bottom: 2px; }
.vw-cmp-row.th span:nth-child(2), .vw-cmp-row.th span:nth-child(3) { text-align: right; }
.vw-ok, .vw-warn { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.vw-ok { background: var(--ok); } .vw-warn { background: var(--humano); }
.vw-annex { display: flex; gap: 7px; align-items: flex-start; font-size: 12.3px; color: var(--tinta-2); background: var(--fondo); border: 1px solid var(--linea); border-radius: 10px; padding: 8px 10px; margin-bottom: 11px; }
.vw-annex a { color: var(--brand); font-weight: 650; cursor: pointer; word-break: break-all; }
.vw-fields { display: flex; flex-direction: column; gap: 7px; }
.vw-field { border: 1px solid var(--linea); border-radius: 10px; padding: 8px 10px; cursor: pointer; transition: border-color .12s, background .12s; }
.vw-field:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.vw-f-lbl { font-size: 11px; color: var(--tinta-3); font-weight: 600; }
.vw-f-val { font-size: 13px; font-weight: 650; margin-top: 2px; line-height: 1.4; }
.vw-f-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; }
.vw-f-src { display: inline-flex; align-items: center; gap: 4px; font-size: 10.8px; color: var(--brand); font-weight: 600; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vw-f-conf { font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 6px; flex: none; }
.vw-f-conf.hi { color: var(--ok); background: var(--ok-soft); } .vw-f-conf.mid { color: var(--brand-ink); background: var(--brand-soft); } .vw-f-conf.lo { color: var(--humano-ink); background: var(--humano-soft); }
.vw-meta > div { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 5px 0; border-bottom: 1px dashed var(--linea-2); }
.vw-meta span { color: var(--tinta-3); } .vw-meta b { font-weight: 600; text-align: right; }
.vw-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--linea-2); background: var(--fondo); flex-wrap: wrap; }
@media (max-width: 1100px) { .vw-body { grid-template-columns: minmax(0, 1fr) 300px; } .vw-thumbs { display: none; } }
@media (max-width: 760px) { .modal.visor { height: auto; margin-top: 0; } .vw-body { grid-template-columns: 1fr; } .vw-scroll { max-height: 70vh; } .vw-page { width: calc(100% * var(--z)); } .vw-side { border-left: 0; border-top: 1px solid var(--linea); } }
.doc-thumb-clase { position: absolute; left: 8px; bottom: 8px; }
.doc-thumb-clase .badge { box-shadow: 0 1px 4px rgba(23,19,43,.15); }
.vw-side-h > div { flex: 1; min-width: 0; }
.vw-side .section-t.mt { margin-top: 16px; }