/* THE ONE BUTTON STYLE OF EVERY FRAMED WINDOW (brief FR item 14, 2026-10-30; his words: «que todos los botones de los modales tengan la estética que llevamos siguiendo en la app»). Every box that view/js/vk_frames.js frames (Bootstrap modals, «En curso»,
   «+ Crear», «Ordenar carpetas»...) wears it; the editors' own dialogs (.ve-dlg, .vkie-dlg, .vv-dlg, .vkal-dlg) are the model and are left as they are.
   THE NUMBERS come from the editors' dialog buttons: height 36 px, padding 0 18 px, radius 8 px, 1 px outline, weight 600 / 700 (view/css/vk_vedit.css .ve-dlgbt button), the green of «Exportar» (--vks-green #25d79f, view/css/vk_eshell.css) with
   its near-black ink (#06281d), and Departure Mono (the app's --vk-departure) as every editor and the meeting draw their labels.
   PRIMARY = filled green, DARK label (never white). SECONDARY = the field of the window with a thin outline. DESTRUCTIVE = the field, a red label and a red outline. CHIPS (a choice among a few) = the same family: same radius and height, the chosen one outlined in the green.
   It replaces view/css/vk_modalkeys.css (the raised keys) inside the framed windows: that sheet leaves a .modal that has .vkfr-keys (view/js/vk_frames.js puts it there). !important and the weight of the selectors: the windows paint their own buttons with ids and classes. */
