/* DESIGN SYSTEM & GLOBAL SETTINGS */
:root {
    --transition-speed: 0.3s;
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --border-radius-sm: 8px;
    --border-radius-md: 16px;
    --border-radius-lg: 24px;
    --box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}

/* Tenant Option 1: Importadora KYH (Sleek Blue Light Theme) */
body[data-tenant="importadora"] {
    --primary: #1e40af;
    --primary-hover: #1e3a8a;
    --accent: #2563eb;
    --bg-app: #f8fafc;
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    --sidebar-text: #0f172a;
    --sidebar-text-muted: #475569;
    --sidebar-hover: rgba(37, 99, 235, 0.08);
    --sidebar-border: #e2e8f0;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(15, 23, 42, 0.02);
    --input-bg: #ffffff;
    --table-header: #f1f5f9;
    --table-hover: #f8fafc;
    --border-input: #cbd5e1;
    --focus-ring: rgba(37, 99, 235, 0.2);
}

/* Tenant Option 2: Club Sol del Valle (Fresh Green Light Theme) */
body[data-tenant="club"] {
    --primary: #059669;
    --primary-hover: #047857;
    --accent: #10b981;
    --bg-app: #f0fdf4;
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    --sidebar-text: #064e3b;
    --sidebar-text-muted: #4b5563;
    --sidebar-hover: rgba(16, 185, 129, 0.08);
    --sidebar-border: #dcfce7;
    --text-main: #064e3b;
    --text-muted: #4b5563;
    --border: #dcfce7;
    --shadow: 0 4px 20px -2px rgba(6, 78, 59, 0.04), 0 2px 6px -1px rgba(6, 78, 59, 0.02);
    --input-bg: #ffffff;
    --table-header: #f0fdf4;
    --table-hover: #f8fafc;
    --border-input: #a7f3d0;
    --focus-ring: rgba(16, 185, 129, 0.2);
}

/* RESET & LAYOUT */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-app);
    color: var(--text-main);
    transition: background-color var(--transition-speed), color var(--transition-speed);
    overflow-x: hidden;
}

.app-container {
    display: flex;
    min-height: 100vh;
}

/* SIDEBAR */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1050; /* Ensure it is on top of modals and tabs */
    width: 260px;
    background-color: var(--bg-sidebar);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    padding: 16px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color var(--transition-speed);
    border-right: 1px solid var(--sidebar-border);
    flex-shrink: 0;
    transform: translateX(-100%);
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.15);
}

.sidebar.active {
    transform: translateX(0);
}

/* Sidebar Overlay */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(15, 23, 42, 0.3);
    backdrop-filter: blur(4px);
    z-index: 999;
    transition: all 0.3s ease;
}

.sidebar-overlay.active {
    display: block;
}

/* Sidebar toggle button (hamburger/sandwich) */
#btn-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background-color: var(--card-bg, #ffffff);
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

#btn-sidebar-toggle:hover {
    background-color: var(--sidebar-hover);
    color: var(--primary);
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

#btn-sidebar-toggle:active {
    transform: translateY(0);
}

/* Close button inside sidebar */
.btn-sidebar-close {
    background: transparent;
    border: none;
    color: var(--sidebar-text-muted);
    cursor: pointer;
    font-size: 18px;
    padding: 6px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    width: 32px;
    height: 32px;
}

.btn-sidebar-close:hover {
    background-color: var(--sidebar-hover);
    color: #ef4444;
}

body.menu-active {
    overflow: hidden;
}


.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.logo-icon {
    font-size: 24px;
    color: var(--accent);
}

.brand-text h1 {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--sidebar-text);
}

.brand-text span {
    font-size: 10px;
    color: var(--sidebar-text-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.menu-section {
    font-size: 10px;
    font-weight: 700;
    color: var(--sidebar-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 12px 0 6px 12px;
    opacity: 0.8;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: var(--sidebar-text-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--border-radius-sm);
    transition: all 0.2s ease;
}

.menu-item i {
    font-size: 16px;
    color: var(--accent);
    transition: color var(--transition-speed);
}

.menu-item.active i {
    color: inherit;
}

.menu-item:hover i {
    color: var(--primary-hover);
}

.menu-item:hover {
    color: var(--primary);
    background-color: var(--sidebar-hover);
}

.menu-item.active {
    color: #ffffff !important;
    background-color: var(--primary);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

/* Tenant Visibility Controls */
body[data-tenant="importadora"] .club-only { display: none !important; }
body[data-tenant="club"] .importadora-only { display: none !important; }

.sidebar-footer {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--sidebar-border);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar {
    font-size: 32px;
    color: var(--accent);
}

.user-info h4 {
    font-size: 14px;
    font-weight: 600;
}

.user-info span {
    font-size: 11px;
    color: #94a3b8;
}

/* MAIN CONTENT AREA */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 20px;
    overflow-y: auto;
    max-height: 100vh;
}

/* HEADER */
.top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
    max-width: 1050px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.top-header h2 {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* PREMIUM TENANT SWITCHER */
.tenant-switcher-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.switcher-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.tenant-selector {
    display: flex;
    background-color: var(--input-bg);
    border: 1px solid var(--border);
    padding: 4px;
    border-radius: 30px;
    position: relative;
    cursor: pointer;
    user-select: none;
}

.tenant-option {
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 20px;
    z-index: 2;
    transition: color var(--transition-speed);
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
}

.tenant-option.active {
    color: #ffffff;
}

.tenant-selector .slider-bg {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 155px; /* approximated size */
    height: calc(100% - 8px);
    background-color: var(--primary);
    border-radius: 20px;
    z-index: 1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body[data-tenant="club"] .tenant-selector .slider-bg {
    transform: translateX(165px); /* slide right */
    width: 175px;
}

/* PREMIUM UNIFIED SWITCHER */
.premium-unit-switcher-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.premium-unit-selector {
    display: flex;
    background-color: var(--input-bg);
    border: 1px solid var(--border);
    padding: 3px;
    border-radius: 30px;
    position: relative;
    user-select: none;
    gap: 4px;
}

.unit-option {
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 20px;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    cursor: pointer;
}

.unit-option:hover {
    color: var(--text-main);
}

.unit-option.active {
    color: #ffffff !important;
}

/* Individual active brand colors */
.unit-option.active[data-sucursal="kyh"] {
    background-color: #1e40af; /* Deep blue for KYH */
    box-shadow: 0 3px 8px rgba(30, 64, 175, 0.35);
}

.unit-option.active[data-sucursal="bendita_sea"] {
    background-color: #db2777; /* Rose/Pink for Bendita Sea */
    box-shadow: 0 3px 8px rgba(219, 39, 119, 0.35);
}

.unit-option.active[data-sucursal="todos"][data-tenant="club"] {
    background-color: #0d9488; /* Teal for Club Sol del Valle */
    box-shadow: 0 3px 8px rgba(13, 148, 136, 0.35);
}

/* CARDS & PANELS */
.view-panel {
    display: none;
    animation: fadeIn 0.4s ease;
    max-width: 1050px;
    width: 100%;
    margin: 0 auto;
}

.view-panel.active {
    display: block;
}

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

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.metric-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow);
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

.card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background-color: rgba(37, 99, 235, 0.1);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

body[data-tenant="club"] .card-icon {
    background-color: rgba(5, 150, 105, 0.1);
}

.card-info h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.metric-value {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
}

.alert-card .card-icon {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.sub-label {
    font-size: 11px;
    color: var(--text-muted);
}

/* TABLES */
.table-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.table-responsive {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 14px;
}

.data-table th {
    background-color: var(--table-header);
    color: var(--text-muted);
    font-weight: 600;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.data-table td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    color: var(--text-main);
}

.data-table tbody tr:hover {
    background-color: var(--table-hover);
}

#view-terceros .data-table tbody tr {
    cursor: pointer;
}

/* ACTIONS BAR */
.actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    gap: 16px;
}

.search-box {
    position: relative;
    max-width: 380px;
    width: 100%;
}

.search-box i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.search-box input {
    width: 100%;
    padding: 12px 16px 12px 48px;
    background-color: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 30px;
    color: var(--text-main);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.search-box input:focus {
    border-color: var(--accent);
}

/* BUTTONS */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--border-radius-sm);
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
}

.btn-primary {
    background-color: var(--primary);
    color: #ffffff;
}

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

.btn-secondary {
    background-color: var(--input-bg);
    color: var(--text-main);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background-color: var(--border);
}

.btn-block {
    width: 100%;
    justify-content: center;
    padding: 14px;
    border-radius: var(--border-radius-sm);
}

/* FORMS */
.form-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md);
    padding: 16px;
    box-shadow: var(--shadow);
    position: relative;
}

.form-card h3 {
    margin-bottom: 12px;
    font-family: var(--font-heading);
    font-weight: 700;
}

.form-group {
    margin-bottom: 12px;
}

.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 8px 12px;
    background-color: var(--input-bg);
    border: 1.5px solid var(--border-input, #cbd5e1);
    border-radius: var(--border-radius-sm);
    color: var(--text-main);
    font-size: 13px;
    outline: none;
    font-family: var(--font-body);
    transition: all 0.2s ease-in-out;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--accent);
    background-color: #ffffff;
    box-shadow: 0 0 0 3.5px var(--focus-ring, rgba(37, 99, 235, 0.18)), inset 0 1px 1px rgba(0,0,0,0.05);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.checkbox-row {
    display: flex;
    gap: 20px;
    margin-top: 5px;
}

.checkbox-row label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
}

/* SPLIT LAYOUT FOR BILLING */
.split-layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 16px;
    align-items: start;
}

.totals-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md);
    padding: 12px;
    box-shadow: var(--shadow);
    position: sticky;
    top: 16px;
}

.totals-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--text-muted);
}

.totals-row.grand-total {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main);
}

/* BILLING DETAILS TABLE */
.invoice-items-section {
    margin-top: 24px;
    border-top: 1px solid var(--border);
    padding-top: 20px;
}

.invoice-items-section h4 {
    margin-bottom: 15px;
    font-size: 15px;
}

.add-item-bar {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 15px;
}

.add-item-bar select, .add-item-bar input {
    padding: 8px 12px;
    background-color: var(--input-bg);
    border: 1.5px solid var(--border-input, #cbd5e1);
    border-radius: 8px;
    color: var(--text-main);
    outline: none;
    transition: all 0.2s ease-in-out;
}

.add-item-bar select:focus, .add-item-bar input:focus {
    border-color: var(--accent);
    background-color: #ffffff;
    box-shadow: 0 0 0 3.5px var(--focus-ring, rgba(37, 99, 235, 0.18)), inset 0 1px 1px rgba(0,0,0,0.05);
}

/* CAUSACION PREVIEW */
.causacion-preview-box {
    margin-top: 24px;
    padding: 16px;
    background-color: var(--input-bg);
    border: 1px dashed var(--border);
    border-radius: var(--border-radius-sm);
}

.causacion-preview-box h4 {
    font-size: 13px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.causacion-line {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-family: monospace;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

/* MODALS */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.modal.active {
    display: flex;
}

.modal-content {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md);
    width: 100%;
    max-width: 600px;
    padding: 16px 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    animation: modalSlide 0.3s ease;
    cursor: default;
}

@keyframes modalSlide {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.close-btn {
    font-size: 24px;
    cursor: pointer;
    color: var(--text-muted);
}

.close-btn:hover {
    color: var(--text-main);
}

/* POS LAYOUT (Club Sol del Valle) */
.pos-layout {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 32px;
    align-items: start;
}

.pos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    margin-top: 15px;
}

.pos-item-btn {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.pos-item-btn:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: var(--shadow);
}

.pos-item-btn i {
    font-size: 28px;
    color: var(--accent);
}

.pos-item-btn span {
    font-size: 13px;
    font-weight: 600;
}

.pos-item-btn p {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
}

.pos-cart-panel {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md);
    padding: 16px;
    box-shadow: var(--shadow);
}

.pos-cart-items {
    min-height: 200px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 15px 0;
    margin: 15px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pos-cart-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.pos-cart-item-name {
    font-weight: 600;
}

.pos-cart-item-qty {
    color: var(--text-muted);
    font-size: 12px;
}

.pos-totals strong {
    font-size: 22px;
    color: var(--primary);
}

/* TABS HEADER FOR TESORERIA & REPORTES */
.tabs-header {
    display: flex;
    border-bottom: 1px solid var(--border);
    gap: 24px;
    margin-bottom: 24px;
}

.tab-btn {
    background: none;
    border: none;
    padding: 12px 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    position: relative;
    outline: none;
}

.tab-btn:hover {
    color: var(--text-main);
}

.tab-btn.active {
    color: var(--primary);
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--primary);
    border-radius: 3px;
}

.tab-content {
    display: none;
    animation: fadeIn 0.4s ease;
}

.tab-content.active {
    display: block;
}

/* STOCK ALERT DECORATION */
.alert-row {
    background-color: rgba(239, 68, 68, 0.05);
}

.badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
}

.badge-alert {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.badge-success {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.badge-pending {
    background-color: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

/* CALENDAR RESERVATIONS */
.calendar-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.booking-item {
    padding: 16px;
    background-color: var(--input-bg);
    border-left: 4px solid var(--accent);
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.booking-info h4 {
    font-size: 14px;
    font-weight: 600;
}

.booking-info p {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.booking-value {
    font-weight: 700;
    color: var(--text-main);
}

/* SEARCH AUTOCOMPLETE DROPDOWN */
.search-container {
    position: relative;
    width: 100%;
}

.search-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    min-width: min(600px, 90vw);
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    z-index: 999;
    max-height: 190px;
    overflow-y: auto;
}

/* LUPITA BUTTONS */
.btn-lupita {
    background: var(--bg-app) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--border-radius-sm) !important;
    color: var(--accent) !important;
    cursor: pointer;
    padding: 8px 12px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
    height: 38px;
    box-sizing: border-box;
}
.btn-lupita:hover {
    background: var(--accent) !important;
    color: #ffffff !important;
    border-color: var(--accent) !important;
}

/* COMPACT BILLING TABLES */
#invoice-items-table th, #invoice-items-table td,
#purchase-items-table th, #purchase-items-table td {
    padding: 6px 10px !important;
    font-size: 13px !important;
}

.search-result-item {
    padding: 10px 16px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
    color: var(--text-main);
    transition: background-color var(--transition-speed);
    text-align: left;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background-color: var(--table-header);
}

.search-result-item .item-code {
    font-weight: bold;
    color: var(--primary);
    margin-right: 8px;
}

#nc-payment-dropdown-menu a:hover {
    background-color: var(--table-header) !important;
}

/* ==========================================================================
   CASHIER KEYPAD (TECLADO DE CAJERO) & DOCUMENT HUBS
   ========================================================================== */
.cashier-keypad {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.cashier-key {
    background-color: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--border-radius-md);
    padding: 12px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: var(--shadow);
    position: relative;
    user-select: none;
}

.cashier-key::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 4px;
    background-color: var(--accent);
    border-radius: 4px 4px 0 0;
    transform: scaleX(0);
    transition: transform var(--transition-speed);
}

.cashier-key:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.08);
}

.cashier-key:hover::after {
    transform: scaleX(1);
}

.cashier-key:active {
    transform: translateY(1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}

.cashier-key-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(37, 99, 235, 0.08);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: background-color var(--transition-speed), transform var(--transition-speed);
}

body[data-tenant="club"] .cashier-key-icon {
    background-color: rgba(5, 150, 105, 0.08);
    color: var(--primary);
}

.cashier-key:hover .cashier-key-icon {
    transform: scale(1.1);
    background-color: var(--primary);
    color: #ffffff;
}

.cashier-key h3 {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
}

.cashier-key p {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
}

.cashier-key-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: var(--table-header);
    color: var(--primary);
    padding: 4px 8px;
    font-family: monospace;
    font-size: 10px;
    font-weight: 700;
    border-radius: 12px;
    border: 1px solid var(--border);
}

/* ==========================================================================
   WORLD OFFICE CONTABILIZACION GRID
   ========================================================================== */
.accounting-preview-table-container {
    margin-top: 24px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-card);
    overflow: hidden;
}

.accounting-preview-title {
    background-color: var(--table-header);
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accounting-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.accounting-preview-table th {
    background-color: var(--table-header);
    color: var(--text-muted);
    font-weight: 600;
    padding: 10px 15px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.accounting-preview-table td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border);
    color: var(--text-main);
    line-height: 1.5;
}

.accounting-preview-table tr:last-child td {
    border-bottom: none;
}

.accounting-preview-table .col-amount {
    text-align: right;
    font-family: monospace;
    font-weight: 600;
    font-size: 13px;
}

.accounting-preview-table .col-debit {
    color: var(--primary);
}

.accounting-preview-table .col-credit {
    color: var(--text-muted);
}

.accounting-preview-table .totals-row {
    font-weight: 700;
    background-color: var(--table-header);
    border-top: 2px solid var(--border);
}

/* ==========================================================================
   NOTA DE CONTABILIDAD GRID (ENTRY ROW)
   ========================================================================== */
.nc-ledger-grid {
    width: 100%;
    margin-top: 15px;
    border-collapse: collapse;
}

.nc-ledger-grid th {
    background-color: var(--table-header);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 13px;
    padding: 10px;
    border: 1px solid var(--border);
    text-align: left;
}

.nc-ledger-grid td {
    padding: 8px;
    border: 1px solid var(--border);
    background-color: var(--bg-card);
}

.nc-ledger-grid input {
    width: 100%;
    padding: 6px 10px;
    border: 1.5px solid var(--border-input, #cbd5e1);
    background-color: var(--input-bg);
    border-radius: 6px;
    outline: none;
    font-size: 13px;
    color: var(--text-main);
    transition: all 0.2s ease-in-out;
}

.nc-ledger-grid input:focus {
    border-color: var(--accent);
    background-color: #ffffff;
    box-shadow: 0 0 0 3px var(--focus-ring, rgba(37, 99, 235, 0.15)), inset 0 1px 1px rgba(0,0,0,0.05);
}

.nc-ledger-grid .col-amount-input {
    text-align: right;
    font-family: monospace;
    font-weight: 600;
}

.nc-ledger-grid .delete-row-btn {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.nc-ledger-grid .delete-row-btn:hover {
    color: #b91c1c;
}

.nc-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding: 15px;
    background-color: var(--table-header);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
}

.nc-summary-stats {
    display: flex;
    gap: 30px;
    font-size: 14px;
}

.nc-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nc-stat span {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.nc-stat strong {
    font-family: monospace;
    font-size: 16px;
}

/* ==========================================================================
   DOCUMENT CONSULTING VIEW
   ========================================================================== */
.filter-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md);
    padding: 14px 16px;
    box-shadow: var(--shadow);
    margin-bottom: 16px;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    align-items: flex-end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.filter-group input, .filter-group select {
    padding: 10px 14px;
    background-color: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    color: var(--text-main);
    font-size: 13px;
    outline: none;
}

.filter-group input:focus, .filter-group select:focus {
    border-color: var(--accent);
}

/* ==========================================================================
   CONSULTA DE DOCUMENTOS — CONSOLA DE BUSQUEDA
   Una sola barra grande manda; el resto se esconde hasta que se pide.
   ========================================================================== */
/* La franja de color va como fondo y no como ::before, para no tener que
   recortar la tarjeta: con overflow:hidden se cortaria la lista desplegable
   del buscador de productos, que sale por fuera. */
.cd-console {
    background-color: var(--bg-card);
    background-image: linear-gradient(90deg, var(--primary), var(--accent));
    background-repeat: no-repeat;
    background-size: 100% 3px;
    background-position: top left;
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md);
    box-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.16), 0 2px 6px -2px rgba(15, 23, 42, 0.05);
    padding: 21px 20px 16px;
    margin-bottom: 14px;
}

.cd-searchbar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cd-searchbar-icon {
    position: absolute;
    left: 18px;
    font-size: 15px;
    color: var(--text-muted);
    pointer-events: none;
    transition: color 0.2s;
}

.cd-searchbar:focus-within .cd-searchbar-icon {
    color: var(--primary);
}

.cd-searchbar input {
    flex: 1;
    min-width: 0;
    /* En el telefono se quedaba en 38 px, incomodo de acertar con el dedo. */
    min-height: 48px;
    padding: 14px 44px 14px 46px;
    font-size: 15px;
    font-weight: 500;
    font-family: var(--font-body);
    color: var(--text-main);
    background-color: #ffffff;
    border: 2px solid var(--border-input);
    border-radius: 999px;
    outline: none;
    box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.05);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.cd-searchbar input:hover {
    border-color: var(--accent);
}

.cd-searchbar input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

.cd-searchbar input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--focus-ring);
}

.cd-searchbar-clear {
    position: absolute;
    left: auto;
    right: 132px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: 12px;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.cd-searchbar-clear:hover {
    background-color: var(--border);
    color: var(--text-main);
}

.cd-searchbar-clear.visible {
    display: inline-flex;
}

.cd-searchbar-go {
    flex: none;
    padding: 13px 24px;
    font-size: 14px;
    background-image: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: 999px;
    box-shadow: 0 6px 14px -6px var(--primary);
    transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}

.cd-searchbar-go:hover {
    filter: brightness(1.06);
    box-shadow: 0 9px 18px -7px var(--primary);
    transform: translateY(-1px);
}

.cd-searchbar-go:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px -6px var(--primary);
}

