/* ============================================================================
   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=Inter:wght@400;500;600;700&family=Inter+Tight:wght@400;500;700;900&display=swap');

/* ============================================================================
   PALETA 2026-08-07 — la del sistema de diseño de Vista en Claude Design
   ----------------------------------------------------------------------------
   Los NOMBRES de las variables no cambiaron: solo los valores. Por eso las ~75
   pantallas se repintan sin tocar su HTML ni su JavaScript.

   Qué cambia respecto de la paleta anterior:
   · El azul de marca pasa de #2E63F6 a #1b61c9 — más sobrio, menos eléctrico.
   · El lienzo deja de ser azulado (#EAEEF5) y pasa a un gris neutro (#f6f7f9).
   · El texto es #181d26 en vez de #0F1117, y los tonos apagados van en
     rgba sobre azul marino, no en grises fríos.
   · Vuelven las sombras suaves de las tarjetas (la versión anterior las quitó
     todas y separaba por color).
   · La tipografía pasa de Plus Jakarta Sans a Inter, con Inter Tight para las
     cifras y los títulos grandes.

   Volver atrás es cambiar este bloque; nada más depende de estos valores.
   ========================================================================== */
:root{
  /* Marca */
  --vista-blue:#1b61c9; --vista-blue-mid:#254fad; --vista-blue-deep:#0f3d82;
  --vista-navy:#181d26; --vista-navy-soft:#2e3a4e;
  --azul-soft:#a9c5f7; --azul-pale:#e8f1fb;

  /* Superficies y texto */
  --surface:#ffffff; --surface-subtle:#f6f7f9; --surface-quiet:#f8fafc;
  --text-primary:#181d26; --text-secondary:#333333;
  --text-weak:rgba(4,14,32,.69); --text-mute:rgba(4,14,32,.5);
  --border:#e0e2e6; --border-strong:#c8ccd2; --border-navy:#2e3a4e;

  /* Sidebar — blanco, con la ficha activa en oscuro */
  --nav-bg:#ffffff; --nav-panel:#f8fafc; --nav-line:#e0e2e6;
  --nav-text:rgba(4,14,32,.75); --nav-mute:rgba(4,14,32,.45); --nav-section:rgba(4,14,32,.4);

  /* Semántico */
  --success:#006400; --success-bg:#e8f4e8;
  --warning:#a85d00; --warning-bg:#fdf3e3;
  --danger:#b42318;  --danger-bg:#fde8e6;
  --info:#1b61c9;    --info-bg:#e8f1fb;

  --chart-1:#1b61c9; --chart-2:#b42318; --chart-3:#7c5ce6; --chart-4:#0e7a4a; --chart-5:#a85d00;

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

  /* Sombras suaves: las tarjetas se despegan del lienzo apenas lo justo */
  --shadow-button:rgba(0,0,0,.32) 0 0 1px,rgba(0,0,0,.08) 0 0 2px,rgba(27,97,201,.28) 0 1px 3px;
  --shadow-soft:rgba(15,48,106,.05) 0 0 20px;
  --shadow-card:rgba(15,48,106,.05) 0 0 20px;
  --shadow-popover:rgba(15,48,106,.12) 0 8px 24px,rgba(15,48,106,.06) 0 0 0 1px;
  --shadow-lift:rgba(15,48,106,.1) 0 4px 16px;

  /* Rellenos que las páginas tenían escritos en fijo. Tienen nombre para que
     el tema oscuro pueda cambiarlos sin tocar cada pantalla. */
  --fill-hover:#f0f2f5;   /* hover de botones e íconos */
  --fill-blue:#d6e6fb;    /* hover de los botones fantasma azules */
  --fill-row:#f8fafc;     /* fondo de fila al pasar el mouse */
  --fill-violet:#f1edfd;  /* lila de las tarjetas de videollamada */
  --text-faint:rgba(4,14,32,.3);  /* texto decorativo: separadores, iniciales */
  --on-info:#0f3d82;      /* texto sobre los bloques azul pálido */

  --font-text:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;
  --font-display:'Inter Tight','Inter',system-ui,sans-serif;
  --radius-sm:12px; --radius:16px; --radius-lg:24px; --radius-xl:24px;
  --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(27,97,201,.16)}
