/* ===============================
   RESPONSIVE - FICHA EMPLEADO
   =============================== */

.employee-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: flex-start;
}

.employee-info-card {
    min-width: 0;
}

.employee-work-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.employee-work-item {
    min-width: 0;
}

@media (max-width: 1024px) {
    .employee-work-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .employee-info-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .employee-work-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

:root {
    --bg: #f2f7fb;
    --panel: #ffffff;
    --muted: #6b7280;
    --accent: #0b5ed7;
    --card-border: #e6eef6;
}
/* Dark theme variables */
.dark-theme {
    --bg: #0b1220;
    --panel: #071017;
    --muted: #9aa5b1;
    --accent: #14aaf5;
    --card-border: #102029;
}
.theme-transition *,
.theme-transition {
    transition: background-color 260ms ease, color 260ms ease,
        border-color 260ms ease, box-shadow 260ms ease;
}

/* Styled toggle checkbox to look like a switch */
#modo-oscuro-checkbox {
    -webkit-appearance: none;
    appearance: none;
    width: 48px;
    height: 26px;
    border-radius: 16px;
    background: #d1e7f3;
    position: relative;
    cursor: pointer;
    border: 1px solid rgba(16, 24, 40, 0.06);
    outline: none;
    vertical-align: middle;
    transition: background 0.18s ease, border-color 0.18s ease;
}
#modo-oscuro-checkbox::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 2px 6px rgba(2, 6, 23, 0.12);
    transition: left 0.18s ease, background 0.18s ease;
}
#modo-oscuro-checkbox:checked {
    background: var(--accent);
    border-color: rgba(14, 165, 233, 0.9);
}
#modo-oscuro-checkbox:checked::after {
    left: 27px;
    background: white;
}

/* Improve dark theme toggle appearance (inverse) */
.dark-theme #modo-oscuro-checkbox {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.06);
}
.dark-theme #modo-oscuro-checkbox::after {
    background: #071017;
}
.dark-theme #modo-oscuro-checkbox:checked {
    background: #06a6ff;
}
.dark-theme #modo-oscuro-checkbox:checked::after {
    background: #071017;
}

/* Subtle shadow for panels to separate layers in dark mode */
.dark-theme .card,
.dark-theme .big-panel,
.dark-theme .list-card {
    box-shadow: 0 6px 18px rgba(2, 6, 23, 0.45);
}

/* Scrollbar for dark theme */
.dark-theme ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.dark-theme ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}
.dark-theme ::-webkit-scrollbar-track {
    background: transparent;
}

/* Slightly brighter table headers and rows separation */
.dark-theme .table thead th {
    color: #bfe9ff;
}
.dark-theme .table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.01);
}

/* Focus outlines for accessibility */
.dark-theme :focus {
    outline: 3px solid rgba(14, 165, 233, 0.14);
    outline-offset: 2px;
}

/* Dark-theme element overrides: improve contrast and visibility */
.dark-theme body {
    background: var(--bg);
    color: #cbd5e1;
}
.dark-theme .app-shell {
    background: var(--bg);
}
.dark-theme .sidebar {
    background: #04121a;
    color: #9fbfcf;
    border-right-color: var(--card-border);
}
.dark-theme .sidebar .brand h2 {
    color: #9fd6ff;
}
.dark-theme .nav-item {
    color: #a9cbd8;
    background: transparent;
}
.dark-theme .nav-item:hover {
    background: rgba(20, 170, 245, 0.06);
}
.dark-theme .main-area .content {
    background: transparent;
}
.dark-theme .card,
.dark-theme .big-panel,
.dark-theme .list-card,
.dark-theme .modal-content {
    background: var(--panel);
    border-color: var(--card-border);
    color: #cfe7f5;
}
.dark-theme .card .title,
.dark-theme .table thead th {
    color: #9fbfcf;
}
.dark-theme .table th,
.dark-theme .table td {
    color: #cfe7f5;
    border-color: rgba(255, 255, 255, 0.03);
}
.dark-theme .table td.text-right {
    color: #cfe7f5;
}
.dark-theme .table td.actions .btn-secondary {
    background: rgba(255, 255, 255, 0.03);
    color: #8fd0ff;
    border-color: rgba(255, 255, 255, 0.04);
}
.dark-theme .table td.actions .btn-danger {
    background: #ef4444;
}
.dark-theme .btn {
    color: #9fd6ff;
}
.dark-theme .btn-primary {
    background: #0ea5ff;
}
.dark-theme .btn-primary:hover {
    opacity: 0.95;
}
.dark-theme .btn-danger {
    background: #ef4444;
}
.dark-theme form input,
.dark-theme form select,
.dark-theme form textarea {
    background: #071722;
    color: #d1e7f3;
    border-color: #102029;
}
.dark-theme .config-sidebar ul li {
    background: linear-gradient(180deg, #06202a, #071a22);
    border-color: var(--card-border);
    color: #9fbfcf;
}
.dark-theme .config-sidebar ul li.active {
    background: #0b2732;
    border-left-color: #0ea5ff;
    box-shadow: none;
}
.dark-theme .table-header h3 {
    color: #cfe7f5;
}
.dark-theme .modal {
    background: rgba(2, 6, 23, 0.7);
}
.dark-theme .modal-body label,
.dark-theme label {
    color: #cfe7f5;
}
.dark-theme .list-title,
.dark-theme .page-title {
    color: #dff3ff;
}

/* Inputs and small helpers */
.dark-theme .search-input {
    background: #071722;
    border-color: #102029;
    color: #d1e7f3;
}
.dark-theme .badge.activo {
    background: #1f9d4a;
}
.dark-theme .badge.inactivo {
    background: #6b7280;
}

* {
    box-sizing: border-box;
}
body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
        Roboto, "Helvetica Neue", Arial;
    background: var(--bg);
    color: #0f172a;
    margin: 0;
}

/* layout */
.app-shell {
    display: flex;
    min-height: 100vh;
}
.sidebar {
    width: 220px;
    background: #eaf6fb;
    padding: 24px 12px;
    border-right: 1px solid var(--card-border);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.sidebar .brand {
    transition: opacity 0.18s ease;
}
.app-shell .sidebar.collapsed {
    width: 64px !important;
    padding: 12px 6px !important;
    overflow: hidden;
}
.app-shell .sidebar.collapsed .brand h2 {
    display: none !important;
}
.app-shell .sidebar.collapsed nav {
    align-items: flex-start !important;
}
.app-shell .sidebar.collapsed nav .nav-item {
    justify-content: center !important;
    padding: 10px 6px !important;
}
.app-shell .sidebar.collapsed nav .nav-item .icon {
    margin-right: 0 !important;
    font-size: 18px;
}
.app-shell .sidebar.collapsed nav .nav-item .label {
    display: none !important;
}

/* Diagnostic helper: when collapsed, add a faint border so user sees change (can be removed later) */
.app-shell .sidebar.collapsed {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

/* Extra defensive rules: when body has the collapsed flag, hide labels with highest priority */
body.sidebar-collapsed .app-shell .sidebar {
    width: 64px !important;
    padding: 12px 6px !important;
}
body.sidebar-collapsed .app-shell .sidebar .brand h2 {
    display: none !important;
}
body.sidebar-collapsed .app-shell .sidebar nav .nav-item {
    justify-content: center !important;
    padding: 10px 6px !important;
}
body.sidebar-collapsed .app-shell .sidebar nav .nav-item .icon {
    margin-right: 0 !important;
}
body.sidebar-collapsed .app-shell .sidebar nav .nav-item .label {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.sidebar .brand {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 18px;
}
.sidebar .brand h2 {
    font-size: 18px;
    margin: 0;
    color: #0369a1;
}
.nav-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    color: #0b556d;
    text-decoration: none;
    margin-bottom: 6px;
}
.nav-item:hover {
    background: rgba(11, 94, 215, 0.06);
}
.nav-item .icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    border-radius: 6px;
    background: transparent;
}
.nav-item .label {
    display: inline-block;
}

.main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Prevents flex child from expanding infinitely */
    width: 100%; /* Ensures it stays within bounds */
}
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background: transparent;
}
.page-title {
    font-size: 20px;
    font-weight: 600;
}

.content {
    padding: 18px 24px;
}

/* header cards */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 18px;
}
.card {
    background: var(--panel);
    border: 1px solid var(--card-border);
    padding: 18px;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}
.card .title {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 8px;
}
.card .value {
    font-size: 22px;
    font-weight: 700;
}
.big-panel {
    background: var(--panel);
    border: 1px solid var(--card-border);
    padding: 20px;
    border-radius: 10px;
    min-height: 280px;
}

.cards-row {
    display: flex;
    gap: 16px;
}

/* empleados table */
.table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.table th,
.table td {
    padding: 14px 18px;
    border-bottom: 1px solid #eef3f7;
    vertical-align: middle;
    box-sizing: border-box;
    font-size: 15px;
    line-height: 1.4;
}
.table thead th {
    font-weight: 700;
    color: var(--muted);
    background: transparent;
    text-align: left;
}
.table td {
    text-align: left;
}
.table td.text-right {
    text-align: right;
}

/* Make sure header and body cells share the exact box model so content aligns under each header */
.table thead th,
.table tbody td {
    padding-top: 14px;
    padding-bottom: 14px;
}
.table thead th {
    border-bottom: 1px solid #eef3f7;
}

/* Keep table responsive without changing layout: allow horizontal scroll on small screens */
.table-responsive {
    overflow-x: auto;
}

