/* Forzar swap en FontAwesome SOLID */
@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../webfonts/fa-solid-900.woff2') format('woff2');
}

/* Forzar swap en FontAwesome BRANDS (Redes Sociales) */
@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../webfonts/fa-brands-400.woff2') format('woff2');
}
/* WIKI_SYS :: UI & LOGIC CUSTOM STYLES */

:root {
    --w-olive: #556b2f; /* Valor maestro en HEX */
    --w-olive-rgb: 85, 107, 47; /* Valor maestro en RGB para transparencias */
    --w-muted-light: #a3a3a3; /* Brillo controlado, ratio > 10:1 sobre negro */
}

/* INICIO: Componentes UI Generales */
.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(176, 186, 179, 0.3), transparent);
    margin: 0 auto;
    max-width: 90%;
}
/* FIN: Componentes UI Generales */

/* INICIO: Animaciones y Consola Command */
.cmd-badge {
    display: inline-flex;
    align-items: center;
    background-color: #2a322e;
    color: #d3d3d3;
    padding: 6px 12px;
    border-radius: 2px;
    font-family: 'Space Grotesk', monospace;
    line-height: 1;
    border: 1px solid rgba(211, 211, 211, 0.1);
    user-select: none;
}
.cmd-path { font-size: 0.7rem; opacity: 0.7; margin-right: 2px; white-space: nowrap; }
.cmd-text {
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    font-size: 0.85rem;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    animation: typing 7s steps(5, end) infinite;
}
.cmd-cursor { font-weight: 700; margin-left: 1px; animation: blink 1s step-end infinite; color: #d3d3d3; }

@keyframes typing { 0% { width: 0; } 10% { width: 5ch; } 85% { width: 5ch; } 95% { width: 0; } 100% { width: 0; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
/* FIN: Animaciones y Consola Command */

/* INICIO: Efectos Globales y Notificaciones */
#matrix-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease;
}
.pill-notification {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: rgba(224, 93, 93, 0.95);
    color: #020201;
    padding: 12px 24px;
    border-radius: 50px;
    font-family: 'Space Grotesk', monospace;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    z-index: 9999;
    box-shadow: 0 0 25px rgba(224, 93, 93, 0.4);
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    white-space: nowrap;
}
.pill-notification.active { opacity: 1; transform: translateX(-50%) translateY(0); }
.stress-mode-border {
    box-shadow: inset 0 0 60px rgba(224, 93, 93, 0.3) !important;
    border: 1px solid rgba(224, 93, 93, 0.5) !important;
}
#footer-logo { user-select: none; -webkit-user-drag: none; cursor: pointer; }
.telemetry-tag {
    position: absolute;
    font-family: 'Space Grotesk', monospace;
    font-size: 8px;
    color: #e05d5d;
    background: rgba(2, 2, 1, 0.8);
    padding: 2px 6px;
    border-left: 1px solid #e05d5d;
    pointer-events: none;
    z-index: 45;
    opacity: 0;
    transition: opacity 1s ease;
    white-space: nowrap;
    text-transform: uppercase;
}
.noise-overlay { position: relative; }
.noise-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
    opacity: 0.15;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
.locked-resource { filter: grayscale(1) contrast(1.1); transition: all 0.5s ease; }
.locked-resource:hover { filter: grayscale(0.8) contrast(1.2); }
/* FIN: Efectos Globales y Notificaciones */

/* INICIO: WIKI_SYS :: FIX COMPONENTE DE SEGMENTACION */
input[name="user_type"] ~ div {
    transition: all 0.2s ease-in-out;
}
input[name="user_type"]:hover ~ div {
    background-color: rgba(211, 211, 211, 0.1) !important;
    border-color: rgba(211, 211, 211, 0.4) !important;
}
input[name="user_type"]:checked ~ div {
    background-color: rgb(211, 211, 211) !important; /* bg-w-light */
    color: #2a322e !important; /* text-[#2a322e] */
    border-color: rgb(211, 211, 211) !important; /* border-w-light */
    font-weight: bold !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5) !important;
}
/* FIN: WIKI_SYS :: FIX COMPONENTE DE SEGMENTACION */

/* INICIO: Terminal Box (Logs) */
.terminal-box {
    background-color: #080a09;
    border-left: 4px solid #b0bab3; /* Borde estándar gris/sage */
    padding: 1.5rem;
    margin: 2rem 0;
    font-family: 'Space Grotesk', monospace;
    position: relative;
    box-shadow: inset 0 2px 10px 0 rgba(0, 0, 0, 0.5);
}

/* Modificador para el producto destacado (Verde Matrix) */
.terminal-box-mvp {
    border-left: 4px solid #1DB954 !important; 
    box-shadow: inset 0 2px 10px 0 rgba(0, 0, 0, 0.5), 0 0 15px rgba(29, 185, 84, 0.1);
}

.terminal-box a {
    color: #d3d3d3;
    text-decoration: underline;
    text-decoration-color: #b0bab3;
    text-underline-offset: 4px;
    transition: all 0.2s ease;
}
.terminal-box a:hover {
    color: #ffffff;
    text-decoration-color: #ffffff;
}
/* FIN: Terminal Box (Logs) */

/* INICIO: Tarjetas de Software (Tech Stack) */
.tech-card {
    border: 1px solid rgba(42, 50, 46, 0.5); /* Borde w-olive/50 */
    background-color: #080a09; /* Fondo w-offblack */
    padding: 1.25rem;
    border-radius: 0.125rem;
    transition: border-color 0.15s ease;
    position: relative;
    overflow: hidden;
}
.tech-card:hover {
    border-color: rgba(176, 186, 179, 0.3); /* Hover w-sage/30 */
}

/* Variante MVP con Verde Matrix */
.tech-card-mvp {
    border-color: #1DB954; 
    background-color: rgba(42, 50, 46, 0.2); /* Fondo ligeramente más destacado */
}
.tech-card-mvp:hover {
    border-color: #1DB954;
    box-shadow: inset 0 2px 10px 0 rgba(0, 0, 0, 0.3), 0 0 15px rgba(29, 185, 84, 0.1);
}

.tech-badge-mvp {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #1DB954;
    color: #020201;
    font-size: 0.65rem;
    font-family: 'Space Grotesk', monospace;
    padding: 0.25rem 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}
/* FIN: Tarjetas de Software (Tech Stack) */

/* inicio: Consolidación de clases custom (Limpieza de 13 vistas) */

/* 1. Fondos y Efectos Globales */
.bg-noise, .noise-bg {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 150px 150px;
}

#matrix-canvas, #matrix-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    opacity: 0.12;
    pointer-events: none;
}