/* Linea de ayuda: los ejemplos van como fichas, que se leen de un vistazo
   mejor que entre comillas dentro de un parrafo. */
.cd-searchbar-ayuda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0 20px;
    font-size: 12px;
    color: var(--text-muted);
}

.cd-ejemplo {
    padding: 3px 9px;
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-main);
    background-color: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0.9;
}

.cd-ayuda-nota {
    padding-left: 8px;
    border-left: 1px solid var(--border);
    opacity: 0.85;
}

/* Fila de periodos rapidos. Va en una bandeja hundida para que se lea como
   una zona aparte de la barra de busqueda, y no como mas botones sueltos. */
.cd-quickrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 8px 10px;
    background-color: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.cd-quickrow .cd-chip {
    background-color: var(--bg-card);
}

.cd-quickrow .cd-chip-activo {
    background-color: var(--primary);
    box-shadow: 0 4px 10px -5px var(--primary);
}

.cd-quickrow-titulo {
    margin-right: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cd-quickrow-espacio {
    flex: 1 1 auto;
    min-width: 8px;
}

.cd-chip {
    padding: 6px 13px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--text-muted);
    background-color: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s;
}

.cd-chip:hover {
    color: var(--primary);
    border-color: var(--accent);
    background-color: var(--sidebar-hover);
}

.cd-chip-activo,
.cd-chip-activo:hover {
    color: #ffffff;
    background-color: var(--primary);
    border-color: var(--primary);
}

.cd-linkbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all 0.15s;
}

.cd-linkbtn:hover {
    color: var(--primary);
    background-color: var(--sidebar-hover);
}

.cd-cuenta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    font-size: 10.5px;
    font-weight: 800;
    color: #ffffff;
    background-color: var(--primary);
    border-radius: 999px;
}

.cd-cuenta[hidden] {
    display: none;
}

.cd-linkbtn-flecha {
    font-size: 9px;
    transition: transform 0.2s;
}

.cd-linkbtn.abierto {
    color: var(--primary);
}

.cd-linkbtn.abierto .cd-linkbtn-flecha {
    transform: rotate(180deg);
}

/* Panel de filtros avanzados */
.cd-avanzados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-top: 14px;
    padding: 16px;
    background-color: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
}

.cd-avanzados[hidden] {
    display: none;
}

/* Los campos se veian blancos sobre un fondo casi blanco, con un borde tan
   claro que no se distinguia el cajon: los companeros no sabian donde tocar.
   Ahora se hunden, tienen borde marcado, y los de escribir llevan un lapiz
   para separarlos a simple vista de los de elegir. */
.cd-avanzados .filter-group label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-main);
    opacity: 0.72;
}

.cd-avanzados .filter-group input,
.cd-avanzados .filter-group select {
    height: 44px;
    padding: 0 14px;
    font-size: 13.5px;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--text-main);
    /* 2 px enteros: el navegador redondea 1,5 px a 1 y el borde volvia a
       perderse contra el fondo, que es justo lo que se venia a arreglar. */
    border: 2px solid var(--border-input);
    border-radius: 10px;
    box-shadow: inset 0 2px 3px rgba(15, 23, 42, 0.055);
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.cd-avanzados .filter-group input::placeholder {
    font-weight: 500;
    color: var(--text-muted);
    opacity: 0.85;
}

/* Donde se ESCRIBE: fondo blanco limpio y un lapiz a la derecha. */
.cd-avanzados .filter-group input[type="text"] {
    padding-right: 38px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 15px 15px;
}

/* Donde se ELIGE: un gris muy leve, para que se lea como lista desplegable. */
.cd-avanzados .filter-group select {
    background-color: #f1f5f9;
    cursor: pointer;
}

.cd-avanzados .filter-group input[type="date"] {
    background-color: #ffffff;
    cursor: pointer;
}

.cd-avanzados .filter-group input[type="date"]::-webkit-calendar-picker-indicator {
    padding: 4px;
    border-radius: 5px;
    opacity: 0.5;
    cursor: pointer;
    transition: all 0.15s;
}

.cd-avanzados .filter-group input[type="date"]::-webkit-calendar-picker-indicator:hover {
    background-color: var(--sidebar-hover);
    opacity: 1;
}

.cd-avanzados .filter-group input:hover,
.cd-avanzados .filter-group select:hover {
    border-color: var(--accent);
}

.cd-avanzados .filter-group input:focus,
.cd-avanzados .filter-group select:focus {
    background-color: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--focus-ring);
    outline: none;
}

/* Un campo con algo puesto se pinta del color de la empresa: de un vistazo
   se ve cual esta filtrando, sin tener que leerlos uno por uno.
   Lleva [type] y el nombre de la etiqueta para pesar mas que las reglas de
   arriba y no depender del orden en que queden escritas. */
.cd-avanzados .filter-group input[type].cd-campo-lleno,
.cd-avanzados .filter-group select.cd-campo-lleno,
.cd-avanzados .filter-group input[type].cd-campo-lleno:hover,
.cd-avanzados .filter-group select.cd-campo-lleno:hover {
    color: var(--primary);
    background-color: var(--sidebar-hover);
    border-color: var(--primary);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Chips de filtros aplicados */
.cd-activos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.cd-activos:empty {
    display: none;
}

.cd-activo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    background-color: var(--sidebar-hover);
    border: 1px solid transparent;
    border-radius: 999px;
}

.cd-activo button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    padding: 0;
    font-size: 10px;
    color: var(--primary);
    background-color: rgba(255, 255, 255, 0.65);
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.cd-activo button:hover {
    color: #ffffff;
    background-color: var(--primary);
}

/* Barra de resumen */
.cd-resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    margin-bottom: 14px;
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow);
}

.cd-resumen-datos {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
}

