body {
    font-family: Arial, sans-serif;
    margin: 0;
    background: #f4f4f4;
    color: #222;
}

.container {
    max-width: 700px;
    margin: auto;
    padding: 20px;
}

h1 {
    margin-bottom: 5px;
}

h2 {
    margin-top: 8px;
}

label {
    font-weight: bold;
}

input,
select,
textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 14px;
    margin: 6px 0 18px;
    font-size: 16px;
}

.pergunta {
    background: white;
    padding: 16px;
    margin-bottom: 15px;
    border-radius: 8px;
}

.opcoes {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.opcoes label {
    flex: 1;
}

.opcoes input {
    display: none;
}

.opcoes span {
    display: block;
    text-align: center;
    padding: 14px 5px;
    background: #ddd;
    border-radius: 6px;
    cursor: pointer;
}

.opcoes input:checked + span {
    font-weight: bold;
    outline: 3px solid #333;
}

.btn {
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 15px;
    margin-top: 15px;
    border: 0;
    border-radius: 7px;
    font-size: 17px;
    cursor: pointer;
}

.principal {
    background: #222;
    color: white;
}

.registro {
    display: block;
    background: white;
    color: #222;
    text-decoration: none;
    margin: 10px 0;
    padding: 14px;
    border-radius: 7px;
}

.registro small {
    display: block;
    margin-top: 6px;
}

.status {
    padding: 15px;
    text-align: center;
    font-weight: bold;
    border-radius: 7px;
    margin-bottom: 20px;
}

.aprovado {
    background: #d9f7df;
}

.impedido {
    background: #ffd8d8;
}

.resposta {
    background: white;
    margin: 7px 0;
    padding: 13px;
    border-radius: 6px;
}

.resposta strong {
    float: right;
}

.alerta {
    padding: 12px;
    background: #ffd8d8;
    margin-bottom: 15px;
}

.card {
    background: white;
    padding: 16px;
    margin: 15px 0;
    border-radius: 8px;
}

.acoes-topo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.secundario {
    background: #e9ecef;
    color: #222;
}

.perigo {
    background: #b42318;
    color: white;
}

.checklists-escolha {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    margin: 8px 0 20px;
    padding: 15px;
}

.checklist-escolha {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    cursor: pointer;
}

.checklist-escolha input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin: 0;
}

.grupo-checklist {
    margin-top: 25px;
}

.grupo-checklist h2 {
    background: #222;
    color: white;
    padding: 12px;
    border-radius: 8px;
}

.pergunta-texto {
    font-weight: bold;
    margin-bottom: 10px;
}

.tag-impeditivo {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 7px;
    border-radius: 4px;
    background: #dc3545;
    color: white;
    font-size: 11px;
}

.opcoes input[value="SIM"]:checked + span {
    background: #198754;
    color: white;
    outline: 3px solid #146c43;
}

.opcoes input[value="NAO"]:checked + span {
    background: #dc3545;
    color: white;
    outline: 3px solid #b02a37;
}

.opcoes input[value="NA"]:checked + span {
    background: #ffc107;
    color: #222;
    outline: 3px solid #cc9a06;
}

.tecnico-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background: white;
    padding: 14px;
    margin: 10px 0;
    border-radius: 8px;
}

.ativo {
    color: #198754;
    font-weight: bold;
}

.inativo {
    color: #6c757d;
    font-weight: bold;
}

.pequeno {
    margin: 0;
    padding: 8px 12px;
    font-size: 14px;
}

.perigo {
    background: #dc3545;
    color: white;
}

.sucesso {
    background: #198754;
    color: white;
}

.resposta-sim {
    border-left: 6px solid #198754;
}

.resposta-nao {
    border-left: 6px solid #dc3545;
}

.resposta-na {
    border-left: 6px solid #ffc107;
}

@media (max-width: 600px) {
    .acoes-topo {
        grid-template-columns: 1fr;
    }
}

.detalhe-impedimento {
    margin-top: 15px;
    padding: 15px;
    background: #fff0f0;
    border: 2px solid #dc3545;
    border-radius: 8px;
}

.detalhe-impedimento > strong {
    display: block;
    color: #b02a37;
    margin-bottom: 15px;
}

.detalhe-impedimento textarea {
    background: white;
}

.detalhe-impedimento input[type="file"] {
    background: white;
}

