/* Sala de Controle — identidade Orizuru "Sumi & Murasaki"
   (Projeto_site_orizuru/documentos/Direcao_de_Arte_v1.md) */

:root {
    --sumi: #0A0A0C;          /* fundo base */
    --sumi-elevado: #141519;  /* cards */
    --ko: #23252B;            /* bordas */
    --murasaki: #8A5CF6;      /* acento */
    --ate: #4C1D95;           /* profundidade */
    --kin: #C9A24B;           /* ouro raro */
    --gofun: #F4F1EA;         /* texto */
    --nezumi: #8B909A;        /* texto secundário */

    --fonte-display: "Clash Display", "Inter", system-ui, sans-serif;
    --fonte-corpo: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Bootstrap no tema escuro com as cores da marca */
    --bs-body-bg: var(--sumi);
    --bs-body-color: var(--gofun);
    --bs-secondary-color: var(--nezumi);
    --bs-border-color: var(--ko);
    --bs-link-color: #B49BFA;
    --bs-link-hover-color: var(--gofun);
    --bs-primary: var(--murasaki);
    --bs-primary-rgb: 138, 92, 246;
    --bs-font-sans-serif: var(--fonte-corpo);
    --bs-border-radius: .75rem;
}

body {
    background: var(--sumi);
    color: var(--gofun);
    font-family: var(--fonte-corpo);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

.fonte-display { font-family: var(--fonte-display); letter-spacing: -0.01em; }
.texto-nezumi { color: var(--nezumi) !important; }
.texto-kin { color: var(--kin) !important; }

/* Logo: PNG com fundo transparente gerado de Projeto_site_orizuru/logos/logo_2_facetado.png. */
.tsuru { user-select: none; pointer-events: none; }

/* ---------- Login ---------- */
.pagina-login {
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(ellipse 60% 45% at 50% 30%, rgba(76, 29, 149, .35), transparent 70%),
        radial-gradient(ellipse 40% 30% at 50% 35%, rgba(138, 92, 246, .12), transparent 70%),
        var(--sumi);
}

.cartao-login {
    width: 100%;
    max-width: 400px;
    background: rgba(20, 21, 25, .82);
    border: 1px solid var(--ko);
    border-radius: 1.25rem;
    padding: 2.25rem 2rem 2rem;
    backdrop-filter: blur(8px);
    box-shadow: 0 30px 80px -30px rgba(76, 29, 149, .55);
}

.cartao-login .tsuru { width: 132px; display: block; margin: -0.5rem auto 0.75rem; }

.titulo-login {
    font-family: var(--fonte-display);
    font-weight: 600;
    font-size: 1.75rem;
    text-align: center;
    margin-bottom: .25rem;
}

.subtitulo-login {
    text-align: center;
    color: var(--nezumi);
    font-size: .8rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    margin-bottom: 1.75rem;
}

/* ---------- Formulários ---------- */
.form-label { color: var(--nezumi); font-size: .85rem; font-weight: 500; }

.form-control, .form-select {
    background: var(--sumi);
    border: 1px solid var(--ko);
    color: var(--gofun);
    padding: .7rem .9rem;
}
.form-control:focus, .form-select:focus {
    background: var(--sumi);
    color: var(--gofun);
    border-color: var(--murasaki);
    box-shadow: 0 0 0 .2rem rgba(138, 92, 246, .2);
}
.form-control::placeholder { color: #5b5f68; }
.form-check-input { background-color: var(--sumi); border-color: var(--ko); }
.form-check-input:checked { background-color: var(--murasaki); border-color: var(--murasaki); }

.btn-murasaki {
    --bs-btn-bg: var(--murasaki);
    --bs-btn-border-color: var(--murasaki);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #7a4ae8;
    --bs-btn-hover-border-color: #7a4ae8;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--ate);
    --bs-btn-active-border-color: var(--ate);
    font-weight: 600;
    padding: .7rem 1rem;
}

.campo-senha { position: relative; }
.campo-senha .form-control { padding-right: 3rem; }
.campo-senha .olho {
    position: absolute; top: 50%; right: .4rem; transform: translateY(-50%);
    border: 0; background: transparent; color: var(--nezumi);
    width: 2.4rem; height: 2.4rem; border-radius: .5rem;
}
.campo-senha .olho:hover, .campo-senha .olho:focus-visible { color: var(--murasaki); }

/* ---------- Alertas ---------- */
.alerta { border-radius: .75rem; padding: .7rem .9rem; font-size: .9rem; margin-bottom: 1rem; border: 1px solid; }
.alerta-erro { background: rgba(220, 53, 69, .1); border-color: rgba(220, 53, 69, .35); color: #f2a7ae; }
.alerta-info { background: rgba(138, 92, 246, .1); border-color: rgba(138, 92, 246, .35); color: #cbbcfb; }
.alerta-sucesso { background: rgba(25, 135, 84, .12); border-color: rgba(25, 135, 84, .4); color: #8fd6b3; }

/* ---------- Painel ---------- */
.barra-topo {
    border-bottom: 1px solid var(--ko);
    background: rgba(10, 10, 12, .85);
    backdrop-filter: blur(10px);
    position: sticky; top: 0; z-index: 10;
}
.barra-topo .tsuru { width: 44px; }
.barra-topo .marca { font-family: var(--fonte-display); font-weight: 600; font-size: 1.05rem; color: var(--gofun); text-decoration: none; }
.barra-topo .marca small { display: block; color: var(--nezumi); font-family: var(--fonte-corpo); font-weight: 500; font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; }

.avatar {
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-grid; place-items: center;
    background: linear-gradient(135deg, var(--ate), var(--murasaki));
    font-weight: 600; font-size: .85rem;
}

.btn-fantasma {
    --bs-btn-color: var(--nezumi);
    --bs-btn-border-color: var(--ko);
    --bs-btn-hover-color: var(--gofun);
    --bs-btn-hover-bg: var(--sumi-elevado);
    --bs-btn-hover-border-color: #34373f;
}

.saudacao h1 { font-family: var(--fonte-display); font-weight: 600; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.kanji { font-family: "Noto Serif JP", serif; color: var(--kin); opacity: .8; }

.cartao-modulo {
    background: var(--sumi-elevado);
    border: 1px solid var(--ko);
    border-radius: 1rem;
    padding: 1.4rem;
    height: 100%;
    position: relative;
    transition: border-color .2s, transform .2s;
}
.cartao-modulo .icone {
    width: 44px; height: 44px; border-radius: .75rem;
    display: grid; place-items: center; font-size: 1.3rem;
    background: rgba(138, 92, 246, .12); color: #B49BFA;
    margin-bottom: 1rem;
}
.cartao-modulo h2 { font-family: var(--fonte-display); font-size: 1.2rem; font-weight: 600; margin-bottom: .35rem; }
.cartao-modulo p { color: var(--nezumi); font-size: .9rem; margin: 0; }
.cartao-modulo.proximo { border-color: rgba(138, 92, 246, .55); box-shadow: 0 0 0 1px rgba(138, 92, 246, .15), 0 20px 50px -30px rgba(138, 92, 246, .6); }
.cartao-modulo.breve { opacity: .62; }

.selo {
    position: absolute; top: 1.1rem; right: 1.1rem;
    font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    padding: .25rem .55rem; border-radius: 999px; border: 1px solid var(--ko); color: var(--nezumi);
}
.selo-proximo { border-color: rgba(201, 162, 75, .5); color: var(--kin); }

.rodape { color: #50545c; font-size: .78rem; }