/* ==========================================================================
   QA Pulsar — vanilla CSS
   Look propio (no Flora) — tonos cálidos, mucho aire, jerarquía clara.
   ========================================================================== */

:root {
    /* Paleta — modo claro */
    --bg:            #f3f4f8;
    --bg-2:          #ffffff;
    --bg-3:          #fafbfd;
    --texto:         #1f2330;
    --texto-2:       #565b6e;
    --texto-3:       #8a8fa3;
    --borde:         #e3e6ee;
    --borde-2:       #d2d6e1;

    --acento:        #4f46e5;   /* Indigo / violeta */
    --acento-2:      #6366f1;
    --acento-suave:  #eef2ff;
    --acento-texto:  #ffffff;

    --pass:          #16a34a;
    --pass-bg:       #dcfce7;
    --fail:          #dc2626;
    --fail-bg:       #fee2e2;
    --skip:          #64748b;
    --skip-bg:       #e2e8f0;
    --block:         #b45309;
    --block-bg:      #fef3c7;
    --pend:          #94a3b8;
    --pend-bg:       #f1f5f9;

    --sombra-sm:     0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
    --sombra-md:     0 6px 16px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04);
    --sombra-lg:     0 24px 48px rgba(15, 23, 42, .14), 0 4px 8px rgba(15, 23, 42, .06);

    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;

    --t-rapido: 120ms ease;
    --t-normal: 220ms ease;
}

[data-tema="oscuro"] {
    --bg:            #11131a;
    --bg-2:          #1a1d29;
    --bg-3:          #14171f;
    --texto:         #e7e9f0;
    --texto-2:       #a8aec3;
    --texto-3:       #6f7587;
    --borde:         #2a2e3d;
    --borde-2:       #3a4054;

    --acento:        #818cf8;
    --acento-2:      #a5b4fc;
    --acento-suave:  #1e2138;
    --acento-texto:  #0c0e15;

    --pass-bg:       #14361f;
    --fail-bg:       #4a1416;
    --skip-bg:       #232838;
    --block-bg:      #3d2a08;
    --pend-bg:       #1d2030;
}

/* Reset suave */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, sans-serif;
    background: var(--bg);
    color: var(--texto);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
button { font: inherit; }
kbd {
    background: var(--bg-3);
    border: 1px solid var(--borde);
    border-radius: 4px;
    padding: 1px 6px;
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 12px;
    box-shadow: inset 0 -1px 0 var(--borde);
}
code {
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    background: var(--bg-3);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

/* ==========================================================================
   Topbar
   ========================================================================== */

.topbar {
    background: linear-gradient(135deg, var(--acento) 0%, var(--acento-2) 100%);
    color: var(--acento-texto);
    padding: 16px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--sombra-md);
    flex: none;
}
.topbar__brand {
    display: flex;
    align-items: center;
    gap: 14px;
}
.topbar__brand h1 {
    font-size: 18px;
    margin: 0;
    line-height: 1;
}
.topbar__brand p {
    font-size: 12px;
    opacity: 0.85;
    margin-top: 2px;
}
.topbar__pulse {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    position: relative;
    flex: none;
}
.topbar__pulse::before,
.topbar__pulse::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
}
.topbar__pulse::after {
    inset: 4px;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.5);
    animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
    0%   { transform: scale(0.8); opacity: 0.9; }
    70%  { transform: scale(1.4); opacity: 0;   }
    100% { transform: scale(1.4); opacity: 0;   }
}
.topbar__meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.badge {
    background: rgba(255, 255, 255, 0.18);
    color: white;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}
.badge--soft {
    background: rgba(255, 255, 255, 0.18);
}

/* ==========================================================================
   Layout shell
   ========================================================================== */

