/*
 * CBTI Widgets · página Directorio.
 * El markup lleva los estilos en línea del diseño; acá van solo los estados del filtro.
 */

/* Los elementos ocultos por el filtro (tarjetas, invitadas, estado vacío). */
[data-cbtiw-dir] [hidden],
[data-cbtiw-dir] [data-cbtiw-dir-guests][hidden] { display: none !important; }

/* Rubros: en el diseño son el componente Tag (span); acá son botones con el mismo aspecto. */
button.cbti-tag.cbtiw-dir-chip {
	margin: 0; cursor: pointer; line-height: normal; letter-spacing: normal; text-transform: none;
	font-style: normal; box-shadow: none; text-shadow: none;
}
button.cbti-tag.cbtiw-dir-chip:hover,
button.cbti-tag.cbtiw-dir-chip:focus { background: var(--white); color: var(--text-body) !important; }
button.cbti-tag.cbtiw-dir-chip:hover { border-color: var(--navy-800); } /* [DERIVADO] de a.cbti-tag:hover */
/* Tag seleccionado del diseño (selected): fondo azul marino, texto blanco. */
button.cbti-tag.cbtiw-dir-chip[aria-pressed="true"],
button.cbti-tag.cbtiw-dir-chip[aria-pressed="true"]:hover,
button.cbti-tag.cbtiw-dir-chip[aria-pressed="true"]:focus { background: var(--navy-800); border-color: var(--navy-800); color: #fff !important; }
/* Foco del filtro del directorio del diseño (.cbti-chip:focus-visible). */
button.cbti-tag.cbtiw-dir-chip:focus-visible { outline: 3px solid var(--green-500); outline-offset: 2px; }