/* Inteligencia para la Eficiencia — sistema Suizo + Vidrio, lima Advance, tipografía del sistema */
:root{
  --bg:#F2F4EC; --surface:#FFFFFF; --surface2:#EFF1E9;
  --ink:#1A1C16; --ink2:#4A4E42; --muted:#676B5E;
  --line:#DDE0D4; --accent:#C4D600; --mark:#5F6E00; --track:#E4E7DA;
  --good:#3E7D2F; --warn:#C77700; --bad:#B3261E;
  --shadow:0 1px 2px rgba(26,28,22,.04),0 12px 32px rgba(26,28,22,.08);
  --glass:rgba(255,255,255,.55);
  --glass-strong:rgba(250,251,246,.78);
  --glass-border:rgba(255,255,255,.75);
}
/* paleta oscura: se aplica si el sistema está en oscuro (y el usuario no forzó claro),
   o si el usuario eligió oscuro con el botón día/noche. La elección manual manda. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E100C; --surface:#1A1D17; --surface2:#22261E;
    --ink:#F2F4EA; --ink2:#C9CDBD; --muted:#8F947F;
    --line:#2E3329; --accent:#C4D600; --mark:#C4D600; --track:#2E3329;
    --good:#7FC46A; --warn:#E5A54B; --bad:#E8756A;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 14px 36px rgba(0,0,0,.42);
    --glass:rgba(28,32,24,.55);
    --glass-strong:rgba(18,21,15,.8);
    --glass-border:rgba(255,255,255,.08);
  }
}
:root[data-theme="dark"]{
  --bg:#0E100C; --surface:#1A1D17; --surface2:#22261E;
  --ink:#F2F4EA; --ink2:#C9CDBD; --muted:#8F947F;
  --line:#2E3329; --accent:#C4D600; --mark:#C4D600; --track:#2E3329;
  --good:#7FC46A; --warn:#E5A54B; --bad:#E8756A;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 14px 36px rgba(0,0,0,.42);
  --glass:rgba(28,32,24,.55);
  --glass-strong:rgba(18,21,15,.8);
  --glass-border:rgba(255,255,255,.08);
}
*{box-sizing:border-box}
html{transition:none}
body, .tile, .chart, .dock, nav.top, .card{transition:background-color .25s, border-color .25s, color .25s}
[hidden]{display:none !important}
body{
  margin:0; color:var(--ink);
  background:
    radial-gradient(1100px 700px at 6% -8%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 58%),
    radial-gradient(900px 650px at 106% 22%, color-mix(in srgb, var(--mark) 10%, transparent), transparent 55%),
    radial-gradient(800px 600px at 45% 115%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 50%),
    var(--bg);
  background-attachment:fixed;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14.5px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
button{font:inherit; color:inherit; cursor:pointer}
input{font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:7px 10px; width:100%}
input:focus,button:focus-visible,textarea:focus{outline:2px solid var(--accent); outline-offset:1px}
textarea{font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:7px 10px; width:100%; resize:vertical}
label{display:block; font-size:12.5px; color:var(--ink2); font-weight:600; margin-bottom:10px}
label input{margin-top:4px; font-weight:400}
.muted{color:var(--muted)}
.hint{font-size:12px}
.spacer{flex:1}

/* ---------- barra superior ---------- */
nav.top{position:sticky; top:0; z-index:40; background:var(--glass); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4); border-bottom:1px solid var(--line)}
nav.top .in{max-width:1200px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; gap:18px}
.brand{font-weight:800; letter-spacing:.02em; display:flex; align-items:center; gap:8px; white-space:nowrap; border:0; background:transparent; padding:0; font-size:inherit}
.brand small{font-weight:600; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; font-size:10.5px}
.brand .dot{width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent)}
.brand.big{font-size:20px; margin-bottom:6px}
.tabs{display:flex; gap:6px}
.tab{position:relative; border:0; background:transparent; padding:7px 12px; border-radius:10px; color:var(--ink2); font-weight:600}
.tab:hover{background:var(--glass)}
.tab.active{background:var(--ink); color:var(--bg)}
.badge{position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--bad); color:#fff; font-size:10.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center}
.me{display:flex; align-items:center; gap:8px; font-weight:600}
.ghost{border:1px solid var(--line); background:transparent; border-radius:9px; padding:6px 12px; color:var(--ink2)}
.ghost:hover{border-color:var(--ink2)}
.ghost.bad{color:var(--bad); border-color:color-mix(in srgb, var(--bad) 40%, transparent)}
.primary{border:0; background:var(--accent); color:#1A1C16; font-weight:700; border-radius:9px; padding:8px 16px}
.primary:hover{filter:brightness(1.05)}
.avatar{width:28px; height:28px; border-radius:50%; background:var(--ink); color:var(--bg); font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; flex:none; overflow:hidden}
.avatar img{width:100%; height:100%; object-fit:cover; object-position:center 28%}
.avatar{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent)}
.avatar:not(:has(img)){box-shadow:none}
.avatar.grande{width:72px; height:72px; font-size:22px}

main{max-width:1200px; margin:0 auto; padding:22px 20px 60px}

/* ---------- plataformas ---------- */
.cat{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:30px 2px 12px}
.cat:first-child{margin-top:6px}
.tiles{display:grid; grid-template-columns:repeat(auto-fill, minmax(262px, 1fr)); gap:16px}
.tile{
  background:var(--glass); backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid var(--glass-border); border-radius:18px; padding:20px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:5px; min-height:158px;
  transition:transform .15s, box-shadow .15s;
}
.tile:hover{transform:translateY(-2px)}
.tile b{font-size:16.5px; letter-spacing:-.01em}
.tile .sub{color:var(--muted); font-size:13px; flex:1}
.tile-head{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:6px}
.logo{width:52px; height:52px; border-radius:14px; border:1px solid; font-weight:800; font-size:16px; display:inline-flex; align-items:center; justify-content:center; letter-spacing:.02em}
.ic{width:24px; height:24px; display:block}
.logo .ic{width:26px; height:26px}
.solo-icono{display:inline-flex; align-items:center; padding:6px 9px}
.solo-icono .ic{width:19px; height:19px}
/* botón día/noche: muestra el sol cuando estás en noche (para ir a día) y la luna al revés */
#btn-tema .ic-sol, #btn-tema .ic-luna{display:none}
#btn-tema[data-efectivo="dark"] .ic-sol{display:block}
#btn-tema[data-efectivo="light"] .ic-luna{display:block}
/* módulos de Inteligencia: la fila protagonista del launcher */
.tiles.destacados{grid-template-columns:repeat(auto-fill, minmax(310px, 1fr)); gap:18px}
.tiles.destacados .tile{min-height:190px; padding:26px; border-radius:20px}
.tiles.destacados .logo{width:66px; height:66px; border-radius:18px}
.tiles.destacados .logo .ic{width:34px; height:34px}
.tiles.destacados .tile b{font-size:19px}
.tiles.destacados .tile .sub{font-size:13.5px}
.tiles.destacados .go{padding:7px 18px; font-size:13.5px}
.edit{border:0; background:transparent; color:var(--muted); font-size:14px; padding:2px 6px; border-radius:7px}
.edit:hover{background:var(--glass); color:var(--ink)}
.links{display:flex; gap:8px; margin-top:10px; align-items:center}
.go{background:var(--ink); color:var(--bg); text-decoration:none; font-weight:700; font-size:12.5px; padding:5px 12px; border-radius:8px}
.go:hover{opacity:.9}
.go.local{background:transparent; color:var(--ink2); border:1px solid var(--line); font-weight:600}
.sin{color:var(--muted); font-size:12px; font-style:italic}
.tile.add{align-items:center; justify-content:center; border-style:dashed; border-color:var(--line); background:transparent; color:var(--muted); font-weight:700; font-size:14px; margin-top:14px; width:100%}
.tile.add:hover{color:var(--ink); border-color:var(--ink2)}

/* ---------- marketing (módulo mudado desde Impulso) ---------- */
.mk-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 14px}
.mk-head h2{margin:0; letter-spacing:-.02em; display:flex; align-items:center; gap:10px}
.volver-inicio{padding:3px 11px; font-size:15px; line-height:1.4}
.empty{color:var(--muted); font-size:12.5px; padding:8px 4px; text-align:center}
.charts{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:12px}
.chart{background:var(--glass); backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5); border:1px solid var(--glass-border); border-radius:16px; padding:16px 18px; box-shadow:var(--shadow)}
.chart h4{margin:0 0 12px; font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.scroll{overflow-x:auto}
.num{font-variant-numeric:tabular-nums}
.q-table{width:100%; border-collapse:collapse; font-size:13px}
.q-table th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:6px 6px}
.q-table td{padding:4px 6px; border-top:1px solid var(--line)}
.q-table .n{text-align:right; font-variant-numeric:tabular-nums}
.q-table th.n{text-align:right}
.mk-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:8px; margin-bottom:14px}
.mk-k{background:var(--surface2); border-radius:10px; padding:9px 11px}
.mk-k b{display:block; font-size:17px; letter-spacing:-.02em}
.mk-k span{font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; display:flex; align-items:center; gap:5px; flex-wrap:wrap}
.mk-k.alerta{background:color-mix(in srgb, var(--bad) 12%, var(--surface2))}
.mk-k.alerta b, .mal{color:var(--bad)}
.delta{font-size:9.5px; font-weight:800; letter-spacing:0}
.delta.up{color:var(--good)} .delta.down{color:var(--bad)}
.minibar{display:block; height:4px; border-radius:2px; background:var(--track); margin-top:4px; position:relative; overflow:hidden}
.minibar b{position:absolute; inset:0; background:var(--mark); border-radius:2px; transform-origin:left}
.hrow{display:grid; grid-template-columns:70px 1fr 90px; gap:10px; align-items:center; padding:5px 0; font-size:12.5px}
.hrow .lbl{font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hrow .val{text-align:right; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap}
.hrow .val small{display:block; font-weight:600; color:var(--muted)}
.bar{height:8px; border-radius:4px; background:var(--track); position:relative; overflow:hidden}
.bar b{position:absolute; inset:0; border-radius:4px; background:var(--mark); transform-origin:left}
select{font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:7px 10px; width:100%}
select:focus{outline:2px solid var(--accent); outline-offset:1px}
label select{margin-top:4px; font-weight:400}

/* visor embebido: la plataforma llena el área bajo la barra, con el dock del chat intacto */
#view-embed{display:flex; flex-direction:column; height:calc(100vh - 64px)}
.emb-bar{display:flex; align-items:center; gap:12px; padding:2px 0 12px}
.emb-bar b{font-size:16px; letter-spacing:-.01em}
#emb-frame{flex:1; width:100%; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--shadow)}
body.con-dock #view-embed{height:calc(100vh - 64px)}

/* una sola hoja: todo el ecosistema en parrilla compacta */
.tiles.compacta{grid-template-columns:repeat(auto-fill, minmax(208px, 1fr)); gap:13px}
.tiles.compacta .tile{min-height:120px; padding:15px; gap:3px; border-radius:16px}
.tiles.compacta .logo{width:42px; height:42px; border-radius:12px}
.tiles.compacta .logo .ic{width:22px; height:22px}
.tiles.compacta .tile b{font-size:14.5px}
.tiles.compacta .tile .sub{font-size:11.5px}
.tiles.compacta .links{margin-top:7px; gap:6px}
.tiles.compacta .go{padding:4px 12px; font-size:12px}
.tiles.compacta .tile-head{margin-bottom:3px}
.tiles.compacta .tile.add{margin-top:0}

/* ---------- calendario ---------- */
.cal-roster{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px}
.cal-user{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--glass); border-radius:999px; padding:5px 15px 5px 6px; font-weight:600}
.cal-user.activo{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.cal-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(148px, 1fr)); gap:10px}
.cal-dia{padding:13px}
.cal-dia h4{margin:0 0 9px; display:flex; justify-content:space-between; align-items:baseline}
.cal-dia.hoy{border-color:color-mix(in srgb, var(--accent) 70%, transparent); border-width:1.5px}
.cal-dia.finde{opacity:.6}
.slot{display:block; font-size:12px; font-weight:700; border-radius:8px; padding:4px 9px; margin:4px 0; font-variant-numeric:tabular-nums}
.slot.libre{background:color-mix(in srgb, var(--accent) 32%, transparent); color:var(--mark)}
.slot.ocupado{background:var(--track); color:var(--muted); font-weight:600}

/* ---------- panel de actividad ---------- */
.en-jornada{border-color:color-mix(in srgb, var(--good) 55%, transparent); color:var(--good); font-weight:700}
/* semáforo propio en la barra: lo que el equipo ve de ti ahora mismo */
.mi-estado{display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:999px;
  border:1px solid var(--line); font-size:12px; font-weight:700; color:var(--muted); white-space:nowrap}
.mi-estado b{font-weight:700}
.mi-estado.activo{color:var(--good); border-color:color-mix(in srgb, var(--good) 40%, transparent);
  background:color-mix(in srgb, var(--good) 9%, transparent)}
.mi-estado.ausente{color:var(--warn); border-color:color-mix(in srgb, var(--warn) 40%, transparent);
  background:color-mix(in srgb, var(--warn) 9%, transparent)}
.mi-estado.desconectado{color:var(--muted)}
.mi-estado .pdot{width:8px; height:8px}
@media (max-width: 900px){ .mi-estado b{display:none} .mi-estado{padding:5px 8px} }
.pa-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:14px}
.pa-card{padding:16px}
.pa-head{display:flex; align-items:center; gap:10px}
.pa-head .avatar{width:38px; height:38px; font-size:13px}
.pa-head b{display:block; font-size:15px}
.pa-head small{display:block}
.pa-sub{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 4px}
.chip-min{font-size:11px; font-weight:700; color:var(--ink2); background:var(--surface2); border-radius:999px; padding:3px 10px}
.pa-dias{display:flex; gap:6px; margin:12px 0}
.pa-dia{width:32px; height:32px; border-radius:9px; background:var(--track); display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:var(--muted)}
.pa-dia.h{background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--mark)}
.pa-dia.j{background:color-mix(in srgb, var(--accent) 50%, transparent); color:var(--mark)}
.pa-dia.hoy{outline:2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset:1px}
.pa-card .mk-kpis{margin-bottom:0}

/* ---------- contratos ---------- */
#ct-body > .chart{margin-bottom:14px}
.ct-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px}
.ct-grid label{margin-bottom:0}
.ct-grid .ancha{grid-column:1 / -1}
.ct-table input{padding:5px 8px; border-radius:7px; min-width:88px}
.ct-table td{padding:3px 4px}
.ct-card .go{cursor:pointer}
.chip{font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:2px 10px}
.chip.ok{color:var(--good); border-color:color-mix(in srgb, var(--good) 45%, transparent)}

/* ---------- chat: dock anclado a la derecha, presente en toda la plataforma ---------- */
.dock{position:fixed; top:64px; right:14px; bottom:14px; width:330px; z-index:35; display:flex; flex-direction:column;
  background:var(--glass-strong); backdrop-filter:blur(26px) saturate(1.6); -webkit-backdrop-filter:blur(26px) saturate(1.6);
  border:1px solid var(--glass-border); border-radius:16px; box-shadow:var(--shadow)}
.dock-head{display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--line)}
.dock-head b{font-size:12.5px; letter-spacing:.04em}
#dock-online{font-size:11px; font-weight:700; color:var(--good)}
.dock-btn{border:0; background:transparent; color:var(--muted); font-size:15px; font-weight:800; padding:0 6px; border-radius:7px; line-height:1}
.dock-btn:hover{background:var(--glass); color:var(--ink)}
/* conversaciones: general, grupos y chats de dos */
.dock-salas{display:flex; gap:6px; padding:9px 12px 8px; border-bottom:1px solid var(--line); overflow-x:auto}
.dock-salas::-webkit-scrollbar{height:0}
.sala{position:relative; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; flex:none;
  border:1px solid var(--line); background:transparent; color:var(--ink2); border-radius:999px;
  padding:4px 11px; font-size:12px; font-weight:700}
.sala:hover{border-color:var(--ink2); color:var(--ink)}
.sala.activa{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.sala .avatar{width:18px; height:18px; font-size:8.5px}
.sala .nb{background:var(--bad); color:#fff; font-style:normal; font-size:9.5px; font-weight:800;
  border-radius:999px; padding:0 5px; min-width:15px; text-align:center}
.sala.nueva{font-size:15px; font-weight:800; padding:2px 10px; color:var(--muted)}
.dock-roster{display:flex; flex-wrap:wrap; gap:7px; padding:9px 14px; border-bottom:1px solid var(--line)}
.rchip{border:0; background:transparent; padding:0; cursor:pointer}
.rchip.yo{cursor:default; opacity:.9}
.rchip:not(.yo):hover .avatar{outline:2px solid var(--accent); outline-offset:1px}
/* lista de personas para armar un grupo */
.sec-min{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:800; margin:14px 0 8px}
.chk-lista{display:grid; gap:6px; max-height:230px; overflow-y:auto}
.chk{display:flex; align-items:center; gap:10px; padding:7px 10px; border:1px solid var(--line);
  border-radius:10px; margin:0; font-weight:600; color:var(--ink); cursor:pointer}
.chk:hover{border-color:var(--ink2)}
/* OJO: el avatar TAMBIÉN es un <span>. Con `.chk span{flex:1}` se estiraba hasta volverse
   una elipse y la foto de la persona salía deformada. El nombre es el único que crece. */
.chk > span:not(.avatar){flex:1; font-size:13.5px}
.chk .avatar{flex:none}
.chk input{width:auto; margin:0}
.rchip{position:relative; display:inline-flex}
.rchip .pdot{position:absolute; right:-2px; bottom:-1px; border:2px solid var(--bg)}
.pdot{width:9px; height:9px; border-radius:50%; background:var(--muted); flex:none; display:inline-block}
.pdot.activo{background:var(--good); box-shadow:0 0 0 3px color-mix(in srgb, var(--good) 25%, transparent)}
.pdot.ausente{background:var(--warn); box-shadow:0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent)}
.pdot.desconectado{background:var(--track)}
.est-chip{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:999px; border:1px solid var(--line)}
.est-chip .pdot{width:8px; height:8px}
.est-chip.activo{color:var(--good)} .est-chip.ausente{color:var(--warn)} .est-chip.desconectado{color:var(--muted)}
.dock .msgs{padding:14px}
.dock .msg{max-width:100%}
.dock-pill{position:fixed; right:18px; bottom:18px; z-index:35; width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--ink);
  border:1px solid var(--glass-border); background:var(--glass-strong); backdrop-filter:blur(20px) saturate(1.5); -webkit-backdrop-filter:blur(20px) saturate(1.5); box-shadow:var(--shadow)}
