/* Interfaz V1: selectores de modo y ambiente, tema, grupos de capas, navegación rápida e indicador de guardado
   (assets/lib/visor-modos.js). Usa las fichas de tema-perla.css; se carga después. */

/* ── Barra superior: modo · ambiente · tema ───────────────────────────────────────────────── */
:root.tema-perla .modos-perla{display:flex;align-items:center;gap:10px;margin-left:auto}
:root.tema-perla .modos-perla+.acciones-perla{margin-left:0}
:root.tema-perla .topbar .segmento{display:flex;gap:2px;padding:3px;border:1px solid var(--perla-linea);border-radius:10px;background:var(--perla-fondo)!important}
:root.tema-perla .segmento button{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:0!important;border-radius:7px;background:transparent!important;color:var(--perla-tinta2)!important;font-size:12px;font-weight:500;white-space:nowrap}
:root.tema-perla .segmento button:hover:not(:disabled){background:var(--perla-realce)!important;color:var(--perla-tinta)!important}
:root.tema-perla .segmento button[aria-pressed="true"],:root.tema-perla .segmento button[aria-pressed="true"]:hover:not(:disabled){background:var(--perla-tinta)!important;color:var(--perla-panel)!important;font-weight:600}
:root.tema-perla .segmento svg{width:16px;height:16px;flex:none}
:root.tema-perla #temaInterfaz{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:8px}
:root.tema-perla #temaInterfaz svg{width:18px;height:18px}
/* El tema no es un estado «activo»: el botón no se pinta como pulsado. */
:root.tema-perla #temaInterfaz[aria-pressed="true"]{background:var(--perla-alto)!important;color:var(--perla-tinta)!important;border-color:var(--perla-linea)!important}
:root.tema-perla #materialesPresentacion{display:none;height:44px;padding:0 14px;border-radius:8px;font-size:13px}
:root.tema-perla .app.modo-presentacion #materialesPresentacion{display:block}
/* En Presentación el Estudio ofrece acabados y escena; la edición de geometría y las fuentes quedan en Técnico. */
:root.tema-perla .app.modo-presentacion #studioPanel :is([data-studio-group="geometria"],[data-studio-group="fuentes"]){display:none}
/* El aviso de salida va arriba: abajo está la navegación rápida. */
:root.tema-perla .presentacion-salida{top:16px;bottom:auto}
/* El selector de la barra sustituye al botón suelto de la barra de navegación. */
:root.tema-perla .navigation #modoPresentacion{display:none}
/* «Guardar» avisa con un punto cuando hay cambios sin exportar. */
:root.tema-perla .acciones-perla #guardarPerla[data-pendiente]::after{content:'';display:inline-block;width:7px;height:7px;margin-left:8px;border-radius:50%;background:var(--perla-acento);vertical-align:middle}

