/* ==========================================================================
   AGENDA MÉDICA — Estilos Customizados
   Complementa o Pico CSS com estilos específicos da aplicação.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variáveis de cor
   -------------------------------------------------------------------------- */
:root {
    --cor-agendada: #1a3d27;       /* verde escuro */
    --cor-realizada: #1a2e20;      /* verde pastel/fraco */
    --cor-cancelada: #3d1f23;      /* vermelho escuro */
    --cor-encaixe_urgencia: #1a2f38; /* azul escuro */
    --cor-disponivel: #221a2a;     /* fundo slot */
    --cor-hover: #2e2438;         /* hover sutil */
    --cor-primaria: #5b9cf6;
    --cor-fundo: #1a1121;         /* rgb(26,17,33) */
    --cor-surface: #241b2e;       /* cards, painéis */
    --cor-surface2: #2e2438;      /* inputs, areas elevadas */
    --cor-texto: #e0dce4;
    --cor-texto-leve: #9a91a5;
    --cor-timestamp: #6ab0e0;       /* azul claro — datas/horas de edição */
    --cor-borda: #3d3348;
    --sombra-card: 0 2px 8px rgba(0,0,0,0.3);
    --sombra-modal: 0 8px 32px rgba(0,0,0,0.5);
}

/* --------------------------------------------------------------------------
   Tema Light (rosa/verde claro)
   -------------------------------------------------------------------------- */
[data-theme="light"] {
    --cor-agendada: #c8e6c9;       /* verde claro */
    --cor-realizada: #e8f5e9;      /* verde bem pastel */
    --cor-cancelada: #f8d7da;
    --cor-encaixe_urgencia: #d1ecf1;
    --cor-disponivel: #fff5f8;
    --cor-hover: #fce4ec;
    --cor-primaria: #d6336c;
    --cor-fundo: #fde8ef;
    --cor-surface: #fff0f5;
    --cor-surface2: #fce4ed;
    --cor-texto: #2d2233;
    --cor-texto-leve: #7a6b80;
    --cor-timestamp: #3a7fb8;       /* azul claro — datas/horas de edição */
    --cor-borda: #e8b4c8;
    --sombra-card: 0 2px 8px rgba(200,100,140,0.12);
    --sombra-modal: 0 8px 32px rgba(200,100,140,0.2);
}

[data-theme="light"] .agenda-header {
    background: #f0c0d4;
    color: var(--cor-texto);
}

