@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Raleway:wght@700;800;900&display=swap');

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

html {
    zoom: 1.05;
}

:root {
    --primary-color: #2c3e50;
    --secondary-color: #1a7043;
    --text-color: #333;
    --bg-color: #f5f5f5;
    --header-bg: #1a7043;
    --header-text: #fff;
    --footer-bg: #115030;
    --footer-text: #fff;
}

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    line-height: 1.6;
}

/* Header */
.header {
    background: linear-gradient(135deg, var(--header-bg) 0%, #115030 100%);
    color: var(--header-text);
    padding: 0.4rem 1rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Tabs (Rentables / FBA / FBM) */
.ks-nav-tabs {
    display: flex;
    gap: 0.5rem;
    margin-left: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    flex: 1;
}

.ks-tab {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.ks-tab:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-1px);
}

.ks-tab.active {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.32);
}

/* Tab cuadrado (CONTABILIDAD) */
.ks-tab.ks-tab-square {
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.82rem;
    font-weight: 700;
}

/* Tabs texto plano (Buscador, FBA, FBM) */
.ks-tab.ks-tab-rect {
    border-radius: 0;
    border-color: transparent;
    background: transparent;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}

.ks-tab.ks-tab-rect:hover {
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 3px;
    transform: none;
}

.ks-tab.ks-tab-rect.active {
    background: transparent;
    border-color: transparent;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Iconos (SVG) que heredan color del tema */
.ks-icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    fill: currentColor;
}

.ks-tab-icon {
    color: var(--header-text);
    padding: 0.35rem 0.55rem;
}

button.ks-tab-icon {
    font-family: inherit;
    cursor: pointer;
    padding: 0.35rem 0.55rem;
}

#btn-calculadora, #btn-notas {
    margin-left: 0.4rem;
}

.ks-tab-icon .ks-icon {
    width: 18px;
    height: 18px;
    display: block;
}

.settings-btn,
.back-btn {
    background: none;
    border: none;
    color: var(--header-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 50%;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.settings-btn:hover,
.back-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.gear-icon,
.back-icon {
    width: 24px;
    height: 24px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gear-icon {
    animation: spin 3s linear infinite;
    animation-play-state: paused;
}

.settings-btn:hover .gear-icon {
    animation-play-state: running;
}

.header-brand {
    font-family: 'Raleway', sans-serif;
    font-size: 1.35rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: 0 1px 6px rgba(0,0,0,0.35);
    user-select: none;
    white-space: nowrap;
    opacity: 0.95;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* =========================
   CONTABILIDAD (dark)
   ========================= */

body.page-contabilidad {
    --ct-bg: #f8fafc;
    --ct-card: #ffffff;
    --ct-text: #1e293b;
    --ct-muted: #64748b;
    --ct-border: #e2e8f0;

    --ct-yellow: #d97706;
    --ct-green: #16a34a;
    --ct-red: #dc2626;
    --ct-purple: #7c3aed;

    color-scheme: light;

    background: var(--ct-bg);
    color: var(--ct-text);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body.page-contabilidad select option,
body.page-contabilidad select optgroup {
    background: #ffffff;
    color: #1e293b;
}

body.page-contabilidad .footer {
    background: #f1f5f9;
    color: var(--ct-muted);
    border-top: 1px solid var(--ct-border);
}

body.page-contabilidad .main-content {
    background: var(--ct-bg);
}

/* Ajustes de tema claro: valores que usaban rgba(255,255,255,…) para oscuro */
body.page-contabilidad .ks-ct-tabs {
    background: #f1f5f9;
    border-color: #e2e8f0;
}
body.page-contabilidad .ks-ct-tab {
    color: #64748b;
    font-family: 'DM Sans', sans-serif;
}
body.page-contabilidad .ks-ct-tab.active {
    background: #1e293b;
    color: #ffffff;
}
body.page-contabilidad .ks-ct-btn {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #1e293b;
    font-family: 'DM Sans', sans-serif;
}
body.page-contabilidad .ks-ct-btn:hover {
    background: #e2e8f0;
}
body.page-contabilidad .ks-ct-btn-primary {
    background: #ede9fe;
    border-color: #c4b5fd;
    color: #6d28d9;
}
body.page-contabilidad .ks-ct-period {
    background: #ffffff;
    border-color: #e2e8f0;
}
body.page-contabilidad .ks-ct-period:hover {
    background: #f8fafc;
}
body.page-contabilidad .ks-ct-period.active {
    background: #f0fdf4;
    border-color: #86efac;
}
body.page-contabilidad .ks-ct-field input,
body.page-contabilidad .ks-ct-field select {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #1e293b;
}
body.page-contabilidad .ks-ct-field input:focus,
body.page-contabilidad .ks-ct-field select:focus {
    border-color: #7c3aed;
}
body.page-contabilidad .ks-ct-check {
    background: #f8fafc;
    border-color: #e2e8f0;
}
body.page-contabilidad .ks-ct-badge {
    border-color: #e2e8f0;
}
body.page-contabilidad .ks-ct-badge-open {
    background: rgba(217, 119, 6, 0.10);
    border-color: rgba(217, 119, 6, 0.35);
}
body.page-contabilidad .ks-ct-badge-paid {
    background: #f1f5f9;
    color: #64748b;
}
body.page-contabilidad .ks-ct-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.9rem;
    margin-bottom: 0.9rem;
}

body.page-contabilidad .ks-ct-card-value {
    font-family: 'DM Sans', sans-serif;
    letter-spacing: -0.02em;
    font-weight: 900;
}

body.page-contabilidad .ks-ct-sidebar {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}

/* ===== Selector de marketplace (esferas con banderas) ===== */
.ks-ct-mkt-selector {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.ks-ct-mkt-btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 50px;
    padding: 0.25rem 0.75rem;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    user-select: none;
}

.ks-ct-mkt-btn:hover {
    border-color: #1a7043;
    color: #1a7043;
    background: #f0fdf4;
}

.ks-ct-mkt-btn.active {
    border-color: #1a7043;
    background: #1a7043;
    color: #fff;
    box-shadow: 0 2px 6px rgba(26,112,67,0.2);
}

.ks-ct-mkt-globe,
.ks-ct-mkt-flag {
    font-size: 1rem;
    line-height: 1;
}

.ks-ct-mkt-name {
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

/* Layout sin sidebar (vista "Todos") */
.ks-ct-layout--no-sidebar .ks-ct-main {
    flex: 1;
}

.ks-ct-layout {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    width: 100%;
    flex: 1;
}

.ks-ct-sidebar {
    width: 320px;
    min-width: 280px;
    background: var(--ct-card);
    border: 1px solid var(--ct-border);
    border-radius: 12px;
    padding: 0.9rem;
    height: calc(100vh - 140px);
    position: sticky;
    top: 64px;
    overflow: auto;
}

.ks-ct-sidebar-header {
    margin-bottom: 0.8rem;
}

.ks-ct-title {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.ks-ct-subtitle {
    margin-top: 0.2rem;
    font-size: 0.85rem;
    color: var(--ct-muted);
}

.ks-ct-sidebar-actions {
    margin-top: 0.7rem;
}

.ks-ct-periods {
    display: grid;
    gap: 0.55rem;
}

.ks-ct-period {
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--ct-border);
    border-radius: 12px;
    padding: 0.65rem 0.7rem;
    color: var(--ct-text);
    cursor: pointer;
    transition: transform 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.ks-ct-period:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-1px);
}

.ks-ct-period.active {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
}

.ks-ct-period-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.ks-ct-period-id {
    font-weight: 800;
    font-size: 0.9rem;
}

.ks-ct-badge {
    font-size: 0.72rem;
    padding: 0.14rem 0.4rem;
    border-radius: 999px;
    border: 1px solid var(--ct-border);
    letter-spacing: 0.03em;
}

.ks-ct-badge-open {
    color: var(--ct-yellow);
    border-color: rgba(240, 180, 41, 0.45);
    background: rgba(240, 180, 41, 0.10);
}

.ks-ct-badge-paid {
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.04);
}

.ks-ct-period-dates {
    margin-top: 0.35rem;
    color: var(--ct-muted);
    font-size: 0.8rem;
}

.ks-ct-period-net {
    margin-top: 0.55rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.7rem;
}

.ks-ct-period-net-k {
    color: var(--ct-muted);
    font-size: 0.8rem;
}

.ks-ct-period-net-v {
    font-weight: 900;
}

.ks-ct-main {
    flex: 1;
    min-width: 0;
}

.ks-ct-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
}

.ks-ct-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.ks-ct-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--ct-border);
    color: var(--ct-text);
    padding: 0.5rem 0.7rem;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 800;
    transition: background-color 0.12s ease, transform 0.12s ease;
}

.ks-ct-btn:hover {
    background: rgba(255, 255, 255, 0.10);
    transform: translateY(-1px);
}

.ks-ct-btn-primary {
    border-color: rgba(150, 120, 255, 0.35);
    background: rgba(150, 120, 255, 0.14);
}

.ks-ct-tabs {
    display: flex;
    gap: 0.4rem;
    padding: 0.25rem;
    border: 1px solid var(--ct-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.ks-ct-tab {
    background: transparent;
    border: none;
    color: var(--ct-muted);
    padding: 0.45rem 0.75rem;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 900;
}

.ks-ct-tab.active {
    background: rgba(255, 255, 255, 0.10);
    color: var(--ct-text);
}

.ks-ct-form {
    margin-bottom: 0.9rem;
    display: block;
}

.ks-ct-form[hidden] {
    display: none !important;
}

.ks-ct-form-inner {
    background: var(--ct-card);
    border: 1px solid var(--ct-border);
    border-radius: 12px;
    padding: 0.9rem;
}

.ks-ct-form-title {
    font-weight: 900;
    margin-bottom: 0.6rem;
}

.ks-ct-form-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.7rem;
}

.ks-ct-field {
    display: grid;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--ct-muted);
}

.ks-ct-field input,
.ks-ct-field select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--ct-border);
    border-radius: 10px;
    padding: 0.55rem 0.6rem;
    color: var(--ct-text);
    outline: none;
}

.ks-ct-field input:focus,
.ks-ct-field select:focus {
    border-color: rgba(150, 120, 255, 0.45);
}

.ks-ct-field-span {
    grid-column: span 6;
}

.ks-ct-field-col2 {
    grid-column: span 2;
}

.ks-ct-check {
    grid-column: span 6;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.6rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--ct-border);
    border-radius: 12px;
    color: var(--ct-text);
    font-size: 0.85rem;
}

.ks-ct-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.ks-ct-form-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.8rem;
}

.ks-ct-form-help {
    margin-top: 0.6rem;
    font-size: 0.78rem;
    color: var(--ct-muted);
}

.ks-ct-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    margin-bottom: 0.9rem;
}

.ks-ct-card {
    background: var(--ct-card);
    border: 1px solid var(--ct-border);
    border-radius: 14px;
    padding: 0.85rem 0.95rem;
}

.ks-ct-card-label {
    color: var(--ct-muted);
    font-size: 0.8rem;
}

.ks-ct-card-value {
    margin-top: 0.35rem;
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.01em;
    font-family: 'Unbounded', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

.ks-ct-card-foot {
    margin-top: 0.35rem;
    color: var(--ct-muted);
    font-size: 0.78rem;
}

.ks-ct-card-bank .ks-ct-card-value {
    color: var(--ct-green);
}

.ks-ct-card-pending .ks-ct-card-value {
    color: var(--ct-yellow);
}

.ks-ct-card-total .ks-ct-card-value {
    color: var(--ct-purple);
}

.ks-ct-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

/* Gráficos: contenedor de altura fija para que Chart.js no lo infle */
.ks-ct-chart-wrap {
    position: relative;
    height: 220px;
}
.ks-ct-chart-wrap canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}

.ks-ct-panel {
    background: var(--ct-card);
    border: 1px solid var(--ct-border);
    border-radius: 14px;
    padding: 0.85rem 0.95rem;
}

.ks-ct-panel-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

.ks-ct-panel-title {
    font-weight: 900;
}

.ks-ct-panel-meta {
    color: var(--ct-muted);
    font-size: 0.8rem;
}

.ks-ct-collapsible-header {
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
}
.ks-ct-collapsible-header:hover .ks-ct-panel-title {
    opacity: 0.75;
}
.ks-ct-chevron {
    font-size: 0.75rem;
    color: var(--ct-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.ks-ct-collapsible-header[aria-expanded="true"] .ks-ct-chevron {
    transform: rotate(180deg);
}
.ks-ct-collapsible-body {
    margin-top: 0.6rem;
}

.ks-ct-pl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

.ks-ct-pl-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--ct-border);
    border-radius: 12px;
    padding: 0.7rem 0.75rem;
}

.ks-ct-pl-k {
    color: var(--ct-muted);
    font-size: 0.78rem;
}

.ks-ct-pl-v {
    margin-top: 0.25rem;
    font-weight: 900;
}

.ks-ct-table-wrap {
    overflow: auto;
    border-radius: 12px;
    border: 1px solid var(--ct-border);
}

.ks-ct-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 680px;
}

.ks-ct-table th,
.ks-ct-table td {
    padding: 0.9rem 0.65rem;
    border-bottom: 1px solid var(--ct-border);
    font-size: 0.85rem;
    vertical-align: middle;
}

.ks-ct-table th {
    text-align: left;
    color: var(--ct-muted);
    font-weight: 900;
    background: rgba(255, 255, 255, 0.03);
    position: sticky;
    top: 0;
}

.ks-ct-table tbody tr {
    transition: background 0.15s ease;
}
.ks-ct-table tbody tr[style*="cursor: pointer"]:hover {
    background: rgba(124, 58, 237, 0.04);
}

.ks-ct-th-right {
    text-align: right;
}

.ks-ct-td-amount {
    text-align: right;
    font-weight: 900;
    white-space: nowrap;
}

.ks-ct-td-cat {
    white-space: nowrap;
}

.ks-ct-cat-badge {
    display: inline-block;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    font-size: 0.67rem;
    font-weight: 700;
    background: #dbeafe;
    color: #1d4ed8;
    white-space: nowrap;
}

.ks-ct-pl-iva-item {
    font-size: 0.78rem;
    border-top: 1px dashed var(--ct-border) !important;
}

.ks-ct-td-actions {
    text-align: right;
    width: 1%;
    white-space: nowrap;
}

.ks-ct-iconbtn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--ct-border);
    color: var(--ct-text);
    border-radius: 10px;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-weight: 900;
}

.ks-ct-iconbtn:hover {
    background: rgba(255, 255, 255, 0.10);
}

