/* Shared look for buttons and form fields. Buttons use a plain element selector, which is enough to beat Bootstrap's reboot
   (square corners) while the component classes that already exist keep winning wherever they set something. */

:root {
    --ui-primary: #2563eb;
    --ui-primary-2: #7c3aed;
    --ui-border: #cfd5e8;
    --ui-surface: #ffffff;
    --ui-surface-hover: #f2f4ff;
    --ui-text: #29304f;
    --ui-focus: rgba(79, 124, 255, 0.45);
    --ui-radius: 0.7rem;
}

button {
    font: inherit;
    font-weight: 500;
    padding: 0.5rem 1rem;
    color: var(--ui-text);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: 0 1px 2px rgba(31, 41, 90, 0.08);
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 100ms ease;
}

/* Only plain buttons get the pale hover: the ones with their own colours (gradients, chips) keep them. */
button:not([class]):hover:not(:disabled) {
    background: var(--ui-surface-hover);
    border-color: #b6bfe0;
    box-shadow: 0 3px 8px rgba(31, 41, 90, 0.12);
}

button:active:not(:disabled) {
    transform: translateY(1px) scale(0.99);
}

button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

:where(button:focus-visible, a:focus-visible, select:focus-visible, summary:focus-visible) {
    outline: 3px solid var(--ui-focus);
    outline-offset: 2px;
}

/* The main action of a form: filled with the app's colours. */
button[type="submit"] {
    color: #fff;
    font-weight: 600;
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-2));
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

button[type="submit"]:hover:not(:disabled) {
    color: #fff;
    background: linear-gradient(135deg, #1d4ed8, #6d28d9);
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.38);
}

/* A plain submit (no class) hovers like the filled button, not like a pale one. */
button[type="submit"]:not([class]):hover:not(:disabled) {
    background: linear-gradient(135deg, #1d4ed8, #6d28d9);
}

/* Fields */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select) {
    font: inherit;
    padding: 0.5rem 0.7rem;
    color: var(--ui-text);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus, textarea:focus, select:focus) {
    outline: none;
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 3px var(--ui-focus);
}

:where(input[type="checkbox"], input[type="radio"], input[type="range"]) {
    accent-color: var(--ui-primary-2);
}

/* Dark theme */
html[data-theme="dark"] {
    --ui-border: #34406b;
    --ui-surface: #1a1d2e;
    --ui-surface-hover: #232844;
    --ui-text: #e4e8fb;
    --ui-focus: rgba(122, 162, 255, 0.5);
}

@media (prefers-reduced-motion: reduce) {
    button {
        transition: none;
    }
}

/* "← Atrás": the same small pill on every inner screen */
.back-button {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0 0.5rem 0.4rem 0;
    padding: 0.3rem 0.85rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ui-primary);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(31, 41, 90, 0.08);
}

.back-button:hover:not(:disabled) {
    background: var(--ui-surface-hover);
    border-color: var(--ui-primary);
}