/* ============================================================
   Yoctovision — Tema: Rojo Señal
   Negro, blanco y rojo señal. Estética técnica y sobria:
   esquinas rectas, sin brillos, líneas finas y acentos rojos
   puntuales (piloto de grabación, barras bajo los títulos).
   Se carga después de css/styles.css; theme-signal-light.css lo ajusta a fondo claro.
   ============================================================ */

:root {
  --bg: #0a0a0a;
  --bg-alt: #111111;
  --panel: #151515;
  --border: #343434;
  --border-soft: #222222;
  --text: #ffffff;
  --text-muted: #b4b4b4;
  --text-faint: #7c7c7c;
  --accent: #ff3b3b;
  --accent-strong: #ff5c5c;
  --accent-ink: #0a0a0a;
  --green: #ffffff;
  --panel-hover: #1a1a1a;
  --bg-footer: #050505;
  --accent-soft: rgba(255, 59, 59, 0.08);
  --accent-line: rgba(255, 59, 59, 0.35);
  --radius: 2px;
  --vp-accent: #ff3b3b;
}

/* Cabecera negra */
.site-header { background: rgba(10, 10, 10, 0.88); }
.site-header.scrolled { background: rgba(10, 10, 10, 0.97); }
@media (max-width: 820px) {
  .site-nav { background: rgba(10, 10, 10, 0.98); }
}

/* Botones rectos: rojo sólido con texto blanco */
.btn { border-radius: var(--radius); }
.btn:not(.btn-ghost) { background: #d9141c; color: #ffffff; }
.btn:not(.btn-ghost):hover { background: #f01f27; }
.btn-ghost:hover { background: transparent; border-color: #ffffff; }

/* Piloto rojo delante de los antetítulos */
.kicker::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 10px;
  vertical-align: 1px;
  background: var(--accent);
}

/* Barra roja bajo los títulos de sección */
.section-head h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 18px;
  background: var(--accent);
}

/* Esquinas rectas en todos los componentes */
.card-icon,
.chip-cloud li,
.app-tags li,
.field input,
.field textarea,
.hero-photo { border-radius: var(--radius); }
.app-card { border-radius: 0; }

/* Tarjetas: filete rojo superior al pasar el ratón */
.card:hover { border-color: var(--border); box-shadow: inset 0 2px 0 var(--accent); }
.info-panel { border-top: 2px solid var(--accent); }

/* Banda de maquinaria con filete rojo */
.machine-strip { border-bottom: 2px solid #e3141c; }