:root{
  --void:#050505;--surf:#0f0f13;--panel:#1a1a20;--line:rgba(255,255,255,.08);
  --cream:#f5f5f0;--cream-d:#c5c5b8;--cream-x:#8a8a80;
  --ice:#67e8f9;--ice-b:#00d4ec;--red:#ef4444;--green:#22c55e;--gold:#eab308;
  --madera-accent:#b08040;
  /* Radius scale Apple-inspired (múltiplos generosos) */
  --r-sm:8px;--r-md:14px;--r-lg:20px;--r-xl:28px;--r-2xl:36px;
  /* Apple-inspired timings & easings */
  --ease-spring:cubic-bezier(0.5,1.15,0.5,1.15);
  --ease-out-quart:cubic-bezier(0.25,1,0.5,1);
  --dur-fast:150ms;
  --dur:250ms;
  --dur-slow:400ms;
  /* Frosted material fallbacks (Safari sin backdrop-filter) */
  --glass-bg:rgba(15,15,19,.72);
  --glass-bg-fallback:rgba(15,15,19,.92);
  --glass-border:1px solid rgba(255,255,255,.08);
  --glass-shadow:0 20px 60px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.08) inset;
  /* Depth shadow scale */
  --sh-1:0 1px 3px rgba(0,0,0,.16);
  --sh-2:0 8px 24px rgba(0,0,0,.28);
  --sh-3:0 24px 60px rgba(0,0,0,.44),0 1px 0 rgba(255,255,255,.08) inset;
  --sh-fab:0 10px 30px rgba(176,128,64,.35),0 1px 0 rgba(255,255,255,.12) inset;
}
/* Fallback si backdrop-filter no soportado */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  :root{ --glass-bg:var(--glass-bg-fallback); }
}

/* ═══ View Transitions ═══ */
::view-transition-old(screen-content),
::view-transition-new(screen-content){
  animation-duration:200ms;animation-timing-function:cubic-bezier(.4,0,.2,1);
}
::view-transition-old(screen-content){animation-name:vt-fade-out}
::view-transition-new(screen-content){animation-name:vt-fade-in}
@keyframes vt-fade-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-fade-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* Tile stagger fade-in */
@keyframes tile-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.tile-grid .tile{animation:tile-in .32s cubic-bezier(.4,0,.2,1) both}
.tile-grid .tile:nth-child(1){animation-delay:0ms}
.tile-grid .tile:nth-child(2){animation-delay:40ms}
.tile-grid .tile:nth-child(3){animation-delay:80ms}
.tile-grid .tile:nth-child(4){animation-delay:120ms}
.tile-grid .tile:nth-child(5){animation-delay:160ms}
.tile-grid .tile:nth-child(6){animation-delay:200ms}
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:radial-gradient(circle at top,#1a1208 0%,#050505 100%);
  color:var(--cream);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","Inter",system-ui,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  min-height:100dvh;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;
}
.app{
  max-width:440px;margin:0 auto;min-height:100dvh;
  display:flex;flex-direction:column;padding-bottom:calc(20px + env(safe-area-inset-bottom));
}
.header{
  padding:20px 20px 16px;background:var(--glass-bg);border-bottom:1px solid var(--line);
  backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  position:sticky;top:0;z-index:10;
}
.header h1{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--madera-accent)}
.user-bar{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:12px;color:var(--cream-x)}
.user-bar #logout{cursor:pointer;color:var(--red);font-weight:600}
.hidden{display:none !important}

/* Sidebar desktop (hidden mobile) */
.sidebar{display:none}
.sidebar-user{display:none}

/* ═══ Toast system ═══ */
#toast-stack{
  position:fixed;top:20px;right:20px;z-index:10000;
  display:flex;flex-direction:column;gap:8px;
  pointer-events:none;max-width:calc(100vw - 40px);
}
.toast{
  min-width:260px;max-width:380px;padding:12px 16px;
  background:var(--glass-bg);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(255,255,255,.08);border-left:3px solid var(--cream-x);border-radius:var(--r-md);
  color:var(--cream);font-size:13px;line-height:1.4;
  box-shadow:var(--sh-2);cursor:pointer;pointer-events:auto;
  transform:translateX(120%);opacity:0;
  transition:transform var(--dur) var(--ease-spring),opacity var(--dur) var(--ease-out-quart);
  word-wrap:break-word;
}
.toast.show{transform:translateX(0);opacity:1}
.toast.success{border-left-color:var(--green)}
.toast.error  {border-left-color:var(--red)}
.toast.warning{border-left-color:var(--gold)}
.toast.info   {border-left-color:var(--ice)}

/* ═══ Skeletons ═══ */
.skel{
  background:linear-gradient(90deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.10) 50%,rgba(255,255,255,.04) 100%);
  background-size:200% 100%;animation:skel-shimmer 1.4s ease-in-out infinite;
  border-radius:var(--r-sm);
}
.skel-bar{height:44px;margin-bottom:6px}
.skel-card{height:64px;margin-bottom:8px}
@keyframes skel-shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* ═══ Focus rings (Apple soft glow) ═══ */
*:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(0,212,236,.28);
  border-radius:inherit;
}
/* Compat: campos con border ya definido conservan halo naranja madera */
.form-input:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(176,128,64,.28);
  border-color:var(--madera-accent);
}

/* ═══ Apple polish: press states universal ═══ */
button,.btn,.tile,.sb-link,.side-item,.dsg-obj-btn,.prod-card,.prod-tab,
.mad-fab-btn,.mad-fab-left,.mad-cmd-row,.mad-ai-panel button,
.dsg-tbtn,.dsg-qt-btn,.dsg-chip,.dsg-tool-btn,.dsg-btn-mini,
.dsg-tab,.dsg-quick-add,.dsg-empty-overlay .dsg-eo-btns button,
.mad-fab-menu button,.recent-item,.toast{
  transition:transform var(--dur-fast) var(--ease-out-quart),
             filter var(--dur-fast) linear,
             box-shadow var(--dur) var(--ease-out-quart),
             background-color var(--dur-fast) var(--ease-out-quart),
             border-color var(--dur-fast) var(--ease-out-quart),
             color var(--dur-fast) var(--ease-out-quart);
}
button:active,.btn:active,.tile:active,.prod-card:active,.prod-tab:active,
.mad-fab-btn:active,.mad-fab-left:active,.mad-cmd-row:active,
.dsg-tbtn:active,.dsg-qt-btn:active,.dsg-chip:active,.dsg-tool-btn:active,
.dsg-btn-mini:active,.dsg-tab:active,.dsg-quick-add:active,
.dsg-obj-btn:active,.mad-fab-menu button:active,.side-item:active,
.dsg-empty-overlay .dsg-eo-btns button:active{
  transform:scale(0.96);
  filter:brightness(0.85);
}
button,.btn,.tile,.prod-card,.prod-tab,.dsg-obj-btn,.dsg-tab,
.dsg-tbtn,.dsg-qt-btn,.dsg-chip,.dsg-tool-btn,.dsg-btn-mini,
.dsg-quick-add,.side-item,.recent-item,.mad-fab-menu button,
.mad-cmd-row,.mad-ai-hints button,.mad-ai-close{
  cursor:pointer;
}

/* ═══ Reduce motion respect (Apple a11y) ═══ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .sheet,.mad-ai-panel{transform:none !important}
}

/* ═══ Skeleton loader utility (shared con index/driver/track) ═══ */
.skeleton{
  background:linear-gradient(90deg, var(--madera-surf,#1a1a20) 0%, rgba(255,255,255,.06) 50%, var(--madera-surf,#1a1a20) 100%);
  background-size:200% 100%;
  animation:madera-shimmer 1.4s ease-in-out infinite;
  border-radius:8px;
  color:transparent!important;pointer-events:none;user-select:none;
}
.skeleton-text{height:14px;margin:6px 0;border-radius:6px}
.skeleton-card{height:64px;margin:8px 0;border-radius:14px}
@keyframes madera-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.skeleton{animation:none;opacity:.6}}

/* ═══ Canonical segmented control — iOS pill style ═══
   Uso: <div class="seg"><button class="active">A</button><button>B</button></div>
   Overrides adicionales para tab groups existentes al final del bloque. */
.seg{
  display:inline-flex;
  background:rgba(255,255,255,.06);
  padding:3px;
  border-radius:999px;
  gap:0;
  position:relative;
  white-space:nowrap;
}
.seg > *{
  padding:6px 14px;
  border-radius:999px;
  background:transparent;
  color:var(--cream-d);
  font-size:13px;
  font-weight:600;
  border:none;
  cursor:pointer;
  transition:color var(--dur) var(--ease-out-quart),
             background-color var(--dur) var(--ease-out-quart),
             box-shadow var(--dur) var(--ease-out-quart);
  letter-spacing:-.005em;
  line-height:1.2;
  min-height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-family:inherit;
}
.seg > *:hover{ color:var(--cream); }
.seg > .active,
.seg > [aria-selected="true"],
.seg > [data-active="true"]{
  background:rgba(255,255,255,.12);
  color:var(--cream);
  box-shadow:0 2px 8px rgba(0,0,0,.24), 0 0 0 .5px rgba(255,255,255,.08) inset;
}
.seg > *:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(176,128,64,.35), inset 0 0 0 1px rgba(176,128,64,.5);
}
.seg-sm > *{ padding:4px 10px; font-size:12px; min-height:26px; }
.seg-lg > *{ padding:10px 18px; font-size:14px; min-height:40px; }
@media (max-width:640px){
  .seg{ flex-wrap:wrap; }
}

/* ═══ Delete icons: touch target ≥44px ═══ */
.cub-del,.cnc-del,.cot-del{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:12px;
}

/* ═══ Loading spinner inline (iter3: visible loader para calc/PDF) ═══ */
.btn.is-loading{ pointer-events:none; opacity:.85; }
.btn.is-loading::before{
  content:"";display:inline-block;width:14px;height:14px;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  border-radius:50%;animation:btn-spin .7s linear infinite;
  margin-right:2px;flex:0 0 14px;
}
@keyframes btn-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){
  .btn.is-loading::before{ animation:none; border-top-color:rgba(255,255,255,.6); }
}

