/* ==========================================================================
   GRUPO MAXTER PERU S.R.L. — Sistema de diseño "Dark / Industrial"
   --------------------------------------------------------------------------
   Tailwind resuelve el 90% del maquetado; aquí viven únicamente los tokens
   de marca, los componentes reutilizables y los efectos que Tailwind no
   cubre bien desde utilidades (mallas, gradientes cónicos, animaciones).
   ========================================================================== */

:root {
  /* --- Superficies (escala neutra fría, no negro puro: menos fatiga) --- */
  --mx-950: #070A12;
  --mx-900: #0B0F1A;
  --mx-850: #10162A;
  --mx-800: #151C33;
  --mx-700: #1E2947;
  --mx-600: #2A3862;

  /* --- Marca --- */
  --mx-azul:  #0B1F3A;   /* institucional, hereda del membrete impreso */
  --mx-ambar: #F59E0B;   /* señalética de obra: acento de acción        */
  --mx-ambar-claro: #FBBF24;
  --mx-cian:  #22D3EE;   /* acento tecnológico: TIC y domótica          */
  --mx-verde: #34D399;
  --mx-rojo:  #F87171;

  /* --- Texto --- */
  --mx-txt:   #E8ECF5;
  --mx-txt-2: #9AA6BF;
  --mx-txt-3: #64708C;

  --mx-borde: rgba(148, 163, 184, 0.14);
  --mx-radio: 14px;
}

* { -webkit-font-smoothing: antialiased; }

html { scroll-behavior: smooth; }

/* La cabecera es fija: sin este margen de anclaje, al saltar a una sección
   desde el menú su título queda oculto debajo de la barra. */
section[id], [id^="sim-"], #ficha { scroll-margin-top: 5.5rem; }

body {
  background: var(--mx-950);
  color: var(--mx-txt);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* --- Tipografía de titulares: condensada, tono técnico ------------------ */
.mx-display {
  font-family: 'Barlow Condensed', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.mx-mono { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace; }

/* ==========================================================================
   Fondos y texturas
   ========================================================================== */

/* Malla técnica de plano: refuerza el lenguaje de ingeniería sin ruido. */
.mx-grid-bg {
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.055) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center;
}

/* Halo ámbar/cian detrás del héroe. */
.mx-halo::before {
  content: '';
  position: absolute;
  inset: -30% 0 auto 0;
  height: 620px;
  background:
    radial-gradient(48% 60% at 22% 32%, rgba(245, 158, 11, 0.17), transparent 70%),
    radial-gradient(42% 55% at 78% 20%, rgba(34, 211, 238, 0.13), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.mx-noise {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.032'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Componentes
   ========================================================================== */

.mx-card {
  background: linear-gradient(180deg, rgba(30, 41, 71, 0.55), rgba(11, 15, 26, 0.75));
  border: 1px solid var(--mx-borde);
  border-radius: var(--mx-radio);
  backdrop-filter: blur(10px);
}

.mx-card-hover {
  transition: transform .25s cubic-bezier(.2,.7,.3,1), border-color .25s, box-shadow .25s;
}
.mx-card-hover:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 158, 11, 0.42);
  box-shadow: 0 18px 44px -22px rgba(245, 158, 11, 0.5);
}

/* Botón primario: el CTA de conversión de todo el sitio. */
.mx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.5rem; border-radius: 10px;
  font-weight: 600; font-size: .95rem; line-height: 1;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  cursor: pointer; border: 1px solid transparent; white-space: nowrap;
}
.mx-btn:active { transform: translateY(1px) scale(.995); }
.mx-btn:disabled { opacity: .5; cursor: not-allowed; }

.mx-btn-primary {
  background: linear-gradient(135deg, var(--mx-ambar-claro), var(--mx-ambar));
  color: #1A1206;
  box-shadow: 0 10px 26px -12px rgba(245, 158, 11, .75);
}
.mx-btn-primary:hover { box-shadow: 0 16px 34px -12px rgba(245, 158, 11, .9); }

.mx-btn-ghost {
  background: rgba(148, 163, 184, .07);
  border-color: var(--mx-borde);
  color: var(--mx-txt);
}
.mx-btn-ghost:hover { background: rgba(148, 163, 184, .13); border-color: rgba(245,158,11,.4); }

/* Campos de formulario */
.mx-input, .mx-select {
  width: 100%;
  background: rgba(7, 10, 18, .72);
  border: 1px solid var(--mx-borde);
  border-radius: 10px;
  padding: .68rem .85rem;
  color: var(--mx-txt);
  font-size: .93rem;
  transition: border-color .18s, box-shadow .18s;
}
.mx-input:focus, .mx-select:focus {
  outline: none;
  border-color: rgba(245, 158, 11, .65);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .13);
}
.mx-input::placeholder { color: var(--mx-txt-3); }
.mx-select option { background: var(--mx-850); color: var(--mx-txt); }

.mx-label {
  display: block;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--mx-txt-2);
  margin-bottom: .4rem;
}

/* Tarjeta-opción del cotizador (radio buttons visuales) */
.mx-opcion {
  display: block; cursor: pointer;
  border: 1px solid var(--mx-borde);
  border-radius: 11px;
  padding: .7rem .85rem;
  background: rgba(7, 10, 18, .5);
  transition: all .16s ease;
}
.mx-opcion:hover { border-color: rgba(245, 158, 11, .38); background: rgba(245, 158, 11, .05); }
.mx-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.mx-opcion:has(input:checked) {
  border-color: var(--mx-ambar);
  background: rgba(245, 158, 11, .11);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .35);
}
.mx-opcion:has(input:checked) .mx-opcion-titulo { color: var(--mx-ambar-claro); }

