/* --- Reset e Estrutura Básica --- */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: #f0f2f5;
    color: #333;
}

/* --- Header Sticky --- */
#main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    /* ALTERAÇÃO AQUI: padding-left zerado ou bem pequeno (ex: 10px) */
    padding-left: 10px; 
    padding-right: 20px;
    
    background-color: #2c3e50;
    color: white;
    height: 100px;
    position: sticky;
    top: 0;
    z-index: 1100;
}

/* Garante que o container da esquerda alinhe tudo no início */
.header-left {
    flex: 3; /* Dá espaço para crescer */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Força itens para a esquerda */
}

/* Ajusta a Logo para alinhar texto e imagem à esquerda */
.logo-area {
    display: flex;
    flex-direction: column;
    
    /* ALTERAÇÃO: Alinha o conteúdo interno (img e p) à esquerda */
    align-items: flex-start; 
    text-align: left;
    
    /* Cria um espaço entre a logo e os botões que virão a seguir */
    margin-right: 30px; 
}

/* Define as áreas da esquerda e direita com o mesmo tamanho */
.header-left, .header-right { 
    flex: 1; 
}

/* Área Direita: Alinha o texto/conteúdo à direita */
.header-right { 
    display: flex;             /* Adicionado flex para garantir alinhamento */
    align-items: center;
    justify-content: flex-end; /* Garante alinhamento à direita */
    text-align: right; 
}

/* Estilo dos Botões */
.header-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.header-buttons .btn-header {
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
}

.main-logo { height: 60px; margin-bottom: 5px; }
.sub-title { font-size: 11px; letter-spacing: 2px; color: #bdc3c7; font-weight: 600; }

/* --- Toolbar Sticky --- */
#toolbar-strip {
    background-color: #34495e;
    color: white;
    padding: 10px 0;
    position: sticky;
    top: 100px; /* Logo abaixo do header */
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    overflow-x: auto;
}

.toolbar-content {
    display: flex;
    align-items: center;
    
    /* MUDANÇA PRINCIPAL: flex-start empurra tudo para a esquerda */
    justify-content: flex-start; 
    
    /* Define o espaço entre cada grupo de botões (Melodia, Ritmo, etc.) */
    gap: 20px; 
    
    /* Alinhamento visual com o Header: */
    /* Se no header usamos padding 0 20px, aqui usamos padding-left 20px para alinhar */
    padding-left: 20px; 
    padding-right: 20px;
    
    width: 100%; /* Garante que o container ocupe a largura toda */
    overflow-x: auto; /* Se a tela for pequena, permite rolar lateralmente */
}

.tool-group { display: flex; align-items: center; gap: 8px; }
.tool-label { font-size: 10px; font-weight: bold; color: #bdc3c7; }

/* --- Padronização Universal dos Botões --- */
/* Esta regra unifica botões do Header e da Toolbar */
.btn-header, 
.tool-group button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Espaçamento entre ícone/emoji e texto */
    
    /* Altura fixa para todos (Quebra, Limpar, Melodia, Ritmo) */
    height: 40px; 
    padding: 0 15px;
    box-sizing: border-box; /* Crucial para a altura ser exata incluindo a borda */
    
    background-color: #f1f3f4;
    color: #3c4043;
    border: 1px solid #dadce0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.2s ease;
}

/* Ajuste para botões que contém apenas ícones (Melodia, Ritmo, Pausas, Intenção) */
/* Isso os deixa perfeitamente quadrados */
.tool-group button:not(:has(span + span)) {
    min-width: 40px;
    padding: 0;
}

.btn-header:hover, 
.tool-group button:hover { 
    background-color: #e8eaed; 
    border-color: #bdc3c7;
}

/* --- Estilo Específico: Botão Limpar --- */
.btn-clear {
    background-color: #f1f3f4 !important; /* Fundo cinza claro como os outros */
    color: #DC0000 !important;           /* Texto e vassoura em vermelho */
    border: 1px solid #e74c3c !important; /* Borda vermelha para destaque */
}

