/* =========================================
   DROPIFY - SISTEMA COMPLETO (LIGHT + DARK)
========================================= */

        /* Wrapper base */
        .dropify-wrapper {
          background-color: var(--bs-body-bg) !important;
          border: 1px dashed var(--bs-border-color) !important;
          color: var(--bs-secondary-color);
          border-radius: 10px;
          font-family: var(--bs-font-sans-serif);
          transition: all 0.2s ease;
          overflow: hidden;
        }

        /* =========================
   HOVER / DRAG (SIN RAYAS)
========================= */

        /* Estado hover y drag */
        /* Hover y drag con patrón elegante animado */
        .dropify-wrapper:hover,
        .dropify-wrapper.dragover {
          border-color: var(--bs-primary);

          background-size: 24px 24px;

          background-image: linear-gradient(-45deg,
              rgba(0, 0, 0, 0.025) 25%,
              transparent 25%,
              transparent 50%,
              rgba(0, 0, 0, 0.025) 50%,
              rgba(0, 0, 0, 0.025) 75%,
              transparent 75%,
              transparent);

          animation: dropifyStripes 3s linear infinite;
        }

        [data-bs-theme="dark"] .dropify-wrapper:hover,
        [data-bs-theme="dark"] .dropify-wrapper.dragover {

          background-image: linear-gradient(-45deg,
              rgba(255, 255, 255, 0.05) 25%,
              transparent 25%,
              transparent 50%,
              rgba(255, 255, 255, 0.05) 50%,
              rgba(255, 255, 255, 0.05) 75%,
              transparent 75%,
              transparent);

        }

        /* =========================
   FOCUS (UX PRO)
========================= */

        .dropify-wrapper:focus-within {
          border-color: var(--bs-primary);
          box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.1);
        }

        [data-bs-theme="dark"] .dropify-wrapper:focus-within {
          box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.2);
        }

        /* =========================
   MENSAJE / TEXTO
========================= */

        .dropify-wrapper .dropify-message p {
          color: var(--bs-secondary-color) !important;
          font-size: 14px;
          margin: 0;
        }

        /* Icono */
        .dropify-wrapper .dropify-message span.file-icon {
          color: var(--bs-primary) !important;
          font-size: 42px;
          margin-bottom: 5px;
        }

        /* =========================
   BOTÓN CLEAR
========================= */

        .dropify-wrapper .dropify-clear {
          background: var(--bs-danger) !important;
          color: #fff;
          border: none;
          border-radius: 6px;
          font-size: 12px;
          padding: 4px 10px;
        }

        /* =========================
   🔥 FIX GLOBAL RAYAS
========================= */

        /* Quita patrón en preview SIEMPRE */
        .dropify-wrapper .dropify-preview {
          background-image: none !important;
          background-color: var(--bs-tertiary-bg) !important;
        }

        /* También cuando hay hover o drag */
        .dropify-wrapper:hover .dropify-preview,
        .dropify-wrapper.dragover .dropify-preview {
          background-image: none !important;
        }

        /* Dark mode preview */
        [data-bs-theme="dark"] .dropify-wrapper .dropify-preview {
          background-color: var(--bs-secondary-bg) !important;
        }

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

        .dropify-wrapper.has-preview {
          background-color: var(--bs-tertiary-bg);
        }

        [data-bs-theme="dark"] .dropify-wrapper.has-preview {
          background-color: var(--bs-secondary-bg);
        }

        /* Imagen preview (detalle pro) */
        .dropify-wrapper .dropify-preview img {
          border-radius: 8px;
        }

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

        .dropify-wrapper .dropify-preview .dropify-filename-inner {
          color: var(--bs-body-color);
          font-family: var(--bs-font-monospace);
          font-size: 13px;
        }

        .dropify-wrapper .dropify-preview .dropify-infos {
          color: var(--bs-secondary-color);
          font-size: 12px;
        }

        /* =========================
   ERRORES
========================= */

        .dropify-wrapper .dropify-errors-container {
          font-family: var(--bs-font-sans-serif);
          color: var(--bs-danger);
          font-size: 12px;
        }

        /* =========================
   BOTÓN REEMPLAZAR
========================= */

        .dropify-wrapper .dropify-preview .dropify-infos-inner {
          font-size: 12px;
        }