/* Poppins autoalojada: mismas caras que sirve la landing. Antes el panel la
   pedía a Google Fonts en cada carga — una petición bloqueante a un tercero en
   una pantalla que ya exige sesión. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/poppins-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/poppins-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/poppins-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/poppins-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/poppins-latin-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * mancii-ui.css — Sistema visual propio de Mancii (no Sneat).
 * Tokens derivados del CSS real de mancii.com / mancii.online:
 * magenta de marca, gradiente firma, radios generosos, glass, Poppins,
 * transiciones suaves. Fuente única del look "con vida" del panel.
 ******************************************************************************/

:root {
  /* Mancii primitives · variables2.json */
  --primary-50: #fffaff;
  --primary-100: #fcccfb;
  --primary-200: #faa3f1;
  --primary-300: #f652c9;
  --primary-400: #f429ab;
  --primary: #f20087;
  --primary-600: #d8006d;
  --primary-700: #bc0056;
  --primary-800: #9f0040;
  --primary-900: #80002d;
  --secondary-50: #f6f4f6;
  --secondary-100: #d3ccd3;
  --secondary-200: #a899a8;
  --secondary-300: #7c667b;
  --secondary-400: #51334c;
  --secondary: #25001c;
  --neutral-000: #ffffff;
  --neutral-50: #ededee;
  --neutral-100: #d5d3d6;
  --neutral-200: #bbb8bd;
  --neutral-300: #a29da4;
  --neutral-400: #89838b;
  --neutral-500: #6f6a72;
  --neutral-600: #555157;
  --neutral-700: #3b393d;
  --neutral-800: #2e2c30;
  --neutral-900: #222022;
  --complementary-pink: #f20087;
  --complementary-orange-red: #e45131;
  --complementary-mint-green: #67da8a;
  --complementary-sky-blue: #418afa;
  --complementary-yellow-sun: #e1d532;
  --success: #30a46c;
  --success-bg: #e6f6ec;
  --success-dark: #18794e;
  --info: #3b82f6;
  --info-bg: #e8f0fe;
  --info-dark: #1d4ed8;
  --warning: #f59e0b;
  --warning-bg: #fef3e2;
  --warning-dark: #b45309;
  --error: #e5484d;
  --error-bg: #feebec;
  --error-dark: #b01e22;

  /* Mancii semantic aliases */
  --background: var(--neutral-000);
  --surface: var(--secondary-50);
  --canvas: var(--surface);
  --panel: var(--background);
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-disabled: var(--neutral-700);
  --border: var(--neutral-100);
  --border-subtle: color-mix(in srgb, var(--neutral-100) 65%, var(--neutral-000));
  --border-focus: var(--primary);
  --action-primary: var(--primary);
  --action-primary-hover: var(--primary-600);
  --action-primary-disabled: var(--primary-200);
  --action-secondary: var(--primary-100);
  --action-secondary-hover: var(--primary-200);
  --on-primary: var(--neutral-000);

  /* Mancii spacing */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 40px;
  --space-5xl: 48px;
  --space-6xl: 64px;

  /* Mancii radius */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Mancii typography · desktop */
  --font-family: "Poppins", sans-serif;
  --font-size-h1: 48px;
  --font-size-h2: 40px;
  --font-size-h3: 32px;
  --font-size-h4: 24px;
  --font-size-h5: 20px;
  --font-size-h6: 18px;
  --font-size-md: 16px;
  --font-size-sm: 14px;
  --line-height-heading: 1.2;
  --line-height-copy: 1.4;

  --shadow: 0 8px 28px rgb(37 0 28 / 0.08);
  --sidebar: 264px;

  /* ------------------------------------------------------------------ *
   * Puente con los tokens anteriores del panel.
   *
   * El sistema de arriba (entrega de Julian, ux/nueva-estructura-mancii) es la
   * fuente. Estos alias existen para que las ~20 vistas del panel hereden la
   * forma nueva sin editarlas una por una: se migra el sistema primero y las
   * pantallas después.
   *
   * El rosa NO cambia: --magenta era #f20087 y --primary es #f20087. Lo que
   * cambia es la forma — radios más cerrados, fondo blanco en vez de rosado, y
   * las líneas dejan de estar teñidas. El rosa pasa de bañar la interfaz a ser
   * acento.
   *
   * Al migrar una pantalla, se cambian sus `var(--magenta)` por `var(--primary)`
   * y se borra el alias cuando ya nadie lo use.
   * ------------------------------------------------------------------ */
  --magenta: var(--primary);
  --magenta-deep: var(--primary-600);
  --pink: var(--primary-300);
  --pink-soft: var(--primary-100);
  --ink: var(--secondary);
  --bg: var(--neutral-000);
  --surface: var(--neutral-000);
  --gray: var(--neutral-500);
  --gray-2: var(--neutral-300);
  --line: var(--neutral-50);
  --grad: linear-gradient(135deg, var(--primary) 0%, var(--primary-300) 60%, var(--primary-700) 100%);
  --grad-soft: linear-gradient(135deg, var(--primary-50) 0%, var(--primary-100) 100%);
  --r-lg: var(--radius-xl);
  --r-md: var(--radius-lg);
  --r-sm: var(--radius-md);
  --shadow-hover: 0 12px 36px rgb(37 0 28 / 0.14);
  --ease: .22s cubic-bezier(.2,.6,.2,1);
}
*{box-sizing:border-box}
body.mancii-ui{font-family:'Poppins',system-ui,sans-serif;background:var(--bg);color:var(--ink);margin:0;-webkit-font-smoothing:antialiased}

/* ── Shell: topbar glass + contenido ─────────────────────────────────────── */
.m-topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 1.5rem;background:rgba(255,255,255,.7);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.m-nav a{color:var(--gray);text-decoration:none;font-size:.85rem;font-weight:500;margin-left:1.25rem;transition:color var(--ease)}
.m-nav a:hover,.m-nav a.active{color:var(--magenta-deep)}
.m-wrap{max-width:1140px;margin:0 auto;padding:2rem 1.5rem 4rem}
.m-side-spacer{flex:1}
.m-main{flex:1;min-width:0}
.m-main .m-wrap{max-width:1080px;padding:2rem 2.25rem 4rem}
@media (max-width:820px){
  .m-main .m-wrap{padding:1.5rem 1.25rem 3rem}
}

/* ── Hero header con gradiente ───────────────────────────────────────────── */
.m-hero{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:1.75rem 2rem;
  background:var(--grad);color:#fff;box-shadow:var(--shadow);margin-bottom:1.75rem}
.m-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.12)}
.m-hero::before{content:"";position:absolute;right:60px;bottom:-90px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.08)}
.m-hero h1{font-size:1.6rem;font-weight:700;margin:0 0 .25rem;position:relative}
.m-hero p{opacity:.9;font-size:.95rem;font-weight:300;position:relative;margin:0}
.m-hero .m-cta{position:relative;margin-top:1.1rem}

/* ── Botones ─────────────────────────────────────────────────────────────── */
.m-btn{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-weight:600;font-size:.9rem;
  border:0;border-radius:99px;padding:.6rem 1.3rem;cursor:pointer;text-decoration:none;transition:all var(--ease)}
