/* ==============================================================
   Design System Profissional - UPA de Bolso (v2.5.0 - Consolidado)
   ============================================================== */

:root {     
    /* TEMA NOTURNO (Padrão Nativo) */
    color-scheme: dark;
    --brand-blue: #3b82f6; 
    --brand-blue-hover: #60a5fa;
    --brand-red: #ef4444;  
    --success: #10b981;
    --warning: #f59e0b;

    --bg-main: #000000;
    --sidebar-bg: #0a0a0a;
    --panel-bg: #111111;
    --card-bg: #171717;
    --border-color: #262626;
    --primary: var(--brand-blue);
    --danger: var(--brand-red);
    --text-main: #f9fafb; 
    --text-muted: #9ca3af; 
    
    --hover-bg: #1f2937;
    --active-bg: transparent; 
    
    --shadow-sm: 0 1px 2px rgba(255, 255, 255, 0.05);
    --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.8);

    /* Cores de Botões - Noturno */
    --btn-bg: #1e293b;
    --btn-border: #334155;
    --btn-text: #cbd5e1;
    --btn-bg-hover: #334155;
    --btn-border-hover: #475569;

    --btn-danger-bg: #450a0a;
    --btn-danger-border: #7f1d1d;
    --btn-danger-text: #fca5a5;
    --btn-danger-bg-hover: #7f1d1d;
    --btn-danger-border-hover: #991b1b;

    /* Botão Login / Sair (Sidebar) */
    --brand-danger-bg: rgba(239, 68, 68, 0.1);
    --brand-danger-border: rgba(239, 68, 68, 0.3);
    --brand-danger-bg-hover: rgba(239, 68, 68, 0.2);
    --brand-danger-border-hover: rgba(239, 68, 68, 0.5);
}

[data-theme="light"] {     
    /* TEMA CLARO */
    color-scheme: light;
    --brand-blue: #1d3e69; 
    --brand-blue-hover: #295791;
    --brand-red: #b92b27;  
    --success: #059669;
    --warning: #f59e0b;

    --bg-main: #ffffff;
    --sidebar-bg: #f4f6f8;
    --panel-bg: #ffffff;
    --card-bg: #f9fafb;
    --border-color: #e5e7eb;
    --primary: var(--brand-blue);
    --danger: var(--brand-red);
    --text-main: #111827;
    --text-muted: #6b7280;
    
    --hover-bg: #f3f4f6;
    --active-bg: transparent; 
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.1);

    /* Cores de Botões - Claro */
    --btn-bg: #f4f6f8;        
    --btn-border: #cbd5e1;    
    --btn-text: #334155;      
    --btn-bg-hover: #e2e8f0;  
    --btn-border-hover: #94a3b8;

    --btn-danger-bg: #fef2f2; 
    --btn-danger-border: #fca5a5; 
    --btn-danger-text: #be123c;   
    --btn-danger-bg-hover: #fee2e2; 
    --btn-danger-border-hover: #f87171; 

    /* Botão Login / Sair (Sidebar) */
    --brand-danger-bg: rgba(185, 43, 39, 0.05);
    --brand-danger-border: rgba(185, 43, 39, 0.2);
    --brand-danger-bg-hover: rgba(185, 43, 39, 0.1);
    --brand-danger-border-hover: rgba(185, 43, 39, 0.4);
}

*, *::before, *::after { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    background-color: var(--bg-main); 
    color: var(--text-main); 
    display: flex; 
    height: 100dvh; 
    min-height: -webkit-fill-available;
    overflow: hidden; 
    transition: background-color 0.2s, color 0.2s;
} 

input, select, button, textarea { 
    font-family: inherit; 
    color: var(--text-main); 
    transition: 0.2s; 
}
.hidden { display: none !important; }

/* ==============================================================
   Sidebar e Header
   ============================================================== */
.sidebar { 
    width: 320px; 
    background-color: var(--sidebar-bg); 
    border-right: 1px solid var(--border-color); 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
    z-index: 100;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
} 
.sidebar-header { padding: 24px 20px 16px 20px; border-bottom: 1px solid var(--border-color); } 

.brand-container { text-align: center; margin-bottom: 24px; }
.brand-logo { max-width: 140px; height: auto; margin-bottom: 8px; }
.brand-subtitle { font-size: 13px; color: var(--text-main); font-weight: 500; } 

.sidebar-controls { display: flex; flex-direction: column; gap: 16px; }

/* Busca Profunda & Botão Novo */
.busca-container { display: flex; align-items: center; gap: 8px; width: 100%; margin: 8px 0; } 
.busca-container #busca { 
    flex: 1; 
    min-width: 0;
    height: 36px;
    padding: 0 12px 0 34px; 
    border-radius: 8px; 
    border: 1px solid var(--border-color); 
    background-color: var(--card-bg); 
    color: var(--text-main); 
    font-size: 13px; 
    font-weight: 500;
    outline: none; 
    box-shadow: var(--shadow-sm) inset;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
} 
.busca-container #busca:focus { 
    border-color: var(--brand-blue); 
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); 
} 
.busca-container #busca::placeholder { color: var(--text-muted); font-size: 12.5px; }

.busca-container .btn-add { 
    height: 36px;
    padding: 0 12px;
    background-color: var(--brand-blue); 
    color: white; 
    border: none; 
    border-radius: 8px; 
    cursor: pointer; 
    font-size: 13px; 
    font-weight: 700;
    display: none; 
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.15s ease;
    box-shadow: var(--shadow-sm);
} 
.busca-container .btn-add:hover { 
    background-color: var(--brand-blue-hover); 
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
} 
.busca-container .btn-add:active { transform: scale(0.97); }

.admin-controls { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.admin-icons-group { display: flex; gap: 8px; }

.btn-icon { 
    background: transparent; 
    border: 1px solid var(--border-color); 
    color: var(--text-muted); 
    border-radius: 6px; 
    cursor: pointer; 
    padding: 6px 8px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: 0.2s; 
    font-size: 14px;
}
.btn-icon:hover { background: var(--hover-bg); color: var(--text-main); }
.btn-icon.warning { color: #f59e0b; border-color: #f59e0b; }

.btn-login-text { 
    background: var(--brand-danger-bg); 
    border: 1px solid var(--brand-danger-border); 
    color: var(--btn-danger-text); 
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px; 
    font-weight: 600; 
    cursor: pointer; 
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}
.btn-login-text:hover { 
    background: var(--brand-danger-bg-hover);
    border-color: var(--brand-danger-border-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.btn-login-text:active { transform: translateY(0); box-shadow: none; }

/* ==============================================================
   Menu Árvore 
   ============================================================== */
.tree-container { flex: 1; overflow-y: auto; padding: 16px 12px; } 
.tree-container::-webkit-scrollbar { width: 4px; }
.tree-container::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }

details { margin: 0; padding: 0; } 

summary { 
    cursor: pointer; 
    padding: 10px 14px; 
    border-radius: 6px; 
    user-select: none; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    transition: color 0.2s; 
    background: transparent; 
    border: none;
} 
summary::-webkit-details-marker { display: none; } 

.menu-label { display: flex; align-items: center; gap: 12px; }
.menu-icon { width: 18px; height: 18px; stroke: var(--text-muted); transition: 0.2s;}
.menu-caret { width: 16px; height: 16px; stroke: var(--text-muted); transition: transform 0.2s; }

/* Macrocategorias */
.secao-root > summary:hover .menu-icon { stroke: var(--brand-red); }
details[open].secao-root > summary .menu-icon { stroke: var(--brand-red); } 
.secao-root > summary { font-size: 15px; font-weight: 600; color: var(--text-main); border: 1px solid transparent; } 

/* Pastas internas */
.cat-group { margin-left: 20px; border-left: 1px solid var(--border-color); padding-left: 0;} 
.cat-group > summary { font-size: 14px; font-weight: 500; color: var(--text-muted); padding: 10px 14px; transition: color 0.2s;} 
.cat-group > summary:hover { color: var(--brand-blue); } 

details[open] > summary .menu-caret { transform: rotate(180deg); }

.item { 
    margin: 0; 
    padding: 8px 14px 8px 24px; 
    cursor: pointer; 
    border-radius: 0; 
    font-size: 13.5px; 
    font-weight: 400; 
    color: var(--text-muted); 
    transition: 0.15s ease; 
    display: flex; 
    flex-direction: column; 
    background: transparent !important;
} 
.item-titulo { display: flex; align-items: center; gap: 8px; } 
.item-desc { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 4px; line-height: 1.3;} 

.item:hover { 
    color: var(--text-main); 
    background-color: var(--hover-bg, rgba(59, 130, 246, 0.08)) !important;
    padding-left: 28px;
} 
.item:hover .item-desc { color: var(--text-main); opacity: 0.8; }
.item.active { color: var(--brand-blue); font-weight: 600; position: relative; } 
.item.active::before { content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background-color: var(--brand-blue); }
.item.active .item-desc { color: var(--brand-blue); opacity: 0.8; font-weight: 400;}

.tree-container.searching { display: flex; flex-direction: column; } 
.tree-container.searching details { display: contents; } 
.tree-container.searching summary { display: none !important; } 
.tree-container.searching .item { border: 1px solid var(--border-color); margin-bottom: 4px; margin-left: 0; padding: 10px 14px; border-radius: 6px; background-color: var(--card-bg) !important;} 

/* ==============================================================
   Área Principal & View Home 
   ============================================================== */
.main-content { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    background-color: var(--bg-main); 
    overflow-y: auto; 
    overflow-x: hidden; 
    padding-bottom: env(safe-area-inset-bottom);
} 
.top-bar { display: flex; align-items: center; justify-content: space-between; padding: 20px 40px 0 40px; padding-top: max(20px, env(safe-area-inset-top)); } 
.btn-group-right { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.content-header { padding: 25px 40px 15px 40px; }
.content-header h1 { font-size: 24px; font-weight: 700; color: var(--text-main); margin: 0; }

#view-home { 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    flex: 1; padding: 40px; text-align: center; color: var(--text-muted);
}
#view-home h2 { font-size: 22px; color: var(--text-main); margin-bottom: 10px;}
#view-home p { font-size: 14px; max-width: 400px; line-height: 1.5;}

#view-prescricao, #view-calculadora, #view-fluxograma, #view-evolucao { 
    display: flex; flex-direction: column; flex: 1; padding: 0 40px 80px 40px; min-height: min-content;
} 

/* ==============================================================
   Textareas (Edições, Prescrição, Evolução)
   ============================================================== */
textarea { 
    width: 100%; 
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--border-color); 
    font-size: 15px; 
    font-family: 'Consolas', monospace; 
    resize: vertical;
    background-color: var(--card-bg); 
    color: var(--text-main); 
    line-height: 1.6; 
    outline: none;
    transition: all 0.2s ease;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
} 

textarea:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15), inset 0 1px 3px rgba(0,0,0,0.05);
    background-color: var(--bg-main);
}

.modal-content textarea { min-height: 300px; height: auto; }
#pdf-texto-edicao { min-height: 500px; height: auto !important; }
#db-texto { min-height: 500px; height: auto !important; }

#texto-prescricao, #texto-evolucao {
    flex: 1;
    min-height: 60vh;
    border: 1px solid var(--border-color) !important;
    background-color: transparent !important;
    border-radius: 8px !important;
    padding: 20px !important;
    box-shadow: none;
    resize: none;
}

[data-theme="light"] #texto-prescricao, 
[data-theme="light"] #texto-evolucao {
    background-color: var(--sidebar-bg) !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.02) !important;
}

#texto-prescricao:focus, #texto-evolucao:focus {
    border-color: var(--brand-blue) !important;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5) !important;
    background: transparent;
}

[data-theme="light"] #texto-prescricao:focus, 
[data-theme="light"] #texto-evolucao:focus {
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15), inset 0 1px 3px rgba(0,0,0,0.05) !important;
}

/* ==============================================================
   Calculadoras Clínicas
   ============================================================== */
.calc-form { 
    display: flex; flex-direction: column; gap: 16px; background: var(--card-bg); 
    padding: 24px; border-radius: 12px; border: 1px solid var(--border-color);
} 

.calc-row { 
    display: flex; align-items: center; justify-content: space-between; 
    padding: 10px 0; border-bottom: 1px solid var(--border-color); flex-wrap: wrap; gap: 10px;
} 
.calc-row:last-child { border-bottom: none; padding-bottom: 0; }
.calc-row label { font-size: 14px; font-weight: 500; color: var(--text-main); flex: 1; min-width: 200px;}

/* inputmode="decimal" entra junto com [type=number]: os campos das calculadoras
   dinâmicas viraram type="text" pra aceitar a vírgula decimal, e sem isso
   perderiam a estilização. */
.calc-row input[type="number"], .calc-row input[inputmode="decimal"], .calc-row select, .calc-row-multi input[type="number"], .calc-row-multi input[inputmode="decimal"] {
    padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border-color);
    background-color: var(--bg-main); color: var(--text-main); outline: none;
    width: auto; max-width: 280px; text-align: right; font-size: 13px; font-weight: bold;
}
.calc-row select { text-align: left; min-width: 140px;}
.calc-row input[type="number"]:focus, .calc-row input[inputmode="decimal"]:focus, .calc-row select:focus, .calc-row-multi input[type="number"]:focus, .calc-row-multi input[inputmode="decimal"]:focus { border-color: var(--brand-blue); }
.calc-row input[type="checkbox"] { transform: scale(1.3); cursor: pointer; accent-color: var(--brand-blue); } 

