/* ============================================================================ SOP — MANUAL DEL ESCUADRÓN ---------------------------------------------------------------------------- Estilo alineado con las páginas de PILOTO (profile.css) y MISIÓN (mission.css), que son las que marcan el tono serio del sitio, y NO con index.css / reclutamiento.css, que vienen de la maqueta antigua. Lo que se hereda de ese lenguaje: · fondo #0f172e y paneles en degradado 150deg sobre azul noche · el mismo acento AZUL (#60a5fa), no el morado de la portada; violeta y verde solo acompañan para distinguir rol y estado · cejas en versalitas muy espaciadas (letter-spacing .26em) como etiqueta · filete degradado que remata los títulos de sección (.sop-rule) · rejilla técnica enmascarada en la cabecera · cifras con font-variant-numeric: tabular-nums El FONDO es el que tenía /reclutamiento (foto fija con velo azul noche); lo que cambia respecto a aquella página es la paleta de los elementos. Es autónomo: no depende de reclutamiento.css (cuya página ya no existe) ni de index.css. ============================================================================ */ /* Las variables van en el y no en .sop: la página de una guía usa .sop-guide-page, que NO está dentro de .sop, y si se declararan ahí ninguna resolvería en esa página. */ body.page-sop { /* El AZUL DEL SITIO (#60a5fa), el mismo que usan profile.css y mission.css. No se sustituye por variantes más claras: el documento tiene que leerse como parte de la web, no como una página aparte. Violeta y verde solo acompañan, para marcar rol y estado. */ --sop-accent: #60a5fa; --sop-accent-soft: rgba(96, 165, 250, 0.13); --sop-accent-line: rgba(96, 165, 250, 0.30); --sop-lead: #a78bfa; --sop-ok: #4ade80; --sop-danger: #f87171; --sop-warn: #fbbf24; --sop-ink: #fff; --sop-body: #cbd5e1; --sop-muted: #8296b8; --sop-dim: #64748b; --sop-line: rgba(255, 255, 255, 0.08); --sop-panel: linear-gradient(150deg, rgba(30, 41, 59, 0.93), rgba(15, 23, 46, 0.96)); /* Colores del plan de instrucción, tomados del cuadro oficial del AQP. Viven aquí y no dentro de `.aqp` porque fuera del cuadro también se usan: las cajas que explican cada fase llevan el color de su fase, y si estuvieran declarados solo en el diagrama habría que repetir los hex a mano. */ --aqp-bcr: #5a9e34; --aqp-ag: #2e75b6; --aqp-aa: #2f5597; --aqp-mc: #c62828; --aqp-gate: #fbbf24; --sop-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.9); /* Alto de la barra superior fija + aire. Lo usan el `top` del índice y el scroll-margin de las secciones, para que nada quede debajo de la barra. */ --sop-top: 96px; /* Fondo del documento: el mismo tratamiento que tenía /reclutamiento — fotografía fija con un velo azul noche encima—, que es lo que se pidió. Lo que cambia respecto a aquella página es la PALETA de los elementos (azul en vez de morado), no el fondo. */ background: linear-gradient(rgba(15, 23, 46, 0.88), rgba(15, 23, 46, 0.96)), url('../images/bandits_11.webp'); background-size: cover; background-position: center; background-attachment: fixed; color: #cbd5e1; font-family: 'Oswald', sans-serif; } .sop { padding-bottom: 100px; } /* ─────────────────────────────────────────────────────── CABECERA / PORTADA ─ No es un héroe de landing: es la portada de un documento. El fondo ya lo pone el , así que aquí solo van el velo de acento y la rejilla técnica. */ .sop-cover { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--sop-line); } .sop-cover-scrim { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 12% 115%, rgba(96, 165, 250, 0.24), transparent 70%); pointer-events: none; } /* Rejilla técnica: el mismo recurso del héroe de piloto y de misión. */ .sop-cover-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.75) 45%, transparent 95%); mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.75) 45%, transparent 95%); pointer-events: none; } .sop-cover-inner { position: relative; z-index: 2; padding: 150px 0 46px; } .sop-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--sop-muted); margin-bottom: 16px; } .sop-eyebrow .sop-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--sop-accent); } /* Titular a dos alturas: el nombre desarrollado, pequeño, y la sigla grande debajo. El

sigue conteniendo las dos cosas, así que para un buscador o un lector de pantalla el título es "Standard Operation Program SOP" completo. / .sop-cover h1 { margin: 0; display: flex; flex-direction: column; gap: 6px; } .sop-cover-full { font-family: 'Oswald', sans-serif; font-size: clamp(0.82rem, 2vw, 1.05rem); font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; color: var(--sop-body); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); } / Más contenido que la sigla sola, así que baja el cuerpo y el espaciado: con los 8px y los 4.6rem de antes, "ESTÁNDARES (SOP)" no cabía en una línea ni en escritorio. / .sop-cover-abbr { font-family: 'Horizon', sans-serif; font-size: clamp(1.5rem, 4.4vw, 3.05rem); line-height: 1.08; letter-spacing: 4px; text-transform: uppercase; text-wrap: balance; color: var(--sop-ink); text-shadow: 0 6px 30px rgba(0, 0, 0, 0.75); } .sop-cover-abbr span { color: var(--sop-accent); } .sop-cover-sub { max-width: 620px; margin: 18px 0 0; font-size: 1.02rem; line-height: 1.75; color: var(--sop-body); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); } / ────────────────────────────────────────────────────────────────── MAQUETA ─ / .sop-layout { display: grid; grid-template-columns: 292px minmax(0, 1fr); gap: 52px; padding-top: 44px; align-items: start; } / ── Índice ───────────────────────────────────────────────────────────────── `sticky`, no `fixed`. Con `fixed` el panel se sacaba del flujo y quedaba flotando sobre la cabecera del documento y sobre la barra de navegación: se solapaba con el texto de la portada. Con `sticky` + `align-self: start` arranca en su sitio, debajo de la portada, y acompaña el scroll durante todo el documento respetando la barra superior (de ahí el `top`). `max-height` + scroll interno para que un índice largo nunca desborde la ventana. / .sop-toc { position: sticky; top: var(--sop-top); align-self: start; max-height: calc(100vh - var(--sop-top) - 28px); display: flex; flex-direction: column; border: 1px solid var(--sop-line); border-radius: 18px; background: var(--sop-panel); box-shadow: var(--sop-shadow); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow: hidden; } / El plegado es cosa exclusiva del móvil. / .sop-toc-toggle { display: none; } .sop-toc-head { padding: 16px 18px 12px; border-bottom: 1px solid var(--sop-line); } .sop-toc-title { display: flex; align-items: center; gap: 12px; font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--sop-muted); } .sop-toc-title .sop-rule { flex: 1; } / Barra de avance de lectura. La mueve sop.js; sin JS se queda a cero y no estorba, porque es una línea de 2px. / .sop-progress { margin-top: 12px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.07); overflow: hidden; } .sop-progress-bar { display: block; height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--sop-accent), var(--sop-lead)); transition: width 0.25s ease; } .sop-toc-inner { overflow-y: auto; padding: 10px; scrollbar-width: thin; scrollbar-color: rgba(96, 165, 250, 0.45) transparent; } .sop-toc-inner::-webkit-scrollbar { width: 6px; } .sop-toc-inner::-webkit-scrollbar-thumb { background: rgba(96, 165, 250, 0.45); border-radius: 3px; } .sop-toc-list { list-style: none; margin: 0; padding: 0; } .sop-toc-item > a, .sop-toc-item > span { position: relative; display: flex; align-items: baseline; gap: 11px; padding: 9px 12px; border-radius: 10px; font-size: 0.86rem; line-height: 1.35; color: var(--sop-body); text-decoration: none; transition: background 0.18s ease, color 0.18s ease; } .sop-toc-item > a:hover { background: rgba(96, 165, 250, 0.12); color: var(--sop-ink); } / Sección en la que estás. La marca sop.js; sin JS no se resalta ninguna y el índice navega exactamente igual. / .sop-toc-item > a.is-current { background: var(--sop-accent-soft); color: var(--sop-ink); box-shadow: inset 2px 0 0 var(--sop-accent); } .sop-toc-n { flex: none; font-family: 'Horizon', sans-serif; font-size: 0.62rem; letter-spacing: 0.08em; color: var(--sop-dim); font-variant-numeric: tabular-nums; } .sop-toc-item > a.is-current .sop-toc-n { color: var(--sop-accent); } .sop-toc-label { flex: 1; } / Secciones aún sin redactar: se listan para que se vea el mapa completo del documento, pero no son enlaces ni lo parecen. / .sop-toc-item.is-pending > span { color: var(--sop-dim); cursor: default; } .sop-toc-item.is-pending .sop-toc-n { color: #475569; } .sop-toc-flag { flex: none; font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: #475569; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 999px; padding: 2px 7px; } / ── Cuerpo ─────────────────────────────────────────────────────────────── / .sop-body-col { min-width: 0; } .sop-notice { display: flex; align-items: flex-start; gap: 13px; margin: 0 0 38px; padding: 15px 19px; border-radius: 14px; background: rgba(251, 191, 36, 0.08); border: 1px solid rgba(251, 191, 36, 0.22); font-size: 0.92rem; line-height: 1.7; color: var(--sop-body); } .sop-notice i { color: var(--sop-warn); margin-top: 3px; flex: none; } .sop-section { scroll-margin-top: var(--sop-top); margin-bottom: 72px; } .sop-section:last-child { margin-bottom: 0; } / Cabecera de sección: número grande, título, filete degradado que remata la línea. Mismo recurso que .pf-rule / .msn-rule. / .sop-section-head { margin-bottom: 26px; } .sop-section-line { display: flex; align-items: center; gap: 16px; } .sop-section-n { flex: none; font-family: 'Horizon', sans-serif; font-size: 0.78rem; letter-spacing: 0.16em; color: var(--sop-accent); font-variant-numeric: tabular-nums; padding: 5px 11px; border: 1px solid var(--sop-accent-line); border-radius: 8px; background: var(--sop-accent-soft); } .sop-section-head h2 { font-family: 'Horizon', sans-serif; font-size: clamp(1.2rem, 2.6vw, 1.6rem); letter-spacing: 1.5px; color: var(--sop-ink); margin: 0; white-space: nowrap; } .sop-rule { flex: 1; height: 1px; min-width: 20px; background: linear-gradient(90deg, rgba(96, 165, 250, 0.55), rgba(255, 255, 255, 0.05)); } .sop-section-sum { margin: 12px 0 0; font-size: 0.92rem; line-height: 1.7; color: var(--sop-muted); } .sop-h3 { display: flex; align-items: center; gap: 14px; font-family: 'Horizon', sans-serif; font-size: 0.92rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sop-body); margin: 42px 0 16px; } .sop-h3::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.06); } .sop-body-col p { font-size: 1rem; line-height: 1.85; color: var(--sop-muted); margin: 0 0 17px; } .sop-body-col a { color: #93bbfc; text-decoration: underline; text-underline-offset: 3px; } .sop-body-col a:hover { color: #bae6fd; } .sop-empty { color: var(--sop-dim); font-style: italic; } / ──────────────────────────────────────────── PIEZAS DE LAS SECCIONES ────── / / Aviso destacado / .sop-callout { display: flex; align-items: flex-start; gap: 15px; padding: 19px 22px; border-radius: 16px; background: var(--sop-panel); border: 1px solid var(--sop-line); border-left: 2px solid var(--sop-accent); box-shadow: 0 20px 40px -28px rgba(0, 0, 0, 0.9); margin-bottom: 28px; } .sop-callout > i { color: var(--sop-accent); font-size: 1.1rem; margin-top: 3px; flex: none; } .sop-callout > div { font-size: 0.98rem; line-height: 1.8; color: var(--sop-body); } .sop-callout strong { color: var(--sop-ink); } / Idea clave de la sección: se tiñe con el acento para que destaque del resto del cuerpo. (Este modificador se usaba ya en las plantillas pero se quedó sin declarar al reescribir la hoja, así que no hacía nada.) / .sop-callout.is-key { background: linear-gradient(150deg, rgba(96, 165, 250, 0.11), rgba(15, 23, 46, 0.9)); } / Aviso: no prohíbe nada, avisa de una consecuencia. De ahí el ámbar, que es lo que antes llevaban las cajas de prohibición. / .sop-callout.is-warn { border-left-color: var(--sop-warn); background: linear-gradient(150deg, rgba(251, 191, 36, 0.09), rgba(15, 23, 46, 0.9)); } .sop-callout.is-warn > i { color: var(--sop-warn); } / Tabla / .sop-table-wrap { / La tabla scrollea DENTRO de su caja: el cuerpo de la página no se mueve en horizontal nunca, ni en móvil. / overflow-x: auto; border-radius: 16px; border: 1px solid var(--sop-line); background: var(--sop-panel); margin-bottom: 24px; -webkit-overflow-scrolling: touch; } .sop-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; min-width: 540px; } .sop-table thead th { background: rgba(96, 165, 250, 0.10); color: var(--sop-muted); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; text-align: left; padding: 13px 20px; white-space: nowrap; border-bottom: 1px solid var(--sop-accent-line); } .sop-table td { padding: 16px 20px; border-top: 1px solid var(--sop-line); color: var(--sop-muted); line-height: 1.75; vertical-align: top; } .sop-table tbody tr:first-child td { border-top: 0; } .sop-table tbody tr:hover td { background: rgba(255, 255, 255, 0.02); } .sop-table td strong { color: var(--sop-body); } .sop-table td:first-child { width: 33%; min-width: 200px; } .sop-td-sub { display: block; font-size: 0.76rem; color: var(--sop-dim); margin-top: 4px; letter-spacing: 0.04em; } / Cajas / .sop-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; margin-bottom: 24px; } .sop-box { border-radius: 16px; border: 1px solid var(--sop-line); background: var(--sop-panel); box-shadow: 0 20px 40px -28px rgba(0, 0, 0, 0.9); padding: 22px 24px; } / Titular de caja al mismo cuerpo que el de las cajas de prohibiciones: era una ceja diminuta (0.68rem) y el título de la caja tiene que leerse antes que su contenido, no después. / .sop-box h4 { display: flex; align-items: center; gap: 11px; font-size: 0.92rem; letter-spacing: 0.13em; line-height: 1.45; text-transform: uppercase; color: var(--sop-ink); margin: 0 0 14px; } .sop-box h4 i { color: var(--sop-accent); font-size: 1rem; } .sop-box ul { margin: 0; padding-left: 19px; } .sop-box li { font-size: 0.92rem; line-height: 1.75; color: var(--sop-muted); margin-bottom: 10px; } .sop-box li:last-child { margin-bottom: 0; } / ── Fases del AQP ────────────────────────────────────────────────────────── Panel a ancho completo por fase, repitiendo la estructura del cuadro del AQP: cabecera de color, bloques y resultado. `--sop-phase-c` lo pone el modificador y de ahí salen la cabecera, el borde y el filete del pie, así que el verde del BCR y el azul del MCR son los MISMOS que pinta el esquema, sin repetir hex. / .sop-phases { display: flex; flex-direction: column; gap: 18px; margin: 24px 0 28px; } .sop-phase { border-radius: 16px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--sop-phase-c) 40%, transparent); background: var(--sop-panel); box-shadow: 0 22px 44px -30px rgba(0, 0, 0, 0.9); } .sop-phase.is-bcr { --sop-phase-c: var(--aqp-bcr); } .sop-phase.is-mcr { --sop-phase-c: var(--aqp-ag); } .sop-phase-head { display: flex; align-items: center; gap: 14px; padding: 13px 20px; background: linear-gradient(110deg, var(--sop-phase-c), color-mix(in srgb, var(--sop-phase-c) 55%, #0f172e)); } .sop-phase-tag { padding: 3px 11px; border-radius: 999px; background: rgba(0, 0, 0, 0.34); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; white-space: nowrap; } .sop-phase-head h4 { margin: 0; font-family: 'Horizon', sans-serif; font-size: 0.92rem; letter-spacing: 0.08em; color: #fff; line-height: 1.3; } .sop-phase-code { margin-left: auto; font-family: 'Horizon', sans-serif; font-size: 1.05rem; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.6); } .sop-phase-body { padding: 20px 22px 4px; } .sop-phase-body > p { margin: 0 0 16px; font-size: 0.95rem; line-height: 1.75; color: var(--sop-body); } / Los bloques son piezas equivalentes del programa, así que van todos del mismo tamaño y en la misma fila mientras quepan. / .sop-phase-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; } .sop-phase-block { display: flex; flex-direction: column; gap: 6px; padding: 15px 16px; border-radius: 11px; background: rgba(148, 163, 184, 0.08); border: 1px solid rgba(255, 255, 255, 0.07); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--sop-phase-c) 85%, transparent); } .sop-phase-block-code { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-family: 'Horizon', sans-serif; font-size: 0.68rem; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--sop-phase-c) 55%, #fff); } .sop-phase-block-code em { font-family: 'Oswald', sans-serif; font-style: normal; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sop-dim); } .sop-phase-block strong { font-size: 0.98rem; letter-spacing: 0.03em; color: var(--sop-ink); line-height: 1.35; } .sop-phase-block > span:not(.sop-phase-block-code) { font-size: 0.87rem; line-height: 1.65; color: var(--sop-muted); } .sop-phase-block em { font-style: normal; } / Lo que te llevas al terminar la fase. / .sop-phase-out { display: flex; gap: 14px; margin: 18px 22px 20px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--sop-phase-c) 34%, transparent); } .sop-phase-out i { flex: none; margin-top: 4px; font-size: 1rem; color: color-mix(in srgb, var(--sop-phase-c) 55%, #fff); } .sop-phase-out p { margin: 0; font-size: 0.93rem; line-height: 1.72; color: var(--sop-body); } / ── Módulos estrella ─────────────────────────────────────────────────────── Las dos aeronaves sobre las que se construye toda la instrucción. Van en grande porque es un dato de cabecera, no una nota al pie. / .sop-modules { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 22px 0 26px; } .sop-module { display: flex; align-items: center; gap: 14px; padding: 14px 24px 14px 18px; border-radius: 14px; border: 1px solid var(--sop-accent-line); background: linear-gradient(150deg, rgba(96, 165, 250, 0.13), rgba(15, 23, 46, 0.82)); } .sop-module img { width: 42px; height: 42px; object-fit: contain; flex: none; } .sop-module-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .sop-module-txt strong { font-family: 'Horizon', sans-serif; font-size: 0.86rem; letter-spacing: 0.07em; color: var(--sop-ink); line-height: 1.3; } .sop-module-txt span { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sop-dim); } / ── Niveles de la escala de evaluación ───────────────────────────────────── Mismo código de color que usan los emojis del hub de Discord: rojo, amarillo, azul y verde. Aquí no es decoración: es la misma señal que el piloto ya ve cuando abre su evaluación. / .sop-rate { display: inline-flex; align-items: center; gap: 9px; padding: 5px 13px 5px 9px; border-radius: 999px; font-size: 0.82rem; letter-spacing: 0.04em; white-space: nowrap; color: var(--sop-rate-c); background: color-mix(in srgb, var(--sop-rate-c) 15%, transparent); border: 1px solid color-mix(in srgb, var(--sop-rate-c) 42%, transparent); } .sop-rate::before { content: attr(data-n); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--sop-rate-c); color: #0f172e; font-size: 0.7rem; font-weight: 700; font-variant-numeric: tabular-nums; } .sop-rate.is-1 { --sop-rate-c: var(--sop-danger); } .sop-rate.is-2 { --sop-rate-c: var(--sop-warn); } .sop-rate.is-3 { --sop-rate-c: var(--sop-accent); } .sop-rate.is-4 { --sop-rate-c: var(--sop-ok); } / Los tres resultados posibles de una evaluación, con el mismo código de color que la escala de arriba. / .sop-results { display: flex; flex-wrap: wrap; gap: 11px; margin: 0 0 22px; } .sop-res { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; border-radius: 999px; font-family: 'Horizon', sans-serif; font-size: 0.74rem; letter-spacing: 0.08em; color: var(--sop-rate-c); background: color-mix(in srgb, var(--sop-rate-c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--sop-rate-c) 40%, transparent); } .sop-res.is-ok { --sop-rate-c: var(--sop-ok); } .sop-res.is-no { --sop-rate-c: var(--sop-danger); } .sop-res.is-again { --sop-rate-c: var(--sop-warn); } / Pasos / .sop-steps { list-style: none; margin: 0 0 24px; padding: 0; } .sop-step { display: flex; gap: 20px; padding: 15px 0; position: relative; } .sop-step:not(:last-child)::before { content: ''; position: absolute; left: 21px; top: 56px; bottom: -4px; width: 1px; background: linear-gradient(180deg, rgba(96, 165, 250, 0.5), rgba(96, 165, 250, 0.06)); } .sop-step-n { flex: none; width: 43px; height: 43px; border-radius: 12px; display: grid; place-items: center; font-family: 'Horizon', sans-serif; font-size: 0.9rem; color: var(--sop-accent); background: var(--sop-accent-soft); border: 1px solid var(--sop-accent-line); position: relative; z-index: 1; font-variant-numeric: tabular-nums; } / El último paso es la meta, no un escalón más. / .sop-step.is-goal .sop-step-n { color: #4ade80; background: rgba(74, 222, 128, 0.14); border-color: rgba(74, 222, 128, 0.36); } .sop-step > div strong { display: block; font-family: 'Horizon', sans-serif; font-size: 0.95rem; letter-spacing: 0.06em; color: var(--sop-ink); margin-bottom: 6px; padding-top: 10px; } .sop-step > div p { margin: 0; font-size: 0.94rem; } / Llamada a la acción / .sop-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 34px; padding: 22px 26px; border-radius: 16px; border: 1px solid var(--sop-accent-line); background: linear-gradient(150deg, rgba(96, 165, 250, 0.12), rgba(15, 23, 46, 0.7)); } .sop-cta p { margin: 0; font-family: 'Horizon', sans-serif; font-size: 0.95rem; letter-spacing: 0.08em; color: var(--sop-ink); } / Botón, en la línea de .pf-btn / .sop-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 24px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); color: var(--sop-body); font-family: 'Oswald', sans-serif; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none !important; white-space: nowrap; transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease; } .sop-btn:hover { border-color: rgba(96, 165, 250, 0.6); background: rgba(96, 165, 250, 0.18); color: var(--sop-ink); } / Mismo degradado que el botón primario de la ficha de piloto (.pf-btn.is-primary): es el botón azul del sitio y no debe existir una segunda versión aquí. / .sop-btn.is-primary { border-color: transparent; background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%); color: #fff; box-shadow: 0 14px 28px -14px rgba(59, 130, 246, 0.95); } .sop-btn.is-primary:hover { transform: translateY(-2px); background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%); } .sop-cta .sop-btn { margin-left: auto; } / Botón solo, centrado y sin caja alrededor. / .sop-btn-row { display: flex; justify-content: center; margin: 6px 0 4px; } / Normas numeradas. Es un
: el número identifica la norma, así que forma parte del contenido y no es decoración. / .sop-rules { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: none; } .sop-rule-item { display: flex; gap: 18px; padding: 20px 22px; border-radius: 16px; border: 1px solid var(--sop-line); background: var(--sop-panel); box-shadow: 0 20px 40px -30px rgba(0, 0, 0, 0.9); } .sop-rule-n { flex: none; font-family: 'Horizon', sans-serif; font-size: 0.7rem; letter-spacing: 0.1em; color: var(--sop-accent); font-variant-numeric: tabular-nums; padding: 6px 10px; height: fit-content; border: 1px solid var(--sop-accent-line); border-radius: 8px; background: var(--sop-accent-soft); } .sop-rule-item > div strong { display: block; font-family: 'Horizon', sans-serif; font-size: 0.92rem; letter-spacing: 0.06em; color: var(--sop-ink); margin-bottom: 7px; padding-top: 4px; } .sop-rule-item > div p { margin: 0; font-size: 0.94rem; line-height: 1.75; } / Caja de prohibición: en rojo, que es lo que la gente espera de algo prohibido. El título va con el cuerpo y la tipografía de un .sop-h3 y no con la letra pequeña del resto de cajas, para que se lea a la altura del epígrafe que tiene encima. / .sop-box.is-danger { border-color: rgba(248, 113, 113, 0.3); background: linear-gradient(150deg, rgba(248, 113, 113, 0.08), rgba(15, 23, 46, 0.94)); } / El cuerpo ya lo pone `.sop-box h4`; aquí solo cambia el color. / .sop-box.is-danger h4, .sop-box.is-danger h4 i { color: var(--sop-danger); } / Las dos situaciones del piloto: activo en verde, reserva en ámbar. Mismos dos colores que usa /pilotos para los grupos y los distintivos — quien lee esto y luego entra al listado tiene que reconocerlos sin releer nada. / .sop-box.is-ok { border-color: rgba(74, 222, 128, 0.3); background: linear-gradient(150deg, rgba(74, 222, 128, 0.08), rgba(15, 23, 46, 0.94)); } .sop-box.is-ok h4, .sop-box.is-ok h4 i { color: var(--sop-ok); } .sop-box.is-warn { border-color: rgba(251, 191, 36, 0.3); background: linear-gradient(150deg, rgba(251, 191, 36, 0.08), rgba(15, 23, 46, 0.94)); } .sop-box.is-warn h4, .sop-box.is-warn h4 i { color: var(--sop-warn); } .sop-box p { margin: 0; font-size: 0.92rem; line-height: 1.75; color: var(--sop-muted); } .sop-box p strong { color: var(--sop-body); } / Tres pilares en fila (procedimientos · comunicaciones · operaciones) / .sop-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 16px; margin-bottom: 26px; } .sop-pillar { display: flex; flex-direction: column; gap: 9px; padding: 22px 22px 24px; border-radius: 16px; border: 1px solid var(--sop-line); background: var(--sop-panel); box-shadow: 0 20px 40px -28px rgba(0, 0, 0, 0.9); } .sop-pillar-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: var(--sop-accent); background: var(--sop-accent-soft); border: 1px solid var(--sop-accent-line); font-size: 1.05rem; margin-bottom: 4px; } .sop-pillar strong { font-family: 'Horizon', sans-serif; font-size: 0.86rem; letter-spacing: 0.1em; color: var(--sop-ink); line-height: 1.4; } .sop-pillar span:not(.sop-pillar-ico) { font-size: 0.9rem; line-height: 1.7; color: var(--sop-muted); } / Roles. Van en columna y no en rejilla a propósito: son acumulativos, y leerlos uno debajo de otro transmite la progresión mucho mejor que tres tarjetas iguales en fila, que se leerían como alternativas. / .sop-roles { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; } .sop-role { position: relative; padding: 24px 26px; border-radius: 16px; border: 1px solid var(--sop-line); background: var(--sop-panel); box-shadow: 0 20px 40px -30px rgba(0, 0, 0, 0.9); / Franja de acento a la izquierda: marca de un vistazo que los tres van en la misma escala. / border-left: 2px solid var(--sop-accent-line); } / Un color por rol, para que la escala se lea de un vistazo sin depender del texto. El añil sale del degradado primario del sitio (#3b82f6 → #6366f1), así que pertenece a la familia; no se usa ámbar ni rojo porque en este documento están reservados a advertencias. / .sop-role.is-lead { border-left-color: rgba(167, 139, 250, 0.6); } / El rol de instrucción cierra la escala; verde, igual que el check-ride cierra el itinerario de Ingreso. / .sop-role.is-top { border-left-color: rgba(74, 222, 128, 0.55); } .sop-role header { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; } .sop-role-ico { flex: none; width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; color: var(--sop-accent); background: var(--sop-accent-soft); border: 1px solid var(--sop-accent-line); font-size: 1.1rem; } .sop-role.is-lead .sop-role-ico { color: #a78bfa; background: rgba(167, 139, 250, 0.16); border-color: rgba(167, 139, 250, 0.38); } .sop-role.is-top .sop-role-ico { color: #4ade80; background: rgba(74, 222, 128, 0.14); border-color: rgba(74, 222, 128, 0.36); } .sop-role-tier { display: block; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sop-dim); margin-bottom: 5px; } .sop-role h4 { font-family: 'Horizon', sans-serif; font-size: 1.02rem; letter-spacing: 0.08em; color: var(--sop-ink); margin: 0; } .sop-role-abbr { font-family: 'Oswald', sans-serif; font-size: 0.66rem; letter-spacing: 0.18em; color: var(--sop-accent); border: 1px solid var(--sop-accent-line); border-radius: 999px; padding: 2px 9px; margin-left: 7px; vertical-align: middle; } .sop-role.is-top .sop-role-abbr { color: #4ade80; border-color: rgba(74, 222, 128, 0.36); } .sop-role > p { margin: 0 0 14px; font-size: 0.96rem; line-height: 1.8; color: var(--sop-muted); } .sop-role ul { margin: 0; padding-left: 19px; border-top: 1px solid var(--sop-line); padding-top: 14px; } .sop-role li { font-size: 0.9rem; line-height: 1.7; color: var(--sop-muted); margin-bottom: 7px; } .sop-role li:last-child { margin-bottom: 0; } / Nota al pie de una ficha de rol: va DESPUÉS de la lista, así que no puede heredar el margen inferior de `.sop-role > p`, que está pensado para el párrafo de arriba. De ahí que el selector lleve el hijo directo: si no, la regla de una sola clase pierde. / .sop-role > .sop-role-note { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 0; padding-top: 13px; border-top: 1px dashed var(--sop-line); font-size: 0.88rem; line-height: 1.7; color: var(--sop-dim); } .sop-role > .sop-role-note i { flex: none; margin-top: 4px; font-size: 0.9em; color: var(--sop-ok); } .sop-role > .sop-role-note strong { color: var(--sop-body); } / Emblema partiendo la sección en dos. El resplandor va detrás en un elemento propio y no como box-shadow del : el emblema no es un círculo, y un halo redondo se vería recortando por fuera de su silueta. / .sop-emblem { position: relative; display: grid; place-items: center; margin: 46px 0; padding: 26px 0; isolation: isolate; } .sop-emblem::before, .sop-emblem::after { content: ''; position: absolute; top: 50%; width: min(28%, 170px); height: 1px; } .sop-emblem::before { left: 0; background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.5)); } .sop-emblem::after { right: 0; background: linear-gradient(270deg, transparent, rgba(96, 165, 250, 0.5)); } .sop-emblem-glow { position: absolute; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(96, 165, 250, 0.30) 0%, transparent 68%); z-index: -1; pointer-events: none; } .sop-emblem img { width: 150px; max-width: 45%; height: auto; filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.6)); } / Condecoraciones, agrupadas por categoría / .sop-deco-group { margin-bottom: 30px; } .sop-deco-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sop-muted); } .sop-deco-count { flex: none; padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--sop-line); font-size: 0.62rem; color: var(--sop-dim); font-variant-numeric: tabular-nums; } .sop-decos { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; } .sop-deco { display: flex; align-items: center; gap: 15px; padding: 15px 17px; border-radius: 14px; border: 1px solid var(--sop-line); background: var(--sop-panel); } .sop-deco-img { flex: none; width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55)); } / Hueco para una condecoración que aún no tiene imagen subida: sin esto la tarjeta se descuadraría respecto a las de al lado. / .sop-deco-img.is-empty { display: grid; place-items: center; border-radius: 12px; background: var(--sop-accent-soft); border: 1px solid var(--sop-accent-line); color: var(--sop-accent); font-size: 1.2rem; filter: none; } .sop-deco-txt { min-width: 0; } .sop-deco-txt strong { display: block; font-family: 'Horizon', sans-serif; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--sop-ink); line-height: 1.4; } .sop-deco-txt span { display: block; margin-top: 5px; font-size: 0.84rem; line-height: 1.6; color: var(--sop-muted); } / Diagrama de las tres puntas del vínculo: Discord · web · servidor DCS. La línea que las une va detrás en un elemento propio; en móvil se oculta y las tres piezas se apilan, porque una línea horizontal entre cosas apiladas no uniría nada. / .sop-link-map { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 30px 0 26px; isolation: isolate; } .sop-link-line { position: absolute; top: 42px; / Arranca y acaba en el centro de los iconos de los extremos, no en el borde del contenedor: si no, la línea sobresale por los lados. / left: 16.6%; right: 16.6%; height: 2px; / Cada mitad de la línea lleva el color de la punta a la que llega: azulón de Discord a la izquierda, ámbar de DCS a la derecha. / background: linear-gradient(90deg, rgba(88, 101, 242, 0.55), rgba(96, 165, 250, 0.75), rgba(245, 158, 15, 0.55)); z-index: -1; } .sop-link-node { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; } .sop-link-ico { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; / Opaco a propósito: la línea pasa por detrás y tiene que quedar tapada justo debajo del icono, para que parezca que entra y sale de él. / background: #16213c; border: 2px solid var(--sop-line); font-size: 1.9rem; color: var(--sop-accent); } .sop-link-ico img { width: 40px; height: 40px; object-fit: contain; } / Un color por punta, el de cada servicio. / .sop-link-ico.is-discord { border-color: rgba(88, 101, 242, 0.55); box-shadow: 0 0 24px -6px rgba(88, 101, 242, 0.55); } .sop-link-ico.is-web { border-color: var(--sop-accent); box-shadow: 0 0 26px -4px rgba(96, 165, 250, 0.65); } / Ámbar #f59e0f: es literalmente el color del logotipo de DCS (ver public/images/icons/dcs.svg), igual que el azulón de arriba es el de Discord. / .sop-link-ico.is-dcs { border-color: rgba(245, 158, 15, 0.6); box-shadow: 0 0 24px -6px rgba(245, 158, 15, 0.55); } / La web es el centro del vínculo: se marca un poco más grande. / .sop-link-node.is-center .sop-link-ico { width: 92px; height: 92px; } .sop-link-node strong { font-family: 'Horizon', sans-serif; font-size: 0.78rem; letter-spacing: 0.1em; color: var(--sop-ink); line-height: 1.4; margin-top: 4px; } .sop-link-node > span:not(.sop-link-ico) { font-size: 0.85rem; line-height: 1.6; color: var(--sop-muted); max-width: 24ch; } / Fuerzas representadas. Flex y no grid: son cinco, y con `auto-fit` quedaban cuatro arriba y una sola descolgada abajo. Con la base calculada para tres por fila y el contenedor centrado salen 3 + 2, y la fila corta queda centrada. / .sop-branches { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 26px; } .sop-branch { flex: 0 1 calc((100% - 28px) / 3); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 22px 16px; border-radius: 16px; border: 1px solid var(--sop-line); background: var(--sop-panel); } .sop-branch-logo { width: 54px; height: 54px; object-fit: contain; / Logos de procedencias muy distintas: el filtro apagado los unifica sin tener que retocar cada fichero. / filter: grayscale(30%); opacity: 0.92; } .sop-branch-name { font-family: 'Horizon', sans-serif; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--sop-body); line-height: 1.45; } .sop-branch-count { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sop-dim); } / Listado de guías / .sop-guides { display: flex; flex-direction: column; gap: 11px; } .sop-guide { display: flex; align-items: center; gap: 17px; padding: 18px 21px; border-radius: 16px; border: 1px solid var(--sop-line); background: var(--sop-panel); text-decoration: none !important; transition: transform 0.18s ease, border-color 0.18s ease; } .sop-guide:hover { transform: translateY(-2px); border-color: rgba(96, 165, 250, 0.5); } .sop-guide-icon { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: var(--sop-accent); background: var(--sop-accent-soft); border: 1px solid var(--sop-accent-line); font-size: 1.05rem; } .sop-guide-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .sop-guide-text strong { font-family: 'Horizon', sans-serif; font-size: 0.92rem; letter-spacing: 0.04em; color: var(--sop-ink); line-height: 1.4; } .sop-guide-text span { font-size: 0.88rem; color: var(--sop-muted); line-height: 1.65; } .sop-guide-arrow { margin-left: auto; color: var(--sop-accent); flex: none; font-size: 0.85rem; } / ── Vuelo de cuatro ──────────────────────────────────────────────────────── El reparto de puestos de un vuelo, dibujado. Los dos líderes (el 1 y el 3, que lidera la segunda pareja) van marcados, porque la partición en parejas es justo lo que explica el texto de al lado. / .sop-flight { max-width: 520px; margin: 24px auto 26px; border-radius: 16px; overflow: hidden; border: 1px solid var(--sop-accent-line); background: var(--sop-panel); box-shadow: 0 22px 44px -30px rgba(0, 0, 0, 0.9); } .sop-flight-head { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: linear-gradient(120deg, rgba(96, 165, 250, 0.22), rgba(15, 23, 46, 0.6)); border-bottom: 1px solid var(--sop-accent-line); } .sop-flight-task { padding: 4px 11px; border-radius: 999px; background: var(--sop-accent); color: #0f172e; font-family: 'Horizon', sans-serif; font-size: 0.64rem; letter-spacing: 0.1em; } .sop-flight-head strong { font-family: 'Horizon', sans-serif; font-size: 0.92rem; letter-spacing: 0.08em; color: var(--sop-ink); } .sop-flight-count { margin-left: auto; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sop-dim); white-space: nowrap; } .sop-flight-slots { list-style: none; margin: 0; padding: 0; } .sop-flight-slot { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-top: 1px solid var(--sop-line); } .sop-flight-slot:first-child { border-top: 0; } / Separación visual entre la primera pareja (1-2) y la segunda (3-4). / .sop-flight-slot:nth-child(3) { border-top: 1px solid var(--sop-accent-line); } .sop-flight-n { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-family: 'Horizon', sans-serif; font-size: 0.74rem; font-variant-numeric: tabular-nums; color: var(--sop-muted); background: rgba(148, 163, 184, 0.1); border: 1px solid var(--sop-line); } .sop-flight-slot.is-lead .sop-flight-n { color: var(--sop-accent); background: var(--sop-accent-soft); border-color: var(--sop-accent-line); } .sop-flight-call { font-family: 'Horizon', sans-serif; font-size: 0.8rem; letter-spacing: 0.06em; color: var(--sop-ink); white-space: nowrap; } .sop-flight-role { margin-left: auto; text-align: right; font-size: 0.8rem; color: var(--sop-dim); } .sop-flight-slot.is-lead .sop-flight-role { color: var(--sop-body); } / ── Anatomía de un indicativo ────────────────────────────────────────────── El indicativo en grande y sus dos mitades explicadas debajo: se lee de un vistazo por qué te llaman como te llaman. / .sop-callsign { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 24px 0 26px; padding: 26px 24px; border-radius: 16px; border: 1px solid var(--sop-accent-line); background: linear-gradient(150deg, rgba(96, 165, 250, 0.13), rgba(15, 23, 46, 0.84)); } .sop-callsign-full { font-family: 'Horizon', sans-serif; font-size: clamp(1.5rem, 6vw, 2.3rem); letter-spacing: 0.06em; color: var(--sop-ink); line-height: 1.1; text-align: center; } .sop-callsign-full span { color: var(--sop-accent); margin: 0 2px; } .sop-callsign-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; font-size: 0.84rem; color: var(--sop-muted); } .sop-callsign-legend i { color: var(--sop-accent); margin-right: 8px; } .sop-callsign-legend strong { color: var(--sop-ink); } / ────────────────────────────────────────────── ESQUEMA DEL AQP (.aqp-) ── Replica del cuadro oficial del plan de instrucción. Se conserva el CÓDIGO DE COLOR del original —rojo la cabecera, verde el BCR, azul el MCR, ámbar la banda de evaluación y los cuatro resultados abajo—, porque es lo que hace legible el esquema de un vistazo. Lo que cambia es la luminosidad: el gris plano de las celdas del original se sustituye por losetas oscuras teñidas del color de su columna, que sobre este fondo se leen y el gris claro no. Cada columna es un flex vertical dentro de una rejilla de 4; los bloques crecen con `flex: 1` y la banda de evaluación lleva `margin-top: auto`, así las bandas inferiores quedan alineadas entre columnas aunque cada una tenga un número distinto de bloques (BCR tiene 5, MC tiene 2). / .aqp { margin: 26px 0 32px; border-radius: 16px; overflow: hidden; border: 1px solid var(--sop-line); background: var(--sop-panel); box-shadow: var(--sop-shadow); } /* Cabecera roja: la franja que identifica el documento. / .aqp-head { display: flex; align-items: center; gap: 18px; padding: 16px 22px; background: linear-gradient(100deg, #a51818 0%, #c62828 55%, #8f1414 100%); border-bottom: 1px solid rgba(0, 0, 0, 0.35); } .aqp-head-logo { width: 46px; height: 46px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)); } .aqp-head-txt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; min-width: 0; } .aqp-head-txt strong { font-family: 'Horizon', sans-serif; font-size: 1.35rem; letter-spacing: 0.1em; color: #fff; line-height: 1; } .aqp-head-txt span { font-size: 0.76rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); } .aqp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 14px; } / Cabeceras de fase. `--aqp-start` y `--aqp-span` los pone la plantilla para que BCR ocupe una columna y MCR las tres siguientes. / .aqp-phase { grid-row: 1; grid-column: var(--aqp-start) / span var(--aqp-span); display: flex; flex-direction: column; gap: 4px; justify-content: center; padding: 11px 16px; border-radius: 10px; text-align: center; } .aqp-phase.is-bcr { background: linear-gradient(160deg, var(--aqp-bcr), #3f7222); } .aqp-phase.is-mcr { background: linear-gradient(100deg, var(--aqp-ag), var(--aqp-aa) 60%, #23406f); } / Sobre el verde y el azul saturados de la cabecera, un blanco al 75 % se perdía. Va en cápsula oscura: contrasta contra cualquiera de los dos fondos. / .aqp-phase-tag { align-self: center; padding: 3px 11px; border-radius: 999px; background: rgba(0, 0, 0, 0.34); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; white-space: nowrap; } .aqp-phase strong { font-family: 'Horizon', sans-serif; font-size: 0.92rem; letter-spacing: 0.08em; color: #fff; line-height: 1.25; } .aqp-col { grid-row: 2; grid-column: var(--aqp-start); display: flex; flex-direction: column; gap: 8px; min-width: 0; } .aqp-col.is-bcr { --aqp-c: var(--aqp-bcr); } .aqp-col.is-ag { --aqp-c: var(--aqp-ag); } .aqp-col.is-aa { --aqp-c: var(--aqp-aa); } .aqp-col.is-mc { --aqp-c: var(--aqp-mc); } .aqp-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } / La loseta de un bloque: oscura, con el color de su columna como marca lateral. / .aqp-item { display: flex; align-items: center; / Envuelve a propósito: la columna es estrecha (cuatro en fila), así que cuando el nombre necesita el ancho entero los iconos bajan a una segunda línea en vez de estrujarlo. / flex-wrap: wrap; gap: 6px 10px; padding: 10px 12px; border-radius: 8px; background: rgba(148, 163, 184, 0.09); border: 1px solid rgba(255, 255, 255, 0.07); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--aqp-c) 85%, transparent); transition: background 0.18s ease, border-color 0.18s ease; } .aqp-item:hover { background: color-mix(in srgb, var(--aqp-c) 18%, rgba(148, 163, 184, 0.09)); border-color: color-mix(in srgb, var(--aqp-c) 50%, transparent); } .aqp-item-name { font-family: 'Horizon', sans-serif; font-size: 0.76rem; letter-spacing: 0.06em; color: var(--sop-ink); line-height: 1.35; font-variant-numeric: tabular-nums; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .aqp-item-mods { display: flex; align-items: center; gap: 5px; margin-left: auto; flex: none; } .aqp-item-mods img { width: 20px; height: 20px; object-fit: contain; opacity: 0.9; } / Banda de evaluación (ámbar en el original). `margin-top: auto` la empuja al fondo para que las cuatro columnas la alineen. / .aqp-gate { margin-top: auto; padding: 9px 12px; border-radius: 8px; text-align: center; font-family: 'Horizon', sans-serif; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: #201603; background: linear-gradient(160deg, var(--aqp-gate), #e0980a); } / El resultado: la cualificación que obtienes al pasar la banda de arriba. / .aqp-result { padding: 11px 12px; border-radius: 8px; text-align: center; font-family: 'Horizon', sans-serif; font-size: 0.82rem; letter-spacing: 0.1em; color: #fff; / Plano primero: si el navegador no entiende `color-mix` descarta la declaración entera, y sin este respaldo el resultado quedaría en texto blanco sobre nada. / background: var(--aqp-c); background: linear-gradient(160deg, var(--aqp-c), color-mix(in srgb, var(--aqp-c) 55%, #000)); box-shadow: 0 10px 22px -14px var(--aqp-c); } .aqp-foot { display: flex; flex-direction: column; gap: 7px; padding: 4px 22px 18px; font-size: 0.79rem; line-height: 1.55; color: var(--sop-dim); } .aqp-foot i { color: var(--sop-accent); margin-right: 7px; } .aqp-foot strong { color: var(--sop-body); font-weight: 600; } / Entradilla de una caja: el titular de la caja antes de la lista. / .sop-box-lead { margin: 0 0 12px; font-size: 0.93rem; line-height: 1.65; color: var(--sop-body); } / ──────────────────────────────────────────────────── PÁGINA DE UNA GUÍA ── / .sop-guide-page { padding: 150px 0 90px; } .sop-guide-page .container { max-width: 840px; } .sop-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sop-dim); margin-bottom: 24px; } .sop-crumb a { color: var(--sop-muted); text-decoration: none; } .sop-crumb a:hover { color: var(--sop-accent); } .sop-guide-head { margin-bottom: 38px; padding-bottom: 26px; border-bottom: 1px solid var(--sop-line); } .sop-guide-head h1 { font-family: 'Horizon', sans-serif; font-size: clamp(1.5rem, 4vw, 2.3rem); color: var(--sop-ink); margin: 0 0 14px; line-height: 1.25; letter-spacing: 1px; } .sop-guide-lead { font-size: 1.02rem; line-height: 1.8; color: var(--sop-muted); margin: 0; } / El HTML de las guías son etiquetas corrientes (h2/h3/p/ul) sin clases, así que se estiliza por elemento. / .sop-article h2 { display: flex; align-items: center; gap: 16px; font-family: 'Horizon', sans-serif; font-size: 1.15rem; letter-spacing: 1.2px; color: var(--sop-ink); margin: 46px 0 17px; } .sop-article h2::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(96, 165, 250, 0.5), rgba(255, 255, 255, 0.04)); } .sop-article h3 { font-family: 'Horizon', sans-serif; font-size: 0.95rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sop-body); margin: 34px 0 12px; } .sop-article p, .sop-article li { font-size: 1rem; line-height: 1.9; color: var(--sop-muted); } .sop-article p { margin: 0 0 18px; } .sop-article ul, .sop-article ol { padding-left: 24px; margin: 0 0 18px; } .sop-article li { margin-bottom: 10px; font-size: 0.96rem; } .sop-article strong { color: var(--sop-body); } .sop-article a { color: #93bbfc; text-decoration: underline; text-underline-offset: 3px; } .sop-article img { max-width: 100%; height: auto; border-radius: 14px; margin: 24px 0; } .sop-guide-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--sop-line); } / ───────────────────────────────────────────────────────────── RESPONSIVE ── / / Por debajo de este ancho el índice fijo no cabe al lado del texto. / @media (max-width: 1080px) { .sop-layout { grid-template-columns: 1fr; gap: 28px; padding-top: 30px; } / El índice pasa arriba, deja de acompañar el scroll y se pliega. Así no se come la primera pantalla ni desborda el marco. / .sop-toc { position: static; width: auto; max-height: none; display: block; overflow: visible; } .sop-toc-head { display: none; } .sop-toc-toggle { display: flex; align-items: center; gap: 13px; padding: 16px 19px; cursor: pointer; list-style: none; font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sop-ink); } / Safari pinta su propia flecha si no se anula. / .sop-toc-toggle::-webkit-details-marker { display: none; } .sop-toc-toggle > i:first-child { color: var(--sop-accent); } .sop-toc-caret { margin-left: auto; font-size: 0.8rem; color: var(--sop-muted); transition: transform 0.25s ease; } .sop-toc[open] .sop-toc-caret { transform: rotate(180deg); } .sop-toc-inner { max-height: none; padding: 0 10px 12px; } .sop-cover-inner { padding: 128px 0 38px; } .sop-guide-page { padding: 128px 0 70px; } } / Cuatro columnas dejan de caber: el esquema del AQP se apila. Las filas se reasignan a mano (y no con `order`) porque en la plantilla van primero las dos cabeceras de fase y después las cuatro columnas; apilando sin más, las dos cabeceras quedarían juntas arriba y las columnas huérfanas debajo. / @media (max-width: 900px) { .aqp-grid { grid-template-columns: minmax(0, 1fr); } .aqp-phase, .aqp-col { grid-column: 1; } .aqp-phase.is-bcr { grid-row: 1; } .aqp-col.is-bcr { grid-row: 2; } .aqp-phase.is-mcr { grid-row: 3; margin-top: 12px; } .aqp-col.is-ag { grid-row: 4; } .aqp-col.is-aa { grid-row: 5; } .aqp-col.is-mc { grid-row: 6; } .aqp-gate { margin-top: 2px; } .aqp-col + .aqp-col { margin-top: 4px; } } @media (max-width: 640px) { .sop { padding-bottom: 64px; } .sop-cover-abbr { letter-spacing: 5px; } .sop-cover-full { letter-spacing: 0.2em; } .sop-emblem { margin: 34px 0; } .sop-emblem img { width: 118px; } .sop-emblem-glow { width: 190px; height: 190px; } / Las tres puntas se apilan y la línea desaparece: una línea horizontal entre elementos apilados no uniría nada. / .sop-link-map { grid-template-columns: 1fr; gap: 24px; } .sop-link-line { display: none; } .sop-link-ico, .sop-link-node.is-center .sop-link-ico { width: 72px; height: 72px; font-size: 1.6rem; } .sop-link-node > span:not(.sop-link-ico) { max-width: 30ch; } / Dos por fila: tres no caben con holgura en un móvil. / .sop-branches { gap: 11px; } .sop-branch { flex-basis: calc((100% - 11px) / 2); } .sop-branch-logo { width: 44px; height: 44px; } .sop-rule-item { gap: 13px; padding: 17px 18px; } .sop-role { padding: 20px 19px; } .sop-role header { gap: 13px; } .sop-role-ico { width: 42px; height: 42px; } .sop-role h4 { font-size: 0.92rem; } / En móvil el distintivo CFI cabe mejor bajo el nombre que a su lado. / .sop-role-abbr { display: inline-block; margin: 6px 0 0; } .sop-section { margin-bottom: 52px; } .sop-section-head h2 { white-space: normal; } .sop-cta { flex-direction: column; align-items: stretch; } .sop-cta .sop-btn { margin-left: 0; } .sop-step { gap: 15px; } .sop-step-n { width: 37px; height: 37px; font-size: 0.8rem; } .sop-step:not(:last-child)::before { left: 18px; top: 50px; } .sop-guide { align-items: flex-start; } .sop-guide-arrow { display: none; } .sop-guide-foot .sop-btn { width: 100%; } .aqp-head { padding: 14px 16px; gap: 13px; } .aqp-head-logo { width: 38px; height: 38px; } .aqp-head-txt strong { font-size: 1.1rem; } .aqp-head-txt span { font-size: 0.66rem; letter-spacing: 0.18em; } .aqp-grid { padding: 12px; } .aqp-foot { padding: 0 16px 14px; } .sop-phase-head { flex-wrap: wrap; gap: 8px 12px; padding: 13px 16px; } / La sigla deja de empujarse a la derecha: apilada quedaría sola en su línea. / .sop-phase-code { margin-left: 0; font-size: 0.92rem; } .sop-phase-body { padding: 18px 16px 2px; } .sop-phase-out { margin: 16px 16px 18px; } .sop-flight-slot, .sop-flight-head { padding-left: 15px; padding-right: 15px; } / El puesto y su cometido no caben en la misma línea. */ .sop-flight-role { margin-left: 0; flex: 1 0 100%; padding-left: 44px; text-align: left; } .sop-flight-slot { flex-wrap: wrap; row-gap: 4px; } } @media (prefers-reduced-motion: reduce) { .sop-guide, .sop-btn, .sop-toc-caret, .sop-progress-bar, .aqp-item { transition: none; } .sop-guide:hover, .sop-btn.is-primary:hover { transform: none; } }