/* ============================================================
   TerreiroApp — componentes de interface compartilhados
   Fonte da verdade visual: Designer_system.html (seções 1, 3, 4, 5 e 7)

   Como usar: <link rel="stylesheet" href="../css/ui.css"> no <head>,
   depois do script do Tailwind. As classes têm prefixo ui- para não
   colidir com estilos antigos das páginas.

   Os seletores usam elemento + classe (ex.: input.ui-campo, button.ui-botao)
   de propósito: o plugin "forms" do Tailwind estiliza [type=text], button etc.
   e é injetado depois deste arquivo; a especificidade maior garante que vale o nosso.
   ============================================================ */

:root {
    /* Cores Oficiais Reconciliadas do TerreiroApp */
    --ui-primary: #303060;
    --ui-primary-dark: #24244a;
    --ui-primary-light: #3f3f7d;
    --ui-accent: #E0A030;
    --ui-accent-hover: #c98f2b;
    --ui-accent-light: #fef7ea;
    --ui-secondary-blue: #5060A0;

    /* Escala Neutra Slate do Tailwind */
    --ui-borda: #E2E8F0;               /* slate-200 */
    --ui-texto: #1E293B;               /* slate-800 */
    --ui-texto-apoio: #64748B;         /* slate-500 */
    --ui-placeholder: #94A3B8;         /* slate-400 */
    --ui-fundo-desabilitado: #F1F5F9;  /* slate-100 */
    --ui-fundo-suave: #F8F9FA;         /* slate-50 */

    /* Feedback Semântico Oficial (Designer_system.html seção 1.3) */
    --ui-sucesso: #059669;             /* emerald-600 */
    --ui-sucesso-bg: #ECFDF5;          /* emerald-50 */
    --ui-sucesso-borda: #A7F3D0;       /* emerald-200 */
    --ui-erro: #DC2626;                /* red-600 */
    --ui-erro-bg: #FEF2F2;             /* red-50 */
    --ui-erro-borda: #FECACA;          /* red-200 */
    --ui-aviso: #D97706;               /* amber-600 */
    --ui-aviso-bg: #FFFBEB;            /* amber-50 */
    --ui-aviso-borda: #FDE68A;         /* amber-200 */
    --ui-info: #0284C7;                /* sky-600 */
    --ui-info-bg: #F0F9FF;             /* sky-50 */
    --ui-info-borda: #BAE6FD;          /* sky-200 */

    /* Medidas Canônicas de Formulário */
    --ui-raio-campo: 24px;             /* = rounded-xl (1.5rem) no app */
    --ui-raio-cartao: 24px;            /* rounded-xl a rounded-2xl */
    --ui-altura-campo: 48px;           /* WCAG área mínima de toque */
    --ui-anel-foco: 0 0 0 2px rgba(48, 48, 96, 0.20);
    --ui-anel-erro: 0 0 0 2px rgba(220, 38, 38, 0.20);

    /* Tema do select customizado (perfil_assistencia/js/ui-select.js) */
    --ui-select-primary: var(--ui-primary);
    --ui-select-accent: var(--ui-accent);
    --ui-select-border: var(--ui-borda);
    --ui-select-radius: var(--ui-raio-campo);
    --ui-select-height: var(--ui-altura-campo);
    --ui-select-color: var(--ui-texto);
    --ui-select-muted: var(--ui-placeholder);
    --ui-select-hover: #F1F5F9;
    --ui-select-focus: var(--ui-accent);

    /* Tema do seletor de mês (perfil_assistencia/js/ui-mes.js) */
    --ui-mes-primary: var(--ui-primary);
    --ui-mes-accent: var(--ui-accent);
    --ui-mes-border: var(--ui-borda);
    --ui-mes-radius: var(--ui-raio-campo);
    --ui-mes-height: var(--ui-altura-campo);
    --ui-mes-background: #FFFFFF;
    --ui-mes-color: var(--ui-texto);
    --ui-mes-muted: var(--ui-placeholder);
    --ui-mes-hover: var(--ui-fundo-suave);
    --ui-mes-focus: var(--ui-accent);
    --ui-mes-on-primary: #FFFFFF;
    --ui-mes-disabled-background: var(--ui-fundo-desabilitado);
    --ui-mes-backdrop: rgba(15, 23, 42, .48);
    --ui-mes-shadow: 0 4px 16px rgba(15, 23, 42, .12);
    --ui-mes-z-index: 10000;
    /* Tema do seletor de data (perfil_assistencia/js/ui-data.js) */
    --ui-data-primary: var(--ui-primary);
    --ui-data-accent: var(--ui-accent);
    --ui-data-border: var(--ui-borda);
    --ui-data-radius: var(--ui-raio-campo);
    --ui-data-height: var(--ui-altura-campo);
    --ui-data-background: #FFFFFF;
    --ui-data-color: var(--ui-texto);
    --ui-data-muted: var(--ui-placeholder);
    --ui-data-hover: var(--ui-fundo-suave);
    --ui-data-focus: var(--ui-accent);
    --ui-data-on-primary: #FFFFFF;
    --ui-data-disabled-background: var(--ui-fundo-desabilitado);
    --ui-data-backdrop: rgba(15, 23, 42, .48);
    --ui-data-shadow: 0 4px 16px rgba(15, 23, 42, .12);
    --ui-data-z-index: 10000;
}

