/* ========================================================== */
/* ESTILOS PAINEL MOBILE - VERSÃO SOMENTE MOBILE / FECHA NO DESKTOP */
/* (Alfaitaria by Arcee)                                     */
/* ========================================================== */

html, body {
    margin: 0; /* Removido valor fixo, usar 0 para preencher */
    padding: 0; /* Removido valor fixo, usar 0 para preencher */
    width: 100%;
    height: 100%;
    overflow: hidden; 
    font-family: 'Consolas', 'Lucida Console', 'Courier New', Courier, monospace;
    user-select: none; 
    -webkit-user-select: none;
    background-color: #080a10; /* Fundo base escuro */
    transition: background-color 0.2s ease;
    display: flex; /* Para centralizar o painel-container se ele não ocupar 100% */
    justify-content: center;
    align-items: center;
}

/* --- Container Principal DO PAINEL MOBILE --- */
.painel-container {
    width: 100%; /* Ocupa toda a largura disponível */
    height: 100%; /* Ocupa toda a altura disponível */
    /* max-height: 80dvh; Se quiser limitar a altura máxima em telas muito longas */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    padding: 3vmin; /* Reduzido para dar mais espaço ao conteúdo */
    box-sizing: border-box;
    transition: all 0.2s ease;
    background-color: transparent; 
    background-image: url('../img/sr_app_background6.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative; /* Para que a membrana fique relativa a ele */
}
/* --- Container do Botão Fechar (REMOVIDO, pois a membrana-fechar faz isso) --- */
/* .fechar-painel-container { ... } */
/* .botao-fechar-painel { ... } */


/* --- Semáforo (Luzes) --- */
.luzes-container {
    display: flex;
    justify-content: center;
    gap: 1vmin;
    flex-shrink: 0;
    z-index: 2; /* Acima do fundo, abaixo da membrana se necessário */
    margin-bottom: 2vmin;
    margin-top: 1vh; /* Reduzido um pouco */
}

.luz {
    width: 14vmin; 
    height: 14vmin;
    max-width: 55px; /* Levemente reduzido */
    max-height: 55px; /* Levemente reduzido */
    min-width: 25px; 
    min-height: 25px;
    border-radius: 50%;
    background-color: var(--section-bg-alt, #2c2c2e); /* Fallback mais escuro */
    border: 0.5vmin solid var(--border-color, #444); /* Fallback mais escuro */
    transition: all 0.05s ease-in-out;
}
/* Cores das variáveis devem vir de um arquivo CSS global como estilos_local.css */
/* Se estilos_local.css não for carregado com esta página, defina as variáveis aqui no :root */
.luz.sa-azul.acesa { background-color: var(--info-color, #0d6efd); box-shadow: 0 0 2.5vmin var(--info-color, #0d6efd); border-color: var(--info-hover, #0b5ed7); }
.luz.amarela.acesa { background-color: var(--warning-color, #ffc107); box-shadow: 0 0 2.5vmin var(--warning-color, #ffc107); border-color: var(--warning-hover, #e0a800);}
.luz.sv-verde.acesa { background-color: var(--success-color, #198754); box-shadow: 0 0 2.5vmin var(--success-color, #198754); border-color: var(--success-hover, #157347);}
.luz.sv-verde.sv-vermelha-queima.acesa { background-color: var(--danger-color, #dc3545); box-shadow: 0 0 2.5vmin var(--danger-color, #dc3545); border-color: var(--danger-hover, #bb2d3b); }


/* --- Grid de Tempos --- */
.tempos-grid {
    display: grid;
    grid-template-rows: repeat(5, 1fr); 
    gap: 0.5vmin; 
    width: 90%; /* Aumentado para usar mais da tela */
    max-width: 480px; /* Aumentado um pouco */
    /* max-height: 80dvh; Removido, flex-grow 1 no container pai deve cuidar disso */
    margin: 0 auto;
    flex-grow: 1; 
    z-index: 2;
    overflow: hidden;
}

.tempo-display {
    background-color: rgba(var(--container-bg-rgb, 30, 33, 37), 0.75); /* Usando uma cor base escura para o RGB fallback */
    border: 1px solid var(--border-color, #495057); /* Usando a borda escura como fallback */
    border-radius: var(--border-radius-inner, 0.3rem);
    padding: 1vmin; /* Reduzido de 1.5vmin */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Para evitar que texto grande vaze */
}

.tempo-label {
    font-size: calc(7px + 1.8vmin); /* Levemente ajustado */
    opacity: 0.7;
    white-space: nowrap; /* Evita quebra de linha nos labels */
}

.tempo-valor {
    font-size: clamp(1.8rem, 13vmin, 60px); /* Levemente reduzido */
    line-height: 1;
    font-weight: bold;
    color: var(--primary-hover, #79b8ff); /* Cor de tema escuro como fallback */
    white-space: nowrap;
}
.tempo-valor.queima { color: var(--danger-color, #f85149) !important; }
.tempo-valor.nulo { color: var(--disabled-text, #8b949e); }


/* Membrana para fechar a página com um clique (ou dblclick se ajustado no JS) */
.membrana-fechar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5; 
    /* background-color: rgba(0, 255, 0, 0.1); /* Descomente para debug visual */
}

/* NENHUMA REGRA @media (min-width: ...) para travar layout no desktop.
   A lógica de fechar no desktop será feita via JavaScript. */