/* Tienda OS · escritorio: barra superior, área de ventanas, dock. Solo usa tokens. */
.escritorio { position: fixed; inset: 0; display: grid; grid-template-rows: 40px minmax(0, 1fr) auto auto; background: var(--fondo); overflow: hidden; }

/* Barra superior */
.barra-sup { display: flex; justify-content: space-between; align-items: center; gap: var(--e4); padding: 0 var(--e3) 0 var(--e4); border-bottom: 1px solid var(--linea); background: var(--panel); z-index: 2; }
.barra-izq, .barra-der { display: flex; align-items: center; gap: var(--e3); min-width: 0; }
.barra-logo { width: 24px; height: 24px; border-radius: 50%; }
.barra-sup .marca-texto { font-size: 19px; white-space: nowrap; }
.barra-activa { padding-left: var(--e3); border-left: 1px solid var(--linea-2); color: var(--suave); font-size: var(--t-mini); white-space: nowrap; }
.barra-activa:empty { display: none; }
.barra-btn { display: inline-flex; align-items: center; gap: var(--e2); min-height: 28px; padding: 0 var(--e2); border: 0; border-radius: var(--radio); background: none; color: var(--secundario); font-size: var(--t-mini); cursor: pointer; transition: background var(--rapido), color var(--rapido); }
.barra-btn:hover { background: var(--panel-2); color: var(--titulo); }
.barra-btn .ico { width: 14px; height: 14px; }
kbd { padding: 1px 5px; border: 1px solid var(--linea-2); border-radius: var(--radio); font: 500 var(--t-micro) var(--sans); color: var(--suave); }
.reloj { color: var(--suave); font-size: var(--t-mini); white-space: nowrap; text-transform: capitalize; }

/* Área y fondo */
.area { position: relative; overflow: hidden; contain: layout paint; isolation: isolate; }
.fondo { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; pointer-events: none; background: var(--fondo); }
.fondo-foto { position: absolute; inset: 8%; background: var(--foto-fondo) center / contain no-repeat; }
:root[data-fondo-propio] .fondo-foto { inset: 0; background: var(--fondo-propio) center / cover no-repeat; }
/* Ícono de la esquina: fuera del área, para que las ventanas no lo tapen */
.fondo-btn { position: absolute; right: 12px; bottom: 10px; z-index: 5; color: var(--suave); }
.fondo-btn:hover { color: var(--acento); }
/* Vista previa en Ajustes */
.fondo-vista { width: 100%; max-width: 320px; aspect-ratio: 16 / 9; border: 1px solid var(--linea-2); border-radius: var(--radio); background: var(--foto-fondo) center / 62% no-repeat, var(--fondo); }
:root[data-fondo-propio] .fondo-vista { background: var(--fondo-propio) center / cover no-repeat; }
:root:not([data-fondo-propio]) .solo-fondo-propio { display: none; }

/* Ventana */
.ventana { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; min-width: 0; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra-1); transition: box-shadow var(--medio), border-color var(--medio); }
.ventana.activa { border-color: var(--linea-2); box-shadow: var(--sombra-2); }
.ventana.animar { transition: translate var(--medio) var(--curva), width var(--medio) var(--curva), height var(--medio) var(--curva); }
.ventana.arrastrando { will-change: translate, width, height; user-select: none; box-shadow: var(--sombra-2); }
.ventana.arrastrando .v-cuerpo { pointer-events: none; }
.ventana.max { translate: 0 0 !important; width: 100% !important; height: 100% !important; border-width: 0; }
.ventana.entrando { animation: ventana-entra var(--medio) var(--curva); }
.ventana.saliendo { animation: ventana-sale 160ms ease-in forwards; pointer-events: none; }
.ventana.minimizando { animation: ventana-minimiza 180ms ease-in forwards; pointer-events: none; transform-origin: 50% 100%; }
@keyframes ventana-entra { from { opacity: 0; scale: .98; } }
@keyframes ventana-sale { to { opacity: 0; scale: .98; } }
@keyframes ventana-minimiza { to { opacity: 0; scale: .9; transform: translateY(32px); } }

.v-barra { position: relative; flex: none; display: flex; justify-content: space-between; align-items: center; gap: var(--e3); height: 44px; padding: 0 var(--e2) 0 var(--e4); border-bottom: 1px solid var(--linea); cursor: grab; touch-action: none; user-select: none; }
.ventana.arrastrando .v-barra { cursor: grabbing; }
.ventana.max .v-barra { cursor: default; }
.v-barra:focus-visible { outline-offset: -2px; }
.v-barra h2 { margin: 0; font: 400 20px/1 var(--serif); color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--medio); }
.ventana.activa .v-barra h2 { color: var(--titulo); }
.v-barra::after { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 1px; background: var(--acento); opacity: 0; transition: opacity var(--medio); }
.ventana.activa .v-barra::after { opacity: 1; }
.ventana.cargando .v-barra::after { opacity: 1; animation: latir .9s ease-in-out infinite; }
.v-botones { display: flex; flex: none; gap: 2px; }
.v-botones [data-accion="cerrar"]:hover { background: var(--peligro); color: var(--sobre-acento); }
.v-cuerpo { flex: 1; min-height: 0; overflow: auto; padding: var(--e4) var(--e5) var(--e5); overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--linea-2) transparent; outline: none; }
.v-cuerpo .t-vista { display: none; }
/* En una ventana el título ya está en la barra: la acción principal sube a la derecha, junto a los filtros o la cifra principal. */
.v-cuerpo .cabeza-vista { float: right; margin: 0 0 var(--e2) var(--e3); }
.v-cuerpo .cabeza-vista .btn, .v-cuerpo .cabeza-vista input { min-height: 36px; }
.v-cuerpo .lista, .v-cuerpo .metricas { clear: both; }
.v-cuerpo .t-vista:first-child + h2 { margin-top: 0; }
.v-cuerpo input, .v-cuerpo select, .v-cuerpo textarea { font-size: var(--t-base); }