.cd-metrica {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cd-metrica-etiqueta {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cd-metrica-valor {
    font-size: 19px;
    font-weight: 800;
    font-family: var(--font-heading);
    line-height: 1.2;
    color: var(--text-main);
}

.cd-metrica-dinero {
    color: var(--primary);
}

.cd-metrica-rojo {
    color: #ef4444;
}

.cd-resumen-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.cd-resumen-alcance {
    margin-right: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

/* Tabla */
.cd-tabla-card .table-responsive {
    max-height: calc(100vh - 400px);
    min-height: 240px;
    overflow-y: auto;
}

/* Anchos repartidos a la fuerza: si se dejan al contenido, el nombre del
   tercero y el concepto empujan la tabla fuera de la pantalla y aparece una
   barra horizontal justo en el informe que más se lee. */
.cd-tabla {
    table-layout: fixed;
}

.cd-tabla th:nth-child(1) { width: 14%; }
.cd-tabla th:nth-child(2) { width: 9%; }
.cd-tabla th:nth-child(3) { width: 24%; }
.cd-tabla th:nth-child(4) { width: 26%; }
.cd-tabla th:nth-child(5) { width: 11%; }
.cd-tabla th:nth-child(6) { width: 12%; }
.cd-tabla th:nth-child(7) { width: 54px; }

/* La columna de acciones lleva su propio relleno: con los 20 px de la tabla
   el botón de anular no cabía y quedaba cortado por la mitad. */
.cd-tabla th:nth-child(7),
.cd-tabla td:nth-child(7) {
    padding-left: 4px;
    padding-right: 10px;
    text-align: right;
}

.cd-tabla td {
    overflow: hidden;
}

.cd-tabla .badge {
    display: inline-block;
    padding: 3px 7px;
    font-size: 10px;
    white-space: nowrap;
}

.cd-tabla thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cd-th-orden {
    cursor: pointer;
    user-select: none;
}

.cd-th-orden:hover {
    color: var(--primary);
}

.cd-th-icono {
    margin-left: 3px;
    font-size: 9px;
    opacity: 0.35;
}

.cd-th-orden.cd-th-activo {
    color: var(--primary);
}

.cd-th-orden.cd-th-activo .cd-th-icono {
    opacity: 1;
}

.cd-tabla td {
    padding: 11px 16px;
    font-size: 13px;
    vertical-align: middle;
}

.cd-tabla tbody tr {
    cursor: pointer;
    transition: background-color 0.12s;
}

.cd-fila-anulada {
    background-color: rgba(239, 68, 68, 0.04);
}

.cd-fila-anulada td:first-child,
.cd-fila-anulada td:nth-child(2),
.cd-fila-anulada td:nth-child(3) {
    opacity: 0.62;
}

.cd-col-valor {
    text-align: right;
}

.cd-col-acciones {
    width: 44px;
}

.cd-doc-codigo {
    display: block;
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 800;
    font-family: var(--font-heading);
    color: var(--text-main);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cd-doc-tipo {
    display: block;
    width: fit-content;
    margin-top: 3px;
    padding: 2px 7px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 4px;
    white-space: nowrap;
}

.cd-doc-ref {
    display: block;
    margin-top: 3px;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-muted);
}

.cd-fecha-dia {
    font-weight: 600;
    white-space: nowrap;
}

.cd-fecha-rel {
    display: block;
    font-size: 10.5px;
    color: var(--text-muted);
}

.cd-tercero-nombre {
    display: block;
    max-width: 100%;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cd-tercero-nit {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-muted);
}

.cd-concepto {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cd-tercero-nit,
.cd-fecha-rel,
.cd-doc-ref {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cd-valor {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.cd-sin-estado {
    font-size: 12px;
    color: var(--text-muted);
    opacity: 0.5;
}

.cd-btn-anular {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 12px;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.cd-btn-anular:hover {
    color: #ef4444;
    background-color: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
}

/* Estados vacio / cargando / error */
.cd-estado-celda {
    padding: 46px 24px !important;
    text-align: center;
}

.cd-estado-icono {
    font-size: 26px;
    color: var(--text-muted);
    opacity: 0.35;
}

.cd-estado-titulo {
    margin-top: 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
}

.cd-estado-texto {
    max-width: 460px;
    margin: 6px auto 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
}

.cd-estado-acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.cd-estado-error .cd-estado-icono {
    color: #ef4444;
    opacity: 0.7;
}

@media (max-width: 768px) {
    .cd-console {
        padding: 14px;
    }

    .cd-searchbar {
        flex-wrap: wrap;
    }

    .cd-searchbar input {
        flex: 1 1 100%;
        padding-right: 42px;
        font-size: 14px;
    }

    .cd-searchbar-clear {
        right: 14px;
    }

    .cd-searchbar-go {
        flex: 1 1 100%;
        justify-content: center;
    }

    .cd-searchbar-ayuda {
        margin-left: 4px;
    }

    .cd-resumen {
        padding: 12px 14px;
    }

    .cd-resumen-datos {
        gap: 18px;
    }

    .cd-metrica-valor {
        font-size: 16px;
    }

    /* En pantalla pequeña el concepto sobra: se lee entero al abrir el
       documento. Las demás columnas dejan de repartirse por porcentaje y
       toman su ancho natural: en 375 px, repartir deja el valor y el estado
       cortados a la mitad. La tabla se desliza de lado, que en un teléfono
       es el gesto normal. */
    .cd-tabla th:nth-child(4),
    .cd-tabla td:nth-child(4) {
        display: none;
    }

    .cd-tabla {
        table-layout: auto;
    }

    .cd-tabla th:nth-child(1),
    .cd-tabla th:nth-child(2),
    .cd-tabla th:nth-child(3),
    .cd-tabla th:nth-child(5),
    .cd-tabla th:nth-child(6),
    .cd-tabla th:nth-child(7) {
        width: auto;
    }

    .cd-tabla td {
        padding: 10px 12px;
        white-space: nowrap;
    }

    .cd-tercero-nombre {
        max-width: 150px;
    }
}

/* ==========================================================================
   DOCUMENT SPECIFIC PASTEL THEMES & CARD MODERNIZE
   ========================================================================== */
.doc-panel-fv {
    border-top: 6px solid #3b82f6 !important;
    background: linear-gradient(to bottom, #eff6ff 0%, #ffffff 120px) !important;
}
.doc-panel-ds {
    border-top: 6px solid #10b981 !important;
    background: linear-gradient(to bottom, #f0fdf4 0%, #ffffff 120px) !important;
}
.doc-panel-ce {
    border-top: 6px solid #f97316 !important;
    background: linear-gradient(to bottom, #fff7ed 0%, #ffffff 120px) !important;
}
.doc-panel-rc {
    border-top: 6px solid #f59e0b !important;
    background: linear-gradient(to bottom, #fffbeb 0%, #ffffff 120px) !important;
}
.doc-panel-nm {
    border-top: 6px solid #8b5cf6 !important;
    background: linear-gradient(to bottom, #faf5ff 0%, #ffffff 120px) !important;
}
.doc-panel-nc {
    border-top: 6px solid #14b8a6 !important;
    background: linear-gradient(to bottom, #f0fdfa 0%, #ffffff 120px) !important;
}

/* Barra de botones de acción en formularios */
.doc-action-bar {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.doc-action-bar .btn {
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    padding: 12px 24px;
    font-weight: 600;
}

/* Transiciones para la previsualización contable expandible */
.toggleable-accounting-container {
    transition: max-height 0.3s ease-out, opacity 0.3s ease, margin-top 0.3s ease;
    overflow: hidden;
}

.toggleable-accounting-container.collapsed {
    max-height: 0;
    opacity: 0;
    margin-top: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.toggleable-accounting-container.expanded {
    max-height: 800px;
    opacity: 1;
    margin-top: 24px;
}

/* ==========================================================================
   SUBTLE DIFFERENT COLORS FOR MAIN DASHBOARD KEYPAD
   ========================================================================== */
.key-terceros {
    border-top: 5px solid #8b5cf6 !important;
    background: linear-gradient(to bottom, #faf5ff 0%, #ffffff 100px) !important;
}
.key-terceros .cashier-key-icon {
    background-color: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}
.key-terceros:hover .cashier-key-icon {
    background-color: #8b5cf6 !important;
    color: #ffffff !important;
}

.key-puc {
    border-top: 5px solid #f59e0b !important;
    background: linear-gradient(to bottom, #fffbeb 0%, #ffffff 100px) !important;
}
.key-puc .cashier-key-icon {
    background-color: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}
.key-puc:hover .cashier-key-icon {
    background-color: #f59e0b !important;
    color: #ffffff !important;
}

.key-inventario {
    border-top: 5px solid #10b981 !important;
    background: linear-gradient(to bottom, #f0fdf4 0%, #ffffff 100px) !important;
}
.key-inventario .cashier-key-icon {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
}
.key-inventario:hover .cashier-key-icon {
    background-color: #10b981 !important;
    color: #ffffff !important;
}

.key-elaborar {
    border-top: 5px solid #3b82f6 !important;
    background: linear-gradient(to bottom, #eff6ff 0%, #ffffff 100px) !important;
}
.key-elaborar .cashier-key-icon {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}
.key-elaborar:hover .cashier-key-icon {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
}

.key-borradores {
    border-top: 5px solid #0ea5e9 !important;
    background: linear-gradient(to bottom, #f0f9ff 0%, #ffffff 100px) !important;
}
.key-borradores .cashier-key-icon {
    background-color: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
}
.key-borradores:hover .cashier-key-icon {
    background-color: #0ea5e9 !important;
    color: #ffffff !important;
}

.key-consultar {
    border-top: 5px solid #ec4899 !important;
    background: linear-gradient(to bottom, #fdf2f8 0%, #ffffff 100px) !important;
}
.key-consultar .cashier-key-icon {
    background-color: rgba(236, 72, 153, 0.1);
    color: #ec4899;
}
.key-consultar:hover .cashier-key-icon {
    background-color: #ec4899 !important;
    color: #ffffff !important;
}

.key-tesoreria {
    border-top: 5px solid #06b6d4 !important;
    background: linear-gradient(to bottom, #ecfeff 0%, #ffffff 100px) !important;
}
.key-tesoreria .cashier-key-icon {
    background-color: rgba(6, 182, 212, 0.1);
    color: #06b6d4;
}
.key-tesoreria:hover .cashier-key-icon {
    background-color: #06b6d4 !important;
    color: #ffffff !important;
}

.key-informes {
    border-top: 5px solid #14b8a6 !important;
    background: linear-gradient(to bottom, #f0fdfa 0%, #ffffff 100px) !important;
}
.key-informes .cashier-key-icon {
    background-color: rgba(20, 184, 166, 0.1);
    color: #14b8a6;
}
.key-informes:hover .cashier-key-icon {
    background-color: #14b8a6 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   DOCUMENT HUBS CASHIER KEY SPECIFIC HOVERS FOR THE PASTEL COLOR CARDS
   ========================================================================== */
.doc-panel-fv .cashier-key-icon {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}
.doc-panel-fv:hover .cashier-key-icon {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
}

.doc-panel-ds .cashier-key-icon {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
}
.doc-panel-ds:hover .cashier-key-icon {
    background-color: #10b981 !important;
    color: #ffffff !important;
}

.doc-panel-ce .cashier-key-icon {
    background-color: rgba(249, 115, 22, 0.1);
    color: #f97316;
}
.doc-panel-ce:hover .cashier-key-icon {
    background-color: #f97316 !important;
    color: #ffffff !important;
}

.doc-panel-rc .cashier-key-icon {
    background-color: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}
.doc-panel-rc:hover .cashier-key-icon {
    background-color: #f59e0b !important;
    color: #ffffff !important;
}

.doc-panel-nm .cashier-key-icon {
    background-color: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}
.doc-panel-nm:hover .cashier-key-icon {
    background-color: #8b5cf6 !important;
    color: #ffffff !important;
}

.doc-panel-nc .cashier-key-icon {
    background-color: rgba(20, 184, 166, 0.1);
    color: #14b8a6;
}
.doc-panel-nc:hover .cashier-key-icon {
    background-color: #14b8a6 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   OPERATIONAL REPORTS STYLE
   ========================================================================== */
.report-totals-row {
    font-weight: bold;
    background-color: var(--table-header);
}
.report-totals-row td {
    border-top: 2px solid var(--border);
    border-bottom: 2px solid var(--border);
}
.expenses-summary-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md);
    padding: 12px 14px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
}
.expenses-summary-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--primary);
}

.doc-number-badge {
    position: absolute;
    top: 24px;
    right: 28px;
    background-color: var(--primary);
    color: #ffffff;
    padding: 6px 14px;
    font-size: 14px;
    font-family: monospace;
    font-weight: 700;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   REPORTS KEYPAD STYLING CLASSES
   ========================================================================== */
.key-sales {
    border-top: 5px solid #3b82f6 !important;
    background: linear-gradient(to bottom, #eff6ff 0%, #ffffff 100px) !important;
}
.key-sales .cashier-key-icon {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}
.key-sales:hover .cashier-key-icon {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
}

.key-purchases {
    border-top: 5px solid #10b981 !important;
    background: linear-gradient(to bottom, #f0fdf4 0%, #ffffff 100px) !important;
}
.key-purchases .cashier-key-icon {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
}
.key-purchases:hover .cashier-key-icon {
    background-color: #10b981 !important;
    color: #ffffff !important;
}

.key-receivable {
    border-top: 5px solid #f97316 !important;
    background: linear-gradient(to bottom, #fff7ed 0%, #ffffff 100px) !important;
}
.key-receivable .cashier-key-icon {
    background-color: rgba(249, 115, 22, 0.1);
    color: #f97316;
}
.key-receivable:hover .cashier-key-icon {
    background-color: #f97316 !important;
    color: #ffffff !important;
}

.key-payable {
    border-top: 5px solid #f59e0b !important;
    background: linear-gradient(to bottom, #fffbeb 0%, #ffffff 100px) !important;
}
.key-payable .cashier-key-icon {
    background-color: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}
.key-payable:hover .cashier-key-icon {
    background-color: #f59e0b !important;
    color: #ffffff !important;
}

.key-expenses {
    border-top: 5px solid #8b5cf6 !important;
    background: linear-gradient(to bottom, #faf5ff 0%, #ffffff 100px) !important;
}
.key-expenses .cashier-key-icon {
    background-color: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}
.key-expenses:hover .cashier-key-icon {
    background-color: #8b5cf6 !important;
    color: #ffffff !important;
}

.key-caja-diario {
    border-top: 5px solid #14b8a6 !important;
    background: linear-gradient(to bottom, #f0fdfa 0%, #ffffff 100px) !important;
}
.key-caja-diario .cashier-key-icon {
    background-color: rgba(20, 184, 166, 0.1);
    color: #14b8a6;
}
.key-caja-diario:hover .cashier-key-icon {
    background-color: #14b8a6 !important;
    color: #ffffff !important;
}

.key-usuarios {
    border-top: 5px solid #6366f1 !important;
    background: linear-gradient(to bottom, #e0e7ff 0%, #ffffff 100px) !important;
}
.key-usuarios .cashier-key-icon {
    background-color: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}
.key-usuarios:hover .cashier-key-icon {
    background-color: #6366f1 !important;
    color: #ffffff !important;
}

/* LOGIN CONTAINER SYSTEM */
#login-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at 10% 20%, rgb(244, 245, 247) 0%, rgb(220, 225, 235) 90%);
    z-index: 99999;
}

.login-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--border-radius-lg);
    padding: 40px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.login-logo {
    font-size: 3rem;
    color: var(--accent);
    margin-bottom: 10px;
}

.login-card h2 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 6px;
}

.login-card p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 25px;
}

.login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login-input-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
}

.login-input-group label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-main);
}

.login-input-wrapper {
    position: relative;
    width: 100%;
}

.login-input-wrapper i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.95rem;
}

.login-input-wrapper input {
    width: 100%;
    padding: 12px 14px 12px 38px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md);
    background: var(--input-bg);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-main);
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
    outline: none;
}

.login-input-wrapper input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.btn-login {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: var(--border-radius-md);
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.05rem;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.15);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    margin-top: 10px;
}

.btn-login:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(37, 99, 235, 0.25);
}

.login-error-msg {
    color: #ef4444;
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 5px;
    display: none;
}

.animate-logo {
    animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 0.9; }
}

/* User status badges */
.status-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}
.status-badge.active {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
}
.status-badge.inactive {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* PAGINATION */
.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background-color: var(--bg-card);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-main);
    border-bottom-left-radius: var(--border-radius-md);
    border-bottom-right-radius: var(--border-radius-md);
}

.pagination-info {
    color: var(--text-muted);
}

.pagination-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pagination-buttons .btn {
    padding: 6px 12px;
    font-size: 13px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pagination-page-input {
    width: 50px;
    height: 32px;
    text-align: center;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    background-color: var(--input-bg);
    color: var(--text-main);
    font-weight: 600;
}

/* Kardex layout responsive stack & Mobile Drawer Navigation */
@media (max-width: 768px) {
    .top-header {
        margin-bottom: 12px !important;
        padding-bottom: 12px !important;
        gap: 8px !important;
    }
    
    .top-header h2 {
        font-size: 18px !important;
    }
    
    .switcher-label {
        display: none !important;
    }
    
    .tenant-name {
        display: none !important;
    }
    
    .tenant-option {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    
    .tenant-selector .slider-bg {
        width: 40px !important;
    }
    
    body[data-tenant="club"] .tenant-selector .slider-bg {
        transform: translateX(40px) !important;
        width: 40px !important;
    }

    .unit-name {
        display: none !important;
    }

    .unit-option {
        padding: 6px 10px !important;
    }

    .kardex-layout {
        grid-template-columns: 1fr !important;
    }
}

/* Drag and drop reordering styles */
.cashier-key {
    cursor: grab;
    user-select: none;
    -webkit-user-drag: element;
    /* En el telefono el arrastre se activa manteniendo pulsado, y iOS responde a
       esa pulsacion con su menu de copiar/compartir. Se desactiva para que la
       pulsacion mantenida sirva solo para reordenar. */
    -webkit-touch-callout: none;
}

.cashier-key:active {
    cursor: grabbing;
}

.cashier-key.dragging {
    opacity: 0.55 !important;
    transform: scale(1.03);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    border-style: dashed !important;
    z-index: 10;
    /* Solo una vez levantada la ficha se le quita el desplazamiento al navegador.
       Mientras no lo este, el gesto normal de deslizar la pagina sigue siendo suyo. */
    touch-action: none;
}
/* PREMIUM GLASSMORPHISM TOASTS */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 10000;
    pointer-events: none;
}

.toast-card {
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: var(--border-radius-sm);
    padding: 14px 18px;
    width: 340px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transform: translateY(80px) scale(0.92);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
    cursor: pointer;
    position: relative;
}

.toast-card:hover {
    transform: translateY(-2px) scale(1.02);
    border-color: var(--accent);
}

.toast-card.show {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.toast-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.toast-icon.patucarro {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.toast-icon.kyh {
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
    border: 1px solid rgba(37, 99, 235, 0.25);
}

.toast-content {
    flex-grow: 1;
}

.toast-title {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-main);
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.toast-time {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
}

.toast-body {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
    margin-bottom: 6px;
}

.toast-footer {
    font-size: 11px;
    color: var(--accent);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.toast-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
    margin-top: -2px;
}

.toast-close:hover {
    color: #ef4444;
}

/* SIDEBAR COUNTER BADGE */
.sidebar-menu .menu-item {
    position: relative;
}

.sidebar-menu .menu-item .menu-badge {
    background-color: #ef4444;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: auto;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
    min-width: 18px;
    text-align: center;
    display: none;
}

/* ALERTA FLOTANTE PREMIUM DE PREGUNTAS PENDIENTES DE MERCADO LIBRE (visible en cualquier pantalla) */
.ml-pending-fab {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9998;
    display: none;
    align-items: center;
    gap: 10px;
    padding: 12px 18px 12px 14px;
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    color: #ffffff;
    border-radius: 999px;
    box-shadow: 0 12px 30px -8px rgba(37, 99, 235, 0.5), 0 4px 12px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    user-select: none;
    animation: mlFabPulse 2.4s ease-in-out infinite;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ml-pending-fab:hover {
    transform: translateX(-50%) translateY(-3px) scale(1.03);
    box-shadow: 0 16px 34px -6px rgba(37, 99, 235, 0.55), 0 6px 16px rgba(0, 0, 0, 0.1);
}

.ml-pending-fab-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.ml-pending-fab-text {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}

.ml-pending-fab-count {
    background: #ffffff;
    color: #2563eb;
    font-weight: 800;
    font-size: 12px;
    min-width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

@keyframes mlFabPulse {
    0%, 100% { box-shadow: 0 12px 30px -8px rgba(37, 99, 235, 0.5), 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 0 rgba(37, 99, 235, 0.35); }
    50% { box-shadow: 0 12px 30px -8px rgba(37, 99, 235, 0.5), 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 10px rgba(37, 99, 235, 0); }
}

.ml-pending-panel {
    position: fixed;
    top: 68px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    z-index: 9999;
    width: 360px;
    max-height: 60vh;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: var(--border-radius-md);
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.18);
    display: none;
    flex-direction: column;
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.ml-pending-panel.show {
    display: flex;
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.ml-pending-panel-header {
    padding: 14px 18px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    color: var(--text-main);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ml-pending-summary {
    display: flex;
    gap: 8px;
    padding: 10px 18px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}

.ml-pending-summary-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}

.ml-pending-summary-pill.kyh {
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
}

.ml-pending-summary-pill.patucarro {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.ml-pending-row {
    padding: 10px 18px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.5);
    cursor: pointer;
    transition: background 0.15s ease;
}

.ml-pending-row:last-child {
    border-bottom: none;
}

.ml-pending-row:hover {
    background: rgba(37, 99, 235, 0.05);
}

.ml-pending-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
}

.ml-pending-account-tag {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.03em;
    padding: 2px 8px;
    border-radius: 999px;
}

.ml-pending-account-tag.kyh {
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
}

.ml-pending-account-tag.patucarro {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.ml-pending-row-buyer {
    font-size: 11px;
    color: var(--text-muted);
}

.ml-pending-row-text {
    font-size: 12.5px;
    color: var(--text-main);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* MERCADO LIBRE QUESTION CARDS */
.ml-question-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
    transition: all 0.25s ease;
}

.ml-question-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    border-color: #cbd5e1;
}

.ml-question-card.highlighted {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    background: rgba(37, 99, 235, 0.01);
}

.ml-question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.ml-account-tag {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ml-account-tag.patucarro {
    background-color: rgba(245, 158, 11, 0.1);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.ml-account-tag.kyh {
    background-color: rgba(37, 99, 235, 0.1);
    color: #1d4ed8;
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.ml-item-link {
    font-size: 12px;
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.ml-item-link:hover {
    text-decoration: underline;
}

.ml-question-body {
    background: #f8fafc;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    border-left: 3px solid #94a3b8;
}

.ml-question-text {
    font-size: 13px;
    color: var(--text-main);
    font-weight: 500;
    margin-bottom: 4px;
}

.ml-question-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.ml-answer-area {
    margin-top: 10px;
}

.ml-answer-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    font-size: 13px;
    resize: vertical;
    outline: none;
    font-family: inherit;
    transition: border-color 0.2s;
    background: var(--bg-card);
    color: var(--text-main);
}

.ml-answer-input:focus {
    border-color: var(--accent);
}

.ml-answer-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.ml-answered-bubble {
    background: rgba(16, 185, 129, 0.05);
    border-radius: 8px;
    padding: 12px;
    margin-top: 10px;
    border-left: 3px solid #10b981;
}

.ml-answered-title {
    font-size: 11px;
    color: #10b981;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.ml-answered-text {
    font-size: 13px;
    color: var(--text-main);
}

tr.highlighted {
    background-color: rgba(37, 99, 235, 0.15) !important;
    transition: background-color 0.5s ease;
}

/* ==========================================================================
   PRODUCT OMNICHANNEL EDITOR & CHANNEL SYNC STYLES
   ========================================================================== */
.edit-product-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 20px;
    margin-top: 10px;
}

@media (max-width: 820px) {
    .edit-product-grid {
        grid-template-columns: 1fr;
    }
}

.product-form-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sync-channels-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background-color: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md);
    padding: 16px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.02);
}

.sync-title {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-main);
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}

.channel-sync-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.channel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    transition: all 0.2s ease;
}

.channel-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.channel-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.channel-icon-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.channel-details {
    display: flex;
    flex-direction: column;
}

.channel-name-txt {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
}

.channel-status-msg {
    font-size: 10px;
    color: var(--text-muted);
}

.channel-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    text-transform: uppercase;
}

.badge-pending {
    background-color: rgba(100, 116, 139, 0.1);
    color: #64748b;
    border: 1px solid rgba(100, 116, 139, 0.2);
}

.badge-syncing {
    background-color: rgba(37, 99, 235, 0.1);
    color: #2563eb;
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.badge-success {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.badge-warning {
    background-color: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.badge-skipped {
    background-color: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

/* Image Preview Block */
.image-preview-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    padding: 10px;
    background-color: var(--input-bg);
}

.image-preview-thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border);
    background-color: #f8fafc;
}

.image-preview-input-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Log sync console */
.sync-console-log {
    background-color: #0f172a;
    border-radius: var(--border-radius-sm);
    padding: 10px;
    color: #38bdf8;
    font-family: monospace;
    font-size: 11px;
    min-height: 80px;
    max-height: 120px;
    overflow-y: auto;
    border: 1px solid #1e293b;
    margin-top: 8px;
}
.sync-console-log p {
    margin-bottom: 4px;
    line-height: 1.4;
}
.sync-console-log p.success-log {
    color: #4ade80;
}
.sync-console-log p.warn-log {
    color: #fbbf24;
}

/* Tab Navigation for Edit Product Modal */
.edit-modal-tabs {
    display: flex;
    border-bottom: 2px solid var(--border);
    margin-bottom: 15px;
    gap: 8px;
    background-color: var(--table-header);
    padding: 6px 6px 0 6px;
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
}

.edit-tab-btn {
    background: none;
    border: none;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
    border-radius: 4px 4px 0 0;
}

.edit-tab-btn:hover {
    color: var(--text-main);
    background-color: rgba(0,0,0,0.03);
}

.edit-tab-btn.active {
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
    font-weight: 700;
    background-color: var(--bg-card);
}

.edit-tab-content {
    display: none;
    animation: fadeInTab 0.3s ease;
}

.edit-tab-content.active {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

/* Multi-image preview */
.multi-image-preview-container {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding: 8px;
    background: var(--bg-app);
    border: 1px dashed var(--border);
    border-radius: var(--border-radius-sm);
    min-height: 50px;
}

.multi-image-thumb {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border);
    background-color: #ffffff;
}



/* Premium Switch Toggle CSS */
.premium-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
  flex-shrink: 0;
}

.premium-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.premium-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  transition: .3s;
  border-radius: 22px;
}

.premium-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

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

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

.channel-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  transition: opacity 0.3s ease;
}

/* Volver Atrás links styling */
.back-link-container {
    margin-bottom: 16px;
    display: block;
}
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted, #64748b);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}
.back-link:hover {
    color: var(--primary, #4f46e5);
    transform: translateX(-3px);
}

/* Compact styles for the Purchase Smart Search Table */
#purchase-smart-search-table {
    font-size: 11px !important;
    width: 100% !important;
}
#purchase-smart-search-table th,
#purchase-smart-search-table td {
    padding: 4px 6px !important;
    line-height: 1.2 !important;
}
#purchase-smart-search-table tr {
    height: auto !important;
}
#purchase-smart-search-table .btn {
    padding: 2px 6px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
}

/* Premium Totals & Discount Section for Compras */
.compras-totals-section-premium {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 20px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px dashed var(--border-color, #cbd5e1);
    margin-bottom: 25px;
}

@media (max-width: 768px) {
    .compras-totals-section-premium {
        grid-template-columns: 1fr;
    }
}

.discount-premium-card, .summary-premium-card {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.discount-premium-card h4, .summary-premium-card h4 {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary, #2563eb);
    display: flex;
    align-items: center;
    gap: 8px;
}

.discount-premium-card .section-subtitle, .summary-premium-card .section-subtitle {
    margin: 0 0 15px 0;
    font-size: 11px;
    color: var(--text-muted, #64748b);
}

.discount-inputs-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.discount-input-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.discount-input-box label {
    font-size: 11px;
    font-weight: 600;
    color: #475569;
}

.discount-input-box .input-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 8px;
    background: #f8fafc;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.discount-input-box .input-wrapper:focus-within {
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.discount-input-box .input-wrapper input {
    border: none !important;
    background: transparent !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    flex: 1;
    outline: none !important;
    width: 100%;
}

.discount-input-box .input-wrapper .input-prefix,
.discount-input-box .input-wrapper .input-suffix {
    padding: 8px 12px;
    background: #cbd5e1;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    user-select: none;
}

/* Totals grid premium */
.totals-grid-premium {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.total-box-premium {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.2s, border-color 0.2s;
}

.total-box-premium:hover {
    transform: translateY(-2px);
    border-color: #94a3b8;
}

.total-box-label {
    font-size: 9px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.total-box-value {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
}

/* Highlight discount box */
.total-box-premium.discount-highlight {
    background: #fef2f2;
    border-color: #fecaca;
}
.total-box-premium.discount-highlight .total-box-label {
    color: #ef4444;
}
.total-box-premium.discount-highlight .total-box-value {
    color: #dc2626;
}

/* Highlight grand total box */
.total-box-premium.grand-total-box {
    grid-column: span 2;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-color: #0f172a;
    padding: 14px 18px;
}

.total-box-premium.grand-total-box .total-box-label {
    color: #94a3b8;
}

.total-box-premium.grand-total-box .total-box-value {
    color: #ffffff;
    font-size: 22px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Centered premium document forms width limitation */
#view-facturacion,
#view-compras,
#view-comprobante-egreso-doc,
#view-recibo-caja-doc,
#view-nomina-doc,
#view-nota-contabilidad-doc,
#view-devoluciones-doc {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* Vertical Totals Layout for Compras */
.totals-vertical-premium {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 12px 16px;
}

.total-row-premium {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #334155;
    padding: 4px 0;
}

.total-row-premium:not(:last-child) {
    border-bottom: 1px solid #e2e8f0;
}

.total-row-label {
    font-weight: 600;
    color: #64748b;
}

.total-row-value {
    font-weight: 700;
    color: #0f172a;
    font-family: monospace;
}

.total-row-premium.discount-row-highlight {
    color: #dc2626;
}
.total-row-premium.discount-row-highlight .total-row-label {
    color: #ef4444;
}
.total-row-premium.discount-row-highlight .total-row-value {
    color: #dc2626;
}

.total-row-premium.grand-total-row-premium {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 2px solid #0f172a;
    font-size: 15px;
    color: #0f172a;
}
.total-row-premium.grand-total-row-premium .total-row-label {
    color: #0f172a;
    font-weight: 800;
}
.total-row-premium.grand-total-row-premium .total-row-value {
    color: var(--primary, #2563eb);
    font-size: 17px;
    font-weight: 800;
}

/* Mobile responsive compacting for document views and modals */
@media (max-width: 768px) {
    /* Stack split-layouts to prevent horizontal scrolling */
    .split-layout {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Stack form-rows to prevent grid overflow */
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* Stack item adding bars */
    .add-item-bar {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* Adjust main content padding */
    .main-content {
        padding: 10px !important;
    }

    #view-facturacion .form-card,
    #view-compras .form-card,
    #view-comprobante-egreso-doc .form-card,
    #view-recibo-caja-doc .form-card,
    #view-nomina-doc .form-card,
    #view-nota-contabilidad-doc .form-card {
        padding: 10px !important;
        border-radius: 8px !important;
    }
    
    #view-facturacion h3,
    #view-compras h3,
    #view-comprobante-egreso-doc h3,
    #view-recibo-caja-doc h3,
    #view-nomina-doc h3,
    #view-nota-contabilidad-doc h3 {
        font-size: 13px !important;
        margin-bottom: 8px !important;
    }

    #view-facturacion label,
    #view-compras label,
    #view-comprobante-egreso-doc label,
    #view-recibo-caja-doc label,
    #view-nomina-doc label,
    #view-nota-contabilidad-doc label {
        font-size: 10px !important;
    }

    #view-facturacion input,
    #view-facturacion select,
    #view-compras input,
    #view-compras select,
    #view-comprobante-egreso-doc input,
    #view-comprobante-egreso-doc select,
    #view-recibo-caja-doc input,
    #view-recibo-caja-doc select,
    #view-nomina-doc input,
    #view-nomina-doc select,
    #view-nota-contabilidad-doc input,
    #view-nota-contabilidad-doc select {
        padding: 4px 8px !important;
        font-size: 11px !important;
        height: auto !important;
    }

    #view-facturacion .data-table,
    #view-compras .data-table,
    #view-comprobante-egreso-doc .data-table,
    #view-recibo-caja-doc .data-table,
    #view-nomina-doc .data-table,
    #view-nota-contabilidad-doc .data-table {
        font-size: 9.5px !important;
    }

    #view-facturacion .data-table th,
    #view-facturacion .data-table td,
    #view-compras .data-table th,
    #view-compras .data-table td,
    #view-comprobante-egreso-doc .data-table th,
    #view-comprobante-egreso-doc .data-table td,
    #view-recibo-caja-doc .data-table th,
    #view-recibo-caja-doc .data-table td,
    #view-nomina-doc .data-table th,
    #view-nomina-doc .data-table td,
    #view-nota-contabilidad-doc .data-table th,
    #view-nota-contabilidad-doc .data-table td {
        padding: 3px 5px !important;
    }

    /* Compact printed details modal on mobile */
    .premium-invoice-modal {
        padding: 12px !important;
        font-size: 10px !important;
    }
    .premium-invoice-modal h2 {
        font-size: 13px !important;
    }
    .premium-invoice-modal table {
        font-size: 9px !important;
    }
    .premium-invoice-modal td, .premium-invoice-modal th {
        padding: 4px 6px !important;
    }
}

/* DOCUMENT TABS BAR */
.document-tabs-bar {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 0 16px;
    background-color: var(--bg-app);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    height: 40px;
    margin-bottom: 15px;
    box-sizing: border-box;
    flex-shrink: 0;
    max-width: 1050px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.document-tabs-bar::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

.doc-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: var(--table-header);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    margin-bottom: -1px;
    position: relative;
    border-top: 3px solid transparent;
    white-space: nowrap;
}

.doc-tab:hover {
    background-color: var(--bg-card);
    color: var(--text-main);
}

.doc-tab.active {
    background-color: var(--bg-card);
    border-color: var(--border);
    border-bottom-color: var(--bg-card);
    color: var(--text-main);
    font-weight: 600;
    border-top-color: var(--primary);
    z-index: 2;
    box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.04);
}

.doc-tab i {
    font-size: 13px;
    opacity: 0.8;
}

.doc-tab.active i {
    color: var(--primary);
    opacity: 1;
}

.doc-tab .close-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    font-size: 10px;
    color: var(--text-muted);
    transition: all 0.15s ease;
    margin-left: 4px;
}

.doc-tab .close-tab:hover {
    background-color: #ef4444;
    color: #ffffff !important;
}

/* Compact Daily Entry Table for Modal Collapse */
.compact-accounting-table th,
.compact-accounting-table td {
    padding: 4px 8px !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
}
.compact-accounting-table tr {
    height: auto !important;
}
.compact-accounting-table th {
    font-weight: 700 !important;
}

/* Módulo de Conciliación Bancaria Premium */
#con-drag-drop-zone.dragover {
    border-color: var(--primary) !important;
    background-color: #eef2ff !important;
    box-shadow: 0 0 8px rgba(79, 70, 229, 0.15);
}

.con-history-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 11.5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s, box-shadow 0.2s;
}

.con-history-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
    border-color: #cbd5e1;
}

.con-tx-row {
    transition: background-color 0.2s;
}

.con-tx-row:hover {
    background-color: #f8fafc !important;
}

.con-row-matched {
    background-color: #f0fdf4 !important;
}

.con-row-unmatched {
    background-color: #fef2f2 !important;
}

.con-badge-status {
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
}

.con-badge-matched {
    background-color: #dcfce7;
    color: #15803d;
}

.con-badge-unmatched {
    background-color: #fee2e2;
    color: #b91c1c;
}

/* COMPACT OPERATIONAL REPORT TABLES */
.report-table-compact {
    width: 100% !important;
    max-width: 100%;
    font-size: 11.5px !important;
}

.report-table-compact th,
.report-table-compact td {
    padding: 4px 8px !important;
}

.report-date {
    font-size: 10.5px !important;
    white-space: nowrap !important;
    display: inline-block;
}

/* ==========================================================================
   INFORMES FINANCIEROS — presentacion contable clasica
   La cara del auxiliar de toda la vida, compartida por los seis informes de
   la ficha (balance de prueba, libro auxiliar, balance general, estado de
   resultados, IVA y retenciones): encabezado con NIT y periodo, titulo en
   cursiva, y la rejilla apretada (letra de 10px y filas de un pixel de
   relleno) para que el informe quepa en la hoja.

   El prefijo es inf-  (de informe). Los .inf-* de aqui son de uso general:
   antes de cambiarlos, recordar que los toca todo #view-reportes.
   ========================================================================== */
.inf-hoja {
    padding: 12px 14px;
    background: var(--bg-card);
}

.inf-encabezado {
    text-align: center;
    margin-bottom: 10px;
}

.inf-nit {
    font-size: 12px;
    color: var(--text-main);
}

.inf-titulo {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 20px;
    color: #1e3a8a;
    margin-top: 2px;
}

.inf-tabla {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 10px;
    line-height: 1.3;
    color: var(--text-main);
}

.inf-tabla th,
.inf-tabla td {
    border: 1px solid var(--border, #94a3b8);
    padding: 1px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inf-tabla th {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 11px;
    color: #1e3a8a;
    text-align: center;
    background: var(--table-header, #f8fafc);
}

/* .num es la clase que ya usaban las tablas tributarias */
.inf-tabla .inf-num,
.inf-tabla .num { text-align: right; }
.inf-tabla .inf-fecha,
.inf-tabla .inf-doc { text-align: center; }
.inf-tabla .inf-rojo { color: #b91c1c; }
.inf-tabla .inf-verde { color: #15803d; }

.inf-tabla tbody tr:hover { background: var(--table-hover); }

/* Renglon que encabeza un grupo: "11050501 CAJA GENERAL", "ACTIVO"... */
.inf-tabla .inf-fila-grupo td {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 11.5px;
    color: #1e3a8a;
    border-left: none;
    border-right: none;
    padding-top: 4px;
    background: transparent;
}

.inf-tabla .inf-fila-grupo:hover td { background: transparent; }

.inf-tabla .inf-fila-inicial td { font-weight: 700; }

.inf-tabla .inf-fila-total td {
    font-weight: 700;
    background: #eef2ff;
}

/* Cierre del informe (sumas iguales, utilidad del ejercicio...) */
.inf-tabla .inf-fila-cierre td {
    font-weight: 700;
    font-size: 11px;
    background: #e0e7ff;
    border-top: 2px solid #1e3a8a;
}

/* Subtitulo de seccion dentro de un informe con varias tablas */
.inf-seccion {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 13px;
    color: #1e3a8a;
    margin: 14px 0 5px;
}

.inf-seccion .cuenta {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 500;
    font-size: 10.5px;
    color: var(--text-muted);
    margin-left: 6px;
}

/* Anchos fijos por columna. La clase dice que fraccion ocupa la columna, asi
   sirve igual en cualquiera de los informes. */
.inf-tabla col.c-xs   { width: 6%; }
.inf-tabla col.c-sm   { width: 9%; }
.inf-tabla col.c-md   { width: 12%; }
.inf-tabla col.c-lg   { width: 18%; }
.inf-tabla col.c-xl   { width: 25%; }
.inf-tabla col.c-auto { width: auto; }

/* Barra de filtros de los informes: periodo + botones */
.inf-toolbar {
    align-items: flex-end !important;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px !important;
}

.inf-periodo {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.inf-periodo label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.inf-periodo input {
    padding: 6px 8px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm, 6px);
    background: var(--bg-card);
    color: var(--text-main);
}

/* Las tablas tributarias se vuelven fichas en el telefono (regla de mas
   abajo). Ahi la rejilla fija estorba, asi que se suelta. */
@media (max-width: 720px) {
    table.tax-tabla.inf-tabla,
    table.tax-tabla.inf-tabla td {
        table-layout: auto;
        white-space: normal;
        overflow: visible;
    }
}

/* Impresion: el informe se aprieta todavia mas y repite el encabezado */
@media print {
    .inf-tabla {
        font-size: 7.5px;
    }

    .inf-tabla th,
    .inf-tabla td {
        padding: 0 3px;
    }

    .inf-tabla thead {
        display: table-header-group;
    }

    .inf-tabla tr {
        page-break-inside: avoid;
    }

    .inf-toolbar {
        display: none !important;
    }
}

/* Container width alignment for reports */
#view-reportes-operacionales .tab-content {
    max-width: 1200px !important;
    width: 100% !important;
    margin-right: auto !important;
}

/* OPERATIONAL REPORTS FILTER COMPACTION */
#view-reportes-operacionales .filter-card {
    padding: 12px 16px !important;
    margin-bottom: 12px !important;
}

#view-reportes-operacionales .filter-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    gap: 12px !important;
}

#view-reportes-operacionales .filter-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

#view-reportes-operacionales .filter-group label {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    margin-bottom: 0 !important;
}

#view-reportes-operacionales .filter-group input,
#view-reportes-operacionales .filter-group select {
    padding: 5px 10px !important;
    font-size: 11.5px !important;
    height: 30px !important;
    border-radius: var(--border-radius-sm) !important;
    box-sizing: border-box !important;
}

#view-reportes-operacionales .filter-actions {
    display: flex !important;
    gap: 8px !important;
    align-self: flex-end !important;
}

#view-reportes-operacionales .btn {
    padding: 4px 10px !important;
    font-size: 11.5px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-sizing: border-box !important;
}

/* Specific component widths in operational reports */
#view-reportes-operacionales .filter-group[style*="grid-column: span 2"] {
    grid-column: auto !important; /* Reset grid span since it's a flexbox */
}

#view-reportes-operacionales #rep-sales-q,
#view-reportes-operacionales #rep-purch-q,
#view-reportes-operacionales #rep-expenses-q {
    width: 250px !important;
    max-width: 100% !important;
}

#view-reportes-operacionales #rep-cartera-search,
#view-reportes-operacionales #rep-proveedores-search {
    width: 220px !important;
    max-width: 100% !important;
}

#view-reportes-operacionales input[type="date"] {
    width: 130px !important;
}

#view-reportes-operacionales select {
    width: 160px !important;
}

/* Adjust labels on direct buttons inside the grid */
#view-reportes-operacionales button.btn {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   LAYOUT PREMIUM DE CONFIGURACION CON MENÚ LATERAL
   ========================================================================== */
.config-container {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-top: 15px;
    max-width: 900px; /* Reduced overall container max-width to center it */
}

.config-sidebar {
    width: 210px; /* More compact sidebar */
    flex-shrink: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: var(--shadow);
}

.config-tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px; /* Compact padding */
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 12.5px; /* Compact font size */
    font-weight: 500;
    text-align: left;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-body);
}

