/* * ══════════════════════════════════════════════════════════════════════════════ * EDUMIND CONTENT HYBRID CSS v1.0 * Sistema de diseño híbrido: EDUmind Dark + E-Ink toggle * * Los Mundos Edufis × EDUmind | 2025 * Autor: Luis Vilela Acuña * ══════════════════════════════════════════════════════════════════════════════ * * USO: * 1. Enlaza este CSS en tu * 2. Añade class="edumind-dark" al (modo por defecto) * 3. Toggle: añade/quita class="eink-mode" para activar modo lectura E-Ink * * ══════════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════════ FUENTES ═══════════════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* ═══════════════════════════════════════════════════════════════════════════════ VARIABLES CSS - EDUMIND DARK (Modo Principal) ═══════════════════════════════════════════════════════════════════════════════ */ :root, html.edumind-dark { /* Colores de marca EDUmind */ --edm-mint: #3ddad7; --edm-sky: #3c7dff; --edm-vio: #a963ff; /* Fondos */ --edm-bg: #040614; --edm-bg-gradient-1: rgba(77, 148, 255, 0.14); --edm-bg-gradient-2: rgba(164, 99, 255, 0.12); --edm-surface: rgba(25, 40, 66, 0.72); --edm-surface-solid: #0b1425; --edm-surface-hover: rgba(25, 40, 66, 0.85); /* Texto */ --edm-text: #f5fbff; --edm-text-muted: #96aac7; --edm-text-subtle: #5a7eaa; /* Bordes y líneas */ --edm-border: rgba(90, 126, 181, 0.38); --edm-border-hover: rgba(90, 126, 181, 0.6); /* Colores funcionales */ --edm-primary: var(--edm-sky); --edm-secondary: var(--edm-mint); --edm-accent: var(--edm-vio); --edm-success: #38ef7d; --edm-warning: #f59e0b; --edm-error: #ef4444; /* Gradientes de Los Mundos Edufis */ --mundo-fisico-start: #1f6f9c; --mundo-fisico-end: #78d1c3; --mundo-mental-start: #8d83ff; --mundo-mental-end: #5f6dff; --mundo-emocional-start: #ff7e5f; --mundo-emocional-end: #feb47b; --mundo-social-start: #11998e; --mundo-social-end: #38ef7d; --mundo-interior-start: #7e57c2; --mundo-interior-end: #4dd0e1; /* Sombras */ --edm-shadow: 0 24px 46px rgba(4, 10, 28, 0.55); --edm-shadow-hover: 0 30px 60px rgba(3, 10, 28, 0.55); --edm-shadow-glow: 0 4px 16px rgba(60, 125, 255, 0.3); /* Espaciado */ --edm-space-xs: 0.25rem; --edm-space-sm: 0.5rem; --edm-space-md: 1rem; --edm-space-lg: 1.5rem; --edm-space-xl: 2rem; --edm-space-2xl: 3rem; /* Bordes redondeados */ --edm-radius-sm: 8px; --edm-radius-md: 12px; --edm-radius-lg: 16px; --edm-radius-xl: 20px; --edm-radius-full: 999px; /* Transiciones */ --edm-transition: 0.2s ease; --edm-transition-fast: 0.15s ease; /* Tipografía */ --edm-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --edm-font-size: 17px; --edm-line-height: 1.65; /* Glassmorphism */ --edm-glass-blur: blur(18px) saturate(140%); } /* ═══════════════════════════════════════════════════════════════════════════════ VARIABLES CSS - MODO E-INK (Lectura prolongada) ═══════════════════════════════════════════════════════════════════════════════ */ html.eink-mode { /* Paleta E-Ink oscura */ --edm-bg: #2a2826; --edm-bg-gradient-1: transparent; --edm-bg-gradient-2: transparent; --edm-surface: #353230; --edm-surface-solid: #1f1d1c; --edm-surface-hover: #3d3a38; /* Texto E-Ink */ --edm-text: #d4cfc7; --edm-text-muted: #a8a49c; --edm-text-subtle: #7a7670; /* Bordes E-Ink */ --edm-border: #5a5650; --edm-border-hover: #7a7670; /* Colores funcionales desaturados */ --edm-primary: #a8a49c; --edm-secondary: #c0bbb2; --edm-accent: #8a857d; --edm-success: #a8a49c; --edm-warning: #c0bbb2; --edm-error: #a8a49c; /* Mundos: todos grises en E-Ink */ --mundo-fisico-start: #5a5650; --mundo-fisico-end: #7a7670; --mundo-mental-start: #5a5650; --mundo-mental-end: #7a7670; --mundo-emocional-start: #5a5650; --mundo-emocional-end: #7a7670; --mundo-social-start: #5a5650; --mundo-social-end: #7a7670; --mundo-interior-start: #5a5650; --mundo-interior-end: #7a7670; /* Sin sombras llamativas */ --edm-shadow: 1px 2px 4px rgba(0, 0, 0, 0.15); --edm-shadow-hover: 2px 4px 8px rgba(0, 0, 0, 0.2); --edm-shadow-glow: none; /* Sin glassmorphism */ --edm-glass-blur: none; /* Filtro E-Ink global */ filter: sepia(10%) saturate(80%) brightness(95%) contrast(90%); } /* ═══════════════════════════════════════════════════════════════════════════════ RESET Y BASE ═══════════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: var(--edm-font-size); scroll-behavior: smooth; } body { font-family: var(--edm-font-sans); font-size: 1rem; line-height: var(--edm-line-height); color: var(--edm-text); background-color: var(--edm-bg); background-image: radial-gradient(1400px 620px at 10% -20%, var(--edm-bg-gradient-1) 0%, transparent 65%), radial-gradient(1200px 560px at 90% -30%, var(--edm-bg-gradient-2) 0%, transparent 68%); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* E-Ink: textura de papel */ html.eink-mode body { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); } /* ═══════════════════════════════════════════════════════════════════════════════ CONTENEDOR PRINCIPAL ═══════════════════════════════════════════════════════════════════════════════ */ .lme-container { max-width: 900px; margin: 0 auto; padding: var(--edm-space-lg); } .lme-container--wide { max-width: 1200px; } .lme-container--narrow { max-width: 680px; } /* ═══════════════════════════════════════════════════════════════════════════════ HEADER ═══════════════════════════════════════════════════════════════════════════════ */ .lme-header { display: flex; align-items: center; justify-content: space-between; padding: var(--edm-space-md) var(--edm-space-lg); background: var(--edm-surface); border-bottom: 1px solid var(--edm-border); backdrop-filter: var(--edm-glass-blur); position: sticky; top: 0; z-index: 100; } .lme-brand { display: flex; align-items: center; gap: var(--edm-space-sm); font-weight: 600; font-size: 1rem; color: var(--edm-text); text-decoration: none; } .lme-brand:hover { color: var(--edm-secondary); } .lme-logo { font-size: 1.5rem; } /* Toggle E-Ink */ .eink-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--edm-surface-solid); border: 1px solid var(--edm-border); border-radius: var(--edm-radius-sm); cursor: pointer; font-size: 1.2rem; transition: all var(--edm-transition); } .eink-toggle:hover { background: var(--edm-surface-hover); border-color: var(--edm-primary); } .eink-toggle:focus { outline: 3px solid rgba(60, 125, 255, 0.5); outline-offset: 2px; } html.eink-mode .eink-toggle { background: var(--edm-primary); color: var(--edm-bg); } /* ═══════════════════════════════════════════════════════════════════════════════ CONTENIDO PRINCIPAL ═══════════════════════════════════════════════════════════════════════════════ */ .lme-content { padding: var(--edm-space-xl) var(--edm-space-lg); max-width: 900px; margin: 0 auto; } /* ═══════════════════════════════════════════════════════════════════════════════ TIPOGRAFÍA ═══════════════════════════════════════════════════════════════════════════════ */ h1, h2, h3, h4, h5, h6, .lme-h1, .lme-h2, .lme-h3, .lme-h4 { color: var(--edm-text); font-weight: 600; line-height: 1.3; margin-top: var(--edm-space-xl); margin-bottom: var(--edm-space-md); } h1, .lme-h1 { font-size: 2rem; font-weight: 700; background: linear-gradient(135deg, var(--edm-text) 0%, var(--edm-secondary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } html.eink-mode h1, html.eink-mode .lme-h1 { background: none; -webkit-text-fill-color: var(--edm-text); border-bottom: 2px solid var(--edm-border); padding-bottom: var(--edm-space-sm); } h2, .lme-h2 { font-size: 1.5rem; color: var(--edm-text-muted); } h3, .lme-h3 { font-size: 1.25rem; } h4, .lme-h4 { font-size: 1.1rem; } p { margin-bottom: var(--edm-space-md); } /* ═══════════════════════════════════════════════════════════════════════════════ ENLACES ═══════════════════════════════════════════════════════════════════════════════ */ a { color: var(--edm-primary); text-decoration: none; transition: color var(--edm-transition); } a:hover { color: var(--edm-secondary); } a:focus { outline: 2px solid var(--edm-primary); outline-offset: 2px; border-radius: 2px; } /* E-Ink: enlaces subrayados */ html.eink-mode a { text-decoration: underline; text-decoration-color: var(--edm-border); text-underline-offset: 3px; } html.eink-mode a:hover { text-decoration-color: var(--edm-text); } /* ═══════════════════════════════════════════════════════════════════════════════ TARJETAS (CARDS) ═══════════════════════════════════════════════════════════════════════════════ */ .lme-card { background: var(--edm-surface); border: 1px solid var(--edm-border); border-radius: var(--edm-radius-md); padding: var(--edm-space-lg); margin-bottom: var(--edm-space-md); backdrop-filter: var(--edm-glass-blur); box-shadow: var(--edm-shadow); transition: all var(--edm-transition); } .lme-card:hover { transform: translateY(-2px); border-color: var(--edm-primary); box-shadow: var(--edm-shadow-hover); } .lme-card__header { display: flex; align-items: center; gap: var(--edm-space-md); margin-bottom: var(--edm-space-md); padding-bottom: var(--edm-space-md); border-bottom: 1px solid var(--edm-border); } .lme-card__icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--mundo-fisico-start), var(--mundo-fisico-end)); border-radius: var(--edm-radius-md); font-size: 1.4rem; } .lme-card__title { font-size: 1.1rem; font-weight: 600; margin: 0; } .lme-card__body { color: var(--edm-text-muted); font-size: 0.95rem; } .lme-card__footer { margin-top: var(--edm-space-md); padding-top: var(--edm-space-md); border-top: 1px solid var(--edm-border); } /* E-Ink cards: sin glassmorphism */ html.eink-mode .lme-card { backdrop-filter: none; box-shadow: var(--edm-shadow); } html.eink-mode .lme-card:hover { transform: none; box-shadow: var(--edm-shadow-hover); } /* ═══════════════════════════════════════════════════════════════════════════════ BADGES DE LOS MUNDOS EDUFIS ═══════════════════════════════════════════════════════════════════════════════ */ .lme-badge { display: inline-block; padding: 0.25em 0.75em; font-size: 0.85rem; font-weight: 500; border-radius: var(--edm-radius-full); color: #fff; margin-right: var(--edm-space-xs); margin-bottom: var(--edm-space-xs); } .lme-badge--fisico { background: linear-gradient(135deg, var(--mundo-fisico-start), var(--mundo-fisico-end)); } .lme-badge--mental { background: linear-gradient(135deg, var(--mundo-mental-start), var(--mundo-mental-end)); } .lme-badge--emocional { background: linear-gradient(135deg, var(--mundo-emocional-start), var(--mundo-emocional-end)); } .lme-badge--social { background: linear-gradient(135deg, var(--mundo-social-start), var(--mundo-social-end)); } .lme-badge--interior { background: linear-gradient(135deg, var(--mundo-interior-start), var(--mundo-interior-end)); } /* E-Ink: badges planos */ html.eink-mode .lme-badge { background: var(--edm-surface); color: var(--edm-text); border: 1px solid var(--edm-border); } /* ═══════════════════════════════════════════════════════════════════════════════ BOTONES ═══════════════════════════════════════════════════════════════════════════════ */ .lme-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--edm-space-sm); padding: 0.6rem 1.2rem; font-family: var(--edm-font-sans); font-size: 0.95rem; font-weight: 500; color: #fff; background: linear-gradient(135deg, var(--edm-secondary), var(--edm-primary)); border: none; border-radius: var(--edm-radius-sm); cursor: pointer; text-decoration: none; transition: all var(--edm-transition); box-shadow: var(--edm-shadow-glow); } .lme-btn:hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 8px 24px rgba(60, 125, 255, 0.4); } .lme-btn:active { transform: translateY(0); } .lme-btn:focus { outline: 3px solid rgba(60, 125, 255, 0.5); outline-offset: 2px; } .lme-btn--outline { background: transparent; border: 2px solid var(--edm-border); color: var(--edm-text); box-shadow: none; } .lme-btn--outline:hover { background: var(--edm-surface); border-color: var(--edm-primary); box-shadow: none; } .lme-btn--small { padding: 0.4rem 0.8rem; font-size: 0.85rem; } /* E-Ink: botones planos */ html.eink-mode .lme-btn { background: var(--edm-text); color: var(--edm-bg); box-shadow: none; } html.eink-mode .lme-btn:hover { transform: none; filter: none; opacity: 0.9; } html.eink-mode .lme-btn--outline { background: transparent; color: var(--edm-text); border: 2px solid var(--edm-text); } /* ═══════════════════════════════════════════════════════════════════════════════ SECCIONES CON CABECERA (estilo mundo_fisico.html) ═══════════════════════════════════════════════════════════════════════════════ */ .lme-section { margin-bottom: var(--edm-space-2xl); } .lme-section__header { display: flex; align-items: center; gap: var(--edm-space-md); margin-bottom: var(--edm-space-lg); padding-bottom: var(--edm-space-sm); border-bottom: 3px solid var(--edm-primary); } .lme-section__icon { width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--edm-secondary), var(--edm-primary)); border-radius: 50%; color: #fff; font-size: 1.1rem; } .lme-section__title { font-size: 1.6rem; font-weight: 700; color: var(--edm-text); margin: 0; } html.eink-mode .lme-section__header { border-bottom-color: var(--edm-border); } html.eink-mode .lme-section__icon { background: var(--edm-surface); border: 1px solid var(--edm-border); } /* ═══════════════════════════════════════════════════════════════════════════════ HERO / INTRO BOX ═══════════════════════════════════════════════════════════════════════════════ */ .lme-hero { background: linear-gradient(135deg, var(--mundo-fisico-start) 0%, var(--mundo-fisico-end) 100%); color: #fff; padding: var(--edm-space-xl); border-radius: var(--edm-radius-lg); text-align: center; margin-bottom: var(--edm-space-xl); } .lme-hero__badge { display: inline-block; background: rgba(255, 255, 255, 0.2); padding: var(--edm-space-xs) var(--edm-space-md); border-radius: var(--edm-radius-full); font-weight: 600; margin-bottom: var(--edm-space-md); } .lme-hero__title { font-size: 2rem; font-weight: 700; margin: 0 0 var(--edm-space-sm); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); } .lme-hero__subtitle { font-size: 1.1rem; opacity: 0.95; margin: 0; } html.eink-mode .lme-hero { background: var(--edm-surface); border: 1px solid var(--edm-border); color: var(--edm-text); } html.eink-mode .lme-hero__badge { background: var(--edm-border); } html.eink-mode .lme-hero__title { text-shadow: none; } /* ═══════════════════════════════════════════════════════════════════════════════ INTRO BOX (con borde lateral) ═══════════════════════════════════════════════════════════════════════════════ */ .lme-intro { background: linear-gradient(135deg, rgba(230, 251, 244, 0.1) 0%, rgba(223, 244, 255, 0.1) 100%); padding: var(--edm-space-lg); border-radius: var(--edm-radius-md); border-left: 5px solid var(--edm-primary); margin-bottom: var(--edm-space-xl); } .lme-intro p { margin: 0; color: var(--edm-text); font-size: 1.05rem; } html.eink-mode .lme-intro { background: var(--edm-surface); border-left-color: var(--edm-border); } /* ═══════════════════════════════════════════════════════════════════════════════ GRID DE TARJETAS ═══════════════════════════════════════════════════════════════════════════════ */ .lme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--edm-space-lg); } .lme-grid--2 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .lme-grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } /* ═══════════════════════════════════════════════════════════════════════════════ LISTAS ═══════════════════════════════════════════════════════════════════════════════ */ ul, ol { margin: 0 0 var(--edm-space-md) 0; padding-left: var(--edm-space-xl); } li { margin-bottom: var(--edm-space-xs); } /* ═══════════════════════════════════════════════════════════════════════════════ TABLAS ═══════════════════════════════════════════════════════════════════════════════ */ table { width: 100%; border-collapse: collapse; margin: var(--edm-space-md) 0; } th, td { padding: var(--edm-space-sm) var(--edm-space-md); text-align: left; border-bottom: 1px solid var(--edm-border); } th { background: var(--edm-surface); color: var(--edm-text); font-weight: 600; } tr:hover { background: rgba(60, 125, 255, 0.08); } html.eink-mode tr:hover { background: var(--edm-surface-hover); } /* ═══════════════════════════════════════════════════════════════════════════════ IMÁGENES ═══════════════════════════════════════════════════════════════════════════════ */ img { max-width: 100%; height: auto; border-radius: var(--edm-radius-sm); } figure { margin: var(--edm-space-lg) 0; text-align: center; } figcaption { font-size: 0.9rem; color: var(--edm-text-muted); margin-top: var(--edm-space-sm); font-style: italic; } /* E-Ink: imágenes en escala de grises */ html.eink-mode img { filter: grayscale(100%) contrast(90%) brightness(105%); } /* ═══════════════════════════════════════════════════════════════════════════════ IFRAMES (para embeds de OneDrive, etc.) ═══════════════════════════════════════════════════════════════════════════════ */ iframe { max-width: 100%; border-radius: var(--edm-radius-sm); border: 1px solid var(--edm-border); } .lme-embed { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */ margin: var(--edm-space-md) 0; border-radius: var(--edm-radius-sm); overflow: hidden; box-shadow: var(--edm-shadow); } .lme-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .lme-embed--document { padding-top: 122%; /* Ratio documento A4 */ } /* ═══════════════════════════════════════════════════════════════════════════════ BLOCKQUOTES ═══════════════════════════════════════════════════════════════════════════════ */ blockquote { margin: var(--edm-space-lg) 0; padding: var(--edm-space-md) var(--edm-space-lg); border-left: 4px solid var(--edm-accent); background: var(--edm-surface); font-style: italic; color: var(--edm-text-muted); border-radius: 0 var(--edm-radius-sm) var(--edm-radius-sm) 0; } blockquote p:last-child { margin-bottom: 0; } html.eink-mode blockquote { border-left-color: var(--edm-border); } /* ═══════════════════════════════════════════════════════════════════════════════ CÓDIGO ═══════════════════════════════════════════════════════════════════════════════ */ code { font-family: 'Fira Code', 'JetBrains Mono', monospace; font-size: 0.9em; background: var(--edm-surface); padding: 0.15em 0.4em; border-radius: var(--edm-radius-sm); color: var(--edm-secondary); } pre { background: var(--edm-surface-solid); padding: var(--edm-space-md); border-radius: var(--edm-radius-sm); overflow-x: auto; border: 1px solid var(--edm-border); } pre code { background: none; padding: 0; color: var(--edm-text); } /* ═══════════════════════════════════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════════════════════════════════ */ .lme-footer { background: var(--edm-surface-solid); border-top: 1px solid var(--edm-border); padding: var(--edm-space-lg); text-align: center; margin-top: var(--edm-space-2xl); } .lme-footer p { margin: 0 0 var(--edm-space-sm); font-size: 1rem; font-weight: 600; } .lme-footer nav { display: flex; justify-content: center; gap: var(--edm-space-md); flex-wrap: wrap; } .lme-footer a { color: var(--edm-primary); font-size: 0.95rem; } /* ═══════════════════════════════════════════════════════════════════════════════ UTILIDADES ═══════════════════════════════════════════════════════════════════════════════ */ .text-center { text-align: center; } .text-muted { color: var(--edm-text-muted); } .text-small { font-size: 0.9rem; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--edm-space-md); } .mb-2 { margin-bottom: var(--edm-space-xl); } .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; justify-content: space-between; align-items: center; } .gap-1 { gap: var(--edm-space-md); } .gap-2 { gap: var(--edm-space-xl); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ═══════════════════════════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { html { font-size: 16px; } .lme-content { padding: var(--edm-space-md); } .lme-header { padding: var(--edm-space-sm) var(--edm-space-md); } .lme-brand span:last-child { display: none; } h1, .lme-h1 { font-size: 1.6rem; } h2, .lme-h2 { font-size: 1.3rem; } .lme-hero { padding: var(--edm-space-lg); } .lme-hero__title { font-size: 1.5rem; } .lme-grid { grid-template-columns: 1fr; } .lme-section__header { flex-direction: column; align-items: flex-start; gap: var(--edm-space-sm); } } @media (max-width: 480px) { .lme-footer nav { flex-direction: column; gap: var(--edm-space-sm); } } /* ═══════════════════════════════════════════════════════════════════════════════ TRANSICIÓN SUAVE ENTRE MODOS ═══════════════════════════════════════════════════════════════════════════════ */ html { transition: filter 0.3s ease; } body, .lme-card, .lme-hero, .lme-section__icon, .lme-badge, .lme-btn, .lme-header, .lme-footer { transition: background 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; } /* ═══════════════════════════════════════════════════════════════════════════════ PRINT STYLES ═══════════════════════════════════════════════════════════════════════════════ */ @media print { body { background: #fff; color: #000; } .lme-header, .lme-footer, .eink-toggle { display: none; } .lme-card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; } a { color: #000; text-decoration: underline; } }