/* Specific table column sizing to keep header aligned with content */
.table-departamentos thead th:nth-child(1) {
    width: 42%;
}
.table-departamentos thead th:nth-child(2) {
    width: 38%;
}
.table-departamentos thead th:nth-child(3) {
    width: 10%;
}
.table-departamentos thead th:nth-child(4) {
    width: 10%;
}

/* Aumentar separación específica entre la columna "Puestos" y la columna "Acciones" en la tabla de Departamentos */
.table-departamentos td.actions {
    padding-left: 48px;
}

.table-puestos thead th:nth-child(1) {
    width: 35%;
}
.table-puestos thead th:nth-child(2) {
    width: 25%;
}
.table-puestos thead th:nth-child(3) {
    width: 15%;
}
.table-puestos thead th:nth-child(4) {
    width: 15%;
}
.table-puestos thead th:nth-child(5) {
    width: 10%;
}

.table td.actions {
    white-space: nowrap;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    padding-left: 30px;
    min-width: 120px;
}
.table td.actions .btn-secondary {
    background: #eef6fb;
    border: 1px solid #e6eef6;
    color: #0b5ed7;
    padding: 6px 10px;
    border-radius: 8px;
}
.table td.actions .btn-danger {
    padding: 6px 10px;
    border-radius: 8px;
}

/* Table header area (title + actions) */
.table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}
.table-header h3 {
    margin: 0;
    font-size: 20px;
}

/* Generic button baseline */
.btn {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    text-decoration: none;
}
.btn:hover {
    filter: brightness(0.98);
}

/* Primary button override (keeps existing look but ensures consistent sizing) */
.btn-primary {
    background: #14aaf5;
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    border: 0;
    cursor: pointer;
}
.btn-primary:hover {
    opacity: 0.95;
}

/* Danger button global style */
.btn-danger {
    background: #ef4444;
    color: #fff;
    border: 0;
    padding: 6px 10px;
    border-radius: 8px;
}
.btn-danger:hover {
    opacity: 0.95;
}

/* Make action buttons in table a bit smaller */
.table .btn {
    padding: 6px 10px;
    font-size: 14px;
}
.table .btn + .btn {
    margin-left: 8px;
}

/* Ensure table action column doesn't collapse */
.table td.actions {
    white-space: nowrap;
}

/* forms */
form input,
form select,
form textarea {
    padding: 10px;
    border: 1px solid #e6eef6;
    border-radius: 6px;
    width: 100%;
}
form button {
    background: var(--accent);
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    border: 0;
}

/* responsive */
@media (max-width: 900px) {
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .sidebar {
        display: none;
    }
}

/* Empleados list styles */
.list-card {
    background: var(--panel);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 20px;
}
.list-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.table-header-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}
.header-left {
    flex: 1;
}
.header-right {
    flex: 2;
    display: flex;
    justify-content: flex-end;
}
.controls-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.controls-row .search-wrapper {
    margin-right: 8px;
    position: relative;
}
.controls-row .search-input {
    min-width: 420px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #e6eef6;
    background: #f7fbfd;
}
.filter-pill .pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #e6eef6;
    background: #f1f7fb;
    color: #0b5ed7;
}
.filter-pill .pill-btn svg {
    display: block;
}
.filter-pill .chev {
    margin-left: 6px;
    color: var(--muted);
}
.select-wrap {
    position: relative;
    display: inline-block;
}
.select-wrap select {
    appearance: none;
    -webkit-appearance: none;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #e6eef6;
    background: #f7fbfd;
}
.table-panel {
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    padding: 12px;
    border: 1px solid #e6eef6;
}
.panel-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.table-body {
    background: transparent;
}
.table-panel .table-header-row {
    display: flex;
    padding: 12px 16px;
    border-bottom: 1px solid #eef3f7;
    background: transparent;
    font-weight: 600;
    color: #0f172a;
    border-radius: 6px;
}
.list-info .list-sub {
    margin-top: 6px;
}
.table-panel #empleados-list {
    min-height: 160px;
}
.list-title {
    font-size: 20px;
    font-weight: 700;
}
.list-sub {
    color: var(--muted);
    margin-top: 6px;
}
.controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

.search-input {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #e6eef6;
    min-width: 320px;
}
.search-wrapper {
    position: relative;
    display: inline-block;
}
.clear-search {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}
.search-wrapper.has-value .clear-search {
    opacity: 1;
    pointer-events: auto;
}
.clear-search:hover {
    background: rgba(11, 94, 215, 0.06);
}

.select-wrap {
    position: relative;
    display: inline-block;
}
.select-wrap select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 32px;
    background: #f7fbfd;
    border-radius: 8px;
    border: 1px solid #e6eef6;
}
.select-wrap::after {
    content: "▾";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--muted);
    font-size: 12px;
}
.btn-secondary {
    background: #f1f7fb;
    border: 1px solid #e6eef6;
    padding: 8px 12px;
    border-radius: 8px;
    color: #0b5ed7;
}
.no-underline {
    text-decoration: none;
}
.btn-primary {
    background: #14aaf5;
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    border: 0;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.badge {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
}
.badge.activo {
    background: #1f9d4a;
    color: #fff;
}
.badge.inactivo {
    background: #6b7280;
    color: #fff;
}
.badge.despedido {
    background: #ef4444;
    color: #fff;
}
.badge.renuncio {
    background: #f59e0b;
    color: #fff;
}

.empleado-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 12px;
    border-bottom: 1px solid #f1f5f9;
}
.empleado-left {
    display: flex;
    flex-direction: column;
}
.empleado-name {
    font-weight: 700;
}
.empleado-code {
    color: var(--muted);
    font-size: 13px;
    margin-top: 6px;
}
.empleado-meta {
    display: flex;
    gap: 24px;
    align-items: center;
    color: var(--muted);
}
.row-actions {
    color: var(--muted);
    cursor: pointer;
    user-select: none;
}

