/* THE WINDOWS' BUTTONS AS KEYS (2026-10-08). His words: "aplica ese estilo de boton a todos los botones de los modales. Respeta el rol del boton y su función." - the raised
 * key of «Publicar cambios» and the selection's keys (view/css/vk_settings.css): a face with a line on top and a lighter edge at its foot, a bezel with a hairline, a shadow under it.
 *
 * Each button keeps its role, measured on every window (2026-10-08, data/test-tools/rd/r24_modal_buttons.py):
 *   - the main action of a window (Guardar, Publicar, Siguiente, Recoger, Mover, Send, Create, Save...: .is-main, .btn-primary, an old window's submit and its «update_..._btn»)
 *     - a key in the app's blue; a button that only closes the window (data-dismiss) is never that, whatever its class;
 *   - «Crear y copiar enlace» / «Guardar» of the people windows (.vkAcc-create, .vkAcc-save), violet as they were - a violet key;
 *   - a destructive one (.btn-danger, *--danger, an old window's «delete...» submit) - a red key;
 *   - every other button that acts (Atrás, Cancelar, Probar, Comprobar, Copiar enlace, Entrar, Close...) - the neutral key, grey in the dark look, light in the light one.
 * Left as they are, because they are not keys by role: the close cross (.close, .clos), the tabs, the switches and the toggles (aria-pressed: «Podrá», «Claro | Oscuro»), the buttons
 * that read as text (*-link, *textBtn, «+ Añadir color», «← Volver»), the rows of a list (*-pick, the people rows), and the small round marks inside chips (*-drop).
 * Only the look changes: the size, the padding and the border's width stay (its colour goes transparent), so no window moves. !important because the installation's sheet
 * (view/custom/styles_custom.php, printed after this one) paints .gradientformbuttons, and many windows set theirs with ids. Linked last (inc/header.php).
 */
