/* Aplicando o tema visual do sistema baseado nas imagens fornecidas */
    /* Adicione este CSS ao seu estilo existente */
body.modal-open {
    padding-right: 0 !important;
    overflow: visible !important;
}

.modal {
    padding-right: 0 !important;
}

/* Para garantir que os modais não causem deslocamento */
.modal-backdrop {
    padding-right: 0 !important;
}
    
    :root {
        --primary-blue: #007bff;
        --primary-blue-dark: #0056b3;
        --success-green: #28a745;
        --success-green-dark: #1e7e34;
        --warning-orange: #fd7e14;
        --warning-orange-dark: #e8590c;
        --danger-red: #dc3545;
        --danger-red-dark: #c82333;
        --purple: #6f42c1;
        --purple-dark: #5a32a3;
        --cyan: #17a2b8;
        --cyan-dark: #138496;
        --light-bg: #f8f9fa;
        --white: #ffffff;
        --gray-100: #f8f9fa;
        --gray-200: #e9ecef;
        --gray-300: #dee2e6;
        --gray-600: #6c757d;
        --gray-800: #343a40;
        --shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    }

    body {
        background-color: var(--light-bg);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        color: var(--gray-800);
    }
    
    body.no-modalbg-adjust.modal-open {
  padding-right: 0 !important;   /* remove a compensação da barra de rolagem */
  overflow: visible !important;   /* mantém a página rolável */
}

    /* Header principal com gradiente azul */
    .main-header {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-dark));
        color: white;
        padding: 1.5rem 0;
        margin-bottom: 0.8rem;
        box-shadow: var(--shadow);
    }

    .main-header h1 {
        font-size: 1.5rem;
        font-weight: 600;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .main-header .subtitle {
        opacity: 0.9;
        font-size: 0.9rem;
        margin-top: 0.25rem;
    }

    /* Mobile */
    @media (max-width: 576px) {
        .main-header {
            padding: 1.5rem;
            gap: .75rem;
        }

        .main-header .icon {
            width: 44px;
            height: 44px;
            border-radius: 10px;
        }

        .main-header .icon i {
            font-size: 24px;
        }

        .main-header h1 {
            font-size: 1.6rem;
        }

        /* ~26px */
        .main-header .subtitle {
            font-size: .95rem;
        }
    }

    /* Cards do sistema */
    .system-card {
        background: var(--white);
        border: 1px solid var(--gray-200);
        border-radius: 0.75rem;
        box-shadow: var(--shadow);
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .system-card.primary {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-dark));
        color: white;
        border: none;
    }

    .system-card.primary .subtitle {
        opacity: 0.9;
    }

    /* Novos estilos para cards de seleção de modo - mais intuitivos para mobile */
    .mode-selection-container {
        background: var(--white);
        border-radius: 1rem;
        padding: 1rem;
        box-shadow: var(--shadow);
        margin-bottom: 1rem;
    }

    .mode-selection-title {
        text-align: center;
        color: var(--gray-800);
        font-weight: 600;
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
    }

    .mode-cards-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        height: 120px;
    }

    .mode-card {
        background: var(--white);
        border: 3px solid var(--gray-300);
        border-radius: 1rem;
        padding: 1.5rem 1rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        min-height: 120px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        color: var(--gray-800);
    }

    .mode-card:hover {
        border-color: var(--primary-blue);
        background: var(--gray-100);
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
        color: var(--gray-800);
        text-decoration: none;
    }

    .mode-card.active {
        border-color: var(--primary-blue);
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-dark));
        color: white;
        box-shadow: var(--shadow-lg);
    }

    .mode-card.active:hover {
        color: white;
    }

    .mode-card-icon {
        font-size: 2.5rem;
        margin-bottom: 0.75rem;
        color: var(--primary-blue);
    }

    .mode-card.active .mode-card-icon {
        color: white;
    }

    .mode-card-title {
        font-weight: 600;
        font-size: 0.9rem;
        line-height: 1.3;
        margin: 0;
    }

    .mode-card-subtitle {
        font-size: 1rem;
        opacity: 0.8;
        margin-top: 0.25rem;
        line-height: 1.2;
    }

    /* Escondendo as abas originais do Bootstrap */
    .nav-tabs {
        display: none !important;
    }

    /* Botões do sistema seguindo o padrão das imagens */
    .btn-system-primary {
        background: var(--success-green);
        border: var(--success-green);
        color: white;
        font-weight: 500;
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        transition: all 0.2s;
    }

    .btn-system-primary:hover {
        background: var(--success-green-dark);
        border-color: var(--success-green-dark);
        color: white;
        transform: translateY(-1px);
    }

    .btn-system-edit {
        background: var(--warning-orange);
        border: var(--warning-orange);
        color: white;
        font-weight: 500;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        font-size: 0.875rem;
    }

    .btn-system-edit:hover {
        background: var(--warning-orange-dark);
        border-color: var(--warning-orange-dark);
        color: white;
    }

    .btn-system-delete {
        background: var(--danger-red);
        border: var(--danger-red);
        color: white;
        font-weight: 500;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        font-size: 0.875rem;
    }

    .btn-system-delete:hover {
        background: var(--danger-red-dark);
        border-color: var(--danger-red-dark);
        color: white;
    }

    .btn-system-services {
        background: var(--purple);
        border: var(--purple);
        color: white;
        font-weight: 500;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        font-size: 0.875rem;
    }

    .btn-system-services:hover {
        background: var(--purple-dark);
        border-color: var(--purple-dark);
        color: white;
    }

    .btn-system-schedule {
        background: var(--cyan);
        border: var(--cyan);
        color: white;
        font-weight: 500;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        font-size: 0.875rem;
    }

    .btn-system-schedule:hover {
        background: var(--cyan-dark);
        border-color: var(--cyan-dark);
        color: white;
    }

    /* Controles de data */
    .date-controls {
        background: var(--white);
        padding: 1rem;
        border-radius: 0.5rem;
        border: 1px solid var(--gray-200);
        margin-bottom: 1rem;
    }

    .date-controls .form-control {
        border-radius: 0.375rem;
        border: 1px solid var(--gray-300);
    }

    .date-controls .form-control:focus {
        border-color: var(--primary-blue);
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    /* Grid de semana */
    .week-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 0.5rem;
        margin: 1rem 0;
    }

    .day-button {
        background: var(--white);
        border: 1px solid var(--gray-300);
        border-radius: 0.5rem;
        padding: 0.75rem 0.5rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s;
        color: var(--gray-800);
    }

    .day-button:hover {
        border-color: var(--primary-blue);
        background: var(--gray-100);
    }

    .day-button.active {
        background: var(--primary-blue);
        border-color: var(--primary-blue);
        color: white;
    }

    .day-button .day-name {
        font-weight: 600;
        font-size: 0.875rem;
    }

    .day-button .day-date {
        font-size: 0.75rem;
        opacity: 0.8;
        margin-top: 0.25rem;
    }

    /* Grid de horários */
    .times-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 0.75rem;
        margin: 1rem 0;
    }

    .time-slot {
        background: var(--white);
        border: 2px solid var(--primary-blue);
        border-radius: 0.5rem;
        padding: 0.75rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s;
        color: var(--primary-blue);
        font-weight: 600;
    }

    .time-slot:hover {
        background: var(--primary-blue);
        color: white;
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

    /* Modal customizado */
    .modal-content {
        border: none;
        border-radius: 0.75rem;
        box-shadow: var(--shadow-lg);
    }

    .modal-header {
        background: var(--primary-blue);
        color: white;
        border-radius: 0.75rem 0.75rem 0 0;
        border-bottom: none;
    }

    .modal-header .btn-close {
        filter: invert(1);
    }

    .modal-body {
        padding: 1.5rem;
    }

    .modal-footer {
        border-top: 1px solid var(--gray-200);
        padding: 1rem 1.5rem;
    }

    /* Lista de profissionais */
    .professional-list {
        max-height: 200px;
        overflow-y: auto;
    }

    .professional-item {
        background: var(--white);
        border: 1px solid var(--gray-300);
        border-radius: 0.5rem;
        padding: 0.75rem;
        margin-bottom: 0.5rem;
        cursor: pointer;
        transition: all 0.2s;
    }

    .professional-item:hover {
        border-color: var(--primary-blue);
        background: var(--gray-100);
    }

    .professional-item input[type="radio"] {
        accent-color: var(--primary-blue);
    }

    /* Grid de profissionais */
    .professionals-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 0.75rem;
        margin: 1rem 0;
    }

    .professional-slot {
        background: var(--white);
        border: 2px solid var(--primary-blue);
        border-radius: 0.5rem;
        padding: 0.75rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s;
        color: var(--primary-blue);
        font-weight: 600;
    }

    .professional-slot:hover {
        background: var(--primary-blue);
        color: white;
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }
    
    .professional-slot.active {
      background-color: #0d6efd;   /* azul Bootstrap */
      color: #fff;                 /* texto branco */
      border-color: #0a58ca;       /* borda azul escura */
    }

    /* Toast notifications */
    .toast-container {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1060;
    }
    
    /* Caixa da chave PIX – contraste alto e foco visível */