/* ---------- Grupo de campo: rótulo acima (8px), campo, ajuda/erro ---------- */
.ui-grupo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ui-rotulo { font-size: 13px; font-weight: 700; color: #334155; line-height: 1.3; }
.ui-rotulo .ui-obrigatorio { color: var(--ui-erro); margin-left: 2px; }
.ui-ajuda { font-size: 11px; color: var(--ui-texto-apoio); line-height: 1.4; }
.ui-erro-msg { display: flex; align-items: flex-start; gap: 4px; font-size: 12px; font-weight: 500; color: var(--ui-erro); line-height: 1.4; }
.ui-erro-msg[hidden] { display: none; }

.ui-grupo.ui-com-erro .ui-rotulo,
.ui-grupo:has(.ui-campo.ui-com-erro) .ui-rotulo { color: var(--ui-erro); }
.ui-grupo.ui-desabilitado .ui-rotulo,
.ui-grupo:has(.ui-campo:disabled) .ui-rotulo { color: var(--ui-placeholder); }

/* Linha com dois campos lado a lado (ex.: Orixá / Entidade) */
.ui-linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* ---------- Campo (input, textarea, select nativo) ---------- */
input.ui-campo,
textarea.ui-campo,
select.ui-campo {
    box-sizing: border-box;
    width: 100%;
    min-height: var(--ui-altura-campo);
    padding: 12px 18px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--ui-texto);
    background-color: #FFFFFF;
    border: 1px solid var(--ui-borda);
    border-radius: var(--ui-raio-campo);
    box-shadow: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
textarea.ui-campo {
    min-height: 100px;
    border-radius: var(--ui-raio-campo);
    resize: vertical;
    line-height: 1.5;
}
input.ui-campo::placeholder,
textarea.ui-campo::placeholder { color: var(--ui-placeholder); font-weight: 400; opacity: 1; }

input.ui-campo:focus,
textarea.ui-campo:focus,
select.ui-campo:focus {
    outline: none;
    border-color: var(--ui-primary);
    box-shadow: var(--ui-anel-foco);
}

input.ui-campo.ui-com-erro,
textarea.ui-campo.ui-com-erro,
select.ui-campo.ui-com-erro {
    border-color: var(--ui-erro);
    box-shadow: var(--ui-anel-erro);
}

input.ui-campo:disabled,
textarea.ui-campo:disabled,
select.ui-campo:disabled,
input.ui-campo[readonly] {
    background-color: var(--ui-fundo-desabilitado);
    color: var(--ui-placeholder);
    cursor: not-allowed;
}

/* Data e hora: só o ícone nativo à direita com cursor e hover */
input.ui-campo[type="date"]::-webkit-calendar-picker-indicator,
input.ui-campo[type="time"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .6;
    padding: 4px;
    margin-right: -2px;
    transition: opacity .15s ease-in-out;
}
input.ui-campo[type="date"]::-webkit-calendar-picker-indicator:hover,
input.ui-campo[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Oculta botão nativo de cancelamento no Webkit em input search para não duplicar com .ui-busca-limpar */
input.ui-campo[type="search"]::-webkit-search-decoration,
input.ui-campo[type="search"]::-webkit-search-cancel-button,
input.ui-campo[type="search"]::-webkit-search-results-button,
input.ui-campo[type="search"]::-webkit-search-results-decoration {
    display: none;
    -webkit-appearance: none;
}

/* Campo com ícone à esquerda */
.ui-com-icone { position: relative; display: flex; align-items: center; }
.ui-com-icone > .ui-icone {
    position: absolute; left: 16px;
    font-size: 20px; color: var(--ui-placeholder);
    pointer-events: none;
}
.ui-com-icone > input.ui-campo { padding-left: 46px; }
.ui-com-icone:focus-within > .ui-icone { color: var(--ui-primary); }

/* Gatilho e lista do select customizado (ui-select.js) */
.ui-select__root .ui-select__trigger { padding: 12px 18px; font-size: 14px; font-weight: 500; transition: border-color .15s, box-shadow .15s; }
.ui-select__root .ui-select__trigger[aria-expanded="true"] { box-shadow: var(--ui-anel-foco); }
.ui-select__root .ui-select__trigger:focus-visible { outline: none; border-color: var(--ui-primary); box-shadow: var(--ui-anel-foco); }
.ui-select__root .ui-select__trigger[aria-invalid="true"] { border-color: var(--ui-erro); box-shadow: var(--ui-anel-erro); }
.ui-select__root .ui-select__icon { color: var(--ui-placeholder); font-size: 22px; }

.ui-select__layer .ui-select__option {
    min-height: 48px;
    padding: 12px 14px;
    font-size: 14px;
    transition: background-color .15s;
}
.ui-select__layer .ui-select__option[aria-selected="true"] {
    background-color: #FEF3C7; /* amber-100 */
    color: #451A03;            /* amber-950 */
    border: 1px solid rgba(245, 158, 11, 0.4);
    font-weight: 700;
}
.ui-select__layer .ui-select__option[aria-selected="true"] .ui-select__check {
    color: var(--ui-accent);
    font-size: 20px;
    font-weight: 700;
}

/* ---------- Mês: gatilho, popover e folha (ui-mes.js) ---------- */
.ui-mes__root { position: relative; display: block; width: 100%; min-width: 0; }
input.ui-mes__native,
.ui-mes__sr {
    position: absolute !important; width: 1px !important; height: 1px !important;
    min-height: 0 !important; padding: 0 !important; margin: -1px !important;
    border: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important;
    clip-path: inset(50%) !important; white-space: nowrap !important;
}
button.ui-mes__trigger {
    box-sizing: border-box; display: flex; align-items: center; gap: 12px;
    width: 100%; min-width: 0; min-height: var(--ui-mes-height); padding: 12px 18px;
    font: inherit; font-size: 14px; font-weight: 500; text-align: start;
    color: var(--ui-mes-color); background: var(--ui-mes-background);
    border: 1px solid var(--ui-mes-border); border-radius: var(--ui-mes-radius); cursor: pointer;
}
.ui-mes__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-mes__placeholder { color: var(--ui-mes-muted); }
.ui-mes__icon { font-size: 22px; line-height: 1; flex: none; }
.ui-mes__trigger > .ui-mes__icon { color: var(--ui-mes-muted); }
button.ui-mes__trigger:focus-visible,
button.ui-mes__trigger[aria-expanded="true"] { outline: 2px solid var(--ui-mes-focus); outline-offset: 2px; }
button.ui-mes__trigger[aria-invalid="true"] { border-color: var(--ui-erro); box-shadow: var(--ui-anel-erro); }
button.ui-mes__trigger:disabled { background: var(--ui-mes-disabled-background); color: var(--ui-mes-muted); cursor: not-allowed; }
.ui-mes__layer { position: fixed; inset: 0; z-index: var(--ui-mes-z-index); pointer-events: none; color: var(--ui-mes-color); }
.ui-mes__layer[hidden], .ui-mes__layer [hidden] { display: none !important; }
.ui-mes__backdrop { position: absolute; inset: 0; background: var(--ui-mes-backdrop); pointer-events: auto; }
.ui-mes__panel {
    box-sizing: border-box; position: fixed; display: flex; flex-direction: column;
    gap: 8px; padding: 10px; overflow-y: auto; overscroll-behavior: contain;
    background: var(--ui-mes-background); border: 1px solid var(--ui-mes-border);
    border-radius: var(--ui-mes-radius); box-shadow: var(--ui-mes-shadow); pointer-events: auto;
}
.ui-mes__heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex: none; }
.ui-mes__title { min-width: 0; margin: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.ui-mes__year-nav { display: flex; align-items: center; justify-content: space-between; gap: 4px; flex: none; }
.ui-mes__year { margin: 0; font-size: 16px; font-weight: 700; color: var(--ui-mes-primary); }
button.ui-mes__nav {
    display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    flex: none; padding: 0; font: inherit; color: var(--ui-mes-primary); background: transparent;
    border: 1px solid transparent; border-radius: 50%; cursor: pointer;
}
.ui-mes__grid { display: flex; flex-direction: column; gap: 4px; flex: none; }
.ui-mes__row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; }
.ui-mes__cell { min-width: 0; }
button.ui-mes__month {
    box-sizing: border-box; width: 100%; min-height: 40px; padding: 6px 4px;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--ui-mes-color);
    background: var(--ui-mes-background); border: 1px solid transparent;
    border-radius: var(--ui-mes-radius); cursor: pointer;
}
.ui-mes__cell[aria-selected="false"] > button.ui-mes__month[aria-current="date"]:not(:disabled) { border-color: var(--ui-mes-accent); color: var(--ui-mes-accent); }
.ui-mes__cell[aria-selected="true"] > button.ui-mes__month { background: var(--ui-mes-primary); color: var(--ui-mes-on-primary); }
.ui-mes__footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex: none; }
button.ui-mes__link {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px;
    padding: 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ui-mes-primary);
    background: transparent; border: 1px solid transparent; border-radius: var(--ui-mes-radius); cursor: pointer;
}
button.ui-mes__link:disabled,
button.ui-mes__nav:disabled { color: var(--ui-mes-muted); cursor: not-allowed; }
.ui-mes__cell > button.ui-mes__month:disabled { background: transparent; color: var(--ui-mes-muted); border-color: transparent; cursor: default; }
button.ui-mes__month:focus-visible,
button.ui-mes__nav:focus-visible,
button.ui-mes__link:focus-visible,
.ui-mes__grid:focus-visible { outline: 2px solid var(--ui-mes-focus); outline-offset: 2px; }
@media (hover:hover) {
    button.ui-mes__nav:not(:disabled):hover { background: var(--ui-mes-hover); }
    .ui-mes__cell[aria-selected="false"] > button.ui-mes__month:not(:disabled):hover { background: var(--ui-mes-hover); }
    button.ui-mes__link:not(:disabled):hover .ui-mes__link-text { text-decoration: underline; }
}
.ui-mes__mobile .ui-mes__panel {
    inset: auto 0 0; width: 100%; max-height: 85vh; max-height: 85dvh;
    border-radius: 24px 24px 0 0; padding-bottom: calc(10px + env(safe-area-inset-bottom,0px));
}

