/* ============================================================
   CULTIVALAB — estilos propios
   Usa los tokens que ya existen en styles.css (--sim, --r-*, --sh-*)
   ============================================================ */

.sim-hero{
  padding:140px 0 40px;
  background:linear-gradient(165deg, var(--sim-bg) 0%, #fff 100%);
}
.lab-hero-grid{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;
  text-align:left;
}
.lab-hero-grid .crumbs{justify-content:flex-start}
.lab-mascota-hero{
  width:220px;height:auto;justify-self:center;
}
@keyframes labMascotaFloat{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-14px) rotate(2deg)}
}
@media (max-width:760px){
  .lab-hero-grid{grid-template-columns:1fr;text-align:center}
  .lab-hero-grid .crumbs{justify-content:center}
  .lab-mascota-hero{width:160px;order:-1}
}
.sim-hero .tag-dark{
  color:var(--sim-dk);background:#fff;border:1px solid var(--sim-bd);
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:var(--r-full);margin-bottom:16px;
  font-weight:600;font-size:.875rem;
}

.sim-app{
  background:var(--slate-50);
  border:1px solid var(--slate-200);
  border-radius:var(--r-lg);
  padding:20px;
}

/* ---- Pestañas ---- */
.lab-tabs{
  display:flex;gap:8px;flex-wrap:wrap;
  margin-bottom:20px;border-bottom:1px solid var(--slate-200);
}
.lab-tab{
  display:flex;align-items:center;gap:8px;
  padding:12px 18px;border:none;background:none;cursor:pointer;
  font-family:var(--font-body);font-size:.9375rem;font-weight:600;
  color:var(--slate-500);
  border-bottom:3px solid transparent;
  transition:color .15s var(--ease), border-color .15s var(--ease);
}
.lab-tab i{font-size:1.1rem}
.lab-tab:hover{color:var(--sim-dk)}
.lab-tab.active{color:var(--sim-dk);border-bottom-color:var(--sim-dk)}
.lab-soon{
  font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  background:var(--slate-100);color:var(--slate-500);
  padding:2px 8px;border-radius:var(--r-full);
}
.lab-panel{display:none}
.lab-panel.active{display:block}

.lab-soon-card{
  background:var(--slate-50);border:1px dashed var(--slate-300);border-radius:var(--r-lg);
  padding:64px 24px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.lab-soon-card i{font-size:2.5rem;color:var(--sim-dk)}
.lab-soon-card h3{font-family:var(--font-display);font-size:1.25rem;color:var(--slate-800);margin:0}
.lab-soon-card p{color:var(--slate-500);max-width:420px;margin:0}

/* ---- Barra de herramientas ---- */
.sim-toolbar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-bottom:16px;
}
.sim-toolbar-hint{
  display:flex;align-items:center;gap:8px;
  font-size:.875rem;color:var(--slate-500);
}
.sim-toolbar-hint i{color:var(--sim-dk)}

/* ---- Layout: paleta + tablero ---- */
.sim-layout{display:grid;grid-template-columns:240px 1fr;gap:20px}
@media (max-width:800px){.sim-layout{grid-template-columns:1fr}}

.sim-palette{
  background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-md);
  padding:16px;height:fit-content;
  display:flex;flex-direction:column;gap:10px;
}
.sim-palette-title{
  font-family:var(--font-display);font-size:.9375rem;font-weight:700;
  color:var(--slate-800);margin:0 0 4px;
}
.sim-piece{
  display:flex;align-items:center;gap:12px;
  padding:12px;border:1px solid var(--slate-200);border-radius:var(--r-sm);
  background:var(--slate-50);
  cursor:grab;user-select:none;
  transition:border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
.sim-piece:hover{border-color:var(--sim-bd);background:var(--sim-bg);transform:translateY(-2px);box-shadow:var(--sh-sm)}
.sim-piece:active{cursor:grabbing}
.sim-piece-icon{
  width:38px;height:38px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);background:var(--sim-bg);color:var(--sim-dk);font-size:1.15rem;
}
.sim-piece-txt{display:flex;flex-direction:column;line-height:1.25}
.sim-piece-txt strong{font-size:.875rem;color:var(--slate-800)}
.sim-piece-txt span{font-size:.75rem;color:var(--slate-500)}

