html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}

.header-logo {
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url('../images/brand/sphere-logo-mask.svg');
    mask: url('../images/brand/sphere-logo-mask.svg');
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 118px;
    height: 28px;
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}

/* XAF limits nested virtual-scrolling grids to 300px. Search screens need the
   result grid to use all remaining viewport height instead. The height value
   is maintained by search-results-layout.js because every search header has a
   different size. */
.sphere-search-results .nested-content > .grid-content dxbl-grid {
    height: var(--sphere-search-grid-height, 300px);
    max-height: var(--sphere-search-grid-height, 300px) !important;
}

/* "Gráficos y KPIs" tab of the DR (income statement) detail view. Lives here
   rather than in a .razor.css because CSS isolation is disabled in _Host.cshtml. */
.dr-analytics {
    padding: 1rem;
    background: transparent;
    color: var(--dxds-color-content-neutral-default-rest, var(--bs-body-color, #22384d));
}

.dr-empty {
    display: grid;
    min-height: 320px;
    place-items: center;
    color: color-mix(in srgb, var(--dxds-color-content-neutral-default-rest, var(--bs-body-color, #22384d)) 62%, transparent);
    font-size: 1rem;
}

.dr-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(190px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.dr-kpi-card,
.dr-chart-card {
    border: 1px solid var(--dxds-color-border-secondary-default-rest, var(--bs-border-color, #dde4eb));
    border-radius: .5rem;
    background: var(--dxds-color-surface-neutral-default-rest, var(--bs-body-bg, #fff));
    box-shadow: 0 2px 8px rgb(31 50 73 / 7%);
}

.dr-kpi-card {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1rem 1.1rem;
    border-top: 3px solid #1F398B;
}

.dr-kpi-value {
    color: var(--dxds-color-content-neutral-default-rest, var(--bs-body-color, #22384d));
    font-size: 1.45rem;
}

.dr-kpi-name {
    color: color-mix(in srgb, var(--dxds-color-content-neutral-default-rest, var(--bs-body-color, #22384d)) 62%, transparent);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.dr-kpi-ratio {
    color: color-mix(in srgb, var(--dxds-color-content-neutral-default-rest, var(--bs-body-color, #22384d)) 62%, transparent);
    font-size: .8rem;
}

.dr-positive { color: #20a26b; }
.dr-negative { color: #e2564d; }

.dr-chart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(360px, 1fr);
    gap: 1rem;
}

.dr-chart-card {
    min-width: 0;
    padding: .85rem 1rem 1rem;
}

.dr-chart-card h3 {
    margin: 0 0 .35rem;
    color: var(--dxds-color-content-neutral-default-rest, var(--bs-body-color, #22384d));
    font-size: 1rem;
}

@media (max-width: 1200px) {
    .dr-kpi-grid { grid-template-columns: repeat(2, minmax(190px, 1fr)); }
    .dr-chart-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .dr-kpi-grid { grid-template-columns: 1fr; }
    .dr-analytics { padding: .5rem; }
}

/* Enfasis de las lineas de la Cuenta de Resultados (SPH-34).
   La categoria la decide el modulo compartido; aqui solo se traduce a pintura, con los
   tokens del tema para que funcione igual en claro y en oscuro. Nada de colores fijos:
   antes habia fondos claros cableados que sobre tema oscuro dejaban las filas ilegibles. */
.dr-line-total > td {
    font-weight: 700;
    background: color-mix(in srgb, var(--dxds-color-content-neutral-default-rest, var(--bs-body-color, #22384d)) 9%, transparent);
}

.dr-line-subtotal > td {
    font-weight: 600;
    background: color-mix(in srgb, var(--dxds-color-content-neutral-default-rest, var(--bs-body-color, #22384d)) 4%, transparent);
}

.dr-line-percent > td {
    font-style: italic;
}

/* Minigrafico de evolucion mensual en el listado del DR. Toma el color del texto del tema
   con transparencia, para que se lea igual en claro y en oscuro. */
.dr-spark {
    width: 110px;
    height: 24px;
    display: block;
    overflow: visible;
}

.dr-spark-line {
    fill: none;
    stroke: color-mix(in srgb, var(--dxds-color-content-neutral-default-rest, var(--bs-body-color, #22384d)) 70%, transparent);
    stroke-width: 1.2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.dr-spark-zero {
    stroke: color-mix(in srgb, var(--dxds-color-content-neutral-default-rest, var(--bs-body-color, #22384d)) 22%, transparent);
    stroke-width: 1;
    stroke-dasharray: 2 2;
    vector-effect: non-scaling-stroke;
}

.dr-spark-last {
    fill: var(--dxds-color-content-neutral-default-rest, var(--bs-body-color, #22384d));
}

.dr-spark-empty {
    color: color-mix(in srgb, var(--dxds-color-content-neutral-default-rest, var(--bs-body-color, #22384d)) 35%, transparent);
}


/* Segunda pasada de los graficos del DR: menos cromo, mas aire. Lo que hacia que se
   vieran anticuados no eran solo los colores, sino el marco, el titulo grande y la
   rejilla dura. */
.dr-chart-card h3 {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .62;
    margin: 0 0 .75rem;
}

.dr-chart-card {
    border: none;
    border-radius: .9rem;
    padding: 1.1rem 1.2rem 1.25rem;
    box-shadow: 0 1px 2px rgb(16 35 63 / 6%), 0 8px 24px rgb(16 35 63 / 6%);
}

.dr-kpi-card {
    border: none;
    border-radius: .9rem;
    box-shadow: 0 1px 2px rgb(16 35 63 / 6%), 0 8px 24px rgb(16 35 63 / 5%);
}

/* Rejilla tenue y sin ejes duros: el marco negro del area de trazado es medio ochentoso. */
.dr-chart .dxbl-chart svg .dxc-grids path,
.dr-chart svg .dxc-grids path {
    stroke-opacity: .28;
    stroke-dasharray: 3 4;
}

.dr-chart svg .dxc-axes path {
    stroke-opacity: .25;
}

.dr-chart svg .dxc-arg-elements path,
.dr-chart svg .dxc-val-elements path {
    stroke-opacity: 0;
}

.dr-chart svg text {
    opacity: .72;
}


/* Area de la serie principal con degradado que se desvanece hacia abajo, que es el patron
   de los dashboards actuales. Solo se rellena UNA serie: rellenar las cuatro convierte el
   grafico en un barro de colores. El relleno del area es un path sin trazo. */
/* DevExtreme pone el relleno del area en el <g class="dxc-elements">, no en el path, y lo
   distingue de las lineas por stroke="none". Un atributo de presentacion pierde frente al
   CSS, asi que esto gana sin tener que tocar el marcado. */
.dr-chart svg g.dxc-elements[stroke="none"][fill],
.dr-chart svg g.dxc-elements[stroke="none"][fill] path {
    fill: url(#dr-area-fade);
}

.dr-defs {
    position: absolute;
    width: 0;
    height: 0;
}