/* ============================================
   UBLICK — DITECINT S.A. de C.V.
   Design tokens
   ============================================ */
:root{
  --blue: #4a72e8;
  --blue-dark: #35509e;
  --blue-glow: rgba(74,114,232,.35);
  --ink: #101d4d;
  --ink-soft: #17226b;
  --gray: #808080;
  --gray-soft: #c7ccd6;
  --gray-line: #e4e7ee;
  --white: #ffffff;
  --ok: #2ecc71;
  --warn: #f5a623;
  --fail: #e5484d;

  /* colores tomados directamente de las capturas del software real */
  --appbar: #6366f1;
  --dash-green: #5cb85c;
  --chart-blue: #5295ba;
  --chart-green: #4caf50;

  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --radius: 14px;
  --maxw: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
img,video{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-display);margin:0 0 .5em 0;line-height:1.1;letter-spacing:-.01em;}
p{margin:0 0 1em 0;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.mono{font-family:var(--font-mono);}

:focus-visible{outline:3px solid var(--blue);outline-offset:2px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-weight:600;font-size:.95rem;
  padding:13px 24px;border-radius:999px;border:2px solid transparent;
  cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 24px -8px var(--blue-glow);}
.btn-primary:hover{background:var(--blue-dark);box-shadow:0 12px 28px -6px var(--blue-glow);}
.btn-ghost-dark{border-color:rgba(255,255,255,.35);color:#fff;background:transparent;}
.btn-ghost-dark:hover{border-color:#fff;background:rgba(255,255,255,.08);}
.btn-ghost{border-color:var(--gray-line);color:var(--ink);background:transparent;}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);}
.btn-block{width:100%;justify-content:center;}

/* ---------- Status pill (echoes product UI) ---------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;padding:5px 12px;border-radius:999px;
  background:rgba(74,114,232,.1);color:var(--blue-dark);
}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);}
.pill.pill-ok{background:rgba(92,184,92,.14);color:#3d8b3d;}
.pill.pill-ok::before{background:var(--dash-green);}
.pill.pill-warn{background:rgba(245,166,35,.14);color:#a9700f;}
.pill.pill-warn::before{background:var(--warn);}
.pill.pill-fail{background:rgba(229,72,77,.12);color:var(--fail);}
.pill.pill-fail::before{background:var(--fail);}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--gray-line);
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  height:92px;
}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);}
.brand .logo-img{height:38px;width:auto;}
.brand .logo-text{font-family:var(--font-display);font-size:1.4rem;font-weight:700;letter-spacing:-.02em;color:var(--ink);}
.brand .logo-text b{color:var(--blue);}

nav.main-nav{display:flex;align-items:center;gap:28px;}
nav.main-nav a{color:var(--gray);font-size:.95rem;font-weight:500;transition:color .15s;}
nav.main-nav a:hover, nav.main-nav a.active{color:var(--ink);}
nav.main-nav a.active{color:var(--blue);}

.header-actions{display:flex;align-items:center;gap:14px;}
.lang-switch{
  display:flex;font-family:var(--font-mono);font-size:.75rem;font-weight:600;
  border:1px solid var(--gray-line);border-radius:999px;overflow:hidden;
}
.lang-switch a{padding:6px 12px;color:var(--gray);}
.lang-switch a.current{background:var(--blue);color:#fff;}

.nav-toggle{display:none;background:none;border:0;color:var(--ink);font-size:1.6rem;cursor:pointer;}

@media (max-width: 900px){
  nav.main-nav{
    position:absolute;top:92px;left:0;right:0;background:#fff;
    flex-direction:column;align-items:flex-start;padding:8px 24px 20px;gap:14px;
    display:none;border-bottom:1px solid var(--gray-line);box-shadow:0 12px 24px -18px rgba(16,29,77,.25);
  }
  nav.main-nav.open{display:flex;}
  .nav-toggle{display:block;}
}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(160deg, var(--blue-dark) 0%, var(--ink) 65%);
  color:#fff;padding:90px 0 110px;position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:42px 42px;mask-image:linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
  pointer-events:none;
}
.hero .container{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;}
.hero-eyebrow{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-soft);margin-bottom:18px;display:flex;align-items:center;gap:10px;}
.hero-eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(46,204,113,.2);}
.hero h1{font-size:3.1rem;color:#fff;}
.hero h1 .hl{color:var(--blue);}
.hero p.lead{color:var(--gray-soft);font-size:1.15rem;max-width:520px;}
.hero-ctas{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;}

@media (max-width:900px){
  .hero .container{grid-template-columns:1fr;}
  .hero h1{font-size:2.2rem;}
}

/* ---------- OEE gauge (signature element) ---------- */
.oee-widget{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:20px;padding:28px;backdrop-filter:blur(6px);
}
.oee-widget .oee-title{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-soft);margin-bottom:20px;}
.oee-main{display:flex;align-items:center;gap:24px;margin-bottom:22px;}
.oee-ring{position:relative;width:132px;height:132px;flex-shrink:0;}
.oee-ring svg{transform:rotate(-90deg);}
.oee-ring circle{fill:none;stroke-width:10;}
.oee-ring .track{stroke:rgba(255,255,255,.1);}
.oee-ring .fill{stroke:var(--blue);stroke-linecap:round;transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1);}
.oee-ring .val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.oee-ring .val strong{font-family:var(--font-mono);font-size:1.7rem;color:#fff;}
.oee-ring .val span{font-size:.65rem;color:var(--gray-soft);letter-spacing:.08em;text-transform:uppercase;}
.oee-breakdown{flex:1;display:flex;flex-direction:column;gap:12px;}
.oee-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.oee-row .lbl{font-size:.82rem;color:var(--gray-soft);}
.oee-row .bar{flex:1;height:6px;background:rgba(255,255,255,.1);border-radius:99px;margin:0 12px;overflow:hidden;}
.oee-row .bar span{display:block;height:100%;background:var(--blue);border-radius:99px;width:0;transition:width 1.2s ease;}
.oee-row .num{font-family:var(--font-mono);font-size:.82rem;color:#fff;width:44px;text-align:right;}
.oee-widget .oee-lines{display:flex;gap:10px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.1);padding-top:18px;}

/* ---------- Sections ---------- */
section{padding:88px 0;}
.section-alt{background:#f6f8fc;}
.eyebrow{
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue);margin-bottom:10px;font-weight:700;
}
.section-head{max-width:640px;margin-bottom:52px;}
.section-head h2{font-size:2.1rem;}
.section-head p{color:var(--gray);font-size:1.05rem;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

/* ---------- Feature grid ---------- */
.grid{display:grid;gap:28px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.grid-3,.grid-2{grid-template-columns:1fr;}}
@media (max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid-4{grid-template-columns:1fr;}}

.card{
  background:#fff;border:1px solid var(--gray-line);border-radius:var(--radius);
  padding:30px;transition:border-color .15s, transform .15s, box-shadow .15s;
}
.card:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:0 16px 32px -18px rgba(11,21,38,.25);}
.card .icon-box{
  width:44px;height:44px;border-radius:10px;background:rgba(74,114,232,.1);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--blue);
}
.card h3{font-size:1.15rem;}
.card p{color:var(--gray);font-size:.94rem;margin-bottom:0;}

