@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

:root{
    --rfcc-surface:#ffffff;
    --rfcc-surface-soft:#fff3f7;
    --rfcc-border:#efd7e0;
    --rfcc-text:#402533;
    --rfcc-muted:#78656f;
    --rfcc-primary:#d85575;
    --rfcc-primary-dark:#b94060;
    --rfcc-primary-soft:#fde8ef;
    --rfcc-shadow:0 16px 40px rgba(135,57,87,.10);
    --rfcc-success:#2d8a57;
    --rfcc-warning:#9c6a00;
    --rfcc-danger:#bf415f;
}

html, body {
    font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(216,85,117,.10), transparent 24%),
        radial-gradient(circle at top right, rgba(255,185,203,.16), transparent 26%),
        linear-gradient(180deg,#fff9fb 0%, #fff4f7 100%);
    color:var(--rfcc-text);
    margin:0;
}

a, .btn-link {
    color: inherit;
    text-decoration:none;
}

.btn-primary,
.rfcc-btn-primary {
    color:#fff !important;
    background: linear-gradient(180deg, var(--rfcc-primary) 0%, var(--rfcc-primary-dark) 100%);
    border:0;
    box-shadow:0 12px 24px rgba(216,85,117,.24);
}

.rfcc-btn-outline{
    background:#fff;
    color:var(--rfcc-primary-dark);
    border:1px solid var(--rfcc-border);
}

app{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:100vh;
}

.rfcc-shell{
    display:grid;
    grid-template-columns:290px 1fr;
    min-height:100vh;
}

.rfcc-sidebar-shell{
    padding:20px;
}

.rfcc-main-shell{
    min-width:0;
    padding:20px 20px 30px 0;
    display:flex;
    flex-direction:column;
}

.rfcc-sidebar{
    background:var(--rfcc-surface);
    border:1px solid rgba(216,85,117,.10);
    border-radius:24px;
    box-shadow:var(--rfcc-shadow);
    overflow:hidden;
    position:sticky;
    top:20px;
}

.rfcc-sidebar-brand{
    display:flex;
    align-items:center;
    gap:14px;
    padding:22px 20px;
    background:linear-gradient(180deg,#fff7fa 0%, #fff 100%);
    border-bottom:1px solid #f3dfe6;
}

.rfcc-sidebar-brand-text{
    flex:1;
    min-width:0;
}

.rfcc-sidebar-logo{
    width:56px;
    height:56px;
    border-radius:16px;
    background:#fff;
    object-fit:contain;
    padding:8px;
    border:1px solid var(--rfcc-border);
    box-shadow:var(--rfcc-shadow);
}

.rfcc-sidebar-title{
    font-weight:800;
    font-size:1rem;
}

.rfcc-sidebar-subtitle{
    font-size:.85rem;
    color:var(--rfcc-muted);
}

.rfcc-mobile-menu{
    display:none;
    background:var(--rfcc-primary-soft);
    border:1px solid #f3d1dc;
}

.rfcc-nav-wrapper{
    padding:14px;
}

.rfcc-nav-list{
    display:grid;
    gap:8px;
}

.rfcc-nav-link{
    min-height:48px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 14px;
    color:#6d4a5a;
    border-radius:14px;
    border:1px solid transparent;
    font-weight:700;
}

.rfcc-nav-link.active{
    background:var(--rfcc-primary-soft);
    color:var(--rfcc-primary-dark);
    border-color:#f3d1dc;
}

.rfcc-nav-link:hover{
    background:#fff5f8;
    border-color:#f3dbe3;
}

.rfcc-nav-link .oi{
    width:1.4rem;
    font-size:1rem;
    top:-1px;
}

.rfcc-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:14px 18px;
    background:rgba(255,249,251,.92);
    border:1px solid rgba(216,85,117,.12);
    border-radius:20px;
    box-shadow:var(--rfcc-shadow);
    position:sticky;
    top:20px;
    z-index:5;
    backdrop-filter:blur(10px);
}

