/* RESET BÁSICO */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

/* CORPO */
body {
    background-color: #f2f5f8;
    color: #333;
    line-height: 1.6;
}

/* CONTAINER PRINCIPAL */
.container {
    max-width: 900px;
    margin: 40px auto;
    background: #ffffff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* TÍTULOS */
h1 {
    text-align: center;
    color: #1a4f8b;
    margin-bottom: 10px;
}

.subtitulo {
    text-align: center;
    font-size: 15px;
    margin-bottom: 30px;
    color: #555;
}

h2 {
    margin-top: 35px;
    margin-bottom: 15px;
    color: #1a4f8b;
    border-bottom: 2px solid #e0e6ed;
    padding-bottom: 5px;
}

/* LEGENDA */
.legenda {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background: #f7f9fc;
    border: 1px solid #dde3ec;
    padding: 12px;
    margin-bottom: 25px;
    border-radius: 5px;
    font-size: 13px;
    color: #444;
    gap: 10px;
}

/* PERGUNTAS */
.pergunta {
    margin-bottom: 20px;
    padding: 15px;
    background: #f9fbfd;
    border-radius: 6px;
    border: 1px solid #e3e8f0;
}

.pergunta > label {
    display: block;
    font-weight: 600;
    margin-bottom: 12px;
}

/* ESCALA LIKERT */
.escala {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

/* CADA OPÇÃO */
.escala label {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    background: #ffffff;
    border: 1px solid #d9e0ea;
    border-radius: 6px;
    padding: 8px 6px;
    min-width: 80px;
    transition: all 0.2s ease;
    text-align: center;
}

/* ESCONDE O RADIO PADRÃO */
.escala input[type="radio"] {
    display: none;
}

/* TEXTO DA ESCALA */
.escala span {
    font-size: 13px;
    color: #333;
}

.escala span small {
    font-size: 11px;
    color: #666;
}

/* RADIO SELECIONADO */
.escala input[type="radio"]:checked + span {
    background-color: #1a4f8b;
    color: #ffffff;
    padding: 6px;
    border-radius: 4px;
}

.escala input[type="radio"]:checked + span small {
    color: #e6ecf4;
}

/* HOVER */
.escala label:hover {
    border-color: #1a4f8b;
    background: #eef4fb;
}

/* SELECT (QUESTÃO 29) */
select {
    padding: 10px;
    width: 100%;
    max-width: 300px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-top: 8px;
}

/* BOTÃO */
button {
    display: block;
    width: 100%;
    margin-top: 40px;
    padding: 15px;
    background: #1a4f8b;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s ease;
}

button:hover {
    background: #163f6e;
}

/* RODAPÉ */
.rodape {
    margin-top: 30px;
    text-align: center;
    font-size: 13px;
    color: #666;
}

/* RESPONSIVIDADE */
@media (max-width: 768px) {

    .container {
        padding: 25px;
    }

    .legenda {
        flex-direction: column;
    }

    .escala {
        justify-content: center;
    }

    .escala label {
        min-width: 100%;
    }

    h1 {
        font-size: 22px;
    }

    h2 {
        font-size: 18px;
    }
}
/* CAMPOS TEXTO (Nome e Setor) */
.pergunta input[type="text"] {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #d9e0ea;
    font-size: 14px;
    margin-top: 6px;
    transition: all 0.2s ease;
}

.pergunta input[type="text"]:focus {
    border-color: #1a4f8b;
    outline: none;
    box-shadow: 0 0 0 2px rgba(26,79,139,0.1);
}

/* ===== Página Respondentes (Admin) ===== */

.link-voltar {
    color: #1a4f8b;
    text-decoration: none;
    font-weight: 600;
}

.link-voltar:hover {
    text-decoration: underline;
}

/* tabela no mesmo padrão do layout */
.tabela {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}

.tabela thead th {
    text-align: left;
    padding: 14px 16px;
    background: #f7f9fc;
    border-bottom: 1px solid #dde3ec;
    color: #1a4f8b;
    font-weight: 700;
}

.tabela tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #e3e8f0;
    color: #333;
}

.tabela tbody tr:hover {
    background: #eef4fb;
}

/* Botão de ação estilo "sistema" */
.btn-acao {
    display: inline-block;
    padding: 10px 12px;
    background: #1a4f8b;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
}

.btn-acao:hover {
    background: #163f6e;
}

/* Responsivo: scroll horizontal na tabela */
@media (max-width: 768px) {
    .tabela {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ===== Página Resposta Individual ===== */

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 10px;
}

.info-item {
    background: #ffffff;
    border: 1px solid #d9e0ea;
    border-radius: 6px;
    padding: 10px 12px;
}

.info-titulo {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
}

.info-valor {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #333;
}

.resposta-linha {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.chip-dimensao,
.chip-valor {
    background: #ffffff;
    border: 1px solid #d9e0ea;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    color: #333;
}

/* Reaproveita o link-voltar e btn-acao que já criamos */
@media (max-width: 768px) {
    .info-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Admin ===== */

.pergunta input[type="text"],
.pergunta input[type="number"] {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #d9e0ea;
    font-size: 14px;
    margin-top: 6px;
    transition: all 0.2s ease;
}

.pergunta input[type="text"]:focus,
.pergunta input[type="number"]:focus {
    border-color: #1a4f8b;
    outline: none;
    box-shadow: 0 0 0 2px rgba(26,79,139,0.1);
}

.admin-acoes {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}


/* Todos os botões com mesmo tamanho */

/* ===== Admin - Botões alinhados e compactos ===== */

.admin-acoes {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 18px;
    align-items: stretch;   /* força mesma altura */
}

.admin-acoes form {
    margin: 0;
    display: flex;     /* transforma o form em flex */
}

/* Base comum */
.btn-acao,
.btn-danger {
    padding: 12px 18px;     /* altura controlada */
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    height: 48px;           /* força mesma altura */
}

/* Azul */
.btn-acao {
    background: #396aa1;
    color: white;
}

.btn-acao:hover {
    background: #1d426e;
}

/* Vermelho */
.btn-danger {
    background: #c0392b;
    color: white;
}

.btn-danger:hover {
    background: #922b21;
}

/* Remove comportamento de crescimento automático */
.admin-acoes a,
.admin-acoes form {
    flex: unset;
}

/* Responsivo */
@media (max-width: 768px) {
    .admin-acoes {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-acao,
    .btn-danger {
        width: 100%;
    }
}

/* ===== FIX FINAL: botões do admin alinhados e com mesmo tamanho ===== */

.admin-acoes{
  display: flex !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

/* tanto links quanto o form ocupam a mesma "coluna" */
.admin-acoes > a,
.admin-acoes > form{
  flex: 1 1 220px !important;     /* mesma regra para os 4 */
  margin: 0 !important;
}

/* o form precisa se comportar como bloco normal */
.admin-acoes > form{
  display: block !important;
}

/* botão e links com mesma altura/largura */
.admin-acoes .btn-acao,
.admin-acoes .btn-danger{
  width: 100% !important;         /* garante mesma largura */
  height: 48px !important;        /* mesma altura */
  padding: 0 18px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

/* cores */
.admin-acoes .btn-acao{
  background: #3f76b5 !important;
  color: #fff !important;
  text-decoration: none !important;
}

.admin-acoes .btn-acao:hover{
  background: #1d416b !important;
}

.admin-acoes .btn-danger{
  background: #cd4a3b !important;
  color: #fff !important;
  border: none !important;
}

.admin-acoes .btn-danger:hover{
  background: #922b21 !important;
}

/* mobile: 1 por linha */
@media (max-width: 768px){
  .admin-acoes > a,
  .admin-acoes > form{
    flex: 1 1 100% !important;
  }
}

@media print {
  .section { break-inside: avoid !important; page-break-inside: avoid !important; }
  table, thead, tbody, tr, td, th { break-inside: avoid !important; page-break-inside: avoid !important; }
  .btn-acao, a[href*="/pdf"] { display: none !important; }
}

@media print {
  /* esconde botões / links de pdf */
  .btn-acao, .btn-danger, .no-print, a[href*="/pdf"] { 
    display: none !important; 
  }

  /* matriz sempre começa em uma nova página */
  #matriz { 
    break-before: page !important; 
    page-break-before: always !important;
  }

  /* no PDF: esconde a tabela e mostra a versão em "linhas" */
  #matriz .matriz-tabela { display: none !important; }
  #matriz .matriz-pdf { display: block !important; }

  /* linhas do PDF */
  #matriz .matriz-pdf .linha {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid #e3e8f0;
    font-size: 12px;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  #matriz .matriz-pdf .cabecalho {
    background: #f7f9fc;
    font-weight: 700;
    color: #1a4f8b;
    border-bottom: 1px solid #dde3ec;
  }

  #matriz .matriz-pdf .dim { width: 35%; }
  #matriz .matriz-pdf .score { width: 25%; text-align: center; }
  #matriz .matriz-pdf .class { width: 40%; text-align: right; }

  /* mesmas cores da tabela */
  #matriz .matriz-pdf .alto { background: #f8d7da; }
  #matriz .matriz-pdf .moderado { background: #fff3cd; }
  #matriz .matriz-pdf .baixo { background: #d4edda; }
}


/* respostas PDF */ 

@media print {
  .btn-acao,
  .btn-danger,
  .link-voltar,
  a[href*="/pdf"] {
    display: none !important;
  }

  .pergunta {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
}