#container-calculadora { width: 100%; }

.calc-row > div { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; text-align: center; }

.calc-row-multi {
    display: flex; align-items: flex-start; justify-content: center; gap: 40px; 
    padding: 20px; border-radius: 8px; background: var(--bg-main); 
    border: 1px solid var(--border-color); flex-wrap: wrap; margin-bottom: 15px;
}
.calc-row-multi > div { display: flex; flex-direction: column; align-items: center; justify-content: center; width: auto !important; text-align: center; }

.calc-row input[type="range"], .calc-row-multi input[type="range"] {
    width: 100%; min-width: 160px; max-width: 280px; margin: 15px auto 5px auto; display: block; cursor: pointer; accent-color: var(--brand-blue);
}

.btn-calc-executar {
    background-color: var(--brand-blue); color: white; border: none; padding: 12px 24px; border-radius: 8px; 
    font-size: 15px; font-weight: 600; cursor: pointer; transition: 0.2s; width: fit-content; min-width: 220px; 
    align-self: center; margin: 20px auto 0 auto; display: block;
}
.btn-calc-executar:hover { background-color: var(--brand-blue-hover); }

.calc-result { margin-top: 24px; display: none; width: 100%; }

.pediatrica-card { 
    background-color: var(--card-bg); padding: 16px; border-radius: 8px; margin-bottom: 12px; border-left: 4px solid var(--success); 
    border-top: 1px solid var(--border-color); border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); text-align: left;
} 
.pediatrica-title { font-weight: 600; font-size: 15px; margin-bottom: 5px; color: var(--text-main); display: flex; align-items: center; gap: 6px;} 
.pediatrica-detalhes { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; } 
.pediatrica-resultado { font-size: 14px; font-weight: 700; color: var(--brand-blue); } 

.timeline-item { padding: 16px; border-left: 3px solid var(--border-color); margin-bottom: 12px; background-color: var(--card-bg); border-radius: 0 8px 8px 0; text-align: left; font-size: 14px;} 
.timeline-title { font-weight: 700; font-size: 12px; margin-bottom: 8px; display: inline-block; padding: 4px 8px; border-radius: 4px; color: white; background-color: var(--text-muted);} 
.dose-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--border-color); }
.dose-line:last-child { border-bottom: none; }

/* No mobile, quando o rótulo e a dose têm muito texto, o lado a lado
   (space-between) fica espremido e desalinhado. Empilha: rótulo em cima e a
   dose logo abaixo, em destaque, com o separador tracejado entre os itens. */
@media (max-width: 600px) {
    .dose-line { flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 0; }
    .dose-line > span { width: 100%; }
    .dose-line > strong { text-align: left; align-self: stretch; font-size: 15px; }
}

/* ==============================================================
   Botões de Ação Global e Favoritos
   ============================================================== */
.btn-outline-small, .btn-outline, .btn-danger, .btn-solid, .btn-cancel {
    display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; 
    font-family: inherit; font-weight: 500; cursor: pointer; transition: all 0.2s ease; text-align: center; width: fit-content;
}

.btn-outline, .btn-cancel { background-color: var(--btn-bg); border: 1px solid var(--btn-border); color: var(--btn-text); padding: 8px 14px; font-size: 13.5px; }
.btn-outline:hover, .btn-cancel:hover { background-color: var(--btn-bg-hover); border-color: var(--btn-border-hover); color: var(--text-main); }

.btn-outline-small { background-color: var(--btn-bg); border: 1px solid var(--btn-border); color: var(--btn-text); padding: 6px 12px; font-size: 12px; }
.btn-outline-small:hover { background-color: var(--btn-bg-hover); border-color: var(--btn-border-hover); color: var(--text-main); }

/* Botão Favoritar - DOURADO / AMARELO */
#btn-favoritar {
    color: #f59e0b !important;
    border-color: #f59e0b !important;
    background-color: transparent !important;
    transition: all 0.2s ease;
}
#btn-favoritar:hover { 
    background-color: rgba(245, 158, 11, 0.1) !important; 
    color: #f59e0b !important; 
}
#btn-favoritar.remover { 
    background-color: #f59e0b !important; 
    color: white !important; 
}
#btn-favoritar.remover:hover { 
    background-color: #d97706 !important; 
    border-color: #d97706 !important;
    color: white !important; 
}

/* Botões de Perigo */
.btn-danger, .btn-outline-small.danger { background-color: var(--btn-danger-bg); border: 1px solid var(--btn-danger-border); color: var(--btn-danger-text); }
.btn-danger { padding: 8px 14px; font-size: 13.5px; }
.btn-danger:hover, .btn-outline-small.danger:hover { background-color: var(--btn-danger-bg-hover); border-color: var(--btn-danger-border-hover); color: var(--btn-danger-text); }

.btn-solid { background-color: var(--brand-blue); color: #ffffff; border: 1px solid var(--brand-blue); padding: 8px 16px; font-size: 13.5px; font-weight: 600; }
.btn-solid:hover { background-color: var(--brand-blue-hover); border-color: var(--brand-blue-hover); }
.btn-solid.success { background-color: var(--success); border-color: var(--success); }
.btn-solid.success:hover { background-color: #059669; border-color: #059669; }

.acoes-container { display: flex; gap: 8px; padding-top: 20px; border-top: 1px solid var(--border-color); flex-wrap: wrap; justify-content: flex-start; } 

/* ==============================================================
   Modais e Botões do Painel
   ============================================================== */
.modal-overlay { 
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0, 0, 0, 0.75); align-items: center; justify-content: center; z-index: 2000; 
} 

.modal-content { 
    background-color: var(--panel-bg); padding: 32px; border-radius: 12px; width: 600px; 
    max-width: 95%; max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; 
    border: 1px solid var(--border-color); box-shadow: var(--shadow-md);
    margin-top: env(safe-area-inset-top);
    margin-bottom: env(safe-area-inset-bottom);
} 
.modal-content.small { width: 420px; } 

.login-modal { width: 380px; padding: 32px; } 
.login-header { text-align: center; margin-bottom: 5px; }
.login-logo { max-width: 140px; margin-bottom: 12px; }
.login-header h3 { font-size: 18px; font-weight: 600; color: var(--text-main); }

/* Modais de Autenticação em Tela Cheia */
#modal-login,
#modal-register,
#modal-reset,
#modal-nova-senha,
#modal-reenviar-email {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    z-index: 99999;
    display: none; 
    align-items: center;
    justify-content: center;
    background: #090d16;
}

/* Modais que precisam aparecer POR CIMA das telas de autenticação acima.
   Aquelas são fixas em z-index 99999 com fundo OPACO, então qualquer modal
   no z-index padrão de .modal-overlay (2000) abre atrás delas: fica
   display:flex, ocupando a tela inteira, e mesmo assim invisível — sem erro
   nenhum no console. Foi o que escondeu o modal de pagamento e o de termos. */
#modal-plano-expirado,
#modal-teste-gratis,
#modal-conflito-sessao,
#modal-termos-lgpd {
    z-index: 100001;
}

[data-theme="light"] #modal-login,
[data-theme="light"] #modal-register,
[data-theme="light"] #modal-reset,
[data-theme="light"] #modal-nova-senha,
[data-theme="light"] #modal-reenviar-email {
    background: #f8fafc;
}

#modal-login .login-modal,
#modal-register .modal-content,
#modal-reset .modal-content,
#modal-nova-senha .modal-content,
#modal-reenviar-email .modal-content {
    background-color: #111827;
    color: #f8fafc;
    border: 1px solid #1e293b;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    padding: 36px 32px;
    max-width: 95%;
}

[data-theme="light"] #modal-login .login-modal,
[data-theme="light"] #modal-register .modal-content,
[data-theme="light"] #modal-reset .modal-content,
[data-theme="light"] #modal-nova-senha .modal-content,
[data-theme="light"] #modal-reenviar-email .modal-content {
    background-color: #ffffff;
    color: #0f172a;
    border-color: #cbd5e1;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
}

#modal-login .login-modal,
#modal-reset .modal-content,
#modal-nova-senha .modal-content,
#modal-reenviar-email .modal-content {
    width: 400px;
}

#modal-login input,
#modal-register input,
#modal-reset input,
#modal-nova-senha input,
#modal-reenviar-email input {
    background-color: #0f172a;
    border: 1px solid #334155;
    color: #ffffff;
}

[data-theme="light"] #modal-login input,
[data-theme="light"] #modal-register input,
[data-theme="light"] #modal-reset input,
[data-theme="light"] #modal-nova-senha input,
[data-theme="light"] #modal-reenviar-email input {
    background-color: #ffffff;
    border-color: #94a3b8;
    color: #0f172a;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

#modal-login input:focus,
#modal-register input:focus,
#modal-reset input:focus,
#modal-nova-senha input:focus,
#modal-reenviar-email input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.premium-banner-blue { background-color: var(--hover-bg); color: var(--brand-blue); padding: 12px; border-radius: 6px; text-align: center; font-size: 13px; font-weight: 600; border: 1px solid var(--border-color); }

.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 13px; color: var(--text-muted); font-weight: 500; }

.modal-content input[type="text"], 
.modal-content input[type="password"], 
.modal-content input[type="number"], 
.modal-content input[type="email"], 
.modal-content input[type="tel"] { 
    width: 100%; 
    padding: 10px 14px; 
    border-radius: 8px; 
    border: 1px solid var(--border-color); 
    background-color: var(--card-bg); 
    color: var(--text-main); 
    font-size: 14px; 
    outline: none; 
    transition: 0.2s; 
    box-shadow: var(--shadow-sm) inset;
} 

.modal-content input:focus { 
    border-color: var(--brand-blue); 
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); 
}

.btn-full { width: 100% !important; padding: 12px; font-weight: 600; font-size: 15px;}
.login-links { display: flex; justify-content: space-between; margin-top: 10px; }
.login-links-centro { justify-content: center; margin-top: 12px; }
.login-divisor { display: flex; align-items: center; gap: 12px; margin: 14px 0 10px; color: var(--text-muted); font-size: 12.5px; }
.login-divisor::before, .login-divisor::after { content: ''; flex: 1; height: 1px; background: var(--border-color); }
/* Criar conta: botão sóbrio, do tamanho do "Fazer Login", em verde para
   se diferenciar do login sem gritar. */