.btn-clear:hover {
    background-color: #fff1f0 !important; /* Fundo levemente avermelhado no hover */
    border-color: #c0392b !important;
}

/* Ajuste fino para os emojis dentro dos botões */
.tool-group button span {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* --- Área do Editor (Justificação Corrigida) --- */
#editor-wrapper {
    width: 100%;
    max-width: 1000px; /* Sincronizado com o cabeçalho */
    margin: 0 auto 50px auto; /* Centraliza abaixo do cabeçalho */
    background: white;
    
    /* Visual de "Cartão" idêntico ao cabeçalho */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border-radius: 8px;
    border: 1px solid #e1e4e8;
}

#document-header {
    /* 1. Alinhamento e Tamanho idêntico ao Editor */
    width: 100%;
    max-width: 1000px; /* Mesma largura máxima do wrapper do texto */
    margin: 30px auto 20px auto; /* Centraliza na tela com margens verticais */
    
    /* 2. Visual de "Cartão" */
    background-color: white;
    padding: 30px 60px; /* Espaçamento interno confortável */
    border-radius: 8px; /* Cantos arredondados */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Sombra suave para destacar do fundo */
    border: 1px solid #e1e4e8; /* Borda sutil cinza claro */
    
    /* Garante que o padding não aumente a largura total */
    box-sizing: border-box; 
}

.header-input, .header-select {
    background-color: transparent;
    border-bottom: 1px solid #eee;
    transition: border-color 0.3s;
}

.header-input:focus, .header-select:focus {
    border-bottom: 1px solid #2c3e50; /* Destaque ao clicar */
}

#editor-container {
    background: white;
    text-align: justify;
    text-justify: inter-word; /* Distribui o espaço entre as unidades */
    line-height: 1.5; 
    padding: 40px 60px 80px;
}

.paragraph {
    display: block;  
    width: 100%;
    margin-bottom: 25px;
    text-align: justify;
    text-justify: inter-word;
}

.word-unit {
    display: inline-block;
    white-space: nowrap; /* Garante que a marca e a palavra nunca se separem */
    cursor: pointer;
    user-select: none;
    margin-right: 0.1em; /* Espaço entre as unidades para justificação */
}

.inflection-mark {
    color: #000080; /* Cor Azul Marinho */
    font-size: 14px;
    font-weight: 900; /* Negrito forte */
    display: inline-block;
    vertical-align: super !important; /* Efeito sobrescrito */
    line-height: 0;
    margin-right: 2px;
    margin-left: 0;
    pointer-events: none;

    /* --- CORREÇÃO PARA MOBILE --- */
    /* 1. Removemos a linha: font-family: 'Segoe UI Emoji', ... */
    
    /* 2. Forçamos o uso da fonte padrão do sistema (que não é de emoji) */
    font-family: sans-serif;
    
    /* 3. Propriedade moderna para dizer ao navegador: "Use a versão de texto deste caractere" */
    font-variant-emoji: text; 
    
    /* 4. Ajuda na renderização de fontes em dispositivos Apple */
    -webkit-font-smoothing: antialiased; 
}

.text-word {
    font-size: 18px;
    font-weight: none;
    color: #000;
}

.word-unit.selected .text-word {
    background-color: #f1c40f;
    border-radius: 3px;
}

/* --- Metadados Estilo --- */
.header-input {
    border: none;
    border-bottom: px solid #f0f0f0;
    padding: 5px 0;
    width: 100%;
    outline: none;
}

.title-input { font-size: 24px; font-weight: 800; margin-bottom: 15px; }