.pix-box{
  background:#f8fbff;
  border:1px solid var(--gray-200);
  box-shadow: var(--shadow);
}

.pix-label{
  font-weight:700;
  color:#0b7285;
  letter-spacing:.2px;
}

/* Faz a chave “virar” um campo largo e elástico */
.pix-key{
  display: block;           /* ocupa a largura do contêiner */
  width: 100%;
  flex: 1 1 auto;           /* cresce para usar o espaço */
  padding: .5rem .75rem;
  border-radius: .5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .95rem;
  background: #e7f5ff;
  color: #0b7285;
  border: 1px dashed #74c0fc;
  user-select: all;
  word-break: break-all;    /* evita overflow em chaves longas */
  line-height: 1.2;
}

#depositModal .pix-box > .d-flex{ justify-content: flex-start; }

/* Se o wrapper tiver .flex-grow-1 do Bootstrap, cancela o crescimento */
#depositModal .flex-grow-1{ flex-grow: 0 !important; }

/* Encolhe o "campo" da chave e alinha a altura */
#depositModal .pix-key{
  display: inline-flex;          /* ocupa só o necessário */
  align-items: center;
  width: auto !important;        /* cancela width:100% / w-100 */
  max-width: clamp(14ch, 48vw, 28ch); /* <<< ajuste aqui o tamanho */
  padding: .375rem .6rem;        /* altura menor */
  font-size: .9rem;              /* fonte um pouco menor */
  white-space: nowrap;           /* uma linha */
  overflow: hidden;
  text-overflow: ellipsis;       /* reticências se passar do limite */
  line-height: 1.2;
}

