/* PINTURA LIBRE · estudio artístico RV3. La superficie del lienzo permanece limpia. */
#modo-pintar.active:has(.free-shell){
  position:relative;isolation:isolate;display:flex;flex-direction:column;gap:clamp(5px,1vh,12px);
  width:100%;max-width:1600px;min-height:100dvh;margin:0 auto;padding:clamp(12px,2vw,28px);
  overflow-x:hidden;background:
    radial-gradient(ellipse at 50% 24%,rgba(30,111,163,.2),transparent 52%),
    radial-gradient(ellipse at 8% 88%,rgba(162,64,194,.12),transparent 32%);
}
#modo-pintar.active:has(.free-shell)::before,#modo-pintar.active:has(.free-shell)::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(2px);
}
#modo-pintar.active:has(.free-shell)::before{
  width:clamp(140px,22vw,300px);aspect-ratio:1;top:18%;left:-8%;
  background:radial-gradient(circle,rgba(38,196,220,.14),rgba(38,196,220,0) 70%);
}
#modo-pintar.active:has(.free-shell)::after{
  width:clamp(160px,26vw,350px);aspect-ratio:1;right:-10%;bottom:4%;
  background:radial-gradient(circle,rgba(184,91,255,.13),rgba(184,91,255,0) 70%);
}
#modo-pintar.active:has(.free-shell)>.pv3-back{
  position:relative;top:auto;left:auto;z-index:4;align-self:flex-start;flex:none;min-height:38px;
  padding:7px 13px;border:1px solid rgba(103,232,249,.28);border-radius:12px;
  color:#d8f7ff;background:linear-gradient(135deg,rgba(15,38,62,.92),rgba(20,31,55,.78));
  box-shadow:0 6px 18px rgba(0,0,0,.2);font-size:.78rem;letter-spacing:.035em;
  transition:background .2s,border-color .2s,box-shadow .2s;
}
#modo-pintar.active:has(.free-shell)>.pv3-back:hover{border-color:#67e8f9;background:#123b56;box-shadow:0 0 18px rgba(34,211,238,.22)}
.free-shell{
  --studio-cyan:#53e5ef;--studio-blue:#5aa9ff;--studio-violet:#bb8cff;--studio-gold:#ffd66b;
  position:relative;isolation:isolate;width:min(100%,1480px);max-width:none;flex:1;min-height:0;margin:auto;padding:clamp(10px,1.7vw,24px);
  display:grid;grid-template-columns:minmax(150px,.57fr) minmax(360px,1.56fr) minmax(205px,.68fr);
  grid-template-rows:auto minmax(220px,1fr) auto auto;
  grid-template-areas:"head head top" "reference canvas palette" "status canvas actions" "guide guide guide";
  gap:clamp(7px,1.3vw,18px);align-items:stretch;text-align:center;overflow:visible;
  border:1px solid rgba(105,196,236,.26);border-radius:clamp(18px,2.2vw,30px);
  background:linear-gradient(140deg,rgba(12,34,57,.94),rgba(7,17,34,.97) 58%,rgba(24,24,52,.94));
  box-shadow:0 24px 68px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.07),0 0 40px rgba(33,158,204,.08);
}
.free-shell::before,.free-shell::after{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;}
.free-shell::before{
  width:9px;height:9px;top:15%;left:8%;background:#8cf6f0;
  box-shadow:0 0 12px 4px rgba(83,229,239,.38),clamp(100px,20vw,280px) 75px 0 -3px rgba(255,214,107,.85),
    clamp(150px,38vw,540px) 22px 0 -2px rgba(133,196,255,.9);
}
.free-shell::after{
  width:6px;height:6px;right:8%;bottom:19%;background:#e0a2ff;
  box-shadow:0 0 11px 3px rgba(187,140,255,.36),clamp(-460px,-30vw,-130px) -70px 0 -2px rgba(83,229,239,.9);
}
.free-shell>*{position:relative;z-index:1;min-width:0}
.free-shell>header{grid-area:head;align-self:center;display:grid;grid-template-columns:auto auto 1fr;gap:7px 14px;align-items:center;text-align:left;padding:0 4px;}
.free-shell>header .eyebrow{grid-column:1/-1;width:max-content;margin:0;padding:5px 10px;border:1px solid rgba(83,229,239,.3);border-radius:999px;background:rgba(14,91,116,.22);color:#8df3fb;font-size:.66rem;letter-spacing:.14em;}
.free-shell>header h2{grid-column:1/-1;margin:0;color:#f3fbff;font-size:clamp(1.45rem,3vw,2.65rem);line-height:1.02;letter-spacing:-.035em;text-shadow:0 4px 20px rgba(56,189,248,.2);}
.free-shell>header #fp-name{grid-column:1/-1;margin:0;color:#bad6ea;font-size:clamp(.82rem,1.15vw,1rem);font-weight:700;}
.fp-top-actions{grid-area:top;align-self:center;justify-self:end;display:flex;justify-content:flex-end;margin:0;}
.fp-top-actions button{
  min-height:42px;padding:9px 14px;border:1px solid rgba(114,201,239,.36);border-radius:13px;
  color:#dff9ff;background:linear-gradient(135deg,rgba(22,73,100,.84),rgba(32,39,76,.88));
  box-shadow:0 8px 22px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.1);font-size:.76rem;font-weight:900;
  transition:transform .18s,border-color .18s,box-shadow .18s,background .18s;
}
.fp-top-actions button:hover{transform:translateY(-2px);border-color:#67e8f9;box-shadow:0 0 22px rgba(34,211,238,.2)}
.free-status{grid-area:status;align-self:start;display:grid;gap:8px;margin:0;text-align:left;}
.free-status span{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:45px;padding:10px 12px;
  border:1px solid rgba(119,167,202,.22);border-radius:13px;background:linear-gradient(120deg,rgba(28,54,79,.9),rgba(16,31,53,.84));
  color:#bad1e4;font-size:.78rem;font-weight:750;box-shadow:inset 0 1px rgba(255,255,255,.045);
}
.free-status span::before{content:"";flex:none;width:6px;height:6px;margin-right:2px;border-radius:50%;background:#76eeec;box-shadow:0 0 9px rgba(83,229,239,.8);}
.free-status span b{color:#f4fbff;font-size:.95rem;font-variant-numeric:tabular-nums;}
.fp-reference{
  grid-area:reference;align-self:stretch;min-width:0;min-height:0;max-height:none;margin:0;padding:14px 10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;overflow:hidden;
  border:1px solid rgba(255,214,107,.38);border-radius:17px;
  background:radial-gradient(ellipse at 50% 35%,rgba(255,203,90,.13),transparent 58%),linear-gradient(155deg,rgba(31,48,72,.95),rgba(12,24,43,.96));
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 10px 26px rgba(0,0,0,.18),0 0 22px rgba(255,191,70,.08);
  transition:opacity .3s,transform .3s,max-height .3s,margin .3s,padding .3s,border-width .3s;
}
.fp-reference:not(.hidden){animation:fp-reference-arrive .48s cubic-bezier(.2,.8,.2,1) both;}
.fp-reference.hidden{min-height:0;max-height:0;padding-top:0;padding-bottom:0;opacity:0;margin:0;border-width:0;pointer-events:none;}
#modo-pintar .fp-reference #fp-cloth{display:none;}
#modo-pintar .fp-reference #fp-source{display:block;width:min(100%,520px);max-height:min(48vh,390px);height:auto;object-fit:contain;filter:drop-shadow(0 14px 17px rgba(0,0,0,.42));}
.fp-reference b{color:#f2f8ff;font-size:.78rem;letter-spacing:.025em}.fp-reference small,#fp-guide{color:#a8bfd6;font-size:.73rem;line-height:1.4;}
.fp-canvas-wrap{
  grid-area:canvas;position:relative;isolation:isolate;container-type:size;align-self:stretch;justify-self:stretch;
  width:100%;min-width:0;min-height:0;margin:0;padding:clamp(12px,2vw,30px);display:flex;align-items:center;justify-content:center;overflow:hidden;
  border:1px solid rgba(107,201,237,.48);border-radius:clamp(17px,2vw,26px);
  background:linear-gradient(145deg,rgba(12,30,49,.97),rgba(7,17,31,.98)),#0a1829;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 50px rgba(15,104,145,.1),0 18px 36px rgba(0,0,0,.34),0 0 24px rgba(42,203,225,.13);
  touch-action:none;
}
.fp-canvas-wrap::before{
  content:"";position:absolute;z-index:-1;inset:7%;border-radius:22px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 48%,rgba(55,190,220,.12),transparent 65%),repeating-linear-gradient(0deg,transparent 0 39px,rgba(151,219,241,.025) 40px);
}
.fp-canvas-wrap::after{
  content:"";position:absolute;z-index:-1;width:52%;height:90%;left:-58%;top:5%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(64,212,228,.19),rgba(64,212,228,0) 70%);filter:blur(10px);
  animation:fp-studio-light 7.5s ease-in-out infinite alternate;
}
#fp-canvas{position:relative;z-index:1;display:block;width:100%;height:auto;max-width:100%;max-height:100%;object-fit:contain;touch-action:none;cursor:crosshair;filter:drop-shadow(0 18px 24px rgba(0,0,0,.36));}
#fp-guide{
  grid-area:guide;min-height:32px;margin:0;padding:8px 14px;border:1px solid rgba(91,157,196,.2);border-radius:12px;
  background:rgba(10,23,41,.58);color:#b4c8dd;font-weight:700;text-align:center;
}
.fp-palette{
  grid-area:palette;align-self:stretch;min-width:0;max-width:none;max-height:min(47vh,460px);overflow:auto;overscroll-behavior:contain;
  display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:center;align-items:center;gap:clamp(7px,1vw,12px);margin:0;padding:16px 12px;
  border:1px solid rgba(121,154,206,.3);border-radius:17px;
  background:linear-gradient(155deg,rgba(32,43,78,.83),rgba(16,28,52,.94));
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 12px 28px rgba(0,0,0,.19);
  scrollbar-color:rgba(103,232,249,.35) transparent;scrollbar-width:thin;
}
.fp-palette>b{flex:0 0 100%;margin:0 0 5px;color:#cbd9f2;font-size:.68rem;line-height:1.35;letter-spacing:.09em;text-align:center;}
.fp-color{
  flex:none;width:clamp(38px,4.1vw,54px);height:clamp(38px,4.1vw,54px);padding:4px;
  border:2px solid rgba(198,218,239,.22);border-radius:50%;background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.025));
  box-shadow:0 5px 12px rgba(0,0,0,.25);transition:transform .18s,border-color .18s,box-shadow .18s;
}
.fp-color i{display:block;width:100%;height:100%;border-radius:50%;background:var(--c);border:1px solid rgba(255,255,255,.52);box-shadow:inset 0 2px 3px rgba(255,255,255,.25),inset 0 -3px 5px rgba(0,0,0,.16);}
.fp-color:hover{transform:scale(1.08);border-color:#b9f7ff;box-shadow:0 0 15px rgba(83,229,239,.25)}
.fp-color.selected{border-color:#72f1f0;box-shadow:0 0 0 3px rgba(83,229,239,.22),0 0 20px rgba(83,229,239,.42);transform:scale(1.09);}
.fp-actions{grid-area:actions;align-self:start;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;}
.fp-actions button{
  min-width:0;min-height:48px;padding:9px 8px;border:1px solid rgba(120,174,208,.27);border-radius:13px;
  color:#e4f3ff;background:linear-gradient(145deg,rgba(36,55,83,.98),rgba(20,34,58,.98));
  box-shadow:0 7px 15px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.07);font-size:.76rem;font-weight:900;letter-spacing:.015em;
  transition:transform .16s,border-color .16s,filter .16s,box-shadow .16s;
}
.fp-actions button:hover{transform:translateY(-2px);filter:brightness(1.12);border-color:rgba(112,226,240,.7);box-shadow:0 10px 20px rgba(0,0,0,.24),0 0 15px rgba(83,229,239,.12);}
.fp-actions button:active{transform:translateY(0) scale(.98);}
.fp-actions #fp-check,.fp-actions #fp-next{grid-column:1/-1;border-color:rgba(90,247,191,.62);color:#f2fffb;background:linear-gradient(110deg,#087b71,#0eaa79 50%,#08795d);box-shadow:0 8px 22px rgba(5,150,105,.24),inset 0 1px rgba(255,255,255,.15);}
.fp-actions #fp-check:hover,.fp-actions #fp-next:hover{border-color:#8fffd9;box-shadow:0 0 22px rgba(52,211,153,.3);}
.fp-result{display:none;margin-top:12px;padding:14px;border-radius:15px;flex-direction:column;gap:4px}.fp-result:not(:empty){display:flex}.fp-result.success{background:#064e3b;color:#d1fae5;border:1px solid #10b981}.fp-result.error{background:#4c0519;color:#ffe4e6;border:1px solid #fb7185}
.fp-notice{position:fixed;z-index:80;inset:0;display:grid;place-items:center;padding:22px;background:rgba(2,7,18,.72);backdrop-filter:blur(7px)}
.fp-notice[hidden]{display:none}.fp-notice-card{width:min(100%,470px);padding:clamp(22px,4vw,34px);border:1px solid rgba(107,220,239,.42);border-radius:24px;background:linear-gradient(145deg,#132741,#0b172a 68%,#201d42);box-shadow:0 24px 65px rgba(0,0,0,.5),0 0 34px rgba(31,190,209,.13);text-align:center;}
.fp-notice-card>p:first-child{margin:0 0 8px;color:#83ebef;font-weight:900;letter-spacing:.12em;font-size:.72rem}.fp-notice-card h2{margin:0 0 11px;color:#f5fbff}.fp-notice-card>p:not(:first-child){margin:0;color:#c4d6e7;font-weight:700;line-height:1.5}.fp-notice-card button{width:100%;min-height:52px;margin-top:22px;border:1px solid rgba(255,255,255,.15);border-radius:13px;background:linear-gradient(105deg,#64e9e5,#89b6ff);color:#10243b;font-weight:950}.fp-notice.success .fp-notice-card{border-color:#39e2ae}.fp-notice.success .fp-notice-card button{background:linear-gradient(105deg,#28d4a2,#28a87d);color:#06271f}.fp-notice.error .fp-notice-card{border-color:#fb7185}.fp-notice.error .fp-notice-card button{background:linear-gradient(105deg,#fb7185,#e94670);color:#fff}
@keyframes fp-studio-enter{from{opacity:0;transform:translateY(15px) scale(.99)}to{opacity:1;transform:none}}
@keyframes fp-studio-light{0%{transform:translate3d(0,0,0);opacity:.42}100%{transform:translate3d(250%,4%,0);opacity:.86}}
@keyframes fp-reference-arrive{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fp-status-glint{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes fp-painting-aura{0%,100%{opacity:.35;transform:scale(.96)}50%{opacity:.9;transform:scale(1.04)}}
@keyframes fp-color-select{0%{box-shadow:0 0 0 0 rgba(83,229,239,0)}45%{box-shadow:0 0 0 7px rgba(83,229,239,.28),0 0 22px rgba(83,229,239,.55)}100%{box-shadow:0 0 0 3px rgba(83,229,239,.22),0 0 20px rgba(83,229,239,.42)}}
@keyframes fp-result-pop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
#modo-pintar .free-status span::before{animation:fp-status-glint 2.8s ease-in-out infinite;}
#modo-pintar .fp-color.selected{animation:fp-color-select .36s ease-out both;}
#modo-pintar .fp-canvas-wrap:has(#fp-canvas:active)::after{animation:fp-painting-aura .75s ease-in-out infinite;}
#modo-pintar .fp-notice:not([hidden]) .fp-notice-card{animation:fp-result-pop .38s cubic-bezier(.18,.72,.25,1) both;}
@media(orientation:landscape){
  #modo-pintar.active:has(.free-shell){display:flex;flex-direction:column;}
  #modo-pintar.active:has(.free-shell) .free-shell{grid-template-columns:minmax(145px,.55fr) minmax(320px,1.58fr) minmax(195px,.68fr);grid-template-rows:auto minmax(190px,1fr) auto auto;grid-template-areas:"head head top" "reference canvas palette" "status canvas actions" "guide guide guide";}
  #modo-pintar.active:has(.free-shell) .free-shell>header{grid-area:head;grid-template-columns:1fr;gap:4px;}
  #modo-pintar.active:has(.free-shell) .free-shell>header .eyebrow,#modo-pintar.active:has(.free-shell) .free-shell>header h2,#modo-pintar.active:has(.free-shell) .free-shell>header #fp-name{grid-column:1/-1;}
  #modo-pintar.active:has(.free-shell) .fp-top-actions{grid-area:top;align-self:center;position:static;}
  #modo-pintar.active:has(.free-shell) .fp-reference{grid-area:reference;max-height:none;}
  #modo-pintar.active:has(.free-shell) .fp-canvas-wrap{grid-area:canvas;grid-row:2/4;}
  #modo-pintar.active:has(.free-shell) .free-status{grid-area:status;grid-template-columns:1fr;}
  #modo-pintar.active:has(.free-shell) .fp-palette{grid-area:palette;max-height:min(48vh,470px);}
  #modo-pintar.active:has(.free-shell) .fp-actions{grid-area:actions;}
}
@media(orientation:landscape) and (max-width:900px){
  #modo-pintar.active:has(.free-shell){padding:7px 10px;gap:4px;}
  #modo-pintar.active:has(.free-shell)> .pv3-back{min-height:31px;padding:4px 9px;font-size:.68rem;}
  #modo-pintar.active:has(.free-shell) .free-shell{padding:8px;gap:6px;grid-template-columns:minmax(112px,.62fr) minmax(0,1.55fr) minmax(142px,.72fr);grid-template-rows:auto minmax(110px,1fr) auto;grid-template-areas:"head head top" "reference canvas palette" "status guide actions";border-radius:18px;}
  #modo-pintar.active:has(.free-shell) .free-shell>header .eyebrow{font-size:.52rem!important;padding:3px 7px;}
  #modo-pintar.active:has(.free-shell) .free-shell>header h2{font-size:clamp(1rem,3vw,1.55rem)!important;}
  #modo-pintar.active:has(.free-shell) .free-shell>header #fp-name{font-size:.68rem!important;}
  #modo-pintar.active:has(.free-shell) .fp-top-actions button{min-height:34px;padding:6px 8px;font-size:.62rem;}
  #modo-pintar.active:has(.free-shell) .fp-reference{position:relative;inset:auto;z-index:1;padding:7px;gap:4px;}
  #modo-pintar.active:has(.free-shell) #fp-source{max-height:56%;}
  #modo-pintar.active:has(.free-shell) .fp-reference b{font-size:.64rem;}
  #modo-pintar.active:has(.free-shell) .fp-reference small{font-size:.58rem;}
  #modo-pintar.active:has(.free-shell) .fp-canvas-wrap{grid-area:canvas;grid-row:auto;padding:10px;border-radius:15px;}
  #modo-pintar.active:has(.free-shell) .free-status{grid-area:status;display:grid;grid-template-columns:1fr;gap:3px;}
  #modo-pintar.active:has(.free-shell) .free-status span{min-height:27px;padding:4px 6px;font-size:.58rem;}
  #modo-pintar.active:has(.free-shell) .free-status span b{font-size:.68rem;}
  #modo-pintar.active:has(.free-shell) #fp-guide{grid-area:guide;align-self:center;min-height:24px;padding:4px 6px;font-size:.58rem;}
  #modo-pintar.active:has(.free-shell) .fp-palette{grid-area:palette;max-height:100%;gap:4px;padding:7px;align-content:center;}
  #modo-pintar.active:has(.free-shell) .fp-palette>b{font-size:.54rem;letter-spacing:.025em;}
  #modo-pintar.active:has(.free-shell) .fp-color{width:clamp(28px,5.5vh,38px);height:clamp(28px,5.5vh,38px);min-height:0;padding:3px;}
  #modo-pintar.active:has(.free-shell) .fp-actions{grid-area:actions;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;align-self:center;}
  #modo-pintar.active:has(.free-shell) .fp-actions button{min-height:32px;padding:4px 3px;font-size:.58rem;border-radius:9px;}
}
@media(orientation:landscape) and (max-width:700px){
  #modo-pintar.active:has(.free-shell) .free-shell{grid-template-columns:minmax(90px,.56fr) minmax(0,1.25fr) minmax(116px,.72fr);grid-template-rows:auto minmax(95px,1fr) auto;gap:4px;padding:6px;}
  #modo-pintar.active:has(.free-shell) .free-shell>header{grid-column:1/3;text-align:left;}
  #modo-pintar.active:has(.free-shell) .fp-top-actions{grid-column:3;}
  #modo-pintar.active:has(.free-shell) .fp-reference{padding:5px;}
  #modo-pintar.active:has(.free-shell) .free-status{font-size:.54rem;}
  #modo-pintar.active:has(.free-shell) .fp-actions button{min-height:30px;font-size:.53rem;}
  #modo-pintar.active:has(.free-shell) .fp-palette{gap:3px;padding:5px;}
  #modo-pintar.active:has(.free-shell) .fp-color{width:clamp(24px,5vh,32px);height:clamp(24px,5vh,32px);}
}
@media(orientation:landscape) and (max-width:700px) and (max-height:360px){
  #modo-pintar.active:has(.free-shell){padding:4px 7px;gap:2px;}
  #modo-pintar.active:has(.free-shell) .free-shell{grid-template-columns:minmax(82px,.54fr) minmax(0,1.3fr) minmax(102px,.7fr);grid-template-rows:auto minmax(80px,1fr) auto;gap:3px;padding:4px;}
  #modo-pintar.active:has(.free-shell) .free-shell>header .eyebrow{font-size:.46rem!important;margin:0;}
  #modo-pintar.active:has(.free-shell) .free-shell>header h2{font-size:1rem!important;}
  #modo-pintar.active:has(.free-shell) .free-shell>header #fp-name{font-size:.56rem!important;}
  #modo-pintar.active:has(.free-shell) .fp-top-actions button{min-height:28px;padding:3px 5px;font-size:.52rem;}
  #modo-pintar.active:has(.free-shell) #fp-source{max-height:45%;}
  #modo-pintar.active:has(.free-shell) .fp-reference b,#modo-pintar.active:has(.free-shell) .fp-reference small{font-size:.5rem;}
  #modo-pintar.active:has(.free-shell) .free-status span{min-height:22px;padding:2px 4px;font-size:.5rem;}
  #modo-pintar.active:has(.free-shell) .free-status span b{font-size:.56rem;}
  #modo-pintar.active:has(.free-shell) .fp-actions button{min-height:26px;padding:2px;font-size:.48rem;}
  #modo-pintar.active:has(.free-shell) .fp-palette>b{font-size:.48rem;}
  #modo-pintar.active:has(.free-shell) .fp-color{width:24px;height:24px;min-height:0;}
  #modo-pintar.active:has(.free-shell) #fp-guide{min-height:18px;padding:2px 4px;font-size:.48rem;}
}
@media(orientation:portrait){
  #modo-pintar.active:has(.free-shell){min-height:100dvh;overflow-y:auto;}
  #modo-pintar.active:has(.free-shell) .free-shell{flex:none;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(220px,52vh) auto auto auto auto;grid-template-areas:"head" "top" "reference" "canvas" "status" "palette" "actions" "guide";}
  #modo-pintar.active:has(.free-shell) .fp-top-actions{grid-area:top;justify-self:center;}
  #modo-pintar.active:has(.free-shell) .fp-reference{min-height:180px;}
  #modo-pintar.active:has(.free-shell) .free-status{grid-template-columns:repeat(3,minmax(0,1fr));}
  #modo-pintar.active:has(.free-shell) .fp-palette{max-height:none;}
  #modo-pintar.active:has(.free-shell) .fp-actions{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:600px) and (orientation:portrait){
  #modo-pintar.active:has(.free-shell){padding:10px;}
  #modo-pintar.active:has(.free-shell) .free-shell{padding:12px;gap:9px;}
  #modo-pintar.active:has(.free-shell) .free-shell>header{text-align:center;}
  #modo-pintar.active:has(.free-shell) .free-status span{min-height:40px;padding:7px;font-size:.66rem;}
  #modo-pintar.active:has(.free-shell) .fp-actions button{min-height:44px;}
}
@media(prefers-reduced-motion:reduce){
  :root:not([data-motion="full"]) #modo-pintar.active:has(.free-shell) *,
  :root:not([data-motion="full"]) #modo-pintar.active:has(.free-shell) *::before,
  :root:not([data-motion="full"]) #modo-pintar.active:has(.free-shell) *::after{animation:none!important;transition:none!important;}
}
:root[data-motion="reduced"] #modo-pintar.active:has(.free-shell) *,
:root[data-motion="reduced"] #modo-pintar.active:has(.free-shell) *::before,
:root[data-motion="reduced"] #modo-pintar.active:has(.free-shell) *::after{animation:none!important;transition:none!important;}
:root[data-motion="full"] #modo-pintar.active:has(.free-shell) .free-shell{animation:fp-studio-enter .48s cubic-bezier(.18,.72,.25,1) both!important;animation-duration:.48s!important;animation-iteration-count:1!important;}
:root[data-motion="full"] #modo-pintar.active:has(.free-shell) .fp-canvas-wrap::after{animation:fp-studio-light 7.5s ease-in-out infinite alternate!important;animation-duration:7.5s!important;animation-iteration-count:infinite!important;}
:root[data-motion="full"] #modo-pintar.active:has(.free-shell) .fp-reference:not(.hidden){animation:fp-reference-arrive .48s cubic-bezier(.2,.8,.2,1) both!important;animation-duration:.48s!important;animation-iteration-count:1!important;}
:root[data-motion="full"] #modo-pintar.active:has(.free-shell) .free-status span::before{animation:fp-status-glint 2.8s ease-in-out infinite!important;animation-duration:2.8s!important;animation-iteration-count:infinite!important;}
:root[data-motion="full"] #modo-pintar.active:has(.free-shell) .fp-color.selected{animation:fp-color-select .36s ease-out both!important;animation-duration:.36s!important;animation-iteration-count:1!important;}
:root[data-motion="full"] #modo-pintar.active:has(.free-shell) .fp-canvas-wrap:has(#fp-canvas:active)::after{animation:fp-painting-aura .75s ease-in-out infinite!important;animation-duration:.75s!important;animation-iteration-count:infinite!important;}
:root[data-motion="full"] #modo-pintar.active:has(.free-shell) .fp-notice:not([hidden]) .fp-notice-card{animation:fp-result-pop .38s cubic-bezier(.18,.72,.25,1) both!important;animation-duration:.38s!important;animation-iteration-count:1!important;}
:root[data-motion="full"] #modo-pintar.active:has(.free-shell) .fp-color,
:root[data-motion="full"] #modo-pintar.active:has(.free-shell) .fp-actions button,
:root[data-motion="full"] #modo-pintar.active:has(.free-shell) .fp-top-actions button{transition-duration:.18s!important;}
#fp-cloth,#fp-canvas{animation:none!important;}
#modo-pintar.active:has(.free-shell) #fp-canvas{width:100%;height:auto;max-width:100%;max-height:100%;flex:none;}

/* PINTURA-V3: capas de taller y controles refinados; el canvas de dibujo queda intacto. */
.free-shell{
  border-color:rgba(104,220,238,.36);
  background:
    radial-gradient(ellipse at 52% 46%,rgba(28,111,151,.14),transparent 46%),
    linear-gradient(140deg,rgba(11,34,56,.97),rgba(7,17,34,.98) 58%,rgba(26,22,53,.96));
  box-shadow:0 26px 72px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.08),0 0 46px rgba(33,178,204,.12);
}
.free-shell>header .eyebrow{box-shadow:0 0 18px rgba(83,229,239,.12),inset 0 1px rgba(255,255,255,.08);}
.free-shell>header h2{
  color:#f5fcff;
  background:linear-gradient(100deg,#f7fcff 10%,#9cecff 52%,#d7bdff 90%);
  background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 5px 16px rgba(49,194,221,.16));
}
.free-shell>header #fp-name{color:#d6ebf8;text-shadow:0 0 14px rgba(83,229,239,.14);}
.fp-reference{
  border-color:rgba(255,214,107,.46);
  background:radial-gradient(ellipse at 50% 38%,rgba(255,210,111,.17),transparent 62%),linear-gradient(155deg,rgba(33,52,78,.96),rgba(11,25,46,.98));
  box-shadow:inset 0 1px rgba(255,255,255,.1),0 14px 30px rgba(0,0,0,.22),0 0 25px rgba(255,191,70,.1);
}
.fp-canvas-wrap{
  padding:clamp(8px,1.35vw,20px);
  border-color:rgba(107,214,237,.55);
  background:radial-gradient(ellipse at 50% 46%,rgba(36,109,144,.18),transparent 69%),linear-gradient(145deg,rgba(9,26,44,.98),rgba(5,13,26,.99));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 42px rgba(15,104,145,.13),0 18px 42px rgba(0,0,0,.4),0 0 28px rgba(42,203,225,.16);
}
.fp-canvas-wrap::before{inset:4%;background:radial-gradient(ellipse at 50% 48%,rgba(55,190,220,.09),transparent 68%);}
.fp-palette{
  border-color:rgba(121,177,218,.35);
  background:linear-gradient(155deg,rgba(31,52,85,.91),rgba(12,25,49,.96));
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 14px 32px rgba(0,0,0,.24),0 0 20px rgba(96,134,242,.08);
}
.fp-palette>b{color:#e1efff;text-shadow:0 0 12px rgba(83,229,239,.18);}
.fp-actions button,.fp-top-actions button{
  border-radius:10px;
  box-shadow:0 8px 18px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.1);
}
.fp-actions button{position:relative;overflow:hidden;}
.fp-actions button::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(110deg,transparent 18%,rgba(255,255,255,.16) 48%,transparent 78%);
  transform:translateX(-110%);transition:transform .38s ease,opacity .2s ease;
}
.fp-actions button:hover::after{opacity:1;transform:translateX(110%);}
.fp-actions button:focus-visible,.fp-top-actions button:focus-visible,.fp-color:focus-visible{
  outline:2px solid #a6f5ff;outline-offset:3px;
}
.fp-actions #fp-hint{border-color:rgba(255,214,107,.34);}
.fp-actions #fp-clear{border-color:rgba(255,133,157,.3);}
.fp-actions #fp-check,.fp-actions #fp-next{letter-spacing:.045em;}
#fp-guide{border-color:rgba(91,194,219,.28);background:linear-gradient(100deg,rgba(11,31,52,.83),rgba(17,28,53,.8));}
.free-shell::before{animation:fp-ambient-float 8s ease-in-out infinite alternate;}
.free-shell::after{animation:fp-ambient-pulse 5s ease-in-out infinite;}
@keyframes fp-ambient-float{from{transform:translate3d(0,0,0)}to{transform:translate3d(12px,8px,0)}}
@keyframes fp-ambient-pulse{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.12)}}
@keyframes fp-canvas-arrive{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
:root[data-motion="full"] #modo-pintar.active:has(.free-shell) #fp-canvas{animation:fp-canvas-arrive .62s cubic-bezier(.18,.72,.25,1) both;}
:root[data-motion="full"] #modo-pintar.active:has(.free-shell) .free-shell::before{animation:fp-ambient-float 8s ease-in-out infinite alternate;}
:root[data-motion="full"] #modo-pintar.active:has(.free-shell) .free-shell::after{animation:fp-ambient-pulse 5s ease-in-out infinite;}
:root:not([data-motion="full"]) #modo-pintar.active:has(.free-shell) .free-shell::before,
:root:not([data-motion="full"]) #modo-pintar.active:has(.free-shell) .free-shell::after{animation:none;}
@media(orientation:landscape) and (max-width:900px){
  #modo-pintar.active:has(.free-shell) .fp-canvas-wrap{padding:7px;border-radius:13px;}
  #modo-pintar.active:has(.free-shell) .fp-actions button{border-radius:8px;}
}
@media(orientation:landscape) and (max-width:700px) and (max-height:360px){
  #modo-pintar.active:has(.free-shell) .fp-canvas-wrap{padding:3px;border-radius:9px;}
  #modo-pintar.active:has(.free-shell) .fp-actions button{border-radius:7px;}
}
@media(orientation:portrait){
  #modo-pintar.active:has(.free-shell) .fp-canvas-wrap{min-height:clamp(190px,42vh,420px);}
}

/* Lienzo protagonista: el wrapper conserva el layout y el tacto, sin un segundo marco visible. */
#modo-pintar.active:has(.free-shell) .fp-canvas-wrap{
  padding:clamp(2px,.35vw,6px);border:0;border-radius:0;background:transparent;box-shadow:none;
}
#modo-pintar.active:has(.free-shell) .fp-canvas-wrap::before{content:none;}
#modo-pintar.active:has(.free-shell) #fp-canvas{filter:drop-shadow(0 16px 23px rgba(0,0,0,.48)) drop-shadow(0 0 12px rgba(65,205,236,.12));}
.fp-actions .fp-tool-switch{
  grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;min-width:0;
}
.fp-actions .fp-tool-switch button{
  min-width:0;min-height:42px;padding:8px 7px;border:1px solid rgba(119,184,218,.3);border-radius:9px;
  color:#d8ecff;background:linear-gradient(145deg,rgba(30,53,83,.98),rgba(16,30,53,.98));
  font-size:.72rem;font-weight:900;letter-spacing:.035em;
}
.fp-actions .fp-tool-switch button.selected[aria-pressed="true"]{
  border-color:#75eaf0;color:#fff;background:linear-gradient(120deg,rgba(12,119,140,.94),rgba(55,79,158,.96));
  box-shadow:0 0 0 2px rgba(83,229,239,.16),0 0 20px rgba(83,229,239,.2),inset 0 1px rgba(255,255,255,.2);
}
.fp-actions .fp-size-control{
  grid-column:1/-1;display:grid;grid-template-columns:minmax(74px,auto) minmax(50px,1fr) 34px;align-items:center;gap:9px;
  min-width:0;padding:8px 10px;border:1px solid rgba(112,174,210,.28);border-radius:10px;
  background:linear-gradient(120deg,rgba(24,44,70,.92),rgba(15,28,50,.94));color:#c7dced;
  font-size:.64rem;font-weight:850;letter-spacing:.045em;text-align:left;
}
.fp-size-control input[type="range"]{width:100%;min-width:0;height:6px;margin:0;accent-color:#62e3eb;cursor:pointer;}
.fp-size-control output{display:grid;place-items:center;min-height:28px;border:1px solid rgba(107,222,236,.32);border-radius:7px;background:rgba(7,19,36,.7);color:#f2fbff;font-size:.83rem;font-weight:950;font-variant-numeric:tabular-nums;}
.fp-actions #fp-hint,.fp-actions #fp-clear{min-height:42px;border-radius:9px;}
.fp-actions #fp-hint{color:#fff1c7;background:linear-gradient(145deg,rgba(91,68,33,.92),rgba(42,36,43,.96));}
.fp-actions #fp-clear{color:#ffe2e9;background:linear-gradient(145deg,rgba(82,43,67,.92),rgba(38,30,53,.96));}
.fp-actions #fp-check{min-height:46px;border-radius:9px;}
.fp-actions .fp-tool-switch button:focus-visible,.fp-size-control input:focus-visible{outline:2px solid #b5f7ff;outline-offset:2px;}
@media(orientation:landscape) and (max-width:900px){
  #modo-pintar.active:has(.free-shell) .fp-actions .fp-tool-switch{gap:4px;}
  #modo-pintar.active:has(.free-shell) .fp-actions .fp-tool-switch button{min-height:32px;padding:4px 3px;font-size:.58rem;}
  #modo-pintar.active:has(.free-shell) .fp-actions .fp-size-control{grid-template-columns:minmax(60px,auto) minmax(32px,1fr) 27px;gap:5px;padding:5px;font-size:.52rem;}
  #modo-pintar.active:has(.free-shell) .fp-size-control output{min-height:23px;font-size:.68rem;}
  #modo-pintar.active:has(.free-shell) .fp-actions #fp-hint,
  #modo-pintar.active:has(.free-shell) .fp-actions #fp-clear,
  #modo-pintar.active:has(.free-shell) .fp-actions #fp-check{min-height:31px;padding:3px;font-size:.56rem;}
}
@media(orientation:landscape) and (max-width:700px) and (max-height:360px){
  #modo-pintar.active:has(.free-shell) .fp-actions{gap:3px;}
  #modo-pintar.active:has(.free-shell) .fp-actions .fp-tool-switch button{min-height:25px;font-size:.49rem;}
  #modo-pintar.active:has(.free-shell) .fp-actions .fp-size-control{grid-template-columns:minmax(48px,auto) minmax(20px,1fr) 22px;gap:3px;padding:3px;font-size:.44rem;}
  #modo-pintar.active:has(.free-shell) .fp-size-control output{min-height:19px;font-size:.58rem;}
  #modo-pintar.active:has(.free-shell) .fp-actions #fp-hint,
  #modo-pintar.active:has(.free-shell) .fp-actions #fp-clear,
  #modo-pintar.active:has(.free-shell) .fp-actions #fp-check{min-height:24px;font-size:.47rem;}
}

/* Herramientas integradas arriba de la paleta; las muestras son manchas de pigmento. */
.fp-palette .fp-tool-switch{
  flex:0 0 100%;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 5px;
}
.fp-palette .fp-tool-switch button{
  min-width:0;min-height:58px;padding:7px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:1px solid rgba(118,185,219,.3);border-radius:11px;color:#dceeff;
  background:linear-gradient(145deg,rgba(33,57,86,.98),rgba(14,29,52,.98));
  box-shadow:0 7px 15px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.09);
  font-size:.61rem;font-weight:950;letter-spacing:.06em;transition:transform .18s,border-color .18s,box-shadow .18s,filter .18s;
}
.fp-palette .fp-tool-switch button:hover{transform:translateY(-2px);filter:brightness(1.12);border-color:#80e8f1;box-shadow:0 0 18px rgba(83,229,239,.18);}
.fp-palette .fp-tool-switch button[aria-pressed="true"]{border-color:#78edf0;color:#fff;background:linear-gradient(135deg,rgba(17,111,132,.98),rgba(57,66,133,.98));box-shadow:0 0 0 2px rgba(83,229,239,.14),0 0 20px rgba(83,229,239,.22),inset 0 1px rgba(255,255,255,.2);}
.fp-tool-icon{width:29px;height:29px;flex:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35));}
.fp-palette .fp-color{
  position:relative;overflow:visible;width:clamp(38px,4.1vw,54px);height:clamp(36px,3.8vw,50px);padding:4px;
  border:1px solid rgba(222,236,248,.44);border-radius:51% 49% 59% 41% / 45% 59% 41% 55%;
  rotate:-3deg;box-shadow:0 5px 13px rgba(0,0,0,.28),0 0 7px color-mix(in srgb,var(--c),transparent 72%);
}
.fp-palette .fp-color:nth-of-type(2n){border-radius:62% 38% 52% 48% / 49% 55% 45% 51%;rotate:3deg;}
.fp-palette .fp-color:nth-of-type(3n){border-radius:42% 58% 48% 52% / 55% 42% 58% 45%;rotate:-1deg;}
.fp-palette .fp-color:nth-of-type(4n){border-radius:55% 45% 38% 62% / 47% 57% 43% 53%;rotate:2deg;}
.fp-palette .fp-color i{position:relative;overflow:hidden;border-radius:inherit;background:linear-gradient(145deg,rgba(255,255,255,.22),transparent 43%,rgba(0,0,0,.09)),var(--c);}
.fp-palette .fp-color i::after{content:"";position:absolute;inset:14% 22% 64% 16%;border-radius:50%;background:rgba(255,255,255,.34);filter:blur(1px);transform:rotate(-12deg);pointer-events:none;}
.fp-palette .fp-color.selected{border-color:#e6fcff;box-shadow:0 0 0 3px rgba(83,229,239,.25),0 0 18px color-mix(in srgb,var(--c),transparent 38%);}
.fp-palette .fp-color[aria-pressed="true"]::before{content:"✓";position:absolute;z-index:2;right:-3px;top:-4px;width:16px;height:16px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.65);border-radius:50%;background:#102a42;color:#fff;font-size:10px;font-weight:1000;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.35);}
.fp-protection-status{line-height:1.25;}
@media(orientation:landscape) and (max-width:900px){
  #modo-pintar.active:has(.free-shell) .fp-palette .fp-tool-switch{gap:4px;margin-bottom:2px;}
  #modo-pintar.active:has(.free-shell) .fp-palette .fp-tool-switch button{min-height:39px;padding:3px 2px;gap:1px;font-size:.5rem;}
  #modo-pintar.active:has(.free-shell) .fp-tool-icon{width:22px;height:22px;}
  #modo-pintar.active:has(.free-shell) .fp-palette .fp-color{width:clamp(28px,5.5vh,38px);height:clamp(26px,5.1vh,36px);padding:3px;}
}
@media(orientation:landscape) and (max-width:700px) and (max-height:360px){
  #modo-pintar.active:has(.free-shell) .fp-palette .fp-tool-switch button{min-height:30px;font-size:.43rem;}
  #modo-pintar.active:has(.free-shell) .fp-tool-icon{width:18px;height:18px;}
  #modo-pintar.active:has(.free-shell) .fp-palette .fp-color{width:24px;height:23px;min-height:0;padding:2px;}
}

/* Encuadre y cursor propios de Pintura Libre; no afecta otras modalidades. */
@media(orientation:landscape) and (min-width:901px){
  #modo-pintar.active:has(.free-shell) .free-shell{
    grid-template-columns:minmax(170px,.58fr) minmax(0,2.18fr) minmax(240px,.74fr);
    grid-template-rows:minmax(76px,auto) minmax(0,1fr) auto;
    grid-template-areas:"head head top" "reference canvas palette" "status guide actions";
    gap:clamp(8px,1vw,14px);
  }
  #modo-pintar.active:has(.free-shell) .free-shell>.fp-top-actions{grid-area:top;align-self:center;position:static;justify-self:end;z-index:2;}
  #modo-pintar.active:has(.free-shell) .free-shell>header{grid-area:head;min-width:0;display:grid;grid-template-columns:max-content minmax(0,1fr);grid-template-areas:"eyebrow name" "title title";gap:3px 12px;align-content:center;}
  #modo-pintar.active:has(.free-shell) .free-shell>header .eyebrow{grid-area:eyebrow;grid-column:auto;align-self:center;}
  #modo-pintar.active:has(.free-shell) .free-shell>header h2{grid-area:title;grid-column:1/-1;}
  #modo-pintar.active:has(.free-shell) .free-shell>header #fp-name{grid-area:name;grid-column:auto;justify-self:end;align-self:center;text-align:right;}
  #modo-pintar.active:has(.free-shell) .fp-canvas-wrap{grid-row:auto;align-items:center;justify-content:center;}
  #modo-pintar.active:has(.free-shell) #fp-canvas{width:100%!important;height:auto!important;max-width:100%!important;max-height:100%!important;flex:0 1 auto;}
}
@media(orientation:landscape) and (max-width:900px){
  #modo-pintar.active:has(.free-shell) .free-shell{
    grid-template-columns:minmax(92px,.44fr) minmax(0,2.12fr) minmax(122px,.66fr);
    grid-template-rows:minmax(48px,auto) minmax(0,1fr) auto;
    grid-template-areas:"head head top" "reference canvas palette" "status guide actions";
  }
  #modo-pintar.active:has(.free-shell) .free-shell>.fp-top-actions{grid-area:top;align-self:center;position:static;justify-self:end;z-index:2;}
  #modo-pintar.active:has(.free-shell) .free-shell>header{grid-area:head;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"eyebrow title" "name title";gap:2px 7px;align-content:center;}
  #modo-pintar.active:has(.free-shell) .free-shell>header .eyebrow{grid-area:eyebrow;grid-column:auto;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  #modo-pintar.active:has(.free-shell) .free-shell>header h2{grid-area:title;grid-column:auto;align-self:center;font-size:clamp(.92rem,2.3vw,1.35rem)!important;}
  #modo-pintar.active:has(.free-shell) .free-shell>header #fp-name{grid-area:name;grid-column:auto;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(.5rem,1vw,.68rem)!important;}
  #modo-pintar.active:has(.free-shell) .fp-canvas-wrap{grid-row:auto;align-items:center;justify-content:center;}
  #modo-pintar.active:has(.free-shell) #fp-canvas{width:100%!important;height:auto!important;max-width:100%!important;max-height:100%!important;flex:0 1 auto;}
}
@media(orientation:landscape) and (max-width:700px) and (max-height:360px){
  #modo-pintar.active:has(.free-shell) .free-shell{grid-template-columns:minmax(74px,.42fr) minmax(0,1.62fr) minmax(96px,.62fr);grid-template-rows:minmax(39px,auto) minmax(0,1fr) auto;}
  #modo-pintar.active:has(.free-shell) .free-shell>header{grid-template-columns:minmax(0,1fr) auto;gap:1px 4px;}
  #modo-pintar.active:has(.free-shell) .free-shell>header h2{font-size:clamp(.78rem,2.3vw,1rem)!important;}
  #modo-pintar.active:has(.free-shell) .fp-canvas-wrap{padding:1px;}
}

#modo-pintar.active:has(.free-shell),

#modo-pintar.active:has(.free-shell) .free-shell,
#modo-pintar.active:has(.free-shell) .fp-notice{
  cursor:url("assets/cursors/rv3-compass.png") 4 3,auto;
}
#modo-pintar.active:has(.free-shell) #fp-canvas[data-tool="brush"]{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M25 3 30 8 13 25 6 28 9 21Z' fill='%23f4b253' stroke='%23fff1c4' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M9 21 13 25 6 28Z' fill='%2379edf0' stroke='%23efffff' stroke-width='1'/%3E%3Cpath d='M19 5 27 13' stroke='%23fff5d5' stroke-width='1.3'/%3E%3C/svg%3E") 6 27,crosshair;
}
#modo-pintar.active:has(.free-shell) #fp-canvas[data-tool="fill"]{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M11 9h16l-2 15H13L11 9Z' fill='%2337a9db' stroke='%23e8ffff' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M14 9c0-6 11-6 11 0M9 10h20' fill='none' stroke='%23f0ffff' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M7 22c0 2 3 3 3 6 0-3 3-4 3-6a3 3 0 0 0-6 0Z' fill='%23ff78bc' stroke='%23fff0fa' stroke-width='1'/%3E%3C/svg%3E") 9 28,pointer;
}
@media(orientation:landscape) and (max-width:700px){.free-shell header>*{margin:0!important;font-size:inherit!important;}}

/* PINTURA-V3C: prioriza el lienzo, compacta instrucciones y adapta todo al viewport. */
@media (orientation:landscape){
  #modo-pintar.active:has(.free-shell){
    box-sizing:border-box;height:100dvh;min-height:0;overflow:hidden;
    gap:clamp(3px,.55vh,8px);padding:clamp(4px,.6vw,10px);
  }
  #modo-pintar.active:has(.free-shell) .free-shell{
    box-sizing:border-box;width:min(100%,1760px);max-width:none;height:100%;flex:1 1 auto;min-height:0;
    margin:0 auto;padding:clamp(5px,.65vw,11px);gap:clamp(4px,.65vw,9px);
    grid-template-columns:minmax(140px,.35fr) minmax(0,5fr) minmax(190px,.5fr);
    grid-template-rows:minmax(44px,auto) minmax(0,1fr) auto;
    grid-template-areas:"head head top" "reference canvas palette" "status guide actions";
  }
  #modo-pintar.active:has(.free-shell) .free-shell>header{
    grid-area:head;min-width:0;display:grid;grid-template-columns:max-content minmax(0,1fr);
    grid-template-areas:"eyebrow name" "title title";gap:2px 10px;align-content:center;text-align:left;
  }
  #modo-pintar.active:has(.free-shell) .free-shell>header .eyebrow{grid-area:eyebrow;grid-column:auto;max-width:100%;white-space:nowrap;}
  #modo-pintar.active:has(.free-shell) .free-shell>header h2{grid-area:title;grid-column:1/-1;font-size:clamp(1rem,1.8vw,1.65rem)!important;line-height:1;}
  #modo-pintar.active:has(.free-shell) .free-shell>header #fp-name{grid-area:name;grid-column:auto;justify-self:end;align-self:center;min-width:0;text-align:right;font-size:clamp(.58rem,.82vw,.78rem)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  #modo-pintar.active:has(.free-shell) .free-shell>.fp-top-actions{grid-area:top;align-self:center;justify-self:end;position:static;z-index:2;}
  #modo-pintar.active:has(.free-shell) .fp-canvas-wrap{grid-area:canvas;align-self:stretch;justify-self:stretch;min-width:0;min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:hidden;}
  #modo-pintar.active:has(.free-shell) .fp-canvas-wrap::before{content:none;}
  #modo-pintar.active:has(.free-shell) #fp-canvas{width:100%!important;height:auto!important;max-width:100%!important;max-height:100%!important;flex:none;object-fit:contain;background-color:rgba(110,177,218,.14);filter:drop-shadow(0 12px 26px rgba(0,0,0,.2));}
  #modo-pintar.active:has(.free-shell) .fp-reference{position:relative;inset:auto;z-index:1;box-sizing:border-box;align-self:center;justify-self:stretch;width:100%;min-width:0;min-height:0;max-height:none;margin:0;padding:0;overflow:hidden;}
  #modo-pintar.active:has(.free-shell) .fp-reference.hidden{max-height:0;padding-top:0;padding-bottom:0;border-width:0;opacity:0;visibility:hidden;}
  #modo-pintar.active:has(.free-shell) .fp-reference:not(.hidden){max-height:min(44vh,330px);padding:6px;opacity:1;visibility:visible;}
  #modo-pintar.active:has(.free-shell) .fp-reference #fp-source{width:100%;max-width:100%;max-height:min(36vh,280px);height:auto;}
  #modo-pintar.active:has(.free-shell) .free-status{align-self:center;gap:4px;}
  #modo-pintar.active:has(.free-shell) .free-status span{min-height:34px;padding:5px 7px;font-size:clamp(.55rem,.72vw,.72rem);line-height:1.18;}
  #modo-pintar.active:has(.free-shell) .fp-palette{
    box-sizing:border-box;align-self:stretch;min-height:0;max-height:none;overflow:auto;
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:min-content;align-content:center;
    gap:clamp(3px,.45vw,7px);padding:clamp(5px,.7vw,10px);
  }
  #modo-pintar.active:has(.free-shell) .fp-palette>b,
  #modo-pintar.active:has(.free-shell) .fp-palette .fp-tool-switch{grid-column:1/-1;min-width:0;}
  #modo-pintar.active:has(.free-shell) .fp-palette .fp-tool-switch{gap:5px;margin:0 0 2px;}
  #modo-pintar.active:has(.free-shell) .fp-palette .fp-tool-switch button{min-height:42px;padding:4px 3px;font-size:clamp(.52rem,.65vw,.66rem);}
  #modo-pintar.active:has(.free-shell) .fp-tool-icon{width:clamp(20px,2vw,27px);height:clamp(20px,2vw,27px);}
  #modo-pintar.active:has(.free-shell) .fp-palette>b{margin:0 0 2px;font-size:clamp(.48rem,.6vw,.64rem);line-height:1.15;}
  #modo-pintar.active:has(.free-shell) .fp-palette .fp-color{box-sizing:border-box;width:clamp(27px,3.4vw,46px);height:clamp(27px,3.4vw,46px);justify-self:center;}
  #modo-pintar.active:has(.free-shell) .fp-actions{align-self:center;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(3px,.45vw,7px);}
  #modo-pintar.active:has(.free-shell) .fp-actions .fp-size-control{grid-column:1/-1;min-height:32px;padding:4px 6px;grid-template-columns:minmax(68px,auto) minmax(0,1fr) 29px;gap:5px;font-size:clamp(.5rem,.62vw,.66rem);}
  #modo-pintar.active:has(.free-shell) .fp-actions .fp-size-control output{min-height:23px;font-size:.68rem;}
  #modo-pintar.active:has(.free-shell) .fp-actions #fp-hint,
  #modo-pintar.active:has(.free-shell) .fp-actions #fp-clear,
  #modo-pintar.active:has(.free-shell) .fp-actions #fp-check{grid-column:auto;min-width:0;min-height:32px;padding:4px 3px;font-size:clamp(.48rem,.68vw,.7rem);}
  #modo-pintar.active:has(.free-shell) #fp-guide{align-self:center;min-height:0;margin:0;padding:2px 5px;border:0;border-radius:0;background:transparent;font-size:clamp(.52rem,.66vw,.68rem);line-height:1.15;}
}
@media (orientation:landscape) and (max-width:900px){
  #modo-pintar.active:has(.free-shell) .free-shell{
    grid-template-columns:minmax(90px,.38fr) minmax(0,3.1fr) minmax(144px,.62fr);
    grid-template-rows:minmax(40px,auto) minmax(0,1fr) auto;gap:4px;
  }
  #modo-pintar.active:has(.free-shell) .free-shell>header h2{font-size:clamp(.9rem,2.4vw,1.25rem)!important;}
  #modo-pintar.active:has(.free-shell) .free-shell>header .eyebrow{font-size:clamp(.45rem,.9vw,.6rem)!important;padding:3px 6px;letter-spacing:.08em;}
  #modo-pintar.active:has(.free-shell) .fp-top-actions button{min-height:29px;padding:4px 7px;font-size:clamp(.48rem,.82vw,.62rem);}
  #modo-pintar.active:has(.free-shell) .fp-actions{gap:3px;}
  #modo-pintar.active:has(.free-shell) .fp-actions .fp-size-control{min-height:28px;padding:3px 4px;grid-template-columns:minmax(55px,auto) minmax(0,1fr) 25px;gap:3px;font-size:.48rem;}
  #modo-pintar.active:has(.free-shell) .fp-actions .fp-size-control output{min-height:20px;font-size:.62rem;}
  #modo-pintar.active:has(.free-shell) .fp-actions #fp-hint,
  #modo-pintar.active:has(.free-shell) .fp-actions #fp-clear,
  #modo-pintar.active:has(.free-shell) .fp-actions #fp-check{min-height:28px;font-size:clamp(.45rem,.7vw,.58rem);}
  #modo-pintar.active:has(.free-shell) .fp-palette .fp-tool-switch button{min-height:34px;font-size:.5rem;}
  #modo-pintar.active:has(.free-shell) .fp-tool-icon{width:20px;height:20px;}
  #modo-pintar.active:has(.free-shell) .fp-palette .fp-color{width:clamp(26px,3.5vw,34px);height:clamp(26px,3.5vw,34px);}
  #modo-pintar.active:has(.free-shell) .free-status span{min-height:29px;padding:3px 4px;font-size:clamp(.45rem,.72vw,.58rem);}
  #modo-pintar.active:has(.free-shell) #fp-guide{font-size:clamp(.46rem,.72vw,.58rem);}
}
@media (orientation:landscape) and (max-width:700px) and (max-height:360px){
  #modo-pintar.active:has(.free-shell){padding:3px 5px;gap:2px;}
  #modo-pintar.active:has(.free-shell)>.pv3-back{min-height:25px;padding:3px 7px;font-size:.56rem;border-radius:8px;}
  #modo-pintar.active:has(.free-shell) .free-shell{
    padding:4px;gap:3px;grid-template-columns:minmax(62px,.32fr) minmax(0,3.1fr) minmax(126px,.62fr);
    grid-template-rows:minmax(31px,auto) minmax(0,1fr) auto;
  }
  #modo-pintar.active:has(.free-shell) .free-shell>header{gap:1px 4px;}
  #modo-pintar.active:has(.free-shell) .free-shell>header h2{font-size:clamp(.72rem,2vw,.92rem)!important;}
  #modo-pintar.active:has(.free-shell) .free-shell>header #fp-name{font-size:.46rem!important;}
  #modo-pintar.active:has(.free-shell) .fp-top-actions button{min-height:23px;padding:2px 5px;font-size:.44rem;}
  #modo-pintar.active:has(.free-shell) .fp-canvas-wrap{padding:0;}
  #modo-pintar.active:has(.free-shell) .fp-reference:not(.hidden){max-height:26vh;padding:3px;}
  #modo-pintar.active:has(.free-shell) .fp-reference #fp-source{max-height:20vh;}
  #modo-pintar.active:has(.free-shell) .fp-palette{gap:2px;padding:3px;}
  #modo-pintar.active:has(.free-shell) .fp-palette .fp-tool-switch{gap:3px;margin:0;}
  #modo-pintar.active:has(.free-shell) .fp-palette .fp-tool-switch button{min-height:27px;padding:1px;font-size:.43rem;}
  #modo-pintar.active:has(.free-shell) .fp-tool-icon{width:16px;height:16px;}
  #modo-pintar.active:has(.free-shell) .fp-palette>b{font-size:.42rem;}
  #modo-pintar.active:has(.free-shell) .fp-palette .fp-color{width:25px;height:25px;padding:2px;}
  #modo-pintar.active:has(.free-shell) .free-status{gap:2px;}
  #modo-pintar.active:has(.free-shell) .free-status span{min-height:22px;padding:2px 3px;font-size:.42rem;line-height:1.05;}
  #modo-pintar.active:has(.free-shell) .free-status span::before{width:4px;height:4px;}
  #modo-pintar.active:has(.free-shell) .fp-actions{gap:2px;}
  #modo-pintar.active:has(.free-shell) .fp-actions .fp-size-control{min-height:24px;padding:2px;grid-template-columns:minmax(44px,auto) minmax(0,1fr) 22px;gap:2px;font-size:.4rem;}
  #modo-pintar.active:has(.free-shell) .fp-actions .fp-size-control output{min-height:17px;font-size:.54rem;}
  #modo-pintar.active:has(.free-shell) .fp-actions #fp-hint,
  #modo-pintar.active:has(.free-shell) .fp-actions #fp-clear,
  #modo-pintar.active:has(.free-shell) .fp-actions #fp-check{min-height:24px;padding:2px;font-size:.44rem;}
  #modo-pintar.active:has(.free-shell) #fp-guide{font-size:.43rem;padding:1px;line-height:1.05;}
}