/* ---- Tablero ---- */
.sim-board-wrap{background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-md);overflow:hidden}
.sim-board{
  position:relative;min-height:520px;
  background-image:radial-gradient(var(--slate-300) 1px, transparent 1px);
  background-size:22px 22px;background-color:#fff;
}
.sim-board-empty{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;color:var(--slate-400);font-size:.9375rem;font-weight:500;
  pointer-events:none;
}
.sim-board-empty i{font-size:2rem;color:var(--slate-300)}
.sim-board.drag-over{background-color:var(--sim-bg)}

/* Capa SVG donde se dibujan los cables, encima del tablero */
.sim-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sim-wire-line{stroke:var(--slate-500);stroke-width:3;fill:none}

/* ---- Componentes ya puestos en el tablero ---- */
.sim-comp{
  position:absolute;
  transform:translate(-50%, -50%);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  min-width:64px;padding:14px 16px 10px;
  background:#fff;border:2px solid var(--slate-200);border-radius:var(--r-sm);
  box-shadow:var(--sh-sm);
  font-size:.75rem;font-weight:600;color:var(--slate-700);
  user-select:none;
}
.sim-comp i{font-size:1.4rem;color:var(--sim-dk)}
.sim-comp-value{font-size:.6875rem;font-weight:500;color:var(--slate-400)}

