/* ==========================================================================
   Kidvora — sistema visual "mesa de jogo"
   Cada tarefa e uma missao, cada missao rende uma ficha de moeda cunhada.
   Paleta: verde-pinho (mesa de feltro) + latao (a moeda) + parchment (cartas).
   ========================================================================== */

:root {
    --pine-900: #1B3A30;
    --pine-700: #26483C;
    --pine-600: #2F6152;
    --pine-100: #DCE6DE;

    --brass-300: #E7C365;
    --brass-500: #C79A3E;
    --brass-700: #9C7526;

    --table-bg: #EAE4CE;
    --parchment-50: #FBF6E9;
    --parchment-200: #EEE3C8;

    --ink-800: #22281F;
    --ink-500: #5B6353;

    --brick-600: #A3402C;
    --brick-100: #F3DCD4;
    --moss-600: #4B7F3F;
    --moss-100: #DFEAD8;

    --radius-card: 20px;
    --radius-control: 10px;
    --shadow-card: 0 1px 2px rgba(27, 58, 48, .07), 0 14px 30px -14px rgba(27, 58, 48, .35);

    --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
    --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

* {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--table-bg);
    background-image: radial-gradient(circle at 15% 0%, rgba(255, 255, 255, .35), transparent 45%);
    color: var(--ink-800);
    line-height: 1.55;
}

h1, h2, h3 {
    font-family: var(--font-display);
    color: var(--pine-900);
    margin: 0 0 .5rem;
    line-height: 1.15;
}

a {
    color: var(--pine-600);
}

:focus-visible {
    outline: 3px solid var(--brass-300);
    outline-offset: 2px;
    border-radius: 4px;
}

/* -------------------------------------------------------------------------
   Topo: barra como a lombada de uma caixa de jogo
   ------------------------------------------------------------------------- */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 1.75rem;
    background: linear-gradient(165deg, var(--pine-900), var(--pine-700));
    box-shadow: 0 2px 0 rgba(0, 0, 0, .12);
}

.topbar .brand {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--brass-300);
    text-decoration: none;
    letter-spacing: .01em;
}

.topbar nav {
    display: flex;
    gap: 1.5rem;
}

.topbar nav a {
    color: rgba(251, 246, 233, .82);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding-bottom: .2rem;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}

.topbar nav a:hover,
.topbar nav a:focus-visible {
    color: var(--parchment-50);
    border-color: var(--brass-500);
}

/* Icone de perfil (pai/superadmin autenticados) no topo */
.profile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, var(--brass-300), var(--brass-500) 70%);
    color: #4A3410;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    border: 2px solid var(--brass-700);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5);
    transition: transform .12s ease, box-shadow .12s ease;
}

.profile-icon:hover,
.profile-icon:focus-visible {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5), 0 3px 8px rgba(0, 0, 0, .3);
}

/* -------------------------------------------------------------------------
   Layout geral
   ------------------------------------------------------------------------- */
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}

.eyebrow {
    display: block;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .7rem;
    color: var(--pine-700);
    margin-bottom: .5rem;
}

/* -------------------------------------------------------------------------
   Hero da home: um slab de feltro com uma carta de missao apoiada em cima
   ------------------------------------------------------------------------- */
.hero {
    background: linear-gradient(165deg, var(--pine-900), var(--pine-700) 70%);
    border-radius: 28px;
    padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 5vw, 3rem);
    display: flex;
    justify-content: center;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(251, 246, 233, .08) 1px, transparent 1.2px);
    background-size: 22px 22px;
    opacity: .5;
}

.hero-card {
    position: relative;
    background: var(--parchment-50);
    border-radius: var(--radius-card);
    padding: clamp(1.75rem, 4vw, 2.75rem);
    max-width: 580px;
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .4);
    transform: rotate(-1.2deg);
}

@media (prefers-reduced-motion: no-preference) {
    .hero-card {
        animation: settle .65s cubic-bezier(.2, .85, .3, 1.15) both;
    }
}

@keyframes settle {
    0% {
        transform: rotate(-7deg) translateY(18px);
        opacity: 0;
    }
    100% {
        transform: rotate(-1.2deg) translateY(0);
        opacity: 1;
    }
}

.hero-card h1 {
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    max-width: 15ch;
}

.hero-card > p {
    color: var(--ink-500);
    font-size: 1.02rem;
    max-width: 46ch;
}

