/* TECNAC: graphite brushed finish and copper, inspired by the supplied packaging. */
@media screen {
body.design-studio,body.design-studio.theme-premium,body.design-studio:not(.theme-premium){--bg-base:#171819;--panel-bg:#202123;--panel-border:#48413a;--primary:#dc9962;--primary-hover:#efb783;--accent:#dc9962;--text-main:#f0eae4;--text-muted:#b7aea5;--primary-glow:#dc996226;--accent-glow:#dc996226;--shadow-lg:0 12px 32px #0005;--glass-blur:none;background:#121314;color:var(--text-main);font-family:Inter,Segoe UI,sans-serif;}
body.design-studio .tech-bg-overlay,body.design-studio.theme-premium .tech-bg-overlay{background:radial-gradient(ellipse at 0 0,#bc77351a,transparent 48%),linear-gradient(135deg,#222324,#111213);opacity:1;}
body.design-studio header{background:repeating-linear-gradient(0deg,#ffffff03 0,#ffffff03 1px,transparent 1px,transparent 4px),linear-gradient(110deg,#303031,#18191a 55%,#292a2c);border-bottom:1px solid #c68b55;box-shadow:0 4px 20px #0005;}
body.design-studio .main-logo,body.design-studio.theme-premium .main-logo{filter:brightness(0) saturate(100%) invert(69%) sepia(28%) saturate(668%) hue-rotate(342deg) brightness(92%) contrast(89%);}
body.design-studio .brand-caption strong{color:#e0a16c;}
body.design-studio .brand-caption{border-color:#78604b;}
body.design-studio .sidebar,body.design-studio.theme-premium .sidebar{background:repeating-linear-gradient(0deg,#ffffff02 0,#ffffff02 1px,transparent 1px,transparent 4px),linear-gradient(105deg,#2a2b2c,#1b1c1e);border:1px solid #7e5c40;border-radius:9px;box-shadow:inset 0 1px 0 #ddd8cc35,0 8px 24px #0004;}
body.design-studio .sidebar h2,body.design-studio.theme-premium .sidebar h2{color:#dda06d;border-color:#6d503a;font-weight:600;text-shadow:none;}
body.design-studio .sidebar input,body.design-studio .sidebar select,body.design-studio.theme-premium .sidebar input,body.design-studio.theme-premium .sidebar select{background:#151719;color:#f0eae4;border-color:#52504c;box-shadow:inset 0 2px 4px #0003;}
body.design-studio input:focus,body.design-studio select:focus{border-color:#dc9962;}
body.design-studio select option{background:#1c1d1f;color:#f0eae4;}
body.design-studio #mode-select,body.design-studio.theme-premium #mode-select{background:linear-gradient(120deg,#3d3026,#27221e);color:#efb783;border-color:#9d6b44;}
body.design-studio .tech-btn,body.design-studio.theme-premium .tech-btn{background:linear-gradient(#303133,#202123);border-color:#62564b;color:#e9dfd5!important;box-shadow:inset 0 1px 0 #ffffff0d;text-shadow:none;backdrop-filter:none;}
body.design-studio .tech-btn:hover,body.design-studio.theme-premium .tech-btn:hover{background:#493428;border-color:#e2a36e;color:#f4c8a4!important;box-shadow:none;}
body.design-studio #btn-show-summary,body.design-studio #btn-add-project{background:linear-gradient(135deg,#ecb17c,#be7e49)!important;color:#1e1711!important;border-color:#efbf92!important;font-weight:700;box-shadow:inset 0 1px 0 #ffe6cc66,0 3px 8px #0003;}
body.design-studio #btn-show-summary:hover,body.design-studio #btn-add-project:hover{background:linear-gradient(135deg,#f3c297,#d59863)!important;color:#1e1711!important;}
body.design-studio .results-box,body.design-studio.theme-premium .results-box{background:linear-gradient(135deg,#322920,#211e1b);border-color:#8c6242;box-shadow:inset 0 1px 0 #e3ae7c22;}
body.design-studio .result-header,body.design-studio .result-value{color:#efb783;}
body.design-studio .result-item{border-color:#67503b;}
body.design-studio .result-label{color:#e2d9cf;}
body.design-studio .canvas-area,body.design-studio.theme-premium .canvas-area{background:repeating-linear-gradient(0deg,#ffffff02 0,#ffffff02 1px,transparent 1px,transparent 4px),linear-gradient(110deg,#292a2c,#191b1d);border:1px solid #9d6b44;border-radius:9px;box-shadow:inset 0 1px 0 #f9ede344,0 8px 24px #0004;}
body.design-studio .workspace-title{color:#e3ac7d;letter-spacing:.02em;}
body.design-studio .workspace-dot{background:#e4a36c;box-shadow:0 0 8px #d4924a55;}
body.design-studio .proyecto-top-bar{border-color:#68503d;}
body.design-studio #proyecto-top-bar input,body.design-studio.theme-premium #proyecto-top-bar input{color:#f0eae4!important;border-bottom-color:#836144!important;}
body.design-studio #drawing-wrapper,body.design-studio.theme-premium #drawing-wrapper{background-color:#f3f1ec;background-image:radial-gradient(#c9c5be .7px,transparent .7px);border:1px solid #b7a18d;border-radius:6px;box-shadow:inset 0 2px 8px #30231915;}
body.design-studio #drawing-wrapper .empty-state{color:#665544;background:#f8f6f1;border-color:#d7c5b4;box-shadow:none;}
body.design-studio .handle-preview-card,body.design-studio.theme-premium .handle-preview-card{background:#242628;color:#f0eae4;border-color:#9d6b44;box-shadow:none;}
body.design-studio .handle-preview-title{color:#e3ac7d;}
body.design-studio .tools-menu>summary{background:#252628;border-color:#79614d;color:#e3ac7d;}
body.design-studio .tools-popover{background:#202123;border-color:#9d6b44;box-shadow:0 12px 40px #0007;}
body.design-studio #btn-toggle-theme{display:none;}
body.design-studio .modal-box{background:#202123;color:#f0eae4;border:1px solid #9d6b44;}
body.design-studio .modal-box h3{color:#e3ac7d;}
body.design-studio :is(button,summary,input,select):focus-visible{outline-color:#edb585;}
body.design-studio .watermark-main-panel{display:none;}
body.design-studio #kit-preview-wrapper>div{border-color:#9d6b44!important;background:#242628!important;}
@media(max-width:768px){body.design-studio .sidebar>.panel-section,body.design-studio .sidebar>div[style*="margin-top"]{background:linear-gradient(110deg,#292a2c,#1b1c1e);border-color:#7e5c40;}body.design-studio .canvas-area{min-height:540px;} }
}
/* Keep the options menu above all workspace previews, below application dialogs. */
@media screen {
body.design-studio header {z-index:200;overflow:visible;}
body.design-studio main {z-index:0;isolation:isolate;}
body.design-studio .tools-menu[open] {z-index:1;}
body.design-studio .tools-popover {max-height:calc(100dvh - 110px);overflow-y:auto;}
/* Avoid competing previews in the same corner while options are expanded. */
body.design-studio:has(.tools-menu[open]) #handle-preview-card {visibility:hidden;pointer-events:none;}
}
@media screen {
body.design-studio #drawing-wrapper,body.design-studio.theme-premium #drawing-wrapper{background-color:#1d1f21;background-image:repeating-linear-gradient(0deg,#ffffff02 0,#ffffff02 1px,transparent 1px,transparent 4px),radial-gradient(ellipse at 50% 40%,#303235,#1b1d1f 80%);border:1px solid #51483e;box-shadow:inset 0 1px 0 #ffffff0b;}
body.design-studio #drawing-wrapper .empty-state{color:#d8b18d;background:#252628;border-color:#76563e;box-shadow:0 6px 22px #0002;}
body.design-studio #drawing-wrapper svg text[fill="#212529"]{fill:#f0eae4;}
body.design-studio #drawing-wrapper .draw-anim-dims [stroke="#333"]{stroke:#d9b18c;}
body.design-studio #drawing-wrapper .draw-anim-dims [fill="#333"]{fill:#d9b18c;}
}
/* Packaging photograph in the recreation area only. */
@media screen {
body.design-studio #drawing-wrapper,body.design-studio.theme-premium #drawing-wrapper {
    background:#1b1d1f;
    isolation:isolate;
}
body.design-studio #drawing-wrapper::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    border-radius:inherit;
    background-image:linear-gradient(#14161833,#14161855),url('assets/fondo-cajas-tecnac.jpg');
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    opacity:.60;
    pointer-events:none;
    transition:opacity .35s ease;
}
body.design-studio #drawing-wrapper:has(> svg)::before {opacity:.15;}
body.design-studio #drawing-wrapper .empty-state {
    background:#1b1d1fe8;
    color:#f0dfcf;
    border:1px solid #a07853;
    box-shadow:0 8px 26px #0005;
}
@media(prefers-reduced-motion:reduce) {
    body.design-studio #drawing-wrapper::before {transition:none;}
}
}
/* Reserve a fixed work area for cuts and the add action. Only configuration scrolls. */
@media screen and (min-width:769px) {
body.design-studio .sidebar {min-height:0;overflow:hidden;padding:14px 16px;gap:12px;}
body.design-studio .configuration-scroll {flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;padding:4px 6px 4px 2px;scrollbar-width:thin;scrollbar-color:#9d6b44 #202123;}
body.design-studio .configuration-scroll>.panel-section {margin-bottom:16px;}
body.design-studio .configuration-scroll:focus-within {scroll-behavior:auto;}
body.design-studio .work-dock {flex:0 0 auto;border-top:1px solid #6d503a;padding-top:10px;}
body.design-studio .work-dock .results-box {margin:0;padding:10px 12px;}
body.design-studio .results-scroll-area {max-height:none;overflow:visible;padding-right:0;}
body.design-studio .result-item {padding:5px 0;}
body.design-studio .result-value {font-size:17px;}
body.design-studio #validation-msg:empty {display:none;}
body.design-studio #validation-msg {font-size:11px;max-height:64px;overflow-y:auto;margin-top:6px;}
body.design-studio main {min-height:0;}
body.design-studio .sidebar>.no-screen {display:none;}
}
@media screen and (max-width:768px) {
body.design-studio .configuration-scroll {display:contents;}
body.design-studio .configuration-scroll>.panel-section {background:#242628;border:1px solid #7e5c40;border-radius:10px;padding:16px;}
body.design-studio .work-dock {order:5;width:100%;}
body.design-studio .results-scroll-area {max-height:none;overflow:visible;}
}
@media screen and (max-height:620px) and (min-width:769px) {
body.design-studio header {height:64px;min-height:64px;}
body.design-studio main {padding:10px;gap:10px;}
body.design-studio .result-item {padding:2px 0;}
}
@media screen and (max-height:440px) {
body.design-studio {height:auto;min-height:100vh;overflow:auto;}
body.design-studio main {overflow:visible;min-height:460px;}
}
@media screen {
body.design-studio #drawing-wrapper:has(svg)::before {opacity:.10;}
body.design-studio .tools-popover #btn-demo-ia {background:linear-gradient(#493428,#30241c)!important;border-color:#9d6b44!important;box-shadow:none!important;}
body.design-studio .tools-popover .tech-btn {border-color:#62564b!important;}
}
/* Desktop work panel: all controls arranged in a grid, no internal scrolling. */
@media screen and (min-width:769px) {
body.design-studio main {grid-template-columns:520px minmax(0,1fr);padding:12px;gap:14px;}
body.design-studio .sidebar {padding:14px;gap:10px;overflow:visible;}
body.design-studio .configuration-scroll {display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:10px 16px;flex:0 0 auto;overflow:visible;padding:0;min-height:0;align-items:start;}
body.design-studio .configuration-scroll>.panel-section {margin:0;}
body.design-studio .configuration-scroll>.panel-section:first-child {grid-column:1 / -1;}
body.design-studio #panel-config {grid-column:1;grid-row:3;}
body.design-studio #panel-tecnico {grid-column:2;grid-row:3;}
body.design-studio #panel-components {grid-column:1 / -1;}
body.design-studio #mode-info-panel {grid-column:1 / -1;margin:0;font-size:11px;}
body.design-studio .sidebar h2 {margin-bottom:8px;padding-bottom:6px;font-size:10px;}
body.design-studio .sidebar .form-group {margin-bottom:7px;}
body.design-studio .sidebar input,body.design-studio .sidebar select {min-height:33px;padding:6px 8px;font-size:11px;}
body.design-studio .sidebar label {font-size:10px;margin-bottom:3px;}
body.design-studio #panel-tecnico>.form-group.row {display:flex;flex-direction:column;gap:8px;}
body.design-studio #panel-tecnico>.form-group.row>.col {width:100%;flex:auto;}
body.design-studio #panel-tecnico input {min-height:44px;font-size:22px;}
body.design-studio .work-dock {margin-top:auto;padding-top:8px;}
body.design-studio .results-scroll-area {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible;max-height:none;}
body.design-studio .result-item {display:flex;flex-direction:column;align-items:flex-start;gap:4px;border-bottom:0;padding:3px 0;min-width:0;}
body.design-studio .result-label {font-size:10px;line-height:1.3;}
body.design-studio .result-value {font-size:20px;}
body.design-studio #validation-msg {max-height:none;overflow:visible;line-height:1.3;font-size:10px;}
body.design-studio .canvas-area {padding-left:14px;padding-right:14px;}
body.design-studio .proyecto-top-bar {left:18px;right:160px;}
}
@media screen and (min-width:769px) and (max-height:760px) {
body.design-studio header {height:60px;min-height:60px;padding:0 20px;}
body.design-studio .sidebar {padding:10px;gap:7px;}
body.design-studio .configuration-scroll {gap:7px 12px;}
body.design-studio .sidebar .form-group {margin-bottom:5px;}
body.design-studio .sidebar input,body.design-studio .sidebar select {min-height:30px;padding:5px 7px;}
body.design-studio #panel-tecnico input {min-height:38px;}
body.design-studio .sidebar h2 {margin-bottom:6px;padding-bottom:4px;}
body.design-studio .compass-range-info {font-size:9px;line-height:1.3;}
body.design-studio .work-dock .results-box {padding:8px 10px;}
body.design-studio .tech-btn {min-height:34px;padding:8px 12px;}
}
@media screen and (min-width:769px) and (max-width:1100px) {
body.design-studio main {grid-template-columns:460px minmax(0,1fr);}
body.design-studio .proyecto-top-bar {right:18px;}
}
/* Kit mode has no dimension column: use the whole configuration width. */
@media screen and (min-width:769px) {
body.design-studio .configuration-scroll:has(#panel-tecnico.hidden) #panel-config {grid-column:1 / -1;}
body.design-studio .configuration-scroll:has(#panel-tecnico.hidden) #panel-config .form-group.row {gap:12px;}
body.design-studio .configuration-scroll:has(#panel-tecnico.hidden) #panel-config .col {min-width:0;}
body.design-studio .configuration-scroll:has(#panel-tecnico.hidden) #panel-config select {width:100%;font-size:12px;}
}
/* Softer packaging watermark, both before and after drawing. */
@media screen {
body.design-studio #drawing-wrapper::before {opacity:.22;}
body.design-studio #drawing-wrapper:has(svg)::before {opacity:.05;}
}
@media screen {
body.design-studio #drawing-wrapper::before {
 background-image:linear-gradient(#14161833,#14161855),url('assets/fondo-tecnac-esquina.png');
 background-position:right bottom;
}
}

/* Premium identity, visible help actions and full-strength photography. */
@media screen {
body.design-studio .main-logo,body.design-studio.theme-premium .main-logo {filter:none!important;width:180px;height:60px;object-fit:contain;flex-shrink:0;}
body.design-studio .header-left {gap:14px;}
body.design-studio .brand-caption {padding-left:14px;}
body.design-studio .primary-help-actions {display:flex;gap:8px;align-items:center;}
body.design-studio .primary-help-actions #btn-demo-ia {background:linear-gradient(#493428,#30241c)!important;border-color:#9d6b44!important;box-shadow:none!important;}
body.design-studio #drawing-wrapper::before,body.design-studio #drawing-wrapper:has(svg)::before {opacity:1;background-image:url('assets/fondo-tecnac-esquina.png');background-position:right bottom;}
@media(max-width:1250px) {body.design-studio .brand-caption {display:none;}body.design-studio .actions {gap:8px;}body.design-studio header {padding-left:16px;padding-right:16px;} }
@media(max-width:950px) {body.design-studio #lang-selector {display:none!important;}body.design-studio .main-logo {width:140px;height:46px;}body.design-studio .primary-help-actions .tech-btn {font-size:10px;padding:8px 10px;} }
@media(max-width:768px) {body.design-studio .actions {width:100%;justify-content:space-between;}body.design-studio .primary-help-actions {flex-wrap:wrap;} }
}
/* Blend the supplied premium logo into the header without recoloring it. */
@media screen {
body.design-studio header {isolation:isolate;}
body.design-studio .main-logo,body.design-studio.theme-premium .main-logo {
    mix-blend-mode:lighten;
    background:transparent;
    filter:none!important;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
    mask-composite:intersect;
}
}
@media screen {
.profile-switch {display:flex;gap:3px;padding:3px;background:#151719;border:1px solid #62564b;border-radius:7px;}
.profile-switch button {flex:1;min-height:30px;border:1px solid transparent;border-radius:4px;background:transparent;color:#b7aea5;font:600 11px Inter,Segoe UI,sans-serif;cursor:pointer;}
.profile-switch button[aria-pressed="true"] {background:#493428;color:#f2d4b8;border-color:#9d6b44;}
.profile-switch button:hover {color:#fff0df;}
.profile-switch button:focus-visible {outline:2px solid #edb585;outline-offset:1px;}
}
@media screen {
.profile-toggle {width:100%;display:flex;justify-content:space-between;align-items:center;min-height:33px;padding:6px 12px;border:1px solid #9d6b44;border-radius:7px;background:#30271f;color:#f2d4b8;font:600 11px Inter,Segoe UI,sans-serif;cursor:pointer;}
.profile-toggle:hover {background:#493428;}
body.design-studio #drawing-wrapper .draw-anim-frame,body.design-studio #drawing-wrapper .draw-anim-leaf,body.design-studio #drawing-wrapper .draw-anim-glass,body.design-studio #drawing-wrapper .draw-anim-dims,body.design-studio #drawing-wrapper .draw-anim-hw,body.design-studio #drawing-wrapper .hardware-piece {animation:none!important;opacity:1;}
}
@media screen {
body.design-studio .splash-logo {width:min(420px,70vw);height:auto;max-height:75vh;object-fit:contain;border-radius:8px;}
}
@media screen {
body.design-studio #demo-caption-overlay {position:relative;top:auto;left:auto;right:auto;width:calc(100% - 24px);margin:6px 12px 0;display:flex;flex-direction:row;align-items:center;gap:12px;padding:4px 14px;min-height:76px;flex-shrink:0;background:#242628;border:1px solid #79614d;border-radius:8px;transition:none;z-index:20;}
body.design-studio #demo-caption-overlay.demo-caption-hidden {display:none!important;}
body.design-studio .demo-teco-container {position:static;width:48px;height:68px;order:-1;flex-shrink:0;}
body.design-studio #demo-teco-img {animation:none;transform:none;object-fit:contain;filter:none;}
body.design-studio .demo-caption-box {background:transparent;box-shadow:none;padding:0;margin:0;min-height:0;flex:1;border:0;justify-content:space-between;}
body.design-studio #demo-caption-text {font-size:14px;line-height:1.4;text-align:left;letter-spacing:0;}
}
/* General application backdrop; recreation retains its own photograph. */
@media screen {
body.design-studio .tech-bg-overlay,body.design-studio.theme-premium .tech-bg-overlay {
    background-image:url('assets/fondo-pizarra.png');
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    opacity:1;
}
body.design-studio header,body.design-studio.theme-premium header {
    background:rgba(24,25,27,.90);
}
body.design-studio .sidebar,body.design-studio.theme-premium .sidebar,
body.design-studio .canvas-area,body.design-studio.theme-premium .canvas-area {
    background:rgba(28,30,32,.92);
}
}
@media screen {
body.design-studio header,body.design-studio.theme-premium header,
body.design-studio .sidebar,body.design-studio.theme-premium .sidebar,
body.design-studio .canvas-area,body.design-studio.theme-premium .canvas-area {
 background-image:linear-gradient(#181a1c55,#181a1c55),url('assets/fondo-pizarra.png');
 background-position:center;
 background-size:cover;
 background-repeat:no-repeat;
}
}
/* Reduce visual competition behind the window and its dimensions. */
@media screen {
body.design-studio #drawing-wrapper::before,
body.design-studio #drawing-wrapper:has(svg)::before {
 opacity:1;
 background-image:linear-gradient(rgba(20,22,24,.78),rgba(20,22,24,.78)),url('assets/fondo-tecnac-esquina.png');
 background-position:right bottom;
 background-size:cover;
}
}