/* Imported by resources/css/filament/Admin/theme.css.
   No @tailwind directives here on purpose: the panel theme provides them. */

/* =============================================================================
 * Toolbar: resaltar la herramienta ACTIVA según lo seleccionado en el editor
 * (negrita, itálica, link, etc.) — estilo tipo Word para que se vea claro qué
 * está activado/desactivado. Se aplica vía la clase 'tiptap-tool--active' que
 * el componente button enlaza con editor().isActive(...).
 * ============================================================================= */
.tiptap-tool.tiptap-tool--active {
    @apply bg-main-color !text-white ring-1 ring-main-color shadow-sm;
}

.tiptap-tool.tiptap-tool--active svg {
    @apply !text-white;
}

/* =============================================================================
 * Editor contrast fix: text invisible against the editor background gets a
 * subtle gray stroke so the editor user can see it. The actual color value
 * stored in the DB and rendered on the frontend is NOT affected.
 * ============================================================================= */

/* --- White text on light editor background --- */
div.tiptap-editor .ProseMirror [style*="color: #ffffff"],
div.tiptap-editor .ProseMirror [style*="color: #FFFFFF"],
div.tiptap-editor .ProseMirror [style*="color:#ffffff"],
div.tiptap-editor .ProseMirror [style*="color:#FFFFFF"],
div.tiptap-editor .ProseMirror [style*="color: #fff"],
div.tiptap-editor .ProseMirror [style*="color: #FFF"],
div.tiptap-editor .ProseMirror [style*="color: white"],
div.tiptap-editor .ProseMirror [style*="color: rgb(255, 255, 255)"] {
    -webkit-text-stroke: 0.5px #9ca3af;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 2px;
}

/* --- Black text on dark editor background --- */
.dark div.tiptap-editor .ProseMirror [style*="color: #000000"],
.dark div.tiptap-editor .ProseMirror [style*="color: #000"],
.dark div.tiptap-editor .ProseMirror [style*="color:#000000"],
.dark div.tiptap-editor .ProseMirror [style*="color:#000"],
.dark div.tiptap-editor .ProseMirror [style*="color: black"],
.dark div.tiptap-editor .ProseMirror [style*="color: rgb(0, 0, 0)"] {
    -webkit-text-stroke: 0.5px #6b7280;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
}


.tiptap-content a[data-as-button="true"],
div.tiptap-editor div.ProseMirror a[data-as-button="true"] {

    @apply inline-block px-5 py-2.5 rounded-md font-semibold text-center transition-all duration-200 no-underline shadow-sm;

    /* --- SIZES (Leyendo el atributo hreflang) --- */

    /* Small (sm) */
    &[hreflang="sm"] {
        @apply px-3 py-1.5 text-xs;
    }

    /* Large (lg) */
    &[hreflang="lg"] {
        @apply px-20 py-5 text-lg;
    }

    /* Medium (md) - Por defecto o si no tiene hreflang */
    &[hreflang="md"],
    &:not([hreflang="sm"]):not([hreflang="lg"]) {
        @apply px-5 py-2.5 text-sm;
    }@apply px-8 py-4 text-lg;


    &[data-as-button-theme="button_secondary"] {
        @apply bg-gray-500 hover:bg-gray-600 !text-white;
    }

    &[data-as-button-theme="button_danger"] {
        @apply bg-red-600 hover:bg-red-700 !text-white;
    }

    &[data-as-button-theme="button_dark"] {
        @apply bg-gray-800 hover:bg-gray-900 !text-white;
    }

    &[data-as-button-theme="button_main_color"] {
        @apply bg-main-color hover:opacity-80 !text-white;
    }

    &[data-as-button-theme="button_color_one"] {
        @apply bg-main-one hover:bg-main-two !text-white;
    }

    &[data-as-button-theme="button_color_two"] {
        @apply bg-main-two hover:opacity-80 !text-white;
    }

    &[data-as-button-theme="button_msb"] {
        @apply bg-main-one hover:bg-main-two !text-white;
    }

    &[data-as-button-theme="button_m-yellow"] {
        @apply bg-m-yellow hover:opacity-80 !text-gray-800;
    }
}