/*
 * KummaraDS — kds-close
 * ============================================================
 * La × unificada de TODO el proyecto. UNA sola definición del efecto delightful:
 * al hover gira 90° + círculo rosa sólido + ícono blanco. Usá .kds-close en código
 * nuevo; las × existentes del DS (drawer, drawer de filtros, buscador) se aliasan acá
 * a la MISMA fórmula para no duplicar. El chip de filtro (.filter-tag i) ya la tiene.
 * ============================================================
 */
.kds-close,
.kds-drawer__x,
.kds-list-toolbar__drawer-x,
.search-bar .search-clear {
    display: inline-grid;
    place-items: center;
    width: 1.625rem;
    height: 1.625rem;
    /* La x vive dentro de heads flex (drawer, cajon de filtros, buscador). Sin esto el
       algoritmo flex la aplasta cuando el titulo y las acciones piden lugar: medido, se
       achicaba a 17x26, 14x26 y hasta 10x26 segun el ancho, y como el radio es 50% dejaba
       de ser un circulo y se veia como un ovalo. Van los dos juntos porque min-width:auto
       es lo que le permite encogerse por debajo de su ancho declarado. */
    flex: 0 0 1.625rem;
    min-width: 1.625rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ds-text-muted, #606060);
    font-size: .9rem;
    line-height: 1;
    cursor: pointer;
    transition: background .14s ease, color .14s ease, transform .14s ease;
}
.kds-close:hover,
.kds-drawer__x:hover,
.kds-list-toolbar__drawer-x:hover,
.search-bar .search-clear:hover {
    background: var(--color-rose, #E6607B);
    color: #fff;
    transform: rotate(90deg);
}

/* Buscador: la × va posicionada dentro del input; se centra por alto fijo (26px) SIN
   transform, así el rotate del hover no la descoloca. Oculta hasta que hay texto. */
.search-bar .search-clear {
    position: absolute;
    right: .375rem;
    top: calc(50% - .8125rem);
    z-index: 5;
    display: none;
    font-size: .8rem;
}
.search-bar.has-value .search-clear { display: inline-grid; }