/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout:is([data-section=asset],[data-section=license],[data-section=accessory],[data-section=consumable]) #inventorySummary {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:minmax(0,1fr) minmax(0,2fr);
    /* Separa elementos vecinos mediante gap. */
    gap:10px;
    /* Define el espacio exterior mediante margin. */
    margin:0 0 12px;
    /* Fija el color del texto mediante color. */
    color:var(--ink)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-stack {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura la cuadrícula mediante grid-template-rows. */
    grid-template-rows:1fr 1fr;
    /* Separa elementos vecinos mediante gap. */
    gap:8px;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary article {
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Define el espacio interior mediante padding. */
    padding:8px 13px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:12px;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line);
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-main {
    /* Pinta el fondo del elemento mediante background. */
    background:color-mix(in srgb,var(--accent-fill) 9%,var(--surface));
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:color-mix(in srgb,var(--accent-fill) 24%,var(--line))
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary h2,#inventorySummary p {
    /* Define el espacio exterior mediante margin. */
    margin:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary h2 {
    /* Configura la tipografía mediante font-size. */
    font-size:.81rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-tile strong {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Configura la tipografía mediante font-size. */
    font-size:1.1rem;
    /* Configura la tipografía mediante font-variant-numeric. */
    font-variant-numeric:tabular-nums;
    /* Controla el contenido que rebasa el contenedor mediante overflow-wrap. */
    overflow-wrap:anywhere
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary p {
    /* Fija el color del texto mediante color. */
    color:var(--muted);
    /* Configura la tipografía mediante font-size. */
    font-size:.72rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-chart {
    /* Define el espacio exterior mediante margin. */
    margin:7px 0 0;
    /* Define el espacio interior mediante padding. */
    padding:0;
    /* Configura esta propiedad visual mediante list-style. */
    list-style:none;
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Separa elementos vecinos mediante gap. */
    gap:5px;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-chart li {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns: minmax(64px,7em) 1fr auto;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Separa elementos vecinos mediante gap. */
    gap:7px;
    /* Configura la tipografía mediante font-size. */
    font-size:.75rem;
    /* Define una variable que otras reglas pueden reutilizar mediante --bar. */
    --bar:var(--accent-fill)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-chart li span {
    /* Controla el contenido que rebasa el contenedor mediante overflow-wrap. */
    overflow-wrap:anywhere
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-chart i {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Pinta el fondo del elemento mediante background. */
    background:color-mix(in srgb,var(--accent-fill) 13%,var(--surface));
    /* Ajusta la altura mediante height. */
    height:7px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:8px;
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:hidden
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-chart i::before {
    /* Define el contenido generado mediante content. */
    content:'';
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Ajusta el ancho mediante width. */
    width:var(--amount);
    /* Ajusta la altura mediante height. */
    height:100%;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--bar);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:inherit
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-chart .is-warning {
    /* Define una variable que otras reglas pueden reutilizar mediante --bar. */
    --bar:#cf8a22
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-chart .is-danger {
    /* Define una variable que otras reglas pueden reutilizar mediante --bar. */
    --bar:#d05467
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-chart .is-neutral {
    /* Define una variable que otras reglas pueden reutilizar mediante --bar. */
    --bar:#869cae
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-availability {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:auto minmax(0,1fr);
    /* Separa elementos vecinos mediante gap. */
    gap:16px;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Define el espacio exterior mediante margin-top. */
    margin-top:7px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-ring {
    /* Ajusta el ancho mediante width. */
    width:74px;
    /* Configura esta propiedad visual mediante aspect-ratio. */
    aspect-ratio:1;
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura esta propiedad visual mediante place-items. */
    place-items:center;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:50%;
    /* Pinta el fondo del elemento mediante background. */
    background:conic-gradient(var(--accent-fill) var(--amount),var(--line) 0)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-ring strong {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura esta propiedad visual mediante place-items. */
    place-items:center;
    /* Ajusta el ancho mediante width. */
    width:80%;
    /* Configura esta propiedad visual mediante aspect-ratio. */
    aspect-ratio:1;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:50%;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Configura la tipografía mediante font-size. */
    font-size:1rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-vertical {
    /* Configura la cuadrícula mediante grid-auto-flow. */
    grid-auto-flow:column;
    /* Configura la cuadrícula mediante grid-auto-columns. */
    grid-auto-columns:1fr;
    /* Configura esta propiedad visual mediante text-align. */
    text-align:center
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-vertical li {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Configura la distribución flexible mediante flex-direction. */
    flex-direction:column;
    /* Separa elementos vecinos mediante gap. */
    gap:3px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-vertical i {
    /* Configura esta propiedad visual mediante order. */
    order:-1;
    /* Ajusta la altura mediante height. */
    height:44px;
    /* Ajusta el ancho mediante width. */
    width:min(60%,34px);
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Alinea los elementos mediante align-items. */
    align-items:end
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-vertical i::before {
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Ajusta la altura mediante height. */
    height:var(--amount)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(max-width:700px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout:is([data-section=asset],[data-section=license],[data-section=accessory],[data-section=consumable]) #inventorySummary {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:minmax(0,1fr)
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #inventorySummary .is-stack {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:repeat(2,minmax(0,1fr));
        /* Configura la cuadrícula mediante grid-template-rows. */
        grid-template-rows:auto
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout:is([data-section=asset],[data-section=license],[data-section=accessory],[data-section=consumable]) #inventorySummary[data-kind]:has(.is-mosaic-metrics) {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));
    /* Define una variable que otras reglas pueden reutilizar mediante --is-assigned. */
    --is-assigned:color-mix(in srgb,var(--accent-fill) 55%,var(--ink));
    /* Define una variable que otras reglas pueden reutilizar mediante --is-available. */
    --is-available:color-mix(in srgb,var(--accent-fill) 40%,var(--surface));
    /* Define una variable que otras reglas pueden reutilizar mediante --is-pending. */
    --is-pending:#cf8a22;
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-mosaic-metrics {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:repeat(2,minmax(0,1fr));
    /* Configura la cuadrícula mediante grid-auto-rows. */
    grid-auto-rows:1fr;
    /* Separa elementos vecinos mediante gap. */
    gap:8px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-mosaic-metrics article,#inventorySummary .is-mosaic-graph {
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 2px 5px color-mix(in srgb,var(--ink) 8%,transparent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-mosaic-metrics article {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Alinea los elementos mediante align-content. */
    align-content:center;
    /* Separa elementos vecinos mediante gap. */
    gap:4px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-mosaic-metrics p:empty {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-mosaic-graph {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura la cuadrícula mediante grid-template-rows. */
    grid-template-rows:auto 1fr auto;
    /* Separa elementos vecinos mediante gap. */
    gap:5px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-mosaic-graph .is-ring,#inventorySummary .is-mosaic-pie {
    /* Ajusta el ancho mediante width. */
    width:60px;
    /* Configura esta propiedad visual mediante aspect-ratio. */
    aspect-ratio:1;
    /* Configura esta propiedad visual mediante place-self. */
    place-self:center;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:50%
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-mosaic-pie {
    /* Pinta el fondo del elemento mediante background. */
    background:conic-gradient(var(--is-assigned) 0 var(--assigned),var(--is-available) var(--assigned) var(--counted),var(--rest) var(--counted) 100%)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-mosaic-legend {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Separa elementos vecinos mediante gap. */
    gap:3px;
    /* Define el espacio exterior mediante margin. */
    margin:0;
    /* Define el espacio interior mediante padding. */
    padding:0;
    /* Configura esta propiedad visual mediante list-style. */
    list-style:none;
    /* Configura la tipografía mediante font-size. */
    font-size:.7rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-mosaic-legend li {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:7px minmax(0,1fr) auto;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Separa elementos vecinos mediante gap. */
    gap:5px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-mosaic-legend i {
    /* Ajusta la altura mediante height. */
    height:7px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:50%;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--line)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-mosaic-legend .is-dot-available {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--accent-fill)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-mosaic-graph:has(.is-mosaic-pie) .is-dot-available {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--is-available)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-mosaic-legend .is-dot-assigned {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--is-assigned)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-mosaic-legend .is-dot-pending {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--is-pending)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(max-width:850px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout:is([data-section=asset],[data-section=license],[data-section=accessory],[data-section=consumable]) #inventorySummary[data-kind]:has(.is-mosaic-metrics) {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #inventorySummary .is-mosaic-metrics {
        /* Configura la cuadrícula mediante grid-column. */
        grid-column:1/-1
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-mosaic-metrics article {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Separa elementos vecinos mediante gap. */
    gap:12px;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:78px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-mosaic-metrics .is-depleted {
    /* Configura la cuadrícula mediante grid-column. */
    grid-column:1/-1;
    /* Pinta el fondo del elemento mediante background. */
    background:color-mix(in srgb,var(--accent-fill) 9%,var(--surface))
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-mosaic-metrics .is-alert {
    /* Pinta el fondo del elemento mediante background. */
    background:color-mix(in srgb,#cf8a22 15%,var(--surface));
    /* Define una variable que otras reglas pueden reutilizar mediante --is-icon. */
    --is-icon:#ac6417
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-metric-icon {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura esta propiedad visual mediante place-items. */
    place-items:center;
    /* Configura la distribución flexible mediante flex. */
    flex:0 0 38px;
    /* Ajusta la altura mediante height. */
    height:38px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:13px;
    /* Fija el color del texto mediante color. */
    color:var(--is-icon,var(--accent));
    /* Pinta el fondo del elemento mediante background. */
    background:color-mix(in srgb,currentColor 12%,var(--surface));
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 3px 8px color-mix(in srgb,currentColor 23%,transparent);
    /* Suaviza el cambio entre estados mediante transition. */
    transition:transform .2s
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-metric-icon svg {
    /* Ajusta el ancho mediante width. */
    width:22px;
    /* Ajusta la altura mediante height. */
    height:22px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-tile:hover .is-metric-icon {
    /* Transforma la geometría visual mediante transform. */
    transform:translateY(-3px) rotate(-6deg)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-mosaic-graph {
    /* Configura la cuadrícula mediante grid-template. */
    grid-template:1fr/minmax(0,1fr) minmax(0,1fr);
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Separa elementos vecinos mediante gap. */
    gap:9px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:17px;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 4px 14px color-mix(in srgb,var(--accent-fill) 18%,transparent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-mosaic-copy {
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-mosaic-copy h2 {
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:10px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-big-ring,#inventorySummary .is-mosaic-pie {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura esta propiedad visual mediante place-items. */
    place-items:center;
    /* Controla la posición del elemento mediante position. */
    position:relative;
    /* Configura esta propiedad visual mediante place-self. */
    place-self:center;
    /* Ajusta el ancho mediante width. */
    width:min(100%,136px);
    /* Configura esta propiedad visual mediante aspect-ratio. */
    aspect-ratio:1;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:50%;
    /* Configura esta propiedad visual mediante filter. */
    filter:drop-shadow(0 4px 6px color-mix(in srgb,var(--accent-fill) 25%,transparent));
    /* Aplica una animación mediante animation. */
    animation:is-chart-enter .36s ease-out
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-big-ring svg {
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Controla la posición del elemento mediante position. */
    position:absolute;
    /* Configura esta propiedad visual mediante inset. */
    inset:0;
    /* Transforma la geometría visual mediante transform. */
    transform:rotate(-90deg)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-big-ring circle {
    /* Configura esta propiedad visual mediante fill. */
    fill:none;
    /* Configura esta propiedad visual mediante stroke. */
    stroke:var(--line);
    /* Configura esta propiedad visual mediante stroke-width. */
    stroke-width:10
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-big-ring .is-ring-progress {
    /* Configura esta propiedad visual mediante stroke. */
    stroke:var(--accent-fill);
    /* Configura esta propiedad visual mediante stroke-linecap. */
    stroke-linecap:round;
    /* Aplica una animación mediante animation. */
    animation:is-draw .55s ease-out
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-big-ring strong,#inventorySummary .is-mosaic-pie strong {
    /* Ajusta la superposición mediante z-index. */
    z-index:1;
    /* Configura la tipografía mediante font-size. */
    font-size:clamp(.8rem,1.5vw,1.3rem)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-mosaic-pie strong {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:20px;
    /* Define el espacio interior mediante padding. */
    padding:3px 7px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@keyframes is-chart-enter {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    from {
        /* Regula la transparencia mediante opacity. */
        opacity:.45;
        /* Configura esta propiedad visual mediante scale. */
        scale:.86
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@keyframes is-draw {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    from {
        /* Configura esta propiedad visual mediante stroke-dasharray. */
        stroke-dasharray:0 100
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(max-width:530px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout:is([data-section=asset],[data-section=license],[data-section=accessory],[data-section=consumable]) #inventorySummary[data-kind]:has(.is-mosaic-metrics) {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:minmax(0,1fr)
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(prefers-reduced-motion:reduce) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #inventorySummary .is-metric-icon,#inventorySummary .is-big-ring,#inventorySummary .is-mosaic-pie,#inventorySummary .is-big-ring .is-ring-progress {
        /* Aplica una animación mediante animation. */
        animation:none;
        /* Suaviza el cambio entre estados mediante transition. */
        transition:none
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-mosaic-bars {
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Aplica una animación mediante animation. */
    animation:is-chart-enter .36s ease-out
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-mosaic-bars .is-chart:not(.is-vertical) li {
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:minmax(0,1fr) auto;
    /* Separa elementos vecinos mediante gap. */
    gap:3px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-mosaic-bars .is-chart:not(.is-vertical) i {
    /* Configura la cuadrícula mediante grid-row. */
    grid-row:2;
    /* Configura la cuadrícula mediante grid-column. */
    grid-column:1/-1
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-mosaic-bars .is-vertical li {
    /* Configura la tipografía mediante font-size. */
    font-size:.65rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(prefers-reduced-motion:reduce) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #inventorySummary .is-mosaic-bars {
        /* Aplica una animación mediante animation. */
        animation:none
    }
}
/* Draw at the display's native scale, without scaling the animated layer. */
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-big-ring,#inventorySummary .is-mosaic-pie {
    /* Configura esta propiedad visual mediante filter. */
    filter:none;
    /* Aplica una animación mediante animation. */
    animation:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-big-ring svg,#inventorySummary .is-mosaic-pie svg {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Ajusta la altura mediante height. */
    height:100%;
    /* Controla la posición del elemento mediante position. */
    position:absolute;
    /* Configura esta propiedad visual mediante inset. */
    inset:0;
    /* Transforma la geometría visual mediante transform. */
    transform:none;
    /* Configura esta propiedad visual mediante shape-rendering. */
    shape-rendering:geometricPrecision
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-mosaic-pie {
    /* Pinta el fondo del elemento mediante background. */
    background:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-slice-assigned {
    /* Configura esta propiedad visual mediante fill. */
    fill:var(--is-assigned)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-slice-available {
    /* Configura esta propiedad visual mediante fill. */
    fill:var(--is-available)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(prefers-reduced-motion:no-preference) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #inventorySummary .is-mosaic-pie svg {
        /* Aplica una animación mediante animation. */
        animation:is-pie-fade .32s ease-out
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@keyframes is-pie-fade {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    from {
        /* Regula la transparencia mediante opacity. */
        opacity:.55
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-stock-ring {
    /* Controla la posición del elemento mediante position. */
    position:relative;
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura esta propiedad visual mediante place-items. */
    place-items:center;
    /* Ajusta el ancho mediante width. */
    width:min(100%,110px);
    /* Configura esta propiedad visual mediante aspect-ratio. */
    aspect-ratio:1;
    /* Define el espacio exterior mediante margin. */
    margin:auto
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-stock-ring svg {
    /* Controla la posición del elemento mediante position. */
    position:absolute;
    /* Configura esta propiedad visual mediante inset. */
    inset:0;
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Ajusta la altura mediante height. */
    height:100%;
    /* Configura esta propiedad visual mediante shape-rendering. */
    shape-rendering:geometricPrecision
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-stock-ring strong {
    /* Controla la posición del elemento mediante position. */
    position:relative;
    /* Configura la tipografía mediante font-size. */
    font-size:1.2rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-stock-ring circle {
    /* Configura esta propiedad visual mediante fill. */
    fill:none;
    /* Configura esta propiedad visual mediante stroke. */
    stroke:var(--line);
    /* Configura esta propiedad visual mediante stroke-width. */
    stroke-width:12
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-stock-ring .is-stock-0 {
    /* Configura esta propiedad visual mediante stroke. */
    stroke:#d05467
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-stock-ring .is-stock-1 {
    /* Configura esta propiedad visual mediante stroke. */
    stroke:#cf8a22
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-stock-ring .is-stock-2 {
    /* Configura esta propiedad visual mediante stroke. */
    stroke:var(--accent-fill)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-mosaic-legend .is-dot-stock-0 {
    /* Pinta el fondo del elemento mediante background. */
    background:#d05467
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-mosaic-legend .is-dot-stock-1 {
    /* Pinta el fondo del elemento mediante background. */
    background:#cf8a22
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-month-line {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Ajusta la altura mediante height. */
    height:auto;
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:visible;
    /* Configura esta propiedad visual mediante shape-rendering. */
    shape-rendering:geometricPrecision
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-month-grid {
    /* Configura esta propiedad visual mediante fill. */
    fill:none;
    /* Configura esta propiedad visual mediante stroke. */
    stroke:var(--line)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-month-line polygon {
    /* Configura esta propiedad visual mediante fill. */
    fill:var(--accent-fill);
    /* Regula la transparencia mediante opacity. */
    opacity:.12
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-month-line polyline {
    /* Configura esta propiedad visual mediante fill. */
    fill:none;
    /* Configura esta propiedad visual mediante stroke. */
    stroke:var(--accent-fill);
    /* Configura esta propiedad visual mediante stroke-width. */
    stroke-width:2;
    /* Configura esta propiedad visual mediante stroke-linecap. */
    stroke-linecap:round;
    /* Configura esta propiedad visual mediante stroke-linejoin. */
    stroke-linejoin:round
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-month-line circle {
    /* Configura esta propiedad visual mediante fill. */
    fill:var(--accent-fill);
    /* Configura esta propiedad visual mediante stroke. */
    stroke:var(--surface);
    /* Configura esta propiedad visual mediante stroke-width. */
    stroke-width:1.5
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#inventorySummary .is-month-line text {
    /* Configura la tipografía mediante font-size. */
    font-size:11px;
    /* Configura esta propiedad visual mediante text-anchor. */
    text-anchor:middle;
    /* Configura esta propiedad visual mediante fill. */
    fill:var(--ink)
}