/* Competidores - workspace UI */

#sub-desarrollo-competidores.comp-workspace {
    max-width: 1720px;
    margin: 0 auto;
    padding: 22px 0 44px;
    color: var(--pv-text-primary);
    font-family: var(--pv-font-ui);
}

/* --------------------------------------------------------------------------
   Competidores v2: fases, lista principal y analisis compacto
   -------------------------------------------------------------------------- */

#sub-desarrollo-competidores.comp-workspace {
    --comp-bg: #070b16;
    --comp-panel: rgba(16, 24, 39, 0.86);
    --comp-panel-deep: #080d19;
    --comp-line: rgba(56, 73, 107, 0.42);
    --comp-line-soft: rgba(148, 163, 184, 0.12);
    --comp-text: #edf4ff;
    --comp-muted: #98a7bd;
    --comp-faint: #66748b;
    --comp-cyan: #22d3ee;
    --comp-blue: #3b82f6;
    --comp-green: #22c55e;
    --comp-amber: #f59e0b;
    --comp-red: #fb7185;
    --comp-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    width: min(100%, 1760px);
    margin: 0 auto;
    padding: 10px 20px 34px;
    color: var(--comp-text);
    font-family: var(--comp-font);
    font-size: 13.5px;
    line-height: 1.38;
    letter-spacing: 0;
}

#sub-desarrollo-competidores.comp-workspace *,
#sub-desarrollo-competidores.comp-workspace *::before,
#sub-desarrollo-competidores.comp-workspace *::after {
    letter-spacing: 0;
    box-sizing: border-box;
}

.comp-page-title {
    display: flex;
    align-items: center;
    min-height: 40px;
    margin-bottom: 12px;
}

.comp-page-title h2,
.comp-panel h3,
.comp-platform-head h4,
.comp-chart-card h4 {
    margin: 0;
    color: var(--comp-text);
    font-weight: 650;
    line-height: 1.12;
}

.comp-page-title h2 {
    font-size: 1.36rem;
}

.comp-phase {
    min-width: 0;
}

.comp-panel {
    border: 1px solid var(--comp-line);
    border-radius: 14px;
    background: var(--comp-panel);
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.24);
}

.comp-panel-head,
.comp-directory-head,
.comp-analysis-topbar,
.comp-analysis-head,
.comp-platform-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.comp-section-kicker {
    color: var(--comp-cyan);
    font-size: 0.72rem;
    font-weight: 720;
    text-transform: uppercase;
}

.comp-btn {
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(56, 73, 107, 0.58);
    border-radius: 11px;
    background: rgba(15, 23, 42, 0.78);
    color: var(--comp-text);
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1;
    box-shadow: none;
    white-space: nowrap;
}

.comp-btn:hover {
    border-color: rgba(34, 211, 238, 0.48);
    background: rgba(17, 27, 47, 0.94);
}

.comp-btn--primary,
.comp-btn--soft,
.comp-btn--new {
    border-color: rgba(34, 211, 238, 0.36);
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.38), rgba(59, 130, 246, 0.24));
    color: #d9fbff;
}

.comp-btn--ghost {
    background: rgba(15, 23, 42, 0.62);
}

.comp-btn--new {
    min-height: 32px;
    padding-inline: 14px;
}

.comp-panel--directory {
    padding: 20px;
}

.comp-panel--portfolio {
    margin-bottom: 12px;
    padding: 18px 20px;
}

.comp-portfolio-head {
    align-items: flex-start;
}

.comp-portfolio-summary {
    margin: 5px 0 0;
    color: var(--comp-muted);
    font-size: 0.78rem;
}

.comp-portfolio-toolbar {
    display: grid;
    grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin: 14px 0 12px;
}

.comp-portfolio-select {
    min-height: 42px;
}

.comp-portfolio-list {
    display: grid;
    gap: 8px;
    max-height: 410px;
    overflow: auto;
}

.comp-portfolio-item {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 13px;
    border: 1px solid rgba(56, 73, 107, 0.42);
    border-radius: 12px;
    background: rgba(6, 10, 20, 0.42);
}

.comp-portfolio-item-main {
    min-width: 0;
}

.comp-portfolio-item-main strong {
    display: -webkit-box;
    overflow: hidden;
    color: var(--comp-text);
    font-size: 0.84rem;
    font-weight: 680;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.comp-portfolio-item-main span,
.comp-portfolio-item-meta small {
    display: block;
    margin-top: 4px;
    color: var(--comp-muted);
    font-size: 0.72rem;
}

.comp-portfolio-item-meta {
    flex: 0 0 auto;
    min-width: 118px;
    text-align: right;
}

.comp-portfolio-item-meta b {
    color: var(--comp-cyan);
    font-size: 0.9rem;
}

.comp-portfolio-link {
    display: block;
    margin-top: 5px;
    color: var(--comp-cyan);
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: none;
}

.comp-portfolio-link:hover {
    text-decoration: underline;
}

.comp-cross-toolbar {
    grid-template-columns: minmax(280px, 420px) auto minmax(0, 1fr);
}

.comp-cross-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--comp-muted);
    font-size: 0.76rem;
    font-weight: 650;
    white-space: nowrap;
}

.comp-cross-check input {
    accent-color: var(--comp-cyan);
}

.comp-cross-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 9px;
    max-height: 520px;
    overflow: auto;
}

.comp-cross-card {
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid rgba(56, 73, 107, 0.42);
    border-radius: 12px;
    background: rgba(6, 10, 20, 0.42);
}

.comp-cross-card > strong {
    display: -webkit-box;
    overflow: hidden;
    color: var(--comp-text);
    font-size: 0.84rem;
    font-weight: 680;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.comp-cross-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 9px;
}

.comp-cross-badge {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 3px 8px;
    border: 1px solid rgba(82, 210, 230, 0.38);
    border-radius: 999px;
    color: var(--comp-cyan);
    font-size: 0.69rem;
    font-weight: 750;
}

.comp-cross-badge.is-missing {
    border-color: rgba(148, 163, 184, 0.22);
    color: var(--comp-muted);
    opacity: 0.72;
}

.comp-cross-publications {
    display: grid;
    gap: 5px;
    margin-top: 10px;
}

.comp-cross-publication {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(56, 73, 107, 0.26);
    color: var(--comp-muted);
    font-size: 0.7rem;
}

.comp-cross-publication a {
    overflow: hidden;
    color: var(--comp-cyan);
    font-weight: 700;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comp-cross-publication a:hover {
    text-decoration: underline;
}

.comp-cross-table-shell {
    max-height: 610px;
    overflow: auto;
    border: 1px solid rgba(56, 73, 107, 0.42);
    border-radius: 12px;
    background: rgba(6, 10, 20, 0.24);
}

.comp-cross-table {
    width: 100%;
    min-width: 1080px;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--comp-text);
    font-size: 0.76rem;
}

.comp-cross-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 10px 11px;
    border-bottom: 1px solid rgba(56, 73, 107, 0.6);
    background: #0b1222;
    color: var(--comp-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.comp-cross-table td {
    padding: 10px 11px;
    border-bottom: 1px solid rgba(56, 73, 107, 0.3);
    vertical-align: middle;
}

.comp-cross-main-row {
    cursor: pointer;
    outline: none;
    transition: background 0.15s ease;
}

.comp-cross-main-row:hover,
.comp-cross-main-row:focus-visible,
.comp-cross-main-row.is-expanded {
    background: rgba(31, 91, 112, 0.18);
}

.comp-cross-main-row.is-expanded td {
    border-bottom-color: rgba(82, 210, 230, 0.45);
}

.comp-cross-index {
    width: 42px;
    color: var(--comp-muted);
    text-align: center;
}

.comp-cross-product {
    width: 300px;
    max-width: 300px;
}

.comp-cross-product strong {
    display: -webkit-box;
    overflow: hidden;
    color: var(--comp-text);
    font-size: 0.8rem;
    font-weight: 750;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.comp-cross-product small {
    display: block;
    margin-top: 4px;
    color: var(--comp-muted);
    font-size: 0.68rem;
}

.comp-cross-table .comp-cross-meta {
    min-width: 250px;
    margin-top: 0;
}

.comp-cross-table .comp-cross-badge {
    padding-inline: 6px;
    font-size: 0.63rem;
}

.comp-cross-ingredients {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 190px;
}

.comp-cross-ingredient {
    display: inline-flex;
    align-items: center;
    max-width: 220px;
    padding: 3px 7px;
    overflow: hidden;
    border: 1px solid rgba(82, 210, 230, 0.3);
    border-radius: 999px;
    color: #b7f4fb;
    font-size: 0.64rem;
    font-weight: 680;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comp-cross-ingredient--more {
    color: var(--comp-muted);
    border-color: rgba(148, 163, 184, 0.25);
}

.comp-cross-muted {
    color: var(--comp-muted);
    font-size: 0.7rem;
}

.comp-cross-price {
    color: var(--comp-cyan);
    font-weight: 750;
    white-space: nowrap;
}

.comp-cross-detail-row > td {
    padding: 0;
    background: rgba(3, 8, 18, 0.82);
}

.comp-cross-detail {
    padding: 14px 17px 16px 64px;
    border-bottom: 1px solid rgba(82, 210, 230, 0.35);
    box-shadow: inset 3px 0 0 rgba(82, 210, 230, 0.55);
}

.comp-cross-detail-head,
.comp-cross-detail-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 22px;
}

.comp-cross-detail-head {
    color: var(--comp-cyan);
    font-size: 0.78rem;
}

.comp-cross-detail-head div {
    display: grid;
    gap: 3px;
}

.comp-cross-detail-head span,
.comp-cross-detail-summary {
    color: var(--comp-muted);
    font-size: 0.7rem;
}

.comp-cross-detail-summary {
    justify-content: flex-start;
    margin: 10px 0;
}

.comp-cross-detail-table-wrap {
    overflow-x: auto;
}

.comp-cross-detail-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    font-size: 0.7rem;
}

.comp-cross-detail-table th,
.comp-cross-detail-table td {
    padding: 7px 8px;
    border-top: 1px solid rgba(56, 73, 107, 0.3);
    text-align: left;
    vertical-align: top;
}

.comp-cross-detail-table th {
    color: var(--comp-muted);
    font-size: 0.63rem;
    text-transform: uppercase;
}

.comp-cross-detail-channel {
    color: var(--comp-cyan);
    font-weight: 750;
    white-space: nowrap;
}

.comp-cross-detail-title {
    max-width: 420px;
}

.comp-cross-detail-title a {
    color: var(--comp-text);
    text-decoration: none;
}

.comp-cross-detail-title a:hover {
    color: var(--comp-cyan);
    text-decoration: underline;
}

@media (max-width: 900px) {
    .comp-cross-toolbar {
        grid-template-columns: 1fr;
        justify-items: start;
    }
}

@media (max-width: 700px) {
    .comp-portfolio-toolbar {
        grid-template-columns: 1fr;
    }

    .comp-portfolio-item {
        display: grid;
        gap: 8px;
    }

    .comp-portfolio-item-meta {
        text-align: left;
    }
}

/* --------------------------------------------------------------------------
   Catálogo consolidado de competidores — patrón Consolidado de Ventas
   -------------------------------------------------------------------------- */

.comp-catalog-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 12px;
    padding: 18px 20px;
}

.comp-catalog-selector-copy {
    min-width: 0;
}

.comp-catalog-selector-copy h3 {
    margin-top: 4px;
    font-size: 1.05rem;
}

.comp-catalog-selector-copy p {
    margin: 6px 0 0;
    color: var(--comp-muted);
    font-size: 0.78rem;
}

.comp-catalog-competitor-select {
    flex: 0 1 420px;
    min-width: 300px;
}

.comp-catalog-panel {
    padding: 0;
    overflow: visible;
}

.comp-catalog-toolbar {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--comp-line);
    border-radius: 14px 14px 0 0;
    background: var(--comp-panel-deep);
}

.comp-catalog-toolbar h3 {
    font-size: 1.03rem;
}

.comp-catalog-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.comp-catalog-search {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 280px;
    padding: 0 10px;
    border: 1px solid var(--comp-line);
    border-radius: 8px;
    background: var(--comp-bg);
    color: var(--comp-muted);
}

.comp-catalog-search:focus-within {
    border-color: var(--comp-cyan);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--comp-cyan) 14%, transparent);
}

.comp-catalog-search .material-symbols-outlined {
    font-size: 17px;
}

.comp-catalog-search input {
    width: 100%;
    min-height: 36px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--comp-text);
    font-size: 0.78rem;
}

.comp-catalog-filter-wrap {
    position: relative;
}

.comp-catalog-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--comp-blue) 45%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--comp-blue) 12%, transparent);
    color: color-mix(in srgb, var(--comp-blue) 45%, var(--comp-text));
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.comp-catalog-filter-btn .material-symbols-outlined {
    font-size: 16px;
}

.comp-catalog-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding-inline: 5px;
    border-radius: 999px;
    background: var(--comp-blue);
    color: var(--comp-text);
    font-size: 0.64rem;
}

.comp-catalog-filter-count[hidden],
.comp-catalog-filter-panel[hidden] {
    display: none;
}

.comp-catalog-filter-panel {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 20;
    width: min(360px, calc(100vw - 48px));
    padding: 15px;
    border: 1px solid color-mix(in srgb, var(--comp-blue) 42%, transparent);
    border-radius: 10px;
    background: var(--comp-panel-deep);
    box-shadow: 0 16px 42px color-mix(in srgb, var(--comp-bg) 75%, transparent);
}

