/* =============================================================================
   Search Page — pages/search
   Figma: 998:26529 (Companies listing)
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Layout root
   overflow-x: clip on search-page so full-bleed bar section doesn't cause
   horizontal scroll (clip does not create a scroll container unlike hidden)
   --------------------------------------------------------------------------- */
/* overflow-x: clip on alphinus-main prevents horizontal scroll
   from full-bleed sections (bar-section, query-tab) without creating
   a scroll container (unlike overflow: hidden) */
body:has(.search-page) {
    background: #F9FAFB;
}

body:has(.search-page) .alphinus-main {
    overflow-x: clip;
}

.search-page {
    background: #F9FAFB;
    min-height: calc(100vh - var(--skin-header-height));
}

/* ---------------------------------------------------------------------------
   Bar section — bg #F9FAFB, full-bleed
   Figma: Frame 23426 1440px, bg #F9FAFB
   Full-bleed: width 100vw, centered via left+transform trick
   layout_KO71MM: column, gap 20px, padding 8px 0
   --------------------------------------------------------------------------- */
.search-page__bar-section {
    background: #F9FAFB;
    padding: 8px 0;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* layout_GWXJKM: column, alignItems stretch, padding 32px 80px
   Full-bleed inner: max-width 1440px centered in 100vw with 80px padding
   gives 1280px of content, matching the Figma layout */
.search-page__bar-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 80px;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* override: when bar-inner is inside the alphinus-container (1280px wide),
   the full-bleed bar-section makes bar-inner escape to 100vw context,
   so 80px padding on both sides of 1440px max = correct visual alignment */

/* ---------------------------------------------------------------------------
   Breadcrumb — Inter 14px w=400 var(--skin-text-muted)
   --------------------------------------------------------------------------- */
.search-page__breadcrumb {
    display: flex;
    align-items: center;
    gap: 0;
    font-family: var(--skin-font-base);
    font-size: var(--skin-text-sm);   /* 14px */
    line-height: 17px;
    color: var(--skin-text-muted);    /* var(--skin-text-muted) */
}

.search-page__breadcrumb-item {
    color: var(--skin-text-muted);
    text-decoration: none;
}

.search-page__breadcrumb-item:hover {
    color: var(--skin-darkblue-500);
    text-decoration: underline;
}

.search-page__breadcrumb-sep {
    margin: 0 6px;
    color: var(--skin-text-muted);
}

.search-page__breadcrumb-current {
    color: var(--skin-dark-900);      /* var(--skin-dark-900) — last item is semibold */
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Search container — bg #FFF, border-radius 12px, padding 14px 12px
   Figma: layout_U7DKSS: column, padding 14px 12px, height 80px, shadow-sm
   Shadows/shadow-sm: 0px 1px 4px 1px rgba(10,13,18,0.1), 0px 1px 7px 0px rgba(10,13,18,0.1)
   --------------------------------------------------------------------------- */
.search-page__search-container {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 14px 12px;
    box-shadow: 0px 1px 4px 1px rgba(10, 13, 18, 0.10), 0px 1px 7px 0px rgba(10, 13, 18, 0.10);
    min-height: 80px;
    display: flex;
    align-items: stretch;
}

.search-page__search-wrap {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
}

/* ---------------------------------------------------------------------------
   Input row — flex, input takes remaining space
   --------------------------------------------------------------------------- */
.search-page__input-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    align-self: center;
}

.search-page__input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    position: relative;
}

.search-page__input-icon {
    flex-shrink: 0;
    color: #B9BED6;
    width: 24px;
    height: 24px;
}

/* Figma: Placeholder Text 141x24 Inter 20px w=400 lh=24 var(--skin-dark-900) */
.search-page__input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--skin-font-base);
    font-size: 20px;                    /* Figma: 20px — exact */
    font-weight: 400;
    line-height: 24px;
    color: var(--skin-dark-900);        /* var(--skin-dark-900) */
    padding: 0;
}

.search-page__input::placeholder {
    color: #B9BED6;
}

.search-page__input-clear {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--skin-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
}

.search-page__input-clear:hover {
    color: var(--skin-dark-900);
    background: var(--skin-darkblue-50);
}

