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

body {
    font-family: system-ui, sans-serif;
    background: #f5f5f5;
    color: #222;
    font-size: 15px;
}

/* ── Skip to content ───────────────────── */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 10000;
    background: #1e3a5f;
    color: #fff;
    padding: 8px 16px;
    border-radius: 0 0 6px 6px;
    font-size: 14px;
    text-decoration: none;
    transition: top 0.15s;
}
.skip-to-content:focus {
    top: 0;
}

/* ── Layout ─────────────────────────────── */
.layout {
    display: flex;
    min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────── */
.sidebar {
    width: 56px;
    background: #1e3a5f;
    height: 100vh;
    position: fixed;
    left: 0; top: 0; bottom: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: hidden;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
    min-height: 52px;
    position: relative;
}

.brand {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0;
    width: 0;
}

.sidebar-toggle { display: none; }

/* Botón de pin — toggle expandido/colapsado (chevron ‹ ›) */
.sidebar-pin {
    background: none;
    border: none;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    padding: 6px;
    line-height: 0;
    flex-shrink: 0;
    position: absolute;
    right: -5px;
    top: 48%;
    transform: translateY(-50%) scaleX(-1);
    opacity: 1;
    transition: color 0.15s, transform 0.2s;
    display: flex;
    align-items: center;
}
.sidebar-pin:hover { color: #fff; }
/* Pinned: chevron apunta a la izquierda (colapsar) */
.sidebar--pinned .sidebar-pin,
html.spb #sidebar .sidebar-pin {
    opacity: 1;
    color: rgba(255,255,255,0.6);
    position: static;
    margin-left: auto;
    transform: none;
}
.sidebar--pinned .sidebar-pin:hover,
html.spb #sidebar .sidebar-pin:hover { color: #fff; }

/* ── Colapsado: ocultar chevron, badge como dot encima del icono ─────────── */
.sidebar:not(.sidebar--pinned):not(:hover) .nav-group.open { max-height: 0; }
.sidebar:not(.sidebar--pinned) .nav-chevron { display: none; }
.sidebar:not(.sidebar--pinned) .nav-sub-list {
    margin: 4px 0;
    padding-left: 0;
    border-left: none;
    align-items: center;
}
.sidebar:not(.sidebar--pinned) .nav-sub {
    padding: 8px 0 !important;
    justify-content: center;
    width: 100%;
}
.sidebar:not(.sidebar--pinned) .nav-sub .nav-icon {
    margin: 0;
}
.sidebar:not(.sidebar--pinned) .nav-badge {
    position: absolute;
    top: 4px;
    right: 10px;
    margin-left: 0;
    font-size: 9px;
    padding: 0 5px;
    min-width: 16px;
    line-height: 16px;
}

/* ── Estado expandido (sidebar--pinned / html.spb) ───────────────────────── */
.sidebar--pinned, html.spb #sidebar { width: 220px; }

.sidebar--pinned .sidebar-header,
html.spb #sidebar .sidebar-header { justify-content: flex-start; gap: 10px; }
.sidebar--pinned .brand,
html.spb #sidebar .brand           { opacity: 1; width: auto; }

.sidebar--pinned .nav-item,
html.spb #sidebar .nav-item           { justify-content: flex-start; padding: 10px 16px; gap: 10px; }
.sidebar--pinned .nav-item.active::before,
html.spb #sidebar .nav-item.active::before { opacity: 1; }
.sidebar--pinned .nav-text,
html.spb #sidebar .nav-text           { opacity: 1; width: auto; min-width: unset; overflow: visible; }
.sidebar--pinned .nav-divider,
html.spb #sidebar .nav-divider        { margin: 6px 14px; }
.sidebar--pinned .nav-group-toggle,
html.spb #sidebar .nav-group-toggle   { justify-content: flex-start; padding: 10px 16px; gap: 10px; }
.sidebar--pinned .sidebar-user,
html.spb #sidebar .sidebar-user       { align-items: flex-start; padding: 12px 16px; }

/* Main content se desplaza cuando el sidebar está expandido */
.main-content.sidebar-pinned, html.spb .main-content { margin-left: 220px; }

/* ── Tooltip para sidebar colapsado ──────────────────────────────────────── */
.sidebar-tooltip {
    position: fixed;
    background: #1a1a2e;
    color: #fff;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-50%);
    z-index: 10000;
    box-shadow: 2px 4px 12px rgba(0,0,0,0.35);
    transition: opacity 0.05s ease;
}

.sidebar-nav { padding: 8px 0; flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; }
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 4px; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 12px 0;
    justify-content: center;
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    position: relative;
}
.nav-item:focus-visible { outline: 2px solid rgba(255,255,255,0.8); outline-offset: -2px; border-radius: 4px; }

.nav-item:hover { background: rgba(255,255,255,0.1); color: #fff; }
.nav-item.nav-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: auto;
}
.nav-item.nav-disabled:hover { background: none; color: rgba(255,255,255,0.5); }

.nav-item.active {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

/* Pill indicator — visible only when expanded */
.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 20px;
    background: #fff;
    border-radius: 0 3px 3px 0;
    opacity: 0;
    transition: opacity 0.15s;
}
.nav-text {
    opacity: 0;
    width: 0;
    min-width: 0;
    overflow: hidden;
    transition: opacity 0.15s ease;
}

.nav-icon { display: flex; align-items: center; flex-shrink: 0; }

.nav-divider {
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 6px 8px;
    transition: margin 0.15s ease;
}

/* ── Main content ────────────────────────── */
.main-content {
    margin-left: 56px;
    padding: 32px;
    flex: 1;
    min-width: 0;
    max-width: 1800px;
}

/* ── Typography ──────────────────────────── */
h1 { font-size: 22px; margin-bottom: 20px; }

/* ── Table ───────────────────────────────── */
table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

th {
    background: #1e3a5f;
    color: #fff;
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
}

