/* =========================================================================
   Autômato Validador de Senhas — Folha de estilos
   Sistema visual: "painel de máquina" — cada classe de caractere (minúscula,
   maiúscula, número, especial) tem uma cor fixa, usada de forma consistente
   no campo de entrada, no reticulado de estados, na cadeia de comprimento
   e no log de execução. Essa é a assinatura visual da página.
   ========================================================================= */

:root{
  /* superfícies */
  --bg:        #10131A;
  --bg-grid:   #151926;
  --panel:     #1A1F2B;
  --panel-alt: #212736;
  --border:    #2B3142;
  --border-soft: #232838;

  /* texto */
  --text:       #E8EAF0;
  --text-muted: #8C93A6;
  --text-dim:   #5C6478;

  /* cores das classes de caractere — assinatura do projeto */
  --c-min: #4FD1C5; /* minúscula  */
  --c-mai: #F2B84B; /* maiúscula  */
  --c-num: #5B9DF2; /* número     */
  --c-esp: #B084F2; /* especial   */

  --c-ok:  #79D77D;
  --c-err: #F2615C;

  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: 'IBM Plex Sans', -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  --radius: 10px;
  --radius-sm: 6px;
}

*{ box-sizing: border-box; }

html, body{
  margin:0;
  padding:0;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
}

a{ color: var(--c-num); }

/* ---------- barra superior ---------- */
.topbar{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:6px 18px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--border);
  background: rgba(16,19,26,0.85);
  backdrop-filter: blur(4px);
  position: sticky;
  top:0;
  z-index: 20;
}
.topbar .marca{
  font-family: var(--mono);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.02em;
}
.topbar .marca .ponto{ color: var(--c-num); }
.topbar .subtitulo{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

/* ---------- layout geral ---------- */
.envelope{
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 28px 64px;
}

.layout{
  display:grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 22px;
  align-items:start;
}
@media (max-width: 900px){
  .layout{ grid-template-columns: 1fr; }
}

.panel{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.panel + .panel{ margin-top: 18px; }

.panel-titulo{
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 14px;
  display:flex;
  align-items:center;
  gap: 8px;
}
.panel-titulo .traco{
  flex:1;
  height:1px;
  background: var(--border);
}

/* ---------- console de entrada ---------- */
.console-row{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}
.console-prompt{
  font-family: var(--mono);
  color: var(--c-num);
  font-size: 18px;
  user-select:none;
}
#campo-senha{
  flex:1 1 260px;
  min-width: 200px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--mono);
  font-size: 16px;
  padding: 11px 12px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#campo-senha:focus-visible{
  border-color: var(--c-num);
  box-shadow: 0 0 0 3px rgba(91,157,242,0.25);
}
#campo-senha::placeholder{ color: var(--text-dim); }

.ajuda-texto{
  font-size: 12.5px;
  color: var(--text-dim);
  margin-top: 8px;
}

