/* ==========================================================================
   QA Flora — estilos del tester asistido
   ========================================================================== */

.qa-body {
    background: var(--fl-fondo);
    color: var(--fl-texto);
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr;
}

/* ── Topbar con progreso ───────────────────────────────────────────── */
.qa-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--fl-sp-5);
    padding: var(--fl-sp-3) var(--fl-sp-5);
    background: var(--fl-superficie);
    border-bottom: 1px solid var(--fl-borde);
    box-shadow: 0 1px 0 0 color-mix(in srgb, var(--fl-borde) 50%, transparent);
}

.qa-topbar-marca {
    display: inline-flex;
    align-items: center;
    gap: var(--fl-sp-3);
}

.qa-topbar-tester {
    display: inline-flex;
    align-items: center;
    gap: var(--fl-sp-1-5);
    font-size: var(--fl-texto-sm);
    color: var(--fl-texto-suave);
    padding: var(--fl-sp-1) var(--fl-sp-2);
    border: 1px solid var(--fl-borde);
    border-radius: var(--fl-r-full);
}

.qa-topbar-progreso {
    display: flex;
    flex-direction: column;
    gap: var(--fl-sp-1);
}

.qa-progreso-barra {
    height: 8px;
    background: var(--fl-superficie-hover);
    border-radius: var(--fl-r-full);
    overflow: hidden;
    position: relative;
}

.qa-progreso-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--fl-acento) 0%, var(--fl-acento-600, var(--fl-acento)) 100%);
    border-radius: var(--fl-r-full);
    transition: width 0.4s var(--fl-ease-salida);
}

.qa-progreso-texto {
    display: flex;
    align-items: center;
    gap: var(--fl-sp-2);
    font-size: var(--fl-texto-xs);
    color: var(--fl-texto-suave);
}

.qa-progreso-texto strong {
    color: var(--fl-acento);
    font-weight: var(--fl-peso-semibold);
    font-size: var(--fl-texto-sm);
}

.qa-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--fl-r-full);
    font-size: var(--fl-texto-2xs);
    font-weight: var(--fl-peso-medio);
    background: var(--fl-superficie-hover);
    color: var(--fl-texto);
}

.qa-chip--ok     { color: #0a7f40; background: color-mix(in srgb, #0a7f40 10%, transparent); }
.qa-chip--mejora { color: #b45309; background: color-mix(in srgb, #b45309 10%, transparent); }
.qa-chip--bug    { color: #c11d1d; background: color-mix(in srgb, #c11d1d 10%, transparent); }

.qa-topbar-tema {
    display: inline-flex;
    align-items: center;
    gap: var(--fl-sp-2);
}

/* ── Main container ─────────────────────────────────────────────────── */
.qa-main {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--fl-sp-5);
    width: 100%;
}

/* ── Inicio (landing) ────────────────────────────────────────────────── */
.qa-inicio {
    max-width: 640px;
    margin: 80px auto;
    padding: var(--fl-sp-6);
    background: var(--fl-superficie);
    border: 1px solid var(--fl-borde);
    border-radius: var(--fl-r-lg);
    box-shadow: var(--fl-sombra-md);
}

.qa-inicio-titulo {
    font-family: var(--fl-fuente-display);
    font-size: 2rem;
    font-weight: var(--fl-peso-bold);
    margin-bottom: var(--fl-sp-2);
}

.qa-inicio-subtitulo {
    color: var(--fl-texto-suave);
    margin-bottom: var(--fl-sp-5);
}

.qa-inicio-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--fl-sp-3);
    margin-bottom: var(--fl-sp-5);
    padding: var(--fl-sp-4);
    background: var(--fl-superficie-hover);
    border-radius: var(--fl-r-md);
}

.qa-stat {
    text-align: center;
}

.qa-stat-numero {
    font-size: 1.75rem;
    font-weight: var(--fl-peso-bold);
    color: var(--fl-acento);
    line-height: 1;
}

.qa-stat-label {
    font-size: var(--fl-texto-xs);
    color: var(--fl-texto-suave);
    margin-top: 4px;
}

/* ── Grid principal del wizard ───────────────────────────────────────── */
.qa-wizard {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: var(--fl-sp-5);
    align-items: start;
}

@media (max-width: 1100px) {
    .qa-wizard {
        grid-template-columns: 1fr;
    }
}

/* ── Preview card ────────────────────────────────────────────────────── */
.qa-preview-card {
    background: var(--fl-superficie);
    border: 1px solid var(--fl-borde);
    border-radius: var(--fl-r-lg);
    overflow: hidden;
    position: sticky;
    top: calc(var(--fl-sp-5) + 90px);
}

