/* ─────────────────────────────────────────────────────────────────────────────
   CRM Portal — portal.css
   Usa CSS custom properties injetadas pelo Core:
   --crm-primary, --crm-secondary, --crm-bg, --crm-text
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Reset & Base ─────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Derivadas — sobrescritas se o core injetar outros valores */
    --hol-primary:        var(--crm-primary,   #4c616c);
    --hol-secondary:      var(--crm-secondary, #cfe6f2);
    --hol-bg:             var(--crm-bg,        #f0f0f1);
    --hol-text:           var(--crm-text,      #2b3437);

    /* Superfícies */
    --hol-surface:        #ffffff;
    --hol-surface-hover:  #f8f9fa;
    --hol-border:         rgba(0, 0, 0, 0.10);

    /* Status */
    --hol-danger:         #d32f2f;
    --hol-danger-bg:      #fdecea;
    --hol-success:        #2e7d32;
    --hol-success-bg:     #e8f5e9;

    /* Tipografia */
    --hol-font:           system-ui, -apple-system, BlinkMacSystemFont,
                          "Segoe UI", Roboto, sans-serif;
    --hol-font-size:      15px;
    --hol-line-height:    1.6;

    /* Espaçamento */
    --hol-space-xs:       0.25rem;
    --hol-space-sm:       0.5rem;
    --hol-space-md:       1rem;
    --hol-space-lg:       1.5rem;
    --hol-space-xl:       2rem;
    --hol-space-2xl:      3rem;

    /* Radius */
    --hol-radius-sm:      4px;
    --hol-radius-md:      8px;
    --hol-radius-lg:      12px;
    --hol-radius-full:    9999px;

    /* Sombras */
    --hol-shadow-sm:      0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --hol-shadow-md:      0 4px 12px rgba(0,0,0,.10);
    --hol-shadow-lg:      0 8px 24px rgba(0,0,0,.12);

    /* Transição */
    --hol-transition:     180ms ease;
}

html { font-size: var(--hol-font-size); }

body.hol-body {
    font-family:      var(--hol-font);
    font-size:        1rem;
    line-height:      var(--hol-line-height);
    color:            var(--hol-text);
    background-color: var(--hol-bg);
    -webkit-font-smoothing: antialiased;
    min-height:       100vh;
}

a { color: var(--hol-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

/* ── Layout ───────────────────────────────────────────────────────────────── */

.hol-container {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 var(--hol-space-md);
}

.hol-main {
    padding: var(--hol-space-xl) 0;
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.hol-header {
    background: var(--hol-surface);
    border-bottom: 1px solid var(--hol-border);
    box-shadow: var(--hol-shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
}

.hol-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}

.hol-header-brand {
    display: flex;
    align-items: center;
    gap: var(--hol-space-sm);
    text-decoration: none;
}

.hol-header-logo {
    height: 36px;
    width: auto;
}

.hol-header-brand-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--hol-primary);
}

.hol-header-actions {
    display: flex;
    align-items: center;
    gap: var(--hol-space-md);
}

/* ── Bell (Sininho) ───────────────────────────────────────────────────────── */

.hol-bell-wrap {
    position: relative;
}

.hol-bell {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--hol-text);
    padding: var(--hol-space-xs);
    border-radius: var(--hol-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--hol-transition), background var(--hol-transition);
    opacity: .7;
}

.hol-bell:hover {
    color: var(--hol-primary);
    background: var(--hol-surface-hover);
    opacity: 1;
}

.hol-bell-popup {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: var(--hol-surface);
    border: 1px solid var(--hol-border);
    border-radius: var(--hol-radius-md);
    box-shadow: var(--hol-shadow-md);
    padding: var(--hol-space-md);
    min-width: 220px;
    font-size: .875rem;
    color: var(--hol-text);
    z-index: 200;
}

.hol-bell-popup[hidden] { display: none; }

.hol-bell-empty {
    color: #888;
    text-align: center;
    padding: var(--hol-space-sm) 0;
}

.hol-bell-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #EF4444;
    color: #fff;
    font-size: .625rem;
    font-weight: 700;
    line-height: 1;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    pointer-events: none;
}

.hol-bell-badge[hidden] { display: none; }

.hol-bell-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
}

.hol-bell-item {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .5rem .25rem;
    border-bottom: 1px solid var(--hol-border);
    cursor: pointer;
    transition: background .15s;
    border-radius: 4px;
}

.hol-bell-item:last-child { border-bottom: none; }

.hol-bell-item:hover { background: var(--hol-surface-hover, rgba(0,0,0,.04)); }

.hol-bell-item--lida { opacity: .5; cursor: default; }

.hol-bell-item-title {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--hol-text);
    line-height: 1.35;
}

