html {
    scroll-behavior: smooth;
}
#vivra-header-top,#current_representation,#vivra-import-container{
    scroll-margin-top: 200px; /* Ajusta el margen superior para el scroll */
}

/*
Avisos
*/
.vivra-alert{
    padding: 10px 0px;
    position: relative;
    padding-left: 25px;
}
.vivra-alert::before {
    content: "✗";
    color: #000000;
    position: absolute;
    left: 5px;
    top: 10px;
}
.vivra-success {
    padding: 10px 0px;
    position: relative;
    padding-left: 25px;
}
/*
.vivra-success::before {
    content: "✓";
    color: #000000;
    position: absolute;
    left: 5px;
    top: 10px;
}
*/
.vivra-success::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 13px;
    width: 16px;
    height: 16px;
    background-image: url('../images/check.png'); /* o .png, .jpg */
    background-size: contain;
    background-repeat: no-repeat;
}
.vivra-danger{
    padding: 10px 0px;
    position: relative;
    padding-left: 25px;
}
/*
.vivra-danger::before {
    content: "⚠";
    color: #000000;
    position: absolute;
    left: 5px;
    top: 10px;
}
*/
.vivra-danger::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 13px;
    width: 16px;
    height: 16px;
    background-image: url('../images/warning.png'); /* o .png, .jpg */
    background-size: contain;
    background-repeat: no-repeat;
}
/*
Filtro de servicios
*/
#vivra-filter-form{
    padding-top: 40px;
}
.vivra-form-group{
    display: block;
    margin-bottom: 3rem;
}
.vivra-form-group label{
    display: block;
    font-weight: Bold;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    font-family: 'Fira Sans', sans-serif;
    font-size: 15px;
}
.vivra-form-group input[type="text"],
.vivra-form-group input[type="email"],
.vivra-form-group input[type="tel"],
.vivra-form-group select {
    width: 100%;
    border: 0px solid #ccc;
    border-bottom: 1px solid #000;
    border-radius: 0px;
    box-sizing: border-box;
}
.vivra-form-group .select2-container {
    width: 100% !important;
    box-sizing: border-box;
}

.vivra-form-group .select2-container--default .select2-selection--single {
    border: 0px solid #ccc;
    border-bottom: 1px solid #AAA9A9;
    border-radius: 0px;
    height: auto; /* para que se adapte mejor */
    box-sizing: border-box;
    /*padding: 6px 0;*/
}
.vivra-form-group .select2-container--default .select2-selection--single .select2-selection__arrow{
    border-width: 0px!important;
}
.vivra-form-group .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 0; /* quita el padding extra que mete select2 */
}
.vivra-form-group input[type="text"]:focus,
.vivra-form-group input[type="email"]:focus,
.vivra-form-group input[type="tel"]:focus,
.vivra-form-group select:focus {
    border-color: #007bff;
    outline: none;
}
.vivra-btn {
    background-color: #00B0F5;
    color: white;
    border: none;
    padding: 5px 15px;
    cursor: pointer;
    font-family: 'Fira Sans', sans-serif;
    font-weight: bold;
    font-size: 14px;
}

.vivra-btn:hover {
    background-color: #00B0F5;
    color: white!important;
}
/*
.vivra-btn:active {
    background-color: #00B0F5;
}
*/
.vivra-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}
.btn-right{
    float: right;
}

/*
 * Estilos para los filtros activos
 */
.vivra-active-filters {
    margin: 15px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    
}