.qa-preview-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--fl-sp-3);
    padding: var(--fl-sp-4) var(--fl-sp-5);
    border-bottom: 1px solid var(--fl-borde);
    background: var(--fl-superficie-hover);
}

.qa-preview-titulo {
    font-family: var(--fl-fuente-display);
    font-size: var(--fl-texto-xl);
    font-weight: var(--fl-peso-semibold);
    margin: 0;
}

.qa-preview-meta {
    display: inline-flex;
    gap: var(--fl-sp-2);
    font-size: var(--fl-texto-2xs);
    color: var(--fl-texto-tenue);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--fl-peso-medio);
}

.qa-preview-body {
    padding: var(--fl-sp-5);
    min-height: 280px;
}

.qa-preview-info {
    padding: var(--fl-sp-3) var(--fl-sp-5);
    background: color-mix(in srgb, var(--fl-acento) 6%, transparent);
    border-top: 1px solid var(--fl-borde);
    font-size: var(--fl-texto-sm);
    color: var(--fl-texto-suave);
    line-height: 1.5;
}

/* ── Panel de testeo ─────────────────────────────────────────────────── */
.qa-casos {
    background: var(--fl-superficie);
    border: 1px solid var(--fl-borde);
    border-radius: var(--fl-r-lg);
    overflow: hidden;
}

.qa-casos-header {
    padding: var(--fl-sp-4) var(--fl-sp-5);
    border-bottom: 1px solid var(--fl-borde);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--fl-superficie-hover);
}

.qa-casos-titulo {
    font-weight: var(--fl-peso-semibold);
    font-size: var(--fl-texto-sm);
}

.qa-caso {
    padding: var(--fl-sp-4) var(--fl-sp-5);
    border-bottom: 1px solid var(--fl-borde);
}

.qa-caso:last-child {
    border-bottom: 0;
}

.qa-caso-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--fl-sp-3);
    margin-bottom: var(--fl-sp-2);
}

.qa-caso-titulo {
    font-weight: var(--fl-peso-medio);
    font-size: var(--fl-texto-sm);
    color: var(--fl-texto-fuerte);
}

.qa-caso-desc {
    color: var(--fl-texto-suave);
    font-size: var(--fl-texto-xs);
    line-height: 1.55;
    margin-bottom: var(--fl-sp-3);
}

/* ── Tres estados ─────────────────────────────────────────────────────── */
.qa-estados {
    display: inline-flex;
    gap: 4px;
    flex-shrink: 0;
}

.qa-estado-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--fl-borde);
    background: var(--fl-superficie);
    color: var(--fl-texto-suave);
    border-radius: var(--fl-r-sm);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    transition: all .14s var(--fl-ease-salida);
}

.qa-estado-btn:hover {
    border-color: var(--fl-borde-fuerte);
    background: var(--fl-superficie-hover);
}

.qa-estado-btn[aria-pressed="true"] {
    font-weight: var(--fl-peso-semibold);
    border-width: 1px;
}

.qa-estado-btn[data-estado="ok"][aria-pressed="true"] {
    background: color-mix(in srgb, #0a7f40 14%, var(--fl-superficie));
    border-color: #0a7f40;
    color: #0a7f40;
}

.qa-estado-btn[data-estado="mejora"][aria-pressed="true"] {
    background: color-mix(in srgb, #b45309 14%, var(--fl-superficie));
    border-color: #b45309;
    color: #b45309;
}

.qa-estado-btn[data-estado="bug"][aria-pressed="true"] {
    background: color-mix(in srgb, #c11d1d 14%, var(--fl-superficie));
    border-color: #c11d1d;
    color: #c11d1d;
}

.qa-caso-nota {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--fl-borde);
    border-radius: var(--fl-r-sm);
    background: var(--fl-superficie);
    color: var(--fl-texto);
    font-family: inherit;
    font-size: var(--fl-texto-xs);
    resize: vertical;
    min-height: 40px;
}

.qa-caso-nota:focus {
    outline: none;
    border-color: var(--fl-acento);
    box-shadow: 0 0 0 3px var(--fl-acento-foco);
}

/* ── Comentario general ──────────────────────────────────────────────── */
.qa-comentario {
    padding: var(--fl-sp-4) var(--fl-sp-5);
    border-top: 2px solid var(--fl-borde-fuerte);
    background: color-mix(in srgb, var(--fl-acento) 3%, var(--fl-superficie));
}

.qa-comentario-label {
    display: block;
    font-size: var(--fl-texto-sm);
    font-weight: var(--fl-peso-semibold);
    margin-bottom: var(--fl-sp-2);
    color: var(--fl-texto-fuerte);
}

.qa-comentario-hint {
    color: var(--fl-texto-tenue);
    font-weight: normal;
    font-size: var(--fl-texto-xs);
}

.qa-comentario-textarea {
    width: 100%;
    min-height: 90px;
    padding: 10px 12px;
    border: 1px solid var(--fl-borde);
    border-radius: var(--fl-r-md);
    background: var(--fl-superficie);
    color: var(--fl-texto);
    font-family: inherit;
    font-size: var(--fl-texto-sm);
    resize: vertical;
    line-height: 1.5;
}

.qa-comentario-textarea:focus {
    outline: none;
    border-color: var(--fl-acento);
    box-shadow: 0 0 0 3px var(--fl-acento-foco);
}

/* ── Footer con acciones ─────────────────────────────────────────────── */
.qa-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--fl-sp-4) var(--fl-sp-5);
    border-top: 1px solid var(--fl-borde);
    background: var(--fl-superficie-hover);
    gap: var(--fl-sp-3);
}