/* Tiles */
.tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px}
.tile{
  aspect-ratio:1;background:var(--glass-bg);border:var(--glass-border);
  border-radius:var(--r-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;color:var(--cream);cursor:pointer;font-family:inherit;
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:var(--sh-1);
}
.tile:active{background:rgba(176,128,64,.14);border-color:rgba(176,128,64,.4)}
.tile .icon{font-size:36px;line-height:1;margin-bottom:10px}

/* Screens */
.screen{padding:16px 20px}
.screen h2{font-size:20px;font-weight:800;margin-bottom:14px;color:var(--madera-accent);letter-spacing:-.01em}
.back-btn{
  display:inline-block;color:var(--ice);font-size:13px;cursor:pointer;
  margin-bottom:14px;text-decoration:none;font-weight:600;
}
.back-btn:active{opacity:.6}

/* Recent list */
#recent-projects{padding:0 20px 20px}
#recent-projects h3{font-size:13px;color:var(--cream-d);margin:12px 0 8px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.recent-item{
  padding:10px 12px;background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:var(--r-md);margin-bottom:6px;font-size:13px;display:flex;justify-content:space-between;align-items:center;
  transition:background .15s;
}
.recent-item:hover{background:rgba(255,255,255,.06);cursor:pointer}
.recent-item a{color:var(--ice);text-decoration:none;font-weight:600}
.recent-item .date{color:var(--cream-x);font-size:11px;font-variant-numeric:tabular-nums}
.recent-empty{padding:12px;color:var(--cream-x);font-size:13px;text-align:center}

/* Modal login */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
  z-index:9999;display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease-out-quart);
}
.modal-overlay.open{opacity:1;pointer-events:auto}
.sheet{
  background:var(--glass-bg);width:100%;max-width:440px;
  backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  border:var(--glass-border);border-bottom:none;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:24px 20px calc(24px + env(safe-area-inset-bottom));
  max-height:90dvh;overflow-y:auto;
  box-shadow:var(--sh-3);
  transform:translateY(100%);transition:transform var(--dur-slow) var(--ease-spring);
  position:relative;
}
/* Bottom-sheet handle bar (mobile visual affordance) */
@media(max-width:900px){
  .sheet::before{
    content:'';
    position:absolute;top:8px;left:50%;transform:translateX(-50%);
    width:40px;height:4px;border-radius:2px;
    background:rgba(255,255,255,.2);
    pointer-events:none;
  }
}
.modal-overlay.open .sheet{transform:translateY(0)}
.sheet h2{color:var(--madera-accent);margin-bottom:6px;font-size:20px;font-weight:800;letter-spacing:-.01em}
.sheet .sub{color:var(--cream-x);font-size:13px;margin-bottom:18px}

