/* ==========================================================================
   Modern Visual Plugin
   ==========================================================================

   Optional visual layer.

   Load after the base stylesheet.

   Does not change the HTML API.
   Does not require new classes.
   Does not require new attributes.

   Design direction:
   - Soft surfaces
   - Minimal borders
   - Large diffuse shadows
   - Generous spacing
   - Rounded controls
   - Layered UI
   - Subtle motion

   ========================================================================== */


/* ==========================================================================
   Design Tokens
   ========================================================================== */

:root {
    /* Surfaces — Editor de Portal palette (slate/blue) */

    --plugin-bg:
        #ffffff;

    --plugin-surface:
        #f1f5f9;

    --plugin-surface-soft:
        #f8fafc;

    --plugin-surface-hover:
        #f8fafc;

    --plugin-surface-active:
        #dbeafe;


    /* Borders */

    --plugin-border:
        #e2e8f0;

    --plugin-border-hover:
        #cbd5e1;

    --plugin-border-focus:
        #bfdbfe;


    /* Text */

    --plugin-text:
        #1e293b;

    --plugin-text-muted:
        #64748b;


    /* Accent — Editor de Portal brand blue */

    --plugin-accent:
        #1d4ed8;

    --plugin-accent-soft:
        #dbeafe;


    /* Radius — matches Editor de Portal rounded language */

    --plugin-radius-xs:
        8px;

    --plugin-radius-sm:
        10px;

    --plugin-radius:
        12px;

    --plugin-radius-lg:
        14px;

    --plugin-radius-xl:
        16px;


    /* Shadows */

    --plugin-shadow-xs:
        0 1px 2px rgba(15, 23, 42, 0.03);

    --plugin-shadow-sm:
        0 2px 8px rgba(15, 23, 42, 0.05);

    --plugin-shadow-md:
        0 8px 24px rgba(15, 23, 42, 0.07);

    --plugin-shadow-lg:
        0 18px 50px rgba(15, 23, 42, 0.12);

    --plugin-shadow-xl:
        0 28px 80px rgba(15, 23, 42, 0.16);


    /* Motion */

    --plugin-duration-fast:
        120ms;

    --plugin-duration:
        180ms;

    --plugin-duration-slow:
        280ms;

    --plugin-ease:
        cubic-bezier(0.2, 0, 0, 1);

    --plugin-ease-emphasized:
        cubic-bezier(0.16, 1, 0.3, 1);

        --plugin-scrollbar-size:
        10px;

    --plugin-scrollbar-track:
        transparent;

    --plugin-scrollbar-thumb:
        rgba(100, 116, 139, 0.32);

    --plugin-scrollbar-thumb-hover:
        rgba(100, 116, 139, 0.52);
}


/* ==========================================================================
   Application Surface
   ========================================================================== */

html,
body {
    background:
        var(--plugin-surface);

    color:
        var(--plugin-text);
}


/* ==========================================================================
   Global Motion
   ========================================================================== */

button,
input,
select,
textarea,
dialog,
card-box,
list-item,
a {
    transition:
        background-color var(--plugin-duration) var(--plugin-ease),
        border-color var(--plugin-duration) var(--plugin-ease),
        box-shadow var(--plugin-duration) var(--plugin-ease),
        color var(--plugin-duration) var(--plugin-ease),
        opacity var(--plugin-duration) var(--plugin-ease),
        transform var(--plugin-duration) var(--plugin-ease);
}


/* ==========================================================================
   Header / Footer
   ========================================================================== */

