:root{
  --bg:#161b22;
  --panel:#161b22;
  --text:#e6edf3;
  --muted:#9aa7b2;
  --accent:#2ea043;
  --border:#30363d;
  --focus:#1f6feb;

  /* Scrollbar theme */
  --scroll-track:#0b0f14;
  --scroll-thumb:#3a424a;
  --scroll-thumb-hover:#4a545f;
  --scroll-thumb-active:#5a6673;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  display:flex; flex-direction:column;
}

header,footer{padding:12px 16px;background:var(--panel);border-bottom:1px solid var(--border)}
footer{border-top:1px solid var(--border);border-bottom:0}
p{margin:0;color:var(--muted)}

/* === LAYOUT: sidebar (toolbar) + vista 3D === */
.workspace{
  flex:1;
  display:grid;
  grid-template-columns: clamp(300px, 32vw, 420px) 1fr; /* sidebar / 3D */
  gap:12px;
  padding:12px;
  background:var(--panel);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

/* Toggle (oculto en desktop, visible en móvil) */
.toolbar-toggle{
  display:none;
  margin:0 0 8px;
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#11161d;
  color:var(--text);
  cursor:pointer;
}
.toolbar-toggle:hover{filter:brightness(1.07)}
.toolbar-toggle:active{transform:translateY(1px)}

/* Sidebar */
.toolbar{
  display:grid;            /* stack de grupos */
  grid-auto-rows:min-content;
  gap:12px;
  background:#0f141a;
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  overflow:auto;
  max-height:calc(100vh - 120px); /* margen aprox para header/footer */
}
.toolbar .group{
  background:transparent;
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px;
}
.toolbar .group.inline .row{display:flex;gap:8px;align-items:center;margin-top:6px}

/* Vista 3D */
main{display:block}
#viewport{
  position:relative;
  height:100%;
  min-height:460px;
  background:#0b0f14;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
}
canvas{display:block;width:100%;height:100%}

/* ===== Inputs ===== */
label{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}

input[type="text"],input[type="number"]{
  width:100%;padding:8px 10px;border:1px solid var(--border);
  background:#0b0f14;color:var(--text);border-radius:8px;outline:none
}
input[type="text"]:focus,input[type="number"]:focus{
  border-color:var(--focus);
  box-shadow:0 0 0 3px rgba(31,111,235,.25)
}

/* Botón moderno para seleccionar archivo (input file oculto en HTML) */
.file-btn{
  width:100%;
  display:flex; align-items:center; justify-content:center;
  gap:.6rem;
  padding:12px 14px;
  border:2px dashed var(--border);
  border-radius:12px;
  background:#0b0f14;
  color:var(--text);
  cursor:pointer;
  transition:filter .2s,border-color .2s,box-shadow .2s,transform .06s;
}
.file-btn:hover{filter:brightness(1.07);border-color:#3a424a}
.file-btn:active{transform:translateY(1px)}
.file-btn small{opacity:.7; font-size:12px}

/* Fallback (si no usas el botón anterior) */
input[type="file"]{
  width:100%;padding:14px;border:2px dashed var(--border);
  background:#0b0f14;color:var(--muted);border-radius:12px;outline:none;
  transition:border-color .2s, background .2s, box-shadow .2s
}
input[type="file"]::file-selector-button{
  padding:8px 12px;margin-right:12px;border:1px solid var(--border);
  border-radius:8px;background:#11161d;color:var(--text);cursor:pointer;
  transition:transform .06s ease, filter .2s
}
input[type="file"]:hover{border-color:#3a424a}
input[type="file"]:focus{border-color:var(--focus);box-shadow:0 0 0 4px rgba(31,111,235,.18)}
input[type="file"]::file-selector-button:hover{filter:brightness(1.1)}
input[type="file"]::file-selector-button:active{transform:translateY(1px)}

/* Botones */
button{
  padding:10px 14px;border:1px solid var(--border);border-radius:10px;
  background:#11161d;color:var(--text);cursor:pointer;
  transition:transform .06s ease, filter .2s, box-shadow .2s
}
button:hover{filter:brightness(1.07)}
button:active{transform:translateY(1px)}
button.primary{
  background:var(--accent);border-color:#2b7a3f;color:#05160a;font-weight:700;
  box-shadow:0 8px 18px rgba(46,160,67,.22)
}
button:disabled{opacity:.6;cursor:not-allowed}

#modePickFace.active{outline:2px solid var(--accent)}
#viewport{cursor:default}

/* Acciones agrupadas */
.row-actions{display:flex; flex-wrap:wrap; gap:8px}

/* ===== Responsivo ===== */
@media (max-width: 1100px){
  .workspace{grid-template-columns: clamp(260px, 36vw, 320px) 1fr}
}

@media (max-width: 700px){
  .workspace{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(55vh, 1fr); /* toggle, menú, 3D */
  }
  #viewport{min-height:55vh}

  /* Mostrar botón para colapsar/expandir menú */
  .toolbar-toggle{display:block}

  /* Menú colapsable (cerrado por defecto; se abre con .is-open) */
  .toolbar{
    max-height:0;
    padding:0 12px;
    border:none;
    overflow:hidden;
    transition:max-height .25s ease, padding .2s ease, border-color .2s ease;
    order:2; /* debajo del toggle */
  }
  .toolbar.is-open{
    max-height:80vh;
    padding:12px;
    border:1px solid var(--border);
    margin-bottom:8px;
  }

  /* Centrar botones y filas en móvil */
  .toolbar .group .row{justify-content:center}
  .row-actions{justify-content:center}
}

/* ===== Scrollbars a juego con el tema ===== */
/* Firefox */
*{scrollbar-width:thin; scrollbar-color:var(--scroll-thumb) var(--scroll-track)}

/* WebKit (Chrome, Edge, Safari, Opera) */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--scroll-track);border-radius:8px}
::-webkit-scrollbar-thumb{
  background-color:var(--scroll-thumb);
  border-radius:8px;
  border:2px solid var(--scroll-track);
}
::-webkit-scrollbar-thumb:hover{background-color:var(--scroll-thumb-hover)}
::-webkit-scrollbar-thumb:active{background-color:var(--scroll-thumb-active)}

/* Scrollbar un poco más fino dentro de la sidebar */
.toolbar{scrollbar-width:thin}
.toolbar::-webkit-scrollbar{width:8px}

/* Mantiene el layout estable cuando aparece el scroll (Chrome/Edge/Safari) */
html{scrollbar-gutter:stable both-edges}

/* === Overrides móviles (solo lo necesario) === */
@media (max-width:700px){
  /* Orden: toggle (si lo tienes), menú ARRIBA, 3D ABAJO */
  .workspace{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr; /* toggle, menú, 3D */
  }
  .toolbar{
    grid-row: 2; /* menú arriba */
  }
  main{
    grid-row: 3;
    min-height: 0; /* evita que el contenedor 3D empuje y “crezca” */
  }
  #viewport{
    height: 60svh;   /* altura estable en móvil */
    min-height: 360px;
  }
}