.form-label{display:block;font-size:11px;color:var(--cream-x);font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin:14px 0 6px}
.form-input{
  width:100%;padding:13px 14px;background:rgba(0,0,0,.4);border:1px solid var(--line);
  border-radius:var(--r-md);color:var(--cream);font:inherit;font-size:16px;
  transition:border-color .18s;
}
.form-input:focus{outline:none;border-color:var(--madera-accent)}
.btn{
  width:100%;padding:14px;background:linear-gradient(135deg,var(--madera-accent),#8a6532);
  color:#fff;border:none;border-radius:var(--r-lg);font:inherit;font-size:16px;font-weight:800;
  letter-spacing:.02em;cursor:pointer;margin-top:16px;
  min-height:48px; /* WCAG touch target 2026 iter3 */
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 6px 18px rgba(176,128,64,.25);
  transition:transform .15s;
}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.secondary{background:rgba(255,255,255,.06);color:var(--cream);box-shadow:none;font-weight:600}
.login-error{color:var(--red);margin-top:10px;font-size:13px;min-height:18px}

/* Placeholder screens */
.placeholder{
  padding:24px;background:rgba(255,255,255,.03);border:1px dashed var(--line);
  border-radius:var(--r-lg);text-align:center;color:var(--cream-x);font-size:14px;
}
.placeholder b{display:block;color:var(--cream);font-size:16px;margin-bottom:6px}

/* Cubicador */
.cub-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.cub-toolbar label{font-size:11px;color:var(--cream-x);font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.cub-toolbar select.form-input{width:auto;padding:8px 10px;font-size:14px}
.cub-table{width:100%;font-size:13px;margin-bottom:10px;border-collapse:separate;border-spacing:0 6px}
.cub-table thead th{
  text-align:left;padding:4px 6px;font-size:10px;color:var(--cream-x);
  font-weight:600;letter-spacing:.05em;text-transform:uppercase;
}
.cub-table tbody tr{background:rgba(255,255,255,.03);border-radius:var(--r-md)}
.cub-table tbody td{padding:4px}
.cub-table tbody td:first-child{border-radius:var(--r-md) 0 0 var(--r-md);padding-left:8px}
.cub-table tbody td:last-child{border-radius:0 var(--r-md) var(--r-md) 0;padding-right:8px;text-align:center}
.cub-table input.form-input{
  padding:8px 10px;font-size:14px;margin:0;background:rgba(0,0,0,.35);
  border-radius:var(--r-sm);font-variant-numeric:tabular-nums;
}
.cub-del{cursor:pointer;color:var(--red);font-size:16px;user-select:none;padding:6px}
.cub-del:active{opacity:.6}
.cub-material{margin-top:10px}
.cub-result{
  margin-top:20px;padding:16px;background:rgba(176,128,64,.08);
  border:1px solid rgba(176,128,64,.2);border-radius:var(--r-lg);
  position:sticky;bottom:16px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.cub-result .rlabel{font-size:10px;color:var(--cream-x);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.cub-result .rgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.cub-result .rgrid > div{padding:10px;background:rgba(0,0,0,.25);border-radius:var(--r-md)}
.cub-result .rgrid b{display:block;color:var(--cream);font-size:16px;margin-top:4px;font-variant-numeric:tabular-nums}
.cub-actions{display:flex;gap:8px;margin-top:14px}
.cub-actions .btn{margin-top:0;flex:1}

/* CNC nesting */
.cnc-board-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.cnc-board-grid .full{grid-column:1/-1}
.cnc-opts{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:10px 0;font-size:13px;color:var(--cream-d)}
.cnc-opts label{display:flex;align-items:center;gap:6px;cursor:pointer}
.cnc-opts input[type=checkbox]{width:16px;height:16px;accent-color:var(--madera-accent)}
.cnc-opts input.form-input{width:80px;padding:6px 8px;font-size:13px}
.cnc-warn{
  margin:8px 0;padding:10px 12px;background:rgba(239,68,68,.08);
  border:1px solid rgba(239,68,68,.3);border-radius:var(--r-md);
  color:#fca5a5;font-size:12px;
}
.cnc-preview{margin-top:14px}
.cnc-preview .board-wrap{margin-bottom:14px}
.cnc-preview .board-head{
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;color:var(--cream-d);margin-bottom:6px;
}
.cnc-preview .board-head b{color:var(--madera-accent)}
.cnc-preview svg{
  width:100%;height:auto;display:block;
  background:var(--glass-bg);
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  border:var(--glass-border);border-radius:var(--r-md);
  box-shadow:var(--sh-1);
}
.cnc-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.cnc-actions .btn{margin-top:0;flex:1;min-width:120px;font-size:14px;padding:12px 10px}
.cnc-actions .btn.small{flex:0 1 auto;padding:10px 14px;font-size:13px;min-height:44px}
.cnc-empty{padding:16px;text-align:center;color:var(--cream-x);font-size:13px;font-style:italic}

/* Productos + 3D */
.prod-tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.prod-tab{
  padding:8px 14px;border-radius:var(--r-xl);background:rgba(255,255,255,.05);
  border:1px solid var(--line);color:var(--cream-d);cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:600;letter-spacing:.01em;transition:background .15s,color .15s,border-color .15s;
}
.prod-tab:active{transform:scale(.97)}
.prod-tab.active{background:linear-gradient(135deg,var(--madera-accent),#8a6532);color:#fff;border-color:transparent}
.prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.prod-card{
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:12px;cursor:pointer;
  transition:transform .15s,border-color .15s,background .15s;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.prod-card:active{transform:scale(.97);border-color:rgba(176,128,64,.4);background:rgba(176,128,64,.08)}
.prod-thumb{
  width:100%;aspect-ratio:1;background:rgba(0,0,0,.35);border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;font-size:44px;
}
.prod-name{margin-top:8px;font-size:14px;font-weight:700;color:var(--cream);line-height:1.25}
.prod-mat{font-size:11px;color:var(--cream-x);margin-top:2px}

.prod-modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.prod-modal-head h2{color:var(--madera-accent);font-size:18px;font-weight:800;letter-spacing:-.01em;margin:0}
#prod-close{
  cursor:pointer;font-size:26px;line-height:1;color:var(--cream-x);
  padding:4px 10px;border-radius:var(--r-sm);user-select:none;
  background:transparent;border:none;font-family:inherit;
}
#prod-close:focus-visible{outline:2px solid var(--madera-accent);outline-offset:2px}
#prod-close:active{background:rgba(239,68,68,.15);color:var(--red)}
.prod-3d{
  width:100%;height:280px;background:var(--void);border-radius:var(--r-lg);
  position:relative;overflow:hidden;border:1px solid var(--line);
}
.prod-3d canvas{display:block;width:100% !important;height:100% !important;touch-action:none}
.prod-3d-hint{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:var(--cream-x);font-size:12px;text-align:center;padding:0 16px;
}
.prod-explode{
  display:flex;align-items:center;gap:8px;font-size:13px;
  color:var(--cream-d);margin-top:10px;cursor:pointer;user-select:none;
}
.prod-explode input[type=checkbox]{width:16px;height:16px;accent-color:var(--madera-accent);cursor:pointer}
.prod-info{
  margin-top:12px;padding:12px;background:rgba(176,128,64,.06);
  border:1px solid rgba(176,128,64,.18);border-radius:var(--r-lg);
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;
}
.prod-info > div{display:flex;flex-direction:column;gap:2px}
.prod-info span{font-size:10px;color:var(--cream-x);font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.prod-info b{color:var(--cream);font-size:13px;font-weight:700;line-height:1.2;word-break:break-word}
.prod-actions{display:flex;gap:8px;margin-top:16px}
.prod-actions .btn{margin-top:0;flex:1;font-size:14px;padding:12px 8px}

/* Cotizador */
.cot-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.cot-table td.cot-line{text-align:right;font-variant-numeric:tabular-nums;color:var(--cream);font-weight:600;padding-right:6px}
.cot-table .cot-del{cursor:pointer;color:var(--red);font-size:16px;user-select:none;padding:6px}
.cot-totals{
  margin-top:16px;padding:14px 16px;background:rgba(176,128,64,.08);
  border:1px solid rgba(176,128,64,.2);border-radius:var(--r-lg);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.cot-row{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;font-size:14px;color:var(--cream-d)}
.cot-row b{color:var(--cream);font-variant-numeric:tabular-nums;font-size:15px}
.cot-row.cot-grand{
  margin-top:8px;padding-top:10px;border-top:1px solid rgba(176,128,64,.3);
  font-size:16px;color:var(--madera-accent);font-weight:700;
}
.cot-row.cot-grand b{color:var(--madera-accent);font-size:20px;font-weight:800}
.cot-actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.cot-actions .btn{margin-top:0;flex:1;min-width:100px;font-size:14px;padding:12px 8px}

@media(min-width:441px) and (max-width:899px){
  .app{max-width:560px}
  .tile-grid{grid-template-columns:1fr 1fr}
  /* 6 tiles balanceados 2×3 (Productos+Diseñar / Cubicar+CNC / Cotizar+Histórico) */
}

@media(max-width:440px){
  /* 6 tiles balanceados 2×3 */
}

/* ═══ Diseñador 3D ═══ */
.dsg-layout{
  display:grid;grid-template-columns:1fr 320px;gap:16px;
  height:calc(100dvh - 180px);
}
.dsg-3d{
  background:var(--void);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;position:relative;min-height:280px;
}
.dsg-3d canvas{display:block;width:100%;height:100%;outline:none}
.dsg-3d .dsg-hint{
  position:absolute;top:10px;left:10px;padding:7px 11px;
  background:rgba(15,15,19,.85);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  border-radius:var(--r-sm);font-size:12px;color:var(--cream-d);font-weight:600;
  pointer-events:none;letter-spacing:.02em;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}
.dsg-panel{
  background:var(--glass-bg);
  backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  border:var(--glass-border);
  border-radius:var(--r-lg);padding:16px;overflow-y:auto;
  display:flex;flex-direction:column;gap:14px;
  box-shadow:var(--sh-2);
}
.dsg-panel h3{
  font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cream-x);margin:2px 0;
}
.dsg-palette{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dsg-palette button{
  padding:10px 8px;background:rgba(176,128,64,.08);
  border:1px solid rgba(176,128,64,.22);border-radius:var(--r-sm);
  color:var(--cream);font-size:12px;font-weight:600;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:background .15s,transform .12s;
}
.dsg-palette button:hover{background:rgba(176,128,64,.16);transform:translateY(-1px)}
.dsg-palette button .dsg-emoji{font-size:20px;line-height:1}
.dsg-bom{
  background:rgba(0,0,0,.25);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:10px 12px;font-size:12px;
  color:var(--cream-d);line-height:1.6;
}
.dsg-bom .dsg-bom-row{display:flex;justify-content:space-between;padding:2px 0}
.dsg-bom .dsg-bom-cost{
  margin-top:8px;padding-top:8px;border-top:1px solid var(--line);
  color:var(--madera-accent);font-weight:700;font-size:13px;
}
.dsg-actions{display:flex;flex-direction:column;gap:6px}
.dsg-actions .btn{margin:0;font-size:13px;padding:10px 12px}
.dsg-selheader{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:8px;border-bottom:1px solid var(--line);
}
.dsg-selheader b{color:var(--madera-accent);font-size:14px}
.dsg-selheader .dsg-close{
  cursor:pointer;color:var(--cream-x);font-size:18px;
  padding:2px 8px;user-select:none;
}
.dsg-selheader .dsg-close:hover{color:var(--red)}
.dsg-dim-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.dsg-dim-grid label{
  display:flex;flex-direction:column;gap:3px;
  font-size:10px;color:var(--cream-x);letter-spacing:.04em;
}
.dsg-dim-grid input{
  padding:6px 8px;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--cream);font-size:13px;font-variant-numeric:tabular-nums;
}
.dsg-mode-toggle{
  display:flex;gap:0;background:rgba(0,0,0,.25);
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
}
.dsg-mode-toggle button{
  flex:1;padding:8px;background:transparent;border:none;
  color:var(--cream-d);font-size:12px;font-weight:600;cursor:pointer;
  transition:background .12s,color .12s;
}
.dsg-mode-toggle button.active{background:rgba(176,128,64,.22);color:var(--cream)}
.dsg-rot-block{display:flex;flex-direction:column;gap:6px}
.dsg-rot-block h3{margin:0}
.dsg-rot-row input{font-variant-numeric:tabular-nums}
.dsg-btn-mini{
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  color:var(--cream-x);padding:3px 8px;border-radius:var(--r-sm);
  font:inherit;font-size:11px;font-weight:600;cursor:pointer;letter-spacing:.02em;
  transition:all .12s ease;
}
.dsg-btn-mini:hover{background:rgba(176,128,64,.14);color:var(--cream);border-color:rgba(176,128,64,.4)}
/* Compact action toolbar (icon-only) */
.dsg-action-toolbar{
  display:flex;align-items:center;gap:4px;padding:4px 0;
}
.dsg-tbtn{
  width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--cream);font:inherit;font-size:15px;cursor:pointer;
  transition:all .12s ease;
}
.dsg-tbtn:hover{background:rgba(176,128,64,.14);border-color:rgba(176,128,64,.4)}
.dsg-tbtn.dsg-tbtn-danger:hover{background:rgba(220,38,38,.18);border-color:rgba(220,38,38,.55);color:#fca5a5}
.dsg-tbtn-divider{
  display:inline-block;width:1px;height:20px;background:var(--line);margin:0 4px;
}
/* Segmented compact mode toggle */
.dsg-mode-seg{
  display:inline-flex;gap:0;background:rgba(0,0,0,.25);
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
}
.dsg-mode-seg button{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 10px;background:transparent;border:none;
  color:var(--cream-d);font:inherit;font-size:12px;font-weight:600;cursor:pointer;
  transition:background .12s,color .12s;
}
.dsg-mode-seg button .mode-ico{font-size:13px;line-height:1}
.dsg-mode-seg button.active{background:rgba(176,128,64,.22);color:var(--cream)}

/* ═══ Quick Transform Toolbar (UX simple 2026-08-11) ═══ */
.dsg-qt-section{
  display:flex;flex-direction:column;gap:8px;
  padding:10px 12px;margin-top:8px;
  background:rgba(176,128,64,.06);
  border:1px solid rgba(176,128,64,.22);
  border-radius:var(--r-md);
}
.dsg-qt-title{
  font-size:11px;font-weight:700;letter-spacing:.08em;
  color:var(--madera-accent);text-transform:uppercase;
  display:flex;align-items:center;gap:6px;margin:0;
}
.dsg-qt-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
}
.dsg-qt-grid.dsg-qt-grid-2{grid-template-columns:1fr 1fr}
.dsg-qt-btn{
  min-height:44px;padding:6px 8px;
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--cream);font:inherit;font-size:13px;font-weight:600;
  cursor:pointer;transition:all .12s ease;line-height:1;
}
.dsg-qt-btn:hover{background:rgba(176,128,64,.20);border-color:rgba(176,128,64,.5);transform:translateY(-1px)}
.dsg-qt-btn:active{transform:translateY(0)}
.dsg-qt-btn .dsg-qt-ico{font-size:16px;line-height:1}
.dsg-qt-btn.dsg-qt-primary{background:rgba(176,128,64,.16);border-color:rgba(176,128,64,.4)}
.dsg-qt-btn.dsg-qt-star{background:rgba(103,232,249,.10);border-color:rgba(103,232,249,.32);color:#a5f3fc}
.dsg-qt-btn.dsg-qt-star:hover{background:rgba(103,232,249,.20)}
.dsg-qt-pad{
  display:grid;
  grid-template-columns:44px 44px 44px;
  grid-template-rows:44px 44px 44px;
  gap:4px;justify-content:center;margin:2px auto;
}
.dsg-qt-pad .dsg-qt-btn{min-height:44px;padding:0}
.dsg-qt-pad .dsg-qt-pos-up{grid-column:2;grid-row:1}
.dsg-qt-pad .dsg-qt-pos-left{grid-column:1;grid-row:2}
.dsg-qt-pad .dsg-qt-pos-center{grid-column:2;grid-row:2}
.dsg-qt-pad .dsg-qt-pos-right{grid-column:3;grid-row:2}
.dsg-qt-pad .dsg-qt-pos-down{grid-column:2;grid-row:3}
.dsg-qt-updown{
  display:flex;gap:6px;justify-content:center;margin-top:4px;
}
.dsg-qt-updown .dsg-qt-btn{flex:1;max-width:96px}
.dsg-qt-nudge{
  display:flex;gap:0;background:rgba(0,0,0,.28);
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
  margin-top:2px;
}
.dsg-qt-nudge label{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:4px;
  padding:6px 4px;cursor:pointer;font-size:11px;font-weight:600;
  color:var(--cream-d);transition:background .12s,color .12s;
}
.dsg-qt-nudge input{display:none}
.dsg-qt-nudge input:checked + span{color:var(--cream)}
.dsg-qt-nudge label:has(input:checked){background:rgba(176,128,64,.24)}
.dsg-qt-hint{
  font-size:11px;color:var(--cream-x);letter-spacing:.03em;
  text-align:center;margin-top:2px;font-style:italic;
}

/* Advanced mode (colapsable) */
.dsg-adv-details{
  margin-top:8px;padding:8px 10px;
  background:rgba(0,0,0,.18);border:1px solid var(--line);border-radius:var(--r-sm);
}
.dsg-adv-details > summary{
  cursor:pointer;list-style:none;user-select:none;
  color:var(--cream-x);font-weight:600;font-size:12px;letter-spacing:.05em;
  padding:2px 0;display:flex;align-items:center;justify-content:space-between;gap:8px;
  text-transform:uppercase;
}
.dsg-adv-details > summary::-webkit-details-marker{display:none}
.dsg-adv-details > summary::after{content:"▾";opacity:.5;font-size:11px;transition:transform .18s}
.dsg-adv-details:not([open]) > summary::after{transform:rotate(-90deg)}
.dsg-adv-details[open] > summary{color:var(--madera-accent);margin-bottom:8px}
.dsg-adv-body{display:flex;flex-direction:column;gap:10px}

/* Panel empty state (nothing selected) */
.dsg-panel-hint{
  padding:20px 14px;margin:8px 0;
  background:rgba(103,232,249,.06);
  border:1px dashed rgba(103,232,249,.35);
  border-radius:var(--r-md);text-align:center;
  animation:dsgPulseHint 2.4s ease-in-out infinite;
}
.dsg-panel-hint .dsg-ph-ico{font-size:26px;line-height:1;margin-bottom:6px;display:block}
.dsg-panel-hint .dsg-ph-title{font-size:13px;font-weight:700;color:var(--cream);margin-bottom:3px}
.dsg-panel-hint .dsg-ph-sub{font-size:12px;color:var(--cream-x);letter-spacing:.02em}
@keyframes dsgPulseHint{
  0%,100%{border-color:rgba(103,232,249,.25);background:rgba(103,232,249,.04)}
  50%{border-color:rgba(103,232,249,.55);background:rgba(103,232,249,.10)}
}

/* Dimensiones + Rotación en 2 columnas cuando el viewport es lo suficientemente ancho */
@media(min-width:900px){
  .dsg-two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
}
.dsg-two-col > div,
.dsg-two-col > details{min-width:0}
.dsg-rot-details > summary{
  cursor:pointer;list-style:none;user-select:none;
  color:var(--madera-accent);font-weight:700;font-size:13px;
  padding:2px 0;display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.dsg-rot-details > summary::-webkit-details-marker{display:none}
.dsg-rot-details > summary::after{content:"▾";opacity:.6;font-size:11px;transition:transform .18s}
.dsg-rot-details:not([open]) > summary::after{transform:rotate(-90deg)}

/* ═══ Diseñador — Palette Tabs (Piezas / Objetos) ═══ */
.dsg-palette-tabs{
  display:flex;gap:0;margin-bottom:10px;
  background:rgba(0,0,0,.25);border:1px solid var(--line);
  border-radius:var(--r-sm);overflow:hidden;
}
.dsg-palette-tabs .dsg-tab{
  flex:1;padding:9px 8px;background:transparent;border:none;
  color:var(--cream-d);font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:background .14s,color .14s;
}
.dsg-palette-tabs .dsg-tab.active{background:rgba(176,128,64,.22);color:var(--cream)}
.dsg-palette-tabs .dsg-tab:hover:not(.active){background:rgba(176,128,64,.10)}

/* ═══ Apple iOS segmented pill overrides ═══ */
.dsg-mode-seg,.dsg-palette-tabs,.prod-tabs{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.06);
  padding:3px;
  border-radius:999px;
  display:inline-flex;
  gap:0;overflow:visible;
}
.prod-tabs{display:inline-flex;flex-wrap:wrap}
.dsg-mode-seg button,.dsg-palette-tabs .dsg-tab,.prod-tab{
  border-radius:999px !important;
  padding:6px 14px;
  background:transparent;border:none;
  position:relative;z-index:1;
  transition:color var(--dur) var(--ease-out-quart),
             background-color var(--dur) var(--ease-out-quart),
             box-shadow var(--dur) var(--ease-out-quart),
             transform var(--dur-fast) var(--ease-out-quart);
}
.dsg-mode-seg button.active,
.dsg-palette-tabs .dsg-tab.active,
.prod-tab.active{
  background:rgba(255,255,255,.12) !important;
  color:var(--cream) !important;
  box-shadow:0 2px 8px rgba(0,0,0,.24), 0 1px 0 rgba(255,255,255,.08) inset;
}

.dsg-obj-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dsg-obj-btn{
  padding:12px 8px;background:rgba(176,128,64,.08);
  border:1px solid rgba(176,128,64,.22);border-radius:var(--r-sm);
  color:var(--cream);font:inherit;font-size:12px;font-weight:600;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  transition:background .15s,transform .12s;
}
.dsg-obj-btn:hover:not(.disabled):not(:disabled){background:rgba(176,128,64,.16);transform:translateY(-1px)}
.dsg-obj-btn .dsg-obj-icon{font-size:22px;line-height:1;margin-bottom:2px}
.dsg-obj-btn .dsg-obj-label{font-size:12px;color:var(--cream)}
.dsg-obj-btn small{font-size:10px;color:var(--cream-x);letter-spacing:.04em}
.dsg-obj-btn.disabled,.dsg-obj-btn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.5)}
.dsg-quick-add{
  margin-top:8px;width:100%;padding:10px 12px;
  background:linear-gradient(135deg,rgba(176,128,64,.28),rgba(176,128,64,.14));
  border:1px solid rgba(176,128,64,.5);border-radius:var(--r-sm);
  color:var(--cream);font:inherit;font-size:13px;font-weight:700;cursor:pointer;
  transition:all .15s ease;
}
.dsg-quick-add:hover{background:linear-gradient(135deg,rgba(176,128,64,.38),rgba(176,128,64,.22));transform:translateY(-1px)}
.dsg-quick-add-group{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.dsg-quick-add-group .dsg-quick-add{margin-top:0;padding:9px 8px;font-size:12px}
.dsg-content-list{
  background:rgba(0,0,0,.25);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:10px 12px;font-size:13px;
  color:var(--cream-d);line-height:1.6;
}
.dsg-content-list .dsg-content-row{display:flex;justify-content:space-between;padding:2px 0}
.dsg-content-empty{color:var(--cream-x);font-style:italic}

/* ═══ Diseñador polish 2026 (quick-start, badge, help, empty, onboarding) ═══ */
.dsg-header{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.dsg-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dsg-save-badge{
  font-size:12px;font-weight:600;padding:5px 10px;border-radius:100px;
  background:rgba(255,255,255,.05);color:var(--cream-x);border:1px solid var(--line);
  transition:all .18s ease;white-space:nowrap;
}
.dsg-save-badge.idle{color:var(--cream-x)}
.dsg-save-badge.dirty{color:#fbbf24;border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.08)}
.dsg-save-badge.saved{color:#22c55e;border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.08)}
.dsg-crumbs{font-size:11px;color:var(--cream-x);letter-spacing:.06em;text-transform:uppercase;opacity:.75}
@media(max-width:480px){
  .dsg-crumbs::before{content:""}
  .dsg-crumbs{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}
}
.dsg-quick-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.dsg-chip{
  background:rgba(176,128,64,.12);border:1px solid rgba(176,128,64,.35);
  color:var(--cream);padding:6px 12px;border-radius:100px;
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:all .16s ease;
}
.dsg-chip:hover{background:rgba(176,128,64,.24);transform:translateY(-1px)}
.dsg-panel-toolbar{
  display:flex;gap:6px;padding-bottom:10px;margin-bottom:4px;
  border-bottom:1px solid var(--line);
}
.dsg-tool-btn{
  flex:1;padding:8px 10px;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--cream);font:inherit;font-size:12px;font-weight:600;cursor:pointer;
  transition:all .15s ease;
}
.dsg-tool-btn:hover{background:rgba(176,128,64,.14);border-color:rgba(176,128,64,.4)}

/* Empty overlay canvas */
.dsg-empty-overlay{
  position:absolute;inset:0;pointer-events:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:20px;text-align:center;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.15),transparent 60%);
  z-index:5;
}
.dsg-empty-overlay .dsg-eo-ico{font-size:48px;opacity:.55}
.dsg-empty-overlay .dsg-eo-title{color:var(--cream);font-size:15px;font-weight:600;opacity:.85}
.dsg-empty-overlay .dsg-eo-sub{color:var(--cream-x);font-size:12px;margin-bottom:6px}
.dsg-empty-overlay .dsg-eo-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.dsg-empty-overlay .dsg-eo-btns button{
  padding:6px 12px;background:rgba(176,128,64,.14);
  border:1px solid rgba(176,128,64,.4);color:var(--cream);
  border-radius:100px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;
  transition:all .15s ease;
}
.dsg-empty-overlay .dsg-eo-btns button:hover{background:rgba(176,128,64,.28)}
.dsg-3d{position:relative}

/* Help sheet (?) */
.dsg-help-sheet{
  position:fixed;bottom:20px;right:20px;z-index:150;
  width:min(320px,calc(100vw - 40px));
  background:var(--glass-bg);
  backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  border:var(--glass-border);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);
  padding:14px 16px;animation:dsgFadeUp var(--dur) var(--ease-spring);
}
@keyframes dsgFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.dsg-help-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.dsg-help-head b{color:var(--madera-accent);font-size:13px}
.dsg-help-x{background:transparent;border:none;color:var(--cream-x);cursor:pointer;font-size:14px;padding:2px 6px;border-radius:6px}
.dsg-help-x:hover{background:rgba(255,255,255,.06);color:var(--cream)}
.dsg-help-list{display:flex;flex-direction:column;gap:6px}
.dsg-help-row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;color:var(--cream-d)}
.dsg-help-row kbd{
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  border-radius:6px;padding:2px 7px;font-family:ui-monospace,monospace;
  font-size:11px;color:var(--cream);white-space:nowrap;
}
@media(max-width:640px){
  .dsg-help-sheet{left:12px;right:12px;bottom:12px;width:auto}
}

/* Onboarding overlay */
.dsg-onboard{
  position:fixed;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(4px);
  z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;
  animation:dsgFadeIn .2s ease;
}
@keyframes dsgFadeIn{from{opacity:0}to{opacity:1}}
.dsg-ob-card{
  max-width:400px;width:100%;
  background:var(--glass-bg);
  backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  border:var(--glass-border);border-radius:var(--r-lg);
  padding:24px;box-shadow:var(--sh-3);
  animation:dsgFadeUp var(--dur-slow) var(--ease-spring);
}
.dsg-ob-step{font-size:11px;color:var(--cream-x);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.dsg-ob-title{font-size:18px;font-weight:700;color:var(--cream);margin-bottom:8px}
.dsg-ob-body{font-size:14px;color:var(--cream-d);line-height:1.55;margin-bottom:18px}
.dsg-ob-btns{display:flex;gap:8px;justify-content:flex-end}
.dsg-ob-skip{background:transparent;border:1px solid var(--line);color:var(--cream-x);padding:9px 16px;border-radius:var(--r-sm);cursor:pointer;font:inherit;font-size:13px}
.dsg-ob-next{background:linear-gradient(135deg,var(--madera-accent),#8a6532);border:none;color:#fff;padding:9px 18px;border-radius:var(--r-sm);cursor:pointer;font:inherit;font-size:13px;font-weight:700}
.dsg-ob-next:hover{filter:brightness(1.1)}

.only-mobile{display:block}

@media(max-width:899px){
  .dsg-layout{grid-template-columns:1fr;grid-template-rows:55dvh auto;height:auto}
  .dsg-panel{max-height:none}
}

/* ═══ DESKTOP (≥900px) — Linear/Vercel layout ═══ */
@media(min-width:900px){
  html,body{background:radial-gradient(circle at top left,#1a1208 0%,#050505 55%)}
  body{display:flex;min-height:100dvh}
  .app{
    max-width:none;margin:0;flex:1;min-height:100dvh;
    display:flex;flex-direction:row;padding-bottom:0;
    padding-left:260px;  /* offset por sidebar fixed */
  }
  /* Sidebar rail */
  .sidebar{
    display:flex;flex-direction:column;
    position:fixed;top:0;left:0;bottom:0;width:260px;
    background:var(--glass-bg);
    border-right:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
    padding:22px 14px 14px;z-index:20;
    box-shadow:var(--sh-2);
  }
  .sidebar-brand{
    font-size:16px;font-weight:800;letter-spacing:-.01em;
    color:var(--madera-accent);padding:6px 12px 22px;
  }
  .sidebar-nav{display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto}
  .side-item{
    display:flex;align-items:center;gap:12px;
    padding:10px 12px;border-radius:var(--r-sm);
    background:transparent;border:none;border-left:3px solid transparent;
    color:var(--cream-d);font:inherit;font-size:14px;font-weight:500;
    cursor:pointer;text-align:left;letter-spacing:-.005em;
    transition:background .15s,color .15s,border-color .15s;
  }
  .side-item .side-icon{font-size:16px;line-height:1;width:20px;text-align:center}
  .side-item{transition:background .15s,color .15s,border-color .15s,transform .15s}
  .side-item:hover{background:rgba(255,255,255,.04);color:var(--cream);transform:translateX(2px)}
  .side-item.active{
    background:rgba(176,128,64,.15);color:var(--cream);
    border-left-color:var(--madera-accent);font-weight:600;
  }
  .sidebar-user{
    display:flex;justify-content:space-between;align-items:center;
    padding:12px;margin-top:8px;border-top:1px solid var(--line);
    font-size:12px;color:var(--cream-x);
  }
  .sidebar-user #logout-desktop{cursor:pointer;color:var(--red);font-weight:600}
  /* Ocultar header mobile + dashboard en desktop */
  .header{display:none}
  #screen-dashboard{display:none !important}
  /* Main content: max 1200px centrado con padding cómodo */
  .screen{
    max-width:1200px;margin:0 auto;padding:40px;width:100%;
  }
  .screen h2{font-size:26px;margin-bottom:24px}
  .back-btn{display:none} /* nav vive en sidebar */
  .only-mobile{display:none !important}
  .dsg-layout{height:calc(100dvh - 140px)}

  /* Modal login sigue centrado, no bottom-slide */
  .modal-overlay{align-items:center}
  .sheet{
    max-width:480px;border-radius:var(--r-lg);
    transform:scale(.96);opacity:0;
    transition:transform var(--dur-slow) var(--ease-spring),opacity var(--dur) var(--ease-out-quart);
  }
  .modal-overlay.open .sheet{transform:scale(1);opacity:1}
  /* Desktop no necesita handle bar (bottom-sheet mobile only) */
  .sheet::before{display:none}

  /* Cubicador: inputs más anchos */
  .cub-table input.form-input{padding:10px 14px;font-size:15px}
  .cub-table thead th{font-size:11px;padding:6px 10px}
  .cub-table tbody td{padding:6px 4px}
  .cub-toolbar{margin-bottom:20px}
  .cub-result{
    max-width:640px;position:static;margin-top:28px;padding:20px;
  }
  .cub-result .rgrid{grid-template-columns:repeat(4,1fr)}
  .cub-actions{max-width:640px;margin-top:20px}

  /* Cotizador: inputs cómodos */
  .cot-table input.form-input{padding:10px 12px;font-size:14px}
  .cot-totals{max-width:520px;margin-left:auto}

  /* Productos: grid más denso */
  .prod-grid{grid-template-columns:repeat(4,1fr);gap:18px}
  .prod-thumb{font-size:56px}

  /* CNC: preview grande */
  .cnc-preview svg{max-height:70vh}
  .cnc-preview .board-wrap{max-width:900px}

  /* Recent list ancho útil */
  #recent-projects{max-width:720px;padding:0}
}

/* ═══ FAB desktop ═══ */
.mad-fab{position:fixed;bottom:24px;right:24px;z-index:120;display:none;flex-direction:column;align-items:flex-end;gap:10px}
.mad-fab.visible{display:flex}
.mad-fab-btn{
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--madera-accent),#8a6532);
  border:none;color:#fff;font-size:28px;font-weight:300;line-height:1;
  cursor:pointer;box-shadow:var(--sh-fab);
  transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur) var(--ease-out-quart);
}
.mad-fab-btn:hover{transform:scale(1.05);box-shadow:0 14px 34px rgba(176,128,64,.5),0 1px 0 rgba(255,255,255,.14) inset}
.mad-fab.open .mad-fab-btn{transform:rotate(45deg)}
.mad-fab-menu{
  display:flex;flex-direction:column;gap:6px;
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .18s ease,transform .18s ease;
}
.mad-fab.open .mad-fab-menu{opacity:1;pointer-events:auto;transform:translateY(0)}
.mad-fab-menu button{
  background:var(--glass-bg);
  backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  border:var(--glass-border);color:var(--cream);
  padding:10px 16px;border-radius:100px;font:inherit;font-size:13px;font-weight:600;
  cursor:pointer;box-shadow:var(--sh-2);
  text-align:right;white-space:nowrap;
}
.mad-fab-menu button:hover{background:rgba(176,128,64,.22);border-color:rgba(176,128,64,.6)}
@media(max-width:899px){.mad-fab{display:none !important}}

/* ═══ Command palette (Cmd+K) ═══ */
.mad-cmd-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
  z-index:300;display:flex;align-items:flex-start;justify-content:center;
  padding-top:12dvh;animation:dsgFadeIn var(--dur) var(--ease-out-quart);
}
.mad-cmd-overlay.hidden{display:none}
.mad-cmd-panel{
  width:min(560px,calc(100vw - 32px));
  background:var(--glass-bg);
  backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  border:var(--glass-border);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);overflow:hidden;
  animation:dsgFadeUp var(--dur-slow) var(--ease-spring);
}
.mad-cmd-inp-wrap{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.mad-cmd-ico{color:var(--madera-accent);font-size:16px}
#mad-cmd-inp{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--cream);font:inherit;font-size:15px;
}
.mad-cmd-inp-wrap kbd{
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  border-radius:6px;padding:2px 7px;font-family:ui-monospace,monospace;
  font-size:10px;color:var(--cream-x);
}
.mad-cmd-list{max-height:50dvh;overflow-y:auto;padding:6px}
.mad-cmd-row{
  display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--r-sm);
  cursor:pointer;transition:background .12s ease;
}
.mad-cmd-row.active,.mad-cmd-row:hover{background:rgba(176,128,64,.16)}
.mad-cmd-row .ico{font-size:16px;width:22px;text-align:center}
.mad-cmd-row .lbl{flex:1;color:var(--cream);font-size:14px;font-weight:500}
.mad-cmd-row .hint{color:var(--cream-x);font-size:12px}
.mad-cmd-empty{padding:24px;text-align:center;color:var(--cream-x);font-size:13px}
.mad-cmd-foot{
  display:flex;gap:14px;padding:9px 16px;border-top:1px solid var(--line);
  color:var(--cream-x);font-size:11px;
}
.mad-cmd-foot kbd{
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  border-radius:3px;padding:1px 6px;font-family:ui-monospace,monospace;font-size:10px;
}

/* ═══ Breadcrumbs por pantalla ═══ */
.scr-crumbs{font-size:11px;color:var(--cream-x);letter-spacing:.06em;text-transform:uppercase;opacity:.72;margin-top:-14px;margin-bottom:18px}
@media(max-width:480px){
  .scr-crumbs .crumb-full{display:none}
  .scr-crumbs .crumb-last::before{content:""}
}

/* ═══ AI Assistant (Ctrl+/) ═══ */
.mad-fab-left{
  position:fixed;bottom:24px;left:24px;z-index:120;
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--madera-accent),#8a6532);
  border:none;color:#fff;font-size:24px;line-height:1;
  cursor:pointer;box-shadow:var(--sh-fab),0 0 0 3px rgba(176,128,64,.15);
  transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur) var(--ease-out-quart);
  display:none;align-items:center;justify-content:center;
}
.mad-fab-left:hover{transform:scale(1.06);box-shadow:0 14px 34px rgba(176,128,64,.55),0 0 0 4px rgba(176,128,64,.22),0 1px 0 rgba(255,255,255,.14) inset}
@media(min-width:900px){ .mad-fab-left{display:flex} }

.mad-ai-panel{
  position:fixed;top:80px;right:20px;bottom:20px;width:380px;
  background:var(--glass-bg);
  backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  border:var(--glass-border);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);
  padding:14px;display:flex;flex-direction:column;gap:10px;
  z-index:250;
  transition:transform var(--dur) var(--ease-spring),opacity var(--dur) var(--ease-out-quart);
}
.mad-ai-panel.hidden{transform:translateX(430px);opacity:0;pointer-events:none}
.mad-ai-panel header{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:8px;border-bottom:1px solid var(--line);
  color:var(--cream);font-weight:600;font-size:14px;
}
.mad-ai-close{
  background:transparent;border:none;color:var(--cream-x);
  font-size:16px;cursor:pointer;padding:4px 8px;border-radius:var(--r-sm);
}
.mad-ai-close:hover{background:rgba(255,255,255,.08);color:var(--cream)}
#mad-ai-messages{
  flex:1;overflow-y:auto;scroll-behavior:smooth;
  display:flex;flex-direction:column;gap:8px;padding:4px 2px;
}
.mad-ai-empty{color:var(--cream-x);font-size:13px;text-align:center;padding:24px 12px;opacity:.7}
.mad-ai-msg{max-width:88%;padding:9px 12px;border-radius:var(--r-md);font-size:13px;line-height:1.45}
.mad-ai-msg.user{background:rgba(0,212,236,.09);border:1px solid rgba(0,212,236,.18);align-self:flex-end;color:var(--cream)}
.mad-ai-msg.assistant{background:rgba(176,128,64,.09);border:1px solid rgba(176,128,64,.22);align-self:flex-start;color:var(--cream)}
.mad-ai-msg-body{word-wrap:break-word}
#mad-ai-form{display:flex;flex-direction:column;gap:6px}
#mad-ai-input{
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);
  color:var(--cream);border-radius:8px;padding:8px 10px;font:inherit;font-size:13px;
  resize:none;outline:none;
}
#mad-ai-input:focus{border-color:var(--madera-accent)}
#mad-ai-form button[type="submit"]{
  background:linear-gradient(135deg,var(--madera-accent),#8a6532);
  border:none;color:#fff;padding:8px 12px;border-radius:8px;
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:transform .15s ease,opacity .15s ease;
}
#mad-ai-form button[type="submit"]:hover{transform:translateY(-1px)}
#mad-ai-form button[type="submit"]:disabled{opacity:.5;cursor:wait}
.mad-ai-hints{display:flex;flex-wrap:wrap;gap:5px}
.mad-ai-hints button{
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--cream-x);
  padding:5px 9px;border-radius:100px;font:inherit;font-size:12px;
  cursor:pointer;opacity:.85;transition:all .15s ease;
}
.mad-ai-hints button:hover{background:rgba(176,128,64,.14);border-color:rgba(176,128,64,.4);color:var(--cream);opacity:1}
@media(max-width:899px){
  .mad-ai-panel{
    top:auto;right:8px;left:8px;bottom:8px;width:auto;
    max-height:72dvh;
  }
  .mad-ai-panel.hidden{transform:translateY(100%)}
}

