<style>
:root {
–primary: #2271b1;
–primary-hover: #135e96;
–success: #46b450;
–warning: #ffb900;
–error: #dc3232;
–gray: #f6f7f7;
–border: #ccd0d4;
}

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

body {
font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen, Ubuntu, Cantarell, ‘Open Sans’, ‘Helvetica Neue’, sans-serif;
line-height: 1.5;
color: #333;
background-color: #f1f1f1;
padding: 20px;
}

.container {
max-width: 1200px;
margin: 0 auto;
background: white;
border: 1px solid var(–border);
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0,0,0,0.04);
}

header {
background: var(–gray);
padding: 20px;
border-bottom: 1px solid var(–border);
display: flex;
justify-content: space-between;
align-items: center;
}

h1 {
font-size: 23px;
font-weight: 400;
color: #23282d;
}

.logo {
font-weight: bold;
color: var(–primary);
font-size: 20px;
}

.content {
padding: 20px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}

@media (max-width: 768px) {
.content {
grid-template-columns: 1fr;
}
}

.card {
background: white;
border: 1px solid var(–border);
border-radius: 4px;
padding: 20px;
}

.card-title {
font-size: 16px;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid var(–border);
}

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

label {
display: block;
margin-bottom: 5px;
font-weight: 500;
}

input[type=»text»], select {
width: 100%;
padding: 8px;
border: 1px solid var(–border);
border-radius: 4px;
font-size: 14px;
}

.checkbox-group {
margin-top: 10px;
}

.checkbox-group label {
display: flex;
align-items: center;
font-weight: normal;
margin-bottom: 8px;
}

.checkbox-group input {
margin-right: 8px;
}

.button {
background: var(–primary);
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background 0.2s;
}

.button:hover {
background: var(–primary-hover);
}

.button-success {
background: var(–success);
}

.button-success:hover {
background: #3a9442;
}

.button-warning {
background: var(–warning);
color: #000;
}

.button-warning:hover {
background: #e6a400;
}

.progress-container {
margin: 20px 0;
background: var(–gray);
border-radius: 4px;
overflow: hidden;
}

.progress-bar {
height: 20px;
background: var(–primary);
width: 0%;
transition: width 0.3s;
text-align: center;
color: white;
font-size: 12px;
line-height: 20px;
}

.log-container {
height: 300px;
overflow-y: auto;
background: #2a3138;
color: #fff;
padding: 15px;
border-radius: 4px;
font-family: monospace;
font-size: 13px;
}

.log-entry {
margin-bottom: 8px;
padding-left: 10px;
border-left: 3px solid transparent;
}

.log-success {
border-left-color: var(–success);
color: #9ee7a3;
}

.log-error {
border-left-color: var(–error);
color: #ffabaf;
}

.log-warning {
border-left-color: var(–warning);
color: #ffd567;
}

.log-info {
border-left-color: var(–primary);
color: #9ec2e6;
}

.status-indicators {
display: flex;
gap: 15px;
margin: 20px 0;
flex-wrap: wrap;
}

.status-item {
display: flex;
align-items: center;
}

.status-color {
width: 15px;
height: 15px;
border-radius: 50%;
margin-right: 8px;
}

.status-imported {
background: var(–success);
}

.status-updated {
background: var(–primary);
}

.status-error {
background: var(–error);
}

.status-skipped {
background: var(–warning);
}

.stats {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 15px;
margin: 20px 0;
}

.stat-card {
background: var(–gray);
padding: 15px;
border-radius: 4px;
text-align: center;
}

.stat-value {
font-size: 24px;
font-weight: bold;
margin-bottom: 5px;
}

.stat-label {
font-size: 13px;
color: #666;
}

.diagnostic-section {
margin-top: 30px;
padding: 20px;
background-color: #fff8e1;
border-left: 4px solid #ffb900;
}

.config-section {
background: #f8f9fa;
padding: 15px;
border-radius: 4px;
margin-bottom: 20px;
}

.config-title {
font-weight: 500;
margin-bottom: 10px;
color: #555;
}

.action-buttons {
display: flex;
gap: 10px;
margin-top: 20px;
flex-wrap: wrap;
}

.missing-data-panel {
margin-top: 20px;
border: 1px solid var(–warning);
border-radius: 4px;
overflow: hidden;
}