/* Figma: Button bg var(--skin-darkblue-500), text 14px w=600 var(--skin-white-500), radius 12px, pad 12/24 */
.search-page__search-btn {
    align-self: stretch;
    padding: 0 24px;   /* Figma: pad=12/24/12/24 */
    border: none;
    border-radius: 12px;   /* Figma: r=12px */
    background: var(--skin-darkblue-500);   /* var(--skin-darkblue-500) */
    color: var(--skin-white-500);
    font-family: var(--skin-font-base);
    font-size: var(--skin-text-sm);          /* 14px */
    font-weight: 600;
    line-height: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: background 0.15s;
    flex-shrink: 0;
}

.search-page__search-btn:hover {
    background: var(--skin-darkblue-600);
}

.search-page__search-btn svg {
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Query label "Tab" — Figma layout_3LI7U6: column, gap 12px, padding 6px 8px 6px 80px
   "Search results in Infoempresa for:" Inter 20px/400 #44546F
   + query: Inter 20px/600 var(--skin-darkblue-500)
   --------------------------------------------------------------------------- */
.search-page__query-tab {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--skin-border-subtle-strong);
}

.search-page__query-tab-text,
.search-page__query-tab-label {
    display: block;
    font-family: var(--skin-font-base);
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    color: #44546F;
    margin: 0;
}

.search-page__query-tab-query {
    display: block;
    font-weight: 600;
    color: var(--skin-darkblue-500);
    font-size: 20px;
    line-height: 24px;
}

/* ---------------------------------------------------------------------------
   Body — 2 columns: sidebar + main
   Figma layout_B315WV: column, gap 56px, padding 32px 80px 56px
   layout_4POET4: row, gap 32px
   Note: alphinus-container padding is 24px; body padding compensates so
   visual padding from viewport edge = 80px (56px body + 24px container = 80px)
   --------------------------------------------------------------------------- */
.search-page__body {
    margin-left: calc(-1 * var(--skin-container-pad));
    margin-right: calc(-1 * var(--skin-container-pad));
    padding: 32px calc(80px - var(--skin-container-pad)) 56px;
    box-sizing: border-box;
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

/* layout_PTRQIC: column, gap 12px, width 256px */
.search-page__sidebar {
    width: 256px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* layout_4ZOSJI: column, gap 20px, width 939px */
.search-page__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ---------------------------------------------------------------------------
   Filter cards
   --------------------------------------------------------------------------- */
.search-page__filter-card {
    background: #ffffff;
    border: 1px solid var(--skin-white-500);
    border-radius: 12px;
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
    overflow: hidden;
    margin-bottom: 12px;
}

.search-page__filter-card:last-child {
    margin-bottom: 0;
}

.search-page__filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--skin-white-500);
}

.search-page__filter-title {
    font-family: var(--skin-font-base);
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color: var(--skin-text-muted);
}

.search-page__filter-clear-btn {
    border: none;
    background: transparent;
    font-family: var(--skin-font-base);
    font-size: 14px;
    font-weight: 500;
    color: var(--skin-darkblue-500);
    cursor: pointer;
    padding: 0;
    line-height: 17px;
}

.search-page__filter-clear-btn:hover {
    text-decoration: underline;
}

.search-page__filter-body {
    padding: 12px 0;
}

.search-page__filter-body--scrollable {
    max-height: 280px;
    overflow-y: auto;
}

.search-page__filter-body--slider {
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---------------------------------------------------------------------------
   Checkbox items
   --------------------------------------------------------------------------- */
.search-page__checkbox-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
    cursor: pointer;
    gap: 8px;
}

.search-page__checkbox-item:hover {
    background: #FAFAFA;
}

.search-page__checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    border: 1.5px solid #8590A2;
    border-radius: 3px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #0C66E4;
}

.search-page__checkbox-label {
    font-family: var(--skin-font-base);
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    color: var(--skin-dark-900);
    flex: 1;
}

