/* 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
 *
 * Tres grupos, no dos, porque ahora entran empresas clientes y no solo las
 * dos de la casa:
 *
 *   .casa-only        Cosas que solo tienen sentido en las empresas del
 *                     dueno y llevan sus nombres escritos: la cuenta
 *                     corriente entre Importadora KyH y Bendita Sea. Un
 *                     cliente no las puede ver.
 *   .club-only        Del balneario: las reservas de cancha.
 *   .importadora-only Del giro de repuestos y de los canales en linea
 *                     -Mercado Libre, tienda web, marca, compatibilidad-.
 *                     Eso SI se le vende al cliente en el plan Pro, asi que
 *                     lo unico que se esconde es en el club.
 *
 * Antes eran dos reglas cruzadas -"en importadora esconde lo del club" y "en
 * club esconde lo de importadora"-: una empresa cliente no disparaba ninguna
 * de las dos y veia las cosas de las dos empresas de la casa. */
body:not([data-tenant="importadora"]) .casa-only { display: none !important; }
body:not([data-tenant="club"]) .club-only { display: none !important; }
body[data-tenant="club"] .importadora-only { display: none !important; }

/* Lo que no trae el plan del cliente.
 *
 * Cada trozo de pantalla que pertenece a un modulo lleva data-modulo en
 * index.html; app.js le pone al <body> una clase `sin-<modulo>` por cada uno
 * que su plan no incluye. Va con !important porque changeView() repinta las
 * pantallas y les devuelve el estilo en linea: un display:none puesto desde
 * JavaScript se pierde en cuanto el cliente entra al panel de documentos.
 *
 * Esto es solo la cara. El freno de verdad esta en el servidor -puente.js-,
 * que responde 402 a la ruta aunque alguien se salte la pantalla. */
body.sin-nomina                [data-modulo="nomina"],
body.sin-conciliacion_bancaria [data-modulo="conciliacion_bancaria"],
body.sin-canales_venta         [data-modulo="canales_venta"],
body.sin-api                   [data-modulo="api"],
body.sin-multimoneda           [data-modulo="multimoneda"] { 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);
}

/* Estas dos se venian usando en el HTML sin existir aqui -el boton del
   certificado, por ejemplo-, asi que salian con la pinta del boton base y no
   se distinguian de los demas. Se definen con color propio: el verde para lo
   que confirma y el ambar para lo que crea asientos contables. */
.btn-success { background-color: #16a34a; color: #ffffff; }
.btn-success:hover { background-color: #15803d; }

.btn-warning { background-color: #d97706; color: #ffffff; }
.btn-warning:hover { background-color: #b45309; }

.btn-sm { padding: 6px 12px; font-size: 0.8rem; }

.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;
}

/* La barra de "Ventas en Linea" lleva seis pestanas: sin permitir el salto de
   linea, en un portatil las dos ultimas se salen de la pantalla. */
.tabs-header.vo-tabs {
    flex-wrap: wrap;
    column-gap: 22px;
    row-gap: 0;
}

/* El contador de cada pestana: las que no tienen nada pendiente no lo enseñan,
   igual que la insignia del menu lateral. */
.vo-tab-badge {
    display: none;
    background-color: #ef4444;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    vertical-align: 2px;
    margin-left: 4px;
}

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

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

/* Las tres declaraciones dentro de "Impuestos" (IVA, Retenciones, ICA).
   Se ocultan igual que una .tab-content, pero con clase propia a proposito:
   switchOpReportTab recorre todos los .tab-content de la Ficha de Informes y
   apaga los que no son el suyo, asi que anidadas con esa clase se apagarian
   solas al entrar. Con .imp-panel quedan fuera de su alcance y las gobierna
   switchImpuestoTab. */
.imp-panel {
    display: none;
    animation: fadeIn 0.4s ease;
}

.imp-panel.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
   ========================================================================== */
/* ==========================================================================
   LAS FICHAS DEL TABLERO

   Empezaron siendo seis y ya son trece en Documentos y treinta en toda la
   aplicacion. Con el tamano de antes -columnas de 200px, icono de 50 y
   descripcion de tres renglones- el tablero de Documentos ocupaba cuatro
   filas y tocaba desplazarse para ver las ultimas.

   Se apretaron: mas columnas por fila, icono mas chico y la descripcion
   recortada a dos renglones. Ocupan poco mas de la mitad de alto y caben sin
   bajar. El aspecto es el mismo, solo que en pequeno.
   ========================================================================== */
.cashier-keypad {
    display: grid;
    /* 146px era demasiado apretado: a los usuarios no les gustó. Se devuelve
       parte del tamaño, no todo — con 200px las trece fichas de Documentos
       volvían a no caber en un portátil. */
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.cashier-key {
    background-color: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--border-radius-md);
    padding: 9px 10px 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: flex-start;
    gap: 3px;
    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: 38px;
    height: 38px;
    flex: none;
    border-radius: 50%;
    background-color: rgba(37, 99, 235, 0.08);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16.5px;
    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: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-main);
}

/* La descripcion se recorta a dos renglones. Es lo que mas alto ocupaba: hay
   fichas cuyo texto llega a tres y cuatro, y estiraba toda la fila. El texto
   completo queda en el title, por si alguien quiere leerlo entero. */
.cashier-key p {
    font-size: 10.8px;
    color: var(--text-muted);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cashier-key-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: var(--table-header);
    color: var(--primary);
    padding: 2px 6px;
    font-family: monospace;
    font-size: 9px;
    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: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    /* La factura de venta llega a siete botones cuando ya está contabilizada
       (los de enviar aparecen ahí). Sin esta línea el último se sale del
       recuadro en pantallas estrechas en vez de bajar a la fila siguiente. */
    flex-wrap: wrap;
}

/* Botones apretados a propósito. Con el tamaño de antes -13px de letra y 24px
   de aire a cada lado- los siete sumaban 1130px en una barra de 606 y caían en
   tres filas, que por sí solas ocupaban 168px de alto. Así caben en una. */
.doc-action-bar .btn {
    border-radius: var(--border-radius-sm);
    font-size: 11.5px;
    padding: 6px 8px;
    font-weight: 600;
    white-space: nowrap;
}

/* LA BARRA DE LA FACTURA, EN DOS GRUPOS
   A un lado lo que se hace con el documento que se está escribiendo; al otro,
   lo que se hace con la factura ya guardada y el botón de contabilizar. Sueltos
   en fila los siete se leían como un montón sin orden. Solo la factura de venta
   se reparte así; los demás documentos siguen alineados a la derecha. */
#view-facturacion .doc-action-bar {
    justify-content: flex-start;
    align-items: center;
    /* Sin hueco horizontal: a los dos grupos ya los separa el margen automático
       de abajo, y esos 6px eran justo los que dejaban a la FVE fuera de la
       primera fila. El hueco vertical sí se conserva, para cuando envuelva. */
    column-gap: 0;
    row-gap: 8px;
}

/* El segundo grupo se empuja a la derecha con un margen automático y no con
   space-between: si algún día los dos grupos no caben en la misma línea -por
   ejemplo con "Contabilizar y Transmitir", que es más ancho-, el de la derecha
   baja pero SIGUE pegado a la derecha. Con space-between se quedaría alineado
   a la izquierda en su propia línea, que se ve descolocado. */
#view-facturacion .doc-action-bar > .doc-action-grupo:last-child {
    margin-left: auto;
}

.doc-action-grupo {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

/* LA BARRA DE BOTONES NO SE BLOQUEA CON EL PASO 3
   El paso 3 se atenúa y se desactiva entero -opacity 0.3 y pointer-events:none-
   mientras no haya cliente y productos, y la barra de botones vive dentro de él.
   Eso dejaba los botones de enviar INERTES justo en el único momento en que
   hacen falta: al contabilizar, el formulario se vacía, el paso vuelve a
   bloquearse, y los tres quedaban encendidos pero sordos al ratón. Aquí se
   atenúa el CONTENIDO del paso y no el paso entero, así la barra se queda
   fuera del bloqueo. Los botones que no se pueden usar todavía ya avisan por su
   cuenta: los de enviar salen en gris y contestan que primero hay que
   contabilizar, y Contabilizar pide que se agregue un producto. */
#fac-step-3.locked,
#en-step-3.locked {
    opacity: 1;
    pointer-events: auto;
    user-select: auto;
}

