/* Painel da Palavra — estilos base */
:root {
  --azul: #044E83;
  --azul-escuro: #033A63;
  --azul-claro: #E6EEF5;
  --laranja: #CB8C0C;
  --laranja-claro: #FFF4E0;
  --branco: #FFFFFF;
  --texto: #0F172A;
  --texto-fraco: #475569;
  --borda: #E2E8F0;
  --erro: #DC2626;
  --sucesso: #15803D;
}

* { -webkit-tap-highlight-color: transparent; }

html, body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  color: var(--texto);
  background: var(--branco);
  overscroll-behavior-y: contain;
}

.font-condensed {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.btn-primario {
  background: var(--azul);
  color: var(--branco);
  border-radius: 16px;
  padding: 18px 24px;
  font-weight: 600;
  min-height: 56px;
  width: 100%;
  transition: transform .1s ease, background .2s ease;
  box-shadow: 0 4px 12px rgba(4,78,131,0.18);
}
.btn-primario:hover { background: var(--azul-escuro); }
.btn-primario:active { transform: scale(.98); }
.btn-primario:disabled { opacity: .5; cursor: not-allowed; }

.btn-secundario {
  background: var(--branco);
  color: var(--azul);
  border: 1.5px solid var(--azul);
  border-radius: 16px;
  padding: 16px 24px;
  font-weight: 600;
  min-height: 52px;
  width: 100%;
  transition: background .2s ease;
}
.btn-secundario:hover { background: var(--azul-claro); }

.btn-fantasma {
  background: transparent;
  color: var(--texto-fraco);
  font-weight: 500;
  padding: 8px 12px;
}
.btn-fantasma:hover { color: var(--azul); }

.input-campo {
  width: 100%;
  border: 1.5px solid var(--borda);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 16px;
  background: var(--branco);
  transition: border-color .15s ease;
}
.input-campo:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(4,78,131,0.12);
}

.label-campo {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-fraco);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 6px;
}

.card {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 20px;
  padding: 24px;
}

.tela-vez {
  background: linear-gradient(140deg, var(--laranja) 0%, #B07807 100%);
  color: var(--branco);
}

@keyframes pulse-grande {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.04); opacity: .92; }
}
.pulse-vez { animation: pulse-grande 1.6s ease-in-out infinite; }

.fade-in { animation: fade .25s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: none; } }

.skeleton {
  background: linear-gradient(90deg, #F1F5F9 0%, #E2E8F0 50%, #F1F5F9 100%);
  background-size: 200% 100%;
  animation: skel 1.2s linear infinite;
  border-radius: 10px;
}
@keyframes skel { 0%{background-position:0% 0;} 100%{background-position:-200% 0;} }