.hero-reward {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--pine-900);
    color: var(--parchment-50);
    border-radius: 999px;
    padding: .5rem .95rem .5rem .65rem;
    margin: .5rem 0 1.5rem;
    font-size: .85rem;
}

.hero-reward strong {
    font-family: var(--font-mono);
    color: var(--brass-300);
}

.hero-reward span {
    color: rgba(251, 246, 233, .7);
}

.hero-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
   Secao "como funciona"
   ------------------------------------------------------------------------- */
.how {
    padding: 3.5rem 0 1rem;
    text-align: center;
}

.how-eyebrow {
    text-align: center;
}

.how h2 {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    margin-bottom: 2rem;
}

.how-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    text-align: left;
}

.how-step {
    background: var(--parchment-50);
    border: 1px solid var(--parchment-200);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
}

.how-tag {
    display: inline-block;
    background: var(--pine-900);
    color: var(--parchment-50);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .95rem;
    padding: .35rem 1rem;
    border-radius: 999px;
    margin-bottom: .75rem;
}

.how-step p {
    color: var(--ink-500);
    margin: 0;
    font-size: .95rem;
}

/* -------------------------------------------------------------------------
   Cartas (cards)
   ------------------------------------------------------------------------- */
.card {
    background: var(--parchment-50);
    border: 1px solid rgba(27, 58, 48, .08);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: clamp(1.5rem, 4vw, 2.25rem);
}

.card h1 {
    font-size: clamp(1.5rem, 3.5vw, 2rem);
}

.card h2 {
    font-size: 1.2rem;
    margin-top: 2.25rem;
    padding-bottom: .5rem;
    border-bottom: 1px dashed var(--parchment-200);
}

.card h2:first-of-type {
    margin-top: 1.5rem;
}

/* -------------------------------------------------------------------------
   Formularios
   ------------------------------------------------------------------------- */
form {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    max-width: 440px;
}

.form-inline {
    flex-direction: row;
    flex-wrap: wrap;
    max-width: none;
    align-items: center;
    margin-bottom: 1.5rem;
}

label {
    font-weight: 600;
    font-size: .85rem;
    color: var(--pine-700);
}

input, select, button, textarea {
    font-family: var(--font-body);
    font-size: .96rem;
}

input, select {
    padding: .65rem .85rem;
    border-radius: var(--radius-control);
    border: 1.5px solid var(--parchment-200);
    background: #fffdf7;
    color: var(--ink-800);
    transition: border-color .15s ease, box-shadow .15s ease;
}

input::placeholder {
    color: #9a9682;
}

input:focus, select:focus {
    outline: none;
    border-color: var(--brass-500);
    box-shadow: 0 0 0 3px rgba(199, 154, 62, .25);
}

.input-mono {
    font-family: var(--font-mono);
    letter-spacing: .03em;
}

/* -------------------------------------------------------------------------
   Botoes
   ------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    background: transparent;
    border: 1.5px solid var(--pine-600);
    color: var(--pine-900);
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    padding: .65rem 1.35rem;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.btn:hover {
    background: var(--pine-100);
}

.btn:active {
    transform: translateY(1px) scale(.98);
}

.btn-primary {
    background: linear-gradient(180deg, var(--brass-300), var(--brass-500));
    border-color: var(--brass-700);
    color: #4A3410;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 2px 4px rgba(27, 58, 48, .2);
}

.btn-primary:hover {
    background: linear-gradient(180deg, #EDCB74, var(--brass-700));
}

.btn-ghost {
    border-color: transparent;
    color: var(--pine-600);
}

.btn-ghost:hover {
    background: var(--pine-100);
}

.btn-perigo {
    background: var(--brick-600);
    border-color: var(--brick-600);
    color: #fff;
}

.btn-perigo:hover {
    background: #8a341f;
}

.btn-link {
    border: none;
    background: none;
    color: var(--pine-600);
    text-decoration: underline;
    padding: 0;
    border-radius: 2px;
}

/* -------------------------------------------------------------------------
   Alertas
   ------------------------------------------------------------------------- */
.alert {
    padding: .8rem 1rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    border-left: 4px solid transparent;
    font-size: .93rem;
}

.alert-erro {
    background: var(--brick-100);
    color: var(--brick-600);
    border-color: var(--brick-600);
}

.alert-sucesso {
    background: var(--moss-100);
    color: var(--moss-600);
    border-color: var(--moss-600);
}

