/* ============================================================
   APP.CSS — Sistema Pena Branca
   Paleta Claude (parchment + terracotta) + Source Serif 4 + Inter
   Único CSS da aplicação. Carregado depois do Bootstrap.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;500;600&family=Inter:wght@400;500;600;700;800&display=swap');

/* ─────────────── Tokens ─────────────── */
:root {
    /* Surfaces */
    --c-parchment:    #f5f4ed;
    --c-ivory:        #faf9f5;
    --c-warm-sand:    #e8e6dc;
    --c-near-black:   #141413;
    --c-dark-surface: #30302e;

    /* Brand */
    --c-terracotta:      #c96442;
    --c-terracotta-dark: #b85838;
    --c-coral:           #d97757;

    /* Text */
    --c-charcoal:    #4d4c48;
    --c-olive:       #5e5d59;
    --c-stone:       #87867f;
    --c-warm-silver: #b0aea5;

    /* Borders */
    --c-border-cream: #f0eee6;
    --c-border-warm:  #e8e6dc;
    --c-ring-warm:    #d1cfc5;
    --c-focus-blue:   #3898ec;

    /* Fonts */
    --c-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --c-sans:  'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

    /* Tokens compartilhados (landing + app) */
    --text:       var(--c-near-black);
    --text-dim:   var(--c-olive);
    --text-faint: var(--c-stone);
    --gold:       var(--c-terracotta);

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;

    --ease: cubic-bezier(.22, .61, .36, 1);

    /* Override de variáveis Bootstrap 5.3 */
    --bs-body-bg:           var(--c-parchment);
    --bs-body-color:        var(--c-near-black);
    --bs-body-font-family:  var(--c-sans);
    --bs-link-color:        var(--c-near-black);
    --bs-link-color-rgb:    20, 20, 19;
    --bs-link-hover-color:  var(--c-terracotta);
    --bs-border-color:      var(--c-border-cream);
    --bs-border-radius:     12px;
    --bs-border-radius-sm:  8px;
    --bs-border-radius-lg:  16px;
    --bs-primary:           var(--c-terracotta);
    --bs-primary-rgb:       201, 100, 66;
}

/* ─────────────── Reset / Base ─────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--c-sans);
    background:  var(--c-parchment);
    color:       var(--c-near-black);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Tipografia editorial — serif para títulos */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--c-serif);
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--c-near-black);
}

a       { color: var(--c-near-black); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--c-terracotta); }

::selection { background: rgba(201, 100, 66, .18); color: var(--c-near-black); }

