/* ============================================================
   Diagnóstico por Foto (F3)
   ============================================================ */

.pagina-diagnostico-foto,
.pagina-diagnosticos {
    min-height: 100vh;
    background: var(--bege-papel, #FAF6EB);
}

/* ===== Estado vazio ===== */

.diag-vazio {
    text-align: center;
    padding: var(--gap-lg);
}
.diag-vazio-icone {
    font-size: 80px;
    margin: var(--gap-md) 0;
    opacity: 0.85;
}
.diag-vazio h3 {
    color: var(--verde-escuro);
    margin: 0 0 var(--gap-sm);
    font-size: var(--fs-titulo);
}
.diag-vazio > p {
    color: var(--texto-secundario);
    line-height: 1.5;
    max-width: 380px;
    margin: 0 auto var(--gap-lg);
    font-size: var(--fs-pequeno);
}

.diag-cota-info {
    margin-top: var(--gap-md);
    text-align: center;
}
.diag-cota {
    color: var(--texto-secundario);
    font-size: var(--fs-mini);
}

.diag-dicas {
    background: var(--branco);
    border: 1px solid rgba(94, 124, 71, 0.10);
    border-radius: var(--raio-md);
    padding: var(--gap-md);
    margin: var(--gap-lg) auto 0;
    max-width: 380px;
    text-align: left;
}
.diag-dicas h4 {
    margin: 0 0 var(--gap-xs);
    color: var(--verde-escuro);
    font-size: var(--fs-pequeno);
}
.diag-dicas ul {
    margin: 0;
    padding-left: 20px;
    color: var(--texto-secundario);
    font-size: var(--fs-mini);
    line-height: 1.7;
}

/* ===== Preview ===== */

.diag-preview {
    padding: var(--gap-md);
}
.diag-preview-img {
    width: 100%;
    max-height: 60vh;
    object-fit: contain;
    border-radius: var(--raio-md);
    background: #000;
}
.diag-preview h4 {
    color: var(--verde-escuro);
    font-size: var(--fs-pequeno);
    margin: var(--gap-md) 0 var(--gap-xs);
}

.diag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--gap-md);
}
.diag-chip {
    background: var(--branco);
    border: 1px solid rgba(94, 124, 71, 0.20);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: var(--fs-pequeno);
    cursor: pointer;
    color: var(--texto-primario);
}
.diag-chip.ativo {
    background: var(--verde-medio);
    color: var(--texto-invertido);
    border-color: var(--verde-medio);
}

.diag-preview-acoes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    margin-top: var(--gap-md);
}
.diag-preview-acoes button:last-child {
    grid-column: 1 / -1;
}

/* Estado vazio: botões empilhados */
.diag-acoes-foto {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    max-width: 380px;
    margin: 0 auto;
}
.diag-dica-galeria {
    color: var(--texto-secundario);
    font-size: var(--fs-mini);
    font-style: italic;
    text-align: center;
    margin: var(--gap-sm) auto 0;
    max-width: 380px;
    line-height: 1.4;
}

.diag-aviso-mini {
    margin-top: var(--gap-md);
    padding: 10px 12px;
    background: rgba(255, 152, 0, 0.10);
    border-left: 3px solid #FB8C00;
    border-radius: var(--raio-sm);
    color: var(--texto-secundario);
    font-size: var(--fs-mini);
    line-height: 1.4;
}

/* ===== Loading ===== */

.diag-loading {
    text-align: center;
    padding: 80px 24px;
}
.diag-loading-spinner {
    font-size: 80px;
    margin-bottom: var(--gap-md);
    animation: cafezinho-pensando 1.5s ease-in-out infinite;
}
@keyframes cafezinho-pensando {
    0%, 100% { transform: rotate(-8deg) scale(1); opacity: 0.85; }
    50%      { transform: rotate(8deg) scale(1.08); opacity: 1; }
}
.diag-loading h3 {
    color: var(--verde-escuro);
    margin: 0 0 8px;
}
.diag-loading p {
    color: var(--texto-secundario);
    font-size: var(--fs-pequeno);
}

/* ===== Resultado ===== */

