/* ─────────────────────────────────────────────────────────────
   COMPAT QUIZ — MODERN STYLE (shared across Buscar + Perfil)
   Applies in two contexts:
   - Buscar desktop:  inside #compat-panel-content (left sidebar)
   - Overlay surfaces: inside .pti-quiz-overlay-body (Buscar mobile and
                       Perfil fullscreen overlay, all breakpoints).
   Unified row-tile layout: text-only rows, max-width 440px, green-check
   selected state, gradient CTA. Matches /descubrir look.
   ───────────────────────────────────────────────────────────── */

.pti-quiz-overlay-body .quiz-wrap,
#compat-panel-content .quiz-wrap {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* Full-width progress bar at the top of the quiz — matches /descubrir.
   On mobile it lives just under the slim close-only overlay header; on
   desktop it's at the very top of the sidebar quiz. */
.pti-quiz-overlay-body .quiz-progress,
#compat-panel-content .quiz-progress {
    height: 6px;
    border-radius: 0;
    background: rgba(0, 0, 0, 0.05);
    margin: 0;
}
.pti-quiz-overlay-body .quiz-progress-fill,
#compat-panel-content .quiz-progress-fill {
    border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg, #2D5A3D 0%, #6ab06a 100%);
}
/* Kill the shine-sweep ::after overlay so the fill is a clean gradient */
.pti-quiz-overlay-body .quiz-progress-fill::after,
#compat-panel-content .quiz-progress-fill::after {
    display: none;
}

/* Header */
.pti-quiz-overlay-body .quiz-header,
#compat-panel-content .quiz-header {
    padding: 12px 20px 8px;
}
.pti-quiz-overlay-body .quiz-counter,
#compat-panel-content .quiz-counter {
    font-size: 12px;
    font-weight: 600;
    color: #6e7a75;
    letter-spacing: 0.02em;
}
.pti-quiz-overlay-body .quiz-back,
#compat-panel-content .quiz-back {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Content area */
.pti-quiz-overlay-body #quiz-content,
#compat-panel-content #quiz-content {
    flex: 1 1 auto;
    min-height: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}
.pti-quiz-overlay-body #quiz-content {
    padding: 0 0 calc(16px + env(safe-area-inset-bottom, 0px));
}

/* Body — title pinned to top, options fill remainder */
.pti-quiz-overlay-body .quiz-body,
#compat-panel-content .quiz-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 8px 20px 16px;
    min-height: 0;
    gap: 0;
}
.pti-quiz-overlay-body .quiz-question,
#compat-panel-content .quiz-question {
    font-family: 'Sora', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.01em;
    color: #1a2e22;
    margin: 4px 0 20px;
    text-align: left;
}
.pti-quiz-overlay-body .quiz-hint,
#compat-panel-content .quiz-hint {
    font-size: 15px;
    line-height: 1.45;
    color: #5e6c66;
    margin: -14px 0 16px;
}

/* Options container — scrolls internally on overflow so footer stays visible */
.pti-quiz-overlay-body .quiz-options,
#compat-panel-content .quiz-options {
    flex: 1 1 auto;
    min-height: 0;
}

/* When extra-opts exist alongside the main options, constrain the options
   to natural height so the extra-opts sit right below the tiles (not
   orphaned at the bottom of a stretched options area). */
.pti-quiz-overlay-body .quiz-body:has(.quiz-extra-opt) > .quiz-options,
#compat-panel-content .quiz-body:has(.quiz-extra-opt) > .quiz-options {
    flex: 0 0 auto;
    overflow-y: visible;
}
.pti-quiz-overlay-body .quiz-options.quiz-type-tile-single.quiz-grid-2col,
.pti-quiz-overlay-body .quiz-options.quiz-type-chip-multi,
.pti-quiz-overlay-body .quiz-options.quiz-type-grid-multi,
.pti-quiz-overlay-body .quiz-options.quiz-type-rank-grid,
#compat-panel-content .quiz-options.quiz-type-tile-single.quiz-grid-2col,
#compat-panel-content .quiz-options.quiz-type-chip-multi,
#compat-panel-content .quiz-options.quiz-type-grid-multi,
#compat-panel-content .quiz-options.quiz-type-rank-grid {
    overflow-y: auto;
    scrollbar-width: thin;
    padding-right: 2px;
    padding-bottom: 16px;
}
.pti-quiz-overlay-body .quiz-footer,
#compat-panel-content .quiz-footer {
    margin-top: auto;
}

/* Keep main options at natural height when sub-question is showing */
.pti-quiz-overlay-body .quiz-body:has(.quiz-sub:not([style*="none"])) > .quiz-options,
#compat-panel-content .quiz-body:has(.quiz-sub:not([style*="none"])) > .quiz-options {
    flex: 0 0 auto;
    overflow-y: visible;
}
.pti-quiz-overlay-body .quiz-sub-picker,
#compat-panel-content .quiz-sub-picker {
    margin-top: 14px;
}

