@import url('./fonts/montserrat.css'); @import url('./fonts/source-sans.css'); /* -------------------------------------------------- */ /* Paleta de colores y variables globales */ /* -------------------------------------------------- */ :root { /** Base text colors */ --cffy-theme-light-a0: #ffffff; --cffy-theme-dark-a0: #000000; /** Theme primary colors */ --cffy-theme-primary-a0: #ff0; --cffy-theme-primary-a10: #ffff4b; --cffy-theme-primary-a20: #feff6b; --cffy-theme-primary-a30: #feff83; --cffy-theme-primary-a40: #feff99; --cffy-theme-primary-a50: #feffac; /** Theme surface colors */ --cffy-theme-surface-a0: #211522; --cffy-theme-surface-a10: #342835; --cffy-theme-surface-a20: #473c48; --cffy-theme-surface-a30: #5c525d; --cffy-theme-surface-a40: #716872; --cffy-theme-surface-a50: #888088; /** Theme tonal surface colors */ --cffy-theme-surface-tonal-a0: #33292a; --cffy-theme-surface-tonal-a10: #453b3c; --cffy-theme-surface-tonal-a20: #574e4f; --cffy-theme-surface-tonal-a30: #6a6263; --cffy-theme-surface-tonal-a40: #7e7778; --cffy-theme-surface-tonal-a50: #928c8d; /** Success colors */ --cffy-theme-success-a0: #5fc79e; --cffy-theme-success-a10: #84d3b1; --cffy-theme-success-a20: #a5dec4; /** Warning colors */ --cffy-theme-warning-a0: #dcab5f; --cffy-theme-warning-a10: #e3bc81; --cffy-theme-warning-a20: #ebcda1; /** Danger colors */ --cffy-theme-danger-a0: #ff9085; --cffy-theme-danger-a10: #ffa79d; --cffy-theme-danger-a20: #ffbeb5; /** Info colors */ --cffy-theme-info-a0: #88b6ff; --cffy-theme-info-a10: #a0c5ff; --cffy-theme-info-a20: #b7d4ff; /** Valores reutilizados en todo el sitio */ --max-content-width: calc(1200px - 5%); --surface-overlay: rgba(255, 255, 255, 0.1); --transition-base: all 0.15s ease-in-out; } /* -------------------------------------------------- */ /* General Settings */ /* -------------------------------------------------- */ * { box-sizing: border-box; font-family: "Source Sans 3", sans-serif; font-optical-sizing: auto; outline: none !important; scrollbar-color: lightgray transparent; scrollbar-width: thin; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: var(--transition-base); } h1, h2, h3, h4, h5, h6 { font-weight: bold; font-family: "Montserrat", sans-serif; } /* Escalan suavemente entre movil y escritorio, sin necesidad de media queries. */ h1 { font-size: clamp(1.65rem, 4.5vw + 0.5rem, 2.5rem); } h2 { font-size: clamp(1.3rem, 2.5vw + 0.5rem, 1.75rem); } a { text-decoration: none; color: var(--cffy-theme-primary-a10); } html { color: var(--cffy-theme-light-a0); } html, body { margin: 0; padding: 0; background-color: var(--cffy-theme-surface-a0); } /* Solo en (no en ): tener overflow en ambos rompe el position:sticky del header en Chrome/Safari. */ body { overflow-x: hidden; /* Red de seguridad: la pagina NUNCA debe desplazarse hacia los lados */ } /* Ningun elemento multimedia puede forzar un ancho mayor al de su contenedor. */ img, svg, canvas, video { max-width: 100%; height: auto; } /* Los textos largos (URLs, enlaces sin espacios) nunca deben ensanchar la pagina. */ p, li, a { overflow-wrap: anywhere; word-break: break-word; } /* -------------------------------------------------- */ /* Elementos de la UI */ /* -------------------------------------------------- */ form *, input { border: none; } form ol { margin: 0; padding: 0; list-style: none; } li { gap: 0.75rem; display: flex; font-size: medium; align-items: center; justify-content: start; } button, select { cursor: pointer; gap: 10px; display: flex; font-size: medium; align-items: center; justify-content: center; margin: 0; height: auto; padding: 10px; border: none; border-radius: 3px; } button img { background-color: transparent; } button svg { color: var(--cffy-theme-light-a0); } select, textarea { border: none; border-radius: 10px; color: var(--cffy-theme-light-a0); background-color: var(--cffy-theme-surface-a0); } /* -------------------------------------------------- */ /* Tablas en HTML */ /* -------------------------------------------------- */ table { background-color: var(--surface-overlay); border-radius: 12px; padding: 10px; } /* -------------------------------------------------- */ /* Efecto glass */ /* -------------------------------------------------- */ .glass { /* From https://css.glass */ background-color: var(--surface-overlay); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* -------------------------------------------------- */ /* Layout compartido: Header & Footer */ /* -------------------------------------------------- */ header, footer { flex-shrink: 0; /* Evita que el header/footer se aplasten si hay mucho texto */ } .header-body, .footer-body { margin: 0 auto; width: 100%; /* ← Ocupa todo el espacio disponible */ max-width: var(--max-content-width); /* ← Se detiene en monitores grandes */ padding: 10px; } /* -------------------------------------------------- */ /* Header de la pagina */ /* -------------------------------------------------- */ .website_header { top: 0; left: 0; right: 0; z-index: 100; position: sticky; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 0 !important; /* Para quitar el redondeo del .glass */ } .header-body { gap: 20px; display: grid; grid-template-columns: 1fr; grid-template-rows: 45px; vertical-align: middle; justify-content: space-between; /* Logo en el header */ #site-logo { cursor: pointer; width: 250px; height: 100%; max-width: 50vw; } } /* Menu del boton de inicio */ #menuBtn { border-radius: 10px; display: none; background-color: var(--cffy-theme-surface-a10); svg { color: var(--cffy-theme-light-a0); } } #menuBtn:hover { background-color: var(--cffy-theme-surface-a30); } /* -------------------------------------------------- */ /* Navegaciones del sitio web: Header */ /* -------------------------------------------------- */ .header_nav { gap: 10px; list-style: none; display: inline-flex; padding: 0; margin: 0; li { padding: 10px; border-radius: 10px; background-color: var(--cffy-theme-surface-a10); } li:hover { background-color: var(--cffy-theme-surface-a20); } } /* -------------------------------------------------- */ /* Cuerpo de la pagina */ /* -------------------------------------------------- */ body { background-repeat: no-repeat; background-attachment: fixed; background-size: cover; /* Este codigo hace que el footer siempre este al fondo aunque haya poco contenido */ display: grid; grid-template-rows: auto 1fr auto; /* Cabecera automática, contenido expandible, pie automático */ min-height: 100vh; /* Ocupa toda la altura visible de la pantalla */ } body main { flex: 1; /* Este es el motor: estira el main para llenar el hueco */ width: var(--max-content-width); padding: 10px; padding-top: 20px; max-width: calc(100% - 20px); margin: 0 auto; } /* -------------------------------------------------- */ /* Monitor de ping */ /* -------------------------------------------------- */ #test_panel { margin-top: 24px; } /* -------------------------------------------------- */ /* Formulario de controles (juego + region + boton) */ /* -------------------------------------------------- */ .controles-test { /* Usamos CSS Grid en vez de Flexbox: con minmax(0, 1fr) las columnas NUNCA pueden crecer mas alla del espacio disponible, sin importar que tan largo sea el texto de las opciones del . Ese display hace que Chrome calcule el ancho segun el texto de TODAS las opciones (incluso las largas), ignorando width:100%. */ display: block; width: 100%; min-width: 0; max-width: 100%; } .controles-test #btn_test { flex: 0 0 auto; height: 44px; padding: 0 22px; align-self: flex-end; font-weight: bold; color: var(--cffy-theme-dark-a0); background-color: var(--cffy-theme-primary-a10); } .controles-test #btn_test:hover { background-color: var(--cffy-theme-primary-a20); } .controles-test #btn_test[data-estado="on"] { color: var(--cffy-theme-light-a0); background-color: crimson; } .controles-test #btn_test[data-estado="on"]:hover { background-color: var(--cffy-theme-danger-a0); } /* -------------------------------------------------- */ /* Tabla de resultados, grafico y terminal */ /* -------------------------------------------------- */ .tabla-resultados { width: 100%; margin: 18px 0; padding: 8px; } .tabla-resultados table { width: 100%; padding: 0; overflow: hidden; background: transparent; border-collapse: collapse; } .tabla-resultados th, .tabla-resultados td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--surface-overlay); } .tabla-resultados th { color: var(--cffy-theme-primary-a10); background: transparent; } .tabla-resultados tr:last-child td { border-bottom: none; } /* El valor y el estado reflejan la calidad de cada metrica en tiempo real. */ .tabla-resultados td.metrica-coloreada { color: var(--color-metrica); background: linear-gradient(90deg, var(--fondo-metrica), transparent 82%); text-shadow: 0 0 12px var(--fondo-metrica); transition: color 180ms ease, background 180ms ease, text-shadow 180ms ease; } .tabla-resultados td.metrica-coloreada strong { color: inherit; } .contenedor-grafico { position: relative; width: 100%; height: 360px; margin: 18px 0; padding: 14px; } .terminal { overflow: hidden; margin: 18px 0; color: #9ef59e; border: 1px solid #3b4b3b; border-radius: 10px; background: #080c08; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); } .terminal-barra { display: flex; gap: 8px; align-items: center; padding: 9px 12px; color: #d8d8d8; background: #1c211c; } .terminal-barra span { width: 11px; height: 11px; flex: 0 0 11px; border-radius: 50%; background: #ff5f56; } .terminal-barra span:nth-child(2) { background: #ffbd2e; } .terminal-barra span:nth-child(3) { background: #27c93f; } .terminal-barra strong { margin-left: 6px; font-family: Consolas, "Courier New", monospace; font-size: 0.9rem; } #terminal_log { height: 280px; overflow: auto; margin: 0; padding: 14px; color: inherit; background: transparent; white-space: pre-wrap; overflow-wrap: anywhere; font-family: Consolas, "Courier New", monospace; font-size: 0.9rem; line-height: 1.55; } /* -------------------------------------------------- */ /* Widget de afiliados: recomendaciones de hardware */ /* -------------------------------------------------- */ .recomendaciones { margin: 32px 0; } .recomendaciones-intro { max-width: 720px; color: var(--cffy-theme-light-a0); } .recomendaciones-disclosure { margin: 4px 0 18px; font-size: 0.78rem; font-style: italic; color: var(--cffy-theme-surface-tonal-a50); } /* Flexbox con flex-wrap (NO CSS Grid): se acomoda solo en 2, 3 o 4 columnas segun el espacio disponible, sin scroll alguno. A diferencia de Grid, flex-shrink permite que las tarjetas se encojan libremente sin nunca forzar un ancho mayor al de la pagina. */ .recomendaciones-carrusel { display: flex; flex-wrap: wrap; gap: 16px; width: 100%; } .recomendacion-card { flex: 1 1 240px; min-width: 0; /* Permite que el contenido se encoja sin forzar overflow */ max-width: 100%; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; padding: 20px; } .recomendacion-categoria { font-size: 0.75rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cffy-theme-primary-a10); } .recomendacion-card h3 { margin: 0; font-size: 1.1rem; } .recomendacion-card p { margin: 0; flex: 1; font-size: 0.9rem; line-height: 1.5; color: var(--cffy-theme-light-a0); } .recomendacion-boton { display: inline-block; margin-top: 8px; padding: 10px 16px; border-radius: 8px; text-align: center; font-weight: bold; color: var(--cffy-theme-dark-a0); background-color: var(--cffy-theme-primary-a10); } .recomendacion-boton:hover { background-color: var(--cffy-theme-primary-a20); } /* -------------------------------------------------- */ /* Footer de la pagina */ /* -------------------------------------------------- */ body footer { margin: 0; padding: 10px; height: auto; border-top: 1px solid var(--cffy-theme-surface-a20); } .footer-body { padding: 30px 10px 10px; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 40px; margin-bottom: 10px; } /* Columna izquierda: descripcion + copyright */ .footer-info { display: flex; flex-direction: column; gap: 8px; max-width: 480px; } .footer-description, .footer-copyright { margin: 0; color: var(--cffy-theme-light-a0); } .footer-description { font-size: 0.9rem; line-height: 1.5; } .footer-copyright { font-size: 0.8rem; } /* -------------------------------------------------- */ /* Navegaciones del sitio web: Footer */ /* -------------------------------------------------- */ .footer_nav { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 24px; } .footer_nav li { padding: 0; background: transparent; } .footer_nav a { font-size: 0.9rem; } .footer_nav a:hover { text-decoration: underline; } /* -------------------------------------------------- */ /* Reducir movimiento (accesibilidad) */ /* -------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ==================================================================== */ /* RESPONSIVE */ /* Organizado de mayor a menor ancho de pantalla. Cada bloque solo */ /* agrega/ajusta lo necesario para ese tamaño (mobile-last, no repite */ /* estilos ya validos en breakpoints mas anchos). */ /* ==================================================================== */ /* -------------------------------------------------- */ /* Tablets (<= 1023px): el header pasa a 3 columnas */ /* para dejar espacio al boton de menu movil. */ /* -------------------------------------------------- */ @media (max-width: 1023px) { .header-body { gap: 10px; grid-template-columns: auto 1fr 45px; } } /* -------------------------------------------------- */ /* Tablets pequenas / moviles en horizontal (<= 700px) */ /* El formulario de controles se apila para que cada */ /* campo (juego, region, boton) ocupe el ancho completo.*/ /* -------------------------------------------------- */ @media (max-width: 700px) { .controles-test { grid-template-columns: 1fr; padding: 16px; } .controles-test #btn_test { width: 100%; align-self: stretch; } body main { padding-top: 14px; } .contenedor-grafico { height: 300px; } /* La tabla deja de ser una tabla y se convierte en tarjetas apiladas. Asi evitamos por completo el scroll horizontal en moviles. */ .tabla-resultados table, .tabla-resultados thead, .tabla-resultados tbody, .tabla-resultados th, .tabla-resultados td, .tabla-resultados tr { display: block; } .tabla-resultados thead { display: none; /* Los encabezados se reemplazan por las etiquetas de cada tarjeta */ } .tabla-resultados tbody { display: flex; flex-direction: column; gap: 10px; } .tabla-resultados tr { border-radius: 12px; padding: 12px 14px; } .tabla-resultados td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: none; } /* Primera celda: nombre de la metrica, funciona como titulo de la tarjeta */ .tabla-resultados td:first-child { padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--surface-overlay); color: var(--cffy-theme-primary-a10); font-weight: bold; } /* Etiquetas generadas por CSS para las columnas "Value" y "Status" */ .tabla-resultados td:nth-child(2)::before, .tabla-resultados td:nth-child(3)::before { font-size: 0.75rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; color: var(--cffy-theme-surface-a50); } .tabla-resultados td:nth-child(2)::before { content: "Value"; } .tabla-resultados td:nth-child(3)::before { content: "Status"; } /* En movil el swipe tactil es natural: aqui SI usamos un carrusel horizontal con scroll-snap. En escritorio/tablet se usa el grid responsivo definido arriba (sin scroll alguno). flex-wrap:nowrap es clave: sin esto, las tarjetas heredan "wrap" del CSS de escritorio y saltan de linea en vez de quedarse en una sola fila. */ .recomendaciones-carrusel { display: grid; grid-template-columns: repeat(6, 260px); max-width: calc(100%); overflow-y: hidden; overflow-x: auto; } .recomendacion-card { flex: 0 0 260px; scroll-snap-align: start; } /* IMPORANTE: Eso es para que la pagina me deje de dar problemas */ body main { max-width: calc(100vw); } } /* -------------------------------------------------- */ /* Telefonos (<= 480px) */ /* -------------------------------------------------- */ @media (max-width: 480px) { .header-body { gap: 10px; grid-template-columns: 45px 1fr 45px; } .contenedor-grafico { height: 260px; padding: 8px; } .tabla-resultados tr { padding: 10px 12px; } .footer-body { grid-template-columns: 1fr; gap: 20px; } .footer-info { max-width: 100%; } .footer_nav { justify-content: flex-start; } } /* -------------------------------------------------- */ /* Telefonos muy pequenos (<= 380px, ej. iPhone SE) */ /* Reduce aun mas la tabla para evitar scroll excesivo. */ /* -------------------------------------------------- */ @media (max-width: 380px) { .tabla-resultados tr { padding: 8px 10px; font-size: 0.85rem; } .controles-test { padding: 12px; } } /* ==================================================================== */ /* APPLE / iOS ESPECIFICO */ /* @supports (-webkit-touch-callout: none) detecta unicamente Safari */ /* en iOS/iPadOS (incluyendo WKWebView), sin afectar a Chrome, Firefox */ /* ni Safari de escritorio. Todo lo de aqui es exclusivo para Apple. */ /* ==================================================================== */ @supports (-webkit-touch-callout: none) { /* Evita que iOS haga zoom automatico al enfocar un . Safari hace zoom cuando el font-size es menor a 16px. */ select, input, textarea { font-size: 16px; } /* El "notch" y la barra de gestos no deben tapar el header ni el footer en iPhones. Requiere viewport-fit=cover en el . */ .header-body { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); } body footer { padding-bottom: max(10px, env(safe-area-inset-bottom)); } /* Scroll con inercia nativa de iOS para el log tipo terminal. */ #terminal_log { -webkit-overflow-scrolling: touch; } /* Corrige el bug de "100vh" en Safari iOS, donde la barra de direcciones cambia de tamaño y deja un hueco en blanco abajo. */ body { min-height: -webkit-fill-available; } html { height: -webkit-fill-available; } /* Quita el resaltado gris al tocar enlaces y botones. */ a, button { -webkit-tap-highlight-color: transparent; } }