/* ========================================================================== MAGIC COMMANDER — ESTILOS GLOBALES (cabecera y pie de TODA la web) ========================================================================== ESTE ARCHIVO SE PUEDE EDITAR EN CALIENTE. Ábrelo con el Bloc de notas, cambia lo que quieras, guarda y pulsa F5 en el navegador. NO hace falta reiniciar el servidor ni tocar nada de Python. Aquí vive UNA SOLA VERSIÓN de la barra de arriba y del pie de abajo. Las usan todas las páginas de la aplicación: la portada y las 23 páginas internas (mazos, colección, explorador, simulador...). Si cambias un color o un tamaño de aquí, cambia en toda la web a la vez. Lo que es SOLO de la portada (los cuatro bloques, el círculo del simulador, las cartas inclinadas) sigue en su propio archivo: `inicio.css`. El nombre de la marca, el año del copyright y las direcciones de las redes sociales NO están aquí: están en `app/server.py`, muy arriba, en el bloque "DATOS DE LA MARCA". Ahí se cambian una vez y cambian en todas las páginas. ========================================================================== */ :root { /* ---------- COLORES DE FONDO (cabecera y pie) ---------- */ --fondo: #0a0c11; /* fondo oscuro general */ --fondo-alto: #141a27; /* color del resplandor de arriba */ --panel: #151a24; /* fondo de los paneles */ --panel-alto: #1e2634; /* fondo de los paneles, parte iluminada */ --borde: #2a3444; /* línea fina */ --borde-brillo: #3d4b63; /* la misma línea, al pasar el ratón */ /* ---------- COLORES DE TEXTO ---------- */ --texto: #eef2f8; /* títulos y texto principal */ --texto-suave: #9aa7bd; /* descripciones y texto secundario */ --texto-tenue: #6b7790; /* detalles pequeños y avisos legales */ /* ---------- COLOR DE ACENTO ---------- Es el color de la marca: el dorado del menú, del logo y de los enlaces del pie. Cambia estos tres y cambia el carácter de toda la web. */ --acento: #d9a441; --acento-claro: #f2cf7c; --acento-oscuro: #8a6520; /* ---------- MEDIDAS Y TIPOGRAFÍA COMPARTIDAS ---------- */ --ancho-maximo: 1320px; /* ancho máximo de la barra y del pie */ --radio: 16px; /* redondeo general */ --transicion: .28s cubic-bezier(.2, .7, .3, 1); --fuente: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; } /* Solo dentro de la cabecera y el pie: así estas reglas no tocan NADA del contenido de las páginas internas, que conservan su estilo de siempre. */ .barra, .barra *, .pie-global, .pie-global * { box-sizing: border-box; } /* ========================================================================== BARRA SUPERIOR — componente global, idéntico en todas las páginas ========================================================================== */ .barra { position: sticky; top: 0; z-index: 50; background: rgba(10, 12, 17, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--borde); font-family: var(--fuente); line-height: 1.55; } .barra-interior { max-width: var(--ancho-maximo); margin: 0 auto; padding: 0 28px; height: 62px; /* barra baja: el protagonismo es del contenido */ /* 22px y no 30: con los dos selectores de idioma a la derecha (Fase 5), a 30px el menú se pasaba por 4 píxeles del ancho útil y saltaba a dos líneas. El hueco entre el menú y los selectores no cambia, porque lo reparte el `margin-left: auto` de `.barra-idiomas`. */ display: flex; align-items: center; gap: 22px; } /* ---------- Hueco del logo ---------- Cuando tengas el logo definitivo, guárdalo como app/estilos/logo.png (o .svg / .webp) y aparecerá aquí solo, y también en el pie, sustituyendo al recuadro provisional. No hay que tocar nada de código. */ .logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; } .logo, .logo:hover { text-decoration: none; } .logo-hueco { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: .5rem; font-weight: 800; letter-spacing: .09em; color: var(--acento-claro); background: linear-gradient(145deg, #232c3c, #131922); border: 1px solid var(--acento-oscuro); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); flex-shrink: 0; } .logo-img { width: 34px; height: 34px; border-radius: 9px; object-fit: contain; display: block; } .logo-nombre { font-size: .95rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--texto); } .logo-nombre span { color: var(--acento); } /* ---------- Enlaces de navegación ---------- */ .barra nav { display: flex; gap: 4px; flex-wrap: wrap; } .barra nav a { position: relative; padding: 8px 13px; border-radius: 8px; font-size: .87rem; font-weight: 600; letter-spacing: .015em; color: var(--texto-suave); text-decoration: none; transition: color var(--transicion), background var(--transicion); } .barra nav a:hover { color: var(--texto); background: rgba(255, 255, 255, .05); } .barra nav a:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; } /* La página en la que estás, marcada con el color de acento y un subrayado. */ .barra nav a.activo { color: var(--acento-claro); } .barra nav a.activo::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--acento), transparent); } /* ========================================================================== PIE — componente global, idéntico en todas las páginas -------------------------------------------------------------------------- El orden de la información es el que se pidió y no debe cambiarse: 1. iconos de redes sociales 2. marca / logo 3. aviso de proyecto independiente y no oficial 4. aviso de Contenido de Fans / Wizards of the Coast 5. copyright ========================================================================== */ .pie-global { margin-top: 56px; border-top: 1px solid var(--borde); background: radial-gradient(90% 150% at 50% 0%, rgba(217, 164, 65, .07) 0%, transparent 60%), linear-gradient(180deg, #0d1118 0%, var(--fondo) 100%); color: var(--texto-suave); font-family: var(--fuente); line-height: 1.6; } .pie-interior { max-width: var(--ancho-maximo); margin: 0 auto; padding: 38px 28px 42px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; } /* ---------- 1. Redes sociales ---------- Mientras no haya cuentas, son huecos reservados: no llevan enlace a ninguna parte. En cuanto pongas las direcciones en `REDES_SOCIALES` (app/server.py) se convierten solos en enlaces de verdad. */ .pie-redes { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; } .rs { width: 40px; height: 40px; border-radius: 11px; display: inline-grid; place-items: center; background: linear-gradient(145deg, var(--panel-alto), #10141d); border: 1px solid var(--borde); color: var(--texto-suave); text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); transition: color var(--transicion), border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion); } .rs-icono { font-size: .72rem; font-weight: 800; letter-spacing: .04em; } .rs-img { width: 20px; height: 20px; object-fit: contain; display: block; } /* El hueco reservado se ve apagado y con el borde punteado: se nota que todavía no hay cuenta detrás, en vez de aparentar un enlace roto. */ .rs-pendiente { border-style: dashed; color: var(--texto-tenue); cursor: default; } /* El que sí tiene cuenta configurada reacciona al ratón. */ a.rs:hover { color: var(--acento-claro); border-color: var(--acento-oscuro); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08); } a.rs:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; } /* ---------- 2. Marca / logo ---------- */ .pie-marca { display: flex; align-items: center; gap: 11px; } .pie-marca .logo-nombre { font-size: 1rem; letter-spacing: .15em; } .pie-separador { width: min(320px, 70%); height: 1px; border: 0; margin: 2px 0; background: linear-gradient(90deg, transparent, var(--borde), transparent); } /* ---------- 3 y 4. Avisos legales ---------- */ .pie-legal { display: flex; flex-direction: column; gap: 12px; max-width: 78ch; } .pie-aviso { margin: 0; font-size: .81rem; color: var(--texto-tenue); text-wrap: pretty; } .pie-aviso-destacado { font-size: .85rem; font-weight: 600; color: var(--texto-suave); letter-spacing: .01em; } .pie-aviso a { color: var(--texto-suave); text-decoration: underline; text-underline-offset: 3px; } .pie-aviso a:hover { color: var(--acento-claro); } /* ---------- 5. Copyright ---------- */ .pie-copyright { margin: 0; padding-top: 4px; font-size: .78rem; color: var(--texto-tenue); letter-spacing: .03em; } /* ========================================================================== PANTALLAS MÁS PEQUEÑAS -------------------------------------------------------------------------- Nada se sale de la pantalla: el menú y los iconos se reparten en varias líneas y los textos legales parten por donde haga falta. ========================================================================== */ @media (max-width: 720px) { .barra-interior { padding: 10px 18px; height: auto; flex-wrap: wrap; gap: 10px 18px; } .barra nav { gap: 2px; } .barra nav a { padding: 7px 10px; font-size: .82rem; } .pie-interior { padding: 32px 18px 36px; gap: 16px; } .pie-redes { gap: 10px; } .rs { width: 38px; height: 38px; } .pie-aviso { font-size: .79rem; } .pie-legal { max-width: 100%; } } /* Para quien tenga desactivadas las animaciones en su sistema. */ @media (prefers-reduced-motion: reduce) { .barra *, .pie-global * { transition: none !important; } a.rs:hover { transform: none; } } /* ---------- Los dos selectores de idioma (SISTEMA DE IDIOMAS, Fase 5) ---------- Van a la derecha del todo de la barra, separados del menú. Son dos campos independientes: el de la WEB cambia el texto de la aplicación y el de las CARTAS cambia nombres e imágenes; ninguno toca lo del otro. */ .barra-idiomas { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .bi-campo { display: flex; align-items: center; gap: 5px; cursor: pointer; } .bi-icono { width: 17px; height: 17px; color: var(--texto-suave, #8c93a8); flex-shrink: 0; } .bi-campo:hover .bi-icono { color: var(--texto, #e8eaf2); } .barra-idiomas select { appearance: none; -webkit-appearance: none; background: rgba(255, 255, 255, .05) url("data:image/svg+xml;charset=utf-8,\ %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' \ fill='none' stroke='%238c93a8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 9px center / 10px 7px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 7px; color: var(--texto, #e8eaf2); font: inherit; font-size: .82rem; padding: 5px 26px 5px 10px; cursor: pointer; } .barra-idiomas select:hover { background-color: rgba(255, 255, 255, .09); } .barra-idiomas select:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; } /* El desplegable lo pinta el sistema operativo: se le da fondo oscuro para que no salga en blanco sobre la barra oscura. */ .barra-idiomas option { background: #171a23; color: #e8eaf2; } .bi-boton { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 7px; color: var(--texto, #e8eaf2); font: inherit; font-size: .82rem; padding: 5px 10px; cursor: pointer; } /* En pantallas estrechas se aprieta un poco más. Los iconos se quedan: son lo único que distingue el selector de la web del de las cartas. */ /* Tramo intermedio: entre 1250 y 1340 px el menú y los dos selectores caben justos. Se aprieta un poco el menú para que siga en UNA línea, que es como estaba antes de añadir los selectores. */ @media (max-width: 1340px) { .barra-interior { gap: 16px; } .barra nav a { padding-left: 11px; padding-right: 11px; } } /* Por debajo de 1250 px ya no caben en una línea el logo, las seis entradas del menú y los dos selectores: pasan de 1.264 px de ancho útil (medido). En vez de dejar que el menú se salga de una barra de alto fijo, la barra crece y se reparte en dos líneas ordenadas -- exactamente lo que ya hacía en móvil desde el rediseño del 22/09/2026, solo que ahora empieza antes. */ @media (max-width: 1250px) { .barra-interior { height: auto; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; row-gap: 10px; } } @media (max-width: 1100px) { .barra-idiomas { gap: 7px; } } @media (max-width: 660px) { .barra-idiomas { margin-left: 0; width: 100%; justify-content: flex-start; } .barra-idiomas select { font-size: .78rem; padding: 4px 24px 4px 8px; } }