:focus-visible{outline:2px solid rgba(27,97,201,.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
   ========================================================================== */
/* Tarjeta: filo de 1px y una sombra apenas perceptible, como en el sistema de
   diseño. La versión anterior las dejaba planas y las separaba solo por color. */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card)}
.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}

/* Los héroes son navy en los dos temas, pero los tokens de texto están
   calculados para fondo claro: de día un subtítulo con var(--text-mute) salía
   gris oscuro sobre navy y no se leía (pasaba en las cotizaciones de estancia
   por estudios y en las etiquetas de todas las tarjetas .kpi.hero). Dentro del
   héroe los tokens se invierten, así cualquier página que los use se lee. */
.card.hero,.kpi.hero{--text-primary:#fff;--text-secondary:rgba(255,255,255,.9);
  --text-weak:rgba(255,255,255,.76);--text-mute:rgba(255,255,255,.62);
  --text-faint:rgba(255,255,255,.48)}
/* Excepción: los hijos que traen su propio fondo claro dentro del héroe
   (botón secundario, campos) recuperan el texto oscuro. De noche no hace falta
   porque esos fondos ya son oscuros. */
html:not([data-theme="dark"]) .card.hero .btn-secondary,
html:not([data-theme="dark"]) .card.hero .input,
html:not([data-theme="dark"]) .card.hero .select,
html:not([data-theme="dark"]) .card.hero .icon-btn,
html:not([data-theme="dark"]) .kpi.hero .btn-secondary{--text-primary:#181d26;
  --text-secondary:#333333;--text-weak:rgba(4,14,32,.69);
  --text-mute:rgba(4,14,32,.5);--text-faint:rgba(4,14,32,.3)}
.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-bg);color:var(--danger)}
.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:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;display:flex;flex-direction:column;gap:0;box-shadow:var(--shadow-card);transition:none}
.kpi:hover{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}
}

/* ===========================================================================
   COSTOS INTERNOS (Carlos, 2026-08-03)
   ---------------------------------------------------------------------------
   El asesor solo reporta el costo del tiquete de ida. Todo lo demás (tiquete
   de regreso, seguro, carpeta, honorarios del abogado) y toda cifra que deje
   deducir el margen —costos, ganancia, utilidad— queda fuera de su pantalla.
   El servidor aplica esos valores solo, desde el catálogo del servicio.

   Marcá con .costo-interno cualquier campo, celda o bloque con esa información.
   Marcá con .solo-asesor lo que únicamente debe ver el asesor.
   El atributo data-rol lo escribe Vista.applyRoleVisibility (app.js).
   =========================================================================== */
body[data-rol="asesor"] .costo-interno{display:none !important}
.solo-asesor{display:none}
body[data-rol="asesor"] .solo-asesor{display:block}

/* ===========================================================================
   TEMA OSCURO (Carlos, 2026-08-04)
   ---------------------------------------------------------------------------
   El CRM se oscurece solo de 7 p.m. a 7 a.m. (assets/tema.js pone
   data-theme="dark" en <html> antes del primer pintado; también hay botón
   manual en la barra lateral). Aquí solo se redefinen las variables y los
   pocos colores que el rediseño Bento dejó escritos en fijo (#fff y afines).
   Las pantallas públicas de clientes no cargan tema.js: siempre claras.
   =========================================================================== */