.config-tab-btn i {
    font-size: 13px;
    width: 14px;
    text-align: center;
}

.config-tab-btn:hover {
    background: var(--table-hover);
    color: var(--text-main);
}

.config-tab-btn.active {
    background: var(--primary);
    color: white;
    font-weight: 600;
}

.config-content {
    flex: 1;
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    box-shadow: var(--shadow);
}

.config-panel-content {
    animation: fadeInTab 0.3s ease;
}

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

@media (max-width: 768px) {
    .config-container {
        flex-direction: column;
        gap: 16px;
    }
    .config-sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        padding: 6px;
    }
    .config-tab-btn {
        white-space: nowrap;
    }
    .config-form-row {
        grid-template-columns: 1fr !important;
    }
}

.config-form-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 16px;
    max-width: 840px;
}

.config-form-row .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.config-form-row label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.config-form-row input, .config-form-row select {
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-main);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.config-form-row input:focus, .config-form-row select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    outline: none;
}

/* World Office Premium Theme Styles - Compact Version */
.wo-header-band {
    background: #002060; /* Classic dark blue from World Office */
    color: #ffffff;
    font-size: 12px;
    font-weight: 750;
    text-align: left;
    padding: 5px 12px; /* Reduced vertical padding */
    border-radius: 4px 4px 0 0;
    margin-top: 10px; /* Reduced margin */
    letter-spacing: 0.5px;
    max-width: 550px; /* Matches the compact table width */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.wo-config-table {
    display: grid;
    grid-template-columns: 1.8fr 1.2fr; /* 3:2 proportion, perfect for labels and inputs */
    gap: 6px 12px; /* Very tight gaps */
    padding: 10px 16px; /* Tight padding */
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 4px 4px;
    margin-bottom: 15px; /* Reduced bottom margin */
    max-width: 550px; /* Highly compact desktop width! */
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.wo-config-row {
    display: contents; /* Grid alignment magic */
}

.wo-config-row label {
    display: flex;
    align-items: center;
    font-size: 12px; /* Smaller text size */
    font-weight: 550;
    color: var(--text-main);
    min-height: 28px; /* Compact row height */
}

.wo-config-row input, .wo-config-row select {
    width: 100%;
    padding: 4px 8px; /* Smaller padding */
    font-size: 12px; /* Smaller font size */
    font-weight: 500;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-main);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    height: 28px; /* Compact element height */
}

.wo-config-row input:focus, .wo-config-row select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    outline: none;
}

@media (max-width: 768px) {
    .wo-config-table {
        grid-template-columns: 1fr;
        padding: 12px 16px;
        gap: 8px;
    }
    .wo-config-row {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-bottom: 12px;
    }
    .wo-config-row label {
        min-height: auto;
    }
}

/* Bendita Sea Sidebar Aesthetics (Soft Cannabis Green Theme) */
body.bendita-sea-active {
    --bg-sidebar: #f0fdf4; /* Soft cannabis green background */
    --sidebar-text: #14532d; /* Dark forest green text */
    --sidebar-text-muted: #166534; /* Medium forest green */
    --sidebar-hover: #dcfce7; /* Soft leaf green hover background */
    --sidebar-border: #bbf7d0; /* Light sage border */
}

body.bendita-sea-active .menu-item i {
    color: #16a34a; /* Herbal green icons */
}

body.bendita-sea-active .menu-item:hover {
    color: #15803d !important;
    background-color: #dcfce7 !important;
}

body.bendita-sea-active .menu-item:hover i {
    color: #14532d !important;
}

body.bendita-sea-active .menu-item.active {
    color: #ffffff !important;
    background-color: #15803d !important; /* Premium herbal green */
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.3) !important;
}

body.bendita-sea-active .menu-item.active i {
    color: #ffffff !important;
}

body.bendita-sea-active .logo-icon {
    color: #16a34a !important;
}

/* DOCUMENT WIZARD STEPS & PREMIUM INPUT STYLING */
.doc-wizard-step {
    position: relative;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 1;
    transform: none;
    margin-bottom: 12px;
}

.doc-wizard-step.locked {
    opacity: 0.3;
    pointer-events: none;
    user-select: none;
}

.doc-wizard-step-header {
    font-size: 11px;
    font-weight: 700;
    color: var(--primary);
    border-bottom: 2px solid var(--border);
    padding-bottom: 4px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.doc-wizard-step-header span.step-number {
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
}

.doc-wizard-step.locked .doc-wizard-step-header span.step-number {
    background: #94a3b8;
}

#view-facturacion .form-card,
#view-compras .form-card,
#view-comprobante-egreso-doc .form-card,
#view-recibo-caja-doc .form-card,
#view-nomina-doc .form-card,
#view-nota-contabilidad-doc .form-card,
#view-devoluciones-doc .form-card {
    padding: 12px !important;
    border: 1.5px solid #94a3b8 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}

#view-facturacion .totals-card,
#view-compras .totals-card,
#view-comprobante-egreso-doc .totals-card,
#view-recibo-caja-doc .totals-card,
#view-nomina-doc .totals-card,
#view-nota-contabilidad-doc .totals-card,
#view-devoluciones-doc .totals-card,
#view-compras .totals-vertical-premium {
    border: 1.5px solid #94a3b8 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}

/* Reduce form-group margin inside document cards */
#view-facturacion .form-card .form-group,
#view-compras .form-card .form-group,
#view-comprobante-egreso-doc .form-card .form-group,
#view-recibo-caja-doc .form-card .form-group,
#view-nomina-doc .form-card .form-group,
#view-nota-contabilidad-doc .form-card .form-group,
#view-devoluciones-doc .form-card .form-group {
    margin-bottom: 8px !important;
}

/* Make add-item-bar inputs, selects, and buttons compact */
#view-facturacion .add-item-bar input,
#view-facturacion .add-item-bar select,
#view-facturacion .add-item-bar button,
#view-compras .add-item-bar input,
#view-compras .add-item-bar select,
#view-compras .add-item-bar button,
#view-comprobante-egreso-doc .add-item-bar input,
#view-comprobante-egreso-doc .add-item-bar select,
#view-comprobante-egreso-doc .add-item-bar button,
#view-recibo-caja-doc .add-item-bar input,
#view-recibo-caja-doc .add-item-bar select,
#view-recibo-caja-doc .add-item-bar button,
#view-nota-contabilidad-doc .add-item-bar input,
#view-nota-contabilidad-doc .add-item-bar select,
#view-nota-contabilidad-doc .add-item-bar button,
#view-devoluciones-doc .add-item-bar input,
#view-devoluciones-doc .add-item-bar select,
#view-devoluciones-doc .add-item-bar button {
    padding: 6px 10px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
    height: 32px !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   PRESENTACION EN TELEFONO
   El problema de fondo era el scroll: .main-content tiene max-height 100vh y
   overflow-y auto, asi que en el movil no se desplazaba la pagina sino una
   caja interior, y el gesto solo funcionaba donde no lo tapaba otro elemento.
   Aqui se devuelve el scroll al documento y se reajustan las proporciones.
   ========================================================================== */