.m-btn-white{background:#fff;color:var(--magenta-deep)}
.m-btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.m-btn-brand{background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(242,0,135,.3)}
.m-btn-brand:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(242,0,135,.42)}
.m-btn-soft{background:var(--grad-soft);color:var(--magenta-deep);border:1px solid var(--pink-soft)}
.m-btn-soft:hover{background:var(--pink-soft)}
.m-btn-ghost{background:transparent;color:var(--gray);border:1px solid var(--line)}
.m-btn-ghost:hover{border-color:var(--magenta);color:var(--magenta-deep)}
.m-btn-danger{background:transparent;color:#b3261e;border:1px solid #f3d0cc}
.m-btn-danger:hover{background:#fdecea}
.m-btn-sm{padding:.45rem .9rem;font-size:.82rem;border-radius:10px}

/* ── Métricas ────────────────────────────────────────────────────────────── */
.m-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem;margin-bottom:1.75rem}
.m-stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:1.1rem 1.25rem;
  box-shadow:var(--shadow);transition:transform var(--ease),box-shadow var(--ease)}
.m-stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.m-stat .m-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gray-2);font-weight:600}
.m-stat .m-value{font-size:1.9rem;font-weight:700;line-height:1.1;margin-top:.35rem}
.m-stat .m-value.brand{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.m-stat .m-foot{font-size:.78rem;color:var(--gray);margin-top:.2rem}
.m-stat.avance{display:flex;align-items:center;gap:1rem}
.m-ring{--p:0;width:62px;height:62px;border-radius:50%;flex:none;
  background:conic-gradient(var(--magenta) calc(var(--p)*3.6deg),var(--line) 0);display:grid;place-items:center}
.m-ring::after{content:attr(data-p);width:46px;height:46px;border-radius:50%;background:var(--surface);
  display:grid;place-items:center;font-size:.78rem;font-weight:700;color:var(--magenta-deep);line-height:1}

/* ── Sección + grid de cards ─────────────────────────────────────────────── */
.m-section-head{display:flex;align-items:center;justify-content:space-between;margin:0 .25rem 1rem}
.m-section-head h2{font-size:1.05rem;font-weight:600;margin:0}
.m-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.1rem}

.m-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.25rem;box-shadow:var(--shadow);transition:transform var(--ease),box-shadow var(--ease);overflow:hidden}
.m-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad);
  transform:scaleY(0);transform-origin:top;transition:transform var(--ease)}
.m-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.m-card:hover::before{transform:scaleY(1)}
.m-card h3{font-size:1.02rem;font-weight:600;margin:0 0 .3rem;line-height:1.3}

/* La forma de chip va en la BASE, no solo en las variantes. Sin fondo, un
   `class="m-tag"` a secas se lee como texto en negrita y no como etiqueta — y
   así estaban nueve usos repartidos por el panel. Los valores son los que ya
   tenía `.tenant`, no colores nuevos: lo que faltaba era la forma. */
