/* Estilos de la plataforma. Extraídos de index.html por
   reorganizar_por_sistema.py: los comparten todas las aplicaciones. */

  :root {
    /* Azul de los menús "Catálogo": ÚNICA definición; la usan el menú lateral,
       el panel derecho y las tarjetas del home (app.jsx la referencia con var()). */
    --cat-blue: #1d4ed8; --cat-blue-tint: #E7EFFE;
    --bg: #ffffff;
    --bg-2: #f7f8fa;
    --bg-3: #eef0f4;
    --ink: #14171f;
    --ink-2: #4a5160;
    --ink-3: #8089a0;
    --ink-4: #b6becf;
    --line: #e6e8ee;
    --line-2: #d5d9e2;
    --accent: #1e4dbf;
    --accent-bg: #eaefff;
  }
  * { box-sizing: border-box; }
  html, body {
    margin: 0; height: 100%; background: var(--bg); color: var(--ink);
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
  }
  body { font-size: 13px; }

  #root { height: 100%; }

  /* TOPBAR */
  .topbar {
    height: 48px;
    display: flex; align-items: center; gap: 18px;
    padding: 0 18px;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
  }
  .brand {
    display: flex; align-items: center; gap: 10px;
    font-weight: 600; font-size: 14px; color: var(--ink);
    letter-spacing: -0.005em;
  }
  .brand .mark {
    width: 20px; height: 20px; background: var(--ink);
    display: grid; place-items: center; color: white; font-size: 12px; font-weight: 700;
    border-radius: 3px;
  }
  .crumb {
    font-size: 12.5px; color: var(--ink-3);
    display: flex; align-items: center; gap: 8px;
  }
  .crumb b { color: var(--ink); font-weight: 500; }
  .topbar .right { margin-left: auto; display: flex; gap: 8px; }
  .topbar .right .btn {
    height: 28px; padding: 0 12px;
    border: 1px solid var(--line-2); background: var(--bg);
    color: var(--ink-2); font-size: 12px; font-weight: 500;
    border-radius: 4px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .topbar .right .btn:hover { background: var(--bg-2); }
  .sc-dispatch-card:hover { border-color: #2f57c8 !important; box-shadow: 0 3px 12px -5px rgba(47,87,200,.4); transform: translateY(-1px); }
  .sc-dispatch-card:focus-visible { outline: 2px solid #2f57c8; outline-offset: 2px; }

  /* LAYOUT */
  .shell { display: grid; grid-template-columns: 280px 1fr; height: calc(100% - 48px); }
  .shell.sidebar-collapsed { grid-template-columns: 0 1fr; }
  /* No usamos display:none porque eso saca al sidebar del grid y CSS reubica
     main en la columna 1 (0px), dejando la pantalla en blanco. En su lugar
     dejamos el sidebar como ítem 1 con ancho 0 y clipeamos su contenido. */
  .shell.sidebar-collapsed > .sidebar {
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
  }

  /* SIDEBAR */
  .sidebar {
    background: var(--bg-2);
    border-right: 1px solid var(--line);
    overflow-y: auto;
    padding: 8px 0 40px 0;
  }
  .search {
    position: sticky; top: 0; z-index: 2;
    padding: 10px 14px 12px 14px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
  }
  .search input {
    width: 100%; height: 30px; border: 1px solid var(--line-2);
    background: var(--bg); color: var(--ink);
    padding: 0 10px 0 30px;
    font: inherit; font-size: 12.5px;
    border-radius: 5px;
    outline: none;
  }
  .search input:focus { border-color: var(--accent); }
  .search .icn {
    position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
    color: var(--ink-3); pointer-events: none;
  }
  .search { position: sticky; }
  .search-wrap { position: relative; }

  .tree { padding: 6px 8px; }

  /* L1 — module */
  .l1 {
    margin-top: 8px;
    border-radius: 6px;
    overflow: hidden;
  }
  .l1:first-child { margin-top: 4px; }
  .l1-head {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
    user-select: none;
    color: var(--ink);
  }
  .l1-head:hover { background: var(--bg-3); border-radius: 6px; }
  .l1-head .chev {
    width: 12px; height: 12px; color: var(--ink-3);
    transition: transform .12s; flex-shrink: 0;
  }
  .l1-head .chev.collapsed { transform: rotate(-90deg); }
  .l1-head .title {
    flex: 1;
    /* Título de menú: negrita y un punto más grande que el resto del árbol. */
    font-size: 15px; font-weight: 800; letter-spacing: -0.005em;
    color: var(--ink);
    text-transform: none;
  }
  .l1-head .count {
    font-size: 12px; color: var(--ink-3); font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  .l1-body { padding: 2px 0 6px 8px; }

  /* Tree subsection label between L1 and L2 */
  .l-sub {
    font-size: 12px; font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 8px 8px 4px 8px;
    margin-top: 2px;
  }
  .l1-body > .l-sub:first-child { margin-top: 0; padding-top: 4px; }

  /* L2 — group */
  .l2 { margin: 2px 0; }
  .l2-head {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 10px 5px 8px;
    border-radius: 5px;
    cursor: pointer;
    color: var(--ink-2);
  }
  .l2-head:hover { background: var(--bg-3); color: var(--ink); }
  .l2-head.active { background: var(--accent-bg); color: var(--accent); }
  .l2-head .chev {
    width: 10px; height: 10px; color: var(--ink-3);
    transition: transform .12s; flex-shrink: 0;
  }
  .l2-head .chev.collapsed { transform: rotate(-90deg); }
  .l2-head .chev.leaf { visibility: hidden; }
  .l2-head .title {
    flex: 1;
    font-size: 12.5px; font-weight: 500;
  }
  .l2-head.active .title { color: var(--accent); }

  /* L3 — leaf */
  .l3 {
    padding-left: 20px; position: relative;
  }
  .l3::before {
    content: ""; position: absolute; left: 8px; top: 2px; bottom: 6px;
    width: 1px; background: var(--line-2);
  }
  .l3-row {
    display: flex; align-items: center; gap: 7px;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--ink-2);
    /* Ítem de menú: 13.5px. A 12px la lista quedaba dura de leer al lado de un
       título de 15px; con este cuerpo el salto título → ítem sigue siendo claro. */
    font-size: 13.5px;
    position: relative;
  }
  .l3-row:hover { background: var(--bg-3); color: var(--ink); }
  .l3-row.active {
    background: var(--accent-bg); color: var(--accent); font-weight: 500;
  }
  .l3-row::before {
    content: ""; position: absolute; left: -12px; top: 50%;
    width: 10px; height: 1px; background: var(--line-2);
  }
  .l3-row .lico {
    color: currentColor; opacity: 0.75; flex-shrink: 0;
  }
  .l3-row .lbl {
    flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* MAIN */
  .main {
    overflow: auto;
    background: var(--bg);
    padding: 12px 14px 14px 14px;
  }
  .main-grid {
    display: grid;
    grid-template-columns: 1fr 1.7fr;
    gap: 10px;
    align-items: start;
  }
  .col { display: flex; flex-direction: column; gap: 10px; }

  .section {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
  }

  .sec-head {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
  }
  /* Menús de tipo "Catálogo": título e ítems en azul, para distinguirlos de los
     menús operativos de un vistazo. La clase la pone app.jsx cuando el título del
     módulo contiene "Catálogo". */
  .section.es-catalogo .sec-title,
  .section.es-catalogo .sub-label,
  .section.es-catalogo .cat-name { color: var(--cat-blue); }
  /* En el árbol lateral TODOS los títulos van en negro (--ink): el azul de
     "Catálogos" desaparece del menú. Se declara explícito para pisar cualquier
     regla anterior de .es-catalogo. */
  .l1.es-catalogo .title,
  .l1.es-catalogo .l-sub,
  .l1.es-catalogo .l2,
  .l1.es-catalogo .l2 .lbl { color: var(--ink); }
  .l1.es-catalogo .count { color: var(--ink-3); }

  .sec-title {
    /* Mismo tratamiento que el título en la barra lateral. */
    font-size: 16px; font-weight: 800; color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.15;
  }
  .sec-meta {
    font-size: 12px; color: var(--ink-3); font-weight: 500;
    margin-left: auto;
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .sec-body { padding: 10px 10px 12px 10px; }

  /* Right-pane subsection block (e.g. Gestión Contable / Comercial) */
  .sub-block + .sub-block { margin-top: 12px; }
  .sub-label {
    font-size: 12px; font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 6px 2px;
  }

  /* RIGHT — overview grid of CATEGORIES (no leaf apps) */
  .cats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 6px;
  }
  .cats.grid-1, .cats.grid-3, .cats.grid-4 {
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  }

  .cat {
    display: flex; flex-direction: column; align-items: center;
    gap: 6px;
    padding: 10px 6px 8px 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s;
    text-align: center;
    background: var(--bg);
    height: 92px;
    justify-content: center;
  }
  .cat:hover {
    background: var(--bg-2);
    border-color: var(--ink-3);
    transform: translateY(-1px);
  }
  .cat.active {
    background: var(--accent-bg);
    border-color: var(--accent);
  }
  .cat.active .cat-icon { color: var(--accent); }
  .cat.active .cat-label { color: var(--accent); }

  .cat-icon {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    color: var(--ink);
    transition: color .15s;
  }
  .cat-icon svg { width: 30px; height: 30px; }
  .cat-label {
    font-size: 12px; font-weight: 500; color: var(--ink);
    line-height: 1.2;
    letter-spacing: -0.005em;
    max-width: 100%;
  }

  /* ── HOME OVERVIEW (rediseño): título de menú → ítems, con color por módulo
       e ícono Lucide por ítem. Todo se arma solo desde MODULES (data.jsx). ── */
  .homeboard { display: flex; flex-direction: column; gap: 22px; padding: 4px 4px 24px; }
  .hb-mod { --c: var(--accent); --tint: var(--accent-bg); }
  .hb-head { display: flex; align-items: center; gap: 10px; margin: 0 2px 11px; }
  .hb-head .sq {
    width: 11px; height: 11px; border-radius: 4px; background: var(--c);
    box-shadow: 0 0 0 4px var(--tint); flex: none;
  }
  .hb-head h2 {
    margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.03em;
    text-transform: uppercase; color: var(--ink);
  }
  .hb-head .n {
    margin-left: auto; font-size: 11px; font-weight: 600; color: var(--ink-3);
    font-variant-numeric: tabular-nums; background: var(--bg-2);
    border: 1px solid var(--line); border-radius: 20px; padding: 2px 9px;
  }
  .hb-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 10px;
  }
  .hb-card {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
    padding: 12px 13px; min-height: 66px; cursor: pointer;
    box-shadow: 0 1px 2px rgba(20, 23, 31, 0.04);
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  }
  .hb-card:hover {
    transform: translateY(-2px); border-color: var(--c);
    box-shadow: 0 12px 22px -14px var(--c);
  }
  .hb-card.active { border-color: var(--c); background: var(--tint); }
  .hb-chip {
    width: 40px; height: 40px; border-radius: 10px; flex: none;
    background: var(--tint); color: var(--c); display: grid; place-items: center;
  }
  .hb-chip svg { width: 21px; height: 21px; display: block; }
  .hb-card b {
    font-size: 12.5px; font-weight: 600; color: var(--ink);
    line-height: 1.25; letter-spacing: -0.01em;
  }

  /* ────────────── Portada: una caja por sistema ──────────────
     El nombre manda (grande); la ficha va en cuerpo mucho menor. */
  .sb-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px;
  }
  .sb-card {
    --c: var(--accent); --tint: var(--accent-bg);
    display: flex; flex-direction: column; gap: 9px;
    background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
    padding: 16px 16px 15px; cursor: pointer; text-decoration: none;
    box-shadow: 0 1px 2px rgba(20, 23, 31, 0.04);
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  }
  .sb-card:hover {
    transform: translateY(-2px); border-color: var(--c);
    box-shadow: 0 14px 26px -16px var(--c);
  }
  .sb-card.active { border-color: var(--c); box-shadow: inset 0 0 0 1px var(--c); }
  .sb-top { display: flex; align-items: center; gap: 10px; }
  .sb-logo {
    width: 46px; height: 46px; border-radius: 12px; flex: none; overflow: hidden;
    background: var(--tint); display: grid; place-items: center;
  }
  .sb-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .sb-inicial { font-size: 20px; font-weight: 700; color: var(--c); }
  .sb-cuenta {
    margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--ink-3);
    font-variant-numeric: tabular-nums; background: var(--bg-2);
    border: 1px solid var(--line); border-radius: 20px; padding: 2px 9px;
    white-space: nowrap;
  }
  /* El nombre: el elemento grande de la caja. */
  .sb-nombre {
    margin: 0; font-size: 19px; font-weight: 700; line-height: 1.2;
    letter-spacing: -0.02em; color: var(--ink);
  }
  /* Y el resto de la ficha, deliberadamente mucho más chico. */
  .sb-ficha { margin: 0; display: flex; flex-direction: column; gap: 4px; }
  .sb-desc {
    margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--ink-3);
  }
  .sb-par { display: flex; gap: 5px; align-items: baseline; font-size: 10.5px; line-height: 1.4; }
  .sb-par dt {
    font-weight: 700; color: var(--ink-4); text-transform: uppercase;
    letter-spacing: 0.04em; white-space: nowrap;
  }
  .sb-par dd { margin: 0; color: var(--ink-3); }
  .sb-pendiente {
    margin: 0; font-size: 10.5px; font-style: italic; color: var(--ink-4);
  }
  .sb-vacio {
    padding: 26px; text-align: center; font-size: 13px; color: var(--ink-3);
    background: var(--bg); border: 1px dashed var(--line-2); border-radius: 12px;
  }

  /* Menú lateral: sin sistema elegido, y filas cuya ventana no existe todavía. */
  .tree-empty {
    padding: 16px 12px; font-size: 12px; line-height: 1.5; color: var(--ink-4);
  }
  .l3-row.disabled {
    cursor: default; color: var(--ink-4); opacity: 0.55;
  }
  .l3-row.disabled:hover { background: transparent; color: var(--ink-4); }

  /* Migas: "Menú principal" vuelve a la portada de sistemas. */
  .crumb-link { cursor: pointer; color: var(--accent); font-weight: 600; }
  .crumb-link:hover { text-decoration: underline; }
  .crumb-sep { margin: 0 6px; color: var(--ink-4); }
  .crumb-actual { font-weight: 600; color: var(--ink); }

  /* scrollbars */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }
  ::-webkit-scrollbar-track { background: transparent; }

  /* ────────────── Detail view (level-4) ────────────── */
  .detail {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    display: flex; flex-direction: column;
    height: 100%;
  }
  .detail-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
  }
  .detail-back {
    height: 30px; padding: 0 12px 0 8px;
    background: var(--bg); border: 1px solid var(--line-2);
    border-radius: 6px;
    color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 500;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .detail-back:hover { color: var(--ink); border-color: var(--ink-3); background: white; }
  .detail-crumb {
    font-size: 12px; color: var(--ink-3);
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
  }
  .detail-crumb b { color: var(--ink); font-weight: 600; }
  .detail-crumb .sep { color: var(--ink-4); }
  .detail-meta {
    font-size: 12px; color: var(--ink-3); font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .detail-hero {
    display: flex; align-items: center; gap: 18px;
    padding: 22px 24px;
    border-bottom: 1px solid var(--line);
  }
  .detail-hero .hero-icon {
    width: 60px; height: 60px;
    display: grid; place-items: center;
    color: var(--ink);
    flex-shrink: 0;
  }
  .detail-hero .hero-icon svg { width: 56px; height: 56px; }
  .detail-hero .hero-text {
    flex: 1;
  }
  .detail-hero h1 {
    font-size: 22px; font-weight: 700; color: var(--ink);
    letter-spacing: -0.015em; margin: 0 0 4px 0;
    line-height: 1.1;
  }
  .detail-hero .hero-sub {
    font-size: 12.5px; color: var(--ink-2);
    line-height: 1.4;
  }
  .detail-hero .hero-count {
    font-size: 12px; color: var(--ink-3); font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.08em;
    text-align: right;
    align-self: flex-start;
    padding-top: 6px;
    flex-shrink: 0;
  }
  .detail-hero .hero-count b {
    display: block;
    font-size: 28px; font-weight: 700; color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 4px;
  }

  .detail-body {
    flex: 1;
    overflow: auto;
    padding: 18px 18px 22px 18px;
  }
  .detail-subtitle {
    font-size: 12px; font-weight: 600; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin: 0 0 12px 4px;
  }
  .leaf {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    cursor: pointer;
    transition: all .15s;
  }
  .leaf:hover {
    border-color: var(--ink-3);
    background: var(--bg-2);
    transform: translateY(-1px);
  }
  .leaf-num {
    width: 24px; height: 24px;
    display: grid; place-items: center;
    background: var(--bg-3); color: var(--ink-2);
    font-size: 12px; font-weight: 700;
    border-radius: 5px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }
  .leaf:hover .leaf-num {
    background: var(--accent); color: white;
  }
  .leaf-icon {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    color: var(--ink);
    flex-shrink: 0;
  }
  .leaf:hover .leaf-icon { color: var(--accent); }
  .leaf-icon svg { width: 40px; height: 40px; }
  .leaf-label {
    font-size: 13px; font-weight: 500; color: var(--ink);
    line-height: 1.3;
    letter-spacing: -0.005em;
    flex: 1;
  }
  .leaf-arrow {
    color: var(--ink-4);
    flex-shrink: 0;
  }
  .leaf:hover .leaf-arrow { color: var(--accent); }

  .detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
  }

  /* ────────────── Group frame (Proyectos de negocio) ────────────── */
  .frame-control {
    display: flex; flex-direction: column; gap: 6px;
    margin: 0 0 22px 0;
    max-width: 460px;
  }
  .frame-label {
    font-size: 12px; font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .frame-select-wrap {
    position: relative;
  }
  .frame-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 38px;
    padding: 0 36px 0 14px;
    border: 1px solid var(--line-2);
    background: var(--bg);
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
  }
  .frame-select:hover { border-color: var(--ink-3); }
  .frame-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
  .frame-select-chev {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    color: var(--ink-3);
    pointer-events: none;
  }

  .proj-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .proj-box {
    position: relative;
    display: flex; flex-direction: column;
    gap: 10px;
    padding: 18px 18px 16px 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg);
    cursor: pointer;
    transition: all .15s;
    min-height: 168px;
  }
  .proj-box:hover {
    border-color: var(--accent);
    background: var(--bg-2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px -4px rgba(20, 23, 31, 0.08);
  }
  .proj-box .proj-num {
    position: absolute;
    top: 14px; right: 14px;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    background: var(--bg-3); color: var(--ink-2);
    font-size: 12px; font-weight: 700;
    border-radius: 5px;
    font-variant-numeric: tabular-nums;
  }
  .proj-box:hover .proj-num { background: var(--accent); color: white; }
  .proj-box .proj-icon {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    color: var(--ink);
    margin-bottom: 6px;
  }
  .proj-box:hover .proj-icon { color: var(--accent); }
  .proj-box .proj-icon svg { width: 44px; height: 44px; }
  .proj-box .proj-title {
    font-size: 15px; font-weight: 700; color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.2;
  }
  .proj-box .proj-meta {
    margin-top: auto;
    display: flex; align-items: center; gap: 6px;
  }
  .proj-tag {
    display: inline-flex; align-items: center;
    padding: 4px 8px;
    background: var(--accent-bg);
    color: var(--accent);
    font-size: 12px; font-weight: 600;
    border-radius: 4px;
    letter-spacing: -0.005em;
  }
  .proj-tag.muted {
    background: var(--bg-3);
    color: var(--ink-3);
    font-weight: 500;
  }
  .proj-box .proj-arrow {
    position: absolute;
    bottom: 18px; right: 16px;
    color: var(--ink-4);
  }
  .proj-box:hover .proj-arrow { color: var(--accent); }

  @media (max-width: 1100px) {
    .proj-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 720px) {
    .proj-grid { grid-template-columns: 1fr; }
  }

  /* ────────────── CRUD — Tipos Monetización ────────────── */
  .crud-toolbar {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px;
  }
  .crud-search {
    position: relative;
    flex: 1; max-width: 360px;
    display: flex; align-items: center;
  }
  .crud-search svg {
    position: absolute;
    left: 10px; top: 50%;
    transform: translateY(-50%);
    color: var(--ink-3);
  }
  .crud-search input {
    width: 100%;
    height: 34px;
    padding: 0 10px 0 30px;
    border: 1px solid var(--line-2);
    background: var(--bg);
    border-radius: 6px;
    font: inherit;
    font-size: 13px;
    color: var(--ink);
    outline: none;
  }
  .crud-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }

  .crud-stats {
    display: flex; align-items: center; gap: 6px;
    margin-right: auto;
  }
  .crud-stats .chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 9px;
    font-size: 12px; font-weight: 600;
    border-radius: 4px;
    letter-spacing: -0.005em;
    border: 1px solid var(--line);
    background: var(--bg);
  }
  .crud-stats .chip .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ink-4);
  }
  .crud-stats .chip-on { color: #0d6e3f; border-color: #b7e2c8; background: #ebf7f0; }
  .crud-stats .chip-on .dot { background: #1f9d59; }
  .crud-stats .chip-off { color: var(--ink-3); }
  .crud-stats .chip-off .dot { background: var(--ink-4); }

  /* Los cuatro botones de alta de la ventana de oportunidad — «+ estado»,
     «+ propuesta», «+ monetización» y «+ archivo» — son la misma pieza: mismo
     ancho y rótulo centrado, para que se lean como una familia y no como cuatro
     botones de tamaños distintos repartidos por la ventana. El ancho lo fija el
     rótulo más largo. */
  /* Los botones de acción de un drawer miden TODOS lo mismo. `min-width` sólo
     ponía un piso, así que cada uno terminaba del ancho de su texto y la columna
     de botones quedaba en zigzag. El ancho fijo lo da el rótulo más largo
     («+ copiar existente»); centrado, los cortos no se ven vacíos. */
  /* Ancho fijo para que TODOS los botones de acción midan lo mismo y queden en
     una vertical. 135 px = los 150 de antes menos un 10%: el rótulo más largo
     («+ copiar existente») sigue entrando en una línea. */
  .btn-accion { width: 135px; min-width: 135px; justify-content: center; }
  /* «+ monetización» cierra la barra pegado al borde, sobre la columna de acciones
     de la grilla; el hueco que deja a su izquierda es el que alinea el monto con
     «Valor neto». */
  /* «+ monetización» ya no necesita su ancho propio: lo da .btn-accion, igual que
     a todos los demás. */

  /* Dentro del drawer los botones van más chicos: son muchos y ninguno es la
     acción principal de la pantalla — la pantalla es la grilla. Se acota al
     drawer para no encoger los botones del resto de la aplicación. */
  .drawer .btn-primary,
  .drawer .btn,
  .drawer .btn-ghost-sm {
    height: 27px;
    padding: 0 10px;
    font-size: 11.5px;
  }
  .drawer .btn-primary svg { width: 10px; height: 10px; }

  .btn-primary {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px;
    padding: 0 14px;
    background: var(--ink);
    color: var(--bg);
    border: 1px solid var(--ink);
    border-radius: 6px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: -0.005em;
    transition: opacity .12s;
  }
  .btn-primary:hover:not(:disabled) { opacity: 0.88; }
  .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

  .crud-grid {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    overflow: hidden;
  }
  .crud-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }
  .crud-table thead th {
    background: var(--bg-2);
    text-align: left;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--line);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    text-transform: none;
    letter-spacing: 0;
  }
  .crud-table thead th.col-actions { text-align: right; font-family: inherit; }
  /* El color se declara en la FILA y la celda lo hereda. Estaba al revés —cada
     td fijaba `color: var(--ink)`— y eso le ganaba al color heredado del <tr>:
     las ventanas de asignación pintan en gris al usuario que YA está asignado
     poniendo el color en la fila, y ese gris no se veía NUNCA. Una regla de
     elemento siempre le gana a lo heredado, por baja que sea su especificidad. */
  /* Asa para cambiar el ancho de una columna. Invisible hasta que el mouse se
     acerca: una barra permanente entre cada par de columnas ensucia la pantalla. */
  .col-asa { background: transparent; transition: background .12s; }
  .col-asa:hover, .col-asa:active { background: var(--accent); opacity: 0.35; }

  .crud-table tbody tr { color: var(--ink); }
  /* Alto de fila: 11px arriba y abajo daban ~44px por fila, y en una grilla de
     catálogo eso es aire — se ven ocho filas donde caben doce. Con 6px la fila
     baja a ~34px y el texto sigue respirando; el `line-height` acota lo que
     aporta la tipografía, que es la otra mitad del alto.
     La variante `.compact` (~26px) no cambia: es para las columnas de reparto,
     donde importa cuántas filas entran y no el respiro. */
  .crud-table tbody td {
    padding: 6px 14px;
    line-height: 1.35;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    color: inherit;
  }
  .crud-table tbody tr:last-child td { border-bottom: none; }
  .crud-table tbody tr:hover { background: var(--bg-2); }
  .crud-table .cell-strong { font-weight: 600; }
  .crud-table .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: var(--ink-2); }
  .crud-table .row-inactive td:not(.col-actions) { opacity: 0.5; }
  .crud-table .row-edit { background: var(--accent-bg) !important; }
  .crud-table .row-edit:hover { background: var(--accent-bg) !important; }
  .crud-table .col-actions { text-align: right; white-space: nowrap; }
  .crud-table .empty {
    padding: 32px;
    text-align: center;
    color: var(--ink-3);
    font-style: italic;
  }

  /* Grilla densa — mismo diseño, menos aire. Para las ventanas de asociación,
     donde lo que importa es cuántas filas se ven de una vez y no el respiro
     entre ellas: la fila baja de ~50px a ~26px, así entra el triple. */
  .crud-table.compact thead th { padding: 5px 10px; font-size: 11px; }
  .crud-table.compact tbody td { padding: 4px 10px; line-height: 1.3; font-size: 12.5px; }
  .crud-table.compact tbody td.col-actions { padding: 2px 8px; }
  .crud-table.compact .mono { font-size: 11.5px; }
  .crud-table.compact .crud-input { height: 24px; }
  /* Celda de una sola línea: recorta con puntos suspensivos en vez de crecer a
     dos renglones (el texto completo queda en el title). */
  .crud-table.compact td.una-linea,
  .crud-table.compact th.una-linea { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Acción con rótulo dentro de una grilla. `.icon-btn` mide 28x28 fijos: una
     palabra dentro se sale de la caja y la grilla la recorta. */
  .cell-btn {
    height: 22px; padding: 0 9px;
    display: inline-flex; align-items: center;
    background: var(--bg); border: 1px solid var(--line-2); border-radius: 5px;
    color: var(--ink-2); font-family: inherit; font-size: 11.5px; font-weight: 600;
    cursor: pointer; white-space: nowrap; transition: all .12s;
  }
  .cell-btn:hover:not(:disabled) { background: var(--bg-3); border-color: var(--ink-3); color: var(--ink); }
  .cell-btn:disabled { opacity: .45; cursor: default; }
  .cell-btn.danger:hover:not(:disabled) { background: #fef0ef; border-color: #f5c2bd; color: #c0392b; }

  .crud-input {
    width: 100%;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--line-2);
    background: var(--bg);
    border-radius: 5px;
    font: inherit;
    font-size: 13px;
    color: var(--ink);
    outline: none;
  }
  .crud-input.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; }
  .crud-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }

  /* ── Campo de fecha (window.SCFecha.Input) ─────────────────────────────
     Toda fecha de la aplicación se escribe y se lee en YYYY-MM-DD. El
     <input type="date"> del navegador no sirve para eso: dibuja el formato de
     su propio idioma (dd/mm/aaaa) y no hay forma de pedirle otro. Así que la
     fecha se teclea en una caja de texto y el date nativo queda escondido
     detrás del botón del calendario, que es lo único que se le sigue pidiendo.
     La caja hereda el ancho de quien la contiene: los llamadores le pasan su
     class/style igual que antes. */
  .fecha-iso { position: relative; display: inline-flex; width: 100%; min-width: 0; }
  /* El hueco para el botón del calendario lo pone el componente (padding-right
     en línea), porque varios llamadores traen su propio padding y ganarían. */
  .fecha-iso .fecha-iso-txt {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
  }
  /* El calendario es del DOM y no del navegador. El de antes se abría con
     showPicker() sobre un <input type="date"> escondido y NO se cerraba al
     elegir el día: quedaba flotando y la página no tenía manera de bajarlo (un
     popup del navegador no es un nodo del documento). Éste vive en un portal a
     <body> con position:fixed —así no lo recorta el overflow de ningún drawer— y
     lo cierra el componente: al elegir, con Escape, con un clic afuera o al
     hacer scroll. */
  .fecha-iso-pop {
    position: fixed; z-index: 90; width: 218px; padding: 8px;
    background: var(--bg); border: 1px solid var(--line-2); border-radius: 6px;
    box-shadow: 0 6px 24px rgba(17, 24, 39, .14);
    font: inherit; color: var(--ink);
  }
  .fecha-iso-pop-cab { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; }
  .fecha-iso-pop-mes { flex: 1; font-size: 12.5px; font-weight: 700; }
  .fecha-iso-pop-cab button {
    width: 20px; height: 20px; padding: 0; border: none; background: none;
    color: var(--ink-3); cursor: pointer; border-radius: 4px;
    font: inherit; font-size: 13px; line-height: 1;
  }
  .fecha-iso-pop-cab button:hover { background: var(--bg-2); color: var(--accent); }
  .fecha-iso-pop-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
  .fecha-iso-pop-dia { font-size: 10.5px; color: var(--ink-4); text-align: center; padding-bottom: 2px; }
  .fecha-iso-pop-num {
    height: 24px; padding: 0; border: none; background: none; cursor: pointer;
    border-radius: 4px; color: var(--ink);
    font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px;
  }
  .fecha-iso-pop-num:hover:not(:disabled) { background: var(--bg-2); }
  .fecha-iso-pop-num.hoy { box-shadow: inset 0 0 0 1px var(--ink-4); }
  .fecha-iso-pop-num.sel { background: var(--accent); color: #fff; font-weight: 700; }
  .fecha-iso-pop-num:disabled { color: var(--ink-4); cursor: default; }
  .fecha-iso-cal {
    position: absolute; right: 1px; top: 1px; bottom: 1px;
    width: 24px; display: inline-flex; align-items: center; justify-content: center;
    border: none; background: none; padding: 0;
    color: var(--ink-3); cursor: pointer; border-radius: 0 5px 5px 0;
  }
  .fecha-iso-cal:hover { color: var(--accent); background: var(--bg-2); }
  .fecha-iso-cal:disabled { cursor: default; color: var(--ink-4); background: none; }
  .fecha-iso.disabled .fecha-iso-txt { background: var(--bg-2); color: var(--ink-3); }

  /* toggle switch */
  .toggle {
    width: 32px; height: 18px;
    border-radius: 999px;
    background: var(--ink-4);
    border: none;
    position: relative;
    cursor: pointer;
    padding: 0;
    transition: background .15s;
    flex-shrink: 0;
  }
  .toggle .knob {
    position: absolute;
    top: 2px; left: 2px;
    width: 14px; height: 14px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transition: transform .15s;
  }
  .toggle.on { background: #1f9d59; }
  .toggle.on .knob { transform: translateX(14px); }
  .toggle:disabled { opacity: 0.5; cursor: not-allowed; }

  .icon-btn {
    width: 28px; height: 28px;
    display: inline-grid; place-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--ink-2);
    cursor: pointer;
    margin-left: 2px;
    transition: all .12s;
  }
  .icon-btn:hover:not(:disabled) {
    background: var(--bg-3);
    border-color: var(--line-2);
    color: var(--ink);
  }
  .icon-btn.danger:hover:not(:disabled) {
    background: #fef0ef;
    border-color: #f5c2bd;
    color: #c0392b;
  }
  .icon-btn.primary {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
  }
  .icon-btn.primary:hover:not(:disabled) { opacity: 0.88; }
  .icon-btn:disabled { opacity: 0.3; cursor: not-allowed; }

  /* modal */
  .modal-veil {
    position: fixed; inset: 0;
    background: rgba(20, 23, 31, 0.4);
    display: grid; place-items: center;
    z-index: 100;
    animation: fadeIn .12s ease-out;
  }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  .modal {
    background: var(--bg);
    border-radius: 10px;
    padding: 22px 24px;
    max-width: 420px;
    box-shadow: 0 20px 60px -10px rgba(0,0,0,0.3);
    animation: pop .15s ease-out;
  }
  @keyframes pop {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }
  .modal-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
  .modal-body { font-size: 13px; color: var(--ink-2); margin-bottom: 18px; line-height: 1.5; }
  .modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
  .btn {
    height: 32px; padding: 0 14px;
    border: 1px solid var(--line-2); background: var(--bg); color: var(--ink);
    border-radius: 6px; font: inherit; font-size: 13px;
    cursor: pointer; white-space: nowrap;
  }
  .btn:hover { background: var(--bg-2); }
  .btn:disabled { opacity: 0.45; cursor: default; }

  .modal-actions .btn {
    height: 32px; padding: 0 14px;
    border: 1px solid var(--line-2); background: var(--bg);
    border-radius: 6px; font: inherit; font-size: 13px;
    cursor: pointer;
  }
  .modal-actions .btn:hover { background: var(--bg-2); }
  .btn-danger {
    height: 32px; padding: 0 14px;
    background: #c0392b; color: white;
    border: 1px solid #c0392b;
    border-radius: 6px; font: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer;
  }
  .btn-danger:hover { background: #a5311f; }

  /* area pill — shows which area a project belongs to */
  .area-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 8px 3px 3px;
    background: var(--accent-bg);
    color: var(--accent);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    max-width: 100%;
  }
  .area-pill-id {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 6px;
    background: var(--accent);
    color: white;
    border-radius: 3px;
    letter-spacing: 0.02em;
  }
  .area-pill-locked {
    background: var(--bg-3);
    color: var(--ink-2);
  }
  .area-pill-locked .area-pill-id {
    background: var(--ink-3);
  }

  /* channel tag in inventory grid */
  .channel-tag {
    display: inline-flex; align-items: center;
    gap: 6px;
    padding: 3px 8px 3px 3px;
    background: var(--bg-3);
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    letter-spacing: -0.005em;
  }
  .channel-tag-id {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 5px;
    background: var(--ink-3);
    color: white;
    border-radius: 3px;
    letter-spacing: 0.02em;
  }

  /* inventory association panel */
  .inv-panel {
    margin-top: 22px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-2);
    padding: 18px;
  }
  .inv-panel-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    align-items: center;
    margin-bottom: 14px;
  }
  .inv-panel-title {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .inv-panel-sub {
    grid-column: 1;
    font-size: 12px;
    color: var(--ink-3);
  }
  .inv-panel-meta {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: start;
  }
  .inv-panel-search {
    position: relative;
    margin-bottom: 12px;
    max-width: 360px;
  }
  .inv-panel-search svg {
    position: absolute;
    left: 10px; top: 50%;
    transform: translateY(-50%);
    color: var(--ink-3);
  }
  .inv-panel-search input {
    width: 100%;
    height: 32px;
    padding: 0 10px 0 30px;
    border: 1px solid var(--line-2);
    background: var(--bg);
    border-radius: 6px;
    font: inherit;
    font-size: 13px;
    color: var(--ink);
    outline: none;
  }
  .inv-panel-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }

  .crud-table .row-checked { background: rgba(31, 157, 89, 0.06); }
  .crud-table .row-checked:hover { background: rgba(31, 157, 89, 0.10); }

  /* custom checkbox */
  .inv-check {
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer;
    user-select: none;
  }
  .inv-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .inv-check-box {
    width: 18px; height: 18px;
    border: 1.5px solid var(--line-2);
    border-radius: 4px;
    background: var(--bg);
    display: grid; place-items: center;
    transition: all .12s;
  }
  .inv-check input:checked + .inv-check-box {
    background: #1f9d59;
    border-color: #1f9d59;
  }
  .inv-check-label {
    font-size: 12px;
    color: var(--ink-2);
    font-weight: 500;
    min-width: 64px;
    text-align: left;
  }
  .inv-check input:checked ~ .inv-check-label {
    color: #0d6e3f;
    font-weight: 600;
  }
  .inv-check:hover .inv-check-box {
    border-color: var(--accent);
  }
  .inv-check input:checked:hover + .inv-check-box {
    background: #1a8a4d;
  }

  /* master-detail sections (Productos / Formato) */
  .md-section {
    margin-top: 22px;
  }
  .md-section:first-of-type { margin-top: 0; }
  .md-section-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }
  .md-section-title {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 16px; font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .md-section-num {
    display: inline-grid; place-items: center;
    width: 22px; height: 22px;
    background: var(--ink); color: var(--bg);
    border-radius: 4px;
    font-size: 12px; font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .md-section-context {
    margin-left: 6px;
    font-weight: 400;
    color: var(--ink-3);
    font-size: 14px;
  }
  .md-section-context b { color: var(--ink); font-weight: 600; }
  .md-section-sub {
    font-size: 12px;
    color: var(--ink-3);
    margin-left: auto;
  }
  .md-detail-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    background: var(--bg-2);
    border: 1px dashed var(--line-2);
    border-radius: 8px;
    color: var(--ink-3);
    font-size: 13px;
  }

  /* selectable row in master grid */
  .crud-table .row-selectable { cursor: pointer; }
  .crud-table .row-selected {
    background: rgba(31, 157, 89, 0.06);
  }
  .crud-table .row-selected:hover {
    background: rgba(31, 157, 89, 0.10);
  }
  .crud-table .row-selected td:first-child {
    box-shadow: inset 3px 0 0 var(--accent);
  }

  /* btn-inv — small "inventario" action button on project rows */
  .btn-inv {
    display: inline-flex; align-items: center; gap: 5px;
    height: 26px;
    padding: 0 9px 0 8px;
    background: var(--bg);
    border: 1px solid var(--line-2);
    border-radius: 5px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
    margin-right: 4px;
    letter-spacing: -0.005em;
    transition: all .12s;
    white-space: nowrap;
  }
  .btn-inv:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-bg);
  }
  .btn-inv:disabled { opacity: 0.4; cursor: not-allowed; }
  .btn-inv-badge {
    display: inline-grid; place-items: center;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    background: var(--accent);
    color: white;
    border-radius: 8px;
    font-size: 12px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-left: 2px;
  }

  /* wide modal for inventory picker */
  .modal-wide {
    width: 760px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 64px);
    padding: 0;
    display: flex; flex-direction: column;
  }
  .modal-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--line);
  }
  .modal-eyebrow {
    font-size: 12px; font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
  }
  .modal-head .modal-title {
    font-size: 18px; font-weight: 700; margin: 0;
    letter-spacing: -0.01em;
  }
  .modal-sub {
    margin-top: 6px;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px;
    color: var(--ink-3);
    flex-wrap: wrap;
  }
  .modal-sub .mono {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
    color: var(--ink-2);
  }
  .dot-sep { color: var(--ink-4); }
  .modal-close {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--ink-3);
    cursor: pointer;
    flex-shrink: 0;
  }
  .modal-close:hover {
    background: var(--bg-3);
    color: var(--ink);
  }
  .modal-body-flex {
    padding: 18px 24px;
    overflow: auto;
    flex: 1;
    margin: 0;
  }
  .modal-grid {
    max-height: 380px;
    overflow: auto;
  }
  .modal-foot {
    padding: 14px 24px 18px;
    border-top: 1px solid var(--line);
    display: flex; align-items: center; gap: 16px;
    background: var(--bg-2);
    border-radius: 0 0 10px 10px;
  }
  .modal-foot-note {
    flex: 1;
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 12px;
    color: var(--ink-2);
    line-height: 1.5;
    font-style: italic;
  }
  .modal-foot-note svg { color: var(--ink-3); }

  /* Datos manager modal */
  .datos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 14px;
  }
  .datos-card {
    padding: 10px 12px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 6px;
  }
  .datos-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
  }
  .datos-card-head .mono {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
  }
  .datos-card-count {
    display: inline-grid; place-items: center;
    min-width: 24px; height: 18px;
    padding: 0 6px;
    background: var(--accent);
    color: white;
    border-radius: 9px;
    font-size: 12px; font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .datos-card-key {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
    color: var(--ink-3);
  }
  .datos-note {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px;
    background: #fdf2d6;
    border: 1px solid #f0d99e;
    border-radius: 6px;
    color: #6b4810;
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 10px;
  }
  .datos-alert {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
  }
  .datos-alert.error { background: #fef0ef; color: #a5311f; border: 1px solid #f5c2bd; }
  .datos-alert.ok    { background: #ebf7f0; color: #0d6e3f; border: 1px solid #b7e2c8; }

  .datos-foot {
    display: flex; gap: 8px;
    align-items: center;
  }
  .btn-danger-soft {
    height: 32px; padding: 0 14px;
    background: transparent;
    color: #a5311f;
    border: 1px solid #f5c2bd;
    border-radius: 6px;
    font: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer;
    transition: background .12s;
  }
  .btn-danger-soft:hover { background: #fef0ef; }

  .datos-btn {
    display: inline-flex; align-items: center; gap: 6px;
  }

  /* Tipo combobox row — select + add + delete buttons */
  .tipo-combo-row {
    display: flex; align-items: center; gap: 6px;
  }
  .tipo-btn {
    width: 38px; height: 38px;
    display: inline-grid; place-items: center;
    background: var(--bg);
    border: 1px solid var(--line-2);
    border-radius: 6px;
    color: var(--ink-2);
    cursor: pointer;
    transition: all .12s;
    flex-shrink: 0;
  }
  .tipo-btn:hover:not(:disabled) {
    background: var(--bg-2);
    border-color: var(--ink-3);
    color: var(--ink);
  }
  .tipo-btn.tipo-btn-del:hover:not(:disabled) {
    background: #fef0ef;
    border-color: #f5c2bd;
    color: var(--red);
  }
  .tipo-btn:disabled { opacity: 0.4; cursor: not-allowed; }

  /* Generar inventarios Publicitarios — full-height frame with iframe */
  .inv-pub-body {
    display: flex; flex-direction: column;
    flex: 1;
    min-height: 0;
  }
  .inv-pub-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: flex-end;
    padding: 0 0 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--line);
  }
  .inv-pub-control {
    display: flex; flex-direction: column; gap: 5px;
    min-width: 220px;
  }
  .inv-pub-control .frame-select-wrap { width: 240px; }
  .inv-pub-select {
    height: 32px !important;
    font-size: 12.5px !important;
    padding: 0 30px 0 11px !important;
  }
  .inv-pub-url-strip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 0 8px 0 12px;
    height: 32px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    margin-left: auto;
    max-width: 380px;
  }
  .inv-pub-url-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    flex-shrink: 0;
  }
  .inv-pub-url-text {
    font-size: 12px;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 100px;
  }
  .inv-pub-url-text .empty-inline {
    color: var(--ink-3); font-style: italic;
  }

  /* date range — sits at same level as the two combos */
  .inv-pub-date-pair {
    display: flex; align-items: flex-end; gap: 8px;
    padding-left: 14px;
    margin-left: 2px;
    border-left: 1px solid var(--line);
    position: relative;
  }
  .inv-pub-date-control { min-width: 140px; }
  .inv-pub-date {
    height: 32px;
    width: 140px;
    padding: 0 10px;
    border: 1px solid var(--line-2);
    background: var(--bg);
    border-radius: 6px;
    font: inherit;
    font-size: 12.5px;
    color: var(--ink);
    outline: none;
    font-variant-numeric: tabular-nums;
  }
  .inv-pub-date:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
  .inv-pub-date-clear {
    width: 22px; height: 22px;
    margin-bottom: 5px;
    display: inline-grid; place-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--ink-3);
    cursor: pointer;
  }
  .inv-pub-date-clear:hover {
    background: var(--bg-3); color: var(--ink); border-color: var(--line-2);
  }

  .inv-pub-frame-wrap {
    flex: 1;
    min-height: 480px;
    display: flex;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg);
    position: relative;
  }
  .inv-pub-frame {
    flex: 1;
    display: flex;
    position: relative;
    background: var(--bg-2);
  }
  .inv-pub-frame iframe {
    flex: 1;
    border: none;
    width: 100%;
    background: var(--bg);
  }
  .inv-pub-loading {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 14px;
    background: var(--bg-2);
    color: var(--ink-3);
    font-size: 13px;
    z-index: 1;
  }
  .spinner {
    width: 24px; height: 24px;
    border: 2.5px solid var(--line-2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  .inv-pub-empty {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 8px;
    padding: 40px 24px;
    color: var(--ink-3);
    text-align: center;
  }
  .inv-pub-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-2);
    margin-top: 8px;
  }
  .inv-pub-empty-sub {
    font-size: 12px;
    color: var(--ink-3);
    max-width: 460px;
    line-height: 1.5;
  }
  .inv-pub-empty-sub .mono {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
    color: var(--ink-2);
    background: var(--bg-3);
    padding: 1px 6px;
    border-radius: 3px;
  }

  /* url cell in señales grid */
  .url-cell {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink-2);
    font-size: 12px;
  }
  .empty-inline { color: var(--ink-3); font-style: italic; font-family: inherit; font-size: 12px; }

  /* tipo señal — colored tags + filter chip bar */
  .senal-tipo-bar {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 14px;
  }
  .senal-tipo-chip {
    display: inline-flex; align-items: center; gap: 8px;
    height: 30px;
    padding: 0 10px 0 12px;
    background: var(--bg);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
    transition: all .12s;
    letter-spacing: -0.005em;
  }
  .senal-tipo-chip:hover { border-color: var(--ink-3); color: var(--ink); }
  .senal-tipo-chip .senal-tipo-count {
    display: inline-grid; place-items: center;
    min-width: 20px; height: 18px;
    padding: 0 5px;
    background: var(--bg-3);
    color: var(--ink-3);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .senal-tipo-chip.active {
    background: var(--ink); color: var(--bg); border-color: var(--ink);
  }
  .senal-tipo-chip.active .senal-tipo-count {
    background: rgba(255,255,255,0.18); color: var(--bg);
  }

  .tipo-tag {
    display: inline-flex; align-items: center;
    padding: 3px 9px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    letter-spacing: -0.005em;
    border: 1px solid transparent;
  }
  /* Lineal — slate / authoritative */
  .tipo-tag.tipo-lineal,
  .senal-tipo-chip.tipo-lineal { color: #475569; }
  .senal-tipo-chip.tipo-lineal { border-color: #cbd5e1; }
  .tipo-tag.tipo-lineal { background: #f1f5f9; border-color: #cbd5e1; }
  .senal-tipo-chip.tipo-lineal.active { background: #475569; color: white; border-color: #475569; }

  /* OTT — purple */
  .tipo-tag.tipo-ott,
  .senal-tipo-chip.tipo-ott { color: #6d28d9; }
  .senal-tipo-chip.tipo-ott { border-color: #ddd6fe; }
  .tipo-tag.tipo-ott { background: #f5f3ff; border-color: #ddd6fe; }
  .senal-tipo-chip.tipo-ott.active { background: #6d28d9; color: white; border-color: #6d28d9; }

  /* Web Site — blue */
  .tipo-tag.tipo-web,
  .senal-tipo-chip.tipo-web { color: #1d4ed8; }
  .senal-tipo-chip.tipo-web { border-color: #bfdbfe; }
  .tipo-tag.tipo-web { background: #eff6ff; border-color: #bfdbfe; }
  .senal-tipo-chip.tipo-web.active { background: #1d4ed8; color: white; border-color: #1d4ed8; }

  /* YouTube — red */
  .tipo-tag.tipo-yt,
  .senal-tipo-chip.tipo-yt { color: #b91c1c; }
  .senal-tipo-chip.tipo-yt { border-color: #fecaca; }
  .tipo-tag.tipo-yt { background: #fef2f2; border-color: #fecaca; }
  .senal-tipo-chip.tipo-yt.active { background: #b91c1c; color: white; border-color: #b91c1c; }

  /* ────────────── Capítulo Propuesta ────────────── */
  .cap-catalog { padding: 4px 0; }
  .cap-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
  }
  .cap-card {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px;
    background: var(--bg);
    cursor: pointer;
    transition: all .15s;
    display: flex; flex-direction: column;
    gap: 10px;
    min-height: 188px;
  }
  .cap-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px -4px rgba(20,23,31,0.10);
  }
  .cap-card-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 10px;
  }
  .cap-card-icon {
    width: 48px; height: 48px;
    border-radius: 10px;
    display: grid; place-items: center;
    border: 1px solid var(--line);
  }
  .cap-card-code {
    font-size: 12px;
    color: var(--ink-3);
    padding-top: 6px;
    letter-spacing: 0.04em;
  }
  .cap-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.25;
  }
  .cap-card-cat { margin-top: -2px; }
  .cap-card-foot {
    margin-top: auto;
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }
  .cap-card-count {
    display: inline-flex; align-items: baseline; gap: 5px;
  }
  .cap-card-count-num {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .cap-card-count-lbl {
    font-size: 12px;
    color: var(--ink-3);
    font-weight: 500;
  }
  .cap-card-new {
    display: inline-flex; align-items: center; gap: 5px;
    height: 28px;
    padding: 0 12px 0 10px;
    background: var(--bg);
    color: var(--ink-2);
    border: 1px solid var(--line-2);
    border-radius: 5px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .12s;
  }
  .cap-card-new:hover {
    background: var(--ink); color: var(--bg); border-color: var(--ink);
  }

  .cap-cat-tag {
    display: inline-flex; align-items: center;
    padding: 3px 9px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid;
    letter-spacing: -0.005em;
  }

  /* Stepper */
  .cap-stepper {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 24px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-3);
  }
  .cap-step {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
  }
  .cap-step.active {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-bg);
  }
  .cap-step.done {
    color: var(--ink-2);
  }
  .cap-step-num {
    display: inline-grid; place-items: center;
    width: 18px; height: 18px;
    background: var(--ink-4);
    color: white;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
  }
  .cap-step.active .cap-step-num { background: var(--accent); }
  .cap-step.done .cap-step-num { background: var(--ink-2); }
  .cap-step-sep { color: var(--ink-4); font-weight: 400; }

  /* Source picker */
  .cap-source-pick {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 16px;
  }
  .cap-source-card {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 22px 20px;
    background: var(--bg);
    text-align: left;
    cursor: default;
    display: flex; flex-direction: column;
    gap: 8px;
  }
  .cap-source-blank {
    cursor: pointer;
    transition: all .15s;
    border: none;
    background: var(--bg);
    border: 1px solid var(--line);
  }
  .cap-source-blank:hover {
    border-color: var(--accent);
    background: var(--accent-bg);
    transform: translateY(-2px);
  }
  .cap-source-card-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: var(--bg-2);
    display: grid; place-items: center;
    color: var(--ink-2);
    margin-bottom: 4px;
  }
  .cap-source-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.005em;
  }
  .cap-source-card-sub {
    font-size: 12.5px;
    color: var(--ink-3);
    line-height: 1.4;
  }
  .cap-source-empty {
    margin-top: 8px;
    padding: 16px;
    background: var(--bg-2);
    border: 1px dashed var(--line-2);
    border-radius: 6px;
    text-align: center;
    color: var(--ink-3);
    font-size: 12px;
    font-style: italic;
  }
  .cap-source-list {
    margin-top: 6px;
    display: flex; flex-direction: column;
    gap: 4px;
    max-height: 240px;
    overflow-y: auto;
  }
  .cap-source-item {
    display: grid;
    grid-template-columns: 50px 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg-2);
    border: 1px solid transparent;
    border-radius: 6px;
    font: inherit;
    cursor: pointer;
    transition: all .12s;
    text-align: left;
  }
  .cap-source-item:hover {
    background: var(--accent-bg);
    border-color: var(--accent);
  }
  .cap-source-item-id {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
  }
  .cap-source-item-cli {
    font-size: 13px;
    color: var(--ink);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cap-source-item-val {
    font-size: 12px;
    color: var(--ink-2);
    font-weight: 600;
  }

  .cap-review-summary {
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px 16px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 4px;
  }
  .cap-review-row {
    display: flex; align-items: center; gap: 10px;
  }
  .cap-review-row .kv-k {
    min-width: 90px;
  }

  /* ────────────── Capítulo Propuesta ────────────── */

  /* Tabs */
  .cap-tabs {
    display: flex; align-items: center; gap: 4px;
    padding: 0;
    border-bottom: 1px solid var(--line);
    margin-bottom: 14px;
  }
  .cap-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 14px 11px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--ink-3);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: -0.005em;
    margin-bottom: -1px;
    transition: all .12s;
  }
  .cap-tab:hover { color: var(--ink); }
  .cap-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }
  .cap-tab-count {
    display: inline-grid; place-items: center;
    min-width: 22px; height: 18px;
    padding: 0 6px;
    background: var(--bg-3);
    color: var(--ink-3);
    border-radius: 9px;
    font-size: 12px; font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .cap-tab.active .cap-tab-count { background: var(--accent); color: white; }

  /* Drilldown summary */
  .cap-pp-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 22px;
    padding: 16px 18px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 18px;
  }
  .cap-pp-summary-row { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
  .cap-pp-summary-row .kv-v-large { font-size: 18px; font-weight: 700; }
  .cap-pp-invited {
    margin-top: 4px;
    font-size: 12px;
    color: var(--ink-3);
    display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center;
  }
  .cap-invited-badge {
    margin-left: 4px;
    padding: 0 5px;
    background: #6d28d9;
    color: white;
    border-radius: 8px;
    font-size: 9.5px;
    font-weight: 700;
  }

  /* Editor pill (en celdas de capítulos) */
  .cap-editor-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px 3px 3px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    max-width: 100%;
    border: 1px solid;
  }
  .cap-editor-pill-id {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 6px;
    background: currentColor;
    color: white !important;
    border-radius: 3px;
    letter-spacing: 0.02em;
    opacity: 0.85;
  }
  .cap-editor-pill > * { color: currentColor; }
  .cap-editor-pill .cap-editor-pill-id {
    /* hack para que el id tenga el color "color" pero el texto blanco */
    filter: none;
  }

  /* Editor grid (en drilldown) */
  .cap-editor-grid {
    display: flex; flex-direction: column; gap: 8px;
  }
  .cap-editor-row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    align-items: center;
    transition: all .12s;
  }
  .cap-editor-row:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 8px -3px rgba(20,23,31,0.08);
  }
  .cap-editor-row-cat {
    height: 44px;
    border-radius: 8px;
    border: 1px solid;
    display: grid; place-items: center;
    font-size: 12px;
    font-weight: 700;
  }
  .cap-editor-row-cat .cap-editor-pill-id {
    background: currentColor;
    color: white;
    padding: 3px 7px;
    border-radius: 4px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    letter-spacing: 0.02em;
  }
  .cap-editor-row-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .cap-editor-row-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.005em;
  }
  .cap-editor-row-sub {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: 12px;
    color: var(--ink-3);
  }
  .cap-editor-row-url {
    color: var(--ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
  }
  .cap-editor-row-prods {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px;
    font-size: 12px;
  }
  .cap-editor-row-prodlbl {
    color: var(--ink-3);
    font-weight: 500;
    margin-right: 4px;
  }
  .cap-editor-row-action { display: flex; align-items: center; }

  /* Productos en celda compacta */
  .cap-editor-prods-cell {
    display: inline-flex; align-items: center;
  }
  .cap-editor-prods-more {
    margin-left: 4px;
    padding: 1px 6px;
    background: var(--bg-3);
    color: var(--ink-2);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
  }

  /* Producto chips en formulario de edición */
  .cap-editor-prods-edit {
    display: inline-flex; flex-wrap: wrap; gap: 4px;
    max-width: 100%;
  }
  .cap-prod-chip {
    padding: 3px 9px;
    font-size: 12px;
    font-weight: 600;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    background: var(--bg);
    border: 1px solid var(--line-2);
    border-radius: 4px;
    color: var(--ink-3);
    cursor: pointer;
    transition: all .1s;
  }
  .cap-prod-chip:hover { color: var(--ink); border-color: var(--ink-3); }
  .cap-prod-chip.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
  }

  /* Pill para count de capítulos en grid */
  .cap-count-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px 2px 6px;
    background: var(--bg-3);
    color: var(--ink-2);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  .cap-cat-tag {
    display: inline-flex; align-items: center;
    padding: 3px 9px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid;
    letter-spacing: -0.005em;
  }

  /* Unified toolbar — zona + search + action en una sola fila */
  .crm-toolbar-unified {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 4px;
  }
  /* .crm-allflag-inline (la casilla «todas» del CRM) se retiró junto con el
     filtro manual de tipo de monetización: el tablero muestra el alcance del
     usuario, que no se apaga desde la pantalla. */

  /* Drilldown sections — títulos limpios, sin badges numerados */
  .md-section-title-clean {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .md-section-title-prominent {
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.015em;
  }
  .md-section-sub-clean {
    font-size: 12px;
    color: var(--ink-3);
    margin-left: 4px;
  }
  .md-detail-empty-quiet {
    padding: 24px 12px;
    text-align: center;
    color: var(--ink-3);
    font-size: 12.5px;
    font-style: italic;
    border: 1px dashed var(--line-2);
    border-radius: 6px;
  }
  .cap-editor-name {
    font-size: 13px;
    color: var(--ink-2);
    font-weight: 500;
  }

  /* Editor tiles — la acción principal del drilldown */
  .cap-editor-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
  }
  .cap-editor-tile {
    display: flex; align-items: center;
    gap: 14px;
    padding: 16px 16px 16px 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    transition: all .14s ease;
    text-align: left;
    font: inherit;
    color: inherit;
    width: 100%;
  }
  .cap-editor-tile:hover {
    border-color: var(--accent);
    background: var(--accent-bg);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px -6px rgba(20,23,31,0.10);
  }
  .cap-editor-tile-plus {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--ink);
    color: var(--bg);
    flex-shrink: 0;
    transition: all .14s ease;
  }
  .cap-editor-tile:hover .cap-editor-tile-plus {
    background: var(--accent);
    transform: scale(1.05);
  }
  .cap-editor-tile-text {
    flex: 1;
    min-width: 0;
  }
  .cap-editor-tile-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.005em;
    line-height: 1.25;
  }
  .cap-editor-tile-prods {
    margin-top: 4px;
    font-size: 12px;
    color: var(--ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cap-editor-tile-arrow {
    color: var(--ink-3);
    flex-shrink: 0;
    transition: transform .14s ease;
  }
  .cap-editor-tile:hover .cap-editor-tile-arrow {
    color: var(--accent);
    transform: translateX(2px);
  }

  /* Capítulos grid — fila compacta y legible */
  .cap-row-main {
    display: flex; flex-direction: column;
    gap: 2px;
    padding: 2px 0;
  }
  .cap-row-cliente {
    font-size: 12px;
    color: var(--ink-3);
    font-weight: 500;
  }
  .cap-row-desc {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.005em;
  }
  .cap-row-meta {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 2px;
  }
  .cap-row-pp-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
  }

  /* Editor selector inline en cada fila de capítulo */
  .cap-editor-cell {
    display: flex; align-items: center; gap: 4px;
  }
  .cap-editor-select { flex: 1; min-width: 0; }
  .cap-editor-open {
    flex-shrink: 0;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    background: var(--bg);
    border: 1px solid var(--line-2);
    border-radius: 5px;
    color: var(--ink-2);
    cursor: pointer;
    transition: all .12s;
  }
  .cap-editor-open:hover {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
  }

  /* ────────────── CRM Propuestas — Kanban ────────────── */
  .crm-body { display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 22px 18px; }

  /* Zona de Monetización bar — el filtro principal */
  .crm-zona-bar {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(180deg, var(--accent-bg) 0%, var(--bg-2) 100%);
    border: 1px solid var(--line);
    border-radius: 10px;
    flex-wrap: wrap;
  }
  .crm-zona-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .crm-zona-allflag {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px;
    color: var(--ink-2);
    cursor: pointer;
    user-select: none;
  }
  .crm-zona-allflag input { accent-color: var(--accent); }
  .crm-zona-active-hint {
    font-size: 12px;
    color: var(--ink-3);
    font-style: italic;
  }
  .crm-zona-active-hint b { color: var(--ink); font-style: normal; }

  /* Zonas invitadas — checkbox chips */
  .crm-zonas-invite-note {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px;
    background: #fdf2d6;
    border: 1px solid #f0d99e;
    border-radius: 6px;
    color: #6b4810;
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 12px;
  }
  .crm-zonas-invite-note svg { color: #b08530; flex-shrink: 0; margin-top: 2px; }
  .crm-zonas-invite-list {
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .crm-zona-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px 6px 8px;
    background: var(--bg);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    cursor: pointer;
    transition: all .12s;
    user-select: none;
  }
  .crm-zona-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .crm-zona-chip-box {
    width: 16px; height: 16px;
    border: 1.5px solid var(--line-2);
    border-radius: 3px;
    background: var(--bg);
    display: grid; place-items: center;
    transition: all .12s;
  }
  .crm-zona-chip.active { border-color: #6d28d9; background: #f5f3ff; }
  .crm-zona-chip.active .crm-zona-chip-box { background: #6d28d9; border-color: #6d28d9; }
  .crm-zona-chip:hover { border-color: var(--ink-3); }
  .crm-zona-chip-id {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
    letter-spacing: 0.02em;
  }
  .crm-zona-chip.active .crm-zona-chip-id { color: #6d28d9; }
  .crm-zona-chip-lbl {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink);
  }
  .crm-zona-chip.active .crm-zona-chip-lbl { color: #6d28d9; font-weight: 600; }

  .crm-toolbar {
    display: flex; align-items: center; gap: 12px;
  }
  .crm-state-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
    padding: 4px 0 12px;
  }
  .crm-state-chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 26px;
    padding: 0 8px 0 10px;
    background: var(--bg);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-3);
    cursor: pointer;
    transition: all .12s;
    letter-spacing: -0.005em;
    opacity: 0.7;
  }
  .crm-state-chip.active { opacity: 1; }
  .crm-state-chip:hover { border-color: var(--ink-3); opacity: 1; }
  .crm-state-dot { width: 7px; height: 7px; border-radius: 50%; }
  .crm-state-chip-count {
    margin-left: 2px;
    font-size: 12px;
    font-weight: 600;
    opacity: 0.55;
    font-variant-numeric: tabular-nums;
  }
  /* Active state — soft tinted bg + darker tinted text (subtler, more refined) */
  .crm-state-chip.crm-state-lead.active        { background: #f1f5f9; color: #334155; border-color: #cbd5e1; }
  .crm-state-chip.crm-state-contactado.active  { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
  .crm-state-chip.crm-state-preparando.active  { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
  .crm-state-chip.crm-state-enviada.active     { background: #ecfeff; color: #0e7490; border-color: #a5f3fc; }
  .crm-state-chip.crm-state-ganada.active      { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
  .crm-state-chip.crm-state-perdida.active     { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
  .crm-state-chip.crm-state-congelada.active   { background: #fffbeb; color: #92400e; border-color: #fde68a; }
  .crm-state-chip.active .crm-state-chip-count { opacity: 0.7; }

  .btn-ghost-sm {
    height: 26px; padding: 0 10px;
    background: transparent;
    border: 1px solid var(--line-2);
    border-radius: 5px;
    color: var(--ink-2);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: -0.005em;
  }
  .btn-ghost-sm:hover { background: var(--bg-2); color: var(--ink); border-color: var(--ink-3); }

  .crm-kanban {
    display: flex; gap: 16px;
    overflow-x: auto;
    padding-bottom: 16px;
    margin: 0 -18px 0 -18px;
    padding-left: 18px; padding-right: 18px;
    min-height: 640px;
  }
  /* Columnas un 25% más angostas (360→270 de base, 340→255 de mínimo, 620→465 de
     tope). Las tarjetas ocupan el ancho de su columna, así que es acá donde se
     estrechan; de paso entran más estados en pantalla sin desplazar. */
  .crm-col {
    flex: 1 1 270px;
    min-width: 255px;
    max-width: 465px;
    display: flex; flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-2);
    overflow: hidden;
  }
  .crm-col-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.005em;
  }
  .crm-col-title { display: inline-flex; align-items: center; gap: 8px; }
  .crm-col-dot { width: 8px; height: 8px; border-radius: 50%; }
  .crm-col-meta {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }
  .crm-col-count {
    display: inline-grid; place-items: center;
    min-width: 20px; height: 18px;
    padding: 0 5px;
    background: rgba(255,255,255,0.65);
    border-radius: 9px;
    font-size: 12px; font-weight: 700;
  }
  .crm-col-sum {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    opacity: 0.75;
  }
  .crm-col-body {
    flex: 1;
    padding: 7px;
    display: flex; flex-direction: column; gap: 6px;
    overflow-y: auto;
    max-height: calc(100vh - 300px);
  }
  .crm-col-empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--ink-3);
    font-size: 12px;
    font-style: italic;
  }

  /* Tarjetas más chicas: el tablero se lee de un vistazo y lo que importa es
     cuántas hay en cada estado, no el aire dentro de cada una. */
  .crm-card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-left: 3px solid var(--col-accent, var(--ink-4));
    border-radius: 6px;
    padding: 7px 10px;
    cursor: pointer;
    transition: all .12s;
  }
  .crm-card-compact {
    padding: 7px 10px;
  }
  .crm-card-monto-inline {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink);
    margin-right: auto;
  }
  .crm-card-title-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
  }
  .crm-card-zona {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--ink-3);
    padding: 1px 5px;
    background: var(--bg-3);
    border-radius: 3px;
    letter-spacing: 0.04em;
  }
  .crm-card:hover {
    border-color: var(--ink-3);
    border-left-color: var(--col-accent, var(--ink-4));
    background: #fafbfd;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px -3px rgba(20,23,31,0.08);
  }
  .crm-card-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 2px;
  }
  .crm-card-id {
    font-size: 11px;
    color: var(--ink-3);
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .crm-card-badge {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 0 5px;
    background: var(--accent-bg);
    color: var(--accent);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
  }
  .crm-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
    letter-spacing: -0.005em;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .crm-card-monto {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 3px;
  }
  .crm-card-foot {
    display: flex; align-items: center;
    font-size: 11px;
    color: var(--ink-3);
    font-weight: 500;
    gap: 8px;
  }
  .crm-card-emp { display: inline-flex; align-items: center; gap: 4px; }
  .crm-card-age { font-variant-numeric: tabular-nums; }

  .crm-empty {
    padding: 40px;
    text-align: center;
    color: var(--ink-3);
    font-size: 13px;
    font-style: italic;
    border: 1px dashed var(--line-2);
    border-radius: 10px;
  }

  /* ────────────── CRM Drawer ────────────── */
  /* El velo cubre LA VENTANA, no la pantalla: arranca bajo la barra superior
     (48 px) y a la derecha del menú (280 px), de modo que el drawer ocupa
     exactamente el mismo marco que la ventana que lo abrió — el mismo que se ve
     al listar las oportunidades. Es descendiente de .shell, así que cuando el
     menú se pliega el velo se corre solo. */
  .drawer-veil {
    position: fixed;
    top: 48px; left: 280px; right: 0; bottom: 0;
    background: rgba(20, 23, 31, 0.45);
    z-index: 200;
    animation: fadeIn .15s ease-out;
  }
  .shell.sidebar-collapsed .drawer-veil { left: 0; }
  .drawer {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 920px;
    max-width: calc(100vw - 60px);
    background: var(--bg);
    border-left: 1px solid var(--line);
    box-shadow: -10px 0 40px -10px rgba(0,0,0,0.18);
    display: flex; flex-direction: column;
    animation: slideInRight .2s cubic-bezier(.2,.7,.3,1);
  }
  /* El drawer de la oportunidad hospeda el editor de propuesta completo
     (grilla + elementos + gantt + archivos): ocupa TODO el marco, el mismo que la
     ventana de CRM-propuestas. No es un panel lateral, es la misma ventana
     mostrando otra cosa. */
  .drawer-wide {
    width: 100%; max-width: 100%;
    border-left: none;
  }
  @keyframes slideInRight {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
  }
  .drawer-head {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-2);
  }
  /* Cabecera sin título: cuando lo único que queda arriba es la cruz de cerrar
     —porque el nombre, el cliente y el producto ya se leen en la primera tarjeta—
     la banda se aprieta a la altura del botón y suelta el fondo y la línea, que
     sólo servían para separar un título que ya no está. */
  .drawer-head-bare {
    grid-template-columns: 1fr;
    justify-items: end;
    padding: 8px 12px 0;
    border-bottom: none;
    background: transparent;
  }
  .drawer-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px;
    color: var(--ink-3);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .drawer-eyebrow .mono { color: var(--ink-2); }
  .drawer-title {
    margin: 4px 0 6px 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.015em;
    line-height: 1.15;
  }
  .drawer-sub {
    font-size: 12px;
    color: var(--ink-3);
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px;
  }
  .drawer-state-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    border: 1px solid;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    align-self: center;
    letter-spacing: -0.005em;
  }
  .drawer-state-age {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
    font-weight: 600;
    opacity: 0.7;
    padding-left: 6px;
    border-left: 1px solid currentColor;
  }
  .drawer-close {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    background: var(--bg);
    border: 1px solid var(--line-2);
    border-radius: 6px;
    color: var(--ink-2);
    cursor: pointer;
    align-self: center;
  }
  .drawer-close:hover { background: var(--bg-3); color: var(--ink); }

  .drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 20px 32px;
  }

  .drawer-section { margin-bottom: 24px; }
  /* Variante apretada: el drawer de la oportunidad existe para llegar a la grilla
     de elementos, así que sus secciones no gastan alto en aire. */
  .drawer-section-tight { margin-bottom: 14px; }
  .drawer-section-head-tight { margin-bottom: 8px; padding-bottom: 6px; }
  /* Variante sin rótulo: el renglón sólo lleva el botón de la derecha, así que
     no hay nada que subrayar y el filete sobra. */
  .drawer-section-head-bare {
    justify-content: flex-end;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 6px;
  }
  .drawer-section-head {
    display: flex; align-items: baseline; gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
  }
  .drawer-section-title {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 15px; font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .drawer-section-sub-clean {
    font-size: 12px;
    color: var(--ink-3);
    margin-left: 2px;
  }
  .drawer-section-sub {
    font-size: 12px;
    color: var(--ink-3);
    margin-left: 4px;
  }
  .drawer-section-head .btn-primary { margin-left: auto; }

  .drawer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    padding: 4px 0;
  }
  .drawer-kv {
    display: flex; flex-direction: column; gap: 4px;
  }
  .kv-k {
    font-size: 12px;
    color: var(--ink-3);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .kv-v {
    font-size: 13.5px;
    color: var(--ink);
    font-weight: 500;
  }
  .kv-v-large {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
  }
  .kv-edit {
    width: 22px; height: 22px;
    display: inline-grid; place-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--ink-3);
    cursor: pointer;
  }
  .kv-edit:hover { background: var(--bg-3); color: var(--ink); border-color: var(--line-2); }

  /* Timeline */
  .crm-add-estado {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 12px 14px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 14px;
  }
  .crm-add-estado-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
  }
  .crm-add-estado-options {
    display: inline-flex; flex-wrap: wrap; gap: 6px;
    flex: 1;
  }
  .crm-add-estado-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    background: var(--bg);
    border: 1px solid;
    border-radius: 999px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .12s;
  }
  .crm-add-estado-btn:hover {
    background: var(--bg-2);
    transform: translateY(-1px);
  }

  /* Propuestas — la lista desplegable se reemplazó por .crm-pp-grid; queda el
     chip del id. La pastilla de estado y sus seis variantes de color se
     retiraron con sc.propuesta.estado (migración 93), junto con sus ajustes de
     tamaño por grilla (mini, prod-grid, crm-pp-grid, pp-elem-tabla). */
  .crm-prop-id { color: var(--ink-2); font-size: 12px; font-weight: 600; }
  .crm-prop-fields {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 12px;
    margin-bottom: 16px;
    align-items: end;
  }
  /* ── Drawer de oportunidad: cabecera compacta ──────────────────────────
     La ficha de la oportunidad ocupa UNA línea (cliente · fecha · responsable ·
     observación) para dejar el alto del drawer a lo que se viene a hacer:
     elegir una propuesta y editarla. */
  .crm-op-ficha {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 6px 18px;
    padding: 8px 0 10px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 12px;
  }
  /* Etiqueta y valor EN LÍNEA. Apiladas gastaban dos renglones por campo, y la
     ficha entera existe para que se lea de un vistazo, no para llenar alto. */
  .crm-op-ficha-campo { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
  .crm-op-ficha-campo.crece { flex: 1 1 260px; }
  .crm-op-ficha-k {
    font-size: 10.5px; font-weight: 700; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: 0.07em; white-space: nowrap;
  }
  .crm-op-ficha-v {
    font-size: 13.5px; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* La observación es un renglón, no un textarea de dos líneas. */
  .crm-op-ficha input {
    flex: 1; min-width: 140px; height: 30px;
    padding: 0 9px; font-size: 12.5px; font-family: inherit;
    color: var(--ink); background: var(--bg);
    border: 1px solid var(--line-2); border-radius: 6px;
  }

  /* ── Cronología horizontal ─────────────────────────────────────────────
     Los estados se leen de izquierda (el actual) a derecha (el más antiguo),
     encadenados por flechas. Reemplaza la línea de tiempo vertical: ocupa una
     franja en vez de una columna. */
  .crm-crono-flow {
    display: flex; flex-wrap: wrap; align-items: stretch; gap: 0;
  }
  .crm-crono-step { padding: 6px 12px; }
  .crm-crono-step {
    display: flex; flex-direction: column; gap: 2px;
    padding: 7px 12px;
    border: 1.5px solid var(--line-2);
    background: var(--bg);
    min-width: 150px;
  }
  .crm-crono-step.current { border-width: 2px; }
  .crm-crono-estado { font-size: 13px; font-weight: 700; letter-spacing: -0.005em; }
  .crm-crono-meta { font-size: 11.5px; color: var(--ink-3); }
  .crm-crono-add { margin-left: auto; align-self: center; }
  .crm-crono-arrow {
    display: grid; place-items: center;
    padding: 0 2px;
    color: var(--ink-3);
    flex: none;
  }

  /* ── Grilla de propuestas (sólo lectura) ───────────────────────────────
     Elegir la fila es lo único que hace: la edición ocurre en el panel de
     abajo, que es el editor único de propuesta. */
  .crm-pp-grid {
    width: 100%;
    border-collapse: collapse;
    /* Es la grilla que se lee para ELEGIR qué propuesta editar: cuerpo de texto,
       no letra chica de tabla auxiliar. */
    font-size: 14px;
  }
  .crm-pp-grid th {
    text-align: left;
    padding: 6px 10px;
    font-size: 13px; font-weight: 500; color: var(--ink);
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    white-space: nowrap;
  }
  .crm-pp-grid td {
    padding: 5px 10px;
    line-height: 1.3;
    border: 1px solid var(--line-2);
    color: var(--ink-2);
    background: var(--bg);
    vertical-align: top;
  }
  /* La fecha en ISO se lee como un código, no como prosa: ancho fijo y de una
     sola línea. (No hay regla `.mono` global: la de `.crud-table` no llega acá.) */
  .crm-pp-grid td.mono {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    white-space: nowrap;
  }
  .crm-pp-grid tbody tr { cursor: pointer; }
  .crm-pp-grid tbody tr:hover td { background: var(--bg-2); }
  /* La fila elegida NO se pinta: se marca con una barra a la izquierda y con el
     texto en el tinte fuerte, para que el cuerpo de la grilla quede blanco. El
     peso NO se toca: la negrita en el cuerpo de la grilla queda reservada al
     monto —el único dato que se busca de un vistazo— y a las cabeceras. */
  .crm-pp-grid tbody tr.selected td { color: var(--ink); }
  .crm-pp-grid tbody tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
  /* La Σ de la grilla y la Σ del editor son EL MISMO número visto dos veces:
     se escriben igual (misma tipografía, mismo cuerpo, mismo peso, mismo color
     que .pp-barra-monto) para que se reconozcan como uno solo. */
  .crm-pp-monto {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 14px; font-weight: 700; color: var(--accent);
    text-align: right; white-space: nowrap;
  }
  /* …también en la fila elegida, que tiñe el resto de las celdas. */
  .crm-pp-grid tbody tr.selected td.crm-pp-monto { color: var(--accent); }

  /* ── Grilla de productos (ventana «CRM-propuestas Elementos») ──────────
     Un producto vendido por fila. Las columnas van lo más angostas que el dato
     permite: `col-min` se encoge a su contenido y no parte, `col-ancha` se queda
     con el sobrante (sólo la descripción lo necesita) y `col-num` alinea a la
     derecha en monospace. */
  .prod-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    table-layout: auto;
  }
  .prod-grid th {
    text-align: left;
    padding: 5px 8px;
    font-size: 11.5px; font-weight: 700; color: var(--ink);
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
  }
  .prod-grid th:hover { background: var(--bg-3); }
  .prod-grid th.ordenada { color: var(--accent); }
  .prod-grid-orden { margin-left: 4px; font-size: 9px; }
  .prod-grid td {
    padding: 4px 8px;
    border: 1px solid var(--line-2);
    background: var(--bg);
    color: var(--ink-2);
    line-height: 1.3;
    vertical-align: middle;
  }
  .prod-grid tbody tr:hover td { background: var(--bg-2); }
  .prod-grid .col-min { width: 1%; white-space: nowrap; }
  .prod-grid .col-ancha { min-width: 200px; }
  .prod-grid .col-num {
    width: 1%; white-space: nowrap; text-align: right;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    color: var(--accent);
  }
  .prod-grid .icon-btn { width: 22px; height: 22px; }
  .prod-grid-link {
    font-weight: 600; color: var(--accent);
    background: none; border: none; padding: 0; cursor: pointer;
    font-size: 12px;
  }
  .prod-grid-link:hover { text-decoration: underline; }
  .prod-grid-si {
    padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700;
    color: #0d6e3f; background: #ebf7f0; border: 1px solid #b7e2c8;
  }

  /* ── Elementos de la propuesta: tabla con línea de tiempo ──────────────
     Una fila por elemento, agrupadas por zona de monetización. La fila de grupo
     lleva el nombre de la zona, su responsable, la vigencia que abarcan sus
     elementos y lo que suman — todo derivado, ninguna fila lo declara. */
  .pp-elem-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
  }
  .pp-elem-tabla th {
    text-align: left;
    padding: 5px 10px;
    font-size: 11.5px; font-weight: 500; color: var(--ink);
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    white-space: nowrap;
  }
  .pp-elem-tabla td {
    padding: 4px 10px;
    line-height: 1.3;
    border: 1px solid var(--line-2);
    color: var(--ink-2);
    background: var(--bg);
    vertical-align: middle;
  }
  /* Las fechas son ISO y no se parten: cortadas en dos líneas no se leen. */
  .pp-elem-tabla td.mono { white-space: nowrap; font-size: 12px; }
  .pp-elem-tabla tbody tr:hover td { background: rgba(0, 0, 0, 0.015); }
  .pp-elem-grupo td { font-weight: 600; white-space: nowrap; background: transparent; }
  .pp-elem-grupo:hover td { background: transparent; }
  .pp-elem-monto {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    text-align: right; white-space: nowrap; color: var(--accent);
  }
  .pp-elem-grupo .pp-elem-monto { color: inherit; }
  .pp-elem-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    background: var(--bg-3);
    color: var(--ink-3);
    white-space: nowrap;
  }
  .pp-elem-chip.en-produccion { color: #0d6e3f; background: #ebf7f0; border: 1px solid #b7e2c8; }

  /* ── Plan de facturación (ventana del botón «Plan Facturación») ────────
     Una fila por factura proyectada. La grilla se lee en TRES SECTORES: lo que
     se factura, cómo se lleva a pesos, y el neto que sale de esos dos. El corte
     lo marca una LÍNEA DOBLE —no un color ni un espacio— para que se vea que son
     bloques distintos de la misma tabla y no tres tablas pegadas. */
  /* La caja: `.modal` está topeada en 420px —el ancho de los diálogos de
     confirmación, que es lo que casi siempre es un modal acá— y ese tope le
     ganaba al ancho en línea: la grilla salía cortada por la derecha, sin los
     totales ni la columna del neto. Esta ventana no es un diálogo, es una
     grilla, así que declara su propio ancho y suelta el tope. */
  .modal-plan {
    width: min(1180px, 96vw);
    max-width: none;
    max-height: 92vh;
    display: flex; flex-direction: column;
  }
  /* Y aun con el ancho suelto, en una pantalla angosta la grilla tiene que poder
     correrse: se scrollea ELLA, no la página. */
  .plan-fact-scroll { overflow: auto; flex: 1; margin-bottom: 12px; }
  .plan-fact-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
  }
  /* La cabecera se queda quieta al scrollear: con doce cuotas cargadas, saber en
     qué columna se está escribiendo importa más que ver el borde de la tabla. */
  .plan-fact-grid thead th { position: sticky; top: 0; z-index: 1; }
  .plan-fact-grid th {
    text-align: left;
    padding: 5px 8px;
    font-size: 11.5px; font-weight: 700; color: var(--ink);
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    vertical-align: bottom;
    line-height: 1.15;
    white-space: nowrap;
  }
  .plan-fact-grid td {
    padding: 3px 8px;
    border: 1px solid var(--line-2);
    background: var(--bg);
    color: var(--ink-2);
    line-height: 1.3;
    vertical-align: middle;
  }
  /* El nombre de la columna tal como se llama en la tabla: se escribe en
     monospace para distinguirlo del rótulo en castellano de al lado. */
  .plan-fact-col { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10.5px; font-weight: 600; }
  .plan-fact-calc { color: #1d4ed8; }
  /* LA línea doble: abre sector. La lleva la primera celda de los sectores 2 y 3,
     en cabecera, cuerpo y pie, así el corte baja entero de arriba abajo. */
  .plan-fact-grid th.sec-ini,
  .plan-fact-grid td.sec-ini { border-left: 4px double var(--ink-3); }
  .plan-fact-grid tbody tr:hover td { background: var(--bg-2); }
  .plan-fact-neto { text-align: right; color: #1d4ed8; font-weight: 700; white-space: nowrap; }
  .plan-fact-pendiente { color: var(--ink-4); font-size: 11px; font-style: italic; }
  .plan-fact-total-k { text-align: right; font-weight: 700; color: var(--ink-2); border: none; background: transparent; }
  .plan-fact-total { text-align: right; font-weight: 700; color: #1d4ed8; white-space: nowrap; }
  .plan-fact-grid tfoot td { background: var(--bg-2); }
  .plan-fact-grid tfoot td.plan-fact-total-k { background: transparent; }
  .plan-fact-vacio { text-align: center; color: var(--ink-3); font-style: italic; padding: 14px 8px; }
  .plan-fact-nota { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }

  /* La pista es la MISMA para todas las filas (la vigencia completa de la
     propuesta), así dos barras se comparan por posición y largo. */
  .pp-gantt-pista {
    position: relative;
    height: 12px;
    min-width: 100px;
    background: var(--bg-3);
    border-radius: 3px;
  }
  .pp-gantt-barra {
    position: absolute;
    top: 0; bottom: 0;
    background: #9dc0ee;
    border-radius: 3px;
  }
  .pp-gantt-barra.grupo { background: #4a7fc1; }

  /* ── Barra de la propuesta: TODO lo de nivel propuesta en dos renglones ──
     Cada bloque que se apile acá arriba es alto que pierde la grilla, así que
     nombre, fecha, monto, moneda, alta de tipo y estado comparten una franja. */
  .pp-barra { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
  /* Renglón del cliente. Llevaba a la derecha los botones «Enviar propuesta» y
     «Cambio estado»: se fueron con sc.propuesta.estado (migración 93) y con ellos
     las reglas que los empujaban contra el borde. */
  .pp-barra-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  /* El tipo de monetización ya trae su propia caja de color: el botón que lo
     envuelve no dibuja nada: sin borde, sin fondo y sin padding, para no rodear
     una píldora con un óvalo. La caja de color ES el botón. */
  .pp-tipo-btn {
    padding: 0; border: none; background: none; cursor: pointer;
    display: inline-flex; border-radius: 8px;
  }
  .pp-tipo-btn:hover { filter: brightness(0.96); }
  .pp-tipo-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .pp-barra-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .pp-barra .crud-input { height: 32px; font-size: 13px; }
  .pp-barra-nombre { flex: 1 1 170px; min-width: 110px; }
  .pp-barra-moneda { flex: 0 0 84px; }
  /* Rótulo a la vista de los dos criterios de generación de órdenes: un id de
     catálogo suelto no dice de cuál de los dos se trata. No lleva el mayúsculas
     de las cabeceras: es una etiqueta dentro de una fila de campos. */
  .pp-barra-k { font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
  .pp-barra-criterio { flex: 1 1 180px; min-width: 130px; }
  /* «Plan Facturación» cierra el PRIMER renglón contra el borde derecho, debajo
     de «Cambio estado». No se lleva una línea propia: el ancho se lo cede la
     observación, que es la caja elástica de ese renglón. Así el segundo renglón
     queda entero para los criterios + moneda + monto + «+ monetización», que es
     donde tienen que estar. */
  /* La observación es LA caja elástica de la barra: crece y se encoge con el ancho
     de la ventana, y se queda con casi todo el sobrante (flex-grow 4 contra el 1
     del nombre) porque es el único texto largo de la fila — el resto son una fecha,
     un nombre corto, un monto y una moneda, que no ganan nada con más ancho. Con
     «Cambio estado» fuera de este renglón hay de dónde crecer. */
  .pp-barra-obs    { flex: 4 1 220px; min-width: 140px; }
  /* El monto se lee como la cabecera de la columna «Valor neto»: mismo ancho que
     esa columna (125 px) y, a su derecha, el hueco exacto de la columna de
     acciones (132 px), de modo que el número queda justo encima de su columna. */
  .pp-barra-monto {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 14px; font-weight: 700; color: var(--accent);
    padding: 0 10px; height: 32px;
    width: 125px;
    display: inline-flex; align-items: center; justify-content: flex-end;
    background: var(--bg-3); border-radius: 6px;
    white-space: nowrap;
  }
  .pp-barra-estado { display: inline-flex; align-items: center; gap: 8px; }
  .pp-barra-opciones {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    padding: 8px 10px; background: var(--bg-3); border-radius: 8px;
  }
  .pp-barra-opciones-k {
    font-size: 11px; font-weight: 700; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: 0.06em; margin-right: 2px;
  }
  /* El responsable del grupo se elige en la propia fila: un select sin marco, que
     se lee como el texto «Zona – Persona» del diseño. */
  .pp-elem-resp-sel {
    border: none; background: transparent; color: inherit;
    font: inherit; font-weight: 600; padding: 0; cursor: pointer;
    max-width: 160px;
  }
  /* Controles de la fila de grupo: alta de producto y baja del tipo. Van dentro
     de la fila, en tono discreto — la fila de grupo es un encabezado, no una
     barra de acciones. */
  .pp-grupo-acciones { white-space: nowrap; display: flex; align-items: center; gap: 6px; }
  /* El .icon-btn mide 28 px y por sí solo fijaba el alto de la fila, dejando el
     recorte del relleno sin efecto. Dentro de las grillas va más compacto. */
  .crm-pp-grid .icon-btn,
  .pp-elem-tabla .icon-btn { width: 22px; height: 22px; }
  .pp-elem-tabla .pp-grupo-btn { padding: 0 8px; line-height: 20px; }
  .pp-elem-tabla .pp-grupo-plegar { width: 16px; height: 16px; }
  .pp-grupo-btn {
    padding: 1px 8px;
    font-size: 12px; font-weight: 600; font-family: inherit;
    color: var(--accent); background: var(--bg);
    border: 1px solid var(--line-2); border-radius: 999px;
    cursor: pointer;
  }
  .pp-grupo-btn:hover { background: var(--bg-3); }
  .pp-grupo-sel {
    max-width: 190px;
    height: 24px; font-size: 12px; font-family: inherit;
    border: 1px solid var(--line-2); border-radius: 6px;
    background: var(--bg); color: var(--ink);
  }
  /* Plegar un grupo: la flecha gira y sus productos desaparecen, dejando el
     titular con su total. Con muchos tipos, es lo que hace la grilla legible. */
  .pp-grupo-plegar {
    display: inline-grid; place-items: center;
    width: 18px; height: 18px; margin-right: 6px;
    vertical-align: -3px;
    border: 1px solid var(--line-2); border-radius: 4px;
    background: var(--bg); color: var(--ink-2);
    cursor: pointer;
  }
  .pp-grupo-plegar:hover { background: var(--bg-3); }

  /* Copiar productos de otra propuesta: panel que se despliega al pie, igual que
     el de archivos. */
  .pp-copiar {
    width: 100%;
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid var(--line-2); border-radius: 10px;
    background: var(--bg);
    display: flex; flex-direction: column; gap: 10px;
  }
  .pp-copiar-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .pp-copiar-k {
    font-size: 11px; font-weight: 700; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .pp-copiar-lista {
    max-height: 220px; overflow-y: auto;
    border: 1px solid var(--line-2); border-radius: 8px;
  }
  .pp-copiar-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; font-size: 12.5px; cursor: pointer;
    border-bottom: 1px solid var(--line);
  }
  .pp-copiar-item:last-child { border-bottom: none; }
  .pp-copiar-item:hover { background: var(--bg-2); }
  .crm-add-estado-btn.activo { background: var(--ink); color: var(--bg); border-color: var(--ink); }

  .pp-elem-vacio {
    font-size: 12.5px; color: var(--ink-4); font-style: italic;
    padding: 6px 10px 6px 22px;
  }

  /* ── Panel del editor de propuesta dentro del drawer ───────────────────
     ESTE es el único editor de propuesta de la aplicación (window.PropuestaEditor).
     El pipeline de planes ya no monta otro: navega hasta acá. */
  /* El cliente dentro del editor de propuesta: se ve, no se toca. Vive en la
     oportunidad, así que editarlo desde la propuesta sería editar otra cosa.
     Va sin rótulo — un nombre de empresa se reconoce solo, y «CLIENTE» delante
     sólo gastaba ancho; lo que es queda en el title. */
  .pp-cliente-v { font-size: 14px; font-weight: 600; color: var(--ink); }
  /* Código de la propuesta: es identificación, no un dato que se compare, así
     que se lee en segundo plano y sólo el código en sí va firme. */
  .pp-codigo { font-size: 12.5px; color: var(--ink-3); }
  .pp-codigo b {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    color: var(--ink-2); font-weight: 700;
  }

  .crm-pp-editor {
    border: 1.5px solid var(--line-2);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--bg-2);
  }

  /* Capítulos (read-only inside CRM) */
  .crm-caps-section {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 14px 14px;
  }
  .crm-caps-head {
    display: flex; align-items: baseline; gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
  }
  .crm-caps-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
  }
  .crm-caps-sub {
    margin-left: 8px;
    font-size: 12px;
    font-weight: 400;
    color: var(--ink-3);
  }
  .crm-caps-readonly {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px;
    color: var(--ink-3);
    font-style: italic;
  }
  .crm-caps-readonly svg { color: var(--ink-3); }
  .crm-caps-table tbody td { padding: 8px 12px; }
  .crm-cap-readonly { background: var(--bg); }
  .crm-cap-readonly:hover { background: var(--bg-2); }
  .crm-link {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--accent);
    text-decoration: none;
    font-size: 12px;
    max-width: 260px;
  }
  .crm-link .mono {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
  }
  .crm-link:hover { text-decoration: underline; }

  /* Form fields */
  .crm-form {
    display: flex; flex-direction: column; gap: 14px;
  }
  /* Editor de elemento — las dos tarjetas del diseño nuevo: un bloque para «el
     servicio» y otro para «lo comercial», en vez de una sola lista larga de
     campos. Los datos que NO se editan acá porque se heredan (producto, cliente,
     cuenta contable) o los enciende el sistema (en producción) van en azul: el
     mismo código de color que usa la pauta de emisión para lo calculado. */
  .elem-card {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
    display: flex; flex-direction: column; gap: 12px;
  }
  .elem-card-head { display: flex; flex-wrap: wrap; gap: 18px; align-items: baseline; }
  /* Anchos de los campos de las tarjetas. El drawer mide 960px y los campos se
     estiraban de borde a borde: una fecha de 8 caracteres en una caja de 900px no
     se lee como una fecha, se lee como un renglón vacío. Cada tipo de dato ocupa
     lo que ocupa su contenido. */
  .elem-card .crud-input,
  .elem-card .frame-select-wrap { max-width: 560px; }
  .elem-card input[type="date"] { max-width: 180px; }
  .elem-card .elem-monto { width: 160px; flex: none; }
  /* Las descripciones son BLOQUES de texto, no renglones. `.crud-input` fija
     height:30px y eso pisaba el rows={3} del textarea: quedaba una sola línea con
     barra de desplazamiento, que es justo lo que no se quería. Acá manda el alto
     propio; el ancho lo pone la COLUMNA de la grilla en la que cae el campo (el
     detalle a lo ancho de la tarjeta, valorización y pago a media tarjeta cada
     uno), no un tope fijo que dejaba la mitad derecha en blanco. */
  .elem-card textarea.crud-input {
    height: auto; min-height: 84px;
    max-width: none;
    padding: 8px 10px; line-height: 1.4;
    resize: vertical;
  }
  .elem-ro { color: #2563eb; }
  .elem-ro-strong { font-weight: 800; font-size: 15px; }
  .elem-ro-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 13px; }
  .elem-ro-k { font-weight: 700; color: #2563eb; }

  .crm-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .crm-field {
    display: flex; flex-direction: column; gap: 5px;
  }
  .crm-field > label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  /* ────────────── Clientes — tags & helpers ────────────── */
  /* Boolean cell — checkbox-like indicator for true/false fields */
  .bool-cell {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
    color: var(--ink-2);
  }
  .bool-box {
    width: 16px; height: 16px;
    display: inline-grid; place-items: center;
    border: 1.5px solid var(--line-2);
    border-radius: 3px;
    background: var(--bg);
    color: white;
    flex-shrink: 0;
  }
  .bool-true .bool-box {
    background: #1f9d59;
    border-color: #1f9d59;
  }
  .bool-true .bool-label { color: #0d6e3f; font-weight: 600; }
  .bool-false .bool-label { color: var(--ink-3); }

  /* Scrollable master grid — sticky header, capped height */
  .crud-grid-scroll {
    max-height: 460px;
    overflow: auto;
  }
  .crud-table-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: 0 1px 0 var(--line);
  }

  .cli-tag {
    display: inline-flex; align-items: center;
    padding: 3px 9px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    letter-spacing: -0.005em;
    border: 1px solid transparent;
    white-space: nowrap;
  }
  .cli-tag-anunciante { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
  .cli-tag-agencia    { color: #92400e; background: #fef3c7; border-color: #fde68a; }
  .cli-tag-on         { color: #0d6e3f; background: #ebf7f0; border-color: #b7e2c8; }

  .senal-tipo-chip.cli-tipo-anunciante { color: #1d4ed8; border-color: #bfdbfe; }
  .senal-tipo-chip.cli-tipo-anunciante.active { background: #1d4ed8; color: white; border-color: #1d4ed8; }
  .senal-tipo-chip.cli-tipo-agencia    { color: #92400e; border-color: #fde68a; }
  .senal-tipo-chip.cli-tipo-agencia.active { background: #92400e; color: white; border-color: #92400e; }

  .cli-padre-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
    display: inline-block;
    vertical-align: middle;
  }
  .cli-self-badge {
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--ink-3);
    color: white;
    border-radius: 3px;
  }
  .cli-self-badge-agencia { background: #92400e; }

  .cli-detail-note {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px;
    color: var(--ink-3);
    font-style: italic;
  }
  .cli-detail-note svg { color: var(--ink-3); }

  .cli-locked-hint {
    display: inline-grid; place-items: center;
    width: 28px; height: 28px;
    color: var(--ink-4);
  }

  .crud-table .row-self {
    background: linear-gradient(0deg, var(--bg-2), var(--bg-2));
  }
  .crud-table .row-self:hover { background: var(--bg-2); }
  .crud-table .row-self td:first-child {
    box-shadow: inset 3px 0 0 var(--ink-4);
  }

  /* Credit limit row — amount display & input */
  .credit-amount {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .credit-currency {
    margin-left: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
    letter-spacing: 0.04em;
  }
  .credit-input-wrap {
    display: inline-flex; align-items: center; gap: 0;
    max-width: 360px;
    position: relative;
  }
  .credit-input-prefix {
    position: absolute;
    left: 10px; top: 50%;
    transform: translateY(-50%);
    color: var(--ink-3);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 13px;
    font-weight: 600;
    pointer-events: none;
  }
  .credit-input {
    padding-left: 22px !important;
    width: 160px;
    font-size: 14px !important;
    font-weight: 600;
  }
  .credit-input-suffix {
    margin-left: 10px;
    font-size: 12px;
    color: var(--ink-3);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    white-space: nowrap;
  }

  /* Instagram — pink/magenta */
  .tipo-tag.tipo-ig,
  .senal-tipo-chip.tipo-ig { color: #be185d; }
  .senal-tipo-chip.tipo-ig { border-color: #fbcfe8; }
  .tipo-tag.tipo-ig { background: #fdf2f8; border-color: #fbcfe8; }
  .senal-tipo-chip.tipo-ig.active { background: #be185d; color: white; border-color: #be185d; }
  @media (max-width: 1200px) {
    .tiles { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
    .tile-label { font-size: 12px; }
  }

  /* Aviso de «el filtro esconde todo» en el tablero de CRM, y el «de N en total»
     de la cabecera cuando lo que se cuenta no es la tabla entera. Sin esto, un
     tipo de monetización sin oportunidades deja el tablero en cero y se lee como
     una aplicación sin datos. */
  .crm-filtro-vacio {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    padding: 10px 14px; margin-bottom: 12px;
    background: #fef9e7; border: 1px solid #f2e2b3; border-radius: 8px;
    font-size: 13px; color: #7a5c14;
  }
  .crm-filtro-vacio button { margin-left: auto; }
  .hero-count-filtro { display: block; font-size: 11px; font-weight: 400; opacity: 0.75; }