/* Botão alinhado à altura do "pill" acima */
#depositModal #btnCopyPix{
  white-space: nowrap;
  height: calc(1.9rem + 2px);
  line-height: 1.2;
}

/* Mobile: botão quebra linha e fica 100%; chave pode ocupar toda a linha */
@media (max-width: 420px){
  #depositModal .pix-key{ max-width: 100%; }
  #depositModal #btnCopyPix{ width: 100%; height: auto; margin-top: .5rem; }
}

/* Garante que o botão não “quebre” em duas linhas */
.btn-copy{ white-space: nowrap; }

/* Em telas muito pequenas, deixa o botão descer para a linha de baixo e ficar 100% */
@media (max-width: 420px){
  .btn-copy{ width:100%; }
}


    :root {
        --primary-color: #2563eb;
        /* azul */
        --accent-color: #0ea5e9;
        /* azul claro */
        --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
    }

    /* Responsividade melhorada para mobile */
    @media (max-width: 768px) {
        /*body {*/
        /*    display: flex;*/
        /*    align-items: center;*/
        /*    flex-direction: column;*/
        /*    padding: 0.3rem 2rem;*/
        /*}*/
        
        #app {
            display: flex;
            align-items: center;
            flex-direction: column;
            padding: 0.3rem 2rem; /* aplique aqui, não no body */
        }

        .mode-cards-container {
            gap: 0.75rem;
        }

        .container {
            padding-left: 0;
            padding-right: 0;
        }

        .mode-card {
            padding: 1.25rem 0.75rem;
            min-height: 110px;
        }

        .mode-card-icon {
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }

        .mode-card-title {
            font-size: 0.85rem;
        }

        .mode-card-subtitle {
            font-size: 0.6rem;
        }

        .week-grid {
            grid-template-columns: repeat(4, 1fr);
        }

        .times-grid {
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 0.5rem;
        }

        .main-header {
            background: linear-gradient(135deg, var(--primary-color, #2563eb) 0%, var(--accent-color, #0ea5e9) 100%) !important;
            color: #fff !important;
            border-radius: 20px;
            padding: 2rem 1.5rem;
            margin-bottom: 1.25rem;
            box-shadow: var(--shadow-xl, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1));
            display: flex;
            flex-direction: column;
            opacity: 1 !important;
            position: relative;
            overflow: hidden;
        }

        /* brilho suave passando (opcional) */
        .main-header::before {
            content: "";
            position: absolute;
            inset: -40% -60% auto auto;
            width: 140%;
            height: 140%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, .12), transparent);
            transform: rotate(35deg);
            pointer-events: none;
            z-index: 0;
        }

        .main-header>* {
            position: relative;
            z-index: 1;
        }

        .main-header .icon {
            flex: 0 0 auto;
            width: 52px;
            height: 52px;
            display: grid;
            place-items: center;
            border-radius: 12px;
            background: transparent;
        }

        .main-header .icon i {
            font-size: 28px;
            color: #fff;
        }

        .main-header h1 {
            margin: 0;
            font-weight: 700;
            font-size: 2rem;
            line-height: 1.15;
            letter-spacing: .2px;
        }

        .main-header .subtitle {
            margin: .5rem 0 0;
            font-size: 1rem;
            opacity: .95;
        }

        .system-card {
            padding: 1rem;
        }

        .row .align-items-center .mb-3 {
            margin-bottom: 0 !important;
            height: 100px;
        }
    }

    .system-card .row.align-items-center.mb-3 {
        margin-bottom: .25rem !important;
    }

    .system-card .date-controls {
        margin-bottom: 0 !important;
    }

    @media (max-width: 576px) {
        .system-card .row.align-items-center.mb-3 {
            margin-bottom: .25rem !important;
          
        }

        .system-card .date-controls {
            margin-bottom: 0 !important;
        }
    }

    @media (max-width: 576px) {
        .mode-cards-container {
            gap: 1rem;
        }

        .mode-card {
            padding: 1.5rem 1rem;
            min-height: 100px;
        }

        .mode-card-icon {
            font-size: 2rem;
            margin-bottom: 0.1rem;
        }

        .mode-card-title {
            padding: 0;
            font-size: 0.85rem;
            font-weight: bold;
        }

        .mode-card-subtitle {
            font-size: 0.6rem;
        }

        .week-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .times-grid {
            grid-template-columns: 1fr 1fr;
        }

        .day-button {
            padding: 0.5rem 0.25rem
        }

        .day-button .day-name {
            font-size: 0.75rem;
        }

        .day-button .day-date {
            font-size: 0.7rem;
        }

        .date-controls {
            margin-bottom: 0rem;
        }

        .col-md-6 {
            margin-bottom: 15px;
        }
        

        .row .align-items-center .mb-3 {
            margin-bottom: 0 !important;
            height: 100px;
        }
    }

    /* Indicador de status */
    .status-indicator {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        border-radius: 1rem;
        font-size: 0.75rem;
        font-weight: 500;
        background: var(--gray-200);
        color: var(--gray-600);
    }

    .section-title {
        color: var(--gray-600);
        font-weight: 600;
        font-size: 0.875rem;
        margin: 0.2rem 0 0.75rem 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* valor padrão fora do mobile (ajuste como quiser) */
    #nav-admin {
        margin-left: 0;
    }

    /* mobile: aplica só em celulares */
    #nav-admin { margin-left: 0; }

