/* ============================================================================
   Vista CRM — design system v4 · "Bento"
   ----------------------------------------------------------------------------
   MISMA API que v3: no cambió ni un nombre de clase ni de variable. Solo los
   valores y el tratamiento visual. Reemplaza assets/vista-crm.css y las ~75
   páginas cambian de aspecto sin tocar su HTML ni su JavaScript.

   Lo que cambia respecto a v3:
   · Fondo tintado (#EAEEF5) con tarjetas blancas de esquinas generosas.
   · Fuera las sombras difusas: las tarjetas se separan por color, no por sombra.
   · Sidebar BLANCO con la ficha activa en navy (antes sidebar navy).
   · Cifras mucho más grandes y siempre tabulares.
   · Fuera los chips pastel detrás de los iconos: monocromos sobre neutro.
   · Fuera los degradados azul→morado y los glows azules de los botones.
   · Radios 12 / 16 / 20 · el bento respira a 14px de gap.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  /* Marca — sin cambios, es la paleta actual de Vista */
  --vista-blue:#2E63F6; --vista-blue-mid:#6E9BF5; --vista-blue-deep:#1D48C8;
  --vista-navy:#0F1117; --vista-navy-soft:#333A47;
  --azul-soft:#A9C5F7; --azul-pale:#DCE8FB;

  /* Superficies y texto */
  --surface:#ffffff; --surface-subtle:#EAEEF5; --surface-quiet:#F3F6FB;
  --text-primary:#0F1117; --text-secondary:#333A47; --text-weak:#535B6B; --text-mute:#8A93A6;
  --border:#EDF1F7; --border-strong:#DDE4F0; --border-navy:#242833;

  /* Sidebar — ahora claro. Los nombres se conservan porque app.js los usa. */
  --nav-bg:#ffffff; --nav-panel:#F3F6FB; --nav-line:#EDF1F7;
  --nav-text:#333A47; --nav-mute:#8A93A6; --nav-section:#A9B2C4;

  /* Semántico */
  --success:#0E9E6E; --success-bg:#E3F6EE;
  --warning:#B7791F; --warning-bg:#FBF0DA;
  --danger:#DA4A31;  --danger-bg:#FCEAE5;
  --info:#2E63F6;    --info-bg:#DCE8FB;

  --chart-1:#2E63F6; --chart-2:#DA4A31; --chart-3:#7C5CE6; --chart-4:#12A673; --chart-5:#B7791F;

  /* Los degradados quedan por compatibilidad, pero apuntan a color plano:
     cualquier página que los use deja de verse "generada". */
  --grad-vista:#2E63F6;
  --grad-blue:#2E63F6;

  /* Sin sombras difusas. Se conservan los nombres para no romper páginas. */
  --shadow-button:none;
  --shadow-soft:none;
  --shadow-card:none;
  --shadow-popover:0 0 0 1px rgba(15,17,23,.06),0 20px 50px -12px rgba(15,17,23,.18);
  --shadow-lift:none;

  --font-text:'Plus Jakarta Sans',-apple-system,'Segoe UI',system-ui,sans-serif;
  --font-display:'Plus Jakarta Sans',system-ui,sans-serif;
  --radius-sm:12px; --radius:16px; --radius-lg:20px; --radius-xl:22px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--surface-subtle);color:var(--text-primary);font-family:var(--font-text);-webkit-font-smoothing:antialiased;font-size:14px}
a{color:var(--vista-blue-deep);text-decoration:none}
a:hover{color:var(--vista-blue)}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit}
::selection{background:rgba(46,99,246,.16)}
:focus-visible{outline:2px solid rgba(46,99,246,.5);outline-offset:2px;border-radius:6px}

