/* ── Los colores, por su PAPEL ──────────────────────────────────────────── Cada color se nombra por lo que hace, no por lo que es. Parece una formalidad y no lo es: el azul de marca cumple DOS papeles que en un tema oscuro se separan —como fondo sólido de una banda sigue siendo el mismo azul, y como tinta sobre la página tiene que aclararse o deja de leerse—, y el blanco cumple otros dos —superficie de una tarjeta, y tinta sobre un color sólido—. Mientras estuvieron escritos como `#fff` y `var(--marca)` sin distinguir, no había forma de hacer un tema oscuro que no fuese un parche. Un tema nuevo redefine ESTAS variables y nada más. Ninguna regla de más abajo vuelve a nombrar un color literal, salvo los que son iguales en los dos temas. */ :root{ color-scheme:light; /* El azul como FONDO sólido: bandas, cabeceras de tabla, sellos. Con su tinta encima. */ --marca:#2c5f8d; --marca-osc:#1d4568; --sobre-marca:#fff; /* El azul como TINTA sobre la página: enlaces, antetítulos, iconos, filos. */ --acento:#2c5f8d; --acento-hover:#1d4568; --acento-suave:#eaf2f8; --naranja:#ef7622; /* El botón de acción va en el naranja de marca. Su contraste con el texto blanco está medido y anotado en la documentación de este módulo: es una decisión de marca, no un olvido. */ --cta-fondo:var(--naranja); --cta-fondo-hover:#d9651a; --ambar:#a5650f; /* Los tres planos de profundidad: el papel, la banda alterna y la tarjeta que se levanta sobre ellos. */ --fondo:#fff; --fondo-2:#f4f8fb; --panel:#fff; --linea:#dbe5ee; --linea-fuerte:#c3d3e0; --texto:#12202d; --mut:#5a7184; --ok:#0f7b47; --malo:#c02b2b; /* Las ventanas al producto —la traza, el terminal, el bloque de licencia— y el pie. Son las piezas que en el tema claro dan el contraste, y en el oscuro tienen que seguir siendo MÁS profundas que la página o dejan de leerse como una ventana. */ --oscuro:#0c1c2b; --pie:#0c1c2b; --linea-oscura:#17304a; /* La cabecera es translúcida y se desenfoca sobre lo que pasa por debajo: necesita el color del papel CON alfa, que una variable de color sólido no puede dar. */ --panel-vidrio:rgba(255,255,255,.94); /* El verde tenue que marca la columna propia en la comparativa. Sobre papel blanco basta un 6 % de verde; sobre una página oscura ese mismo 6 % no existe. */ --si-fondo:rgba(15,123,71,.06); --si-fondo-hover:rgba(15,123,71,.1); /* El filo que asoma cuando una tabla tiene más ancho del que se ve. Es la única pista de que se puede desplazar, así que tiene que existir en los dos temas. */ --filo-scroll:rgba(18,32,45,.14); /* El interior de un campo. En claro es el mismo blanco de la tarjeta y lo dibuja el borde; en oscuro se hunde por debajo de ella, que es como se lee «aquí se escribe» sin necesidad de mirar el borde. */ --campo:#fff; --sombra:0 1px 2px rgba(18,32,45,.05), 0 12px 32px -18px rgba(18,32,45,.28); --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } /* ── Tema oscuro, siguiendo al sistema ──────────────────────────────────── Sin selector manual y sin nada guardado: el portal no ejecuta JavaScript y no pone cookies —lo dice su propia política de privacidad—, así que la preferencia que manda es la que el visitante ya declaró en su sistema operativo. Es también la que acierta más veces: quien tiene el equipo en oscuro lo tiene en oscuro a las tres de la mañana revisando una alerta, que es cuando se lee esta web. No es el tema claro con los colores invertidos. Los azules de tinta se aclaran para seguir legibles, el verde y el ámbar de los veredictos se levantan, y las ventanas oscuras se hunden POR DEBAJO del fondo de la página para que sigan leyéndose como una ventana y no como un hueco. */ @media (prefers-color-scheme:dark){ :root{ color-scheme:dark; --marca:#2c5f8d; --marca-osc:#1d4568; --sobre-marca:#fff; --acento:#7ab4e2; --acento-hover:#a5cff0; --acento-suave:#17293a; --ambar:#e0a24a; --fondo:#0d1926; --fondo-2:#111f2e; --panel:#16273a; --linea:#22384f; --linea-fuerte:#33506d; --texto:#e7eff7; --mut:#9fb4c6; --ok:#35c48a; --malo:#f18b8b; --oscuro:#060e18; --pie:#060e18; --linea-oscura:#1a3149; --panel-vidrio:rgba(13,25,38,.92); --si-fondo:rgba(53,196,138,.09); --si-fondo-hover:rgba(53,196,138,.15); --filo-scroll:rgba(0,0,0,.55); --campo:#0b1622; /* El azul de las bandas a página completa deslumbra sobre un fondo oscuro: baja un punto para que siga siendo el azul de marca sin convertirse en el foco de la pantalla. La tinta blanca encima pasa de 6,7:1 a 8,5:1, así que solo mejora. */ --marca:#1f4a72; --marca-osc:#12354f; /* En una página oscura una sombra difusa no se ve; lo que separa una tarjeta del fondo es su borde, así que la sombra se queda en un halo mínimo y el trabajo lo hace `--linea`. */ --sombra:0 1px 2px rgba(0,0,0,.4), 0 14px 34px -20px rgba(0,0,0,.75); } } *{box-sizing:border-box} /* Salto al contenido: invisible hasta que alguien tabula, que es justo cuando hace falta. */ .saltar{position:absolute;left:-9999px;top:0;z-index:40;background:var(--marca);color:#fff; padding:12px 20px;border-radius:0 0 10px 0;font-weight:700} .saltar:focus{left:0;color:#fff} @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} body{margin:0;background:var(--fondo);color:var(--texto);font:16px/1.65 var(--sans); -webkit-font-smoothing:antialiased} a{color:var(--acento);text-decoration:none} a:hover{color:var(--acento-hover)} :focus-visible{outline:2px solid var(--naranja);outline-offset:3px;border-radius:4px} .wrap{max-width:1160px;margin:0 auto;padding:0 24px} img{max-width:100%} /* El sprite de iconos no ocupa sitio: solo define los símbolos que luego referencian los ``. */ .sprite{position:absolute;width:0;height:0} /* Separación de un elemento que cierra una sección. Va en clase y no en un atributo `style` porque la política de contenido del portal prohíbe los estilos en línea. */ .tras{margin-top:28px} .diagrama svg{min-width:700px;width:100%;height:auto;display:block} /* Los iconos van en trazo, no en relleno: heredan el color del texto y no compiten con él. */ .ico{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round;color:var(--acento)} /* ── Cabecera ───────────────────────────────────────────────────────────── El logo se sirve YA RECORTADO: el original traía un 35% de margen transparente, así que la altura de la caja no era la altura del logotipo y la marca se leía pequeña. Aquí `height` es lo que se ve. */ header{position:sticky;top:0;z-index:20;background:var(--panel-vidrio); backdrop-filter:saturate(1.6) blur(8px);border-bottom:1px solid var(--linea)} header .wrap{display:flex;align-items:center;gap:30px;height:100px} header img{height:69px;width:auto;display:block} nav{display:flex;gap:24px;flex-wrap:wrap;align-items:center} header nav.secciones{margin-left:auto} /* Dos bloques, no siete elementos seguidos: a la izquierda dónde ir, a la derecha qué hacer. El filete es lo que hace que se lean como cosas distintas sin necesidad de leerlas. */ .acciones-cab{display:flex;align-items:center;gap:20px;padding-left:24px; border-left:1px solid var(--linea)} .cliente{display:inline-flex;align-items:center;gap:7px;color:var(--mut);font-size:14.5px; font-weight:600;white-space:nowrap} .cliente .ico{width:16px;height:16px;color:var(--linea-fuerte)} .cliente:hover{color:var(--acento)} .cliente:hover .ico{color:var(--acento)} .cliente.on{color:var(--texto)} .cliente.on .ico{color:var(--acento)} nav a{color:var(--mut);font-size:15px;font-weight:600} nav a:hover{color:var(--acento)} nav a.on{color:var(--texto)} /* Selector de idioma desplegable, con `
` y sin una línea de guion: la política de contenido del portal prohíbe los scripts, y dos códigos uno al lado del otro dejan de servir en cuanto haya un tercer idioma. */ .idiomas{position:relative} .idiomas summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px; font-family:var(--mono);font-size:12px;letter-spacing:.06em;font-weight:700;color:var(--texto); padding:6px 4px} .idiomas summary::-webkit-details-marker{display:none} .idiomas summary:after{content:"";width:5px;height:5px;border-right:1.6px solid var(--mut); border-bottom:1.6px solid var(--mut);transform:rotate(45deg) translateY(-2px)} .idiomas[open] summary:after{transform:rotate(-135deg) translateY(-2px)} .idiomas summary:hover{color:var(--acento)} .idiomas .ico{width:15px;height:15px;color:var(--linea-fuerte)} .idiomas ul{position:absolute;top:calc(100% + 6px);right:0;z-index:30;min-width:158px;margin:0;padding:6px; list-style:none;background:var(--panel);border:1px solid var(--linea);border-radius:10px;box-shadow:var(--sombra)} .idiomas li a{display:block;padding:8px 12px;border-radius:7px;font-size:14.5px;color:var(--texto); font-weight:600} .idiomas li a:hover{background:var(--fondo-2);color:var(--acento)} .idiomas li a[aria-current]{color:var(--acento);background:var(--acento-suave)} /* El botón vive fuera del `