/* =========================================================
   ClinicBai - Syncfusion GLOBAL THEME
   Tabs + Switch + Checkbox + Dropdown selection (soft)
   ========================================================= */

:root {
    --cb-accent: cadetblue;
    --cb-accent-rgb: 95, 158, 160;
    /* soft selection for lists */
    --cb-accent-soft: rgba(var(--cb-accent-rgb), .18);
    --cb-accent-soft-hover: rgba(var(--cb-accent-rgb), .10);
    /* tabs */
    --cb-tab-border: #e5e7eb;
    --cb-tab-inactive-bg: #eef2f5;
    --cb-tab-inactive-txt: #6b7280;
    --cb-tab-active-txt: cadetblue;
    --cb-tab-hover-bg: #f8fafc;
    --cb-tab-hover-border: #cbd5e1;
    /* Primary cadetblue */
    --color-sf-primary: #5F9EA0;
    --color-sf-primary-text-color: #ffffff;
    --color-sf-primary-light: #BFE3E4;
    --color-sf-primary-lighter: #E7F3F3;
    --color-sf-primary-dark: #4E8688; /* hover */
    --color-sf-primary-darker: #3B6D6F; /* active */
    /* Success suave */
    --color-sf-success: #63B37A;
    --color-sf-success-light: #CFEEDD;
    --color-sf-success-lighter: #EAF8F0;
    --color-sf-success-dark: #4C9C62; /* hover */
    --color-sf-success-darker: #3C7E50; /* active */
    /* Danger suave */
    --color-sf-danger: #E07A7A;
    --color-sf-danger-light: #F6D0D0;
    --color-sf-danger-lighter: #FCEBEB;
    --color-sf-danger-dark: #C96565; /* hover */
    --color-sf-danger-darker: #A44E4E; /* active */
    /* Focus rings (para que no salga el azul por defecto) */
    --cb-focus-primary: rgba(95,158,160,.35);
    --cb-focus-success: rgba(99,179,122,.30);
    --cb-focus-danger: rgba(224,122,122,.30);
}

/* ===== Filled buttons (primary/success/danger) ===== */
.e-btn.e-primary:hover,
.e-dropdown-btn.e-primary:hover,
.e-split-btn.e-primary:hover {
    background: var(--color-sf-primary-dark) !important;
    border-color: var(--color-sf-primary-dark) !important;
}

.e-btn.e-primary:active,
.e-dropdown-btn.e-primary:active,
.e-split-btn.e-primary:active {
    background: var(--color-sf-primary-darker) !important;
    border-color: var(--color-sf-primary-darker) !important;
}

.e-btn.e-success:hover,
.e-dropdown-btn.e-success:hover {
    background: var(--color-sf-success-dark) !important;
    border-color: var(--color-sf-success-dark) !important;
}

.e-btn.e-success:active,
.e-dropdown-btn.e-success:active {
    background: var(--color-sf-success-darker) !important;
    border-color: var(--color-sf-success-darker) !important;
}

.e-btn.e-danger:hover,
.e-dropdown-btn.e-danger:hover {
    background: var(--color-sf-danger-dark) !important;
    border-color: var(--color-sf-danger-dark) !important;
}

.e-btn.e-danger:active,
.e-dropdown-btn.e-danger:active {
    background: var(--color-sf-danger-darker) !important;
    border-color: var(--color-sf-danger-darker) !important;
}

/* ===== Outline buttons (hover con fondo suave) ===== */
.e-btn.e-outline.e-primary:hover {
    background: var(--color-sf-primary-lighter) !important;
    color: var(--color-sf-primary-dark) !important;
    border-color: var(--color-sf-primary) !important;
}

.e-btn.e-outline.e-primary:active {
    background: var(--color-sf-primary-light) !important;
    color: var(--color-sf-primary-darker) !important;
    border-color: var(--color-sf-primary-dark) !important;
}

/* (Opcional) outline success/danger si los usas */
.e-btn.e-outline.e-success:hover {
    background: var(--color-sf-success-lighter) !important;
    color: var(--color-sf-success-dark) !important;
    border-color: var(--color-sf-success) !important;
}

.e-btn.e-outline.e-danger:hover {
    background: var(--color-sf-danger-lighter) !important;
    color: var(--color-sf-danger-dark) !important;
    border-color: var(--color-sf-danger) !important;
}

/* ===== Focus ring bonito (teclado + accesibilidad) ===== */
.e-btn:focus-visible,
.e-dropdown-btn:focus-visible,
.e-split-btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 .2rem var(--cb-focus-primary) !important;
}

.e-btn.e-success:focus-visible {
    box-shadow: 0 0 0 .2rem var(--cb-focus-success) !important;
}

.e-btn.e-danger:focus-visible {
    box-shadow: 0 0 0 .2rem var(--cb-focus-danger) !important;
}

/* ===== Menús/popup: hover en items con tu primary suave ===== */
.e-dropdown-popup .e-item:hover,
.e-menu-wrapper .e-menu-item:hover {
    background: var(--color-sf-primary-lighter) !important;
    color: var(--color-sf-primary-darker) !important;
}

/* =========================
   TABS (SfTab) - GLOBAL
   ========================= */