/* -------------------------------------------------------------------------
   Selos de status
   ------------------------------------------------------------------------- */
.pill {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .25rem .65rem;
    border-radius: 999px;
}

.pill-pendente {
    background: var(--brick-100);
    color: var(--brick-600);
}

.pill-entregue {
    background: var(--moss-100);
    color: var(--moss-600);
}

/* -------------------------------------------------------------------------
   Tabelas — visual de livro-razao
   ------------------------------------------------------------------------- */
.tabela {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 1.5rem;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--parchment-200);
}

.tabela thead th {
    background: var(--pine-900);
    color: var(--parchment-50);
    font-family: var(--font-mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-align: left;
    padding: .75rem .9rem;
}

.tabela tbody td {
    text-align: left;
    padding: .65rem .9rem;
    font-size: .92rem;
    border-bottom: 1px solid var(--parchment-200);
}

.tabela tbody tr:nth-child(even) {
    background: rgba(199, 154, 62, .05);
}

.tabela tbody tr:last-child td {
    border-bottom: none;
}

.tabela tbody tr:hover td {
    background: var(--pine-100);
}

/* -------------------------------------------------------------------------
   A ficha de moeda — elemento-assinatura do Kidvora
   ------------------------------------------------------------------------- */
.coin {
    display: inline-grid;
    place-items: center;
    width: 1.05em;
    height: 1.05em;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, var(--brass-300), var(--brass-500) 55%, var(--brass-700) 100%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .65), inset 0 -1.5px 2px rgba(0, 0, 0, .35), 0 1px 1px rgba(27, 58, 48, .25);
    vertical-align: -0.16em;
    margin-right: .2em;
    flex: none;
}

.coin::after {
    content: "K";
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .56em;
    color: #6E4F14;
    line-height: 1;
}

.coin-lg {
    width: 2.5em;
    height: 2.5em;
}

.coin-lg::after {
    font-size: .48em;
}

/* -------------------------------------------------------------------------
   Saldo em destaque — o "cofre" do filho
   ------------------------------------------------------------------------- */
.saldo-destaque {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    background: linear-gradient(160deg, var(--pine-900), var(--pine-700));
    color: var(--parchment-50);
    padding: 1.75rem 1.5rem;
    border-radius: var(--radius-card);
    margin-bottom: 1.75rem;
    box-shadow: var(--shadow-card);
}

.saldo-destaque span {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .7rem;
    color: var(--brass-300);
}

.saldo-destaque strong {
    display: flex;
    align-items: center;
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--parchment-50);
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.footer {
    text-align: center;
    color: var(--ink-500);
    padding: 2.5rem 1rem;
    font-size: .82rem;
    font-family: var(--font-mono);
}

/* -------------------------------------------------------------------------
   Menu de navegacao entre telas (pais e filhos)
   ------------------------------------------------------------------------- */
.pai-menu {
    display: flex;
    gap: .5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.pai-menu a {
    padding: .55rem 1.1rem;
    border-radius: 999px;
    background: var(--parchment-50);
    border: 1.5px solid var(--parchment-200);
    text-decoration: none;
    color: var(--pine-900);
    font-weight: 600;
    font-size: .85rem;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.pai-menu a:hover,
.pai-menu a:focus-visible {
    background: var(--pine-900);
    color: var(--parchment-50);
    border-color: var(--pine-900);
}

/* -------------------------------------------------------------------------
   Kanban — bandejas de feltro sobre a mesa
   ------------------------------------------------------------------------- */
.kanban {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
    align-items: start;
}

.kanban-coluna {
    background: rgba(251, 246, 233, .55);
    border: 1.5px dashed var(--parchment-200);
    border-radius: 18px;
    padding: 1.1rem;
}

.kanban-coluna h2 {
    font-size: 1rem;
    margin-top: 0;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--parchment-200);
}

.kanban-vazio {
    color: var(--ink-500);
    font-size: .85rem;
}

.kanban-card {
    background: var(--parchment-50);
    border: 1px solid var(--parchment-200);
    border-radius: 12px;
    padding: .85rem;
    margin-bottom: .75rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    box-shadow: 0 1px 2px rgba(27, 58, 48, .06);
}

.kanban-card span {
    font-size: .78rem;
    color: var(--ink-500);
    display: flex;
    align-items: center;
}

.kanban-card-aprovado {
    border-color: var(--moss-600);
    background: var(--moss-100);
}

.kanban-foto {
    width: 100%;
    border-radius: 10px;
    max-height: 160px;
    object-fit: cover;
    border: 1px solid var(--parchment-200);
}

.kanban-rejeitar {
    flex-direction: row;
    max-width: none;
}

.kanban-rejeitar input {
    flex: 1;
}

/* -------------------------------------------------------------------------
   Feed de missoes do filho — tiquetes de missao
   ------------------------------------------------------------------------- */
.chat-feed {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    margin-bottom: 1.5rem;
}

.chat-bubble {
    background: var(--parchment-50);
    border: 1px solid var(--parchment-200);
    border-radius: 16px;
    border-top-left-radius: 4px;
    padding: 1rem 1rem 1rem 1.4rem;
    max-width: 520px;
    position: relative;
    overflow: hidden;
}

.chat-bubble::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 7px;
    background: repeating-linear-gradient(180deg, var(--brass-500) 0 8px, transparent 8px 16px);
}