.m-tag{display:inline-block;font-size:.68rem;font-weight:600;border-radius:99px;padding:.18rem .6rem;margin-bottom:.7rem;background:#eef0f3;color:#4b5563}
.m-tag.network{background:var(--pink-soft);color:var(--magenta-deep)}
.m-tag.tenant{background:#eef0f3;color:#4b5563}
.m-desc{font-size:.85rem;color:var(--gray);font-weight:300;margin-bottom:1rem}
.m-meta{display:flex;gap:1.1rem;padding-top:.9rem;border-top:1px solid var(--line)}
.m-meta .m{font-size:.78rem;color:var(--gray)}
.m-meta .m b{display:block;font-size:1.15rem;color:var(--ink);font-weight:700}
.m-actions{display:flex;gap:.5rem;margin-top:1rem;flex-wrap:wrap}

/* ── Estado vacío ────────────────────────────────────────────────────────── */
.m-empty{grid-column:1/-1;text-align:center;padding:3.5rem 1rem;background:var(--surface);
  border:1px dashed var(--pink-soft);border-radius:var(--r-md)}
.m-empty .emoji{font-size:2.5rem}
.m-empty h3{font-weight:600;margin:.6rem 0 .3rem}
.m-empty p{color:var(--gray);font-weight:300;margin-bottom:1.2rem}

/* ── Avisos ──────────────────────────────────────────────────────────────── */
.m-alert{border-radius:var(--r-sm);padding:.7rem 1rem;margin-bottom:1rem;font-size:.9rem}
.m-alert.ok{background:#e6fcf5;color:#0a7d5c}
.m-alert.err{background:#fdecea;color:#b3261e}

/* ── Formularios ─────────────────────────────────────────────────────────── */
.m-field{margin-bottom:1rem}
.m-field label{display:block;font-size:.78rem;color:var(--gray);font-weight:600;margin-bottom:.3rem}
.m-input,.m-select,.m-textarea{width:100%;padding:.6rem .75rem;font:inherit;font-size:.9rem;
  border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fff;transition:border var(--ease),box-shadow var(--ease)}
.m-input:focus,.m-select:focus,.m-textarea:focus{outline:none;border-color:var(--magenta);box-shadow:0 0 0 3px rgba(242,0,135,.12)}
.m-textarea{min-height:120px;font-family:Monaco,'Courier New',monospace;font-size:.82rem}

/* ── Tabla ───────────────────────────────────────────────────────────────── */
.m-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);overflow:hidden}
/* Pestañas del resumen. Son <a> con su propia URL, no botones con JS: cada vista
   se puede compartir y funciona sin scripts. El subrayado del navegador se quita
   por la misma razón que en el sidebar. */
.m-tabs{display:flex;gap:2px;margin-bottom:1.5rem;padding-bottom:0;border-bottom:1px solid var(--line)}
.m-tab{padding:.6rem 1rem;border-bottom:2px solid transparent;color:var(--gray-2);
  font-size:.88rem;font-weight:600;text-decoration:none;transition:color .15s ease,border-color .15s ease}
.m-tab:hover{color:var(--mancii-ink)}
.m-tab.is-active{color:var(--mancii-magenta-deep);border-bottom-color:var(--mancii-magenta)}

.m-table{width:100%;border-collapse:collapse;font-size:.88rem}
.m-table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-2);font-weight:600;text-align:left;padding:.7rem 1rem;border-bottom:1px solid var(--line)}
.m-table td{padding:.7rem 1rem;border-bottom:1px solid var(--line)}
.m-table tr:last-child td{border-bottom:0}
.m-table tr:hover td{background:var(--grad-soft)}
.m-pill{display:inline-block;font-size:.72rem;font-weight:600;border-radius:99px;padding:.1rem .6rem}
.m-pill.PENDING{background:#f3f4f6;color:#374151}
.m-pill.IN_PROGRESS{background:#fff3cd;color:#92600a}
.m-pill.COMPLETED{background:#e6fcf5;color:#0a7d5c}
.m-pill.EXPIRED{background:#fdecea;color:#b3261e}

/* ── Entrada con stagger ─────────────────────────────────────────────────── */
@keyframes m-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.m-card,.m-stat{animation:m-rise .5s var(--ease) backwards}
.m-grid .m-card:nth-child(2){animation-delay:.05s}.m-grid .m-card:nth-child(3){animation-delay:.1s}
.m-grid .m-card:nth-child(4){animation-delay:.15s}.m-grid .m-card:nth-child(5){animation-delay:.2s}
.m-grid .m-card:nth-child(6){animation-delay:.25s}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.m-muted{color:var(--gray);font-size:.85rem}
.m-mt{margin-top:1.5rem}

/* ── Perfil de participante ─────────────────────────────────────────────── */
.lead-row-link{color:var(--ink);text-decoration:none}.lead-row-link:hover{color:var(--magenta-deep)}
.lead-row[data-href]{cursor:pointer;transition:background var(--ease,.15s ease)}.lead-row[data-href]:hover{background:var(--grad-soft,#faf3f8)}
.lead-row-arrow{float:right;color:var(--magenta-deep);font-size:1.1rem;text-decoration:none;transition:transform var(--ease)}.lead-row-arrow:hover{transform:translateX(3px)}
.participant-back{display:inline-flex;align-items:center;gap:.45rem;color:var(--gray);font-size:.84rem;font-weight:600;text-decoration:none;margin-bottom:1rem}.participant-back svg{width:17px}.participant-back:hover{color:var(--magenta-deep)}
.participant-hero{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:2rem;border-radius:24px;background:var(--grad);color:#fff;box-shadow:var(--shadow-hover)}
.participant-hero::after{content:"";position:absolute;inset:auto -50px -120px auto;width:280px;height:280px;border:70px solid rgba(255,255,255,.09);border-radius:50%}.participant-hero>*{position:relative;z-index:1}
.participant-identity{display:flex;align-items:center;gap:1.15rem}.participant-avatar{width:74px;height:74px;flex:none;display:grid;place-items:center;border:1px solid rgba(255,255,255,.4);border-radius:22px;background:rgba(255,255,255,.18);backdrop-filter:blur(10px);font-size:2rem;font-weight:700}
.participant-kicker{display:flex;align-items:center;gap:.45rem;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;opacity:.88}.participant-kicker span{width:7px;height:7px;border-radius:50%;background:#8ce99a;box-shadow:0 0 0 4px rgba(140,233,154,.18)}.participant-kicker-pending span{background:#f0c674;box-shadow:0 0 0 4px rgba(240,198,116,.2)}
.participant-hero h1{margin:.3rem 0 .05rem;font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.04em;line-height:1.05}.participant-hero p{margin:0;opacity:.8}.participant-actions{display:flex;justify-content:flex-end;align-items:center;gap:.55rem;flex-wrap:wrap;max-width:470px}.participant-actions svg,.participant-contact svg{width:17px;height:17px}.participant-stage{padding:.5rem .75rem;border:1px solid rgba(255,255,255,.3);border-radius:99px;background:rgba(46,23,46,.18);font-size:.74rem;font-weight:600}.participant-whatsapp{background:var(--ink);color:#fff}.participant-whatsapp:hover{transform:translateY(-2px);background:#1f101f}.participant-actions .is-copied{background:#fff;color:#0a7d5c}
.participant-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:1.25rem;margin-top:1.25rem;align-items:start}.participant-main{display:grid;gap:1.25rem}.participant-aside{display:grid;gap:1.25rem;position:sticky;top:1.25rem}
.participant-section,.participant-contact,.participant-quality{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:1.5rem;box-shadow:var(--shadow)}.participant-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.2rem}.participant-eyebrow{display:block;color:var(--magenta-deep);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}.participant-section h2,.participant-contact h2,.participant-quality h2{font-size:1.15rem;letter-spacing:-.02em;margin:.25rem 0 0}.participant-count,.participant-tie{padding:.3rem .6rem;border-radius:99px;background:var(--grad-soft);color:var(--magenta-deep);font-size:.7rem;font-weight:700}.participant-tie{border:1px solid var(--pink-soft)}
.participant-highlights{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.participant-highlights article{padding:1rem;border-radius:14px;background:#faf7fa;border:1px solid transparent;transition:border-color var(--ease),transform var(--ease)}.participant-highlights article:hover{border-color:var(--pink-soft);transform:translateY(-2px)}.participant-highlights p{margin:0 0 .45rem;color:var(--gray);font-size:.72rem;line-height:1.45}.participant-highlights strong{display:block;font-size:.92rem;line-height:1.45}
.area-list{display:grid;gap:1rem}.area-row{display:flex;align-items:center;gap:.8rem}.area-rank{font-size:.72rem;color:var(--gray-2);font-weight:700}.area-data{flex:1}.area-data>div:first-child{display:flex;justify-content:space-between;gap:1rem;font-size:.88rem}.area-data span{color:var(--gray);font-size:.74rem}.area-track{height:7px;margin-top:.4rem;background:var(--line);border-radius:99px;overflow:hidden}.area-track i{display:block;width:var(--area-width);height:100%;border-radius:inherit;background:var(--grad);transform-origin:left;animation:area-grow .8s .15s cubic-bezier(.2,.7,.2,1) backwards}@keyframes area-grow{from{transform:scaleX(0)}}.participant-note{margin:1.1rem 0 0;padding:.75rem 1rem;border-left:3px solid var(--magenta);background:var(--grad-soft);color:var(--gray);font-size:.76rem;line-height:1.55}
.trait-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem}.trait-grid article{min-height:112px;padding:1rem;border-radius:14px;background:#faf7fa}.trait-grid span{display:block;color:var(--gray);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em}.trait-grid strong{display:block;margin-top:.45rem;font-size:.9rem}.trait-grid i{display:block;height:4px;margin-top:1rem;background:var(--line);border-radius:10px;overflow:hidden}.trait-grid i b{display:block;height:100%;background:var(--magenta);border-radius:inherit}
.participant-details{padding:0;overflow:hidden}.participant-details summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:1.25rem 1.5rem;list-style:none}.participant-details summary::-webkit-details-marker{display:none}.participant-details summary small{display:block;color:var(--magenta-deep);font-size:.65rem;text-transform:uppercase;letter-spacing:.09em}.participant-details summary b{font-size:.95rem}.details-plus{font-size:1.5rem;transition:transform var(--ease)}.participant-details[open] .details-plus{transform:rotate(45deg)}.answer-groups{padding:0 1.5rem 1.5rem;border-top:1px solid var(--line)}.answer-groups section{padding-top:1rem}.answer-groups h3{color:var(--magenta-deep);font-size:.82rem}.answer-groups section>div{display:grid;grid-template-columns:1.2fr 1fr;gap:1rem;padding:.7rem 0;border-top:1px solid var(--line)}.answer-groups p,.answer-groups strong{margin:0;font-size:.76rem;line-height:1.5}.answer-groups p{color:var(--gray)}
.participant-contact dl{margin:1rem 0}.participant-contact dl div{padding:.65rem 0;border-bottom:1px solid var(--line)}.participant-contact dt{color:var(--gray);font-size:.68rem}.participant-contact dd{margin:.2rem 0 0;font-size:.82rem;font-weight:600;overflow-wrap:anywhere}.participant-contact dd span{color:#0a7d5c}.participant-contact .m-btn{width:100%;justify-content:center}.quality-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-top:1rem}.quality-grid div{padding:.7rem;border-radius:12px;background:#faf7fa}.quality-grid strong,.quality-grid span{display:block}.quality-grid strong{font-size:1rem}.quality-grid span{color:var(--gray);font-size:.64rem}.participant-quality>p{margin:1rem 0 0;color:var(--gray);font-size:.69rem;line-height:1.65}
.profile-reveal{animation:profile-rise .55s cubic-bezier(.2,.7,.2,1) backwards}.participant-layout .profile-reveal:nth-child(2){animation-delay:.07s}.participant-layout .profile-reveal:nth-child(3){animation-delay:.14s}@keyframes profile-rise{from{opacity:0;transform:translateY(12px)}}
@media(max-width:980px){.participant-layout{grid-template-columns:1fr}.participant-aside{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.participant-hero{align-items:flex-start;flex-direction:column;padding:1.4rem}.participant-actions{justify-content:flex-start}.participant-avatar{width:58px;height:58px;border-radius:17px}.participant-layout{display:block}.participant-main,.participant-aside{display:grid;margin-top:1rem}.participant-aside{grid-template-columns:1fr}.participant-highlights{grid-template-columns:1fr}.answer-groups section>div{grid-template-columns:1fr;gap:.25rem}.participant-section,.participant-contact,.participant-quality{padding:1.2rem}}
.m-impersonation-bar{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 1.25rem;background:#2b1a35;color:#f4ecf7;font-size:.78rem;line-height:1.45;box-shadow:0 1px 0 rgba(0,0,0,.18)}.m-impersonation-bar strong{color:#fff}.m-impersonation-bar form{margin:0;flex:0 0 auto}.m-impersonation-bar .m-btn{background:#f4ecf7;color:#2b1a35;border:0}.m-impersonation-bar .m-btn:hover{background:#fff}
@media(max-width:680px){.m-impersonation-bar{align-items:flex-start;flex-direction:column;gap:.5rem;padding:.6rem 1rem}}

/* ==================================================================== *
 * SHELL — entrega de Julian (ux/nueva-estructura-mancii).
 *
 * Reemplaza al shell anterior (.m-shell / .m-sidebar / .m-side-link), que
 * sólo usaba el layout. Los componentes de contenido siguen con el
 * vocabulario `m-*`: acá cambia el marco, no las pantallas.
 * ==================================================================== */

.app-shell{min-height: 100vh;}
.sidebar{position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--sidebar); display: flex; flex-direction: column; padding: var(--space-2xl) var(--space-lg) var(--space-lg); background: var(--background); border-right: 1px solid var(--border);}
/* Ritmo del menú apretado a propósito: con tres grupos el contenido medía 614px
   contra 410 de alto disponible, y el último grupo —el de configuración— quedaba
   abajo del corte sin ninguna pista de que existiera. `.nav-groups` ya scrollea,
   pero un scroll que nadie ve no es una salida: la salida es que quepa. */
.brand-lockup{display: grid; justify-items: start; gap: var(--space-sm); padding: 0 var(--space-sm) var(--space-lg);}
.brand-lockup img{display: block; width: 128px; height: auto;}
.brand-lockup > span{color: var(--neutral-500); font-size: var(--font-size-sm); font-weight: 500;}
.university-switcher{display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; margin-bottom: var(--space-lg); padding: var(--space-md); background: var(--secondary-50); border: 1px solid var(--border); border-radius: var(--radius-lg);}
.university-monogram{width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--primary-100); color: var(--primary-800); font-weight: 700; font-size:var(--font-size-sm);}
.university-switcher div{min-width: 0;}
.university-switcher div span{display: block; color: var(--neutral-500); font-size:var(--font-size-sm);}
.university-switcher strong{display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:var(--font-size-sm);}
.switcher-chevron{width:16px; height:16px; color: var(--neutral-500);}
.nav-groups{display: flex; flex-direction: column; gap: 10px; overflow-y: auto; flex: 1 1 auto;}
/* El grupo plegable se ve igual que los otros rótulos: es el mismo tipo de cosa,
   solo que se puede cerrar. El triángulo nativo se reemplaza por un chevron para
   no romper la tipografía del menú. */
.nav-group[open]{display: flex; flex-direction: column; gap: 3px;}
.nav-label-toggle{cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;}
.nav-label-toggle::-webkit-details-marker{display: none;}
.nav-label-toggle::after{content: ''; width: 7px; height: 7px; margin-right: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--ease);}
.nav-group[open] > .nav-label-toggle::after{transform: rotate(-135deg) translateY(-2px);}
.nav-group{display: grid; gap: 3px;}
.nav-label{padding: 0 10px 7px; color: var(--neutral-400); font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;}
/* `text-decoration: none` no es cosmética: en el prototipo de Julián los ítems
   son <button> y acá son <a> de verdad — navegación real, indexable, que abre en
   pestaña nueva si el usuario quiere. El único efecto secundario es el subrayado
   que trae el navegador, y es la misma trampa que ya estaba documentada para la
   landing pero que en el panel nadie había aplicado.
   El tamaño se fija en vez de heredarse: heredar `.87rem` del body dejaba el
   sidebar a merced de cualquier cambio de tipografía en otra pantalla. */
.nav-item{width: 100%; min-height: 38px; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--neutral-600); font-size: 13px; text-align: left; text-decoration: none; transition: background .15s ease, color .15s ease;}
.nav-item:hover{background: var(--primary-50); color: var(--primary);}
.nav-item.is-active{background: color-mix(in srgb, var(--primary-100) 42%, var(--background)); color: var(--primary-800); font-weight: 600;}
/* 19px, no 20: acompaña al texto de 13px. El trazo de 1.8 es el de Julián. */
.nav-icon{width: 19px; height: 19px; flex: 0 0 auto; color: currentColor; stroke-width: 1.8;}
.nav-count{min-width: 22px; margin-left: auto; padding: 1px 6px; border-radius: 999px; background: var(--surface); color: var(--neutral-500); font-size:var(--font-size-sm); text-align: center;}
.sidebar-footer{margin-top: auto; padding-top: 20px;}
.workspace{min-height: 100vh; margin-left: var(--sidebar);}
.topbar{position: sticky; top: 0; z-index: 20; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 var(--space-3xl); background: color-mix(in srgb, var(--background) 92%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: blur(14px);}
.context-line{display: flex; align-items: center; min-width: 0; gap: 8px; color: var(--neutral-400); font-size:var(--font-size-sm);}
.context-line button{max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; border: 0; background: transparent; color: var(--neutral-500);}
.context-line button:hover{color: var(--primary);}
.context-line strong{min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--neutral-800); font-weight: 600;}
.topbar-actions{display: flex; align-items: center; gap: 8px;}
.mobile-menu{display: none; border: 0; background: transparent;}
.mobile-menu .lucide{width:22px; height:22px;}
.icon-button{width: 36px; height: 36px; display: grid; place-items: center; position: relative; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--background); font-size: 17px;}
.icon-button:hover{border-color: var(--primary-200); color: var(--primary);}
.icon-button .lucide{width:18px; height:18px;}
.main-content{width: min(1440px, 100%); margin: 0 auto; padding: var(--space-4xl) var(--space-4xl) var(--space-6xl);}
.main-content:focus{outline: 0;}

/* Switcher desplegable. En el prototipo es un bloque estático; acá tiene que
   abrir, y se hace con <details> para que funcione sin JavaScript. */
.university-switcher-wrap{margin-bottom:var(--space-2xl)}
.university-switcher-wrap .university-switcher{margin-bottom:0;cursor:pointer;list-style:none}
.university-switcher-wrap .university-switcher::-webkit-details-marker{display:none}
.university-switcher-wrap[open] .switcher-chevron{transform:rotate(180deg)}
.switcher-chevron{transition:transform .18s ease}
.switcher-menu{display:grid;gap:2px;margin-top:var(--space-xs);padding:var(--space-xs);
  background:var(--background);border:1px solid var(--border);border-radius:var(--radius-lg);
  max-height:320px;overflow-y:auto}
.switcher-menu form{margin:0}
.switcher-option{width:100%;padding:var(--space-sm) var(--space-md);border:0;border-radius:var(--radius-md);
  background:transparent;color:var(--neutral-800);font:inherit;font-size:var(--font-size-sm);
  text-align:left;cursor:pointer}
.switcher-option:hover{background:var(--secondary-50)}
.switcher-option.is-exit{color:var(--primary-700);font-weight:600}

/* Responsivo del shell — venía en las media queries del prototipo. */
@media (max-width: 900px) {
  :root{--sidebar: 246px;}
  .sidebar{transform:translateX(-100%); box-shadow:20px 0 60px rgb(37 0 28 / .12); transition:transform .2s ease;}
  .sidebar.is-open{transform:translateX(0);}
  .workspace{margin-left:0;}
  .mobile-menu{display:block;}
  .topbar{padding:0 20px;}
  .main-content{padding:32px 24px 56px;}
}
@media (max-width: 640px) {
  .topbar{height:58px; padding:0 14px;}
  .context-line button:first-child,.topbar-actions .icon-button{display:none;}
  .main-content{padding:24px 14px 48px;}
}

/* ── Modal de confirmación ────────────────────────────────────────────────
   Reemplaza al `confirm()` nativo, que no se puede estilar y anuncia el
   dominio («mancii.test dice») en vez de la marca.

   Es un `<dialog>` real: el navegador ya resuelve el foco atrapado, el cierre
   con Escape y el `aria-modal`. Reimplementarlo con un `div` significaría
   reescribir todo eso a mano y peor. */
.m-modal{max-width:min(440px,calc(100vw - 2rem));padding:1.6rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-hover)}
.m-modal::backdrop{background:rgba(46,23,46,.45);backdrop-filter:blur(2px)}
.m-modal__title{margin:0 0 .35rem;font-size:1.08rem;font-weight:700}
/* El nombre de la oferta: es lo que confirma que se va la correcta. */
.m-modal__offer{margin:0 0 .6rem;font-weight:600;color:var(--magenta-deep);overflow-wrap:anywhere}
.m-modal__offer:empty{display:none}
.m-modal__body{margin:0;color:var(--gray);font-size:.87rem;line-height:1.5}
.m-modal__actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.3rem}
@media(max-width:420px){.m-modal__actions{flex-direction:column-reverse}.m-modal__actions .m-btn{width:100%}}


/* ── Ficha de oferta ──────────────────────────────────────────────────────
   DOS COLUMNAS: contenido y ficha de datos. A ancho completo la descripción
   daba renglones de ~120 caracteres, muy por encima de lo que el ojo sigue sin
   perder la línea, y la grilla de datos partía «Planteles» solo en otra fila.
   Debajo de 900px vuelve a una sola columna, con los datos primero: cuando la
   pantalla es angosta, el resumen sirve más que el texto largo. */
.m-offer-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:1.25rem;align-items:start}
.m-offer-main,.m-offer-aside{padding:1.35rem}
.m-offer-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem}
.m-offer-tags .m-tag{margin-bottom:0}
@media(max-width:900px){
  .m-offer-layout{grid-template-columns:1fr}
  .m-offer-aside{order:-1}
}

/* Medida de lectura: el límite lo pone el TEXTO, no el contenedor. */
.m-prose{max-width:68ch;margin:0 0 1.1rem;color:var(--gray);font-size:.92rem;line-height:1.65}

.m-facts{display:grid;gap:.85rem;margin:0}
.m-facts>div{display:flex;flex-direction:column;gap:.15rem}
.m-facts dt{font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gray-2)}
.m-facts dd{margin:0;font-size:.9rem;line-height:1.4;color:var(--ink)}

.m-aside-title{margin:1.2rem 0 .5rem;padding-top:1.1rem;border-top:1px solid var(--line);
  font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gray-2)}
