/* Skin: Basic — minimalista B/N (referencia Miranda). Solo con data-skin="basic" */

[data-skin="basic"] {
    --primary-color: #ffffff;
    --primary-light: #f5f5f5;
    --primary-dark: #e5e5e5;
    --secondary-color: #ffffff;
    --accent-color: #ffffff;
    --accent-light: #d4d4d4;
    --tertiary-color: #262626;

    --text-color: #ffffff;
    --text-light: #8a8a8a;
    --text-muted: #737373;

    --background: #0a0a0a;
    --background-section: #0f0f0f;
    --background-alt: #0a0a0a;
    --background-card: #111111;
    --background-glass: #0f0f0f;

    --border-color: #262626;
    --border-glow: #ffffff;
    --tech-line: rgba(255, 255, 255, 0.04);
    --tech-dot: rgba(255, 255, 255, 0.06);
    --cursor-glow-inner: rgba(255, 255, 255, 0.04);
    --cursor-glow-grid: rgba(255, 255, 255, 0.03);

    --shadow: none;
    --shadow-glow: none;
    --shadow-hover: none;

    --card-radius: 12px;
    --btn-radius: 999px;
    --gradient-primary: #ffffff;
    --gradient-accent: #e5e5e5;
    --gradient-hero:
        radial-gradient(ellipse 80% 50% at 50% -10%, #161616 0%, transparent 55%);

    --scrollbar-track: rgba(255, 255, 255, 0.03);
    --scrollbar-thumb: rgba(255, 255, 255, 0.22);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.38);

    --status-ok: #22c55e;
    --btn-fg: #0a0a0a;
    --btn-bg: #ffffff;
    --hero-title-gradient: linear-gradient(180deg, #ffffff 35%, #a3a3a3 100%);
}

[data-skin="basic"] body {
    background-color: var(--background);
    background-image: var(--gradient-hero);
    background-attachment: fixed;
    color: var(--text-color);
}

[data-skin="basic"] body::before,
[data-skin="basic"] body::after {
    opacity: 0.35;
    background-image:
        linear-gradient(var(--tech-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--tech-line) 1px, transparent 1px);
}

[data-skin="basic"] .hero-background,
[data-skin="basic"] .shape {
    opacity: 0 !important;
    display: none !important;
}

/* Tipografía hero: degradado blanco → gris */
[data-skin="basic"] .hero h1,
[data-skin="basic"] .page-hero h1,
[data-skin="basic"] .hero-intro-text h1 {
    color: transparent !important;
    background: var(--hero-title-gradient) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

[data-skin="basic"] .hero h1 span,
[data-skin="basic"] .hero .subtitle strong,
[data-skin="basic"] .logo-text {
    color: var(--text-color) !important;
    -webkit-text-fill-color: var(--text-color);
    background: none !important;
}

[data-skin="basic"] .hero .subtitle,
[data-skin="basic"] .page-hero .subtitle,
[data-skin="basic"] .hero-tagline,
[data-skin="basic"] .project-row-desc,
[data-skin="basic"] .projects-future-desc {
    color: var(--text-light) !important;
}

/* Badges / status: borde fino, pill, punto verde */
[data-skin="basic"] .status-chip {
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 999px !important;
    color: var(--text-light) !important;
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 500;
}

[data-skin="basic"] .status-chip .pulse {
    background: var(--status-ok) !important;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-ok) 50%, transparent);
}

[data-skin="basic"] .status-chip--employed .pulse {
    background: var(--status-ok) !important;
}

[data-skin="basic"] .contact-status {
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 999px !important;
    color: var(--status-ok) !important;
}

[data-skin="basic"] .contact-status .pulse {
    background: var(--status-ok) !important;
}

/* Botones pill blanco / texto negro */
[data-skin="basic"] .btn-primary,
[data-skin="basic"] .launch-card-btn,
[data-skin="basic"] .launch-strip-btn,
[data-skin="basic"] .btn-secondary {
    background: var(--btn-bg) !important;
    color: var(--btn-fg) !important;
    border: 1px solid var(--btn-bg) !important;
    border-radius: var(--btn-radius) !important;
    box-shadow: none !important;
    background-image: none !important;
}

