:root{
  --primary:#1976d2;
  --primary-dark:#0f4ca3;
  --card:#ffffff;
  --bg:#eef4fb;
  --bg-soft:#f7fbff;
  --muted:#667085;
  --text:#08324a;
  --border:#d9e7fb;
  --border-soft:#e6eef8;
  --shadow-sm:0 6px 18px rgba(20,20,60,0.10);
  --shadow-md:0 6px 20px rgba(20,20,60,0.06);
  --shadow-lg:0 20px 40px rgba(0,0,0,0.20);
  --radius-sm:8px;
  --radius-md:10px;
  --radius-lg:12px;
  --transition:180ms ease;
}

*{box-sizing:border-box}
html{height:100%}
body{
  margin:0;
  width:100%;
  min-height:100%;
  padding:16px;
  font-family:Inter, Arial, sans-serif;
  background:linear-gradient(180deg, var(--bg), var(--bg-soft));
  color:var(--text);
}

.app{
  width:min(96vw, 1600px);
  margin:0 auto;
}

header{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
}

.logo{
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  font-size:20px;
  font-weight:700;
  color:var(--primary);
}

h1{margin:0;font-size:20px;color:var(--text)}
.lead{margin:0;font-size:13px;color:var(--muted)}

.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  align-items:start;
  width:100%;
}

.grid > div{width:100%}

.grid.with-panel{
  grid-template-columns:minmax(0, 1fr) 340px;
}

.panel{
  display:none;
  position:sticky;
  top:20px;
  align-self:start;
}

.grid.with-panel .panel{display:block}

.card{
  background:var(--card);
  border-radius:var(--radius-lg);
  padding:12px;
  box-shadow:var(--shadow-md);
}

.section-title{
  margin:4px 0 12px;
  font-size:16px;
  color:var(--text);
}

.group{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.group.two-col{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bold-label{font-weight:700}

label{
  display:block;
  margin-top:10px;
  font-size:14px;
  color:var(--muted);
}

input,
select,
textarea{
  width:100%;
  padding:12px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:#fbfdff;
  font-size:18px;
  transition:border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}

textarea{
  resize:vertical;
  min-height:40px;
  font-family:inherit;
}

input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(25,118,210,0.14);
  background:#fff;
}

.opcion-btn,
.btn,
.reset-view-btn{
  transition:transform var(--transition), box-shadow var(--transition), background-color var(--transition), border-color var(--transition);
}

.opcion-btn{
  padding:14px;
  border:2px solid var(--border-soft);
  border-radius:var(--radius-md);
  background:#fff;
  font-size:18px;
  text-align:center;
  cursor:pointer;
}

.opcion-btn:hover,
.btn:hover,
.reset-view-btn:hover{
  transform:translateY(-1px);
}

.opcion-btn.seleccionado{
  color:#fff;
  border-color:var(--primary-dark);
  background:linear-gradient(90deg, var(--primary), var(--primary-dark));
}

.actions{display:flex;gap:10px;margin-top:12px}
.btn{
  flex:1;
  padding:12px 14px;
  border:none;
  border-radius:var(--radius-md);
  background:var(--primary);
  color:#fff;
  font-size:16px;
  cursor:pointer;
}
.btn.secondary{
  background:#fff;
  border:2px solid #d6e7fb;
  color:var(--text);
}
.btn:focus-visible,
.opcion-btn:focus-visible,
.reset-view-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(25,118,210,0.18);
}

.stat{
  display:flex;
  justify-content:space-between;
  padding:10px 12px;
  margin-bottom:8px;
  border-radius:var(--radius-sm);
  background:linear-gradient(180deg,#fbfdff,#f7fbff);
  font-size:15px;
}

.taladro-list{margin-top:12px;max-height:calc(78vh - 260px);overflow:auto;padding-right:6px}
.taladro-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px;
  margin-bottom:10px;
  border:1px solid #e7effc;
  border-radius:var(--radius-sm);
  background:#fff;
  font-size:15px;
}
.tal-left{display:flex;gap:10px;align-items:center}
.tal-right{display:flex;align-items:center;gap:8px}
.tal-right button{
  padding:6px 10px;
  border:1px solid #ffbfc8;
  border-radius:6px;
  background:#ffeef0;
  color:#b30000;
  cursor:pointer;
  font-size:12px;
}

.resumen-overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,0.45);
}
.resumen-card{
  width:100%;
  max-width:520px;
  padding:20px;
  border-radius:var(--radius-lg);
  background:#fff;
  box-shadow:var(--shadow-lg);
}
.resumen-row{display:flex;justify-content:space-between;margin:8px 0;font-size:15px}