/* Figma: inter/Caption/Regular — 12px var(--skin-text-muted), right-aligned */
.search-page__filter-count {
    font-family: var(--skin-font-base);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: var(--skin-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Dual range slider
   --------------------------------------------------------------------------- */
.search-page__slider-labels {
    display: flex;
    justify-content: space-between;
    font-family: var(--skin-font-base);
    font-size: 14px;
    color: var(--skin-text-muted);
}

.search-page__slider-wrap {
    position: relative;
    height: 20px;
    display: flex;
    align-items: center;
}

.search-page__slider-wrap::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    background: #E4E8EF;
    border-radius: 3px;
    pointer-events: none;
    z-index: 0;
}

.search-page__slider {
    position: absolute;
    width: 100%;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
    height: 20px;
    background: transparent;
    outline: none;
    top: 0;
    left: 0;
    margin: 0;
}

.search-page__slider::-webkit-slider-thumb {
    pointer-events: all;
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--skin-darkblue-500);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.search-page__slider::-moz-range-thumb {
    pointer-events: all;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--skin-darkblue-500);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.search-page__slider:focus {
    z-index: 3;
}

/* Track styling */
.search-page__slider::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent;
    border-radius: 3px;
}

.search-page__slider::-moz-range-track {
    height: 6px;
    background: transparent;
    border-radius: 3px;
}

.search-page__slider-selected {
    font-family: var(--skin-font-base);
    font-size: 14px;
    color: var(--skin-text-muted);
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Active filters badges
   --------------------------------------------------------------------------- */
.search-page__active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0;
}

.search-page__active-filters-label {
    font-family: var(--skin-font-base);
    font-size: 14px;
    color: var(--skin-text-muted);
    white-space: nowrap;
}

.search-page__filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #F0FDF4;
    color: #00A63E;
    border-radius: 20px;
    font-family: var(--skin-font-base);
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
}

.search-page__filter-badge-remove {
    border: none;
    background: transparent;
    cursor: pointer;
    color: #00A63E;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.search-page__clear-all-btn {
    border: none;
    background: transparent;
    font-family: var(--skin-font-base);
    font-size: 12px;
    color: var(--skin-darkblue-500);
    cursor: pointer;
    padding: 0;
}

.search-page__clear-all-btn:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Results header — count + type tabs
   --------------------------------------------------------------------------- */
.search-page__results-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.search-page__results-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Figma: Inter 16px w=400 lh=20 var(--skin-text-muted) */
.search-page__results-count {
    font-family: var(--skin-font-base);
    font-size: var(--skin-text-md);     /* 16px */
    font-weight: 400;
    line-height: 20px;
    color: var(--skin-text-muted);      /* var(--skin-text-muted) */
}

/* ---------------------------------------------------------------------------
   Result type tabs — Figma: Tabs component
   Active: Inter 16-20px w=600 color var(--skin-darkblue-500), with bottom border
   Inactive: Inter 16px w=400 color #44546F
   Tab height: 32px, padding: 6/8
   --------------------------------------------------------------------------- */
.search-page__result-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid var(--skin-border-default);
}

/* Figma: Tab inactive → Inter 16px w=400 #44546F (= Figma rgb(68,84,111)) */
.search-page__result-tab {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 40px;
    padding: 0 16px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-family: var(--skin-font-base);
    font-size: var(--skin-text-md);     /* 16px */
    font-weight: 400;
    line-height: 20px;
    color: #44546F;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
}

.search-page__result-tab.is-active {
    color: var(--skin-darkblue-500);    /* var(--skin-darkblue-500) */
    font-weight: 600;
    border-bottom-color: var(--skin-darkblue-500);
}

.search-page__result-tab:not(.is-active):hover {
    color: var(--skin-darkblue-500);
}

.search-page__result-tab-count {
    font-weight: 400;
    color: inherit;
}

/* ---------------------------------------------------------------------------
   Loading state
   --------------------------------------------------------------------------- */
.search-page__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 64px 0;
    color: var(--skin-text-muted);
    font-family: var(--skin-font-base);
    font-size: var(--skin-text-md);
}

.search-page__loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--skin-darkblue-50);
    border-top-color: var(--skin-darkblue-500);
    border-radius: 50%;
    animation: search-spin 0.7s linear infinite;
}

@keyframes search-spin {
    to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------
   Empty state (initial) — Figma: 1604:105970
   --------------------------------------------------------------------------- */
.search-page__empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 56px 0 16px;
    text-align: center;
}

