@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/Inter-Regular.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/Inter-SemiBold.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/Inter-Bold.woff2") format("woff2");
}

:root {
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-base: 14px;
    --fs-lg: 18px;
    --fs-xl: 20px;
    --fs-xxl: 28px;

    --font-sans: "Inter", -apple-system, "Segoe UI", Arial, sans-serif;

    /* Flat UI: esquinas de 6px, colores solidos de la paleta flat en tonos tenues, relieve ligero. */
    --radius: 6px;
    --radius-sm: 5px;

    /* Marca: turquesa-verde oscuro apagado (texto blanco encima con contraste legible). */
    --brand: #2a7b6c;
    --brand-hover: #21665a;
    --on-brand: #ffffff;

    /* Superficie */
    --bg: #f2f5f6;
    --bg-elevated: #ffffff;
    --bg-subtle: #eaeff1;
    --border: #e4e9eb;
    --field: #cdd5d9;
    --btn: #e4e9eb;
    --btn-hover: #d6dde1;

    /* Texto */
    --text: #3d4f60;
    --text-muted: #5b6b78;
    --text-faint: #8d9aa5;

    /* Acento (foco, enlaces de accion) y color de elemento activo (turquesa pastel con texto oscuro) */
    --accent: #2a7b6c;
    --accent-hover: #21665a;
    --accent-subtle: #e3f3ef;
    --act: #8fd0c1;
    --act-ink: #1d4a41;

    /* Menu lateral: pizarra, igual en claro y oscuro */
    --side: #46586a;
    --side-ink: #eef2f4;
    --side-mut: #a9b6bf;
    --side-hover: #526579;

    /* Estado - tintes apagados con texto oscuro del mismo tono */
    --success-text: #2f6a47;
    --success-bg: #e1f1e7;
    --error-text: #8a3b33;
    --error-bg: #f8e3e0;
    --warning-text: #7a5a24;
    --warning-bg: #fbf0dc;
    --info-text: #35607f;
    --info-bg: #e4eef6;
    --dot: #6dbf8b;

    /* Bloques de color solido (estadisticas) con texto blanco */
    --tile-info: #44769e;
    --tile-ok: #3a8458;
    --tile-warn: #9c6a28;
    --tile-err: #b25046;

    /* Relieve ligero: sombra corta y neutra, nada difuso ni de color */
    --shadow-sm: 0 1px 2px rgba(44, 62, 80, 0.1), 0 1px 1px rgba(44, 62, 80, 0.06);
    --shadow-md: 0 2px 6px rgba(44, 62, 80, 0.12), 0 1px 2px rgba(44, 62, 80, 0.08);
    --edge: rgba(44, 62, 80, 0.22);
    --inset: inset 0 1px 2px rgba(44, 62, 80, 0.1);

    /* Logotipo "DataLab": verde azulado del logo + ambar del logo, sobre el menu lateral (--side).
       Contraste sobre --side: Data 4.6:1, Lab 4.6:1 (AA). */
    --wm-data: #74e0c6;
    --wm-lab: #f8c555;
    /* El mismo logotipo sobre la tarjeta de inicio de sesion (fondo blanco): tonos oscuros, AA. */
    --wm-data-card: #2a7b6c;
    --wm-lab-card: #9a6200;

    color-scheme: light;
}

:root[data-theme="dark"] {
    --brand: #6fc2b0;
    --brand-hover: #8bd0c1;
    --on-brand: #12342d;

    --bg: #232f3b;
    --bg-elevated: #2b3947;
    --bg-subtle: #324355;
    --border: #36475a;
    --field: #4f6275;
    --btn: #36475a;
    --btn-hover: #425669;

    --text: #e6ebee;
    --text-muted: #a7b4bd;
    --text-faint: #8393a0;

    --accent: #6fc2b0;
    --accent-hover: #8bd0c1;
    --accent-subtle: #2d4d49;
    --act: #6fc2b0;
    --act-ink: #12342d;

    --side: #1f2a35;
    --side-ink: #e6ebee;
    --side-mut: #8393a0;
    --side-hover: #2a3846;

    --success-text: #9fd3b2;
    --success-bg: #263e31;
    --error-text: #e6a49c;
    --error-bg: #43292a;
    --warning-text: #e5c28a;
    --warning-bg: #43392a;
    --info-text: #9cc3e0;
    --info-bg: #263a4d;

    --tile-info: #44769e;
    --tile-ok: #3a7d57;
    --tile-warn: #94662a;
    --tile-err: #a8483f;

    /* Sobre --side oscuro: Data 9.2:1, Lab 9.1:1 */
    --wm-data: #74e0c6;
    --wm-lab: #f8c555;
    --wm-data-card: #74e0c6;
    --wm-lab-card: #f8c555;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.25);
    --edge: rgba(0, 0, 0, 0.35);
    --inset: inset 0 1px 2px rgba(0, 0, 0, 0.35);

    color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Scrollbar delgada y discreta acorde a la paleta de la herramienta, en vez de la barra ancha
   por defecto del SO - aplica a toda area con scroll (Electron corre sobre Chromium, que
   soporta ::-webkit-scrollbar; scrollbar-width/-color quedan como respaldo para otros motores). */
* { scrollbar-width: thin; scrollbar-color: var(--text-faint) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text-faint); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

body {
    font-family: var(--font-sans);
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-size: var(--fs-base);
    -webkit-font-smoothing: antialiased;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
.step:focus-visible,
.combobox-option:focus-visible {
    outline: 2px solid var(--accent-hover);
    outline-offset: 2px;
}

/* Stepper - el flujo real es lineal (Cargar -> Resultado), no pestañas independientes, asi
   que se comunica como pasos numerados conectados por una linea en vez de tabs clasicas. */
.stepper {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 22px;
    overflow-x: auto;
}
.step {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    font-family: var(--font-sans);
    border-radius: var(--radius-sm);
}
.step:disabled { cursor: not-allowed; opacity: 0.45; }
.step-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    border: 2px solid var(--border);
    color: var(--text-faint);
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.step-label { font-size: 14px; font-weight: 600; color: var(--text-muted); transition: color 0.15s; }
.step.active .step-circle { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }
.step.active .step-label { color: var(--text); }
.step.completed .step-circle { border-color: var(--accent); background: var(--accent); color: var(--on-brand); }
.step.completed .step-circle svg { width: 13px; height: 13px; }
.step.completed .step-label { color: var(--text); }
.step-connector { width: 32px; height: 2px; background: var(--border); flex-shrink: 0; transition: background 0.15s; }
.step.completed + .step-connector { background: var(--accent); }


.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fade-in 0.15s ease-out; }
@keyframes fade-in {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
}

.cargar-layout.active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--panel-w);
    gap: 40px;
    align-items: start;
}
@media (max-width: 900px) {
    .cargar-layout.active { grid-template-columns: 1fr; }
}