/* ---------- Process strip (real pipeline, order matters) ---------- */
.process{display:flex;gap:0;border:1px solid var(--gray-line);border-radius:var(--radius);overflow:hidden;background:#fff;}
.process-step{flex:1;padding:26px 24px;border-right:1px solid var(--gray-line);position:relative;}
.process-step:last-child{border-right:none;}
.process-step .stage{font-family:var(--font-mono);font-size:.7rem;color:var(--blue);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;}
.process-step h4{font-size:1rem;margin-bottom:6px;}
.process-step p{font-size:.85rem;color:var(--gray);margin:0;}
@media (max-width:900px){.process{flex-direction:column;}.process-step{border-right:none;border-bottom:1px solid var(--gray-line);}.process-step:last-child{border-bottom:none;}}

/* ---------- Media slots (image/video placeholders) ---------- */
.media-slot{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:#eef1f7;border:1.5px dashed var(--gray-soft);
  aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;
}
.media-slot img,.media-slot video{width:100%;height:100%;object-fit:cover;}
.media-slot__label{
  position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:20px;gap:8px;color:var(--gray);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.02em;
}
.media-slot__label .icon{font-size:1.6rem;}
.media-slot--empty .media-slot__label{display:flex;}

/* ---------- Logo strip / stats ---------- */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;}
.stat-row .stat strong{display:block;font-family:var(--font-mono);font-size:2rem;color:var(--blue);}
.stat-row .stat span{font-size:.82rem;color:var(--gray);}
@media (max-width:900px){.stat-row{grid-template-columns:repeat(2,1fr);}}

