/* ------------------------------
   Tema Infantil — Guapó Matrículas
   Arquivo: css/infantil.css
   ------------------------------ */

/* Paleta suave (pastéis) */
:root{
  --azul: #7CC6FE;
  --rosa: #FFB3C1;
  --amarelo: #FFE066;
  --verde: #A8E6CF;
  --roxo: #CDB4DB;
  --laranja: #FFD6A5;
  --texto: #3d3d3d;
  --branco: #ffffff;
  --card-radius: 20px;
  --shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* Fonte amigável (Google Fonts no HTML) */
body{
  font-family: "Fredoka", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color: var(--texto);
  background:
    /* Nuvens SVG com data-URI (sem arquivos externos) */
    url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'>\
      <defs>\
        <radialGradient id='g' cx='50%' cy='50%' r='60%'>\
          <stop offset='0%' stop-color='%23ffffff' stop-opacity='0.9'/>\
          <stop offset='100%' stop-color='%23ffffff' stop-opacity='0'/>\
        </radialGradient>\
      </defs>\
      <rect width='240' height='120' fill='none'/>\
      <circle cx='40' cy='40' r='40' fill='url(%23g)'/>\
      <circle cx='120' cy='25' r='35' fill='url(%23g)'/>\
      <circle cx='200' cy='55' r='45' fill='url(%23g)'/>\
    </svg>") repeat,
    linear-gradient(180deg, #EAF6FF 0%, #FDF7FF 100%);
  background-size: 300px 150px, 100% 100%;
  min-height: 100vh;
}

/* Topo com faixa lúdica */
.topo{
  background: #1270b7; /*linear-gradient(90deg, var(--azul), var(--roxo), var(--rosa));*/
  border-bottom: 6px solid rgba(255,255,255,.6);
  position: relative;
  overflow: hidden;
  padding: 12px 0;
}

.topo::after{
  /* filete carrossel de “bandeirinhas” */
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -8px;
  height: 26px;
  background:
    conic-gradient(from 45deg at 12.5% 50%, var(--amarelo) 0 25%, transparent 0 100%),
    conic-gradient(from -45deg at 37.5% 50%, var(--rosa) 0 25%, transparent 0 100%),
    conic-gradient(from 45deg at 62.5% 50%, var(--verde) 0 25%, transparent 0 100%),
    conic-gradient(from -45deg at 87.5% 50%, var(--laranja) 0 25%, transparent 0 100%);
  background-size: 25% 100%;
  background-repeat: repeat-x;
  opacity:.85;
}

.imgTopo{
  display:flex;
  align-items:center;
  justify-content:center;
}
#logoSEMED, #logoGemul{
  max-height: 80px;
  width:auto;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.08));
}

/* Caixa de mensagens/cards */
.box-msg{
  margin-top: 24px;
  margin-bottom: 8px;
}

.alert{
  border: none !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  padding: 24px 22px;
}

/* Decoração de confetes nos cards */
.alert::after{
  content:"";
  position:absolute;
  inset: -40px -30px auto auto;
  height: 140px;
  width: 140px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.9) 0 18%, transparent 20% 100%),
    radial-gradient(circle at 65% 75%, rgba(255,255,255,.8) 0 16%, transparent 18% 100%),
    radial-gradient(circle at 75% 25%, rgba(255,255,255,.85) 0 14%, transparent 16% 100%);
  transform: rotate(15deg);
  opacity:.7;
}

/* Variações divertidas para os dois blocos */
.alert-warning{
  background: linear-gradient(180deg, #FFF5D6 0%, #FFF0C2 100%);
}
.alert-info{
  background: linear-gradient(180deg, #E2F4FF 0%, #D5EEFF 100%);
}

/* Títulos com “adesivo” */
.alert h2{
  font-weight: 700;
  letter-spacing: .2px;
  margin-top: 4px;
  margin-bottom: 12px;
  display:inline-block;
  padding: 6px 14px;
  border-radius: 14px;
  background: var(--branco);
  box-shadow: 0 6px 0 rgba(0,0,0,.06);
}

.alert h3, .alert h4{
  margin: 4px 0 10px;
  color:#4a4a4a;
}

/* Linha com botão centralizado */
.btn-ajuste{
  display:flex;
  justify-content:center;
  margin-top: 18px;
}

/* Botão grandão com micro-efeitos */
.btn-success{
  background: linear-gradient(180deg, #5CD27C, #3EC56A);
  border: 0;
  border-radius: 999px;
  padding: 14px 26px;
  font-weight: 700;
  letter-spacing: .3px;
  transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow: 0 10px 22px rgba(67, 206, 132, .25);
}

.btn-success:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(67, 206, 132, .28);
  filter: saturate(1.05);
}

.btn-success:active{
  transform: translateY(0);
}

/* Botão “Atualizar” no rodapé */
.atualizar-zone{
  margin: 10px 0 24px;
}
.atualizar-zone .btn-success{
  background: linear-gradient(180deg, #7CC6FE, #5EB4F2);
  box-shadow: 0 10px 22px rgba(124,198,254,.25);
}

.link-voltar {
    font-size: 1.25rem;      /* aumenta o tamanho da letra */
    font-weight: 600;
    text-decoration: none;   /* remove sublinhado */
    color: #007bff;
}

.link-voltar:hover {
    text-decoration: none;   /* garante que não sublinhe no hover */
    color: #0056b3;
}

.link-voltar i {
    margin-right: 6px;
}

.obrigatorioTitulo {
	font-size: 1.25rem;      /* aumenta o tamanho da letra */
    font-weight: 600;
    color: red;
    padding-right: 2px;
}

.question-block {
    padding: 15px 10px;
    border-bottom: 1px solid #cdbfbf;
    margin-bottom: 10px;
}

.question-label {
    font-weight: 600;
    display: block;
}

.question-label small {
    display: block;
    font-weight: normal;
    color: #555;
    margin-top: 3px;
}

.radio-group label {
    margin-right: 25px;
    font-weight: 500;
    cursor: pointer;
}

.radio-group input {
    margin-right: 5px;
}

.form-group.has-error small,
	.form-group.has-error span[data-campo] {
		color: #d9534f !important;
	}


/* Responsividade */
@media (max-width: 991px){
  #logoSEMED{ max-height: 64px; }
  #logoGemul{ max-height: 38px; }
  .alert{ padding: 20px 18px; }
  .alert h2{ font-size: 1.35rem; }
  .btn-success{ width: 100%; }
}

/* Acessibilidade: foco visível */
:focus{
  outline: 3px dashed #6A9CFD;
  outline-offset: 2px;
}