/* Rango (slider) de metrados */
.mx-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 5px; border-radius: 4px;
  background: linear-gradient(90deg, var(--mx-ambar) var(--mx-pct, 40%), rgba(148,163,184,.2) var(--mx-pct, 40%));
  outline: none;
}
.mx-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--mx-ambar); border: 3px solid var(--mx-900);
  box-shadow: 0 0 0 1px rgba(245,158,11,.6), 0 4px 12px -2px rgba(245,158,11,.6);
  cursor: grab;
}
.mx-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--mx-ambar); border: 3px solid var(--mx-900); cursor: grab;
}

/* Insignias */
.mx-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .6rem; border-radius: 999px;
  font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid;
  white-space: nowrap; /* "POR VENCER" no debe partirse en dos líneas */
}
.mx-badge-ambar { color: var(--mx-ambar-claro); border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.1); }
.mx-badge-cian  { color: var(--mx-cian);        border-color: rgba(34,211,238,.35);  background: rgba(34,211,238,.1); }
.mx-badge-verde { color: var(--mx-verde);       border-color: rgba(52,211,153,.35);  background: rgba(52,211,153,.1); }
.mx-badge-rojo  { color: var(--mx-rojo);        border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.1); }
.mx-badge-gris  { color: var(--mx-txt-2);       border-color: var(--mx-borde);       background: rgba(148,163,184,.07); }

/* Barra de progreso de obra */
.mx-progress { height: 8px; border-radius: 999px; background: rgba(148,163,184,.14); overflow: hidden; }
.mx-progress > div {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--mx-ambar), var(--mx-ambar-claro));
  transition: width .8s cubic-bezier(.2,.8,.25,1);
}

/* Línea de tiempo del seguimiento */
.mx-timeline { position: relative; padding-left: 30px; }
.mx-timeline::before {
  content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px;
  width: 2px; background: linear-gradient(180deg, var(--mx-ambar), rgba(148,163,184,.15));
}
.mx-timeline-item { position: relative; padding-bottom: 1.5rem; }
.mx-timeline-item::before {
  content: ''; position: absolute; left: -26px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--mx-900); border: 2px solid var(--mx-txt-3);
}
.mx-timeline-item[data-estado="COMPLETADO"]::before { border-color: var(--mx-verde); background: var(--mx-verde); }
.mx-timeline-item[data-estado="EN_PROCESO"]::before {
  border-color: var(--mx-ambar); background: var(--mx-ambar);
  box-shadow: 0 0 0 4px rgba(245,158,11,.2); animation: mx-pulso 2s infinite;
}
.mx-timeline-item[data-estado="OBSERVADO"]::before { border-color: var(--mx-rojo); background: var(--mx-rojo); }

@keyframes mx-pulso {
  0%, 100% { box-shadow: 0 0 0 4px rgba(245,158,11,.22); }
  50%      { box-shadow: 0 0 0 9px rgba(245,158,11,0); }
}

/* Kanban */
.mx-kanban { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .75rem; }
.mx-kanban-col { min-width: 268px; flex: 0 0 268px; }
.mx-kanban-card { cursor: grab; transition: transform .15s, box-shadow .15s, opacity .15s; }
.mx-kanban-card:active { cursor: grabbing; }
.mx-kanban-card.mx-arrastrando { opacity: .45; transform: rotate(1.5deg) scale(.98); }
.mx-kanban-col.mx-sobre { background: rgba(245,158,11,.07); border-color: rgba(245,158,11,.35); }

/* Chatbot */
.mx-chat-burbuja { max-width: 84%; padding: .62rem .85rem; border-radius: 13px; font-size: .875rem; line-height: 1.5; }
.mx-chat-bot     { background: rgba(30,41,71,.85); border: 1px solid var(--mx-borde); border-bottom-left-radius: 4px; }
.mx-chat-usuario { background: linear-gradient(135deg, var(--mx-ambar-claro), var(--mx-ambar)); color: #1A1206;
                   border-bottom-right-radius: 4px; margin-left: auto; }
.mx-chat-typing span {
  display: inline-block; width: 6px; height: 6px; margin: 0 1.5px; border-radius: 50%;
  background: var(--mx-txt-2); animation: mx-bounce 1.3s infinite;
}
.mx-chat-typing span:nth-child(2) { animation-delay: .18s; }
.mx-chat-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes mx-bounce { 0%,60%,100% { transform: translateY(0); opacity:.45 } 30% { transform: translateY(-5px); opacity:1 } }

/* Contador animado del precio */
.mx-precio { font-variant-numeric: tabular-nums; transition: color .3s; }
.mx-precio.mx-actualizando { color: var(--mx-ambar-claro); }

/* Aparición al hacer scroll */
.mx-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.mx-reveal.mx-visible { opacity: 1; transform: none; }

/* Barras de desplazamiento */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--mx-950); }
::-webkit-scrollbar-thumb { background: var(--mx-700); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--mx-600); }

/* Accesibilidad: respeta la preferencia de movimiento reducido. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .mx-reveal { opacity: 1; transform: none; }
}

/* Impresión: el navegador debe poder imprimir una ficha legible. */
@media print {
  body { background: #fff; color: #000; }
  .mx-no-print { display: none !important; }
  .mx-card { border: 1px solid #ccc; background: #fff; }
}