.module-reference {
    background: var(--bg-elevated);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 20px;
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.module-reference .module-heading { margin-bottom: 14px; }
.module-reference .module-icon { font-size: var(--fs-xl); }
.module-reference h2 { font-size: var(--fs-base); }
.module-reference h3 { font-size: var(--fs-sm); }
.module-reference .field-table { font-size: var(--fs-xs); }
.module-reference .dependency-warning { margin-bottom: 16px; }

.field-scroll {
    max-height: calc(100vh - 340px);
    min-height: 160px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
}

.non-importable-details {
    background: var(--bg-subtle);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}
.non-importable-details summary { cursor: pointer; font-weight: 600; color: var(--text); }
.non-importable-details p { margin: 8px 0 0; }

.form {
    display: flex;
    flex-direction: column;
    gap: 26px;
    background: var(--bg-elevated);
    padding: 24px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
.form label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-muted); line-height: 1.4; }
.form select,
.form input[type="text"],
.form input[type="password"] {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: normal;
}

/* Guia visual del formulario de Cargar - numera las acciones en el orden recomendado (Modulo ->
   Archivo -> Hoja -> Procesar) sin bloquear nada. El indicador numerado es estatico (no marca
   "hecho") - solo ayuda a ubicar el orden, cada titulo tiene tamaño de encabezado de seccion. */
.form-intro { margin: -4px 0 2px; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; }
.form-step { display: flex; flex-direction: column; gap: 10px; }
.form-step-header { display: flex; align-items: center; gap: 10px; }
.form-step-header label,
.form-step-title { font-size: var(--fs-lg); font-weight: 700; color: var(--text); line-height: 1.3; }
.form-step-badge {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    border: 2px solid var(--text-faint);
    color: var(--text);
}
.form-step-hint { margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.6; }

.connect-form-grid { display: flex; flex-direction: column; gap: 14px; }
.field-label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.field-label span { line-height: 1.2; }

.connect-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 4px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.connect-indicator { display: flex; align-items: center; gap: 8px; }
.connect-status-text { font-size: 13px; font-weight: 600; color: var(--text-muted); }
#connectContinueBtn { margin-top: 6px; }


/* Tamaño estandar para los botones de accion principal del form (Continuar/Procesar) - por
   defecto un button.primary como hijo directo de .form-step (flex column) se estira al ancho
   completo, así que se fija un min-width y se centra en vez de dejarlo ocupar todo el form. */
#runBtn { align-self: center; min-width: 160px; }

.connect-connected {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: var(--success-bg);
    color: var(--success-text);
    font-size: 13px;
}
.link-btn {
    border: none;
    background: none;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
    font-size: 13px;
    padding: 0;
}

.combobox { position: relative; }
.combobox-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: normal;
    text-align: left;
    color: var(--text);
    transition: border-color 0.15s;
}
.combobox-trigger:hover { border-color: var(--text-faint); }
.combobox-icon { font-size: 16px; line-height: 1; display: inline-flex; align-items: center; }
.combobox-icon img { display: block; width: 18px; height: 18px; }
.combobox-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combobox-caret { color: var(--text-faint); display: inline-flex; }
.combobox-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 10;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
}
.combobox-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    text-align: left;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--text);
    transition: background 0.1s;
}
.combobox-option:hover { background: var(--bg-subtle); }
.combobox-option[aria-selected="true"] { background: var(--accent-subtle); font-weight: 600; }
.combobox-option .combobox-icon { width: 20px; }
.combobox-group-label {
    padding: 6px 8px 4px;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-faint);
}
.combobox-group-label:not(:first-child) {
    margin-top: 4px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
}

.file-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.file-row input { flex: 1; min-width: 160px; }
#pickFileBtn { display: inline-flex; align-items: center; gap: 7px; }

/* Indicador de estado del archivo - circulo fijo a la derecha del boton (siempre visible, no
   aparece/desaparece): reloj gris suave mientras no hay archivo, check verde en cuanto se elige
   uno. Reemplaza el texto "Archivo listo" que solo aparecia despues de elegir. */
.file-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.file-status-icon.waiting { background: var(--bg-subtle); color: var(--text-faint); }
.file-status-icon.ready { background: var(--success-bg); color: var(--success-text); }

button {
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 9px 14px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s;
}
/* Botones secundarios (sin la clase .primary) en estilo "ghost" - sin relleno, solo un fondo
   sutil al pasar el mouse. Los botones de accion primaria (Procesar, Guardar como...) siguen
   solidos para que quede claro cual es la accion principal de cada pantalla. */