.dock-pill .ic{width:23px; height:23px}
.dock-pill .badge{top:-3px; right:-3px}
/* El ancho del dock y el margen del contenido se definen abajo, donde vive el dock que se
   recoge. Aquí quedaba una versión vieja (dock fijo de 360/374 px) que solo confundía. */
body.con-dock main{max-width:none}
.msgs{flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:10px}
.msg{display:flex; gap:9px; max-width:92%}
.msg.mine{align-self:flex-end; flex-direction:row-reverse}
.bubble{background:var(--glass-strong); border:1px solid var(--glass-border); border-radius:13px; padding:8px 12px; box-shadow:var(--shadow)}
.msg.mine .bubble{background:color-mix(in srgb, var(--accent) 22%, var(--surface)); border-color:color-mix(in srgb, var(--accent) 40%, transparent)}
.who{font-size:11.5px; font-weight:700; color:var(--ink2); display:flex; gap:8px; align-items:baseline; margin-bottom:2px}
.who time,.sys time{font-weight:500; color:var(--muted); font-size:10.5px}
.sys{align-self:center; text-align:center; color:var(--ink2); font-size:12.5px; background:var(--glass); border:1px dashed var(--line); border-radius:11px; padding:6px 14px; max-width:88%}
.sys .origen{display:inline-block; background:var(--ink); color:var(--bg); font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; border-radius:6px; padding:1px 7px; margin-right:8px}
.sys time{display:block; margin-top:2px}
#chat-form{display:flex; gap:6px; padding:12px; border-top:1px solid var(--line); align-items:flex-end}
#chat-form .dock-btn{width:34px; height:38px; display:grid; place-items:center; padding:0; flex:none}
#chat-form .emoji-btn{font-size:19px}
#chat-text{flex:1; resize:none; min-height:38px; max-height:132px; line-height:1.45; padding:9px 12px;
  font-family:inherit; overflow-y:hidden}
#chat-form .primary{flex:none; align-self:stretch; max-height:44px}

/* ---------- login ---------- */
/* login inmersivo: fondo tech animado a pantalla completa, tarjeta de vidrio flotando */
.login-wrap{position:fixed; inset:0; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; overflow:hidden; background:#0A0C08}
#login-fx{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0}
.login-glow{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(60% 55% at 50% 42%, rgba(196,214,0,.10), transparent 70%),
    radial-gradient(120% 90% at 50% 120%, rgba(0,0,0,.55), transparent 60%);
  animation:glow-pulse 7s ease-in-out infinite}
@keyframes glow-pulse{0%,100%{opacity:.85}50%{opacity:1}}
.login-card{position:relative; z-index:2; width:min(400px, 94vw);
  background:rgba(16,20,14,.62); backdrop-filter:blur(30px) saturate(1.5); -webkit-backdrop-filter:blur(30px) saturate(1.5);
  border:1px solid rgba(196,214,0,.22); border-radius:20px; padding:38px 34px;
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
  color:#EDEFE4; animation:card-in .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes card-in{from{opacity:0; transform:translateY(18px) scale(.98)}to{opacity:1; transform:none}}
.login-card .muted{color:#A7AC99}
.login-card label{color:#C9CDBD}
.login-card input{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#EDEFE4}
.login-card input::placeholder{color:#7D8270}
.login-card .brand.big .dot{box-shadow:0 0 0 4px rgba(196,214,0,.18), 0 0 18px rgba(196,214,0,.6)}
.login-logo{display:block; height:30px; width:auto; margin:0 0 20px; opacity:.95}
.login-card .brand.big{margin-bottom:8px}
.login-card p{margin:4px 0 18px}
.login-card .primary{width:100%; margin-top:6px; padding:10px}
.login-card .hint{text-align:center; margin:12px 0 0}
.err{background:color-mix(in srgb, var(--bad) 12%, transparent); color:var(--bad); border-radius:9px; padding:8px 12px; font-size:12.5px; font-weight:600; margin-bottom:10px}

/* ---------- modal ---------- */
.modal-wrap{position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center; background:rgba(10,12,8,.4); padding:18px}
.modal-wrap.open{display:flex}
.modal{width:min(460px, 96vw); background:var(--glass-strong); backdrop-filter:blur(26px) saturate(1.6); -webkit-backdrop-filter:blur(26px) saturate(1.6); border:1px solid var(--glass-border); border-radius:16px; padding:24px; box-shadow:var(--shadow)}
.modal h2{margin:0 0 16px; font-size:17px}
.dos{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.color-row input{width:64px; height:34px; padding:2px}
.row{display:flex; gap:9px; align-items:center; margin-top:6px}

/* ---------- ajustes ---------- */
#aj-body > .chart, #pr-body ~ .chart{margin-bottom:14px}
tr.baja{opacity:.45}
.ghost.chico{padding:3px 9px; font-size:12px}
.tile.proc{cursor:pointer}
label textarea{margin-top:4px; font-weight:400}

/* ---------- toast ---------- */
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--bg); border-radius:11px; padding:9px 18px; font-weight:600; opacity:0; pointer-events:none; transition:.25s; z-index:70}
.toast.show{opacity:1; transform:translateX(-50%)}

@media (max-width: 760px){
  .chat-wrap{grid-template-columns:1fr}
  .roster-card{display:none}
  nav.top .in{gap:10px; padding:10px 12px}
  .brand small{display:none}
}

/* ---------- Pagos digitales: observaciones y chips ---------- */
/* Las notas vienen de Impulso; las de tono alerta piden acción, las info explican. */
.nota{display:flex; flex-direction:column; gap:2px; padding:9px 0; border-top:1px solid var(--line)}
.nota:first-child{border-top:0; padding-top:0}
.nota b{font-size:13.5px}
.nota span{font-size:13px; color:var(--ink2); line-height:1.5}
.nota.mal b{color:var(--bad)}
.aviso-alerta{margin-bottom:14px; border-left:3px solid var(--bad)}
.chip.mini{font-size:9.5px; padding:1px 7px; color:var(--mark); border-color:color-mix(in srgb, var(--accent) 55%, transparent)}
details.chart > summary{cursor:pointer; font-size:13.5px; color:var(--ink2); list-style:none}
details.chart > summary::-webkit-details-marker{display:none}
details.chart > summary::before{content:"▸ "; color:var(--muted)}
details.chart[open] > summary::before{content:"▾ "}
details.chart[open] > summary{margin-bottom:8px}
.chico{font-size:11.5px; padding:4px 10px}

/* ---------- mi gente: el equipo como personas ---------- */
.cumples{display:flex; gap:10px; flex-wrap:wrap}
.cumple{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:999px; padding:5px 14px 5px 6px}
.cumple.hoy{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 16%, transparent)}
.cumple b{font-size:13px}
.cumple i{font-style:normal; font-size:12px; color:var(--muted); font-weight:700}
.cumple.hoy i{color:var(--mark)}
.pa-card .sobre{margin:10px 0 0; font-size:13px; color:var(--ink2); font-family:var(--font-voice, inherit); font-style:italic}
.datos{display:grid; gap:6px; margin:12px 0 4px}
.dato{display:flex; gap:8px; font-size:12.5px; align-items:baseline}
.dato span{color:var(--muted); font-weight:700; min-width:120px; flex:none; font-size:11px; text-transform:uppercase; letter-spacing:.04em}
.dato b{font-weight:600; color:var(--ink)}

/* ---------- la frase de cada entrada (login) ---------- */
.frase{margin:20px 0 0; padding:16px 0 0; border-top:1px solid rgba(255,255,255,.09)}
.frase blockquote{margin:0; font-size:14px; line-height:1.6; color:#CFD3C2; font-style:italic}
.frase figcaption{margin-top:9px; font-size:11.5px; font-weight:700; color:#9AA089; letter-spacing:.03em}
.frase .obra{font-weight:500; color:#7E8471}

/* frase oro: sale poco y cuando sale, la pantalla se pone de gala */
.frase.oro{border-top-color:rgba(196,214,0,.35)}
.frase.oro blockquote{
  font-size:17px; line-height:1.5; font-style:normal; font-weight:700; letter-spacing:-.01em;
  background:linear-gradient(100deg,#F2F4EA 10%,#C4D600 45%,#EAF08A 62%,#C4D600 78%,#F2F4EA 96%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:oro-brilla 6s ease-in-out infinite;
}
@keyframes oro-brilla{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.frase.oro figcaption{color:#C4D600}
.frase.oro .sello{display:inline-block; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid rgba(196,214,0,.45); border-radius:999px; padding:2px 9px; margin-right:8px; color:#C4D600}
/* la tarjeta y el fondo suben de tono cuando cae la frase oro */
.login-wrap.de-gala .login-card{
  border-color:rgba(196,214,0,.5);
  box-shadow:0 30px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(196,214,0,.16) inset, 0 0 70px rgba(196,214,0,.14);
}
.login-wrap.de-gala .login-glow{
  background:
    radial-gradient(62% 58% at 50% 42%, rgba(196,214,0,.20), transparent 70%),
    radial-gradient(120% 90% at 50% 120%, rgba(0,0,0,.5), transparent 60%);
}
.slot.comida{background:color-mix(in srgb, var(--warn) 16%, transparent); color:var(--warn); font-weight:700}

/* ---------- solicitudes de reunión (Calendario) ---------- */
.reu-zona{display:grid; gap:14px; margin-bottom:16px}
.reu-aviso{border:1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); border-radius:16px; padding:14px 16px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%), var(--glass);
  backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5); box-shadow:var(--shadow)}
.reu-aviso-cab{display:flex; align-items:center; gap:9px; margin-bottom:12px; flex-wrap:wrap}
.reu-aviso-cab .ic{width:19px; height:19px; color:var(--mark)}
.reu-aviso-cab b{font-size:14.5px}
.reu-aviso-cab .muted{font-size:12px}
.reu-lista{display:grid; grid-template-columns:repeat(auto-fill, minmax(268px, 1fr)); gap:12px}
.reu-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px}
.reu-card h4{margin:8px 0 4px; font-size:14.5px}
.reu-cuando{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--mark)}
.reu-cuando .ic{width:16px; height:16px}
.reu-cuando.ok{color:var(--good)}
.reu-tema{margin:4px 0 8px; font-size:13px; color:var(--ink2); font-style:italic}
.reu-mail{display:inline-block; font-size:12px; color:var(--muted); text-decoration:none; border-bottom:1px dotted var(--line)}
.reu-btns{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.reu-btns .primary, .reu-btns .ghost{padding:6px 14px; font-size:12.5px}
.reu-liga{display:flex; gap:6px; align-items:center; margin:10px 0 8px}
.reu-liga input{font-size:11.5px; padding:5px 8px; font-variant-numeric:tabular-nums}
.reu-liga .ghost{padding:5px 10px; font-size:11.5px; white-space:nowrap}
.reu-card.lista{border-color:color-mix(in srgb, var(--good) 35%, var(--line))}
.tile-badge{position:absolute; top:10px; right:10px; min-width:19px; height:19px; padding:0 5px; border-radius:10px;
  background:var(--bad); color:#fff; font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center}
.tile{position:relative}

/* ---------- accesos y radiografía de uso ---------- */
.seg{display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--surface)}
.seg button{border:0; background:transparent; padding:6px 14px; font-size:12.5px; color:var(--muted); font-weight:600}
.seg button.activo{background:var(--accent); color:#1A1C16; font-weight:800}
.kpis{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:12px; margin-bottom:14px}
.kpi{background:var(--glass); backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid var(--glass-border); border-radius:16px; padding:16px 18px; box-shadow:var(--shadow)}
.kpi b{display:block; font-size:27px; letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums}
.kpi span{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; margin-top:5px}
.kpi.bien b{color:var(--good)} .kpi.medio b{color:var(--warn)} .kpi.mal b{color:var(--bad)}
.leyenda{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:14px}
.lg{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink2); font-weight:600}
.lg::before{content:''; width:11px; height:11px; border-radius:3px; background:var(--track)}
.lg.verde::before{background:var(--accent)}
.lg.ambar::before{background:var(--warn)}
.lg.gris::before{background:var(--track)}
.ac-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(400px, 1fr)); gap:14px}
.ac-card{padding:18px}
.ac-head{display:flex; align-items:center; gap:11px; margin-bottom:14px}
.ac-quien b{display:block; font-size:15px; line-height:1.25}
.ac-quien small{font-size:11.5px}
.ac-nums{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px 8px; margin-bottom:14px}
.ac-nums b{display:block; font-size:17px; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.ac-nums span{display:block; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700}
.sem-barra{display:flex; height:12px; border-radius:999px; overflow:hidden; background:var(--track); margin-bottom:14px}
.sem-barra i{display:block; height:100%}
.sem-barra .verde, .col-pila .verde{background:var(--accent)}
.sem-barra .ambar, .col-pila .ambar{background:var(--warn)}
.sem-barra .gris, .col-pila .gris{background:color-mix(in srgb, var(--muted) 30%, transparent)}
.dia-cols{display:flex; gap:6px; align-items:flex-end; justify-content:space-between}
.dia-col{flex:1; text-align:center; min-width:0}
.dia-col .col-track{height:74px; display:flex; align-items:flex-end; background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--line) 40%, transparent));
  border-radius:7px; overflow:hidden}
.dia-col .col-pila{width:100%; display:flex; flex-direction:column; border-radius:7px; overflow:hidden; min-height:3px}
.dia-col .col-pila i{display:block; width:100%; min-height:0}
.dia-col b{display:block; font-size:11px; margin-top:5px; color:var(--ink2)}
.dia-col span{display:block; font-size:9.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.dia-col.ho .col-track{outline:1.5px dashed color-mix(in srgb, var(--mark) 45%, transparent); outline-offset:1px}
.ac-perm{display:flex; gap:6px; flex-wrap:wrap; margin:14px 0 4px}
.perm-chip{font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; border:1px solid var(--line); color:var(--ink2); display:inline-flex; align-items:center; gap:5px}
.perm-chip .ic{width:13px; height:13px}
.perm-chip.todo{color:var(--mark); border-color:color-mix(in srgb, var(--accent) 60%, var(--line))}
.perm-chip.off{color:var(--bad); border-color:color-mix(in srgb, var(--bad) 35%, var(--line))}
.perm-chip.ho{color:var(--good); border-color:color-mix(in srgb, var(--good) 35%, var(--line))}

/* modal de permisos */
.modal.ancho{width:min(660px, 96vw)}
.perm-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:8px}
.perm-grid.chico{grid-template-columns:repeat(auto-fill, minmax(190px, 1fr))}
.perm{display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); margin:0; cursor:pointer; font-weight:400}
.perm input{width:auto; margin:0; accent-color:var(--mark)}
.perm .perm-ic{width:26px; height:26px; display:grid; place-items:center; flex:none; color:var(--muted)}
.perm .perm-ic .ic{width:20px; height:20px}
.perm .perm-txt b{display:block; font-size:12.5px; line-height:1.25}
.perm .perm-txt small{display:block; font-size:10.5px; color:var(--muted); line-height:1.3}
.perm.on{border-color:color-mix(in srgb, var(--accent) 65%, var(--line)); background:color-mix(in srgb, var(--accent) 10%, var(--surface))}
.perm.on .perm-ic{color:var(--mark)}
.ho-fila{display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap}
.ho-dias{display:flex; gap:7px}
.ho-dia{display:grid; place-items:center; width:52px; padding:7px 0; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); margin:0; cursor:pointer}
.ho-dia input{position:absolute; opacity:0; width:0; height:0}
.ho-dia b{font-size:14px} .ho-dia small{font-size:9.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}
.ho-dia.on{border-color:color-mix(in srgb, var(--good) 55%, var(--line)); background:color-mix(in srgb, var(--good) 12%, var(--surface))}
.ho-dia.on b{color:var(--good)}
.ho-cupo{max-width:150px; margin:0}
/* home office en Ajustes: lo define quien administra, aquí solo se ve */
.ho-vista{display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin-top:4px}
.ho-pin{width:34px; height:34px; display:grid; place-items:center; border-radius:10px; border:1px solid var(--line);
  font-size:12.5px; font-weight:800; color:var(--muted)}
.ho-pin.on{border-color:color-mix(in srgb, var(--good) 55%, var(--line)); background:color-mix(in srgb, var(--good) 12%, transparent); color:var(--good)}
@media (max-width:640px){
  .ac-grid{grid-template-columns:1fr}
  .ac-nums{grid-template-columns:repeat(2, 1fr)}
}
.dia-col.sinj .col-track{outline:1.5px dotted color-mix(in srgb, var(--warn) 55%, transparent); outline-offset:1px}
.dia-col.sinj span{color:var(--warn)}
.modal.ancho{max-height:90vh; overflow:auto}

/* niveles de acceso (perfiles por área) y alta masiva */
.perfil-btns{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:4px}
.perfil-btn{display:grid; gap:1px; text-align:left; padding:7px 12px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); line-height:1.2}
.perfil-btn b{font-size:12.5px}
.perfil-btn small{font-size:10px; color:var(--muted)}
.perfil-btn:hover{border-color:color-mix(in srgb, var(--accent) 60%, var(--line))}
.perfil-btn.on{border-color:var(--mark); background:color-mix(in srgb, var(--accent) 14%, var(--surface))}
.sel-min{font:inherit; font-size:12px; padding:3px 6px; border:1px solid var(--line); border-radius:7px;
  background:var(--surface); color:var(--ink)}
