fanfuso/IDE-Demo-B
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mejoras del index

Browse Source
This commit is contained in:
fanfuso
2026-09-08 23:10:28 -03:00
parent 6fe731fd0d
commit fb8c19192c
112 changed files with 1990 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+43 -151
View File
@@ -169,18 +169,6 @@ p, li, .lead-text, .text-body, .text-muted {
font-family: 'Plus Jakarta Sans', sans-serif;
}
.icono {
width: 24px;
height: 24px;
color: var(--ide-primary); /* ← Funciona con currentColor */
transition: color 0.3s;
vertical-align: middle;
}
.icono:hover {
fill: #ff6b6b;
}
.lead-text {
font-size: 1.15rem;
color: var(--text-muted);
@@ -784,6 +772,38 @@ p, li, .lead-text, .text-body, .text-muted {
color: var(--text-body, #212529);
background: var(--bg-hover, #f1f3f5);
}
/* ---- Estilos para títulos con iconos SVG en las tarjetas del quiz ---- */
.quiz-option-card .opt-title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
font-size: 0.95rem;
margin-bottom: 0.2rem;
color: var(--text-primary, #094b63);
}
.quiz-option-card .opt-title .icono {
width: 24px;
height: 24px;
flex-shrink: 0;
color: inherit;
}
.quiz-option-card .opt-title .opt-text {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 0.95rem;
}
/* Asegura que los emojis también se alineen correctamente */
.quiz-option-card .opt-title {
display: flex;
align-items: center;
gap: 8px;
}
/* ---- Resultado---- */
.quiz-result-box {
@@ -795,12 +815,13 @@ p, li, .lead-text, .text-body, .text-muted {
.quiz-result-box .result-chip {
display: inline-block;
border: 1px solid var(--ide-primary-light);
color: var(--ide-primary-light);
background-color: var(--ide-primary-light);
color: white;
padding: 0.25rem 0.85rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
border: none;
}
/* ---- Badge ---- */
@@ -815,7 +836,7 @@ p, li, .lead-text, .text-body, .text-muted {
.badge-project {
background: var(--ide-accent-light, #e6f0ff);
color: var(--ide-accent, #0066cc);
color: var(--ide-accent);
}
/* ---- Responsive ---- */
@@ -852,138 +873,8 @@ p, li, .lead-text, .text-body, .text-muted {
box-shadow: var(--shadow-sm);
}--- */
/* --- 10. Bloque 3: La Brújula IDE (Diagnóstico Interactivo) --- */
.brujula-container {
background: var(--bg-surface);
border: 2px solid var(--ide-accent);
border-radius: var(--radius-lg);
padding: clamp(1.75rem, 4vw, 3rem);
box-shadow: var(--shadow-lg);
position: relative;
overflow: hidden;
}
.brujula-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1.5rem;
flex-wrap: wrap;
gap: 1rem;
}
.brujula-header h2 {
font-family: 'Barlow Semi Condensed', sans-serif;
font-weight: 700;
font-size: 1.75rem;
margin-bottom: 0.5rem;
}
.brujula-progress-bar {
width: 100%;
height: 6px;
background-color: var(--bg-subtle);
border-radius: var(--radius-full);
margin-bottom: 2rem;
overflow: hidden;
}
.brujula-progress-fill {
height: 100%;
width: 33.33%;
background: linear-gradient(90deg, var(--ide-primary), var(--ide-accent));
transition: width 0.4s ease;
}
.brujula-step {
display: none;
animation: fadeIn 0.3s ease forwards;
}
.brujula-step.active {
display: block;
}
.brujula-step h3 {
font-family: 'Barlow Semi Condensed', sans-serif;
font-weight: 700;
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
.brujula-options-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-top: 1.5rem;
}
.brujula-option-card {
background-color: var(--bg-body);
border: 1.5px solid var(--border-color);
border-radius: var(--radius-md);
padding: 1.25rem;
cursor: pointer;
transition: all var(--transition-fast);
text-align: left;
display: flex;
align-items: flex-start;
gap: 0.85rem;
}
.brujula-option-card:hover {
border-color: var(--ide-accent);
background-color: var(--ide-accent-soft);
transform: translateY(-2px);
}
.brujula-option-card.selected {
border-color: var(--ide-accent);
background-color: var(--ide-accent-soft);
}
.brujula-option-card .opt-title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
display: block;
font-size: 0.95rem;
margin-bottom: 0.2rem;
}
.brujula-radio-bullet {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid var(--border-color);
flex-shrink: 0;
margin-top: 2px;
position: relative;
}
.brujula-option-card.selected .brujula-radio-bullet {
border-color: var(--ide-accent);
}
.brujula-option-card.selected .brujula-radio-bullet::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: var(--ide-accent);
}
.brujula-result-box {
background: var(--bg-body);
border: 1.5px solid var(--border-color);
border-radius: var(--radius-md);
padding: 1.75rem;
margin-top: 1.5rem;
}
/* --- 11. Bloque 4 & 7: Metodología en 4 Pasos --- */
/* --- 10. Bloque 4 & 7: Metodología en 4 Pasos --- */
.method-steps-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
@@ -1016,7 +907,7 @@ p, li, .lead-text, .text-body, .text-muted {
margin-bottom: 0.5rem;
}
/* --- 12. Bloque 5: Ecosistema (4 Capacidades) --- */
/* --- 1. Bloque 5: Ecosistema (4 Capacidades) --- */
.ecosystem-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
@@ -1092,10 +983,11 @@ p, li, .lead-text, .text-body, .text-muted {
background-color: rgba(44, 105, 171, 0.15);
color: var(--ide-digital);
}
[data-theme="dark"] .badge-digital {
background-color: rgba(44, 105, 171, 0.25);
color: var(--ide-digital);
}
[data-theme="dark"] .quiz-result-box .result-chip {
background-color: var(--ide-primary-light);
color: white;
}
/* --- 13. Modales (Pop-ups de Desafíos y Cursos) --- */
.modal-backdrop {