.hol-bell-item-date {
    font-size: .6875rem;
    color: #888;
}

.hol-bell-ver-todas {
    margin: .5rem 0 0;
    text-align: center;
    font-size: .8125rem;
    border-top: 1px solid var(--hol-border);
    padding-top: .5rem;
}

.hol-bell-ver-todas a {
    color: var(--crm-primary);
    text-decoration: none;
    font-weight: 600;
}

/* ── Lista de Notificações ────────────────────────────────────────────────── */

.hol-notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.hol-notif-list-item {
    background: var(--hol-surface);
    border: 1px solid var(--hol-border);
    border-radius: var(--hol-radius-md);
    transition: box-shadow .15s, border-color .15s;
}

.hol-notif-list-item:hover {
    border-color: var(--crm-primary);
    box-shadow: var(--hol-shadow-sm);
}

.hol-notif-list-item--lida { opacity: .7; }

.hol-notif-list-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1rem;
    text-decoration: none;
    color: inherit;
}

.hol-notif-unread-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--crm-primary);
}

.hol-notif-list-titulo {
    flex: 1;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--hol-text);
    line-height: 1.3;
}

.hol-notif-list-data {
    flex-shrink: 0;
    font-size: .75rem;
    color: #888;
    white-space: nowrap;
}

/* ── Detalhe da Notificação ───────────────────────────────────────────────── */

.hol-notif-detalhe {
    background: var(--hol-surface);
    border: 1px solid var(--hol-border);
    border-radius: var(--hol-radius-lg);
    overflow: hidden;
}

.hol-notif-detalhe-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--hol-border);
}

.hol-notif-detalhe-titulo {
    margin: 0 0 .375rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--hol-text);
    line-height: 1.3;
}

.hol-notif-detalhe-data {
    margin: 0;
    font-size: .8125rem;
    color: #888;
}

.hol-notif-detalhe-corpo {
    padding: 1.5rem;
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--hol-text);
}

.hol-notif-detalhe-corpo p  { margin: 0 0 1rem; }
.hol-notif-detalhe-corpo ul,
.hol-notif-detalhe-corpo ol { padding-left: 1.5rem; margin: 0 0 1rem; }
.hol-notif-detalhe-corpo a  { color: var(--crm-primary); }

.hol-notif-anexos {
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid var(--hol-border);
}

.hol-notif-anexos-titulo {
    font-size: .875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #888;
    margin: 0 0 .75rem;
}

.hol-notif-anexos-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.hol-notif-anexo-item .hol-btn {
    color: var(--hol-primary);
    border-color: var(--hol-primary);
    justify-content: flex-start;
}
.hol-notif-anexo-item .hol-btn:hover {
    background: rgba(0, 0, 0, .05);
    text-decoration: none;
}

/* Anexo item — layout com ícone */
.hol-notif-anexo-item {
    list-style: none;
}