button:not(.primary) { background: transparent; border-color: var(--border); }
button:not(.primary):hover:not(:disabled) { background: var(--bg-subtle); border-color: var(--text-faint); }
button:active:not(:disabled) { transform: translateY(1px); }
button.primary {
    background: var(--brand);
    color: var(--on-brand);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
button.primary:hover:not(:disabled) { background: var(--brand-hover); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.run-hint { display: block; margin-top: -8px; font-size: var(--fs-xs); color: var(--text-muted); }

.progress-bar { height: 6px; border-radius: 999px; background: var(--bg-subtle); overflow: hidden; }
.progress-bar-fill {
    width: 40%;
    height: 100%;
    background: var(--accent-hover);
    border-radius: 999px;
    animation: progress-slide 1.1s ease-in-out infinite;
}
@keyframes progress-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

.status {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    background: var(--info-bg);
    color: var(--info-text);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: fade-in 0.15s ease-out;
}
.status-icon { display: inline-flex; flex-shrink: 0; }
.status.error-status { background: var(--error-bg); color: var(--error-text); }
.status.success-status { background: var(--success-bg); color: var(--success-text); }

/* Advertencias como "inline notice": franja de color a la izquierda en vez de una caja
   completa con borde y fondo saturado - menos ruido visual, mismo lenguaje que las tablas
   sin rejilla y los botones ghost. */
.dependency-warning {
    background: var(--warning-bg);
    border-left: 3px solid var(--warning-text);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--warning-text);
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.dependency-warning svg { flex-shrink: 0; margin-top: 2px; }
.dependency-warning strong { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.dependency-warning ul { margin: 6px 0 0; padding-left: 20px; }
.dependency-warning ul li { margin-bottom: 3px; }

#tab-resultado { background: var(--bg-elevated); padding: 20px; border-radius: var(--radius); border: 1px solid var(--border); }
.module-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.module-icon { font-size: 28px; line-height: 1; }
.module-heading h2 { margin: 0; font-size: 18px; }
.preview-notes { font-size: 13px; line-height: 1.6; color: var(--text-muted); background: var(--bg-subtle); border-radius: var(--radius-sm); padding: 10px 14px; margin: 0 0 20px; }
.preview-group { margin-top: 22px; }
.preview-group h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 0 0 10px; }

/* Badges como texto con color en vez de pildora rellena - coherente con la paleta reducida:
   el color queda para llamar la atencion sobre un numero, no para pintar un bloque entero. */
.badge { display: inline-block; background: var(--accent-subtle); color: var(--accent); border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 600; }
.badge-muted { background: var(--bg-subtle); color: var(--text-muted); }

/* table-layout: fixed + overflow-wrap fuerza a que el texto largo (etiquetas en ingles,
   nombres de tipo) haga salto de linea dentro de su columna en vez de ensanchar la tabla mas
   alla del panel - eso era lo que disparaba el scroll horizontal en .field-scroll. */
.field-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-sm); margin-top: 10px; }
.field-table th, .field-table td { text-align: left; padding: 8px; line-height: 1.5; border-bottom: 1px solid var(--border); overflow-wrap: break-word; }
.field-table th { color: var(--text-faint); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.03em; }
.field-table td:first-child { font-family: ui-monospace, Consolas, monospace; color: var(--text-muted); }
.field-table th:nth-child(1), .field-table td:nth-child(1) { width: 36%; }
.field-table th:nth-child(2), .field-table td:nth-child(2) { width: 48%; }
.field-table th:nth-child(3), .field-table td:nth-child(3) { width: 16%; }

/* Columna "Tipo" como icono en vez de texto tecnico (char/many2one/boolean...) - el nombre
   real queda en el title (tooltip nativo) para quien lo necesite, sin ocupar ancho fijo. */
.field-type-cell { text-align: center !important; }
.field-type-icon { display: inline-flex; color: var(--text-faint); }

.field-filter {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    margin-top: 4px;
}

.hint { font-size: 12px; line-height: 1.6; color: var(--text-muted); margin: -8px 0 16px; }
.sheet-selector-hint { display: block; margin: 4px 0 0; }


.format-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    font-size: var(--fs-sm);
    white-space: nowrap;
}


/* Titular del resultado: la frase, su causa y las descargas en una rejilla (etiqueta + formatos)
   para que cada .csv quede pegado a su .xlsx. */
.result-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.result-title { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.result-cause { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--text-muted); }
.result-cause.is-ok { color: var(--success-text); }
.result-cause.is-mid { color: var(--warning-text); }
.result-cause.is-bad { color: var(--error-text); }
.result-downloads { display: grid; grid-template-columns: auto auto; gap: 8px 14px; align-items: center; justify-items: start; }
.dl-row { display: contents; }
.dl-row[hidden] { display: none; }
.dl-label { font-size: 14px; color: var(--text-muted); }
.dl-label strong { color: var(--text); font-weight: 600; }
.dl-seg { display: inline-flex; }
.dl-seg .format-btn { border-radius: 0; padding: 10px 18px; font-size: 14px; gap: 7px; }
.dl-seg .format-btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.dl-seg .format-btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; margin-left: 1px; }

/* Barra que aparece solo cuando hay al menos una correccion manual pendiente en Mapeo de
   columnas - separa claramente "elegiste un campo" de "ya se aplico" (nada cambia en el archivo
   hasta que el consultor presiona Revalidar, asi puede corregir varias columnas de una vez). */
.mapping-revalidate-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--accent-subtle);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin-bottom: 10px;
    font-size: var(--fs-sm);
    color: var(--text);
}
.mapping-field-select {
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    max-width: 220px;
}
.mapping-field-select.field-overridden { border-color: var(--accent); }

.mapping-scroll { overflow-x: auto; }
.error-table-scroll { overflow-x: auto; display: flex; flex-direction: column; gap: 10px; }

/* Incidencias agrupadas por fila - un bloque de texto por fila con problemas, en vez de una
   tabla con una linea por incidencia (dos incidencias de la misma fila quedaban separadas y sin
   relacion visual entre si). */
.incident-groups { display: flex; flex-direction: column; gap: 10px; }
.incident-group { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.incident-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-subtle);
    font-size: var(--fs-sm);
    font-weight: 600;
}
.incident-group-header .status-cell { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.incident-group-header .status-cell.error { color: var(--error-text); }
.incident-group-header .status-cell.warning { color: var(--warning-text); }
.incident-list { list-style: none; margin: 0; padding: 0; }
.incident-list li {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    font-size: var(--fs-sm);
    border-top: 1px solid var(--border);
}
.incident-field { font-family: ui-monospace, Consolas, monospace; color: var(--text-muted); font-size: var(--fs-xs); }
.incident-category { color: var(--text-faint); font-size: var(--fs-xs); }
#mappingTable, #errorDetailTable { width: 100%; min-width: 420px; border-collapse: collapse; font-size: var(--fs-sm); margin-top: 10px; }
#mappingTable th, #mappingTable td, #errorDetailTable th, #errorDetailTable td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); }
#mappingTable th, #errorDetailTable th { color: var(--text-faint); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.03em; }
#mappingTable tbody tr, #errorDetailTable tbody tr { transition: background 0.1s; }
#mappingTable tbody tr:hover, #errorDetailTable tbody tr:hover { background: var(--bg-subtle); }
#mappingTable td.confident { color: var(--success-text); }
#mappingTable td.not-confident { color: var(--error-text); }
#mappingTable td.confident svg, #mappingTable td.not-confident svg { vertical-align: -2px; margin-right: 2px; }
#mappingTable tr.row-not-confident { background: var(--error-bg); }
#mappingTable tr.row-not-confident:hover { background: var(--error-bg); filter: brightness(0.97); }
#errorDetailTable td.error-category { white-space: nowrap; }

/* Insignia de severidad en Incidencias - mismo lenguaje visual que .tab-bubble (pill de texto
   sobre fondo suave), reutilizando los mismos tokens de color que ya usa el resto de la app. */
.severity-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
}
.severity-badge.severity-error { background: var(--error-bg); color: var(--error-text); }
.severity-badge.severity-advertencia { background: var(--warning-bg); color: var(--warning-text); }

