/* ============================================================================
   panel/assets/modulos/feedback.css — lo que solo usa el módulo Feedback
   ============================================================================
   Tokens de marca.css y panel.css y los componentes comunes (.caja, .btn,
   .pill, .ayuda-*, .campo, .pestanas, .tarjeta, .bloqueo-caja). El desplegable
   es el de assets/desplegable.* (nunca un <select> nativo a la vista). Sin caja
   dentro de caja: dentro de la ficha, el espacio y una línea fina separan. Lo
   único biselado son las .caja (el chip y la ficha), con su contorno completo.
   Poppins 600 por debajo de 32 px; la Dharma solo en el título de la ficha
   (34 px en el panel, como el del manual).
   ========================================================================== */
.fb-ico{display:inline-flex;flex:none;color:var(--texto-3)}
.fb-ico svg{width:1.1rem;height:1.1rem}
.btn .fb-ico{color:inherit;margin-right:var(--esp-2)}

/* ── La barra y los filtros ──────────────────────────────────────────────── */
.fb-barra{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-3);margin-bottom:var(--esp-3)}
.fb-buscar{flex:1 1 var(--campo-m);min-width:0;max-inline-size:var(--campo-l);min-height:var(--alto-control);padding:0 var(--esp-3);
  font:inherit;font-size:var(--tipo-descripcion);color:var(--texto-1);background:var(--sup-0, var(--ink));
  border:1px solid var(--linea-suave);border-radius:0}
.fb-buscar:hover{border-color:var(--texto-3)}
.fb-buscar:focus{outline:none;border-color:var(--yellow)}
.fb-selectores{display:flex;flex-wrap:nowrap;gap:var(--esp-3);flex:0 1 auto}
.fb-selector{flex:0 1 auto;inline-size:calc(var(--campo-s) * 1.6);min-width:calc(var(--campo-s) * 1.25)}
.fb-selector[hidden]{display:none}
.fb-actualizar{margin-left:auto}
.fb-btn-texto{min-width:0}

/* Las pestañas de estado, con su cuenta: en estrecho se deslizan y un
   degradado en el borde derecho avisa de que siguen. */
.fb-filtros{display:flex;gap:var(--esp-1);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--linea-suave);margin-bottom:var(--esp-rejilla)}
.fb-filtros::-webkit-scrollbar{display:none}
@media (max-width:56rem){
  .fb-filtros{padding-inline-end:var(--esp-bloque);
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--esp-bloque)),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - var(--esp-bloque)),transparent)}
}
.fb-filtros .pestana{letter-spacing:.06em}
.fb-n{font-variant-numeric:tabular-nums}

/* ── Los chips ───────────────────────────────────────────────────────────── */
.fb-lista{list-style:none;margin:0;padding:0;display:grid;gap:var(--esp-rejilla);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr))}
.fb-item{min-width:0;display:flex}
.fb-chip{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;--caja-fondo:var(--sup-1);
  transition:transform var(--t-medio) var(--curva)}
.fb-chip.es-nuevo{--filo-color:var(--borde-vivo, var(--yellow))}
.fb-chip.es-guardando{opacity:.7}
.fb-chip-abrir{display:flex;flex-direction:column;align-items:stretch;gap:var(--esp-2);flex:1 1 auto;min-width:0;
  padding:var(--esp-4) var(--esp-4) var(--esp-3);background:none;border:0;cursor:pointer;text-align:left;font:inherit;color:inherit;
  transition:background var(--t-rapido) var(--curva)}