.search-page__no-results-img {
    flex-shrink: 0;
    width: 180px;
    height: auto;
}

.search-page__no-results-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.search-page__empty-title {
    font-family: var(--skin-font-base);
    font-size: 28px;
    font-weight: 600;
    line-height: 34px;
    color: var(--skin-dark-900);
    margin: 0;
}

.search-page__empty-desc {
    font-family: var(--skin-font-base);
    font-size: 16px;
    font-weight: 400;
    color: var(--skin-text-muted);
    margin: 0;
    max-width: 480px;
}

/* ---------------------------------------------------------------------------
   No results state — Figma: 1604:105970
   layout_RR3D18: column, alignItems center, gap 56px
   --------------------------------------------------------------------------- */
.search-page__no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
    padding: 80px;
    width: 100%;
    box-sizing: border-box;
}

.search-page__no-results-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 618px;
    text-align: center;
}

.search-page__no-results-title {
    font-family: var(--skin-font-base);
    font-size: 28px;
    font-weight: 600;
    line-height: 34px;
    color: var(--skin-dark-900);
    margin: 0;
}

.search-page__no-results-desc {
    font-family: var(--skin-font-base);
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    color: var(--skin-text-muted);
    margin: 0;
}

.search-page__no-results-suggestions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 0 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    width: 100%;
    max-width: 618px;
}

.search-page__no-results-suggestions-label {
    font-family: var(--skin-font-base);
    font-size: 16px;
    font-weight: 700;
    color: var(--skin-text-muted);
    margin: 0;
}

.search-page__no-results-pills {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.search-page__no-results-pill {
    border: none;
    background: #F3F3F3;
    border-radius: 6px;
    padding: 8px 12px;
    font-family: var(--skin-font-base);
    font-size: 14px;
    font-weight: 500;
    color: var(--skin-dark-900);
    cursor: pointer;
    transition: background 0.15s;
}

.search-page__no-results-pill:hover {
    background: #E9EAF2;
}

/* ---------------------------------------------------------------------------
   Companies list
   Figma layout_TSPIMZ: column, gap 16px, alignItems stretch
   --------------------------------------------------------------------------- */
.search-page__companies-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Figma layout_0JHHZF: row, justifyContent space-between, alignItems center,
   padding 12px 24px, fill_8QOP56=#FFF, strokes fill_YH6UO0=var(--skin-white-500) 1px,
   Shadows/shadow-xs, borderRadius 16px */
.search-page__company-card {
    background: #FFFFFF;
    border: 1px solid var(--skin-white-500);
    border-radius: 16px;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    transition: background 0.15s;
}

.search-page__company-card:hover {
    background: #FAFAFA;
}

.search-page__company-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.search-page__company-name-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Figma: Telecoming SA 169x29 Manrope 24px w=600 lh=29 var(--skin-dark-900) */
.search-page__company-name {
    font-family: var(--skin-font-display);   /* Manrope */
    font-size: var(--skin-text-2xl);         /* 24px */
    font-weight: 600;
    line-height: 29px;
    color: var(--skin-dark-900);             /* var(--skin-dark-900) */
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Figma: Status badge "Active" Inter 14px w=400 #00A63E (rgb(0,166,62)) */
.search-page__company-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--skin-radius-round);
    font-family: var(--skin-font-base);
    font-size: var(--skin-text-sm);     /* 14px */
    font-weight: 400;
    line-height: 17px;
    white-space: nowrap;
}

/* Figma Badge Color=Success */
.search-page__company-status--active {
    color: #00A63E;
    background: #F0FDF4;
}

/* Figma Badge Color=Error */
.search-page__company-status--extinguida {
    color: #B42318;
    background: #FEF3F2;
}

/* Figma Badge Color=Gray */
.search-page__company-status--inactiva {
    color: #414651;
    background: var(--skin-white-500);
}

/* Figma: Meta items Inter 14px w=400 var(--skin-text-muted) — each item is icon + text row */
.search-page__company-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.search-page__company-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--skin-font-base);
    font-size: var(--skin-text-sm);     /* 14px */
    font-weight: 400;
    line-height: 17px;
    color: var(--skin-text-muted);      /* var(--skin-text-muted) */
}

