/* ═══════════════════════════════════════════════════════════
   GAME FLOW HUB · Sistema de interfaz
   Tokens heredados de la Ruta C v2 — CORRIENTE BOLD
   Azul hielo #7BD3F7 sobre grafito frío · Montserrat 800 + Manrope
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Superficies */
  --bg:#08090B; --surface:#101317; --surface-2:#161A1F; --surface-3:#1D232A;
  /* Acento */
  --accent:#7BD3F7; --accent-deep:#2A7FA8; --accent-ink:#04141C; --accent-soft:rgba(123,211,247,.10);
  /* Texto */
  --fg:#EDF1F5; --muted:#7C8894; --dim:#5A6570; --border:#1C2127; --border-2:#252C34;
  /* Semánticos */
  --ok:#5FD69A; --warn:#F0B44F; --danger:#E06B7A; --info:#7BD3F7;
  /* Tipografía */
  /* El hub va en Manrope de punta a punta —como la referencia de Click Hub—.
     Montserrat se reserva para el logotipo: es identidad, no interfaz. */
  --display:'Manrope',sans-serif; --body:'Manrope',sans-serif;
  --logo:'Montserrat',sans-serif;
  /* Texto de cuerpo en tablas y listas */
  --fg-2:#B9C2CB;
  /* Etapas del CRM — se leen desde UI.STAGES como var(), así siguen al tema
     sin necesidad de repintar el kanban. */
  --st-nuevo:#7BD3F7; --st-agendado:#A78BFA; --st-noshow:#F0B44F; --st-diagnostico:#5FD69A;
  --st-propuesta:#F472B6; --st-ganado:#5FD69A; --st-perdido:#7C8894; --st-nocalifica:#E06B7A;
  /* Cromo de la interfaz */
  --sidebar-bg:#0A0C0F; --nav-fg:#9AA5B0; --topbar-bg:rgba(8,9,11,.85);
  --accent-hi:#9CE0FA; --scroll-thumb:var(--surface-3); --scroll-hover:#2E3841;
  --scrim:rgba(0,0,0,.6); --overlay:rgba(4,6,8,.78);
  --shadow-lg:0 40px 100px -30px rgba(0,0,0,.9);
  --shadow-md:0 20px 50px -20px rgba(0,0,0,.9);
  --row-hover:color-mix(in srgb, var(--accent) 3%, transparent);
  --glass:rgba(8,9,11,.55); --glass-line:rgba(255,255,255,.06);
  --field:rgba(255,255,255,.045); --field-on:rgba(255,255,255,.08); --field-ic:rgba(255,255,255,.35);
  color-scheme:dark;
  /* Métrica */
  --r:6px; --r-lg:10px; --sidebar:248px; --topbar:64px;
}

/* ── TEMA CLARO ────────────────────────────────────────────────────────────
   B.02 del manual: «la única ruta que funciona igual de bien invertida».
   Fondo EDF1F5 · tinta 08090B · secundario 4A5560 · tenue 6A7580.
   El acento baja de #2A7FA8 a #22688A —el mismo azul, un punto más oscuro—
   para que el texto pequeño llegue a AA sobre fondo claro (5.4:1 en vez de 3.9:1).
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#EDF1F5; --surface:#FFFFFF; --surface-2:#F4F7FA; --surface-3:#E2E9F0;
  --accent:#22688A; --accent-deep:#17516E; --accent-ink:#FFFFFF;
  --accent-soft:rgba(34,104,138,.09);
  --fg:#08090B; --fg-2:#3A4550; --muted:#4A5560; --dim:#636E79;
  --border:#DBE3EB; --border-2:#C6D2DD;
  --ok:#157A4C; --warn:#9A6608; --danger:#B03348; --info:#22688A;
  --st-nuevo:#22688A; --st-agendado:#6D4AC7; --st-noshow:#9A6608; --st-diagnostico:#157A4C;
  --st-propuesta:#B93472; --st-ganado:#157A4C; --st-perdido:#5A6570; --st-nocalifica:#B03348;

  --sidebar-bg:#FFFFFF; --nav-fg:#4A5560; --topbar-bg:rgba(255,255,255,.88);
  --accent-hi:#17516E; --scroll-thumb:#CBD5DE; --scroll-hover:#AFBDCA;
  --scrim:rgba(16,24,32,.34); --overlay:rgba(16,24,32,.42);
  --shadow-lg:0 30px 70px -28px rgba(16,32,45,.30);
  --shadow-md:0 16px 38px -18px rgba(16,32,45,.24);
  --glass:rgba(255,255,255,.72); --glass-line:rgba(16,32,45,.10);
  --field:rgba(16,32,45,.04); --field-on:rgba(16,32,45,.07); --field-ic:rgba(16,32,45,.40);
}
html[data-theme="light"] body{background:var(--bg)}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--fg);font-family:var(--body);font-weight:300;
  letter-spacing:-0.012em;line-height:1.7;-webkit-font-smoothing:antialiased;
  min-height:100vh;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:10px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-hover)}

/* ── Tipografía ─────────────────────────────────────────── */
.d1,.d2,.d3{font-family:var(--display);font-weight:800;letter-spacing:-0.022em;line-height:1.18}
.d1{font-size:clamp(1.4rem,2.4vw,1.75rem)}
.d2{font-size:1.2rem}
.d3{font-size:.97rem}
.eyebrow{font-family:var(--display);font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.eyebrow.n{color:var(--dim)}
.meta{font-family:var(--display);font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.acc{color:var(--accent)}
.dim{color:var(--dim)}
.mut{color:var(--muted)}
.ok{color:var(--ok)} .warn{color:var(--warn)} .danger{color:var(--danger)}
strong{font-weight:600;color:var(--fg)}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Logo ───────────────────────────────────────────────── */
.logo{display:flex;align-items:center;gap:11px}
.logo svg{width:38px;color:var(--accent);flex:none}
.logo .wm{font-family:var(--logo);font-weight:300;text-transform:uppercase;letter-spacing:.06em;font-size:.95rem;line-height:1;white-space:nowrap}
.logo .wm b{font-weight:800;letter-spacing:-.005em}

/* ── Layout ─────────────────────────────────────────────── */
/* La barra NO es columna de una rejilla: como item de grid su ancho lo manda
   la columna y el despliegue de la vista previa era imposible. Va fija a la
   izquierda y el shell le reserva el hueco con padding. */
/* La barra flota: separada de los bordes y con esquinas redondeadas, como la
   referencia. El shell reserva el hueco = ancho + los dos márgenes. */
.shell{min-height:100vh;padding-left:calc(var(--sidebar) + 24px);transition:padding-left .18s ease}
.shell.no-nav{padding-left:0}

.sidebar{
  background:var(--sidebar-bg);border:1px solid var(--border);
  display:flex;flex-direction:column;position:fixed;left:12px;top:12px;
  width:var(--sidebar);height:calc(100vh - 24px);z-index:40;
  border-radius:16px;overflow:hidden;box-shadow:0 10px 34px rgba(0,0,0,.28);
}
html[data-theme="light"] .sidebar{box-shadow:0 10px 30px rgba(16,32,45,.10)}
.sidebar .brand{height:var(--topbar);display:flex;align-items:center;gap:8px;padding:0 18px;border-bottom:1px solid var(--border);flex:none}
.sidebar nav{padding:16px 12px;overflow-y:auto;flex:1}
.nav-group{margin-bottom:22px}
.nav-group > .meta{padding:0 12px;margin-bottom:7px;font-size:.6rem;letter-spacing:.12em;color:var(--dim)}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r);
  font-family:var(--display);font-size:.845rem;font-weight:500;letter-spacing:-.006em;white-space:nowrap;
  color:var(--nav-fg);cursor:pointer;transition:background .16s,color .16s;border:0;background:none;width:100%;text-align:left;
}
.nav-item svg{width:16px;height:16px;flex:none;stroke-width:1.8}
.nav-item:hover{background:var(--surface);color:var(--fg)}
.nav-item.active{background:var(--accent-soft);color:var(--accent);font-weight:700}
.nav-item .badge{margin-left:auto}
.sidebar .foot{padding:14px 20px;border-top:1px solid var(--border);flex:none}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{
  height:var(--topbar);border-bottom:1px solid var(--border);background:var(--topbar-bg);
  backdrop-filter:blur(12px);position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:16px;padding:0 28px;
}
.topbar .title{font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:-.02em}
.topbar .spacer{flex:1}
.content{padding:26px 28px 60px;flex:1}
.content > *{max-width:1180px;margin-left:auto;margin-right:auto}
@media(max-width:900px){
  .shell{padding-left:0}
  .sidebar{width:248px;left:0;top:0;height:100vh;border-radius:0;z-index:200;
    transform:translateX(-100%);transition:transform .25s ease}
  .sidebar.collapsed{width:248px}
  .sidebar.open{transform:none;box-shadow:var(--shadow-lg)}
  .content{padding:18px}
  .topbar{padding:0 16px}
}
.nav-scrim{display:none;position:fixed;inset:0;background:var(--scrim);z-index:150}
.nav-scrim.on{display:block}
.topbar .burger{display:none}
@media(max-width:900px){.topbar .burger{display:inline-flex}}