/* ═══ COSTEO — Sub-módulo ═══ */
.cos-tabs{
  display:flex;gap:6px;margin-bottom:14px;overflow-x:auto;padding-bottom:2px;
  scrollbar-width:none;
}
.cos-tabs::-webkit-scrollbar{display:none}
.cos-tab{
  background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--cream-x);
  padding:10px 16px;border-radius:100px;font:inherit;font-size:13px;font-weight:600;
  cursor:pointer;white-space:nowrap;min-height:44px;
  transition:all var(--dur-fast) ease;
}
.cos-tab:hover{background:rgba(176,128,64,.10);color:var(--cream)}
.cos-tab.active{
  background:linear-gradient(135deg,var(--madera-accent),#8a6532);
  color:#fff;border-color:transparent;
  box-shadow:0 4px 14px rgba(176,128,64,.28);
}
.cos-body{display:block}

/* Empty */
.cos-empty{
  padding:48px 20px;text-align:center;background:rgba(255,255,255,.02);
  border:1px dashed var(--line);border-radius:var(--r-lg);
}
.cos-empty-emoji{font-size:56px;margin-bottom:12px;opacity:.85}
.cos-empty h3{color:var(--cream);font-size:18px;margin:0 0 8px;font-weight:700}
.cos-empty p{color:var(--cream-x);font-size:13px;margin:0 auto 20px;max-width:420px;line-height:1.5}
.cos-empty-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* Canastas layout */
.cos-canastas-grid{
  display:grid;grid-template-columns:320px 1fr;gap:16px;align-items:start;
}
@media(max-width:899px){
  .cos-canastas-grid{grid-template-columns:1fr}
}
.cos-list{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:14px;display:flex;flex-direction:column;gap:10px;
}
.cos-list-head{display:flex;justify-content:space-between;align-items:center}
.cos-list-head h3{color:var(--madera-accent);font-size:14px;font-weight:700;margin:0;letter-spacing:.02em;text-transform:uppercase}
.cos-list-cards{display:flex;flex-direction:column;gap:8px;max-height:520px;overflow-y:auto}
.cos-w100{width:100%}

.cos-card{
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px;display:flex;flex-direction:column;gap:6px;cursor:pointer;
  transition:all var(--dur-fast) ease;
}
.cos-card:hover{background:rgba(176,128,64,.06);border-color:rgba(176,128,64,.3)}
.cos-card.active{background:rgba(176,128,64,.10);border-color:var(--madera-accent);box-shadow:0 0 0 3px rgba(176,128,64,.10)}
.cos-card-top{display:flex;gap:6px;align-items:center}
.cos-card-name{
  flex:1;background:transparent;border:none;color:var(--cream);
  font:inherit;font-size:14px;font-weight:700;padding:2px 4px;border-radius:6px;
  outline:none;min-width:0;
}
.cos-card-name:focus{background:rgba(255,255,255,.06)}
.cos-card-del{
  background:transparent;border:none;color:var(--cream-x);cursor:pointer;
  font-size:14px;padding:6px 8px;border-radius:6px;min-width:32px;min-height:32px;
}
.cos-card-del:hover{background:rgba(255,80,80,.14);color:#ff8a8a}
.cos-card-price{color:var(--madera-accent);font-size:22px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.cos-card-sub{color:var(--cream-x);font-size:12px}
.cos-card-edit{align-self:stretch;margin:0}

/* Editor */
.cos-editor{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;
  min-height:300px;
}
.cos-editor-empty{color:var(--cream-x);text-align:center;padding:40px 20px;font-size:13px}
.cos-editor-head{display:flex;gap:10px;margin-bottom:14px;align-items:center;flex-wrap:wrap}
.cos-editor-name{
  flex:1;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--cream);
  font:inherit;font-size:17px;font-weight:700;padding:10px 14px;border-radius:var(--r-md);
  outline:none;min-width:200px;
}
.cos-editor-name:focus{border-color:var(--madera-accent)}

/* Tabla piezas */
.cos-table-wrap{overflow-x:auto;margin-bottom:16px;border-radius:var(--r-md);border:1px solid var(--line)}
.cos-table{
  width:100%;border-collapse:collapse;background:rgba(255,255,255,.02);
  font-size:13px;color:var(--cream);
}
.cos-table thead th{
  background:rgba(176,128,64,.08);color:var(--madera-accent);
  padding:10px 8px;text-align:left;font-weight:700;
  font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.cos-table tbody td{padding:6px 6px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
.cos-table tbody tr:last-child td{border-bottom:none}
.cos-table .form-input{padding:7px 8px;font-size:13px;min-height:36px}
.cos-piece{transition:background var(--dur-fast) ease}
.cos-piece:hover{background:rgba(255,255,255,.02)}
.cos-fadein{animation:cosFadeIn 250ms ease-out}
@keyframes cosFadeIn{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}
.cos-dims-cell{display:flex;gap:4px;align-items:center;flex-wrap:wrap;min-width:180px}
.cos-dims-cell .form-input{max-width:82px}
.cos-pin-note{color:var(--cream-x);font-size:11px;font-style:italic}
.cos-qty{max-width:64px}
.cos-money{white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums;color:var(--cream);padding-right:12px !important}
.cos-money b{color:var(--madera-accent)}
.cos-piece-del{
  background:transparent;border:none;color:var(--cream-x);cursor:pointer;
  font-size:15px;padding:6px 8px;border-radius:6px;min-width:44px;min-height:44px;
}
.cos-piece-del:hover{background:rgba(255,80,80,.14);color:#ff8a8a}
.cos-empty-row{padding:20px !important;text-align:center;color:var(--cream-x);font-size:13px;font-style:italic}

/* Breakdown */
.cos-breakdown{
  background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px;display:flex;flex-direction:column;gap:8px;
}
.cos-brk-row{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-size:13px;color:var(--cream-d);
}
.cos-brk-row b{color:var(--cream);font-variant-numeric:tabular-nums;font-weight:700}
.cos-brk-total{
  padding-top:8px;border-top:1px solid var(--line);
  color:var(--cream);font-weight:700;
}
.cos-brk-margen{
  padding-top:10px;border-top:1px dashed var(--line);margin-top:4px;
}
.cos-brk-margen label{color:var(--cream);font-weight:600}
.cos-margen-inp{display:flex;align-items:center;gap:4px}
.cos-margen-inp input{
  width:72px;padding:8px 10px;background:rgba(255,255,255,.04);border:1px solid var(--line);
  color:var(--cream);font:inherit;font-size:13px;border-radius:var(--r-sm);
  text-align:right;outline:none;font-variant-numeric:tabular-nums;
}
.cos-margen-inp input:focus{border-color:var(--madera-accent)}
.cos-margen-inp span{color:var(--cream-x);font-size:13px}
.cos-brk-hero{
  margin-top:8px;padding:16px;border-radius:var(--r-md);
  background:linear-gradient(135deg,rgba(176,128,64,.18),rgba(176,128,64,.05));
  border:1px solid rgba(176,128,64,.4);
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.cos-brk-hero > span{color:var(--madera-accent);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.cos-hero-val{color:var(--cream);font-size:28px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cos-pdf-btn{margin-top:8px;width:100%}

/* Insumos (interno: sub-vista "Madera") */
.cos-ins-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px;flex-wrap:wrap}
.cos-ins-hint{color:var(--cream-x);font-size:12px;margin:0}
.cos-ins-table .form-input{min-width:110px}
.cos-ins-table .cos-iin-price{min-width:90px;text-align:right}
.cos-stale td{background:rgba(255,180,60,.05)}
.cos-stale-warn{display:inline-block;margin-left:4px;font-size:14px;cursor:help}

/* v12 — Hero header sub-vista Madera */
.cos-madera-hero{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  margin:0 0 14px;padding:14px 16px;
  background:linear-gradient(135deg,rgba(176,128,64,.18),rgba(176,128,64,.05));
  border:1px solid rgba(176,128,64,.4);border-radius:var(--r-md);
  flex-wrap:wrap;
}
.cos-madera-hero-title{display:flex;flex-direction:column;gap:4px;flex:1;min-width:220px}
.cos-madera-hero-title h3{
  margin:0;color:var(--cream);font-size:18px;font-weight:800;letter-spacing:-.01em;
}
.cos-madera-hero-title .cos-ins-hint{color:var(--cream-x);font-size:13px;margin:0}
.cos-madera-hero-add{
  font-size:14px;padding:12px 22px;min-height:48px;white-space:nowrap;
}
@media(max-width:768px){
  .cos-madera-hero{padding:12px 14px}
  .cos-madera-hero-add{width:100%;font-size:15px}
}

/* v12 — Flash animation para fila/card recién creada */
@keyframes cosFlashNew{
  0%   { background:rgba(176,128,64,.35); box-shadow:0 0 0 2px rgba(176,128,64,.5); }
  100% { background:transparent; box-shadow:0 0 0 0 rgba(176,128,64,0); }
}
.cos-flash-new{ animation:cosFlashNew 2s ease-out }
.cos-flash-new td{ animation:cosFlashNew 2s ease-out }

/* Variables */
.cos-vars-toolbar{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:16px;gap:10px;flex-wrap:wrap;
  padding:12px 14px;background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:var(--r-md);
}
.cos-check{display:flex;align-items:center;gap:8px;color:var(--cream-d);font-size:13px;cursor:pointer}
.cos-check input{width:18px;height:18px;accent-color:var(--madera-accent);cursor:pointer}
.cos-vars-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;
}
.cos-var-card{
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px;display:flex;flex-direction:column;gap:10px;
}
.cos-var-head{display:flex;justify-content:space-between;align-items:center}
.cos-var-head label{color:var(--cream);font-size:13px;font-weight:600}
.cos-var-tip{
  color:var(--cream-x);font-size:14px;cursor:help;width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(255,255,255,.05);
}
.cos-var-tip:hover{background:rgba(176,128,64,.20);color:var(--madera-accent)}
.cos-var-controls{display:flex;flex-direction:column;gap:8px}
.cos-var-slider{
  width:100%;accent-color:var(--madera-accent);cursor:pointer;
  min-height:24px;
}
.cos-var-num{display:flex;align-items:center;gap:6px}
.cos-var-input{
  flex:1;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--cream);
  font:inherit;font-size:15px;font-weight:700;padding:8px 12px;border-radius:var(--r-sm);
  outline:none;text-align:right;font-variant-numeric:tabular-nums;min-height:40px;
}
.cos-var-input:focus{border-color:var(--madera-accent)}
.cos-var-unit{color:var(--madera-accent);font-size:13px;font-weight:700;min-width:24px}

@media(max-width:899px){
  .cos-editor-head{flex-direction:column;align-items:stretch}
  .cos-brk-hero{flex-direction:column;text-align:center;gap:6px}
  .cos-hero-val{font-size:32px}
  .cos-vars-grid{grid-template-columns:1fr}
  .cos-table{font-size:12px}
  .cos-table thead th{padding:8px 6px;font-size:10px}
  .cos-dims-cell{min-width:150px}
  .cos-dims-cell .form-input{max-width:72px}
}

/* ═══ COSTEO — UX polish v9 (P0-P2) ═══ */

/* P0-3 tooltip inline (ⓘ) */
.cos-info{
  display:inline-block;margin-left:4px;opacity:.55;cursor:help;
  font-size:0.9em;user-select:none;
  transition:opacity .15s;
}
.cos-info:hover{opacity:1}

/* P0-4 badge de precios caducados */
.cos-warn-caducado{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;
  background:rgba(176,128,64,.15);
  border-left:4px solid var(--madera-accent);
  border-radius:var(--r-md);
  padding:10px 14px;margin:0 0 14px;
  color:var(--cream);font-size:13px;line-height:1.4;
}
.cos-warn-caducado .cos-warn-cta{
  background:var(--madera-accent);color:#fff;border:none;
  padding:8px 14px;border-radius:var(--r-sm);font:inherit;font-size:13px;font-weight:700;
  cursor:pointer;white-space:nowrap;min-height:36px;
  transition:filter .15s;
}
.cos-warn-caducado .cos-warn-cta:hover{filter:brightness(1.1)}

/* Hero button (desktop + fallback mobile) */
.cos-canastas-sticky{
  display:flex;justify-content:flex-end;margin:0 0 12px;
}
.cos-hero-new{font-size:14px;padding:12px 22px;min-height:48px}
@media(max-width:768px){
  /* En mobile ya hay FAB, ocultar el hero button */
  .cos-canastas-sticky{display:none}
}

/* P0-1 Mobile cards para Insumos */
.cos-mobile-only{display:none}
.cos-desktop-only{display:block}
.cos-insumo-cards{display:none;flex-direction:column;gap:10px}

@media(max-width:768px){
  .cos-desktop-only{display:none !important}
  .cos-mobile-only{display:block}
  .cos-insumo-cards{display:flex}
}

.cos-insumo-card{
  display:flex;flex-direction:column;gap:8px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:14px;
  transition:border-color .15s;
}
.cos-insumo-card.cos-stale-card{border-color:rgba(255,180,60,.35);background:rgba(255,180,60,.03)}
.cos-insumo-card-name{color:var(--cream);font-size:16px;font-weight:600;line-height:1.3}
.cos-insumo-card-chips{display:flex;gap:6px;flex-wrap:wrap}
.cos-chip{
  display:inline-flex;align-items:center;
  padding:5px 10px;border-radius:100px;font-size:12px;font-weight:600;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--cream-d);
  font-variant-numeric:tabular-nums;
}
.cos-chip-price{background:rgba(176,128,64,.15);border-color:rgba(176,128,64,.35);color:var(--madera-accent)}
.cos-chip-merma{background:rgba(88,166,255,.10);border-color:rgba(88,166,255,.25);color:#7ab6ff}
.cos-chip-src{background:rgba(255,255,255,.03);color:var(--cream-x);font-weight:500}
.cos-insumo-card-actions{display:flex;gap:8px;margin-top:2px}
.cos-insumo-card-actions .btn{padding:10px 14px;font-size:13px;min-height:44px;flex:1;margin:0}
.cos-insumo-del{min-width:44px;min-height:44px}

/* FAB "+ Nueva canasta/producto" — dedicado Costeo, siempre visible en Costeo */
.cos-fab{
  display:flex;align-items:center;justify-content:center;
  position:fixed;bottom:24px;right:24px;z-index:121;
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--madera-accent),#8a6532);
  color:#fff;border:none;font-size:28px;font-weight:400;line-height:1;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(176,128,64,.45),0 1px 0 rgba(255,255,255,.14) inset;
  transition:transform .15s var(--ease-spring), box-shadow .15s;
}
.cos-fab:active{transform:scale(.94)}
.cos-fab:hover{transform:scale(1.05);box-shadow:0 14px 34px rgba(176,128,64,.55),0 1px 0 rgba(255,255,255,.14) inset}
/* Mobile — ligeramente arriba para no chocar con bottom nav */
@media(max-width:899px){
  .cos-fab{bottom:80px;right:20px}
}

/* Ocultar FAB global y AI FAB cuando el usuario está en Costeo
   (Costeo tiene su propio FAB dedicado con solo 3 opciones) */
body.on-costeo .mad-fab,
body.on-costeo .mad-fab-left{display:none !important}

/* Bottom-sheet options (new canasta) */
.cos-sheet-opts{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.cos-sheet-opt{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:var(--r-md);
  color:var(--cream);font:inherit;text-align:left;cursor:pointer;
  min-height:64px;
  transition:all .15s;
}
.cos-sheet-opt:hover{background:rgba(176,128,64,.08);border-color:rgba(176,128,64,.35)}
.cos-sheet-opt:active{transform:scale(.98)}
.cos-sheet-opt-ico{font-size:24px;flex-shrink:0}
.cos-sheet-opt-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.cos-sheet-opt-txt b{color:var(--cream);font-size:14px;font-weight:700}
.cos-sheet-opt-txt em{color:var(--cream-x);font-size:12px;font-style:normal;font-weight:400}

/* P1-6 tap targets sidebar */
.sidebar button, .side-item{min-height:44px}

/* P1-7 selects nativos en mobile: font-size 16px evita zoom iOS */
@media(max-width:768px){
  .cos-table select.form-input,
  .cos-table input.form-input{
    font-size:16px;min-height:44px;
  }
  .cos-ins-table select.form-input,
  .cos-ins-table input.form-input{
    font-size:16px;min-height:44px;
  }
  .cos-margen-inp input{font-size:16px;min-height:44px}
}

/* P2-15 tabular nums en precio total (hero + cell) */
.cos-hero-val,.cos-brk-row b,.cos-money,.cos-money b,.cos-card-price{
  font-variant-numeric:tabular-nums;
}

/* Inline "Nueva" del panel lateral (P0 hero desktop) */
.cos-list-add-btn{padding:8px 14px;font-size:13px;min-height:36px}
.btn.small{padding:8px 14px;font-size:13px;min-height:36px}

/* ═══ COSTEO PRO v11 (2026-08-16) ═══ */

/* Accesibilidad — anuncio de autosave a screen readers */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Header con toggle vista interna/cliente */
.cos-head{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  flex-wrap:wrap;margin-bottom:12px;
}
.cos-head h2{margin:0}
.cos-view-toggle{
  display:inline-flex;align-items:center;gap:0;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:100px;padding:3px;
}
.cos-view-eye{padding:0 8px 0 10px;color:var(--cream-x);font-size:14px}
.cos-view-btn{
  background:transparent;border:none;color:var(--cream-d);
  padding:8px 14px;border-radius:100px;font:inherit;font-size:13px;font-weight:600;
  cursor:pointer;min-height:36px;transition:all .18s ease;
}
.cos-view-btn:hover{color:var(--cream)}
.cos-view-btn.active{
  background:var(--madera-accent);color:#fff;
  box-shadow:0 2px 8px rgba(176,128,64,.35);
}
@media(max-width:768px){
  .cos-view-toggle{width:100%;justify-content:stretch}
  .cos-view-btn{flex:1;font-size:12px;padding:10px 8px}
}

/* Toggle visibility por modo — la clase live en scr#screen-costeo */
.cos-view-cliente .internal-only{display:none !important}
.cos-view-interno .cliente-only{display:none !important}
/* .cliente-only por default también oculto fuera del contexto */
.cliente-only{display:none}
.cos-view-cliente .cliente-only{display:flex}

/* Empty state hero renovado */
.cos-empty-hero{padding:40px 20px}
.cos-empty-svg{display:block;margin:0 auto 16px}
.cos-empty-hero h3{font-size:22px;font-weight:700}
.cos-empty-hero p{font-size:14px}
.cos-empty-cta{font-size:15px;padding:14px 26px;min-height:52px}

/* Cliente block colapsable */
.cos-client-block{
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:var(--r-md);margin-bottom:14px;
  transition:border-color .15s;
}
.cos-client-block[open]{border-color:rgba(176,128,64,.25)}
.cos-client-block summary{
  padding:12px 16px;cursor:pointer;color:var(--cream);font-size:14px;
  font-weight:600;list-style:none;user-select:none;min-height:44px;
  display:flex;align-items:center;
}
.cos-client-block summary::-webkit-details-marker{display:none}
.cos-client-summary-sub{color:var(--cream-x);font-weight:400;font-size:13px;margin-left:8px}
.cos-client-grid{
  padding:0 16px 14px;display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.cos-client-lbl{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--cream-d)}
.cos-client-lbl span{font-weight:600}
.cos-client-lbl em{color:var(--cream-x);font-style:normal;font-weight:400;font-size:11px}
.cos-client-lbl-status{grid-column:span 2}
.cos-client-lbl-notas{grid-column:span 2}
.cos-client-lbl textarea{resize:vertical;min-height:44px;font-family:inherit}
@media(max-width:768px){
  .cos-client-grid{grid-template-columns:1fr}
  .cos-client-lbl-status,.cos-client-lbl-notas{grid-column:span 1}
}

/* Status dot en cards laterales */
.cos-status-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  margin-right:4px;vertical-align:middle;
}
.cos-card-cli{color:var(--cream-x);font-size:11px;margin-left:2px}

/* Tiempo estimado en breakdown */
.cos-brk-tiempo{align-items:center}
.cos-brk-tiempo label{color:var(--cream);font-weight:600}
.cos-brk-tiempo b{color:var(--madera-accent);font-variant-numeric:tabular-nums;font-size:14px}
.cos-tiempo-info{display:flex;align-items:center;gap:6px}
.cos-tiempo-info input{
  width:60px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--cream);
  font:inherit;font-size:13px;font-weight:600;padding:6px 8px;border-radius:var(--r-sm);
  outline:none;text-align:right;font-variant-numeric:tabular-nums;min-height:36px;
}
.cos-tiempo-info input:focus{border-color:var(--madera-accent)}
.cos-tiempo-info span{color:var(--cream-x);font-size:12px}
.cos-tiempo-inp{max-width:70px;text-align:right}

/* Actions row (PDF cliente/interno + WA) */
.cos-actions-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.cos-actions-row .btn{margin:0}
.cos-pdf-btn-cliente{grid-column:1 / -1;background:var(--madera-accent);font-weight:700}
.cos-wa-btn{
  grid-column:1 / -1;
  background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;font-weight:700;
  box-shadow:0 4px 14px rgba(37,211,102,.35);
}
.cos-wa-btn:hover{filter:brightness(1.06)}
.cos-view-interno .cos-actions-row{grid-template-columns:1fr 1fr}
.cos-view-interno .cos-pdf-btn-cliente{grid-column:1}
.cos-view-interno .cos-pdf-btn-interno{grid-column:2}
.cos-view-interno .cos-wa-btn{grid-column:1 / -1}
@media(max-width:480px){
  .cos-actions-row{grid-template-columns:1fr !important}
  .cos-actions-row .btn{grid-column:1 !important}
}

/* ─── Histórico ─── */
.cos-hist-chips{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.cos-hist-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:100px;background:rgba(255,255,255,.04);
  border:1px solid var(--line);color:var(--cream-d);
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  min-height:36px;white-space:nowrap;
  transition:all .15s;
}
.cos-hist-chip:hover{background:rgba(176,128,64,.08);color:var(--cream)}
.cos-hist-chip.active{
  background:var(--madera-accent);color:#fff;border-color:transparent;
  box-shadow:0 2px 8px rgba(176,128,64,.35);
}
.cos-hist-chip-n{
  background:rgba(0,0,0,.25);color:inherit;
  padding:1px 8px;border-radius:100px;font-size:11px;font-weight:700;
  font-variant-numeric:tabular-nums;
}
.cos-hist-chip.active .cos-hist-chip-n{background:rgba(255,255,255,.22)}
.cos-hist-list{display:flex;flex-direction:column;gap:10px}
.cos-hist-card{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  border-left:4px solid var(--madera-accent);
  padding:14px 16px;display:flex;flex-direction:column;gap:8px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.cos-hist-card:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.25)}
.cos-hist-card-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  flex-wrap:wrap;
}
.cos-hist-card-title{color:var(--cream);font-size:15px;font-weight:700;line-height:1.3}
.cos-hist-card-cli{color:var(--cream-x);font-weight:400;font-size:13px}
.cos-hist-card-price{color:var(--madera-accent);font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.cos-hist-card-meta{color:var(--cream-x);font-size:13px;display:flex;gap:6px;flex-wrap:wrap}
.cos-hist-status{font-weight:700}
.cos-hist-card-actions{
  display:flex;gap:6px;flex-wrap:wrap;margin-top:2px;align-items:center;
}
.cos-hist-status-sel{min-width:140px;font-size:13px;min-height:38px;padding:6px 8px}
.cos-hist-btn{padding:8px 12px;font-size:13px;min-height:38px;margin:0;flex:0 0 auto}
@media(max-width:480px){
  .cos-hist-card-actions{flex-direction:row;justify-content:stretch}
  .cos-hist-status-sel{flex:1 1 100%;margin-bottom:4px}
  .cos-hist-btn{flex:1 1 30%}
}

/* ─── Preview público ─── */
.cos-preview-mode{max-width:720px;margin:0 auto;padding:24px 16px}
.cos-preview-wrap{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:28px;
}
.cos-preview-header{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:16px;border-bottom:2px solid var(--madera-accent);
  margin-bottom:20px;
}
.cos-preview-brand{color:var(--madera-accent);font-size:16px;font-weight:800}
.cos-preview-folio{color:var(--cream-x);font-size:12px;font-weight:600}
.cos-preview-title{color:var(--cream);font-size:26px;font-weight:800;margin:0 0 8px;line-height:1.2}
.cos-preview-cli{color:var(--cream-d);font-size:14px;margin-bottom:18px}
.cos-preview-cli b{color:var(--cream)}
.cos-preview-piezas-wrap h3{
  color:var(--madera-accent);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px;
}
.cos-preview-table{width:100%;border-collapse:collapse;margin-bottom:20px}
.cos-preview-table th,.cos-preview-table td{
  padding:10px 12px;border-bottom:1px solid var(--line);
  color:var(--cream);font-size:14px;text-align:left;
}
.cos-preview-table th{
  color:var(--cream-x);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;
}
.cos-preview-cant{text-align:right;font-variant-numeric:tabular-nums}
.cos-preview-breakdown{
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;
  padding:16px 20px;margin-bottom:18px;
}
.cos-preview-row{display:flex;justify-content:space-between;padding:6px 0;color:var(--cream-d);font-size:14px}
.cos-preview-row b{color:var(--cream);font-variant-numeric:tabular-nums}
.cos-preview-total{
  border-top:2px solid var(--madera-accent);margin-top:8px;padding-top:12px;
  font-size:18px;color:var(--cream);
}
.cos-preview-total b{color:var(--madera-accent);font-size:22px;font-weight:800}
.cos-preview-actions{display:flex;gap:10px;margin-top:8px}
.cos-preview-actions .btn{margin:0;flex:1}
.cos-preview-foot{color:var(--cream-x);font-size:11px;text-align:center;margin-top:20px;font-style:italic}
.cos-preview-empty{padding:60px 20px;text-align:center;max-width:520px;margin:0 auto}
.cos-preview-empty h2{color:var(--cream);font-size:20px;margin:0 0 12px}
.cos-preview-empty p{color:var(--cream-x);font-size:14px;line-height:1.5;margin:0 auto 10px;max-width:420px}
.cos-preview-hint{color:var(--cream-x);font-size:12px;font-style:italic;opacity:.8}

/* Preview: sidebar/tiles/fabs se ocultan (es página cliente) */
.cos-preview-mode ~ *,
body:has(.cos-preview-mode) .mad-fab,
body:has(.cos-preview-mode) .mad-fab-left,
body:has(.cos-preview-mode) .cos-fab{display:none !important}

/* Print styles */
@media print {
  .sidebar,.tile-grid,.cos-fab,.cos-tabs,.cot-actions,.cos-hero-new,
  .mad-fab,.mad-fab-left,.modal-overlay,header,footer,
  .back-btn,.cos-view-toggle,.cos-actions-row,.cos-hist-card-actions,
  #toast-stack,.cos-editor-head button,.cos-add-pieza,.cos-piece-del,.cos-card-del{
    display:none !important;
  }
  body,html{background:white !important;color:black !important}
  .app{padding:0 !important}
  .cos-editor,.cos-canastas-grid,.cos-breakdown,.cos-preview-wrap{
    background:white !important;color:black !important;border:none !important;box-shadow:none !important;
  }
  .cos-brk-hero,.cos-preview-title{color:black !important}
  .cos-hero-val,.cos-preview-total b{color:#8a6532 !important}
  .cos-brk-hero{font-size:24pt !important;margin:20pt 0 !important}
  .cos-preview-mode{padding:0 !important}
  .cos-piezas-tabla,.cos-table,.cos-preview-table{font-size:10pt !important}
  .cos-table thead th,.cos-preview-table th{background:#f5f5f0 !important;color:#333 !important}
  /* En modo cliente durante print, ocultar todo interno */
  .cos-view-cliente .internal-only{display:none !important}
  .cos-view-interno .cliente-only{display:none !important}
}

/* Reduced motion — respeta preferencia usuario */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}