.wiemspro-container{
	display:flex;
	margin-top:30px;
}
.wiemspro-sidebar {
	margin-right: 5.8823529412%;
	flex: 0 0 17.6470588235%;
}
.wiemspro-content{
	flex:1;
}

.wiemspro-sidebar ul {
	margin-left: 0;
	list-style: none;
}
.wiemspro-sidebar .wiemspro-navigation-link {
	position: relative;
	border-bottom: 1px solid rgba(0,0,0,0.05);
	list-style: none;
	font-size: clamp(0.875rem,0.8115rem + 0.2033vw,0.9375rem);
}
.wiemspro-sidebar .wiemspro-navigation-link:last-child {
	border: none;
}
.wiemspro-sidebar .wiemspro-navigation-link a {
color: #555;
  display: block;
  padding: 0.675em 0 0.775em;
}
.wiemspro-sidebar .wiemspro-navigation-link:hover a {
	color:#000000;
}
.wiemspro-sidebar .wiemspro-navigation-link a.activo {
	font-weight: 600;
	color:#000000;
}
.wiemspro-navigation-link .wiemspro-link--dashboard {}
.wiemspro-navigation-link .wiemspro-link--compras {}
.wiemspro-navigation-link .wiemspro-link--ventas {}
.wiemspro-navigation-link .wiemspro-link--codigo {}
.wiemspro-navigation-link .wiemspro-link--micuenta {}
.wiemspro-navigation-link .wiemspro-link--salir {}

