.tela-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: linear-gradient(135deg, #0B3440 0%, #0F4C5C 55%, #2A7F8F 100%);
}

/* iPhone com o painel instalado: a barra começa abaixo do relógio/entalhe */
.barra-topo { padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.conteudo { padding: 16px 12px calc(24px + env(safe-area-inset-bottom)); }
@media (min-width: 600px) { .conteudo { padding: 24px; } }

/* Tabelas: números alinhados à direita */
.num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mud-table-row.linha-clicavel { cursor: pointer; }
.bolinha { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* ---------- Painel ---------- */
.grade-empresas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 400px) { .grade-empresas { grid-template-columns: 1fr; } }

.cartao-empresa { overflow: hidden; }
.cartao-topo { display: flex; align-items: center; gap: 10px; padding: 12px; color: inherit; text-decoration: none; }
.cartao-topo:hover { background: rgba(15, 76, 92, .04); }
.cartao-nome { font-weight: 500; font-size: 1.05rem; line-height: 1.2; }
.cartao-sistema { font-size: .78rem; color: var(--mud-palette-text-secondary); }

.grade-indicadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
@media (max-width: 400px) { .grade-indicadores { grid-template-columns: 1fr 1fr; } }

.indicador { background: #F7F9FA; border: 1px solid #E5EAEC; border-radius: 8px; padding: 8px 10px; height: 100%; }
.indicador-rotulo { font-size: .75rem; color: var(--mud-palette-text-secondary); line-height: 1.2; }
.indicador-valor { font-size: 1.25rem; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.3; word-break: break-word; }
.indicador-valor small { font-size: .75rem; font-weight: 400; color: var(--mud-palette-text-secondary); margin-left: 4px; }
.indicador-detalhe { font-size: .72rem; line-height: 1.2; color: var(--mud-palette-text-secondary); }
.indicador-link { color: inherit; text-decoration: none; }
.indicador-link .indicador:hover { border-color: var(--mud-palette-primary); }

.alerta .mud-alert-message { width: 100%; }
.alerta-origem { font-size: .72rem; font-weight: 500; opacity: .8; }

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #0F4C5C;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    font-family: Roboto, sans-serif;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Carregando");
}