/* =========================================================================
   Biblioteca de componentes DeTrigo
   -------------------------------------------------------------------------
   Os estilos dos componentes em Components/Ui. Só usa tokens.

   Uma página não escreve CSS. Se precisa de algo que não existe, o sítio é
   aqui — e passa a existir para toda a gente.
   ========================================================================= */

/* ---- Página --------------------------------------------------------------
   A ordem é sempre a mesma, porque é a ordem das perguntas que a pessoa faz:
   onde estou (eyebrow), o que é isto (título), o que faz (descrição), o que
   posso fazer aqui (ações). */

.ui-page { display: grid; gap: var(--e-5); }

.ui-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--e-5);
    flex-wrap: wrap;
}

.ui-page-head > div { min-width: 0; }

.ui-eyebrow {
    display: block;
    margin-bottom: var(--e-2);
    color: var(--cor-destaque);
    font-size: var(--t-xs);
    font-weight: var(--peso-forte);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ui-title {
    margin: 0;
    /* Trinta e dois píxeis num telemóvel de 390 dão três linhas de título antes de se ver o
       primeiro número. Encolhe com o ecrã e para no tamanho de sempre a partir do tablet. */
    font-size: clamp(1.5rem, 1.1rem + 1.8vw, var(--t-2xl));
    font-weight: var(--peso-forte);
    line-height: var(--altura-apertada);
    letter-spacing: -.02em;
    text-wrap: balance;
}

.ui-lead {
    max-width: 68ch;
    margin: var(--e-2) 0 0;
    color: var(--cor-texto-suave);
    font-size: var(--t-m);
    line-height: var(--altura-normal);
}

.ui-actions { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }

/* Um cabeçalho pode precisar de uma escolha antes da ação — que documento criar,
   por exemplo. O campo continua a ter rótulo: é a regra, e vale também aqui. */
.ui-actions .ui-field { min-width: 220px; }
.ui-actions .ui-field > .ui-label { white-space: nowrap; }

/* ---- Painel -------------------------------------------------------------- */

.ui-panel {
    display: grid;
    gap: var(--e-4);
    padding: var(--e-5);
    border: 1px solid var(--cor-linha);
    border-radius: var(--raio-l);
    background: var(--cor-superficie);
    box-shadow: var(--sombra-assente);
}

.ui-panel.is-flush { padding: 0; overflow: hidden; }
.ui-panel.is-flush > .ui-panel-head { padding: var(--e-5) var(--e-5) 0; }
.ui-panel.is-flush > .ui-panel-foot { padding: 0 var(--e-5) var(--e-5); }

.ui-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e-4);
    flex-wrap: wrap;
}

.ui-panel-title { margin: 0; font-size: var(--t-l); font-weight: var(--peso-forte); letter-spacing: -.01em; }
.ui-panel-note { margin: var(--e-1) 0 0; color: var(--cor-texto-suave); font-size: var(--t-s); line-height: var(--altura-normal); }
.ui-counter { color: var(--cor-texto-fraco); font-size: var(--t-s); font-variant-numeric: tabular-nums; }

/* ---- Botão ---------------------------------------------------------------
   Três variantes e nada mais. Primário é a única ação óbvia da página;
   secundário é tudo o resto; perigo confirma-se antes de acontecer. */

.ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    min-height: var(--alvo-min);
    padding: 0 var(--e-4);
    border: 1px solid transparent;
    border-radius: var(--raio-m);
    font-size: var(--t-m);
    font-weight: var(--peso-medio);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transicao), border-color var(--transicao);
}