#canvasMalla{
  display:block;
  touch-action:none;
}

/* Utility + layout classes replacing inline styles */
.is-hidden{display:none}
.flex-1{flex:1}
.mt-0{margin-top:0}
.mt-10{margin-top:10px}
.mt-12{margin-top:12px}
.view-block{margin-top:16px}
.select-block{width:100%}
.select-mb-20{margin-bottom:20px}
.select-mb-25{margin-bottom:25px}
.btn-fixed-140{flex:0 0 140px}

.layout-v1{display:flex;gap:24px;align-items:flex-start}
.search-row{display:flex;gap:10px;margin-bottom:12px}
.canvas-wrap{position:relative;width:100%}
.reset-view-btn{
  position:absolute;
  top:10px;
  left:10px;
  z-index:10;
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:var(--radius-md);
  background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,0.18);
  color:#111;
  font-size:22px;
  font-weight:700;
  cursor:pointer;
}
.canvas-main{
  width:100%;
  height:78vh;
  border:1px solid #ccc;
  border-radius:var(--radius-sm);
  background:#fff;
}

.v3-header-banner{
  margin-bottom:16px;
  padding:14px;
  border-radius:var(--radius-lg);
  background:var(--primary);
  color:#fff;
  font-size:20px;
  font-weight:700;
  text-align:center;
}
.v3-subtitle{
  margin-top:-8px;
  margin-bottom:18px;
  color:#666;
  font-size:15px;
  font-weight:500;
  text-align:center;
}
.success-message{
  margin-bottom:15px;
  padding:10px;
  border-radius:var(--radius-sm);
  background:#e8f5e9;
  color:#2e7d32;
  font-weight:600;
  text-align:center;
}

.v3-layout{display:flex;gap:25px;align-items:flex-start;width:100%}
.v3-sidebar{flex:0 0 420px;max-width:420px}
.v3-main{flex:1;min-width:420px}
.designs-row{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;row-gap:8px;align-items:start}
.span-2{grid-column:1 / span 2}
.grid-2{display:grid;grid-template-columns:1fr 1fr}
.gap-20{gap:20px}
.gap-22{gap:22px}
.divider-soft{height:1px;background:#e6edf7;margin:12px 0 0}
.trim-box{margin-top:6px}
.inline-check{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  color:#111;
}
.check-18{width:18px;height:18px}
.radio-stack{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.radio-option{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  color:#111;
  font-size:16px;
}
.textarea-comment{margin-top:6px;padding:8px;border-radius:var(--radius-sm)}
.actions-center-lg{margin-top:16px;justify-content:center;gap:14px}
.summary-title{margin-bottom:8px;font-size:18px;font-weight:700}
.summary-actions{display:flex;gap:10px;margin-top:14px}

/* Better responsive behavior without changing app logic */
@media (max-width: 1200px){
  .v3-layout{
    flex-direction:column;
  }
  .v3-sidebar,
  .v3-main{
    max-width:none;
    min-width:0;
    width:100%;
    flex:1 1 auto;
  }
}

@media (max-width: 980px){
  .layout-v1{
    flex-direction:column;
  }
  .grid.with-panel{
    grid-template-columns:1fr;
  }
  .panel{
    position:static;
  }
  .canvas-main{
    height:64vh;
  }
}

@media (max-width: 720px){
  body{padding:12px}
  .app{width:100%}
  header{align-items:flex-start}
  .group.two-col,
  .form-grid,
  .grid-2{
    grid-template-columns:1fr;
  }
  .span-2{grid-column:auto}
  .search-row,
  .actions,
  .summary-actions{
    flex-direction:column;
  }
  .btn-fixed-140{flex:1 1 auto}
  .canvas-main{height:56vh}
}

.connection-banner{
  position:fixed;
  top:12px;
  right:12px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:190px;
}
.connection-pill,
.sync-pill{
  padding:8px 12px;
  border-radius:10px;
  color:#fff;
  font-size:13px;
  font-weight:700;
  box-shadow:0 8px 18px rgba(0,0,0,0.18);
}
.connection-pill.online{background:#2e7d32}
.connection-pill.offline{background:#c62828}
.connection-pill.syncing{background:#1565c0}
.sync-pill{
  display:none;
  background:#6d4c41;
}
.sync-pill.show{display:block}

@media (max-width: 720px){
  .connection-banner{
    top:8px;
    right:8px;
    left:8px;
    min-width:0;
  }
}