/* M08.3 · Composición y paleta del mockup aprobado. El tema claro conserva sus fichas. */
:root.tema-perla.tema-oscuro{
 --trillas-bg:#0F1317;--trillas-bg-deep:#0D1115;--trillas-panel:#181D22;--trillas-panel-dark:#12161A;
 --trillas-control:#1D242A;--trillas-control-hover:#29323A;--trillas-border:#313A42;
 --trillas-amber:#F2AB4E;--trillas-amber-hover:#E69B3C;--trillas-amber-soft:#FFE0A3;
 --trillas-text:#F1F3F4;--trillas-muted:#A7B0B8;--trillas-positive:#7DBAA1;--trillas-warning:#EEB563;
 --perla-fondo:var(--trillas-bg);--perla-panel:var(--trillas-panel);--perla-alto:var(--trillas-control);
 --perla-linea:var(--trillas-border);--perla-linea2:#56616a;--perla-tinta:var(--trillas-text);--perla-tinta2:var(--trillas-muted);
 --perla-acento:var(--trillas-amber);--perla-acento2:var(--trillas-amber-hover);--perla-realce:var(--trillas-control-hover);--perla-sobre-acento:#14181b;
}
:root.tema-perla.tema-oscuro :is(.topbar,.riel,.status){background:var(--trillas-bg)!important}
:root.tema-perla.tema-oscuro :is(.inspector,.refs-panel){background:var(--trillas-panel-dark)!important}
:root.tema-perla{--m083-height:min(38vh,400px)}
:root.tema-perla .app.m083-activo{grid-template-rows:56px 0 minmax(260px,1fr) var(--m083-height) 26px}
:root.tema-perla .app.m083-activo .status{grid-row:5}
:root.tema-perla .app.m083-expandido{--m083-height:46vh}
.m083-dock{grid-column:1/-1;grid-row:4;display:grid;grid-template-columns:1.1fr 1.15fr .85fr;gap:6px;position:relative;min-width:0;min-height:0;padding:6px 6px 22px;background:var(--perla-fondo);color:var(--text);font-size:12px;overflow:hidden}
.m083-dock[hidden],.m083-dock [hidden],.m083-contextual[hidden]{display:none!important}
.m083-panel{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--panel);scrollbar-width:thin}
.m083-panel h3{position:sticky;top:-12px;z-index:3;background:var(--panel);padding:5px 0;font-size:14px;line-height:1.3;margin:0 0 6px;font-weight:600}
.m083-advanced{margin:5px 0;color:var(--muted);font-size:11px}.m083-advanced>summary{cursor:pointer;padding:3px 0}.m083-advanced[open]{padding-bottom:7px}
.m083-dock :is(button,input,select,textarea){font:inherit;box-sizing:border-box;max-width:100%;border:1px solid var(--line);border-radius:6px;background:var(--panel2);color:var(--text)}
.m083-dock :is(button,select,input:not([type=range]):not([type=checkbox])){min-height:32px;padding:5px 8px}
.m083-dock button{cursor:pointer;height:auto;white-space:normal}.m083-dock button:disabled{opacity:.45;cursor:default}
.m083-dock label{display:flex;flex-direction:column;gap:5px;min-width:0;margin:7px 0;color:var(--muted);font-size:11px}
.m083-dock :is(input:not([type=checkbox]),select,textarea){width:100%;min-width:0}.m083-dock textarea{resize:vertical;padding:8px;line-height:1.5}
.m083-dock input[type=range]{accent-color:var(--accent);min-height:22px;margin:0}.m083-dock input[type=checkbox]{accent-color:var(--accent)}
.m083-dock :focus-visible,.m083-launch:focus-visible,.m083-pin:focus-visible,.m083-indicator-options :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.m083-row{display:flex;align-items:end;gap:8px}.m083-row>label{flex:1}.m083-row>button{flex:none;margin-bottom:7px}
.m083-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
:root.tema-perla .m083-primary:not(:disabled){background:var(--perla-acento)!important;color:var(--perla-sobre-acento)!important;border-color:var(--perla-acento)!important;font-weight:600}
:root.tema-perla .m083-primary:hover:not(:disabled){background:var(--perla-acento2)!important}
.m083-muted{font-size:11px;color:var(--muted);line-height:1.45;margin:7px 0;overflow-wrap:anywhere}
.m083-status{position:absolute;left:12px;right:12px;bottom:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;height:20px;line-height:20px;font-size:11px;color:var(--muted);background:var(--perla-fondo)}
.m083-status[data-error=true]{color:var(--perla-acento);font-weight:600}
.m083-tabs{position:absolute;top:7px;right:12px;z-index:2;display:flex;gap:4px}
.m083-tabs [data-m083-tab]{display:none}.m083-tabs button{min-height:24px;padding:1px 7px}.m083-panel:last-of-type h3{padding-right:55px}
.m083-comparison{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative;height:188px;margin:9px 0}
.m083-comparison figure{margin:0;min-width:0;overflow:hidden;display:flex;flex-direction:column;gap:6px}
.m083-image-scroll{position:relative;flex:1;min-height:0;overflow:hidden;border:1px solid var(--line);border-radius:7px;background:var(--perla-fondo);display:grid;place-items:center}
.m083-image-scroll img{width:100%;height:100%;object-fit:contain;display:block;transform-origin:center}
.m083-image-scroll>span{text-align:center;padding:10px;color:var(--muted);font-size:12px}
.m083-comparison figcaption{font-size:10px;color:var(--muted);line-height:1.4;min-height:28px;overflow-wrap:anywhere}
.m083-slider figure{position:absolute;inset:0}.m083-slider figure:first-child{z-index:1;clip-path:inset(0 calc(100% - var(--m083-split,50%)) 0 0)}
.m083-slider::after{content:'↔';position:absolute;left:var(--m083-split,50%);top:38%;transform:translateX(-50%);z-index:2;border-radius:50%;background:var(--panel);border:1px solid var(--accent);padding:8px;pointer-events:none}
.m083-steps{display:flex;list-style:none;gap:4px;padding:0;margin:8px 0 12px;font-size:10px}.m083-steps li{flex:1;border:1px solid var(--line);border-radius:6px;padding:8px 4px;color:var(--muted)}
.m083-steps [aria-current=step]{border-bottom:3px solid var(--accent);color:var(--text)}
.m083-texture-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(100px,.8fr);gap:12px;min-height:140px}
.m083-crop-scroll{max-height:180px;overflow:auto;border-radius:7px;background:var(--perla-fondo);min-height:50px}
#m083RecorteSuperficie{position:relative;touch-action:none;cursor:crosshair;min-height:30px}
#m083RecorteImagen{display:block;width:100%;height:auto;user-select:none;pointer-events:none}
#m083RecorteMarco{position:absolute;border:2px dashed var(--accent);outline:1px solid #0006;box-shadow:0 0 0 1px #fff9 inset;pointer-events:none}
#m083RecorteMarco::before,#m083RecorteMarco::after{content:'';position:absolute;width:9px;height:9px;border:2px solid white;background:var(--accent);border-radius:50%}
#m083RecorteMarco::before{top:-6px;left:-6px}#m083RecorteMarco::after{bottom:-6px;right:-6px}
.m083-coords{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.m083-coords label{font-size:10px}.m083-coords input{padding:3px!important}
.m083-swatch{display:block;width:75px;height:65px;border-radius:5px;object-fit:cover;background:var(--perla-fondo);border:1px solid var(--line)}
.m083-panel[data-m083-panel=acabado]>.m083-actions{position:sticky;bottom:-12px;z-index:2;padding:8px 0;background:var(--panel)}
.m083-dock output{float:right;color:var(--text)}
#m083FichaForm>label{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;margin:8px 0;color:var(--text)}
#m083FichaReferencias{border:1px solid var(--line);border-radius:6px;max-height:100px;overflow:auto;margin:10px 0;padding:6px 8px}#m083FichaReferencias label{flex-direction:row;align-items:center}#m083FichaReferencias input{width:16px;height:16px;flex:none}
#m083FichaInspector{margin:0 16px 16px;min-height:36px;border:1px solid var(--line);border-radius:8px}
.m083-launch{position:absolute;top:208px;right:16px;z-index:40;min-height:34px;padding:7px 12px;border:1px solid var(--line);border-radius:8px;font-size:12px}
.m083-indicator-options{position:absolute;z-index:12;left:12px;top:112px;max-width:235px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);font-size:11px;padding:10px 12px}
.m083-indicator-options summary{cursor:pointer;font-weight:600}.m083-indicator-options label{display:flex;align-items:center;gap:7px;margin-top:10px}.m083-indicator-options input{accent-color:var(--accent)}.m083-indicator-options p{margin:10px 0 0;color:var(--muted)}
.m083-indicators{position:absolute;inset:0;pointer-events:none;z-index:10;overflow:hidden}
:root.tema-perla button.m083-pin{position:absolute;pointer-events:auto;width:16px;height:16px;min-height:0;padding:0;transform:translate(-50%,-50%);background:var(--perla-acento)!important;border:2px solid white!important;border-radius:50%;box-shadow:0 1px 4px #0006!important}
:root.tema-perla button.m083-pin[aria-pressed=true]{outline:2px solid var(--perla-acento);outline-offset:3px}
.m083-pin span{position:absolute;left:20px;top:-6px;border-radius:5px;background:var(--panel);color:var(--text);padding:4px 7px;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
.m083-contextual{position:absolute;left:16px;bottom:115px;z-index:9;width:120px;padding:5px;border:1px solid var(--line);border-radius:8px;font-size:10px}.m083-contextual img{display:block;width:100%;height:65px;object-fit:cover}.m083-contextual span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root.tema-perla .refs-panel{width:min(312px,calc(100% - 24px));top:8px;right:8px;bottom:8px;border-radius:10px}.refs-body{padding-left:14px;padding-right:14px}.refs-panel .refs-card img{height:78px}.refs-panel .refs-card{min-height:140px}.refs-panel.refs-wide{width:min(900px,calc(100% - 24px))}
.refs-panel .refs-status:empty{display:none}.refs-panel .refs-actions{gap:5px}.refs-panel .refs-actions button{padding:6px 8px;font-size:11px}
:root.tema-perla .app.modo-presentacion.m083-activo{grid-template-rows:56px 0 minmax(260px,1fr) var(--m083-height) 0}
:root.tema-perla .app.modo-presentacion .acciones-perla{display:flex!important}
:root.tema-perla .app.modo-presentacion .acciones-perla #deshacerPerla{display:none}
.modo-presentacion :is(.m083-indicator-options,.m083-contextual){display:none!important}
:root.tema-perla .app.modo-presentacion.pantalla-completa{grid-template-rows:0 0 minmax(0,1fr) 0 0}
.pantalla-completa :is(.m083-dock,.m083-launch){display:none!important}
@media(min-width:1081px){:root.tema-perla{--ancho-riel:72px;--ancho-inspector:300px}.m083-panel[data-m083-panel=ficha]{background:var(--panel)}:root.tema-perla .refs-panel:not([hidden])~.m083-launch{z-index:41}}
@media(max-width:1100px){
 :root.tema-perla{--m083-height:35vh}.m083-dock{display:block;padding-top:40px}.m083-panel{height:100%;box-sizing:border-box}.m083-tabs{left:10px;right:10px;top:8px}.m083-tabs [data-m083-tab]{display:block;flex:1}.m083-dock[data-tab=comparador] [data-m083-panel]:not([data-m083-panel=comparador]),.m083-dock[data-tab=acabado] [data-m083-panel]:not([data-m083-panel=acabado]),.m083-dock[data-tab=ficha] [data-m083-panel]:not([data-m083-panel=ficha]){display:none}.m083-comparison{height:155px}#m083FichaForm>label{grid-template-columns:130px minmax(0,1fr)}
}
@media(max-width:740px){
 :root.tema-perla .app.m083-activo{grid-template-rows:94px 0 minmax(230px,1fr) var(--m083-height) 22px}
 :root.tema-perla .app.modo-presentacion.m083-activo{grid-template-rows:94px 0 minmax(230px,1fr) var(--m083-height) 0}
 .m083-launch{top:210px;right:10px;font-size:11px}.m083-indicator-options{top:108px;left:8px;max-width:180px;padding:7px;font-size:10px}
 :root.tema-perla .refs-panel{width:min(360px,calc(100% - 16px));right:8px}.m083-panel{padding:10px}.m083-row{gap:5px}.m083-row>button{font-size:10px}.m083-texture-layout{grid-template-columns:minmax(0,1.4fr) minmax(100px,1fr)}.m083-coords{grid-template-columns:repeat(2,minmax(0,1fr))}
 #m083Roles{flex-wrap:wrap}#m083Roles>button{margin:0}.m083-comparison{height:140px}#m083FichaForm>label{grid-template-columns:100px minmax(0,1fr)}
 .m083-tabs button{min-height:28px;font-size:11px}.m083-contextual{bottom:150px;width:90px}
}