.ks-ct-btn-attach {
    color: var(--ct-muted);
}
.ks-ct-btn-attach:hover {
    color: var(--ct-text);
}

/* Input file en formulario de gastos */
.ks-ct-field input[type="file"] {
    padding: 0.3rem 0.4rem;
    font-size: 0.8rem;
    cursor: pointer;
}

.ks-ct-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
    margin-bottom: 0.9rem;
}

.ks-ct-kpi {
    background: var(--ct-card);
    border: 1px solid var(--ct-border);
    border-radius: 14px;
    padding: 0.85rem 0.95rem;
    overflow: hidden;
    min-width: 0;
}

.ks-ct-kpi-k {
    color: var(--ct-muted);
    font-size: 0.8rem;
}

.ks-ct-kpi-v {
    margin-top: 0.35rem;
    font-size: clamp(0.85rem, 1.8vw, 1.2rem);
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ks-ct-cashflow {
    display: grid;
    gap: 0.45rem;
}

.ks-ct-cf-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0.6rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--ct-border);
    border-radius: 12px;
    overflow: hidden;
    min-width: 0;
}

.ks-ct-cf-k {
    color: var(--ct-muted);
    font-size: 0.85rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ks-ct-cf-v {
    font-weight: 900;
    white-space: nowrap;
    flex-shrink: 0;
}

.ks-ct-bars {
    display: grid;
    gap: 0.65rem;
}

.ks-ct-barrow {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--ct-border);
    border-radius: 12px;
    padding: 0.65rem 0.7rem;
    overflow: hidden;
    min-width: 0;
}

.ks-ct-barhead {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.45rem;
    min-width: 0;
}

.ks-ct-barlabel {
    font-weight: 900;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ks-ct-barvalue {
    white-space: nowrap;
    font-weight: 900;
    flex-shrink: 0;
}

.ks-ct-bartrack {
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.ks-ct-barfill {
    height: 100%;
    background: rgba(255, 80, 80, 0.75);
}

.ks-ct-period-results {
    display: grid;
    gap: 0.55rem;
}

.ks-ct-pr-row {
    display: grid;
    grid-template-columns: 64px 1fr minmax(0, 140px);
    gap: 0.8rem;
    align-items: center;
    padding: 0.55rem 0.6rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--ct-border);
    border-radius: 12px;
    overflow: hidden;
}

.ks-ct-pr-k {
    color: var(--ct-muted);
    font-weight: 900;
}

.ks-ct-pr-bar {
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.ks-ct-pr-fill {
    height: 100%;
}

.ks-ct-fill-pos {
    background: rgba(80, 220, 130, 0.75);
}

.ks-ct-fill-neg {
    background: rgba(255, 80, 80, 0.75);
}

.ks-ct-pr-v {
    text-align: right;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ks-ct-empty {
    color: var(--ct-muted);
    font-size: 0.9rem;
}

.ks-ct-pos {
    color: var(--ct-green);
}

.ks-ct-neg {
    color: var(--ct-red);
}

.ks-ct-warn {
    color: var(--ct-yellow);
}

@media (max-width: 1100px) {
    .ks-ct-layout {
        flex-direction: column;
    }

    .ks-ct-sidebar {
        width: 100%;
        min-width: 0;
        height: auto;
        position: relative;
        top: auto;
    }

    .ks-ct-cards {
        grid-template-columns: 1fr;
    }

    .ks-ct-kpis {
        grid-template-columns: 1fr 1fr;
    }

    .ks-ct-grid {
        grid-template-columns: 1fr;
    }

    .ks-ct-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ks-ct-field-span {
        grid-column: span 2;
    }
}

/* Main Content */
.main-content {
    flex: 1;
    padding: 1rem 2rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* ===== Overrides para página de rentables (usar TODA la pantalla) ===== */
.page-rentables .main-content {
    padding: 0.5rem 1rem;
}

.page-rentables .content-wrapper {
    max-width: 100%;
    width: 100%;
    text-align: left;
}

.page-rentables .producto-card {
    padding: 1rem;
    box-shadow: none;
    background: transparent;
}

.page-rentables .productos-header {
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
}

.page-rentables .productos-header h1 {
    font-size: 1.5rem;
}

/* Páginas lista (FBA/FBM) */
.page-lista .content-wrapper {
    max-width: 1400px;
    width: 100%;
    text-align: left;
}

/* Filtros (FBA/FBM/Guardados) */
.ks-filtros {
    margin: 0.75rem 0 0.75rem;
    padding: 0;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(26, 112, 67, 0.10), 0 1px 4px rgba(0,0,0,0.04);
    border: 1px solid rgba(26, 112, 67, 0.18);
    border-top: 3px solid #1a7043;
    overflow: hidden;
}

.ks-filtros-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #e8f8ef 100%);
    border-bottom: 1px solid rgba(26, 112, 67, 0.12);
    gap: 0.75rem;
}

.ks-filtros-header::-webkit-details-marker { display: none; }

.ks-filtros-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    font-weight: 800;
    color: #1a7043;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.ks-filtros-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.ks-filtros-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 50px;
    background: #1a7043;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.ks-filtros-reset {
    padding: 0.22rem 0.65rem;
    border-radius: 8px;
    border: 1px solid rgba(26,112,67,0.35);
    background: transparent;
    color: #1a7043;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.ks-filtros-reset:hover {
    background: #1a7043;
    color: #fff;
}

/* Toggle chevron cuando el <details> está cerrado/abierto */
.ks-filtros summary.ks-filtros-header::after {
    content: '▾';
    font-size: 1rem;
    color: #1a7043;
    opacity: 0.6;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.ks-filtros:not([open]) summary.ks-filtros-header::after {
    transform: rotate(-90deg);
}

/* Espaciado interior: secciones directas */
.ks-filtros > .ks-filter-section {
    margin: 0 0.75rem;
}
.ks-filtros > .ks-filter-section:first-of-type {
    margin-top: 0.65rem;
}
.ks-filtros > .ks-filter-section + .ks-filter-section {
    margin-top: 0.5rem;
}
/* Fila botón Buscar */
.ks-filtros > div.ks-filtros-row {
    padding: 0 0.75rem 0.65rem;
    margin-top: 0.45rem;
}

/* Sub-secciones desplegables */
.ks-filter-section {
    border-radius: 10px;
    border: 1px solid rgba(26,112,67,0.12);
    background: #fafffe;
    margin-bottom: 0.5rem;
    overflow: hidden;
}
.ks-filter-section:last-of-type {
    margin-bottom: 0;
}

.ks-filter-section-summary {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #1a7043;
    cursor: pointer;
    user-select: none;
    list-style: none;
    background: rgba(26,112,67,0.05);
    border-bottom: 1px solid transparent;
    transition: background 0.15s;
}
.ks-filter-section-summary::-webkit-details-marker { display: none; }
.ks-filter-section[open] > .ks-filter-section-summary {
    border-bottom-color: rgba(26,112,67,0.1);
    background: rgba(26,112,67,0.08);
}
.ks-filter-section-summary:hover {
    background: rgba(26,112,67,0.1);
}

.ks-filter-section > .ks-filtros-row {
    padding: 0.55rem 0.75rem 0.6rem;
}

/* Badge candado de plan */
.ks-filter-lock-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.5rem;
    border-radius: 50px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    font-size: 0.68rem;
    font-weight: 700;
    margin-left: 0.3rem;
}

.ks-filtros-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 0.9rem;
    align-items: flex-end;
}

.ks-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 180px;
}

.ks-field-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary-color);
    opacity: 0.9;
}

.ks-input,
.ks-select {
    height: 36px;
    padding: 0 0.6rem;
    border-radius: 10px;
    border: 1px solid rgba(44, 62, 80, 0.18);
    background: #fff;
    color: var(--text-color);
    font-weight: 600;
    outline: none;
}

.ks-input:focus,
.ks-select:focus {
    border-color: rgba(26, 112, 67, 0.55);
    box-shadow: 0 0 0 3px rgba(26, 112, 67, 0.12);
}

.ks-range {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.ks-range .ks-input {
    width: 92px;
}

.ks-range-sep {
    color: rgba(44, 62, 80, 0.55);
    font-weight: 900;
    user-select: none;
}

.ks-lista-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.ks-table-wrap {
    background: #fff;
    border-radius: 12px;
    padding: 0.75rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    overflow: auto;
}

.ks-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 860px;
}

.ks-table th,
.ks-table td {
    border-bottom: 1px solid #eee;
    padding: 0.6rem 0.4rem;
    vertical-align: top;
    text-align: left;
    font-size: 0.9rem;
}

/* Columnas compactas: ASIN en adelante */
.ks-table td:nth-child(n+2):nth-child(-n+8),
.ks-table th:nth-child(n+2):nth-child(-n+8) {
    padding: 0.6rem 0.35rem;
    font-size: 0.85rem;
}

/* Producto: columna ancha para nombres */
.ks-table td:first-child,
.ks-table th:first-child {
    min-width: 200px;
    width: 22%;
}

.ks-table thead th {
    position: sticky;
    top: 0;
    background: #f0fdf4;
    z-index: 2;
    font-weight: 700;
    color: #166534;
    border-bottom: 2px solid #bbf7d0;
}

.ks-muted {
    color: #777;
}

.ks-thumb {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    object-fit: cover;
    background: #f2f2f2;
    flex: 0 0 auto;
}

.ks-prod {
    display: flex;
    gap: 0.35rem;
    align-items: flex-start;
    min-width: 160px;
}

.ks-prod-name {
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 0.15rem;
    font-size: 0.83rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.ks-prod-links a {
    color: var(--secondary-color);
    text-decoration: none;
    margin-right: 0.6rem;
    font-weight: 600;
}

.ks-prod-links a:hover {
    text-decoration: underline;
}

.ks-kv {
    display: flex;
    gap: 0.35rem;
    align-items: baseline;
}

.ks-k {
    color: #666;
    font-weight: 600;
}

/* Layout principal: TODO EN UNA FILA HORIZONTAL */
.producto-layout {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    width: 100%;
}

/* Panel derecho: rentabilidad + botones */
.panel-derecho {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 380px;
    max-width: 400px;
    flex-shrink: 0;
}

@media (max-width: 1400px) {
    .producto-layout {
        flex-wrap: wrap;
    }
    .panel-derecho {
        min-width: 100%;
        max-width: 100%;
    }
}

.content-wrapper {
    width: 100%;
    max-width: 1200px;
    text-align: center;
}

.content-wrapper h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.content-wrapper p {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 1rem;
}

/* Settings Container */
.settings-container {
    background-color: white;
    padding: 2rem 2.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    max-width: 1100px;
    margin: 0 auto;
    text-align: left;
}

.setting-item {
    margin-bottom: 1.5rem;
}

.setting-item label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--primary-color);
}

.setting-item select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    background-color: white;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.setting-item select:hover {
    border-color: var(--secondary-color);
}

.setting-item select:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
}

.setting-hint {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: #888;
    font-style: italic;
}

.settings-note {
    color: #999;
    font-style: italic;
    text-align: center;
    margin-top: 2rem;
}

/* =========================
   PANEL AJUSTABLE (settings)
   ========================= */

.advanced-settings {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 2rem 2.5rem;
    text-align: left;
    max-width: 1100px;
    margin: 0 auto;
}

.advanced-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

.advanced-header h2 {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
    color: var(--primary-color);
}

.advanced-subtitle {
    margin: 0;
    color: #666;
    font-size: 0.95rem;
}

.advanced-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.advanced-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
    align-items: start;
}

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

.advanced-nav {
    background: #f7f9fc;
    border: 1px solid #e8eef8;
    border-radius: 12px;
    padding: 0.5rem;
    position: sticky;
    top: 80px;
}

.advanced-nav-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 0.75rem;
    border: 1px solid transparent;
    background: transparent;
    color: var(--primary-color);
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.advanced-nav-btn:hover {
    background: rgba(52, 152, 219, 0.08);
}

.advanced-nav-btn.active {
    background: rgba(52, 152, 219, 0.14);
    border-color: rgba(52, 152, 219, 0.25);
}

.advanced-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.advanced-card {
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 1rem;
    background: #fff;
}

.advanced-card h3 {
    margin-bottom: 0.75rem;
    color: var(--primary-color);
}

.advanced-row {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 0.75rem;
    align-items: center;
    padding: 0.5rem 0;
    border-top: 1px dashed #f0f0f0;
}

.advanced-row:first-of-type {
    border-top: none;
}

.advanced-row label {
    font-weight: 600;
    color: var(--primary-color);
}

.advanced-control {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.advanced-hint {
    grid-column: 1 / -1;
    color: #777;
    font-size: 0.85rem;
    margin-top: -0.25rem;
}

.inline-hint {
    color: #777;
    font-size: 0.85rem;
}

.value-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 0.2rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    border: 1px solid #e6e6e6;
    background: #fafafa;
    font-weight: 700;
    color: var(--primary-color);
    min-width: 64px;
    justify-content: center;
}

.advanced-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 0.75rem;
    width: 100%;
}

@media (max-width: 600px) {
    .advanced-row {
        grid-template-columns: 1fr;
    }
    .advanced-split {
        grid-template-columns: 1fr;
    }
}

.advanced-mini {
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    padding: 0.6rem;
    background: #fcfcfc;
}

/* ========================================
   Crear Proveedor – Formulario unificado
   ======================================== */

.prov-section {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    transition: box-shadow 0.2s;
}
.prov-section:hover {
    box-shadow: 0 2px 12px rgba(44, 62, 80, 0.06);
}
.prov-section--selectors {
    border-color: #d0d8e0;
    background: linear-gradient(135deg, #fafbfd 0%, #f4f7fa 100%);
}

.prov-section-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f0f2f5;
}
.prov-section-icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}
.prov-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
}
.prov-section-desc {
    font-size: 0.82rem;
    color: #777;
    margin: 2px 0 0;
    line-height: 1.4;
}

.prov-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.85rem;
}
.prov-field:last-child { margin-bottom: 0; }

.prov-field label {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.prov-input {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid #d0d5dc;
    border-radius: 8px;
    font-size: 0.9rem;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    color: var(--text-color);
}
.prov-input:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.12);
}
.prov-input--code {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 0.84rem;
    background: #f8f9fb;
    letter-spacing: 0.01em;
}

.prov-hint {
    font-size: 0.78rem;
    color: #888;
    line-height: 1.35;
}
.prov-hint code {
    background: #edf0f4;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.82rem;
    color: #555;
}

.prov-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.prov-fields-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 768px) {
    .prov-fields-grid,
    .prov-fields-grid--3 {
        grid-template-columns: 1fr;
    }
}