.ui-button:focus-visible { outline: 2px solid var(--cor-marca); outline-offset: 2px; }
.ui-button:disabled, .ui-button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.ui-button.is-primary { color: #fff; background: var(--cor-marca); border-color: var(--cor-marca); }
.ui-button.is-primary:hover:not(:disabled) { background: var(--cor-marca-clara); }

.ui-button.is-secondary { color: var(--cor-texto); background: var(--cor-superficie); border-color: var(--cor-linha-forte); }
.ui-button.is-secondary:hover:not(:disabled) { background: var(--cor-superficie-suave); }

.ui-button.is-danger { color: var(--cor-erro); background: var(--cor-erro-fundo); border-color: var(--cor-erro-linha); }
.ui-button.is-danger:hover:not(:disabled) { background: #f7dedb; }

.ui-button.is-quiet { color: var(--cor-texto-suave); background: transparent; border-color: transparent; }
.ui-button.is-quiet:hover:not(:disabled) { color: var(--cor-texto); background: var(--cor-superficie-fria); }


/* Ação dentro de uma linha de tabela. Continua a ter altura de alvo, ainda que
   pareça texto: a alternativa era uma linha com dez pixels de altura clicável. */
.ui-inline-action {
    display: inline-flex;
    align-items: center;
    min-height: var(--alvo-compacto);
    padding: 0 var(--e-2);
    margin: 0 calc(var(--e-2) * -1);
    border: 0;
    border-radius: var(--raio-s);
    color: var(--cor-marca);
    background: transparent;
    font-size: var(--t-s);
    font-weight: var(--peso-medio);
    text-decoration: none;
    cursor: pointer;
}

.ui-inline-action:hover { background: var(--cor-superficie-fria); text-decoration: underline; }
.ui-inline-action:focus-visible { outline: 2px solid var(--cor-marca); outline-offset: 1px; }
.ui-inline-action.is-danger { color: var(--cor-erro); }

/* ---- Campo ---------------------------------------------------------------
   Rótulo em cima, controlo, depois a explicação e, se houver, o erro. Nunca
   um placeholder a fazer de rótulo: assim que se escreve, desaparece. */

.ui-field { display: grid; gap: var(--e-2); min-width: 0; }

.ui-field > .ui-label {
    display: flex;
    align-items: baseline;
    gap: var(--e-2);
    color: var(--cor-texto);
    font-size: var(--t-s);
    font-weight: var(--peso-medio);
}

.ui-optional { color: var(--cor-texto-fraco); font-size: var(--t-xs); font-weight: var(--peso-normal); }

.ui-field input,
.ui-field select,
.ui-field textarea {
    width: 100%;
    min-height: var(--alvo-min);
    padding: var(--e-2) var(--e-3);
    border: 1px solid var(--cor-linha-forte);
    border-radius: var(--raio-m);
    color: var(--cor-texto);
    background: var(--cor-superficie);
    font-size: var(--t-m);
    font-family: inherit;
}

/* ElInput / ElSelect / ElTextarea já têm chrome próprio — sem segunda borda no input interno */
.ui-field .el-input__inner,
.ui-field .el-textarea__inner,
.ui-field .el-select__input {
    border: none !important;
    box-shadow: none !important;
    background: transparent;
    min-height: 0;
    padding-block: 0;
    border-radius: 0;
}

.ui-field textarea { min-height: 0; line-height: var(--altura-normal); resize: vertical; }

.ui-field input:focus, .ui-field select:focus, .ui-field textarea:focus {
    outline: none;
    border-color: var(--cor-marca);
    box-shadow: 0 0 0 3px rgba(23, 61, 53, .12);
}

.ui-field .el-input__inner:focus,
.ui-field .el-textarea__inner:focus,
.ui-field .el-select__input:focus {
    border: none !important;
    box-shadow: none !important;
}

.ui-field.is-invalid input, .ui-field.is-invalid select, .ui-field.is-invalid textarea { border-color: var(--cor-erro); }
.ui-field.is-invalid .el-input__wrapper,
.ui-field.is-invalid .el-textarea__inner,
.ui-field.is-invalid .el-select__wrapper {
    box-shadow: 0 0 0 1px var(--cor-erro) inset !important;
}

.ui-hint { color: var(--cor-texto-suave); font-size: var(--t-s); line-height: var(--altura-normal); }

/* Código dentro de texto: o nome de um token, uma permissão, um lote.
   O «nowrap» é o que interessa aqui. Sem ele o browser parte nos hífenes — «--alvo-grande» vira
   «--alvo-» numa linha e «grande» na seguinte —, e um identificador partido deixa de se ler e de
   se poder copiar. Sem preenchimento vertical de propósito: numa linha apertada, caixas com
   altura própria sobrepõem-se às da linha de cima. */
code {
    font-family: var(--letra-mono);
    font-size: .92em;
    white-space: nowrap;
}
.ui-error { display: flex; gap: var(--e-2); color: var(--cor-erro); font-size: var(--t-s); font-weight: var(--peso-medio); }

.ui-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e-4); }
/* O rótulo faz parte do alvo. Uma caixa de 18px sozinha não se acerta de pé;
   o conjunto tem a mesma altura mínima que os restantes controlos. */