/* Botón: cambia de color cuando está presionado */
.sim-comp-boton{cursor:pointer}
.sim-comp-boton.presionado{border-color:#0958C2;background:#EAF2FC}
.sim-comp-boton.presionado i{color:#0958C2}

/* Resistencia: cursor de "editar" */
.sim-comp-resistencia{cursor:pointer}

/* LED: gris cuando está apagado, brilla cuando enciende */
.sim-comp-led i{color:var(--slate-300);transition:color .2s var(--ease)}
.sim-comp-led.encendido{border-color:#0958C2;background:#EAF2FC}
.sim-comp-led.encendido i{color:#3D9CF9;filter:drop-shadow(0 0 8px #3D9CF9);animation:ledEncendido 1.4s ease-in-out infinite}
@keyframes ledEncendido{0%,100%{filter:drop-shadow(0 0 6px #3D9CF9)}50%{filter:drop-shadow(0 0 12px #3D9CF9)}}

/* Pines de conexión (puntitos a los lados de cada pieza) */
.sim-pin{
  position:absolute;top:50%;
  width:14px;height:14px;border-radius:50%;
  background:#fff;border:2px solid var(--slate-400);
  transform:translateY(-50%);cursor:crosshair;
  transition:background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.sim-pin:hover{border-color:var(--sim-dk);transform:translateY(-50%) scale(1.25)}
.sim-pin.pin-a{left:-7px}
.sim-pin.pin-b{right:-7px}
.sim-pin.seleccionado{background:var(--sim-dk);border-color:var(--sim-dk)}

/* ============================================================
   BLOQUES
   ============================================================ */
.blocks-hint{
  display:flex;align-items:center;gap:8px;
  font-size:.875rem;color:var(--slate-500);margin:0 0 16px;
}
.blocks-hint i{color:var(--sim-dk)}
.blocks-grid{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(140px,1fr));gap:14px;
}
.block-chip{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:20px 12px;border-radius:var(--r-md);
  background:#fff;border:2px solid var(--slate-200);
  cursor:pointer;text-align:center;
  font-size:.8125rem;font-weight:700;color:#fff;
  transition:transform .15s var(--ease), box-shadow .15s var(--ease);
}
.block-chip i{font-size:1.6rem}
.block-chip.block-move{background:linear-gradient(160deg,#3D7DD9,#0958C2)}
.block-chip.block-turn{background:linear-gradient(160deg,#1968CE,#074690)}
.block-chip.block-wait{background:linear-gradient(160deg,#79ABEA,#1968CE)}
.block-chip.block-loop{background:linear-gradient(160deg,#0958C2,#0B2A5C)}
.block-chip.block-io{background:linear-gradient(160deg,#074690,#0B2A5C)}
.block-chip:hover{box-shadow:var(--sh-md)}
.block-chip.selected{
  transform:scale(1.18);
  box-shadow:0 0 0 4px #fff, 0 0 0 7px var(--sim-dk), var(--sh-lg);
  z-index:1;
}

/* ============================================================
   CODE (editor de Python)
   ============================================================ */
.code-app{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:800px){.code-app{grid-template-columns:1fr}}

.code-editor-wrap,.code-output-wrap{
  background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-md);
  padding:16px;display:flex;flex-direction:column;gap:10px;
}
.code-label,.code-output-label{
  font-family:var(--font-display);font-size:.8125rem;font-weight:700;
  color:var(--slate-600);text-transform:uppercase;letter-spacing:.03em;
}
.code-input{
  width:100%;min-height:220px;resize:vertical;
  font-family:var(--font-mono, 'JetBrains Mono', monospace);font-size:.875rem;line-height:1.6;
  background:#0F172A;color:#E2E8F0;border:none;border-radius:var(--r-sm);
  padding:14px;tab-size:4;
}
.code-output{
  min-height:220px;margin:0;
  font-family:var(--font-mono, 'JetBrains Mono', monospace);font-size:.875rem;line-height:1.6;
  background:#0F172A;color:#86EFAC;border-radius:var(--r-sm);
  padding:14px;white-space:pre-wrap;word-break:break-word;overflow:auto;
}
.code-output.error{color:#FCA5A5}
.code-status{font-size:.8125rem;color:var(--slate-500)}

/* Vale asomándose sobre la esquina del panel de Circuitos */
.sim-app{ position:relative }
.lab-mascota{
  position:absolute; top:-38px; right:24px; width:90px; height:auto;
  z-index:2; pointer-events:none;
  filter:drop-shadow(0 6px 10px rgba(15,23,42,.15));
  animation:valeFloat 3.5s ease-in-out infinite;
}
@keyframes valeFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
@media (max-width:600px){ .lab-mascota{ width:64px; top:-26px; right:14px } }


/* ============================================================
   ACTUALIZACION: botón de borrar, interruptor, zumbador, mas vida
   ============================================================ */

/* Botoncito de "x" para quitar un componente, aparece al pasar el mouse */
.sim-comp{ position:absolute; transition:box-shadow .15s var(--ease), border-color .15s var(--ease); }
.sim-comp:hover{ box-shadow:0 6px 18px -4px rgba(9,88,194,.28) }
.sim-comp-borrar{
  position:absolute; top:-9px; right:-9px; width:22px; height:22px;
  border-radius:50%; border:2px solid #fff; background:#DC2626; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.7rem;
  cursor:pointer; opacity:0; transform:scale(.7);
  transition:opacity .15s var(--ease), transform .15s var(--ease);
  z-index:3;
}
.sim-comp:hover .sim-comp-borrar{ opacity:1; transform:scale(1) }
.sim-comp-borrar:hover{ background:#B91C1C }

/* Interruptor: se ve prendido de verdad, con color e icono que cambia */
.sim-comp-interruptor{cursor:pointer}
.sim-comp-interruptor i{color:var(--slate-400);transition:color .2s var(--ease)}
.sim-comp-interruptor.presionado{border-color:#0958C2;background:#EAF2FC}
.sim-comp-interruptor.presionado i{color:#0958C2}

/* Zumbador: pulsa y "suena" con ondas visuales cuando esta prendido */
.sim-comp-zumbador i{color:var(--slate-400);transition:color .2s var(--ease)}
.sim-comp-zumbador.encendido{border-color:#0958C2;background:#EAF2FC}
.sim-comp-zumbador.encendido i{color:#0958C2;animation:zumbadorVibra .25s ease-in-out infinite}
.sim-comp-zumbador.encendido::after{
  content:'';position:absolute;inset:-6px;border-radius:inherit;
  border:2px solid rgba(9,88,194,.5);
  animation:zumbadorOnda 1s ease-out infinite;
  pointer-events:none;
}
@keyframes zumbadorVibra{0%,100%{transform:rotate(0)}50%{transform:rotate(-8deg)}}
@keyframes zumbadorOnda{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}

/* La mesa de trabajo se siente un poco mas viva mientras arrastras algo */
.sim-board.drag-over{
  background-color:var(--sim-bg);
  box-shadow:inset 0 0 0 2px var(--sim-bd);
}

/* ============================================================
   VISTA PREVIA 3D (primer paso del editor 3D)
   ============================================================ */
.comp3d-wrap{ text-align:center }
.comp3d-host{
  width:100%; height:340px; border-radius:var(--r-lg);
  background:radial-gradient(circle at 50% 40%, #fff 0%, var(--sim-bg) 100%);
  border:1px solid var(--slate-200); overflow:hidden;
}
.comp3d-host canvas{ display:block; touch-action:none }
.comp3d-caption{ margin-top:14px; color:var(--slate-500); font-size:.875rem; max-width:460px; margin-left:auto; margin-right:auto }