/* Sub-navegacion dentro de Resultado (Vista previa / Errores / Mapeo) - subrayado con el color
   de acento, mas discreta que el stepper de arriba (esa es la navegacion principal de la app,
   esta es secundaria, un nivel mas abajo). */
.result-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.result-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 8px 4px;
    margin-right: 16px;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
}
.result-tab-btn:hover { background: transparent; color: var(--text); }
.result-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Burbuja de conteo tipo notificacion junto al texto del tab - pill inline (mismo lenguaje que
   .badge) en vez de un globo flotante en la esquina, para no introducir un patron visual nuevo.
   Amarillo/advertencia en Mapeo (columnas sin mapear, no es un error todavia) vs rojo/error en
   Errores (filas rechazadas de verdad). Se oculta por completo en 0, no se muestra "0". */
.tab-bubble {
    display: inline-block;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
}
.tab-bubble-warning { background: var(--warning-bg); color: var(--warning-text); }
.tab-bubble-error { background: var(--error-bg); color: var(--error-text); }
.result-tab-panel { display: none; }
.result-tab-panel.active { display: block; animation: fade-in 0.15s ease-out; }
.result-tab-hint { font-size: var(--fs-xs); line-height: 1.6; color: var(--text-muted); margin: 0 0 16px; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.pagination-indicator { font-size: var(--fs-xs); color: var(--text-muted); }

/* Barra de herramientas comun a las tres tablas de Resultado (busqueda + selector de tamaño de
   pagina, y en Vista previa tambien el toggle de "solo errores") - reemplaza el scroll vertical
   de las tablas: ahora el numero de filas visibles lo decide el selector, no el alto del panel. */
.table-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.table-search {
    flex: 1;
    min-width: 180px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
}
.table-page-size {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
}
.table-page-size select {
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
}

/* Etiqueta junto al campo mapeado en Mapeo de columnas - marca que esa columna se paso tal cual
   (external id o numerico de Odoo) en vez de limpiarse como texto para mostrar (ver
   identifierPassthroughFields en runClean.ts). */
.passthrough-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--info-bg);
    color: var(--info-text);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.preview-data-section { margin-bottom: 20px; }
.preview-data-header { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.toggle-errors { display: flex; align-items: center; gap: 7px; font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; cursor: pointer; }
/* Checkbox custom (appearance:none) para que combine con el resto del sistema en vez del
   checkbox azul por defecto del SO - un cuadrado con el color de acento cuando esta marcado. */
.toggle-errors input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border: 1.5px solid var(--border);
    border-radius: 4px;
    background: var(--bg-elevated);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}
.toggle-errors input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}
.toggle-errors input[type="checkbox"]:checked::after {
    content: "";
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}
.preview-data-scroll { overflow-x: auto; margin-top: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
#previewDataTable { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); white-space: nowrap; }
#previewDataTable th, #previewDataTable td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--border); }
#previewDataTable th { padding-block: 9px; font-size: var(--fs-xs); color: var(--text-faint); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
#previewDataTable thead th { position: sticky; top: 0; background: var(--bg-subtle); }
#previewDataTable tbody tr { transition: background 0.1s; }
#previewDataTable tbody tr:hover { background: var(--bg-subtle); }
#previewDataTable td.status-cell { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
#previewDataTable td.status-cell.ok { color: var(--success-text); }
#previewDataTable td.status-cell.warning { color: var(--warning-text); }
#previewDataTable td.status-cell.error { color: var(--error-text); }
#previewDataTable td.status-cell svg { flex-shrink: 0; }

/* Se marca solo la celda del campo con el problema, no toda la fila - una fila rechazada puede
   tener 20 columnas correctas y 1 mala, pintarla toda de rojo no dice donde esta el error. El
   estado de la fila (Rechazada/Advertencia/OK) ya lo dice la columna Estado. */
#previewDataTable td.cell-error { background: var(--error-bg); color: var(--error-text); box-shadow: inset 0 0 0 1px var(--error-text); }
#previewDataTable td.cell-warning { background: var(--warning-bg); color: var(--warning-text); box-shadow: inset 0 0 0 1px var(--warning-text); }

/* ===== Shell: menu lateral + vistas ===== */
.app { display: flex; min-height: 100vh; }
.sidebar {
    width: 236px;
    flex: none;
    background: var(--side);
    color: var(--side-ink);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 18px 0;
    overflow-y: auto;
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 0 18px 14px; }
.sidebar-brand .app-logo { width: 32px; height: 32px; border-radius: var(--radius); flex-shrink: 0; }
/* Un logo por tema: el SVG claro y el oscuro se alternan segun data-theme (ver theme.js). */
.app-logo-dark { display: none; }
:root[data-theme="dark"] .app-logo-light { display: none; }
:root[data-theme="dark"] .app-logo-dark { display: block; }
.sidebar-title { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.sidebar-title .wm-data { color: var(--wm-data); }
.sidebar-title .wm-lab { color: var(--wm-lab); }

.menu { display: flex; flex-direction: column; }
.menu-group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--side-mut); padding: 16px 18px 6px; }
.sidebar .menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    border: none;
    background: transparent;
    padding: 10px 18px;
    border-radius: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--side-ink);
    text-align: left;
}
.sidebar .menu-item:hover:not(:disabled) { background: var(--side-hover); color: var(--side-ink); border: none; }
.sidebar .menu-item.active,
.sidebar .menu-item.active:hover:not(:disabled) { background: var(--act); color: var(--act-ink); font-weight: 700; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12); }
.menu-icon, [data-icon] { display: inline-flex; align-items: center; flex-shrink: 0; }
.menu-icon svg, [data-icon] svg { width: 17px; height: 17px; }

.sidebar-foot { margin-top: auto; padding: 16px 14px 0; display: flex; flex-direction: column; gap: 12px; }
.sidebar .conn-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    padding: 12px;
    border-radius: var(--radius);
    border: none;
    background: var(--side-hover);
    color: var(--side-ink);
    text-align: left;
    font-weight: 400;
    box-shadow: var(--inset);
}
.sidebar .conn-card[hidden] { display: none; }
.sidebar .conn-card:hover:not(:disabled) { background: var(--side-hover); border: none; }
.conn-card-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.conn-card-user-text strong { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conn-card-row strong { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conn-card-user-text { display: flex; flex-direction: column; min-width: 0; font-size: 12px; font-weight: 600; line-height: 1.3; }
.conn-card-user-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conn-card-user-text small { color: var(--text-muted); font-weight: 400; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .conn-card-user-text small { color: var(--side-mut); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; }
.sidebar .dot { background: var(--side-mut); }
.dot.on, .sidebar .dot.on { background: var(--dot); }
.avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--act);
    color: var(--act-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.14);
}

.theme-seg { display: flex; background: var(--side-hover); border-radius: var(--radius); padding: 3px; box-shadow: var(--inset); }
.sidebar .theme-seg button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    background: transparent;
    padding: 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--side-mut);
}
.sidebar .theme-seg button:hover:not(:disabled) { background: transparent; color: var(--side-ink); border: none; }
.sidebar .theme-seg button.active,
.sidebar .theme-seg button.active:hover:not(:disabled) { background: var(--act); color: var(--act-ink); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12); }