.header-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.header-item { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.header-item label { font-weight: bold; color: #7f8c8d; width: 60px; }

/* Alinhamentos para visualização no Editor */
.paragraph.align-left { text-align: left; }
.paragraph.align-center { text-align: center; }
.paragraph.align-right { text-align: right; }
.paragraph.align-justify { text-align: justify; }

/* --- Overlay Modal --- */
.overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.modal { background: white; padding: 30px; border-radius: 8px; width: 500px; }
.modal textarea { width: 100%; height: 150px; margin: 10px 0; padding: 10px; }

/* --- Estilo da Legenda (Oculta na tela) --- */
.print-only {
    display: none;
}

/* --- IMPRESSÃO --- */
@media print {

    /* Ajuste fino para garantir que o parágrafo ocupe a linha toda no papel */
    .paragraph {
        display: block !important;
        width: 100% !important;
        margin-bottom: 10px !important; /* Espaço entre parágrafos no papel */
    }

    /* 1. Esconde a interface do software */
    #main-header, #toolbar-strip, .overlay { 
        display: none !important; 
    }

    /* 2. Configuração da Página A4 */
    @page {
        size: A4;
        margin: 1.5cm;
    }

    body { 
        background: white !important; 
        width: 100% !important;
    }

/* ALTERAÇÃO 1: REMOÇÃO TOTAL DE BORDAS/LINHAS */
    #editor-wrapper, 
    #editor-container, 
    body {
        border: none !important; 
        border-left: none !important; /* Reforço específico para a esquerda */
        box-shadow: none !important; 
        background: white !important;
        
        /* Mantém as larguras do layout "Print 1" */
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }   

    /* 3. Unifica o alinhamento de todos os blocos */
    #editor-wrapper, 
    #document-header, 
    #print-legend, 
    #editor-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* 4. Cabeçalho de Metadados (Título/Autor) */
    #document-header {
        display: block !important;
        margin-bottom: 15px !important;
        padding-bottom: 25px !important; 
        /* LINHA 1: Espessura diminuída para 1px */
        border-bottom: 2px solid #000 !important; 
    }

    /* Título do Roteiro - Bloco preservado */
    #document-header .title-input, 
    input.title-input, 
    .title-input {
        font-size: 27px !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        height: auto !important;
        min-height: 35px !important; 
        line-height: 1.1 !important;
        display: block !important;
        visibility: visible !important;
        -webkit-appearance: none !important;
        border: none !important;
        margin-bottom: 5px !important; 
        padding: 0 !important;
        color: #000 !important;
    }

    /* Grid de informações (Autor, Projeto, Cliente, Estilo) */
    .header-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 2px 15px !important;
    }

    .header-item {
        display: flex !important;
        align-items: center !important;
        font-size: 14px !important;
    }

    .header-item label {
        font-weight: bold !important;
        color: #000 !important;
        width: 90px !important;
        margin-right: 5px !important;
    }

    .header-input, .header-select {
        font-size: 16px !important;
        color: #000 !important;
        border: none !important;
        background: transparent !important;
        appearance: none !important;
        flex: 1 !important;
    }

    /* 5. LEGENDA ORGANIZADA COM NOVA LINHA INFERIOR */
    .print-only {
        display: block !important;
        margin-top: 20px !important;
        margin-bottom: 25px !important;
        padding: 0 0 20px 0 !important; /* Padding inferior para a linha não colar no texto */
        /* LINHA 2: Nova linha após a legenda, fina como a de cima */
        page-break-inside: avoid;
        box-sizing: border-box !important;
    }

    .print-only h3 {
        font-size: 13px !important;
        margin-bottom: 12px !important;
        color: #333 !important;
        text-transform: uppercase;
        padding-bottom: 5px;
    }

    .legend-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important; 
        gap: 10px 20px !important;
        padding-bottom: 10px;
        border-bottom: 2px solid #000 !important; 
        margin-top: 10px;
    }

    .legend-item {
        font-size: 12px !important;
        display: flex !important;
        align-items: center !important;
        color: #000 !important;
    }

    .legend-item span {
        color: #000080 !important;
        font-weight: 900 !important;
        margin-right: 8px !important;
        font-size: 16px !important;
    }

    /* TRANSFORMANDO BOTÕES EM TEXTO */
    .legend-grid button {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        appearance: none !important;
        display: flex !important;
        align-items: center !important;
        font-size: 16px !important;
        color: #000 !important;
        width: auto !important;
    }

    .legend-grid button::after {
        content: " " attr(title) !important;
        font-size: 12px !important;
        margin-left: 8px !important;
        font-weight: normal !important;
        color: #333 !important;
    }

    /* 6. Corpo de Texto e Justificação */
    #editor-container {
        display: block !important;
        padding-top: 10px !important; /* Respiro após a linha da legenda */
    }

    .paragraph {
        display: block !important;
        width: 100% !important;
        line-height: 1.5 !important;
        margin-bottom: 20px !important;
    }

    .paragraph.align-left { text-align: left !important; }
    .paragraph.align-center { text-align: center !important; }
    .paragraph.align-right { text-align: right !important; }
    .paragraph.align-justify { text-align: justify !important; }

    .text-word { 
        color: black !important; 
        font-size: 18px !important; 
    }
    
    .inflection-mark {
        color: #000080 !important;
        font-size: 16px !important;
        vertical-align: super !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* --- Estilo da Quebra de Página (Tela) --- */
.page-break-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
    padding: 5px;
    color: #95a5a6;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    user-select: none; /* Impede seleção acidental do texto da quebra */
    cursor: default;
}

