/* Laboratorios IANIK — site styles (compartido) */

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

:root {
  --surface: #0e1322;
  --surface-container-lowest: #090e1c;
  --surface-container-low: #161b2b;
  --surface-container: #1a1f2f;
  --surface-container-high: #25293a;
  --surface-container-highest: #2f3445;
  --surface-stroke: #334155;
  --on-surface: #dee1f7;
  --on-surface-variant: #bdc8d1;
  --text-primary: #f8fafc;
  --text-muted: #bdc8d1; /* bumped from #94a3b8 to pass WCAG AA on body small text */
  --text-faint: #94a3b8; /* used only for 12px+ or decorative */
  --primary: #83cfff;
  --primary-container: #00a8e8;
  --on-primary-container: #00344b;
  --outline: #87929b;
  --signal-on-air: #ff3b30;
  --signal-safe: #34c759;
  --signal-peak: #ffcc00;
}

body {
  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
  background: #0e1322;
  color: #dee1f7;
}

.font-headline { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
.font-data { font-family: 'JetBrains Mono', ui-monospace, monospace; }

.scanline {
  background-image:
    linear-gradient(rgba(51,65,85,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51,65,85,0.08) 1px, transparent 1px);
  background-size: 40px 40px;
}

.label-caps {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
}

.nav-link {
  color: #bdc8d1;
  transition: color .15s ease;
  position: relative;
  padding: 4px 0;
}
.nav-link:hover { color: #f8fafc; }

.nav-link.nav-active { color: #f8fafc; }
.nav-link.nav-active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background: #00a8e8;
  box-shadow: 0 0 8px rgba(0, 168, 232, 0.6);
}

/* Premium Technical Cards */
.product-card {
  background: #1a1f2f;
  border: 1px solid #334155;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}
.product-card:hover {
  border-color: #00a8e8;
  background: #161b2b;
  transform: translateY(-5px);
  box-shadow: 0 0 25px rgba(0, 168, 232, 0.12);
}
.product-card img {
  transition: filter 0.35s ease, transform 0.35s ease;
}
.product-card:hover img { filter: none; }

.data-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: .09em;
  color: #83cfff;
  background: rgba(0, 0, 0, 0.55);
  padding: 1px 7px;
  border-radius: 2px;
}

.premium-btn {
  background: #00a8e8;
  color: #00344b;
  font-weight: 700;
  letter-spacing: .08em;
  transition: all .15s ease;
}
.premium-btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 0 1px rgba(0, 168, 232, 0.3);
}

.ghost-btn {
  border: 1px solid #334155;
  transition: all .15s ease;
}
.ghost-btn:hover {
  background: #25293a;
  border-color: #4a5568;
}

.tech-surface {
  background: #1a1f2f;
  border: 1px solid #334155;
}
.tech-surface-2 {
  background: #161b2b;
  border: 1px solid #334155;
}

.brochure-card {
  transition: transform .2s cubic-bezier(.4,0,.2,1), border-color .2s ease;
}
.brochure-card:hover {
  transform: translateY(-2px);
  border-color: #00a8e8;
}

/* Focus rings — visible everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid #00a8e8;
  outline-offset: 3px;
  border-radius: 2px;
}
input:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 1px #00a8e8;
}

/* Scroll progress */
#scroll-progress {
  position: fixed;
  top: 64px;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, #00a8e8, #83cfff);
  z-index: 70;
  transition: width .08s linear;
  box-shadow: 0 0 6px rgba(0, 168, 232, 0.5);
}

/* Mobile menu */
#mobile-menu.open { display: block; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .animate-pulse { animation: none !important; }
}

/* Scrollbar (subtle) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0e1322; }
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 5px;
  border: 2px solid #0e1322;
}
::-webkit-scrollbar-thumb:hover { background: #00a8e8; }

/* Selection */
::selection {
  background: rgba(0, 168, 232, 0.35);
  color: #f8fafc;
}

/* ===== Print stylesheet — fichas de producto imprimibles ===== */
@media print {
  /* Reset total: fondo blanco, texto negro */
  * {
    background: transparent !important;
    color: #000 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    filter: none !important;
  }
  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
    line-height: 1.4;
  }

  /* Ocultar elementos no impresibles */
  #site-nav, #site-footer, #scroll-progress,
  #compare-bar, #mobile-menu, #menu-btn,
  .scanline, [data-marquee], .parallax-bg, .parallax-hero-img,
  .premium-btn, .ghost-btn, [data-email-copy],
  button, .compare-cb, .zoom-lens, .zoom-result,
  form, .lightbox-overlay, .lightbox-close,
  nav[aria-label="Migas"], nav[aria-label="Índice de provincias"] {
    display: none !important;
  }

  /* Imágenes de producto en grayscale para ahorrar tinta */
  img, picture {
    filter: grayscale(100%) !important;
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  /* Diagrama SVG: invertir colores para fondo blanco */
  svg, svg * {
    fill: #fff !important;
    stroke: #000 !important;
    color: #000 !important;
  }
  svg text, svg text * {
    fill: #000 !important;
  }

  /* Layout: una columna, sin grid complicado */
  .grid, [class*="grid-cols"] {
    display: block !important;
  }
  .md\:grid-cols-12, .lg\:grid-cols-12, .lg\:grid-cols-7, .lg\:col-span-7, .lg\:col-span-5 {
    display: block !important;
    width: 100% !important;
  }

  /* Bordes sutiles */
  .tech-surface, .product-card {
    border: 1px solid #999 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Espaciado vertical más compacto */
  section { padding: 8pt 0 !important; }
  header { padding: 0 0 8pt 0 !important; }

  /* URLs de links impresos después del texto del link */
  a[href^="http"]:after, a[href^="../"]:after, a[href^="manuales-pdf/"]:after {
    content: " ⟨" attr(href) "⟩";
    font-size: 9pt;
    color: #555 !important;
  }
  a[href^="#"]:after, a[href^="mailto:"]:after {
    content: "" !important;
  }

  /* Forzar colores de links */
  a { color: #000 !important; text-decoration: underline; }

  /* Headlines más visibles */
  h1, h2, h3 { font-weight: 700 !important; page-break-after: avoid; }
  h1 { font-size: 20pt; }
  h2 { font-size: 16pt; }

  /* Evitar page breaks dentro de cards/items */
  .product-card, details, .tech-surface, dl, tr {
    page-break-inside: avoid;
  }

  /* Page break antes de ciertas secciones */
  section[id="timeline"], section[id="faq"], section[id="contacto"] {
    page-break-before: always;
  }

  /* Etiquetas mono en gris oscuro */
  .label-caps, .font-data, [class*="font-data"] {
    font-family: 'Courier New', monospace !important;
    color: #333 !important;
  }

  /* Forzar colores de los data-tags */
  .data-tag {
    border: 1px solid #999 !important;
    color: #000 !important;
    background: #eee !important;
  }
}

/* ===== Android/Chrome responsive fix ===== */
* { box-sizing: border-box; }

img, video, picture, source { max-width: 100% !important; height: auto !important; }

.producto, [class*="producto"], .contenedor-productos {
  width: 100% !important;
  max-width: 100% !important;
}

.producto {
  flex: 1 1 100% !important;
  width: 100% !important;
  padding: 15px;
}

@media (min-width: 768px) {
  .producto {
    flex: 1 1 45% !important;
  }
}

/* Prevenir overflow horizontal */
html, body { overflow-x: hidden; }
body { width: 100%; margin: 0; padding: 0; }