<template>
  <header class="top glass card">
    <div class="header-content">
      <img src="/icon.png" alt="Printer Central" class="logo" />
      <div class="header-text">
        <h1>Printer Central</h1>
        <p class="subtle">Construí tu formato concatenando comandos de impresión</p>
      </div>
    </div>
  </header>
</template>

<script setup>
</script>

<style scoped>
.top { grid-area: header; }
.glass { background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 14px; }
.card { padding: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.05); }
.header-content { display: flex; align-items: center; gap: 16px; }
.logo { width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0; }
.header-text { flex: 1; min-width: 0; }
h1 { margin: 0 0 4px; font-size: 22px; letter-spacing: 0.2px; }
.subtle { color: var(--muted); margin: 0; }
</style>