/* Cria as linhas tracejadas antes e depois do texto */
.page-break-marker::before,
.page-break-marker::after {
    content: "";
    flex: 1;
    border-bottom: 1px dashed #dcdcdc;
    margin: 0 15px;
}

/* --- Estilo da Quebra de Página (Impressão) --- */
@media print {
    .page-break-marker {
        display: block !important;
        
        /* O comando mágico para a impressora: */
        page-break-after: always !important; 
        break-after: page !important;
        
        /* Esconde o visual, mantém a função */
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        color: transparent !important;
        visibility: hidden !important;
    }
}

/* --- Estilo Moderno do Modal de Nuvem --- */

/* O cartão principal */
.modal-cloud {
    background: white;
    padding: 40px 30px;
    border-radius: 12px; /* Cantos mais arredondados */
    width: 380px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.25); /* Sombra suave e profunda */
    text-align: center;
    position: relative;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* Título com ícone */
.modal-cloud-header {
    margin-bottom: 30px;
}

.modal-cloud-title {
    font-size: 22px;
    font-weight: 700;
    color: #2c3e50;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.modal-cloud-subtitle {
    font-size: 13px;
    color: #7f8c8d;
    margin-top: 5px;
}

/* Campos de Input (Visual limpo) */
.input-group {
    margin-bottom: 15px;
    text-align: left;
}

.input-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #95a5a6;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modal-input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #dfe6e9;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    background-color: #fcfcfc;
    transition: all 0.3s ease;
    box-sizing: border-box; /* Garante que padding não estoure a largura */
}

.modal-input:focus {
    border-color: #3498db;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

/* Botão Principal (Largo e Azul) */
.btn-primary-block {
    width: 100%;
    background-color: #2980b9;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 10px;
}

.btn-primary-block:hover {
    background-color: #3498db;
}

/* Botão Secundário (Link) */
.btn-secondary-link {
    background: none;
    border: none;
    color: #7f8c8d;
    font-size: 13px;
    cursor: pointer;
    margin-top: 15px;
    text-decoration: none;
}

.btn-secondary-link:hover {
    color: #2c3e50;
    text-decoration: underline;
}

/* Rodapé do Modal */
.modal-footer {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}

.btn-close-modal {
    background-color: #ecf0f1;
    color: #7f8c8d;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.btn-close-modal:hover {
    background-color: #bdc3c7;
    color: #2c3e50;
}

/* Grupo de Busca */
.search-group input {
    padding: 6px 10px;
    border: 1px solid #bdc3c7;
    border-radius: 4px;
    font-size: 13px;
    width: 120px; /* Largura compacta */
    outline: none;
    transition: width 0.3s ease;
}

/* Efeito: Aumenta quando clica para digitar */
.search-group input:focus {
    width: 180px;
    border-color: #3498db;
}

.search-group button {
    /* Reaproveita o estilo dos outros botões, mas garante alinhamento */
    padding: 6px 10px;
}

/* Botão de Gatilho */
.search-trigger {
  background: none;
  border: 1px solid #ccc;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
  color: #fff !important;
}

.search-trigger:hover {
  background: #f0f0f0;
}

/* O Modal Overlay (Fundo Escuro) */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px); /* Efeito moderno de vidro fosco */
  z-index: 1000;
  
  /* Estado inicial: oculto */
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  
  /* Centralizar o conteúdo */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 100px;
}