@media (max-width: 900px) {
    /* 1. El scroll vuelve a ser el de la pagina, en toda la pantalla.
       Aqui habia un error: se pedia overflow-y visible pero junto a un
       overflow-x hidden, y el navegador, por norma, convierte el visible en
       auto cuando el otro eje esta recortado. Resultado: .main-content seguia
       siendo una caja con scroll propio, que era justo lo que se queria quitar.
       Ahora no se recorta ningun eje: el desbordamiento lateral se evita
       limitando el ancho de los hijos, mas abajo, que es lo que de verdad lo
       causaba. Tampoco se toca overscroll-behavior ni se fuerza el scroll
       antiguo de iOS: cuanto menos se le discuta al navegador como desplazar,
       mas fiable es en el telefono. */
    .app-container {
        min-height: auto;
        display: block !important;
    }

    .main-content {
        max-height: none;
        overflow: visible;
        padding: 12px 14px 40px;
    }

    /* 2. Nada mas ancho que la pantalla: eso provocaba el desplazamiento lateral */
    .view-panel,
    .table-card,
    .form-card,
    .actions-bar {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 3. Las tablas anchas se desplazan solas dentro de su tarjeta */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 4. Objetivos tactiles comodos y sin zoom automatico al enfocar.
          Safari amplia la pagina si el texto del campo baja de 16px. */
    input, select, textarea {
        font-size: 16px !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    .btn {
        min-height: 42px;
        padding: 10px 14px;
    }

    /* 5. Formularios y barras en una sola columna */
    .form-row,
    .actions-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .form-group { width: 100%; }
    .actions-bar .btn { width: 100%; justify-content: center; }

    /* 6. Modales a pantalla casi completa, con su propio scroll */
    .modal-content {
        width: 96% !important;
        max-width: 96% !important;
        max-height: 92vh !important;
        padding: 14px !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 7. Las pestanas se desplazan en horizontal en vez de amontonarse */
    .tabs-header {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .tabs-header::-webkit-scrollbar { display: none; }
    .tabs-header .tab-btn { flex-shrink: 0; white-space: nowrap; }

    /* 8. Tipografia y cabecera mas contenidas */
    .top-header { flex-wrap: wrap; }
    .top-header h2 { font-size: 17px !important; }
    .data-table { font-size: 13px; }
    .data-table th, .data-table td { padding: 8px 10px; }

    /* 9. Rejillas de tarjetas a una o dos columnas */
    .cashier-keypad {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    }

    .stats-grid,
    .dashboard-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Respetar la zona segura de los iPhone con notch, para que la barra inferior
   del sistema no tape el ultimo boton del formulario */
@supports (padding: max(0px)) {
    @media (max-width: 900px) {
        .main-content {
            padding-left: max(14px, env(safe-area-inset-left));
            padding-right: max(14px, env(safe-area-inset-right));
            padding-bottom: max(40px, env(safe-area-inset-bottom));
        }
    }
}

@media (max-width: 480px) {
    .main-content { padding: 10px 10px 40px; }
    .cashier-keypad { grid-template-columns: 1fr 1fr !important; }
    .top-header h2 { font-size: 15px !important; }
    .tax-summary { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   MODO COMPACTO EN TELEFONO
   Todo mas apretado para que quepa mas informacion de un vistazo, sin bajar
   de los 16px en los campos (Safari amplia la pagina por debajo de eso) ni
   de los 40px de alto en lo que hay que pulsar con el dedo.
   ========================================================================== */
@media (max-width: 900px) {
    .main-content { padding: 8px 10px 32px; }

    /* Tarjetas y paneles */
    .card, .table-card, .form-card, .stat-card, .metric-card {
        padding: 10px 12px !important;
        margin-bottom: 10px !important;
        border-radius: 10px !important;
    }

    /* Tablas mas densas */
    .data-table { font-size: 12px; }
    .data-table th, .data-table td { padding: 6px 8px !important; }
    .data-table th { font-size: 10.5px; letter-spacing: 0; }

    /* Titulos y cabeceras */
    .top-header { margin-bottom: 10px !important; padding-bottom: 8px !important; }
    .view-panel > h3, .section-title { font-size: 15px !important; margin: 10px 0 8px !important; }
    .tabs-header .tab-btn { padding: 8px 12px !important; font-size: 12.5px !important; }

    /* Formularios */
    .form-group { margin-bottom: 8px !important; }
    .form-group label { font-size: 11.5px !important; margin-bottom: 3px !important; }
    input, select, textarea { padding: 8px 10px !important; }

    /* Cifras del dashboard y de los informes */
    .stat-value, .metric-value { font-size: 1.25rem !important; }
    .stat-label, .metric-label { font-size: 0.68rem !important; }

    /* Informes tributarios */
    .tax-toolbar { padding: 10px 12px; gap: 8px; margin-bottom: 12px; }
    .tax-summary { gap: 8px; margin-bottom: 12px; }
    .tax-card { padding: 10px 12px; }
    .tax-card .etiqueta { font-size: 0.63rem; margin-bottom: 3px; }
    .tax-card .valor { font-size: 1.02rem; }
    .tax-card .detalle { font-size: 0.65rem; }
    .tax-card.total .valor { font-size: 1.3rem; }
    .tax-seccion { font-size: 0.88rem; margin: 14px 0 7px; }
    .tax-aviso { padding: 10px 12px; font-size: 0.76rem; margin-bottom: 12px; }

    table.tax-tabla tr { padding: 6px 10px; margin-bottom: 7px; }
    table.tax-tabla td { padding: 3px 0; font-size: 12.5px; }
    table.tax-tabla td::before { font-size: 0.66rem; }

    /* Teclado de accesos rapidos */
    .cashier-key { padding: 10px 8px !important; font-size: 12px !important; }
    .cashier-key i { font-size: 1.1rem !important; }

    /* Tarjetas de lugar de trabajo del modal de usuarios */
    .lugar-card { padding: 9px 8px; font-size: 0.72rem; }
    .lugar-card i { font-size: 1.05rem; }

    /* Botones: compactos pero pulsables */
    .btn { min-height: 40px; padding: 9px 12px; font-size: 13px; }
}

/* ==========================================================================
   MODO MUY COMPACTO EN TELEFONO
   Peticion de Hector: que quepa lo maximo de un vistazo para tener que
   desplazarse lo menos posible. Va despues del bloque anterior a proposito,
   para que gane sin necesidad de subir la especificidad.

   Donde se pone el limite, y por que:
   - Los campos de texto se quedan en 16px. Por debajo, el navegador amplia la
     pagina al enfocarlos y no la devuelve a su sitio; sale peor el remedio.
   - Lo que se pulsa con el dedo no baja de 36px de alto. Por debajo se falla
     el toque y se acaba abriendo lo de al lado.
   ========================================================================== */
@media (max-width: 900px) {
    /* Las fichas del menu son lo que mas espacio ocupa: pasan de dos por fila
       a tres, y se les quita la descripcion, que es lo que obliga a hacerlas
       altas. El titulo y el icono ya dicen de que se trata. */
    .cashier-keypad {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 7px !important;
        margin-top: 10px !important;
    }

    .cashier-key {
        padding: 7px 4px !important;
        gap: 4px !important;
        border-width: 1px !important;
        border-radius: 9px !important;
    }

    .cashier-key .cashier-key-icon {
        width: 28px !important;
        height: 28px !important;
    }

    .cashier-key .cashier-key-icon i { font-size: 0.8rem !important; }

    .cashier-key h3 {
        font-size: 0.62rem !important;
        line-height: 1.15 !important;
        margin: 0 !important;
        font-weight: 700 !important;
    }

    /* La descripcion se oculta, no se borra: en el escritorio sigue estando */
    .cashier-key p { display: none !important; }

    /* Un punto mas de densidad en el resto */
    .main-content { padding: 6px 8px 28px !important; }
    .card, .table-card, .form-card { padding: 8px 9px !important; margin-bottom: 8px !important; }
    .data-table { font-size: 11px !important; }
    .data-table th, .data-table td { padding: 4px 6px !important; }
    .top-header h2 { font-size: 14px !important; }
    .sub-label { font-size: 0.66rem !important; margin-bottom: 6px !important; }
    .tabs-header .tab-btn { padding: 6px 9px !important; font-size: 11px !important; }
    .btn { min-height: 36px !important; padding: 7px 10px !important; font-size: 12px !important; }
    .form-group { margin-bottom: 6px !important; }
    .form-group label { font-size: 10.5px !important; }
}

/* En pantallas estrechas, cuatro fichas por fila */
@media (max-width: 400px) {
    .cashier-keypad { grid-template-columns: repeat(4, 1fr) !important; gap: 5px !important; }
    .cashier-key h3 { font-size: 0.55rem !important; }
    .cashier-key .cashier-key-icon { width: 24px !important; height: 24px !important; }
    .cashier-key .cashier-key-icon i { font-size: 0.7rem !important; }
}

/* ==========================================================================
   INFORMES TRIBUTARIOS (liquidacion de IVA y retenciones)
   Pensados para leerse igual en el escritorio y en el telefono: las tarjetas
   se reacomodan solas y las tablas se vuelven fichas en pantalla estrecha.
   ========================================================================== */
.tax-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow);
}

.tax-period {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
}

.tax-period label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.tax-period select,
.tax-period input {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    font-family: var(--font-body);
    font-size: 0.85rem;
    background: var(--bg-card);
    color: var(--text-main);
}

/* Tarjetas de cifras */
.tax-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.tax-card {
    padding: 16px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow);
}

.tax-card .etiqueta {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.tax-card .valor {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.15;
    word-break: break-word;
}

.tax-card .detalle {
    display: block;
    margin-top: 5px;
    font-size: 0.74rem;
    color: var(--text-secondary);
}

.tax-card.suma  { border-left-color: #059669; }
.tax-card.resta { border-left-color: #d97706; }
.tax-card.alerta{ border-left-color: #dc2626; background: rgba(220, 38, 38, 0.03); }

/* El resultado de la liquidacion: la cifra que se declara */
.tax-card.total {
    border-left-color: var(--primary);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(30, 64, 175, 0.04));
}

.tax-card.total .valor {
    font-size: 1.85rem;
    color: var(--primary);
}

.tax-card.total.favor .valor { color: #059669; }

/* Aviso sobre documentos que necesitan revision */
.tax-aviso {
    display: flex;
    gap: 11px;
    padding: 13px 16px;
    margin-bottom: 18px;
    border-radius: var(--border-radius-sm);
    background: rgba(220, 38, 38, 0.06);
    border: 1px solid rgba(220, 38, 38, 0.25);
    color: #991b1b;
    font-size: 0.84rem;
    line-height: 1.45;
}

.tax-aviso i { font-size: 1.05rem; margin-top: 2px; }

.tax-seccion {
    margin: 22px 0 10px;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.tax-seccion .cuenta {
    font-family: var(--font-body);
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-app);
    padding: 2px 9px;
    border-radius: 999px;
}

.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.tax-origen {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tax-origen.factus        { background: rgba(5, 150, 105, 0.12);  color: #047857; }
.tax-origen.canal_directo { background: rgba(217, 119, 6, 0.12);  color: #b45309; }
.tax-origen.sin_reportar  { background: rgba(220, 38, 38, 0.12);  color: #b91c1c; }

/* En el telefono cada fila se lee como una ficha, con su etiqueta al lado */
@media (max-width: 720px) {
    .tax-toolbar { flex-direction: column; align-items: stretch; }
    .tax-period { min-width: 0; }
    .tax-toolbar .btn { width: 100%; justify-content: center; }
    .tax-summary { grid-template-columns: 1fr 1fr; gap: 10px; }
    .tax-card { padding: 13px 14px; }
    .tax-card .valor { font-size: 1.15rem; }
    .tax-card.total { grid-column: 1 / -1; }
    .tax-card.total .valor { font-size: 1.6rem; }

    table.tax-tabla thead { display: none; }
    table.tax-tabla,
    table.tax-tabla tbody,
    table.tax-tabla tr,
    table.tax-tabla td { display: block; width: 100%; }

    table.tax-tabla tr {
        margin-bottom: 10px;
        border: 1px solid var(--border);
        border-radius: var(--border-radius-sm);
        padding: 8px 12px;
        background: var(--bg-card);
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    }

    table.tax-tabla td {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        padding: 5px 0;
        border: none;
        text-align: right;
    }

    table.tax-tabla td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--text-secondary);
        text-align: left;
        flex-shrink: 0;
    }

    table.tax-tabla td.num { text-align: right; }
}

/* Selector de lugar de trabajo del modal de usuarios.
   Tarjetas en vez de un desplegable: el lugar decide a que unidad podra
   entrar el usuario, asi que conviene ver de un golpe cual esta elegido. */
.lugar-selector {
    display: flex;
    gap: 10px;
}

.lugar-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 14px 10px;
    border: 2px solid var(--border);
    border-radius: var(--border-radius-sm);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    transition: all 0.18s ease;
}

.lugar-card i {
    font-size: 1.35rem;
    color: #94a3b8;
    transition: all 0.18s ease;
}

.lugar-card:hover {
    border-color: var(--accent);
    background: rgba(37, 99, 235, 0.04);
    transform: translateY(-2px);
}

.lugar-card:hover i { color: var(--accent); }

.lugar-card.active {
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(30, 64, 175, 0.06));
    color: var(--primary);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.18);
}

.lugar-card.active i {
    color: var(--accent);
    transform: scale(1.08);
}

/* Bendita Sea y el Club ya tienen identidad propia en el resto del sistema */
.lugar-card[data-lugar="bendita_sea"]:hover,
.lugar-card[data-lugar="bendita_sea"].active {
    border-color: #db2777;
}

.lugar-card[data-lugar="bendita_sea"].active {
    background: linear-gradient(135deg, rgba(219, 39, 119, 0.10), rgba(157, 23, 77, 0.06));
    color: #9d174d;
    box-shadow: 0 4px 14px rgba(219, 39, 119, 0.18);
}

.lugar-card[data-lugar="bendita_sea"]:hover i,
.lugar-card[data-lugar="bendita_sea"].active i { color: #db2777; }

.lugar-card[data-lugar="club"]:hover,
.lugar-card[data-lugar="club"].active {
    border-color: #0891b2;
}

.lugar-card[data-lugar="club"].active {
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.10), rgba(14, 116, 144, 0.06));
    color: #0e7490;
    box-shadow: 0 4px 14px rgba(8, 145, 178, 0.18);
}

.lugar-card[data-lugar="club"]:hover i,
.lugar-card[data-lugar="club"].active i { color: #0891b2; }

@media (max-width: 640px) {
    .lugar-selector { flex-direction: column; }
    .lugar-card {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 12px 14px;
    }
}

/* Hide redundant h4 headings inside wizard steps and compact section margins */
#view-facturacion .invoice-items-section,
#view-compras .invoice-items-section,
#view-comprobante-egreso-doc .invoice-items-section,
#view-recibo-caja-doc .invoice-items-section,
#view-nota-contabilidad-doc .invoice-items-section,
#view-devoluciones-doc .invoice-items-section {
    margin-top: 8px !important;
    padding-top: 4px !important;
    border-top: none !important;
}

#view-facturacion .invoice-items-section h4,
#view-compras .invoice-items-section h4,
#view-comprobante-egreso-doc .invoice-items-section h4,
#view-recibo-caja-doc .invoice-items-section h4,
#view-nota-contabilidad-doc .invoice-items-section h4,
#view-devoluciones-doc .invoice-items-section h4 {
    display: none !important;
}

/* Make table cells inside document views highly compact */
#view-facturacion .data-table,
#view-compras .data-table,
#view-comprobante-egreso-doc .data-table,
#view-recibo-caja-doc .data-table,
#view-nomina-doc .data-table,
#view-nota-contabilidad-doc .data-table,
#view-devoluciones-doc .data-table {
    font-size: 11.5px !important;
}

#view-facturacion .data-table th,
#view-facturacion .data-table td,
#view-compras .data-table th,
#view-compras .data-table td,
#view-comprobante-egreso-doc .data-table th,
#view-comprobante-egreso-doc .data-table td,
#view-recibo-caja-doc .data-table th,
#view-recibo-caja-doc .data-table td,
#view-nomina-doc .data-table th,
#view-nomina-doc .data-table td,
#view-nota-contabilidad-doc .data-table th,
#view-nota-contabilidad-doc .data-table td,
#view-devoluciones-doc .data-table th,
#view-devoluciones-doc .data-table td {
    padding: 5px 8px !important;
}

/* Compact table controls and inputs */
#view-facturacion .data-table input,
#view-facturacion .data-table select,
#view-facturacion .data-table button,
#view-compras .data-table input,
#view-compras .data-table select,
#view-compras .data-table button,
#view-comprobante-egreso-doc .data-table input,
#view-comprobante-egreso-doc .data-table select,
#view-comprobante-egreso-doc .data-table button,
#view-recibo-caja-doc .data-table input,
#view-recibo-caja-doc .data-table select,
#view-recibo-caja-doc .data-table button,
#view-nota-contabilidad-doc .data-table input,
#view-nota-contabilidad-doc .data-table select,
#view-nota-contabilidad-doc .data-table button,
#view-devoluciones-doc .data-table input,
#view-devoluciones-doc .data-table select,
#view-devoluciones-doc .data-table button {
    padding: 3px 6px !important;
    font-size: 11px !important;
    height: 26px !important;
    border-radius: 4px !important;
}

#view-facturacion .form-card .form-group label,
#view-compras .form-card .form-group label,
#view-comprobante-egreso-doc .form-card .form-group label,
#view-recibo-caja-doc .form-card .form-group label,
#view-nota-contabilidad-doc .form-card .form-group label,
#view-devoluciones-doc .form-card .form-group label,
#view-nomina-doc .form-card .form-group label {
    color: var(--primary) !important;
    font-weight: 700 !important;
    font-size: 10.5px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    margin-bottom: 2px !important;
    opacity: 0.9;
}

#view-facturacion .form-card .form-group input:not([type="checkbox"]):not([type="radio"]),
#view-facturacion .form-card .form-group select,
#view-facturacion .form-card .form-group textarea,
#view-compras .form-card .form-group input:not([type="checkbox"]):not([type="radio"]),
#view-compras .form-card .form-group select,
#view-compras .form-card .form-group textarea,
#view-comprobante-egreso-doc .form-card .form-group input:not([type="checkbox"]):not([type="radio"]),
#view-comprobante-egreso-doc .form-card .form-group select,
#view-comprobante-egreso-doc .form-card .form-group textarea,
#view-recibo-caja-doc .form-card .form-group input:not([type="checkbox"]):not([type="radio"]),
#view-recibo-caja-doc .form-card .form-group select,
#view-recibo-caja-doc .form-card .form-group textarea,
#view-nota-contabilidad-doc .form-card .form-group input:not([type="checkbox"]):not([type="radio"]),
#view-nota-contabilidad-doc .form-card .form-group select,
#view-nota-contabilidad-doc .form-card .form-group textarea,
#view-devoluciones-doc .form-card .form-group input:not([type="checkbox"]):not([type="radio"]),
#view-devoluciones-doc .form-card .form-group select,
#view-devoluciones-doc .form-card .form-group textarea,
#view-nomina-doc .form-card .form-group input:not([type="checkbox"]):not([type="radio"]),
#view-nomina-doc .form-card .form-group select,
#view-nomina-doc .form-card .form-group textarea {
    background-color: #ffffff !important;
    border: 1.5px solid var(--border-input, #cbd5e1) !important;
    color: #0f172a !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    outline: none !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

#view-facturacion .form-card .form-group input:focus,
#view-facturacion .form-card .form-group select:focus,
#view-facturacion .form-card .form-group textarea:focus,
#view-compras .form-card .form-group input:focus,
#view-compras .form-card .form-group select:focus,
#view-compras .form-card .form-group textarea:focus,
#view-comprobante-egreso-doc .form-card .form-group input:focus,
#view-comprobante-egreso-doc .form-card .form-group select:focus,
#view-comprobante-egreso-doc .form-card .form-group textarea:focus,
#view-recibo-caja-doc .form-card .form-group input:focus,
#view-recibo-caja-doc .form-card .form-group select:focus,
#view-recibo-caja-doc .form-card .form-group textarea:focus,
#view-nota-contabilidad-doc .form-card .form-group input:focus,
#view-nota-contabilidad-doc .form-card .form-group select:focus,
#view-nota-contabilidad-doc .form-card .form-group textarea:focus,
#view-devoluciones-doc .form-card .form-group input:focus,
#view-devoluciones-doc .form-card .form-group select:focus,
#view-devoluciones-doc .form-card .form-group textarea:focus,
#view-nomina-doc .form-card .form-group input:focus,
#view-nomina-doc .form-card .form-group select:focus,
#view-nomina-doc .form-card .form-group textarea:focus {
    background-color: #ffffff !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 4px var(--focus-ring, rgba(37, 99, 235, 0.2)), inset 0 1px 1px rgba(0,0,0,0.05) !important;
}

.btn-lupita {
    height: 32px !important;
    border-radius: 6px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    border: 1.5px solid #cbd5e1 !important;
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    transition: all 0.2s ease;
}

.btn-lupita:hover {
    background-color: #cbd5e1 !important;
    color: #0f172a !important;
}

.dashboard-details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 24px;
}

.details-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.details-card .card-header {
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.details-card .card-header h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

/* INVENTORY PREMIUM HEADER & SEARCH BOX */
.inventory-search-box {
    max-width: 550px !important;
}

.inventory-search-box input {
    border: 2px solid #3b82f6 !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.08) !important;
    background-color: var(--bg-card) !important;
    font-weight: 500;
    transition: all 0.3s ease;
}

.inventory-search-box input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.inventory-search-box i {
    color: #3b82f6 !important;
    font-size: 16px;
}

.inventory-search-box input:focus {
    border-color: #1d4ed8 !important;
    box-shadow: 0 4px 16px rgba(29, 78, 216, 0.18), 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
    transform: translateY(-1px);
}

/* Unified Elaboration Headers */
.form-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin: -12px -12px 20px -12px !important;
    padding: 12px 16px !important;
    border-bottom: 1.5px solid var(--border);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.form-card-header h3 {
    margin: 0 !important;
    font-family: var(--font-heading);
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

/* Document specific header colors */
.doc-panel-fv .form-card-header {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    border-bottom-color: #bfdbfe !important;
}
.doc-panel-ds .form-card-header {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
    border-bottom-color: #bbf7d0 !important;
}
.doc-panel-ce .form-card-header {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%) !important;
    border-bottom-color: #fed7aa !important;
}
.doc-panel-rc .form-card-header {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    border-bottom-color: #fde68a !important;
}
.doc-panel-nm .form-card-header {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%) !important;
    border-bottom-color: #e9d5ff !important;
}
.doc-panel-nc .form-card-header {
    background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%) !important;
    border-bottom-color: #99f6e4 !important;
}

/* Document specific badge pills */
.doc-number-pill {
    color: #ffffff !important;
    padding: 5px 12px !important;
    font-size: 11px !important;
    font-family: monospace !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    display: inline-block !important;
    white-space: nowrap !important;
}

.doc-panel-fv .doc-number-pill { background-color: #3b82f6 !important; }
.doc-panel-ds .doc-number-pill { background-color: #10b981 !important; }
.doc-panel-ce .doc-number-pill { background-color: #f97316 !important; }
.doc-panel-rc .doc-number-pill { background-color: #f59e0b !important; }
.doc-panel-nm .doc-number-pill { background-color: #8b5cf6 !important; }
.doc-panel-nc .doc-number-pill { background-color: #14b8a6 !important; }

/* UNIVERSAL PRINT STYLES - PREVENT DOCUMENT TRUNCATION & SCROLLBARS */
@media print {
    /* Reset containers to fill print area completely */
    .factus-invoice-container,
    .premium-invoice-modal,
    .modal-content,
    .modal-body,
    #asiento-modal-body,
    #asiento-details-content,
    #invoice-capture-area,
    .asiento-details-body-scroll {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        position: static !important;
    }

    .modal {
        position: static !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        display: block !important;
    }

    /* Hide scrollbars during print */
    ::-webkit-scrollbar {
        display: none !important;
    }

    /* Prevent awkward page break cuts inside rows */
    tr, .totals-box, .details-card {
        page-break-inside: avoid;
    }
}

/* ==========================================================================
   MATRIZ PREMIUM DE PERMISOS DE USUARIOS
   ========================================================================== */
.permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 8px;
}

.perm-card {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.perm-card:hover {
    border-color: var(--primary, #2563eb);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08);
}

.perm-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--primary, #2563eb);
    cursor: pointer;
    margin-right: 8px;
    flex-shrink: 0;
}

.perm-content {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}

.perm-icon {
    font-size: 13px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.perm-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-main, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.perm-card:has(.perm-checkbox:checked) {
    background: rgba(37, 99, 235, 0.04);
    border-color: rgba(37, 99, 235, 0.4);
}

.perm-card:has(.perm-checkbox:checked) .perm-title {
    font-weight: 600;
    color: var(--primary, #2563eb);
}

/* ============================================================
   PUNTO DE VENTA (Club Sol del Valle) - POS tactil premium
   ============================================================ */

.pos2-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    /* La fila mide EXACTO lo que mide el contenedor: sin esto, la fila crece
       con las 146 tarjetas y empuja el ticket (y las formas de pago) miles de
       pixeles hacia abajo. El scroll debe vivir DENTRO de la grilla. */
    grid-template-rows: minmax(0, 1fr);
    gap: 16px;
    height: calc(100vh - 150px);
    min-height: 480px;
}

.pos2-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    gap: 12px;
}

/* --- Barra superior: buscador + categorias --- */
.pos2-toolbar { display: flex; flex-direction: column; gap: 10px; }

.pos2-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: var(--shadow);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.pos2-search-box:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}
.pos2-search-box i { color: var(--text-muted); font-size: 1rem; }
.pos2-search-box input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1.05rem;
    font-family: inherit;
    color: var(--text-main);
}

.pos2-cats {
    /* Todas las categorias a la vista: la barra hace saltos de linea en vez
       de esconder las ultimas tras un scroll lateral. */
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pos2-cat {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    color: var(--text-main);
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}
.pos2-cat i { font-size: 0.7rem; }
.pos2-cat small {
    background: color-mix(in srgb, var(--text-muted) 12%, transparent);
    border-radius: 999px;
    padding: 1px 5px;
    font-size: 0.6rem;
    font-weight: 700;
}
.pos2-cat:hover { border-color: var(--primary); transform: translateY(-1px); }
.pos2-cat.activa {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--primary) 55%, transparent);
}
.pos2-cat.activa small { background: rgba(255, 255, 255, 0.25); }

/* --- Grilla de productos --- */
.pos2-grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    /* Filas de altura FIJA: con filas "auto" el motor llego a aplastarlas
       repartiendo la altura del contenedor entre las 30 filas. Fijas son
       inmunes a eso y ademas dan un ritmo visual parejo de POS. */
    grid-auto-rows: 238px;
    gap: 12px;
    align-content: start;
    padding: 2px 2px 20px;
}

.pos2-aviso {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-muted);
    padding: 60px 20px;
    font-size: 1rem;
}
.pos2-aviso i { display: block; font-size: 2rem; margin-bottom: 12px; opacity: 0.5; }

.pos2-card {
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    display: flex;
    flex-direction: column;
}
.pos2-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary);
    box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.18);
}
.pos2-card:active { transform: scale(0.97); }
.pos2-card.pulso { animation: pos2-pulso 0.35s ease; }
@keyframes pos2-pulso {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 50%, transparent); }
    100% { box-shadow: 0 0 0 14px transparent; }
}

.pos2-card {
    height: 238px;
}

.pos2-card-img {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.pos2-card-img > i {
    position: absolute;
    font-size: 2.2rem;
    color: #94a3b8;
}
.pos2-card-img img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #fff;
}

.pos2-card-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.35);
    z-index: 2;
}

.pos2-card-stock {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(15, 23, 42, 0.65);
    color: #fff;
    backdrop-filter: blur(4px);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 0.68rem;
    font-weight: 700;
    z-index: 2;
}
.pos2-card-stock.bajo { background: rgba(217, 119, 6, 0.9); }
.pos2-card-stock.agotado { background: rgba(220, 38, 38, 0.9); }

.pos2-card.agotada { opacity: 0.55; filter: grayscale(0.8); }

.pos2-card-nombre {
    padding: 10px 12px 2px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-main);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.55em;
}
.pos2-card-precio {
    padding: 2px 12px 12px;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--primary);
}

/* --- Panel del ticket --- */
.pos2-ticket {
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.pos2-ticket-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}
.pos2-ticket-titulo {
    font-weight: 800;
    font-size: 1rem;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
}
.pos2-ticket-titulo i { color: var(--primary); }