.m-video-list{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.m-video-list a{display:flex;align-items:center;gap:.5rem;padding:.45rem .6rem;border:1px solid var(--line);
  border-radius:var(--r-sm);color:var(--ink);font-size:.85rem;font-weight:600;text-decoration:none;transition:all var(--ease)}
.m-video-list a:hover{border-color:var(--magenta);color:var(--magenta-deep)}
.m-video-mark{display:grid;place-items:center;width:20px;height:20px;flex:none;border-radius:50%;
  background:var(--pink-soft);color:var(--magenta-deep);font-size:.55rem}

/* ── Contadores de postulaciones ──────────────────────────────────────────
   «Sin revisar» se acentúa cuando hay alguna: es el único de los cuatro sobre
   el que hay algo que hacer. Los otros tres son historia. */
.m-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.7rem;margin-bottom:1rem}
.m-stat{padding:.8rem 1rem;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.m-stat b{display:block;font-size:1.5rem;line-height:1.1;color:var(--ink)}
.m-stat span{font-size:.75rem;color:var(--gray)}
.m-stat.is-actionable{border-color:var(--pink-soft);background:var(--grad-soft)}
.m-stat.is-actionable b,.m-stat.is-actionable span{color:var(--magenta-deep)}

/* ── Tabla de postulantes ─────────────────────────────────────────────────
   La píldora de estado acompaña al desplegable en vez de reemplazarlo: el
   `<select>` obliga a leer, la píldora se reconoce de un vistazo con veinte
   filas. Los colores son semánticos y no de marca — aceptada/rechazada tienen
   que distinguirse SIN leer. */
.m-applicants tbody tr:hover{background:var(--grad-soft)}
.m-applicants td{vertical-align:middle}
.m-applicant-mail{display:block;font-weight:600;color:var(--magenta-deep);text-decoration:none}
.m-applicant-mail:hover{text-decoration:underline}
.m-applicant-sub{display:block;font-size:.76rem;color:var(--gray-2)}
.m-applicant-note{max-width:34ch;font-size:.85rem;color:var(--gray)}
.m-applicant-date{white-space:nowrap;font-size:.82rem;color:var(--gray)}

.m-status{display:inline-block;margin-bottom:.45rem;padding:.16rem .6rem;border-radius:99px;
  font-size:.68rem;font-weight:700}
.m-status.is-pending{background:#fdf1dc;color:#8a5a00}
.m-status.is-under_review{background:#e3edfd;color:#1d4e89}
.m-status.is-accepted{background:#e2f5ea;color:#1c6b42}
.m-status.is-rejected{background:#fdecea;color:#b3261e}

.m-status-form{display:flex;gap:.4rem;align-items:center;margin:0}
.m-status-form .m-select{min-width:140px;padding:.4rem .6rem;font-size:.82rem}
@media(max-width:640px){.m-status-form{flex-direction:column;align-items:stretch}}

/* ── Tablero de accesos de una organización ──────────────────────────────────
   Una barra por CONCESIÓN, de ancho completo, dentro de un solo panel. Se probó
   agrupado por persona y por universidad: cada forma contesta bien una pregunta
   y esconde la otra. La lista cruda las contesta las dos porque cada renglón
   trae su alcance escrito al lado, y es la única que se lee de corrido cuando lo
   que se quiere es barrer «qué repartimos acá».

   No es una tabla: las cuatro celdas de una barra no necesitan alinearse en
   columnas —el alcance manda y lo demás lo acompaña—, y con `flex` la barra se
   reordena sola en pantalla angosta sin arrastrar encabezados. */
.m-access { padding: .75rem; display: flex; flex-direction: column; gap: .55rem; }

.m-access-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .8rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 99px;   /* la píldora deja claro que cada barra es UNA cosa
                            entera y no una fila de una grilla */
  background: var(--surface);
  transition: border-color var(--ease), box-shadow var(--ease);
}

.m-access-row:hover { border-color: var(--pink-soft); box-shadow: var(--shadow); }

/* El acceso de nivel cuenta es el más ancho que hay: tiene que encontrarse de un
   vistazo, sin leer los cuatro renglones. */
.m-access-row.is-all { border-color: var(--pink-soft); background: var(--grad-soft); }

/* Persona: el NOMBRE manda y el correo lo acompaña. Al revés la columna se leía
   como una lista de correos. */
.m-access-row .who { flex: 0 0 15rem; min-width: 0; }
.m-access-row .name { display: block; font-weight: 600; font-size: .92rem; color: var(--ink); }
.m-access-row .mail {
  display: block;
  font-size: .78rem;
  color: var(--gray);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-access-row .mail:hover { color: var(--magenta); text-decoration: underline; }

.m-access-row > .m-tag { flex: 0 0 auto; }

/* El alcance se queda con el espacio sobrante: es el dato por el que se entra a
   esta pantalla. */
.m-access-row .scope { flex: 1 1 auto; min-width: 0; }
.m-access-row .scope .what { display: block; font-size: .9rem; color: var(--ink); }
.m-access-row .scope .detail { display: block; font-size: .75rem; color: var(--gray); }
.m-access-row.is-all .scope .what { font-weight: 600; color: var(--magenta-deep); }

.m-access-row .since { flex: 0 0 auto; font-size: .78rem; color: var(--gray-2); white-space: nowrap; }

/* En angosto la píldora se rompe: pasa a tarjeta y los datos se apilan. Mantener
   el `border-radius: 99px` con dos renglones deja los bordes comiéndose el
   texto. */
@media (max-width: 720px) {
  .m-access-row { flex-wrap: wrap; gap: .35rem .75rem; border-radius: var(--r-md); }
  .m-access-row .who { flex: 1 1 100%; }
  .m-access-row .scope { flex: 1 1 100%; }
  .m-access-row .since { margin-left: auto; }
}

/* ── Casillas en lista (sedes a cargo de un delegado) ────────────────────────
   Cada opción es una fila entera clickeable, no una casilla con texto al lado:
   marcar dos sedes seguidas con un cursor apuntando a 13px de caja es la clase
   de fricción que hace que alguien las dé de alta de a una. */
.m-checks {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-top: .35rem;
}

.m-check {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: .9rem;
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease);
}

.m-check:hover { border-color: var(--pink-soft); }

/* El estado marcado se ve en la FILA, no solo en la casilla: con cuatro sedes
   listadas hay que poder contar las elegidas de un vistazo. Necesita `:has`,
   así que la casilla sigue siendo la fuente de verdad y esto es decoración. */
.m-check:has(input:checked) { border-color: var(--magenta); background: var(--grad-soft); }

.m-check input { width: 1rem; height: 1rem; accent-color: var(--magenta); cursor: pointer; }

/* Ayuda flotante del CAC estimado: el «?» que recuerda por qué es una hipótesis
   y qué datos del tenant faltan para el número exacto. En hover Y en focus
   (teclado), y el texto sale de data-tip para que la leyenda viva en la vista,
   no partida entre HTML y CSS. */
.m-cac-help{display:inline-grid;place-items:center;width:16px;height:16px;margin-left:.25rem;
  border-radius:50%;background:var(--magenta-deep,#631f52);color:#fff;font-size:.7rem;font-weight:700;
  line-height:1;cursor:help;vertical-align:middle;position:relative;user-select:none}
.m-cac-help:focus{outline:2px solid var(--magenta-deep,#631f52);outline-offset:2px}
.m-cac-help::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(4px);width:min(280px,72vw);padding:.6rem .75rem;
  background:#2e172e;color:#fff;font-size:.78rem;font-weight:400;line-height:1.35;text-align:left;
  border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.22);opacity:0;visibility:hidden;
  transition:opacity .15s ease,transform .15s ease;z-index:20;pointer-events:none}
.m-cac-help::before{content:"";position:absolute;bottom:calc(100% + 2px);left:50%;
  transform:translateX(-50%) translateY(4px);border:6px solid transparent;border-top-color:#2e172e;
  opacity:0;visibility:hidden;transition:opacity .15s ease,transform .15s ease;z-index:20}
.m-cac-help:hover::after,.m-cac-help:focus::after,
.m-cac-help:hover::before,.m-cac-help:focus::before{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}


/* ── Tablero de conversión ────────────────────────────────────────────────
   Las columnas salen de `funnel_stages` y son configurables por el cliente, así
   que el ancho no puede depender de cuántas hay: la fila scrollea en horizontal
   y cada columna tiene un ancho propio. Con `flex:1` repartido entre 8 columnas
   la tarjeta quedaba más angosta que el correo que muestra. */
.m-board-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.m-board-head p{margin:0;font-size:.83rem}
.m-board-picker{display:flex;gap:.75rem;align-items:flex-end;margin-top:.75rem;position:relative}
.m-board-picker label{display:flex;flex-direction:column;gap:.2rem}
.m-board-picker span{font-size:.72rem;color:rgba(255,255,255,.85)}
.m-board-picker select{font:inherit;font-size:.85rem;padding:.35rem .5rem;border:1px solid var(--line);
  border-radius:var(--r-sm);background:#fff;color:var(--ink);max-width:220px}

.funnel-board{display:flex;gap:1rem;align-items:flex-start;overflow-x:auto;padding-bottom:1rem}
.funnel-col{flex:1 0 200px;max-width:320px;display:flex;flex-direction:column;gap:.5rem}

/* El NÚMERO de la columna, que es la mitad del punto de esta pantalla: dice en
   qué paso del proceso está la tarjeta sin tener que contar columnas a ojo. */
.m-board-col-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.45rem .1rem .5rem;border-bottom:2px solid var(--line)}
.m-board-col-head > div{display:flex;align-items:center;gap:.45rem;min-width:0}
.m-board-col-num{flex:0 0 auto;display:grid;place-items:center;width:20px;height:20px;border-radius:var(--radius-full);
  background:var(--grad-soft);color:var(--magenta-deep);font-size:.7rem;font-weight:700;font-variant-numeric:tabular-nums}
.m-board-col-name{font-weight:600;font-size:.88rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-board-col-count{flex:0 0 auto;font-family:ui-monospace,monospace;font-size:.75rem;
  background:var(--grad-soft);color:var(--magenta-deep);border-radius:var(--radius-full);padding:.1rem .5rem}
/* El cierre se distingue del paso intermedio por el borde y no por el color del
   texto: son las dos columnas que se buscan de un vistazo. */
.m-board-col-won{border-bottom-color:var(--success)}
.m-board-col-lost{border-bottom-color:var(--neutral-200)}

/* La explicación de la columna: es lo que contestaba «¿qué quiere decir
   Contactado 1?». Se recorta a tres renglones y el resto queda en el `title`,
   para que una descripción larga no empuje las tarjetas fuera de la pantalla. */
.m-board-col-desc{margin:0;font-size:.72rem;line-height:1.4;color:var(--gray);
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.m-board-col-cards{display:flex;flex-direction:column;gap:.6rem;min-height:60px}

/* ── Tarjeta de lead ──────────────────────────────────────────────────────── */
.m-lead{display:flex;flex-direction:column;gap:.15rem;padding:.7rem .75rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);cursor:grab}
.m-lead:active{cursor:grabbing}
.m-lead.is-new{animation:leadpop .7s cubic-bezier(.2,.7,.2,1)}
@keyframes leadpop{0%{transform:scale(.9);box-shadow:0 0 0 4px rgb(242 0 135 / .25)}100%{transform:scale(1)}}
.m-lead-name{font-size:.9rem;font-weight:600;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
a.m-lead-name:hover{color:var(--magenta-deep);text-decoration:underline}
.m-lead-name.is-flat{color:var(--neutral-600)}
.m-lead-mail{font-size:.74rem;color:var(--gray);overflow-wrap:anywhere}
.m-lead-tools{display:flex;gap:.3rem;margin-top:.45rem}
.m-lead-tool{position:relative;display:inline-grid;place-items:center;width:30px;height:30px;padding:0;
  border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;color:var(--gray);cursor:pointer;
  text-decoration:none;transition:color var(--ease),border-color var(--ease)}
.m-lead-tool:hover{color:var(--magenta-deep);border-color:var(--pink-soft)}
.m-lead-tool .icon{width:15px;height:15px}
.m-lead-wa{color:#25d366}
.m-lead-wa:hover{color:#128c7e;border-color:#25d366}
/* El teléfono que la persona escribió pero no confirmó por OTP: se ofrece igual
   —es accionable— y se dice que no está confirmado, igual que en la ficha. */
.m-lead-wa.is-unconfirmed{color:var(--neutral-300);border-style:dashed}
.m-lead-badge{position:absolute;top:-6px;right:-6px;min-width:15px;height:15px;padding:0 3px;
  display:grid;place-items:center;border-radius:var(--radius-full);background:var(--primary);
  color:#fff;font-size:.6rem;font-weight:700;line-height:1}
.m-lead-stage{margin-top:.45rem;width:100%;font:inherit;font-size:.72rem;padding:.25rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--gray);background:#fff}

/* ── Panel lateral del lead (offcanvas) ───────────────────────────────────
   Es un <dialog> pegado al borde derecho, no un div: el navegador ya resuelve
   el foco atrapado, el Escape y el aria-modal. Reimplementarlo a mano sería
   reescribir todo eso y peor — mismo argumento que `.m-modal`. */
/* `display:flex` SOLO con [open]: una clase le gana a la regla del navegador que
   esconde un <dialog> cerrado, y sin esa precaución el panel se dibuja
   incrustado en la esquina de la página desde que carga. */
.m-offcanvas{margin:0 0 0 auto;height:100dvh;max-height:100dvh;width:min(420px,100vw);max-width:100vw;
  flex-direction:column;padding:0;border:0;border-left:1px solid var(--line);
  border-radius:0;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-hover)}
.m-offcanvas[open]{display:flex}
.m-offcanvas:not([open]){display:none}
.m-offcanvas::backdrop{background:rgb(37 0 28 / .35);backdrop-filter:blur(2px)}
.m-offcanvas-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.25rem .9rem;border-bottom:1px solid var(--line)}
.m-offcanvas-kicker{font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--magenta-deep)}
.m-offcanvas-head h2{margin:.15rem 0 0;font-size:1.05rem;font-weight:700;overflow-wrap:anywhere}
.m-offcanvas-tabs{display:flex;gap:2px;padding:0 1.25rem;border-bottom:1px solid var(--line)}
.m-offcanvas-tab{padding:.6rem .9rem;border:0;border-bottom:2px solid transparent;background:none;
  font:inherit;font-size:.83rem;font-weight:600;color:var(--gray-2);cursor:pointer}
.m-offcanvas-tab:hover{color:var(--ink)}
.m-offcanvas-tab.is-active{color:var(--magenta-deep);border-bottom-color:var(--magenta)}
.m-offcanvas-foot{display:flex;gap:.5rem;align-items:flex-end;padding:.9rem 1.25rem 1.1rem;border-top:1px solid var(--line)}
.m-offcanvas-foot textarea{flex:1;font:inherit;font-size:.85rem;padding:.55rem .7rem;resize:vertical;
  border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fff}
.m-offcanvas-foot textarea:focus{outline:none;border-color:var(--magenta);box-shadow:0 0 0 3px rgb(242 0 135 / .12)}

/* La línea de tiempo: comentarios y movimientos mezclados, que es como se lee
   —el comentario suele explicar el movimiento de arriba. */
.m-timeline{flex:1;overflow-y:auto;list-style:none;margin:0;padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.75rem}
.m-timeline-item{padding-left:.85rem;border-left:2px solid var(--line)}
.m-timeline-item.is-stage_change{border-left-color:var(--pink-soft)}
.m-timeline-body{margin:0;font-size:.85rem;line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap}
.m-timeline-meta{display:block;margin-top:.2rem;font-size:.7rem;color:var(--gray)}
.m-timeline-empty{color:var(--gray);font-size:.83rem}

/* ── Configuración de etapas ──────────────────────────────────────────────
   Cada fila es un formulario con su botón de guardar, y las acciones van en
   formularios aparte: los <form> no se pueden anidar. */
.m-stage-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.m-stage-row{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem;border:1px solid var(--line);border-radius:var(--r-md)}
.m-stage-num{flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;border-radius:var(--radius-full);
  background:var(--grad-soft);color:var(--magenta-deep);font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums}
.m-stage-form{flex:1;min-width:0;display:flex;flex-direction:column;gap:.5rem}
.m-stage-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) 170px;gap:.6rem}
.m-stage-label{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.m-stage-label span{font-size:.68rem;font-weight:600;color:var(--gray)}
.m-stage-save{display:flex;align-items:center;justify-content:flex-end;gap:.65rem}
.m-stage-count{font-size:.72rem;color:var(--gray)}
/* Ancho fijo aunque falte una flecha: la primera fila no tiene «subir» y la
   última no tiene «bajar», y sin reservarles el lugar los campos de cada fila
   quedan de distinto ancho y la lista deja de leerse como una tabla. */
.m-stage-actions{flex:0 0 auto;display:flex;justify-content:flex-end;gap:.25rem;min-width:108px}
.m-stage-actions form{margin:0}
.m-stage-help{padding:1.35rem;margin-top:1.25rem}
.m-stage-help h3{margin:0 0 .8rem;font-size:1rem}
.m-stage-help dl{margin:0}
.m-stage-help dl div{padding:.5rem 0;border-bottom:1px solid var(--line)}
.m-stage-help dt{font-size:.82rem;font-weight:600}
.m-stage-help dd{margin:.15rem 0 0;font-size:.8rem;color:var(--gray)}
.m-stage-help p{margin:.9rem 0 0;font-size:.78rem;line-height:1.6}
@media (max-width:820px){
  .m-stage-fields{grid-template-columns:1fr}
  /* El formulario baja a su propio renglón: compartiéndolo con el número y las
     tres acciones le quedaban ~150px, y los campos salían más angostos que el
     texto que contienen. Arriba quedan el número y los botones. */
  .m-stage-row{flex-wrap:wrap}
  .m-stage-form{flex-basis:100%}
  .m-stage-actions{margin-left:auto}
}

/* Botón que es solo un icono: mismo tamaño de toque que un botón normal. */
.m-icon-btn{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--line);
  border-radius:var(--r-sm);background:#fff;color:var(--gray);cursor:pointer;transition:color var(--ease),border-color var(--ease)}
.m-icon-btn:hover:not(:disabled){color:var(--magenta-deep);border-color:var(--pink-soft)}
.m-icon-btn:disabled{opacity:.4;cursor:not-allowed}
.m-icon-btn .icon{width:16px;height:16px}
.m-icon-btn-danger:hover:not(:disabled){color:var(--error);border-color:var(--error)}

/* Etiqueta que solo leen los lectores de pantalla. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Las pestañas de RUBRO del tablero. Van en píldora y no subrayadas como las
   del resumen a propósito: son dos niveles distintos —«qué vista» arriba, «qué
   tema» acá— y con la misma forma se leen como una sola fila partida en dos. */
.m-rubros{display:flex;gap:.35rem;flex-wrap:wrap;margin:0 0 1.1rem;padding:.3rem;
  background:var(--secondary-50);border-radius:var(--r-md)}
.m-rubro{padding:.42rem .85rem;border-radius:calc(var(--r-md) - .25rem);font-size:.85rem;font-weight:500;
  color:var(--gray);text-decoration:none;white-space:nowrap;transition:color var(--ease),background var(--ease)}
.m-rubro:hover{color:var(--mancii-ink)}
.m-rubro.is-active{background:var(--neutral-000);color:var(--magenta-deep);box-shadow:var(--shadow-sm,0 1px 2px rgba(0,0,0,.06))}

/* ── Gráficas del tablero de resultados ──────────────────────────────────────
   Dona + leyenda, dibujadas a mano en SVG: el panel puede permitirse peso, pero
   no una librería remota que además complique el CSP.

   LA RAMPA. Un solo tono —el magenta de marca— en seis pasos de claridad, del
   más oscuro para el gajo mayor al más claro para el menor. No son seis colores
   distintos: las opciones de una pregunta son UNA serie, no varias, y el color
   no tiene identidad que cargar. Los pasos están calculados en OKLCH sobre el
   tono de `#f20087` (h = -2.1°) y VALIDADOS con el verificador de la skill
   `dataviz` contra la tarjeta blanca:

     paso ΔL = .068 (mínimo exigido .06)   → PASA
     extremo claro #fb97ba a 2.05:1        → PASA (piso 2:1)
     tono monótono, dispersión 0°          → PASA

   Bajar el extremo claro un paso más lo hunde por debajo del piso de contraste
   y el gajo chico deja de despegarse del fondo de la tarjeta.

   EL HUECO ES EL SEPARADOR. Entre gajo y gajo va un espacio del color de la
   superficie, no un borde: un trazo alrededor de la marca agrega tinta que no
   es dato. Dos pasos vecinos se leen distintos por el hueco, no por el color. */
:root{
  --viz-1:#991155; --viz-2:#b91768; --viz-3:#da1e7c;
  --viz-4:#fa2d90; --viz-5:#fb6ea5; --viz-6:#fb97ba;
  --viz-otros:#e9dfe6;      /* «Otros» no es una categoría: no gasta paso de rampa */
  --viz-vacio:#f0edf0;      /* la opción que nadie eligió */
}

/* APILADA POR OMISIÓN, lado a lado solo si la tarjeta da el ancho. Medido: la
   tarjeta del panel a tres columnas deja 270px útiles, y el anillo (128) más la
   leyenda cómoda (~200, que es lo que pide «Reconocimiento o prestigio» sin
   partirse) piden 344. Forzarlo al lado parte cada rótulo en tres renglones.
   Apilada, la leyenda se queda con los 270 completos y cada opción entra en una
   línea. La consulta es de CONTENEDOR, no de ventana: lo que decide es el ancho
   de la tarjeta, y la misma tarjeta mide distinto según cuántas columnas haya. */
.m-chart-box{container-type:inline-size}
.m-chart{display:flex;flex-direction:column;align-items:center;gap:.85rem}
@container (min-width: 380px){
  .m-chart{flex-direction:row;align-items:flex-start;gap:1rem}
}
.m-donut{flex:0 0 128px;width:128px;height:128px;position:relative}
.m-donut svg{width:100%;height:100%;display:block;transform:rotate(-90deg)}
.m-donut circle{fill:none;stroke-width:5;transition:stroke-width .15s var(--ease)}
.m-donut circle:hover{stroke-width:6.2}
/* El total va al centro, que es el hueco que el anillo deja libre. */
.m-donut-centro{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.m-donut-total{font-size:1.35rem;font-weight:600;color:var(--ink);line-height:1}
.m-donut-rotulo{font-size:.66rem;color:var(--gray);margin-top:.1rem;letter-spacing:.01em}

/* La leyenda es el canal de identidad: el color acompaña, nunca sustituye al
   rótulo. Por eso el texto va en tinta y nunca en el color del gajo. */
.m-legend{flex:1 1 auto;align-self:stretch;display:grid;gap:.28rem;font-size:.8rem}
.m-legend-fila{display:flex;align-items:center;gap:.45rem;line-height:1.35}
.m-legend-sw{flex:0 0 10px;width:10px;height:10px;border-radius:3px;background:var(--viz-vacio)}
.m-legend-nom{flex:1 1 auto;color:var(--ink);overflow-wrap:anywhere}
.m-legend-val{flex:0 0 auto;font-weight:600;color:var(--ink);white-space:nowrap}
.m-legend-pct{font-weight:400;color:var(--gray)}
.m-legend-fila.is-vacia .m-legend-nom,
.m-legend-fila.is-vacia .m-legend-val{color:var(--gray)}
.m-legend-dentro{font-size:.72rem;color:var(--gray);margin:-.1rem 0 .1rem 1.45rem;line-height:1.4}

@media (max-width:400px){
  .m-chart{gap:.75rem}
  .m-donut{flex-basis:104px;width:104px;height:104px}
}
@media (prefers-reduced-motion:reduce){
  .m-donut circle{transition:none}
}