/**
 * AgendaProfesional Design Tokens
 * Soft UI Evolution — tema claro por defecto
 */

:root {
    /* Semantic colors (claro) */
    --color-primary: #3d4f63;
    --color-primary-hover: #6b7c8f;
    --color-on-primary: #f8f1e1;
    --color-secondary: #f3f5f7;
    --color-on-secondary: #1a1f26;
    --color-accent: #3d4f63;
    --color-accent-hover: #2f3e4f;
    --color-on-accent: #f8f1e1;
    --color-background: #f3f5f7;
    --color-foreground: #333333;
    --color-muted: #e8edf2;
    --color-muted-foreground: #6c757d;
    --color-card: #ffffff;
    --color-card-foreground: #333333;
    --color-border: #ddd;
    --color-border-subtle: #d7dee6;
    --color-destructive: #c74f6d;
    --color-destructive-hover: #a04058;
    --color-on-destructive: #ffffff;
    --color-ring: #3d4f63;
    --color-success: #7eb77e;
    --color-success-bg: #c5ffce;
    --color-error-bg: #ffb6b6;
    --color-warning: #e67e22;
    --color-warning-muted: #cccccc;

    /* Legacy aliases */
    --primary-bg: #f3f5f7;
    --secondary-bg: #e8edf2;
    --button-bg: #3d4f63;
    --button-hover-bg: #6b7c8f;
    --button-text-color: #f8f1e1;
    --button-hover-text-color: #f8f1e1;
    --text-color: #333333;
    --input-bg: #ffffff;
    --input-fg: #1a1f26;
    --input-border: #ddd;
    --input-placeholder: #6c757d;
    --border-color: #ddd;
    --shadow-color: rgba(0, 0, 0, 0.2);
    --danger-bg: #c74f6d;
    --danger-hover-bg: #a04058;
    --success-bg: #c5ffce;
    --error-bg: #ffb6b6;
    --disabled-bg: #e9ecef;
    --disabled-text: #6c757d;
    --calendar-bg: #ddd;
    --day-bg: #e8edf2;
    --day-border: #c5ced9;
    --table-row-even: #f8fafb;
    --table-row-odd: #ffffff;
    --calendar-grid-border: #d7dee6;
    --header-text-color: #1a1f26;
    --event-text-color: #1a1f26;
    --slot-text-color: #1a1f26;
    --highlight-bg: rgba(61, 79, 99, 0.12);
    --highlight-border: #3d4f63;

    /* Typography */
    --font-heading: "Figtree", system-ui, sans-serif;
    --font-body: "Noto Sans", system-ui, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* Radius & shadow */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;
    --shadow-sm: 0 1px 2px rgba(26, 31, 38, 0.08);
    --shadow-md: 0 4px 12px rgba(26, 31, 38, 0.1);
    --shadow-lg: 0 8px 24px rgba(26, 31, 38, 0.14);
    --shadow-focus: 0 0 0 3px rgba(61, 79, 99, 0.28);

    /* Motion */
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* Layout */
    --nav-height: 3.5rem;
    --footer-approx: 5.5rem;
    --list-page-height: calc(100dvh - var(--nav-height) - var(--footer-approx));
    --content-max: 1400px;
    --touch-min: 44px;
}

.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    line-height: 1;
    vertical-align: -0.125em;
}

.icon[hidden] {
    display: none !important;
}

.icon svg {
    width: 1em;
    height: 1em;
    display: block;
    fill: currentColor;
}

.icon-spin {
    animation: icon-spin 0.8s linear infinite;
}

@keyframes icon-spin {
    to {
        transform: rotate(360deg);
    }
}

/*
 * Campos de texto: fondo claro y texto oscuro, también en tema oscuro.
 * Bootstrap .form-control:focus usa --bs-body-color (claro en dark) sobre
 * fondo claro, y color-scheme: dark pinta el valor en blanco mientras el
 * campo está enfocado. Al perder el foco el color propio vuelve a verse.
 */
html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="image"]),
html body textarea,
html body select,
html body .form-control,
html body .form-select {
    color-scheme: light;
    color: var(--input-fg, #1a1f26);
    background-color: var(--input-bg, #fff);
    caret-color: var(--input-fg, #1a1f26);
}

html body .form-control:focus,
html body .form-select:focus,
html body .form-control:focus-visible,
html body .form-select:focus-visible,
html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="image"]):focus,
html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="image"]):focus-visible,
html body textarea:focus,
html body textarea:focus-visible,
html body select:focus,
html body select:focus-visible {
    color: var(--input-fg, #1a1f26);
    background-color: var(--input-bg, #fff);
    -webkit-text-fill-color: var(--input-fg, #1a1f26);
    caret-color: var(--input-fg, #1a1f26);
}

html body input:disabled,
html body textarea:disabled,
html body select:disabled,
html body .form-control:disabled,
html body .form-select:disabled {
    color: var(--color-muted-foreground, #6c757d);
    background-color: var(--color-muted, #e9ecef);
    -webkit-text-fill-color: var(--color-muted-foreground, #6c757d);
}

html body .form-control:-webkit-autofill,
html body .form-control:-webkit-autofill:hover,
html body .form-control:-webkit-autofill:focus,
html body .form-select:-webkit-autofill,
html body .form-select:-webkit-autofill:hover,
html body .form-select:-webkit-autofill:focus,
html body input:-webkit-autofill,
html body input:-webkit-autofill:hover,
html body input:-webkit-autofill:focus,
html body textarea:-webkit-autofill,
html body textarea:-webkit-autofill:hover,
html body textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--input-fg, #1a1f26);
    caret-color: var(--input-fg, #1a1f26);
    box-shadow: 0 0 0 1000px var(--input-bg, #fff) inset;
    transition: background-color 99999s ease-out;
}