.vivra-filter-tag {
    background-color: #E6E6E6;
    border-radius: 7px;
    padding: 0px 3px;
    color: #292929;
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

.vivra-filter-tag:hover {
    background-color: #e0e0e0;
}

.vivra-remove-filter {
    margin-left: 8px;
    font-weight: bold;
    font-size: 16px;
}

.vivra-reset-all {
    background-color: #333;
    color: white;
    border-radius: 7px;
    padding: 1px 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.vivra-reset-all:hover {
    background-color: #000;
}

.d-none {
    display: none;
}

/*
Listado de servicios
*/
.vivra-services-container {
    max-width: 100%;
    margin: 0 auto;
    font-family: Arial, sans-serif!important;
    margin-bottom: 30px;
    overflow-x: hidden;
}

.vivra-service-card {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    background-color: #FFFFFF;
    /*border: 1px solid #e0e0e0;
    border-radius: 4px;*/
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    align-items: flex-start;
}

.vivra-service-left {
    flex: 0 0 30%;
    padding-right: 20px;
    min-width: 30%;
}

.vivra-service-middle {
    flex: 0 0 35%;
    padding-right: 20px;
    min-width: 35%;
}

.vivra-service-right {
    flex: 0 0 35%;
    min-width: 35%;
}

.vivra-country {
    font-family: 'Fira Sans', sans-serif;
    font-size: 20px!important;
    font-weight: bold;
    margin-top: 0;
    color: #191919;
    /* poner en mayusculas */
    text-transform: uppercase;
}

.vivra-label {
    font-size: 14px;
    color: #AAA9A9;
    margin-bottom: 0px!important;
    padding-bottom: 0px!important;
}

.vivra-value {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 15px;
    color: #292929;
    word-break: break-word;
    overflow-wrap: break-word;
}

.vivra-principal {
    font-weight: bold;
    margin-bottom: 5px!important;
    font-size: 16px;
    text-transform: capitalize;
}

.vivra-country-value {
    color: #666;
    margin-top: 0;
    word-break: break-word;
    overflow-wrap: break-word;
    border-top: 1px solid #eee;
    padding: 10px 20px 0px 0px;
    margin-bottom: 5px!important;
}

.vivra-operates-in {
    margin-top: 5px;
}

.vivra-operates-header {
    margin-bottom: 8px;
}

.vivra-operates-text {
    font-size: 14px;
    color: #AAA9A9;
    margin-bottom: 0px!important;
    padding-bottom: 0px!important;
}

.vivra-dropdown-icon {
    font-size: 12px;
    color: #777;
    margin-left: 5px;
    display: inline-block;
}

.vivra-countries-list {
    font-size: 14px;
    line-height: 1.5;
    padding-left: 5px;
    margin-top: 5px;
    color: #333;
}

.vivra-country-link {
    color: #0073aa;
    text-decoration: none;
    transition: color 0.2s;
    margin-right: 2px;
}

.vivra-country-link:hover {
    color: #00a0d2;
    text-decoration: underline;
}

.vivra-country-text {
    color: #666;
    margin-right: 2px;
}

.vivra-no-results {
    /*
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;*/
    padding: 20px;
    margin-top: 100px;
    /*text-align: center;*/
    color:#000000;
    font-weight: bold;
    font-size: 20px;
}
.vivra-no-results .vivra-info-text{
    font-size: 16px;
    color: #000000;
    font-weight: normal;
    max-width: 50%;
}
/* estilos para .vivra-no-results .vivra-info-text en dispositivos móviles */
@media (max-width: 768px) {
    .vivra-no-results .vivra-info-text {
        max-width: 100%;
    }
}
/* Paginación */
/* Estilos unificados para la paginación */
.vivra-pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 20px;
}

.vivra-pagination {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.vivra-pagination-info {
    color: #666;
    font-size: 14px;
}

.vivra-pagination-info span {
    font-weight: normal;
}

.vivra-pagination-info #showing-from,
.vivra-pagination-info #showing-to,
.vivra-pagination-info #total-items {
    font-weight: bold;
    color: #333;
}

.vivra-pagination .vivra-page-item {
    margin: 0 2px;
}

.vivra-page-link {
    display: inline-block;
    padding: 3px 10px!important;
    color: #ffffff!important;
    text-decoration: none;
    background-color: #00B0F5;
    cursor: pointer;
}

.vivra-page-link.current, 
.vivra-page-item.active .vivra-page-link {
    background-color: #FFFFFF;
    color: #00B0F5!important;
    border: 1px solid #00B0F5
}
/*
.vivra-page-link:hover:not(.current):not(.disabled), 
.vivra-page-item:not(.active):not(.disabled):hover .vivra-page-link {
    background-color: #f5f5f5;
}
*/
.vivra-page-dots,
.vivra-page-item.disabled .vivra-page-link {
    padding: 0 5px;
    color: #999;
    cursor: default;
}

.vivra-page-link.next,
.vivra-page-link.prev,
.vivra-page-item:not(.disabled) a[class*="next"],
.vivra-page-item:not(.disabled) a[class*="prev"] {
    font-weight: bold;
    color: #FFFFFF;
    background-color: #00B0F5;
}

/* Asegurar que los elementos ocultos en móvil sean visibles en escritorio */
@media (min-width: 769px) {
    .hide-on-mobile {
        display: inline-block !important;
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .vivra-service-card {
        flex-direction: column;
        flex-wrap: wrap;
    }
    
    .vivra-service-left,
    .vivra-service-middle,
    .vivra-service-right {
        flex: 1 1 100%;
        width: 100%;
        min-width: 100%;
        padding-right: 0;
        margin-bottom: 15px;
    }
    
    .vivra-pagination-container {
        flex-direction: column;
        align-items: center;
    }
    
    /* Ocultar el botón de importar CSV en dispositivos móviles */
    .hide-on-mobile {
        display: none !important;
    }
    
    .vivra-pagination-info {
        margin-bottom: 15px;
        text-align: center;
    }
    
    .vivra-pagination {
        justify-content: center;
    }
}

/*
Representation
*/
.vivra-form-representation-container,.vivra-form-principal-container{
    width:60%;
    margin-top: 100px;
}
.vivra-form-representation-container .vivra-form-group{
    display: block;
    margin-bottom: 1.5rem;
}
.vivra-form-representation-container .vivra-form-group input[type="text"],
.vivra-form-representation-container .vivra-form-group input[type="email"],
.vivra-form-representation-container .vivra-form-group input[type="tel"],
.vivra-form-representation-container .vivra-form-group select {
    width: 224px;
    height: 37px; /* Altura fija que incluye el padding vertical */
    padding: 0 20px; /* Sólo padding horizontal */
    border: 0px solid #ccc;
    border-bottom: 0px solid #000;
    border-radius: 0px;
    box-sizing: border-box;
    appearance: menulist; /* Asegura que se muestre el menú desplegable nativo */
    -webkit-appearance: menulist; /* Para Safari */
    -moz-appearance: menulist; /* Para Firefox */
}
.vivra-form-representation-container .vivra-form-group .select2-container {
    width: 224px !important;
    box-sizing: border-box;
}

.vivra-form-representation-container .vivra-form-group .select2-container--default .select2-selection--single {
    height: 37px;
    padding: 0 20px;
    border: 0px solid #ccc;
    border-bottom: 0px solid #000;
    border-radius: 0px;
    box-sizing: border-box;
    display: flex;
    align-items: center; /* Centra verticalmente el texto */
}

.vivra-form-representation-container .vivra-form-group .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 0;
    padding-right: 0;
    line-height: normal;
}

.vivra-form-representation-container .vivra-form-group .select2-container--default .select2-selection--single .select2-selection__arrow {
    right: 8px;
}
.vivra-form-representation-container form{
    padding-bottom: 20px;
}
.vivra-representations-list {
    margin-bottom: 20px;
}
.vivra-representation-item {
    display: inline-block;
    background-color: #f8f8f8;
    border-radius: 4px;
    padding: 5px 10px;
    margin: 0 5px 8px 0;
    border: 1px solid #e0e0e0;
}
.vivra-edit-btn {
    text-decoration: none;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}
/*
Services Form
*/
#vivra-form-principal-services {
    width: 60%;
    margin-top: 10px!important;
}
#vivra-form-principal-services .vivra-form-group{
    display: block;
    margin-bottom: 1.5rem;
}
#vivra-form-principal-services .vivra-form-group input[type="text"],
#vivra-form-principal-services .vivra-form-group input[type="email"],
#vivra-form-principal-services .vivra-form-group input[type="tel"],
#vivra-form-principal-services .vivra-form-group select {
    width: 295px;
    height: 37px; /* Altura fija que incluye el padding vertical */
    padding: 0 20px; /* Sólo padding horizontal */
    border: 0px solid #ccc;
    border-bottom: 0px solid #000;
    border-radius: 0px;
    box-sizing: border-box;
    appearance: menulist; /* Asegura que se muestre el menú desplegable nativo */
    -webkit-appearance: menulist; /* Para Safari */
    -moz-appearance: menulist; /* Para Firefox */
}
#vivra-form-principal-services .vivra-form-group .select2-container {
    width: 295px !important;
    box-sizing: border-box;
}