.wiemspro-sidebar .wiemspro-navigation-link .activo::before,
.wiemspro-sidebar .wiemspro-navigation-link:hover a::before {
	opacity: 1;
}
.wiemspro-navigation-link a::before {
	background: #111;
	position: relative;
	top: 2px;
	float: right;
	content: "";
	width: 20px;
	height: 20px;
	opacity: 0.35;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: 0.2s;
}
li.wiemspro-link--dashboard a::before {
  background: no-repeat center/contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 24 24'><g fill='none' fill-rule='evenodd' stroke='none' stroke-width='1'><path d='M0 0h24v24H0z'/><rect width='16' height='16' x='4' y='4' stroke='%23030819' stroke-linecap='round' stroke-width='1.5' rx='2'/><path d='M4 9h16M9 10v10' stroke='%23030819' stroke-linecap='round' stroke-width='1.5'/></g></svg>");
}
li.wiemspro-link--compras a::before {
  background: no-repeat center/contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle fill='none' stroke='%23000' stroke-width='2' stroke-miterlimit='10' cx='22' cy='24' r='2'/><circle fill='none' stroke='%23000' stroke-width='2' stroke-miterlimit='10' cx='13' cy='24' r='2'/><path d='M25.658,10l-2.422,9H10.781L8.159,8.515C7.937,7.625,7.137,7,6.219,7H4C3.448,7,3,7.448,3,8c0,0.552,0.448,1,1,1h2.219l2.621,10.485C9.063,20.375,9.863,21,10.781,21h12.455c0.902,0,1.692-0.604,1.93-1.474L27.764,10H25.658z'/><line fill='none' stroke='%23000' stroke-width='2' stroke-miterlimit='10' x1='17' y1='7' x2='17' y2='13'/><polygon points='21,12 17,16 13,12'/></svg>");
}
li.wiemspro-link--ventas a::before {
  background: no-repeat center/contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'><path fill='%23000' d='M704 288h131.072a32 32 0 0131.808 28.8L886.4 512h-64.384l-16-160H704v96a32 32 0 11-64 0v-96H384v96a32 32 0 01-64 0v-96H217.92l-51.2 512H512v64H131.328a32 32 0 01-31.808-35.2l57.6-576a32 32 0 0131.808-28.8H320v-22.336C320 154.688 405.504 64 512 64s192 90.688 192 201.664v22.4zm-64 0v-22.336C640 189.248 582.272 128 512 128c-70.272 0-128 61.248-128 137.664v22.4h256zm201.408 483.84L768 698.496V928a32 32 0 11-64 0V698.496l-73.344 73.344a32 32 0 11-45.248-45.248l128-128a32 32 0 0145.248 0l128 128a32 32 0 11-45.248 45.248z'/></svg>");
}
li.wiemspro-link--codigo a::before {
  background: no-repeat center/contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14.2199 21.63C13.0399 21.63 11.3699 20.8 10.0499 16.83L9.32988 14.67L7.16988 13.95C3.20988 12.63 2.37988 10.96 2.37988 9.78001C2.37988 8.61001 3.20988 6.93001 7.16988 5.60001L15.6599 2.77001C17.7799 2.06001 19.5499 2.27001 20.6399 3.35001C21.7299 4.43001 21.9399 6.21001 21.2299 8.33001L18.3999 16.82C17.0699 20.8 15.3999 21.63 14.2199 21.63ZM7.63988 7.03001C4.85988 7.96001 3.86988 9.06001 3.86988 9.78001C3.86988 10.5 4.85988 11.6 7.63988 12.52L10.1599 13.36C10.3799 13.43 10.5599 13.61 10.6299 13.83L11.4699 16.35C12.3899 19.13 13.4999 20.12 14.2199 20.12C14.9399 20.12 16.0399 19.13 16.9699 16.35L19.7999 7.86001C20.3099 6.32001 20.2199 5.06001 19.5699 4.41001C18.9199 3.76001 17.6599 3.68001 16.1299 4.19001L7.63988 7.03001Z' fill='%23000'/><path d='M10.11 14.4C9.92005 14.4 9.73005 14.33 9.58005 14.18C9.29005 13.89 9.29005 13.41 9.58005 13.12L13.16 9.53C13.45 9.24 13.93 9.24 14.22 9.53C14.51 9.82 14.51 10.3 14.22 10.59L10.64 14.18C10.5 14.33 10.3 14.4 10.11 14.4Z' fill='%23000'/></svg>");
}
li.wiemspro-link--micuenta a::before {
  background: no-repeat center/contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M5.12104 17.8037C7.15267 16.6554 9.4998 16 12 16C14.5002 16 16.8473 16.6554 18.879 17.8037M15 10C15 11.6569 13.6569 13 12 13C10.3431 13 9 11.6569 9 10C9 8.34315 10.3431 7 12 7C13.6569 7 15 8.34315 15 10ZM21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z' stroke='%234A5568' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
li.wiemspro-link--salir a::before {
  background: no-repeat center/contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M17 16L21 12M21 12L17 8M21 12L7 12M13 16V17C13 18.6569 11.6569 20 10 20H6C4.34315 20 3 18.6569 3 17V7C3 5.34315 4.34315 4 6 4H10C11.6569 4 13 5.34315 13 7V8' stroke='%23374151' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}




.wiemspro-sidebar li.is-active {}
.wiemspro-sidebar li.is-active a {}







.wiemspro-dashboard-container{
	display: flex; 
	gap: 20px;
	margin-top: 30px;
}

/* Layout específico para dashboard de agente comercial (3 divs) */
.wiemspro-dashboard-container.agente-comercial {
	flex-wrap: wrap;
}

/* Primeros dos divs al 50% cada uno */
.wiemspro-dashboard-container.agente-comercial .wiemspro-chart-section {
	flex: 1;
	min-width: calc(50% - 10px);
	/* max-width: calc(50% - 10px); */
	border: 1px solid #f2f2f2;
}

/* Tercer div (tabla) ocupa toda la fila inferior */
.wiemspro-dashboard-container.agente-comercial .wiemspro-payments-section {
	flex: 1 1 100%; /* flex-grow: 1, flex-shrink: 1, flex-basis: 100% */
	width: 100%;
}
.wiemspro-chart-section{
	flex: 1;
	background: #f9f9f9;
	padding: 20px;
	border-radius: 8px;
}
.wiemspro-dashboard-container h3{
	margin-top: 0; 
	margin-bottom: 20px; 
	color: #333;
}
.chart-container{
	position: relative;
	height: auto;
}
.wiemspro-payments-section{
	flex: 1;
	background: #f9f9f9;
	padding: 20px;
	border-radius: 8px;
}

/* Base tablas custom dashboard */
.custom-dashboard-table {
	overflow-x: auto;
}
.custom-dashboard-table table{
	width: 100%;
	border-collapse: collapse;
	background: white;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.custom-dashboard-table table thead tr{
	background: #414141;
	color: white;
}
.custom-dashboard-table table thead th{
	padding: 12px 8px;
	text-align: left;
	font-weight: 600;
}
.custom-dashboard-table table tbody tr{
	border-bottom: 1px solid #eee;
}
.custom-dashboard-table table tbody td{
	padding: 12px 8px;
	font-weight: 500;
}
.wiemspro-form-info em {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 12px;
	font-style: normal;
}

.btn-ver-todo{
	color: #414141;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
}

/* =====================================
   FILTRO DE FECHAS
===================================== */
.wiemspro-filter-container {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
}

.filter-row {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    flex-wrap: wrap;
}

.filter-row label {
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
    display: inline-block;
    min-width: 80px;
    line-height: 38px; /* Alinear con el select */
}

.date-filter-select {
    min-width: 150px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    font-size: 14px;
    cursor: pointer;
}

.date-filter-select:focus {
    outline: none;
    border-color: #414141;
    box-shadow: 0 0 0 2px rgba(65, 65, 65, 0.1);
}

.custom-date-range {
    display: none; /* Oculto por defecto */
    flex-direction: row;
    align-items: flex-end;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e9ecef;
    width: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.custom-date-range.show {
    display: flex !important;
    opacity: 1;
}

.date-input-group {
    display: flex;
    flex-direction: column;
    min-width: 150px;
}

.date-input-group label {
    font-size: 13px;
    font-weight: 500;
    color: #666;
    margin-bottom: 5px;
    line-height: normal;
}

.datepicker {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    font-size: 14px;
    cursor: pointer;
}

.datepicker:focus {
    outline: none;
    border-color: #414141;
    box-shadow: 0 0 0 2px rgba(65, 65, 65, 0.1);
}

.btn-apply-filter {
    background: #414141;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    height: fit-content;
    transition: background-color 0.2s;
}

.btn-apply-filter:hover {
    background: #333;
}

.btn-apply-filter:active {
    background: #222;
}

.filter-applied-info {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    padding: 10px 15px;
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.filter-applied-info button {
    background: none;
    border: none;
    color: #155724;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    margin-left: 10px;
    line-height: 1;
}

.filter-applied-info button:hover {
    color: #0a3b1a;
}

/* Responsive para filtros */
@media (max-width: 768px) {
    .filter-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-row label {
        line-height: normal;
    }
    
    .custom-date-range {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .date-input-group {
        min-width: auto;
    }
    
    .btn-apply-filter {
        align-self: flex-start;
    }
}





@media (max-width: 768px) {
    .wiemspro-dashboard-container,
    .wiemspro-dashboard-container.agente-comercial {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 15px !important;
    }
    
    .wiemspro-chart-section,
    .wiemspro-payments-section {
        padding: 15px !important;
        min-width: auto !important;
        max-width: none !important;
        width: 100% !important;
        flex: none !important;
    }
    
    .chart-container {
        height: 250px !important;
    }
    
    table th,
    table td {
        padding: 8px 6px !important;
        font-size: 14px !important;
    }
}

/* ================================================= */
/* ESTILOS PARA SISTEMA DE CÓDIGOS DE REFERIDO */
/* ================================================= */

/* Formulario de envío de códigos */
.wiemspro-send-code-form {
    background: #ffffff;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.referral-form .form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.referral-form .form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.referral-form label {
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    font-size: 14px;
}

.referral-form input[type="text"],
.referral-form input[type="email"],
.referral-form input[type="date"],
.referral-form input[type="number"] {
    padding: 12px 15px;
    border: 2px solid #e1e1e1;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.referral-form input:focus {
    outline: none;
    border-color: #007cba;
    box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1);
}

.referral-form .form-help {
    color: #666;
    font-size: 12px;
    margin-top: 5px;
    font-style: italic;
}

.form-actions {
    text-align: left;
    margin-top: 25px;
}

.btn-send-code {

}

.btn-send-code:hover {
}

.btn-send-code:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Mensajes del formulario */
.form-message {
    padding: 15px 20px;
    border-radius: 6px;
    margin-top: 20px;
    font-size: 14px;
}

.form-message.success {
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
}

.form-message.error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

/* Sección de tabla de códigos */
.wiemspro-codes-table-section {
    background: #ffffff;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.wiemspro-codes-table-section h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
    font-size: 20px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
}

/* Tabla de códigos */
.codes-table-container {
    overflow-x: auto;
    margin-bottom: 20px;
}

.wiemspro-codes-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    overflow: hidden;
}

.wiemspro-codes-table th {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #495057;
    font-weight: 600;
    padding: 15px 12px;
    text-align: left;
    border-bottom: 2px solid #dee2e6;
    font-size: 14px;
}

.wiemspro-codes-table td {
    padding: 12px;
    border-bottom: 1px solid #f1f3f4;
    vertical-align: middle;
    font-size: 14px;
}

.wiemspro-codes-table tbody tr:hover {
    background-color: #f8f9fa;
}

.wiemspro-codes-table tbody tr:last-child td {
    border-bottom: none;
}

/* Celda del código */
.code-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 250px; /* Espacio mínimo para códigos largos */
}

.referral-code {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    color: #007cba;
    background: #f8f9fa;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #e9ecef;
    white-space: nowrap; /* Evitar que el código se parta en líneas */
    overflow: hidden;
    text-overflow: ellipsis; /* Mostrar ... si es muy largo */
    max-width: 200px; /* Límite para evitar desbordamiento */
    font-size: 13px; /* Reducir ligeramente para códigos largos */
}

.copy-code-btn {
    background: #28a745;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.3s ease;
}

.copy-code-btn:hover {
    background: #218838;
}

/* Estados de uso */
.status-used {
    color: #28a745;
    font-weight: bold;
}

.status-unused {
    color: #dc3545;
    font-weight: bold;
}

.no-expiry {
    color: #6c757d;
    font-style: italic;
}

.usage-count {
    font-weight: bold;
    color: #007cba;
}

/* Botón ver ventas */
.view-sales-btn {
    background: #17a2b8;
    color: white;
    border: none;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    margin-top: 5px;
    transition: background-color 0.3s ease;
}

.view-sales-btn:hover {
    background: #138496;
}

/* Paginación */
.codes-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 20px;
}

.pagination-btn {
    display: inline-block;
    padding: 8px 15px;
    border: 1px solid #dee2e6;
    color: #007cba;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.pagination-btn:hover {
    background-color: #007cba;
    color: white;
    text-decoration: none;
}

.pagination-btn.current {
    background-color: #007cba;
    color: white;
    border-color: #007cba;
}

/* Mensaje cuando no hay códigos */
.no-codes-message {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
}

.no-codes-message p {
    margin: 10px 0;
}

/* Modal para ventas */
.wiemspro-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: white;
    border-radius: 8px;
    width: 90%;
    max-width: 900px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid #dee2e6;
    background: #f8f9fa;
}

.modal-header h3 {
    margin: 0;
    color: #333;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #6c757d;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.modal-close:hover {
    background: #dee2e6;
    color: #333;
}

.modal-body {
    padding: 25px;
    max-height: calc(80vh - 80px);
    overflow-y: auto;
}

#modal-loading {
    text-align: center;
    padding: 40px;
    color: #6c757d;
}

