/* ============================================================ AKDMY · campus — estilos Comparte paleta y tipografía con el resto del sitio. El fondo NO es el de clases.html: aquí no hay auroras ni constelación, sino una malla quieta sobre un degradado profundo. Es una pantalla en la que se escribe, y el movimiento estorba. ============================================================ */ @import url("../ApiCLASES/fuentes/fuentes.css"); /* El ancho declarado incluye el relleno y el borde. Sin esto, un campo con width:100% y su relleno se sale de la columna que lo contiene: era lo que hacía que en los cuadros de dos columnas el campo de la izquierda se montara encima del de la derecha. */ *, *::before, *::after { box-sizing: border-box; } /* El navegador le da al body un margen de 8px por su cuenta, y eso despegaba la barra superior del borde de la ventana. */ html, body { margin: 0; } :root { /* Los controles nativos —casillas, desplegables, calendarios, barras de desplazamiento— se pintan en claro si no se dice lo contrario. Sobre estos fondos oscuros cantan. */ color-scheme: dark; --pa-violeta: #5857d5; --pa-violeta2: #7d7cff; --pa-magenta: #d203ab; --pa-magenta2: #ff4fd8; --pa-ambar: #ffc000; --pa-tinta: #0c0c1d; --pa-cristal: rgba(255, 255, 255, .045); --pa-cristal2: rgba(255, 255, 255, .075); --pa-borde: rgba(255, 255, 255, .12); --pa-suave: rgba(255, 255, 255, .72); --pa-tenue: rgba(255, 255, 255, .48); --pa-ease: cubic-bezier(.22, 1, .36, 1); --pa-tipo: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; /* Superficies. Están aquí y no escritas a mano en cada regla porque son lo único que cambia entre el modo oscuro y el claro. */ --pa-fondo: #07070f; /* la página */ --pa-panel: #12121f; /* cajas que flotan: diálogos, avisos */ --pa-cab: rgba(9, 9, 20, .86); /* la barra de arriba */ --pa-texto: #fff; /* texto sobre esas superficies */ --pa-aurora1: #1b1b45; --pa-aurora2: #2a1046; --pa-fondo2: #0c0c1d; --pa-fuerza: 1; /* cuánto se nota el fondo animado */ } /* ------------------------------------------------------ modo claro Solo se redefinen las superficies y los grises. Los colores de marca —violeta, magenta, ámbar— son los mismos en los dos modos: son la identidad, no el tema. El atributo lo pone campus.js sobre antes de pintar nada, leyéndolo de localStorage. */ :root[data-tema="claro"] { color-scheme: light; --pa-cristal: rgba(12, 12, 29, .035); --pa-cristal2: rgba(12, 12, 29, .06); --pa-borde: rgba(12, 12, 29, .13); --pa-suave: rgba(12, 12, 29, .72); --pa-tenue: rgba(12, 12, 29, .5); --pa-fondo: #f3f3f8; --pa-panel: #ffffff; --pa-cab: rgba(255, 255, 255, .88); --pa-texto: #0c0c1d; --pa-aurora1: #dcdcf4; --pa-aurora2: #f0dcf4; --pa-fondo2: #ffffff; /* El fondo animado se pensó sobre negro: sobre blanco, al 25 % insinúa sin ensuciar. */ --pa-fuerza: .25; } /* ============================================================ Lienzo del campus ============================================================ */ .campus { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; display: grid; place-items: center; padding: calc(var(--cab-alto) + 3rem) 0 4rem; background: radial-gradient(90% 70% at 50% -10%, var(--pa-aurora1) 0%, transparent 60%), radial-gradient(70% 60% at 88% 108%, var(--pa-aurora2) 0%, transparent 62%), linear-gradient(var(--pa-fondo), var(--pa-fondo2) 55%, var(--pa-fondo)); color: var(--pa-texto); font-family: var(--pa-tipo); } /* Malla fina, sin animación. */ .campus::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 76%); mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 76%); } /* Un filo de luz arriba, para despegar la cabecera del fondo. */ .campus::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; z-index: 0; background: linear-gradient(90deg, transparent, rgba(125, 124, 255, .45), transparent); } .campus__in { position: relative; z-index: 1; width: min(520px, 92vw); } /* Las páginas de formulario largo (pagar, trabaja) necesitan más ancho: si no, la tarjeta se queda estrangulada por el contenedor. */ .campus__in--ancho { width: min(680px, 94vw); } /* ============================================================ Tarjeta ============================================================ */ .tarjeta { position: relative; background: var(--pa-cristal); border: 1px solid var(--pa-borde); border-radius: 42px; padding: clamp(28px, 3.6vw, 44px); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); box-shadow: 0 30px 80px -40px #000, inset 0 1px 0 rgba(255, 255, 255, .09); } .tarjeta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(125, 124, 255, .75), transparent 38%, transparent 62%, rgba(255, 79, 216, .6)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .tarjeta__cab { text-align: center; margin-bottom: 26px; } .tarjeta__cab img { height: 52px; width: auto; margin: 0 auto 18px; filter: drop-shadow(0 0 20px rgba(125, 124, 255, .6)); } .tarjeta__cab h1 { font-family: var(--pa-tipo); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.12; margin: 0; } .tarjeta__cab p { margin: 8px 0 0; font-size: .95rem; color: var(--pa-suave); } .pa-grad { background: linear-gradient(105deg, #fff 8%, var(--pa-violeta2) 42%, var(--pa-magenta2) 72%, var(--pa-ambar)); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: paBrillo 7s linear infinite; } @keyframes paBrillo { to { background-position: 220% center; } } @media (prefers-reduced-motion: reduce) { .pa-grad { animation: none; } } /* ============================================================ Pestañas ============================================================ */ .pestanas { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 26px; border-radius: 99px; background: rgba(255, 255, 255, .05); border: 1px solid var(--pa-borde); } .pestanas button { padding: 11px 10px; border: 0; border-radius: 99px; background: transparent; color: var(--pa-tenue); font-family: var(--pa-tipo); font-size: .92rem; font-weight: 500; cursor: pointer; transition: background-color .25s, color .25s; } .pestanas button:hover { color: #fff; } .pestanas button[aria-selected="true"] { color: #fff; background: linear-gradient(115deg, var(--pa-violeta), var(--pa-magenta)); box-shadow: 0 8px 24px -12px rgba(210, 3, 171, .9); } /* ============================================================ Campos ============================================================ */ .pa-campo { margin-bottom: 15px; } .pa-campo label { display: block; font-size: .78rem; color: var(--pa-tenue); margin-bottom: 7px; letter-spacing: .05em; } .pa-campo input, .pa-campo select, .pa-campo textarea { width: 100%; padding: 13px 16px; background: rgba(255, 255, 255, .045); border: 1px solid var(--pa-borde); border-radius: 12px; color: #fff; font-family: var(--pa-tipo); font-size: .95rem; transition: border-color .28s, box-shadow .28s, background-color .28s; } .pa-campo select option { color: #0c0c1d; } .pa-campo input::placeholder, .pa-campo textarea::placeholder { color: rgba(255, 255, 255, .3); } .pa-campo input:focus, .pa-campo select:focus, .pa-campo textarea:focus { outline: 0; border-color: rgba(125, 124, 255, .75); background: rgba(255, 255, 255, .07); box-shadow: 0 0 0 4px rgba(88, 87, 213, .16); } .pa-campo input:disabled, .pa-campo textarea:disabled { opacity: .55; cursor: not-allowed; } /* El textarea del navegador viene con tipografía monoespaciada y un tirador de redimensión propios: los dos hay que apagarlos. */ .pa-campo textarea { min-height: 104px; line-height: 1.6; resize: vertical; display: block; } /* Dos campos por fila cuando hay sitio. */ .pa-par { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } @media (max-width: 460px) { .pa-par { grid-template-columns: 1fr; } } /* ============================================================ Botón ============================================================ */ .pa-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 15px 30px; border: 0; border-radius: 99px; font-family: var(--pa-tipo); font-weight: 600; font-size: .97rem; color: #fff; cursor: pointer; background: linear-gradient(115deg, var(--pa-violeta), var(--pa-magenta)); box-shadow: 0 10px 34px -8px rgba(210, 3, 171, .65), inset 0 1px 0 rgba(255, 255, 255, .28); transition: transform .3s var(--pa-ease), box-shadow .3s, opacity .25s; } .pa-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 42px -10px rgba(210, 3, 171, .8); } /* Deshabilitado no es lo mismo que ocupado. Un botón puede estar apagado porque la acción no está disponible —y entonces no debe girar nada, o parece que carga para siempre— o porque hay una petición en curso, y ahí sí. Lo segundo se marca aparte. */ .pa-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; } .pa-btn[data-cargando] { cursor: progress; } .pa-btn__giro { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: paGirar .7s linear infinite; display: none; } .pa-btn[data-cargando] .pa-btn__giro { display: block; } @keyframes paGirar { to { transform: rotate(360deg); } } /* ============================================================ Avisos ============================================================ */ .pa-aviso { margin: 16px 0 0; padding: 13px 16px; border-radius: 12px; font-size: .88rem; line-height: 1.5; display: none; } .pa-aviso[data-tipo] { display: block; } .pa-aviso[data-tipo="error"] { background: rgba(216, 50, 74, .14); border: 1px solid rgba(216, 50, 74, .4); color: #ffb3c0; } .pa-aviso[data-tipo="ok"] { background: rgba(53, 229, 255, .1); border: 1px solid rgba(53, 229, 255, .32); color: #a9f0ff; } .pa-aviso[data-tipo="info"] { background: rgba(255, 192, 0, .1); border: 1px solid rgba(255, 192, 0, .32); color: #ffdf94; } .pa-aviso code { background: rgba(0, 0, 0, .3); padding: .1em .4em; border-radius: 5px; font-size: .92em; } .pa-pie { text-align: center; margin: 22px 0 0; font-size: .9rem; color: var(--pa-suave); } .pa-pie a { color: var(--pa-violeta2); } .pa-pie a:hover { text-decoration: underline; } .pa-legal { text-align: center; margin: 14px 0 0; font-size: .76rem; color: var(--pa-tenue); line-height: 1.5; } /* ============================================================ Verificación pública de certificados (verificar.html) ============================================================ */ .ver { margin-top: 20px; padding: 22px 24px; border-radius: 20px; border: 1px solid var(--pa-borde); background: var(--pa-cristal); animation: ver-entra .45s var(--pa-ease) both; } @keyframes ver-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .ver h3 { margin: 0 0 4px; font-size: 1.05rem; letter-spacing: -.01em; } .ver h3::before { display: inline-block; width: 1.5em; font-weight: 700; } .ver--si { border-color: rgba(53, 229, 255, .34); background: rgba(53, 229, 255, .07); } .ver--si h3 { color: #a9f0ff; } .ver--si h3::before { content: "\2713"; } .ver--no { border-color: rgba(216, 50, 74, .38); background: rgba(216, 50, 74, .08); } .ver--no h3 { color: #ffb3c0; } .ver--no h3::before { content: "\2715"; } .ver p { margin: 8px 0 0; font-size: .9rem; line-height: 1.6; color: var(--pa-suave); } .ver dl { margin: 16px 0 0; display: grid; gap: 12px; } .ver dl > div { display: grid; grid-template-columns: 118px 1fr; gap: 12px; align-items: baseline; } .ver dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--pa-tenue); } .ver dd { margin: 0; font-size: .95rem; color: #fff; word-break: break-word; } .ver code { background: rgba(0, 0, 0, .32); padding: .12em .45em; border-radius: 6px; font-size: .92em; letter-spacing: .04em; } @media (max-width: 520px) { .ver dl > div { grid-template-columns: 1fr; gap: 3px; } } /* ============================================================ Pago de matrícula (pagar.html) ============================================================ */ .tarjeta--ancha { max-width: 620px; } .precio { margin-top: 18px; padding: 18px 22px; border-radius: 18px; border: 1px solid var(--pa-borde); background: var(--pa-cristal2); display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .precio b { font-size: 1.9rem; letter-spacing: -.03em; background: linear-gradient(100deg, var(--pa-violeta2), var(--pa-magenta2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .precio span { font-size: .86rem; color: var(--pa-tenue); } #pasarelas { display: grid; gap: 16px; margin-top: 22px; } .pasarela { padding: 22px 24px; border-radius: 20px; border: 1px solid var(--pa-borde); background: var(--pa-cristal); } .pasarela h3 { margin: 0 0 4px; font-size: .98rem; letter-spacing: -.01em; } .pasarela p { margin: 0 0 16px; font-size: .86rem; line-height: 1.55; color: var(--pa-suave); } /* PayPal dibuja sus botones dentro; solo se les da aire. */ #paypal-botones { min-height: 46px; } /* ============================================================ Trabaja aquí (trabaja.html) ============================================================ */ .pa-nota { margin-top: 20px; padding: 16px 20px; border-radius: 16px; border: 1px solid rgba(255, 192, 0, .28); background: rgba(255, 192, 0, .07); font-size: .88rem; line-height: 1.6; color: var(--pa-suave); } .pa-nota b { color: #ffdf94; } .paso { margin: 26px 0 0; padding: 24px 24px 6px; border: 1px solid var(--pa-borde); border-radius: 22px; background: var(--pa-cristal); } .paso legend { padding: 0 12px; margin-left: -4px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pa-violeta2); } .paso .pa-campo small { display: block; margin-top: 7px; font-size: .78rem; line-height: 1.55; color: var(--pa-tenue); } .paso .pa-campo small b { color: var(--pa-suave); } /* --- casillas ---------------------------------------------- */ .casillas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; } .casillas--fila { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .casillas label { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--pa-borde); border-radius: 12px; background: rgba(255, 255, 255, .03); font-size: .86rem; color: var(--pa-suave); cursor: pointer; transition: border-color .22s, background-color .22s, color .22s; } .casillas label:hover { background: rgba(255, 255, 255, .07); } .casillas input { width: 17px; height: 17px; flex: none; accent-color: var(--pa-violeta); cursor: pointer; } .casillas label:has(input:checked) { border-color: rgba(125, 124, 255, .6); background: rgba(88, 87, 213, .16); color: #fff; } /* --- foto, separador, aceptación ---------------------------- */ .previa { margin-top: 12px; width: 96px; height: 96px; border-radius: 18px; overflow: hidden; border: 1px solid var(--pa-borde); } .previa img { width: 100%; height: 100%; object-fit: cover; display: block; } .pa-o { display: flex; align-items: center; gap: 14px; margin: 4px 0 18px; color: var(--pa-tenue); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; } .pa-o::before, .pa-o::after { content: ""; flex: 1; height: 1px; background: var(--pa-borde); } .pa-acepta { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 20px; font-size: .85rem; line-height: 1.6; color: var(--pa-suave); cursor: pointer; } .pa-acepta input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--pa-violeta); cursor: pointer; } .pa-acepta a { color: var(--pa-violeta2); } /* Solo la ven los robots: fuera de pantalla, no display:none, que algunos la detectan y la esquivan. */ .pa-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* --- barra de progreso -------------------------------------- */ .barra { position: relative; height: 6px; margin: 16px 0 22px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; } .barra i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--pa-violeta), var(--pa-magenta2)); transition: width .4s var(--pa-ease); } .barra::after { content: attr(data-texto); position: absolute; left: 0; top: 12px; font-size: .78rem; color: var(--pa-tenue); } /* El formulario es largo: el botón necesita respirar. */ #form-trabaja .pa-btn { width: 100%; margin-top: 6px; } @media (max-width: 560px) { .paso { padding: 20px 16px 4px; border-radius: 18px; } .casillas { grid-template-columns: 1fr; } } /* Los campos de archivo: el botón nativo dentro de nuestra caja. */ .pa-campo input[type="file"] { padding: 9px 12px; font-size: .88rem; color: var(--pa-suave); cursor: pointer; } .pa-campo input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 15px; border: 0; border-radius: 99px; font-family: var(--pa-tipo); font-size: .84rem; font-weight: 600; color: #fff; cursor: pointer; background: rgba(255, 255, 255, .1); transition: background-color .22s; } .pa-campo input[type="file"]::file-selector-button:hover { background: rgba(255, 255, 255, .18); } /* ============================================================ Páginas de formulario largo El cristal esmerilado es barato en una tarjeta de 600 px y caro en una de 3000: el navegador tiene que rasterizar una capa del tamaño de toda la tarjeta y rehacerla en cada scroll. En equipos modestos eso se nota como tirones y, si la capa no llega a tiempo, como fondo sin pintar. En estas páginas el cristal se cambia por un color plano —se ve casi igual— y la rejilla decorativa se ancla a la ventana en lugar de a un elemento de miles de píxeles. ============================================================ */ .campus--largo::before { position: fixed; } .tarjeta--larga { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(17, 17, 32, .78); }