/* ---------- Pricing ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;}
@media (max-width:1000px){.pricing-grid{grid-template-columns:1fr;}}
.price-card{
  border:1px solid var(--gray-line);border-radius:18px;padding:34px;background:#fff;
  display:flex;flex-direction:column;
}
.price-card.featured{border-color:var(--blue);box-shadow:0 24px 48px -24px var(--blue-glow);position:relative;}
.price-card.featured::before{
  content:"MÁS ELEGIDO";position:absolute;top:-13px;left:34px;background:var(--blue);color:#fff;
  font-family:var(--font-mono);font-size:.65rem;letter-spacing:.08em;padding:5px 12px;border-radius:999px;
}
.price-card .tier{font-family:var(--font-mono);font-size:.78rem;color:var(--blue);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}
.price-card h3{font-size:1.4rem;margin-bottom:10px;}
.price-card .price-tag{font-family:var(--font-mono);font-size:1.05rem;color:var(--gray);margin-bottom:22px;}
.price-card ul{list-style:none;padding:0;margin:0 0 26px 0;display:flex;flex-direction:column;gap:12px;flex:1;}
.price-card ul li{display:flex;gap:10px;font-size:.92rem;color:var(--ink);align-items:flex-start;}
.price-card ul li .check{color:var(--blue);flex-shrink:0;}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(120deg,var(--blue-dark) 0%, var(--ink) 100%);color:#fff;border-radius:24px;
  padding:56px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.cta-band h2{color:#fff;font-size:1.9rem;max-width:480px;margin:0;}
.cta-band p{color:var(--gray-soft);margin:8px 0 0 0;}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}
.contact-item{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--gray-line);}
.contact-item .icon-box{
  width:42px;height:42px;border-radius:10px;background:rgba(74,114,232,.1);color:var(--blue);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.contact-item h4{margin:0 0 4px 0;font-size:.98rem;}
.contact-item p{margin:0;color:var(--gray);font-size:.92rem;}
.badge-soon{
  display:inline-block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;
  background:rgba(245,166,35,.14);color:#a9700f;padding:3px 10px;border-radius:999px;margin-left:8px;
  text-transform:uppercase;
}
form.contact-form{display:flex;flex-direction:column;gap:16px;}
form.contact-form label{font-size:.85rem;font-weight:600;color:var(--ink);margin-bottom:6px;display:block;}
form.contact-form input,form.contact-form select,form.contact-form textarea{
  width:100%;padding:12px 14px;border:1px solid var(--gray-line);border-radius:10px;
  font-family:var(--font-body);font-size:.95rem;background:#fbfcfe;
}
form.contact-form input:focus,form.contact-form select:focus,form.contact-form textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(74,114,232,.15);
}
.map-note{
  border:1px solid var(--gray-line);border-radius:var(--radius);padding:22px;background:#f6f8fc;
  display:flex;align-items:center;gap:14px;margin-top:20px;
}

/* ---------- Footer ---------- */
footer{background:var(--ink);color:var(--gray-soft);padding:64px 0 28px;}
footer .footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px;}
@media (max-width:900px){footer .footer-top{grid-template-columns:1fr 1fr;}}
footer .brand{margin-bottom:14px;}
footer .brand .logo-img{height:42px;}
footer p.foot-desc{max-width:280px;font-size:.88rem;}
footer h5{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:16px;}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px;}
footer ul a{font-size:.9rem;color:var(--gray-soft);transition:color .15s;}
footer ul a:hover{color:#fff;}
.footer-legal{
  border-top:1px solid rgba(255,255,255,.1);padding-top:24px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  font-size:.8rem;color:rgba(255,255,255,.45);
}
.footer-legal .legal-text{max-width:760px;line-height:1.6;}
.footer-legal .legal-links{display:flex;gap:18px;}
.footer-legal .legal-links a{color:rgba(255,255,255,.45);}
.footer-legal .legal-links a:hover{color:#fff;}

/* ============================================
   LIVE DASHBOARD MOCKUPS (réplica de pantallas reales)
   ============================================ */
/* Contenedor un poco más ancho, solo para el Monitor de línea, así la
   columna de fecha de "Últimos paros" cabe en un renglón sin afectar
   el resto de las secciones. */
.container--wide{max-width:1320px;}
.dash-shell{border-radius:14px;overflow:hidden;box-shadow:0 24px 50px -30px rgba(16,29,77,.35);}
.appbar{
  background:var(--appbar);color:#fff;font-family:var(--font-display);font-weight:700;
  text-align:center;padding:15px 20px;font-size:1rem;letter-spacing:.02em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.dash-card{background:#f6f8fc;padding:24px;}
.dash-toolbar{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--gray-line);border-radius:10px;padding:10px 16px;
  font-size:.82rem;color:var(--gray);margin-bottom:18px;
}
.dash-toolbar strong{color:var(--ink);}

/* ring cards (Turno actual / Última hora / Turno pasado) */
.ring-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px;}
@media (max-width:700px){.ring-row{grid-template-columns:1fr;}}
.ring-card{background:#fff;border:1px solid var(--gray-line);border-radius:12px;padding:16px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.ring-card h4{font-size:.88rem;margin:0 0 4px 0;}
.ring-card .qty{font-family:var(--font-mono);font-size:.76rem;color:var(--blue-dark);}
.ring-svg{position:relative;width:80px;height:80px;flex-shrink:0;}
.ring-svg svg{transform:rotate(-90deg);width:100%;height:100%;}
.ring-svg circle{fill:none;stroke-width:9;}
.ring-svg .track{stroke:#e7ebf3;}
.ring-svg .fill{stroke:var(--dash-green);stroke-linecap:round;}
.ring-svg .txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;font-size:1.15rem;color:var(--ink);}

/* machine / line cards */
.line-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media (max-width:700px){.line-row{grid-template-columns:1fr;}}
.line-card{background:#fff;border:1px solid var(--gray-line);border-radius:12px;padding:18px;text-align:center;}
.line-card h5{font-family:var(--font-mono);letter-spacing:.05em;color:var(--gray);font-size:.72rem;text-transform:uppercase;margin:0 0 8px 0;}
.line-card .pct{font-size:1.7rem;font-family:var(--font-display);font-weight:700;margin-bottom:10px;color:var(--ink);}

/* semi-circle gauges (Monitor de línea) */
.gauge-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:6px;}
@media (max-width:700px){.gauge-row{grid-template-columns:repeat(2,1fr);}}
.gauge{text-align:center;}
.gauge svg{width:100%;max-width:150px;height:auto;display:block;margin:0 auto;}
.gauge .track{fill:none;stroke:#e7ebf3;stroke-width:10;}
.gauge .fill{fill:none;stroke:var(--dash-green);stroke-width:10;stroke-linecap:round;}
.gauge .gauge-val{margin-top:-30px;font-family:var(--font-mono);font-weight:700;font-size:1.3rem;color:var(--ink);position:relative;}
.gauge .lbl{margin-top:4px;font-size:.78rem;color:var(--gray);font-weight:600;}

.gauge-dark .track{stroke:rgba(255,255,255,.14);}
.gauge-dark .gauge-val{color:#fff;}
.gauge-dark .lbl{color:var(--gray-soft);}

/* mini tables (últimos paros / top 5) */
.mini-tables{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px;}
@media (max-width:700px){.mini-tables{grid-template-columns:1fr;}}
.mini-table{background:#fff;border:1px solid var(--gray-line);border-radius:12px;overflow:hidden;}
.mini-table .mt-head{background:var(--blue);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:9px 14px;}
.mini-table table{width:100%;border-collapse:collapse;font-size:.78rem;}
.mini-table th{text-align:left;color:var(--gray);font-weight:600;padding:8px 12px;border-bottom:1px solid var(--gray-line);font-size:.68rem;}
.mini-table td{padding:8px 12px;border-bottom:1px solid var(--gray-line);color:var(--ink);}
.mini-table tr:last-child td{border-bottom:none;}

/* Indicadores de planta table */
.kpi-toolbar-row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:2px;}
.kpi-table-wrap{overflow-x:auto;background:#fff;border-radius:12px;border:1px solid var(--gray-line);}
table.kpi-table{width:100%;border-collapse:collapse;font-size:.82rem;min-width:640px;}
table.kpi-table th{background:#f6f8fc;text-align:left;padding:12px 14px;font-size:.7rem;color:var(--gray);text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--gray-line);white-space:nowrap;}
table.kpi-table td{padding:11px 14px;border-bottom:1px solid var(--gray-line);white-space:nowrap;}
table.kpi-table tr:last-child td{border-bottom:none;}
.kpi-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ok);margin-right:8px;}
.kpi-bar-wrap{background:#eef1f7;border-radius:99px;height:20px;position:relative;overflow:hidden;min-width:130px;}
.kpi-bar-wrap span{position:absolute;inset:0;background:var(--dash-green);border-radius:99px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;color:#fff;font-family:var(--font-mono);font-size:.68rem;font-weight:700;width:0%;}
.kpi-total-row td{font-weight:700;background:#f6f8fc;}

/* variables de proceso chart */
.var-chart-wrap{background:#fff;border:1px solid var(--gray-line);border-radius:12px;padding:20px;}
.var-chart-wrap svg{width:100%;height:auto;display:block;}
.var-legend{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--gray);margin-bottom:8px;}
.var-legend .dot{width:10px;height:10px;border-radius:50%;background:var(--chart-green);}

/* listado de paros bar chart */
.bars-wrap{background:#fff;border:1px solid var(--gray-line);border-radius:12px;padding:24px 20px 46px;}
.bars-wrap svg{width:100%;height:auto;display:block;}

/* contact quick actions (WhatsApp / llamada) */
.quick-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;}
.quick-actions .btn{padding:10px 18px;font-size:.86rem;}

/* ============================================
   FIDELIDAD A LAS PANTALLAS REALES DEL SOFTWARE
   ============================================ */

/* --- toolbar con botón Filtrar / Excel como en la app --- */
.dash-btn{
  display:inline-flex;align-items:center;gap:6px;background:var(--appbar);color:#fff;
  border:0;border-radius:7px;padding:8px 14px;font-family:var(--font-body);
  font-size:.78rem;font-weight:600;cursor:default;
}
.dash-btn--excel{background:#28a745;}
.dash-toolbar{justify-content:space-between;}

/* --- tabs (Listado de paros) --- */
.dash-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-bottom:16px;}
.dash-tab{
  background:#fff;border:1px solid var(--gray-line);padding:13px 10px;text-align:center;
  font-size:.85rem;font-weight:600;color:var(--ink);
}
.dash-tab.is-active{border-color:#9db8ff;border-bottom-color:#fff;box-shadow:inset 0 2px 0 #dbe4ff;}

/* --- medidor semicircular con aguja (Monitor de línea) --- */
.gauge-hero{text-align:center;}
.gauge-hero svg{width:100%;max-width:215px;height:auto;display:block;margin:0 auto;}
.gauge-hero .g-track{fill:none;stroke:#e7ebf3;stroke-width:26;}
.gauge-hero .g-fill{fill:none;stroke:var(--dash-green);stroke-width:26;}
.gauge-hero .g-cap{fill:#3d8b3d;}
.gauge-hero .g-needle{
  fill:#4a4f55;
  transform-box:view-box;
  transform-origin:100px 108px;
  transition:transform 1.5s cubic-bezier(.2,.8,.2,1);
}
.gauge-hero .g-val{
  font-family:var(--font-display);font-size:26px;font-weight:700;fill:var(--ink);
  text-anchor:middle;
}
.gauge-hero .g-lbl{
  margin-top:2px;font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--ink);
}
.gauge-hero-dark .g-track{stroke:rgba(255,255,255,.16);}
.gauge-hero-dark .g-val{fill:#fff;}
.gauge-hero-dark .g-lbl{color:#fff;}
.gauge-hero-dark .g-needle{fill:#c7ccd6;}

/* --- ring cards fieles a "Estatus de línea eficiencia" --- */
.ring-card h4{font-size:1.05rem;font-weight:700;margin:0 0 5px 0;color:var(--ink);}
.ring-card .qty{font-family:var(--font-body);font-size:.82rem;color:var(--gray);}
.ring-card .qty b{color:var(--blue);font-weight:700;}
.ring-svg{width:96px;height:96px;}
.ring-svg circle{stroke-width:11;}
.ring-svg .track{stroke:#d7d7d7;}
.ring-svg .txt{color:var(--blue);font-family:var(--font-body);font-weight:600;font-size:1.2rem;}

/* --- machine cards (Forming / Oven / Packing) --- */
.line-card h5{
  font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--ink);
  letter-spacing:0;text-transform:none;margin-bottom:12px;
}
.line-card .pct{font-family:var(--font-body);font-weight:400;font-size:1.5rem;color:var(--ink);margin-bottom:14px;}
.badge-run,.badge-standby,.badge-fail{
  display:inline-block;font-size:.72rem;font-weight:700;color:#fff;
  padding:5px 12px;border-radius:6px;
}
.badge-run{background:#5cb85c;}
.badge-standby{background:#f0c419;}
.badge-fail{background:#f2666e;}

/* --- tabla de indicadores: fila de filtros + paginación --- */
.kpi-search-row td{padding:8px 10px !important;background:#fbfcfe;}
.kpi-search-box{
  display:flex;align-items:center;gap:6px;
}
.kpi-search-box i{
  display:block;flex:1;border:1px solid var(--gray-line);border-radius:7px;
  padding:8px 10px;font-style:normal;font-size:.72rem;color:#aeb4c0;background:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kpi-search-box svg{flex-shrink:0;color:var(--gray);}
.kpi-pager{
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:14px;font-size:.82rem;color:var(--gray);background:#fff;
  border-top:1px solid var(--gray-line);
}
.kpi-pager .page-num{
  width:30px;height:30px;border-radius:50%;background:#eef1ff;color:var(--appbar);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;
}
table.kpi-table td.pt-cell{text-align:center;font-family:var(--font-body);}

/* --- gráfica de variables de proceso --- */
.var-chart-wrap{border:2px solid var(--blue);border-radius:8px;padding:16px 14px;background:#fff;}
.var-head{display:flex;justify-content:flex-end;align-items:center;gap:8px;font-size:.8rem;color:#3d8b3d;margin-bottom:4px;}
.var-head .swatch{width:16px;height:3px;background:var(--chart-green);border-radius:2px;}
.var-note{font-size:.74rem;color:var(--blue);text-align:right;margin:8px 0 0 0;font-style:italic;}

/* --- gráfica de paros con eje "Minutos" --- */
.bars-wrap{background:#fff;border:1px solid var(--gray-line);border-radius:10px;padding:20px 18px 20px;}
.bars-layout{display:flex;align-items:stretch;gap:6px;}
.bars-yaxis-label{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:#555;
  display:flex;align-items:center;justify-content:center;padding:0 2px 34px;
}
.bars-layout svg{flex:1;min-width:0;}

/* ============================================
   AJUSTES DE FIDELIDAD — RONDA 2
   ============================================ */

/* --- medidor con banda roja (0-meta) y verde (meta-100) --- */
.gauge-hero .g-band-red{fill:none;stroke:#cc3300;stroke-width:26;}
.gauge-hero .g-band-green{fill:none;stroke:#36802d;stroke-width:26;}

/* --- encabezado del monitor sin franja/recuadro --- */
.dash-headline{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  margin:2px 0 16px;font-family:var(--font-display);font-weight:700;
  font-size:1.08rem;color:#3b4252;
}

/* --- encabezado de mini tablas igual al appbar --- */
.mini-table .mt-head{background:var(--appbar);}

/* --- barras de Indicadores de planta: rectangulares, delgadas, texto centrado --- */
table.kpi-table td.kpi-cell{padding:7px 9px;}
.kpi-bar{
  height:22px;border-radius:3px;background:var(--dash-green);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:var(--font-body);font-size:.78rem;font-weight:700;
  letter-spacing:.01em;
}
.kpi-bar.is-low{background:#dd5353;}

/* --- campo trampa anti-spam: invisible para personas, visible para bots --- */
.hp-field{
  position:absolute !important;
  left:-9999px !important;
  width:1px;height:1px;overflow:hidden;
}

/* ============================================
   CALCULADORAS Y RECURSOS DESCARGABLES
   ============================================ */
.calc-shell{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
@media (max-width:900px){.calc-shell{grid-template-columns:1fr;}}
.calc-form{background:#fff;border:1px solid var(--gray-line);border-radius:16px;padding:32px;}
.calc-form h3{font-size:1.1rem;margin-bottom:4px;}
.calc-form .field{margin-bottom:18px;}
.calc-form label{display:flex;justify-content:space-between;align-items:baseline;font-size:.88rem;font-weight:600;color:var(--ink);margin-bottom:6px;}
.calc-form label .hint{font-weight:400;color:var(--gray);font-size:.76rem;}
.calc-form input, .calc-form select{
  width:100%;padding:11px 14px;border:1px solid var(--gray-line);border-radius:9px;
  font-family:var(--font-mono);font-size:.95rem;background:#fbfcfe;color:var(--ink);
}
.calc-form input:focus, .calc-form select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(74,114,232,.15);}
.calc-form .unit{font-family:var(--font-mono);font-size:.72rem;color:var(--gray);}

.calc-result{
  position:sticky;top:110px;background:var(--ink);color:#fff;border-radius:16px;
  padding:34px;text-align:center;
}
.calc-result .cr-label{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-soft);margin-bottom:6px;}
.calc-result .cr-big{font-family:var(--font-display);font-weight:700;font-size:3rem;line-height:1;margin-bottom:6px;}
.calc-result .cr-big.small{font-size:2.1rem;}
.calc-result .cr-tag{
  display:inline-block;font-family:var(--font-mono);font-size:.78rem;font-weight:700;
  padding:5px 14px;border-radius:999px;margin-bottom:18px;
}
.calc-result .cr-tag.ok{background:rgba(92,184,92,.18);color:#8ee08e;}
.calc-result .cr-tag.warn{background:rgba(245,166,35,.2);color:#ffd479;}
.calc-result .cr-tag.bad{background:rgba(245,102,110,.2);color:#ff9aa1;}
.calc-breakdown{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);}
.calc-breakdown div strong{display:block;font-family:var(--font-mono);font-size:1.15rem;}
.calc-breakdown div span{font-size:.72rem;color:var(--gray-soft);}
.calc-note{font-size:.8rem;color:var(--gray-soft);margin-top:16px;line-height:1.5;}
.calc-cta{margin-top:22px;display:flex;flex-direction:column;gap:10px;}

/* tarjetas de recursos */
.resource-card{
  background:#fff;border:1px solid var(--gray-line);border-radius:16px;padding:28px;
  display:flex;flex-direction:column;height:100%;
}
.resource-card .res-tag{
  display:inline-flex;align-self:flex-start;font-family:var(--font-mono);font-size:.68rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:4px 11px;border-radius:999px;margin-bottom:14px;
}
.resource-card .res-tag.free{background:rgba(92,184,92,.12);color:#3d8b3d;}
.resource-card .res-tag.gated{background:rgba(74,114,232,.1);color:var(--blue-dark);}
.resource-card h3{font-size:1.15rem;margin-bottom:8px;}
.resource-card p{color:var(--gray);font-size:.92rem;flex:1;}

/* formularios de descarga (lead magnet) */
.gate-shell{max-width:520px;margin:0 auto;background:#fff;border:1px solid var(--gray-line);border-radius:16px;padding:36px;}
.gate-shell .contact-form label{margin-bottom:6px;}

/* página de gracias con descarga */
.download-box{
  background:#f6f8fc;border:2px dashed var(--blue);border-radius:16px;padding:36px;text-align:center;
}
.download-box .icon{width:56px;height:56px;border-radius:14px;background:rgba(74,114,232,.12);color:var(--blue);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}

/* ============================================
   ARTÍCULO DE TEORÍA (texto largo tipo blog)
   ============================================ */
.article-body{max-width:760px;margin:0 auto;}
.article-body h2{font-size:1.5rem;margin-top:8px;}
.article-body h3{font-size:1.1rem;color:var(--ink);margin-top:24px;}
.article-body p{color:var(--ink);font-size:1rem;line-height:1.7;}
.article-callout{
  background:#f6f8fc;border:1px solid var(--gray-line);border-radius:12px;
  padding:18px 20px;margin:18px 0;font-size:.96rem;line-height:1.65;
}
.article-body ul{padding-left:0;list-style:none;display:flex;flex-direction:column;gap:10px;margin:14px 0 20px;}
.article-body ul li{padding-left:22px;position:relative;line-height:1.6;}
.article-body ul li::before{content:"•";position:absolute;left:4px;color:var(--blue);font-weight:700;}
.mito-box{margin:20px 0;}
.mito-box .mito-q{color:var(--fail);font-weight:700;font-style:italic;margin-bottom:6px;}
.mito-box p{margin:0;}