td { padding: 10px 14px; border-bottom: 1px solid #eee; font-size: 14px; }
tr:last-child td { border-bottom: none; }
tr:hover:not(.entry-row) td { background: #f9f9f9; }

/* ── Buttons ─────────────────────────────── */
.btn {
    display: inline-block;
    padding: 8px 18px;
    background: #1e3a5f;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}
.btn:disabled { background: #b0bec5; color: #fff; cursor: not-allowed; opacity: 0.7; }
.btn:disabled:hover { background: #b0bec5; }
.btn:hover:not(:disabled) { background: #16304f; }
.btn:focus-visible { outline: 2px solid #1e3a5f; outline-offset: 2px; }
.btn-sm { padding: 4px 10px; font-size: 13px; }
.btn-secondary { background: #f0f0f0; color: #444; }
.btn-secondary:hover { background: #e0e0e0; }
.btn-danger { background: #c0392b; }
.btn-danger:hover { background: #a93226; }

/* ── Forms ───────────────────────────────── */
.field { margin-bottom: 16px; }

.field label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 13px;
    color: #444;
}

.field label .optional {
    font-weight: 400;
    color: #999;
    font-size: 12px;
    margin-left: 4px;
}

input[type=text], input[type=email], input[type=date], input[type=number], select, textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
}

textarea::-webkit-scrollbar { width: 4px; }
textarea::-webkit-scrollbar-track { background: transparent; }
textarea::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
textarea::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
textarea { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #1e3a5f;
    box-shadow: 0 0 0 2px rgba(30,58,95,0.15);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid #1e3a5f;
    outline-offset: 1px;
    box-shadow: none;
}

/* ── Card ────────────────────────────────── */
.card {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    max-width: 520px;
}

/* ── Page form wrapper ──────────────────── */
/* Standard width for form/edit pages. Wrap content in <div class="page-form">. */
.page-form              { max-width: 960px; }
.page-form .card        { max-width: none; }

/* ── Alert ───────────────────────────────── */
.alert {
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 14px;
}
.alert-success { background: #d4edda; color: #155724; }
.alert-error   { background: #f8d7da; color: #721c24; }

.actions { margin-bottom: 16px; }

/* ── Badge ───────────────────────────────── */
.hours-badge {
    background: #e8f0fe;
    color: #1e3a5f;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 13px;
}

/* ── Combobox (searchable select) ────────── */
.combo-wrap { position: relative; }

.combo-input {
    width: 100%;
    padding: 8px 30px 8px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
    background-size: 12px;
    cursor: text;
}
.combo-input:focus {
    outline: none;
    border-color: #1e3a5f;
    box-shadow: 0 0 0 2px rgba(30,58,95,0.1);
}
.combo-input:disabled {
    background: #f5f5f5;
    background-image: none;
    cursor: not-allowed;
    color: #999;
}

.combo-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0; right: 0;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 500;
    max-height: 220px;
    overflow-y: auto;
}

.combo-option {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
}
.combo-option:hover { background: #f0f4fa; }
.combo-option.selected { background: #e8f0fe; font-weight: 600; }

.combo-empty {
    padding: 10px 12px;
    color: #999;
    font-size: 13px;
    font-style: italic;
}

.combo-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: none;
    align-items: center;
    justify-content: center;
    color: #999;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    border-radius: 50%;
    background: #fff;
    z-index: 2;
    transition: color 0.15s, background 0.15s;
}
.combo-clear:hover { color: #dc2626; background: #fee2e2; }

/* ── Sidebar — grupo colapsable ─────────── */
.nav-group-toggle {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: rgba(255,255,255,0.75);
    display: flex;
    align-items: center;
    gap: 0;
    padding: 12px 0;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.nav-group-toggle:hover { background: rgba(255,255,255,0.1); color: #fff; }

.nav-chevron {
    margin-left: auto;
    transition: transform 0.22s ease;
    opacity: 0.6;
    display: flex;
}
.nav-group-toggle[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

.nav-group {
    overflow: hidden;
    max-height: 0;
}
.nav-group.open { max-height: 500px; }

.nav-sub-list {
    margin: 4px 8px 4px 42px;
    padding-left: 10px;
    border-left: 2px solid rgba(255,255,255,0.2);
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-sub {
    padding: 8px 10px !important;
    font-size: 13px;
    opacity: 0.85;
    border-radius: 6px;
}

/* ── Sidebar — workspace indicator ──────── */
.sidebar-workspace {
    padding: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
}
.sidebar-ws-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    text-decoration: none;
    color: rgba(255,255,255,0.65);
    font-size: 12px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    overflow: hidden;
}
.sidebar-ws-link:hover {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.9);
}
.sidebar-ws-logo {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.15);
}
.sidebar-ws-initials {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}
.sidebar-ws-name {
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    flex: 1;
}
.sidebar-ws-switch {
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}
.sidebar-ws-link:hover .sidebar-ws-switch { opacity: 1; }
.sidebar--pinned .sidebar-ws-switch,
html.spb #sidebar .sidebar-ws-switch { opacity: 0.6; }
.sidebar--pinned .sidebar-ws-link:hover .sidebar-ws-switch,
html.spb #sidebar .sidebar-ws-link:hover .sidebar-ws-switch { opacity: 1; }
/* Collapsed sidebar: center logo/initials, hide text */
.sidebar:not(.sidebar--pinned):not(:hover) .sidebar-ws-logo,
.sidebar:not(.sidebar--pinned):not(:hover) .sidebar-ws-initials { width: 24px; height: 24px; font-size: 10px; border-radius: 5px; }
.sidebar:not(.sidebar--pinned):not(:hover) .sidebar-ws-link { justify-content: center; padding: 10px 0; gap: 0; }
.sidebar:not(.sidebar--pinned):not(:hover) .sidebar-ws-name,
.sidebar:not(.sidebar--pinned):not(:hover) .sidebar-ws-switch { display: none; }

/* ── Sidebar — trial mini-banner ────────── */
.sidebar-trial-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    margin: 4px 10px 2px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    font-size: 12px;
    color: #fde68a;
}
.sidebar-trial-icon {
    flex-shrink: 0;
    font-size: 14px;
}
.sidebar-trial-text {
    flex: 1;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-trial-link {
    flex-shrink: 0;
    color: #fbbf24;
    font-weight: 600;
    font-size: 11px;
    text-decoration: none;
    white-space: nowrap;
}
.sidebar-trial-link:hover {
    color: #fff;
    text-decoration: underline;
}
.sidebar:not(.sidebar--pinned):not(:hover) .sidebar-trial-banner {
    margin: 4px auto 2px;
    padding: 6px;
    justify-content: center;
}
.sidebar:not(.sidebar--pinned):not(:hover) .sidebar-trial-text,
.sidebar:not(.sidebar--pinned):not(:hover) .sidebar-trial-link { display: none; }

/* ── Sidebar — usuario logueado ─────────── */
.sidebar-user {
    flex-shrink: 0;
    padding: 12px 0;
    border-top: 1px solid rgba(255,255,255,0.12);
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: visible;
    align-items: center;
    position: relative;
}
.sidebar-avatar-wrap {
    position: relative;
    width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid rgba(255,255,255,0.25);
    transition: border-color .2s;
    margin-bottom: 2px;
    outline: none;
}
.sidebar-avatar-wrap:hover,
.sidebar-avatar-wrap:focus-visible { border-color: rgba(255,255,255,0.7); }
.sidebar-avatar-img {
    width: 38px; height: 38px; border-radius: 50%;
    object-fit: cover; display: block;
}
.sidebar-avatar-initials {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; color: #fff;
    text-transform: uppercase; letter-spacing: .5px;
    user-select: none;
}
.sidebar-user-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-user-role {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    text-transform: capitalize;
    white-space: nowrap;
}
/* User popup menu — Google-style account menu (fixed position) */
.sidebar-user-menu {
    display: none;
    position: fixed;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 16px 56px rgba(0,0,0,.28), 0 6px 20px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.04);
    min-width: 280px;
    padding: 0;
    z-index: 9999;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
    overflow: visible;
}
.sidebar-user-menu.open {
    opacity: 1;
    transform: translateY(0);
}
/* Arrow pointing down toward avatar */
.sidebar-user-menu-arrow {
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 7px;
    overflow: hidden;
}
.sidebar-user-menu-arrow::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: #fff;
    box-shadow: 2px 2px 4px rgba(0,0,0,.08);
}
/* Header section with large avatar, name, email */
.sidebar-user-menu-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 20px 16px;
    gap: 4px;
}
.sidebar-user-menu-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 8px;
    flex-shrink: 0;
}
.sidebar-user-menu-avatar-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.sidebar-user-menu-avatar-initials {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    user-select: none;
}
.sidebar-user-menu-name {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
}
.sidebar-user-menu-email {
    font-size: 13px;
    color: #64748b;
    text-align: center;
    word-break: break-all;
    line-height: 1.3;
}
/* Divider */
.sidebar-user-menu-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 0;
}
/* Menu items */
.sidebar-user-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px;
    font-size: 14px;
    color: #334155;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    width: 100%;
    text-align: left;
    transition: background .15s ease;
}
.sidebar-user-menu-item:first-of-type { margin-top: 4px; }
.sidebar-user-menu-item:hover { background: #f1f5f9; }
.sidebar-user-menu-item:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: -2px;
    border-radius: 4px;
}
.sidebar-user-menu-item svg {
    flex-shrink: 0;
    opacity: 0.7;
}
/* Logout item — red accent */
.sidebar-user-menu-logout {
    color: #dc2626;
    margin-bottom: 4px;
    border-radius: 0 0 16px 16px;
}
.sidebar-user-menu-logout:hover { background: #fef2f2; }
.sidebar-user-menu-logout svg { opacity: 0.85; }
/* Collapsed sidebar: smaller avatar, no text */
.sidebar-avatar-emoji {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; user-select: none;
}
.sidebar.collapsed .sidebar-avatar-wrap { width: 34px; height: 34px; }
.sidebar.collapsed .sidebar-avatar-img { width: 30px; height: 30px; }
.sidebar.collapsed .sidebar-avatar-initials { width: 30px; height: 30px; font-size: 11px; }
.sidebar.collapsed .sidebar-avatar-emoji { width: 30px; height: 30px; font-size: 16px; }
/* Notification badge on avatar */
.sidebar-avatar-badge {
    position: absolute; top: -2px; right: -2px;
    background: #ef4444; color: #fff;
    font-size: 9px; font-weight: 700;
    min-width: 16px; height: 16px;
    border-radius: 8px; padding: 0 4px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #1e3a5f;
    line-height: 1; pointer-events: none;
}
/* Arrow hidden — JS positions the menu dynamically */

/* ── Sidebar — trial banner (compact, one line) ── */
.sb-trial2 {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px; margin: 0 0 4px;
}
.sb-trial2-bar { flex: 1; height: 4px; background: rgba(255,255,255,.1); border-radius: 3px; overflow: hidden; min-width: 40px; }
.sb-trial2-fill { height: 100%; border-radius: 3px; min-width: 2px; }
.sb-trial2-msg { font-size: 11px; color: rgba(255,255,255,.55); white-space: nowrap; }
.sb-trial2-cta {
    font-size: 10px; color: rgba(255,255,255,.4); text-decoration: none;
    border: 1px solid rgba(255,255,255,.12); padding: 1px 8px; border-radius: 4px;
    white-space: nowrap; transition: all 0.15s;
}
.sb-trial2-cta:hover { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); }
.sb-trial2-dot { display: none; }
/* Urgency: only critical gets highlighted CTA */
.sb-trial2--critical .sb-trial2-msg { color: rgba(255,200,200,.7); }
.sb-trial2--critical .sb-trial2-cta { color: #fca5a5; border-color: rgba(239,68,68,.3); }
.sb-trial2--critical .sb-trial2-cta:hover { background: rgba(239,68,68,.15); }
/* Collapsed: bar only, no text */
.sidebar:not(.sidebar--pinned):not(:hover) .sb-trial2-msg,
.sidebar:not(.sidebar--pinned):not(:hover) .sb-trial2-cta,
.sidebar:not(.sidebar--pinned):not(:hover) .sb-trial2-dot { display: none; }
.sidebar:not(.sidebar--pinned):not(:hover) .sb-trial2 {
    padding: 6px 12px; margin: 0;
}
.sidebar:not(.sidebar--pinned):not(:hover) .sb-trial2-bar {
    min-width: unset; height: 3px;
}

/* ── User Module — center when sidebar collapsed ── */
.sidebar:not(.sidebar--pinned):not(:hover) .um-widget { align-items: center; }
.sidebar--pinned .um-widget,
html.spb #sidebar .um-widget { align-items: flex-start; padding-left: 14px; }

/* ── Sidebar — flyout (sidebar colapsado) ── */
.config-flyout {
    position: fixed;
    background: #162e4d;
    border-radius: 8px;
    min-width: 160px;
    padding: 6px;
    box-shadow: 4px 6px 24px rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.12);
    opacity: 0;
    transform: translateX(-6px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 999;
}
.config-flyout::before {
    content: '';
    position: absolute;
    left: -6px; top: 14px;
    border-width: 5px 6px 5px 0;
    border-style: solid;
    border-color: transparent #162e4d transparent transparent;
}
.config-flyout.open { opacity: 1; transform: translateX(0); pointer-events: auto; }

.flyout-label {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 5px 10px 4px;
}
.flyout-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 6px;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.flyout-item:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* ── Modal de confirmación ───────────────── */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.modal-backdrop.open {
    display: flex;
}
.modal-backdrop.open { opacity: 1; }

.modal {
    background: #fff;
    border-radius: 12px;
    padding: 28px 28px 22px;
    max-width: 380px;
    width: calc(100% - 40px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    transform: translateY(10px);
    transition: transform 0.18s ease;
}
.modal-backdrop.open .modal { transform: translateY(0); }

.modal-icon {
    width: 44px;
    height: 44px;
    background: #fef2f2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: #c0392b;
}

.modal-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.modal-body {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 22px;
}

.modal-name {
    font-weight: 600;
    color: #222;
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.modal-cancel {
    padding: 9px 18px;
    background: #f0f0f0;
    color: #444;
    border: none;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.modal-cancel:hover { background: #e0e0e0; }

.modal-confirm {
    padding: 9px 18px;
    background: #c0392b;
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.modal-confirm:hover { background: #a93226; }

/* ── Invitaciones ─────────────────────────── */
.invite-section {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 20px 22px;
    margin-bottom: 8px;
}

.invite-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.invite-section-header h2 {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.invite-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 700;
    padding: 0 6px;
}

.invite-badge--pending { background: #fef3cd; color: #856404; }
.invite-badge--history { background: #e8f0fe; color: #1e3a5f; }

.invite-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.invite-filter-field input {
    padding: 6px 10px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    width: 200px;
    background: #fafafa;
}

.invite-filter-field input:focus {
    outline: none;
    border-color: #4a7fc1;
    background: #fff;
}

.invite-empty {
    color: #888;
    font-size: 13px;
    padding: 8px 0;
    margin: 0;
}

.invite-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.invite-table th,
.invite-table td {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
}

.invite-table thead th {
    background: #f5f7fb;
    font-size: 11px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid #e0e0e0;
}

.invite-table tbody tr:last-child td { border-bottom: none; }
.invite-table tbody tr:hover { background: #f9fbff; }

.role-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #e8f0fe;
    color: #1e3a5f;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge--ok      { background: #d4edda; color: #1a5c30; }
.status-badge--expired { background: #f0f0f0; color: #888; }

/* Approval status badges */
.badge--muted    { background: #f1f5f9; color: #64748b; }
.badge--warning  { background: #fef3c7; color: #92400e; }
.badge--success  { background: #d1fae5; color: #065f46; }
.badge--info     { background: #dbeafe; color: #1e40af; }
.badge--primary  { background: #c7d2fe; color: #3730a3; }
.badge--danger     { background: #fee2e2; color: #991b1b; }
.badge--danger-alt { background: #fef3c7; color: #92400e; }

.btn-resend {
    background: #f0f4fa;
    color: #1e3a5f;
    border: 1px solid #c8d8ef;
}

.btn-resend:hover { background: #1e3a5f; color: #fff; }

/* ── Usuarios — tabla admin ──────────────── */
.role-badge-colored {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

.row-self td { background: #f8f9fa; }

.cell-tarifa {
    font-size: 13px;
    color: #444;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tarifa-moneda {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: #4a7fc1;
    border-radius: 3px;
    padding: 1px 5px;
    margin-right: 4px;
    letter-spacing: 0.3px;
    vertical-align: middle;
}

/* ── Mi usuario — badge de rol ───────────── */
.profile-role-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}
.profile-role-badge--superadmin { background: #6f42c1; }
.profile-role-badge--admin      { background: #1e3a5f; }
.profile-role-badge--lider      { background: #0d6efd; }
.profile-role-badge--usuario    { background: #555; }
.profile-role-badge--cliente    { background: #e67e22; }

/* ── Reportes — filtros ──────────────────── */
.filter-form {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 18px 20px 14px;
    margin-bottom: 18px;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 14px;
}

.filter-field--wide {
    grid-column: span 2;
}

.filter-field--daterange {
    grid-column: span 2;
}

.date-range-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    color: #222;
    background: #fafafa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat right 10px center;
    cursor: pointer;
}

.date-range-input:focus {
    outline: none;
    border-color: #4a7fc1;
    background-color: #fff;
}

/* ── Tom Select en panel de filtros ─────── */
.filter-form .ts-wrapper { width: 100%; }
.filter-form .ts-control {
    padding: 5px 8px !important;
    min-height: 32px !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 13px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}
.filter-form .ts-control .item {
    font-size: 13px !important;
    color: #334155 !important;
    font-family: inherit !important;
    flex: 1 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.filter-form .ts-control input { font-size: 13px !important; font-family: inherit !important; }
.filter-form .ts-control:focus-within { border-color: #4a7fc1 !important; }
.filter-form .ts-wrapper.single.input-active .ts-control .item { display: none !important; }
.filter-form .ts-wrapper.single.input-active .ts-control input { flex: 1 !important; width: auto !important; }
.filter-form .ts-dropdown { font-size: 13px !important; font-family: inherit !important; z-index: 500; }
.filter-form .ts-dropdown .option { padding: 6px 10px !important; font-size: 13px !important; }
.filter-form .ts-dropdown .option.active,
.filter-form .ts-dropdown .option:hover { background: #eef3fb !important; color: #1e3a5f !important; }

/* ── Flatpickr — tema ────────────────────── */
.flatpickr-calendar {
    font-family: system-ui, sans-serif !important;
    font-size: 13px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 36px rgba(0,0,0,0.18) !important;
    border: none !important;
    overflow: hidden;
}

/* Header */
.flatpickr-months,
.flatpickr-month {
    background: #1e3a5f !important;
    color: #fff !important;
    height: 46px;
}

.flatpickr-current-month {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding-top: 10px !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: #1e3a5f !important;
    color: #fff !important;
    font-weight: 600 !important;
    border: none !important;
    -webkit-appearance: none;
}

.flatpickr-current-month .flatpickr-monthDropdown-months option {
    background: #1e3a5f;
    color: #fff;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: rgba(255,255,255,0.12) !important;
}

/* Año */
.flatpickr-current-month {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding-top: 0 !important;
    height: 46px;
}

.flatpickr-current-month input.cur-year {
    color: #fff !important;
    font-weight: 700 !important;
    cursor: text;
    text-align: center;
    width: 52px !important;
    padding: 2px 0 !important;
    border-radius: 4px;
    transition: background 0.15s;
}

.flatpickr-current-month input.cur-year:hover,
.flatpickr-current-month input.cur-year:focus {
    background: rgba(255,255,255,0.12) !important;
    outline: none !important;
}

.numInputWrapper { display: contents; }

/* Botones ‹ › de año inyectados por JS */
.yr-btn {
    background: rgba(255,255,255,0.12);
    border: none;
    color: #fff;
    border-radius: 5px;
    width: 24px;
    height: 24px;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    flex-shrink: 0;
    padding: 0;
    font-family: inherit;
}

.yr-btn:hover { background: rgba(255,255,255,0.28); }

/* Flechas de navegación de mes */
.flatpickr-prev-month,
.flatpickr-next-month {
    fill: rgba(255,255,255,0.75) !important;
    color: rgba(255,255,255,0.75) !important;
    padding: 8px !important;
}

.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
    fill: #fff !important;
}

/* Separador entre los dos meses */
.flatpickr-rContainer + .flatpickr-rContainer {
    border-left: 1px solid rgba(30,58,95,0.12);
}

/* Días de la semana */
.flatpickr-weekdays         { background: #2a4d78 !important; }
span.flatpickr-weekday      { background: #2a4d78 !important; color: rgba(255,255,255,0.6) !important; font-size: 11px !important; font-weight: 700 !important; }

/* Días */
.flatpickr-day { border-radius: 6px !important; color: #222; }

.flatpickr-day:hover:not(.selected):not(.startRange):not(.endRange):not(.inRange) {
    background: #e8f0fb !important;
    border-color: #e8f0fb !important;
    color: #1e3a5f !important;
}

.flatpickr-day.today:not(.selected) {
    border-color: #4a7fc1 !important;
    color: #1e3a5f !important;
    font-weight: 700;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #1e3a5f !important;
    border-color: #1e3a5f !important;
    color: #fff !important;
    font-weight: 600;
}

.flatpickr-day.startRange { border-radius: 6px 0 0 6px !important; }
.flatpickr-day.endRange   { border-radius: 0 6px 6px 0 !important; }

.flatpickr-day.startRange.endRange { border-radius: 6px !important; }

.flatpickr-day.inRange {
    background: #d4e8f8 !important;
    border-color: #d4e8f8 !important;
    color: #1e3a5f !important;
    border-radius: 0 !important;
    box-shadow: -5px 0 0 #d4e8f8, 5px 0 0 #d4e8f8 !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: #ccc !important;
}

.filter-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.filter-field input,
.filter-field select {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    color: #222;
    background: #fafafa;
}

.filter-field input:focus,
.filter-field select:focus {
    outline: none;
    border-color: #4a7fc1;
    background: #fff;
}

.filter-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

/* ── Reportes — toolbar ──────────────────── */
.report-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.report-summary {
    font-size: 13px;
    color: #555;
}

.report-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.export-bar {
    display: flex;
    gap: 6px;
}

.btn-export {
    padding: 6px 12px;
    background: #f0f4fa;
    color: #1e3a5f;
    border: 1px solid #c8d8ef;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.btn-export:hover     { background: #1e3a5f; color: #fff; border-color: #1e3a5f; }
.btn-export--ok       { background: #27ae60 !important; color: #fff !important; border-color: #27ae60 !important; }

/* ── Reportes — por página ───────────────── */
.per-page-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #777;
}

.per-page-btns {
    display: flex;
    gap: 4px;
}

.per-page-btn {
    padding: 4px 9px;
    border: 1px solid #d0d0d0;
    border-radius: 5px;
    font-size: 12px;
    color: #444;
    text-decoration: none;
    transition: background 0.15s;
}
.per-page-btn:hover  { background: #e8eef7; }
.per-page-btn.active { background: #1e3a5f; color: #fff; border-color: #1e3a5f; }

/* ── Reportes — tabla ────────────────────── */
.table-wrap {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: #fff;
}

.report-table th,
.report-table td {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
}

.report-table thead th {
    background: #f5f7fb;
    font-size: 11px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid #e0e0e0;
}

.report-table thead th.sortable { cursor: pointer; user-select: none; transition: color 0.12s; }
.report-table thead th.sortable:hover { color: #1e3a5f; }
.sort-arrow { font-size: 9px; color: #1e3a5f; vertical-align: middle; }
.report-table tbody tr:not(.entry-row):hover { background: #f9fbff; }
.report-table tfoot td {
    font-weight: 600;
    background: #f5f7fb;
    border-top: 2px solid #e0e0e0;
    border-bottom: none;
    font-size: 12px;
    color: #555;
}

.tfoot-label { text-align: right; }

.cell-user  { font-size: 12px; color: #555; }

/* ── Celdas truncadas con tooltip ─────────────────────────────────────────── */
.cell-truncate {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
    position: relative;
    cursor: default;
}
.cell-truncate--desc { max-width: 280px; }
.cell-truncate--proj { max-width: 200px; }

/* Expandida al hacer clic */
.cell-truncate.cell-expanded {
    white-space: normal !important;
    overflow: visible;
    max-width: none;
    word-break: break-word;
    max-height: 120px;
    overflow-y: auto;
}

/* Tooltip flotante para celdas truncadas */
.cell-tooltip {
    position: fixed;
    background: #1a1a2e;
    color: #fff;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
    max-width: 400px;
    word-break: break-word;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    z-index: 10000;
    box-shadow: 2px 4px 12px rgba(0,0,0,0.35);
    transition: opacity 0.1s ease;
}

.cell-desc  { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important; cursor: default; position: relative; }
.cell-desc.cell-expanded {
    white-space: normal !important;
    overflow: visible;
    max-width: none;
    word-break: break-word;
    max-height: 120px;
    overflow-y: auto;
}

.cell-hours { text-align: center; }

/* ── Reportes — sort ─────────────────────── */
.th-sort {
    text-decoration: none;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s;
}
.th-sort:hover   { color: #1e3a5f; }
.th-active       { color: #1e3a5f; }
.th-unsorted     { opacity: 0.35; }

/* ── Reportes — paginación ───────────────── */
.pagination-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.page-btn {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    font-size: 13px;
    color: #444;
    text-decoration: none;
    transition: background 0.15s;
    padding: 0 6px;
}
.page-btn:hover  { background: #e8eef7; }
.page-btn.active { background: #1e3a5f; color: #fff; border-color: #1e3a5f; font-weight: 600; }

.page-ellipsis {
    padding: 0 4px;
    color: #999;
    font-size: 13px;
}

/* ── Dashboard ──────────────────────────────────────────────────────────── */

.dash-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
}

.period-btns {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.period-btn {
    padding: 6px 14px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    background: #f7f7f7;
    color: #444;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.period-btn:hover  { background: #e8eef7; border-color: #b0c4de; }
.period-btn.active { background: #1e3a5f; color: #fff; border-color: #1e3a5f; }

.dash-daterange {
    flex-shrink: 0;
}
.dash-daterange .date-range-input {
    min-width: 210px;
}

.dash-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    flex: 1;
}
.dash-filters select {
    min-width: 160px;
    flex: 1;
}

/* Tarjetas resumen */
.dash-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.dash-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dash-card-label {
    font-size: 12px;
    color: #888;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.dash-card-value {
    font-size: 28px;
    font-weight: 700;
    color: #1e3a5f;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.dash-card-unit {
    font-size: 14px;
    font-weight: 400;
    color: #888;
}

/* Cajas de gráficos */
.dash-chart-box {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.dash-chart-box--main { margin-bottom: 20px; }

.dash-chart-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e3a5f;
    margin-bottom: 16px;
}

.dash-chart-sub {
    font-size: 12px;
    font-weight: 400;
    color: #aaa;
}

.dash-chart-wrap {
    position: relative;
    width: 100%;
}

.dash-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}
.dash-grid-2 .dash-chart-box { margin-bottom: 0; }

.dash-empty {
    padding: 32px 0;
    text-align: center;
    color: #aaa;
    font-size: 13px;
}

/* ── Botones icono (editar / eliminar) ──────────────────────────────────── */

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    vertical-align: middle;
    margin: 0 1px;
}
.btn-icon:focus-visible { outline: 2px solid #1e3a5f; outline-offset: 2px; }

.btn-icon--view {
    background: #f0faf4;
    border-color: #b8dfc8;
    color: #1a6b3c;
}
.btn-icon--view:hover { background: #d8f0e4; border-color: #7dbf9a; }

.btn-icon--edit {
    background: #eef3fb;
    border-color: #c5d5e8;
    color: #1e3a5f;
}
.btn-icon--edit:hover { background: #dce8f5; border-color: #9ab4d0; }

.btn-icon--danger {
    background: #fef2f2;
    border-color: #f0c4c4;
    color: #c0392b;
}
.btn-icon--danger:hover { background: #fde0e0; border-color: #e08080; }

/* ── Client color dot ─────────────────────────────────────────────────────── */
.client-dot-wrap { display: inline-flex; align-items: center; gap: 6px; }
.client-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dash-range-label {
    font-size: 12px;
    color: #888;
    margin: -16px 0 20px;
}

/* ── Comando: toolbar ────────────────────────────────────────────────────── */

.cmd-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 12px;
    flex-wrap: wrap;
}

.cmd-toolbar h1 {
    font-size: 20px;
    margin: 0;
}

.cmd-toolbar-left  { display: flex; align-items: center; gap: 10px; }
.cmd-toolbar-right { display: flex; align-items: center; gap: 8px; }

.cmd-summary {
    font-size: 12px;
    color: #888;
}

.btn-cmd {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #d0d0d0;
    background: #fff;
    color: #475569;
    font-family: inherit;
    transition: all 150ms;
    text-decoration: none;
    white-space: nowrap;
}
.btn-cmd:hover { background: #f1f5f9; border-color: #94a3b8; color: #1e3a5f; }
.btn-cmd--primary { background: #1e3a5f; color: #fff; border-color: #1e3a5f; }
.btn-cmd--primary:hover { background: #162d4a; border-color: #162d4a; color: #fff; }
.btn-cmd--active { background: #eff6ff; border-color: #1e3a5f; color: #1e3a5f; }

.kbd-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 5px;
    background: #f1f5f9;
    border: 1px solid #e0e0e0;
    border-bottom-width: 2px;
    border-radius: 4px;
    font-size: 10px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    color: #64748b;
    line-height: 1.4;
}

/* ── Comando: quick-add bar ──────────────────────────────────────────────── */

.qa-bar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 16px;
    background: #f8fafc;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    margin-bottom: 16px;
}

.qa-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.qa-row--desc { flex-wrap: wrap; }

.qa-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #b0bec5;
    margin-bottom: 2px;
}

.qa-input {
    padding: 5px 9px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 13px;
    color: #334155;
    background: #fff;
    font-family: inherit;
    outline: none;
    transition: border-color 150ms, box-shadow 150ms;
}
.qa-input:focus {
    border-color: #1e3a5f;
    box-shadow: 0 0 0 2px rgba(30,58,95,0.1);
}
.qa-input--date  { flex: 54; min-width: 0; }
.qa-input--hours {
    flex: 25;
    min-width: 0;
    font-family: 'JetBrains Mono', monospace;
    text-align: center;
    -moz-appearance: textfield;
}
.qa-input--hours::-webkit-outer-spin-button,
.qa-input--hours::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qa-input--hours:focus::placeholder { color: transparent; opacity: 0; }
.qa-input--desc  { flex: 1; min-width: 200px; line-height: 1.5; }
textarea.qa-input--desc::-webkit-scrollbar { width: 3px; }
textarea.qa-input--desc::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

.qa-select {
    padding: 5px 8px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 13px;
    color: #334155;
    background: #fff;
    font-family: inherit;
    outline: none;
    transition: border-color 150ms;
    flex: 100;
    min-width: 0;
}
.qa-select:focus          { border-color: #1e3a5f; }
.qa-select--client        { flex: 81; }

.qa-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: #1e3a5f;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background 150ms;
}
.qa-btn:hover { background: #162d4a; }

/* ── Comando: tabla compacta ─────────────────────────────────────────────── */

.report-table--compact td {
    padding: 7px 12px;
    font-size: 13px;
}

.report-table--compact th {
    padding: 8px 12px;
    font-size: 10.5px;
}

/* Sort header tinte azul cuando activo */
.report-table th .th-active,
.report-table th:has(.th-active) {
    color: #1e3a5f;
}

/* ── Comando: project dot ─────────────────────────────────────────────────── */

.proj-dot-wrap {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.proj-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* ── Comando: horas monospace ────────────────────────────────────────────── */

.hours-mono {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 13px;
    font-weight: 600;
    color: #1e3a5f;
}

.cell-hours-cmd { text-align: right; white-space: nowrap; }

.cell-muted { font-size: 12.5px; color: #64748b; }

/* ── Filtros colapsables ─────────────────────────────────────────────────── */

.filter-panel-collapsible {
    margin-bottom: 4px;
}

/* ── Hamburger & overlay (mobile) ─────────────────────────────────────────── */
.sidebar-hamburger {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 201;
    background: #1e3a5f;
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 199;
    backdrop-filter: blur(1px);
}
.sidebar-overlay--visible { display: block; }

/* ── Touch targets ─────────────────────────────────────────────────────────── */
a, button, [role="button"], label { touch-action: manipulation; }

/* ── Responsive: tablet & mobile ─────────────────────────────────────────── */
@media (max-width: 900px) {
    /* Mostrar hamburger */
    .sidebar-hamburger { display: flex; }

    /* Sidebar se oculta off-screen y aparece como drawer */
    .sidebar {
        transform: translateX(-100%);
        width: 240px !important;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 200;
        box-shadow: 4px 0 24px rgba(0,0,0,0.3);
    }
    html.spb #sidebar,
    .sidebar--pinned {
        transform: translateX(-100%) !important;
    }
    html.spb #sidebar.sidebar--open,
    .sidebar--pinned.sidebar--open,
    .sidebar.sidebar--open {
        transform: translateX(0) !important;
    }

    /* Drawer abierto: mostrar textos y ajustar layout */
    .sidebar--open .nav-text { opacity: 1; width: auto; min-width: unset; overflow: visible; }
    .sidebar--open .brand { opacity: 1; width: auto; }
    .sidebar--open .sidebar-header { justify-content: flex-start; gap: 10px; }
    .sidebar--open .nav-item { justify-content: flex-start; padding: 10px 16px; gap: 10px; }
    .sidebar--open .nav-item.active::before { opacity: 1; }
    .sidebar--open .nav-divider { margin: 6px 14px; }
    .sidebar--open .nav-group-toggle { justify-content: flex-start; padding: 10px 16px; gap: 10px; }
    .sidebar--open .sidebar-user { align-items: flex-start; padding: 12px 16px; }
    .sidebar--open .nav-chevron { display: flex; }
    .sidebar--open .nav-badge { display: inline-block; }

    /* Ocultar tooltip en mobile */
    .sidebar-tooltip { display: none !important; }

    /* Ocultar pin en mobile (no aplica) */
    .sidebar-pin { display: none; }

    /* Main content sin margen izquierdo */
    .main-content,
    .main-content.sidebar-pinned,
    html.spb .main-content {
        margin-left: 0 !important;
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 64px; /* espacio para hamburger */
    }

    /* Toolbar */
    .cmd-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }
    .cmd-toolbar-right { width: 100%; justify-content: flex-end; }

    /* Quick-add en 2 columnas */
    .qa-row { flex-wrap: wrap; }
    .qa-input--date  { flex: 1 1 130px !important; }
    .qa-input--hours { flex: 1 1 70px !important; }
    .qa-select       { flex: 1 1 calc(50% - 8px) !important; }
    .qa-input--desc  { min-width: 0; }
    .qa-btn          { width: 100%; justify-content: center; }

    /* Filtros en columna */
    .filter-grid { grid-template-columns: 1fr 1fr; }

    /* Tablas con scroll horizontal */
    .table-wrap { -webkit-overflow-scrolling: touch; }

    /* Touch targets más grandes */
    .btn-icon { width: 40px; height: 40px; }
}

@media (max-width: 560px) {
    /* Filtros en 1 columna */
    .filter-grid { grid-template-columns: 1fr; }

    /* Quick-add en 1 columna */
    .qa-select { flex: 1 1 100% !important; }
    .qa-input--date, .qa-input--hours { flex: 1 1 calc(50% - 4px) !important; }

    /* Cards sin padding excesivo */
    .card { padding: 16px; }

    /* Ocultar columnas secundarias en tabla de horas */
    .col-subproject { display: none; }
}

/* ── User avatar (iniciales) ─────────────────────────────────────────────── */
.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0;
    flex-shrink: 0;
    vertical-align: middle;
    text-transform: uppercase;
    cursor: default;
    user-select: none;
}
.cell-user-avatar { width: 36px; text-align: center; padding: 4px 8px !important; vertical-align: middle; }

/* ── Sticky action column (siempre visible en scroll horizontal) ─────────── */
.report-table td:last-child,
.report-table th:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    background: #fff;
}
.report-table thead th:last-child { background: #f5f7fb; z-index: 2; }
.report-table tbody tr:hover:not(.selected) td:last-child { background: #f9fbff; }
.report-table tfoot td:last-child { background: #f5f7fb; }

/* ── Tom Select overrides para qa-bar ───────────────────────────────────── */
.qa-bar .ts-wrapper { min-width: 0; }
.qa-bar .ts-control {
    padding: 3px 8px !important;
    min-height: 30px !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}
.qa-bar .ts-control input,
.qa-bar .ts-control .item {
    font-size: 13px !important;
    color: #334155 !important;
    font-family: inherit !important;
}
.qa-bar .ts-control .item {
    flex: 1 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
/* Al abrir el dropdown en single-select, ocultar el item y mostrar solo el input */
.qa-bar .ts-wrapper.single.input-active .ts-control .item {
    display: none !important;
}
.qa-bar .ts-wrapper.single.input-active .ts-control input {
    flex: 1 !important;
    width: auto !important;
}
.qa-bar .ts-control input::placeholder { color: #aaa !important; }
.qa-bar .ts-control:focus-within {
    border-color: #1e3a5f !important;
    box-shadow: 0 0 0 2px rgba(30,58,95,0.1) !important;
}
.qa-bar .ts-dropdown {
    font-size: 13px !important;
    border-color: #e0e0e0 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    font-family: inherit !important;
    z-index: 500;
}
.qa-bar .ts-dropdown .option {
    padding: 6px 10px !important;
    font-size: 13px !important;
    color: #334155 !important;
}
.qa-bar .ts-dropdown .option.active,
.qa-bar .ts-dropdown .option:hover { background: #eef3fb !important; color: #1e3a5f !important; }
.qa-bar .ts-control .clear-button { color: #999; font-size: 16px; padding: 0 4px; }
.qa-bar .ts-control .clear-button:hover { color: #dc2626; }

/* ── Approval system ─────────────────────────────────────────────────────── */

/* Alert warning (rejected entries) */
.alert-warning {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.5;
}

/* Approve/reject buttons */
.btn-approve {
    display: inline-flex; align-items: center; gap: 4px;
    background: #059669; color: #fff; border: none;
    padding: 5px 14px; border-radius: 6px; font-size: 12px;
    font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn-approve:hover { background: #047857; }
.btn-reject {
    display: inline-flex; align-items: center; gap: 4px;
    background: #dc2626; color: #fff; border: none;
    padding: 5px 14px; border-radius: 6px; font-size: 12px;
    font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn-reject:hover { background: #b91c1c; }

/* Toggle switch */
.toggle-switch {
    position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute; cursor: pointer; inset: 0;
    background: #cbd5e1; border-radius: 24px; transition: .2s;
}
.toggle-slider::before {
    content: ''; position: absolute;
    height: 18px; width: 18px; left: 3px; bottom: 3px;
    background: #fff; border-radius: 50%; transition: .2s;
}
.toggle-switch input:checked + .toggle-slider { background: #1e3a5f; }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }
.toggle-switch input:disabled + .toggle-slider { background: #e2e8f0; cursor: not-allowed; }
.toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid #1e3a5f; outline-offset: 2px; }

/* Toggle field row */
.toggle-field {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0;
}
.toggle-field label {
    margin: 0; font-weight: 500; font-size: 14px; cursor: pointer;
}

/* Sidebar pending count badge */
.nav-badge {
    background: #ef4444; color: #fff;
    font-size: 10px; font-weight: 700;
    padding: 1px 6px; border-radius: 10px;
    margin-left: auto; min-width: 18px; text-align: center;
}

/* Leader assignment checkboxes */
.leader-list {
    list-style: none; margin: 8px 0 0; padding: 0;
}
.leader-list li {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0; border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
}
.leader-list li:last-child { border-bottom: none; }
.leader-list input[type="checkbox"] { width: auto; }

/* Approve page tabs */
.approve-tabs {
    display: flex; gap: 4px; margin-bottom: 20px;
    border-bottom: 2px solid #e2e8f0; padding-bottom: 0;
}
.approve-tab {
    padding: 8px 16px; font-size: 14px; font-weight: 500;
    color: #64748b; background: none; border: none;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    cursor: pointer; text-decoration: none;
    transition: color .15s, border-color .15s;
}
.approve-tab:hover { color: #1e3a5f; }
.approve-tab.active {
    color: #1e3a5f; border-bottom-color: #1e3a5f; font-weight: 600;
}
.approve-tab .tab-count {
    background: #e2e8f0; color: #475569;
    font-size: 11px; font-weight: 700;
    padding: 1px 7px; border-radius: 10px; margin-left: 6px;
}
.approve-tab.active .tab-count {
    background: #1e3a5f; color: #fff;
}

/* Reject reason modal */
.reject-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.4); z-index: 1000;
    align-items: center; justify-content: center;
}
.reject-overlay.show { display: flex; }
.reject-modal {
    background: #fff; border-radius: 12px;
    padding: 28px; width: 440px; max-width: 90vw;
    box-shadow: 0 8px 40px rgba(0,0,0,.15);
}
.reject-modal h3 { margin: 0 0 16px; font-size: 18px; color: #1e293b; }
.reject-modal textarea {
    width: 100%; min-height: 80px; padding: 10px;
    border: 1px solid #d1d5db; border-radius: 8px;
    font-size: 14px; font-family: inherit; resize: vertical;
}
.reject-modal .reject-actions {
    display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   Security page — Tabs, Cards, Permission Matrix
   ═══════════════════════════════════════════════════════════════ */
.sec-tabs {
    display: flex; gap: 4px; margin-bottom: 24px;
    background: #f1f5f9; border-radius: 10px; padding: 4px;
    width: fit-content;
}
.sec-tab {
    display: flex; align-items: center; gap: 7px;
    padding: 9px 20px; font-size: 14px; font-weight: 500;
    color: #64748b; background: none; border: none;
    border-radius: 8px; cursor: pointer;
    transition: all .15s;
}
.sec-tab:hover { color: #1e3a5f; }
.sec-tab.active {
    color: #1e3a5f; background: #fff; font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* Cards */
.sec-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    margin-bottom: 16px; overflow: hidden;
}
.sec-card-header {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 20px; border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
}
.sec-card-header h3 { margin: 0; font-size: 15px; font-weight: 600; color: #1e3a5f; }
.sec-card-header svg { color: #64748b; flex-shrink: 0; }
.sec-card-body { padding: 16px 20px; }

/* Toggle rows */
.sec-toggle-row {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 0; border-bottom: 1px solid #f8fafc;
}
.sec-toggle-row:last-child { border-bottom: none; }
.sec-toggle-info { display: flex; flex-direction: column; gap: 2px; }
.sec-toggle-label { font-size: 14px; font-weight: 500; color: #334155; }
.sec-toggle-desc { font-size: 12px; color: #94a3b8; }

/* Field rows */
.sec-field-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid #f8fafc;
}
.sec-field-row:last-child { border-bottom: none; }
.sec-field-row label { font-size: 14px; font-weight: 500; color: #334155; min-width: 180px; margin: 0; }
.sec-input-sm {
    width: 80px; padding: 6px 10px; border: 1px solid #d1d5db;
    border-radius: 6px; font-size: 14px; text-align: center;
}
.sec-input-sm:focus { outline: none; border-color: #1e3a5f; box-shadow: 0 0 0 2px rgba(30,58,95,.1); }
.sec-hint { font-size: 12px; color: #94a3b8; }
.sec-recommendation {
    display: block;
    font-size: 11px;
    color: #6366f1;
    margin-top: 2px;
    font-style: italic;
}

/* Actions */
.sec-actions {
    display: flex; align-items: center; gap: 16px;
    padding-top: 20px; margin-top: 8px;
}
.sec-actions-hint { font-size: 12px; color: #94a3b8; }

/* Role pills */
.sec-role-pills {
    display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap;
}
.sec-role-pill {
    padding: 7px 18px; font-size: 13px; font-weight: 500;
    color: #475569; background: #f1f5f9; border: 1px solid #e2e8f0;
    border-radius: 20px; text-decoration: none;
    transition: all .15s;
}
.sec-role-pill:hover { background: #e2e8f0; color: #1e3a5f; }
.sec-role-pill.active {
    background: #1e3a5f; color: #fff; border-color: #1e3a5f;
}
.sec-role-pill--super { border-style: dashed; }
.sec-role-pill--super.active { background: #6f42c1; border-color: #6f42c1; }
.sec-role-pill--add {
    border-style: dashed; color: #888; gap: 0; padding: 6px 10px;
    transition: color 0.15s, border-color 0.15s;
}
.sec-role-pill--add:hover { color: #1e3a5f; border-color: #1e3a5f; }

/* Create role panel */
.sec-create-role {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 18px 20px; margin-bottom: 20px;
}
.sec-create-role-form { display: flex; flex-direction: column; gap: 14px; }
.sec-create-role-fields { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.sec-create-role-field { flex: 1; min-width: 200px; }
.sec-create-role-field label { display: block; font-size: 13px; font-weight: 600; color: #444; margin-bottom: 5px; }
.sec-create-role-field input[type="text"] {
    width: 100%; padding: 9px 12px; border: 1.5px solid #ddd; border-radius: 7px;
    font-size: 14px; background: #fff; outline: none; font-family: inherit;
}
.sec-create-role-field input[type="text"]:focus { border-color: #1e3a5f; box-shadow: 0 0 0 3px rgba(30,58,95,0.08); }
.sec-create-role-color { flex: 0 0 auto; min-width: 70px; }
.sec-create-role-color input[type="color"] {
    width: 44px; height: 36px; padding: 2px; border: 1px solid #ddd;
    border-radius: 6px; cursor: pointer;
}
.sec-create-role-actions { display: flex; gap: 8px; align-items: center; }

/* Delete role section */
.sec-delete-role {
    margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee;
    display: flex; align-items: center;
}
.sec-delete-role form { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

@media (max-width: 640px) {
    .sec-create-role-fields { flex-direction: column; }
    .sec-create-role-color { min-width: 100%; }
}

/* SuperAdmin notice */
.sec-super-notice {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 18px; background: #f5f3ff; border: 1px solid #ddd6fe;
    border-radius: 10px; margin-bottom: 20px;
    font-size: 13px; color: #5b21b6; line-height: 1.5;
}
.sec-super-notice svg { flex-shrink: 0; margin-top: 2px; color: #7c3aed; }
.sec-super-notice strong { font-weight: 600; }

/* Permission groups */
.sec-perm-group {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    margin-bottom: 12px; overflow: hidden;
}
.sec-perm-group-header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 18px; background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
}
.sec-perm-group-header h4 { margin: 0; font-size: 14px; font-weight: 600; color: #334155; flex: 1; }
.sec-perm-group-icon { color: #64748b; display: flex; }

/* Permissions matrix table */
.sec-matrix-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.sec-matrix-topbar-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
/* Dropdown for Predet. */
.sec-dropdown {
    position: relative;
    display: inline-block;
}
.sec-dropdown-trigger { display: inline-flex; align-items: center; gap: 4px; }
.sec-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    min-width: 210px;
    padding: 4px 0;
}
.sec-dropdown.open .sec-dropdown-menu { display: block; }
.sec-dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    text-align: left;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
    transition: background 0.1s;
}
.sec-dropdown-item:hover { background: #f1f5f9; }
.sec-dropdown-item--danger { color: #dc2626; }
.sec-dropdown-item--danger:hover { background: #fef2f2; }
.sec-matrix-wrap {
    overflow: auto;
    max-height: calc(100vh - 280px);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
}
.sec-matrix {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    overflow: visible;
    box-shadow: none;
    border-radius: 0;
}
.sec-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fafc;
    color: #334155;
    border-bottom: 2px solid #e2e8f0;
}
.sec-matrix-corner {
    width: 220px;
    min-width: 180px;
    padding: 8px 14px !important;
}
.sec-matrix-role-hd {
    text-align: center;
    padding: 8px 10px 4px;
    min-width: 120px;
    white-space: nowrap;
    vertical-align: middle;
}
.sec-matrix-role-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 20px;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.2px;
}
.sec-matrix-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border: none; background: none;
    color: #cbd5e1;
    cursor: pointer;
    border-radius: 4px;
    margin-left: 2px;
    vertical-align: middle;
    transition: color 0.15s, background 0.15s;
}
.sec-matrix-del:hover { color: #dc2626; background: #fee2e2; }
.sec-matrix-role-line {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.sec-matrix-todos-row td {
    border-bottom: 2px solid #cbd5e1;
    background: #f0f0f0;
}
.sec-matrix-todos-row:hover td {
    background: #f0f0f0;
}
.sec-matrix-todos-label {
    padding: 8px 14px !important;
    font-weight: 700;
    font-size: 13px;
    color: #475569;
}
.sec-matrix-todos-row .sec-matrix-cell {
    padding: 8px 4px !important;
}
.sec-col-toggle {
    width: 15px; height: 15px;
    cursor: pointer;
    accent-color: #78909c !important;
}
.sec-matrix-section td {
    padding: 10px 14px 6px;
    font-weight: 700;
    font-size: 13px;
    color: #1e3a5f;
    background: #edf2f7;
    border-top: 2px solid #cbd5e1;
    border-bottom: 1px solid #cbd5e1;
}
.sec-matrix-section .sec-matrix-cell {
    padding: 8px 4px 4px;
    background: #edf2f7;
    border-top: 2px solid #cbd5e1;
    border-bottom: 1px solid #cbd5e1;
}
.sec-matrix-section .sec-matrix-cell input.sec-section-toggle {
    width: 15px; height: 15px;
    cursor: pointer;
    accent-color: #78909c !important;
}
.sec-matrix-section .sec-matrix-cell input.sec-section-toggle:checked {
    accent-color: #78909c !important;
}
.sec-matrix-section td .sec-perm-group-icon {
    display: inline-flex;
    vertical-align: middle;
    margin-right: 6px;
    color: #64748b;
}
td.sec-matrix-scope-label {
    padding: 7px 14px 3px;
    font-weight: 600;
    font-size: 12px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.sec-matrix-indent { padding-left: 28px !important; }
.sec-matrix-indent2 { padding-left: 42px !important; }
.sec-matrix-perm td {
    border-bottom: 1px solid #f5f5f5;
}
.sec-matrix-perm:last-child td { border-bottom: none; }
.sec-matrix-action {
    padding: 6px 14px;
    color: #555;
    font-size: 13px;
}
.sec-matrix-cell {
    text-align: center;
    padding: 6px 4px;
}
.sec-matrix-cell input[type="checkbox"] {
    width: 16px; height: 16px;
    cursor: pointer;
    accent-color: #1e3a5f;
}

/* Simulate role link in matrix header */
.sec-matrix-simulate {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    color: #94a3b8;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s;
}
.sec-matrix-simulate:hover { color: #1e3a5f; }
.sec-matrix-simulate svg { flex-shrink: 0; }

/* Simulation banner */
.sim-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.sim-banner a {
    color: #fff;
    background: rgba(255,255,255,0.2);
    padding: 3px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: background 0.15s;
}
.sim-banner a:hover { background: rgba(255,255,255,0.35); }
.sim-banner ~ .layout { margin-top: 38px; }

/* ── Custom Modal ──────────────────────────── */
.timi-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: timiModalFadeIn 0.15s ease;
}
@keyframes timiModalFadeIn { from { opacity: 0; } to { opacity: 1; } }
.timi-modal {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
    width: 90%;
    max-width: 480px;
    animation: timiModalSlideIn 0.2s ease;
}
@keyframes timiModalSlideIn { from { transform: translateY(-16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.timi-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 0;
}
.timi-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}
.timi-modal-close {
    background: none;
    border: none;
    font-size: 22px;
    color: #94a3b8;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s;
}
.timi-modal-close:hover { color: #334155; }
.timi-modal-body {
    padding: 16px 22px;
    font-size: 14px;
    color: #475569;
    line-height: 1.5;
}
.timi-modal-body p { margin: 0 0 8px; }
.timi-modal-body p:last-child { margin-bottom: 0; }
.timi-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 22px 18px;
}
.btn-danger {
    background: #dc2626 !important;
    color: #fff !important;
    border-color: #dc2626 !important;
}
.btn-danger:hover { background: #b91c1c !important; }

/* ── Simulation user picker ────────────────── */
.sim-user-list {
    display: flex;
    flex-direction: column;
}
.sim-user-item {
    display: block;
    padding: 12px 22px;
    text-decoration: none;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.12s;
    cursor: pointer;
}
.sim-user-item:last-child { border-bottom: none; }
.sim-user-item:hover { background: #f0f7ff; }
.sim-user-item.sim-user-generic {
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
}
.sim-user-item.sim-user-generic:hover { background: #eef2ff; }
.sim-user-name {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}
.sim-user-email {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
}

/* Alerts */
.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.alert-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.alert-danger  { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

/* ── Field validation states ─────────────── */
.field--ok .combo-input,
.field--ok select,
.field--ok input[type="text"],
.field--ok input[type="number"] {
    border-color: #16a34a;
    background-color: #f0fdf4;
}
.field--ok .combo-input {
    background: #f0fdf4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat right 10px center;
    background-size: 14px;
}

.field--error .combo-input,
.field--error select,
.field--error input[type="text"],
.field--error input[type="number"] {
    border-color: #dc2626;
    background-color: #fef2f2;
}
.field--error .combo-input {
    background: #fef2f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E") no-repeat right 10px center;
    background-size: 14px;
}

.field--pending .combo-input,
.field--pending select,
.field--pending input[type="text"],
.field--pending input[type="number"] {
    border-color: #f59e0b;
}

/* Quick-add validation error */
.qa-error {
    padding: 8px 14px;
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-size: 13px;
    margin-top: 6px;
}

/* Field validation states for TomSelect in qa-bar */
.qa-field--ok .ts-control { border-color: #16a34a !important; background-color: #f0fdf4 !important; }
.qa-field--error .ts-control { border-color: #dc2626 !important; background-color: #fef2f2 !important; }
.qa-field--pending .ts-control { border-color: #f59e0b !important; }

/* Error state for plain inputs in qa-bar */
.qa-input--error { border-color: #dc2626 !important; background-color: #fef2f2 !important; }

/* ── Smart creation form ──────────────────── */
.smart-card {
    max-width: 480px; margin-bottom: 24px;
}
.smart-card-title {
    display: flex; align-items: center; gap: 6px; margin-bottom: 16px; font-size: 15px; font-weight: 600;
}
.smart-field-row {
    display: flex; gap: 8px; align-items: flex-start;
}
.smart-field-row .combo-wrap { flex: 1; }
.smart-btn-plus {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700; line-height: 1;
    border-radius: 6px; background: #f0f4fa; color: #1e3a5f;
    border: 1px solid #cbd5e1; text-decoration: none; flex-shrink: 0;
    transition: background .15s, border-color .15s, color .15s;
}
.smart-btn-plus:hover { background: #1e3a5f; color: #fff; border-color: #1e3a5f; }

/* Step indicator */
.smart-steps {
    display: flex; align-items: center; gap: 0; margin-bottom: 20px; padding: 0 4px;
}
.smart-step {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 12px; font-weight: 700;
    background: #e2e8f0; color: #94a3b8;
    transition: all .25s ease;
    flex-shrink: 0;
}
.smart-step--active { background: #1e3a5f; color: #fff; box-shadow: 0 0 0 3px rgba(30,58,95,.15); }
.smart-step--done   { background: #16a34a; color: #fff; }
.smart-step-line {
    flex: 1; height: 2px; background: #e2e8f0;
    transition: background .25s ease;
}
.smart-step-line--done { background: #16a34a; }

/* Create option in dropdown */
.combo-option--create {
    border-top: 1px solid #e2e8f0; color: #0d6efd; font-weight: 600; font-size: 13px;
    padding: 10px 12px; cursor: pointer;
    display: flex; align-items: center; gap: 6px;
}
.combo-option--create::before { content: '+'; font-size: 16px; font-weight: 700; }
.combo-option--create:hover { background: #e8f0fe; }

/* Color dot in combo dropdown */
.combo-dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    margin-right: 6px; vertical-align: middle; flex-shrink: 0;
}

/* Status messages */
.smart-status {
    padding: 8px 12px; border-radius: 6px; font-size: 13px; margin-top: 12px;
}
.smart-status--success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.smart-status--error   { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

/* ── Project report table ─────────────────── */
.proj-search-wrap { margin-bottom: 16px; }

.rpt-proj-cell {
    display: flex; align-items: center; gap: 6px;
}
.rpt-proj-name { font-weight: 500; }
.rpt-proj-actions {
    display: flex; gap: 2px; opacity: 0; transition: opacity .15s;
}
tr:hover .rpt-proj-actions,
tr:hover .rpt-sub-actions { opacity: 1; }

.rpt-action {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 4px;
    color: #64748b; text-decoration: none; transition: all .15s;
}
.rpt-action--edit:hover { background: #e8f0fe; color: #1e3a5f; }
.rpt-action--del:hover  { background: #fee2e2; color: #dc2626; }

.rpt-sub-row {
    display: flex; align-items: center; gap: 6px;
    padding: 3px 0; font-size: 13px;
}
.rpt-sub-row + .rpt-sub-row { border-top: 1px solid #f1f5f9; }
.rpt-sub-name { color: #475569; }
.rpt-sub-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }

.report-empty {
    color: #888; font-size: 14px; text-align: center; padding: 24px !important;
}

/* ── Projects page ────────────────────────── */
.proj-search-input {
    width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px;
    font-size: 14px; background: #fff;
}

/* ── Client delete confirmation page ─────── */
.cd-summary { margin-bottom: 20px; }
.cd-summary-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid #f1f5f9; font-size: 14px;
}
.cd-summary-row:last-child { border-bottom: none; }
.cd-count {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%; font-weight: 700; font-size: 13px;
    flex-shrink: 0;
}
.cd-count--danger { background: #fee2e2; color: #991b1b; }
.cd-count--warning { background: #fef3c7; color: #92400e; }
.cd-detail-toggle {
    background: none; border: none; color: #0d6efd; cursor: pointer;
    font-size: 13px; padding: 0; text-decoration: underline;
}
.cd-detail-list {
    list-style: none; margin: 8px 0 0 38px; font-size: 13px; color: #555;
}
.cd-detail-list li { padding: 3px 0; }
.cd-detail-list li::before { content: '— '; color: #94a3b8; }
.cd-actions {
    display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap;
}
.btn-danger {
    background: #dc2626; color: #fff; border: none; padding: 9px 18px;
    border-radius: 6px; font-size: 14px; cursor: pointer; font-weight: 500;
}
.btn-danger:hover { background: #b91c1c; }
.btn-outline {
    background: #fff; color: #334155; border: 1px solid #cbd5e1;
    padding: 9px 18px; border-radius: 6px; font-size: 14px; cursor: pointer;
}
.btn-outline:hover { background: #f8fafc; }

/* Responsive */
@media (max-width: 640px) {
    .sec-tabs { width: 100%; }
    .sec-tab { flex: 1; justify-content: center; padding: 9px 12px; font-size: 13px; }
    .sec-field-row { flex-wrap: wrap; }
    .sec-field-row label { min-width: 100%; }
    .sec-matrix-corner { width: 140px; min-width: 120px; }
    .sec-matrix-role-hd { min-width: 70px; padding: 8px 4px 6px; font-size: 11px; }
    .sec-matrix-action { padding: 5px 8px; font-size: 12px; }
    .sec-matrix-cell input[type="checkbox"] { width: 14px; height: 14px; }
    .smart-card { max-width: 100%; }
    .cd-actions { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════
   Bulk Upload — Subida masiva de horas
   ═══════════════════════════════════════════════════════════════ */

/* Dropzone */
.bulk-dropzone {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    background: #fafbfc;
}
.bulk-dropzone:hover {
    border-color: #94a3b8;
    background: #f1f5f9;
}
.bulk-dropzone--active {
    border-color: #1e3a5f !important;
    background: #eff6ff !important;
}

.bulk-dropzone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.bulk-dropzone-text {
    font-size: 15px;
    font-weight: 600;
    color: #475569;
    margin: 0;
}

.bulk-dropzone-hint {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
}
.bulk-dropzone-hint a {
    color: #1e3a5f;
    font-weight: 600;
    text-decoration: underline;
}
.bulk-dropzone-hint a:hover { color: #162d4a; }

.bulk-dropzone-file {
    font-size: 13px;
    font-weight: 600;
    margin-top: 6px;
}

/* Summary cards */
.bulk-summary {
    display: flex;
    gap: 14px;
    margin-bottom: 20px;
}

.bulk-summary-item {
    flex: 1;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.bulk-summary--ok { border-color: #a7f3d0; background: #f0fdf4; }
.bulk-summary--err { border-color: #fecaca; background: #fef2f2; }

.bulk-summary-num {
    font-size: 28px;
    font-weight: 700;
    color: #1e3a5f;
    line-height: 1;
}
.bulk-summary--ok .bulk-summary-num { color: #16a34a; }
.bulk-summary--err .bulk-summary-num { color: #dc2626; }

.bulk-summary-label {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Results table */
.bulk-results-table { font-size: 13px; }
.bulk-results-table th { font-size: 11px; }

.bulk-row--error { background: #fef8f8; }
.bulk-row--error:hover td { background: #fef2f2 !important; }

.bulk-cell--error {
    background: #fef2f2;
    border-left: 3px solid #dc2626;
}

.bulk-cell--ok { }

.bulk-cell-num {
    font-weight: 600;
    color: #94a3b8;
    font-size: 12px;
    text-align: center;
    width: 40px;
}

.bulk-cell-status {
    text-align: center;
    width: 40px;
}

.bulk-icon-ok { color: #16a34a; }
.bulk-icon-err { color: #dc2626; }

.bulk-row-remove {
    background: none;
    border: 1px solid #fca5a5;
    color: #dc2626;
    cursor: pointer;
    border-radius: 4px;
    padding: 2px 4px;
    display: inline-flex;
    align-items: center;
    transition: all 0.15s;
}
.bulk-row-remove:hover {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
}

.bulk-btn-discard {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #fff !important;
}
.bulk-btn-discard:hover {
    background: #d97706 !important;
    border-color: #d97706 !important;
}

/* Bulk upload: tabs */
.bulk-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border-bottom: 2px solid #e2e8f0;
}
.bulk-tab {
    padding: 8px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
    transition: all 0.15s;
}
.bulk-tab:hover { color: #334155; }
.bulk-tab.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

/* Bulk upload: paste area */
.bulk-paste-area {
    width: 100%;
    min-height: 200px;
    padding: 12px;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    font-family: monospace;
    font-size: 13px;
    resize: vertical;
    transition: border-color 0.15s;
    box-sizing: border-box;
    line-height: 1.5;
}
.bulk-paste-area:focus {
    outline: none;
    border-color: #2563eb;
}
.bulk-paste-area::placeholder {
    color: #94a3b8;
}

.bulk-error-msg {
    font-size: 11px;
    color: #dc2626;
    margin-top: 3px;
    font-weight: 500;
    line-height: 1.3;
}

/* Help section */
.bulk-help {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
}

.bulk-help h4 {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    margin: 0 0 10px;
}

.bulk-help p {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 12px;
    line-height: 1.5;
}

.bulk-help-table-wrap {
    overflow-x: auto;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.bulk-help-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: #fff;
}

.bulk-help-table th {
    background: #f1f5f9;
    color: #64748b;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid #e2e8f0;
}

.bulk-help-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
    color: #334155;
    text-align: center;
}
.bulk-help-table tr:last-child td { border-bottom: none; }

.bulk-help-example td {
    color: #94a3b8;
    font-style: italic;
    font-size: 12px;
}

.bulk-help-rules {
    margin-top: 20px;
}

.bulk-help-rules ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bulk-help-rules li {
    padding: 6px 0;
    font-size: 13px;
    color: #475569;
    border-bottom: 1px solid #f1f5f9;
    line-height: 1.5;
}
.bulk-help-rules li:last-child { border-bottom: none; }
.bulk-help-rules li strong { color: #1e3a5f; }

.bulk-help-note {
    margin-top: 14px;
    padding: 10px 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    font-size: 13px;
    color: #92400e;
    font-weight: 500;
}

/* Detection info */
.bulk-detect-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 16px;
}
.bulk-detect-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #1e40af;
    margin-bottom: 10px;
}
.bulk-detect-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.bulk-detect-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #fff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    font-size: 12px;
    color: #334155;
}
.bulk-detect-tag strong {
    color: #1e3a5f;
    font-size: 11px;
}

/* ── Environment badge ──────────────────── */
.env-badge { font-size: 9px; padding: 1px 6px; border-radius: 8px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; vertical-align: middle; margin-left: 6px; }
.env-badge--dev { background: #ff6b35; color: #fff; }
.env-badge--prd { background: #dc3545; color: #fff; }

/* ── Audit page tabs ───────────────────────────────────────────────────── */
.audit-tabs {
    display: flex; gap: 4px; margin-bottom: 24px;
    border-bottom: 2px solid #e2e8f0; padding-bottom: 0;
}
.audit-tab {
    padding: 10px 20px; font-size: 14px; font-weight: 500;
    color: #64748b; background: none; border: none;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    cursor: pointer; text-decoration: none;
    transition: color .15s, border-color .15s;
    display: inline-flex; align-items: center; gap: 6px;
}
.audit-tab:hover { color: #1e3a5f; }
.audit-tab.active {
    color: #1e3a5f; border-bottom-color: #1e3a5f; font-weight: 600;
}
.audit-tab-icon { font-size: 15px; }
.audit-tab-panel { display: none; }
.audit-tab-panel.active { display: block; }

/* Security log sub-section titles */
.seclog-section-title {
    font-size: 16px; font-weight: 600; color: #1e3a5f;
    margin: 28px 0 14px; padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
    display: flex; align-items: center; gap: 8px;
}
.seclog-section-title:first-child { margin-top: 0; }
.seclog-section-icon { font-size: 16px; }

/* Severity badges */
.severity-badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 11px; font-weight: 600; text-transform: capitalize;
}
.severity-badge--info     { background: #dbeafe; color: #1e40af; }
.severity-badge--warning  { background: #fef3c7; color: #92400e; }
.severity-badge--critical { background: #fee2e2; color: #991b1b; }

/* Access result badges */
.result-badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 11px; font-weight: 600;
}
.result-badge--granted { background: #d1fae5; color: #065f46; }
.result-badge--denied  { background: #fee2e2; color: #991b1b; }
.result-badge--no_auth { background: #f1f5f9; color: #64748b; }
.result-badge--error   { background: #ffedd5; color: #9a3412; }

/* Storage info box */
.seclog-storage-info {
    margin-top: 16px; padding: 12px 16px;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
    font-size: 13px; color: #64748b;
    display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
}
.seclog-storage-info strong { color: #334155; font-weight: 600; }

/* ── Bulk Approve/Reject Bar v3 ──────────────────────────────────────────── */
.bulk-bar-v3 {
    border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 16px;
    margin-bottom: 16px; transition: all 0.2s;
}
.bulk-bar-v3.active { border-color: #2563eb; background: #f8fafc; }
.bulk-bar-v3__count {
    font-size: 13px; color: #64748b; font-weight: 500; margin-bottom: 8px;
}
.bulk-bar-v3__count strong { color: #1e293b; }
.bulk-bar-v3__buttons {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.bulk-bar-v3__btn {
    padding: 7px 18px; border: none; border-radius: 6px; font-size: 13px;
    font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.bulk-bar-v3__btn--approve { background: #10b981; color: #fff; }
.bulk-bar-v3__btn--approve:hover:not(.bulk-bar-v3__btn--disabled) { background: #059669; }
.bulk-bar-v3__btn--reject { background: #fff; color: #dc2626; border: 1.5px solid #fecaca; }
.bulk-bar-v3__btn--reject:hover:not(.bulk-bar-v3__btn--disabled) { background: #fef2f2; }
.bulk-bar-v3__btn--disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.bulk-bar-v3__textarea {
    width: 100%; border: 1.5px solid #e2e8f0; border-radius: 6px;
    padding: 8px 10px; font-size: 13px; resize: vertical; min-height: 36px;
    outline: none; font-family: inherit; margin-top: 10px; transition: border-color 0.2s;
}
.bulk-bar-v3__textarea:focus { border-color: #2563eb; outline: none; box-shadow: none; }
.bulk-bar-v3__textarea::placeholder { color: #94a3b8; }
.bulk-bar-v3__textarea.error { border-color: #dc2626; outline: none; box-shadow: none; }
.bulk-bar-v3__textarea.error:focus { border-color: #dc2626; outline: none; box-shadow: none; }
.bulk-bar-v3__error { font-size: 13px; color: #dc2626; margin-top: 4px; }

/* Entry row click-to-select — !important needed to override .report-table tbody tr:hover */
.entry-row { cursor: pointer; user-select: none; }
.report-table tbody tr.entry-row.selected td,
.report-table tbody tr.entry-row.selected:hover td { background: rgba(37, 99, 235, 0.12) !important; }
.entry-row .bulk-check { width: 20px; height: 20px; accent-color: #2563eb; cursor: pointer; }

/* Slide-out animation for approved/rejected rows */
.entry-row.slide-out {
    animation: entrySlideOut 0.4s ease forwards;
}
@keyframes entrySlideOut {
    0%   { opacity: 1; max-height: 60px; }
    100% { opacity: 0; max-height: 0; padding: 0; border-bottom-width: 0; overflow: hidden; }
}

/* Toast notification */
.approve-toast {
    position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
    background: #fff; padding: 8px 16px; border-radius: 8px; font-size: 13px;
    font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,.08); display: none;
    z-index: 10000; animation: approveToastIn 0.2s ease;
}
.approve-toast--success { color: #15803d; border: 1px solid #bbf7d0; }
.approve-toast--reject  { color: #dc2626; border: 1px solid #fecaca; }
@keyframes approveToastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (max-width: 600px) {
    .bulk-bar-v3 { display: flex; flex-direction: column; }
    .bulk-bar-v3__count { text-align: center; }
    .bulk-bar-v3__textarea { order: 1; margin-top: 0; margin-bottom: 10px; }
    .bulk-bar-v3__buttons { order: 2; flex-direction: column; justify-content: center; margin-top: 0; }
    .bulk-bar-v3__btn { width: 100%; text-align: center; }
    .bulk-bar-v3__error { order: 3; }
}

/* Responsive */
@media (max-width: 640px) {
    .bulk-summary { flex-direction: column; gap: 8px; }
    .bulk-dropzone { padding: 24px 16px; }
    .bulk-results-table { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   Client Report — Informe a cliente (approve.php tab)
   ═══════════════════════════════════════════════════════════════ */

/* Report sections (grouped by status) */
.report-section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 16px;
    overflow: hidden;
}
.report-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}
.report-section-header .hours-mono { margin-left: auto; }
.report-section-body { padding: 0; }
.report-section-body .report-table { border-radius: 0; box-shadow: none; }

/* Green left border for approved/authorized */
.report-section--approved {
    border-left: 4px solid #16a34a;
}
.report-section--approved .report-section-header {
    background: #f0fdf4;
    color: #065f46;
}

/* Yellow left border for pending */
.report-section--pending {
    border-left: 4px solid #f59e0b;
}
.report-section--pending .report-section-header {
    background: #fffbeb;
    color: #92400e;
}

/* Grand total bar */
.report-grand-total {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 14px 18px;
    background: #1e3a5f;
    color: #fff;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 600;
}
.report-grand-total .hours-mono { color: #fff; font-size: 16px; }

/* Action buttons row */
.report-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* Variable insertion buttons */
.variable-btn {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.variable-btn:hover {
    background: #1e3a5f;
    color: #fff;
    border-color: #1e3a5f;
}

/* Quill editor min-height override */
.ql-editor-wrap .ql-editor {
    min-height: 300px;
    font-family: system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.6;
}
.ql-editor-wrap {
    border: 1px solid #ccc;
    border-radius: 0 0 6px 6px;
    background: #fff;
}
.ql-editor-wrap .ql-toolbar.ql-snow {
    border: 1px solid #ccc;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background: #f8fafc;
}
.ql-editor-wrap .ql-container.ql-snow {
    border: none;
}

/* Quill in modal — reduced height */
.reject-modal .ql-editor-wrap .ql-editor { min-height: 200px; max-height: 40vh; overflow-y: auto; }
/* Quill table button icon */
.ql-insertTable { position: relative; }
.ql-insertTable svg { vertical-align: middle; }

/* Quill editor table styles */
.ql-editor table { border-collapse: collapse; width: 100%; margin: 8px 0; }
.ql-editor th, .ql-editor td { padding: 6px 10px; }

/* Client report filter bar */
.report-filter-bar {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 20px;
    display: flex;
    gap: 14px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.report-filter-bar .filter-field {
    flex: 1;
    min-width: 150px;
}
.report-filter-bar .filter-field--btn {
    flex: 0 0 auto;
}

/* Quick period buttons */
.quick-period-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: -12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.quick-period-label {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
}
.quick-period-btn {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 12px;
    color: #475569;
    cursor: pointer;
    transition: all .15s;
}
.quick-period-btn:hover {
    background: #e2e8f0;
    color: #1e293b;
    border-color: #cbd5e1;
}

/* Searchable select */
.searchable-select { position: relative; }
.searchable-select-input {
    width: 100%; padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 6px;
    font-size: 14px; background: #fff; cursor: text;
}
.searchable-select-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.15); }
.searchable-select-dropdown {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
    max-height: 200px; overflow-y: auto; background: #fff;
    border: 1px solid #d1d5db; border-top: none; border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.searchable-select.open .searchable-select-dropdown { display: block; }
.searchable-select.open .searchable-select-input { border-radius: 6px 6px 0 0; }
.searchable-select-option {
    padding: 8px 10px; font-size: 14px; cursor: pointer;
}
.searchable-select-option:hover,
.searchable-select-option.highlighted { background: #eff6ff; color: #1e3a5f; }
.searchable-select-option.hidden { display: none; }

/* Report filter validation states */
.rpt-field--ok select,
.rpt-field--ok .searchable-select-input,
.rpt-field--ok .flatpickr-input,
.rpt-field--ok input.date-range-input { border-color: #16a34a !important; background-color: #f0fdf4 !important; }
.rpt-field--pending select,
.rpt-field--pending .searchable-select-input,
.rpt-field--pending .flatpickr-input,
.rpt-field--pending input.date-range-input { border-color: #f59e0b !important; background-color: #fffbeb !important; }
.rpt-field--error select,
.rpt-field--error .searchable-select-input,
.rpt-field--error .flatpickr-input,
.rpt-field--error input.date-range-input { border-color: #dc2626 !important; background-color: #fef2f2 !important; }
.rpt-error {
    flex-basis: 100%;
    color: #dc2626;
    font-size: 13px;
    margin-top: -4px;
    padding: 6px 10px;
    background: #fef2f2;
    border-radius: 6px;
    border: 1px solid #fecaca;
}

/* Report send form */
.report-send-form {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 20px;
    margin-top: 16px;
}
.report-field {
    margin-bottom: 14px;
}
.report-field-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-bottom: 5px;
}
.report-field-hint {
    font-weight: 400;
    color: #999;
    font-size: 12px;
}
.report-field-input {
    max-width: 500px;
    width: 100%;
}

/* CC/CCO toggle */
.report-cc-toggle {
    margin-bottom: 10px;
}
.report-cc-link {
    background: none;
    border: none;
    color: #64748b;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
    transition: color .15s;
}
.report-cc-link:hover {
    color: #1e3a5f;
}
.report-cc-fields {
    margin-bottom: 14px;
    padding-left: 0;
}
.report-cc-fields .report-field {
    margin-bottom: 10px;
}

/* Format selector (radio as toggle pills) */
.report-format-selector {
    display: inline-flex;
    gap: 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}
.report-format-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    font-size: 13px;
    color: #475569;
    cursor: pointer;
    background: #fff;
    border-right: 1px solid #e2e8f0;
    transition: all .15s;
    user-select: none;
}
.report-format-option:last-child {
    border-right: none;
}
.report-format-option input[type="radio"] {
    display: none;
}
.report-format-option:hover:not(.report-format-option--active) {
    background: #f1f5f9;
}
.report-format-option--active,
.report-format-option--active * {
    background: #1e3a5f !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
}
.report-format-option--active svg,
.report-format-option--active svg * {
    stroke: #fff !important;
}

/* Mail editor inline */
.report-mail-toggle {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.report-mail-editor {
    margin-bottom: 14px;
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.report-mail-textarea {
    width: 100%;
    min-height: 180px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
    line-height: 1.5;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    resize: vertical;
    background: #fff;
}
.report-mail-textarea:focus {
    outline: none;
    border-color: #1e3a5f;
    box-shadow: 0 0 0 2px rgba(30,58,95,.1);
}

/* Template config link (subtle) */
.report-template-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #94a3b8;
    font-size: 12px;
    text-decoration: none;
    transition: color .15s;
}
.report-template-link:hover {
    color: #1e3a5f;
}

@media (max-width: 640px) {
    .report-filter-bar { flex-direction: column; align-items: stretch; }
    .report-actions { flex-direction: column; }
}

/* Floating action button (add hours) */
.fab-add {
    position: fixed;
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    right: calc(28px + env(safe-area-inset-right, 0px));
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #1e3a5f;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    text-decoration: none;
    z-index: 100;
    transition: background .15s, transform .15s, box-shadow .15s;
}
.fab-add:hover {
    background: #2c4f7c;
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.fab-add:active { transform: scale(.96); }
.fab-add--clicked {
    animation: fab-pulse .25s ease-out;
    background: #2c4f7c;
}
.fab-add--clicked svg {
    animation: fab-rotate .25s ease-out;
}
@keyframes fab-pulse {
    0%   { transform: scale(1); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
    50%  { transform: scale(1.18); box-shadow: 0 8px 28px rgba(30,58,95,.4); }
    100% { transform: scale(1); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
}
@keyframes fab-rotate {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(90deg); }
}
@media (max-width: 640px) {
    .fab-add {
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        right: calc(18px + env(safe-area-inset-right, 0px));
        width: 48px;
        height: 48px;
    }
}

/* ── entry_add form reveal (from FAB click) ──────────────────────────────── */
.entry-reveal .main-content .card {
    animation: entryFadeUp .3s ease-out both;
}
@keyframes entryFadeUp {
    0%   { opacity: 0; transform: translateY(14px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ── View toggle (list/calendar) ─────────────────────────────────────────── */
.view-toggle {
    display: inline-flex;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    overflow: hidden;
}
.view-toggle-btn {
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 500;
    background: #fff;
    color: #64748b;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background .15s, color .15s;
}
.view-toggle-btn:not(:last-child) { border-right: 1px solid #cbd5e1; }
.view-toggle-btn.active { background: #1e3a5f; color: #fff; }
.view-toggle-btn:hover:not(.active) { background: #f8fafc; }

/* ── Year calendar (holidays) ────────────────────────────────────────────── */
.year-calendar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.mini-month-title {
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    color: #1e3a5f;
    margin-bottom: 6px;
}
.mini-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    font-size: 11px;
    text-align: center;
}
.mini-month-grid .day-header {
    font-weight: 600;
    color: #94a3b8;
    padding: 2px 0;
}
.mini-month-grid .day-cell {
    padding: 3px 0;
    border-radius: 3px;
    cursor: default;
}
.mini-month-grid .day-cell.holiday {
    background: #e2e8f0;
    font-weight: 600;
}
.mini-month-grid .day-cell.holiday.inactive {
    opacity: 0.4;
}
.mini-month-grid .day-cell.today {
    outline: 2px solid #1e3a5f;
    outline-offset: -1px;
}
.mini-month-grid .day-cell.empty {
    visibility: hidden;
}
@media (max-width: 900px) {
    .year-calendar { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .year-calendar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
    .year-calendar { grid-template-columns: 1fr; }
}