.layout {
    flex: 1;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 0;
    overflow: hidden;
    min-height: 0;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

.sidebar {
    background: var(--bg-2);
    border-right: 1px solid var(--borde);
    overflow-y: auto;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sidebar__title {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--texto-3);
}

.run-card {
    background: var(--bg-3);
    border: 1px solid var(--borde);
    border-radius: var(--r-md);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.run-card__empty p {
    color: var(--texto-2);
    margin-bottom: 12px;
}
.run-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.run-card__qa {
    font-weight: 600;
    color: var(--texto);
    word-break: break-word;
}
.run-card__id {
    font-family: ui-monospace, monospace;
    font-size: 11px;
    color: var(--texto-3);
}
.run-card__nota {
    font-size: 12px;
    color: var(--texto-2);
    font-style: italic;
    line-height: 1.4;
}
.run-card__nota:empty { display: none; }

.run-card__progress {
    display: flex;
    align-items: center;
    gap: 10px;
}
.progress {
    flex: 1;
    height: 8px;
    background: var(--borde);
    border-radius: 999px;
    overflow: hidden;
}
.progress__bar {
    height: 100%;
    background: linear-gradient(90deg, var(--acento) 0%, var(--acento-2) 100%);
    border-radius: 999px;
    transition: width var(--t-normal);
}
.progress__pct {
    font-size: 12px;
    font-weight: 600;
    color: var(--texto-2);
    min-width: 36px;
    text-align: right;
}

.run-card__counts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.run-card__actions {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.chip {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid transparent;
}
.chip b {
    font-weight: 700;
}
.chip--pass  { background: var(--pass-bg);  color: var(--pass);  border-color: color-mix(in srgb, var(--pass)  30%, transparent); }
.chip--fail  { background: var(--fail-bg);  color: var(--fail);  border-color: color-mix(in srgb, var(--fail)  30%, transparent); }
.chip--skip  { background: var(--skip-bg);  color: var(--skip);  border-color: color-mix(in srgb, var(--skip)  30%, transparent); }
.chip--block { background: var(--block-bg); color: var(--block); border-color: color-mix(in srgb, var(--block) 30%, transparent); }
.chip--pend  { background: var(--pend-bg);  color: var(--texto-2); border-color: color-mix(in srgb, var(--pend) 30%, transparent); }

/* ==========================================================================
   Sidebar — módulos
   ========================================================================== */

.modnav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--borde);
}
.modnav__item {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    padding: 9px 12px;
    text-align: left;
    cursor: pointer;
    color: var(--texto);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background var(--t-rapido), border-color var(--t-rapido);
}
.modnav__item:hover {
    background: var(--bg-3);
    border-color: var(--borde);
}
.modnav__item.is-activo {
    background: var(--acento-suave);
    border-color: color-mix(in srgb, var(--acento) 30%, transparent);
    color: var(--acento);
}
.modnav__item.is-activo .modnav__contador {
    color: var(--acento);
}
.modnav__icono {
    width: 28px; height: 28px;
    flex: none;
    display: grid;
    place-items: center;
    background: var(--bg-3);
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
}
.is-activo .modnav__icono {
    background: var(--acento);
    color: white;
}
.modnav__label {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
}
.modnav__contador {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--texto-3);
    font-weight: 600;
}

/* ==========================================================================
   Content
   ========================================================================== */

.content {
    overflow-y: auto;
    padding: 28px 36px 60px;
}
.content__head {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--borde);
}
.content__head h2 {
    font-size: 24px;
    margin-bottom: 4px;
}
.content__head p {
    color: var(--texto-2);
    font-size: 14px;
}

/* Welcome */
.welcome {
    max-width: 620px;
    margin: 30px auto;
    text-align: center;
    background: var(--bg-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-xl);
    padding: 40px 36px;
    box-shadow: var(--sombra-sm);
}
.welcome__icon {
    font-size: 36px;
    width: 72px;
    height: 72px;
    background: var(--acento-suave);
    color: var(--acento);
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--acento) 8%, transparent);
}
.welcome h3 {
    font-size: 20px;
    margin-bottom: 8px;
}
.welcome__lead {
    color: var(--texto-2);
    margin-bottom: 24px;
}
.welcome__steps {
    text-align: left;
    margin: 0 auto 28px;
    padding-left: 22px;
    color: var(--texto-2);
}
.welcome__steps li {
    margin-bottom: 10px;
    line-height: 1.55;
}
.welcome__steps b {
    color: var(--texto);
}
.welcome__cta {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ==========================================================================
   Tarjetas de tests
   ========================================================================== */

.tests-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 920px;
}

