/* SALMI · cristal claro
   Fondo degradado índigo-cian de UniSalamanca, menú y barra superior flotantes, y un panel grande de vidrio claro.
   Solo hay 3 capas con desenfoque (menú, barra y panel) para que no pese en computadores modestos.
   Los colores claros se aplican solo dentro de .panel: el login, la intro, los avisos y el teléfono flotante no cambian. */

/* ---------- marco ---------- */
.app{position:relative;isolation:isolate;gap:16px;padding:16px;grid-template-columns:276px minmax(0,1fr)}
.app::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
background:radial-gradient(900px 620px at 6% -4%,rgba(22,182,214,.55),transparent 62%),radial-gradient(820px 700px at 100% 16%,rgba(96,80,220,.5),transparent 60%),radial-gradient(900px 720px at 62% 108%,rgba(22,182,214,.4),transparent 60%),linear-gradient(160deg,#1b1560 0%,#16306f 46%,#0f5a7d 100%)}
.lado{top:16px;height:calc(100vh - 32px);border:1px solid rgba(255,255,255,.2);border-radius:30px;padding:20px 14px;
background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.05));-webkit-backdrop-filter:blur(22px) saturate(1.35);backdrop-filter:blur(22px) saturate(1.35);box-shadow:0 30px 60px -30px rgba(6,4,40,.7),inset 0 1px 0 rgba(255,255,255,.25)}
.lado-pie{border-top-color:rgba(255,255,255,.16)}
.lado .enlace{color:#9fe7f6}
.lado-hola{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18)}
@media(min-width:901px){.lado-hola{display:none}}
#nav a.on{background:linear-gradient(135deg,rgba(22,182,214,.42),rgba(59,49,145,.7));border-color:rgba(255,255,255,.28)}

.centro{display:flex;flex-direction:column;gap:16px;min-width:0}
.tope{top:16px;z-index:12;gap:12px;padding:10px 12px 10px 18px;border:1px solid rgba(255,255,255,.2);border-radius:26px;
background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);box-shadow:0 20px 40px -26px rgba(6,4,40,.7),inset 0 1px 0 rgba(255,255,255,.22)}
.tope .btn-mini{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.24)}
.tope .btn-mini:hover{background:rgba(255,255,255,.22)}
.tope .vivo{margin-left:auto}

