/** * tabla-periodica.css — Accesibilidad 100 / A11y AA · Móvil primero * Versión corregida con rejilla fluida y responsive. * Requiere que el tenga class="tp-page" */ :root { /* Paleta de colores y temas */ --bg-0: #0f1720; --bg-1: #141c27; --bg-2: #1b2735; --text: #f5f7fa; --text-2: #c9d2dc; --border: #2c3a4b; --shadow: rgba(0, 0, 0, .55); --accent: #0078D7; --accent-strong: #0a66c2; --danger: #D93025; --danger-strong: #b2251c; /* Colores de familias químicas */ --c-alkali: #d83737; --c-alkaline-earth: #b66d00; --c-lanthanide: #9b7a00; --c-actinide: #c06a11; --c-transition: #2c86df; --c-post-transition: #149b83; --c-metalloid: #1f9a58; --c-polyatomic-nonmetal: #7a4bbb; --c-diatomic-nonmetal: #6c3aa7; --c-noble-gas: #7d8c95; --c-unknown: #6c7a85; /* Tipografía y métricas base */ --ff: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --r-sm: 6px; --r-md: 10px; --easing: cubic-bezier(.2, .6, .2, 1); --t: .22s; } /* Reset y estilos base del body */ .tp-page, .tp-page *::before, .tp-page *::after { box-sizing: border-box; } .tp-page { margin: 0; font-family: var(--ff); color: var(--text); background: radial-gradient(1200px 600px at 50% -10%, var(--bg-2), var(--bg-0)); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; line-height: 1.5; } /* Skip link accesible */ .tp-page a.visually-hidden:focus { position: static !important; width: auto; height: auto; margin: 1rem; padding: .5rem .75rem; background: var(--accent-strong); color: #fff; border-radius: var(--r-sm); display: inline-block; } /* Header */ .tp-page .main-header { text-align: center; margin: 1rem 0 1.1rem; } .tp-page .main-header h1 { color: var(--text); font-size: clamp(1.4rem, 4vw, 2.15rem); letter-spacing: .5px; text-shadow: 0 2px 6px var(--shadow); } /* Layout principal */ .tp-page .container { max-width: 1380px; margin: 0 auto; padding: 0 .75rem; } /* ----------------- Controles ----------------- */ .tp-page .controls { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem .9rem; margin-bottom: 1.2rem; } .tp-page .control-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .tp-page .controls button, .tp-page .button { font: inherit; line-height: 1; padding: .6rem .9rem; min-height: 40px; min-width: 44px; border-radius: var(--r-sm); border: 1px solid var(--border); background: #223140; color: #fff; cursor: pointer; transition: background var(--t) var(--easing), transform var(--t) var(--easing), box-shadow var(--t) var(--easing); } .tp-page .controls button:hover { background: var(--accent-strong); } .tp-page .controls button:focus-visible { outline: 3px solid #fff; box-shadow: 0 0 0 3px rgba(10, 102, 194, .6); background: var(--accent-strong); } .tp-page .controls button.active { background: var(--accent-strong); font-weight: 700; } .tp-page #resetButton { background: var(--danger-strong); border-color: transparent; } .tp-page #resetButton:hover { background: var(--danger); } .tp-page #resetButton:focus-visible { outline: 3px solid #fff; box-shadow: 0 0 0 3px rgba(185, 37, 28, .55); } .tp-page #tempSlider { accent-color: var(--accent); cursor: pointer; } .tp-page #tempValue { font-weight: 700; min-width: 66px; text-align: center; color: #111; background: #f5f5f5; padding: 2px 8px; border-radius: 6px; } /* -------------- Contenedor de la Tabla (Simplificado) -------------- */ .tp-page .table-container { position: relative; padding: 0.5rem 0; } .tp-page .loader { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); font-size: 1.05rem; color: var(--text-2); } /* -------------- La Tabla Periódica (Rejilla 100% Fluida) -------------- */ .tp-page .periodic-table { display: grid; /* Previene desbordamientos de contenido en las celdas de la rejilla */ grid-template-columns: repeat(18, minmax(0, 1fr)); gap: clamp(2px, 1vw, 5px); /* El espacio entre celdas también es adaptable */ width: 100%; } /* -------------- Tarjetas de Elemento (Contenido 100% Fluido) -------------- */ .tp-page .element { position: relative; aspect-ratio: 1 / 1; /* Mantiene las celdas cuadradas */ border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-2); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 1px; text-align: center; cursor: pointer; transition: transform var(--t) var(--easing), box-shadow var(--t) var(--easing), opacity var(--t) var(--easing); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); } .tp-page .element * { color: inherit; line-height: 1.1; } .tp-page .element:hover, .tp-page .element:focus-visible { transform: scale(1.05); box-shadow: 0 0 0 3px rgba(255, 255, 255, .12), 0 10px 22px var(--shadow); outline: none; z-index: 2; } .tp-page .periodic-table.dim-others .element { opacity: .28; transform: scale(.98); } .tp-page .periodic-table.dim-others .element.highlight-group { opacity: 1; transform: scale(1.02); } /* Tamaños de fuente fluidos con clamp() para eliminar la necesidad de media queries */ .tp-page .element-number { position: absolute; top: clamp(1px, 1vw, 4px); left: clamp(1px, 1vw, 4px); font-size: clamp(0.4rem, 1.5vw, 0.65rem); /* min, ideal, max */ opacity: .9; } .tp-page .element-symbol { font-size: clamp(0.7rem, 3vw, 1.2rem); font-weight: 800; } .tp-page .element-name, .tp-page .element-value { font-size: clamp(0.45rem, 1.6vw, 0.7rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 95%; /* Asegura que el ellipsis funcione */ } /* Ocultamos los textos menos importantes en pantallas muy pequeñas para más claridad */ @media (max-width: 600px) { .tp-page .element-name { display: none; } } @media (max-width: 400px) { .tp-page .element-value { display: none; } } /* Estados (modo Tabla) */ .tp-page .element.solid { background: var(--c-transition); } .tp-page .element.liquid { background: var(--c-alkali); } .tp-page .element.gas { background: var(--c-diatomic-nonmetal); } .tp-page .element.unknown-phase { background: var(--c-unknown); } /* Clases de categoría para colores de fondo */ .tp-page .category-alkali { background: var(--c-alkali); } .tp-page .category-alkaline-earth { background: var(--c-alkaline-earth); } .tp-page .category-lanthanide { background: var(--c-lanthanide); } .tp-page .category-actinide { background: var(--c-actinide); } .tp-page .category-transition { background: var(--c-transition); } .tp-page .category-post-transition { background: var(--c-post-transition); } .tp-page .category-metalloid { background: var(--c-metalloid); } .tp-page .category-polyatomic-nonmetal { background: var(--c-polyatomic-nonmetal); } .tp-page .category-diatomic-nonmetal { background: var(--c-diatomic-nonmetal); } .tp-page .category-noble-gas { background: var(--c-noble-gas); } .tp-page .category-unknown { background: var(--c-unknown); } /* -------------- Leyenda (familias) -------------- */ .tp-page .legend-container { padding-top: 1rem; margin-top: 1rem; border-top: 1px solid var(--border); } .tp-page .legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1rem; } .tp-page .legend-item { display: inline-flex; align-items: center; gap: .5rem; font-size: .95rem; user-select: none; min-height: 36px; padding: .45rem .7rem; border-radius: 9999px; background: #223140; color: #fff; border: 1px solid var(--border); box-shadow: 0 2px 8px var(--shadow); } .tp-page .legend-btn { all: unset; display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; } .tp-page .legend-item:hover { background: var(--bg-2); } .tp-page .legend-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .tp-page .legend-item.active { background: var(--accent-strong); border-color: transparent; transform: translateY(-1px); } .tp-page .legend .dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); flex-shrink: 0; } /* -------------- Modal -------------- */ .tp-page .info-card-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .7); z-index: 1000; opacity: 0; visibility: hidden; transition: opacity var(--t) var(--easing), visibility var(--t) var(--easing); } .tp-page .info-card-overlay.active { opacity: 1; visibility: visible; } .tp-page .info-card { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.96); z-index: 1001; width: min(92vw, 560px); background: var(--bg-1); color: var(--text); border-radius: var(--r-md); box-shadow: 0 16px 40px var(--shadow); opacity: 0; visibility: hidden; transition: opacity var(--t) var(--easing), transform var(--t) var(--easing), visibility var(--t) var(--easing); display: flex; flex-direction: column; max-height: 85vh; } .tp-page .info-card.open { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } .tp-page .info-card-header { display: flex; justify-content: space-between; align-items: center; padding: .85rem 1.1rem; border-bottom: 1px solid var(--border); } .tp-page .info-card-title { font-size: 1.25rem; margin: 0; color: var(--text); } .tp-page .info-card-close { font-size: 1.25rem; line-height: 1; padding: .45rem .6rem; min-width: 44px; min-height: 44px; border-radius: var(--r-sm); border: 1px solid transparent; background: #223140; color: #fff; cursor: pointer; } .tp-page .info-card-close:hover { background: var(--accent-strong); } .tp-page .info-card-close:focus-visible { outline: 3px solid #fff; box-shadow: 0 0 0 3px rgba(10, 102, 194, .6); } .tp-page .info-card-content { padding: 1rem 1.1rem 1.2rem; overflow-y: auto; font-size: .98rem; } .tp-page .info-card-content p { margin: .5rem 0; } .tp-page .info-card-content .label { font-weight: 700; color: #9ec9ff; } .tp-page .bohr-model-viewer { width: 100%; height: 250px; margin-bottom: 1rem; border-radius: var(--r-sm); } /* Utilidad A11y */ .tp-page .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); } /* Preferencias de usuario */ @media (prefers-reduced-motion: reduce) { .tp-page *, .tp-page *::before, .tp-page *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } .tp-page .element:hover, .tp-page .element:focus-visible { transform: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); } } @media (forced-colors: active) { :root { --border: CanvasText; } .tp-page .element, .tp-page .info-card { border: 1px solid ButtonBorder; } .tp-page .controls button { forced-color-adjust: auto; } }