/*┌────────────────────────────────────────────────────┐
  │ KRAFT STEAM Elements                               │
  │ COPYRIGHT (c) 2026 Pedro Luis Barrio. BITaMinD R+D │
  │ ALL RIGHTS RESERVED.                               │
  └────────────────────────────────────────────────────┘ */
 
 body {
    min-height  : 100vh;
    display     : grid;
    grid-template-columns: 30rem 1fr;
    grid-template-rows: auto 1fr;
  }
 
     
 .header {
    grid-column   : 1 / -1;
    padding       : 1.8rem 2rem;
    border-bottom : 1px solid var(--border);
    display       : flex;
    flex-direction: row;
    align-items   : baseline;
    gap           : 1.4rem;
  }
  
  .stackpanel {
     display      : flex;
     gap          : 0.4rem;
     padding      : 0.2rem;
     margin-left   : auto; /* Empuja el selector a la derecha */
     flex-direction: row;
  }
  
  /* Cuando la pantalla sea grande (PC), cambia a fila */
  @media (max-width: 769px) {
    .stackpanel { flex-direction: column;}
  }
 
 .control-panel {
    padding        : 2rem 2rem;
    border-right   : 1px solid var(--border);
    display        : flex;
    flex-direction : column;
    gap            : 1.4rem;
    overflow-y     : auto;
  }
  
  .control-vertical-group  {
    display       : flex;
    flex-direction: column;
    gap           : 1.4rem;
   }

  /* Divider */
  .divider {
    border     : none;
    border-top : 1px solid var(--border);
  }
    
  .tags-container {

    gap: 10px;          
    margin-top: auto;   
    padding-bottom: 20px; /* Despegado del borde inferior de la pantalla */
  }  
    
  /* ── Preview pane ── */
  .preview-pane {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    padding         : 3.2rem;
    position        : relative;
    overflow        : hidden;
  }

  .preview-pane::before {
    content: '';
    position: absolute;
    inset: 0;

    pointer-events: none;
  }
  
   @media (max-width: 768px) {
     body { grid-template-columns: 18rem 1fr;}
     .header        { padding      : 1rem 1rem; gap           : 0.1rem;}
     .control-panel { padding      : 1rem 1rem; gap           : 1rem;}
     .control-vertical-group  {gap           : 0.5rem;}
     .preview-pane  { padding      : 1rem;
  }