/* Diseñador de gorros — tema oscuro "piscina de noche" (30-10-2026).
   Va DESPUÉS del <style> de la página y solo pisa lo visual: la estructura y los ids no cambian. */
:root{
  --deep:#e9f6ff; --deep2:#020b16; --aqua:#22d3ee; --aqua2:#0ea5c6; --ball:#f6a623;
  --ink:#e8f3fb; --mut:#8fb0c6; --paper:#06172a; --card:rgba(12,34,58,.62); --line:rgba(120,210,255,.14);
  --r:18px; --sh:0 18px 50px rgba(0,0,0,.45);
  --glass:rgba(255,255,255,.045); --glass2:rgba(255,255,255,.08);
}
body{background:radial-gradient(1200px 700px at 20% -10%,#0d3a63 0,transparent 60%),radial-gradient(900px 600px at 110% 10%,#08304f 0,transparent 55%),linear-gradient(180deg,#041222 0,#06182c 50%,#041020 100%);background-attachment:fixed;color:var(--ink)}

/* cabecera */
header{background:rgba(2,11,22,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
header .t{letter-spacing:.01em}
header .t small{color:var(--aqua);opacity:.9}
#account button,.back{border-color:var(--line);background:var(--glass)}
#account button:hover,.back:hover{background:var(--glass2);border-color:rgba(34,211,238,.5)}

/* tarjetas de vidrio */
.card{background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.sec h2{color:#fff;font-size:1.02rem;letter-spacing:.01em}
.sec h2::before{content:"";width:4px;height:16px;border-radius:4px;background:linear-gradient(var(--aqua),var(--aqua2));box-shadow:0 0 12px var(--aqua)}
.sub,.note,.price,.row{color:var(--mut)}

/* visor 3D: piscina de noche desenfocada + viñeta */
.stage{border-color:rgba(34,211,238,.22)}
#viewer{height:clamp(380px,62vh,680px);background:
  radial-gradient(ellipse at 50% 46%,rgba(34,211,238,.10) 0,transparent 48%),
  radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(2,8,16,.72) 100%),
  url(/img/gorro-fondo-piscina-v1.jpg) center/cover no-repeat,#05182c}
#viewer::after{content:"";position:absolute;left:50%;bottom:7%;width:46%;height:7%;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%);pointer-events:none;filter:blur(4px)}
#viewer::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 0 rgba(34,211,238,0);transition:box-shadow .6s}
#viewer.glow::before{animation:glow 1.3s ease-out}
@keyframes glow{0%{box-shadow:inset 0 0 0 2px rgba(34,211,238,.9),inset 0 0 90px rgba(34,211,238,.45)}100%{box-shadow:inset 0 0 0 0 rgba(34,211,238,0),inset 0 0 0 rgba(34,211,238,0)}}
#viewer canvas{position:relative;z-index:1}

/* botones de vista: barra segmentada con iconos */
#viewbtns{border-top:1px solid var(--line);background:rgba(2,11,22,.35);gap:6px;padding:10px 12px}
#viewbtns button{background:var(--glass);border:1px solid var(--line);color:var(--ink);font-weight:700;letter-spacing:.01em;transition:all .18s}
#viewbtns button::before{display:inline-block;margin-right:6px;opacity:.85}
#viewbtns [data-view=frente]::before{content:"◉"}
#viewbtns [data-view=der]::before{content:"◐"}
#viewbtns [data-view=atras]::before{content:"○"}
#viewbtns [data-view=izq]::before{content:"◑"}
#viewbtns [data-view=arriba]::before{content:"⌃"}
#viewbtns button:hover{background:rgba(34,211,238,.14);border-color:rgba(34,211,238,.55);color:#fff}
#viewbtns button:active{transform:scale(.97)}
#toolHint{color:var(--mut);border-top:1px solid var(--line)}

/* panel de herramienta y controles */
#tool{border-top:1px solid var(--line)}
#tool .th b{color:#fff}
.mini,.chip,#tFont button,.two button,.um-btns button{background:var(--glass);border:1px solid var(--line);color:var(--ink)}
.mini:hover,.chip:hover,#tFont button:hover{background:var(--glass2);border-color:rgba(34,211,238,.45)}
.mini.del{color:#ff9b9b;border-color:rgba(255,120,120,.35)}
.chip.on,#tFont button.on,.two button.on{background:linear-gradient(135deg,var(--aqua),var(--aqua2));color:#02131f;border-color:transparent;box-shadow:0 0 18px rgba(34,211,238,.35)}
.row input[type=range],.ia input[type=range]{accent-color:var(--aqua)}
.row input[type=text],.fields input,.inbar input,.go input,.um-body input,.mm-admin input{background:rgba(2,11,22,.55);border:1px solid var(--line);color:#fff}
.row input[type=text]:focus,.fields input:focus,.inbar input:focus,.go input:focus{border-color:var(--aqua);box-shadow:0 0 0 3px rgba(34,211,238,.18);outline:0}
::placeholder{color:#5f7f96}
.fields label{color:var(--mut)}
.sw{border-color:#0b1d30;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.sw.on{box-shadow:0 0 0 3px var(--aqua),0 0 14px rgba(34,211,238,.6)}
.upload{border-color:rgba(34,211,238,.35);color:var(--ink);background:rgba(34,211,238,.04)}
.upload:hover{background:rgba(34,211,238,.10)}
.go button{background:linear-gradient(135deg,var(--aqua),var(--aqua2));color:#02131f}

/* asistente IA: más protagonismo */
.ia{background:linear-gradient(160deg,rgba(14,165,198,.22),rgba(6,24,44,.75) 55%),rgba(6,24,44,.7);border:1px solid rgba(34,211,238,.35);position:relative;overflow:hidden}
.ia::after{content:"";position:absolute;inset:-40% -40% auto auto;width:260px;height:260px;background:radial-gradient(circle,rgba(34,211,238,.25),transparent 65%);pointer-events:none;animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translate(-30px,30px)}}
.ia h2 span{background:linear-gradient(135deg,#f6a623,#ffcf6b);box-shadow:0 0 14px rgba(246,166,35,.5)}
#msgs{max-height:260px}
.msg{font-size:.9rem;border-radius:16px}
.msg.bot{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);border-bottom-left-radius:6px}
.msg.me{background:linear-gradient(135deg,var(--aqua),var(--aqua2));color:#02131f;border-bottom-right-radius:6px}
.msg.typing::after{content:"▍";color:var(--aqua);animation:blink .7s steps(1) infinite;margin-left:1px}
@keyframes blink{50%{opacity:0}}
#iaBusy{color:#bff3ff}
#iaBusyTxt::after{content:"";animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.spin{border-color:rgba(34,211,238,.25);border-top-color:var(--aqua)}
.inbar button,.primary{background:linear-gradient(135deg,#f6a623,#ffc15a);color:#2c1a00;box-shadow:0 6px 20px rgba(246,166,35,.3)}

/* guardar y pedir */
#btnSave{background:linear-gradient(135deg,var(--aqua),var(--aqua2));color:#02131f;box-shadow:0 10px 30px rgba(34,211,238,.3)}
#btnWa{box-shadow:0 10px 30px rgba(31,170,89,.3)}
.price b{color:#fff;font-size:1.15rem}

/* modales y SEO */
.um-box,.mm-box{background:#0a2038;border:1px solid var(--line);color:var(--ink)}
.um-top,.mm-head{color:#fff}
.um-msg{color:var(--mut)}
.mm-head{border-bottom-color:var(--line)}
.mm-head button{background:var(--glass);color:#fff}
.mm-card{background:rgba(255,255,255,.04);border-color:var(--line)}
.mm-card .th{background-color:#071a2e}
.mm-card .info{color:var(--ink)}
.mm-card .acts button{background:var(--glass);border-color:var(--line);color:var(--ink)}
.mm-admin{background:rgba(2,11,22,.4);border-bottom-color:var(--line)}
.seo{background:var(--card);border-color:var(--line)}
.seo h2,.seo h3{color:#fff}
.seo p,.seo li,.seo dd{color:#b8cfdf}
.seo dt{color:#fff}
.seo a{color:var(--aqua)}
#view2d{background:#071a2e}
.pvrow figcaption,.pvnote{color:var(--mut)}

/* celular: visor casi a pantalla completa y las vistas en una fila deslizable */
@media(max-width:940px){
  #viewer{height:42svh;min-height:230px;background:radial-gradient(ellipse at 50% 46%,rgba(34,211,238,.10) 0,transparent 48%),radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(2,8,16,.72) 100%),url(/img/gorro-fondo-piscina-movil-v1.jpg) center/cover no-repeat,#05182c}
  #viewbtns{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;padding:10px}
  #viewbtns::-webkit-scrollbar{display:none}
  #viewbtns button{flex:none}
  .ia::after{width:180px;height:180px}
}
@media(prefers-reduced-motion:reduce){.ia::after,#iaBusyTxt::after,.msg.typing::after{animation:none}#viewer.glow::before{animation:none}}
.chips{scrollbar-width:thin;scrollbar-color:rgba(34,211,238,.35) transparent}
.chips::-webkit-scrollbar{height:4px}.chips::-webkit-scrollbar-track{background:transparent}.chips::-webkit-scrollbar-thumb{background:rgba(34,211,238,.35);border-radius:4px}
#msgs{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
/* pestañas de admin (3D / impresión) */
.viewtabs{padding:10px 10px 0;gap:6px}
.viewtabs button{background:rgba(2,11,22,.45);border:1px solid var(--line);border-bottom:0;color:var(--mut);transition:all .18s}
.viewtabs button:hover{color:#fff;background:rgba(34,211,238,.08)}
.viewtabs button.on{background:linear-gradient(180deg,rgba(34,211,238,.22),rgba(34,211,238,.06));color:#fff;border-color:rgba(34,211,238,.5);box-shadow:inset 0 2px 0 var(--aqua)}
/* celular: el título largo (SEO) en una sola línea, cortado con puntos suspensivos */
@media(max-width:940px){
  header .t{font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  header img{width:32px;height:32px}
}
/* 4-nov: botones que usaban fondo var(--deep) (en oscuro es casi blanco) con letra blanca */
.um-btns .um-ok,.mm-admin button{background:linear-gradient(135deg,var(--aqua),var(--aqua2));color:#02131f;border-color:transparent}
.um-btns .um-ok.danger{background:#b3261e;color:#fff}