:root {
    --azul-escuro: #08263d;
    --azul-profundo: #061d30;
    --azul: #244e79;

    --dourado: #d5a12b;
    --dourado-claro: #efc55a;

    --creme: #f7f1e7;
    --creme-claro: #fcfaf6;

    --texto: #252525;
    --texto-claro: #6f6a63;

    --borda: #e7dfd1;

    --sombra:
        0 8px 24px
        rgba(44, 36, 25, 0.08);
}


* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}


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

    background:
        var(--creme);

    color:
        var(--texto);
}


a {
    text-decoration: none;
    color: inherit;
}


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


/* SIDEBAR */

.sidebar {
    width: 260px;

    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;

    display: flex;
    flex-direction: column;

    padding:
        28px
        18px
        20px;

    color: white;

    background:
        linear-gradient(
            180deg,
            #082b45 0%,
            #061d30 100%
        );

    box-shadow:
        4px 0 16px
        rgba(0, 0, 0, 0.12);

    z-index: 10;
}


.brand {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 40px;

    color:
        var(--dourado-claro);
}


.brand-symbol {
    font-size: 36px;
    line-height: 1;
}


.brand strong,
.brand span {
    display: block;
    text-transform: uppercase;
    letter-spacing: 1px;
}


.brand strong {
    font-family: Georgia, serif;
    font-size: 15px;
}


.brand span {
    font-size: 12px;
}


.menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 46px;

    padding:
        0
        14px;

    border-radius: 9px;

    font-size: 15px;

    color:
        rgba(255, 255, 255, 0.92);

    transition:
        0.2s ease;
}


.menu-item span {
    font-size: 21px;
    width: 24px;
    text-align: center;
}


.menu-item:hover {
    background:
        rgba(255, 255, 255, 0.08);
}


.menu-item.active {
    color: white;

    background:
        linear-gradient(
            135deg,
            #bc8420,
            #dcaa36
        );

    box-shadow:
        0 6px 15px
        rgba(0, 0, 0, 0.15);
}


.sidebar-quote {
    margin-top: 45px;
    padding-top: 24px;

    text-align: center;

    border-top:
        1px solid
        rgba(213, 161, 43, 0.5);

    color:
        #f2d584;
}


.ornamento {
    font-size: 24px;
    margin-bottom: 10px;
}


.sidebar-quote blockquote {
    margin:
        0
        auto
        8px;

    max-width: 175px;

    font-family: Georgia, serif;
    font-size: 16px;
    line-height: 1.6;
}


.sidebar-quote small {
    color:
        rgba(255, 255, 255, 0.75);
}


.usuario-box {
    margin-top: auto;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 12px;

    border:
        1px solid
        rgba(255, 255, 255, 0.2);

    border-radius: 12px;
}


.usuario-avatar {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.18);
}


.usuario-box strong,
.usuario-box span {
    display: block;
}


.usuario-box strong {
    font-size: 13px;
}


.usuario-box span {
    margin-top: 2px;

    font-size: 11px;

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


/* MAIN */

.main {
    width:
        calc(100% - 260px);

    margin-left: 260px;
}


/* HERO */

.hero {
    min-height: 255px;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            115deg,
            #143b61 0%,
            #08263d 55%,
            #0b2a43 100%
        );
}


.hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(213, 161, 43, 0.25),
            transparent 38%
        );
}


.hero-overlay {
    min-height: 255px;

    display: flex;
    align-items: center;

    padding:
        25px
        70px;

    position: relative;
}


.hero-content {
    max-width: 530px;
}


.hero h1 {
    margin: 0;

    font-family: Georgia, serif;

    font-size:
        clamp(
            42px,
            6vw,
            72px
        );

    font-weight: 400;

    text-transform: uppercase;

    letter-spacing: 2px;

    color:
        #f7ecd7;
}


.hero h2 {
    margin:
        -6px
        0
        8px;

    font-family: Georgia, serif;

    font-size:
        clamp(
            30px,
            4vw,
            48px
        );

    font-weight: 400;

    text-transform: uppercase;

    color:
        var(--dourado-claro);
}


.hero p {
    margin: 0;

    font-size: 20px;
    line-height: 1.5;

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


.hero-line {
    margin-top: 12px;

    width: 205px;

    text-align: center;

    color:
        var(--dourado);

    position: relative;
}


.hero-line::before,
.hero-line::after {
    content: "";

    position: absolute;
    top: 50%;

    width: 78px;
    height: 1px;

    background:
        var(--dourado);
}


.hero-line::before {
    left: 0;
}


.hero-line::after {
    right: 0;
}


/* CONTENT */

.content {
    min-height: 600px;

    padding:
        28px
        32px
        45px;

    background:
        var(--creme);
}


/* CARDS GERAIS */

.card {
    background:
        var(--creme-claro);

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

    border-radius: 14px;

    box-shadow:
        var(--sombra);
}


/* BOTÕES */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 42px;

    padding:
        0
        18px;

    border: none;
    border-radius: 8px;

    cursor: pointer;

    font-size: 14px;
    font-weight: 600;
}


.btn-primary {
    color: white;

    background:
        linear-gradient(
            135deg,
            #bf8721,
            #d8a733
        );

    box-shadow:
        0 6px 12px
        rgba(164, 111, 20, 0.22);
}


.btn-primary:hover {
    filter: brightness(1.04);
}


/* FORMULÁRIOS */

.form-control {
    width: 100%;

    min-height: 42px;

    padding:
        9px
        12px;

    border:
        1px solid
        #ddd4c5;

    border-radius: 8px;

    background: white;

    font:
        inherit;

    outline: none;
}


.form-control:focus {
    border-color:
        var(--dourado);

    box-shadow:
        0 0 0 3px
        rgba(213, 161, 43, 0.12);
}


textarea.form-control {
    min-height: 100px;
    resize: vertical;
}


/* FOOTER */

.footer {
    min-height: 64px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        0
        38px;

    border-top:
        1px solid
        var(--borda);

    background:
        #fbf8f2;

    color:
        var(--texto-claro);

    font-size: 13px;
}


.footer-quote {
    font-family:
        Georgia,
        serif;

    font-size: 14px;
    font-style: italic;
}


.footer-quote span {
    margin-left: 6px;

    font-size: 12px;
}


/* RESPONSIVO */

@media (
    max-width: 900px
) {

    .sidebar {
        width: 82px;

        padding-left: 12px;
        padding-right: 12px;
    }

    .brand div:not(
        .brand-symbol
    ),
    .menu-item:not(
        .active
    ) {
        font-size: 0;
    }

    .menu-item {
        justify-content: center;
    }

    .menu-item span {
        font-size: 23px;
    }

    .sidebar-quote,
    .usuario-box div:not(
        .usuario-avatar
    ) {
        display: none;
    }

    .usuario-box {
        justify-content: center;
    }

    .main {
        width:
            calc(100% - 82px);

        margin-left: 82px;
    }

    .hero-overlay {
        padding:
            30px
            32px;
    }

}


@media (
    max-width: 650px
) {

    .content {
        padding:
            20px
            14px
            35px;
    }

    .hero {
        min-height: 210px;
    }

    .hero-overlay {
        min-height: 210px;
    }

    .hero p {
        font-size: 16px;
    }

    .footer {
        flex-direction: column;

        justify-content: center;

        gap: 5px;

        text-align: center;

        padding:
            15px;
    }

}

