/* ===========================
   CharlsDev - styles.css
   Efectos elegantes y sutiles
   =========================== */

/* Ajuste por navbar fija */
body{ padding-top: 70px; }

/* ---------------------------
   Fondo animado "red de nodos"
   --------------------------- */

/* Modo claro */
html[data-bs-theme="light"] body {
  background:
    radial-gradient(circle at center, #f8f9fa, #e9ecef);
  color: var(--bs-body-color);
  overflow-x: hidden;
}

/* Modo oscuro */
html[data-bs-theme="dark"] body {
  background:
    radial-gradient(circle at 30% 20%, #0d1117 0%, #05070a 60%),
    radial-gradient(circle at 80% 10%, rgba(13,110,253,.10) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(32,201,151,.08) 0%, transparent 50%);
  color: var(--bs-body-color);
  overflow-x: hidden;
}

/* Patrón de puntos en movimiento (ligero) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle 1.6px, rgba(13,110,253,0.5) 1.6px, transparent 2px);
  background-size: 60px 60px;
  opacity: 0.15;
  animation: gridmove 26s linear infinite;
  z-index: -1;
  pointer-events: none;
}

/* Atenuar en modo claro para mantener limpieza */
html[data-bs-theme="light"] body::before{
  opacity: .08;
}

@keyframes gridmove{
  from { background-position: 0 0; }
  to   { background-position: 60px 60px; }
}

/* --------------
   Hero gradient
   -------------- */
.hero-gradient{
  position: relative;
  background:
    radial-gradient(1200px 700px at 10% 10%, rgba(13,110,253,.24), transparent 55%),
    radial-gradient(900px 550px  at 90% 30%, rgba(32,201,151,.22), transparent 55%);
}
html[data-bs-theme="dark"] .hero-gradient{
  background:
    radial-gradient(1200px 700px at 10% 10%, rgba(13,110,253,.22), transparent 55%),
    radial-gradient(900px 550px  at 90% 30%, rgba(111,66,193,.20), transparent 55%);
}

/* Blur sutil para navbar al hacer scroll */
.navbar{
  backdrop-filter: saturate(140%) blur(6px);
}

/* -------------------------
   Tarjetas con hover "tech"
   ------------------------- */
.card-hover{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  border: 1px solid var(--bs-border-color);
}
.card-hover:hover{
  transform: translateY(-5px) scale(1.01);
  border-color: rgba(13,110,253,.45);
  box-shadow: 0 0.8rem 1.6rem rgba(13,110,253,.18);
}
html[data-bs-theme="dark"] .card-hover:hover{
  box-shadow: 0 0.8rem 1.6rem rgba(13,110,253,.28);
}

/* ----------------------------
   Títulos con degradado animado
   ---------------------------- */
h1, h2, h3, .display-5{
  /* tipografía tech (Oxanium) y degradado animado */
  font-family: 'Oxanium', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .3px;

  background: linear-gradient(90deg, #0d6efd, #20c997, #6f42c1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 300% 300%;
  animation: shine 9s linear infinite;
}
@keyframes shine{
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

/* -------------------------
   Botón primario con brillo
   ------------------------- */
.btn-primary{
  position: relative;
  overflow: hidden;
  transition: transform .15s ease;
}
.btn-primary:hover{ transform: translateY(-1px); }
.btn-primary::after{
  content: "";
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.35), transparent 60%);
  transform: skewX(-20deg);
  transition: left .65s ease;
}
.btn-primary:hover::after{ left: 130%; }

/* -------------
   Tech badges
   ------------- */
.tech-badge{
  border: 1px solid var(--bs-border-color);
  padding: .5rem .75rem;
  border-radius: 999px;
  background: var(--bs-body-bg);
  box-shadow: 0 .2rem .5rem rgba(0,0,0,.06);
}

/* ----------------
   Sutilezas varias
   ---------------- */

/* Imágenes del portafolio (recorte elegante) */
.card-img-top {
  height: 220px;
  object-fit: cover;
  object-position: center;
}

/* En tarjetas informativas del lateral */
.bg-body-tertiary{
  backdrop-filter: blur(4px);
}

/* Links suaves */
a{ transition: color .15s ease, opacity .15s ease; }
a:hover{ opacity: .9; }

/* Formularios: enfoque con halo leve */
.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.18);
  border-color: rgba(13,110,253,.55);
}

/* Tablas admin (no invasivo) */
.table tr:hover td{
  background-color: rgba(13,110,253,.03);
}
html[data-bs-theme="dark"] .table tr:hover td{
  background-color: rgba(13,110,253,.08);
}

/* Footer minimal */
footer{
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.02));
}
html[data-bs-theme="dark"] footer{
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.03));
}

/* =====================================================
   Brand “tech” con Oxanium + NEÓN y tamaño un poco mayor
   ===================================================== */
:root{
  --brand-glow-1: rgba(13,110,253,.55);   /* azul */
  --brand-glow-2: rgba(111,66,193,.45);   /* violeta */
  --brand-text:   #0d6efd;                /* base en claro */
}

/* Intensifica el glow en oscuro */
html[data-bs-theme="dark"]{
  --brand-glow-1: rgba(13,110,253,.90);
  --brand-glow-2: rgba(111,66,193,.80);
  --brand-text:   #e9f2ff;
}

/* Logo/brand de la navbar con vibra cyberpunk */
.navbar-brand.brand-tech{
  font-family: 'Oxanium', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(1.4rem, 2.2vw + .2rem, 2.1rem); /* un poco más grande */
  letter-spacing: .6px;
  text-transform: uppercase;          /* cambia a 'none' si prefieres */
  color: var(--brand-text);
  position: relative;
  transform: translateZ(0);
  transition: text-shadow .25s ease, transform .15s ease, filter .25s ease;
}

/* Neón sutil por defecto (claro) + más intenso en oscuro */
.navbar-brand.brand-tech{
  text-shadow:
    0 0 6px var(--brand-glow-1),
    0 0 14px var(--brand-glow-2);
}

/* Efecto al hover */
.navbar-brand.brand-tech:hover{
  transform: translateY(-1px);
}

/* Subrayado animado multicolor con brillo */
.navbar-brand.brand-tech::after{
  content:"";
  display:block;
  height:3px;
  width:0;
  background: linear-gradient(90deg, #0d6efd, #20c997, #6f42c1, #0d6efd);
  filter: drop-shadow(0 0 6px var(--brand-glow-1)) drop-shadow(0 0 10px var(--brand-glow-2));
  transition: width .28s ease;
  margin-top: .15rem;
  border-radius: 999px;
}
.navbar-brand.brand-tech:hover::after{ width: 100%; }

/* Pulso de neón SOLO en modo oscuro (hover) */
@keyframes neonPulseDark {
  0%, 100% {
    text-shadow:
      0 0 6px  var(--brand-glow-1),
      0 0 14px var(--brand-glow-1),
      0 0 24px var(--brand-glow-2);
  }
  50% {
    text-shadow:
      0 0 10px var(--brand-glow-1),
      0 0 22px var(--brand-glow-1),
      0 0 42px var(--brand-glow-2);
  }
}
html[data-bs-theme="dark"] .navbar-brand.brand-tech:hover{
  animation: neonPulseDark 1.8s ease-in-out infinite;
}