body > header {
    position: sticky;
    top: 0;

    z-index: 40;

    padding:
        12px 24px;

    background:
        rgba(255, 255, 255, 0.95);

    border-bottom:
        1px solid var(--plugin-border);

    box-shadow:
        0 1px 4px rgba(15, 23, 42, 0.06);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


body > footer {
    background:
        var(--plugin-surface);
}


/* ==========================================================================
   Main
   ========================================================================== */

body > main {
    padding:
        28px;

    gap: 14px;;

    background:
        var(--plugin-bg);
}



/* ==========================================================================
   Headings
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    color:
        var(--plugin-text);
}

h1,
h2 {
    border-bottom:
        1px solid var(--plugin-border);
}

h1 {
    letter-spacing:
        -0.025em;
}

h2 {
    letter-spacing:
        -0.02em;
}


/* ==========================================================================
   Paragraphs / Text
   ========================================================================== */

p {
    color:
        var(--plugin-text);

    line-height:
        1.55;
}


blockquote {
    padding:
        16px 20px;

    border:
        0;

    border-left:
        3px solid var(--plugin-accent);

    border-radius:
        0 var(--plugin-radius-sm) var(--plugin-radius-sm) 0;

    background:
        var(--plugin-surface);

    box-shadow:
        var(--plugin-shadow-xs);
}


/* ==========================================================================
   Links
   ========================================================================== */

a {
    text-decoration:
        none;
}

a:hover {
    color:
        var(--plugin-accent);
}


/* ==========================================================================
   Buttons
   ========================================================================== */

button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    min-height:
        42px;

    padding:
        10px 16px;

    border:
        1px solid var(--plugin-border);

    border-radius:
        var(--plugin-radius-sm);

    background:
        var(--plugin-surface);

    color:
        var(--plugin-text);

    box-shadow:
        var(--plugin-shadow-sm);

    font-weight:
        500;
}


button:hover:not(:disabled),
input[type="submit"]:hover:not(:disabled),
input[type="button"]:hover:not(:disabled),
input[type="reset"]:hover:not(:disabled) {
    border-color:
        var(--plugin-border-hover);

    background:
        var(--plugin-surface-hover);

    box-shadow:
        var(--plugin-shadow-md);

    transform:
        translateY(-1px);
}


button:active:not(:disabled),
input[type="submit"]:active:not(:disabled),
input[type="button"]:active:not(:disabled),
input[type="reset"]:active:not(:disabled) {
    background:
        var(--plugin-surface-active);

    box-shadow:
        var(--plugin-shadow-xs);

    transform:
        translateY(0)
        scale(0.985);
}


/* ==========================================================================
   Form Controls
   ========================================================================== */

input:not([type]),
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"],
select,
textarea {
    min-height:
        44px;

    padding:
        11px 14px;

    border:
        1px solid var(--plugin-border);

    border-radius:
        var(--plugin-radius-sm);

    background:
        var(--plugin-bg);

    color:
        var(--plugin-text);

    box-shadow:
        var(--plugin-shadow-xs);
}


textarea {
    padding:
        14px;

    border-radius:
        var(--plugin-radius);
}


input:not([type]):hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="search"]:hover,
input[type="date"]:hover,
input[type="datetime-local"]:hover,
input[type="month"]:hover,
input[type="time"]:hover,
input[type="week"]:hover,
select:hover,
textarea:hover {
    border-color:
        var(--plugin-border-hover);

    box-shadow:
        var(--plugin-shadow-sm);
}


input:not([type]):focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
select:focus,
textarea:focus {
    border-color:
        var(--plugin-border-focus);

    background:
        var(--plugin-surface);

    box-shadow:
        0 0 0 4px var(--plugin-accent-soft),
        var(--plugin-shadow-sm);
}


/* ==========================================================================
   Checkbox / Radio
   ========================================================================== */

input[type="checkbox"],
input[type="radio"] {
    width:
        22px;

    height:
        22px;

    margin:
        4px 8px 4px 0;

    border:
        1px solid var(--plugin-border-hover);

    box-shadow:
        var(--plugin-shadow-xs);
}


input[type="checkbox"] {
    border-radius:
        7px;
}


input[type="radio"] {
    border-radius:
        50%;
}


input[type="checkbox"]:hover,
input[type="radio"]:hover {
    border-color:
        var(--plugin-accent);

    transform:
        scale(1.04);
}


input[type="checkbox"]:checked,
input[type="radio"]:checked {
    border-color:
        var(--plugin-accent);

    background:
        var(--plugin-accent);
}


/* Preserve existing checkmark visibility */

input[type="checkbox"]:checked::after {
    border-color:
        #ffffff;
}


input[type="radio"]:checked::after {
    background:
        #ffffff;
}