/* Configuración page styles */
.config-page {
    display: flex;
    gap: 22px;
}
.config-sidebar {
    width: 220px;
}
.config-sidebar ul {
    list-style: none;
    padding: 8px;
    margin: 0;
}
.config-sidebar ul li {
    background: linear-gradient(180deg, #f6fbfe, #eef8fd);
    border: 1px solid var(--card-border);
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 10px;
    color: #0b556d;
}
.config-sidebar ul li.active {
    background: #fff;
    border-left: 4px solid #e6f0f8;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}
.config-sidebar ul li a {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.config-sidebar ul li a .icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.config-main {
    flex: 1;
}
.config-main .card {
    border-radius: 10px;
    padding: 26px;
}
.config-main h3 {
    margin-top: 0;
    margin-bottom: 6px;
    font-size: 22px;
}
.config-main p.muted {
    color: var(--muted);
    margin-top: 0;
}

/* Referencias specific look */
.refs-card .refs-header h3 {
    margin: 0;
    font-size: 22px;
}
.refs-card .refs-header p {
    margin: 4px 0 0;
    color: var(--muted);
}
.add-ref-btn {
    background: #14aaf5;
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    border: 0;
    display: inline-flex;
    align-items: center;
}
.refs-card .table th,
.refs-card .table td {
    padding: 14px 12px;
}
.refs-card .table thead th {
    color: var(--muted);
    font-weight: 600;
}

/* Categoria tipos UI */
.categoria-tipos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

@media (max-width: 1100px) {
    .categoria-tipos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .categoria-tipos {
        grid-template-columns: 1fr;
    }
}
.tipo-card {
    min-width: 0;
    background: linear-gradient(180deg, #fff, #fbfdff);
    border: 1px solid var(--card-border);
    padding: 12px;
    border-radius: 8px;
}
.tipo-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.tipo-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.tipo-actions .btn {
    white-space: normal;
    max-width: 100%;
}
.tipo-actions form {
    margin: 0;
}
.tipo-header strong {
    word-break: break-word;
}

.list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.tipo-card .list {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}
.tipo-card .list li {
    padding: 6px 0;
    border-top: 1px dashed #eef6f9;
}

/* Styled referencias form */
.refs-form {
    background: linear-gradient(180deg, #fff, #fbfdff);
    padding: 14px;
    border: 1px solid var(--card-border);
    border-radius: 8px;
}
.refs-form .form-row-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr auto;
    gap: 12px;
    align-items: end;
}
.refs-form .form-group {
    display: flex;
    flex-direction: column;
}
.refs-form label {
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 13px;
}
.input-with-icon {
    position: relative;
}
.input-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 13px;
}
.refs-form input[type="text"],
.refs-form input[type="number"],
.refs-form select {
    padding: 10px 12px 10px 36px;
    border: 1px solid #e6eef6;
    border-radius: 8px;
    background: #fff;
}
.refs-form input:focus,
.refs-form select:focus {
    outline: none;
    border-color: #bfe6ff;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.08);
}
.form-actions-group {
    display: flex;
    align-items: center;
}
.form-actions-group .btn-primary {
    padding: 10px 16px;
    border-radius: 8px;
}

/* responsive adjustments */
@media (max-width: 900px) {
    .refs-form .form-row-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .refs-card .refs-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Modal styles */
.modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(7, 18, 36, 0.45);
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s;
}
.modal.open {
    opacity: 1;
    visibility: visible;
}
.modal-content {
    position: relative;
    z-index: 100000;
    background: var(--panel);
    border-radius: 10px;
    max-width: 720px;
    width: 100%;
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.2);
    border: 1px solid var(--card-border);
    overflow: hidden;
}

/* Referencias ligadas a tipos (en pestaña Categorías) */
.tipo-referencias {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #eef6f9;
}
.tipo-ref-list {
    max-height: 180px;
    overflow: auto;
    padding-right: 6px;
}
.tipo-ref-list li {
    border-top: 1px dashed #eef6f9;
    padding: 6px 0;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
}
.modal-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.modal-body label {
    font-weight: 600;
    font-size: 13px;
}
.modal-body input,
.modal-body select {
    padding: 10px;
    border: 1px solid #e6eef6;
    border-radius: 8px;
}
.modal-errors {
    background: #fff6f6;
    border: 1px solid #f5c2c2;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 12px;
    color: #711111;
}
.modal-errors ul {
    margin: 8px 0 0 18px;
}
.modal-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.modal-tabs .tab {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}
.modal-tabs .tab.active {
    background: #eef7fb;
    border: 1px solid #e6eef6;
    color: #0b5ed7;
}
.modal .form-row-grid input,
.modal .form-row-grid select,
.modal .form-row-grid textarea {
    background: #fbfdff;
}
.modal-footer {
    padding: 12px 20px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: flex-end;
}
.modal-close {
    background: transparent;
    border: 0;
    font-size: 18px;
    cursor: pointer;
}
body.modal-open {
    overflow: hidden;
}

@media (max-width: 600px) {
    .modal-content {
        max-width: 96%;
    }
}

.form-row {
    margin-bottom: 18px;
}
.form-row label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}
.form-row .radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.form-row .radio-group label {
    font-weight: 600;
    color: #0f172a;
}
.form-row .radio-group label small {
    font-weight: 400;
    color: var(--muted);
    margin-left: 8px;
}

/* Custom radio look */
.radio-input {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 2px solid #cfe9fb;
    background: #fff;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    position: relative;
}
.radio-input:checked {
    background: linear-gradient(180deg, #e6f7ff, #d0efff);
    border-color: #36a3e6;
}
.radio-input:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 4px;
    width: 6px;
    height: 6px;
    background: #0369a1;
    border-radius: 50%;
}

.form-control {
    max-width: 220px;
}
.form-actions {
    margin-top: 16px;
}

/* helper small text */
.help-text {
    color: var(--muted);
    font-size: 13px;
    margin-top: 8px;
}

@media (max-width: 900px) {
    .config-page {
        flex-direction: column;
    }
    .config-sidebar {
        width: 100%;
        display: flex;
    }
    .config-sidebar ul {
        display: flex;
        gap: 8px;
        overflow: auto;
    }
    .config-sidebar ul li {
        min-width: 140px;
    }
}

/* Row actions floating menu */
.row-menu {
    position: fixed;
    background: #fff;
    border: 1px solid rgba(14, 65, 120, 0.06);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(2, 6, 23, 0.12);
    min-width: 200px;
    z-index: 12000;
    overflow: visible;
    transform-origin: top right;
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.row-menu::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background: #fff;
    right: 18px;
    top: -6px;
    transform: rotate(45deg);
    border-left: 1px solid rgba(14, 65, 120, 0.06);
    border-top: 1px solid rgba(14, 65, 120, 0.06);
    box-shadow: -1px -1px 0 rgba(255, 255, 255, 0.6);
}
.row-menu-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}
.row-menu-item {
    padding: 10px 16px;
    cursor: pointer;
    color: #0f172a;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    border-radius: 6px;
    margin: 4px 8px;
}
.row-menu-item:not(:last-child) {
    margin-bottom: 4px;
}
.row-menu-item:hover {
    background: linear-gradient(180deg, #f5fbff, #eef7fb);
}
.row-menu-item.has-sub {
    position: relative;
}
.row-menu-item .chev {
    float: none;
    color: var(--muted);
    opacity: 0.9;
}
.row-submenu {
    display: none;
    position: absolute;
    top: 6px;
    left: 100%;
    margin-left: 10px;
    background: #fff;
    border: 1px solid rgba(14, 65, 120, 0.06);
    border-radius: 8px;
    min-width: 160px;
    box-shadow: 0 12px 30px rgba(2, 6, 23, 0.08);
    padding: 6px 0;
}
.row-menu-item.has-sub.open .row-submenu {
    display: block;
}
.row-submenu-item {
    padding: 10px 14px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 10px;
}
.row-submenu-item:hover {
    background: linear-gradient(180deg, #fff7f7, #fff2f2);
    color: #b91c1c;
}
.row-submenu-item::before {
    content: "○";
    font-size: 12px;
    color: var(--muted);
    width: 18px;
    display: inline-block;
    text-align: center;
}

/* show submenu on hover for a smoother UX like the mock */
.row-menu-item.has-sub:hover .row-submenu {
    display: block;
}

/* If the menu is near the right edge, open the nested submenu to the left */
.row-menu.submenu-left .row-submenu {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 8px;
}
.row-menu.submenu-left .row-submenu {
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.06);
}

/* Details modal visuals (polish to match provided design) */
.modal-content {
    max-width: 760px;
}
.modal-header-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.details-sub {
    color: var(--muted);
    font-size: 13px;
}
.modal-header h3 {
    margin: 0;
    font-size: 20px;
}
.section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    opacity: 0.9;
    vertical-align: middle;
}
.modal-body h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px 0;
    font-size: 16px;
}
.modal-body h4 + div {
    margin-bottom: 10px;
}
.details-badge {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 13px;
    color: #fff;
}
.details-badge.activo {
    background: #6aa84f;
}
.details-badge.inactivo {
    background: #8b95a6;
    background: linear-gradient(180deg, #edf2f6, #e6ebf0);
    color: #364054;
    border: 1px solid #d7dde6;
}
.details-badge.neutral {
    background: #e6eef6;
    color: #0b5ed7;
}

/* Slightly lighten modal background to mimic attached design */
.modal-content {
    background: #f6fbfd;
}
.modal-body {
    padding: 20px 28px;
}
.modal-header {
    padding: 18px 28px;
}
.modal-close {
    font-size: 18px;
    background: transparent;
    border: 0;
}

/* ===============================
   DARK THEME - PÁGINAS DE NÓMINA
   =============================== */

/* Nómina - Index: Cards y contenedores */
.dark-theme .page-wrapper .card[style*="background:#fff"] {
    background: var(--panel) !important;
    border-color: var(--card-border) !important;
}

/* Nómina - Títulos y textos principales */
.dark-theme .page-wrapper h2[style*="color:#0f172a"],
.dark-theme .page-wrapper h3[style*="color:#0f172a"],
.dark-theme .page-wrapper div[style*="color:#0f172a"] {
    color: #cfe7f5 !important;
}

/* Nómina - Textos secundarios/muted */
.dark-theme .page-wrapper p[style*="color:#64748b"],
.dark-theme .page-wrapper div[style*="color:#64748b"],
.dark-theme .page-wrapper span[style*="color:#64748b"] {
    color: #9aa5b1 !important;
}

.dark-theme .page-wrapper a[style*="color:#64748b"] {
    color: #9aa5b1 !important;
}

/* Nómina - Month selector y backgrounds grises */
.dark-theme .page-wrapper div[style*="background:#f1f5f9"] {
    background: rgba(255, 255, 255, 0.03) !important;
}

.dark-theme .page-wrapper div[style*="background:#f8fafc"] {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* Nómina - Período items (links con hover) */
.dark-theme .page-wrapper a[style*="background:#fff"] {
    background: var(--panel) !important;
    border-color: var(--card-border) !important;
}

.dark-theme .page-wrapper a[style*="border:1px solid #e2e8f0"] {
    border-color: var(--card-border) !important;
}

/* Nómina - Icon containers */
.dark-theme .page-wrapper div[style*="background:#e2e8f0"] {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #9fbfcf !important;
}

.dark-theme .page-wrapper div[style*="color:#475569"] {
    color: #9fbfcf !important;
}

/* Nómina - Empty state */
.dark-theme .page-wrapper div[style*="background:#f8fafc"][style*="border:1px dashed #cbd5e1"] {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #9aa5b1 !important;
}

/* Nómina - Resumen: Tabs */
.dark-theme .page-wrapper .tabs[style*="background:#f1f5f9"],
.dark-theme .page-wrapper div[style*="background:#f1f5f9"][style*="padding:4px"] {
    background: rgba(255, 255, 255, 0.03) !important;
}

.dark-theme .page-wrapper .tab-btn[style*="background:#fff"],
.dark-theme .page-wrapper button[style*="background:#fff"] {
    background: var(--panel) !important;
    color: #cfe7f5 !important;
}

.dark-theme .page-wrapper .tab-btn[style*="background:transparent"],
.dark-theme .page-wrapper button[style*="background:transparent"] {
    color: #9aa5b1 !important;
}

/* Nómina - Generada: Tab content borders */
.dark-theme .page-wrapper .tab-content[style*="border:1px solid #e2e8f0"] {
    border-color: var(--card-border) !important;
}

/* Nómina - Tablas: Headers */
.dark-theme .page-wrapper table thead tr[style*="background:#f8fafc"],
.dark-theme .page-wrapper table thead tr[style*="background:#f0f9ff"],
.dark-theme .page-wrapper table thead tr[style*="background:#dbeafe"] {
    background: rgba(255, 255, 255, 0.04) !important;
}

.dark-theme .page-wrapper table thead th[style*="color:#64748b"],
.dark-theme .page-wrapper table thead th[style*="color:#475569"],
.dark-theme .page-wrapper table thead th[style*="color:#0369a1"],
.dark-theme .page-wrapper table thead th[style*="color:#1e40af"] {
    color: #bfe9ff !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Nómina - Tablas: Body rows */
.dark-theme .page-wrapper table tbody tr[style*="border-bottom:1px solid #f1f5f9"],
.dark-theme .page-wrapper table tbody tr[style*="border-bottom:1px solid #e2e8f0"] {
    border-color: rgba(255, 255, 255, 0.03) !important;
}

.dark-theme .page-wrapper table tbody tr[style*="color:#334155"] {
    color: #cfe7f5 !important;
}

.dark-theme .page-wrapper table tbody td[style*="border-right:1px solid #f1f5f9"],
.dark-theme .page-wrapper table tbody td[style*="border-right:1px solid #e2e8f0"] {
    border-color: rgba(255, 255, 255, 0.03) !important;
}

/* Nómina - Tablas: Celdas con fondos especiales (Total Devengado) */
.dark-theme .page-wrapper table td[style*="background:#fffbeb"] {
    background: rgba(251, 191, 36, 0.1) !important;
    color: #fbbf24 !important;
}

/* Nómina - Tablas: Celdas Neto (fondo azul claro) */
.dark-theme .page-wrapper table td[style*="background:#f0f9ff"],
.dark-theme .page-wrapper table th[style*="background:#f0f9ff"] {
    background: rgba(14, 165, 233, 0.1) !important;
    color: #7dd3fc !important;
    border-color: rgba(14, 165, 233, 0.2) !important;
}

.dark-theme .page-wrapper table td[style*="color:#0ea5e9"],
.dark-theme .page-wrapper table th[style*="color:#0ea5e9"] {
    color: #38bdf8 !important;
}

/* Nómina - Headers de sección (PERSONAL ASEGURADO) */
.dark-theme .page-wrapper div[style*="background:#f0f9ff"][style*="color:#0369a1"] {
    background: rgba(14, 165, 233, 0.12) !important;
    color: #7dd3fc !important;
    border-color: rgba(14, 165, 233, 0.2) !important;
}

/* Nómina - Headers SIN INSS (fondo rojo) */
.dark-theme .page-wrapper div[style*="background:#fef2f2"][style*="color:#991b1b"] {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
}

/* Nómina - Botones de exportar/imprimir */
.dark-theme .page-wrapper div[style*="background:#f8fafc"][style*="border-bottom:1px solid #e2e8f0"] {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: var(--card-border) !important;
}

.dark-theme .page-wrapper button[style*="background:#fff"][style*="border:1px solid #cbd5e1"] {
    background: var(--panel) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #9fbfcf !important;
}

/* Nómina - Botón volver (fondo gris) */
.dark-theme .page-wrapper a[style*="background:#f1f5f9"][style*="color:#475569"] {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #9fbfcf !important;
}

/* Nómina - Tabla Consolidado: Séptimo día badge */
.dark-theme .page-wrapper span[style*="background:#f1f5f9"][style*="color:#0f172a"] {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #cfe7f5 !important;
}

/* Nómina - Help icon (?) */
.dark-theme .page-wrapper span[style*="border:1px solid #cbd5e1"][style*="color:#475569"] {
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #9fbfcf !important;
}

/* Nómina - Texto de deducciones (rojo) */
.dark-theme .page-wrapper td[style*="color:#ef4444"] {
    color: #fca5a5 !important;
}

/* Nómina - Texto check verde */
.dark-theme .page-wrapper span[style*="color:#16a34a"] {
    color: #4ade80 !important;
}

/* Nómina - Texto X rojo */
.dark-theme .page-wrapper span[style*="color:#ef4444"] {
    color: #fca5a5 !important;
}

/* Nómina - Tabla de billetaje: Footer */
.dark-theme .page-wrapper table tfoot tr[style*="background:#dbeafe"] {
    background: rgba(14, 165, 233, 0.15) !important;
}

.dark-theme .page-wrapper table tfoot td[style*="color:#1e40af"] {
    color: #7dd3fc !important;
}

/* Nómina - Row hover effects en tablas */
.dark-theme .page-wrapper table tbody tr:hover {
    background: rgba(255, 255, 255, 0.02) !important;
}

.dark-theme .page-wrapper table tbody tr[style*="color:#334155"]:hover td {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* Nómina - No data message */
.dark-theme .page-wrapper td[style*="color:#94a3b8"] {
    color: #6b7280 !important;
}

/* Nómina - Links hover states */
.dark-theme .page-wrapper a[style*="color:#0f172a"]:hover {
    color: #38bdf8 !important;
}

/* Nómina - Selected row highlighting en modo oscuro */
.dark-theme tr.selected-row td {
    background-color: rgba(14, 165, 233, 0.15) !important;
}

.dark-theme tr:hover td {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Nómina - Print styles (mantener en modo oscuro para impresión) */
@media print {
    .dark-theme .page-wrapper .card,
    .dark-theme .page-wrapper table,
    .dark-theme .page-wrapper div {
        background: #fff !important;
        color: #000 !important;
    }
}

/* ===============================
   DARK THEME - EMPLEADOS
   =============================== */

/* Empleados - Card principal */
.dark-theme .empleados-card[style*="background:#fff"] {
    background: var(--panel) !important;
    border-color: var(--card-border) !important;
}

/* Empleados - Títulos */
.dark-theme .empleados-card h2[style*="color:#0f172a"],
.dark-theme .empleados-card div[style*="color:#0f172a"] {
    color: #cfe7f5 !important;
}

/* Empleados - Textos secundarios */
.dark-theme .empleados-card p[style*="color:#64748b"],
.dark-theme .empleados-card div[style*="color:#64748b"] {
    color: #9aa5b1 !important;
}

/* Empleados - Search input */
.dark-theme .empleados-toolbar input[style*="background:#f1f5f9"],
.dark-theme .empleados-toolbar input[style*="border:1px solid #cbd5e1"] {
    background: #071722 !important;
    border-color: #102029 !important;
    color: #d1e7f3 !important;
}

.dark-theme .empleados-toolbar button[id="clear-search"][style*="background:#e2e8f0"] {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #9fbfcf !important;
}

/* Empleados - Botones toolbar */
.dark-theme .empleados-toolbar button[style*="background:#f1f5f9"],
.dark-theme .empleados-toolbar select[style*="background:#f1f5f9"] {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #cfe7f5 !important;
}

.dark-theme .empleados-toolbar button[style*="background:#fff"] {
    background: var(--panel) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #cfe7f5 !important;
}

/* Empleados - Filtros dropdown */
.dark-theme #filters-dropdown[style*="background:#fff"] {
    background: var(--panel) !important;
    border-color: var(--card-border) !important;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.5) !important;
}

.dark-theme #filters-dropdown div[style*="color:#0f172a"],
.dark-theme #filters-dropdown label[style*="color:#334155"] {
    color: #cfe7f5 !important;
}

.dark-theme #filters-dropdown select[style*="border:1px solid #cbd5e1"] {
    background: #071722 !important;
    border-color: #102029 !important;
    color: #d1e7f3 !important;
}

/* Empleados - Tabla wrapper */
.dark-theme .tabla-wrapper[style*="border:1px solid #e2e8f0"] {
    border-color: var(--card-border) !important;
}

/* Empleados - Tabla header */
.dark-theme .tabla-wrapper thead tr[style*="background:#f8fafc"] {
    background: rgba(255, 255, 255, 0.04) !important;
}

.dark-theme .tabla-wrapper thead th[style*="color:#0f172a"],
.dark-theme .tabla-wrapper thead th[style*="border-bottom:1px solid #e2e8f0"] {
    color: #bfe9ff !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Empleados - Tabla body rows */
.dark-theme .tabla-wrapper tbody tr[style*="border-bottom:1px solid #eef2f7"] {
    border-color: rgba(255, 255, 255, 0.03) !important;
}

.dark-theme .tabla-wrapper tbody td div[style*="color:#0f172a"] {
    color: #cfe7f5 !important;
}

.dark-theme .tabla-wrapper tbody td div[style*="color:#64748b"],
.dark-theme .tabla-wrapper tbody td div[style*="color:#94a3b8"] {
    color: #9aa5b1 !important;
}

.dark-theme .tabla-wrapper tbody td[style*="color:#0f172a"] {
    color: #cfe7f5 !important;
}

/* Empleados - Modo badge */
.dark-theme .tabla-wrapper .modo-badge[style*="background:#e2e8f0"] {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #9fbfcf !important;
}

/* Empleados - Estado badges (mantener colores pero adaptar) */
.dark-theme .tabla-wrapper .estado-badge[style*="background:#16a34a"] {
    background: #16a34a !important;
    color: #fff !important;
}

.dark-theme .tabla-wrapper .estado-badge[style*="background:#475569"] {
    background: #475569 !important;
    color: #fff !important;
}

.dark-theme .tabla-wrapper .estado-badge[style*="background:#dc2626"] {
    background: #dc2626 !important;
    color: #fff !important;
}

.dark-theme .tabla-wrapper .estado-badge[style*="background:#ea580c"] {
    background: #ea580c !important;
    color: #fff !important;
}

/* Empleados - Botón acciones (•••) */
.dark-theme .tabla-wrapper button.row-actions[style*="background:#f1f5f9"] {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #9fbfcf !important;
}

/* Empleados - Empty state */
.dark-theme .tabla-wrapper td[style*="color:#64748b"][colspan] {
    color: #9aa5b1 !important;
}

/* Empleados - Row menu flotante */
.dark-theme #row-action-menu.row-menu[style*="background:#fff"] {
    background: var(--panel) !important;
    border-color: var(--card-border) !important;
    box-shadow: 0 16px 38px -10px rgba(0, 0, 0, 0.5) !important;
}

.dark-theme #row-action-menu .row-menu-item {
    color: #cfe7f5 !important;
}