.e-tab {
    /* no hace falta meter variables aquí si ya están en :root,
     pero lo dejo compatible por si Syncfusion aisla algo */
    --cb-tab-accent: var(--cb-accent);
}

    /* Header base */
    .e-tab .e-tab-header {
        background: transparent !important;
        border-bottom: 1px solid var(--cb-tab-border) !important;
        padding-left: 0 !important;
    }

        /* Evita recortes (barra superior) */
        .e-tab .e-tab-header,
        .e-tab .e-tab-header .e-toolbar,
        .e-tab .e-tab-header .e-toolbar-items,
        .e-tab .e-tab-header .e-toolbar-item,
        .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
            overflow: visible !important;
        }

            /* Toolbar limpio */
            .e-tab .e-tab-header .e-toolbar {
                border: 0 !important;
                background: transparent !important;
            }

            /* Pastillas */
            .e-tab .e-tab-header .e-toolbar-item {
                margin-right: 6px !important;
                border-radius: 8px 8px 0 0 !important;
                border: 1px solid var(--cb-tab-border) !important;
                border-bottom: 0 !important;
                background: var(--cb-tab-inactive-bg) !important;
                transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
            }

                /* Texto */
                .e-tab .e-tab-header .e-toolbar-item .e-tab-text,
                .e-tab .e-tab-header .e-toolbar-item .e-text-wrap {
                    font-weight: 600 !important;
                }

                /* Inactiva */
                .e-tab .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-text,
                .e-tab .e-tab-header .e-toolbar-item:not(.e-active) .e-text-wrap {
                    color: var(--cb-tab-inactive-txt) !important;
                }

                /* Hover (solo inactiva) */
                .e-tab .e-tab-header .e-toolbar-item:not(.e-active):hover {
                    background: var(--cb-tab-hover-bg) !important;
                    border-color: var(--cb-tab-hover-border) !important;
                    transform: translateY(-1px);
                }

                /* Activa */
                .e-tab .e-tab-header .e-toolbar-item.e-active {
                    background: #fff !important;
                    border-color: var(--cb-tab-border) !important;
                    border-bottom-color: #fff !important;
                    position: relative;
                    z-index: 5;
                    box-shadow: 0 6px 14px rgba(0,0,0,.06);
                }

                    .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
                    .e-tab .e-tab-header .e-toolbar-item.e-active .e-text-wrap {
                        color: var(--cb-tab-active-txt) !important;
                        font-weight: 800 !important;
                    }

                    /* Barra superior cadetblue + tapa la línea bajo activa (en el wrap real) */
                    .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
                        position: relative;
                    }

                        .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap::before {
                            content: "";
                            position: absolute;
                            left: -1px;
                            right: -1px;
                            top: -1px;
                            height: 4px;
                            background: var(--cb-accent);
                            border-radius: 8px 8px 0 0;
                            pointer-events: none;
                        }

                        .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap::after {
                            content: "";
                            position: absolute;
                            left: -1px;
                            right: -1px;
                            bottom: -1px;
                            height: 2px;
                            background: #fff;
                            pointer-events: none;
                        }

            /* Quita el indicador inferior (la línea azul típica) */
            .e-tab .e-tab-header .e-indicator {
                display: none !important;
            }

    /* Contenido */
    .e-tab .e-content {
        border: 1px solid var(--cb-tab-border) !important;
        border-top: 0 !important;
        border-radius: 0 0 8px 8px !important;
        background: #fff !important;
        overflow: hidden !important; /* evita el “flash” de esquinas */
    }

        .e-tab .e-content .e-item {
            padding: 12px 14px;
            box-sizing: border-box;
            background: transparent !important;
        }

/* =========================
   SWITCH (SfSwitch) - GLOBAL
   ========================= */

/* OFF track (si lo quieres con borde cadetblue) */
.e-switch-wrapper .e-switch-inner {
    border-color: var(--cb-accent) !important;
    background: transparent !important;
}

    /* ON track (color real está en .e-switch-on) */
    .e-switch-wrapper .e-switch-inner.e-switch-active .e-switch-on {
        background: var(--cb-accent) !important;
    }

    /* ON border track */
    .e-switch-wrapper .e-switch-inner.e-switch-active {
        border-color: var(--cb-accent) !important;
    }

/* Handle ON: blanco con borde cadetblue */
.e-switch-wrapper .e-switch-handle.e-switch-active {
    background: #fff !important;
    border: 2px solid var(--cb-accent) !important;
}

/* Hover ON */
.e-switch-wrapper:hover .e-switch-inner.e-switch-active .e-switch-on {
    background: rgba(var(--cb-accent-rgb), .92) !important;
}

/* =========================
   CHECKBOX (SfCheckBox) - GLOBAL
   ========================= */

.e-checkbox-wrapper .e-frame {
    border-color: var(--cb-accent) !important;
}

    .e-checkbox-wrapper .e-frame.e-check {
        background: var(--cb-accent) !important;
        border-color: var(--cb-accent) !important;
    }

        .e-checkbox-wrapper .e-frame.e-check::before {
            color: #fff !important;
        }

    /* Indeterminado (si lo usas) */
    .e-checkbox-wrapper .e-frame.e-stop {
        background: var(--cb-accent) !important;
        border-color: var(--cb-accent) !important;
    }

        .e-checkbox-wrapper .e-frame.e-stop::before {
            color: #fff !important;
        }

/* =========================
   DROPDOWNS / COMBO / MULTISELECT - selección suave
   ========================= */

.e-dropdownbase .e-list-item.e-active,
.e-dropdownbase .e-list-item.e-selected,
.e-multi-select-list-wrapper .e-list-item.e-active,
.e-multi-select-list-wrapper .e-list-item.e-selected {
    background: var(--cb-accent-soft) !important;
    color: #0f172a !important;
}

    .e-dropdownbase .e-list-item.e-active .e-list-text,
    .e-dropdownbase .e-list-item.e-selected .e-list-text {
        color: inherit !important;
    }

.e-dropdownbase .e-list-item:hover:not(.e-active):not(.e-selected),
.e-multi-select-list-wrapper .e-list-item:hover:not(.e-active):not(.e-selected) {
    background: var(--cb-accent-soft-hover) !important;
}