/* =========================================================
   vision.css — estilos propios de vision.industria4.tech
   Vive en la carpeta vision/ (no en shared). Se carga después de
   /assets/i4.css y /assets/landing.css.
   ========================================================= */

/* ---- Hero: resultado de ejemplo ---- */
.sample{
  width:100%; max-width:460px;
  background:var(--bg-alt); border-radius:16px; padding:14px;
  box-shadow:0 12px 32px rgba(0,0,0,0.10);
}
.sample svg{display:block; width:100%; height:auto; border-radius:10px;}
.sample-result{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:20px;
  font-size:13px; font-weight:600;
}
.chip.ok{background:var(--teal-tint); color:var(--teal-deep);}
.chip.no{background:#FBE7E7; color:#B23B3C;}
.sample-caption{margin:10px 0 0; font-size:0.8rem; text-align:center;}

/* ---- Tarjetas de demos ---- */
.demos{padding:3rem 0;}
.demos-intro{max-width:640px;}
.demos-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:1.5rem; margin-top:2.5rem;}
.demo-card{
  display:flex; flex-direction:column;
  background:var(--bg-alt);
  border:1px solid var(--line); border-radius:14px;
  overflow:hidden;
  transition:border-color 0.2s, box-shadow 0.2s;
}
.demo-card:hover{border-color:var(--line-strong); box-shadow:0 10px 28px rgba(0,0,0,0.07);}
.demo-band{height:6px; background:var(--grad-alt);}
.demo-card:nth-child(even) .demo-band{background:var(--grad-teal);}
.demo-body{display:flex; flex-direction:column; flex:1; padding:1.75rem;}
.demo-kicker{display:inline-block; align-self:flex-start; font-size:12px; font-weight:600; color:var(--violet-deep); background:var(--violet-tint); padding:3px 10px; border-radius:12px; margin-bottom:0.6rem;}
.demo-card h3{margin:0 0 0.6rem; font-size:1.35rem; line-height:1.3;}
.demo-card p{font-size:0.95rem;}
.demo-tags{display:flex; flex-wrap:wrap; gap:6px; margin:0.25rem 0 1.25rem;}
.demo-tags span{font-size:12px; padding:3px 10px; border-radius:12px; background:var(--bg); border:1px solid var(--line); color:var(--ink-soft);}
.demo-foot{margin-top:auto; display:flex; align-items:center; justify-content:flex-end; gap:12px;}
.demo-link{font-weight:600; color:var(--teal-deep);}
.demo-link:hover{color:var(--violet-deep);}
.demo-soon{font-size:12px; font-weight:600; color:var(--violet-deep); background:var(--violet-tint); padding:3px 10px; border-radius:12px;}

/* ---- Cómo funciona ---- */
.how{padding:3rem 0; background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.how-steps{display:grid; grid-template-columns:repeat(3, 1fr); gap:2rem; margin-top:2rem; counter-reset:paso;}
.how-step{position:relative; padding-top:3.2rem;}
.how-step::before{
  counter-increment:paso; content:counter(paso);
  position:absolute; top:0; left:0;
  width:2.4rem; height:2.4rem; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--grad-alt); color:#fff; font-weight:700;
}
.how-step h3{margin-top:0;}

@media (max-width:860px){
  .demos-grid, .how-steps{grid-template-columns:1fr;}
}

/* =========================================================
   Páginas de demo (epp, stock, objetos, texto)
   ========================================================= */

/* El atributo hidden siempre oculta, aunque el elemento tenga display propio */
[hidden]{display:none !important;}

/* ---- Volver a todas las demos ---- */
.back{background:var(--bg-alt); border-bottom:1px solid var(--line);}
.back .wrap{padding-top:10px; padding-bottom:10px;}
.back a{font-size:14px; font-weight:600; color:var(--teal-deep);}
.back a:hover{color:var(--violet-deep);}

/* ---- Encabezado de demo ---- */
.demo-head{padding:2.5rem 0 1rem;}
.demo-head h1{font-size:2.6rem; line-height:1.15; margin:0.3rem 0 0.8rem;}
.demo-head p{max-width:680px; font-size:1.05rem;}
.demo-head .wrap{display:flex; justify-content:space-between; align-items:center; gap:2rem;}
.demo-back{flex-shrink:0;}

/* ---- Área de la demo ---- */
.demo-app{padding:1rem 0 3rem;}
.epp-grid{display:grid; grid-template-columns:minmax(280px, 380px) 1fr; gap:2rem; align-items:start;}
.epp-panel h3{font-size:1rem; margin:0 0 0.7rem;}
.epp-panel h3 + .epp-drop{margin-top:0;}
.epp-checks{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:1.5rem;}
.epp-checks label{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:8px 14px; border-radius:8px;
  background:var(--bg-alt); border:1px solid var(--line);
  font-size:14px; font-weight:600;
}
.epp-checks input{accent-color:var(--teal-deep); width:16px; height:16px;}