.ui-check {
    display: inline-flex;
    align-items: center;
    gap: var(--e-3);
    min-height: var(--alvo-min);
    padding: 0 var(--e-3) 0 var(--e-2);
    border: 1px solid transparent;
    border-radius: var(--raio-s);
    font-size: var(--t-m);
    cursor: pointer;
}

.ui-check:hover { background: var(--cor-superficie-fria); }
.ui-check:focus-within { border-color: var(--cor-marca); outline: 2px solid var(--cor-marca); outline-offset: 1px; }
.ui-check input { width: 18px; height: 18px; min-height: 0; flex: 0 0 auto; accent-color: var(--cor-marca); }
.ui-check.is-disabled { color: var(--cor-texto-fraco); cursor: not-allowed; }
.ui-check.is-disabled:hover { background: none; }

/* ---- Conjuntos de escolhas ----------------------------------------------- */

.ui-options { display: grid; gap: var(--e-2); min-width: 0; }
.ui-options > .ui-label { font-size: var(--t-xs); font-weight: var(--peso-forte); text-transform: uppercase; letter-spacing: .08em; color: var(--cor-texto-suave); }
.ui-options-row { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-2); }

/* Uma escolha por linha, para quando cada opção leva uma explicação ao lado e
   lê-las em fila obrigaria a saltar com os olhos. */
.ui-options-stacked > .ui-options-row { flex-direction: column; align-items: stretch; gap: var(--e-1); }
.ui-options-stacked .ui-check { justify-content: flex-start; align-items: flex-start; padding-top: var(--e-2); padding-bottom: var(--e-2); }
.ui-options-stacked .ui-check input { margin-top: 2px; }

/* Rótulo e explicação em linhas próprias. Lado a lado, uma descrição comprida
   quebra por cima do rótulo assim que o ecrã estreita. */
.ui-options-stacked .ui-check > span { display: grid; gap: 2px; min-width: 0; }
.ui-options-stacked .ui-check .ui-hint { display: block; }

/* ---- Botão de símbolo ----------------------------------------------------- */

.ui-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--alvo-compacto);
    height: var(--alvo-compacto);
    padding: 0;
    border: 1px solid var(--cor-linha);
    border-radius: var(--raio-s);
    background: var(--cor-superficie);
    color: var(--cor-texto-suave);
    font-size: var(--t-l);
    line-height: 1;
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}

.ui-icon-button:hover:not(:disabled) { background: var(--cor-superficie-fria); color: var(--cor-texto); }
.ui-icon-button:focus-visible { outline: 2px solid var(--cor-marca); outline-offset: 2px; }
.ui-icon-button:disabled { opacity: .5; cursor: not-allowed; }
.ui-icon-button.is-danger { color: var(--cor-erro); border-color: var(--cor-erro-linha); }
.ui-icon-button.is-danger:hover:not(:disabled) { background: var(--cor-erro-fundo); }

