/* ============================================================
   AVALIACAO OPERACIONAL — CSS DO QUIZ DE QUALIFICACAO
   ============================================================ */

/* ============================================================
   HERO MINI
   ============================================================ */
.diag-hero{padding:calc(64px + 48px) 0 0;text-align:center;background:var(--bg);}
.diag-hero .label{display:block;margin-bottom:10px;}
.diag-hero h1{font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-1.2px;color:var(--navy);margin-bottom:8px;}
.diag-hero p{font-size:15px;color:var(--text-secondary);line-height:1.6;max-width:520px;margin:0 auto;}

/* Badge (tempo estimado — inside progress meta) */
.diag-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--r-pill);background:var(--accent-bg);border:1px solid var(--accent-border);font-size:11px;font-weight:600;color:var(--accent);white-space:nowrap;}
.diag-badge svg{flex-shrink:0;}

/* ============================================================
   QUIZ CONTAINER
   ============================================================ */
.diag-section{padding:32px 0 var(--section-py);background:var(--bg);min-height:calc(100vh - 64px);}

.diag-card{max-width:820px;width:100%;margin:0 auto;background:var(--white);border:1px solid var(--border-light);border-radius:var(--r-lg);box-shadow:var(--shadow-md);overflow:hidden;}

/* ============================================================
   PROGRESS BAR + DOTS
   ============================================================ */
.diag-progress{padding:24px 32px 0;}

/* Track container (bar + dots) */
.diag-progress-track{position:relative;padding:6px 0;}
.diag-progress-bar{height:3px;background:var(--border-light);border-radius:2px;}
.diag-progress-fill{height:100%;background:var(--accent);border-radius:2px;transition:width 0.4s ease;width:0%;}

/* Step dots */
.diag-progress-dots{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);display:flex;justify-content:space-between;pointer-events:none;}
.diag-dot{width:28px;height:28px;border-radius:50%;background:var(--white);border:2px solid var(--border);transition:all 0.3s ease;box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif;font-size:11px;font-weight:700;color:var(--text-tertiary);}
.diag-dot.done{background:var(--accent);border-color:var(--accent);color:#fff;}
.diag-dot.current{box-shadow:0 0 0 3px rgba(37,99,235,0.15);}

/* Meta row (label + badge) */
.diag-progress-meta{display:flex;align-items:center;justify-content:space-between;margin-top:10px;}
.diag-progress-label{font-size:12px;font-weight:600;color:var(--text-tertiary);}

/* ============================================================
   STEPS
   ============================================================ */
.diag-steps-wrapper{position:relative;overflow:hidden;}

.diag-step{padding:32px 32px 24px;display:none;}
.diag-step.active{display:block;animation:diagFadeIn 0.3s ease;}

@keyframes diagFadeIn{
  from{opacity:0;transform:translateX(30px);}
  to{opacity:1;transform:translateX(0);}
}

.diag-step h3{font-family:'Outfit',sans-serif;font-size:22px;font-weight:700;color:var(--navy);letter-spacing:-0.4px;margin-bottom:6px;line-height:1.25;}
.diag-step .diag-subtitle{font-size:14px;color:var(--text-secondary);line-height:1.6;margin-bottom:24px;}

/* ============================================================
   FORM INPUTS
   ============================================================ */
.diag-field{margin-bottom:18px;}
.diag-label{display:block;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:6px;}

/* Required / Optional indicators */
.diag-req{color:var(--rose);font-weight:700;}
.diag-opt{color:var(--text-tertiary);font-weight:400;font-size:12px;}

.diag-input{display:block;width:100%;padding:13px 16px;border:1.5px solid var(--border);border-radius:var(--r-md);font-family:'Source Sans 3',sans-serif;font-size:15px;color:var(--text-primary);background:var(--white);transition:all 0.2s;outline:none;box-sizing:border-box;}
.diag-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,0.08);}
.diag-input.error{border-color:var(--rose);}
.diag-input::placeholder{color:var(--text-tertiary);}

