/* =====================================================================
   estilo.css — Portal de Ausências (Meia Bota)

   Mobile-first: a maioria dos registos é feita no telemóvel. O laranja
   da marca fica reservado ao que é ação. Modo escuro automático.
   ===================================================================== */

:root {
    color-scheme: light dark;

    --laranja:        #E08E1F;
    --laranja-escuro: #c47a15;
    --laranja-suave:  #fdf1e0;
    --laranja-texto:  #8a5600;

    --vermelho-suave: #fdecee;
    --vermelho-texto: #8c1622;
    --verde:          #2e9a52;
    --verde-suave:    #e6f4ea;
    --verde-texto:    #1c6b34;

    --fundo:          #f4f5f7;
    --superficie:     #ffffff;
    --superficie-2:   #f8f9fa;
    --borda:          #e4e6ea;
    --borda-forte:    #d3d6dc;
    --texto:          #16181d;
    --texto-suave:    #6b7280;

    --sombra-1: 0 1px 2px rgba(16,18,22,.06), 0 1px 3px rgba(16,18,22,.04);
    --sombra-2: 0 2px 6px rgba(16,18,22,.07), 0 8px 20px rgba(16,18,22,.05);
    --raio: 12px;
    --raio-grande: 18px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --laranja-suave:  #3a2a10;
        --laranja-texto:  #f0b968;
        --vermelho-suave: #3a1a1d;
        --vermelho-texto: #f4a2ab;
        --verde-suave:    #14301e;
        --verde-texto:    #86d9a3;

        --fundo:          #111317;
        --superficie:     #1b1e24;
        --superficie-2:   #22262d;
        --borda:          #2e333b;
        --borda-forte:    #3b414b;
        --texto:          #eceef1;
        --texto-suave:    #9aa1ac;

        --sombra-1: 0 1px 2px rgba(0,0,0,.4);
        --sombra-2: 0 4px 16px rgba(0,0,0,.45);
    }
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--fundo);
    color: var(--texto);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
}

h1 { font-size: 1.6rem; margin: .2rem 0 .3rem; }
h2 { font-size: 1.25rem; margin: 0 0 1rem; }
a  { color: var(--laranja-texto); }
.suave { color: var(--texto-suave); margin-top: 0; }

/* ---- Barra superior ------------------------------------------------ */
.cabecalho {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    padding: .6rem 1rem;
    padding-top: calc(.6rem + env(safe-area-inset-top, 0px));
    background: var(--superficie);
    border-bottom: 3px solid var(--laranja);
    box-shadow: var(--sombra-1);
}
.cabecalho__marca {
    display: flex; align-items: center; gap: .6rem;
    color: var(--texto); text-decoration: none; font-weight: 700; font-size: 1.1rem;
}
.cabecalho__marca img { width: 34px; height: 34px; border-radius: 8px; }
.cabecalho__marca small { color: var(--texto-suave); font-weight: 500; }
.cabecalho__nav { display: flex; gap: .25rem; }
.cabecalho__nav a {
    padding: .45rem .8rem; border-radius: 8px;
    color: var(--texto); text-decoration: none; font-weight: 600;
}
.cabecalho__nav a:hover { background: var(--laranja-suave); color: var(--laranja-texto); }
.cabecalho__sair { color: var(--texto-suave) !important; }

/* ---- Conteúdo ------------------------------------------------------ */
.conteudo {
    flex: 1;
    width: 100%; max-width: 720px;
    margin: 0 auto; padding: 1.25rem 1rem 2rem;
}
.conteudo--largo { max-width: 1280px; }

.rodape {
    text-align: center; padding: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    color: var(--texto-suave); font-size: .85rem;
}

.cartao {
    background: var(--superficie);
    border-radius: var(--raio-grande);
    box-shadow: var(--sombra-2);
    padding: 1.4rem;
}
.cartao--calendario { padding: 1rem; }

.voltar {
    display: inline-block; margin-bottom: .5rem;
    color: var(--texto-suave); text-decoration: none; font-weight: 600;
}

