/* Aplica esta regla cuando el selector o la condición coincide. */
#depreciationView {
    /* Define el espacio interior mediante padding-block. */
    padding-block:12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dep-tools {
    /* Define cómo se distribuye el contenido mediante display. */
    display:flex;
    /* Alinea los elementos mediante align-items. */
    align-items:end;
    /* Separa elementos vecinos mediante gap. */
    gap:14px;
    /* Configura la distribución flexible mediante flex-wrap. */
    flex-wrap:wrap;
    /* Define el espacio exterior mediante margin-bottom. */
    margin-bottom:20px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dep-tools label {
    /* Define cómo se distribuye el contenido mediante display. */
    display:grid;
    /* Separa elementos vecinos mediante gap. */
    gap:7px;
    /* Configura esta propiedad visual mediante max-width. */
    max-width:220px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dep-tools input,.dep-tools select {
    /* Ajusta el ancho mediante width. */
    width:auto;
    /* Configura esta propiedad visual mediante max-width. */
    max-width:100%
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dep-status {
    /* Define el espacio interior mediante padding. */
    padding:9px 14px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:22px;
    /* Pinta el fondo del elemento mediante background. */
    background:color-mix(in srgb,var(--accent,#6841b5) 12%,transparent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dep-note {
    /* Define el espacio exterior mediante margin. */
    margin:16px 0 22px;
    /* Configura esta propiedad visual mediante line-height. */
    line-height:1.6
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dep-table {
    /* Configura esta propiedad visual mediante max-height. */
    max-height:560px;
    /* Controla el contenido que rebasa el contenedor mediante overflow. */
    overflow:auto
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dep-table th {
    /* Controla la posición del elemento mediante position. */
    position:sticky;
    /* Configura esta propiedad visual mediante top. */
    top:0;
    /* Pinta el fondo del elemento mediante background. */
    background:var(--surface,#f1edf8);
    /* Ajusta la superposición mediante z-index. */
    z-index:1
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dep-table td {
    /* Configura esta propiedad visual mediante white-space. */
    white-space:nowrap;
    /* Define el espacio interior mediante padding. */
    padding:14px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dep-child td:first-child {
    /* Define el espacio interior mediante padding-left. */
    padding-left:30px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dep-child {
    /* Pinta el fondo del elemento mediante background. */
    background:color-mix(in srgb,var(--accent,#6841b5) 6%,transparent)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dep-expand,.dep-series {
    /* Dibuja el borde del elemento mediante border. */
    border:0;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:18px;
    /* Define el espacio interior mediante padding. */
    padding:8px 12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dep-active,.dep-ended,.dep-pending {
    /* Define cómo se distribuye el contenido mediante display. */
    display:inline-block;
    /* Define el espacio interior mediante padding. */
    padding:6px 11px;
    /* Dibuja el borde del elemento mediante border-radius. */
    border-radius:20px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dep-active {
    /* Pinta el fondo del elemento mediante background. */
    background:#e8dcff;
    /* Fija el color del texto mediante color. */
    color:#492a83
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dep-ended {
    /* Pinta el fondo del elemento mediante background. */
    background:#d3f5e2;
    /* Fija el color del texto mediante color. */
    color:#115b36
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dep-pending {
    /* Pinta el fondo del elemento mediante background. */
    background:#fff0c6;
    /* Fija el color del texto mediante color. */
    color:#754900
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dep-rule-table {
    /* Define el espacio exterior mediante margin-top. */
    margin-top:26px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dep-rule-table button {
    /* Define el espacio exterior mediante margin. */
    margin:8px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dep-tools button {
    /* Configura esta propiedad visual mediante min-height. */
    min-height:42px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
@media(max-width:680px) {
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .dep-tools {
        /* Alinea los elementos mediante align-items. */
        align-items:stretch;
        /* Separa elementos vecinos mediante gap. */
        gap:12px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .dep-tools>* {
        /* Configura esta propiedad visual mediante max-width. */
        max-width:100%;
        /* Configura la distribución flexible mediante flex. */
        flex:1 1 170px
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    .dep-table {
        /* Configura esta propiedad visual mediante max-height. */
        max-height:65vh
    }
    /* Aplica esta regla cuando el selector o la condición coincide. */
    #depreciationView {
        /* Configura esta propiedad visual mediante min-width. */
        min-width:0
    }
}
/* 088: aligned controls, institutional search/filter styling. */
/* Aplica esta regla cuando el selector o la condición coincide. */
.dep-main-tools {
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Define el espacio interior mediante padding-top. */
    padding-top:20px;
    /* Separa elementos vecinos mediante gap. */
    gap:14px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dep-main-tools .dep-date {
    /* Controla la posición del elemento mediante position. */
    position:relative;
    /* Define el espacio exterior mediante margin. */
    margin:0;
    /* Define cómo se distribuye el contenido mediante display. */
    display:block
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dep-date input {
    /* Ajusta la altura mediante height. */
    height:42px;
    /* Define el espacio exterior mediante margin. */
    margin:0;
    /* Configura esta propiedad visual mediante box-sizing. */
    box-sizing:border-box
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dep-date {
    /* Configura la tipografía mediante font-size. */
    font-size:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dep-date input {
    /* Configura la tipografía mediante font-size. */
    font-size:14px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dep-date::before {
    /* Define el contenido generado mediante content. */
    content:"Fecha de corte";
    /* Controla la posición del elemento mediante position. */
    position:absolute;
    /* Configura esta propiedad visual mediante left. */
    left:0;
    /* Configura esta propiedad visual mediante top. */
    top:-22px;
    /* Configura la tipografía mediante font-size. */
    font-size:12px;
    /* Fija el color del texto mediante color. */
    color:var(--muted)
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dep-main-tools button {
    /* Ajusta la altura mediante height. */
    height:42px;
    /* Define el espacio exterior mediante margin. */
    margin:0
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dep-search-tools {
    /* Alinea los elementos mediante align-items. */
    align-items:center;
    /* Separa elementos vecinos mediante gap. */
    gap:12px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dep-search-tools input {
    /* Configura la distribución flexible mediante flex. */
    flex:1;
    /* Configura esta propiedad visual mediante min-width. */
    min-width:180px;
    /* Ajusta la altura mediante height. */
    height:42px;
    /* Configura esta propiedad visual mediante box-sizing. */
    box-sizing:border-box
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dep-search-tools button {
    /* Ajusta la altura mediante height. */
    height:42px
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dep-tools [hidden] {
    /* Define cómo se distribuye el contenido mediante display. */
    display:none!important
}
/* Aplica esta regla cuando el selector o la condición coincide. */
.dep-note {
    /* Fija el color del texto mediante color. */
    color:var(--muted)
}