/* ---- Rodapé de formulário -------------------------------------------------
   Cola-se ao fundo da janela de edição: com um formulário longo, guardar não
   pode obrigar a percorrer tudo outra vez. */

.ui-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    flex-wrap: wrap;
    margin-top: var(--e-2);
    padding: var(--e-3) var(--e-5);
    border: 1px solid var(--cor-linha);
    border-radius: var(--raio-l);
    background: var(--cor-superficie);
    box-shadow: var(--sombra-flutuante);
}

.ui-form-state { color: var(--cor-texto-suave); font-size: var(--t-s); }
.ui-form-state .ui-dirty { display: inline-flex; align-items: center; gap: var(--e-2); color: var(--cor-aviso); font-weight: var(--peso-medio); }
.ui-form-state .ui-dot { background: var(--cor-aviso); }

/* ---- Cartões de navegação --------------------------------------------------
   O cartão inteiro é clicável. Numa grelha de dezasseis destinos, obrigar a
   acertar no título é o que faz falhar e voltar atrás. */

.ui-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--e-3); }

.ui-card {
    display: flex;
    align-items: flex-start;
    gap: var(--e-3);
    min-height: 84px;
    padding: var(--e-4);
    border: 1px solid var(--cor-linha);
    border-radius: var(--raio-l);
    background: var(--cor-superficie);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--transicao), box-shadow var(--transicao);
}

.ui-card:hover { border-color: var(--cor-marca-clara); box-shadow: var(--sombra-assente); }
.ui-card:focus-visible { outline: 2px solid var(--cor-marca); outline-offset: 2px; }

.ui-card-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--alvo-compacto);
    height: var(--alvo-compacto);
    border-radius: var(--raio-s);
    background: var(--cor-marca-fundo);
    color: var(--cor-marca);
    font-size: var(--t-xs);
    font-weight: var(--peso-forte);
    letter-spacing: .04em;
}

.ui-card-body { display: grid; gap: var(--e-1); min-width: 0; }
.ui-card-body strong { font-size: var(--t-m); font-weight: var(--peso-medio); }
.ui-card-body small { color: var(--cor-texto-suave); font-size: var(--t-s); line-height: var(--altura-normal); }

.ui-card.is-disabled { background: var(--cor-superficie-fria); border-style: dashed; cursor: default; }
.ui-card.is-disabled:hover { border-color: var(--cor-linha); box-shadow: none; }
.ui-card.is-disabled .ui-card-mark { background: var(--cor-superficie); color: var(--cor-texto-fraco); }
.ui-card-note { margin-left: auto; align-self: center; color: var(--cor-texto-fraco); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }

/* ---- Progresso ------------------------------------------------------------
   A barra nunca aparece sozinha: ao lado leva sempre a contagem, que é a
   leitura de que a fábrica precisa. */

.ui-meter { display: grid; gap: var(--e-1); min-width: 120px; }
.ui-meter-track { height: 6px; border-radius: var(--raio-redondo); background: var(--cor-superficie-fria); overflow: hidden; }
.ui-meter-fill { display: block; height: 100%; background: var(--cor-marca-clara); transition: width var(--transicao); }
.ui-meter-fill.is-ok { background: var(--cor-ok); }
.ui-meter-fill.is-warning { background: var(--cor-aviso); }
.ui-meter-fill.is-danger { background: var(--cor-erro); }
.ui-meter-caption { color: var(--cor-texto-suave); font-size: var(--t-s); font-variant-numeric: tabular-nums; }

/* ---- Secções de um ecrã --------------------------------------------------- */

.ui-segmented {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-1);
    padding: var(--e-1);
    border: 1px solid var(--cor-linha);
    border-radius: var(--raio-m);
    background: var(--cor-superficie-fria);
}

.ui-segmented a {
    display: inline-flex;
    align-items: center;
    min-height: var(--alvo-compacto);
    padding: 0 var(--e-4);
    border-radius: var(--raio-s);
    color: var(--cor-texto-suave);
    font-size: var(--t-m);
    font-weight: var(--peso-medio);
    text-decoration: none;
    transition: background var(--transicao), color var(--transicao);
}

