:root{
    --bg:#0b1022;
    --panel:#0f172a;
    --card:#111827;
    --border:#1f2937;
    --text:#e5e7eb;
    --muted:#9ca3af;
    --brand:#3b82f6;
    --brand-600:#2563eb;
    --success:#22c55e;
    --danger:#ef4444;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--text);
    background:linear-gradient(180deg, var(--bg), var(--panel));
}

.container{max-width:1100px;margin:32px auto;padding:0 16px}
.header{margin-bottom:18px}
.header h1{margin:0 0 6px;font-size:28px}
.subtitle{margin:0;color:var(--muted)}

.card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:16px;
    padding:16px;
    box-shadow:0 6px 24px rgba(0,0,0,.25);
    margin-bottom:18px;
}

.section-title{margin:0 0 10px}

.grid{display:grid;gap:12px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid-3{grid-template-columns:1fr}}

.form{display:grid;gap:14px}

.field{display:flex;flex-direction:column;gap:6px}
.label{font-size:13px;color:var(--muted)}
.input{
    width:100%; padding:12px 12px;
    border:1px solid var(--border);
    border-radius:12px; background:#0d1426; color:var(--text);
    outline:none; transition:border .15s, box-shadow .15s;
}
.input:focus{border-color:var(--brand); box-shadow:0 0 0 3px #3b82f633}

.btn{
    display:inline-flex; align-items:center; justify-content:center;
    gap:8px; border:none; padding:12px 16px; border-radius:12px;
    background:#202638; color:var(--text); cursor:pointer; font-weight:600;
}
.btn:hover{filter:brightness(1.1)}
.btn-primary{background:linear-gradient(180deg,var(--brand),var(--brand-600))}
.btn-ghost{background:transparent;border:1px solid var(--border)}

.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}

.msg{min-height:22px;font-size:14px;color:var(--muted)}
.msg.ok{color:var(--success)}
.msg.err{color:var(--danger)}

.dropzone{
    border:2px dashed #2b344a; border-radius:16px; padding:18px;
    background:#0c1325; text-align:center; cursor:pointer; outline:none;
    transition:border-color .15s, background .15s;
}
.dropzone:focus{border-color:var(--brand)}
.dropzone.dragover{border-color:var(--brand); background:#0f1a36}
.dz-inner{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted)}
.dz-inner svg{color:var(--brand)}

.preview{display:flex;align-items:center;gap:12px}
.preview img{
    width:96px;height:96px;object-fit:cover;border-radius:12px;border:1px solid var(--border)
}
.preview-meta{display:flex;flex-direction:column;gap:2px}
.muted{color:var(--muted)}
.hidden{display:none !important}

.gallery{
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.gallery .card-item{
    background:#10182d;border:1px solid var(--border);border-radius:14px;overflow:hidden
}
.gallery .thumb{width:100%;height:150px;object-fit:cover;display:block}
.gallery .meta{padding:8px;font-size:12px;color:var(--muted)}
.gallery .meta strong{color:var(--text)}


/* === Modal vista previa === */
#imgModal {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
transition: opacity .2s ease;
}
#imgModal.open { opacity: 1; }
#imgModal .modal-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,.7);
backdrop-filter: blur(2px);
}
#imgModal .modal-content {
position: relative;
max-width: 90%;
max-height: 90%;
z-index: 1;
}
#imgModal img {
display: block;
max-width: 100%;
max-height: 100%;
border-radius: 12px;
box-shadow: 0 4px 24px rgba(0,0,0,.6);
}
#imgModal .close-btn {
position: absolute;
top: -32px;
right: -32px;
background: none;
border: none;
font-size: 36px;
color: white;
cursor: pointer;
transition: transform .2s;
}
#imgModal .close-btn:hover {
transform: scale(1.1);
}