/* PINTURA-V3C2: el lienzo ocupa también las filas de estado/acciones para ganar altura útil. */
@media (orientation:landscape){
  #modo-pintar.active:has(.free-shell) .free-shell{
    grid-template-rows:minmax(40px,auto) minmax(0,1fr) auto auto;
    grid-template-areas:"head head top" "reference canvas palette" "status canvas actions" "guide canvas .";
  }
  #modo-pintar.active:has(.free-shell) .fp-canvas-wrap{grid-area:canvas;min-height:0;min-width:0;}
  #modo-pintar.active:has(.free-shell) #fp-guide{grid-area:guide;}
}
@media (orientation:landscape) and (max-width:900px){
  #modo-pintar.active:has(.free-shell) .free-shell{
    grid-template-rows:minmax(36px,auto) minmax(0,1fr) auto auto;
    grid-template-areas:"head head top" "reference canvas palette" "status canvas actions" "guide canvas .";
  }
}

/* PINTURA-V4: comprobacion clara y presentacion de finalizacion. */
#modo-pintar.active:has(.free-shell) .fp-actions #fp-check{position:relative;overflow:hidden;border:1px solid rgba(124,255,225,.76);border-radius:9px;background:linear-gradient(115deg,#087b71,#0baa80 54%,#087b65);box-shadow:0 7px 20px rgba(4,177,137,.2),inset 0 1px rgba(255,255,255,.18);font-weight:950;letter-spacing:.055em;transition:filter .18s ease,box-shadow .18s ease,transform .12s ease,opacity .18s ease;}
#modo-pintar.active:has(.free-shell) .fp-actions #fp-check:hover:not(:disabled),#modo-pintar.active:has(.free-shell) .fp-actions #fp-check:focus-visible{filter:brightness(1.13);box-shadow:0 0 0 2px rgba(92,255,221,.17),0 0 22px rgba(63,237,195,.32),inset 0 1px rgba(255,255,255,.28);}
#modo-pintar.active:has(.free-shell) .fp-actions #fp-check:focus-visible{outline:2px solid #b5f7ff;outline-offset:3px;}
#modo-pintar.active:has(.free-shell) .fp-actions #fp-check:active:not(:disabled){transform:scale(.985);filter:brightness(1.18);}
#modo-pintar.active:has(.free-shell) .fp-actions #fp-check[data-state="evaluating"]{cursor:progress;filter:saturate(.72);}
#modo-pintar.active:has(.free-shell) .fp-actions #fp-check[data-state="complete"]{opacity:.55;box-shadow:none;}
#modo-pintar.active:has(.free-shell) .fp-actions #fp-check:disabled{cursor:default;}
.fp-completion-visual{width:min(100%,420px);margin:3px auto 13px;padding:8px;border:1px solid rgba(83,229,239,.3);border-radius:14px;background:radial-gradient(ellipse at 50% 20%,rgba(83,229,239,.13),transparent 70%),rgba(3,12,25,.55);box-shadow:inset 0 1px rgba(255,255,255,.08),0 9px 24px rgba(0,0,0,.25);}
.fp-completion-visual[hidden]{display:none!important;}
.fp-completion-visual canvas{display:block;width:100%;max-height:min(30vh,220px);height:auto;margin:auto;object-fit:contain;filter:drop-shadow(0 10px 16px rgba(0,0,0,.38));}
@media(max-height:420px) and (orientation:landscape){.fp-notice{padding:8px}.fp-notice-card{width:min(100%,520px);max-height:calc(100dvh - 16px);overflow:auto;padding:12px 18px}.fp-notice-card h2{margin-bottom:6px;font-size:1.12rem}.fp-completion-visual{width:min(70vw,320px);margin:2px auto 6px;padding:4px}.fp-completion-visual canvas{max-height:20vh}.fp-notice-card button{min-height:38px;margin-top:10px}}
@media(prefers-reduced-motion:reduce){#modo-pintar.active:has(.free-shell) .fp-actions #fp-check{transition:none!important}}
:root[data-motion="reduced"] #modo-pintar.active:has(.free-shell) .fp-actions #fp-check{transition:none!important}

/* Pintura Libre: lupa funcional, escala y muestra circular real del pincel */
#modo-pintar.active:has(.free-shell) .fp-canvas-wrap.is-zoomed{overflow:hidden;}
#modo-pintar.active:has(.free-shell) #fp-canvas{transform-origin:0 0;transition:transform .18s cubic-bezier(.2,.75,.25,1);will-change:transform;}
#modo-pintar.active:has(.free-shell) #fp-canvas[data-tool="zoom"]{cursor:zoom-in;}
#modo-pintar.active:has(.free-shell) .fp-palette .fp-tool-switch{grid-template-columns:repeat(3,minmax(0,1fr));}
#modo-pintar.active:has(.free-shell) .fp-palette .fp-tool-switch button{min-width:0;}
#modo-pintar.active:has(.free-shell) .fp-size-control{grid-template-columns:minmax(0,1fr) 34px;grid-template-areas:"title value" "sample sample" "slider slider";gap:5px 8px;}
#modo-pintar.active:has(.free-shell) .fp-size-label{grid-area:title;min-width:0;}
#modo-pintar.active:has(.free-shell) .fp-size-preview{grid-area:sample;display:grid;place-items:center;width:100%;height:auto;min-width:0;min-height:max(22px,var(--fp-brush-display-size,22px));overflow:visible;}
#modo-pintar.active:has(.free-shell) .fp-size-preview i{display:block;flex:none;box-sizing:border-box;width:var(--fp-brush-display-size,20px);height:var(--fp-brush-display-size,20px);max-width:none;max-height:none;aspect-ratio:1;border-radius:50%;background:var(--fp-brush-color,#62e3eb);box-shadow:0 0 9px rgba(98,227,235,.3);transition:width .08s linear,height .08s linear,background-color .12s;}
#modo-pintar.active:has(.free-shell) #fp-size-slider{grid-area:slider;}
#modo-pintar.active:has(.free-shell) #fp-size-output{grid-area:value;}
#modo-pintar.active:has(.free-shell) .fp-tool-switch #fp-tool-zoom .fp-tool-icon{width:24px;height:24px;}
@media(orientation:landscape) and (max-width:900px){
 #modo-pintar.active:has(.free-shell) .fp-actions .fp-size-control{grid-template-columns:minmax(0,1fr) 27px;grid-template-areas:"title value" "sample sample" "slider slider";}
 #modo-pintar.active:has(.free-shell) .fp-palette .fp-tool-switch button{min-height:34px;padding:4px 2px;}
}
@media(orientation:landscape) and (max-width:700px) and (max-height:400px){
 #modo-pintar.active:has(.free-shell) .fp-actions .fp-size-control{grid-template-columns:minmax(0,1fr) 22px;grid-template-areas:"title value" "sample sample" "slider slider";}
 #modo-pintar.active:has(.free-shell) .fp-palette .fp-tool-switch button{min-height:27px;font-size:.44rem;}
 #modo-pintar.active:has(.free-shell) .fp-tool-switch .fp-tool-icon{width:16px;height:16px;}
}
:root[data-motion="reduced"] #modo-pintar.active:has(.free-shell) #fp-canvas{transition:none;will-change:auto;}