@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600&family=Figtree:wght@400;500;600;700&display=swap');

/* Sistema visual administrativo inspirado en sividev.net. */
.LayoutAdmin {
    --admin-ink: #011627;
    --admin-teal: #4197cb;
    --admin-teal-dark: #337fae;
    --admin-text: #2b3f48;
    --admin-muted: #5e7179;
    --admin-border: #e4e9eb;
    --admin-soft: #eef2f3;
    --admin-page: #f5f8f9;
    --admin-white: #ffffff;
    --admin-button-radius: 10px;
    --admin-button-font: 600 13px Figtree, ui-sans-serif, system-ui, sans-serif;
    color: var(--admin-ink);
    background: var(--admin-page) !important;
    font-family: Figtree, ui-sans-serif, system-ui, sans-serif;
}

.LayoutAdmin,
.LayoutAdmin input,
.LayoutAdmin select,
.LayoutAdmin textarea,
.LayoutAdmin button,
.LayoutAdmin .e-control,
.LayoutAdmin .e-control-wrapper {
    font-family: Figtree, ui-sans-serif, system-ui, sans-serif !important;
}

.LayoutAdmin *:not(.e-icons):not(.fa):not(.fas):not(.far):not(.fab) {
    font-family: Figtree, ui-sans-serif, system-ui, sans-serif !important;
}

.LayoutAdmin .e-icons,
.LayoutAdmin .e-icons::before {
    font-family: 'e-icons' !important;
}

.LayoutAdmin .fa,
.LayoutAdmin .fas,
.LayoutAdmin .far,
.LayoutAdmin .fab,
.LayoutAdmin [class^="fa-"]::before,
.LayoutAdmin [class*=" fa-"]::before {
    font-family: "Font Awesome 6 Free" !important;
}

.LayoutAdmin h1,
.LayoutAdmin h2,
.LayoutAdmin h3,
.LayoutAdmin legend {
    color: var(--admin-ink);
    font-family: Sora, Figtree, sans-serif !important;
    letter-spacing: -.025em;
}

.LayoutAdmin .MainSideBar {
    flex: 0 0 auto;
    gap: 4px;
    padding: 18px 12px 14px !important;
    background: rgba(255, 255, 255, .96) !important;
    border-right: 1px solid var(--admin-border);
    box-shadow: 12px 0 32px -30px rgba(1, 22, 39, .45);
}

.LayoutAdmin .MainSideBarLogo {
    align-items: center;
    min-height: 48px;
    margin-bottom: 4px;
}

.LayoutAdmin .mainHeadMenuBotón {
    margin-bottom: 18px;
}

.LayoutAdmin .mainHeadMenuBotón .imgBtn {
    width: 42px !important;
    height: 42px !important;
    margin: 8px 0 12px !important;
    background: var(--admin-soft) !important;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-button-radius) !important;
}

.LayoutAdmin .MainSideBar .normBtn {
    border-radius: var(--admin-button-radius) !important;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease !important;
}

.LayoutAdmin .MainSideBar .normBtn:hover {
    background: #f1f8f7 !important;
    box-shadow: inset 0 0 0 1px #d6eae7;
    transform: translateX(2px);
}

.LayoutAdmin .MainSideBar .normBtnTxt {
    font-family: Figtree, sans-serif !important;
    letter-spacing: 0;
}