.fb-chip-abrir:hover{background:var(--velo-1)}
/* El foco va dentro del chip: el clip-path de la .caja se comería un contorno de fuera. */
.fb-chip-abrir:focus-visible{outline:2px solid var(--yellow);outline-offset:-4px}
.fb-chip-cab{display:flex;align-items:center;gap:var(--esp-2);min-width:0}
.fb-chip-quien{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;line-height:1.25}
.fb-nombre{font-family:var(--fuente-titular);font-weight:var(--peso-titular);font-size:var(--tipo-cuerpo);color:var(--texto-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-arroba{font-size:var(--tipo-leyenda);color:var(--texto-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-fecha{flex:none;font-size:var(--tipo-leyenda);color:var(--texto-3);white-space:nowrap}
.fb-chip-texto{font-size:var(--tipo-descripcion);line-height:1.5;color:var(--texto-2);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fb-chip-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--esp-3);font-size:var(--tipo-leyenda);color:var(--texto-3)}
.fb-con-nota{display:inline-flex;align-items:center;gap:.3rem;color:var(--yellow)}
.fb-con-nota .fb-ico{color:inherit}
.fb-con-nota .fb-ico svg{width:.9rem;height:.9rem}
.fb-num{margin-left:auto;font-variant-numeric:tabular-nums}
/* Los controles: dos desplegables que se apilan si el chip es estrecho. */
.fb-chip-controles{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:var(--esp-2);
  padding:var(--esp-3) var(--esp-4) var(--esp-4);border-top:1px solid var(--linea-suave);align-items:center}
.fb-chip-controles.es-lectura{display:flex;flex-wrap:wrap;gap:var(--esp-2)}

.fb-avatar{width:1.75rem;height:1.75rem;border-radius:50%;object-fit:cover;flex:none;background:var(--sup-2, var(--surface))}
.fb-avatar-grande{width:2.75rem;height:2.75rem}
.fb-sin-avatar{display:inline-flex;align-items:center;justify-content:center;font-size:var(--tipo-leyenda);font-weight:600;color:var(--texto-2)}
.fb-avatar-grande.fb-sin-avatar{font-size:var(--tipo-cuerpo)}

.fb-zona{min-width:0}
.fb-mas{display:flex;justify-content:center;margin-top:var(--esp-bloque)}
.fb-enlace{color:var(--yellow);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.fb-enlace:hover{color:var(--texto-1)}
.fb-enlace:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}

/* ── La ficha: el panel lateral (copia de `.manual`, panel.css) ──────────────
   Un <dialog> modal pegado a la derecha, de alto completo y nunca de ancho
   completo: siempre queda una franja del panel a la vista. Es una `.caja`: el
   contorno completo sale de ahí. No hace scroll él mismo (el relleno del
   ::before se quedaría atrás): desplaza su cuerpo. */
.fb-ficha{
  position:fixed;inset:0 0 0 auto;margin:0;padding:0;border:0;
  width:min(36rem, calc(100vw - 3rem));height:100dvh;max-height:none;max-width:none;
  color:var(--texto-1);--caja-fondo:var(--sup-1);
  display:none;flex-direction:column;overflow:hidden;isolation:isolate;
}
.fb-ficha[open]{display:flex;animation:fb-entra var(--t-lento) var(--curva)}
.fb-ficha::backdrop{background:rgba(23,17,13,.72)}
@keyframes fb-entra{from{translate:2rem 0;opacity:.4}}
@media (prefers-reduced-motion:reduce){ .fb-ficha[open]{animation:none} }
.fb-ficha-cabeza{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--esp-4);
  padding:calc(var(--esp-caja) * .75 + env(safe-area-inset-top, 0px)) var(--esp-caja) var(--esp-4);
  border-bottom:1px solid var(--line);
}
.fb-ficha-textos{min-width:0}
.fb-ficha-ante{margin-bottom:var(--esp-2)}
.fb-ficha-titulo{
  font-family:var(--fuente-subtitulo);font-weight:700;letter-spacing:calc(.01em + var(--tracking-subtitulo));
  font-size:var(--tipo-subtitulo);line-height:1;text-transform:uppercase;color:var(--texto-1);
}
.fb-ficha-cerrar{flex:0 0 auto;gap:var(--esp-2)}
.fb-ficha-cerrar svg{width:1.25rem;height:1.25rem}
.fb-ficha-cuerpo{
  flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:var(--esp-4);
  padding:var(--esp-4) var(--esp-caja) calc(var(--esp-bloque) + env(safe-area-inset-bottom, 0px));
  font-size:var(--tipo-cuerpo);line-height:1.6;color:var(--texto-2);
}
.fb-ficha-cuerpo:focus{outline:none}
.fb-bloque{display:flex;flex-direction:column;gap:var(--esp-3);min-width:0}
.fb-bloque + .fb-bloque{border-top:1px solid var(--linea-suave);padding-top:var(--esp-4)}
.fb-bloque-titulo{margin:0;font-family:inherit;font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--texto-3);line-height:1.2}
.fb-bloque-estado{gap:var(--esp-2)}
.fb-ficha-controles{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--esp-3)}
.fb-ficha-linea{display:flex;flex-wrap:wrap;gap:var(--esp-2)}
.fb-contenido{margin:0;color:var(--texto-1);font-size:var(--tipo-cuerpo);line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;max-width:62ch}
.fb-nota{margin:0;font-size:var(--tipo-descripcion);color:var(--texto-3);line-height:1.5;max-width:62ch}
.fb-nota[hidden]{display:none}
.fb-ficha-quien{display:flex;align-items:center;gap:var(--esp-3);min-width:0}
.fb-ficha-nombres{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.fb-ficha-nombres b{font-family:var(--fuente-titular);font-weight:var(--peso-titular);color:var(--texto-1);overflow-wrap:anywhere}
.fb-ficha-enlaces{display:flex;flex-wrap:wrap;gap:var(--esp-2) var(--esp-4);font-size:var(--tipo-descripcion)}
.fb-datos{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--esp-2) var(--esp-4);margin:0;font-size:var(--tipo-descripcion)}
.fb-datos dt{color:var(--texto-3)}
.fb-datos dd{margin:0;color:var(--texto-1);overflow-wrap:anywhere}
.fb-campo-nota textarea{max-inline-size:none;width:100%}
.fb-ultimo{margin-top:calc(-1 * var(--esp-1))}