html[data-theme="dark"]{
  color-scheme:dark;

  /* "Navy" pasa a ser la superficie elevada: héroes, filas activas, avatares */
  --vista-navy:#1C222E; --vista-navy-soft:#2A3242;
  /* El azul de marca (#1b61c9) es demasiado oscuro sobre fondo negro: de noche
     se aclara para que los botones y los enlaces se sigan leyendo. */
  --vista-blue:#5B8DEF; --vista-blue-mid:#7FA9F7;
  /* El azul profundo era para textos y links sobre claro; sobre oscuro se aclara */
  --vista-blue-deep:#8FB0FA;
  /* Azul claro: se queda claro también de noche porque casi siempre es TEXTO
     sobre la tarjeta oscura (portada del login, cabecera de candidato). */
  --azul-soft:#8FB0FA; --azul-pale:#1D2A45;

  --surface:#151923;         /* tarjetas */
  --surface-subtle:#0B0D12;  /* lienzo */
  --surface-quiet:#1E2431;   /* rellenos suaves */

  --text-primary:#EDF1F8; --text-secondary:#C6CDDA; --text-weak:#9AA4B8; --text-mute:#707B93;
  --border:#222937; --border-strong:#2E3748; --border-navy:#2E3748;

  --nav-bg:#12151D; --nav-panel:#1B2029; --nav-line:#222937;
  --nav-text:#C6CDDA; --nav-mute:#707B93; --nav-section:#5A6478;

  --success:#45CE8F; --success-bg:rgba(22,163,108,.16);
  --warning:#E7B04E; --warning-bg:rgba(203,145,44,.16);
  --danger:#F27E64;  --danger-bg:rgba(224,84,56,.17);
  --info:#6E9BF5;    --info-bg:rgba(84,128,240,.17);

  --chart-1:#5586F7; --chart-2:#F27E64; --chart-3:#9B7FF0; --chart-4:#37C08B; --chart-5:#E7B04E;

  --fill-hover:#252D3C; --fill-blue:rgba(84,128,240,.3); --fill-row:#1A202C;
  --fill-violet:rgba(155,127,240,.18); --text-faint:#67718A; --on-info:#A9BEEA;

  /* Las sombras claras no se ven sobre negro: de noche las tarjetas se separan
     con un filo tenue en vez de una sombra. */
  --shadow-soft:0 0 0 1px rgba(255,255,255,.05);
  --shadow-card:0 0 0 1px rgba(255,255,255,.05);
  --shadow-button:0 0 0 1px rgba(255,255,255,.08);
  --shadow-lift:0 8px 24px -8px rgba(0,0,0,.6);
  --shadow-popover:0 0 0 1px rgba(255,255,255,.07),0 24px 60px -12px rgba(0,0,0,.65);
}
html[data-theme="dark"] *{scrollbar-color:#323D50 transparent}
html[data-theme="dark"] *::-webkit-scrollbar-thumb{background-color:#323D50}
html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover{background-color:#3E4B63}
html[data-theme="dark"] a:hover{color:#A8C2FB}

/* Tarjetas y paneles que quedaron en #fff fijo */
html[data-theme="dark"] .card,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .split .list,
html[data-theme="dark"] .inbox .thread,
html[data-theme="dark"] .seg,
html[data-theme="dark"] .mod-tabs,
html[data-theme="dark"] .view-tabs{background-color:var(--surface)}
html[data-theme="dark"] .card.hero,
html[data-theme="dark"] .kpi.hero{background-color:var(--vista-navy)}
html[data-theme="dark"] .card.tinted{background-color:var(--azul-pale)}
html[data-theme="dark"] .card.alert{background-color:rgba(224,84,56,.12)}
html[data-theme="dark"] .kpi.hero .kico{background-color:#2E3748 !important}
html[data-theme="dark"] .inbox .msgs{background-color:#0F131B}
html[data-theme="dark"] .av-stack .avatar{box-shadow:0 0 0 2px var(--surface)}

/* Botones */
html[data-theme="dark"] .btn-primary{background-color:#E9EDF6;color:#12151D}
html[data-theme="dark"] .btn-primary:hover{background-color:#fff;color:#0B0D12}
html[data-theme="dark"] .btn-secondary{background-color:var(--surface-quiet);color:var(--text-secondary);box-shadow:inset 0 0 0 1.5px var(--border-strong)}
html[data-theme="dark"] .btn-secondary:hover{background-color:#252D3C;color:var(--text-primary);box-shadow:inset 0 0 0 1.5px #3A465C}
html[data-theme="dark"] .btn-blue:hover{background-color:#2653D6}
html[data-theme="dark"] .btn-ghost:hover,html[data-theme="dark"] .btn.ghost:hover{background-color:rgba(84,128,240,.3);color:#B9CDFB}
html[data-theme="dark"] .icon-btn:hover{background-color:#252D3C}

/* Sidebar: el item activo pasa de navy a azul (navy ya no contrasta) */
html[data-theme="dark"] .nav-item.active,
html[data-theme="dark"] .nav-grp-body .nav-item.active{background-color:var(--vista-blue);color:#fff}
html[data-theme="dark"] .nav-item.active .i{color:#fff}
html[data-theme="dark"] .nav-item.disabled{color:#49536A}
html[data-theme="dark"] .sidebar .me .out:hover{background-color:#252D3C;color:var(--text-primary)}

/* Controles segmentados y filas activas: mismo azul que el sidebar */
html[data-theme="dark"] .seg .seg-it.active,
html[data-theme="dark"] .mod-tab.active,
html[data-theme="dark"] .view-tab.active{background-color:var(--vista-blue);color:#fff}
html[data-theme="dark"] .split .list .row.active{background-color:var(--vista-blue);color:#fff}
html[data-theme="dark"] .split .list .row.active .sub{color:rgba(255,255,255,.78)}

/* Inputs. La segunda regla es la red de seguridad: hay campos sueltos por las
   páginas sin la clase .input, y el navegador los pinta de gris ratón cuando la
   página se declara oscura. */
html[data-theme="dark"] .input{background-color:#10141C}
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]){
  background-color:#10141C;color:var(--text-primary);border-color:var(--border-strong)}
html[data-theme="dark"] .input:hover{border-color:#3A465C}
html[data-theme="dark"] .select{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='%23707B93' stroke-width='1.8' fill='none'/%3E%3C/svg%3E")}

/* Tablas y detalles sueltos que estaban en fijo */
html[data-theme="dark"] .tbl tbody tr:hover td{background-color:#1A202C}
html[data-theme="dark"] .empty-state .ico{color:#3A465C}
html[data-theme="dark"] .crumbs .sep{color:#3A465C}
html[data-theme="dark"] .ladder .step .lbl{color:var(--text-mute)}
html[data-theme="dark"] .ai-strip .ai-title{color:#D7E3FE}
html[data-theme="dark"] .ai-strip .ai-why{color:#A9BEEA}

/* Rojos sólidos: el coral claro de texto no sirve de fondo con letra blanca */
html[data-theme="dark"] .b-danger,
html[data-theme="dark"] .nav-item .nav-badge-atras,
html[data-theme="dark"] .delta.down{background-color:#C6402A;color:#fff}

/* Texto escrito inline en navy (títulos sueltos): en oscuro pasa a claro */
html[data-theme="dark"] [style*="color:var(--vista-navy)"]:not([style*="background"]){color:var(--text-primary) !important}

@media (max-width:900px){
  html[data-theme="dark"] .mobile-header{background-color:rgba(11,13,18,.92)}
  html[data-theme="dark"] .mobile-header .ham-btn{background-color:var(--surface);color:var(--text-primary)}
  html[data-theme="dark"] .stats-strip .stat{background-color:var(--surface)}
  html[data-theme="dark"] .tbl-wrap{background-color:var(--surface)}
  html[data-theme="dark"] .sidebar{box-shadow:0 0 48px rgba(0,0,0,.55)}
}

/* Topbar y buscador ⌘K (los estilos viven en assets/vista-shell.js) */
html[data-theme="dark"] .vsh-search{background-color:var(--surface)}
html[data-theme="dark"] .vsh-pal{background-color:var(--surface);box-shadow:var(--shadow-popover)}
html[data-theme="dark"] .vsh-it.sel{background-color:var(--surface-quiet)}
html[data-theme="dark"] .vsh-foot{background-color:#10141C}
html[data-theme="dark"] .vsh-foot b{background-color:var(--surface-quiet)}
html[data-theme="dark"] .vsh-veil{background-color:rgba(0,0,0,.6)}

/* Botón de tema en la barra lateral (lo inserta tema.js junto al de salir) */
.sidebar .me .tema-btn{color:var(--text-mute);padding:5px;border-radius:9px;display:inline-flex;cursor:pointer;transition:all 150ms var(--ease)}
.sidebar .me .tema-btn:hover{background-color:#fff;color:var(--text-primary)}
.sidebar .me .tema-btn .i{width:15px;height:15px;stroke-width:1.8}
html[data-theme="dark"] .sidebar .me .tema-btn:hover{background-color:#252D3C}

/* Transición suave cuando el tema cambia con la pantalla abierta */
html.tema-anim,html.tema-anim body,html.tema-anim *{transition:background-color 240ms var(--ease),color 180ms var(--ease),border-color 240ms var(--ease) !important}