#vivra-form-principal-services .vivra-form-group .select2-container--default .select2-selection--single {
    height: 37px;
    padding: 0 20px;
    border: 0px solid #ccc;
    border-bottom: 0px solid #000;
    border-radius: 0px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

#vivra-form-principal-services .vivra-form-group .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 0;
    padding-right: 0;
    line-height: normal;
}

#vivra-form-principal-services .vivra-form-group .select2-container--default .select2-selection--single .select2-selection__arrow {
    right: 8px;
}
#vivra-form-principal-services .vivra-form-group .required{
    color:#00B0F5;
}
/*
Services Table
*/
/* Clase btn-right eliminada y reemplazada por vivra-buttons-container */
.vivra-services-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
.vivra-services-table th, 
.vivra-services-table td {
    padding: 3px 6px;
    text-align: left;
    /*border-bottom: 1px solid #ddd;*/
}
.vivra-services-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}
.vivra-edit-service, .vivra-delete-service {
    text-decoration: none;
    color: inherit;
    margin-right: 10px;
}
.vivra-edit-service:hover, .vivra-delete-service:hover {
    opacity: 0.7;
}
.vivra-icon {
    font-size: 18px;
    display: inline-block;
    color: inherit;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}
.vivra-icon:hover {
    opacity: 1;
}
.vivra-icon-edit {
    font-size: 17px;
}
.vivra-icon-delete {
    font-size: 16px;
}
.vivra-services-table tr:nth-child(even) {
    background-color: white;
}