.ui-data__root { position: relative; display: block; width: 100%; min-width: 0; }
input.ui-data__native,
.ui-data__sr {
    position: absolute !important; width: 1px !important; height: 1px !important;
    min-height: 0 !important; padding: 0 !important; margin: -1px !important;
    border: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important;
    clip-path: inset(50%) !important; white-space: nowrap !important;
}
button.ui-data__trigger {
    box-sizing: border-box; display: flex; align-items: center; gap: 12px;
    width: 100%; min-width: 0; min-height: var(--ui-data-height); padding: 12px 18px;
    font: inherit; font-size: 14px; font-weight: 500; text-align: start;
    color: var(--ui-data-color); background: var(--ui-data-background);
    border: 1px solid var(--ui-data-border); border-radius: var(--ui-data-radius); cursor: pointer;
}
.ui-data__text { flex: 1; min-width: 0; white-space: nowrap; }
.ui-data__placeholder { color: var(--ui-data-muted); }
.ui-data__icon { font-size: 22px; line-height: 1; flex: none; }
.ui-data__trigger > .ui-data__icon { color: var(--ui-data-muted); }
button.ui-data__trigger:focus-visible,
button.ui-data__trigger[aria-expanded="true"] { outline: 2px solid var(--ui-data-focus); outline-offset: 2px; }
button.ui-data__trigger[aria-invalid="true"] { border-color: var(--ui-erro); box-shadow: var(--ui-anel-erro); }
button.ui-data__trigger:disabled { background: var(--ui-data-disabled-background); color: var(--ui-data-muted); cursor: not-allowed; }
.ui-data__layer { position: fixed; inset: 0; z-index: var(--ui-data-z-index); pointer-events: none; color: var(--ui-data-color); }
.ui-data__layer[hidden], .ui-data__layer [hidden] { display: none !important; }
.ui-data__backdrop { position: absolute; inset: 0; background: var(--ui-data-backdrop); pointer-events: auto; }
.ui-data__panel {
    box-sizing: border-box; position: fixed; display: flex; flex-direction: column;
    gap: 8px; padding: 8px; overflow-y: auto; overscroll-behavior: contain;
    background: var(--ui-data-background); border: 1px solid var(--ui-data-border);
    border-radius: var(--ui-data-radius); box-shadow: var(--ui-data-shadow); pointer-events: auto;
}
.ui-data__heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex: none; }
.ui-data__title { min-width: 0; margin: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.ui-data__year-nav { display: flex; align-items: center; justify-content: space-between; gap: 0; flex: none; }
.ui-data__year { margin: 0; font-size: 14px; font-weight: 700; color: var(--ui-data-primary); }
button.ui-data__nav {
    display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    flex: none; padding: 0; font: inherit; color: var(--ui-data-primary); background: transparent;
    border: 1px solid transparent; border-radius: 50%; cursor: pointer;
}
.ui-data__grid { display: flex; flex-direction: column; gap: 0; flex: none; }
.ui-data__row { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 0; }
.ui-data__cell { min-width: 0; }
button.ui-data__day {
    box-sizing: border-box; width: 100%; min-height: 40px; padding: 6px 4px;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--ui-data-color);
    background: var(--ui-data-background); border: 1px solid transparent;
    border-radius: var(--ui-data-radius); cursor: pointer;
}
.ui-data__cell[aria-selected="false"] > button.ui-data__day[aria-current="date"]:not(:disabled) { border-color: var(--ui-data-accent); color: var(--ui-data-accent); }
.ui-data__cell[aria-selected="true"] > button.ui-data__day { background: var(--ui-data-primary); color: var(--ui-data-on-primary); }
.ui-data__footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex: none; }
button.ui-data__link {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px;
    padding: 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ui-data-primary);
    background: transparent; border: 1px solid transparent; border-radius: var(--ui-data-radius); cursor: pointer;
}
button.ui-data__link:disabled,
button.ui-data__nav:disabled { color: var(--ui-data-muted); cursor: not-allowed; }
.ui-data__cell > button.ui-data__day:disabled { background: transparent; color: var(--ui-data-muted); border-color: transparent; cursor: default; }
button.ui-data__day:focus-visible,
button.ui-data__nav:focus-visible,
button.ui-data__link:focus-visible,
.ui-data__grid:focus-visible { outline: 2px solid var(--ui-data-focus); outline-offset: 2px; }
@media (hover:hover) {
    button.ui-data__nav:not(:disabled):hover { background: var(--ui-data-hover); }
    .ui-data__cell[aria-selected="false"] > button.ui-data__day:not(:disabled):hover { background: var(--ui-data-hover); }
    button.ui-data__link:not(:disabled):hover .ui-data__link-text { text-decoration: underline; }
}
.ui-data__mobile .ui-data__panel {
    inset: auto 0 0; width: 100%; max-height: 85vh; max-height: 85dvh;
    border-radius: 24px 24px 0 0; padding-bottom: calc(10px + env(safe-area-inset-bottom,0px));
}

