/* ============================================================
   QUÉ FUNCIONA · repositorio de lo que convierte
   Dos superficies:
   1. La vista de lectura (<section id="vista-conocimiento">), donde se ve lo acumulado.
   2. El drawer de carga, que se abre desde el botón "Esto funcionó" de la vista de
      Contenidos. Ese botón es la feature; la vista es solo donde se lee.

   El anti-patrón que ataca todo este diseño: "construí un swipe file perfecto y lo abrí
   cero veces". Si cargar algo lleva más de ~60 segundos, no se carga. De ahí que el
   drawer sea corto, que el hook venga precargado desde la pieza y que las etiquetas las
   proponga la IA.

   Solo tokens de /tokens.css — cero hex hardcodeado.
   `.on` para "seleccionado", nunca `.sel` (design/ARQUITECTURA-PANTALLA.md).
   ============================================================ */

/* ---------- barra y filtros de la vista ---------- */

.co-toolbar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid var(--line);
}
/* .spacer se define una sola vez en /base.css (con .cr-sp, .mk-sp y .fb-spacer como alias). */
.co-toolbar select{ min-width:150px; }

.co-seg{ display:flex; gap:2px; border:1px solid var(--line); border-radius:var(--r-sm); padding:2px; }
.co-seg button{
  background:transparent; border:none; color:var(--ink-2);
  padding:5px 11px; font-size:12px; border-radius:var(--r-xs); cursor:pointer;
}
.co-seg button:hover{ color:var(--ink); }
.co-seg button.on{ background:var(--s3); color:var(--ink); font-weight:600; }

/* ---------- nivel de evidencia ----------
   El color no es decorativo: es la única señal de si una regla es sabiduría o capricho.
   Va de "alguien lo dijo" (gris) a "alguien compró por esto" (turquesa). */

.co-ev{
  display:inline-block; font-size:9.5px; letter-spacing:.07em; text-transform:uppercase;
  padding:2px 7px; border-radius:var(--r-xs); border:1px solid var(--line);
  color:var(--ink-3); white-space:nowrap;
}
.co-ev[data-ev="declarada"]{ color:var(--ink-3); }
.co-ev[data-ev="referente"]{ color:var(--ink-2); border-color:var(--line); }
.co-ev[data-ev="senal-plataforma"]{ color:var(--ambar-ink); border-color:var(--ambar-dim); background:var(--ambar-dim); }
.co-ev[data-ev="venta-atribuida"]{ color:var(--turquesa-ink); border-color:var(--turquesa-line); background:var(--turquesa-dim); }

/* ---------- tarjetas ---------- */

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

.co-card{
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--s1);
  padding:12px 14px; display:flex; flex-direction:column; gap:7px; min-width:0;
}
.co-card:hover{ border-color:var(--line-soft); }
.co-card-top{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.co-formato{
  font-size:9.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-xs); padding:2px 7px;
}

/* El hook va en mono y entre comillas: es una cita literal de una pieza real, no una
   paráfrasis. Que se lea distinto del resto es el punto. */
.co-hook{
  font-family:var(--f-mono); font-size:13px; line-height:1.4; color:var(--ink);
  white-space:pre-wrap; word-break:break-word;
}
/* `word-break` en los tres, no solo en el gancho: lo que se pega acá viene de un caption
   de Instagram, y una cadena de hashtags sin espacios se desborda de la tarjeta y queda
   cortada sin que se note que falta texto. */
.co-regla{ font-size:13.5px; line-height:1.42; color:var(--ink); word-break:break-word; }
.co-porque{ font-size:11.5px; line-height:1.45; color:var(--ink-2); word-break:break-word; }
.co-meta{ display:flex; gap:6px; flex-wrap:wrap; font-size:10.5px; color:var(--ink-3); min-width:0; }
.co-meta .co-tag{ max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.co-tag{ border:1px solid var(--line-soft); border-radius:var(--r-xs); padding:1px 6px; }
.co-card-acciones{ display:flex; gap:6px; margin-top:2px; }
.co-card-acciones button{ font-size:11px; padding:4px 9px; }

.co-jubilada{ opacity:.55; }
.co-jubilada .co-regla{ text-decoration:line-through; }

/* ---------- drawer de carga ---------- */

:root{ --co-ancho: 460px; }

.co-panel{
  position:fixed; top:0; right:0; height:100vh; width:min(var(--co-ancho), 100vw);
  background:var(--s1); border-left:1px solid var(--line); box-shadow:var(--shadow);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .22s ease;
  z-index:var(--z-drawer);
}
.co-panel.abierto{ transform:translateX(0); }
@media (prefers-reduced-motion: reduce){ .co-panel{ transition:none; } }
@media (max-width: 560px){ .co-panel{ width:100vw; } }

.co-panel-head{
  display:flex; align-items:center; gap:10px;
  padding:14px var(--gut); border-bottom:1px solid var(--line);
}
.co-panel-head h3{ margin:0; font-size:14px; }
.co-panel-body{ flex:1; overflow-y:auto; padding:14px var(--gut); }
.co-panel-pie{
  display:flex; align-items:center; gap:8px;
  padding:12px var(--gut); border-top:1px solid var(--line);
}

/* Las opciones se muestran como chips con ejemplo al lado, no como un <select> de enums
   pelados: la vista se diseña para quien publica, no para quien manda en la marca. */
.co-chips{ display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; }
.co-chip{
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--s2);
  color:var(--ink-2); padding:5px 10px; font-size:11.5px; cursor:pointer; text-align:left;
}
.co-chip:hover{ color:var(--ink); border-color:var(--line-soft); }
.co-chip.on{ background:var(--turquesa-dim); border-color:var(--turquesa-line); color:var(--ink); font-weight:600; }
.co-chip .co-chip-ej{ display:block; font-size:9.5px; color:var(--ink-3); font-weight:400; margin-top:1px; }
.co-chip.on .co-chip-ej{ color:var(--ink-2); }