.rfcc-topbar-title{
    font-weight:800;
}

.rfcc-topbar-subtitle{
    font-size:.88rem;
    color:var(--rfcc-muted);
}

.rfcc-topbar-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.rfcc-user-chip{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:42px;
    padding:0 12px;
    border-radius:999px;
    background:#fff;
    border:1px solid var(--rfcc-border);
    color:var(--rfcc-primary-dark);
    font-weight:700;
}

.rfcc-user-avatar{
    width:32px;
    height:32px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--rfcc-primary-soft);
    border:1px solid #f2d2dc;
}

.rfcc-main-content{
    padding-top:20px;
}

.rfcc-login-shell{
    min-height:100vh;
}

.rfcc-login-page{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:24px 14px;
}

.rfcc-login-grid{
    width:min(980px, 100%);
    margin:0 auto;
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    gap:24px;
    align-items:stretch;
}

.rfcc-login-card,
.rfcc-login-side,
.rfcc-panel-card,
.rfcc-shortcut-card,
.rfcc-profile-card,
.rfcc-profile-info,
.rfcc-error-card{
    background:var(--rfcc-surface);
    border:1px solid rgba(216,85,117,.10);
    border-radius:24px;
    box-shadow:var(--rfcc-shadow);
}

.rfcc-login-card{
    padding:26px;
}

