/* ITSAV 064 — apariencia de las vistas aprobadas. Se carga después de style.css. */
/* Aplica esta regla cuando el selector o la condición coincide. */
:root {
    /* Configura la tipografía mediante font-family. */
    font-family:Inter,"Segoe UI",system-ui,sans-serif;
    /* Configura la tipografía mediante font-size. */
    font-size:14px;
    /* Define una variable que otras reglas pueden reutilizar mediante --page. */
    --page:#f1f7fa;
    /* Define una variable que otras reglas pueden reutilizar mediante --surface. */
    --surface:#fff;
    /* Define una variable que otras reglas pueden reutilizar mediante --ink. */
    --ink:#17374a;
    /* Define una variable que otras reglas pueden reutilizar mediante --muted. */
    --muted:#617c90;
    /* Define una variable que otras reglas pueden reutilizar mediante --line. */
    --line:#dbe7ee;
    /* Define una variable que otras reglas pueden reutilizar mediante --soft. */
    --soft:#edf5f9;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#087b89;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#007f89;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#06a79d;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#083d4b;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#052c3b;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#0b6573;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#e5f4f6;
    /* Define una variable que otras reglas pueden reutilizar mediante --design-shadow. */
    --design-shadow:0 5px 22px #17374a07
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark] {
    /* Define una variable que otras reglas pueden reutilizar mediante --page. */
    --page:#0c1d29;
    /* Define una variable que otras reglas pueden reutilizar mediante --surface. */
    --surface:#142a38;
    /* Define una variable que otras reglas pueden reutilizar mediante --ink. */
    --ink:#eaf4fa;
    /* Define una variable que otras reglas pueden reutilizar mediante --muted. */
    --muted:#b2c8d6;
    /* Define una variable que otras reglas pueden reutilizar mediante --line. */
    --line:#2a4456;
    /* Define una variable que otras reglas pueden reutilizar mediante --soft. */
    --soft:#1c3646;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#8de0de;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#087d87;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#31c4b7;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#083843;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#072532;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#095967;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#224657;
    /* Define una variable que otras reglas pueden reutilizar mediante --design-shadow. */
    --design-shadow:0 5px 22px #00000018
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=blue] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#245c9c;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#245c9c;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#357bc5;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#153e60;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#0a273d;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#245c80;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#e6eff9
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=violet] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#6c4797;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#6c4797;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#8559b2;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#392e52;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#231b39;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#614782;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#f0eafa
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=green] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#246c54;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#246c54;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#318a6c;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#194b3d;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#0b2f26;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#326b53;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#e5f3ed
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=blue] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#b2d1ff;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#34689f;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#89bcff;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#2b435d
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=violet] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#d8c1ff;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#7857a0;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#cba5ff;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#463750
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=green] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#a6e2cc;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#367d63;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#83d5b7;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#294b41
}
/* Aplica esta regla cuando el selector o la condición coincide. */
body {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--page);
    /* Fija el color del texto mediante color. */
    color:var(--ink)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout {
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:248px minmax(0,1fr);
    /* Pinta el fondo del elemento mediante background. */
    background:radial-gradient(ellipse at 70% 0,#dcecf640,transparent 65%),var(--page)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark] .layout {
    /* Pinta el fondo del elemento mediante background. */
    background:radial-gradient(ellipse at 75% 0,#23475e38,transparent 65%),var(--page)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>main {
    /* Controla la posición del elemento mediante position. */
    position:relative;
    /* Define el espacio interior mediante padding. */
    padding:26px 28px;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .layout>aside {
    /* Pinta el fondo del elemento mediante background. */
    background:linear-gradient(158deg,var(--sidebar-top),var(--sidebar-bottom));
    /* Define el espacio interior mediante padding. */
    padding:24px 16px;
    /* Separa elementos vecinos mediante gap. */
    gap:22px;
    /* Dibuja el borde del elemento mediante border-right. */
    border-right:1px solid #ffffff0a;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:3px 0 18px #0d293608
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>aside .brand {
    /* Separa elementos vecinos mediante gap. */
    gap:12px;
    /* Define el espacio interior mediante padding. */
    padding:0 8px 18px;
    /* Dibuja el borde del elemento mediante border-bottom. */
    border-bottom:1px solid #ffffff12;
    /* Alinea los elementos mediante align-items. */
    align-items:center
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>aside .brand>.institution-logo {
    /* Ajusta el ancho mediante width. */
    width:61px;
    /* Ajusta la altura mediante height. */
    height:69px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:11px;
    /* Define el espacio interior mediante padding. */
    padding:4px;
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:#ffffff77
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>aside .brand>span {
    /* Configura la tipografía mediante font-size. */
    font-size:25px;
    /* Configura la tipografía mediante font-weight. */
    font-weight:750;
    /* Configura esta propiedad visual mediante letter-spacing. */
    letter-spacing:.02em
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>aside .brand small {
    /* Configura la tipografía mediante font-size. */
    font-size:10px;
    /* Fija el color del texto mediante color. */
    color:#c8e1e9;
    /* Configura la tipografía mediante font-weight. */
    font-weight:400;
    /* Define el espacio exterior mediante margin-top. */
    margin-top:4px;
    /* Configura esta propiedad visual mediante line-height. */
    line-height:1.5
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>aside nav {
    /* Separa elementos vecinos mediante gap. */
    gap:14px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.nav-group>summary {
    /* Configura esta propiedad visual mediante min-height. */
    min-height:46px;
    /* Define el espacio interior mediante padding. */
    padding:10px 12px;
    /* Separa elementos vecinos mediante gap. */
    gap:10px;
    /* Fija el color del texto mediante color. */
    color:#c9dee7;
    /* Configura la tipografía mediante font-size. */
    font-size:12px;
    /* Configura la tipografía mediante font-weight. */
    font-weight:500;
    /* Configura esta propiedad visual mediante text-transform. */
    text-transform:uppercase;
    /* Configura esta propiedad visual mediante letter-spacing. */
    letter-spacing:.035em
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.nav-group>summary>.ui-icon {
    /* Ajusta el ancho mediante width. */
    width:20px;
    /* Ajusta la altura mediante height. */
    height:20px;
    /* Regula la transparencia mediante opacity. */
    opacity:1;
    /* Define el espacio exterior mediante margin. */
    margin:0;
    /* Fija el color del texto mediante color. */
    color:#e3f3fa
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.nav-group>summary:hover {
    /* Pinta el fondo del elemento mediante background. */
    background:#ffffff08
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.nav-group>div {
    /* Define el espacio exterior mediante margin. */
    margin:4px 0 4px 22px!important;
    /* Define el espacio interior mediante padding. */
    padding:2px 0 3px 12px!important;
    /* Dibuja el borde del elemento mediante border-left. */
    border-left:1px solid #ffffff23;
    /* Separa elementos vecinos mediante gap. */
    gap:4px!important
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>aside nav button {
    /* Define el espacio interior mediante padding. */
    padding:11px 12px;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:43px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:8px;
    /* Configura la tipografía mediante font-size. */
    font-size:13px;
    /* Configura la tipografía mediante font-weight. */
    font-weight:400;
    /* Separa elementos vecinos mediante gap. */
    gap:10px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>aside nav button>.ui-icon {
    /* Ajusta el ancho mediante width. */
    width:18px;
    /* Ajusta la altura mediante height. */
    height:18px;
    /* Define el espacio exterior mediante margin. */
    margin:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>aside nav button.active::before {
    /* Ajusta el ancho mediante width. */
    width:3px;
    /* Configura esta propiedad visual mediante left. */
    left:-14px;
    /* Configura esta propiedad visual mediante top. */
    top:9px;
    /* Configura esta propiedad visual mediante bottom. */
    bottom:9px;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--accent-bright)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .layout>aside nav button:is(:hover,.active) {
    /* Pinta el fondo del elemento mediante background. */
    background:linear-gradient(90deg,var(--sidebar-hover),#ffffff04);
    /* Fija el color del texto mediante color. */
    color:#fff
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>aside nav button[data-nav=dashboard] {
    /* Configura esta propiedad visual mediante min-height. */
    min-height:48px;
    /* Configura la tipografía mediante font-size. */
    font-size:14px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.nav-chevron {
    /* Ajusta el ancho mediante width. */
    width:18px;
    /* Ajusta la altura mediante height. */
    height:18px;
    /* Fija el color del texto mediante color. */
    color:#cae1ec
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.nav-group>summary:focus-visible {
    /* Configura esta propiedad visual mediante outline. */
    outline:2px solid #4fd4d4;
    /* Configura esta propiedad visual mediante outline-offset. */
    outline-offset:2px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#personalMenu {
    /* Define el espacio interior mediante padding. */
    padding:16px 6px 10px;
    /* Define el espacio exterior mediante margin-top. */
    margin-top:auto;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:73px;
    /* Separa elementos vecinos mediante gap. */
    gap:10px;
    /* Dibuja el borde del elemento mediante border-top. */
    border-top:1px solid #ffffff28;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#personalMenu:hover {
    /* Pinta el fondo del elemento mediante background. */
    background:#ffffff07
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.profile-avatar {
    /* Ajusta el ancho mediante width. */
    width:36px;
    /* Ajusta la altura mediante height. */
    height:36px;
    /* Pinta el fondo del elemento mediante background. */
    background:#dbeff8;
    /* Fija el color del texto mediante color. */
    color:#1b475e;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid #ffffff55;
    /* Configura la tipografía mediante font-size. */
    font-size:12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.profile-identity strong {
    /* Configura la tipografía mediante font-size. */
    font-size:12px;
    /* Configura esta propiedad visual mediante line-height. */
    line-height:1.5;
    /* Configura esta propiedad visual mediante max-width. */
    max-width:145px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.profile-identity small {
    /* Configura la tipografía mediante font-size. */
    font-size:10px;
    /* Fija el color del texto mediante color. */
    color:#bbd7e1
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>aside #logout {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Separa elementos vecinos mediante gap. */
    gap:10px;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:40px;
    /* Dibuja el borde del elemento mediante border. */
    border:0;
    /* Dibuja el borde del elemento mediante border-top. */
    border-top:1px solid #ffffff14;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:0;
    /* Define el espacio interior mediante padding. */
    padding:14px 8px 0;
    /* Configura la tipografía mediante font-size. */
    font-size:12px;
    /* Fija el color del texto mediante color. */
    color:#dbeaf0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.ui-version {
    /* Configura la tipografía mediante font-size. */
    font-size:9px;
    /* Fija el color del texto mediante color. */
    color:#a5c9d5;
    /* Configura esta propiedad visual mediante letter-spacing. */
    letter-spacing:.04em;
    /* Configura esta propiedad visual mediante text-align. */
    text-align:center;
    /* Define el espacio exterior mediante margin-top. */
    margin-top:-12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>main>header {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex!important;
    /* Alinea los elementos mediante align-items. */
    align-items:center!important;
    /* Distribuye los elementos mediante justify-content. */
    justify-content:space-between!important;
    /* Separa elementos vecinos mediante gap. */
    gap:16px;
    /* Define el espacio interior mediante padding. */
    padding:0 0 18px;
    /* Define el espacio exterior mediante margin. */
    margin:0 0 16px;
    /* 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. */
.layout>main>header>div:not(.header-tools) {
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Configura esta propiedad visual mediante text-align. */
    text-align:left
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>main>header small {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* 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 letter-spacing. */
    letter-spacing:.025em;
    /* Define el espacio exterior mediante margin. */
    margin:0 0 5px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>main>header h1 {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Separa elementos vecinos mediante gap. */
    gap:10px;
    /* Configura la tipografía mediante font-size. */
    font-size:24px;
    /* Configura esta propiedad visual mediante line-height. */
    line-height:1.3;
    /* Configura la tipografía mediante font-weight. */
    font-weight:650;
    /* Define el espacio exterior mediante margin. */
    margin:0;
    /* Fija el color del texto mediante color. */
    color:var(--ink)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>main>header h1>.ui-icon {
    /* Ajusta el ancho mediante width. */
    width:24px;
    /* Ajusta la altura mediante height. */
    height:24px;
    /* Define el espacio exterior mediante margin. */
    margin:0;
    /* Fija el color del texto mediante color. */
    color:var(--accent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.header-tools {
    /* Separa elementos vecinos mediante gap. */
    gap:9px;
    /* Define el espacio exterior mediante margin. */
    margin:0!important
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.header-tools button {
    /* Configura esta propiedad visual mediante min-height. */
    min-height:35px;
    /* Define el espacio interior mediante padding. */
    padding:8px 11px;
    /* Configura la tipografía mediante font-size. */
    font-size:12px;
    /* Separa elementos vecinos mediante gap. */
    gap:5px;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line);
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Fija el color del texto mediante color. */
    color:var(--ink);
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 2px 8px #17374a04
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.header-tools button>.ui-icon {
    /* Ajusta el ancho mediante width. */
    width:16px;
    /* Ajusta la altura mediante height. */
    height:16px;
    /* Define el espacio exterior mediante margin. */
    margin:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#themeToggle {
    /* Ajusta el ancho mediante width. */
    width:36px;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:36px;
    /* Define el espacio interior mediante padding. */
    padding:8px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#themeToggle>span {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#homeButton>span {
    /* Define cómo se distribuye el contenido mediante display. */
    display:inline
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#message:empty {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=dashboard]>main>header {
    /* Controla la posición del elemento mediante position. */
    position:absolute;
    /* Configura esta propiedad visual mediante right. */
    right:28px;
    /* Configura esta propiedad visual mediante top. */
    top:26px;
    /* Dibuja el borde del elemento mediante border. */
    border:0;
    /* Define el espacio interior mediante padding. */
    padding:0;
    /* Ajusta la superposición mediante z-index. */
    z-index:2
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-section=dashboard]>main>header>div:not(.header-tools) {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .toolbar {
    /* Define el espacio exterior mediante margin. */
    margin:0 0 14px;
    /* Define el espacio interior mediante padding. */
    padding:14px 16px;
    /* Separa elementos vecinos mediante gap. */
    gap:9px;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line);
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:12px;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:var(--design-shadow);
    /* Alinea los elementos mediante align-items. */
    align-items:center
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.toolbar>input {
    /* Configura esta propiedad visual mediante min-width. */
    min-width:170px;
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:var(--line);
    /* Pinta el fondo del elemento mediante background. */
    background:var(--page);
    /* Configura la tipografía mediante font-size. */
    font-size:13px;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:40px;
    /* Define el espacio interior mediante padding. */
    padding:10px 13px;
    /* Configura la distribución flexible mediante flex. */
    flex:1
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.toolbar>button,.toolbar>a {
    /* Configura la tipografía mediante font-size. */
    font-size:12px;
    /* Configura la tipografía mediante font-weight. */
    font-weight:550;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:40px;
    /* Define el espacio interior mediante padding. */
    padding:10px 14px;
    /* Separa elementos vecinos mediante gap. */
    gap:6px;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.toolbar .ui-icon {
    /* Ajusta el ancho mediante width. */
    width:16px;
    /* Ajusta la altura mediante height. */
    height:16px;
    /* Define el espacio exterior mediante margin. */
    margin:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.toolbar>button:not(#add) {
    /* 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-color. */
    border-color:var(--line)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] #add {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--accent-fill);
    /* Fija el color del texto mediante color. */
    color:white;
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:var(--accent-fill);
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 3px 8px #087c8619
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#add:hover {
    /* Configura esta propiedad visual mediante filter. */
    filter:brightness(1.06)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.toolbar>button:hover,.toolbar>a:hover {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--soft);
    /* 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>.tablebox {
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:12px;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:var(--design-shadow);
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .layout main>.tablebox th {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--soft);
    /* Fija el color del texto mediante color. */
    color:var(--ink);
    /* Define el espacio interior mediante padding. */
    padding:13px 12px;
    /* Configura la tipografía mediante font-size. */
    font-size:11px;
    /* Configura esta propiedad visual mediante letter-spacing. */
    letter-spacing:.005em;
    /* Configura la tipografía mediante font-weight. */
    font-weight:600;
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:var(--line)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .layout main>.tablebox td {
    /* Fija el color del texto mediante color. */
    color:var(--ink);
    /* Define el espacio interior mediante padding. */
    padding:12px;
    /* Configura la tipografía mediante font-size. */
    font-size:12px;
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:var(--line);
    /* Ajusta la altura mediante height. */
    height:56px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout main>.tablebox tbody tr:last-child td {
    /* Dibuja el borde del elemento mediante border-bottom. */
    border-bottom:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout main>.tablebox tbody tr:hover {
    /* Pinta el fondo del elemento mediante background. */
    background:color-mix(in srgb,var(--soft) 65%,var(--surface))
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .layout main>.tablebox th .sorthead {
    /* Configura la tipografía mediante font-size. */
    font-size:inherit;
    /* Configura la tipografía mediante font-weight. */
    font-weight:600;
    /* Define el espacio interior mediante padding. */
    padding:4px 3px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:6px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout main>.tablebox input[type=checkbox] {
    /* Configura esta propiedad visual mediante accent-color. */
    accent-color:var(--accent-fill);
    /* Ajusta el ancho mediante width. */
    width:14px;
    /* Ajusta la altura mediante height. */
    height:14px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.row-action-trigger {
    /* Define cómo se distribuye el contenido mediante display. */
    display:inline-flex;
    /* Distribuye los elementos mediante justify-content. */
    justify-content:center;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Ajusta el ancho mediante width. */
    width:34px;
    /* Ajusta la altura mediante height. */
    height:34px;
    /* 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:8px;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Fija el color del texto mediante color. */
    color:var(--ink)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.row-action-trigger>.ui-icon {
    /* Define el espacio exterior mediante margin. */
    margin:0;
    /* 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. */
.row-action-trigger:hover {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--soft);
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:var(--accent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.column-info-button {
    /* Configura la tipografía mediante font-size. */
    font-size:11px;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:30px;
    /* Define el espacio interior mediante padding. */
    padding:6px 9px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:7px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.small {
    /* Configura la tipografía mediante font-size. */
    font-size:11px;
    /* Define el espacio interior mediante padding. */
    padding:6px 9px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.floating-row-menu {
    /* Define el espacio interior mediante padding. */
    padding:6px!important;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line)!important;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:12px!important;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 12px 36px #062a4130!important;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface)!important
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .floating-row-menu :is(button,a) {
    /* Configura esta propiedad visual mediante min-height. */
    min-height:40px;
    /* Define el espacio interior mediante padding. */
    padding:10px 12px;
    /* Configura la tipografía mediante font-size. */
    font-size:12px;
    /* Separa elementos vecinos mediante gap. */
    gap:9px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.floating-row-menu .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. */
.dashboard-heading {
    /* Define el espacio exterior mediante margin. */
    margin:0 0 22px;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:52px;
    /* Define el espacio interior mediante padding-right. */
    padding-right:135px;
    /* Separa elementos vecinos mediante gap. */
    gap:12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-heading h2 {
    /* Configura la tipografía mediante font-size. */
    font-size:31px;
    /* Configura esta propiedad visual mediante line-height. */
    line-height:1.2;
    /* Configura la tipografía mediante font-weight. */
    font-weight:700;
    /* Configura esta propiedad visual mediante letter-spacing. */
    letter-spacing:-.025em;
    /* Define el espacio exterior mediante margin. */
    margin:0 0 8px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-heading p {
    /* Configura la tipografía mediante font-size. */
    font-size:12px;
    /* Define el espacio exterior mediante margin. */
    margin:0;
    /* Fija el color del texto mediante color. */
    color:var(--muted)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-updated {
    /* Configura la tipografía mediante font-size. */
    font-size:11px;
    /* Define el espacio exterior mediante margin-right. */
    margin-right:0;
    /* Configura esta propiedad visual mediante white-space. */
    white-space:normal
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-summary {
    /* Separa elementos vecinos mediante gap. */
    gap:14px;
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:17px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-summary>div {
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:12px;
    /* Define el espacio interior mediante padding. */
    padding:18px 20px;
    /* Separa elementos vecinos mediante gap. */
    gap:15px;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:105px;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:var(--design-shadow);
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:var(--line);
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-summary>div>.ui-icon {
    /* Ajusta el ancho mediante width. */
    width:52px;
    /* Ajusta la altura mediante height. */
    height:52px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:12px;
    /* Define el espacio interior mediante padding. */
    padding:13px;
    /* Pinta el fondo del elemento mediante background. */
    background:color-mix(in srgb,var(--accent-bright) 11%,var(--surface));
    /* Fija el color del texto mediante color. */
    color:var(--accent-fill)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark] .dashboard-summary>div>.ui-icon {
    /* Fija el color del texto mediante color. */
    color:var(--accent-bright)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-summary span {
    /* Configura la tipografía mediante font-size. */
    font-size:12px;
    /* Fija el color del texto mediante color. */
    color:var(--muted)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-summary strong {
    /* Configura la tipografía mediante font-size. */
    font-size:26px;
    /* Configura esta propiedad visual mediante line-height. */
    line-height:1.3;
    /* Define el espacio exterior mediante margin-top. */
    margin-top:5px;
    /* Configura esta propiedad visual mediante letter-spacing. */
    letter-spacing:-.015em
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-overview {
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:minmax(260px,.95fr) minmax(0,2.25fr);
    /* Separa elementos vecinos mediante gap. */
    gap:15px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring {
    /* 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:13px;
    /* Define el espacio interior mediante padding. */
    padding:18px 20px;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:var(--design-shadow);
    /* Alinea los elementos mediante align-self. */
    align-self:stretch
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring h3 {
    /* Configura la tipografía mediante font-size. */
    font-size:17px;
    /* Configura la tipografía mediante font-weight. */
    font-weight:650;
    /* Define el espacio exterior mediante margin. */
    margin:0 0 15px;
    /* Configura esta propiedad visual mediante line-height. */
    line-height:1.4
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring-title {
    /* Configura la tipografía mediante font-size. */
    font-size:13px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring-title .ui-icon {
    /* Ajusta el ancho mediante width. */
    width:17px;
    /* Ajusta la altura mediante height. */
    height:17px;
    /* Define el espacio exterior mediante margin. */
    margin:0;
    /* Fija el color del texto mediante color. */
    color:var(--accent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring-title>span {
    /* Configura la tipografía mediante font-size. */
    font-size:10px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring-chart {
    /* Configura esta propiedad visual mediante max-width. */
    max-width:208px;
    /* Define el espacio exterior mediante margin. */
    margin:16px auto 18px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring-base {
    /* Configura esta propiedad visual mediante stroke. */
    stroke:#c4b7a6
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring-chart circle {
    /* Configura esta propiedad visual mediante stroke-width. */
    stroke-width:12
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring-number {
    /* Configura la tipografía mediante font-size. */
    font-size:28px;
    /* Configura la tipografía mediante font-weight. */
    font-weight:700
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring-label {
    /* Configura la tipografía mediante font-size. */
    font-size:11px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring [data-summary-slot] {
    /* Configura esta propiedad visual mediante min-height. */
    min-height:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring-data .summary-pair {
    /* Define el espacio interior mediante padding. */
    padding:10px 0;
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:var(--line);
    /* Configura la tipografía mediante font-size. */
    font-size:12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring-data .summary-pair>span {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Separa elementos vecinos mediante gap. */
    gap:8px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring-data .summary-pair>span::before {
    /* Define el contenido generado mediante content. */
    content:"";
    /* Ajusta el ancho mediante width. */
    width:10px;
    /* Ajusta la altura mediante height. */
    height:10px;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--accent-bright);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:50%;
    /* Configura la distribución flexible mediante flex-shrink. */
    flex-shrink:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring-data .summary-pair:nth-child(2)>span::before {
    /* Pinta el fondo del elemento mediante background. */
    background:#c4b7a6
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring-data .summary-pair:nth-child(3)>span::before {
    /* Pinta el fondo del elemento mediante background. */
    background:#b6c2ce
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring-data .summary-pair:nth-child(4)>span::before {
    /* Pinta el fondo del elemento mediante background. */
    background:#6a89a2
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring-data strong {
    /* Configura la tipografía mediante font-size. */
    font-size:12px;
    /* Configura la tipografía mediante font-weight. */
    font-weight:650
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-right {
    /* Separa elementos vecinos mediante gap. */
    gap:14px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-modules {
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:repeat(2,minmax(0,1fr));
    /* Separa elementos vecinos mediante gap. */
    gap:14px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-module {
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:12px;
    /* Define el espacio interior mediante padding. */
    padding:16px;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line);
    /* Pinta el fondo del elemento mediante background. */
    background: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;
    /* 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. */
.summary-module h3 {
    /* Configura la tipografía mediante font-size. */
    font-size:12px;
    /* Configura la tipografía mediante font-weight. */
    font-weight:650;
    /* Configura esta propiedad visual mediante line-height. */
    line-height:1.5;
    /* Define el espacio exterior mediante margin. */
    margin:0 0 12px;
    /* Separa elementos vecinos mediante gap. */
    gap:9px;
    /* Alinea los elementos mediante align-items. */
    align-items:center
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.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:7px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:8px;
    /* Pinta el fondo del elemento mediante background. */
    background:color-mix(in srgb,var(--accent-bright) 9%,var(--surface));
    /* Fija el color del texto mediante color. */
    color:var(--accent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-module [data-summary-slot] {
    /* Configura esta propiedad visual mediante min-height. */
    min-height:95px;
    /* Configura la distribución flexible mediante flex. */
    flex:1
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-name {
    /* Configura la tipografía mediante font-size. */
    font-size:13px;
    /* Configura esta propiedad visual mediante line-height. */
    line-height:1.5;
    /* Configura la tipografía mediante font-weight. */
    font-weight:600;
    /* Define el espacio exterior mediante margin. */
    margin:7px 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-pair {
    /* Configura la tipografía mediante font-size. */
    font-size:12px;
    /* Separa elementos vecinos mediante gap. */
    gap:8px;
    /* Configura esta propiedad visual mediante line-height. */
    line-height:1.5;
    /* Define el espacio exterior mediante margin. */
    margin:7px 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-note {
    /* Configura la tipografía mediante font-size. */
    font-size:11px;
    /* Configura esta propiedad visual mediante line-height. */
    line-height:1.65;
    /* Define el espacio exterior mediante margin. */
    margin:7px 0;
    /* Fija el color del texto mediante color. */
    color:var(--muted)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-event {
    /* Configura la tipografía mediante font-size. */
    font-size:10px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-indicators {
    /* Define el espacio exterior mediante margin-top. */
    margin-top:12px;
    /* Separa elementos vecinos mediante gap. */
    gap:5px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-indicators>span {
    /* Ajusta el ancho mediante width. */
    width:5px;
    /* Ajusta la altura mediante height. */
    height:5px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-indicators>span.active {
    /* Ajusta el ancho mediante width. */
    width:18px;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--accent-bright)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-track {
    /* Ajusta la altura mediante height. */
    height:5px;
    /* Define el espacio exterior mediante margin. */
    margin:12px 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.quick-access,.catalog-shortcuts {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:12px;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line);
    /* Define el espacio interior mediante padding. */
    padding:14px 16px;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:var(--design-shadow)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.quick-access h3,.catalog-shortcuts h3 {
    /* Configura la tipografía mediante font-size. */
    font-size:15px;
    /* Configura la tipografía mediante font-weight. */
    font-weight:650;
    /* Define el espacio exterior mediante margin. */
    margin:0 0 12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.quick-access>div {
    /* Separa elementos vecinos mediante gap. */
    gap:12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.quick-access button {
    /* Configura esta propiedad visual mediante min-height. */
    min-height:55px;
    /* Configura la tipografía mediante font-size. */
    font-size:12px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:10px;
    /* Pinta el fondo del elemento mediante background. */
    background:color-mix(in srgb,var(--page) 65%,var(--surface));
    /* Define el espacio interior mediante padding. */
    padding:11px 14px;
    /* Separa elementos vecinos mediante gap. */
    gap:10px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.quick-access button .ui-icon {
    /* Ajusta el ancho mediante width. */
    width:32px;
    /* Ajusta la altura mediante height. */
    height:32px;
    /* Define el espacio interior mediante padding. */
    padding:7px;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--soft);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:50%;
    /* Fija el color del texto mediante color. */
    color:var(--accent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.catalog-shortcuts {
    /* Define el espacio exterior mediante margin-top. */
    margin-top:14px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.catalog-shortcuts>div {
    /* Separa elementos vecinos mediante gap. */
    gap:12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.catalog-shortcuts button {
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:9px;
    /* Define el espacio interior mediante padding. */
    padding:11px 13px;
    /* Separa elementos vecinos mediante gap. */
    gap:12px;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Configura esta propiedad visual mediante min-height. */
    min-height:58px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.catalog-shortcuts button .ui-icon {
    /* Ajusta el ancho mediante width. */
    width:32px;
    /* Ajusta la altura mediante height. */
    height:32px;
    /* Define el espacio interior mediante padding. */
    padding:7px;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--soft);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:50%;
    /* Fija el color del texto mediante color. */
    color:var(--accent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.catalog-shortcuts button span {
    /* Configura la tipografía mediante font-size. */
    font-size:12px;
    /* Configura esta propiedad visual mediante line-height. */
    line-height:1.4
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.catalog-shortcuts button strong {
    /* Configura la tipografía mediante font-size. */
    font-size:14px;
    /* Define el espacio exterior mediante margin-top. */
    margin-top:3px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.catalog-shortcuts .shortcut-arrow {
    /* Configura la tipografía mediante font-size. */
    font-size:20px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-warning-details {
    /* Define el espacio exterior mediante margin. */
    margin:10px 0 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-warning-details>summary {
    /* Configura la tipografía mediante font-size. */
    font-size:11px;
    /* Define el espacio interior mediante padding. */
    padding:6px 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] dialog {
    /* 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:15px;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 22px 70px #05233d40;
    /* Define el espacio interior mediante padding. */
    padding:24px;
    /* Configura esta propiedad visual mediante max-height. */
    max-height:88dvh
}
/* Aplica esta regla cuando el selector o la condición coincide. */
dialog::backdrop {
    /* Pinta el fondo del elemento mediante background. */
    background:#071e3299;
    /* Configura esta propiedad visual mediante backdrop-filter. */
    backdrop-filter:blur(4px)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
dialog h2 {
    /* Configura la tipografía mediante font-size. */
    font-size:20px;
    /* Configura la tipografía mediante font-weight. */
    font-weight:650;
    /* Configura esta propiedad visual mediante letter-spacing. */
    letter-spacing:-.02em;
    /* Define el espacio exterior mediante margin. */
    margin:0 0 20px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.grid {
    /* Separa elementos vecinos mediante gap. */
    gap:16px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
label {
    /* Configura la tipografía mediante font-size. */
    font-size:12px;
    /* Configura la tipografía mediante font-weight. */
    font-weight:500;
    /* Separa elementos vecinos mediante gap. */
    gap:7px;
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:14px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] :is(input,select,textarea) {
    /* Configura la tipografía mediante font-size. */
    font-size:13px;
    /* 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:8px;
    /* Define el espacio interior mediante padding. */
    padding:10px 12px;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
input:focus,select:focus,textarea:focus {
    /* Configura esta propiedad visual mediante outline. */
    outline:2px solid color-mix(in srgb,var(--accent-bright) 35%,transparent);
    /* Configura esta propiedad visual mediante outline-offset. */
    outline-offset:1px;
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:var(--accent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
input[readonly] {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--soft)!important;
    /* Fija el color del texto mediante color. */
    color:var(--muted)!important
}
/* Aplica esta regla cuando el selector o la condición coincide. */
input[type=checkbox],input[type=radio] {
    /* Configura esta propiedad visual mediante accent-color. */
    accent-color:var(--accent-fill);
    /* Define el espacio interior mediante padding. */
    padding:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.grid>label {
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
dialog .grid :is(input:not([type=checkbox]),select) {
    /* Ajusta el ancho mediante width. */
    width:100%
}
/* Aplica esta regla cuando el selector o la condición coincide. */
dialog footer {
    /* Separa elementos vecinos mediante gap. */
    gap:10px;
    /* Define el espacio interior mediante padding-top. */
    padding-top:15px;
    /* Dibuja el borde del elemento mediante border-top. */
    border-top:1px solid var(--line);
    /* Define el espacio exterior mediante margin-top. */
    margin-top:18px;
    /* Configura la distribución flexible mediante flex-wrap. */
    flex-wrap:wrap
}
/* Aplica esta regla cuando el selector o la condición coincide. */
dialog footer button {
    /* Configura la tipografía mediante font-size. */
    font-size:12px;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:37px;
    /* Define el espacio interior mediante padding. */
    padding:9px 14px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:8px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.profile-tabs {
    /* Separa elementos vecinos mediante gap. */
    gap:8px;
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:20px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.profile-tabs button {
    /* Configura la tipografía mediante font-size. */
    font-size:12px;
    /* Define el espacio interior mediante padding. */
    padding:9px 12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.profile-tabs button[aria-selected=true] {
    /* Dibuja el borde del elemento mediante border-bottom. */
    border-bottom:2px solid var(--accent)!important;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:7px 7px 0 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.profile-overview {
    /* Define el espacio interior mediante padding. */
    padding:15px;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:11px;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--soft);
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:20px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.profile-overview>.profile-avatar {
    /* Ajusta el ancho mediante width. */
    width:64px;
    /* Ajusta la altura mediante height. */
    height:64px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.accent-picker {
    /* Separa elementos vecinos mediante gap. */
    gap:12px;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:var(--line)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.accent-picker label {
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:9px;
    /* Define el espacio interior mediante padding. */
    padding:12px;
    /* Separa elementos vecinos mediante gap. */
    gap:8px;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:50px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.accent-picker label:has(input:checked) {
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:var(--accent);
    /* Pinta el fondo del elemento mediante background. */
    background:var(--soft)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.accent-swatch {
    /* Ajusta el ancho mediante width. */
    width:25px;
    /* Ajusta la altura mediante height. */
    height:25px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:7px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.preference-order-row {
    /* Define el espacio interior mediante padding. */
    padding:9px 10px;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:9px;
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:var(--line);
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:6px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.preference-order-row>span {
    /* Configura la tipografía mediante font-size. */
    font-size:12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.preference-order h3 {
    /* Configura la tipografía mediante font-size. */
    font-size:13px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.preference-order-row button {
    /* Ajusta el ancho mediante width. */
    width:32px;
    /* Ajusta la altura mediante height. */
    height:32px;
    /* Configura la tipografía mediante font-size. */
    font-size:14px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.login {
    /* Pinta el fondo del elemento mediante background. */
    background:radial-gradient(ellipse at top,var(--soft),var(--page));
    /* Define el espacio interior mediante padding. */
    padding:20px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.login form {
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:16px;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 12px 50px #07324a10;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Define el espacio interior mediante padding. */
    padding:30px;
    /* Ajusta el ancho mediante width. */
    width:min(430px,100%)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.login h1 {
    /* Configura la tipografía mediante font-size. */
    font-size:24px;
    /* Configura esta propiedad visual mediante line-height. */
    line-height:1.3;
    /* Configura esta propiedad visual mediante letter-spacing. */
    letter-spacing:-.025em;
    /* Define el espacio exterior mediante margin. */
    margin:0 0 20px;
    /* Configura esta propiedad visual mediante text-align. */
    text-align:center
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.login p {
    /* Configura la tipografía mediante font-size. */
    font-size:12px;
    /* Configura esta propiedad visual mediante line-height. */
    line-height:1.7;
    /* Fija el color del texto mediante color. */
    color:var(--muted)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.login-logo {
    /* Ajusta el ancho mediante width. */
    width:92px;
    /* Ajusta la altura mediante height. */
    height:103px;
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:20px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.login .auth-buttons {
    /* Separa elementos vecinos mediante gap. */
    gap:12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.quick-section-grid {
    /* Separa elementos vecinos mediante gap. */
    gap:11px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.quick-section-grid button {
    /* Configura esta propiedad visual mediante min-height. */
    min-height:52px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:10px;
    /* Configura la tipografía mediante font-size. */
    font-size:13px;
    /* Define el espacio interior mediante padding. */
    padding:13px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.quick-section-grid .ui-icon {
    /* Fija el color del texto mediante color. */
    color:var(--accent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] :is(.summary-badge.upcoming,.column-info-button.upcoming,.expiration-soon,.expiration-soon *) {
    /* Pinta el fondo del elemento mediante background. */
    background:#fff0b3;
    /* Fija el color del texto mediante color. */
    color:#684600;
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:#f3d56e
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] :is(.summary-badge.expired,.column-info-button.expired) {
    /* Pinta el fondo del elemento mediante background. */
    background:#ffe2e2;
    /* Fija el color del texto mediante color. */
    color:#8f1d1d;
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:#f0b1b1
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .exhausted {
    /* Pinta el fondo del elemento mediante background. */
    background:#ffe2e2;
    /* Fija el color del texto mediante color. */
    color:#8f1d1d;
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:#f0b1b1
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .low-stock {
    /* Pinta el fondo del elemento mediante background. */
    background:#fff0d8;
    /* Fija el color del texto mediante color. */
    color:#874610;
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:#ecc490
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(min-width:1500px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .summary-modules {
        /* 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. */
    .dashboard-overview {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:minmax(295px,.85fr) minmax(0,2.5fr)
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(min-width:1800px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:270px minmax(0,1fr)
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout>main {
        /* Define el espacio interior mediante padding. */
        padding:30px 38px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout[data-section=dashboard]>main>header {
        /* Configura esta propiedad visual mediante right. */
        right:38px;
        /* Configura esta propiedad visual mediante top. */
        top:30px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .dashboard-heading h2 {
        /* Configura la tipografía mediante font-size. */
        font-size:35px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .summary-module [data-summary-slot] {
        /* Configura esta propiedad visual mediante min-height. */
        min-height:105px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .summary-ring-chart {
        /* Configura esta propiedad visual mediante max-width. */
        max-width:232px
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(max-width:1150px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout>main {
        /* Define el espacio interior mediante padding. */
        padding:22px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .dashboard-overview {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:1fr
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .summary-ring {
        /* Define cómo se distribuye el contenido mediante display. */
        display:block;
        /* Configura esta propiedad visual mediante max-width. */
        max-width:none
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .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(0,1fr) minmax(0,1fr);
        /* Alinea los elementos mediante align-items. */
        align-items:center;
        /* Configura esta propiedad visual mediante column-gap. */
        column-gap:25px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .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. */
    .summary-ring-chart {
        /* Configura la cuadrícula mediante grid-column. */
        grid-column:1;
        /* Configura esta propiedad visual mediante max-width. */
        max-width:175px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .summary-ring-data {
        /* Configura la cuadrícula mediante grid-column. */
        grid-column:2;
        /* Define cómo se distribuye el contenido mediante display. */
        display:block
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .dashboard-heading h2 {
        /* Configura la tipografía mediante font-size. */
        font-size:26px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .dashboard-summary strong {
        /* Configura la tipografía mediante font-size. */
        font-size:23px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .dashboard-summary>div {
        /* 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. */
    .dashboard-summary>div>.ui-icon {
        /* Ajusta el ancho mediante width. */
        width:40px;
        /* Ajusta la altura mediante height. */
        height:40px;
        /* Define el espacio interior mediante padding. */
        padding:10px
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(max-width:1000px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout {
        /* Define cómo se distribuye el contenido mediante display. */
        display:block
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout>main {
        /* Define el espacio interior mediante padding. */
        padding:20px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout>aside {
        /* Ajusta el ancho mediante width. */
        width:min(280px,86vw);
        /* Define el espacio interior mediante padding. */
        padding:20px 16px;
        /* Separa elementos vecinos mediante gap. */
        gap:20px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout>main>header {
        /* Separa elementos vecinos mediante gap. */
        gap:10px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout>main>header h1 {
        /* Configura la tipografía mediante font-size. */
        font-size:22px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout>main>header #openNavigation {
        /* Define cómo se distribuye el contenido mediante display. */
        display:inline-flex;
        /* Alinea los elementos mediante align-items. */
        align-items:center;
        /* Distribuye los elementos mediante justify-content. */
        justify-content:center;
        /* Ajusta el ancho mediante width. */
        width:36px;
        /* Ajusta la altura mediante height. */
        height:36px;
        /* Configura esta propiedad visual mediante min-width. */
        min-width:36px;
        /* Define el espacio interior mediante padding. */
        padding:8px;
        /* Dibuja el borde del elemento mediante border-color. */
        border-color:var(--line);
        /* Pinta el fondo del elemento mediante background. */
        background:var(--surface)
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout>main>header>div:not(.header-tools) {
        /* Define el espacio exterior mediante margin-right. */
        margin-right:auto
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout[data-section=dashboard]>main>header {
        /* Controla la posición del elemento mediante position. */
        position:static;
        /* Define el espacio exterior mediante margin. */
        margin:0 0 18px;
        /* Define el espacio interior mediante padding. */
        padding:0;
        /* Distribuye los elementos mediante justify-content. */
        justify-content:space-between!important
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout[data-section=dashboard]>main>header>div:not(.header-tools) {
        /* 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=dashboard]>main>header>.header-tools {
        /* Define el espacio exterior mediante margin-left. */
        margin-left:auto!important
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .dashboard-heading {
        /* Define el espacio interior mediante padding-right. */
        padding-right:0
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .dashboard-updated {
        /* Define cómo se distribuye el contenido mediante display. */
        display:flex
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout.navigation-open>aside {
        /* Pinta el fondo del elemento mediante background. */
        background:linear-gradient(158deg,color-mix(in srgb,var(--sidebar-top) 95%,transparent),color-mix(in srgb,var(--sidebar-bottom) 88%,transparent))!important;
        /* Configura esta propiedad visual mediante backdrop-filter. */
        backdrop-filter:blur(16px)
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .navigation-shade:not([hidden]) {
        /* Pinta el fondo del elemento mediante background. */
        background:#09233588;
        /* Configura esta propiedad visual mediante backdrop-filter. */
        backdrop-filter:blur(3px)
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .catalog-shortcuts>div {
        /* 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. */
@media(max-width:650px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout>main {
        /* Define el espacio interior mediante padding. */
        padding:16px 12px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout>main>header {
        /* Configura la distribución flexible mediante flex-wrap. */
        flex-wrap:nowrap!important;
        /* Separa elementos vecinos mediante gap. */
        gap:8px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout>main>header h1 {
        /* Configura la tipografía mediante font-size. */
        font-size:20px;
        /* Separa elementos vecinos mediante gap. */
        gap:7px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout>main>header h1 .ui-icon {
        /* Ajusta el ancho mediante width. */
        width:21px;
        /* Ajusta la altura mediante height. */
        height:21px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout>main>header small {
        /* Configura la tipografía mediante font-size. */
        font-size:9px;
        /* Configura esta propiedad visual mediante line-height. */
        line-height:1.5
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .header-tools {
        /* Separa elementos vecinos mediante gap. */
        gap:6px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .header-tools button {
        /* Define el espacio interior mediante padding. */
        padding:7px;
        /* Configura esta propiedad visual mediante min-width. */
        min-width:33px;
        /* Configura esta propiedad visual mediante min-height. */
        min-height:33px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .header-tools button>.ui-icon {
        /* Ajusta el ancho mediante width. */
        width:15px;
        /* Ajusta la altura mediante height. */
        height:15px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #homeButton>span {
        /* Define cómo se distribuye el contenido mediante display. */
        display:none
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .toolbar {
        /* Define el espacio interior mediante padding. */
        padding:12px!important;
        /* Separa elementos vecinos mediante gap. */
        gap:8px!important
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .toolbar>input {
        /* Configura la distribución flexible mediante flex-basis. */
        flex-basis:100%;
        /* Configura esta propiedad visual mediante min-width. */
        min-width:0
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .toolbar>button,.toolbar>a {
        /* Configura la distribución flexible mediante flex. */
        flex:1;
        /* Configura esta propiedad visual mediante min-height. */
        min-height:37px;
        /* Define el espacio interior mediante padding. */
        padding:8px 10px;
        /* Configura la tipografía mediante font-size. */
        font-size:11px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .toolbar #sectionTools {
        /* Configura la distribución flexible mediante flex. */
        flex:0;
        /* Configura esta propiedad visual mediante min-width. */
        min-width:98px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .dashboard-heading {
        /* Configura la distribución flexible mediante flex-direction. */
        flex-direction:column;
        /* Separa elementos vecinos mediante gap. */
        gap:8px;
        /* Alinea los elementos mediante align-items. */
        align-items:flex-start;
        /* Define el espacio exterior mediante margin-bottom. */
        margin-bottom:16px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .dashboard-heading h2 {
        /* Configura la tipografía mediante font-size. */
        font-size:25px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .dashboard-heading p {
        /* Configura la tipografía mediante font-size. */
        font-size:11px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .dashboard-updated {
        /* Configura la tipografía mediante font-size. */
        font-size:10px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .dashboard-summary {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:1fr;
        /* Separa elementos vecinos mediante gap. */
        gap:10px;
        /* Define el espacio exterior mediante margin-bottom. */
        margin-bottom:12px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .dashboard-summary>div {
        /* Define el espacio interior mediante padding. */
        padding:14px 16px;
        /* Configura esta propiedad visual mediante min-height. */
        min-height:79px;
        /* Dibuja el borde del elemento mediante border-radius. */
        border-radius:11px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .dashboard-summary strong {
        /* Configura la tipografía mediante font-size. */
        font-size:24px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .dashboard-summary span {
        /* Configura la tipografía mediante font-size. */
        font-size:12px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .summary-modules {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:1fr;
        /* Separa elementos vecinos mediante gap. */
        gap:12px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .summary-module {
        /* Define el espacio interior mediante padding. */
        padding:15px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .summary-module [data-summary-slot] {
        /* Configura esta propiedad visual mediante min-height. */
        min-height:82px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .summary-ring {
        /* Define el espacio interior mediante padding. */
        padding:16px;
        /* Dibuja el borde del elemento mediante border-radius. */
        border-radius:12px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .summary-ring h3 {
        /* Configura la tipografía mediante font-size. */
        font-size:16px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .summary-ring [data-summary-slot] {
        /* Define cómo se distribuye el contenido mediante display. */
        display:block
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .summary-ring-chart {
        /* Configura esta propiedad visual mediante max-width. */
        max-width:190px;
        /* Define el espacio exterior mediante margin. */
        margin:12px auto
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .summary-ring-data {
        /* Define cómo se distribuye el contenido mediante display. */
        display:block
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .summary-ring-data .summary-pair {
        /* Define el espacio interior mediante padding. */
        padding:10px 0
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .quick-access>div {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:repeat(2,minmax(0,1fr));
        /* Separa elementos vecinos mediante gap. */
        gap:9px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .quick-access button {
        /* Define el espacio interior mediante padding. */
        padding:10px;
        /* Configura la tipografía mediante font-size. */
        font-size:12px;
        /* Configura esta propiedad visual mediante min-height. */
        min-height:49px;
        /* Separa elementos vecinos mediante gap. */
        gap:7px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .quick-access button .ui-icon {
        /* Ajusta el ancho mediante width. */
        width:27px;
        /* Ajusta la altura mediante height. */
        height:27px;
        /* Define el espacio interior mediante padding. */
        padding:6px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .catalog-shortcuts>div {
        /* Separa elementos vecinos mediante gap. */
        gap:9px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .catalog-shortcuts button {
        /* Define el espacio interior mediante padding. */
        padding:10px;
        /* Separa elementos vecinos mediante gap. */
        gap:7px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .catalog-shortcuts button .ui-icon {
        /* Ajusta el ancho mediante width. */
        width:26px;
        /* Ajusta la altura mediante height. */
        height:26px;
        /* Define el espacio interior mediante padding. */
        padding:6px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .catalog-shortcuts button span {
        /* Configura la tipografía mediante font-size. */
        font-size:11px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .catalog-shortcuts button strong {
        /* Configura la tipografía mediante font-size. */
        font-size:13px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .catalog-shortcuts .shortcut-arrow {
        /* Configura la tipografía mediante font-size. */
        font-size:17px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    html[data-theme] dialog {
        /* Define el espacio interior mediante padding. */
        padding:19px;
        /* Ajusta el ancho mediante width. */
        width:calc(100vw - 24px);
        /* Configura esta propiedad visual mediante max-width. */
        max-width:calc(100vw - 24px)
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    dialog h2 {
        /* Configura la tipografía mediante font-size. */
        font-size:19px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    dialog .grid {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:1fr;
        /* Separa elementos vecinos mediante gap. */
        gap:4px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .profile-tabs {
        /* Separa elementos vecinos mediante gap. */
        gap:4px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .profile-tabs button {
        /* Define el espacio interior mediante padding. */
        padding:8px;
        /* Configura la tipografía mediante font-size. */
        font-size:11px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .accent-picker {
        /* Define el espacio interior mediante padding. */
        padding:10px;
        /* Separa elementos vecinos mediante gap. */
        gap:8px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .accent-picker label {
        /* Define el espacio interior mediante padding. */
        padding:10px;
        /* Configura la tipografía mediante font-size. */
        font-size:11px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .login form {
        /* Define el espacio interior mediante padding. */
        padding:24px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .quick-section-grid {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:1fr
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(prefers-reduced-motion:reduce) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .summary-ring [data-summary-slot] {
        /* Define cómo se distribuye el contenido mediante display. */
        display:block
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .nav-group::details-content {
        /* Suaviza el cambio entre estados mediante transition. */
        transition:none
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .summary-module [data-summary-slot] {
        /* Configura esta propiedad visual mediante min-height. */
        min-height:0
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .layout main>.tablebox :is(th,td):last-child {
    /* Controla la posición del elemento mediante position. */
    position:sticky;
    /* Configura esta propiedad visual mediante right. */
    right:0;
    /* Ajusta la superposición mediante z-index. */
    z-index:2;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Dibuja el borde del elemento mediante border-left. */
    border-left:1px solid var(--line);
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:-5px 0 10px #133b4b06;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:72px;
    /* Configura esta propiedad visual mediante text-align. */
    text-align:center
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .layout main>.tablebox th:last-child {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--soft);
    /* Ajusta la superposición mediante z-index. */
    z-index:5
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>aside .nav-group:has(button.active)>summary {
    /* Pinta el fondo del elemento mediante background. */
    background:linear-gradient(90deg,var(--sidebar-hover),#ffffff04);
    /* Fija el color del texto mediante color. */
    color:#fff
}
/* 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. */
    .summary-ring [data-summary-slot] {
        /* Configura esta propiedad visual mediante max-height. */
        max-height:none;
        /* Controla el contenido que rebasa el contenedor mediante overflow. */
        overflow:visible
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .summary-ring [data-summary-slot]:has(.summary-static-frame) {
        /* Configura esta propiedad visual mediante max-height. */
        max-height:520px;
        /* Controla el contenido que rebasa el contenedor mediante overflow. */
        overflow:auto
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.header-tools button,.toolbar>button,.toolbar>a {
    /* Define cómo se distribuye el contenido mediante display. */
    display:inline-flex;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Distribuye los elementos mediante justify-content. */
    justify-content:center
}
/* Ajustes 065: reloj institucional, espacios y paleta extendida. */
/* Aplica esta regla cuando el selector o la condición coincide. */
.interface-clock {
    /* Configura la tipografía mediante font-size. */
    font-size:12px;
    /* Fija el color del texto mediante color. */
    color:var(--muted);
    /* Configura esta propiedad visual mediante white-space. */
    white-space:nowrap;
    /* Configura la tipografía mediante font-variant-numeric. */
    font-variant-numeric:tabular-nums;
    /* Define el espacio exterior mediante margin-right. */
    margin-right:12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.header-tools {
    /* Configura la distribución flexible mediante flex-wrap. */
    flex-wrap:wrap;
    /* Configura esta propiedad visual mediante row-gap. */
    row-gap:10px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.login-actions {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Distribuye los elementos mediante justify-content. */
    justify-content:center;
    /* Alinea los elementos mediante align-items. */
    align-items:stretch;
    /* Separa elementos vecinos mediante gap. */
    gap:16px;
    /* Define el espacio exterior mediante margin-top. */
    margin-top:22px;
    /* Configura la distribución flexible mediante flex-wrap. */
    flex-wrap:wrap
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.login-actions button {
    /* Configura esta propiedad visual mediante min-height. */
    min-height:42px;
    /* Define el espacio interior mediante padding. */
    padding:11px 18px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.login-actions button:first-child {
    /* Configura esta propiedad visual mediante min-width. */
    min-width:104px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
dialog .tablebox+form,dialog .tablebox+.grid,dialog .tablebox+label {
    /* Define el espacio exterior mediante margin-top. */
    margin-top:24px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
dialog form:has(.tablebox)>.grid {
    /* Define el espacio exterior mediante margin-top. */
    margin-top:24px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
:is(#returnPanel,#licenseReturnPanel,#accessoryReturnPanel) td:last-child {
    /* Configura esta propiedad visual mediante white-space. */
    white-space:nowrap
}
/* Aplica esta regla cuando el selector o la condición coincide. */
:is(#licenseReturnPanel,#accessoryReturnPanel) input[type=number] {
    /* Define cómo se distribuye el contenido mediante display. */
    display:inline-block;
    /* Ajusta el ancho mediante width. */
    width:74px!important;
    /* Define el espacio exterior mediante margin-right. */
    margin-right:14px;
    /* Configura esta propiedad visual mediante vertical-align. */
    vertical-align:middle
}
/* Aplica esta regla cuando el selector o la condición coincide. */
:is(#returnPanel,#licenseReturnPanel,#accessoryReturnPanel) button {
    /* Configura esta propiedad visual mediante vertical-align. */
    vertical-align:middle
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(max-width:600px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .interface-clock {
        /* Ajusta el ancho mediante width. */
        width:100%;
        /* Define el espacio exterior mediante margin. */
        margin:0;
        /* 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. */
    .accent-picker label {
        /* Configura la distribución flexible mediante flex. */
        flex:1 1 115px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .login-actions {
        /* Separa elementos vecinos mediante gap. */
        gap:14px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .login-actions button {
        /* Configura la distribución flexible mediante flex. */
        flex:1 1 auto
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-accent=rose] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#a62d62;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#a62d62;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#a62d62;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#432039;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#10212c;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#a62d62;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#edf3f7
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=rose] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#e7a5c7;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#a62d62;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#e7a5c7;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#263e4d
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.accent-swatch.rose {
    /* Pinta el fondo del elemento mediante background. */
    background:#a62d62
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-accent=orange] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#a64a0b;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#a64a0b;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#a64a0b;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#482917;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#10212c;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#a64a0b;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#edf3f7
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=orange] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#ffc58e;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#a64a0b;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#ffc58e;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#263e4d
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.accent-swatch.orange {
    /* Pinta el fondo del elemento mediante background. */
    background:#a64a0b
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-accent=indigo] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#4b50a7;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#4b50a7;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#4b50a7;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#272948;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#10212c;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#4b50a7;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#edf3f7
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=indigo] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#bcc2ff;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#4b50a7;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#bcc2ff;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#263e4d
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.accent-swatch.indigo {
    /* Pinta el fondo del elemento mediante background. */
    background:#4b50a7
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-accent=slate] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#476478;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#476478;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#476478;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#243642;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#10212c;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#476478;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#edf3f7
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=slate] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#bbd3e3;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#476478;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#bbd3e3;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#263e4d
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.accent-swatch.slate {
    /* Pinta el fondo del elemento mediante background. */
    background:#476478
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-accent=cyan] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#08718b;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#08718b;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#08718b;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#133a46;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#10212c;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#08718b;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#edf3f7
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=cyan] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#8ce2f2;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#08718b;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#8ce2f2;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#263e4d
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.accent-swatch.cyan {
    /* Pinta el fondo del elemento mediante background. */
    background:#08718b
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-accent=amber] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#896108;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#896108;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#896108;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#403519;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#10212c;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#896108;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#edf3f7
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=amber] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#ffe095;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#896108;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#ffe095;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#263e4d
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.accent-swatch.amber {
    /* Pinta el fondo del elemento mediante background. */
    background:#896108
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.login .auth-buttons.login-actions {
    /* Separa elementos vecinos mediante gap. */
    gap:16px;
    /* Distribuye los elementos mediante justify-content. */
    justify-content:center
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.login .login-actions button {
    /* Configura la distribución flexible mediante flex. */
    flex:0 1 auto;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:104px
}
/* 066: botón Cerrar sesión con selección ovalada. */
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .layout>aside #logout {
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:999px;
    /* Define el espacio interior mediante padding. */
    padding:12px 18px;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:44px;
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Configura esta propiedad visual mediante text-align. */
    text-align:left;
    /* Suaviza el cambio entre estados mediante transition. */
    transition:background .18s,color .18s
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .layout>aside #logout:is(:hover,:focus-visible,:active) {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--sidebar-hover);
    /* Fija el color del texto mediante color. */
    color:#fff;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:999px
}
/* 068: medios y devoluciones */
/* Aplica esta regla cuando el selector o la condición coincide. */
img.thumb {
    /* Ajusta el ancho mediante width. */
    width:48px;
    /* Ajusta la altura mediante height. */
    height:48px;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:48px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:50%;
    /* Configura esta propiedad visual mediante object-fit. */
    object-fit:cover;
    /* Dibuja el borde del elemento mediante border. */
    border:0;
    /* Configura esta propiedad visual mediante cursor. */
    cursor:pointer
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.profile-avatar {
    /* Ajusta el ancho mediante width. */
    width:52px;
    /* Ajusta la altura mediante height. */
    height:52px;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:52px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:50%;
    /* Configura esta propiedad visual mediante object-fit. */
    object-fit:cover
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.profile-avatar.large {
    /* Ajusta el ancho mediante width. */
    width:96px;
    /* Ajusta la altura mediante height. */
    height:96px;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:96px;
    /* Configura esta propiedad visual mediante cursor. */
    cursor:pointer
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.media-dialog {
    /* Ajusta el ancho mediante width. */
    width:min(960px,94vw);
    /* Configura esta propiedad visual mediante max-height. */
    max-height:92dvh;
    /* Define el espacio interior mediante padding. */
    padding:22px;
    /* Configura esta propiedad visual mediante box-sizing. */
    box-sizing:border-box;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Fija el color del texto mediante color. */
    color:var(--ink);
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:auto
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.media-dialog header {
    /* 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
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.media-dialog h2 {
    /* Configura la tipografía mediante font-size. */
    font-size:1.2rem;
    /* Define el espacio exterior mediante margin. */
    margin:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.media-content {
    /* Define el espacio exterior mediante margin. */
    margin:18px 0;
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura esta propiedad visual mediante place-items. */
    place-items:center
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.media-content img {
    /* Configura esta propiedad visual mediante max-width. */
    max-width:100%;
    /* Configura esta propiedad visual mediante max-height. */
    max-height:65dvh;
    /* Configura esta propiedad visual mediante object-fit. */
    object-fit:contain
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.media-content iframe {
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Ajusta la altura mediante height. */
    height:65dvh;
    /* Dibuja el borde del elemento mediante border. */
    border:0;
    /* Pinta el fondo del elemento mediante background. */
    background:white
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.media-dialog footer {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Separa elementos vecinos mediante gap. */
    gap:12px;
    /* Configura la distribución flexible mediante flex-wrap. */
    flex-wrap:wrap
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.crop-dialog {
    /* Ajusta el ancho mediante width. */
    width:min(520px,94vw)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.crop-dialog label {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Define el espacio exterior mediante margin. */
    margin:12px 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.crop-dialog input {
    /* Ajusta el ancho mediante width. */
    width:100%
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.crop-preview {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura esta propiedad visual mediante place-items. */
    place-items:center;
    /* Define el espacio interior mediante padding-top. */
    padding-top:20px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.crop-preview canvas {
    /* Ajusta el ancho mediante width. */
    width:min(320px,100%);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:50%;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 0 0 5px var(--menu-hover)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.print-image-frame {
    /* Controla la posición del elemento mediante position. */
    position:fixed;
    /* Ajusta el ancho mediante width. */
    width:1px;
    /* Ajusta la altura mediante height. */
    height:1px;
    /* Configura esta propiedad visual mediante left. */
    left:-10000px;
    /* Dibuja el borde del elemento mediante border. */
    border:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.return-controls {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Separa elementos vecinos mediante gap. */
    gap:12px;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:330px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.return-controls input {
    /* Ajusta el ancho mediante width. */
    width:80px;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:80px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.return-controls button {
    /* Configura esta propiedad visual mediante white-space. */
    white-space:nowrap
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark] .media-dialog {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Fija el color del texto mediante color. */
    color:var(--ink)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(max-width:600px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .media-dialog {
        /* Define el espacio interior mediante padding. */
        padding:14px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .media-dialog header {
        /* Configura la distribución flexible mediante flex-wrap. */
        flex-wrap:wrap
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .media-content iframe {
        /* Ajusta la altura mediante height. */
        height:60dvh
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    img.thumb {
        /* Ajusta el ancho mediante width. */
        width:44px;
        /* Ajusta la altura mediante height. */
        height:44px;
        /* Configura esta propiedad visual mediante min-width. */
        min-width:44px
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=color1] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#297a58;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#297a58;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#40bf8a;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#1b4634;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#11271e;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#297a58;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#e3f2ec
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=color1] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#caf2e1;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#297a58;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#caf2e1;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#1b4634;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#11271e;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#297a58;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#2f4c40
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=color2] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#297a67;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#297a67;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#40bfa1;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#1b463c;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#112722;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#297a67;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#e3f2ef
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=color2] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#caf2e8;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#297a67;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#caf2e8;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#1b463c;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#112722;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#297a67;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#2f4c45
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=color3] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#297a49;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#297a49;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#40bf73;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#1b462c;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#11271a;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#297a49;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#e3f2e9
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=color3] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#caf2da;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#297a49;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#caf2da;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#1b462c;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#11271a;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#297a49;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#2f4c3a
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=color4] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#297a31;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#297a31;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#40bf4c;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#1b461f;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#112713;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#297a31;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#e3f2e4
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=color4] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#caf2ce;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#297a31;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#caf2ce;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#1b461f;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#112713;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#297a31;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#2f4c31
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=color5] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#607a29;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#607a29;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#96bf40;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#38461b;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#202711;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#607a29;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#edf2e3
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=color5] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#e5f2ca;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#607a29;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#e5f2ca;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#38461b;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#202711;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#607a29;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#424c2f
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=color6] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#527a29;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#527a29;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#80bf40;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#30461b;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#1c2711;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#527a29;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#ebf2e3
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=color6] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#def2ca;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#527a29;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#def2ca;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#30461b;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#1c2711;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#527a29;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#3d4c2f
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=color7] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#29717a;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#29717a;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#40b0bf;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#1b4146;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#112527;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#29717a;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#e3f0f2
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=color7] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#caedf2;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#29717a;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#caedf2;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#1b4146;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#112527;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#29717a;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#2f484c
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=color8] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#297a76;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#297a76;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#40bfb8;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#1b4644;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#112726;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#297a76;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#e3f2f1
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=color8] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#caf2ef;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#297a76;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#caf2ef;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#1b4644;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#112726;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#297a76;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#2f4c4a
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=color9] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#295d7a;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#295d7a;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#4091bf;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#1b3746;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#111f27;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#295d7a;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#e3edf2
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=color9] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#cae3f2;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#295d7a;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#cae3f2;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#1b3746;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#111f27;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#295d7a;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#2f414c
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=color10] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#29457a;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#29457a;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#406bbf;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#1b2946;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#111827;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#29457a;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#e3e8f2
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=color10] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#cad7f2;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#29457a;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#cad7f2;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#1b2946;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#111827;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#29457a;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#2f384c
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=color11] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#29367a;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#29367a;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#4054bf;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#1b2246;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#111427;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#29367a;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#e3e5f2
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=color11] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#cad0f2;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#29367a;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#cad0f2;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#1b2246;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#111427;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#29367a;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#2f334c
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=color12] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#29317a;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#29317a;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#404cbf;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#1b1f46;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#111327;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#29317a;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#e3e4f2
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=color12] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#cacef2;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#29317a;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#cacef2;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#1b1f46;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#111327;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#29317a;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#2f314c
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=color13] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#43297a;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#43297a;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#6940bf;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#291b46;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#181127;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#43297a;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#e8e3f2
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=color13] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#d7caf2;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#43297a;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#d7caf2;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#291b46;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#181127;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#43297a;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#382f4c
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=color14] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#52297a;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#52297a;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#7f40bf;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#301b46;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#1c1127;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#52297a;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#ebe3f2
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=color14] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#decaf2;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#52297a;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#decaf2;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#301b46;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#1c1127;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#52297a;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#3d2f4c
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=color15] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#65297a;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#65297a;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#9e40bf;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#3b1b46;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#211127;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#65297a;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#eee3f2
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=color15] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#e7caf2;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#65297a;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#e7caf2;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#3b1b46;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#211127;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#65297a;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#442f4c
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=color16] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#6f297a;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#6f297a;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#ad40bf;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#401b46;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#241127;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#6f297a;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#f0e3f2
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=color16] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#eccaf2;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#6f297a;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#eccaf2;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#401b46;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#241127;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#6f297a;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#482f4c
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=color17] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#7a2972;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#7a2972;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#bf40b3;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#461b42;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#271125;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#7a2972;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#f2e3f1
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=color17] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#f2caee;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#7a2972;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#f2caee;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#461b42;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#271125;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#7a2972;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#4c2f49
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=color18] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#7a2964;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#7a2964;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#bf409c;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#461b3a;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#271121;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#7a2964;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#f2e3ee
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=color18] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#f2cae7;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#7a2964;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#f2cae7;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#461b3a;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#271121;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#7a2964;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#4c2f44
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=color19] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#7a2946;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#7a2946;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#bf406e;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#461b2a;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#271119;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#7a2946;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#f2e3e8
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=color19] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#f2cad8;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#7a2946;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#f2cad8;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#461b2a;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#271119;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#7a2946;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#4c2f39
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=color20] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#7a2933;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#7a2933;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#bf404f;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#461b20;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#271114;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#7a2933;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#f2e3e5
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=color20] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#f2cacf;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#7a2933;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#f2cacf;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#461b20;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#271114;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#7a2933;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#4c2f32
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=color21] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#7a3329;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#7a3329;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#bf4f40;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#46201b;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#271411;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#7a3329;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#f2e5e3
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=color21] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#f2cfca;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#7a3329;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#f2cfca;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#46201b;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#271411;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#7a3329;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#4c322f
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=color22] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#7a3c29;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#7a3c29;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#bf5e40;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#46251b;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#271611;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#7a3c29;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#f2e7e3
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=color22] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#f2d4ca;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#7a3c29;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#f2d4ca;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#46251b;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#271611;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#7a3c29;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#4c362f
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=color23] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#7a4b29;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#7a4b29;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#bf7540;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#462d1b;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#271a11;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#7a4b29;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#f2e9e3
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=color23] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#f2dbca;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#7a4b29;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#f2dbca;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#462d1b;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#271a11;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#7a4b29;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#4c3b2f
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=color24] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#7a5029;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#7a5029;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#bf7d40;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#46301b;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#271c11;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#7a5029;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#f2eae3
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=color24] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#f2ddca;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#7a5029;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#f2ddca;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#46301b;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#271c11;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#7a5029;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#4c3d2f
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=color25] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#7a5529;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#7a5529;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#bf8540;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#46321b;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#271d11;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#7a5529;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#f2ebe3
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=color25] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#f2dfca;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#7a5529;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#f2dfca;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#46321b;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#271d11;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#7a5529;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#4c3e2f
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=color26] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#7a6429;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#7a6429;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#bf9c40;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#463a1b;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#272111;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#7a6429;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#f2eee3
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=color26] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#f2e7ca;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#7a6429;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#f2e7ca;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#463a1b;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#272111;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#7a6429;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#4c442f
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=color27] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#7a6d29;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#7a6d29;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#bfab40;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#463f1b;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#272411;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#7a6d29;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#f2f0e3
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=color27] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#f2ebca;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#7a6d29;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#f2ebca;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#463f1b;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#272411;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#7a6d29;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#4c472f
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=color28] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#645c40;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#645c40;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#9c8f63;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#463d1b;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#272211;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#645c40;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#f2efe3
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=color28] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#f2e9ca;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#645c40;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#f2e9ca;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#463d1b;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#272211;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#645c40;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#4c452f
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=color29] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#645140;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#645140;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#9c7e63;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#46301b;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#271c11;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#645140;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#f2eae3
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=color29] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#f2ddca;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#645140;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#f2ddca;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#46301b;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#271c11;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#645140;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#4c3d2f
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=color30] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#404e64;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#404e64;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#637a9c;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#1b2c46;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#111a27;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#404e64;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#e3e9f2
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=color30] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#cadaf2;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#404e64;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#cadaf2;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#1b2c46;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#111a27;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#404e64;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#2f3a4c
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.media-download {
    /* Define cómo se distribuye el contenido mediante display. */
    display:inline-flex;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Define el espacio interior mediante padding. */
    padding:10px 16px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:12px;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--accent-fill);
    /* Fija el color del texto mediante color. */
    color:#fff;
    /* Configura esta propiedad visual mediante text-decoration. */
    text-decoration:none;
    /* Configura la tipografía mediante font-weight. */
    font-weight:600
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.media-download:hover {
    /* Configura esta propiedad visual mediante filter. */
    filter:brightness(1.08)
}
/* 069: contraste estable de Descargar en el visor compartido de archivos. */
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .media-dialog a.media-download,
html[data-theme] .media-dialog a.media-download:is(:hover,:focus-visible,:active) {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--accent-fill);
    /* Fija el color del texto mediante color. */
    color:#fff;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--accent-fill);
    /* Configura esta propiedad visual mediante text-decoration. */
    text-decoration:none;
    /* Configura esta propiedad visual mediante filter. */
    filter:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .media-dialog a.media-download:is(:hover,:focus-visible) {
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .media-dialog a.media-download:focus-visible {
    /* Configura esta propiedad visual mediante outline. */
    outline:2px solid var(--accent);
    /* Configura esta propiedad visual mediante outline-offset. */
    outline-offset:3px
}
/* 071: colores comunes y detalles ligados al color personal. */
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=black] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#242424;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#242424;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#242424;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:color-mix(in srgb,#242424 65%,#071923);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:color-mix(in srgb,#242424 30%,#071923);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#242424;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:color-mix(in srgb,#242424 12%,#fff)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=black] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#dadada;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#242424;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#dadada;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:color-mix(in srgb,#242424 65%,#071923);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:color-mix(in srgb,#242424 30%,#071923);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#242424;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:color-mix(in srgb,#242424 30%,#142a38)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=red] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#a52b36;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#a52b36;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#a52b36;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:color-mix(in srgb,#a52b36 65%,#071923);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:color-mix(in srgb,#a52b36 30%,#071923);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#a52b36;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:color-mix(in srgb,#a52b36 12%,#fff)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=red] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#ffc1c7;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#a52b36;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#ffc1c7;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:color-mix(in srgb,#a52b36 65%,#071923);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:color-mix(in srgb,#a52b36 30%,#071923);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#a52b36;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:color-mix(in srgb,#a52b36 30%,#142a38)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=yellow] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#866000;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#866000;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#866000;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:color-mix(in srgb,#866000 65%,#071923);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:color-mix(in srgb,#866000 30%,#071923);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#866000;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:color-mix(in srgb,#866000 12%,#fff)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=yellow] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#ffe5a2;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#866000;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#ffe5a2;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:color-mix(in srgb,#866000 65%,#071923);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:color-mix(in srgb,#866000 30%,#071923);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#866000;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:color-mix(in srgb,#866000 30%,#142a38)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=brown] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#79503a;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#79503a;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#79503a;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:color-mix(in srgb,#79503a 65%,#071923);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:color-mix(in srgb,#79503a 30%,#071923);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#79503a;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:color-mix(in srgb,#79503a 12%,#fff)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=brown] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#e9c9b5;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#79503a;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#e9c9b5;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:color-mix(in srgb,#79503a 65%,#071923);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:color-mix(in srgb,#79503a 30%,#071923);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#79503a;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:color-mix(in srgb,#79503a 30%,#142a38)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=pink] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#a53a72;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#a53a72;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#a53a72;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:color-mix(in srgb,#a53a72 65%,#071923);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:color-mix(in srgb,#a53a72 30%,#071923);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#a53a72;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:color-mix(in srgb,#a53a72 12%,#fff)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=pink] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#f5b9d8;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#a53a72;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#f5b9d8;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:color-mix(in srgb,#a53a72 65%,#071923);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:color-mix(in srgb,#a53a72 30%,#071923);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#a53a72;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:color-mix(in srgb,#a53a72 30%,#142a38)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=gray] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#505d68;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#505d68;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#505d68;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:color-mix(in srgb,#505d68 65%,#071923);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:color-mix(in srgb,#505d68 30%,#071923);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#505d68;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:color-mix(in srgb,#505d68 12%,#fff)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=gray] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#d4dee7;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#505d68;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#d4dee7;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:color-mix(in srgb,#505d68 65%,#071923);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:color-mix(in srgb,#505d68 30%,#071923);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#505d68;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:color-mix(in srgb,#505d68 30%,#142a38)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light][data-accent=gold] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#8c650d;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#8c650d;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#8c650d;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:color-mix(in srgb,#8c650d 65%,#071923);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:color-mix(in srgb,#8c650d 30%,#071923);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#8c650d;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:color-mix(in srgb,#8c650d 12%,#fff)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark][data-accent=gold] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#f0d492;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#8c650d;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#f0d492;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:color-mix(in srgb,#8c650d 65%,#071923);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:color-mix(in srgb,#8c650d 30%,#071923);
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#8c650d;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:color-mix(in srgb,#8c650d 30%,#142a38)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
[hidden] {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none!important
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.app-booting #app {
    /* Configura esta propiedad visual mediante visibility. */
    visibility:hidden
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#bootStatus {
    /* Controla la posición del elemento mediante position. */
    position:fixed;
    /* Configura esta propiedad visual mediante inset. */
    inset:0;
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura esta propiedad visual mediante place-items. */
    place-items:center;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--page);
    /* Fija el color del texto mediante color. */
    color:var(--ink);
    /* Ajusta la superposición mediante z-index. */
    z-index:1000
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout[data-rendering=true] main>.toolbar,.layout[data-rendering=true] main>.tablebox {
    /* Configura esta propiedad visual mediante visibility. */
    visibility:hidden;
    /* Configura esta propiedad visual mediante pointer-events. */
    pointer-events:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] table img.thumb {
    /* Ajusta el ancho mediante width. */
    width:48px;
    /* Ajusta la altura mediante height. */
    height:48px;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:48px;
    /* Configura esta propiedad visual mediante max-width. */
    max-width:48px;
    /* Dibuja el borde del elemento mediante border. */
    border:0;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:50%;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:none;
    /* Configura esta propiedad visual mediante object-fit. */
    object-fit:cover;
    /* Configura esta propiedad visual mediante vertical-align. */
    vertical-align:middle
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] table a.photo-link {
    /* Define cómo se distribuye el contenido mediante display. */
    display:inline-flex;
    /* Ajusta el ancho mediante width. */
    width:48px;
    /* Ajusta la altura mediante height. */
    height:48px;
    /* 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;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:50%;
    /* Pinta el fondo del elemento mediante background. */
    background:transparent;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:none;
    /* Configura esta propiedad visual mediante line-height. */
    line-height:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] table a.photo-link:is(:hover,:focus-visible) {
    /* Pinta el fondo del elemento mediante background. */
    background:transparent;
    /* Configura esta propiedad visual mediante outline. */
    outline:2px solid var(--accent);
    /* Configura esta propiedad visual mediante outline-offset. */
    outline-offset:2px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] dialog {
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 18px 70px color-mix(in srgb,var(--accent-fill) 24%,#00000035),0 0 24px color-mix(in srgb,var(--accent-fill) 12%,transparent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] :is(input,select,textarea):focus {
    /* Configura esta propiedad visual mediante outline. */
    outline:2px solid var(--accent);
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:var(--accent);
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-fill) 13%,transparent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
dialog::backdrop {
    /* Pinta el fondo del elemento mediante background. */
    background:color-mix(in srgb,var(--accent-fill) 14%,#06172685)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .summary-module,html[data-theme] .dashboard-summary>div {
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 4px 18px color-mix(in srgb,var(--accent-fill) 9%,transparent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-summary>div>.ui-icon {
    /* Ajusta el ancho mediante width. */
    width:58px;
    /* Ajusta la altura mediante height. */
    height:58px;
    /* Define el espacio interior mediante padding. */
    padding:13px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-module h3 .ui-icon {
    /* Ajusta el ancho mediante width. */
    width:38px;
    /* Ajusta la altura mediante height. */
    height:38px;
    /* Define el espacio interior mediante padding. */
    padding:8px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.mini-trend {
    /* Define el espacio exterior mediante margin. */
    margin:0 0 12px;
    /* Fija el color del texto mediante color. */
    color:var(--accent);
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.mini-trend figcaption {
    /* Configura la tipografía mediante font-size. */
    font-size:10px;
    /* Fija el color del texto mediante color. */
    color:var(--muted)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.mini-trend 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:62px;
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:visible
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.mini-trend-range {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Distribuye los elementos mediante justify-content. */
    justify-content:space-between;
    /* Configura la tipografía mediante font-size. */
    font-size:9px;
    /* Fija el color del texto mediante color. */
    color:var(--muted)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.color-select {
    /* Controla la posición del elemento mediante position. */
    position:relative;
    /* Define el espacio exterior mediante margin-top. */
    margin-top:6px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.color-choice {
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Separa elementos vecinos mediante gap. */
    gap:10px;
    /* Configura esta propiedad visual mediante text-align. */
    text-align:left
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.color-choice>span:last-child {
    /* Define el espacio exterior mediante margin-left. */
    margin-left:auto
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.color-swatch {
    /* Define cómo se distribuye el contenido mediante display. */
    display:inline-block;
    /* Ajusta el ancho mediante width. */
    width:17px;
    /* Ajusta la altura mediante height. */
    height:17px;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:17px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:4px;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid #8a8a8a55
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.color-select [role=listbox] {
    /* Configura esta propiedad visual mediante max-height. */
    max-height:220px;
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:auto;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line);
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:12px;
    /* Define el espacio interior mediante padding. */
    padding:6px;
    /* Define el espacio exterior mediante margin-top. */
    margin-top:6px;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 8px 25px color-mix(in srgb,var(--accent-fill) 15%,transparent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.color-select [role=option] {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Separa elementos vecinos mediante gap. */
    gap:10px;
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Configura esta propiedad visual mediante text-align. */
    text-align:left;
    /* Pinta el fondo del elemento mediante background. */
    background:transparent;
    /* Fija el color del texto mediante color. */
    color:var(--ink);
    /* Dibuja el borde del elemento mediante border. */
    border:0;
    /* Define el espacio exterior mediante margin. */
    margin:0;
    /* Define el espacio interior mediante padding. */
    padding:9px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.color-select [role=option]:is(:hover,:focus-visible),.color-select [role=option][aria-selected=true] {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--menu-hover);
    /* Fija el color del texto mediante color. */
    color:var(--ink)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(max-width:600px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    html[data-theme] table img.thumb,html[data-theme] table a.photo-link {
        /* Ajusta el ancho mediante width. */
        width:44px;
        /* Ajusta la altura mediante height. */
        height:44px;
        /* Configura esta propiedad visual mediante min-width. */
        min-width:44px;
        /* Configura esta propiedad visual mediante max-width. */
        max-width:44px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .dashboard-summary>div>.ui-icon {
        /* Ajusta el ancho mediante width. */
        width:48px;
        /* Ajusta la altura mediante height. */
        height:48px;
        /* Define el espacio interior mediante padding. */
        padding:11px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .summary-module h3 .ui-icon {
        /* Ajusta el ancho mediante width. */
        width:34px;
        /* Ajusta la altura mediante height. */
        height:34px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .mini-trend svg {
        /* Ajusta la altura mediante height. */
        height:54px
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] {
    /* Define una variable que otras reglas pueden reutilizar mediante --design-shadow. */
    --design-shadow:0 5px 22px color-mix(in srgb,var(--accent-fill) 10%,transparent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] :is(button,a):focus-visible {
    /* Configura esta propiedad visual mediante outline-color. */
    outline-color:var(--accent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] :is(.login form,.auth-card) {
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 12px 45px color-mix(in srgb,var(--accent-fill) 16%,transparent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] :is(input,select,textarea) {
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 2px 8px color-mix(in srgb,var(--accent-fill) 7%,transparent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] :is(input,select,textarea):focus {
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-fill) 13%,transparent)
}
/* 072: tabla de devoluciones ajustada al contenido. */
/* Aplica esta regla cuando el selector o la condición coincide. */
.consumable-return-table table.information-table {
    /* Configura esta propiedad visual mediante table-layout. */
    table-layout:auto;
    /* Ajusta el ancho mediante width. */
    width:max-content;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:100%;
    /* Configura esta propiedad visual mediante max-width. */
    max-width:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.consumable-return-table :is(th,td) {
    /* Ajusta el ancho mediante width. */
    width:auto;
    /* Configura esta propiedad visual mediante max-width. */
    max-width:290px;
    /* Configura esta propiedad visual mediante white-space. */
    white-space:normal;
    /* Controla el contenido que rebasa el contenedor mediante overflow-wrap. */
    overflow-wrap:break-word;
    /* Configura esta propiedad visual mediante vertical-align. */
    vertical-align:middle
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.consumable-return-table .return-controls {
    /* 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;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Separa elementos vecinos mediante gap. */
    gap:10px;
    /* Ajusta el ancho mediante width. */
    width:230px;
    /* 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. */
.consumable-return-table .return-controls input {
    /* Ajusta el ancho mediante width. */
    width:68px;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:68px;
    /* Configura esta propiedad visual mediante max-width. */
    max-width:68px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.consumable-return-table .return-controls button {
    /* Configura esta propiedad visual mediante white-space. */
    white-space:normal;
    /* Define el espacio exterior mediante margin. */
    margin:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.consumable-return-table .return-controls [data-all] {
    /* Configura la distribución flexible mediante flex-basis. */
    flex-basis:auto
}
/* La preferencia gobierna todos los controles; las insignias conservan su estado. */
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] :is(button,a.download-history,a.media-download,.text-link,.column-info-button,dialog footer a,td a:not(.photo-link),.toolbar>a) {
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:var(--line);
    /* Fija el color del texto mediante color. */
    color:var(--ink);
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Suaviza el cambio entre estados mediante transition. */
    transition:background .16s,border-color .16s,box-shadow .16s,color .16s
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] :is(button,a.download-history,a.media-download,.text-link,.column-info-button,dialog footer a,td a:not(.photo-link),.toolbar>a):is(:hover,:focus-visible):not(:disabled) {
    /* Fija el color del texto mediante color. */
    color:var(--accent);
    /* Pinta el fondo del elemento mediante background. */
    background:var(--menu-hover);
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:var(--accent);
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-fill) 11%,transparent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] :is(#add,button[type=submit],.media-download) {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--accent-fill);
    /* Fija el color del texto mediante color. */
    color:#fff;
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:var(--accent-fill)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] :is(#add,button[type=submit],.media-download):is(:hover,:focus-visible):not(:disabled) {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--accent-fill);
    /* Fija el color del texto mediante color. */
    color:#fff;
    /* Configura esta propiedad visual mediante filter. */
    filter:none;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .layout>aside :is(button,summary) {
    /* Pinta el fondo del elemento mediante background. */
    background:transparent;
    /* Fija el color del texto mediante color. */
    color:#e5f3f7;
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:transparent
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .layout>aside :is(button,summary):is(:hover,:focus-visible) {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--sidebar-hover);
    /* Fija el color del texto mediante color. */
    color:#fff;
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:transparent
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .floating-row-menu :is(button,a.download-history) {
    /* Pinta el fondo del elemento mediante background. */
    background:transparent;
    /* Fija el color del texto mediante color. */
    color:var(--accent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .floating-row-menu :is(button,a.download-history):is(:hover,:focus-visible) {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--menu-hover);
    /* 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. */
.filters-active {
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:var(--accent)!important;
    /* Fija el color del texto mediante color. */
    color:var(--accent)!important
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.filter-count {
    /* Configura la tipografía mediante font-size. */
    font-size:11px;
    /* Configura la tipografía mediante font-weight. */
    font-weight:700
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-module,.dashboard-summary>div,.summary-ring {
    /* Suaviza el cambio entre estados mediante transition. */
    transition:border-color .2s,box-shadow .2s,transform .2s
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-module:hover,.dashboard-summary>div:hover,.summary-ring:hover {
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:var(--accent);
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 8px 24px color-mix(in srgb,var(--accent-fill) 16%,transparent);
    /* Transforma la geometría visual mediante transform. */
    transform:translateY(-2px)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.ambient-card {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Distribuye los elementos mediante justify-content. */
    justify-content:center;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Ajusta la altura mediante height. */
    height:44px;
    /* Define el espacio exterior mediante margin. */
    margin:2px 0 10px;
    /* Fija el color del texto mediante color. */
    color:var(--accent);
    /* Configura esta propiedad visual mediante pointer-events. */
    pointer-events:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.ambient-card svg {
    /* Ajusta el ancho mediante width. */
    width:45px;
    /* Ajusta la altura mediante height. */
    height:40px;
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:visible
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.ambient-pulse {
    /* Transforma la geometría visual mediante transform-origin. */
    transform-origin:50% 50%;
    /* Aplica una animación mediante animation. */
    animation:ambient-pulse 3.5s ease-in-out infinite
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.ambient-shift {
    /* Aplica una animación mediante animation. */
    animation:ambient-shift 4s ease-in-out infinite
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.ambient-draw {
    /* Configura esta propiedad visual mediante stroke-dasharray. */
    stroke-dasharray:12 5;
    /* Aplica una animación mediante animation. */
    animation:ambient-draw 7s linear infinite
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@keyframes ambient-pulse {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    0%,100% {
        /* Regula la transparencia mediante opacity. */
        opacity:.55;
        /* Transforma la geometría visual mediante transform. */
        transform:scale(.9)
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    50% {
        /* Regula la transparencia mediante opacity. */
        opacity:1;
        /* Transforma la geometría visual mediante transform. */
        transform:scale(1.05)
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@keyframes ambient-shift {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    0%,100% {
        /* Transforma la geometría visual mediante transform. */
        transform:translateY(3px);
        /* Regula la transparencia mediante opacity. */
        opacity:.65
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    50% {
        /* Transforma la geometría visual mediante transform. */
        transform:translateY(-3px);
        /* Regula la transparencia mediante opacity. */
        opacity:1
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@keyframes ambient-draw {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    to {
        /* Configura esta propiedad visual mediante stroke-dashoffset. */
        stroke-dashoffset:-68
    }
}
/* 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. */
    .ambient-card * {
        /* Aplica una animación mediante animation. */
        animation:none!important
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .summary-module:hover,.dashboard-summary>div:hover,.summary-ring:hover {
        /* Transforma la geometría visual mediante transform. */
        transform:none
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .consumable-return-table table.information-table {
    /* Ajusta el ancho mediante width. */
    width:max-content!important;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:100%;
    /* Configura esta propiedad visual mediante table-layout. */
    table-layout:auto
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] #personalMenu:is(:hover,:focus-visible) {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--sidebar-hover);
    /* Fija el color del texto mediante color. */
    color:#fff;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-fill) 14%,transparent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] #dialog.wide-returns-dialog {
    /* Ajusta el ancho mediante width. */
    width:min(1280px,calc(100vw - 32px));
    /* Configura esta propiedad visual mediante max-width. */
    max-width:calc(100vw - 32px)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.consumable-return-table td:nth-child(3) {
    /* Configura esta propiedad visual mediante max-width. */
    max-width:230px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.consumable-return-table td:nth-child(4),.consumable-return-table td:nth-child(5) {
    /* Configura esta propiedad visual mediante max-width. */
    max-width:200px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.consumable-return-table :is(th,td) {
    /* Define el espacio interior mediante padding. */
    padding:10px 12px
}
/* 073: compact, accessible column switches */
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] #dialog.columns-dialog {
    /* Ajusta el ancho mediante width. */
    width:min(580px,calc(100vw - 28px));
    /* Configura esta propiedad visual mediante max-width. */
    max-width:calc(100vw - 28px)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.columns-dialog h2 {
    /* Configura la tipografía mediante font-size. */
    font-size:1.15rem;
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:6px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.columns-dialog .column-summary {
    /* Configura la tipografía mediante font-size. */
    font-size:.85rem;
    /* Fija el color del texto mediante color. */
    color:var(--muted);
    /* Define el espacio exterior mediante margin. */
    margin:0 0 12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.columns-dialog [data-column-search] {
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.column-options {
    /* 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:7px;
    /* Configura esta propiedad visual mediante max-height. */
    max-height:min(48vh,360px);
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:auto;
    /* Define el espacio interior mediante padding. */
    padding:2px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .column-toggle {
    /* 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;
    /* Separa elementos vecinos mediante gap. */
    gap:10px;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:44px;
    /* Define el espacio exterior mediante margin. */
    margin:0;
    /* Define el espacio interior mediante padding. */
    padding:9px 11px;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:12px;
    /* Configura la tipografía mediante font-size. */
    font-size:.82rem;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Configura esta propiedad visual mediante cursor. */
    cursor:pointer;
    /* Suaviza el cambio entre estados mediante transition. */
    transition:background .18s,border-color .18s
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.column-toggle>span:first-child {
    /* Configura la distribución flexible mediante flex. */
    flex:1;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Controla el contenido que rebasa el contenedor mediante overflow-wrap. */
    overflow-wrap:anywhere
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.column-toggle[hidden] {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none!important
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.column-toggle input {
    /* Controla la posición del elemento mediante position. */
    position:absolute;
    /* Regula la transparencia mediante opacity. */
    opacity:0;
    /* Ajusta el ancho mediante width. */
    width:1px;
    /* Ajusta la altura mediante height. */
    height:1px;
    /* Define el espacio interior mediante padding. */
    padding:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.column-switch {
    /* Configura la distribución flexible mediante flex. */
    flex:none;
    /* Ajusta el ancho mediante width. */
    width:30px;
    /* Ajusta la altura mediante height. */
    height:18px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:20px;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--line);
    /* Controla la posición del elemento mediante position. */
    position:relative;
    /* Suaviza el cambio entre estados mediante transition. */
    transition:background .2s
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.column-switch:after {
    /* Define el contenido generado mediante content. */
    content:'';
    /* Controla la posición del elemento mediante position. */
    position:absolute;
    /* Ajusta el ancho mediante width. */
    width:12px;
    /* Ajusta la altura mediante height. */
    height:12px;
    /* Configura esta propiedad visual mediante left. */
    left:3px;
    /* Configura esta propiedad visual mediante top. */
    top:3px;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:50%;
    /* Suaviza el cambio entre estados mediante transition. */
    transition:transform .2s
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.column-toggle input:checked+.column-switch {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--accent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.column-toggle input:checked+.column-switch:after {
    /* Transforma la geometría visual mediante transform. */
    transform:translateX(12px);
    /* Pinta el fondo del elemento mediante background. */
    background:#fff
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.column-toggle:has(input:checked),.column-toggle:hover {
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:var(--accent);
    /* Pinta el fondo del elemento mediante background. */
    background:var(--menu-hover)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.column-toggle:has(input:focus-visible) {
    /* Configura esta propiedad visual mediante outline. */
    outline:2px solid var(--accent);
    /* Configura esta propiedad visual mediante outline-offset. */
    outline-offset:2px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.template-downloads {
    /* 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:10px;
    /* Define el espacio exterior mediante margin. */
    margin:12px 0 18px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(max-width:480px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .column-options {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:1fr
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .columns-dialog footer {
        /* Separa elementos vecinos mediante gap. */
        gap:8px;
        /* Configura la distribución flexible mediante flex-wrap. */
        flex-wrap:wrap
    }
}
/* 074: headings above series fields and compact export selections. */
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-serial-fields > strong {
    /* Configura la cuadrícula mediante grid-column. */
    grid-column:1/-1
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.columns-dialog .export-column-selection {
    /* Configura la cuadrícula mediante grid-column. */
    grid-column:1/-1;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.columns-dialog .export-column-selection .column-summary {
    /* Define el espacio exterior mediante margin. */
    margin:8px 0
}
/* 075: space around preview actions and search fields in selectors. */
/* Aplica esta regla cuando el selector o la condición coincide. */
#preview > #confirmImport {
    /* Define el espacio exterior mediante margin-top. */
    margin-top:16px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.columns-dialog .export-column-selection > input[type=search],.columns-dialog [data-column-search] {
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:16px!important
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.columns-dialog .column-options {
    /* Define el espacio exterior mediante margin-top. */
    margin-top:4px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.record-conflict {
    /* Configura la cuadrícula mediante grid-column. */
    grid-column:1/-1;
    /* Define el espacio interior mediante padding. */
    padding:14px;
    /* Define el espacio exterior mediante margin. */
    margin:12px 0;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--accent);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:14px;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Fija el color del texto mediante color. */
    color:var(--ink)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.record-conflict button {
    /* Define el espacio exterior mediante margin. */
    margin:10px 8px 0 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.record-conflict .tablebox {
    /* Define el espacio exterior mediante margin-top. */
    margin-top:12px;
    /* Configura esta propiedad visual mediante max-height. */
    max-height:220px
}
/* 085: reserved returns spacing and worker identity. */
/* Aplica esta regla cuando el selector o la condición coincide. */
.reserved-return-controls {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Separa elementos vecinos mediante gap. */
    gap:12px;
    /* Configura la distribución flexible mediante flex-wrap. */
    flex-wrap:wrap;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:205px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.reserved-return-controls input[type=number] {
    /* Ajusta el ancho mediante width. */
    width:80px;
    /* Configura esta propiedad visual mediante max-width. */
    max-width:100%;
    /* Define el espacio exterior mediante margin. */
    margin:0;
    /* Configura la distribución flexible mediante flex. */
    flex:0 0 80px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.reserved-return-controls button {
    /* Define el espacio exterior mediante margin. */
    margin:0;
    /* Configura la distribución flexible mediante flex. */
    flex:0 0 auto
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.employee-number {
    /* Configura esta propiedad visual mediante white-space. */
    white-space:nowrap;
    /* Configura la tipografía mediante font-weight. */
    font-weight:600;
    /* Configura la tipografía mediante font-variant-numeric. */
    font-variant-numeric:tabular-nums
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(max-width:600px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .reserved-return-controls {
        /* Separa elementos vecinos mediante gap. */
        gap:10px;
        /* Configura esta propiedad visual mediante min-width. */
        min-width:160px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .reserved-return-controls button {
        /* Configura esta propiedad visual mediante white-space. */
        white-space:normal
    }
}
/* Use the same interaction as the native Imprimir and Cerrar buttons. */
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] :is(dialog footer a, td a:not(.photo-link), .toolbar>a)  {
    /* Configura esta propiedad visual mediante text-decoration. */
    text-decoration:none;
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .media-dialog a.media-download  {
    /* 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-color. */
    border-color:var(--line);
    /* Suaviza el cambio entre estados mediante transition. */
    transition:background .16s,border-color .16s,box-shadow .16s,color .16s;
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .media-dialog a.media-download:is(:hover,:focus-visible):not(:disabled)  {
    /* Fija el color del texto mediante color. */
    color:var(--accent);
    /* Pinta el fondo del elemento mediante background. */
    background:var(--menu-hover);
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:var(--accent);
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-fill) 11%,transparent);
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.sidebar-profile-row {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Separa elementos vecinos mediante gap. */
    gap:6px;
    /* Define el espacio exterior mediante margin-top. */
    margin-top:auto;
    /* Dibuja el borde del elemento mediante border-top. */
    border-top:1px solid #ffffff28;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.sidebar-profile-row #personalMenu {
    /* Configura la distribución flexible mediante flex. */
    flex:1;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Define el espacio exterior mediante margin. */
    margin:0;
    /* Dibuja el borde del elemento mediante border-top. */
    border-top:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.sidebar-profile-row.has-sidebar-trash {
    /* Define el espacio exterior mediante margin-top. */
    margin-top:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>aside .sidebar-trash {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Separa elementos vecinos mediante gap. */
    gap:10px;
    /* Define el espacio exterior mediante margin-top. */
    margin-top:auto;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:44px;
    /* Define el espacio interior mediante padding. */
    padding:8px 12px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:9px;
    /* Pinta el fondo del elemento mediante background. */
    background:transparent;
    /* Fija el color del texto mediante color. */
    color:#dce9ed;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid transparent;
    /* Configura esta propiedad visual mediante text-align. */
    text-align:left
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .layout>aside .sidebar-trash:is(:hover,:focus-visible,.active) {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--sidebar-hover);
    /* Fija el color del texto mediante color. */
    color:white;
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:#ffffff28
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#backupActions {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Configura la distribución flexible mediante flex-wrap. */
    flex-wrap:wrap;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Separa elementos vecinos mediante gap. */
    gap:8px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#backupActions [role="status"] {
    /* Configura la distribución flexible mediante flex-basis. */
    flex-basis:100%;
    /* Define el espacio exterior mediante margin. */
    margin:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#backupActions [role="status"]:empty {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none
}
/* Inicio: disponibilidad, tendencias y accesos compactos. */
/* 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:repeat(2,minmax(0,1fr)) auto;
    /* Alinea los elementos mediante align-items. */
    align-items:center
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-feature,.dashboard-secondary,.dashboard-shortcuts {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Separa elementos vecinos mediante gap. */
    gap:14px;
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:14px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-feature {
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:minmax(0,2fr) minmax(0,3fr)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-secondary,.dashboard-shortcuts {
    /* 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. */
#dashboardView .dashboard-stock {
    /* Define el espacio exterior mediante margin. */
    margin:0;
    /* Define el espacio interior mediante padding. */
    padding:0;
    /* 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;
    /* Controla la posición del elemento mediante position. */
    position:relative;
    /* Ajusta la superposición mediante z-index. */
    z-index:2
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-stock>summary {
    /* Configura esta propiedad visual mediante list-style. */
    list-style:none;
    /* Define cómo se distribuye el contenido mediante display. */
    display:inline-flex;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Separa elementos vecinos mediante gap. */
    gap:5px;
    /* Pinta el fondo del elemento mediante background. */
    background:#ffedc6;
    /* Fija el color del texto mediante color. */
    color:#6c4000;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:999px;
    /* Define el espacio interior mediante padding. */
    padding:5px 9px;
    /* Configura la tipografía mediante font-size. */
    font-size:11px;
    /* Configura esta propiedad visual mediante cursor. */
    cursor:pointer
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-stock>summary::-webkit-details-marker {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-stock .ui-icon {
    /* Ajusta el ancho mediante width. */
    width:13px;
    /* Ajusta la altura mediante height. */
    height:13px;
    /* Define el espacio exterior mediante margin. */
    margin:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-stock-list {
    /* Controla la posición del elemento mediante position. */
    position:absolute;
    /* Configura esta propiedad visual mediante right. */
    right:0;
    /* Configura esta propiedad visual mediante top. */
    top:calc(100% + 8px);
    /* Ajusta el ancho mediante width. */
    width:min(360px,85vw);
    /* Configura esta propiedad visual mediante max-height. */
    max-height:240px;
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:auto;
    /* Define el espacio interior mediante padding. */
    padding: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(--surface);
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:var(--design-shadow);
    /* Configura la tipografía mediante font-size. */
    font-size:12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-trends {
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* 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:13px;
    /* Define el espacio interior mediante padding. */
    padding:16px;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:var(--design-shadow)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-trends>h3 {
    /* Define el espacio exterior mediante margin. */
    margin:0 0 10px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-trends>.summary-module {
    /* Define el espacio interior mediante padding. */
    padding:8px 0;
    /* 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
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-trends>.summary-module+.summary-module {
    /* Dibuja el borde del elemento mediante border-top. */
    border-top:1px solid var(--line);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView :is(.dashboard-trends,.dashboard-secondary) [data-summary-slot] {
    /* Configura esta propiedad visual mediante min-height. */
    min-height:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .summary-module h3 .ui-icon {
    /* Ajusta el ancho mediante width. */
    width:34px;
    /* Ajusta la altura mediante height. */
    height:34px;
    /* Configura la distribución flexible mediante flex. */
    flex:none;
    /* Pinta el fondo del elemento mediante background. */
    background:linear-gradient(145deg,color-mix(in srgb,var(--accent-bright) 22%,var(--surface)),var(--surface));
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 3px 10px color-mix(in srgb,var(--accent-fill) 20%,transparent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-trend {
    /* Define el espacio exterior mediante margin. */
    margin:0 0 8px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-trend figcaption {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Distribuye los elementos mediante justify-content. */
    justify-content:space-between;
    /* Separa elementos vecinos mediante gap. */
    gap:5px;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Configura la tipografía mediante font-size. */
    font-size:11px;
    /* Fija el color del texto mediante color. */
    color:var(--muted)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-trend figcaption span {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--soft);
    /* Define el espacio interior mediante padding. */
    padding:2px 6px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:999px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.trend-grid {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:repeat(var(--days),minmax(0,1fr));
    /* Configura esta propiedad visual mediante text-align. */
    text-align:center;
    /* Define el espacio exterior mediante margin-top. */
    margin-top:12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.trend-day {
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:5px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.trend-plot {
    /* Ajusta la altura mediante height. */
    height:54px;
    /* Controla la posición del elemento mediante position. */
    position:relative;
    /* Dibuja el borde del elemento mediante border-bottom. */
    border-bottom:1px solid var(--line);
    /* Pinta el fondo del elemento mediante background. */
    background:repeating-linear-gradient(to top,transparent 0 17px,var(--line) 17px 18px)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.trend-bar,.trend-stem {
    /* Controla la posición del elemento mediante position. */
    position:absolute;
    /* Configura esta propiedad visual mediante bottom. */
    bottom:0;
    /* Configura esta propiedad visual mediante left. */
    left:50%;
    /* Configura esta propiedad visual mediante translate. */
    translate:-50% 0;
    /* Ajusta la altura mediante height. */
    height:max(3px,var(--level));
    /* Ajusta el ancho mediante width. */
    width:min(48%,25px);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:5px 5px 0 0;
    /* Pinta el fondo del elemento mediante background. */
    background:linear-gradient(var(--accent-bright),var(--accent-fill));
    /* Transforma la geometría visual mediante transform-origin. */
    transform-origin:bottom;
    /* Aplica una animación mediante animation. */
    animation:dashboard-grow .48s ease-out both
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.trend-stem {
    /* Ajusta el ancho mediante width. */
    width:2px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.trend-stem::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% -45%;
    /* Ajusta el ancho mediante width. */
    width:8px;
    /* Ajusta la altura mediante height. */
    height:8px;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--accent);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:50%
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.trend-value {
    /* Controla la posición del elemento mediante position. */
    position:absolute;
    /* Configura esta propiedad visual mediante bottom. */
    bottom:calc(var(--level) + 4px);
    /* Configura esta propiedad visual mediante left. */
    left:50%;
    /* Configura esta propiedad visual mediante translate. */
    translate:-50% 0;
    /* Configura la tipografía mediante font-size. */
    font-size:10px;
    /* Fija el color del texto mediante color. */
    color:var(--ink);
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:4px;
    /* Define el espacio interior mediante padding. */
    padding:0 3px;
    /* Regula la transparencia mediante opacity. */
    opacity:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.trend-day:is(:hover,:focus-visible) .trend-value {
    /* Regula la transparencia mediante opacity. */
    opacity:1
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.trend-day small {
    /* Configura la tipografía mediante font-size. */
    font-size:10px;
    /* Fija el color del texto mediante color. */
    color:var(--muted)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-shortcuts :is(.quick-access,.catalog-shortcuts) {
    /* Define el espacio exterior mediante margin. */
    margin:0;
    /* Define el espacio interior mediante padding. */
    padding:12px;
    /* 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)>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-shortcuts button {
    /* Configura esta propiedad visual mediante min-height. */
    min-height:30px;
    /* Define el espacio interior mediante padding. */
    padding:4px 7px;
    /* Define cómo se distribuye el contenido mediante display. */
    display:inline-flex;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Separa elementos vecinos mediante gap. */
    gap:4px;
    /* Configura la tipografía mediante font-size. */
    font-size:11px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-shortcuts button strong {
    /* Define cómo se distribuye el contenido mediante display. */
    display:inline;
    /* Configura la tipografía mediante font-size. */
    font-size:inherit
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-shortcuts button .ui-icon {
    /* Ajusta el ancho mediante width. */
    width:15px;
    /* Ajusta la altura mediante height. */
    height:15px;
    /* 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. */
.dashboard-feature>section,.dashboard-secondary>section {
    /* Suaviza el cambio entre estados mediante transition. */
    transition:box-shadow .2s
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-feature>section:hover,.dashboard-secondary>section:hover {
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 8px 24px color-mix(in srgb,var(--accent-fill) 17%,transparent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@keyframes dashboard-grow {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    from {
        /* Transforma la geometría visual mediante transform. */
        transform:scaleY(.15);
        /* Regula la transparencia mediante opacity. */
        opacity:.5
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    to {
        /* Transforma la geometría visual mediante transform. */
        transform:scaleY(1);
        /* Regula la transparencia mediante opacity. */
        opacity:1
    }
}
/* 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. */
    .dashboard-feature,.dashboard-secondary,.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-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. */
    .dashboard-stock-list {
        /* Configura esta propiedad visual mediante right. */
        right:auto;
        /* Configura esta propiedad visual mediante left. */
        left: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. */
    .trend-bar,.trend-stem {
        /* Aplica una animación mediante animation. */
        animation:none
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .dashboard-feature>section,.dashboard-secondary>section {
        /* Suaviza el cambio entre estados mediante transition. */
        transition:none
    }
}
/* Compact dashboard: reserve room inside the plots for labels and markers. */
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-heading {
    /* Configura esta propiedad visual mediante min-height. */
    min-height:0;
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-totals {
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:10px;
    /* Separa elementos vecinos mediante gap. */
    gap:10px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-totals>div {
    /* Configura esta propiedad visual mediante min-height. */
    min-height:0;
    /* Define el espacio interior mediante padding. */
    padding:8px 12px;
    /* Separa elementos vecinos mediante gap. */
    gap:9px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-totals>div>.ui-icon {
    /* Ajusta el ancho mediante width. */
    width:34px;
    /* Ajusta la altura mediante height. */
    height:34px;
    /* Define el espacio interior mediante padding. */
    padding:7px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-totals strong {
    /* Configura la tipografía mediante font-size. */
    font-size:20px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView :is(.dashboard-feature,.dashboard-secondary,.dashboard-shortcuts) {
    /* Separa elementos vecinos mediante gap. */
    gap:10px;
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:10px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView :is(.summary-ring,.dashboard-trends,.dashboard-secondary>.summary-module) {
    /* Define el espacio interior mediante padding. */
    padding:10px 12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView :is(.summary-ring,.dashboard-trends,.summary-module) h3 {
    /* Define el espacio exterior mediante margin. */
    margin:0 0 5px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .summary-ring-chart {
    /* Configura esta propiedad visual mediante max-width. */
    max-width:128px;
    /* Define el espacio exterior mediante margin. */
    margin:2px auto 4px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .summary-ring-data .summary-pair {
    /* Define el espacio interior mediante padding. */
    padding:4px 0;
    /* Define el espacio exterior mediante margin. */
    margin:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .summary-pair {
    /* Define el espacio exterior mediante margin. */
    margin:2px 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .summary-note {
    /* Define el espacio exterior mediante margin. */
    margin:3px 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .summary-indicators {
    /* Define el espacio exterior mediante margin. */
    margin:5px 0 0;
    /* Define el espacio interior mediante padding. */
    padding:0;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .summary-indicators:empty {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .summary-module h3 .ui-icon {
    /* Ajusta el ancho mediante width. */
    width:25px;
    /* Ajusta la altura mediante height. */
    height:25px;
    /* Define el espacio interior mediante padding. */
    padding:5px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-trends>.summary-module {
    /* Define el espacio interior mediante padding. */
    padding:4px 0;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:none;
    /* Transforma la geometría visual mediante transform. */
    transform:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-trend {
    /* Define el espacio exterior mediante margin. */
    margin:0 0 3px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .trend-grid {
    /* Define el espacio exterior mediante margin-top. */
    margin-top:3px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .trend-plot {
    /* Ajusta la altura mediante height. */
    height:51px;
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:visible
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView :is(.trend-bar,.trend-stem) {
    /* Ajusta la altura mediante height. */
    height:max(2px,calc(var(--level) * .62))
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .trend-value {
    /* Configura esta propiedad visual mediante bottom. */
    bottom:calc(var(--level) * .62 + 5px);
    /* Configura esta propiedad visual mediante white-space. */
    white-space:nowrap;
    /* Ajusta la superposición mediante z-index. */
    z-index:1
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .trend-day small {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Define el espacio interior mediante padding-top. */
    padding-top:2px
}
/* 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:7px 10px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView .dashboard-shortcuts h3 {
    /* Define el espacio exterior mediante margin. */
    margin:0 0 4px;
    /* 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-feature {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:minmax(230px,1fr) minmax(0,2.7fr)
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView .dashboard-trends {
        /* Define cómo se distribuye el contenido mediante display. */
        display:grid;
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:repeat(2,minmax(0,1fr));
        /* Configura la cuadrícula mediante grid-template-rows. */
        grid-template-rows:auto 1fr;
        /* Configura esta propiedad visual mediante column-gap. */
        column-gap:12px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView .dashboard-trends>h3 {
        /* Configura la cuadrícula mediante grid-column. */
        grid-column:1/-1
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #dashboardView .dashboard-trends>.summary-module+.summary-module {
        /* Dibuja el borde del elemento mediante border-top. */
        border-top:0;
        /* Dibuja el borde del elemento mediante border-left. */
        border-left:1px solid var(--line);
        /* Define el espacio interior mediante padding-left. */
        padding-left:12px
    }
}