/* style.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --cor-primaria: #61b846; /* Verde Toduma */
    --cor-primaria-escura: #4c9635;
    --cor-fundo: #f3f6f8;
    --cor-caixa: #ffffff;
    --cor-texto: #333333;
    --cor-texto-claro: #666666;
    --cor-borda: #e2e8f0;
    --sombra: 0 10px 25px rgba(0, 0, 0, 0.05);
    --sombra-hover: 0 15px 35px rgba(97, 184, 70, 0.15);
    --transicao: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.cabecalho {
    background-color: var(--cor-caixa);
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 10;
}

.logotipo {
    height: 45px;
    margin-right: 15px;
}

.cabecalho h1 {
    font-size: 1.25rem;
    color: var(--cor-texto);
    font-weight: 600;
}

.contentor {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1.5rem;
    flex-grow: 1;
    width: 100%;
}

.painel-tradutor {
    background: var(--cor-caixa);
    border-radius: 16px;
    box-shadow: var(--sombra);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--transicao);
}

.painel-tradutor:hover {
    box-shadow: var(--sombra-hover);
}

.controlo-idioma {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--cor-borda);
    padding: 1rem;
    gap: 1rem;
    background-color: #fafbfc;
}

.seletor-idioma {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--cor-texto);
    background-color: transparent;
    cursor: pointer;
    outline: none;
    transition: var(--transicao);
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem top 50%;
    background-size: 0.65rem auto;
}

.seletor-idioma:hover, .seletor-idioma:focus {
    background-color: var(--cor-borda);
}

.btn-inverter {
    background: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    color: var(--cor-texto-claro);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transicao);
    font-size: 1.2rem;
}

.btn-inverter:hover {
    background: var(--cor-primaria);
    color: white;
    border-color: var(--cor-primaria);
    transform: rotate(180deg);
}

.areas-texto {
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .areas-texto {
        flex-direction: row;
    }
}

.area-caixa {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
}

.area-destino {
    background-color: #fcfcfc;
    border-top: 1px solid var(--cor-borda);
}

@media (min-width: 768px) {
    .area-destino {
        border-top: none;
        border-left: 1px solid var(--cor-borda);
    }
}

textarea {
    width: 100%;
    height: 300px;
    padding: 1.5rem;
    border: none;
    resize: none;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--cor-texto);
    background: transparent;
    outline: none;
}

textarea::placeholder {
    color: #a0aec0;
}

.accao-traduzir {
    padding: 1.5rem;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--cor-borda);
    background-color: #fafbfc;
}

.btn-primario {
    background-color: var(--cor-primaria);
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transicao);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primario:hover {
    background-color: var(--cor-primaria-escura);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(97, 184, 70, 0.3);
}

.btn-primario:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.oculto {
    display: none !important;
}

.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.9);
    padding: 1rem 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    color: var(--cor-primaria);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 5;
}

.loader::before {
    content: "";
    width: 20px;
    height: 20px;
    border: 3px solid var(--cor-borda);
    border-top-color: var(--cor-primaria);
    border-radius: 50%;
    animation: girar 1s linear infinite;
}

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

.erro-mensagem {
    color: #e53e3e;
    font-size: 0.9rem;
    margin-right: auto;
    display: flex;
    align-items: center;
}