:root{
    --ink:#15231f;
    --muted:#66736f;
    --paper:#f7f5ef;
    --surface:#ffffff;
    --accent:#e4aa3b;
    --accent-dark:#b9780d;
    --green:#1f5f4f;
    --green-2:#163d34;
    --line:#e6e3da;
}
html,body{min-height:100%}
body{
    background:var(--paper);
    color:var(--ink);
    display:flex;
    min-height:100vh;
    flex-direction:column;
}
.app-navbar{background:linear-gradient(90deg,var(--green-2),var(--green))}
.brand-mark{
    display:inline-grid;place-items:center;width:30px;height:30px;margin-right:.5rem;
    border-radius:9px;background:var(--accent);color:#1d2b27;font-weight:900
}
.hero{
    padding:5rem 0 4rem;
    background:
        radial-gradient(circle at 85% 15%,rgba(228,170,59,.25),transparent 28%),
        linear-gradient(135deg,#eef1e8,#f8f5ee 60%);
}
.hero h1{font-size:clamp(2.4rem,6vw,4.8rem);line-height:.96;letter-spacing:-.045em}
.hero-copy{font-size:1.15rem;color:var(--muted);max-width:640px}
.feature-card,.app-card{
    background:var(--surface);border:1px solid var(--line);border-radius:18px;
    box-shadow:0 10px 30px rgba(20,40,35,.06)
}
.feature-card{padding:1.4rem;height:100%}
.feature-icon{
    width:42px;height:42px;display:grid;place-items:center;border-radius:12px;
    background:#f5e7c8;font-size:1.2rem
}
.section-title{letter-spacing:-.025em}
.metric{font-size:2rem;font-weight:800}
.text-muted-2{color:var(--muted)}
.btn-primary{
    --bs-btn-bg:var(--green);--bs-btn-border-color:var(--green);
    --bs-btn-hover-bg:var(--green-2);--bs-btn-hover-border-color:var(--green-2)
}
.btn-warning{
    --bs-btn-bg:var(--accent);--bs-btn-border-color:var(--accent);
    --bs-btn-hover-bg:#d79927;--bs-btn-hover-border-color:#d79927;color:#1d2b27
}
.auth-wrap{max-width:500px;margin:4rem auto}
.catalog-thumb{
    height:180px;border-radius:14px;background:
    linear-gradient(145deg,#e9e5dc,#faf8f3);display:grid;place-items:center;overflow:hidden
}
.cabinet-mini{position:relative;width:110px;height:130px;background:#b98552;border:8px solid #99673a;box-shadow:10px 12px 25px rgba(0,0,0,.15)}
.cabinet-mini:before{content:"";position:absolute;inset:0 50% 0 0;border-right:2px solid #7f5028}
.cabinet-mini.shelves:after{content:"";position:absolute;left:0;right:0;top:48%;border-top:5px solid #99673a}
.builder-layout{display:grid;grid-template-columns:360px minmax(0,1fr);gap:1rem}
.builder-panel{background:white;border:1px solid var(--line);border-radius:16px;padding:1rem}
#viewer{
    min-height:640px;background:#e8ece7;border-radius:16px;overflow:hidden;
    border:1px solid var(--line);position:relative
}
#viewer canvas{display:block;width:100%;height:100%}
.viewer-badge{position:absolute;top:12px;left:12px;z-index:2}
.table-cutlist td,.table-cutlist th{vertical-align:middle;white-space:nowrap}
.project-card{transition:.18s transform ease,.18s box-shadow ease}
.project-card:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(20,40,35,.1)}
@media(max-width:991px){
    .builder-layout{grid-template-columns:1fr}
    #viewer{min-height:480px}
}

.fw-black{font-weight:900}


/* V1.2 - Optimizador */
.optimizer-layout{display:grid;grid-template-columns:330px minmax(0,1fr);gap:1rem;align-items:start}
.optimizer-settings{position:sticky;top:92px}
.optimizer-board-card{break-inside:avoid}
.optimizer-svg-wrap{width:100%;overflow:auto;border:1px solid var(--line);border-radius:14px;background:#eef0eb;padding:.75rem}
.optimizer-svg{display:block;width:100%;height:auto;min-width:620px;background:#fff}
.optimizer-group-heading{margin-top:1.25rem}
@media(max-width:991px){
    .optimizer-layout{grid-template-columns:1fr}
    .optimizer-settings{position:static}
    .optimizer-svg{min-width:560px}
}
@media print{
    .app-navbar,footer,.optimizer-settings,#runOptimizerBtn,#printOptimizerBtn,.btn{display:none!important}
    body{background:#fff}
    main.container{max-width:none!important;width:100%!important;padding:0!important}
    .optimizer-layout{display:block}
    .optimizer-board-card,.app-card{box-shadow:none!important;border:1px solid #bbb!important}
    .optimizer-svg{min-width:0!important}
}

/* V1.3 - Constructor avanzado */
.builder-layout-v13{grid-template-columns:390px minmax(0,1fr);align-items:start}
.builder-panel-v13{max-height:calc(100vh - 118px);overflow:auto;position:sticky;top:92px}
.builder-accordion .accordion-item{border-color:var(--line);background:#fff}
.builder-accordion .accordion-button{font-weight:700;background:#fff;color:var(--ink);padding:.9rem 1rem}
.builder-accordion .accordion-button:not(.collapsed){background:#f7f5ef;color:var(--green);box-shadow:none}
.builder-accordion .accordion-button:focus{box-shadow:0 0 0 .2rem rgba(31,95,79,.12)}
.builder-accordion .accordion-body{padding:1rem}
.builder-config-row{display:flex;align-items:end;gap:.5rem;padding:.65rem;border:1px solid var(--line);border-radius:12px;background:#fbfaf6}
.shelf-config-row{align-items:center}
.builder-empty-state{padding:.8rem;border:1px dashed #cbc8bd;border-radius:10px;color:var(--muted);font-size:.875rem;text-align:center}
.module-summary{border-top:1px solid var(--line);padding-top:.75rem}
.module-chip{display:inline-flex;align-items:center;padding:.28rem .5rem;border-radius:999px;background:#e8f1ed;color:#24594d;font-size:.76rem;font-weight:700}
.viewer-info{position:absolute;right:12px;top:12px;z-index:2;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.35rem;max-width:60%}
.viewer-info span{background:rgba(255,255,255,.9);border:1px solid rgba(0,0,0,.08);border-radius:999px;padding:.25rem .5rem;font-size:.72rem;font-weight:700;color:#31433e;backdrop-filter:blur(5px)}
.edge-badge{display:inline-block;padding:.2rem .45rem;border-radius:999px;background:#f4ead4;color:#6d4d12;font-size:.72rem;font-weight:700;white-space:nowrap}
.view-btn.active,.view-btn:active{background:var(--ink);color:#fff;border-color:var(--ink)}
@media(max-width:1199px){
    .builder-layout-v13{grid-template-columns:350px minmax(0,1fr)}
}
@media(max-width:991px){
    .builder-layout-v13{grid-template-columns:1fr}
    .builder-panel-v13{position:static;max-height:none;overflow:visible}
    .viewer-info{max-width:72%}
}
@media(max-width:575px){
    .viewer-info{left:12px;right:auto;top:42px;max-width:90%;justify-content:flex-start}
}