.rfcc-login-side,
.rfcc-page-hero{
    padding:26px;
    background:
        radial-gradient(circle at top right, rgba(216,85,117,.14), transparent 30%),
        linear-gradient(180deg,#fff 0%, #fff9fb 100%);
}

.rfcc-login-brand{
    text-align:center;
    margin-bottom:18px;
}

.rfcc-login-logo{
    width:112px;
    height:112px;
    object-fit:contain;
    margin:0 auto 14px;
    background:#fff;
    border:1px solid var(--rfcc-border);
    border-radius:50%;
    padding:10px;
    box-shadow:var(--rfcc-shadow);
}

.rfcc-page-badge{
    display:inline-flex;
    align-items:center;
    min-height:32px;
    padding:0 12px;
    border-radius:999px;
    background:var(--rfcc-primary-soft);
    border:1px solid #f3d1dc;
    color:var(--rfcc-primary-dark);
    font-size:.84rem;
    font-weight:800;
}

.rfcc-login-side h1,
.rfcc-page-hero h1{
    margin:14px 0 10px;
    color:#4b2133;
    font-size:1.8rem;
}

.rfcc-login-side p,
.rfcc-page-hero p{
    margin:0;
    color:var(--rfcc-muted);
    line-height:1.7;
}

.rfcc-form-group{
    margin-bottom:16px;
}

.rfcc-form-group label{
    display:block;
    margin-bottom:8px;
    font-weight:800;
    color:#6e5160;
}

.rfcc-input{
    width:100%;
    min-height:52px;
    border-radius:16px;
    border:1px solid #ead7df;
    padding:0 16px;
}

.rfcc-input:focus{
    border-color:#e59aae;
    box-shadow:0 0 0 4px rgba(216,85,117,.10);
}

.rfcc-btn-block{
    width:100%;
}

.rfcc-inline-error{
    padding:12px 14px;
    border-radius:14px;
    background:#fff2f5;
    color:var(--rfcc-danger);
    border:1px solid #f1c7d2;
    font-weight:600;
    margin-bottom:16px;
}

.rfcc-login-loading,
.rfcc-loading-inline{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:54px;
}

.rfcc-spinner{
    width:20px;
    height:20px;
    border-radius:50%;
    border:3px solid #f1ccd8;
    border-top-color:var(--rfcc-primary);
    animation:rfccSpin .7s linear infinite;
}

@keyframes rfccSpin{
    to{transform:rotate(360deg);}
}

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

.rfcc-shortcut-card{
    padding:18px;
}

.rfcc-shortcut-icon{
    width:52px;
    height:52px;
    border-radius:16px;
    display:grid;
    place-items:center;
    background:var(--rfcc-primary-soft);
    color:var(--rfcc-primary-dark);
    border:1px solid #f1d4de;
    margin-bottom:12px;
}

.rfcc-shortcut-card strong{
    display:block;
    color:#482232;
    margin-bottom:6px;
}

.rfcc-shortcut-card span{
    color:var(--rfcc-muted);
}

.rfcc-panel-card{
    padding:22px;
    margin-top:20px;
}

.rfcc-panel-header h2{
    margin:0 0 6px 0;
    color:#4a2132;
}

.rfcc-panel-header p{
    margin:0 0 14px 0;
    color:var(--rfcc-muted);
}

.rfcc-exam-list{
    display:grid;
    gap:14px;
}

.rfcc-exam-card{
    border:1px solid var(--rfcc-border);
    border-radius:18px;
    padding:16px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:14px;
    align-items:center;
}

.rfcc-exam-icon{
    width:56px;
    height:56px;
    border-radius:18px;
    display:grid;
    place-items:center;
    background:var(--rfcc-primary-soft);
    border:1px solid #f0ced9;
    color:var(--rfcc-primary-dark);
    font-weight:800;
}

.rfcc-chip-row{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:10px;
}

.rfcc-chip{
    display:inline-flex;
    align-items:center;
    min-height:32px;
    padding:0 12px;
    border-radius:999px;
    font-size:.80rem;
    font-weight:800;
    border:1px solid #f3d1dc;
    background:var(--rfcc-primary-soft);
    color:var(--rfcc-primary-dark);
}

.rfcc-chip-success{
    background:#ecfff3;
    color:var(--rfcc-success);
    border-color:#c9eed8;
}

.rfcc-chip-warning{
    background:#fff7e7;
    color:var(--rfcc-warning);
    border-color:#f3dfb2;
}

.rfcc-profile-grid{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:20px;
    margin-top:20px;
}

.rfcc-profile-card{
    padding:24px;
    text-align:center;
}

.rfcc-profile-photo{
    margin-bottom:14px;
}

.rfcc-avatar-placeholder{
    width:150px;
    height:150px;
    border-radius:50%;
    margin:0 auto 14px;
    background:var(--rfcc-primary-soft);
    border:1px solid #f0ced9;
    color:lightpink;
    display:grid;
    place-items:center;
    font-size:4rem;
}

.rfcc-avatar-image{
    width:150px;
    height:150px;
    object-fit:cover;
    border-radius:50%;
    margin:0 auto 14px;
}

.rfcc-profile-info{
    padding:10px 0;
}

.rfcc-data-row{
    padding:18px 22px;
    display:grid;
    grid-template-columns:180px 1fr;
    gap:16px;
    border-bottom:1px solid #f4e2e8;
}

.rfcc-data-row:last-child{
    border-bottom:0;
}

.rfcc-data-row span{
    color:var(--rfcc-muted);
}

.rfcc-data-row strong{
    color:#452131;
}

.rfcc-policy-card{
    margin-top:20px;
}

.rfcc-policy-content{
    color:var(--rfcc-text);
    line-height:1.7;
}

.rfcc-error-body{
    margin:0;
}

.rfcc-error-page{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:24px;
}

.rfcc-error-card{
    width:min(560px,100%);
    text-align:center;
    padding:34px;
}

.rfcc-error-icon{
    width:64px;
    height:64px;
    border-radius:50%;
    margin:0 auto 16px;
    background:#fff2f5;
    border:1px solid #f1c7d2;
    color:var(--rfcc-danger);
    font-size:2rem;
    display:grid;
    place-items:center;
    font-weight:800;
}

#blazor-error-ui{
    background:#fff3cd;
    border-top:1px solid #ffeeba;
    bottom:0;
    box-shadow:0 -1px 6px rgba(0,0,0,0.08);
    display:none;
    left:0;
    padding:0.75rem 1.25rem;
    position:fixed;
    width:100%;
    z-index:1000;
}