.motivo-impedimento {
    clear: both;
    margin-top: 12px;
    padding: 10px;
    background: #fff0f0;
    border-radius: 6px;
}

.foto-impedimento {
    clear: both;
    margin-top: 10px;
}

.foto-impedimento a {
    font-weight: bold;
}

.assinatura-card {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.assinatura-ajuda {
    margin-top: 4px;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

#assinaturaCanvas {
    display: block;
    width: 100%;
    max-width: 700px;
    height: 220px;
    background: white;
    border: 2px solid #555;
    border-radius: 6px;
    touch-action: none;
    margin-bottom: 12px;
}

.topbar {display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #ddd;flex-wrap:wrap}
.topbar form {margin:0}.topbar .btn {margin:0}.brand {font-weight:800;color:#172b4d;text-decoration:none}
.brand img {display:block;max-width:205px;max-height:68px;width:auto;height:auto}
.contract-logo {display:block;max-width:min(100%,270px);max-height:100px;width:auto;height:auto;margin:8px 0 15px}
.logo-preview {display:block;max-width:min(100%,420px);max-height:180px;width:auto;height:auto;margin:12px 0}
.responsavel-preview {display:block;max-width:min(100%,440px);max-height:180px;width:auto;height:auto;margin:12px 0;border-bottom:1px solid #aaa}
.menu-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:20px 0}
.menu-card {display:block;background:white;border:1px solid #d5dce8;border-radius:10px;padding:18px;color:#172b4d;text-decoration:none;box-shadow:0 2px 6px #0001}
.menu-card small {display:block;color:#526070;margin-top:8px}
.evidence {margin-top:16px}.evidence textarea,.evidence input {margin-bottom:10px}
.assinatura-canvas {display:block;width:100%;height:220px;background:white;border:2px solid #555;border-radius:6px;touch-action:none;margin-bottom:12px}
.contract-preview {white-space:pre-wrap;line-height:1.6;max-height:70vh;overflow:auto;border:1px solid #ddd;padding:20px;background:#fff}
.checklabel {display:flex;align-items:center;gap:10px}.checklabel input {width:auto;margin:0}
input[type=file] {background:white}.container {max-width:820px}.opcoes span {font-size:14px}


/* NOVA NAVEGACAO LF TELECOM */

.portal-cabecalho {
    margin: 20px 0 25px;
}

.portal-cabecalho h1 {
    margin-bottom: 6px;
}

.portal-cabecalho p {
    margin-top: 0;
    color: #555;
}

.portal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 25px 0;
}

.portal-card {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 105px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    text-decoration: none;
    color: #222;
    border: 1px solid #e1e1e1;
    box-shadow: 0 2px 7px rgba(0,0,0,.06);
    transition: transform .15s ease, box-shadow .15s ease;
}

.portal-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(0,0,0,.10);
}

.portal-card b {
    display: block;
    font-size: 18px;
    margin-bottom: 7px;
}

.portal-card small {
    display: block;
    color: #666;
    line-height: 1.35;
}

.portal-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    background: #222;
    color: white;
    border-radius: 12px;
    font-size: 20px;
    font-weight: bold;
}

.subportal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 20px 0 30px;
}

.menu-opcao {
    display: block;
    padding: 18px;
    min-height: 70px;
    background: white;
    color: #222;
    text-decoration: none;
    border-radius: 10px;
    border: 1px solid #ddd;
}

.menu-opcao:hover {
    border-color: #777;
}

.menu-opcao b {
    display: block;
    font-size: 17px;
    margin-bottom: 6px;
}

.menu-opcao small {
    display: block;
    color: #666;
    line-height: 1.35;
}

.menu-opcao.destaque {
    background: #222;
    color: white;
}

.menu-opcao.destaque small {
    color: #ddd;
}

@media (max-width: 600px) {
    .portal-grid {
        grid-template-columns: 1fr;
    }

    .subportal-grid {
        grid-template-columns: 1fr;
    }

    .portal-card {
        min-height: 85px;
    }
}

/* NAVEGACAO E VEICULOS */

.acoes-pagina {
    display: flex;
    align-items: center;
    margin: 5px 0 20px;
}

.btn-voltar {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 15px;
    background: #e9ecef;
    color: #222;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    border: 1px solid #d4d4d4;
}

.btn-voltar:hover {
    background: #ddd;
}

.aviso-km {
    background: #fff8db;
    border-left: 5px solid #d6a800;
    padding: 12px;
    margin: -5px 0 18px;
    border-radius: 5px;
    line-height: 1.4;
}

.km-ausente {
    color: #a15c00;
    font-weight: bold;
}

.km-atual {
    margin: 12px 0;
    padding: 10px;
    background: #f4f4f4;
    border-radius: 6px;
}

.veiculo-card form {
    margin-top: 16px;
}

.portal-agenda {
    border: 2px solid #222;
}

.portal-largo {
    grid-column: 1 / -1;
}

@media (max-width: 600px) {
    .portal-largo {
        grid-column: auto;
    }
}

/* MANUTENCAO MULTIPLA */

.lista-manutencao {
    display: grid;
    gap: 10px;
    margin: 15px 0 25px;
}

.item-manutencao {
    border: 1px solid #ddd;
    border-radius: 9px;
    background: #fff;
    overflow: hidden;
}

.check-manutencao {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    margin: 0;
    cursor: pointer;
}

.check-manutencao input[type="checkbox"] {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}

.check-manutencao span {
    flex: 1;
}

.check-manutencao b {
    display: block;
}

.check-manutencao small {
    display: block;
    margin-top: 3px;
    color: #666;
}

.detalhes-manutencao {
    padding: 0 14px 14px;
    border-top: 1px solid #eee;
    background: #fafafa;
}

.outro-item-manutencao {
    border: 1px solid #ccc;
    border-radius: 9px;
    padding: 15px;
    margin: 12px 0;
    background: #fafafa;
}

.outro-item-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.btn-remover-item {
    border: 0;
    background: #eee;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.btn-remover-item:hover {
    background: #ddd;
}

/* MENSAGENS GLOBAIS DO SISTEMA */

.flash {
    padding: 13px 15px;
    margin: 10px 0 18px;
    border-radius: 8px;
    border: 1px solid transparent;
    line-height: 1.4;
    font-weight: 500;
}

.flash-sucesso {
    background: #dff4e5;
    border-color: #8fd19e;
    color: #155724;
}

.flash-aviso {
    background: #fff3cd;
    border-color: #e5c86b;
    color: #775b00;
}

.flash-erro {
    background: #f8d7da;
    border-color: #e19aa1;
    color: #842029;
}

.flash-info,
.flash-message {
    background: #e7f1ff;
    border-color: #9ec5fe;
    color: #084298;
}


/* ACOES DE MANUTENCAO */

.acoes-registro {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
    align-items: center;
}

.btn-perigo {
    background: #b42318;
    border: 1px solid #b42318;
    color: #fff;
    text-decoration: none;
}

.btn-perigo:hover {
    background: #8f1c13;
    border-color: #8f1c13;
}

/* MANUTENCOES AGRUPADAS */

.manutencao-grupo {
    padding: 0;
    overflow: hidden;
}

.manutencao-cabecalho {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 14px 15px;
    background: #f3f4f6;
    border-bottom: 1px solid #ddd;
}

.manutencao-itens {
    padding: 5px 15px;
}

.manutencao-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.manutencao-item:last-child {
    border-bottom: 0;
}

.manutencao-item-info {
    flex: 1;
}

.manutencao-item-info b {
    display: block;
}

.manutencao-item-info small {
    display: block;
    margin-top: 3px;
}

.acoes-item-manutencao {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.manutencao-observacao {
    padding: 12px 15px;
    background: #fafafa;
    border-top: 1px solid #eee;
}

@media (max-width:600px) {

    .manutencao-cabecalho {
        align-items: flex-start;
        flex-direction: column;
    }

    .manutencao-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .acoes-item-manutencao {
        width: 100%;
    }
}

.acoes-grupo-manutencao {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width:600px) {
    .acoes-grupo-manutencao {
        width: 100%;
        justify-content: flex-start;
    }
}

/* POPS */

.pagina-titulo-acoes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.pop-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 9px;
    padding: 15px;
    margin-bottom: 10px;
}

.pop-card:hover {
    background: #f8f8f8;
}

.pop-card b,
.pop-card small {
    display: block;
}

.pop-card small {
    margin-top: 4px;
}

.pop-contador {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
}

.pop-contador small {
    font-size: 11px;
    font-weight: normal;
}

.gps-status {
    margin: 10px 0;
    font-size: 14px;
}

.equipamento-pop-topo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.equipamento-pop small {
    display: block;
    margin-top: 5px;
}

.status-pop {
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: bold;
}

.status-ativo {
    background: #dff4e5;
    color: #155724;
}

.status-reserva {
    background: #e7f1ff;
    color: #084298;
}

.status-manutencao {
    background: #fff3cd;
    color: #775b00;
}

.status-desativado {
    background: #eee;
    color: #555;
}

@media (max-width:600px) {
    .pagina-titulo-acoes {
        align-items: stretch;
        flex-direction: column;
    }

    .equipamento-pop-topo {
        flex-direction: column;
    }
}

/* FOTOS DOS POPS E EQUIPAMENTOS */

.foto-pop-principal {
    display: block;
    width: 100%;
    max-width: 620px;
    max-height: 420px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #ddd;
    margin: 5px 0 18px;
}

.foto-equipamento-pop {
    display: block;
    width: 100%;
    max-width: 420px;
    max-height: 300px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #ddd;
    margin-bottom: 12px;
}

.foto-preview {
    display: block;
    width: 100%;
    max-width: 420px;
    max-height: 300px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #ddd;
    margin: 10px 0 15px;
}

.opcao-remover-foto {
    display: block;
    margin: 8px 0 12px;
}

/* MINIATURAS NA LISTA DE POPS */

.pop-miniatura {
    width: 95px;
    height: 75px;
    flex: 0 0 95px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #f3f4f6;
}

.pop-sem-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    color: #777;
}

.pop-card-info {
    flex: 1;
    min-width: 0;
}

@media (max-width:600px) {

    .pop-miniatura {
        width: 78px;
        height: 65px;
        flex-basis: 78px;
    }

    .pop-card {
        align-items: flex-start;
    }
}

/* GALERIA DE EQUIPAMENTOS */

.galeria-equipamento {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 10px 0 16px;
}

.foto-galeria-item {
    width: 120px;
}

.foto-equipamento-miniatura {
    display: block;
    width: 120px;
    height: 95px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.foto-titulo {
    display: block;
    margin-top: 5px;
    line-height: 1.25;
    word-break: break-word;
}

.nome-foto-nova {
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.nome-foto-nova b {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
}

.nome-foto-nova input {
    width: 100%;
}

@media (max-width:600px) {

    .foto-galeria-item {
        width: calc(50% - 6px);
    }

    .foto-equipamento-miniatura {
        width: 100%;
        height: 120px;
    }

}

/* EDICAO DA GALERIA DOS EQUIPAMENTOS */

.galeria-edicao-equipamento {
    display: grid;
    grid-template-columns:
        repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
}

.foto-edicao-card {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 10px;
}

.foto-edicao-card form {
    margin-top: 10px;
}

.foto-edicao-imagem {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.nova-foto-edicao {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.nova-foto-preview {
    width: 85px;
    height: 70px;
    object-fit: cover;
    border-radius: 7px;
    flex: 0 0 85px;
}

.nova-foto-info {
    flex: 1;
    min-width: 0;
}

.nova-foto-info b {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    word-break: break-word;
}

.nova-foto-info input {
    width: 100%;
}

@media (max-width:600px) {

    .galeria-edicao-equipamento {
        grid-template-columns: 1fr;
    }

    .foto-edicao-imagem {
        height: 220px;
    }

}

/* CAPA DO EQUIPAMENTO */

.foto-capa-atual {
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 7px;
    font-weight: bold;
    text-align: center;
}


/* ASSISTENTE DE OS POR VOZ */

.voz-os-card {
    margin-bottom: 18px;
}

.voz-os-card summary {
    cursor: pointer;
    font-size: 18px;
    padding: 4px 0;
}

.voz-exemplo {
    padding: 10px 12px;
    margin: 12px 0;
    border-left: 4px solid #aaa;
    background: rgba(127,127,127,.08);
    border-radius: 6px;
}

.acoes-voz {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.status-voz {
    font-weight: 600;
}

.resultado-voz {
    margin-top: 15px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.resultado-voz p {
    margin: 6px 0;
}

#texto-voz-os {
    width: 100%;
}