.vivra-services-table tr:nth-child(odd) {
    background-color: transparent;
}

/* Mantener el efecto hover por encima del color alternado */
.vivra-services-table tr:hover {
    background-color: #f5f5f5;
}

/*
Importación de servicios
*/
.vivra-import-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px 0;
}

/* Barra de progreso */
.vivra-progress-container {
    margin-bottom: 30px;
}

.vivra-progress-bar {
    display: flex;
    justify-content: flex-start; /* Alineados a la izquierda */
    position: relative;
    margin-bottom: 30px;
    max-width: 600px;
}

/* Eliminamos la línea que conectaba los puntos */
.vivra-progress-bar:before {
    display: none; /* Ocultar la línea */
}

.vivra-progress-step {
    position: relative;
    width: 43px;
    height: 10px;
    border-radius: 2px;
    background-color: #AAAAAA; /* Gris para los pasos no completados */
    margin-right: 5px; /* Espacio entre los rectángulos (separados por 5px) */
    z-index: 1;
}

/* Eliminamos los números dentro de los pasos */
.vivra-progress-step:before {
    content: '';
}

.vivra-progress-step.active {
    background-color: #00B0F5; /* Azul para el paso activo (usando el mismo azul del botón) */
}

.vivra-progress-step.completed {
    background-color: #00B0F5; /* Azul para los pasos completados (igual que el activo) */
}

/* Contenido de los pasos */
.vivra-step-title {
    margin-top: 30px;
    margin-bottom: 10px;
    font-size: 20px;
    color: #333;
}

.vivra-step-description {
    margin-bottom: 25px;
    color: #666;
    max-width: 700px;
}

/* Formulario de carga */
.vivra-upload-form {
    max-width: 500px;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.vivra-file-input {
    border: 1px solid #ddd;
    padding: 8px;
    width: 100%;
    background-color: #fff;
    border-radius: 4px;
}

/* Vista previa del CSV */
.vivra-preview-container {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-top: 20px;
}

.vivra-csv-preview {
    overflow-x: auto;
    margin-bottom: 20px;
}

.vivra-csv-preview table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
}