/* ==========================================================================
   Cards
   ========================================================================== */

card-book {
    gap:
        18px;
}


card-box {
    position:
        relative;

    padding:
        0;

    border:
        1px solid var(--plugin-border);

    border-radius:
        var(--plugin-radius-xs);

    background:
        var(--plugin-bg);

    box-shadow:
        var(--plugin-shadow-sm);

    overflow:
        hidden;
}


card-box > * {
    padding:
        14px 16px;
}


card-box > card-label {
    min-height:
        64px;

    padding:
        14px 18px;

    border-top:
        1px solid var(--plugin-border);

    background:
        var(--plugin-surface-soft);

    font-weight:
        600;
}


card-box:hover {
    border-color:
        rgba(15, 23, 42, 0.12);

    background:
        var(--plugin-surface);

    box-shadow:
        var(--plugin-shadow-lg);

    transform:
        translateY(-3px);
}


card-box:active,
card-box.selected {
    border-color:
        rgba(37, 99, 235, 0.20);

    background:
        var(--plugin-surface);

    box-shadow:
        var(--plugin-shadow-md);

    transform:
        translateY(0);
}


/* Selected accent */

card-box.selected::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        18px;

    right:
        18px;

    height:
        3px;

    border-radius:
        0 0 999px 999px;

    background:
        var(--plugin-accent);

    animation:
        plugin-selected-enter
        220ms
        var(--plugin-ease-emphasized);
}


@keyframes plugin-selected-enter {
    from {
        opacity:
            0;

        transform:
            scaleX(0.4);
    }

    to {
        opacity:
            1;

        transform:
            scaleX(1);
    }
}


/* ==========================================================================
   Lists
   ========================================================================== */

list-box {
    border:
        1px solid var(--plugin-border);

    border-radius:
        var(--plugin-radius);

    box-shadow:
        var(--plugin-shadow-sm);

    overflow:
        hidden;
}


list-item {
    min-height:
        52px;

    padding:
        10px 14px;

    border-bottom:
        1px solid var(--plugin-border);

    background:
        var(--plugin-bg);

    position:
        relative;
}


list-item > * {
    padding:
        6px;
}

list-item > span {
    display: flex;
    flex-direction: column;
}

list-item:hover {
    background:
        var(--plugin-surface-hover);

    transform:
        translateX(2px);
}


list-item:active,
list-item.selected {
    background:
        var(--plugin-surface-active);
}


list-item.selected::before,
list-item:focus-visible::before {
    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        9px;

    bottom:
        9px;

    width:
        3px;

    border-radius:
        0 999px 999px 0;

    background:
        var(--plugin-accent);

    animation:
        plugin-list-selection
        180ms
        var(--plugin-ease-emphasized);
}


@keyframes plugin-list-selection {
    from {
        opacity:
            0;

        transform:
            scaleY(0.5);
    }

    to {
        opacity:
            1;

        transform:
            scaleY(1);
    }
}


/* ==========================================================================
   Dialog — Modern Open / Close
   ========================================================================== */

dialog {
    width:
        min(640px, calc(100vw - 32px));

    max-width:
        calc(100vw - 32px);

    max-height:
        calc(100vh - 32px);

    padding:
        28px;

    border:
        1px solid var(--plugin-border);

    border-radius:
        var(--plugin-radius-xl);

    background:
        var(--plugin-surface);

    box-shadow:
        var(--plugin-shadow-xl);

    overflow:
        auto;

    /*
     * The dialog transitions both its visual properties and its
     * discrete display/overlay state.
     */
    opacity: 0;

    transform:
        translateY(12px)
        scale(0.96);

    transition:
        opacity 220ms var(--plugin-ease),
        transform 280ms var(--plugin-ease-emphasized),
        overlay 280ms var(--plugin-ease-emphasized) allow-discrete,
        display 280ms var(--plugin-ease-emphasized) allow-discrete;
}


/* Open state */