/* ── Botones ────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  padding:10px 18px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;
  transition:background .16s,border-color .16s,color .16s,transform .16s;white-space:nowrap;
}
.btn svg{width:15px;height:15px;stroke-width:2}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-hi)}
.btn-ghost{border-color:var(--border-2);color:var(--fg);background:transparent}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-subtle{background:var(--surface-2);color:var(--fg-2);border-color:var(--border)}
.btn-subtle:hover{background:var(--surface-3);color:var(--fg)}
.btn-danger{border-color:color-mix(in srgb, var(--danger) 35%, transparent);color:var(--danger);background:transparent}
.btn-danger:hover{background:color-mix(in srgb, var(--danger) 12%, transparent)}
.btn-sm{padding:6px 12px;font-size:.64rem;gap:6px}
.btn-sm svg{width:13px;height:13px}
.btn-block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:var(--r);border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;
  transition:color .16s,border-color .16s,background .16s;flex:none;
}
.icon-btn svg{width:15px;height:15px;stroke-width:1.9}
.icon-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.icon-btn.danger:hover{color:var(--danger);border-color:color-mix(in srgb, var(--danger) 50%, transparent);background:color-mix(in srgb, var(--danger) 10%, transparent)}

/* ── Pills / badges ─────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-weight:700;
  font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:100px;
  border:1px solid var(--border-2);color:var(--muted);white-space:nowrap;
}
.badge .dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.badge.b-accent{color:var(--accent);border-color:color-mix(in srgb, var(--accent) 35%, transparent);background:var(--accent-soft)}
.badge.b-ok{color:var(--ok);border-color:color-mix(in srgb, var(--ok) 32%, transparent);background:color-mix(in srgb, var(--ok) 9%, transparent)}
.badge.b-warn{color:var(--warn);border-color:color-mix(in srgb, var(--warn) 32%, transparent);background:color-mix(in srgb, var(--warn) 9%, transparent)}
.badge.b-danger{color:var(--danger);border-color:color-mix(in srgb, var(--danger) 32%, transparent);background:color-mix(in srgb, var(--danger) 9%, transparent)}
.badge.b-dim{color:var(--dim)}

/* ── Cards ──────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:22px}
.card-pad-0{padding:0}
.card-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border)}
.card-head .d3{flex:1;min-width:0}
.card-body{padding:20px}

.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-2-1{grid-template-columns:2fr 1fr}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g-2-1{grid-template-columns:1fr}}
@media(max-width:760px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* KPI */
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;position:relative;overflow:hidden}
.kpi::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent);opacity:.85}
.kpi.k-ok::before{background:var(--ok)} .kpi.k-warn::before{background:var(--warn)} .kpi.k-danger::before{background:var(--danger)}
.kpi .l{font-family:var(--display);font-size:.7rem;font-weight:600;letter-spacing:.02em;color:var(--dim)}
.kpi .v{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.035em;line-height:1.1;margin-top:6px}
.kpi .s{font-size:.74rem;color:var(--muted);margin-top:4px}

/* ── Tablas ─────────────────────────────────────────────── */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.86rem}
thead th{
  font-family:var(--display);font-size:.72rem;font-weight:600;letter-spacing:.01em;
  color:var(--dim);text-align:left;padding:11px 14px;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--surface-2);
}
tbody td{padding:13px 14px;border-bottom:1px solid var(--border);color:var(--fg-2);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--row-hover)}
tbody tr.clickable{cursor:pointer}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.actions{text-align:right;white-space:nowrap}
td.actions .icon-btn+.icon-btn{margin-left:6px}
.t-strong{color:var(--fg);font-weight:600}

/* ── Formularios ────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field > label{font-family:var(--display);font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.input,select.input,textarea.input{
  background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--r);
  padding:10px 13px;font-size:.9rem;font-weight:300;color:var(--fg);width:100%;transition:border-color .16s,background .16s;
}
.input::placeholder{color:var(--dim)}
.input:focus{outline:0;border-color:var(--accent);background:var(--surface-3)}
textarea.input{resize:vertical;min-height:80px;line-height:1.6}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C8894' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;background-size:15px;padding-right:34px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:640px){.form-row,.form-row-3{grid-template-columns:1fr}}
.hint{font-size:.74rem;color:var(--dim);line-height:1.5}

.search{position:relative;flex:1;max-width:340px}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--dim);pointer-events:none}
.search .input{padding-left:36px}

.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.toolbar .spacer{flex:1}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  font-family:var(--display);font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 12px;border-radius:100px;border:1px solid var(--border-2);color:var(--muted);
  background:transparent;cursor:pointer;transition:all .16s;
}
.chip:hover{color:var(--fg);border-color:var(--surface-3)}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* ── Modal ──────────────────────────────────────────────── */
.modal-scrim{
  position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(4px);z-index:300;
  display:flex;align-items:center;justify-content:center;padding:28px 20px;
  animation:fade .18s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
/* Cabecera y pie fijos, cuerpo con scroll propio: la acción principal
   siempre queda a la vista, por largo que sea el formulario. */
.modal{
  background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-lg);
  width:100%;max-width:600px;box-shadow:var(--shadow-lg);
  animation:rise .22s cubic-bezier(.2,.7,.3,1);
  display:flex;flex-direction:column;max-height:100%;
}
.modal.wide{max-width:900px}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid var(--border);flex:none}
.modal-head .d3{flex:1;min-width:0}
.modal-body{padding:22px;overflow-y:auto;flex:1;min-height:0}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;padding:16px 22px;border-top:1px solid var(--border);background:var(--surface-2);border-radius:0 0 var(--r-lg) var(--r-lg);flex-wrap:wrap;flex:none}

/* ── Toast ──────────────────────────────────────────────── */
.toasts{position:fixed;right:22px;bottom:22px;z-index:400;display:flex;flex-direction:column;gap:10px}
.toast{
  background:var(--surface-2);border:1px solid var(--border-2);border-left:2px solid var(--accent);
  border-radius:var(--r);padding:12px 18px;font-size:.85rem;color:var(--fg);
  box-shadow:var(--shadow-md);animation:rise .2s ease;max-width:340px;
}
.toast.err{border-left-color:var(--danger)}
.toast.ok{border-left-color:var(--ok)}

/* ── Estados vacíos ─────────────────────────────────────── */
.empty{text-align:center;padding:56px 24px;color:var(--dim)}
.empty svg{width:34px;height:34px;color:var(--surface-3);margin:0 auto 14px;stroke-width:1.5}
.empty .d3{color:var(--muted);margin-bottom:6px}
.empty p{font-size:.86rem;max-width:38ch;margin:0 auto 18px}