/* DASHBOARD */

.dashboard {
    max-width: 1500px;
    margin: 0 auto;
}


.stats-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap: 16px;

    margin-top: -70px;
    margin-bottom: 20px;

    position: relative;
    z-index: 4;
}


.stat-card {
    min-height: 102px;

    display: flex;
    align-items: center;
    gap: 16px;

    padding: 20px;

    background: #fffdf9;

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

    border-radius: 14px;

    box-shadow:
        var(--sombra);
}


.stat-icon {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: white;

    font-size: 23px;
}


.stat-icon.azul {
    background:
        #365f95;
}


.stat-icon.dourado {
    background:
        #dca326;
}


.stat-icon.verde {
    background:
        #557f4c;
}


.stat-icon.vinho {
    background:
        #b85b45;
}


.stat-card strong {
    display: block;

    font-size: 26px;
    line-height: 1;
}


.stat-card span {
    display: block;

    margin-top: 7px;

    color:
        var(--texto-claro);

    font-size: 13px;
}


.dashboard-grid {
    display: grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        390px;

    gap: 18px;
}


.calendar-card {
    padding: 18px;
}


.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 58px;

    padding-bottom: 13px;

    border-bottom:
        1px solid
        var(--borda);
}


.card-label {
    display: block;

    margin-bottom: 2px;

    color:
        var(--dourado);

    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1.2px;
}


.card-header h3 {
    margin: 0;

    font-size: 24px;
}


.calendar-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}


.calendar-btn,
.calendar-today {
    min-width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

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

    border-radius: 8px;

    background:
        #fbf6ed;

    color:
        #a9791e;

    font-weight: 600;
}


.calendar-today {
    min-width: 65px;

    padding:
        0
        13px;
}


.calendar-weekdays {
    display: grid;

    grid-template-columns:
        repeat(
            7,
            1fr
        );

    padding:
        12px
        0;

    text-align: center;

    font-size: 11px;
    font-weight: 700;
}


.calendar-grid {
    display: grid;

    grid-template-columns:
        repeat(
            7,
            minmax(
                0,
                1fr
            )
        );

    border-top:
        1px solid
        #ebe4d9;

    border-left:
        1px solid
        #ebe4d9;
}


.calendar-day {
    min-height: 117px;

    padding:
        8px;

    background:
        #fffdf9;

    border-right:
        1px solid
        #ebe4d9;

    border-bottom:
        1px solid
        #ebe4d9;

    overflow: hidden;
}


.calendar-day.muted {
    background:
        #faf7f1;

    color:
        #b3aca1;
}


.calendar-day.today {
    background:
        #fff8e7;

    box-shadow:
        inset 0 0 0 2px
        rgba(213, 161, 43, 0.55);
}


.day-number {
    font-size: 13px;
    font-weight: 700;
}


.day-events {
    margin-top: 7px;

    display: flex;
    flex-direction: column;
    gap: 5px;
}


.event-pill {
    display: block;

    padding:
        4px
        6px;

    border-left:
        3px solid
        #365f95;

    border-radius: 4px;

    background:
        #f5f7fb;

    color:
        #365f95;

    font-size: 10px;
    line-height: 1.3;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.event-pill span {
    font-weight: 700;
}


.tipo-eucaristia {
    color:
        #b34f3c;

    border-color:
        #cf5f46;

    background:
        #fff4f1;
}


.tipo-palavra {
    color:
        #315e9b;

    border-color:
        #315e9b;

    background:
        #f3f7fd;
}


.tipo-preparacao {
    color:
        #744a9f;

    border-color:
        #744a9f;

    background:
        #faf5ff;
}


.tipo-convivencia {
    color:
        #c17222;

    border-color:
        #d88931;

    background:
        #fff8ef;
}


.tipo-celebracao {
    color:
        #4f7a4a;

    border-color:
        #4f7a4a;

    background:
        #f3f9f1;
}


.tipo-passagem {
    color:
        #b78112;

    border-color:
        #c99522;

    background:
        #fff9e9;
}


.tipo-outro {
    color:
        #666;

    border-color:
        #888;

    background:
        #f7f7f7;
}


.right-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}


.upcoming-card {
    padding:
        18px
        18px
        5px;
}


.side-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 12px;

    border-bottom:
        1px solid
        var(--borda);
}


.side-card-header > div {
    display: flex;
    align-items: center;
    gap: 9px;
}


.small-icon {
    color:
        var(--dourado);

    font-size: 18px;
}


.mini-add {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border-radius: 6px;

    background:
        #f8f1e2;

    color:
        #b17e22;

    font-size: 20px;
}


.upcoming-item {
    display: grid;

    grid-template-columns:
        62px
        1fr;

    gap: 13px;

    padding:
        14px
        0;

    border-bottom:
        1px solid
        #ece5da;
}


.upcoming-date {
    min-height: 64px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        #e8dfd2;

    border-radius: 8px;

    background:
        #fbf7f0;
}


.upcoming-date strong {
    font-size: 24px;
    line-height: 1;
}


.upcoming-date span {
    margin-top: 4px;

    font-size: 10px;
    font-weight: 700;
}


.upcoming-info > strong {
    display: block;

    font-size: 13px;
}


.upcoming-info > span,
.upcoming-info small {
    display: block;

    margin-top: 4px;

    color:
        var(--texto-claro);

    font-size: 11px;
}


.event-category {
    display: inline-block;

    margin-top: 7px;

    padding:
        3px
        7px;

    border-radius: 999px;

    font-size: 10px;
    font-style: normal;

    background:
        #f1f1f1;
}


.empty-state {
    padding:
        25px
        5px;

    color:
        var(--texto-claro);

    font-size: 13px;

    text-align: center;
}


.welcome-card {
    display: flex;
    gap: 14px;

    padding: 18px;
}


.welcome-symbol {
    color:
        var(--dourado);

    font-size: 30px;
}


.welcome-card strong {
    text-transform: uppercase;
}


.welcome-card p {
    margin:
        8px
        0
        5px;

    color:
        var(--texto-claro);

    font-size: 12px;
    line-height: 1.5;
}


.welcome-card span {
    color:
        #af7717;

    font-size: 12px;
    font-weight: 700;
}


@media (
    max-width: 1200px
) {

    .stats-grid {
        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }

    .dashboard-grid {
        grid-template-columns:
            1fr;
    }

}


@media (
    max-width: 700px
) {

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

        margin-top: -35px;
    }

    .calendar-card {
        overflow-x: auto;
    }

    .calendar-weekdays,
    .calendar-grid {
        min-width: 780px;
    }


}

/* FORMULÁRIO DE EVENTOS */

.form-page {
    max-width: 1250px;
    margin: -52px auto 0;

    position: relative;
    z-index: 4;
}


.page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;

    padding: 22px 26px;

    background:
        rgba(255, 253, 249, 0.97);

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

    border-radius: 14px;

    box-shadow:
        var(--sombra);
}


.page-heading h3 {
    margin:
        3px
        0
        7px;

    font-size: 27px;
}


.page-heading p {
    max-width: 620px;

    margin: 0;

    color:
        var(--texto-claro);

    font-size: 13px;
    line-height: 1.5;
}