#fac-step-3.locked > .doc-wizard-step-header,
#fac-step-3.locked > div:not(.doc-action-bar),
#en-step-3.locked > .doc-wizard-step-header,
#en-step-3.locked > div:not(.doc-action-bar) {
    opacity: 0.3;
    pointer-events: none;
    user-select: none;
}

/* Ver Factura, WhatsApp y Correo van dentro de su propio recuadro: se ve de un
   vistazo que son una misma cosa y que están esperando a que exista la factura. */
.doc-envio-grupo {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background-color: #f8fafc;
    transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

/* Ya hay factura guardada: el recuadro se enciende en verde suave. */
.doc-envio-grupo.listo {
    border-color: #86efac;
    background-color: #f0fdf4;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.10);
}

/* Apagados mientras no exista la factura. Se apagan con color y no con opacidad
   a propósito: el paso 3 ya viene atenuado al 30% mientras no hay productos, y
   una opacidad encima de otra los dejaría casi invisibles. */
.doc-action-bar .btn.btn-espera {
    background-color: #f1f5f9 !important;
    color: #94a3b8 !important;
    border-color: #e2e8f0 !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

/* Encendidos: cada uno con su color, ya sin el gris de la espera. */
#fac-btn-enviar-whatsapp:not(.btn-espera) {
    background-color: #25d366;
    border-color: #25d366;
    color: #fff;
}

#fac-btn-ver-factura:not(.btn-espera),
#fac-btn-enviar-correo:not(.btn-espera) {
    color: var(--accent);
    border-color: var(--accent);
}

#en-btn-whatsapp:not(.btn-espera) {
    background-color: #25d366;
    border-color: #25d366;
    color: #fff;
}

#en-btn-imprimir:not(.btn-espera) {
    color: #0d9488;
    border-color: #0d9488;
}

/* ==========================================================================
   ENCARGOS DE CLIENTES
   --------------------------------------------------------------------------
   Verde azulado, que no lo confunda con ningún documento contable: un encargo
   no es una venta ni un recibo, es una promesa. El listado va en tarjetas y no
   en tabla porque lo que importa de un vistazo -quién, qué pidió, cuánto dejó
   y si ya se pasó la fecha- no cabe cómodo en renglones.
   ========================================================================== */
.doc-panel-en {
    border-top: 6px solid #0d9488 !important;
    background: linear-gradient(to bottom, #f0fdfa 0%, #ffffff 120px) !important;
}
.doc-panel-en .cashier-key-icon {
    background-color: rgba(13, 148, 136, 0.1);
    color: #0d9488;
}
.doc-panel-en:hover .cashier-key-icon {
    background-color: #0d9488 !important;
    color: #ffffff !important;
}
.doc-panel-en .doc-number-pill { background-color: #0d9488 !important; }

.encargo-tarjeta {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.encargo-tarjeta[data-ficha] { cursor: pointer; }
.encargo-tarjeta:hover {
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}
/* Los botones y el teléfono conservan su propio cursor: si toda la tarjeta
   mostrara la manita, no se distinguiría qué abre la ficha y qué actúa. */
.encargo-tarjeta .btn, .encargo-tarjeta a { cursor: pointer; }

.encargo-tarjeta-cab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.encargo-num {
    font-family: monospace;
    font-weight: 800;
    font-size: 11.5px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 1px 6px;
    margin-right: 8px;
}

.encargo-tel {
    margin-left: 10px;
    font-size: 11.5px;
    color: #128c7e;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}
.encargo-tel:hover { text-decoration: underline; }
.encargo-tel-no { margin-left: 10px; font-size: 11px; color: var(--text-muted); font-style: italic; }

.encargo-estado {
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 10px;
    white-space: nowrap;
}

.encargo-tarjeta-cuerpo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.encargo-producto { font-size: 12.5px; font-weight: 600; flex: 1; min-width: 200px; }

.encargo-plata {
    display: flex;
    gap: 16px;
    font-size: 11.5px;
    white-space: nowrap;
    flex-wrap: wrap;
}
.encargo-plata strong { font-family: monospace; font-size: 12.5px; }

/* Lo acordado con el cliente es lo que salva al funcionario que atiende al día
   siguiente, así que se muestra siempre y no escondido tras un clic. */
.encargo-acordado {
    margin-top: 7px;
    background: rgba(255, 255, 255, 0.75);
    border-left: 2px solid #cbd5e1;
    padding: 5px 9px;
    font-size: 11.5px;
    color: #475569;
    font-style: italic;
    border-radius: 0 4px 4px 0;
}

.encargo-pie {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px dashed rgba(100, 116, 139, 0.25);
}

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

.encargo-botones { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.encargo-botones .btn {
    padding: 4px 9px;
    font-size: 11px;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    white-space: nowrap;
}

/* 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;
}

/* Ventas en Linea. Naranja porque es el unico libre en este teclado: el ambar
   de Mercado Libre (#f59e0b) ya lo usa el Catalogo PUC, y dos teclas del mismo
   color en la misma cuadricula se confunden de un vistazo. */
.key-ventas-online {
    border-top: 5px solid #f97316 !important;
    background: linear-gradient(to bottom, #fff7ed 0%, #ffffff 100px) !important;
}
.key-ventas-online .cashier-key-icon {
    background-color: rgba(249, 115, 22, 0.1);
    color: #f97316;
}
.key-ventas-online:hover .cashier-key-icon {
    background-color: #f97316 !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%;
}

/* DOCUMENTOS MAS BAJOS
   La factura de venta medía 830px de alto en una ventana de 914: se comía la
   pantalla entera y había que bajar para ver los botones. Aquí se aprieta el
   ritmo vertical de los formularios de documento -solo de esos, el resto de la
   aplicación no se toca- y se le devuelve al formulario el ancho que sobraba a
   la derecha: la tarjeta del resumen mide 167px de alto y se llevaba 378 de
   ancho, así que se le quita una parte para que la barra de botones quepa en
   una sola fila. */
/* El reparto solo se cambia en la factura de venta, que es la que tiene los
   siete botones. Los demás documentos se quedan como estaban: ahí no se ha
   medido nada y no hay motivo para moverlos. */
#view-facturacion .split-layout {
    grid-template-columns: 2.6fr 1fr;
}

#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;
}

#view-facturacion .doc-wizard-step,
#view-compras .doc-wizard-step,
#view-comprobante-egreso-doc .doc-wizard-step,
#view-recibo-caja-doc .doc-wizard-step,
#view-nomina-doc .doc-wizard-step,
#view-nota-contabilidad-doc .doc-wizard-step,
#view-devoluciones-doc .doc-wizard-step {
    margin-bottom: 8px;
}

#view-facturacion .form-group,
#view-compras .form-group,
#view-comprobante-egreso-doc .form-group,
#view-recibo-caja-doc .form-group,
#view-nomina-doc .form-group,
#view-nota-contabilidad-doc .form-group,
#view-devoluciones-doc .form-group {
    margin-bottom: 8px;
}

/* 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; }

/* ==========================================================================
   CERTIFICADO DE RETENCION EN LA FUENTE
   La ventana donde se busca al proveedor y sale su certificado del año.
   La hoja se pinta con la cara de los informes contables porque es un papel
   que se entrega y se firma, no una pantalla de consulta.
   ========================================================================== */

/* --- La busqueda: cabecera, lista de proveedores y barra del elegido ------ */

.cert-ret-lista-cabeza {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-secondary);
    padding: 2px 2px 8px;
}

.cert-ret-lista {
    max-height: 340px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
}

.cert-ret-item {
    display: grid;
    grid-template-columns: 1fr 135px 68px 118px 16px;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    text-align: left;
    background: var(--bg-card, var(--bg-app));
    border: 1px solid var(--border);
    border-left: 3px solid transparent;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-primary);
    transition: border-color .12s, background .12s, transform .12s;
}

.cert-ret-item:hover {
    border-color: var(--primary);
    border-left-color: var(--primary);
    background: rgba(37, 99, 235, 0.06);
    transform: translateX(2px);
}