.search-page__company-meta-item svg {
    flex-shrink: 0;
    color: var(--skin-text-muted);
}

/* Figma layout_Z7N9AE: column, gap 8px
   Contains: financial row (revenue + change) on top, button below
   align-items: center so financial row centers over the button */
.search-page__company-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Figma layout_KW25WB: row, gap 8px — revenue + change side by side */
.search-page__company-financial {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Figma inter/body M/semibold (312:2633): Inter 16px w=600 lh=20 var(--skin-dark-900) */
.search-page__company-revenue {
    font-family: var(--skin-font-base);
    font-size: var(--skin-text-md);     /* 16px */
    font-weight: 600;
    line-height: 20px;
    color: var(--skin-dark-900);
    white-space: nowrap;
}

/* Figma: "40%" Inter 14px w=500 lh=20 #00A63E */
.search-page__company-revenue-change {
    display: flex;
    align-items: center;
    gap: 2px;
    font-family: var(--skin-font-base);
    font-size: var(--skin-text-sm);
    font-weight: 500;
    line-height: 20px;
    color: #00A63E;
}

.search-page__company-arrow.is-up {
    color: #00A63E;
}

.search-page__company-arrow.is-down {
    color: var(--skin-error-500, #c92519);
    transform: rotate(180deg);
}

/* Figma layout_FAV7OK: row, center, gap 8px, padding 12px 24px, radius 12px, bg var(--skin-darkblue-500) */
/* Text: inter/body s/semibold (312:2637) → Inter 14px w=600 var(--skin-white-500) */
.search-page__company-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 12px;
    background: var(--skin-darkblue-500);
    color: var(--skin-white-500);
    font-family: var(--skin-font-base);
    font-size: var(--skin-text-sm);      /* 14px */
    font-weight: 600;
    line-height: 17px;
    text-decoration: none;
    transition: background 0.15s;
    white-space: nowrap;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
}

.search-page__company-btn:hover {
    background: var(--skin-darkblue-600);
    color: var(--skin-white-500);
}

/* ---------------------------------------------------------------------------
   Directors list
   Figma 852:22544 — Table with columns: Name, Companies, Position
   table-Header Manrope 16px w=600 lh=26 var(--skin-darkblue-500)
   Table-Cell Inter 14px w=400 lh=17 var(--skin-dark-900)
   --------------------------------------------------------------------------- */
/* Figma 852:20050 — Directors table: 4 cols Director | Nº Positions | Companies | Action */
.search-page__directors-list {
    background: #FFFFFF;
    border: 1px solid var(--skin-border-default);
    border-radius: 12px;
    overflow: hidden;
}

/* Header: mismo bg blanco que las filas, borde inferior 2px */
.search-page__directors-table-header {
    display: grid;
    grid-template-columns: 1fr 140px 140px 140px;
    background: #FFFFFF;
    border-bottom: 2px solid rgba(9, 30, 66, 0.14);
}

/* Figma: inter/body L/semibold — Inter 20px SemiBold var(--skin-darkblue-500), padding 8px 24px, height 60px */
.search-page__directors-col {
    padding: 8px 24px;
    font-family: var(--skin-font-base);
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    color: var(--skin-darkblue-500);
    display: flex;
    align-items: center;
    min-height: 60px;
    text-transform: capitalize;
}

/* Filas: grid 4 cols, borde inferior 1px */
.search-page__director-card {
    display: grid;
    grid-template-columns: 1fr 140px 140px 140px;
    align-items: center;
    border-bottom: 1px solid rgba(9, 30, 66, 0.14);
    transition: background 0.15s;
    min-height: 60px;
}

.search-page__director-card:last-child {
    border-bottom: none;
}

.search-page__director-card:hover {
    background: #FAFAFA;
}

.search-page__director-name-col {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 24px;
}

.search-page__director-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--skin-darkblue-50);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--skin-darkblue-400);
    flex-shrink: 0;
}

/* Figma: inter/body s/Regular — Inter 14px Regular var(--skin-dark-900) */
.search-page__director-name {
    font-family: var(--skin-font-base);
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: var(--skin-dark-900);
}