/* Estado Ativo (controlado via JS) */
.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Conteúdo do Modal */
.modal-content {
  background: white;
  width: 100%;
  max-width: 600px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  transform: translateY(-20px);
  transition: transform 0.3s ease;
  overflow: hidden;
}

.modal-overlay.active .modal-content {
  transform: translateY(0);
}

/* Header da Busca */
.search-header {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.search-header input {
  flex: 1;
  border: none;
  font-size: 18px;
  padding: 0 12px;
  outline: none;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
}

/* Área de Resultados */
.search-results {
  padding: 16px;
  max-height: 300px;
  overflow-y: auto;
}

.search-results ul {
  list-style: none;
  padding: 0;
}

.search-results li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
  border-radius: 4px;
}

.search-results li a:hover {
  background: #f5f5f5;
}

.modal-footer {
  background: #fafafa;
  padding: 10px 16px;
  border-top: 1px solid #eee;
  color: #888;
  font-size: 0.85rem;
  text-align: right;
}

/* Botão de ação "Buscar" */
.action-btn {
  background-color: #007bff; /* Azul padrão, mude para sua cor */
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  margin-right: 10px; /* Espaço para o botão de fechar */
  transition: background 0.2s;
}

.action-btn:hover {
  background-color: #0056b3;
}

/* Texto de ajuda quando não há resultados */
.placeholder-text {
  color: #999;
  text-align: center;
  padding: 20px;
}

/* Estilos para a Modal de Adicionar Texto */
#add-text-overlay {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fundo escuro */
    z-index: 99999 !important; /* Na frente de tudo */
    
    /* Centraliza a caixa branca */
    display: none; /* O JS muda para Flex */
    justify-content: center;
    align-items: center;
}

#add-text-overlay .modal-box {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    width: 500px;
    max-width: 90%;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    position: relative;
    z-index: 100000;
}

.modal-box {
    background: white;
    padding: 20px;
    border-radius: 8px;
    width: 500px;
    max-width: 90%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* =========================================
   📱 VERSÃO MOBILE DEFINITIVA (Parallax)
   ========================================= */

/* --- 1. ESTILOS GLOBAIS DO MENU (Desktop e Mobile) --- */

/* Padrão: Esconde elementos mobile no Desktop */
#hamburger-btn, 
.mobile-drawer {
    display: none;
}

/* Garante que modais de sobreposição fiquem acima do menu lateral */
.overlay, .modal-overlay {
    z-index: 20000 !important; 
}

/* Gaveta Lateral (Drawer) - Estrutura Base */
.mobile-drawer {
    position: fixed;
    top: 0;
    left: -280px; /* Começa escondido à esquerda */
    width: 280px;
    height: 100vh;
    background: white;
    z-index: 9999;
    box-shadow: 2px 0 10px rgba(0,0,0,0.2);
    transition: left 0.3s ease;
    display: flex;
    flex-direction: column;
}

.mobile-drawer.active {
    left: 0; /* Desliza para dentro */
}

.drawer-header {
    background: #2c3e50;
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 18px;
}

.close-drawer-btn {
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
}

.drawer-content {
    padding: 10px 0;
    overflow-y: auto;
}

.drawer-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 15px 20px;
    font-size: 16px;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}

.drawer-item:active {
    background-color: #f5f5f5;
}


/* --- 2. REGRAS ESPECÍFICAS PARA MOBILE --- */

