/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-totals {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:12px;
    /* Define el espacio interior mediante padding. */
    padding:5px 12px;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:var(--design-shadow)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-totals>div {
    /* Dibuja el borde del elemento mediante border. */
    border:0;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:none;
    /* Pinta el fondo del elemento mediante background. */
    background:none;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-totals>div+div {
    /* Dibuja el borde del elemento mediante border-inline-start. */
    border-inline-start:1px solid var(--line)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-quick .quick-access {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Configura la distribución flexible mediante flex-wrap. */
    flex-wrap:wrap;
    /* Separa elementos vecinos mediante gap. */
    gap:8px 14px;
    /* Define el espacio exterior mediante margin. */
    margin:0 0 10px;
    /* Define el espacio interior mediante padding. */
    padding:7px 12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-quick h3,#dashboardView .dashboard-shortcuts h3 {
    /* Define el espacio exterior mediante margin. */
    margin:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-quick .quick-access>div {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Configura la distribución flexible mediante flex-wrap. */
    flex-wrap:wrap;
    /* Separa elementos vecinos mediante gap. */
    gap:6px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-quick button {
    /* Configura esta propiedad visual mediante min-height. */
    min-height:30px;
    /* Define el espacio interior mediante padding. */
    padding:4px 8px;
    /* Configura la tipografía mediante font-size. */
    font-size:11px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-quick button .ui-icon {
    /* Ajusta el ancho mediante width. */
    width:16px;
    /* Ajusta la altura mediante height. */
    height:16px;
    /* Define el espacio interior mediante padding. */
    padding:0;
    /* Define el espacio exterior mediante margin. */
    margin:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature {
    /* 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. */
#dashboardView :is(.dashboard-trends,.dashboard-secondary) {
    /* 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);
    /* Configura la cuadrícula mediante grid-template-rows. */
    grid-template-rows:auto;
    /* Separa elementos vecinos mediante gap. */
    gap:10px;
    /* Define el espacio exterior mediante margin. */
    margin:0;
    /* Define el espacio interior mediante padding. */
    padding:0;
    /* Dibuja el borde del elemento mediante border. */
    border:0;
    /* Pinta el fondo del elemento mediante background. */
    background:none;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-shortcuts {
    /* 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. */
#dashboardView .catalog-shortcuts {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Configura la distribución flexible mediante flex-wrap. */
    flex-wrap:wrap;
    /* Separa elementos vecinos mediante gap. */
    gap:8px 14px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .summary-ring {
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Configura esta propiedad visual mediante max-width. */
    max-width:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView [data-dashboard-carousel] {
    /* Define una variable que otras reglas pueden reutilizar mediante --panel-tone. */
    --panel-tone:var(--accent-fill);
    /* Define una variable que otras reglas pueden reutilizar mediante --panel-tint. */
    --panel-tint:10%
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView [data-dashboard-carousel=consumption] {
    /* Define una variable que otras reglas pueden reutilizar mediante --panel-tone. */
    --panel-tone:color-mix(in oklab,var(--accent-fill) 62%,#009cce)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView [data-dashboard-carousel=purchases] {
    /* Define una variable que otras reglas pueden reutilizar mediante --panel-tone. */
    --panel-tone:color-mix(in oklab,var(--accent-fill) 50%,#565be4)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView [data-dashboard-carousel=documents] {
    /* Define una variable que otras reglas pueden reutilizar mediante --panel-tone. */
    --panel-tone:color-mix(in oklab,var(--accent-fill) 63%,#00a375)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView [data-dashboard-carousel=attention] {
    /* Define una variable que otras reglas pueden reutilizar mediante --panel-tone. */
    --panel-tone:#be7508
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark] #dashboardView [data-dashboard-carousel] {
    /* Define una variable que otras reglas pueden reutilizar mediante --panel-tint. */
    --panel-tint:16%
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView :is(.dashboard-feature .summary-module,.dashboard-feature .summary-ring) {
    /* Define el espacio interior mediante padding. */
    padding:10px 12px;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line);
    /* Dibuja el borde del elemento mediante border-top. */
    border-top:2px solid var(--panel-tone);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:12px;
    /* Pinta el fondo del elemento mediante background. */
    background:linear-gradient(140deg,color-mix(in srgb,var(--panel-tone) var(--panel-tint),var(--surface)),var(--surface));
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:var(--design-shadow);
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Transforma la geometría visual mediante transform. */
    transform:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature [data-dashboard-carousel]:hover {
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 7px 22px color-mix(in srgb,var(--panel-tone) 21%,transparent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature .summary-module h3 .ui-icon {
    /* Fija el color del texto mediante color. */
    color:color-mix(in srgb,var(--panel-tone) 67%,var(--ink));
    /* Pinta el fondo del elemento mediante background. */
    background:color-mix(in srgb,var(--panel-tone) 16%,var(--surface))
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature :is(.trend-bar,.trend-stem,.trend-stem::after) {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--panel-tone)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature .trend-stem::after,#dashboardView .dashboard-feature .summary-track>span {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--panel-tone)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .trend-bar[data-zero] {
    /* Ajusta la altura mediante height. */
    height:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .summary-ring-title {
    /* Configura la cuadrícula mediante grid-column. */
    grid-column:1/-1
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(min-width:1050px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView .dashboard-feature {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView :is(.dashboard-trends,.dashboard-secondary) {
        /* Configura la cuadrícula mediante grid-template-rows. */
        grid-template-rows:repeat(2,minmax(0,1fr))
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView .summary-ring [data-summary-slot] {
        /* Define cómo se distribuye el contenido mediante display. */
        display:grid;
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:minmax(95px,.85fr) minmax(0,1.15fr);
        /* Separa elementos vecinos mediante gap. */
        gap:6px 8px;
        /* Alinea los elementos mediante align-items. */
        align-items:center;
        /* Alinea los elementos mediante align-content. */
        align-content:center;
        /* Configura la distribución flexible mediante flex. */
        flex:1
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView .summary-ring {
        /* Define cómo se distribuye el contenido mediante display. */
        display:flex;
        /* Configura la distribución flexible mediante flex-direction. */
        flex-direction:column
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView .summary-ring-chart {
        /* Configura esta propiedad visual mediante max-width. */
        max-width:160px;
        /* Ajusta el ancho mediante width. */
        width:100%
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView .summary-ring-data {
        /* Configura esta propiedad visual mediante min-width. */
        min-width:0
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(max-width:760px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView .dashboard-totals>div+div {
        /* Dibuja el borde del elemento mediante border-inline-start. */
        border-inline-start:0
    }
}
/* 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. */
    #dashboardView .summary-ring [data-summary-slot]:has(.summary-static-frame) {
        /* Define cómo se distribuye el contenido mediante display. */
        display:block
    }
}
/* Keep the two chart cards on the same grid lines as the status cards. */
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature {
    /* Separa elementos vecinos mediante gap. */
    gap:14px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature .dashboard-trends {
    /* Define el espacio interior mediante padding. */
    padding:0;
    /* Dibuja el borde del elemento mediante border. */
    border:0;
    /* Pinta el fondo del elemento mediante background. */
    background:none;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature .dashboard-trends>.summary-module+.summary-module {
    /* Dibuja el borde del elemento mediante border-left. */
    border-left:1px solid var(--line);
    /* Dibuja el borde del elemento mediante border-top. */
    border-top:2px solid var(--panel-tone);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:12px;
    /* Define el espacio interior mediante padding. */
    padding:12px 16px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature :is(.summary-module,.summary-ring) {
    /* Define el espacio interior mediante padding. */
    padding:12px 16px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature h3 {
    /* Configura la tipografía mediante font-size. */
    font-size:clamp(14px,1.08vw,18px);
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:7px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature .summary-module h3 .ui-icon {
    /* Ajusta el ancho mediante width. */
    width:32px;
    /* Ajusta la altura mediante height. */
    height:32px;
    /* Define el espacio interior mediante padding. */
    padding:6px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature .dashboard-trend figcaption {
    /* Configura la tipografía mediante font-size. */
    font-size:12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature .trend-plot {
    /* Ajusta la altura mediante height. */
    height:60px;
    /* Pinta el fondo del elemento mediante background. */
    background:none;
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:color-mix(in srgb,var(--panel-tone) 35%,var(--line))
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature .trend-day small {
    /* Configura la tipografía mediante font-size. */
    font-size:11px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature .trend-bar[data-zero] {
    /* Ajusta la altura mediante height. */
    height:2px;
    /* Regula la transparencia mediante opacity. */
    opacity:.65
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature .trend-stem[data-zero]::after {
    /* Configura esta propiedad visual mediante top. */
    top:auto;
    /* Configura esta propiedad visual mediante bottom. */
    bottom:0;
    /* Configura esta propiedad visual mediante translate. */
    translate:-50% 40%
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature .summary-pair {
    /* Configura la tipografía mediante font-size. */
    font-size:12px;
    /* Define el espacio exterior mediante margin. */
    margin:3px 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature [data-dashboard-carousel] {
    /* Define una variable que otras reglas pueden reutilizar mediante --panel-tint. */
    --panel-tint:17%
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark] #dashboardView .dashboard-feature [data-dashboard-carousel] {
    /* Define una variable que otras reglas pueden reutilizar mediante --panel-tint. */
    --panel-tint:22%
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .summary-ring-chart {
    /* Configura esta propiedad visual mediante max-width. */
    max-width:174px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-totals>div>.ui-icon {
    /* Ajusta el ancho mediante width. */
    width:43px;
    /* Ajusta la altura mediante height. */
    height:43px;
    /* Define el espacio interior mediante padding. */
    padding:9px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-totals strong {
    /* Configura la tipografía mediante font-size. */
    font-size:24px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(min-width:1050px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView .dashboard-feature {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:minmax(0,1fr) minmax(0,1.06fr) minmax(0,.97fr);
        /* Configura la cuadrícula mediante grid-template-rows. */
        grid-template-rows:auto auto
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView .dashboard-feature>.summary-ring {
        /* Configura la cuadrícula mediante grid-column. */
        grid-column:1;
        /* Configura la cuadrícula mediante grid-row. */
        grid-row:1 / span 2
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView .dashboard-feature>.dashboard-trends {
        /* Configura la cuadrícula mediante grid-column. */
        grid-column:2;
        /* Configura la cuadrícula mediante grid-row. */
        grid-row:1 / span 2;
        /* Configura la cuadrícula mediante grid-template-rows. */
        grid-template-rows:subgrid
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView .dashboard-feature>.dashboard-secondary {
        /* Configura la cuadrícula mediante grid-column. */
        grid-column:3;
        /* Configura la cuadrícula mediante grid-row. */
        grid-row:1 / span 2;
        /* Configura la cuadrícula mediante grid-template-rows. */
        grid-template-rows:subgrid
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView .summary-ring [data-summary-slot] {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:minmax(0,1fr) minmax(0,1fr);
        /* Configura esta propiedad visual mediante column-gap. */
        column-gap:14px
    }
}
/* Agotados: tercer bloque de la franja de resumen. */
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-totals {
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:minmax(0,1fr) minmax(0,1.16fr) minmax(0,.82fr);
    /* Separa elementos vecinos mediante gap. */
    gap:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-totals>div {
    /* Define el espacio interior mediante padding-inline. */
    padding-inline:clamp(12px,2.2vw,34px)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-totals>.dashboard-stock {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Distribuye los elementos mediante justify-items. */
    justify-items:center;
    /* Alinea los elementos mediante align-content. */
    align-content:center;
    /* Alinea los elementos mediante align-self. */
    align-self:stretch;
    /* Dibuja el borde del elemento mediante border-inline-start. */
    border-inline-start:1px solid var(--line);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:0;
    /* Define el espacio interior mediante padding. */
    padding:8px 12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-stock>summary {
    /* Define el espacio interior mediante padding. */
    padding:8px 15px;
    /* Separa elementos vecinos mediante gap. */
    gap:7px;
    /* Configura la tipografía mediante font-size. */
    font-size:15px;
    /* Configura esta propiedad visual mediante line-height. */
    line-height:1.25;
    /* Configura la tipografía mediante font-weight. */
    font-weight:600
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-stock>summary .ui-icon {
    /* Ajusta el ancho mediante width. */
    width:20px;
    /* Ajusta la altura mediante height. */
    height:20px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(max-width:760px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView .dashboard-totals {
        /* 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. */
    #dashboardView .dashboard-totals>.dashboard-stock {
        /* Dibuja el borde del elemento mediante border-inline-start. */
        border-inline-start:0;
        /* Dibuja el borde del elemento mediante border-top. */
        border-top:1px solid var(--line);
        /* Distribuye los elementos mediante justify-items. */
        justify-items:start
    }
}
/* Distribute shortcuts across the available width, including wrapped rows. */
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView :is(.dashboard-quick .quick-access,.dashboard-shortcuts .catalog-shortcuts)>div {
    /* Configura la distribución flexible mediante flex. */
    flex:1 1 26rem;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Configura la distribución flexible mediante flex-wrap. */
    flex-wrap:wrap;
    /* Separa elementos vecinos mediante gap. */
    gap:8px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView :is(.dashboard-quick .quick-access,.dashboard-shortcuts .catalog-shortcuts)>div>button {
    /* Configura la distribución flexible mediante flex. */
    flex:1 1 8rem;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Distribuye los elementos mediante justify-content. */
    justify-content:center;
    /* Configura esta propiedad visual mediante text-align. */
    text-align:center;
    /* Configura esta propiedad visual mediante white-space. */
    white-space:normal
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(max-width:520px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView :is(.dashboard-quick .quick-access,.dashboard-shortcuts .catalog-shortcuts)>div {
        /* Configura la distribución flexible mediante flex-basis. */
        flex-basis:100%
    }
}
/* A balanced shortcut row beneath the dashboard cards. */
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-shortcuts>.dashboard-quick {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-shortcuts :is(.quick-access,.catalog-shortcuts) {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Alinea los elementos mediante align-content. */
    align-content:start;
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:minmax(0,1fr);
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Define el espacio exterior mediante margin. */
    margin:0;
    /* Define el espacio interior mediante padding. */
    padding:12px;
    /* Separa elementos vecinos mediante gap. */
    gap:8px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-shortcuts :is(.quick-access,.catalog-shortcuts) h3 {
    /* Configura la tipografía mediante font-size. */
    font-size:13px;
    /* Define el espacio exterior mediante margin. */
    margin:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-shortcuts :is(.quick-access,.catalog-shortcuts)>div>button {
    /* Configura esta propiedad visual mediante min-height. */
    min-height:42px;
    /* Define el espacio interior mediante padding. */
    padding:6px 8px;
    /* Configura la tipografía mediante font-size. */
    font-size:12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(min-width:1050px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView .dashboard-shortcuts {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:minmax(0,3fr) minmax(0,4fr)
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(min-width:1050px) and (min-height:850px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView .dashboard-shortcuts :is(.quick-access,.catalog-shortcuts) {
        /* Define el espacio interior mediante padding. */
        padding:16px;
        /* Separa elementos vecinos mediante gap. */
        gap:12px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView .dashboard-shortcuts :is(.quick-access,.catalog-shortcuts)>div>button {
        /* Configura esta propiedad visual mediante min-height. */
        min-height:48px
    }
}
/* Wide availability and paired charts, with a compact action column. */
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature .dashboard-quick .quick-access {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Define el espacio exterior mediante margin. */
    margin:0;
    /* Define el espacio interior mediante padding. */
    padding:12px 16px;
    /* Separa elementos vecinos mediante gap. */
    gap:10px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature .dashboard-quick button {
    /* Configura la distribución flexible mediante flex. */
    flex:1 1 65px;
    /* 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:6px;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:58px;
    /* Pinta el fondo del elemento mediante background. */
    background:color-mix(in srgb,var(--accent-fill) 12%,var(--surface))
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature .dashboard-quick button .ui-icon {
    /* 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. */
#dashboardView .dashboard-shortcuts .catalog-shortcuts {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Alinea los elementos mediante align-items. */
    align-items:center
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature [data-dashboard-carousel] {
    /* Define una variable que otras reglas pueden reutilizar mediante --panel-tint. */
    --panel-tint:7%
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature .trend-grid {
    /* Controla la posición del elemento mediante position. */
    position:relative;
    /* Define una variable que otras reglas pueden reutilizar mediante --plot-height. */
    --plot-height:76px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature .trend-plot {
    /* Ajusta la altura mediante height. */
    height:var(--plot-height);
    /* Pinta el fondo del elemento mediante background. */
    background:repeating-linear-gradient(to top,transparent 0 18px,var(--line) 18px 19px)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature .trend-bar {
    /* Ajusta la altura mediante height. */
    height:max(2px,calc(var(--level) * .72));
    /* Pinta el fondo del elemento mediante background. */
    background:linear-gradient(to top,color-mix(in srgb,var(--panel-tone) 30%,transparent),var(--panel-tone));
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 0 8px color-mix(in srgb,var(--panel-tone) 35%,transparent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature .trend-bar[data-zero] {
    /* Ajusta la altura mediante height. */
    height:2px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .trend-bar:not([data-zero])::after {
    /* Define el contenido generado mediante content. */
    content:"";
    /* Controla la posición del elemento mediante position. */
    position:absolute;
    /* Configura esta propiedad visual mediante top. */
    top:0;
    /* Configura esta propiedad visual mediante left. */
    left:50%;
    /* Configura esta propiedad visual mediante translate. */
    translate:-50% -50%;
    /* Ajusta el ancho mediante width. */
    width:7px;
    /* 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(--surface);
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--panel-tone);
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 0 7px var(--panel-tone)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .trend-area {
    /* Controla la posición del elemento mediante position. */
    position:absolute;
    /* Configura esta propiedad visual mediante inset. */
    inset:0 0 auto;
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Ajusta la altura mediante height. */
    height:calc(var(--plot-height) - 1px);
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:visible;
    /* Ajusta la superposición mediante z-index. */
    z-index:1;
    /* Configura esta propiedad visual mediante pointer-events. */
    pointer-events:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .trend-fill {
    /* Configura esta propiedad visual mediante fill. */
    fill:var(--panel-tone);
    /* Configura esta propiedad visual mediante fill-opacity. */
    fill-opacity:.16
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .trend-line {
    /* Configura esta propiedad visual mediante fill. */
    fill:none;
    /* Configura esta propiedad visual mediante stroke. */
    stroke:var(--panel-tone);
    /* Configura esta propiedad visual mediante stroke-width. */
    stroke-width:2
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature .trend-stem {
    /* Ajusta la altura mediante height. */
    height:calc(var(--level) * .72);
    /* Pinta el fondo del elemento mediante background. */
    background:none;
    /* Ajusta la superposición mediante z-index. */
    z-index:2;
    /* Aplica una animación mediante animation. */
    animation:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature .trend-stem::after {
    /* Configura esta propiedad visual mediante top. */
    top:0;
    /* Configura esta propiedad visual mediante bottom. */
    bottom:auto;
    /* Configura esta propiedad visual mediante translate. */
    translate:-50% -50%;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Dibuja el borde del elemento mediante border. */
    border:2px solid var(--panel-tone);
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 0 6px var(--panel-tone)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .trend-value {
    /* Configura esta propiedad visual mediante bottom. */
    bottom:calc(var(--level) * .72 + 8px);
    /* Ajusta la superposición mediante z-index. */
    z-index:3
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .summary-ring-fill {
    /* Configura esta propiedad visual mediante filter. */
    filter:drop-shadow(0 0 4px color-mix(in srgb,var(--accent-fill) 55%,transparent))
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(min-width:1050px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView .dashboard-feature {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView .dashboard-feature>.summary-ring {
        /* Configura la cuadrícula mediante grid-column. */
        grid-column:1;
        /* Configura la cuadrícula mediante grid-row. */
        grid-row:1
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView .dashboard-feature>.dashboard-trends {
        /* Configura la cuadrícula mediante grid-column. */
        grid-column:1;
        /* Configura la cuadrícula mediante grid-row. */
        grid-row:2;
        /* 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. */
    #dashboardView .dashboard-feature>.dashboard-secondary {
        /* Configura la cuadrícula mediante grid-column. */
        grid-column:2;
        /* Configura la cuadrícula mediante grid-row. */
        grid-row:1 / span 2;
        /* Configura la cuadrícula mediante grid-template-rows. */
        grid-template-rows:repeat(3,auto)
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView .summary-ring [data-summary-slot] {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:minmax(95px,.65fr) minmax(0,1.5fr)
    }
}
/* Full-width catalog and stronger visual hierarchy in the home view. */
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-shortcuts {
    /* 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. */
#dashboardView .dashboard-shortcuts .catalog-shortcuts {
    /* Define el espacio interior mediante padding. */
    padding:12px 16px;
    /* Separa elementos vecinos mediante gap. */
    gap:10px 18px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-shortcuts .catalog-shortcuts h3 {
    /* Configura la tipografía mediante font-size. */
    font-size:16px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-shortcuts .catalog-shortcuts button {
    /* Configura la tipografía mediante font-size. */
    font-size:13px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature h3 {
    /* Configura la tipografía mediante font-size. */
    font-size:clamp(16px,1.25vw,21px)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature .summary-module h3 .ui-icon {
    /* Ajusta el ancho mediante width. */
    width:36px;
    /* Ajusta la altura mediante height. */
    height:36px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature .summary-ring-chart {
    /* Configura esta propiedad visual mediante max-width. */
    max-width:205px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .summary-ring-chart .ring-light {
    /* Configura esta propiedad visual mediante stop-color. */
    stop-color:color-mix(in srgb,var(--accent-bright) 86%,white)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .summary-ring-chart .ring-dark {
    /* Configura esta propiedad visual mediante stop-color. */
    stop-color:var(--accent-fill)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .summary-ring-fill {
    /* Configura esta propiedad visual mediante stroke-linecap. */
    stroke-linecap:round
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .summary-ring-fill[stroke-dasharray^="0 "] {
    /* Configura esta propiedad visual mediante visibility. */
    visibility:hidden
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature .summary-ring-data .summary-pair {
    /* Separa elementos vecinos mediante gap. */
    gap:3px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature .dashboard-quick button {
    /* Configura la tipografía mediante font-size. */
    font-size:13px;
    /* Configura la tipografía mediante font-weight. */
    font-weight:650
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(min-width:1050px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView .dashboard-feature .summary-ring-data {
        /* 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));
        /* Separa elementos vecinos mediante gap. */
        gap:8px 16px;
        /* Dibuja el borde del elemento mediante border-inline-start. */
        border-inline-start:1px solid var(--line);
        /* Define el espacio interior mediante padding-inline-start. */
        padding-inline-start:18px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView .dashboard-feature .summary-ring-data .summary-pair {
        /* Define cómo se distribuye el contenido mediante display. */
        display:flex;
        /* Configura la distribución flexible mediante flex-direction. */
        flex-direction:column;
        /* Alinea los elementos mediante align-items. */
        align-items:flex-start;
        /* Dibuja el borde del elemento mediante border-top. */
        border-top:0
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView .dashboard-feature .summary-ring-data strong {
        /* Configura la tipografía mediante font-size. */
        font-size:clamp(15px,1.35vw,23px);
        /* Define el espacio interior mediante padding-inline-start. */
        padding-inline-start:18px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView .dashboard-feature>.dashboard-secondary {
        /* Configura la cuadrícula mediante grid-template-rows. */
        grid-template-rows:1fr 1fr auto
    }
}
/* Separate summary tiles and emphasize the two status panels. */
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-totals {
    /* Define el espacio interior mediante padding. */
    padding:0;
    /* Separa elementos vecinos mediante gap. */
    gap:12px;
    /* Pinta el fondo del elemento mediante background. */
    background:none;
    /* Dibuja el borde del elemento mediante border. */
    border:0;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:none;
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:repeat(3,minmax(0,1fr))
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-totals>div,
#dashboardView .dashboard-totals>.dashboard-stock {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:14px;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:var(--design-shadow);
    /* Define el espacio interior mediante padding. */
    padding:10px 16px;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:76px;
    /* Alinea los elementos mediante align-self. */
    align-self:stretch
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-totals>div>div {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Configura la distribución flexible mediante flex-direction. */
    flex-direction:column-reverse;
    /* Separa elementos vecinos mediante gap. */
    gap:1px;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-totals>.dashboard-stock {
    /* Distribuye los elementos mediante justify-items. */
    justify-items:stretch;
    /* Define el espacio interior mediante padding. */
    padding:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-stock>summary {
    /* Pinta el fondo del elemento mediante background. */
    background:none;
    /* Fija el color del texto mediante color. */
    color:var(--ink);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:14px;
    /* Define el espacio interior mediante padding. */
    padding:10px 16px;
    /* Separa elementos vecinos mediante gap. */
    gap:12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-stock>summary .ui-icon {
    /* Configura esta propiedad visual mediante box-sizing. */
    box-sizing:border-box;
    /* Ajusta el ancho mediante width. */
    width:43px;
    /* Ajusta la altura mediante height. */
    height:43px;
    /* Define el espacio interior mediante padding. */
    padding:9px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:13px;
    /* Pinta el fondo del elemento mediante background. */
    background:#fff0d3;
    /* Fija el color del texto mediante color. */
    color:#9a5700
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .stock-metric {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Separa elementos vecinos mediante gap. */
    gap:1px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .stock-metric span {
    /* Configura la tipografía mediante font-size. */
    font-size:12px;
    /* Configura la tipografía mediante font-weight. */
    font-weight:400;
    /* Fija el color del texto mediante color. */
    color:var(--muted)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .stock-metric strong {
    /* Configura esta propiedad visual mediante line-height. */
    line-height:1.1
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-secondary>[data-dashboard-carousel="attention"] [data-summary-slot] {
    /* Pinta el fondo del elemento mediante background. */
    background:color-mix(in srgb,var(--panel-tone) 13%,var(--surface));
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid color-mix(in srgb,var(--panel-tone) 24%,var(--line));
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:12px;
    /* Define el espacio interior mediante padding. */
    padding:10px 13px;
    /* Configura la distribución flexible mediante flex. */
    flex:0 0 auto
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-secondary>[data-dashboard-carousel="attention"] .summary-indicators {
    /* Define el espacio exterior mediante margin-top. */
    margin-top:auto;
    /* Define el espacio interior mediante padding-top. */
    padding-top:8px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView [data-dashboard-carousel="documents"] .summary-track {
    /* Ajusta la altura mediante height. */
    height:14px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:999px;
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:hidden
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView [data-dashboard-carousel="documents"] .summary-track>span {
    /* Ajusta la altura mediante height. */
    height:100%;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:inherit;
    /* Pinta el fondo del elemento mediante background. */
    background:linear-gradient(90deg,var(--accent-bright),var(--panel-tone))
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView [data-dashboard-carousel="documents"] .summary-pair strong {
    /* Configura la tipografía mediante font-size. */
    font-size:21px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(max-width:760px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView .dashboard-totals {
        /* 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. */
#dashboardView .dep-home {
    /* Configura la tipografía mediante font-size. */
    font-size:12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dep-home p {
    /* Define el espacio exterior mediante margin. */
    margin:3px 0 8px;
    /* Fija el color del texto mediante color. */
    color:var(--muted)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dep-chart {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:max-content minmax(0,1fr);
    /* Separa elementos vecinos mediante gap. */
    gap:8px;
    /* Define el espacio exterior mediante margin. */
    margin:0 8px 20px 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dep-axis {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Configura la distribución flexible mediante flex-direction. */
    flex-direction:column;
    /* Distribuye los elementos mediante justify-content. */
    justify-content:space-between;
    /* Define el espacio interior mediante padding. */
    padding:1px 0;
    /* Fija el color del texto mediante color. */
    color:var(--muted);
    /* Configura la tipografía mediante font-size. */
    font-size:11px;
    /* Configura esta propiedad visual mediante text-align. */
    text-align:right
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dep-plot {
    /* Controla la posición del elemento mediante position. */
    position:relative;
    /* Ajusta la altura mediante height. */
    height:clamp(54px,10vh,108px);
    /* Fija el color del texto mediante color. */
    color:var(--panel-tone,var(--accent))
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dep-plot 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%
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dep-grid {
    /* Configura esta propiedad visual mediante fill. */
    fill:none;
    /* Configura esta propiedad visual mediante stroke. */
    stroke:currentColor;
    /* Regula la transparencia mediante opacity. */
    opacity:.24
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dep-line {
    /* Configura esta propiedad visual mediante fill. */
    fill:none;
    /* Configura esta propiedad visual mediante stroke. */
    stroke:currentColor;
    /* Configura esta propiedad visual mediante stroke-width. */
    stroke-width:2;
    /* Configura esta propiedad visual mediante stroke-linejoin. */
    stroke-linejoin:round
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dep-partial {
    /* Configura esta propiedad visual mediante stroke-dasharray. */
    stroke-dasharray:4 4
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dep-month {
    /* Controla la posición del elemento mediante position. */
    position:absolute;
    /* Configura esta propiedad visual mediante top. */
    top:100%;
    /* Transforma la geometría visual mediante transform. */
    transform:translateX(-50%);
    /* Fija el color del texto mediante color. */
    color:var(--muted);
    /* Configura la tipografía mediante font-size. */
    font-size:11px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dep-point {
    /* Controla la posición del elemento mediante position. */
    position:absolute;
    /* Configura esta propiedad visual mediante left. */
    left:var(--x);
    /* Configura esta propiedad visual mediante top. */
    top:var(--y);
    /* Ajusta el ancho mediante width. */
    width:16px;
    /* Ajusta la altura mediante height. */
    height:16px;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:0;
    /* Define el espacio interior mediante padding. */
    padding:0;
    /* Dibuja el borde del elemento mediante border. */
    border:0;
    /* Pinta el fondo del elemento mediante background. */
    background:none;
    /* Fija el color del texto mediante color. */
    color:inherit;
    /* Transforma la geometría visual mediante transform. */
    transform:translate(-50%,-50%);
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dep-point::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:6px;
    /* Ajusta la altura mediante height. */
    height:6px;
    /* Define el espacio exterior mediante margin. */
    margin:auto;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:50%;
    /* Pinta el fondo del elemento mediante background. */
    background:currentColor
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dep-point span {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none;
    /* Controla la posición del elemento mediante position. */
    position:absolute;
    /* Configura esta propiedad visual mediante bottom. */
    bottom:100%;
    /* Configura esta propiedad visual mediante left. */
    left:50%;
    /* Transforma la geometría visual mediante transform. */
    transform:translateX(-50%);
    /* Define el espacio interior mediante padding. */
    padding:4px 7px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:6px;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Fija el color del texto mediante color. */
    color:var(--ink);
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line);
    /* Configura esta propiedad visual mediante white-space. */
    white-space:nowrap;
    /* Configura esta propiedad visual mediante pointer-events. */
    pointer-events:none;
    /* Configura la tipografía mediante font-size. */
    font-size:11px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dep-point:first-of-type span {
    /* Configura esta propiedad visual mediante left. */
    left:0;
    /* Transforma la geometría visual mediante transform. */
    transform:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dep-point:last-of-type span {
    /* Configura esta propiedad visual mediante left. */
    left:auto;
    /* Configura esta propiedad visual mediante right. */
    right:0;
    /* Transforma la geometría visual mediante transform. */
    transform:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dep-point:hover,#dashboardView .dep-point:focus {
    /* Ajusta la superposición mediante z-index. */
    z-index:2
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dep-point:hover span,#dashboardView .dep-point:focus span {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dep-total {
    /* Dibuja el borde del elemento mediante border-top. */
    border-top:1px solid var(--line);
    /* Define el espacio interior mediante padding-top. */
    padding-top:4px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dep-total strong {
    /* Configura la tipografía mediante font-size. */
    font-size:15px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dep-home>small {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Fija el color del texto mediante color. */
    color:var(--muted)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-trends>.summary-module:only-child {
    /* Configura la cuadrícula mediante grid-column. */
    grid-column:1/-1
}
/* Availability: larger readings within the existing dashboard grid. */
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature .summary-ring-chart {
    /* Configura esta propiedad visual mediante max-width. */
    max-width:220px;
    /* Define el espacio exterior mediante margin-block. */
    margin-block:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .summary-ring-chart circle {
    /* Configura esta propiedad visual mediante stroke-width. */
    stroke-width:13
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .summary-ring-chart .summary-ring-base {
    /* Configura esta propiedad visual mediante stroke. */
    stroke:color-mix(in srgb,var(--muted) 26%,var(--surface))
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .summary-ring-chart .summary-ring-fill {
    /* Configura esta propiedad visual mediante filter. */
    filter:drop-shadow(0 1px 4px color-mix(in srgb,var(--accent-bright) 55%,transparent))
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .summary-ring-chart .summary-ring-number {
    /* Configura la tipografía mediante font-size. */
    font-size:34px;
    /* Configura la tipografía mediante font-weight. */
    font-weight:750
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .summary-ring-chart .summary-ring-label {
    /* Configura la tipografía mediante font-size. */
    font-size:13px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature .ring-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,1fr);
    /* Separa elementos vecinos mediante gap. */
    gap:0;
    /* Define el espacio exterior mediante margin. */
    margin:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .ring-metric {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:16px max-content minmax(0,1fr);
    /* Separa elementos vecinos mediante gap. */
    gap:0 10px;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Define el espacio interior mediante padding. */
    padding:4px 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .ring-metric dt {
    /* Configura la cuadrícula mediante grid-column. */
    grid-column:3;
    /* Configura la cuadrícula mediante grid-row. */
    grid-row:1;
    /* Configura la tipografía mediante font-size. */
    font-size:clamp(13px,1.1vw,17px)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .ring-metric dd {
    /* Configura la cuadrícula mediante grid-column. */
    grid-column:2;
    /* Configura la cuadrícula mediante grid-row. */
    grid-row:1;
    /* Define el espacio exterior mediante margin. */
    margin:0;
    /* Configura la tipografía mediante font-size. */
    font-size:clamp(18px,1.7vw,27px);
    /* Configura la tipografía mediante font-weight. */
    font-weight:750;
    /* Configura esta propiedad visual mediante line-height. */
    line-height:1.15
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .ring-marker {
    /* Configura la cuadrícula mediante grid-column. */
    grid-column:1;
    /* Configura la cuadrícula mediante grid-row. */
    grid-row:1;
    /* Ajusta el ancho mediante width. */
    width:11px;
    /* Ajusta la altura mediante height. */
    height:11px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:50%;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--accent-bright)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .ring-metric:nth-child(2) .ring-marker {
    /* Pinta el fondo del elemento mediante background. */
    background:color-mix(in srgb,var(--muted) 45%,var(--surface))
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .ring-metric:nth-child(n+3) {
    /* Dibuja el borde del elemento mediante border-top. */
    border-top:1px solid var(--line);
    /* Define el espacio exterior mediante margin-top. */
    margin-top:4px;
    /* Define el espacio interior mediante padding-top. */
    padding-top:7px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .ring-metric:nth-child(3) .ring-marker {
    /* Configura esta propiedad visual mediante visibility. */
    visibility:hidden
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .ring-metric:last-child {
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:16px minmax(0,1fr)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .ring-metric:last-child dt {
    /* Configura la cuadrícula mediante grid-column. */
    grid-column:2;
    /* Configura la cuadrícula mediante grid-row. */
    grid-row:2
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .ring-metric:last-child dd {
    /* Controla el contenido que rebasa el contenedor mediante overflow-wrap. */
    overflow-wrap:anywhere
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .ring-metric:last-child .ring-marker {
    /* Pinta el fondo del elemento mediante background. */
    background:none;
    /* Ajusta el ancho mediante width. */
    width:auto;
    /* Ajusta la altura mediante height. */
    height:auto;
    /* Configura la cuadrícula mediante grid-row. */
    grid-row:1 / span 2
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .ring-marker .ui-icon {
    /* Ajusta el ancho mediante width. */
    width:18px;
    /* Ajusta la altura mediante height. */
    height:18px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(max-width:650px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView .dashboard-feature .summary-ring-chart {
        /* Configura esta propiedad visual mediante max-width. */
        max-width:178px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView .ring-metric {
        /* Configura esta propiedad visual mediante column-gap. */
        column-gap:5px;
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:12px max-content minmax(0,1fr)
    }
}
/* Individual colors for dashboard shortcuts. */
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-quick [data-quick-action="add"] {
    /* Define una variable que otras reglas pueden reutilizar mediante --quick-tint. */
    --quick-tint:#5edec0;
    /* Define una variable que otras reglas pueden reutilizar mediante --quick-ink. */
    --quick-ink:#07583f
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-quick [data-quick-action="import"] {
    /* Define una variable que otras reglas pueden reutilizar mediante --quick-tint. */
    --quick-tint:#55baff;
    /* Define una variable que otras reglas pueden reutilizar mediante --quick-ink. */
    --quick-ink:#104da6
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-quick [data-quick-action="export"] {
    /* Define una variable que otras reglas pueden reutilizar mediante --quick-tint. */
    --quick-tint:#ab96ff;
    /* Define una variable que otras reglas pueden reutilizar mediante --quick-ink. */
    --quick-ink:#4c24b4
}
/* Aplica esta regla cuando el selector o la condición coincide. */
:root[data-theme="dark"] #dashboardView .dashboard-quick [data-quick-action="add"] {
    /* Define una variable que otras reglas pueden reutilizar mediante --quick-ink. */
    --quick-ink:#a0f5dd
}
/* Aplica esta regla cuando el selector o la condición coincide. */
:root[data-theme="dark"] #dashboardView .dashboard-quick [data-quick-action="import"] {
    /* Define una variable que otras reglas pueden reutilizar mediante --quick-ink. */
    --quick-ink:#a9d7ff
}
/* Aplica esta regla cuando el selector o la condición coincide. */
:root[data-theme="dark"] #dashboardView .dashboard-quick [data-quick-action="export"] {
    /* Define una variable que otras reglas pueden reutilizar mediante --quick-ink. */
    --quick-ink:#d4c6ff
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature .dashboard-quick button[data-quick-action] {
    /* Fija el color del texto mediante color. */
    color:var(--quick-ink);
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:color-mix(in srgb,var(--quick-tint) 36%,var(--surface));
    /* Pinta el fondo del elemento mediante background. */
    background:linear-gradient(145deg,color-mix(in srgb,var(--quick-tint) 20%,var(--surface)),color-mix(in srgb,var(--quick-tint) 36%,var(--surface)))
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature .dashboard-quick button[data-quick-action] .ui-icon {
    /* Fija el color del texto mediante color. */
    color:inherit;
    /* Pinta el fondo del elemento mediante background. */
    background:transparent
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-feature .dashboard-quick button[data-quick-action]:hover {
    /* Pinta el fondo del elemento mediante background. */
    background:linear-gradient(145deg,color-mix(in srgb,var(--quick-tint) 27%,var(--surface)),color-mix(in srgb,var(--quick-tint) 43%,var(--surface)))
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent]:not([data-accent=teal]) .layout>aside {
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:color-mix(in srgb,var(--accent-fill) 64%,#111621);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:color-mix(in srgb,var(--accent-fill) 28%,#0b111b);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:color-mix(in srgb,var(--accent-fill) 72%,#1a2030);
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .availability-split {
    /* Configura la cuadrícula mediante grid-column. */
    grid-column:1/-1;
    /* 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));
    /* Separa elementos vecinos mediante gap. */
    gap:16px;
    /* Ajusta el ancho mediante width. */
    width:100%
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .availability-current {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    /* Separa elementos vecinos mediante gap. */
    gap:8px;
    /* Alinea los elementos mediante align-items. */
    align-items:center
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .availability-current .summary-ring-chart {
    /* Configura esta propiedad visual mediante max-width. */
    max-width:175px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .availability-current .ring-metrics {
    /* Define el espacio interior mediante padding-inline-start. */
    padding-inline-start:0;
    /* Dibuja el borde del elemento mediante border-inline-start. */
    border-inline-start:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .availability-current .ring-metric {
    /* Configura esta propiedad visual mediante column-gap. */
    column-gap:5px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .availability-current .ring-metric dt {
    /* Configura la tipografía mediante font-size. */
    font-size:12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .availability-current .ring-metric dd {
    /* Configura la tipografía mediante font-size. */
    font-size:clamp(14px,1.3vw,21px)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .availability-value {
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Dibuja el borde del elemento mediante border-inline-start. */
    border-inline-start:1px solid var(--line);
    /* Define el espacio interior mediante padding-inline-start. */
    padding-inline-start:16px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .availability-value h4 {
    /* Configura la tipografía mediante font-size. */
    font-size:15px;
    /* Define el espacio exterior mediante margin. */
    margin:0 0 5px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .availability-value ul {
    /* Configura esta propiedad visual mediante list-style. */
    list-style:none;
    /* Define el espacio exterior mediante margin. */
    margin:0;
    /* Define el espacio interior mediante padding. */
    padding:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .availability-value li {
    /* Define el espacio interior mediante padding. */
    padding:5px 7px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:7px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .availability-value li>div {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Distribuye los elementos mediante justify-content. */
    justify-content:space-between;
    /* Configura la distribución flexible mediante flex-wrap. */
    flex-wrap:wrap;
    /* Separa elementos vecinos mediante gap. */
    gap:3px 8px;
    /* Configura la tipografía mediante font-size. */
    font-size:12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .availability-value .is-current {
    /* Pinta el fondo del elemento mediante background. */
    background:color-mix(in srgb,var(--accent-fill) 13%,var(--surface))
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .value-track,#dashboardView .value-track>span {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Ajusta la altura mediante height. */
    height:6px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:6px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .value-track {
    /* Define el espacio exterior mediante margin-top. */
    margin-top:4px;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--line);
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:hidden
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .value-track>span {
    /* Pinta el fondo del elemento mediante background. */
    background:color-mix(in srgb,var(--accent-fill) 52%,var(--line))
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .is-current .value-track>span {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--accent-bright)
}
/* 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. */
    #dashboardView .availability-split {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:1fr
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView .availability-value {
        /* Dibuja el borde del elemento mediante border-inline-start. */
        border-inline-start:0;
        /* Dibuja el borde del elemento mediante border-top. */
        border-top:1px solid var(--line);
        /* Define el espacio interior mediante padding. */
        padding:10px 0 0
    }
}
/* Compact asset list and a persistent right-hand record preview. */
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=asset]>main:has(>.asset-preview:not([hidden])) {
    /* 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(145px,24%);
    /* Configura esta propiedad visual mediante column-gap. */
    column-gap:12px;
    /* Alinea los elementos mediante align-content. */
    align-content:start;
    /* Alinea los elementos mediante align-items. */
    align-items:start
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=asset]>main:has(>.asset-preview:not([hidden]))>:not(.asset-preview,.tablebox) {
    /* Configura la cuadrícula mediante grid-column. */
    grid-column:1/-1
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=asset]>main:has(>.asset-preview:not([hidden]))>.list-pagination {
    /* Configura esta propiedad visual mediante order. */
    order:2
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=asset]>main>.tablebox {
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=asset]>main>.tablebox>table {
    /* Dibuja el borde del elemento mediante border-collapse. */
    border-collapse:separate;
    /* Dibuja el borde del elemento mediante border-spacing. */
    border-spacing:0 4px;
    /* Configura la tipografía mediante font-size. */
    font-size:12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=asset]>main>.tablebox :is(th,td) {
    /* Define el espacio interior mediante padding-block. */
    padding-block:5px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=asset]>main>.tablebox tbody td {
    /* Suaviza el cambio entre estados mediante transition. */
    transition:background-color .16s
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=asset]>main>.tablebox tbody tr:is(:hover,.asset-current) td {
    /* Pinta el fondo del elemento mediante background. */
    background:color-mix(in srgb,var(--accent-fill) 12%,var(--surface))
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-chip {
    /* Define cómo se distribuye el contenido mediante display. */
    display:inline-block;
    /* Pinta el fondo del elemento mediante background. */
    background:color-mix(in srgb,var(--accent-fill) 15%,var(--surface));
    /* Fija el color del texto mediante color. */
    color:var(--accent);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:20px;
    /* Define el espacio interior mediante padding. */
    padding:2px 7px;
    /* Configura la tipografía mediante font-size. */
    font-size:11px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-preview {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=asset]>main>.asset-preview:not([hidden]) {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Controla el contenido que rebasa el contenedor mediante overflow-wrap. */
    overflow-wrap:anywhere;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Fija el color del texto mediante color. */
    color:var(--ink);
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:12px;
    /* Define el espacio interior mediante padding. */
    padding:12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-preview h2 {
    /* Configura la tipografía mediante font-size. */
    font-size:16px;
    /* Define el espacio exterior mediante margin. */
    margin:4px 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-preview p,.asset-preview dl {
    /* Configura la tipografía mediante font-size. */
    font-size:12px;
    /* Define el espacio exterior mediante margin. */
    margin:8px 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-preview dl div {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Distribuye los elementos mediante justify-content. */
    justify-content:space-between;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Configura la distribución flexible mediante flex-wrap. */
    flex-wrap:wrap;
    /* Separa elementos vecinos mediante gap. */
    gap:4px;
    /* Define el espacio interior mediante padding. */
    padding:5px 0;
    /* Dibuja el borde del elemento mediante border-bottom. */
    border-bottom:1px solid var(--line)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-preview dd {
    /* Define el espacio exterior mediante margin. */
    margin:0;
    /* Configura la tipografía mediante font-weight. */
    font-weight:650
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-preview-actions {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Configura la distribución flexible mediante flex-wrap. */
    flex-wrap:wrap;
    /* Separa elementos vecinos mediante gap. */
    gap:4px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=asset] :is(.asset-peek,.asset-preview-actions button) {
    /* Define el espacio interior mediante padding. */
    padding:4px 6px;
    /* Configura la tipografía mediante font-size. */
    font-size:11px;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:26px;
    /* Fija el color del texto mediante color. */
    color:var(--accent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-peek .ui-icon,.asset-preview-actions .ui-icon {
    /* Ajusta el ancho mediante width. */
    width:14px;
    /* Ajusta la altura mediante height. */
    height:14px;
    /* Configura esta propiedad visual mediante vertical-align. */
    vertical-align:middle
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-preview-actions .ui-icon {
    /* Define el espacio exterior mediante margin-inline-end. */
    margin-inline-end:4px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(max-width:650px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout[data-section=asset]>main:has(>.asset-preview:not([hidden])) {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:minmax(0,1fr) minmax(122px,34%);
        /* Configura esta propiedad visual mediante column-gap. */
        column-gap:6px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout[data-section=asset]>main>.asset-preview {
        /* Define el espacio interior mediante padding. */
        padding:7px
    }
}
/* 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. */
    .layout[data-section=asset]>main>.tablebox tbody td {
        /* Suaviza el cambio entre estados mediante transition. */
        transition:none
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=asset]>main:has(>.asset-preview:not([hidden])) {
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:minmax(0,1fr) minmax(150px,29%)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=asset]>main>.tablebox {
    /* Dibuja el borde del elemento mediante border. */
    border:0;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:none;
    /* Pinta el fondo del elemento mediante background. */
    background:transparent
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=asset]>main>.tablebox>table {
    /* Dibuja el borde del elemento mediante border-spacing. */
    border-spacing:3px 5px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=asset]>main>.tablebox>table :is(th,td) {
    /* Dibuja el borde del elemento mediante border. */
    border:0;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:8px;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=asset]>main>.tablebox>table tbody tr:hover td {
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 3px 8px color-mix(in srgb,var(--accent-fill) 18%,transparent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=asset]>main>.tablebox tbody td:last-child {
    /* Configura esta propiedad visual mediante text-align. */
    text-align:center;
    /* Configura esta propiedad visual mediante white-space. */
    white-space:nowrap
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=asset]>main>.tablebox :is(.asset-peek,.row-action-trigger) {
    /* Define cómo se distribuye el contenido mediante display. */
    display:inline-grid;
    /* Configura esta propiedad visual mediante place-items. */
    place-items:center;
    /* Configura esta propiedad visual mediante vertical-align. */
    vertical-align:middle;
    /* Ajusta el ancho mediante width. */
    width:34px;
    /* Ajusta la altura mediante height. */
    height:34px;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:34px;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:34px;
    /* Define el espacio interior mediante padding. */
    padding:0;
    /* Define el espacio exterior mediante margin. */
    margin:0 2px;
    /* Dibuja el borde del elemento mediante border. */
    border:0;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:8px;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=asset]>main>.tablebox :is(.asset-peek,.row-action-trigger) .ui-icon {
    /* Ajusta el ancho mediante width. */
    width:17px;
    /* Ajusta la altura mediante height. */
    height:17px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=asset]>main>.tablebox :is(.asset-peek,.row-action-trigger):hover {
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 3px 9px color-mix(in srgb,var(--accent-fill) 25%,transparent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=asset]>main>.asset-preview {
    /* Dibuja el borde del elemento mediante border. */
    border:0;
    /* Define el espacio interior mediante padding. */
    padding:14px;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 5px 18px color-mix(in srgb,var(--accent-fill) 11%,transparent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-photo-hero {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura esta propiedad visual mediante place-items. */
    place-items:center;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:96px;
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:12px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:10px;
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:hidden;
    /* 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. */
.asset-photo-hero img {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Ajusta la altura mediante height. */
    height:clamp(110px,17vw,220px);
    /* Configura esta propiedad visual mediante object-fit. */
    object-fit:contain
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-photo-hero span {
    /* Configura la tipografía mediante font-size. */
    font-size:12px;
    /* Fija el color del texto mediante color. */
    color:var(--muted);
    /* Define el espacio interior mediante padding. */
    padding:8px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-preview .asset-photo-hero+.asset-chip,.asset-preview h2+.asset-chip {
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:4px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(max-width:650px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout[data-section=asset]>main:has(>.asset-preview:not([hidden])) {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:minmax(0,1fr) minmax(122px,36%)
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout[data-section=asset]>main>.asset-preview {
        /* Define el espacio interior mediante padding. */
        padding:8px
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=asset]>main>.tablebox {
    /* Define el espacio interior mediante padding. */
    padding:0 5px;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:14px;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=asset]>main>.tablebox>table {
    /* Dibuja el borde del elemento mediante border-spacing. */
    border-spacing:0 7px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=asset]>main>.tablebox>table :is(th,td) {
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=asset]>main>.tablebox>table th {
    /* Pinta el fondo del elemento mediante background. */
    background:color-mix(in srgb,var(--accent-fill) 5%,var(--surface))
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=asset]>main>.tablebox>table tbody td {
    /* Define el espacio interior mediante padding-block. */
    padding-block:9px;
    /* Dibuja el borde del elemento mediante border-block. */
    border-block: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. */
.layout[data-section=asset]>main>.tablebox>table tbody td:first-child {
    /* Dibuja el borde del elemento mediante border-inline-start. */
    border-inline-start:1px solid var(--line);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:10px 0 0 10px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=asset]>main>.tablebox>table tbody td:last-child {
    /* Dibuja el borde del elemento mediante border-inline-end. */
    border-inline-end:1px solid var(--line);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:0 10px 10px 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=asset]>main>.tablebox>table tbody tr:is(:hover,.asset-current) td {
    /* Pinta el fondo del elemento mediante background. */
    background:color-mix(in srgb,var(--accent-fill) 8%,var(--surface))
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=asset]>main>.tablebox>table tbody tr:hover td {
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 3px 5px color-mix(in srgb,var(--accent-fill) 12%,transparent)
}
/* Pinned and scrolling asset headers share the same theme surface. */
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .layout[data-section=asset]>main>.tablebox.paged-table>table>thead th,
html[data-theme] .layout[data-section=asset]>main>.tablebox.paged-table>table>thead th[data-pin] {
    /* Pinta el fondo del elemento mediante background. */
    background:color-mix(in srgb,var(--accent-fill) 9%,var(--surface));
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:none;
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-attachments {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:repeat(auto-fit,minmax(min(100%,112px),1fr));
    /* Separa elementos vecinos mediante gap. */
    gap:8px;
    /* Define el espacio exterior mediante margin. */
    margin:10px 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-attachments>section {
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Define el espacio interior mediante padding. */
    padding:7px;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:9px;
    /* Configura la tipografía mediante font-size. */
    font-size:12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-mini {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura esta propiedad visual mediante place-items. */
    place-items:center;
    /* Separa elementos vecinos mediante gap. */
    gap:3px;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:74px;
    /* Define el espacio exterior mediante margin. */
    margin:5px 0;
    /* Define el espacio interior mediante padding. */
    padding:4px;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--soft);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:5px;
    /* Configura esta propiedad visual mediante text-align. */
    text-align:center;
    /* Fija el color del texto mediante color. */
    color:var(--muted)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-mini :is(canvas,img) {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Configura esta propiedad visual mediante max-width. */
    max-width:100%;
    /* Configura esta propiedad visual mediante max-height. */
    max-height:106px;
    /* Configura esta propiedad visual mediante object-fit. */
    object-fit:contain
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-attachments button {
    /* Configura la tipografía mediante font-size. */
    font-size:11px;
    /* Define el espacio interior mediante padding. */
    padding:3px 6px
}
/* Keep the full table usable when the available width is narrow. */
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=asset]>main>.tablebox {
    /* Configura esta propiedad visual mediante container-type. */
    container-type:inline-size
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@container (max-width: 620px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    html[data-theme] .layout[data-section=asset]>main>.tablebox :is(th,td)[data-pin] {
        /* Controla la posición del elemento mediante position. */
        position:relative;
        /* Configura esta propiedad visual mediante inset. */
        inset:auto;
        /* Ajusta la superposición mediante z-index. */
        z-index:auto;
        /* Aplica una sombra al elemento mediante box-shadow. */
        box-shadow:none;
        /* Configura esta propiedad visual mediante min-width. */
        min-width:auto!important;
        /* Configura esta propiedad visual mediante max-width. */
        max-width:none;
        /* Configura esta propiedad visual mediante white-space. */
        white-space:nowrap;
        /* Controla el contenido que rebasa el contenedor mediante overflow-wrap. */
        overflow-wrap:normal;
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(max-width:760px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout[data-section=asset]>main:has(>.asset-preview:not([hidden])) {
        /* 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. */
    .layout[data-section=asset]>main>.asset-preview:not([hidden]) {
        /* Configura esta propiedad visual mediante order. */
        order:3;
        /* Ajusta el ancho mediante width. */
        width:100%;
        /* Configura esta propiedad visual mediante box-sizing. */
        box-sizing:border-box;
        /* Define el espacio exterior mediante margin-top. */
        margin-top:8px
    }
}
/* Shared record-list styling, including administration and catalog lists. */
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] main .tablebox.paged-table {
    /* Configura esta propiedad visual mediante container-type. */
    container-type:inline-size;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:14px;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Define el espacio interior mediante padding-inline. */
    padding-inline:5px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] main .tablebox.paged-table>table {
    /* Dibuja el borde del elemento mediante border-collapse. */
    border-collapse:separate;
    /* Dibuja el borde del elemento mediante border-spacing. */
    border-spacing:0 7px;
    /* Configura la tipografía mediante font-size. */
    font-size:12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] main .tablebox.paged-table>table>thead th {
    /* Pinta el fondo del elemento mediante background. */
    background:color-mix(in srgb,var(--accent-fill) 9%,var(--surface));
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] main .tablebox.paged-table>table>tbody>tr>td {
    /* Define el espacio interior mediante padding-block. */
    padding-block:9px;
    /* Dibuja el borde del elemento mediante border-block. */
    border-block:1px solid var(--line);
    /* Dibuja el borde del elemento mediante border-inline. */
    border-inline:0;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:none;
    /* Suaviza el cambio entre estados mediante transition. */
    transition:background-color .16s
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] main .tablebox.paged-table>table>tbody>tr>td:first-child {
    /* Dibuja el borde del elemento mediante border-inline-start. */
    border-inline-start:1px solid var(--line);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:10px 0 0 10px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] main .tablebox.paged-table>table>tbody>tr>td:last-child {
    /* Dibuja el borde del elemento mediante border-inline-end. */
    border-inline-end:1px solid var(--line);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:0 10px 10px 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] main .tablebox.paged-table>table>tbody>tr:is(:hover,.asset-current)>td {
    /* Pinta el fondo del elemento mediante background. */
    background:color-mix(in srgb,var(--accent-fill) 8%,var(--surface))
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] main .tablebox.paged-table>table>tbody>tr:hover>td {
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 3px 5px color-mix(in srgb,var(--accent-fill) 12%,transparent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@container(max-width:620px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    html[data-theme] main .tablebox.paged-table :is(th,td)[data-pin] {
        /* Controla la posición del elemento mediante position. */
        position:relative;
        /* Configura esta propiedad visual mediante inset. */
        inset:auto;
        /* Ajusta la superposición mediante z-index. */
        z-index:auto;
        /* Configura esta propiedad visual mediante min-width. */
        min-width:auto!important;
        /* Configura esta propiedad visual mediante max-width. */
        max-width:none;
        /* Configura esta propiedad visual mediante white-space. */
        white-space:nowrap;
        /* Controla el contenido que rebasa el contenedor mediante overflow-wrap. */
        overflow-wrap:normal
    }
}
/* 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. */
    html[data-theme] main .tablebox.paged-table>table>tbody>tr>td {
        /* Suaviza el cambio entre estados mediante transition. */
        transition:none
    }
}
/* Record previews share the asset card layout in every listing. */
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout main :is(th,td) .record-peek {
    /* Define cómo se distribuye el contenido mediante display. */
    display:inline-grid;
    /* Configura esta propiedad visual mediante place-items. */
    place-items:center;
    /* Configura esta propiedad visual mediante vertical-align. */
    vertical-align:middle;
    /* Ajusta el ancho mediante width. */
    width:34px;
    /* Ajusta la altura mediante height. */
    height:34px;
    /* Define el espacio interior mediante padding. */
    padding:0;
    /* Define el espacio exterior mediante margin-inline. */
    margin-inline:2px;
    /* Dibuja el borde del elemento mediante border. */
    border:0;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:8px;
    /* Fija el color del texto mediante color. */
    color:var(--accent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.record-peek .ui-icon {
    /* Ajusta el ancho mediante width. */
    width:17px;
    /* Ajusta la altura mediante height. */
    height:17px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout main :has(>.record-preview) {
    /* 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(150px,29%);
    /* Separa elementos vecinos mediante gap. */
    gap:8px 12px;
    /* Alinea los elementos mediante align-items. */
    align-items:start
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout main:has(>.record-preview) {
    /* 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(150px,29%);
    /* Separa elementos vecinos mediante gap. */
    gap:8px 12px;
    /* Alinea los elementos mediante align-items. */
    align-items:start;
    /* Alinea los elementos mediante align-content. */
    align-content:start
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout main:has(>.record-preview)>:not(.record-preview,.record-preview-table),
.layout main :has(>.record-preview)>:not(.record-preview,.record-preview-table) {
    /* Configura la cuadrícula mediante grid-column. */
    grid-column:1/-1
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout main .record-preview {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Controla el contenido que rebasa el contenedor mediante overflow-wrap. */
    overflow-wrap:anywhere;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Fija el color del texto mediante color. */
    color:var(--ink);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:12px;
    /* Define el espacio interior mediante padding. */
    padding:14px;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 5px 18px color-mix(in srgb,var(--accent-fill) 11%,transparent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.record-preview-table {
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.record-preview-table+.list-pagination {
    /* Configura esta propiedad visual mediante order. */
    order:2
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(max-width:760px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout main:has(>.record-preview),.layout main :has(>.record-preview) {
        /* 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. */
    .layout main .record-preview {
        /* Configura esta propiedad visual mediante order. */
        order:3
    }
}
/* Match the eye and menu controls on rows with a quick record preview. */
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .layout main td:has(>:is(.record-peek,.asset-peek)) {
    /* Configura esta propiedad visual mediante white-space. */
    white-space:nowrap
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .layout main td:has(>:is(.record-peek,.asset-peek))>:is(.record-peek,.asset-peek,.row-action-trigger) {
    /* Define cómo se distribuye el contenido mediante display. */
    display:inline-grid;
    /* Configura esta propiedad visual mediante place-items. */
    place-items:center;
    /* Configura esta propiedad visual mediante vertical-align. */
    vertical-align:middle;
    /* Ajusta el ancho mediante width. */
    width:34px;
    /* Ajusta la altura mediante height. */
    height:34px;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:34px;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:34px;
    /* Define el espacio interior mediante padding. */
    padding:0;
    /* Define el espacio exterior mediante margin. */
    margin:0 2px;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:8px;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Fija el color del texto mediante color. */
    color:var(--accent);
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:none;
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .layout main td:has(>:is(.record-peek,.asset-peek))>:is(.record-peek,.asset-peek,.row-action-trigger):is(:hover,[aria-expanded=true]) {
    /* Pinta el fondo del elemento mediante background. */
    background:color-mix(in srgb,var(--accent-fill) 12%,var(--surface));
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:var(--accent);
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .layout main td:has(>:is(.record-peek,.asset-peek))>:is(.record-peek,.asset-peek,.row-action-trigger) .ui-icon {
    /* Ajusta el ancho mediante width. */
    width:17px;
    /* Ajusta la altura mediante height. */
    height:17px;
    /* Define el espacio exterior mediante margin. */
    margin:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout main .record-preview {
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line);
    /* Dibuja el borde del elemento mediante border-top. */
    border-top:2px solid var(--accent-fill);
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 6px 20px color-mix(in srgb,var(--accent-fill) 17%,transparent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-preview .record-card-header {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Define el espacio exterior mediante margin. */
    margin:0 0 12px;
    /* Define el espacio interior mediante padding. */
    padding:0;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:0;
    /* Dibuja el borde del elemento mediante border. */
    border:0;
    /* Pinta el fondo del elemento mediante background. */
    background:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.record-card-header small,.record-block dt {
    /* Fija el color del texto mediante color. */
    color:var(--muted)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.record-card-header h2 {
    /* Configura la tipografía mediante font-size. */
    font-size:18px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.record-blocks {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:repeat(auto-fit,minmax(min(100%,155px),1fr));
    /* Separa elementos vecinos mediante gap. */
    gap:8px;
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:10px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.record-block {
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Define el espacio interior mediante padding. */
    padding:9px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:9px;
    /* 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. */
.record-block h3 {
    /* Define el espacio exterior mediante margin. */
    margin:0 0 5px;
    /* Fija el color del texto mediante color. */
    color:var(--accent);
    /* Configura la tipografía mediante font-size. */
    font-size:13px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-preview .record-block dl {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Define el espacio exterior mediante margin. */
    margin:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-preview .record-block dl>div {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Define el espacio interior mediante padding. */
    padding:5px 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-preview .record-block dl>div:last-child {
    /* Dibuja el borde del elemento mediante border-bottom. */
    border-bottom:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-preview .record-block dd {
    /* Define el espacio exterior mediante margin. */
    margin:2px 0 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-preview .asset-attachments>section {
    /* Pinta el fondo del elemento mediante background. */
    background:color-mix(in srgb,var(--accent-fill) 6%,var(--surface))
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-preview .asset-preview-actions button {
    /* Suaviza el cambio entre estados mediante transition. */
    transition:background-color .16s,box-shadow .16s
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-preview .asset-preview-actions button:hover {
    /* Pinta el fondo del elemento mediante background. */
    background:color-mix(in srgb,var(--accent-fill) 10%,var(--surface));
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 3px 9px color-mix(in srgb,var(--accent-fill) 20%,transparent)
}
/* 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. */
    .asset-preview .asset-preview-actions button {
        /* Suaviza el cambio entre estados mediante transition. */
        transition:none
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-preview .record-blocks {
    /* 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. */
.asset-preview .record-block:nth-child(n+3) {
    /* Configura la cuadrícula mediante grid-column. */
    grid-column:1/-1;
    /* Pinta el fondo del elemento mediante background. */
    background:none;
    /* Dibuja el borde del elemento mediante border-top. */
    border-top:1px solid var(--line)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-preview .record-block-lead {
    /* Define el espacio exterior mediante margin. */
    margin:4px 0;
    /* Configura la tipografía mediante font-size. */
    font-size:16px;
    /* Configura la tipografía mediante font-weight. */
    font-weight:750;
    /* Configura esta propiedad visual mediante line-height. */
    line-height:1.2
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-preview .record-block-extra {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Configura la distribución flexible mediante flex-wrap. */
    flex-wrap:wrap;
    /* Separa elementos vecinos mediante gap. */
    gap:4px 9px;
    /* Define el espacio exterior mediante margin. */
    margin:7px 0 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-preview .record-block small {
    /* Fija el color del texto mediante color. */
    color:var(--muted)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-preview .record-card-header small {
    /* Configura esta propiedad visual mediante letter-spacing. */
    letter-spacing:.06em;
    /* Configura esta propiedad visual mediante text-transform. */
    text-transform:uppercase
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=asset]>main>.asset-preview:not([hidden]) {
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line);
    /* Dibuja el borde del elemento mediante border-top. */
    border-top:2px solid var(--accent-fill)
}
/* Depreciaciones has its own pager below its results. */
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=depreciation]>main>.list-pagination {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none!important
}
/* A single opaque header tint, including sticky columns and dialog tables. */
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] body {
    /* Define una variable que otras reglas pueden reutilizar mediante --itsav-table-heading. */
    --itsav-table-heading:color-mix(in srgb,var(--accent-fill) 9%,var(--surface))
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] body table>thead>tr>:is(th,td) {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--itsav-table-heading)!important
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] body table>thead .sorthead {
    /* Pinta el fondo del elemento mediante background. */
    background:transparent
}
/* Shared elevation follows the selected accent and appearance. */
/* Aplica esta regla cuando el selector o la condición coincide. */
:root {
    /* Define una variable que otras reglas pueden reutilizar mediante --theme-elevation. */
    --theme-elevation:0 4px 14px color-mix(in srgb,var(--accent-fill) 15%,transparent);
    /* Define una variable que otras reglas pueden reutilizar mediante --theme-elevation-hover. */
    --theme-elevation-hover:0 6px 18px color-mix(in srgb,var(--accent-fill) 23%,transparent);
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark] {
    /* Define una variable que otras reglas pueden reutilizar mediante --theme-elevation. */
    --theme-elevation:0 4px 14px color-mix(in srgb,var(--accent-fill) 20%,transparent);
    /* Define una variable que otras reglas pueden reutilizar mediante --theme-elevation-hover. */
    --theme-elevation-hover:0 6px 18px color-mix(in srgb,var(--accent-fill) 29%,transparent);
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .layout>aside {
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:color-mix(in srgb,var(--accent-fill) 69%,#172433);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:color-mix(in srgb,var(--accent-fill) 40%,#101925);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:color-mix(in srgb,var(--accent-fill) 76%,#24364a);
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent] .layout>aside {
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:color-mix(in srgb,var(--accent-fill) 42%,#111621);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:color-mix(in srgb,var(--accent-fill) 20%,#0b111b);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:color-mix(in srgb,var(--accent-fill) 60%,#1a2030);
}
/* 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:var(--theme-elevation)
}
/* 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. */
    .layout>aside *, .qr-record *, #inventorySummary * {
        /* Aplica una animación mediante animation-duration. */
        animation-duration:.01ms!important;
        /* Suaviza el cambio entre estados mediante transition-duration. */
        transition-duration:.01ms!important
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dialog label.palette-switch {
    /* Controla la posición del elemento mediante position. */
    position:relative;
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Distribuye los elementos mediante justify-content. */
    justify-content:space-between;
    /* Separa elementos vecinos mediante gap. */
    gap:16px;
    /* Define el espacio interior mediante padding. */
    padding:12px 14px;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:12px;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--soft);
    /* Fija el color del texto mediante color. */
    color:var(--ink);
    /* Configura esta propiedad visual mediante cursor. */
    cursor:pointer;
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dialog .palette-switch strong,#dialog .palette-switch small {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dialog .palette-switch small {
    /* Fija el color del texto mediante color. */
    color:var(--muted);
    /* Define el espacio exterior mediante margin-top. */
    margin-top:3px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dialog .palette-switch input[type=checkbox] {
    /* Controla la posición del elemento mediante position. */
    position:absolute;
    /* Configura esta propiedad visual mediante inline-size. */
    inline-size:1px;
    /* Configura esta propiedad visual mediante block-size. */
    block-size:1px;
    /* Define el espacio interior mediante padding. */
    padding:0;
    /* Define el espacio exterior mediante margin. */
    margin:0;
    /* Configura esta propiedad visual mediante clip-path. */
    clip-path:inset(50%);
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:hidden
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dialog .palette-switch-track {
    /* Controla la posición del elemento mediante position. */
    position:relative;
    /* Configura la distribución flexible mediante flex. */
    flex:0 0 44px;
    /* Ajusta la altura mediante height. */
    height:26px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:20px;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--line);
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--muted);
    /* Configura esta propiedad visual mediante box-sizing. */
    box-sizing:border-box
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dialog .palette-switch-track::after {
    /* Define el contenido generado mediante content. */
    content:'';
    /* Controla la posición del elemento mediante position. */
    position:absolute;
    /* Configura esta propiedad visual mediante top. */
    top:3px;
    /* Configura esta propiedad visual mediante left. */
    left:3px;
    /* Ajusta el ancho mediante width. */
    width:18px;
    /* Ajusta la altura mediante height. */
    height:18px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:50%;
    /* Pinta el fondo del elemento mediante background. */
    background:white;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 1px 4px #0004
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dialog .palette-switch input:checked+.palette-switch-track {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--accent-fill);
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:var(--accent-fill)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dialog .palette-switch input:checked+.palette-switch-track::after {
    /* Transforma la geometría visual mediante transform. */
    transform:translateX(18px)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dialog .palette-switch input:focus-visible+.palette-switch-track {
    /* Configura esta propiedad visual mediante outline. */
    outline:2px solid var(--accent);
    /* Configura esta propiedad visual mediante outline-offset. */
    outline-offset:3px
}
/* 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. */
    #dialog .palette-switch-track,#dialog .palette-switch-track::after {
        /* Suaviza el cambio entre estados mediante transition. */
        transition:background-color .18s,transform .18s
    }
}
/* The inventory pager can remain mounted when switching to Inicio. */
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=dashboard]>main>.list-pagination {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none!important
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>main>.list-pagination {
    /* Controla la posición del elemento mediante position. */
    position:static;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0
}