/* ── Ayuda, interruptores y formulario de categorías ─────────────────────── */
.fb-ayuda{display:inline-flex}
.fb-rotulo{position:relative;display:flex;align-items:center;gap:var(--esp-2)}
.fb-campo{gap:var(--esp-2)}
.fb-interruptor{display:inline-flex;align-items:center;gap:var(--esp-3);cursor:pointer;font-size:var(--tipo-descripcion);color:var(--texto-2);min-height:var(--btn-sm-alto)}
.fb-interruptor:has(input:checked){color:var(--texto-1)}
.fb-interruptor:has(input:disabled){opacity:.6;cursor:default}
.fb-aviso-boton{color:var(--yellow)}
.fb-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:var(--esp-rejilla)}
.fb-categoria-en{margin:0;font-size:var(--tipo-descripcion);color:var(--texto-2)}
.fb-categoria.es-inactiva{opacity:.75}

@media (max-width:640px){
  /* La búsqueda y «Actualizar» (solo el icono) comparten fila; los filtros, debajo. */
  .fb-barra{gap:var(--esp-2)}
  .fb-buscar{max-inline-size:none;flex:1 1 0;order:1}
  .fb-actualizar{margin-left:0;flex:none;padding-inline:var(--esp-3);order:2}
  .fb-actualizar .fb-btn-texto{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .fb-actualizar .fb-ico{margin-right:0}
  .fb-selectores{flex:1 1 100%;flex-wrap:wrap;order:3}
  .fb-selector{flex:1 1 calc(var(--campo-s) * 0.9);inline-size:auto;min-width:0}
  .fb-chip-abrir{padding:var(--esp-3) var(--esp-3) var(--esp-2)}
  .fb-chip-controles{padding:var(--esp-2) var(--esp-3) var(--esp-3)}
  .fb-datos{grid-template-columns:minmax(0,1fr)}
  .fb-datos dd{margin-bottom:var(--esp-2)}
}
@media (max-width:520px){
  .fb-selector{flex-basis:100%}
  /* La lista del desplegable es una hoja abajo a todo el ancho de la pantalla; dentro de la ficha
     (que deja una franja a la vista) se queda del ancho de la ficha: si no, el diálogo la recorta. */
  .fb-ficha .dp-pop.dp-hoja{left:auto;right:0;width:calc(100vw - 3rem)}
  .fb-ficha-cabeza{padding-inline:var(--esp-4)}
  .fb-ficha-cuerpo{padding-inline:var(--esp-4)}
}