@media screen and (max-width: 768px) {

    /* --- RESET E COMPORTAMENTO --- */
    * { 
        box-sizing: border-box; 
        -webkit-tap-highlight-color: transparent; 
    }
    
    html, body { 
        overflow-x: hidden !important; 
        width: 100%;
        overscroll-behavior-y: none; 
    }

    /* --- CABEÇALHO TRAVADO (STICKY) --- */
    #main-header {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 65px;
        padding: 0 !important;
        
        /* MUDANÇA: Fixed é mais garantido que Sticky */
        position: fixed; 
        top: 0;
        left: 0;
        z-index: 1100;
        
        background-color: #2c3e50;
        width: 100%;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    /* Esconde botões de Desktop */
    .header-buttons.desktop-only, 
    .header-right {
        display: none !important;
    }

    /* Container esquerdo ocupa tudo para permitir centralização da logo */
    .header-left {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* --- BOTÃO HAMBÚRGUER (Posição Absoluta) --- */
    #hamburger-btn {
        display: block;
        position: absolute; /* Tira do fluxo para não empurrar a logo */
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: white;
        padding: 10px;
        margin: 0;
        cursor: pointer;
        z-index: 10;
    }

    #hamburger-btn svg {
        width: 32px; 
        height: 32px;
    }

    /* --- LOGO CENTRALIZADA --- */
    .logo-area {
        margin: 0;
        display: flex;
        justify-content: center;
    }

    .main-logo {
        height: 42px !important; /* Tamanho maior para destaque */
        width: auto;
        display: block;
    }

    /* --- BARRA DE FERRAMENTAS TRAVADA (FIXED) --- */
    #toolbar-strip {
        /* MUDANÇA: Fixed logo abaixo do header */
        position: fixed;
        top: 65px; /* Altura do header */
        left: 0;
        z-index: 1000;
        
        padding: 5px 0;
        background: #f8f9fa;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        width: 100%;
        overflow-x: auto; 
    }

    /* --- COMPENSAÇÃO DE ESPAÇO --- */
    /* Empurra o conteúdo para baixo para não ficar escondido atrás dos menus fixos */
    #document-header {
        margin-top: 130px !important; /* 65px (Header) + ~60px (Toolbar) + respiro */
        padding: 20px 15px;
    }

    .toolbar-content {
        justify-content: flex-start;
        padding: 0 10px;
        gap: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .toolbar-content::-webkit-scrollbar {
        display: none;
    }

    /* Botões da Toolbar maiores para toque */
    .tool-group button {
        min-width: 48px !important;
        height: 48px !important;
        padding: 0 !important;
        font-size: 20px !important;
    }

    .tool-label { display: none; }

    /* --- ÁREA DE EDIÇÃO --- */
    #document-header, 
    #editor-wrapper {
        box-shadow: none;
        border: none;
        border-radius: 0;
        width: 100%;
        margin: 0;
    }

    #document-header {
        padding: 20px 15px;
        margin-top: 0;
    }

    .header-grid {
        display: flex !important;
        flex-direction: column;
        gap: 15px;
    }

    .header-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .header-item label {
        margin-bottom: 5px;
        font-size: 11px;
        text-transform: uppercase;
    }

    #editor-container {
        padding: 10px 15px 100px 15px !important;
    }

    .text-word {
        font-size: 20px !important; 
        line-height: 1.8 !important;
    }

    .inflection-mark {
        font-size: 14px !important;
    }

    /* --- MODAIS FULL SCREEN --- */
    .modal-box, 
    .modal-cloud, 
    .modal,
    #help-overlay > div,
    .modal-content { /* Adicionado para a busca */
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }
    
    #novo-texto-input {
        flex-grow: 1;
    }

    /* Fundo escuro quando menu abre */
    body.menu-open::after {
        content: '';
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 9998;
        pointer-events: auto;
    }
    
    /* Garante que a gaveta funcione */
    .mobile-drawer {
        display: flex;
    }
}

/* --- CORREÇÃO: BUSCA NO MENU MOBILE --- */
/* Força o estilo do item de lista, sobrescrevendo o estilo do botão de header */
.mobile-drawer .search-trigger {
    color: #333 !important;       /* Texto escuro (era branco) */
    background: none !important;  /* Remove fundos extras */
    border: none !important;      /* Remove borda arredondada */
    border-bottom: 1px solid #f0f0f0 !important; /* Linha divisória igual aos outros */
    border-radius: 0 !important;  /* Canto reto */
    width: 100% !important;
    justify-content: flex-start !important; /* Alinha ícone e texto à esquerda */
    padding: 15px 20px !important; /* Espaçamento padrão da lista */
    display: flex !important;
    align-items: center !important;
    gap: 10px; /* Espaço entre lupa e texto */
}

