/* ============================================================
   SISTEMA DE NÓMINA RD - ESTILOS
   ============================================================ */

:root {
    --primary: #1a365d;
    --primary-light: #2b4c7e;
    --primary-dark: #0f2440;
    --accent: #e8b849;
    --accent-hover: #d4a530;
    --success: #38a169;
    --danger: #e53e3e;
    --warning: #d69e2e;
    --info: #3182ce;
    --gray-50: #f7fafc;
    --gray-100: #edf2f7;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e0;
    --gray-400: #a0aec0;
    --gray-500: #718096;
    --gray-600: #4a5568;
    --gray-700: #2d3748;
    --gray-800: #1a202c;
    --sidebar-width: 250px;
    --header-height: 0px;
    --radius: 8px;
    --shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
}

[data-theme="dark"] {
    --primary: #5b8fd6;
    --primary-light: #7aa5e0;
    --primary-dark: #0f2440;
    --accent: #e8b849;
    --accent-hover: #f0c968;
    --success: #48bb78;
    --danger: #fc8181;
    --warning: #ecc94b;
    --info: #63b3ed;
    --gray-50: #1a2130;
    --gray-100: #10151f;
    --gray-200: #2d3748;
    --gray-300: #4a5568;
    --gray-400: #718096;
    --gray-500: #a0aec0;
    --gray-600: #cbd5e0;
    --gray-700: #e2e8f0;
    --gray-800: #f7fafc;
    --shadow: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.4);
}

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

body {
    font-family: 'Plus Jakarta Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--gray-100);
    color: var(--gray-700);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Scrollbar a juego con la marca (Firefox + navegadores basados en WebKit/Blink) */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
    background-clip: padding-box;
}

.sidebar-menu {
    scrollbar-color: rgba(255,255,255,0.25) transparent;
}

.sidebar-menu::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.25);
    background-clip: padding-box;
}

.sidebar-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.4);
    background-clip: padding-box;
}

/* Cifras en columnas (montos, cantidades, totales) alineadas con ancho fijo
   por dígito -- evita que las tablas "bailen" al filtrar/ordenar. */
.stat-info h3,
table td,
.doc-totals .total-line span:last-child,
.total-line span:last-child,
.linea-subtotal {
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   LOGIN
   ============================================================ */
.login-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 45%, var(--primary-light) 100%);
    background-size: 200% 200%;
    animation: loginGradientShift 18s ease-in-out infinite;
    padding: 20px;
}

/* Halos difuminados que flotan lentamente detrás de la tarjeta de login --
   puramente decorativo, contenido en pseudo-elementos para no tocar el HTML. */
.login-wrapper::before,
.login-wrapper::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

.login-wrapper::before {
    width: 480px;
    height: 480px;
    top: -160px;
    left: -140px;
    background: radial-gradient(circle, rgba(232, 184, 73, 0.28) 0%, rgba(232, 184, 73, 0) 70%);
    animation: loginOrbDrift1 22s ease-in-out infinite;
}

.login-wrapper::after {
    width: 560px;
    height: 560px;
    bottom: -200px;
    right: -160px;
    background: radial-gradient(circle, rgba(91, 143, 214, 0.35) 0%, rgba(91, 143, 214, 0) 70%);
    animation: loginOrbDrift2 26s ease-in-out infinite;
}

@keyframes loginGradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes loginOrbDrift1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(60px, 50px) scale(1.15); }
}

@keyframes loginOrbDrift2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-50px, -40px) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    .login-wrapper,
    .login-wrapper::before,
    .login-wrapper::after {
        animation: none;
    }
}

.login-box {
    position: relative;
    z-index: 1;
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 40px;
    padding-top: 94px;
    width: 100%;
    max-width: 400px;
    animation: loginBoxRise 0.5s ease-out;
}

@keyframes loginBoxRise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .login-box { animation: none; }
}

/* Medallón del logo -- flota sobre el borde superior de la tarjeta, con
   anillo dorado y una animación de entrada + flotación continua sutil
   (inspirado en el login de POS v3, adaptado a la paleta navy/dorado). */
.login-logo-wrap {
    width: 168px;
    height: 168px;
    border-radius: 50%;
    background: white;
    overflow: hidden;
    box-shadow:
        0 0 0 4px rgba(232, 184, 73, 0.55),
        0 0 0 9px rgba(232, 184, 73, 0.16),
        0 18px 40px rgba(15, 36, 64, 0.35);
    margin-bottom: -60px;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    animation:
        loginLogoIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both,
        loginLogoFloat 3.8s ease-in-out 0.85s infinite;
}

.login-logo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Marca "Nodo Escolar" -- misma app, URL propia (nodoescolar.appcorecloud.com.do)
   para los centros que usan Gestión Escolar, ver login.php. Mismo layout,
   solo cambia el acento a naranja (color real del escudo) en vez del dorado
   por defecto. */
