/* ============================================================
   VELORA HUB — Grupo Ana Rosa
   Branding copiado de Engage (engage.grupoanarosa.org.br)
   ============================================================ */

:root {
    --sidebar-bg: #3A0F18;
    --sidebar-hover: #4E1722;
    --sidebar-active: #6B1F2E;
    --accent: #7B2030;
    --accent-hover: #631A27;
    --accent-light: rgba(123, 32, 48, 0.12);
    --gold: #C9A96E;
    --gold-hover: #B8964F;
    --burgundy: #7B2030;
    --content-bg: #f5f6f8;
    --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

body {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--content-bg);
    min-height: 100vh;
}
a { text-decoration: none; }

/* ============================================================
   LOGIN (copiado do Engage)
   ============================================================ */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4A1520 0%, #7B2030 40%, #5C1825 100%);
}
.login-card {
    width: 100%;
    max-width: 440px;
    border-radius: 1rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
}
.login-card .card-body { padding: 2.5rem; }
.login-brand { text-align: center; margin-bottom: 2rem; }

.login-brand .product-name {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.login-brand .product-name h3 {
    color: var(--accent); font-weight: 800; margin: 0;
    letter-spacing: 0.15em; text-transform: uppercase; font-size: 1.5rem;
}
.login-brand-icon { display: flex; align-items: center; gap: 2px; }
.login-brand-icon .bar {
    display: inline-block; border-radius: 3px; transform-origin: bottom center;
}
.login-brand-icon .bar-1 { width: 5px; height: 18px; background-color: var(--accent); transform: rotate(15deg); }
.login-brand-icon .bar-2 { width: 5px; height: 14px; background-color: var(--gold);    transform: rotate(-5deg); margin-left: -1px; }
.login-brand-icon .bar-3 { width: 5px; height: 20px; background-color: #1D4D66;        transform: rotate(10deg); margin-left: -1px; }

.login-brand p { color: #6c757d; font-size: 0.85rem; margin-top: 0.25rem; }

/* ============================================================
   HUB — grid de apps
   ============================================================ */
.hub-page { min-height: 100vh; display: flex; flex-direction: column; }

.hub-navbar {
    background: linear-gradient(135deg, #3A0F18 0%, #7B2030 100%);
    color: #fff; padding: 0.75rem 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.hub-brand {
    display: inline-flex; align-items: center; gap: 0.4rem;
    color: #fff; font-size: 1rem; letter-spacing: 0.15em;
}
.hub-user { color: rgba(255,255,255,0.9); font-size: 0.9rem; }

.hub-title {
    color: var(--burgundy); font-weight: 700; font-size: 2rem;
    letter-spacing: 0.01em;
}
.hub-subtitle { color: #6c757d; font-size: 1rem; }

.app-tile {
    display: flex; align-items: center; gap: 1rem;
    background: #fff; border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    box-shadow: var(--card-shadow);
    border-left: 4px solid var(--tile-color, var(--accent));
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    min-height: 100px;
}
.app-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.12);
    color: inherit;
}
.app-tile-icon {
    width: 56px; height: 56px; flex-shrink: 0;
    background: var(--tile-color, var(--accent));
    border-radius: 0.65rem;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.6rem;
}
.app-tile-body { flex: 1; min-width: 0; }
.app-tile-body h4 {
    margin: 0; font-size: 1.1rem; font-weight: 700;
    color: var(--tile-color, var(--burgundy));
}
.app-tile-body p {
    margin: 0.2rem 0 0; font-size: 0.85rem; color: #6c757d;
}
.app-tile-arrow {
    color: #adb5bd; font-size: 1.2rem;
    transition: transform 0.15s ease;
}
.app-tile:hover .app-tile-arrow {
    transform: translate(2px, -2px);
    color: var(--tile-color, var(--accent));
}

.hub-note {
    color: #8a8a8a; font-size: 0.8rem; max-width: 560px;
    margin-left: auto; margin-right: auto;
}
.hub-note i { color: var(--accent); }

.hub-footer {
    margin-top: auto; padding: 1.25rem;
    color: #999; font-size: 0.75rem;
}