.content { flex: 1; min-width: 0; max-width: 1640px; margin: 0 auto; padding: 28px 40px 48px; }
.view { display: none; }
.view.active { display: block; animation: fade-in 0.15s ease-out; }
.view-title { margin: 0 0 6px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.view-intro { margin: 0 0 20px; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; max-width: 70ch; }
#view-cargar .view-title { margin-bottom: 16px; }

.card { background: var(--bg-elevated); border-radius: var(--radius); padding: 18px; margin-bottom: 14px; }
.card-title { margin: 0 0 4px; font-size: var(--fs-base); font-weight: 700; }
.card-hint { margin: 0 0 12px; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-muted); }
.section-label { margin: 0 0 8px; font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); }
.card input[type="text"], .card input[type="password"], .saved-auth input[type="password"] {
    width: 100%;
    padding: 8px 10px;
    border: 2px solid var(--field);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
}
.empty-state {
    border: 2px dashed var(--field);
    border-radius: var(--radius);
    padding: 32px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.empty-state p { margin: 0 0 8px; font-size: var(--fs-sm); color: var(--text-muted); }


.conn-section { margin-top: 22px; }
.conn-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 2px solid var(--border); }
.conn-tab { margin-bottom: -2px; padding: 9px 16px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; box-shadow: none; color: var(--text-muted); font-size: var(--fs-base); font-weight: 600; cursor: pointer; }
.conn-tab:hover:not(:disabled) { background: transparent; color: var(--text); border: 0; border-bottom: 3px solid transparent; }
.conn-tab[aria-selected="true"], .conn-tab[aria-selected="true"]:hover:not(:disabled) { color: var(--accent); border-bottom-color: var(--accent); }
.conn-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.conn-count { margin-left: 8px; padding: 0 8px; border-radius: 999px; background: var(--bg-subtle); color: var(--text-muted); font-size: 12px; font-weight: 600; }
.conn-hint { margin: 0 0 12px; font-size: var(--fs-sm); color: var(--text-muted); }
.saved-list { display: flex; flex-direction: column; gap: 8px; }
.saved-item { border-radius: var(--radius); background: var(--bg-elevated); box-shadow: var(--shadow-sm); }
.saved-item.is-active { box-shadow: var(--shadow-sm), inset 4px 0 0 var(--accent); }
.saved-item-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.saved-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.saved-item-text strong { font-size: var(--fs-sm); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-item-text small { color: var(--text-muted); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-item-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.saved-auth { display: flex; gap: 8px; padding: 0 14px 14px; }
.saved-auth input { flex: 1; }
.icon-btn { padding: 6px 8px; display: inline-flex; align-items: center; }
.check-row { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 14px 0 4px; font-size: var(--fs-sm); font-weight: 400; color: var(--text-muted); cursor: pointer; }
.check-row input { width: 16px; height: 16px; accent-color: var(--brand); }
.connect-actions { border-bottom: none; padding-bottom: 0; justify-content: flex-start; }

/* Panel de contexto: columna derecha fija con lo secundario de cada vista (detalle, archivo, sesion). */
:root { --panel-w: 360px; }
.ctx-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--panel-w); gap: 40px; align-items: start; }
.ctx-panel { position: sticky; top: 20px; min-width: 0; padding: 18px; background: var(--bg-subtle); border-radius: var(--radius); }
.ctx-title { margin: 0 0 2px; font-size: var(--fs-base); font-weight: 600; }
.ctx-subtitle { margin: 18px 0 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
.ctx-sub { margin: 4px 0 14px; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-muted); }
.ctx-note { margin: 14px 0 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-muted); }
.ctx-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ctx-panel button.primary { box-shadow: none; padding: 8px 16px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.ctx-panel button.ghost { background: var(--bg-elevated); border: 1px solid var(--field); box-shadow: none; padding: 8px 16px; font-weight: 500; }
.ctx-panel button.ghost:hover:not(:disabled) { background: var(--bg); border-color: var(--field); }
.ctx-actions-top { margin-top: 18px; }
.ctx-block { margin-top: 16px; }
.ctx-block h4 { margin: 0 0 4px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
.ctx-list { margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.ctx-list li { padding: 3px 0; }
.ctx-list li.is-none { color: var(--text-muted); }

/* Vista Plantillas: minimalista. Sin tarjetas; la separacion la dan el espacio y lineas de 1px. Un solo boton relleno. */
.tpl-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr) var(--panel-w); gap: 40px; align-items: start; }
.tpl-list-col { position: sticky; top: 20px; }
.tpl-search {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    padding: 8px 2px;
    margin-bottom: 8px;
    color: var(--text);
    font: inherit;
    box-shadow: none;
}
.tpl-list { position: relative; max-height: calc(100vh - 150px); overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding-right: 4px; }
.tpl-group { font-size: 11px; font-weight: 500; color: var(--text-muted); padding: 14px 8px 4px; }
.tpl-list .tpl-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    background: transparent;
    padding: 6px 8px;
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-muted);
    text-align: left;
    box-shadow: none;
}
.tpl-list .tpl-item i { width: 6px; height: 6px; border-radius: 50%; background: var(--field); flex-shrink: 0; }
.tpl-list .tpl-item:hover:not(:disabled) { background: var(--bg-subtle); color: var(--text); border: none; }
.tpl-list .tpl-item[aria-current="true"],
.tpl-list .tpl-item[aria-current="true"]:hover:not(:disabled) { background: var(--accent-subtle); color: var(--text); font-weight: 600; }
.tpl-list .tpl-item[aria-current="true"] i { background: var(--accent); }
.tpl-list .tpl-item i.is-on { background: var(--success-text); }
.tpl-list .tpl-item i.is-off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-muted); }
.tpl-link { border: 0; background: none; box-shadow: none; padding: 0; font: inherit; font-weight: 600; color: var(--accent); text-align: left; cursor: pointer; }
.tpl-link:hover:not(:disabled) { background: none; text-decoration: underline; }
.tpl-only { margin: 0 0 10px; }
.tpl-instance-error { margin: 0 0 10px; font-size: 12.5px; color: var(--error-text); }
#tplPanel .ctx-actions { margin-top: 12px; }
.tpl-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); }
.tpl-status { margin: 6px 0 0; font-size: 13px; font-weight: 600; }
.tpl-status.is-on { color: var(--success-text); }
.tpl-status.is-off { color: var(--warning-text); }