.ui-data__weekday { display:flex; align-items:center; justify-content:center; min-height:24px; font-size:11px; color:var(--ui-data-muted); }
@media (max-width: 639px) {
    button.ui-data__trigger { padding-inline: 10px; gap: 4px; font-size: 13px; }
    .ui-data__trigger > .ui-data__icon { font-size: 20px; }
}

/* Hora: controle nativo com ícone do app e estado vazio sincronizado. */
.ui-hora { position: relative; min-width: 0; }
.ui-hora > input.ui-campo { position: relative; padding-inline: 12px 38px; }
.ui-hora > input.ui-hora__vazia { color: var(--ui-placeholder); }
.ui-hora__icone { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 20px; line-height: 1; color: var(--ui-placeholder); pointer-events: none; }
.ui-hora > input[type="time"]::-webkit-calendar-picker-indicator { position: absolute; right: 10px; top: calc(50% - 12px); width: 24px; height: 24px; margin: 0; padding: 0; opacity: 0; }
.ui-hora > input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 0; }

/* Listas compactas, grupos recolhíveis e alternador de apresentação. */
.ui-acervo-ferramentas { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ui-acervo-ferramentas > .ui-chips { flex: 1; min-width: 0; gap: 6px; }
.ui-acervo-ferramentas .ui-chip { min-height: 40px; padding-inline: 8px; gap: 3px; }
button.ui-alternador { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border: 1px solid var(--ui-borda); border-radius: 50%; background: transparent; color: var(--ui-primary); cursor: pointer; }
button.ui-alternador[aria-pressed="true"] { background: var(--ui-fundo-suave); }
button.ui-alternador:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.ui-acervo-lista { display: flex; flex-direction: column; gap: 8px; }
.ui-acervo-linha { display: flex; align-items: center; gap: 12px; padding: 10px 0; min-width: 0; border-bottom: 1px solid var(--ui-borda); text-decoration: none; color: var(--ui-primary); }
.ui-acervo-linha > img { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; background: var(--ui-fundo-suave); }
.ui-acervo-linha__texto { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 4px; overflow-wrap: anywhere; }
.ui-acervo-linha__texto strong { font-size: 14px; }
.ui-acervo-linha__texto > span { font-size: 12px; color: var(--ui-texto-apoio); }
.ui-acervo-linha:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
/* Teste visual da lista: remover o modificador restaura a miniatura original. */
.ui-acervo-linha--foto { position: relative; isolation: isolate; min-height: 72px; padding: 12px 16px; border: 1px solid var(--ui-borda); border-radius: var(--ui-raio-cartao); overflow: hidden; background: var(--ui-fundo-suave); }
.ui-acervo-linha--foto > img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; object-position: center 22%; }
.ui-acervo-linha--foto > img[hidden] { display: none; }
/* Branco >= 74% garante contraste mesmo sobre o pixel mais escuro da foto. */
.ui-acervo-linha--foto::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(255,255,255,.84), rgba(255,255,255,.74)); pointer-events: none; }
.ui-acervo-linha--foto > span { position: relative; z-index: 2; }
.ui-acervo-linha--foto .ui-acervo-linha__texto { line-height: 1.35; }
.ui-acervo-linha--foto .ui-acervo-linha__texto > span { color: var(--ui-primary); font-weight: 600; }
.ui-acervo-linha--foto > .material-symbols-outlined { flex: none; }
.ui-accordion { border: 1px solid var(--ui-borda); border-radius: var(--ui-raio-cartao); overflow: hidden; min-width: 0; }
.ui-accordion h3 { margin: 0; }
button.ui-accordion__trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 48px; padding: 12px; font: inherit; font-size: 14px; font-weight: 700; color: var(--ui-primary); background: var(--ui-fundo-suave); border: 0; text-align: start; cursor: pointer; }
.ui-accordion__trigger > span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ui-accordion__meta { flex: none; font-size: 12px; font-weight: 600; color: var(--ui-texto-apoio); }
.ui-accordion__trigger:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -3px; }
.ui-accordion__icon { flex: none; transition: transform .15s; }
.ui-accordion__trigger[aria-expanded="true"] .ui-accordion__icon { transform: rotate(180deg); }
.ui-accordion__panel { padding: 8px 12px; }
.ui-accordion__panel[hidden] { display: none !important; }
.ui-historico-mes { padding: 8px 0; border-bottom: 1px solid var(--ui-borda); }
.ui-historico-mes:last-child { border-bottom: 0; }
.ui-historico-mes__linha { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ui-historico-mes__recibo { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--ui-fundo-suave); color: var(--ui-primary); }
button.ui-historico-mes__recibo { cursor: pointer; }
button.ui-historico-mes__recibo:disabled { opacity: .5; cursor: wait; }
button.ui-historico-mes__resumo { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; min-height: 44px; gap: 4px; padding: 0; font: inherit; font-size: 12px; text-align: start; background: transparent; border: 0; color: var(--ui-texto-apoio); cursor: pointer; overflow-wrap: anywhere; }
.ui-historico-mes__resumo strong { font-size: 13px; color: var(--ui-primary); }
.ui-historico-mes__recibo:focus-visible, .ui-historico-mes__resumo:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