dialog[open] {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


/* Initial state when dialog.showModal() / show() opens it */

@starting-style {
    dialog[open] {
        opacity: 0;

        transform:
            translateY(14px)
            scale(0.96);
    }
}


dialog::backdrop {
    background:
        rgba(15, 23, 42, 0);

    backdrop-filter:
        blur(0);

    -webkit-backdrop-filter:
        blur(0);

    transition:
        background-color 220ms var(--plugin-ease),
        backdrop-filter 280ms var(--plugin-ease),
        -webkit-backdrop-filter 280ms var(--plugin-ease);
}


dialog[open]::backdrop {
    background:
        rgba(15, 23, 42, 0.32);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


@starting-style {
    dialog[open]::backdrop {
        background:
            rgba(15, 23, 42, 0);

        backdrop-filter:
            blur(0);

        -webkit-backdrop-filter:
            blur(0);
    }
}


/* ==========================================================================
   Dialog Content Micro-animation
   ========================================================================== */

dialog > * {
    opacity: 0;

    transform:
        translateY(4px);

    transition:
        opacity 180ms var(--plugin-ease),
        transform 220ms var(--plugin-ease-emphasized);
}


dialog[open] > * {
    opacity: 1;

    transform:
        translateY(0);
}


/*
 * The slight delay creates a layered entrance without
 * requiring any new classes.
 */

dialog[open] > :nth-child(1) {
    transition-delay: 20ms;
}

dialog[open] > :nth-child(2) {
    transition-delay: 40ms;
}

dialog[open] > :nth-child(3) {
    transition-delay: 60ms;
}

dialog[open] > :nth-child(4) {
    transition-delay: 80ms;
}

dialog[open] > :nth-child(5) {
    transition-delay: 100ms;
}


/* ==========================================================================
   Dialog Close
   ========================================================================== */

/*
 * When the dialog loses [open], the normal transition runs in reverse:
 *
 * opacity: 1 → 0
 * scale:   1 → .96
 * y:       0 → 12px
 *
 * This produces a softer "fall away" instead of disappearing.
 */

dialog:not([open]) {
    opacity: 0;

    transform:
        translateY(12px)
        scale(0.96);
}


/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    dialog,
    dialog::backdrop,
    dialog > * {
        transition:
            none !important;

        animation:
            none !important;
    }
}

/* ==========================================================================
   Fieldset
   ========================================================================== */

fieldset {
    padding:
        20px;

    border:
        1px solid var(--plugin-border);

    border-radius:
        var(--plugin-radius);

    background:
        var(--plugin-surface);
}


legend {
    padding:
        12px;

    border:
        1px solid var(--plugin-border);

    border-radius:
        var(--plugin-radius-xs);

    background:
        var(--plugin-surface);

    font-weight:
        600;
}


/* ==========================================================================
   Tables
   ========================================================================== */

table {
    border-collapse:
        separate;

    border-spacing:
        0;

    overflow:
        hidden;

    border:
        1px solid var(--plugin-border);

    border-radius:
        var(--plugin-radius);

    background:
        var(--plugin-bg);

    box-shadow:
        var(--plugin-shadow-sm);
}


th,
td {
    padding:
        13px 15px;

    border:
        0;

    border-bottom:
        1px solid var(--plugin-border);
}


th {
    background:
        var(--plugin-surface-soft);

    color:
        var(--plugin-text-muted);

    font-size:
        0.9em;

    font-weight:
        600;

    letter-spacing:
        0.01em;
}


tbody tr:last-child td {
    border-bottom:
        0;
}


tbody tr {
    transition:
        background-color
        var(--plugin-duration-fast)
        var(--plugin-ease);
}


tbody tr:hover {
    background:
        var(--plugin-surface-hover);
}


tr:nth-child(even) {
    background: var(--plugin-surface-hover);
}


/* ==========================================================================
   HR
   ========================================================================== */

hr {
    height:
        1px;

    margin:
        24px 0;

    background:
        var(--plugin-border);

    opacity:
        1;
}


/* ==========================================================================
   Scrollbars
   ========================================================================== */

vertical-scroll,
horizontal-scroll {
    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(100, 116, 139, 0.35)
        transparent;
}


vertical-scroll::-webkit-scrollbar,
horizontal-scroll::-webkit-scrollbar {
    width:
        10px;

    height:
        10px;
}


vertical-scroll::-webkit-scrollbar-track,
horizontal-scroll::-webkit-scrollbar-track {
    background:
        transparent;
}


vertical-scroll::-webkit-scrollbar-thumb,
horizontal-scroll::-webkit-scrollbar-thumb {
    border:
        3px solid transparent;

    border-radius:
        999px;

    background-clip:
        padding-box;

    background-color:
        rgba(100, 116, 139, 0.35);
}


vertical-scroll::-webkit-scrollbar-thumb:hover,
horizontal-scroll::-webkit-scrollbar-thumb:hover {
    background-color:
        rgba(100, 116, 139, 0.55);
}


/* ==========================================================================
   Focus
   ========================================================================== */

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
list-item:focus-visible,
card-box:focus-visible {
    outline:
        2px solid var(--plugin-accent);

    outline-offset:
        3px;

    box-shadow:
        0 0 0 4px var(--plugin-accent-soft);
}


/* ==========================================================================
   Selection
   ========================================================================== */

::selection {
    background:
        rgba(37, 99, 235, 0.16);
}


/* ==========================================================================
   Application Entrance
   ========================================================================== */

body > main {
    animation:
        plugin-main-enter
        300ms
        var(--plugin-ease-emphasized)
        both;
}


@keyframes plugin-main-enter {
    from {
        opacity:
            0;

        transform:
            translateY(5px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }
}


/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }
}