.aviso { padding: .8rem 1rem; border-radius: var(--raio); margin-bottom: 1rem; font-weight: 500; }
.aviso--erro    { background: var(--vermelho-suave); color: var(--vermelho-texto); }
.aviso--sucesso { background: var(--verde-suave);    color: var(--verde-texto); }
.aviso--alerta  { background: var(--laranja-suave);  color: var(--laranja-texto);
                  border-left: 4px solid var(--laranja); }
.aviso[hidden]  { display: none; }
.formulario .aviso--alerta { margin: .8rem 0 0; }

/* ---- Botões e campos ------------------------------------------------ */
.botao {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: .6rem 1.2rem;
    border: 1px solid var(--borda-forte); border-radius: var(--raio);
    background: var(--superficie); color: var(--texto);
    font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.botao:hover { background: var(--superficie-2); }
.botao--principal { background: var(--laranja); border-color: var(--laranja); color: #fff; }
.botao--principal:hover { background: var(--laranja-escuro); }
.botao--largo { width: 100%; margin-top: 1.2rem; font-size: 1.05rem; }

.formulario label, .formulario legend {
    display: block; margin: 1rem 0 .35rem; font-weight: 600;
}
.formulario > label:first-of-type { margin-top: 0; }
.campo {
    width: 100%; min-height: 48px; padding: .6rem .8rem;
    border: 1px solid var(--borda-forte); border-radius: var(--raio);
    background: var(--superficie-2); color: var(--texto); font: inherit;
}
.campo:focus { outline: 2px solid var(--laranja); outline-offset: 1px; }
textarea.campo { resize: vertical; }

.horas { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.horas[hidden] { display: none; }

.segmentos { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.segmentos legend { width: 100%; }
.segmentos label { flex: 1; margin: 0; }
.segmentos input { position: absolute; opacity: 0; }
.segmentos span {
    display: flex; align-items: center; justify-content: center;
    min-height: 48px; border: 1px solid var(--borda-forte); border-radius: var(--raio);
    background: var(--superficie-2); cursor: pointer; font-weight: 600;
}
.segmentos input:checked + span {
    background: var(--laranja-suave); border-color: var(--laranja); color: var(--laranja-texto);
}
.segmentos input:focus-visible + span { outline: 2px solid var(--laranja); }

/* ---- Entrada ------------------------------------------------------- */
.login { max-width: 400px; margin: 1.5rem auto 0; text-align: center; }
.login .formulario { text-align: left; margin-top: 1.2rem; }
.login__icone { width: 72px; height: 72px; border-radius: 16px; }
.campo--pin { font-size: 1.6rem; letter-spacing: .5em; text-align: center; }

.armadilha { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.captcha {
    display: flex !important; align-items: center; gap: .8rem;
    margin-top: 1.2rem !important; padding: .9rem 1rem;
    border: 1px solid var(--borda-forte); border-radius: var(--raio);
    background: var(--superficie-2); cursor: pointer; user-select: none;
}
.captcha input { position: absolute; opacity: 0; }
.captcha__caixa {
    flex: none; width: 28px; height: 28px; border-radius: 6px;
    border: 2px solid var(--borda-forte); background: var(--superficie);
    display: grid; place-items: center; transition: background .15s, border-color .15s;
}
.captcha input:checked + .captcha__caixa { background: var(--verde); border-color: var(--verde); }
.captcha input:checked + .captcha__caixa::after { content: "✓"; color: #fff; font-weight: 800; }
.captcha input:focus-visible + .captcha__caixa { outline: 2px solid var(--laranja); outline-offset: 2px; }
.captcha__texto { font-weight: 600; }

/* ---- Lista grande de funcionários ---------------------------------- */
.titulo-acao {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: .8rem 1rem;
}
.titulo-acao .suave { margin-bottom: 0; }
.titulo-acao--calendario { margin-bottom: 1rem; }
.botao--destaque {
    gap: .5rem; border: 2px solid var(--laranja);
    background: var(--laranja-suave); color: var(--laranja-texto); font-size: 1.05rem;
}
.botao--destaque:hover { background: var(--laranja); color: #fff; }
@media (max-width: 640px) { .botao--destaque { width: 100%; } }

.lista-grande {
    list-style: none; padding: 0; margin: 1rem 0 0;
    display: grid; gap: .7rem;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.lista-grande a {
    display: flex; align-items: center; gap: 1rem;
    min-height: 76px; padding: 1rem 1.2rem;
    background: var(--superficie); border-radius: var(--raio-grande);
    box-shadow: var(--sombra-1); border: 1px solid var(--borda);
    color: var(--texto); text-decoration: none;
    font-size: 1.35rem; font-weight: 700;
    transition: transform .1s, border-color .1s;
}
.lista-grande a:hover, .lista-grande a:focus-visible {
    border-color: var(--laranja); transform: translateY(-1px);
}
.inicial {
    flex: none; width: 48px; height: 48px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--laranja-suave); color: var(--laranja-texto); font-size: 1.3rem;
}

/* ---- Escolha do tipo ------------------------------------------------ */
.escolhas { display: grid; gap: 1rem; margin-top: 1rem; }
@media (min-width: 600px) { .escolhas { grid-template-columns: 1fr 1fr; } }
.escolha {
    display: flex; flex-direction: column; align-items: flex-start; gap: .3rem;
    padding: 1.6rem 1.4rem; min-height: 170px;
    background: var(--superficie); border: 2px solid var(--borda); border-radius: var(--raio-grande);
    box-shadow: var(--sombra-2); color: var(--texto); text-decoration: none;
}
.escolha:hover, .escolha:focus-visible { border-color: var(--laranja); }
.escolha strong { font-size: 1.35rem; }
.escolha span:last-child { color: var(--texto-suave); }
.escolha__icone {
    width: 48px; height: 48px; border-radius: 12px; margin-bottom: .5rem;
    display: grid; place-items: center;
    background: var(--laranja); color: #fff; font-size: 1.5rem; font-weight: 800;
}

/* ---- Resumo, sucesso e modal --------------------------------------- */
.resumo { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 1rem 0; }
.resumo dt { color: var(--texto-suave); }
.resumo dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.sucesso { text-align: center; }
.sucesso .resumo { text-align: left; }
.sucesso__icone {
    width: 64px; height: 64px; margin: 0 auto .5rem; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--verde-suave); color: var(--verde-texto); font-size: 2rem; font-weight: 800;
}
.acoes { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1rem; }

.modal {
    width: min(460px, calc(100% - 2rem));
    border: 0; border-radius: var(--raio-grande); padding: 1.4rem;
    background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-2);
}
.modal::backdrop { background: rgba(10,12,16,.5); }
.modal__acoes { display: flex; gap: .6rem; justify-content: flex-end; }

/* ---- Calendário (FullCalendar) -------------------------------------- */
#calendario {
    --fc-border-color: var(--borda);
    --fc-page-bg-color: var(--superficie);
    --fc-neutral-bg-color: var(--superficie-2);
    --fc-today-bg-color: var(--laranja-suave);
    --fc-button-bg-color: var(--superficie);
    --fc-button-border-color: var(--borda-forte);
    --fc-button-text-color: var(--texto);
    --fc-button-hover-bg-color: var(--superficie-2);
    --fc-button-hover-border-color: var(--borda-forte);
    --fc-button-active-bg-color: var(--laranja);
    --fc-button-active-border-color: var(--laranja);
    --fc-now-indicator-color: var(--laranja);
}
#calendario .fc-button-active { color: #fff; }
#calendario .fc-button { font-weight: 600; text-transform: capitalize; }
#calendario .fc-toolbar-title { font-size: 1.3rem; text-transform: capitalize; }
#calendario .fc-event { font-size: .82rem; border: 0; cursor: default; }
#calendario .fc-daygrid-day-number,
#calendario .fc-col-header-cell-cushion { color: var(--texto); text-decoration: none; }

@media (max-width: 640px) {
    .cartao--calendario { padding: .5rem; border-radius: var(--raio); }
    #calendario .fc-header-toolbar { flex-direction: column; gap: .5rem; }
    #calendario .fc-toolbar-title { font-size: 1.1rem; }
    .lista-grande a { font-size: 1.2rem; }
}