/* ── Barras / pipeline ──────────────────────────────────── */
.bar-track{height:5px;background:var(--surface-3);border-radius:100px;overflow:hidden}
.bar-fill{height:100%;background:var(--accent);border-radius:100px;transition:width .5s cubic-bezier(.2,.7,.3,1)}
.bar-fill.ok{background:var(--ok)} .bar-fill.warn{background:var(--warn)} .bar-fill.danger{background:var(--danger)}

.stage-col{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);display:flex;flex-direction:column;min-height:180px}
.stage-col .hd{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.stage-col .hd .t{font-family:var(--display);font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.stage-col .hd .c{margin-left:auto;font-family:var(--display);font-weight:800;font-size:.8rem;color:var(--accent)}
.stage-col .bd{padding:10px;display:flex;flex-direction:column;gap:8px;flex:1;overflow-y:auto;max-height:460px}
.lead-card{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:11px 12px;cursor:pointer;transition:border-color .16s,transform .16s}
.lead-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.lead-card .n{font-weight:600;color:var(--fg);font-size:.85rem;line-height:1.3}
.lead-card .m{font-size:.7rem;color:var(--dim);margin-top:4px;display:flex;gap:8px;flex-wrap:wrap}
.lead-card .v{font-family:var(--display);font-weight:800;font-size:.8rem;color:var(--accent);margin-top:6px}
.pipeline-cols{display:grid;grid-template-columns:repeat(6,minmax(150px,1fr));gap:12px;overflow-x:auto;padding-bottom:6px}
@media(max-width:1200px){.pipeline-cols{grid-template-columns:repeat(6,minmax(170px,1fr))}}

/* ── Gráficos SVG ───────────────────────────────────────── */
.chart{width:100%;display:block;overflow:visible}
.chart .grid-line{stroke:var(--border);stroke-width:1}
.chart .axis-label{font-family:var(--display);font-size:9px;font-weight:600;letter-spacing:.1em;fill:var(--dim);text-transform:uppercase}
.chart .val-label{font-family:var(--display);font-size:9px;font-weight:700;fill:var(--muted)}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px}
.legend span{display:flex;align-items:center;gap:7px;font-family:var(--display);font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.legend i{width:9px;height:9px;border-radius:2px;display:block}

/* ── Timeline de actividad ──────────────────────────────── */
.timeline{display:flex;flex-direction:column}
.tl-item{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.tl-item:last-child{border-bottom:0}
.tl-item .ic{width:26px;height:26px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border-2);display:flex;align-items:center;justify-content:center;flex:none;color:var(--accent)}
.tl-item .ic svg{width:13px;height:13px;stroke-width:2}
.tl-item .tx{font-size:.83rem;color:var(--fg-2);line-height:1.5}
.tl-item .dt{font-size:.68rem;color:var(--dim);margin-top:2px}

/* ── Detalle (drawer de cliente) ────────────────────────── */
.dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:.86rem}
.dl dt{font-family:var(--display);font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding-top:4px}
.dl dd{color:var(--fg-2)}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:20px;overflow-x:auto}
.tab{
  font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:11px 16px;border:0;background:none;color:var(--dim);cursor:pointer;border-bottom:2px solid transparent;
  transition:color .16s,border-color .16s;white-space:nowrap;
}
.tab:hover{color:var(--fg)}
.tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.tab-badge{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:100px;background:var(--surface-3);
  color:var(--muted);font-family:var(--body);font-size:.68rem;font-weight:600;letter-spacing:0;vertical-align:middle}
.tab.on .tab-badge{background:var(--accent);color:var(--accent-ink)}
/* Barra de filtro del listado, como en el hub de origen */
.filter-bar{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.filter-bar .spacer{flex:1}
/* Con los chips de estado al lado, el buscador se quedaba en 186px: ilegible. */
.filter-bar .search{flex:0 1 300px;min-width:240px}
/* En móvil los 6 chips apilaban 226px de barra: mejor que rueden en una línea. */
@media(max-width:640px){
  .filter-bar{padding:12px 14px}
  .filter-bar .search{flex:1 1 100%;min-width:0;max-width:none}
  .filter-bar .filters{flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:2px}
}
.filter-note{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--accent-soft);
  border-bottom:1px solid var(--border);font-size:.85rem}
.table-foot{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;
  font-size:.78rem;color:var(--dim);border-top:1px solid var(--border)}

/* ── Líneas de factura ──────────────────────────────────── */
.items-table{width:100%;font-size:.85rem}
.items-table th{padding:8px 8px;background:transparent;border-bottom:1px solid var(--border)}
.items-table td{padding:6px 4px;border-bottom:0}
.items-table .input{padding:8px 10px;font-size:.85rem}
.totals-box{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;margin-top:16px}
.totals-row{display:flex;justify-content:space-between;padding:5px 0;font-size:.88rem;color:var(--muted)}
.totals-row.big{border-top:1px solid var(--border);margin-top:8px;padding-top:12px;font-family:var(--display);font-weight:800;font-size:1.2rem;color:var(--fg);letter-spacing:-.02em}
.totals-row.big .acc{color:var(--accent)}

/* ── Login ──────────────────────────────────────────────── */
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;overflow:hidden}
.gate-waves{position:absolute;inset:0;width:100%;height:100%;opacity:.09;color:var(--accent);pointer-events:none}

/* ── Puerta de acceso: tarjeta glass con inclinación 3D y haces de luz ───── */
.gate-noise{position:absolute;inset:0;opacity:.035;mix-blend-mode:soft-light;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px}
.gate-glow{position:absolute;left:50%;transform:translateX(-50%);pointer-events:none;filter:blur(80px)}
.gate-glow.top{top:-10%;width:min(120vh,100vw);height:60vh;border-radius:0 0 50% 50%;background:color-mix(in srgb, var(--accent) 16%, transparent)}
.gate-glow.bottom{bottom:-45%;width:min(90vh,92vw);height:90vh;border-radius:50%;background:color-mix(in srgb, var(--accent-deep) 20%, transparent);filter:blur(60px);animation:gateBreathe 7s ease-in-out infinite}
@keyframes gateBreathe{0%,100%{opacity:.5;transform:translateX(-50%) scale(1)}50%{opacity:.85;transform:translateX(-50%) scale(1.07)}}

.gate-stage{width:100%;max-width:390px;position:relative;z-index:2;perspective:1500px}
.gate-tilt{position:relative;transition:transform .25s cubic-bezier(.2,.7,.3,1);transform-style:preserve-3d}
.gate-shell{position:relative}

.gate-beams{position:absolute;inset:-1px;border-radius:calc(var(--r-lg) + 1px);overflow:hidden;pointer-events:none}
.gate-beam{position:absolute;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.75;filter:blur(1.5px)}
.gate-beam.h{height:3px;width:50%}
.gate-beam.v{width:3px;height:50%;background:linear-gradient(180deg,transparent,var(--accent),transparent)}
.gate-beam.t{top:0;left:-50%;animation:gateRunX 3.5s ease-in-out infinite}
.gate-beam.r{top:-50%;right:0;animation:gateRunY 3.5s ease-in-out infinite .9s}
.gate-beam.b{bottom:0;right:-50%;animation:gateRunXr 3.5s ease-in-out infinite 1.8s}
.gate-beam.l{bottom:-50%;left:0;animation:gateRunYr 3.5s ease-in-out infinite 2.7s}
@keyframes gateRunX{0%{left:-50%}45%,100%{left:100%}}
@keyframes gateRunXr{0%{right:-50%}45%,100%{right:100%}}
@keyframes gateRunY{0%{top:-50%}45%,100%{top:100%}}
@keyframes gateRunYr{0%{bottom:-50%}45%,100%{bottom:100%}}
.gate-corner{position:absolute;border-radius:50%;background:color-mix(in srgb, var(--accent) 60%, transparent);filter:blur(2px);animation:gateFade 2.2s ease-in-out infinite}
.gate-corner.tl{top:0;left:0;width:5px;height:5px}
.gate-corner.tr{top:0;right:0;width:8px;height:8px;animation-delay:.5s}
.gate-corner.br{bottom:0;right:0;width:8px;height:8px;animation-delay:1s}
.gate-corner.bl{bottom:0;left:0;width:5px;height:5px;animation-delay:1.5s}
@keyframes gateFade{0%,100%{opacity:.25}50%{opacity:.55}}