.event-form-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        310px;

    gap: 18px;
}


.form-card {
    padding:
        5px
        26px
        24px;
}


.form-section {
    padding:
        24px
        0;

    border-bottom:
        1px solid
        var(--borda);
}


.section-title {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 18px;
}


.section-title > span {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        #f8edd7;

    color:
        #b77f1f;

    font-size: 12px;
    font-weight: 800;
}


.section-title strong,
.section-title small {
    display: block;
}


.section-title strong {
    font-size: 15px;
}


.section-title small {
    margin-top: 3px;

    color:
        var(--texto-claro);

    font-size: 11px;
}


.form-grid {
    display: grid;

    grid-template-columns:
        1fr;

    gap: 16px;
}


.form-grid.two-columns {
    grid-template-columns:
        repeat(2, 1fr);
}


.form-group label {
    display: block;

    margin-bottom: 7px;

    color:
        #4b4740;

    font-size: 12px;
    font-weight: 700;
}


.form-group label b {
    color:
        #b75a45;
}


.form-actions {
    display: flex;
    justify-content: flex-end;

    gap: 10px;

    padding-top: 22px;
}


.btn-light {
    color:
        #665f55;

    background:
        #f6f1e8;

    border:
        1px solid
        #dfd6c9;
}


.form-errors,
.field-error {
    color:
        #9e3f31;
}


.form-errors {
    margin-top: 20px;

    padding: 12px;

    border-radius: 8px;

    background:
        #fff0ed;
}


.field-error {
    display: block;

    margin-top: 5px;

    font-size: 11px;
}


.event-help {
    display: flex;
    flex-direction: column;
    gap: 16px;
}


.help-card {
    padding: 20px;
}


.help-symbol {
    margin-bottom: 10px;

    color:
        var(--dourado);

    font-size: 32px;
}


.help-card > strong {
    display: block;

    margin-bottom: 8px;
}


.help-card p {
    margin: 0;

    color:
        var(--texto-claro);

    font-size: 12px;
    line-height: 1.6;
}


.type-list {
    margin-top: 14px;

    display: grid;

    grid-template-columns:
        13px
        1fr;

    align-items: center;

    gap:
        10px
        8px;

    color:
        var(--texto-claro);

    font-size: 12px;
}


.type-dot {
    width: 9px;
    height: 9px;

    display: inline-block;

    border-radius: 50%;
}


.type-dot.palavra {
    background:
        #315e9b;
}


.type-dot.eucaristia {
    background:
        #cf5f46;
}


.type-dot.preparacao {
    background:
        #744a9f;
}


.type-dot.convivencia {
    background:
        #d88931;
}


.type-dot.passagem {
    background:
        #c99522;
}


@media (
    max-width: 1050px
) {

    .event-form-layout {
        grid-template-columns:
            1fr;
    }

    .event-help {
        display: grid;

        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (
    max-width: 700px
) {

    .form-page {
        margin-top: -25px;
    }

    .page-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .form-grid.two-columns {
        grid-template-columns:
            1fr;
    }

    .event-help {
        grid-template-columns:
            1fr;
    }

}
/* AJUSTE COMPACTO - DESKTOP */

@media (min-width: 1201px) {

    .sidebar {
        width: 225px;
        padding:
            20px
            16px
            16px;
    }

    .main {
        width:
            calc(100% - 225px);

        margin-left: 225px;
    }

    .brand {
        margin-bottom: 25px;
    }

    .menu {
        gap: 4px;
    }

    .menu-item {
        min-height: 42px;
    }

    .sidebar-quote {
        margin-top: 28px;
        padding-top: 18px;
    }

    .hero,
    .hero-overlay {
        min-height: 205px;
    }

    .hero-overlay {
        padding:
            20px
            55px;
    }

    .hero h1 {
        font-size: 58px;
    }

    .hero h2 {
        font-size: 38px;
    }

    .hero p {
        font-size: 17px;
    }

    .content {
        padding:
            20px
            28px
            28px;
    }

    .stats-grid {
        margin-top: -62px;
        margin-bottom: 16px;
        gap: 14px;
    }

    .stat-card {
        min-height: 88px;
        padding: 14px 18px;
    }

    .stat-icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        font-size: 20px;
    }

    .stat-card strong {
        font-size: 22px;
    }

    .dashboard-grid {
        grid-template-columns:
            minmax(0, 1fr)
            350px;

        gap: 15px;
    }

    .calendar-card {
        padding: 14px;
    }

    .card-header {
        min-height: 48px;
        padding-bottom: 9px;
    }

    .card-header h3 {
        font-size: 21px;
    }

    .calendar-weekdays {
        padding:
            8px
            0;
    }

    .calendar-day {
        min-height: 82px;
        padding: 6px;
    }

    .day-events {
        margin-top: 4px;
        gap: 3px;
    }

    .event-pill {
        padding:
            3px
            5px;

        font-size: 9px;
    }

    .upcoming-card {
        padding:
            14px
            15px
            4px;
    }

    .upcoming-item {
        padding:
            10px
            0;
    }

    .welcome-card {
        padding: 14px;
    }

    .footer {
        min-height: 48px;
    }

}

/* IRMÃOS */

.brothers-page {
    max-width: 1400px;
    margin: -52px auto 0;

    position: relative;
    z-index: 4;
}


.brothers-stats {
    margin-top: 0;
}


.brothers-card {
    padding: 20px;
}


.brothers-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding-bottom: 16px;

    border-bottom:
        1px solid
        var(--borda);
}


.brothers-toolbar h3 {
    margin:
        3px
        0
        0;

    font-size: 21px;
}


.brothers-search {
    width: 280px;
}


.table-responsive {
    overflow-x: auto;
}


.brothers-table {
    width: 100%;

    border-collapse: collapse;

    margin-top: 10px;
}


.brothers-table th {
    padding:
        12px
        10px;

    text-align: left;

    color:
        var(--texto-claro);

    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;

    border-bottom:
        1px solid
        var(--borda);
}


.brothers-table td {
    padding:
        12px
        10px;

    font-size: 12px;

    border-bottom:
        1px solid
        #eee7dc;
}


.brother-name {
    display: flex;
    align-items: center;

    gap: 10px;
}


.brother-avatar {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #173f63,
            #d6a22d
        );

    color: white;

    font-size: 14px;
    font-weight: 700;
}


.brother-name strong,
.brother-name span {
    display: block;
}


.brother-name span {
    margin-top: 3px;

    color:
        var(--texto-claro);

    font-size: 10px;
}


.brother-stage {
    display: inline-block;

    padding:
        4px
        8px;

    border-radius: 999px;

    background:
        #f8efd9;

    color:
        #9c6c16;

    font-size: 10px;
    font-weight: 700;
}


.status-badge {
    display: inline-block;

    min-width: 58px;

    padding:
        4px
        8px;

    text-align: center;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 700;
}


.status-badge.active {
    background:
        #eaf5e8;

    color:
        #497342;
}


.status-badge.inactive {
    background:
        #f3eeee;

    color:
        #8c6868;
}


.active-check {
    display: flex;
    align-items: center;

    gap: 8px;

    color:
        var(--texto-claro);

    font-size: 12px;
}