/* Ventana con la web de la tienda */
.v-marco { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.marco-barra { flex: none; display: flex; justify-content: space-between; align-items: center; gap: var(--e3); padding: var(--e1) var(--e2) var(--e1) var(--e4); border-bottom: 1px solid var(--linea); }
.marco-barra .btn.mini { min-height: 28px; padding: 0 var(--e3); }
.marco-web { flex: 1; min-height: 0; width: 100%; border: 0; background: var(--fondo); }
.v-marco > .esqueleto, .v-marco > .falta { margin: var(--e4); }
.ventana.arrastrando .marco-web { pointer-events: none; }

/* Asas de tamaño */
.asa { position: absolute; z-index: 1; touch-action: none; }
.ventana.max .asa { display: none; }
.asa-n, .asa-s { left: 8px; right: 8px; height: 6px; cursor: ns-resize; }
.asa-n { top: -3px; } .asa-s { bottom: -3px; }
.asa-e, .asa-w { top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; }
.asa-e { right: -3px; } .asa-w { left: -3px; }
.asa-ne, .asa-nw, .asa-se, .asa-sw { width: 14px; height: 14px; z-index: 2; }
.asa-ne { top: -4px; right: -4px; cursor: nesw-resize; } .asa-sw { bottom: -4px; left: -4px; cursor: nesw-resize; }
.asa-nw { top: -4px; left: -4px; cursor: nwse-resize; } .asa-se { bottom: -4px; right: -4px; cursor: nwse-resize; }

/* Dock */
.dock { display: flex; justify-content: center; gap: var(--e1); padding: var(--e1) var(--e3); border-top: 1px solid var(--linea); background: var(--panel); z-index: 2; }
.dock-app { position: relative; display: grid; justify-items: center; gap: 3px; min-width: 76px; padding: var(--e2) var(--e2) 7px; border: 0; border-radius: var(--radio); background: none; color: var(--suave); cursor: pointer; transition: color var(--rapido), background var(--rapido); }
.dock-app:hover { background: var(--panel-2); color: var(--titulo); }
.dock-app:active .ico { transform: scale(.92); }
.dock-app .ico { transition: transform var(--rapido); }
.dock-t { font-size: var(--t-micro); letter-spacing: .04em; }
.dock-app.abierta { color: var(--secundario); }
.dock-app.abierta::after { content: ""; position: absolute; bottom: 1px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--secundario); }
.dock-app.actual { color: var(--acento); }
.dock-app.actual::after { width: 16px; height: 2px; margin-left: -8px; border-radius: 0; background: var(--acento); }
.insignia { position: absolute; top: 4px; left: 50%; min-width: 16px; height: 16px; margin-left: 6px; padding: 0 4px; border-radius: 8px; background: var(--acento); color: var(--sobre-acento); font: 600 var(--t-micro)/16px var(--sans); text-align: center; animation: insignia-entra var(--medio) var(--curva); }
@keyframes insignia-entra { from { scale: .5; opacity: 0; } }
.pie-esc { padding: 3px var(--e3) 4px; background: var(--panel); text-align: center; color: var(--suave); font-size: var(--t-micro); line-height: 1.4; }
@media (max-height: 720px) { .dock-t { display: none; } .dock-app { min-width: 56px; padding-bottom: var(--e2); } }

/* Buscador de comandos */
.paleta { width: min(520px, calc(100% - 32px)); margin: 12vh auto auto; padding: 0; border: 1px solid var(--linea-2); border-radius: var(--radio); background: var(--panel); color: var(--texto); box-shadow: var(--sombra-2); animation: dialogo-entra var(--rapido) var(--curva); }
.paleta::backdrop { background: var(--velo); }
.paleta-entrada { display: flex; align-items: center; gap: var(--e3); padding: 0 var(--e4); border-bottom: 1px solid var(--linea); color: var(--suave); }
.paleta-entrada .ico { width: 16px; height: 16px; }
.paleta-entrada input { border: 0; background: none; min-height: 52px; padding: 0; font: 400 20px var(--serif); }
.paleta-entrada input:focus { outline: none; }
.paleta-lista { max-height: 340px; overflow: auto; padding: var(--e1); }
.paleta-lista .vacio { padding: var(--e3); }
.paleta-item { display: block; width: 100%; padding: var(--e2) var(--e3); border: 0; border-radius: var(--radio); background: none; color: var(--texto); font-size: var(--t-mini); text-align: left; cursor: pointer; }
.paleta-item:hover { background: var(--panel-2); }
.paleta-item[aria-selected="true"] { background: var(--acento-tenue); color: var(--acento); }
[data-pantalla="escritorio"] .aviso { bottom: 96px; }