[data-theme="light"] .slot.agendada .paciente-nome { background: var(--cor-agendada); color: #1b5e20; border-color: rgba(27,94,32,0.5); }
[data-theme="light"] .slot.realizada .paciente-nome { background: var(--cor-realizada); color: #6aaa7a; border-color: rgba(74,138,90,0.3); opacity: 0.9; }
[data-theme="light"] .slot.cancelada .paciente-nome { background: var(--cor-cancelada); color: #721c24; border-color: rgba(114,28,36,0.5); }
[data-theme="light"] .slot.encaixe_urgencia .paciente-nome { background: var(--cor-encaixe_urgencia); color: #0c5460; border-color: rgba(12,84,96,0.5); }

[data-theme="light"] .badge-pago { background: #d4edda; color: #155724; }
[data-theme="light"] .badge-pendente { background: #f8d7da; color: #721c24; }
[data-theme="light"] .badge-nao-pago { background: #f8d7da; color: #721c24; }
[data-theme="light"] .badge-nota-ok { background: #d4edda; color: #155724; }
[data-theme="light"] .badge-nota-pendente { background: #f8d7da; color: #721c24; }

[data-theme="light"] .login-card button:hover { background: #c2255c; }

[data-theme="light"] input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    background: #fff0f5;
    border: 2px solid #e8b4c8;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
}

[data-theme="light"] input[type="checkbox"]:checked {
    background: #d4edda;
    border-color: #155724;
}

[data-theme="light"] input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: 900;
    color: #155724;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   Botão toggle tema
   -------------------------------------------------------------------------- */
.tema-toggle {
    background: none !important;
    border: none !important;
    font-size: 1rem !important;
    cursor: pointer;
    padding: 0.1rem 0.3rem !important;
    line-height: 1;
    opacity: 0.8;
    color: var(--cor-texto) !important;
}

.tema-toggle:hover {
    opacity: 1;
    background: none !important;
}

/* Botão tema no topo do login card */
.login-top-bar {
    display: flex;
    justify-content: flex-end;
    margin: -1rem -1rem 0.5rem 0;
}

/* --------------------------------------------------------------------------
   Botões Base de Pacientes / Consultas
   -------------------------------------------------------------------------- */
.botoes-bases {
    display: flex;
    gap: 0.5rem;
    margin: 0 0.5rem 0.15rem;
}

.botoes-bases button {
    flex: 1;
    padding: 0.05rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 6px;
    border: 1px solid var(--cor-borda);
    background: var(--cor-surface);
    color: var(--cor-texto);
    cursor: pointer;
}

.botoes-bases button:hover {
    background: var(--cor-primaria);
    color: white;
    border-color: var(--cor-primaria);
}

/* --------------------------------------------------------------------------
   Painel de últimas consultas
   -------------------------------------------------------------------------- */
.recentes-painel {
    margin: 0.25rem 0.5rem 0.15rem;
    background: var(--cor-surface);
    border: 1px solid var(--cor-borda);
    border-radius: 4px;
    box-shadow: var(--sombra-card);
    padding: 0.5rem 0.75rem;
    font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
    font-weight: 700;
}

.recentes-painel h3 {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--cor-texto-leve);
    margin: 0 0 0.2rem 0;
    letter-spacing: 0.5px;
}

.recentes-lista {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    max-height: 150px;
    overflow: hidden;
}

.recente-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.7rem;
    cursor: pointer;
    border-left: 3px solid var(--cor-borda);
}

.recente-item:hover {
    background: var(--cor-hover);
}

.recente-item .recente-nome {
    font-weight: 600;
}

.recente-item .recente-resp {
    color: var(--cor-texto-leve);
    font-size: 0.6rem;
    display: block;
}

.recente-item .recente-info {
    color: var(--cor-texto-leve);
    font-size: 0.6rem;
}

.timestamp-edicao {
    color: var(--cor-timestamp);
}

/* --------------------------------------------------------------------------
   Header do painel recentes (título + checkbox Ver Canceladas)
   -------------------------------------------------------------------------- */
.recentes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 0.2rem 0;
}

.recentes-header h3 {
    margin: 0 !important;
}

.cb-canceladas {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.6rem;
    color: var(--cor-texto-leve);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    margin: 0;
    padding: 0;
}

.cb-box {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--cor-borda);
    border-radius: 3px;
    background: var(--cor-surface2);
    position: relative;
    flex-shrink: 0;
    transition: all 0.15s;
}

.cb-box.checked {
    background: var(--cor-cancelada);
    border-color: #e08890;
}

.cb-box.checked::after {
    content: '✓';
    position: absolute;
    top: -2px;
    left: 1px;
    font-size: 11px;
    color: #fff;
    font-weight: bold;
}

[data-theme="light"] .cb-box.checked {
    background: #d4edda;
    border-color: #155724;
}

[data-theme="light"] .cb-box.checked::after {
    color: #155724;
}

/* Indicador de cancelada anterior dentro de slot ativo */
.slot-cancelada-hint {
    margin-top: 2px;
    padding: 1px 4px;
    font-size: 0.55rem;
    color: #e08890;
    background: rgba(255,80,100,0.1);
    border-radius: 2px;
    cursor: pointer;
    text-decoration: line-through;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slot-cancelada-hint:hover {
    opacity: 1;
}

/* Badge cancelada dentro de slot vazio (quando Ver Canceladas on) */
.slot-canc-badge {
    opacity: 0.6;
    text-decoration: line-through;
}

.slot-canc-badge:hover {
    opacity: 0.9;
}

/* --------------------------------------------------------------------------
   Painel de alterações — detalhes truncados
   -------------------------------------------------------------------------- */
#alteracoes-lista .recente-info {
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   Checkboxes inline
   -------------------------------------------------------------------------- */
.checkboxes-inline {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding-top: 0.25rem;
}

.checkboxes-inline label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem !important;
    cursor: pointer;
    color: var(--cor-texto) !important;
}

.checkboxes-inline input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px;
    margin: 0;
    accent-color: var(--cor-primaria);
}

/* --------------------------------------------------------------------------
   Reset e base
   -------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
}

body {
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    min-height: 100vh;
}

/* --------------------------------------------------------------------------
   Layout da página de login
   -------------------------------------------------------------------------- */
.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}

.login-card {
    background: var(--cor-surface);
    border: 1px solid var(--cor-borda);
    border-radius: 12px;
    box-shadow: var(--sombra-card);
    padding: 2.5rem;
    width: 100%;
    max-width: 400px;
}

.login-card h1 {
    text-align: center;
    margin-bottom: 0.5rem;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 500;
    font-size: 1.8rem;
    color: var(--cor-primaria);
}

.login-card .subtitulo {
    text-align: center;
    color: var(--cor-texto-leve);
    margin-bottom: 2rem;
    font-size: 0.9rem;
}

.login-card input {
    margin-bottom: 1rem;
    background: var(--cor-surface2);
    border: 1px solid var(--cor-borda);
    color: var(--cor-texto);
    font-size: 1.12rem !important;
    padding: 0.56rem !important;
}

.login-card input::placeholder {
    color: var(--cor-texto-leve);
    font-size: 1.12rem !important;
}

.login-card label {
    color: var(--cor-texto-leve);
    font-size: 1.12rem !important;
}

.login-card button {
    width: 100%;
    margin-top: 0.5rem;
    background: var(--cor-primaria);
    color: white;
    border: none;
    padding: 0.65rem;
    border-radius: 6px;
    font-size: 1.14rem;
    cursor: pointer;
}

.login-card button:hover {
    opacity: 0.9;
}

.login-erro {
    color: #dc3545;
    text-align: center;
    font-size: 0.85rem;
    margin-top: 0.5rem;
    display: none;
}

/* --------------------------------------------------------------------------
   Topo fixo (header + navegação + datas)
   -------------------------------------------------------------------------- */
.topo-fixo {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--cor-surface);
    border-bottom: 1px solid var(--cor-borda);
}

/* --------------------------------------------------------------------------
   Header / barra de navegação
   -------------------------------------------------------------------------- */
.app-header {
    background: var(--cor-surface);
    padding: 0.2rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-header .logo {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1.22rem;
    color: var(--cor-primaria);
}

.app-header .logo-short { display: none; }

@media (max-width: 768px) {
    .app-header .logo-full { display: none; }
    .app-header .logo-short { display: inline; }
}

.medico-seletor {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--cor-primaria);
    background: var(--cor-surface2);
    border: 1px solid var(--cor-borda);
    border-radius: 4px;
    padding: 0.15rem 1.2rem 0.15rem 0.3rem !important;
    margin: 0;
    cursor: pointer;
    max-width: 200px;
    background-position: right 0.2rem center !important;
    background-size: 0.8rem !important;
}

@media (max-width: 768px) {
    .medico-seletor {
        font-size: 0.72rem;
        max-width: 150px;
    }
}

.app-header .nav-acoes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.4rem;
}

.app-header .usuario-info {
    font-size: 0.7rem;
    color: var(--cor-texto-leve);
}

.app-header button {
    font-size: 0.78rem;
    padding: 0.15rem 0.5rem;
    margin: 0;
    background: var(--cor-surface2);
    color: var(--cor-texto);
    border: 1px solid var(--cor-borda);
    font-weight: 700;
}

.app-header button:hover {
    background: var(--cor-primaria);
    color: white;
    border-color: var(--cor-primaria);
}

/* --------------------------------------------------------------------------
   Navegação da semana
   -------------------------------------------------------------------------- */
.semana-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.15rem 0.5rem;
    background: var(--cor-surface);
    margin: 0 0.5rem;
    border-bottom: 1px solid var(--cor-borda);
    position: relative;
}