/* ==========================================================================
   Touch Devices
   ========================================================================== */

@media (hover: none) {
    button:hover:not(:disabled),
    input[type="submit"]:hover:not(:disabled),
    input[type="button"]:hover:not(:disabled),
    input[type="reset"]:hover:not(:disabled),
    card-box:hover,
    list-item:hover {
        transform:
            none;
    }
}


/* ==========================================================================
   Forced Colors
   ========================================================================== */

@media (forced-colors: active) {
    button,
    input,
    select,
    textarea,
    card-box,
    list-box,
    list-item,
    dialog,
    table {
        box-shadow:
            none;
    }

    card-box::before,
    list-item::before {
        display:
            none;
    }
}


/* Firefox */

html,
body,
vertical-scroll,
horizontal-scroll {
    scrollbar-width:
        thin;

    scrollbar-color:
        var(--plugin-scrollbar-thumb)
        var(--plugin-scrollbar-track);
}


/* Chromium / WebKit */

html::-webkit-scrollbar,
body::-webkit-scrollbar,
vertical-scroll::-webkit-scrollbar,
horizontal-scroll::-webkit-scrollbar {
    width:
        var(--plugin-scrollbar-size);

    height:
        var(--plugin-scrollbar-size);
}


/* Track */

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
vertical-scroll::-webkit-scrollbar-track,
horizontal-scroll::-webkit-scrollbar-track {
    background:
        var(--plugin-scrollbar-track);
}


/* Thumb */

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
vertical-scroll::-webkit-scrollbar-thumb,
horizontal-scroll::-webkit-scrollbar-thumb {
    border:
        3px solid transparent;

    border-radius:
        999px;

    background-color:
        var(--plugin-scrollbar-thumb);

    background-clip:
        padding-box;

    transition:
        background-color
        180ms
        cubic-bezier(0.2, 0, 0, 1);
}


/* Hover */

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
vertical-scroll::-webkit-scrollbar-thumb:hover,
horizontal-scroll::-webkit-scrollbar-thumb:hover {
    background-color:
        var(--plugin-scrollbar-thumb-hover);
}


/* Active */

html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active,
vertical-scroll::-webkit-scrollbar-thumb:active,
horizontal-scroll::-webkit-scrollbar-thumb:active {
    background-color:
        rgba(100, 116, 139, 0.68);
}


/* Smaller scrollbar on touch devices */

@media (pointer: coarse) {
    :root {
        --plugin-scrollbar-size:
            8px;
    }
}


/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    html::-webkit-scrollbar-thumb,
    body::-webkit-scrollbar-thumb,
    vertical-scroll::-webkit-scrollbar-thumb,
    horizontal-scroll::-webkit-scrollbar-thumb {
        transition:
            none;
    }
}