.search-page__director-positions-col,
.search-page__director-companies-col {
    padding: 8px 24px;
    font-family: var(--skin-font-base);
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: var(--skin-dark-900);
}

/* Columna Action: centrada, padding vertical 12px */
.search-page__director-action-col {
    padding: 12px 24px 12px 0;
    display: flex;
    align-items: center;
}

/* Figma: Button "View profile" — inter/body s/semibold, border-radius 12px, padding 12px, color var(--skin-darkblue-500) */
.search-page__director-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: 12px;
    font-family: var(--skin-font-base);
    font-size: 14px;
    font-weight: 600;
    line-height: 17px;
    color: var(--skin-darkblue-500);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.search-page__director-btn:hover {
    background: var(--skin-darkblue-50);
}

/* ---------------------------------------------------------------------------
   Pagination
   Figma: Pagination 939x68 padding 12/24/16/24
   Buttons 40x40, active bg #E9EAF2
   Prev/Next: 119x40 and 92x40 bg #FFF padding 10/16
   --------------------------------------------------------------------------- */
.search-page__pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px 16px;
    margin-top: 0;
}

.search-page__pagination-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--skin-border-default);
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--skin-dark-900);
    font-family: var(--skin-font-base);
    font-size: var(--skin-text-sm);
    font-weight: 500;
    line-height: 17px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.search-page__pagination-btn:hover:not(:disabled) {
    background: var(--skin-darkblue-50);
    color: var(--skin-darkblue-500);
    border-color: var(--skin-darkblue-500);
}

.search-page__pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.search-page__pagination-numbers {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Figma: _Pagination number base 40x40, active bg #E9EAF2 */
.search-page__pagination-number {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--skin-dark-900);
    font-family: var(--skin-font-base);
    font-size: var(--skin-text-sm);
    font-weight: 400;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-page__pagination-number.is-active {
    background: #E9EAF2;        /* Figma: rgb(233,234,242) */
    font-weight: 600;
    color: var(--skin-darkblue-500);
}

.search-page__pagination-number:not(.is-active):not(.is-ellipsis):hover {
    background: var(--skin-darkblue-50);
}

.search-page__pagination-number.is-ellipsis {
    cursor: default;
    color: var(--skin-text-muted);
}

/* ---------------------------------------------------------------------------
   Responsive — tablet/mobile: sidebar encima de resultados
   --------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .search-page__bar-inner {
        padding: 0 40px 32px;
    }
    /* visual padding 40px: body 16px + container 24px = 40px */
    .search-page__body {
        padding: 32px 16px 56px;
    }
    .search-page__query-tab {
        padding: 6px 8px 6px 40px;
    }
}

@media (max-width: 900px) {
    .search-page__body {
        flex-direction: column;
    }
    .search-page__sidebar {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   Responsive — mobile
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .search-page__bar-inner {
        padding: 0 var(--skin-container-pad-mob) 24px;
    }

    .search-page__query-tab {
        padding: 6px var(--skin-container-pad-mob);
    }

    .search-page__body {
        padding: 24px var(--skin-container-pad-mob) 40px;
        gap: 24px;
    }

    .search-page__search-wrap {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .search-page__type-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .search-page__input-row {
        gap: 8px;
    }

    .search-page__input {
        font-size: var(--skin-text-md);  /* 16px on mobile to avoid zoom */
    }

    .search-page__search-btn {
        height: 44px;
        flex-shrink: 0;
    }

    .search-page__company-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
    }

    .search-page__company-info {
        width: 100%;
    }

    .search-page__company-right {
        align-items: flex-start;
        width: 100%;
    }

    .search-page__company-btn {
        width: 100%;
        justify-content: center;
    }

    .search-page__directors-table-header {
        display: none;  /* hide table header on mobile — use card layout */
    }

    .search-page__director-card {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 16px;
    }

    .search-page__director-companies-col,
    .search-page__director-cargo-col {
        padding-top: 0;
    }

    .search-page__pagination {
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
    }

    .search-page__pagination-numbers {
        order: -1;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .search-page__results-label {
        font-size: var(--skin-text-md);  /* 16px */
    }

    .search-page__type-tab {
        padding: 0 10px;
        font-size: var(--skin-text-sm);
    }
}