Noticias en oposiciones
This commit is contained in:
Tatiana Villa
parent
c77cdc81c4
commit
953a02e4ea
909
css/style.css
909
css/style.css
|
|
@ -1,194 +1,817 @@
|
|||
/* Variables de tus colores */
|
||||
/* ============================================================
|
||||
TAI – AGE | Estilos principales
|
||||
Paleta VS Code Dark + acentos azul AGE
|
||||
============================================================ */
|
||||
|
||||
:root {
|
||||
/* --primary-blue: #0054a4;
|
||||
--medium-blue: #286291;
|
||||
--dark-blue: #1a3668;
|
||||
--light-blue: #a4d7f4;
|
||||
--accent-orange: #ff9900;
|
||||
--light-gold: #ffc24a;
|
||||
--bg-dark: #0f172a;
|
||||
*/
|
||||
|
||||
/* Paleta de el tiempo */
|
||||
--color-primario: #F5F5F5;
|
||||
--color-hover: #1E3A5F;
|
||||
--color-secundario: #A1A1A1;
|
||||
--color-fondo: #0D0D0D;
|
||||
--color-texto: #E5E5E5;
|
||||
--blanco-puro: #FFFFFF;
|
||||
--sombra: rgba(47, 58, 86, 0.15);
|
||||
--color-tarjeta: #1A1A1A;
|
||||
--color-acento: #a4d7f4;
|
||||
--gray: #acb3bf;
|
||||
--color-borde: rgba(95, 174, 219, 0.3);
|
||||
--color-cabecera: rgba(0,0,0,0.80);
|
||||
|
||||
--bg-vs: #1e1e1e; /* Fondo principal */
|
||||
--bg-nav: #252526; /* Fondo de barra de navegación */
|
||||
--bg-card: #2d2d2d; /* Fondo de tarjetas/secciones */
|
||||
--keyword: #aaffff; /* Azul grisaceo */
|
||||
--string: #ce9178; /* Naranja/Salmón (textos) */
|
||||
--comment: #6a9955; /* Verde (comentarios) */
|
||||
--var-name: #9cdcfe; /* Azul claro (variables) */
|
||||
--text: #d4d4d4; /* Gris claro (texto normal) */
|
||||
--border-editor: #3e3e42; /* Color de bordes y líneas */
|
||||
|
||||
--bg: #1e1e1e;
|
||||
--bg-alt: #252526;
|
||||
--bg-hover: #2a2d2e;
|
||||
--border: #3c3c3c;
|
||||
--text: #d4d4d4;
|
||||
--text-muted: #858585;
|
||||
--accent: #007acc;
|
||||
--accent-2: #4ec9b0;
|
||||
--success: #6a9955;
|
||||
--error: #f44747;
|
||||
--warning: #d7ba7d;
|
||||
--sidebar-w: 290px;
|
||||
--topbar-h: 52px;
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
html { font-size: 16px; scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: Consolas, 'Roboto', 'Inter', sans-serif;
|
||||
background-color: var(--color-fondo);
|
||||
color: var(--color-texto);
|
||||
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* Navbar */
|
||||
.navbar {
|
||||
background-color: var(--color-cabecera); /* var(--color-cabecera) con opacidad */
|
||||
border-bottom: 2px solid var(--color-borde);
|
||||
a { color: var(--accent); text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
|
||||
/* ── Scrollbar ───────────────────────────────────────────── */
|
||||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
::-webkit-scrollbar-track { background: var(--bg); }
|
||||
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
|
||||
|
||||
/* ============================================================
|
||||
TOPBAR
|
||||
============================================================ */
|
||||
.topbar {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: var(--topbar-h);
|
||||
background: var(--bg-alt);
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 1.2rem;
|
||||
gap: 1rem;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-weight: bold;
|
||||
color: var(--color-acento) !important;
|
||||
.topbar-brand {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
color: var(--accent-2);
|
||||
letter-spacing: .02em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: var(--color-texto) !important;
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
.topbar-nav { display: flex; gap: .5rem; margin-left: auto; }
|
||||
|
||||
.topbar-nav a {
|
||||
padding: .35rem .85rem;
|
||||
border-radius: 6px;
|
||||
font-size: .85rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
transition: background .15s;
|
||||
}
|
||||
.topbar-nav a:hover,
|
||||
.topbar-nav a.active { background: var(--bg-hover); color: var(--accent-2); text-decoration: none; }
|
||||
|
||||
.topbar-progress {
|
||||
font-size: .8rem;
|
||||
color: var(--text-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: var(--color-acento) !important;
|
||||
/* hamburger (solo móvil) */
|
||||
.menu-toggle {
|
||||
display: none;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text);
|
||||
font-size: 1.4rem;
|
||||
cursor: pointer;
|
||||
padding: .2rem .4rem;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero-section {
|
||||
min-height: 80vh;
|
||||
/* ============================================================
|
||||
HOME – PÁGINA ÍNDICE
|
||||
============================================================ */
|
||||
.home-hero {
|
||||
margin-top: var(--topbar-h);
|
||||
padding: 3.5rem 2rem 2.5rem;
|
||||
text-align: center;
|
||||
background: linear-gradient(135deg, #252526 0%, #1e1e1e 100%);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: var(--color-acento);
|
||||
text-decoration: underline;
|
||||
font-style: italic;
|
||||
.home-hero h1 {
|
||||
font-size: 2.2rem;
|
||||
color: var(--accent-2);
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
.home-hero p {
|
||||
color: var(--text-muted);
|
||||
font-size: 1.05rem;
|
||||
max-width: 640px;
|
||||
margin: 0 auto 1.5rem;
|
||||
}
|
||||
|
||||
.celeste {
|
||||
color: var(--color-acento);
|
||||
text-decoration: underline;
|
||||
font-style: italic;
|
||||
.home-stats {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.stat-item { text-align: center; }
|
||||
.stat-num { font-size: 1.8rem; font-weight: 700; color: var(--accent); }
|
||||
.stat-lbl { font-size: .78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }
|
||||
|
||||
/* ── Cuenta atrás ──────────────────────────────────────────── */
|
||||
.countdown-wrap {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: .6rem;
|
||||
}
|
||||
.countdown-label {
|
||||
font-size: .8rem;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: .05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.countdown-units {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .35rem;
|
||||
}
|
||||
.cd-unit {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: var(--bg-alt);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: .5rem .8rem;
|
||||
min-width: 3.5rem;
|
||||
}
|
||||
.cd-num {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
line-height: 1;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.cd-lbl {
|
||||
font-size: .65rem;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .05em;
|
||||
margin-top: .2rem;
|
||||
}
|
||||
.cd-sep {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.btn-custom {
|
||||
background-color: var(--color-fondo);
|
||||
color: var(--color-texto);
|
||||
border-radius: 50px;
|
||||
padding: 12px 35px;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
transition: 0.3s;
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: .65rem 1.5rem;
|
||||
border-radius: 8px;
|
||||
font-size: .95rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: opacity .15s, transform .1s;
|
||||
}
|
||||
.btn:hover { opacity: .88; transform: translateY(-1px); text-decoration: none; }
|
||||
.btn-primary { background: var(--accent); color: #fff; }
|
||||
.btn-outline { background: transparent; border: 1.5px solid var(--accent); color: var(--accent); }
|
||||
.btn-secondary { background: var(--bg-hover); color: var(--text); }
|
||||
|
||||
/* Bloques grid */
|
||||
.bloques-section {
|
||||
max-width: 1100px;
|
||||
margin: 2.5rem auto;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
.bloques-section h2 {
|
||||
font-size: 1.2rem;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .1em;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.btn-custom:hover {
|
||||
background-color: var(--color-acento);
|
||||
color: var(--blanco-puro);
|
||||
transform: translateY(-3px);
|
||||
.bloques-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||
gap: 1.1rem;
|
||||
}
|
||||
|
||||
/* Cards de Proyectos */
|
||||
.section-title {
|
||||
border-left: 5px solid var(--bg-nav);
|
||||
padding-left: 15px;
|
||||
.bloque-card {
|
||||
background: var(--bg-alt);
|
||||
border: 1px solid var(--border);
|
||||
border-top: 3px solid var(--accent);
|
||||
border-radius: 10px;
|
||||
padding: 1.4rem;
|
||||
transition: border-color .2s, transform .15s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.bloque-card:nth-child(2) { border-top-color: #c586c0; }
|
||||
.bloque-card:nth-child(3) { border-top-color: var(--warning); }
|
||||
.bloque-card:nth-child(4) { border-top-color: var(--accent-2); }
|
||||
|
||||
.bloque-card:hover { transform: translateY(-3px); }
|
||||
|
||||
.bloque-num {
|
||||
font-size: .7rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .12em;
|
||||
color: var(--accent);
|
||||
margin-bottom: .4rem;
|
||||
}
|
||||
.bloque-card:nth-child(2) .bloque-num { color: #c586c0; }
|
||||
.bloque-card:nth-child(3) .bloque-num { color: var(--warning); }
|
||||
.bloque-card:nth-child(4) .bloque-num { color: var(--accent-2); }
|
||||
|
||||
.bloque-card h3 { font-size: 1.05rem; color: var(--text); margin-bottom: .5rem; line-height: 1.3; }
|
||||
.bloque-card p { font-size: .82rem; color: var(--text-muted); margin-bottom: 1rem; }
|
||||
|
||||
.bloque-temas-list {
|
||||
list-style: none;
|
||||
font-size: .8rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.bloque-temas-list li { padding: .18rem 0; border-bottom: 1px solid var(--border); }
|
||||
.bloque-temas-list li:last-child { border-bottom: none; }
|
||||
|
||||
/* Cuestionarios card */
|
||||
.quiz-card {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto 3rem;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
background-color: var(--color-tarjeta);
|
||||
border: 1px solid var(--color-borde);
|
||||
border-radius: 1.5rem;
|
||||
transition: 0.3s;
|
||||
overflow: hidden;
|
||||
.quiz-banner {
|
||||
background: linear-gradient(135deg, #1a2a3a 0%, #1e1e1e 100%);
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: 10px;
|
||||
padding: 1.6rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
border-color: var(--color-hover);
|
||||
transform: translateY(-10px);
|
||||
.quiz-banner-icon { font-size: 2.5rem; }
|
||||
.quiz-banner h3 { font-size: 1.2rem; color: var(--accent-2); margin-bottom: .3rem; }
|
||||
.quiz-banner p { color: var(--text-muted); font-size: .9rem; }
|
||||
.quiz-banner .btn { margin-left: auto; }
|
||||
|
||||
/* ============================================================
|
||||
PLAYER – CURSO
|
||||
============================================================ */
|
||||
.player-layout {
|
||||
display: flex;
|
||||
margin-top: var(--topbar-h);
|
||||
min-height: calc(100vh - var(--topbar-h));
|
||||
}
|
||||
|
||||
.card-img-placeholder {
|
||||
height: 180px;
|
||||
background-color: var(--color-borde);
|
||||
text-align: center;
|
||||
line-height: 180px;
|
||||
/* ── Sidebar ─────────────────────────────────────────────── */
|
||||
.sidebar {
|
||||
width: var(--sidebar-w);
|
||||
flex-shrink: 0;
|
||||
background: var(--bg-alt);
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
top: var(--topbar-h);
|
||||
bottom: 0;
|
||||
overflow-y: auto;
|
||||
transition: transform .25s ease;
|
||||
z-index: 90;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
color: var(--color-acento);
|
||||
background-color: var(--bg-nav);
|
||||
width: 100%;
|
||||
padding: 5px 10px;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
.sidebar-header {
|
||||
padding: 1rem 1.1rem .6rem;
|
||||
font-size: .7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: .12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.card-text {
|
||||
color: var(--color-texto) !important;
|
||||
/* Bloque agrupador */
|
||||
.bloque-group { border-bottom: 1px solid var(--border); }
|
||||
|
||||
.bloque-group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
padding: .7rem 1rem;
|
||||
cursor: pointer;
|
||||
font-size: .82rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .06em;
|
||||
user-select: none;
|
||||
transition: background .12s;
|
||||
}
|
||||
.bloque-group-header:hover { background: var(--bg-hover); }
|
||||
.bloque-group-header .chevron {
|
||||
margin-left: auto;
|
||||
font-size: .7rem;
|
||||
transition: transform .2s;
|
||||
}
|
||||
.bloque-group.open .chevron { transform: rotate(90deg); }
|
||||
|
||||
.bloque-group-items { display: none; }
|
||||
.bloque-group.open .bloque-group-items { display: block; }
|
||||
|
||||
.sidebar-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: .55rem;
|
||||
padding: .55rem 1rem .55rem 1.5rem;
|
||||
font-size: .82rem;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
transition: background .12s;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
.sidebar-item:hover { background: var(--bg-hover); }
|
||||
.sidebar-item.active {
|
||||
background: var(--bg-hover);
|
||||
border-left-color: var(--accent);
|
||||
color: var(--accent-2);
|
||||
}
|
||||
.sidebar-item .item-num {
|
||||
flex-shrink: 0;
|
||||
width: 1.3rem;
|
||||
font-size: .7rem;
|
||||
color: var(--text-muted);
|
||||
padding-top: .1rem;
|
||||
}
|
||||
|
||||
.card-tecnologia {
|
||||
font-size: 0.75rem;
|
||||
font-style: italic;
|
||||
color: var(--gray) !important;
|
||||
/* ── Content pane ────────────────────────────────────────── */
|
||||
.content-pane {
|
||||
flex: 1;
|
||||
margin-left: var(--sidebar-w);
|
||||
padding: 2.2rem 2.8rem;
|
||||
max-width: 860px;
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
color: var(--color-acento);
|
||||
text-decoration: none;
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
/* Spinner */
|
||||
.spinner {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 4rem;
|
||||
font-size: 1.4rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.btn-link:hover {
|
||||
color: var(--color-texto);
|
||||
/* Render Markdown */
|
||||
.md-body { line-height: 1.75; }
|
||||
|
||||
.md-body h1 { font-size: 1.9rem; color: var(--accent-2); margin: 0 0 1.2rem; border-bottom: 2px solid var(--border); padding-bottom: .5rem; }
|
||||
.md-body h2 { font-size: 1.35rem; color: var(--accent); margin: 1.8rem 0 .7rem; }
|
||||
.md-body h3 { font-size: 1.1rem; color: var(--warning); margin: 1.4rem 0 .5rem; }
|
||||
.md-body h4 { font-size: 1rem; color: var(--text-muted); margin: 1.2rem 0 .4rem; text-transform: uppercase; letter-spacing: .04em; }
|
||||
|
||||
.md-body p { margin-bottom: .9rem; }
|
||||
.md-body ul, .md-body ol { margin: .5rem 0 .9rem 1.6rem; }
|
||||
.md-body li { margin-bottom: .3rem; }
|
||||
|
||||
.md-body strong { color: #fff; }
|
||||
.md-body em { color: var(--warning); }
|
||||
|
||||
.md-body code {
|
||||
background: #2d2d2d;
|
||||
color: #ce9178;
|
||||
padding: .1em .35em;
|
||||
border-radius: 4px;
|
||||
font-family: 'JetBrains Mono', Consolas, monospace;
|
||||
font-size: .88em;
|
||||
}
|
||||
|
||||
.border-dashed {
|
||||
border: 2px dashed var(--color-borde) !important;
|
||||
background: transparent;
|
||||
.md-body pre {
|
||||
background: #1a1a1a;
|
||||
border: 1px solid var(--border);
|
||||
border-left: 3px solid var(--accent);
|
||||
border-radius: 6px;
|
||||
padding: 1rem 1.2rem;
|
||||
overflow-x: auto;
|
||||
margin: 1rem 0 1.2rem;
|
||||
}
|
||||
.md-body pre code { background: none; padding: 0; color: var(--text); font-size: .85rem; }
|
||||
|
||||
.md-body blockquote {
|
||||
border-left: 4px solid var(--accent-2);
|
||||
background: #1a2a2a;
|
||||
padding: .7rem 1rem;
|
||||
border-radius: 0 6px 6px 0;
|
||||
margin: 1rem 0;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
border-top: 1px solid var(--color-borde);
|
||||
color: var(--color-acento);
|
||||
.md-body table { border-collapse: collapse; width: 100%; margin: 1rem 0 1.2rem; font-size: .88rem; }
|
||||
.md-body th { background: #2d2d2d; color: var(--accent-2); text-align: left; padding: .55rem .8rem; border: 1px solid var(--border); }
|
||||
.md-body td { padding: .45rem .8rem; border: 1px solid var(--border); }
|
||||
.md-body tr:hover td { background: var(--bg-hover); }
|
||||
|
||||
.md-body hr { border: none; border-top: 1px solid var(--border); margin: 1.8rem 0; }
|
||||
|
||||
.md-body a { color: var(--accent); }
|
||||
|
||||
/* Navegación prev/next */
|
||||
.lesson-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 2.5rem;
|
||||
padding-top: 1.2rem;
|
||||
border-top: 1px solid var(--border);
|
||||
gap: 1rem;
|
||||
}
|
||||
.lesson-nav-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
padding: .6rem 1.2rem;
|
||||
border-radius: 8px;
|
||||
font-size: .88rem;
|
||||
font-weight: 600;
|
||||
background: var(--bg-alt);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
transition: background .15s, border-color .15s;
|
||||
}
|
||||
.lesson-nav-btn:hover { background: var(--bg-hover); border-color: var(--accent); color: var(--accent-2); text-decoration: none; }
|
||||
.lesson-nav-btn.disabled { opacity: .3; pointer-events: none; }
|
||||
|
||||
.lesson-pos { font-size: .8rem; color: var(--text-muted); text-align: center; }
|
||||
|
||||
/* ============================================================
|
||||
CUESTIONARIOS
|
||||
============================================================ */
|
||||
|
||||
/* ── Supuesto selector ──────────────────────────────────────── */
|
||||
.sup-sel-header { text-align: center; margin-bottom: 1.5rem; }
|
||||
.sup-sel-header h2 { font-size: 1.3rem; color: var(--accent); margin-bottom: .4rem; }
|
||||
.sup-sel-header p { color: var(--text-muted); font-size: .9rem; }
|
||||
|
||||
.sup-cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1.25rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.sup-card {
|
||||
background: var(--bg-alt);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
.sup-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
margin-bottom: .6rem;
|
||||
font-size: 1rem;
|
||||
color: var(--accent);
|
||||
}
|
||||
.sup-card-num {
|
||||
margin-left: auto;
|
||||
font-size: .8rem;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 20px;
|
||||
padding: .15rem .55rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.sup-card-desc { font-size: .85rem; color: var(--text-muted); margin-bottom: .75rem; line-height: 1.5; }
|
||||
.sup-material { margin-bottom: .75rem; }
|
||||
|
||||
/* Context hint inside question card */
|
||||
.supuesto-context {
|
||||
background: color-mix(in srgb, var(--accent) 8%, transparent);
|
||||
border-left: 3px solid var(--accent);
|
||||
border-radius: 0 6px 6px 0;
|
||||
padding: .6rem .9rem;
|
||||
font-size: .85rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.supuesto-context i { color: var(--accent); margin-right: .35rem; }
|
||||
|
||||
/* ── PDF docs bar ───────────────────────────────────────────── */
|
||||
.exam-pdfs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
background: var(--bg-alt);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: .6rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.exam-pdfs-label {
|
||||
font-size: .8rem;
|
||||
color: var(--text-muted);
|
||||
white-space: nowrap;
|
||||
margin-right: .25rem;
|
||||
}
|
||||
.exam-pdf-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .35rem;
|
||||
font-size: .8rem;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: .3rem .65rem;
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
transition: background .15s, border-color .15s;
|
||||
}
|
||||
.exam-pdf-link:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--accent); }
|
||||
|
||||
/* ── Repaso de fallos ────────────────────────────────────────── */
|
||||
.repaso-wrap {
|
||||
margin-top: 2rem;
|
||||
border-top: 1px solid var(--border);
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
.repaso-titulo {
|
||||
font-size: 1.1rem;
|
||||
color: var(--warning);
|
||||
margin-bottom: .5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
}
|
||||
.repaso-intro {
|
||||
font-size: .9rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
.repaso-grupo {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
margin-bottom: .75rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.repaso-grupo > summary {
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
padding: .7rem 1rem;
|
||||
background: var(--bg-alt);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: .5rem;
|
||||
user-select: none;
|
||||
}
|
||||
.repaso-grupo > summary::-webkit-details-marker { display: none; }
|
||||
.repaso-grupo[open] > summary { border-bottom: 1px solid var(--border); }
|
||||
.repaso-tema-name { font-size: .9rem; font-weight: 600; color: var(--fg); display: flex; align-items: center; gap: .45rem; }
|
||||
.repaso-tema-name i { color: var(--accent); }
|
||||
.repaso-badge {
|
||||
background: color-mix(in srgb, var(--error) 18%, transparent);
|
||||
color: var(--error);
|
||||
border: 1px solid color-mix(in srgb, var(--error) 35%, transparent);
|
||||
border-radius: 20px;
|
||||
font-size: .75rem;
|
||||
font-weight: 700;
|
||||
padding: .15rem .6rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.repaso-lista {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.repaso-item {
|
||||
padding: .75rem 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.repaso-item:last-child { border-bottom: none; }
|
||||
.repaso-q {
|
||||
font-size: .85rem;
|
||||
color: var(--fg);
|
||||
margin-bottom: .45rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.repaso-answers {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .25rem;
|
||||
}
|
||||
.repaso-ans {
|
||||
font-size: .8rem;
|
||||
padding: .25rem .5rem;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: .4rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.repaso-ans.ko {
|
||||
background: color-mix(in srgb, var(--error) 12%, transparent);
|
||||
color: var(--error);
|
||||
}
|
||||
.repaso-ans.ok {
|
||||
background: color-mix(in srgb, var(--success) 12%, transparent);
|
||||
color: var(--success);
|
||||
}
|
||||
.repaso-link-tema {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .4rem;
|
||||
font-size: .82rem;
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
padding: .5rem 1rem;
|
||||
background: color-mix(in srgb, var(--accent) 8%, transparent);
|
||||
border-top: 1px solid var(--border);
|
||||
width: 100%;
|
||||
transition: background .15s;
|
||||
}
|
||||
.repaso-link-tema:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
|
||||
.repaso-perfecto {
|
||||
text-align: center;
|
||||
font-size: .95rem;
|
||||
color: var(--success);
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: .5rem;
|
||||
}
|
||||
.repaso-perfecto i { color: var(--warning); font-size: 1.1rem; }
|
||||
|
||||
/* ── Layout ─────────────────────────────────────────────────── */
|
||||
.quiz-layout {
|
||||
margin-top: var(--topbar-h);
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 2rem 1.5rem;
|
||||
}
|
||||
|
||||
/* --- Ajuste para dispositivos pequeños --- */
|
||||
@media (max-width: 600px) {
|
||||
header h1 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.quiz-header { margin-bottom: 2rem; text-align: center; }
|
||||
.quiz-header h1 { font-size: 1.8rem; color: var(--accent-2); margin-bottom: .4rem; }
|
||||
.quiz-header p { color: var(--text-muted); font-size: .95rem; }
|
||||
|
||||
nav ul {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
gap: 1.2rem;
|
||||
}
|
||||
.quiz-controls {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.contact-links a {
|
||||
color: var(--color-acento);
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
transition: 0.3s;
|
||||
.quiz-select {
|
||||
padding: .55rem 1rem;
|
||||
background: var(--bg-alt);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
border-radius: 8px;
|
||||
font-size: .95rem;
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
max-width: 360px;
|
||||
}
|
||||
.quiz-select:focus { outline: none; border-color: var(--accent); }
|
||||
|
||||
.quiz-scoreboard {
|
||||
display: flex;
|
||||
gap: 1.2rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 1.8rem;
|
||||
}
|
||||
.score-chip {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: var(--bg-alt);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: .7rem 1.4rem;
|
||||
min-width: 90px;
|
||||
}
|
||||
.score-chip .val { font-size: 1.6rem; font-weight: 700; }
|
||||
.score-chip .lbl { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }
|
||||
.score-chip.aciertos .val { color: var(--success); }
|
||||
.score-chip.fallos .val { color: var(--error); }
|
||||
.score-chip.total .val { color: var(--accent); }
|
||||
|
||||
.question-card {
|
||||
background: var(--bg-alt);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 1.8rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
background-color: var(--color-tarjeta);
|
||||
border-left: 1px solid var(--color-primario);
|
||||
margin-bottom: 1.5rem;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.question-num {
|
||||
font-size: .75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .1em;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: .6rem;
|
||||
}
|
||||
.question-text {
|
||||
font-size: 1.05rem;
|
||||
color: var(--text);
|
||||
margin-bottom: 1.3rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.options-list { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
|
||||
|
||||
.option-label {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: .75rem;
|
||||
padding: .75rem 1rem;
|
||||
border-radius: 8px;
|
||||
border: 1.5px solid var(--border);
|
||||
cursor: pointer;
|
||||
transition: border-color .15s, background .15s;
|
||||
font-size: .95rem;
|
||||
}
|
||||
.option-label:hover { border-color: var(--accent); background: var(--bg-hover); }
|
||||
.option-label input { margin-top: .15rem; accent-color: var(--accent); }
|
||||
.option-label.correct { border-color: var(--success); background: #1a2a1a; color: #6a9955; }
|
||||
.option-label.incorrect { border-color: var(--error); background: #2a1a1a; color: var(--error); }
|
||||
.option-letter {
|
||||
flex-shrink: 0;
|
||||
width: 1.4rem;
|
||||
font-weight: 700;
|
||||
color: var(--accent-2);
|
||||
font-size: .88rem;
|
||||
}
|
||||
|
||||
.question-feedback {
|
||||
margin-top: 1rem;
|
||||
padding: .75rem 1rem;
|
||||
border-radius: 8px;
|
||||
font-size: .9rem;
|
||||
font-weight: 600;
|
||||
display: none;
|
||||
}
|
||||
.question-feedback.show { display: block; }
|
||||
.question-feedback.ok { background: #1a2a1a; border: 1px solid var(--success); color: var(--success); }
|
||||
.question-feedback.ko { background: #2a1a1a; border: 1px solid var(--error); color: var(--error); }
|
||||
|
||||
.quiz-nav-row { display: flex; justify-content: flex-end; margin-top: 1rem; }
|
||||
|
||||
.final-screen {
|
||||
text-align: center;
|
||||
padding: 3rem 1rem;
|
||||
}
|
||||
.final-screen h2 { font-size: 1.8rem; color: var(--accent-2); margin-bottom: 1rem; }
|
||||
.final-score-big { font-size: 3rem; font-weight: 700; color: var(--accent); margin-bottom: .3rem; }
|
||||
.final-score-sub { color: var(--text-muted); margin-bottom: 2rem; }
|
||||
|
||||
/* Empty state */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 4rem 1rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.empty-state i { font-size: 3rem; margin-bottom: 1rem; display: block; }
|
||||
|
||||
/* ============================================================
|
||||
RESPONSIVE
|
||||
============================================================ */
|
||||
@media (max-width: 768px) {
|
||||
.menu-toggle { display: block; }
|
||||
|
||||
.sidebar {
|
||||
transform: translateX(-100%);
|
||||
width: min(var(--sidebar-w), 85vw);
|
||||
}
|
||||
.sidebar.open { transform: translateX(0); }
|
||||
|
||||
.content-pane { margin-left: 0; padding: 1.2rem 1rem; }
|
||||
|
||||
.home-hero h1 { font-size: 1.5rem; }
|
||||
.bloques-grid { grid-template-columns: 1fr; }
|
||||
|
||||
.quiz-layout { padding: 1rem; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -133,6 +133,10 @@
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Análisis de fallos -->
|
||||
<div id="repaso-wrap" class="repaso-wrap" style="display:none"></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,13 +5,38 @@
|
|||
*/
|
||||
|
||||
// ── Estado ──────────────────────────────────────────────────
|
||||
let preguntas = [];
|
||||
let supuestosData = {}; // { "Supuesto I": [...], "Supuesto II": [...] }
|
||||
let faseActual = 'test'; // 'test' | 'supuesto'
|
||||
let indice = 0;
|
||||
let aciertos = 0;
|
||||
let fallos = 0;
|
||||
let respondida = false;
|
||||
let preguntas = [];
|
||||
let supuestosData = {}; // { "Supuesto I": [...], "Supuesto II": [...] }
|
||||
let faseActual = 'test'; // 'test' | 'supuesto'
|
||||
let indice = 0;
|
||||
let aciertos = 0;
|
||||
let fallos = 0;
|
||||
let respondida = false;
|
||||
let preguntasFalladas = []; // { pregunta, elegida }
|
||||
|
||||
// ── Mapa de temas y palabras clave ──────────────────────────
|
||||
const TEMAS_KW = [
|
||||
{ id:'const', label:'Constitución Española', link:'../curso.html?bloque=1', kw:['constitución','constitucional','rey ','cortes generales','senado','congreso','diputad','tribunal constitucional','defensor del pueblo','artículo 62','artículo 63','título i','título ii','artículo 1 ','capítulo'] },
|
||||
{ id:'p39', label:'Procedimiento Adm. (Ley 39/2015)', link:'../curso.html?bloque=1', kw:['ley 39','procedimiento administrativo','recurso de alzada','silencio administrativo','notificación','expediente administrativo','recurso potestativo','recurso extraordinario'] },
|
||||
{ id:'p40', label:'Régimen Jurídico (Ley 40/2015)', link:'../curso.html?bloque=1', kw:['ley 40','órgano colegiado','delegación de competencia','avocación','administración general del estado','convenio interadministrativo'] },
|
||||
{ id:'lcsp', label:'Contratación Pública (LCSP)', link:'../curso.html?bloque=1', kw:['contratos del sector público','lcsp','licitación','adjudicación','pliego','contrato menor','concesión de servicios','poder adjudicador'] },
|
||||
{ id:'trebep', label:'Función Pública (TREBEP)', link:'../curso.html?bloque=1', kw:['trebep','funcionario','empleado público','oposición','provisión de puestos','situaciones administrativas','excedencia','régimen disciplinario','carrera profesional'] },
|
||||
{ id:'hac', label:'Hacienda Pública / Presupuestos', link:'../curso.html?bloque=1', kw:['presupuesto','hacienda pública','igae','tribunal de cuentas','crédito presupuestario','gasto público','control financiero','intervención general'] },
|
||||
{ id:'html', label:'HTML / CSS / JavaScript', link:'../curso.html?bloque=3', kw:['html','css','javascript','dom','<input','etiqueta','formulario web','diseño web','responsive','selector css'] },
|
||||
{ id:'bd', label:'Bases de Datos / SQL', link:'../curso.html?bloque=3', kw:['sql','select ','join','base de datos','normalización','índice','relacional','trigger','procedimiento almacenado','sgbd','tabla '] },
|
||||
{ id:'prog', label:'Programación / Algoritmos', link:'../curso.html?bloque=3', kw:['algoritmo','lenguaje de programación','java ','python','c# ','compilad','interpreta','orientado a objetos','array','recursiv','metodología ágil','scrum','git'] },
|
||||
{ id:'redes', label:'Redes y Comunicaciones', link:'../curso.html?bloque=4', kw:['tcp/ip','protocolo','router','switch','vlan','dirección ip','máscara de red','ethernet','arp','dns','dhcp','ospf','bgp','mpls'] },
|
||||
{ id:'seg', label:'Seguridad Informática', link:'../curso.html?bloque=4', kw:['cifrado','criptografía','firma digital','certificado digital','ssl','tls','vpn','firewall','ciberincidente','autenticación','hash','ransomware','ids ','ips '] },
|
||||
{ id:'so', label:'Sistemas Operativos / Hardware', link:'../curso.html?bloque=2', kw:['sistema operativo','linux','windows server','proceso','kernel','sistema de ficheros','raid','virtualización','contenedor','cpu','procesador','memoria ram'] },
|
||||
];
|
||||
|
||||
function detectarTema(txt) {
|
||||
const t = txt.toLowerCase();
|
||||
for (const tema of TEMAS_KW) {
|
||||
if (tema.kw.some(k => t.includes(k))) return tema;
|
||||
}
|
||||
return { id:'otro', label:'Otros / Material general', link:'../curso.html' };
|
||||
}
|
||||
|
||||
// ── Elementos DOM ────────────────────────────────────────────
|
||||
const selExamen = document.getElementById('sel-examen');
|
||||
|
|
@ -107,11 +132,12 @@ async function iniciarExamen() {
|
|||
return;
|
||||
}
|
||||
|
||||
faseActual = 'test';
|
||||
indice = 0;
|
||||
aciertos = 0;
|
||||
fallos = 0;
|
||||
respondida = false;
|
||||
faseActual = 'test';
|
||||
indice = 0;
|
||||
aciertos = 0;
|
||||
fallos = 0;
|
||||
respondida = false;
|
||||
preguntasFalladas = [];
|
||||
|
||||
mostrarSolo('quiz');
|
||||
actualizarMarcador();
|
||||
|
|
@ -155,12 +181,13 @@ function mostrarSelectorSupuesto() {
|
|||
}
|
||||
|
||||
function iniciarSupuesto(nombre) {
|
||||
preguntas = supuestosData[nombre] || [];
|
||||
faseActual = 'supuesto';
|
||||
indice = 0;
|
||||
aciertos = 0;
|
||||
fallos = 0;
|
||||
respondida = false;
|
||||
preguntas = supuestosData[nombre] || [];
|
||||
faseActual = 'supuesto';
|
||||
indice = 0;
|
||||
aciertos = 0;
|
||||
fallos = 0;
|
||||
respondida = false;
|
||||
preguntasFalladas = [];
|
||||
mostrarSolo('quiz');
|
||||
actualizarMarcador();
|
||||
mostrarPregunta();
|
||||
|
|
@ -237,8 +264,7 @@ function comprobar(p) {
|
|||
elFeedback.textContent = '✔ ¡Correcto!';
|
||||
elFeedback.className = 'question-feedback show ok';
|
||||
} else {
|
||||
fallos++;
|
||||
elFeedback.textContent = `✘ Incorrecto. La respuesta correcta era la ${p.correcta.toUpperCase()})`;
|
||||
fallos++; preguntasFalladas.push({ pregunta: p, elegida: marcada.value }); elFeedback.textContent = `✘ Incorrecto. La respuesta correcta era la ${p.correcta.toUpperCase()})`;
|
||||
elFeedback.className = 'question-feedback show ko';
|
||||
}
|
||||
|
||||
|
|
@ -283,6 +309,54 @@ function finalizarExamen() {
|
|||
const notaNum = parseFloat(nota);
|
||||
const color = notaNum >= 5 ? 'var(--success)' : notaNum >= 4 ? 'var(--warning)' : 'var(--error)';
|
||||
document.getElementById('final-nota').style.color = color;
|
||||
|
||||
renderRepaso();
|
||||
}
|
||||
|
||||
function renderRepaso() {
|
||||
const wrap = document.getElementById('repaso-wrap');
|
||||
if (!wrap) return;
|
||||
|
||||
if (preguntasFalladas.length === 0) {
|
||||
wrap.innerHTML = '<p class="repaso-perfecto"><i class="fas fa-star"></i> ¡Sin fallos! Dominas todo el temario de este examen.</p>';
|
||||
wrap.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
|
||||
// Agrupar fallos por tema detectado
|
||||
const grupos = {};
|
||||
for (const { pregunta, elegida } of preguntasFalladas) {
|
||||
const tema = detectarTema(pregunta.pregunta);
|
||||
if (!grupos[tema.id]) grupos[tema.id] = { tema, items: [] };
|
||||
grupos[tema.id].items.push({ pregunta, elegida });
|
||||
}
|
||||
|
||||
const n = preguntasFalladas.length;
|
||||
wrap.innerHTML = `
|
||||
<h3 class="repaso-titulo"><i class="fas fa-exclamation-triangle"></i> Necesitas repasar</h3>
|
||||
<p class="repaso-intro">Has fallado <strong>${n}</strong> pregunta${n > 1 ? 's' : ''}. Estos son los temas donde debes reforzar:</p>
|
||||
${Object.values(grupos).map(g => `
|
||||
<details class="repaso-grupo" open>
|
||||
<summary class="repaso-tema">
|
||||
<span class="repaso-tema-name"><i class="fas fa-book"></i> ${escHtml(g.tema.label)}</span>
|
||||
<span class="repaso-badge">${g.items.length} fallo${g.items.length > 1 ? 's' : ''}</span>
|
||||
</summary>
|
||||
<ul class="repaso-lista">
|
||||
${g.items.map(({ pregunta: p, elegida }) => `
|
||||
<li class="repaso-item">
|
||||
<p class="repaso-q">${escHtml(p.pregunta.length > 140 ? p.pregunta.slice(0,140)+'…' : p.pregunta)}</p>
|
||||
<div class="repaso-answers">
|
||||
<span class="repaso-ans ko"><i class="fas fa-times"></i> Tu resp.: ${elegida.toUpperCase()}) ${escHtml((p.opciones[elegida]||'').length > 70 ? p.opciones[elegida].slice(0,70)+'…' : (p.opciones[elegida]||''))}</span>
|
||||
<span class="repaso-ans ok"><i class="fas fa-check"></i> Correcta: ${p.correcta.toUpperCase()}) ${escHtml((p.opciones[p.correcta]||'').length > 70 ? p.opciones[p.correcta].slice(0,70)+'…' : (p.opciones[p.correcta]||''))}</span>
|
||||
</div>
|
||||
</li>
|
||||
`).join('')}
|
||||
</ul>
|
||||
<a href="${g.tema.link}" class="repaso-link-tema"><i class="fas fa-book-open"></i> Estudiar este tema</a>
|
||||
</details>
|
||||
`).join('')}
|
||||
`;
|
||||
wrap.style.display = 'block';
|
||||
}
|
||||
|
||||
// ── Helpers ───────────────────────────────────────────────────
|
||||
|
|
|
|||
Loading…
Reference in New Issue