.gate-card{position:relative;width:100%;background:var(--glass);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:1px solid var(--glass-line);border-radius:var(--r-lg);padding:34px 30px;overflow:hidden;
  box-shadow:var(--shadow-lg)}
.gate-card::before{content:'';position:absolute;inset:0;opacity:.03;pointer-events:none;
  background-image:linear-gradient(135deg,#fff .5px,transparent .5px),linear-gradient(45deg,#fff .5px,transparent .5px);
  background-size:30px 30px}
.gate-card > *{position:relative}

/* El campo entero es clicable: el icono nunca intercepta el puntero */
.gate-field{position:relative;margin-bottom:16px}
.gate-field > label{display:block;font-family:var(--display);font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:8px;cursor:text}
.gate-field .ic{position:absolute;left:14px;bottom:15px;width:18px;height:18px;color:var(--field-ic);transition:color .25s;pointer-events:none;z-index:2}
.gate-field .input{height:48px;padding-left:44px;padding-right:44px;background:var(--field);border-color:transparent;position:relative;z-index:1}
.gate-field .input:focus{background:var(--field-on);border-color:color-mix(in srgb, var(--accent) 45%, transparent)}
.gate-field .input:focus ~ .ic{color:var(--accent)}
.gate-toggle{position:absolute;right:8px;bottom:8px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;color:var(--field-ic);transition:color .25s;z-index:3;padding:0}
.gate-toggle:hover{color:var(--fg)}

.gate-submit{height:48px;position:relative;overflow:hidden}
.gate-submit .shine{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-100%);opacity:0}
.gate-submit.loading .shine{opacity:1;animation:gateShine 1.4s ease-in-out infinite}
@keyframes gateShine{to{transform:translateX(100%)}}
.gate-spinner{width:17px;height:17px;border:2px solid color-mix(in srgb, var(--accent-ink) 35%, transparent);border-top-color:var(--accent-ink);border-radius:50%;animation:gateSpin .7s linear infinite}
@keyframes gateSpin{to{transform:rotate(360deg)}}

.gate-card .logo{justify-content:center;margin-bottom:8px}
.gate-card .logo svg{width:52px}
.gate-card .logo .wm{font-size:1.15rem}

@media(prefers-reduced-motion:reduce){.gate-tilt{transform:none!important}}


/* ── Utilidades ─────────────────────────────────────────── */
.row{display:flex;align-items:center;gap:10px}
.row.wrap{flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:10px}
.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mb-8{margin-bottom:8px}.mb-20{margin-bottom:20px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.mt-16{margin-top:16px}
.hidden{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}


/* ── Submenú desplegable de la barra lateral ───────────────────────────── */
.nav-item.parent .chev{width:14px;height:14px;margin-left:auto;flex:none;transition:transform .22s ease;opacity:.6}
.nav-item.parent.open .chev{transform:rotate(180deg)}
/* display:none es lo único que colapsa sin depender de transiciones */
.nav-sub{display:none}
.nav-sub.open{display:block;animation:navSubIn .2s ease both}
@keyframes navSubIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.nav-item.sub{
  padding:7px 10px 7px 38px;font-size:.78rem;font-weight:500;position:relative;
  font-family:var(--body);letter-spacing:-.01em;text-transform:none;color:var(--muted);
}
.nav-item.sub::before{content:'';position:absolute;left:22px;top:50%;width:4px;height:4px;border-radius:50%;
  background:var(--dim);transform:translateY(-50%);transition:background .2s}
.nav-item.sub:hover::before{background:var(--muted)}
.nav-item.sub.active{background:transparent;color:var(--accent)}
.nav-item.sub.active::before{background:var(--accent)}

/* ── Usuario al pie de la barra ────────────────────────────────────────── */
.sidebar .foot .user{display:flex;align-items:center;gap:10px}
.sidebar .foot .avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:.78rem;flex:none}
.sidebar .foot .who{min-width:0;flex:1}
.sidebar .foot .who .n{font-family:var(--display);font-weight:700;font-size:.74rem;text-transform:uppercase;
  letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar .foot .who .r{font-family:var(--display);font-weight:600;font-size:.54rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}

/* ── Tarjetas de reporte ───────────────────────────────────────────────── */
.report-card{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:18px 20px;cursor:pointer;transition:border-color .2s,transform .2s;width:100%;text-align:left}
.report-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.report-card .ic{width:38px;height:38px;border-radius:8px;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;flex:none}
.report-card .ic svg{width:18px;height:18px}
.report-card .tx{flex:1;min-width:0}
.report-card .tx b{display:block;font-family:var(--display);font-weight:700;font-size:.9rem;color:var(--accent);margin-bottom:3px}
.report-card .tx span{font-size:.8rem;color:var(--muted);line-height:1.5;display:block}
.report-card .go{color:var(--dim);flex:none}


/* ── Barra superior con buscador global ────────────────────────────────── */
.topbar{gap:12px}
.gsearch{position:relative;flex:1;max-width:420px}
.gsearch svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--dim);pointer-events:none}
.gsearch .input{width:100%;height:38px;padding-left:38px;border-radius:100px;background:var(--surface);font-size:.86rem}
.gsearch .input:focus{border-color:var(--accent);background:var(--surface-2)}
.add-btn{width:34px;height:34px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;transition:transform .15s,background .2s}
.add-btn svg{width:17px;height:17px;stroke-width:2.4}
.add-btn:hover{background:var(--accent-hi);transform:scale(1.06)}
.topbar .me{width:32px;height:32px;border-radius:50%;background:var(--surface-3);color:var(--fg);flex:none;
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:.76rem;
  border:1px solid var(--border)}
.dot-badge{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--danger)}
.icon-btn{position:relative}
@media(max-width:720px){.gsearch{max-width:none}.add-btn{display:none}}

/* ── Cabecera de página, dentro del contenido ──────────────────────────── */
.page-head{display:flex;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.page-title{font-family:var(--display);font-weight:800;font-size:1.6rem;letter-spacing:-.02em;line-height:1.1;flex:1;min-width:0}
.page-head .row{gap:8px;flex-wrap:wrap}

/* ── KPI con icono y enlace de detalle, como la referencia ─────────────── */
.kpi.k-link{display:flex;flex-direction:column}
.kpi .kpi-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.kpi .kpi-ic{width:30px;height:30px;border-radius:7px;background:var(--surface-3);color:var(--muted);
  display:flex;align-items:center;justify-content:center;flex:none}
.kpi .kpi-ic svg{width:15px;height:15px}
.kpi.k-ok .kpi-ic{background:color-mix(in srgb, var(--ok) 12%, transparent);color:var(--ok)}
.kpi.k-warn .kpi-ic{background:color-mix(in srgb, var(--warn) 12%, transparent);color:var(--warn)}
.kpi.k-danger .kpi-ic{background:color-mix(in srgb, var(--danger) 12%, transparent);color:var(--danger)}
.kpi .kpi-link{margin-top:12px;font-family:var(--display);font-size:.64rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);background:none;border:0;padding:0;cursor:pointer;text-align:left}
.kpi .kpi-link:hover{text-decoration:underline}