.form-check-input {
    width: 18px;
    height: 18px;

    accent-color:
        var(--dourado);
}


.form-actions {
    align-items: center;
    justify-content: space-between;
}


@media (
    max-width: 800px
) {

    .brothers-page {
        margin-top: -25px;
    }

    .brothers-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .brothers-search {
        width: 100%;
    }

}

/* ÍCONES DO MENU */

.menu-item i {
    font-size: 17px;
    line-height: 1;
}

.menu-item.active i {
    color: #fff;
}

.brand-symbol {
    color: var(--dourado-claro);
}

/* MENU LATERAL - REFERÊNCIA VISUAL */

.sidebar {
    width: 205px;
    padding: 16px 12px;
}

.main {
    width: calc(100% - 205px);
    margin-left: 205px;
}

.brand {
    gap: 8px;
    margin-bottom: 20px;
}

.brand-symbol {
    font-size: 24px;
    color: #e2ad2f;
}

.brand strong {
    font-size: 11px;
}

.brand span {
    font-size: 9px;
}

.menu {
    gap: 3px;
}

.menu-item {
    min-height: 34px;
    padding: 0 10px;

    border-radius: 5px;

    font-size: 11px;
}

.menu-item span {
    width: 18px;
    font-size: 13px;
}

.menu-item i {
    font-size: 13px;
}

.menu-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.menu-item.active {
    background: linear-gradient(
        135deg,
        #bb8120,
        #d9a42d
    );

    box-shadow: none;
}

.sidebar-quote {
    margin-top: 26px;
    padding-top: 17px;
}

.sidebar-quote blockquote {
    max-width: 145px;
    font-size: 12px;
    line-height: 1.5;
}

.sidebar-quote small {
    font-size: 9px;
}

.ornamento {
    font-size: 16px;
}

.usuario-box {
    padding: 8px;
    border-radius: 8px;
}

.usuario-avatar {
    width: 30px;
    height: 30px;
}

.usuario-box strong {
    font-size: 10px;
}

.usuario-box span {
    font-size: 9px;
}
/* ==================================================
   AJUSTE FINAL DE PROPORÇÕES - DESKTOP
   Referência visual oficial
   ================================================== */

@media (min-width: 1201px) {

    /* SIDEBAR */

    .sidebar {
        width: 235px;

        padding:
            18px
            14px
            14px;
    }

    .main {
        width: calc(100% - 235px);
        margin-left: 235px;
    }

    .brand {
        gap: 9px;
        margin-bottom: 22px;
    }

    .brand-symbol {
        font-size: 27px;
    }

    .brand strong {
        font-size: 12px;
    }

    .brand span {
        font-size: 10px;
    }

    .menu {
        gap: 4px;
    }

    .menu-item {
        min-height: 38px;

        padding:
            0
            11px;

        font-size: 12px;

        border-radius: 6px;
    }

    .menu-item span {
        width: 20px;
    }

    .menu-item i {
        font-size: 14px;
    }


    /* CABEÇALHO */

    .hero,
    .hero-overlay {
        min-height: 165px;
    }

    .hero-overlay {
        padding:
            15px
            55px;
    }

    .hero h1 {
        font-size: 46px;
        line-height: 0.95;
    }

    .hero h2 {
        margin-top: 3px;

        font-size: 30px;
        line-height: 1;
    }

    .hero p {
        margin-top: 9px;

        font-size: 15px;
    }

    .hero-line {
        margin-top: 7px;
    }


    /* ÁREA PRINCIPAL */

    .content {
        padding:
            14px
            26px
            18px;
    }

    .dashboard {
        max-width: none;
    }


    /* CARDS SUPERIORES */

    .stats-grid {
        gap: 13px;

        margin-top: -43px;
        margin-bottom: 12px;
    }

    .stat-card {
        min-height: 72px;

        padding:
            10px
            15px;
    }

    .stat-icon {
        width: 40px;
        height: 40px;

        flex-basis: 40px;

        font-size: 17px;
    }

    .stat-card strong {
        font-size: 20px;
    }

    .stat-card span {
        margin-top: 4px;

        font-size: 11px;
    }


    /* COLUNAS */

    .dashboard-grid {
        grid-template-columns:
            minmax(0, 1fr)
            345px;

        gap: 14px;
    }


    /* CALENDÁRIO */

    .calendar-card {
        padding: 12px;
    }

    .card-header {
        min-height: 42px;
        padding-bottom: 7px;
    }

    .card-label {
        font-size: 9px;
    }

    .card-header h3 {
        font-size: 20px;
    }

    .calendar-btn,
    .calendar-today {
        height: 32px;
        min-width: 32px;
    }

    .calendar-today {
        min-width: 58px;
    }

    .calendar-weekdays {
        padding:
            6px
            0;

        font-size: 9px;
    }

    .calendar-day {
        min-height: 61px;

        padding:
            5px
            6px;
    }

    .day-number {
        font-size: 11px;
    }

    .day-events {
        margin-top: 3px;
        gap: 2px;
    }

    .event-pill {
        padding:
            2px
            4px;

        font-size: 8px;
    }


    /* PRÓXIMOS EVENTOS */

    .right-column {
        gap: 12px;
    }

    .upcoming-card {
        padding:
            11px
            14px
            3px;
    }

    .side-card-header {
        padding-bottom: 8px;
    }

    .upcoming-item {
        grid-template-columns:
            54px
            1fr;

        gap: 10px;

        padding:
            8px
            0;
    }

    .upcoming-date {
        min-height: 54px;
    }

    .upcoming-date strong {
        font-size: 20px;
    }

    .upcoming-info > strong {
        font-size: 11px;
    }

    .upcoming-info > span,
    .upcoming-info small {
        margin-top: 2px;

        font-size: 9px;
    }

    .event-category {
        margin-top: 4px;

        padding:
            2px
            6px;

        font-size: 8px;
    }


    /* BOAS-VINDAS */

    .welcome-card {
        padding: 11px;
    }

    .welcome-symbol {
        font-size: 23px;
    }

    .welcome-card p {
        margin:
            4px
            0;

        font-size: 10px;
    }

    .welcome-card span {
        font-size: 10px;
    }


    /* RODAPÉ */

    .footer {
        min-height: 35px;

        padding:
            0
            25px;

        font-size: 10px;
    }

    .footer-quote {
        font-size: 11px;
    }


    /* FRASE DA SIDEBAR */

    .sidebar-quote {
        margin-top: 24px;
        padding-top: 15px;
    }

    .sidebar-quote blockquote {
        max-width: 165px;

        font-size: 13px;
    }

    .sidebar-quote small {
        font-size: 10px;
    }

}

/* AJUSTE FINO - CALENDÁRIO CABER NA TELA */

@media (min-width: 1201px) {

    .calendar-day {
        min-height: 54px;
    }

    .stats-grid {
        margin-bottom: 9px;
    }

    .calendar-card {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .content {
        padding-bottom: 10px;
    }

}

/* ==================================================
   CABEÇALHO - CAMINHO NEOCATECUMENAL
   ================================================== */

.hero.hero-caminho {
    position: relative;

    min-height: 165px;
    height: 165px;

    display: grid;

    grid-template-columns:
        205px
        minmax(400px, 1fr)
        360px;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            #082d4d 0%,
            #0a365b 48%,
            #162f36 100%
        );
}


