:root { --bg: #0b0f0e; --surface: #12181a; --surface-2: #171f21; --border: #22302c; --text-primary: #e6ede9; --text-muted: #8ea39c; --accent: #4ce0b3; /* verde-teal fósforo, acento principal */ --accent-dim: #2c8f70; --amber: #e0a84c; /* severidad media */ --critical: #e0574c; /* severidad crítica */ --font-mono: "IBM Plex Mono", "Courier New", monospace; --font-body: "Inter", system-ui, sans-serif; --radius: 6px; --max-width: 1080px; } /* Modo claro — activado con JS (localStorage) agregando esta clase al */ body.light-mode { --bg: #f4f7f6; --surface: #ffffff; --surface-2: #eef2f1; --border: #d7e0dd; --text-primary: #12181a; --text-muted: #4c5c58; --accent: #189a72; --accent-dim: #0f6e51; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background-color: var(--bg); background-image: linear-gradient(180deg, rgba(76, 224, 179, 0.04), transparent 320px); color: var(--text-primary); font-family: var(--font-body); line-height: 1.6; } h1, h2, h3 { font-family: var(--font-mono); margin: 0; } a { color: var(--accent); text-decoration: none; } ul { list-style: none; padding: 0; margin: 0; } section { max-width: var(--max-width); margin: 0 auto; padding: 80px 24px; } /* ========================================================= HEADER ========================================================= */ .site-header { position: sticky; top: 0; z-index: 10; background-color: rgba(11, 15, 14, 0.9); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); } .term-bar { display: flex; align-items: center; gap: 8px; padding: 8px 24px; background-color: var(--surface-2); border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); } .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .dot-r { background-color: var(--critical); } .dot-y { background-color: var(--amber); } .dot-g { background-color: var(--accent); } .term-path { margin-left: 8px; } .header-inner { max-width: var(--max-width); margin: 0 auto; padding: 20px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } .brand { display: flex; flex-direction: column; } .brand-name { font-family: var(--font-mono); font-weight: 600; font-size: 1.05rem; } .brand-role { font-size: 0.85rem; color: var(--text-muted); } .main-nav ul { display: flex; flex-wrap: wrap; gap: 24px; } .main-nav a { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-muted); border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color 0.15s ease, border-color 0.15s ease; } .main-nav a:hover { color: var(--accent); border-color: var(--accent); } .theme-toggle { font-family: var(--font-mono); font-size: 0.78rem; background-color: transparent; color: var(--text-muted); border: 1px solid var(--border); border-radius: 4px; padding: 6px 12px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } /* ========================================================= HERO ========================================================= */ .hero { display: flex; align-items: center; justify-content: space-between; gap: 48px; padding-top: 96px; padding-bottom: 96px; } .hero-terminal { flex: 1 1 480px; background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 32px; font-family: var(--font-mono); } .line { margin: 0 0 10px 0; font-size: 0.95rem; } .prompt { color: var(--accent); margin-right: 8px; } .output { color: var(--text-muted); } .highlight { color: var(--accent); font-weight: 600; } .typed-name { font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 6px 0 18px 0; color: var(--text-primary); } .cursor { display: inline-block; color: var(--accent); animation: blink 1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } .hero-avatar { flex: 0 0 220px; width: 220px; height: 220px; border-radius: 50%; overflow: hidden; border: 2px solid var(--accent); box-shadow: 0 0 0 8px rgba(76, 224, 179, 0.08); } .hero-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .welcome-banner { max-width: var(--max-width); margin: -60px auto 0; padding: 14px 24px; border: 1px solid var(--accent-dim); border-radius: var(--radius); background-color: rgba(76, 224, 179, 0.08); color: var(--text-primary); font-family: var(--font-mono); font-size: 0.88rem; } /* ========================================================= SECTION HEADINGS ========================================================= */ .tag { color: var(--accent); font-size: 0.85rem; margin-right: 10px; border: 1px solid var(--accent-dim); border-radius: 4px; padding: 2px 8px; vertical-align: middle; } section h2 { font-size: 1.4rem; margin-bottom: 32px; display: flex; align-items: center; } /* ========================================================= SOBRE MI ========================================================= */ .sobre-mi-card { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 32px; } .sobre-mi-card p { color: var(--text-muted); } .sobre-mi-card p + p { margin-top: 16px; } /* ========================================================= HABILIDADES ========================================================= */ .skills-grid { display: flex; flex-wrap: wrap; gap: 10px; } .tech-stack-title { margin-top: 40px; margin-bottom: 18px; font-size: 1rem; color: var(--text-primary); } .tech-stack { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .tech-stack img { height: 30px; border-radius: 4px; display: block; transition: transform 0.15s ease; } .tech-stack img:hover { transform: translateY(-2px); } .tech-badge { display: inline-flex; align-items: stretch; border-radius: 4px; overflow: hidden; border: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; } .tech-icon { display: flex; align-items: center; justify-content: center; min-width: 30px; padding: 7px 9px; color: #f5f5f5; } .tech-icon-dark { color: #12181a; } .tech-label { display: flex; align-items: center; padding: 7px 12px; background-color: #14191b; color: var(--text-primary); text-transform: uppercase; } .tech-label em { font-style: normal; color: var(--accent); margin-left: 8px; font-size: 0.65rem; opacity: 0.9; } /* ========================================================= PROYECTOS / REPORTES ========================================================= */ .proyectos-intro { color: var(--text-muted); margin-top: -16px; margin-bottom: 32px; max-width: 640px; } .reports-list { display: flex; flex-direction: column; gap: 20px; } .report-card { background-color: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent-dim); border-radius: var(--radius); padding: 24px 28px; transition: border-left-color 0.15s ease, background-color 0.15s ease; } .report-card:hover { background-color: var(--surface-2); } .report-card.severity-critical { border-left-color: var(--critical); } .report-card.severity-medium { border-left-color: var(--amber); } .report-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-family: var(--font-mono); font-size: 0.8rem; } .badge { padding: 2px 10px; border-radius: 999px; font-weight: 600; letter-spacing: 0.02em; } .badge-critical { background-color: rgba(224, 87, 76, 0.15); color: var(--critical); } .badge-medium { background-color: rgba(224, 168, 76, 0.15); color: var(--amber); } .badge-pending { background-color: rgba(142, 163, 156, 0.15); color: var(--text-muted); } .report-card.severity-pending { border-left-color: var(--text-muted); opacity: 0.85; } .report-meta--pending { color: var(--text-muted); } .report-link--locked { color: var(--text-muted); cursor: pointer; } .report-link--locked:hover { border-color: var(--text-muted); } .report-org { color: var(--text-muted); text-transform: uppercase; } .report-card h3 { font-size: 1.05rem; margin-bottom: 10px; } .report-desc { color: var(--text-muted); margin: 0 0 14px 0; } .report-meta { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent); margin-bottom: 12px; } .report-link { font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent); border-bottom: 1px solid transparent; transition: border-color 0.15s ease; } button.report-link { background: none; border: none; border-bottom: 1px solid transparent; padding: 0; cursor: pointer; } .report-link:hover { border-color: var(--accent); } /* ========================================================= MODAL DE WRITE-UP ========================================================= */ dialog.writeup-dialog { width: min(720px, 92vw); max-height: 85vh; overflow-y: auto; margin: auto; background-color: var(--surface); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius); padding: 0; } dialog.writeup-dialog::backdrop { background-color: rgba(6, 10, 9, 0.8); backdrop-filter: blur(2px); } .writeup-content { position: relative; padding: 36px 32px 28px; } .writeup-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; background-color: transparent; border: 1px solid var(--border); color: var(--text-muted); font-size: 1.2rem; line-height: 1; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .writeup-close:hover { color: var(--accent); border-color: var(--accent); } .writeup-head { margin-bottom: 22px; padding-right: 40px; } .writeup-head h3 { font-size: 1.15rem; margin-top: 10px; } .writeup-content section { margin-bottom: 22px; } .writeup-content section:last-child { margin-bottom: 0; } .writeup-content h4 { font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); margin-bottom: 8px; } .writeup-content p, .writeup-content li { color: var(--text-muted); font-size: 0.92rem; } .writeup-content ol { padding-left: 20px; } .writeup-gallery { display: flex; flex-wrap: wrap; gap: 12px; } .writeup-gallery img { width: 160px; height: 120px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); cursor: zoom-in; transition: transform 0.15s ease, border-color 0.15s ease; } .writeup-gallery img:hover { transform: scale(1.03); border-color: var(--accent); } .writeup-gallery img.writeup-gallery-doc { width: 100%; max-width: 320px; height: auto; object-fit: contain; background-color: #fff; } .writeup-video video { width: 100%; max-height: 360px; border-radius: 4px; border: 1px solid var(--border); background-color: #000; display: block; } .writeup-locked { text-align: center; padding: 20px 10px 6px; } .writeup-locked-icon { font-size: 2rem; margin-bottom: 14px; opacity: 0.8; } .writeup-locked-note { margin-top: 10px; font-size: 0.8rem !important; color: var(--text-muted); font-style: italic; } /* ========================================================= CONTACTO ========================================================= */ .contacto-wrap { display: flex; flex-wrap: wrap; gap: 40px; } .contacto-info { flex: 1 1 280px; color: var(--text-muted); } .contacto-info ul { margin-top: 16px; } .contacto-info li { margin-bottom: 8px; font-family: var(--font-mono); font-size: 0.9rem; } .contacto-form { flex: 1 1 320px; display: flex; flex-direction: column; background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; } .contacto-form label { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px; margin-top: 14px; } .contacto-form label:first-child { margin-top: 0; } .contacto-form input, .contacto-form textarea { background-color: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; color: var(--text-primary); font-family: var(--font-body); font-size: 0.9rem; resize: vertical; } .contacto-form input:focus, .contacto-form textarea:focus { outline: none; border-color: var(--accent); } .contacto-form button { margin-top: 20px; align-self: flex-start; background-color: var(--accent); color: #06110d; border: none; border-radius: 4px; padding: 12px 22px; font-family: var(--font-mono); font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, transform 0.15s ease; } .contacto-form button:hover { background-color: #6cf0c8; transform: translateY(-1px); } .form-message { font-family: var(--font-mono); font-size: 0.8rem; min-height: 1.1em; margin-top: 14px; } .form-message--error { color: var(--critical); } .form-message--success { color: var(--accent); } .visit-counter { font-family: var(--font-mono); color: var(--text-muted); } .back-to-top { position: fixed; right: 20px; bottom: 20px; z-index: 20; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700; background-color: var(--accent); color: #06110d; border: none; border-radius: 999px; padding: 10px 18px; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); transition: transform 0.15s ease, background-color 0.15s ease; } .back-to-top:hover { transform: translateY(-3px); background-color: #6cf0c8; } /* ========================================================= FOOTER ========================================================= */ .site-footer { border-top: 1px solid var(--border); padding: 28px 24px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; max-width: var(--max-width); margin: 0 auto; font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-muted); } .site-footer a:hover { color: var(--accent); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 720px) { .hero { flex-direction: column-reverse; text-align: center; } .hero-terminal { text-align: left; } .header-inner { flex-direction: column; align-items: flex-start; } }