/* ── Documento a página completa (detalle de factura / cotización) ─────── */
.doc-page{max-width:1000px;margin:0 auto}
.doc-back{display:inline-flex;align-items:center;gap:7px;background:none;border:0;color:var(--muted);cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:0;margin-bottom:16px}
.doc-back:hover{color:var(--accent)}
.doc-back svg{width:15px;height:15px}
.doc-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:18px}

/* Cabecera de expediente, ficha de sesión, orden y respuesta de formulario:
   avatar + título + estado a la izquierda, acciones a la derecha.
   Al envolverse necesita separación de fila propia y aire hasta el contenido,
   o los botones quedan pegados a los KPI de abajo. */
.doc-editbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;row-gap:14px;
  padding-bottom:18px;margin-bottom:26px;border-bottom:1px solid var(--border)}
.doc-editbar > div{min-width:0}
.doc-editbar .doc-back{margin-bottom:0;font-size:1.15rem;font-family:var(--display);font-weight:800;
  letter-spacing:-.02em;text-transform:none}
.doc-editbar .doc-back svg{width:17px;height:17px;color:var(--muted)}
.doc-editbar .doc-back:hover{color:var(--accent)}
@media(max-width:640px){
  .doc-editbar{gap:8px;row-gap:10px}
  .doc-editbar .spacer{display:none}
}
.doc-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.doc-title h2{font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:-.02em}

.doc-sheet{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:30px 32px;margin-bottom:20px}
.doc-sheet .emisor{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-bottom:22px;border-bottom:1px solid var(--border);margin-bottom:22px}
/* La ola va en la MISMA línea que el logotipo, no centrada contra el bloque de
   datos: al lado de tres renglones quedaba a la altura del correo. */
.doc-sheet .emisor .who{display:block}
.doc-sheet .emisor .who .logo .wm{font-size:1.05rem}
.doc-sheet .emisor .who .d{font-size:.78rem;color:var(--dim);line-height:1.6;margin-top:10px}
.doc-sheet .emisor .num{text-align:right;font-size:.8rem;color:var(--muted)}
.doc-sheet .emisor .num b{display:block;font-family:var(--display);font-weight:800;font-size:1rem;color:var(--fg);margin-top:3px}

.doc-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:26px}
@media(max-width:700px){.doc-meta{grid-template-columns:1fr 1fr}}
.doc-meta .k{font-family:var(--display);font-size:.58rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.doc-meta .v{font-size:.92rem;color:var(--fg)}
.doc-meta .v small{display:block;color:var(--dim);font-size:.76rem;margin-top:2px}

.doc-tot{margin-left:auto;width:300px;max-width:100%;margin-top:18px}
.doc-tot .r{display:flex;justify-content:space-between;padding:6px 0;font-size:.88rem;color:var(--muted)}
.doc-tot .r.grand{border-top:1px solid var(--border);margin-top:8px;padding-top:12px;
  font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--fg)}


/* El SVG del gráfico escala con el ancho: sin tope se volvía gigante. */
.chart-box{max-height:210px}
.chart-box svg{width:100%;height:210px;display:block}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 18px;border-bottom:1px solid var(--border)}
.card-head .d3{font-family:var(--display);font-weight:700;font-size:.95rem;letter-spacing:-.01em}
.card-head .sub{font-size:.78rem;color:var(--muted);margin-top:2px}
.card-body{padding:16px 18px}


/* ── Editor de documento a página completa ─────────────────────────────── */
/* Cabecera propia: sustituye a la .page-head general mientras se edita. */
.doc-edit-head{display:flex;align-items:center;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.doc-edit-head .page-title{font-size:1.45rem}
.doc-edit-head .icon-btn{width:34px;height:34px}
.req{color:var(--danger);font-weight:700}

/* La hoja del documento respira: es lo primero que se lee. */
.doc-form{padding:32px 34px 34px}
.doc-form .doc-sec{font-family:var(--display);font-size:.86rem;font-weight:700;letter-spacing:-.01em;
  text-transform:none;color:var(--fg);margin-bottom:12px}
/* Sin mayúsculas ni tracking dentro de la hoja: aquí manda el dato, no la etiqueta. */
.doc-form .field{margin-bottom:0;gap:5px}
.doc-form .field > label{font-family:var(--body);font-size:.76rem;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--muted)}
.doc-form .input{padding:9px 12px;font-size:.86rem}
.doc-form .fecha-btn{padding:9px 12px;font-size:.86rem}
.doc-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:16px}
.doc-grid.g3{grid-template-columns:1.7fr 1fr 1fr}
@media(max-width:700px){.doc-grid,.doc-grid.g3{grid-template-columns:1fr}}

/* --dim sobre la hoja se queda en 3.1:1; aquí se lee un dato, no un adorno. */
.doc-items thead th{padding:9px 10px;background:transparent;font-size:.72rem;color:var(--muted)}
.doc-items td{padding:11px 10px;vertical-align:top;border-bottom:1px solid var(--border)}
.doc-items tbody tr:last-child td{border-bottom:0}
.doc-items tbody tr:hover td{background:transparent}
.doc-items td.ln{color:var(--dim);font-size:.8rem;padding-top:19px}
.doc-items .input{padding:8px 11px;font-size:.85rem}
.doc-items .input.num{text-align:right}
.doc-items td[data-sub]{padding-top:19px;white-space:nowrap}
.doc-items .icon-btn{width:28px;height:28px;border-color:transparent;margin-top:4px}

.btn-dashed{display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  padding:8px 16px;border:1.5px dashed var(--border-2);border-radius:var(--r);background:none;
  font-family:var(--display);font-size:.74rem;font-weight:700;color:var(--accent);cursor:pointer;
  transition:border-color .16s,background .16s}
.btn-dashed svg{width:14px;height:14px}
.btn-dashed:hover{border-color:var(--accent);background:var(--accent-soft)}

@media(max-width:640px){.doc-form{padding:20px 16px 24px}.doc-edit-head .page-title{font-size:1.2rem}}
.doc-form .doc-tot{margin-top:26px;margin-bottom:26px;width:308px}
.doc-form .doc-tot .r{border-bottom:1px solid var(--border);padding:8px 0}
.doc-form .doc-tot .r.grand{border-bottom:0;border-top:0;font-size:1.25rem;padding-top:14px}
.doc-form textarea.input{width:100%;min-height:74px}


