/* Variáveis de Cor */
:root {
    --container-bg: rgba(255, 255, 255, 0.15); /* Fundo do app com transparência */
    --container-border: rgba(255, 255, 255, 0.25); /* Borda sutil para o vidro */
    --text-color: #333;
    --text-color-on-glass: #111; /* Cor de texto um pouco mais escura para melhor leitura no vidro */
    --primary-color: #0056b3; /* Azul mais escuro para header e destaques */
    --primary-dark: #003d80;
    --secondary-color: #5a6268; /* Cinza mais escuro */
    --accent-color: #218838; /* Verde mais escuro */
    --warning-color: #ffc107;
    --danger-color: #c82333; /* Vermelho mais escuro */
    --preset-box-bg: rgba(255, 204, 203, 0.5); /* Vermelho claro com transparência */
    --preset-btn-bg: #d9534f; /* Tomate um pouco mais escuro (bootstrap danger) */
    --preset-btn-hover-bg: #c9302c;
    --header-bg: #0056b3; /* Azul escuro do header */
    --header-text-main: white;
    --header-text-secondary: yellow;
    --footer-bg: #343a40; /* Cinza escuro do footer (bootstrap dark) */
    --footer-text: #adb5bd; /* Texto cinza claro no footer */
    --footer-link: #dee2e6; /* Link mais claro no footer */

    --display-font: 'Roboto Mono', monospace;
    --body-font: 'Poppins', sans-serif;
    --border-radius: 10px; /* Aumentar um pouco o raio */
    --box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); /* Sombra mais pronunciada para o vidro */
}

/* Estilos Globais e Body com Imagem */
body {
    margin: 0;
    padding: 0; /* Remover padding do body */
    font-family: var(--body-font);
    background-image: url('cronometro-temporizador.jpg'); /* SUA IMAGEM DE FUNDO */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--text-color);
    display: flex;
    flex-direction: column; /* Para alinhar header, app, ads, footer */
    min-height: 100vh; /* Ocupar altura total */
}

/* --- ESTILOS DO CABEÇALHO --- */
.header-compact {
    background-color: var(--header-bg);
    padding: 12px 20px; /* Aumentar padding vertical */
    width: 100%;
    box-sizing: border-box; /* Incluir padding na largura */
    z-index: 10; /* Para ficar acima de outros elementos se necessário */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra sutil */
}

.header-compact-content {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;    /* Centraliza verticalmente */
    gap: 15px;              /* Espaço entre logo e texto */
    flex-wrap: wrap;        /* Permite quebrar linha em telas pequenas */
    max-width: 1200px; /* Limita largura do conteúdo */
    margin: 0 auto; /* Centraliza o conteúdo */
}

.header-logo {
    height: 45px; /* Tamanho do logo */
    width: auto;
    display: block; /* Remove espaço extra abaixo da imagem */
}

.header-compact-text {
    text-align: center; /* Centraliza texto dentro do bloco */
}

.header-compact-text h1 {
    color: var(--header-text-main);
    margin: 0 0 2px 0; /* Margem pequena abaixo */
    font-size: 1.4em; /* Tamanho do título principal */
    font-weight: 600;
}

.header-compact-text p {
    color: var(--header-text-secondary);
    margin: 0;
    font-size: 0.9em; /* Tamanho do subtítulo */
}
/* --- FIM ESTILOS CABEÇALHO --- */


/* Container Principal do App com Efeito Vidro */
.app-container {
    background: var(--container-bg);
    backdrop-filter: blur(10px); /* Efeito de desfoque do fundo */
    -webkit-backdrop-filter: blur(10px); /* Suporte para Safari */
    border-radius: var(--border-radius);
    border: 1px solid var(--container-border);
    box-shadow: var(--box-shadow);
    text-align: center;
    max-width: 550px; /* Aumentar um pouco a largura máxima */
    width: 90%;      /* Usar porcentagem com max-width */
    padding: 30px;   /* Aumentar padding */
    margin: 40px auto; /* Centralizar e adicionar margem vertical */
    box-sizing: border-box;
    color: var(--text-color-on-glass); /* Cor de texto para melhor contraste no vidro */
}

/* Títulos dentro do App */
.app-container h2 { /* Era h1 */
    color: var(--primary-color);
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 1.8em;
    font-weight: 600;
}

.app-container h3 { /* Era h2 (Histórico) e título dos presets */
    color: var(--secondary-color);
    margin-top: 30px;
    margin-bottom: 15px; /* Ajuste */
    font-size: 1.3em;
    font-weight: 600;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Borda mais sutil */
    padding-bottom: 8px;
}