.semana-nav button {
    padding: 0.05rem 0.5rem;
    font-size: 0.78rem;
    margin: 0;
    background: var(--cor-surface2);
    color: var(--cor-texto);
    border: 1px solid var(--cor-borda);
    font-weight: 700;
}

.semana-nav button:hover {
    background: var(--cor-primaria);
    color: white;
}

.semana-nav .semana-label {
    font-weight: 600;
    font-size: 0.96rem;
    min-width: 180px;
    text-align: center;
    color: var(--cor-texto);
}

.semana-nav .semana-label:hover {
    color: var(--cor-primaria);
    text-decoration: underline;
}

/* Date Picker Popup */
.date-picker-popup {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--cor-surface);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    padding: 0.5rem;
    z-index: 1000;
    min-width: 220px;
}

.date-picker-popup.open { display: block; }

.dp-year-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
    font-weight: 700;
    font-size: 1rem;
    color: var(--cor-texto);
}

.date-picker-popup .dp-arrow {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    color: var(--cor-texto);
    border-radius: 4px;
    margin: 0;
}

.date-picker-popup .dp-arrow:hover { background: var(--cor-surface2); color: var(--cor-texto); }

.dp-meses {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.date-picker-popup .dp-mes {
    padding: 0.35rem 0.2rem;
    font-size: 0.82rem;
    border: 1px solid var(--cor-borda);
    border-radius: 4px;
    background: var(--cor-surface2);
    color: var(--cor-texto);
    cursor: pointer;
    text-align: center;
    margin: 0;
}

.date-picker-popup .dp-mes:hover {
    background: var(--cor-primaria);
    color: white;
    border-color: var(--cor-primaria);
}

.date-picker-popup .dp-mes.dp-ativo {
    background: var(--cor-primaria);
    color: white;
    border-color: var(--cor-primaria);
    font-weight: 700;
}

.date-picker-popup .dp-mes.dp-hoje:not(.dp-ativo) {
    border-color: var(--cor-primaria);
    color: var(--cor-primaria);
    font-weight: 600;
}

/* Date Picker — Calendário de dias (reutiliza dp-meses-grid com classe dp-cal) */
.dp-cal {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}

.dp-cal .dp-cal-lbl {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--cor-texto-sec);
    padding: 0.1rem 0;
}

.date-picker-popup .dp-cal-dia {
    padding: 0.22rem 0;
    font-size: 0.78rem;
    border: 1px solid transparent;
    border-radius: 4px;
    background: var(--cor-surface);
    color: var(--cor-texto);
    cursor: pointer;
    margin: 0;
}

.date-picker-popup .dp-cal-dia:hover {
    background: var(--cor-primaria);
    color: white;
}

.date-picker-popup .dp-cal-dia.dp-cal-hoje {
    border-color: var(--cor-primaria);
    color: var(--cor-primaria);
    font-weight: 700;
}

.date-picker-popup .dp-cal-dia.dp-cal-hoje:hover { color: white; }

#dp-ano-label:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Grid da agenda (visão semanal)
   -------------------------------------------------------------------------- */
.agenda-container {
    margin: 0.25rem 0.5rem;
    overflow-x: auto;
}

.agenda-grid {
    display: grid;
    grid-template-columns: 36px repeat(6, 1fr);
    border: 1px solid var(--cor-borda);
    border-radius: 4px;
    background: var(--cor-surface);
    box-shadow: var(--sombra-card);
}

/* Cabeçalho dos dias */
.agenda-header {
    background: #2a1f36;
    color: var(--cor-texto);
    padding: 0.15rem 0.2rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.65rem;
    border-right: none;
    border-bottom: none;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
}

.agenda-header:first-child {
    border-radius: 4px 0 0 0;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: "Roboto Condensed", "Arial Narrow", "Helvetica Narrow", Arial, sans-serif;
    padding: 0.1rem 0;
    white-space: nowrap;
}

.agenda-header:last-child {
    border-right: none;
}

.agenda-header .dia-numero {
    display: inline;
    font-size: 0.8rem;
    margin-left: 2px;
}

/* Coluna de horas */
.hora-label {
    padding: 0.1rem 0.1rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--cor-surface);
    color: var(--cor-texto-leve);
    border-right: none;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(86px * var(--zoom, 1));
}

/* Célula de slot */
.slot {
    padding: 0.08rem 0.12rem;
    border-right: none;
    border-bottom: none;
    min-height: calc(86px * var(--zoom, 1));
    min-width: 0;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.15s ease;
    position: relative;
    font-size: 0.79rem;
    font-family: "Roboto Condensed", Arial, sans-serif;
    background: var(--cor-disponivel);
}

.slot:last-child {
    border-right: none;
}

.slot:hover {
    background: var(--cor-hover);
}

/* Slot arrastável */
.slot[draggable="true"] {
    cursor: grab;
}

.slot[draggable="true"]:active {
    cursor: grabbing;
}

/* Feedback visual ao arrastar sobre slot vazio */
.slot.drag-over {
    background: var(--cor-primaria) !important;
    opacity: 0.3;
    outline: 2px dashed var(--cor-primaria);
    outline-offset: -2px;
}

/* Slot vazio */
.slot.disponivel:hover::after {
    content: "+\00a0 Agendar\A " attr(data-drop-hora);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--cor-primaria);
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.8;
    white-space: pre;
    text-align: center;
}

/* Slot bloqueado (cinza) — padrão quando não desbloqueado */
.slot.bloqueado {
    background: #484850;
}