/* Lo que propuso la IA queda marcado hasta que la persona lo confirma o lo cambia: un
   valor sugerido que se ve igual que uno elegido es un valor que nadie revisa. */
.co-chip.propuesto{ border-style:dashed; border-color:var(--ambar-dim); color:var(--ambar-ink); }
.co-propuesta-nota{ font-size:10.5px; color:var(--ambar-ink); margin-top:4px; }

.co-aviso{
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--s2);
  padding:9px 12px; font-size:12px; color:var(--ink-2); margin-bottom:12px; line-height:1.45;
}
.co-aviso.err{ border-color:var(--rojo); color:var(--ink); }
.co-aviso.ok{ border-color:var(--turquesa-line); color:var(--ink); }
.co-aviso[hidden]{ display:none; }

.co-sec{ margin:14px 0 6px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.co-avanzado summary{ cursor:pointer; font-size:11.5px; color:var(--ink-2); padding:6px 0; }
.co-avanzado[open] summary{ color:var(--ink); }

/* ---------- botón de la vista de Contenidos ---------- */

.co-marcar{ margin-left:auto; }
.co-marcar .co-dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--ambar); margin-right:7px; vertical-align:middle;
}

/* ---------- filtros y notas de la vista ---------- */

.co-toolbar label{ font-size:11px; }
.co-lista[hidden]{ display:none; }

/* Una lista vacía no puede ser un rectángulo mudo: es el momento donde más falta hace
   explicar qué es una regla y de dónde salen las piezas. */
.co-vacio{
  grid-column:1 / -1; color:var(--ink-2); font-size:12.5px; line-height:1.5;
  border:1px dashed var(--line); border-radius:var(--r-md); padding:22px 20px; text-align:center;
}
.co-nota{
  font-size:11.5px; color:var(--ink-3); line-height:1.45;
  border-left:2px solid var(--line); padding:2px 0 2px 10px; margin-bottom:10px;
}
.co-nota[hidden]{ display:none; }
.co-peligro:hover{ border-color:var(--rojo); }

/* ---------- panel "qué se le está mandando a la IA" ----------
   Sin esto la poda es silenciosa: alguien carga una regla, no aparece en el prompt y no
   hay ninguna pantalla que diga por qué. */

.co-bloque{
  margin-top:var(--gut); border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--s1); padding:14px 16px;
}
.co-bloque-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.co-bloque-head h3{ margin:0; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-2); }

.co-nums{ display:flex; gap:16px; flex-wrap:wrap; font-size:11.5px; color:var(--ink-3); }
.co-num b{ font-family:var(--f-mono); font-size:15px; color:var(--ink); font-weight:600; margin-right:3px; }
.co-num-suave{ color:var(--ink-3); align-self:flex-end; }

.co-barra{ height:4px; border-radius:var(--r-xs); background:var(--s3); margin:9px 0 10px; overflow:hidden; }
.co-barra i{ display:block; height:100%; background:var(--turquesa); }

.co-podadas{ font-size:11.5px; color:var(--ink-3); line-height:1.5; }
.co-podadas.hay{ color:var(--ambar-ink); }

.co-md{
  font-family:var(--f-mono); font-size:11px; line-height:1.5; color:var(--ink-2);
  white-space:pre-wrap; word-break:break-word; margin:8px 0 0;
  max-height:340px; overflow:auto;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--s2); padding:10px 12px;
}

/* ---------- campos del drawer ---------- */

/* De qué pieza salió lo que se está cargando. Es la prueba visible de que el gancho vino
   precargado y no lo tipeó nadie. */
.co-ctx{
  font-size:11px; color:var(--turquesa-ink); background:var(--turquesa-dim);
  border:1px solid var(--turquesa-line); border-radius:var(--r-sm);
  padding:6px 10px; margin-bottom:12px;
}
.co-ctx[hidden]{ display:none; }

.co-req{
  font-size:9px; letter-spacing:.06em; color:var(--ambar-ink);
  border:1px solid var(--ambar-dim); border-radius:var(--r-xs); padding:1px 5px; margin-left:6px;
}

.co-ia{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:10px; }
.co-ia .field-hint-fijo{ flex:1 1 200px; margin:0; }

.co-senal{ display:flex; gap:8px; flex-wrap:wrap; }
.co-senal > .field{ flex:1 1 110px; min-width:0; margin-bottom:4px; }

/* Aparece recién cuando quedan pocos caracteres: un contador siempre visible convierte
   "escribí una frase" en "completá 240 caracteres". */
.co-cuenta{ float:right; font-family:var(--f-mono); color:var(--ink-3); }
.co-cuenta.apretado{ color:var(--ambar-ink); }

.co-piezas-pick{ display:flex; flex-wrap:wrap; gap:5px; max-height:190px; overflow-y:auto; }
.co-piezas-pick .co-chip{ max-width:100%; }

.co-panel-nota{ font-size:11px; color:var(--ink-3); line-height:1.35; }
.co-panel-nota.propuesta{ color:var(--ambar-ink); }

/* ---------- el botón guardó y hay que verlo ---------- */

/* Guardar desde Contenidos cierra el drawer y no queda dónde poner el aviso: el botón
   mismo confirma. Sin señal, la duda ("¿se guardó?") termina en una carga duplicada. */
.co-marcar.listo{ border-color:var(--turquesa); color:var(--turquesa-ink); }
.co-marcar.listo .co-dot{ background:var(--turquesa); }
.co-marcar[hidden]{ display:none; }