/* ============================================================
   TESTSYSTEM - Estilos Globales
   ============================================================ */

:root {
    --primary:   #0d6efd;
    --success:   #198754;
    --danger:    #dc3545;
    --warning:   #ffc107;
    --card-radius: 12px;
}

body { background: #f0f2f5; font-family: 'Segoe UI', sans-serif; }

/* ── Cards ───────────────────────────────────────────────── */
.card { border: none; border-radius: var(--card-radius); box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.card-header { border-radius: var(--card-radius) var(--card-radius) 0 0 !important; }

/* ── Formulario de preguntas ─────────────────────────────── */
.pregunta-card {
    border-left: 4px solid var(--primary);
    transition: transform .15s;
}
.pregunta-card:hover { transform: translateY(-2px); }
.pregunta-numero {
    width: 36px; height: 36px; background: var(--primary);
    color: #fff; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; font-weight: 700;
    font-size: .9rem; flex-shrink: 0;
}

/* ── Opciones de respuesta ───────────────────────────────── */
.opcion-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 8px; cursor: pointer;
    border: 2px solid #dee2e6; margin-bottom: 8px;
    transition: all .15s;
}
.opcion-item:hover          { border-color: var(--primary); background: #f0f5ff; }
.opcion-item.correcta       { border-color: var(--success); background: #d1fae5; }
.opcion-item.incorrecta     { border-color: var(--danger);  background: #fee2e2; }
.opcion-item input[type=radio],
.opcion-item input[type=checkbox] { accent-color: var(--primary); width: 18px; height: 18px; }

/* ── Cronómetro ──────────────────────────────────────────── */
#cronometro {
    font-size: 1.6rem; font-weight: 700;
    color: var(--primary); letter-spacing: 2px;
}
#cronometro.warning { color: var(--warning) !important; animation: pulse 1s infinite; }
#cronometro.danger  { color: var(--danger)  !important; animation: pulse .5s infinite; }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .5; }
}

/* ── Resultado ───────────────────────────────────────────── */
.resultado-circulo {
    width: 140px; height: 140px; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; margin: 0 auto;
    font-size: 2.2rem; font-weight: 800; color: #fff;
}
.resultado-aprobado  { background: linear-gradient(135deg, #198754, #20c997); }
.resultado-reprobado { background: linear-gradient(135deg, #dc3545, #fd7e14); }
.resultado-oculto { background: linear-gradient(135deg, #6c757d, #adb5bd); }

/* ── GridView tabla ─────────────────────────────────────── */
.table-custom thead { background: var(--primary); color: #fff; }
.table-custom tbody tr:hover { background: #f0f5ff; }

/* ── Badges de tipo ──────────────────────────────────────── */
.badge-om { background: #0d6efd; }
.badge-mr { background: #6f42c1; }
.badge-vf { background: #20c997; color: #000; }
.badge-ra { background: #fd7e14; }

/* ── Login ───────────────────────────────────────────────── */
.login-card { max-width: 480px; margin: 80px auto; }
.login-logo  { font-size: 3rem; color: var(--primary); }

/* ── Toast notificación ──────────────────────────────────── */
#toastContainer { position: fixed; top: 80px; right: 20px; z-index: 9999; }

/* ── Sidebar preguntas (editor) ──────────────────────────── */
.sidebar-preguntas { max-height: 70vh; overflow-y: auto; }
.pregunta-nav-item {
    padding: 8px 12px; border-radius: 6px; cursor: pointer;
    border: 1px solid #dee2e6; margin-bottom: 4px;
    transition: background .1s;
}
.pregunta-nav-item:hover       { background: #e9ecef; }
.pregunta-nav-item.activa      { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ── Progress barra test ──────────────────────────────────── */
.progress-test { height: 8px; border-radius: 4px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 576px) {
    .resultado-circulo { width: 100px; height: 100px; font-size: 1.6rem; }
    #cronometro { font-size: 1.2rem; }
}