.comp-catalog-filter-section > strong,
.comp-catalog-category-filter > span {
    display: block;
    margin-bottom: 8px;
    color: var(--comp-faint);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.comp-catalog-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.comp-catalog-channel {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.76rem;
    font-weight: 650;
    cursor: pointer;
}

.comp-catalog-channel--amazon {
    color: var(--comp-amber);
}

.comp-catalog-channel--amazon input {
    accent-color: var(--comp-amber);
}

.comp-catalog-channel--ml {
    color: var(--comp-blue);
}

.comp-catalog-channel--ml input {
    accent-color: var(--comp-blue);
}

.comp-catalog-channel--web {
    color: var(--comp-green);
}

.comp-catalog-channel--web input {
    accent-color: var(--comp-green);
}

.comp-catalog-filter-divider {
    height: 1px;
    margin: 14px 0;
    background: var(--comp-line);
}

.comp-catalog-category-filter select {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--comp-line);
    border-radius: 8px;
    background: var(--comp-bg);
    color: var(--comp-text);
    font-size: 0.76rem;
}

.comp-catalog-clear-btn {
    width: 100%;
    margin-top: 12px;
    padding: 8px 10px;
    border: 1px solid var(--comp-line);
    border-radius: 8px;
    background: transparent;
    color: var(--comp-muted);
    font-size: 0.73rem;
    font-weight: 700;
    cursor: pointer;
}

.comp-catalog-clear-btn:hover {
    border-color: var(--comp-cyan);
    color: var(--comp-text);
}

.comp-catalog-result-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--comp-line-soft);
    color: var(--comp-faint);
    font-size: 0.7rem;
}

.comp-catalog-result-meta .comp-list-meta {
    color: var(--comp-muted);
    font-weight: 700;
}

.comp-cross-table-shell {
    max-height: 72vh;
    border: 0;
    border-radius: 0 0 14px 14px;
}

.comp-cross-table {
    min-width: 1500px;
    font-size: 0.76rem;
}

.comp-cross-table .comp-cross-meta {
    min-width: 112px;
    margin-top: 0;
}

.comp-cross-badge--amazon {
    border-color: color-mix(in srgb, var(--comp-amber) 38%, transparent);
    background: color-mix(in srgb, var(--comp-amber) 12%, transparent);
    color: var(--comp-amber);
}

.comp-cross-badge--mercadolibre {
    border-color: color-mix(in srgb, var(--comp-blue) 38%, transparent);
    background: color-mix(in srgb, var(--comp-blue) 12%, transparent);
    color: color-mix(in srgb, var(--comp-blue) 58%, var(--comp-text));
}

.comp-cross-badge--sitio_web {
    border-color: color-mix(in srgb, var(--comp-green) 38%, transparent);
    background: color-mix(in srgb, var(--comp-green) 12%, transparent);
    color: var(--comp-green);
}

.comp-cross-product {
    width: 330px;
    max-width: 330px;
}

.comp-catalog-category {
    display: inline-flex;
    padding: 3px 7px;
    border: 1px solid var(--comp-line);
    border-radius: 999px;
    color: var(--comp-muted);
    font-size: 0.66rem;
    white-space: nowrap;
}

.comp-cross-ingredient {
    gap: 4px;
}

.comp-cross-ingredient small {
    color: var(--comp-cyan);
    font-size: 0.58rem;
    font-weight: 750;
}

.comp-catalog-offer-cell {
    white-space: nowrap;
}

.comp-catalog-offer-price {
    color: var(--comp-green);
    font-weight: 800;
}

.comp-catalog-offer-cell small,
.comp-catalog-discount {
    display: block;
    margin-top: 2px;
    color: var(--comp-green);
    font-size: 0.61rem;
    font-weight: 750;
}

.comp-catalog-sales {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 120px;
}

.comp-catalog-sales span {
    padding: 3px 6px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--comp-blue) 12%, transparent);
    color: color-mix(in srgb, var(--comp-blue) 48%, var(--comp-text));
    font-size: 0.63rem;
    font-weight: 750;
}

.comp-cross-detail-row > td {
    background: var(--comp-panel-deep);
}

.comp-catalog-detail {
    padding: 16px 18px 18px 58px;
    border-bottom: 1px solid color-mix(in srgb, var(--comp-cyan) 34%, transparent);
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--comp-cyan) 56%, transparent);
}

.comp-catalog-detail-overview {
    display: grid;
    grid-template-columns: 84px minmax(300px, 1fr) minmax(420px, 0.95fr);
    gap: 16px;
    align-items: center;
}

.comp-catalog-detail-image {
    width: 84px;
    height: 84px;
    object-fit: contain;
    border: 1px solid var(--comp-line);
    border-radius: 10px;
    background: var(--comp-text);
}

.comp-catalog-detail-image--empty {
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--comp-bg) 75%, transparent);
    color: var(--comp-faint);
}

.comp-catalog-detail-image--empty .material-symbols-outlined {
    font-size: 30px;
}

.comp-catalog-detail-identity h4 {
    margin: 4px 0 5px;
    color: var(--comp-text);
    font-size: 0.98rem;
}

.comp-catalog-detail-identity p {
    margin: 0;
    color: var(--comp-muted);
    font-size: 0.72rem;
}

.comp-catalog-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 9px;
}

.comp-catalog-detail-tags span {
    padding: 3px 7px;
    border: 1px solid var(--comp-line);
    border-radius: 6px;
    color: var(--comp-muted);
    font-size: 0.65rem;
}

.comp-catalog-detail-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(92px, 1fr));
    gap: 7px;
}

.comp-catalog-detail-kpis div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--comp-line-soft);
    border-radius: 8px;
    background: color-mix(in srgb, var(--comp-bg) 68%, transparent);
}

.comp-catalog-detail-kpis span,
.comp-catalog-detail-kpis b {
    display: block;
}

.comp-catalog-detail-kpis span {
    color: var(--comp-faint);
    font-size: 0.61rem;
    font-weight: 700;
    text-transform: uppercase;
}

.comp-catalog-detail-kpis b {
    margin-top: 4px;
    overflow: hidden;
    color: var(--comp-text);
    font-size: 0.73rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comp-catalog-detail-ingredients {
    display: grid;
    gap: 7px;
    margin: 14px 0 12px;
}

.comp-catalog-detail-ingredients > strong {
    color: var(--comp-muted);
    font-size: 0.68rem;
    text-transform: uppercase;
}

.comp-catalog-detail-ingredients .comp-cross-ingredients {
    min-width: 0;
}

.comp-cross-detail-table {
    min-width: 1250px;
}

.comp-cross-detail-table th {
    position: static;
    background: transparent;
}

.comp-cross-detail-channel--amazon {
    color: var(--comp-amber);
}

.comp-cross-detail-channel--mercadolibre {
    color: color-mix(in srgb, var(--comp-blue) 58%, var(--comp-text));
}

.comp-cross-detail-channel--sitio_web {
    color: var(--comp-green);
}

.comp-catalog-seller {
    display: block;
    max-width: 135px;
    margin-top: 3px;
    overflow: hidden;
    color: var(--comp-faint);
    font-size: 0.6rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comp-catalog-money-cell {
    color: var(--comp-cyan);
    font-weight: 750;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .comp-catalog-toolbar,
    .comp-catalog-selector {
        align-items: stretch;
        flex-direction: column;
    }

    .comp-catalog-competitor-select {
        flex-basis: auto;
        width: 100%;
        min-width: 0;
    }

    .comp-catalog-detail-overview {
        grid-template-columns: 84px 1fr;
    }

    .comp-catalog-detail-kpis {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .comp-catalog-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .comp-catalog-search {
        min-width: 0;
    }

    .comp-catalog-filter-btn {
        width: 100%;
        justify-content: center;
    }

    .comp-catalog-filter-panel {
        right: auto;
        left: 0;
    }

    .comp-catalog-result-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .comp-catalog-detail {
        padding-left: 16px;
    }

    .comp-catalog-detail-overview {
        grid-template-columns: 1fr;
    }

    .comp-catalog-detail-kpis {
        grid-template-columns: repeat(2, 1fr);
    }
}

.comp-directory-head {
    margin-bottom: 14px;
}

.comp-directory-head h3 {
    font-size: 1.06rem;
}

.comp-directory-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.comp-directory-search,
.comp-directory-select {
    display: flex;
    align-items: center;
    min-height: 52px;
    border: 1px solid rgba(71, 85, 105, 0.55);
    border-radius: 13px;
    background: rgba(8, 13, 25, 0.82);
    color: var(--comp-muted);
}

.comp-directory-search {
    gap: 10px;
    padding: 0 14px;
}

.comp-directory-search span {
    color: #8fb4ff;
    font-weight: 760;
}

.comp-directory-search input,
.comp-directory-select select {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--comp-text);
    font: inherit;
}

.comp-directory-search input::placeholder {
    color: #71809a;
}

.comp-directory-select {
    gap: 8px;
    padding: 0 12px;
    border-color: rgba(34, 211, 238, 0.42);
}

.comp-directory-select span {
    color: var(--comp-muted);
    font-size: 0.74rem;
    font-weight: 700;
}

.comp-directory-select select {
    min-width: 0;
    color: #f8fbff;
    cursor: pointer;
}

.comp-directory-select option {
    background: #0a1020;
    color: #e5edf8;
}

.comp-list-meta {
    min-height: 18px;
    margin: 0 0 4px;
    color: var(--comp-muted);
    font-size: 0.78rem;
    font-weight: 650;
}

.comp-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
    color: var(--comp-cyan);
}

.comp-filter-chip button {
    border: 0;
    background: transparent;
    color: inherit;
    font-weight: 700;
    cursor: pointer;
}

.comp-benchmark-table-shell {
    max-height: min(64vh, 680px);
    min-height: 420px;
    overflow: auto;
    border: 1px solid rgba(56, 73, 107, 0.32);
    border-radius: 13px;
    background: rgba(7, 11, 22, 0.42);
}

.comp-benchmark-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    color: #dbe7f6;
}

.comp-benchmark-table th,
.comp-benchmark-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--comp-line-soft);
    text-align: left;
    vertical-align: middle;
}

.comp-benchmark-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #080d19;
    color: #aebbd0;
    font-size: 0.72rem;
    font-weight: 760;
    text-transform: uppercase;
}

.comp-benchmark-row {
    cursor: pointer;
    transition: background 0.14s ease;
}

.comp-benchmark-row:hover,
.comp-benchmark-row.is-active {
    background: rgba(12, 48, 67, 0.42);
}

.comp-benchmark-sku {
    width: 130px;
    color: #67e8f9;
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    font-weight: 760;
}

.comp-benchmark-product strong,
.comp-benchmark-product span {
    display: block;
    max-width: 620px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comp-benchmark-product strong {
    color: #f4f7fb;
    font-weight: 700;
}

.comp-benchmark-product span {
    margin-top: 4px;
    color: #93a8c6;
    font-size: 0.8rem;
    font-weight: 500;
}

.comp-benchmark-channels {
    min-width: 150px;
}

.comp-benchmark-channels .comp-chip,
.comp-chip--channel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    margin: 2px 5px 2px 0;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 720;
}

.comp-benchmark-count,
.comp-benchmark-date {
    white-space: nowrap;
    font-weight: 680;
}

.comp-benchmark-actions {
    width: 88px;
    text-align: right;
    white-space: nowrap;
}

.comp-row-open,
.comp-delete-btn,
.comp-matrix-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(56, 73, 107, 0.5);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.64);
    color: #b9c8dd;
}

.comp-delete-btn {
    opacity: 0.56;
}

.comp-row-open:hover,
.comp-delete-btn:hover,
.comp-matrix-icon-btn:hover {
    border-color: rgba(34, 211, 238, 0.48);
    color: #e7faff;
}

.comp-phase--create {
    display: grid;
    gap: 16px;
}

.comp-panel--builder {
    max-width: 980px;
    padding: 20px;
}

.comp-search-form {
    display: grid;
    grid-template-columns: minmax(240px, 1.35fr) minmax(240px, 1fr) minmax(180px, 0.55fr);
    gap: 14px;
    align-items: end;
}

.comp-action-grid,
.comp-status {
    grid-column: 1 / -1;
}

.comp-field {
    color: var(--comp-muted);
    font-size: 0.8rem;
    font-weight: 650;
}

.comp-input-wrap,
.comp-field input,
.comp-field select {
    min-height: 48px;
    border-radius: 12px;
    background: rgba(8, 13, 25, 0.84);
}

.comp-input-wrap {
    border: 1px solid rgba(71, 85, 105, 0.55);
}

.comp-field input,
.comp-field select {
    border: 1px solid rgba(71, 85, 105, 0.55);
    color: var(--comp-text);
}

.comp-field input:focus,
.comp-field select:focus,
.comp-input-wrap:focus-within {
    border-color: rgba(34, 211, 238, 0.58);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.1);
}

.comp-analysis-topbar {
    margin-bottom: 10px;
}

.comp-analysis-back {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #a8bdd8;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 680;
    cursor: pointer;
}

.comp-analysis-back:hover {
    color: #e7faff;
}

.comp-panel--cuadro {
    padding: 18px;
    overflow: visible;
}

.comp-analysis-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 44px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(56, 73, 107, 0.35);
    padding-bottom: 12px;
}