.tpl-title { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.tpl-meta { margin: 2px 0 0; color: var(--text-muted); font-size: var(--fs-sm); }
.tpl-req { margin: 14px 0 0; font-size: var(--fs-sm); color: var(--text-muted); }
.tpl-req strong { font-weight: 600; color: var(--text); }
.tpl-notes { margin-top: 12px; font-size: var(--fs-xs); color: var(--text-muted); }
.tpl-notes summary { cursor: pointer; }
.tpl-notes p { margin: 6px 0 0; line-height: 1.6; max-width: 70ch; }
.tpl-empty { margin: 8px 0; color: var(--text-muted); font-size: var(--fs-sm); }

.tpl-opts { display: grid; gap: 12px; margin-top: 16px; }
.tpl-opts label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); }
.tpl-opts select {
    padding: 7px 8px;
    border: 1px solid var(--field);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 400;
    box-shadow: none;
}

.tpl-fields { margin-top: 28px; }
.tpl-fields-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.tpl-fields-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.tpl-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tpl-tabs { display: flex; gap: 14px; }
.tpl-tabs button { border: none; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; box-shadow: none; padding: 4px 0; font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); }
.tpl-tabs button:hover:not(:disabled) { background: transparent; color: var(--text); border: none; border-bottom: 1px solid transparent; }
.tpl-tabs button[aria-pressed="true"],
.tpl-tabs button[aria-pressed="true"]:hover:not(:disabled) { color: var(--text); font-weight: 600; border-bottom: 1px solid var(--text); }
.tpl-filter { width: 150px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; padding: 4px 2px; color: var(--text); font: inherit; font-size: var(--fs-sm); box-shadow: none; }
.tpl-table { width: 100%; border-collapse: collapse; }
.tpl-table th { text-align: left; font-size: 11.5px; font-weight: 500; color: var(--text-muted); padding: 8px 12px 8px 0; border-bottom: 1px solid var(--border); }
.tpl-table td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.tpl-table td.n { width: 34%; font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; color: var(--text-muted); overflow-wrap: anywhere; }
.tpl-table td.t { width: 16%; font-size: 12.5px; color: var(--text-muted); }
.tpl-table td.ex { width: 20%; font-size: 12.5px; font-style: italic; color: var(--text-muted); overflow-wrap: anywhere; }
.tpl-table td.ex.is-todo { color: var(--warning-text); font-style: normal; }
.tpl-table:not(.has-example) .ex { display: none; }
.tpl-table td.is-header { font-weight: 600; color: var(--text); }
.tpl-table tr.is-excluded td { opacity: 0.55; }
.tpl-table tr.is-required td { background: var(--accent-subtle); }
.tpl-table tr.is-required td:first-child { box-shadow: inset 3px 0 0 var(--accent); padding-left: 10px; }
.tpl-table tr.is-required td.n, .tpl-table tr.is-required td:nth-child(2) { color: var(--text); font-weight: 600; }
.tpl-table tr.is-required td.m { padding-right: 10px; }
.tpl-table td.m { width: 14%; padding-right: 0; text-align: right; font-size: 12.5px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.tpl-tag { margin-left: 8px; padding: 0 6px; border: 1px solid var(--border); border-radius: 3px; font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Vista Plan de importacion: una tabla por paso (plantilla / necesita antes / habilita), detalle en el panel. */
.plan-step { margin-top: 32px; }
.plan-step:first-child { margin-top: 0; }
.plan-step-head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--text); }
.plan-step-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.plan-step-head span { color: var(--text-muted); font-size: var(--fs-sm); }
.plan-table { width: 100%; border-collapse: collapse; }
.plan-table td { padding: 11px 16px 11px 0; border-bottom: 1px solid var(--border); vertical-align: baseline; }
.plan-table td.plan-name-cell { width: 32%; }
.plan-table td.plan-deps { width: 38%; color: var(--text-muted); font-size: 13.5px; }
.plan-table td.plan-opens { color: var(--text-muted); font-size: 13.5px; }
.plan-table tr td:first-child { padding-left: 8px; border-radius: var(--radius) 0 0 var(--radius); }
.plan-table tr td:last-child { padding-right: 8px; border-radius: 0 var(--radius) var(--radius) 0; }
.plan-row { cursor: pointer; }
.plan-row:hover td { background: var(--bg-subtle); }
.plan-row:hover .plan-name { text-decoration: underline; text-underline-offset: 3px; }
.plan-row.is-selected td { background: var(--accent-subtle); }
.plan-row.is-needed td { background: var(--warning-bg); }
.plan-row.is-opened td { background: var(--info-bg); }
.plan-row.is-dim td { opacity: 0.45; }
.plan-table .plan-name { border: none; background: transparent; box-shadow: none; padding: 0; color: var(--text); font-size: var(--fs-base); font-weight: 500; text-align: left; }
.plan-table .plan-name:hover:not(:disabled) { background: transparent; border: none; text-decoration: underline; text-underline-offset: 3px; }
.plan-tag { margin-left: 10px; font-size: var(--fs-xs); font-weight: 600; }
.plan-row.is-needed .plan-tag { color: var(--warning-text); }
.plan-row.is-opened .plan-tag { color: var(--info-text); }
.plan-none { color: var(--text-muted); }
.plan-pair { margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--field); }
.plan-pair > p { margin: 0 0 2px; font-size: var(--fs-xs); color: var(--text-muted); }
.plan-pair .plan-table tr:last-child td { border-bottom: 0; }
.plan-instance { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; margin: 0 0 22px; font-size: 13px; color: var(--text-muted); }
.plan-instance-line { margin: 0; }
.tpl-check[hidden] { display: none; }
.plan-table td.plan-name-cell { position: relative; }
.plan-row.is-installed td:first-child, .plan-row.is-missing td:first-child { padding-left: 26px; }
.plan-dot { position: absolute; left: 10px; top: 1.15em; width: 8px; height: 8px; border-radius: 50%; }
.plan-dot.is-on { background: var(--success-text); }
.plan-dot.is-off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-muted); }
.plan-row.is-installed .plan-name { font-weight: 600; }
.plan-row.is-missing .plan-name { color: var(--text-muted); font-weight: 400; }
.plan-tag-missing { color: var(--text-muted); font-weight: 500; }
.plan-miss { color: var(--warning-text); font-weight: 600; }
.plan-hint { margin: 40px 0 0; font-size: var(--fs-xs); color: var(--text-muted); max-width: 64ch; line-height: 1.6; }
.plan-hint.is-error { color: var(--error-text); }

