/* ============================================
   Deveco × Pivalco — Estilos compartidos
   ============================================ */

:root{
  --pv-navy: #0b2340;
  --pv-navy-light: #123a66;
  --pv-blue: #1d6fd6;
  --pv-teal: #15b8a6;
  --pv-amber: #f2a900;
  --pv-bg: #f4f7fb;
  --pv-ink: #0b2340;
  --pv-muted: #5c7089;
}

html{ scroll-behavior:smooth; }

body{
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  background:var(--pv-bg);
  color:var(--pv-ink);
}

.font-display{ font-family:'Inter', sans-serif; letter-spacing:-0.02em; }

/* Hero gradient background.
   .hero-gradient and .grid-overlay are always used together on the same
   element in this project — they are merged into one rule combining the
   dark navy base, the color glows and the faint grid lines in a single
   `background-image` stack so neither class can silently wipe out the
   other's layers (which happened before when both used the `background`
   shorthand on the same element). */
.hero-gradient.grid-overlay,
.hero-gradient{
  background-color: var(--pv-navy);
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    radial-gradient(1200px 500px at 90% -10%, rgba(21,184,166,.25), transparent 60%),
    radial-gradient(900px 400px at 5% 10%, rgba(29,111,214,.35), transparent 55%),
    linear-gradient(135deg, var(--pv-navy) 0%, #081a30 100%);
  background-size: 36px 36px, 36px 36px, auto, auto, auto;
}

.badge-soft{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
}

.module-card{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  border:1px solid #e3e9f2;
}
.module-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -12px rgba(11,35,64,.25);
  border-color: var(--pv-blue);
}

.tag-pill{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.72rem; font-weight:600; letter-spacing:.02em;
  padding:.25rem .65rem; border-radius:999px;
}

.btn-primary{
  background: linear-gradient(135deg, var(--pv-blue), var(--pv-teal));
  color:#fff; font-weight:600;
  transition: filter .2s ease, transform .2s ease;
}
.btn-primary:hover{ filter:brightness(1.08); transform: translateY(-1px); }

.btn-ghost{
  border:1px solid rgba(255,255,255,.3);
  color:#fff; font-weight:600;
}
.btn-ghost:hover{ background:rgba(255,255,255,.08); }

/* Demo page */
.panel{
  background:#fff;
  border:1px solid #e3e9f2;
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(11,35,64,.04);
}

.kpi-card{
  border-radius: 1rem;
  padding: 1.1rem 1.25rem;
  border:1px solid #e3e9f2;
  background:#fff;
}

.step-dot{
  width:28px; height:28px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.8rem; color:#fff;
  background: linear-gradient(135deg, var(--pv-blue), var(--pv-teal));
  flex-shrink:0;
}

.timeline-line{
  position:absolute; left:13px; top:28px; bottom:-8px; width:2px;
  background: linear-gradient(to bottom, #cfe0f5, transparent);
}

input[type=range]{
  -webkit-appearance:none; height:6px; border-radius:999px;
  background: linear-gradient(90deg, var(--pv-blue), var(--pv-teal));
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; border-radius:999px;
  background:#fff; border:3px solid var(--pv-blue); cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}

select, input[type=number], input[type=text]{
  border:1px solid #d7e0ec; border-radius:.6rem; padding:.55rem .75rem;
  background:#fbfdff; font-size:.92rem;
}
select:focus, input:focus{ outline:2px solid var(--pv-blue); outline-offset:1px; }

.table-row:hover{ background:#f6faff; }

.fade-in{ animation: fadeIn .35s ease both; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.pulse-dot{
  width:8px; height:8px; border-radius:999px; background:var(--pv-teal);
  box-shadow:0 0 0 0 rgba(21,184,166,.6);
  animation: pulse 1.8s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(21,184,166,.5); }
  70%{ box-shadow:0 0 0 8px rgba(21,184,166,0); }
  100%{ box-shadow:0 0 0 0 rgba(21,184,166,0); }
}

.before-card{ border-left:4px solid #e0574c; }
.after-card{ border-left:4px solid var(--pv-teal); }

.scrollbar-thin::-webkit-scrollbar{ height:6px; width:6px; }
.scrollbar-thin::-webkit-scrollbar-thumb{ background:#cfe0f5; border-radius:999px; }

.coming-soon{
  position:relative; overflow:hidden;
  filter:saturate(.7);
}

/* ============ Seguimiento de ofertas (kanban) ============ */
.kanban-col{
  background:#eef3f9;
  border-radius: 1rem;
  padding: .9rem;
  min-height: 160px;
}
.kanban-card{
  background:#fff;
  border:1px solid #e3e9f2;
  border-left:4px solid var(--pv-blue);
  border-radius:.75rem;
  padding:.85rem .95rem;
  margin-bottom:.65rem;
  box-shadow:0 1px 2px rgba(11,35,64,.05);
  transition: box-shadow .2s ease, transform .2s ease;
  cursor:default;
}
.kanban-card:hover{ box-shadow:0 8px 18px -6px rgba(11,35,64,.18); transform:translateY(-2px); }
.kanban-card.estado-enviada{ border-left-color: var(--pv-blue); }
.kanban-card.estado-negociacion{ border-left-color: var(--pv-amber); }
.kanban-card.estado-aceptada{ border-left-color: var(--pv-teal); }
.kanban-card.estado-rechazada{ border-left-color:#9aa6b5; }
.kanban-card.estado-riesgo{ border-left-color:#e0574c; background:#fff7f6; }

.status-badge{
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.68rem; font-weight:700; letter-spacing:.02em;
  padding:.2rem .55rem; border-radius:999px;
}
.status-badge.ok{ background:#e6faf6; color:#0f8a7a; }
.status-badge.warn{ background:#fff4e0; color:#a06600; }
.status-badge.danger{ background:#fdeceb; color:#c23f33; }
.status-badge.muted{ background:#eef1f5; color:#5c7089; }
.status-badge.info{ background:#eaf2fd; color:#1d6fd6; }

/* ============ Informes de materiales ============ */
.stock-bar-track{
  width:100%; height:8px; border-radius:999px; background:#eef1f5; overflow:hidden;
}
.stock-bar-fill{ height:100%; border-radius:999px; }

.trend-up{ color:#c23f33; }
.trend-down{ color:#0f8a7a; }

.filter-chip{
  font-size:.75rem; font-weight:600; padding:.4rem .85rem; border-radius:999px;
  border:1px solid #d7e0ec; background:#fff; color:var(--pv-muted); cursor:pointer;
  transition: all .15s ease;
}
.filter-chip:hover{ border-color:var(--pv-blue); color:var(--pv-blue); }
.filter-chip.active{
  background: linear-gradient(135deg, var(--pv-blue), var(--pv-teal));
  border-color:transparent; color:#fff;
}