/* mobile: manter à esquerda */
@media (max-width: 576px) {
  #nav-admin {
    margin-left: 0 !important;
    margin-top: 10px; /* se quiser esse respiro, pode manter */
  }
}

    /* ===========================================================
     SETA DE ROLAR (scroll-hint) — SÓ NO CELULAR, FIXA À DIREITA
     =========================================================== */
    /* Esconde por padrão (desktop/tablet) */
    .scroll-hint {
        display: none;
    }

    /* Estilo moderno e visível apenas em telas pequenas com touch */
    @media (max-width: 600px) and (hover: none) and (pointer: coarse) {
        .scroll-hint {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            position: fixed;
            right: calc(14px + env(safe-area-inset-right, 0px));
            /* direita */
            bottom: calc(16px + env(safe-area-inset-bottom, 0px));
            z-index: 1050;
            padding: .55rem .75rem;
            border-radius: 999px;
            color: #fff;
            text-decoration: none;
            font-weight: 600;
            font-size: .9rem;
            line-height: 1;
            transition: transform .25s ease, opacity .25s ease, visibility .25s ease;
        }

        .scroll-hint:active {
            transform: scale(.98);
        }

        .scroll-hint__icon {
            display: inline-grid;
            place-items: center;
            width: 50px;
            height: 50px;
            padding: 9px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-dark));
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
            animation: hintFloat 1.2s ease-in-out infinite;
        }

        .scroll-hint__icon i {
            font-size: 16px;
        }

        /* Estado oculto ao rolar */
        .scroll-hint.hide {
            opacity: 0;
            visibility: hidden;
            transform: translateY(6px);
        }
    }

    @keyframes hintFloat {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(3px);
        }
    }

    /* Respeita usuários que preferem menos movimento */
    @media (prefers-reduced-motion: reduce) {
        .scroll-hint__icon {
            animation: none !important;
        }

        .scroll-hint,
        .scroll-hint.hide {
            transition: none !important;
        }
    }
    /* Esconde a lista inline SOMENTE no mobile */