.ok-txt{color:var(--good)}
.q-table tr.baja td{opacity:.55}
.claves-caja{margin-top:14px; padding:14px; border:1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  border-radius:14px; background:color-mix(in srgb, var(--accent) 8%, var(--surface))}
.claves-caja textarea{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11.5px; margin-top:8px}

/* ---------- dock del chat en dos columnas (17 ago 2026) ----------
   Con el equipo completo dentro, la parrilla de avatares dejó de servir: nadie
   reconoce a 32 personas por sus iniciales. Ahora la gente va EN PILA a un lado
   de la conversación, con nombre, estado y buscador. */
.dock-cuerpo{flex:1; display:flex; min-height:0}
.dock-lista{width:186px; flex:none; display:flex; flex-direction:column; min-height:0;
  border-right:1px solid var(--line); padding:8px 6px 8px 8px}
.busca-gente{font-size:12px; padding:5px 9px; border-radius:9px; margin-bottom:7px; flex:none}
.dock-lista .pila{display:flex; flex-direction:column; gap:2px; overflow-y:auto; min-height:0}
.dock-lista .pila:last-child{flex:1}
.pila-sec{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  font-weight:800; margin:10px 4px 5px; flex:none}
.fila{display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:0; background:transparent;
  border-radius:10px; padding:5px 7px; color:var(--ink2); font-size:12.5px; font-weight:600; line-height:1.2; position:relative}
.fila:hover{background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--ink)}
.fila.activa{background:var(--ink); color:var(--bg)}
.fila.activa .fila-sub{color:color-mix(in srgb, var(--bg) 70%, transparent)}
.fila .avatar{width:24px; height:24px; font-size:10px; flex:none}
.fila-txt{flex:1; min-width:0}
.fila-txt b{display:block; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fila-sub{display:block; font-size:10.5px; color:var(--muted); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fila .pdot{width:8px; height:8px; flex:none}
.fila .nb{background:var(--bad); color:#fff; font-style:normal; font-size:9.5px; font-weight:800;
  border-radius:999px; padding:0 5px; min-width:15px; text-align:center; flex:none}
.fila.yo{opacity:.75}
.fila-ic{width:24px; height:24px; border-radius:9px; flex:none; display:grid; place-items:center;
  background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--mark)}
.fila-ic .ic{width:15px; height:15px}
.fila.activa .fila-ic{background:color-mix(in srgb, var(--accent) 30%, transparent); color:var(--accent)}
/* El dock respira: EN REPOSO solo se ve la lista de gente (angosto, 250 px). Al elegir a
   alguien, la conversación entra deslizándose desde la derecha y el dock se ensancha; al
   volver, se recoge. Antes las dos columnas estaban siempre abiertas y se comían media
   pantalla aunque no estuvieras hablando con nadie (Fernando, 25 ago 2026). */
.dock{width:250px; transition:width .26s cubic-bezier(.4,0,.2,1)}
.dock.conversando{width:560px}
body.con-dock main{margin:0 292px 0 24px; transition:margin .26s cubic-bezier(.4,0,.2,1)}
body.con-dock.charlando main{margin:0 602px 0 24px}
.dock-lista{width:100%; border-right:0}
.dock.conversando .dock-lista{width:214px; flex:none; border-right:1px solid var(--line)}
.dock-conv{flex:1; display:flex; flex-direction:column; min-width:0;
  opacity:0; transform:translateX(18px); pointer-events:none;
  transition:opacity .22s ease, transform .26s cubic-bezier(.4,0,.2,1)}
.dock.conversando .dock-conv{opacity:1; transform:none; pointer-events:auto}
.dock:not(.conversando) .dock-conv{width:0; overflow:hidden}
.volver-chat{display:inline-flex !important}
.pila-vacia{font-size:11.5px; color:var(--muted); padding:8px 6px}
@media (max-width: 1080px){
  body.con-dock main, body.con-dock.charlando main{margin:0 auto; max-width:1200px}
  .dock.conversando{width:min(560px, calc(100vw - 28px))}
}
@media (max-width: 560px){
  .dock, .dock.conversando{width:calc(100vw - 20px)}
  .dock.conversando .dock-lista{width:132px}
}
.chk-linea{display:flex; align-items:center; gap:9px; font-weight:600; margin:2px 0 12px}
.chk-linea input{width:auto; margin:0; accent-color:var(--mark)}
.chk-linea small{font-weight:500}

/* ---------- RH: vacantes y bench ---------- */
.vac{padding:18px}
.vac-head{display:flex; align-items:flex-start; gap:10px; margin-bottom:10px}
.vac-head b{display:block; font-size:16px; line-height:1.25}
.vac-head small{display:block; font-size:11.5px}
.vac-est{font-size:11px; font-weight:800; padding:3px 10px; border-radius:999px; border:1px solid var(--line); white-space:nowrap}
.vac-est.abierta{color:var(--mark); border-color:color-mix(in srgb, var(--accent) 60%, var(--line))}
.vac-est.entrevistas{color:var(--good); border-color:color-mix(in srgb, var(--good) 45%, var(--line))}
.vac-est.oferta{color:var(--warn); border-color:color-mix(in srgb, var(--warn) 45%, var(--line))}
.vac-est.pausada{color:var(--muted)}
.vac-est.cerrada{color:var(--muted); opacity:.7}
.vac-datos{display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:10px; margin-bottom:12px}
.vac-datos b{display:block; font-size:16px; letter-spacing:-.02em}
.vac-datos span{display:block; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700}
.vac .links{align-items:center}

/* ---------- aprendizaje y desarrollo ---------- */
.aviso-ruta{border:1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); border-radius:16px; padding:16px 18px; margin-bottom:18px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 11%, transparent), transparent 75%), var(--surface)}
.aviso-ruta b{display:block; margin-bottom:5px; font-size:15px}
.aviso-ruta p{margin:0; font-size:13.5px; color:var(--ink2)}
.curso{padding:17px; display:flex; flex-direction:column}
.curso-top{display:flex; gap:8px; align-items:center; margin-bottom:9px; flex-wrap:wrap}
.curso-tipo{font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:800; padding:3px 9px; border-radius:999px;
  border:1px solid var(--line); color:var(--muted)}
.curso-tipo.certificacion{color:var(--mark); border-color:color-mix(in srgb, var(--accent) 60%, var(--line))}
.curso-apoyo{font-size:11px; font-weight:700; color:var(--good)}
.curso b{font-size:15.5px; line-height:1.3}
.curso-abre{display:flex; gap:6px; align-items:flex-start; margin:8px 0 0; font-size:12.5px; color:var(--mark); font-weight:600}
.curso-abre .ic{width:15px; height:15px; flex:none; margin-top:1px}
.curso-desc{margin:8px 0 0; font-size:13px; color:var(--ink2)}
.curso-pie{margin-top:10px; font-size:11.5px; color:var(--muted)}
.curso .links{margin-top:auto; padding-top:12px}
.curso.otro{border-style:dashed}
.sol{padding:16px}
.sol-head{display:flex; align-items:center; gap:10px; margin-bottom:9px}
.sol-head b{display:block; font-size:14.5px; line-height:1.3}
.sol-head small{display:block; font-size:11px}
.sol-est{font-size:11px; font-weight:800; padding:3px 10px; border-radius:999px; border:1px solid var(--line); white-space:nowrap}
.sol-est.pend{color:var(--warn); border-color:color-mix(in srgb, var(--warn) 45%, var(--line))}
.sol-est.ok{color:var(--mark)} .sol-est.curso{color:var(--good)}
.sol-est.listo{color:var(--good); border-color:color-mix(in srgb, var(--good) 45%, var(--line)); background:color-mix(in srgb, var(--good) 10%, transparent)}
.sol-est.no{color:var(--muted)}
.sol-motivo{margin:0; font-size:13px; color:var(--ink2); font-style:italic}
.sol-resp{margin:9px 0 0; font-size:12.5px; color:var(--ink2); background:color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius:9px; padding:8px 11px}

/* ---------- Desarrollo: quincena, carriles y tablero ---------- */
.dv-sprint{display:flex; gap:20px; align-items:center; flex-wrap:wrap; background:var(--glass);
  backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid var(--glass-border); border-radius:16px; padding:16px 20px; box-shadow:var(--shadow); margin-bottom:14px}
.dv-sprint .eti{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:800}
.dv-sprint b{display:block; font-size:19px; letter-spacing:-.02em; margin-top:2px}
.dv-sprint p{margin:4px 0 0; font-size:13.5px; color:var(--ink2)}
.dv-avance{flex:1; min-width:220px}
.dv-avance .barra{height:9px; border-radius:999px; background:var(--track); overflow:hidden}
.dv-avance .barra i{display:block; height:100%; background:var(--accent)}
.dv-avance span{display:block; margin-top:6px; font-size:12px; color:var(--muted); font-weight:600}
.dv-alerta{display:flex; gap:9px; align-items:center; font-size:13.5px; color:var(--ink2); margin-bottom:14px;
  border:1px solid color-mix(in srgb, var(--bad) 35%, var(--line)); background:color-mix(in srgb, var(--bad) 7%, transparent);
  border-radius:14px; padding:12px 16px}
.dv-alerta .ic{width:18px; height:18px; color:var(--bad); flex:none}
.dv-filtros{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.dv-tablero{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px}
@media (max-width:1100px){ .dv-tablero{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:640px){ .dv-tablero{grid-template-columns:1fr} }
.dv-col{background:color-mix(in srgb, var(--line) 22%, transparent); border-radius:14px; padding:10px; min-height:90px}
.dv-col h4{margin:2px 4px 9px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); display:flex; gap:6px; align-items:center}
.dv-col h4 span{background:var(--surface); border-radius:999px; padding:1px 7px; font-size:10.5px}
.dv-vacia{margin:0; text-align:center; color:var(--muted); font-size:12px; padding:6px}
.dv-card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:11px; margin-bottom:8px; box-shadow:var(--shadow)}
.dv-card.expo{border-color:color-mix(in srgb, var(--bad) 40%, var(--line))}
.dv-card b{display:block; font-size:13px; line-height:1.35; margin:7px 0 0}
.dv-top{display:flex; gap:5px; align-items:center; flex-wrap:wrap}
.dv-carril{font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; font-weight:800; padding:2px 7px; border-radius:6px;
  background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--mark)}