.dark-theme #row-action-menu .row-menu-item:hover {
    background: rgba(20, 170, 245, 0.1) !important;
}

/* ===============================
   DARK THEME - ASISTENCIA
   =============================== */

/* Asistencia - Card principal */
.dark-theme .page-wrapper .card[style*="background:#fff"] {
    background: var(--panel) !important;
    border-color: var(--card-border) !important;
}

/* Asistencia - Títulos */
.dark-theme .page-wrapper .card h2[style*="color:#0f172a"],
.dark-theme .page-wrapper .card div[style*="font-weight:700"][style*="color:#0f172a"] {
    color: #cfe7f5 !important;
}

/* Asistencia - Textos secundarios */
.dark-theme .page-wrapper .card p[style*="color:#64748b"],
.dark-theme .page-wrapper .card div[style*="color:#64748b"],
.dark-theme .page-wrapper .card span[style*="color:#64748b"] {
    color: #9aa5b1 !important;
}

.dark-theme .page-wrapper .card div[style*="color:#334155"] {
    color: #9fbfcf !important;
}

/* Asistencia - Selector de período */
.dark-theme #periodo-selector[style*="background:#f8fafc"] {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: var(--card-border) !important;
}

/* Asistencia - Botones de navegación mes */
.dark-theme #periodo-selector button[style*="background:#fff"] {
    background: var(--panel) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #cfe7f5 !important;
}