/* buscador */
.busca{position:relative;flex:1 1 320px;max-width:520px;min-width:0;display:flex;align-items:center}
.busca>svg{position:absolute;left:14px;color:rgba(255,255,255,.7);pointer-events:none}
.busca input{width:100%;min-width:0;padding:11px 40px 11px 42px;border-radius:18px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);color:#fff;font:inherit;font-size:14px;outline:none}
.busca input::placeholder{color:rgba(255,255,255,.62)}
.busca input:focus{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.55)}
.busca input::-webkit-search-cancel-button{display:none}
.busca kbd{position:absolute;right:12px;font:inherit;font-size:11px;font-weight:700;color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.3);border-radius:7px;padding:1px 7px;pointer-events:none}
.busca input:focus~kbd{display:none}
.res-busca{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:50;max-height:380px;overflow:auto;padding:8px;border-radius:20px;background:rgba(248,250,254,.98);color:#1B1745;border:1px solid rgba(42,34,102,.12);box-shadow:0 30px 60px -20px rgba(6,4,40,.65)}
.res-busca button{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:9px 10px;border:0;border-radius:14px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.res-busca button:hover,.res-busca button.on{background:rgba(22,182,214,.14)}
.res-busca .av{width:36px;height:36px;font-size:12px}
.res-busca b{display:block;font-size:14px}
.res-busca small{display:block;color:#55557F;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:380px}
.res-busca .nada{padding:14px;color:#55557F;font-size:13px}
.res-busca .pie{padding:6px 10px 2px;color:#55557F;font-size:11px}

/* perfil */
.perfil{display:flex;align-items:center;gap:10px;padding:4px 6px 4px 4px;border-radius:99px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff}
.perfil .av{width:36px;height:36px;font-size:13px}
.perfil span.t{display:flex;flex-direction:column;line-height:1.2;padding-right:8px;min-width:0}
.perfil b{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.perfil small{font-size:11px;color:rgba(255,255,255,.75)}

/* ---------- panel de vidrio claro ---------- */
.panel{position:relative;isolation:isolate;border-radius:34px;padding:26px 28px 40px;min-height:calc(100vh - 118px);
border:1px solid rgba(255,255,255,.7);box-shadow:0 36px 80px -34px rgba(6,4,40,.8),inset 0 1px 0 rgba(255,255,255,.85);color:var(--tx);
--bg:#EFF4FB;--tx:#1B1745;--mut:#55557F;--linea:rgba(42,34,102,.13);--panel:rgba(255,255,255,.6);--panel-2:rgba(246,249,253,.98);
--ok:#0E8A58;--aviso:#A85F00;--mal:#C0344A;--cyan:#0B9CBA;--cian-t:#07617A;--sombra:0 16px 34px -24px rgba(42,34,102,.5)}
.panel::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(238,245,252,.62));-webkit-backdrop-filter:blur(28px) saturate(1.5);backdrop-filter:blur(28px) saturate(1.5)}
.panel-cab{margin:0 0 20px}
.panel-cab h1{margin:0;font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.panel-cab p{margin:5px 0 0;color:var(--mut);font-size:14px}
.panel .vista{padding:0;animation:entra .35s ease}
.panel a:not([class]){color:var(--cian-t);font-weight:700}

/* tarjetas */
.panel .tarjeta,.panel .kpi,.panel .asesor{border:1px solid rgba(255,255,255,.85);background:var(--panel)}
.panel .tarjeta{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.25) 60%),rgba(255,255,255,.35)}
.panel .tarjeta h3{color:var(--mut)}
.panel .kpi.kc{border-color:rgba(var(--tc),.35)}
.panel .kpi.kc small{color:#2c2860}
.panel .kpi.kc b{color:var(--tx)}
.panel .kpi.kc em{color:var(--mut)}
.panel .kpi small{color:var(--mut)}
.panel .kpi{position:relative}
.panel .kpi.kc{background:linear-gradient(155deg,rgba(var(--tc),.2),rgba(var(--tc),.04) 62%),rgba(255,255,255,.62)}
.panel .acc{background:linear-gradient(160deg,rgba(var(--tc),.18),rgba(var(--tc),.03) 60%),rgba(255,255,255,.62)}
.panel .acc p{color:var(--mut)}
.panel .acc-pie{border-top-color:var(--linea)}
.panel .acc-pie em{color:#2c2860}
.panel .acc .go{color:var(--cian-t)}
.panel .intro{color:#164a5a;background:rgba(22,182,214,.12);border-color:rgba(22,182,214,.32)}
.panel .semaforo{color:var(--tx)}.panel .semaforo b{color:var(--tx)}
.panel .hero{color:#fff;--mut:#cdd0f5}
.panel .hero h2{color:#fff}
.panel .col-tab{background:linear-gradient(180deg,rgba(var(--tc),.16),rgba(var(--tc),.04)),rgba(255,255,255,.5)}
.panel .col-tab>small{color:var(--mut)}
.panel .tk{background:rgba(255,255,255,.78);color:var(--tx);border-color:rgba(42,34,102,.09)}
.panel .tk:hover{background:#fff}
.panel .rank-fila{background:rgba(255,255,255,.6);color:var(--tx)}
.panel .rank-fila:hover{background:#fff}
.panel .rank-fila .pos{background:rgba(42,34,102,.1)}
.panel .mejor p{color:var(--mut)}
.panel .alerta .at{color:var(--tx)}

/* superficies pequeñas dentro de las tarjetas */
.panel .fila,.panel .caso-fila,.panel .sem-d,.panel .cal,.panel .cita-item,.panel .resumen,.panel .ag-col,.panel .crm-col,.panel .cons-p,.panel .cons-estado,.panel .pausa-bar,.panel .vz-ll,.panel .vz-pasos li,.panel .cal-caso,.panel .at-k,.panel .etapa,.panel .emb-conv span{background:rgba(255,255,255,.58);border-color:rgba(42,34,102,.08)}
.panel .fila:hover,.panel .caso-fila:hover,.panel .cita-item:hover,.panel .emb-paso:hover{background:rgba(255,255,255,.95)}
.panel .fila.on{border-color:var(--cyan);background:rgba(22,182,214,.14)}
@keyframes destello{0%{background:rgba(22,182,214,.45)}100%{background:rgba(255,255,255,.58)}}
.panel .tabla tr:hover td{background:rgba(22,182,214,.08)}
.panel .calor td.tot{background:rgba(42,34,102,.08)}
.panel .calor td.ok{color:#0b6e47}.panel .calor td.am{color:#8a4f00}.panel .calor td.mal{color:#a32a3d}
.panel .sem-d b{color:var(--tx)}

/* barras y pistas */
.panel .barra,.panel .rank-fila .barra,.panel .arm-dep .bar,.panel .arm-barra .pista,.panel .cons-bar,.panel .at-bar i,.panel .emb-mini,.panel .vz-pill,.panel .vz-pasos i,.panel .cal-pill,.panel .cal-chk i,.panel .cons-tag,.panel .crm-x,.panel .arm-x,.panel .webv-btn,.panel .crm-col h4 i,.panel .pill{background:rgba(42,34,102,.09)}
.panel .webv-btn:hover{background:rgba(42,34,102,.16)}
.panel .pill{color:var(--tx)}
.panel .pill.cy{background:rgba(22,182,214,.2);color:#07617a}
.panel .pill.ok{background:rgba(14,138,88,.15);color:#0b6e47}
.panel .pill.am{background:rgba(255,184,77,.3);color:#7a4600}
.panel .pill.mal{background:rgba(255,107,122,.2);color:#a32a3d}
.panel .cal-pill.ok{color:var(--ok)}.panel .cal-pill.am{color:var(--aviso)}.panel .cal-pill.mal{color:var(--mal)}
.panel .cons-tag.rec,.panel .crm-nba small{color:#07617a}
.panel .crm-col h4 i{color:var(--tx)}
.panel .etapa .n{border-color:rgba(42,34,102,.25)}
.panel .cal-err,.panel .pausa-err{color:#a32a3d}
.panel .pausa-ej{color:#8a4f00}
.panel .cal-resp{background:rgba(42,34,102,.07)}

/* conversaciones */
.panel .burbuja.p{background:rgba(42,34,102,.08)}
.panel .burbuja.p small{color:var(--mut)}
.panel .burbuja.s{color:#fff}.panel .burbuja.s small{color:rgba(255,255,255,.75)}

/* botones, filtros y campos */
.panel .btn-mini{background:rgba(255,255,255,.78);color:var(--tx);border-color:rgba(42,34,102,.14)}
.panel .btn-mini:hover{background:#fff}
.panel .btn-mini[disabled]{opacity:.5}
.panel .filtros{display:inline-flex;gap:2px;padding:4px;margin-bottom:16px;border-radius:99px;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.85);max-width:100%;overflow-x:auto;scrollbar-width:none}
.panel .filtros::-webkit-scrollbar{display:none}
.panel .chip{border:0;background:transparent;color:var(--mut);padding:7px 14px;white-space:nowrap}
.panel .chip i{font-style:normal;margin-left:6px;min-width:20px;padding:1px 6px;border-radius:99px;background:rgba(42,34,102,.1);font-size:11px;font-weight:800;display:inline-block;text-align:center}
.panel .chip.on{background:#16123f;color:#fff;box-shadow:0 8px 18px -10px rgba(22,18,63,.8)}
.panel .chip.on i{background:rgba(255,255,255,.22);color:#fff}
.panel .chip:not(.on):hover{background:rgba(255,255,255,.9)}
.panel .crm-seg{background:rgba(255,255,255,.62);border-color:rgba(255,255,255,.85)}
.panel .crm-seg button.on,.panel .cons-chips button.on{background:#16123f;color:#fff}
.panel .cons-chips button{background:rgba(255,255,255,.6)}
.panel .buscador,.panel .cs input,.panel .crm-in,.panel .crm-sel,.panel .crm-ficha textarea,.panel .cons-chips input,.panel .vz-form input{background:rgba(255,255,255,.8);color:var(--tx);border:1px solid var(--linea)}
.panel .crm-ficha{box-shadow:-30px 0 70px -30px rgba(6,4,40,.5)}
.panel .interruptor .cuerpo{background:rgba(42,34,102,.2)}

/* tendencia, ícono en cifras sencillas y gráficas nuevas (js/cristal.js) */
.kpi .tend{position:absolute;right:14px;top:14px;font-size:11px;font-weight:800;padding:3px 9px;border-radius:99px;display:inline-flex;gap:3px;align-items:center}
.kpi .tend.sube{background:rgba(14,138,88,.15);color:#0b6e47}
.kpi .tend.baja{background:rgba(255,107,122,.2);color:#a32a3d}
.kpi .tend.igual{background:rgba(42,34,102,.1);color:#55557F}
.kpi.kc .spark{top:auto;bottom:14px}
.kpi.kc .tend~.spark{display:block}
.kpi .kic.suelto{--tc:22,182,214;margin-bottom:8px}
.kpi.con-ico{display:flex;flex-direction:column;gap:3px}
.kpi.con-ico small{margin:0}
.cg{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr);gap:18px;margin:0 0 22px}
.cg .tarjeta{margin:0}
.cg-sub{margin:-8px 0 14px;color:var(--mut);font-size:12px}
.bar14{display:flex;align-items:flex-end;gap:7px;height:190px;padding:0 2px;border-bottom:1px solid var(--linea)}
.bar14 .c{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;position:relative}
.bar14 .c i{display:block;width:100%;max-width:34px;border-radius:9px 9px 3px 3px;background:linear-gradient(180deg,rgba(22,182,214,.75),rgba(22,182,214,.4));min-height:3px;transition:height .8s cubic-bezier(.2,.8,.2,1)}
.bar14 .c.hoy i{background:linear-gradient(180deg,#16B6D6,#3B3191)}
.bar14 .c em{font-style:normal;font-size:11px;font-weight:800;color:var(--tx);height:14px}
.bar14-ej{display:flex;gap:7px;padding:6px 2px 0}
.bar14-ej span{flex:1;min-width:0;text-align:center;font-size:10px;color:var(--mut);white-space:nowrap}
.dona-w{display:flex;flex-direction:column;align-items:center;gap:14px}
.dona{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(#16B6D6 calc(var(--p)*1%),rgba(42,34,102,.12) 0)}
.dona::before{content:"";position:absolute;inset:14px;border-radius:50%;background:#f4f8fd;box-shadow:inset 0 2px 8px rgba(42,34,102,.12)}
.dona b{position:relative;font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1}
.dona small{position:absolute;bottom:34px;font-size:10px;color:var(--mut);font-weight:700}
.dona-k{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.dona-k div{background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);border-radius:16px;padding:9px 6px;text-align:center}
.dona-k b{display:block;font-size:18px}
.dona-k small{display:block;color:var(--mut);font-size:11px;font-weight:600}

/* fondo de listas y tamaños que dependían del encabezado anterior */
.panel .lista{max-height:calc(100vh - 430px);min-height:300px}
.panel .chat{max-height:calc(100vh - 360px)}
.panel .cs{height:calc(100vh - 290px)}

/* ---------- celular y tableta ---------- */
@media(max-width:900px){
.app{grid-template-columns:minmax(0,1fr);padding:10px;gap:10px}
.lado{position:fixed;top:10px;left:10px;height:calc(100dvh - 20px);width:min(300px,calc(100vw - 20px));transform:translateX(-112%);z-index:60;background:linear-gradient(180deg,rgba(40,32,120,.92),rgba(22,48,111,.92))}
.lado.abierto{transform:none;box-shadow:0 0 0 100vmax rgba(5,3,20,.55)}
.lado-hola{display:flex}
.centro{gap:10px}
.tope{top:10px;padding:8px 10px;gap:8px;border-radius:22px;flex-wrap:nowrap}
.tope .btn-mini{display:none}
.busca{flex:1 1 auto;max-width:none}
.busca kbd{display:none}
.perfil{padding:3px}
.perfil span.t{display:none}
.panel{padding:18px 14px 110px;border-radius:26px;min-height:0}
.panel-cab h1{font-size:24px}
.panel .vista{padding:0}
.cg{grid-template-columns:minmax(0,1fr)}
.panel .lista{max-height:340px;min-height:0}
}
@media(max-width:720px){
.tope .vivo{margin-left:0}
.tope .vivo b{display:none}
.tope .etiqueta-ejemplo{display:none}
.busca input{padding-left:38px;font-size:13px}
.res-busca small{max-width:200px}
.bar14{gap:3px}
}
@media(prefers-reduced-motion:reduce){.bar14 .c i{transition:none}}

/* cinco cifras caben en una fila en escritorio */
.panel .kpis{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}