/* Vista Conexion: la sesion activa vive en el panel; el centro es para elegir o crear conexiones. */
.conn-status { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.conn-active-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.conn-active-text small { color: var(--text-muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.conn-active-user { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--field); }
.conn-active-actions { display: flex; gap: 8px; margin-top: 16px; }
.conn-main > .conn-section:first-child { margin-top: 0; }

/* Paso 1 del flujo: Origen y conexion en dos columnas, sin tarjetas. */
.origen-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; max-width: 1280px; }
.origen-col + .origen-col { padding-left: 56px; border-left: 1px solid var(--border); }
.origen-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.origen-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
.origen-head small { color: var(--text-muted); font-size: var(--fs-xs); }
.origin-list { display: flex; flex-direction: column; }
.origin-opt { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); font-weight: 400; cursor: pointer; }
.origin-opt input { width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--brand); }
.origin-opt b { display: block; font-weight: 600; font-size: var(--fs-base); color: var(--text); }
.origin-opt span span { font-size: var(--fs-sm); color: var(--text-muted); }
.origin-opt.is-disabled { cursor: not-allowed; opacity: 0.7; }
.sub-h { margin: 12px 0 4px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
.sep { display: flex; align-items: center; gap: 10px; margin: 16px 0 2px; font-size: 12.5px; color: var(--text-muted); }
.sep::before, .sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.s1-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 12px; }
.s1-form .full { grid-column: 1 / -1; }
.s1-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); }
.s1-form label.check-row { flex-direction: row; align-items: center; margin: 0; font-size: var(--fs-sm); font-weight: 400; }
.s1-form input[type="text"], .s1-form input[type="password"] {
    width: 100%;
    padding: 8px 10px;
    border: 2px solid var(--field);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: 400;
    box-shadow: var(--inset);
}
.s1-form-actions { display: flex; gap: 10px; }
.origen-layout .saved-item { background: transparent; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--border); }
.origen-layout .saved-item-row { padding-left: 0; padding-right: 0; }
.origen-layout .saved-auth { padding-left: 0; padding-right: 0; }
.s1-active { margin-top: 12px; padding: 16px 18px; background: var(--bg-subtle); border-radius: var(--radius); }
.s1-active-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.s1-host { color: var(--text-muted); font-size: var(--fs-sm); }
.s1-active-user { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--field); }
.s1-active-actions { margin-left: auto; display: flex; gap: 8px; }
.s1-note { margin: 12px 0 0; font-size: var(--fs-xs); color: var(--text-muted); }
.origen-layout button.primary, .origen-foot button.primary { box-shadow: none; padding: 8px 16px; font-weight: 600; }
.origen-layout button.ghost { background: var(--bg-elevated); border: 1px solid var(--field); box-shadow: none; padding: 5px 12px; font-size: var(--fs-sm); font-weight: 500; }
.origen-layout .s1-form-actions button.ghost { padding: 8px 16px; }
.origen-layout button.ghost:hover:not(:disabled) { background: var(--bg); border-color: var(--field); }
.origen-foot { display: flex; align-items: center; gap: 14px; max-width: 1280px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); }
.origen-hint { font-size: var(--fs-sm); color: var(--text-muted); }

/* Sesion de la herramienta: pantalla de login y fila de usuario en el menu. */
.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 40px 24px; background: var(--bg); }
.auth-card { width: 100%; max-width: 400px; padding: 36px 32px 28px; background: var(--bg-elevated); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.auth-title .wm-data { color: var(--wm-data-card); }
.auth-title .wm-lab { color: var(--wm-lab-card); }
.auth-brand .app-logo { width: 40px; height: 40px; border-radius: 10px; }
.auth-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.auth-lead { margin: 6px 0 0; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.5; }
.auth-banner { margin: 16px 0 0; padding: 10px 12px; border-radius: var(--radius); background: var(--warning-bg); color: var(--warning-text); font-size: var(--fs-xs); font-weight: 600; line-height: 1.5; }
.auth-form { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; }
.auth-form label { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); }
.auth-form input {
    width: 100%;
    padding: 9px 11px;
    border: 2px solid var(--field);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: 400;
    box-shadow: var(--inset);
}
.auth-pass { position: relative; display: block; }
.auth-pass input { padding-right: 78px; }
.auth-form .auth-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); padding: 4px 8px; border: none; background: transparent; box-shadow: none; color: var(--accent); font-size: var(--fs-xs); font-weight: 600; }
.auth-form .auth-toggle:hover:not(:disabled) { background: var(--bg-subtle); border: none; }
.auth-error { margin: 0; padding: 10px 12px; border-radius: var(--radius); background: var(--error-bg); color: var(--error-text); font-size: var(--fs-sm); font-weight: 500; line-height: 1.5; }
.auth-form button.primary { box-shadow: none; padding: 10px 16px; font-weight: 600; width: 100%; }
.auth-external { display: block; margin-top: 14px; text-align: center; color: var(--accent); font-size: var(--fs-sm); font-weight: 600; }
.auth-help { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; }

.session-row { display: flex; align-items: center; gap: 10px; padding: 2px 4px; }
.session-text { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: 12px; font-weight: 600; line-height: 1.3; }
.session-text strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-text small { color: var(--side-mut); font-size: 11px; font-weight: 400; }
.sidebar .session-row .icon-btn { border: none; background: transparent; box-shadow: none; color: var(--side-ink); padding: 6px; border-radius: var(--radius); }
.sidebar .session-row .icon-btn:hover:not(:disabled) { background: var(--side-hover); border: none; }
.sidebar .session-row .icon-btn svg { width: 17px; height: 17px; }

/* Ayuda: ancho de lectura propio, no el de toda la pantalla. */