/* Asistencia - Items de período */
.dark-theme .periodo-item[style*="background:#fff"] {
    background: var(--panel) !important;
    border-color: var(--card-border) !important;
}

.dark-theme .periodo-item[style*="color:#0f172a"] div,
.dark-theme .periodo-item div[style*="color:#0f172a"] {
    color: #cfe7f5 !important;
}

.dark-theme .periodo-item div[style*="color:#64748b"] {
    color: #9aa5b1 !important;
}

.dark-theme .periodo-item[style*="color:#94a3b8"] {
    color: #6b7280 !important;
}

/* Asistencia - Período item selected */
.dark-theme .periodo-item.selected[style*="background:#eff6ff"] {
    background: rgba(14, 165, 233, 0.15) !important;
    border-color: #0ea5e9 !important;
}

/* Asistencia - Hoja: Header info */
.dark-theme .page-wrapper .card div[style*="background:#f8fafc"][style*="padding:12px"] {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: var(--card-border) !important;
}

.dark-theme .page-wrapper .card span[style*="background:#e2e8f0"][style*="color:#0f172a"] {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #cfe7f5 !important;
}

/* Asistencia - Inputs */
.dark-theme .page-wrapper .card input[type="date"],
.dark-theme .page-wrapper .card select {
    background: #071722 !important;
    border-color: #102029 !important;
    color: #d1e7f3 !important;
}

/* Asistencia - Botón Hoy y otros */
.dark-theme .page-wrapper .card button[style*="background:#fff"]:not([style*="background:#10b981"]):not([style*="background:#0ea5e9"]) {
    background: var(--panel) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #cfe7f5 !important;
}

/* Asistencia - Botón Guardar (verde cuando guardado) */
.dark-theme .page-wrapper .card button[style*="background:#10b981"] {
    background: #10b981 !important;
    color: #fff !important;
}

/* Asistencia - Botón Restaurar */
.dark-theme .page-wrapper .card button[style*="background:#fef2f2"] {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #fca5a5 !important;
}

/* Asistencia - Tabla wrapper */
.dark-theme .page-wrapper .tabla-wrapper[style*="border:1px solid #e2e8f0"] {
    border-color: var(--card-border) !important;
}

/* Asistencia - Tabla header */
.dark-theme .page-wrapper .tabla-wrapper thead tr[style*="background:#f8fafc"] {
    background: rgba(255, 255, 255, 0.04) !important;
}

.dark-theme .page-wrapper .tabla-wrapper thead th[style*="color:#0f172a"],
.dark-theme .page-wrapper .tabla-wrapper thead th[style*="color:#64748b"] {
    color: #bfe9ff !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Asistencia - Sticky header cell */
.dark-theme .page-wrapper .tabla-wrapper thead th[style*="background:#f8fafc"][style*="position:sticky"] {
    background: rgba(255, 255, 255, 0.04) !important;
}

/* Asistencia - Tabla body rows */
.dark-theme .page-wrapper .tabla-wrapper tbody tr[style*="border-bottom:1px solid #eef2f7"] {
    border-color: rgba(255, 255, 255, 0.03) !important;
}

/* Asistencia - Celdas de empleado (sticky) */
.dark-theme .page-wrapper .tabla-wrapper tbody td.td-empleado {
    background: var(--panel) !important;
}

.dark-theme .page-wrapper .tabla-wrapper tbody td.td-empleado div[style*="color:#0f172a"] {
    color: #cfe7f5 !important;
}

.dark-theme .page-wrapper .tabla-wrapper tbody td.td-empleado div[style*="color:#64748b"] {
    color: #9aa5b1 !important;
}

/* Asistencia - Select estado */
.dark-theme .page-wrapper .tabla-wrapper tbody td.td-estado select {
    background: #071722 !important;
    border-color: #102029 !important;
    color: #d1e7f3 !important;
}

/* Asistencia - Inputs de hora */
.dark-theme .page-wrapper .tabla-wrapper tbody input[type="time"] {
    background: #071722 !important;
    border-color: #102029 !important;
    color: #d1e7f3 !important;
}

/* Asistencia - Output fields (readonly) */
.dark-theme .page-wrapper .tabla-wrapper tbody input[readonly][style*="background:#f8fafc"] {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: #9fbfcf !important;
}

/* Asistencia - Producción summary */
.dark-theme .page-wrapper .tabla-wrapper .produccion-summary[style*="background:#fff"] {
    background: var(--panel) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-theme .page-wrapper .tabla-wrapper .produccion-summary .summary-text[style*="color:#94a3b8"] {
    color: #6b7280 !important;
}

/* Asistencia - Badges de estado (48h, meta, etc) */
.dark-theme .page-wrapper .tabla-wrapper .badge-48h[style*="background:#dbeafe"],
.dark-theme .page-wrapper .tabla-wrapper span[style*="background:#dbeafe"] {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #93bbfc !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

.dark-theme .page-wrapper .tabla-wrapper span[style*="background:#f1f5f9"] {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #9fbfcf !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Asistencia - Horas totales (naranja) */
.dark-theme .page-wrapper .tabla-wrapper td[style*="color:#d97706"] {
    color: #fbbf24 !important;
}

/* Asistencia - Botones de incidencias */
.dark-theme .page-wrapper .tabla-wrapper button.btn-incidencia-gestionar[style*="background:#fff"],
.dark-theme .page-wrapper .tabla-wrapper button.btn-incidencia-subsidio[style*="background:#fff"] {
    background: var(--panel) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #9fbfcf !important;
}

/* Asistencia - Modales */
.dark-theme #modal-permiso > div[style*="background:#fff"],
.dark-theme #modal-subsidio > div[style*="background:#fff"],
.dark-theme #modal-produccion > div[style*="background:#fff"],
.dark-theme #modal-cantidad > div[style*="background:#fff"],
.dark-theme #modal-exito > div[style*="background:#fff"] {
    background: var(--panel) !important;
    border: 1px solid var(--card-border) !important;
}

.dark-theme #modal-permiso h3,
.dark-theme #modal-subsidio h3,
.dark-theme #modal-produccion h3,
.dark-theme #modal-cantidad h3,
.dark-theme #modal-exito h3 {
    color: #cfe7f5 !important;
}

.dark-theme #modal-permiso label,
.dark-theme #modal-subsidio label,
.dark-theme #modal-produccion label {
    color: #9fbfcf !important;
}

.dark-theme #modal-permiso input,
.dark-theme #modal-permiso select,
.dark-theme #modal-permiso textarea,
.dark-theme #modal-subsidio input,
.dark-theme #modal-subsidio select,
.dark-theme #modal-subsidio textarea,
.dark-theme #modal-produccion input,
.dark-theme #modal-produccion select,
.dark-theme #modal-cantidad input {
    background: #071722 !important;
    border-color: #102029 !important;
    color: #d1e7f3 !important;
}

.dark-theme #modal-produccion div[style*="background:#f1f5f9"] {
    background: rgba(255, 255, 255, 0.03) !important;
}

.dark-theme #modal-produccion div[style*="color:#475569"] {
    color: #9fbfcf !important;
}

/* Asistencia - Modal producción tabla */
.dark-theme #modal-produccion thead[style*="background:#f8fafc"] {
    background: rgba(255, 255, 255, 0.04) !important;
}

.dark-theme #modal-produccion tfoot[style*="background:#f8fafc"] {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #cfe7f5 !important;
}

.dark-theme #modal-produccion th[style*="border-bottom:1px solid #e2e8f0"] {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Asistencia - Consolidado semanal badges */
.dark-theme .tabla-wrapper td span[style*="background:#f1f5f9"][style*="color:#475569"] {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #9fbfcf !important;
}

.dark-theme .tabla-wrapper td span[style*="background:#ef4444"] {
    background: #ef4444 !important;
    color: #fff !important;
}

.dark-theme .tabla-wrapper td span[style*="background:#f97316"] {
    background: #f97316 !important;
    color: #fff !important;
}

/* Asistencia - Tabla consolidado thead */
.dark-theme .tabla-wrapper table thead tr[style*="background:#f8fafc"][style*="color:#64748b"] {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #bfe9ff !important;
}