.chat-bubble-titulo {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
}

.chat-bubble-valor {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: .78rem;
    color: var(--brass-700);
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.chat-bubble-descricao {
    color: var(--ink-500);
    font-size: .9rem;
    margin: .35rem 0;
}

.chat-bubble-aviso {
    background: #FBEFD2;
    color: #8a6600;
    padding: .5rem .75rem;
    border-radius: 8px;
    font-size: .85rem;
}

.chat-bubble-status {
    font-size: .9rem;
    color: var(--ink-500);
    margin: 0;
}

.chat-bubble-status-ok {
    color: var(--moss-600);
    font-weight: 600;
}

.chat-bubble-form {
    flex-direction: row;
    align-items: center;
    max-width: none;
    margin-top: .6rem;
    flex-wrap: wrap;
}

.chat-bubble-em_analise {
    background: var(--pine-100);
}

.chat-bubble-aprovado {
    border-color: var(--moss-600);
    background: var(--moss-100);
}

/* -------------------------------------------------------------------------
   Vitrine da lojinha — barracas de feira
   ------------------------------------------------------------------------- */
.vitrine {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.1rem;
    margin-bottom: 1.75rem;
}

.vitrine-card {
    background: var(--parchment-50);
    border: 1px solid var(--parchment-200);
    border-top: 5px solid;
    border-image: repeating-linear-gradient(45deg, var(--brass-500) 0 9px, var(--pine-600) 9px 18px) 5;
    border-radius: 14px;
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    box-shadow: var(--shadow-card);
}

.vitrine-card strong {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--pine-900);
}

.vitrine-descricao {
    color: var(--ink-500);
    font-size: .85rem;
    margin: 0;
}

.vitrine-custo {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--brass-700);
    display: flex;
    align-items: center;
}

.vitrine-card button[disabled] {
    opacity: .55;
    cursor: not-allowed;
}

/* -------------------------------------------------------------------------
   Metricas do superadmin
   ------------------------------------------------------------------------- */
.metricas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.metrica-card {
    background: var(--parchment-50);
    border: 1px solid var(--parchment-200);
    border-radius: 14px;
    padding: 1rem 1.1rem;
}

.metrica-card .eyebrow {
    margin-bottom: .3rem;
}

.metrica-card strong {
    display: flex;
    align-items: center;
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--pine-900);
}

.metrica-card.destaque {
    background: linear-gradient(160deg, var(--pine-900), var(--pine-700));
    border-color: transparent;
}

.metrica-card.destaque .eyebrow {
    color: var(--brass-300);
}

.metrica-card.destaque strong {
    color: var(--parchment-50);
}

.status-linha {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .9rem;
    margin: .5rem 0 1.5rem;
}

.status-ponto {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    flex: none;
}

.status-ponto.ok {
    background: var(--moss-600);
}

.status-ponto.pendente {
    background: var(--brick-600);
}

.plano-form {
    flex-direction: row;
    align-items: center;
    max-width: none;
    gap: .4rem;
}

/* -------------------------------------------------------------------------
   Responsivo
   ------------------------------------------------------------------------- */
@media (max-width: 720px) {
    .kanban,
    .how-grid {
        grid-template-columns: 1fr;
    }

    .topbar {
        flex-direction: column;
        gap: .75rem;
        text-align: center;
    }

    .hero-card {
        transform: none;
    }
}