.ui-segmented a:hover { color: var(--cor-texto); background: var(--cor-superficie-suave); }
.ui-segmented a:focus-visible { outline: 2px solid var(--cor-marca); outline-offset: 1px; }
.ui-segmented a.is-active { color: var(--cor-marca); background: var(--cor-superficie); box-shadow: var(--sombra-assente); }

/* ---- Filtros -------------------------------------------------------------
   Cada filtro tem rótulo. Uma fila de caixas sem rótulo obriga a clicar em
   cada uma para descobrir o que faz. */

.ui-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--e-3) var(--e-4);
    align-items: end;
    padding: var(--e-4);
    border: 1px solid var(--cor-linha);
    border-radius: var(--raio-l);
    background: var(--cor-superficie-suave);
}

.ui-filters .ui-field.is-wide { grid-column: span 2; }

/* ---- Tabela --------------------------------------------------------------
   Cabeçalho fixo, números alinhados à direita com dígitos de largura igual,
   e as ações sempre na última coluna: é onde o olho já as procura. */

.ui-table-wrap { overflow-x: auto; }

.ui-table { width: 100%; border-collapse: collapse; font-size: var(--t-m); }

.ui-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--e-3) var(--e-4);
    border-bottom: 1px solid var(--cor-linha);
    color: var(--cor-texto-suave);
    background: var(--cor-superficie-suave);
    font-size: var(--t-xs);
    font-weight: var(--peso-forte);
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}

.ui-table td { padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--cor-linha-suave); vertical-align: middle; }
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table tbody tr:hover td { background: var(--cor-superficie-suave); }

.ui-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.ui-table .is-actions { text-align: right; white-space: nowrap; }
.ui-table .is-actions > * + * { margin-left: var(--e-3); }

.ui-table strong { font-weight: var(--peso-medio); }
.ui-table .ui-sub { display: block; margin-top: 2px; color: var(--cor-texto-suave); font-size: var(--t-s); }

.ui-table tr.is-quiet td { color: var(--cor-texto-fraco); }
.ui-table tr.is-attention td { background: var(--cor-aviso-fundo); }
.ui-table tr.is-alert td { background: var(--cor-erro-fundo); }
.ui-table tr.is-problem td { background: var(--cor-erro-fundo); }

/* ---- Estado --------------------------------------------------------------
   Cor mais palavra. Um daltónico tem de conseguir ler o mesmo que os outros. */

.ui-status {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    padding: var(--e-1) var(--e-3);
    border: 1px solid var(--cor-linha);
    border-radius: var(--raio-redondo);
    background: var(--cor-superficie-fria);
    color: var(--cor-texto-suave);
    font-size: var(--t-s);
    font-weight: var(--peso-medio);
    white-space: nowrap;
}

.ui-status.is-ok { color: var(--cor-ok); background: var(--cor-ok-fundo); border-color: var(--cor-ok-linha); }
.ui-status.is-warning { color: var(--cor-aviso); background: var(--cor-aviso-fundo); border-color: var(--cor-aviso-linha); }
.ui-status.is-danger { color: var(--cor-erro); background: var(--cor-erro-fundo); border-color: var(--cor-erro-linha); }
.ui-status.is-info { color: var(--cor-info); background: var(--cor-info-fundo); border-color: var(--cor-info-linha); }

.ui-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

/* ---- Aviso --------------------------------------------------------------- */

.ui-alert {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    border: 1px solid var(--cor-info-linha);
    border-radius: var(--raio-m);
    background: var(--cor-info-fundo);
    color: var(--cor-info);
    font-size: var(--t-m);
    line-height: var(--altura-normal);
}