.dark-theme .tabla-wrapper table thead th[style*="border-bottom:1px solid #e2e8f0"] {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Asistencia - SVG icons */
.dark-theme .tabla-wrapper svg[stroke="#10b981"] {
    stroke: #10b981 !important;
}

.dark-theme .tabla-wrapper svg[stroke="#ef4444"] {
    stroke: #ef4444 !important;
}

/* ===============================
   DARK THEME - ASISTENCIA HOJA (Row colors)
   =============================== */

/* Las filas coloreadas por JS según estado - necesitan fondos oscuros semi-transparentes */
.dark-theme #asistencia-list tr[data-id] {
    background-color: transparent !important;
}

/* Presente - verde oscuro semi-transparente */
.dark-theme #asistencia-list tr[data-id][style*="background-color: rgb(209, 250, 229)"],
.dark-theme #asistencia-list tr[data-id][style*="background-color: #d1fae5"] {
    background-color: rgba(16, 185, 129, 0.15) !important;
}

.dark-theme #asistencia-list tr[data-id][style*="background-color: rgb(209, 250, 229)"] td.td-empleado,
.dark-theme #asistencia-list tr[data-id][style*="background-color: #d1fae5"] td.td-empleado {
    background-color: rgba(16, 185, 129, 0.15) !important;
}

/* Ausente - rojo oscuro semi-transparente */
.dark-theme #asistencia-list tr[data-id][style*="background-color: rgb(254, 226, 226)"],
.dark-theme #asistencia-list tr[data-id][style*="background-color: #fee2e2"] {
    background-color: rgba(239, 68, 68, 0.15) !important;
}

.dark-theme #asistencia-list tr[data-id][style*="background-color: rgb(254, 226, 226)"] td.td-empleado,
.dark-theme #asistencia-list tr[data-id][style*="background-color: #fee2e2"] td.td-empleado {
    background-color: rgba(239, 68, 68, 0.15) !important;
}

/* Permiso - azul oscuro semi-transparente */
.dark-theme #asistencia-list tr[data-id][style*="background-color: rgb(191, 219, 254)"],
.dark-theme #asistencia-list tr[data-id][style*="background-color: #bfdbfe"] {
    background-color: rgba(59, 130, 246, 0.15) !important;
}

.dark-theme #asistencia-list tr[data-id][style*="background-color: rgb(191, 219, 254)"] td.td-empleado,
.dark-theme #asistencia-list tr[data-id][style*="background-color: #bfdbfe"] td.td-empleado {
    background-color: rgba(59, 130, 246, 0.15) !important;
}

/* Subsidio - rosa oscuro semi-transparente */
.dark-theme #asistencia-list tr[data-id][style*="background-color: rgb(252, 231, 243)"],
.dark-theme #asistencia-list tr[data-id][style*="background-color: #fce7f3"] {
    background-color: rgba(236, 72, 153, 0.15) !important;
}

.dark-theme #asistencia-list tr[data-id][style*="background-color: rgb(252, 231, 243)"] td.td-empleado,
.dark-theme #asistencia-list tr[data-id][style*="background-color: #fce7f3"] td.td-empleado {
    background-color: rgba(236, 72, 153, 0.15) !important;
}

/* Feriado - gris oscuro semi-transparente */
.dark-theme #asistencia-list tr[data-id][style*="background-color: rgb(241, 245, 249)"],
.dark-theme #asistencia-list tr[data-id][style*="background-color: #f1f5f9"] {
    background-color: rgba(148, 163, 184, 0.15) !important;
}

.dark-theme #asistencia-list tr[data-id][style*="background-color: rgb(241, 245, 249)"] td.td-empleado,
.dark-theme #asistencia-list tr[data-id][style*="background-color: #f1f5f9"] td.td-empleado {
    background-color: rgba(148, 163, 184, 0.15) !important;
}

/* ===============================
   DARK THEME - NÓMINA BILLETaje
   =============================== */

/* Tabla de billetaje - contenedor principal */
.dark-theme #tab-billetaje[style*="background:#fff"],
.dark-theme #tab-billetaje > div[style*="background:#fff"] {
    background: var(--panel) !important;
}

/* Tabla de billetaje - div contenedor */
.dark-theme #tab-billetaje > div[style*="border:1px solid #e2e8f0"] {
    border-color: var(--card-border) !important;
}

/* Tabla de billetaje - header */
.dark-theme #tab-billetaje > div > div[style*="padding:20px"][style*="text-align:center"][style*="border-bottom:1px solid #e2e8f0"] {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: var(--card-border) !important;
}

.dark-theme #tab-billetaje h3[style*="color:#0f172a"] {
    color: #cfe7f5 !important;
}

.dark-theme #tab-billetaje div[style*="color:#64748b"] {
    color: #9aa5b1 !important;
}

/* Tabla de billetaje - tabla thead */
.dark-theme #tab-billetaje table thead tr[style*="background:#dbeafe"] {
    background: rgba(59, 130, 246, 0.15) !important;
}

.dark-theme #tab-billetaje table thead th[style*="color:#1e40af"] {
    color: #93bbfc !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
}

/* Tabla de billetaje - tbody rows */
.dark-theme #tab-billetaje table tbody tr[style*="border-bottom:1px solid #f1f5f9"] {
    border-color: rgba(255, 255, 255, 0.03) !important;
}

.dark-theme #tab-billetaje table tbody td[style*="color:#334155"] {
    color: #cfe7f5 !important;
}

/* Tabla de billetaje - tfoot */
.dark-theme #tab-billetaje table tfoot tr[style*="background:#dbeafe"] {
    background: rgba(59, 130, 246, 0.2) !important;
}

.dark-theme #tab-billetaje table tfoot td[style*="color:#1e40af"] {
    color: #93bbfc !important;
}

/* Tabla de billetaje - controles de impresión */
.dark-theme #tab-billetaje .no-print button[style*="background:#fff"] {
    background: var(--panel) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #9fbfcf !important;
}

/* ===============================
   DARK THEME - ASISTENCIA INDEX (Periodos)
   =============================== */

/* Los items de período son generados dinámicamente por JS */
/* Selector más específico para los items de período */
.dark-theme #periodos-list a.periodo-item {
    background: var(--panel) !important;
    border-color: var(--card-border) !important;
}

.dark-theme #periodos-list a.periodo-item div[style*="color:#0f172a"] {
    color: #cfe7f5 !important;
}

.dark-theme #periodos-list a.periodo-item div[style*="color:#64748b"] {
    color: #9aa5b1 !important;
}

.dark-theme #periodos-list a.periodo-item[style*="color:#94a3b8"] {
    color: #6b7280 !important;
}

/* Período item seleccionado */
.dark-theme #periodos-list a.periodo-item.selected {
    background: rgba(14, 165, 233, 0.15) !important;
    border-color: #0ea5e9 !important;
}

/* Texto cuando no hay períodos */
.dark-theme #periodos-list div[style*="padding:12px"][style*="color:#64748b"] {
    color: #9aa5b1 !important;
}

/* ===============================
   DARK THEME - NÓMINA BILLETaje (Fix específico)
   =============================== */

/* El contenedor principal del billetaje - el div con max-width:600px */
.dark-theme #tab-billetaje > div[style*="max-width:600px"] {
    background: var(--panel) !important;
    border-color: var(--card-border) !important;
}

/* Header del billetaje */
.dark-theme #tab-billetaje > div > div[style*="text-align:center"] {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: var(--card-border) !important;
}

.dark-theme #tab-billetaje > div > div h3 {
    color: #cfe7f5 !important;
}

.dark-theme #tab-billetaje > div > div div[style*="color:#64748b"] {
    color: #9aa5b1 !important;
}

/* Tabla de billetaje - thead */
.dark-theme #tab-billetaje table thead tr {
    background: rgba(59, 130, 246, 0.15) !important;
}

.dark-theme #tab-billetaje table thead th {
    color: #93bbfc !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
}

/* Tabla de billetaje - tbody */
.dark-theme #tab-billetaje table tbody tr {
    border-color: rgba(255, 255, 255, 0.03) !important;
}

.dark-theme #tab-billetaje table tbody td {
    color: #cfe7f5 !important;
}

/* Tabla de billetaje - tfoot */
.dark-theme #tab-billetaje table tfoot tr {
    background: rgba(59, 130, 246, 0.2) !important;
}

.dark-theme #tab-billetaje table tfoot td {
    color: #93bbfc !important;
}

/* ===============================
   DARK THEME - OPERACIONES
   =============================== */

/* Contenedor principal */
.dark-theme div[style*="display: flex"][style*="gap: 20px"] aside[style*="width: 260px"] {
    background: var(--panel) !important;
    border-color: var(--card-border) !important;
}

/* Título del menú */
.dark-theme div[style*="display: flex"][style*="gap: 20px"] aside h3[style*="color: #64748b"] {
    color: #9aa5b1 !important;
}

/* Items de navegación */
.dark-theme .op-nav-item {
    color: #9fbfcf !important;
}

.dark-theme .op-nav-item:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #38bdf8 !important;
}

.dark-theme .op-nav-item.active {
    background: rgba(14, 165, 233, 0.15) !important;
    color: #38bdf8 !important;
    box-shadow: inset 4px 0 0 #0ea5e9 !important;
}

/* Main content */
.dark-theme div[style*="display: flex"][style*="gap: 20px"] main[style*="background: #fff"] {
    background: var(--panel) !important;
    border-color: var(--card-border) !important;
    box-shadow: none !important;
}