/* Ayuda */
.help-list { margin: 0 0 12px; padding-left: 20px; font-size: var(--fs-sm); line-height: 1.8; }
/* Dos columnas que fluyen (sin huecos entre tarjetas de alturas distintas); una sola por debajo de ~1060px. */
.help-grid { columns: 2 520px; column-gap: 20px; margin-top: 4px; }
.help-grid .card { break-inside: avoid; margin-bottom: 20px; }
.help-card { scroll-margin-top: 16px; }
.help-card .help-list li + li { margin-top: 2px; }
.help-card code { font-family: var(--mono, ui-monospace, Consolas, monospace); font-size: 0.92em; padding: 1px 5px; border-radius: 4px; background: var(--bg-subtle); }
.help-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.help-toc a { padding: 5px 12px; border-radius: 999px; background: var(--bg-subtle); color: var(--text); font-size: var(--fs-xs); font-weight: 600; text-decoration: none; }
.help-toc a:hover { background: var(--accent-subtle); color: var(--accent); }
.help-toc a:focus-visible, .help-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.help-faq { border-top: 1px solid var(--border); padding: 8px 0; font-size: var(--fs-sm); }
.help-faq:first-of-type { border-top: 0; }
.help-faq summary { cursor: pointer; font-weight: 600; color: var(--text); }
.help-faq p { margin: 8px 0 4px; line-height: 1.5; color: var(--text-muted); }
.help-brand { margin-top: 24px; }
.help-brand img { height: 28px; width: auto; }

/* ===== Flat UI: color solido, esquinas de 6px y relieve ligero en toda la app ===== */
h1, h2, h3 { font-weight: 700; }

/* Superficies: sin borde, separadas por color + una sombra corta */
.form, #tab-resultado { border: none; box-shadow: var(--shadow-sm); }
.module-reference { position: sticky; top: 20px; border: none; background: var(--bg-subtle); box-shadow: none; }
.card:hover, .saved-item:hover { box-shadow: var(--shadow-md); }
.incident-group, .non-importable-details { box-shadow: var(--shadow-sm); }
.incident-group { border: none; }

/* Controles de texto: borde de 2px y fondo hundido */
.form input[type="text"], .form input[type="password"], .form select,
.field-filter, .table-search, .combobox-trigger, .mapping-field-select, .table-page-size select {
    border: 2px solid var(--field);
    border-radius: var(--radius);
    box-shadow: var(--inset);
}
input:focus, select:focus, .combobox-trigger:focus-visible { border-color: var(--accent); }

/* Botones: relleno plano con borde inferior de 2px */
button { border-radius: var(--radius); font-weight: 700; }
#pickFileBtn, .format-btn, .saved-item-actions button, .conn-active-actions button,
#goConexionBtn, .pagination button, .saved-auth button {
    border: none;
    background: var(--btn);
    color: var(--text);
    box-shadow: var(--shadow-sm), inset 0 -2px 0 var(--edge);
}
#pickFileBtn:hover:not(:disabled), .format-btn:hover:not(:disabled),
.saved-item-actions button:hover:not(:disabled), .conn-active-actions button:hover:not(:disabled),
#goConexionBtn:hover:not(:disabled), .pagination button:hover:not(:disabled), .saved-auth button:hover:not(:disabled) {
    background: var(--btn-hover);
    border: none;
}
.saved-item-actions .icon-btn { background: transparent; box-shadow: none; }
.saved-item-actions .icon-btn:hover:not(:disabled) { background: var(--bg-subtle); }
button.primary, .format-btn.primary, .saved-auth button.primary {
    background: var(--brand);
    color: var(--on-brand);
    box-shadow: var(--shadow-sm), inset 0 -2px 0 var(--edge);
}
button.primary:hover:not(:disabled), .format-btn.primary:hover:not(:disabled), .saved-auth button.primary:hover:not(:disabled) { background: var(--brand-hover); }
button:active:not(:disabled):not(.menu-item):not(.tpl-item):not(.step) { box-shadow: inset 0 2px 3px var(--edge); transform: translateY(1px); }
.spinner { border-color: rgba(255, 255, 255, 0.4); border-top-color: var(--on-brand); }

/* Stepper: el paso actual en turquesa pastel, los hechos en verde marca */
.step.active .step-circle { border-color: var(--act); background: var(--act); color: var(--act-ink); }
.step.completed .step-circle { border-color: var(--brand); background: var(--brand); color: var(--on-brand); }
.step.completed + .step-connector { background: var(--brand); }
.step-connector { height: 3px; }
.step-circle { border-width: 2px; }

/* Avisos, insignias y pestanas */
.status, .dependency-warning { border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.status { margin: 0 0 16px; }
.dependency-warning { border-left: none; }
.badge { font-weight: 700; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); }
.badge.badge-muted { background: var(--btn); color: var(--text-muted); }
.result-tabs { border-bottom: 2px solid var(--border); }
.result-tab-btn { border-bottom-width: 3px; }
.preview-data-scroll, .field-table th, .field-table td { border-color: var(--border); }
.preview-data-scroll { border-width: 2px; box-shadow: var(--inset); }
.combobox-list { border: none; box-shadow: var(--shadow-md); }
.combobox-option[aria-selected="true"] { background: var(--act); color: var(--act-ink); }

/* Responsive: el menu pasa a barra horizontal arriba */
/* Entre 1280px y 1519px se estrechan lista y panel para que sigan los tres a la vista; por debajo de 1280px el panel de Plantillas pasa debajo del detalle. */
@media (max-width: 1519px) {
    :root { --panel-w: 300px; }
    .tpl-layout { grid-template-columns: 200px minmax(0, 1fr) var(--panel-w); gap: 28px; }
    .ctx-layout, .cargar-layout.active { gap: 28px; }
}
@media (max-width: 1279px) {
    .tpl-layout { grid-template-columns: 200px minmax(0, 1fr); }
    .tpl-layout > .ctx-panel { grid-column: 2; position: static; }
}
@media (max-width: 900px) {
    .app { flex-direction: column; }
    .sidebar { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; }
    .sidebar-brand { padding: 0 16px; }
    .menu { flex-direction: row; overflow-x: auto; order: 3; width: 100%; }
    .menu-group { display: none; }
    .sidebar .menu-item { width: auto; white-space: nowrap; padding: 8px 14px; }
    .sidebar-foot { margin: 0 16px 0 auto; padding: 0; flex-direction: row; align-items: center; }
    .sidebar .conn-card { width: auto; }
    .content { padding: 20px 16px 40px; }
    .tpl-layout, .ctx-layout { grid-template-columns: minmax(0, 1fr); }
    .tpl-layout > .ctx-panel { grid-column: auto; }
    .ctx-panel { position: static; }
    .tpl-list-col { position: static; }
    .tpl-list { max-height: 220px; }
}
@media (max-width: 600px) {
    .step-label { font-size: 13px; }
    .step-connector { width: 20px; }
    .result-title { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    button:active:not(:disabled) { transform: none; }
}