#blazor-error-ui .dismiss{
    cursor:pointer;
    position:absolute;
    right:0.75rem;
    top:0.5rem;
}

@media (max-width: 1020px){
    .rfcc-shell{
        grid-template-columns:1fr;
    }

    .rfcc-sidebar-shell{
        padding:14px 14px 0;
    }

    .rfcc-main-shell{
        padding:14px;
    }

    .rfcc-login-grid,
    .rfcc-shortcuts,
    .rfcc-profile-grid{
        grid-template-columns:1fr;
    }

    .rfcc-login-card{
        order:-1;
    }

    .rfcc-mobile-menu{
        display:block;
    }

    .rfcc-nav-collapse.collapse{
        display:none;
    }
}

@media (min-width: 1021px){
    .rfcc-nav-collapse,
    .rfcc-nav-collapse.collapse{
        display:block !important;
    }
}

@media (max-width: 720px){
    .rfcc-topbar-actions{
        display:none;
    }

    .rfcc-login-side h1,
    .rfcc-page-hero h1{
        font-size:1.45rem;
    }

    .rfcc-data-row{
        grid-template-columns:1fr;
    }

    .rfcc-exam-card{
        grid-template-columns:1fr;
    }

    .rfcc-exam-actions .btn{
        width:100%;
    }

    .rfcc-login-card,
    .rfcc-login-side,
    .rfcc-panel-card,
    .rfcc-page-hero,
    .rfcc-shortcut-card,
    .rfcc-profile-card,
    .rfcc-profile-info{
        border-radius:20px;
    }
}



.rfcc-page-transition{
    animation:rfccPageEnter .35s ease both;
}

.rfcc-fade-up{
    animation:rfccFadeUp .45s ease both;
}

.rfcc-fade-left{
    animation:rfccFadeLeft .45s ease both;
}

.rfcc-fade-right{
    animation:rfccFadeRight .45s ease both;
}

.rfcc-fade-down{
    animation:rfccFadeDown .35s ease both;
}

@keyframes rfccPageEnter{
    from{opacity:0; transform:translateY(12px);}
    to{opacity:1; transform:translateY(0);}
}

@keyframes rfccFadeUp{
    from{opacity:0; transform:translateY(24px);}
    to{opacity:1; transform:translateY(0);}
}

@keyframes rfccFadeLeft{
    from{opacity:0; transform:translateX(-22px);}
    to{opacity:1; transform:translateX(0);}
}

@keyframes rfccFadeRight{
    from{opacity:0; transform:translateX(22px);}
    to{opacity:1; transform:translateX(0);}
}

@keyframes rfccFadeDown{
    from{opacity:0; transform:translateY(-12px);}
    to{opacity:1; transform:translateY(0);}
}

.rfcc-global-loading{
    position:fixed;
    inset:0;
    background:rgba(255,247,250,.72);
    backdrop-filter:blur(4px);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
}

.rfcc-global-loading.is-visible{
    opacity:1;
    pointer-events:auto;
}

.rfcc-global-loading-box{
    background:#fff;
    border:1px solid #efd7e0;
    box-shadow:0 16px 40px rgba(135,57,87,.12);
    border-radius:20px;
    min-width:180px;
    padding:18px 22px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    color:#402533;
    font-weight:700;
}

.rfcc-spinner-lg{
    width:26px !important;
    height:26px !important;
}

.rfcc-nav-link,
.rfcc-shortcut-card,
.rfcc-btn-primary,
.rfcc-btn-outline{
    transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}

.rfcc-nav-link:hover,
.rfcc-shortcut-card:hover{
    transform:translateY(-1px);
}

.rfcc-btn-primary:hover,
.rfcc-btn-outline:hover{
    transform:translateY(-1px);
}