.hol-notif-anexo-link {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .75rem;
    border: 1px solid var(--hol-border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--hol-text);
    background: var(--hol-surface, #fff);
    transition: background .15s ease, border-color .15s ease;
}

.hol-notif-anexo-link:hover {
    background: rgba(0,0,0,.04);
    border-color: var(--hol-primary);
    text-decoration: none;
}

.hol-notif-anexo-link--disabled {
    opacity: .5;
    cursor: not-allowed;
}

.hol-notif-anexo-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hol-notif-anexo-icon svg {
    width: 100%;
    height: 100%;
}

.hol-notif-anexo-icon--pdf  { color: #e53935; }
.hol-notif-anexo-icon--img  { color: #0097a7; }
.hol-notif-anexo-icon--file { color: #888; }

.hol-notif-anexo-nome {
    flex: 1;
    font-size: .875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hol-notif-anexo-baixar {
    flex-shrink: 0;
    font-size: .8rem;
    color: var(--hol-primary);
    opacity: .7;
}

/* ── User Info ────────────────────────────────────────────────────────────── */

.hol-user {
    display: flex;
    align-items: center;
    gap: var(--hol-space-sm);
}

.hol-user-name {
    font-size: .875rem;
    color: var(--hol-text);
    opacity: .8;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Botões ───────────────────────────────────────────────────────────────── */

.hol-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hol-space-xs);
    font-family: var(--hol-font);
    font-size: .875rem;
    font-weight: 600;
    height: 38px;
    padding: 0 var(--hol-space-md);
    border: 1px solid transparent;
    border-radius: var(--hol-radius-sm);
    cursor: pointer;
    transition: all var(--hol-transition);
    text-decoration: none;
    white-space: nowrap;
}

.hol-btn-primary {
    background: var(--hol-primary);
    color: #fff;
    border-color: var(--hol-primary);
}
.hol-btn-primary:hover {
    filter: brightness(1.1);
    text-decoration: none;
    color: #fff;
}

.hol-btn-ghost {
    background: transparent;
    color: var(--hol-text);
    border-color: var(--hol-border);
}
.hol-btn-ghost:hover {
    background: var(--hol-surface-hover);
    text-decoration: none;
}

.hol-btn-sm {
    font-size: .8125rem;
    height: 30px;
    padding: 0 var(--hol-space-sm);
}

.hol-btn-full { width: 100%; }

.hol-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ── Seção ────────────────────────────────────────────────────────────────── */

/* ── Saudação ─────────────────────────────────────────────────────────────── */

.hol-greeting {
    margin-bottom: var(--hol-space-lg);
}

.hol-greeting-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--hol-primary);
    display: block;
}

.hol-greeting-empresa {
    font-size: .8125rem;
    font-weight: 400;
    color: #8c9baa;
    margin: 3px 0 0 0;
}

.hol-footer-cnpj {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: .6875rem;
    color: #8c9baa;
    padding: 5px;
    background: var(--hol-bg);
    border-top: 1px solid rgba(0,0,0,.07);
    z-index: 100;
    letter-spacing: .04em;
}

/* ── Seção ────────────────────────────────────────────────────────────────── */

.hol-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--hol-space-lg);
}

.hol-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--hol-text);
}

.hol-link {
    font-size: .875rem;
    color: var(--hol-primary);
    font-weight: 500;
}

/* ── Grid de Holerites ────────────────────────────────────────────────────── */

.hol-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--hol-space-md);
}

/* ── Card ─────────────────────────────────────────────────────────────────── */

.hol-card {
    background: var(--hol-surface);
    border: 1px solid var(--hol-border);
    border-radius: var(--hol-radius-md);
    padding: var(--hol-space-md);
    display: flex;
    align-items: center;
    gap: var(--hol-space-md);
    box-shadow: var(--hol-shadow-sm);
    transition: box-shadow var(--hol-transition), border-color var(--hol-transition);
}

.hol-card:hover {
    box-shadow: var(--hol-shadow-md);
    border-color: var(--hol-secondary);
}

.hol-card-icon {
    flex-shrink: 0;
    color: var(--hol-primary);
    opacity: .7;
}

.hol-card-body {
    flex: 1;
    min-width: 0;
}

.hol-card-title {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--hol-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hol-card-empresa {
    font-size: .8125rem;
    color: #888;
    margin-top: 2px;
}

/* ── Estado vazio ─────────────────────────────────────────────────────────── */

.hol-empty {
    text-align: center;
    color: #888;
    padding: var(--hol-space-2xl) var(--hol-space-md);
    font-size: .9375rem;
    border: 2px dashed var(--hol-border);
    border-radius: var(--hol-radius-md);
}

/* ── Paginação ────────────────────────────────────────────────────────────── */

.hol-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hol-space-xs);
    margin-top: var(--hol-space-xl);
    justify-content: center;
}