.pos2-vaciar {
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 6px 8px;
    border-radius: 8px;
    transition: all 0.15s;
}
.pos2-vaciar:hover { color: #dc2626; background: #fef2f2; }

.pos2-cliente-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1.5px solid var(--border);
    background: var(--bg-app);
    color: var(--text-main);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    max-width: 170px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: border-color 0.15s;
}
.pos2-cliente-chip:hover { border-color: var(--primary); }
.pos2-cliente-chip i { color: var(--primary); }

.pos2-lineas {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pos2-vacio {
    margin: auto;
    text-align: center;
    color: var(--text-muted);
    opacity: 0.7;
}
.pos2-vacio i { font-size: 2.4rem; margin-bottom: 10px; }
.pos2-vacio p { font-size: 0.9rem; line-height: 1.4; }

.pos2-linea {
    background: var(--bg-app);
    border-radius: 12px;
    padding: 8px 10px;
    animation: pos2-entra 0.2s ease;
}
@keyframes pos2-entra {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
.pos2-linea-info {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.pos2-linea-nombre {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pos2-linea-precio {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.pos2-linea-acciones {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pos2-step {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    color: var(--text-main);
    cursor: pointer;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
}
.pos2-step:hover { border-color: var(--primary); color: var(--primary); }
.pos2-step:active { transform: scale(0.9); }
.pos2-linea-qty {
    min-width: 22px;
    text-align: center;
    font-weight: 800;
    font-size: 0.95rem;
}
.pos2-linea-total {
    margin-left: auto;
    font-size: 0.88rem;
    color: var(--text-main);
}
.pos2-x {
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 0.8rem;
    transition: all 0.12s;
}
.pos2-x:hover { color: #dc2626; background: #fef2f2; }

/* --- Resumen y cobro --- */
.pos2-resumen {
    border-top: 1px solid var(--border);
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--primary) 4%, transparent));
}
.pos2-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.pos2-total-row span {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.pos2-total-row strong {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.02em;
}
.pos2-iva-linea {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: -8px;
    text-align: right;
}

.pos2-pagos {
    display: grid;
    /* 6 metodos en 2 filas de 3: botones grandes, faciles de tocar */
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.pos2-pago {
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    border-radius: 12px;
    padding: 8px 2px;
    font-size: 0.62rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    transition: all 0.15s;
}
.pos2-pago i { font-size: 1rem; }
.pos2-pago:hover { border-color: var(--primary); color: var(--primary); }
.pos2-pago.activo {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-card));
    color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
}

.pos2-cobrar {
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: #fff;
    padding: 16px 18px;
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.05rem;
    letter-spacing: 0.03em;
    box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--primary) 70%, transparent);
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.2s;
}
.pos2-cobrar:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -8px color-mix(in srgb, var(--primary) 75%, transparent); }
.pos2-cobrar:active { transform: scale(0.98); }
.pos2-cobrar.inactivo { opacity: 0.4; pointer-events: none; }
.pos2-cobrar.cargando { opacity: 0.6; pointer-events: none; }
.pos2-cobrar-total { font-size: 1.2rem; }

/* --- Overlays (efectivo, exito, cliente) --- */
.pos2-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(6px);
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: pos2-fade 0.18s ease;
}
@keyframes pos2-fade { from { opacity: 0; } to { opacity: 1; } }

.pos2-modal {
    background: var(--bg-card);
    border-radius: 24px;
    padding: 22px;
    width: 100%;
    max-width: 420px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.4);
    animation: pos2-sube 0.22s cubic-bezier(0.18, 1.25, 0.4, 1);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
@keyframes pos2-sube {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to { opacity: 1; transform: none; }
}

.pos2-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pos2-modal-head h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 10px;
}
.pos2-modal-head h3 i { color: var(--primary); }

.pos2-input {
    width: 100%;
    border: 1.5px solid var(--border-input, var(--border));
    border-radius: 12px;
    padding: 13px 16px;
    font-size: 1.1rem;
    font-family: inherit;
    color: var(--text-main);
    background: var(--bg-app);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.pos2-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}

.pos2-efectivo-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.9rem;
    color: var(--text-muted);
    background: var(--bg-app);
    border-radius: 12px;
    padding: 12px 16px;
}
.pos2-efectivo-total strong { font-size: 1.5rem; color: var(--text-main); }

.pos2-billetes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.pos2-billete {
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    color: var(--text-main);
    border-radius: 12px;
    padding: 12px 6px;
    font-size: 0.85rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.13s;
}
.pos2-billete:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.pos2-billete.exacto {
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-card));
    border-color: var(--primary);
    color: var(--primary);
}