@media (prefers-reduced-motion: reduce){
    .rfcc-page-transition,
    .rfcc-fade-up,
    .rfcc-fade-left,
    .rfcc-fade-right,
    .rfcc-fade-down{
        animation:none !important;
    }

    .rfcc-global-loading,
    .rfcc-nav-link,
    .rfcc-shortcut-card,
    .rfcc-btn-primary,
    .rfcc-btn-outline{
        transition:none !important;
    }
}

/* Patch visual: fundo com efeito de papel suave */

:root {
    --rfcc-paper-base: #fffdfb;
    --rfcc-paper-shadow: rgba(122, 76, 94, .08);
    --rfcc-paper-border: #ead9df;
}

/* Fundo geral mais suave */
html, body {
    background: radial-gradient(circle at top left, rgba(216,85,117,.08), transparent 22%), radial-gradient(circle at top right, rgba(255,185,203,.10), transparent 24%), linear-gradient(180deg, #fff9fb 0%, #fff6f8 100%);
}

/* Efeito "papel" nos principais blocos do portal */
.rfcc-login-card,
.rfcc-login-side,
.rfcc-page-hero,
.rfcc-panel-card,
.rfcc-shortcut-card,
.rfcc-profile-card,
.rfcc-profile-info,
.rfcc-error-card {
    background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,250,252,.96)), repeating-linear-gradient( 0deg, rgba(120, 86, 100, .015) 0px, rgba(120, 86, 100, .015) 1px, transparent 1px, transparent 6px ), repeating-linear-gradient( 90deg, rgba(120, 86, 100, .012) 0px, rgba(120, 86, 100, .012) 1px, transparent 1px, transparent 8px );
    background-color: var(--rfcc-paper-base);
    border: 1px solid var(--rfcc-paper-border);
    box-shadow: 0 14px 30px rgba(135,57,87,.08), 0 2px 0 rgba(255,255,255,.8) inset, 0 -1px 0 rgba(120, 86, 100, .03) inset;
}

/* Hero e cards um pouco mais elegantes */
.rfcc-page-hero,
.rfcc-login-side {
    position: relative;
    overflow: hidden;
}

    .rfcc-page-hero::after,
    .rfcc-login-side::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(circle at 18% 20%, rgba(255,255,255,.46), transparent 18%), radial-gradient(circle at 82% 16%, rgba(216,85,117,.05), transparent 20%), linear-gradient(180deg, transparent, rgba(120,86,100,.02));
        opacity: .9;
    }

/* Cartões internos mais suaves */
.rfcc-exam-card {
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,250,252,.98));
    border: 1px solid #ead9df;
    box-shadow: 0 8px 18px rgba(135,57,87,.05);
}

/* Lista de dados com aparência mais "documento" */
.rfcc-profile-info {
    overflow: hidden;
}

.rfcc-data-row {
    background: rgba(255,255,255,.45);
}

    .rfcc-data-row:nth-child(even) {
        background: rgba(253,244,247,.60);
    }

/* Papel mais bonito no login */
.rfcc-login-card {
    position: relative;
}

    .rfcc-login-card::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: 24px;
        background: radial-gradient(circle at top left, rgba(255,255,255,.5), transparent 25%), linear-gradient(180deg, rgba(255,255,255,.15), transparent 45%);
    }

/* Em telas pequenas, manter leveza sem exagerar na textura */
@media (max-width: 720px) {
    .rfcc-login-card,
    .rfcc-login-side,
    .rfcc-page-hero,
    .rfcc-panel-card,
    .rfcc-shortcut-card,
    .rfcc-profile-card,
    .rfcc-profile-info,
    .rfcc-error-card {
        background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,250,252,.98)), repeating-linear-gradient( 0deg, rgba(120, 86, 100, .012) 0px, rgba(120, 86, 100, .012) 1px, transparent 1px, transparent 7px );
    }
}