.comp-channel-tabs,
.comp-view-tabs {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    max-width: 100%;
    padding: 5px;
    border: 1px solid rgba(56, 73, 107, 0.45);
    border-radius: 13px;
    background: rgba(8, 13, 25, 0.78);
}

.comp-channel-tabs {
    justify-self: start;
}

.comp-view-tabs {
    justify-self: center;
}

.comp-channel-tab,
.comp-view-tab {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #98a7bd;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 720;
    cursor: pointer;
}

.comp-channel-tab.is-active,
.comp-view-tab.is-active {
    border-color: rgba(34, 211, 238, 0.58);
    background: rgba(8, 145, 178, 0.22);
    color: #d8fbff;
}

.comp-view-tab:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.comp-cuadro-title {
    margin: 4px 0 18px;
    color: #f1f5f9;
    font-size: 1.12rem;
    font-weight: 740;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.comp-cuadro-title:empty {
    display: none;
}

.comp-cuadro-keyword {
    min-height: 0;
    margin: 0;
    color: transparent;
    font-size: 0;
}

.comp-analysis-view {
    display: none;
}

.comp-analysis-view.is-active {
    display: block;
}

.comp-table-shell {
    height: clamp(620px, 72vh, 860px);
    min-height: 620px;
    max-height: none;
    overflow: auto;
    border: 1px solid rgba(34, 211, 238, 0.28);
    border-radius: 13px;
    background: rgba(7, 11, 22, 0.64);
    /* Solo horizontal: al tocar tope/fondo vertical el scroll debe pasar a la página */
    overscroll-behavior-x: contain;
    scrollbar-color: rgba(34, 211, 238, 0.58) rgba(8, 13, 25, 0.9);
    scrollbar-width: thin;
}

.comp-table-shell::-webkit-scrollbar,
.comp-benchmark-table-shell::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.comp-table-shell::-webkit-scrollbar-track,
.comp-benchmark-table-shell::-webkit-scrollbar-track {
    background: rgba(8, 13, 25, 0.92);
    border-radius: 999px;
}

.comp-table-shell::-webkit-scrollbar-thumb,
.comp-benchmark-table-shell::-webkit-scrollbar-thumb {
    border: 3px solid rgba(8, 13, 25, 0.92);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(34, 211, 238, 0.72), rgba(34, 197, 94, 0.54));
}

.comp-unified-matrix {
    --comp-matrix-label-width: 170px;
    --comp-matrix-col-width: 212px;
    width: max-content;
    min-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.comp-unified-matrix th,
.comp-unified-matrix td {
    width: var(--comp-matrix-col-width);
    min-width: var(--comp-matrix-col-width);
    max-width: var(--comp-matrix-col-width);
    padding: 11px 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    color: #d8e2f0;
}

.comp-unified-matrix th:first-child,
.comp-unified-matrix td:first-child {
    width: var(--comp-matrix-label-width);
    min-width: var(--comp-matrix-label-width);
    max-width: var(--comp-matrix-label-width);
    position: sticky;
    left: 0;
    z-index: 6;
    background: #080d19;
    color: #aebbd0;
    font-size: 0.72rem;
    font-weight: 760;
    text-transform: uppercase;
}

.comp-unified-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 8;
    height: 76px;
    min-height: 76px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #080d19;
    vertical-align: top;
}

.comp-unified-matrix thead th:first-child {
    z-index: 10;
}

.comp-matrix-product-head {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    min-height: 52px;
}

.comp-matrix-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(34, 211, 238, 0.62);
    border-radius: 9px;
    color: var(--comp-cyan);
    font-size: 0.78rem;
    font-weight: 760;
}

.comp-matrix-product-link,
.comp-matrix-product-title {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comp-matrix-product-link {
    border: 0;
    background: transparent;
    color: #f5f8ff;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 720;
    line-height: 1.12;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
}

.comp-matrix-product-link:hover {
    color: #d8fbff;
    text-decoration: none;
}

.comp-matrix-product-title {
    margin-top: 3px;
    color: #8fa0b8;
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.12;
    white-space: nowrap;
}

.comp-matrix-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.comp-matrix-own-label,
.comp-formula-missing,
.comp-matrix-hidden-chip {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 760;
}

.comp-matrix-own-label {
    border: 1px solid rgba(34, 197, 94, 0.42);
    background: rgba(34, 197, 94, 0.13);
    color: #80f0a9;
}

.comp-unified-matrix td.is-own,
.comp-unified-matrix th.is-own {
    background: rgba(8, 58, 73, 0.56);
}

.comp-unified-matrix .comp-matrix-row-num td:not(:first-child),
.comp-matrix-row-price td:not(:first-child) {
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    font-weight: 650;
    text-align: center;
}

.comp-matrix-row-price td:not(:first-child) {
    color: #fef3c7;
}

.comp-matrix-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 32px;
    border-radius: 12px;
    font-weight: 800;
}

.comp-matrix-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.comp-matrix-row-ingredient {
    display: none;
}

.comp-unified-matrix.comp-matrix-formula-open .comp-matrix-row-ingredient {
    display: table-row;
}

.comp-matrix-row-ingredient td:not(:first-child) {
    color: #d9e5f5;
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    font-weight: 620;
    text-align: center;
}

.comp-matrix-formula-toggle {
    border: 0;
    background: transparent;
    color: #c7d2fe;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 760;
    text-transform: uppercase;
    cursor: pointer;
}

.comp-platform-inline--panel {
    margin-top: 0;
}

.comp-platform-pricing {
    border: 1px solid rgba(34, 211, 238, 0.28);
    border-radius: 14px;
    background: rgba(8, 18, 28, 0.78);
    padding: 18px;
}

.comp-platform-head {
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(56, 73, 107, 0.35);
    padding-bottom: 12px;
}

.comp-platform-head p,
.comp-platform-meta {
    display: none;
}

.comp-platform-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(480px, 1.1fr);
    gap: 14px;
    align-items: start;
}

.comp-platform-editor {
    border: 1px solid rgba(56, 73, 107, 0.35);
    border-radius: 13px;
    background: rgba(7, 11, 22, 0.42);
    padding: 14px;
}

.comp-platform-operational,
.comp-platform-price-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.comp-platform-price-grid {
    margin-top: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.comp-platform-list-price-field {
    border-color: rgba(250, 204, 21, 0.28);
    background: rgba(22, 18, 8, 0.28);
}

.comp-platform-list-price-field span {
    color: #facc15;
}

.comp-platform-list-price-field input.is-saved {
    border-color: rgba(34, 197, 94, 0.72);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}

.comp-platform-list-price-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.comp-platform-list-price-control input {
    width: 100%;
}

.comp-platform-save-list-btn {
    min-height: 38px;
    border: 1px solid rgba(250, 204, 21, 0.32);
    border-radius: 11px;
    background: rgba(250, 204, 21, 0.08);
    color: #facc15;
    font-size: 0.78rem;
    font-weight: 760;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.comp-platform-save-list-btn.is-dirty {
    border-color: rgba(250, 204, 21, 0.68);
    background: rgba(250, 204, 21, 0.15);
}

.comp-platform-save-list-btn:hover:not(:disabled) {
    background: rgba(250, 204, 21, 0.2);
}

.comp-platform-save-list-btn:disabled {
    cursor: default;
    opacity: 0.48;
}

.comp-platform-checks {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 14px;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(56, 73, 107, 0.38);
    border-radius: 12px;
    background: rgba(8, 13, 25, 0.62);
}

.comp-platform-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.comp-platform-card {
    min-height: 150px;
    border-radius: 13px;
    background: rgba(8, 13, 25, 0.72);
}

.comp-platform-card-head [data-comp-platform="price"] {
    display: none;
}

.comp-platform-card-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.comp-platform-card-body > div:nth-child(n+3) {
    display: none;
}

.comp-platform-card-body div {
    min-height: 62px;
    border: 1px solid rgba(56, 73, 107, 0.35);
    border-radius: 12px;
    background: rgba(12, 18, 31, 0.82);
    padding: 10px;
}

.comp-platform-card-body span {
    color: #9aacbf;
    font-size: 0.72rem;
    font-weight: 700;
}

.comp-platform-card-body strong {
    display: block;
    margin-top: 5px;
    font-size: 1rem;
    font-weight: 760;
}

.comp-charts-panel {
    margin-top: 0;
}

.comp-charts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.comp-chart-card {
    min-height: 300px;
    border: 1px solid rgba(56, 73, 107, 0.42);
    border-radius: 14px;
    background: rgba(16, 24, 39, 0.78);
    padding: 16px;
}

.comp-chart-card header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.comp-chart-card h4 {
    font-size: 1rem;
}

.comp-chart-card header span {
    color: #9aacbf;
    font-size: 0.74rem;
    font-weight: 700;
}

.comp-chart-body {
    display: grid;
    gap: 10px;
}

.comp-chart-row {
    display: grid;
    grid-template-columns: minmax(118px, 0.52fr) minmax(140px, 1fr) minmax(78px, auto);
    align-items: center;
    gap: 10px;
}

.comp-chart-label {
    min-width: 0;
    overflow: hidden;
    color: #9baabd;
    font-size: 0.78rem;
    font-weight: 680;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comp-chart-row.is-own .comp-chart-label,
.comp-chart-row.is-own strong {
    color: #eff6ff;
}

.comp-chart-track {
    height: 22px;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(56, 73, 107, 0.28);
}

.comp-chart-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.95), rgba(34, 197, 94, 0.86));
}

.comp-chart-row:not(.is-own) .comp-chart-fill {
    background: linear-gradient(90deg, rgba(71, 85, 105, 0.95), rgba(100, 116, 139, 0.88));
}

.comp-chart-row strong {
    color: #e5edf8;
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    font-size: 0.78rem;
    font-weight: 760;
    white-space: nowrap;
}

.comp-chart-empty {
    display: grid;
    min-height: 160px;
    place-items: center;
    color: #8fa0b8;
    font-weight: 650;
}

.comp-advanced-panel {
    margin-top: 16px;
    border: 1px solid rgba(56, 73, 107, 0.35);
    border-radius: 14px;
    background: rgba(16, 24, 39, 0.54);
}

.comp-advanced-panel summary {
    min-height: 58px;
    padding: 0 16px;
}

.comp-advanced-actions {
    display: flex;
    gap: 10px;
    padding: 0 16px 16px;
}

@media (max-width: 1180px) {
    .comp-directory-filters,
    .comp-search-form,
    .comp-platform-layout,
    .comp-charts-grid {
        grid-template-columns: 1fr;
    }

    .comp-platform-grid,
    .comp-platform-price-grid,
    .comp-platform-operational {
        grid-template-columns: 1fr;
    }
}

#sub-desarrollo-competidores *,
#sub-desarrollo-competidores *::before,
#sub-desarrollo-competidores *::after {
    letter-spacing: 0;
}

.comp-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 22px;
    border: 1px solid rgba(56, 73, 107, 0.34);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(18, 24, 40, 0.86), rgba(8, 13, 25, 0.84)),
        var(--pv-card-surface);
    box-shadow: var(--pv-elevation);
    backdrop-filter: var(--pv-glass-blur);
    -webkit-backdrop-filter: var(--pv-glass-blur);
}

.comp-hero-copy {
    min-width: 0;
}

.comp-eyebrow,
.comp-section-kicker {
    display: block;
    margin-bottom: 6px;
    color: var(--pv-accent-cyan);
    font-size: var(--pv-text-xs);
    font-weight: 720;
    text-transform: uppercase;
}

.comp-hero h2,
.comp-panel h3,
.comp-subpanel-head h4 {
    margin: 0;
    color: var(--pv-text-primary);
    font-weight: 680;
}

.comp-hero h2 {
    font-size: clamp(1.55rem, 2.1vw, 2.25rem);
    line-height: 1.05;
}

.comp-hero p,
.comp-cuadro-head p {
    margin: 7px 0 0;
    color: var(--pv-text-secondary);
    font-size: var(--pv-text-base);
}

.comp-hero-actions,
.comp-cuadro-actions,
.comp-escalonado-actions,
.comp-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.comp-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 15px;
    border: 1px solid rgba(56, 73, 107, 0.52);
    border-radius: 11px;
    background: rgba(15, 23, 42, 0.76);
    color: var(--pv-text-primary);
    font-size: var(--pv-text-sm);
    font-weight: 680;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        border-color var(--pv-duration-fast) ease,
        background var(--pv-duration-fast) ease,
        color var(--pv-duration-fast) ease,
        transform var(--pv-duration-fast) ease,
        box-shadow var(--pv-duration-fast) ease;
}

.comp-btn:hover {
    border-color: rgba(34, 211, 238, 0.46);
    background: rgba(17, 27, 47, 0.92);
    transform: translateY(-1px);
}

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

.comp-btn--primary {
    border-color: rgba(34, 211, 238, 0.34);
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.34), rgba(59, 130, 246, 0.22));
    color: #cffafe;
    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.05), 0 12px 34px rgba(34, 211, 238, 0.08);
}

.comp-btn--soft {
    border-color: rgba(59, 130, 246, 0.28);
    background: rgba(37, 99, 235, 0.14);
    color: #bfdbfe;
}

.comp-btn--success {
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(22, 163, 74, 0.18);
    color: #bbf7d0;
}

.comp-btn--ghost {
    background: rgba(6, 10, 20, 0.34);
    color: var(--pv-text-muted);
}

.comp-btn--compact {
    min-height: 34px;
    padding: 0 11px;
    font-size: var(--pv-text-xs);
}