.diag-banner-aviso {
    background: #FFF3CD;
    border-bottom: 2px solid #FFB300;
    padding: 12px 16px;
    color: #6E4C00;
    font-size: var(--fs-pequeno);
    line-height: 1.45;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 5;
}

.diag-resultado {
    padding: var(--gap-md);
    padding-top: var(--gap-sm);
}
.diag-resultado-img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: var(--raio-md);
    margin-bottom: var(--gap-md);
}

.diag-card {
    background: var(--branco);
    border: 1px solid rgba(94, 124, 71, 0.10);
    border-radius: var(--raio-md);
    padding: var(--gap-md);
}
.diag-card-titulo {
    font-size: var(--fs-base);
    font-weight: var(--peso-semi);
    color: var(--verde-escuro);
    margin-bottom: var(--gap-sm);
}
.diag-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--gap-md);
}
.diag-sev, .diag-conf {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: var(--fs-mini);
}
.diag-conf {
    background: rgba(94, 124, 71, 0.10);
    color: var(--verde-escuro);
}

.diag-aviso-baixa-conf {
    background: rgba(229, 57, 53, 0.08);
    border-left: 3px solid #E53935;
    padding: 10px 12px;
    border-radius: var(--raio-sm);
    color: #B71C1C;
    font-size: var(--fs-mini);
    margin-bottom: var(--gap-md);
}

.diag-explicacao {
    color: var(--texto-primario);
    line-height: 1.5;
    font-size: var(--fs-pequeno);
    margin: 0 0 var(--gap-md);
}

.diag-bloco {
    border-top: 1px solid var(--linha-fina);
    padding-top: var(--gap-sm);
    margin-top: var(--gap-sm);
}
.diag-bloco h5 {
    margin: 0 0 6px;
    color: var(--verde-escuro);
    font-size: var(--fs-pequeno);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: var(--peso-semi);
}
.diag-bloco p,
.diag-bloco ul {
    color: var(--texto-primario);
    font-size: var(--fs-pequeno);
    line-height: 1.5;
    margin: 0;
}
.diag-bloco ul {
    padding-left: 20px;
}
.diag-princativos li {
    margin-bottom: 2px;
}
.diag-bloco-disclaimer {
    background: rgba(94, 124, 71, 0.06);
    border-radius: var(--raio-sm);
    padding: 10px 12px;
    border-top: none;
    margin-top: var(--gap-md);
}
.diag-bloco-disclaimer p {
    color: var(--verde-escuro);
    font-size: var(--fs-mini);
    line-height: 1.5;
}

.diag-resultado-acoes {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    margin-top: var(--gap-md);
}

/* ===== Estados de erro ===== */

.diag-foto-ruim {
    text-align: center;
    padding: var(--gap-lg);
}
.diag-foto-ruim h3 {
    color: var(--verde-escuro);
    margin: 0 0 var(--gap-sm);
}
.diag-foto-ruim p {
    color: var(--texto-secundario);
    line-height: 1.5;
    max-width: 380px;
    margin: 0 auto var(--gap-md);
    font-size: var(--fs-pequeno);
}

/* ===== Histórico ===== */

.diagh-lista {
    padding: var(--gap-md);
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}
.diagh-item {
    display: flex;
    gap: var(--gap-sm);
    background: var(--branco);
    border: 1px solid rgba(94, 124, 71, 0.10);
    border-radius: var(--raio-md);
    padding: var(--gap-sm);
    cursor: pointer;
}
.diagh-item:active {
    transform: scale(0.99);
}
.diagh-thumb {
    width: 64px;
    height: 64px;
    border-radius: var(--raio-sm);
    object-fit: cover;
    flex-shrink: 0;
    background: #f0f0f0;
}
.diagh-thumb-vazio {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    background: var(--bege-papel);
}
.diagh-info {
    flex: 1;
    min-width: 0;
}
.diagh-titulo {
    font-weight: var(--peso-semi);
    color: var(--texto-primario);
    font-size: var(--fs-pequeno);
    margin-bottom: 4px;
}
.diagh-meta {
    display: flex;
    gap: 12px;
    font-size: var(--fs-mini);
    color: var(--texto-secundario);
}
.diagh-link {
    margin-top: 4px;
    color: var(--verde-medio);
    font-size: var(--fs-mini);
}