/* Títulos en operaciones */
.dark-theme main h2[style*="color: #0f172a"] {
    color: #cfe7f5 !important;
}

.dark-theme main p[style*="color: #64748b"] {
    color: #9aa5b1 !important;
}

/* Search input */
.dark-theme main input[type="text"][placeholder*="Buscar"] {
    background: #071722 !important;
    border-color: #102029 !important;
    color: #d1e7f3 !important;
}

/* Tablas en operaciones */
.dark-theme main table thead tr[style*="background: #f8fafc"] {
    background: rgba(255, 255, 255, 0.04) !important;
}

.dark-theme main table thead th {
    color: #bfe9ff !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

.dark-theme main table tbody tr[style*="border-bottom: 1px solid #f1f5f9"] {
    border-color: rgba(255, 255, 255, 0.03) !important;
}

.dark-theme main table tbody td[style*="color: #64748b"] {
    color: #9aa5b1 !important;
}

.dark-theme main table tbody td[style*="color: #0f172a"] {
    color: #cfe7f5 !important;
}

.dark-theme main table tbody td[style*="font-weight: 500"] {
    color: #cfe7f5 !important;
}

/* Badges de estado en operaciones */
.dark-theme main table tbody td span[style*="background:#dcfce7"] {
    background: rgba(22, 163, 74, 0.2) !important;
    color: #4ade80 !important;
}

.dark-theme main table tbody td span[style*="background:#fee2e2"] {
    background: rgba(153, 27, 27, 0.2) !important;
    color: #fca5a5 !important;
}

.dark-theme main table tbody td span[style*="background:#f1f5f9"] {
    background: rgba(71, 85, 105, 0.2) !important;
    color: #9fbfcf !important;
}

.dark-theme main table tbody td span[style*="background:#fef3c7"] {
    background: rgba(146, 64, 14, 0.2) !important;
    color: #fbbf24 !important;
}

/* Botones en operaciones */
.dark-theme main button[style*="background: #0ea5e9"],
.dark-theme main button[style*="background: #10b981"],
.dark-theme main button[style*="background: #f59e0b"],
.dark-theme main button[style*="background: #8b5cf6"] {
    color: #fff !important;
}

/* Cards de reglas de bonos */
.dark-theme main div[style*="background: #f8fafc"][style*="border: 1px solid #e2e8f0"] {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: var(--card-border) !important;
}

.dark-theme main div[style*="background: #f8fafc"] span[style*="font-weight: 700"] {
    color: #cfe7f5 !important;
}

.dark-theme main div[style*="background: #f8fafc"] span[style*="background: #e0f2fe"] {
    background: rgba(14, 165, 233, 0.15) !important;
    color: #7dd3fc !important;
}

.dark-theme main div[style*="background: #f8fafc"] div[style*="color: #0ea5e9"] {
    color: #38bdf8 !important;
}

.dark-theme main div[style*="background: #f8fafc"] p[style*="color: #64748b"] {
    color: #9aa5b1 !important;
}

/* Empty state */
.dark-theme main div[style*="padding: 30px"][style*="text-align: center"][style*="color: #94a3b8"] {
    color: #9aa5b1 !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: var(--card-border) !important;
}

/* No hay resultados */
.dark-theme main td[style*="padding: 24px"][style*="text-align: center"][style*="color: #94a3b8"],
.dark-theme main td[style*="padding: 30px"][style*="text-align: center"][style*="color: #94a3b8"] {
    color: #9aa5b1 !important;
}

/* ===============================
   RESPONSIVE - OPERACIONES
   =============================== */

.op-page-layout {
    display: flex;
    gap: 20px;
    min-height: calc(100vh - 120px);
}

.op-sidebar {
    min-width: 0;
}

.op-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (max-width: 900px) {
    .op-page-layout {
        flex-direction: column;
    }

    .op-sidebar {
        position: static !important;
        top: auto !important;
        align-self: auto !important;
        width: 100% !important;
    }

    .op-sidebar-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .op-sidebar-nav .op-nav-item {
        flex: 1 0 auto;
        white-space: nowrap;
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .op-sidebar-nav .op-nav-item {
        padding: 10px 12px !important;
        font-size: 13px;
    }
}

/* ===============================
   DARK THEME - REGISTROS (Directorio)
   =============================== */

/* Contenedor principal */
.dark-theme .page-wrapper > div[style*="background:#fff"][style*="border:1px solid #e2e8f0"] {
    background: var(--panel) !important;
    border-color: var(--card-border) !important;
}

/* Títulos */
.dark-theme .page-wrapper h2[style*="margin:0 0 6px"] {
    color: #cfe7f5 !important;
}

.dark-theme .page-wrapper p[style*="color:#64748b"] {
    color: #9aa5b1 !important;
}

/* Search input */
.dark-theme #search-input {
    background: #071722 !important;
    border-color: #102029 !important;
    color: #d1e7f3 !important;
}

/* Tabla container */
.dark-theme #employees-table[style*="border:1px solid #e2e8f0"] {
    border-color: var(--card-border) !important;
}

/* Tabla thead */
.dark-theme #employees-table thead[style*="background:#f8fafc"] {
    background: rgba(255, 255, 255, 0.04) !important;
}

.dark-theme #employees-table thead th {
    color: #bfe9ff !important;
}

/* Tabla tbody */
.dark-theme #employees-tbody tr[style*="border-top:1px solid #eef2f7"] {
    border-color: rgba(255, 255, 255, 0.03) !important;
}

.dark-theme #employees-tbody td[style*="color:#64748b"] {
    color: #9aa5b1 !important;
}

.dark-theme #employees-tbody td[style*="font-weight:500"] {
    color: #cfe7f5 !important;
}

/* Badges de estado en registros */
.dark-theme #employees-tbody td span[style*="background:#dcfce7"] {
    background: rgba(22, 163, 74, 0.2) !important;
    color: #4ade80 !important;
}

.dark-theme #employees-tbody td span[style*="background:#fee2e2"] {
    background: rgba(153, 27, 27, 0.2) !important;
    color: #fca5a5 !important;
}

.dark-theme #employees-tbody td span[style*="background:#ffedd5"] {
    background: rgba(154, 52, 18, 0.2) !important;
    color: #fdba74 !important;
}

.dark-theme #employees-tbody td span[style*="background:#f1f5f9"] {
    background: rgba(71, 85, 105, 0.2) !important;
    color: #9fbfcf !important;
}

/* Botón Ver Historial */
.dark-theme #employees-tbody a.btn[style*="background:#f8fafc"] {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #9fbfcf !important;
}

/* Empty state */
.dark-theme #employees-tbody td[style*="text-align:center"][style*="color:#64748b"] {
    color: #9aa5b1 !important;
}

/* Modal de Registros */
.dark-theme #modal-acciones > div[style*="background:#fff"] {
    background: var(--panel) !important;
    border: 1px solid var(--card-border) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

.dark-theme #modal-acciones h3 {
    color: #cfe7f5 !important;
}

.dark-theme #modal-acciones p[style*="color:#64748b"] {
    color: #9aa5b1 !important;
}

.dark-theme #modal-acciones label {
    color: #9fbfcf !important;
}

.dark-theme #modal-acciones select,
.dark-theme #modal-acciones textarea {
    background: #071722 !important;
    border-color: #102029 !important;
    color: #d1e7f3 !important;
}

.dark-theme #btn-close-modal[style*="background:#f1f5f9"] {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #9fbfcf !important;
}

/* ===============================
   DARK THEME - REGISTROS (Ficha del Empleado)
   =============================== */

/* Link Volver al Directorio */
.dark-theme .page-wrapper a[style*="color:#64748b"][href*="registros"] {
    color: #9aa5b1 !important;
}

/* Document Container */
.dark-theme .page-wrapper > div[style*="background:#fff"][style*="border:1px solid #e2e8f0"] > div[style*="background:#fff"] {
    background: var(--panel) !important;
}

/* Document Header */
.dark-theme .page-wrapper > div > div[style*="background:#f8fafc"][style*="padding:24px 30px"] {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: var(--card-border) !important;
}

.dark-theme .page-wrapper > div > div h1[style*="color:#0f172a"] {
    color: #cfe7f5 !important;
}

.dark-theme .page-wrapper > div > div p[style*="color:#64748b"] {
    color: #9aa5b1 !important;
}

.dark-theme .page-wrapper > div > div p strong[style*="color:#334155"] {
    color: #cfe7f5 !important;
}

/* Badge estado en ficha */
.dark-theme .page-wrapper > div > div span[style*="background:#dcfce7"] {
    background: rgba(22, 163, 74, 0.2) !important;
    color: #4ade80 !important;
}

.dark-theme .page-wrapper > div > div span[style*="background:#fee2e2"] {
    background: rgba(153, 27, 27, 0.2) !important;
    color: #fca5a5 !important;
}

.dark-theme .page-wrapper > div > div span[style*="background:#ffedd5"] {
    background: rgba(154, 52, 18, 0.2) !important;
    color: #fdba74 !important;
}

.dark-theme .page-wrapper > div > div span[style*="background:#e2e8f0"] {
    background: rgba(71, 85, 105, 0.2) !important;
    color: #9fbfcf !important;
}

/* Document Body - Secciones */
.dark-theme .page-wrapper > div > div[style*="padding:30px"] h3 {
    color: #94a3b8 !important;
}

/* Info grid labels y valores */
.dark-theme .page-wrapper > div > div[style*="padding:30px"] div[style*="color:#64748b"] {
    color: #9aa5b1 !important;
}

.dark-theme .page-wrapper > div > div[style*="padding:30px"] div[style*="color:#334155"] {
    color: #cfe7f5 !important;
}