.LayoutAdmin .mainBody {
    flex: 1 1 auto;
    width: auto !important;
    max-width: none !important;
    background-color: var(--admin-page);
    background-image: radial-gradient(#c7d0d4 1px, transparent 1px);
    background-size: 11px 11px;
    background-position: center top;
}

.LayoutAdmin .mainHead {
    flex: 0 0 76px;
    height: 76px !important;
    justify-content: space-between !important;
    padding: 12px clamp(18px, 2.4vw, 34px) !important;
    background: rgba(255, 255, 255, .9) !important;
    border-bottom: 1px solid var(--admin-border);
    backdrop-filter: blur(14px);
}

.LayoutAdmin .admin-context {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.LayoutAdmin .admin-context span {
    color: var(--admin-teal-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.LayoutAdmin .admin-context strong {
    color: var(--admin-ink);
    font-family: Sora, Figtree, sans-serif;
    font-size: 16px;
    font-weight: 600;
}

.LayoutAdmin .user-card {
    min-height: 48px;
    padding: 5px 10px 5px 6px !important;
    border: 1px solid var(--admin-border);
    border-radius: 999px !important;
    box-shadow: 0 14px 28px -24px rgba(1, 22, 39, .65) !important;
}

.LayoutAdmin .user-card:hover {
    background: #f1f8f7 !important;
    border-color: #d6eae7;
}

.LayoutAdmin .user-name {
    color: var(--admin-ink) !important;
    font: 600 13px Figtree, sans-serif !important;
}

.LayoutAdmin .user-role {
    color: var(--admin-muted) !important;
    font: 500 11px Figtree, sans-serif !important;
}

.LayoutAdmin .user-dropdown-menu {
    width: 190px !important;
    padding: 8px !important;
    border: 1px solid var(--admin-border);
    border-radius: 14px !important;
    box-shadow: 0 24px 48px -28px rgba(1, 22, 39, .55) !important;
}

.LayoutAdmin .dropdown-item {
    padding: 10px 12px !important;
    border-radius: 9px;
    color: var(--admin-text) !important;
    font: 600 13px Figtree, sans-serif !important;
}

.LayoutAdmin .dropdown-item:hover {
    background: var(--admin-soft) !important;
}

.LayoutAdmin > .mainBody > .main {
    height: calc(100% - 76px) !important;
    padding: clamp(14px, 2vw, 28px);
    background-color: transparent;
    background-image: radial-gradient(130% 78% at 50% 0%, rgba(255,255,255,.15) 0%, rgba(245,248,249,.72) 62%, rgba(245,248,249,.94) 100%);
}

.LayoutAdmin .main .main {
    width: 100%;
    height: 100% !important;
    padding: 0;
    background: transparent;
}

.LayoutAdmin .AppointmentsAdmin,
.LayoutAdmin .MedicsAdminMain,
.LayoutAdmin .SchedulesAdminMain,
.LayoutAdmin .admin-placeholder {
    padding: 0 !important;
    background: transparent !important;
}

.LayoutAdmin .e-grid,
.LayoutAdmin .e-schedule,
.LayoutAdmin fieldset,
.LayoutAdmin .modalAppointmentBox {
    background: var(--admin-white) !important;
    border: 1px solid var(--admin-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 48px -38px rgba(1, 22, 39, .5) !important;
}

.LayoutAdmin .e-grid {
    overflow: hidden;
}

.LayoutAdmin .e-grid .e-gridheader,
.LayoutAdmin .e-grid .e-headercell,
.LayoutAdmin .e-grid .e-toolbar,
.LayoutAdmin .e-grid .e-pager {
    background: #fbfcfc !important;
    border-color: var(--admin-border) !important;
}

.LayoutAdmin .e-grid .e-headercell {
    color: var(--admin-muted) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.LayoutAdmin .e-grid .e-rowcell {
    color: var(--admin-text) !important;
    border-color: var(--admin-soft) !important;
    font-size: 13px !important;
}

.LayoutAdmin .e-grid .e-row:hover .e-rowcell {
    background: #f1f8f7 !important;
}

.LayoutAdmin .e-grid .e-altrow {
    background: #fbfcfc !important;
}

.LayoutAdmin .e-pager .e-currentitem,
.LayoutAdmin .e-pager .e-currentitem:hover {
    color: #fff !important;
    background: var(--admin-teal) !important;
    border-color: var(--admin-teal) !important;
    border-radius: var(--admin-button-radius) !important;
    font: var(--admin-button-font) !important;
}

.LayoutAdmin .admin-primary-action,
.LayoutAdmin .admin-primary-action.normBtn {
    color: #fff !important;
    background: var(--admin-teal) !important;
    border-color: var(--admin-teal) !important;
}

.LayoutAdmin .admin-primary-action .normBtnTxt {
    color: #fff !important;
}

.LayoutAdmin .admin-primary-action:hover,
.LayoutAdmin .admin-primary-action.normBtn:hover {
    background: #28719d !important;
}

.LayoutAdmin input:not([type="checkbox"]):not([type="radio"]),
.LayoutAdmin select,
.LayoutAdmin textarea,
.LayoutAdmin .e-input-group {
    color: var(--admin-ink) !important;
    background: var(--admin-white) !important;
    border: 1px solid #c7d0d4 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.LayoutAdmin input:focus,
.LayoutAdmin select:focus,
.LayoutAdmin textarea:focus,
.LayoutAdmin .e-input-group.e-input-focus {
    border-color: var(--admin-teal-dark) !important;
    box-shadow: 0 0 0 3px rgba(65, 151, 203, .18) !important;
}

.LayoutAdmin .SpinnerMain {
    --color: #4197cb !important;
    --colorleft: #4197cb !important;
    --colorbottom: #4197cb !important;
}

.LayoutAdmin .navigationButton {
    color: #fff !important;
    background: var(--admin-teal) !important;
    border: 1px solid var(--admin-teal) !important;
    border-radius: var(--admin-button-radius) !important;
    font: 600 13px Figtree, sans-serif !important;
}

.LayoutAdmin .navigationButton:hover:not(:disabled) {
    color: white !important;
    background: var(--admin-teal-dark) !important;
}

.LayoutAdmin .navigationButton:disabled {
    color: #87979e !important;
    background: var(--admin-soft) !important;
    border-color: var(--admin-border) !important;
}

.LayoutAdmin [style*="background-color: #4197CB"],
.LayoutAdmin [style*="background-color: #4197cb"] {
    background-color: var(--admin-teal) !important;
}

.LayoutAdmin .normBtn[style*="background-color: #4197CB"] .normBtnTxt,
.LayoutAdmin .normBtn[style*="background-color: #4197cb"] .normBtnTxt,
.LayoutAdmin .normBtn[style*="background-color: #4197CB"] .BtnText,
.LayoutAdmin .normBtn[style*="background-color: #4197cb"] .BtnText,
.LayoutAdmin .e-btn.e-primary {
    color: #fff !important;
    background: var(--admin-teal) !important;
    border-color: var(--admin-teal) !important;
}

.LayoutAdmin .e-btn.e-primary:hover,
.LayoutAdmin .e-btn.e-primary:focus {
    color: #fff !important;
    background: var(--admin-teal-dark) !important;
    border-color: var(--admin-teal-dark) !important;
}

.LayoutAdmin .normBtn,
.LayoutAdmin .switchBtn,
.LayoutAdmin .imgBtn,
.LayoutAdmin button,
.LayoutAdmin .e-btn {
    border-radius: var(--admin-button-radius) !important;
}

.LayoutAdmin .normBtnTxt,
.LayoutAdmin .BtnText,
.LayoutAdmin button,
.LayoutAdmin .e-btn,
.LayoutAdmin .navigationButton {
    font: var(--admin-button-font) !important;
}

.LayoutAdmin [style*="background-color: black"],
.LayoutAdmin [style*="background-color: Black"] {
    background-color: var(--admin-ink) !important;
}

.LayoutAdmin .normBtn:not(.Readonly) {
    transition: transform .2s ease, box-shadow .25s ease, background-color .25s ease !important;
}

.LayoutAdmin .normBtn:not(.Readonly):hover {
    box-shadow: 0 14px 26px -18px rgba(1, 22, 39, .65);
}

.LayoutAdmin .modalAppointmentMain {
    background: rgba(1, 22, 39, .48) !important;
    backdrop-filter: blur(4px);
}

.LayoutAdmin .modalAppointmentBox {
    border-radius: 22px !important;
}

.LayoutAdmin .modalAppointmentSteps {
    background: #fbfcfc;
    border-right: 1px solid var(--admin-border);
}

.LayoutAdmin .NumberCircle1 {
    border-color: var(--admin-teal-dark) !important;
}

.LayoutAdmin .msgboxBox {
    border: 1px solid var(--admin-border);
    border-radius: 16px !important;
    box-shadow: 0 26px 52px -30px rgba(1, 22, 39, .7) !important;
}

.LayoutAdmin .admin-profile-page {
    width: min(960px, 100%);
    margin: 0 auto;
}

.LayoutAdmin .admin-profile-heading {
    margin-bottom: 18px;
}

.LayoutAdmin .admin-profile-eyebrow {
    color: var(--admin-teal-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.LayoutAdmin .admin-profile-heading h1 {
    margin: 5px 0 4px;
    font-size: clamp(25px, 3vw, 34px);
}

.LayoutAdmin .admin-profile-heading p {
    margin: 0;
    color: var(--admin-muted);
}

.LayoutAdmin .admin-profile-card,
.LayoutAdmin .admin-profile-state {
    padding: clamp(20px, 3vw, 34px);
    background: var(--admin-white);
    border: 1px solid var(--admin-border);
    border-radius: 18px;
    box-shadow: 0 24px 48px -38px rgba(1, 22, 39, .5);
}

.LayoutAdmin .admin-profile-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--admin-border);
}

.LayoutAdmin .admin-profile-avatar {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    color: #fff;
    background: var(--admin-teal-dark);
    border-radius: 16px;
    font-family: Sora, Figtree, sans-serif !important;
    font-size: 18px;
}

.LayoutAdmin .admin-profile-summary strong,
.LayoutAdmin .admin-profile-summary span {
    display: block;
}

.LayoutAdmin .admin-profile-summary strong {
    color: var(--admin-ink);
    font-size: 16px;
}

.LayoutAdmin .admin-profile-summary span {
    margin-top: 3px;
    color: var(--admin-muted);
    font-size: 12px;
}

.LayoutAdmin .admin-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.LayoutAdmin .admin-profile-grid label {
    display: grid;
    gap: 7px;
    color: var(--admin-text);
    font-size: 12px;
    font-weight: 600;
}

.LayoutAdmin .admin-profile-grid .full-width {
    grid-column: 1 / -1;
}

.LayoutAdmin .admin-profile-grid input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
}

.LayoutAdmin .admin-profile-grid input:disabled {
    color: var(--admin-muted) !important;
    background: var(--admin-soft) !important;
    cursor: not-allowed;
}

.LayoutAdmin .admin-profile-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}

.LayoutAdmin .admin-profile-actions button {
    min-height: 42px;
    padding: 0 20px;
    color: #fff;
    background: var(--admin-teal);
    border: 0;
    border-radius: var(--admin-button-radius);
    font: var(--admin-button-font);
    cursor: pointer;
}

.LayoutAdmin .admin-profile-actions button:hover:not(:disabled) {
    background: #28719d;
}

.LayoutAdmin .admin-profile-actions button:disabled {
    opacity: .65;
    cursor: wait;
}

.LayoutAdmin .admin-profile-message {
    padding: 11px 13px;
    margin-bottom: 18px;
    border-radius: 10px;
    font-size: 13px;
}

.LayoutAdmin .admin-profile-message.success {
    color: #075f56;
    background: #e4f6f3;
    border: 1px solid #bce9e3;
}

.LayoutAdmin .admin-profile-message.error {
    color: #8f2430;
    background: #fff0f1;
    border: 1px solid #f4c9ce;
}

.LayoutAdmin ::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.LayoutAdmin ::-webkit-scrollbar-thumb {
    background: #bdc8cd;
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

.LayoutAdmin ::-webkit-scrollbar-track {
    background: transparent;
}

@media (max-width: 900px) {
    .LayoutAdmin .mainHead {
        flex-basis: 64px;
        height: 64px !important;
    }

    .LayoutAdmin > .mainBody > .main {
        height: calc(100% - 64px) !important;
        padding: 12px;
    }

    .LayoutAdmin .admin-context strong {
        font-size: 14px;
    }
}

@media (max-width: 600px) {
    .LayoutAdmin .admin-context {
        display: none;
    }

    .LayoutAdmin .mainHead {
        justify-content: flex-end !important;
    }

    .LayoutAdmin > .mainBody > .main {
        padding: 8px;
    }

    .LayoutAdmin .admin-profile-grid {
        grid-template-columns: 1fr;
    }

    .LayoutAdmin .admin-profile-grid .full-width {
        grid-column: auto;
    }
}