.btn-cta-conta { display: block; width: 100%; padding: 12px; border: none; border-radius: 8px; cursor: pointer; text-align: center; color: #fff; background: var(--success); font: inherit; font-size: 15px; font-weight: 600; transition: background .15s ease, box-shadow .15s ease; }
.btn-cta-conta:hover { background: #047857; box-shadow: 0 4px 12px rgba(5, 150, 105, .25); }
.btn-cta-conta:active { background: #065f46; }
.btn-cta-conta:focus-visible { outline: 2px solid var(--success); outline-offset: 2px; }
.login-links a { color: var(--text-muted); font-size: 13px; text-decoration: none; transition: 0.2s;}
.login-links a:hover { color: var(--brand-blue); }

.modal-content h3 { font-size: 18px; font-weight: 600; color: var(--text-main); margin: 0;}
.modal-subtitle { font-size: 13px; color: var(--text-muted); margin: 0;}
.form-grid { display: flex; flex-direction: column; gap: 12px; }
.modal-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; flex-shrink: 0; } 

.panel-box { background-color: var(--card-bg); padding: 16px; border-radius: 8px; border: 1px solid var(--border-color); }
.panel-box.dashed { border-style: dashed; }
.input-row { display: flex; gap: 12px; margin-bottom: 12px; }
.input-label { font-size: 13px; color: var(--text-muted); }
.align-center { align-items: center; }

/* Dashboard Admin e Erros */
.view-admin { max-height: 90vh; }
.dashboard-grid { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px;}
.dash-card { flex: 1; background: var(--card-bg); border: 1px solid var(--border-color); padding: 16px; border-radius: 8px; text-align: center; }
.dash-title { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; font-weight: 600; margin-bottom: 8px;}
.dash-value { font-size: 24px; color: var(--text-main); font-weight: 700; }
.dash-value.warning { color: #f59e0b; }
.dash-value.success { color: #10b981; }

#admin-user-list, #admin-erros-list {
    overflow-y: auto; flex: 1; display: flex; flex-direction: column; 
    gap: 10px; padding-right: 5px; margin-top: 10px;
}
#admin-user-list::-webkit-scrollbar, #admin-erros-list::-webkit-scrollbar { width: 4px; }
#admin-user-list::-webkit-scrollbar-thumb, #admin-erros-list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }

.admin-user-card, .erro-card-admin { 
    background-color: var(--card-bg); padding: 14px; border-radius: 6px; 
    border: 1px solid var(--border-color); display: flex; flex-direction: column; 
    gap: 10px; margin-bottom: 4px; flex-shrink: 0;
}

.admin-user-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.admin-user-actions button, .erro-card-admin button {
    padding: 8px 16px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.1);
    cursor: pointer; font-weight: 600; font-size: 13px; color: #ffffff;
    transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-aprovar, .erro-card-admin button { background-color: var(--success); }
.btn-promover { background-color: var(--brand-blue); }
.btn-remover { background-color: var(--brand-red); }
.admin-user-actions button[onclick*="'tester'"] { background-color: #f59e0b; }
.admin-user-actions button:hover, .erro-card-admin button:hover { 
    transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); filter: brightness(1.1); 
}
.admin-user-actions button:active, .erro-card-admin button:active {
    transform: translateY(0); box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Textos e Auxiliares */
.text-center { text-align: center; }
.text-left { text-align: left; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.pt-15 { padding-top: 15px; }
.w-100 { width: 100%; }

.success-title { color: #10b981; font-size: 20px; }
.success-desc { font-size: 14px; color: var(--text-main); margin: 10px 0;}
.pix-box { background: var(--hover-bg); padding: 16px; border-radius: 8px; margin: 15px 0; border: 1px dashed var(--border-color); }
.pix-key { font-size: 20px; color: var(--brand-blue); letter-spacing: 1px; font-weight: bold; }
.btn-whatsapp { display: block; background-color: #25D366; color: white; text-decoration: none; padding: 12px; border-radius: 6px; font-weight: bold; text-align: center; font-size: 14px; margin-bottom: 10px;}
.info-disclaimer { background: rgba(16, 185, 129, 0.1); border-left: 3px solid #10b981; padding: 12px; font-size: 12px; border-radius: 4px; margin-bottom: 15px;}
.security-badge { text-align: center; font-size: 12px; color: #10b981; margin: 10px 0; font-weight: 500; }
.terms-box { font-size: 11px; color: var(--text-muted); background: var(--hover-bg); padding: 10px; border-radius: 6px; margin: 10px 0; }
.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 12px;}

/* ==============================================================
   TOASTS
   ============================================================== */
#toast-container { position: fixed; top: 20px; right: 20px; z-index: 999999; display: flex; flex-direction: column; gap: 10px; pointer-events: none;}
.med-toast { min-width: 250px; padding: 16px 20px; border-radius: 8px; color: white; font-size: 14px; font-weight: 600; box-shadow: 0 4px 15px rgba(0,0,0,0.3); opacity: 0; transform: translateX(120%); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.med-toast.show { opacity: 1; transform: translateX(0); }
.med-toast.success { background-color: var(--success); border-left: 4px solid #047857; }
.med-toast.error { background-color: var(--danger); border-left: 4px solid #b91c1c; }
.med-toast.info { background-color: var(--brand-blue); border-left: 4px solid #1d4ed8; }
.med-toast.warning { background-color: var(--warning); border-left: 4px solid #b45309; color: #fff;}

/* ==============================================================
   GUIAS CLÍNICOS
   ============================================================== */
.guia-container { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    padding: 20px 0; 
    max-width: 850px; 
    margin: 0 auto; 
    color: var(--text-main); 
    text-align: left; 
}

.guia-main-title { 
    font-size: 26px; 
    font-weight: 800; 
    color: #60a5fa; 
    text-transform: uppercase; 
    border-bottom: 2px solid #1e3a8a; 
    padding-bottom: 8px; 
    margin-bottom: 20px; 
}
.guia-section-title { 
    font-size: 18px; 
    font-weight: 700; 
    color: #93c5fd; 
    margin: 25px 0 10px 0; 
}

[data-theme="light"] .guia-main-title { 
    color: #1e3a8a; 
    border-color: #93c5fd; 
}
[data-theme="light"] .guia-section-title { 
    color: #1e40af; 
}

.guia-text { 
    font-size: 14.5px; 
    line-height: 1.6; 
    margin-bottom: 15px; 
    color: var(--text-main); 
}

/* O marcador ficava PENDURADO FORA do bloco de texto: o `margin-left: 20px`
   empurrava a lista para dentro e o bullet, que por padrão fica na margem,
   sobrava do lado de fora — desalinhado do restante do conteúdo, e pior ainda
   dentro de caixas de destaque, onde ele saía da área com fundo.
   `list-style-position: inside` traz o marcador para dentro do conteúdo, na
   primeira posição da linha, alinhado à esquerda como os demais parágrafos. */
.guia-list,
.guia-container ul, .guia-container ol,
#view-fluxograma ul, #view-fluxograma ol {
    /* Marcador desenhado por ::before em vez do nativo. Duas razões:
       1) o marcador nativo fica na MARGEM (fora da caixa de conteúdo), e era
          o que fazia a bolinha escapar da caixa de destaque;
       2) `list-style-position: inside` resolveria (1), mas quando o <li>
          contém elemento de bloco — e o contenteditable cria <div> a cada
          Enter — o marcador vai para uma LINHA PRÓPRIA, produzindo bolinhas
          soltas alternadas com o texto.
       Com ::before absoluto o marcador fica sempre dentro do conteúdo, na
       mesma linha, e o texto que quebra alinha por baixo do texto. */
    list-style: none;
    margin: 10px 0 15px 0;
    padding: 0;
}
.guia-list li,
.guia-container ul li, .guia-container ol li,
#view-fluxograma ul li, #view-fluxograma ol li {
    position: relative;
    padding-left: 1.15em;
    /* HERDA o tamanho em vez de fixar 14px. Como a lista agora é criada
       convertendo texto que já existe, um tamanho fixo mudava a fonte no
       ato: texto normal é 14.5px e o conteúdo das caixas de destaque é
       13.5px — virar lista encolhia um e aumentava o outro.
       Herdando, converter para lista não altera nada além do marcador. */
    font-size: inherit;
    line-height: inherit;
    margin-bottom: 10px;
    color: inherit;
}
ul.guia-list li::before,
.guia-list li::before,
.guia-container ul:not(.guia-list) li::before,
#view-fluxograma ul:not(.guia-list) li::before {
    content: '•';
    position: absolute;
    left: 0.1em;
    top: 0;
    /* segue a cor do texto ao redor: dentro de caixas de destaque o conteúdo
       tem cor própria, e um marcador fixo destoaria */
    color: inherit;
    /* não editável e fora da seleção: o autor não apaga o marcador sem querer */
    user-select: none;
    pointer-events: none;
}
/* Lista numerada (botão "1. Lista"): o mesmo tratamento, com contador no lugar
   do bullet — senão o ::before acima forçaria "•" também nas numeradas. */
ol.guia-list, .guia-container ol, #view-fluxograma ol { counter-reset: item-guia; }
ol.guia-list li, .guia-container ol li, #view-fluxograma ol li { counter-increment: item-guia; padding-left: 1.6em; }
ol.guia-list li::before,
.guia-container ol li::before,
#view-fluxograma ol li::before {
    content: counter(item-guia) '.';
    left: 0;
    font-variant-numeric: tabular-nums;
}
.guia-list li:last-child { margin-bottom: 0; }
/* O <li> pode conter <div>/<p> criados pelo contenteditable — sem isto eles
   adicionariam margem própria e desencontrariam o texto do marcador. */
.guia-list li > div, .guia-list li > p { margin: 0; }

/* Caixas de Destaque / Alertas */
.guia-highlight-box { 
    background-color: rgba(59, 130, 246, 0.12); 
    border-left: 4px solid #60a5fa; 
    padding: 16px; 
    margin: 15px 0; 
    border-radius: 0 8px 8px 0; 
    color: var(--text-main);
}
.guia-highlight-title { 
    font-size: 13.5px; 
    font-weight: 700; 
    color: #60a5fa; 
    text-transform: uppercase; 
    margin-bottom: 8px; 
    display: flex; 
    align-items: center; 
    gap: 6px; 
}

[data-theme="light"] .guia-highlight-box { 
    background-color: #eff6ff; 
    border-left-color: #3b82f6; 
}
[data-theme="light"] .guia-highlight-title { 
    color: #1e40af; 
}

.guia-highlight-box.yellow {
    background-color: rgba(245, 158, 11, 0.12);
    border-left: 4px solid #f59e0b;
}
.guia-highlight-box.yellow .guia-highlight-title { 
    color: #fbbf24; 
}

[data-theme="light"] .guia-highlight-box.yellow {
    background-color: #fef3c7;
    border-left-color: #f59e0b;
}
[data-theme="light"] .guia-highlight-box.yellow .guia-highlight-title { 
    color: #b45309; 
}

.guia-highlight-box.red {
    background-color: rgba(239, 68, 68, 0.12);
    border-left: 4px solid #ef4444;
}
.guia-highlight-box.red .guia-highlight-title { 
    color: #f87171; 
}

[data-theme="light"] .guia-highlight-box.red {
    background-color: #fee2e2;
    border-left-color: #ef4444;
}
[data-theme="light"] .guia-highlight-box.red .guia-highlight-title {
    color: #b91c1c;
}

/* Termo buscado, marcado dentro do conteúdo aberto. Amarelo é o que o olho
   já espera de "resultado de busca", e o <mark> padrão do navegador usa preto
   sobre amarelo — ilegível no tema escuro do app, daí a cor explícita. */
mark.busca-destaque {
    background-color: rgba(245, 158, 11, 0.38);
    color: inherit;
    border-radius: 3px;
    padding: 0 2px;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.5);
}
[data-theme="light"] mark.busca-destaque {
    background-color: #fde68a;
    color: #78350f;
}

/* Verde: critérios de baixo risco, alta, ou conduta confirmada. Mesmas
   proporções das outras três — o que muda é só a cor. */
.guia-highlight-box.green {
    background-color: rgba(16, 185, 129, 0.12);
    border-left: 4px solid #10b981;
}
.guia-highlight-box.green .guia-highlight-title {
    color: #34d399;
}

[data-theme="light"] .guia-highlight-box.green {
    background-color: #d1fae5;
    border-left-color: #10b981;
}
[data-theme="light"] .guia-highlight-box.green .guia-highlight-title {
    color: #047857;
}

/* Receituário Padrão */
.prescricao-print-card { 
    background-color: var(--card-bg); 
    padding: 20px; 
    border-radius: 8px; 
    margin-bottom: 15px; 
    border-left: 4px solid var(--brand-blue); 
    border-top: 1px solid var(--border-color); 
    border-right: 1px solid var(--border-color); 
    border-bottom: 1px solid var(--border-color); 
    text-align: left;
    box-shadow: var(--shadow-sm);
} 
.prescricao-print-title { 
    font-weight: 700; 
    font-size: 16px; 
    margin-bottom: 12px; 
    color: var(--brand-blue); 
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 8px;
}
.prescricao-print-content {
    font-size: 14.5px;
    color: var(--text-main);
    line-height: 1.6;
    white-space: pre-wrap;
    font-family: inherit;
}

/* Tabelas */
.guia-table-wrapper {
    margin: 15px 0;
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}
.guia-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.guia-table th, .guia-table td {
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    text-align: left;
    color: var(--text-main);
    vertical-align: top;
}
.guia-table thead th {
    background: var(--brand-blue);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.3px;
}
.guia-table tbody tr:nth-child(even) {
    background: var(--hover-bg);
}

/* Barra de Formatação */
.formatting-bar {
    padding: 8px 16px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.btn-fmt {
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: 0.2s;
}
.btn-fmt:hover {
    background: var(--hover-bg);
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}
.fmt-color-picker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
}
.fmt-color-picker input[type="color"] {
    border: none;
    width: 18px;
    height: 18px;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

/* ==============================================================
   ESTILOS ESPECÍFICOS: BANNER FLUTUANTE PCR E PULSO
   ============================================================== */
@keyframes pcrPulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.pcr-pulse-dot {
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border-radius: 50%;
    display: inline-block;
    animation: pcrPulse 1.5s infinite;
}

#pcr-floating-banner:hover {
    transform: translateX(-50%) scale(1.03) !important;
    transition: transform 0.2s ease;
}

/* ==============================================================
   TOUR INTERATIVO (BOAS-VINDAS)
   ============================================================== */
.tour-spotlight-mask {
    position: fixed;
    z-index: 99990;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.82);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    border: 2px solid #3b82f6;
    animation: tour-pulse-glow 2s infinite;
}

@keyframes tour-pulse-glow {
    0%, 100% {
        box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.82), 0 0 15px rgba(59, 130, 246, 0.6);
    }
    50% {
        box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.85), 0 0 25px rgba(59, 130, 246, 0.9);
    }
}

.tour-coachmark-card {
    position: fixed;
    z-index: 99995;
    width: 90%;
    max-width: 440px;
    background-color: var(--card-bg, #ffffff);
    color: var(--text-main, #0f172a);
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
    transition: all 0.3s ease;
}

[data-theme="dark"] .tour-coachmark-card,
body:not([data-theme="light"]) .tour-coachmark-card {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

.tour-step-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    margin-bottom: 12px;
}

.tour-demo-box {
    background: var(--hover-bg, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    padding: 14px;
    margin: 14px 0;
    text-align: left;
}

/* ==============================================================
   FLUXOGRAMAS
   ============================================================== */
#view-fluxograma { 
    display: none; 
    flex-direction: column; 
    flex: 1; 
    align-items: center; 
    justify-content: flex-start; 
    background-color: #1a1a1a; 
    padding: 25px; 
    overflow: auto; 
}
[data-theme="light"] #view-fluxograma { background-color: transparent; }

/* ==============================================================
   BLOCOS DE FLUXOGRAMA ("sca-*") — fallback global
   ==============================================================
   Usado só pelos 3 fluxogramas legados fixos em <template> no index.html
   (não têm <style> própria embutida). Fluxogramas salvos no banco trazem
   sua própria cópia dessa MESMA folha de estilo embutida no HTML (ver
   salvarFluxograma() em public/construtor.html) — as duas precisam ficar
   idênticas, junto com o <style> do editor no <head> de construtor.html.
   Ver o comentário completo dessa decisão lá. */
.sca-container { display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: system-ui, -apple-system, sans-serif; padding: 20px; width: 100%; box-sizing: border-box; }

.sca-box { background: #ffffff; border: 1px solid #e2e8f0; border-left: 5px solid #3b82f6; border-radius: 10px; padding: 14px 18px; text-align: center; width: 90%; max-width: 360px; font-size: 13px; font-weight: 700; color: #1e293b; position: relative; box-sizing: border-box; box-shadow: 0 2px 8px rgba(15,23,42,0.12); line-height: 1.45; }

.sca-decision { position: relative; display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-width: 170px; max-width: 320px; min-height: 92px; padding: 22px 36px; margin: 8px auto; color: var(--decision-border, #b45309); font-weight: 800; font-size: 12.5px; text-align: center; box-sizing: border-box; word-break: break-word; background: transparent; letter-spacing: 0.2px; }
.sca-decision::before { content: ''; position: absolute; inset: 0; background: var(--decision-bg, #fffbeb); border: 2px solid var(--decision-border, #f59e0b); border-radius: 6px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); box-shadow: 0 2px 8px rgba(15,23,42,0.12); z-index: -1; }

.sca-arrow-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sca-arrow-label { font-size: 11.5px; font-weight: 800; color: var(--label-color, #475569); }
.sca-arrow { text-align: center; line-height: 1; color: #64748b; font-size: 22px; font-weight: bold; }
.sca-arrow svg { display: block; }
.sca-arrow.dir-right { transform: rotate(-90deg); }
.sca-arrow.dir-left { transform: rotate(90deg); }
.sca-arrow.dir-diag-right { transform: rotate(-45deg); }
.sca-arrow.dir-diag-left { transform: rotate(45deg); }

.sca-header { width: 92%; max-width: 520px; margin: 4px auto; padding: 13px 20px; border-radius: 10px; text-align: center; font-weight: 800; font-size: 14px; letter-spacing: 0.3px; color: var(--header-text, #ffffff); background: var(--header-bg, #1e3a5f); box-shadow: 0 4px 10px rgba(15,23,42,0.18); line-height: 1.4; }

.sca-card { display: flex; flex-direction: column; width: 100%; max-width: 230px; border-radius: 10px; overflow: hidden; box-shadow: 0 3px 10px rgba(15,23,42,0.15); background: #ffffff; border: 1px solid #e2e8f0; }
.sca-card-header { padding: 10px 12px; font-weight: 800; font-size: 12.5px; text-align: center; color: var(--header-text, #fff); background: var(--header-bg, #7f1d2e); }
.sca-card-body { padding: 10px 12px; font-size: 11px; line-height: 1.55; color: #1e293b; }
.sca-card-body ul { margin: 0; padding-left: 15px; }
.sca-card-highlight { margin: 0 10px 10px; padding: 7px 9px; border-radius: 6px; font-size: 10.5px; font-weight: 700; text-align: center; background: #f1f5f9; color: #1e293b; }
.sca-card-footer { padding: 7px; font-size: 10px; font-weight: 800; text-align: center; color: var(--header-text, #fff); background: var(--footer-bg, rgba(15,23,42,0.65)); }

.sca-listbox { box-sizing: border-box; border: 1px solid #cbd5e1; border-radius: 10px; overflow: hidden; background: #ffffff; width: 100%; max-width: 600px; margin: 6px auto; text-align: left; color: #1e293b; box-shadow: 0 2px 8px rgba(15,23,42,0.1); }
.sca-listbox-title { box-sizing: border-box; background: #64748b; color: #fff; padding: 9px 14px; font-weight: 800; font-size: 13px; }
.sca-listbox-body { box-sizing: border-box; padding: 12px 16px; font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; }

.sca-split { display: flex; width: 100%; gap: 12px; justify-content: center; align-items: flex-start; }
.sca-col { flex: 1; display: flex; flex-direction: column; align-items: center; width: 100%; gap: 8px; box-sizing: border-box; }

.sca-node { position: absolute; top: -12px; left: -12px; background: #ffffff; border: 2px solid #64748b; border-radius: 50%; width: 24px; height: 24px; text-align: center; line-height: 20px; font-weight: 800; font-size: 11px; color: #1e293b; z-index: 10; box-sizing: border-box; }

.sca-box.color-blue { border-left-color: #3b82f6 !important; }
.sca-box.color-green { border-left-color: #22c55e !important; }
.sca-box.color-yellow { border-left-color: #f59e0b !important; }
.sca-box.color-red { border-left-color: #ef4444 !important; }
.sca-box.color-purple { border-left-color: #8b5cf6 !important; }
.sca-decision.color-blue { --decision-bg: #eff6ff; --decision-border: #3b82f6; color: #3b82f6 !important; }
.sca-decision.color-green { --decision-bg: #f0fdf4; --decision-border: #22c55e; color: #16a34a !important; }
.sca-decision.color-yellow { --decision-bg: #fffbeb; --decision-border: #f59e0b; color: #b45309 !important; }
.sca-decision.color-red { --decision-bg: #fef2f2; --decision-border: #ef4444; color: #dc2626 !important; }
.sca-decision.color-purple { --decision-bg: #f5f3ff; --decision-border: #8b5cf6; color: #7c3aed !important; }

.sca-header.solid-red, .sca-card.solid-red { --header-bg: #7f1d2e; --footer-bg: #5c1220; }
.sca-header.solid-blue, .sca-card.solid-blue { --header-bg: #1e3a5f; --footer-bg: #142943; }
.sca-header.solid-teal, .sca-card.solid-teal { --header-bg: #0f6674; --footer-bg: #0a4a54; }
.sca-header.solid-green, .sca-card.solid-green { --header-bg: #166534; --footer-bg: #0f4a26; }
.sca-header.solid-amber, .sca-card.solid-amber { --header-bg: #92400e; --footer-bg: #6b2f0a; }
.sca-header.solid-purple, .sca-card.solid-purple { --header-bg: #5b21b6; --footer-bg: #431885; }
.sca-header.solid-gray, .sca-card.solid-gray { --header-bg: #374151; --footer-bg: #232a35; }

/* ==============================================================
   Sidebar Expansível / Recolhível (Desktop) e Responsividade
   ============================================================== */
@media (min-width: 769px) {
    .btn-hamburger { display: none !important; }
    
    .sidebar { transition: width 0.3s ease; overflow-x: hidden; }
    
    .sidebar-top-row { 
        position: relative;
        display: flex; 
        justify-content: center; 
        align-items: center; 
        width: 100%; 
    }
    .desktop-toggle-btn {
        position: absolute;
        right: 0;
    }
    
    .sidebar.collapsed { width: 80px; }
    
    .sidebar.collapsed .brand-subtitle,
    .sidebar.collapsed .sidebar-controls,
    .sidebar.collapsed .menu-label span,
    .sidebar.collapsed .menu-caret,
    .sidebar.collapsed .cat-group,
    .sidebar.collapsed .item { 
        display: none !important; 
    }
    
    .sidebar.collapsed .sidebar-header { padding: 20px 10px; }
    .sidebar.collapsed .sidebar-top-row { flex-direction: column; gap: 15px; }
    .sidebar.collapsed .brand-logo { max-width: 45px; border-radius: 8px; margin: 0; }
    .sidebar.collapsed .desktop-toggle-btn { position: static; }
    
    .sidebar.collapsed .tree-container { padding: 16px 8px; }
    .sidebar.collapsed .secao-root > summary { justify-content: center; padding: 14px 0; }
    .sidebar.collapsed .menu-label { gap: 0; justify-content: center; }
}

@media (max-width: 768px) {     
    .sidebar { 
        position: fixed; 
        left: -100%; 
        top: 0; 
        width: 85%; 
        max-width: 320px; 
        z-index: 1000 !important; 
        transition: left 0.3s ease; 
    }     
    .sidebar.mobile-open { left: 0; }     
    
    .mobile-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 999; }
    .mobile-overlay.mobile-open { display: block; }     
    
    .sidebar-top-row { display: flex; justify-content: center; align-items: center; width: 100%; }
    .desktop-toggle-btn { display: none !important; }
    
    .btn-hamburger { display: block; background: transparent; border: none; font-size: 24px; cursor: pointer; color: var(--text-main);}     
    .main-content { padding: 0; }
    .top-bar { padding: 15px 20px 0 20px; }
    .content-header, #view-home, #view-prescricao, #view-calculadora, #view-fluxograma, #view-evolucao { padding: 15px 20px; }
}

/* Perfil de Usuário no Rodapé da Sidebar */
.user-profile-card {
    margin: auto 16px 16px 16px;
    padding: 10px 12px;
    background: transparent;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.user-profile-card:hover {
    background: var(--hover-bg);
    border-color: var(--border-color);
}
.user-profile-content {
    display: flex;
    align-items: center;
    gap: 12px;
}
.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    object-fit: cover;
    flex-shrink: 0;
}
.user-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}
.user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-plan {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}
.user-settings-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    padding: 4px;
    cursor: pointer;
    transition: color 0.2s;
}
.user-profile-card:hover .user-settings-btn {
    color: var(--text-main);
}

@media (min-width: 769px) {
    .sidebar.collapsed .user-profile-card {
        margin: auto 8px 16px 8px;
        padding: 10px 0;
    }
    .sidebar.collapsed .user-info,
    .sidebar.collapsed .user-settings-btn {
        display: none !important;
    }
    .sidebar.collapsed .user-profile-content {
        justify-content: center;
    }
}

img {
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: auto;
}

/* ==============================================================
   PADRONIZAÇÃO: BOTÕES DO MODAL PCR (DESKTOP E MOBILE)
   ============================================================== */
#pcr-grupo-botoes-acao div[style*="grid-template-columns"] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
}

#pcr-grupo-botoes-acao button {
    width: 100% !important; /* Preenche a coluna inteira */
    height: 100% !important; /* Altura igual para todos na mesma linha */
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 8px 4px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important; /* Evita quebras que deformam o botão */
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* ==============================================================
   CORREÇÃO DEFINITIVA: MODAL PCR MOBILE
   ============================================================== */
@media (max-width: 480px) {
    #modal-pcr * { box-sizing: border-box !important; }

    #modal-pcr .modal-content {
        width: 96vw !important;
        max-width: 96vw !important;
        padding: 16px 8px !important;
        margin: 0 auto !important;
        overflow-x: hidden !important;
    }

    /* Container dos dois relógios */
    #modal-pcr .modal-content > div:nth-of-type(2) {
        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;
        width: 100% !important;
    }

    /* As duas caixas dos cronômetros */
    #modal-pcr .modal-content > div:nth-of-type(2) > div {
        flex: 1 1 0% !important; 
        width: 50% !important;
        min-width: 0 !important; 
        padding: 12px 4px !important;
    }

    #pcr-tempo-total, 
    #pcr-tempo-ciclo {
        font-size: 2.1rem !important; 
        letter-spacing: -1px !important;
        margin: 6px 0 !important;
    }

    /* Ajuste dos textos menores */
    #modal-pcr .modal-content > div:nth-of-type(2) > div > span {
        font-size: 0.65rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
        padding: 0 2px !important;
    }

    /* Grade dos botões de drogas no mobile */
    #pcr-grupo-botoes-acao div[style*="grid-template-columns"] {
        gap: 6px !important;
    }

    #pcr-grupo-botoes-acao button {
        padding: 6px 1px !important;
        font-size: 10.5px !important;
        letter-spacing: -0.4px !important;
        min-height: 42px !important;
    }
}
/* ==============================================================
   GUIAS E FLUXOGRAMAS NO MOBILE
   ============================================================== */
@media (max-width: 768px) {
    #view-prescricao, 
    #view-evolucao {
        word-break: normal !important; 
        overflow-wrap: break-word !important;
        hyphens: none !important;
    }

    #view-prescricao table, 
    #view-evolucao table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #view-prescricao img, 
    #view-evolucao img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 16px auto !important;
        clear: both !important;
    }
}

#view-fluxograma {
    width: 100%;
    min-width: 0;
    align-items: flex-start !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 30px;

    /* A regra geral (#view-prescricao, #view-calculadora, #view-fluxograma,
       #view-evolucao) aplica min-height: min-content. Num fluxograma alto isso
       fazia a seção crescer até a altura TOTAL do conteúdo, em vez de caber na
       tela — e a barra de rolagem horizontal, que fica colada no rodapé da
       caixa, ia parar lá embaixo: só aparecia depois de rolar tudo.
       min-height: 0 devolve a capacidade de encolher, então a seção passa a
       ocupar só o espaço visível e rola por dentro, com a barra horizontal
       sempre à vista no rodapé da área visível. */
    min-height: 0;
    overflow-y: auto;
}

#view-fluxograma .sca-container {
    min-width: max-content !important; 
    padding: 15px !important;
    margin: 0 auto !important;
}

#view-fluxograma .sca-split {
    flex-direction: row !important; 
}

/* ==============================================================
   TELA DE LOADING
   ============================================================== */
#loading, #loading-screen, #splash, .loading-container, #preloader {
    background-color: #000000 !important; 
    color: #f9fafb !important;
}

[data-theme="light"] #loading, 
[data-theme="light"] #loading-screen, 
[data-theme="light"] #splash, 
[data-theme="light"] .loading-container, 
[data-theme="light"] #preloader {
    background-color: #ffffff !important;
    color: #111827 !important;
}

/* Evita "flash" branco em telas sem tema salvo ainda, respeitando o
   modo escuro do sistema operacional. Mas NUNCA deve vencer uma escolha
   explícita de tema claro do app (data-theme="light") — antes disso não
   estava excluído, então usuários com SO em modo escuro viam telas
   (ex: construtor de calculadoras) forçadas em preto mesmo com o app
   configurado para claro. */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]),
    html:not([data-theme="light"]) body:not([data-theme="light"]) {
        background-color: #000000 !important;
    }
}

/* ==============================================================
   RENDERIZAÇÃO EM ALTA DEFINIÇÃO DE IMAGENS EM GUIAS E FLUXOS
   ============================================================== */
.guia-container img,
#view-fluxograma img,
#view-prescricao img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 20px auto !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
    
    image-rendering: auto !important;
    
    /* Fundo neutro caso a imagem tenha transparência */
    background-color: var(--card-bg) !important;
    cursor: zoom-in;
}

/* ==============================================================
   CARD DE IMAGEM DOS GUIAS
   ============================================================== */
/* A classe .guia-image-card só existia dentro de construtor-guia.html, então
   no guia publicado ela ficava SEM ESTILO NENHUM. Combinado com o
   `height: auto !important` da regra acima — que anula o `height: 100%` que o
   construtor grava na imagem ao salvar —, a imagem renderizava na altura
   natural dela, o card (sem overflow) não a continha, e ela invadia o texto
   logo abaixo. Era o que se via no guia publicado, e não na edição. */
.guia-container .guia-image-card {
    position: relative;
    margin: 20px auto;
    max-width: 100%;
    overflow: hidden;
    border-radius: 6px;
}

/* Dois níveis de classe: mais específica que a regra genérica de img acima,
   então vence sem depender só do !important, e devolve à imagem o mesmo
   comportamento que o construtor mostra na edição.
   Se o card não tiver altura fixa gravada (guias antigos), `height: 100%`
   resolve para `auto` e a imagem cai no tamanho natural — degrada sem quebrar. */
.guia-container .guia-image-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 4px !important;
}

/* ==============================================================
   VISUALIZADOR DE IMAGENS (ZOOM EM TELA CHEIA)
   ============================================================== */
#modal-imagem-zoom {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.92);
    z-index: 999999;
    align-items: center;
    justify-content: center;
    cursor: zoom-out; /* Mantém o cursor da lupinha com sinal de menos */
}

.modal-zoom-content {
    position: relative;
    display: inline-flex; /* Faz a caixa encolher e abraçar exatamente a imagem */
    align-items: center;
    justify-content: center;
    max-width: 90vw; /* Dá uma margem para o botão não vazar da tela */
    max-height: 90dvh;
    /* A imagem é ampliada por transform aqui dentro; sem o overflow hidden ela
       vazaria por cima do botão de fechar quando o usuário arrasta. */
    overflow: hidden;
}

/* O app inteiro roda com user-scalable=no (viewport), senão o pinch atrapalha
   a rolagem das condutas. Por isso o zoom da imagem é feito na mão, via
   transform — e o touch-action precisa sair do caminho do navegador. */
#modal-imagem-zoom img {
    touch-action: none;
    transform-origin: 0 0;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
}

#modal-imagem-zoom.esta-ampliada { cursor: grab; }
#modal-imagem-zoom.esta-arrastando { cursor: grabbing; }

.zoom-dica {
    position: fixed;
    bottom: max(18px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s;
}
.zoom-dica.visivel { opacity: 1; }

#modal-imagem-zoom img {
    max-width: 100%;
    max-height: 90dvh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    cursor: default;
}

/* BOTÃO DE FECHAR CRAVADO NA QUINA DA IMAGEM */
.btn-fechar-zoom {
    position: absolute !important; /* Fica relativo à imagem, não à tela */
    top: -16px !important;
    right: -16px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 20px !important;
    background: var(--brand-red) !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
    z-index: 9999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4) !important;
    cursor: pointer;
    transition: transform 0.2s;
}

.btn-fechar-zoom:hover {
    transform: scale(1.1) !important;
}
/* ==============================================================
   BOTÃO DE CALCULADORA INLINE (DENTRO DOS GUIAS/FLUXOS)
   ============================================================== */
.btn-inline-calc {
    background: rgba(59, 130, 246, 0.1);
    color: var(--brand-blue);
    border: 1px dashed var(--brand-blue);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    font-size: 13.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: 0.2s;
    margin: 4px 2px;
    user-select: none;
}
.btn-inline-calc:hover {
    background: var(--brand-blue);
    color: #ffffff;
    border-style: solid;
}


/* ==============================================================
   MODAL DE IMPRESSÃO NO CELULAR
   ==============================================================
   O modal foi desenhado para 800px de largura e empilha pares de campos em
   .input-row lado a lado. Num aparelho de 390px isso espremia seis campos
   abaixo de 150px — o telefone ficava com 85px, e o placeholder "Endereço
   completo do local" não cabia em 140px. Somava-se a isso um .panel-box
   dentro de outro, cobrando 64px de recuo dos dois lados.

   Aqui cada campo passa a ocupar a linha inteira. O `flex: none` é
   obrigatório: os inputs trazem `flex: 1` no atributo style, e em coluna isso
   os faria esticar na altura em vez da largura. */
@media (max-width: 768px) {
    #modal-pdf .input-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    #modal-pdf .input-row > input,
    #modal-pdf .input-row > select,
    #modal-pdf .input-row > textarea {
        flex: none !important;
        width: 100%;
    }

    /* A linha da logomarca junta rótulo, seletor de arquivo, miniatura e dois
       botões. Em coluna ela fica alta demais, então volta a ser horizontal e
       quebra: o seletor ocupa a linha e os botões descem juntos. */
    #modal-pdf .input-row.align-center {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
    #modal-pdf .input-row.align-center > .input-label { width: 100%; }
    #modal-pdf .input-row.align-center > input[type="file"] {
        flex: 1 1 100% !important;
        min-width: 0;
    }
    #modal-pdf .input-row.align-center > button { flex: 1 1 auto !important; }

    /* Caixa dentro de caixa cobrava padding duas vezes. */
    #modal-pdf .panel-box .panel-box {
        padding: 12px;
        margin-left: -4px;
        margin-right: -4px;
    }

    /* O modal ocupa a tela: 800px de largura fixa não cabem, e o conteúdo é
       longo o bastante para justificar a altura toda. */
    #modal-pdf .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100vh !important;
        border-radius: 0;
        padding-left: 14px;
        padding-right: 14px;
    }

    /* Os botões finais viram alvos de toque de largura cheia. */
    #modal-pdf .modal-btns {
        flex-direction: column-reverse;
        gap: 10px;
    }
    #modal-pdf .modal-btns > button { width: 100%; }
}

/* ==============================================================
   ESPECTRO ANTIMICROBIANO (js/espectro.js)
   Busca em texto no lugar de tabela. Tudo em variáveis do tema para
   funcionar no claro e no escuro sem cor solta.
   ============================================================== */
#view-espectro { display: none; flex-direction: column; flex: 1; padding: 0 40px 80px 40px; min-height: min-content; }
.esp { width: 100%; max-width: 860px; margin: 0 auto; }
.esp-carregando, .esp-vazio { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.esp-spinner { width: 28px; height: 28px; margin: 0 auto 14px; border: 3px solid var(--border-color); border-top-color: var(--primary); border-radius: 50%; animation: esp-giro .8s linear infinite; }
@keyframes esp-giro { to { transform: rotate(360deg); } }
.esp-vazio-icone { font-size: 40px; margin-bottom: 8px; }
.esp-vazio h3 { color: var(--text-main); margin: 0 0 6px; }
.esp-aviso-offline { background: var(--warning); color: #fff; font-size: 12px; font-weight: 600; padding: 8px 12px; border-radius: 8px; margin: 12px 0 0; text-align: center; }

/* Topo: modos + busca */
.esp-topo { position: sticky; top: 0; z-index: 5; background: var(--bg-main); padding: 16px 0 8px; }
.esp-modos { display: inline-flex; background: var(--panel-bg); border: 1px solid var(--border-color); border-radius: 10px; padding: 3px; gap: 2px; margin-bottom: 10px; }
.esp-modo { border: none; background: transparent; color: var(--text-muted); font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 8px; cursor: pointer; transition: .15s; }
.esp-modo:hover { color: var(--text-main); }
.esp-modo.ativo { background: var(--card-bg); color: var(--primary); box-shadow: var(--shadow-sm); }
.esp-busca { position: relative; display: flex; align-items: center; }
.esp-lupa { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--text-muted); pointer-events: none; }
#esp-input { width: 100%; box-sizing: border-box; padding: 13px 44px 13px 42px; font-size: 16px; border: 1.5px solid var(--border-color); border-radius: 12px; background: var(--card-bg); color: var(--text-main); outline: none; transition: border-color .15s, box-shadow .15s; }
#esp-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
#esp-input::-webkit-search-cancel-button { display: none; }
.esp-limpar { position: absolute; right: 10px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: var(--hover-bg); color: var(--text-muted); font-size: 18px; cursor: pointer; }
.esp-sugestoes { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; max-height: 320px; overflow-y: auto; }
.esp-sugestoes:not(:empty) { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 6px; box-shadow: var(--shadow-md); }
.esp-sug { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; text-align: left; border: none; background: transparent; padding: 10px 12px; border-radius: 8px; cursor: pointer; color: var(--text-main); font-size: 15px; }
.esp-sug:hover, .esp-sug.foco { background: var(--hover-bg); }
.esp-sug-rotulo mark { background: transparent; color: var(--primary); font-weight: 700; }
.esp-sug-sub { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.esp-sug-vazio { padding: 12px; color: var(--text-muted); font-size: 14px; text-align: center; }

/* Intro e legenda */
.esp-intro { text-align: center; padding: 48px 16px 24px; color: var(--text-muted); }
.esp-intro-icone { font-size: 44px; }
.esp-intro h3 { color: var(--text-main); margin: 8px 0 4px; font-size: 20px; }
.esp-intro p { margin: 4px 0; font-size: 14px; }
.esp-intro-dica { max-width: 480px; margin: 14px auto 0 !important; line-height: 1.5; }
.esp-intro-dica strong { color: var(--text-main); }
.esp-legenda { margin: 22px auto 0; max-width: 520px; text-align: left; display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.5; }
.esp-legenda-linha { display: grid; grid-template-columns: 132px 1fr; gap: 12px; align-items: start; }
.esp-legenda-linha .esp-chip { justify-self: start; cursor: default; margin: 0; }
.esp-legenda-linha .esp-chip:hover { filter: none; transform: none; }
/* Amostras da barra empilhada, para a legenda e para o texto explicativo. */
.esp-amostra { display: inline-block; width: 22px; height: 8px; border-radius: 999px; vertical-align: middle; }
.esp-amostra.cheio { background: var(--success); }
.esp-amostra.ressalva { background: var(--warning); }
.esp-amostra-par { display: inline-flex; gap: 2px; margin-top: 5px; }
.esp-amostra-par .esp-amostra { border-radius: 0; }
.esp-amostra-par .esp-amostra:first-child { border-radius: 999px 0 0 999px; }
.esp-amostra-par .esp-amostra:last-child { border-radius: 0 999px 999px 0; width: 12px; }
/* Linha explicativa que acompanha o resultado — sempre a mesma frase. */
.esp-explica { margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-muted); }
.esp-explica strong { color: var(--text-main); font-weight: 600; }
.esp-chip-mini { display: inline-block; font-size: 12px; font-weight: 700; line-height: 1; }
.esp-chip-mini.total { color: var(--success); }
.esp-chip-mini.parcial { color: var(--warning); }

/* Cartão de resultado — é texto, com hierarquia */
.esp-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; padding: 22px 24px 18px; margin-top: 16px; box-shadow: var(--shadow-sm); }
.esp-card-cab { padding-bottom: 16px; border-bottom: 1px solid var(--border-color); margin-bottom: 8px; }
/* Sem text-transform: uppercase nos rótulos de classe/grupo. As classes já vêm
   em caixa alta do dado, e o uppercase do CSS transforma 'β' em 'Β' (beta
   maiúsculo), que nesta fonte parece um 'B' — "NOVOS B-LACTÂMICOS". */
.esp-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 4px; }
.esp-card h2 { margin: 0; font-size: 24px; line-height: 1.2; color: var(--text-main); }
.esp-resumo { margin-top: 8px; font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.esp-resumo strong { color: var(--text-main); }
.esp-grupo { padding: 14px 0 6px; border-bottom: 1px dashed var(--border-color); }
.esp-grupo:last-of-type { border-bottom: none; }
.esp-grupo h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--text-main); display: flex; align-items: center; gap: 8px; }
.esp-grupo-vazio h4 { color: var(--text-muted); }
.esp-ponto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.esp-ponto.cheio { background: var(--success); }
.esp-ponto.meio { background: var(--warning); }
.esp-ponto.vazio { border: 2px solid var(--border-color); box-sizing: border-box; }
.esp-fracao { font-weight: 500; color: var(--text-muted); text-transform: none; letter-spacing: 0; display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.esp-fracao-ressalva { font-size: 11px; font-weight: 600; color: var(--warning); background: rgba(245,158,11,.12); border-radius: 999px; padding: 1px 8px; }
.esp-linha { margin: 0 0 6px; line-height: 2; font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; column-gap: 2px; }
.esp-item-cob { display: inline; }
/* Chip com ressalva ocupa a linha inteira e leva o motivo logo abaixo: antes
   a observação corria em itálico entre um chip e o outro, e com 3 ressalvas
   seguidas virava um parágrafo sem dono. */
.esp-item-cob.com-obs { display: flex; flex-direction: column; align-items: flex-start; flex-basis: 100%; line-height: 1.5; margin: 4px 0 6px; }
.esp-item-cob.com-obs .esp-obs { display: block; margin: 2px 0 0 10px; padding-left: 10px; border-left: 2px solid rgba(245,158,11,.45); font-style: normal; }
.esp-chip { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 3px 10px 3px 8px; font-size: 13px; font-weight: 600; border: 1px solid transparent; cursor: pointer; line-height: 1.3; vertical-align: middle; margin: 2px 4px 2px 0; transition: .12s; }
.esp-chip.total { background: rgba(16,185,129,.12); color: var(--success); border-color: rgba(16,185,129,.35); }
.esp-chip.parcial { background: rgba(245,158,11,.10); color: var(--warning); border-color: rgba(245,158,11,.4); border-style: dashed; }
.esp-chip:hover { filter: brightness(.92); transform: translateY(-1px); }
.esp-obs { font-size: 12.5px; color: var(--text-muted); font-style: italic; }
.esp-nao-cobre { margin: 4px 0 6px; font-size: 13px; color: var(--text-muted); }
.esp-nota { margin-top: 14px; padding: 14px 16px; background: var(--panel-bg); border-left: 3px solid var(--primary); border-radius: 0 10px 10px 0; }
.esp-nota h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--primary); }
.esp-nota p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-main); }
.esp-fonte { display: inline-block; margin-top: 8px; font-size: 11px; color: var(--text-muted); border: 1px solid var(--border-color); border-radius: 6px; padding: 2px 7px; }
.esp-link { border: none; background: none; padding: 0; color: var(--primary); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.esp-sep { margin: 0 6px; color: var(--text-muted); }
.esp-detalhes { margin-top: 12px; }
.esp-detalhes summary { cursor: pointer; font-size: 13px; color: var(--text-muted); font-weight: 600; }
.esp-nao-lista { margin: 8px 0 0; font-size: 13px; line-height: 1.8; color: var(--text-muted); }

/* Ranking (modo grupo) */
.esp-ranking { list-style: none; margin: 0; padding: 0; }
.esp-ranking li { display: grid; grid-template-columns: minmax(0, 1fr) 90px 108px; grid-template-areas: "nome barra num" "classe barra ressalva"; align-items: center; column-gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-color); }
.esp-ranking li:last-child { border-bottom: none; }
.esp-rank-nome { grid-area: nome; border: none; background: none; padding: 0; text-align: left; font: inherit; font-size: 15px; font-weight: 600; color: var(--text-main); cursor: pointer; }
.esp-rank-nome:hover { color: var(--primary); }
.esp-rank-classe { grid-area: classe; font-size: 11px; color: var(--text-muted); letter-spacing: .04em; }
.esp-rank-barra { grid-area: barra; height: 6px; background: var(--border-color); border-radius: 999px; overflow: hidden; display: flex; }
.esp-rank-barra > span { display: block; height: 100%; }
.esp-rank-barra > .cheio { background: var(--success); }
.esp-rank-barra > .ressalva { background: var(--warning); }
.esp-rank-num { grid-area: num; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-main); font-size: 15px; }
.esp-rank-ressalva { grid-area: ressalva; text-align: right; font-size: 11px; font-weight: 600; color: var(--warning); white-space: nowrap; align-self: start; }
.esp-rank-de { font-weight: 500; color: var(--text-muted); font-size: 12px; }

/* Rodapé admin */
.esp-admin { margin-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 16px; border: 1px dashed var(--border-color); border-radius: 12px; font-size: 13px; }
.esp-admin strong { display: block; color: var(--text-main); }
.esp-admin span { color: var(--text-muted); }
.esp-admin button { flex-shrink: 0; }

@media (max-width: 768px) {
    #view-espectro { padding: 15px 20px; }
    .esp-modos { width: 100%; display: flex; }
    .esp-modo { flex: 1; padding: 8px 6px; font-size: 12.5px; }
    .esp-card { padding: 18px 16px 14px; border-radius: 14px; }
    .esp-card h2 { font-size: 21px; }
    .esp-ranking li { grid-template-columns: minmax(0, 1fr) 108px; grid-template-areas: "nome num" "classe ressalva" "barra barra"; row-gap: 4px; }
    .esp-legenda-linha { grid-template-columns: 1fr; gap: 4px; }
    .esp-admin { flex-direction: column; align-items: stretch; text-align: center; }
}

/* Interações medicamentosas — seção própria dentro do cartão do fármaco */
.esp-inter { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-color); }
.esp-inter h4 { margin: 0 0 10px; font-size: 12px; letter-spacing: .05em; color: var(--text-main); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.esp-inter-contagem { font-size: 11px; font-weight: 700; color: var(--danger); background: rgba(220,38,38,.10); border-radius: 999px; padding: 2px 8px; letter-spacing: 0; }
.esp-inter-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.esp-inter-item { display: grid; grid-template-columns: 78px 1fr; gap: 12px; align-items: start; padding: 10px 12px; border-radius: 10px; background: var(--panel-bg); border-left: 3px solid var(--border-color); }
.esp-inter-item.grav-alta { border-left-color: var(--danger); }
.esp-inter-item.grav-moderada { border-left-color: var(--warning); }
.esp-inter-item.grav-baixa { border-left-color: var(--border-color); }
.esp-inter-grav { font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 3px 0; text-align: center; border-radius: 6px; align-self: start; margin-top: 2px; }
.grav-alta .esp-inter-grav { color: var(--danger); background: rgba(220,38,38,.10); }
.grav-moderada .esp-inter-grav { color: var(--warning); background: rgba(245,158,11,.12); }
.grav-baixa .esp-inter-grav { color: var(--text-muted); background: var(--hover-bg); }
.esp-inter-corpo { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; line-height: 1.5; min-width: 0; }
.esp-inter-corpo strong { color: var(--text-main); }
.esp-inter-corpo span { color: var(--text-muted); }
@media (max-width: 768px) {
    .esp-inter-item { grid-template-columns: 1fr; gap: 6px; }
    .esp-inter-grav { justify-self: start; padding: 2px 8px; }
}

/* Espectro → Doses e Infusões: botão que abre a dose do antimicrobiano. */
.esp-doses { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-color); }
.esp-doses h4 { margin: 0 0 10px; font-size: 12px; letter-spacing: .05em; color: var(--text-main); }
.esp-doses-lista { display: flex; flex-direction: column; gap: 8px; }
.esp-dose-btn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--panel-bg); color: var(--text-main); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.esp-dose-btn:hover { border-color: var(--primary); background: var(--hover-bg); }
.esp-dose-btn:active { transform: scale(.995); }
.esp-dose-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.esp-dose-ico { font-size: 16px; line-height: 1; }
.esp-dose-nome { flex: 1; min-width: 0; }
.esp-dose-tag { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #b45309; background: rgba(245,158,11,.14); border-radius: 999px; padding: 2px 8px; }
.esp-dose-btn.rascunho { border-style: dashed; }
.esp-dose-seta { color: var(--text-muted); font-size: 18px; line-height: 1; }

/* Card de grupo: membros e o que cada um causa. Card do agente: linha "Causa". */
.esp-membros-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.esp-membros-lista li { padding: 10px 12px; border-radius: 10px; background: var(--panel-bg); border-left: 3px solid var(--border-color); }
.esp-membro-nome { border: none; background: none; padding: 0; font: inherit; font-size: 14.5px; font-weight: 700; color: var(--text-main); cursor: pointer; text-align: left; }
.esp-membro-nome:hover { color: var(--primary); }
.esp-membro-doencas { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.esp-membro-doencas.vazio { font-style: italic; }
.esp-doencas { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-main); }
.esp-doencas-rotulo { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); background: var(--hover-bg); border-radius: 6px; padding: 2px 7px; margin-right: 6px; vertical-align: 1px; }
.esp-doencas .esp-fonte { margin-left: 6px; }

/* Perfil Antimicrobiano — lista completa agrupada e barra do admin */
.esp-sug-grupo { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--text-muted); padding: 10px 12px 4px; }
.esp-sug-grupo:not(:first-child) { border-top: 1px solid var(--border-color); margin-top: 4px; }
.esp-admin-barra { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.esp-admin-barra .esp-admin-ocultos { margin-left: auto; }
.esp-card h2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.esp-editar { border: 1px solid var(--border-color); background: var(--panel-bg); color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 600; border-radius: 8px; padding: 5px 10px; cursor: pointer; flex-shrink: 0; }
.esp-editar:hover { color: var(--primary); border-color: var(--primary); }

/* Construtor (modal) */
.esp-editor { width: 760px; gap: 12px; }
.esp-editor label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--text-muted); }
.esp-editor label input, .esp-editor label textarea, .esp-editor select, .esp-editor .esp-ed-inter-linha input, .esp-editor .esp-ed-obs { width: 100%; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-main); font: inherit; font-size: 14px; font-weight: 400; letter-spacing: 0; outline: none; box-sizing: border-box; }
.esp-editor textarea { min-height: 72px; resize: vertical; line-height: 1.5; }
.esp-editor input:focus, .esp-editor textarea:focus, .esp-editor select:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.esp-ed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.esp-ed-sec { padding-top: 12px; border-top: 1px solid var(--border-color); }
.esp-ed-sec h4 { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--text-main); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.esp-ed-sec h4 span { font-size: 11.5px; font-weight: 500; color: var(--text-muted); }
.esp-ed-dica { margin: 0 0 10px; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.esp-ed-grupo { margin-bottom: 10px; }
.esp-ed-grupo h5 { margin: 8px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--text-muted); }
.esp-ed-cel { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; align-items: center; padding: 4px 0; }
.esp-ed-cel .esp-ed-obs { grid-column: 2; margin-top: 4px; font-size: 13px; padding: 7px 10px; }
.esp-ed-nivel { width: 34px; height: 30px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--card-bg); font-size: 15px; cursor: pointer; color: var(--text-muted); transition: .12s; }
.esp-ed-nivel.n-total { color: var(--success); border-color: rgba(16,185,129,.5); background: rgba(16,185,129,.10); }
.esp-ed-nivel.n-parcial { color: var(--warning); border-color: rgba(245,158,11,.55); background: rgba(245,158,11,.10); border-style: dashed; }
.esp-ed-cel-nome { font-size: 14px; color: var(--text-main); }
.esp-ed-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; min-height: 4px; }
.esp-ed-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border-radius: 999px; background: var(--hover-bg); border: 1px solid var(--border-color); font-size: 13px; font-weight: 600; color: var(--text-main); }
.esp-ed-x { border: none; background: transparent; color: var(--text-muted); font-size: 17px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 6px; }
.esp-ed-x:hover { color: var(--danger); background: rgba(220,38,38,.08); }
.esp-ed-inter-linha { display: grid; grid-template-columns: 1.1fr 118px 1.6fr 28px; gap: 6px; align-items: center; margin-bottom: 6px; }
.esp-ed-inter-linha input, .esp-ed-inter-linha select { padding: 7px 10px; font-size: 13px; }
.esp-ed-add { border-style: dashed; font-size: 13px; padding: 9px; }
.esp-ed-remover { margin-right: auto; }
.esp-ed-remover.perigo { color: #fff; background: var(--danger); border-color: var(--danger); }
.esp-ed-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.esp-ed-lista li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--panel-bg); font-size: 14px; }
.esp-ed-lista small { display: block; font-size: 11px; color: var(--text-muted); letter-spacing: .04em; }
@media (max-width: 768px) {
    .esp-editor { width: 100%; padding: 20px 16px; }
    .esp-ed-grid { grid-template-columns: 1fr; }
    .esp-ed-inter-linha { grid-template-columns: 1fr 28px; }
    .esp-ed-inter-linha select { grid-column: 1; }
    .esp-card h2 .esp-editar { order: -1; margin-left: auto; }
}
.esp-ed-mais-obs { border: none; background: none; color: var(--text-muted); font: inherit; font-size: 11.5px; cursor: pointer; padding: 0 4px; text-decoration: underline dotted; text-underline-offset: 3px; }
.esp-ed-mais-obs:hover { color: var(--primary); }

