/* ==========================================================================
   LovalTech — Hoja de estilos principal
   --------------------------------------------------------------------------
   La mayoría del diseño se construye con clases de Tailwind (CDN) en el HTML.
   Este archivo contiene:
     1. Variables de color para el modo claro y el modo oscuro (paleta).
     2. Estilos base de <html> y <body>.
     3. Barra de desplazamiento personalizada.
     4. Utilidades propias (.ascii-glow, .grid-lines).
     5. Animaciones del carrusel de proyectos (marquee).
     6. Ayuda para el cambio de tema sin transiciones "a medias".
     7. Terminal "Quick Start": cursor, aparición de líneas y botón ▶.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. PALETA DE COLORES (variables CSS)
   --------------------------------------------------------------------------
   Cada color se guarda como canales "R G B" (sin rgb() ni comas) para que
   Tailwind pueda aplicarles opacidad, por ejemplo: bg-surface-deep/85.
   La configuración de Tailwind en src/js/main.js lee estas variables así:
       "surface-deep": "rgb(var(--surface-deep) / <alpha-value>)"

   - :root          → MODO CLARO (valores por defecto).
   - :root.dark     → MODO OSCURO (se activa cuando <html> tiene la clase "dark").
   El botón sol/luna del navbar (ver main.js) agrega o quita esa clase.
   -------------------------------------------------------------------------- */

/* Modo claro */
:root {
  /* Fondos (de más profundo a más elevado) */
  --surface-deep: 248 250 252;      /* #f8fafc  fondo general de la página   */
  --surface-card: 255 255 255;      /* #ffffff  tarjetas                     */
  --surface-elevated: 241 245 249;  /* #f1f5f9  elementos sobre tarjetas     */

  /* Bordes */
  --border-subtle: 226 232 240;     /* #e2e8f0  bordes por defecto           */
  --border-bright: 203 213 225;     /* #cbd5e1  bordes en hover / destacados */

  /* Acentos de marca */
  --accent-cyan: 0 109 168;         /* #006da8  cian oscurecido: legible sobre blanco */
  --accent-blue: 0 86 194;          /* #0056c2  azul de botones principales  */

  /* Texto */
  --text-primary: 15 23 42;         /* #0f172a  títulos y texto principal    */
  --text-secondary: 71 85 105;      /* #475569  párrafos                     */
  --text-muted: 100 116 139;        /* #64748b  texto de apoyo / comentarios */
  --text-base: 15 23 42;            /* #0f172a  color base de html/body      */

  /* Colores "de terminal" usados como texto de estado (OK, APPROVAL...) */
  --terminal-red: 220 38 38;        /* #dc2626 */
  --terminal-yellow: 180 83 9;      /* #b45309 */
  --terminal-green: 21 128 61;      /* #15803d */

  /* Utilidades del CSS propio */
  --scrollbar-thumb: 203 213 225;   /* #cbd5e1 */
  --grid-line: 100 116 139;         /* #64748b  líneas de la cuadrícula del hero */
  --grid-line-alpha: 0.35;
}

/* Modo oscuro: valores originales del diseño de Stitch */
:root.dark {
  --surface-deep: 3 10 22;          /* #030a16 */
  --surface-card: 5 15 32;          /* #050f20 */
  --surface-elevated: 8 22 46;      /* #08162e */

  --border-subtle: 22 35 56;        /* #162338 */
  --border-bright: 31 54 87;        /* #1f3657 */

  --accent-cyan: 0 204 255;         /* #00ccff */
  --accent-blue: 0 86 194;          /* #0056c2 */

  --text-primary: 248 250 252;      /* #f8fafc */
  --text-secondary: 148 163 184;    /* #94a3b8 */
  --text-muted: 100 116 139;        /* #64748b */
  --text-base: 226 232 240;         /* #e2e8f0 */

  --terminal-red: 255 95 86;        /* #ff5f56 */
  --terminal-yellow: 255 189 46;    /* #ffbd2e */
  --terminal-green: 39 201 63;      /* #27c93f */

  --scrollbar-thumb: 23 38 60;      /* #17263c */
  --grid-line: 26 38 56;            /* #1a2638 */
  --grid-line-alpha: 0.4;
}


/* --------------------------------------------------------------------------
   2. ESTILOS BASE
   Va dentro de @layer base para que las clases de Tailwind del <body>
   (bg-surface-deep, text-text-primary) tengan prioridad sobre estas reglas.
   -------------------------------------------------------------------------- */