*{scrollbar-width:thin;scrollbar-color:#C6CFDE transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:#C6CFDE;border-radius:99px}
*::-webkit-scrollbar-thumb:hover{background:#AEB9CC}
*::-webkit-scrollbar-track{background:transparent}

/* Prefijos/sufijos de moneda — igual que v3 */
.cop-wrap,.pct-wrap,.eur-wrap{position:relative;display:inline-block;width:100%}
.cop-wrap .input{padding-left:34px}
.cop-wrap::before{content:"$";position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-mute);font-weight:700;pointer-events:none}
.pct-wrap .input{padding-right:30px}
.pct-wrap::after{content:"%";position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--text-mute);font-weight:700;pointer-events:none}
.eur-wrap .input{padding-right:48px}
.eur-wrap::after{content:"EUR";position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--text-mute);font-weight:700;font-size:12px;pointer-events:none}

/* ============================================================================
   Shell — el lienzo tintado y el sidebar como tarjeta flotante
   ========================================================================== */
.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh;padding:14px;gap:14px;background:var(--surface-subtle)}
.sidebar{background:var(--nav-bg);border-right:none;border-radius:var(--radius-lg);display:flex;flex-direction:column;padding:16px 14px;position:sticky;top:14px;height:calc(100vh - 28px);overflow-y:auto}
.sidebar .brand{display:flex;align-items:center;gap:11px;padding:2px 6px 16px;border-bottom:none;margin-bottom:2px}
.sidebar .brand img{width:34px;height:34px;border-radius:12px;box-shadow:none}
.sidebar .brand .wm{font-family:var(--font-display);font-weight:800;font-size:16.5px;letter-spacing:-.035em;color:var(--text-primary);line-height:1}
.sidebar .brand .sm{display:block;font-size:9px;font-weight:700;letter-spacing:.2em;color:var(--text-mute);text-transform:uppercase;margin-top:3px}
.sidebar nav{display:flex;flex-direction:column;gap:1px;flex:1}
.nav-section{font-size:9px;color:var(--nav-section);font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:16px 13px 6px}
.nav-item{display:flex;align-items:center;gap:11px;padding:8.5px 13px;border-radius:14px;font-size:13px;font-weight:500;color:var(--nav-text);cursor:pointer;border:none;transition:background 150ms var(--ease),color 150ms var(--ease);position:relative}
.nav-item .i{width:16px;height:16px;stroke-width:1.7;color:var(--nav-mute);flex:none;transition:color 150ms var(--ease)}
.nav-item:hover{background:var(--surface-quiet);color:var(--text-primary)}
.nav-item.active{background:var(--vista-navy);color:#fff;font-weight:700;padding:10px 13px}
.nav-item.active .i{color:var(--vista-blue-mid)}
.nav-item.active::before{content:none}
.nav-item.disabled{color:#B4BCCB;cursor:not-allowed}
.nav-item .pill{margin-left:auto;font-size:10.5px;background:var(--info-bg);border:none;color:var(--vista-blue-deep);padding:1.5px 7px;border-radius:7px;font-weight:700}
.nav-item.active .pill{background:rgba(255,255,255,.14);color:#fff}
.nav-item .nav-badge-atras{margin-left:auto;font-size:10px;font-weight:800;background:var(--danger);color:#fff;min-width:18px;height:18px;padding:0 5px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;line-height:1;box-shadow:none;animation:none}

/* Grupos colapsables */
.nav-group{display:flex;flex-direction:column;margin:1px 0}
.nav-grp-h{display:flex;align-items:center;gap:9px;width:100%;background:transparent;border:none;
  padding:14px 13px 6px;color:var(--nav-section);font-weight:700;font-size:9px;
  text-transform:uppercase;letter-spacing:.2em;cursor:pointer;border-radius:12px;
  font-family:inherit;transition:color 150ms var(--ease);text-align:left;line-height:1.2}
.nav-grp-h:hover{background:transparent;color:var(--text-weak)}
.nav-grp-h .ico{width:13px;height:13px;stroke-width:2;flex-shrink:0;color:var(--nav-section)}
.nav-grp-h .lbl{flex:1;letter-spacing:.2em}
.nav-grp-h .chev{width:12px;height:12px;stroke-width:2.5;flex-shrink:0;color:var(--nav-section);transition:transform 180ms var(--ease)}
.nav-group.open .nav-grp-h .chev{transform:rotate(90deg)}
.nav-grp-body{display:none;flex-direction:column;gap:1px;padding:0;margin-left:0;border-left:none}
.nav-group.open .nav-grp-body{display:flex}
.nav-grp-body .nav-item{padding:8px 13px;font-size:12.5px;border-radius:14px;margin-left:0}
.nav-grp-body .nav-item .i{width:15px;height:15px}
.nav-grp-body .nav-item.active{background:var(--vista-navy);color:#fff}

.sidebar .me{padding:12px;border:none;background:var(--surface-quiet);border-radius:var(--radius);margin-top:10px;display:flex;align-items:center;gap:10px}
.sidebar .me .who{flex:1;min-width:0}
.sidebar .me .name{font-size:12.5px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar .me .role{font-size:10.5px;color:var(--text-mute);margin-top:1px}
.sidebar .me .out{color:var(--text-mute);padding:5px;border-radius:9px;display:inline-flex;transition:all 150ms var(--ease)}
.sidebar .me .out:hover{background:#fff;color:var(--text-primary)}
.sidebar .me .out .i{width:15px;height:15px;stroke-width:1.8}

/* Main */
/* min-width:0 es obligatorio: .main es columna de un grid y por defecto no puede
   encoger por debajo del ancho de su contenido. Sin esto, una tabla ancha o una
   cifra larga estiran la página entera y aparece scroll horizontal en vez de que
   scrollee la tabla dentro de su tarjeta. */
.main{padding:2px 6px 40px;display:flex;flex-direction:column;gap:14px;max-width:1560px;width:100%;min-width:0;animation:none}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:24px}
.page-head .display{font-family:var(--font-display);font-weight:800;font-size:30px;letter-spacing:-.04em;line-height:1.05}
.page-head .sub{font-size:13px;color:var(--text-weak);margin-top:6px;max-width:70ch}
.page-head .right{display:flex;gap:10px;align-items:center}
.eyebrow{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--vista-blue)}

/* ============================================================================
   Botones — planos, radios grandes, sin glow
   ========================================================================== */
.btn{font-size:13px;font-weight:700;line-height:1.25;padding:12px 18px;border-radius:14px;border:none;display:inline-flex;align-items:center;gap:8px;transition:background 150ms var(--ease),color 150ms var(--ease);white-space:nowrap}
.btn:active{transform:none}
.btn .i{width:15px;height:15px;stroke-width:1.9}
.btn-primary{background:var(--vista-navy);color:#fff}
.btn-primary:hover{background:#000;transform:none}
.btn-blue{background:var(--vista-blue);color:#fff;box-shadow:none}
.btn-blue:hover{background:var(--vista-blue-deep);transform:none;box-shadow:none}
/* El diseño lo dibuja sin borde porque ahí siempre cae sobre el lienzo tintado.
   En el CRM real cae muchas veces sobre una tarjeta blanca y desaparecía, así
   que lleva un filo de 1.5px por dentro (no desplaza el texto). */
.btn-secondary{background:#fff;color:var(--text-secondary);box-shadow:inset 0 0 0 1.5px var(--border-strong)}
.btn-secondary:hover{background:#fff;color:var(--text-primary);box-shadow:inset 0 0 0 1.5px #C6CFDE;transform:none}
.btn-ghost,.btn.ghost{background:var(--info-bg);color:var(--vista-blue-deep);padding:10px 15px}
.btn-ghost:hover,.btn.ghost:hover{background:#CFE0FA;color:var(--vista-blue-deep)}
.btn-sm{font-size:12.5px;padding:9px 14px;border-radius:12px}
.btn-sm .i{width:14px;height:14px}
.btn-lg{font-size:14.5px;padding:14px 22px;border-radius:16px}

.icon-btn{width:42px;height:42px;border-radius:13px;background:var(--surface-quiet);border:none;display:inline-flex;align-items:center;justify-content:center;color:var(--text-secondary);box-shadow:none;transition:background 150ms var(--ease);position:relative}
.icon-btn:hover{background:#E8EDF6;color:var(--text-primary)}
.icon-btn .i{width:17px;height:17px;stroke-width:1.9}

/* ============================================================================
   Tarjetas — blanco, 22px, sin borde ni sombra
   ========================================================================== */
.card{background:#fff;border:none;border-radius:var(--radius-xl);box-shadow:none}
.card-pad{padding:20px 22px}
.card-head{padding:20px 22px 6px;border-bottom:none;display:flex;align-items:center;gap:12px}
.card-head .title{font-size:15px;font-weight:800;letter-spacing:-.02em}
.card-head .sub{font-size:12px;color:var(--text-mute);margin-left:auto;font-weight:600}

/* Variantes nuevas del bento — opt-in, no rompen nada */
.card.hero{background:var(--vista-navy);color:#fff}
.card.hero .title,.card.hero .value{color:#fff}
.card.tinted{background:var(--info-bg)}
.card.alert{background:var(--danger-bg)}
.bento{display:grid;gap:14px}
.bento-3{grid-template-columns:1.15fr 1fr 1fr}
.bento-4{grid-template-columns:repeat(4,1fr)}
.bento-split{grid-template-columns:1.6fr 1fr}

/* ============================================================================
   Inputs
   ========================================================================== */
.field{display:flex;flex-direction:column;gap:7px}
.field label, .lbl-field{font-size:12px;font-weight:700;color:var(--text-weak);letter-spacing:.01em}
.input{font-size:13.5px;padding:12px 14px;border:1.5px solid var(--border-strong);border-radius:14px;background:#fff;color:var(--text-primary);outline:none;transition:border-color 150ms var(--ease);width:100%}
.input:hover{border-color:#C6CFDE}
.input:focus{border-color:var(--vista-blue);box-shadow:none}
.input.with-icon{padding-left:38px}
.input-wrap{position:relative;display:flex;flex-direction:column;gap:7px}
.input-wrap .ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--text-mute);stroke-width:2;pointer-events:none}
.input-wrap.with-label .ico{top:auto;bottom:15px;transform:none}
.help{font-size:11.5px;color:var(--text-mute)}
.help.error{color:var(--danger)}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A93A6' stroke-width='1.8' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:38px;cursor:pointer}
textarea.input{resize:vertical;min-height:90px;font-family:inherit;line-height:1.55}

/* ============================================================================
   Badges — bloques suaves de esquina redonda, sin punto
   ========================================================================== */
.b{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:9px;display:inline-flex;align-items:center;gap:6px;line-height:1.35;white-space:nowrap}
.b .dot{display:none}
.b.pill{border-radius:99px}
.b-success{background:var(--success-bg);color:var(--success)}
.b-info{background:var(--info-bg);color:var(--vista-blue-deep)}
.b-warning{background:var(--warning-bg);color:var(--warning)}
.b-danger{background:var(--danger);color:#fff}
.b-neutral{background:var(--surface-quiet);color:var(--text-secondary)}
.modal > .b{white-space:normal !important;border-radius:0 !important;align-items:stretch !important;font:inherit;letter-spacing:normal;background:none;padding:0}

/* ============================================================================
   Avatares — fichas cuadradas redondeadas, no círculos
   ========================================================================== */
.avatar{border-radius:12px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;flex:none;font-family:var(--font-text);box-shadow:none}
.avatar.xs{width:22px;height:22px;font-size:9px;border-radius:7px}
.avatar.sm{width:28px;height:28px;font-size:10px;border-radius:9px}
.avatar.md{width:34px;height:34px;font-size:11.5px;border-radius:12px}
.avatar.lg{width:38px;height:38px;font-size:12.5px;border-radius:13px}
.avatar.xl{width:60px;height:60px;font-size:19px;border-radius:20px}
.av-stack{display:inline-flex;align-items:center}
.av-stack .avatar{box-shadow:0 0 0 2px #fff;margin-left:-7px;border-radius:99px}
.av-stack .avatar:first-child{margin-left:0}
.av-stack .av-more{background:var(--surface-quiet);color:var(--text-secondary)}

/* ============================================================================
   Tablas — sin líneas verticales, cabecera en versalitas, filas altas
   ========================================================================== */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-weight:700;color:#A9B2C4;padding:12px;border-bottom:none;font-size:10px;letter-spacing:.16em;text-transform:uppercase;background:transparent}
.tbl th:first-child{padding-left:0}
.tbl th:last-child{padding-right:0}
.tbl td{padding:12px;border-bottom:none;border-top:1px solid var(--border);color:var(--text-primary);vertical-align:middle}
.tbl td:first-child{padding-left:0}
.tbl td:last-child{padding-right:0}
.tbl tbody tr{cursor:pointer;transition:background 130ms var(--ease)}
.tbl tbody tr:hover td{background:#FAFBFE}
.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;font-weight:800}

/* ============================================================================
   KPI — la cifra manda
   ========================================================================== */
.kpi{background:#fff;border:none;border-radius:var(--radius-xl);padding:20px 22px;display:flex;flex-direction:column;gap:0;box-shadow:none;transition:none}
.kpi:hover{box-shadow:none;transform:none}
.kpi .label{font-size:10.5px;color:var(--text-mute);font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.kpi .value{font-family:var(--font-display);font-weight:800;font-size:34px;color:var(--text-primary);letter-spacing:-.045em;font-variant-numeric:tabular-nums;line-height:1;margin-top:12px}
.kpi .sublabel{font-size:12.5px;color:var(--text-weak);margin-top:8px}
.kpi.hero{background:var(--vista-navy)}
.kpi.hero .value{color:#fff;font-size:44px;letter-spacing:-.05em}
.kpi.hero .label,.kpi.hero .sublabel{color:var(--text-mute)}
/* El chip de icono de v3 (fondo pastel) se neutraliza: es lo que se veía infantil */
.kpi .kico{width:30px;height:30px;border-radius:10px;background:var(--surface-quiet) !important;display:inline-flex;align-items:center;justify-content:center}
.kpi .kico .i{width:15px;height:15px;color:var(--text-primary) !important;stroke-width:1.9}
.kpi.hero .kico{background:#242833 !important}
.kpi.hero .kico .i{color:#fff !important}

.delta{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:8px;margin-top:9px}
/* .kpi es flex en columna: sin esto el chip se estira de lado a lado */
.kpi > .delta,.kpi > .b{align-self:flex-start}
.delta.up{color:#fff;background:var(--vista-blue)}
.delta.down{color:#fff;background:var(--danger)}
.delta .i{width:12px;height:12px;stroke-width:2.5}

.bar{height:9px;border-radius:99px;background:var(--border)}
.bar>i{display:block;height:100%;border-radius:99px;background:var(--vista-blue)}

/* ============================================================================
   Tabs · segmented · breadcrumb
   ========================================================================== */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);padding:0 22px}
.tab{font-size:13px;color:var(--text-mute);padding:14px;border-bottom:2.5px solid transparent;font-weight:600;cursor:pointer;margin-bottom:-1px;transition:color 140ms var(--ease);background:transparent;border-radius:0}
.tab:hover{color:var(--text-primary);background:transparent}
.tab.active{color:var(--text-primary);border-color:var(--vista-blue);font-weight:800}

.seg{display:inline-flex;gap:2px;background:#fff;border-radius:14px;padding:4px}
.seg .seg-it{font-size:12.5px;font-weight:700;color:var(--text-mute);padding:8px 13px;border-radius:11px;cursor:pointer;transition:all 150ms var(--ease);border:none;background:transparent}
.seg .seg-it:hover{color:var(--text-primary)}
.seg .seg-it.active{background:var(--vista-navy);color:#fff}

/* Pestañas de módulo y de vista — mismo control segmentado que .seg.
   NO las quites: 19 páginas las usan y los selectores por rol de abajo son
   parte del control de permisos (esconden pestañas al contador). */
.mod-tabs,
.view-tabs{display:inline-flex;background:#fff;border-radius:14px;padding:4px;gap:2px;
  margin:0 0 12px;flex-wrap:wrap;align-self:flex-start}
.mod-tab,
.view-tab{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:11px;
  font-size:12.5px;font-weight:700;font-family:inherit;color:var(--text-mute);
  text-decoration:none;border:none;background:transparent;cursor:pointer;
  transition:background 150ms var(--ease),color 150ms var(--ease)}
.mod-tab:hover,
.view-tab:hover{color:var(--text-primary)}
.mod-tab.active,
.view-tab.active{background:var(--vista-navy);color:#fff;font-weight:700;box-shadow:none}
.mod-tab.active{cursor:default}
.mod-tab .i,
.view-tab .i{width:14px;height:14px;stroke-width:1.9}
body[data-rol="contador"] .mod-tab[data-oculta-contador]{display:none}
.mod-tab[data-solo-gerencia]{display:none}
body[data-rol="admin"] .mod-tab[data-solo-gerencia],
body[data-rol="gerente"] .mod-tab[data-solo-gerencia]{display:inline-flex}

.crumbs{font-size:12px;color:var(--text-mute);display:flex;align-items:center;gap:8px;font-weight:600}
.crumbs a{color:var(--text-mute)}
.crumbs a:hover{color:var(--text-primary)}
.crumbs .sep{color:#C6CCD8}
.crumbs .now{color:var(--text-primary);font-weight:700}

.empty-state{padding:56px 24px;text-align:center;color:var(--text-weak)}
.empty-state .ico{width:38px;height:38px;color:#C6CFDE;stroke-width:1.6;margin:0 auto 14px;display:block}
.empty-state .title{font-size:14.5px;color:var(--text-primary);font-weight:800;margin-bottom:5px}
.empty-state .sub{font-size:12.5px;color:var(--text-mute);max-width:340px;margin:0 auto;line-height:1.55}

.divider{height:1px;background:var(--border)}
.row-flex{display:flex;align-items:center;gap:12px}
.spacer{flex:1}

/* ============================================================================
   Patrones nuevos del rediseño — opt-in, se añaden al HTML cuando toque
   ========================================================================== */

/* Escalera de etapas (leads, expediente) */
.ladder{display:flex;gap:5px}
.ladder .step{flex:1}
.ladder .step .rail{height:7px;border-radius:99px;background:var(--border)}
.ladder .step .lbl{font-size:10.5px;font-weight:700;color:#A9B2C4;margin-top:8px}
.ladder .step.done .rail{background:var(--vista-navy)}
.ladder .step.done .lbl{color:var(--text-mute)}
.ladder .step.now{flex:1.3}
.ladder .step.now .rail{background:var(--vista-blue)}
.ladder .step.now .lbl{color:var(--vista-blue-deep);font-weight:800}
.ladder .step.next .rail{background:var(--azul-pale)}

/* Franja de la IA (propuesta de etapa, sugerencia de respuesta) */
.ai-strip{padding:16px 18px;background:var(--info-bg);border-radius:18px;display:flex;align-items:center;gap:16px}
.ai-strip .ai-ico{width:40px;height:40px;border-radius:14px;background:var(--vista-blue);display:inline-flex;align-items:center;justify-content:center;flex:none}
.ai-strip .ai-ico .i{width:19px;height:19px;color:#fff;stroke-width:1.9}
.ai-strip .ai-body{flex:1;min-width:0}
.ai-strip .ai-title{font-size:13.5px;font-weight:800;color:#12274F}
.ai-strip .ai-why{font-size:12.5px;color:#2A3F6B;margin-top:4px;line-height:1.45}
.ai-strip .ai-acts{display:flex;align-items:center;gap:8px;flex:none}

/* Próxima acción — la tarjeta navy que va arriba del detalle */
.next-action{background:var(--vista-navy);border-radius:18px;padding:18px 20px;display:flex;align-items:center;gap:16px;color:#fff}
.next-action .na-when{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-mute)}
.next-action .na-what{font-size:15px;font-weight:700;margin-top:8px}
.next-action .na-meta{font-size:12.5px;color:var(--text-mute);margin-top:5px}

/* Vista dividida maestro–detalle (leads, clientes, expedientes) */
.split{display:grid;grid-template-columns:346px 1fr;gap:14px;align-items:start}
/* Sin esto, una sola línea larga sin cortes (por ejemplo el resumen de la IA en
   el historial del teléfono, que va en nowrap) ensancha su columna por encima
   del ancho de la pantalla y arrastra la página entera: en el celular quedaba
   con barra horizontal y las tarjetas salidas del borde derecho. Los hijos de
   un grid arrancan en min-width:auto, o sea "nunca más angosto que mi
   contenido"; ponerlo en 0 los deja encogerse y que el texto se recorte, que es
   lo que ya pide cada fila con su overflow. */
.split > *{min-width:0}
.split .list{background:#fff;border-radius:var(--radius-xl);padding:16px 14px 10px;display:flex;flex-direction:column;gap:3px}
.split .list .row{display:flex;align-items:center;gap:11px;padding:12px;border-radius:var(--radius)}
.split .list .row:hover{background:var(--surface-quiet)}
.split .list .row.active{background:var(--vista-navy);color:#fff}
.split .list .row.active .sub{color:var(--text-mute)}
.split .list .row.alert{background:var(--danger-bg)}

/* Bandeja de chat */
.inbox{display:grid;grid-template-columns:306px 1fr 312px;gap:14px;height:812px}
.inbox .thread{background:#fff;border-radius:var(--radius-xl);display:flex;flex-direction:column;overflow:hidden}
.inbox .msgs{flex:1;min-height:0;padding:20px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;overflow-y:auto;background:#FBFCFE}
.msg{display:flex;gap:10px;max-width:74%}
.msg .bubble{background:var(--surface-quiet);border-radius:18px 18px 18px 6px;padding:12px 15px;font-size:13.5px;line-height:1.55;color:var(--text-primary)}
.msg .time{font-size:10.5px;color:#A9B2C4;margin-top:5px;padding-left:4px}
.msg.out{margin-left:auto;flex-direction:row-reverse}
.msg.out .bubble{background:var(--vista-blue);color:#fff;border-radius:18px 18px 6px 18px}
.msg.out .time{text-align:right;padding:0 4px 0 0}
.composer{display:flex;align-items:center;gap:11px;background:var(--surface-quiet);border-radius:var(--radius);padding:12px 14px}

/* ============================================================================
   MOBILE — se conservan los mismos nombres que v3
   ========================================================================== */
.mobile-header{display:none}
.sidebar-backdrop{display:none}
.tbl-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

@media (max-width:1100px){
  .main{padding:2px 4px 36px}
  .page-head .display{font-size:26px}
  .kpi-row,.bento-3,.bento-4{grid-template-columns:repeat(2,1fr) !important}
  .inbox{grid-template-columns:280px 1fr;height:auto}
  .inbox > *:last-child{display:none}
}

@media (max-width:900px){
  .app{display:block;padding:0}
  .sidebar{
    position:fixed;top:0;left:0;height:100vh;width:284px;border-radius:0;
    background:var(--nav-bg);transform:translateX(-100%);transition:transform 220ms var(--ease);
    z-index:1001;box-shadow:0 0 48px rgba(15,17,23,.18);
  }
  .sidebar.open{transform:translateX(0)}
  .sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(15,17,23,.4);opacity:0;pointer-events:none;transition:opacity 200ms ease;z-index:1000}
  .sidebar-backdrop.show{opacity:1;pointer-events:auto}

  .mobile-header{
    display:flex;align-items:center;gap:12px;background:rgba(234,238,245,.92);backdrop-filter:blur(10px);
    border-bottom:none;padding:12px 14px;position:sticky;top:0;z-index:100;
  }
  .mobile-header .ham-btn{width:42px;height:42px;border-radius:13px;border:none;background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-primary);flex:none;box-shadow:none}
  .mobile-header .ham-btn .i{width:19px;height:19px;stroke-width:2}
  .mobile-header .brand{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
  .mobile-header .brand img{width:28px;height:28px;flex:none;border-radius:10px}
  .mobile-header .brand .wm{font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--text-primary)}
  .mobile-header .brand .sm{font-size:8.5px;font-weight:700;letter-spacing:.2em;color:var(--text-mute);text-transform:uppercase;margin-top:1px;display:block}

  .main{padding:14px 14px 40px;gap:12px;max-width:none}
  .page-head{flex-direction:column;align-items:flex-start;gap:14px}
  .page-head .display{font-size:24px;line-height:1.1}
  .page-head .right{width:100%;flex-wrap:wrap;gap:8px}
  .page-head .right .btn{flex:1;min-width:130px;justify-content:center}

  .kpi-row,.stats-strip,.grid-2,.grid-3,.grid-4,.layout-2col,.layout,.exp-head,.info-grid,
  .chart-grid,.perf-grid,.cot-layout,.doc-types,.bento-3,.bento-4,.bento-split,.split,
  [class*="kpi-grid"]{grid-template-columns:1fr !important}
  .kpi .value{font-size:28px}
  .kpi.hero .value{font-size:34px}

  .stats-strip{display:grid;grid-template-columns:repeat(2,1fr) !important;gap:10px;background:transparent;border:none}
  .stats-strip .stat{background:#fff;border:none;border-radius:var(--radius);padding:14px 16px}
  .stat .val{font-size:22px;font-weight:800;letter-spacing:-.04em}

  .tbl{font-size:12.5px;white-space:nowrap}
  .tbl th,.tbl td{padding:11px 12px}
  .tbl-wrap{background:#fff;border-radius:var(--radius-xl)}
  /* 17 de las 19 páginas con tabla no la envuelven en .tbl-wrap; sin esto la
     tabla se sale de la tarjeta en el celular. */
  .card-pad:has(.tbl),.card:has(> .tbl){overflow-x:auto}
  /* Las barras de filtros son .row-flex y en pantalla angosta hay que dejarlas
     bajar de línea, si no el buscador se aplasta hasta desaparecer. */
  .row-flex{flex-wrap:wrap}

  .card-pad{padding:16px 18px}
  .card-head{padding:16px 18px 4px;flex-wrap:wrap}
  .card-head .sub{margin-left:0 !important;width:100%;font-size:12px}

  .tabs{padding:0 8px;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;flex-wrap:nowrap}
  .tab{padding:13px 11px;font-size:12.5px;flex:none}

  .crumbs{flex-wrap:wrap;gap:5px;font-size:11.5px}
  .exp-head h1,.exp-head .display{font-size:22px !important;line-height:1.12 !important;word-break:break-word}
  .ladder{overflow-x:auto}
  .ai-strip{flex-direction:column;align-items:flex-start}
  .ai-strip .ai-acts{width:100%}
  .next-action{flex-direction:column;align-items:flex-start}
  .inbox{grid-template-columns:1fr;height:auto}
  .admin-layout{flex-direction:column !important}
  .admin-layout > *{width:100% !important}
}