/* ==================================================
   BASE.CSS
   Variáveis globais do sistema — cores, tipografia,
   espaçamento. Todas as páginas devem importar este
   arquivo ANTES do CSS específico da página.
================================================== */

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

/* ==================================================
   FONTE CUSTOMIZADA: MYRIAD
================================================== */

@font-face {
    font-family: 'Myriad Pro';
    src: url('../assets/fonts/MyriadPro-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../assets/fonts/MyriadPro-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

/* ==================================================
   CORES
================================================== */

:root{

    /* Paleta principal */
    --verde: #1F3222;
    --verde-hover: #2F4A36;
    --verde-suave: #8BAC96;

    --branco: #F2F2F2;
    --cinza-claro: #E4E4E1;   /* fundo de cards internos, hover de linhas */
    --cinza-borda: #D4D4D0;   /* bordas discretas */

    --texto-principal: #2B2B2B;
    --texto-secundario: #6B6B68; /* labels, placeholders, texto de apoio */


    /* ==================================================
       TIPOGRAFIA
       Escala pensada para software de uso prolongado:
       texto de corpo pequeno, títulos discretos.
    ================================================== */

    --fonte-corpo: "Myriad Pro", "Crimson Text", serif;
    --fonte-titulo: "MyriadPro-Bold", serif;

    --texto-xs: 14px;   /* legendas, metadados */
    --texto-sm: 14px;   /* texto padrão de tabelas e listas */
    --texto-md: 15px;   /* texto padrão de formulários */
    --texto-lg: 16px;   /* subtítulos de seção */
    --texto-xl: 20px;   /* títulos de página (ex: "Cadastro") */
    --texto-xxl: 26px;  /* uso raro, só se algo precisar de muito destaque */


    /* ==================================================
       ESPAÇAMENTO
       Escala compacta — evita "ar" em excesso entre
       elementos, priorizando densidade de informação.
    ================================================== */

    --espaco-xs: 4px;
    --espaco-sm: 8px;
    --espaco-md: 12px;
    --espaco-lg: 20px;
    --espaco-xl: 32px;


    /* ==================================================
       OUTROS
    ================================================== */

    --raio-borda: 8px;       /* border-radius padrão */
    --sombra-suave: 0 2px 8px rgba(0,0,0,.12);

}


/* ==================================================
   BODY
================================================== */

body{
    background: var(--verde);
    font-family: var(--fonte-corpo);
    font-size: var(--texto-md);
    color: var(--texto-principal);
}
/* ==================================================
   VARIÁVEIS EXTRAS PARA PÁGINAS INTERNAS
================================================== */

:root{
    --fundo-conteudo: #F7F6F2;  /* fundo da área de conteúdo, ao lado da sidebar */
    --card: #FFFFFF;             /* fundo de cards internos: tabelas, formulários */
}


/* ==================================================
   LAYOUT COM SIDEBAR
   Compartilhado por todas as páginas internas
   (depois do login): Clientes, Agendamento, etc.
================================================== */

.layout{
    display: flex;
    min-height: 100vh;
}

.sidebar{
    width: 220px;
    flex-shrink: 0;
    background: var(--verde);
    padding: var(--espaco-xl) var(--espaco-lg);
}

.sidebar .logo{
    width: 110px;
    display: block;
    margin: 0 auto var(--espaco-xl);
}

.sidebar nav{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espaco-xs);
}

.sidebar nav a{
    font-family: var(--fonte-corpo);
    color: white;
    text-decoration: none;
    font-size: var(--texto-lg);
    padding: var(--espaco-sm) var(--espaco-md);
    border-radius: var(--raio-borda);
    transition: background .2s;
    text-align: center;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    line-height: 1;
}

.sidebar nav a:hover,
.sidebar nav a.ativo{
    background: rgba(255,255,255,.14);
}

.conteudo{
    flex: 1;
    background: var(--fundo-conteudo);
    padding: var(--espaco-xl);
    overflow-y: auto;
}

.titulo-pagina{
    font-family: var(--fonte-titulo);
    font-size: var(--texto-xl);
    font-weight: 600;
    color: var(--texto-principal);
    margin-bottom: var(--espaco-lg);
}

/* ==================================================
   ESPAÇAMENTO ENTRE CARDS SOLTOS DENTRO DO CONTEÚDO
   (páginas sem <form>, como Página do Tutor)
================================================== */

.conteudo > .card{
    margin-bottom: var(--espaco-lg);
}

.conteudo > .card:last-child{
    margin-bottom: 0;
}
/* ==================================================
   BOTÕES COMPARTILHADOS (secundário / salvar)
   Usados em Cadastro, Página do Tutor, Prontuário...
================================================== */

.secundario{
    height: 38px;
    padding: 0 var(--espaco-md);
    border: 1px solid var(--verde);
    border-radius: var(--raio-borda);
    background: transparent;
    color: var(--verde);
    font-family: var(--fonte-corpo);
    font-size: var(--texto-sm);
    cursor: pointer;
    transition: background .2s;
}

.secundario:hover{
    background: rgba(31,50,34,.06);
}

.salvar{
    height: 38px;
    padding: 0 var(--espaco-lg);
    border: none;
    border-radius: var(--raio-borda);
    background: var(--verde);
    color: white;
    font-family: var(--fonte-corpo);
    font-size: var(--texto-md);
    cursor: pointer;
    transition: background .2s;
}

.salvar:hover{
    background: var(--verde-hover);
}

/* ==================================================
   TOAST DE NOTIFICAÇÃO
   Substitui alert() nativo do navegador
================================================== */

.toast{
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: var(--verde);
    color: white;
    padding: var(--espaco-md) var(--espaco-lg);
    border-radius: 10px;
    box-shadow: var(--sombra-suave);
    font-family: var(--fonte-corpo);
    font-size: var(--texto-md);
    display: flex;
    align-items: center;
    gap: var(--espaco-sm);

    /* Começa invisível e deslocado, pronto pra "deslizar" */
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 1000;
}

.toast.visivel{
    opacity: 1;
    transform: translateY(0);
}

.toast.erro{
    background: #B33A3A;
}

.toast .icone-toast{
    font-size: var(--texto-lg);
    line-height: 1;
}