.comp-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.comp-metric-card {
    position: relative;
    min-height: 104px;
    padding: 16px;
    overflow: hidden;
    border: 1px solid rgba(56, 73, 107, 0.34);
    border-radius: 16px;
    background: rgba(18, 24, 40, 0.72);
    box-shadow: var(--pv-elevation);
}

.comp-metric-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--comp-accent, var(--pv-accent-cyan));
}

.comp-metric-card span,
.comp-metric-card small {
    display: block;
    color: var(--pv-text-secondary);
    font-size: var(--pv-text-xs);
    font-weight: 680;
}

.comp-metric-card span {
    text-transform: uppercase;
}

.comp-metric-card strong {
    display: block;
    margin: 7px 0 4px;
    color: var(--pv-text-primary);
    font-family: var(--pv-font-mono);
    font-size: var(--pv-text-2xl);
    line-height: 1;
}

.comp-metric-card--cyan { --comp-accent: #22d3ee; }
.comp-metric-card--blue { --comp-accent: #3b82f6; }
.comp-metric-card--green { --comp-accent: #22c55e; }
.comp-metric-card--amber { --comp-accent: #f59e0b; }

.comp-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.comp-rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

.comp-rail::-webkit-scrollbar,
.comp-table-scroll::-webkit-scrollbar,
.comp-table-shell::-webkit-scrollbar,
.comp-results-grid::-webkit-scrollbar,
.comp-groups-list::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.comp-rail::-webkit-scrollbar-thumb,
.comp-table-scroll::-webkit-scrollbar-thumb,
.comp-table-shell::-webkit-scrollbar-thumb,
.comp-results-grid::-webkit-scrollbar-thumb,
.comp-groups-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.24);
}

.comp-main {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.comp-panel {
    min-width: 0;
    max-width: 100%;
    border: 1px solid rgba(56, 73, 107, 0.34);
    border-radius: 17px;
    background: rgba(18, 24, 40, 0.72);
    box-shadow: var(--pv-elevation);
    backdrop-filter: var(--pv-glass-blur);
    -webkit-backdrop-filter: var(--pv-glass-blur);
}

.comp-panel--builder,
.comp-panel--groups {
    padding: 16px;
}

.comp-panel--cuadro,
.comp-results-panel,
.comp-panel--escalonado {
    padding: 18px;
}

.comp-panel--cuadro {
    overflow: visible;
}

/* Hero vacío del main: se muestra mientras no hay cuadro ni resultados abiertos */
.comp-empty-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 320px;
    padding: 18px;
    color: var(--pv-text-secondary);
    text-align: center;
}

.comp-empty-hero .material-symbols-outlined {
    color: var(--pv-accent-cyan);
    font-size: 44px;
    opacity: 0.7;
}

.comp-empty-hero h3 {
    color: var(--pv-text-primary);
    font-size: var(--pv-text-lg);
    font-weight: 720;
}

.comp-empty-hero p {
    max-width: 420px;
    font-size: var(--pv-text-sm);
}

.comp-advanced-panel {
    overflow: hidden;
    border: 1px solid rgba(56, 73, 107, 0.3);
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.52);
    box-shadow: var(--pv-elevation);
}

.comp-advanced-panel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 68px;
    padding: 0 18px;
    list-style: none;
    cursor: pointer;
}

.comp-advanced-panel > summary::-webkit-details-marker {
    display: none;
}

.comp-advanced-panel > summary strong,
.comp-advanced-panel > summary small {
    display: block;
}

.comp-advanced-panel > summary strong {
    color: var(--pv-text-primary);
    font-size: var(--pv-text-base);
    font-weight: 720;
}

.comp-advanced-panel > summary small {
    margin-top: 4px;
    color: var(--pv-text-secondary);
    font-size: var(--pv-text-sm);
}

.comp-advanced-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(34, 211, 238, 0.22);
    border-radius: 10px;
    background: rgba(8, 145, 178, 0.08);
    color: #67e8f9;
    transition: transform 0.18s ease;
}

.comp-advanced-panel[open] .comp-advanced-icon {
    transform: rotate(180deg);
}

.comp-advanced-panel .comp-panel--escalonado {
    border: 0;
    border-top: 1px solid rgba(56, 73, 107, 0.24);
    border-radius: 0;
    background: rgba(6, 10, 20, 0.24);
    box-shadow: none;
}

.comp-panel-head,
.comp-cuadro-head,
.comp-subpanel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.comp-panel h3,
.comp-cuadro-head h3 {
    font-size: var(--pv-text-lg);
}

.comp-channel-tabs {
    align-items: center;
    gap: 8px;
    margin: -2px 0 14px;
    padding: 4px;
    width: max-content;
    max-width: 100%;
    border: 1px solid rgba(56, 73, 107, 0.32);
    border-radius: 12px;
    background: rgba(6, 10, 20, 0.42);
}

.comp-channel-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--pv-text-muted);
    font-size: var(--pv-text-sm);
    font-weight: 680;
    cursor: pointer;
    transition:
        color var(--pv-duration-fast) ease,
        background var(--pv-duration-fast) ease,
        border-color var(--pv-duration-fast) ease;
}

.comp-channel-tab small {
    color: inherit;
    opacity: 0.68;
    font-size: var(--pv-text-xs);
    font-weight: 650;
}

.comp-channel-tab:hover,
.comp-channel-tab.is-active {
    border-color: rgba(34, 211, 238, 0.32);
    background: rgba(8, 145, 178, 0.13);
    color: #cffafe;
}

.comp-table-shell > .comp-channel-tabs {
    margin: 10px 10px 8px;
}

.comp-count-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(34, 211, 238, 0.28);
    border-radius: 999px;
    background: rgba(8, 145, 178, 0.1);
    color: #a5f3fc;
    font-size: var(--pv-text-xs);
    font-weight: 720;
    white-space: nowrap;
}

.comp-search-form,
.comp-rail-filters,
.comp-form-grid {
    display: grid;
    gap: 12px;
}

/* Flash breve para resaltar un panel (sustituye los ring-* de Tailwind) */
.comp-flash {
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.35);
    transition: box-shadow var(--pv-duration-fast) ease;
}

.comp-panel--builder .comp-search-form {
    display: grid !important;
    grid-template-columns: minmax(240px, 1fr) minmax(260px, 1.08fr) minmax(170px, 0.52fr) minmax(320px, 0.92fr);
    align-items: end;
}

.comp-panel--builder #comp-search-status {
    grid-column: 1 / -1;
}

.comp-panel--groups .comp-panel-head {
    margin-bottom: 12px;
}

.comp-panel--groups .comp-rail-filters {
    grid-template-columns: minmax(300px, 1fr) minmax(260px, 0.46fr);
    align-items: end;
}

.comp-field {
    min-width: 0;
}

.comp-field--stacked {
    display: grid;
    gap: 7px;
}

.comp-field span:first-child,
.comp-field > span,
.comp-rail-filters label {
    color: var(--pv-text-muted);
    font-size: var(--pv-text-xs);
    font-weight: 700;
}

.comp-field-hint {
    display: block;
    margin-top: 4px;
    color: var(--pv-text-muted);
    font-size: var(--pv-text-xs);
}

.comp-input-wrap {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 10px;
    border: 1px solid rgba(56, 73, 107, 0.56);
    border-radius: 12px;
    background: rgba(6, 10, 20, 0.66);
    transition: border-color var(--pv-duration-fast) ease, box-shadow var(--pv-duration-fast) ease;
}

.comp-input-wrap:focus-within {
    border-color: rgba(34, 211, 238, 0.56);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.08);
}

.comp-input-wrap > .material-symbols-outlined {
    color: #64748b;
    font-size: 1.1rem;
}

.comp-input-wrap input,
.comp-input-wrap select,
.comp-field > input,
.comp-field > select,
.comp-rail-filters select,
.comp-escalonado-actions select {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    border: 1px solid rgba(56, 73, 107, 0.52);
    border-radius: 11px;
    background: rgba(6, 10, 20, 0.68);
    color: var(--pv-text-primary);
    font: inherit;
    font-size: var(--pv-text-base);
    outline: none;
}

.comp-input-wrap input,
.comp-input-wrap select {
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.comp-input-wrap select {
    appearance: none;
}

.comp-input-wrap--sm {
    min-height: 40px;
}

.comp-input-wrap--sm input {
    font-size: var(--pv-text-sm);
}

.comp-field > input,
.comp-field > select,
.comp-rail-filters select,
.comp-escalonado-actions select {
    padding: 0 12px;
}

.comp-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--pv-text-secondary);
    cursor: pointer;
}

.comp-icon-btn:hover {
    background: rgba(148, 163, 184, 0.08);
    color: var(--pv-text-primary);
}

.comp-autocomplete {
    position: absolute;
    inset: calc(100% + 6px) 0 auto 0;
    z-index: 80;
    max-height: 320px;
    overflow: auto;
    border: 1px solid rgba(56, 73, 107, 0.54);
    border-radius: 12px;
    background: #080d19;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
}

.comp-action-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.comp-status {
    min-height: 38px;
    padding: 10px 12px;
    border: 1px solid rgba(34, 211, 238, 0.22);
    border-radius: 12px;
    background: rgba(8, 145, 178, 0.08);
    color: #a5f3fc;
    font-size: var(--pv-text-sm);
    line-height: 1.35;
}

.comp-filter-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.comp-list-meta {
    min-height: 18px;
    color: var(--pv-text-secondary);
    font-size: var(--pv-text-xs);
    font-weight: 650;
}

/* Chip que avisa que hay un filtro activo en Benchmarks guardados */
.comp-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    padding: 2px 8px;
    border: 1px solid rgba(34, 211, 238, 0.32);
    border-radius: 999px;
    background: rgba(8, 145, 178, 0.14);
    color: var(--pv-text-primary);
    font-size: var(--pv-text-xs);
    font-weight: 650;
}

.comp-filter-chip button {
    border: 0;
    padding: 0;
    background: none;
    color: #a5f3fc;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
}

.comp-filter-chip button:hover {
    color: var(--pv-text-primary);
}

.comp-groups-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
    max-height: 330px;
    overflow: auto;
    padding-right: 2px;
}

.comp-empty-text {
    margin: 0;
    padding: 20px;
    border: 1px dashed rgba(148, 163, 184, 0.18);
    border-radius: 13px;
    color: var(--pv-text-secondary);
    text-align: center;
    font-size: var(--pv-text-sm);
}

.comp-group-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(56, 73, 107, 0.42);
    border-radius: 13px;
    background: rgba(6, 10, 20, 0.42);
    cursor: pointer;
    transition:
        border-color var(--pv-duration-fast) ease,
        background var(--pv-duration-fast) ease,
        transform var(--pv-duration-fast) ease;
}

.comp-group-card:hover,
.comp-group-card.is-active {
    border-color: rgba(34, 211, 238, 0.48);
    background: rgba(8, 145, 178, 0.1);
}

.comp-group-card:hover {
    transform: translateY(-1px);
}

.comp-group-title {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.comp-group-title strong {
    color: var(--pv-text-primary);
    font-size: var(--pv-text-sm);
    font-weight: 680;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.comp-group-title code {
    color: var(--pv-text-secondary);
    font-family: var(--pv-font-mono);
    font-size: var(--pv-text-xs);
}

.comp-group-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
}

.comp-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 22px;
    padding: 0 8px;
    border: 1px solid rgba(148, 163, 184, 0.17);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: var(--pv-text-muted);
    font-size: var(--pv-text-xs);
    font-weight: 700;
}

.comp-chip--channel {
    gap: 5px;
    white-space: nowrap;
}

.comp-chip--channel small {
    color: inherit;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    opacity: 0.92;
}

.comp-chip--amazon {
    border-color: rgba(245, 158, 11, 0.28);
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.08);
}

.comp-chip--ml {
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
    background: rgba(37, 99, 235, 0.1);
}

.comp-chip--ok {
    border-color: rgba(34, 197, 94, 0.28);
    color: #86efac;
    background: rgba(34, 197, 94, 0.08);
}

.comp-chip--updated {
    gap: 5px;
    color: #cbd5e1;
}

.comp-chip--updated .material-symbols-outlined {
    font-size: 14px;
    line-height: 1;
}

.comp-group-keyword {
    margin: 8px 0 0;
    color: var(--pv-text-secondary);
    font-size: var(--pv-text-xs);
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.comp-group-actions {
    display: grid;
    align-content: center;
    justify-items: end;
    gap: 8px;
}

.comp-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 9px;
    background: rgba(15, 23, 42, 0.56);
    color: #64748b;
    cursor: pointer;
}

.comp-delete-btn:hover {
    border-color: rgba(239, 68, 68, 0.35);
    color: #f87171;
}

.comp-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 12px;
    max-height: 560px;
    overflow: auto;
    padding-right: 3px;
}

.comp-result-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 72px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-height: 136px;
    padding: 13px;
    border: 1px solid rgba(56, 73, 107, 0.42) !important;
    border-radius: 14px !important;
    background: rgba(6, 10, 20, 0.54) !important;
    box-shadow: none;
    cursor: pointer;
    transition: border-color var(--pv-duration-fast) ease, background var(--pv-duration-fast) ease, transform var(--pv-duration-fast) ease;
}

.comp-result-card:hover {
    border-color: rgba(34, 211, 238, 0.42) !important;
    transform: translateY(-1px);
}

.comp-result-card.is-selected {
    border-color: rgba(34, 211, 238, 0.68) !important;
    background: rgba(8, 145, 178, 0.12) !important;
}

