/* Aplica esta regla cuando el selector o la condición coincide. */
:root {
    /* Configura la tipografía mediante font-family. */
    font-family:system-ui,-apple-system,Segoe UI,sans-serif;
    /* Fija el color del texto mediante color. */
    color:#173141;
    /* Pinta el fondo del elemento mediante background. */
    background:#f4f7f8;
    /* Configura la tipografía mediante font-size. */
    font-size:16px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
* {
    /* Configura esta propiedad visual mediante box-sizing. */
    box-sizing:border-box
}
/* Aplica esta regla cuando el selector o la condición coincide. */
body {
    /* Define el espacio exterior mediante margin. */
    margin:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
button,input,select {
    /* Configura la tipografía mediante font. */
    font:inherit
}
/* Aplica esta regla cuando el selector o la condición coincide. */
button {
    /* Configura esta propiedad visual mediante cursor. */
    cursor:pointer;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid #bfd0d5;
    /* Pinta el fondo del elemento mediante background. */
    background:white;
    /* Fija el color del texto mediante color. */
    color:#184555;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:8px;
    /* Define el espacio interior mediante padding. */
    padding:.68rem .9rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
button:hover {
    /* Pinta el fondo del elemento mediante background. */
    background:#edf5f6
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:235px 1fr;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:100vh
}
/* Aplica esta regla cuando el selector o la condición coincide. */
aside {
    /* Pinta el fondo del elemento mediante background. */
    background:#123b4b;
    /* Fija el color del texto mediante color. */
    color:white;
    /* Define el espacio interior mediante padding. */
    padding:1.4rem;
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Configura la distribución flexible mediante flex-direction. */
    flex-direction:column;
    /* Separa elementos vecinos mediante gap. */
    gap:2rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.brand {
    /* Configura la tipografía mediante font-weight. */
    font-weight:800;
    /* Configura la tipografía mediante font-size. */
    font-size:1.65rem;
    /* Configura esta propiedad visual mediante letter-spacing. */
    letter-spacing:.06em
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.brand small {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Configura la tipografía mediante font-size. */
    font-size:.8rem;
    /* Configura la tipografía mediante font-weight. */
    font-weight:400;
    /* Configura esta propiedad visual mediante letter-spacing. */
    letter-spacing:0;
    /* Fija el color del texto mediante color. */
    color:#b8d3da
}
/* Aplica esta regla cuando el selector o la condición coincide. */
nav {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Separa elementos vecinos mediante gap. */
    gap:.3rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
nav button,aside>button {
    /* Pinta el fondo del elemento mediante background. */
    background:transparent;
    /* Fija el color del texto mediante color. */
    color:white;
    /* Dibuja el borde del elemento mediante border. */
    border:0;
    /* Configura esta propiedad visual mediante text-align. */
    text-align:left
}
/* Aplica esta regla cuando el selector o la condición coincide. */
nav button.active,nav button:hover,aside>button:hover {
    /* Pinta el fondo del elemento mediante background. */
    background:#286176
}
/* Aplica esta regla cuando el selector o la condición coincide. */
aside>button {
    /* Define el espacio exterior mediante margin-top. */
    margin-top:auto
}
/* Aplica esta regla cuando el selector o la condición coincide. */
main {
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Define el espacio interior mediante padding. */
    padding:2rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
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:1rem;
    /* Dibuja el borde del elemento mediante border-bottom. */
    border-bottom:1px solid #d7e1e4;
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:1.3rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
header small {
    /* Fija el color del texto mediante color. */
    color:#5e737c
}
/* Aplica esta regla cuando el selector o la condición coincide. */
h1 {
    /* Define el espacio exterior mediante margin. */
    margin:.2rem 0 1rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.toolbar {
    /* 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:.6rem;
    /* Define el espacio exterior mediante margin. */
    margin:1rem 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.toolbar input {
    /* Configura la distribución flexible mediante flex. */
    flex:1;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:230px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
input,select {
    /* Define el espacio interior mediante padding. */
    padding:.68rem;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid #beced3;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:8px;
    /* Pinta el fondo del elemento mediante background. */
    background:white;
    /* Configura esta propiedad visual mediante max-width. */
    max-width:100%
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#add,form button:last-child {
    /* Pinta el fondo del elemento mediante background. */
    background:#14677a;
    /* Fija el color del texto mediante color. */
    color:white;
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:#14677a
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.tablebox {
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:auto;
    /* Pinta el fondo del elemento mediante background. */
    background:white;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid #d8e2e5;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
table {
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Dibuja el borde del elemento mediante border-collapse. */
    border-collapse:collapse;
    /* Configura esta propiedad visual mediante white-space. */
    white-space:nowrap
}
/* Aplica esta regla cuando el selector o la condición coincide. */
th,td {
    /* Configura esta propiedad visual mediante text-align. */
    text-align:left;
    /* Define el espacio interior mediante padding. */
    padding:.75rem;
    /* Dibuja el borde del elemento mediante border-bottom. */
    border-bottom:1px solid #e6edef;
    /* Configura la tipografía mediante font-size. */
    font-size:.9rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
th {
    /* Pinta el fondo del elemento mediante background. */
    background:#e9f1f3;
    /* Fija el color del texto mediante color. */
    color:#34515b
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.small {
    /* Configura la tipografía mediante font-size. */
    font-size:.8rem;
    /* Define el espacio interior mediante padding. */
    padding:.35rem .55rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
dialog {
    /* Dibuja el borde del elemento mediante border. */
    border:0;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:14px;
    /* Define el espacio interior mediante padding. */
    padding:1.5rem;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 15px 60px #102c3c55;
    /* Configura esta propiedad visual mediante max-width. */
    max-width:min(800px,94vw);
    /* Configura esta propiedad visual mediante max-height. */
    max-height:90vh;
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:auto
}
/* Aplica esta regla cuando el selector o la condición coincide. */
dialog::backdrop {
    /* Pinta el fondo del elemento mediante background. */
    background:#102a3e90
}
/* Aplica esta regla cuando el selector o la condición coincide. */
dialog h2 {
    /* Define el espacio exterior mediante margin-top. */
    margin-top:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.grid {
    /* 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:1rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
label {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Separa elementos vecinos mediante gap. */
    gap:.35rem;
    /* Configura la tipografía mediante font-size. */
    font-size:.9rem;
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:.8rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
footer {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Distribuye los elementos mediante justify-content. */
    justify-content:flex-end;
    /* Separa elementos vecinos mediante gap. */
    gap:.6rem;
    /* Define el espacio exterior mediante margin-top. */
    margin-top:1.2rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
dl {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:1fr 2fr;
    /* Separa elementos vecinos mediante gap. */
    gap:.5rem;
    /* Configura esta propiedad visual mediante max-height. */
    max-height:55vh;
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:auto
}
/* Aplica esta regla cuando el selector o la condición coincide. */
dt {
    /* Configura la tipografía mediante font-weight. */
    font-weight:600
}
/* Aplica esta regla cuando el selector o la condición coincide. */
dd {
    /* Define el espacio exterior mediante margin. */
    margin: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. */
.login {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura esta propiedad visual mediante place-items. */
    place-items:center;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:100vh
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.login form {
    /* Pinta el fondo del elemento mediante background. */
    background:white;
    /* Define el espacio interior mediante padding. */
    padding:2rem;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:14px;
    /* Ajusta el ancho mediante width. */
    width:min(400px,90vw);
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 12px 40px #16374522
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.login input {
    /* Ajusta el ancho mediante width. */
    width:100%
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#message {
    /* Fija el color del texto mediante color. */
    color:#9b422a;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:1.3rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(max-width:800px) {
    /* 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. */
    aside {
        /* Separa elementos vecinos mediante gap. */
        gap:.7rem;
        /* Define el espacio interior mediante padding. */
        padding:.8rem
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    nav {
        /* Define cómo se distribuye el contenido mediante display. */
        display:flex;
        /* Controla el contenido que rebasa el contenedor mediante overflow-x. */
        overflow-x:auto
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    nav button {
        /* Configura esta propiedad visual mediante white-space. */
        white-space:nowrap
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    aside>button {
        /* Alinea los elementos mediante align-self. */
        align-self:flex-end
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    main {
        /* Define el espacio interior mediante padding. */
        padding:1rem
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .grid {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:1fr
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    header {
        /* Alinea los elementos mediante align-items. */
        align-items:flex-start
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    td,th {
        /* Define el espacio interior mediante padding. */
        padding:.55rem
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
dialog {
    /* Ajusta el ancho mediante width. */
    width:min(720px,calc(100vw - 2rem));
    /* Configura esta propiedad visual mediante max-width. */
    max-width:calc(100vw - 2rem)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
dialog .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 input:not([type="checkbox"]),dialog .grid select {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.low-stock {
    /* Define cómo se distribuye el contenido mediante display. */
    display:inline-block;
    /* Fija el color del texto mediante color. */
    color:#8a3a11;
    /* Pinta el fondo del elemento mediante background. */
    background:#fff0dc;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid #f0ca93;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:999px;
    /* Define el espacio interior mediante padding. */
    padding:.22rem .55rem;
    /* Configura la tipografía mediante font-weight. */
    font-weight:600
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.quickout {
    /* 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:.35rem;
    /* Define el espacio exterior mediante margin. */
    margin:.2rem .35rem .2rem 0;
    /* Configura esta propiedad visual mediante vertical-align. */
    vertical-align:middle
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.quickout input {
    /* Ajusta el ancho mediante width. */
    width:6.5rem;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Define el espacio interior mediante padding. */
    padding:.35rem .5rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.quickout button:disabled {
    /* Regula la transparencia mediante opacity. */
    opacity:.5;
    /* Configura esta propiedad visual mediante cursor. */
    cursor:not-allowed
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.sorthead {
    /* Dibuja el borde del elemento mediante border. */
    border:0;
    /* Pinta el fondo del elemento mediante background. */
    background:transparent;
    /* Fija el color del texto mediante color. */
    color:inherit;
    /* Configura la tipografía mediante font-weight. */
    font-weight:600;
    /* Define el espacio interior mediante padding. */
    padding:.1rem;
    /* Configura esta propiedad visual mediante text-align. */
    text-align:left;
    /* Configura esta propiedad visual mediante white-space. */
    white-space:nowrap
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.sorthead:hover {
    /* Pinta el fondo del elemento mediante background. */
    background:#d7e8ec;
    /* Configura esta propiedad visual mediante text-decoration. */
    text-decoration:underline
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.column-choice {
    /* 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:.5rem;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.column-choice input {
    /* Configura la distribución flexible mediante flex. */
    flex:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.quickout {
    /* Configura la distribución flexible mediante flex-wrap. */
    flex-wrap:wrap
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.tablebox table {
    /* Ajusta el ancho mediante width. */
    width:max-content;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:100%
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.tablebox thead,.tablebox thead tr {
    /* Pinta el fondo del elemento mediante background. */
    background:#e9f1f3
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.download-history {
    /* Define cómo se distribuye el contenido mediante display. */
    display:inline-flex;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Configura esta propiedad visual mediante text-decoration. */
    text-decoration:none;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid #14677a;
    /* Pinta el fondo del elemento mediante background. */
    background:#14677a;
    /* Fija el color del texto mediante color. */
    color:white;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:8px;
    /* Define el espacio interior mediante padding. */
    padding:.68rem .9rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.download-history:hover {
    /* Pinta el fondo del elemento mediante background. */
    background:#10576a
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.download-history[hidden] {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#licenseAssignForm,#licenseAssignForm label,#returnFields {
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Configura esta propiedad visual mediante max-width. */
    max-width:100%
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#returnFields label {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#returnFields select {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Configura esta propiedad visual mediante max-width. */
    max-width:100%;
    /* Configura esta propiedad visual mediante text-overflow. */
    text-overflow:ellipsis
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#licenseAssignForm [hidden],#licenseReturnPanel[hidden] {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none!important
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#licenseAssetFields:not([hidden]) {
    /* Define cómo se distribuye el contenido mediante display. */
    display:contents
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#licenseAssignForm .grid>label,#licenseAssignForm .grid select {
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Ajusta el ancho mediante width. */
    width:100%
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#accessoryAssignForm [hidden],#accessoryReturnPanel[hidden] {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none!important
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#accessoryAssetFields:not([hidden]),#accessoryWorkerFields:not([hidden]),#accessoryDepartmentFields:not([hidden]) {
    /* Define cómo se distribuye el contenido mediante display. */
    display:contents
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#accessoryAssignForm .grid label,#accessoryAssignForm .grid select {
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Ajusta el ancho mediante width. */
    width:100%
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-assignments {
    /* Ajusta el ancho mediante width. */
    width:220px;
    /* Configura esta propiedad visual mediante max-width. */
    max-width:220px;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Configura la tipografía mediante font-size. */
    font-size:.85rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-assignments summary {
    /* Configura esta propiedad visual mediante cursor. */
    cursor:pointer;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid #bfd0d5;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:8px;
    /* Pinta el fondo del elemento mediante background. */
    background:#fff;
    /* Define el espacio interior mediante padding. */
    padding:.38rem .55rem;
    /* Configura esta propiedad visual mediante white-space. */
    white-space:nowrap
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-assignment-list {
    /* Configura esta propiedad visual mediante max-height. */
    max-height:250px;
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:auto;
    /* Configura esta propiedad visual mediante white-space. */
    white-space:normal;
    /* Define el espacio interior mediante padding. */
    padding:.3rem 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-assignment-card {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Separa elementos vecinos mediante gap. */
    gap:.12rem;
    /* Dibuja el borde del elemento mediante border-bottom. */
    border-bottom:1px solid #e6edef;
    /* Define el espacio interior mediante padding. */
    padding:.45rem 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. */
.asset-assignment-card span {
    /* Fija el color del texto mediante color. */
    color:#425c67
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-allocation-actions {
    /* 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:.65rem;
    /* Define el espacio exterior mediante margin. */
    margin:1rem 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-allocation-actions button {
    /* Pinta el fondo del elemento mediante background. */
    background:#14677a;
    /* Fija el color del texto mediante color. */
    color:white;
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:#14677a
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-allocation-actions button:hover {
    /* Pinta el fondo del elemento mediante background. */
    background:#10576a
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-serial-fields,.serial-picker {
    /* Configura la cuadrícula mediante grid-column. */
    grid-column:1/-1;
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    /* Separa elementos vecinos mediante gap. */
    gap:.65rem;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-serial-fields p,.serial-picker strong {
    /* Configura la cuadrícula mediante grid-column. */
    grid-column:1/-1;
    /* Define el espacio exterior mediante margin. */
    margin:.3rem 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-serial-fields label,.serial-picker label {
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Configura esta propiedad visual mediante max-width. */
    max-width:100%
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.asset-serial-fields input {
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Configura esta propiedad visual mediante box-sizing. */
    box-sizing:border-box
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.serial-picker[hidden] {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none!important
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#accessoryAssignForm .grid input {
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Configura esta propiedad visual mediante box-sizing. */
    box-sizing:border-box
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.row-actions {
    /* Ajusta el ancho mediante width. */
    width:126px;
    /* Configura esta propiedad visual mediante max-width. */
    max-width:126px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.row-actions summary {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Configura esta propiedad visual mediante cursor. */
    cursor:pointer;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid #bfd0d5;
    /* Pinta el fondo del elemento mediante background. */
    background:white;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:8px;
    /* Define el espacio interior mediante padding. */
    padding:.4rem .55rem;
    /* Configura esta propiedad visual mediante text-align. */
    text-align:center;
    /* Configura esta propiedad visual mediante user-select. */
    user-select:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.row-actions 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. */
.row-actions summary::after {
    /* Define el contenido generado mediante content. */
    content:' ▾'
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.row-actions[open] summary::after {
    /* Define el contenido generado mediante content. */
    content:' ▴'
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.row-actions summary:focus-visible {
    /* Configura esta propiedad visual mediante outline. */
    outline:2px solid #14677a;
    /* Configura esta propiedad visual mediante outline-offset. */
    outline-offset:2px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.row-action-list {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Separa elementos vecinos mediante gap. */
    gap:.35rem;
    /* Define el espacio interior mediante padding. */
    padding:.45rem 0 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.row-action-list button {
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Configura esta propiedad visual mediante text-align. */
    text-align:left;
    /* Configura esta propiedad visual mediante white-space. */
    white-space:nowrap
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.license-key-fields {
    /* Configura la cuadrícula mediante grid-column. */
    grid-column:1/-1;
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    /* Separa elementos vecinos mediante gap. */
    gap:.75rem;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.license-key-fields[hidden],[data-shared-key][hidden] {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none!important
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.license-key-fields p,.license-key-fields .text-link,.key-expiry-overrides {
    /* Configura la cuadrícula mediante grid-column. */
    grid-column:1/-1
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.text-link,form button.text-link {
    /* Distribuye los elementos mediante justify-self. */
    justify-self:start;
    /* Dibuja el borde del elemento mediante border. */
    border:0;
    /* Pinta el fondo del elemento mediante background. */
    background:transparent;
    /* Fija el color del texto mediante color. */
    color:#14677a;
    /* Configura esta propiedad visual mediante text-decoration. */
    text-decoration:underline;
    /* Define el espacio interior mediante padding. */
    padding:.2rem 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.key-expiry-row {
    /* 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) auto;
    /* Separa elementos vecinos mediante gap. */
    gap:.6rem;
    /* Alinea los elementos mediante align-items. */
    align-items:center
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.license-due-list {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Separa elementos vecinos mediante gap. */
    gap:.25rem;
    /* Configura esta propiedad visual mediante max-width. */
    max-width:260px;
    /* Configura esta propiedad visual mediante max-height. */
    max-height:130px;
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:auto;
    /* Configura esta propiedad visual mediante white-space. */
    white-space:normal;
    /* Define el espacio exterior mediante margin-top. */
    margin-top:.35rem
}
/* 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. */
    .key-expiry-row {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:1fr
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .license-key-fields {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:1fr
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#editSharedKey[hidden] {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none!important
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#editLicenseForm .grid>label,#editIndividualKeys>div {
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Configura esta propiedad visual mediante max-width. */
    max-width:100%
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#editLicenseForm input,#editLicenseForm select {
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.license-expiry,.license-key-list {
    /* Configura esta propiedad visual mediante min-width. */
    min-width:190px;
    /* Configura esta propiedad visual mediante max-width. */
    max-width:260px;
    /* Define el espacio exterior mediante margin. */
    margin:.25rem 0;
    /* Configura esta propiedad visual mediante white-space. */
    white-space:normal;
    /* Configura la tipografía mediante font-size. */
    font-size:.85rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.license-expiry summary,.license-key-list summary {
    /* Configura esta propiedad visual mediante cursor. */
    cursor:pointer;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:8px;
    /* Define el espacio interior mediante padding. */
    padding:.4rem .55rem;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid #bfd0d5
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.license-expiry.upcoming summary {
    /* Pinta el fondo del elemento mediante background. */
    background:#fff3bf;
    /* Fija el color del texto mediante color. */
    color:#775700;
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:#e9c752
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.license-expiry.expired summary {
    /* Pinta el fondo del elemento mediante background. */
    background:#fde0df;
    /* Fija el color del texto mediante color. */
    color:#a21d25;
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:#e99a9e
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.license-expiry>div,.license-key-list>div {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Separa elementos vecinos mediante gap. */
    gap:.35rem;
    /* Configura esta propiedad visual mediante max-height. */
    max-height:180px;
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:auto;
    /* Define el espacio interior mediante padding. */
    padding:.5rem;
    /* Controla el contenido que rebasa el contenedor mediante overflow-wrap. */
    overflow-wrap:anywhere
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.accessory-series-fields {
    /* Configura la cuadrícula mediante grid-column. */
    grid-column:1/-1;
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
    /* Separa elementos vecinos mediante gap. */
    gap:12px;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.accessory-series-fields>p {
    /* Configura la cuadrícula mediante grid-column. */
    grid-column:1/-1
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.accessory-series-fields[hidden],[data-accessory-unit][hidden] {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none!important
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.accessory-series-fields input {
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Configura esta propiedad visual mediante box-sizing. */
    box-sizing:border-box
}
/* Aplica esta regla cuando el selector o la condición coincide. */
label[hidden] {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none!important
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#accessoryFields {
    /* Dibuja el borde del elemento mediante border. */
    border:0;
    /* Define el espacio interior mediante padding. */
    padding:0;
    /* Define el espacio exterior mediante margin. */
    margin:16px 0;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#accessoryFields[hidden] {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none!important
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.text-link {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Define el espacio interior mediante padding. */
    padding:4px 0;
    /* Pinta el fondo del elemento mediante background. */
    background:transparent;
    /* Dibuja el borde del elemento mediante border. */
    border:0;
    /* Fija el color del texto mediante color. */
    color:#14677a;
    /* Configura esta propiedad visual mediante text-decoration. */
    text-decoration:underline;
    /* Configura la tipografía mediante font-size. */
    font-size:.9rem;
    /* Configura esta propiedad visual mediante text-align. */
    text-align:left
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.text-link[hidden] {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none!important
}
/* Todos los formularios mantienen campos largos dentro de la ventana. */
/* Aplica esta regla cuando el selector o la condición coincide. */
dialog form,dialog form label {
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Configura esta propiedad visual mediante max-width. */
    max-width:100%
}
/* Aplica esta regla cuando el selector o la condición coincide. */
dialog form input:not([type="checkbox"]):not([type="radio"]),dialog form select {
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Configura esta propiedad visual mediante max-width. */
    max-width:100%;
    /* Configura esta propiedad visual mediante text-overflow. */
    text-overflow:ellipsis
}
/* Información de columnas en ventana modal. */
/* Aplica esta regla cuando el selector o la condición coincide. */
.column-information details > summary[hidden] {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.column-information details {
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Configura esta propiedad visual mediante max-width. */
    max-width:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.column-information .asset-assignment-list {
    /* Configura esta propiedad visual mediante max-height. */
    max-height:55vh;
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:auto
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.column-info-button.expired {
    /* Pinta el fondo del elemento mediante background. */
    background:#fee2e2;
    /* Fija el color del texto mediante color. */
    color:#991b1b;
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:#fca5a5
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.column-info-button.upcoming {
    /* Pinta el fondo del elemento mediante background. */
    background:#fef3c7;
    /* Fija el color del texto mediante color. */
    color:#92400e;
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:#fcd34d
}
/* Menú compacto de acciones, fuera del área de desplazamiento de la tabla. */
/* Aplica esta regla cuando el selector o la condición coincide. */
.row-action-trigger {
    /* Ajusta el ancho mediante width. */
    width:36px;
    /* Ajusta la altura mediante height. */
    height:36px;
    /* Define el espacio interior mediante padding. */
    padding:0;
    /* Configura la tipografía mediante font-size. */
    font-size:25px;
    /* Configura esta propiedad visual mediante line-height. */
    line-height:1;
    /* Pinta el fondo del elemento mediante background. */
    background:#fff;
    /* Fija el color del texto mediante color. */
    color:#12666d;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid #bfd0d5;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:10px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.row-action-trigger:hover,.row-action-trigger[aria-expanded="true"] {
    /* Pinta el fondo del elemento mediante background. */
    background:#e8f4f3;
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:#12666d
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.floating-row-menu {
    /* Controla la posición del elemento mediante position. */
    position:fixed;
    /* Configura esta propiedad visual mediante inset. */
    inset:auto;
    /* Define el espacio exterior mediante margin. */
    margin:0;
    /* Ajusta el ancho mediante width. */
    width:205px;
    /* Configura esta propiedad visual mediante max-width. */
    max-width:calc(100vw - 16px);
    /* Configura esta propiedad visual mediante max-height. */
    max-height:calc(100vh - 16px);
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:auto;
    /* Ajusta la superposición mediante z-index. */
    z-index:10000;
    /* Pinta el fondo del elemento mediante background. */
    background:white;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid #d1e0e2;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:12px;
    /* Define el espacio interior mediante padding. */
    padding:7px;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 8px 28px #102a4333;
    /* Separa elementos vecinos mediante gap. */
    gap:3px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.floating-row-menu[hidden] {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.floating-row-menu button {
    /* 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;
    /* Pinta el fondo del elemento mediante background. */
    background:white;
    /* Fija el color del texto mediante color. */
    color:#183b45;
    /* Dibuja el borde del elemento mediante border. */
    border:none;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:7px;
    /* Define el espacio interior mediante padding. */
    padding:8px 10px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.floating-row-menu button:hover,.floating-row-menu button:focus-visible {
    /* Pinta el fondo del elemento mediante background. */
    background:#e8f4f3;
    /* Configura esta propiedad visual mediante outline. */
    outline:2px solid #12666d;
    /* Configura esta propiedad visual mediante outline-offset. */
    outline-offset:-2px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.floating-row-menu button:disabled {
    /* Regula la transparencia mediante opacity. */
    opacity:.45
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.action-icon {
    /* Ajusta el ancho mediante width. */
    width:22px;
    /* Configura la distribución flexible mediante flex. */
    flex:none;
    /* Configura esta propiedad visual mediante text-align. */
    text-align:center;
    /* Configura la tipografía mediante font-size. */
    font-size:19px;
    /* Fija el color del texto mediante color. */
    color:#12666d
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.tablebox thead th {
    /* Pinta el fondo del elemento mediante background. */
    background:#e9f1f3
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.column-info-button.expired,.column-info-button.upcoming {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Define el espacio exterior mediante margin. */
    margin:4px 0;
    /* Ajusta el ancho mediante width. */
    width:max-content;
    /* Configura esta propiedad visual mediante max-width. */
    max-width:100%
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.information-table {
    /* Ajusta el ancho mediante width. */
    width:100%!important;
    /* Configura esta propiedad visual mediante table-layout. */
    table-layout:auto;
    /* Configura esta propiedad visual mediante white-space. */
    white-space:normal
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.information-table td {
    /* Controla el contenido que rebasa el contenedor mediante overflow-wrap. */
    overflow-wrap:anywhere
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.license-key-value {
    /* Configura la tipografía mediante font-family. */
    font-family:ui-monospace,Consolas,monospace;
    /* Configura esta propiedad visual mediante line-height. */
    line-height:1.6
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.column-information .license-expiry>div {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Configura esta propiedad visual mediante max-height. */
    max-height:none;
    /* Define el espacio interior mediante padding. */
    padding:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.unit-status {
    /* Define cómo se distribuye el contenido mediante display. */
    display:inline-block;
    /* Define el espacio interior mediante padding. */
    padding:4px 10px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:999px;
    /* Configura la tipografía mediante font-size. */
    font-size:.8rem;
    /* Configura la tipografía mediante font-weight. */
    font-weight:600
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.unit-status.available {
    /* Pinta el fondo del elemento mediante background. */
    background:#e7f5ec;
    /* Fija el color del texto mediante color. */
    color:#246443
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.unit-status.assigned {
    /* Pinta el fondo del elemento mediante background. */
    background:#e8eef7;
    /* Fija el color del texto mediante color. */
    color:#34557c
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.nav-group summary {
    /* Configura esta propiedad visual mediante cursor. */
    cursor:pointer;
    /* Define el espacio interior mediante padding. */
    padding:.7rem;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:8px;
    /* Configura la tipografía mediante font-weight. */
    font-weight:650;
    /* Configura esta propiedad visual mediante list-style. */
    list-style:none;
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Distribuye los elementos mediante justify-content. */
    justify-content:space-between
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.nav-group summary::after {
    /* Define el contenido generado mediante content. */
    content:'＋'
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.nav-group[open] summary::after {
    /* Define el contenido generado mediante content. */
    content:'−'
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.nav-group summary:hover {
    /* Pinta el fondo del elemento mediante background. */
    background:#286176
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.nav-group>div {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Define el espacio interior mediante padding. */
    padding:3px 0 8px 10px;
    /* Separa elementos vecinos mediante gap. */
    gap:3px;
    /* Dibuja el borde del elemento mediante border-left. */
    border-left:1px solid #477081;
    /* Define el espacio exterior mediante margin-left. */
    margin-left:10px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.section-tools-trigger {
    /* Configura esta propiedad visual mediante white-space. */
    white-space:nowrap
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.section-tools-menu a {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Configura esta propiedad visual mediante text-decoration. */
    text-decoration:none;
    /* Fija el color del texto mediante color. */
    color:#183b45;
    /* Pinta el fondo del elemento mediante background. */
    background:white;
    /* Dibuja el borde del elemento mediante border. */
    border:0;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:7px;
    /* Define el espacio interior mediante padding. */
    padding:10px;
    /* Configura la tipografía mediante font-size. */
    font-size:.85rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.section-tools-menu a:hover,.section-tools-menu a:focus-visible {
    /* Pinta el fondo del elemento mediante background. */
    background:#e8f4f3
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.section-tools-menu [hidden] {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none!important
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(max-width:800px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    nav {
        /* Define cómo se distribuye el contenido mediante display. */
        display:block;
        /* Controla el contenido que rebasa el contenedor mediante overflow. */
        overflow:visible
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .nav-group>div {
        /* Define cómo se distribuye el contenido mediante display. */
        display:flex;
        /* Configura la distribución flexible mediante flex-wrap. */
        flex-wrap:wrap
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .nav-group>div button {
        /* Configura esta propiedad visual mediante white-space. */
        white-space:normal
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.nav-group summary::after,.nav-group[open] summary::after {
    /* Define el contenido generado mediante content. */
    content:none
}
/* Lista de claves integrada al formulario: sin ventana nativa que sobresalga. */
/* Aplica esta regla cuando el selector o la condición coincide. */
#licenseAssignForm [data-license-key] {
    /* 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. */
#licenseAssignForm .license-key-picker {
    /* Ajusta la altura mediante height. */
    height:145px;
    /* Define el espacio interior mediante padding. */
    padding:4px;
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Configura esta propiedad visual mediante max-width. */
    max-width:100%;
    /* Configura la tipografía mediante font-size. */
    font-size:.85rem;
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:auto
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#licenseAssignForm .license-key-picker option {
    /* Define el espacio interior mediante padding. */
    padding:8px;
    /* Configura esta propiedad visual mediante max-width. */
    max-width:100%;
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:hidden;
    /* Configura esta propiedad visual mediante text-overflow. */
    text-overflow:ellipsis
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.selected-license-key {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Configura esta propiedad visual mediante white-space. */
    white-space:normal;
    /* Controla el contenido que rebasa el contenedor mediante overflow-wrap. */
    overflow-wrap:anywhere;
    /* Configura la tipografía mediante font-size. */
    font-size:.85rem;
    /* Fija el color del texto mediante color. */
    color:#425c67
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#accessoryFields {
    /* Alinea los elementos mediante align-items. */
    align-items:start
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#accessoryFields>label {
    /* Alinea los elementos mediante align-self. */
    align-self:start
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#accessoryForm input:not([type="checkbox"]):not([type="radio"]),#accessoryForm select {
    /* Ajusta la altura mediante height. */
    height:46px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#userPermissions[hidden],#adminPermissionInfo[hidden] {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none!important
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#userPermissions {
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid #d7e1e4;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:10px;
    /* Define el espacio interior mediante padding. */
    padding:1rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#userForm input:not([type="checkbox"]),#userForm select {
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.login .text-link {
    /* Pinta el fondo del elemento mediante background. */
    background:transparent;
    /* Fija el color del texto mediante color. */
    color:#14677a
}
/* 052: acciones legibles y diez filas visibles sin limitar las exportaciones. */
/* Aplica esta regla cuando el selector o la condición coincide. */
.floating-row-menu {
    /* Ajusta el ancho mediante width. */
    width:280px;
    /* Controla el contenido que rebasa el contenedor mediante overflow-x. */
    overflow-x:hidden
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.floating-row-menu button {
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Configura esta propiedad visual mediante white-space. */
    white-space:normal;
    /* Configura esta propiedad visual mediante text-align. */
    text-align:left;
    /* Controla el contenido que rebasa el contenedor mediante overflow-wrap. */
    overflow-wrap:anywhere
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout main>.tablebox thead th {
    /* Controla la posición del elemento mediante position. */
    position:sticky;
    /* Configura esta propiedad visual mediante top. */
    top:0;
    /* Ajusta la superposición mediante z-index. */
    z-index:2;
    /* Pinta el fondo del elemento mediante background. */
    background:#e9f1f3
}
/* Aplica esta regla cuando el selector o la condición coincide. */
header>span {
    /* 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;
    /* Distribuye los elementos mediante justify-content. */
    justify-content:flex-end;
    /* Separa elementos vecinos mediante gap. */
    gap:.4rem
}
/* 053: avisos y verificación de acceso */
/* Aplica esta regla cuando el selector o la condición coincide. */
.auth-card .auth-emblem {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura esta propiedad visual mediante place-items. */
    place-items:center;
    /* Ajusta el ancho mediante width. */
    width:52px;
    /* Ajusta la altura mediante height. */
    height:52px;
    /* Pinta el fondo del elemento mediante background. */
    background:#e3f2f3;
    /* Fija el color del texto mediante color. */
    color:#12666d;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:15px;
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:1rem;
    /* Configura la tipografía mediante font-size. */
    font-size:1.5rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.auth-card p {
    /* Fija el color del texto mediante color. */
    color:#516b77;
    /* Configura esta propiedad visual mediante line-height. */
    line-height:1.55
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.auth-buttons {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Separa elementos vecinos mediante gap. */
    gap:.7rem;
    /* Configura la distribución flexible mediante flex-wrap. */
    flex-wrap:wrap;
    /* Define el espacio exterior mediante margin-top. */
    margin-top:1.2rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.auth-buttons button {
    /* Configura la distribución flexible mediante flex. */
    flex:1;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:110px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.verification-code {
    /* Configura esta propiedad visual mediante text-align. */
    text-align:center;
    /* Configura esta propiedad visual mediante letter-spacing. */
    letter-spacing:.3em;
    /* Configura la tipografía mediante font-size. */
    font-size:1.4rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.login .auth-buttons button:first-child {
    /* Pinta el fondo del elemento mediante background. */
    background:#14677a;
    /* Fija el color del texto mediante color. */
    color:white
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.notice-modal {
    /* Ajusta el ancho mediante width. */
    width:min(440px,calc(100vw - 2rem));
    /* Define el espacio interior mediante padding. */
    padding:1.8rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.notice-modal .notice-text {
    /* Configura esta propiedad visual mediante white-space. */
    white-space:pre-wrap;
    /* Controla el contenido que rebasa el contenedor mediante overflow-wrap. */
    overflow-wrap:anywhere;
    /* Configura esta propiedad visual mediante line-height. */
    line-height:1.5;
    /* Fija el color del texto mediante color. */
    color:#425b68
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.notice-icon {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura esta propiedad visual mediante place-items. */
    place-items:center;
    /* Ajusta el ancho mediante width. */
    width:46px;
    /* Ajusta la altura mediante height. */
    height:46px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:50%;
    /* Configura la tipografía mediante font-size. */
    font-size:1.65rem;
    /* Configura la tipografía mediante font-weight. */
    font-weight:700;
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:1rem;
    /* Pinta el fondo del elemento mediante background. */
    background:#e1eef5;
    /* Fija el color del texto mediante color. */
    color:#22648b
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.notice-modal[data-type=error] .notice-icon {
    /* Pinta el fondo del elemento mediante background. */
    background:#fde8e8;
    /* Fija el color del texto mediante color. */
    color:#b32c36
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.notice-modal[data-type=warning] .notice-icon {
    /* Pinta el fondo del elemento mediante background. */
    background:#fff0ce;
    /* Fija el color del texto mediante color. */
    color:#8a6000
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.notice-modal[data-type=success] .notice-icon {
    /* Pinta el fondo del elemento mediante background. */
    background:#def4e8;
    /* Fija el color del texto mediante color. */
    color:#137545
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.notice-modal footer {
    /* Configura la distribución flexible mediante flex-wrap. */
    flex-wrap:wrap
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.notice-modal footer button {
    /* Configura esta propiedad visual mediante white-space. */
    white-space:normal
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.email-approval-modal {
    /* Ajusta el ancho mediante width. */
    width:min(460px,calc(100vw - 2rem))
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.email-approval-modal input {
    /* Ajusta el ancho mediante width. */
    width:100%
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.login #back,.login #backHome {
    /* Pinta el fondo del elemento mediante background. */
    background:white;
    /* Fija el color del texto mediante color. */
    color:#184555;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid #bfd0d5;
    /* Configura esta propiedad visual mediante text-decoration. */
    text-decoration:none;
    /* Define el espacio interior mediante padding. */
    padding:.68rem .9rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.login #backHome {
    /* Define el espacio exterior mediante margin-left. */
    margin-left:.4rem
}
/* 054: respetar los permisos y el estado oculto de los botones del menú. */
/* Aplica esta regla cuando el selector o la condición coincide. */
.floating-row-menu button[hidden],.floating-row-menu a[hidden] {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none!important
}
/* 055: separar los botones de los formularios de acceso y recuperación. */
/* Aplica esta regla cuando el selector o la condición coincide. */
.login form > #back,.login form > #backHome {
    /* Define el espacio exterior mediante margin-left. */
    margin-left:.75rem;
    /* Define el espacio exterior mediante margin-top. */
    margin-top:.65rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(max-width:360px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .login form > #back,.login form > #backHome {
        /* Define cómo se distribuye el contenido mediante display. */
        display:block;
        /* Define el espacio exterior mediante margin-left. */
        margin-left:0
    }
}
/* 056: inicio, navegación sobrepuesta y temas. */
/* Aplica esta regla cuando el selector o la condición coincide. */
:root {
    /* Define una variable que otras reglas pueden reutilizar mediante --surface. */
    --surface:#fff;
    /* Define una variable que otras reglas pueden reutilizar mediante --page. */
    --page:#f4f7f8;
    /* Define una variable que otras reglas pueden reutilizar mediante --ink. */
    --ink:#173141;
    /* Define una variable que otras reglas pueden reutilizar mediante --muted. */
    --muted:#58727c;
    /* Define una variable que otras reglas pueden reutilizar mediante --line. */
    --line:#d8e2e5;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#14677a;
    /* Define una variable que otras reglas pueden reutilizar mediante --soft. */
    --soft:#e9f1f3
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark] {
    /* Define una variable que otras reglas pueden reutilizar mediante --surface. */
    --surface:#203138;
    /* Define una variable que otras reglas pueden reutilizar mediante --page. */
    --page:#172328;
    /* Define una variable que otras reglas pueden reutilizar mediante --ink. */
    --ink:#e7f0f3;
    /* Define una variable que otras reglas pueden reutilizar mediante --muted. */
    --muted:#b2c6ce;
    /* Define una variable que otras reglas pueden reutilizar mediante --line. */
    --line:#425860;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent. */
    --accent:#b4dce6;
    /* Define una variable que otras reglas pueden reutilizar mediante --soft. */
    --soft:#293f48;
    /* Fija el color del texto mediante color. */
    color:var(--ink);
    /* Pinta el fondo del elemento mediante background. */
    background:var(--page)
}
/* 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. */
[hidden] {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none!important
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.ui-icon {
    /* Ajusta el ancho mediante width. */
    width:19px;
    /* Ajusta la altura mediante height. */
    height:19px;
    /* Define cómo se distribuye el contenido mediante display. */
    display:inline-block;
    /* Configura esta propiedad visual mediante vertical-align. */
    vertical-align:middle;
    /* Configura la distribución flexible mediante flex-shrink. */
    flex-shrink:0;
    /* Define el espacio exterior mediante margin-right. */
    margin-right:.45rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
button {
    /* Suaviza el cambio entre estados mediante transition. */
    transition:background .16s,border-color .16s,box-shadow .16s
}
/* Aplica esta regla cuando el selector o la condición coincide. */
button:focus-visible,a:focus-visible {
    /* Configura esta propiedad visual mediante outline. */
    outline:3px solid #53a8b9;
    /* Configura esta propiedad visual mediante outline-offset. */
    outline-offset:3px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>aside {
    /* Controla la posición del elemento mediante position. */
    position:sticky;
    /* Configura esta propiedad visual mediante top. */
    top:0;
    /* Ajusta la altura mediante height. */
    height:100dvh;
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:auto;
    /* Separa elementos vecinos mediante gap. */
    gap:1.2rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>aside nav {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:visible
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>aside nav button {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Configura esta propiedad visual mediante white-space. */
    white-space:normal
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>aside #closeNavigation {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none;
    /* Define el espacio exterior mediante margin. */
    margin:0;
    /* Alinea los elementos mediante align-self. */
    align-self:flex-end
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.header-tools {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Separa elementos vecinos mediante gap. */
    gap:.6rem;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Define el espacio exterior mediante margin-left. */
    margin-left:auto
}
/* Aplica esta regla cuando el selector o la condición coincide. */
header {
    /* Configura la distribución flexible mediante flex-wrap. */
    flex-wrap:wrap;
    /* Define el espacio interior mediante padding-bottom. */
    padding-bottom:1rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
header h1 {
    /* Define el espacio exterior mediante margin. */
    margin:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#openNavigation {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.navigation-shade {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-heading {
    /* 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:1rem;
    /* Define el espacio exterior mediante margin. */
    margin:1rem 0 1.5rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-heading h2 {
    /* Define el espacio exterior mediante margin. */
    margin:0;
    /* Configura la tipografía mediante font-size. */
    font-size:1.65rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-heading p,.dashboard-date {
    /* Fija el color del texto mediante color. */
    color:var(--muted);
    /* Configura la tipografía mediante font-size. */
    font-size:.9rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-summary {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:repeat(3,minmax(0,1fr));
    /* Separa elementos vecinos mediante gap. */
    gap:1rem;
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:1.2rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-summary>div,.inventory-card,.dashboard-panel {
    /* 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:16px;
    /* Define el espacio interior mediante padding. */
    padding:1.25rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-summary strong {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Configura la tipografía mediante font-size. */
    font-size:1.65rem;
    /* Define el espacio exterior mediante margin-top. */
    margin-top:.5rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-summary span {
    /* Fija el color del texto mediante color. */
    color:var(--muted);
    /* Configura la tipografía mediante font-size. */
    font-size:.85rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-cards {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:repeat(4,minmax(0,1fr));
    /* Separa elementos vecinos mediante gap. */
    gap:1rem;
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:1.2rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.inventory-card {
    /* Configura esta propiedad visual mediante text-align. */
    text-align:left;
    /* Fija el color del texto mediante color. */
    color:var(--ink);
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 3px 12px #123b4b06
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.inventory-card:hover {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--soft);
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 5px 16px #123b4b15
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.inventory-card>.ui-icon {
    /* Ajusta el ancho mediante width. */
    width:28px;
    /* Ajusta la altura mediante height. */
    height:28px;
    /* Fija el color del texto mediante color. */
    color:var(--accent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.inventory-card h3 {
    /* Define el espacio exterior mediante margin. */
    margin:.6rem 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.inventory-card>strong {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Configura la tipografía mediante font-size. */
    font-size:1.5rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.inventory-card small,.inventory-card>div,.card-link {
    /* Configura la tipografía mediante font-size. */
    font-size:.8rem;
    /* Fija el color del texto mediante color. */
    color:var(--muted)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.card-quantities {
    /* 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:.5rem;
    /* Define el espacio exterior mediante margin. */
    margin:.8rem 0;
    /* Configura la distribución flexible mediante flex-wrap. */
    flex-wrap:wrap
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.card-quantities b {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Fija el color del texto mediante color. */
    color:var(--ink)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.stock-track,.category-track,.availability-track {
    /* Ajusta la altura mediante height. */
    height:8px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:10px;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--soft);
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:hidden
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.stock-track span,.category-track span,.availability-track span {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Ajusta la altura mediante height. */
    height:100%;
    /* Pinta el fondo del elemento mediante background. */
    background:#328da0;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:10px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.card-cost {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Configura la tipografía mediante font-weight. */
    font-weight:600;
    /* Define el espacio exterior mediante margin. */
    margin:.8rem 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.card-link {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Fija el color del texto mediante color. */
    color:var(--accent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-panels {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:1fr 1fr;
    /* Separa elementos vecinos mediante gap. */
    gap:1.2rem;
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:1.2rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-panel h3 {
    /* Define el espacio exterior mediante margin. */
    margin:0 0 1.2rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.category-chart-row {
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:.85rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.category-chart-row>div:first-child {
    /* 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:1rem;
    /* Configura la tipografía mediante font-size. */
    font-size:.85rem;
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:.35rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.category-chart-row small,.availability-row small {
    /* Fija el color del texto mediante color. */
    color:var(--muted);
    /* Configura la tipografía mediante font-size. */
    font-size:.75rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.availability-row {
    /* Define el espacio exterior mediante margin. */
    margin:1.1rem 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.availability-row>span {
    /* Configura la tipografía mediante font-size. */
    font-size:.9rem;
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:.4rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.availability-track {
    /* Pinta el fondo del elemento mediante background. */
    background:#bf8d58;
    /* Ajusta la altura mediante height. */
    height:12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.chart-key {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Separa elementos vecinos mediante gap. */
    gap:.5rem;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Configura la tipografía mediante font-size. */
    font-size:.8rem;
    /* Fija el color del texto mediante color. */
    color:var(--muted);
    /* Configura la distribución flexible mediante flex-wrap. */
    flex-wrap:wrap
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.chart-key span {
    /* Ajusta la altura mediante height. */
    height:10px;
    /* Ajusta el ancho mediante width. */
    width:10px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:50%;
    /* Pinta el fondo del elemento mediante background. */
    background:#328da0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.chart-key span:nth-of-type(2) {
    /* Pinta el fondo del elemento mediante background. */
    background:#bf8d58
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-alerts p {
    /* Fija el color del texto mediante color. */
    color:var(--muted);
    /* Configura la tipografía mediante font-size. */
    font-size:.85rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-catalogs {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Separa elementos vecinos mediante gap. */
    gap:1rem;
    /* Configura la distribución flexible mediante flex-wrap. */
    flex-wrap:wrap;
    /* Define el espacio exterior mediante margin. */
    margin:1.2rem 0;
    /* Fija el color del texto mediante color. */
    color:var(--muted);
    /* Configura la tipografía mediante font-size. */
    font-size:.85rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-catalogs b {
    /* Fija el color del texto mediante color. */
    color:var(--ink);
    /* Define el espacio exterior mediante margin-left. */
    margin-left:.4rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#dashboardView {
    /* Aplica una animación mediante animation. */
    animation:section-enter .2s ease-out
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dialog-exit {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Fija el color del texto mediante color. */
    color:var(--ink);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:14px;
    /* Define el espacio interior mediante padding. */
    padding:1.5rem;
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:hidden;
    /* Ajusta la superposición mediante z-index. */
    z-index:2147483647;
    /* Configura esta propiedad visual mediante pointer-events. */
    pointer-events:none;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 15px 60px #102c3c55
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@keyframes section-enter {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    from {
        /* Regula la transparencia mediante opacity. */
        opacity:0;
        /* Transforma la geometría visual mediante transform. */
        transform:translateY(6px)
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    to {
        /* Regula la transparencia mediante opacity. */
        opacity:1;
        /* Transforma la geometría visual mediante transform. */
        transform:translateY(0)
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark] :is(button,input,select,textarea,dialog,.tablebox,.floating-row-menu,.login form,.auth-card,.column-menu) {
    /* 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=dark] :is(th,.history-table th,.assignment-table th) {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--soft);
    /* Fija el color del texto mediante color. */
    color:var(--ink)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark] :is(td,th,header) {
    /* 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=dark] :is(header small,.auth-card p,.notice-modal .notice-text,.muted) {
    /* Fija el color del texto mediante color. */
    color:var(--muted)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark] button:hover {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--soft)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark] :is(#add,form button:last-child,.login .auth-buttons button:first-child) {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--accent);
    /* Fija el color del texto mediante color. */
    color:#172328;
    /* 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=dark] .layout>aside {
    /* Pinta el fondo del elemento mediante background. */
    background:#132027
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark] .layout>aside button {
    /* Pinta el fondo del elemento mediante background. */
    background:transparent;
    /* Fija el color del texto mediante color. */
    color:var(--ink)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark] .layout>aside button.active,html[data-theme=dark] .layout>aside button:hover {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--soft)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark] .sorthead {
    /* Pinta el fondo del elemento mediante background. */
    background:transparent
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark] :is(.low-stock,.expiration-soon) {
    /* Pinta el fondo del elemento mediante background. */
    background:#4b3b20;
    /* Fija el color del texto mediante color. */
    color:#ffda88;
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:#957237
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark] :is(.exhausted,.expired) {
    /* Pinta el fondo del elemento mediante background. */
    background:#49262d;
    /* Fija el color del texto mediante color. */
    color:#ffb4bd;
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:#90515b
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark] :is(.login #back,.login #backHome) {
    /* 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. */
@media(max-width:1200px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .dashboard-cards {
        /* 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: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>aside {
        /* Controla la posición del elemento mediante position. */
        position:fixed;
        /* Configura esta propiedad visual mediante top. */
        top:0;
        /* Configura esta propiedad visual mediante left. */
        left:0;
        /* Configura esta propiedad visual mediante bottom. */
        bottom:0;
        /* Ajusta el ancho mediante width. */
        width:min(290px,85vw);
        /* Ajusta la altura mediante height. */
        height:100dvh;
        /* Ajusta la superposición mediante z-index. */
        z-index:1002;
        /* Transforma la geometría visual mediante transform. */
        transform:translateX(-100%);
        /* Configura esta propiedad visual mediante visibility. */
        visibility:hidden;
        /* Suaviza el cambio entre estados mediante transition. */
        transition:transform .22s ease,visibility .22s;
        /* Define el espacio interior mediante padding. */
        padding:1.2rem;
        /* 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. */
    .layout.navigation-open>aside {
        /* Transforma la geometría visual mediante transform. */
        transform:translateX(0);
        /* Configura esta propiedad visual mediante visibility. */
        visibility:visible
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout>aside #closeNavigation {
        /* Define cómo se distribuye el contenido mediante display. */
        display:block
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout>aside nav {
        /* Define cómo se distribuye el contenido mediante display. */
        display:grid
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout>aside>button:last-child {
        /* Alinea los elementos mediante align-self. */
        align-self:stretch
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #openNavigation {
        /* Define cómo se distribuye el contenido mediante display. */
        display:inline-block
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .navigation-shade:not([hidden]) {
        /* Define cómo se distribuye el contenido mediante display. */
        display:block;
        /* Controla la posición del elemento mediante position. */
        position:fixed;
        /* Configura esta propiedad visual mediante inset. */
        inset:0;
        /* Ajusta la superposición mediante z-index. */
        z-index:1001;
        /* Pinta el fondo del elemento mediante background. */
        background:#07182099;
        /* Dibuja el borde del elemento mediante border. */
        border:0;
        /* Dibuja el borde del elemento mediante border-radius. */
        border-radius:0;
        /* Define el espacio interior mediante padding. */
        padding:0
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .navigation-locked {
        /* Controla el contenido que rebasa el contenedor mediante overflow. */
        overflow:hidden
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout>main {
        /* Define el espacio interior mediante padding. */
        padding:1rem
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .dashboard-heading {
        /* Alinea los elementos mediante align-items. */
        align-items:flex-start;
        /* Configura la distribución flexible mediante flex-direction. */
        flex-direction:column
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .dashboard-date {
        /* Define cómo se distribuye el contenido mediante display. */
        display:none
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    header {
        /* Separa elementos vecinos mediante gap. */
        gap:.65rem
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .header-tools {
        /* Separa elementos vecinos mediante gap. */
        gap:.4rem
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    header small {
        /* Configura la tipografía mediante font-size. */
        font-size:.75rem
    }
}
/* 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. */
    .dashboard-summary,.dashboard-panels {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:1fr
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .dashboard-cards {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:1fr 1fr;
        /* Separa elementos vecinos mediante gap. */
        gap:.65rem
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .inventory-card {
        /* Define el espacio interior mediante padding. */
        padding:.9rem
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .inventory-card>strong {
        /* Configura la tipografía mediante font-size. */
        font-size:1.25rem
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .card-quantities {
        /* Configura la distribución flexible mediante flex-direction. */
        flex-direction:column
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .header-tools button span {
        /* Define cómo se distribuye el contenido mediante display. */
        display:none
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    header h1 {
        /* Configura la tipografía mediante font-size. */
        font-size:1.35rem
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .dashboard-heading h2 {
        /* Configura la tipografía mediante font-size. */
        font-size:1.35rem
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .dashboard-panel {
        /* Define el espacio interior mediante padding. */
        padding:1rem
    }
}
/* 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. */
    *,*::before,*::after {
        /* Aplica una animación mediante animation. */
        animation:none!important;
        /* Suaviza el cambio entre estados mediante transition. */
        transition:none!important;
        /* Configura esta propiedad visual mediante scroll-behavior. */
        scroll-behavior:auto!important
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html {
    /* Configura esta propiedad visual mediante scrollbar-gutter. */
    scrollbar-gutter:stable
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark] .download-history {
    /* 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=dark] .action-icon,html[data-theme=dark] .text-link {
    /* Fija el color del texto mediante color. */
    color:var(--accent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark] .layout main>.tablebox thead th {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--soft);
    /* Fija el color del texto mediante color. */
    color:var(--ink)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark] .license-expiry.upcoming summary {
    /* Pinta el fondo del elemento mediante background. */
    background:#4b3b20;
    /* Fija el color del texto mediante color. */
    color:#ffda88
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark] .license-expiry.expired summary {
    /* Pinta el fondo del elemento mediante background. */
    background:#49262d;
    /* Fija el color del texto mediante color. */
    color:#ffb4bd
}
/* 057: cabecera alineada y una sección por fila en el menú. */
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>main>header {
    /* 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) auto;
    /* Distribuye los elementos mediante justify-content. */
    justify-content:start;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Separa elementos vecinos mediante gap. */
    gap:.55rem 1rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>main>header>div:not(.header-tools) {
    /* Configura la cuadrícula mediante grid-column. */
    grid-column:1;
    /* Configura la cuadrícula mediante grid-row. */
    grid-row:1;
    /* 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>span {
    /* Configura la cuadrícula mediante grid-column. */
    grid-column:1;
    /* Configura la cuadrícula mediante grid-row. */
    grid-row:2;
    /* 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. */
.layout>main>header>.header-tools {
    /* Configura la cuadrícula mediante grid-column. */
    grid-column:2;
    /* Configura la cuadrícula mediante grid-row. */
    grid-row:1 / span 2;
    /* Define el espacio exterior mediante margin-left. */
    margin-left:0;
    /* Distribuye los elementos mediante justify-content. */
    justify-content:flex-end
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>aside .nav-group>div {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:minmax(0,1fr);
    /* Separa elementos vecinos mediante gap. */
    gap:.3rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>aside .nav-group>div>button {
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Distribuye los elementos mediante justify-content. */
    justify-content:flex-start;
    /* Configura esta propiedad visual mediante text-align. */
    text-align:left
}
/* 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>main>header {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:auto minmax(0,1fr) auto
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout>main>header>#openNavigation {
        /* Configura la cuadrícula mediante grid-column. */
        grid-column:1;
        /* Configura la cuadrícula mediante grid-row. */
        grid-row:1;
        /* Alinea los elementos mediante align-self. */
        align-self:center
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout>main>header>div:not(.header-tools) {
        /* Configura la cuadrícula mediante grid-column. */
        grid-column:2;
        /* Configura la cuadrícula mediante grid-row. */
        grid-row:1
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout>main>header>span {
        /* Configura la cuadrícula mediante grid-column. */
        grid-column:1 / span 2;
        /* Configura la cuadrícula mediante grid-row. */
        grid-row:2
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout>main>header>.header-tools {
        /* Configura la cuadrícula mediante grid-column. */
        grid-column:3;
        /* Configura la cuadrícula mediante grid-row. */
        grid-row:1 / span 2
    }
}
/* 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. */
    .layout>main>header {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:auto minmax(0,1fr);
        /* Configura esta propiedad visual mediante column-gap. */
        column-gap:.75rem
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout>main>header>span {
        /* Configura la cuadrícula mediante grid-column. */
        grid-column:1 / -1;
        /* Configura la cuadrícula mediante grid-row. */
        grid-row:2
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout>main>header>.header-tools {
        /* Configura la cuadrícula mediante grid-column. */
        grid-column:1 / -1;
        /* Configura la cuadrícula mediante grid-row. */
        grid-row:3;
        /* Distribuye los elementos mediante justify-content. */
        justify-content:flex-end
    }
}
/* 058: navegación móvil translúcida con degradado. Incluye ajustes 057. */
/* 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>aside {
        /* Pinta el fondo del elemento mediante background. */
        background:linear-gradient(135deg,rgba(18,59,75,.94) 0%,rgba(18,59,75,.83) 52%,rgba(24,77,91,.71) 100%);
        /* Configura esta propiedad visual mediante backdrop-filter. */
        backdrop-filter:blur(7px);
        /* Configura esta propiedad visual mediante -webkit-backdrop-filter. */
        -webkit-backdrop-filter:blur(7px);
        /* Aplica una sombra al elemento mediante box-shadow. */
        box-shadow:12px 0 40px #07182030;
        /* Suaviza el cambio entre estados mediante transition. */
        transition:transform .24s ease,visibility .24s;
        /* Configura esta propiedad visual mediante isolation. */
        isolation:isolate
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    html[data-theme=dark] .layout>aside {
        /* Pinta el fondo del elemento mediante background. */
        background:linear-gradient(135deg,rgba(19,32,39,.94) 0%,rgba(26,47,57,.83) 52%,rgba(37,67,79,.71) 100%)
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .navigation-shade:not([hidden]) {
        /* Pinta el fondo del elemento mediante background. */
        background:linear-gradient(90deg,rgba(7,24,32,.28),rgba(7,24,32,.12) 55%,rgba(7,24,32,.04));
        /* Aplica una animación mediante animation. */
        animation:navigation-shade-enter .24s ease-out
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout.navigation-open>aside {
        /* Dibuja el borde del elemento mediante border-right. */
        border-right:1px solid #b4dce633
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@keyframes navigation-shade-enter {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    from {
        /* Regula la transparencia mediante opacity. */
        opacity:0
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    to {
        /* Regula la transparencia mediante opacity. */
        opacity:1
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(prefers-reduced-motion:reduce) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout>aside {
        /* Suaviza el cambio entre estados mediante transition. */
        transition:none
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .navigation-shade:not([hidden]) {
        /* Aplica una animación mediante animation. */
        animation:none
    }
}
/* 059: acciones coherentes, cabecera y contraste. */
/* Aplica esta regla cuando el selector o la condición coincide. */
a,.text-link,form button.text-link {
    /* 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;
    /* Separa elementos vecinos mediante gap. */
    gap:.35rem;
    /* Configura esta propiedad visual mediante max-width. */
    max-width:100%;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:36px;
    /* 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:.45rem .7rem;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Fija el color del texto mediante color. */
    color:var(--accent);
    /* Configura esta propiedad visual mediante text-decoration. */
    text-decoration:none;
    /* Configura la tipografía mediante font. */
    font:inherit;
    /* Configura esta propiedad visual mediante cursor. */
    cursor:pointer;
    /* Configura esta propiedad visual mediante white-space. */
    white-space:normal;
    /* Configura esta propiedad visual mediante text-align. */
    text-align:center
}
/* Aplica esta regla cuando el selector o la condición coincide. */
a:hover,.text-link:hover,form button.text-link:hover {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--soft);
    /* Configura esta propiedad visual mediante text-decoration. */
    text-decoration:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark] :is(a,.text-link,form button.text-link,.login .text-link) {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Fija el color del texto mediante color. */
    color:var(--accent);
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:var(--line)
}
/* 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;
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Distribuye los elementos mediante justify-content. */
    justify-content:center
}
/* 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:20px;
    /* Ajusta la altura mediante height. */
    height:20px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>main>header>span {
    /* Configura la cuadrícula mediante grid-column. */
    grid-column:2;
    /* Configura la cuadrícula mediante grid-row. */
    grid-row:2;
    /* Configura esta propiedad visual mediante text-align. */
    text-align:right;
    /* 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:flex-end;
    /* Separa elementos vecinos mediante gap. */
    gap:.5rem;
    /* Configura la distribución flexible mediante flex-wrap. */
    flex-wrap:wrap
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>main>header>.header-tools {
    /* Configura la cuadrícula mediante grid-column. */
    grid-column:2;
    /* Configura la cuadrícula mediante grid-row. */
    grid-row:1
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>main>header>div:not(.header-tools) {
    /* Configura la cuadrícula mediante grid-column. */
    grid-column:1;
    /* Configura la cuadrícula mediante grid-row. */
    grid-row:1 / span 2;
    /* Alinea los elementos mediante align-self. */
    align-self:center
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark] :is(.asset-assignment-card span,.asset-assignment-card strong,.column-information,.information-table,.serial-picker,.chart-key) {
    /* Fija el color del texto mediante color. */
    color:var(--ink)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark] :is(.dashboard-heading p,.dashboard-date,.inventory-card small,.inventory-card>div,.dashboard-summary span,.dashboard-catalogs,.category-chart-row small,.availability-row small,.dashboard-alerts p) {
    /* Fija el color del texto mediante color. */
    color:#c5d6dd
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark] .asset-assignments summary {
    /* 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. */
.serial-value {
    /* Configura la tipografía mediante font-family. */
    font-family:ui-monospace,Consolas,monospace
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.column-information .tablebox {
    /* Configura esta propiedad visual mediante max-height. */
    max-height:55vh;
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:auto
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.column-information .information-table th {
    /* Controla la posición del elemento mediante position. */
    position:sticky;
    /* Configura esta propiedad visual mediante top. */
    top:0;
    /* Ajusta la superposición mediante z-index. */
    z-index:1
}
/* Las etiquetas conservan los mismos colores en los dos temas. */
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .low-stock {
    /* Pinta el fondo del elemento mediante background. */
    background:#fff0dc;
    /* Fija el color del texto mediante color. */
    color:#8a3a11;
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:#f0ca93
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] :is(.column-info-button.upcoming,.license-expiry.upcoming summary,.expiration-soon) {
    /* Pinta el fondo del elemento mediante background. */
    background:#fef3c7;
    /* Fija el color del texto mediante color. */
    color:#92400e;
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:#fcd34d
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] :is(.column-info-button.expired,.license-expiry.expired summary,.expired,.exhausted) {
    /* Pinta el fondo del elemento mediante background. */
    background:#fee2e2;
    /* Fija el color del texto mediante color. */
    color:#991b1b;
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:#fca5a5
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .unit-status.available {
    /* Pinta el fondo del elemento mediante background. */
    background:#e7f5ec;
    /* Fija el color del texto mediante color. */
    color:#246443
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .unit-status.assigned {
    /* Pinta el fondo del elemento mediante background. */
    background:#e8eef7;
    /* Fija el color del texto mediante color. */
    color:#34557c
}
/* 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>main>header>div:not(.header-tools) {
        /* Configura la cuadrícula mediante grid-column. */
        grid-column:2;
        /* Configura la cuadrícula mediante grid-row. */
        grid-row:1 / span 2
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout>main>header>#openNavigation {
        /* Configura la cuadrícula mediante grid-column. */
        grid-column:1;
        /* Configura la cuadrícula mediante grid-row. */
        grid-row:1 / span 2
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout>main>header>.header-tools {
        /* Configura la cuadrícula mediante grid-column. */
        grid-column:3;
        /* Configura la cuadrícula mediante grid-row. */
        grid-row:1
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout>main>header>span {
        /* Configura la cuadrícula mediante grid-column. */
        grid-column:3;
        /* Configura la cuadrícula mediante grid-row. */
        grid-row:2
    }
}
/* 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. */
    .layout>main>header>div:not(.header-tools) {
        /* Configura la cuadrícula mediante grid-column. */
        grid-column:2;
        /* Configura la cuadrícula mediante grid-row. */
        grid-row:1
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout>main>header>#openNavigation {
        /* Configura la cuadrícula mediante grid-column. */
        grid-column:1;
        /* Configura la cuadrícula mediante grid-row. */
        grid-row:1
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout>main>header>.header-tools {
        /* Configura la cuadrícula mediante grid-column. */
        grid-column:1 / -1;
        /* Configura la cuadrícula mediante grid-row. */
        grid-row:2
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .layout>main>header>span {
        /* Configura la cuadrícula mediante grid-column. */
        grid-column:1 / -1;
        /* Configura la cuadrícula mediante grid-row. */
        grid-row:3
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.floating-row-menu a {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Distribuye los elementos mediante justify-content. */
    justify-content:flex-start;
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Configura esta propiedad visual mediante text-align. */
    text-align:left;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:40px;
    /* Define el espacio interior mediante padding. */
    padding:8px 10px
}
/* 060: selección uniforme en menús; sin fondo permanente ni subrayado. */
/* Aplica esta regla cuando el selector o la condición coincide. */
:root {
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#e8f4f3
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark] {
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#293f48
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .floating-row-menu {
    /* Define el espacio interior mediante padding. */
    padding:9px;
    /* Separa elementos vecinos mediante gap. */
    gap:5px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .floating-row-menu :is(button,a) {
    /* 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:flex-start;
    /* Separa elementos vecinos mediante gap. */
    gap:10px;
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:46px;
    /* Define el espacio interior mediante padding. */
    padding:12px 14px;
    /* Dibuja el borde del elemento mediante border. */
    border:0;
    /* 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:var(--ink);
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:none;
    /* Configura esta propiedad visual mediante outline. */
    outline:0;
    /* Configura esta propiedad visual mediante text-decoration. */
    text-decoration:none;
    /* Configura la tipografía mediante font-size. */
    font-size:.9rem;
    /* Suaviza el cambio entre estados mediante transition. */
    transition:background-color .18s ease,color .18s ease
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .floating-row-menu :is(button,a):is(:hover,:focus-visible) {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--menu-hover);
    /* Fija el color del texto mediante color. */
    color:var(--ink);
    /* Configura esta propiedad visual mediante text-decoration. */
    text-decoration:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .floating-row-menu :is(button,a):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. */
html[data-theme] .floating-row-menu :is(.ui-icon,.action-icon) {
    /* Fija el color del texto mediante color. */
    color:inherit
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .section-tools-trigger:is(:hover,:focus-visible,[aria-expanded=true]) {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--menu-hover);
    /* Fija el color del texto mediante color. */
    color:var(--ink);
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:var(--accent);
    /* Configura esta propiedad visual mediante text-decoration. */
    text-decoration:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.sorthead:hover {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--menu-hover);
    /* Configura esta propiedad visual mediante text-decoration. */
    text-decoration:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(prefers-reduced-motion:reduce) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    html[data-theme] .floating-row-menu :is(button,a) {
        /* Suaviza el cambio entre estados mediante transition. */
        transition:none
    }
}
/* 061: colores de Opciones y encabezados sin fondo permanente. */
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .floating-row-menu button,html[data-theme] .floating-row-menu a,html[data-theme] .floating-row-menu a.download-history {
    /* 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):is(:hover,:active,:focus-visible) {
    /* Fija el color del texto mediante color. */
    color:var(--accent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .layout main>.tablebox th .sorthead {
    /* Pinta el fondo del elemento mediante background. */
    background:transparent;
    /* Fija el color del texto mediante color. */
    color:inherit;
    /* Dibuja el borde del elemento mediante border. */
    border:0;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:none;
    /* Configura esta propiedad visual mediante text-decoration. */
    text-decoration:none;
    /* Define el espacio interior mediante padding. */
    padding:.4rem .6rem;
    /* Suaviza el cambio entre estados mediante transition. */
    transition:background-color .18s ease
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .layout main>.tablebox th .sorthead:is(:hover,:active,:focus-visible) {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--menu-hover);
    /* Configura esta propiedad visual mediante text-decoration. */
    text-decoration:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(prefers-reduced-motion:reduce) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    html[data-theme] .layout main>.tablebox th .sorthead {
        /* Suaviza el cambio entre estados mediante transition. */
        transition:none
    }
}
/* 062: inicio compacto con resúmenes reales y carruseles sin botones. */
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-overview {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:minmax(230px,.85fr) minmax(0,2fr);
    /* Separa elementos vecinos mediante gap. */
    gap:1.5rem;
    /* Alinea los elementos mediante align-items. */
    align-items:start
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring {
    /* Define el espacio interior mediante padding. */
    padding:.5rem 0;
    /* Pinta el fondo del elemento mediante background. */
    background:transparent;
    /* Dibuja el borde del elemento mediante border. */
    border:0;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:none;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring h3 {
    /* Define el espacio exterior mediante margin. */
    margin:0 0 1rem;
    /* Configura la tipografía mediante font-size. */
    font-size:.95rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring-title {
    /* 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:.5rem;
    /* Configura la distribución flexible mediante flex-wrap. */
    flex-wrap:wrap
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring-title>span {
    /* Define el espacio exterior mediante margin-left. */
    margin-left:auto;
    /* Fija el color del texto mediante color. */
    color:var(--muted);
    /* Configura la tipografía mediante font-size. */
    font-size:.8rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring-chart {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Configura esta propiedad visual mediante max-width. */
    max-width:235px;
    /* Ajusta la altura mediante height. */
    height:auto;
    /* Define el espacio exterior mediante margin. */
    margin:.75rem auto
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring-chart circle {
    /* Configura esta propiedad visual mediante fill. */
    fill:none;
    /* Configura esta propiedad visual mediante stroke-width. */
    stroke-width:9
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring-base {
    /* Configura esta propiedad visual mediante stroke. */
    stroke:#bf8d58
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring-fill {
    /* Configura esta propiedad visual mediante stroke. */
    stroke:#328da0;
    /* Configura esta propiedad visual mediante stroke-linecap. */
    stroke-linecap:butt
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring-number {
    /* Configura esta propiedad visual mediante fill. */
    fill:var(--ink);
    /* Configura la tipografía mediante font-size. */
    font-size:30px;
    /* Configura la tipografía mediante font-weight. */
    font-weight:650
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring-label {
    /* Configura esta propiedad visual mediante fill. */
    fill:var(--muted);
    /* Configura la tipografía mediante font-size. */
    font-size:12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring-data {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Separa elementos vecinos mediante gap. */
    gap:.2rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-pair {
    /* 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:.65rem;
    /* Configura la distribución flexible mediante flex-wrap. */
    flex-wrap:wrap;
    /* Define el espacio exterior mediante margin. */
    margin:.55rem 0;
    /* Configura la tipografía mediante font-size. */
    font-size:.85rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-pair>span {
    /* Fija el color del texto mediante color. */
    color:var(--muted)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-pair strong {
    /* Configura la tipografía mediante font-variant-numeric. */
    font-variant-numeric:tabular-nums;
    /* Controla el contenido que rebasa el contenedor mediante overflow-wrap. */
    overflow-wrap:anywhere
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-modules {
    /* 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:.8rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-module {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:12px;
    /* Define el espacio interior mediante padding. */
    padding:1rem;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-module h3 {
    /* Configura la tipografía mediante font-size. */
    font-size:.9rem;
    /* Define el espacio exterior mediante margin. */
    margin:0 0 .85rem;
    /* 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:.35rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-module h3 .ui-icon {
    /* Fija el color del texto mediante color. */
    color:var(--accent);
    /* 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. */
.summary-module [data-summary-slot] {
    /* Configura esta propiedad visual mediante min-height. */
    min-height:110px
}
/* 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:335px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-note {
    /* Configura la tipografía mediante font-size. */
    font-size:.78rem;
    /* Fija el color del texto mediante color. */
    color:var(--muted);
    /* Configura esta propiedad visual mediante line-height. */
    line-height:1.5;
    /* Define el espacio exterior mediante margin. */
    margin:.55rem 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. */
.summary-name {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Configura la tipografía mediante font-size. */
    font-size:.9rem;
    /* Define el espacio exterior mediante margin. */
    margin:.55rem 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. */
.summary-badge {
    /* Define cómo se distribuye el contenido mediante display. */
    display:inline-block;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:5px;
    /* Define el espacio interior mediante padding. */
    padding:.25rem .4rem;
    /* Configura la tipografía mediante font-size. */
    font-size:.72rem;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--soft);
    /* Fija el color del texto mediante color. */
    color:var(--ink)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-event {
    /* 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:.5rem;
    /* Configura la distribución flexible mediante flex-wrap. */
    flex-wrap:wrap;
    /* Dibuja el borde del elemento mediante border-top. */
    border-top:1px solid var(--line);
    /* Define el espacio interior mediante padding-top. */
    padding-top:.45rem;
    /* Configura la tipografía mediante font-size. */
    font-size:.72rem;
    /* Fija el color del texto mediante color. */
    color:var(--muted)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-track {
    /* Ajusta la altura mediante height. */
    height:4px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:4px;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--soft);
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:hidden;
    /* Define el espacio exterior mediante margin. */
    margin:.7rem 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-track>span {
    /* Ajusta la altura mediante height. */
    height:100%;
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Pinta el fondo del elemento mediante background. */
    background:#328da0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-indicators {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Distribuye los elementos mediante justify-content. */
    justify-content:center;
    /* Separa elementos vecinos mediante gap. */
    gap:5px;
    /* Define el espacio exterior mediante margin-top. */
    margin-top:.6rem;
    /* Configura la distribución flexible mediante flex-wrap. */
    flex-wrap:wrap
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-indicators>span {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Ajusta la altura mediante height. */
    height:5px;
    /* Ajusta el ancho mediante width. */
    width:5px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:5px;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--line)
}
/* 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)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-warning-details {
    /* Define el espacio exterior mediante margin-top. */
    margin-top:1rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-warning-details>summary {
    /* Define el espacio interior mediante padding. */
    padding:.7rem 0;
    /* Configura la tipografía mediante font-size. */
    font-size:.85rem;
    /* Fija el color del texto mediante color. */
    color:var(--accent);
    /* Configura esta propiedad visual mediante cursor. */
    cursor:pointer
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-warning-details>.tablebox {
    /* Configura esta propiedad visual mediante max-height. */
    max-height:320px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-warning-details th {
    /* Controla la posición del elemento mediante position. */
    position:sticky;
    /* Configura esta propiedad visual mediante top. */
    top:0;
    /* Ajusta la superposición mediante z-index. */
    z-index:1
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark] .summary-ring-fill {
    /* Configura esta propiedad visual mediante stroke. */
    stroke:#64c0d3
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark] .summary-track>span {
    /* Pinta el fondo del elemento mediante background. */
    background:#64c0d3
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark] :is(.summary-note,.summary-pair>span,.summary-event,.summary-ring-title>span) {
    /* Fija el color del texto mediante color. */
    color:#c5d6dd
}
/* 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. */
    .dashboard-overview {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:minmax(240px,.7fr) minmax(0,2.3fr)
    }
    /* 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. */
@media(max-width:1000px) {
    /* 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 {
        /* Configura esta propiedad visual mediante max-width. */
        max-width:450px;
        /* Ajusta el ancho mediante width. */
        width:100%;
        /* Define el espacio exterior mediante margin. */
        margin:0 auto
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .summary-ring-chart {
        /* Configura esta propiedad visual mediante max-width. */
        max-width:170px
    }
    /* 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:300px
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(max-width:520px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .summary-modules {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:1fr
    }
    /* 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:90px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .summary-module {
        /* Define el espacio interior mediante padding. */
        padding:.85rem
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-badge.upcoming {
    /* Pinta el fondo del elemento mediante background. */
    background:#fff0b3;
    /* Fija el color del texto mediante color. */
    color:#684600
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-badge.expired {
    /* Pinta el fondo del elemento mediante background. */
    background:#ffe2e2;
    /* Fija el color del texto mediante color. */
    color:#8f1d1d
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-static-frame+.summary-static-frame {
    /* Dibuja el borde del elemento mediante border-top. */
    border-top:1px solid var(--line);
    /* Define el espacio interior mediante padding-top. */
    padding-top:.75rem;
    /* Define el espacio exterior mediante margin-top. */
    margin-top:.75rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
[data-dashboard-carousel]:focus-visible {
    /* Configura esta propiedad visual mediante outline. */
    outline:2px solid var(--accent);
    /* Configura esta propiedad visual mediante outline-offset. */
    outline-offset:4px
}
/* 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-module [data-summary-slot] {
        /* Configura esta propiedad visual mediante max-height. */
        max-height:240px;
        /* Controla el contenido que rebasa el contenedor mediante overflow. */
        overflow:auto
    }
    /* 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:400px;
        /* Controla el contenido que rebasa el contenedor mediante overflow. */
        overflow:auto
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .summary-indicators {
        /* Define cómo se distribuye el contenido mediante display. */
        display:none
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring-base.empty {
    /* Configura esta propiedad visual mediante stroke. */
    stroke:var(--soft)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-summary strong {
    /* Controla el contenido que rebasa el contenedor mediante overflow-wrap. */
    overflow-wrap:anywhere
}
/* 063: identidad común, navegación, perfil y espacios de trabajo. */
/* Aplica esta regla cuando el selector o la condición coincide. */
:root {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#0d6d7d;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#008d9a;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-top. */
    --sidebar-top:#123d4b;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#082f3c;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#286173;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#e2f1f3
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[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:#18354f;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#0a253a;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#294f70;
    /* 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-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:#352a4d;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#211936;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#53416d;
    /* 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-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:#1d4036;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-bottom. */
    --sidebar-bottom:#0b2c24;
    /* Define una variable que otras reglas pueden reutilizar mediante --sidebar-hover. */
    --sidebar-hover:#335f50;
    /* 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] {
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-fill. */
    --accent-fill:#277d8c;
    /* Define una variable que otras reglas pueden reutilizar mediante --accent-bright. */
    --accent-bright:#69c7d2;
    /* Define una variable que otras reglas pueden reutilizar mediante --menu-hover. */
    --menu-hover:#304b54
}
/* 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. */
html[data-theme] .layout>aside {
    /* Pinta el fondo del elemento mediante background. */
    background:linear-gradient(165deg,var(--sidebar-top),var(--sidebar-bottom));
    /* Define el espacio interior mediante padding. */
    padding:1.25rem 1rem;
    /* Separa elementos vecinos mediante gap. */
    gap:1rem;
    /* Dibuja el borde del elemento mediante border-right. */
    border-right:1px solid #ffffff0d
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>aside .brand {
    /* Define el espacio interior mediante padding. */
    padding:.2rem .4rem .7rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>aside nav {
    /* Separa elementos vecinos mediante gap. */
    gap:.65rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.nav-group {
    /* Dibuja el borde del elemento mediante border. */
    border:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.nav-group>summary {
    /* 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:.5rem;
    /* Define el espacio interior mediante padding. */
    padding:.8rem .6rem;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:9px;
    /* Configura esta propiedad visual mediante cursor. */
    cursor:pointer;
    /* Configura la tipografía mediante font-size. */
    font-size:.86rem;
    /* Configura esta propiedad visual mediante letter-spacing. */
    letter-spacing:.025em;
    /* Fija el color del texto mediante color. */
    color:#d7e9ee;
    /* Configura esta propiedad visual mediante list-style. */
    list-style:none
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.nav-group>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. */
.nav-group>summary:hover {
    /* Pinta el fondo del elemento mediante background. */
    background:#ffffff0b
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.nav-chevron {
    /* Ajusta el ancho mediante width. */
    width:20px;
    /* Ajusta la altura mediante height. */
    height:20px;
    /* Configura la distribución flexible mediante flex-shrink. */
    flex-shrink:0;
    /* Configura esta propiedad visual mediante fill. */
    fill:none;
    /* Configura esta propiedad visual mediante stroke. */
    stroke:currentColor;
    /* Configura esta propiedad visual mediante stroke-width. */
    stroke-width:1.7;
    /* Suaviza el cambio entre estados mediante transition. */
    transition:transform .2s;
    /* Define el espacio exterior mediante margin-left. */
    margin-left:auto
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.nav-group[open]>summary>.nav-chevron {
    /* Transforma la geometría visual mediante transform. */
    transform:rotate(180deg)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.nav-group>div {
    /* Define el espacio exterior mediante margin. */
    margin:.2rem 0 .3rem 1.2rem;
    /* Dibuja el borde del elemento mediante border-left. */
    border-left:1px solid #ffffff22;
    /* Define el espacio interior mediante padding-left. */
    padding-left:.55rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.nav-group[open]>div {
    /* Aplica una animación mediante animation. */
    animation:nav-reveal .22s ease-out
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>aside nav button {
    /* Controla la posición del elemento mediante position. */
    position:relative;
    /* Ajusta el ancho mediante width. */
    width:100%;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:43px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:9px;
    /* Define el espacio interior mediante padding. */
    padding:.6rem .7rem;
    /* Separa elementos vecinos mediante gap. */
    gap:.2rem;
    /* Fija el color del texto mediante color. */
    color:#dce9ed;
    /* Suaviza el cambio entre estados mediante transition. */
    transition:background .18s,color .18s
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>aside nav button .ui-icon {
    /* Ajusta el ancho mediante width. */
    width:17px;
    /* Ajusta la altura mediante height. */
    height:17px;
    /* Regula la transparencia mediante opacity. */
    opacity:.8
}
/* 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:var(--sidebar-hover);
    /* Fija el color del texto mediante color. */
    color:white
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>aside nav button.active::before {
    /* Define el contenido generado mediante content. */
    content:"";
    /* Controla la posición del elemento mediante position. */
    position:absolute;
    /* Configura esta propiedad visual mediante left. */
    left:-.6rem;
    /* Configura esta propiedad visual mediante top. */
    top:10px;
    /* Configura esta propiedad visual mediante bottom. */
    bottom:10px;
    /* Ajusta el ancho mediante width. */
    width:3px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:3px;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--accent-bright)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#personalMenu {
    /* 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:.65rem;
    /* Configura esta propiedad visual mediante min-height. */
    min-height:65px;
    /* Define el espacio exterior mediante margin-top. */
    margin-top:auto;
    /* Dibuja el borde del elemento mediante border-top. */
    border-top:1px solid #ffffff24;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:0;
    /* Define el espacio interior mediante padding. */
    padding:.85rem .2rem;
    /* Fija el color del texto mediante color. */
    color:#fff;
    /* Configura esta propiedad visual mediante text-align. */
    text-align:left
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#personalMenu .nav-chevron {
    /* Ajusta el ancho mediante width. */
    width:18px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.profile-identity {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Separa elementos vecinos mediante gap. */
    gap:.2rem;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.profile-identity strong {
    /* Configura la tipografía mediante font-size. */
    font-size:.82rem;
    /* Controla el contenido que rebasa el contenedor mediante overflow-wrap. */
    overflow-wrap:anywhere;
    /* Configura la tipografía mediante font-weight. */
    font-weight:550
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.profile-identity small {
    /* Configura la tipografía mediante font-size. */
    font-size:.7rem;
    /* Fija el color del texto mediante color. */
    color:#bad1da
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.profile-avatar {
    /* 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 la distribución flexible mediante flex-shrink. */
    flex-shrink:0;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:50%;
    /* Configura esta propiedad visual mediante object-fit. */
    object-fit:cover;
    /* Pinta el fondo del elemento mediante background. */
    background:#d4eef3;
    /* Fija el color del texto mediante color. */
    color:#16465a;
    /* Configura la tipografía mediante font-weight. */
    font-weight:700;
    /* Configura la tipografía mediante font-size. */
    font-size:.8rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.profile-avatar.large {
    /* Ajusta el ancho mediante width. */
    width:72px;
    /* Ajusta la altura mediante height. */
    height:72px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>aside #logout {
    /* Define el espacio exterior mediante margin. */
    margin:0;
    /* Define el espacio interior mediante padding. */
    padding:.6rem;
    /* Fija el color del texto mediante color. */
    color:#dce9ed
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] .personal-menu {
    /* Configura esta propiedad visual mediante min-width. */
    min-width:220px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.profile-tabs {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Separa elementos vecinos mediante gap. */
    gap:.5rem;
    /* Configura la distribución flexible mediante flex-wrap. */
    flex-wrap:wrap;
    /* Dibuja el borde del elemento mediante border-bottom. */
    border-bottom:1px solid var(--line);
    /* Define el espacio interior mediante padding-bottom. */
    padding-bottom:.8rem;
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:1.2rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.profile-tabs button {
    /* Pinta el fondo del elemento mediante background. */
    background:transparent!important;
    /* Fija el color del texto mediante color. */
    color:var(--muted)!important;
    /* Dibuja el borde del elemento mediante border. */
    border:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.profile-tabs button[aria-selected=true] {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--soft)!important;
    /* Fija el color del texto mediante color. */
    color:var(--accent)!important
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.profile-overview {
    /* 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:1rem;
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:1rem;
    /* Controla el contenido que rebasa el contenedor mediante overflow-wrap. */
    overflow-wrap:anywhere
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.profile-overview p {
    /* Configura la tipografía mediante font-size. */
    font-size:.85rem;
    /* Fija el color del texto mediante color. */
    color:var(--muted)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.profile-overview>.ui-icon {
    /* Ajusta el ancho mediante width. */
    width:50px;
    /* Ajusta la altura mediante height. */
    height:50px;
    /* Fija el color del texto mediante color. */
    color:var(--accent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.accent-picker {
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:10px;
    /* Define el espacio interior mediante padding. */
    padding:1rem;
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Separa elementos vecinos mediante gap. */
    gap:1rem;
    /* Configura la distribución flexible mediante flex-wrap. */
    flex-wrap:wrap
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.accent-picker label {
    /* 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:.4rem;
    /* Define el espacio exterior mediante margin. */
    margin:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.accent-swatch {
    /* Ajusta el ancho mediante width. */
    width:18px;
    /* Ajusta la altura mediante height. */
    height:18px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:50%;
    /* Pinta el fondo del elemento mediante background. */
    background:#008d9a
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.accent-swatch.blue {
    /* Pinta el fondo del elemento mediante background. */
    background:#357bc5
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.accent-swatch.violet {
    /* Pinta el fondo del elemento mediante background. */
    background:#8559b2
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.accent-swatch.green {
    /* Pinta el fondo del elemento mediante background. */
    background:#318a6c
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.preference-order {
    /* Define el espacio exterior mediante margin-top. */
    margin-top:1.1rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.preference-order h3 {
    /* Configura la tipografía mediante font-size. */
    font-size:.9rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.preference-order-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:.4rem;
    /* Define el espacio interior mediante padding. */
    padding:.5rem;
    /* 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 exterior mediante margin-bottom. */
    margin-bottom:.3rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.preference-order-row>span {
    /* Define el espacio exterior mediante margin-right. */
    margin-right:auto;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Configura la tipografía mediante font-size. */
    font-size:.86rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.preference-order-row button {
    /* Define el espacio interior mediante padding. */
    padding:.4rem .65rem;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface)!important;
    /* Fija el color del texto mediante color. */
    color:var(--accent)!important
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.preference-order-row button:disabled {
    /* Regula la transparencia mediante opacity. */
    opacity:.35;
    /* Configura esta propiedad visual mediante cursor. */
    cursor:default
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.quick-section-grid {
    /* 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:.6rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.quick-section-grid button {
    /* 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:.6rem;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface)!important;
    /* Fija el color del texto mediante color. */
    color:var(--ink)!important;
    /* Configura esta propiedad visual mediante text-align. */
    text-align:left
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.quick-section-grid button>span:last-child {
    /* Define el espacio exterior mediante margin-left. */
    margin-left:auto;
    /* Fija el color del texto mediante color. */
    color:var(--accent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-updated {
    /* 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:.45rem;
    /* Fija el color del texto mediante color. */
    color:var(--muted);
    /* Configura la tipografía mediante font-size. */
    font-size:.8rem;
    /* Configura esta propiedad visual mediante white-space. */
    white-space:nowrap
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-updated>span {
    /* Ajusta el ancho mediante width. */
    width:8px;
    /* Ajusta la altura mediante height. */
    height:8px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:50%;
    /* Pinta el fondo del elemento mediante background. */
    background:#24a47f
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-summary>div {
    /* 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:1rem;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line);
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 4px 18px #123b4b05;
    /* Define el espacio interior mediante padding. */
    padding:1.1rem;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:14px;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-summary>div>.ui-icon {
    /* Ajusta el ancho mediante width. */
    width:46px;
    /* Ajusta la altura mediante height. */
    height:46px;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--soft);
    /* Fija el color del texto mediante color. */
    color:var(--accent);
    /* Define el espacio interior mediante padding. */
    padding:11px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:12px;
    /* Define el espacio exterior mediante margin. */
    margin:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-summary>div>div {
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-summary strong {
    /* Configura la tipografía mediante font-size. */
    font-size:1.55rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dashboard-overview {
    /* Separa elementos vecinos mediante gap. */
    gap:1rem;
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:minmax(250px,.9fr) minmax(0,2.4fr)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring {
    /* Configura esta propiedad visual mediante max-width. */
    max-width:none;
    /* Define el espacio exterior mediante margin. */
    margin:0;
    /* Define el espacio interior mediante padding. */
    padding:1.2rem;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:14px;
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 4px 18px #123b4b05
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring h3 {
    /* Configura la tipografía mediante font-size. */
    font-size:1.03rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring-chart {
    /* Configura esta propiedad visual mediante max-width. */
    max-width:200px;
    /* Define el espacio exterior mediante margin. */
    margin:.75rem auto
}
/* 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:340px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring-data .summary-pair {
    /* Dibuja el borde del elemento mediante border-top. */
    border-top:1px solid var(--line);
    /* Define el espacio exterior mediante margin. */
    margin:0;
    /* Define el espacio interior mediante padding. */
    padding:.6rem 0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-ring-fill {
    /* Configura esta propiedad visual mediante stroke. */
    stroke:var(--accent-bright)!important
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-track>span {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--accent-bright)!important
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-right {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Separa elementos vecinos mediante gap. */
    gap:.8rem;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-module {
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 3px 16px #123b4b04;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:13px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-module h3 {
    /* Configura esta propiedad visual mediante line-height. */
    line-height:1.4;
    /* Separa elementos vecinos mediante gap. */
    gap:.55rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.summary-module h3 .ui-icon {
    /* Define el espacio exterior mediante margin. */
    margin:0;
    /* Configura la distribución flexible mediante flex-shrink. */
    flex-shrink:0
}
/* 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
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.quick-access,.catalog-shortcuts {
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:13px;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface);
    /* Define el espacio interior mediante padding. */
    padding:.9rem 1rem
}
/* 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:.95rem;
    /* Define el espacio exterior mediante margin. */
    margin:0 0 .75rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.quick-access>div {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:repeat(3,minmax(0,1fr));
    /* Separa elementos vecinos mediante gap. */
    gap:.6rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.quick-access button,.catalog-shortcuts button {
    /* 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:.65rem;
    /* 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);
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0;
    /* Define el espacio interior mediante padding. */
    padding:.85rem;
    /* Configura esta propiedad visual mediante text-align. */
    text-align:left
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.quick-access button:hover,.catalog-shortcuts button: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. */
.quick-access button>.ui-icon,.catalog-shortcuts button>.ui-icon {
    /* Fija el color del texto mediante color. */
    color:var(--accent);
    /* Define el espacio exterior mediante margin. */
    margin:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.catalog-shortcuts {
    /* Define el espacio exterior mediante margin-top. */
    margin-top:.8rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.catalog-shortcuts>div {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Configura la cuadrícula mediante grid-template-columns. */
    grid-template-columns:repeat(4,minmax(0,1fr));
    /* Separa elementos vecinos mediante gap. */
    gap:.6rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.catalog-shortcuts button span {
    /* Configura la tipografía mediante font-size. */
    font-size:.85rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.catalog-shortcuts button strong {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Define el espacio exterior mediante margin-top. */
    margin-top:.2rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.catalog-shortcuts .shortcut-arrow {
    /* Define el espacio exterior mediante margin-left. */
    margin-left:auto;
    /* Fija el color del texto mediante color. */
    color:var(--accent)
}
/* 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);
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:var(--accent-fill);
    /* Fija el color del texto mediante color. */
    color:white
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] form button[type=submit] {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--accent-fill);
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:var(--accent-fill);
    /* Fija el color del texto mediante color. */
    color:white
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=light] .toolbar {
    /* Define el espacio interior mediante padding. */
    padding:1rem;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:13px;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme=dark] .toolbar {
    /* Define el espacio interior mediante padding. */
    padding:1rem;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid var(--line);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:13px;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout main>.tablebox {
    /* Aplica una sombra al elemento mediante box-shadow. */
    box-shadow:0 3px 16px #123b4b05;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:13px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout main>.tablebox td {
    /* Configura esta propiedad visual mediante vertical-align. */
    vertical-align:middle
}
/* 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:var(--soft)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@keyframes nav-reveal {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    from {
        /* Regula la transparencia mediante opacity. */
        opacity:0;
        /* Transforma la geometría visual mediante transform. */
        transform:translateY(-5px)
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    to {
        /* Regula la transparencia mediante opacity. */
        opacity:1;
        /* Transforma la geometría visual mediante transform. */
        transform:translateY(0)
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(min-width:1400px) {
    /* 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. */
@media(max-width:1100px) {
    /* 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(220px,.8fr) minmax(0,1.8fr)
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .dashboard-summary strong {
        /* Configura la tipografía mediante font-size. */
        font-size:1.3rem
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .dashboard-summary>div {
        /* Separa elementos vecinos mediante gap. */
        gap:.65rem;
        /* Define el espacio interior mediante padding. */
        padding:.85rem
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .dashboard-summary>div>.ui-icon {
        /* Ajusta el ancho mediante width. */
        width:35px;
        /* Ajusta la altura mediante height. */
        height:35px;
        /* Define el espacio interior mediante padding. */
        padding:8px
    }
}
/* 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. */
    .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 {
        /* Configura esta propiedad visual mediante max-width. */
        max-width:none;
        /* Ajusta el ancho mediante width. */
        width:100%
    }
    /* 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-chart {
        /* Configura esta propiedad visual mediante max-width. */
        max-width:180px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .summary-ring-data {
        /* Define cómo se distribuye el contenido mediante display. */
        display:grid;
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:repeat(2,minmax(0,1fr));
        /* Separa elementos vecinos mediante gap. */
        gap:0 1rem
    }
    /* 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. */
    html[data-theme] .layout.navigation-open>aside {
        /* Pinta el fondo del elemento mediante background. */
        background:linear-gradient(155deg,color-mix(in srgb,var(--sidebar-top) 94%,transparent),color-mix(in srgb,var(--sidebar-bottom) 82%,transparent));
        /* Configura esta propiedad visual mediante backdrop-filter. */
        backdrop-filter:blur(14px)
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .dashboard-updated {
        /* Configura esta propiedad visual mediante white-space. */
        white-space:normal
    }
}
/* 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. */
    .quick-access>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. */
    .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. */
    .summary-ring-data {
        /* Configura la cuadrícula mediante grid-template-columns. */
        grid-template-columns:1fr
    }
    /* 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
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .dashboard-summary strong {
        /* Configura la tipografía mediante font-size. */
        font-size:1.5rem
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .catalog-shortcuts button {
        /* Define el espacio interior mediante padding. */
        padding:.65rem
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .catalog-shortcuts button .ui-icon {
        /* Ajusta el ancho mediante width. */
        width:16px;
        /* Ajusta la altura mediante height. */
        height:16px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .toolbar input {
        /* Configura esta propiedad visual mediante min-width. */
        min-width:0;
        /* Ajusta el ancho mediante width. */
        width:100%;
        /* Configura la distribución flexible mediante flex-basis. */
        flex-basis:100%
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #personalProfileForm footer {
        /* Configura la distribución flexible mediante flex-wrap. */
        flex-wrap:wrap
    }
}
/* Aplica esta regla cuando el selector o la condición coincide. */
html[data-theme] :is(form footer>button:last-child:not([type=button]),.login .auth-buttons button:first-child) {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--accent-fill);
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:var(--accent-fill);
    /* Fija el color del texto mediante color. */
    color:white
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.quick-access button span {
    /* Controla el contenido que rebasa el contenedor mediante overflow-wrap. */
    overflow-wrap:anywhere
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.personal-menu button {
    /* Configura esta propiedad visual mediante white-space. */
    white-space:normal
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.nav-group::details-content {
    /* Configura esta propiedad visual mediante interpolate-size. */
    interpolate-size:allow-keywords;
    /* Ajusta la altura mediante height. */
    height:0;
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:hidden;
    /* Suaviza el cambio entre estados mediante transition. */
    transition:height .2s ease,content-visibility .2s allow-discrete
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.nav-group[open]::details-content {
    /* Ajusta la altura mediante height. */
    height:auto
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.quick-picker [data-cancel] {
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface)!important;
    /* Fija el color del texto mediante color. */
    color:var(--ink)!important;
    /* Dibuja el borde del elemento mediante border-color. */
    border-color:var(--line)!important
}
/* Logo institucional original: soporte claro, sin deformación ni inversión. */
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>aside .brand {
    /* 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:.75rem;
    /* Configura esta propiedad visual mediante letter-spacing. */
    letter-spacing:.025em
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.institution-logo {
    /* Define cómo se distribuye el contenido mediante display. */
    display:block;
    /* Configura esta propiedad visual mediante object-fit. */
    object-fit:contain;
    /* Pinta el fondo del elemento mediante background. */
    background:#fff;
    /* Dibuja el borde del elemento mediante border. */
    border:1px solid #e1e7eb;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:12px;
    /* Define el espacio interior mediante padding. */
    padding:6px;
    /* Configura esta propiedad visual mediante max-width. */
    max-width:100%;
    /* Ajusta la altura mediante height. */
    height:auto
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>aside .brand>.institution-logo {
    /* Ajusta el ancho mediante width. */
    width:70px;
    /* Ajusta la altura mediante height. */
    height:80px;
    /* Configura la distribución flexible mediante flex-shrink. */
    flex-shrink:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>aside .brand>span {
    /* Configura la tipografía mediante font-size. */
    font-size:1.2rem;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.layout>aside .brand small {
    /* Configura la tipografía mediante font-size. */
    font-size:.72rem;
    /* Configura esta propiedad visual mediante letter-spacing. */
    letter-spacing:0;
    /* Configura esta propiedad visual mediante line-height. */
    line-height:1.5
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.login-logo {
    /* Ajusta el ancho mediante width. */
    width:105px;
    /* Ajusta la altura mediante height. */
    height:117px;
    /* Define el espacio exterior mediante margin. */
    margin:0 auto 1rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.logo-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. */
    padding:1rem;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--soft);
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:12px;
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:1rem
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.logo-preview .institution-logo {
    /* Ajusta el ancho mediante width. */
    width:150px;
    /* Ajusta la altura mediante height. */
    height:168px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
#institutionBranding footer {
    /* Configura la distribución flexible mediante flex-wrap. */
    flex-wrap:wrap
}
/* 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. */
    .layout>aside .brand>.institution-logo {
        /* Ajusta el ancho mediante width. */
        width:58px;
        /* Ajusta la altura mediante height. */
        height:65px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .login-logo {
        /* Ajusta el ancho mediante width. */
        width:90px;
        /* Ajusta la altura mediante height. */
        height:100px
    }
}