/* ============================================================
   forms.css — FORMULARIOS (inputs, selects, textareas, radios)
   ------------------------------------------------------------
   Campos de texto con foco tematizado, catch-all para inputs
   sin type, checkbox/radio con accent-color y los radios
   personalizados (.radio-custom). Los BOTONES van en buttons.css.
   ============================================================ */
html.theme-cg input[type="text"],
html.theme-cg input[type="password"],
html.theme-cg input[type="number"],
html.theme-cg input[type="email"],
html.theme-cg input[type="search"],
html.theme-cg input[type="date"],
html.theme-cg textarea,
html.theme-cg select {
    background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
    border-radius: 8px; padding: 6px 9px; outline: none;
    transition: border-color var(--speed), box-shadow var(--speed);
}
html.theme-cg input:focus, html.theme-cg textarea:focus, html.theme-cg select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
html.theme-cg input::placeholder, html.theme-cg textarea::placeholder { color: var(--muted); opacity: .8; }
html.theme-cg label { color: var(--text); }

/* Inputs genéricos sin type (catch-all). NO incluye `button` para no
   pisar botones con color propio (.btn-accept/.btn-cancel, etc.). */
html.theme-cg input,
html.theme-cg select,
html.theme-cg textarea {
    background-color: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
}
html.theme-cg input[type="checkbox"],
html.theme-cg input[type="radio"] { accent-color: var(--accent); }
html.theme-cg input[type="checkbox"]:checked { accent-color: var(--accent); }

/* Radios personalizados */
html.theme-cg .radio-custom { border-color: var(--border); }
html.theme-cg .radio-custom::after { background-color: var(--accent); }
html.theme-cg .radio-input:checked + .radio-custom { background-color: var(--surface-3); border-color: var(--accent); }