/*
================================================
ACROCODE.DEV - TEMA "TRON COLOR"
Se carga solo cuando Admin → Ajustes → Sitio → Tema del sitio = Tron Color
(header.php agrega la clase theme-tron-color en <html>). Con Tron Cyan este
archivo ni se descarga.

REGLA DE COLOR (3-oct-2026): UN SOLO ACENTO. Todo lo del sistema es cian: títulos, botones, íconos,
cifras, barras, roadmaps, numeración. No hay degradados de varios colores ni un color por tarjeta.
REGLA ANTERIOR (ya no aplica salvo lo que se indica abajo):
  - El CIAN es el color del sistema: mini títulos ("// Clientes"), títulos, enlaces,
    botones, cifras, bordes, estados activos, línea del menú y del pie. Siempre cian.
  - El color extra solo aparece donde SIGNIFICA algo:
      · las redes sociales (un color por plataforma),
      · las categorías (cada una con su matiz, en el blog),
      · estados: verde = disponible / correcto, ámbar = aviso,
      · la escena espacial del fondo (space-bg.js).
  - Nunca degradados de varios colores, ni un color distinto por sección o por tarjeta
    en listas que no tienen un significado propio.
La técnica: un elemento redefine --cyan-primary/-bright/-deep/-ice en sí mismo y lo que
ya los usa cambia de color sin tocar el CSS base.
================================================
*/

:root.theme-tron-color {
  --tc-cyan:   #00d9ff;
  --tc-blue:   #4f8bff;
  --tc-green:  #86f23c;
  --tc-yellow: #ffd93b;
  --tc-pink:   #ff4dc4;
  --tc-violet: #b06bff;
  --tc: var(--tc-cyan); /* color por defecto de los tiles de redes; cada plataforma lo cambia más abajo */
}

