:root { 
    --bg-1: #FFF1F8;
    --bg-2: #FFFBEA; --card: #ffffff;
    --accent: #2b7cff;
    --accent-2: #60a5fa;
    --muted: #6b7280;
    --text: #0b1220;
    --danger: #ef4444;
    --radius: 14px;
    --shadow-lg: 0 12px 30px rgba(15,30,70,0.08);
    --shadow-md: 0 6px 18px rgba(20,30,60,0.06);
    --btn-shadow: 0 8px 20px rgba(43,124,255,0.08);
    --max-width: 980px;
}
* {
    box-sizing:border-box;
}
html,body {
    height:100%;
}
body {
    margin:0;
    font-family: "Nunito", system-ui, -apple-system, sans-serif;
    background: radial-gradient(900px 420px at 95% 90%, rgba(242,247,255,0.6), transparent), linear-gradient(180deg,var(--bg-1),var(--bg-2));
    color:var(--text);
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:18px;
}
.container {
    width:100%;
    max-width:var(--max-width);
    margin:0 auto;
}
#top-logo {
    background-color: white;
    padding:14px;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(15,30,70,0.06);
    display:block;
    margin:8px auto 14px;
    width:320px;
    height:auto;
    object-fit:contain;
}
.header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:12px;
}
h1 {
    margin:0;font-size:20px;
}
.description {
    color:var(--muted);
    font-size:13px;
}
.controls {
    background:var(--card);
    padding:18px;
    border-radius:var(--radius);
    box-shadow:var(--shadow-lg);
    display:flex; gap:20px;
    align-items:flex-start;
}
.form-col {
    width:420px;min-width:260px;
}
.field {
    margin-bottom:12px;
}
.field.small {
    width:140px;
}
label {
    display:block;
    font-size:13px;
    color:var(--muted);
    margin-bottom:6px;
}

    /* MODIFICADO: Se agregó input[type="email"] para que tenga el mismo estilo */
input[type="text"], input[type="number"], input[type="email"] {
    width:100%;
    padding:10px 12px;
    border:1px solid rgba(11,18,32,0.06);
    border-radius:10px;
    font-size:15px;
    background:linear-gradient(180deg,#fff,#fbfdff);
}
.avatar-section {
    margin:14px 0 8px;
    padding:12px;
    border-radius:12px;
    border:1px dashed rgba(11,18,32,0.06);
    background:linear-gradient(180deg,#fbfdff,#fff);
}
.upload {
    display:flex;
    align-items:center;
    gap:12px;margin-bottom:10px;
}
input[type="file"] {
    display:none;
}

.btn {
    display:inline-block;
    padding:8px 12px;
    border-radius:10px;
    border:1px solid rgba(11,18,32,0.06);
    background:linear-gradient(180deg,#fff,#f7fbff);
    color:var(--text);cursor:pointer;
    font-weight:800;
    text-align:center;
}
.btn.primary {
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
    color:#fff;
    border:none;
    box-shadow:var(--btn-shadow);
}
.btn:disabled { 
    opacity: 0.6;
    cursor: wait;
}
.btn-upload {
    background: linear-gradient(135deg, #d946ef, #8b5cf6);
    color: white;
    border: none;
    padding: 10px 20px;
    box-shadow: 0 4px 12px rgba(217, 70, 239, 0.3);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-upload:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(217, 70, 239, 0.5);
}

.stock-grid {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:8px;margin-top:8px
}
.stock-item {
    width:64px;
    height:64px;
    border-radius:10px;overflow:hidden;
    border:2px solid transparent;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg,#fff,#fbfdff);
    box-shadow:var(--shadow-md);
}
.stock-item.selected {
    border-color:var(--accent);
    box-shadow:0 8px 24px rgba(43,124,255,0.12);
}
.avatar-preview {
    width:92px;
    height:92px;
    border-radius:12px;
    border:1px solid rgba(11,18,32,0.06);
    margin-top:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:linear-gradient(180deg,#fff,#fbfdff);
}
.avatar-preview img {
    width:100%;
    height:100%;
    object-fit:cover;
}
.actions {
    margin-top:12px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.errors {
    color:var(--danger);
    margin-top:10px;
    font-weight:700
}
.msg {
    font-size:13px;
    color:var(--muted)
}
.preview-col {
    flex:1;
    min-width:300px;
    display:flex;flex-direction:column;
    gap:12px;
    align-items:center;
}
.card-wrap {
    width:100%;
    max-width:700px;
    display:flex;
    gap:12px;
    align-items:center;
    justify-content:center;
    padding:12px;
    background:linear-gradient(180deg,#f8fbff,#fff);
    border-radius:12px;
    border:1px solid rgba(11,18,32,0.03);
    box-shadow: var(--shadow-md);
}
.card-wrap canvas {
    width:100%;
    height:auto;
    border-radius:8px;
    display:block;
    background:#fff;
}
.hint {color:var(--muted);
    font-size:13px;
    margin-bottom:40px;
}
@media (max-width:980px) {.controls{flex-direction:column} .form-col{width:100%} .stock-grid{grid-template-columns:repeat(5,1fr)} .card-wrap{max-width:100%} }