/* ---------------------------------------------------------------------------
   triage-financiador-v2.css — estilos propios del triage de FINANCIADORES v2.

   Consume los alias --triage-* de pages/triage.css, que debe cargarse ANTES.
   Al desplegar, este archivo va a front/styles/pages/ y el <link> cambia de
   ruta; el contenido no necesita tocarse.

   Tres piezas que producción todavía no tiene:
     · .mb.req         — tercer estado del chip (requisito excluyente)
     · .mo-ill         — tarjetas ilustradas de Q09
     · .pyr*           — pirámide de priorización de Q51
--------------------------------------------------------------------------- */

.qn { display: none; }
  .impact-profile .ql { font-size: 17px; font-weight: 600; }

  /* ── Chip de TRES estados: libre → preferido → requisito ────────────────
     El estado "requisito" conserva .sel para que required-gate.js siga
     contando la pregunta como respondida sin tocar el componente. */
  .mb.req {
    background: var(--refi-ink);
    border-color: var(--refi-ink);
    color: #fff;
    font-weight: 600;
  }
  .mb.req::after {
    content: ' · requisito';
    font-size: 10px; font-weight: 700; letter-spacing: .04em; opacity: .75;
  }
  .tri-help {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin: 0 0 10px; font-size: 12.5px; color: var(--triage-muted);
  }
  .tri-key { display: inline-flex; align-items: center; gap: 6px; }
  .tri-dot { width: 11px; height: 11px; border-radius: 3px; border: 1.5px solid var(--refi-ink-30); background: #fff; }
  .tri-dot.k2 { background: var(--triage-moss-p); border-color: var(--triage-moss); }
  .tri-dot.k3 { background: var(--refi-ink); border-color: var(--refi-ink); }

  /* Rejillas compactas para los campos numéricos nuevos. */
  .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
  @media (max-width: 820px) { .g2, .g3 { grid-template-columns: 1fr; gap: 16px; } }

  /* Bloques condicionales por instrumento (mismo patrón que B5 de proyectos). */
  .cond {
    border: 1px solid var(--triage-border); border-left-width: 3px;
    border-radius: 14px; padding: 20px 22px; margin-bottom: 22px;
  }
  .cond-t {
    font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    margin-bottom: 15px; display: flex; align-items: center; gap: 7px;
  }

  /* Las tarjetas ilustradas de Q09 viven en modelo-negocio-cards.css:
     las comparte el triage de proyectos. Cargar ese archivo también. */

  /* ── Pirámide de priorización (Q51) ────────────────────────────────────
     Los niveles se estrechan hacia arriba: la forma comunica que la cima no
     admite todo. El nivel se lee de la posición, no de una clase. */
  .pyr { display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .pyr-tier {
    width: 100%;
    border: 2px solid var(--refi-ink-30);
    border-radius: 16px;
    padding: 12px 16px 14px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  }
  /* Ancho e intensidad bajan juntos: la cima se ve más "pesada" y más angosta,
     y la jerarquía se lee sin tener que leer las etiquetas. */
  .pyr-tier[data-nivel="requisito"] {
    max-width: 54%;
    border-color: var(--refi-ink);
    background: var(--refi-ink-04);
  }
  .pyr-tier[data-nivel="preferencia"] {
    max-width: 77%;
    border-color: var(--refi-green-700);
    background: var(--refi-green-50);
  }
  .pyr-tier[data-nivel="deseable"] {
    max-width: 100%;
    border-color: var(--refi-ink-30);
  }

  /* El depósito de partida se separa de la pirámide: sin relieve y con borde
     punteado, para que se lea como zona de espera y no como un cuarto nivel. */
  .pyr-pool {
    margin-top: 16px;
    border: 2px dashed var(--refi-ink-15);
    background: var(--refi-paper);
    box-shadow: none;
  }
  /* Mientras quede algo sin clasificar el depósito lo dice; al vaciarse
     vuelve a gris y aparece el "todo clasificado". */
  .pyr-pool.pendiente { border-color: var(--refi-ink-50); }
  .pyr-pool.pendiente .pyr-n { background: var(--refi-ink-50); color: #fff; }
  .pyr-pool:not(.pendiente) .pyr-drop:empty::after {
    content: 'Todo clasificado';
    color: var(--refi-green-700); font-weight: 600;
  }

  .pyr-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 11px;
    font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase;
    color: var(--triage-muted);
  }
  .pyr-head b { font-weight: 700; color: var(--refi-ink); }
  [data-nivel="preferencia"] .pyr-head b { color: var(--refi-green-900); }
  .pyr-n {
    font-variant-numeric: tabular-nums;
    min-width: 20px; text-align: center;
    padding: 2px 7px; border-radius: 999px;
    background: var(--refi-ink-15); color: var(--refi-ink);
    font-size: 10.5px; font-weight: 700;
  }
  [data-nivel="requisito"]   .pyr-n { background: var(--refi-ink); color: #fff; }
  [data-nivel="preferencia"] .pyr-n { background: var(--refi-green-100); color: var(--refi-green-900); }
  /* Aviso suave cuando un nivel se pasa de su capacidad: no bloquea. */
  .pyr-tier.lleno { border-color: #FFC98A; background: #FFF9F0; }
  .pyr-tier.lleno .pyr-n { background: #FFC98A; color: #A65600; }

  .pyr-drop {
    display: flex; flex-wrap: wrap; gap: 7px;
    min-height: 40px;
    align-content: flex-start;
  }
  .pyr-drop:empty::after {
    content: 'Suelta aquí';
    font-size: 12px; color: var(--refi-ink-30); align-self: center;
  }

  /* Base (depósito y "deseable"): tinta plena y borde marcado. Tienen que
     leerse como fichas agarrables, no como texto suelto. */
  .pyr-item {
    padding: 8px 14px;
    border: 1.8px solid var(--refi-ink-70);
    border-radius: 999px;
    background: #fff;
    font-size: 14px; font-weight: 500; color: var(--refi-ink);
    box-shadow: var(--shadow-xs);
    cursor: grab; user-select: none;
    transition: all .15s ease;
  }
  .pyr-item i { font-style: normal; opacity: .72; font-size: 12.5px; }

  /* Punto de categoría: agrupa sin anidar. El depósito sigue siendo UNA sola
     zona de arrastre — meter subgrupos ahí obligaría a recordar de dónde salió
     cada ficha al devolverla. Los colores son los de dimensión de la marca. */
  .pyr-item::before {
    content: ''; display: inline-block;
    width: 7px; height: 7px; border-radius: 2px;
    margin-right: 8px; vertical-align: 1px;
    background: var(--cat, var(--refi-ink-30));
  }
  .pyr-item[data-cat="negocio"],    .pyr-leyenda [data-cat="negocio"]    { --cat: #C76F00; }
  .pyr-item[data-cat="tecnologia"], .pyr-leyenda [data-cat="tecnologia"] { --cat: #4A5566; }
  .pyr-item[data-cat="comunidad"],  .pyr-leyenda [data-cat="comunidad"]  { --cat: #2678D9; }
  .pyr-item[data-cat="impacto"],    .pyr-leyenda [data-cat="impacto"]    { --cat: #15A364; }

  .pyr-leyenda {
    display: flex; flex-wrap: wrap; gap: 16px;
    margin-top: 14px;
    font-size: 12px; color: var(--triage-muted);
  }
  .pyr-leyenda span { display: inline-flex; align-items: center; }
  .pyr-leyenda span::before {
    content: ''; width: 7px; height: 7px; border-radius: 2px;
    margin-right: 7px; background: var(--cat);
  }
  .pyr-item:hover {
    border-color: var(--triage-moss);
    color: var(--triage-moss);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
  }
  .pyr-item:active { cursor: grabbing; transform: none; }
  .pyr-item.dragging { opacity: .4; cursor: grabbing; box-shadow: none; }

  /* Color por nivel: la cima pesa más visualmente. */
  [data-nivel="requisito"]   .pyr-item { background: var(--refi-ink); border-color: var(--refi-ink); color: #fff; font-weight: 600; }
  [data-nivel="preferencia"] .pyr-item { background: var(--triage-moss-p); border-color: var(--triage-moss); color: var(--triage-moss); font-weight: 500; }
  [data-nivel="requisito"]   .pyr-item i,
  [data-nivel="preferencia"] .pyr-item i { opacity: .75; }

  /* Va al final a propósito: el estado de arrastre gana sobre el color de nivel
     y sobre el aviso de capacidad. */
  .pyr-tier.over {
    border-color: var(--triage-moss);
    border-style: solid;
    background: var(--triage-moss-p);
    box-shadow: var(--shadow-glow-green);
  }

  @media (max-width: 760px) {
    .pyr-tier[data-nivel="requisito"],
    .pyr-tier[data-nivel="preferencia"] { max-width: 100%; }
  }

  /* Eco del rango de ticket: hace legible la escala y avisa si desde > hasta. */
  .ticket-echo {
    margin: -10px 0 18px; padding: 9px 14px; border-radius: 10px;
    font-size: 13.5px; font-weight: 500;
    background: var(--triage-moss-p); color: var(--triage-moss);
    border: 1px solid var(--triage-moss);
  }
  .ticket-echo[data-state="err"] {
    background: #FFF3E0; color: #A65600; border-color: #FFC98A;
  }