body.tema-nodoescolar {
    --accent: #f6900d;
    --accent-hover: #d97b06;
}
.login-logo-nodoescolar {
    box-shadow:
        0 0 0 4px rgba(246, 144, 13, 0.55),
        0 0 0 9px rgba(246, 144, 13, 0.16),
        0 18px 40px rgba(15, 36, 64, 0.35);
}

@keyframes loginLogoIn {
    0% { opacity: 0; transform: translateY(-18px) scale(0.8); }
    65% { transform: translateY(6px) scale(1.04); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes loginLogoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
    .login-logo-wrap { animation: none; }
}

.login-version {
    text-align: center;
    margin: 20px 0 0;
    font-size: 12px;
    color: var(--gray-400);
}

.login-box .logo {
    text-align: center;
    margin-bottom: 30px;
}

.login-box .logo i {
    font-size: 48px;
    color: var(--accent);
}

.login-box .logo img {
    width: 160px;
    height: 160px;
    object-fit: contain;
}

.login-box .logo h1 {
    font-size: 24px;
    color: var(--primary);
    margin-top: 10px;
}

.login-box .logo p {
    color: var(--gray-500);
    font-size: 14px;
}

.login-box .form-group {
    margin-bottom: 20px;
}

.login-box label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 14px;
}

.login-box .form-control {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    font-size: 15px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.login-box .form-control:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(43, 76, 126, 0.15);
}

/* Campo con icono a la izquierda (usuario/contraseña) y, opcionalmente, un
   botón de mostrar/ocultar a la derecha (solo en campos de contraseña). */
.input-icon-group {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon-group > i:first-child {
    position: absolute;
    left: 16px;
    color: var(--gray-400);
    font-size: 15px;
    pointer-events: none;
}

.input-icon-group .form-control {
    padding-left: 44px;
    padding-right: 44px;
    background: var(--gray-50);
    border-color: var(--gray-100);
}

.input-icon-group .input-icon-toggle {
    position: absolute;
    right: 14px;
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    font-size: 15px;
    padding: 4px;
    line-height: 1;
    transition: color 0.15s;
}

.input-icon-group .input-icon-toggle:hover {
    color: var(--gray-600);
}

.login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 10px;
}

/* Toggle tipo interruptor para "Recuérdame" -- selector con elemento (label.switch-toggle)
   para ganar por especificidad a la regla genérica ".login-box label { display: block }". */
label.switch-toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
}

.switch-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-slider {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    background: var(--gray-300);
    border-radius: 999px;
    flex-shrink: 0;
    transition: background 0.2s;
}

.switch-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.switch-toggle input:checked + .switch-slider {
    background: var(--primary);
}

.switch-toggle input:checked + .switch-slider::before {
    transform: translateX(18px);
}

.switch-label {
    font-size: 14px;
    color: var(--gray-600);
}

.login-forgot {
    font-size: 14px;
    color: var(--info);
    text-decoration: none;
    font-weight: 500;
}

.login-forgot:hover {
    text-decoration: underline;
}

.login-links {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
}

.login-links a {
    color: var(--info);
    text-decoration: none;
    font-weight: 500;
}

.login-links a:hover {
    text-decoration: underline;
}

.login-box .btn {
    width: 100%;
    padding: 14px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.login-box .btn:hover {
    background: var(--primary-light);
}

.login-box .btn:active {
    transform: scale(0.99);
}

.login-box .alert {
    padding: 12px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    font-size: 14px;
}

.login-box .alert-danger {
    background: #fed7d7;
    color: #c53030;
    border: 1px solid #feb2b2;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--primary-dark);
    color: white;
    overflow: hidden;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.sidebar-header {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar-header i {
    font-size: 32px;
    color: var(--accent);
    display: block;
    margin-bottom: 5px;
}

.sidebar-header img {
    width: 42px;
    height: 42px;
    object-fit: cover;
    display: block;
    margin: 0 auto 5px;
    border-radius: 50%;
}

.sidebar-header span {
    font-size: 18px;
    font-weight: 700;
}

.sidebar-menu {
    list-style: none;
    padding: 0;
    flex: 1;
    overflow-y: auto;
}

.sidebar-menu .menu-section {
    padding: 15px 20px 5px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gray-400);
    font-weight: 700;
}

.sidebar-menu li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: var(--gray-300);
    text-decoration: none;
    transition: all 0.2s;
    font-size: 14px;
    text-align: center;
}

.sidebar-menu li a:hover {
    background: rgba(255,255,255,0.1);
    color: white;
}

.sidebar-menu li a.active {
    background: rgba(255,255,255,0.12);
    color: white;
    box-shadow: inset 3px 0 0 var(--accent);
}

.sidebar-menu li a i {
    width: 20px;
    text-align: center;
    font-size: 16px;
}

.sidebar-footer {
    flex-shrink: 0;
    padding: 15px 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 12px;
    color: var(--gray-400);
}

.sidebar-version {
    display: block;
    margin-top: 6px;
    opacity: 0.6;
}

/* Ocultar menú (Apariencia) -- el sidebar se desliza fuera de pantalla hacia la izquierda */
.sidebar { transition: transform 0.25s ease; }
body.sidebar-hidden .sidebar { transform: translateX(-100%); }

.sidebar-reopen-btn {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 200;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background: var(--primary-dark);
    color: white;
    border: none;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    font-size: 16px;
}
.sidebar-reopen-btn:hover { background: var(--primary); }
body.sidebar-hidden .sidebar-reopen-btn { display: flex; }

/* Fondo oscurecido detrás del cajón de menú en móvil -- ver @media
   (max-width: 768px) más abajo, donde se activa. Definido aquí (fuera de
   la media query) para que nunca aparezca en escritorio aunque la clase
   sidebar-mobile-open llegara a estar presente en el body. */
.sidebar-backdrop { display: none; }

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.main-content {
    margin-left: var(--sidebar-width);
    padding: 30px;
    min-height: 100vh;
    transition: margin-left 0.25s ease;
}
body.sidebar-hidden .main-content { margin-left: 0; }

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 15px;
}