.ui-alert.is-warning { border-color: var(--cor-aviso-linha); background: var(--cor-aviso-fundo); color: var(--cor-aviso); }
.ui-alert.is-danger { border-color: var(--cor-erro-linha); background: var(--cor-erro-fundo); color: var(--cor-erro); }
.ui-alert.is-ok { border-color: var(--cor-ok-linha); background: var(--cor-ok-fundo); color: var(--cor-ok); }
.ui-alert-mark { font-weight: var(--peso-forte); }
.ui-alert-body > * { margin: 0; }
.ui-alert-body > * + * { margin-top: var(--e-2); }

/* ---- Vazio ---------------------------------------------------------------
   Nunca só «sem dados». Diz o que falta e o que fazer a seguir. */

.ui-empty {
    display: grid;
    justify-items: center;
    gap: var(--e-3);
    padding: var(--e-7) var(--e-5);
    text-align: center;
}

.ui-empty-title { margin: 0; font-size: var(--t-l); font-weight: var(--peso-medio); }
.ui-empty p { max-width: 46ch; margin: 0; color: var(--cor-texto-suave); font-size: var(--t-m); line-height: var(--altura-normal); }

/* ---- Métricas ------------------------------------------------------------ */

.ui-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--e-4); }

.ui-metric {
    display: grid;
    gap: var(--e-1);
    padding: var(--e-4);
    border: 1px solid var(--cor-linha);
    border-radius: var(--raio-l);
    background: var(--cor-superficie);
}

.ui-metric-label { color: var(--cor-texto-suave); font-size: var(--t-s); }
.ui-metric-value { font-size: var(--t-xl); font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; line-height: var(--altura-apertada); }
.ui-metric-note { color: var(--cor-texto-fraco); font-size: var(--t-s); }

.ui-metric.is-warning { border-color: var(--cor-aviso-linha); background: var(--cor-aviso-fundo); }
.ui-metric.is-warning .ui-metric-value { color: var(--cor-aviso); }
.ui-metric.is-danger { border-color: var(--cor-erro-linha); background: var(--cor-erro-fundo); }
.ui-metric.is-danger .ui-metric-value { color: var(--cor-erro); }
.ui-metric.is-ok .ui-metric-value { color: var(--cor-ok); }

/* ---- Adaptação ----------------------------------------------------------- */

@media (max-width: 720px) {
    .ui-page-head { flex-direction: column; }
    .ui-page-head .ui-actions { width: 100%; }
    .ui-filters .ui-field.is-wide { grid-column: span 1; }
    .ui-table th, .ui-table td { padding: var(--e-3); }
}

/* ---- Guia -----------------------------------------------------------------
   Só usado pela página /design. Fica aqui para o guia não ser a única página
   com estilos próprios — a regra vale também para ele. */

.guia-regras { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--e-5); }
.guia-regras h3 { margin: 0 0 var(--e-2); font-size: var(--t-m); font-weight: var(--peso-forte); }
.guia-regras p { margin: 0; color: var(--cor-texto-suave); font-size: var(--t-s); line-height: var(--altura-normal); }

.guia-cores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--e-3); }
.guia-cores > div { display: grid; gap: var(--e-2); }
.guia-cores span { display: block; height: 44px; border: 1px solid var(--cor-linha); border-radius: var(--raio-m); }
.guia-cores code, .guia-tipo code { color: var(--cor-texto-fraco); font-family: var(--letra-mono); font-size: var(--t-xs); }

.guia-tipo { display: grid; gap: var(--e-3); }
.guia-tipo p { margin: 0; display: flex; align-items: baseline; gap: var(--e-3); flex-wrap: wrap; }

.guia-amostra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }

/* Um painel que precisa de se distinguir por ser crítico. A cor não vai sozinha:
   o cabeçalho do painel diz «crítica» por extenso. */
.ui-panel.is-critical { border-left: 3px solid var(--cor-destaque); }

/* Um cartão pode ser um botão em vez de uma ligação, quando o que faz é criar
   alguma coisa em vez de ir a algum lado. */