.botoes-row{
  display:flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.btn{
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  padding: 9px 16px;
  cursor:pointer;
  background: var(--panel-alt);
  color: var(--text);
  transition: transform .08s ease, border-color .15s ease, background .15s ease;
}
.btn:hover{ border-color: var(--text-dim); }
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn:focus-visible{ outline: 2px solid var(--c-num); outline-offset: 2px; }

.btn-primario{
  background: var(--c-num);
  color: #0C1320;
  border-color: var(--c-num);
  font-weight:600;
}
.btn-primario:hover{ background:#73AAF4; }

.btn-fantasma{
  background: transparent;
}

/* ---------- controles (velocidade / modo manual) ---------- */
.controles{
  display:flex;
  align-items:center;
  gap: 22px;
  margin-top: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-muted);
}
.controle-grupo{
  display:flex;
  align-items:center;
  gap: 8px;
}
.controle-grupo label{ font-family: var(--mono); font-size: 12px; }

input[type="range"]{
  width: 130px;
  accent-color: var(--c-num);
}

.chave{
  position:relative;
  width: 38px;
  height: 21px;
  display:inline-block;
}
.chave input{ opacity:0; width:0; height:0; position:absolute; }
.chave-trilho{
  position:absolute; inset:0;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background .15s ease;
  cursor:pointer;
}
.chave-trilho::before{
  content:"";
  position:absolute;
  width:15px; height:15px;
  left:2px; top:2px;
  border-radius:50%;
  background: var(--text-dim);
  transition: transform .15s ease, background .15s ease;
}
.chave input:checked + .chave-trilho{ border-color: var(--c-num); }
.chave input:checked + .chave-trilho::before{
  transform: translateX(16px);
  background: var(--c-num);
}

/* ---------- diagramas SVG ---------- */
.diagrama-wrap{ width:100%; overflow-x:auto; }
.diagrama-wrap svg{ width:100%; height:auto; display:block; }

.no-estado circle{
  fill: var(--panel-alt);
  stroke: var(--border);
  stroke-width: 1.5;
  transition: fill .25s ease, stroke .25s ease, filter .25s ease;
}
.no-estado text{
  font-family: var(--mono);
  fill: var(--text-muted);
  font-size: 11px;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events:none;
}
.no-estado.visitado circle{ stroke: var(--text-dim); fill:#232A3B; }
.no-estado.visitado text{ fill: var(--text); }

.no-estado.ativo circle{
  fill: #20364A;
  stroke: var(--c-num);
  filter: drop-shadow(0 0 6px rgba(91,157,242,0.65));
}
.no-estado.ativo text{ fill: #fff; font-weight:600; }

.no-estado.aceito circle{
  fill: #1E3A20;
  stroke: var(--c-ok);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 8px rgba(121,215,125,0.6));
}

.aresta{
  stroke: var(--border);
  stroke-width: 1.4;
  fill:none;
  opacity: .55;
}
.aresta.pulso{
  opacity: 1;
  stroke-width: 2.6;
  animation: pulsoLinha .55s ease-out;
}
@keyframes pulsoLinha{
  from{ stroke-dashoffset: 14; }
  to{ stroke-dashoffset: 0; }
}

.no-estado.self-pulso circle{
  animation: pingNo .5s ease-out;
}
@keyframes pingNo{
  0%{ filter: drop-shadow(0 0 0 rgba(91,157,242,0)); }
  40%{ filter: drop-shadow(0 0 10px rgba(91,157,242,0.9)); }
  100%{ filter: drop-shadow(0 0 0 rgba(91,157,242,0)); }
}

@media (prefers-reduced-motion: reduce){
  .aresta.pulso, .no-estado.self-pulso circle{ animation:none; }
}

.legenda-classes{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-muted);
}
.legenda-item{ display:flex; align-items:center; gap:6px; }
.legenda-ponto{ width:9px; height:9px; border-radius:50%; display:inline-block; }

/* ---------- log de execução ---------- */
.log{
  height: 230px;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.log:empty::before{
  content: "Aguardando execução…";
  color: var(--text-dim);
}
.log-linha{
  display:flex;
  gap:8px;
  align-items:baseline;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border-soft);
}
.log-linha:last-child{ border-bottom:none; }
.log-indice{ color: var(--text-dim); width: 22px; flex:0 0 auto; }
.log-char{
  display:inline-flex;
  min-width: 20px;
  justify-content:center;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--panel-alt);
  color: var(--text);
  font-weight:600;
}
.log-seta{ color: var(--text-dim); }
.log-estado{ color: var(--text-muted); }

.badge{
  font-family: var(--mono);
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight:600;
}
.badge-min{ background: rgba(79,209,197,0.15); color: var(--c-min); }
.badge-mai{ background: rgba(242,184,75,0.15); color: var(--c-mai); }
.badge-num{ background: rgba(91,157,242,0.15); color: var(--c-num); }
.badge-esp{ background: rgba(176,132,242,0.15); color: var(--c-esp); }

/* ---------- definição formal ---------- */
.formal-grid{
  display:grid;
  gap: 10px;
  font-size: 13px;
}
.formal-item{
  display:grid;
  grid-template-columns: 86px 1fr;
  gap: 10px;
  align-items:start;
}
.formal-rotulo{
  font-family: var(--mono);
  color: var(--text-muted);
  font-size: 12px;
  padding-top:2px;
}
.formal-valor{
  font-family: var(--mono);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  overflow-x:auto;
  white-space: pre;
}
.alfabeto-lista{ display:flex; flex-direction:column; gap:6px; }
.alfabeto-lista span b{ color: var(--text); }

/* ---------- força e resultado ---------- */
.medidor{
  height: 8px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  overflow:hidden;
  margin-top: 8px;
}
.medidor-barra{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--c-err), var(--c-mai), var(--c-ok));
  transition: width .4s ease;
}
.medidor-legenda{
  display:flex;
  justify-content:space-between;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}

.resultado-banner{
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 13.5px;
  display:none;
}
.resultado-banner.mostrar{ display:block; }
.resultado-banner.aceita{
  border-color: var(--c-ok);
  background: rgba(121,215,125,0.08);
  color: var(--c-ok);
}
.resultado-banner.rejeitada{
  border-color: var(--c-err);
  background: rgba(242,97,92,0.08);
  color: var(--c-err);
}
.faltando-lista{
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--text-muted);
  font-family: var(--sans);
  font-size: 13px;
}

/* ---------- rodapé ---------- */
.rodape{
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-dim);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap: 8px;
}