.dv-carril.pantalla{background:color-mix(in srgb, #5B8DEF 18%, transparent); color:#3A6FD8}
.dv-carril.modelos{background:color-mix(in srgb, #B07CE8 18%, transparent); color:#7E4BC0}
.dv-carril.movil{background:color-mix(in srgb, var(--good) 16%, transparent); color:var(--good)}
.dv-carril.infra{background:color-mix(in srgb, var(--muted) 18%, transparent); color:var(--ink2)}
.dv-talla{font-size:10px; font-weight:800; color:var(--muted); border:1px solid var(--line); border-radius:5px; padding:1px 5px}
.dv-expo{font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--bad);
  background:color-mix(in srgb, var(--bad) 12%, transparent); border-radius:5px; padding:2px 6px}
.dv-nec{margin:6px 0 0; font-size:11.5px; color:var(--warn)}
.dv-pie{display:flex; align-items:center; gap:6px; margin-top:9px}
.dv-pie .avatar{width:22px; height:22px; font-size:9px}
.dv-sin{font-size:10.5px; color:var(--muted); font-style:italic}
.dv-fecha{font-size:10.5px; color:var(--muted); font-weight:600}
.dv-mv{border:1px solid var(--line); background:transparent; color:var(--muted); width:22px; height:22px;
  border-radius:6px; font-size:13px; line-height:1; padding:0}
.dv-mv:hover{border-color:var(--mark); color:var(--mark)}
.dv-fila{display:grid; gap:7px}
.dv-frow{display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:10px 13px; font-size:13.5px}
.dv-frow b{font-weight:600}

/* ---------- ficha técnica del colaborador ---------- */
.modal.ficha{max-height:90vh; overflow:auto}
.ficha-head{display:flex; gap:16px; align-items:center; margin-bottom:14px}
.ficha-head .avatar.grande{width:74px; height:74px; font-size:24px}
.ficha-quien h2{margin:0 0 2px; font-size:21px; letter-spacing:-.02em}
.ficha-quien p{margin:0 0 8px; font-size:13.5px; color:var(--muted)}
.ficha-quien .est-chip, .ficha-quien .perm-chip{margin-right:6px}
.ficha-frase{margin:0 0 14px; font-size:14.5px; color:var(--ink2); font-style:italic;
  border-left:3px solid color-mix(in srgb, var(--accent) 60%, transparent); padding-left:12px}
.ficha-datos{display:grid; gap:7px; margin-bottom:4px}
.fdato{display:flex; gap:10px; font-size:13.5px; align-items:baseline}
.fdato span{color:var(--muted); font-weight:700; min-width:132px; flex:none; font-size:10.5px;
  text-transform:uppercase; letter-spacing:.05em}
.fdato b{font-weight:600; color:var(--ink)}
.ficha-nums{display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:11px}
.ficha-nums div{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:11px 13px}
.ficha-nums b{display:block; font-size:16px; letter-spacing:-.02em; line-height:1.2}
.ficha-nums span{display:block; margin-top:3px; font-size:10px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); font-weight:700}
.ficha-cursos{display:flex; gap:7px; flex-wrap:wrap}
.fcurso{font-size:12px; font-weight:600; border:1px solid var(--line); border-radius:9px; padding:5px 10px}
.fcurso i{font-style:normal; color:var(--muted); font-size:10.5px; margin-left:6px}
.fcurso.completada{border-color:color-mix(in srgb, var(--good) 45%, var(--line)); color:var(--good)}
.fcurso.pendiente i{color:var(--warn)}
.dv-avance{margin-top:9px}
.dv-avance .barra{height:6px; border-radius:999px; background:var(--track); overflow:hidden}
.dv-avance .barra i{display:block; height:100%; background:var(--accent)}
.dv-avance span{display:block; margin-top:4px; font-size:10.5px; color:var(--muted); font-weight:700}
.dv-pide{margin-top:9px; width:100%; border:1px dashed color-mix(in srgb, var(--warn) 55%, var(--line));
  background:color-mix(in srgb, var(--warn) 9%, transparent); color:var(--warn); border-radius:9px;
  padding:6px; font-size:11.5px; font-weight:700}
.dv-fecha.vencida{color:var(--bad); font-weight:800}
.dv-fecha.hoy{color:var(--warn); font-weight:800}
.dv-fecha.cerca{color:var(--mark); font-weight:700}
.dv-sin-btn{border:1px dashed var(--line); background:transparent; color:var(--muted); border-radius:7px;
  padding:2px 8px; font-size:10.5px; font-weight:700}
.dv-mv.rep{font-size:11px; font-weight:800}

/* ============================================================================
   TELÉFONO (≤ 760 px) — pase completo, 20 ago 2026
   El equipo lo abre desde la calle: la barra no debe encimarse, los tiles deben
   caber de dos en dos, y el chat debe ocupar la pantalla completa cuando se abre
   (antes se montaba encima del contenido y tapaba los módulos).
   ========================================================================== */
@media (max-width: 760px){
  body{font-size:15px}
  nav.top .in{padding:8px 12px; gap:6px; flex-wrap:nowrap}
  .brand small{display:none}
  .brand{font-size:15px}
  #btn-jornada{font-size:12px; padding:6px 11px; white-space:nowrap}
  .me span{display:none}                 /* solo la foto, el nombre ocupa demasiado */
  .me{padding:3px}
  nav.top .ghost.solo-icono{padding:6px}
  #btn-salir{font-size:12px; padding:6px 10px}

  main{padding:12px 12px 84px}
  body.con-dock main{margin:0}           /* el dock ya no empuja el contenido */
  .tiles.compacta{grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
  .tiles.compacta .tile{min-height:0; padding:12px}
  .tiles.compacta .tile b{font-size:13.5px}
  .tiles.compacta .tile .sub{font-size:11px; -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden}
  .mk-head{flex-wrap:wrap; gap:8px}
  .mk-head h2{font-size:19px}
  .kpis{grid-template-columns:repeat(2,1fr); gap:9px}
  .kpi{padding:12px 13px}
  .kpi b{font-size:22px}
  .ac-grid, .pa-grid{grid-template-columns:1fr}
  .modal{padding:18px; border-radius:14px}
  .ct-grid{grid-template-columns:1fr}

  /* el chat: pantalla completa, y una cosa a la vez */
  /* debajo de la barra, no encima: si no, su encabezado queda tapado */
  .dock{position:fixed; left:0; right:0; bottom:0; top:53px; width:100%; height:auto; border-radius:0; border:0}
  .dock-head{padding:13px 14px; position:sticky; top:0; z-index:2}
  .dock-head b{font-size:14px}
  .dock-cuerpo{flex-direction:column}
  .dock-lista, .dock.conversando .dock-lista{width:100%; flex:1; min-height:0; border-right:0; border-bottom:0; padding:10px 12px}
  .dock-conv{display:none}               /* primero la lista, luego la conversación */
  .dock.en-conversacion .dock-lista{display:none}
  .dock.en-conversacion .dock-conv{display:flex; width:auto; opacity:1; transform:none; pointer-events:auto}
  .fila{padding:9px 10px; font-size:14px}
  .fila .avatar{width:34px; height:34px; font-size:12px}
  .fila-txt b{font-size:14px}
  .fila-sub{font-size:11.5px}
  .volver-chat{display:inline-flex !important}
  .dock-pill{right:14px; bottom:14px; width:58px; height:58px}
  .msgs{padding:14px}
  #chat-form{padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  #chat-text{font-size:16px}             /* 16px evita que iOS haga zoom al escribir */
  input, textarea, select{font-size:16px}

  /* tablero de desarrollo: una columna con su encabezado pegajoso */
  .dv-sprint{flex-direction:column; align-items:stretch; gap:12px}
  .dv-filtros .seg{overflow-x:auto; max-width:100%}
  .dv-tablero{gap:14px}
  .dv-col{padding:10px 12px}
  .ficha-head{flex-direction:column; text-align:center; align-items:center}
  .fdato{flex-direction:column; gap:1px}
  .fdato span{min-width:0}
}
.volver-chat{display:none; border:0; background:transparent; color:var(--muted); font-size:19px; padding:0 8px; line-height:1}
/* arranque del módulo de contratos: los tres pasos, antes de que exista el primero */
.ct-arranque{background:var(--glass); backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid var(--glass-border); border-radius:18px; padding:22px 24px; box-shadow:var(--shadow)}
.ct-arranque h3{margin:0 0 16px; font-size:18px; letter-spacing:-.02em}
.ct-pasos{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px}
.ct-pasos > div{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 17px}
.ct-pasos span{display:grid; place-items:center; width:28px; height:28px; border-radius:9px; background:var(--accent);
  color:#14170F; font-weight:800; font-size:14px; margin-bottom:9px}
.ct-pasos b{display:block; font-size:14.5px; margin-bottom:4px}
.ct-pasos p{margin:0; font-size:12.5px; color:var(--ink2)}
.jor-chip{display:inline-block; font-size:11px; font-weight:700; padding:3px 9px; border-radius:8px; margin:2px 3px 2px 0;
  border:1px solid var(--line); color:var(--ink2)}
.jor-chip.sin_jornada{color:var(--bad); border-color:color-mix(in srgb, var(--bad) 35%, var(--line))}
.jor-chip.sin_cerrar{color:var(--warn); border-color:color-mix(in srgb, var(--warn) 40%, var(--line))}
.jor-chip.corta{color:var(--warn)}
.jor-chip.larga{color:var(--muted)}
.curso-rev{font-size:10.5px; font-weight:700; color:var(--muted); margin-top:6px}
.curso-rev.rota{color:var(--bad)}

/* ---------- Ventas (Impulso como módulo, ya no como marco) ---------- */
.vt-bar{display:flex; align-items:center; gap:10px; margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid var(--line); overflow-x:auto}
.vt-bar .tabs{flex:none}
.vt-bar .tab{white-space:nowrap}
.vt-filtros{display:flex; align-items:center; gap:12px; margin:26px 2px 12px}
.vt-filtros select{width:auto; min-width:170px; padding:6px 10px; font-size:13px}
.vt-lista{display:flex; flex-direction:column; gap:8px}
.vt-row{display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:13px 16px 13px 0;
  background:var(--glass); border:1px solid var(--glass-border); border-radius:14px; overflow:hidden; position:relative}
button.vt-row:hover{border-color:var(--ink2)}
.vt-stripe{width:4px; align-self:stretch; border-radius:0 3px 3px 0; background:var(--track); flex:none}
.nivel-urgent > .vt-stripe{background:var(--bad)}
.nivel-warn > .vt-stripe{background:var(--warn)}
.nivel-info > .vt-stripe{background:var(--accent)}
.vt-main{flex:1; min-width:0}
.vt-t{font-weight:700; font-size:14.5px; letter-spacing:-.01em}
.vt-consejo{font-size:12.5px; color:var(--muted); margin-top:3px}
.vt-side{display:flex; align-items:center; gap:9px; flex:none; padding-left:10px}
.vt-monto{font-weight:800; font-variant-numeric:tabular-nums; font-size:14px}
.vt-fecha{font-size:11.5px}
.vt-acciones{display:flex; gap:7px; flex-wrap:wrap; margin-top:9px}
.chico{padding:4px 11px; font-size:12px}
.bad{color:var(--bad); border-color:color-mix(in srgb, var(--bad) 40%, transparent)}
.chip.q3{color:var(--warn); border-color:color-mix(in srgb, var(--warn) 45%, transparent)}
.chip.q4{color:var(--bad); border-color:color-mix(in srgb, var(--bad) 45%, transparent)}
.chip.mal{color:var(--bad); border-color:color-mix(in srgb, var(--bad) 45%, transparent)}
.ic.mini{width:13px; height:13px; display:inline-block; vertical-align:-2px}

.vt-cols{display:flex; gap:12px; overflow-x:auto; padding-bottom:10px; align-items:flex-start}
.vt-col{flex:0 0 268px; background:var(--surface2); border-radius:16px; padding:12px}
.vt-col-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; padding:0 4px}
.vt-col-head b{font-size:13.5px}
.vt-col-head span{font-size:11px; color:var(--muted); font-weight:700; font-variant-numeric:tabular-nums}
.vt-col-body{display:flex; flex-direction:column; gap:8px}
.vt-card{display:block; width:100%; text-align:left; background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--track); border-radius:12px; padding:11px 12px}
.vt-card:hover{border-color:var(--ink2)}
.vt-card.q2{border-left-color:var(--warn)}
.vt-card.q3, .vt-card.q4{border-left-color:var(--bad)}
.vt-cuenta{font-size:11.5px; margin-top:2px}
.vt-card-row{display:flex; align-items:center; justify-content:space-between; margin-top:8px}
.vt-chips{display:flex; gap:5px; flex-wrap:wrap; margin-top:8px}
.vt-vacia{font-size:12px; color:var(--muted); text-align:center; padding:14px 0}

.vt-team{display:grid; grid-template-columns:repeat(auto-fill, minmax(268px, 1fr)); gap:14px}
.vt-persona{min-height:0; padding:18px}
.vt-persona-head{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.vt-nums{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:10px}
.vt-nums b{display:block; font-size:17px; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.vt-nums b.rojo{color:var(--bad)}
.vt-nums span{display:block; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700}

.vt-ficha-bar{display:flex; align-items:center; gap:12px; margin-bottom:18px}
.vt-ficha-t{font-size:19px; letter-spacing:-.02em}
.vt-consejos{display:flex; flex-direction:column; gap:6px; margin-bottom:18px}
.vt-consejo-fila{display:flex; align-items:center; gap:12px; font-size:13px; color:var(--ink2); font-weight:600;
  background:var(--glass); border:1px solid var(--glass-border); border-radius:12px; padding:10px 14px 10px 0; overflow:hidden}
.vt-ficha-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:14px}
.vt-bloque{min-height:0; padding:20px; display:block}
.vt-bloque h3{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:12px}
.vt-tipos, .vt-etapas{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px}
.vt-tipos .ghost.activo{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.vt-bloque textarea{width:100%; margin-bottom:12px}
.vt-prox{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px}
.vt-cierre{display:flex; gap:8px; padding-top:12px; border-top:1px solid var(--line)}
.vt-form-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:12px; margin-bottom:16px}
.vt-timeline{display:flex; flex-direction:column; gap:2px}
.vt-hito{display:flex; align-items:flex-start; gap:12px; padding:11px 4px; border-bottom:1px solid var(--line)}
.vt-hito-ic{color:var(--muted); padding-top:2px}
.vt-hito > div{flex:1; min-width:0}

.vt-pregunta{position:fixed; inset:0; z-index:80; background:color-mix(in srgb, #000 45%, transparent);
  display:flex; align-items:center; justify-content:center; padding:20px}
.vt-pregunta-caja{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px;
  max-width:420px; width:100%; text-align:center; box-shadow:var(--shadow)}
.vt-pregunta-caja b{display:block; margin-bottom:16px; font-size:15px}
.vt-opts{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:16px}

@media (max-width:760px){
  .vt-bar{flex-wrap:wrap; overflow:visible}
  .vt-bar .tabs{width:100%; overflow-x:auto; padding-bottom:4px}
  .vt-bar .spacer{display:none}
  .vt-ficha-grid{grid-template-columns:1fr}
  .vt-prox{grid-template-columns:1fr}
  .vt-side{flex-direction:column; align-items:flex-end; gap:5px}
  .vt-row{padding-right:12px}
  .vt-col{flex:0 0 78vw}
}

/* ---------- Cotizador (dentro del módulo de Ventas) ---------- */
.cz-tiles{display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; margin-bottom:16px}
.cz-tile{flex:0 0 178px; text-align:left; background:var(--glass); border:1px solid var(--glass-border);
  border-radius:14px; padding:13px 15px; display:flex; flex-direction:column; gap:3px}
.cz-tile:hover{border-color:var(--ink2)}
.cz-tile.activo{border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent)}
.cz-tile b{font-size:14px; letter-spacing:-.01em}
.cz-tile .muted{font-size:11.5px}
.cz-precio-t{font-weight:800; font-variant-numeric:tabular-nums; margin:4px 0 2px}
.cz-util{font-size:10.5px !important; font-weight:700}
.cz-tile.nuevo{align-items:center; justify-content:center; border-style:dashed; color:var(--muted); font-weight:700}
.cz-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start}
.cz-col{display:flex; flex-direction:column; gap:14px; min-width:0}
.cz-card{min-height:0; padding:18px; display:block}
.cz-card h3{font-size:12.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:12px}
.cz-card h3 small{text-transform:none; letter-spacing:0; font-weight:600; opacity:.75}
.cz-card label{margin-bottom:10px}
.cz-fila{display:grid; grid-template-columns:22px 1fr 88px 76px 44px 24px; gap:6px; align-items:center; margin-bottom:6px}
.cz-fila.apagada{opacity:.42}
.cz-fila input, .cz-fila select{padding:5px 8px; font-size:12.5px; margin:0}
.cz-tgl{width:20px; height:20px; border-radius:6px; border:1px solid var(--line); background:transparent; padding:0}
.cz-tgl.on{background:var(--accent); border-color:var(--accent)}
.cz-tgl.on::after{content:'✓'; color:#1A1C16; font-size:12px; font-weight:900; line-height:1}
.cz-rm{border:0; background:transparent; color:var(--muted); font-size:12px; padding:2px 4px; border-radius:6px}
.cz-rm:hover{color:var(--bad); background:var(--surface2)}
.cz-fila .minibar{margin:0}
.cz-fila .minibar.men b{background:var(--accent)}
.cz-plazos{display:flex; gap:6px; margin-top:14px; overflow-x:auto}
.cz-plazo{flex:1 0 auto; border:1px solid var(--line); background:transparent; border-radius:11px; padding:8px 10px; text-align:center}
.cz-plazo span{display:block; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700}
.cz-plazo b{display:block; font-size:13px; font-variant-numeric:tabular-nums; margin-top:2px}
.cz-plazo.activo{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent)}
.cz-mini{display:flex; height:3px; border-radius:2px; overflow:hidden; margin-top:5px; background:var(--track)}
.cz-mini i{display:block; background:var(--ink2)}
.cz-mini i.men{background:var(--accent)}
.cz-dos{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.cz-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:12px 0}
.cz-kpis b{display:block; font-size:15.5px; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.cz-kpis span{display:block; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700}
.cz-kpis b.verde{color:var(--good)} .cz-kpis b.rojo, .cz-tot b.rojo{color:var(--bad)}
.cz-tot b.verde{color:var(--good)}
.cz-pila{display:flex; height:14px; border-radius:999px; overflow:hidden; background:var(--track)}
.cz-pila i{display:block}
.cz-pila .costo{background:var(--ink2)} .cz-pila .uh{background:var(--good)} .cz-pila .ud{background:var(--accent)}
.cz-leyenda{display:flex; justify-content:space-between; font-size:10.5px; color:var(--muted); font-weight:700; margin:6px 0 12px}
.cz-nota{font-size:11px}
.cz-chips{display:flex; gap:4px; margin-top:4px}
.cz-chip{border:1px solid var(--line); background:transparent; border-radius:8px; padding:5px 9px; font-size:12px; font-weight:700; color:var(--ink2)}
.cz-chip.activo{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.cz-anexo-add{display:grid; grid-template-columns:1fr 68px auto; gap:6px; margin:10px 0}
.cz-anexo-add select, .cz-anexo-add input{margin:0; padding:6px 8px; font-size:12.5px}
.cz-aline{display:flex; align-items:center; gap:10px; font-size:12.5px; padding:6px 0; border-bottom:1px solid var(--line)}
.cz-aline b{margin-left:auto; font-variant-numeric:tabular-nums}
.cz-q{display:inline-flex; align-items:center; gap:6px}
.cz-q button{border:1px solid var(--line); background:transparent; border-radius:6px; width:22px; height:22px; padding:0; color:var(--ink2)}
.cz-tot{display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-top:14px}
.cz-tot b{display:block; font-size:15px; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.cz-tot span{display:block; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700}
.cz-tot .grande{grid-column:1/-1; background:var(--surface2); border-radius:12px; padding:11px 13px}
.cz-tot .grande b{font-size:22px}
.cz-cotizar{margin-top:16px; padding-top:14px; border-top:1px solid var(--line)}
.cz-cotizar .primary{width:100%}
.cz-msg{margin-top:10px; font-size:12.5px; font-weight:600; border-radius:11px; padding:10px 12px; display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.cz-msg.bien{background:color-mix(in srgb, var(--good) 14%, transparent); color:var(--good)}
.cz-msg.mal{background:color-mix(in srgb, var(--bad) 12%, transparent); color:var(--bad)}
.cz-hrow{display:grid; grid-template-columns:44px 1fr 108px; gap:9px; align-items:center; padding:5px 0}
.cz-hrow.sel .cz-lbl{color:var(--ink); font-weight:800}
.cz-lbl{font-size:11.5px; color:var(--muted); font-weight:700}
.cz-barra{display:flex; height:12px; border-radius:999px; overflow:hidden; background:var(--track)}
.cz-barra i{display:block}
.cz-barra .inv{background:var(--ink2)} .cz-barra .uh{background:var(--good)} .cz-barra .ud{background:var(--accent)}
.cz-val{text-align:right; font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums}
.cz-val small{display:block; font-size:10px; color:var(--muted); font-weight:600}
.cz-anx-head, .cz-anx{display:grid; grid-template-columns:1fr 76px 76px 78px 22px; gap:6px; align-items:center}
.cz-anx-head{font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; margin-bottom:6px}
.cz-anx{margin-bottom:5px}
.cz-anx input{margin:0; padding:5px 8px; font-size:12.5px}
.cz-ut{font-size:11.5px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums}
.cz-ut.falta{color:var(--warn); font-size:10px}

@media (max-width:900px){
  .cz-grid{grid-template-columns:1fr}
  .cz-fila{grid-template-columns:22px 1fr 74px 66px 20px}
  .cz-fila .minibar{display:none}
}

/* logo Advance en la barra: el lockup es blanco, va sobre chip de tinta fija (sirve en día y noche) */
/* El logo de Advance salió de la barra y del acceso (Fernando, 25 ago 2026): Inteligencia
   es el ente superior del ecosistema y se para en su propio nombre. Sigue estando donde
   representa a la empresa ante un cliente: cotizaciones, informes y decks. */

/* ---------- Cotizaciones (propuesta + PDF) ---------- */
.ct-form{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px}
.ct-form label{margin:0}
.ct-bloque{margin-bottom:14px}
.ct-tabla{margin:12px 0 8px}
.ct-th, .ct-tr{display:grid; grid-template-columns:1fr 74px 92px 74px 104px 22px; gap:6px; align-items:center}
.ct-th{font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; margin-bottom:6px}
.ct-th span:nth-child(5){text-align:right}
.ct-tr{margin-bottom:5px}
.ct-tr input{margin:0; padding:6px 8px; font-size:12.5px}
.ct-imp{text-align:right; font-weight:800; font-size:12.5px; font-variant-numeric:tabular-nums}
.ct-agrega select{width:auto; min-width:210px; padding:5px 10px; font-size:12.5px; margin-bottom:12px}
.ct-sub{display:flex; gap:14px; align-items:baseline; justify-content:flex-end; padding-top:10px; border-top:1px solid var(--line);
  font-size:12px; color:var(--muted); font-weight:600}
.ct-sub b{font-size:17px; color:var(--ink); font-variant-numeric:tabular-nums}
.ct-cierre-num{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px}
.ct-cierre-num b{display:block; font-size:24px; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.ct-cierre-num span{display:block; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700}
.ct-cierre .primary{width:100%}
@media (max-width:760px){
  .ct-th{display:none}
  .ct-tr{grid-template-columns:1fr 1fr; gap:6px}
  .ct-cierre-num{grid-template-columns:1fr}
}

/* ---------- el hub en el teléfono ---------- */
.tel-fila{margin-top:12px}
.tel-fila .hint{margin:0}
.tel-fila .row{flex-wrap:wrap}

/* ---------- buscador de Mi gente ---------- */
.gn-busca{display:flex; align-items:center; gap:10px; margin:0 0 16px; padding:10px 14px;
  background:var(--glass); border:1px solid var(--glass-border); border-radius:14px}
.gn-busca .ic{width:19px; height:19px; color:var(--muted); flex:none}
.gn-busca input{flex:1; margin:0; border:0; background:transparent; padding:2px 0; font-size:14.5px}
.gn-busca input:focus{outline:none}
.gn-busca .hint{flex:none; white-space:nowrap}
@media (max-width:600px){ .gn-busca .hint{display:none} }

/* ---------- Actividades asignadas ---------- */
.act-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); gap:14px}
.act-persona{min-height:0; padding:18px; display:block}
.act-head{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.act-head b{font-size:15px; line-height:1.2}
.act-nums{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px}
.act-nums b{display:block; font-size:19px; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.act-nums b.rojo{color:var(--bad)} .act-nums b.ambar{color:var(--warn)}
.act-nums span{display:block; font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700}
.act-mini{display:flex; flex-direction:column; gap:4px}
.act-min{display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:var(--surface2);
  border:0; border-left:3px solid var(--track); border-radius:8px; padding:7px 10px; font-size:12.5px; font-weight:600; color:var(--ink2)}
.act-min:hover{color:var(--ink)}
.act-min.mal{border-left-color:var(--bad)} .act-min.medio{border-left-color:var(--warn)}
.act-min span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.act-min i{font-style:normal; font-size:10.5px; color:var(--muted); flex:none}
.act-libres{display:flex; flex-wrap:wrap; gap:7px}
.act-libres .chip-min{border:1px dashed var(--line); background:transparent}
.act-libres .chip-min:hover{border-color:var(--ink2); color:var(--ink)}
.cat.mal{color:var(--bad)} .cat.medio{color:var(--warn)}
.vt-t .ic{width:15px; height:15px; display:inline-block; vertical-align:-3px; color:var(--muted)}
#modal-vivo textarea{width:100%}

/* ---------- grupo: cara, propósito y acciones ---------- */
.gr-identidad{display:flex; gap:14px; align-items:flex-start; margin-bottom:12px}
.gr-cara{width:74px; height:74px; flex:none; border-radius:20px; border:1px dashed var(--line);
  background:var(--surface2); color:var(--muted); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:3px; padding:0; overflow:hidden}
.gr-cara:hover{border-color:var(--ink2); color:var(--ink)}
.gr-cara .ic{width:26px; height:26px}
.gr-cara i{font-style:normal; font-size:8.5px; text-transform:uppercase; letter-spacing:.04em; font-weight:700}
.gr-cara img{width:100%; height:100%; object-fit:cover}
.gr-campos{flex:1; min-width:0; display:grid; grid-template-columns:1.6fr 1fr; gap:10px}
.gn-busca.chico{padding:7px 12px; margin-bottom:10px; border-radius:11px}
.gn-busca.chico input{font-size:13px}
.chk span small{font-weight:600}

.conv-head{display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--line);
  background:var(--glass); flex:none}
.conv-cara{width:34px; height:34px; flex:none; border-radius:11px; background:var(--surface2); color:var(--ink2);
  display:flex; align-items:center; justify-content:center; overflow:hidden}
.conv-cara img{width:100%; height:100%; object-fit:cover}
.conv-cara .ic{width:19px; height:19px}
.conv-quien{min-width:0}
.conv-quien b{display:block; font-size:13.5px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.conv-quien small{display:block; font-size:11px; line-height:1.3; max-height:2.6em; overflow:hidden}
.conv-head .solo-icono{padding:5px 7px}
.conv-head .solo-icono .ic{width:17px; height:17px}

/* ---------- alertas dentro del hub ---------- */
#alertas{position:fixed; top:66px; right:16px; z-index:90; display:flex; flex-direction:column; gap:9px;
  width:min(340px, calc(100vw - 32px)); pointer-events:none}
.alerta{pointer-events:auto; display:flex; align-items:flex-start; gap:11px; text-align:left; width:100%;
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:14px; padding:12px 13px; box-shadow:var(--shadow); opacity:0; transform:translateX(14px);
  transition:opacity .22s, transform .22s}
.alerta.entra{opacity:1; transform:none}
.alerta-ic{color:var(--accent); flex:none; padding-top:1px}
.alerta-ic .ic{width:19px; height:19px}
.alerta-txt{flex:1; min-width:0}
.alerta-txt b{display:block; font-size:13.5px; line-height:1.25}
.alerta-txt i{display:block; font-style:normal; font-size:12px; color:var(--muted); margin-top:2px}
.alerta-x{color:var(--muted); font-size:12px; flex:none; padding:0 2px}
.alerta-x:hover{color:var(--ink)}
@media (max-width:760px){ #alertas{top:auto; bottom:78px; right:12px; left:12px; width:auto} }

/* ---------- ajustes: avisos y apariencia ---------- */
.av-tabla{margin:12px 0}
.av-th, .av-fila{display:grid; grid-template-columns:1fr 90px 90px; gap:10px; align-items:center}
.av-th{font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; margin-bottom:8px}
.av-th span:not(:first-child), .av-fila .sw{justify-self:center}
.av-fila{padding:10px 0; border-top:1px solid var(--line)}
.av-fila b{display:block; font-size:13.5px}
.av-fila small{display:block; font-size:11.5px; line-height:1.35}
.sw{position:relative; display:inline-block; width:40px; height:23px; margin:0; cursor:pointer}
.sw input{position:absolute; opacity:0; width:0; height:0}
.sw i{position:absolute; inset:0; background:var(--track); border-radius:999px; transition:background .18s}
.sw i::after{content:''; position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%;
  background:var(--surface); box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .18s}
.sw input:checked + i{background:var(--accent)}
.sw input:checked + i::after{transform:translateX(17px)}
.av-sonido{display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; padding-top:14px; border-top:1px solid var(--line)}
.av-sonido label{margin:0} .av-sonido select{width:auto; min-width:150px}
.paleta{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:16px}
.tono{display:flex; flex-direction:column; align-items:center; gap:5px; border:1px solid var(--line);
  background:transparent; border-radius:12px; padding:9px 11px}
.tono i{width:26px; height:26px; border-radius:50%; background:var(--t); display:block}
.tono span{font-size:11px; font-weight:700; color:var(--muted)}
.tono.activo{border-color:var(--ink); box-shadow:0 0 0 2px color-mix(in srgb, var(--t) 40%, transparent)}
.tono.activo span{color:var(--ink)}
.como-liga{border:0; background:transparent; padding:0; color:var(--ink2); font-weight:700;
  font-size:inherit; text-decoration:underline; text-underline-offset:2px}
.como-liga:hover{color:var(--ink)}
#modal-vivo .gr-cara{width:70px; height:70px}

/* ---------- Actividades: el equipo en lista ---------- */
.act-lista{display:flex; flex-direction:column; gap:7px}
.act-fila{display:grid; grid-template-columns:minmax(210px, 1.4fr) 1fr auto; gap:14px; align-items:center;
  background:var(--glass); border:1px solid var(--glass-border); border-radius:14px; padding:11px 15px}
.act-fila.libre{background:transparent; border-style:dashed}
.act-quien{display:flex; align-items:center; gap:11px; min-width:0}
.act-quien b{display:block; font-size:14px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.act-quien small{display:block; font-size:11.5px; line-height:1.3}
.avatar.mediano{width:38px; height:38px; font-size:13px}
.act-carga{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.act-carga .chip.medio{color:var(--warn); border-color:color-mix(in srgb, var(--warn) 45%, transparent)}
.act-acciones{display:flex; gap:7px; align-items:center; justify-self:end}
.act-desglose{grid-column:1/-1; display:flex; flex-direction:column; gap:4px; padding-top:10px; margin-top:2px;
  border-top:1px solid var(--line)}
@media (max-width:760px){
  .act-fila{grid-template-columns:1fr; gap:9px}
  .act-acciones{justify-self:stretch}
  .act-acciones .primary{flex:1}
}
.conv-cara b{font-size:13px; font-weight:800}
.conv-head .solo-icono.meet{border-color:color-mix(in srgb, var(--accent) 55%, transparent); color:var(--ink)}
.conv-head .solo-icono.meet:hover{background:color-mix(in srgb, var(--accent) 16%, transparent)}
.pasos{margin:0 0 14px 18px; padding:0; font-size:13px; color:var(--ink2); line-height:1.6}
.pasos li{margin-bottom:4px}

/* ---------- adjuntos del chat ---------- */
#chat-form .clip{flex:none; align-self:flex-end; margin-bottom:2px; padding:8px}
#chat-form .clip .ic{width:19px; height:19px}
.adj-img{display:block; margin-bottom:6px; border-radius:11px; overflow:hidden; max-width:230px}
.adj-img img{display:block; width:100%; height:auto; max-height:260px; object-fit:cover}
.adj-file{display:flex; align-items:center; gap:9px; margin-bottom:6px; padding:9px 11px; border-radius:11px;
  background:color-mix(in srgb, var(--ink) 7%, transparent); text-decoration:none; color:inherit}
.adj-file:hover{background:color-mix(in srgb, var(--ink) 12%, transparent)}
.adj-file .ic{width:20px; height:20px; color:var(--muted); flex:none}
.adj-file b{display:block; font-size:12.5px; line-height:1.25; word-break:break-word}
.adj-file i{display:block; font-style:normal; font-size:10.5px; color:var(--muted)}
.dock-conv.soltando{outline:2px dashed var(--accent); outline-offset:-8px; border-radius:14px}

/* ---------- Inicio ---------- */
.in-cabeza{display:flex; align-items:center; gap:14px; margin:4px 0 20px; flex-wrap:wrap}
.in-cabeza h2{font-size:26px; letter-spacing:-.02em; margin:0}
.in-cabeza p{margin:3px 0 0; font-size:13px}
.in-tudia{display:flex; align-items:center; gap:14px; margin-bottom:20px; padding:14px 18px; border-radius:16px;
  background:var(--glass); border:1px solid var(--glass-border); border-left:3px solid var(--accent)}
.in-tudia.urge{border-left-color:var(--bad)}
.in-tudia b{display:block; font-size:14.5px}
.in-tudia small{display:block; font-size:12px; margin-top:2px}
.in-columnas{display:grid; grid-template-columns:1.25fr 1fr; gap:20px; align-items:start}
.in-col{min-width:0; display:flex; flex-direction:column; gap:12px}
.in-seccion{display:flex; align-items:center; gap:10px}
.in-seccion h3{font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin:0}
.in-seccion .ghost{margin-left:auto}
.noticia{min-height:0; padding:18px 20px; display:block}
.noticia.fijada{border-color:color-mix(in srgb, var(--accent) 50%, transparent)}
.noticia .chip{margin-bottom:8px}
.noticia b{display:block; font-size:16px; letter-spacing:-.01em; line-height:1.3}
.noticia p{margin:8px 0 0; font-size:13.5px; color:var(--ink2); line-height:1.6; white-space:pre-wrap}
.noticia-pie{display:flex; align-items:center; gap:9px; margin-top:14px; padding-top:11px; border-top:1px solid var(--line)}
.in-lista{min-height:0; padding:8px 14px; display:block}
.in-fila{display:flex; align-items:center; gap:11px; padding:10px 0; border-bottom:1px solid var(--line)}
.in-fila:last-child{border-bottom:0}
.in-fila b{display:block; font-size:13.5px; line-height:1.25}
.in-fila small{display:block; font-size:11.5px}
@media (max-width:900px){ .in-columnas{grid-template-columns:1fr} }

/* ---------- ligas dentro de los mensajes ---------- */
.bubble, .sys{overflow-wrap:anywhere; word-break:break-word}
.liga-msg{color:var(--ink); text-decoration:underline; text-underline-offset:2px; font-weight:600}
.liga-msg:hover{color:var(--accent-ink, var(--ink))}
.liga-sala{display:flex; align-items:center; gap:9px; margin-top:8px; padding:9px 12px; border-radius:11px;
  background:var(--ink); color:var(--bg); text-decoration:none}
.liga-sala:hover{opacity:.9}
.liga-sala .ic{width:19px; height:19px; flex:none}
.liga-sala b{display:block; font-size:12.5px; line-height:1.2}
.liga-sala i{display:block; font-style:normal; font-size:10.5px; opacity:.7}
.sys .liga-sala{background:var(--surface2); color:var(--ink)}

/* ---------- Calendario: lista de personas + semana ---------- */
.cal-dos{display:grid; grid-template-columns:280px 1fr; gap:18px; align-items:start}
.cal-panel{position:sticky; top:74px}
.cal-lista{display:flex; flex-direction:column; gap:4px; max-height:min(64vh, 560px); overflow-y:auto; padding-right:2px}
.cal-fila{display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:8px 10px;
  border:1px solid transparent; border-radius:11px; background:transparent}
.cal-fila:hover{background:var(--glass); border-color:var(--glass-border)}
.cal-fila.activo{background:var(--ink); border-color:var(--ink)}
.cal-fila.activo b, .cal-fila.activo i{color:var(--bg)}
.cal-fila > span:not(.avatar){flex:1; min-width:0}
.cal-fila b{display:block; font-size:13px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cal-fila > span:not(.avatar) > i{display:block; font-style:normal; font-size:11px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cal-fila .pdot{flex:none}
.cal-semana{min-width:0}
.slot.agendable{display:flex; align-items:center; justify-content:space-between; width:100%; gap:8px;
  border:0; cursor:pointer; font:inherit; text-align:left}
.slot.agendable i{font-style:normal; font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; opacity:0; transition:opacity .15s}
.slot.agendable:hover{filter:brightness(.94)}
.slot.agendable:hover i{opacity:.75}
@media (max-width:900px){
  .cal-dos{grid-template-columns:1fr}
  .cal-panel{position:static}
  .cal-lista{max-height:230px}
}
.elegidos{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px}
.elegidos .chip-min{background:var(--ink); color:var(--bg); border:0}
.elegidos .chip-min:hover{opacity:.85}
.fila-ic.foto{background:var(--surface2); padding:0; overflow:hidden}
.fila-ic.foto img{width:100%; height:100%; object-fit:cover; display:block}
.ct-modo{display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:10px}
.ct-modo label{margin:0} .ct-modo select{width:auto; min-width:140px}
.ct-msi{display:flex; align-items:center; gap:8px; font-weight:600}
.ct-msi input{width:auto; margin:0}
.ct-incluye{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:10px 0 4px}
.ct-incluye-t{font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:800; margin-right:2px}
.ct-imp i{display:block; font-style:normal; font-size:9.5px; color:var(--muted); font-weight:600}

/* ---------- noticias con cuerpo ---------- */
.noticia.con-media{padding-bottom:16px}
.noti-img{display:block; margin:12px 0 0; border-radius:12px; overflow:hidden}
.noti-img img{display:block; width:100%; height:auto; max-height:340px; object-fit:cover}
.noti-video{display:block; width:100%; margin-top:12px; border-radius:12px; background:#000; max-height:360px}
.noti-marco{margin-top:12px; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--surface2)}
.noti-marco iframe{width:100%; height:100%; border:0; display:block}
.noti-abrir{display:inline-block; margin-top:9px; text-decoration:none}
.noti-formatos{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin-bottom:14px}
.noti-fmt{text-align:left; border:1px solid var(--line); background:transparent; border-radius:12px; padding:10px 12px}
.noti-fmt b{display:block; font-size:13px}
.noti-fmt i{display:block; font-style:normal; font-size:11px; color:var(--muted); line-height:1.35; margin-top:2px}
.noti-fmt.activo{border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent)}

/* ---------- los avatares no se deforman, punto ----------
   Tercera vez que pasa: una regla de lista tipo `.algo span{flex:1}` agarra al avatar
   —que también es un <span>— y lo estira hasta volverlo una elipse con la cara aplastada
   (grupos 25 ago, calendario 25 ago). En vez de perseguir cada regla nueva, el avatar se
   defiende solo: no crece, no se encoge y siempre es cuadrado antes de redondearse. */
/* ---------- niveles de acceso (27 ago 2026) ----------
   Una tarjeta por nivel: cuánto abre (barra), a cuánta gente alcanza (caras) y qué módulos
   trae. Se ve de un vistazo quién queda con qué antes de tocar nada. */
.niveles-caja{margin-top:16px}
.niveles-caja h4{display:flex; align-items:center; gap:10px}
.nv-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:12px; margin-top:12px}
.nv-card{border:1px solid var(--line); border-radius:14px; padding:14px; background:var(--surface);
  cursor:pointer; transition:border-color .16s, transform .16s}
.nv-card:hover{border-color:var(--accent); transform:translateY(-2px)}
.nv-card.medida{cursor:default; border-style:dashed}
.nv-card.medida:hover{border-color:var(--line); transform:none}
.nv-top{display:flex; align-items:center; gap:8px; margin-bottom:2px}
.nv-top b{font-size:15px}
.nv-barra{height:6px; border-radius:3px; background:var(--line); overflow:hidden; margin:10px 0 8px}
.nv-barra i{display:block; height:100%; background:var(--accent)}
.nv-nums{display:flex; gap:14px; font-size:12px; color:var(--muted)}
.nv-nums b{color:var(--ink); font-size:13px}
.nv-caras{display:flex; gap:4px; margin-top:10px; min-height:26px; align-items:center}
.nv-caras .avatar{width:26px; height:26px; font-size:10px}
.nv-mas{font-size:11px; color:var(--muted); align-self:center}
.nv-mods{display:flex; flex-wrap:wrap; gap:4px; margin-top:10px}
.nv-mod{font-size:10.5px; padding:2px 7px; border-radius:20px; border:1px solid var(--line); color:var(--muted)}
/* módulos que los define el nivel: se ven, no se tocan */
.perm.fijo{opacity:.62; cursor:default}
.perm.fijo input{cursor:default}
.campos-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:640px){.campos-2{grid-template-columns:1fr}}
.ghost.peligro{color:#c2410c; border-color:rgba(194,65,12,.35)}
.ghost.peligro:hover{background:rgba(194,65,12,.08)}

/* ---------- Análisis en lista (27 ago 2026) ----------
   Un renglón por documento: el archivo pasó de una decena a varias decenas y en parrilla
   ya no se alcanzaba a leer nada sin barrer la pantalla. */
.an-lista{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; overflow:hidden}
.an-fila{display:flex; align-items:center; gap:12px; padding:11px 14px; text-decoration:none; color:inherit;
  border-bottom:1px solid var(--line); background:var(--surface); transition:background .14s}
.an-fila:last-child{border-bottom:0}
a.an-fila:hover{background:var(--surface2)}
.an-ic{flex:0 0 auto; width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
  background:#3E8DDD1a; color:#185FA5; border:1px solid #3E8DDD40}
.an-ic.auditoria{background:#C4D6001f; color:#5F6E00; border-color:#C4D60055}
.an-ic.tablero{background:#8b5cf61a; color:#6d3bd6; border-color:#8b5cf640}
.an-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.an-txt b{font-size:14px; line-height:1.25}
.an-txt small{color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.an-meta{flex:0 0 auto; font-size:12px; color:var(--muted); min-width:86px; text-align:right}
.an-abre{flex:0 0 auto; font-size:12px; color:var(--muted)}
a.an-fila:hover .an-abre{color:var(--ink)}
.an-fila .edit{flex:0 0 auto}
@media (max-width:720px){
  .an-meta,.an-abre{display:none}
  .an-txt small{white-space:normal}
}

/* ---------- Presentaciones: la parrilla del portafolio con la cara del hub ---------- */
.dk-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:12px}
.dk-card{display:flex; flex-direction:column; gap:6px; padding:18px 16px; text-decoration:none;
  color:inherit; background:var(--surface); border:1px solid var(--line); border-radius:14px;
  transition:border-color .15s, transform .15s}
.dk-card:hover{border-color:var(--accent); transform:translateY(-2px)}
.dk-card.hero{border-left:3px solid var(--accent)}
.dk-k{font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.dk-card.hero .dk-k{color:var(--mark, #5F6E00)}
.dk-card b{font-size:15.5px; line-height:1.25}
.dk-card p{font-size:12.5px; color:var(--muted); line-height:1.45; margin:0}
.dk-abre{margin-top:auto; padding-top:8px; font-size:12px; color:var(--muted)}
.dk-card:hover .dk-abre{color:var(--ink)}

.olvide{background:none; border:0; color:var(--muted); font-size:12.5px; cursor:pointer;
  padding:2px; margin-top:-6px; text-decoration:underline; text-underline-offset:3px}
.olvide:hover{color:var(--ink)}

/* ---------- Notas: la libreta (29 ago 2026) ----------
   Hoja rayada con margen y espiral; cada nota trae su papel (--hoja) y su tinta (--tinta).
   El rayado se dibuja con un gradiente repetido calzado al line-height: si uno cambia sin
   el otro, la letra flota entre renglones. */
.libreta{position:relative; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:var(--hoja, #FDF8E8); box-shadow:var(--shadow); padding:18px 22px 14px 46px}
.lib-espiral{position:absolute; left:10px; top:16px; bottom:16px; display:flex;
  flex-direction:column; justify-content:space-between; width:16px}
.lib-espiral i{width:14px; height:14px; border:2.5px solid #B8BDA8; border-radius:50%;
  background:var(--bg); display:block}
.lib-papel{border-left:2px solid #E8A1A1; padding-left:14px}
.libreta textarea{width:100%; border:0; resize:vertical; background:
    repeating-linear-gradient(transparent, transparent 27px, #C9CEBB 27px, #C9CEBB 28px);
  line-height:28px; font-size:15.5px; color:var(--tinta, #1A1C16); padding:0; outline:none;
  font-family:inherit}
.lib-controles{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px}
.lib-grupo{display:inline-flex; gap:5px; align-items:center}
.lib-hoja{width:22px; height:22px; border-radius:50%; border:1px solid rgba(0,0,0,.15); cursor:pointer}
.lib-hoja.on{outline:2px solid var(--mark); outline-offset:2px}
.lib-tinta{width:22px; height:22px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); cursor:pointer; display:grid; place-items:center; padding:0}
.lib-tinta i{width:12px; height:12px; border-radius:50%; display:block}
.lib-tinta.on{outline:2px solid var(--mark); outline-offset:2px}
.lib-pie{margin-top:10px}
.lib-controles .sel-min{width:auto; max-width:180px}
.lib-pie .hint svg{width:15px; height:15px}

.nota-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; margin-top:18px}
.nota-card.hoja{background:var(--hoja, #FDF8E8); color:var(--tinta, #1A1C16);
  border:1px solid rgba(0,0,0,.09); border-radius:4px 14px 14px 14px; padding:16px 14px 10px 18px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px; min-height:130px;
  background-image:repeating-linear-gradient(transparent, transparent 25px, rgba(0,0,0,.055) 25px, rgba(0,0,0,.055) 26px);
  position:relative}
.nota-card.hoja::before{content:""; position:absolute; left:10px; top:0; bottom:0; width:1.5px;
  background:rgba(214,80,80,.35)}
.nota-card.hoja.fijada{box-shadow:var(--shadow), 0 0 0 2px var(--accent)}
.nota-txt{font-size:14.5px; line-height:26px; word-break:break-word; padding-left:6px}
.nota-txt .nl{min-height:26px}
.nota-txt .casilla{display:flex; align-items:baseline; gap:7px; cursor:pointer}
.nota-txt .casilla input{accent-color:var(--mark); transform:translateY(1px)}
.nota-txt .casilla.hecho span{text-decoration:line-through; opacity:.55}
.nota-pie{display:flex; align-items:center; gap:6px; margin-top:auto; padding-left:6px}
.nota-camp{font-size:11px; color:inherit; opacity:.75; display:inline-flex; align-items:center; gap:4px}
.nota-camp.pasado{opacity:.45; text-decoration:line-through}
.nota-camp svg{width:13px; height:13px}
.nota-b{background:none; border:0; color:inherit; opacity:.6; font-size:12px; cursor:pointer;
  padding:2px 4px; border-radius:6px; font-family:-apple-system,system-ui,sans-serif}
.nota-b:hover{opacity:1; background:rgba(0,0,0,.07)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .libreta,
  :root:not([data-theme="light"]) .nota-card.hoja{filter:brightness(.94)}
}

/* ---------- Chat en grande: el dock adoptado por la vista de página (29 ago 2026) ----------
   Mismo nodo, otra piel: aquí deja de ser panel flotante y se vuelve columna completa.
   ⚠️ Este bloque ya se perdió una vez en una edición vecina (la de la libreta): si el chat
   grande "se pega" al costado derecho, lo primero es verificar que este bloque exista. */
.chat-marco{margin-top:4px}
.chat-marco .dock.grande{position:static; width:100%; max-width:none; height:calc(100vh - 150px);
  border-radius:16px; box-shadow:var(--shadow); transform:none}
.dock.grande .dock-cuerpo{height:calc(100% - 46px)}
.dock.grande .dock-lista{width:280px; min-width:280px; display:flex; flex-direction:column}
.dock.grande .msgs{font-size:14.5px}
.dock.grande .msgs .burbuja{max-width:640px}
.dock.grande #dock-min{display:none}   /* en página completa no hay a dónde minimizar */
/* en grande las dos columnas están SIEMPRE: el plegado lateral es cosa del panel */
.dock.grande .dock-conv{width:auto; opacity:1; transform:none; pointer-events:auto; overflow:visible; display:flex}
.dock.grande.conversando, .chat-marco .dock.grande{width:100%}
@media (max-width: 900px){
  .dock.grande .dock-lista{width:200px; min-width:200px}
}

/* ---------- paleta de emojis (29 ago 2026) ---------- */
#paleta-emojis{position:fixed; z-index:300; width:320px; max-height:260px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:10px;
  box-shadow:var(--shadow)}
#paleta-emojis p{margin:0 0 4px; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
#paleta-emojis .fila{display:grid; grid-template-columns:repeat(8,1fr); gap:2px; margin-bottom:6px}
#paleta-emojis button{background:none; border:0; font-size:20px; line-height:1.5; cursor:pointer;
  border-radius:8px; padding:3px}
#paleta-emojis button:hover{background:var(--surface2)}
.emoji-btn{font-size:16px}
.con-emoji{position:relative}
.con-emoji .emoji-btn{position:absolute; right:8px; bottom:8px; background:none; border:0; cursor:pointer;
  opacity:.7; border-radius:8px; padding:2px 4px}
.con-emoji .emoji-btn:hover{opacity:1; background:var(--surface2)}

/* ---------- confirmación de lectura (29 ago 2026) ---------- */
.palomas{font-size:11px; letter-spacing:-2px; margin-left:6px; color:var(--muted); opacity:.85;
  font-family:-apple-system,system-ui,sans-serif}
.palomas.alguien{color:var(--muted)}
.palomas.todos{color:var(--mark)}

/* ---------- Comunicados (4 sep 2026) ---------- */
.com-linea{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px}
.com-mes-b{border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:16px}
.com-mes-b.actual{border-color:var(--accent); box-shadow:inset 0 3px 0 var(--accent)}
.com-mes-t{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.com-mes-t b{font-size:14px; text-transform:capitalize}
.com-fecha{flex:0 0 46px; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums}
.com-item.vencido{color:var(--warn)}
.com-item.vencido i{color:var(--warn); font-weight:700}
.com-fecha-f{flex:0 0 56px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.an-fila.com-vencida .an-txt b{color:var(--warn)}
.an-fila.com-vencida .an-meta{color:var(--warn)}
.an-ic:not(:has(svg)){font-size:15px; color:var(--good); font-weight:700}
.com-item{display:flex; gap:8px; font-size:13.5px; padding:5px 0; color:var(--ink)}
.com-item i{font-style:normal; color:var(--muted); width:14px; text-align:center}
.com-item.hecho{color:var(--muted)}
.com-item.hecho i{color:var(--good)}
.com-barra{flex:0 0 120px; height:6px; border-radius:3px; background:var(--track); overflow:hidden; align-self:center}
.com-barra i{display:block; height:100%; background:var(--accent)}
/* Comunicados · Correo · estadística (10 sep 2026, Fernando: «que los datos sean más claros, en filas o en
   columnas, y cada cuadro con la estadística precisa como lo hace Brevo»): cada cifra lleva su número Y su
   porcentaje, nunca uno solo, para no obligar a calcular de cabeza. */
.co-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:10px; margin-bottom:16px}
.co-kpi{background:var(--surface2); border:1px solid var(--line); border-radius:14px; padding:12px 14px}
.co-kpi .co-etq{display:block; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.co-kpi b{display:block; font-size:26px; line-height:1.1; letter-spacing:-.03em; margin-top:6px; font-variant-numeric:tabular-nums}
.co-kpi small{display:block; margin-top:4px; font-size:11.5px; color:var(--muted); line-height:1.35}
.co-kpi.bien b{color:var(--good)} .co-kpi.mal b{color:var(--bad)}
.co-kpi.mal{background:color-mix(in srgb, var(--bad) 10%, var(--surface2)); border-color:color-mix(in srgb, var(--bad) 35%, var(--line))}
.co-cab{display:flex; align-items:center; gap:12px; margin:24px 2px 12px}
.seg.chico button{font-size:12px; padding:5px 12px}
.co-tabla-caja{border:1px solid var(--line); border-radius:14px; overflow-x:auto}
.co-tabla{width:100%; border-collapse:collapse; font-size:13.5px; min-width:720px}
.co-tabla th{text-align:left; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:800; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--surface2)}
.co-tabla td{padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
.co-tabla tr:last-child td{border-bottom:0}
.co-tabla td b{display:block; font-size:13.5px; line-height:1.3}
.co-tabla td small{display:block; color:var(--muted); font-size:11.5px}
.co-tabla .r{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.co-tabla td.r em{display:block; font-style:normal; font-size:11px; color:var(--muted)}
.co-tabla td.r.mal, .co-tabla td.r.mal em{color:var(--bad)}
.co-tabla tr.co-borrador td{color:var(--muted)}
.co-tarjetas{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px}
.co-tarjeta{background:var(--surface2); border:1px solid var(--line); border-radius:16px; padding:16px 18px}
.co-tarjeta header{display:flex; align-items:flex-start; gap:10px}
.co-tarjeta header b{flex:1; font-size:15px; line-height:1.3; letter-spacing:-.01em}
.co-tarjeta .co-sub{display:block; color:var(--muted); font-size:12px; margin-top:2px}
.co-barra{height:6px; border-radius:3px; background:var(--track); overflow:hidden; margin:14px 0 4px}
.co-barra i{display:block; height:100%; background:var(--accent)}
.co-datos{display:grid; grid-template-columns:repeat(3,1fr); gap:10px 8px; margin-top:12px}
.co-dato span{display:block; font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.co-dato b{display:block; font-size:19px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin-top:2px}
.co-dato small{display:block; font-size:10.5px; color:var(--muted); line-height:1.3}
.co-dato.mal b{color:var(--bad)}
.co-tarjeta.borrador{opacity:.75}
@media(max-width:640px){.co-datos{grid-template-columns:repeat(2,1fr)}}

/* Calendario de envíos (10 sep 2026): un lunes por casilla, agrupados por mes. El color dice si el envío
   se cumplió; el detalle se abre debajo, no en un modal, para poder comparar con el calendario a la vista. */
.co-cal{display:flex; flex-wrap:wrap; gap:18px 26px; padding:4px 2px}
.co-mes{display:flex; flex-direction:column; gap:8px}
.co-mes-etq{font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-transform:capitalize}
.co-semanas{display:flex; gap:8px; flex-wrap:wrap}
.co-dia{width:74px; padding:9px 6px 8px; border-radius:12px; border:1px solid var(--line); background:var(--surface2);
  font:inherit; cursor:pointer; text-align:center; display:flex; flex-direction:column; gap:1px; transition:transform .12s}
.co-dia:hover{transform:translateY(-2px)}
.co-dia b{font-size:17px; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.co-dia span{font-size:9.5px; color:var(--muted); line-height:1.2}
.co-dia em{font-style:normal; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums}
.co-dia.ok{border-color:color-mix(in srgb, var(--good) 55%, var(--line)); background:color-mix(in srgb, var(--good) 12%, var(--surface2))}
.co-dia.ok em{color:var(--good)}
.co-dia.parcial{border-color:color-mix(in srgb, var(--warn) 55%, var(--line)); background:color-mix(in srgb, var(--warn) 12%, var(--surface2))}
.co-dia.parcial em{color:var(--warn)}
.co-dia.cero{border-color:color-mix(in srgb, var(--bad) 45%, var(--line)); background:color-mix(in srgb, var(--bad) 9%, var(--surface2))}
.co-dia.cero span{color:var(--bad)}
.co-dia.futuro, .co-dia.previo{opacity:.5; border-style:dashed}
.co-dia.futuro{cursor:default}
.co-dia.abierta{outline:2px solid var(--accent); outline-offset:1px}
.co-ley{display:flex; gap:12px; align-items:center; font-size:11.5px; color:var(--muted); flex-wrap:wrap}
.co-ley i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:4px; vertical-align:-1px; border:1px solid var(--line)}
.co-ley i.ok{background:color-mix(in srgb, var(--good) 45%, var(--surface2))}
.co-ley i.parcial{background:color-mix(in srgb, var(--warn) 45%, var(--surface2))}
.co-ley i.cero{background:color-mix(in srgb, var(--bad) 35%, var(--surface2))}
.co-ley i.futuro{background:transparent; border-style:dashed}

/* Comunicados · Correo (9 sep 2026): semanas del Pulso y base por tipo de equipo */
.co-sem{display:flex; align-items:flex-end; gap:8px; height:140px; padding:4px 2px 0}
.co-col{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; height:100%}
.co-col i{display:block; width:100%; max-width:56px; background:var(--accent); border-radius:6px 6px 2px 2px}
.co-col b{font-size:11.5px} .co-col small{font-size:10px; color:var(--muted); white-space:nowrap}
.co-stack{display:flex; height:14px; border-radius:7px; overflow:hidden; background:var(--track)}
.co-stack i{display:block; height:100%}
.co-stack i.esencial, .co-leyenda i.esencial{background:var(--mark)}
.co-stack i.can, .co-leyenda i.can{background:var(--accent)}
.co-stack i.dashcam, .co-leyenda i.dashcam{background:#6d3bd6}
.co-leyenda{display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin-top:8px}
.co-leyenda i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px}
.co-mini{display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--line); margin-top:10px; padding-top:8px; font-size:12px; color:var(--muted)}
.tiles.compacta .tile .co-mini b{font-size:20px; color:var(--ink); letter-spacing:-.02em}
.chip.marketing{border-color:var(--warn); color:var(--warn)}
.chip.encuesta{border-color:#6d3bd6; color:#6d3bd6}
.chip.ok{border-color:var(--good); color:var(--good)}
.tile.apagada{opacity:.55}
.an-meta.mal{color:var(--bad)}

/* ---------- Comunicados · calendario vivo (4 sep 2026) ----------
   Cada envío es un BOTÓN: pendiente abre el editor con su tipo, enviado abre su medida.
   La franja izquierda dice la categoría (lima utilidad · ámbar marketing · morado encuesta). */
.cal-mes-head{display:flex; align-items:center; gap:14px; margin:26px 0 10px}
.cal-avance{width:140px; height:6px; border-radius:3px; background:var(--track); overflow:hidden}
.cal-avance i{display:block; height:100%; background:var(--accent)}
.cal-lista{display:flex; flex-direction:column; gap:8px}
.cal-envio{display:flex; align-items:center; gap:14px; width:100%; text-align:left; font:inherit;
  color:inherit; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:12px; padding:12px 16px; cursor:pointer; box-shadow:var(--shadow);
  transition:transform .14s, border-color .14s}
.cal-envio:hover{transform:translateY(-1px); border-color:var(--mark); border-left-color:var(--mark)}
.cal-envio.cat-marketing{border-left-color:var(--warn)}
.cal-envio.cat-encuesta{border-left-color:#6d3bd6}
.cal-envio.hecho{opacity:.72; border-left-color:var(--good)}
.cal-envio.vencido{border-color:color-mix(in srgb, var(--warn) 45%, var(--line))}
.cal-dia{flex:0 0 44px; text-align:center; background:var(--surface2); border-radius:10px; padding:5px 0}
.cal-dia b{display:block; font-size:17px; line-height:1.1; font-variant-numeric:tabular-nums}
.cal-dia small{font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.cal-envio .an-txt b{font-size:14.5px}
.cal-estado{flex:0 0 auto; text-align:right; font-size:12.5px; display:flex; flex-direction:column; gap:2px; align-items:flex-end}
.cal-estado .ok{font-style:normal; color:var(--good); font-weight:600}
.cal-estado .tarde{font-style:normal; color:var(--warn); font-weight:600}
.cal-estado em{font-style:normal; color:var(--muted)}
.cal-envio:hover .cal-estado em{color:var(--ink); font-weight:600}
@media (max-width:720px){ .cal-estado em{display:none} }

/* ---------- citar y editar en el chat (4 sep 2026) ---------- */
.bubble{position:relative}
.msg-acciones{position:absolute; top:4px; right:6px; display:none; gap:2px}
.bubble:hover .msg-acciones{display:inline-flex}
.msg-acciones button{border:0; background:var(--surface); border:1px solid var(--line);
  border-radius:7px; width:24px; height:22px; font-size:12px; cursor:pointer; color:var(--muted);
  display:grid; place-items:center; padding:0}
.msg-acciones button:hover{color:var(--ink); border-color:var(--mark)}
.cita{border-left:3px solid var(--accent); background:color-mix(in srgb, var(--accent) 9%, transparent);
  border-radius:6px; padding:5px 9px; margin:2px 0 6px; font-size:12.5px; display:flex;
  flex-direction:column; gap:1px; max-width:100%; overflow:hidden}
.cita b{font-size:11.5px; color:var(--mark)}
.cita span{color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.editado{font-size:10.5px; color:var(--muted); margin-left:4px}
#chat-redactando{display:flex; align-items:center; gap:10px; padding:8px 14px;
  border-top:1px solid var(--line); background:var(--surface2); font-size:12.5px}
#chat-redactando b{color:var(--mark); white-space:nowrap}
#chat-redactando span{color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1}
#chat-redactando button{border:0; background:none; cursor:pointer; color:var(--muted); font-size:13px}
#chat-redactando button:hover{color:var(--ink)}

/* vista previa del adjunto pendiente: se ve ANTES de mandarse */
#chat-adjunto-prev{display:flex; align-items:center; gap:10px; padding:8px 14px;
  border-top:1px solid var(--line); background:var(--surface2); font-size:12.5px}
#chat-adjunto-prev img{width:44px; height:44px; object-fit:cover; border-radius:8px; border:1px solid var(--line)}
#chat-adjunto-prev svg{width:26px; height:26px; color:var(--muted)}
#chat-adjunto-prev span{display:flex; flex-direction:column; overflow:hidden}
#chat-adjunto-prev b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#chat-adjunto-prev i{font-style:normal; color:var(--muted); font-size:11.5px}
#chat-adjunto-prev button{margin-left:auto; border:0; background:none; cursor:pointer; color:var(--muted); font-size:13px}
#chat-adjunto-prev button:hover{color:var(--ink)}

/* ---------- visor de imágenes (7 sep 2026): capa propia, nunca otra pestaña ---------- */
#visor-img{position:fixed; inset:0; z-index:400; background:rgba(12,14,8,.92);
  display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px;
  animation:visor-entra .16s ease}
@keyframes visor-entra{from{opacity:0}to{opacity:1}}
#visor-img img{max-width:94vw; max-height:84vh; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.5)}
.visor-top{position:fixed; top:0; left:0; right:0; display:flex; align-items:center; gap:14px;
  padding:14px 18px calc(14px + env(safe-area-inset-top)); color:#EDEFE2; font-size:13px}
.visor-top span{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.85}
.visor-top a,.visor-top button{background:rgba(255,255,255,.14); border:0; color:#fff; width:34px; height:34px;
  border-radius:50%; display:grid; place-items:center; font-size:15px; cursor:pointer; text-decoration:none}
.visor-top a:hover,.visor-top button:hover{background:rgba(255,255,255,.28)}

/* fichas de hora para la reunión de grupo (7 sep 2026) */
.cg-horas{display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:6px; margin-top:12px}
.cg-chip{border:1px solid var(--line); background:var(--surface); border-radius:9px; padding:7px 0;
  font:inherit; font-size:13px; font-variant-numeric:tabular-nums; cursor:pointer; color:var(--ink)}
.cg-chip:hover{border-color:var(--mark)}
.cg-chip.activo{background:var(--accent); border-color:var(--accent); color:#1A1C16; font-weight:700}
.cg-chip.comida{opacity:.45}

/* ---------- semana de disponibilidad, ordenada (7 sep 2026) ----------
   Lo libre son fichas chicas en cuadrícula; lo ocupado es UNA línea tenue al pie. Antes
   los dos pesaban igual y la semana parecía un muro de pastillas. */
.cal-dia .cal-huecos{display:flex; flex-wrap:wrap; gap:5px}
.cal-dia .cal-huecos .slot{display:inline-flex; width:auto; padding:4px 9px; font-size:12px;
  margin:0; font-variant-numeric:tabular-nums}
.cal-dia .cal-huecos .slot i{display:none}
.cal-ocupado{display:block; margin-top:8px; padding-top:7px; border-top:1px dashed var(--line);
  font-size:10.5px; color:var(--muted); line-height:1.5; overflow:hidden; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical}

.avatar{flex:0 0 auto !important; aspect-ratio:1}

/* ---------- Reclutamiento: la barra de mando del módulo (27 ago 2026) ----------
   Los CUATRO bloques filtran: empresa y herramienta por chips, el dinero por periodo y
   los procesos por quién los lleva. Misma anatomía en los cuatro — rótulo arriba, control
   abajo, pie alineado — para que se lea como una sola pieza y no como cuatro widgets. */
.rh-barra{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.25fr) minmax(206px,.75fr) minmax(206px,.75fr);
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  overflow:hidden; margin:16px 0 20px;
}
.rh-f{
  padding:14px 18px; display:flex; flex-direction:column; gap:10px; min-width:0;
  border-left:1px solid var(--line);
}
.rh-f:first-child{border-left:0}
.rh-lab{
  margin:0; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); font-weight:700; display:flex; align-items:center; gap:8px;
  flex-wrap:wrap; row-gap:3px; min-width:0;
}
.rh-lab > *:not(.spacer){flex:none}
.rh-det{
  border:0; background:transparent; color:var(--mark); font-size:9.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; padding:0; text-decoration:underline;
  text-underline-offset:2px;
}
.rh-det:hover{color:var(--ink)}
.rh-chips{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.rh-chip{
  display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line);
  background:var(--surface2); color:var(--ink2); border-radius:8px; padding:5px 10px;
  font-size:12.5px; font-weight:600; line-height:1.25; white-space:nowrap;
  transition:border-color .12s, background .12s, color .12s;
}
.rh-chip:hover{border-color:var(--ink2); color:var(--ink)}
.rh-chip.on{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.rh-chip b{
  font-size:11px; font-weight:700; opacity:.6; font-variant-numeric:tabular-nums;
  padding-left:1px;
}
.rh-chip.mas{padding:5px 9px; color:var(--muted); font-weight:400}
/* el punto solo se pinta cuando algo pide atención: un verde permanente es ruido */
.rh-chip .pt.est{width:6px; height:6px; border-radius:50%; flex:none; display:block; background:var(--warn)}
.rh-chip.sin_conectar .pt.est{background:var(--muted)}
.rh-limpia{
  border:0; background:transparent; color:var(--mark); font-size:10px; font-weight:700;
  letter-spacing:.08em; padding:0 2px; text-decoration:underline; text-underline-offset:2px;
}
/* los dos bloques de cifra: número grande, su filtro debajo, y el pie alineado con los demás */
.rh-num b{
  font-size:23px; font-weight:700; letter-spacing:-.025em; line-height:1;
  font-variant-numeric:tabular-nums; display:block;
}
.rh-num b small{font-size:13px; font-weight:600; color:var(--muted); letter-spacing:0}
.rh-num span{font-size:11.5px; color:var(--muted); line-height:1.25; margin-top:auto}
.rh-sel{
  font:inherit; font-size:12.5px; font-weight:600; color:var(--ink2);
  background:var(--surface2); border:1px solid var(--line); border-radius:8px;
  padding:5px 8px; width:100%; max-width:100%;
}
.rh-sel:hover{border-color:var(--ink2)}
@media (max-width:1080px){
  .rh-barra{grid-template-columns:1fr 1fr}
  .rh-f:nth-child(3){border-left:0}
  .rh-f:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:640px){
  .rh-barra{grid-template-columns:1fr}
  .rh-f{border-left:0; border-top:1px solid var(--line)}
  .rh-f:first-child{border-top:0}
}

.rh-filtrando{margin:0 2px 14px; font-size:13px; color:var(--ink2)}
.rh-filtrando b{color:var(--ink)}
.rh-tabla{overflow-x:auto; margin:0 0 18px; border:1px solid var(--line); border-radius:12px; background:var(--surface)}
.rh-tabla .q-table{width:100%; min-width:520px; border-collapse:collapse; font-size:13px}
.rh-tabla th{
  text-align:left; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  font-weight:700; padding:9px 12px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.rh-tabla td{padding:9px 12px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums}
.rh-tabla tr:last-child td{border-bottom:0}
.rh-tabla .der{text-align:right}
.rh-tabla tr.tenue{opacity:.42}
.rh-pt{width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:7px; background:var(--good)}
.rh-pt.revisar{background:var(--warn)} .rh-pt.sin_conectar{background:var(--muted)}
/* de dónde llega el dato: por API, entrando al portal, o capturado a mano */
.rh-via{font-size:11.5px; padding:2px 7px; border-radius:6px; border:1px solid var(--line); color:var(--muted); white-space:nowrap}
.rh-via.api{color:var(--good); border-color:color-mix(in srgb, var(--good) 42%, transparent)}
.rh-via.portal{color:var(--warn); border-color:color-mix(in srgb, var(--warn) 42%, transparent)}

/* la ficha de la vacante: el puesto manda, debajo una sola línea de contexto y la
   descripción con aire, recortada a dos renglones para que la tarjeta no se sature */
.vac-tit{min-width:0}
.vac-tit b{font-size:16px; font-weight:700; letter-spacing:-.015em; line-height:1.25; display:block}
.vac-ctx{
  margin:4px 0 0; font-size:10.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); display:flex; flex-wrap:wrap;
  align-items:center; gap:6px;
}
.vac-ctx i{font-style:normal; opacity:.45}
.vac-ctx .dueno{color:var(--ink2)}
.vac-ctx .dueno.cliente{color:var(--mark)}
.vac-desc{
  margin:12px 0 0; font-size:13.5px; line-height:1.5; color:var(--ink2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.rh-fuentes{display:flex; flex-wrap:wrap; gap:5px; margin:8px 0 2px}
.rh-fuente{
  font-size:11.5px; padding:2px 8px; border-radius:20px; font-weight:600;
  background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--mark);
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.rh-fuente.sin{background:transparent; color:var(--muted); border-color:var(--line); font-weight:400}
.rh-chips.elige{gap:6px; margin-top:4px}
.rh-mini{width:64px; padding:4px 7px; text-align:center; font-variant-numeric:tabular-nums}
/* el modal de conexiones lleva 7 columnas: 660px lo dejaban cortado a la derecha */
.modal.ancho:has(.rh-conexiones){width:min(900px, 96vw)}
.rh-conexiones th{white-space:normal}
.rh-conexiones .sel-min{max-width:130px}

/* el pulso de la vacante: última postulación, y en ámbar cuando lleva 14 días sin nadie */
.rh-ultimo{
  display:flex; align-items:baseline; gap:9px; width:100%; text-align:left;
  border:1px solid var(--line); background:var(--surface2); border-radius:10px;
  padding:8px 12px; margin:10px 0 2px; transition:border-color .12s;
}
.rh-ultimo:hover{border-color:var(--ink2)}
.rh-ultimo .et{
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  font-weight:700; flex:none;
}
.rh-ultimo b{font-size:13.5px; font-weight:600; letter-spacing:-.01em; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rh-ultimo .cuando{font-size:12px; color:var(--muted); flex:none}
.rh-ultimo.vacio b{color:var(--muted); font-weight:400}
.rh-ultimo.frio{
  border-color:color-mix(in srgb, var(--warn) 45%, transparent);
  background:color-mix(in srgb, var(--warn) 9%, var(--surface2));
}
.rh-ultimo.frio .cuando{color:var(--warn); font-weight:600}

/* tendencia de gasto por mes: barras finas, la del mes en curso destacada.
   Rejilla y ejes se omiten a propósito — a este tamaño solo serían ruido. */
.rh-tend{display:flex; flex-direction:column; gap:3px}
.rh-tend svg{width:100%; height:34px; display:block; overflow:visible}
.rh-tend .b{fill:color-mix(in srgb, var(--accent) 55%, transparent)}
.rh-tend .b.cima{fill:var(--accent)}
.rh-tend .b.hoy{fill:var(--mark)}
.rh-tend .cero{fill:var(--line)}
.rh-tend .pie{display:flex; align-items:baseline; gap:6px; font-size:9.5px; color:var(--muted); white-space:nowrap}
.rh-tend .pie i{font-style:normal; text-transform:uppercase; letter-spacing:.06em}
/* .rh-num b vale 23px y alcanza a este <b>: hay que fijarle su propio tamaño */
.rh-tend .pie b{flex:1; text-align:center; font-size:10.5px; font-weight:700; color:var(--ink2);
  font-variant-numeric:tabular-nums; line-height:1.2}
.rh-tend.vacia{height:34px; border-bottom:1px solid var(--line)}

/* avance de revisión: sube conforme se clasifican candidatos en el tablero del bench */
.rh-avance{
  grid-column:1 / -1; border-top:1px solid var(--line); background:var(--surface2);
  padding:9px 18px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.rh-avance .et{
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  font-weight:700; flex:none;
}
.rh-avance .pct{
  font-size:17px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
  flex:none; line-height:1;
}
.rh-avance .pct i{font-style:normal; font-size:11px; color:var(--muted); font-weight:600}
.rh-avance .track{
  flex:1 1 160px; min-width:120px; height:7px; border-radius:4px;
  background:var(--track); overflow:hidden; display:flex; gap:1px;
}
.rh-avance .track i{display:block; height:100%}
.rh-avance .track i.lista{background:var(--good)}
.rh-avance .track i.entrevista{background:var(--accent)}
.rh-avance .track i.descartado{background:color-mix(in srgb, var(--muted) 55%, transparent)}
.rh-avance .av-txt{font-size:11.5px; color:var(--muted); flex:none; white-space:nowrap}
/* `.nota` ya existe en el hub con display:block y su propio tamaño: por eso este texto
   se partía en dos renglones. Clase propia y tamaño explícito. */
.rh-avance .av-txt b{display:inline; font-size:11.5px; color:var(--ink2); font-variant-numeric:tabular-nums}
.rh-avance.sin .av-txt{font-style:italic}

/* el mismo avance, por vacante, en su ficha */
.vac-avance{display:flex; align-items:center; gap:9px; margin:10px 0 0}
.vac-avance .track{flex:1; height:5px; border-radius:3px; background:var(--track); overflow:hidden}
.vac-avance .track i{display:block; height:100%; background:var(--accent)}
.vac-avance .txt{font-size:11.5px; color:var(--muted); flex:none; font-variant-numeric:tabular-nums}
.vac-avance .txt b{color:var(--ink2); font-weight:700}

/* "Potencializa la descripción": propone, nunca pisa lo que el reclutador escribió */
.rh-ia{
  margin:14px 0 4px; padding:13px 14px; border:1px dashed var(--line);
  border-radius:12px; background:var(--surface2);
}
.rh-ia-tit{margin:0 0 9px; font-size:12.5px; font-weight:700; color:var(--ink)}
.rh-ia-tit small{display:block; font-weight:400; font-size:11.5px; color:var(--muted); margin-top:2px}
.rh-ia textarea{background:var(--surface); font-size:13px}
.rh-ia-cargando{margin-top:10px; font-size:12.5px; color:var(--muted)}
.rh-ia-mal{
  margin-top:10px; font-size:12.5px; color:var(--bad);
  border-left:2px solid var(--bad); padding-left:10px;
}
.rh-ia-out{
  margin-top:11px; padding-top:11px; border-top:1px solid var(--line);
}
.rh-ia-sub{
  margin:10px 0 4px; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); font-weight:700;
}
.rh-ia-sub:first-child{margin-top:0}
.rh-ia-txt{margin:0; font-size:13px; line-height:1.55; color:var(--ink2); white-space:pre-wrap}
.rh-ia-tit-sug{margin:0; font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:8px}
.rh-ia-usar{
  border:0; background:transparent; color:var(--mark); font-size:10px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:underline; text-underline-offset:2px; padding:0;
}
.rh-ia-lista{margin:0; padding-left:16px; display:grid; gap:4px}
.rh-ia-lista li{font-size:12.5px; color:var(--ink2); line-height:1.45}
.rh-ia-nota{
  margin:11px 0 0; font-size:12px; color:var(--muted); font-style:italic;
  border-left:2px solid var(--accent); padding-left:10px;
}
/* la fecha exacta va delante del "hace cuánto": una sirve para cotejar, la otra para juzgar */
.rh-ultimo .cuando i{font-style:normal; color:var(--ink2); font-weight:600; margin-right:7px}
/* calidad del pool: se mide sobre los evaluados, nunca sobre todos los postulados */
.rh-calidad{
  display:inline-flex; align-items:baseline; gap:6px; flex:none; padding:2px 9px;
  border-radius:20px; border:1px solid var(--line); background:var(--surface);
}
.rh-calidad i{font-style:normal; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700}
.rh-calidad b{font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums}
.rh-calidad.alta b{color:var(--good)}
.rh-calidad.media b{color:var(--warn)}
.rh-calidad.baja b{color:var(--bad)}
.vac-avance .txt.cal{color:var(--muted)}
.vac-avance .txt.cal b{color:var(--ink2)}

/* Aviso de costo: conectar una bolsa no es aceptar pagar por publicar, y cuando el
   reclutamiento es para un cliente el cargo es suyo. Se dice antes, no después. */
.rh-chip.cuesta::after{
  content:'$'; font-size:10px; font-weight:700; color:var(--warn);
  margin-left:1px; vertical-align:super;
}
.rh-chip.on.cuesta::after{color:var(--accent)}
.rh-costo{
  margin:10px 0 0; padding:11px 13px; border-radius:10px;
  background:color-mix(in srgb, var(--warn) 9%, var(--surface));
  border:1px solid color-mix(in srgb, var(--warn) 38%, transparent);
}
.rh-costo .tit{
  margin:0 0 6px; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--warn);
}
.rh-costo ul{margin:0; padding-left:16px; display:grid; gap:4px}
.rh-costo li{font-size:12.5px; color:var(--ink2); line-height:1.45}
.rh-costo li b{color:var(--ink)}
.rh-costo .cuando{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); font-weight:700;
}
.rh-costo .quien{margin:8px 0 0; font-size:12px; color:var(--muted); line-height:1.5}
.rh-costo .quien b{color:var(--ink2)}

/* ── Uso de Plataforma ─────────────────────────────────────────────────────────
   Reaprovecha .hrow/.bar/.val del molde. Solo agrega el color del semáforo y la
   tarjeta de cuenta, que lleva el veredicto en el borde para leerse de un vistazo. */
.bar-verde b{background:var(--accent)}
.bar-ambar b{background:var(--warn)}
.bar-rojo  b{background:var(--bad)}
.uso-tile{border-left:3px solid var(--track)}
.uso-tile.verde{border-left-color:var(--accent)}
.uso-tile.ambar{border-left-color:var(--warn)}
.uso-tile.rojo{border-left-color:var(--bad)}
.uso-tile .chip{text-transform:uppercase}
.uso-tile.verde .chip{color:var(--good); border-color:var(--good)}
.uso-tile.ambar .chip{color:var(--warn); border-color:var(--warn)}
.uso-tile.rojo  .chip{color:var(--bad);  border-color:var(--bad)}
.chip-min.on{background:var(--ink); color:var(--surface)}
#view-uso .hrow{display:grid; grid-template-columns:78px 1fr 96px; gap:12px; align-items:center; margin-bottom:9px}
#view-uso .hrow .lbl{font-size:12px; color:var(--muted); font-weight:700}
#view-uso .hrow .val{text-align:right; font-weight:800; font-variant-numeric:tabular-nums; font-size:13px}
#view-uso .hrow .val small{display:block; font-weight:600; font-size:10.5px; color:var(--muted)}

/* ================== CRISTAL — la capa de vidrio líquido (10 sep 2026) ==================
   Pedido de Fernando: «que se vea moderno, con transparencia, flotante, como Apple»,
   y de fondo un oleaje minimalista. Esta sección va AL FINAL a propósito: solo sube el
   material y los radios de lo que ya existe; no cambia una sola estructura ni un flujo.
   El fondo animado lo dibuja /fondo.js — el vidrio no se ve vidrio sin algo detrás. */

/* --- las dos capas del fondo, detrás de todo el contenido --- */
.hub-aurora,.hub-fondo{position:fixed; inset:0; pointer-events:none}
.hub-aurora{z-index:-2; overflow:hidden; filter:blur(90px) saturate(1.15); opacity:.8}
.hub-fondo{z-index:-1}
.hub-aurora i{position:absolute; border-radius:50%; display:block}
.hub-aurora i:nth-child(1){width:46vw; height:46vw; left:-7%; top:-14%;
  background:radial-gradient(circle at 38% 38%, color-mix(in srgb, var(--accent) 50%, transparent), transparent 66%);
  animation:hub-deriva 26s ease-in-out infinite alternate}
.hub-aurora i:nth-child(2){width:40vw; height:40vw; right:-9%; top:4%;
  background:radial-gradient(circle at 55% 45%, color-mix(in srgb, var(--good) 32%, transparent), transparent 66%);
  animation:hub-deriva 34s ease-in-out infinite alternate-reverse}
.hub-aurora i:nth-child(3){width:50vw; height:50vw; left:24%; bottom:-22%;
  background:radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--mark) 26%, transparent), transparent 66%);
  animation:hub-deriva 41s ease-in-out infinite alternate}
@keyframes hub-deriva{from{transform:translate(0,0) scale(1)} to{transform:translate(5vw,4vh) scale(1.18)}}
:root[data-theme="dark"] .hub-aurora{opacity:.9}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hub-aurora{opacity:.9}}
/* el degradado quemado del body estorba al oleaje: el color ahora lo pone la aurora */
body{background:var(--bg)}

/* --- material: más transparencia, filo de luz y sombra que despega --- */
:root{
  --glass:rgba(255,255,255,.5); --glass-strong:rgba(255,255,255,.62); --glass-border:rgba(255,255,255,.62);
  --rim:rgba(255,255,255,.95); --rim2:rgba(255,255,255,.45); --sheen:rgba(255,255,255,.6);
  --flot:0 16px 40px -20px rgba(25,32,8,.35), 0 3px 10px -5px rgba(25,32,8,.12);
  --flot2:0 34px 70px -26px rgba(25,32,8,.5), 0 8px 20px -8px rgba(25,32,8,.16);
}
:root[data-theme="dark"]{
  --glass:rgba(20,25,16,.5); --glass-strong:rgba(20,25,16,.66); --glass-border:rgba(255,255,255,.13);
  --rim:rgba(255,255,255,.28); --rim2:rgba(255,255,255,.08); --sheen:rgba(255,255,255,.14);
  --flot:0 20px 50px -22px rgba(0,0,0,.7), 0 4px 12px -6px rgba(0,0,0,.45);
  --flot2:0 40px 90px -28px rgba(0,0,0,.85), 0 10px 24px -10px rgba(0,0,0,.5);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --glass:rgba(20,25,16,.5); --glass-strong:rgba(20,25,16,.66); --glass-border:rgba(255,255,255,.13);
  --rim:rgba(255,255,255,.28); --rim2:rgba(255,255,255,.08); --sheen:rgba(255,255,255,.14);
  --flot:0 20px 50px -22px rgba(0,0,0,.7), 0 4px 12px -6px rgba(0,0,0,.45);
  --flot2:0 40px 90px -28px rgba(0,0,0,.85), 0 10px 24px -10px rgba(0,0,0,.5);
}}

.tile,.chart,.modal,.dock{
  backdrop-filter:blur(28px) saturate(1.7); -webkit-backdrop-filter:blur(28px) saturate(1.7);
  box-shadow:inset 0 1px 0 var(--rim), inset 0 -1px 0 var(--rim2), var(--flot);
  isolation:isolate;
}
/* ⚠️ position SOLO donde no lo tenían ya: el dock es `fixed` y una regla posterior con
   la misma especificidad se lo tumbaba — el chat se salía de su lugar (visto en banco). */
.tile,.chart{position:relative}
.tile{border-radius:24px}
.chart{border-radius:22px}
.modal,.dock{border-radius:22px}
/* el destello diagonal: la luz corriendo por el canto del vidrio */
.tile::before,.chart::before,.modal::before,.dock::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
  background:linear-gradient(122deg, var(--sheen) 0%, transparent 40%, transparent 72%, var(--rim2) 100%);
}
.tile{transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1), background .3s}
.tile:hover{transform:translateY(-5px) scale(1.012);
  box-shadow:inset 0 1px 0 var(--rim), inset 0 -1px 0 var(--rim2), var(--flot2)}
nav.top{backdrop-filter:blur(26px) saturate(1.6); -webkit-backdrop-filter:blur(26px) saturate(1.6);
  background:var(--glass); border-bottom:1px solid var(--glass-border)}
@media (prefers-reduced-motion:reduce){
  .hub-aurora i{animation:none}
  .tile{transition:none}
  .tile:hover{transform:none}
}

/* ---- La portada también es Cristal (10 sep 2026) ----
   Pedido de Fernando: «el acceso también se tiene que cambiar a tipo olas» y
   «el logo de Advance en súper grande». Lo segundo revierte a propósito la decisión
   del 25 ago de sacarlo del acceso: hoy la portada sí lleva la marca de la casa.
   El truco para que el oleaje se vea aquí: el acceso deja de pintar su propio fondo
   opaco y el negro lo pone el body, así el canvas global (que va detrás del contenido)
   queda por encima del fondo y por debajo de la tarjeta. */
/* :has() lo aplica desde el primer pintado; la clase de fondo.js queda de respaldo
   para navegadores viejos. Sin esto la portada parpadeaba en claro al cargar. */
body:has(#login-wrap:not([hidden])),body.hub-login{background:#080A06}
body:has(#login-wrap:not([hidden])) .login-wrap,body.hub-login .login-wrap{background:transparent}
body:has(#login-wrap:not([hidden])) .hub-aurora,body.hub-login .hub-aurora{opacity:.5}
.login-wrap{flex-direction:column; gap:22px}
/* el lienzo de la constelación es OPACO (pinta con estela): encimado taparía el mar,
   así que en la portada con oleaje se retira y vuelve solo con el ambiente «Liso» */
body:has(#login-wrap:not([hidden])) #login-fx,body.hub-login #login-fx{display:none}
body:has(#login-wrap:not([hidden])).hub-liso #login-fx,body.hub-login.hub-liso #login-fx{display:block}
.login-marca{position:relative; z-index:2; width:min(186px,48vw); height:auto;
  filter:drop-shadow(0 10px 34px color-mix(in srgb, var(--accent) 24%, transparent));
  animation:card-in .7s cubic-bezier(.2,.8,.2,1) both}
/* el acento manda en toda la portada: si el equipo cambia de color, esto cambia con él */
.login-glow{background:
  radial-gradient(60% 55% at 50% 42%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
  radial-gradient(120% 90% at 50% 120%, rgba(0,0,0,.55), transparent 60%)}
.login-card{border-color:color-mix(in srgb, var(--accent) 22%, transparent)}
.login-card .brand.big .dot{box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent),
  0 0 18px color-mix(in srgb, var(--accent) 60%, transparent)}
@media (max-width:520px){.login-marca{width:min(150px,44vw)}}
@media (prefers-reduced-motion:reduce){.login-marca{animation:none}}

/* ---- parrilla visual de iconos en el editor de módulos (10 sep 2026) ----
   Fernando: «en vez de una lista de nombres, una cuadrícula con ejemplos». Se ve el
   glifo, no su nombre: nadie tiene por qué saber que «birrete» es el de Academia. */
.ico-lbl{margin:14px 0 0}
.ico-lbl small{font-weight:500}
.ico-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(48px,1fr)); gap:7px;
  margin:8px 0 4px; padding:8px; max-height:186px; overflow:auto; scrollbar-width:thin;
  border:1px solid var(--line); border-radius:14px; background:var(--surface2)}
.ico-op{display:grid; place-items:center; height:44px; cursor:pointer;
  border:1px solid transparent; border-radius:11px; background:var(--surface); color:var(--ink2);
  transition:transform .16s cubic-bezier(.22,1,.36,1), border-color .16s, background .16s}
.ico-op:hover{transform:translateY(-2px); border-color:var(--line); color:var(--ink)}
.ico-op.on{background:color-mix(in srgb, var(--accent) 24%, transparent);
  border-color:var(--accent); color:var(--ink)}
.ico-op svg{width:21px; height:21px}
.ico-op.sin{font-weight:800; font-size:12.5px; letter-spacing:.02em}
/* set ampliado: agrupado + buscador, porque en una sola tira de 130 uno se pierde */
.ico-grid{display:block; max-height:260px}
.ico-tit{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  font-weight:800; margin:10px 2px 6px}
.ico-tit:first-child{margin-top:2px}
.ico-fila{display:grid; grid-template-columns:repeat(auto-fill,minmax(48px,1fr)); gap:7px}
.ico-tools{display:flex; gap:8px; align-items:center; margin-top:8px}
.ico-tools input{flex:1}
.ghost.chico{padding:6px 12px; font-size:12.5px; white-space:nowrap}
.ico-op.img{padding:0; overflow:hidden}
.ico-op.img img{width:100%; height:100%; object-fit:cover; display:block}
.ico-op.quita{color:var(--bad); font-weight:800}
.logo.propio{overflow:hidden; padding:0}
.logo.propio img{width:100%; height:100%; object-fit:cover; display:block}

/* ---- «Quién lo ve»: accesos desde la ficha del módulo (10 sep 2026) ---- */
.liga-acceso{margin-top:16px; padding-top:14px; border-top:1px solid var(--line)}
.acc-tit{font-size:11px; letter-spacing:.13em; text-transform:uppercase; font-weight:800; color:var(--ink2)}
.acc-tit small{text-transform:none; letter-spacing:0; font-weight:600; margin-left:8px}
.acc-sub{margin:14px 0 6px; font-size:12.5px; font-weight:700}
.acc-sub small{display:block; font-weight:500; font-size:11px; margin-top:2px}
.acc-lista{border:1px solid var(--line); border-radius:14px; background:var(--surface2); overflow:auto}
.acc-lista.alta{max-height:210px; scrollbar-width:thin}
.acc-fila{display:flex; align-items:center; gap:12px; padding:9px 12px; border-bottom:1px solid var(--line)}
.acc-fila:last-child{border-bottom:0}
.acc-quien{min-width:0; flex:1}
.acc-quien b{display:block; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.acc-quien small{display:block; color:var(--muted); font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.acc-todo{font-size:10px; font-weight:800; letter-spacing:.06em; color:var(--muted); text-transform:uppercase}
.acc-sw{width:40px; height:23px; flex:none; border-radius:99px; border:1px solid var(--line);
  background:var(--track); position:relative; cursor:pointer; transition:background .18s, border-color .18s}
.acc-sw i{position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%;
  background:var(--surface); box-shadow:0 1px 3px rgba(0,0,0,.28); transition:transform .18s cubic-bezier(.22,1,.36,1)}
.acc-sw.on{background:var(--accent); border-color:var(--accent)}
.acc-sw.on i{transform:translateX(17px)}
.acc-busca{margin:0 0 8px}
@media (prefers-reduced-motion:reduce){.acc-sw,.acc-sw i{transition:none}}

/* El formulario de la liga crecio con la parrilla de iconos y el panel de accesos:
   el renglon de botones quedaba abajo de todo y habia que bajar mucho para guardar.
   Se ancla al pie del modal, siempre visible. (10 sep 2026) */
#modal-liga .modal{padding-bottom:0}
#liga-form > .row:last-child{
  position:sticky; bottom:0; z-index:3;
  margin:16px -24px 0; padding:14px 24px;
  background:var(--glass-strong);
  backdrop-filter:blur(24px) saturate(1.6); -webkit-backdrop-filter:blur(24px) saturate(1.6);
  border-top:1px solid var(--line); border-radius:0 0 22px 22px;
}
@media (max-width:640px){#liga-form > .row:last-child{margin:14px -18px 0; padding:12px 18px}}

/* ---- El logo de Advance en la barra (10 sep 2026, pedido de Fernando) ----
   Repone lo que se habia retirado el 25 ago. El archivo es el lockup BLANCO sobre
   transparente: en modo claro se invierte para que se lea, y en noche va tal cual.
   Asi una sola imagen sirve en los dos temas, sin chip de fondo. */
/* va PRIMERO, pegado a la esquina: es la marca de la casa y el hub viene después */
/* La barra va de borde a borde para que el logo toque la esquina: con el contenedor
   centrado de 1200 px quedaba flotando a media pantalla en monitores anchos. */
nav.top .in{max-width:none; padding-left:18px; padding-right:18px}
.marca-advance{display:flex; align-items:center; height:34px; flex:none;
  margin-right:16px; padding-right:16px; border-right:1px solid var(--line)}
.marca-advance img{height:28px; width:auto; display:block; filter:invert(1); opacity:.85}
:root[data-theme="dark"] .marca-advance img{filter:none; opacity:.92}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .marca-advance img{filter:none; opacity:.92}}
@media (max-width:820px){.marca-advance{margin-right:10px; padding-right:10px}
  .marca-advance img{height:22px}}
@media (max-width:520px){.brand small{display:none}}

/* ---- El icono como marca de agua del tile (10 sep 2026, idea de Fernando) ----
   «que esté al tamaño del módulo pero translúcido, se ve mejor integrado». El glifo
   grande sangra por la esquina inferior derecha y toma el color de la liga; el chip
   chico de arriba se queda porque es el que se lee de un vistazo. */
.tile{overflow:hidden}
.tile > *:not(.tile-marca){position:relative; z-index:1}
.tile-marca{position:absolute; right:-26px; bottom:-30px; width:152px; height:152px;
  z-index:0; pointer-events:none; opacity:.085; line-height:0}
.tile-marca svg{width:100%; height:100%; stroke-width:1.05}
.tile-marca img{width:100%; height:100%; object-fit:contain; opacity:.6}
:root[data-theme="dark"] .tile-marca{opacity:.13}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tile-marca{opacity:.13}}
.tile:hover .tile-marca{opacity:.16; transition:opacity .35s cubic-bezier(.22,1,.36,1)}
:root[data-theme="dark"] .tile:hover .tile-marca{opacity:.2}