.comp-result-card img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 10px;
    background: #fff;
}

.comp-result-check {
    padding-top: 4px;
}

.comp-result-check input {
    width: 16px;
    height: 16px;
    accent-color: #22d3ee;
}

.comp-result-copy {
    min-width: 0;
}

.comp-result-copy h4 {
    display: -webkit-box;
    min-height: 38px;
    margin: 0;
    overflow: hidden;
    color: var(--pv-text-primary);
    font-size: var(--pv-text-sm);
    font-weight: 680;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.comp-result-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 8px;
}

.comp-result-price strong {
    color: #86efac;
    font-family: var(--pv-font-mono);
    font-size: var(--pv-text-lg);
}

.comp-result-price span {
    color: var(--pv-text-secondary);
    font-family: var(--pv-font-mono);
    font-size: var(--pv-text-xs);
    text-decoration: line-through;
}

.comp-result-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.comp-cuadro-head {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.comp-platform-inline--panel,
.comp-pricing-panel,
.comp-formula-panel {
    margin: 14px 0 0;
}

.comp-platform-inline--panel,
.comp-pricing-panel,
.comp-formula-panel {
    padding: 16px;
    border: 1px solid rgba(56, 73, 107, 0.32);
    border-radius: 15px;
    background: rgba(6, 10, 20, 0.34);
}

.comp-platform-pricing {
    display: grid;
    gap: 12px;
}

.comp-platform-inline {
    min-width: 0;
}

.comp-platform-inline--panel {
    border-color: rgba(34, 211, 238, 0.18);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(6, 10, 20, 0.86)),
        rgba(6, 10, 20, 0.82);
    box-shadow: inset 3px 0 0 rgba(34, 211, 238, 0.58);
    backdrop-filter: var(--pv-glass-blur);
    -webkit-backdrop-filter: var(--pv-glass-blur);
}

.comp-platform-inline .comp-platform-pricing {
    max-width: none;
}

.comp-platform-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.comp-platform-head h4 {
    margin: 0;
    color: var(--pv-text-primary);
    font-size: var(--pv-text-base);
    font-weight: 650;
    line-height: 1.2;
}

.comp-platform-head p {
    margin: 4px 0 0;
    color: var(--pv-text-secondary);
    font-size: var(--pv-text-xs);
}

.comp-platform-meta {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
    max-width: 540px;
}

.comp-platform-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(34, 211, 238, 0.18);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.62);
    color: var(--pv-text-secondary);
    font-family: var(--pv-font-mono);
    font-size: var(--pv-text-xs);
    white-space: nowrap;
}

.comp-platform-layout {
    display: grid;
    grid-template-columns: minmax(360px, 0.78fr) minmax(560px, 1.22fr);
    gap: 12px;
    align-items: start;
}

.comp-platform-editor {
    display: grid;
    align-content: start;
    align-self: start;
    gap: 10px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(56, 73, 107, 0.28);
    border-radius: 12px;
    background: rgba(2, 6, 23, 0.26);
}

.comp-platform-operational,
.comp-platform-price-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
}

.comp-platform-editor .comp-field input {
    width: 100%;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(71, 85, 105, 0.52);
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.58);
    color: var(--pv-text-primary);
    font-family: var(--pv-font-ui);
    font-size: var(--pv-text-sm);
    outline: none;
    transition: border-color var(--pv-duration-fast) ease, box-shadow var(--pv-duration-fast) ease;
}

.comp-platform-editor .comp-field input:focus {
    border-color: rgba(34, 211, 238, 0.72);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.08);
}

.comp-platform-checks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    min-height: 36px;
    padding: 6px 9px;
    border: 1px solid rgba(71, 85, 105, 0.42);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.46);
}

.comp-platform-checks label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--pv-text-secondary);
    font-size: var(--pv-text-xs);
    font-weight: 620;
    white-space: nowrap;
    cursor: pointer;
}

.comp-platform-checks input {
    width: 15px;
    height: 15px;
    accent-color: var(--pv-accent-cyan);
}

.comp-platform-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    align-content: start;
    min-width: 0;
}

.comp-platform-card {
    --comp-platform-accent: var(--pv-accent-cyan);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(56, 73, 107, 0.38);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.76), rgba(5, 9, 18, 0.72));
}

.comp-platform-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: var(--comp-platform-accent);
    opacity: 0.72;
}

.comp-platform-card--ml {
    --comp-platform-accent: #facc15;
}

.comp-platform-card--amazon {
    --comp-platform-accent: #38bdf8;
}

.comp-platform-card--web {
    --comp-platform-accent: #34d399;
}

.comp-platform-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px 8px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.11);
}

.comp-platform-card-head strong {
    color: var(--pv-text-primary);
    font-size: var(--pv-text-sm);
    font-weight: 650;
}

.comp-platform-card-head span {
    color: var(--pv-accent-cyan);
    font-family: var(--pv-font-mono);
    font-size: var(--pv-text-xs);
    font-weight: 740;
    white-space: nowrap;
}

.comp-platform-card-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    padding: 10px 12px 11px;
}

.comp-platform-card-body div {
    min-width: 0;
}

.comp-platform-card-body span {
    display: block;
    margin-bottom: 3px;
    color: var(--pv-text-muted);
    font-size: var(--pv-text-xs);
    font-weight: 680;
}

.comp-platform-card-body strong {
    color: var(--pv-text-primary);
    font-family: var(--pv-font-mono);
    font-size: var(--pv-text-sm);
    font-weight: 760;
}

.comp-platform-card-body strong.is-good {
    color: #4ade80;
}

.comp-platform-card-body strong.is-warn {
    color: #facc15;
}

.comp-platform-card-body strong.is-bad {
    color: #fb7185;
}

.comp-platform-card-actions {
    display: flex;
    justify-content: flex-end;
    padding: 0 12px 12px;
}

.comp-platform-apply-btn {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(34, 211, 238, 0.34);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.62);
    color: #c7d2fe;
    font-size: var(--pv-text-xs);
    font-weight: 720;
    line-height: 1;
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease, background 150ms ease, transform 150ms ease;
}

.comp-platform-apply-btn:hover {
    border-color: var(--comp-platform-accent);
    background: rgba(34, 211, 238, 0.1);
    color: #f8fafc;
    transform: translateY(-1px);
}

.comp-platform-apply-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    transform: none;
}

.comp-platform-apply-btn--real {
    color: #a7f3d0;
}

.comp-platform-apply-btn--target {
    color: #cbd5e1;
}

.comp-table-scroll,
.comp-table-shell {
    overflow: auto;
}

.comp-table-shell {
    --comp-scroll-shadow-left: inset 0 0 0 0 transparent;
    --comp-scroll-shadow-right: inset 0 0 0 0 transparent;
    --comp-scroll-shadow-top: inset 0 0 0 0 transparent;
    --comp-scroll-shadow-bottom: inset 0 0 0 0 transparent;
    position: relative;
    border: 1px solid rgba(56, 73, 107, 0.32);
    border-radius: 14px;
    background: rgba(6, 10, 20, 0.36);
    height: clamp(650px, calc(100vh - 82px), 860px);
    min-height: 650px;
    padding-bottom: 72px;
    box-shadow:
        var(--comp-scroll-shadow-left),
        var(--comp-scroll-shadow-right),
        var(--comp-scroll-shadow-top),
        var(--comp-scroll-shadow-bottom);
    outline: none;
    overscroll-behavior-x: contain;
    scrollbar-color: rgba(34, 211, 238, 0.44) rgba(15, 23, 42, 0.74);
    scrollbar-gutter: stable;
    transition: box-shadow var(--pv-duration-fast) var(--pv-ease-out),
        border-color var(--pv-duration-fast) var(--pv-ease-out);
}

.comp-table-shell:focus-visible {
    border-color: rgba(34, 211, 238, 0.48);
    box-shadow:
        0 0 0 2px rgba(34, 211, 238, 0.14),
        var(--comp-scroll-shadow-left),
        var(--comp-scroll-shadow-right),
        var(--comp-scroll-shadow-top),
        var(--comp-scroll-shadow-bottom);
}

.comp-table-shell.has-x-scroll.is-scroll-left {
    --comp-scroll-shadow-left: inset 24px 0 22px -24px rgba(34, 211, 238, 0.38);
}

.comp-table-shell.has-x-scroll.is-scroll-right {
    --comp-scroll-shadow-right: inset -28px 0 24px -26px rgba(34, 211, 238, 0.5);
}

.comp-table-shell.has-y-scroll.is-scroll-top {
    --comp-scroll-shadow-top: inset 0 22px 24px -28px rgba(0, 0, 0, 0.88);
}

.comp-table-shell.has-y-scroll.is-scroll-bottom {
    --comp-scroll-shadow-bottom: inset 0 -28px 26px -30px rgba(34, 211, 238, 0.24);
}

.comp-table-shell::-webkit-scrollbar {
    width: 13px;
    height: 13px;
}

.comp-table-shell::-webkit-scrollbar-track {
    border: 1px solid rgba(56, 73, 107, 0.22);
    border-radius: 999px;
    background: rgba(10, 14, 26, 0.82);
}

.comp-table-shell::-webkit-scrollbar-thumb {
    min-height: 56px;
    border: 3px solid rgba(10, 14, 26, 0.82);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.72), rgba(59, 130, 246, 0.58));
    background-clip: padding-box;
}

.comp-table-shell::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, rgba(103, 232, 249, 0.9), rgba(96, 165, 250, 0.76));
    background-clip: padding-box;
}

.comp-table-shell::-webkit-scrollbar-corner {
    background: rgba(10, 14, 26, 0.82);
}

.comp-formula-panel table {
    width: 100%;
    min-width: 1180px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--pv-text-sm);
}

.comp-comparison-matrix {
    width: max-content;
    min-width: 100%;
}

.comp-matrix-loading,
.comp-matrix-empty {
    display: flex;
    min-height: 240px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--pv-text-secondary);
    font-size: var(--pv-text-sm);
}

.comp-unified-matrix {
    --comp-matrix-label-width: 168px;
    --comp-matrix-col-width: 210px;
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-size: var(--pv-text-sm);
}

.comp-unified-matrix th,
.comp-unified-matrix td {
    width: var(--comp-matrix-col-width);
    min-width: var(--comp-matrix-col-width);
    max-width: var(--comp-matrix-col-width);
    padding: 10px 13px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.09);
    color: #cbd5e1;
    font-variant-numeric: tabular-nums;
    text-align: center;
    vertical-align: middle;
}

.comp-unified-matrix th:first-child,
.comp-unified-matrix td:first-child {
    position: sticky;
    left: 0;
    z-index: 4;
    width: var(--comp-matrix-label-width);
    min-width: var(--comp-matrix-label-width);
    max-width: var(--comp-matrix-label-width);
    background: rgba(10, 14, 26, 0.98);
    color: var(--pv-text-muted);
    font-size: var(--pv-text-xs);
    font-weight: 760;
    text-align: left;
    text-transform: uppercase;
    transition: box-shadow var(--pv-duration-fast) var(--pv-ease-out),
        background-color var(--pv-duration-fast) var(--pv-ease-out);
}

.comp-unified-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 6;
    height: 120px;
    min-height: 120px;
    padding-top: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(10, 14, 26, 0.98);
    color: var(--pv-text-primary);
    text-align: left;
    vertical-align: top;
    backdrop-filter: blur(14px) saturate(1.24);
    -webkit-backdrop-filter: blur(14px) saturate(1.24);
    transition: box-shadow var(--pv-duration-fast) var(--pv-ease-out);
}

.comp-unified-matrix thead th:first-child {
    z-index: 8;
}

.comp-table-shell.is-scroll-left .comp-unified-matrix th:first-child,
.comp-table-shell.is-scroll-left .comp-unified-matrix td:first-child {
    box-shadow:
        16px 0 24px -22px rgba(34, 211, 238, 0.62),
        1px 0 0 rgba(56, 73, 107, 0.42);
}

.comp-table-shell.is-scroll-top .comp-unified-matrix thead th {
    box-shadow: 0 16px 22px -24px rgba(0, 0, 0, 0.88);
}

.comp-unified-matrix td.is-own,
.comp-unified-matrix th.is-own {
    background: rgba(8, 145, 178, 0.12);
}

.comp-unified-matrix tbody tr:hover td {
    background-color: rgba(34, 211, 238, 0.035);
}

.comp-unified-matrix tbody tr:hover td:first-child {
    background-color: #0d1423;
}

.comp-matrix-product-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 9px;
    row-gap: 5px;
    align-items: start;
    align-content: start;
    min-width: 0;
    min-height: 84px;
}

.comp-matrix-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(34, 211, 238, 0.42);
    border-radius: 8px;
    background: rgba(8, 145, 178, 0.12);
    color: #67e8f9;
    font-family: var(--pv-font-mono);
    font-size: var(--pv-text-xs);
    font-weight: 760;
}

.comp-matrix-product-link {
    appearance: none;
    display: -webkit-box;
    overflow: hidden;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pv-text-primary);
    font: inherit;
    font-size: var(--pv-text-xs);
    font-weight: 720;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    white-space: normal;
    cursor: pointer;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.comp-matrix-product-link:hover {
    color: #a5f3fc;
    text-decoration: none;
}