.prov-subgroup {
    margin-top: 0.75rem;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #e4e8ed;
    border-radius: 10px;
}
.prov-subgroup-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #556;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.65rem;
}

.prov-field--highlight {
    background: linear-gradient(135deg, #fffbe6 0%, #fff8e1 100%);
    border: 1px solid #ffe082;
    border-radius: 10px;
    padding: 0.75rem;
}

.prov-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffcc80;
}

.prov-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
}
.prov-btn-create {
    padding: 0.65rem 2rem !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    letter-spacing: 0.02em;
}

.prov-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid #e8ecf0;
}
.prov-tab {
    padding: 0.6rem 1.25rem;
    border: none;
    background: transparent;
    color: #777;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
}
.prov-tab:hover {
    color: var(--primary-color);
}
.prov-tab--active {
    color: var(--secondary-color);
    border-bottom-color: var(--secondary-color);
}

.mini-label {
    font-weight: 700;
    color: #2c3e50;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.mini-value {
    margin-top: 0.25rem;
    font-weight: 800;
    color: #2c3e50;
}

.advanced-preview {
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 1rem;
    background: #0f172a;
    color: #e5e7eb;
    position: sticky;
    top: 80px;
}

.advanced-preview h3 {
    color: #fff;
    margin-bottom: 0.5rem;
}

.preview-box {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.06);
    padding: 0.75rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    max-height: 420px;
    overflow: auto;
}

.preview-footnote {
    margin-top: 0.6rem;
    color: rgba(229, 231, 235, 0.8);
    font-size: 0.85rem;
}

/* Toggle */
.toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    user-select: none;
    cursor: pointer;
}

.toggle input {
    display: none;
}

.toggle-ui {
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: #cfd8e3;
    position: relative;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.toggle-ui::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}

.toggle input:checked + .toggle-ui {
    background: #4caf50;
}

.toggle input:checked + .toggle-ui::after {
    transform: translateX(20px);
}

/* ── Página Mi Cuenta ─────────────────────────────── */
body.page-account .main-content {
    padding: 0.75rem 2rem;
    align-items: flex-start;
    justify-content: center;
}
body.page-account .content-wrapper {
    max-width: 1560px;
    width: 100%;
    text-align: left;
}
body.page-account .settings-container {
    max-width: 100%;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}
body.page-account h1 { display: none; }

/* ── Página Ajustes ────────────────────────────────── */
body.page-settings .main-content {
    padding: 0.75rem 2rem;
    align-items: flex-start;
    justify-content: center;
}
body.page-settings .content-wrapper {
    max-width: 1400px;
    width: 100%;
    text-align: left;
}
body.page-settings .settings-container {
    max-width: 100%;
    padding: 1.5rem 2rem;
}
body.page-settings .tabs-nav {
    max-width: 100%;
    flex-wrap: wrap;
}
body.page-settings .tab-content {
    width: 100%;
}
body.page-settings .setting-item {
    max-width: 680px;
}
body.page-settings .setting-item.wide,
body.page-settings .advanced-settings,
body.page-settings .ks-card {
    max-width: 100%;
}
body.page-settings .monitor-container {
    max-width: 100%;
    padding: 1.5rem 2rem;
}
body.page-settings .scrapers-control,
body.page-settings .history-section {
    max-width: 100%;
}

/* ── Settings: tabla con cabecera verde (en lugar de azul) ── */
body.page-settings .ks-table thead th {
    background: #f0fdf4;
    color: #166534;
    border-bottom: 2px solid #bbf7d0;
}

/* ── Settings: chips activos en verde ── */
body.page-settings .ks-chip.active {
    background: rgba(26, 112, 67, 0.10);
    border-color: rgba(26, 112, 67, 0.45);
    color: #14532d;
}
body.page-settings .ks-chip:hover {
    border-color: rgba(26, 112, 67, 0.35);
}

