/* Galileo Hub | diagnostico.css | v1.2 | 2026-06-25 | + bloco de sinais (SEO on-page, HTTPS, tecnologia) */
/* Popover da ferramenta "Check seu Site" (FERR-002) */
/* Reaproveita os tokens de :root do main.css (--bg, --fg, --ciano, --laranja, --azul, --muted, --border) */

/* ===== OVERLAY (desfoca o site atras) ===== */
.diag-overlay{display:none;position:fixed;inset:0;z-index:9100;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);align-items:center;justify-content:center;padding:2rem}
.diag-overlay.open{display:flex}

/* ===== MODAL (vidro fosco) ===== */
.diag-modal{position:relative;width:100%;max-width:620px;max-height:90vh;background:rgba(15,17,23,0.55);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);border:1px solid rgba(240,237,230,0.12);border-radius:20px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,0.5)}

/* ===== HEADER ===== */
.diag-header{padding:1.75rem 2rem 1.25rem;border-bottom:1px solid rgba(240,237,230,0.08);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.diag-header-title{display:flex;align-items:center;gap:0.65rem;font-family:"Instrument Sans",sans-serif;font-size:1rem;font-weight:600;color:var(--fg);letter-spacing:-0.01em}
.diag-header-title svg{color:var(--ciano)}
.diag-close{width:32px;height:32px;border-radius:50%;background:rgba(240,237,230,0.08);border:none;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;flex-shrink:0}
.diag-close:hover{background:rgba(240,237,230,0.15);color:var(--fg)}

/* ===== BODY (estados) ===== */
.diag-body{overflow-y:auto;padding:2rem;flex:1;scrollbar-width:thin;scrollbar-color:rgba(240,237,230,0.15) transparent}
.diag-body::-webkit-scrollbar{width:4px}
.diag-body::-webkit-scrollbar-thumb{background:rgba(240,237,230,0.15);border-radius:4px}
.diag-state{display:none}
.diag-state.active{display:block;animation:diagFade 0.4s ease}
@keyframes diagFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ===== ESTADO 1: FORMULARIO ===== */
.diag-intro{font-size:0.92rem;color:var(--muted);line-height:1.7;margin-bottom:1.75rem}
.diag-intro strong{color:var(--fg)}
.diag-field{margin-bottom:1.1rem}
.diag-label{display:block;font-family:"JetBrains Mono",monospace;font-size:0.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.5rem}
.diag-input{width:100%;background:rgba(240,237,230,0.04);border:1px solid rgba(240,237,230,0.12);border-radius:10px;padding:0.85rem 1rem;color:var(--fg);font-family:"Instrument Sans",sans-serif;font-size:0.95rem;transition:all 0.2s}
.diag-input::placeholder{color:rgba(240,237,230,0.3)}
.diag-input:focus{outline:none;border-color:var(--ciano);background:rgba(0,162,183,0.06)}
.diag-input.diag-url{font-size:1.05rem;font-family:"JetBrains Mono",monospace;padding:1rem}
.diag-field-url .diag-label{color:var(--ciano)}
.diag-error{font-size:0.78rem;color:#ff6b6b;margin-top:0.4rem;min-height:1rem}
.diag-row{display:flex;gap:0.75rem}
.diag-row .diag-field{flex:1}
.diag-submit{width:100%;background:var(--fg);color:var(--bg);border:none;padding:1rem;border-radius:100px;font-family:"Instrument Sans",sans-serif;font-weight:600;font-size:1rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;transition:all 0.25s;margin-top:0.5rem}
.diag-submit:hover{background:var(--laranja);transform:translateY(-2px)}
.diag-submit:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.diag-privacy-note{font-size:0.72rem;color:rgba(240,237,230,0.3);text-align:center;margin-top:1rem;line-height:1.5}
.diag-privacy-note a{color:var(--ciano);text-decoration:none}

/* ===== ESTADO 2: ANALISANDO ===== */
.diag-analyzing{text-align:center;padding:1.5rem 0}
.diag-countdown-ring{position:relative;width:140px;height:140px;margin:0 auto 1.75rem}
.diag-countdown-ring svg{transform:rotate(-90deg)}
.diag-ring-bg{fill:none;stroke:rgba(240,237,230,0.08);stroke-width:6}
.diag-ring-fg{fill:none;stroke:var(--ciano);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.diag-countdown-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"JetBrains Mono",monospace;font-size:2.4rem;font-weight:500;color:var(--fg)}
.diag-analyzing-title{font-family:"Instrument Sans",sans-serif;font-size:1.3rem;font-weight:600;color:var(--fg);margin-bottom:0.75rem;letter-spacing:-0.01em}
.diag-analyzing-msg{font-size:0.9rem;color:var(--muted);min-height:1.4rem;transition:opacity 0.3s}
.diag-analyzing-note{font-size:0.75rem;color:rgba(240,237,230,0.3);margin-top:1.5rem;line-height:1.6}

/* ===== ESTADO 3: RESULTADO ===== */
.diag-result-head{text-align:center;margin-bottom:1.75rem}
.diag-result-url{font-family:"JetBrains Mono",monospace;font-size:0.8rem;color:var(--ciano);margin-bottom:0.5rem;word-break:break-all}
.diag-result-title{font-family:"Instrument Sans",sans-serif;font-size:1.4rem;font-weight:600;color:var(--fg);letter-spacing:-0.01em}
.diag-gauges{display:grid;grid-template-columns:repeat(4,1fr);gap:0.75rem;margin-bottom:1.75rem}
.diag-gauge{text-align:center}
.diag-gauge-ring{position:relative;width:72px;height:72px;margin:0 auto 0.6rem}
.diag-gauge-ring svg{transform:rotate(-90deg)}
.diag-gauge-bg{fill:none;stroke:rgba(240,237,230,0.08);stroke-width:6}
.diag-gauge-fg{fill:none;stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset 1.2s cubic-bezier(0.22,1,0.36,1)}
.diag-gauge-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"JetBrains Mono",monospace;font-size:1.1rem;font-weight:500;color:var(--fg)}
.diag-gauge-label{font-size:0.68rem;color:var(--muted);font-family:"JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:0.04em;line-height:1.3}
/* cores do semaforo */
.diag-verde{stroke:#3fcf8e}
.diag-amarelo{stroke:var(--laranja)}
.diag-vermelho{stroke:#ff6b6b}
.diag-cinza{stroke:rgba(240,237,230,0.2)}
.diag-num-verde{color:#3fcf8e}
.diag-num-amarelo{color:var(--laranja)}
.diag-num-vermelho{color:#ff6b6b}

/* pior metrica em destaque */
.diag-critico{background:rgba(255,107,107,0.08);border:1px solid rgba(255,107,107,0.25);border-radius:12px;padding:1.25rem;margin-bottom:1.5rem;display:flex;gap:1rem;align-items:flex-start}
.diag-critico-icon{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:rgba(255,107,107,0.15);display:flex;align-items:center;justify-content:center;color:#ff6b6b}
.diag-critico-content{flex:1}
.diag-critico-label{font-family:"JetBrains Mono",monospace;font-size:0.68rem;color:#ff6b6b;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.35rem}
.diag-critico-title{font-family:"Instrument Sans",sans-serif;font-size:1rem;font-weight:600;color:var(--fg);margin-bottom:0.25rem}
.diag-critico-value{font-family:"JetBrains Mono",monospace;font-size:0.85rem;color:var(--muted)}

/* variante ATENCAO (amarelo/laranja) */
.diag-critico.diag-atencao{background:rgba(242,164,0,0.08);border-color:rgba(242,164,0,0.25)}
.diag-critico.diag-atencao .diag-critico-icon{background:rgba(242,164,0,0.15);color:var(--laranja)}
.diag-critico.diag-atencao .diag-critico-label{color:var(--laranja)}

/* credito da fonte */
.diag-fonte{font-family:"JetBrains Mono",monospace;font-size:0.66rem;color:rgba(240,237,230,0.3);text-align:center;margin-bottom:1.5rem;letter-spacing:0.03em}

/* estado site saudavel (sem alerta) */
.diag-saudavel{background:rgba(63,207,142,0.08);border:1px solid rgba(63,207,142,0.25);border-radius:12px;padding:1.25rem;margin-bottom:1.5rem;display:flex;gap:1rem;align-items:flex-start}
.diag-saudavel-icon{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:rgba(63,207,142,0.15);display:flex;align-items:center;justify-content:center;color:#3fcf8e}
.diag-saudavel-content{flex:1}
.diag-saudavel-label{font-family:"JetBrains Mono",monospace;font-size:0.68rem;color:#3fcf8e;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.35rem}
.diag-saudavel-title{font-family:"Instrument Sans",sans-serif;font-size:1rem;font-weight:600;color:var(--fg)}

.diag-cta-block{background:var(--azul);border-radius:14px;padding:1.5rem;text-align:center}
.diag-cta-title{font-family:"Instrument Sans",sans-serif;font-size:1.1rem;font-weight:700;color:#fff;margin-bottom:0.5rem}
.diag-cta-sub{font-size:0.85rem;color:rgba(255,255,255,0.65);margin-bottom:1.25rem;line-height:1.6}
.diag-cta-btn{display:inline-flex;align-items:center;gap:0.5rem;background:var(--laranja);color:var(--azul);padding:0.85rem 2rem;border-radius:100px;font-family:"Instrument Sans",sans-serif;font-weight:700;font-size:0.95rem;text-decoration:none;transition:all 0.2s}
.diag-cta-btn:hover{background:#fff;transform:translateY(-2px)}

/* ===== ESTADO ERRO ===== */
.diag-fail{text-align:center;padding:2rem 0}
.diag-fail-icon{width:56px;height:56px;border-radius:50%;background:rgba(255,107,107,0.12);display:flex;align-items:center;justify-content:center;color:#ff6b6b;margin:0 auto 1.25rem}
.diag-fail-title{font-family:"Instrument Sans",sans-serif;font-size:1.2rem;font-weight:600;color:var(--fg);margin-bottom:0.6rem}
.diag-fail-msg{font-size:0.9rem;color:var(--muted);line-height:1.65;margin-bottom:1.5rem}

/* ===== DROPDOWN FERRAMENTAS (no header) ===== */
.nav-tools{position:relative}
.nav-tools-trigger{background:none;border:none;color:var(--muted);font-family:"Instrument Sans",sans-serif;font-size:0.875rem;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:0.35rem;transition:color 0.2s;padding:0}
.nav-tools-trigger:hover,.nav-tools.open .nav-tools-trigger{color:var(--fg)}
.nav-tools-trigger svg{transition:transform 0.25s}
.nav-tools.open .nav-tools-trigger svg{transform:rotate(180deg)}
.nav-tools-menu{position:absolute;top:calc(100% + 0.75rem);left:50%;transform:translateX(-50%) translateY(-8px);min-width:230px;background:rgba(15,17,23,0.85);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(240,237,230,0.12);border-radius:14px;padding:0.5rem;opacity:0;visibility:hidden;transition:all 0.25s;box-shadow:0 16px 48px rgba(0,0,0,0.4)}
.nav-tools.open .nav-tools-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-tool-item{display:flex;align-items:center;gap:0.75rem;width:100%;text-align:left;background:none;border:none;padding:0.75rem 0.85rem;border-radius:9px;color:var(--fg);font-family:"Instrument Sans",sans-serif;font-size:0.88rem;cursor:pointer;transition:background 0.2s;text-decoration:none}
.nav-tool-item:hover{background:rgba(240,237,230,0.06)}
.nav-tool-item.soon{opacity:0.45;cursor:default}
.nav-tool-item.soon:hover{background:none}
.nav-tool-icon{flex-shrink:0;width:32px;height:32px;border-radius:8px;background:rgba(0,162,183,0.12);display:flex;align-items:center;justify-content:center;color:var(--ciano)}
.nav-tool-text{display:flex;flex-direction:column;gap:0.1rem}
.nav-tool-name{font-weight:500}
.nav-tool-desc{font-size:0.72rem;color:var(--muted)}
.nav-tool-badge{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:0.6rem;color:var(--laranja);text-transform:uppercase;letter-spacing:0.05em;border:1px solid rgba(242,164,0,0.3);border-radius:4px;padding:0.1rem 0.35rem}

/* ===== BLOCO DE SINAIS (SEO on-page, HTTPS, tecnologia) ===== */
.diag-sinais{display:flex;flex-direction:column;gap:0.6rem;margin-bottom:1.5rem}
.diag-sinal{display:flex;align-items:center;gap:0.85rem;background:rgba(240,237,230,0.03);border:1px solid rgba(240,237,230,0.08);border-radius:10px;padding:0.85rem 1rem}
.diag-sinal-icon{flex-shrink:0;width:30px;height:30px;border-radius:7px;background:rgba(0,162,183,0.12);display:flex;align-items:center;justify-content:center;color:var(--ciano)}
.diag-sinal-icon-alerta{background:rgba(255,107,107,0.15);color:#ff6b6b}
.diag-sinal-texto{flex:1;display:flex;flex-direction:column;gap:0.1rem;min-width:0}
.diag-sinal-nome{font-family:"JetBrains Mono",monospace;font-size:0.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em}
.diag-sinal-valor{font-family:"Instrument Sans",sans-serif;font-size:0.92rem;color:var(--fg);font-weight:500}
/* badge do selo SEO (semaforo) */
.diag-sinal-badge{flex-shrink:0;font-family:"JetBrains Mono",monospace;font-size:0.66rem;font-weight:500;text-transform:uppercase;letter-spacing:0.05em;border-radius:6px;padding:0.25rem 0.6rem}
.diag-sinal-badge.verde{background:rgba(63,207,142,0.15);color:#3fcf8e}
.diag-sinal-badge.amarelo{background:rgba(242,164,0,0.15);color:var(--laranja)}
.diag-sinal-badge.vermelho{background:rgba(255,107,107,0.15);color:#ff6b6b}
/* HTTPS inseguro: borda de alerta no cartao */
.diag-sinal.diag-sinal-inseguro{background:rgba(255,107,107,0.06);border-color:rgba(255,107,107,0.22)}
.diag-sinal.diag-sinal-inseguro .diag-sinal-valor{color:#ff6b6b}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .diag-overlay{padding:1rem}
  .diag-modal{max-height:92vh;border-radius:16px}
  .diag-header{padding:1.25rem 1.25rem 1rem}
  .diag-body{padding:1.5rem}
  .diag-row{flex-direction:column;gap:0}
  .diag-gauges{grid-template-columns:repeat(2,1fr);gap:1.25rem}
  .diag-gauge-ring{width:80px;height:80px}
  /* no mobile, o dropdown vira lista dentro do menu aberto */
  .nav-tools{width:100%;text-align:center}
  .nav-tools-menu{position:static;transform:none;opacity:1;visibility:visible;background:none;border:none;box-shadow:none;padding:0;min-width:auto;margin-top:1.5rem}
  .nav-tools.open .nav-tools-menu{transform:none}
  .nav-tool-item{justify-content:center}
}