/* DATABIZ: azul profundo, azul eléctrico, lima y gris frío. */
:root {
  --ink: #090d29;
  --muted: #656a80;
  --line: #e1e3ee;
  --green: #1800ff;
  --cream: #f4f5fa;
  --sidebar: #160b3c;
  --lime: #c1e719;
}
.sidebar { color: #f4f5fa; }
.logo { letter-spacing: 1px; font-weight: 800; }
.logo::after { content: ''; display: inline-block; width: 7px; height: 20px; margin-left: 8px; background: var(--lime); border-radius: 1px; }
.workspace-icon, .avatar { background: var(--lime); color: var(--sidebar); }
.workspace small, .profile small { color: #b6b2cd; }
.nav-label { color: #aba6c6; }
nav a { color: #cbc7de; }
nav a.active, nav a.active:hover { background: var(--lime); color: var(--sidebar); }
.nav-count { background: var(--sidebar); color: white; }
.help-card { background: #261a50; }
.help-card p { color: #c2bdd7; }
.help-card a { color: var(--lime); }
.profile { color: #f4f5fa; }
.topbar { background: #fff; }
.eyebrow, .auth .eyebrow { color: #676082; }
.hello { color: #849f00; }
.button { background: var(--green); border-color: var(--green); }
.button.secondary { background: #fff; border-color: #d9dbea; color: #30264f; }
.stat > span, .stat i { color: #66617b; }
.stat strong small { color: #656a80; }
.stat.accent { background: #f1f7d8; border-color: #dce8a9; }
progress, progress::-webkit-progress-bar { background: #eff0f7; }
progress::-webkit-progress-value { background: #1800ff; }
progress::-moz-progress-bar { background: #1800ff; }
.project-bar:nth-child(2) progress::-webkit-progress-value { background: #7362ff; }
.project-bar:nth-child(3) progress::-webkit-progress-value { background: #c1e719; }
.project-bar:nth-child(2) progress::-moz-progress-bar { background: #7362ff; }
.project-bar:nth-child(3) progress::-moz-progress-bar { background: #c1e719; }
th { color: #64677d; background: #f8f8fc; }
td { border-bottom-color: #edeef5; }
td small { color: #6d7085; }
.badge.draft { background: #eff0f7; color: #656078; }
.badge.approved, .badge.sent { background: #edf5cf; color: #4b6111; }
.badge.pending { background: #fff4d9; color: #856214; }
.badge.rejected { background: #fbeae5; color: #984b34; }
.table-footer, .page-footer { color: #71758a; }
details summary { color: #3323b7; }
label { color: #49465f; }
input, select, textarea { border-color: #dcddeb; color: var(--ink); }
input:focus, select:focus, textarea:focus { outline-color: #7362ff; }
.notice, .duration-preview { background: #f0eefc; border-color: #e0daf6; color: #554577; }
.success { background: #eef6d4; color: #4b6111; }
.demo-ribbon { border-color: #d4d2e5; color: #717087; }
.auth { background: var(--cream); }
.auth-story h1 { color: var(--ink); }
.story-steps { color: #44376a; }
.login-card { box-shadow: 0 12px 50px #160b3c0c; }
.activity-form-title { padding: 15px 24px; background: var(--sidebar); color: white; }
.activity-form-title h2 { margin: 0; }
.catalog-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.catalog-message, .form-hint { font-size: 12px; color: var(--muted); }
.catalog-message:empty { display: none; }
.form-hint { margin: 14px 0 0; }
.lime-button { background: var(--lime); border-color: var(--lime); color: var(--sidebar); }
button:disabled { opacity: .5; cursor: not-allowed; }
.catalog-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px; padding: 0 24px 24px; }
.catalog-columns h3 { font-size: 16px; }
.catalog-members { padding: 0 24px; font-size: 12px; }
.catalog-add { border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.catalog-option { border-bottom: 1px solid var(--line); padding: 16px 0; }
.catalog-option label { margin-bottom: 9px; }
.catalog-option-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.checkbox-label { display: flex; align-items: center; gap: 8px; }
.checkbox-label input { width: 16px; min-height: 16px; margin: 0; accent-color: var(--green); }
.activity-detail { white-space: normal; overflow-wrap: anywhere; }
.project-main-form { max-width: 1000px; }
.project-list { margin-top: 24px; }
.project-list td small { max-width: 220px; white-space: normal; }
.member-assign { display: flex; gap: 6px; margin-top: 9px; min-width: 210px; }
.member-assign select { margin: 0; min-height: 34px; padding: 7px; font-size: 11px; }
.member-assign .button { min-height: 34px; padding: 7px 9px; font-size: 10px; }
@media(max-width:800px) { .catalog-grid, .catalog-columns { grid-template-columns: 1fr; gap: 0; } }
/* ============================================================
   FILTRO DE FECHAS - BLANCO, COMPACTO Y ALINEADO
   ============================================================ */

.payroll-date-filters {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 14px !important;

    padding: 18px 28px 22px !important;

    background: #ffffff !important;
    border-top: 1px solid #e4e7eb !important;
    border-bottom: 1px solid #e4e7eb !important;
}

/* Desde / Hasta */
.payroll-date-filters label {
    flex: 0 0 290px !important;
    width: 290px !important;
    max-width: 290px !important;

    margin: 0 !important;

    color: #315847 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

/* Campos de fecha */
.payroll-date-filters input[type="date"] {
    width: 290px !important;
    min-width: 290px !important;
    max-width: 290px !important;
    height: 46px !important;

    margin-top: 6px !important;
    padding: 9px 14px !important;

    background: #f8fbf8 !important;
    border: 1px solid #b9d1bf !important;
    border-radius: 9px !important;

    color: #203c31 !important;
    font-size: 13px !important;
}

/* Campo activo */
.payroll-date-filters input[type="date"]:focus {
    background: #ffffff !important;
    border-color: #55946d !important;
    outline: 3px solid rgba(85, 148, 109, .13) !important;
}

/* Botón Aplicar */
.payroll-date-filters button.button {
    flex: 0 0 150px !important;

    width: 150px !important;
    min-width: 150px !important;
    height: 46px !important;
    min-height: 46px !important;

    margin: 0 !important;
    padding: 10px 18px !important;

    background: #16734f !important;
    border: 1px solid #16734f !important;
    border-radius: 9px !important;

    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.payroll-date-filters button.button:hover {
    background: #105e40 !important;
    border-color: #105e40 !important;
}

/* Responsive */
@media (max-width: 800px) {
    .payroll-date-filters {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 16px 20px !important;
    }

    .payroll-date-filters label,
    .payroll-date-filters input[type="date"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .payroll-date-filters button.button {
        width: 100% !important;
    }
}
/* AJUSTES FINALES REPORTE DE RECARGOS */

/* Descargar Excel igual al botón Aplicar */
.payroll-modern button#download-surcharge-report {
    background: #16734f !important;
    border-color: #16734f !important;
    color: #ffffff !important;
}

.payroll-modern button#download-surcharge-report:hover {
    background: #105e40 !important;
    border-color: #105e40 !important;
}

/* Compactar un poco el encabezado */
.payroll-modern-heading {
    padding-top: 22px !important;
    padding-bottom: 18px !important;
}

/* Fechas un poco más cerca del encabezado */
.payroll-date-filters {
    padding-top: 16px !important;
    padding-bottom: 18px !important;
}

/* Mantener verde solamente en filtros de columnas */
.payroll-modern .excel-report th {
    background: #e4f0e4 !important;
}

.payroll-modern .column-filter {
    background: #f8fcf7 !important;
}

/* Datos blancos */
.payroll-modern .excel-report tbody td {
    background: #ffffff !important;
}
/* ==========================================================
   CONSOLIDADO TOTAL DE RECARGOS - FORZAR TODO EN PANTALLA
   ========================================================== */

body .payroll-modern .payroll-summary-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

body .payroll-modern table.excel-report.payroll-summary-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed !important;
}

body .payroll-modern table.excel-report.payroll-summary-table th,
body .payroll-modern table.excel-report.payroll-summary-table td {
    min-width: 0 !important;
    max-width: none !important;
    width: auto;
    padding: 10px 6px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Integrante */
body .payroll-modern table.payroll-summary-table th:nth-child(1),
body .payroll-modern table.payroll-summary-table td:nth-child(1) {
    width: 18% !important;
}

/* Documento */
body .payroll-modern table.payroll-summary-table th:nth-child(2),
body .payroll-modern table.payroll-summary-table td:nth-child(2) {
    width: 12% !important;
}

/* Reg. */
body .payroll-modern table.payroll-summary-table th:nth-child(3),
body .payroll-modern table.payroll-summary-table td:nth-child(3) {
    width: 6% !important;
}

/* RN */
body .payroll-modern table.payroll-summary-table th:nth-child(4),
body .payroll-modern table.payroll-summary-table td:nth-child(4) {
    width: 9% !important;
}

/* RDF */
body .payroll-modern table.payroll-summary-table th:nth-child(5),
body .payroll-modern table.payroll-summary-table td:nth-child(5) {
    width: 9% !important;
}

/* RNF */
body .payroll-modern table.payroll-summary-table th:nth-child(6),
body .payroll-modern table.payroll-summary-table td:nth-child(6) {
    width: 10% !important;
}

/* Total h */
body .payroll-modern table.payroll-summary-table th:nth-child(7),
body .payroll-modern table.payroll-summary-table td:nth-child(7) {
    width: 10% !important;
}

/* Total rec. */
body .payroll-modern table.payroll-summary-table th:nth-child(8),
body .payroll-modern table.payroll-summary-table td:nth-child(8) {
    width: 13% !important;
}

/* Sin rec. */
body .payroll-modern table.payroll-summary-table th:nth-child(9),
body .payroll-modern table.payroll-summary-table td:nth-child(9) {
    width: 13% !important;
}

/* ============================================================
   REPORTE DE HORAS - COMPACTO
   ============================================================ */

.hours-report-compact {
    width: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(18,28,58,.05);
}

.hours-compact-toolbar {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}

.hours-compact-filters {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin: 0;
}

.hours-compact-filters label {
    display: grid;
    gap: 4px;
    margin: 0;
}

.hours-compact-filters label span {
    font-size: 10px;
    font-weight: 800;
    color: var(--muted);
}

.hours-compact-filters input[type="date"] {
    width: 150px;
    height: 36px;
    min-height: 36px;
    margin: 0;
    padding: 6px 9px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 12px;
}

.hours-compact-filters .button {
    width: auto;
    min-width: 82px;
    height: 36px;
    min-height: 36px;
    margin: 0;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 11px;
}

.hours-compact-kpis {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    border-bottom: 1px solid var(--line);
}

.hours-compact-kpis article {
    min-width: 0;
    padding: 14px 18px;
    background: #fff;
    border-right: 1px solid var(--line);
}

.hours-compact-kpis article:last-child {
    border-right: 0;
}

.hours-compact-kpis article.is-extra {
    background: #f5f9df;
}

.hours-compact-kpis span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.hours-compact-kpis strong {
    color: var(--ink);
    font-size: 21px;
    line-height: 1;
}

.hours-compact-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.hours-compact-table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
    table-layout: auto;
}

.hours-compact-table th {
    padding: 10px 14px;
    background: #f7f8fc;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .35px;
    white-space: nowrap;
}

.hours-compact-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #edf0f5;
    color: var(--ink);
    font-size: 12px;
    vertical-align: middle;
    white-space: nowrap;
}

.hours-person-row:hover td {
    background: #fbfcff;
}

.hours-compact-table th:nth-child(1),
.hours-compact-table td:nth-child(1) {
    width: 22%;
}

.hours-compact-table th:nth-child(2),
.hours-compact-table td:nth-child(2) {
    width: 22%;
}

.hours-schedule-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border-radius: 7px;
    background: #f1f2f7;
    color: #4e5368;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.hours-balance {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.hours-balance.positive {
    background: #eef6cc;
    color: #526900;
}

.hours-balance.negative {
    background: #fff0e8;
    color: #a64c16;
}

.hours-balance.neutral {
    background: #eef1f6;
    color: #6c7284;
}

.hours-detail-toggle {
    appearance: none;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #d9ddeb;
    border-radius: 7px;
    color: #3323b7;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.hours-detail-toggle:hover {
    background: #f5f4ff;
    border-color: #c9c4ef;
}

.hours-detail-row[hidden] {
    display: none;
}

.hours-detail-row > td {
    padding: 0 !important;
    background: #f7f8fc !important;
    white-space: normal !important;
}

.hours-detail-panel {
    width: 100%;
    box-sizing: border-box;
    padding: 18px 20px 22px;
    background: #f7f8fc;
    border-bottom: 1px solid var(--line);
}

.hours-detail-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e5ed;
}

.hours-detail-title strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.hours-detail-title span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.hours-week-table {
    width: 100% !important;
    max-width: none !important;
    min-width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}

.hours-week-table th {
    padding: 11px 16px !important;
    background: #f0f2f7 !important;
    border-bottom: 1px solid var(--line);
    color: #666c80;
    font-size: 9px !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .45px;
    white-space: nowrap;
}

.hours-week-table td {
    padding: 12px 16px !important;
    background: #fff;
    border-bottom: 1px solid #edf0f5;
    color: var(--ink);
    font-size: 11px !important;
    white-space: nowrap !important;
}

.hours-week-table tbody tr:last-child td {
    border-bottom: 0;
}

.hours-week-table tbody tr:hover td {
    background: #fafbfe;
}

.hours-week-table th:nth-child(1),
.hours-week-table td:nth-child(1) { width: 28%; }

.hours-week-table th:nth-child(2),
.hours-week-table td:nth-child(2) { width: 18%; }

.hours-week-table th:nth-child(3),
.hours-week-table td:nth-child(3) { width: 18%; }

.hours-week-table th:nth-child(4),
.hours-week-table td:nth-child(4) { width: 18%; }

.hours-week-table th:nth-child(5),
.hours-week-table td:nth-child(5) { width: 18%; }

.hours-week-table td:nth-child(4) {
    font-weight: 800;
}

/* ============================================================
   BIZCONNECT - LOGIN
   Mantiene el login en dos columnas y evita que el logo
   ensanche u oculte la tarjeta de acceso.
   ============================================================ */

body.auth {
    overflow-x: hidden;
}

body.auth .auth-layout {
    width: 100%;
    min-width: 0;
}

body.auth .auth-story,
body.auth .login-card {
    min-width: 0;
}

body.auth .auth-story {
    overflow: hidden;
}

body.auth .auth-brand {
    display: block;
    width: 100%;
    max-width: 380px;
    margin: 0 0 30px 0;
}

body.auth .auth-brand-logo {
    display: block !important;
    width: 320px !important;
    max-width: 320px !important;
    height: auto !important;
    object-fit: contain !important;
}

body.auth .auth-product-name {
    margin-top: 12px !important;

    color: #111111 !important;

    font-size: 27px !important;
    line-height: 1 !important;

    font-weight: 900 !important;

    letter-spacing: 6px !important;
    text-transform: uppercase !important;
}

body.auth .login-card {
    position: relative;
    z-index: 2;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 850px) {
    .hours-compact-kpis {
        grid-template-columns: repeat(2,1fr);
    }

    .hours-compact-kpis article:nth-child(2) {
        border-right: 0;
    }

    .hours-compact-kpis article:nth-child(-n+2) {
        border-bottom: 1px solid var(--line);
    }

    .hours-detail-panel {
        padding: 14px;
    }

    .hours-week-table {
        min-width: 650px !important;
    }
}

@media (max-width: 760px) {
    body.auth .auth-brand-logo {
        width: 155px !important;
        max-width: 155px !important;
    }
}

@media (max-width: 560px) {
    .hours-compact-filters {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .hours-compact-filters input[type="date"],
    .hours-compact-filters .button {
        width: 100%;
    }

    .hours-compact-kpis {
        grid-template-columns: 1fr 1fr;
    }
}
/* ============================================================
   BIZCONNECT - LOGO MENU LATERAL
   ============================================================ */

.sidebar .sidebar-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: 200px !important;
    max-width: 200px !important;

    margin: 18px auto 25px !important;
    padding: 0 !important;

    text-decoration: none !important;
    overflow: hidden !important;
}

.sidebar .sidebar-brand-logo {
    display: block !important;

    width: 170px !important;
    max-width: 170px !important;

    height: 52px !important;
    max-height: 52px !important;

    object-fit: contain !important;

    margin: 0 auto !important;
    padding: 0 !important;

    position: static !important;
    transform: none !important;
}

.sidebar .sidebar-product-name {
    display: block !important;

    margin-top: 6px !important;

    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 3px !important;
    line-height: 16px !important;
    text-align: center !important;
}
/* ============================================================
   FIX DEFINITIVO LOGO BIZCONNECT - SIDEBAR
   ============================================================ */

.sidebar .bizconnect-sidebar-logo {
    width: 210px !important;
    height: 105px !important;
    max-width: 210px !important;

    margin: 15px auto 20px !important;
    padding: 0 !important;

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

    position: relative !important;
    overflow: hidden !important;

    text-decoration: none !important;
}

/* LOGO DATABIZ */
.sidebar .bizconnect-sidebar-logo > img {
    display: block !important;

    width: 175px !important;
    height: 60px !important;

    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 175px !important;
    max-height: 60px !important;

    object-fit: contain !important;
    object-position: center !important;

    margin: 0 auto !important;
    padding: 0 !important;

    position: static !important;

    transform: none !important;
}

/* TEXTO BIZCONNECT */
.sidebar .bizconnect-sidebar-logo > div {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    margin: 7px 0 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: 3px !important;
    line-height: 18px !important;

    text-align: center !important;
}
/* ============================================================
   SIDEBAR RECOGIDO - OCULTAR LOGO DATABIZ / BIZCONNECT
   ============================================================ */

.sidebar.collapsed .bizconnect-sidebar-logo {
    display: none !important;
}
/* Sidebar abierto */
.bizconnect-sidebar-logo {
    transition: opacity .2s ease;
}

/* Sidebar recogido */
.sidebar.collapsed .bizconnect-sidebar-logo,
.sidebar.is-collapsed .bizconnect-sidebar-logo,
body.sidebar-collapsed .bizconnect-sidebar-logo {
    display: none !important;
}