/* Tema base: Define la paleta por defecto y las variables compartidas por todas las páginas. Luego cada página puede sobrescribir estas variables con una clase en . */ :root { --bg: #f8fafc; --card: #ffffff; --text: #0f172a; --muted: #475569; --border: #e2e8f0; --code-bg: #0f172a; --code-text: #f8fafc; --shadow: 0 6px 18px rgba(15, 23, 42, 0.06); --radius: 18px; --tag-bg: #e0f2fe; --tag-text: #075985; --accent-soft: #f1f5f9; --accent-border: #cbd5e1; --accent-strong: #0ea5e9; --accent-contrast: #ffffff; --hero-bg: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); } /* Tema Linux: Sobrescribe solo variables, así el resto de componentes reutiliza los mismos estilos. */ body.theme-linux { --bg: #f3f8ff; --card: #ffffff; --text: #0f172a; --muted: #48627d; --border: #d8e6f8; --tag-bg: #dbeafe; --tag-text: #1d4ed8; --accent-soft: #e0f2fe; --accent-border: #93c5fd; --accent-strong: #2563eb; --accent-contrast: #eff6ff; --hero-bg: linear-gradient(135deg, #f8fbff 0%, #e0f2fe 100%); } /* Tema de la portada: Usa verdes suaves para que la página inicial se sienta más "fresca" y motivacional. */ body.theme-home { --bg: #f4fbf6; --card: #ffffff; --text: #123524; --muted: #4f6f5c; --border: #d4ebd8; --tag-bg: #ddf6e4; --tag-text: #1f7a3f; --accent-soft: #dff7e6; --accent-border: #8fd0a3; --accent-strong: #15803d; --accent-contrast: #effcf2; --hero-bg: linear-gradient(135deg, #f8fff9 0%, #dff7e6 100%); } /* Tema Git: Mantiene la misma estructura visual, pero cambia la identidad cromática a rojos suaves. */ body.theme-git { --bg: #fff5f5; --card: #fffdfd; --text: #4a1414; --muted: #7f3b3b; --border: #f3c9c9; --tag-bg: #ffe2e2; --tag-text: #b42318; --accent-soft: #ffe4e6; --accent-border: #fda4af; --accent-strong: #dc2626; --accent-contrast: #fff1f2; --hero-bg: linear-gradient(135deg, #fffafa 0%, #ffe4e6 100%); } /* Tema del juego: Usa tonos amarillos y azules para diferenciar la práctica del contenido de consulta. */ body.theme-game { --bg: #f7fbff; --card: #ffffff; --text: #172033; --muted: #516173; --border: #dbe7f3; --tag-bg: #fef3c7; --tag-text: #92400e; --accent-soft: #fff7d6; --accent-border: #f4c95d; --accent-strong: #1d4ed8; --accent-contrast: #f8fbff; --hero-bg: linear-gradient(135deg, #ffffff 0%, #eef6ff 100%); } /* Hace que width/height incluyan padding y border. Evita cálculos inesperados al construir layouts con grid/flex. */ * { box-sizing: border-box; } /* Permite desplazamiento suave al navegar a anclas internas de sección. */ html { scroll-behavior: smooth; } /* Estilos globales del documento: Usa las variables del tema activo para fondo, texto y ritmo vertical. */ body { margin: 0; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; } /* Header fijo: Se mantiene visible al hacer scroll y usa blur para dar sensación de capa flotante. */ header { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } /* Contenedor horizontal común: Limita el ancho máximo y centra el contenido principal. */ .container { max-width: 1280px; margin: 0 auto; padding: 0 24px; } /* Alinea el título del header con la navegación y badge superior. */ .header-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; flex-wrap: wrap; } /* Agrupa badge + links del header cuando existen en la misma fila. */ .header-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; } /* Pequeña etiqueta informativa del header. */ .badge { background: var(--accent-soft); border: 1px solid var(--accent-border); padding: 10px 14px; border-radius: 999px; font-size: 14px; color: var(--muted); white-space: nowrap; } /* Título principal de cada página. */ h1 { margin: 0; font-size: 2rem; line-height: 1.1; } /* Texto secundario bajo el título principal. */ .subtitle { margin-top: 8px; color: var(--muted); font-size: 0.98rem; } /* Navegación superior entre páginas: Se usa tanto en portada como en Linux/Git. */ .page-links { display: flex; gap: 10px; flex-wrap: wrap; } /* Cada link parece una pastilla para reforzar visualmente la navegación global. */ .page-links a { text-decoration: none; color: var(--muted); background: white; border: 1px solid var(--border); padding: 10px 14px; border-radius: 999px; font-size: 0.92rem; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } /* Estado hover/activo para reforzar la página actual o el elemento interactivo. */ .page-links a:hover, .page-links a.active { color: var(--text); background: var(--accent-soft); border-color: var(--accent-border); } /* Espacio vertical general del contenido principal. */ main { padding: 32px 0 56px; } /* Primer bloque informativo en páginas de contenido: Dos columnas, una más ancha para "cómo usar" y otra más corta para "escalabilidad". */ .intro-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 28px; } /* Tarjeta reutilizable: Es la base visual de secciones, filtros, portada y bloques informativos. */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; } /* Layout principal de páginas Linux/Git: Sidebar a la izquierda y contenido grande a la derecha. */ .layout { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; } /* El menú lateral queda fijo mientras recorres las secciones. */ aside { position: sticky; top: 106px; } /* Estos elementos comparten peso alto para actuar como encabezados visuales. */ .nav-title, .section-title, .label { font-weight: 700; } /* Lista vertical de links del menú lateral. */ .nav-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } /* Links internos de sección dentro del sidebar. */ .nav-list a { text-decoration: none; color: var(--muted); padding: 10px 12px; border-radius: 12px; transition: background 0.2s ease, color 0.2s ease; } /* Realce al pasar el mouse por una entrada del menú lateral. */ .nav-list a:hover { background: var(--accent-soft); color: var(--text); } /* Columna que apila las secciones de contenido una debajo de otra. */ .sections { display: flex; flex-direction: column; gap: 24px; } /* Evita que el título de una sección quede oculto detrás del header sticky cuando llegas a ella mediante un anchor (#id). */ .section-card { scroll-margin-top: 110px; } /* Contenedor vertical para los items de una sección. */ .items { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; } /* Tarjeta individual para cada comando o entrada del JSON. */ .item { border: 1px solid var(--border); background: #f8fafc; border-radius: 16px; padding: 18px; } /* Etiquetas pequeñas tipo "Comando", "Descripción", "Notas", etc. */ .label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: #64748b; margin-bottom: 8px; } /* Bloque visual para comandos: Usa fondo oscuro para separar claramente código de texto descriptivo. */ pre { margin: 0; overflow-x: auto; background: var(--code-bg); color: var(--code-text); padding: 14px; border-radius: 14px; font-size: 0.92rem; line-height: 1.45; white-space: pre-wrap; /* Evita que un comando/URL muy largo sin espacios desborde en móvil: rompe la palabra solo cuando no cabe. */ overflow-wrap: anywhere; } /* Estilo base de párrafos en tarjetas y bloques informativos. */ p { margin: 0; color: var(--muted); } /* Conserva saltos de línea del JSON en campos como "Ejemplo" sin perder el ajuste automático dentro de la tarjeta. */ .multiline-text { white-space: pre-wrap; } /* Estas tres rejillas se reutilizan dentro de cada item: item-grid para contenido principal, meta-grid para nivel/confianza/fecha, extra-grid para notas/tags. */ .item-grid, .meta-grid, .extra-grid { display: grid; gap: 18px; margin-top: 14px; } /* Dos columnas para descripción/caso de uso y problema/ejemplo. */ .item-grid { grid-template-columns: 1fr 1fr; } /* Tres columnas para metadatos compactos. */ .meta-grid { grid-template-columns: repeat(3, 1fr); } /* Dos columnas para bloques complementarios. */ .extra-grid { grid-template-columns: 1fr 1fr; } /* Cajas internas secundarias dentro de cada item. */ .meta-box, .extra-box, .related-box { border: 1px solid var(--border); border-radius: 14px; background: white; padding: 14px; margin-top: 14px; } /* Contenedor flexible para mostrar múltiples tags. */ .tags { display: flex; flex-wrap: wrap; gap: 8px; } /* Pastilla visual para cada tag. */ .tag { display: inline-block; background: var(--tag-bg); color: var(--tag-text); padding: 6px 10px; border-radius: 999px; font-size: 0.84rem; font-weight: 600; } /* Lista de comandos o conceptos relacionados. */ .related-list { margin: 0; padding-left: 18px; color: var(--muted); } /* Utilidad para texto atenuado. */ .muted { color: var(--muted); } /* Primer bloque responsive: Colapsa layouts complejos a una sola columna en pantallas medianas/pequeñas. */ @media (max-width: 900px) { .intro-grid, .layout, .item-grid, .meta-grid, .extra-grid { grid-template-columns: 1fr; } aside { position: static; } .badge { width: fit-content; } } /* Tarjeta que contiene buscador y filtro por tags. */ .filters-card { margin-bottom: 24px; } /* Rejilla del área de filtros: Campo de búsqueda ancho + select más compacto. */ .filters-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; margin-top: 16px; } /* Apariencia común de inputs y selects. */ .filters-grid input, .filters-grid select { width: 100%; /* min-height 44px = objetivo táctil cómodo en móvil. font-size 1rem (16px) evita el zoom automático de iOS al enfocar el campo. */ min-height: 44px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; font-size: 1rem; background: white; color: var(--text); } /* Estado enfocado: Usa color del tema actual para que Linux/Git/Home se sientan coherentes. */ .filters-grid input:focus, .filters-grid select:focus { outline: none; border-color: var(--accent-border); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-strong) 18%, white); } /* Texto que muestra cuántos resultados hay visibles. */ .results-info { margin-top: 14px; color: var(--muted); font-size: 0.95rem; } /* Hero principal de la portada. Usa el gradiente del tema activo. */ .home-hero { margin-bottom: 24px; background: var(--hero-bg); } /* Divide el hero en dos columnas: texto motivacional + imagen/ilustración. */ .home-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 24px; align-items: center; } /* Nota secundaria en el hero para reforzar el mensaje. */ .hero-note { margin-top: 14px; max-width: 48ch; } /* Centra la ilustración dentro de su columna. */ .hero-art-wrap { display: flex; justify-content: center; } /* Imagen principal de la portada. */ .hero-art { width: 100%; max-width: 460px; height: auto; border-radius: 22px; border: 1px solid var(--accent-border); box-shadow: 0 16px 34px rgba(21, 128, 61, 0.12); background: white; } /* Texto pequeño decorativo usado en portada: "eyebrow" arriba del hero y etiqueta de cada tarjeta. */ .eyebrow, .home-card-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-strong); font-weight: 700; } /* Rejilla de acceso rápido a Linux y Git en la portada. */ .home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } /* Tarjeta clicable de portada para entrar a cada guía. */ .home-card { display: block; text-decoration: none; color: inherit; background: linear-gradient(180deg, var(--card) 0%, var(--accent-contrast) 100%); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } /* Ligero levantamiento al pasar el mouse para que parezca interactiva. */ .home-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); border-color: var(--accent-border); } /* Espaciado del título dentro de cada tarjeta de portada. */ .home-card h2 { margin: 10px 0 8px; } /* Color secundario del texto descriptivo en tarjetas de portada. */ .home-card p { color: var(--muted); } /* Contenedor principal del juego. */ .game-shell { max-width: 960px; } /* Paneles del juego: Mantienen el flujo compacto de selección, preguntas y resultado. */ .game-panel { background: var(--hero-bg); } .hidden { display: none !important; } /* Rejilla para elegir Linux o Git. */ .topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; } /* Botones de tema con contenido de apoyo. */ .topic-button { width: 100%; min-height: 142px; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: white; color: var(--text); text-align: left; cursor: pointer; box-shadow: var(--shadow); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .topic-button:hover { transform: translateY(-2px); border-color: var(--accent-border); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); } .topic-button span { display: block; font-size: 1.45rem; font-weight: 800; margin-bottom: 8px; } .topic-button small { display: block; color: var(--muted); font-size: 0.95rem; line-height: 1.45; } /* Cabecera interna del quiz con avance y puntuación. */ .game-status { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .score-pill { background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: 999px; color: var(--text); font-weight: 700; padding: 10px 14px; } /* Barra de progreso del cuestionario. */ .progress-track { height: 10px; background: white; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin: 18px 0 22px; } .progress-bar { width: 0; height: 100%; background: var(--accent-strong); transition: width 0.25s ease; } .question-text { color: var(--text); font-size: 1.15rem; font-weight: 700; margin-bottom: 18px; } /* Opciones de respuesta. */ .answer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .answer-button, .primary-button, .secondary-button { border: 1px solid var(--border); border-radius: 14px; cursor: pointer; font: inherit; font-weight: 700; } .answer-button { min-height: 70px; padding: 14px; background: white; color: var(--text); text-align: left; word-break: break-word; } .answer-button:hover:not(:disabled) { border-color: var(--accent-border); background: var(--accent-soft); } .answer-button.correct { border-color: #16a34a; background: #dcfce7; color: #14532d; } .answer-button.incorrect { border-color: #dc2626; background: #fee2e2; color: #7f1d1d; } .feedback { min-height: 28px; margin-top: 16px; font-weight: 700; color: var(--text); } .explanation { min-height: 20px; margin-top: 8px; font-size: 0.88rem; color: var(--muted, #6b7280); font-style: italic; } .game-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; } .primary-button, .secondary-button { padding: 12px 16px; } .primary-button { background: var(--accent-strong); border-color: var(--accent-strong); color: white; } .secondary-button { background: white; color: var(--text); } .primary-button:hover, .secondary-button:hover { filter: brightness(0.97); } .confetti-canvas { position: fixed; inset: 0; z-index: 100; pointer-events: none; } /* Segundo bloque responsive: Ajusta filtros y portada a una sola columna en móvil. */ @media (max-width: 900px) { .filters-grid { grid-template-columns: 1fr; } .home-grid { grid-template-columns: 1fr; } .home-hero-grid { grid-template-columns: 1fr; } .topic-grid, .answer-grid { grid-template-columns: 1fr; } } /* Tercer bloque responsive (teléfonos): Ajusta tipografía, espaciados y la navegación del header para pantallas angostas. */ @media (max-width: 600px) { /* Menos aire lateral para aprovechar el ancho reducido. */ .container { padding: 0 16px; } main { padding: 24px 0 44px; } /* Título más compacto para que no se coma la pantalla. */ h1 { font-size: 1.55rem; } /* Header apilado: identidad arriba, acciones/navegación abajo a la izquierda. */ .header-inner { padding: 16px 0; } .header-actions { justify-content: flex-start; width: 100%; } /* El badge deja de forzar una sola línea y puede envolver. */ .badge { white-space: normal; } /* La navegación global ocupa todo el ancho y reparte los enlaces para que sean fáciles de tocar y no se compriman. */ .page-links { width: 100%; } .page-links a { flex: 1 1 auto; text-align: center; } /* Tarjetas y secciones con padding más ajustado en móvil. */ .card { padding: 18px; } .item { padding: 14px; } /* Con header apilado el offset del sticky es menor. */ .section-card { scroll-margin-top: 88px; } aside { top: 88px; } /* Cabecera del quiz apilada para no comprimir el marcador. */ .game-status { flex-direction: column; align-items: stretch; } }