/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

/* ================================
   AJUSTES WELLOW – CORES (SEM AZUL NO TEXTO)
   ================================ */

:root{
  --wellow-black:#000000;
  --wellow-white:#FFFFFF;
  --pantone-428:#C1C6C8;
  --pantone-red-032:#EF3340;
  --pantone-3258:#4EC3B0;
  --pantone-130:#F2A900;
  --pantone-orange-021:#FE5000;
  --pantone-361:#43B02A;
  --pantone-299:#00A3E0;
  --pantone-220:#A50050;
}

/* Texto geral (remove azul default/Bootstrap) */
body,
p,
.survey-description,
.survey-description p,
.welcome,
.welcome p,
.question-text,
.ls-question-text,
.question-title,
.help-block,
.small,
.text-info,
.text-primary{
  color: var(--wellow-black) !important;
}

/* Links (evita azul) */
a, a:visited{
  color: var(--pantone-361) !important;
  text-decoration: underline;
}
a:hover, a:focus{
  color: var(--pantone-red-032) !important;
}

/* Botões (evita azul) */
.btn-primary,
.btn-info,
.btn-primary:visited{
  background-color: var(--pantone-361) !important;
  border-color: var(--pantone-361) !important;
  color: var(--wellow-white) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-info:hover,
.btn-info:focus{
  background-color: var(--pantone-3258) !important;
  border-color: var(--pantone-3258) !important;
  color: var(--wellow-white) !important;
}

/* Barra de progresso */
.progress-bar{
  background-color: var(--pantone-361) !important;
}

/* Destaque de seleção (ex.: escalas/rádios)
   Troca do verde por cinza (Pantone 428) para ficar neutro */
.answer-item input:checked + label,
.ls-answer input:checked + label,
.ls-answers .answer-item input:checked + label,
.ls-answers .radio-item input:checked + label,
.ls-answers .checkbox-item input:checked + label,
.ls-answers input:checked + label{
  background-color: var(--pantone-428) !important;
  border-color: var(--pantone-428) !important;
  color: var(--wellow-black) !important;
}

/* Em alguns layouts (Bootstrap 5), o estado selecionado usa botões */
.ls-answers .btn-check:checked + .btn,
.ls-answers .btn.active,
.ls-answers .btn:active,
.ls-answers .btn:focus,
.ls-answers .btn-primary.active,
.ls-answers .btn-success.active{
  background-color: var(--pantone-428) !important;
  border-color: var(--pantone-428) !important;
  color: var(--wellow-black) !important;
  box-shadow: none !important;
}

/* Alertas */
.alert-warning{
  border-color: var(--pantone-130) !important;
  color: var(--wellow-black) !important;
}


/* =========================
   WELLOW – ESCALA 1–10 COMPACTA
   ========================= */

/* Numeração da pergunta (ex.: "1.") */
.question-number,
.ls-question-number,
.question-code{
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--wellow-black) !important;
  line-height: 1.2 !important;
}

/* Título da pergunta (para não ficar desproporcional) */
.question-title,
.question-text,
.ls-question-text{
  font-size: 1rem !important;
  line-height: 1.35 !important;
}

/* Opções 1–10 (rádios/botões de escala) */
.ls-answers .answer-item label,
.ls-answers .radio-item label,
.ls-answers label.answertext,
.ls-answers .answertext{
  font-size: 0.9rem !important;
  line-height: 1.1 !important;
}

/* Células/botões da escala */
.ls-answers .answer-item,
.ls-answers .radio-item{
  margin: 0 2px 4px 2px !important;
}

/* Quando o tema renderiza como "botões" */
.ls-answers .answer-item label,
.ls-answers .radio-item label{
  padding: 6px 10px !important;
  min-height: 32px !important;
  min-width: 32px !important;
  border-radius: 6px !important;
}

/* Ajuste em ecrãs pequenos (mantém legível sem ficar gigante) */
@media (max-width: 576px){
  .ls-answers .answer-item label,
  .ls-answers .radio-item label{
    font-size: 0.95rem !important;
    padding: 8px 10px !important;
    min-height: 36px !important;
    min-width: 36px !important;
  }
}

/* --- Wellow branding: background + logo sizing --- */
body{
  background-image:url("../files/background.png");
  background-repeat:no-repeat;
  background-position:center top;
  background-attachment:fixed;
  background-size:cover;
}

/* Improve readability over background */
#outerframeContainer,
.outerframe,
.survey-welcome,
.question-container,
.group-container{
  background-color: rgba(255,255,255,0.88);
  border-radius: 14px;
}

/* Logo sizing (top-left) */
.navbar-brand img,
.brand-logo img,
img.logo{
  max-height: 90px;
  width:auto;
}

/* Give the header a bit more height so the larger logo fits nicely */
.navbar{
  min-height: 90px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.navbar-header, .navbar-brand{
  height: auto;
}


/* --- Wellow: reduzir tamanho do asterisco de obrigatoriedade --- */
/* Em algumas perguntas o "*" herda o tamanho do título e fica demasiado grande */
.question-container .asterisk,
.question-title-container .asterisk,
.ls-question-text .asterisk,
.question-text .asterisk,
.ls-question-mandatory,
.mandatory .asterisk,
.mandatory .text-danger {
  font-size: 0.65em !important;
  line-height: 1 !important;
  vertical-align: super;
  margin-right: 0.15em;
}

/* =========================
   LEGENDA – ESCALA 1–10
   =========================
   Mostrar APENAS em perguntas do tipo “matriz/array”.
*/
.question-container.question-type-array .ls-answers::after,
.question-container.question-type-array .answers::after,
.question-container.question-type-array .answer-container::after,
.question-container.question-type-array .table-responsive::after{
  content: "Escala de avaliação:\A1 – Muito insatisfeito\A10 – Muito satisfeito";
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(0,0,0,0.45);
  white-space: pre-line;
}

/* Evita duplicar a legenda em contentores internos */
.question-container.question-type-array .table-responsive .ls-answers::after,
.question-container.question-type-array .answer-container .ls-answers::after{
  content: none !important;
}

/* =========================
   “BARRA” DO CÓDIGO DO INQUÉRITO (texto exibido / boilerplate)
   ========================= */
.question-container.question-type-boilerplate,
.question-container.question-type-boilerplate .question-text,
.question-container.question-type-boilerplate .ls-question-text{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.question-container.question-type-boilerplate .question-text,
.question-container.question-type-boilerplate .ls-question-text{
  font-size: 14px !important;
  line-height: 1.2 !important;
  color: rgba(0,0,0,0.45) !important;
}





/* === Reduz barra código do inquérito === */
.survey-description,
.survey-welcome {
  padding: 8px 16px !important;
  font-size: 12px !important;
  min-height: unset !important;
}