* Archivo CSS personalizado para Quiz Generator
* Este archivo será versionado automáticamente
:root {
--quiz-primary: #667eea;
--quiz-secondary: #764ba2;
--quiz-success: #4facfe;
--quiz-warning: #fa709a;
--quiz-danger: #f5576c;
--quiz-info: #00f2fe;
--quiz-dark: #2c3e50;
--quiz-light: #f5f7fa;
}
.quiz-card {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.quiz-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
}
.quiz-button {
border-radius: 25px;
font-weight: 600;
padding: 12px 30px;
transition: all 0.3s ease;
border: none;
position: relative;
overflow: hidden;
}
.quiz-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s;
}
.quiz-button:hover::before {
left: 100%;
}
.quiz-button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.animate-fade-in-up {
animation: fadeInUp 0.6s ease-out;
}
.animate-pulse {
animation: pulse 2s infinite;
}
.quiz-header {
background: linear-gradient(135deg, var(--quiz-primary) 0%, var(--quiz-secondary) 100%);
color: white;
padding: 1.5rem 0;
margin-bottom: 1.5rem;
}
.quiz-header h1 {
font-weight: 700;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.book-category {
margin-bottom: 2rem;
}
.book-category .card-header {
background: linear-gradient(135deg, var(--quiz-primary) 0%, var(--quiz-secondary) 100%);
color: white;
border-radius: 15px 15px 0 0 !important;
}
.book-category .card-header h3 {
margin: 0;
font-weight: 600;
}
.stats-card {
background: linear-gradient(135deg, var(--quiz-success) 0%, var(--quiz-info) 100%);
color: white;
border-radius: 15px;
padding: 2rem;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.stats-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.stats-number {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.stats-label {
font-size: 1rem;
opacity: 0.9;
}
.leaderboard-table {
background: rgba(255, 255, 255, 0.05);
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.leaderboard-table thead {
background: linear-gradient(135deg, var(--quiz-primary) 0%, var(--quiz-secondary) 100%);
}
.leaderboard-table th {
color: white;
font-weight: 600;
border: none;
padding: 1rem;
}
.leaderboard-table td {
padding: 1rem;
border-bottom: 1px solid #f0f0f0;
vertical-align: middle;
}
.leaderboard-table tbody tr:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.score-badge {
padding: 0.5rem 1rem;
border-radius: 20px;
font-weight: 600;
font-size: 0.9rem;
}
.score-excellent {
background: linear-gradient(135deg, #28a745, #20c997);
color: white;
}
.score-good {
background: linear-gradient(135deg, #ffc107, #fd7e14);
color: white;
}
.score-poor {
background: linear-gradient(135deg, #dc3545, #e83e8c);
color: white;
}
.quiz-footer {
background: linear-gradient(135deg, var(--quiz-dark) 0%, #34495e 100%);
color: white;
padding: 2rem 0;
margin-top: 3rem;
}
.quiz-footer a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: color 0.3s ease;
}
.quiz-footer a:hover {
color: white;
}
@media (max-width: 768px) {
.quiz-header h1 {
font-size: 2rem;
}
.stats-number {
font-size: 2rem;
}
.quiz-button {
padding: 10px 20px;
font-size: 0.9rem;
}
.quiz-question-text {
color: #ffffff !important;
font-weight: 700 !important;
font-size: 0.95rem !important;
}
.form-check-label {
color: #ffffff !important;
font-weight: 600 !important;
font-size: 0.85rem !important;
}
.card-title {
color: #ffffff !important;
font-weight: 700 !important;
}
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(10px);
}
@media (min-width: 769px) and (max-width: 1024px) {
h5.quiz-question-text,
h6.quiz-question-text,
h3.quiz-question-text,
.card-title.quiz-question-text {
color: #ffffff !important;
font-weight: 700 !important;
font-size: 1.25rem !important;
}
.form-check-label {
color: var(--soft-white) !important;
font-weight: 500 !important;
font-size: 1rem !important;
}
.card-title {
color: var(--soft-white) !important;
font-weight: 700 !important;
}
h5, h6, p {
color: var(--soft-white) !important;
}
.option-card .option-text,
.form-check .form-check-label {
color: var(--soft-white) !important;
font-weight: 500 !important;
}
.option-card {
background: rgba(255, 255, 255, 0.05) !important;
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.1) !important;
}
.form-check {
background: rgba(255, 255, 255, 0.05) !important;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 8px !important;
padding: 1rem !important;
margin-bottom: 0.5rem !important;
}
}
@media (prefers-color-scheme: dark) {
:root {
--quiz-light: #2c3e50;
--quiz-dark: #f5f7fa;
}
body {
background-color: #1a1a1a;
color: #ffffff;
}
.card {
background-color: #2c2c2c;
color: #ffffff;
}
}
@media print {
.quiz-button,
.animate-pulse,
.quiz-card:hover {
display: none !important;
}
.quiz-header {
background: #000 !important;
color: #fff !important;
}
}