.diag-error{font-size:12px;color:var(--rose);margin-top:4px;display:none;}
.diag-error.show{display:block;}

/* Row layout (2 columns side-by-side) */
.diag-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
.diag-row .diag-field{margin-bottom:16px;}

/* ============================================================
   OPTION CARDS (radio-style)
   ============================================================ */
.diag-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.diag-options--2col{grid-template-columns:repeat(2,1fr);}
.diag-options--1col{grid-template-columns:1fr;}

.diag-option{padding:16px 14px;border:1.5px solid var(--border);border-radius:var(--r);cursor:pointer;transition:all 0.2s ease;text-align:center;background:var(--white);position:relative;}
.diag-option:hover{border-color:var(--accent-border);box-shadow:var(--shadow-xs);}
.diag-option.selected{border-color:var(--accent);background:var(--accent-bg);box-shadow:0 0 0 3px rgba(37,99,235,0.08);}

/* SVG icons in option cards */
.diag-option-icon{margin-bottom:6px;line-height:1;display:flex;align-items:center;justify-content:center;}
.diag-option-icon svg{width:22px;height:22px;stroke:var(--navy);flex-shrink:0;}
.diag-option.selected .diag-option-icon svg{stroke:var(--accent);}

.diag-option-label{font-size:14px;font-weight:600;color:var(--navy);line-height:1.3;}
.diag-option-desc{font-size:12px;color:var(--text-tertiary);line-height:1.4;margin-top:3px;}

/* Card com label + desc (maturidade, urgencia, desafio) */
.diag-option--rich{text-align:left;padding:18px 20px;display:flex;align-items:flex-start;gap:14px;}
.diag-option--rich .diag-option-check{width:20px;height:20px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;align-self:center;transition:all 0.2s;display:flex;align-items:center;justify-content:center;}
.diag-option--rich.selected .diag-option-check{border-color:var(--accent);background:var(--accent);}
.diag-option--rich.selected .diag-option-check::after{content:'';width:8px;height:8px;border-radius:50%;background:white;}
.diag-option--rich .diag-option-text{flex:1;}
.diag-option--rich .diag-option-label{font-size:15px;}

/* Multi-select: square checkbox instead of radio circle */
[data-multi="true"] .diag-option--rich .diag-option-check{border-radius:4px;}
[data-multi="true"] .diag-option--rich.selected .diag-option-check::after{width:10px;height:10px;border-radius:2px;background:none;border:none;}
[data-multi="true"] .diag-option--rich.selected .diag-option-check{position:relative;}
[data-multi="true"] .diag-option--rich.selected .diag-option-check::after{content:'';width:5px;height:9px;border:solid white;border-width:0 2px 2px 0;border-radius:0;background:transparent;transform:rotate(45deg);margin-top:-2px;}

