/* =========================================================
   ASNtube
   EEEFM ANTÔNIO DOS SANTOS NEVES
   ========================================================= */

:root {
    --asn-navy: #062b61;
    --asn-blue: #0b4ca8;
    --asn-orange: #f5a018;
    --asn-cream: #f8f5ed;
    --asn-white: #ffffff;
    --asn-text: #082d62;
    --asn-gray: #62657a;
    --asn-border: #e4d9c6;
}


/* =========================================================
   CONFIGURAÇÃO GERAL DA PÁGINA
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;

    font-family: "Inter", "Segoe UI", Arial, sans-serif;

    color: var(--asn-text);

    /*
       A cor continua indefinidamente depois
       que a imagem de fundo termina.
    */
    background-color: var(--asn-cream);

    /*
       Imagem criada para o topo da página.
       Estrutura esperada:

       /index.html
       /style.css
       /images/background-asntube.png
    */
    background-image: url("images/background-asntube.png");

    background-repeat: no-repeat;
    background-position: top center;

    /*
       IMPORTANTE:
       não usar cover.
       Isso evita que a imagem seja esticada
       quando a página crescer.
    */
    background-size: 100% auto;
}


/* =========================================================
   CONTAINER PRINCIPAL
   ========================================================= */

.container,
.app-container {
    position: relative;

    width: min(1150px, calc(100% - 40px));

    margin: 0 auto;

    /*
       Espaço reservado para a área azul
       da imagem de fundo.
    */
    padding-top: 300px;

    padding-bottom: 60px;
}


/* =========================================================
   TÍTULO ASNtube
   ========================================================= */

.asntube-header {
    position: absolute;

    top: 65px;
    left: 50%;

    transform: translateX(-50%);

    width: 55%;

    text-align: center;

    color: white;

    z-index: 2;
}


/* ASN + tube */

.asntube-header h1 {
    margin: 0;

    font-size: clamp(48px, 5vw, 76px);

    font-weight: 800;

    line-height: 1;

    letter-spacing: -3px;

    color: white;

    text-shadow:
        0 3px 10px rgba(0, 0, 0, 0.12);
}


/* Palavra tube em laranja */

.asntube-header h1 span {
    color: var(--asn-orange);
}


/* Nome da escola */

.asntube-header p {
    margin: 12px 0 0;

    font-size: 16px;

    font-weight: 600;

    letter-spacing: 0.7px;

    color: rgba(255, 255, 255, 0.95);
}


/* Slogan opcional */

.asntube-slogan {
    display: block;

    margin-top: 12px;

    font-size: 15px;

    font-weight: 400;

    font-style: italic;

    color: rgba(255, 255, 255, 0.85);
}


/* =========================================================
   ÁREA PRINCIPAL
   ========================================================= */

.content-area {
    position: relative;

    z-index: 3;

    width: 100%;
}


/* =========================================================
   ABAS: VÍDEOS / GERENCIAR
   ========================================================= */

.tabs {
    display: inline-flex;

    align-items: center;

    padding: 4px;

    background: rgba(255, 255, 255, 0.96);

    border: 1px solid #e5dccb;

    border-radius: 30px;

    box-shadow:
        0 5px 18px rgba(7, 43, 95, 0.08);
}


/* Botões */

.tabs button {
    padding: 11px 28px;

    border: none;

    border-radius: 25px;

    background: transparent;

    color: #55546b;

    font-family: inherit;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.15s ease;
}


/* Hover */

.tabs button:hover {
    color: var(--asn-navy);
}


/* Aba ativa */

.tabs button.active {
    background: var(--asn-navy);

    color: white;

    box-shadow:
        0 4px 10px rgba(4, 42, 94, 0.20);
}


/* =========================================================
   CAMPO DE BUSCA
   ========================================================= */

.search-container {
    width: 100%;

    margin-top: 25px;
}


.search-input,
input[type="search"] {
    width: 100%;

    padding: 15px 20px;

    background: rgba(255, 255, 255, 0.96);

    border: 1px solid var(--asn-border);

    border-radius: 13px;

    outline: none;

    font-family: inherit;

    font-size: 16px;

    color: var(--asn-text);

    box-shadow:
        0 5px 20px rgba(9, 42, 86, 0.04);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* Placeholder */

.search-input::placeholder,
input[type="search"]::placeholder {
    color: #77798a;
}


/* Campo selecionado */

.search-input:focus,
input[type="search"]:focus {
    border-color: var(--asn-orange);

    box-shadow:
        0 0 0 3px rgba(245, 160, 24, 0.12),
        0 5px 20px rgba(9, 42, 86, 0.05);
}


/* =========================================================
   CARDS / ÁREA DAS TURMAS
   ========================================================= */

.card,
.empty-state {
    width: 100%;

    margin-top: 22px;

    padding: 50px 30px;

    background: rgba(255, 255, 255, 0.94);

    border: 1px dashed #dfd3bf;

    border-radius: 20px;

    text-align: center;

    box-shadow:
        0 12px 35px rgba(6, 43, 97, 0.04);

    backdrop-filter: blur(4px);
}


/* Título */

.empty-state h3,
.card h3 {
    margin: 0 0 10px;

    color: var(--asn-navy);

    font-size: 20px;

    font-weight: 700;
}


/* Texto */

.empty-state p,
.card p {
    margin: 0;

    color: var(--asn-gray);

    font-size: 16px;

    line-height: 1.6;
}


/* =========================================================
   CARDS DE TURMAS
   ========================================================= */

.turmas-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(280px, 1fr));

    gap: 20px;

    margin-top: 25px;
}