/* ── Plan badges para tabla de roles ── */
.ks-plan-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.ks-plan-starter   { background: #f1f5f9; color: #475569; }
.ks-plan-essential { background: #eff6ff; color: #1d4ed8; }
.ks-plan-pro       { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.ks-plan-enterprise{ background: #fefce8; color: #854d0e; border: 1px solid #fde68a; }

/* ── Filter bar para búsqueda en tablas admin ── */
.ks-filter-bar {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0.75rem;
}
.ks-filter-bar .ks-input,
.ks-filter-bar .ks-select {
    flex: 1;
    min-width: 130px;
}

/* ── FBA / FBM ─────────────────────────────────────── */
body.page-lista .main-content {
    padding: 0.5rem 1.25rem;
}
body.page-lista .content-wrapper {
    max-width: 100%;
}

/* Responsive páginas internas */
@media (max-width: 1100px) {
    body.page-account .main-content,
    body.page-settings .main-content {
        padding: 0.6rem 1.25rem;
    }
}
@media (max-width: 768px) {
    body.page-account .main-content,
    body.page-settings .main-content {
        padding: 0.5rem 0.75rem;
    }
    body.page-lista .main-content {
        padding: 0.4rem 0.6rem;
    }
    body.page-settings .settings-container {
        padding: 1rem;
    }
    body.page-settings .setting-item {
        max-width: 100%;
    }
}

/* Modo compacto (solo para settings) */
body.ks-compact .main-content {
    padding: 0.5rem 0.75rem;
}

body.ks-compact .settings-container,
body.ks-compact .advanced-settings {
    padding: 1rem;
}


@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Footer */
.footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 1.25rem;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.78rem;
    letter-spacing: 0.01em;
}

.footer-brand {
    font-weight: 700;
}

.footer p {
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .header {
        padding: 1rem;
    }

    .main-content {
        padding: 1rem;
    }

    .content-wrapper h1 {
        font-size: 2rem;
    }

    .settings-container {
        padding: 1.5rem;
    }

    .metrics-grid {
        grid-template-columns: 1fr;
    }

    .tab-btn {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
}

/* Tabs */
.tabs-nav {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0;
    border-bottom: 2px solid #e0e0e0;
    position: sticky;
    top: 52px;
    z-index: 90;
    background: var(--bg-color);
    padding-top: 0.25rem;
}

/* Sección visible en modo scroll */
.tab-content.ks-scroll-visible {
    display: block !important;
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid #e8e8e8;
}

.tab-btn {
    padding: 1rem 1.5rem;
    border: none;
    background: none;
    color: #666;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.tab-btn:hover {
    color: var(--primary-color);
    background-color: rgba(0, 0, 0, 0.02);
}

.tab-btn.active {
    color: var(--secondary-color);
    border-bottom-color: var(--secondary-color);
}

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

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

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.monitor-container {
    background-color: white;
    padding: 2rem 2.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    max-width: 1100px;
    margin: 0 auto;
}

.ks-monitor-metrics-box {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 2rem;
}

.connection-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background-color: #f0f0f0;
    border-radius: 4px;
    margin-bottom: 2rem;
    font-weight: 600;
}

.ks-monitor-device-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    background-color: #f0f0f0;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-weight: 700;
}

.ks-monitor-inline-field {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.ks-monitor-inline-field-right {
    margin-left: auto;
    justify-content: flex-end;
    min-width: 240px;
    flex: 0 0 auto;
}

.ks-monitor-device-label {
    color: var(--primary-color);
}

.ks-monitor-inline-select {
    min-width: 150px;
    max-width: 180px;
}

.ks-monitor-device-select {
    max-width: 320px;
    flex: 1;
}

.ks-monitor-device-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: auto;
}

@media (max-width: 900px) {
    .ks-monitor-device-actions {
        margin-right: 0;
    }

    .ks-monitor-inline-field-right {
        margin-left: 0;
        min-width: 0;
    }
}

.ks-icon-btn {
    appearance: none;
    border: 1px solid rgba(44, 62, 80, 0.18);
    background: rgba(255, 255, 255, 0.85);
    color: var(--primary-color);
    border-radius: 10px;
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.ks-icon-btn .ks-icon {
    width: 18px;
    height: 18px;
}

.ks-icon-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(52, 152, 219, 0.55);
    background: rgba(52, 152, 219, 0.12);
}

.ks-icon-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.ks-icon-btn-danger {
    color: #e74c3c;
}

.ks-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(3px);
}

.ks-modal {
    width: 100%;
    max-width: 820px;
}

.ks-modal-card {
    margin: 0;
    max-height: calc(100vh - 2rem);
    overflow: auto;
    border-radius: 14px;
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
    padding: 1.1rem 1.15rem;
    position: relative;
}

.ks-modal-body {
    margin-top: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.ks-modal-lead {
    color: #555;
    font-size: 0.92rem;
    line-height: 1.45;
}

.ks-modal-kv {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.ks-modal-k {
    font-weight: 800;
    color: var(--primary-color);
}

.ks-code-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(44, 62, 80, 0.14);
    background: rgba(52, 152, 219, 0.08);
    color: var(--primary-color);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-weight: 800;
    font-size: 0.86rem;
    word-break: break-all;
}

.ks-modal-section {
    border: 1px solid rgba(44, 62, 80, 0.08);
    background: rgba(255, 255, 255, 0.85);
    border-radius: 12px;
    padding: 0.75rem 0.85rem;
}

.ks-modal-section-title {
    font-weight: 900;
    color: var(--primary-color);
    margin-bottom: 0.45rem;
}

.ks-modal-code {
    white-space: pre;
    overflow: auto;
    background: #f8f9fb;
    border: 1px solid rgba(44, 62, 80, 0.12);
    border-radius: 10px;
    padding: 0.75rem 0.8rem;
    margin: 0.35rem 0 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 0.88rem;
    line-height: 1.5;
    tab-size: 4;
}

.ks-modal-note {
    margin-top: 0.45rem;
    color: #666;
    font-size: 0.88rem;
}

.ks-modal-close {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: none;
    border: none;
    color: var(--ks-muted, #888);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.ks-modal-close:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
}

.ks-modal-step {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--ks-accent, #4a9eff);
    background: var(--ks-surface-2, #1a1a2e);
    border-radius: 0 4px 4px 0;
    font-size: 0.93rem;
    line-height: 1.5;
}

.ks-modal-actions {
    margin-top: 0.85rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #e74c3c;
    animation: pulse 1s infinite;
}

.status-dot.connected {
    background-color: #27ae60;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.last-update {
    margin-left: auto;
    color: #888;
    font-size: 0.9rem;
}

/* Metrics Grid */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.metric-card {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.metric-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.metric-header {
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--secondary-color);
    font-size: 1.1rem;
}

.metric-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
}

.metric-row.total {
    font-weight: 700;
    border-top: 1px solid #e0e0e0;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
}

.metric-row.last-hit {
    background: linear-gradient(90deg, #e8f5e9, #c8e6c9);
    padding: 0.75rem;
    border-radius: 8px;
    margin-top: 0.5rem;
    border-left: 4px solid #4caf50;
}

.metric-row.last-hit strong {
    color: #2e7d32;
    font-size: 1rem;
}

/* Tarjeta destacada */
.metric-card.highlight-card {
    border: 2px solid #4caf50;
    background: linear-gradient(135deg, #f9f9f9, #e8f5e9);
}

.metric-row span {
    color: #666;
}

.metric-row strong {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.1rem;
}

/* URL simplificada */
.metric-row.url-display {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
}

.url-truncated {
    font-family: monospace;
    font-size: 0.75rem;
    color: #2196F3;
    background: #f5f5f5;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: help;
    border-left: 3px solid #2196F3;
}

/* Progress Bars */
.progress-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    position: relative;
    background-color: #e0e0e0;
    border-radius: 4px;
    height: 24px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #27ae60, #1e8449);
    transition: width 0.3s ease;
}

.progress-fill.warning {
    background: linear-gradient(90deg, #f39c12, #e67e22);
}

.progress-fill.critical {
    background: linear-gradient(90deg, #e74c3c, #c0392b);
}

.progress-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 700;
    color: white;
    font-size: 0.85rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Scrapers Control */
.scrapers-control {
    background-color: #f0f0f0;
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.scrapers-control h3 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.control-info {
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.control-section {
    background-color: white;
    padding: 1.5rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.control-section label {
    display: block;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.75rem;
}

.scraper-controls {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.scraper-controls input[type="number"] {
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    width: 80px;
    text-align: center;
}

.scraper-controls input[type="number"]:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
}

.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    background-color: #374151;
    color: #fff;
}

.btn-primary {
    background-color: #16a34a !important;
    color: white !important;
}

.btn-primary:hover:not(:disabled) {
    background-color: #15803d !important;
}

.btn-secondary {
    background-color: #6b7280;
    color: white;
}

.btn-secondary:hover:not(:disabled) {
    background-color: #4b5563;
}

.btn-success {
    background-color: #22c55e;
    color: white;
}

.btn-success:hover {
    background-color: #16a34a;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(34, 197, 94, 0.35);
}

.btn-danger {
    background-color: #ef4444;
    color: white;
}

.btn-danger:hover {
    background-color: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.35);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.amazon-info {
    color: #888;
    font-style: italic;
    margin: 0;
}

.execution-status {
    padding: 1rem;
    border-radius: 4px;
    margin-top: 1rem;
    display: block;
    animation: slideIn 0.3s ease;
}

.execution-status.hidden {
    display: none;
}

.execution-status.success {
    background-color: #d4edda;
    border-left: 4px solid #27ae60;
}

.execution-status.error {
    background-color: #f8d7da;
    border-left: 4px solid #e74c3c;
}

.execution-status.info {
    background-color: #d1ecf1;
    border-left: 4px solid var(--secondary-color);
}

.status-message {
    color: var(--primary-color);
    font-weight: 600;
}

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

/* History Section */
.history-section {
    background-color: #f9f9f9;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid var(--secondary-color);
}

.history-section h3 {
    color: var(--primary-color);
    margin-top: 0;
}

.history-info {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.history-info p {
    margin: 0;
    color: #666;
}

.history-info strong {
    color: var(--secondary-color);
    font-size: 1.1rem;
}
/* ===== ESTILOS PARA PÁGINA DE PRODUCTOS ===== */

.productos-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0;
}

.productos-header h1 {
    font-size: 2rem;
    color: var(--primary-color);
}

.posicion-indicador {
    background-color: var(--secondary-color);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    font-weight: bold;
}

/* Contenedor del producto */
.producto-contenedor {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
}

.page-rentables .producto-contenedor {
    max-width: none;
    width: 100%;
    padding: 0;
}

.producto-card {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: grid;
    gap: 1.5rem;
}

/* Imagen del producto */
.producto-imagen-container {
    text-align: center;
    overflow: hidden;
    border-radius: 8px;
    background: #f9f9f9;
    padding: 1.5rem;
}

.producto-imagen {
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
    border-radius: 8px;
}

/* Info del producto */
.producto-info {
    text-align: center;
}

.producto-nombre {
    font-size: 0.85rem;
    margin-bottom: 0.1rem;
    color: var(--primary-color);
    word-break: break-word;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.producto-link {
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.75rem;
}

.producto-link:hover {
    text-decoration: underline;
}

/* Contenedor de precios */
.precios-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1rem;
    background: #f0f8ff;
    border-radius: 8px;
}

.precio-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.precio-label {
    font-size: 0.75rem;
    color: #666;
    font-weight: 500;
}

.precio-valor {
    font-size: 1rem;
    font-weight: bold;
    color: var(--secondary-color);
}

/* Actualizar precio - COMPACTO */
.precio-actualizar-container {
    padding: 0.5rem 0;
    background: transparent;
    border-radius: 0;
    border-left: none;
}

.precio-actualizar-container label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
    color: var(--primary-color);
    font-size: 0.75rem;
}

.input-grupo {
    position: relative;
    display: flex;
    align-items: center;
}

.simbolo-euro {
    position: absolute;
    left: 8px;
    font-weight: bold;
    font-size: 0.85rem;
    color: var(--primary-color);
}

.precio-input {
    width: 100%;
    padding: 0.35rem 0.5rem 0.35rem 1.5rem;
    border: 1px solid var(--secondary-color);
    border-radius: 4px;
    font-size: 0.85rem;
}

.precio-input:focus {
    outline: none;
    border-color: #2196F3;
    box-shadow: 0 0 4px rgba(33, 150, 243, 0.25);
}

.precio-actualizar-container small {
    display: block;
    color: #666;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

/* Rentabilidad - COMPACTO */
.rentabilidad-display {
    padding: 0.75rem;
    background: #f6f6f6;
    border-radius: 6px;
    border-left: 3px solid #2c3e50;
}

.rentabilidad-comparativa {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.rentabilidad-col {
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    padding: 0.5rem;
    flex: 1;
}

.rentabilidad-col h4 {
    margin-bottom: 0.4rem;
    color: var(--primary-color);
    font-size: 0.9rem;
}

/* ===== Comparación Proveedor vs Amazon - HORIZONTAL ===== */
.comparacion-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    flex: 1;
    align-content: flex-start;
}

.comparacion-grid .comparacion-col {
    flex: 1;
    min-width: 200px;
}

/* ── Fila Keepa (izq) + tabla ventas (dcha) — mismo tamaño ── */
.ks-ventas-keepa-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    width: 100%;
    flex: 0 0 100%;
}

/* Ambos hijos ocupan el mismo espacio */
.ks-keepa-mini,
.ks-ventas-europa-row--mini {
    flex: 1;
    min-width: 0;
}

/* Keepa — columna izquierda */
.ks-keepa-mini {
    background: #fff;
    border: 1px solid #e4e8ef;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* Versión grande: ocupa el mismo flex que la tabla */
.ks-keepa-mini--grande {
    flex: 1;
}
.ks-keepa-mini__head {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-bottom: 1px solid #f0f0f5;
    flex-shrink: 0;
}
.ks-keepa-mini__body {
    flex: 1;
    padding: 4px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}
.ks-keepa-mini__body .ks-keepa__img-wrap { width: 100%; }
.ks-keepa-mini__body .ks-keepa__img { cursor: zoom-in; }

@media (max-width: 900px) {
    .ks-ventas-keepa-row { flex-direction: column; }
}

/* ── Widget ventas por mercado europeo ─────────────── */
.ks-ventas-europa-row {
    width: 100%;
    flex: 0 0 100%;
    background: #fff;
    border: 1px solid #e4e8ef;
    border-radius: 8px;
    overflow: hidden;
}

.ks-ventas-europa-row .ks-ve__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 7px 12px 6px;
    border-bottom: 1px solid #f0f0f5;
}

.ks-ventas-europa-row .ks-ve__title {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;
}

.ks-ve__subtitle {
    font-size: 9px;
    color: #c8d3de;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ks-ventas-europa-row .ks-ve__body {
    padding: 2px 0 4px;
}

.ks-ve__empty-state {
    padding: 16px 12px;
    text-align: center;
    color: #c5ced9;
    font-size: 11px;
    line-height: 1.6;
}
.ks-ve__empty-state strong { color: #7e8fa4; font-weight: 600; }

/* ── Filas horizontales ─────────────────────────────── */
.ks-ve__rows { display: flex; flex-direction: column; }

.ks-ve__row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-bottom: 1px solid #f5f6f8;
    animation: ksr-in 0.35s ease both;
}
.ks-ve__row:last-child { border-bottom: none; }
.ks-ve__rows .ks-ve__row:nth-child(1) { animation-delay: 0.04s; }
.ks-ve__rows .ks-ve__row:nth-child(2) { animation-delay: 0.09s; }
.ks-ve__rows .ks-ve__row:nth-child(3) { animation-delay: 0.14s; }
.ks-ve__rows .ks-ve__row:nth-child(4) { animation-delay: 0.19s; }
.ks-ve__rows .ks-ve__row:nth-child(5) { animation-delay: 0.24s; }

@keyframes ksr-in {
    from { opacity: 0; transform: translateX(-5px); }
    to   { opacity: 1; transform: none; }
}

.ks-ve__row-flag {
    font-size: 14px;
    line-height: 1;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.ks-ve__row-label {
    display: flex;
    align-items: center;
    font-size: 10px;
    color: #6b7280;
    font-weight: 500;
    width: 66px;
    flex-shrink: 0;
    white-space: nowrap;
    cursor: pointer;
}
.ks-ve-chk {
    margin-right: 4px;
    cursor: pointer;
    accent-color: #1a5c3a;
    flex-shrink: 0;
}
.ks-market-select {
    font-size: 11px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 2px 4px;
    background: #f9fafb;
    cursor: pointer;
    margin-left: 6px;
    vertical-align: middle;
    color: #374151;
}
.ks-ve__row-track {
    flex: 1;
    height: 4px;
    background: #eef0f4;
    border-radius: 2px;
    overflow: hidden;
}
.ks-ve__row-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.7s cubic-bezier(.4, 0, .2, 1);
}

/* Colores nacionales */
.ks-ve__bar--es { background: #c8002d; }
.ks-ve__bar--de { background: #1a1a1a; }
.ks-ve__bar--fr { background: #0055A4; }
.ks-ve__bar--it { background: #009246; }
.ks-ve__bar--uk { background: #012169; }
.ks-ve__bar--nl { background: #AE1C28; }
.ks-ve__bar--pl { background: #DC143C; }
.ks-ve__bar--se { background: #006AA7; }
.ks-ve__bar--be { background: #FAE042; }
.ks-ve__bar--tr { background: #E30A17; }
.ks-ve__bar--us { background: #3C3B6E; }

.ks-ve__row-num {
    font-size: 11px;
    font-weight: 700;
    color: #1f2937;
    min-width: 42px;
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.ks-ve__row-num--dim {
    color: #c5cdd9;
    font-weight: 500;
    font-size: 10px;
}

.comparacion-col {
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.comparacion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

.comparacion-header h2 {
    font-size: 1.2rem;
    color: var(--primary-color);
    margin: 0;
}

.asin-badge {
    background: #f0f8ff;
    border: 1px solid rgba(52, 152, 219, 0.35);
    color: var(--primary-color);
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.proveedor-badge {
    display: inline-block;
    background: #f7f8fa;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: default;
    white-space: nowrap;
}

.comparacion-body {
    display: flex;
    gap: 0.75rem;
    flex: 1;
}

/* Layout vertical: foto arriba, título, precio abajo */
.comparacion-body-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.comparacion-body-vertical .producto-nombre {
    font-size: 1rem;
    line-height: 1.4;
    max-height: 2.8em;
    overflow: hidden;
}

.comparacion-body-vertical .producto-link {
    font-size: 0.85rem;
}

.comparacion-body-vertical .precio-actualizar-container {
    width: 100%;
    max-width: 200px;
}

/* Dentro de cada columna: imagen + info en fila horizontal */
.comparacion-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    flex: 1;
}

.comparacion-info {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
}

.comparacion-imagen {
    width: 220px;
    height: 220px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f9f9;
    border-radius: 6px;
    padding: 0.75rem;
    overflow: hidden;
}

.producto-imagen {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.precio-item-inline {
    gap: 0.2rem;
}

/* Precio grande para layout vertical */
.precio-item-grande {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 600;
}

.precio-item-grande .precio-valor {
    font-size: 1.3rem;
    color: var(--primary-color);
}

@media (max-width: 900px) {
    .comparacion-grid {
        flex-direction: column;
    }
}

.rentabilidad-tipo h3 {
    margin-bottom: 0.4rem;
    color: var(--primary-color);
    font-size: 0.95rem;
}

.rentabilidad-detalles {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.detalle-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0.4rem;
    background: white;
    border-radius: 4px;
    border: 1px solid #eee;
    font-size: 0.85rem;
}

.detalle-item .label {
    font-weight: 500;
    color: #666;
    font-size: 0.8rem;
}

.detalle-item .valor {
    font-weight: bold;
    font-size: 0.9rem;
}

.valor.positivo {
    color: #111;
}

.valor.negativo {
    color: #e74c3c;
}

/* Botones de acción - EN FILA */
.botones-contenedor {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.botones-contenedor .btn-rechazar {
    grid-column: span 2;
}

.btn {
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 40px;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-icono {
    font-size: 1.1rem;
    line-height: 1;
}

.btn-icono .ks-icon {
    width: 1.1rem;
    height: 1.1rem;
    display: block;
}

.btn-texto {
    font-size: 0.8rem;
}

.btn-fba {
    background-color: #1d4ed8;
    color: #fff;
    border: none;
}
.btn-fba:hover:not(:disabled) {
    background-color: #1e40af;
}

.btn-fbm {
    background-color: #2563eb;
    color: #fff;
    border: none;
}
.btn-fbm:hover:not(:disabled) {
    background-color: #1d4ed8;
}

.btn-rechazar {
    background-color: #dc2626 !important;
    color: #fff !important;
    border: none !important;
}
.btn-rechazar:hover:not(:disabled) {
    background-color: #b91c1c !important;
}

.btn-nav {
    background-color: #4b5563;
    color: #fff;
    border: none;
    padding: 0.6rem 1.2rem;
    grid-column: auto;
}
.btn-nav:hover:not(:disabled) {
    background-color: #374151;
}

/* Analizar — verde en páginas de comparación/buscador, azul en tabla FBA/FBM */
#btn-verificar,
#btn-comprobador {
    background-color: #16a34a !important;
    color: #fff !important;
    border: none !important;
}
#btn-verificar:hover:not(:disabled),
#btn-comprobador:hover:not(:disabled) {
    background-color: #15803d !important;
}

/* Analizar en tabla FBA/FBM — verde primario */
.ks-btn-verificar {
    background-color: #16a34a !important;
    color: #fff !important;
    border: none !important;
}
.ks-btn-verificar:hover:not(:disabled) {
    background-color: #15803d !important;
}
.ks-btn-verificar:disabled {
    background-color: #86efac !important;
    color: #fff !important;
}

/* Disponibilidad — verde */
#btn-comprobador-venta {
    background-color: #16a34a !important;
    color: #fff !important;
    border: none !important;
}
#btn-comprobador-venta:hover:not(:disabled) {
    background-color: #15803d !important;
}

/* Guardar — ámbar */
#btn-guardar {
    background-color: #d97706 !important;
    color: #fff !important;
    border: none !important;
    grid-column: span 2;
}
#btn-guardar:hover:not(:disabled) {
    background-color: #b45309 !important;
}

/* Anterior / Siguiente → pizarra media */
#btn-anterior,
#btn-siguiente {
    background-color: #e5e7eb !important;
    color: #374151 !important;
}

#btn-anterior:hover:not(:disabled),
#btn-siguiente:hover:not(:disabled) {
    background-color: #d1d5db !important;
}

/* Recargar → verde */
#ks-btn-recargar {
    background-color: #16a34a !important;
}

#ks-btn-recargar:hover:not(:disabled) {
    background-color: #15803d !important;
}

/* Limpiar filtros → naranja/ámbar */
#ks-filter-clear {
    background-color: var(--secondary-color) !important;
}

#ks-filter-clear:hover:not(:disabled) {
    background-color: #d97706 !important;
}

/* Navegación - COMPACTA */
.navegacion-contenedor {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.contador-texto {
    display: none;
}

.ks-ultima-actualizacion {
    font-size: 0.78rem;
    color: #666;
    margin: 0.4rem 0 0.2rem;
    text-align: center;
}

/* Historial de precios */
.ks-price-history {
    background: #fff;
    border-radius: 12px;
    padding: 1.2rem 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.ks-price-history h3 {
    font-size: 1rem;
    color: #333;
}
.ks-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.ks-history-table th {
    background: #f5f5f5;
    padding: 0.5rem 0.8rem;
    text-align: left;
    border-bottom: 2px solid #ddd;
    font-weight: 600;
    color: #555;
}
.ks-history-table td {
    padding: 0.45rem 0.8rem;
    border-bottom: 1px solid #eee;
}
.ks-history-table tr:hover td {
    background: #f9f9f9;
}
.ks-history-table .no-disponible {
    color: #d32f2f;
    font-weight: 600;
}
.ks-history-table .precio-anterior {
    font-size: 0.75rem;
    color: #999;
    text-decoration: line-through;
    margin-left: 0.3rem;
}

/* Mensaje vacío */
.mensaje-vacio {
    text-align: center;
    padding: 3rem 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.mensaje-vacio h2 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.mensaje-vacio p {
    color: #666;
    margin: 0.5rem 0;
}

/* Mensajes flotantes */
.mensaje {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 0.85rem 1.4rem;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.88rem;
    line-height: 1.5;
    max-width: 480px;
    min-width: 220px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
    animation: slideIn 0.3s ease;
    z-index: 1000;
    word-break: break-word;
}

.mensaje-exito {
    background-color: #27ae60;
    color: white;
}

.mensaje-error {
    background-color: #e74c3c;
    color: white;
}

.mensaje-info {
    background-color: var(--secondary-color);
    color: white;
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .productos-header {
        flex-direction: column;
        gap: 1rem;
    }

    .precios-container {
        grid-template-columns: 1fr;
    }

    .botones-contenedor {
        grid-template-columns: 1fr;
    }

    .navegacion-contenedor {
        grid-template-columns: 1fr;
    }

    .producto-card {
        padding: 1rem;
    }

    .mensaje {
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
    }
}

/* ========== SCRAPER CONTROL STYLES ========== */

.scraper-controls {
    display: flex;
    gap: 1rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.scraper-controls input[type="number"] {
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    min-width: 100px;
}

.scraper-controls input[type="number"]:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
}

.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    background-color: #374151;
    color: #fff;
}

.btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-success {
    background-color: #22c55e;
    color: white;
}

.btn-success:hover:not(:disabled) {
    background-color: #16a34a;
}

.btn-danger {
    background-color: #ef4444;
    color: white;
}

.btn-danger:hover:not(:disabled) {
    background-color: #dc2626;
}

.control-section {
    background: white;
    padding: 1.5rem;
    margin: 1rem 0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.control-section label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

.control-info,
.amazon-info {
    color: #7f8c8d;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.execution-status {
    padding: 1rem;
    border-radius: 4px;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: slideIn 0.3s ease;
}

.execution-status.hidden {
    display: none;
}

.execution-status.status-pending {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
}

.execution-status.status-running {
    background-color: #cfe2ff;
    border: 1px solid #0d6efd;
    color: #084298;
}

.execution-status.status-paused {
    background-color: #e2e3e5;
    border: 1px solid #6c757d;
    color: #383d41;
}

.execution-status.status-completed {
    background-color: #d1e7dd;
    border: 1px solid #198754;
    color: #0f5132;
}

.execution-status.status-failed {
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    color: #842029;
}

.execution-status.status-stopping {
    background-color: #ffcccc;
    border: 1px solid #ff9999;
    color: #cc0000;
}

.status-message {
    flex: 1;
    font-weight: 500;
}

.scrapers-control {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-top: 2rem;
}

.scrapers-control h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

/* Notificaciones flotantes */
.notification {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 1rem 1.5rem;
    border-radius: 4px;
    color: white;
    font-weight: 600;
    z-index: 1000;
    animation: slideInRight 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.notification-success {
    background-color: #27ae60;
}

.notification-error {
    background-color: #e74c3c;
}

.notification-warning {
    background-color: #f39c12;
}

@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

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

@media (max-width: 768px) {
    .scraper-controls {
        flex-direction: column;
    }
    
    .scraper-controls input[type="number"],
    .btn {
        width: 100%;
    }
    
    .execution-status {
        font-size: 0.9rem;
    }
    
    .notification {
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
    }
}

.btn-eliminar {
    background-color: #ef4444;
    color: white;
}

.btn-eliminar:hover:not(:disabled) {
    background-color: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
}

.ks-summary {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
    justify-content: flex-start;
    margin: 0.75rem 0 1rem;
    flex-wrap: wrap;
}

.ks-summary-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    background: #ffffff;
    border-radius: 10px;
    padding: 0.65rem 1.1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    border-left: 4px solid #16a34a;
    min-width: 180px;
}

.ks-summary-label {
    color: #64748b;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ks-summary-value {
    color: #16a34a;
    font-weight: 800;
    font-size: 1.3rem;
}

.ks-thumbs {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 0 0 auto;
}

.ks-btn-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    margin-left: 0.35rem;
}

/* Acciones en tabla: columna compacta (nth-last-child(2) = acciones, nth-last-child(1) = vigilancia) */
.ks-table td:nth-last-child(2) {
    white-space: normal;
    padding: 0.5rem 0.35rem;
}

.ks-table-acciones-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.ks-table-acciones-cell .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0.25rem 0.6rem;
    font-size: 0.78rem;
    width: 100%;
    box-sizing: border-box;
}

.ks-table-acciones-cell .ks-more-menu-wrap {
    width: 100%;
}

.ks-table-acciones-cell .ks-more-btn {
    width: 100%;
    text-align: center;
    padding: 0.2rem 0;
    font-size: 1rem;
}

/* Ver comparación: verde secundario */
.ks-btn-view.btn {
    background-color: #22c55e !important;
    color: #fff !important;
}
.ks-btn-view.btn:hover {
    background-color: #16a34a !important;
}

/* Eliminar + Ver: separación uniforme (sin depender de margin-left) */
.ks-btn-view {
    margin-left: 0;
}

.ks-btn-del {
    margin-right: 0.35rem;
}

/* Guardar/Guardado en FBA/FBM: verde */
.ks-btn-save.btn {
    background-color: #16a34a;
    color: #fff;
}

.ks-btn-save.btn:hover:not(:disabled) {
    background-color: #15803d;
}

/* Colores unificados en tablas/listas (botones sueltos, no en dropdown) */
.btn-fba {
    background-color: #1d4ed8;
    color: #fff;
}
.btn-fba:hover:not(:disabled) {
    background-color: #1e40af;
}

.btn-fbm {
    background-color: #2563eb;
    color: #fff;
}
.btn-fbm:hover:not(:disabled) {
    background-color: #1d4ed8;
}

/* Mover en dropdown: sin color, texto neutro */
.ks-more-dropdown-item.ks-btn-move {
    background: none !important;
    color: #1f2937 !important;
}
.ks-more-dropdown-item.ks-btn-move:hover {
    background: #f9fafb !important;
    color: #111827 !important;
}

/* ============================================
   SETTINGS: LOGS TAB
   ============================================ */

.hidden {
    display: none !important;
}

.ks-logs-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    margin-bottom: 0.75rem;
}

.ks-logs-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 180px;
}

.ks-logs-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary-color);
    opacity: 0.9;
}

.ks-logs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ks-chip {
    appearance: none;
    border: 1px solid rgba(44, 62, 80, 0.18);
    background: rgba(255, 255, 255, 0.85);
    color: var(--text-color);
    border-radius: 999px;
    padding: 0.25rem 0.55rem;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.ks-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(52, 152, 219, 0.45);
}

.ks-chip.active {
    background: rgba(52, 152, 219, 0.12);
    border-color: rgba(52, 152, 219, 0.55);
}

.ks-logs-dates {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ks-logs-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
}

.ks-logs-status {
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0.85;
}

.ks-logs-output {
    width: 100%;
    min-height: 50vh;
    max-height: 70vh;
    overflow: auto;
    padding: 0.75rem;
    border-radius: 12px;
    border: 1px solid rgba(44, 62, 80, 0.18);
    background: #fff;
    color: var(--text-color);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.85rem;
    line-height: 1.35;
    white-space: pre-wrap;
}

.ks-logs-list {
    width: 100%;
    min-height: 50vh;
    max-height: 70vh;
    overflow: auto;
    border-radius: 12px;
    border: 1px solid rgba(44, 62, 80, 0.18);
    background: #fff;
}

.ks-log-row {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid rgba(44, 62, 80, 0.10);
    display: grid;
    gap: 0.25rem;
}

.ks-log-row:last-child {
    border-bottom: none;
}

.ks-log-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 700;
}

.ks-log-badge {
    border: 1px solid rgba(44, 62, 80, 0.18);
    background: rgba(44, 62, 80, 0.04);
    border-radius: 999px;
    padding: 0.12rem 0.45rem;
    font-weight: 800;
}

.ks-log-msg {
    font-size: 0.95rem;
    font-weight: 700;
}

.ks-log-fields {
    font-size: 0.85rem;
    opacity: 0.9;
    white-space: pre-wrap;
}

body.dark-mode .ks-logs-output {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
}

body.dark-mode .ks-logs-list {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
}

body.dark-mode .ks-log-row {
    border-bottom-color: rgba(255, 255, 255, 0.10);
}

body.dark-mode .ks-chip {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
}

body.dark-mode .ks-chip.active {
    background: rgba(52, 152, 219, 0.18);
    border-color: rgba(52, 152, 219, 0.55);
}

/* ============ NOTIFICACIONES (campanita) ============ */

/* Guardados sacado del nav y recolocado junto a la campana */
.ks-notas-header {
    margin-left: auto;
    margin-right: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0 !important;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    transition: background 0.15s, transform 0.15s;
}
.ks-notas-header:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    transform: translateY(-1px);
}
.ks-notas-header .ks-icon {
    width: 16px;
    height: 16px;
    fill: none; color: rgba(255, 255, 255, 0.9); stroke: currentColor;
}

.ks-guardados-header {
    margin-left: 0;
    margin-right: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0 !important;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    transition: background 0.15s, transform 0.15s;
}
.ks-guardados-header:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    transform: translateY(-1px);
}
.ks-guardados-header.active {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}
.ks-guardados-header .ks-icon {
    width: 16px;
    height: 16px;
    fill: none; color: rgba(255, 255, 255, 0.9); stroke: currentColor;
}

.ks-n-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 0;
    margin-right: 0.5rem;
}

/* Botón campana — mismo estilo que los tabs del header */
.ks-n-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: rgba(255, 255, 255, 0.9);
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}
.ks-n-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
}
.ks-n-wrap.open .ks-n-btn {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.35);
}

.ks-n-icon {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
}

/* Badge */
.ks-n-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 99px;
    background: #e74c3c;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}

/* Panel desplegable */
.ks-n-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 340px;
    max-height: 420px;
    background: #fff;
    border: 1px solid rgba(44, 62, 80, 0.14);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
    display: none;
    z-index: 250;
    overflow: hidden;
    flex-direction: column;
}
.ks-n-wrap.open .ks-n-panel {
    display: flex;
}