/* ── CRM · barra y kanban ──────────────────────────────────────────────── */
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1200px){.g5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.g5{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi.k-accent::before{background:var(--accent)}
.crm-bar{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.crm-tabs{margin-bottom:0;border-bottom:0}
.crm-tabs .tab{display:inline-flex;align-items:center;gap:7px}
.crm-tabs .tab svg{width:14px;height:14px}

.kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:12px;align-items:flex-start}
.kcol{flex:0 0 268px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.kcol-head{display:flex;align-items:center;gap:8px;padding:11px 13px;border-bottom:1px solid var(--border);
  background:color-mix(in srgb,var(--c) 10%,transparent)}
.kcol-head .dot{width:7px;height:7px;border-radius:50%;background:var(--c);flex:none}
.kcol-head .t{font-family:var(--display);font-weight:700;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kcol-head .n{font-family:var(--display);font-weight:800;font-size:.68rem;color:var(--c);
  background:color-mix(in srgb,var(--c) 18%,transparent);border-radius:100px;padding:1px 8px}
.kcol-body{padding:10px;display:flex;flex-direction:column;gap:9px;min-height:70px;transition:background .15s}
.kcol-body.over{background:var(--accent-soft)}

.kcard{background:var(--surface-2);border:1px solid var(--border);border-radius:7px;padding:11px;cursor:grab;
  transition:border-color .18s,transform .12s}
.kcard:hover{border-color:var(--surface-3)}
.kcard.dragging{opacity:.45;cursor:grabbing}
.kcard-top{display:flex;align-items:flex-start;gap:9px}
.kcard-top .av{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:.6rem;flex:none}
.kcard-top .who{flex:1;min-width:0}
.kcard-top .who .n{font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kcard-top .who .s{font-size:.68rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kcard-top .wa{color:var(--ok);flex:none}
.kcard-top .wa svg{width:14px;height:14px}
.kcard-sv{font-size:.72rem;color:var(--muted);margin:8px 0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kbar{height:3px;border-radius:100px;background:var(--surface-3);overflow:hidden}
.kbar span{display:block;height:100%;border-radius:100px}
.kcard-foot{display:flex;align-items:center;gap:5px;margin-top:9px;padding-top:8px;border-top:1px solid var(--border)}
.kmini{background:none;border:1px solid var(--border);color:var(--muted);border-radius:4px;cursor:pointer;
  font-size:.66rem;padding:2px 7px;line-height:1.5;transition:.15s;font-family:var(--display);font-weight:600}
.kmini:hover{border-color:var(--accent);color:var(--accent)}
.kmini.kt{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.kval{font-size:.68rem;color:var(--muted)}


/* El CRM ocupa todo el ancho: el kanban de 8 columnas no cabe en 1180px */
#viewbody.wide, .page-head.wide{max-width:none}

/* ── Ficha de lead en modo lectura ─────────────────────────────────────── */
.lead-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.lead-head .av{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:.86rem;flex:none;background:var(--accent-soft);color:var(--accent)}
.lead-head .who .n{font-family:var(--display);font-weight:800;font-size:1.2rem;letter-spacing:-.02em;line-height:1.15}
.lead-head .who .s{font-size:.8rem;color:var(--dim)}
.btn-wa{background:#25d366;color:#04140a;border:0}
.btn-wa:hover{background:#3ee07d}

.lead-strip{display:flex;align-items:center;gap:12px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r);padding:13px 16px;margin-bottom:22px;flex-wrap:wrap}
.lead-strip .ic{color:var(--muted);flex:none}
.lead-strip .tx{flex:1;min-width:0}
.lead-strip .tx .k{font-family:var(--display);font-size:.56rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}
.lead-strip .tx .v{font-size:.92rem;margin-top:2px}

.lead-sec{font-family:var(--display);font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:22px 0 12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
@media(max-width:620px){.lead-grid{grid-template-columns:1fr}}
.lead-f{padding:9px 0 10px;border-bottom:1px solid var(--border)}
.lead-f .k{font-family:var(--display);font-size:.56rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.lead-f .v{font-size:.92rem;color:var(--fg);margin-top:5px;word-break:break-word}
.lead-f .v.empty{color:var(--dim)}
.lead-box{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:13px 15px;font-size:.9rem}
.lead-empty{background:var(--surface-2);border:1px dashed var(--border);border-radius:var(--r);padding:18px;
  text-align:center;font-size:.84rem;color:var(--dim)}
.lead-hist{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);font-size:.84rem}
.lead-hist .t{flex:1;min-width:0}
.lead-hist .t b{font-weight:600;color:var(--fg)}
.lead-hist .t small{display:block;color:var(--dim);font-size:.72rem;margin-top:2px}
.lead-hist .d{color:var(--dim);font-size:.72rem;white-space:nowrap}


/* ── Formularios en tarjetas ───────────────────────────────────────────── */
.fcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px}
.fcard2{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px;
  display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.fcard2:hover{border-color:var(--surface-3);transform:translateY(-2px)}
.fcard2 .top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
.fcard2 .ic{width:34px;height:34px;border-radius:8px;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;flex:none}
.fcard2 .ic svg{width:16px;height:16px}
.fcard2 h3{font-family:var(--display);font-weight:700;font-size:.95rem;letter-spacing:-.01em;margin-bottom:6px}
.fcard2 .desc{font-size:.8rem;color:var(--muted);line-height:1.55;flex:1;margin-bottom:12px}
.fcard2 .slug{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:5px;padding:4px 8px;font-size:.7rem;color:var(--muted);margin-bottom:11px;align-self:flex-start;max-width:100%}
.fcard2 .slug code{font-family:var(--display);font-weight:600;letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis}
.fcard2 .slug .cp{background:none;border:0;color:var(--dim);cursor:pointer;padding:0;line-height:0;flex:none}
.fcard2 .slug .cp:hover{color:var(--accent)}
.fcard2 .slug .cp svg{width:12px;height:12px}
.fcard2 .meta-l{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.72rem;color:var(--dim);margin-bottom:14px}
.fcard2 .meta-l b{color:var(--muted);font-weight:600}
.fcard2 .acts{display:flex;gap:6px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:13px}
.fcard2 .acts .btn{font-size:.7rem;padding:7px 11px}

/* Editor de preguntas del formulario */
.qrow{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:12px;margin-bottom:10px}
.qrow .r1{display:flex;gap:8px;align-items:center;margin-bottom:9px}
.qrow .r1 .input{flex:1}
.qrow .r2{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.qrow .r2 select{max-width:150px}
.qrow .r2 .opts{flex:1;min-width:140px}
.qrow .chk{display:flex;align-items:center;gap:7px;font-size:.78rem;color:var(--muted);white-space:nowrap;cursor:pointer}
.qrow .chk input{width:15px;height:15px;accent-color:var(--accent);cursor:pointer}

/* ── Conmutador de vista (Lista | Calendario) ──────────────────────────── */
.segbar{display:inline-flex;gap:2px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:9px;padding:3px;margin-bottom:18px}
.seg{display:inline-flex;align-items:center;gap:7px;border:0;background:none;cursor:pointer;
  padding:7px 14px;border-radius:6px;color:var(--muted);font-family:var(--display);font-weight:600;
  font-size:.76rem;letter-spacing:.01em;transition:background .16s,color .16s}
.seg svg{width:14px;height:14px}
.seg:hover{color:var(--fg)}
.seg.on{background:var(--accent-soft);color:var(--accent)}

/* ── Calendario de sesiones ────────────────────────────────────────────── */
.cal-top{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.cal-title{font-family:var(--display);font-weight:800;font-size:1.02rem;letter-spacing:-.01em;
  text-transform:capitalize;min-width:150px}
.cal-nav{display:flex;gap:4px}
.cal-nav button{width:30px;height:30px;border-radius:7px;border:1px solid var(--border);background:var(--surface);
  color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;line-height:1}
.cal-nav button:hover{border-color:var(--accent);color:var(--accent)}
.input-sm{max-width:190px;padding:7px 10px;font-size:.78rem}

.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.cal-dow{background:var(--surface-2);padding:9px 10px;font-family:var(--display);font-size:.56rem;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);text-align:center}
.cal-day{background:var(--surface);min-height:106px;padding:7px 8px;display:flex;flex-direction:column;
  gap:4px;cursor:pointer;transition:background .15s}
.cal-day:hover{background:var(--surface-2)}
.cal-day.off{background:var(--bg);opacity:.4;cursor:default}
.cal-day.off:hover{background:var(--bg)}
.cal-day.today{background:var(--accent-soft)}
.cal-day .num{font-family:var(--display);font-weight:700;font-size:.72rem;color:var(--muted)}
.cal-day.today .num{color:var(--accent)}
.cal-ev{background:var(--surface-2);border-left:2px solid var(--c,var(--accent));border-radius:4px;
  padding:4px 7px;cursor:pointer;transition:background .15s}
.cal-day.today .cal-ev{background:var(--surface)}
.cal-ev:hover{background:var(--surface-3)}
.cal-ev .h{font-family:var(--display);font-weight:700;font-size:.6rem;color:var(--c,var(--accent))}
.cal-ev .n{font-size:.72rem;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-ev .s{font-size:.62rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.cal-legend{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:14px;
  font-size:.74rem;color:var(--muted)}
.cal-legend span{display:inline-flex;align-items:center;gap:7px}
.cal-legend i{width:9px;height:9px;border-radius:2px;flex:none}
@media(max-width:760px){.cal-day{min-height:70px;padding:5px}.cal-ev .s{display:none}.cal-dow{padding:7px 2px}}

/* ── Alta de cliente: rejilla de sesiones ──────────────────────────────── */
.alta-rows{border:1px solid var(--border);border-radius:var(--r);padding:10px;background:var(--surface-2);margin-bottom:18px}
.alta-row{display:grid;grid-template-columns:26px 1fr 150px 106px;gap:8px;align-items:center;margin-bottom:7px}
.alta-row:last-child{margin-bottom:0}
.alta-row .ix{font-family:var(--display);font-weight:700;font-size:.72rem;color:var(--dim);text-align:center}
.alta-head{font-family:var(--display);font-size:.55rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin-bottom:9px}
@media(max-width:620px){.alta-row{grid-template-columns:22px 1fr}.alta-head{display:none}}

/* ── Expediente del cliente ────────────────────────────────────────────── */
.exp-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:.88rem;flex:none;
  background:var(--accent-soft);color:var(--accent)}
.exp-nota{display:flex;gap:10px;align-items:flex-start;padding-bottom:16px;margin-bottom:6px;
  border-bottom:1px solid var(--border)}
.exp-nota textarea{flex:1;resize:vertical}
.exp-tl{display:flex;flex-direction:column}
.exp-ev{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.exp-ev:last-child{border-bottom:0}
.exp-ev .ic{width:28px;height:28px;border-radius:7px;flex:none;display:flex;align-items:center;
  justify-content:center;background:var(--surface-2);color:var(--dim)}
.exp-ev .ic svg{width:13px;height:13px}
.exp-ev.k-completada .ic{background:color-mix(in srgb, var(--ok) 12%, transparent);color:var(--ok)}
.exp-ev.k-pago .ic{background:color-mix(in srgb, var(--ok) 12%, transparent);color:var(--ok)}
.exp-ev.k-agendada .ic,.exp-ev.k-alta .ic{background:var(--accent-soft);color:var(--accent)}
.exp-ev.k-nota .ic{background:color-mix(in srgb, var(--warn) 12%, transparent);color:var(--warn)}
.exp-ev.k-cancelada .ic{background:color-mix(in srgb, var(--danger) 12%, transparent);color:var(--danger)}
.exp-ev .tx{flex:1;min-width:0}
.exp-ev .tx b{display:block;font-weight:600;font-size:.86rem;color:var(--fg)}
.exp-ev .tx small{display:block;font-size:.72rem;color:var(--dim);margin-top:2px}
.exp-ev .d{font-size:.72rem;color:var(--dim);white-space:nowrap}

/* ── Barra lateral contraíble ──────────────────────────────────────────────
   Contraída ocupa 72px (solo iconos). Al pasar el ratón toma .peek y se
   despliega por encima del contenido: como está fuera del flujo, la página
   no se mueve —el padding del shell sigue reservando los mismos 72px—. */
.shell.mini{padding-left:96px}   /* 12 + 72 + 12 */
.sidebar{transition:width .18s ease}

.sidebar.collapsed{width:72px;overflow-x:hidden}
.sidebar.collapsed.peek{
  width:var(--sidebar);z-index:60;overflow-x:visible;
  box-shadow:14px 10px 44px rgba(0,0,0,.42);
  border-right:1px solid var(--border-2);
}
html[data-theme="light"] .sidebar.collapsed.peek{box-shadow:14px 10px 44px rgba(16,32,45,.18)}

.sidebar.collapsed:not(.peek) .nav-group > .meta,
.sidebar.collapsed:not(.peek) .nav-item span,
.sidebar.collapsed:not(.peek) .nav-item .chev,
.sidebar.collapsed:not(.peek) .nav-item .badge,
.sidebar.collapsed:not(.peek) .logo .wm,
.sidebar.collapsed:not(.peek) .user .who,
.sidebar.collapsed:not(.peek) .foot .meta,
.sidebar.collapsed:not(.peek) .user [data-logout]{display:none}
.sidebar.collapsed:not(.peek) .nav-sub{display:none !important}

.sidebar.collapsed:not(.peek) .brand{justify-content:center;padding:0}
.sidebar.collapsed:not(.peek) .logo{gap:0}
.sidebar.collapsed:not(.peek) .logo svg{width:30px}
.sidebar.collapsed:not(.peek) nav{padding:16px 10px}
.sidebar.collapsed:not(.peek) .nav-group{margin-bottom:12px}
.sidebar.collapsed:not(.peek) .nav-item{justify-content:center;padding:11px;border-radius:10px}
.sidebar.collapsed:not(.peek) .nav-item svg{width:18px;height:18px}
.sidebar.collapsed:not(.peek) .foot{padding:14px 8px}
.sidebar.collapsed:not(.peek) .user{justify-content:center}
.sidebar.collapsed:not(.peek) .nav-group + .nav-group{
  border-top:1px solid var(--border);padding-top:12px}

/* Controles: contraer (abierta) y fijar (en vista previa) */
.sb-ctl{
  width:26px;height:26px;border:0;border-radius:7px;background:transparent;color:var(--dim);
  cursor:pointer;display:none;align-items:center;justify-content:center;margin-left:auto;
  flex:none;transition:background .14s,color .14s}
.sb-ctl:hover{background:var(--surface-2);color:var(--fg)}
.sb-ctl svg{width:15px;height:15px}
.sidebar:not(.collapsed) [data-sb-close]{display:flex}
.sidebar.collapsed.peek [data-sb-pin]{display:flex}
@media(max-width:900px){.sb-ctl{display:none !important}.shell.mini{padding-left:0}}


/* ── Creación rápida (botón + de la barra superior) ────────────────────── */
.quick-wrap{position:relative;display:inline-flex}
.quick-menu{
  position:absolute;top:calc(100% + 10px);left:0;min-width:224px;z-index:120;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:7px;display:none;animation:rise .14s ease}
.quick-menu.on{display:block}
.quick-menu .t{font-family:var(--display);font-size:.6rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);padding:7px 10px 6px}
.quick-menu button{
  display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border:0;background:none;
  border-radius:var(--r);color:var(--fg-2);font-family:var(--display);font-size:.85rem;font-weight:500;
  cursor:pointer;text-align:left;transition:background .13s,color .13s}
.quick-menu button:hover{background:var(--surface-2);color:var(--fg)}
.quick-menu button svg{width:16px;height:16px;flex:none;color:var(--accent)}

/* ── Adjuntos de una respuesta ─────────────────────────────────────────── */
.adj{display:grid;gap:7px}
.adj-item{display:flex;align-items:center;gap:11px;padding:10px 13px;border:1px solid var(--border);
  border-radius:var(--r);background:var(--surface-2);transition:border-color .15s,background .15s}
.adj-item:hover{border-color:var(--accent);background:var(--accent-soft)}
.adj-item svg{width:15px;height:15px;color:var(--accent);flex:none}
.adj-item .n{flex:1;min-width:0;font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adj-item b{font-size:.74rem;font-weight:600;color:var(--dim);flex:none}

/* ── Ficha de una respuesta de formulario ──────────────────────────────── */
.rtas{display:grid;gap:0}
.rta{display:grid;grid-template-columns:minmax(200px,38%) 1fr;gap:20px;
  padding:13px 0;border-bottom:1px solid var(--border);align-items:start}
.rta:last-child{border-bottom:0}
.rta.vacia{opacity:.5}
.rta .p{font-size:.84rem;color:var(--muted);line-height:1.5}
.rta .v{font-size:.9rem;color:var(--fg);line-height:1.6;word-break:break-word}
.rta-larga{white-space:pre-wrap;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r);padding:11px 13px;font-size:.88rem;line-height:1.65}
@media(max-width:700px){.rta{grid-template-columns:1fr;gap:5px}}

/* Respuestas de selección múltiple */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip-v{display:inline-flex;align-items:center;background:var(--accent-soft);color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);border-radius:100px;
  padding:4px 11px;font-size:.78rem;font-weight:600;line-height:1.4}

/* ── Selector de periodo del dashboard ─────────────────────────────────── */
.periodo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px;
  padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)}
.periodo > .meta{flex:none}
.periodo-fechas{display:none;align-items:center;gap:8px}
.periodo-fechas.on{display:flex}
.periodo-fechas .input{max-width:150px;padding:7px 10px;font-size:.78rem}
@media(max-width:760px){
  .periodo{gap:9px}
  .periodo .spacer{display:none}
  .periodo-fechas.on{width:100%}
  .periodo-fechas .input{flex:1;max-width:none}
}

/* ── Selector de fecha propio ──────────────────────────────────────────── */
.fecha{position:relative;display:inline-flex}
.fecha-btn{display:inline-flex;align-items:center;gap:9px;width:100%;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);
  padding:9px 12px;color:var(--fg);font-family:var(--body);font-size:.85rem;
  cursor:pointer;transition:border-color .15s,background .15s;text-align:left}
.fecha-btn:hover{border-color:var(--accent);background:var(--surface-3)}
.fecha.abierto .fecha-btn{border-color:var(--accent)}
.fecha-btn svg{width:15px;height:15px;color:var(--accent);flex:none}
.fecha-txt{flex:1;white-space:nowrap}
.fecha-txt.vacia{color:var(--dim)}

.fp{position:absolute;top:calc(100% + 8px);left:0;z-index:400;width:274px;padding:12px;
  background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);animation:rise .14s ease}
.fp.arriba{top:auto;bottom:calc(100% + 8px)}

.fp-top{display:flex;align-items:center;gap:2px;margin-bottom:10px}
.fp-nav{width:26px;height:26px;flex:none;border:0;border-radius:6px;background:none;color:var(--dim);
  cursor:pointer;font-size:.9rem;line-height:1;transition:background .13s,color .13s}
.fp-nav:hover{background:var(--surface-2);color:var(--accent)}
.fp-mes{flex:1;text-align:center;font-family:var(--display);font-weight:700;font-size:.9rem;
  letter-spacing:-.01em;color:var(--fg);white-space:nowrap}
.fp-mes span{color:var(--dim);font-weight:600}

.fp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.fp-dow{text-align:center;font-family:var(--display);font-size:.56rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding:4px 0 7px}
.fp-dia{height:32px;border:0;border-radius:50%;background:none;color:var(--fg-2);cursor:pointer;
  font-family:var(--body);font-size:.82rem;display:flex;align-items:center;justify-content:center;
  transition:background .13s,color .13s}
.fp-dia:hover{background:var(--surface-3);color:var(--fg)}
.fp-dia.off{color:var(--dim);opacity:.45;cursor:default;font-size:.8rem}
.fp-dia.hoy{color:var(--accent);font-weight:700}
.fp-dia.sel{background:var(--accent);color:var(--accent-ink);font-weight:700}
.fp-dia.sel:hover{background:var(--accent)}

.fp-pie{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.fp-accion{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);
  border-radius:6px;background:var(--surface-2);color:var(--muted);cursor:pointer;
  padding:6px 12px;font-family:var(--body);font-size:.78rem;transition:.13s}
.fp-accion:hover{border-color:var(--accent);color:var(--accent)}
.fp-accion svg{width:13px;height:13px}
.fp-accion.borrar:hover{border-color:var(--danger);color:var(--danger)}

/* ── Calendario de cupos ───────────────────────────────────────────────── */
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:6px}
.cal-day .cupos{font-family:var(--display);font-size:.56rem;font-weight:700;letter-spacing:.04em;
  color:var(--ok);background:color-mix(in srgb, var(--ok) 13%, transparent);
  border-radius:100px;padding:2px 7px;white-space:nowrap}
.cal-day .cupos.lleno{color:var(--dim);background:var(--surface-2)}
.cal-day.pasado{opacity:.55}
.cal-day.nolab{background:var(--bg)}
.cal-day.nolab .num{opacity:.4}

/* Hueco libre: se ve que hay sitio y se puede pulsar para agendar */
.hueco{display:flex;align-items:center;gap:7px;width:100%;text-align:left;cursor:pointer;
  background:none;border:1px dashed var(--border-2);border-radius:4px;padding:4px 7px;
  color:var(--dim);transition:border-color .14s,background .14s,color .14s}
.hueco:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);border-style:solid}
.hueco .h{font-family:var(--display);font-weight:700;font-size:.6rem}
.hueco .t{font-size:.66rem}
.cal-legend .hueco-i{width:9px;height:9px;border-radius:2px;border:1px dashed var(--border-2);background:none}

/* Días de la semana en la disponibilidad */
.checks-h{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.chk-h{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;cursor:pointer;
  border:1px solid var(--border);border-radius:100px;background:var(--surface-2);
  font-size:.85rem;color:var(--fg);transition:border-color .15s,background .15s}
.chk-h:hover{border-color:var(--accent-deep)}
.chk-h input{appearance:none;-webkit-appearance:none;width:16px;height:16px;flex:none;margin:0;
  border:1.5px solid var(--dim);border-radius:4px;cursor:pointer;display:grid;place-content:center;
  transition:background .15s,border-color .15s}
.chk-h input::after{content:'';width:4px;height:8px;margin-top:-2px;border:solid var(--accent-ink);
  border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s}
.chk-h input:checked{background:var(--accent);border-color:var(--accent)}
.chk-h input:checked::after{transform:rotate(45deg) scale(1)}
.chk-h:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.cal-day .fuera{font-family:var(--display);font-size:.52rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--warn);background:color-mix(in srgb, var(--warn) 14%, transparent);
  border-radius:100px;padding:2px 6px;white-space:nowrap}
.cal-day.extra{background:color-mix(in srgb, var(--warn) 4%, var(--surface))}

/* ── Material de clase de una sesión ─────────────────────────────────────── */
/* Zona de arrastrar y soltar. Se usa en la ficha de sesión del expediente. */
.ses-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:104px;padding:18px 16px;text-align:center;cursor:pointer;
  border:1.5px dashed var(--border);border-radius:var(--r);background:var(--surface-2);
  transition:border-color .15s, background .15s}
.ses-drop:hover,.ses-drop:focus-visible{border-color:var(--accent);background:var(--accent-soft);outline:none}
.ses-drop.on{border-color:var(--accent);background:var(--accent-soft)}
.ses-drop.cargando{opacity:.55;pointer-events:none}
.ses-drop .t{font-family:var(--display);font-weight:700;font-size:.86rem;color:var(--fg)}
.ses-drop .s{font-size:.76rem;color:var(--dim);line-height:1.5}

/* El nombre del adjunto es un enlace de descarga; el botón de borrar va al lado. */
.adj-item a.n{color:inherit;text-decoration:none}
.adj-item a.n:hover{color:var(--accent);text-decoration:underline}
.adj-item .icon-btn{flex:none}

/* Contador de adjuntos en la fila del plan de sesiones. */
.ses-adj{display:inline-flex;align-items:center;gap:3px;font-size:.72rem;font-weight:600;
  color:var(--dim);vertical-align:middle}
.ses-adj svg{width:13px;height:13px}

/* Las filas de historial que abren algo se comportan como enlace. */
.lead-hist.clickable{cursor:pointer;align-items:center}
.lead-hist.clickable:hover{background:var(--row-hover)}
.lead-hist.clickable .d svg{width:14px;height:14px;color:var(--accent)}

/* Flechas de orden del plan de sesiones: la flecha derecha, girada. */
.icon-btn.rot-up svg{transform:rotate(-90deg)}
.icon-btn.rot-down svg{transform:rotate(90deg)}
.icon-btn[disabled]{opacity:.28;pointer-events:none}