/* IMAGENS */

.hero-image {
    height: 165px;

    position: relative;

    overflow: hidden;
}


.hero-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* CRISTO */

.hero-cristo img {
    object-position:
        center center;
}


/* Transição suave entre Cristo e fundo */

.hero-cristo::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;

    width: 60px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #082d4d
        );

    pointer-events: none;
}


/* VIRGEM */

.hero-virgem img {
    object-position:
        center 36%;
}


/* Transição entre fundo e Virgem */

.hero-virgem::before {
    content: "";

    position: absolute;

    z-index: 2;

    top: 0;
    left: 0;
    bottom: 0;

    width: 85px;

    background:
        linear-gradient(
            90deg,
            #162f36,
            transparent
        );

    pointer-events: none;
}


/* CENTRO */

.hero-center {
    position: relative;

    display: flex;
    align-items: center;

    padding:
        12px
        30px;

    z-index: 3;
}


.hero-center .hero-content {
    position: relative;

    padding: 0;

    max-width: 570px;
}


/* TÍTULO */

.hero-caminho h1 {
    margin: 0;

    color:
        #fff4dc;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 45px;

    font-weight: 400;

    line-height: 0.9;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.hero-caminho h2 {
    margin:
        4px
        0
        0;

    color:
        #e5ad2e;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 29px;

    font-weight: 500;

    line-height: 1;

    text-transform: uppercase;
}


.hero-caminho p {
    margin:
        10px
        0
        0;

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

    font-size: 13px;

    line-height: 1.4;
}


/* ORNAMENTO */

.hero-caminho .hero-line {
    width: 170px;

    margin-top: 7px;

    display: flex;
    align-items: center;

    gap: 7px;

    color:
        #dba32b;

    font-size: 11px;
}


.hero-caminho .hero-line span {
    height: 1px;

    flex: 1;

    background:
        rgba(
            219,
            163,
            43,
            0.65
        );
}


/* RESPONSIVO */

@media (max-width: 1050px) {

    .hero.hero-caminho {
        grid-template-columns:
            150px
            1fr
            250px;
    }

}


@media (max-width: 760px) {

    .hero.hero-caminho {
        grid-template-columns:
            110px
            1fr;

        height: 150px;
        min-height: 150px;
    }

    .hero-image {
        height: 150px;
    }

    .hero-virgem {
        display: none;
    }

    .hero-center {
        padding:
            10px
            18px;
    }

    .hero-caminho h1 {
        font-size: 34px;
    }

    .hero-caminho h2 {
        font-size: 22px;
    }

    .hero-caminho p {
        font-size: 11px;
    }

}
/* ==================================================
   REFINAMENTO DO CABEÇALHO
   Integração das imagens + enquadramento
   ================================================== */

@media (min-width: 1201px) {

    .hero.hero-caminho {
        grid-template-columns:
            215px
            minmax(420px, 1fr)
            390px;
    }


    /* CRISTO */

    .hero-cristo img {
        object-fit: cover;

        object-position:
            center 32%;
    }

    .hero-cristo::after {
        width: 95px;

        background:
            linear-gradient(
                90deg,
                transparent 0%,
                rgba(8, 45, 77, 0.25) 35%,
                #082d4d 100%
            );
    }


    /* VIRGEM */

    .hero-virgem img {
        object-fit: cover;

        /*
        Como a imagem original é vertical,
        diminuímos visualmente a aproximação
        para mostrar uma área maior.
        */

        transform:
            scale(0.82);

        transform-origin:
            center 38%;
    }

    .hero-virgem {
        background:
            #162f36;
    }

    .hero-virgem::before {
        width: 125px;

        background:
            linear-gradient(
                90deg,
                #162f36 0%,
                rgba(22, 47, 54, 0.85) 20%,
                rgba(22, 47, 54, 0.30) 65%,
                transparent 100%
            );
    }


    /* TEXTO */

    .hero-center {
        padding-left: 35px;
        padding-right: 20px;
    }

}
/* ==================================================
   TOPO DEFINITIVO - REFERÊNCIA PRINCIPAL
   ================================================== */

.layout {
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    background: var(--creme);
}


/* TOPO COMPLETO */

.topo-caminho {
    height: 165px;
    min-height: 165px;

    display: grid;

    grid-template-columns:
        235px
        minmax(0, 1fr)
        395px;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            #0a3153 0%,
            #0c375b 55%,
            #17343a 100%
        );
}


.topo-cristo,
.topo-virgem {
    height: 165px;

    overflow: hidden;

    position: relative;
}


.topo-cristo img,
.topo-virgem img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* CRISTO */

.topo-cristo img {
    object-position:
        center 27%;
}


/* integração com o centro */

.topo-cristo::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;

    width: 55px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(10, 49, 83, 0.92)
        );
}


/* VIRGEM */

.topo-virgem img {
    object-position:
        center 30%;
}


.topo-virgem::before {
    content: "";

    position: absolute;

    z-index: 2;

    top: 0;
    left: 0;
    bottom: 0;

    width: 70px;

    background:
        linear-gradient(
            90deg,
            rgba(23, 52, 58, 0.98),
            transparent
        );
}


/* CENTRO */

.topo-centro {
    display: flex;
    align-items: center;

    padding:
        15px
        35px;
}


.topo-texto {
    max-width: 580px;
}


.topo-texto h1 {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 45px;
    font-weight: 400;

    line-height: 0.92;

    text-transform: uppercase;

    color:
        #fff4dd;
}


.topo-texto h2 {
    margin:
        5px
        0
        0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 28px;
    font-weight: 500;

    line-height: 1;

    text-transform: uppercase;

    color:
        #e4ac2c;
}


.topo-texto p {
    margin:
        10px
        0
        0;

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

    font-size: 13px;
    line-height: 1.35;
}


.topo-texto .hero-line {
    width: 170px;

    margin-top: 7px;

    display: flex;
    align-items: center;

    gap: 7px;

    color:
        #dba32b;

    font-size: 10px;
}


.topo-texto .hero-line span {
    height: 1px;

    flex: 1;

    background:
        rgba(219, 163, 43, 0.65);
}


/* ÁREA ABAIXO DO CABEÇALHO */

.area-sistema {
    flex: 1;

    display: flex;

    min-height:
        calc(100vh - 165px);
}


/* SIDEBAR AGORA COMEÇA ABAIXO DO CRISTO */

.sidebar {
    width: 235px;

    position: relative;

    top: auto;
    bottom: auto;
    left: auto;

    flex: 0 0 235px;

    min-height:
        calc(100vh - 165px);

    padding:
        16px
        14px
        14px;
}


/* CONTEÚDO PRINCIPAL */

.main {
    width: auto;

    flex: 1;

    margin-left: 0;

    min-width: 0;
}


/* CARDS NÃO SOBEM SOBRE O TOPO */

.content {
    padding:
        14px
        26px
        12px;
}


.stats-grid {
    margin-top: 0;
}


/* RODAPÉ */

.footer {
    margin-left: 235px;
}


/* REMOVE O HERO ANTIGO */

.hero {
    display: none;
}


/* RESPONSIVO */