/* ── Panel de capas: grupos por nivel y clasificación ──────────────────────────────────────── */
/* El panel pasa a columna flexible: la lista de capas ocupa lo que dejan el aviso, la búsqueda y los filtros. */
:root.tema-perla #leftPanel{display:flex;flex-direction:column}
:root.tema-perla #leftPanel>:not(.layerlist){flex:none}
:root.tema-perla #leftPanel .layerlist{position:static;flex:1;min-height:0}
/* Aviso cuando la navegación rápida oculta zonas: dice qué y lo deshace. */
:root.tema-perla .zonas-perla{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--perla-linea)}
:root.tema-perla .zonas-perla[hidden]{display:none}
:root.tema-perla .zonas-perla span{flex:1;font-size:12px;color:var(--perla-tinta2)!important}
:root.tema-perla .zonas-perla #zonasTodas{height:30px;padding:0 12px;border-radius:999px;font-size:12px;border-style:dashed}
.capa-grupo[hidden]{display:none}
.capa-grupo-cab{display:flex;align-items:center;gap:8px;padding:0 10px;border-bottom:1px solid var(--perla-linea,#2c3035)}
.capa-grupo-cab input{flex:none;width:17px;height:17px;margin:0;accent-color:var(--perla-acento,#e0a04a)}
.capa-grupo-plegar{display:flex;flex:1;align-items:center;gap:8px;min-width:0;height:40px;padding:0!important;border:0!important;background:transparent!important;color:var(--perla-tinta,#ece8df)!important;text-align:left;cursor:pointer}
.capa-grupo-plegar b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.capa-grupo-plegar small{font-family:var(--perla-mono,monospace);font-size:11px;color:var(--perla-tinta2,#a5a299)!important}
.capa-grupo-flecha{display:inline-block;width:12px;font-size:11px;color:var(--perla-tinta2,#a5a299);transition:transform .15s}
.capa-grupo-plegar[aria-expanded="true"] .capa-grupo-flecha{transform:rotate(90deg)}
.capa-grupo-nivel>.capa-grupo-cab{position:sticky;top:0;z-index:1;background:var(--perla-panel,#16181b)}
.capa-grupo-nivel>.capa-grupo-cab b{font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.capa-grupo-nivel[data-grupo="nuevo"]>.capa-grupo-cab b{color:var(--perla-acento,#e0a04a)!important}
.capa-grupo-clase>.capa-grupo-cab{padding-left:26px}
.capa-grupo-clase>.capa-grupo-cab b{font-size:13px;font-weight:500}
.capa-grupo-clase .layerrow{padding-left:44px!important}
@media (prefers-reduced-motion:reduce){.capa-grupo-flecha{transition:none}}

/* ── Navegación rápida, flotante bajo el modelo ───────────────────────────────────────────── */
:root.tema-perla .nav-rapida{position:absolute;z-index:8;left:16px;bottom:16px;display:flex;gap:2px;max-width:calc(100% - 290px);padding:3px;overflow-x:auto;border:1px solid var(--perla-linea);border-radius:10px;background:var(--perla-panel);scrollbar-width:none}
:root.tema-perla .nav-rapida::-webkit-scrollbar{display:none}
:root.tema-perla .nav-rapida button{flex:none;height:40px;padding:0 12px;border:0!important;border-radius:7px;background:transparent!important;font-size:12px;white-space:nowrap}
:root.tema-perla .nav-rapida button:hover:not(:disabled){background:var(--perla-realce)!important}
:root.tema-perla .app.modo-presentacion.pantalla-completa .nav-rapida{display:none}

/* ── Guardado, en la barra de estado ──────────────────────────────────────────────────────── */
:root.tema-perla .status #estadoGuardado{margin-left:auto;white-space:nowrap;color:var(--perla-tinta2)!important}
:root.tema-perla .status #estadoGuardado[hidden]{display:none}
:root.tema-perla .status #estadoGuardado::before{content:'';display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--perla-linea2)}
:root.tema-perla .status #estadoGuardado:is([data-estado="pendiente"],[data-estado="sin_copia"]){color:var(--perla-acento)!important;font-weight:500}
:root.tema-perla .status #estadoGuardado:is([data-estado="pendiente"],[data-estado="sin_copia"])::before{background:var(--perla-acento)}
:root.tema-perla .status #estadoGuardado:is([data-estado="archivo"],[data-estado="biblioteca"])::before{background:var(--perla-tinta)}
:root.tema-perla .status #estadoGuardado:not([hidden])~#objCount{margin-left:0}

/* ── Resoluciones menores: primero se abrevian los rótulos, después se reacomoda ──────────── */
@media(max-width:1390px){:root.tema-perla #selectorAmbiente button span{display:none}:root.tema-perla #selectorAmbiente button{padding:0 10px}}
@media(max-width:1240px){:root.tema-perla #selectorModo button span{display:none}:root.tema-perla #selectorModo button{padding:0 10px}:root.tema-perla .modos-perla{gap:6px}}
/* La marca conserva su renglón (proyecto y revisión a la vista); las pestañas son las que se desplazan. */
:root.tema-perla .brand{flex:none}
:root.tema-perla .brand small{white-space:nowrap}
/* Teléfono: la barra pasa a dos renglones para no perder los menús; modo, ambiente y tema van en el segundo. */
@media(max-width:700px){
 :root.tema-perla .app{grid-template-rows:auto 0 minmax(0,1fr) 36px}
 :root.tema-perla .app.modo-presentacion{grid-template-rows:auto 0 minmax(0,1fr) 0}
 :root.tema-perla .topbar{flex-wrap:wrap;height:auto;min-height:56px;padding:6px 10px;row-gap:6px}
 :root.tema-perla .topbar .ui-tabs{flex:1 1 0;min-width:0;height:44px}
 :root.tema-perla .topbar .grow{display:none}
 :root.tema-perla .modos-perla{order:3;flex-basis:100%;margin-left:0;justify-content:space-between}
 :root.tema-perla .app.modo-presentacion .modos-perla{flex:1 1 0;justify-content:flex-end}
 :root.tema-perla .brand>div:not(.mark){display:none}
 :root.tema-perla .presentacion-salida>span{display:none}
 :root.tema-perla .nav-rapida{left:8px;right:8px;bottom:124px;max-width:none}
 :root.tema-perla .acciones-perla #guardarPerla{padding:0 12px}
 :root.tema-perla .status #coords{display:none}
}