.comp-matrix-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.comp-matrix-own-label {
    display: inline-flex;
    align-items: center;
    min-height: 19px;
    padding: 0 7px;
    border: 1px solid rgba(34, 197, 94, 0.24);
    border-radius: 999px;
    background: rgba(22, 163, 74, 0.1);
    color: #86efac;
    font-size: 10px;
    font-weight: 760;
}

/* Chip "Oculto" en el header de una columna desactivada */
.comp-matrix-hidden-chip {
    display: inline-flex;
    align-items: center;
    min-height: 19px;
    padding: 0 7px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.62);
    color: var(--pv-text-muted);
    font-size: 10px;
    font-weight: 760;
}

.comp-matrix-section-row td {
    padding: 8px 13px;
    border-bottom-color: rgba(34, 211, 238, 0.1);
    background: rgba(15, 23, 42, 0.74);
}

.comp-matrix-section-row td:first-child {
    color: #a5b4fc;
}

.comp-matrix-row-price td:not(:first-child) {
    color: var(--pv-text-primary);
    font-family: var(--pv-font-mono);
    font-weight: 760;
}

/* Filas numéricas: alineadas a la derecha con fuente mono (la etiqueta no) */
.comp-unified-matrix .comp-matrix-row-num td:not(:first-child) {
    font-family: var(--pv-font-mono);
    text-align: right;
}

/* Filas de decisión: etiqueta con más peso + fondo sutil */
.comp-unified-matrix .comp-matrix-row-key td:first-child {
    color: var(--pv-text-primary);
    font-weight: 800;
}

.comp-unified-matrix .comp-matrix-row-key td:not(:first-child) {
    background: rgba(34, 211, 238, 0.04);
}

/* Celda ganadora de la fila */
.comp-unified-matrix td.is-best {
    font-weight: 700;
    box-shadow: inset 2px 0 0 var(--pv-accent-cyan);
}

.comp-matrix-best-flag {
    margin-right: 4px;
    color: var(--pv-accent-cyan);
    font-size: 10px;
}

/* Columna oculta (p.activo === false) */
.comp-unified-matrix td.is-hidden {
    opacity: 0.45;
}

.comp-unified-matrix th.is-hidden .comp-matrix-product-head {
    opacity: 0.45;
}

/* Fila de acciones al final, con fondo ligeramente distinto */
.comp-unified-matrix .comp-matrix-row-actions td:not(:first-child) {
    background: rgba(15, 23, 42, 0.5);
}

/* Fórmula colapsable: las filas de ingredientes solo se ven con la matriz abierta */
.comp-unified-matrix .comp-matrix-row-ingredient {
    display: none;
}

.comp-unified-matrix.comp-matrix-formula-open .comp-matrix-row-ingredient {
    display: table-row;
}

.comp-matrix-formula-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #a5b4fc;
    font-size: var(--pv-text-xs);
    font-weight: 760;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
}

.comp-matrix-formula-toggle:hover {
    color: #67e8f9;
}

.comp-matrix-formula-toggle-label {
    color: var(--pv-accent-cyan);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.comp-matrix-row-ingredient td:not(:first-child) {
    font-family: var(--pv-font-mono);
}

.comp-matrix-row-ingredient td.is-own {
    color: #a7f3d0;
    font-weight: 760;
}

.comp-matrix-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 30px;
    padding: 0 8px;
    border-radius: 10px;
    font-family: var(--pv-font-mono);
    font-weight: 820;
}

.comp-matrix-score--good {
    border: 1px solid rgba(34, 197, 94, 0.28);
    background: rgba(22, 163, 74, 0.18);
    color: #4ade80;
}

.comp-matrix-score--warn {
    border: 1px solid rgba(245, 158, 11, 0.28);
    background: rgba(180, 83, 9, 0.18);
    color: #facc15;
}

.comp-matrix-score--bad {
    border: 1px solid rgba(248, 113, 113, 0.28);
    background: rgba(127, 29, 29, 0.22);
    color: #fb7185;
}

.comp-matrix-actions {
    display: inline-flex;
    justify-content: center;
    gap: 4px;
}

.comp-matrix-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(56, 73, 107, 0.32);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.54);
    color: var(--pv-text-muted);
    cursor: pointer;
}

.comp-matrix-icon-btn:hover {
    border-color: rgba(34, 211, 238, 0.32);
    color: #67e8f9;
}

.comp-matrix-icon-btn .material-symbols-outlined {
    font-size: 1rem;
}

.comp-matrix-edit-cell {
    appearance: none;
    display: inline-block;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: center;
    cursor: pointer;
}

.comp-matrix-edit-cell:hover {
    color: #fbbf24;
}

.comp-matrix-empty-cell {
    color: var(--pv-text-muted);
    text-align: left;
}

.comp-formula-panel--status {
    padding: 0;
    border: 0;
    background: transparent;
}

.comp-formula-product-name {
    display: -webkit-box;
    overflow: hidden;
    min-height: 32px;
    color: var(--pv-text-primary);
    font-size: var(--pv-text-xs);
    font-weight: 720;
    line-height: 1.15;
    text-align: left;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.comp-formula-channel,
.comp-formula-missing {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 19px;
    margin-top: 6px;
    padding: 0 7px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 760;
    text-transform: none;
}

.comp-formula-channel--amazon {
    border-color: rgba(245, 158, 11, 0.28);
    background: rgba(245, 158, 11, 0.08);
    color: #fbbf24;
}

.comp-formula-channel--ml {
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(37, 99, 235, 0.1);
    color: #93c5fd;
}

.comp-formula-missing {
    color: var(--pv-text-muted);
    background: rgba(15, 23, 42, 0.62);
}

.comp-formula-panel th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 11px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(10, 14, 26, 0.96);
    color: var(--pv-text-muted);
    font-size: var(--pv-text-xs);
    font-weight: 760;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.comp-formula-panel td {
    padding: 11px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.09);
    color: #cbd5e1;
    vertical-align: middle;
}

.comp-row-own {
    background: rgba(8, 145, 178, 0.1);
    box-shadow: inset 3px 0 0 rgba(34, 211, 238, 0.85);
}

.comp-product-cell {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-width: 280px;
}

.comp-product-cell img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 10px;
    background: #fff;
}

.comp-product-title {
    display: inline-block;
    max-width: 280px;
    color: var(--pv-text-primary);
    font-size: var(--pv-text-sm);
    font-weight: 680;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comp-product-title:hover {
    color: #a5f3fc;
}

.comp-product-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px;
}

.comp-mini-text {
    color: var(--pv-text-secondary);
    font-size: var(--pv-text-xs);
}

.comp-price {
    color: var(--pv-text-primary);
    font-family: var(--pv-font-mono);
    font-size: var(--pv-text-sm);
    font-weight: 720;
}

.comp-price--own {
    color: #86efac;
}

.comp-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid currentColor;
    font-family: var(--pv-font-mono);
    font-weight: 760;
}

.comp-score--green {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.08);
}

.comp-score--yellow {
    color: #facc15;
    background: rgba(250, 204, 21, 0.08);
}

.comp-score--red {
    color: #f87171;
    background: rgba(248, 113, 113, 0.08);
}

.comp-table-actions {
    display: inline-flex;
    justify-content: center;
    gap: 4px;
}

.comp-table-actions button,
.comp-note-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 9px;
    background: rgba(15, 23, 42, 0.62);
    color: #64748b;
    cursor: pointer;
}

.comp-table-actions button:hover,
.comp-note-btn:hover {
    border-color: rgba(34, 211, 238, 0.36);
    color: #67e8f9;
}

.comp-scoring-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

/* Tarjetas de veredicto del benchmark */
.comp-verdict-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--pv-card-border);
    border-radius: 14px;
    background: rgba(6, 10, 20, 0.34);
}

.comp-verdict-label {
    color: var(--pv-text-muted);
    font-size: var(--pv-text-xs);
    font-weight: 760;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.comp-verdict-value {
    color: var(--pv-text-primary);
    font-family: var(--pv-font-mono);
    font-size: var(--pv-text-lg);
    font-weight: 760;
    font-variant-numeric: tabular-nums;
}

.comp-verdict-value--text {
    font-family: var(--pv-font-ui);
    font-size: var(--pv-text-sm);
    font-weight: 700;
}

.comp-verdict-note {
    color: var(--pv-text-secondary);
    font-size: var(--pv-text-xs);
}

.comp-verdict-delta--up {
    color: var(--pv-red-text);
}

.comp-verdict-delta--down {
    color: var(--pv-green-text);
}

.comp-panel--escalonado {
    border-color: rgba(245, 158, 11, 0.22);
}

.comp-escalonado-actions select {
    min-width: 150px;
}

.comp-escalonado-form {
    margin: 12px 0;
    padding: 15px;
    border: 1px solid rgba(56, 73, 107, 0.32);
    border-radius: 14px;
    background: rgba(6, 10, 20, 0.34);
}

.comp-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.comp-form-actions {
    margin-top: 12px;
}

.comp-escalonado-list {
    display: grid;
    gap: 10px;
}

@media (max-width: 1380px) {
    .comp-panel--builder .comp-search-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .comp-action-grid {
        align-self: stretch;
    }

    .comp-panel--groups .comp-rail-filters {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 0.4fr);
    }

    .comp-groups-list {
        max-height: 360px;
    }

    .comp-platform-layout {
        grid-template-columns: 1fr;
    }

    .comp-platform-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Escritorio ancho: rail fijo a la izquierda + main fluido a la derecha */
@media (min-width: 1200px) {
    .comp-workbench {
        grid-template-columns: minmax(340px, 400px) minmax(0, 1fr);
    }

    .comp-rail {
        position: sticky;
        top: 16px;
        max-height: calc(100vh - 32px);
        overflow-y: auto;
        padding-right: 6px;
    }

    /* El rail es angosto: los formularios se apilan en una sola columna */
    .comp-panel--builder .comp-search-form {
        grid-template-columns: 1fr !important;
    }

    .comp-panel--groups .comp-rail-filters {
        grid-template-columns: 1fr;
    }
}

@media (max-height: 820px) {
    .comp-table-shell {
        height: clamp(480px, calc(100vh - 74px), 740px);
        min-height: 480px;
    }
}

@media (max-width: 900px) {
    #sub-desarrollo-competidores.comp-workspace {
        padding: 10px 0 28px;
    }

    .comp-hero,
    .comp-panel-head,
    .comp-cuadro-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .comp-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .comp-rail {
        grid-template-columns: 1fr;
    }

    /* Matriz más compacta en pantallas angostas */
    .comp-unified-matrix {
        --comp-matrix-col-width: 156px;
        --comp-matrix-label-width: 120px;
    }

    .comp-panel--builder .comp-search-form,
    .comp-panel--groups .comp-rail-filters {
        grid-template-columns: 1fr;
    }

    .comp-form-grid {
        grid-template-columns: 1fr;
    }

    .comp-scoring-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .comp-platform-head {
        flex-direction: column;
    }

    .comp-platform-meta {
        justify-content: flex-start;
        max-width: none;
    }

    .comp-platform-operational,
    .comp-platform-price-grid,
    .comp-platform-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .comp-platform-inline {
        padding: 14px;
    }

}

@media (max-width: 560px) {
    .comp-hero,
    .comp-panel--builder,
    .comp-panel--groups,
    .comp-panel--cuadro,
    .comp-results-panel,
    .comp-panel--escalonado {
        padding: 14px;
        border-radius: 14px;
    }

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

    .comp-action-grid {
        grid-template-columns: 1fr;
    }

    .comp-hero-actions,
    .comp-cuadro-actions,
    .comp-escalonado-actions {
        width: 100%;
    }

    .comp-hero-actions .comp-btn,
    .comp-cuadro-actions .comp-btn,
    .comp-escalonado-actions .comp-btn {
        flex: 1 1 auto;
    }

    .comp-platform-operational,
    .comp-platform-price-grid,
    .comp-platform-grid,
    .comp-platform-card-body {
        grid-template-columns: 1fr;
    }

    .comp-platform-checks {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Competidores v2 final override: debe quedar al final para ganar al CSS legado. */
#sub-desarrollo-competidores.comp-workspace {
    width: min(100%, 1760px) !important;
    max-width: 1760px !important;
    padding: 10px 20px 34px !important;
    color: var(--comp-text, #edf4ff);
    font-family: var(--comp-font, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    font-size: 13.5px;
    letter-spacing: 0;
}

#sub-desarrollo-competidores .comp-hero,
#sub-desarrollo-competidores .comp-metrics,
#sub-desarrollo-competidores .comp-workbench,
#sub-desarrollo-competidores .comp-rail,
#sub-desarrollo-competidores .comp-main,
#sub-desarrollo-competidores #comp-empty-hero {
    display: none !important;
}

#sub-desarrollo-competidores .comp-page-title {
    display: flex !important;
    align-items: center;
    min-height: 40px;
    margin-bottom: 12px;
}

#sub-desarrollo-competidores .comp-page-title h2 {
    margin: 0;
    color: #edf4ff;
    font-size: 1.36rem;
    font-weight: 650;
    line-height: 1.12;
}

#sub-desarrollo-competidores .comp-phase.is-active,
#sub-desarrollo-competidores .comp-phase--directory,
#sub-desarrollo-competidores .comp-phase--create,
#sub-desarrollo-competidores .comp-phase--analysis {
    min-width: 0;
}

#sub-desarrollo-competidores .comp-panel {
    border: 1px solid rgba(56, 73, 107, 0.42) !important;
    border-radius: 14px !important;
    background: rgba(16, 24, 39, 0.86) !important;
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.24) !important;
}