[data-theme="light"] .slot.bloqueado {
    background: #e8e8ec;
}

/* Cadeado dentro do slot */
.slot-cadeado {
    position: absolute;
    top: 2px;
    right: 2px;
    cursor: pointer;
    font-size: 0.84rem;
    opacity: 0.5;
    z-index: 1;
    line-height: 1;
    user-select: none;
}

.slot-cadeado:hover {
    opacity: 1;
    transform: scale(1.2);
}

/* Web (mouse): esconder cadeado do slot, mostrar on hover */
@media (hover: hover) {
    .hora-label, .slot {
        min-height: calc(62px * var(--zoom, 1));
        overflow: visible !important;
    }
    .slot:not(.slot-extra) {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    .agenda-grid.expandido .slot.slot-extra {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    .slot-conteudo-principal {
        overflow: visible !important;
    }
    .slot .paciente-nome {
        font-size: 1.1em;
    }
    .modal .campo label {
        font-size: 0.91rem;
    }
    .modal .campo input,
    .modal .campo select,
    .modal .campo textarea {
        font-size: 0.86rem;
        height: auto;
        padding: 0.2rem 0.35rem;
    }
    .modal .modal-compacto .campo input,
    .modal .modal-compacto .campo select,
    .modal .modal-compacto .campo textarea {
        font-size: 0.86rem;
        height: auto;
        padding: 0.2rem 0.35rem;
    }
    .modal-header h2 {
        font-size: 1.32rem;
    }
    .modal-secao h3 {
        font-size: 0.86rem;
    }
    .modal-footer button {
        font-size: 0.86rem;
    }
    .slot-cadeado {
        opacity: 0;
    }
    .slot:hover .slot-cadeado {
        opacity: 0.6;
    }
}

/* Cadeado no header do dia */
.header-cadeado {
    cursor: pointer;
    margin-left: 3px;
    font-size: 0.72rem;
    opacity: 0.6;
    user-select: none;
}

.header-cadeado:hover {
    opacity: 1;
}

/* Cadeado na barra de semana */
.semana-cadeado {
    cursor: pointer;
    font-size: 1.02rem;
    margin: 0 0.3rem;
    opacity: 0.6;
    user-select: none;
}

.semana-cadeado:hover {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Horários extras (20h/21h) — ocultos por padrão, revelados com botão
   -------------------------------------------------------------------------- */
.slot-extra {
    display: none;
}

.agenda-grid.expandido .slot-extra {
    display: block;
}

.agenda-grid.expandido .hora-label.slot-extra {
    display: flex;
}

/* Botão expansor */
.expand-btn {
    grid-column: 1 / -1;
    text-align: center;
    cursor: pointer;
    padding: 2px 0;
    font-size: 0.6rem;
    line-height: 1;
    opacity: 0.6;
    user-select: none;
    transition: opacity 0.2s, background 0.2s;
    color: var(--cor-texto-leve);
    border-bottom: 1px solid var(--cor-borda);
    background: var(--cor-surface2);
}

.expand-btn:hover {
    opacity: 1;
    background: var(--cor-hover);
}

/* Slot do horário atual */
.slot-atual {
    outline: 2.5px solid var(--cor-primaria) !important;
    outline-offset: -2.5px;
    z-index: 1;
}

.hora-atual {
    color: var(--cor-primaria) !important;
    font-weight: 800 !important;
}

/* Slot ocupado — fundo determinado pelo estado de bloqueio, não pelo status */
.slot.agendada,
.slot.realizada,
.slot.encaixe_urgencia,
.slot.cancelada {
    background: var(--cor-disponivel);
}

.slot.cancelada {
    text-decoration: line-through;
    opacity: 0.6;
}

/* Conteúdo dentro do slot */
.slot .slot-hora {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--cor-texto-leve);
    line-height: 1;
    font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
}

.slot .paciente-nome {
    font-weight: 700;
    font-family: "Saira Extra Condensed", Arial, sans-serif;
    margin-bottom: -1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.15;
    color: white;
    padding: 0px 1px;
    border-radius: 3px;
    max-width: 100%;
    border: none;
}

/* Badge do nome por status */
.slot.agendada .paciente-nome {
    background: var(--cor-agendada);
}

.slot.realizada .paciente-nome {
    background: var(--cor-realizada);
    color: #c8e0cc;
    border-color: rgba(160,200,168,0.3);
    opacity: 0.9;
}

.slot.cancelada .paciente-nome {
    background: var(--cor-cancelada);
    color: #e08890;
    border-color: rgba(224,136,144,0.5);
}

.slot.encaixe_urgencia .paciente-nome {
    background: var(--cor-encaixe_urgencia);
    color: #6bc5e0;
    border-color: rgba(107,197,224,0.5);
}

.slot .paciente-resp {
    color: var(--cor-texto);
    font-size: 0.64rem;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slot .paciente-tel {
    color: var(--cor-texto);
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.1;
}

.slot .slot-status {
    font-size: 0.61rem;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 0;
    line-height: 1.1;
}

.slot .slot-pgto,
.slot .slot-pagamento {
    font-size: 0.61rem;
    font-weight: 600;
    color: var(--cor-texto);
    margin-top: 0;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Consultas realizadas (passadas) — infos secundárias mais transparentes */
.slot.realizada .paciente-resp,
.slot.realizada .paciente-tel {
    opacity: 0.45;
}

.slot.realizada .slot-pgto,
.slot.realizada .slot-pagamento {
    opacity: 1;
}

/* Slot dual (normal + encaixe no mesmo horário) */
.slot.slot-dual {
    display: flex;
    gap: 2px;
}

.slot-conteudo-principal {
    min-width: 0;
    overflow: hidden;
}

.slot-dual .slot-conteudo-principal {
    flex: 2;
}

.encaixe-badge {
    flex: 1;
    min-width: 0;
    font-size: 0.65rem;
    opacity: 0.7;
    cursor: pointer;
    padding: 2px;
    border-radius: 3px;
    background: var(--cor-encaixe_urgencia);
    border: 1px solid rgba(107,197,224,0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.encaixe-badge:hover {
    opacity: 1;
}

.encaixe-badge .paciente-nome {
    font-size: 0.6rem !important;
    padding: 0px 2px;
}

.encaixe-badge .encaixe-label {
    font-size: 0.5rem;
    text-transform: uppercase;
    font-weight: 700;
    color: #6bc5e0;
    line-height: 1;
}

[data-theme="light"] .encaixe-badge {
    background: var(--cor-encaixe_urgencia);
    border-color: rgba(12,84,96,0.3);
}

[data-theme="light"] .encaixe-badge .encaixe-label {
    color: #0c5460;
}

/* Ações hover no slot (cancelar) — canto inferior direito */
.slot .slot-acoes {
    display: none;
    position: absolute;
    bottom: 3px;
    right: 3px;
    gap: 2px;
}

.slot:hover .slot-acoes {
    display: flex;
}

.slot .slot-acoes button {
    padding: 2px 5px;
    font-size: 0.6rem;
    border-radius: 3px;
    border: 1px solid var(--cor-borda);
    background: var(--cor-surface);
    color: var(--cor-texto);
    cursor: pointer;
    line-height: 1;
}

.slot .slot-acoes button:hover {
    background: var(--cor-primaria);
    color: white;
    border-color: var(--cor-primaria);
}

/* --------------------------------------------------------------------------
   Modal overlay
   -------------------------------------------------------------------------- */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-overlay.ativo {
    display: flex;
}

.modal {
    background: var(--cor-surface);
    border: 1px solid var(--cor-borda);
    border-radius: 12px;
    box-shadow: var(--sombra-modal);
    width: 100%;
    max-width: 720px;
    max-height: 95vh;
    overflow-y: auto;
    animation: modalEntrar 0.2s ease;
    color: var(--cor-texto);
}

@keyframes modalEntrar {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--cor-borda);
}

.modal-header h2 {
    margin: 0;
    font-size: 0.92rem;
}

#confirmar-mensagem {
    font-size: 1.03rem;
}

.modal-compact .modal-footer button {
    font-size: 0.86rem;
}

.modal-header .fechar {
    background: none;
    border: none;
    font-size: 2.37rem;
    cursor: pointer;
    color: var(--cor-texto-leve);
    padding: 0.1rem 0.3rem;
    line-height: 1;
}

.modal-header .fechar:hover {
    color: var(--cor-texto);
}

.modal {
    font-weight: 700;
}

.modal-body {
    padding: 0.75rem 1rem;
}

.modal-footer {
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--cor-borda);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.modal-footer button {
    background: var(--cor-surface2);
    color: var(--cor-texto);
    border: 1px solid var(--cor-borda);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.60rem;
    margin-bottom: 0;
}

.modal-footer button:hover,
.modal-footer button[type="submit"] {
    background: var(--cor-primaria);
    color: white;
    border-color: var(--cor-primaria);
}

/* Seções dentro do modal */
.modal-secao {
    margin-bottom: 0.75rem;
}

.modal-secao h3 {
    font-size: 0.60rem;
    text-transform: uppercase;
    color: var(--cor-texto-leve);
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--cor-borda);
}

/* Grid de campos no formulário */
.campos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.campos-grid .campo-full {
    grid-column: 1 / -1;
}

.campo label {
    display: block;
    font-size: 0.63rem;
    font-weight: 600;
    color: var(--cor-texto-leve);
    margin-bottom: 0.1rem;
}

/* Campo com seletor ao lado (CPF + Resp 1/2) */
.campo-com-toggle {
    display: flex;
    gap: 4px;
}

.campo-com-toggle input {
    flex: 1;
    min-width: 0;
}

.campo-com-toggle select {
    width: 65px;
    flex-shrink: 0;
    font-size: 0.60rem;
    padding: 0.15rem 0.15rem;
}

/* Campo com checkbox ao lado (CPF + "Não tem") */
.campo-com-check {
    display: flex;
    align-items: center;
    gap: 4px;
}

.campo-com-check input[type="text"],
.campo-com-check input[type="email"] {
    flex: 1;
    min-width: 0;
}

.check-inline {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 0.55rem !important;
    white-space: nowrap;
    color: var(--cor-texto-leve) !important;
    cursor: pointer;
    font-weight: 400 !important;
}

.check-inline input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    margin: 0;
    accent-color: var(--cor-primaria);
    cursor: pointer;
}

/* Modal compacto (ficha paciente) */
.modal-compacto {
    padding: 0.4rem 0.6rem !important;
}

.modal-compacto .campos-grid {
    gap: 0.15rem 0.2rem;
}

.modal-compacto .campo {
    margin-bottom: 0;
    padding: 0;
}

.modal-compacto .campo input,
.modal-compacto .campo select,
.modal-compacto .campo textarea {
    padding: 0.12rem 0.3rem;
    font-size: 0.60rem;
    margin-bottom: 0 !important;
    height: auto;
    line-height: 1.3;
    font-weight: 700;
}

.modal-compacto .campo label {
    margin-bottom: 0;
    line-height: 1.2;
}

/* Stepper de valor (− / input / +) */
.valor-stepper {
    display: flex;
    gap: 0;
}

.valor-stepper input,
.valor-stepper .stepper-btn {
    height: auto;
    box-sizing: border-box;
}

.valor-stepper input {
    flex: 1;
    min-width: 0;
    border-radius: 0;
    text-align: center;
    font-weight: 600;
    -moz-appearance: textfield;
}

.valor-stepper input::-webkit-inner-spin-button,
.valor-stepper input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.stepper-btn {
    width: 3rem;
    border: 1px solid var(--cor-borda);
    background: var(--cor-surface2);
    color: var(--cor-texto);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.stepper-btn:first-child {
    border-radius: 6px 0 0 6px;
    border-right: none;
}

.stepper-btn:last-child {
    border-radius: 0 6px 6px 0;
    border-left: none;
}

.stepper-btn:hover {
    background: var(--cor-primaria);
    color: white;
    border-color: var(--cor-primaria);
}

.stepper-btn:active {
    transform: scale(0.95);
}

/* Barra alfabética de pacientes */
.alfabeto-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 4px;
    padding: 4px;
    background: var(--cor-surface);
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
}

.alfa-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--cor-borda);
    border-radius: 4px;
    background: var(--cor-surface2);
    color: var(--cor-texto);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alfa-btn:hover {
    background: var(--cor-primaria);
    color: white;
    border-color: var(--cor-primaria);
}

.alfa-btn.alfa-ativa {
    background: var(--cor-primaria);
    color: white;
    border-color: var(--cor-primaria);
}

/* Input com botão ao lado (data picker) */
.input-com-btn {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.input-com-btn input {
    flex: 1;
    min-width: 0;
    border-radius: 6px 0 0 6px;
}

.input-btn {
    width: 38px;
    border: 1px solid var(--cor-borda);
    border-left: none;
    border-radius: 0 6px 6px 0;
    background: var(--cor-surface2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    padding: 0;
}

.input-btn:hover {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
}

/* Aviso telefone */
.aviso-telefone {
    font-size: 0.72rem;
    color: #e67e22;
    margin-top: 1px;
}

/* CPF inválido */
.cpf-invalido {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 1px #dc3545 !important;
}

.aviso-cpf {
    font-size: 0.72rem;
    color: #dc3545;
    margin-top: 1px;
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    padding: 0.15rem 0.35rem;
    font-size: 0.60rem;
    border: 1px solid var(--cor-borda);
    border-radius: 4px;
    background: var(--cor-surface2);
    color: var(--cor-texto);
    height: auto;
    line-height: 1.3;
    box-sizing: border-box;
}

.campo textarea {
    height: auto;
}

.campo input::placeholder,
.campo textarea::placeholder {
    color: var(--cor-texto-leve);
}

.campo select option {
    background: var(--cor-surface);
    color: var(--cor-texto);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.15);
}

/* Histórico de consultas no modal */
.consultas-lista {
    max-height: 200px;
    overflow-y: auto;
}

.consulta-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    border-bottom: 1px solid var(--cor-borda);
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: 4px;
}

.consulta-item:hover {
    background: var(--cor-hover);
}

.consulta-item .consulta-data {
    font-weight: 600;
}

.consulta-item .consulta-tipo {
    color: var(--cor-texto-leve);
    font-size: 0.7rem;
}

/* Indicadores de pagamento */
.badge {
    display: inline-block;
    padding: 1px 3px;
    border-radius: 2px;
    font-size: 0.5rem;
    font-weight: 600;
}

.badge-pago {
    background: var(--cor-realizada);
    color: #6fcf97;
}

.badge-pendente {
    background: var(--cor-cancelada);
    color: #e08890;
}

.badge-nao-pago {
    background: var(--cor-cancelada);
    color: #e08890;
}

.badge-nota-ok {
    background: var(--cor-realizada);
    color: #6fcf97;
}

.badge-nota-pendente {
    background: var(--cor-cancelada);
    color: #e88090;
}

/* --------------------------------------------------------------------------
   Tela de configurações (dentro de modal)
   -------------------------------------------------------------------------- */
.config-grupo {
    margin-bottom: 1rem;
}

.config-grupo label {
    font-weight: 600;
    font-size: 0.85rem;
}

.zoom-controles {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.zoom-controles button {
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.zoom-controles input[type="range"] {
    flex: 1;
    margin: 0;
    height: 32px;
}

/* Matriz de bloqueio padrão (aba Config > Bloqueio) */
.bloqueio-matrix {
    display: grid;
    grid-template-columns: 50px repeat(6, 1fr);
    gap: 1px;
    background: var(--cor-borda);
    border: 1px solid var(--cor-borda);
    border-radius: 4px;
    overflow: hidden;
}
.bloq-cell {
    background: var(--cor-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem;
    font-size: 0.75rem;
    min-height: 28px;
}
.bloq-corner {
    background: var(--cor-surface2);
}
.bloq-dia-header {
    background: var(--cor-surface2);
    font-weight: 700;
    font-size: 0.7rem;
    cursor: pointer;
    user-select: none;
}
.bloq-dia-header:hover {
    background: var(--cor-primaria);
    color: white;
}
.bloq-hora-label {
    background: var(--cor-surface2);
    font-weight: 600;
    font-size: 0.72rem;
    font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
    cursor: pointer;
    user-select: none;
}
.bloq-hora-label:hover {
    background: var(--cor-primaria);
    color: white;
}
.bloq-check {
    cursor: pointer;
    user-select: none;
    font-size: 0.8rem;
    transition: background 0.1s;
}
.bloq-check:hover {
    background: var(--cor-surface2);
}
.bloq-check.bloq-on {
    background: #f8d7da;
}

/* --------------------------------------------------------------------------
   Responsividade — Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Header compacto */
    .app-header {
        padding: 0.1rem 0.5rem;
        flex-wrap: wrap;
        gap: 0.1rem;
    }

    .app-header .nav-acoes button {
        padding: 0.15rem 0.4rem;
        font-size: 0.72rem;
        white-space: nowrap;
    }

    /* Navegação semana menor */
    .semana-nav {
        margin: 0 4px;
        padding: 1px 6px;
        gap: 3px;
    }

    .semana-nav button {
        font-size: 0.72rem;
        padding: 0.1rem 0.45rem;
    }

    .semana-nav .semana-label {
        font-size: 0.75rem;
        min-width: auto;
    }

    /* Seletor de dia — esconder no mobile (scroll horizontal no grid) */
    .dia-seletor-mobile {
        display: none !important;
    }

    /* Agenda: scroll horizontal com todos os dias */
    .agenda-container {
        margin: 0 0 4px 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .agenda-grid {
        grid-template-columns: 30px repeat(6, calc(65px * var(--zoom, 1))) !important;
        width: calc(30px + 390px * var(--zoom, 1)) !important;
        max-width: calc(30px + 390px * var(--zoom, 1)) !important;
    }

    /* Mostrar todos os dias */
    .agenda-grid .dia-coluna {
        display: block;
    }

    /* Horários extras: manter ocultos no mobile (override do .dia-coluna acima) */
    .agenda-grid .slot-extra {
        display: none;
    }
    .agenda-grid.expandido .slot-extra {
        display: block;
    }
    .agenda-grid.expandido .hora-label.slot-extra {
        display: flex;
    }

    /* Congelar coluna de hora no scroll horizontal */
    .hora-label {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--cor-surface);
    }

    .agenda-header:first-child {
        position: sticky;
        left: 0;
        z-index: 3;
    }

    /* Slots mobile: overflow visible + centralizar verticalmente */
    .slot:not(.slot-extra) {
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    .agenda-grid.expandido .slot.slot-extra {
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    .slot-conteudo-principal {
        overflow: visible !important;
    }

    /* (regras de cadeado mobile movidas para @media touch abaixo) */

    /* Semana cadeado no modo seleção — destaque */
    body.modo-selecao-lock .semana-cadeado {
        opacity: 1;
        background: var(--cor-primaria);
        color: white;
        border-radius: 4px;
        padding: 0 0.3rem;
    }

    /* Modal full-width no mobile */
    .modal {
        max-width: 100%;
        max-height: 100%;
        margin: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-overlay {
        align-items: stretch;
        padding: 0;
    }

    /* Modais pequenos (confirmação etc.) — compactos e centralizados no mobile */
    .modal-overlay.modal-compact {
        align-items: center;
        justify-content: center;
        padding: 1.5rem;
    }

    .modal-compact .modal {
        max-width: 90vw;
        max-height: auto;
        border-radius: 12px;
        display: block;
    }

    .modal-compact .modal-header h2 {
        font-size: 1.29rem;
    }

    .modal-compact .modal-body p,
    .modal-compact #confirmar-mensagem {
        font-size: 1.2rem;
    }

    .modal-compact .modal-footer button {
        font-size: 0.72rem;
        padding: 0.3rem 1.2rem;
    }

    .modal-body {
        flex: 1;
        overflow-y: auto;
        min-height: 0;
    }

    .modal-body .consultas-lista {
        max-height: none;
    }

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

    /* Modal consulta: manter 2 colunas no mobile */
    .modal-compacto .campos-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Slot no mobile — compacto */
    .slot {
        min-height: calc(45px * var(--zoom, 1));
        padding: 0.08rem 0.12rem;
    }

    .hora-label {
        min-height: calc(45px * var(--zoom, 1));
    }
}

/* Esconder seletor de dia (não usado mais) */
.dia-seletor-mobile {
    display: none;
}

/* --------------------------------------------------------------------------
   Loading spinner
   -------------------------------------------------------------------------- */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.spinner {
    width: 30px;
    height: 30px;
    border: 3px solid var(--cor-borda);
    border-top-color: var(--cor-primaria);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Scrollbar escura */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--cor-fundo);
}

::-webkit-scrollbar-thumb {
    background: var(--cor-borda);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--cor-texto-leve);
}

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

/* --------------------------------------------------------------------------
   Utilidades
   -------------------------------------------------------------------------- */
input[readonly] {
    background: var(--cor-surface2) !important;
    opacity: 0.7;
    cursor: default;
}

.text-center { text-align: center; }
.text-leve { color: var(--cor-texto-leve); }
.text-sm { font-size: 0.8rem; }

/* --------------------------------------------------------------------------
   NFS-e Preview Modal
   -------------------------------------------------------------------------- */
.nfse-secao {
    margin-bottom: 0.6rem;
}

.nfse-secao h3 {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--cor-texto-leve);
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
    padding-bottom: 0.15rem;
    border-bottom: 1px solid var(--cor-borda);
}

#modal-nfse .modal {
    max-width: 840px;
}

#modal-nfse .modal-header {
    padding: 0.35rem 1rem;
}

