/* =====================================================================
   EGA TROQUELADOS DE ALTA PRECISIÓN - TEMA GRIS CLARO Y METAL INDUSTRIAL
   Paleta: Gris Acero / Zinc / Aluminio Cepillado y Verde Industrial
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* Verde Industrial EGA */
  --ega-green: #00C853;
  --ega-green-hover: #00B248;
  --ega-green-dark: #047857;
  --ega-green-light: #69F0AE;
  --ega-green-dim: rgba(0, 200, 83, 0.10);
  --ega-green-border: rgba(0, 200, 83, 0.35);

  /* Grises Metálicos / Acero / Aluminio / Chapa Troquelada */
  --metal-bg: #F4F6F9;
  --metal-card: #FFFFFF;
  --metal-plate: #EEF2F6;
  --metal-border: #D8DFE8;
  --metal-border-focus: #00C853;
  
  /* Textos y Contraste Industrial */
  --text-primary: #0F172A;     /* Grafito casi negro */
  --text-secondary: #334155;   /* Gris acero oscuro */
  --text-muted: #64748B;       /* Gris medio técnico */

  --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* Base resets */
html {
  scroll-behavior: smooth;
  font-family: var(--font-body);
  background-color: var(--metal-bg);
  color: var(--text-secondary);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-primary);
}

.font-mono-tech {
  font-family: var(--font-mono);
}

/* Custom Scrollbar Metálico */
::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  background: #E2E8F0;
}
::-webkit-scrollbar-thumb {
  background: #94A3B8;
  border-radius: 4px;
  border: 2px solid #E2E8F0;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ega-green);
}

/* Fondo de Cuadrícula Técnica / Plano de Troquelería (Blueprint Gris Claro) */
.bg-metal-grid {
  background-color: #F4F6F9;
  background-image: 
    linear-gradient(rgba(0, 200, 83, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 200, 83, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
}

/* Tarjeta Metálica Industrial (Chapa de Acero / Aluminio Cepillado) */
.ega-card {
  background: #FFFFFF;
  border: 1px solid var(--metal-border);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.ega-card:hover {
  border-color: var(--ega-green);
  box-shadow: 0 12px 28px -6px rgba(0, 200, 83, 0.18), 0 4px 8px rgba(15, 23, 42, 0.05);
  transform: translateY(-3px);
}

/* Placa Técnica Destacada */
.ega-card-highlight {
  background: linear-gradient(145deg, #FFFFFF 0%, #EEF2F6 100%);
  border: 1.5px solid #CBD5E1;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08);
}

/* Efecto de Chapa de Metal */
.metal-plate-texture {
  background: linear-gradient(180deg, #F8FAFC 0%, #EDF2F7 100%);
  border: 1px solid #D1D5DB;
}

/* Texto Degradado Industrial */
.text-gradient-ega {
  background: linear-gradient(120deg, #0F172A 20%, #00C853 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Esquinas de Precisión (Miras de Calibración / Micrómetro) */
.crosshair-corner {
  position: relative;
}
.crosshair-corner::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  width: 14px;
  height: 14px;
  border-top: 3px solid var(--ega-green);
  border-left: 3px solid var(--ega-green);
}
.crosshair-corner::after {
  content: '';
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-bottom: 3px solid var(--ega-green);
  border-right: 3px solid var(--ega-green);
}

/* Zona de Carga de Planos RFQ */
.rfq-dropzone {
  border: 2px dashed rgba(0, 200, 83, 0.5);
  background: #F8FAFC;
  transition: all 0.25s ease;
}

.rfq-dropzone:hover, .rfq-dropzone.drag-active {
  border-color: var(--ega-green);
  background: rgba(0, 200, 83, 0.06);
}

/* Botón Flotante de WhatsApp */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 90;
  background-color: #25D366;
  color: white;
  border-radius: 50%;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.whatsapp-float:hover {
  transform: scale(1.1) translateY(-3px);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.6);
}

@media (max-width: 640px) {
  .whatsapp-float {
    bottom: 18px;
    right: 18px;
    width: 52px;
    height: 52px;
  }
}

/* Modales */
.modal-overlay {
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.modal-overlay.hidden-modal {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.modal-overlay.active-modal {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

/* Material Image Showcase & Gallery */
.material-img-container {
  position: relative;
  overflow: hidden;
  background: #F8FAFC;
  display: flex;
  align-items: center;
  justify-content: center;
}

.material-img-container img {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.material-img-container:hover img {
  transform: scale(1.06);
}

/* Quick scroll horizontal strip */
.photo-strip-scroll {
  scrollbar-width: thin;
  scrollbar-color: #94A3B8 #EEF2F6;
}
.photo-strip-scroll::-webkit-scrollbar {
  height: 6px;
}
.photo-strip-scroll::-webkit-scrollbar-track {
  background: #EEF2F6;
}
.photo-strip-scroll::-webkit-scrollbar-thumb {
  background: #94A3B8;
  border-radius: 3px;
}
.photo-strip-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--ega-green);
}

/* Lightbox Image Preview */
#lightboxModal.active-modal {
  display: flex;
}

/* Desplazamiento horizontal de maquinaria en móvil */
@media (max-width: 767px) {
  .machinery-scroll {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #10B981 #EEF2F6;
    padding-left: 2px;
    padding-right: 16px;
  }
  .machinery-scroll::-webkit-scrollbar {
    height: 6px;
  }
  .machinery-scroll::-webkit-scrollbar-track {
    background: #EEF2F6;
    border-radius: 4px;
  }
  .machinery-scroll::-webkit-scrollbar-thumb {
    background: #10B981;
    border-radius: 4px;
  }
}