/* Tabla de ventas en modal */
.modal-sales-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.modal-sales-table th {
    background: #f8f9fa;
    padding: 12px 8px;
    text-align: left;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
}

.modal-sales-table td {
    padding: 12px 8px;
    border-bottom: 1px solid #f1f3f4;
}

.modal-sales-table tbody tr:hover {
    background-color: #f8f9fa;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .referral-form .form-row {
        flex-direction: column;
        gap: 15px;
    }
    
    .wiemspro-send-code-form,
    .wiemspro-codes-table-section {
        padding: 20px 15px;
    }
    
    .codes-table-container {
        font-size: 12px;
    }
    
    .wiemspro-codes-table th,
    .wiemspro-codes-table td {
        padding: 8px 6px;
    }
    
    .code-cell {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        min-width: auto; /* Reset para móviles */
    }
    
    .referral-code {
        max-width: 100%; /* Usar todo el ancho disponible en móviles */
        font-size: 12px; /* Más pequeño en móviles */
    }
    
    .modal-content {
        width: 95%;
        margin: 20px;
    }
    
    .modal-header {
        padding: 15px 20px;
    }
    
    .modal-body {
        padding: 20px 15px;
    }
    
    .modal-sales-table {
        font-size: 12px;
    }
    
    .modal-sales-table th,
    .modal-sales-table td {
        padding: 8px 4px;
    }
}

@media (max-width: 480px) {
    .wiemspro-codes-table {
        font-size: 11px;
    }
    
    .btn-send-code {
        width: 100%;
        min-width: auto;
    }
    
    .codes-pagination {
        flex-wrap: wrap;
    }
    
    .pagination-btn {
        padding: 6px 10px;
        font-size: 12px;
    }
}