.vivra-csv-preview th,
.vivra-csv-preview td {
    padding: 8px 12px;
    text-align: left;
    border: 1px solid #ddd;
    font-size: 14px;
}

.vivra-csv-preview th {
    background-color: #f2f2f2;
    position: relative;
}

.vivra-csv-preview th select {
    width: 100%;
    padding: 4px;
    margin-top: 6px;
    font-size: 14px;
    border-radius: 3px;
    border: 1px solid #ccc;
}

/* Mensajes y loader */
.vivra-message-container {
    margin-top: 15px;
}

.vivra-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    color: #666;
}

.vivra-loader:before {
    content: '';
    border: 3px solid #f3f3f3;
    border-top: 3px solid #007bff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    margin-right: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.vivra-btn.btn-secondary {
    background-color: #FFFFFF;
    margin-left: 3px;
    color:#191919;
    border: 1px solid #00B0F5;
}
.vivra-btn.btn-secondary:hover {
    background-color: #FFFFFF!important;
    /*margin-left: 10px;*/
    color:#191919!important;
    border: 1px solid #00B0F5;
}
/*
.vivra-btn.btn-secondary:hover {
    background-color: #CCCCCC;
}
*/
.vivra-btn.btn-secondary:active {
    background-color: #CCCCCC;
}

/* Botón de retorno a servicios */
.vivra-return-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.vivra-return-wrapper .vivra-btn {
    font-size: 0.9rem;
}

.vivra-buttons-container {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 15px;
}

/* Estilos para la validación de datos */
.vivra-validation-summary {
    /*background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);*/
    margin-bottom: 25px;
}

.vivra-validation-stats {
    display: flex;
    /*justify-content: space-around;*/
    flex-wrap: wrap;
    gap: 9px;
}

.vivra-stat {
    text-align: center;
    padding: 5px 40px;
    min-width: 120px;
}

.vivra-stat.valid {
    background-color: #A4E0F8;
    color: #000000;
}

.vivra-stat.invalid {
    background-color: #F4B0A1;
    color: #000000;
}

.vivra-stat.total {
    background-color: #e2e3e5;
    color: #383d41;
}

.vivra-stat-number {
    font-size: 20px;
    font-weight: bold;
}

.vivra-stat-label {
    font-size: 20px;
    font-weight: bold;
}
/*
.vivra-validation-container {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
*/
.vivra-csv-validation {
    overflow-x: auto;
    margin-bottom: 20px;
    max-height: 500px;
    overflow-y: auto;
}

.vivra-csv-validation table {
    width: 100%;
    border-collapse: collapse;
    /*background-color: #fff;*/
}

.vivra-csv-validation th,
.vivra-csv-validation td {
    padding: 8px 12px;
    text-align: left;
    border: 1px solid #ddd;
    font-size: 14px;
}

.vivra-csv-validation th {
    background-color: #f2f2f2;
    position: sticky;
    top: 0;
    z-index: 10;
}

.vivra-csv-validation tr:hover {
    background-color: #f5f5f5;
}

.vivra-csv-validation td.status-cell {
    text-align: center;
    width: 80px;
}

.vivra-csv-validation .status-icon {
    font-size: 16px;
    font-weight: bold;
}

.vivra-csv-validation .status-valid {
    color: #28a745;
}

.vivra-csv-validation .status-invalid {
    color: #dc3545;
}

.vivra-csv-validation .error-message {
    color: #dc3545;
    font-size: 12px;
    margin-top: 4px;
    background-color: rgba(220, 53, 69, 0.05);
    padding: 4px 8px;
    border-radius: 3px;
    border-left: 3px solid #dc3545;
}

.vivra-csv-validation td.has-error {
    background-color: rgba(220, 53, 69, 0.05);
}

.vivra-csv-validation .info-message {
    color: #0d6efd;
    font-size: 12px;
    margin-top: 4px;
}

.vivra-actions-container {
    margin-top: 20px;
}

#start-import-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Estilos para el resumen de importación */
/*
.vivra-import-summary {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-top: 20px;
    margin-bottom: 20px;
}
*/
.vivra-summary-stats {
    margin-bottom: 20px;
    margin-top: 40px;
}