/* ─────────────── Botões (Bootstrap) ─────────────── */
.btn {
    font-family: var(--c-sans);
    font-weight: 500;
    border-radius: 12px;
    text-transform: none;
    letter-spacing: 0;
    transition: box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.btn-lg { padding: 14px 24px; font-size: 16px; border-radius: 14px; }

/* btn-primary = terracotta da marca */
.btn-primary {
    --bs-btn-bg:                var(--c-terracotta);
    --bs-btn-border-color:      var(--c-terracotta);
    --bs-btn-color:             var(--c-ivory);
    --bs-btn-hover-bg:          var(--c-terracotta-dark);
    --bs-btn-hover-border-color:var(--c-terracotta-dark);
    --bs-btn-hover-color:       var(--c-ivory);
    --bs-btn-active-bg:         var(--c-terracotta-dark);
    --bs-btn-active-border-color:var(--c-terracotta-dark);
}
.btn-outline-primary {
    --bs-btn-color:             var(--c-terracotta);
    --bs-btn-border-color:      var(--c-terracotta);
    --bs-btn-hover-bg:          var(--c-terracotta);
    --bs-btn-hover-border-color:var(--c-terracotta);
    --bs-btn-hover-color:       var(--c-ivory);
}

/* Botões "ghost" (usados na landing) */
.btn-ghost {
    background: transparent;
    color: var(--c-near-black);
    border: 1px solid var(--c-border-warm);
}
.btn-ghost:hover {
    background: var(--c-ivory);
    color: var(--c-near-black);
    border-color: var(--c-ring-warm);
}

/* Escala tonal — degradê do claro (areia) ao escuro (bronze profundo) */
[class*="btn-tone-"] {
    border: 1px solid transparent;
    font-weight: 500;
    transition: background-color .2s var(--ease), border-color .2s var(--ease),
                transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-tone-1 { background: #e8e6dc; color: var(--c-charcoal); border-color: #d8d4c5; }
.btn-tone-2 { background: #efc9ad; color: var(--c-charcoal); border-color: #e0b394; }
.btn-tone-3 { background: #e89679; color: var(--c-charcoal); border-color: #d68363; }
.btn-tone-4 { background: #d97757; color: var(--c-ivory);   border-color: #cc6a4a; }
.btn-tone-5 { background: #d06947; color: var(--c-ivory);   border-color: #c25c3a; }
.btn-tone-6 { background: #c96442; color: var(--c-ivory);   border-color: #b85838; }
.btn-tone-7 { background: #b85838; color: var(--c-ivory);   border-color: #a14b2e; }
.btn-tone-8 { background: #6e3925; color: var(--c-ivory);   border-color: #5a2d1d; }
.btn-tone-9 { background: #4d2818; color: var(--c-ivory);   border-color: #3a1d10; }

/* Hover: sobe um tom na escala (mantém texto sólido, sem filter brightness) */
[class*="btn-tone-"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}
.btn-tone-1:hover { background: #d8d4c5; border-color: #c8c4b5; color: var(--c-charcoal); }
.btn-tone-2:hover { background: #e89679; border-color: #d68363; color: var(--c-charcoal); }
.btn-tone-3:hover { background: #d97757; border-color: #cc6a4a; color: var(--c-ivory); }
.btn-tone-4:hover { background: #d06947; border-color: #c25c3a; color: var(--c-ivory); }
.btn-tone-5:hover { background: #c96442; border-color: #b85838; color: var(--c-ivory); }
.btn-tone-6:hover { background: #b85838; border-color: #a14b2e; color: var(--c-ivory); }
.btn-tone-7:hover { background: #6e3925; border-color: #5a2d1d; color: var(--c-ivory); }
.btn-tone-8:hover { background: #4d2818; border-color: #3a1d10; color: var(--c-ivory); }
.btn-tone-9:hover { background: #3a1d10; border-color: #2a1408; color: var(--c-ivory); }

/* ─────────────── Inputs / Forms ─────────────── */
.form-control, .form-select, input[type="text"], input[type="email"],
input[type="password"], input[type="date"], input[type="time"],
input[type="number"], input[type="tel"], input[type="search"], textarea, select {
    font-family: var(--c-sans);
    background: var(--c-ivory);
    color: var(--c-near-black);
    border: 1px solid var(--c-border-warm);
    border-radius: 12px;
    padding: 11px 14px;
    transition: border-color .2s, box-shadow .2s;
}
.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--c-focus-blue);
    box-shadow: 0 0 0 3px rgba(56, 152, 236, .18);
}
.form-control::placeholder, input::placeholder, textarea::placeholder {
    color: var(--c-stone);
}
.form-label, label {
    color: var(--c-charcoal);
    font-family: var(--c-sans);
    font-weight: 500;
}
.form-control[readonly] { background: var(--c-warm-sand); }

/* ─────────────── Cards ─────────────── */
.card {
    background: var(--c-ivory);
    border: 1px solid var(--c-border-cream);
    border-radius: 16px;
    box-shadow: rgba(0, 0, 0, 0.04) 0 4px 24px;
    color: var(--c-near-black);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--c-border-cream);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}
.card-footer {
    background: transparent;
    border-top: 1px solid var(--c-border-cream);
}
.card h1, .card h2, .card h3, .card h4 {
    font-family: var(--c-serif);
    font-weight: 500;
    color: var(--c-near-black);
}

/* ─────────────── Modals (Bootstrap) ─────────────── */
/* IMPORTANTE: NÃO mexer em .modal nem .modal-dialog (Bootstrap precisa deles transparentes) */
.modal-content {
    background: var(--c-ivory);
    border: 1px solid var(--c-border-cream);
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, .12) 0 24px 64px;
    color: var(--c-near-black);
}
.modal-header {
    background: transparent;
    border-bottom: 1px solid var(--c-border-cream);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.modal-footer {
    background: transparent;
    border-top: 1px solid var(--c-border-cream);
}
.modal-backdrop.show { opacity: .5; }

/* ─────────────── Tabelas ─────────────── */
.table {
    --bs-table-bg: transparent;
    background: var(--c-ivory);
    color: var(--c-near-black);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--c-border-cream);
    border-collapse: separate;
    border-spacing: 0;
}
.table > :not(caption) > * > * {
    padding: 12px 14px;
    border-bottom-color: var(--c-border-cream);
}
.table thead { background: var(--c-warm-sand); }
.table th {
    color: var(--c-charcoal);
    font-family: var(--c-sans);
    font-weight: 600;
    letter-spacing: .12px;
    text-transform: uppercase;
    font-size: 12px;
}
.table-hover tbody tr:hover > * {
    background-color: var(--c-parchment);
}

/* ─────────────── Alerts ─────────────── */
.alert {
    border-radius: 12px;
    padding: 14px 18px;
    font-family: var(--c-sans);
}

/* ─────────────── Tabs (Bootstrap nav-tabs) ─────────────── */
.nav-tabs {
    border-bottom: 1px solid var(--c-border-cream);
}
.nav-tabs .nav-link {
    color: var(--c-olive);
    font-weight: 500;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}
.nav-tabs .nav-link:hover { color: var(--c-near-black); }
.nav-tabs .nav-link.active {
    color: var(--c-near-black);
    background: transparent;
    border-bottom-color: var(--c-terracotta);
}

/* ─────────────── Accordion (Bootstrap) ─────────────── */
.accordion-item {
    background: var(--c-ivory);
    border: 1px solid var(--c-border-cream);
}
.accordion-button {
    background: transparent;
    color: var(--c-near-black);
    font-weight: 500;
}
.accordion-button:not(.collapsed) {
    background: var(--c-warm-sand);
    color: var(--c-near-black);
    box-shadow: none;
}
.accordion-button:focus { box-shadow: 0 0 0 3px rgba(56,152,236,.18); }

/* ─────────────── Offcanvas ─────────────── */
.offcanvas { width: 100% !important; }
@media (min-width: 576px) { .offcanvas { width: 400px !important; } }
.offcanvas {
    background: var(--c-ivory);
    color: var(--c-near-black);
}
.offcanvas-header {
    background: var(--c-near-black);
    color: var(--c-ivory);
    border-bottom: 1px solid var(--c-dark-surface);
}
.offcanvas-header .btn-close-white { filter: invert(1) brightness(2); }

/* ─────────────── Avatares ─────────────── */
.avatar-usuario, .header-avatar {
    background: var(--c-near-black);
    color: var(--c-ivory);
    border-radius: 50%;
    object-fit: cover;
}

/* ============================================================
   NAV — Compartilhado entre landing e área logada
   ============================================================ */
.nav {
    position: sticky; top: 0; z-index: 1030;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: rgba(245, 244, 237, 0.85);
    border-bottom: 1px solid var(--c-border-cream);
}
.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--c-near-black);
}
.brand-mark {
    width: 34px; height: 34px;
    border-radius: 8px;
    background: var(--c-near-black);
    color: var(--c-ivory);
    display: grid; place-items: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}
.brand-mark i { font-size: 16px; }
.brand-name {
    font-family: var(--c-serif);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.1;
    color: var(--c-near-black);
}
.brand-name small {
    display: block;
    font-size: 11px;
    color: var(--c-stone);
    font-weight: 400;
    font-family: var(--c-sans);
}
@media (max-width: 380px) {
    .brand-name small { display: none; }
}

/* ─────────────── Bloco do usuário (área logada) ─────────────── */
.nav-user { display: flex; align-items: center; gap: 10px; }

.nav-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--c-warm-sand);
    flex-shrink: 0;
}
.nav-user-info {
    display: none;
    flex-direction: column;
    line-height: 1.15;
    max-width: 180px;
}
.nav-user-info .nav-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-near-black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-user-info .nav-user-meta {
    font-size: 11px;
    color: var(--c-stone);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-icon-btn {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--c-warm-sand);
    border: 1px solid var(--c-ring-warm);
    color: var(--c-charcoal);
    cursor: pointer;
    position: relative;
    display: grid; place-items: center;
    transition: all .2s var(--ease);
    flex-shrink: 0;
}
.nav-icon-btn:hover {
    background: var(--c-terracotta);
    border-color: var(--c-terracotta);
    color: var(--c-ivory);
}
.nav-icon-btn.danger:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}
.nav-badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 18px; height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--c-terracotta);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: grid; place-items: center;
}
@media (min-width: 540px) {
    .nav-user-info { display: flex; }
}

/* ─────────────── Nav CTA (landing) ─────────────── */
.nav-cta {
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--c-terracotta);
    color: var(--c-ivory);
    font-weight: 500;
    font-size: 13px;
    border: none;
    cursor: pointer;
    transition: background .2s, box-shadow .2s var(--ease);
}
.nav-cta:hover {
    background: var(--c-terracotta-dark);
    box-shadow: 0 4px 14px rgba(201, 100, 66, .3);
    color: var(--c-ivory);
}

/* ============================================================
   LANDING (index.php)
   ============================================================ */
.ambient {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(circle at 15% 10%, rgba(201,100,66,.12), transparent 45%),
      radial-gradient(circle at 85% 85%, rgba(201,100,66,.06), transparent 50%),
      var(--c-parchment);
}

.hero {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 22px 32px;
    text-align: center;
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(201, 100, 66, .08);
    color: var(--c-terracotta);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .4px;
    border: 1px solid rgba(201, 100, 66, .2);
    margin-bottom: 22px;
    font-family: var(--c-sans);
    text-transform: uppercase;
}
.eyebrow .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--c-terracotta);
    box-shadow: 0 0 10px var(--c-terracotta);
}
.hero h1 {
    font-size: clamp(1.8rem, 5.5vw, 3.2rem);
    font-weight: 500;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: var(--c-near-black);
    margin-bottom: 10px;
    font-family: var(--c-serif);
}
.hero h1 .gold { color: var(--c-terracotta); }
.hero p.lead {
    max-width: 520px;
    margin: 0 auto 28px;
    color: var(--c-olive);
    font-size: clamp(.95rem, 2vw, 1.05rem);
    font-family: var(--c-sans);
}

.portais {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr 1fr;
    max-width: 680px;
    margin: 0 auto;
}
.portal {
    position: relative;
    overflow: hidden;
    padding: 22px 18px;
    background: var(--c-ivory);
    border: 1px solid var(--c-border-cream);
    border-radius: 20px;
    cursor: pointer;
    text-align: center;
    color: var(--c-near-black);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-height: 160px;
    justify-content: center;
    transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.portal:hover {
    transform: translateY(-4px);
    border-color: var(--c-ring-warm);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .06);
}
.portal-icon {
    width: 54px; height: 54px;
    border-radius: 14px;
    background: var(--c-terracotta);
    color: var(--c-ivory);
    font-size: 22px;
    display: grid; place-items: center;
    box-shadow: 0 8px 20px rgba(201, 100, 66, .22);
}
.portal h3 {
    font-size: 1rem;
    line-height: 1.25;
    margin: 0;
    font-family: var(--c-serif);
}
.portal-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--c-terracotta);
    font-weight: 500;
    font-size: 12px;
}
.portal-go i { transition: transform .2s var(--ease); }
.portal:hover .portal-go i { transform: translateX(4px); }

footer {
    border-top: 1px solid var(--c-border-cream);
    padding: 30px 22px;
    text-align: center;
    color: var(--c-stone);
    font-size: 13px;
}
footer strong { color: var(--c-charcoal); font-weight: 500; }

/* ============================================================
   MODAL DE LOGIN — escopo .modal-login (NÃO afeta modais Bootstrap)
   ============================================================ */
.modal-login {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 19, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 100;
    padding: 20px;
    align-items: center;
    justify-content: center;
    animation: fadeIn .18s var(--ease);
}
.modal-login.open { display: flex; }

.modal-login .modal-content {
    width: 100%;
    max-width: 420px;
    background: var(--c-ivory);
    border: 1px solid var(--c-border-cream);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .18);
    animation: slideUp .22s var(--ease);
    color: var(--c-near-black);
}
.modal-login .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--c-border-cream);
    background: transparent;
}
.modal-login .modal-header h2 {
    font-size: 1.15rem;
    font-weight: 500;
    font-family: var(--c-serif);
}
.modal-login .modal-header .close {
    background: transparent;
    border: none;
    color: var(--c-stone);
    font-size: 26px;
    cursor: pointer;
    line-height: 1;
}
.modal-login .modal-header .close:hover { color: var(--c-terracotta); }
.modal-login .modal-body { padding: 22px; }

.modal-login .form-group { margin-bottom: 16px; }
.modal-login .form-group label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--c-charcoal);
    margin-bottom: 6px;
    letter-spacing: .3px;
    text-transform: uppercase;
    font-family: var(--c-sans);
}
.modal-login .form-group input {
    width: 100%;
    padding: 12px 14px;
    background: var(--c-ivory);
    border: 1px solid var(--c-border-warm);
    border-radius: 10px;
    color: var(--c-near-black);
    font-size: 14px;
}
.modal-login .password-wrapper { position: relative; }
.modal-login .password-wrapper input { padding-right: 42px; }
.modal-login .password-wrapper i {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-stone);
    cursor: pointer;
    font-size: 14px;
}
.modal-login .password-wrapper i:hover { color: var(--c-terracotta); }