/* ---------- Busca com botão de limpar ---------- */
.ui-busca > input.ui-campo { padding-right: 46px; }
.ui-busca-limpar {
    position: absolute; right: 12px;
    width: 28px; height: 28px; border: 0; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    background: #F1F5F9; color: var(--ui-texto-apoio); cursor: pointer;
    transition: background-color .15s;
}
.ui-busca-limpar:hover { background: #E2E8F0; color: var(--ui-texto); }
.ui-busca-limpar .material-symbols-outlined { font-size: 16px; }
.ui-busca-limpar[hidden] { display: none; }

/* ---------- Chips de filtro (nunca quebram linha) ---------- */
.ui-chips {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: nowrap; overflow-x: auto;
    padding: 2px 0; margin: 0 -2px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ui-chips::-webkit-scrollbar { display: none; }
.ui-chip {
    display: inline-flex; align-items: center; gap: 6px;
    flex-shrink: 0; white-space: nowrap;
    min-height: 36px; padding: 8px 14px;
    font-size: 12px; font-weight: 700; color: #334155;
    background: #FFFFFF; border: 1px solid var(--ui-borda); border-radius: 9999px;
    cursor: pointer; transition: border-color .15s, color .15s, background-color .15s;
}
.ui-chip:hover { border-color: rgba(48, 48, 96, .4); color: var(--ui-primary); }
.ui-chip:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.ui-chip .ui-chip-contador { font-size: 11px; color: var(--ui-placeholder); }
.ui-chip.ui-chip-ativo,
.ui-chip[aria-pressed="true"] { background: var(--ui-primary); border-color: var(--ui-primary); color: #FFFFFF; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.ui-chip.ui-chip-ativo .ui-chip-contador,
.ui-chip[aria-pressed="true"] .ui-chip-contador { color: rgba(255, 255, 255, .75); }

/* ---------- Cartões ---------- */
.ui-cartao {
    background: #FFFFFF; border: 1px solid var(--ui-borda);
    border-radius: var(--ui-raio-cartao); padding: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.ui-cartao-suave { background: var(--ui-fundo-suave); }

/* ---------- Legenda de papéis (selos de largura igual 92px) ---------- */
.ui-legenda { display: flex; flex-direction: column; gap: 10px; }
.ui-legenda-titulo {
    font-size: 11px; font-weight: 700; color: var(--ui-primary);
    text-transform: uppercase; letter-spacing: .05em;
    padding-bottom: 6px; border-bottom: 1px solid rgba(226, 232, 240, .6);
}
.ui-legenda-item { display: flex; align-items: center; gap: 12px; }
.ui-legenda-item > .ui-selo { width: 92px; flex-shrink: 0; }
.ui-legenda-item > p { margin: 0; font-size: 12px; color: #475569; line-height: 1.35; }

.ui-selo {
    display: inline-block; padding: 4px 8px; border-radius: 6px;
    font-size: 10px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; text-align: center; line-height: 1.3;
}
.ui-selo-admin { background: var(--ui-primary); color: #FFFFFF; }
.ui-selo-dirigente { background: var(--ui-accent); color: #FFFFFF; }
.ui-selo-medium { background: var(--ui-info-bg); color: var(--ui-primary); }
.ui-selo-assistencia { background: #E2E8F0; color: #334155; }

/* ---------- Botões (altura 48px, raio 24px, feedback ergonômico) ---------- */
button.ui-botao,
a.ui-botao,
.ui-botao {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--ui-altura-campo);
    padding: 12px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    border-radius: var(--ui-raio-campo);
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, color .15s ease-in-out, box-shadow .15s ease-in-out, transform .1s ease;
}
button.ui-botao:active,
a.ui-botao:active,
.ui-botao:active {
    transform: scale(0.98);
}
button.ui-botao:disabled,
a.ui-botao[aria-disabled="true"],
.ui-botao:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

/* Botão Primário (Índigo Profundo da Casa) */
button.ui-botao-primario,
a.ui-botao-primario,
.ui-botao-primario,
button.ui-botao-primary,
a.ui-botao-primary,
.ui-botao-primary {
    background-color: var(--ui-primary);
    color: #FFFFFF;
    border-color: var(--ui-primary);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
button.ui-botao-primario:hover,
a.ui-botao-primario:hover,
.ui-botao-primario:hover,
button.ui-botao-primary:hover,
a.ui-botao-primary:hover,
.ui-botao-primary:hover {
    background-color: var(--ui-primary-dark);
    border-color: var(--ui-primary-dark);
    color: #FFFFFF;
}
button.ui-botao-primario:focus-visible,
a.ui-botao-primario:focus-visible,
.ui-botao-primario:focus-visible,
button.ui-botao-primary:focus-visible,
a.ui-botao-primary:focus-visible,
.ui-botao-primary:focus-visible {
    outline: none;
    box-shadow: var(--ui-anel-foco);
}

/* Botão Destaque / Ação Principal (Dourado de Oxum) */
button.ui-botao-accent,
a.ui-botao-accent,
.ui-botao-accent {
    background-color: var(--ui-accent);
    color: #0F172A;
    border-color: var(--ui-accent);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
button.ui-botao-accent:hover,
a.ui-botao-accent:hover,
.ui-botao-accent:hover {
    background-color: var(--ui-accent-hover);
    border-color: var(--ui-accent-hover);
    color: #0F172A;
}
button.ui-botao-accent:focus-visible,
a.ui-botao-accent:focus-visible,
.ui-botao-accent:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(224, 160, 48, 0.35);
}

/* Botão Secundário / Outline (Borda slate-200) */
button.ui-botao-secundario,
a.ui-botao-secundario,
.ui-botao-secundario {
    background-color: #FFFFFF;
    color: #334155;
    border-color: var(--ui-borda);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
button.ui-botao-secundario:hover,
a.ui-botao-secundario:hover,
.ui-botao-secundario:hover {
    background-color: var(--ui-fundo-suave);
    border-color: rgba(48, 48, 96, 0.35);
    color: var(--ui-primary);
}
button.ui-botao-secundario:focus-visible,
a.ui-botao-secundario:focus-visible,
.ui-botao-secundario:focus-visible {
    outline: none;
    border-color: var(--ui-primary);
    box-shadow: var(--ui-anel-foco);
}

/* Botão Perigo / Negativo (Bloquear, Excluir) */
button.ui-botao-perigo,
a.ui-botao-perigo,
.ui-botao-perigo {
    background-color: var(--ui-erro-bg);
    color: var(--ui-erro);
    border-color: var(--ui-erro-borda);
}
button.ui-botao-perigo:hover,
a.ui-botao-perigo:hover,
.ui-botao-perigo:hover {
    background-color: #FEE2E2;
    border-color: #FCA5A5;
    color: #B91C1C;
}
button.ui-botao-perigo:focus-visible,
a.ui-botao-perigo:focus-visible,
.ui-botao-perigo:focus-visible {
    outline: none;
    box-shadow: var(--ui-anel-erro);
}

/* Botão Perigo Sólido (Ações destrutivas com confirmação forte) */
button.ui-botao-perigo-solido,
a.ui-botao-perigo-solido,
.ui-botao-perigo-solido {
    background-color: var(--ui-erro);
    color: #FFFFFF;
    border-color: var(--ui-erro);
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.2);
}
button.ui-botao-perigo-solido:hover,
a.ui-botao-perigo-solido:hover,
.ui-botao-perigo-solido:hover {
    background-color: #B91C1C;
    border-color: #B91C1C;
    color: #FFFFFF;
}
button.ui-botao-perigo-solido:focus-visible,
a.ui-botao-perigo-solido:focus-visible,
.ui-botao-perigo-solido:focus-visible {
    outline: none;
    box-shadow: var(--ui-anel-erro);
}

/* Botão Fantasma / Ação Leve */
button.ui-botao-fantasma,
a.ui-botao-fantasma,
.ui-botao-fantasma {
    background-color: transparent;
    color: #475569;
    border-color: transparent;
    box-shadow: none;
}
button.ui-botao-fantasma:hover,
a.ui-botao-fantasma:hover,
.ui-botao-fantasma:hover {
    background-color: #F1F5F9;
    color: var(--ui-primary);
}

/* Modificadores de botão: bloco (100% largura) e compacto (sm) */
button.ui-botao-bloco,
a.ui-botao-bloco,
.ui-botao-bloco {
    display: flex;
    width: 100%;
}
button.ui-botao-sm,
a.ui-botao-sm,
.ui-botao-sm {
    /* Compacto só na largura e na fonte: a altura de toque continua 48px. */
    min-height: 48px;
    padding: 8px 16px;
    font-size: 12px;
    border-radius: var(--ui-raio-campo);
}

/* ---------- Spinner e Estados de Carregamento ---------- */
@keyframes ui-girar {
    to { transform: rotate(360deg); }
}
.ui-spinner {
    box-sizing: border-box;
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 3px solid rgba(48, 48, 96, 0.20);
    border-top-color: var(--ui-primary);
    border-radius: 9999px;
    animation: ui-girar .8s linear infinite;
    flex-shrink: 0;
}
.ui-spinner-sm {
    width: 18px;
    height: 18px;
    border-width: 2px;
}
.ui-botao-primario .ui-spinner,
.ui-botao-primary .ui-spinner {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #FFFFFF;
}
.ui-botao-accent .ui-spinner {
    border-color: rgba(15, 23, 42, 0.2);
    border-top-color: #0F172A;
}

.ui-carregando {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 16px;
    gap: 12px;
    text-align: center;
}
.ui-carregando-texto {
    font-size: 13px;
    font-weight: 500;
    color: var(--ui-texto-apoio);
}

/* ---------- Estado Vazio (Sem resultados ou sem dados) ---------- */
.ui-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 36px 20px;
    background: var(--ui-fundo-suave);
    border: 1px dashed var(--ui-borda);
    border-radius: var(--ui-raio-cartao);
    gap: 8px;
}
.ui-vazio-icone {
    font-size: 44px;
    color: var(--ui-placeholder);
    margin-bottom: 2px;
}
.ui-vazio-titulo {
    font-size: 14px;
    font-weight: 700;
    color: #334155;
    margin: 0;
}
.ui-vazio-texto {
    font-size: 12px;
    color: var(--ui-texto-apoio);
    margin: 0;
    max-width: 280px;
    line-height: 1.4;
}

/* ---------- Banners de Alerta / Feedback Semântico ---------- */
.ui-alerta {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.4;
    border: 1px solid transparent;
}
.ui-alerta-icone {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}
.ui-alerta-corpo { flex: 1; min-width: 0; }
.ui-alerta-titulo { font-weight: 700; margin-bottom: 2px; }

.ui-alerta-sucesso { background: var(--ui-sucesso-bg); border-color: var(--ui-sucesso-borda); color: #065F46; }
.ui-alerta-sucesso .ui-alerta-icone { color: var(--ui-sucesso); }

.ui-alerta-erro { background: var(--ui-erro-bg); border-color: var(--ui-erro-borda); color: #991B1B; }
.ui-alerta-erro .ui-alerta-icone { color: var(--ui-erro); }

.ui-alerta-aviso { background: var(--ui-aviso-bg); border-color: var(--ui-aviso-borda); color: #92400E; }
.ui-alerta-aviso .ui-alerta-icone { color: var(--ui-aviso); }

.ui-alerta-info { background: var(--ui-info-bg); border-color: var(--ui-info-borda); color: #075985; }
.ui-alerta-info .ui-alerta-icone { color: var(--ui-info); }

/* Toast flutuante de feedback */
.ui-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 380px;
    z-index: 70;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
    background: #1E293B;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.25);
    transition: opacity .2s ease-in-out, transform .2s ease-in-out;
}
.ui-toast[hidden] { display: none; }
.ui-toast.ui-toast-sucesso { background: #065F46; }
.ui-toast.ui-toast-erro { background: #991B1B; }

/* ---------- Badges de Status ---------- */
.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.3;
    white-space: nowrap;
}
.ui-badge-sucesso { background: var(--ui-sucesso-bg); color: #065F46; border: 1px solid var(--ui-sucesso-borda); }
.ui-badge-pendente { background: var(--ui-aviso-bg); color: #92400E; border: 1px solid var(--ui-aviso-borda); }
.ui-badge-erro { background: var(--ui-erro-bg); color: #991B1B; border: 1px solid var(--ui-erro-borda); }
.ui-badge-neutro { background: #F1F5F9; color: #475569; border: 1px solid var(--ui-borda); }
.ui-badge-primary { background: rgba(48, 48, 96, 0.1); color: var(--ui-primary); border: 1px solid rgba(48, 48, 96, 0.2); }

/* ---------- Ritmo vertical e pilhas ---------- */
.ui-pilha-secoes > * + * { margin-top: 24px; }   /* entre seções da página (24px) */
.ui-pilha-campos > * + * { margin-top: 16px; }   /* entre campos de formulário (16px) */
.ui-pilha-botoes { display: flex; flex-direction: column; gap: 12px; } /* pilha de ações */
.ui-linha-botoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* ============================================================
   Modal de Confirmação & Alertas (Substitui confirm e alert nativos)
   Padrão TerreiroApp: Folha inferior no celular (ergonomia de polegar),
   cartão centralizado em telas médias/desktop.
   ============================================================ */

/* Overlay / Backdrop escurecido */
.ui-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-color: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    padding: 0;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.22s ease-in-out, visibility 0.22s ease-in-out;
}
.ui-modal-overlay[hidden] {
    display: none !important;
}
.ui-modal-overlay.ui-modal--fechando {
    opacity: 0;
    pointer-events: none;
}

/* Painel do Modal */
.ui-modal {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    max-width: 420px;
    background-color: #FFFFFF;
    border-top: 1px solid var(--ui-borda);
    border-left: 1px solid var(--ui-borda);
    border-right: 1px solid var(--ui-borda);
    border-bottom: 0;
    border-radius: 28px 28px 0 0;
    padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 35px -5px rgba(15, 23, 42, 0.16);
    transform: translateY(0);
    transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
    outline: none;
}

.ui-modal-overlay.ui-modal--fechando .ui-modal {
    transform: translateY(100%);
}

/* Puxador tátil no topo (indica folha inferior móvel) */
.ui-modal-puxador {
    width: 36px;
    height: 4px;
    background-color: #CBD5E1;
    border-radius: 9999px;
    margin: 0 auto 16px auto;
}

/* Estrutura do conteúdo */
.ui-modal-cabecalho {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    margin-bottom: 24px;
}

/* Ícone de status / categoria */
.ui-modal-icone {
    width: 52px;
    height: 52px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
    background-color: rgba(48, 48, 96, 0.08);
    color: var(--ui-primary);
}
.ui-modal-icone .material-symbols-outlined {
    font-size: 28px;
}
.ui-modal-icone--perigo {
    background-color: var(--ui-erro-bg);
    color: var(--ui-erro);
    border: 1px solid var(--ui-erro-borda);
}
.ui-modal-icone--aviso {
    background-color: var(--ui-aviso-bg);
    color: var(--ui-aviso);
    border: 1px solid var(--ui-aviso-borda);
}
.ui-modal-icone--info {
    background-color: var(--ui-info-bg);
    color: var(--ui-info);
    border: 1px solid var(--ui-info-borda);
}
.ui-modal-icone--sucesso {
    background-color: var(--ui-sucesso-bg);
    color: var(--ui-sucesso);
    border: 1px solid var(--ui-sucesso-borda);
}

/* Textos */
.ui-modal-textos {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 340px;
}
.ui-modal-titulo {
    font-size: 18px;
    font-weight: 700;
    color: var(--ui-texto);
    line-height: 1.3;
    margin: 0;
}
.ui-modal-mensagem {
    font-size: 14px;
    font-weight: 400;
    color: #475569;
    line-height: 1.5;
    margin: 0;
}
.ui-modal-mensagem strong {
    color: var(--ui-texto);
    font-weight: 600;
}

/* Área de Ações */
.ui-modal-acoes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}
.ui-modal-acoes > .ui-botao:only-child,
.ui-modal-acoes--unico > .ui-botao {
    grid-column: 1 / -1;
    width: 100%;
}
.ui-modal-acoes--pilha {
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
}
.ui-modal-acoes--pilha > .ui-botao {
    width: 100%;
}

/* Adaptação para Desktop / Telas maiores (>= 640px) */
@media (min-width: 640px) {
    .ui-modal-overlay {
        align-items: center;
        padding: 24px 16px;
    }
    .ui-modal {
        border-radius: 24px;
        border-bottom: 1px solid var(--ui-borda);
        box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.25);
        padding: 24px;
        transform: scale(1);
    }
    .ui-modal-overlay.ui-modal--fechando .ui-modal {
        transform: scale(0.95);
        opacity: 0;
    }
    .ui-modal-puxador {
        display: none;
    }
}

/* ---------- Componente de Retorno Contextual (Fase 8b) ---------- */
.ui-voltar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ui-texto-apoio);
    text-decoration: none;
    min-height: 44px;
    max-width: 100%;
    padding: 8px 10px;
    margin: -12px 0 0 -10px;
    align-self: flex-start;
    border-radius: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
    line-height: 1;
    white-space: nowrap;
}

/* título logo abaixo do voltar, sem o respiro de seção */
.ui-voltar + *,
.ui-pilha-secoes > .ui-voltar + * { margin-top: 4px; }

.ui-voltar:hover {
    color: var(--ui-primary);
    background-color: var(--ui-fundo-suave);
}

.ui-voltar:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(224, 160, 48, 0.45);
}

.ui-voltar .material-symbols-outlined {
    font-size: 18px;
    color: var(--ui-accent);
    line-height: 1;
}

.ui-voltar span:not(.material-symbols-outlined) {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-voltar[disabled],
.ui-voltar:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---------- Esconder sempre vence ----------
   Os componentes acima usam seletor elemento.classe (ex.: a.ui-botao) para vencer o
   plugin forms do Tailwind — e com isso venciam também a utilitária .hidden. Sem esta
   regra, um botão escondido via classList.add('hidden') continuava visível. */
[class*="ui-"].hidden,
[class*="ui-"][hidden] { display: none !important; }

/* ---------- Header compacto responsivo (compartilhado) ---------- */
header button, header a[aria-label] { min-width: 48px; min-height: 48px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
header > div:first-child { gap: 4px; min-width: 0; flex: 1; }
header > div:last-child { gap: 0; flex-shrink: 0; }
header a:not([aria-label]), header a:not([aria-label]) > div:last-child { min-width: 0; }
header a:not([aria-label]) { gap: 4px; margin-left: 0; }
header a:not([aria-label]) span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Destaque de busca (mark / .ui-destaque) ---------- */
mark,
.ui-destaque {
    background-color: var(--ui-accent-light);
    color: var(--ui-primary-dark);
    padding: 1px 4px;
    border-radius: 4px;
    font-weight: 600;
}

/* ---------- Componente de Instalação PWA ---------- */
.ui-card-instalar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #FFFFFF;
    border: 1px solid var(--ui-borda);
    border-radius: var(--ui-raio-cartao);
    padding: 16px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}
.ui-card-instalar-corpo {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.ui-card-instalar-icone {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-color: var(--ui-accent-light);
    color: var(--ui-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ui-card-instalar-textos {
    flex: 1;
    min-width: 0;
}
.ui-card-instalar-titulo {
    font-size: 14px;
    font-weight: 700;
    color: var(--ui-primary);
    line-height: 1.25;
}
.ui-card-instalar-descricao {
    font-size: 12px;
    color: var(--ui-texto-apoio);
    margin-top: 4px;
    line-height: 1.4;
}
.ui-card-instalar-acoes {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

/* Folha inferior de instalação iOS */
.ui-folha-passos {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 16px 0;
    text-align: left;
}
.ui-folha-passo {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.ui-folha-passo-numero {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--ui-accent-light);
    color: var(--ui-primary);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--ui-accent);
}
.ui-folha-passo-conteudo {
    flex: 1;
    font-size: 13px;
    color: var(--ui-texto);
    line-height: 1.45;
}
.ui-folha-passo-icone {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    background-color: #F1F5F9;
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 12px;
    gap: 4px;
    color: var(--ui-primary);
    border: 1px solid #CBD5E1;
}

/* iPhone/iPad: o Safari dá zoom em campo com fonte < 16px ao tocar. -webkit-touch-callout
   só existe no WebKit do iOS, então Android e computador mantêm os 14px do design. */
@supports (-webkit-touch-callout: none) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    textarea,
    select { font-size: 16px !important; }
}