@media (max-width: 600px) and (hover: none) and (pointer: coarse) {
  /* bloco onde ficam "Lista de Horários" e "Horários disponíveis" */
  #inlineHorarioBlock { display: none !important; }
}
/* 1) Esconde inline no mobile (largura) */
@media (max-width: 768px) {
  #inlineHorarioBlock { display: none !important; }
}

/* 2) Fallback: se o JS marcar body.mobile-flow, some em qualquer mobile */
body.mobile-flow #inlineHorarioBlock { display: none !important; }
/* Força o indicador do calendário a aparecer dentro do modal de data (mobile) */
#modalDate input[type="date"] {
  -webkit-appearance: auto; /* Safari/iOS */
  appearance: auto;
  background-color: #fff; /* garante contraste */
}

#modalDate input[type="date"]::-webkit-calendar-picker-indicator {
  display: block;
  opacity: 1;
  cursor: pointer;
  filter: none;          /* evita ficar "invisível" em temas invertidos */
  margin-left: .25rem;   /* só estética */
}
/* --- Calendário explícito no 1º modal (mobile) --- */
#modalDate .calendar-input .btn {
  height: calc(2.375rem + 2px); /* mesma altura típica do .form-control */
}

@media (max-width: 420px) {
  #modalDate .calendar-input { gap: .25rem; }
  #modalDate .calendar-input .btn { height: auto; }
}

/* Esconde o indicador nativo só dentro do modal para não duplicar ícone */
#modalDate input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  display: none;
}
#pmDateModal .calendar-input .btn {
  height: calc(2.375rem + 2px);
}
#pmDateModal input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0; display: none; /* deixa só o botão com ícone */
}