.page-header h1 {
    font-size: 24px;
    color: var(--primary);
    font-weight: 700;
}

.page-header .actions {
    display: flex;
    gap: 10px;
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}

.card-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-700);
}

.card-body {
    padding: 24px;
}

/* ============================================================
   DASHBOARD STATS
   ============================================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 0 0 6px var(--stat-icon-ring, transparent);
    transition: transform 0.2s ease;
}

.stat-card.clickable:hover .stat-icon { transform: scale(1.08); }

.stat-icon.blue { background: #bee3f8; color: #2b6cb0; --stat-icon-ring: rgba(43, 108, 176, 0.08); }
.stat-icon.green { background: #c6f6d5; color: #276749; --stat-icon-ring: rgba(39, 103, 73, 0.08); }
.stat-icon.yellow { background: #fefcbf; color: #975a16; --stat-icon-ring: rgba(151, 90, 22, 0.08); }
.stat-icon.red { background: #fed7d7; color: #9b2c2c; --stat-icon-ring: rgba(155, 44, 44, 0.08); }

.stat-info h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--gray-800);
}

.stat-info p {
    font-size: 13px;
    color: var(--gray-500);
    margin-top: 2px;
}

/* ============================================================
   TABLES
   ============================================================ */
.table-responsive {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

/* Columnas de contenido corto (código, badges, fechas) no deben partirse en
   varias líneas -- que sea la tabla la que crezca y dispare el scroll
   horizontal de .table-responsive, no que cada celda se comprima. */
table td.mono,
table th.actions-col,
table td.actions-cell,
table .badge {
    white-space: nowrap;
}

/* Opt-in: solo para tablas con muchas columnas donde una columna de nombre
   quedaría comprimida a una palabra por línea (ver crm_contactos). No es el
   comportamiento por defecto de ninguna tabla -- se aplica a mano por página. */
table .col-nombre {
    min-width: 160px;
}

table thead th {
    background: var(--gray-50);
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-500);
    font-weight: 700;
    border-bottom: 2px solid var(--gray-200);
    white-space: nowrap;
}

table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-100);
    font-size: 14px;
}

table tbody tr:hover {
    background: var(--gray-50);
}

table .actions-cell {
    white-space: nowrap;
}

table .actions-cell .btn-sm {
    padding: 4px 10px;
    font-size: 12px;
}

/* ============================================================
   FORMS
   ============================================================ */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.form-group {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 13px;
    color: var(--gray-700);
}

.form-group label .required {
    color: var(--danger);
}

.form-control {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--gray-200);
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s;
    background: white;
    font-family: inherit;
}

.form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(232, 184, 73, 0.15);
}

.form-control.error {
    border-color: var(--danger);
}

select.form-control {
    cursor: pointer;
    appearance: auto;
}

textarea.form-control {
    resize: vertical;
    min-height: 80px;
}

.form-hint {
    font-size: 12px;
    color: var(--gray-400);
    margin-top: 4px;
}

.form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--gray-200);
}

/* Checkbox + texto (ej. "Seleccionar toda la colegiatura pendiente") --
   sin esto el checkbox queda alineado a la línea base del texto en vez de
   centrado con él. */
.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

/* Casilla de selección en la primera columna de una tabla (ej. Plan de
   Pagos): centrada verticalmente aunque la fila sea más alta por texto
   de varias líneas en otra columna. */
table td.checkbox-cell {
    vertical-align: middle;
    text-align: center;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s, box-shadow 0.15s;
    font-family: inherit;
}

.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-light); }

/* ============================================================
   TABS
   ============================================================ */
.tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    background: var(--gray-100);
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: hidden;
}
.tab {
    padding: 10px 20px;
    text-decoration: none;
    color: var(--gray-600);
    font-size: 14px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}