.vivra-stat-row {
    /*padding: 10px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;*/
    align-items: center;
}

.vivra-stat-row:last-child {
    border-bottom: none;
}

.vivra-stat-label {
    font-weight: bold;
    color: #000000;
    font-size: 16px;
}

.vivra-stat-value {
    font-weight: bold;
    color: #000000;
    font-size: 16px;
    padding-left: 5px;
}

/* Estilos para los iconos en el resumen de estadísticas de importación */
.vivra-stat-icon {
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
    width: 24px;
    text-align: center;
}

.vivra-stat-icon img {
    width: auto;
    height: 20px;
    vertical-align: middle;
}

.vivra-stat-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
/*
.vivra-stat-label {
    flex: 1;
}
*/
.vivra-errors-container h3{
    background: #ffffff;
    padding: 4px 15px;
    display: inline-block;
}
.vivra-error-list {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
}
.vivra-error-list li:nth-child(odd) {
    background-color: #ffffff;
}
/* 
Estilos para la tabla con paginación 
*/
.vivra-table-filters {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.vivra-items-per-page {
    display: flex;
    align-items: center;
}

.vivra-items-per-page label {
    margin-right: 10px;
}

.vivra-search-filter input {
    min-width: 200px;
}

/* Los estilos de paginación están unificados al inicio del archivo */

/* Estilos para protección de contenido */
.vivra-protected-content {
    -webkit-user-select: none;  /* Safari */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Standard */
    position: relative;
}

.vivra-protected-content::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 10;
    pointer-events: auto;
}

.vivra-context-disabled {
    position: relative;
}

/* Personalizar cursor para contenido protegido */
.vivra-protected-content * {
    cursor: default !important;
}

/* Mantener enlaces clickeables */
.vivra-protected-content a {
    position: relative;
    z-index: 20;
    cursor: pointer !important;
}

/* Técnicas adicionales para dificultar la copia de contenido */
.vivra-protected-content .vivra-value,
.vivra-protected-content .vivra-principal,
.vivra-protected-content .vivra-country-value {
    display: inline-flex;
    flex-wrap: wrap;
}

/* Dividir el texto en componentes separados para dificultar la copia */
.vivra-protected-content .vivra-value span,
.vivra-protected-content .vivra-principal span,
.vivra-protected-content .vivra-country-value span {
    display: inline-block;
    white-space: pre;
}

/* Modal de confirmación */
.vivra-modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vivra-modal-content {
    background-color: #ffffff; /* Cambiado a fondo blanco */
    margin: auto;
    border-radius: 10px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    animation: modalFadeIn 0.3s ease-in-out;
}

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

.vivra-modal-close {
    color: #555;
    position: absolute;
    right: 30px;
    top: 25px;
    font-size: 36px;
    font-weight: normal;
    cursor: pointer;
    z-index: 10;
    line-height: 36px;
}