.pos2-cambio {
    min-height: 1.4em;
    text-align: center;
    font-size: 1rem;
    color: var(--text-main);
}
.pos2-cambio strong { font-size: 1.3rem; color: var(--primary); }
.pos2-cambio .falta { color: #dc2626; font-size: 0.85rem; }

/* Pago combinado */
.pos2-mixto-filas {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pos2-mixto-fila {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pos2-mixto-nombre {
    flex: 0 0 116px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-main);
}
.pos2-mixto-nombre i { color: var(--primary); width: 17px; text-align: center; }
.pos2-mixto-fila .pos2-input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    font-size: 1rem;
}
.pos2-mixto-resto {
    flex: 0 0 auto;
    border: 1.5px solid var(--border);
    background: var(--bg-app);
    color: var(--text-muted);
    border-radius: 10px;
    padding: 10px 11px;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.13s;
}
.pos2-mixto-resto:hover { border-color: var(--primary); color: var(--primary); }

.pos2-exito-desglose {
    font-size: 0.9rem;
    color: var(--text-muted);
    background: var(--bg-app);
    border-radius: 10px;
    padding: 8px 14px;
}

/* Ficha destacada del Punto de Venta en el panel principal */
.cashier-key.key-pos {
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    border-color: transparent;
}
.cashier-key.key-pos h3 { color: #fff; }
.cashier-key.key-pos p { color: rgba(255, 255, 255, 0.82); }
.cashier-key.key-pos .cashier-key-icon,
body[data-tenant="club"] .cashier-key.key-pos .cashier-key-icon {
    background-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}
.cashier-key.key-pos:hover {
    border-color: transparent;
    box-shadow: 0 14px 32px -6px color-mix(in srgb, var(--primary) 55%, transparent);
}
.cashier-key.key-pos:hover .cashier-key-icon {
    background-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* Ficha de gastos del panel principal: plata que sale, en rojo suave */
.cashier-key.key-gasto .cashier-key-icon,
body[data-tenant="club"] .cashier-key.key-gasto .cashier-key-icon {
    background-color: rgba(220, 38, 38, 0.09);
    color: #dc2626;
}
.cashier-key.key-gasto:hover { border-color: #dc2626; }
.cashier-key.key-gasto:hover .cashier-key-icon {
    background-color: #dc2626;
    color: #fff;
}

/* --- Registrar compra leyendo la factura con IA --- */
.fc-modal { max-width: 560px; }
.fc-modal-revision { max-width: 720px; }
.fc-sub {
    font-size: 0.74rem;
    color: var(--text-muted);
    margin: 2px 0 0;
}
.fc-chip-ia {
    align-self: flex-start;
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 0.68rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fc-zona {
    border: 2px dashed #93c5fd;
    background: rgba(59, 130, 246, 0.06);
    border-radius: 16px;
    padding: 26px 18px;
    text-align: center;
    cursor: pointer;
    transition: all 0.18s;
}
.fc-zona:hover, .fc-zona.encima {
    border-color: #2563eb;
    background: rgba(59, 130, 246, 0.12);
}
.fc-zona > div > i {
    font-size: 1.6rem;
    color: #2563eb;
    margin-bottom: 8px;
    display: block;
}
.fc-zona h4 {
    font-size: 0.98rem;
    font-weight: 800;
    color: #2563eb;
    margin: 0 0 6px;
}
.fc-zona p {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 5px;
}
.fc-zona small {
    display: block;
    font-size: 0.68rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.fc-zona .fc-formatos { margin-top: 6px; opacity: 0.8; }
.fc-zona img {
    max-height: 130px;
    max-width: 100%;
    border-radius: 10px;
    margin-bottom: 8px;
    box-shadow: 0 4px 12px -4px rgba(0,0,0,0.25);
}
.fc-archivo-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-main);
    flex-wrap: wrap;
}
.fc-archivo-info i { color: var(--primary); }
.fc-quitar {
    border: none;
    background: transparent;
    color: #dc2626;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.fc-separador {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.72rem;
}
.fc-separador::before, .fc-separador::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.fc-manual {
    border: 1.5px solid var(--text-main);
    background: var(--bg-card);
    color: var(--text-main);
    border-radius: 14px;
    padding: 14px;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.15s;
}
.fc-manual:hover { border-color: var(--primary); color: var(--primary); }

.fc-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.fc-aviso {
    font-size: 0.68rem;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.fc-pie .pos2-confirmar { flex: 0 0 auto; padding: 12px 20px; }

.fc-confianza {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    padding: 9px 13px;
    font-size: 0.76rem;
    font-weight: 700;
}
.fc-confianza small { font-weight: 500; opacity: 0.85; }
.fc-confianza.buena { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.fc-confianza.regular { background: rgba(217, 119, 6, 0.12); color: #b45309; }
.fc-confianza.floja { background: rgba(220, 38, 38, 0.12); color: #dc2626; }

.fc-ok { color: var(--primary); font-size: 0.66rem; display: block; margin-top: 3px; }
.fc-nuevo { color: #b45309; font-size: 0.66rem; display: block; margin-top: 3px; }

.fc-items {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 34vh;
    overflow-y: auto;
}
.fc-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 78px 104px 34px;
    gap: 6px;
    align-items: center;
}
.fc-item .pos2-input { padding: 8px 10px; font-size: 0.82rem; }
.fc-item-cab {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 0 4px;
}
.fc-item-cab span:nth-child(2), .fc-item-cab span:nth-child(3) { text-align: right; }

.fc-totales {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--text-muted);
    background: var(--bg-app);
    border-radius: 10px;
    padding: 9px 13px;
}
.fc-totales strong { color: var(--text-main); font-size: 0.92rem; }
.fc-total-factura strong { color: var(--primary); }

@media (max-width: 700px) {
    .fc-item { grid-template-columns: minmax(0, 1fr) 62px 84px 30px; }
}

/* --- Ficha de producto simple del club (comidas y bebidas) --- */
.club-prod-modal { max-width: 580px; }

.club-prod-cuerpo {
    display: flex;
    gap: 16px;
}
.club-prod-foto {
    flex: 0 0 152px;
    height: 152px;
    border-radius: 16px;
    border: 2px dashed var(--border);
    background: var(--bg-app);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s;
}
.club-prod-foto:hover { border-color: var(--primary); }
.club-prod-foto img { width: 100%; height: 100%; object-fit: cover; }
.club-prod-foto-vacia {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.68rem;
    line-height: 1.5;
    padding: 10px;
}
.club-prod-foto-vacia i {
    display: block;
    font-size: 1.7rem;
    margin-bottom: 8px;
    color: var(--primary);
}
.club-prod-foto-cargando {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary);
}

.club-prod-campos {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.club-prod-campo label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.club-prod-campo label small { font-weight: 500; }
.club-prod-fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.club-prod-fila.tres { grid-template-columns: 1fr 1fr 1fr; }
.club-prod-modal .pos2-input {
    padding: 10px 12px;
    font-size: 0.95rem;
    width: 100%;
}
.club-prod-codigo #club-prod-codigo-info {
    font-family: monospace;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-app);
    border-radius: 10px;
    padding: 10px 12px;
    border: 1.5px dashed var(--border);
}

@media (max-width: 620px) {
    .club-prod-cuerpo { flex-direction: column; }
    .club-prod-foto { width: 152px; margin: 0 auto; }
}

/* --- Resumen del Día: todo el movimiento en una pantalla --- */
.rd-barra {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.rd-fecha {
    display: flex;
    align-items: center;
    gap: 6px;
}
.rd-fecha input[type="date"] {
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-main);
    background: var(--bg-card);
    outline: none;
}
.rd-nav, .rd-hoy {
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    color: var(--text-main);
    border-radius: 10px;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}
.rd-nav:hover, .rd-hoy:hover { border-color: var(--primary); color: var(--primary); }
.rd-cargando { color: var(--primary); }

/* --- Un dia suelto o un rango de fechas --- */
.rd-rango-et { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); }
.rd-modo-btn {
    margin-left: auto;
    border-color: var(--primary);
    color: var(--primary);
}
.rd-modo-btn:hover { background: color-mix(in srgb, var(--primary) 8%, var(--bg-card)); }

/* El cuaderno cuando son varios dias: un renglon por dia, tocable */
.rd-dia-cab, .rd-fila.rd-fila-dia {
    grid-template-columns: minmax(0, 1fr) 104px 104px 112px;
}
.rd-dia-nombre {
    font-weight: 700;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.rd-dia-nombre::first-letter { text-transform: uppercase; }
.rd-dia-nombre small {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-left: 7px;
}
.rd-fila.rd-fila-dia { padding-top: 8px; padding-bottom: 8px; }
.rd-fila-dia.rd-fila-inicial .rd-dia-nombre,
.rd-fila-dia.rd-fila-total .rd-dia-nombre { font-weight: inherit; }

.rd-tarjetas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}
.rd-tarjeta {
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 11px 13px;
    box-shadow: var(--shadow);
}
.rd-tarjeta.destacada {
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    border-color: transparent;
}
.rd-tarjeta.destacada .rd-tarjeta-titulo,
.rd-tarjeta.destacada .rd-tarjeta-nota { color: rgba(255, 255, 255, 0.8); }
.rd-tarjeta.destacada .rd-tarjeta-cifra { color: #fff; }
.rd-tarjeta.destacada .rd-tarjeta-icono { background: rgba(255, 255, 255, 0.2); color: #fff; }

.rd-tarjeta-icono {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    margin-bottom: 6px;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
}
.rd-tarjeta-icono.verde { background: rgba(5, 150, 105, 0.1); color: #059669; }
.rd-tarjeta-icono.rojo { background: rgba(220, 38, 38, 0.1); color: #dc2626; }
.rd-tarjeta-icono.azul { background: rgba(37, 99, 235, 0.1); color: #2563eb; }

.rd-tarjeta-titulo {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.rd-tarjeta-cifra {
    font-size: 1.28rem;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.rd-tarjeta-nota {
    font-size: 0.63rem;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.35;
}
/* No reserva alto: aparece encima de la tarjeta al pasar el mouse */
.rd-tarjeta-ver {
    position: absolute;
    right: 12px;
    top: 12px;
    margin: 0;
}

/* Arriba los dos resumenes, uno al lado del otro; abajo el libro a todo lo
   ancho, que es donde de verdad se mira el detalle del dia. */
.rd-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: start;
}
.rd-panel-libro { grid-column: 1 / -1; }

/* El informe completo cabe en la pantalla: los cuadros de arriba miden lo que
   necesitan y el libro se estira con lo que sobra. Solo aplica a esta pestaña;
   las de Cierre de Caja y Conciliación conservan su desplazamiento normal. */
@media (min-width: 981px) {
    body:has(#tab-resumen-dia.active) .main-content {
        height: 100vh;
        max-height: 100vh;
        overflow: hidden;
    }
    body:has(#tab-resumen-dia.active) .content-body,
    body:has(#tab-resumen-dia.active) #view-tesoreria.view-panel.active,
    #tab-resumen-dia.active {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }
    /* Se recorta lo que solo estorba en esta pestaña, para que el libro
       (que es lo que se mira) se lleve el alto que sobra. */
    body:has(#tab-resumen-dia.active) .top-header {
        margin-bottom: 8px;
        padding-bottom: 8px;
    }
    body:has(#tab-resumen-dia.active) #view-tesoreria .tabs-header {
        margin-bottom: 8px;
        flex-shrink: 0;
    }
    /* La barra de documentos abiertos no pinta nada en este informe y se
       llevaba 55px de alto. */
    body:has(#tab-resumen-dia.active) #document-tabs-bar {
        display: none !important;
    }
    #tab-resumen-dia.active .rd-cols {
        flex: 1;
        min-height: 0;
        grid-template-rows: minmax(0, auto) minmax(0, 1fr);
    }
    /* Los dos cuadros de arriba miden lo justo; si su contenido crece, se
       desplazan por dentro en vez de empujar el libro fuera de la pantalla. */
    #tab-resumen-dia.active .rd-cols > .rd-panel:not(.rd-panel-libro) {
        max-height: 25vh;
        overflow-y: auto;
        align-self: stretch;
    }
    #tab-resumen-dia.active .rd-panel-libro {
        display: flex;
        flex-direction: column;
        min-height: 0;
        /* Sin esto el panel toma su altura natural y se sale de la pantalla:
           el grid de arriba usa align-items:start. */
        align-self: stretch;
        overflow: hidden;
    }
    #tab-resumen-dia.active .rd-libro {
        flex: 1;
        max-height: none;
        min-height: 0;
    }
}

/* --- Reservas con abono --- */
.pos2-reservas-btn {
    flex: 0 0 auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    color: var(--text-main);
    border-radius: 14px;
    padding: 0 16px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: all 0.15s;
}
.pos2-reservas-btn:hover { border-color: var(--primary); color: var(--primary); }
.pos2-reservas-btn i { color: var(--primary); }
/* El de gasto es plata que sale: se distingue del resto */
.pos2-gasto-btn i { color: #dc2626; }
.pos2-gasto-btn:hover { border-color: #dc2626; color: #dc2626; }

/* El de compra: mercancía que entra */
.pos2-compra-btn i { color: #7c3aed; }
.pos2-compra-btn:hover { border-color: #7c3aed; color: #7c3aed; }

.pos2-reservas-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    box-shadow: 0 3px 8px -2px rgba(0, 0, 0, 0.35);
}

.pos2-reservas-modal { max-width: 620px; }
.pos2-res-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    background: var(--bg-app);
    border-radius: 12px;
    padding: 4px;
}
.pos2-res-tab {
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 9px;
    padding: 9px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: all 0.15s;
}
.pos2-res-tab.activa {
    background: var(--bg-card);
    color: var(--primary);
    box-shadow: var(--shadow);
}

.pos2-res-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Canchas por hora fija: "la de 6", "la de 7"... */
.pos2-horas {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}
.pos2-hora {
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    color: var(--text-main);
    border-radius: 12px;
    padding: 9px 2px;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    transition: all 0.15s;
}
.pos2-hora:hover:not(:disabled) { border-color: var(--primary); transform: translateY(-1px); }
.pos2-hora-num {
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
}
.pos2-hora-tag {
    font-size: 0.54rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}
.pos2-hora.activa {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--primary) 55%, transparent);
}
.pos2-hora.activa .pos2-hora-tag { color: rgba(255, 255, 255, 0.85); }
.pos2-hora.ocupada {
    opacity: 0.45;
    cursor: not-allowed;
    background: var(--bg-app);
    text-decoration: line-through;
}
.pos2-hora.ocupada .pos2-hora-tag { text-decoration: none; color: #dc2626; }
.pos2-hora.otra { border-style: dashed; }

.pos2-res-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 48vh;
    overflow-y: auto;
}
.pos2-res-item {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 11px 13px;
    background: var(--bg-card);
}
.pos2-res-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.pos2-res-cliente {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}
.pos2-res-cliente i { color: var(--primary); }
.pos2-res-detalle { font-size: 0.72rem; color: var(--text-muted); }
.pos2-res-plata { font-size: 0.74rem; color: var(--text-muted); }
.pos2-res-plata strong { color: var(--primary); }
.pos2-res-cobrar {
    flex: 0 0 auto;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: #fff;
    padding: 11px 15px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: transform 0.15s;
}
.pos2-res-cobrar:hover { transform: translateY(-1px); }

.pos2-aviso-reserva {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 12px 6px;
    padding: 7px 11px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    font-size: 0.74rem;
    font-weight: 700;
}
.pos2-aviso-reserva button {
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 6px;
    font-size: 0.8rem;
}
.pos2-aviso-reserva button:hover { background: rgba(0, 0, 0, 0.07); }

.pos2-abono-nota { color: var(--primary); font-weight: 700; }

/* Etiqueta de producto con precio abierto en el POS */
.pos2-precio-abierto {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.rd-panel {
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: var(--shadow);
}
.rd-panel h4 {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.rd-panel h4 i { color: var(--primary); }

.rd-metodo {
    display: grid;
    grid-template-columns: 124px 1fr 84px 32px;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}
.rd-metodo-nombre {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
.rd-metodo-nombre i { color: var(--primary); width: 15px; text-align: center; }
.rd-metodo-barra {
    height: 10px;
    background: var(--bg-app);
    border-radius: 999px;
    overflow: hidden;
}
.rd-metodo-barra div {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), var(--primary-hover));
    transition: width 0.4s ease;
}
.rd-metodo-valor {
    font-size: 0.8rem;
    font-weight: 800;
    text-align: right;
    color: var(--text-main);
    white-space: nowrap;
}
.rd-metodo-pct {
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--text-muted);
    text-align: right;
}
/* --- Al tocar una forma de pago se despliegan las facturas que la componen --- */
.rd-metodo-clic { cursor: pointer; border-radius: 8px; }
.rd-metodo-clic:hover { background: var(--bg-app); }
.rd-metodo-flecha {
    font-size: 0.52rem !important;
    color: var(--text-muted) !important;
    transition: transform 0.15s;
}
.rd-metodo-flecha.abierta { transform: rotate(180deg); }
.rd-metodo-lista {
    margin: 2px 0 8px 14px;
    border-left: 2px solid var(--border);
    padding-left: 9px;
    max-height: 260px;
    overflow-y: auto;
}
.rd-mp-fila {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) 92px;
    align-items: center;
    gap: 7px;
    padding: 3px 4px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.68rem;
}
.rd-mp-fila:hover { background: var(--bg-app); }
.rd-mp-doc { font-family: monospace; font-weight: 700; color: var(--primary); }
.rd-mp-quien {
    color: var(--text-main);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.rd-mp-quien.es-hora { color: var(--text-muted); font-size: 0.62rem; }
.rd-mp-monto { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-mp-total {
    display: flex;
    justify-content: space-between;
    padding: 5px 4px 1px;
    margin-top: 3px;
    border-top: 1.5px solid var(--border);
    font-size: 0.66rem;
    font-weight: 800;
    color: var(--text-muted);
}
.rd-mp-total strong { color: var(--text-main); font-variant-numeric: tabular-nums; }

.rd-metodo-extra {
    font-size: 0.68rem;
    color: var(--text-muted);
    padding: 0 0 4px 22px;
}
.rd-area-util {
    font-size: 0.68rem;
    color: var(--text-muted);
    padding: 0 0 6px 22px;
    margin-top: -4px;
}
.rd-area-util strong { color: var(--primary); }
.rd-area-util.perdida strong { color: #dc2626; }

.rd-docs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 46vh;
    overflow-y: auto;
}
.rd-doc {
    display: grid;
    grid-template-columns: 44px 64px 70px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.12s;
}
.rd-doc:hover { background: var(--bg-app); }
.rd-doc.anulado { opacity: 0.45; text-decoration: line-through; }
.rd-doc-hora { font-size: 0.68rem; color: var(--text-muted); font-weight: 600; }
.rd-doc-chip {
    color: #fff;
    font-size: 0.58rem;
    font-weight: 800;
    border-radius: 6px;
    padding: 3px 0;
    text-align: center;
    letter-spacing: 0.03em;
}
.rd-doc-num { font-family: monospace; font-size: 0.74rem; font-weight: 700; color: var(--primary); }
.rd-doc-tercero {
    font-size: 0.76rem;
    color: var(--text-main);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.rd-doc-total { font-size: 0.8rem; white-space: nowrap; }

.rd-vacio {
    text-align: center;
    color: var(--text-muted);
    padding: 26px 10px;
    font-size: 0.85rem;
    line-height: 1.6;
}
.rd-vacio i { font-size: 1.5rem; opacity: 0.5; }

/* --- Libro del día: entra, sale y saldo corrido (como el cuaderno) --- */
.rd-btn-gasto {
    margin-left: auto;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    color: var(--text-main);
    border-radius: 10px;
    padding: 6px 11px;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
}
.rd-btn-gasto:hover { border-color: #dc2626; color: #dc2626; }
.rd-btn-gasto i { color: inherit; }

.rd-libro {
    display: flex;
    flex-direction: column;
    max-height: 58vh;
    overflow-y: auto;
}
.rd-libro-cab, .rd-fila {
    display: grid;
    /* A todo lo ancho el concepto se lee completo, sin recortes */
    grid-template-columns: 62px 68px 74px minmax(0, 1fr) 106px 106px 116px;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
}
/* En las filas de saldo inicial y totales, el texto ocupa el frente entero */
.rd-fila-titulo {
    grid-column: 1 / 5;
    font-weight: inherit;
}
.rd-libro-cab {
    position: sticky;
    top: 0;
    background: var(--bg-card);
    border-bottom: 1.5px solid var(--border);
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    z-index: 1;
}
.rd-fila {
    border-bottom: 1px dashed var(--border);
    cursor: pointer;
    transition: background 0.12s;
    font-size: 0.75rem;
}
.rd-fila:hover { background: var(--bg-app); }
.rd-fila.anulado { opacity: 0.42; text-decoration: line-through; }
.rd-fila-hora { font-size: 0.62rem; color: var(--text-muted); font-weight: 600; }
.rd-fila-chip {
    color: #fff;
    font-size: 0.52rem;
    font-weight: 800;
    border-radius: 5px;
    padding: 3px 0;
    text-align: center;
    letter-spacing: 0.02em;
}
.rd-fila-doc { font-family: monospace; font-size: 0.68rem; font-weight: 700; color: var(--primary); }
/* El renglon del libro: una linea con el concepto, o —en las facturas— la
   lista de lo que se vendio en letra chica, cada uno tocable para su kardex. */
.rd-fila-texto {
    overflow: hidden;
    color: var(--text-main);
}
.rd-fila-linea {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.rd-fila-prods {
    display: block;
    white-space: normal;
    line-height: 1.35;
}
.rd-fila-sub {
    display: block;
    font-size: 0.58rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rd-prod-chip {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--text-main);
    border-bottom: 1px dotted var(--text-muted);
    cursor: pointer;
    margin-right: 9px;
}
.rd-prod-chip:hover { color: var(--primary); border-bottom-color: var(--primary); }
.rd-prod-mas {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    border-radius: 6px;
    padding: 1px 6px;
    cursor: pointer;
}
.rd-prod-mas:hover { background: color-mix(in srgb, var(--primary) 20%, transparent); }
.rd-fila-hora { white-space: nowrap; }
.rd-fila-entrada, .rd-fila-salida, .rd-fila-saldo {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.rd-fila-entrada { color: var(--primary); font-weight: 700; }
.rd-fila-salida { color: #dc2626; font-weight: 700; }
.rd-fila-saldo { font-weight: 800; color: var(--text-main); }

.rd-fila-inicial {
    background: var(--bg-app);
    cursor: default;
    font-style: italic;
    color: var(--text-muted);
}
.rd-fila-inicial:hover { background: var(--bg-app); }
.rd-fila-total {
    position: sticky;
    bottom: 0;
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-card));
    border-top: 2px solid var(--primary);
    border-bottom: none;
    cursor: default;
    font-weight: 800;
}
.rd-fila-total:hover { background: color-mix(in srgb, var(--primary) 8%, var(--bg-card)); }
.rd-fila-total .rd-fila-saldo { color: var(--primary); font-size: 0.85rem; }

/* --- Formulario de gasto por área --- */
.rd-gasto-modal { max-width: 620px; }
.rd-areas-btns {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}
.rd-area-btn {
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    border-radius: 12px;
    padding: 9px 2px;
    font-family: inherit;
    font-size: 0.64rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    transition: all 0.15s;
}
.rd-area-btn i { font-size: 0.95rem; }
.rd-area-btn:hover { border-color: var(--primary); color: var(--primary); }
.rd-area-btn.activa {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--primary) 55%, transparent);
}

.rd-soporte-btns, .rd-pago-btns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.rd-pago-btns { grid-template-columns: 1fr 1fr; }
.rd-soporte-btn, .rd-pago-btn {
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    color: var(--text-main);
    border-radius: 12px;
    padding: 9px 6px;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    transition: all 0.15s;
}
.rd-soporte-btn strong { font-size: 0.72rem; font-weight: 800; }
.rd-soporte-btn small { font-size: 0.58rem; color: var(--text-muted); }
.rd-pago-btn {
    flex-direction: row;
    justify-content: center;
    gap: 7px;
    font-size: 0.76rem;
    font-weight: 700;
}
.rd-soporte-btn:hover, .rd-pago-btn:hover { border-color: var(--primary); }
.rd-soporte-btn.activa, .rd-pago-btn.activa {
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-card));
    border-color: var(--primary);
    color: var(--primary);
}
.rd-soporte-btn.activa small { color: var(--primary); }

.rd-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.72rem;
    color: var(--text-muted);
    cursor: pointer;
}
.rd-check input { width: 15px; height: 15px; cursor: pointer; }

/* --- Visor de la contabilidad de un documento --- */
.rd-asiento-modal { max-width: 620px; }
.rd-asiento-cab {
    background: var(--bg-app);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.rd-asiento-doc {
    font-family: monospace;
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--primary);
}
.rd-asiento-fecha { font-size: 0.76rem; color: var(--text-muted); }
.rd-asiento-anulado {
    background: #dc2626;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
}
.rd-asiento-concepto {
    flex-basis: 100%;
    font-size: 0.8rem;
    color: var(--text-main);
    line-height: 1.4;
}

.rd-asiento-tabla {
    display: flex;
    flex-direction: column;
    max-height: 44vh;
    overflow-y: auto;
}
.rd-asiento-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px 104px;
    gap: 8px;
    align-items: center;
    padding: 8px 6px;
    border-bottom: 1px dashed var(--border);
    font-size: 0.78rem;
}
.rd-asiento-cabtabla {
    position: sticky;
    top: 0;
    background: var(--bg-card);
    border-bottom: 1.5px solid var(--border);
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.rd-asiento-cuenta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rd-asiento-cuenta strong { font-family: monospace; color: var(--primary); }
.rd-asiento-cuenta small {
    font-size: 0.66rem;
    color: var(--text-muted);
    font-style: italic;
}
.rd-asiento-fila .num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.rd-asiento-fila .debe { color: #2563eb; }
.rd-asiento-fila .haber { color: var(--primary); }
.rd-asiento-totales {
    position: sticky;
    bottom: 0;
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-card));
    border-top: 2px solid var(--primary);
    border-bottom: none;
    font-weight: 800;
}
.rd-asiento-totales i { color: var(--primary); }

@media (max-width: 760px) {
    /* En el celular se aprieta todo para que al concepto —que es donde van los
       productos— le quede el ancho que necesita para leerse. */
    .rd-libro-cab, .rd-fila {
        grid-template-columns: 38px 44px minmax(0, 1fr) 74px 74px;
        gap: 5px;
        padding: 6px 6px;
    }
    .rd-fila-chip { font-size: 0.46rem; padding: 2px 0; }
    .rd-prod-chip { font-size: 0.62rem; margin-right: 7px; }
    .rd-fila-entrada, .rd-fila-salida { font-size: 0.7rem; }

    /* El detalle de un dia en el celular va en dos renglones: arriba la hora,
       el tipo, el numero y las cifras; abajo el concepto (o los productos) con
       todo el ancho. Asi los nombres se leen y la fila queda mas baja que
       cuando cada palabra caia en una linea distinta. */
    .rd-fila:not(.rd-fila-dia) {
        grid-template-columns: 42px 46px minmax(0, 1fr) 76px 76px;
        row-gap: 2px;
    }
    .rd-fila:not(.rd-fila-dia) .rd-fila-hora { grid-area: 1 / 1; }
    .rd-fila:not(.rd-fila-dia) .rd-fila-chip { grid-area: 1 / 2; }
    .rd-fila:not(.rd-fila-dia) .rd-fila-doc { grid-area: 1 / 3; display: block; }
    .rd-fila:not(.rd-fila-dia) .rd-fila-entrada { grid-area: 1 / 4; }
    .rd-fila:not(.rd-fila-dia) .rd-fila-salida { grid-area: 1 / 5; }
    .rd-fila:not(.rd-fila-dia) .rd-fila-texto { grid-area: 2 / 1 / 3 / 6; }
    .rd-fila:not(.rd-fila-dia) .rd-fila-titulo { grid-area: 1 / 1 / 2 / 4; }
    /* El encabezado acompaña: Hora, Tipo, N°, Entra y Sale. "Concepto" sobra
       porque ahora va en el renglón de abajo, con todo el ancho. */
    .rd-libro-cab:not(.rd-dia-cab) {
        grid-template-columns: 42px 46px minmax(0, 1fr) 76px 76px;
    }
    .rd-libro-cab:not(.rd-dia-cab) span:nth-child(3) { display: block; }
    .rd-libro-cab:not(.rd-dia-cab) span:nth-child(4) { display: none; }
    .rd-fila-doc, .rd-libro-cab span:nth-child(3) { display: none; }
    .rd-fila-saldo, .rd-libro-cab span:last-child { display: none; }
    .rd-fila-titulo { grid-column: 1 / 4; }
    /* El resumen por dias en el celular: caben las tres cifras (entra, sale y
       como va quedando la caja), que es lo que se viene a mirar. Lo unico que
       se cae es el conteo de ventas del dia, que se ve al abrir el dia. */
    .rd-dia-cab, .rd-fila.rd-fila-dia {
        grid-template-columns: minmax(0, 1fr) 72px 72px 78px;
        gap: 5px;
    }
    .rd-dia-nombre { font-size: 0.7rem; }
    .rd-dia-nombre small { display: none; }
    .rd-fila-dia .rd-fila-entrada,
    .rd-fila-dia .rd-fila-salida,
    .rd-fila-dia .rd-fila-saldo { display: block; font-size: 0.68rem; }
    /* Los titulos 3 y 4 los esconde la regla del cuaderno normal de arriba;
       aqui son "Sale" y "Queda" y tienen que verse. */
    .rd-libro-cab.rd-dia-cab span { display: block; font-size: 0.52rem; }
    .rd-barra { flex-wrap: wrap; gap: 8px; }
    .rd-modo-btn { margin-left: 0; }
    .rd-areas-btns { grid-template-columns: repeat(3, 1fr); }
    .rd-soporte-btns { grid-template-columns: 1fr; }

    /* --- Celular: que el informe entero se pueda repasar de una pasada --- */
    .rd-tarjetas { grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 8px; }
    .rd-tarjeta { padding: 8px 10px; border-radius: 12px; }
    .rd-tarjeta-icono { display: none; }
    .rd-tarjeta-cifra { font-size: 1.15rem; }
    .rd-tarjeta-ver { display: none; }
    .rd-cols { grid-template-columns: 1fr; gap: 8px; }
    .rd-panel { padding: 9px 11px; }
    /* Nada de cuadros con desplazamiento propio dentro de la pagina: en el
       celular eso se pelea con el dedo. La pagina entera baja de corrido. */
    .rd-libro { max-height: none; overflow: visible; }
    /* Sin cuadro con desplazamiento propio, el encabezado y la fila de totales
       no se pueden quedar pegados: taparian los renglones. */
    .rd-libro-cab, .rd-fila-total { position: static; }
    /* La barra de fechas se acomoda en varias lineas en vez de empujar la
       pagina a lo ancho (que dejaba las cifras cortadas en el celular). */
    .rd-fecha { flex-wrap: wrap; width: 100%; }
    .rd-fecha input[type="date"] { padding: 6px 8px; font-size: 0.82rem; flex: 1 1 120px; min-width: 0; }
    /* El desglose de la forma de pago en el celular */
    .rd-mp-fila { grid-template-columns: 60px minmax(0, 1fr) 84px; gap: 6px; }
    .rd-metodo-lista { margin-left: 8px; padding-left: 7px; max-height: none; }
    .rd-nav, .rd-hoy { padding: 6px 9px; font-size: 0.72rem; }
    #rd-modo-rango .rd-hoy { flex: 1 1 auto; }
    .rd-modo-btn { width: 100%; }
}

/* Tarjetas clicables y su detalle */
.rd-clicable { cursor: pointer; position: relative; transition: transform 0.15s, box-shadow 0.15s; }
.rd-clicable:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px -8px rgba(15, 23, 42, 0.18);
    border-color: var(--primary);
}
.rd-tarjeta-ver {
    margin-top: 8px;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--primary);
    opacity: 0;
    transition: opacity 0.15s;
    display: flex;
    align-items: center;
    gap: 5px;
}
.rd-tarjeta.destacada .rd-tarjeta-ver { color: #fff; }
.rd-clicable:hover .rd-tarjeta-ver { opacity: 1; }

.rd-detalle-modal { max-width: 560px; }
.rd-formula {
    background: var(--bg-app);
    border-radius: 14px;
    padding: 6px 14px;
}
.rd-formula-fila {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    font-size: 0.85rem;
    color: var(--text-main);
    border-bottom: 1px dashed var(--border);
}
.rd-formula-fila:last-child { border-bottom: none; }
.rd-formula-fila strong { font-size: 0.95rem; white-space: nowrap; }
.rd-formula-fila.total {
    border-top: 2px solid var(--primary);
    font-weight: 800;
}
.rd-formula-fila.total strong { font-size: 1.15rem; color: var(--primary); }
.rd-formula-fila.rojo strong, .rojo { color: #dc2626; }
.verde { color: var(--primary); }

.rd-detalle-nota {
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
}
.rd-aviso-abonos {
    background: color-mix(in srgb, var(--primary) 7%, transparent);
    border-left: 3px solid var(--primary);
    border-radius: 12px;
    padding: 11px 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.rd-aviso-abonos h5 {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
}
.rd-aviso-abonos p {
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--text-main);
    margin: 0;
}

.rd-detalle-sub {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 4px 0 0;
}
.rd-detalle-lista {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 34vh;
    overflow-y: auto;
}
.rd-detalle-lista .rd-doc { grid-template-columns: 44px 70px 1fr auto; }

.rd-prod-fila {
    display: grid;
    grid-template-columns: 1fr 40px 76px 76px 80px;
    gap: 6px;
    align-items: center;
    padding: 6px 8px;
    font-size: 0.74rem;
    border-radius: 8px;
}
.rd-prod-fila:nth-child(even) { background: var(--bg-app); }
.rd-prod-fila.rd-prod-cab {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: transparent;
}
.rd-prod-fila span:nth-child(n+2), .rd-prod-fila strong { text-align: right; white-space: nowrap; }
.rd-prod-nombre {
    text-align: left !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (max-width: 980px) {
    .rd-tarjetas { grid-template-columns: 1fr 1fr; }
    .rd-cols { grid-template-columns: 1fr; }
}

.pos2-confirmar {
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: #fff;
    padding: 15px;
    font-size: 1rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--primary) 70%, transparent);
    transition: transform 0.15s, opacity 0.2s;
}
.pos2-confirmar:hover { transform: translateY(-1px); }
.pos2-confirmar.inactivo { opacity: 0.4; pointer-events: none; }
.pos2-confirmar.cargando { opacity: 0.6; pointer-events: none; }

.pos2-secundario {
    border: 1.5px solid var(--border);
    border-radius: 14px;
    background: var(--bg-card);
    color: var(--text-main);
    padding: 14px;
    font-size: 0.95rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: border-color 0.15s;
}
.pos2-secundario:hover { border-color: var(--primary); color: var(--primary); }

/* Exito */
.pos2-exito { text-align: center; align-items: center; }
.pos2-check {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: #fff;
    font-size: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 30px -8px color-mix(in srgb, var(--primary) 60%, transparent);
    animation: pos2-check 0.45s cubic-bezier(0.18, 1.6, 0.4, 1);
}
@keyframes pos2-check {
    0% { transform: scale(0.2); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.pos2-exito h3 { font-size: 1.3rem; font-weight: 800; color: var(--text-main); }
.pos2-exito-num { color: var(--text-muted); font-size: 0.85rem; }
.pos2-exito-total { font-size: 2.2rem; font-weight: 800; color: var(--text-main); letter-spacing: -0.02em; }
.pos2-exito-cambio {
    background: var(--bg-app);
    border-radius: 12px;
    padding: 10px 18px;
    font-size: 1rem;
}
.pos2-exito-cambio strong { color: var(--primary); font-size: 1.2rem; }
.pos2-exito-botones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    margin-top: 6px;
}

/* Lista de clientes */
.pos2-cliente-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    max-height: 46vh;
}
.pos2-cliente-item {
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    border-radius: 12px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    transition: border-color 0.13s;
}
.pos2-cliente-item small { margin-left: auto; color: var(--text-muted); font-weight: 500; }
.pos2-cliente-item i { color: var(--primary); }
.pos2-cliente-item:hover { border-color: var(--primary); }
.pos2-cliente-item.generico { background: color-mix(in srgb, var(--primary) 7%, var(--bg-card)); }

/* --- Responsive: en pantallas angostas el ticket va abajo --- */
@media (max-width: 980px) {
    .pos2-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        height: auto;
        min-height: 0;
    }
    .pos2-grid {
        max-height: 52vh;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        grid-auto-rows: 200px;
    }
    .pos2-card { height: 200px; }
    .pos2-ticket { order: 2; }
    .pos2-lineas { max-height: 30vh; }
    .pos2-total-row strong { font-size: 1.5rem; }
}

/* --- Modo pantalla completa: el POS se factura en PC y usa todo el monitor.
       changeView le pone/quita la clase pos2-max al body al entrar/salir. --- */
#view-taquilla.view-panel {
    max-width: none;
}

body.pos2-max .top-header,
body.pos2-max #document-tabs-bar {
    display: none !important;
}
/* La pantalla del POS se arma como cadena flexible que llena EXACTAMENTE la
   ventana: nada de calculos con vh que se queden cortos y obliguen a bajar
   para ver las formas de pago. */
body.pos2-max .main-content {
    padding: 12px 16px;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}
body.pos2-max .content-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
body.pos2-max #view-taquilla.view-panel.active {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
body.pos2-max .pos2-layout {
    flex: 1;
    min-height: 0;
    height: auto;
}

/* Pantallas de poca altura (portatiles): el resumen se compacta para que el
   boton COBRAR y los pagos siempre queden a la vista */
@media (max-height: 740px) {
    .pos2-ticket-head { padding: 10px 14px; }
    .pos2-resumen { gap: 7px; padding: 10px 12px 12px; }
    .pos2-total-row strong { font-size: 1.6rem; }
    .pos2-pago { padding: 6px 4px; }
    .pos2-pago i { font-size: 0.9rem; }
    .pos2-cobrar { padding: 13px 16px; }
}

.pos2-toolbar-fila {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.pos2-toolbar-fila .pos2-search-box { flex: 1; }

.pos2-salir {
    flex: 0 0 auto;
    width: 52px;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    color: var(--text-main);
    border-radius: 14px;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: all 0.15s;
}
.pos2-salir:hover { border-color: var(--primary); color: var(--primary); }

/* Monitores anchos: tarjetas, ticket y cifras mas grandes */
@media (min-width: 1400px) {
    .pos2-layout { grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; }
    .pos2-grid { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 14px; grid-auto-rows: 268px; }
    .pos2-card { height: 268px; }
    .pos2-card-nombre { font-size: 0.88rem; }
    .pos2-card-precio { font-size: 1.2rem; }
    .pos2-total-row strong { font-size: 2.3rem; }
    .pos2-cobrar { padding: 18px 20px; font-size: 1.15rem; }
    .pos2-cobrar-total { font-size: 1.35rem; }
    .pos2-linea-nombre { font-size: 0.85rem; }
}

/* En telefono, el modo pantalla completa no encierra el scroll: la pagina
   se desplaza normal con el ticket abajo */
@media (max-width: 980px) {
    body.pos2-max .main-content {
        height: auto;
        max-height: none;
        overflow: visible;
    }
    body.pos2-max .content-body,
    body.pos2-max #view-taquilla.view-panel.active {
        display: block;
    }
    body.pos2-max .pos2-layout { height: auto; }
}

/* ==========================================================================
   GASTOS PROGRAMADOS

   El color es ambar y no el verde azulado de los encargos a proposito: un
   encargo es plata que entra, un gasto programado es plata que sale y que casi
   siempre viene con atraso. Que no se confundan de un vistazo.
   ========================================================================== */
.gp-zona { margin-bottom: 4px; }
.gp-cargando { padding: 26px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* Lo que se le debe a un acreedor. Va arriba del todo y en rojo porque es
   plata ajena que lleva tiempo esperando: el arriendo del almacén llegó a
   diez millones sin que la pantalla lo dijera. */
.gp-deuda {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: #fef2f2; border: 1.5px solid #fca5a5; border-left: 4px solid #b91c1c;
    border-radius: 9px; padding: 12px 16px; margin-bottom: 12px;
}
.gp-deuda-quien { display: flex; align-items: center; gap: 11px; flex: 1 1 220px; }
.gp-deuda-quien i { color: #b91c1c; font-size: 17px; }
.gp-deuda-quien strong {
    display: block; font-family: var(--font-heading); font-size: 14.5px; color: #7f1d1d;
}
.gp-deuda-quien em { font-size: 12px; color: #9f5a5a; font-style: normal; }
.gp-deuda-plata {
    font-family: var(--font-heading); font-size: 19px; font-weight: 700; color: #b91c1c;
    font-variant-numeric: tabular-nums;
}
.gp-fila-debe {
    display: block; font-size: 10.5px; color: #b91c1c; font-weight: 600; margin-top: 2px;
}

.gp-cinta {
    display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
    background: #fffbeb; border: 1.5px solid #fcd34d; border-left: 4px solid #b45309;
    border-radius: 9px; padding: 11px 16px; margin-bottom: 12px;
    font-family: var(--font-heading); font-size: 14px; color: #78350f;
}
.gp-cinta-roja { background: #fef2f2; border-color: #fca5a5; border-left-color: #dc2626; color: #7f1d1d; }
.gp-cinta-alerta {
    margin-left: 10px; background: #dc2626; color: #fff; padding: 2px 9px;
    border-radius: 999px; font-size: 11px; font-weight: 700;
}
.gp-cinta-plata { font-family: var(--font-mono, monospace); font-weight: 700; font-size: 15px; }
.gp-cinta-plata em { font-style: normal; font-size: 10.5px; font-weight: 500; opacity: .7; display: block; text-align: right; }

.gp-tarjetas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }

.gp-tarjeta {
    background: #fff; border: 1px solid var(--border); border-top: 3px solid #94a3b8;
    border-radius: 10px; padding: 13px 15px 12px;
    box-shadow: 0 1px 3px rgba(15,23,42,.05);
    display: flex; flex-direction: column; gap: 10px;
}
.gp-tarjeta.gp-grave    { border-top-color: #dc2626; }
.gp-tarjeta.gp-atrasado { border-top-color: #ea580c; }
.gp-tarjeta.gp-hoy      { border-top-color: #b45309; }
.gp-tarjeta.gp-proximo  { border-top-color: #0d9488; }

.gp-t-cabeza { display: flex; align-items: flex-start; gap: 11px; }
.gp-t-icono {
    width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center;
    background: #fffbeb; color: #b45309; font-size: 15px;
}
.gp-t-nombre { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gp-t-nombre strong { font-family: var(--font-heading); font-size: 14.5px; color: #0f172a; line-height: 1.2; }
.gp-t-nombre span { font-size: 11.5px; color: var(--text-muted); }
.gp-t-nombre .gp-casa { font-style: normal; color: #7c3aed; font-weight: 600; }
.gp-t-cuando {
    flex: none; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
    white-space: nowrap; background: #f1f5f9; color: #475569;
}
.gp-c-grave    { background: #fee2e2; color: #991b1b; }
.gp-c-atrasado { background: #ffedd5; color: #9a3412; }
.gp-c-hoy      { background: #fef3c7; color: #92400e; }
.gp-c-proximo  { background: #ccfbf1; color: #0f766e; }

.gp-t-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; }
.gp-t-datos > div { display: flex; flex-direction: column; min-width: 0; }
.gp-t-datos span { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.gp-t-datos strong { font-size: 12.5px; color: #0f172a; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.gp-t-nota {
    background: #fffbeb; border: 1px dashed #fcd34d; border-radius: 6px;
    padding: 6px 10px; font-size: 11.5px; color: #78350f; line-height: 1.35;
}
.gp-t-nota i { margin-right: 5px; color: #b45309; }

.gp-t-botones { display: flex; gap: 7px; flex-wrap: wrap; }
.gp-btn-pagar {
    background-color: #b45309 !important; border-color: #b45309 !important; color: #fff !important;
    padding: 7px 14px; font-size: 12.5px; font-weight: 600; flex: 1; min-width: 150px;
}
.gp-btn-pagar:hover { background-color: #92400e !important; }
.gp-btn-chico { padding: 7px 11px; font-size: 12px; }
.gp-btn-omitir { color: #92400e !important; border-color: #fcd34d !important; }
.gp-btn-mini { background-color: #b45309 !important; border-color: #b45309 !important; color: #fff !important; padding: 4px 11px; font-size: 11.5px; }
.gp-btn-nuevo { background-color: #b45309 !important; border-color: #b45309 !important; color: #fff !important; padding: 6px 14px; font-size: 12.5px; }

.gp-vacio {
    display: flex; align-items: center; gap: 14px;
    background: #fff; border: 1px dashed var(--border); border-radius: 10px;
    padding: 22px 24px; color: var(--text-muted); font-size: 13.5px; line-height: 1.5;
}
.gp-vacio i { font-size: 24px; flex: none; }
.gp-vacio em { font-style: normal; font-size: 12px; }
.gp-al-dia { background: #f0fdfa; border-color: #5eead4; color: #115e59; }
.gp-al-dia i { color: #0d9488; }
.gp-vacio.gp-error { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.gp-vacio-chico { padding: 14px; text-align: center; color: var(--text-muted); font-size: 12.5px; }

.gp-cabecera-fichas {
    display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
    margin: -12px -12px 14px -12px !important; padding: 11px 16px !important;
    background: #b45309 !important; border-bottom: 1.5px solid #92400e !important;
    border-top-left-radius: 6px; border-top-right-radius: 6px; box-sizing: border-box;
}
.gp-cabecera-fichas h3 { margin: 0; font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: #fff !important; }
.gp-cabecera-fichas .gp-btn-nuevo { background-color: #fff !important; border-color: #fff !important; color: #92400e !important; }

/* LA TABLA, APRETADA. Con el relleno general de `.data-table td` -16px por
   20px- cada renglón medía 87px y siete gastos ya no cabían en un portátil:
   había que desplazarse para buscar uno. Aquí se recorta a la mitad justa.

   Va marcado con `.gp-tabla` a propósito y NO se toca `.data-table`, que la
   usan todas las pantallas del sistema. Si algún día se quiere apretar todo,
   este es el molde. */
.gp-tabla th { padding: 7px 10px; font-size: 10.5px; letter-spacing: .04em; }
.gp-tabla td {
    padding: 6px 10px;
    font-size: 12.5px;
    line-height: 1.32;
    vertical-align: middle;
}
/* Los renglones de apoyo -la referencia, el nombre de la cuenta, el promedio-
   son los que estiraban la fila a dos y tres líneas. Se dejan, porque ayudan a
   reconocer el gasto, pero pegados. */
.gp-tabla .gp-fila-ref,
.gp-tabla .gp-cuenta span,
.gp-tabla .gp-promedio,
.gp-tabla .gp-fila-debe { font-size: 10px; line-height: 1.25; margin-top: 0; }
.gp-tabla .gp-cuenta { font-size: 11px; line-height: 1.25; }
.gp-tabla .gp-fila-icono { margin-right: 5px; width: 14px; }
.gp-tabla .gp-etiqueta-casa,
.gp-tabla .gp-etiqueta-off,
.gp-tabla .gp-etiqueta-debe { font-size: 9.5px; padding: 1px 5px; }

.gp-tabla tbody tr { cursor: pointer; }
/* El resaltado al pasar por encima importa más cuando las filas son bajas:
   es lo que evita perder el renglón que se está mirando. */
.gp-tabla tbody tr:hover { background: #fffbeb; }
.gp-tabla .gp-apagada { opacity: .5; }
.gp-fila-icono { color: #b45309; margin-right: 7px; width: 16px; text-align: center; }
.gp-fila-ref { display: block; font-size: 10.5px; color: var(--text-muted); margin-left: 23px; }
.gp-etiqueta-casa, .gp-etiqueta-off, .gp-etiqueta-debe {
    display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 999px;
    font-size: 10px; font-weight: 700; vertical-align: middle;
}
.gp-etiqueta-casa { background: #f3e8ff; color: #6b21a8; }
.gp-etiqueta-off  { background: #e2e8f0; color: #475569; }
.gp-etiqueta-debe { background: #fee2e2; color: #991b1b; }
.gp-cuenta { font-family: var(--font-mono, monospace); font-size: 11.5px; }
.gp-cuenta span { display: block; font-family: var(--font-main, sans-serif); font-size: 10.5px; color: var(--text-muted); }
.gp-promedio { display: block; font-size: 10.5px; color: #0f766e; font-weight: 600; }
.gp-nunca { color: #b45309; font-style: normal; font-size: 11.5px; }
.gp-chevron { color: var(--text-muted); font-size: 11px; }

/* --- las ventanas ---
 *
 * Columna flexible y atada a la pantalla, a proposito. Estas ventanas son
 * altas -la ficha lleva once clases de gasto y ocho campos- y `.modal-content`
 * no trae tope de altura: la fila de botones se salia por debajo del borde.
 * Ahi el clic no llegaba al boton sino al fondo, y el fondo CIERRA la ventana
 * (ver el manejador de app.js que mira si el target es `.modal.active`).
 *
 * Desde fuera se veia como que «Programar no hace nada y ademas me saca del
 * cuadro». Con esto la cabecera y los botones quedan fijos y lo unico que se
 * desplaza es el cuerpo.
 */
.gp-modal {
    padding: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Tope propio para las pantallas anchas. En las angostas manda el
       `max-height: 92vh !important` de `.modal-content` que ya trae la hoja,
       y esta regla no se aplica: se deja porque sin ella, en un monitor alto,
       la ficha crece hasta pegarse a los bordes. */
    max-height: min(90vh, calc(100vh - 32px));
}
.gp-modal-cabeza { background: #b45309; color: #fff; padding: 15px 20px 13px; flex: 0 0 auto; }
.gp-modal-cabeza.gp-cabeza-aviso { background: #64748b; }
.gp-modal-cabeza h3 { margin: 0 0 3px; font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: #fff; }
.gp-modal-cabeza p { margin: 0; font-size: 12px; opacity: .92; }
.gp-modal-cabeza .gp-etiqueta-casa, .gp-modal-cabeza .gp-etiqueta-off { background: rgba(255,255,255,.22); color: #fff; }
/* `min-height: 0` no es adorno: sin el, un hijo flexible se niega a encogerse
   por debajo de su contenido y vuelve a empujar los botones fuera. */
.gp-modal-cuerpo { padding: 16px 20px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.gp-modal-cuerpo .form-group { margin-bottom: 13px; }
.gp-modal-cuerpo small { display: block; margin-top: 3px; font-size: 11px; color: var(--text-muted); line-height: 1.35; }
.gp-modal-cuerpo label em { font-style: normal; color: var(--text-muted); font-weight: 400; font-size: 11.5px; }
.gp-modal-botones {
    display: flex; justify-content: flex-end; gap: 9px; flex-wrap: wrap;
    flex: 0 0 auto;
    padding: 12px 20px; border-top: 1px solid var(--border); background: #f8fafc;
}
.gp-parrafo { font-size: 12.5px; color: #334155; line-height: 1.5; margin: 0 0 13px; }

.gp-explica {
    background: #fffbeb; border: 1px dashed #fcd34d; border-radius: 7px;
    padding: 9px 12px; font-size: 12px; color: #78350f; line-height: 1.45;
}
.gp-explica i { color: #b45309; margin-right: 5px; }

.gp-clases { display: grid; gap: 7px; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
.gp-clase {
    display: flex; align-items: center; gap: 8px; text-align: left;
    padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
    background: #fff; cursor: pointer; font-size: 12px; color: #334155;
    font-family: var(--font-main, sans-serif); transition: all .12s;
}
.gp-clase:hover { border-color: #fcd34d; background: #fffbeb; }
.gp-clase i { color: #b45309; width: 15px; text-align: center; flex: none; }
.gp-clase span { flex: 1; min-width: 0; }
.gp-clase em { font-style: normal; font-size: 9.5px; background: #f3e8ff; color: #6b21a8; padding: 1px 5px; border-radius: 999px; }
.gp-clase-on { border-color: #b45309; background: #fef3c7; font-weight: 600; box-shadow: inset 0 0 0 1px #b45309; }

.gp-ficha-datos { display: grid; gap: 9px 16px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: 13px; }
.gp-ficha-datos > div { display: flex; flex-direction: column; }
.gp-ficha-datos span { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.gp-ficha-datos strong { font-size: 13px; color: #0f172a; }
.gp-ficha-datos em { font-style: normal; font-size: 10.5px; color: var(--text-muted); }

.gp-subtitulo { margin: 16px 0 8px; font-family: var(--font-heading); font-size: 13px; color: #0f172a; }
.gp-historia { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.gp-h-fila {
    display: grid; grid-template-columns: 1.3fr .8fr 1fr 1.2fr auto; gap: 10px;
    align-items: center; padding: 8px 12px; border-bottom: 1px solid #f1f5f9; font-size: 12px;
}
.gp-h-fila:last-child { border-bottom: none; }
.gp-h-fila:nth-child(odd) { background: #fafafa; }
.gp-h-mes { font-weight: 600; color: #0f172a; }
.gp-h-estado { font-size: 11px; font-weight: 700; }
.gp-h-valor { font-family: var(--font-mono, monospace); text-align: right; }
.gp-h-valor em { font-style: normal; color: var(--text-muted); font-size: 11px; }
.gp-h-doc { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-h-doc a { color: #b45309; font-weight: 600; }
.gp-h-doc em { font-style: italic; color: var(--text-muted); }

/* --- la cuenta corriente con el arrendador --- */
.gp-modo { display: flex; flex-direction: column; gap: 4px; }
.gp-modo-op {
    display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px;
    border: 1px solid transparent; border-radius: 8px; cursor: pointer;
}
.gp-modo-op:hover { background: #fffbeb; border-color: #fcd34d; }
.gp-modo-op:has(input:checked) { background: #fef3c7; border-color: #b45309; }
.gp-modo-op input { margin-top: 3px; width: 15px; height: 15px; flex: none; cursor: pointer; }
.gp-modo-op strong { display: block; font-size: 12.5px; color: #0f172a; }
.gp-modo-op em { font-style: normal; font-size: 11px; color: var(--text-muted); line-height: 1.35; }

.gp-deuda {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
    background: #fef2f2; border: 1.5px solid #fca5a5; border-left: 4px solid #b91c1c;
    border-radius: 10px; padding: 14px 18px; margin-bottom: 14px;
}
.gp-deuda.gp-deuda-al-dia { background: #f0fdfa; border-color: #5eead4; border-left-color: #0d9488; }
.gp-deuda-cifra span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #7f1d1d; }
.gp-deuda.gp-deuda-al-dia .gp-deuda-cifra span { color: #115e59; }
.gp-deuda-cifra strong {
    font-family: var(--font-mono, monospace); font-size: 27px; font-weight: 700; color: #b91c1c; line-height: 1.1;
}
.gp-deuda.gp-deuda-al-dia .gp-deuda-cifra strong { color: #0d9488; }
.gp-deuda-cuentas { display: flex; align-items: center; gap: 12px; }
.gp-deuda-cuentas > div { display: flex; flex-direction: column; }
.gp-deuda-cuentas span { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.gp-deuda-cuentas strong { font-family: var(--font-mono, monospace); font-size: 13.5px; color: #0f172a; }
.gp-menos { font-size: 17px; color: var(--text-muted); align-self: center; }

.gp-sin-causar {
    display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
    background: #fffbeb; border: 1px dashed #fcd34d; border-radius: 8px;
    padding: 10px 14px; margin-bottom: 14px; font-size: 12px; color: #78350f; line-height: 1.4;
}
.gp-sin-causar i { color: #b45309; font-size: 15px; flex: none; }
.gp-sin-causar span { flex: 1; min-width: 190px; }

.gp-dos-columnas { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.gp-fila-mes, .gp-fila-abono { grid-template-columns: 1.2fr .9fr 1fr; }
.gp-fila-abono.gp-anulado { opacity: .5; text-decoration: line-through; }
.gp-fila-abono.gp-anulado em { font-style: normal; color: #b91c1c; font-size: 10px; text-decoration: none; }
.gp-h-obs { padding: 0 12px 7px 12px; font-size: 10.5px; color: var(--text-muted); font-style: italic; }
.gp-enlace {
    background: none; border: none; padding: 0; cursor: pointer;
    font-size: 10.5px; color: #b45309; text-decoration: underline; font-family: inherit;
}
@media (max-width: 640px) { .gp-dos-columnas { grid-template-columns: 1fr; } }

.gp-adelantar {
    margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: #f8fafc; border: 1px dashed var(--border); border-radius: 8px;
    padding: 10px 13px; font-size: 11.5px; color: var(--text-muted); line-height: 1.4;
}
.gp-adelantar i { color: #b45309; font-size: 15px; flex: none; }
.gp-adelantar span { flex: 1; min-width: 170px; }
.gp-adelantar div { display: flex; gap: 7px; align-items: center; }
.gp-adelantar input { padding: 5px 9px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; }

@media (max-width: 640px) {
    .gp-tarjetas { grid-template-columns: 1fr; }
    .gp-t-datos { grid-template-columns: 1fr; }
    .gp-h-fila { grid-template-columns: 1fr 1fr; gap: 4px 10px; }
}

/* --- LO PROPIO DEL CLUB: EL AREA ---
   En el ERP cada gasto es de una sucursal; aqui de un area, y el area se ve
   de un vistazo porque es lo que decide si la cuenta del club dice la verdad.
   Cada una con su color, los mismos de los informes por centro. */
.gp-etiqueta-area {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; white-space: nowrap;
    background: #e2e8f0; color: #475569;
}
.gp-etiqueta-area.gp-area-FUTBOL  { background: #dcfce7; color: #15803d; }
.gp-etiqueta-area.gp-area-PISCINA { background: #dbeafe; color: #1d4ed8; }
.gp-etiqueta-area.gp-area-KIOSCO  { background: #ffedd5; color: #c2410c; }
.gp-etiqueta-area.gp-area-SALON   { background: #f3e8ff; color: #7e22ce; }
.gp-etiqueta-area.gp-area-GENERAL { background: #e2e8f0; color: #475569; }
.gp-area { font-style: normal; font-weight: 600; color: #b45309; }
.gp-tabla .gp-etiqueta-area { font-size: 9.5px; padding: 1px 7px; }

/* La ficha del hub, en el ambar de los gastos. */
.doc-panel-gp {
    border-top: 6px solid #b45309 !important;
    background: linear-gradient(to bottom, #fffbeb 0%, #ffffff 120px) !important;
}
.doc-panel-gp .cashier-key-icon { background-color: rgba(180, 83, 9, .1); color: #b45309; }
.doc-panel-gp:hover .cashier-key-icon { background-color: #b45309 !important; color: #fff !important; }