@media (max-width: 1200px) {

    .topo-caminho {
        grid-template-columns:
            190px
            minmax(0, 1fr)
            300px;
    }

    .sidebar {
        width: 190px;
        flex-basis: 190px;
    }

    .footer {
        margin-left: 190px;
    }

}


@media (max-width: 760px) {

    .topo-caminho {
        height: 145px;
        min-height: 145px;

        grid-template-columns:
            110px
            1fr;
    }

    .topo-cristo,
    .topo-virgem {
        height: 145px;
    }

    .topo-virgem {
        display: none;
    }

    .topo-centro {
        padding:
            12px
            18px;
    }

    .topo-texto h1 {
        font-size: 31px;
    }

    .topo-texto h2 {
        font-size: 20px;
    }

    .topo-texto p {
        font-size: 10px;
    }

}
/* ÍCONES DOS CARDS */

.stat-icon i {
    font-size: 18px;
    line-height: 1;
}
/* FICHA DO IRMÃO */

.brother-detail-page {
    max-width: 1200px;
    margin: 0 auto;
}

.brother-profile-card {
    padding: 24px;
}

.brother-profile-header {
    display: flex;
    align-items: center;
    gap: 18px;

    padding-bottom: 20px;

    border-bottom:
        1px solid
        var(--borda);
}

.brother-profile-avatar {
    width: 70px;
    height: 70px;

    flex: 0 0 70px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #173f63,
            #d6a22d
        );

    color: white;

    font-size: 26px;
    font-weight: 700;
}

.brother-profile-title h2 {
    margin: 0;

    font-size: 24px;
}

.brother-profile-title > span {
    display: block;

    margin-top: 4px;

    color:
        var(--texto-claro);

    font-size: 12px;
}

.brother-profile-status {
    display: flex;
    gap: 8px;

    margin-top: 10px;
}

.brother-detail-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 16px;

    padding:
        22px
        0;
}

.detail-block {
    padding: 14px;

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

    border-radius: 10px;

    background:
        #fffdf9;
}

.detail-label {
    display: block;

    margin-bottom: 6px;

    color:
        var(--texto-claro);

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.7px;
}

.detail-block strong {
    font-size: 13px;
}

.detail-notes {
    padding-top: 18px;

    border-top:
        1px solid
        var(--borda);
}

.detail-notes p {
    margin:
        8px
        0
        0;

    color:
        var(--texto-claro);

    font-size: 12px;
    line-height: 1.6;
}

@media (max-width: 900px) {

    .brother-detail-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}

@media (max-width: 600px) {

    .brother-detail-grid {
        grid-template-columns:
            1fr;
    }

}
.page-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
/* STATUS DO IRMÃO */

.status-form {
    margin: 0;
}

.btn-inativar,
.btn-reativar {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    cursor: pointer;
}


/* INATIVAR */

.btn-inativar {
    background: #fff7f4;

    color: #b9553d;

    border:
        1px solid
        #dfb0a4;
}

.btn-inativar:hover {
    background: #b9553d;

    color: #ffffff;

    border-color: #b9553d;
}


/* REATIVAR */

.btn-reativar {
    background: #f2f8f0;

    color: #4f814b;

    border:
        1px solid
        #afd0aa;
}

.btn-reativar:hover {
    background: #4f814b;

    color: #ffffff;

    border-color: #4f814b;
}
/* ==================================================
   IDENTIDADE DA COMUNIDADE NO CABEÇALHO
   ================================================== */

.topo-texto .topo-paroquia {
    margin:
        7px
        0
        0;

    color:
        #f2d47e;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.2;
}


.topo-texto .topo-frase {
    margin:
        5px
        0
        0;

    color:
        rgba(
            255,
            255,
            255,
            0.88
        );

    font-size: 11px;

    font-style: italic;

    line-height: 1.3;
}
/* ==================================================
   CORREÇÃO DAS TELAS INTERNAS
   Novo Evento / Irmãos / Comunidades / Fichas
   Nova estrutura do cabeçalho
   ================================================== */


/* REMOVE A SOBREPOSIÇÃO DO LAYOUT ANTIGO */

.form-page,
.brothers-page,
.brother-detail-page {
    margin-top: 0;
}


/* CONTEÚDO DAS TELAS INTERNAS */

.form-page {
    max-width: 1250px;

    margin-left: auto;
    margin-right: auto;
}


.brothers-page {
    max-width: 1400px;

    margin-left: auto;
    margin-right: auto;
}


.brother-detail-page {
    max-width: 1200px;

    margin-left: auto;
    margin-right: auto;
}


/* CABEÇALHO INTERNO DAS PÁGINAS */

.page-heading {
    margin-top: 0;
    margin-bottom: 16px;

    padding:
        17px
        22px;

    position: relative;
    z-index: 1;
}


/* NÃO DEIXA O CABEÇALHO INTERNO
   INVADIR O BANNER PRINCIPAL */

.area-sistema .content {
    position: relative;

    padding-top: 14px;
}


/* FORMULÁRIO */

.event-form-layout {
    margin-top: 0;
}


/* CARDS DE IRMÃOS / COMUNIDADES */

.brothers-stats {
    margin-top: 0;
}


/* FICHA DO IRMÃO E COMUNIDADE */

.brother-profile-card {
    margin-top: 0;
}


/* TELAS MENORES */

@media (max-width: 1050px) {

    .form-page,
    .brothers-page,
    .brother-detail-page {
        margin-top: 0;
    }

}


@media (max-width: 700px) {

    .form-page,
    .brothers-page,
    .brother-detail-page {
        margin-top: 0;
    }

}
/* ==================================================
   AÇÕES DO CALENDÁRIO / PDF
   ================================================== */

.calendar-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-pdf {
    min-height: 32px;

    padding:
        0
        12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    background:
        #fff7f4;

    color:
        #a94838;

    border:
        1px solid
        #dfb3a8;

    font-size: 10px;

    box-shadow: none;
}

.btn-pdf:hover {
    background:
        #a94838;

    color:
        #ffffff;

    border-color:
        #a94838;
}

.btn-pdf i {
    font-size: 13px;
}

.btn-share-calendar {
    min-height: 32px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #d6b45b;
    border-radius: 7px;
    background: #fff9e9;
    color: #805b0f;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: none;
}

.btn-share-calendar:hover {
    border-color: var(--dourado);
    background: var(--dourado);
    color: #08263d;
}

.btn-share-calendar:focus-visible {
    outline: 3px solid rgba(213, 161, 43, 0.35);
    outline-offset: 2px;
}

.btn-share-calendar:disabled {
    cursor: wait;
    opacity: 0.7;
}

.share-calendar-status {
    min-height: 18px;
    margin: 5px 0 0;
    color: var(--texto-claro);
    font-size: 11px;
    text-align: right;
}

.share-calendar-status.is-success {
    color: #3e713e;
}

.share-calendar-status.is-error {
    color: #a94838;
}

@media (max-width: 800px) {

    .calendar-header-actions {
        align-items: flex-end;
        flex-direction: column;
    }

    .share-calendar-status {
        text-align: left;
    }

}
/* ==================================================
   LINK DOS PRÓXIMOS EVENTOS
   ================================================== */

.upcoming-event-link {
    color: inherit;
    text-decoration: none;
}