/* Seletor de Modo */
.mode-selector {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.mode-btn {
    padding: 10px 22px;
    font-size: 1em;
    border: 2px solid var(--primary-color);
    background-color: transparent;
    color: var(--primary-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.mode-btn.active {
    background-color: var(--primary-color);
    color: white;
}

.mode-btn:not(.active):hover {
    background-color: rgba(0, 86, 179, 0.1); /* Azul bem claro no hover */
}

/* Display do Tempo */
.display {
    background-color: rgba(233, 236, 239, 0.7); /* Fundo do display com leve transparência */
    padding: 25px 20px;
    border-radius: var(--border-radius);
    margin-bottom: 30px;
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.1);
}

#time-display {
    font-family: var(--display-font);
    font-size: 3.8em; /* Aumentar tamanho do display */
    color: var(--text-color-on-glass);
    font-weight: 700;
    letter-spacing: 3px;
    display: block; /* Garante que ocupa a largura */
    line-height: 1.1;
}

/* Configurações do Temporizador */
.timer-settings {
    display: none;
    margin-bottom: 30px;
    padding: 20px 15px 5px 15px; /* Ajuste padding */
    background-color: rgba(248, 249, 250, 0.6); /* Fundo com leve transparência */
    border-radius: var(--border-radius);
    border: 1px solid rgba(222, 226, 230, 0.5);
}

.timer-settings label {
    display: block;
    margin-bottom: 12px;
    font-weight: 600;
    color: var(--secondary-color);
}

.timer-settings .inputs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px; /* Aumentar espaço */
    margin-bottom: 20px;
}

.timer-settings input[type="number"] {
    width: 65px; /* Aumentar largura */
    padding: 10px; /* Aumentar padding */
    font-size: 1.3em;
    text-align: center;
    border: 1px solid #ced4da;
    border-radius: 6px; /* Raio menor para inputs */
    font-family: var(--display-font);
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.8); /* Fundo levemente opaco */
    color: var(--text-color-on-glass);
    -moz-appearance: textfield;
}
.timer-settings input[type="number"]::-webkit-outer-spin-button,
.timer-settings input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


.timer-settings span {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--secondary-color);
}

.timer-settings #set-timer-btn {
    background-color: var(--primary-color);
    color: white;
    margin-top: 5px; /* Reduzir margem */
    margin-bottom: 25px;
    padding: 10px 20px; /* Aumentar padding */
}
.timer-settings #set-timer-btn:hover:not(:disabled) {
     background-color: var(--primary-dark);
}

/* Presets Box */
.presets-box {
    background-color: var(--preset-box-bg);
    border-radius: var(--border-radius);
    padding: 20px 15px; /* Aumentar padding */
    margin-top: 25px;
    margin-bottom: 15px;
    text-align: center;
    border: 1px solid rgba(255, 153, 153, 0.5); /* Borda sutil na cor */
}

.presets-box h3 {
    margin: 0 0 18px 0;
    color: #a0522d;
    font-size: 1.2em; /* Aumentar */
    font-weight: 600;
    border-bottom: none; /* Remover borda do h3 aqui */
    padding-bottom: 0;
}

.preset-line {
    margin-bottom: 10px;
    text-align: center;
}
.preset-line:last-child {
    margin-bottom: 0;
}

.preset-btn {
     background-color: var(--preset-btn-bg);
     color: white;
     border: none;
     padding: 9px 18px; /* Aumentar padding */
     font-size: 0.95em; /* Aumentar fonte */
     margin: 6px;
     border-radius: 6px;
     cursor: pointer;
     transition: background-color 0.3s ease;
     min-width: 140px;
     font-weight: 500;
}
.preset-btn:hover:not(:disabled) {
    background-color: var(--preset-btn-hover-bg);
}

/* Controles Principais */
.controls {
    margin-bottom: 35px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px; /* Aumentar espaço */
}

.control-btn {
    padding: 14px 28px; /* Aumentar padding */
    font-size: 1.15em; /* Aumentar fonte */
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    color: white;
    font-weight: 600;
    min-width: 110px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15); /* Sombra sutil nos botões */
}

.control-btn:disabled {
    background-color: #cccccc !important; /* Usa !important para sobrescrever cores específicas */
    color: #888 !important;
    cursor: not-allowed;
    opacity: 0.6;
     box-shadow: none;
}

.control-btn:active:not(:disabled) {
    transform: scale(0.97);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2); /* Sombra interna ao clicar */
}

