/* ============================================================ Material Design 3 — sistema de diseño (piloto: quiz.html) Tokens MD3 generados desde el color semilla #007FFF. Tema oscuro en :root, tema claro en :root.theme-light. Solo se aplica a paginas con . ============================================================ */ /* ---- Tokens MD3: esquema OSCURO (por defecto) ---- */ :root { --md-sys-color-primary: #9fc9ff; --md-sys-color-on-primary: #00325b; --md-sys-color-primary-container: #1a4b7c; --md-sys-color-on-primary-container: #d2e4ff; --md-sys-color-secondary: #bcc7dc; --md-sys-color-on-secondary: #263141; --md-sys-color-secondary-container: #3d4758; --md-sys-color-on-secondary-container: #d8e3f8; --md-sys-color-tertiary: #c7c2ea; --md-sys-color-on-tertiary: #2f2d4f; --md-sys-color-tertiary-container: #454267; --md-sys-color-on-tertiary-container: #e4dfff; --md-sys-color-error: #ffb4ab; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000a; --md-sys-color-on-error-container: #ffdad6; --md-sys-color-background: #111418; --md-sys-color-on-background: #e1e2e8; --md-sys-color-surface: #111418; --md-sys-color-on-surface: #e1e2e8; --md-sys-color-surface-variant: #43474e; --md-sys-color-on-surface-variant: #c3c6cf; --md-sys-color-surface-container-lowest: #0c0e12; --md-sys-color-surface-container-low: #191c20; --md-sys-color-surface-container: #1d2024; --md-sys-color-surface-container-high: #272a2e; --md-sys-color-surface-container-highest: #323539; --md-sys-color-outline: #8d9199; --md-sys-color-outline-variant: #43474e; --md-sys-color-inverse-surface: #e1e2e8; --md-sys-color-inverse-on-surface: #2e3135; --md-sys-color-inverse-primary: #36618e; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; /* Roles extra (MD3 no define "success"; lo añadimos para respuestas correctas) */ --mdq-success: #6dd58c; --mdq-on-success: #00391c; --mdq-success-container: #00522e; --mdq-on-success-container: #88f8a6; /* Elevacion */ --mdq-elev-1: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px 1px rgba(0, 0, 0, .15); --mdq-elev-2: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px 2px rgba(0, 0, 0, .15); /* Forma */ --mdq-shape-s: 12px; --mdq-shape-m: 16px; --mdq-shape-l: 28px; } /* ---- Tokens MD3: esquema CLARO ---- */ :root.theme-light { --md-sys-color-primary: #36618e; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #d2e4ff; --md-sys-color-on-primary-container: #001d36; --md-sys-color-secondary: #545f71; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #d8e3f8; --md-sys-color-on-secondary-container: #111c2b; --md-sys-color-tertiary: #5d5c7e; --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #e4dfff; --md-sys-color-on-tertiary-container: #1a1a37; --md-sys-color-error: #ba1a1a; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #ffdad6; --md-sys-color-on-error-container: #410002; --md-sys-color-background: #f8f9ff; --md-sys-color-on-background: #191c20; --md-sys-color-surface: #f8f9ff; --md-sys-color-on-surface: #191c20; --md-sys-color-surface-variant: #dfe2eb; --md-sys-color-on-surface-variant: #43474e; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #f2f3fa; --md-sys-color-surface-container: #eceef4; --md-sys-color-surface-container-high: #e7e8ef; --md-sys-color-surface-container-highest: #e1e2e9; --md-sys-color-outline: #73777f; --md-sys-color-outline-variant: #c3c6cf; --md-sys-color-inverse-surface: #2e3135; --md-sys-color-inverse-on-surface: #eff0f7; --md-sys-color-inverse-primary: #9fc9ff; --mdq-success: #2e6b43; --mdq-on-success: #ffffff; --mdq-success-container: #b2f1c0; --mdq-on-success-container: #00210f; --mdq-elev-1: 0 1px 2px rgba(0, 0, 0, .12), 0 1px 3px 1px rgba(0, 0, 0, .08); --mdq-elev-2: 0 1px 2px rgba(0, 0, 0, .12), 0 2px 6px 2px rgba(0, 0, 0, .1); } /* Los componentes web con :host{display:...} ignoran [hidden]; lo forzamos */ body.mdq [hidden] { display: none !important; } /* ---- Base de pagina ---- */ body.mdq { background: var(--md-sys-color-background); color: var(--md-sys-color-on-background); font-family: 'Roboto', system-ui, sans-serif; } body.mdq .background-glow { display: none; } /* Header reusado del sitio, retematizado a superficie MD3 */ body.mdq .glass-header { background: var(--md-sys-color-surface-container); backdrop-filter: none; border-bottom: 1px solid var(--md-sys-color-outline-variant); } body.mdq .glass-header .nav-links a { color: var(--md-sys-color-on-surface); } body.mdq .glass-header .nav-links a:hover { color: var(--md-sys-color-primary); } /* El logo del sitio usa gradientes con text-fill transparente: lo reseteamos */ body.mdq .glass-header .logo span { background: none; -webkit-text-fill-color: var(--md-sys-color-on-surface); color: var(--md-sys-color-on-surface); } body.mdq .glass-header .logo .highlight { background: none; -webkit-text-fill-color: var(--md-sys-color-primary); color: var(--md-sys-color-primary); } body.mdq .theme-toggle { color: var(--md-sys-color-on-surface-variant); } body.mdq footer { background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface-variant); border-top: 1px solid var(--md-sys-color-outline-variant); } /* ---- Botones MD3: aire horizontal entre el texto y el borde ---- El bundle de @material/web no aporta el token de espaciado, asi que el padding interno del boton queda en 0 y el texto se pega al borde. */ body.mdq md-filled-button, body.mdq md-filled-tonal-button, body.mdq md-outlined-button, body.mdq md-text-button, body.mdq md-filled-button[has-icon], body.mdq md-filled-tonal-button[has-icon], body.mdq md-outlined-button[has-icon], body.mdq md-text-button[has-icon] { padding-inline: 1.75rem; } /* ---- Layout del quiz ---- */ .mdq-page { max-width: 720px; margin: 0 auto; padding: 110px 1.25rem 4rem; display: flex; flex-direction: column; gap: 1.25rem; } .mdq-screen { display: flex; flex-direction: column; gap: 1.25rem; } /* Tipografia MD3 */ .mdq-headline { font-size: 2rem; line-height: 2.5rem; font-weight: 400; margin: 0; color: var(--md-sys-color-on-surface); } .mdq-headline span { color: var(--md-sys-color-primary); font-weight: 500; } .mdq-title-sm { font-size: 1.375rem; line-height: 1.75rem; font-weight: 400; margin: 0 0 .75rem; color: var(--md-sys-color-on-surface); } .mdq-title-xs { font-size: 1rem; font-weight: 500; margin: 1.25rem 0 .75rem; color: var(--md-sys-color-on-surface-variant); } .mdq-body-lead { font-size: 1rem; line-height: 1.5rem; color: var(--md-sys-color-on-surface-variant); margin: 0; } /* Tarjeta MD3 (superficie elevada) */ .mdq-card { background: var(--md-sys-color-surface-container); border-radius: var(--mdq-shape-l); padding: 1.75rem; box-shadow: var(--mdq-elev-1); } .mdq-intro-card, .mdq-results-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.25rem; } .mdq-hero-icon, .mdq-results-emoji { font-size: 3.5rem; line-height: 1; } /* Volver / salir */ .mdq-back { display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; color: var(--md-sys-color-primary); text-decoration: none; font-size: .875rem; font-weight: 500; padding: .4rem .5rem; border-radius: 999px; } .mdq-back:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); } .mdq-back md-icon { font-size: 1.1rem; } /* Selector de certificacion (chips) */ .mdq-cert-switcher { padding: 1.25rem 1.5rem; } .mdq-cert-label { display: block; text-align: center; font-weight: 500; margin-bottom: .9rem; color: var(--md-sys-color-on-surface); } .mdq-cert-pills { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; } .mdq-cert-pills .quiz-cert-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid var(--md-sys-color-outline); background: transparent; color: var(--md-sys-color-on-surface-variant); text-decoration: none; font-size: .875rem; font-weight: 500; transition: background .15s ease, border-color .15s ease, color .15s ease; } .mdq-cert-pills .quiz-cert-pill:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } .mdq-cert-pills .quiz-cert-pill.is-active { background: var(--md-sys-color-primary-container); border-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } /* Lista de reglas */ .mdq-rules { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: .8rem; text-align: left; } .mdq-rules li { display: flex; align-items: flex-start; gap: .75rem; color: var(--md-sys-color-on-surface-variant); font-size: .9rem; line-height: 1.4; } .mdq-rules md-icon { color: var(--md-sys-color-primary); flex-shrink: 0; } .mdq-rules strong { color: var(--md-sys-color-on-surface); } /* Selector de cantidad de preguntas */ .mdq-count { width: 100%; max-width: 420px; background: var(--md-sys-color-surface-container-high); border-radius: var(--mdq-shape-m); padding: 1.25rem; } .mdq-count-label { display: block; text-align: center; font-weight: 500; margin-bottom: .9rem; color: var(--md-sys-color-on-surface); } .mdq-count-control { display: flex; align-items: center; justify-content: center; gap: .6rem; } .mdq-count-field { width: 110px; } .mdq-presets { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1rem; } .mdq-presets .quiz-count-preset { padding: .4rem 1rem; border-radius: 999px; border: 1px solid var(--md-sys-color-outline); background: transparent; color: var(--md-sys-color-on-surface-variant); font: 500 .8125rem 'Roboto', sans-serif; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .mdq-presets .quiz-count-preset:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } .mdq-presets .quiz-count-preset.is-active { background: var(--md-sys-color-secondary-container); border-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } .mdq-count-hint { margin: .85rem 0 0; text-align: center; font-size: .75rem; color: var(--md-sys-color-on-surface-variant); } /* Barra de herramientas + progreso */ .mdq-toolbar { display: flex; align-items: center; gap: 1rem; } .mdq-progress { flex: 1; display: flex; align-items: center; gap: .75rem; } .mdq-progress-track { flex: 1; height: 8px; background: var(--md-sys-color-surface-container-highest); border-radius: 999px; overflow: hidden; } .mdq-progress-fill { height: 100%; width: 0; background: var(--md-sys-color-primary); border-radius: 999px; transition: width .3s ease; } .mdq-progress-text { font-size: .8125rem; font-weight: 500; color: var(--md-sys-color-on-surface-variant); white-space: nowrap; } /* Tarjeta de pregunta */ .mdq-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; } .mdq-chip-domain, .mdq-chip-topic { display: inline-flex; align-items: center; padding: .3rem .75rem; border-radius: 999px; font-size: .75rem; font-weight: 500; } .mdq-chip-domain { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } .mdq-chip-topic { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); } .mdq-question { font-size: 1.25rem; line-height: 1.75rem; font-weight: 400; color: var(--md-sys-color-on-surface); margin: 0 0 1.25rem; } /* Opciones de respuesta */ .mdq-options { display: flex; flex-direction: column; gap: .65rem; } .mdq-options .quiz-option { display: flex; align-items: center; gap: .85rem; width: 100%; text-align: left; padding: .9rem 1rem; border-radius: var(--mdq-shape-s); border: 1px solid var(--md-sys-color-outline-variant); background: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface); font: 400 .9375rem 'Roboto', sans-serif; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .mdq-options .quiz-option:hover:not(:disabled) { background: color-mix(in srgb, var(--md-sys-color-primary) 8%, var(--md-sys-color-surface-container-low)); } .mdq-options .quiz-option-letter { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); font-weight: 500; font-size: .875rem; } .mdq-options .quiz-option.is-selected { border-color: var(--md-sys-color-primary); background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } .mdq-options .quiz-option.is-selected .quiz-option-letter { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); } .mdq-options .quiz-option.is-correct { border-color: var(--mdq-success); background: var(--mdq-success-container); color: var(--mdq-on-success-container); } .mdq-options .quiz-option.is-correct .quiz-option-letter { background: var(--mdq-success); color: var(--mdq-on-success); } .mdq-options .quiz-option.is-wrong { border-color: var(--md-sys-color-error); background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); } .mdq-options .quiz-option.is-wrong .quiz-option-letter { background: var(--md-sys-color-error); color: var(--md-sys-color-on-error); } .mdq-options .quiz-option:disabled { cursor: default; } /* Feedback tras responder */ .mdq-feedback { margin-top: 1.1rem; padding: 1rem; border-radius: var(--mdq-shape-s); border-left: 4px solid var(--md-sys-color-outline); background: var(--md-sys-color-surface-container-high); } .mdq-feedback[data-kind="ok"] { border-left-color: var(--mdq-success); background: color-mix(in srgb, var(--mdq-success) 12%, var(--md-sys-color-surface-container-high)); } .mdq-feedback[data-kind="ko"] { border-left-color: var(--md-sys-color-error); background: color-mix(in srgb, var(--md-sys-color-error) 12%, var(--md-sys-color-surface-container-high)); } .mdq-feedback-head { display: flex; align-items: center; gap: .5rem; font-weight: 500; color: var(--md-sys-color-on-surface); margin-bottom: .4rem; } .mdq-feedback[data-kind="ok"] .mdq-feedback-head md-icon { color: var(--mdq-success); } .mdq-feedback[data-kind="ko"] .mdq-feedback-head md-icon { color: var(--md-sys-color-error); } .mdq-feedback-text { font-size: .9rem; line-height: 1.45; color: var(--md-sys-color-on-surface-variant); margin: 0 0 .6rem; } .mdq-feedback-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--md-sys-color-primary); text-decoration: none; font-size: .8125rem; font-weight: 500; } .mdq-feedback-link md-icon { font-size: 1.05rem; } .mdq-feedback-link:hover { text-decoration: underline; } /* Acciones */ .mdq-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; } .mdq-actions-center { justify-content: center; } /* Resultados */ .mdq-score { display: flex; flex-direction: column; align-items: center; gap: .2rem; } .mdq-score-pct { font-size: 3.5rem; font-weight: 500; line-height: 1; color: var(--md-sys-color-primary); } .mdq-score-frac { color: var(--md-sys-color-on-surface-variant); font-size: 1rem; } .mdq-result-msg { color: var(--md-sys-color-on-surface); font-size: 1rem; margin: 0; } .mdq-breakdown { width: 100%; text-align: left; background: var(--md-sys-color-surface-container-high); border-radius: var(--mdq-shape-m); padding: 1.5rem; } .mdq-radar-wrap { display: flex; justify-content: center; margin: .25rem 0 1rem; } .mdq-radar { display: block; max-width: 100%; height: auto; } .mdq-radar-summary { text-align: center; color: var(--md-sys-color-on-surface); font-size: .9rem; line-height: 1.55; margin: 0 0 1rem; } .mdq-radar-note { display: block; margin-top: .4rem; font-size: .8rem; color: var(--md-sys-color-on-surface-variant); } #domain-breakdown .domain-row { margin-bottom: 1rem; } #domain-breakdown .domain-row:last-child { margin-bottom: 0; } #domain-breakdown .domain-row-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; font-size: .875rem; color: var(--md-sys-color-on-surface); } #domain-breakdown .domain-row-icon { font-size: 1.1rem; } #domain-breakdown .domain-row-name { flex: 1; } #domain-breakdown .domain-row-score { color: var(--md-sys-color-on-surface-variant); font-weight: 500; } #domain-breakdown .domain-row-bar { height: 8px; background: var(--md-sys-color-surface-container-highest); border-radius: 999px; overflow: hidden; } #domain-breakdown .domain-row-fill { height: 100%; background: var(--md-sys-color-primary); border-radius: 999px; transition: width .6s ease; } /* CTA newsletter dentro de resultados */ .mdq-cta { width: 100%; text-align: left; background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); } .mdq-cta .mdq-title-sm, .mdq-cta p { color: var(--md-sys-color-on-tertiary-container); } .mdq-cta p { font-size: .9rem; margin: 0 0 1rem; } .mdq-news-row { display: flex; flex-wrap: wrap; gap: .6rem; } .mdq-news-input { flex: 1; min-width: 180px; padding: .8rem 1rem; border-radius: var(--mdq-shape-s); border: 1px solid var(--md-sys-color-outline); background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); font: 400 .9rem 'Roboto', sans-serif; } .mdq-news-input:focus { outline: 2px solid var(--md-sys-color-primary); outline-offset: -1px; } .mdq-news-btn { padding: .7rem 1.5rem; border-radius: 999px; border: none; background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); font: 500 .875rem 'Roboto', sans-serif; cursor: pointer; } .mdq-news-btn:hover { box-shadow: var(--mdq-elev-1); } .mdq-cta .form-status-message { margin: .75rem 0 0; font-size: .85rem; } .mdq-cta .form-status-message:not(.visible) { display: none; } .mdq-cta .newsletter-status-success { color: var(--mdq-on-success-container); } .mdq-cta .newsletter-status-error { color: var(--md-sys-color-on-error-container); } @media (max-width: 600px) { .mdq-page { padding: 96px .75rem 3rem; } .mdq-card { padding: 1.25rem; } .mdq-breakdown { padding: 1rem; } /* Botones del hero apilados (evita que el texto se parta dentro del pill) */ body.mdq .cta-group { display: flex; flex-direction: column; align-items: center; } } /* ============================================================ Glosario (glosario.html) ============================================================ */ body.mdq .glossary-page { max-width: 1080px; margin: 0 auto; padding: 110px 1.25rem 4rem; } body.mdq .glossary-header { text-align: center; margin-bottom: 1.5rem; } body.mdq .glossary-header .mdq-body-lead { max-width: 640px; margin: .75rem auto 0; } body.mdq .glossary-toolbar { background: var(--md-sys-color-surface-container); border-radius: var(--mdq-shape-l); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--mdq-elev-1); display: flex; flex-direction: column; gap: 1rem; } body.mdq .glossary-search { width: 100%; } body.mdq .glossary-filters { display: flex; flex-wrap: wrap; gap: .5rem; } body.mdq .glossary-filter { padding: .45rem 1rem; border-radius: 999px; border: 1px solid var(--md-sys-color-outline); background: transparent; color: var(--md-sys-color-on-surface-variant); font: 500 .8125rem 'Roboto', sans-serif; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } body.mdq .glossary-filter:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } body.mdq .glossary-filter.is-active { background: var(--md-sys-color-secondary-container); border-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } body.mdq .glossary-stats { font-size: .85rem; color: var(--md-sys-color-on-surface-variant); } body.mdq .glossary-stats strong { color: var(--md-sys-color-primary); font-weight: 700; } body.mdq .glossary-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; } body.mdq .glossary-card { background: var(--md-sys-color-surface-container); border-radius: var(--mdq-shape-l); padding: 1.5rem; box-shadow: var(--mdq-elev-1); display: flex; flex-direction: column; gap: .6rem; transition: box-shadow .2s ease, outline-color .2s ease; } body.mdq .glossary-card:hover { box-shadow: var(--mdq-elev-2); } body.mdq .glossary-card.is-highlight { outline: 2px solid var(--md-sys-color-primary); box-shadow: var(--mdq-elev-2); } body.mdq .glossary-cat-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border-radius: 999px; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); font-size: .72rem; font-weight: 500; } body.mdq .glossary-term { font-size: 1.25rem; font-weight: 500; color: var(--md-sys-color-on-surface); margin: 0; } body.mdq .glossary-short { font-size: .9rem; line-height: 1.5; color: var(--md-sys-color-on-surface-variant); margin: 0; } body.mdq .glossary-use { background: var(--md-sys-color-surface-container-high); border: none; border-left: 3px solid var(--md-sys-color-tertiary); border-radius: var(--mdq-shape-s); padding: .8rem .9rem; } body.mdq .glossary-use-head { display: flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 600; color: var(--md-sys-color-tertiary); margin-bottom: .3rem; } body.mdq .glossary-use-head md-icon { font-size: 1rem; } body.mdq .glossary-use p { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--md-sys-color-on-surface-variant); } body.mdq .glossary-related-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .8rem; } body.mdq .glossary-related-label { color: var(--md-sys-color-on-surface-variant); } body.mdq .glossary-related { padding: .25rem .65rem; border-radius: 999px; border: 1px solid var(--md-sys-color-outline-variant); background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); font: 500 .75rem 'Roboto', sans-serif; cursor: pointer; transition: border-color .15s ease, color .15s ease; } body.mdq .glossary-related:hover { border-color: var(--md-sys-color-primary); color: var(--md-sys-color-primary); } body.mdq .glossary-learn { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: .25rem; color: var(--md-sys-color-primary); text-decoration: none; font-size: .8125rem; font-weight: 500; } body.mdq .glossary-learn md-icon { font-size: 1.05rem; } body.mdq .glossary-learn:hover { text-decoration: underline; } body.mdq .glossary-empty { grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; color: var(--md-sys-color-on-surface-variant); } body.mdq .glossary-empty-icon { font-size: 3rem; } @media (max-width: 600px) { body.mdq .glossary-page { padding: 96px .75rem 3rem; } body.mdq .glossary-toolbar { padding: 1rem; } body.mdq .glossary-card { padding: 1.25rem; } } /* ============================================================ Blog / Publicaciones (blog.html) ============================================================ */ body.mdq .blog-page { max-width: 1180px; margin: 0 auto; padding: 110px 1.25rem 4rem; } body.mdq .blog-header { text-align: center; margin-bottom: 1.5rem; } body.mdq .blog-header .mdq-body-lead { max-width: 640px; margin: .75rem auto 0; } body.mdq .blog-toolbar { background: var(--md-sys-color-surface-container); border-radius: var(--mdq-shape-l); padding: 1.25rem 1.5rem; margin-bottom: 2rem; box-shadow: var(--mdq-elev-1); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; } body.mdq .blog-search { flex: 1; min-width: 220px; } body.mdq .blog-result-count { font-size: .85rem; font-weight: 500; color: var(--md-sys-color-on-surface-variant); } body.mdq .blog-grid-full { padding: 0; background: none; } body.mdq .blog-category-block { margin-bottom: 3rem; } body.mdq .blog-category-block:last-child { margin-bottom: 0; } body.mdq .blog-category-title { display: flex; align-items: center; gap: .6rem; font-size: 1.25rem; font-weight: 500; color: var(--md-sys-color-on-surface); margin: 0 0 1.25rem; padding-bottom: .6rem; border-bottom: 1px solid var(--md-sys-color-outline-variant); } body.mdq .blog-category-count { margin-left: auto; font-size: .8rem; font-weight: 400; color: var(--md-sys-color-on-surface-variant); } body.mdq .blog-category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; } body.mdq .post-card { background: var(--md-sys-color-surface-container); border-radius: var(--mdq-shape-l); overflow: hidden; box-shadow: var(--mdq-elev-1); cursor: pointer; display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .2s ease; } body.mdq .post-card:hover { box-shadow: var(--mdq-elev-2); transform: translateY(-2px); } body.mdq .post-card .post-image { width: 100%; height: 170px; object-fit: cover; display: block; } body.mdq .post-card .post-content { padding: 1.1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; } body.mdq .post-card .post-date { font-size: .72rem; font-weight: 500; color: var(--md-sys-color-primary); text-transform: uppercase; letter-spacing: .03em; } body.mdq .post-card .post-content h3 { font-size: 1.05rem; font-weight: 500; line-height: 1.35; color: var(--md-sys-color-on-surface); margin: 0; } body.mdq .post-card .post-excerpt { font-size: .85rem; line-height: 1.5; color: var(--md-sys-color-on-surface-variant); margin: 0; } body.mdq .post-card .read-more { display: inline-flex; align-items: center; gap: .3rem; margin-top: auto; padding-top: .4rem; font-size: .8125rem; font-weight: 500; color: var(--md-sys-color-primary); } body.mdq .post-card .read-more md-icon { font-size: 1.05rem; } body.mdq .blog-empty { text-align: center; padding: 3.5rem 1rem; color: var(--md-sys-color-on-surface-variant); } body.mdq .blog-empty-icon { font-size: 3rem; } /* Modal de artículo */ body.mdq #post-modal .modal-content { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); border-radius: var(--mdq-shape-l); border: none; } body.mdq #post-modal .close-modal { color: var(--md-sys-color-on-surface-variant); } body.mdq #post-modal #modal-body h2 { color: var(--md-sys-color-on-surface); } body.mdq #post-modal .modal-date { display: block; font-size: .8rem; color: var(--md-sys-color-primary); margin-bottom: 1rem; } body.mdq #post-modal .modal-article-content { color: var(--md-sys-color-on-surface-variant); line-height: 1.65; } body.mdq #post-modal .modal-article-content h2, body.mdq #post-modal .modal-article-content h3 { color: var(--md-sys-color-on-surface); } body.mdq #post-modal .modal-article-content a { color: var(--md-sys-color-primary); } body.mdq #post-modal .post-author-card { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; padding: 1rem; background: var(--md-sys-color-surface-container); border-radius: var(--mdq-shape-m); } body.mdq #post-modal .post-author-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; } body.mdq #post-modal .post-author-name { font-weight: 600; color: var(--md-sys-color-on-surface); } body.mdq #post-modal .post-author-role { font-size: .82rem; color: var(--md-sys-color-on-surface-variant); } body.mdq #post-modal .post-author-links { display: flex; gap: .75rem; margin-top: .35rem; } body.mdq #post-modal .post-author-links a { font-size: .8rem; color: var(--md-sys-color-primary); text-decoration: none; } @media (max-width: 600px) { body.mdq .blog-page { padding: 96px .75rem 3rem; } body.mdq .blog-toolbar { padding: 1rem; } } /* ============================================================ Tarjeta glass genérica → superficie MD3 (mapa, skills) ============================================================ */ body.mdq .glass-card { background: var(--md-sys-color-surface-container); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--mdq-shape-l); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--mdq-elev-1); } /* ============================================================ Mapa IAM (mapa.html) ============================================================ */ body.mdq .iam-map-page { max-width: 1180px; margin: 0 auto; padding: 110px 1.25rem 4rem; } body.mdq .iam-map-hero { text-align: center; margin-bottom: 1.5rem; } body.mdq .iam-map-hero .mdq-body-lead { max-width: 720px; margin: .75rem auto 0; } body.mdq .iam-map-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-top: 1.25rem; } body.mdq .iam-map-stat { font-size: .9rem; color: var(--md-sys-color-on-surface-variant); } body.mdq .iam-map-stat strong { color: var(--md-sys-color-primary); font-size: 1.4rem; font-weight: 700; margin-right: .25rem; } body.mdq .iam-map-filters { padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: .85rem; } body.mdq .iam-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } body.mdq .iam-filter-label { font-size: .8rem; font-weight: 600; color: var(--md-sys-color-on-surface-variant); min-width: 92px; } body.mdq .iam-filter { display: inline-flex; align-items: center; gap: .3rem; padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--md-sys-color-outline); background: transparent; color: var(--md-sys-color-on-surface-variant); font: 500 .8rem 'Roboto', sans-serif; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } body.mdq .iam-filter:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } body.mdq .iam-filter.is-active { background: var(--md-sys-color-secondary-container); border-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } body.mdq .iam-filter.is-disabled { opacity: .4; pointer-events: none; } body.mdq .iam-filter-count { opacity: .7; font-size: .72rem; } body.mdq .iam-search { width: 100%; margin-top: .25rem; } body.mdq .iam-services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.25rem; } body.mdq .iam-tile { padding: 1.25rem; cursor: pointer; display: flex; flex-direction: column; gap: .55rem; transition: box-shadow .2s ease, transform .2s ease; } body.mdq .iam-tile:hover { box-shadow: var(--mdq-elev-2); transform: translateY(-2px); } body.mdq .iam-tile-head { display: flex; justify-content: space-between; align-items: flex-start; } body.mdq .iam-tile-icon { font-size: 2rem; line-height: 1; } body.mdq .iam-tile-status { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: .3rem; } body.mdq .iam-tile-level { align-self: flex-start; padding: .15rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 600; background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); } body.mdq .iam-tile-name { font-size: 1.05rem; font-weight: 500; color: var(--md-sys-color-on-surface); margin: 0; } body.mdq .iam-tile-desc { font-size: .82rem; line-height: 1.45; color: var(--md-sys-color-on-surface-variant); margin: 0; } body.mdq .iam-tile-footer { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: auto; padding-top: .5rem; } body.mdq .iam-tile-domain { font-size: .72rem; color: var(--md-sys-color-on-surface-variant); } body.mdq .iam-tile-certs, body.mdq .iam-modal-certs { display: flex; flex-wrap: wrap; gap: .3rem; } body.mdq .iam-cert-pill, body.mdq .iam-cert-badge { padding: .15rem .5rem; border-radius: 999px; font-size: .65rem; font-weight: 700; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } body.mdq .iam-empty { text-align: center; padding: 3.5rem 1rem; color: var(--md-sys-color-on-surface-variant); } body.mdq .iam-empty-icon { font-size: 3rem; } body.mdq .iam-service-modal { align-items: flex-start; justify-content: center; } body.mdq .iam-service-modal-content { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); border: none; border-radius: var(--mdq-shape-l); } body.mdq .iam-service-modal .close-modal { color: var(--md-sys-color-on-surface-variant); } body.mdq .iam-modal-header { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; } body.mdq .iam-modal-icon { font-size: 2.5rem; line-height: 1; } body.mdq .iam-modal-title { font-size: 1.4rem; font-weight: 500; color: var(--md-sys-color-on-surface); margin: 0 0 .5rem; } body.mdq .iam-modal-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; } body.mdq .iam-meta-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 999px; font-size: .72rem; background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); } body.mdq .iam-modal-description { font-size: .9rem; line-height: 1.6; color: var(--md-sys-color-on-surface-variant); } body.mdq .iam-modal-why { background: color-mix(in srgb, var(--md-sys-color-tertiary) 12%, var(--md-sys-color-surface-container)); border-radius: var(--mdq-shape-s); padding: .9rem 1rem; margin: 1rem 0; } body.mdq .iam-modal-why h3 { font-size: .9rem; color: var(--md-sys-color-tertiary); margin: 0 0 .35rem; } body.mdq .iam-modal-why p, body.mdq .iam-modal-section p { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--md-sys-color-on-surface-variant); } body.mdq .iam-modal-section { margin-top: 1.25rem; } body.mdq .iam-modal-section h3 { font-size: .95rem; font-weight: 600; color: var(--md-sys-color-on-surface); margin: 0 0 .6rem; } body.mdq .iam-resources { display: flex; flex-direction: column; gap: .5rem; } body.mdq .iam-resource { display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem; border-radius: var(--mdq-shape-s); background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); text-decoration: none; transition: background .15s ease; } body.mdq .iam-resource:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 10%, var(--md-sys-color-surface-container)); } body.mdq .iam-resource-text { display: flex; flex-direction: column; flex: 1; } body.mdq .iam-resource-title { font-size: .85rem; font-weight: 500; } body.mdq .iam-resource-type { font-size: .72rem; color: var(--md-sys-color-on-surface-variant); } body.mdq .iam-resource-arrow { color: var(--md-sys-color-on-surface-variant); } body.mdq .iam-related-pills, body.mdq .iam-post-links { display: flex; flex-wrap: wrap; gap: .5rem; } body.mdq .iam-related-pill, body.mdq .iam-post-link { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .75rem; border-radius: 999px; border: 1px solid var(--md-sys-color-outline-variant); background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); text-decoration: none; font-size: .78rem; } body.mdq .iam-related-pill:hover, body.mdq .iam-post-link:hover { border-color: var(--md-sys-color-primary); color: var(--md-sys-color-primary); } body.mdq .iam-modal-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; } /* ============================================================ Roadmap / Skills (skills.html) ============================================================ */ body.mdq .skills-page { max-width: 1100px; margin: 0 auto; padding: 110px 1.25rem 4rem; } body.mdq .skills-section { text-align: center; } body.mdq .skills-section .mdq-body-lead { max-width: 680px; margin: .75rem auto 2rem; } body.mdq .radar-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem; padding: 2rem 1.5rem; } body.mdq .skills-summary { flex: 1; min-width: 220px; } body.mdq .status-list { display: flex; flex-direction: column; gap: .85rem; } body.mdq .status-item { background: var(--md-sys-color-surface-container-high); border-radius: var(--mdq-shape-m); padding: .85rem 1rem; text-align: left; } body.mdq .status-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .25rem; } body.mdq .status-title { font-size: .9rem; font-weight: 500; color: var(--md-sys-color-on-surface); } body.mdq .status-pct { font-size: .9rem; font-weight: 700; color: var(--md-sys-color-primary); } body.mdq .status-desc { font-size: .78rem; line-height: 1.4; color: var(--md-sys-color-on-surface-variant); } body.mdq .radar-visual { position: relative; flex-shrink: 0; max-width: 100%; } body.mdq #skills-radar-canvas { max-width: 100%; height: auto; } body.mdq .skills-cta { margin-top: 2rem; } body.mdq #roadmap-modal .modal-content { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); border: none; border-radius: var(--mdq-shape-l); } body.mdq #roadmap-modal .close-modal { color: var(--md-sys-color-on-surface-variant); } body.mdq #roadmap-modal #roadmap-title { color: var(--md-sys-color-on-surface); } @media (max-width: 600px) { body.mdq .iam-map-page, body.mdq .skills-page { padding: 96px .75rem 3rem; } body.mdq .iam-map-filters { padding: 1rem; } body.mdq .iam-filter-label { min-width: auto; width: 100%; } } /* ============================================================ Home (index.html) — retematización MD3 ============================================================ */ /* Fondos de sección alternados con superficies MD3 */ body.mdq .about-section, body.mdq .certifications, body.mdq .applied-skills-section, body.mdq .events-section, body.mdq .contact-section { background: var(--md-sys-color-surface-container-low); } body.mdq .posts-section, body.mdq .quiz-cta-section, body.mdq .related-certs-section, body.mdq .newsletter-section { background: var(--md-sys-color-background); } /* Títulos de sección */ body.mdq .section-title { color: var(--md-sys-color-on-surface); font-weight: 400; } body.mdq .section-title .highlight, body.mdq .text-gradient, body.mdq .highlight { background: none; -webkit-text-fill-color: var(--md-sys-color-primary); color: var(--md-sys-color-primary); font-weight: 500; } body.mdq .section-subtitle { color: var(--md-sys-color-on-surface-variant); } /* Botones */ body.mdq .btn-primary { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border: none; border-radius: 999px; box-shadow: none; animation: none; font-weight: 500; transition: box-shadow .2s ease; } body.mdq .btn-primary:hover { box-shadow: var(--mdq-elev-2); } body.mdq .btn-secondary { background: transparent; color: var(--md-sys-color-primary); border: 1px solid var(--md-sys-color-outline); border-radius: 999px; box-shadow: none; font-weight: 500; } body.mdq .btn-secondary:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); border-color: var(--md-sys-color-primary); } body.mdq .glow-effect { animation: none; } /* Hero */ body.mdq .hero-eyebrow { display: inline-block; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); padding: .35rem .9rem; border-radius: 999px; font-weight: 500; } body.mdq .hero h1 { color: var(--md-sys-color-on-surface); } body.mdq .hero p { color: var(--md-sys-color-on-surface-variant); } /* About */ body.mdq .about-photo-placeholder { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } body.mdq .about-badge { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); border: none; } body.mdq .about-badge-mvp { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } body.mdq .about-text h2, body.mdq .about-title { color: var(--md-sys-color-on-surface); } body.mdq .about-lead, body.mdq .about-text p { color: var(--md-sys-color-on-surface-variant); } body.mdq .about-link { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-primary); border: 1px solid var(--md-sys-color-outline-variant); border-radius: 999px; } body.mdq .about-link:hover { border-color: var(--md-sys-color-primary); } /* Posts: acordeones por categoría */ body.mdq .posts-category-group { background: var(--md-sys-color-surface-container); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--mdq-shape-l); } body.mdq .posts-category-header, body.mdq .posts-category-title { color: var(--md-sys-color-on-surface); } body.mdq .posts-category-count { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } body.mdq .posts-category-chevron { color: var(--md-sys-color-on-surface-variant); } /* Cert grid (Camino IAM) */ body.mdq .cert-card { background: var(--md-sys-color-surface-container); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--mdq-shape-l); box-shadow: var(--mdq-elev-1); } body.mdq .cert-card:hover { box-shadow: var(--mdq-elev-2); border-color: var(--md-sys-color-primary); } body.mdq .cert-card h3 { color: var(--md-sys-color-on-surface); } body.mdq .cert-card p { color: var(--md-sys-color-on-surface-variant); } body.mdq .read-more { color: var(--md-sys-color-primary); } /* Quiz CTA / Applied skills / Related certs */ body.mdq .quiz-cta-card h3, body.mdq .applied-skill-card h3 { color: var(--md-sys-color-on-surface); } body.mdq .quiz-cta-card p, body.mdq .applied-skill-card p { color: var(--md-sys-color-on-surface-variant); } body.mdq .quiz-cta-cta, body.mdq .applied-skill-cta { color: var(--md-sys-color-primary); } body.mdq .quiz-cta-card:hover, body.mdq .applied-skill-card:hover { box-shadow: var(--mdq-elev-2); border-color: var(--md-sys-color-primary); } body.mdq .cert-card-level { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } body.mdq .related-certs-more-link { color: var(--md-sys-color-primary); } /* Botones de navegación de carruseles */ body.mdq .nav-btn { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); border: 1px solid var(--md-sys-color-outline-variant); } body.mdq .nav-btn:hover { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); } /* Events */ body.mdq .event-card { background: var(--md-sys-color-surface-container); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--mdq-shape-l); overflow: hidden; } body.mdq .event-card:hover { box-shadow: var(--mdq-elev-2); } body.mdq .event-content h3 { color: var(--md-sys-color-on-surface); } body.mdq .event-excerpt, body.mdq .event-location { color: var(--md-sys-color-on-surface-variant); } body.mdq .event-date { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); } body.mdq .event-cta { color: var(--md-sys-color-primary); } body.mdq .countdown-segment { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); } body.mdq .segment-label { color: var(--md-sys-color-on-surface-variant); } /* Newsletter */ body.mdq .newsletter-lead, body.mdq .newsletter-disclaimer { color: var(--md-sys-color-on-surface-variant); } body.mdq .newsletter-inline input[type="email"], body.mdq .form-group input, body.mdq .form-group textarea { background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); border: 1px solid var(--md-sys-color-outline); border-radius: var(--mdq-shape-s); } body.mdq .newsletter-inline input[type="email"]:focus, body.mdq .form-group input:focus, body.mdq .form-group textarea:focus { outline: 2px solid var(--md-sys-color-primary); outline-offset: -1px; border-color: var(--md-sys-color-primary); } /* Contact */ body.mdq .contact-info h3 { color: var(--md-sys-color-on-surface); } body.mdq .contact-info p, body.mdq .detail-item { color: var(--md-sys-color-on-surface-variant); } body.mdq .contact-info a { color: var(--md-sys-color-primary); } /* Modal newsletter */ body.mdq .newsletter-modal-title { color: var(--md-sys-color-on-surface); } body.mdq .newsletter-modal-lead { color: var(--md-sys-color-on-surface-variant); } body.mdq .modal .close-modal { color: var(--md-sys-color-on-surface-variant); } /* Estaciones del roadmap (modal Camino IAM) */ body.mdq .roadmap-station { background: var(--md-sys-color-surface-container); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--mdq-shape-m); } body.mdq .roadmap-station.is-complete { border-color: var(--mdq-success); } body.mdq .station-number { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); } body.mdq .station-title { color: var(--md-sys-color-on-surface); } body.mdq .station-desc { color: var(--md-sys-color-on-surface-variant); } body.mdq .station-progress-pct { color: var(--md-sys-color-primary); } body.mdq .roadmap-item { background: var(--md-sys-color-surface-container-low); border-radius: var(--mdq-shape-s); } body.mdq .roadmap-item-title { color: var(--md-sys-color-on-surface); } body.mdq .roadmap-tag { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); } body.mdq .roadmap-check { border: 1px solid var(--md-sys-color-outline); color: var(--md-sys-color-on-surface-variant); } body.mdq .roadmap-check.is-checked { background: var(--md-sys-color-primary); border-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); } /* ============================================================ Botón "ir arriba" ============================================================ */ .scroll-top-btn { position: fixed; bottom: 5.5rem; right: 1.6rem; width: 46px; height: 46px; border-radius: 14px; border: none; display: grid; place-items: center; background: var(--md-sys-color-secondary-container, #3d4758); color: var(--md-sys-color-on-secondary-container, #d8e3f8); box-shadow: var(--mdq-elev-2, 0 2px 6px rgba(0, 0, 0, .3)); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease, visibility .25s; z-index: 999; } .scroll-top-btn.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .scroll-top-btn:hover { filter: brightness(1.1); } /* ============================================================ Menú móvil (hamburguesa) — sidebar con superficie MD3 ============================================================ */ @media (max-width: 768px) { body.mdq .menu-toggle { color: var(--md-sys-color-on-surface); } body.mdq .nav-links { background: var(--md-sys-color-surface-container); -webkit-backdrop-filter: none; backdrop-filter: none; border-left: 1px solid var(--md-sys-color-outline-variant); } body.mdq .nav-links a { color: var(--md-sys-color-on-surface); } } /* ============================================================ Recursos (recursos.html) — camino del profesional IT ============================================================ */ body.mdq .recursos-page { max-width: 1080px; margin: 0 auto; padding: 110px 1.25rem 4rem; } body.mdq .recursos-header { text-align: center; margin-bottom: 2.5rem; } body.mdq .recursos-header .mdq-body-lead { max-width: 680px; margin: .75rem auto 0; } body.mdq .recurso-etapa { margin-bottom: 2.75rem; } body.mdq .recurso-etapa-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; } body.mdq .recurso-etapa-num { flex-shrink: 0; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); font-size: 1.25rem; font-weight: 700; } body.mdq .recurso-etapa-title { font-size: 1.5rem; font-weight: 500; margin: 0; color: var(--md-sys-color-on-surface); } body.mdq .recurso-etapa-sub { margin: .15rem 0 0; font-size: .9rem; color: var(--md-sys-color-on-surface-variant); } body.mdq .recurso-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.25rem; } body.mdq .recurso-card { background: var(--md-sys-color-surface-container); border-radius: var(--mdq-shape-l); padding: 1.5rem; box-shadow: var(--mdq-elev-1); display: flex; flex-direction: column; gap: .85rem; transition: box-shadow .2s ease; } body.mdq .recurso-card:hover { box-shadow: var(--mdq-elev-2); } body.mdq .recurso-card.is-afiliado { outline: 2px solid var(--md-sys-color-primary); background: var(--md-sys-color-surface-container-high); } body.mdq .recurso-card-icon { width: 48px; height: 48px; border-radius: var(--mdq-shape-m); display: grid; place-items: center; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); font-size: 1.35rem; } body.mdq .recurso-card.is-afiliado .recurso-card-icon { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); } body.mdq .recurso-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } body.mdq .recurso-card-title { font-size: 1.15rem; font-weight: 500; margin: 0; color: var(--md-sys-color-on-surface); } body.mdq .recurso-tags { display: flex; flex-wrap: wrap; gap: .4rem; } body.mdq .recurso-tag { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 999px; background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); font-size: .68rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; } body.mdq .recurso-tag.is-afiliado { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } body.mdq .recurso-tag.is-deadline { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); text-transform: none; } body.mdq .recurso-tag.is-site { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); } body.mdq .recurso-tag.is-portal { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } body.mdq .recurso-card-desc { font-size: .9rem; line-height: 1.55; color: var(--md-sys-color-on-surface-variant); margin: 0; } body.mdq .recurso-card-desc strong { color: var(--md-sys-color-on-surface); } body.mdq .recurso-why { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; } body.mdq .recurso-why li { display: flex; gap: .55rem; font-size: .85rem; line-height: 1.5; color: var(--md-sys-color-on-surface-variant); } body.mdq .recurso-why li::before { content: '\2713'; font-weight: 700; font-size: 1rem; line-height: 1.4; color: var(--md-sys-color-primary); flex-shrink: 0; } body.mdq .recurso-cta { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1.25rem; border-radius: 999px; background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); font: 600 .9rem 'Roboto', sans-serif; text-decoration: none; transition: filter .15s ease; } body.mdq .recurso-cta:hover { filter: brightness(1.1); } body.mdq .recurso-cta i { font-size: .8rem; } body.mdq .recurso-link { margin-top: auto; display: inline-flex; align-items: center; gap: .4rem; color: var(--md-sys-color-primary); text-decoration: none; font-size: .85rem; font-weight: 600; } body.mdq .recurso-link i { font-size: .78rem; } body.mdq .recurso-link:hover { text-decoration: underline; } body.mdq .recurso-disclosure { margin-top: 1rem; background: var(--md-sys-color-surface-container-low); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--mdq-shape-m); padding: 1.25rem 1.5rem; display: flex; gap: .85rem; align-items: flex-start; } body.mdq .recurso-disclosure i { color: var(--md-sys-color-primary); font-size: 1.1rem; flex-shrink: 0; margin-top: .1rem; } body.mdq .recurso-disclosure p { margin: 0; font-size: .85rem; line-height: 1.55; color: var(--md-sys-color-on-surface-variant); } body.mdq .recurso-disclosure strong { color: var(--md-sys-color-on-surface); } @media (max-width: 600px) { body.mdq .recursos-page { padding: 96px .75rem 3rem; } body.mdq .recurso-card { padding: 1.25rem; } body.mdq .recurso-etapa-head { gap: .75rem; } body.mdq .recurso-etapa-title { font-size: 1.3rem; } } /* ============================================================ Flashcards (flashcards.html) — repaso estilo Anki ============================================================ */ /* ---- Intro: selector de tema y opciones ---- */ body.mdq .fc-topic { width: 100%; max-width: 460px; } body.mdq .fc-topic-label { display: block; text-align: center; font-weight: 500; margin-bottom: .8rem; color: var(--md-sys-color-on-surface); } body.mdq .fc-topic-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; } body.mdq .fc-topic-chip { padding: .45rem 1rem; border-radius: 999px; border: 1px solid var(--md-sys-color-outline); background: transparent; color: var(--md-sys-color-on-surface-variant); font: 500 .8125rem 'Roboto', sans-serif; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } body.mdq .fc-topic-chip:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } body.mdq .fc-topic-chip.is-active { background: var(--md-sys-color-secondary-container); border-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } body.mdq .fc-options { display: flex; flex-direction: column; align-items: center; gap: .6rem; } body.mdq .fc-switch { display: inline-flex; align-items: center; gap: .55rem; font-size: .875rem; color: var(--md-sys-color-on-surface-variant); cursor: pointer; } body.mdq .fc-switch input { accent-color: var(--md-sys-color-primary); width: 1.05rem; height: 1.05rem; } body.mdq .fc-switch strong { color: var(--md-sys-color-primary); font-weight: 700; } /* ---- Repaso: escenario y flechas ---- */ body.mdq .fc-stage { display: flex; align-items: center; gap: .5rem; } body.mdq .fc-nav-arrow { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--md-sys-color-outline-variant); background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface-variant); cursor: pointer; transition: background .15s ease, color .15s ease, opacity .15s ease; } body.mdq .fc-nav-arrow:hover:not(:disabled) { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-primary); } body.mdq .fc-nav-arrow:disabled { opacity: .35; cursor: default; } /* ---- La tarjeta con volteo 3D ---- */ body.mdq .fc-card { flex: 1; min-width: 0; min-height: 380px; perspective: 1600px; cursor: pointer; } body.mdq .fc-card-inner { position: relative; width: 100%; height: 100%; min-height: 380px; transform: rotateY(0deg); transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2, .7, .2, 1); } body.mdq .fc-card.is-flipped .fc-card-inner { transform: rotateY(180deg); } body.mdq .fc-card:hover:not(.is-flipped) .fc-card-inner { transform: rotateY(0deg) translateY(-4px); } body.mdq .fc-card.is-flipped:hover .fc-card-inner { transform: rotateY(180deg) translateY(-4px); } body.mdq .fc-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; border-radius: var(--mdq-shape-l); padding: 1.75rem; box-shadow: var(--mdq-elev-1); overflow: auto; } body.mdq .fc-face-front { align-items: center; text-align: center; background: linear-gradient(155deg, var(--md-sys-color-primary-container), var(--md-sys-color-surface-container-high)); } body.mdq .fc-face-back { transform: rotateY(180deg); gap: .85rem; background: var(--md-sys-color-surface-container); border: 1px solid var(--md-sys-color-outline-variant); } body.mdq .fc-cat-badge { align-self: center; display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .75rem; border-radius: 999px; background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 14%, transparent); color: var(--md-sys-color-on-primary-container); font-size: .72rem; font-weight: 600; } body.mdq .fc-term { margin: auto 0; font-size: 1.85rem; line-height: 1.25; font-weight: 500; color: var(--md-sys-color-on-primary-container); } body.mdq .fc-flip-hint { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 70%, transparent); } body.mdq .fc-flip-hint md-icon { font-size: 1rem; } body.mdq .fc-back-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--md-sys-color-primary); } body.mdq .fc-def { margin: 0; font-size: 1.05rem; line-height: 1.55; color: var(--md-sys-color-on-surface); } body.mdq .fc-use { background: var(--md-sys-color-surface-container-high); border-left: 3px solid var(--md-sys-color-tertiary); border-radius: var(--mdq-shape-s); padding: .8rem .9rem; } body.mdq .fc-use-head { display: flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 600; color: var(--md-sys-color-tertiary); margin-bottom: .3rem; } body.mdq .fc-use-head md-icon { font-size: 1rem; } body.mdq .fc-use p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--md-sys-color-on-surface-variant); } body.mdq .fc-learn { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: .3rem; color: var(--md-sys-color-primary); text-decoration: none; font-size: .8125rem; font-weight: 500; } body.mdq .fc-learn md-icon { font-size: 1.05rem; } body.mdq .fc-learn:hover { text-decoration: underline; } /* ---- Controles del repaso ---- */ body.mdq .fc-controls-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; } body.mdq .fc-rate-known { --md-filled-button-container-color: var(--mdq-success); --md-filled-button-label-text-color: var(--mdq-on-success); --md-filled-button-icon-color: var(--mdq-on-success); } body.mdq .fc-kbd-hint { margin: 0; text-align: center; font-size: .75rem; color: var(--md-sys-color-on-surface-variant); } body.mdq .fc-kbd-hint kbd { display: inline-block; padding: .1rem .4rem; border-radius: 4px; border: 1px solid var(--md-sys-color-outline-variant); background: var(--md-sys-color-surface-container-high); font-family: 'Roboto', monospace; font-size: .72rem; color: var(--md-sys-color-on-surface); } /* ---- Resumen ---- */ body.mdq .fc-result-stats { display: flex; justify-content: center; gap: 1rem; width: 100%; } body.mdq .fc-stat { flex: 1; max-width: 160px; display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: 1.1rem .75rem; border-radius: var(--mdq-shape-m); } body.mdq .fc-stat-known { background: var(--mdq-success-container); color: var(--mdq-on-success-container); } body.mdq .fc-stat-review { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); } body.mdq .fc-stat-num { font-size: 2rem; font-weight: 700; line-height: 1; } body.mdq .fc-stat-label { font-size: .8rem; font-weight: 500; } @media (max-width: 600px) { body.mdq .fc-card, body.mdq .fc-card-inner { min-height: 340px; } body.mdq .fc-face { padding: 1.35rem; } body.mdq .fc-term { font-size: 1.5rem; } body.mdq .fc-nav-arrow { width: 38px; height: 38px; } body.mdq .fc-stage { gap: .35rem; } }