.epp-drop{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:2rem 1rem; border-radius:12px; cursor:pointer; text-align:center;
  background:var(--bg-alt); border:2px dashed var(--line-strong);
  transition:border-color 0.2s, background 0.2s;
}
.epp-drop:hover, .epp-drop:focus-visible, .epp-drop.dragging{border-color:var(--teal); background:var(--teal-tint); outline:none;}
.epp-drop.busy{opacity:0.6; pointer-events:none;}
.epp-drop strong{font-size:1rem;}
.epp-drop span{font-size:0.9rem; color:var(--ink-soft);}
.epp-drop small{font-size:0.75rem; color:var(--ink-soft); margin-top:6px;}

.epp-status{margin:1rem 0; font-size:0.95rem; min-height:1.4em;}
.epp-status.loading{color:var(--violet-deep); font-weight:600;}
.epp-status.error{color:var(--violet-deep); font-weight:600;}
.epp-status.done{color:var(--teal-deep); font-weight:600;}

.epp-person{
  background:var(--bg-alt); border:1px solid var(--line); border-left:4px solid var(--teal-deep);
  border-radius:10px; padding:12px 14px; margin-bottom:10px;
}
.epp-person.no{border-left-color:var(--coral);}
.epp-person.nv{border-left-color:#D9962B;}
.epp-person-head{display:flex; justify-content:space-between; gap:8px; font-size:0.95rem;}
.epp-person-head span{font-weight:600; color:var(--ink-soft);}
.epp-person .sample-result{margin-top:8px;}
.chip.nv{background:#FBF1DF; color:#8A5A12;}

.epp-view{background:var(--bg-alt); border:1px solid var(--line); border-radius:14px; padding:12px;}
.epp-view canvas{display:block; width:100%; height:auto; border-radius:8px;}
.epp-placeholder{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:320px; padding:2rem; border-radius:8px;
  background:linear-gradient(135deg, rgba(89,180,180,0.08), rgba(146,131,189,0.08));
}
.epp-placeholder p{max-width:320px; margin:0;}
.epp-legend{display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; font-size:0.8rem; color:var(--ink-soft);}
.epp-legend span{display:inline-flex; align-items:center; gap:6px;}
.lg{display:inline-block; width:14px; height:10px; border:2px solid;}
.lg.ok{border-color:#2F7A78;}
.lg.no{border-color:#DB4E4F; border-style:dashed;}
.lg.nv{border-color:#D9962B; border-style:dashed;}
.lg.eq{border-color:#59B4B4;}

/* ---- Demo de stock ---- */
.stock-depth{display:flex; align-items:center; gap:12px; margin-bottom:1.5rem;}
.stock-depth input{
  width:72px; padding:8px 10px; border-radius:8px;
  border:1px solid var(--line-strong); background:var(--bg-alt);
  font:inherit; font-weight:700; font-size:1rem; color:var(--ink);
}
.stock-depth input:focus{outline:2px solid var(--teal); outline-offset:1px;}
.stock-depth span{font-size:0.85rem; color:var(--ink-soft); line-height:1.4;}
.stock-count{
  display:flex; align-items:center; gap:14px;
  background:var(--bg-alt); border:1px solid var(--line); border-left:4px solid var(--teal-deep);
  border-radius:10px; padding:12px 16px; margin-bottom:10px;
}
.stock-count.total{border-left-color:var(--violet-deep);}
.stock-num{font-size:2.4rem; font-weight:800; line-height:1; color:var(--ink);}
.stock-label{font-size:0.95rem; font-weight:600; color:var(--ink-soft);}
.stock-label small{font-weight:500;}
.stock-note{font-size:0.85rem;}
.stock-seen{margin-top:1rem;}
.stock-seen strong{display:block; font-size:0.9rem; margin-bottom:0.5rem;}

/* ---- Otras demos en 3 columnas ---- */
.demos-grid-3{grid-template-columns:repeat(3, 1fr);}

@media (max-width:860px){
  .demo-head h1{font-size:2rem;}
  .demo-head .wrap{flex-direction:column; align-items:stretch; gap:0.5rem;}
  .epp-grid, .demos-grid-3{grid-template-columns:1fr;}
}
/* Etiquetas de "Lo que la IA ve en la foto", en lila */
.stock-seen .demo-tags span{background:var(--violet-tint); color:var(--violet-deep); border-color:transparent; font-weight:600;}