* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --cor-fundo: #f7d9ad; /* #f8e6c7 / f7d9ad*/
    --cor-superficie: #ffffff;
    --cor-escura: #2c2c2a;
    --cor-escura-secundaria: #3f3f3c;
    --cor-laranja: #ba7517;
    --cor-laranja-clara: #f5a623;
    --cor-laranja-hover: #a8501c;
    --cor-texto: #111827;
    --cor-texto-secundario: #475569;
    --cor-borda: #d6c7ae;
    --cor-perigo: #b42318;
    --cor-perigo-escura: #8f1d14;
    --cor-sucesso: #166534;
}

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--cor-texto);
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--cor-fundo);
}

button,
input {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

.area-principal {
    width: 100%;
    flex: 1;
}

/* ========================================
   LOGIN E CADASTRO
======================================== */

.pagina-autenticacao {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    background-color: var(--cor-fundo);
}

.cartao-autenticacao {
    width: 100%;
    max-width: 430px;
    padding: 36px;
    background-color: var(--cor-escura);
    border: 1px solid var(--cor-escura-secundaria);
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.16);
}

.cabecalho-autenticacao {
    margin-bottom: 30px;
    text-align: center;
}

.logo-autenticacao {
    width: 180px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}

.logo-autenticacao img {
    width: 150px;
    height: 58px;
    display: block;
    object-fit: contain;
}

.cabecalho-autenticacao h1 {
    margin-bottom: 10px;
    color: #ffffff;
    font-size: 28px;
}

.cabecalho-autenticacao p {
    color: #ffffff;
    font-size: 15px;
    line-height: 1.5;
}