.vivra-modal-close:hover,
.vivra-modal-close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.vivra-modal-header {
    padding: 30px 30px 0 30px;
    position: relative;
    text-align: left; /* Alineación a la izquierda */
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.vivra-modal-icon {
    display: inline-block;
}

.vivra-modal-icon img {
    width: 35px;
    height: auto;
}

.vivra-modal-body {
    padding: 20px 30px;
    text-align: left;
}

.vivra-modal-body h3.vivra_h3 {
    font-size: 20px!important;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #000000;
    font-weight: 400;
}


.vivra-modal-service-info {
    padding: 15px 0;
    margin-top: 10px;
    font-size: 14px;
    text-align: left;
    color: #000000;
}

.vivra-modal-footer {
    padding: 10px 30px 30px 30px;
    /* Sin borde superior */
}

.vivra-modal-footer .vivra-btn {
    margin: 0px 10px 0px 0px;
    background-color: #00B0F5;
    color: white;
    border: none;
    padding: 5px 15px;
    cursor: pointer;
    font-family: 'Fira Sans', sans-serif;
    font-weight: bold;
    font-size: 14px;
}
/*
.vivra-modal-footer .vivra-btn:hover {
    background-color: #0095d3;
}
*/
/* Eliminamos el estilo diferente para el botón secundario */
.vivra-modal-footer .btn-secondary {
    background-color: #00B0F5;
}
/*
.vivra-modal-footer .btn-secondary:hover {
    background-color: #0095d3;
}
*/
/* Estilos para el aviso de dispositivos móviles */
.vivra-mobile-warning {
    display: none;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 30px 20px;
    text-align: center;
    margin: 20px auto;
    max-width: 90%;
}

.vivra-mobile-warning-icon {
    font-size: 40px;
    margin-bottom: 15px;
    color: #00B0F5;
}

.vivra-mobile-warning-content h2 {
    color: #333;
    margin-bottom: 15px;
    font-size: 22px;
}

.vivra-mobile-warning-content p {
    color: #666;
    margin-bottom: 25px;
    font-size: 16px;
    line-height: 1.5;
}

.vivra-mobile-warning-actions {
    margin-top: 20px;
}

.vivra-mobile-warning-actions .vivra-btn {
    padding: 10px 25px;
    font-size: 16px;
}

/* En dispositivos móviles, mostrar advertencia y ocultar contenido de importación */
@media (max-width: 768px) {
    .vivra-mobile-warning {
        display: block;
        margin-top: 50px;
        margin-bottom: 50px;
    }
    
    .vivra-import-container {
        display: none !important; /* Forzar ocultamiento incluso si hay estilos inline */
    }
}

/* Estilos para la protección contra capturas de pantalla */
#vivra-print-warning {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.vivra-print-warning-content {
    background-color: #fff;
    padding: 30px 50px;
    border-radius: 10px;
    text-align: center;
    max-width: 90%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.vivra-print-warning-content p {
    font-size: 24px;
    font-weight: bold;
    color: #ff0000;
    margin: 0;
}

/* Posicionamiento relativo para el contenedor de la tarjeta para que las marcas de agua se posicionen correctamente */
.vivra-service-card {
    position: relative;
    overflow: hidden;
}

/* Marcas de agua diagonales */
.vivra-watermark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    z-index: 5;
}

/* Solo mostrar la marca de agua cuando se intenta capturar */
.vivra-distorted .vivra-watermark {
    opacity: 0.7;
    background: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.2),
        rgba(255, 255, 255, 0.2) 10px,
        rgba(255, 0, 0, 0.2) 10px,
        rgba(255, 0, 0, 0.2) 20px
    );
}

/* Marca de agua con texto */
.vivra-watermark:before {
    content: attr(data-text);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    font-size: 4vw;
    color: rgba(255, 0, 0, 0.5);
    white-space: nowrap;
    font-weight: bold;
    text-transform: uppercase;
    pointer-events: none;
    opacity: 0;
}

.vivra-distorted .vivra-watermark:before {
    opacity: 0.8;
}

/* Efecto de distorsión temporal del contenido */
.vivra-distorted {
    filter: blur(5px) contrast(50%) brightness(150%);
    transition: filter 0.2s;
}

/* Overlay adicional para protección */
.vivra-watermark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    z-index: 4;
    background-color: transparent;
    transition: opacity 0.2s;
}

.vivra-distorted .vivra-watermark-overlay {
    opacity: 0.3;
    background-color: rgba(0, 0, 0, 0.2);
}

/* Estilos para la tabla de servicios importados */
.vivra-import-services-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

/* Quitar bordes de la tabla */
.vivra-import-services-table.no-border,
.vivra-import-services-table.no-border td,
.vivra-import-services-table.no-border th {
    border: none;
}

/* Estilo para filas pares e impares */
.vivra-import-services-table .odd-row {
    background-color: #FFFFFF;
}

.vivra-import-services-table .even-row {
    background-color: transparent;
}

/* Estilos para celdas */
.vivra-import-services-table td {
    padding: 8px 12px;
    vertical-align: middle;
}

/* Estilo para la columna del número de fila */
.vivra-import-services-table .row-number {
    width: 30px;
    text-align: center;
    font-weight: bold;
}

/* Mejorar espaciado para textos dentro de la tabla */
.vivra-import-services-table b {
    margin-right: 5px;
}