/* Rich option with SVG icon box (setor cards — matches header dropdown dd-icon) */
.diag-option--rich .diag-option-icon{margin-bottom:0;flex-shrink:0;width:40px;height:40px;border-radius:var(--r);background:#eff6ff;display:flex;align-items:center;justify-content:center;align-self:center;transition:background 0.2s;}
.diag-option--rich .diag-option-icon svg{width:20px;height:20px;}
.diag-option--rich.selected .diag-option-icon{background:var(--accent-bg);}

/* Referrer auto-select notice */
.diag-referrer-notice{display:none;align-items:center;gap:8px;padding:10px 14px;margin-bottom:16px;border-radius:var(--r);background:var(--accent-bg);border:1px solid var(--accent-border);font-size:13px;color:var(--text-secondary);line-height:1.4;}
.diag-referrer-notice.show{display:flex;}
.diag-referrer-notice svg{flex-shrink:0;stroke:var(--accent);}
.diag-referrer-notice b{color:var(--navy);font-weight:600;}

/* Micro-recompensa (preview insight) */
.diag-reward{text-align:center;}
.diag-reward-icon{margin:0 auto 16px;width:56px;height:56px;border-radius:50%;background:var(--accent-bg);display:flex;align-items:center;justify-content:center;}
.diag-reward h3{margin-bottom:20px;}
.diag-reward-box{text-align:left;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);padding:20px 24px;margin-bottom:16px;}
.diag-reward-box-title{font-size:14px;font-weight:600;color:var(--navy);margin-bottom:12px;}
.diag-reward-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
.diag-reward-list li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--text-secondary);line-height:1.5;}
.diag-reward-list li::before{content:'\2714';color:var(--accent);font-weight:700;flex-shrink:0;margin-top:1px;}
.diag-reward-stat{padding:14px 18px;border-radius:var(--r);background:#eff6ff;border:1px solid var(--accent-border);font-size:13px;color:var(--text-secondary);line-height:1.5;margin-bottom:20px;}
.diag-reward-stat strong{color:var(--navy);font-weight:700;}
.diag-reward-cta{font-size:14px;color:var(--text-tertiary);font-style:italic;}

/* Campo "Outro" condicional */
.diag-other-field{margin-top:12px;display:none;}
.diag-other-field.show{display:block;}

/* ============================================================
   NAVIGATION BUTTONS
   ============================================================ */
.diag-nav{padding:0 32px 28px;display:flex;justify-content:space-between;align-items:center;gap:12px;}

.diag-back{display:inline-flex;align-items:center;gap:6px;font-family:'Source Sans 3',sans-serif;font-size:14.5px;font-weight:600;color:var(--text-secondary);padding:11.5px 20px;border-radius:var(--r-md);border:1.5px solid var(--border);background:var(--white);cursor:pointer;transition:all 0.2s;}
.diag-back:hover{border-color:var(--text-tertiary);color:var(--navy);}
.diag-back svg{width:16px;height:16px;}

.diag-next{display:inline-flex;align-items:center;gap:8px;font-family:'Source Sans 3',sans-serif;font-size:14.5px;font-weight:600;color:var(--text-inverse);padding:13px 28px;border-radius:var(--r-md);border:none;background:var(--navy);cursor:pointer;transition:all 0.2s;margin-left:auto;}
.diag-next:hover:not(:disabled){background:var(--slate);transform:translateY(-1px);box-shadow:var(--shadow-md);}
.diag-next:disabled{opacity:0.35;cursor:not-allowed;transform:none;box-shadow:none;}
.diag-next svg{width:16px;height:16px;}

/* ============================================================
   DONE / CAL.COM EMBED
   ============================================================ */
.diag-done{text-align:center;padding:40px 32px 8px;}
.diag-done-icon{width:64px;height:64px;border-radius:50%;background:var(--green-bg);border:2px solid var(--green-border);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.diag-done-icon svg{width:32px;height:32px;stroke:var(--green);stroke-width:2.5;fill:none;}
.diag-done h3{font-family:'Outfit',sans-serif;font-size:22px;font-weight:700;color:var(--navy);margin-bottom:6px;}
.diag-done p{font-size:14px;color:var(--text-secondary);line-height:1.6;max-width:400px;margin:0 auto;}

.diag-cal-embed{min-height:480px;margin:24px 0 16px;border-radius:var(--r-md);overflow:auto;width:100%;}

/* Fallback se Cal.com nao carregar */
.diag-fallback{padding:24px;text-align:center;display:none;}
.diag-fallback.show{display:block;}
.diag-fallback a{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;background:var(--accent);color:white;border-radius:var(--r-md);font-weight:700;font-family:'Outfit',sans-serif;font-size:15px;transition:all 0.2s;text-decoration:none;}
.diag-fallback a:hover{background:var(--accent-hover);transform:translateY(-1px);}

/* ============================================================
   LOADING SPINNER
   ============================================================ */
.diag-loading{display:none;align-items:center;justify-content:center;gap:10px;padding:16px;font-size:14px;color:var(--text-tertiary);}
.diag-loading.show{display:flex;}
.diag-spinner{width:20px;height:20px;border:2.5px solid var(--border-light);border-top-color:var(--accent);border-radius:50%;animation:diagSpin 0.7s linear infinite;}
@keyframes diagSpin{to{transform:rotate(360deg);}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  .diag-options{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:600px){
  .diag-hero h1{font-size:24px;letter-spacing:-0.5px;}
  .diag-section{padding-left:16px;padding-right:16px;}
  .diag-card{border-radius:var(--r);margin:0 auto;box-shadow:var(--shadow-sm);}
  .diag-step{padding:24px 20px 18px;}
  .diag-step h3{font-size:19px;}
  .diag-progress{padding:20px 20px 0;}
  .diag-badge{display:none;}
  .diag-nav{padding:0 20px 22px;}
  .diag-options{grid-template-columns:1fr 1fr;}
  .diag-options--1col{grid-template-columns:1fr;}
  .diag-options--2col{grid-template-columns:1fr;}
  .diag-row{grid-template-columns:1fr;gap:0;}
  .diag-done{padding:32px 20px 8px;}
  .diag-cal-embed{margin:16px 0 8px;}
}

@media(max-width:400px){
  .diag-options{grid-template-columns:1fr;}
}

/* ============================================================
   QUIZ OVERLAY
   ============================================================ */
.quiz-overlay{position:fixed;inset:0;z-index:9999;display:none;flex-direction:column;align-items:stretch;}
.quiz-overlay.open{display:flex;}

/* Backdrop */
.quiz-overlay__backdrop{position:absolute;inset:0;background:#fff;}
.quiz-overlay.open .quiz-overlay__backdrop{animation:qoFadeIn 0.25s ease forwards;}
.quiz-overlay.closing .quiz-overlay__backdrop{animation:qoFadeOut 0.2s ease forwards;}

/* Container */
.quiz-overlay__container{position:relative;z-index:1;max-width:860px;width:100%;margin:0 auto;flex:1;overflow-y:auto;padding:0 24px;scrollbar-width:none;-ms-overflow-style:none;}
.quiz-overlay__header{position:relative;z-index:2;left:0;right:0;width:100%;background:#f8f9fc;border-bottom:1px solid var(--border-light);}
.quiz-overlay__header-inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--pad);height:64px;display:flex;align-items:center;justify-content:center;}
.quiz-overlay__container::-webkit-scrollbar{display:none;}
.quiz-overlay.open .quiz-overlay__container{animation:qoSlideUp 0.3s ease forwards;}
.quiz-overlay.closing .quiz-overlay__container{animation:qoSlideDown 0.2s ease forwards;}

/* Intro screen */
.quiz-intro{display:flex;align-items:center;justify-content:center;min-height:80vh;text-align:center;padding:48px 24px;}
.quiz-intro__content{max-width:680px;display:flex;flex-direction:column;align-items:center;}
.quiz-intro__label{display:block;font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:16px;}
.quiz-intro__headline{font-family:'Outfit',sans-serif;font-size:clamp(26px,4vw,38px);font-weight:700;color:var(--navy);line-height:1.3;letter-spacing:-0.5px;margin-bottom:12px;}
.quiz-intro__subtitle{font-family:'Source Sans 3',sans-serif;font-size:15px;color:var(--text-secondary);line-height:1.6;margin-bottom:28px;}
.quiz-intro .diag-badge{margin-top:24px;margin-bottom:0;}
.quiz-intro__btn{display:inline-flex;align-items:center;gap:8px;font-family:'Source Sans 3',sans-serif;font-size:14.5px;font-weight:600;color:#fff;background:var(--navy);padding:13px 28px;border-radius:var(--r-md);border:none;cursor:pointer;transition:all 0.2s;}
.quiz-intro__btn:hover{background:var(--slate);transform:translateY(-1px);box-shadow:var(--shadow-md);}
.quiz-intro__btn svg{width:16px;height:16px;}

/* Override card styles inside overlay */
.quiz-overlay .diag-card{box-shadow:none;border:none;overflow:visible;padding:0 32px;}
.quiz-overlay .diag-nav{padding-left:0;padding-right:0;}
.quiz-overlay .diag-step{padding:32px 0 24px;}

/* Sticky progress bar inside overlay */
.quiz-overlay .diag-progress{position:sticky;top:0;z-index:3;background:#fff;padding:40px 0 16px;border-bottom:1px solid var(--border-light);}

/* Progress logo */
.diag-progress-logo{height:36px;width:auto;margin-bottom:12px;display:block;}

/* Progress title */
.diag-progress-title{font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:6px;}
.diag-progress-subtitle{font-family:'Source Sans 3',sans-serif;font-size:13px;color:var(--text-tertiary);margin-bottom:20px;}

/* Close button */
.quiz-overlay__close{position:fixed;top:12px;right:var(--pad);z-index:10001;width:40px;height:40px;border-radius:50%;border:none;background:var(--navy);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;color:#fff;box-shadow:none;}
.quiz-overlay__close:hover{background:#1a2a44;transform:scale(1.08);}
.quiz-overlay__close svg{width:18px;height:18px;pointer-events:none;}

/* Confirmation dialog */
.quiz-overlay__confirm{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;background:rgba(10,22,40,0.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.quiz-overlay__confirm.open{display:flex;}

.mobile-br{display:none;}
.quiz-overlay__confirm-box{position:relative;background:var(--white);border-radius:var(--r-lg);box-shadow:0 20px 40px rgba(0,0,0,0.2);padding:60px 32px;max-width:500px;width:90%;text-align:center;animation:qoSlideUp 0.2s ease;}
.quiz-overlay__confirm-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:#fff;border:2px solid var(--navy);color:var(--navy);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s;padding:0;}
.quiz-overlay__confirm-close:hover{background:var(--navy);color:#fff;}
.quiz-overlay__confirm-box p{font-family:'Source Sans 3',sans-serif;font-size:16px;color:var(--navy);line-height:1.5;margin-bottom:24px;font-weight:500;}

.quiz-overlay__confirm-actions{display:flex;gap:12px;justify-content:center;}
.quiz-overlay__confirm-stay{padding:12px 24px;border-radius:var(--r-md);border:none;background:var(--navy);color:var(--text-inverse);font-family:'Source Sans 3',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.2s;}
.quiz-overlay__confirm-stay:hover{background:var(--slate);transform:translateY(-1px);}
.quiz-overlay__confirm-exit{padding:12px 24px;border-radius:var(--r-md);border:none;background:var(--rose);color:#fff;font-family:'Source Sans 3',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.2s;}
.quiz-overlay__confirm-exit:hover{background:#b91c1c;transform:translateY(-1px);}

/* Animations */
@keyframes qoFadeIn{from{opacity:0}to{opacity:1}}
@keyframes qoFadeOut{from{opacity:1}to{opacity:0}}
@keyframes qoSlideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes qoSlideDown{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(30px)}}

/* ============================================================
   OVERLAY RESPONSIVE
   ============================================================ */
@media(max-width:600px){
  .quiz-overlay__container{padding:0;max-height:100vh;max-width:100%;}
  .quiz-overlay .diag-card{border-radius:0;min-height:100vh;box-shadow:none;}
  .quiz-overlay__close{top:12px;right:12px;width:36px;height:36px;}
  .quiz-overlay .diag-progress{top:0;padding-top:16px;}
  .quiz-overlay .diag-badge{display:inline-flex;}
  .quiz-overlay__confirm-box{padding:24px 20px;border-radius:var(--r);margin:0 16px;}
  .quiz-overlay__confirm-actions{flex-direction:column;}
  .desktop-br{display:none;}
  .mobile-br{display:inline;}
}