.missing-data-header {
background: var(–warning);
color: #000;
padding: 10px 15px;
display: flex;
justify-content: space-between;
align-items: center;
}

.missing-data-content {
max-height: 200px;
overflow-y: auto;
padding: 15px;
}

.missing-data-item {
padding: 10px;
border-bottom: 1px solid var(–border);
display: flex;
justify-content: space-between;
align-items: center;
}

.missing-data-item:last-child {
border-bottom: none;
}

.missing-details {
font-size: 13px;
}
</style>
</head>
<body>
<div class=»container»>
<header>
<h1>Importador de Productos CDO – Campos Flexibles</h1>
<div class=»logo»>CDO IMPORTER FLEX</div>
</header>

<div class=»content»>
<div class=»card»>
<h2 class=»card-title»>Configuración de la API</h2>

<div class=»form-group»>
<label for=»api-token»>Token API</label>
<input type=»text» id=»api-token» value=»G6pAgrQKu3PTn836BfyZHQ»>
</div>

<div class=»form-group»>
<label for=»api-url»>URL API</label>
<input type=»text» id=»api-url» value=»http://api.chile.cdopromocionales.com/v2/products»>
</div>

<h2 class=»card-title»>Configuración de Importación</h2>

<div class=»config-section»>
<div class=»config-title»>Manejo de Campos Faltantes</div>
<div class=»checkbox-group»>
<label><input type=»checkbox» name=»import-options» value=»force-import» checked> Forzar importación incluso con campos faltantes</label>
<label><input type=»checkbox» name=»import-options» value=»auto-generate-sku» checked> Generar SKU automáticamente si falta</label>
<label><input type=»checkbox» name=»import-options» value=»use-default-price» checked> Usar precio por defecto ($0) si falta</label>
<label><input type=»checkbox» name=»import-options» value=»create-missing-categories» checked> Crear categorías automáticamente</label>
</div>
</div>

<div class=»config-section»>
<div class=»config-title»>Valores por Defecto</div>
<div class=»form-group»>
<label for=»default-price»>Precio por defecto ($)</label>
<input type=»text» id=»default-price» value=»0″>
</div>
<div class=»form-group»>
<label for=»default-status»>Estado de inventario por defecto</label>
<select id=»default-status»>
<option value=»in_stock»>En stock</option>
<option value=»out_of_stock» selected>Sin stock</option>
<option value=»on_backorder»>Bajo pedido</option>
</select>
</div>
</div>

<button class=»button» id=»save-settings»>Guardar Configuración</button>
</div>

<div class=»card»>
<h2 class=»card-title»>Importación de Productos</h2>

<p>El sistema importará productos incluso cuando falten campos obligatorios, usando valores por defecto.</p>

<div class=»stats»>
<div class=»stat-card»>
<div class=»stat-value» id=»total-products»>0</div>
<div class=»stat-label»>Productos Totales</div>
</div>
<div class=»stat-card»>
<div class=»stat-value» id=»processed-products»>0</div>
<div class=»stat-label»>Procesados</div>
</div>
<div class=»stat-card»>
<div class=»stat-value» id=»missing-data»>0</div>
<div class=»stat-label»>Con datos faltantes</div>
</div>
</div>

<div class=»progress-container»>
<div class=»progress-bar» id=»import-progress»>0%</div>
</div>

<div class=»action-buttons»>
<button class=»button button-success» id=»start-import»>Iniciar Importación</button>
<button class=»button button-warning» id=»reset-import» disabled>Reiniciar Importación</button>
</div>

<div class=»status-indicators»>
<div class=»status-item»>
<div class=»status-color status-imported»></div>
<span>Importados</span>
</div>
<div class=»status-item»>
<div class=»status-color status-updated»></div>
<span>Actualizados</span>
</div>
<div class=»status-item»>
<div class=»status-color status-error»></div>
<span>Con error</span>
</div>
<div class=»status-item»>
<div class=»status-color status-skipped»></div>
<span>Datos faltantes</span>
</div>
</div>

<h3 class=»card-title»>Registro de Importación</h3>
<div class=»log-container» id=»import-log»>
<div class=»log-entry log-info»>Sistema listo para importar productos. Los productos con campos faltantes se importarán con valores por defecto.</div>
</div>