* {
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: linear-gradient(180deg,#eef3f8,#dfe8f2);
    color:#1f2937;
}

/* ===== CARD ===== */

.container {
    max-width:720px;
    margin:60px auto;
    padding:40px;
    border-radius:14px;
    background:white;
    box-shadow:0 10px 40px rgba(0,0,0,0.15);
}

/* ===== CÍM ===== */

h1 {
    text-align:center;
    font-weight:600;
    margin-top:0;
    margin-bottom:30px;
    color:#1e3a8a;
    letter-spacing:0.5px;
}

/* ===== LABEL ===== */

label {
    display:block;
    margin-top:18px;
    font-weight:600;
    font-size:14px;
    color:#374151;
}

/* ===== INPUT ===== */

input[type="text"],
input[type="file"],
#datetime {

    width:100%;
    padding:12px 14px;
    margin-top:6px;

    border-radius:8px;
    border:1px solid #cbd5e1;

    font-size:14px;

    background:white;
    color:#111827;

    transition:0.2s;
}

input:focus {

    outline:none;
    border-color:#2563eb;
    box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}

/* ===== BUTTON ===== */

button {

    margin-top:30px;
    padding:14px;

    width:100%;

    border:none;
    border-radius:8px;

    background:linear-gradient(90deg,#2563eb,#1d4ed8);

    color:white;
    font-size:15px;
    font-weight:600;

    cursor:pointer;

    transition:0.25s;
}

button:hover {

    transform:translateY(-1px);
    box-shadow:0 6px 20px rgba(37,99,235,0.3);
}

/* ===== MESSAGE ===== */

.message {

    padding:14px;
    margin-bottom:20px;

    border-radius:6px;
    border-left:5px solid #10b981;

    background:#ecfdf5;
    color:#065f46;

    font-weight:500;
}

/* ===== AUTOCOMPLETE ===== */

.autocomplete-items {

    border:1px solid #cbd5e1;
    max-height:160px;
    overflow-y:auto;

    background:white;

    border-radius:8px;
    margin-top:4px;

    box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

.autocomplete-items div {

    padding:10px;
    cursor:pointer;
    transition:0.15s;
}

.autocomplete-items div:hover {

    background:#f1f5f9;
}

/* ===== PREVIEW ===== */

.preview-container {

    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:15px;
}

.preview-item {

    position:relative;

    border-radius:10px;
    overflow:hidden;

    box-shadow:0 8px 20px rgba(0,0,0,0.15);

    transition:0.2s;
}

.preview-item:hover {

    transform:scale(1.04);
}

.preview-item img {

    width:110px;
    height:110px;
    object-fit:cover;
    display:block;
}

.preview-item button {

    position:absolute;

    top:6px;
    right:6px;

    width:22px;
    height:22px;

    border:none;
    border-radius:50%;

    background:#ef4444;
    color:white;

    font-size:14px;
    font-weight:bold;

    cursor:pointer;
    padding:0;
}

.preview-item button:hover {

    background:#b91c1c;
}

/* ===== FLATPICKR ===== */

.flatpickr-calendar {

    border-radius:10px !important;
    border:1px solid #cbd5e1 !important;
}

.flatpickr-day.selected {

    background:#2563eb !important;
    border-color:#2563eb !important;
}

.flatpickr-confirm {

    background:#2563eb !important;
    color:white !important;
    border-radius:6px !important;
}

/* ===== SPINNER ===== */

.preview-loader {

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    margin-top:15px;
    gap:10px;

    color:#6b7280;
}

.spinner {

    width:32px;
    height:32px;

    border:4px solid rgba(0,0,0,0.15);
    border-top:4px solid #2563eb;

    border-radius:50%;

    animation:spin 0.8s linear infinite;
}

@keyframes spin {

    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }

}