/* Hide illustrations everywhere — unified text-row list */
.pti-quiz-overlay-body .quiz-opt-img,
#compat-panel-content .quiz-opt-img {
    display: none !important;
}

/* Collapse 2-col grid into single-column list */
.pti-quiz-overlay-body .quiz-type-tile-single.quiz-grid-2col,
#compat-panel-content .quiz-type-tile-single.quiz-grid-2col {
    display: flex;
    flex-direction: column;
    grid-auto-rows: initial;
    gap: 10px;
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
    justify-content: flex-start;
}

/* Card-pair: tiles start right below the title */
.pti-quiz-overlay-body .quiz-type-card-pair,
#compat-panel-content .quiz-type-card-pair {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: flex-start;
    align-content: flex-start;
    padding-bottom: 0;
    max-width: 440px;
    margin: 0 auto;
    width: 100%;
}

/* Unified row-tile shape for tile-single + card-pair */
.pti-quiz-overlay-body .quiz-type-tile-single.quiz-grid-2col .quiz-opt,
.pti-quiz-overlay-body .quiz-type-card-pair .quiz-opt,
#compat-panel-content .quiz-type-tile-single.quiz-grid-2col .quiz-opt,
#compat-panel-content .quiz-type-card-pair .quiz-opt {
    display: flex;
    flex-direction: row;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: 14px 18px;
    gap: 14px;
    background: #fff;
    border: 1.5px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    min-height: 64px;
    height: auto;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Hover: vertical lift + soft border, no horizontal scale (avoids overflow).
   Gated on (hover: hover) to avoid iOS Safari's sticky-hover leaving a contour
   on whichever tile lands under the previous tap's coordinates. */
@media (hover: hover) {
  .pti-quiz-overlay-body .quiz-type-tile-single.quiz-grid-2col .quiz-opt:hover,
  .pti-quiz-overlay-body .quiz-type-card-pair .quiz-opt:hover,
  .pti-quiz-overlay-body .quiz-type-rank-grid .quiz-opt:hover,
  #compat-panel-content .quiz-type-tile-single.quiz-grid-2col .quiz-opt:hover,
  #compat-panel-content .quiz-type-card-pair .quiz-opt:hover,
  #compat-panel-content .quiz-type-rank-grid .quiz-opt:hover {
    transform: translateY(-1px);
    border-color: rgba(45, 90, 61, 0.25);
    box-shadow: 0 4px 10px -4px rgba(45, 90, 61, 0.15);
  }
}

/* Emoji: small circular icon on the left */
.pti-quiz-overlay-body .quiz-type-tile-single.quiz-grid-2col .quiz-opt-emoji,
.pti-quiz-overlay-body .quiz-type-card-pair .quiz-opt-emoji,
#compat-panel-content .quiz-type-tile-single.quiz-grid-2col .quiz-opt-emoji,
#compat-panel-content .quiz-type-card-pair .quiz-opt-emoji {
    width: 44px;
    height: 44px;
    font-size: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, #f2f7ee 0%, #e8f0e3 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(45, 90, 61, 0.08);
}

/* Label + desc stack as title/subtitle */
.pti-quiz-overlay-body .quiz-type-tile-single.quiz-grid-2col .quiz-opt-text,
.pti-quiz-overlay-body .quiz-type-card-pair .quiz-opt-text,
#compat-panel-content .quiz-type-tile-single.quiz-grid-2col .quiz-opt-text,
#compat-panel-content .quiz-type-card-pair .quiz-opt-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}
.pti-quiz-overlay-body .quiz-type-tile-single.quiz-grid-2col .quiz-opt-label,
.pti-quiz-overlay-body .quiz-type-card-pair .quiz-opt-label,
#compat-panel-content .quiz-type-tile-single.quiz-grid-2col .quiz-opt-label,
#compat-panel-content .quiz-type-card-pair .quiz-opt-label {
    font-size: 15.5px;
    font-weight: 700;
    color: #1a2e22;
    line-height: 1.25;
    text-align: left;
}
.pti-quiz-overlay-body .quiz-type-tile-single.quiz-grid-2col .quiz-opt-desc,
#compat-panel-content .quiz-type-tile-single.quiz-grid-2col .quiz-opt-desc {
    font-size: 12.5px;
    color: #6e7a75;
    font-weight: 500;
    margin-top: 0;
    line-height: 1.35;
    text-align: left;
}