.test {
    background: var(--bg-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color var(--t-rapido), box-shadow var(--t-rapido);
}
.test:hover {
    border-color: var(--borde-2);
}
.test--pass  { border-left: 4px solid var(--pass);  }
.test--fail  { border-left: 4px solid var(--fail);  }
.test--skip  { border-left: 4px solid var(--skip);  }
.test--block { border-left: 4px solid var(--block); }
.test--pend  { border-left: 4px solid var(--borde-2); }

.test__head {
    padding: 14px 18px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.test__titulo {
    font-size: 15px;
    font-weight: 600;
    color: var(--texto);
    margin-bottom: 4px;
}
.test__meta {
    font-size: 12px;
    color: var(--texto-3);
    font-family: ui-monospace, monospace;
}
.test__estado {
    flex: none;
}

.test__cuerpo {
    padding: 0 18px 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
@media (max-width: 720px) {
    .test__cuerpo { grid-template-columns: 1fr; }
}
.test__seccion h4 {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--texto-3);
    margin-bottom: 8px;
}
.test__pasos {
    margin: 0;
    padding-left: 18px;
    color: var(--texto-2);
    font-size: 13px;
    line-height: 1.55;
}
.test__pasos li {
    margin-bottom: 4px;
}
.test__esperado {
    background: var(--bg-3);
    border: 1px dashed var(--borde-2);
    border-radius: var(--r-md);
    padding: 10px 12px;
    font-size: 13px;
    color: var(--texto-2);
}
.test__criticidad {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 8px;
    vertical-align: middle;
}
.test__criticidad--alta  { background: var(--fail-bg);  color: var(--fail);  }
.test__criticidad--media { background: var(--block-bg); color: var(--block); }
.test__criticidad--baja  { background: var(--skip-bg);  color: var(--skip);  }

.test__acciones {
    background: var(--bg-3);
    border-top: 1px solid var(--borde);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.test__acciones .test__nota-actual {
    font-size: 12px;
    color: var(--texto-3);
    font-style: italic;
    flex: 1;
    min-width: 0;
}

/* ==========================================================================
   Botones
   ========================================================================== */

.btn {
    border: 1px solid transparent;
    background: transparent;
    color: var(--texto);
    padding: 8px 14px;
    border-radius: var(--r-md);
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background var(--t-rapido), border-color var(--t-rapido), color var(--t-rapido), transform var(--t-rapido);
    white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
}

.btn--primario {
    background: var(--acento);
    color: var(--acento-texto);
    border-color: var(--acento);
}
.btn--primario:hover {
    background: var(--acento-2);
    border-color: var(--acento-2);
}

.btn--ghost {
    background: var(--bg-2);
    border-color: var(--borde);
    color: var(--texto);
}
.btn--ghost:hover {
    background: var(--bg-3);
    border-color: var(--borde-2);
}

.btn--peligro {
    background: var(--fail-bg);
    color: var(--fail);
    border-color: color-mix(in srgb, var(--fail) 25%, transparent);
}
.btn--peligro:hover {
    background: color-mix(in srgb, var(--fail-bg) 70%, var(--fail) 15%);
}

.btn--lg { padding: 12px 22px; font-size: 14px; }
.btn--sm { padding: 5px 10px; font-size: 12px; }
.btn--bloque { width: 100%; justify-content: center; }

/* Botones de estado dentro de un test */
.btn-estado {
    border: 1px solid transparent;
    background: var(--bg-2);
    color: var(--texto-2);
    padding: 6px 14px;
    border-radius: var(--r-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: all var(--t-rapido);
    border: 1px solid var(--borde);
}
.btn-estado:hover {
    border-color: var(--borde-2);
}
.btn-estado.is-on--pass  { background: var(--pass);  color: white; border-color: var(--pass);  }
.btn-estado.is-on--fail  { background: var(--fail);  color: white; border-color: var(--fail);  }
.btn-estado.is-on--skip  { background: var(--skip);  color: white; border-color: var(--skip);  }
.btn-estado.is-on--block { background: var(--block); color: white; border-color: var(--block); }

/* ==========================================================================
   Inputs
   ========================================================================== */

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--texto-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.field input[type="text"],
.field textarea,
.field select {
    background: var(--bg-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-md);
    padding: 10px 12px;
    font: inherit;
    color: var(--texto);
    transition: border-color var(--t-rapido), box-shadow var(--t-rapido);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: none;
    border-color: var(--acento);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent);
}
.field textarea {
    resize: vertical;
    min-height: 80px;
}
.field__ayuda {
    font-size: 11px;
    color: var(--texto-3);
}

/* ==========================================================================
   Modal
   ========================================================================== */

.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 20px;
}
.modal[hidden] { display: none; }

.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    animation: fade-in var(--t-normal);
}
.modal__panel {
    position: relative;
    background: var(--bg-2);
    border-radius: var(--r-xl);
    box-shadow: var(--sombra-lg);
    width: 100%;
    max-width: 520px;
    overflow: hidden;
    animation: pop-in var(--t-normal);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}
.modal__head {
    padding: 18px 22px;
    border-bottom: 1px solid var(--borde);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal__head h3 {
    font-size: 16px;
}
.modal__cerrar {
    background: transparent;
    border: 0;
    font-size: 24px;
    line-height: 1;
    color: var(--texto-3);
    cursor: pointer;
    padding: 0 4px;
}
.modal__cerrar:hover { color: var(--texto); }
.modal__body {
    padding: 22px;
    overflow-y: auto;
}
.modal__foot {
    padding: 14px 22px;
    border-top: 1px solid var(--borde);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    background: var(--bg-3);
}

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes pop-in {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Modal: lista de runs */
.runs-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.runs-lista__item {
    background: var(--bg-3);
    border: 1px solid var(--borde);
    border-radius: var(--r-md);
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: border-color var(--t-rapido), background var(--t-rapido);
}
.runs-lista__item:hover {
    border-color: var(--acento);
    background: var(--acento-suave);
}
.runs-lista__qa {
    font-weight: 600;
    color: var(--texto);
}
.runs-lista__meta {
    font-size: 11px;
    color: var(--texto-3);
    font-family: ui-monospace, monospace;
    margin-top: 2px;
}
.runs-lista__resumen {
    font-size: 11px;
    color: var(--texto-2);
}
.runs-vacio {
    text-align: center;
    color: var(--texto-3);
    padding: 24px 12px;
}

/* ==========================================================================
   Toasts
   ========================================================================== */

.toasts {
    position: fixed;
    top: 22px;
    right: 22px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 360px;
}
.toast {
    background: var(--bg-2);
    border: 1px solid var(--borde);
    border-left: 4px solid var(--acento);
    border-radius: var(--r-md);
    padding: 12px 14px;
    box-shadow: var(--sombra-md);
    animation: toast-in 220ms ease-out;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--texto);
}
.toast--pass  { border-left-color: var(--pass);  }
.toast--fail  { border-left-color: var(--fail);  }
.toast--info  { border-left-color: var(--acento); }
.toast--block { border-left-color: var(--block); }
.toast__icon {
    width: 20px; height: 20px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    font-size: 11px;
    color: white;
}
.toast--pass .toast__icon  { background: var(--pass); }
.toast--fail .toast__icon  { background: var(--fail); }
.toast--info .toast__icon  { background: var(--acento); }
.toast--block .toast__icon { background: var(--block); }
.toast__msg { font-size: 13px; flex: 1; }
.toast.is-saliendo { animation: toast-out 200ms forwards; }

@keyframes toast-in {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
    to { opacity: 0; transform: translateX(40px); }
}

/* ==========================================================================
   Iconos sencillos (CSS-only) — solo el que necesitamos para el botón tema
   ========================================================================== */

.ico {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}
.ico-tema {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 880px) {
    .layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        height: auto;
    }
    .sidebar {
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid var(--borde);
        padding: 14px;
    }
    .modnav {
        flex-direction: row;
        flex-wrap: wrap;
        border-top: 0;
    }
    .modnav__item {
        flex: 1 1 calc(50% - 4px);
    }
    .content {
        padding: 18px 16px 60px;
    }
    .topbar {
        padding: 12px 16px;
    }
    .topbar__brand h1 { font-size: 16px; }
    .topbar__brand p  { display: none; }
}