:root {
    --bg-app: #f1f3f5;
    --sidebar: #ffffff;
    --primary: #1a252f;
    --accent: #27ae60;
    --border: #dee2e6;
}

* { box-sizing: border-box; }
body { font-family: 'Segoe UI', Arial, sans-serif; margin: 0; background-color: var(--bg-app); }

.app-container { display: flex; min-height: 100vh; }

.sidebar {
    width: 350px; background: var(--sidebar); border-right: 1px solid var(--border);
    padding: 20px; display: flex; flex-direction: column; position: fixed;
    height: 100vh; overflow-y: auto; z-index: 100;
}

.brand { text-align: center; margin-bottom: 20px; }
.main-logo { max-width: 70px; margin-bottom: 5px; }
.brand h1 { font-size: 1.5rem; margin: 0; color: var(--primary); font-weight: 800; }

.input-group { margin-bottom: 15px; }
.input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
label { display: block; font-size: 0.8rem; font-weight: bold; margin-bottom: 4px; color: #495057; }
input, select { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 1rem; }

.btn-add {
    width: 100%; padding: 14px; background: var(--primary); color: white;
    border: none; border-radius: 8px; font-weight: bold; cursor: pointer;
}

.btn-print-large {
    width: 100%; padding: 18px; background: var(--accent); color: white;
    border: none; border-radius: 8px; font-size: 1.2rem; font-weight: bold; cursor: pointer; margin-top: 15px;
}

.btn-clear-large {
    width: 100%; padding: 8px; background: transparent; color: #dc3545;
    border: 1px solid #dc3545; border-radius: 8px; margin-top: 10px; cursor: pointer;
}

.preview-area { margin-left: 350px; flex-grow: 1; padding: 20px; display: flex; flex-direction: column; align-items: center; }

/* La página A4 en pantalla */
.a4-page { 
    background: white; 
    width: 210mm; 
    min-height: 297mm; 
    padding: 10mm; 
    box-shadow: 0 0 20px rgba(0,0,0,0.1); 
    transform: scale(0.8); /* Solo para verla entera en el PC */
    transform-origin: top center;
}

.print-grid { display: flex; flex-wrap: wrap; gap: 0; }

/* LA ETIQUETA */
.label-item {
    border: 0.1mm solid #ddd;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    background: white;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

.label-item:hover::after {
    content: "✕ ELIMINAR"; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(220, 53, 69, 0.9); color: white; font-size: 14px; font-weight: bold;
    display: flex; align-items: center; justify-content: center; z-index: 10;
}

/* 60% Nombre y Logo */
.section-name {
    height: 60%;
    display: flex;
    align-items: center;
    padding: 1mm 2mm;
    border-bottom: 0.1mm solid #eee;
}

.logo-label { height: 100%; max-height: 8mm; width: auto; object-fit: contain; }

.name-label {
    flex: 1;
    margin-left: 2mm;
    font-size: 9pt; /* TU TAMAÑO */
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.1;
    color: #000;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* AHORA 3 LÍNEAS */
    -webkit-box-orient: vertical;
}

/* 40% Precio */
.section-price {
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 2mm;
    position: relative;
}

.price-text {
    font-size: 26pt; 
    font-weight: 900;
    color: black;
    font-family: 'Arial Black', sans-serif;
    line-height: 1;
}
.price-text span { font-size: 12pt; margin-left: 0.5mm; }

/* EAN */
.ean-label {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6mm;
    display: flex;
    justify-content: center;
    background: white;
}
.ean-label svg { height: 6mm !important; max-width: 95%; }

/* --- IMPRESIÓN --- */
@media print {
    .no-print { display: none !important; }
    body, html { background: white; margin: 0; padding: 0; }
    .preview-area { margin: 0; padding: 0; }
    .a4-page { 
        transform: none !important; 
        box-shadow: none !important; 
        margin: 0 !important; 
        padding: 10mm !important;
        width: 210mm !important;
    }
    .label-item { border: 0.1mm solid #ccc; }
    @page { size: A4; margin: 0; }
}