.control-btn.start { background-color: var(--accent-color); }
.control-btn.start:hover:not(:disabled) { background-color: #1e7e34; }

.control-btn.pause { background-color: var(--warning-color); color: #333; }
.control-btn.pause:hover:not(:disabled) { background-color: #e0a800; }

.control-btn.reset { background-color: var(--danger-color); }
.control-btn.reset:hover:not(:disabled) { background-color: #bd2130; }

.control-btn.lap { background-color: var(--primary-color); }
.control-btn.lap:hover:not(:disabled) { background-color: var(--primary-dark); }

.control-btn.clear { /* Botão Limpar Histórico */
    background-color: var(--secondary-color);
    margin: 15px auto 0 auto; /* Centralizar e adicionar margem */
    padding: 8px 18px; /* Padding menor */
    font-size: 0.9em;
    display: block; /* Para margin auto funcionar */
    max-width: 180px; /* Limitar largura */
}
.control-btn.clear:hover:not(:disabled) { background-color: #495057; }

/* Histórico */
.history {
    margin-top: 25px;
}

#history-list {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
    max-height: 220px;
    overflow-y: auto;
    background-color: rgba(248, 249, 250, 0.7); /* Fundo com transparência */
    border: 1px solid rgba(222, 226, 230, 0.6);
    border-radius: var(--border-radius);
}

/* Estilo para barra de rolagem (opcional, Webkit) */
#history-list::-webkit-scrollbar {
  width: 8px;
}
#history-list::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.05);
  border-radius: 10px;
}
#history-list::-webkit-scrollbar-thumb {
  background-color: var(--secondary-color);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}
#history-list::-webkit-scrollbar-thumb:hover {
  background-color: #495057;
}


#history-list li {
    padding: 12px 18px; /* Aumentar padding */
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    font-size: 1em; /* Aumentar fonte */
    font-family: var(--display-font);
}
#history-list li:last-child {
    border-bottom: none;
}
#history-list li .type {
    font-weight: bold;
    margin-right: 20px;
    /* Cores definidas no JS */
}
#history-list li .time {
    color: var(--text-color-on-glass);
    font-weight: bold;
}

/* Placeholder para AdSense */
.adsense-placeholder {
    width: 100%;
    max-width: 728px; /* Exemplo de largura comum para ads */
    margin: 30px auto; /* Espaçamento */
    min-height: 90px; /* Altura mínima comum */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Adicione aqui estilos específicos se o AdSense requerer */
}

/* --- ESTILOS DO RODAPÉ --- */
.tool-footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    padding: 20px;
    text-align: center;
    font-size: 0.9em;
    margin-top: auto; /* Empurra o rodapé para baixo */
    width: 100%;
    box-sizing: border-box;
}

.tool-footer-links {
    margin-bottom: 10px;
}

.tool-footer a {
    color: var(--footer-link);
    text-decoration: none;
    margin: 0 5px; /* Espaçamento entre links e barras */
}

.tool-footer a:hover {
    color: white;
    text-decoration: underline;
}
/* --- FIM ESTILOS RODAPÉ --- */


/* Responsividade */
@media (max-width: 600px) {
    .app-container {
        width: 95%; /* Ocupar mais largura */
        padding: 20px 15px;
        margin: 30px auto; /* Reduzir margem vertical */
    }
    .app-container h2 {
        font-size: 1.6em;
    }
     .app-container h3 {
        font-size: 1.2em;
     }

    #time-display {
        font-size: 2.8em; /* Reduzir display */
        letter-spacing: 2px;
    }
    .controls {
        gap: 12px;
    }
    .control-btn {
        padding: 12px 20px; /* Reduzir padding */
        font-size: 1em;
        min-width: 90px;
    }
    .timer-settings input[type="number"] {
        width: 55px;
        padding: 8px;
        font-size: 1.2em;
    }
     .timer-settings span {
         font-size: 1.2em;
     }
    .preset-btn {
        font-size: 0.9em;
        padding: 8px 15px;
        min-width: 120px;
    }
     .header-compact-text h1 {
        font-size: 1.2em;
    }
    .header-compact-text p {
        font-size: 0.8em;
    }
    .header-logo {
        height: 35px;
    }
}

@media (max-width: 450px) {
     .app-container {
        padding: 15px 10px;
     }
     .app-container h2 {
         font-size: 1.5em;
     }
     #time-display {
        font-size: 2.4em; /* Reduzir mais */
        letter-spacing: 1px;
    }
    .mode-btn {
        padding: 8px 15px;
        font-size: 0.9em;
    }
    .control-btn {
        padding: 10px 18px;
        font-size: 0.95em;
         min-width: 80px;
    }
     .preset-btn {
        min-width: 100px;
        padding: 7px 12px;
        font-size: 0.85em;
    }
    .timer-settings .inputs {
        gap: 5px;
    }
    .timer-settings input[type="number"] {
        width: 50px;
        font-size: 1.1em;
    }
    #history-list li {
        font-size: 0.9em;
        padding: 10px 12px;
    }
    .tool-footer {
        font-size: 0.8em;
    }
}

/* Animação de piscar para o display */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; } /* Piscar mais sutil no vidro */
}