button.ui-card { width: 100%; text-align: left; font: inherit; cursor: pointer; }
button.ui-card:disabled { opacity: .5; cursor: not-allowed; }
button.ui-card:disabled:hover { border-color: var(--cor-linha); box-shadow: none; }

/* ---- Visão geral ---- */

/* A segunda linha de uma célula: o código do artigo debaixo do número da ordem, o motivo
   debaixo do estado. Bloco para cair para baixo em vez de alinhar ao lado. */
.linha-secundaria { display: block; margin-top: 2px; color: var(--cor-texto-fraco); font-size: var(--t-xs); }
.linha-secundaria.is-tarde { color: var(--cor-erro); font-weight: 600; }

/* Um aviso é uma ligação inteira, não um texto com uma ligação lá dentro: o que se quer é ir ao
   sítio onde o problema se resolve, e o alvo deve ser a caixa toda. */
.avisos { display: grid; gap: var(--e-2); }

.aviso {
    display: grid;
    gap: 2px;
    padding: var(--e-3) var(--e-4);
    border: 1px solid var(--cor-linha);
    border-left-width: 3px;
    border-radius: var(--raio-m);
    background: var(--cor-superficie);
    color: inherit;
    text-decoration: none;
}

.aviso:hover { border-color: var(--cor-linha-forte); }
.aviso-titulo { font-weight: 650; font-size: var(--t-s); }
.aviso-detalhe { color: var(--cor-texto-fraco); font-size: var(--t-xs); }

/* A cor vive na barra da esquerda e não no fundo: sete avisos com fundo colorido competem uns
   com os outros e deixa de se ver qual é o grave. */
.aviso.is-danger { border-left-color: var(--cor-erro); }
.aviso.is-warn { border-left-color: var(--cor-aviso); }
.aviso.is-info { border-left-color: var(--cor-info); }

.linhas-carga { display: grid; gap: var(--e-4); }
.linha-carga { display: grid; gap: var(--e-1); }
.linha-carga-nome { font-size: var(--t-s); }
.linha-carga-nome strong { font-weight: 650; }

/* ---- A escala grande -------------------------------------------------------

   Uma classe por componente, aplicada pelo próprio quando a escala assim o diz — ver UiSizes.
   Vive aqui, junto às regras normais, e não numa folha do terminal: o tamanho é uma propriedade
   do componente, e um componente cujo tamanho é decidido de fora deixa de responder pelo que
   desenha.

   O 56px vem de «--alvo-grande» e não de um número solto, para não haver dois valores a dizer a
   mesma coisa quando alguém decidir que são 60. */

.ui-button.is-large { min-height: var(--alvo-grande); padding: 0 var(--e-5); font-size: var(--t-l); }

.ui-field.is-large > .ui-label { font-size: var(--t-m); }
.ui-field.is-large input,
.ui-field.is-large select,
.ui-field.is-large textarea {
    min-height: var(--alvo-grande);
    padding: var(--e-3) var(--e-4);
    font-size: var(--t-l);
}

.ui-field.is-large textarea { min-height: calc(var(--alvo-grande) * 2); }
.ui-field.is-large .ui-hint, .ui-field.is-large .ui-error { font-size: var(--t-m); }

/* A caixa de marcar cresce com o alvo: uma marca de 18px numa linha de 56 é um alvo grande com
   um sinal pequeno, e ninguém vê se ficou marcada. */
.ui-check.is-large { min-height: var(--alvo-grande); font-size: var(--t-l); }
.ui-check.is-large input { width: 26px; height: 26px; }

.ui-inline-action.is-large { min-height: var(--alvo-grande); padding: 0 var(--e-4); font-size: var(--t-m); }

.ui-icon-button.is-large { min-width: var(--alvo-grande); min-height: var(--alvo-grande); font-size: var(--t-xl); }

.ui-segmented.is-large a, .ui-segmented.is-large button { min-height: var(--alvo-grande); font-size: var(--t-m); }