/* ============================================================================
   suite-actions.css — popovers/modales/toasts de las acciones Guardar / Compartir
   / Alerta de las suites SEIA y SNIFA (spec cableado-acciones-suites §4).
   Autocontenido y con fallbacks de tokens para servir a ambos design systems
   (seia-suite.css y sma-suite.css). Vanilla, sin Alpine ni Tailwind.
   ============================================================================ */

.sa-pop {
  position: fixed;
  z-index: 200;
  width: 268px;
  max-width: calc(100vw - 24px);
  background: #fff;
  border: 1px solid var(--hairline, #e6e8ec);
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.08);
  font-size: 13px;
  color: var(--ink-1, #1f2937);
  overflow: hidden;
  display: none;
}
.sa-pop.open { display: block; }

.sa-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline, #eef0f3);
}
.sa-pop-title {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-4, #64748b);
}
.sa-pop-close {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--ink-4, #94a3b8);
  padding: 2px;
  line-height: 0;
  border-radius: 4px;
}
.sa-pop-close:hover { color: var(--ink-1, #475569); background: var(--wash, #f1f5f9); }

.sa-scroll { max-height: 244px; overflow-y: auto; padding: 4px 0; }

.sa-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink-1, #1f2937);
}
.sa-row:hover { background: var(--wash, #f8fafc); }
.sa-row:disabled { opacity: 0.5; cursor: default; }
.sa-row .sa-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; background: var(--teal-600, #0d9488); }
.sa-row .sa-lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.sa-row .sa-tick { width: 15px; height: 15px; flex: 0 0 auto; color: var(--teal-700, #0f766e); }
.sa-row .sa-tick.off { color: var(--ink-6, #cbd5e1); }
.sa-row.sa-biblio { border-bottom: 1px solid var(--hairline, #eef0f3); }

.sa-pop-foot {
  padding: 8px 12px;
  border-top: 1px solid var(--hairline, #eef0f3);
}
.sa-pop-foot a, .sa-link {
  color: var(--teal-700, #0f766e);
  font-size: 11.5px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.sa-pop-foot a:hover, .sa-link:hover { text-decoration: underline; }

.sa-note { padding: 14px 12px; text-align: center; color: var(--ink-4, #64748b); font-size: 12px; }
.sa-note.err { color: #b91c1c; }

/* Copiar link + campos de compartir */
.sa-body { padding: 10px 12px; }
.sa-copy {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--hairline, #e2e8f0);
  border-radius: 8px;
  background: var(--wash, #f8fafc);
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink-2, #334155);
}
.sa-copy:hover { background: #eef2f7; }
.sa-copy.done { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.sa-copy svg { width: 15px; height: 15px; flex: 0 0 auto; }

.sa-field {
  width: 100%;
  border: 1px solid var(--hairline, #e2e8f0);
  border-radius: 7px;
  padding: 7px 9px;
  font: inherit;
  font-size: 12.5px;
  margin-top: 8px;
  color: var(--ink-1, #1f2937);
}
.sa-field:focus { outline: none; border-color: var(--teal-500, #14b8a6); }
textarea.sa-field { resize: vertical; min-height: 46px; }

.sa-btn {
  width: 100%;
  margin-top: 8px;
  padding: 8px 12px;
  border: 0;
  border-radius: 7px;
  background: var(--teal-600, #0d9488);
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.sa-btn:hover { background: var(--teal-700, #0f766e); }
.sa-btn:disabled { opacity: 0.6; cursor: default; }
.sa-btn.ghost { background: none; color: var(--ink-3, #475569); border: 1px solid var(--hairline, #e2e8f0); }
.sa-btn.ghost:hover { background: var(--wash, #f8fafc); }

.sa-divider { height: 1px; background: var(--hairline, #eef0f3); margin: 10px 0; }

.sa-checkline { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; cursor: pointer; }
.sa-checkline input { accent-color: var(--teal-600, #0d9488); margin-top: 1px; }
.sa-checkline span { font-size: 12.5px; display: flex; flex-direction: column; }
/* §16b.4: sub-línea con el alcance de "documentos nuevos" (orígenes cubiertos). */
.sa-checkhint { font-size: 11px; color: var(--ink-4, #94a3b8); line-height: 1.35; margin-top: 1px; }
.sa-select { width: 100%; margin-top: 6px; padding: 7px 9px; border: 1px solid var(--hairline, #e2e8f0); border-radius: 7px; font: inherit; font-size: 12.5px; background: #fff; }
/* Opción paga bloqueada dentro del popover: el enlace de abajo es el touchpoint
   del wall (la <option disabled> no puede serlo — no emite click). */
.sa-upsell { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 600; color: var(--teal-700, #0f766e); text-align: left; cursor: pointer; }
.sa-upsell:hover { text-decoration: underline; }

/* ---- Alta inline del picker de colecciones (coleccion-picker.js) ----------
   Vive acá, con el resto del popover, porque es parte del picker canónico: las
   dos superficies que lo usan (suites y Mi espacio) cargan esta hoja. Hereda la
   fila de su superficie (.sa-row o .me-coll-opt) y solo agrega lo propio. */
.cp-nueva { color: var(--teal-700, #0f766e); font-weight: 600; }
.cp-nueva .cp-plus { width: 13px; height: 13px; flex: 0 0 auto; }
.cp-nueva .cp-lbl { flex: 1 1 auto; text-align: left; }
.cp-nueva.cp-editando { cursor: default; }
.cp-input { flex: 1 1 auto; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-weight: 500; color: var(--ink-2, #1e293b); }
.cp-input:disabled { opacity: 0.6; }
/* Confirmar el alta. Enter es el atajo; este botón es la affordance visible —
   sin él, nada en pantalla decía cómo se cierra el nombre. */
.cp-ok {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 0;
  border-radius: 6px;
  background: var(--teal-600, #0d9488);
  color: #fff;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}
.cp-ok svg { width: 12px; height: 12px; }
.cp-ok:hover:not(:disabled) { background: var(--teal-700, #0f766e); }
.cp-ok:disabled { background: var(--ink-6, #cbd5e1); cursor: default; }
.cp-vacio { padding: 10px 12px; font-size: 12px; color: var(--ink-4, #94a3b8); }

/* Modal (compartir bulk) */
.sa-scrim {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(15, 23, 42, 0.28);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
.sa-scrim.open { display: flex; }
.sa-modal {
  width: 380px;
  max-width: calc(100vw - 24px);
  background: #fff;
  border-radius: var(--radius-lg, 14px);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3);
  overflow: hidden;
}
.sa-modal-head { padding: 14px 16px; border-bottom: 1px solid var(--hairline, #eef0f3); font-weight: 600; font-size: 14px; color: var(--ink-1, #1f2937); }
.sa-modal-body { padding: 14px 16px; }
.sa-modal-body p { font-size: 12.5px; color: var(--ink-4, #64748b); margin: 0 0 6px; }

/* Toast */
.sa-toast-wrap {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
/* El bulk bar ocupa exactamente este lugar (fixed, bottom:24px, centrado) y el
   toast tiene más z-index: sin esto, el aviso de "2 guardados" tapa la barra
   desde la que se guardó. Con selección activa, el toast se apila encima. */
body.bulk-active .sa-toast-wrap { bottom: 76px; }
.sa-toast {
  background: #0f172a;
  color: #fff;
  font-size: 12.5px;
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.3);
  max-width: 360px;
  pointer-events: auto;
  animation: sa-toast-in 0.16s ease-out;
}
.sa-toast a { color: #7dd3fc; font-weight: 600; text-decoration: none; }
.sa-toast a:hover { text-decoration: underline; }
.sa-toast.err { background: #7f1d1d; }
@keyframes sa-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .sa-toast { animation: none; }
}

/* ===========================================================================
   Alertas en buscadores (flag alertas_buscador) — builder del mockup
   docs/diseño/alertas-buscadores.html sección B.
   Vive acá y NO inyectado desde JS porque la campana debe verse bien en el
   PRIMER render, sin click previo; y acá porque este archivo es el único CSS
   que cargan las DOS suites (seia/suite/base.html y sma/suite/listado_base.html).

   Reusa primitivos existentes en vez de duplicarlos:
   - campana        -> .filt-help-btn (seia-suite.css / sma-listados.css)
   - caja del modal -> .sa-scrim / .sa-modal / .sa-modal-head / .sa-modal-body
   - pill de tier   -> .tier-pill.bas (cada suite le da su propio look)
   - CTA            -> .btn.btn-primary.btn-sm
   - avisos         -> .sa-toast
   Acá sólo lo que no existe en la suite: el chip de opción y el layout de campos.
   =========================================================================== */

.abx-scrim { overflow-y: auto; padding: 8vh 16px 24px; align-items: flex-start; }
.sa-modal.abx { width: 520px; display: flex; flex-direction: column; max-height: calc(100vh - 12vh - 24px); }

/* Sticky: el eyebrow tiene que acompañar todo el scroll del formulario. Un
   builder con 4 campos abiertos empuja el head fuera de vista, y editando desde
   Mi espacio ese head es lo único que dice qué alerta se está tocando. */
.abx-head { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 1; background: var(--surface, #fff); border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0; }
.abx-head > svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--teal-700, #0f766e); }
/* Capa de la entidad en el eyebrow del builder. El color y la forma los pone
   `.chip-capa`; acá queda solo lo posicional, porque el eyebrow es texto en
   línea y el chip necesita separarse y alinearse a la tipografía del título. */
.abx-fuente { margin-left: 8px; vertical-align: 1px; }
.abx-plan { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-4, #64748b); margin-left: auto; }
.abx-x { border: 0; background: none; padding: 2px; line-height: 0; cursor: pointer; color: var(--ink-4, #94a3b8); border-radius: var(--radius-sm, 4px); }
.abx-x:hover { color: var(--ink-2, #475569); background: var(--wash, #f1f5f9); }

.abx-body { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.abx-lbl { font-size: 11px; font-weight: 600; color: var(--ink-3, #475569); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }

/* Chip de opción (.opt/.opt-row del mockup). Nombrado abx-* porque `.opt` ya
   designa OTRO componente (la tarjeta de opción de mi-espacio.css). */
.abx-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.abx-opt {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 11px;
  border: 1px solid var(--hairline-strong, rgba(15, 23, 42, 0.14));
  border-radius: var(--radius-full, 9999px);
  background: var(--surface, #fff);
  font: inherit; font-size: 12px; color: var(--ink-2, #1e293b);
  cursor: pointer;
}
.abx-opt:hover { border-color: var(--teal-300, #5eead4); }
.abx-opt.on { background: var(--teal-50, #f0fdfa); border-color: var(--teal-300, #5eead4); color: var(--teal-700, #0f766e); font-weight: 500; }
.abx-opt.locked { opacity: 0.55; border-style: dashed; }
.abx-opt.locked:hover { border-color: var(--hairline-strong, rgba(15, 23, 42, 0.14)); }
/* Campo bloqueado = touchpoint del waiting list wall (data-waitlist en el
   wrapper): todo el bloque es clickeable — candado, pill, chips e input. */
.abx-field-locked, .abx-field-locked .abx-opt.locked, .abx-field-locked .abx-input { cursor: pointer; }
.abx-field-locked:hover .abx-lbl { color: var(--teal-700, #0f766e); }
.abx-opt .abx-lock { width: 11px; height: 11px; flex: 0 0 auto; color: var(--ink-5, #94a3b8); }
.abx-opt.abx-add { border-style: dashed; color: var(--ink-3, #475569); }
.abx-opt.abx-add[aria-expanded="true"] { border-color: var(--teal-600, #0d9488); color: var(--teal-700, #0f766e); border-style: solid; }
.abx-opt:focus-visible { outline: 2px solid var(--teal-700, #0f766e); outline-offset: 1px; }

/* Panel "+ agregar": buscador de valores para listas largas. */
.abx-picker { margin-top: 8px; border: 1px solid var(--hairline, rgba(15, 23, 42, 0.08)); border-radius: var(--radius-md, 6px); background: var(--surface, #fff); overflow: hidden; }
.abx-picker[hidden] { display: none; }
.abx-picker input[type="search"] { width: 100%; height: 30px; padding: 0 10px; border: 0; border-bottom: 1px solid var(--hairline, rgba(15, 23, 42, 0.08)); font: inherit; font-size: 12px; color: var(--ink-2, #1e293b); }
.abx-picker input[type="search"]:focus { outline: none; border-bottom-color: var(--teal-600, #0d9488); }
.abx-picklist { max-height: 168px; overflow-y: auto; }
.abx-pick { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 12px; color: var(--ink-2, #1e293b); cursor: pointer; }
.abx-pick:hover { background: var(--wash, #f8fafc); }
.abx-pick input { accent-color: var(--teal-600, #0d9488); }
.abx-pick[hidden] { display: none; }
.abx-empty { padding: 8px 10px; font-size: 11.5px; color: var(--ink-5, #94a3b8); }

/* ---------------------------------------------------------------------------
   Encabezado de sección dentro de una lista de opciones scrolleable.
   PRIMITIVO ÚNICO de las dos superficies que ofrecen el mismo catálogo en
   secciones: el embudo de una columna (.cp-opts de las suites SEIA/SNIFA) y el
   checklist "+ agregar" de un campo del builder (.abx-picklist). Este archivo lo
   cargan ambos shells, así que la definición vive una sola vez.
   Sticky porque la lista scrollea dentro de un popover bajo: al tercer scroll el
   título salía de cuadro y "91" quedaba sin decir de qué reglamento es, que es
   justo lo que el encabezado existe para responder. Fondo opaco: las opciones
   pasan por debajo. --------------------------------------------------------- */
.optgroup-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--hairline, rgba(15, 23, 42, 0.08));
  padding: 7px 10px 5px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-4, #64748b);
}

.abx-input { width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--hairline-strong, rgba(15, 23, 42, 0.14)); border-radius: var(--radius-md, 6px); font: inherit; font-size: 12.5px; color: var(--ink-2, #1e293b); }
.abx-input:focus { outline: none; border-color: var(--teal-600, #0d9488); }
.abx-input:disabled { background: var(--wash, #f8fafc); color: var(--ink-5, #94a3b8); cursor: not-allowed; }

.abx-note { font-size: 11.5px; color: var(--ink-4, #64748b); display: flex; align-items: flex-start; gap: 7px; background: var(--surface-muted, #f8fafc); border: 1px solid var(--hairline, rgba(15, 23, 42, 0.08)); border-radius: var(--radius-md, 6px); padding: 8px 10px; }
.abx-note svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; }

/* Grupo de campos obligatorio (§9.10) — composición del field wrapper del DS
   (§3.29: label + hint): encabezado que nombra la regla ("elige al menos uno")
   + ayuda con la consecuencia de no filtrar. Envuelve SOLO los campos de
   `requiere_alguno`; los refinamientos opcionales (Región) quedan fuera. */
.abx-group { border: 1px solid var(--hairline-strong, rgba(15, 23, 42, 0.14)); border-radius: var(--radius-md, 6px); background: var(--surface-muted, #f8fafc); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 12px; }
.abx-group-head { display: flex; flex-direction: column; gap: 3px; }
.abx-group-title { font-size: 11px; font-weight: 600; color: var(--ink-2, #1e293b); }
.abx-group-help { font-size: 11px; color: var(--ink-4, #64748b); }

.abx-foot { padding: 12px 16px; border-top: 1px solid var(--hairline, rgba(15, 23, 42, 0.08)); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.abx-quota { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--ink-4, #64748b); white-space: nowrap; }
.abx-foot .btn { margin-left: auto; }
/* Estado disabled del CTA (DS §3.1: opacity 50% + not-allowed). Va acá y NO en
   el `.btn` de las suites: `sma-suite.css` se carga sin scope en Mi espacio, y
   ahí el preview de una colección publicada usa botones `disabled` que deben
   verse como los de la página publicada (spec biblioteca v4 §9.6). */
.abx-foot .btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Hint del CTA deshabilitado (§9.10): línea propia bajo el botón, alineada a
   él — el tooltip solo no basta y el motivo inline competía con la quota. */
.abx-cta-hint { flex: 0 0 100%; font-size: 11px; color: var(--ink-4, #64748b); text-align: right; margin-top: -2px; }
.abx-cta-hint[hidden] { display: none; }

/* Typeahead del campo Titular (§9.2): mismo look del picker, ítems botón. */
.abx-ta .abx-picklist { max-height: 200px; }
.abx-ta-item { display: block; width: 100%; text-align: left; border: 0; background: none; font: inherit; }

.abx-upsell { border-top: 1px solid var(--hairline, rgba(15, 23, 42, 0.08)); background: var(--info-50, #eff6ff); padding: 9px 16px; font-size: 11.5px; color: var(--info-700, #1d4ed8); display: flex; align-items: center; gap: 7px; }
.abx-upsell svg { width: 13px; height: 13px; flex-shrink: 0; }
.abx-upsell a { font-weight: 600; text-decoration: underline; color: inherit; margin-left: auto; white-space: nowrap; }

@media (max-width: 560px) {
  .sa-modal.abx { width: 100%; }
  .abx-scrim { padding: 4vh 12px 16px; }
}

/* ---- chips de filtros activos en la toolbar (mockup alertas-buscadores §A) ----
   Va acá y no en seia-suite.css / sma-suite.css porque este es el único CSS que
   cargan LAS DOS suites; esas dos son shells alternativos que nunca conviven, así
   que un componente compartido duplicado ahí se desincroniza. Tokens del DS, cero
   hex hardcodeado. */
/* --- chip de capa (DS §3.34) ------------------------------------------------
   Dice de qué capa de ambi viene un registro: SEIA, SNIFA o Centro Documental.
   Una alerta de "Documentos" y una de "Seguimientos" se ven igual en una lista
   mezclada, y el nombre de la entidad no alcanza para separarlas.

   Criterio de los matices: máxima separación de tono entre las tres capas
   —azul 210°, ámbar 35°, magenta 340°— manteniéndose fuera de tres colores que
   ya significan otra cosa en la suite: el teal de marca (~175°), el rojo de
   peligro y el verde de éxito. Tono 50 de fondo con texto del extremo oscuro de
   la misma familia: contraste sobre AA sin que el chip compita con el dato.

   NO reemplaza las kind pills de entidad: la pill dice QUÉ es el registro
   (documento, fiscalización); el chip de capa dice DE DÓNDE viene. */
.chip-capa {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  padding: 2px 8px; border-radius: var(--radius-full, 999px);
  font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em;
  white-space: nowrap; border: 1px solid transparent;
}
.chip-capa-seia { background: #e6f1fb; color: #0c447c; border-color: #cfe2f5; }
.chip-capa-snifa { background: #faeeda; color: #633806; border-color: #f0dcbb; }
.chip-capa-cd { background: #fbeaf0; color: #72243e; border-color: #f4d3de; }

/* Fila propia bajo la toolbar: dentro de la toolbar, 2+ chips le comían el
   ancho a la caja de búsqueda. El margen va en el chip y no en el contenedor
   para que sin filtros la fila mida cero y no deje un hueco — pero SOLO en la
   toolbar: `.f-chip` suelto (encabezado del drawer de alertas) se descuadraba
   con ese margen heredado, y ese fue el motivo por el que mi-espacio.css llegó
   a tener su propia copia del chip. El primitivo queda limpio; la fila carga
   con su propio truco. */
.f-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.f-chips > .f-chip { margin-top: 10px; }
/* No usar `display:contents` acá: saca los <a> del árbol de accesibilidad en
   Safari/VoiceOver y los chips son el único control para quitar un filtro. */
.f-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 0 10px 0 11px;
  border-radius: var(--radius-full, 9999px);
  background: var(--teal-50, #f0fdfa);
  border: 1px solid var(--teal-300, #5eead4);
  font-size: 12px; font-weight: 500; color: var(--teal-700, #0f766e);
  text-decoration: none; white-space: nowrap; max-width: 260px;
}
a.f-chip:hover { background: var(--teal-100, #ccfbf1); }
/* La etiqueta es contexto, el valor es el dato: el valor manda visualmente. */
.f-chip-k { font-weight: 600; opacity: 0.6; flex-shrink: 0; }
/* El valor es lo único elástico del chip: sin esto, un valor largo ("Comuna:
   Puente Alto, La Florida, Puerto Montt") se salía del contorno redondeado en
   vez de cortarse — `max-width` sin `overflow` no recorta nada. El texto
   completo queda en el `title` de la pieza que envuelve al chip. */
.f-chip-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.f-chip .x { color: var(--teal-600, #0d9488); font-size: 14px; line-height: 1; opacity: 0.75; flex-shrink: 0; }
a.f-chip:hover .x { opacity: 1; }