/* Cabecera del panel */
.ks-n-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid rgba(44, 62, 80, 0.09);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--primary-color);
}
.ks-n-actions { display: flex; gap: 0.25rem; }
.ks-n-hdr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    background: none;
    border-radius: 6px;
    color: #888;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.ks-n-hdr-btn:hover { background: rgba(44, 62, 80, 0.08); color: var(--primary-color); }

/* Lista */
.ks-n-list {
    overflow-y: auto;
    flex: 1;
    max-height: 360px;
}

.ks-n-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    color: #aaa;
    font-size: 0.82rem;
}

/* Fila de notificación */
.ks-n-row {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid rgba(44, 62, 80, 0.06);
    cursor: pointer;
    transition: background 0.1s;
}
.ks-n-row:last-child { border-bottom: none; }
.ks-n-row:hover { background: rgba(44, 62, 80, 0.035); }
.ks-n-row.ks-n-read { opacity: 0.45; }

/* Cruz (x) — a la izquierda */
.ks-n-dismiss {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border: none;
    background: none;
    border-radius: 4px;
    color: #bbb;
    cursor: pointer;
    transition: color 0.12s, background 0.12s;
}
.ks-n-dismiss:hover { color: #e74c3c; background: rgba(231, 76, 60, 0.1); }

/* Punto de color por nivel */
.ks-n-dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-top: 6px;
}

/* Contenido */
.ks-n-content {
    flex: 1;
    min-width: 0;
}
.ks-n-text {
    font-size: 0.8rem;
    color: var(--text-color);
    line-height: 1.35;
    word-break: break-word;
}
.ks-n-row:not(.ks-n-read) .ks-n-text { font-weight: 600; }

.ks-n-meta {
    font-size: 0.68rem;
    color: #aaa;
    margin-top: 2px;
}

@media (max-width: 480px) {
    .ks-n-panel { width: calc(100vw - 16px); right: -40px; }
}

/* Cuenta (botón a la derecha en header) */
.ks-account-wrap {
    margin-left: 0;
    margin-right: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
}

.ks-account-btn {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    font-weight: 700;
    font-size: 0.9rem;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.ks-account-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-1px);
}

.ks-account-icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.ks-account-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: #fff;
    border: 1px solid rgba(44, 62, 80, 0.18);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    padding: 0.35rem;
    display: none;
    z-index: 200;
}

.ks-account-wrap.open .ks-account-menu {
    display: block;
}

.ks-account-item {
    width: 100%;
    display: block;
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-radius: 10px;
    border: 0;
    background: transparent;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
}

.ks-account-item:hover {
    background: rgba(44, 62, 80, 0.06);
}


/* Login obligatorio (overlay) */
.ks-auth-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.ks-auth-modal {
    width: min(520px, 95vw);
    background: #fff;
    border-radius: 14px;
    padding: 1rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.ks-auth-modal h2 {
    margin-bottom: 0.35rem;
}

.ks-auth-modal .ks-muted {
    margin-bottom: 0.75rem;
}

.ks-locked {
    overflow: hidden;
}

/* Cuenta (settings tab) */
.ks-card {
    background: #fff;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    margin: 0.75rem 0;
}

.ks-form-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0.6rem 0;
}

.ks-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.75rem;
    align-items: center;
}

.ks-status {
    margin-top: 0.6rem;
    font-weight: 700;
}

.ks-status-ok {
    color: #111;
}

.ks-status-err {
    color: #e74c3c;
}

.ks-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

@media (max-width: 900px) {
    .ks-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* Login */
/* ===================== LOGIN PAGE ===================== */

body.page-login {
    background: #0e2619;
    min-height: 100vh;
    overflow: hidden;
}

/* Layout split-screen: fondo oscuro para el hero, blanco para el form */
.page-login .main-content {
    display: block;
    padding: 0;
    min-height: 100vh;
    flex: 1;
}

.page-login .content-wrapper {
    max-width: 100%;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    text-align: left;
}

/* El wrap ocupa toda la pantalla dividida en dos */
.ks-login-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    position: relative;
}

/* ── Panel izquierdo: oscuro, branding ── */
.ks-login-hero {
    background:
        radial-gradient(ellipse at 70% 10%, rgba(34, 160, 90, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 10% 90%, rgba(0, 80, 40, 0.35) 0%, transparent 50%),
        linear-gradient(165deg, #0e2619 0%, #112e1d 55%, #0a1f12 100%);
    padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
    animation: ks-login-rise 0.5s ease both;
}

/* Círculos decorativos en el panel oscuro */
.ks-login-hero::before {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.04);
    top: -120px;
    right: -100px;
    pointer-events: none;
}

.ks-login-hero::after {
    content: '';
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.06);
    bottom: -60px;
    left: -60px;
    pointer-events: none;
}

.ks-login-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 800;
    font-family: 'Raleway', sans-serif;
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    color: rgba(120, 220, 155, 0.95);
    background: rgba(120, 220, 155, 0.08);
    border: 1px solid rgba(120, 220, 155, 0.22);
    margin-bottom: 1.5rem;
    width: fit-content;
}

.ks-login-badge::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 6px #4ade80;
}

.page-login .ks-login-title {
    font-family: 'Raleway', sans-serif;
    font-size: clamp(2.8rem, 4.5vw, 4.2rem);
    line-height: 0.95;
    margin: 0 0 1rem 0;
    color: #ffffff;
    font-weight: 900;
    letter-spacing: -0.04em;
    animation: ks-login-rise 0.65s 0.1s ease both;
}

.page-login .ks-login-subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.52);
    font-size: clamp(0.9rem, 1.6vw, 1.05rem);
    font-weight: 400;
    font-family: 'DM Sans', sans-serif;
    line-height: 1.55;
    animation: ks-login-rise 0.65s 0.2s ease both;
}