.cert-ret-item-nombre { font-weight: 600; }
.cert-ret-item-nit,
.cert-ret-item-docs { font-size: 0.78rem; color: var(--text-secondary); }
.cert-ret-item-valor { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.cert-ret-item-flecha { font-size: 0.7rem; color: var(--text-secondary); }
.cert-ret-item:hover .cert-ret-item-flecha { color: var(--primary); }

/* Con quien se esta trabajando. Sustituye a la lista, que se recoge al elegir. */
.cert-ret-elegido {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 11px 14px;
    margin-bottom: 14px;
    border-radius: var(--border-radius-sm);
    background: rgba(37, 99, 235, 0.07);
    border: 1px solid rgba(37, 99, 235, 0.28);
}

.cert-ret-elegido-quien { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cert-ret-elegido-quien > i { color: var(--primary); }
.cert-ret-elegido-nombre { font-weight: 700; font-size: 0.95rem; }
.cert-ret-elegido-nit { font-size: 0.8rem; color: var(--text-secondary); }

.cert-ret-vacio {
    padding: 22px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.cert-ret-salida { overflow-y: auto; }

/* Las notas de trabajo. Van FUERA de la hoja: no son parte del certificado. */
.cert-ret-avisos { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }

.cert-ret-aviso {
    display: flex;
    gap: 10px;
    padding: 10px 13px;
    border-radius: var(--border-radius-sm);
    background: rgba(217, 119, 6, 0.10);
    border: 1px solid rgba(217, 119, 6, 0.35);
    border-left: 3px solid #d97706;
    color: #92400e;
    font-family: var(--font-body);
    font-size: 0.79rem;
    line-height: 1.5;
}

.cert-ret-aviso > i { padding-top: 2px; }

/* --- La hoja --------------------------------------------------------------
   Fondo blanco siempre, aunque el ERP este en modo oscuro: es un papel que se
   firma y se entrega, y tiene que verse en pantalla como va a salir impreso.
   Los tamaños de aqui son los de mirar; los de imprimir van en certRetImprimir
   y estan pensados para que quepa en A4. */

.cert-ret-hoja {
    background: #ffffff;
    color: #111827;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 10px 34px rgba(15, 23, 42, .13);
    padding: 0 42px 40px;
    max-width: 940px;
    margin: 0 auto;
    font-family: Georgia, 'Times New Roman', serif;
    overflow: hidden;
}

.cert-ret-filo { height: 4px; background: #1e3a8a; margin: 0 -42px 26px; }

.cert-ret-membrete {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 14px;
    margin-bottom: 26px;
}

.cert-ret-empresa { font-size: 1.12rem; font-weight: bold; letter-spacing: .3px; }
.cert-ret-empresa-datos {
    font-size: 0.74rem;
    color: #475569;
    margin-top: 4px;
    font-family: var(--font-body);
}

.cert-ret-sello {
    flex-shrink: 0;
    border: 2px solid #1e3a8a;
    border-radius: 8px;
    padding: 7px 14px;
    text-align: center;
    color: #1e3a8a;
}

.cert-ret-sello-anio { display: block; font-size: 1.35rem; font-weight: bold; line-height: 1; }
.cert-ret-sello-texto {
    display: block;
    font-size: 0.52rem;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-top: 3px;
    line-height: 1.3;
}

.cert-ret-titulo {
    text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
    color: #1e3a8a;
    letter-spacing: .4px;
}

.cert-ret-subtitulo {
    text-align: center;
    font-size: 0.76rem;
    font-style: italic;
    color: #64748b;
    margin: 5px 0 22px;
}

.cert-ret-parrafo { font-size: 0.88rem; line-height: 1.7; text-align: justify; margin-bottom: 18px; }

.cert-ret-retenido {
    border: 1px solid #e2e8f0;
    border-left: 3px solid #1e3a8a;
    border-radius: 5px;
    padding: 13px 17px;
    margin-bottom: 18px;
}

.cert-ret-retenido-rotulo {
    font-size: 0.63rem;
    text-transform: uppercase;
    letter-spacing: .9px;
    color: #1e3a8a;
    font-family: var(--font-body);
    font-weight: 700;
    margin-bottom: 10px;
}

.cert-ret-rejilla { display: flex; flex-wrap: wrap; gap: 13px 24px; }
.cert-ret-dato { flex: 1 1 30%; min-width: 150px; }
.cert-ret-dato-ancho { flex: 1 1 55%; min-width: 240px; }

.cert-ret-dato span {
    display: block;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: .55px;
    color: #64748b;
    font-family: var(--font-body);
}

.cert-ret-dato strong {
    display: block;
    font-size: 0.92rem;
    font-family: var(--font-body);
    margin-top: 2px;
}

.cert-ret-falta { color: #b45309; font-size: 0.8rem; font-weight: normal; }

/* La cifra, en grande. Es lo primero que busca quien recibe el papel. */
.cert-ret-cifra {
    background: #f1f5f9;
    border-radius: 5px;
    padding: 15px 18px;
    text-align: center;
    margin-bottom: 22px;
}

.cert-ret-cifra-rotulo {
    font-size: 0.63rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #475569;
    font-family: var(--font-body);
}

.cert-ret-cifra-valor {
    font-size: 2.05rem;
    font-weight: bold;
    color: #1e3a8a;
    line-height: 1.25;
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
}

.cert-ret-cifra-letras { font-size: 0.72rem; font-style: italic; color: #475569; }

.cert-ret-seccion {
    font-size: 0.72rem;
    font-weight: 700;
    color: #1e3a8a;
    margin: 22px 0 7px;
    text-transform: uppercase;
    letter-spacing: .7px;
    font-family: var(--font-body);
}

/* La tabla usa .inf-tabla, la de los informes, pero dentro de la hoja va
   siempre sobre blanco aunque el ERP este en modo oscuro. */
.cert-ret-hoja .inf-tabla { background: #ffffff; color: #111827; }
.cert-ret-hoja .inf-tabla th {
    color: #1e3a8a;
    background: #f8fafc;
    font-size: 0.63rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.cert-ret-hoja .inf-tabla th,
.cert-ret-hoja .inf-tabla td { border: 1px solid #e2e8f0; vertical-align: top; padding: 6px 8px; }
.cert-ret-hoja .inf-tabla tbody tr:nth-child(even) td { background: #fcfdfe; }

.cert-ret-concepto, .cert-ret-factura { display: block; font-weight: 700; }
.cert-ret-sub { display: block; font-size: 0.66rem; color: #64748b; font-weight: normal; font-family: var(--font-body); }
.cert-ret-tarifa { font-weight: 700; }
.cert-ret-ojo { color: #d97706; margin-left: 4px; }
.cert-ret-total td { font-weight: bold; background: #e8eefb; color: #1e3a8a; }

.cert-ret-expedicion { font-size: 0.84rem; margin-top: 26px; }

/* ==========================================================================
   PAGO DE LAS DECLARACIONES
   Lo que se debe de un periodo y el formulario para saldarlo. No es un papel
   que se entregue, asi que va con la cara del ERP y no con la de la hoja.
   ========================================================================== */

/* Cada bloque vive debajo del informe de su impuesto. La linea de arriba lo
   separa: es otra cosa -lo que se debe y como se paga- y no la continuacion
   de la tabla anterior. Vacio no ocupa nada. */
.pago-bloque:not(:empty) {
    margin-top: 30px;
    padding-top: 26px;
    border-top: 2px solid var(--border);
}

.pag-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 20px;
    margin-bottom: 6px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--border-radius-sm);
    background: var(--bg-card, var(--bg-app));
}

.pag-titulo { font-size: 1.05rem; font-weight: 700; }
.pag-ante { font-size: 0.78rem; color: var(--text-secondary); margin-top: 3px; }

.pag-cifra { text-align: right; }
.pag-cifra-rotulo {
    display: block;
    font-size: 0.63rem;
    text-transform: uppercase;
    letter-spacing: .9px;
    color: var(--text-secondary);
}
.pag-cifra-valor {
    display: block;
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--danger, #dc2626);
    font-variant-numeric: tabular-nums;
}
.pag-cifra-periodo { display: block; font-size: 0.72rem; color: var(--text-secondary); }

/* Un saldo a favor no es una deuda: no debe pintarse en rojo de alarma. */
.pag-cifra-favor .pag-cifra-valor { color: var(--success, #16a34a); }

.pag-formulario {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    background: var(--bg-card, var(--bg-app));
}

/* Cada comprobante de la lista se abre al pulsarlo. */
.pag-fila-clic { cursor: pointer; }
.pag-fila-clic:hover td { background: rgba(37, 99, 235, 0.08) !important; }

.pag-nota {
    font-size: 0.76rem;
    color: var(--text-secondary);
    line-height: 1.55;
    padding: 10px 4px 0;
}

.pag-aviso {
    display: flex;
    gap: 11px;
    padding: 13px 16px;
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
    line-height: 1.55;
    margin-bottom: 14px;
}

.pag-aviso > i { padding-top: 2px; font-size: 1rem; }

.pag-aviso-ok {
    background: rgba(22, 163, 74, 0.10);
    border: 1px solid rgba(22, 163, 74, 0.32);
    border-left: 3px solid #16a34a;
    color: #166534;
}

.pag-aviso-alerta {
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.30);
    border-left: 3px solid var(--primary);
    color: var(--text-primary);
}

.cert-ret-firma { margin-top: 56px; font-size: 0.84rem; text-align: center; }
.cert-ret-linea { border-top: 1px solid #111827; width: 250px; margin: 0 auto 6px; }
.cert-ret-firma-nombre { font-weight: bold; }
.cert-ret-firma-cargo { font-size: 0.72rem; color: #475569; font-family: var(--font-body); }

.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);
}

/* ============================================================
   REGISTRAR COMPRA LEYENDO LA FACTURA CON IA
   Estilos propios y autocontenidos: no dependen de otras pantallas.
   ============================================================ */
.fc-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(6px);
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.fc-caja {
    background: #fff;
    border-radius: 22px;
    padding: 22px;
    width: 100%;
    max-width: 560px;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.4);
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: fc-sube 0.22s cubic-bezier(0.18, 1.25, 0.4, 1);
}
.fc-caja-ancha { max-width: 720px; }
@keyframes fc-sube {
    from { opacity: 0; transform: translateY(22px) scale(0.97); }
    to { opacity: 1; transform: none; }
}

.fc-cab {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.fc-cab h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.fc-cab h3 i { color: #2563eb; }
.fc-sub { font-size: 0.78rem; color: #64748b; margin: 3px 0 0; }
.fc-x {
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    padding: 4px 7px;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1;
}
.fc-x:hover { color: #dc2626; background: #fef2f2; }

.fc-chip-ia {
    align-self: flex-start;
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.7rem;
    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.13); }
.fc-zona > div > i { font-size: 1.7rem; color: #2563eb; margin-bottom: 8px; display: block; }
.fc-zona h4 { font-size: 1rem; font-weight: 800; color: #2563eb; margin: 0 0 6px; }
.fc-zona p { font-size: 0.78rem; font-weight: 700; color: #0f172a; margin: 0 0 5px; }
.fc-zona small { display: block; font-size: 0.7rem; color: #64748b; line-height: 1.5; }
.fc-zona .fc-formatos { margin-top: 6px; opacity: 0.85; }
.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.8rem;
    font-weight: 700;
    color: #0f172a;
    flex-wrap: wrap;
}
.fc-archivo-info i { color: #059669; }
.fc-quitar {
    border: none;
    background: transparent;
    color: #dc2626;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.fc-separador {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #64748b;
    font-size: 0.74rem;
}
.fc-separador::before, .fc-separador::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

.fc-manual {
    border: 1.5px solid #0f172a;
    background: #fff;
    color: #0f172a;
    border-radius: 14px;
    padding: 14px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.15s;
}
.fc-manual:hover { border-color: #2563eb; color: #2563eb; }

/* Salida al Documento Soporte. Discreta a proposito: no es una tercera forma
   de registrar la compra, es irse a otro tipo de documento. Pero tiene que
   estar, porque este cuadro tapa la pantalla entera y con ella el desplegable
   de Tipo de Documento -de ahi la impresion de que el DS habia desaparecido-. */
.fc-ds-salida {
    border: 0;
    background: transparent;
    color: #64748b;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.fc-ds-salida:hover { color: #2563eb; }

.fc-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.fc-nota {
    font-size: 0.7rem;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.fc-btn {
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    padding: 13px 22px;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    box-shadow: 0 10px 22px -8px rgba(37, 99, 235, 0.7);
    transition: transform 0.15s, opacity 0.2s;
}
.fc-btn:hover { transform: translateY(-1px); }
.fc-btn.fc-inactivo { opacity: 0.4; pointer-events: none; }
.fc-btn.fc-cargando { opacity: 0.65; pointer-events: none; }
.fc-secundario {
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    color: #0f172a;
    padding: 12px 18px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.fc-secundario:hover { border-color: #2563eb; color: #2563eb; }

.fc-confianza {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    padding: 9px 13px;
    font-size: 0.78rem;
    font-weight: 700;
}
.fc-confianza.buena { background: rgba(5, 150, 105, 0.12); color: #047857; }
.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-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fc-campo label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 4px;
}
.fc-input {
    width: 100%;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 0.9rem;
    font-family: inherit;
    color: #0f172a;
    background: #f8fafc;
    outline: none;
    box-sizing: border-box;
}
.fc-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.fc-ok { color: #059669; font-size: 0.68rem; display: block; margin-top: 3px; }
.fc-nuevo { color: #b45309; font-size: 0.68rem; display: block; margin-top: 3px; }

.fc-subtitulo {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin: 4px 0 0;
}
.fc-items {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 34vh;
    overflow-y: auto;
}
.fc-item {
    display: grid;
    /* descripcion | codigo | cantidad | costo | quitar
       El codigo necesita sitio: hay referencias como MCO1846218119 o
       ACA17-31012 que cortadas no sirven para revisar nada. */
    grid-template-columns: minmax(0, 1fr) 150px 68px 96px 34px;
    gap: 6px;
    align-items: start;
}
.fc-item .fc-input { padding: 8px 10px; font-size: 0.84rem; }
/* El codigo se resalta: es el dato que decide a que producto se carga la
   compra, y hay que poder revisarlo de un vistazo. Debajo, en letra pequeña,
   se dice si ese producto ya existe o si se va a crear. */
.fc-item .fc-i-codigo { font-weight: 700; text-transform: uppercase; }
.fc-item .fc-i-codigo:not(:placeholder-shown) { border-color: #2563eb; background: #eff6ff; }
.fc-celda-codigo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* ==========================================================================
   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; }
}

/* ==========================================================================
   CUENTA CORRIENTE ENTRE LAS DOS SUCURSALES

   Violeta, y a propósito distinto del ámbar de los gastos y del verde azulado
   de los encargos: esto no es plata que entra ni que sale de la empresa. Es
   plata que se mueve de un bolsillo al otro dentro del mismo NIT, y conviene
   que se vea que es otra cosa.
   ========================================================================== */
.doc-panel-cs {
    border-top: 6px solid #7c3aed !important;
    background: linear-gradient(to bottom, #f5f3ff 0%, #ffffff 120px) !important;
}
.doc-panel-cs .cashier-key-icon { background-color: rgba(124, 58, 237, .1); color: #7c3aed; }
.doc-panel-cs:hover .cashier-key-icon { background-color: #7c3aed !important; color: #fff !important; }

.cs-cinta {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
    background: #f5f3ff; border: 1.5px solid #c4b5fd; border-left: 4px solid #7c3aed;
    border-radius: 10px; padding: 14px 18px; margin-bottom: 14px;
}
.cs-cinta.cs-cinta-debe { background: #fef2f2; border-color: #fca5a5; border-left-color: #b91c1c; }
.cs-cinta-texto { flex: 1 1 260px; font-family: var(--font-heading); font-size: 14px; color: #4c1d95; }
.cs-cinta.cs-cinta-debe .cs-cinta-texto { color: #7f1d1d; }
.cs-cinta-texto strong { font-size: 15px; }
.cs-cinta-texto em {
    display: block; font-style: normal; font-family: var(--font-main, sans-serif);
    font-size: 11px; color: var(--text-muted); margin-top: 2px;
}
.cs-cinta-plata {
    font-family: var(--font-mono, monospace); font-size: 26px; font-weight: 700;
    color: #6d28d9; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.cs-cinta.cs-cinta-debe .cs-cinta-plata { color: #b91c1c; }

/* Las dos sucursales tienen que decir lo mismo al revés. Cuando no, es que un
   movimiento se anotó en una sola: se avisa arriba del todo. */
.cs-aviso {
    display: flex; align-items: flex-start; gap: 11px;
    background: #fffbeb; border: 1.5px solid #fcd34d; border-left: 4px solid #b45309;
    border-radius: 9px; padding: 11px 15px; margin-bottom: 12px;
    font-size: 12.5px; color: #78350f; line-height: 1.45;
}
.cs-aviso i { color: #b45309; font-size: 16px; flex: none; margin-top: 1px; }

.cs-bloque { margin-top: 16px; }
.cs-cabecera {
    display: flex; justify-content: space-between; align-items: center; gap: 15px; flex-wrap: wrap;
    margin: -12px -12px 14px -12px !important; padding: 11px 16px !important;
    background: #7c3aed !important; border-bottom: 1.5px solid #6d28d9 !important;
    border-top-left-radius: 6px; border-top-right-radius: 6px; box-sizing: border-box;
}
.cs-cabecera h3 { margin: 0; font-family: var(--font-heading); font-size: 14.5px; font-weight: 700; color: #fff !important; }
.cs-pastilla {
    background: #fff; color: #6d28d9; padding: 4px 11px; border-radius: 999px;
    font-size: 11px; font-weight: 700; white-space: nowrap;
}

/* Las tablas van apretadas por lo mismo que las de gastos: el relleno general
   de `.data-table td` es de 16px por 20px y aquí hay muchos renglones cortos.
   Marcado con `.cs-tabla`, sin tocar `.data-table`. */
.cs-tabla-caja { overflow-x: auto; }
.cs-tabla th { padding: 7px 10px; font-size: 10.5px; letter-spacing: .04em; white-space: nowrap; }
.cs-tabla td { padding: 6px 10px; font-size: 12.5px; line-height: 1.32; vertical-align: middle; }
.cs-tabla .cs-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-tabla .cs-num em { font-style: normal; color: var(--text-muted); font-size: 10.5px; }
.cs-tabla tbody tr:hover { background: #faf5ff; }
.cs-tabla tr.cs-anulado { opacity: .5; }
.cs-tabla tr.cs-anulado em { font-style: normal; color: #b91c1c; font-size: 10.5px; }
.cs-nota { margin: 10px 2px 0; font-size: 11.5px; color: var(--text-muted); line-height: 1.45; }

/* --- la ventana del pago --- */
#cs-modal-cruce .gp-modal-cabeza { background: #7c3aed; }
#cs-modal-cruce .gp-btn-pagar { background-color: #7c3aed !important; border-color: #6d28d9 !important; }

.cs-marcar { border: 1px solid #ddd6fe; border-radius: 9px; overflow: hidden; }
.cs-marcar-cabeza {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    background: #f5f3ff; padding: 9px 13px; border-bottom: 1px solid #ddd6fe;
    font-size: 12.5px; font-weight: 600; color: #4c1d95;
}
.cs-marcar-cabeza label { display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; }
.cs-marcar-cabeza input { width: 15px; height: 15px; cursor: pointer; }
.cs-marcar-cabeza span { font-family: var(--font-mono, monospace); font-variant-numeric: tabular-nums; }
.cs-marcar-lista { max-height: 210px; overflow-y: auto; }
.cs-marcar-fila {
    display: grid; grid-template-columns: auto 1fr auto 1.2fr auto; gap: 10px;
    align-items: center; padding: 6px 13px; border-bottom: 1px solid #f1f5f9;
    font-size: 11.5px; cursor: pointer; margin: 0;
}
.cs-marcar-fila:last-child { border-bottom: none; }
.cs-marcar-fila:hover { background: #faf5ff; }
.cs-marcar-fila input { width: 14px; height: 14px; cursor: pointer; }
.cs-marcar-doc { font-weight: 700; color: #0f172a; }
.cs-marcar-fecha, .cs-marcar-cta { color: var(--text-muted); }
.cs-marcar-cta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-marcar-plata { font-family: var(--font-mono, monospace); text-align: right; font-variant-numeric: tabular-nums; }

.cs-sin-ventas {
    background: #f8fafc; border: 1px dashed var(--border); border-radius: 8px;
    padding: 10px 13px; font-size: 12px; color: var(--text-muted); line-height: 1.4;
}
.cs-sin-ventas i { color: #7c3aed; margin-right: 6px; }

.cs-resumen { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 11px; }
.cs-resumen-fila {
    display: flex; justify-content: space-between; gap: 12px;
    font-size: 12.5px; color: #334155; padding: 3px 2px;
}
.cs-resumen-fila strong { font-family: var(--font-mono, monospace); font-variant-numeric: tabular-nums; }
.cs-resumen-total { border-top: 1px dashed var(--border); margin-top: 5px; padding-top: 7px; font-weight: 700; color: #4c1d95; }
.cs-resumen-debe strong { color: #b91c1c; }

@media (max-width: 640px) {
    .cs-marcar-fila { grid-template-columns: auto 1fr auto; gap: 4px 9px; }
    .cs-marcar-cta { grid-column: 2 / -1; }
}

/* ==========================================================================
   RETIROS DE MERCADO PAGO

   Azul, el de Mercado Libre, y distinto del violeta de la cuenta entre
   sucursales: son dos cosas que se parecen -las dos mueven la Mercado Pago-
   y conviene no confundirlas de un vistazo.
   ========================================================================== */
.doc-panel-mp {
    border-top: 6px solid #0284c7 !important;
    background: linear-gradient(to bottom, #f0f9ff 0%, #ffffff 120px) !important;
}
.doc-panel-mp .cashier-key-icon { background-color: rgba(2, 132, 199, .1); color: #0284c7; }
.doc-panel-mp:hover .cashier-key-icon { background-color: #0284c7 !important; color: #fff !important; }

.mp-cinta {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
    background: #f0f9ff; border: 1.5px solid #7dd3fc; border-left: 4px solid #0284c7;
    border-radius: 10px; padding: 14px 18px; margin-bottom: 12px;
}
.mp-cinta.mp-cinta-ojo { background: #fffbeb; border-color: #fcd34d; border-left-color: #b45309; }
.mp-cinta-texto { flex: 1 1 260px; font-family: var(--font-heading); font-size: 14px; color: #075985; }
.mp-cinta.mp-cinta-ojo .mp-cinta-texto { color: #78350f; }
.mp-cinta-texto strong { font-size: 15px; display: block; }
.mp-cinta-texto em {
    display: block; font-style: normal; font-family: var(--font-main, sans-serif);
    font-size: 11.5px; color: var(--text-muted); margin-top: 2px;
}
.mp-cinta-plata {
    font-family: var(--font-mono, monospace); font-size: 26px; font-weight: 700;
    color: #0369a1; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.mp-cinta.mp-cinta-ojo .mp-cinta-plata { color: #b45309; }

.mp-aviso {
    display: flex; align-items: flex-start; gap: 11px;
    background: #fffbeb; border: 1px dashed #fcd34d; border-radius: 9px;
    padding: 11px 15px; margin-bottom: 12px;
    font-size: 12.5px; color: #78350f; line-height: 1.45;
}
.mp-aviso i { color: #b45309; font-size: 15px; flex: none; margin-top: 2px; }

.mp-bloque { margin-top: 16px; }
.mp-cabecera {
    display: flex; justify-content: space-between; align-items: center; gap: 15px; flex-wrap: wrap;
    margin: -12px -12px 14px -12px !important; padding: 11px 16px !important;
    background: #0284c7 !important; border-bottom: 1.5px solid #0369a1 !important;
    border-top-left-radius: 6px; border-top-right-radius: 6px; box-sizing: border-box;
}
.mp-cabecera h3 { margin: 0; font-family: var(--font-heading); font-size: 14.5px; font-weight: 700; color: #fff !important; }
.mp-pastilla {
    background: #fff; color: #0369a1; padding: 4px 11px; border-radius: 999px;
    font-size: 11px; font-weight: 700; white-space: nowrap;
}

#mp-modal-retiro .gp-modal-cabeza,
#mp-modal-prueba .gp-modal-cabeza { background: #0284c7; }
#mp-modal-retiro .gp-btn-pagar { background-color: #0284c7 !important; border-color: #0369a1 !important; }
.mp-resumen { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 11px; }

/* Cada billetera y el banco al que descarga. Va justo debajo del saldo porque
   es lo que explica por qué el mismo retiro entra a un sitio o a otro. */
.mp-billeteras {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--bg-card, #fff); border: 1px solid var(--border);
    border-radius: 9px; padding: 9px 14px; margin-bottom: 12px; font-size: 12.5px;
}
.mp-billeteras-titulo { color: var(--text-muted); font-size: 11.5px; }
.mp-billetera {
    display: inline-flex; align-items: center; gap: 7px;
    background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 999px;
    padding: 3px 11px; color: #075985;
}
.mp-billetera i { font-size: 10px; color: #0284c7; }
.mp-sin-destino { font-style: normal; color: #b45309; }

.mp-prueba-cuenta { border: 1px solid var(--border); border-radius: 9px; margin-bottom: 12px; overflow: hidden; }
.mp-prueba-cabeza {
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap;
    background: var(--table-header, #f8fafc); padding: 8px 13px; border-bottom: 1px solid var(--border);
}
.mp-prueba-cabeza strong { font-size: 13.5px; }
.mp-prueba-cabeza span { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono, monospace); }
.mp-prueba-cuenta .cs-tabla td { padding: 5px 13px; font-size: 12px; }
.mp-columnas { padding: 8px 13px; border-top: 1px solid var(--border); background: var(--card-sunk, #f8fafc); }
.mp-columnas span { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.cs-tabla tr.mp-ya td { opacity: .6; }
.mp-columnas code {
    font-family: var(--font-mono, monospace); font-size: 10.5px; line-height: 1.5;
    color: var(--text-main); word-break: break-word;
}
.mp-parecido {
    display: inline-block; margin-top: 3px; font-family: var(--font-main, inherit);
    font-size: 10.5px; line-height: 1.4; color: #b45309;
}
.mp-tipos { border-top: 1px solid var(--border); }
.mp-tipos > summary {
    padding: 7px 13px; font-size: 11.5px; color: var(--text-muted);
    cursor: pointer; user-select: none;
}
.mp-tipos > summary:hover { color: var(--text-main); }
.mp-tipos > table { border-top: 1px solid var(--border); }
.mp-tipos > .cs-nota { padding: 0 13px 9px; }

/* ==========================================================================
   SALDO A FAVOR DEL CLIENTE

   Dos sitios: la pregunta de la devolución -¿sale la plata o le queda a
   favor?- y el extracto en la ficha del tercero.
   ========================================================================== */

/* --- La pregunta, en la pantalla de devoluciones --- */
.dev-destino {
    margin-top: 18px;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    padding: 14px 16px;
    background: #f8fafc;
    transition: border-color .15s, background .15s;
}
.dev-destino.dev-destino-favor {
    border-color: #0d9488;
    background: #f0fdfa;
}
.dev-destino-titulo {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13.5px;
    color: #0f172a;
    margin-bottom: 10px;
    display: flex; align-items: center; gap: 8px;
}
.dev-destino-titulo i { color: #0d9488; }
.dev-destino-opcion {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    margin-bottom: 4px;
}
.dev-destino-opcion:hover { background: #ffffff; border-color: #e2e8f0; }
.dev-destino-opcion input[type="radio"] { margin-top: 3px; width: 16px; height: 16px; flex: none; cursor: pointer; }
.dev-destino-opcion:has(input:checked) { background: #ffffff; border-color: #94a3b8; }
.dev-destino-favor .dev-destino-opcion:has(input:checked) { border-color: #0d9488; }
.dev-destino-opcion.dev-destino-bloqueada { opacity: .45; cursor: not-allowed; }
.dev-destino-opcion.dev-destino-bloqueada input { cursor: not-allowed; }
.dev-destino-cuerpo { display: flex; flex-direction: column; gap: 2px; }
.dev-destino-cuerpo strong { font-size: 13px; color: #0f172a; font-weight: 650; }
.dev-destino-cuerpo em {
    font-style: normal; font-size: 11.5px; color: #64748b; line-height: 1.35;
}
.dev-destino-explica {
    margin-top: 8px;
    padding: 9px 12px;
    border-radius: 7px;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    font-size: 12px;
    color: #334155;
    line-height: 1.45;
    display: flex; align-items: flex-start; gap: 8px;
}
.dev-destino-explica i { margin-top: 2px; color: #0d9488; flex: none; }
.dev-destino-favor .dev-destino-explica { border-color: #5eead4; background: #f0fdfa; }

/* --- El aviso en la factura de venta --- */
.fac-aviso-favor {
    margin-top: 7px;
    padding: 7px 11px;
    border-radius: 7px;
    background: #f0fdfa;
    border: 1px solid #5eead4;
    font-size: 12px;
    color: #115e59;
    line-height: 1.4;
    display: flex; align-items: flex-start; gap: 8px;
}
.fac-aviso-favor i { margin-top: 2px; color: #0d9488; flex: none; }
.fac-aviso-favor strong { color: #0f766e; }

/* --- La columna del listado de terceros --- */
th.ter-favor, td.ter-favor { text-align: right; white-space: nowrap; width: 110px; }
.ter-favor-chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: #ccfbf1;
    color: #0f766e;
    font-weight: 700;
    font-size: 12px;
    font-family: var(--font-mono, monospace);
}

/* --- El extracto, en la ficha del tercero --- */
.td-favor {
    margin-top: 18px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    background: #f8fafc;
}
.td-favor.td-favor-vivo { border-color: #0d9488; background: #f0fdfa; }
.td-favor-encabezado {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap;
    font-family: var(--font-heading);
    font-size: 13.5px; font-weight: 700; color: #0f172a;
}
.td-favor-encabezado i { color: #0d9488; margin-right: 6px; }
.td-favor-monto { font-weight: 600; font-size: 13px; color: #0f766e; }
.td-favor-monto strong { font-size: 15px; }
.td-favor-rojo, .td-favor-error { color: #dc2626; }
.td-favor-nota {
    margin-top: 8px; padding: 7px 10px; border-radius: 6px;
    background: #ffffff; border: 1px dashed #5eead4;
    font-size: 11.5px; color: #334155; line-height: 1.4;
}
.td-favor-nota i { color: #0d9488; margin-right: 5px; }
.td-favor-nota-gris { border-color: #cbd5e1; }
.td-favor-nota-gris i { color: #94a3b8; }
.td-favor-tabla-caja {
    margin-top: 10px; max-height: 240px; overflow-y: auto;
    border: 1px solid #e2e8f0; border-radius: 7px; background: #ffffff;
}
.td-favor-tabla { width: 100%; border-collapse: collapse; font-size: 11.8px; }
.td-favor-tabla thead th {
    position: sticky; top: 0; z-index: 1;
    background: #f1f5f9; color: #475569;
    font-weight: 650; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em;
    padding: 6px 8px; text-align: left; border-bottom: 1px solid #e2e8f0;
}
.td-favor-tabla tbody tr { border-bottom: 1px solid #f1f5f9; cursor: pointer; }
.td-favor-tabla tbody tr:last-child { border-bottom: none; }
.td-favor-tabla tbody tr:hover { background: #f0fdfa; }
.td-favor-tabla td { padding: 7px 8px; vertical-align: top; }
.tdf-icono { width: 26px; text-align: center; }
.tdf-origen { font-weight: 650; color: #0f172a; }
.tdf-detalle {
    color: #64748b; font-size: 10.8px; line-height: 1.3; margin-top: 1px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tdf-doc { white-space: nowrap; }
.tdf-doc-num { display: block; font-weight: 650; color: #0f766e; }
.tdf-fecha { display: block; color: #94a3b8; font-size: 10.5px; }
th.tdf-valor, td.tdf-valor, th.tdf-corrido, td.tdf-corrido {
    text-align: right; white-space: nowrap; font-family: var(--font-mono, monospace);
}
.tdf-entra { color: #0f766e; font-weight: 700; }
.tdf-sale  { color: #b45309; font-weight: 700; }
.tdf-corrido { color: #475569; font-weight: 600; }
.fc-estado {
    font-size: 0.62rem;
    line-height: 1.2;
    color: #94a3b8;
    /* Se deja ver en dos lineas: cortar el nombre del producto con puntos
       suspensivos obliga a pasar el raton por encima para saber que producto
       es, y esto se lee de un vistazo o no se lee. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.fc-estado-existe { color: #047857; font-weight: 700; }
.fc-estado-nuevo { color: #b45309; font-weight: 700; }
/* Existe, pero con otro codigo distinto al de la factura. */
.fc-estado-otro { color: #1d4ed8; font-weight: 700; -webkit-line-clamp: 4; }
/* Boton para adoptar la referencia de la factura en la ficha que ya existe,
   en vez de crear un duplicado. */
.fc-mini {
    display: block;
    margin-top: 3px;
    padding: 3px 6px;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    background: #1d4ed8;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: left;
    white-space: normal;
}
.fc-mini:hover { background: #1e40af; }
.fc-mini:disabled { background: #94a3b8; cursor: default; }
.fc-item .fc-i-codigo { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: -0.01em; }
.fc-item-cab {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    padding: 0 4px;
}
.fc-item-cab span:nth-child(3), .fc-item-cab span:nth-child(4) { text-align: right; }

.fc-totales {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: #64748b;
    background: #f8fafc;
    border-radius: 10px;
    padding: 9px 13px;
}
.fc-totales strong { color: #0f172a; font-size: 0.95rem; }
.fc-resalte { color: #2563eb !important; }
.fc-dif { min-height: 1.1em; font-size: 0.76rem; color: #dc2626; text-align: center; }

@media (max-width: 700px) {
    .fc-fila { grid-template-columns: 1fr; }
    .fc-item { grid-template-columns: minmax(0, 1fr) 62px 84px 30px; }
    .fc-pie { flex-direction: column-reverse; align-items: stretch; }
    .fc-btn, .fc-secundario { justify-content: center; }
}

/* ==========================================================================
   RESUMEN DEL DIA (ficha Caja y Conciliacion)
   Todo lo del dia en una pantalla, con las sucursales una al lado de la otra.
   Las clases .rd-* se comparten con la version que sale por la impresora, que
   trae sus propias medidas.
   ========================================================================== */

.rd-barra-herramientas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    padding: 10px 16px;
    margin-bottom: 14px;
    box-shadow: var(--shadow);
}

.rd-barra-herramientas .rd-grupo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rd-barra-herramientas h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
}

.rd-barra-herramientas label {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.rd-barra-herramientas input[type="date"] {
    width: auto;
    padding: 5px 9px;
    font-size: 12px;
    border-radius: 6px;
    border: 2px solid var(--border-input);
    background: var(--input-bg);
    color: var(--text-main);
}

/* Atajos de periodo: hoy, ayer, este mes, el mes pasado */
.rd-atajos {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
}

.rd-atajo {
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--table-header);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 11px;
    cursor: pointer;
    transition: color var(--transition-speed), border-color var(--transition-speed);
}

.rd-atajo:hover {
    color: var(--primary);
    border-color: var(--primary);
}

/* La fecha de cada documento, cuando el informe cubre un periodo */
.rd-td-fecha {
    width: 84px;
    text-align: center;
    white-space: nowrap;
}

.rd-encabezado {
    text-align: center;
    margin-bottom: 16px;
}

.rd-empresa {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-main);
}

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

.rd-titulo {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
    margin-top: 4px;
}

/* Tarjetas de cifras: la franja de arriba y las de cada sucursal */
.rd-totales,
.rd-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.rd-tarjeta {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    font-family: inherit;
    color: inherit;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--border-radius-sm);
    padding: 10px 30px 10px 12px;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed),
                border-color var(--transition-speed);
}

.rd-tarjeta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -4px rgba(15, 23, 42, 0.12);
}

.rd-tarjeta:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.rd-tarjeta.rd-activa { border-color: var(--primary); }

/* La flechita de la derecha, que gira al abrir */
.rd-tarjeta-flecha {
    position: absolute;
    right: 13px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -7px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
    transition: transform var(--transition-speed), margin-top var(--transition-speed);
}

.rd-tarjeta.rd-activa .rd-tarjeta-flecha {
    transform: rotate(-135deg);
    margin-top: -2px;
    border-color: var(--primary);
}

/* El detalle que se abre debajo de las tarjetas */
.rd-panel { display: none; }

.rd-panel.rd-abierto {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--primary);
    border-radius: var(--border-radius-md);
    padding: 12px 16px 16px;
    margin: 0 0 14px;
    box-shadow: var(--shadow);
}

.rd-panel-titulo {
    margin: 0 0 4px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
}

.rd-pista {
    margin: 0 0 10px;
    font-size: 11.5px;
    color: var(--text-muted);
    font-style: italic;
}

/* ---- Gráficas, dibujadas a mano en SVG y con barras de CSS ---- */

.rd-grafica {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.rd-dona {
    width: 150px;
    height: 150px;
    flex-shrink: 0;
}

.rd-dona-cifra {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 800;
    text-anchor: middle;
    fill: var(--text-main);
}

.rd-leyenda {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    min-width: 230px;
}

.rd-leyenda li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
}

.rd-leyenda li:last-child { border-bottom: none; }

.rd-punto-leyenda {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.rd-leyenda-nombre {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rd-leyenda-valor {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
}

.rd-leyenda em {
    font-style: normal;
    color: var(--text-muted);
    width: 36px;
    text-align: right;
}

.rd-barras { list-style: none; margin: 0; padding: 0; }

.rd-barras li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 40px;
    grid-template-areas:
        "etiqueta valor pct"
        "pista    pista pct";
    align-items: center;
    gap: 3px 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
}

.rd-barras li:last-child { border-bottom: none; }

.rd-barra-etiqueta {
    grid-area: etiqueta;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.rd-barra-valor {
    grid-area: valor;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rd-barra-pista {
    grid-area: pista;
    display: block;
    height: 8px;
    border-radius: 4px;
    background: var(--table-header);
    overflow: hidden;
}

.rd-barra-pista i {
    display: block;
    height: 100%;
    border-radius: 4px;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.rd-barras em {
    grid-area: pct;
    font-style: normal;
    font-size: 11px;
    color: var(--text-muted);
    text-align: right;
}

.rd-tarjeta-etiqueta {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.rd-tarjeta-valor {
    display: block;
    font-size: 19px;
    font-weight: 800;
    font-family: var(--font-heading);
    color: var(--text-main);
    margin: 2px 0;
    word-break: break-word;
}

.rd-tarjeta-detalle {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
}

.rd-tono-venta { border-left-color: #0d9488; }
.rd-tono-venta .rd-tarjeta-valor { color: #0f766e; }
.rd-tono-devolucion { border-left-color: #d97706; }
.rd-tono-compra { border-left-color: #b45309; }
.rd-tono-gasto { border-left-color: #b91c1c; }
.rd-tono-gasto .rd-tarjeta-valor { color: #b91c1c; }
.rd-tono-dinero { border-left-color: #2563eb; }

/* ==========================================================================
   UTILIDAD
   La tarjeta y el panel que muestran lo que deja cada venta. El verde es el
   del dinero que se queda; el gris rayado, la venta a la que todavia le falta
   el costo y por lo tanto no se puede saber que dejo.
   ========================================================================== */

.rd-tono-utilidad { border-left-color: #059669; }
.rd-tono-utilidad .rd-tarjeta-valor { color: #047857; }

.rd-uresumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.rd-ucaja {
    background: var(--table-header);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    padding: 10px 12px;
}

.rd-ucaja span {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

.rd-ucaja strong {
    display: block;
    margin-top: 2px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}

.rd-ucaja em {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-size: 10.5px;
    color: var(--text-muted);
}

/* La de la utilidad pesa mas que las otras dos: es la que se viene a mirar. */
.rd-ucaja-fuerte {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #6ee7b7;
}
.rd-ucaja-fuerte span { color: #047857; }
.rd-ucaja-fuerte strong { color: #065f46; font-size: 22px; }
.rd-ucaja-fuerte em { color: #047857; }

/* Barra que reparte la venta */
.rd-ubarra {
    display: flex;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--table-header);
    margin-bottom: 8px;
}

.rd-ubarra i { display: block; height: 100%; }

.rd-ub-costo { background: #94a3b8; }
.rd-ub-utilidad { background: #059669; }
/* Rayado sobre el mismo gris del costo: es costo, pero supuesto. */
.rd-ub-estimado {
    background: repeating-linear-gradient(45deg, #cbd5e1, #cbd5e1 4px, #94a3b8 4px, #94a3b8 8px);
}
.rd-ub-incognita {
    background: repeating-linear-gradient(45deg, #e2e8f0, #e2e8f0 4px, #cbd5e1 4px, #cbd5e1 8px);
}

.rd-uleyenda {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
}

.rd-uleyenda li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-muted);
}

.rd-uleyenda i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.rd-uleyenda strong { color: var(--text-main); font-variant-numeric: tabular-nums; }
.rd-uleyenda em { font-style: normal; color: var(--text-muted); }

/* Aviso de que faltan costos */
.rd-uaviso {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-left: 3px solid #f59e0b;
    border-radius: var(--border-radius-sm);
    padding: 9px 12px;
    margin-bottom: 12px;
    font-size: 12px;
    line-height: 1.45;
    color: #78350f;
}

.rd-uaviso strong { color: #92400e; }

/* Lista de ventas con su utilidad */
.rd-ucabecera,
.rd-uventa > summary {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) 104px 96px 104px 62px;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
}

.rd-ucabecera {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}

.rd-ucabecera .rd-ucifra,
.rd-ucabecera .rd-umargen { text-align: right; }

.rd-uventa {
    border-bottom: 1px solid var(--border);
}

.rd-uventa > summary {
    cursor: pointer;
    font-size: 12px;
    list-style: none;
    transition: background var(--transition-speed);
}

.rd-uventa > summary::-webkit-details-marker { display: none; }
.rd-uventa > summary:hover { background: var(--table-hover); }
.rd-uventa[open] > summary { background: var(--table-header); }

.rd-udoc { font-weight: 700; color: var(--primary); }

.rd-unombre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
}

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

.rd-ufuerte { font-weight: 700; color: #047857; }

.rd-umargen {
    text-align: right;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    white-space: nowrap;
}

.rd-margen-bueno { background: #d1fae5; color: #065f46; }
.rd-margen-flojo { background: #fef3c7; color: #92400e; }
.rd-margen-malo { background: #fee2e2; color: #991b1b; }
/* Cuando a la venta le faltan costos el margen que sale es mentira, y se
   marca en gris para que no se lea como un dato bueno. */
.rd-margen-dudoso { background: var(--table-header); color: var(--text-muted); }

.rd-utabla-lineas { margin: 4px 0 8px; }

.rd-ufila-incompleta { color: var(--text-muted); }

.rd-uorigen,
.rd-uestimado,
.rd-ufalta {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 1px 5px;
    border-radius: 8px;
    vertical-align: middle;
}

.rd-uorigen { background: var(--table-header); color: var(--text-muted); }
/* Azul, no ambar: no es una alarma, es un dato provisional. */
.rd-uestimado { background: #dbeafe; color: #1e40af; }
.rd-ufalta { background: #fef3c7; color: #92400e; }

.rd-uver { margin: 0 0 8px; font-size: 11.5px; }

@media (max-width: 720px) {
    .rd-ucabecera { display: none; }
    .rd-uventa > summary {
        grid-template-columns: 84px minmax(0, 1fr) 60px;
        grid-template-areas:
            "doc nombre margen"
            "venta costo utilidad";
        row-gap: 2px;
    }
    .rd-udoc { grid-area: doc; }
    .rd-unombre { grid-area: nombre; }
    .rd-umargen { grid-area: margen; }
    .rd-uventa > summary .rd-ucifra:nth-of-type(1) { grid-area: venta; text-align: left; }
    .rd-uventa > summary .rd-ucifra:nth-of-type(2) { grid-area: costo; text-align: center; }
    .rd-uventa > summary .rd-ucifra:nth-of-type(3) { grid-area: utilidad; }
}

/* Las dos sucursales, una al lado de la otra mientras quepan */
.rd-columnas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
    gap: 16px;
    align-items: start;
}

.rd-sucursal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-md);
    padding: 14px 16px 16px;
    box-shadow: var(--shadow);
    min-width: 0;
}

.rd-sucursal-cabeza {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--border);
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.rd-sucursal-cabeza h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
}

.rd-punto {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rd-sucursal-sub {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--text-muted);
}

.rd-entra { color: #0f766e; }
.rd-sale { color: #b91c1c; }

.rd-seccion { margin-top: 14px; }

.rd-seccion-titulo {
    margin: 0 0 6px;
    font-family: var(--font-heading);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-main);
    border-bottom: 1px solid var(--border);
    padding-bottom: 4px;
}

.rd-tabla {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 12px;
}

.rd-tabla th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    background: var(--table-header);
    padding: 5px 8px;
    border-bottom: 1px solid var(--border);
}

.rd-tabla td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--border);
    color: var(--text-main);
}

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

.rd-tabla tfoot td {
    font-weight: 800;
    background: var(--table-header);
    border-bottom: none;
    border-top: 2px solid var(--border);
}

/* Renglon que abre cada grupo de la tabla de cobro */
.rd-tabla .rd-fila-grupo td {
    font-family: var(--font-heading);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    padding-top: 11px;
    background: transparent;
}

.rd-tabla tbody tr.rd-fila-grupo:first-child td { padding-top: 5px; }
.rd-tabla tbody tr.rd-fila-grupo:hover { background: transparent; }

/* Cuando el reparto no llega a lo facturado se dice, no se disimula */
.rd-tabla .rd-fila-aviso td {
    background: #fef3c7;
    color: #92400e;
    font-size: 11.5px;
    font-weight: 700;
}

.rd-td-nombre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rd-td-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    width: 118px;
}

.rd-td-fuerte { font-weight: 700; }

.rd-td-doc {
    text-align: center;
    width: 64px;
    white-space: nowrap;
}

/* La columna del numero de documento, que necesita mas aire que la de
   "Docs." de las tablas de reparto */
.rd-td-docancho { width: 96px; }

.rd-td-barra { width: 106px; }

.rd-barra {
    display: inline-block;
    vertical-align: middle;
    width: 46px;
    height: 6px;
    border-radius: 3px;
    background: var(--border);
    overflow: hidden;
}

.rd-barra span {
    display: block;
    height: 100%;
    border-radius: 3px;
}

.rd-td-barra em {
    font-style: normal;
    font-size: 10.5px;
    color: var(--text-muted);
    margin-left: 5px;
}

.rd-plegable {
    margin-top: 10px;
    border-top: 1px dashed var(--border);
    padding-top: 8px;
}

.rd-plegable summary {
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--primary);
    list-style: none;
}

.rd-plegable summary::before {
    content: "\25B8";
    display: inline-block;
    margin-right: 6px;
    transition: transform var(--transition-speed);
}

.rd-plegable[open] summary::before { transform: rotate(90deg); }

.rd-plegable summary::-webkit-details-marker { display: none; }

.rd-plegable > table { margin-top: 8px; }

.rd-vacio {
    text-align: center;
    padding: 34px 16px;
    color: var(--text-muted);
    font-size: 13px;
}

.rd-nota {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-muted);
    font-style: italic;
}

.rd-vacio-chico {
    font-size: 11.5px;
    color: var(--text-muted);
    font-style: italic;
    padding: 6px 0;
}

@media (max-width: 900px) {
    .rd-columnas { grid-template-columns: 1fr; }
    /* Igual que en el papel: aplastada, no escondida. */
    .rd-td-barra { width: 0; padding: 0; font-size: 0; border: none; overflow: hidden; }
    .rd-barra, .rd-td-barra em { display: none; }
}

/* ==========================================================================
   PAGO DE PLANILLA: el resumen del mes, apretado
   La tabla del resumen traia el alto de fabrica (16px arriba y abajo en cada
   celda) y, con el renglon de empleados debajo de cada aporte, cada fila
   medía el doble que en las demas vistas de documento. Aqui se aprieta al
   mismo 5px que ya usan factura, egreso y nomina, para no tener que bajar la
   pagina hasta el total.
   ========================================================================== */

#view-planilla-doc .data-table {
    font-size: 12px !important;
}

#view-planilla-doc .data-table th,
#view-planilla-doc .data-table td {
    padding: 4px 8px !important;
    line-height: 1.25;
}

#view-planilla-doc .data-table th {
    font-size: 11px;
    letter-spacing: 0;
}

/* El detalle por empleado va debajo del aporte: chico y pegado al nombre. */
#view-planilla-doc .data-table td small {
    font-size: 11px;
    line-height: 1.15;
    display: inline-block;
    margin-top: 1px;
}

#view-planilla-doc .data-table tfoot td {
    padding: 6px 8px !important;
}

/* El aire de alrededor tambien cede, para que el total no quede fuera de
   la pantalla. Van con !important porque el HTML los trae en linea. */
#view-planilla-doc .sub-label {
    margin-bottom: 8px !important;
}

#view-planilla-doc #planilla-resumen-container {
    margin-top: 4px !important;
}

#view-planilla-doc #planilla-pago-card,
#view-planilla-doc #planilla-exonerado-card {
    margin-top: 12px !important;
}

#view-planilla-doc .form-group small {
    line-height: 1.25;
}