/* ================================================================
   Wikly Custom Payments — My Account CSS v1.1
   ================================================================ */

/* ── Sección comprobante ──────────────────────────────────────── */
.wikly-myaccount-receipt { margin-top: 30px; padding-top: 20px; border-top: 1px solid #e5e7eb; }
.wikly-myaccount-receipt h2 { font-size: 18px; margin-bottom: 16px; }

/* ── Badges de estado ─────────────────────────────────────────── */
.wikly-status-badge {
    display: inline-block; padding: 5px 14px; border-radius: 99px;
    font-weight: 600; font-size: 13px;
}
.wikly-status-pending  { background: #fef3c7; color: #92400e; }
.wikly-status-approved { background: #d1fae5; color: #065f46; }
.wikly-status-rejected { background: #fee2e2; color: #991b1b; }

.wikly-ma-status { margin-bottom: 14px; }

/* ── Tarjeta del archivo ──────────────────────────────────────── */
.wikly-ma-file-card {
    display: flex; gap: 18px; align-items: flex-start;
    border: 1px solid #e2d9f3; border-radius: 8px;
    background: #faf8ff; padding: 16px; margin-bottom: 16px;
}

.wikly-ma-file-preview { flex-shrink: 0; }

.wikly-ma-img-link {
    position: relative; display: inline-block;
    border-radius: 6px; overflow: hidden;
}
.wikly-ma-img-thumb {
    display: block; width: 100px; height: 100px;
    object-fit: cover; border-radius: 6px; border: 1px solid #e2d9f3;
}
.wikly-ma-img-overlay {
    position: absolute; inset: 0;
    background: rgba(124,58,237,.65);
    color: #fff; font-size: 11px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .2s;
}
.wikly-ma-img-link:hover .wikly-ma-img-overlay { opacity: 1; }

.wikly-ma-pdf-link {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    width: 80px; text-align: center; color: #7c3aed;
    text-decoration: none; font-size: 12px; font-weight: 600;
    border: 1px solid #e2d9f3; border-radius: 6px; padding: 12px 6px;
    background: #fff;
}
.wikly-ma-pdf-icon { font-size: 28px; }
.wikly-ma-pdf-link:hover { background: #f3f0ff; }

.wikly-ma-file-meta { flex: 1; font-size: 13px; color: #444; }
.wikly-ma-file-meta p { margin: 0 0 6px; }
.wikly-ma-dl-btn { margin-top: 8px; display: inline-block; }

.wikly-ma-rejection-note {
    background: #fee2e2; border-left: 4px solid #dc2626;
    border-radius: 0 6px 6px 0; padding: 10px 14px;
    font-size: 13px; color: #991b1b; margin-bottom: 16px;
}

.wikly-ma-no-receipt {
    background: #fef3c7; border-left: 4px solid #f59e0b;
    border-radius: 0 6px 6px 0; padding: 10px 14px;
    font-size: 13px; color: #78350f; margin-bottom: 16px;
}

/* ── Upload desde My Account ──────────────────────────────────── */
.wikly-ma-upload-wrap { margin-top: 18px; }
.wikly-ma-upload-wrap h3 { font-size: 15px; margin-bottom: 10px; }

.wikly-ma-dropzone {
    border: 2px dashed #c4b5fd; border-radius: 10px;
    background: #faf8ff; padding: 22px 18px;
    text-align: center; cursor: pointer;
    transition: border-color .2s, background .2s;
    position: relative;
}
.wikly-ma-dropzone:hover,
.wikly-ma-dropzone.is-dragging { border-color: #7c3aed; background: #f3f0ff; }

.wikly-ma-file-input {
    position: absolute; inset: 0;
    width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2;
}
.wikly-ma-dropzone[data-state="uploading"] .wikly-ma-file-input,
.wikly-ma-dropzone[data-state="success"]   .wikly-ma-file-input,
.wikly-ma-dropzone[data-state="error"]     .wikly-ma-file-input { pointer-events: none; }

/* ── Estados My Account Dropzone ─────────────────────────────── */
.wikly-ma-dz-state { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; color: #666; }
.wikly-ma-dz-icon  { font-size: 26px; }
.wikly-ma-dz-hint  { font-size: 12px; color: #888; }

/* ── Barra de progreso My Account ────────────────────────────── */
.wikly-ma-progress-label {
    display: flex; justify-content: space-between; font-size: 13px;
    font-weight: 600; color: #5b21b6; margin-bottom: 6px; width: 100%;
}
.wikly-ma-progress-pct { font-size: 12px; color: #7c3aed; }
.wikly-ma-progress-track {
    width: 100%; height: 10px;
    background: #e9d5ff; border-radius: 99px; overflow: hidden;
}
.wikly-ma-progress-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg,#7c3aed,#a855f7);
    border-radius: 99px; transition: width .25s ease;
}
.wikly-ma-progress-filename { font-size: 11px; color: #888; margin-top: 4px; }

.wikly-ma-dz-success { flex-direction: row; gap: 10px; color: #065f46; font-weight: 600; font-size: 14px; }
.wikly-ma-success-msg { font-size: 13px; }
.wikly-ma-dz-error { color: #dc2626; gap: 8px; }
.wikly-ma-error-msg { font-size: 13px; font-weight: 500; }
.wikly-ma-retry { cursor: pointer; font-size: 12px; }

/* ── Columna en tabla de pedidos ──────────────────────────────── */
.wikly-badge { font-size: 16px; cursor: default; }
.wikly-col-na { color: #ccc; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 500px) {
    .wikly-ma-file-card { flex-direction: column; }
    .wikly-ma-img-thumb { width: 80px; height: 80px; }
}