.local-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    color: currentColor;
    line-height: 1;
    vertical-align: -0.125em;
}

.local-icon__svg {
    display: block;
    width: 1em;
    height: 1em;
    /* Sin fill aquí a propósito.
       Cada SVG ya trae el suyo: los "outline" vienen con fill="none" y
       stroke="currentColor", y los "filled" con fill="currentColor". Una regla
       CSS gana a un atributo de presentación, así que forzar fill desde aquí
       rellenaba de color sólido todos los iconos de línea — por eso se veían
       como manchas en vez de como contornos. */
}

.icon-button-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: currentColor;
    font: inherit;
    padding: 0;
}

.hour-loader-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    mask: url("/static/core/icons/outline/loader-2.68c7e9388df8.svg") center / contain no-repeat;
    -webkit-mask: url("/static/core/icons/outline/loader-2.68c7e9388df8.svg") center / contain no-repeat;
    animation: local-icon-spin .8s linear infinite;
}

@keyframes local-icon-spin {
    to { transform: rotate(360deg); }
}