#sub-desarrollo-competidores .comp-panel--directory,
#sub-desarrollo-competidores .comp-panel--builder,
#sub-desarrollo-competidores .comp-panel--cuadro {
    padding: 18px !important;
}

#sub-desarrollo-competidores .comp-directory-head,
#sub-desarrollo-competidores .comp-analysis-topbar,
#sub-desarrollo-competidores .comp-analysis-head,
#sub-desarrollo-competidores .comp-panel-head,
#sub-desarrollo-competidores .comp-platform-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

#sub-desarrollo-competidores .comp-directory-head {
    margin-bottom: 14px;
}

#sub-desarrollo-competidores .comp-directory-head h3,
#sub-desarrollo-competidores .comp-panel h3,
#sub-desarrollo-competidores .comp-platform-head h4,
#sub-desarrollo-competidores .comp-chart-card h4 {
    margin: 0;
    color: #edf4ff;
    font-weight: 650;
    line-height: 1.12;
}

#sub-desarrollo-competidores .comp-directory-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

#sub-desarrollo-competidores .comp-directory-search,
#sub-desarrollo-competidores .comp-directory-select {
    display: flex;
    align-items: center;
    min-height: 52px;
    border: 1px solid rgba(71, 85, 105, 0.55);
    border-radius: 13px;
    background: rgba(8, 13, 25, 0.82);
    color: #98a7bd;
}

#sub-desarrollo-competidores .comp-directory-search {
    gap: 10px;
    padding: 0 14px;
}

#sub-desarrollo-competidores .comp-directory-select {
    gap: 8px;
    padding: 0 12px;
    border-color: rgba(34, 211, 238, 0.42);
}

#sub-desarrollo-competidores .comp-directory-search input,
#sub-desarrollo-competidores .comp-directory-select select {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #edf4ff;
    font: inherit;
}

#sub-desarrollo-competidores .comp-directory-select option {
    background: #0a1020;
    color: #e5edf8;
}

#sub-desarrollo-competidores .comp-benchmark-table-shell {
    min-height: 420px;
    max-height: min(64vh, 680px);
    overflow: auto;
    border: 1px solid rgba(56, 73, 107, 0.32);
    border-radius: 13px;
    background: rgba(7, 11, 22, 0.42);
    scrollbar-color: rgba(34, 211, 238, 0.58) rgba(8, 13, 25, 0.9);
    scrollbar-width: thin;
}

#sub-desarrollo-competidores .comp-benchmark-table {
    width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed;
    border-collapse: collapse;
    color: #dbe7f6;
}

#sub-desarrollo-competidores .comp-benchmark-table th:nth-child(1),
#sub-desarrollo-competidores .comp-benchmark-table td:nth-child(1) {
    width: 130px;
}

#sub-desarrollo-competidores .comp-benchmark-table th:nth-child(3),
#sub-desarrollo-competidores .comp-benchmark-table td:nth-child(3) {
    width: 170px;
}

#sub-desarrollo-competidores .comp-benchmark-table th:nth-child(4),
#sub-desarrollo-competidores .comp-benchmark-table td:nth-child(4) {
    width: 90px;
}

#sub-desarrollo-competidores .comp-benchmark-table th:nth-child(5),
#sub-desarrollo-competidores .comp-benchmark-table td:nth-child(5) {
    width: 150px;
}

#sub-desarrollo-competidores .comp-benchmark-table th:nth-child(6),
#sub-desarrollo-competidores .comp-benchmark-table td:nth-child(6) {
    width: 96px;
}

#sub-desarrollo-competidores .comp-benchmark-table th,
#sub-desarrollo-competidores .comp-benchmark-table td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    text-align: left;
    vertical-align: middle;
}

#sub-desarrollo-competidores .comp-benchmark-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #080d19;
    color: #aebbd0;
    font-size: 0.72rem;
    font-weight: 760;
    text-transform: uppercase;
}

#sub-desarrollo-competidores .comp-benchmark-row {
    cursor: pointer;
}

#sub-desarrollo-competidores .comp-benchmark-row:hover,
#sub-desarrollo-competidores .comp-benchmark-row.is-active {
    background: rgba(12, 48, 67, 0.42);
}

#sub-desarrollo-competidores .comp-benchmark-sku {
    width: 130px;
    color: #67e8f9;
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    font-weight: 760;
}

#sub-desarrollo-competidores .comp-benchmark-product strong,
#sub-desarrollo-competidores .comp-benchmark-product span {
    display: block;
    max-width: 620px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#sub-desarrollo-competidores .comp-benchmark-product strong {
    color: #f4f7fb;
    font-weight: 700;
}

#sub-desarrollo-competidores .comp-benchmark-product span {
    margin-top: 4px;
    color: #93a8c6;
    font-size: 0.8rem;
    font-weight: 500;
}

#sub-desarrollo-competidores .comp-chip--channel,
#sub-desarrollo-competidores .comp-benchmark-channels .comp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    margin: 2px 5px 2px 0;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 720;
}

#sub-desarrollo-competidores .comp-benchmark-actions {
    width: 88px;
    text-align: right;
    white-space: nowrap;
}

#sub-desarrollo-competidores .comp-row-open,
#sub-desarrollo-competidores .comp-delete-btn,
#sub-desarrollo-competidores .comp-matrix-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(56, 73, 107, 0.5);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.64);
    color: #b9c8dd;
}

#sub-desarrollo-competidores .comp-phase--create {
    display: grid;
    gap: 16px;
}

#sub-desarrollo-competidores .comp-panel--builder {
    max-width: 980px;
}

#sub-desarrollo-competidores .comp-search-form {
    display: grid !important;
    grid-template-columns: minmax(240px, 1.35fr) minmax(240px, 1fr) minmax(180px, 0.55fr);
    gap: 14px;
    align-items: end;
}

#sub-desarrollo-competidores .comp-action-grid,
#sub-desarrollo-competidores .comp-status {
    grid-column: 1 / -1;
}

#sub-desarrollo-competidores .comp-field input,
#sub-desarrollo-competidores .comp-field select,
#sub-desarrollo-competidores .comp-input-wrap {
    min-height: 48px;
    border-radius: 12px;
    background: rgba(8, 13, 25, 0.84);
}

#sub-desarrollo-competidores .comp-input-wrap,
#sub-desarrollo-competidores .comp-field input,
#sub-desarrollo-competidores .comp-field select {
    border: 1px solid rgba(71, 85, 105, 0.55);
    color: #edf4ff;
}

#sub-desarrollo-competidores .comp-analysis-topbar {
    margin-bottom: 10px;
}

#sub-desarrollo-competidores .comp-analysis-back {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #a8bdd8;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 680;
    cursor: pointer;
}

#sub-desarrollo-competidores .comp-analysis-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 44px;
    margin-bottom: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(56, 73, 107, 0.35);
}

#sub-desarrollo-competidores .comp-channel-tabs,
#sub-desarrollo-competidores .comp-view-tabs {
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    width: max-content;
    max-width: 100%;
    padding: 5px;
    border: 1px solid rgba(56, 73, 107, 0.45);
    border-radius: 13px;
    background: rgba(8, 13, 25, 0.78);
}

#sub-desarrollo-competidores .comp-channel-tabs {
    justify-self: start;
}

#sub-desarrollo-competidores #comp-cuadro-panel.is-pricing-view .comp-channel-tabs {
    display: none !important;
}

#sub-desarrollo-competidores .comp-view-tabs {
    justify-self: center;
}

#sub-desarrollo-competidores .comp-channel-tab,
#sub-desarrollo-competidores .comp-view-tab {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #98a7bd;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 720;
    cursor: pointer;
}

#sub-desarrollo-competidores .comp-channel-tab.is-active,
#sub-desarrollo-competidores .comp-view-tab.is-active {
    border-color: rgba(34, 211, 238, 0.58);
    background: rgba(8, 145, 178, 0.22);
    color: #d8fbff;
}

#sub-desarrollo-competidores .comp-cuadro-keyword {
    min-height: 0 !important;
    margin: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
}

/* Título del cuadro (nombre del producto · SKU). La especificidad
   (ID + 2 clases + elemento) supera a "#sub… .comp-panel h3", que pone
   margin:0 y dejaba el título pegado entre la barra Volver y las pestañas. */
#sub-desarrollo-competidores .comp-panel h3.comp-cuadro-title {
    margin: 4px 0 18px;
    padding: 0;
    border: 0;
    color: #f1f5f9;
    font-size: 1.12rem;
    font-weight: 740;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

#sub-desarrollo-competidores .comp-panel h3.comp-cuadro-title:empty {
    display: none;
}

#sub-desarrollo-competidores .comp-analysis-view {
    display: none;
}

#sub-desarrollo-competidores .comp-analysis-view.is-active {
    display: block;
}

#sub-desarrollo-competidores .comp-table-shell {
    height: clamp(620px, 72vh, 860px) !important;
    min-height: 620px !important;
    max-height: none !important;
    overflow: auto !important;
    border: 1px solid rgba(34, 211, 238, 0.28) !important;
    border-radius: 13px !important;
    background: rgba(7, 11, 22, 0.64) !important;
    overscroll-behavior-x: contain;
    scrollbar-color: rgba(34, 211, 238, 0.58) rgba(8, 13, 25, 0.9);
    scrollbar-width: thin;
}

#sub-desarrollo-competidores .comp-unified-matrix {
    --comp-matrix-label-width: 170px !important;
    --comp-matrix-col-width: 212px !important;
    width: max-content;
    min-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.84rem;
}

#sub-desarrollo-competidores .comp-unified-matrix th,
#sub-desarrollo-competidores .comp-unified-matrix td {
    width: var(--comp-matrix-col-width);
    min-width: var(--comp-matrix-col-width);
    max-width: var(--comp-matrix-col-width);
    padding: 11px 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    color: #d8e2f0;
}

#sub-desarrollo-competidores .comp-unified-matrix th:first-child,
#sub-desarrollo-competidores .comp-unified-matrix td:first-child {
    width: var(--comp-matrix-label-width);
    min-width: var(--comp-matrix-label-width);
    max-width: var(--comp-matrix-label-width);
    position: sticky;
    left: 0;
    z-index: 6;
    background: #080d19;
    color: #aebbd0;
    font-size: 0.72rem;
    font-weight: 760;
    text-transform: uppercase;
}

#sub-desarrollo-competidores .comp-unified-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 8;
    height: 76px;
    min-height: 76px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #080d19;
    vertical-align: top;
}

#sub-desarrollo-competidores .comp-unified-matrix thead th:first-child {
    z-index: 10;
}

#sub-desarrollo-competidores .comp-matrix-product-head {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    min-height: 52px;
}

#sub-desarrollo-competidores .comp-matrix-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(34, 211, 238, 0.62);
    border-radius: 9px;
    color: #22d3ee;
    font-size: 0.78rem;
    font-weight: 760;
}

#sub-desarrollo-competidores .comp-matrix-product-link,
#sub-desarrollo-competidores .comp-matrix-product-title {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

#sub-desarrollo-competidores .comp-matrix-product-link {
    border: 0;
    background: transparent;
    color: #f5f8ff;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 720;
    line-height: 1.12;
    text-align: left;
    text-decoration: none !important;
    white-space: nowrap;
}

#sub-desarrollo-competidores .comp-matrix-product-title {
    margin-top: 3px;
    color: #8fa0b8;
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.12;
    white-space: nowrap;
}

#sub-desarrollo-competidores .comp-matrix-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

#sub-desarrollo-competidores .comp-unified-matrix td.is-own,
#sub-desarrollo-competidores .comp-unified-matrix th.is-own {
    background: rgba(8, 58, 73, 0.56);
}

#sub-desarrollo-competidores .comp-unified-matrix .comp-matrix-row-num td:not(:first-child),
#sub-desarrollo-competidores .comp-matrix-row-price td:not(:first-child),
#sub-desarrollo-competidores .comp-matrix-row-ingredient td:not(:first-child) {
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    font-weight: 650;
    text-align: center;
}

#sub-desarrollo-competidores .comp-matrix-row-ingredient {
    display: none;
}

#sub-desarrollo-competidores .comp-unified-matrix.comp-matrix-formula-open .comp-matrix-row-ingredient {
    display: table-row;
}

#sub-desarrollo-competidores .comp-matrix-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

#sub-desarrollo-competidores .comp-platform-pricing {
    border: 1px solid rgba(34, 211, 238, 0.28);
    border-radius: 14px;
    background: rgba(8, 18, 28, 0.78);
    padding: 18px;
}

#sub-desarrollo-competidores .comp-platform-head p,
#sub-desarrollo-competidores .comp-platform-meta,
#sub-desarrollo-competidores .comp-platform-card-head [data-comp-platform="price"],
#sub-desarrollo-competidores .comp-platform-card-body > div:nth-child(n+3) {
    display: none !important;
}

#sub-desarrollo-competidores .comp-platform-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(480px, 1.1fr);
    gap: 14px;
    align-items: start;
}

#sub-desarrollo-competidores .comp-platform-editor {
    border: 1px solid rgba(56, 73, 107, 0.35);
    border-radius: 13px;
    background: rgba(7, 11, 22, 0.42);
    padding: 14px;
}

#sub-desarrollo-competidores .comp-platform-operational,
#sub-desarrollo-competidores .comp-platform-price-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#sub-desarrollo-competidores .comp-platform-price-grid {
    margin-top: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