/* Firma discreta al pie del panel izquierdo */
.ks-login-hero-foot {
    margin-top: auto;
    padding-top: 3rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.2);
    font-family: 'DM Sans', sans-serif;
}

/* ── Panel derecho: blanco, formulario ── */
.ks-login-card {
    background: #ffffff;
    margin: 0;
    border-radius: 0;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    animation: ks-login-rise 0.55s 0.05s ease both;
}

.ks-login-card h2 {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.55rem;
    font-weight: 800;
    color: #0e2619;
    letter-spacing: -0.02em;
    margin-bottom: 0.4rem;
}

/* Subtítulo dentro de la tarjeta */
.ks-login-card-sub {
    color: #6b7280;
    font-size: 0.92rem;
    font-family: 'DM Sans', sans-serif;
    margin-bottom: 2rem;
    font-weight: 400;
}

.page-login .ks-form-row {
    margin: 1rem 0;
    gap: 0.4rem;
    text-align: left;
}

.page-login .ks-form-row label {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #374151;
}

.page-login .ks-input {
    width: 100%;
    height: 48px;
    border-radius: 10px;
    border: 1.5px solid #d1d5db;
    padding: 0 0.9rem;
    font-size: 0.97rem;
    font-weight: 400;
    font-family: 'DM Sans', sans-serif;
    background: #f9fafb;
    color: #111827;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    outline: none;
}

.page-login .ks-input::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

.page-login .ks-input:focus {
    border-color: #1a7043;
    box-shadow: 0 0 0 3px rgba(26, 112, 67, 0.12);
    background: #ffffff;
}

.ks-login-row-bottom {
    margin-top: 0.6rem;
}

.ks-login-remember {
    width: 100%;
    justify-content: space-between;
}

.page-login .ks-login-remember span {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.88rem;
    font-weight: 500;
    font-family: 'DM Sans', sans-serif;
    color: #4b5563;
}

.ks-login-remember-right {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.page-login .ks-actions {
    margin-top: 1.5rem;
}

.ks-login-btn {
    width: 100%;
    border-radius: 10px;
    height: 50px;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    font-weight: 900;
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    background: #0e2619;
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 14px rgba(14, 38, 25, 0.25);
}

.ks-login-btn:hover {
    background: #1a7043;
    box-shadow: 0 6px 20px rgba(26, 112, 67, 0.32);
    transform: translateY(-1px);
}

.ks-status {
    min-height: 1.4rem;
    margin-top: 0.9rem;
    font-size: 0.86rem;
    font-weight: 600;
    text-align: center;
    font-family: 'DM Sans', sans-serif;
}

.ks-status-ok  { color: #166534; }
.ks-status-err { color: #b91c1c; }

@keyframes ks-login-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ── Mobile: stacked ── */
@media (max-width: 780px) {
    body.page-login { overflow: auto; }

    .ks-login-wrap {
        grid-template-columns: 1fr;
        min-height: 100vh;
    }

    .ks-login-hero {
        padding: 2.5rem 1.5rem;
        min-height: 220px;
        justify-content: flex-end;
    }

    .page-login .ks-login-title {
        font-size: 2.6rem;
    }

    .ks-login-card {
        padding: 2rem 1.5rem;
        border-radius: 0;
    }
}

/* ===== Precios de venta en tabla FBA/FBM ===== */
.ks-precios-venta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 90px;
}

.ks-btn-edit-precios {
    margin-top: 0.25rem;
    font-size: 0.72rem;
    padding: 2px 7px;
    min-height: unset;
    border-radius: 4px;
    opacity: 0.85;
}
.ks-btn-edit-precios:hover {
    opacity: 1;
}

/* ===== Panel configuración precios ===== */
.ks-precio-panel {
    position: fixed;
    inset: 0;
    background: rgba(15, 30, 20, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.ks-precio-panel.ks-precio-panel--visible {
    opacity: 1;
    pointer-events: all;
}

.ks-precio-panel-inner {
    background: #ffffff;
    border-radius: 16px;
    padding: 0;
    width: 100%;
    max-width: 580px;
    position: relative;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transform: translateY(20px) scale(0.97);
    transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ks-precio-panel.ks-precio-panel--visible .ks-precio-panel-inner {
    transform: translateY(0) scale(1);
}

/* Header strip */
.ks-precio-panel-header {
    background: linear-gradient(135deg, #1a7043 0%, #145534 100%);
    padding: 1.4rem 2rem 1.2rem;
    position: relative;
}

.ks-precio-panel-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.ks-badge-tipo {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.ks-precio-panel-close {
    position: absolute;
    top: 0.9rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.ks-precio-panel-close:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

/* Body */
.ks-precio-panel-body {
    padding: 1.8rem 2rem 1.5rem;
}

/* Recommended price row */
.ks-precio-recomendado {
    background: #f0faf4;
    border: 1px solid #c6e8d3;
    border-radius: 10px;
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ks-precio-rec-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex: 1;
}

.ks-precio-rec-label {
    font-size: 0.8rem;
    color: #4a7a5c;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ks-precio-rec-val {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1a7043;
    letter-spacing: -0.03em;
}

.ks-precio-hint {
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.4;
}

/* Form */
.ks-precio-form {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    padding: 1.5rem;
}
.ks-precio-form--block {
    display: block;
    padding: 1rem 0;
}

.ks-precio-label {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    letter-spacing: 0.01em;
}

.ks-precio-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    padding: 0 0.75rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.ks-precio-input-wrap:focus-within {
    border-color: #1a7043;
    box-shadow: 0 0 0 3px rgba(26, 112, 67, 0.12);
    background: #fff;
}

.ks-precio-input-wrap span {
    color: #9ca3af;
    font-size: 0.9rem;
    font-weight: 500;
    user-select: none;
}

.ks-precio-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #111827;
    padding: 0.6rem 0;
    font-size: 0.95rem;
    font-family: inherit;
    width: 100%;
}

.ks-precio-input::placeholder {
    color: #d1d5db;
}

/* Actions */
.ks-precio-actions,
.ks-precio-form-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid #f3f4f6;
}

.ks-precio-actions .btn,
.ks-precio-form-actions .btn {
    padding: 0.6rem 1.4rem;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: 8px;
    letter-spacing: 0.01em;
}

/* Cancel button in price panel — neutral grey, not red */
.ks-precio-actions .btn-rechazar,
.ks-precio-form-actions .btn-rechazar {
    background-color: #e5e7eb !important;
    color: #374151 !important;
    box-shadow: none;
}

.ks-precio-actions .btn-rechazar:hover,
.ks-precio-form-actions .btn-rechazar:hover {
    background-color: #d1d5db !important;
}

.ks-precio-form-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    margin-top: 0.4rem;
}

/* ===== Marketplaces — badges en la tabla FBA/FBM ===== */
.ks-mkt-flags {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    margin: 2px 0;
}
.ks-mkt-flag-sm {
    font-size: 0.95rem;
    line-height: 1;
    cursor: default;
}

/* Badges de precio por mercado en celda de precios */
.ks-mkt-badge {
    display: grid;
    grid-template-columns: 1.1rem 1fr auto auto;
    gap: 0.15rem 0.4rem;
    align-items: center;
    padding: 2px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.78rem;
}
.ks-mkt-badge:last-child { border-bottom: none; }
.ks-mkt-badge .ks-mkt-flag { font-size: 0.9rem; }
.ks-mkt-badge .ks-mkt-price { color: #374151; font-weight: 600; }
.ks-mkt-badge .ks-mkt-profit { font-size: 0.72rem; }
.ks-mkt-badge .ks-mkt-roi { font-size: 0.72rem; }

/* ===== Columna Proveedor con precio ===== */
.ks-prov-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ks-prov-name {
    font-weight: 500;
    color: #374151;
    font-size: 0.83rem;
}
.ks-prov-price {
    font-size: 0.88rem;
    font-weight: 600;
    color: #FF6B35;
}

/* ===== Columna precio Amazon por marketplace ===== */
.ks-amazon-price-cell {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1a7043;
    white-space: nowrap;
}

/* ===== Filas por marketplace (rowspan) ===== */

/* Fila primera del grupo: borde superior más marcado */
tr.ks-tr-first td {
    border-top: 2px solid #e5e7eb;
    vertical-align: top;
}
/* Filas secundarias: borde top sutil */
tr.ks-tr-mkt td {
    border-top: 1px dashed #e5e7eb;
    vertical-align: middle;
}
/* Celda del producto (con rowspan): centra verticalmente */
.ks-td-producto {
    vertical-align: top !important;
}

/* Marketplace: bandera + dominio en línea */
.ks-td-mkt {
    white-space: nowrap;
}
.ks-mkt-label {
    display: flex;
    align-items: center;
    gap: 5px;
}
.ks-mkt-row-flag {
    font-size: 1rem;
    line-height: 1;
}
.ks-mkt-row-flag--no-profit,
.ks-mkt-flag--no-profit {
    filter: grayscale(1);
    opacity: 0.45;
}
.ks-mkt-row-domain {
    font-size: 0.78rem;
    color: #374151;
    font-weight: 500;
}

/* Celdas de datos por marketplace */
.ks-td-amazon-price,
.ks-td-profit,
.ks-td-roi {
    text-align: right;
    white-space: nowrap;
    font-size: 0.85rem;
}

/* Input ventas editable */
.ks-td-ventas {
    text-align: center;
}
.ks-ventas-input {
    width: 58px;
    padding: 3px 6px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.78rem;
    text-align: center;
    background: #fff;
    color: #111827;
    transition: border-color 0.15s, box-shadow 0.15s;
    -moz-appearance: textfield;
}
.ks-ventas-input::-webkit-outer-spin-button,
.ks-ventas-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ks-ventas-input:focus {
    outline: none;
    border-color: #1a7043;
    box-shadow: 0 0 0 2px rgba(26,112,67,0.15);
}

/* Celda acciones (rowspan) */
.ks-td-acciones {
    vertical-align: top !important;
}

/* Hover: resaltar todas las filas del mismo producto */
tr.ks-tr-first:hover td,
tr.ks-tr-mkt:hover td {
    background: #f0fdf4;
}

/* Panel de precios — modo multi-mercado */
.ks-precio-panel-desc {
    color: #6b7280;
    font-size: 0.88rem;
    margin: 0 0 1rem;
    padding: 0 1.5rem;
}
.ks-mkts-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 1.5rem;
    max-height: 60vh;
    overflow-y: auto;
}
.ks-mkt-precio-group {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    background: #fafafa;
}
.ks-mkt-precio-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    font-size: 0.9rem;
}
.ks-mkt-precio-flag { font-size: 1.2rem; }
.ks-mkt-precio-name { font-weight: 600; color: #111827; }
.ks-mkt-precio-domain { color: #9ca3af; font-size: 0.75rem; }
.ks-mkt-roi-preview {
    margin-left: auto;
    font-size: 0.82rem;
    font-weight: 600;
}
.ks-precio-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}
.ks-precio-label-sm {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.78rem;
    color: #6b7280;
    font-weight: 500;
}
.ks-precio-label-sm .ks-precio-input {
    font-size: 0.85rem;
    padding: 0.35rem 0.5rem;
}

/* Checkboxes de mercado (modo sin mercados configurados) */
.ks-mkt-chk-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82rem;
    background: #fff;
    transition: border-color 0.15s, background 0.15s;
}
.ks-mkt-chk-label:has(input:checked) {
    border-color: #7c3aed;
    background: #f5f3ff;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE — Fixes global horizontal overflow across all pages
   ══════════════════════════════════════════════════════════════════════════ */

/* Evitar scroll horizontal en todo el documento */
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }

/* ── 768px: tablets y móviles medianos ─────────────────────────────────── */
@media (max-width: 768px) {
    /* HEADER: 2 filas — marca+iconos arriba, tabs abajo */
    .header {
        flex-wrap: wrap;
        padding: 0.45rem 0.75rem 0.35rem;
        gap: 0;
        row-gap: 0;
    }
    .header-brand {
        flex: 1;
        font-size: 1.1rem;
    }
    .ks-nav-tabs {
        order: 3;
        width: 100%;
        margin-left: 0;
        margin-top: 0.3rem;
        gap: 0.25rem;
        padding-bottom: 0.35rem;
    }
    .ks-tab {
        font-size: 0.76rem;
        padding: 0.26rem 0.48rem;
    }
    .ks-tab.ks-tab-square {
        font-size: 0.7rem;
        padding: 0.26rem 0.45rem;
    }

    /* MAIN CONTENT */
    .main-content { padding: 0.5rem 0.6rem; }
    .page-rentables .main-content { padding: 0.3rem 0.5rem; }
    .page-lista .main-content { padding: 0.3rem 0.5rem; }
    .content-wrapper h1 { font-size: 1.4rem; }
    .content-wrapper { padding: 0; }

    /* FILTER FIELDS: dejar que se ajusten en 2 columnas */
    .ks-field {
        min-width: 0;
        flex: 1 1 140px;
    }
    .ks-range .ks-input { width: 72px; }
    .ks-lista-actions { flex-wrap: wrap; gap: 0.5rem; }

    /* PANEL DERECHO (comparacion.html) */
    .panel-derecho { min-width: 0; max-width: 100%; }

    /* TABLA FBA/FBM: ya tiene overflow:auto en .ks-table-wrap — bien */

    /* CONTABILIDAD topbar */
    .ks-ct-topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .ks-ct-tabs { flex-wrap: wrap; gap: 0.25rem; }
    .ks-ct-actions { flex-wrap: wrap; gap: 0.35rem; }

    /* CONTABILIDAD tabla historial: .ks-ct-table-wrap ya tiene overflow:auto */
    .ks-ct-table { min-width: 480px; }

    /* CONTABILIDAD form: 1 columna */
    .ks-ct-form-grid {
        grid-template-columns: 1fr !important;
    }
    .ks-ct-field-span,
    .ks-ct-field-col2 {
        grid-column: span 1 !important;
    }

    /* CONTABILIDAD KPIs: 2 columnas */
    .ks-ct-kpis { grid-template-columns: repeat(2, 1fr); }

    /* CONTABILIDAD cards resumen: 1 columna */
    .ks-ct-cards { grid-template-columns: 1fr; }

    /* INVOICE PANEL: pantalla completa en móvil */
    .ks-ct-invoice-panel {
        width: 100vw;
        left: 0;
        right: 0;
    }

    /* FOOTER compact */
    .footer {
        flex-direction: column;
        gap: 0.15rem;
        text-align: center;
        padding: 0.4rem;
        font-size: 0.72rem;
    }

    /* SETTINGS container */
    .settings-container {
        padding: 0.75rem;
        border-radius: 0;
        box-shadow: none;
    }

    /* MONITOR / ADMIN grids */
    .ks-monitor-device-actions { flex-wrap: wrap; }
}

/* ── 480px: móviles pequeños ───────────────────────────────────────────── */
@media (max-width: 480px) {
    .header-brand { font-size: 1rem; }

    .ks-tab {
        font-size: 0.7rem;
        padding: 0.22rem 0.38rem;
    }

    /* Filtros: 1 campo por fila en pantallas muy estrechas */
    .ks-field { flex: 1 1 100%; }

    /* CONTABILIDAD KPIs: 1 columna */
    .ks-ct-kpis { grid-template-columns: 1fr; }

    /* CONTABILIDAD sidebar: padding mínimo */
    .ks-ct-sidebar { padding: 0.65rem; }
    .ks-ct-main { padding: 0; }

    /* Botones de formulario: apilados */
    .ks-ct-form-actions { flex-direction: column; }
    .ks-ct-form-actions .ks-ct-btn { width: 100%; justify-content: center; }

    /* Tabpanel overflow */
    .ks-ct-tabpanel { padding: 0; }

    /* COMPARACION layout */
    .comparacion-grid { grid-template-columns: 1fr !important; }
    .producto-layout { flex-direction: column; }
}

/* ── Invoice Panel ──────────────────────────────────────────────────────── */
.ks-ct-invoice-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 480px;
    height: 100vh;
    background: #ffffff;
    box-shadow: -4px 0 24px rgba(0,0,0,0.12);
    z-index: 200;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ks-ct-invoice-panel[hidden] {
    display: none !important;
}

.ks-ct-invoice-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    background: #fafafa;
    flex-shrink: 0;
}

.ks-ct-invoice-panel-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e1e2e;
}

.ks-ct-invoice-panel-actions {
    display: flex;
    gap: 0.5rem;
}

.ks-ct-invoice-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
}

/* Invoice content styles */
.ks-ct-inv-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    gap: 1rem;
}