/* ---------- Acentos reutilizables (clase: class="tc-pink") ---------- */
.theme-tron-color .tc-blue   { --cyan-primary: #4f8bff; --cyan-bright: #7aa8ff; --cyan-deep: #2f5fc4; --cyan-ice: #bcd1ff; --tc: #4f8bff; }
.theme-tron-color .tc-green  { --cyan-primary: #86f23c; --cyan-bright: #a9ff6e; --cyan-deep: #4c9a1d; --cyan-ice: #d6ffb2; --tc: #86f23c; }
.theme-tron-color .tc-yellow { --cyan-primary: #ffd93b; --cyan-bright: #ffe77a; --cyan-deep: #b3920f; --cyan-ice: #fff2b3; --tc: #ffd93b; }
.theme-tron-color .tc-pink   { --cyan-primary: #ff4dc4; --cyan-bright: #ff80d6; --cyan-deep: #b02a8b; --cyan-ice: #ffc4ec; --tc: #ff4dc4; }
.theme-tron-color .tc-violet { --cyan-primary: #b06bff; --cyan-bright: #c99cff; --cyan-deep: #6d3fb5; --cyan-ice: #e5d2ff; --tc: #b06bff; }

/* ---------- Servicios y pasos del proceso: solo el icono / número lleva color ---------- */
/* Un acento por elemento (azul, verde, amarillo, rosa); la tarjeta, su borde y sus textos siguen en cian. */
.theme-tron-color :is(.service-icon, .svc-card-icon) {
  color: var(--acc, var(--tc-cyan));
  border: 1px solid color-mix(in srgb, var(--acc, var(--tc-cyan)) 45%, transparent);
  background: color-mix(in srgb, var(--acc, var(--tc-cyan)) 12%, transparent);
  text-shadow: none;
}
.theme-tron-color .svc-card .svc-card-icon { color: var(--acc, var(--tc-cyan)); }
.theme-tron-color .process-step .step-number { color: var(--acc, var(--tc-cyan)); text-shadow: none; }

/* ---------- Redes sociales: tiles neón, un color de la paleta por red ---------- */
.theme-tron-color .site-footer .footer-socials a[data-platform],
.theme-tron-color .client-modal .client-modal-social[data-platform],
.theme-tron-color .clarity-about .social-grid a[data-platform],
.theme-tron-color .post-share-actions .post-share-link[data-platform] {
  --social-brand: var(--tc);
  border-color: color-mix(in srgb, var(--tc) 62%, transparent);
  background: linear-gradient(150deg, color-mix(in srgb, var(--tc) 24%, #09141d), #08121b 78%);
  color: color-mix(in srgb, var(--tc) 88%, #fff);
  box-shadow: 0 0 12px color-mix(in srgb, var(--tc) 22%, transparent), inset 0 0 10px color-mix(in srgb, var(--tc) 12%, transparent);
  text-shadow: 0 0 8px color-mix(in srgb, var(--tc) 70%, transparent);
  transition: color .18s, background .18s, border-color .18s, box-shadow .18s, transform .18s;
}
.theme-tron-color .site-footer .footer-socials a[data-platform]:hover,
.theme-tron-color .client-modal .client-modal-social[data-platform]:hover,
.theme-tron-color .clarity-about .social-grid a[data-platform]:hover,
.theme-tron-color .post-share-actions .post-share-link[data-platform]:hover {
  border-color: var(--tc);
  background: linear-gradient(150deg, color-mix(in srgb, var(--tc) 40%, #0b1822), color-mix(in srgb, var(--tc) 12%, #08121b) 85%);
  color: #fff;
  box-shadow: 0 0 20px color-mix(in srgb, var(--tc) 55%, transparent), inset 0 0 12px color-mix(in srgb, var(--tc) 25%, transparent);
  transform: translateY(-2px);
}

/* Color por plataforma (se reparte entre los cinco de la paleta) */
.theme-tron-color [data-platform="github"]    { --tc: var(--tc-cyan); }
.theme-tron-color [data-platform="linkedin"]  { --tc: var(--tc-blue); }
.theme-tron-color [data-platform="medium"]    { --tc: var(--tc-yellow); }
.theme-tron-color [data-platform="youtube"]   { --tc: var(--tc-pink); }
.theme-tron-color [data-platform="twitch"]    { --tc: var(--tc-violet); }
.theme-tron-color [data-platform="spotify"]   { --tc: var(--tc-green); }
.theme-tron-color [data-platform="x"]         { --tc: #cdefff; }
.theme-tron-color [data-platform="threads"]   { --tc: var(--tc-yellow); }
.theme-tron-color [data-platform="facebook"]  { --tc: var(--tc-blue); }
.theme-tron-color [data-platform="facebook messenger"] { --tc: var(--tc-blue); }
.theme-tron-color [data-platform="instagram"] { --tc: var(--tc-pink); }
.theme-tron-color [data-platform="tiktok"]    { --tc: var(--tc-cyan); }
.theme-tron-color [data-platform="pinterest"] { --tc: var(--tc-pink); }
.theme-tron-color [data-platform="discord"]   { --tc: var(--tc-violet); }
.theme-tron-color [data-platform="linktree"]  { --tc: var(--tc-green); }
.theme-tron-color [data-platform="rss"]       { --tc: var(--tc-yellow); }
.theme-tron-color [data-platform="email"]     { --tc: var(--tc-cyan); }
.theme-tron-color [data-platform="whatsapp"]  { --tc: var(--tc-green); }
.theme-tron-color [data-platform="telegram"]  { --tc: var(--tc-blue); }
.theme-tron-color [data-platform="snapchat"]  { --tc: var(--tc-yellow); }
.theme-tron-color [data-platform="vimeo"]     { --tc: var(--tc-cyan); }
.theme-tron-color [data-platform="dribbble"]  { --tc: var(--tc-pink); }
.theme-tron-color [data-platform="behance"]   { --tc: var(--tc-blue); }
.theme-tron-color [data-platform="gitlab"]    { --tc: var(--tc-yellow); }

/* Compartir un artículo: mismos colores para copiar enlace, etc. */
.theme-tron-color .post-share-actions .post-share-link { --share-brand: var(--tc, var(--tc-cyan)); }
/* Compartir usa los mismos tiles neón del footer: un color por red; copiar enlace en cian */
.theme-tron-color [data-platform="copy"] { --tc: var(--tc-cyan); }
.theme-tron-color .post-share-actions .post-share-link[data-platform] i { color: inherit; }
.theme-tron-color .post-share-actions .post-share-link[data-platform]:focus-visible { outline-color: var(--tc); }
.theme-tron-color .post-share-actions .post-share-link[data-platform]:has(.fa-check) {
  --tc: var(--tc-green); color: #fff; border-color: var(--tc-green);
  background: linear-gradient(150deg, color-mix(in srgb, var(--tc-green) 36%, #0b1822), color-mix(in srgb, var(--tc-green) 12%, #08121b) 85%);
}



/* ---------- Detalles ---------- */
.theme-tron-color ::selection { background: color-mix(in srgb, var(--tc-cyan) 35%, #000); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .theme-tron-color .site-footer .footer-socials a[data-platform]:hover,
  .theme-tron-color .client-modal .client-modal-social[data-platform]:hover,
  .theme-tron-color .clarity-about .social-grid a[data-platform]:hover,
  .theme-tron-color .post-share-actions .post-share-link[data-platform]:hover { transform: none; }
}


/* ================================================================
   COLOR CON MEDIDA (ajuste del 2-oct-2026)
   Barras de color, roadmaps con un color por paso, y color en íconos y
   numeración. Los títulos, mini títulos y textos siguen siempre en cian/blanco.
   ================================================================ */
:root.theme-tron-color {
  --tc-spectrum: linear-gradient(90deg, transparent 0%, var(--tc-cyan) 22%, var(--tc-cyan) 78%, transparent 100%);
}

/* ---------- Barras de color: progreso de lectura, línea del menú y línea del pie ---------- */
.theme-tron-color .fx-progress { background: linear-gradient(90deg, var(--tc-cyan), #7aeaff); }
.theme-tron-color .site-navigation::after { background: var(--tc-spectrum); opacity: .55; }
.theme-tron-color footer::before { background: var(--tc-spectrum); opacity: .6; }

/* ---------- Roadmaps (Cómo trabajamos, Cómo trabajo, Qué pasa después): un color por paso ---------- */
.theme-tron-color .roadmap-fill { background: linear-gradient(90deg, var(--tc-cyan), #7aeaff); }
.theme-tron-color .roadmap--vertical .roadmap-fill { background: linear-gradient(180deg, var(--tc-cyan), #7aeaff); }
.theme-tron-color .roadmap.is-done .roadmap-step {
  border-color: color-mix(in srgb, var(--cyan-primary) 55%, #233641);
  box-shadow: 0 0 22px color-mix(in srgb, var(--cyan-primary) 14%, transparent);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--cyan-primary) 9%, transparent), transparent 55%);
}
.theme-tron-color .roadmap.is-done .roadmap-node {
  border-color: var(--cyan-primary); background: var(--cyan-primary);
  box-shadow: 0 0 14px color-mix(in srgb, var(--cyan-primary) 70%, transparent);
}
.theme-tron-color .roadmap-step :is(.step-number, .svc-step-num) { color: var(--cyan-primary); }

/* ---------- Íconos y numeración con un toque de color (títulos siempre cian) ---------- */
.theme-tron-color .clarity-faq .faq-num { font-weight: 700; }





/* ---------- Cifras de la portada: cada una con su color (cian, verde, rosa) ---------- */
.theme-tron-color .hero-stats .stat { box-shadow: inset 0 2px 0 color-mix(in srgb, var(--tc-cyan) 70%, transparent); }