.modal-login .btn-login {
    width: 100%;
    padding: 13px;
    margin-top: 4px;
    background: var(--c-terracotta);
    color: var(--c-ivory);
    font-weight: 500;
    font-size: 14px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s, box-shadow .2s var(--ease);
}
.modal-login .btn-login:hover {
    background: var(--c-terracotta-dark);
    box-shadow: 0 8px 20px rgba(201, 100, 66, .25);
}
.modal-login .esqueci-senha {
    display: block;
    text-align: center;
    margin-top: 14px;
    color: var(--c-stone);
    font-size: 13px;
    text-decoration: none;
}
.modal-login .esqueci-senha:hover { color: var(--c-terracotta); }
.modal-login .error-message {
    display: none;
    padding: 10px 14px;
    background: rgba(181, 51, 51, .08);
    color: #b53333;
    border: 1px solid rgba(181, 51, 51, .25);
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 14px;
}
.modal-login .error-message.show { display: block; }

@keyframes fadeIn  { from { opacity: 0; }                      to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============================================================
   RESPONSIVO (landing)
   ============================================================ */
@media (min-width: 960px) {
    .portais { grid-template-columns: repeat(4, 1fr); max-width: 1100px; }
    .hero    { padding: 64px 22px 48px; }
}
@media (max-width: 360px) {
    .portais { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}