/* Text-only row (no emoji): confident label filling the row */
.pti-quiz-overlay-body .quiz-type-tile-single.quiz-grid-2col .quiz-opt:not(:has(.quiz-opt-emoji)) .quiz-opt-label,
.pti-quiz-overlay-body .quiz-type-card-pair .quiz-opt:not(:has(.quiz-opt-emoji)) .quiz-opt-label,
#compat-panel-content .quiz-type-tile-single.quiz-grid-2col .quiz-opt:not(:has(.quiz-opt-emoji)) .quiz-opt-label,
#compat-panel-content .quiz-type-card-pair .quiz-opt:not(:has(.quiz-opt-emoji)) .quiz-opt-label {
    font-size: 16px;
    width: 100%;
}

/* Selected state — white tile with green border + check icon on the right.
   Intentionally no gradient fill, no lift, no outer ring: the check icon
   carries the affirmation. Higher-specificity selectors so the rule wins
   over tile-single.quiz-grid-2col's base (also 4-class specificity). */
.pti-quiz-overlay-body .quiz-type-tile-single.quiz-grid-2col .quiz-opt.selected,
.pti-quiz-overlay-body .quiz-type-card-pair .quiz-opt.selected,
.pti-quiz-overlay-body .quiz-type-rank-grid .quiz-opt.selected,
.pti-quiz-overlay-body .quiz-type-tile-single:not(.quiz-grid-2col) .quiz-opt.selected,
#compat-panel-content .quiz-type-tile-single.quiz-grid-2col .quiz-opt.selected,
#compat-panel-content .quiz-type-card-pair .quiz-opt.selected,
#compat-panel-content .quiz-type-rank-grid .quiz-opt.selected,
#compat-panel-content .quiz-type-tile-single:not(.quiz-grid-2col) .quiz-opt.selected {
    background: #fff;
    border-color: #2D5A3D;
    border-width: 2px;
    box-shadow: 0 4px 12px -4px rgba(45, 90, 61, 0.15);
    transform: none;
}
.pti-quiz-overlay-body .quiz-opt.selected .quiz-opt-label,
#compat-panel-content .quiz-opt.selected .quiz-opt-label {
    color: #1a2e22;
}

/* Explicit green check on the right edge of selected row-tiles */
.pti-quiz-overlay-body .quiz-type-tile-single.quiz-grid-2col .quiz-opt.selected::after,
.pti-quiz-overlay-body .quiz-type-card-pair .quiz-opt.selected::after,
#compat-panel-content .quiz-type-tile-single.quiz-grid-2col .quiz-opt.selected::after,
#compat-panel-content .quiz-type-card-pair .quiz-opt.selected::after {
    content: '';
    width: 22px;
    height: 22px;
    margin-left: auto;
    border-radius: 50%;
    background: #2D5A3D url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 7'/></svg>") center / 14px 14px no-repeat;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(45, 90, 61, 0.35);
}

/* Dim unselected siblings gently (not the default 0.4 grey-out) */
.pti-quiz-overlay-body .quiz-options:has(.quiz-opt.selected) .quiz-opt:not(.selected),
#compat-panel-content .quiz-options:has(.quiz-opt.selected) .quiz-opt:not(.selected) {
    opacity: 0.58;
}

/* Tile-single without 2-col (rare in Buscar) */
.pti-quiz-overlay-body .quiz-type-tile-single:not(.quiz-grid-2col) .quiz-opt,
#compat-panel-content .quiz-type-tile-single:not(.quiz-grid-2col) .quiz-opt {
    background: #fff;
    border: 1.5px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    padding: 14px 16px;
}

/* Rank grid (priorities): row list with badge on the right */
.pti-quiz-overlay-body .quiz-type-rank-grid,
#compat-panel-content .quiz-type-rank-grid {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: none;
    grid-auto-rows: initial;
    gap: 8px;
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
}
.pti-quiz-overlay-body .quiz-type-rank-grid .quiz-opt,
#compat-panel-content .quiz-type-rank-grid .quiz-opt {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: 10px 16px;
    gap: 12px;
    background: #fff;
    border: 1.5px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    min-height: 48px;
    height: auto;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    position: relative;
}
.pti-quiz-overlay-body .quiz-type-rank-grid .quiz-opt-label,
#compat-panel-content .quiz-type-rank-grid .quiz-opt-label {
    font-size: 15px;
    font-weight: 600;
    color: #1a2e22;
    line-height: 1.25;
    text-align: left;
    width: auto;
    flex: 1 1 auto;
}
.pti-quiz-overlay-body .quiz-type-rank-grid .quiz-rank-badge,
#compat-panel-content .quiz-type-rank-grid .quiz-rank-badge {
    position: static;
    order: 99;
    margin-left: auto;
    width: 24px;
    height: 24px;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(45, 90, 61, 0.35);
}

/* Extra-opt buttons (Híbrido / No trabajo) — styled identically to the
   main card-pair row tiles so the four options read as one visually
   consistent list. The only giveaway is their data path in the JS. */