html body .modal :where(button, input[type="submit"], input[type="button"], .btn):not(.close, .clos, [role="tab"], [role="switch"], [aria-pressed], [class*="-tab"], [class*="-link"], [class*="textBtn"], .btn-link, .vkBr-add, .vkRem-back, [class*="-pick"], .vkPeople-toggle, [class*="-drop"], .vkCan){
    border-color: transparent !important; border-radius: 10px !important; text-shadow: none !important;
    background: linear-gradient(180deg, #fdfdfe 0%, #f1f3f6 100%) !important; color: #2b2f36 !important;
    box-shadow: inset 0 1.5px 0 #ffffff, inset 0 -1px 0 rgba(255, 255, 255, .9),
        0 0 0 1px #d6dbe2, 0 0 0 3px #eef1f4, 0 -1px 0 3px #dfe4ea, 0 6px 12px 1px rgba(30, 45, 65, .16) !important;
    transition: background .15s ease, color .15s ease, filter .15s ease, transform .15s ease;
}
html[data-theme="dark"] body .modal :where(button, input[type="submit"], input[type="button"], .btn):not(.close, .clos, [role="tab"], [role="switch"], [aria-pressed], [class*="-tab"], [class*="-link"], [class*="textBtn"], .btn-link, .vkBr-add, .vkRem-back, [class*="-pick"], .vkPeople-toggle, [class*="-drop"], .vkCan){
    background: linear-gradient(180deg, #303139 0%, #2a2b32 100%) !important; color: #e2e4ec !important;
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .09), inset 0 -1px 0 rgba(255, 255, 255, .05),
        0 0 0 1px #16161b, 0 0 0 3px #25262c, 0 -1px 0 3px #34353d, 0 6px 12px 1px rgba(0, 0, 0, .42) !important;
}
html body .modal :where(button, input[type="submit"], input[type="button"], .btn):not(.close, .clos, [role="tab"], [role="switch"], [aria-pressed], [class*="-tab"], [class*="-link"], [class*="textBtn"], .btn-link, .vkBr-add, .vkRem-back, [class*="-pick"], .vkPeople-toggle, [class*="-drop"], .vkCan, .is-main, .btn-primary, .btn-success, .vkAcc-create, .vkAcc-save, .btn-danger, [class*="--danger"], .gradientformbuttons[type="submit"], [id^="update_"][id*="_btn"], [name*="delete"]):not([disabled]):hover{
    background: linear-gradient(180deg, #ffffff 0%, #f4f6f8 100%) !important;
}
html[data-theme="dark"] body .modal :where(button, input[type="submit"], input[type="button"], .btn):not(.close, .clos, [role="tab"], [role="switch"], [aria-pressed], [class*="-tab"], [class*="-link"], [class*="textBtn"], .btn-link, .vkBr-add, .vkRem-back, [class*="-pick"], .vkPeople-toggle, [class*="-drop"], .vkCan, .is-main, .btn-primary, .btn-success, .vkAcc-create, .vkAcc-save, .btn-danger, [class*="--danger"], .gradientformbuttons[type="submit"], [id^="update_"][id*="_btn"], [name*="delete"]):not([disabled]):hover{
    background: linear-gradient(180deg, #34353e 0%, #2d2e36 100%) !important; color: #ffffff !important;
}

/* the main action: the app's blue key (the installation's own colour where it has one) */
html body .modal :is(.is-main, .btn-primary, .btn-success, .gradientformbuttons[type="submit"], [id^="update_"][id*="_btn"], #masiv .modal-body button[data-target], #masiv .modal-body button[title]):not(.close, .clos, [role="tab"], [class*="-link"], [class*="textBtn"], [data-dismiss], [name*="delete"]){
    --vk-key: var(--vk-brand, #0f52ff);
    background: linear-gradient(180deg, color-mix(in srgb, var(--vk-key) 78%, #ffffff) 0%, var(--vk-key) 55%, color-mix(in srgb, var(--vk-key) 86%, #000000) 100%) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .32), inset 0 -1px 0 rgba(255, 255, 255, .14),
        0 0 0 1px color-mix(in srgb, var(--vk-key) 75%, #000000), 0 0 0 3px color-mix(in srgb, var(--vk-key) 12%, #ffffff),
        0 -1px 0 3px color-mix(in srgb, var(--vk-key) 22%, #ffffff), 0 6px 12px 1px color-mix(in srgb, var(--vk-key) 26%, transparent) !important;
}
html[data-theme="dark"] body .modal :is(.is-main, .btn-primary, .btn-success, .gradientformbuttons[type="submit"], [id^="update_"][id*="_btn"], #masiv .modal-body button[data-target], #masiv .modal-body button[title]):not(.close, .clos, [role="tab"], [class*="-link"], [class*="textBtn"], [data-dismiss], [name*="delete"]){
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(255, 255, 255, .12),
        0 0 0 1px color-mix(in srgb, var(--vk-key) 55%, #000000), 0 0 0 3px color-mix(in srgb, var(--vk-key) 22%, #1e1e24),
        0 -1px 0 3px color-mix(in srgb, var(--vk-key) 38%, #1e1e24), 0 6px 12px 1px rgba(0, 0, 0, .42) !important;
}
/* the people windows' own violet */
html body .modal :is(.vkAcc-create, .vkAcc-save){ --vk-key: var(--vk-violet, #6e1fd1); }
html body .modal :is(.vkAcc-create, .vkAcc-save):not([disabled]){
    background: linear-gradient(180deg, color-mix(in srgb, var(--vk-key) 78%, #ffffff) 0%, var(--vk-key) 55%, color-mix(in srgb, var(--vk-key) 86%, #000000) 100%) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .32), inset 0 -1px 0 rgba(255, 255, 255, .14),
        0 0 0 1px color-mix(in srgb, var(--vk-key) 75%, #000000), 0 0 0 3px color-mix(in srgb, var(--vk-key) 12%, #ffffff),
        0 -1px 0 3px color-mix(in srgb, var(--vk-key) 22%, #ffffff), 0 6px 12px 1px color-mix(in srgb, var(--vk-key) 26%, transparent) !important;
}
html[data-theme="dark"] body .modal :is(.vkAcc-create, .vkAcc-save):not([disabled]){
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(255, 255, 255, .12),
        0 0 0 1px color-mix(in srgb, var(--vk-key) 55%, #000000), 0 0 0 3px color-mix(in srgb, var(--vk-key) 22%, #1e1e24),
        0 -1px 0 3px color-mix(in srgb, var(--vk-key) 38%, #1e1e24), 0 6px 12px 1px rgba(0, 0, 0, .42) !important;
}
/* a destructive one: red */
html body .modal :is(.btn-danger, [class*="--danger"], [name*="delete"]):not(.close, .clos, [role="tab"], [class*="-link"], [class*="textBtn"]){
    --vk-key: #d32f2f;
    background: linear-gradient(180deg, color-mix(in srgb, var(--vk-key) 78%, #ffffff) 0%, var(--vk-key) 55%, color-mix(in srgb, var(--vk-key) 86%, #000000) 100%) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(255, 255, 255, .12),
        0 0 0 1px color-mix(in srgb, var(--vk-key) 70%, #000000), 0 0 0 3px color-mix(in srgb, var(--vk-key) 14%, #ffffff),
        0 -1px 0 3px color-mix(in srgb, var(--vk-key) 24%, #ffffff), 0 6px 12px 1px color-mix(in srgb, var(--vk-key) 24%, transparent) !important;
}
html body .modal :is(.is-main, .btn-primary, .btn-success, .gradientformbuttons[type="submit"], [id^="update_"][id*="_btn"], .vkAcc-create, .vkAcc-save, .btn-danger, [class*="--danger"], [name*="delete"], #masiv .modal-body button[data-target], #masiv .modal-body button[title]):not(.close, .clos, [role="tab"], [class*="-link"], [class*="textBtn"], [data-dismiss], [disabled]):hover{ filter: brightness(1.08); }

/* every key: pressed sinks a pixel; a disabled one fades */
html body .modal :where(button, input[type="submit"], input[type="button"], .btn):not(.close, .clos, [role="tab"], [role="switch"], [aria-pressed], [class*="-tab"], [class*="-link"], [class*="textBtn"], .btn-link, .vkBr-add, .vkRem-back, [class*="-pick"], .vkPeople-toggle, [class*="-drop"], .vkCan):not([disabled]):active{ transform: translateY(1px); }
html body .modal :where(button, input[type="submit"], input[type="button"], .btn)[disabled]:not(.close, .clos, [role="tab"], [class*="-link"], [class*="textBtn"]){ opacity: .55; filter: none; }
@media (prefers-reduced-motion: reduce){
    html body .modal :where(button, input[type="submit"], input[type="button"], .btn){ transition: none !important; }
    html body .modal :where(button, input[type="submit"], input[type="button"], .btn):active{ transform: none !important; }
}