.hol-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--hol-radius-sm);
    border: 1px solid var(--hol-border);
    background: var(--hol-surface);
    color: var(--hol-text);
    font-size: .875rem;
    font-weight: 500;
    transition: all var(--hol-transition);
    text-decoration: none;
}

.hol-page-btn:hover {
    border-color: var(--hol-primary);
    color: var(--hol-primary);
    text-decoration: none;
}

.hol-page-btn--active {
    background: var(--hol-primary);
    border-color: var(--hol-primary);
    color: #fff;
    font-weight: 700;
}

/* ── Login ────────────────────────────────────────────────────────────────── */

.hol-page-login.hol-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--hol-space-lg);
}

.hol-login-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hol-login-box {
    background: var(--hol-surface);
    border: 1px solid var(--hol-border);
    border-radius: var(--hol-radius-lg);
    box-shadow: var(--hol-shadow-lg);
    padding: var(--hol-space-xl);
    width: 100%;
    max-width: 400px;
}

.hol-login-brand {
    text-align: center;
    margin-bottom: var(--hol-space-xl);
}

.hol-login-logo {
    max-height: 60px;
    margin: 0 auto var(--hol-space-sm);
}

.hol-login-logo-text {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--hol-primary);
    margin-bottom: var(--hol-space-xs);
}

.hol-login-subtitle {
    font-size: .875rem;
    color: #888;
}

/* ── Formulário ───────────────────────────────────────────────────────────── */

.hol-form { display: flex; flex-direction: column; gap: var(--hol-space-md); }

.hol-field { display: flex; flex-direction: column; gap: var(--hol-space-xs); }

.hol-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--hol-text);
    opacity: .7;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.hol-input {
    font-family: var(--hol-font);
    font-size: .9375rem;
    color: var(--hol-text);
    background: var(--hol-bg);
    border: 1px solid var(--hol-border);
    border-radius: var(--hol-radius-sm);
    padding: .625rem var(--hol-space-md);
    transition: border-color var(--hol-transition), box-shadow var(--hol-transition);
    width: 100%;
    outline: none;
}

.hol-input:focus {
    border-color: var(--hol-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hol-primary) 15%, transparent);
}

.hol-input::placeholder { color: #aaa; }

/* ── Alertas ──────────────────────────────────────────────────────────────── */

.hol-alert {
    padding: var(--hol-space-sm) var(--hol-space-md);
    border-radius: var(--hol-radius-sm);
    border-left: 4px solid;
    font-size: .875rem;
    line-height: 1.5;
}

.hol-alert-danger {
    background: var(--hol-danger-bg);
    border-color: var(--hol-danger);
    color: var(--hol-danger);
}

/* ── Aviso de sessão ──────────────────────────────────────────────────────── */

.hol-session-warning {
    position: fixed;
    bottom: var(--hol-space-md);
    right: var(--hol-space-md);
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: var(--hol-radius-md);
    padding: var(--hol-space-sm) var(--hol-space-md);
    font-size: .875rem;
    color: #856404;
    box-shadow: var(--hol-shadow-md);
    z-index: 1000;
    animation: hol-slide-in .25s ease;
}

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

/* ── Responsivo ───────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .hol-container { padding: 0 var(--hol-space-sm); }
    .hol-main { padding: var(--hol-space-lg) 0 2.5rem; }
    .hol-header-inner { height: 52px; }
    .hol-user-name { display: none; }
    .hol-grid { grid-template-columns: 1fr; }
    .hol-login-box { padding: var(--hol-space-lg); }
    .hol-card { flex-wrap: wrap; }
    .hol-greeting-text { font-size: calc(1.5rem - 3px); }
}

@media (max-width: 360px) {
    .hol-login-box { padding: var(--hol-space-md); }
}