.turma-card {
    padding: 22px;

    background: rgba(255, 255, 255, 0.96);

    border: 1px solid rgba(8, 45, 98, 0.08);

    border-radius: 18px;

    box-shadow:
        0 8px 25px rgba(6, 43, 97, 0.06);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.turma-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(6, 43, 97, 0.10);
}


.turma-card h3 {
    margin: 0 0 8px;

    color: var(--asn-navy);

    font-size: 19px;
}


/* =========================================================
   BOTÕES GERAIS
   ========================================================= */

.btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 11px 20px;

    border: none;

    border-radius: 10px;

    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        box-shadow 0.2s ease;
}


.btn-primary {
    background: var(--asn-navy);

    color: white;
}


.btn-primary:hover {
    transform: translateY(-1px);

    box-shadow:
        0 6px 15px rgba(6, 43, 97, 0.18);
}


.btn-orange {
    background: var(--asn-orange);

    color: var(--asn-navy);
}


/* =========================================================
   RESPONSIVIDADE - TABLET
   ========================================================= */

@media (max-width: 900px) {

    body {
        /*
           Mantém a proporção da arte
           mesmo em telas menores.
        */
        background-size: auto 290px;
    }


    .container,
    .app-container {
        width: calc(100% - 30px);

        padding-top: 270px;
    }


    .asntube-header {
        top: 65px;

        width: 50%;
    }


    .asntube-header h1 {
        font-size: 48px;
    }


    .asntube-header p {
        font-size: 13px;
    }


    .asntube-slogan {
        font-size: 13px;
    }
}


/* =========================================================
   RESPONSIVIDADE - CELULAR
   ========================================================= */

@media (max-width: 600px) {

    body {
        /*
           Em celular priorizamos o centro da imagem.
        */
        background-size: auto 230px;
        background-position: top center;
    }


    .container,
    .app-container {
        width: calc(100% - 24px);

        padding-top: 220px;

        padding-bottom: 40px;
    }


    /* O título fica menor */

    .asntube-header {
        top: 65px;

        width: 45%;
    }


    .asntube-header h1 {
        font-size: 34px;

        letter-spacing: -1px;
    }


    .asntube-header p {
        display: none;
    }


    .asntube-slogan {
        display: none;
    }


    /* Abas */

    .tabs {
        width: 100%;

        display: flex;
    }


    .tabs button {
        flex: 1;

        padding: 10px 15px;
    }


    /* Cards */

    .card,
    .empty-state {
        padding: 35px 18px;

        border-radius: 16px;
    }


    /* Turmas em uma coluna */

    .turmas-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }
}


/* =========================================================
   COMPLEMENTOS — trechos que não vieram no seu CSS,
   escritos seguindo o mesmo padrão de nomes e variáveis.
   ========================================================= */

/* Toolbar acima das abas: abas + busca lado a lado no desktop */

.toolbar {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    flex-wrap: wrap;
}

.toolbar .search-container {
    margin-top: 0;

    max-width: 340px;
}

@media (max-width: 700px) {
    .toolbar .search-container {
        max-width: none;
        width: 100%;
    }
}


/* Card de turma vira um link clicável, mantendo o visual de .turma-card */

a.turma-card {
    display: block;

    text-decoration: none;
}

.turma-card .card-cta {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-top: 14px;

    padding: 6px 14px;

    background: var(--asn-orange);

    color: var(--asn-navy);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.03em;

    text-transform: uppercase;

    border-radius: 999px;
}

.turma-card p {
    margin: 0;

    color: var(--asn-gray);

    font-size: 13.5px;

    line-height: 1.5;

    min-height: 18px;
}


/* Painel de gerenciamento: reaproveita .card como moldura */

.panel {
    text-align: left;
}

.panel h2 {
    margin: 0 0 16px;

    color: var(--asn-navy);

    font-size: 18px;

    font-weight: 700;
}

.field {
    margin-bottom: 14px;
}

.field label {
    display: block;

    margin-bottom: 6px;

    font-size: 12.5px;

    font-weight: 600;

    color: var(--asn-gray);
}

.field-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;
}

@media (max-width: 560px) {
    .field-row {
        grid-template-columns: 1fr;
    }
}

.field input {
    width: 100%;

    padding: 12px 14px;

    background: var(--asn-white);

    border: 1px solid var(--asn-border);

    border-radius: 10px;

    outline: none;

    font-family: inherit;

    font-size: 14px;

    color: var(--asn-text);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.field input:focus {
    border-color: var(--asn-orange);

    box-shadow: 0 0 0 3px rgba(245, 160, 24, 0.12);
}

.form-error {
    display: none;

    margin: 4px 0 14px;

    font-size: 12.5px;

    font-weight: 600;

    color: #c2402b;
}


/* Lista de botões cadastrados */

.list {
    display: flex;

    flex-direction: column;

    gap: 10px;
}

.row {
    display: flex;

    align-items: center;

    gap: 14px;

    padding: 14px 16px;

    background: var(--asn-white);

    border: 1px solid var(--asn-border);

    border-radius: 12px;
}

.row-info {
    flex: 1;

    min-width: 0;
}

.row-turma {
    display: block;

    font-weight: 700;

    font-size: 14px;

    color: var(--asn-navy);
}

.row-link {
    display: block;

    margin-top: 2px;

    font-size: 12px;

    color: var(--asn-gray);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

.row-del {
    flex: none;

    padding: 8px 14px;

    background: transparent;

    border: 1px solid var(--asn-border);

    border-radius: 8px;

    color: #c2402b;

    font-family: inherit;

    font-size: 12.5px;

    font-weight: 700;

    cursor: pointer;
}

.row-del:hover {
    background: #fbeae6;
}

.empty-admin {
    margin: 0;

    padding: 8px 2px;

    font-size: 13px;

    color: var(--asn-gray);
}