.vkfr{ --vkb-h: 36px; --vkb-px: 18px; --vkb-r: 8px; --vkb-green: #25d79f; --vkb-ink: #06281d; --vkb-font: var(--vk-departure, "Departure Mono", ui-monospace, Menlo, Consolas, monospace);
    --vkb-field: var(--vk-field, #efeef4); --vkb-fieldh: var(--vk-fieldh, #e9e8ee); --vkb-line: var(--vk-line-strong, #c9c8d4); --vkb-text: var(--vk-text, #16161a); --vkb-red: #c62839; --vkb-redline: rgba(198, 40, 57, .55); --vkfr-px: 36px; }
html[data-theme="dark"] .vkfr{ --vkb-line: rgba(255, 255, 255, .26); --vkb-red: #ff7a8a; --vkb-redline: rgba(255, 122, 138, .5); }
@media (max-width: 560px){ .vkfr{ --vkfr-px: 26px; } }

/* every button that acts (the icon keys, the tabs, the crosses, the toggles, the text links and the little marks inside rows are not these) */
html .vkfr:not(.ve-dlg, .vkie-dlg, .vv-dlg, .vkal-dlg) :is(button, input[type="submit"], input[type="button"], a.btn, label[class*="-btn"], a[class*="-btn"]):not(.close, .clos, [role="tab"], [role="switch"], [aria-pressed], [class*="tab"], [class*="-link"], [class*="textBtn"], [class*="-pick"], [class*="-ico"], [class*="-more"], [class*="-fold"], [class*="-dot"], [class*="-num"], .vkPin, [class*="Tile"], [class*="-thumb"], [class*="-x"], [class*="-seg"], [class*="Opt"], [class*="-opt"], [class*="menuItem"], [class*="-drop"]:not(.vkEc-drop), .vkCan, .chip, .vkBr-add, .vkRem-back, .vkEc-x, .vkOrg-x, .vkAsp-close, .vkAsp-send){
    box-sizing: border-box; height: var(--vkb-h) !important; min-height: var(--vkb-h) !important; padding: 0 var(--vkb-px) !important; border-radius: var(--vkb-r) !important;
    border: 1px solid var(--vkb-line) !important; background: var(--vkb-field) !important; background-image: none !important; color: var(--vkb-text) !important; box-shadow: none !important; text-shadow: none !important; filter: none;
    font: 600 13px/1 var(--vkb-font) !important; letter-spacing: .02em; text-transform: none; white-space: nowrap; cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; transform: none; transition: background .15s ease, border-color .15s ease, filter .15s ease;
}
html .vkfr:not(.ve-dlg, .vkie-dlg, .vv-dlg, .vkal-dlg) :is(button, input[type="submit"], input[type="button"], a.btn, label[class*="-btn"], a[class*="-btn"]):not(.close, .clos, [role="tab"], [role="switch"], [aria-pressed], [class*="tab"], [class*="-link"], [class*="textBtn"], [class*="-pick"], [class*="-ico"], [class*="-more"], [class*="-fold"], [class*="-dot"], [class*="-num"], .vkPin, [class*="Tile"], [class*="-thumb"], [class*="-x"], [class*="-seg"], [class*="Opt"], [class*="-opt"], [class*="menuItem"], [class*="-drop"]:not(.vkEc-drop), .vkCan, .chip, .vkBr-add, .vkRem-back, .vkEc-x, .vkOrg-x, .vkAsp-close, .vkAsp-send):hover:not(:disabled){ background: var(--vkb-fieldh) !important; }
html .vkfr :is(button, input[type="submit"], input[type="button"], a.btn, label[class*="-btn"], a[class*="-btn"]):is(:disabled, [disabled]):not(.close, .clos){ opacity: .5; cursor: default; }

/* primary */
html .vkfr:not(.ve-dlg, .vkie-dlg, .vv-dlg, .vkal-dlg) :is(.is-main, .btn-primary, .btn-success, .go, .vkEc-go, .vkAcc-create, .vkAcc-save, .vkOrg-all, .vkOrg-go, .vkNs-go, .vkAsk-send, button[type="submit"], input[type="submit"]:not([value="Delete" i], [value^="Eliminar" i], [value^="Borrar" i])):not(.close, .clos, [data-dismiss], [name*="delete"], [data-role="destructive"], .no){
    background: var(--vkb-green) !important; border-color: var(--vkb-green) !important; color: var(--vkb-ink) !important; font-weight: 700 !important;
}
html .vkfr:not(.ve-dlg, .vkie-dlg, .vv-dlg, .vkal-dlg) :is(.is-main, .btn-primary, .btn-success, .go, .vkEc-go, .vkAcc-create, .vkAcc-save, .vkOrg-all, .vkOrg-go, .vkNs-go, .vkAsk-send, button[type="submit"], input[type="submit"]:not([value="Delete" i], [value^="Eliminar" i], [value^="Borrar" i])):not(.close, .clos, [data-dismiss], [name*="delete"], [data-role="destructive"], .no):hover:not(:disabled){ background: var(--vkb-green) !important; filter: brightness(1.08); }
html .vkfr :is(.is-main, .btn-primary, .go, .vkEc-go, .vkOrg-all, .vkNs-go) *{ color: inherit !important; }

/* destructive: the field, a red label, a red outline. THE ROLE decides: a key that loses work carries data-role="destructive" in its own code (the editors' dialog builders take danger: true on a button spec; the templates and windows set the attribute). The class names and the words after it are the fallback for windows not marked yet */
html .vkfr:not(.ve-dlg, .vkie-dlg, .vv-dlg, .vkal-dlg) :is([data-role="destructive"], .btn-danger, [class*="--danger"]:not([class*="textBtn"]), [name*="delete"], .vkEc-drop, .vkEc-yes, input[type="submit"][value="Delete" i], input[type="submit"][value^="Eliminar" i], input[type="submit"][value^="Borrar" i]):not(.close, .clos){
    background: var(--vkb-field) !important; border-color: var(--vkb-redline) !important; color: var(--vkb-red) !important;
}
html .vkfr:not(.ve-dlg, .vkie-dlg, .vv-dlg, .vkal-dlg) :is([data-role="destructive"], .btn-danger, [class*="--danger"]:not([class*="textBtn"]), [name*="delete"], .vkEc-drop, .vkEc-yes):not(.close, .clos):hover:not(:disabled){ background: color-mix(in srgb, var(--vkb-red) 14%, var(--vkb-field)) !important; }

/* the editors' own dialogs (.ve-dlg .vkie-dlg .vv-dlg .vkal-dlg) keep their buttons' shape and size; only the role turns a key red there, even when it is the dialog's main key (the green fill gives way: the weight of this selector beats the editors' own `.is-main` rules, loaded after this sheet) */
html .vkfr:is(.ve-dlg, .vkie-dlg, .vv-dlg, .vkal-dlg) [data-role="destructive"]{ background: transparent !important; border-color: var(--vkb-redline) !important; color: var(--vkb-red) !important; filter: none; }
html .vkfr.vkie-dlg [data-role="destructive"]{ background: var(--ie-field) !important; }          /* the image and label editors fill their secondary keys: so does the red one */
html .vkfr.vkal-dlg [data-role="destructive"]{ background: var(--al-field) !important; }
html .vkfr:is(.ve-dlg, .vkie-dlg, .vv-dlg, .vkal-dlg) [data-role="destructive"]:hover:not(:disabled){ background: color-mix(in srgb, var(--vkb-red) 14%, transparent) !important; filter: none; }

/* chips: the choices among a few (the sizes of a new document, the frame rates...) */
html .vkfr:not(.ve-dlg, .vkie-dlg, .vv-dlg, .vkal-dlg) .chip{
    box-sizing: border-box; height: var(--vkb-h); padding: 0 var(--vkb-px); border-radius: var(--vkb-r); border: 1px solid var(--vkb-line); background: var(--vkb-field); color: var(--vkb-text);
    font: 600 13px/1 var(--vkb-font); letter-spacing: .02em; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}
html .vkfr:not(.ve-dlg, .vkie-dlg, .vv-dlg, .vkal-dlg) .chip.on{ border-color: var(--vkb-green); color: var(--vkb-green); background: color-mix(in srgb, var(--vkb-green) 12%, var(--vkb-field)); }
html:not([data-theme="dark"]) .vkfr .chip.on{ color: #0c7a58; border-color: #0c7a58; }

/* checkboxes: the editors' square, the green when it is on (no browser-blue box) */
html .vkfr:not(.ve-dlg, .vkie-dlg, .vv-dlg, .vkal-dlg) input[type="checkbox"]:not([class*="switch"], [class*="toggle"], [class*="Toggle"], [hidden]){
    -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 18px; height: 18px; min-width: 18px; margin: 0 8px 0 0; padding: 0; border: 1px solid var(--vkb-line); border-radius: 5px; background-color: var(--vkb-field); background-position: center; background-repeat: no-repeat; cursor: pointer; vertical-align: middle; position: relative; flex: 0 0 auto;
}
html .vkfr:not(.ve-dlg, .vkie-dlg, .vv-dlg, .vkal-dlg) input[type="checkbox"]:not([class*="switch"], [class*="toggle"], [class*="Toggle"], [hidden]):checked{
    background-color: var(--vkb-green); border-color: var(--vkb-green);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l3 3 5.8-6.4' fill='none' stroke='%2306281d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html .vkfr input[type="checkbox"]:focus-visible{ outline: 2px solid var(--vkb-green); outline-offset: 2px; }

/* THE SIDE AIR (item 15: «que deje más padding en los lados de los modales, que queda muy apretado el texto sino»): --vkfr-px (36 px, 26 on a phone). view/js/vk_frames.js gives that to a box whose own side padding is smaller;
   «En curso» (its rows and heads carry the padding, not the box) is set here */
.vkEc-win.vkfr .vkEc-head{ padding-left: var(--vkfr-px); padding-right: calc(var(--vkfr-px) - 6px); }
.vkEc-win.vkfr .vkEc-tabs{ padding-left: var(--vkfr-px); padding-right: var(--vkfr-px); }
.vkEc-win.vkfr .vkEc-web{ padding-left: var(--vkfr-px); padding-right: var(--vkfr-px); }
.vkEc-win.vkfr .vkEc-row{ padding-left: var(--vkfr-px); padding-right: var(--vkfr-px); }
.vkEc-win.vkfr .vkEc-foot{ padding-left: var(--vkfr-px); padding-right: var(--vkfr-px); padding-bottom: 18px; }
.vkEc-win.vkfr .vkEc-empty{ padding-left: var(--vkfr-px); padding-right: var(--vkfr-px); }
.vkEc-win.vkfr .vkEc-act{ max-width: 270px; }