@layer base {
  html, body {
    margin: 0;
    padding: 0;
    background-color: rgb(var(--surface-deep));
    color: rgb(var(--text-base));
  }
  /* Evita el efecto "rebote" al llegar al inicio o final del scroll */
  body {
    overscroll-behavior: none;
  }
}


/* --------------------------------------------------------------------------
   3. BARRA DE DESPLAZAMIENTO (Chrome, Edge, Safari)
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgb(var(--surface-deep));
}
::-webkit-scrollbar-thumb {
  background: rgb(var(--scrollbar-thumb));
  border-radius: 3px;
}


/* --------------------------------------------------------------------------
   4. UTILIDADES PROPIAS
   -------------------------------------------------------------------------- */

/* Resplandor cian para texto estilo ASCII (disponible, actualmente sin uso) */
.ascii-glow {
  text-shadow: 0 0 12px rgba(0, 204, 255, 0.45);
}

/* Cuadrícula de fondo del Hero (#hero-section): líneas cada 32px */
.grid-lines {
  background-size: 32px 32px;
  background-image:
    linear-gradient(to right, rgb(var(--grid-line) / var(--grid-line-alpha)) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(var(--grid-line) / var(--grid-line-alpha)) 1px, transparent 1px);
}


/* --------------------------------------------------------------------------
   5. CARRUSEL DE PROYECTOS (#proyectos)
   Desplazamiento infinito de las tarjetas. Cada fila contiene las tarjetas
   repetidas, por eso la animación se mueve el 50% de su ancho.
   -------------------------------------------------------------------------- */
@keyframes marquee-to-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes marquee-to-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Fila 1: hacia la derecha */
.animate-marquee-right {
  animation: marquee-to-right 15s linear infinite;
}
/* Fila 2: hacia la izquierda (la fila 2 está vacía en el HTML por ahora) */
.animate-marquee-left {
  animation: marquee-to-left 15s linear infinite;
}

/* Pausa el carrusel cuando el mouse está encima para poder leer las tarjetas */
.marquee-container:hover .animate-marquee-right,
.marquee-container:hover .animate-marquee-left,
.animate-marquee-right:hover,
.animate-marquee-left:hover {
  animation-play-state: paused;
}


/* --------------------------------------------------------------------------
   6. CAMBIO DE TEMA
   main.js agrega esta clase a <html> durante un instante al cambiar de modo,
   para que todos los colores cambien a la vez (sin que unos elementos se
   animen y otros no).
   -------------------------------------------------------------------------- */
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition: none !important;
}


/* --------------------------------------------------------------------------
   7. TERMINAL "QUICK START" (#proceso)
   main.js escribe las líneas una por una (playCliPanel) usando estas clases.
   -------------------------------------------------------------------------- */

/* Cursor parpadeante que acompaña a la línea que se está escribiendo */
.cli-cursor {
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: rgb(var(--accent-cyan));
  animation: cli-blink 1s steps(1) infinite;
}
@keyframes cli-blink {
  50% {
    opacity: 0;
  }
}

/* Cada línea entra con un leve desvanecido */
.cli-line-enter {
  animation: cli-line-in 0.25s ease-out;
}
@keyframes cli-line-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Botón ▶ estilo Google Colab: círculo con un anillo que "late" para invitar a hacer clic */
.cli-run-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  border: 1px solid rgb(var(--accent-cyan) / 0.6);
  color: rgb(var(--accent-cyan));
  transition: background-color 0.2s, color 0.2s;
}
.cli-run-icon::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgb(var(--accent-cyan));
  animation: cli-pulse 1.6s ease-out infinite;
}
@keyframes cli-pulse {
  from {
    transform: scale(1);
    opacity: 0.7;
  }
  to {
    transform: scale(1.6);
    opacity: 0;
  }
}
.cli-run-btn:hover .cli-run-icon,
.cli-run-btn:focus-visible .cli-run-icon {
  background: rgb(var(--accent-cyan));
  color: rgb(var(--surface-deep));
}

/* Mientras "se ejecuta": anillo girando alrededor del botón, como una celda de Colab */
.cli-run-btn.is-running .cli-run-icon::after {
  inset: -4px;
  border: 2px solid transparent;
  border-top-color: rgb(var(--accent-cyan));
  opacity: 1;
  animation: cli-spin 0.7s linear infinite;
}
@keyframes cli-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Si el sistema pide reducir animaciones, se quitan los efectos en movimiento */
@media (prefers-reduced-motion: reduce) {
  .cli-cursor,
  .cli-line-enter,
  .cli-run-icon::after {
    animation: none;
  }
}