/* Formularios gráficos. Appearance and size are independent:
   input_visual input_h3; input_visual input_visual_group input_h3.
   All component selectors are flat and can be used in any page. */
:root { --visual-radius: 12px; }
.panel_visual {
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    overflow: hidden;
    padding: 24px;
    border: 1px solid #43566b;
    border-radius: var(--visual-radius);
    background: radial-gradient(ellipse at 50% 12%, #102b40 0, transparent 52%), linear-gradient(145deg, #19222b, #151c22);
    color: #c2d2e8;
}
.panel_visual::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -44px;
    left: 50%;
    width: min(100%, 310px);
    height: 310px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: repeating-radial-gradient(circle, transparent 0 36px, #007cc52b 37px 38px, transparent 39px 40px);
    mask-image: linear-gradient(#000, #000 65%, transparent);
    pointer-events: none;
}
/* Optional split background: decoration only in the header; dark gray below.
   Add/remove fondo_2 on the same panel. Adjust the header height when needed. */
.fondo_2 { background: #202325; }
.fondo_2::before {
    top: 0;
    left: 0;
    width: 100%;
    height: var(--fondo-cabecera-altura, 110px);
    transform: none;
    border-radius: 0;
    background: radial-gradient(ellipse at 50% 100%, #12344b 0, transparent 75%), repeating-radial-gradient(circle at 50% 100%, transparent 0 38px, #43566b66 39px 40px, transparent 41px 42px), #202325;
    mask-image: none;
}
.input_visual {
    box-sizing: border-box !important;
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0 !important;
    padding: 0 .75em !important;
    border: 1px solid #43566b !important;
    border-radius: var(--visual-radius) !important;
    background: rgba(255, 255, 255, .02) !important;
    color: #c2d2e8 !important;
    color-scheme: dark;
    font-family: inherit;
    line-height: normal;
    text-align: left;
    box-shadow: none !important;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
/* Visual sizes: taller boxes with restrained text. Legacy input_general sizes stay unchanged. */
.input_visual.input_h1, .button_visual.input_h1 { height: 50px !important; font-size: 16px !important; line-height: 1.4; }
.input_visual.input_h2, .button_visual.input_h2 { height: 44px !important; font-size: 16px !important; line-height: 1.4; }
.input_visual.input_h3, .button_visual.input_h3 { height: 36px !important; font-size: 14px !important; line-height: 1.4; }
.input_visual.input_h4, .button_visual.input_h4 { height: 28px !important; font-size: 12px !important; line-height: 1.4; }
.input_visual.input_h5, .button_visual.input_h5 { height: 24px !important; font-size: 12px !important; line-height: 1.4; }
.input_visual::placeholder { color: #a6b8cc; opacity: 1; }
.input_visual:focus, .input_visual:focus-within { border-color: #008dff !important; box-shadow: 0 0 0 2px #008dff26 !important; }
.input_visual:disabled, .input_visual_group:has(:disabled) { opacity: .5; cursor: not-allowed; }
.input_visual[aria-invalid="true"], .input_visual:user-invalid, .input_visual_group:has(:user-invalid) { border-color: #f17d87 !important; }
.input_visual[readonly] { color: #9cacc0 !important; }
.input_visual_group { display: flex; align-items: center; gap: .6em; }
.input_visual_control {
    box-sizing: border-box !important;
    display: block !important;
    flex: 1;
    min-width: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none;
    box-shadow: none !important;
    background: transparent !important;
    color: inherit !important;
    font: inherit !important;
    line-height: normal !important;
}
.input_visual_control::placeholder { color: #a6b8cc; opacity: 1; }
.textarea_visual { min-height: 96px; padding: .6em .75em !important; resize: vertical; }
.form_visual_icon { width: 1.15em; height: 1.15em; flex: 0 0 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.form_visual_field { margin-bottom: 10px !important; min-width: 0; }
.form_visual_actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.form_visual_columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 12px; }
.form_visual_label { display: flex; align-items: center; gap: 8px; margin: 8px 0 5px; color: #c2d2e8; font-size: 14px; cursor: pointer; }
.form_visual { margin: 0; }
.checkbox_visual { position: static !important; opacity: 1 !important; pointer-events: auto !important; appearance: auto; width: 18px; height: 18px; margin: 0; accent-color: #008dff; }
.button_visual { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: .65em; margin: 0; padding: 0 .75em; border: 1px solid #009dff; border-radius: var(--visual-radius); background: linear-gradient(120deg, #0093ff, #007cff); color: #fff; font-family: inherit; font-weight: 600; line-height: normal; text-transform: none; letter-spacing: normal; box-shadow: none; cursor: pointer; }
.button_visual:hover { filter: brightness(1.12); }
.button_visual:disabled { opacity: .5; cursor: not-allowed; }
.button_visual:focus-visible, .button_visual_icon:focus-visible, .checkbox_visual:focus-visible { outline: 2px solid #65caff; outline-offset: 3px; }
.button_visual_green { border-color: #008b00; background: linear-gradient(120deg, #008b00, #007700); }
.button_visual_icon { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; align-self: stretch; flex: 0 0 1.7em; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.button_visual_icon[aria-pressed="true"] { color: #57baff; }
/* The native select remains usable until JS progressively enhances it. */
.select_visual { appearance: none; cursor: pointer; padding-right: 2em !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23c2d2e8' stroke-width='2'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right .7em center !important; }
.select_visual_native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.select_visual_trigger { display: flex; align-items: center; gap: .6em; font-family: inherit; cursor: pointer; }
.select_visual_trigger::after { content: ''; flex: 0 0 6px; width: 6px; height: 6px; margin-left: auto; border-right: 2px solid; border-bottom: 2px solid; transform: translateY(-2px) rotate(45deg); }
.select_visual_trigger[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }
.select_visual_value { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.select_visual_menu { box-sizing: border-box; position: fixed; z-index: 10050; margin: 0; padding: 5px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #43566b; border-radius: var(--visual-radius); background: #192530; color: #c2d2e8; box-shadow: 0 12px 32px #0007; color-scheme: dark; scrollbar-width: thin; }
.select_visual_menu[hidden] { display: none !important; }
.select_visual_option { box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 32px; padding: 7px 10px; border: 0; border-radius: var(--visual-radius); background: transparent; color: inherit; font: inherit; line-height: 1.35; text-align: left; white-space: normal; overflow-wrap: anywhere; cursor: pointer; }
.select_visual_option:hover, .select_visual_option[data-active="true"] { background: #123d5b; color: #fff; }
.select_visual_option[aria-selected="true"] { background: #0d3856; color: #63c6ff; }
.select_visual_option[aria-selected="true"]::after { content: '✓'; margin-left: auto; }
.select_visual_option[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.select_visual_option[hidden] { display: none; }
.select_visual_error { display: block; margin-top: 5px; color: #f17d87; font-size: 12px; }
.select_visual_error[hidden] { display: none; }