[data-skin="basic"] .btn-primary:hover,
[data-skin="basic"] .launch-card-btn:hover,
[data-skin="basic"] .launch-strip-btn:hover,
[data-skin="basic"] .btn-secondary:hover {
    background: var(--primary-light) !important;
    color: var(--btn-fg) !important;
    transform: translateY(-1px);
    box-shadow: none !important;
}

[data-skin="basic"] .btn-secondary {
    background: transparent !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

[data-skin="basic"] .btn-secondary:hover {
    background: var(--btn-bg) !important;
    color: var(--btn-fg) !important;
    border-color: var(--btn-bg) !important;
}

/* Nav / controles: sin rojo */
[data-skin="basic"] header {
    background: color-mix(in srgb, var(--background) 88%, transparent) !important;
    border-bottom: 1px solid var(--border-color) !important;
    backdrop-filter: blur(12px);
    box-shadow: none !important;
}

[data-skin="basic"] .theme-toggle-btn,
[data-skin="basic"] .nav-search-btn,
[data-skin="basic"] .language-btn,
[data-skin="basic"] .command-dock-btn,
[data-skin="basic"] .command-dock-search,
[data-skin="basic"] .mobile-menu-btn {
    background: var(--background-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
    box-shadow: none !important;
    border-radius: 999px !important;
}

[data-skin="basic"] .mobile-menu-btn .bar {
    background: var(--text-color) !important;
}

[data-skin="basic"] .theme-toggle-btn:hover,
[data-skin="basic"] .nav-search-btn:hover,
[data-skin="basic"] .language-btn:hover,
[data-skin="basic"] .mobile-menu-btn:hover,
[data-skin="basic"] .mobile-menu-btn.active,
[data-skin="basic"] .command-dock-btn:hover,
[data-skin="basic"] .command-dock-btn.is-active,
[data-skin="basic"] .command-dock-search:hover {
    border-color: color-mix(in srgb, var(--text-color) 35%, var(--border-color)) !important;
    background: var(--background-section) !important;
}

[data-skin="basic"] .command-dock {
    background: color-mix(in srgb, var(--background-card) 92%, transparent) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
    border-radius: 999px !important;
}

[data-skin="basic"] .scroll-progress {
    background: var(--text-color) !important;
}

/* Links y acentos: blanco, no rojo */
[data-skin="basic"] a,
[data-skin="basic"] .project-row-title a,
[data-skin="basic"] .project-info h3 a,
[data-skin="basic"] .upcoming-sites a {
    color: var(--text-color) !important;
}

[data-skin="basic"] .project-new-badge,
[data-skin="basic"] .launch-card-badge,
[data-skin="basic"] .launch-strip-badge {
    background: var(--btn-bg) !important;
    color: var(--btn-fg) !important;
    border-radius: 999px !important;
    border: none !important;
}

[data-skin="basic"] .project-client-badge {
    background: transparent !important;
    color: var(--text-light) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 999px !important;
}

[data-skin="basic"] .logo-decoration {
    background: var(--border-color) !important;
}

[data-skin="basic"] footer.site-footer::before {
    background: var(--border-color) !important;
    opacity: 1 !important;
}

[data-skin="basic"] .site-footer {
    background: transparent !important;
    border-top: 1px solid var(--border-color) !important;
}

[data-skin="basic"] .footer-meta p,
[data-skin="basic"] .footer-meta .version-info {
    color: var(--text-muted) !important;
}

[data-skin="basic"] .footer-meta .version-info {
    background: transparent !important;
    border-color: var(--border-color) !important;
    border-radius: 999px !important;
}

/* Cards / paneles: sin glow rojo */
[data-skin="basic"] .launch-card,
[data-skin="basic"] .launch-strip-inner,
[data-skin="basic"] .hero-skills,
[data-skin="basic"] .hero-terminal,
[data-skin="basic"] .contact-panel,
[data-skin="basic"] .education-card,
[data-skin="basic"] .exp-list-panel,
[data-skin="basic"] .exp-map-panel,
[data-skin="basic"] .project-preview,
[data-skin="basic"] .mobile-menu,
[data-skin="basic"] .command-palette {
    background: var(--background-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}

[data-skin="basic"] .launch-card-icon,
[data-skin="basic"] .project-image {
    background: var(--background-section) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

[data-skin="basic"] .tech-tag {
    background: var(--background-section) !important;
    color: var(--text-light) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 999px !important;
}

[data-skin="basic"] .project-row {
    border-bottom-color: var(--border-color) !important;
}

[data-skin="basic"] .project-row:hover .project-preview {
    border-color: color-mix(in srgb, var(--text-color) 28%, var(--border-color)) !important;
    box-shadow: none !important;
}

/* Anular rojos hardcodeados frecuentes */
[data-skin="basic"] .mobile-menu-nav a i,
[data-skin="basic"] .mobile-menu-nav a:hover,
[data-skin="basic"] .mobile-menu-nav a:active,
[data-skin="basic"] .mobile-menu-theme-btn:hover,
[data-skin="basic"] .mobile-menu-theme-btn:active,
[data-skin="basic"] .mobile-lang-chip.active,
[data-skin="basic"] .mobile-skin-chip:hover,
[data-skin="basic"] .mobile-skin-chip:active,
[data-skin="basic"] .mobile-skin-chip.is-active {
    border-color: var(--border-color) !important;
    background: var(--background-section) !important;
    color: var(--text-color) !important;
    box-shadow: none !important;
}

[data-skin="basic"] .mobile-skin-chip.is-active,
[data-skin="basic"] #mobile-menu .mobile-menu-nav a.is-current,
[data-skin="basic"] .mobile-menu-nav a.is-current,
[data-skin="basic"] .mobile-menu-nav a.is-active {
    background: var(--btn-bg) !important;
    color: var(--btn-fg) !important;
    border-color: var(--btn-bg) !important;
}

[data-skin="basic"] #mobile-menu .mobile-menu-nav a.is-current i,
[data-skin="basic"] .mobile-menu-nav a.is-current i,
[data-skin="basic"] .mobile-menu-nav a.is-active i {
    background: transparent !important;
    color: var(--btn-fg) !important;
    border-color: transparent !important;
}

[data-skin="basic"] .hero-scroll-cue-icon {
    border-color: var(--border-color) !important;
    background: transparent !important;
    color: var(--text-light) !important;
}

[data-skin="basic"] .education-card,
[data-skin="basic"] .curso-card,
[data-skin="basic"] .page-studios .education-card,
[data-skin="basic"] .page-studios .curso-card {
    border-left-color: var(--border-color) !important;
}

/* Iconos en cajas: fondo claro + icono oscuro (evita blanco sobre blanco) */
[data-skin="basic"] .education-icon,
[data-skin="basic"] .curso-icon,
[data-skin="basic"] .page-studios .education-icon,
[data-skin="basic"] .page-studios .curso-icon {
    background: var(--btn-bg) !important;
    color: var(--btn-fg) !important;
    box-shadow: none !important;
}

[data-skin="basic"] .education-card:hover .education-icon,
[data-skin="basic"] .curso-card:hover .curso-icon {
    box-shadow: none !important;
}

[data-skin="basic"] .page-studios .education-period,
[data-skin="basic"] .page-studios .curso-centro {
    color: var(--text-light) !important;
}

/* Contacto: quitar fondo rojo hardcodeado */
[data-skin="basic"] .contact-channel-icon {
    background: var(--background-section) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

[data-skin="basic"] .contact-channel:hover,
[data-skin="basic"] .contact-action-btn:hover {
    border-color: color-mix(in srgb, var(--text-color) 35%, var(--border-color)) !important;
    box-shadow: none !important;
}

[data-skin="basic"] .contact-channel:hover .contact-channel-arrow,
[data-skin="basic"] .contact-action-btn:hover .contact-channel-arrow {
    color: var(--text-color) !important;
}

[data-skin="basic"] .contact-action-btn:focus-visible {
    outline-color: var(--text-color) !important;
}

/* Nav context (pill de página) */
[data-skin="basic"] .nav-context {
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-light) !important;
    box-shadow: none !important;
}

[data-skin="basic"] .nav-page-label {
    color: var(--text-color) !important;
}

/* Dock activo: blanco + icono negro */
[data-skin="basic"] .command-dock-btn:hover,
[data-skin="basic"] .command-dock-btn.is-active,
[data-skin="basic"] .command-dock-search:hover {
    background: var(--btn-bg) !important;
    color: var(--btn-fg) !important;
}

/* Tip oscuro (contrasta con el botón activo blanco) */
[data-skin="basic"] .command-dock-btn .dock-tip {
    background: #141414 !important;
    color: #f5f5f5 !important;
    border: 1px solid #2a2a2a !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55) !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em !important;
}

[data-skin="basic"] .command-dock-btn .dock-tip::after {
    border-left-color: #2a2a2a !important;
}

[data-skin="basic"] .command-dock-btn .dock-tip::before {
    border-left-color: #141414 !important;
}

/* Command palette */
[data-skin="basic"] .command-palette-item i {
    color: var(--text-light) !important;
}

[data-skin="basic"] .command-palette-item:hover,
[data-skin="basic"] .command-palette-item.is-selected {
    background: color-mix(in srgb, var(--text-color) 10%, transparent) !important;
    color: var(--text-color) !important;
}

[data-skin="basic"] .command-palette-item:hover i,
[data-skin="basic"] .command-palette-item.is-selected i {
    color: var(--text-color) !important;
}

/* Scroll progress sin glow rojo */
[data-skin="basic"] .scroll-progress {
    background: var(--text-color) !important;
    box-shadow: none !important;
}

/* Logo PNG rojo → monocromo claro */
[data-skin="basic"] header .logo img,
[data-skin="basic"] .logo img {
    filter: grayscale(1) brightness(2.2) contrast(1.05);
}

/* Mapa experiencia */
[data-skin="basic"] .exp-map-area path,
[data-skin="basic"] .exp-map-area .exp-map-region {
    fill: color-mix(in srgb, var(--text-color) 10%, transparent) !important;
    stroke: color-mix(in srgb, var(--text-color) 22%, transparent) !important;
}

[data-skin="basic"] .exp-map-area .exp-map-region--active {
    fill: color-mix(in srgb, var(--text-color) 18%, transparent) !important;
}

[data-skin="basic"] .exp-map-area .exp-map-region--active:hover {
    fill: color-mix(in srgb, var(--text-color) 26%, transparent) !important;
}

[data-skin="basic"] .exp-map-area .exp-map-region.is-selected {
    fill: color-mix(in srgb, var(--text-color) 32%, transparent) !important;
    stroke: var(--text-color) !important;
}

[data-skin="basic"] .exp-map-area .is-active,
[data-skin="basic"] .exp-map-area path.is-active {
    fill: color-mix(in srgb, var(--text-color) 28%, transparent) !important;
    stroke: var(--text-color) !important;
}

[data-skin="basic"] .exp-map-area .exp-map-marker-circle {
    fill: var(--btn-bg) !important;
    stroke: color-mix(in srgb, var(--btn-bg) 70%, #666) !important;
}

[data-skin="basic"] .exp-map-area .exp-map-marker-icon {
    color: var(--btn-fg) !important;
}

[data-skin="basic"] .exp-map-area .exp-map-cluster-bg,
[data-skin="basic"] .exp-map-area .exp-map-cluster:hover .exp-map-cluster-bg,
[data-skin="basic"] .exp-map-area .exp-map-cluster:focus-visible .exp-map-cluster-bg {
    fill: var(--btn-bg) !important;
    stroke: var(--border-color) !important;
}

[data-skin="basic"] .exp-map-area .exp-map-cluster-ring {
    fill: color-mix(in srgb, var(--text-color) 18%, transparent) !important;
}

[data-skin="basic"] .exp-map-area .exp-map-cluster-count,
[data-skin="basic"] .exp-map-area .exp-map-cluster:hover .exp-map-cluster-count {
    fill: var(--btn-fg) !important;
}

/* Controles mapa / listas con rojo residual */
[data-skin="basic"] .exp-view-toggle button.is-active,
[data-skin="basic"] .exp-view-btn.is-active,
[data-skin="basic"] .exp-list-item.is-active,
[data-skin="basic"] .exp-chip.is-active {
    background: var(--btn-bg) !important;
    color: var(--btn-fg) !important;
    border-color: var(--btn-bg) !important;
}

[data-skin="basic"] .page-experiencia .exp-list-panel::-webkit-scrollbar-thumb,
[data-skin="basic"] .page-experiencia .exp-map-panel::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-color) 35%, transparent) !important;
}

/* Launch / badges / terminal prompt */
[data-skin="basic"] .hero-terminal-body .prompt,
[data-skin="basic"] .terminal-cursor {
    color: var(--text-light) !important;
}

[data-skin="basic"] .hero-terminal-bar .dot:nth-child(1) {
    background: #737373 !important;
}

/* Skill items / hero skills icons */
[data-skin="basic"] .hero-skills h3 i,
[data-skin="basic"] .skill-item i {
    color: var(--text-color) !important;
}

/* project-new / featured borders */
[data-skin="basic"] .project-card--featured,
[data-skin="basic"] .launch-card {
    border-color: var(--border-color) !important;
}

/* Language / theme buttons icons visibles */
[data-skin="basic"] .theme-toggle-btn i,
[data-skin="basic"] .nav-search-btn i,
[data-skin="basic"] .language-btn i,
[data-skin="basic"] .command-dock-btn i,
[data-skin="basic"] .command-dock-search i {
    color: inherit !important;
}

[data-skin="basic"] .nav-actions {
    background: var(--background-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: none !important;
}

[data-skin="basic"] .nav-search-btn,
[data-skin="basic"] .nav-actions .theme-toggle-btn {
    background: var(--background-section) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

[data-skin="basic"] .nav-search-btn:hover,
[data-skin="basic"] .nav-actions .theme-toggle-btn:hover {
    background: var(--btn-bg) !important;
    color: var(--btn-fg) !important;
}

[data-skin="basic"] .command-dock-search {
    background: var(--background-section) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
    box-shadow: none !important;
}

[data-skin="basic"] .command-dock-search:hover {
    background: var(--btn-bg) !important;
    border-color: var(--btn-bg) !important;
    color: var(--btn-fg) !important;
    box-shadow: none !important;
}

[data-skin="basic"] .command-dock-search:hover .command-dock-kbd-label {
    color: color-mix(in srgb, var(--btn-fg) 70%, transparent) !important;
}

/* Botón Lista/Mapa: primary blanco + texto #fff = invisible → corregir */
[data-skin="basic"] .page-experiencia .exp-view-mode-btn {
    color: var(--text-color) !important;
    background: var(--background-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: none !important;
}

[data-skin="basic"] .page-experiencia .exp-view-mode-btn:hover,
[data-skin="basic"] .page-experiencia .exp-view-mode-btn:focus-visible,
[data-skin="basic"] .page-experiencia .exp-view-mode-btn[aria-pressed="true"] {
    background: var(--btn-bg) !important;
    color: var(--btn-fg) !important;
    border-color: var(--btn-bg) !important;
}

[data-skin="basic"] #mobile-menu .mobile-menu-nav a.is-current,
[data-skin="basic"] #mobile-menu .mobile-menu-nav a.is-active {
    background: color-mix(in srgb, var(--text-color) 10%, transparent) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

[data-skin="basic"] #mobile-menu .mobile-menu-nav a.is-current i,
[data-skin="basic"] #mobile-menu .mobile-menu-nav a.is-active i {
    background: var(--btn-bg) !important;
    color: var(--btn-fg) !important;
}

[data-skin="basic"] .command-palette {
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45) !important;
}

[data-skin="basic"] .timeline-item.job.is-active::before,
[data-skin="basic"] .timeline-item::before {
    box-shadow: none !important;
    background: var(--btn-bg) !important;
    border-color: var(--border-color) !important;
}