.tab:hover {
    background: var(--gray-200);
    color: var(--primary);
}
.tab.active {
    background: white;
    color: var(--primary);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

/* ============================================================
   INPUT GROUP
   ============================================================ */
.input-group {
    display: flex;
    align-items: stretch;
}
.input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    flex: 1;
}
.input-suffix {
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-left: none;
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 13px;
    color: var(--gray-600);
    font-weight: 500;
}

.btn-success { background: var(--success); color: white; }
.btn-success:hover { background: #2f855a; }

.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: #c53030; }

.btn-warning { background: var(--warning); color: white; }
.btn-warning:hover { background: #b7942a; }

.btn-info { background: var(--info); color: white; }
.btn-info:hover { background: #2b6cb0; }

.btn-secondary { background: var(--gray-200); color: var(--gray-700); }
.btn-secondary:hover { background: var(--gray-300); }

.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-lg { padding: 14px 28px; font-size: 16px; }

/* ============================================================
   BADGES / STATUS
   ============================================================ */
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-success { background: #c6f6d5; color: #276749; }
.badge-warning { background: #fefcbf; color: #975a16; }
.badge-danger { background: #fed7d7; color: #9b2c2c; }
.badge-info { background: #bee3f8; color: #2b6cb0; }
.badge-secondary { background: var(--gray-200); color: var(--gray-600); }

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
    padding: 14px 18px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-success { background: #c6f6d5; color: #276749; border: 1px solid #9ae6b4; }
.alert-danger { background: #fed7d7; color: #9b2c2c; border: 1px solid #feb2b2; }
.alert-warning { background: #fefcbf; color: #975a16; border: 1px solid #f6e05e; }
.alert-info { background: #bee3f8; color: #2b6cb0; border: 1px solid #90cdf4; }

/* ============================================================
   PAYROLL DETAIL
   ============================================================ */
.payroll-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.summary-item {
    background: var(--gray-50);
    padding: 16px;
    border-radius: var(--radius);
    text-align: center;
}

.summary-item .label {
    font-size: 12px;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-item .value {
    font-size: 20px;
    font-weight: 700;
    margin-top: 4px;
    color: var(--gray-800);
}

.summary-item .value.positive { color: var(--success); }
.summary-item .value.negative { color: var(--danger); }

/* ============================================================
   EMPLOYEE PROFILE CARD
   ============================================================ */
.profile-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    flex-shrink: 0;
}

.profile-info h2 {
    font-size: 20px;
    color: var(--gray-800);
}

.profile-info p {
    color: var(--gray-500);
    font-size: 14px;
}

.profile-info .meta {
    display: flex;
    gap: 20px;
    margin-top: 8px;
    font-size: 13px;
    color: var(--gray-500);
}

/* ============================================================
   MODAL / PRINT
   ============================================================ */

/* Bloque de membrete (logo + datos de empresa + título del reporte) que los
   reportes "página completa" (CxC, CxP, TSS, ISR, etc.) insertan oculto en
   pantalla y solo se revela al imprimir -- así el PDF/impreso se ve como un
   documento con encabezado propio en vez de un recorte de la página web,
   sin tener que rehacer cada reporte como plantilla standalone aparte. */
.print-only { display: none; }

.print-header {
    display: none;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #333;
}
.print-header .print-header-titulo {
    text-align: center;
    margin-top: 10px;
}
.print-header .print-header-titulo h1 {
    font-size: 18px;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.print-header .print-header-titulo p {
    font-size: 12px;
    color: #555;
    margin: 4px 0 0;
}
.print-footer {
    display: none;
    margin-top: 24px;
    padding-top: 8px;
    border-top: 1px solid #ccc;
    font-size: 10px;
    color: #777;
    text-align: right;
}

/* Variante para plantillas standalone (imprimir.php) donde el membrete se ve
   también en pantalla, no solo al imprimir -- ver imprimirEncabezadoReporteHtml(). */
.print-header-visible, .print-footer-visible { display: block; }

@media print {
    .sidebar, .btn, .no-print, .sidebar-reopen-btn, .page-header .actions { display: none !important; }
    .main-content { margin-left: 0 !important; padding: 0 !important; }
    body { background: white !important; }
    .card { box-shadow: none !important; border: none !important; }
    .card-header { border-bottom: 1px solid #ccc; }
    .print-only, .print-header, .print-footer { display: block !important; }


    /* Tablas: evita que una fila se parta entre dos páginas y repite el
       encabezado en cada página nueva del reporte. */
    table { page-break-inside: auto; }
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
    tr { page-break-inside: avoid; }

    /* Los navegadores NO imprimen colores de fondo por defecto (el usuario
       tendría que activar "Gráficos de fondo" a mano en el diálogo de
       impresión) -- por eso facturas/cotizaciones/órdenes de compra se ven
       "planas" al imprimir directamente (window.print()) aunque el PDF
       generado por Dompdf sí se ve bien (Dompdf no tiene ese recorte, pinta
       todo siempre). Se fuerza aquí para que el encabezado de tabla y el
       bloque de totales conserven su fondo gris sin depender de que el
       usuario toque esa opción. */
    .print-nomina, .print-nomina * {
        -webkit-print-color-adjust: exact !important;
        color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

@page { margin: 15mm; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    /* El menú lateral en escritorio se colapsa a un riel de íconos y se
       expande con :hover -- en móvil no hay cursor, así que :hover nunca
       dispara y el usuario quedaba con un riel angosto ilegible (el texto
       de cada enlace no está envuelto en <span>, así que ninguna regla de
       display:none lo ocultaba -- solo se recortaba/envolvía a la fuerza
       dentro de 60px). En vez de intentar arreglar el riel, en móvil el
       menú se comporta como un cajón (drawer): oculto fuera de pantalla
       por defecto, se abre a ancho completo sobre el contenido (con fondo
       oscurecido) al tocar el botón hamburguesa -- mismo patrón que ya
       usa "Ocultar Menú" en escritorio (transform + botón flotante), solo
       que en móvil el estado no se guarda en localStorage porque cada
       carga de página debe empezar cerrado (ver sidebar-mobile-open en
       js/scripts.js). */
    .sidebar {
        width: min(300px, 85vw);
        transform: translateX(-100%);
    }
    body.sidebar-mobile-open .sidebar {
        transform: translateX(0);
    }
    .sidebar-reopen-btn {
        display: flex !important;
    }
    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.5);
        z-index: 90;
    }
    body.sidebar-mobile-open .sidebar-backdrop {
        display: block;
    }
    .main-content {
        margin-left: 0;
        padding: 70px 16px 20px;
    }
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }
    .form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   TEMA OSCURO - overrides puntuales (fondos/bordes fijos que no usan variables)
   ============================================================ */
[data-theme="dark"] .login-box,
[data-theme="dark"] .card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .modal,
[data-theme="dark"] table,
[data-theme="dark"] .report-card {
    background: var(--gray-50);
    color: var(--gray-700);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .login-box .form-control,
[data-theme="dark"] .quick-search-input {
    background: var(--gray-100);
    border-color: var(--gray-300);
    color: var(--gray-700);
}

[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly] {
    background: var(--gray-200);
}

[data-theme="dark"] table thead th {
    background: var(--gray-100);
    color: var(--gray-500);
}

[data-theme="dark"] table tbody td {
    border-bottom-color: var(--gray-200);
}

[data-theme="dark"] table tbody tr:hover {
    background: var(--gray-100);
}

[data-theme="dark"] table tbody tr.row-warning { background: #3d3200; }
[data-theme="dark"] table tbody tr.row-warning:hover { background: #4d3f00; }

[data-theme="dark"] .document-meta,
[data-theme="dark"] .doc-totals,
[data-theme="dark"] .document-notes,
[data-theme="dark"] .summary-item,
[data-theme="dark"] .invoice-meta {
    background: var(--gray-100);
}

[data-theme="dark"] .prod-thumb-placeholder {
    background: var(--gray-200);
    color: var(--gray-400);
}

[data-theme="dark"] .filter-tabs a {
    background: var(--gray-200);
    color: var(--gray-500);
}
[data-theme="dark"] .filter-tabs a.active {
    background: var(--primary);
    color: white;
}
[data-theme="dark"] .filter-tabs a:hover {
    background: var(--gray-300);
}

[data-theme="dark"] .alert-success { background: #1a3a1a; color: #9ae6b4; border-color: #276749; }
[data-theme="dark"] .alert-danger { background: #3d1a1a; color: #feb2b2; border-color: #9b2c2c; }
[data-theme="dark"] .alert-warning { background: #3d3200; color: #f6e05e; border-color: #975a16; }
[data-theme="dark"] .alert-info { background: #1a334a; color: #90cdf4; border-color: #2b6cb0; }

[data-theme="dark"] .badge-success { background: #1a3a1a; color: #9ae6b4; }
[data-theme="dark"] .badge-warning { background: #3d3200; color: #f6e05e; }
[data-theme="dark"] .badge-danger { background: #3d1a1a; color: #feb2b2; }
[data-theme="dark"] .badge-info { background: #1a334a; color: #90cdf4; }
[data-theme="dark"] .badge-secondary { background: var(--gray-300); color: var(--gray-700); }

[data-theme="dark"] .tabs { background: var(--gray-100); }
[data-theme="dark"] .tab.active { background: var(--gray-50); }

[data-theme="dark"] .stat-icon.blue { background: #1a334a; color: #63b3ed; --stat-icon-ring: rgba(99, 179, 237, 0.1); }
[data-theme="dark"] .stat-icon.green { background: #1a3a1a; color: #68d391; --stat-icon-ring: rgba(104, 211, 145, 0.1); }
[data-theme="dark"] .stat-icon.yellow { background: #3d3200; color: #f6e05e; --stat-icon-ring: rgba(246, 224, 94, 0.1); }
[data-theme="dark"] .stat-icon.red { background: #3d1a1a; color: #fc8181; --stat-icon-ring: rgba(252, 129, 129, 0.1); }

[data-theme="dark"] .modal-backdrop { background: rgba(0,0,0,0.7); }
[data-theme="dark"] .close-btn { color: var(--gray-500); }

/* La vista impresa siempre se mantiene clara, incluso con el tema oscuro activo */
[data-theme="dark"] .print-nomina {
    background: white;
    color: #1a202c;
}

/* ============================================================
   PRINTABLE NÓMINA
   ============================================================ */
.print-nomina {
    background: white;
    padding: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.print-nomina .empresa-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--primary);
}

.print-nomina .empresa-header h1 {
    font-size: 20px;
    color: var(--primary);
}

.print-nomina .empresa-header p {
    font-size: 13px;
    color: var(--gray-500);
}

.print-nomina table {
    font-size: 12px;
}

.print-nomina table td,
.print-nomina table th {
    padding: 8px 12px;
}

.text-right { text-align: right; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-center { text-align: center; }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-primary { color: var(--primary); }
.fw-bold { font-weight: 700; }
.mb-20 { margin-bottom: 20px; }
.mt-20 { margin-top: 20px; }
.mb-3 { margin-bottom: 16px; }
.mr-1 { margin-right: 4px; }
.mr-2 { margin-right: 8px; }
.d-flex { display: flex; }
.gap-10 { gap: 10px; }
.flex-wrap { flex-wrap: wrap; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }

/* Inline forms */
.form-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.form-inline .form-group { margin-bottom: 0; }

/* Form help text */
.form-text { font-size: 12px; color: var(--gray-500); margin-top: 4px; display: block; }

/* Modal */
.modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; }
.modal-backdrop.active { display: flex; }
.modal { background: white; border-radius: 12px; width: 90%; max-width: 500px; max-height: 80vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.modal-header { padding: 20px 24px 0; display: flex; justify-content: space-between; align-items: center; }
.modal-header h3 { margin: 0; }
.modal-body { padding: 20px 24px; }
.modal-footer { padding: 0 24px 20px; display: flex; gap: 8px; justify-content: flex-end; }
.close-btn { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--gray-500); padding: 0 4px; }
.close-btn:hover { color: var(--danger); }

/* Grid system */
.row { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.row > [class*="col-"] { padding: 0 8px; box-sizing: border-box; }
.col-md-1 { width: 8.333%; }
.col-md-2 { width: 16.666%; }
.col-md-3 { width: 25%; }
.col-md-4 { width: 33.333%; }
.col-md-6 { width: 50%; }
.col-md-8 { width: 66.666%; }
.col-md-12 { width: 100%; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 16px; }

/* Card header */
.card-header { padding: 16px 20px; border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: space-between; }
.card-header h3 { margin: 0; font-size: 16px; font-weight: 600; }

/* Page header actions gap */
.page-header .actions { display: flex; gap: 8px; }

/* Collapsible modules */
.menu-module { position: relative; }
.module-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    padding: 12px 20px !important;
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    user-select: none;
}
.module-toggle:hover { background: rgba(255,255,255,0.08); }
.module-arrow { font-size: 11px; transition: transform 0.25s ease; }
/* Selector de hijo directo (>) a propósito -- con un submenú anidado
   (menu-module dentro de otro menu-module, ver Portal Profesor dentro de
   Gestión Escolar), un selector de descendiente cualquiera abriría el
   anidado junto con el padre sin que tuviera su propio toggle. */
.menu-module.open > .module-toggle .module-arrow { transform: rotate(180deg); }
.module-submenu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.menu-module.open > .module-submenu { display: block; }
.module-submenu li a {
    padding-left: 52px !important;
    font-size: 13px;
}
/* Nivel anidado (submenú dentro de un submenú, ej. Portal Profesor) --
   un poco más de sangría y un tamaño ligeramente menor para distinguirlo
   visualmente del nivel superior. */
.module-submenu .menu-module .module-toggle { padding-left: 40px !important; font-size: 13px; font-weight: 600; }
.module-submenu .module-submenu li a { padding-left: 68px !important; font-size: 12.5px; }
/* 3er nivel (Gestión Escolar > Portales > Portal Profesores) -- un poco más
   de sangría todavía para distinguirlo de los otros dos. */
.module-submenu .module-submenu .menu-module .module-toggle { padding-left: 56px !important; font-size: 12.5px; }
.module-submenu .module-submenu .module-submenu li a { padding-left: 84px !important; font-size: 12px; }
.menu-sub-header {
    padding: 10px 20px 2px 52px !important;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent);
    opacity: 0.7;
    cursor: default;
    list-style: none;
}

/* ============================================================
   DOCUMENTOS (Cotizaciones / Facturas / Cierres)
   ============================================================ */
.document-meta {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 20px;
}

.document-header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 2px solid var(--gray-200);
}

.document-header .doc-info h1 {
    font-size: 20px;
    color: var(--primary);
    margin-bottom: 8px;
}

.document-header .doc-info p {
    font-size: 13px;
    color: var(--gray-600);
    margin: 3px 0;
}

.document-header .doc-client {
    text-align: right;
    min-width: 240px;
}

.document-header .doc-client h3 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-400);
    margin-bottom: 6px;
    font-weight: 700;
}

.document-header .doc-client p {
    font-size: 14px;
    color: var(--gray-700);
    line-height: 1.5;
    margin: 2px 0;
}

.doc-totals {
    width: 340px;
    margin-left: auto;
    margin-top: 20px;
    background: var(--gray-50);
    border-radius: var(--radius);
    padding: 16px 20px;
}

.doc-totals .total-line {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
    color: var(--gray-600);
}

.doc-totals .total-line.total-final {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    border-top: 2px solid var(--gray-200);
    padding-top: 10px;
    margin-top: 4px;
}

.quick-search-input {
    width: 100%;
    margin-bottom: 4px;
    padding: 5px 8px;
    font-size: 12px;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    box-sizing: border-box;
    font-family: inherit;
}

.quick-search-input:focus {
    outline: none;
    border-color: var(--accent);
}

.producto-search-wrap {
    position: relative;
}

.producto-sugerencias {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    box-shadow: var(--shadow-lg);
    max-height: 220px;
    overflow-y: auto;
}

.producto-sugerencia {
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--gray-100);
}

.producto-sugerencia:last-child {
    border-bottom: none;
}

.producto-sugerencia:hover,
.producto-sugerencia.activa {
    background: var(--gray-100);
}

.producto-sugerencia-vacia {
    padding: 6px 10px;
    font-size: 12px;
    color: var(--gray-400);
}

[data-theme="dark"] .producto-sugerencias {
    background: var(--gray-100);
    border-color: var(--gray-300);
}

[data-theme="dark"] .producto-sugerencia {
    border-bottom-color: var(--gray-200);
}

[data-theme="dark"] .producto-sugerencia:hover,
[data-theme="dark"] .producto-sugerencia.activa {
    background: var(--gray-200);
}

.linea-subtotal {
    font-weight: 700;
    color: var(--primary);
}

.document-notes {
    margin-top: 20px;
    padding: 14px 18px;
    background: var(--gray-50);
    border-radius: var(--radius);
    font-style: italic;
    font-size: 13px;
    color: var(--gray-600);
}

.document-notes h4 {
    font-size: 12px;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-style: normal;
    margin-bottom: 4px;
}

@media (max-width: 768px) {
    .document-header { flex-direction: column; }
    .document-header .doc-client { text-align: left; }
    .doc-totals { width: 100%; }
}

/* ============================================================
   REPORTES (grid compacto tipo hub)
   ============================================================ */
.report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 20px;
}

.report-card {
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
}

.report-card h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-card table { font-size: 13px; }
.report-card table thead th { padding: 8px 10px; }
.report-card table tbody td { padding: 8px 10px; }

.report-card .empty-msg {
    color: var(--gray-400);
    font-size: 13px;
    padding: 12px 0;
}

.report-stat-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 4px;
}

.report-stat-row .report-stat-item { text-align: center; }

/* ============================================================
   ORGANIGRAMA (árbol departamento -> cargo -> empleado en CSS puro)
   ============================================================ */
.orgchart-wrapper {
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 30px 20px;
    overflow-x: auto;
}

.orgchart-root {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.orgchart-node {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--shadow);
}

.orgchart-empresa {
    background: var(--primary);
    color: white;
    font-size: 15px;
    padding: 14px 24px;
}

.orgchart-dept {
    background: var(--gray-700, #2d3748);
    color: white;
}

.orgchart-cargo {
    background: var(--gray-100, #edf2f7);
    color: var(--gray-800, #1a202c);
    border: 1px solid var(--gray-200, #e2e8f0);
}

.orgchart-empleado {
    background: var(--gray-50);
    color: var(--gray-600, #4a5568);
    border: 1px solid var(--gray-200, #e2e8f0);
    font-weight: 400;
}

.orgchart-departamentos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    position: relative;
}

.orgchart-branch {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding-top: 20px;
}

.orgchart-branch::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 20px;
    background: var(--gray-300, #cbd5e0);
}

.orgchart-cargos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 16px;
}

.orgchart-empleados {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    align-items: center;
}

.orgchart-vacio {
    font-size: 12px;
    color: var(--gray-400);
    font-style: italic;
    margin-top: 10px;
}

@media print {
    .sidebar, .page-header .actions { display: none !important; }
    .orgchart-wrapper { box-shadow: none; }
    /* Los navegadores no imprimen fondos por defecto -- sin esto, el organigrama
       pierde el color que distingue empresa/departamento/cargo/empleado y queda
       ilegible (mismo problema ya documentado para facturas/cotizaciones). */
    .orgchart-node, .orgchart-node * {
        -webkit-print-color-adjust: exact !important;
        color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}
.report-stat-row .report-stat-value { font-size: 22px; font-weight: 700; color: var(--primary); }
.report-stat-row .report-stat-value.warning { color: var(--warning); }
.report-stat-row .report-stat-value.danger { color: var(--danger); }
.report-stat-row .report-stat-value.success { color: var(--success); }
.report-stat-row .report-stat-label { font-size: 12px; color: var(--gray-500); margin-top: 2px; }

/* ============================================================
   TABLE ROW WARNING (stock bajo, vencidos, etc.)
   ============================================================ */
table tbody tr.row-warning { background: #fffbea; }
table tbody tr.row-warning:hover { background: #fff3c4; }

/* Clickable stat card (dashboard KPI que navega) */
.stat-card.clickable { cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; text-decoration: none; color: inherit; }
.stat-card.clickable:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* Filter tabs (Activos / Inactivos / Todos) */
.filter-tabs { display: flex; gap: 6px; }
.filter-tabs a {
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: var(--gray-600);
    background: var(--gray-100);
    transition: all 0.15s;
}
.filter-tabs a:hover { background: var(--gray-200); }
.filter-tabs a.active { background: var(--primary); color: white; }

/* Product thumbnail in listings */
.prod-thumb { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; border: 1px solid var(--gray-200); }
.prod-thumb-placeholder { width: 36px; height: 36px; border-radius: 6px; background: var(--gray-100); display: flex; align-items: center; justify-content: center; color: var(--gray-300); font-size: 14px; }

/* ============================================================
   PUNTO DE VENTA (pantalla de venta)
   ============================================================ */
.pos-container { display: flex; gap: 16px; align-items: flex-start; }
.pos-catalog { flex: 1; min-width: 0; }
.pos-search-bar { margin-bottom: 12px; }
.pos-categories { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pos-cat-chip {
    padding: 7px 16px;
    border-radius: 20px;
    background: var(--gray-100);
    color: var(--gray-600);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    border: none;
    transition: all 0.15s;
}
.pos-cat-chip:hover { background: var(--gray-200); }
.pos-cat-chip.active { background: var(--primary); color: white; }
.pos-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    max-height: 65vh;
    overflow-y: auto;
    padding: 4px;
}
.pos-product-card {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 10px;
    text-align: center;
    cursor: pointer;
    background: var(--card-bg, white);
    transition: transform 0.1s, box-shadow 0.1s, border-color 0.1s;
}
.pos-product-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow); }
.pos-product-card img { width: 100%; height: 70px; object-fit: cover; border-radius: 6px; margin-bottom: 6px; }
.pos-product-card .pos-prod-icon { font-size: 34px; margin-bottom: 4px; }
.pos-product-card .pos-prod-name { font-weight: 600; font-size: 13px; line-height: 1.3; min-height: 34px; }
.pos-product-card .pos-prod-price { color: var(--primary); font-weight: 700; margin-top: 4px; }
.pos-product-card.out-of-stock { opacity: 0.45; cursor: not-allowed; }
.pos-cart {
    width: 380px;
    flex-shrink: 0;
    background: var(--card-bg, white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 16px;
}
.pos-cart h3 { margin: 0 0 10px; font-size: 16px; }
.pos-cart-items { max-height: 32vh; overflow-y: auto; margin-bottom: 10px; }
.pos-cart-empty { text-align: center; color: var(--gray-400); padding: 24px 0; font-size: 13px; }
.pos-cart-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--gray-100); font-size: 13px; }
.pos-cart-item .pci-info { flex: 1; min-width: 0; }
.pos-cart-item .pci-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-cart-item .pci-price { color: var(--gray-500); font-size: 12px; }
.pos-cart-item .pci-qty { display: flex; align-items: center; gap: 4px; }
.pos-cart-item .pci-qty button { width: 22px; height: 22px; border: 1px solid var(--gray-200); background: var(--gray-100); border-radius: 4px; cursor: pointer; font-weight: 700; line-height: 1; }
.pos-cart-item .pci-qty span { min-width: 20px; text-align: center; }
.pos-cart-item .pci-total { font-weight: 700; min-width: 60px; text-align: right; }
.pos-cart-item .pci-remove { color: var(--danger); cursor: pointer; }
.pos-cart-totals { border-top: 1px solid var(--gray-200); padding-top: 10px; margin-top: auto; }
.pos-cart-totals .total-line { display: flex; justify-content: space-between; padding: 3px 0; font-size: 13px; color: var(--gray-600); }
.pos-cart-totals .grand-total { display: flex; justify-content: space-between; font-size: 20px; font-weight: 700; color: var(--primary); padding-top: 6px; margin-top: 4px; border-top: 1px dashed var(--gray-200); }
.pos-payment-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.pos-change { text-align: center; font-size: 14px; font-weight: 600; margin: 6px 0; padding: 8px; border-radius: 6px; background: var(--gray-100); }
[data-theme="dark"] .pos-product-card { background: var(--gray-100); }
[data-theme="dark"] .pos-cart { background: var(--gray-100); }