/* Página y contenedor con tamaño real de etiqueta */
        :root{
            --w-mm: 104mm;
            --h-mm: 60mm;
            --font-sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

        @page {
            size: 104mm 60mm;
            margin: 0;
        }

        body {
            margin: 0;
            padding: 0;
            font-family: var(--font-sans);
            background: #ff8c00; /* FONDO NARANJA */
            color: #111;
        }

        .controls {
            width: 360px;
            background: white;
            padding: 12px;
            border-radius: 8px;
            box-shadow: 0 6px 18px rgba(0,0,0,0.06);
        }
        .controls h2{ margin: 4px 0 12px 0; font-size: 16px; }
        .controls label{ display:block; font-size:13px; margin:8px 0 4px;}
        .controls input[type="text"],
        .controls input[type="number"],
        .controls select {
            width:100%;
            padding:8px;
            border:1px solid #ccc;
            border-radius:6px;
            box-sizing:border-box;
            font-size:14px;
        }
        .controls .row { display:flex; gap:8px; }
        .controls .small { flex:1; }

        .btns { margin-top:10px; display:flex; gap:8px; }
        button { padding:8px 10px; border-radius:6px; border:none; cursor:pointer; }
        button.print { background:#0b7a4b; color:white; }
        button.preview { background:#2b6cff; color:white; }
        button.reset { background:#e0e0e0; }

        /* ANIMACIÓN DE BOTONES */
        button {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        button:hover {
            transform: scale(1.07);
            box-shadow: 0 6px 16px rgba(0,0,0,0.25);
        }

        .label-wrap {
            width: 100mm;
            height: 54mm;
            background: white;
            padding: 1mm;
            border: 1px dashed black;
            box-shadow: 0 6px 18px rgba(0,0,0,0.08);

        }

        .label {
            width:100%;
            height:100%;
            border: var(--border);
            box-sizing: border-box;
            padding:1mm;
            display:flex;
            flex-direction:column;
            font-size:12px;
        }

        .top {
            display:flex;
            justify-content:space-between;
            gap:8px;
            align-items:flex-start;
        }
        .brand {
            font-weight:700;
            font-size:14px;
        }
        .meta-box {
            border: 0.5mm dashed #999;
            padding:6px;
            border-radius:6px;
            text-align:center;
            min-width:82px;
        }

        .grid {
            display:grid;
            grid-template-columns: 1fr 1fr;
            gap:6px;
            flex:1;
        }

        .field {
            border: 0.6mm solid #ddd;
            border-radius:6px;
            padding:6px;
            min-height:22px;
            display:flex;
            flex-direction:column;
            justify-content:center;
        }

        .field .label-small { font-size:10px; color:#555; }
        .field .value { font-weight:600; font-size:13px; }

        .full { grid-column: 1 / -1; }

        .footer {
            display:flex;
            justify-content:space-between;
            gap:8px;
            align-items:center;
        }
        .autor-footer {
            text-align: center;
            width: 100%;
            padding: 6px 0;
            font-size: 11px;
            
            /* Transparencia tipo marca de agua */
            opacity: 0.2;
            color: #000; /* negro suave */
            
            background: transparent; /* sin fondo */
            margin-top: 20px;
            user-select: none;
        }
        .autor-footer:hover {
            opacity: 0.5; /* se ve un poquito más al pasar el mouse */
        }
        .small-muted { font-size:9px; color:#666; }
        @media print {
            body { background: white; padding:0; }
            .controls { display:none !important; }
            .label-wrap { box-shadow:none; border-radius:0; margin:0; }
            html, body { width: var(--w-mm); height: var(--h-mm); }
             .autor-footer {display: none !important;
    }
        }
        @media (max-width:800px) {
            body { flex-direction:column; }
        }