.form-autenticacao {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.grupo-campo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.grupo-campo label {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

.grupo-campo input {
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    color: #000000;
    font-size: 15px;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.grupo-campo input::placeholder {
    color: #64748b;
}

.grupo-campo input:focus {
    border-color: var(--cor-laranja);
    box-shadow: 0 0 0 4px rgba(186, 117, 23, 0.22);
}

.grupo-campo small {
    color: #ffffff;
    font-size: 12px;
    line-height: 1.4;
}

.botao-principal {
    width: 100%;
    min-height: 48px;
    margin-top: 4px;
    padding: 12px 18px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    background-color: var(--cor-laranja);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.botao-principal:hover {
    background-color: var(--cor-laranja-hover);
}

.botao-principal:active {
    transform: scale(0.99);
}

.rodape-autenticacao {
    margin-top: 26px;
    text-align: center;
}

.rodape-autenticacao p {
    color: #ffffff;
    font-size: 14px;
}

.rodape-autenticacao a {
    color: var(--cor-laranja-clara);
    font-weight: 700;
    text-decoration: none;
}

.rodape-autenticacao a:hover {
    text-decoration: underline;
}

/* ========================================
   MENSAGENS DO FLASK
======================================== */

.mensagens {
    position: fixed;
    top: 90px;
    left: 50%;
    z-index: 1000;
    width: min(430px, calc(100% - 32px));
    transform: translateX(-50%);
}

.mensagem {
    margin-bottom: 10px;
    padding: 12px 14px;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
}

.mensagem.erro,
.mensagem.danger {
    background-color: #991b1b;
    border: 1px solid #fecaca;
}

.mensagem.sucesso,
.mensagem.success {
    background-color: var(--cor-sucesso);
    border: 1px solid #bbf7d0;
}

.mensagem.aviso,
.mensagem.warning {
    background-color: #92400e;
    border: 1px solid #fde68a;
}

.mensagem.info {
    background-color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

/* ========================================
   CABEÇALHO
======================================== */

.cabecalho-principal {
    width: 100%;
    height: 76px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    background-color: var(--cor-escura);
    border-bottom: 2px solid var(--cor-laranja);
}

.menu-principal {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 32px;
}

.marca {
    width: 185px;
    height: 64px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.logo-principal {
    width: 140px;
    height: 40px;
    display: block;
    object-fit: contain;
    object-position: left center;
}

.menu-links {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
    margin-left: 50px;
}

.menu-links a {
    height: 100%;
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

.menu-links a:hover {
    color: var(--cor-laranja-clara);
    border-bottom-color: var(--cor-laranja-clara);
}

.menu-links .link-sair {
    margin-left: 45px;
}

/* ========================================
   RODAPÉ
======================================== */

.rodape-principal {
    width: 100%;
    flex-shrink: 0;
    padding: 22px 32px;
    color: #ffffff;
    font-size: 14px;
    text-align: center;
    background-color: var(--cor-escura);
    border-top: 2px solid var(--cor-laranja);
}

/* ========================================
   ESTRUTURA DAS PÁGINAS INTERNAS
======================================== */

.pagina-interna,
.pagina-disciplina {
    min-height: calc(100vh - 146px);
    padding: 20px 32px 60px;
    background-color: var(--cor-fundo);
}

.conteudo-disciplina {
    width: 100%;
    max-width: 800px;
    margin: 0;
}

.container-pagina {
    width: 100%;
    max-width: 1180px;
    margin: 0;
}

.conteudo-formulario {
    max-width: 1000px;
}

.conteudo-formulario-estreito {
    max-width: 700px;
}

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 14px;
    color: #64748b;
    font-size: 14px;
}

.breadcrumb a {
    color: #64748b;
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--cor-laranja);
    text-decoration: underline;
}

.breadcrumb strong {
    color: #7a4a0d;
}

.cabecalho-pagina {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--cor-borda);
}

.cabecalho-pagina h1,
.cabecalho-pagina-disciplina h1 {
    margin-bottom: 8px;
    color: var(--cor-texto);
    font-size: 28px;
    line-height: 1.2;
}

.cabecalho-pagina p,
.cabecalho-pagina-disciplina p {
    max-width: 760px;
    color: var(--cor-texto-secundario);
    font-size: 15px;
    line-height: 1.5;
}

.cabecalho-pagina-disciplina {
    padding-bottom: 26px;
    border-bottom: 1px solid var(--cor-borda);
}

/* ========================================
   BOTÕES E LINKS DE AÇÃO
======================================== */

.botao-primario,
.botao-secundario {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 7px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, transform 0.1s;
}

.botao-primario {
    color: #ffffff;
    background-color: var(--cor-laranja);
    border: 1px solid var(--cor-laranja);
}

.botao-primario:hover {
    background-color: var(--cor-laranja-hover);
    border-color: var(--cor-laranja-hover);
}

.botao-secundario {
    color: #334155;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
}

.botao-secundario:hover {
    background-color: #f8fafc;
    border-color: #94a3b8;
}

.botao-primario:active,
.botao-secundario:active {
    transform: scale(0.98);
}

.botao-link-perigo {
    padding: 0;
    color: var(--cor-perigo);
    font-size: 14px;
    font-weight: 700;
    background: transparent;
    border: none;
    cursor: pointer;
}

.botao-link-perigo:hover {
    color: var(--cor-perigo-escura);
    text-decoration: underline;
}

/* ========================================
   FORMULÁRIOS INTERNOS
======================================== */

.formulario-padrao,
.form-disciplina {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-top: 28px;
}

.linha-formulario {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.campo-padrao,
.campo-disciplina {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.campo-padrao label,
.campo-disciplina label {
    color: var(--cor-texto);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.campo-padrao input,
.campo-disciplina input {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    color: #ffffff;
    font-size: 16px;
    background-color: var(--cor-escura);
    border: 1px solid var(--cor-escura-secundaria);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.campo-padrao input::placeholder,
.campo-disciplina input::placeholder {
    color: #9ca3af;
}

.campo-padrao input:focus,
.campo-disciplina input:focus {
    border-color: var(--cor-laranja);
    box-shadow: 0 0 0 3px rgba(186, 117, 23, 0.22);
}

.campo-padrao small {
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}

.campo-largura-total {
    width: 100%;
}

.acoes-formulario,
.acoes-disciplina {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
    padding-top: 24px;
    border-top: 1px solid var(--cor-borda);
}

.botao-cadastrar-disciplina {
    min-height: 46px;
    padding: 0 24px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    background-color: var(--cor-laranja);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.botao-cadastrar-disciplina:hover {
    background-color: var(--cor-laranja-hover);
}

.botao-cancelar-disciplina {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    color: #334155;
    font-size: 15px;
    font-weight: 600;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    text-decoration: none;
}

.botao-cancelar-disciplina:hover {
    background-color: #f8fafc;
    border-color: #94a3b8;
}

/* Controle numérico dentro da barra */

.controle-numero {
    position: relative;
    width: 100%;
}

.campo-padrao .controle-numero input,
.campo-disciplina .controle-numero input {
    padding-right: 82px;
}

.botoes-numero {
    position: absolute;
    top: 0;
    right: 8px;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
}

.botao-quantidade {
    width: 24px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--cor-laranja-clara);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s, transform 0.15s;
}

.botao-quantidade:hover {
    color: #ffc15c;
    transform: scale(1.15);
}

.botao-quantidade:active {
    color: var(--cor-laranja);
    transform: scale(0.95);
}

.controle-numero input[type="number"]::-webkit-inner-spin-button,
.controle-numero input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
}

.controle-numero input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

/* ========================================
   DASHBOARD
======================================== */

.cabecalho-dashboard {
    align-items: center;
}

.resumo-dashboard,
.resumo-historico {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 26px;
}

.resumo-dashboard {
    grid-template-columns: minmax(220px, 300px);
}

.cartao-resumo {
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
    background-color: #ffffff;
    border: 1px solid #e2d4bd;
    border-radius: 10px;
}

.cartao-resumo span {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.cartao-resumo strong {
    color: var(--cor-texto);
    font-size: 24px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.grade-disciplinas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.cartao-disciplina {
    display: flex;
    flex-direction: column;
    padding: 22px;
    background-color: #ffffff;
    border: 1px solid #e2d4bd;
    border-radius: 12px;
}

.topo-cartao-disciplina {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eadfcd;
}

.topo-cartao-disciplina h2 {
    margin-bottom: 6px;
    color: var(--cor-texto);
    font-size: 21px;
}

.topo-cartao-disciplina p {
    color: #64748b;
    font-size: 14px;
}

.selo-status {
    flex-shrink: 0;
    padding: 6px 10px;
    color: #7a4a0d;
    font-size: 12px;
    font-weight: 700;
    background-color: #fff2d8;
    border: 1px solid #edc987;
    border-radius: 999px;
}

.informacoes-disciplina {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.informacoes-disciplina div {
    min-width: 0;
    padding: 12px;
    background-color: #fbf4e8;
    border-radius: 8px;
}

.informacoes-disciplina dt {
    margin-bottom: 5px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.informacoes-disciplina dd {
    color: var(--cor-texto);
    font-size: 14px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.area-progresso {
    margin-top: 20px;
}

.texto-progresso {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;

    color: #475569;
    font-size: 13px;
}

.situacao-progresso {
    display: flex;
    align-items: center;
    gap: 10px;
}

.situacao-progresso small {
    font-size: 12px;
    font-weight: 700;
}


/* ========================================
   BARRA DE PROGRESSO
======================================== */

.barra-progresso {
    width: 100%;
    height: 10px;

    overflow: hidden;

    background-color: #e7d9c2;

    border-radius: 999px;
}

.barra-progresso span {
    width: var(--percentual);
    height: 100%;

    display: block;

    border-radius: inherit;

    transition:
        width 0.35s ease,
        background-color 0.35s ease;
}


/* ========================================
   SITUAÇÃO VERDE
   Menos de 50% do limite
======================================== */

.barra-progresso.barra-verde span {
    background-color: #22a447;
}

.situacao-progresso .barra-verde {
    color: #15803d;
}


/* ========================================
   SITUAÇÃO LARANJA
   Entre 50% e 99%
======================================== */

.barra-progresso.barra-laranja span {
    background-color: #e58b17;
}

.situacao-progresso .barra-laranja {
    color: #b45309;
}


/* ========================================
   SITUAÇÃO VERMELHA
   Limite atingido
======================================== */

.barra-progresso.barra-vermelha span {
    background-color: #c43d32;
}

.situacao-progresso .barra-vermelha {
    color: #b42318;
}

.acoes-faltas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.rodape-cartao-disciplina {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #eadfcd;
}

.rodape-cartao-disciplina a {
    color: var(--cor-laranja);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.rodape-cartao-disciplina a:hover {
    text-decoration: underline;
}

.estado-vazio {
    max-width: 620px;
    margin-top: 28px;
    padding: 34px;
    text-align: center;
    background-color: var(--cor-escura);
    border: 1px solid #e2d4bd;
    border-radius: 12px;
    color: #ffffff;
}

.estado-vazio h2,
.estado-vazio h3 { 
    color: #ffffff;
    margin-bottom: 10px;
}

.estado-vazio p {
    
    margin-bottom: 20px;
    color: #fcebdb;
    line-height: 1.5;
}

.estado-vazio-compacto {
    margin: 0;
    padding: 26px;
}

.estado-vazio-compacto p {
    margin-bottom: 0;
}

/* ========================================
   HISTÓRICO E CALENDÁRIO
======================================== */

.cabecalho-historico {
    align-items: center;
}

.grade-historico {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 22px;
    margin-top: 24px;
}

.painel-calendario,
.painel-registros {
    padding: 22px;
    background-color: #ffffff;
    border: 1px solid #e2d4bd;
    border-radius: 12px;
}

.cabecalho-calendario {
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.cabecalho-calendario h2 {
    color: var(--cor-texto);
    font-size: 20px;
    text-align: center;
}

.botao-mes {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cor-laranja);
    font-size: 28px;
    background-color: #fff8ed;
    border: 1px solid #e7c895;
    border-radius: 8px;
    cursor: pointer;
}

.botao-mes:hover {
    color: #ffffff;
    background-color: var(--cor-laranja);
    border-color: var(--cor-laranja);
}

.dias-semana-calendario,
.grade-calendario {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.dias-semana-calendario {
    margin-bottom: 7px;
}

.dias-semana-calendario span {
    padding: 7px 2px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.dia-calendario {
    position: relative;
    min-height: 58px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 8px;
    color: #334155;
    font-size: 14px;
    background-color: #fbf7ef;
    border: 1px solid #eadfcd;
    border-radius: 8px;
}

.dia-calendario-vazio {
    color: transparent;
    background-color: transparent;
    border-color: transparent;
}

.dia-com-falta {
    color: #ffffff;
    background-color: #c43d32;
    border-color: #a92f26;
}

.dia-com-falta > span {
    font-weight: 700;
}

.dia-com-falta small {
    position: absolute;
    right: 6px;
    bottom: 6px;
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    color: #9f2119;
    font-size: 11px;
    font-weight: 700;
    background-color: #ffffff;
    border-radius: 999px;
}

.legenda-calendario {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: #64748b;
    font-size: 13px;
}

.marcador-falta {
    width: 14px;
    height: 14px;
    display: inline-block;
    background-color: #c43d32;
    border-radius: 4px;
}

.cabecalho-lista-registros {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eadfcd;
}

.cabecalho-lista-registros h2 {
    font-size: 20px;
}

.cabecalho-lista-registros span {
    color: #64748b;
    font-size: 13px;
}

.lista-registros {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.registro-falta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background-color: #fff8ed;
    border: 1px solid #ead2a8;
    border-radius: 9px;
}

.data-registro {
    min-width: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    color: #ffffff;
    background-color: #c43d32;
    border-radius: 8px;
}

.data-registro span {
    font-size: 22px;
    font-weight: 700;
}

.data-registro small {
    font-size: 11px;
}

.registro-falta strong {
    display: block;
    margin-bottom: 4px;
}

.registro-falta p {
    color: #64748b;
    font-size: 14px;
}

/* ========================================
   RESPONSIVIDADE
======================================== */

/* ========================================
   AJUSTES GERAIS DE RESPONSIVIDADE
======================================== */

body {
    overflow-x: hidden;
}

img {
    max-width: 100%;
}

.container-pagina,
.conteudo-disciplina,
.conteudo-formulario,
.conteudo-formulario-estreito,
.cartao-disciplina,
.painel-calendario,
.painel-registros {
    min-width: 0;
}

/* ========================================
   TABLETS E NOTEBOOKS MENORES
======================================== */

@media (max-width: 1100px) {
    .grade-historico {
        grid-template-columns: 1fr;
    }

    .grade-disciplinas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .menu-principal {
        padding-right: 20px;
        padding-left: 20px;
    }

    .marca {
        width: 150px;
    }

    .logo-principal {
        width: 130px;
        height: 38px;
    }

    .menu-links {
        gap: 18px;
        margin-left: 20px;
    }

    .menu-links .link-sair {
        margin-left: 18px;
    }

    .pagina-interna,
    .pagina-disciplina {
        padding-right: 20px;
        padding-left: 20px;
    }

    .grade-disciplinas {
        grid-template-columns: 1fr;
    }

    .resumo-historico {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ========================================
   CELULARES E TABLETS
======================================== */

@media (max-width: 760px) {
    /*
       O header passa a ter duas linhas compactas:
       logo em cima e links em uma barra horizontal.
    */

    .cabecalho-principal {
        height: auto;
        min-height: 92px;
    }

    .menu-principal {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        padding: 6px 14px 0;
    }

    .marca {
        width: 130px;
        height: 44px;
        display: flex;
        align-items: center;
    }

    .logo-principal {
        width: 120px;
        height: 36px;
    }

    /*
       Os links não ficam mais um embaixo do outro.
       Eles continuam em uma linha e podem deslizar
       horizontalmente em telas pequenas.
    */

    .menu-links {
        width: calc(100% + 28px);
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 0;
        margin-right: -14px;
        margin-left: -14px;
        padding: 0 8px;
        overflow-x: auto;
        overflow-y: hidden;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .menu-links::-webkit-scrollbar {
        display: none;
    }

    .menu-links a {
        height: 42px;
        flex: 0 0 auto;
        padding: 0 12px;
        font-size: 13px;
        white-space: nowrap;
        border-bottom-width: 2px;
    }

    .menu-links .link-sair {
        margin-left: 0;
    }

    /* Mensagens do Flask abaixo do header */

    .mensagens {
        top: 104px;
    }

    /* Páginas internas */

    .pagina-interna,
    .pagina-disciplina {
        min-height: auto;
        padding: 24px 16px 40px;
    }

    .container-pagina,
    .conteudo-disciplina,
    .conteudo-formulario,
    .conteudo-formulario-estreito {
        width: 100%;
        max-width: 100%;
    }


    .cabecalho-pagina,
    .cabecalho-dashboard,
    .cabecalho-historico {
        align-items: stretch;
        flex-direction: column;
        gap: 18px;
        padding-bottom: 22px;
    }

    .cabecalho-pagina h1,
    .cabecalho-pagina-disciplina h1 {
        font-size: 24px;
    }

    .cabecalho-pagina p,
    .cabecalho-pagina-disciplina p {
        font-size: 14px;
    }

    .cabecalho-pagina > .botao-primario,
    .cabecalho-pagina > .botao-secundario,
    .cabecalho-dashboard > .botao-primario,
    .cabecalho-historico > .botao-secundario {
        width: 100%;
    }

    /* Resumos */

    .resumo-dashboard,
    .resumo-historico {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 20px;
    }

    .resumo-dashboard {
        width: 100%;
    }

    .cartao-resumo {
        min-height: 86px;
        padding: 16px;
    }

    .cartao-resumo strong {
        font-size: 21px;
    }

    /* Dashboard */

    .grade-disciplinas {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 20px;
    }

    .cartao-disciplina {
        padding: 18px;
    }

    .topo-cartao-disciplina {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .topo-cartao-disciplina h2 {
        font-size: 19px;
    }

    .selo-status {
    flex-shrink: 0;

    padding: 6px 12px;

    font-size: 12px;
    font-weight: 700;

    border-radius: 999px;

    transition:
        color 0.3s,
        background-color 0.3s,
        border-color 0.3s;
}


/* VERDE */

.selo-status.status-verde {
    color: #15803d;
    background-color: #dcfce7;
    border: 1px solid #86efac;
}


/* LARANJA */

.selo-status.status-laranja {
    color: #b45309;
    background-color: #ffedd5;
    border: 1px solid #fdba74;
}


/* VERMELHO */

.selo-status.status-vermelho {
    color: #b42318;
    background-color: #fee2e2;
    border: 1px solid #fca5a5;
}

    .informacoes-disciplina {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 16px;
    }

    .acoes-faltas {
        flex-direction: column;
    }

    .acoes-faltas form,
    .acoes-faltas button,
    .acoes-faltas .botao-primario,
    .acoes-faltas .botao-secundario {
        width: 100%;
    }

    .rodape-cartao-disciplina {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    /* Formulários */

    .formulario-padrao,
    .form-disciplina {
        gap: 18px;
        padding-top: 22px;
    }

    .linha-formulario {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .campo-padrao input,
    .campo-disciplina input {
        min-height: 48px;
        font-size: 16px;
    }

    .acoes-formulario,
    .acoes-disciplina {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .acoes-formulario .botao-primario,
    .acoes-formulario .botao-secundario,
    .acoes-disciplina .botao-cadastrar-disciplina,
    .acoes-disciplina .botao-cancelar-disciplina {
        width: 100%;
    }

    /* Histórico */

    .grade-historico {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .painel-calendario,
    .painel-registros {
        padding: 16px;
    }

    .cabecalho-calendario {
        grid-template-columns: 38px 1fr 38px;
        gap: 8px;
    }

    .cabecalho-calendario h2 {
        font-size: 18px;
    }

    .botao-mes {
        width: 38px;
        height: 38px;
        font-size: 25px;
    }

    .dias-semana-calendario,
    .grade-calendario {
        gap: 4px;
    }

    .dia-calendario {
        min-height: 46px;
        padding: 6px;
        font-size: 12px;
        border-radius: 6px;
    }

    .dia-com-falta small {
        right: 4px;
        bottom: 4px;
        min-width: 17px;
        height: 17px;
        font-size: 9px;
    }

    .registro-falta {
        align-items: flex-start;
    }

    /* Rodapé */

    .rodape-principal {
        padding: 18px 16px;
        font-size: 12px;
        line-height: 1.5;
    }
}

/* ========================================
   CELULARES PEQUENOS
======================================== */

@media (max-width: 520px) {
    .pagina-autenticacao {
        align-items: flex-start;
        padding: 20px 12px;
    }

    .cartao-autenticacao {
        margin-top: 45px;
        padding: 50px 20px;
        border-radius: 12px;
    }

    .logo-autenticacao {
        width: 145px;
        height: 52px;
    }

    .logo-autenticacao img {
        width: 130px;
        height: 48px;
    }

    .cabecalho-autenticacao h1 {
        font-size: 23px;
    }

    .cabecalho-autenticacao p {
        font-size: 14px;
    }

    .pagina-interna,
    .pagina-disciplina {
        padding: 20px 12px 34px;
    }

    .cartao-disciplina,
    .painel-calendario,
    .painel-registros {
        padding: 14px;
        border-radius: 9px;
    }

    .cartao-resumo {
        padding: 14px;
    }

    .estado-vazio {
        padding: 24px 16px;
    }

    .texto-progresso {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    /* Calendário compacto */

    .cabecalho-calendario {
        grid-template-columns: 34px 1fr 34px;
    }

    .cabecalho-calendario h2 {
        font-size: 16px;
    }

    .botao-mes {
        width: 34px;
        height: 34px;
        font-size: 22px;
    }

    .dias-semana-calendario span {
        padding: 5px 0;
        font-size: 9px;
    }

    .dias-semana-calendario,
    .grade-calendario {
        gap: 3px;
    }

    .dia-calendario {
        min-height: 38px;
        padding: 4px;
        font-size: 11px;
        border-radius: 5px;
    }

    .dia-com-falta small {
        right: 2px;
        bottom: 2px;
        min-width: 15px;
        height: 15px;
        padding: 0 3px;
        font-size: 8px;
    }

    .legenda-calendario {
        font-size: 11px;
    }

    .registro-falta {
        gap: 10px;
        padding: 10px;
    }

    .data-registro {
        min-width: 62px;
    }

    /* Controle de mais e menos */

    .campo-padrao .controle-numero input,
    .campo-disciplina .controle-numero input {
        padding-right: 70px;
    }

    .botoes-numero {
        right: 5px;
        gap: 4px;
    }

    .botao-quantidade {
        width: 22px;
        height: 28px;
        font-size: 18px;
    }
}

/* ========================================
   TELAS MUITO PEQUENAS
======================================== */

@media (max-width: 360px) {
    .menu-principal {
        padding-right: 10px;
        padding-left: 10px;
    }

    .marca {
        width: 115px;
    }

    .logo-principal {
        width: 108px;
        height: 34px;
    }

    .menu-links {
        width: calc(100% + 20px);
        margin-right: -10px;
        margin-left: -10px;
    }

    .menu-links a {
        padding-right: 10px;
        padding-left: 10px;
        font-size: 12px;
    }

    .pagina-interna,
    .pagina-disciplina {
        padding-right: 10px;
        padding-left: 10px;
    }

    .painel-calendario {
        padding: 10px;
    }

    .dias-semana-calendario span {
        font-size: 8px;
    }

    .dia-calendario {
        min-height: 34px;
        font-size: 10px;
    }
}