#modal-nfse .modal-body {
    padding: 0.4rem 1rem;
}

#modal-nfse .modal-footer {
    padding: 0.3rem 1rem;
}

.nfse-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.2rem 1.5rem;
}

.nfse-campo {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.nfse-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--cor-texto-leve);
    letter-spacing: 0.3px;
    line-height: 1.2;
}

.nfse-valor {
    font-size: 0.85rem;
    color: var(--cor-texto);
    font-weight: 700;
    padding: 0.05rem 0;
}

select.nfse-valor {
    background: var(--cor-surface2);
    border: 1px solid var(--cor-borda);
    border-radius: 4px;
    padding: 0.25rem 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--cor-texto);
    cursor: pointer;
}

.nfse-avisos {
    margin-top: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: rgba(255, 193, 7, 0.15);
    border: 1px solid rgba(255, 193, 7, 0.4);
    border-radius: 6px;
    font-size: 0.85rem;
    color: #ffc107;
}

.nfse-avisos p {
    margin: 0.2rem 0;
}

.nfse-resultado-sucesso {
    text-align: center;
    padding: 2rem;
    color: #4caf50;
    font-size: 1.1rem;
}

.nfse-resultado-erro {
    text-align: center;
    padding: 2rem;
    color: #f44336;
    font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   Toast Notifications
   -------------------------------------------------------------------------- */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.toast {
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-size: 0.85rem;
    max-width: 380px;
    pointer-events: auto;
    animation: toastEntrar 0.3s ease, toastSair 0.3s ease 3.7s forwards;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.toast-sucesso {
    background: #1b5e20;
    color: #c8e6c9;
    border: 1px solid #388e3c;
}

.toast-erro {
    background: #b71c1c;
    color: #ffcdd2;
    border: 1px solid #e53935;
}

.toast-aviso {
    background: #e65100;
    color: #ffe0b2;
    border: 1px solid #ef6c00;
}

@keyframes toastEntrar {
    from { opacity: 0; transform: translateX(100px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes toastSair {
    from { opacity: 1; }
    to { opacity: 0; transform: translateY(-10px); }
}

/* --------------------------------------------------------------------------
   Button Loading State
   -------------------------------------------------------------------------- */
button.loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}

button.loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.btn-danger {
    background: #e74c3c;
    color: #fff;
    border: none;
}
.btn-danger:hover {
    background: #c0392b;
}

/* ── Abas de configuração ── */
.config-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--cor-borda, #e0e0e0);
    margin-bottom: 1rem;
    padding: 0 1rem;
}
.config-tab {
    padding: 0.5rem 1.2rem;
    cursor: pointer;
    border: none;
    background: none;
    font-size: 0.95rem;
    color: var(--cor-texto-leve, #888);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
}
.config-tab:hover {
    color: var(--cor-texto, #333);
}
.config-tab.ativo {
    color: var(--cor-primaria, #2563eb);
    border-bottom-color: var(--cor-primaria, #2563eb);
    font-weight: 600;
}
.config-subtitulo {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cor-texto-leve, #888);
    margin: 1rem 0 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--cor-borda, #e0e0e0);
}
.campo-erro input {
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 1px #e74c3c;
}
.campo-erro-msg {
    color: #e74c3c;
    font-size: 0.78rem;
    margin-top: 0.15rem;
}

/* --------------------------------------------------------------------------
   Touch devices: modo seleção de bloqueio (celular vertical E horizontal)
   -------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
    /* Esconder cadeados individuais (slot e dia) por padrão */
    .slot-cadeado,
    .header-cadeado {
        display: none !important;
    }

    /* Modo seleção de bloqueio: mostrar cadeados nos headers dos dias */
    body.modo-selecao-lock .header-cadeado {
        display: inline !important;
    }

    /* Checkbox overlay para toggle de slots */
    .slot-lock-check {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        font-size: 1.1rem;
        cursor: pointer;
        user-select: none;
        z-index: 5;
        opacity: 0.8;
        line-height: 1;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
    }
    body.modo-selecao-lock .slot-lock-check {
        display: flex !important;
    }
    body.modo-selecao-lock .slot > *:not(.slot-lock-check) {
        pointer-events: none;
    }
    body.modo-selecao-lock .slot {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* Semana cadeado no modo seleção — destaque */
    body.modo-selecao-lock .semana-cadeado {
        opacity: 1;
        background: var(--cor-primaria);
        color: white;
        border-radius: 4px;
        padding: 0 0.3rem;
    }
}

/* ================================================================
   WHATSAPP — Estilos do frontend integrado (Fase 2)
   ================================================================ */

/* --- Badge de status no header --- */
.wpp-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    background: var(--cor-surface);
    border: 1px solid var(--cor-borda);
    cursor: pointer;
    font-size: 0.75rem;
    transition: border-color 0.2s;
}
.wpp-status-badge:hover { border-color: #25d366; }

.wpp-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.wpp-dot.wpp-conectado { background: #25d366; box-shadow: 0 0 4px #25d366; }
.wpp-dot.wpp-desconectado { background: #dc3545; }
.wpp-dot.wpp-aguardando { background: #ff9800; animation: wpp-pulse 1.5s infinite; }

@keyframes wpp-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.wpp-label { color: var(--cor-texto-leve); font-weight: 600; }

/* --- ADM: Seções WhatsApp --- */
.wpp-adm-secao h4 {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    color: var(--cor-texto);
}

.wpp-status-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

/* --- Toggle switch (AutoChat) --- */
.wpp-toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
}
.wpp-toggle input { opacity: 0; width: 0; height: 0; }
.wpp-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--cor-borda);
    border-radius: 22px;
    transition: 0.3s;
}
.wpp-toggle-slider::before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
}
.wpp-toggle input:checked + .wpp-toggle-slider { background: #25d366; }
.wpp-toggle input:checked + .wpp-toggle-slider::before { transform: translateX(18px); }

/* --- Templates lista --- */
.wpp-template-item {
    padding: 0.5rem;
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
    margin-bottom: 0.5rem;
}
.wpp-template-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}
.wpp-template-nome { font-weight: 600; font-size: 0.85rem; }
.wpp-template-conteudo {
    color: var(--cor-texto-leve);
    white-space: pre-wrap;
    font-size: 0.8rem;
}

/* --- Paciente: WhatsApp info --- */
.wpp-paciente-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* --- Histórico de mensagens (mini chat) --- */
.wpp-historico-lista {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.3rem;
    max-height: 200px;
    overflow-y: auto;
}
.wpp-msg {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    font-size: 0.8rem;
    max-width: 85%;
}
.wpp-msg-entrada {
    background: var(--cor-surface);
    border: 1px solid var(--cor-borda);
    align-self: flex-start;
}
.wpp-msg-saida {
    background: #1a3d27;
    border: 1px solid #25d366;
    align-self: flex-end;
}
.wpp-msg-texto { flex: 1; word-break: break-word; }
.wpp-msg-hora { font-size: 0.65rem; color: var(--cor-texto-leve); white-space: nowrap; }

/* --- Preview de mensagem (modal confirmar) --- */
.wpp-msg-preview {
    background: var(--cor-surface);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    padding: 0.75rem;
    white-space: pre-wrap;
    color: var(--cor-texto);
    font-size: 0.85rem;
}