.dark-theme .page-wrapper > div > div[style*="padding:30px"] div[style*="color:#0f172a"] {
    color: #cfe7f5 !important;
}

.dark-theme .page-wrapper > div > div[style*="padding:30px"] div[style*="color:#2563eb"] {
    color: #60a5fa !important;
}

/* HR divider */
.dark-theme .page-wrapper > div > div[style*="padding:30px"] hr {
    border-color: var(--card-border) !important;
}

/* Info box (Información Laboral) */
.dark-theme .page-wrapper > div > div[style*="background:#f8fafc"] {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: var(--card-border) !important;
}

/* Bitácora de Movimientos */
.dark-theme .page-wrapper > div > div h3[style*="color:#334155"] {
    color: #cfe7f5 !important;
}

.dark-theme .page-wrapper > div > div > div[style*="border:1px solid #e2e8f0"] {
    border-color: var(--card-border) !important;
}

/* Tabla de bitácora */
.dark-theme .page-wrapper > div > div > div table thead[style*="background:#f1f5f9"] {
    background: rgba(255, 255, 255, 0.04) !important;
}

.dark-theme .page-wrapper > div > div > div table thead th {
    color: #bfe9ff !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

.dark-theme .page-wrapper > div > div > div table tbody tr[style*="border-bottom:1px solid #f1f5f9"] {
    border-color: rgba(255, 255, 255, 0.03) !important;
}

.dark-theme .page-wrapper > div > div > div table tbody td[style*="color:#64748b"] {
    color: #9aa5b1 !important;
}

.dark-theme .page-wrapper > div > div > div table tbody td[style*="color:#94a3b8"] {
    color: #6b7280 !important;
}

.dark-theme .page-wrapper > div > div > div table tbody td[style*="color:#334155"] {
    color: #cfe7f5 !important;
}

.dark-theme .page-wrapper > div > div > div table tbody td[style*="color:#475569"] {
    color: #9fbfcf !important;
}

/* Tipos de acción en bitácora */
.dark-theme .page-wrapper > div > div > div table tbody td span[style*="color:#059669"] {
    color: #4ade80 !important;
}

.dark-theme .page-wrapper > div > div > div table tbody td span[style*="color:#2563eb"] {
    color: #60a5fa !important;
}

.dark-theme .page-wrapper > div > div > div table tbody td span[style*="color:#d97706"] {
    color: #fbbf24 !important;
}

.dark-theme .page-wrapper > div > div > div table tbody td span[style*="color:#475569"] {
    color: #9fbfcf !important;
}

/* Empty state bitácora */
.dark-theme .page-wrapper > div > div > div table tbody td[style*="color:#94a3b8"][style*="font-style:italic"] {
    color: #9aa5b1 !important;
}

/* ===============================
   DARK THEME - NÓMINA BILLETaje (Contenedor completo)
   =============================== */

/* El tab-content contenedor completo del billetaje */
.dark-theme #tab-billetaje.tab-content {
    background: var(--panel) !important;
    border-color: var(--card-border) !important;
}

/* El div interno con max-width:600px */
.dark-theme #tab-billetaje > div {
    background: var(--panel) !important;
    border-color: var(--card-border) !important;
}

/* Header del billetaje */
.dark-theme #tab-billetaje > div > div:first-child {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: var(--card-border) !important;
}

/* Tabla thead - azul claro */
.dark-theme #tab-billetaje table thead tr {
    background: rgba(59, 130, 246, 0.15) !important;
}

.dark-theme #tab-billetaje table thead th {
    color: #93bbfc !important;
    border-bottom-color: rgba(59, 130, 246, 0.2) !important;
}

/* Tabla tbody - texto claro */
.dark-theme #tab-billetaje table tbody td {
    color: #cfe7f5 !important;
}

/* Tabla tfoot - azul más intenso */
.dark-theme #tab-billetaje table tfoot tr {
    background: rgba(59, 130, 246, 0.2) !important;
}

.dark-theme #tab-billetaje table tfoot td {
    color: #93bbfc !important;
}

/* Botón imprimir */
.dark-theme #tab-billetaje .no-print button {
    background: var(--panel) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #9fbfcf !important;
}

/* ===============================
   RESPONSIVE - MENÚ MÓVIL
   =============================== */

/* Ocultar botón hamburguesa por defecto (desktop) */
#mobile-menu-toggle {
    display: none;
}

/* Estilos base para el menú móvil */
@media (max-width: 768px) {
    /* Mostrar botón hamburguesa en móvil */
    #mobile-menu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        z-index: 100003 !important;
        position: relative;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Asegurar que el header permita clicks en el botón */
    header.topbar {
        position: relative;
        z-index: 1000;
    }
    
    /* El botón debe estar por encima de todo */
    #mobile-menu-toggle svg {
        pointer-events: none;
    }
    
    /* Sidebar como menú deslizante en móvil */
    aside.sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        width: 280px !important;
        z-index: 100002 !important;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        background: var(--panel, #071722) !important;
        border-right: 1px solid var(--card-border, rgba(255,255,255,0.06)) !important;
        padding: 16px !important;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Sidebar visible cuando tiene clase 'mobile-open' */
    aside.sidebar.mobile-open {
        transform: translateX(0) !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Overlay oscuro cuando el menú está abierto */
    body.menu-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 100001;
        backdrop-filter: blur(2px);
        pointer-events: auto;
    }
    
    /* Ocultar el botón de toggle original del sidebar en móvil */
    aside.sidebar .brand #menu-toggle {
        display: none !important;
    }
    
    /* Ajustar el brand en móvil */
    aside.sidebar .brand {
        margin-bottom: 20px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--card-border, rgba(255,255,255,0.06));
    }
    
    /* Ajustar items de navegación en móvil */
    aside.sidebar nav .nav-item {
        padding: 14px 12px;
        margin-bottom: 4px;
        border-radius: 8px;
    }
    
    aside.sidebar nav .nav-item:hover {
        background: rgba(255, 255, 255, 0.04);
    }
    
    aside.sidebar nav .nav-item.active {
        background: rgba(14, 165, 233, 0.15);
        box-shadow: inset 3px 0 0 #0ea5e9;
    }
    
    /* Ajustar main-area en móvil */
    .main-area {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    /* Ajustar topbar en móvil */
    header.topbar {
        padding: 12px 16px;
        position: sticky;
        top: 0;
        z-index: 1000;
        background: var(--bg, #020b14);
    }
    
    header.topbar .page-title {
        font-size: 16px;
        flex: 1;
    }
    
    /* Ajustar content en móvil */
    .content {
        padding: 16px;
    }
    
    /* Ocultar notificaciones y perfil en topbar en móvil pequeño */
    @media (max-width: 480px) {
        header.topbar .user-controls .notifications,
        header.topbar .user-controls .profile {
            margin-left: auto;
        }
    }
}

/* Estilos para tablets (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Sidebar más estrecho en tablets */
    aside.sidebar {
        width: 200px;
    }
    
    .main-area {
        margin-left: 200px;
    }
}

/* Ajustes generales para pantallas pequeñas */
@media (max-width: 768px) {
    /* Tablas scrollables horizontalmente */
    .tabla-wrapper,
    table {
        overflow-x: auto;
        display: block;
        max-width: 100%;
    }
    
    /* Cards más compactas */
    .card,
    .empleados-card,
    .page-wrapper > div[style*="background:#fff"] {
        padding: 16px !important;
    }
    
    /* Inputs más grandes para touch */
    input,
    select,
    button {
        min-height: 44px;
    }
    
    /* Botones de toolbar más compactos */
    .empleados-toolbar {
        flex-direction: column;
        align-items: stretch !important;
    }
    
    .empleados-toolbar .search-box {
        min-width: 100% !important;
    }
    
    /* Tablas en asistencia - permitir scroll */
    .tabla-wrapper table {
        font-size: 11px;
    }
    
    .tabla-wrapper th,
    .tabla-wrapper td {
        padding: 6px 4px !important;
        white-space: nowrap;
    }
    
    /* Inputs de hora más pequeños en móvil */
    input[type="time"] {
        padding: 4px !important;
        font-size: 11px;
    }
}

/* Dropdown de notificaciones - modo oscuro */
.dark-theme #notif-menu {
    background: var(--panel) !important;
    border-color: var(--card-border) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.dark-theme #notif-menu div[style*="font-weight:700"] {
    color: #cfe7f5 !important;
}

.dark-theme #notif-menu .muted {
    color: #9aa5b1 !important;
}

.dark-theme #notif-menu div[style*="border-top:1px solid #f1f5f9"] {
    border-color: var(--card-border) !important;
}

.dark-theme #notif-menu div[style*="background:rgba(14,165,233,0.06)"] {
    background: rgba(14, 165, 233, 0.1) !important;
}

/* Dropdown de perfil - modo oscuro */
.dark-theme #profile-menu {
    background: var(--panel) !important;
    border-color: var(--card-border) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.dark-theme #profile-menu div[style*="font-weight:700"] {
    color: #cfe7f5 !important;
}

.dark-theme #profile-menu .muted {
    color: #9aa5b1 !important;
}

.dark-theme #profile-menu div[style*="border-top:1px solid #f1f5f9"] {
    border-color: var(--card-border) !important;
}

.dark-theme #profile-menu button.btn-secondary {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #9fbfcf !important;
}

.dark-theme #profile-menu button.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #cfe7f5 !important;
}

/* Prevenir scroll del body cuando el menú está abierto */
body.menu-open {
    overflow: hidden;
}