.qa-footer-derecha {
    display: inline-flex;
    gap: var(--fl-sp-2);
}

/* ── Botones ─────────────────────────────────────────────────────────── */
.qa-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--fl-sp-1-5);
    padding: 8px 14px;
    border: 1px solid var(--fl-borde);
    background: var(--fl-superficie);
    color: var(--fl-texto);
    border-radius: var(--fl-r-md);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--fl-texto-sm);
    font-weight: var(--fl-peso-medio);
    text-decoration: none;
    transition: all .14s var(--fl-ease-salida);
}

.qa-btn:hover {
    border-color: var(--fl-borde-fuerte);
    background: var(--fl-superficie-hover);
}

.qa-btn--primario {
    background: var(--fl-acento);
    color: var(--fl-acento-texto-sobre, white);
    border-color: var(--fl-acento);
}

.qa-btn--primario:hover {
    background: var(--fl-acento-hover, var(--fl-acento));
    border-color: var(--fl-acento-hover, var(--fl-acento));
}

.qa-btn--ghost {
    border-color: transparent;
    background: transparent;
}

.qa-btn--ghost:hover {
    background: var(--fl-superficie-hover);
}

/* ── Navegación lateral compacta (grupos) ───────────────────────────── */
.qa-nav-grupos {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: var(--fl-sp-3);
    padding: var(--fl-sp-2);
    background: var(--fl-superficie);
    border: 1px solid var(--fl-borde);
    border-radius: var(--fl-r-md);
    position: sticky;
    top: 90px;
    z-index: 5;
}

.qa-nav-grupo {
    padding: 4px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--fl-r-sm);
    font-size: var(--fl-texto-xs);
    cursor: pointer;
    color: var(--fl-texto-suave);
    text-decoration: none;
    white-space: nowrap;
}

.qa-nav-grupo:hover {
    background: var(--fl-superficie-hover);
    color: var(--fl-texto);
}

.qa-nav-grupo--activo {
    background: var(--fl-acento);
    color: var(--fl-acento-texto-sobre, white);
    border-color: var(--fl-acento);
}

/* ── Breadcrumb de componentes ───────────────────────────────────────── */
.qa-ruta {
    display: flex;
    align-items: center;
    gap: var(--fl-sp-2);
    font-size: var(--fl-texto-xs);
    color: var(--fl-texto-tenue);
    margin-bottom: var(--fl-sp-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--fl-peso-medio);
}

/* ── Reporte ─────────────────────────────────────────────────────────── */
.qa-reporte-hero {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--fl-sp-3);
    margin-bottom: var(--fl-sp-5);
}

.qa-reporte-stat {
    padding: var(--fl-sp-4);
    background: var(--fl-superficie);
    border: 1px solid var(--fl-borde);
    border-radius: var(--fl-r-md);
    text-align: center;
}

.qa-reporte-stat-num {
    font-size: 2.25rem;
    font-weight: var(--fl-peso-bold);
    line-height: 1;
    font-family: var(--fl-fuente-display);
}

.qa-reporte-stat-label {
    font-size: var(--fl-texto-xs);
    color: var(--fl-texto-suave);
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.qa-reporte-componente {
    background: var(--fl-superficie);
    border: 1px solid var(--fl-borde);
    border-radius: var(--fl-r-md);
    padding: var(--fl-sp-4);
    margin-bottom: var(--fl-sp-3);
}

.qa-reporte-componente-titulo {
    font-weight: var(--fl-peso-semibold);
    margin-bottom: var(--fl-sp-2);
}

.qa-reporte-comentario {
    padding: var(--fl-sp-3);
    background: var(--fl-superficie-hover);
    border-left: 3px solid var(--fl-acento);
    border-radius: var(--fl-r-sm);
    font-size: var(--fl-texto-sm);
    margin-top: var(--fl-sp-2);
    color: var(--fl-texto);
}