/* RV3 PINTURA-V3D: layout de Pintura Libre. Corrige auto-colocacion del canvas y libera el area central. */
@media (orientation:landscape){
  #modo-pintar.active:has(.free-shell){box-sizing:border-box;display:flex;flex-direction:column;gap:4px;width:100%;max-width:100%;height:100dvh;max-height:100dvh;min-height:0;padding:4px clamp(6px,.8vw,12px);overflow:hidden;}
  #modo-pintar.active:has(.free-shell) .free-shell{
    box-sizing:border-box;position:relative;flex:1 1 auto;width:100%;height:auto;max-width:none;min-width:0;min-height:0;max-height:none;margin:0;padding:clamp(6px,.9vw,12px);
    display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,22vw,286px);grid-template-rows:minmax(34px,auto) minmax(0,1fr) auto auto;
    grid-template-areas:"head top" "canvas palette" "canvas actions" "guide guide";gap:clamp(4px,.7vw,10px);align-items:stretch;overflow:hidden;
  }
  #modo-pintar.active:has(.free-shell) .free-shell>header{grid-area:head;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"eyebrow name" "title title";gap:2px 10px;align-content:center;align-items:center;justify-content:stretch;text-align:left;min-width:0;}
  #modo-pintar.active:has(.free-shell) .free-shell>header .eyebrow{grid-area:eyebrow;grid-column:auto;width:max-content;max-width:100%;font-size:clamp(.5rem,.68vw,.68rem);padding:4px 8px;white-space:nowrap;}
  #modo-pintar.active:has(.free-shell) .free-shell>header h2{grid-area:title;grid-column:auto;font-size:clamp(1rem,1.65vw,1.7rem);line-height:1.03;}
  #modo-pintar.active:has(.free-shell) .free-shell>header #fp-name{grid-area:name;grid-column:auto;justify-self:end;min-width:0;text-align:right;font-size:clamp(.58rem,.78vw,.82rem);}
  #modo-pintar.active:has(.free-shell) .fp-top-actions{grid-area:top;position:static;align-self:center;justify-self:end;}
  #modo-pintar.active:has(.free-shell) .fp-top-actions button{min-height:34px;padding:6px 10px;font-size:clamp(.56rem,.72vw,.72rem);}
  #modo-pintar.active:has(.free-shell) .fp-canvas-wrap{grid-area:canvas;grid-row:2 / 4;grid-column:1 / 2;align-self:stretch;justify-self:stretch;box-sizing:border-box;width:auto!important;max-width:none!important;height:100%;min-width:0;min-height:0;margin:0;padding:clamp(2px,.35vw,6px);display:flex;align-items:center;justify-content:center;overflow:hidden;}
  #modo-pintar.active:has(.free-shell) #fp-canvas{box-sizing:content-box;display:block;width:min(100%,calc(100cqh * var(--fp-ratio,1.5)))!important;height:auto!important;max-width:100%!important;max-height:100%!important;flex:0 1 auto;object-fit:contain;}
  #modo-pintar.active:has(.free-shell) .fp-palette{grid-area:palette;align-self:stretch;width:100%;min-width:0;max-width:100%;max-height:none;margin:0;padding:clamp(5px,.65vw,10px);gap:clamp(3px,.45vw,7px);overflow:auto;align-content:center;}
  #modo-pintar.active:has(.free-shell) .fp-palette>b{font-size:clamp(.48rem,.58vw,.62rem);line-height:1.2;letter-spacing:.025em;}
  #modo-pintar.active:has(.free-shell) .fp-color{width:clamp(24px,3.1vw,42px);height:clamp(24px,3.1vw,42px);padding:3px;}
  #modo-pintar.active:has(.free-shell) .fp-actions{grid-area:actions;align-self:stretch;align-content:center;width:100%;min-width:0;margin:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;}
  #modo-pintar.active:has(.free-shell) .fp-actions .fp-size-control{grid-column:1/-1;min-width:0;}
  #modo-pintar.active:has(.free-shell) .fp-actions button{min-width:0;min-height:clamp(29px,4.2vh,40px);padding:4px 3px;font-size:clamp(.5rem,.68vw,.7rem);white-space:normal;overflow-wrap:anywhere;}
  #modo-pintar.active:has(.free-shell) .fp-actions #fp-check{grid-column:1/-1;}
  #modo-pintar.active:has(.free-shell) .free-status{position:absolute;z-index:3;left:clamp(8px,.9vw,14px);bottom:clamp(36px,5vh,48px);display:flex;flex-wrap:wrap;gap:4px;max-width:min(48%,560px);margin:0;pointer-events:none;}
  #modo-pintar.active:has(.free-shell) .free-status span{min-height:25px;padding:4px 8px;font-size:clamp(.52rem,.64vw,.68rem);}
  #modo-pintar.active:has(.free-shell) .free-status span::before{width:5px;height:5px;}
  #modo-pintar.active:has(.free-shell) #fp-guide{grid-area:guide;align-self:center;width:100%;min-width:0;min-height:24px;margin:0;padding:4px 10px;font-size:clamp(.55rem,.68vw,.72rem);line-height:1.25;white-space:normal;}
  #modo-pintar.active:has(.free-shell) .fp-reference.hidden{display:none!important;}
  #modo-pintar.active:has(.free-shell) .fp-reference:not(.hidden){position:absolute;z-index:5;inset:clamp(42px,7vh,64px) clamp(220px,22vw,286px) 38px 10px;max-height:none;margin:0;}
  #modo-pintar.active:has(.free-shell) #fp-source{width:min(90%,620px);max-height:min(55vh,420px);height:auto;object-fit:contain;}
}
@media (orientation:landscape) and (max-width:900px){
  #modo-pintar.active:has(.free-shell) .free-shell{grid-template-columns:minmax(0,1fr) clamp(186px,25vw,222px);grid-template-rows:minmax(31px,auto) minmax(0,1fr) auto auto;gap:5px;padding:6px;}
  #modo-pintar.active:has(.free-shell) .fp-canvas-wrap{}
  #modo-pintar.active:has(.free-shell) .fp-palette{padding:5px;gap:3px;}
  #modo-pintar.active:has(.free-shell) .fp-color{width:clamp(24px,4.2vh,32px);height:clamp(24px,4.2vh,32px);}
  #modo-pintar.active:has(.free-shell) .fp-actions{gap:3px;}
  #modo-pintar.active:has(.free-shell) .fp-actions button{font-size:clamp(.48rem,.65vw,.58rem);}
  #modo-pintar.active:has(.free-shell) .fp-reference:not(.hidden){inset:38px clamp(186px,25vw,222px) 34px 6px;}
}
@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) .free-shell{grid-template-columns:minmax(0,1fr) 166px;grid-template-rows:minmax(27px,auto) minmax(0,1fr) auto auto;gap:3px;padding:4px;}
  #modo-pintar.active:has(.free-shell) .free-shell>header{gap:1px 5px;}
  #modo-pintar.active:has(.free-shell) .free-shell>header .eyebrow{font-size:.45rem;padding:2px 5px;}
  #modo-pintar.active:has(.free-shell) .free-shell>header h2{font-size:.9rem;}
  #modo-pintar.active:has(.free-shell) .free-shell>header #fp-name{font-size:.48rem;}
  #modo-pintar.active:has(.free-shell) .fp-top-actions button{min-height:24px;padding:2px 5px;font-size:.45rem;}
  #modo-pintar.active:has(.free-shell) .fp-palette{gap:2px;padding:3px;}
  #modo-pintar.active:has(.free-shell) .fp-palette>b{font-size:.44rem;}
  #modo-pintar.active:has(.free-shell) .fp-color{width:24px;height:24px;padding:2px;}
  #modo-pintar.active:has(.free-shell) .fp-actions{gap:2px;}
  #modo-pintar.active:has(.free-shell) .fp-actions button{min-height:24px;padding:2px;font-size:.44rem;}
  #modo-pintar.active:has(.free-shell) .fp-actions .fp-size-control{min-height:22px;padding:2px;font-size:.4rem;}
  #modo-pintar.active:has(.free-shell) .fp-actions .fp-size-control output{min-height:16px;font-size:.48rem;}
  #modo-pintar.active:has(.free-shell) .free-status{bottom:30px;left:5px;gap:2px;}
  #modo-pintar.active:has(.free-shell) .free-status span{min-height:19px;padding:2px 4px;font-size:.42rem;}
  #modo-pintar.active:has(.free-shell) #fp-guide{min-height:19px;padding:2px 5px;font-size:.46rem;}
  #modo-pintar.active:has(.free-shell) .fp-reference:not(.hidden){inset:32px 166px 27px 4px;}
}

/* Referencia de Pintura Libre: mostrar solo la bandera y sus rótulos, sin panel de fondo. */
#modo-pintar.active:has(.free-shell) .fp-reference:not(.hidden){
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
#modo-pintar.active:has(.free-shell) .fp-reference #fp-cloth{display:block!important;width:min(90%,620px);max-width:90%;height:auto;max-height:min(55vh,420px);object-fit:contain;filter:drop-shadow(0 14px 17px rgba(0,0,0,.42));}
#modo-pintar.active:has(.free-shell) .fp-reference #fp-source{display:none!important;}