.pti-quiz-overlay-body .quiz-extra-opt,
#compat-panel-content .quiz-extra-opt {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: 14px 18px;
    gap: 14px;
    background: #fff;
    border: 1.5px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    min-height: 64px;
    height: auto;
    width: 100%;
    max-width: 440px;
    min-width: 0;
    box-sizing: border-box;
    margin: 10px auto 0;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    color: #1a2e22;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: border-color 180ms ease, transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 180ms ease, background 180ms ease;
    -webkit-tap-highlight-color: transparent;
    align-self: auto;
}
.pti-quiz-overlay-body .quiz-extra-opt + .quiz-extra-opt,
#compat-panel-content .quiz-extra-opt + .quiz-extra-opt {
    margin-top: 10px;
}
.pti-quiz-overlay-body .quiz-extra-opt:hover,
#compat-panel-content .quiz-extra-opt:hover {
    transform: translateY(-1px);
    border-color: rgba(45, 90, 61, 0.25);
    box-shadow: 0 4px 10px -4px rgba(45, 90, 61, 0.15);
    background: #fff;
}
.pti-quiz-overlay-body .quiz-extra-opt.selected,
#compat-panel-content .quiz-extra-opt.selected {
    background: #fff;
    border-color: #2D5A3D;
    border-width: 2px;
    color: #1a2e22;
    box-shadow: 0 4px 12px -4px rgba(45, 90, 61, 0.15);
    transform: none;
}
.pti-quiz-overlay-body .quiz-extra-opt.selected::after,
#compat-panel-content .quiz-extra-opt.selected::after {
    content: '';
    width: 22px;
    height: 22px;
    margin-left: auto;
    border-radius: 50%;
    background: #2D5A3D url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 7'/></svg>") center / 14px 14px no-repeat;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(45, 90, 61, 0.35);
}

/* Next / submit button — gradient CTA matching Descubrir */
.pti-quiz-overlay-body .quiz-footer,
#compat-panel-content .quiz-footer {
    padding: 12px 20px 20px;
    display: flex;
    justify-content: center;
}
.pti-quiz-overlay-body .quiz-next,
#compat-panel-content .quiz-next {
    width: 100%;
    max-width: 360px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, #3d7550 0%, #2D5A3D 100%);
    border: none;
    padding: 16px 26px;
    border-radius: 16px;
    cursor: pointer;
    box-shadow:
        0 10px 24px -8px rgba(45, 90, 61, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 200ms ease;
}
.pti-quiz-overlay-body .quiz-next:hover,
#compat-panel-content .quiz-next:hover { filter: brightness(1.04); }
.pti-quiz-overlay-body .quiz-next:active,
#compat-panel-content .quiz-next:active { transform: scale(0.98); }
.pti-quiz-overlay-body .quiz-next::after,
#compat-panel-content .quiz-next::after {
    content: '';
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>") center / contain no-repeat;
}

/* Short-viewport override: tighten row tiles on short mobile phones */
@media (max-height: 700px) {
    .pti-quiz-overlay-body .quiz-type-tile-single.quiz-grid-2col .quiz-opt,
    .pti-quiz-overlay-body .quiz-type-card-pair .quiz-opt {
        padding: 12px 16px;
        min-height: 56px;
    }
    .pti-quiz-overlay-body .quiz-type-tile-single.quiz-grid-2col .quiz-opt-emoji,
    .pti-quiz-overlay-body .quiz-type-card-pair .quiz-opt-emoji {
        width: 38px; height: 38px; font-size: 20px;
    }
    .pti-quiz-overlay-body .quiz-question {
        font-size: 20px;
        margin: 4px 0 16px;
    }
    .pti-quiz-overlay-body .quiz-hint {
        font-size: 14.5px;
        margin: -12px 0 12px;
    }
}

/* Very narrow phones */
@media (max-width: 360px) {
    .pti-quiz-overlay-body .quiz-body {
        padding: 8px 14px 14px;
    }
    .pti-quiz-overlay-body .quiz-type-tile-single.quiz-grid-2col,
    .pti-quiz-overlay-body .quiz-type-card-pair {
        gap: 8px;
    }
    .pti-quiz-overlay-body .quiz-type-tile-single.quiz-grid-2col .quiz-opt,
    .pti-quiz-overlay-body .quiz-type-card-pair .quiz-opt {
        padding: 10px 14px;
        gap: 10px;
    }
    .pti-quiz-overlay-body .quiz-type-tile-single.quiz-grid-2col .quiz-opt-label,
    .pti-quiz-overlay-body .quiz-type-card-pair .quiz-opt-label {
        font-size: 14.5px;
    }
    .pti-quiz-overlay-body .quiz-question {
        font-size: 19px;
    }
}