/* Doenças: agentes → escalada */
.esp-chip.neutro { background: var(--hover-bg); color: var(--text-main); border-color: var(--border-color); }
.esp-chip.neutro:hover { border-color: var(--primary); color: var(--primary); }
.esp-chip.texto { background: transparent; color: var(--text-muted); border-color: var(--border-color); border-style: dashed; cursor: default; }
.esp-chip.texto:hover { filter: none; transform: none; }
.esp-chip.externo small, .esp-esc-nome.externo small { font-size: 10px; font-weight: 600; color: var(--text-muted); margin-left: 2px; }
.esp-doenca-resumo { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-main); }
.esp-esc-passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; position: relative; }
.esp-esc-passo { position: relative; padding: 10px 12px 10px 14px; border-radius: 12px; background: var(--panel-bg); border-left: 3px solid var(--primary); }
.esp-esc-passo + .esp-esc-passo { margin-top: 6px; }
.esp-esc-passo + .esp-esc-passo::before { content: '↓'; position: absolute; top: -16px; left: 14px; font-size: 13px; color: var(--text-muted); line-height: 1; }
.esp-esc-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.esp-esc-cab h5 { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--text-main); }
.esp-esc-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.esp-esc-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.esp-esc-item { padding-left: 2px; }
.esp-esc-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.esp-esc-nome { border: none; background: none; padding: 0; font: inherit; font-size: 15px; font-weight: 700; color: var(--text-main); cursor: pointer; text-align: left; }
.esp-esc-nome:hover { color: var(--primary); }
.esp-esc-nome.texto { cursor: default; color: var(--text-main); }
.esp-esc-nome.texto:hover { color: var(--text-main); }
.esp-esc-cob { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.esp-esc-cob.cheio { color: var(--success); background: rgba(16,185,129,.12); }
.esp-esc-cob.meio { color: var(--warning); background: rgba(245,158,11,.12); }
.esp-esc-cob.nada { color: var(--text-muted); background: var(--hover-bg); }
.esp-esc-obs { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.esp-rodape-fonte { margin: 14px 0 0; font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.esp-rodape-fonte .esp-fonte { margin-top: 0; }
/* Cruzamento nos cards de fármaco e de agente */
.esp-indic { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-color); }
.esp-indic h4 { margin: 0 0 10px; font-size: 12px; letter-spacing: .05em; color: var(--text-main); display: flex; align-items: baseline; gap: 8px; }
.esp-indic h4 span { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.esp-indic-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.esp-indic-lista li { padding: 9px 12px; border-radius: 10px; background: var(--panel-bg); }
.esp-indic-nome { border: none; background: none; padding: 0; font: inherit; font-size: 14px; font-weight: 700; color: var(--text-main); cursor: pointer; text-align: left; }
.esp-indic-nome:hover { color: var(--primary); }
.esp-indic-passos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.esp-indic-passo { font-size: 12px; color: var(--text-main); background: var(--hover-bg); border-radius: 6px; padding: 2px 8px; }
.esp-indic-passo em { color: var(--text-muted); font-style: normal; }
/* Construtor de doença */
.esp-ed-ag-linha { display: grid; grid-template-columns: 1.4fr 1fr 28px; gap: 6px; align-items: center; margin-bottom: 6px; }
.esp-ed-fa-linha { display: grid; grid-template-columns: 1.1fr 1fr 1.3fr 28px; gap: 6px; align-items: center; margin-bottom: 6px; }
.esp-ed-ag-linha input, .esp-ed-ag-linha select, .esp-ed-fa-linha input, .esp-ed-fa-linha select { padding: 7px 10px; font-size: 13px; }
.esp-ed-passo { padding: 10px 12px; border-radius: 12px; background: var(--panel-bg); border-left: 3px solid var(--primary); margin-bottom: 10px; }
.esp-ed-passo-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.esp-ed-passo-cab input { flex: 1; font-weight: 600; }
.esp-ed-add-fa { display: block; margin-top: 2px; }
@media (max-width: 768px) {
    .esp-modo { font-size: 12px; padding: 8px 4px; white-space: nowrap; }
    .esp-ed-ag-linha { grid-template-columns: 1fr 28px; }
    .esp-ed-ag-linha select { grid-column: 1; }
    .esp-ed-fa-linha { grid-template-columns: 1fr 28px; }
    .esp-ed-fa-linha select, .esp-ed-fa-linha .ef-obs { grid-column: 1; }
}

/* Chamada para assinar (só no período de teste) — rodapé do menu lateral */
.cta-assinar { display: flex; align-items: center; gap: 10px; width: calc(100% - 32px); margin: 8px 16px 0; padding: 10px 12px; border: none; border-radius: 12px; cursor: pointer; text-align: left; color: #fff; background: linear-gradient(135deg, #1d3e69 0%, #2563eb 55%, #059669 100%); box-shadow: 0 6px 18px rgba(37, 99, 235, .28); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; flex-shrink: 0; }
.cta-assinar:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(37, 99, 235, .34); filter: brightness(1.04); }
.cta-assinar:active { transform: translateY(0); }
.cta-assinar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cta-assinar-icone { font-size: 18px; line-height: 1; flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.cta-assinar-texto { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.cta-assinar-texto strong { font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.cta-assinar-texto small { font-size: 11.5px; opacity: .92; line-height: 1.3; }
.cta-assinar-seta { font-size: 20px; line-height: 1; opacity: .85; flex-shrink: 0; }
/* Um brilho discreto de vez em quando chama o olho sem virar ruído; quem
   pediu menos movimento ao sistema não vê animação nenhuma. */
@keyframes ctaBrilho { 0%, 88%, 100% { box-shadow: 0 6px 18px rgba(37, 99, 235, .28); } 94% { box-shadow: 0 6px 24px rgba(5, 150, 105, .55); } }
@media (prefers-reduced-motion: no-preference) { .cta-assinar { animation: ctaBrilho 6s ease-in-out infinite; } }
.cta-assinar.urgente { background: linear-gradient(135deg, #b45309 0%, #ea580c 55%, #dc2626 100%); box-shadow: 0 6px 18px rgba(234, 88, 12, .30); animation: none; }
/* No menu recolhido (desktop) não há largura para o texto. */
.sidebar.collapsed .cta-assinar { display: none !important; }
/* No celular a gaveta é curta (cabeçalho do menu já toma ~40% da tela): a
   chamada vira uma linha só, ~38 px, para o menu continuar respirando. */
@media (max-width: 768px) {
    .cta-assinar { padding: 7px 12px; margin: 6px 12px 0; border-radius: 10px; gap: 8px; }
    .cta-assinar-icone { font-size: 15px; }
    .cta-assinar-texto { flex-direction: row; align-items: baseline; gap: 6px; white-space: nowrap; overflow: hidden; }
    .cta-assinar-texto strong { font-size: 13px; }
    .cta-assinar-texto small { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
    .cta-assinar-texto small::before { content: '· '; }
    .cta-assinar-seta { font-size: 18px; }
}

/* ==============================================================
   MEUS PLANTÕES (js/plantoes.js) — agenda + pagamentos
   ============================================================== */
#view-plantoes { display: none; flex-direction: column; flex: 1; padding: 0 40px 80px 40px; min-height: min-content; }
.pl { width: 100%; max-width: 960px; margin: 0 auto; }
.pl-carregando { text-align: center; padding: 60px 0; color: var(--text-muted); }
.pl-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--text-main); font-size: 12.5px; }
.pl-linha.sync, .pl-chip.sync { border-style: dashed; }
.pl-sync { font-size: 12px; }
.pl-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 16px 0 12px; }
.pl-nav { display: flex; align-items: center; gap: 4px; }
.pl-nav-btn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-main); font-size: 22px; line-height: 1; cursor: pointer; }
.pl-nav-btn:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
.pl-nav-mes { min-width: 190px; padding: 6px 10px; border: 0; background: none; color: var(--text-main); font-size: 20px; font-weight: 700; cursor: pointer; border-radius: 10px; }
.pl-nav-mes span { color: var(--text-muted); font-weight: 500; }
.pl-nav-mes:hover { background: var(--hover-bg); }
.pl-acoes { display: flex; gap: 8px; }
.pl-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--border-color); margin-bottom: 16px; overflow-x: auto; }
.pl-aba { border: 0; background: none; padding: 10px 14px; font: inherit; font-size: 14px; color: var(--text-muted); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.pl-aba.ativa { color: var(--brand-blue); border-color: var(--brand-blue); font-weight: 600; }
.pl-conta { background: var(--warning); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }

.pl-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
@media (max-width: 1100px) { .pl-cards { grid-template-columns: repeat(2, 1fr); } }
.pl-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-card-rotulo { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; }
.pl-card b { font-size: clamp(15px, 1.5vw, 20px); font-variant-numeric: tabular-nums; color: var(--text-main); white-space: nowrap; line-height: 1.2; }
.pl-card small { font-size: 12px; color: var(--text-muted); }
.pl-card.ok b { color: var(--success); }
.pl-card.pend b { color: var(--warning); }
.pl-card.grande b { font-size: 28px; }

.pl-cal { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 14px; padding: 12px; container-type: inline-size; }
/* Calendário estreito (celular ou janela dividida): chip compacto — ícone do
   turno em cima, valor sem "R$" embaixo; pago vira borda verde. */
@container (max-width: 640px) {
    .pl-chip { padding: 2px 3px; letter-spacing: -.2px; }
    .pl-chip-nome, .pl-chip-moeda, .pl-chip-ok { display: none; }
    .pl-chip-topo:empty { display: none; }
    .pl-chip-valor { color: var(--text-main); font-weight: 600; }
    .pl-chip.pago { border-left-color: var(--success); }
    .pl-chip.pago .pl-chip-valor { color: var(--success); }
    .pl-turno-ico { font-size: 11px; }
}
.pl-cal-cabeca { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; padding-bottom: 6px; }
.pl-cal-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.pl-dia { min-height: 84px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-main); padding: 6px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: border-color .15s, background .15s; text-align: left; }
.pl-dia:hover { border-color: var(--brand-blue); }
.pl-dia:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 1px; }
.pl-dia.vazio { border-color: transparent; background: transparent; cursor: default; }
.pl-dia.passado .pl-dia-num { color: var(--text-muted); }
.pl-dia.hoje .pl-dia-num { background: var(--brand-blue); color: #fff; }
.pl-dia-num { font-size: 12.5px; font-weight: 600; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.pl-chips { display: flex; flex-direction: column; gap: 3px; }
.pl-chip { display: flex; flex-direction: column; gap: 0; padding: 3px 6px; border-radius: 6px; font-size: 11px; line-height: 1.25; background: color-mix(in srgb, var(--cor) 22%, var(--card-bg)); border-left: 3px solid var(--cor); color: var(--text-main); cursor: pointer; min-width: 0; }
.pl-chip:hover { background: color-mix(in srgb, var(--cor) 38%, var(--card-bg)); }
.pl-chip-topo { display: flex; align-items: center; gap: 3px; min-width: 0; }
.pl-chip-nome { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-turno-ico { font-size: 10px; line-height: 1; flex-shrink: 0; letter-spacing: -1px; }
.pl-linha-sub .pl-turno-ico { font-size: 11px; margin-right: 4px; letter-spacing: 0; }
.pl-dica + .pl-dica { margin-top: 4px; }
.pl-chip-valor { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-chip.pago .pl-chip-valor { color: var(--success); font-weight: 600; }
.pl-dica { font-size: 12px; color: var(--text-muted); text-align: center; margin: 10px 0 0; }

.pl-sub { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; margin: 22px 0 10px; }
.pl-vazio { padding: 22px; text-align: center; color: var(--text-muted); font-size: 14px; border: 1px dashed var(--border-color); border-radius: 12px; }
.pl-lista { display: flex; flex-direction: column; gap: 6px; }
.pl-linha { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--card-bg); cursor: pointer; transition: border-color .15s; }
.pl-linha:hover { border-color: var(--brand-blue); }
.pl-linha.pago { opacity: .82; }
.pl-linha-data { display: flex; flex-direction: column; align-items: center; min-width: 38px; line-height: 1.1; }
.pl-linha-data b { font-size: 18px; color: var(--text-main); }
.pl-linha-data span { font-size: 11px; color: var(--text-muted); text-transform: uppercase; }
.pl-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--cor, var(--text-muted)); flex-shrink: 0; display: inline-block; margin-right: 8px; }
.pl-ponto.grande { width: 14px; height: 14px; }
.pl-linha-info { flex: 1; min-width: 0; }
.pl-linha-local { font-weight: 600; color: var(--text-main); font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-linha-sub { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-linha-valor { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pl-linha-valor b { font-size: 15px; color: var(--text-main); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-status { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.pl-status.ok { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.pl-status.pend { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.pl-status.agend { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.pl-status.feito { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.pl-pilulas { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.pl-chip.agendado { border-left-style: dashed; }
.pl-chip.agendado .pl-chip-valor { color: var(--danger); }
.pl-linha.agendado .pl-btn-pagar { border-color: var(--border-color); color: var(--text-muted); }
.pl-tabela td.agend { color: var(--danger); }
.pl-modal-data .pl-status { vertical-align: middle; text-transform: none; }
.pl-btn-pagar { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--success); background: transparent; color: var(--success); font-size: 18px; cursor: pointer; flex-shrink: 0; transition: .15s; }
.pl-btn-pagar:hover { background: var(--success); color: #fff; }
.pl-btn-pagar.desfazer { border-color: var(--border-color); color: var(--text-muted); font-size: 16px; }
.pl-btn-pagar.desfazer:hover { background: var(--hover-bg); color: var(--text-main); }
.pl-btn-pagar:disabled { opacity: .5; cursor: default; }

.pl-receber-topo { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; margin-bottom: 10px; }
.pl-por-local { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 8px 14px; display: flex; flex-direction: column; justify-content: center; }
.pl-por-local-item { display: flex; align-items: center; gap: 4px; padding: 6px 0; border-bottom: 1px solid var(--border-color); font-size: 13.5px; }
.pl-por-local-item:last-child { border-bottom: 0; }
.pl-por-local-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-main); }
.pl-por-local-n { color: var(--text-muted); font-size: 12px; margin-right: 8px; }
.pl-por-local-item b { font-variant-numeric: tabular-nums; color: var(--warning); }

.pl-filtros { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 14px; }
.pl-filtro { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); font-weight: 600; margin: 0; }
.pl-filtro > span { flex-shrink: 0; }
.pl-dd { position: relative; display: inline-block; max-width: 240px; vertical-align: middle; }
.pl-dd-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 38px; padding: 7px 10px 7px 12px; font: inherit; font-size: 14px; font-weight: 500; color: var(--text-main); background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; cursor: pointer; text-align: left; white-space: nowrap; transition: border-color .15s, box-shadow .15s; }
.pl-dd-btn:hover, .pl-dd.aberto .pl-dd-btn { border-color: var(--brand-blue); }
.pl-dd.aberto .pl-dd-btn, .pl-dd-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.pl-dd-txt { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pl-dd-seta { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; transition: transform .15s; }
.pl-dd.aberto .pl-dd-seta { transform: rotate(180deg); }
.pl-dd-menu { position: fixed; display: none; flex-direction: column; gap: 1px; padding: 6px; background: var(--panel-bg); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: var(--shadow-md); z-index: 3000; max-height: 300px; overflow-y: auto; min-width: 160px; }
.pl-dd.aberto .pl-dd-menu { display: flex; }
.pl-dd-opt { padding: 8px 32px 8px 10px; border-radius: 7px; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-main); cursor: pointer; white-space: nowrap; position: relative; }
.pl-dd-opt:hover { background: var(--hover-bg); }
.pl-dd-opt.ativo { color: var(--brand-blue); font-weight: 600; }
.pl-dd-opt.ativo::after { content: '✓'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; }
.pl-dd-opt.especial { margin-top: 4px; border-top: 1px solid var(--border-color); border-radius: 0 0 7px 7px; padding-top: 10px; color: var(--brand-blue); }
.pl-modal .pl-campo .pl-dd { display: block; width: 100%; max-width: none; }
.pl-modal .pl-campo .pl-dd-btn { font-size: 15px; font-weight: 400; padding: 10px 12px; min-height: 42px; text-transform: none; letter-spacing: 0; }
.pl-filtro-limpar { border: 0; background: none; color: var(--brand-blue); font: inherit; font-size: 13px; cursor: pointer; padding: 4px 6px; }
.pl-periodo-rotulo { margin-left: auto; }
.pl-por-local-item[data-filtrar-local] { cursor: pointer; border-radius: 6px; padding-left: 4px; padding-right: 4px; }
.pl-por-local-item[data-filtrar-local]:hover { background: var(--hover-bg); }
.pl-por-local-item.ativo { background: color-mix(in srgb, var(--brand-blue) 14%, transparent); }
.pl-tabela tr.clicavel { cursor: pointer; }
.pl-tabela tr.clicavel:hover td { background: var(--hover-bg); }
.pl-tabela tr.ativo td { background: color-mix(in srgb, var(--brand-blue) 14%, transparent); }
.pl-periodo-rotulo { font-size: 14px; color: var(--text-main); font-weight: 600; }
.pl-tabela-wrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: 12px; background: var(--card-bg); }
.pl-tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pl-tabela th, .pl-tabela td { padding: 10px 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border-color); font-variant-numeric: tabular-nums; }
.pl-tabela th:first-child, .pl-tabela td:first-child { text-align: left; }
.pl-tabela th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; }
.pl-tabela tbody tr:last-child td { border-bottom: 0; }
.pl-tabela tfoot td { border-top: 2px solid var(--border-color); font-weight: 700; border-bottom: 0; }
.pl-tabela tr.mudo td { color: var(--text-muted); }
.pl-tabela td.ok { color: var(--success); }
.pl-tabela td.pend { color: var(--warning); font-weight: 600; }

/* ---- modais ---- */
.pl-modal { width: 520px; gap: 14px; position: relative; }
.pl-modal-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-muted); font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 1; }
.pl-modal-x:hover { color: var(--text-main); border-color: var(--text-muted); }
.pl-modal-cabeca { padding-right: 40px; }
.pl-campo-dica { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-muted); line-height: 1.4; min-height: 0; }
.pl-campo-dica:empty { display: none; }
.pl-campo-curto { flex: 0 0 150px !important; }
.pl-modal-locais { width: 620px; }
.pl-modal-agenda { width: 560px; }
.pl-h4 { margin: 6px 0 0; font-size: 14px; color: var(--text-main); }
.pl-texto { margin: 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }
.pl-texto.erro { color: var(--danger); }
.pl-agenda-botoes { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.pl-detalhes code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; background: var(--card-bg); padding: 1px 5px; border-radius: 4px; }
.pl-escopo { display: inline-flex; gap: 4px; padding: 4px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 999px; align-self: flex-start; }
.pl-escopo-btn { border: 0; background: none; padding: 7px 14px; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--text-muted); cursor: pointer; }
.pl-escopo-btn.ativo { background: var(--brand-blue); color: #fff; font-weight: 600; }
.pl-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pl-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 14px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--card-bg); color: var(--text-main); text-decoration: none; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.pl-tile:hover { border-color: var(--brand-blue); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.pl-tile svg { width: 30px; height: 30px; margin-bottom: 4px; color: var(--brand-blue); }
.pl-tile b { font-size: 15px; }
.pl-tile small { font-size: 12px; color: var(--text-muted); line-height: 1.3; }
.pl-tiles.carregando .pl-tile { opacity: .5; pointer-events: none; }
.pl-tiles.erro .pl-tile { opacity: .4; pointer-events: none; }
.pl-agenda-rodape { margin: 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }
.pl-agenda-rodape a { color: var(--brand-blue); text-decoration: none; white-space: nowrap; }
.pl-agenda-rodape a:hover { text-decoration: underline; }
.pl-ajuda { margin: 0; padding: 10px 14px 10px 28px; border: 1px solid var(--border-color); border-radius: 10px; font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }
.pl-ajuda li + li { margin-top: 4px; }
.pl-ajuda b { color: var(--text-main); }
.pl-agenda-botoes a { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; flex: 1 1 200px; text-align: center; }
.pl-copiar { display: flex; gap: 8px; }
.pl-copiar input { flex: 1; min-width: 0; font-size: 13px !important; font-family: ui-monospace, Consolas, monospace !important; }
.pl-copiar .btn-outline { flex-shrink: 0; }
.pl-detalhes { font-size: 13px; color: var(--text-muted); border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 14px; }
.pl-detalhes summary { display: flex; justify-content: flex-start; align-items: center; gap: 6px; padding: 0; cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--text-main); list-style: none; }
.pl-detalhes summary::-webkit-details-marker { display: none; }
.pl-detalhes summary::before { content: "▸ "; color: var(--text-muted); }
.pl-detalhes[open] summary::before { content: "▾ "; }
.pl-detalhes p { margin: 8px 0 0; line-height: 1.5; }
.pl-ag-renovar { align-self: flex-start; font-size: 12.5px; }
.pl-link-google { font-size: 13px; color: var(--brand-blue); text-decoration: none; margin-left: 4px; white-space: nowrap; }
.pl-link-google:hover { text-decoration: underline; }
.pl-modal-cabeca { display: flex; flex-direction: column; gap: 2px; }
.pl-modal-data { font-size: 13.5px; color: var(--text-muted); text-transform: capitalize; }
.pl-campo { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--text-muted); text-transform: uppercase; }
.pl-campo > span { display: block; }
.pl-modal .pl-campo input, .pl-modal .pl-campo select, .pl-horas input { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-main); font: inherit; font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; outline: none; box-sizing: border-box; color-scheme: dark; }
[data-theme="light"] .pl-modal .pl-campo input, [data-theme="light"] .pl-modal .pl-campo select, [data-theme="light"] .pl-horas input { color-scheme: light; }
.pl-modal .pl-campo input:focus, .pl-modal .pl-campo select:focus, .pl-horas input:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.pl-campo-linha { display: flex; gap: 10px; }
.pl-campo-linha .pl-campo { flex: 1; }
.pl-turnos { display: flex; gap: 6px; flex-wrap: wrap; }
.pl-turno { padding: 7px 11px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-main); font: inherit; font-size: 13px; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 500; }
.pl-turno:hover { border-color: var(--brand-blue); }
.pl-turno.ativo { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; font-weight: 600; }
.pl-horas { display: flex; gap: 10px; margin-top: 4px; }
.pl-horas label { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.pl-horas.oculto, .pl-pago-em.oculto { display: none; }
.pl-pago { flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; }
.pl-alternar { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; color: var(--text-main); position: relative; }
.pl-alternar input { position: absolute; opacity: 0; width: 0; height: 0; }
.pl-alternar-visual { width: 42px; height: 24px; border-radius: 12px; background: var(--border-color); position: relative; transition: background .15s; flex-shrink: 0; }
.pl-alternar-visual::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.pl-alternar input:checked + .pl-alternar-visual { background: var(--success); }
.pl-alternar input:checked + .pl-alternar-visual::after { transform: translateX(18px); }
.pl-pago-em { display: inline-flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; color: var(--text-muted); }
.pl-pago-em input { width: auto !important; padding: 7px 10px !important; }
.pl-modal-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.pl-espaco { flex: 1; }
.pl-btn-excluir { color: var(--danger) !important; border-color: color-mix(in srgb, var(--danger) 50%, transparent) !important; }
.pl-locais { display: flex; flex-direction: column; gap: 6px; }
.pl-local { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--card-bg); }
.pl-local.editando { border-color: var(--brand-blue); }
.pl-local-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pl-local-info b { font-size: 14.5px; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-local-info span { font-size: 12px; color: var(--text-muted); }
.pl-local-form { border-top: 1px solid var(--border-color); padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.pl-local-form h4 { margin: 0; font-size: 14px; color: var(--text-main); }
.pl-cores { display: flex; gap: 8px; flex-wrap: wrap; }
.pl-cor { width: 28px; height: 28px; border-radius: 50%; background: var(--cor); border: 3px solid transparent; cursor: pointer; padding: 0; }
.pl-cor.ativa { border-color: var(--text-main); box-shadow: 0 0 0 2px var(--bg-main) inset; }

@media (max-width: 768px) {
    #view-plantoes { padding: 12px 12px 90px; }
    .pl-topo { margin-top: 4px; }
    .pl-nav { width: 100%; justify-content: space-between; }
    .pl-nav-mes { min-width: 0; font-size: 18px; }
    .pl-acoes { width: 100%; }
    .pl-acoes { flex-wrap: wrap; }
    .pl-acoes .btn-solid, .pl-acoes .btn-outline { flex: 1; text-align: center; }
    .pl-acoes .pl-btn-agenda { flex: 1 1 100%; order: 3; }
    .pl-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .pl-card { padding: 10px 12px; }
    .pl-card b { font-size: 17px; }
    .pl-card.grande b { font-size: 24px; }
    .pl-cal { padding: 8px 6px; border-radius: 12px; }
    .pl-cal-grade { gap: 3px; }
    .pl-dia { min-height: 58px; padding: 4px; border-radius: 8px; gap: 3px; }
    .pl-dia-num { width: 20px; height: 20px; font-size: 12px; }
    .pl-chip { font-size: 10px; border-left-width: 2px; }
    .pl-linha { gap: 8px; padding: 9px 10px; }
    .pl-linha-data { min-width: 32px; }
    .pl-linha-valor b { font-size: 14px; }
    .pl-receber-topo { grid-template-columns: 1fr; }
    .pl-filtros { gap: 8px; }
    .pl-filtro { flex: 1 1 45%; }
    .pl-filtro .pl-dd { flex: 1; min-width: 0; max-width: none; }
    .pl-periodo-rotulo { width: 100%; margin-left: 0; font-size: 13px; }
    .pl-modal, .pl-modal-locais, .pl-modal-agenda { width: 100%; padding: 20px 16px; }
    .pl-agenda-botoes a { flex: 1 1 100%; }
    .pl-tiles { grid-template-columns: 1fr; }
    .pl-tile { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; row-gap: 2px; align-items: center; padding: 12px 14px; }
    .pl-tile svg { grid-row: 1 / span 2; margin: 0; }
    .pl-escopo { align-self: stretch; }
    .pl-escopo-btn { flex: 1; }
    .pl-campo-linha { flex-direction: column; }
    .pl-modal-btns .btn-solid, .pl-modal-btns .btn-cancel, .pl-modal-btns .btn-outline { padding: 10px 14px; }
}