/* ═══════════════════════════════════════════════════════════════════
ZONA-0 // ICONOGRAFÍA OPERATIVA // v1.0
Sistema SVG personalizado — sin Font Awesome, sin dependencias externas
Filosofía: terminal soviética · simbología militar · BBS cubano · anomalía digital
Paleta: verde CRT · ámbar warning · rojo clasificado · espectral azul-gris · morocota dorado
Uso básico:
Con animación:
Con glow ARG:
═══════════════════════════════════════════════════════════════════ */
/* ── Base ──────────────────────────────────────────────────────────── */
.ico {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.125em;
overflow: visible;
flex-shrink: 0;
pointer-events: none;
user-select: none;
/* currentColor se propaga al stroke/fill de los paths internos */
}
/* ── Tamaños estandarizados ────────────────────────────────────────── */
.ico-14 { width: 14px; height: 14px; }
.ico-16 { width: 16px; height: 16px; }
.ico-20 { width: 20px; height: 20px; }
.ico-24 { width: 24px; height: 24px; }
.ico-32 { width: 32px; height: 32px; }
.ico-40 { width: 40px; height: 40px; }
.ico-64 { width: 64px; height: 64px; }
/* ── Paleta operativa ──────────────────────────────────────────────── */
.ico-verde { color: var(--green, #20c20e); }
.ico-brillante { color: var(--green-bright, #39ff14); }
.ico-dim { color: var(--dim, #2a522a); }
.ico-ambar { color: var(--amber, #ffb000); }
.ico-rojo { color: var(--red, #ff3333); }
.ico-cyan { color: var(--cyan, #00e8ff); }
.ico-espectral { color: #6a8fa8; }
.ico-morocota { color: #b8860b; }
.ico-arg-color { color: #9020a0; }
.ico-naranja { color: #e87000; }
/* ── Efectos de glow ───────────────────────────────────────────────── */
.ico-glow { filter: drop-shadow(0 0 4px currentColor); }
.ico-glow-fuerte { filter: drop-shadow(0 0 8px currentColor)
drop-shadow(0 0 2px currentColor); }
/* Glifos ARG — glow sutil permanente + intensifica al hover */
.ico-arg-glifo {
filter: drop-shadow(0 0 3px currentColor);
transition: filter 0.2s ease;
cursor: default;
}
.ico-arg-glifo:hover {
filter: drop-shadow(0 0 10px currentColor) brightness(1.5);
}
/* ══════════════════════════════════════════════════════════════════════
ANIMACIONES
Prefijo z0- para no colisionar con el resto del CSS del proyecto
Todas ultra-sutiles: el operador no debe notar que los iconos se mueven.
Debe sentirlos "vivos".
══════════════════════════════════════════════════════════════════════ */
/* PULSO — online activo, radio encendido, transmisión en curso */
@keyframes z0-pulso {
0%, 100% { opacity: 1; }
50% { opacity: 0.22; }
}
.ico-anim-pulso {
animation: z0-pulso 2s ease-in-out infinite;
}
/* ALERTA RÁPIDA — peligro inminente, infectado, sistema crítico */
@keyframes z0-alerta {
0%, 100% { opacity: 1; }
50% { opacity: 0.08; }
}
.ico-anim-alerta {
animation: z0-alerta 0.55s ease-in-out infinite;
}
/* RADAR SWEEP — scan activo
Rota el icono completo; la línea asimétrica del sweep crea el efecto de barrido */
@keyframes z0-radar {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.ico-anim-radar {
animation: z0-radar 3s linear infinite;
transform-origin: center;
}
/* GLITCH — anomalía, entidades ARG, datos corruptos
Se activa raramente (87% del tiempo estático) para máximo impacto */
@keyframes z0-glitch {
0%, 86%, 100% {
opacity: 1;
transform: translate(0,0) skewX(0deg);
filter: none;
}
88% {
opacity: .7;
transform: translate(2px,0) skewX(3deg);
filter: hue-rotate(180deg) brightness(1.6);
}
90% {
opacity: 1;
transform: translate(-2px,1px);
filter: none;
}
92% {
opacity: .35;
transform: translate(1px,-1px) skewX(-2deg);
filter: brightness(2.2);
}
94% {
opacity: 1;
transform: translate(0,0) skewX(0deg);
filter: none;
}
}
.ico-anim-glitch {
animation: z0-glitch 5s step-end infinite;
}
/* FLICKER — espectral, desaparecido, presencia sin forma
Parpadeo irregular como tubo fluorescente a punto de apagarse */
@keyframes z0-flicker {
0%, 91%, 100% { opacity: 1; }
92% { opacity: 0.06; }
93% { opacity: 0.88; }
94% { opacity: 0.03; }
95% { opacity: 0.72; }
96% { opacity: 0.95; }
97% { opacity: 0.12; }
98% { opacity: 0.6; }
99% { opacity: 0.9; }
}
.ico-anim-flicker {
animation: z0-flicker 7s step-end infinite;
}
/* SYNC SPIN — rotación lenta para operaciones de sincronización */
@keyframes z0-sync-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.ico-anim-sync {
animation: z0-sync-spin 4s linear infinite;
transform-origin: center;
}
/* INTERFERENCIA — frecuencias activas, whisper en curso
Desplazamiento sub-pixel muy sutil */
@keyframes z0-interferencia {
0%, 93%, 100% { opacity: 1; transform: none; }
94% { opacity: .62; transform: translateX(1px); }
95% { opacity: 1; transform: translateX(-1px); }
96% { opacity: .84; transform: none; }
}
.ico-anim-interferencia {
animation: z0-interferencia 4s step-end infinite;
}
/* PULSO DOBLE — para estados especiales de LA RED */
@keyframes z0-pulso-doble {
0%, 100% { opacity: 1; }
20% { opacity: 0.2; }
35% { opacity: 0.9; }
50% { opacity: 0.15; }
65% { opacity: 1; }
}
.ico-anim-pulso-doble {
animation: z0-pulso-doble 2.4s ease-in-out infinite;
}
/* ══════════════════════════════════════════════════════════════════════
ESTADOS DE CORRUPCIÓN POR ENTIDADES
La iconografía se deteriora cuando entidades de la RED alteran el terminal.
Aplicar vía JS: elemento.classList.add('ico-corrupto-bestia')
Quitar: elemento.classList.remove('ico-corrupto-bestia')
══════════════════════════════════════════════════════════════════════ */
/* LA BESTIA alteró tu terminal — iconos deformados */
@keyframes z0-bestia-corruption {
0%, 77%, 100% {
filter: none;
transform: none;
}
79% {
filter: hue-rotate(120deg) saturate(3) brightness(1.8);
transform: skewX(4deg) translateX(2px);
}
81% {
filter: none;
transform: scaleX(1.06) scaleY(.97);
}
83% {
filter: brightness(3) hue-rotate(250deg);
transform: skewX(-3deg) translateY(1px);
}
85% {
filter: none;
transform: none;
}
}
.ico-corrupto-bestia {
animation: z0-bestia-corruption 6s step-end infinite;
cursor: not-allowed;
}
/* EL NODO fracturó la interfaz — iconos se expanden y rotan */
@keyframes z0-nodo-corruption {
0%, 82%, 100% { transform: none; opacity: 1; }
84% { transform: scale(1.18); opacity: .6; }
86% { transform: scale(.86) rotate(20deg); opacity: 1; }
88% { transform: scale(1.04) rotate(-8deg); opacity: .8; }
90% { transform: none; }
}
.ico-corrupto-nodo {
animation: z0-nodo-corruption 8s step-end infinite;
}
/* SEÑAL-7 — los iconos emiten interferencia -->
@keyframes z0-senal7-corruption {
0%, 88%, 100% { filter: none; transform: none; }
90% { filter: saturate(0) brightness(2); transform: translateX(-1px); }
91% { filter: none; }
92% { filter: invert(1) brightness(.5); transform: translateX(1px); }
93% { filter: none; transform: none; }
}
.ico-corrupto-senal7 {
animation: z0-senal7-corruption 4s step-end infinite;
}
/* Estado espectral — iconos casi invisibles */
.ico-estado-espectral {
opacity: 0.28;
animation: z0-flicker 3.5s step-end infinite;
}
/* Estado muerto — inmóvil, muy tenue */
.ico-estado-muerto {
opacity: 0.12;
filter: saturate(0);
animation: none;
}
/* ══════════════════════════════════════════════════════════════════════
UTILIDADES DE COMPOSICIÓN
══════════════════════════════════════════════════════════════════════ */
/* Margen automático al usar .ico junto a texto */
.ico-label {
display: inline-flex;
align-items: center;
gap: 0.35em;
}
/* Icono como bloque centrado (tarjetas, cabeceras de sección) */
.ico-block {
display: block;
margin: 0 auto;
}
/* Sin margen extra (para composición manual) */
.ico-bare {
vertical-align: middle;
margin: 0;
}
/* Rotaciones estáticas de utilidad */
.ico-flip-h { transform: scaleX(-1); }
.ico-flip-v { transform: scaleY(-1); }
.ico-rot-90 { transform: rotate(90deg); }
.ico-rot-180 { transform: rotate(180deg); }
.ico-rot-270 { transform: rotate(270deg); }