@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Libre+Baskerville:wght@700&display=swap');

body { font-family: 'Inter', sans-serif; background-color: #f3f4f6; overflow: hidden; }

/* === COMPONENTES BASE === */
.credential-card {
    width: 400px; height: 250px; position: relative; background: white; 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); overflow: hidden; transform-origin: center center;
}
.document-sheet {
    width: 595px; min-height: 842px; background: white;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); position: relative; transform-origin: top center; overflow: hidden;
}

/* === UI PANEL DE CONTROL === */
.section-title { font-size: 0.70rem; font-weight: 800; text-transform: uppercase; color: #6b7280; margin-bottom: 0.5rem; display: block; letter-spacing: 0.05em; }
.input-std { width: 100%; padding: 0.4rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 0.80rem; background: white; }
.input-std:focus { border-color: #4f46e5; outline: none; ring: 2px solid #e0e7ff; }

.btn-template { padding: 0.5rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; font-size: 0.75rem; background: white; cursor: pointer; transition: all 0.2s; }
.btn-template.active { background-color: #e0e7ff; border-color: #4f46e5; color: #4338ca; font-weight: 600; }
.hidden-force { display: none !important; }

/* === UPLOAD BOX === */
.upload-box { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; border: 1px dashed #d1d5db; border-radius: 0.5rem; position: relative; cursor: pointer; background: white; }
.upload-box:hover { border-color: #4f46e5; background-color: #eef2ff; }
.upload-box input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

/* === CONTROLES (Sliders) === */
.range-slider { width: 100%; height: 4px; background: #e5e7eb; border-radius: 2px; outline: none; -webkit-appearance: none; }
.range-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: #4f46e5; border-radius: 50%; cursor: pointer; }
.zoom-controls { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 50; }

/* === ELEMENTOS MANIPULABLES === */
.logo-frame { 
    display: inline-flex; align-items: center; justify-content: center; 
    background-color: white; box-sizing: border-box; transition: all 0.1s ease;
}
.bg-manipulable { transition: transform 0.1s ease, opacity 0.1s ease; }
.firma-manipulable { transition: transform 0.1s ease; transform-origin: center bottom; }