.bg-grid-pattern {
    background-image: linear-gradient(to right, rgba(143, 158, 139, 0.05) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(143, 158, 139, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* 2. Paneles Glassmorphism */
.glass-panel {
    background: rgba(2, 2, 1, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid #2a322e;
    box-shadow: 0 10px 40px rgba(85, 107, 47, 0.08); 
    position: relative;
    z-index: 10;
}

.glass-panel-red {
    background: rgba(2, 2, 1, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(224, 93, 93, 0.2);
}

/* 3. Barras de carga (CORREGIDO) */
.loading-bar { 
    width: 100%; height: 2px; 
    background: rgba(var(--w-olive-rgb), 0.2); /* Blindado */
    overflow: hidden; position: relative; 
}
/* CORRECCIÓN: Animación por GPU */
.loading-progress { 
    width: 50%; height: 100%; 
    background: var(--w-olive); 
    position: absolute; 
    left: 0; /* Fijo en 0 */
    animation: loading 2s infinite ease-in-out; 
}

@keyframes loading { 
    from { transform: translateX(-100%); } 
    to { transform: translateX(200%); } 
}
/* 4. Glitch Effect (Wikipodcast) */
.glitch-effect { position: relative; overflow: hidden; }
.glitch-effect::before, .glitch-effect::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: url('https://www.wikingenieria.com/assets/img/core/wikipodcast-logo.png') no-repeat center center;
    background-size: cover; opacity: 0; z-index: 20; pointer-events: none;
}
.active-glitch::before { opacity: 1; animation: glitch-anim-1 0.3s infinite linear alternate-reverse; }
.active-glitch::after { opacity: 1; animation: glitch-anim-2 0.3s infinite linear alternate-reverse; }
@keyframes glitch-anim-1 {
    0% { clip-path: inset(20% 0 80% 0); transform: translate(-4px, 2px); filter: drop-shadow(4px 0 #ff0000); }
    20% { clip-path: inset(60% 0 10% 0); transform: translate(4px, -2px); filter: drop-shadow(-4px 0 #00ffff); }
    40% { clip-path: inset(40% 0 50% 0); transform: translate(-4px, 2px); filter: drop-shadow(4px 0 #ff0000); }
    60% { clip-path: inset(80% 0 5% 0); transform: translate(4px, -2px); filter: drop-shadow(-4px 0 #00ffff); }
    80% { clip-path: inset(10% 0 70% 0); transform: translate(-4px, 2px); filter: drop-shadow(4px 0 #ff0000); }
    100% { clip-path: inset(30% 0 50% 0); transform: translate(4px, -2px); filter: drop-shadow(-4px 0 #00ffff); }
}
@keyframes glitch-anim-2 {
    0% { clip-path: inset(10% 0 60% 0); transform: translate(4px, -2px); filter: drop-shadow(-4px 0 #00ff00); }
    20% { clip-path: inset(30% 0 20% 0); transform: translate(-4px, 2px); filter: drop-shadow(4px 0 #ff00ff); }
    40% { clip-path: inset(70% 0 20% 0); transform: translate(4px, -2px); filter: drop-shadow(-4px 0 #00ff00); }
    60% { clip-path: inset(20% 0 60% 0); transform: translate(-4px, 2px); filter: drop-shadow(4px 0 #ff00ff); }
    80% { clip-path: inset(50% 0 30% 0); transform: translate(4px, -2px); filter: drop-shadow(-4px 0 #00ff00); }
    100% { clip-path: inset(0% 0 80% 0); transform: translate(-4px, 2px); filter: drop-shadow(4px 0 #ff00ff); }
}

/* 5. Utilidades y Hacks de Formularios (WIK_SYS) */
input[type="search"]::-webkit-search-cancel-button { 
    -webkit-appearance: none; 
    height: 12px;
    width: 12px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>') no-repeat center;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}
input[type="search"]::-webkit-search-cancel-button:hover {
    opacity: 1;
}
input[type="search"] { -webkit-tap-highlight-color: transparent; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 6. Inputs y Botones (WIK_SYS) */
.input-terminal {
    background: rgba(17, 17, 17, 0.8);
    border: 1px solid #2a322e;
    color: #d3d3d3;
    font-family: 'Space Grotesk', monospace;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.input-terminal:focus { 
    border-color: var(--w-olive); 
    box-shadow: 0 0 15px rgba(var(--w-olive-rgb), 0.25); 
    outline: none; 
}

/* NO BORRES ESTO: Es la validación de error del JS */
.input-error { 
    border-color: #e05d5d !important; 
    box-shadow: 0 0 10px rgba(224, 93, 93, 0.3) !important; 
}

.btn-action {
    background: rgba(var(--w-olive-rgb), 0.1); 
    color: #a3b18a; 
    border: 1px solid var(--w-olive); 
    font-family: 'Space Grotesk', sans-serif; 
    font-weight: 700; 
    transition: all 0.3s ease;
}

.btn-segment { background: rgba(17, 17, 17, 0.5); border: 1px solid #2a322e; transition: all 0.2s ease; cursor: pointer; }
.btn-segment.active { 
    border-color: var(--w-olive); 
    background: rgba(var(--w-olive-rgb), 0.1); 
    box-shadow: 0 0 10px rgba(var(--w-olive-rgb), 0.2); 
}
.btn-segment.active i { color: #a3b18a; }

/* 7. Vistas Hub */
.hub-border { border: 1px solid rgba(234, 179, 8, 0.3); }
progress::-webkit-progress-bar { background-color: #2a322e; border-radius: 2px; }
progress::-webkit-progress-value { background-color: #eab308; border-radius: 2px; }
progress { border-radius: 2px; height: 6px; }

/* inicio: UTILIDADES DE COLOR PERSONALIZADAS (WIK_SYS) */
.text-w-muted-light {
    color: var(--w-muted-light) !important;
}
/* fin: Consolidación de clases custom */

/* INICIO: INFRAESTRUCTURA DE FUENTES LOCALES (WIK_SYS) */

/* INTER - Pesos: 300, 400, 500, 600 */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/inter-v20-latin-300.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter-v20-latin-500.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-v20-latin-600.woff2') format('woff2');
  }
  
  /* SPACE GROTESK - Pesos: 300, 400, 500, 700 */
  @font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/space-grotesk-v22-latin-300.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/space-grotesk-v22-latin-regular.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/space-grotesk-v22-latin-500.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/space-grotesk-v22-latin-700.woff2') format('woff2');
  }
  
  /* FIN: INFRAESTRUCTURA DE FUENTES LOCALES */

/* INICIO: WIKI_SYS :: COMPONENTES LANDING LOG */
  .profile-card {
    padding: 12px 8px; /* Altura compactada */
    border: 2px solid rgba(85, 107, 47, 0.4); 
    background: rgba(2, 2, 1, 0.4);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}
.profile-card:hover {
    border-color: rgba(85, 107, 47, 1); /* w-olive puro */
    background: rgba(85, 107, 47, 0.1);
    transform: scale(1.02);
    box-shadow: 0 0 15px rgba(85, 107, 47, 0.2);
}
.profile-card:hover i {
    color: rgba(85, 107, 47, 1) !important;
    text-shadow: none; /* Brillo de neón suprimido */
}
.btn-unlock {
    background-color: rgb(85, 107, 47) !important; /* bg-w-olive */
    color: #020201 !important;
    box-shadow: 0 4px 10px rgba(85, 107, 47, 0.2);
    transition: all 0.2s ease-in-out;
    border: none;
}
.btn-unlock:hover {
    background-color: #6b7838 !important; /* bg-w-matrix */
    box-shadow: 0 0 15px rgba(107, 120, 56, 0.4);
    transform: translateY(-2px);
}
/* FIN: WIKI_SYS :: COMPONENTES LANDING LOG */