.ks-ct-inv-number {
    font-size: 1.1rem;
    font-weight: 700;
    color: #7c3aed;
}

.ks-ct-inv-date {
    font-size: 0.82rem;
    color: #6b7280;
    margin-top: 0.2rem;
}

.ks-ct-inv-seller {
    text-align: right;
    font-size: 0.8rem;
    color: #374151;
}

.ks-ct-inv-seller-name { font-weight: 700; }
.ks-ct-inv-seller-nif, .ks-ct-inv-seller-addr { color: #6b7280; }

.ks-ct-inv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    margin-bottom: 1rem;
}

.ks-ct-inv-table th {
    background: #f3f4f6;
    text-align: left;
    padding: 6px 8px;
    border-bottom: 2px solid #e5e7eb;
    font-size: 0.75rem;
    color: #6b7280;
    text-transform: uppercase;
}

.ks-ct-inv-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #e5e7eb;
}

.ks-ct-inv-taxes {
    background: #f9fafb;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.83rem;
}

.ks-ct-inv-tax-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    color: #374151;
}

.ks-ct-inv-exento {
    font-style: italic;
    color: #6b7280;
    font-size: 0.78rem;
}

.ks-ct-inv-total {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    font-weight: 700;
    color: #7c3aed;
    padding: 0.75rem 1rem;
    background: #ede9fe;
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

.ks-ct-inv-meta {
    font-size: 0.8rem;
    color: #6b7280;
}

.ks-ct-inv-meta-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    border-bottom: 1px dashed #e5e7eb;
}

/* ── Billing Section Title (account_settings.js) ──────────────────────── */
.ks-billing-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: #7c3aed;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0.5rem 0 0.25rem;
}

/* ── Sale form extra sections ────────────────────────────────────────── */
.ks-ct-form-section-title {
    grid-column: 1 / -1;
    font-size: 0.7rem;
    font-weight: 700;
    color: #7c3aed;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e2e8f0;
}

/* ═══════════════════════════════════════════════════════════
   NOTAS - Cuaderno de notas por usuario
   ═══════════════════════════════════════════════════════════ */

/* Overlay principal del modal */
.nm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 3000;
    align-items: center;
    justify-content: center;
    animation: nm-fade-in 0.18s ease;
}

@keyframes nm-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#notas-modal {
    display: none;
}

/* Panel principal */
.nm-panel {
    background: #fff;
    border-radius: 14px;
    width: min(96vw, 900px);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.28);
}

/* Cabecera */
.nm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.4rem;
    background: #1e8449;
    color: #fff;
    flex-shrink: 0;
}

