/* ============================================================
   Store admin · Media modal (biblioteca + subir)
   ------------------------------------------------------------
   El modal de media global usa sa-modal como base y agrega
   tabs (Biblioteca / Subir) + dropzone destacado.
   Las clases de dropzone (sa-dropzone__*) son reutilizables
   en cualquier campo de imágenes del admin que quiera
   ofrecer drag-and-drop.
   ============================================================ */

/* Modificador del modal genérico: dialog más ancho.
   El z-index alto permite abrirlo encima de paneles mobile que
   crean stacking-context propio (panel del form de producto). */
.sa-modal--media { z-index: 1100; }
.sa-media-modal__dialog {
    width: min(100%, 880px);
    gap: 16px;
}

/* Tabs internos (Biblioteca / Subir) ---------------------- */
.sa-media-modal__tabs {
    align-self: flex-start;
}

/* Paneles de cada tab ------------------------------------- */
.sa-media-modal__panel { display: grid; gap: 14px; }
.sa-media-modal__panel[hidden] { display: none; }

.sa-media-modal__library-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13.5px;
}

/* Feedback (errores / mensajes) --------------------------- */
.sa-media-modal__feedback { margin: 0; }

/* Footer del modal: contador + acciones ------------------- */
.sa-media-modal__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--sa-border);
}
.sa-media-modal__actions[hidden] { display: none; }

/* ============================================================
   Dropzone (subcomponentes internos)
   ------------------------------------------------------------
   Pensado para reutilizarse fuera del modal: campo media de
   producto, popup, banners, etc. Vive sobre `.sa-dropzone`
   que ya define el contenedor.
   ============================================================ */
.sa-dropzone {
    cursor: pointer;
    outline: none;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease;
}
.sa-dropzone:hover,
.sa-dropzone:focus-visible,
.sa-dropzone.is-dragover {
    border-color: var(--sa-primary);
    background: rgba(var(--sa-primary-rgb), 0.06);
    color: var(--sa-text);
}
.sa-dropzone.is-loading {
    opacity: 0.72;
    pointer-events: none;
}
.sa-dropzone.is-loading .sa-dropzone__icon,
.sa-dropzone.is-loading .sa-dropzone__copy-desktop,
.sa-dropzone.is-loading .sa-dropzone__copy-mobile { display: none; }

.sa-dropzone__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--sa-radius-md);
    background: rgba(var(--sa-primary-rgb), 0.10);
    color: var(--sa-primary);
    font-size: 22px;
    margin-bottom: 2px;
}
.sa-dropzone__icon i { font-size: 22px; color: inherit; }

.sa-dropzone strong {
    color: var(--sa-text);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.sa-dropzone span { font-size: 12.5px; line-height: 1.5; }

/* Copy desktop vs mobile (uno se oculta por viewport) ----- */
.sa-dropzone__copy-mobile { display: none; }

/* Estado de subida ---------------------------------------- */
.sa-dropzone__status {
    display: grid;
    justify-items: center;
    gap: 6px;
}
.sa-dropzone__status[hidden] { display: none; }
.sa-dropzone__spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(var(--sa-primary-rgb), 0.18);
    border-top-color: var(--sa-primary);
    border-radius: 999px;
    animation: sa-dropzone-spin 0.8s linear infinite;
}
@keyframes sa-dropzone-spin { to { transform: rotate(360deg); } }

/* Variante dentro del modal (más alta) -------------------- */
.sa-dropzone--media {
    min-height: 200px;
    padding: 28px 20px;
}

/* Variante compacta para campos chicos -------------------- */
.sa-dropzone--compact {
    padding: 16px;
    min-height: 96px;
}
.sa-dropzone--compact .sa-dropzone__icon { width: 36px; height: 36px; font-size: 18px; }
.sa-dropzone--compact strong { font-size: 13px; }
.sa-dropzone--compact span { font-size: 12px; }

/* Mobile: ajustamos copy ---------------------------------- */
@media (max-width: 600px) {
    .sa-dropzone__copy-desktop { display: none; }
    .sa-dropzone__copy-mobile { display: inline; }
    .sa-dropzone--media { min-height: 160px; padding: 20px 16px; }

    .sa-media-modal__dialog { padding: 16px; }
    .sa-media-library-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}