/* --- ESTILO BADGE PARA TONS (No Texto) --- */
/* Adicione isso ao final do seu CSS */

/* --- BASE ESTRUTURAL DO BADGE (Tamanho e Posição) --- */
.inflection-mark.tone-badge {
    /* Cor da Seta (Preta para todos, conforme solicitado) */
    color: #000 !important;   
    
    /* Estrutura */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;        
    padding: 1px 6px;          
    margin: 0 3px;             
    
    /* Tipografia Aumentada */
    font-size: 16px !important; 
    font-weight: 900;           /* Extra negrito para a seta ficar bem visível */
    font-family: sans-serif;   
    line-height: 1;             
    
    /* Elevação (Flutuando acima da palavra) */
    vertical-align: text-top !important; 
    position: relative;                  
    top: -5px;                           
    
    /* Sombra suave */
    box-shadow: 0 2px 4px rgba(0,0,0,0.15); 
    z-index: 10; 
}

/* --- CORES ESPECÍFICAS POR TOM --- */

/* Tom Alto (↑): Fundo Vermelho Claro */
.tone-high {
    background-color: #ffadad !important; /* Vermelho pastel suave */
    border: 1px solid #e57373;            /* Borda sutil para contraste */
}

/* Tom Médio (↕): Fundo Amarelo Claro */
.tone-mid {
    background-color: #fff59d !important; /* Amarelo canário claro */
    border: 1px solid #fbc02d;
}

/* Tom Baixo (↓): Fundo Verde Água */
.tone-low {
    background-color: #80deea !important; /* Cyan/Verde água */
    border: 1px solid #4dd0e1;
}

/* ============================================================
   IMPRESSÃO PERFEITA FINAL: SEM SOMBRAS + BADGES COLORIDOS
   (Este bloco substitui o anterior)
   ============================================================ */

@media print {

    /* 1. RESET NUCLEAR DE SOMBRAS 
       Remove a sombra de TODOS os elementos da página de uma vez só. */
    * {
        box-shadow: none !important;
        text-shadow: none !important;
        filter: none !important; /* Remove filtros de drop-shadow */
    }

    /* 2. FORÇA O FUNDO BRANCO ABSOLUTO
       Isso "apaga" a cor cinza de fundo do site, fazendo a linha sumir
       porque branco no branco fica invisível. */
    html, body {
        background-color: #ffffff !important;
        background: #ffffff !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* 3. AJUSTE DO CARTÃO (WRAPPER) */
    #editor-wrapper, 
    #editor-container {
        border: none !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        background: transparent !important; /* Deixa o body branco aparecer */
    }

    /* 4. MANTÉM SUAS LINHAS DE ESTILO (Cabeçalho e Legenda) */
    #document-header {
        border: none !important;
        border-bottom: 2px solid #000 !important;
        margin-bottom: 20px !important;
        padding-left: 0 !important;
    }
    
    .legend-grid {
        border-bottom: 2px solid #000 !important;
    }

/* 5. CONFIGURAÇÃO DOS BADGES (CORRIGIDO) */
    .inflection-mark.tone-badge {
        /* Garante que o navegador não remova a cor de fundo */
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
        
        border-radius: 4px !important;
        border: 1px solid rgba(0,0,0,0.2) !important;
        color: #000 !important;
        padding: 0px 4px !important;
        margin: 0 2px !important;
        
        /* REMOVI O 'background-color: inherit' DAQUI */
    }
    
    /* Aumentei a especificidade: agora o seletor tem 3 classes.
       Isso garante que ele vença qualquer outra regra. */
    .inflection-mark.tone-badge.tone-high { 
        background-color: #ffadad !important; 
    }
    
    .inflection-mark.tone-badge.tone-mid { 
        background-color: #fff59d !important; 
    }
    
    .inflection-mark.tone-badge.tone-low { 
        background-color: #80deea !important; 
    }

}