.nm-title {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.nm-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Botones del modal */
.nm-btn {
    padding: 0.4rem 0.9rem;
    border: none;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.12s;
}

.nm-btn-new {
    background: #1e8449;
    color: white;
}
.nm-btn-new:hover { background: #219a52; }

.nm-btn-close {
    background: rgba(255,255,255,0.15);
    color: white;
    font-size: 1.2rem;
    padding: 0.2rem 0.6rem;
}
.nm-btn-close:hover { background: rgba(255,255,255,0.25); }

.nm-btn-save {
    background: #16a34a;
    color: white;
}
.nm-btn-save:hover { background: #15803d; }

.nm-btn-back {
    background: rgba(255,255,255,0.15);
    color: white;
    font-size: 0.8rem;
}
.nm-btn-back:hover { background: rgba(255,255,255,0.25); }

.nm-btn-danger {
    background: #dc2626;
    color: white;
}
.nm-btn-danger:hover { background: #b91c1c; }

/* Cuerpo (tablero) */
.nm-body {
    flex: 1;
    overflow-y: auto;
    background: #ffffff;
    background-image: repeating-linear-gradient(
        0deg, transparent, transparent 30px,
        rgba(0,0,0,0.04) 30px, rgba(0,0,0,0.04) 31px
    ), repeating-linear-gradient(
        90deg, transparent, transparent 30px,
        rgba(0,0,0,0.04) 30px, rgba(0,0,0,0.04) 31px
    );
    padding: 1.4rem;
}

.nm-loading {
    text-align: center;
    color: #fff;
    padding: 2rem;
    font-weight: 600;
}

.nm-vacio {
    text-align: center;
    color: rgba(255,255,255,0.9);
    padding: 3rem;
    font-size: 1rem;
    font-weight: 500;
}

/* Tablero de tarjetas */
.nm-tablero {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.2rem;
}

/* Tarjeta de nota */
.nm-card {
    background: #fefce8;
    border-radius: 4px;
    padding: 0;
    cursor: pointer;
    position: relative;
    box-shadow: 2px 3px 10px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06);
    transition: transform 0.15s, box-shadow 0.15s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 180px;
}
.nm-card:hover {
    transform: translateY(-4px) rotate(-0.5deg);
    box-shadow: 4px 8px 20px rgba(0,0,0,0.28);
}

/* Barra superior de la tarjeta (como cinta de papel) */
.nm-card::before {
    content: '';
    display: block;
    height: 6px;
    background: linear-gradient(90deg, #27ae60, #1e8449);
}

.nm-card-canvas {
    width: 100%;
    height: 100px;
    object-fit: cover;
    display: block;
    border-bottom: 1px solid #e5e4c0;
}

.nm-card-titulo {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1c1917;
    padding: 0.4rem 0.6rem 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nm-card-texto {
    font-size: 0.75rem;
    color: #4b5563;
    padding: 0 0.6rem 0.3rem;
    flex: 1;
    line-height: 1.4;
    overflow: hidden;
    max-height: 2.8em;
}

.nm-card-fecha {
    font-size: 0.68rem;
    color: #9ca3af;
    padding: 0 0.6rem 0.5rem;
}

.nm-card-del {
    position: absolute;
    top: 8px;
    right: 6px;
    background: rgba(220, 38, 38, 0.85);
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.nm-card:hover .nm-card-del { display: flex; }

/* ── Editor de nota ──────────────────────────────────── */
.nm-editor-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 3100;
    align-items: center;
    justify-content: center;
    animation: nm-fade-in 0.18s ease;
}

.nm-editor {
    background: #fff;
    border-radius: 12px;
    width: min(98vw, 1000px);
    height: min(90vh, 700px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(0,0,0,0.32);
}

/* Barra superior del editor */
.nm-editor-top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    background: #1e8449;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.nm-titulo-input {
    flex: 1;
    min-width: 150px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.35rem 0.7rem;
}
.nm-titulo-input::placeholder { color: rgba(255,255,255,0.45); }
.nm-titulo-input:focus { outline: none; border-color: #1e8449; }

/* Toolbar de herramientas */
.nm-editor-tools {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.nm-tool {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.15);
    color: white;
    border-radius: 6px;
    padding: 0.3rem 0.45rem;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nm-tool:hover { background: rgba(255,255,255,0.22); }
.nm-tool.active {
    background: #1e8449;
    border-color: #1e8449;
}
.nm-tool-danger:hover { background: rgba(220,38,38,0.7) !important; }

.nm-color-input {
    width: 32px;
    height: 28px;
    padding: 1px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
}

.nm-grosor-sel {
    background: rgba(255,255,255,0.12);
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    padding: 0.25rem 0.4rem;
    font-size: 0.78rem;
    cursor: pointer;
}
.nm-grosor-sel option { color: #1c1917; background: white; }

.nm-editor-right {
    display: flex;
    gap: 0.4rem;
    margin-left: auto;
}

/* Area del canvas + textarea */
.nm-editor-area {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #fffef0;
}

#nm-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    touch-action: none;
}

.nm-textarea {
    position: absolute;
    inset: 0;
    background: transparent;
    border: none;
    resize: none;
    font-size: 1rem;
    line-height: 1.7;
    padding: 1rem 1.2rem;
    color: #1c1917;
    font-family: 'Segoe UI', sans-serif;
    z-index: 10;
    pointer-events: none;
}
.nm-textarea:focus { outline: none; }
.nm-textarea::placeholder { color: #9ca3af; }

/* ============================================================
   MOBILE RESPONSIVE — PANEL (2026-04-25)
   ============================================================ */

/* ── Header: tabs en segunda fila scrollable ── */
@media (max-width: 640px) {
    .header {
        flex-wrap: wrap;
        padding: 0.3rem 0.65rem;
        gap: 0.25rem;
    }
    .header-brand {
        font-size: 1.05rem;
    }
    /* Tabs bajan a segunda fila, desplazables */
    .ks-nav-tabs {
        order: 10;
        width: 100%;
        flex: none;
        margin-left: 0;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.15rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .ks-nav-tabs::-webkit-scrollbar { display: none; }
    .ks-tab {
        white-space: nowrap;
        font-size: 0.82rem;
        padding: 0.28rem 0.5rem;
    }
}

/* ── Buscador (page-rentables) ── */
@media (max-width: 768px) {
    .page-rentables .main-content {
        padding: 0.35rem 0.5rem;
    }
    .page-rentables .producto-card {
        padding: 0.5rem;
    }
    /* Proveedor y Amazon se apilan verticalmente */
    .comparacion-grid {
        flex-direction: column;
    }
    /* Imagen más compacta */
    .comparacion-imagen {
        width: 120px;
        height: 120px;
    }
    /* Panel derecho sin ancho mínimo fijo */
    .panel-derecho {
        min-width: 0;
    }
    /* Botones en 3 columnas en vez de 2 para aprovechar espacio */
    .botones-contenedor {
        grid-template-columns: repeat(3, 1fr);
    }
    .botones-contenedor .btn-rechazar {
        grid-column: span 3;
    }
    #btn-guardar {
        grid-column: span 3;
    }
}

/* ── Buscador: filtros en móvil pequeño ── */
@media (max-width: 480px) {
    .ks-field {
        min-width: 100%;
    }
    .ks-range .ks-input {
        width: 72px;
    }
}

/* ── Contabilidad: pantallas medianas ── */
@media (max-width: 640px) {
    .ks-ct-pl {
        grid-template-columns: 1fr;
    }
    .ks-ct-topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .ks-ct-actions {
        flex-wrap: wrap;
    }
}

/* ── Contabilidad: pantallas pequeñas ── */
@media (max-width: 480px) {
    .ks-ct-kpis {
        grid-template-columns: 1fr;
    }
    .ks-ct-pr-row {
        grid-template-columns: 40px 1fr;
        gap: 0.5rem;
    }
    .ks-ct-pr-bar { display: none; }
    .ks-ct-pr-v { text-align: left; }
    .ks-ct-form-grid {
        grid-template-columns: 1fr;
    }
    .ks-ct-field-span,
    .ks-ct-field-col2,
    .ks-ct-check {
        grid-column: 1;
    }
}

/* ── Lista FBA/FBM: summary cards en móvil ── */
@media (max-width: 480px) {
    .ks-summary-item {
        min-width: calc(50% - 0.4rem);
        flex: 1;
    }
    .ks-lista-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* ── Dropdown "Mi Cuenta" en móvil ──
   En móvil el header tiene 2 filas y el menú position:absolute queda
   atrapado dentro del contexto de apilamiento del header.
   Con position:fixed salimos de ese contexto y siempre es visible.
   ── */
@media (max-width: 640px) {
    .ks-account-menu {
        position: fixed;
        /* justo debajo del header de 2 filas (~78px) */
        top: 78px;
        right: 0.75rem;
        left: 0.75rem;
        min-width: 0;
        width: auto;
        z-index: 9999;
        border-radius: 12px;
        max-height: calc(100svh - 90px);
        overflow-y: auto;
        /* sombra más pronunciada al estar flotando sobre el contenido */
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
    }
    /* Agrandar un poco los items para facilitar el toque */
    .ks-account-item {
        padding: 0.7rem 0.8rem;
        font-size: 0.95rem;
    }
}

5rem;
    }
}


/* Separacion entre Guardados y Notas */

/* ════════════════════════════════════════════════════════════
   Estimación de ventas — sistema visual completo
   ════════════════════════════════════════════════════════════ */

/* ── Pill badge (buscador + tabla fba/fbm) ─────────────── */
.ks-ventas-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    letter-spacing: 0.01em;
    white-space: nowrap;
    vertical-align: middle;
    margin-top: 4px;
    line-height: 1.5;
    border-left: 3px solid currentColor;
}
.ks-ventas-badge--green  { color:#1a7043; background:rgba(26,112,67,0.09); }
.ks-ventas-badge--orange { color:#92400e; background:rgba(146,64,14,0.09); }
.ks-ventas-badge--red    { color:#991b1b; background:rgba(153,27,27,0.09); }
.ks-ventas-badge--muted  { color:#6b7280; background:#f3f4f6; border-left-color:#d1d5db; font-weight:500; }

/* ── Card completo (página comparacion) ────────────────── */
.ks-vc {
    margin: 0.75rem 0;
    border: 1px solid #e4e4e7;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.ks-vc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    background: linear-gradient(135deg, #f0faf4 0%, #fafafa 100%);
    border-bottom: 1px solid #d1ead9;
}
.ks-vc__title {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #1a7043;
}
.ks-vc__nivel {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.03em;
}
.ks-vc__nivel--green  { background:rgba(26,112,67,0.12); color:#1a7043; }
.ks-vc__nivel--orange { background:rgba(146,64,14,0.10); color:#92400e; }
.ks-vc__nivel--red    { background:rgba(153,27,27,0.09); color:#991b1b; }
.ks-vc__nivel--muted  { background:#f3f4f6; color:#6b7280; }

.ks-vc__body { padding: 10px 12px 8px; }

.ks-vc__num {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}
.ks-vc__num span { font-size: 14px; font-weight: 500; color: #71717a; margin-left: 4px; }

.ks-vc__range {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.ks-vc__range-track {
    flex: 1;
    height: 4px;
    border-radius: 3px;
    background: #e5e7eb;
    position: relative;
    overflow: visible;
}
.ks-vc__range-fill {
    position: absolute;
    top: 0; bottom: 0;
    border-radius: 3px;
    background: currentColor;
    opacity: 0.2;
}
.ks-vc__range-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1.5px currentColor;
}
.ks-vc__range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #9ca3af;
    margin-top: 3px;
}
.ks-vc__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
    align-items: center;
}
.ks-vc__conf {
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.02em;
}
.ks-vc__conf--green  { background:rgba(26,112,67,0.10); color:#1a7043; }
.ks-vc__conf--orange { background:rgba(146,64,14,0.09); color:#92400e; }
.ks-vc__conf--red    { background:rgba(153,27,27,0.08); color:#991b1b; }
.ks-vc__bsr-tag {
    font-size: 10.5px;
    color: #6b7280;
    background: #f3f4f6;
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid #e5e7eb;
}
.ks-vc__progress {
    margin-top: 6px;
    font-size: 10.5px;
    color: #a1a1aa;
}
.ks-vc__progress-bar {
    height: 3px;
    border-radius: 2px;
    background: #f0f0f0;
    margin-top: 3px;
    overflow: hidden;
}
.ks-vc__progress-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--primary-color, #1a7043);
    transition: width 0.4s;
}
.ks-vc__override {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
}
.ks-vc__override label {
    font-size: 11px;
    color: #71717a;
    white-space: nowrap;
}
.ks-vc__override-input {
    width: 100px !important;
    font-size: 12px !important;
    padding: 3px 7px !important;
}
.ks-vc__override-status {
    font-size: 10px;
    color: #1e7e34;
}
.ks-vc__empty {
    padding: 12px;
    text-align: center;
    color: #a1a1aa;
    font-size: 12px;
}
.ks-vc__empty strong { color: #52525b; }

/* Rango prominente — nueva presentación de ventas como "Entre X y Y" */
.ks-vc__rango-principal {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 2px;
}
.ks-vc__rango-principal strong { font-size: 22px; }
.ks-vc__rango-unidad { font-size: 12px; font-weight: 500; color: #71717a; margin-left: 3px; }

.ks-vc__num-secundario {
    font-size: 12px;
    font-weight: 500;
    color: #71717a;
    margin-bottom: 6px;
}
.ks-vc__num-secundario span { font-size: 11px; color: #9ca3af; margin-left: 3px; }

/* Chip de confianza visual (reemplaza al texto plano) */
.ks-vc__conf-chip {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 12px;
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ks-vc__conf-chip--green  { background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
.ks-vc__conf-chip--orange { background:#fff7ed; color:#92400e; border:1px solid #fed7aa; }
.ks-vc__conf-chip--red    { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

/* Tooltip/texto pequeño con la fuente de la estimación */
.ks-vc__fuente {
    display: block;
    font-size: 10px;
    color: #9ca3af;
    margin-top: 5px;
    cursor: help;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Aviso destacado cuando la confianza es baja (nivel 5) */
.ks-vc__aviso-baja {
    margin-top: 6px;
    padding: 5px 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 5px;
    font-size: 10.5px;
    color: #991b1b;
    font-weight: 600;
}

/* Indicador de calibración personal activa */
.ks-vc__calib-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

/* ── Menú tres puntitos (⋮) en tablas FBA/FBM ── */
.ks-more-menu-wrap {
    position: relative;
    display: inline-block;
}
.ks-more-btn {
    background: none;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    color: #6b7280;
    transition: background 0.12s;
}
.ks-more-btn:hover {
    background: #f3f4f6;
    color: #374151;
}
.ks-more-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.13);
    z-index: 200;
    min-width: 150px;
    overflow: hidden;
}
.ks-more-dropdown.open {
    display: block;
}
.ks-more-dropdown-item {
    display: block;
    width: 100%;
    padding: 0.55rem 1rem;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.82rem;
    color: #1f2937;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.1s;
    text-decoration: none;
}
.ks-more-dropdown-item:hover {
    background: #f9fafb;
    color: #111827;
}
.ks-more-dropdown-item.item-danger {
    color: #dc2626;
}
.ks-more-dropdown-item.item-danger:hover {
    background: #fef2f2;
}
.ks-more-dropdown-sep {
    border: none;
    border-top: 1px solid #f0f0f0;
    margin: 0.2rem 0;
}

/* ── Columna Vigilancia en tabla ── */
.ks-table td.ks-autorevisar-cell {
    text-align: center;
    vertical-align: middle !important;
    white-space: normal;
    width: 72px;
    min-width: 72px;
    padding: 0.5rem 0.3rem !important;
}
.ks-table td.ks-autorevisar-cell label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    font-size: 0.67rem;
    color: #6b7280;
    line-height: 1.3;
    white-space: normal;
    margin: 0 auto;
}
.ks-table td.ks-autorevisar-cell input[type=checkbox] {
    width: 16px;
    height: 16px;
    accent-color: #16a34a;
    cursor: pointer;
    margin: 0;
}

/* ── Ventas por país en tabla ── */
.ks-vm-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ks-vm-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    line-height: 1.4;
}
.ks-vm-flag {
    font-size: 0.95rem;
    line-height: 1;
    flex-shrink: 0;
}
.ks-vm-num {
    font-weight: 600;
    color: #1f2937;
    font-variant-numeric: tabular-nums;
}
.ks-ventas-mini-empty {
    color: #cbd5e1;
    font-size: 0.85rem;
}

/* ═══════════════════════════════════════════════════════
   Keepa — bloque de historial de precios
   ═══════════════════════════════════════════════════════ */
.ks-keepa {
    background: #fff;
    border: 1px solid #e4e8ef;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    flex: 0 0 100%;
    margin-bottom: 10px;
}

.ks-keepa__head {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px 6px;
    border-bottom: 1px solid #f0f0f5;
}

.ks-keepa__title {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #94a3b8;
    flex: 1;
}

.ks-keepa__badge {
    font-size: 9px;
    font-weight: 700;
    font-style: italic;
    padding: 1px 6px;
    border-radius: 0;
    background: none;
    color: #2563eb;
    border: none;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ks-keepa__select {
    font-size: 10px;
    padding: 1px 5px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    color: #64748b;
    background: #f8fafc;
    cursor: pointer;
}

.ks-keepa__body {
    padding: 8px 10px 6px;
    min-height: 60px;
}

.ks-keepa__placeholder {
    padding: 14px 0;
    text-align: center;
    color: #a1a1aa;
    font-size: 12px;
}
.ks-keepa__placeholder strong { color: #52525b; }

.ks-keepa__img-wrap {
    position: relative;
    cursor: pointer;
    border-radius: 5px;
    overflow: hidden;
    line-height: 0;
    transition: opacity 0.15s;
}
.ks-keepa__img-wrap:hover { opacity: 0.92; }

.ks-keepa__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
    /* Indica que es clicable */
    cursor: zoom-in;
}

/* Botón "↗ ver en Keepa" sobre la imagen */
.ks-keepa__open-link {
    position: absolute;
    top: 5px;
    right: 6px;
    background: rgba(255,255,255,0.88);
    color: #374151;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-decoration: none;
    z-index: 2;
    line-height: 1.5;
    border: 1px solid rgba(0,0,0,0.08);
    transition: background 0.12s;
}
.ks-keepa__open-link:hover { background: rgba(255,255,255,1); }

.ks-keepa__no-data {
    padding: 14px;
    text-align: center;
    color: #a1a1aa;
    font-size: 11px;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════
   Keepa — lightbox overlay (clic para ampliar)
   ═══════════════════════════════════════════════════════ */
.ks-keepa-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ks-keepa-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(3px);
    cursor: pointer;
}

.ks-keepa-lightbox__content {
    position: relative;
    z-index: 1;
    max-width: min(95vw, 1100px);
    width: 100%;
    background: #1a1a2e;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
    animation: ks-lb-in 0.18s ease-out;
}

@keyframes ks-lb-in {
    from { opacity: 0; transform: scale(0.93); }
    to   { opacity: 1; transform: scale(1); }
}

.ks-keepa-lightbox__close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: rgba(255,255,255,0.12);
    border: none;
    color: #fff;
    font-size: 16px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.12s;
}
.ks-keepa-lightbox__close:hover { background: rgba(255,255,255,0.25); }

.ks-keepa-lightbox__link {
    display: block;
    line-height: 0;
}

.ks-keepa-lightbox__img {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
}
.ks-keepa-lightbox__img:hover { opacity: 0.94; }

.ks-keepa-lightbox__caption {
    text-align: center;
    font-size: 10.5px;
    color: rgba(255,255,255,0.45);
    padding: 6px 12px 8px;
    letter-spacing: 0.02em;
}

/* ── Calculadora rápida ──────────────────────────────────────────────────── */
#calc-modal {
    display: none;
}

.calc-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 3100;
    align-items: center;
    justify-content: center;
    animation: nm-fade-in 0.18s ease;
}

.calc-panel {
    background: #fff;
    border-radius: 14px;
    width: min(96vw, 320px);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.28);
    user-select: none;
}

/* Cabecera — mismo estilo que .nm-header */
.calc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.4rem;
    background: #1e8449;
    color: #fff;
    flex-shrink: 0;
}

.calc-title {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* Mismo estilo que .nm-btn-close */
.calc-btn-close {
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.15s;
}
.calc-btn-close:hover { background: rgba(255,255,255,0.25); }

/* Pantalla */
.calc-display-wrap {
    background: #f0fdf4;
    border-bottom: 1px solid #d1fae5;
    padding: 0.6rem 1.2rem 0.5rem;
    text-align: right;
}

.calc-expr {
    font-size: 0.78rem;
    color: #6b7280;
    min-height: 1.1rem;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

.calc-display {
    background: transparent;
    border: none;
    outline: none;
    color: #1a2e1a;
    font-size: 2.2rem;
    font-weight: 600;
    text-align: right;
    width: 100%;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    padding: 0;
}

/* Grid de teclas */
.calc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 62px;
    gap: 1px;
    background: #e5e7eb;
}

.calc-key {
    background: #fff;
    border: none;
    color: #2c3e50;
    font-size: 1.2rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.calc-key:hover { background: #f0fdf4; }
.calc-key:active { background: #d1fae5; }

/* Teclas de función (AC, +/−, %) */
.calc-key-fn {
    background: #f5f5f5;
    color: #374151;
    font-size: 1rem;
    font-weight: 600;
}
.calc-key-fn:hover { background: #e5e7eb; }
.calc-key-fn:active { background: #d1d5db; }

/* Teclas de operador — verde Open Profit */
.calc-key-op {
    background: #1e8449;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 400;
}
.calc-key-op:hover { background: #219a52; }
.calc-key-op:active { background: #166534; }
.calc-key-op-active {
    background: #f0fdf4;
    color: #1e8449;
}

.calc-key-zero {
    grid-column: span 2;
    justify-content: flex-start;
    padding-left: 1.5rem;
}

/* Igual — verde más oscuro */
.calc-key-equal {
    background: #166534;
    color: #fff;
    font-size: 1.35rem;
}
.calc-key-equal:hover { background: #1e8449; }
.calc-key-equal:active { background: #14532d; }

/* ── Hazmat badges ─────────────────────────────────────────────────────────── */
.hz-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    color: #fff;
    white-space: nowrap;
}
.hz-badge--bateria  { background: #DC2626; }
.hz-badge--hazmat   { background: #EA580C; }
.hz-badge--embalaje { background: #D97706; }

.hz-badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
}
.hz-badges-row--tabla {
    margin-top: 3px;
    margin-bottom: 2px;
}

/* Bloque aviso hazmat en el panel de rentabilidad del Buscador */
.hz-aviso-buscador {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 6px;
    padding: 7px 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.hz-aviso-txt {
    font-size: 11px;
    color: #92400e;
    font-weight: 500;
}
.hz-confirm-btns {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Líneas de suplemento naranja en el desglose de rentabilidad */
.detalle-item--hazmat .label { color: #92400e; }
.detalle-item--hazmat .valor { color: #DC2626; font-weight: 700; }

/* Iconos de restricciones hazmat — sección Amazon, abajo a la izquierda */
.hz-icono-amazon-wrap {
    margin-top: 8px;
}
.hz-flags-row-amazon {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.hz-flag-wrap {
    position: relative;
}
.hz-flag-btn {
    background: none;
    border: 1px solid #374151;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s, border-color 0.15s;
}
.hz-flag-btn:hover {
    background: #fff7ed;
    border-color: #fed7aa;
}
.hz-popup {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    background: #1a1a2e;
    border: 1px solid #374151;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    z-index: 200;
    width: 300px;
    color: #e5e7eb;
    font-size: 12px;
    line-height: 1.55;
}
.hz-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px 6px;
    border-bottom: 1px solid #374151;
    font-weight: 700;
    font-size: 12px;
    color: #f9fafb;
}
.hz-popup-close {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 13px;
    padding: 0 2px;
    line-height: 1;
}
.hz-popup-close:hover { color: #f9fafb; }
.hz-popup-badges {
    padding: 8px 12px 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.hz-popup-body {
    padding: 4px 12px 8px;
    color: #d1d5db;
    font-size: 11px;
}
.hz-popup-body strong { color: #fbbf24; }
.hz-popup-body em { color: #86efac; font-style: normal; }
.hz-popup-footer {
    padding: 6px 12px 8px;
    border-top: 1px solid #374151;
    font-size: 10px;
    color: #6b7280;
    font-style: italic;
}