/* ══════════════════════════════════════════════════════════════════════════════
   BLOCO "CONTRATOS DO CLIENTE" (.occ-*) — fim do modal Editar OS
   ══════════════════════════════════════════════════════════════════════════════
   Desenho do bloco somente-leitura montado por js/componentes/os-contratos-cliente.js.
   É compartilhado porque o modal #editOs está duplicado em três telas
   (atendimento_aberto clássico, atendimento_aberto/view.php e atendimento_aberto_full).

   Nada aqui é clicável: é um cartão de leitura. O contrato que NÃO está assinado E ativo
   ganha borda âmbar — chama atenção sem parecer erro, já que o bloco não bloqueia nada.
   ══════════════════════════════════════════════════════════════════════════════ */

.occ-bloco {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #e2e8f0;
}
.occ-titulo {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #94a3b8;
}

.occ-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.occ-item {
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
}
.occ-item--alerta { border-left-color: #f59e0b; }

/* Rótulo da família (Concessão/Permanência, Adesão/Termo). Cada cartão é um SLOT fixo:
   aparece mesmo sem contrato, porque "falta o contrato de concessão" é o que o operador
   precisa enxergar antes de fechar a OS. */
.occ-grupo {
    display: block;
    margin-bottom: 5px;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #64748b;
}

.occ-vazio {
    margin: 0;
    font-size: .72rem;
    font-style: italic;
    color: #94a3b8;
}

.occ-item-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.occ-codigo {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    font-weight: 700;
    color: #334155;
}
.occ-modalidade {
    font-size: .72rem;
    color: #64748b;
    overflow-wrap: anywhere;
}

.occ-item-bottom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.occ-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: .66rem;
    font-weight: 700;
}
.occ-badge--sim { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.occ-badge--nao { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }

.occ-data {
    margin-left: auto;
    font-size: .66rem;
    color: #94a3b8;
    white-space: nowrap;
}

.occ-aviso {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: .72rem;
    color: #64748b;
}

/* ══ Dark mode ══
   A main ainda não tem tema escuro (nenhum [data-theme] fora deste arquivo), então este
   bloco não pinta nada aqui. Fica porque o MESMO componente vai para a the-change, que
   tem dark mode — sem ele o cartão apareceria branco sobre fundo escuro lá. ══ */
[data-theme="dark"] .occ-bloco        { border-top-color: #334155; }
[data-theme="dark"] .occ-titulo       { color: #94a3b8; }
[data-theme="dark"] .occ-item         { background: #1e293b; border-color: #334155; border-left-color: #475569; }
[data-theme="dark"] .occ-item--alerta { border-left-color: #f59e0b; }
[data-theme="dark"] .occ-codigo       { color: #e2e8f0; }
[data-theme="dark"] .occ-grupo        { color: #94a3b8; }
[data-theme="dark"] .occ-vazio        { color: #64748b; }
[data-theme="dark"] .occ-modalidade,
[data-theme="dark"] .occ-aviso        { color: #94a3b8; }
[data-theme="dark"] .occ-data         { color: #64748b; }
[data-theme="dark"] .occ-badge--sim   { background: #06341f; border-color: #0b5132; color: #6ee7b7; }
[data-theme="dark"] .occ-badge--nao   { background: #3f1420; border-color: #64202f; color: #fda4af; }