/* ============================================================
   FEEDBACK · widget de carga + vista de seguimiento
   El widget (botón en la topbar + drawer) se inyecta solo desde feedback.js, así que
   el diff sobre index.html queda en dos líneas. Mismo criterio que panel-crear.css.

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

/* ---------- botón de la topbar ---------- */

.fb-toggle .fb-dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--turquesa); margin-right:7px; vertical-align:middle;
}

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

:root{ --fb-ancho: 420px; }

.fb-panel{
  position:fixed; top:0; right:0; height:100vh; width:min(var(--fb-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);
}
.fb-panel.abierto{ transform:translateX(0); }
@media (prefers-reduced-motion: reduce){
  .fb-panel{ transition:none; }
}
@media (max-width: 520px){
  .fb-panel{ width:100vw; }
}

.fb-head{
  display:flex; align-items:center; gap:10px;
  padding:14px var(--gut); border-bottom:1px solid var(--line);
}
.fb-head h2{ margin:0; font-size:14px; font-weight:600; color:var(--ink); }
.fb-head .fb-cerrar{ margin-left:auto; padding:4px 9px; }

.fb-cuerpo{
  flex:1; overflow-y:auto; padding:var(--gut);
  display:flex; flex-direction:column; gap:12px;
}
.fb-campo{ display:flex; flex-direction:column; gap:5px; }
.fb-campo label{
  font:500 10px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-3);
}
.fb-ayuda{ font-size:11px; line-height:1.4; color:var(--ink-3); margin:0; }

/* ---------- segmentos (prioridad, filtros) ---------- */

.fb-seg{ display:flex; gap:6px; flex-wrap:wrap; }
.fb-seg button{
  font:500 11px/1 var(--f-mono); padding:6px 11px; cursor:pointer;
  background:var(--s2); color:var(--ink-2);
  border:1px solid var(--line); border-radius:20px;
}
.fb-seg button:hover{ border-color:var(--turquesa-line); color:var(--ink); }
.fb-seg button.on{
  background:var(--turquesa-dim); border-color:var(--turquesa-line); color:var(--turquesa-ink);
}

/* ---------- grabación de audio ---------- */

.fb-grabar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fb-grabar .fb-reloj{ font:500 12px/1 var(--f-mono); color:var(--ink-2); }
.fb-rec{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--rojo); margin-right:7px; vertical-align:middle;
  animation:fb-latido 1.1s ease-in-out infinite;
}
@keyframes fb-latido{ 0%,100%{ opacity:1 } 50%{ opacity:.2 } }
.fb-grabar audio{ width:100%; height:34px; }

/* ---------- adjuntar imagen ---------- */

.fb-drop{
  border:1px dashed var(--line); border-radius:var(--r-sm);
  padding:14px; text-align:center; cursor:pointer;
  color:var(--ink-3); font-size:11.5px; background:var(--s2);
}
.fb-drop:hover{ border-color:var(--turquesa-line); color:var(--ink-2); }
.fb-drop.cargado{ padding:8px; color:var(--ink-2); }
.fb-drop img{
  display:block; max-width:100%; max-height:120px; margin:0 auto 6px;
  border-radius:var(--r-xs);
}

.fb-estado{ font-size:11.5px; line-height:1.4; color:var(--ink-3); min-height:15px; }
.fb-estado.err{ color:var(--rojo-ink); }
.fb-estado.ok{ color:var(--turquesa-ink); }

.fb-pie{
  border-top:1px solid var(--line); padding:12px var(--gut); background:var(--s1);
  display:flex; align-items:center; gap:10px;
}
/* .spacer se define una sola vez en /base.css (con .cr-sp, .mk-sp y .fb-spacer como alias). */

/* ---------- vista de seguimiento ---------- */

.fb-toolbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px;
}
.fb-toolbar .fb-conteo{ color:var(--ink-3); font-size:12px; }

.fb-lista{ display:flex; flex-direction:column; gap:10px; }

.fb-card{
  background:var(--s1); border:1px solid var(--line); border-radius:var(--r-md);
  padding:13px 15px; display:flex; flex-direction:column; gap:9px;
}
.fb-card.prio-alta{ border-left:3px solid var(--rojo); }
.fb-card.prio-media{ border-left:3px solid var(--ambar); }
.fb-card.prio-baja{ border-left:3px solid var(--line); }

.fb-card .fb-titulo{
  font-size:14px; font-weight:600; color:var(--ink); line-height:1.3;
  overflow-wrap:anywhere;
}
.fb-card .fb-meta{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font:400 11px/1 var(--f-mono); color:var(--ink-3);
}
.fb-card .fb-detalle{
  font-size:12.5px; line-height:1.5; color:var(--ink-2); white-space:pre-wrap;
  overflow-wrap:anywhere; margin:0;
}
.fb-card .fb-transcripcion{
  font-size:12.5px; line-height:1.5; color:var(--ink-2);
  border-left:2px solid var(--line); padding-left:10px; margin:0;
  overflow-wrap:anywhere;
}
.fb-card .fb-nota{
  font-size:12px; line-height:1.45; color:var(--ink-2);
  background:var(--turquesa-dim); border:1px solid var(--turquesa-line);
  border-radius:var(--r-sm); padding:7px 10px;
}
.fb-card audio{ width:100%; height:34px; }
.fb-card .fb-imagen{
  max-width:220px; border-radius:var(--r-sm); border:1px solid var(--line); display:block;
}
.fb-card .fb-acciones{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

.fb-chip{
  font:500 10px/1 var(--f-mono); padding:3px 7px; border-radius:20px;
  background:var(--s3); color:var(--ink-2); white-space:nowrap;
}
.fb-chip.prio-alta{ background:var(--s3); color:var(--rojo-ink); }
.fb-chip.prio-media{ background:var(--ambar-dim); color:var(--ambar-ink); }
.fb-chip.estado-nuevo{ background:var(--turquesa-dim); color:var(--turquesa-ink); }
.fb-chip.estado-hecho{ background:var(--s3); color:var(--ink-3); }
.fb-chip.pend{ background:var(--ambar-dim); color:var(--ambar-ink); }
.fb-chip.err{ color:var(--rojo-ink); }