.upcoming-event-link:hover {
    color: #b47a16;
}
.page-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}.page-header h1{color:#082f4d;margin:4px 0}.page-header p{margin:0;color:#6d7378}.eyebrow{color:#b68016;text-transform:uppercase;font-weight:800;font-size:12px;letter-spacing:1px}.btn{display:inline-flex;align-items:center;gap:7px;padding:11px 16px;border:0;border-radius:9px;text-decoration:none;font-weight:700;cursor:pointer}.btn-primary{background:#082f4d;color:#fff}.btn-light{background:#f6f0e6;color:#082f4d}.btn-danger{background:#b84c3d;color:#fff}.header-actions,.actions{display:flex;gap:9px;flex-wrap:wrap}.alert-success{padding:13px 16px;margin-bottom:18px;border-left:4px solid #4f814b;background:#eef7ed;color:#31592e;border-radius:8px}.preparacoes-card,.detail-card,.confirm-card{background:#fffdf8;border:1px solid #ddd3c5;border-radius:14px;box-shadow:0 8px 24px rgba(8,47,77,.08)}.table-responsive{overflow-x:auto}.preparacoes-table{width:100%;border-collapse:collapse}.preparacoes-table th{background:#082f4d;color:#fff;text-align:left;padding:14px}.preparacoes-table td{padding:14px;border-bottom:1px solid #eee5d8}.actions a{color:#174e7a;font-weight:700;text-decoration:none}.actions .danger{color:#b84c3d}.empty-state{text-align:center;padding:55px 20px}.empty-state i{font-size:42px;color:#d49a20}.detail-card{padding:22px;margin-bottom:18px}.detail-card h2{color:#082f4d;border-bottom:2px solid #d49a20;padding-bottom:9px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.detail-grid .wide{grid-column:1/-1}.detail-grid label{font-size:12px;text-transform:uppercase;color:#9b711c;font-weight:800}.detail-grid p{margin:5px 0;line-height:1.55}.detail-item{padding:14px 0;border-bottom:1px solid #eee5d8}.detail-item:last-child{border:0}.detail-item h3{color:#174e7a;margin:0 0 8px}.detail-item p{margin:5px 0}.confirm-card{max-width:650px;margin:50px auto;padding:35px;text-align:center}.confirm-card>i{font-size:45px;color:#d49a20}.confirm-card form{display:flex;justify-content:center;gap:12px;margin-top:24px}@media(max-width:700px){.page-header{align-items:flex-start;flex-direction:column}.detail-grid{grid-template-columns:1fr}}

/* ==================================================
   RESPONSIVIDADE MOBILE — ETAPA 1
   Regras restritas ao mobile para preservar o desktop.
   ================================================== */

.mobile-menu-toggle,
.mobile-menu-close,
.mobile-menu-backdrop {
    display: none;
}

@media (max-width: 768px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    body.mobile-menu-open {
        overflow: hidden;
    }

    .topo-caminho {
        height: 104px;
        min-height: 104px;
        grid-template-columns: 76px minmax(0, 1fr);
    }

    .topo-cristo {
        height: 104px;
    }

    .topo-cristo img {
        object-position: center 25%;
    }

    .topo-cristo::after {
        width: 24px;
    }

    .topo-virgem {
        display: none;
    }

    .topo-centro {
        min-width: 0;
        padding: 10px 12px 9px 14px;
    }

    .topo-texto {
        max-width: 100%;
        min-width: 0;
    }

    .topo-texto h1 {
        font-size: clamp(20px, 6.2vw, 27px);
        line-height: 1;
        overflow-wrap: anywhere;
    }

    .topo-texto h2 {
        margin-top: 4px;
        font-size: clamp(13px, 3.8vw, 17px);
        line-height: 1.05;
    }

    .topo-texto p {
        margin-top: 5px;
        font-size: 9px;
        line-height: 1.2;
    }

    .topo-frase,
    .topo-texto .hero-line {
        display: none;
    }

    .area-sistema {
        display: block;
        min-height: calc(100vh - 104px);
        width: 100%;
    }

    .mobile-menu-toggle {
        position: fixed;
        z-index: 1200;
        top: 8px;
        left: 8px;
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(228, 172, 44, .7);
        border-radius: 9px;
        background: rgba(6, 35, 57, .92);
        color: #fff4dd;
        font-size: 24px;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
    }

    .mobile-menu-close {
        position: absolute;
        z-index: 2;
        top: 10px;
        right: 10px;
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, .28);
        border-radius: 8px;
        background: rgba(255, 255, 255, .08);
        color: #fff;
        font-size: 28px;
        cursor: pointer;
    }

    .area-sistema > .sidebar {
        position: fixed;
        z-index: 1100;
        inset: 0 auto 0 0;
        top: 0;
        width: min(82vw, 300px);
        height: 100dvh;
        min-height: 100vh;
        padding: 18px 14px;
        overflow-y: auto;
        transform: translateX(-105%);
        transition: transform .22s ease;
        box-shadow: 10px 0 30px rgba(0, 0, 0, .28);
    }

    .mobile-menu-open .area-sistema > .sidebar {
        transform: translateX(0);
    }

    .area-sistema > .sidebar .brand {
        padding-right: 48px;
    }

    .area-sistema > .sidebar .menu {
        display: flex;
        flex-direction: column;
    }

    .area-sistema > .sidebar .menu-item {
        width: 100%;
        min-height: 48px;
        justify-content: flex-start;
        padding: 11px 12px;
        gap: 12px;
        font-size: 14px;
    }

    .area-sistema > .sidebar .menu-item span {
        display: inline-grid;
        flex: 0 0 24px;
        place-items: center;
    }

    .area-sistema > .sidebar .sidebar-quote {
        display: block;
    }

    .area-sistema > .sidebar .usuario-box {
        display: flex;
    }

    .mobile-menu-backdrop {
        position: fixed;
        z-index: 1050;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        background: rgba(3, 20, 34, .58);
        opacity: 0;
        pointer-events: none;
        transition: opacity .22s ease;
    }

    .mobile-menu-open .mobile-menu-backdrop {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    .main {
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    .content,
    .area-sistema .content {
        width: 100%;
        max-width: 100%;
        padding: 10px 9px 18px;
    }

    .footer {
        margin-left: 0;
        padding-left: 12px;
        padding-right: 12px;
    }

    .dashboard,
    .form-page,
    .brothers-page,
    .brother-detail-page,
    .page-header,
    .prep-header,
    .prep-form {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .stat-card {
        min-width: 0;
        min-height: 82px;
        padding: 11px;
        gap: 9px;
    }

    .stat-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
    }

    .stat-card strong {
        font-size: 21px;
    }

    .stat-card span {
        font-size: 10px;
        overflow-wrap: anywhere;
    }

    .dashboard-grid,
    .event-form-layout,
    .brother-detail-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .card,
    .calendar-card,
    .upcoming-card,
    .welcome-card,
    .form-card,
    .brothers-card,
    .prep-card,
    .preparacoes-card,
    .detail-card {
        max-width: 100%;
        min-width: 0;
    }

    .calendar-card {
        width: 100%;
        overflow: hidden;
    }

    .calendar-card .card-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        padding: 12px 10px;
    }

    .calendar-header-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .calendar-header-actions > .btn,
    .calendar-header-actions .calendar-actions {
        width: 100%;
    }

    .calendar-actions {
        justify-content: space-between;
    }

    .calendar-btn,
    .calendar-today,
    .btn-share-calendar,
    .btn-pdf {
        min-height: 42px;
    }

    .calendar-weekdays,
    .calendar-grid {
        width: 100%;
        min-width: 0;
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .calendar-weekdays span {
        min-width: 0;
        padding: 8px 0;
        font-size: 8px;
    }

    .calendar-day {
        min-width: 0;
        min-height: 76px;
        height: auto;
        padding: 4px 2px;
        overflow: hidden;
    }

    .day-number {
        margin-bottom: 3px;
        font-size: 10px;
    }

    .day-events {
        min-width: 0;
    }

    .event-pill {
        width: 100%;
        max-width: 100%;
        padding: 2px;
        font-size: 7px;
        line-height: 1.2;
        white-space: normal;
        overflow-wrap: anywhere;
        text-overflow: clip;
    }

    .event-pill span {
        display: block;
        font-size: 7px;
    }

    .right-column {
        min-width: 0;
    }

    .page-heading,
    .brothers-toolbar,
    .page-header,
    .prep-header {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .page-heading .btn,
    .page-header .btn,
    .prep-header .prep-button {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    .form-grid,
    .form-grid.two-columns,
    .prep-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .form-control,
    input,
    select,
    textarea {
        max-width: 100%;
        min-width: 0;
    }

    .form-actions,
    .confirm-card form,
    .export-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .form-actions .btn,
    .confirm-card form .btn,
    .export-actions .prep-button {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    .table-responsive {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .brothers-table,
    .preparacoes-table {
        min-width: 660px;
    }
}

@media (max-width: 420px) {
    .stats-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .topo-texto .topo-paroquia {
        display: none;
    }
}

/* Agenda: largura útil = viewport - sidebar (235px) - margens (52px).
   Duas colunas a partir de 1600px deixam ~960px para o calendário,
   além do painel de 320px e do intervalo. Mobile homologado até 768px. */
@media (min-width: 769px) {
    .dashboard .dashboard-grid {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .dashboard .calendar-card,
    .dashboard .right-column,
    .dashboard .upcoming-info {
        min-width: 0;
    }

    .dashboard .calendar-card .card-header,
    .dashboard .calendar-header-actions {
        flex-wrap: wrap;
        gap: 10px;
    }

    .dashboard .calendar-grid {
        min-height: 0;
        grid-auto-rows: minmax(min-content, 1fr);
    }

    .dashboard .calendar-day {
        min-width: 0;
        min-height: 88px;
        padding: 8px 6px;
    }

    .dashboard .calendar-weekdays {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        padding: 10px 0;
        font-size: 12px;
    }

    .dashboard .day-number {
        font-size: 15px;
    }

    .dashboard .day-events {
        min-width: 0;
        margin-top: 6px;
        gap: 4px;
    }

    .dashboard .event-pill {
        max-width: 100%;
        padding: 4px;
        font-size: 12px;
        line-height: 1.35;
    }

    .dashboard .upcoming-info {
        overflow-wrap: anywhere;
    }
}

@media (min-width: 1600px) {
    .dashboard {
        /* Banner existente: 165px; padding vertical de .content: 14 + 12px.
           Reserva de 48px para o rodapé. Os indicadores ocupam sua altura
           real (auto); somente o restante é destinado ao calendário. */
        height: calc(100dvh - 165px - 26px - 48px);
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
    }

    .dashboard .dashboard-grid {
        grid-template-columns: minmax(0, 1fr) clamp(300px, 20vw, 320px);
        grid-template-rows: minmax(0, 1fr);
        min-height: 0;
    }

    .dashboard .calendar-card {
        height: 100%;
        /* Em viewports muito baixas, a rolagem passa a ser necessária
           para preservar os controles e a leitura das semanas. */
        min-height: 400px;
        display: grid;
        grid-template-rows: auto auto auto minmax(0, 1fr);
    }

    .dashboard .calendar-grid {
        /* Os dias são filhos diretos: cada grupo de sete forma uma linha
           implícita. 1fr divide a altura DEFINIDA pela última faixa do card,
           após descontar título/controles, status e cabeçalho DOM–SÁB. */
        display: grid;
        grid-template-rows: none;
        grid-auto-rows: minmax(0, 1fr);
        align-content: stretch;
        align-items: stretch;
    }

    .dashboard .calendar-grid > .calendar-day {
        height: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .dashboard .calendar-day > .day-number {
        flex: none;
    }

    .dashboard .calendar-day > .day-events {
        min-height: 0;
        overflow-y: auto;
    }

    .dashboard .day-events > .event-pill {
        flex-shrink: 0;
    }

    .dashboard .calendar-weekdays {
        font-size: 13px;
    }

    .dashboard .day-number {
        font-size: 16px;
    }

    .dashboard .event-pill {
        font-size: 13px;
    }
}

/* Autenticação e controle de acesso */
.sidebar-logout { margin: 0; }
.sidebar-logout .menu-item { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.usuario-box small { display: block; margin-top: 4px; color: var(--dourado-claro); overflow-wrap: anywhere; }
.access-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.access-actions form { margin: 0; }

.auth-body { min-height: 100vh; margin: 0; background: linear-gradient(145deg, var(--azul-profundo), var(--azul-escuro)); color: var(--texto); }
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 28px 16px; }
.auth-card { width: min(100%, 460px); padding: 34px; border: 1px solid rgba(213, 161, 43, .45); border-radius: 18px; background: var(--creme-claro); box-shadow: 0 24px 60px rgba(0, 0, 0, .28); }
.auth-brand { padding-bottom: 22px; margin-bottom: 24px; border-bottom: 2px solid var(--dourado); text-align: center; color: var(--azul-escuro); }
.auth-brand span { display: inline-grid; width: 46px; height: 46px; place-items: center; border-radius: 50%; background: var(--azul-escuro); color: var(--dourado-claro); font-size: 24px; }
.auth-brand p { margin: 12px 0 2px; color: var(--dourado); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.auth-brand strong { font-family: Georgia, serif; font-size: 23px; }
.auth-card h1 { margin: 0 0 8px; color: var(--azul-escuro); text-align: center; }
.auth-card > p, .auth-intro { text-align: center; line-height: 1.55; color: var(--texto-claro); }
.auth-form { display: grid; gap: 16px; margin-top: 24px; }
.auth-form .form-group { margin: 0; }
.auth-form label { display: block; margin-bottom: 7px; color: var(--azul-escuro); font-weight: 700; }
.auth-submit { width: 100%; justify-content: center; min-height: 46px; }
.auth-links { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; font-weight: 700; }
.auth-links a { color: var(--azul); }
.future-link { color: var(--texto-claro); cursor: not-allowed; }
.access-status-icon { display: grid; width: 58px; height: 58px; place-items: center; margin: 0 auto 18px; border-radius: 50%; background: var(--azul-escuro); color: var(--dourado-claro); font-size: 30px; font-weight: 800; }

@media (max-width: 768px) {
    .auth-shell { padding: 18px 12px; }
    .auth-card { padding: 26px 20px; border-radius: 14px; }
    .access-actions .btn { min-height: 42px; }
}