#sub-desarrollo-competidores .comp-platform-list-price-field {
    border-color: rgba(250, 204, 21, 0.28);
    background: rgba(22, 18, 8, 0.28);
}

#sub-desarrollo-competidores .comp-platform-list-price-field span {
    color: #facc15;
}

#sub-desarrollo-competidores .comp-platform-list-price-field input.is-saved {
    border-color: rgba(34, 197, 94, 0.72);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}

#sub-desarrollo-competidores .comp-platform-list-price-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

#sub-desarrollo-competidores .comp-platform-list-price-control input {
    width: 100%;
}

#sub-desarrollo-competidores .comp-platform-save-list-btn {
    min-height: 38px;
    border: 1px solid rgba(250, 204, 21, 0.32);
    border-radius: 11px;
    background: rgba(250, 204, 21, 0.08);
    color: #facc15;
    font-size: 0.78rem;
    font-weight: 760;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

#sub-desarrollo-competidores .comp-platform-save-list-btn.is-dirty {
    border-color: rgba(250, 204, 21, 0.68);
    background: rgba(250, 204, 21, 0.15);
}

#sub-desarrollo-competidores .comp-platform-save-list-btn:hover:not(:disabled) {
    background: rgba(250, 204, 21, 0.2);
}

#sub-desarrollo-competidores .comp-platform-save-list-btn:disabled {
    cursor: default;
    opacity: 0.48;
}

#sub-desarrollo-competidores .comp-platform-grid,
#sub-desarrollo-competidores .comp-charts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

#sub-desarrollo-competidores .comp-charts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#sub-desarrollo-competidores .comp-chart-card {
    min-height: 300px;
    border: 1px solid rgba(56, 73, 107, 0.42);
    border-radius: 14px;
    background: rgba(16, 24, 39, 0.78);
    padding: 16px;
}

#sub-desarrollo-competidores .comp-chart-card header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

#sub-desarrollo-competidores .comp-chart-body {
    display: grid;
    gap: 10px;
}

#sub-desarrollo-competidores .comp-chart-row {
    display: grid;
    grid-template-columns: minmax(118px, 0.52fr) minmax(140px, 1fr) minmax(78px, auto);
    align-items: center;
    gap: 10px;
}

#sub-desarrollo-competidores .comp-chart-label {
    min-width: 0;
    overflow: hidden;
    color: #9baabd;
    font-size: 0.78rem;
    font-weight: 680;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#sub-desarrollo-competidores .comp-chart-track {
    height: 22px;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(56, 73, 107, 0.28);
}

#sub-desarrollo-competidores .comp-chart-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.95), rgba(34, 197, 94, 0.86));
}

#sub-desarrollo-competidores .comp-chart-row:not(.is-own) .comp-chart-fill {
    background: linear-gradient(90deg, rgba(71, 85, 105, 0.95), rgba(100, 116, 139, 0.88));
}

#sub-desarrollo-competidores .comp-chart-row strong {
    color: #e5edf8;
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    font-size: 0.78rem;
    font-weight: 760;
    white-space: nowrap;
}

#sub-desarrollo-competidores .comp-advanced-panel {
    margin-top: 16px;
    border: 1px solid rgba(56, 73, 107, 0.35);
    border-radius: 14px;
    background: rgba(16, 24, 39, 0.54);
}

@media (max-width: 1180px) {
    #sub-desarrollo-competidores .comp-directory-filters,
    #sub-desarrollo-competidores .comp-search-form,
    #sub-desarrollo-competidores .comp-platform-layout,
    #sub-desarrollo-competidores .comp-charts-grid,
    #sub-desarrollo-competidores .comp-platform-grid,
    #sub-desarrollo-competidores .comp-platform-price-grid,
    #sub-desarrollo-competidores .comp-platform-operational {
        grid-template-columns: 1fr;
    }
}

#sub-desarrollo-competidores .comp-platform-card-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 34px;
    margin: 0 16px 12px;
    padding: 8px 0 0;
    border-top: 1px solid rgba(56, 73, 107, 0.24);
    color: #9aacbf;
    font-size: 0.76rem;
    font-weight: 700;
}

#sub-desarrollo-competidores .comp-platform-card-controls label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

#sub-desarrollo-competidores .comp-groups-list.comp-benchmark-table-shell {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    padding-right: 0 !important;
}

/* Compacta la matriz para mostrar mas competidores visibles por pantalla. */
#sub-desarrollo-competidores .comp-unified-matrix {
    --comp-matrix-label-width: 128px !important;
    --comp-matrix-col-width: 150px !important;
    font-size: 0.76rem !important;
}

#sub-desarrollo-competidores .comp-unified-matrix th,
#sub-desarrollo-competidores .comp-unified-matrix td {
    padding: 8px 9px !important;
}

#sub-desarrollo-competidores .comp-unified-matrix th:first-child,
#sub-desarrollo-competidores .comp-unified-matrix td:first-child {
    font-size: 0.66rem !important;
}

#sub-desarrollo-competidores .comp-unified-matrix thead th {
    height: 62px !important;
    min-height: 62px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

#sub-desarrollo-competidores .comp-matrix-product-head {
    grid-template-columns: 24px minmax(0, 1fr) !important;
    gap: 7px !important;
    min-height: 44px !important;
}

#sub-desarrollo-competidores .comp-matrix-rank {
    width: 23px !important;
    height: 23px !important;
    border-radius: 8px !important;
    font-size: 0.68rem !important;
}

#sub-desarrollo-competidores .comp-matrix-product-link {
    font-size: 0.72rem !important;
    line-height: 1.08 !important;
}

#sub-desarrollo-competidores .comp-matrix-product-title {
    margin-top: 2px !important;
    font-size: 0.64rem !important;
    line-height: 1.08 !important;
}

#sub-desarrollo-competidores .comp-matrix-score {
    min-width: 34px !important;
    min-height: 26px !important;
    border-radius: 9px !important;
    font-size: 0.76rem !important;
}

#sub-desarrollo-competidores .comp-matrix-icon-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
}

#sub-desarrollo-competidores .comp-matrix-icon-btn .material-symbols-outlined {
    font-size: 17px !important;
}

/* ============================================================
   Adaptación del cuadro de competidores al look de la comparativa
   del wizard "Nuevo Producto": matriz más compacta, acentos cian
   para el ranking y verde-teal para nuestra columna, celdas
   editables con subrayado punteado. Se conservan las acciones
   (actualizar / ocultar / eliminar / imágenes) del cuadro.
   Reglas al final del archivo → ganan la cascada sobre las previas.
   ============================================================ */
.comp-unified-matrix {
    font-size: 0.76rem;
}

.comp-unified-matrix th,
.comp-unified-matrix td {
    padding: 8px 11px;
    border-bottom: 1px solid rgba(56, 73, 107, 0.28);
    color: #dbe7fb;
}

/* Primera columna (etiquetas de fila) — gris azulado del wizard */
.comp-unified-matrix th:first-child,
.comp-unified-matrix td:first-child {
    background: rgba(10, 16, 29, 0.94);
    color: #9fb0cc;
    font-size: 0.68rem;
}

/* Encabezado de columnas — mismo fondo sobrio del wizard */
.comp-unified-matrix thead th {
    background: rgba(10, 16, 29, 0.94);
}

/* Nuestra columna (Salud & Vida) — verde-teal como en el wizard */
.comp-unified-matrix td.is-own,
.comp-unified-matrix th.is-own {
    background: rgba(10, 69, 82, 0.24);
}

/* Badge de posición — cian claro, borde tenue, como el wizard */
.comp-matrix-rank {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(34, 211, 238, 0.34);
    border-radius: 7px;
    background: transparent;
    color: #22d3ee;
    font-size: 0.66rem;
    font-weight: 650;
}

/* Nombre del producto — tamaño del wizard */
.comp-matrix-product-link {
    font-size: 0.72rem;
}

.comp-matrix-product-title {
    font-size: 0.68rem;
}

/* Celdas editables (Presentación, etc.) — subrayado punteado como el wizard */
.comp-matrix-edit-cell {
    padding: 1px 4px;
    border-radius: 4px;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.4);
    transition: background 0.12s, border-color 0.12s;
}

.comp-matrix-edit-cell:hover {
    background: rgba(148, 163, 184, 0.12);
    border-bottom-color: rgba(148, 163, 184, 0.7);
    color: #dbe7fb;
}

/* Precio de lista editable en la columna propia de la matriz */
.comp-matrix-list-price-editor {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    max-width: 100%;
}

.comp-matrix-list-price-prefix {
    color: var(--pv-accent-cyan);
    font-weight: 800;
}

.comp-matrix-list-price-input {
    width: 76px;
    min-width: 0;
    padding: 4px 5px;
    border: 1px solid rgba(34, 211, 238, 0.34);
    border-radius: var(--pv-input-radius);
    background: rgba(10, 14, 26, 0.72);
    color: var(--pv-accent-cyan);
    font: inherit;
    font-weight: 800;
    text-align: right;
}

.comp-matrix-list-price-input:focus {
    border-color: var(--pv-accent-cyan);
    outline: 2px solid rgba(34, 211, 238, 0.2);
    outline-offset: 1px;
}

.comp-matrix-list-price-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid rgba(34, 211, 238, 0.32);
    border-radius: 7px;
    background: rgba(8, 145, 178, 0.12);
    color: var(--pv-accent-cyan);
    cursor: pointer;
}

.comp-matrix-list-price-save:hover,
.comp-matrix-list-price-save:focus-visible {
    border-color: var(--pv-accent-cyan);
    background: rgba(8, 145, 178, 0.24);
}

.comp-matrix-list-price-save:disabled {
    cursor: wait;
    opacity: 0.6;
}

.comp-matrix-list-price-save .material-symbols-outlined {
    font-size: 15px;
}

/* Directorio de comparativas centrado en productos propios. */
.comp-directory-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.comp-directory-kpi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 68px;
    padding: 13px 16px;
    border: 1px solid var(--comp-line);
    border-radius: 13px;
    background: var(--comp-panel);
}

.comp-directory-kpi span {
    color: var(--comp-muted);
    font-size: 0.76rem;
    font-weight: 650;
}

.comp-directory-kpi strong {
    color: var(--comp-cyan);
    font-size: 1.12rem;
    font-weight: 780;
}

.comp-directory-select--compact {
    flex: 0 0 172px;
    min-width: 0;
}

.comp-own-status,
.comp-analysis-pending {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border: 1px solid var(--comp-line);
    border-radius: 999px;
    color: var(--comp-muted);
    font-size: 0.72rem;
    font-weight: 720;
    white-space: nowrap;
}

.comp-own-status--desarrollo {
    border-color: color-mix(in srgb, var(--comp-amber) 40%, transparent);
    background: color-mix(in srgb, var(--comp-amber) 10%, transparent);
    color: var(--comp-amber);
}

.comp-own-status--activo {
    border-color: color-mix(in srgb, var(--comp-green) 38%, transparent);
    background: color-mix(in srgb, var(--comp-green) 9%, transparent);
    color: var(--comp-green);
}

.comp-analysis-pending {
    border-style: dashed;
    color: var(--comp-faint);
}

.comp-row-develop,
.comp-row-continue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    border: 1px solid var(--comp-line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--comp-panel-deep) 76%, transparent);
    color: var(--comp-muted);
    cursor: pointer;
}

.comp-row-develop {
    width: 36px;
    padding: 0;
}

.comp-row-continue {
    padding: 0 11px;
    border-color: color-mix(in srgb, var(--comp-cyan) 34%, transparent);
    color: var(--comp-cyan);
    font-size: 0.72rem;
    font-weight: 740;
}

.comp-row-develop:hover,
.comp-row-continue:hover {
    border-color: var(--comp-cyan);
    color: var(--comp-text);
}

.comp-row-develop .material-symbols-outlined,
.comp-row-continue .material-symbols-outlined {
    font-size: 18px;
}

#sub-desarrollo-competidores .comp-own-products-table {
    min-width: 1120px !important;
    table-layout: fixed;
}

#sub-desarrollo-competidores .comp-own-products-table th:nth-child(1),
#sub-desarrollo-competidores .comp-own-products-table td:nth-child(1) { width: 126px; }

#sub-desarrollo-competidores .comp-own-products-table th:nth-child(2),
#sub-desarrollo-competidores .comp-own-products-table td:nth-child(2) { width: auto; }

#sub-desarrollo-competidores .comp-own-products-table th:nth-child(3),
#sub-desarrollo-competidores .comp-own-products-table td:nth-child(3) { width: 136px; }

#sub-desarrollo-competidores .comp-own-products-table th:nth-child(4),
#sub-desarrollo-competidores .comp-own-products-table td:nth-child(4) { width: 190px; }

#sub-desarrollo-competidores .comp-own-products-table th:nth-child(5),
#sub-desarrollo-competidores .comp-own-products-table td:nth-child(5) { width: 78px; }

#sub-desarrollo-competidores .comp-own-products-table th:nth-child(6),
#sub-desarrollo-competidores .comp-own-products-table td:nth-child(6) { width: 132px; }

#sub-desarrollo-competidores .comp-own-products-table th:nth-child(7),
#sub-desarrollo-competidores .comp-own-products-table td:nth-child(7) { width: 178px; }

#sub-desarrollo-competidores .comp-own-products-table .comp-benchmark-actions {
    width: 178px;
}

@media (max-width: 1100px) {
    .comp-directory-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .comp-directory-kpis {
        grid-template-columns: 1fr;
    }
}