/* index.html -------------------------------------------------------------------------------------------- */
/* Estilos generales */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;700;800&display=swap');
body {
font-family: 'Plus Jakarta Sans', sans-serif !important;
background-color: #030305;
color: white;
overflow-x: hidden;
/* Fondo unificado infinito con efecto de profundidad */
background:
radial-gradient(circle at 20% 30%, rgba(168, 85, 247, 0.1) 0%, transparent 40%),
radial-gradient(circle at 80% 70%, rgba(34, 197, 94, 0.08) 0%, transparent 40%),
linear-gradient(to bottom, #030305, #080810, #030305);
background-attachment: fixed;
}
/*Animaciones de Escaneo*/
@keyframes scan {
0% { top: 0%; opacity: 0; }
50% { opacity: 1; }
100% { top: 100%; opacity: 0; }
}
.scanner-line {
height: 2px;
background: linear-gradient(90deg, transparent, #22c55e, transparent);
position: absolute;
width: 100%;
z-index: 10;
animation: scan 3s linear infinite;
box-shadow: 0 0 15px #22c55e;
}
/*Estilo de Tarjetas Avanzado*/
.glass-card {
background: rgba(15, 15, 25, 0.4);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.03);
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.glass-card:hover {
border-color: rgba(34, 197, 94, 0.4);
background: rgba(20, 20, 35, 0.6);
/* transform: translateY(-5px) scale(1.01); */
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
/* Efecto de Texto Neon*/
.toxic-text {
background: linear-gradient(to right, #a855f7, #22c55e);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.3));
}
/*Navbar Blur*/
.nav-glass {
background: rgba(3, 3, 5, 0.8);
backdrop-filter: blur(15px);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
/* Bento Grid Custom Spacing */
.bento-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
/* documentos -------------------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;600;700;800&display=swap');
:root {
--green: #00e676;
--green-dim: #00c853;
--green-subtle: rgba(0, 230, 118, 0.08);
--purple: #b066ff;
--purple-dim: #8a3ffc;
--purple-subtle: rgba(176, 102, 255, 0.1);
--bg: #0a080f;
--border: rgba(176, 102, 255, 0.15);
}
* { box-sizing: border-box; }
body {
font-family: 'Syne', sans-serif;
background-color: var(--bg);
color: #ede0ff;
overflow-x: hidden;
scroll-behavior: smooth;
}
body::before {
content: '';
position: fixed;
inset: 0;
background-image:
linear-gradient(rgba(176,102,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,230,118,0.03) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
z-index: 0;
}
body::after {
content: '';
position: fixed;
top: -150px; right: -150px;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(176,102,255,0.12) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
main, nav, header, footer, aside, section {
position: relative;
z-index: 1;
}
.glass-card {
background: rgba(18, 13, 26, 0.75);
backdrop-filter: blur(16px);
border: 1px solid var(--border);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.glass-card:hover {
border-color: rgba(176, 102, 255, 0.4);
box-shadow: 0 0 30px rgba(176, 102, 255, 0.07);
}
/* .nav-link-custom { transition: color 0.3s; } */
/* .nav-link-custom:hover { color: var(--green); } */
.sidebar-link { transition: all 0.2s ease; }
.sidebar-link:hover {
color: var(--green) !important;
background: var(--green-subtle);
border-radius: 0.5rem;
}
.sidebar-link.active {
background: var(--purple-subtle);
color: var(--purple) !important;
border-radius: 0.5rem;
border-left: 2px solid var(--purple);
}
.icon-box-green {
background: var(--green-subtle);
border: 1px solid rgba(0,230,118,0.2);
}
.icon-box-green i { color: var(--green); }
.icon-box-purple {
background: var(--purple-subtle);
border: 1px solid rgba(176,102,255,0.25);
}
.icon-box-purple i { color: var(--purple); }
/* color letra documentacion */
.custom-list { list-style: none; padding: 0; margin: 0; }
.custom-list li {
position: relative;
padding-left: 1.5rem;
margin-bottom: 1rem;
color: #e8e2f0;
font-size: 1rem;
line-height: 1.7;
}
.custom-list li::before {
content: "▶";
position: absolute;
left: 0; top: 0.15rem;
font-size: 0.55rem;
color: var(--purple);
}
.custom-list li:nth-child(even)::before { color: var(--green); }
nav { border-bottom: 1px solid rgba(255,255,255,0.05); }
.nav-active-pill {
background: var(--purple-subtle);
border: 1px solid rgba(176,102,255,0.25);
color: var(--purple) !important;
}
.btn-cta {
background: linear-gradient(135deg, var(--green), var(--green-dim));
color: #0a080f;
font-weight: 700;
letter-spacing: 0.02em;
box-shadow: 0 0 20px rgba(0,230,118,0.3);
transition: box-shadow 0.3s, transform 0.2s;
}
.btn-cta:hover {
box-shadow: 0 0 35px rgba(0,230,118,0.5);
transform: translateY(-1px);
color: #0a080f;
}
code.tag-post {
color: var(--purple);
background: var(--purple-subtle);
border: 1px solid rgba(176,102,255,0.25);
padding: 2px 8px; border-radius: 4px;
font-family: 'Space Mono', monospace; font-size: 0.7rem;
}
code.tag-get {
color: var(--green);
background: var(--green-subtle);
border: 1px solid rgba(0,230,118,0.2);
padding: 2px 8px; border-radius: 4px;
font-family: 'Space Mono', monospace; font-size: 0.7rem;
}
.section-title { position: relative; display: inline-block; }
.section-title.green-line::after {
content: '';
position: absolute;
bottom: -4px; left: 0;
width: 40px; height: 2px;
background: var(--green);
}
.section-title.purple-line::after {
content: '';
position: absolute;
bottom: -4px; left: 0;
width: 40px; height: 2px;
background: var(--purple);
}
footer {
border-top: 1px solid rgba(176,102,255,0.1);
background: rgba(8, 5, 12, 0.9);
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--purple), var(--green));
border-radius: 3px;
}
.badge-version {
background: var(--purple-subtle);
border: 1px solid rgba(176,102,255,0.2);
color: var(--purple);
font-family: 'Space Mono', monospace;
font-size: 0.7rem;
}
.glow-text-mixed {
background: linear-gradient(135deg, var(--purple), var(--green));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 0 20px rgba(176,102,255,0.4));
}
/* login.html ---------------------------------------------------------------------------------------- */
:root {
--purple: #b066ff;
--green: #00e676;
}
body {
background-color: #08050f;
background-image:
linear-gradient(rgba(176, 102, 255, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 230, 118, 0.03) 1px, transparent 1px);
background-size: 40px 40px;
font-family: 'Inter', sans-serif;
}
/* Ambient glow — purple top right */
body::before {
content: '';
position: fixed;
top: -200px; right: -200px;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(176,102,255,0.1) 0%, transparent 70%);
pointer-events: none;
}
/* Ambient glow — green bottom left */
body::after {
content: '';
position: fixed;
bottom: -200px; left: -200px;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(0,230,118,0.07) 0%, transparent 70%);
pointer-events: none;
}
.glass-card {
background: rgba(13, 10, 22, 0.85);
backdrop-filter: blur(12px);
border: 1px solid rgba(176, 102, 255, 0.15);
position: relative;
z-index: 1;
}
.input-field {
width: 100%;
background: rgba(26, 18, 40, 0.9);
border: 1px solid rgba(176, 102, 255, 0.15);
border-radius: 0.5rem;
padding: 0.75rem 1rem 0.75rem 2.5rem;
color: white;
font-size: 0.875rem;
transition: border-color 0.2s, box-shadow 0.2s;
outline: none;
}
.input-field:focus {
border-color: rgba(0, 230, 118, 0.5);
box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.08);
}
.input-field::placeholder { color: #cda6f39b; }
.input-group i { color: #6ec771; }
/* Button — green CTA */
.btn-primary {
width: 100%;
background: linear-gradient(135deg, var(--green), #00c853b8);
color: #08050f;
font-weight: 700;
padding: 0.75rem;
border-radius: 0.5rem;
margin-top: 1.5rem;
box-shadow: 0 0 20px rgba(0, 230, 118, 0.25);
transition: box-shadow 0.3s, transform 0.15s, opacity 0.2s;
cursor: pointer;
border: none;
font-size: 0.9rem;
letter-spacing: 0.02em;
}
.btn-primary:hover {
box-shadow: 0 0 32px rgba(0, 230, 118, 0.4);
opacity: 0.95;
}
.btn-primary:active { transform: scale(0.98); }
/* Auth link */
.auth-link {
color: var(--purple);
text-decoration: none;
transition: color 0.2s;
}
.auth-link:hover {
color: var(--green);
text-decoration: underline;
}
/* Gradient divider under title */
.title-line {
width: 40px; height: 2px;
background: linear-gradient(90deg, var(--purple), var(--green));
border-radius: 2px;
margin: 8px auto 0;
}
.hidden { display: none; }
/* SCANNER ---------------------------------------------------------------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;600;700;800&display=swap');
:root {
--green: #00e676;
--green-dim: #00c853;
--green-subtle: rgba(0, 230, 118, 0.08);
--purple: #b066ff;
--purple-dim: #8a3ffc;
--purple-subtle: rgba(176, 102, 255, 0.1);
--bg: #0a080f;
--border: rgba(176, 102, 255, 0.15);
}
* { box-sizing: border-box; }
body {
font-family: 'Syne', sans-serif;
background-color: var(--bg);
color: #ede0ff;
overflow-x: hidden;
scroll-behavior: smooth;
}
body::before {
content: '';
position: fixed;
inset: 0;
background-image:
linear-gradient(rgba(176,102,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,230,118,0.03) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
z-index: 0;
}
body::after {
content: '';
position: fixed;
top: -150px; right: -150px;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(176,102,255,0.12) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
main, nav, header, footer, aside, section {
position: relative;
z-index: 1;
}
.glass-card {
background: rgba(18, 13, 26, 0.75);
backdrop-filter: blur(16px);
border: 1px solid var(--border);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.glass-card:hover {
border-color: rgba(176, 102, 255, 0.4);
box-shadow: 0 0 30px rgba(176, 102, 255, 0.07);
}
.nav-link-custom { transition: color 0.3s; }
.nav-link-custom:hover { color: var(--green); }
.sidebar-link { transition: all 0.2s ease; }
.sidebar-link:hover {
color: var(--green) !important;
background: var(--green-subtle);
border-radius: 0.5rem;
}
.sidebar-link.active {
background: var(--purple-subtle);
color: var(--purple) !important;
border-radius: 0.5rem;
border-left: 2px solid var(--purple);
}
.icon-box-green {
background: var(--green-subtle);
border: 1px solid rgba(0,230,118,0.2);
}
.icon-box-green i { color: var(--green); }
.icon-box-purple {
background: var(--purple-subtle);
border: 1px solid rgba(176,102,255,0.25);
}
.icon-box-purple i { color: var(--purple); }
/* documentation settings */
.custom-list { list-style: none; padding: 0; margin: 0; }
.custom-list li {
position: relative;
padding-left: 1.5rem;
margin-bottom: 1rem;
color: #f3ecfd;
font-size: 0.975rem;
line-height: 1.7;
}
.custom-list li::before {
content: "▶";
position: absolute;
left: 0; top: 0.15rem;
font-size: 0.55rem;
color: var(--purple);
}
.custom-list li:nth-child(even)::before { color: var(--green); }
nav { border-bottom: 1px solid rgba(255,255,255,0.05); }
.nav-active-pill {
background: var(--purple-subtle);
border: 1px solid rgba(176,102,255,0.25);
color: var(--purple) !important;
}
.btn-cta {
background: linear-gradient(135deg, var(--green), var(--green-dim));
color: #0a080f;
font-weight: 700;
letter-spacing: 0.02em;
box-shadow: 0 0 20px rgba(0,230,118,0.3);
transition: box-shadow 0.3s, transform 0.2s;
}
.btn-cta:hover {
box-shadow: 0 0 35px rgba(0,230,118,0.5);
transform: translateY(-1px);
color: #0a080f;
}
code.tag-post {
color: var(--purple);
background: var(--purple-subtle);
border: 1px solid rgba(176,102,255,0.25);
padding: 2px 8px; border-radius: 4px;
font-family: 'Space Mono', monospace; font-size: 0.7rem;
}
code.tag-get {
color: var(--green);
background: var(--green-subtle);
border: 1px solid rgba(0,230,118,0.2);
padding: 2px 8px; border-radius: 4px;
font-family: 'Space Mono', monospace; font-size: 0.7rem;
}
.section-title { position: relative; display: inline-block; }
.section-title.green-line::after {
content: '';
position: absolute;
bottom: -4px; left: 0;
width: 40px; height: 2px;
background: var(--green);
}
.section-title.purple-line::after {
content: '';
position: absolute;
bottom: -4px; left: 0;
width: 40px; height: 2px;
background: var(--purple);
}
footer {
border-top: 1px solid rgba(176,102,255,0.1);
background: rgba(8, 5, 12, 0.9);
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--purple), var(--green));
border-radius: 3px;
}
.badge-version {
background: var(--purple-subtle);
border: 1px solid rgba(176,102,255,0.2);
color: var(--purple);
font-family: 'Space Mono', monospace;
font-size: 0.7rem;
}
.glow-text-mixed {
background: linear-gradient(135deg, var(--purple), var(--green));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 0 20px rgba(176,102,255,0.4));
}
/* view sections */
.view-section { display: none; }
.view-section.active { display: block; }