/* Dossiê do relógio — PRD-003 */

/* ============================================================
   Modo Ver — só layout novo aqui (grids + 2 recortes tipográficos).
   Cor/raio/sombra/espaço 100% herdados de variables.css (Frontend/Interface §1).
   ============================================================ */

/* --- Fatos de leitura (Componente 3, FormBuilder.renderFato — §8) --- */
.doss-fatos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-4) var(--space-3);
}

.doss-fato-full {
    grid-column: 1 / -1;
}

/* --text-muted sobre --bg-card fica 4.42:1 (abaixo do minimo 4.5:1 p/ texto normal) — este
   rotulo se repete em quase todos os ~84 campos do catalogo, entao usa --text-secondary
   (8.39:1) em vez de --text-muted (achado de contraste, PRD §14). Mesma receita tipográfica
   de .sidebar-section-title (layout.css), só o tom muda. */
.doss-fato-label {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.doss-fato-valor {
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.doss-fato-valor.vazio {
    color: var(--text-muted);
}

.doss-nota {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    border-left: 2px solid var(--accent-subtle);
    padding-left: var(--space-3);
}

/* --- Estado de erro do dossiê (Componente 2, §4) --- */
.empty-state.is-erro {
    border: 1px solid var(--danger);
    background: var(--danger-bg);
    border-radius: var(--radius-lg);
}

.empty-state.is-erro h3 {
    color: var(--danger);
}

/* --- Skeleton do modo Ver, síncrono e sem espera de rede (Componente 2, §4) --- */
.doss-skel-hero {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

.doss-skel-row {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.doss-skel-chip {
    height: 24px;
    width: 88px;
    border-radius: var(--radius-full);
}

.doss-skel-stat {
    height: 76px;
    border-radius: var(--radius-lg);
}

.doss-skel-grupo {
    height: 56px;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
}

/* --- Documentos do dossiê (Componente 8, §10) — classes exigidas pela TASK-006 (bloqueia
   nesta task); a lógica de montagem em si (upload/exclusão) só chega naquela task.
   .card-chip/.tag continuam 100% globais — isto é só um modificador de largura/truncamento,
   nunca editado em components.css. */
.doss-doc-chip {
    max-width: 220px;
}

.doss-doc-nome {
    display: inline-block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

@media (max-width: 599px) {
    .doss-doc-chip { max-width: 70vw; }
    .doss-doc-nome { max-width: calc(70vw - 40px); }
}

/* --- Linha do tempo (§9) — achado da auditoria pós-execução (michelangelo, N1): o
   .hist-uso-list herdado tem max-height:240px/overflow-y:auto (components.css:1980),
   dimensionado para o conteúdo antigo (uma linha por evento). Com C1 (vendedor/tipo de
   compra/revisão como texto visível, multi-linha), o conteúdo real passa do teto e esconde
   a Aquisição/o "ver mais" numa rolagem interna sem nenhuma pista visual. Remove o teto
   neste contexto — a página já rola normalmente, não precisa de uma segunda barra aninhada. */
.doss-timeline-list {
    max-height: none;
    overflow-y: visible;
}

/* --- Overlay de galeria + lightbox (Componente 6, §11 — interação em galeria.js/DossieGaleria;
   aqui só o layout do markup estático embutido por PaginaRelogioDossie.render) --- */
.doss-galeria-overlay {
    overflow-y: auto;
}

/* Achado da auditoria pós-execução (michelangelo, N3): .lightbox herda z-index:var(--z-modal)
   (400) de components.css, abaixo do --z-nav do bottom-nav mobile (600) — em 375px o menu
   inferior ficava por cima do lightbox "tela cheia" e continuava tocável, permitindo um toque
   acidental abandonar o dossiê. #doss-galeria já recebeu z-index:700 inline
   (relogio-dossie.js); o seletor por id aqui garante a mesma prioridade para o lightbox sem
   tocar a regra global .lightbox (usada só por este componente hoje, confirmado via grep). */
#doss-lightbox {
    z-index: 700;
}

.doss-lb-nav {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    color: #fff;
    font-size: var(--text-2xl);
}

.doss-lb-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 78vw;
    max-height: 72vh;
    overflow: hidden;
    cursor: zoom-in;
}

.doss-lb-stage img {
    transition: transform var(--transition-base);
}

.doss-lb-stage.zoom img {
    transform: scale(1.6);
    cursor: zoom-out;
}

.doss-lb-legenda {
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin-top: var(--space-2);
}

.doss-lb-counter {
    position: absolute;
    bottom: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

@media (max-width: 599px) {
    .doss-lb-nav { width: 36px; height: 36px; font-size: var(--text-lg); }
    .doss-lb-stage { max-width: 88vw; max-height: 65vh; }
}