/* =========================================================
   TRAZA V0.6.1
   styles.css
   Identidad visual + primera fuente real
   ========================================================= */


/* =========================================================
   VARIABLES GLOBALES
   ========================================================= */

:root {

    --bg-main: #06101f;
    --bg-secondary: #09182b;
    --bg-card: rgba(10, 28, 49, 0.82);
    --bg-card-hover: rgba(13, 36, 62, 0.95);

    --navy: #071b33;
    --navy-light: #0e2a4b;

    --cyan: #08d9ff;
    --cyan-soft: #65e8ff;

    --teal: #17d3b1;
    --green: #28dc7d;
    --yellow: #e6e980;

    --white: #f6fbff;
    --text-main: #eaf4fb;
    --text-soft: #94a9bb;
    --text-muted: #667b8d;

    --border: rgba(111, 205, 255, 0.14);
    --border-strong: rgba(8, 217, 255, 0.30);

    --shadow-soft:
        0 20px 60px rgba(0, 0, 0, 0.20);

    --shadow-card:
        0 18px 45px rgba(0, 0, 0, 0.25);

    --radius-small: 10px;
    --radius-medium: 16px;
    --radius-large: 26px;

    --container-width: 1180px;

}


/* =========================================================
   RESET
   ========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {

    min-height: 100vh;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    background:
        radial-gradient(
            circle at top right,
            rgba(0, 209, 255, 0.10),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #04101e 0%,
            #071421 48%,
            #06101d 100%
        );

    color: var(--text-main);

    line-height: 1.6;

    overflow-x: hidden;
}

body::before {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px
        );

    background-size: 48px 48px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.85),
            transparent 78%
        );

    z-index: -1;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select {
    font: inherit;
}

button {
    border: none;
}

button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

input,
select {
    outline: none;
}


/* =========================================================
   CONTENEDORES
   ========================================================= */

.header-container,
.hero-container,
.section-container,
.footer-container {

    width: min(
        calc(100% - 40px),
        var(--container-width)
    );

    margin: 0 auto;
}


/* =========================================================
   BOTONES
   ========================================================= */

.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 48px;

    padding: 0 22px;

    border-radius: 12px;

    font-weight: 700;

    font-size: 14px;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary {

    color: #00131d;

    background:
        linear-gradient(
            135deg,
            var(--cyan),
            var(--teal)
        );

    box-shadow:
        0 10px 32px rgba(8, 217, 255, 0.22);
}

.button-primary:hover {

    box-shadow:
        0 15px 40px rgba(8, 217, 255, 0.32);
}

.button-secondary {

    color: var(--text-main);

    background: rgba(255, 255, 255, 0.04);

    border: 1px solid var(--border);
}

.button-secondary:hover {

    border-color: var(--cyan);

    color: var(--cyan-soft);
}

.button-ghost {

    background: transparent;

    color: var(--text-soft);

    border: 1px solid transparent;
}

.button-ghost:hover {

    color: var(--white);

    border-color: var(--border);
}


/* =========================================================
   HEADER
   ========================================================= */

.header {

    position: sticky;

    top: 0;

    z-index: 100;

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

    background:
        rgba(4, 16, 30, 0.84);

    backdrop-filter: blur(18px);
}

.header-container {

    min-height: 82px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;
}

.brand {

    display: flex;

    align-items: center;

    min-width: 190px;
}

.brand-logo {

    width: 185px;

    height: auto;

    object-fit: contain;
}

.main-nav {

    display: flex;

    align-items: center;

    gap: 32px;
}

.nav-link {

    position: relative;

    color: var(--text-soft);

    font-size: 14px;

    font-weight: 600;

    padding: 30px 0;
}

.nav-link::after {

    content: "";

    position: absolute;

    left: 0;

    right: 100%;

    bottom: 20px;

    height: 2px;

    border-radius: 4px;

    background: var(--cyan);

    transition: right 0.25s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--white);
}

.nav-link:hover::after,
.nav-link.active::after {
    right: 0;
}

.header-actions {

    display: flex;

    align-items: center;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {

    position: relative;

    min-height: 720px;

    display: flex;

    align-items: center;

    overflow: hidden;

    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.hero-background {

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 80% 40%,
            rgba(0, 217, 255, 0.14),
            transparent 28%
        ),
        radial-gradient(
            circle at 55% 85%,
            rgba(23, 211, 177, 0.06),
            transparent 28%
        );
}

.hero-background::before {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    right: -120px;

    top: 60px;

    border: 1px solid rgba(8, 217, 255, 0.09);

    border-radius: 50%;

    box-shadow:
        0 0 0 80px rgba(8, 217, 255, 0.015),
        0 0 0 160px rgba(8, 217, 255, 0.012);
}

.hero-container {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(420px, 0.9fr);

    align-items: center;

    gap: 70px;

    padding: 90px 0;
}

.hero-content {
    max-width: 650px;
}

.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 8px 13px;

    margin-bottom: 24px;

    border-radius: 999px;

    border: 1px solid rgba(8, 217, 255, 0.18);

    background: rgba(8, 217, 255, 0.06);

    color: var(--cyan-soft);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.4px;
}

.hero-badge-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 12px var(--green);
}

.hero-title {

    max-width: 720px;

    margin-bottom: 22px;

    color: var(--white);

    font-size: clamp(46px, 5.4vw, 74px);

    line-height: 0.98;

    letter-spacing: -3px;
}

.hero-title span {

    display: block;

    margin-top: 8px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--teal)
        );

    background-clip: text;

    -webkit-background-clip: text;

    color: transparent;
}

.hero-description {

    max-width: 640px;

    color: var(--text-soft);

    font-size: 18px;

    line-height: 1.75;
}

.hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 32px;
}

.hero-features {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;

    margin-top: 48px;
}

.hero-feature {

    display: flex;

    align-items: center;

    gap: 12px;
}

.feature-icon {

    width: 42px;

    height: 42px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 12px;

    border: 1px solid var(--border);

    color: var(--cyan);

    background:
        rgba(8, 217, 255, 0.05);

    font-size: 20px;
}

.hero-feature strong,
.hero-feature span {

    display: block;
}

.hero-feature strong {

    color: var(--white);

    font-size: 13px;
}

.hero-feature div span {

    margin-top: 2px;

    color: var(--text-muted);

    font-size: 12px;
}


/* =========================================================
   RADAR CARD
   ========================================================= */

.hero-visual {

    display: flex;

    align-items: center;

    justify-content: center;
}

.radar-card {

    position: relative;

    width: 100%;

    max-width: 500px;

    padding: 26px;

    border: 1px solid var(--border-strong);

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(12, 35, 59, 0.95),
            rgba(5, 20, 35, 0.88)
        );

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.35),
        0 0 60px rgba(8, 217, 255, 0.05);

    overflow: hidden;
}

.radar-card::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            115deg,
            transparent,
            rgba(8, 217, 255, 0.04),
            transparent
        );
}

.radar-header {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 24px;
}

.radar-label {

    color: var(--cyan);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.8px;
}

.radar-header h2 {

    margin-top: 4px;

    color: var(--white);

    font-size: 22px;
}

.radar-status {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 7px 10px;

    border-radius: 999px;

    background:
        rgba(40, 220, 125, 0.08);

    color: #79efa6;

    font-size: 11px;

    font-weight: 700;
}

.radar-status span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 10px var(--green);
}

.radar-display {

    position: relative;

    width: 330px;

    height: 330px;

    max-width: 100%;

    margin: 10px auto 28px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(8, 217, 255, 0.09),
            transparent 64%
        );
}

.radar-display::before,
.radar-display::after {

    content: "";

    position: absolute;

    background:
        rgba(8, 217, 255, 0.08);
}

.radar-display::before {

    width: 1px;

    height: 100%;

    left: 50%;
}

.radar-display::after {

    height: 1px;

    width: 100%;

    top: 50%;
}

.radar-circle {

    position: absolute;

    top: 50%;

    left: 50%;

    border: 1px solid rgba(8, 217, 255, 0.15);

    border-radius: 50%;

    transform:
        translate(-50%, -50%);
}

.radar-circle-1 {

    width: 100%;

    height: 100%;
}

.radar-circle-2 {

    width: 70%;

    height: 70%;
}

.radar-circle-3 {

    width: 40%;

    height: 40%;
}

.radar-line {

    position: absolute;

    width: 50%;

    height: 50%;

    left: 50%;

    top: 0;

    transform-origin:
        bottom left;

    background:
        linear-gradient(
            120deg,
            rgba(8, 217, 255, 0.30),
            rgba(8, 217, 255, 0.02),
            transparent
        );

    clip-path:
        polygon(
            0 100%,
            100% 0,
            100% 100%
        );

    animation:
        radarSweep 4s linear infinite;
}

.radar-point {

    position: absolute;

    width: 11px;

    height: 11px;

    border-radius: 50%;

    background: var(--cyan);

    box-shadow:
        0 0 16px rgba(8, 217, 255, 0.85);
}

.point-1 {
    left: 22%;
    top: 35%;
}

.point-2 {

    right: 18%;

    top: 28%;

    background: var(--teal);
}

.point-3 {

    right: 28%;

    bottom: 20%;

    background: var(--green);
}

.point-4 {

    left: 19%;

    bottom: 27%;
}

.radar-center {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 105px;

    height: 105px;

    transform:
        translate(-50%, -50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    border:
        1px solid rgba(8, 217, 255, 0.42);

    background:
        rgba(5, 21, 37, 0.94);

    box-shadow:
        0 0 40px rgba(8, 217, 255, 0.18);
}

.radar-center strong {

    color: var(--cyan-soft);

    font-size: 30px;

    line-height: 1;
}

.radar-center span {

    margin-top: 5px;

    color: var(--text-soft);

    font-size: 11px;
}

.radar-footer {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;
}

.radar-footer div {

    padding: 12px;

    border: 1px solid var(--border);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.025);
}

.radar-footer span {

    display: block;

    color: var(--text-muted);

    font-size: 10px;

    margin-bottom: 4px;
}

.radar-footer strong {

    color: var(--white);

    font-size: 12px;
}


/* =========================================================
   ANIMACIÓN RADAR
   ========================================================= */

@keyframes radarSweep {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   SECCIONES
   ========================================================= */

.search-section,
.jobs-section,
.how-section {

    padding: 95px 0;
}

.search-section {

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.015),
            transparent
        );
}

.section-heading {

    max-width: 720px;

    margin-bottom: 38px;
}

.section-heading.centered {

    margin-left: auto;

    margin-right: auto;

    text-align: center;
}

.section-eyebrow {

    display: block;

    margin-bottom: 9px;

    color: var(--cyan);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;
}

.section-heading h2,
.jobs-header h2 {

    color: var(--white);

    font-size: clamp(30px, 4vw, 46px);

    line-height: 1.15;

    letter-spacing: -1.7px;
}

.section-heading p,
.jobs-header p {

    margin-top: 12px;

    color: var(--text-soft);

    font-size: 15px;
}


/* =========================================================
   BUSCADOR
   ========================================================= */

.search-panel {

    display: grid;

    grid-template-columns:
        1.2fr
        1fr
        0.9fr
        auto;

    gap: 12px;

    padding: 18px;

    border: 1px solid var(--border);

    border-radius: 20px;

    background:
        linear-gradient(
            140deg,
            rgba(13, 35, 58, 0.88),
            rgba(7, 22, 38, 0.90)
        );

    box-shadow:
        var(--shadow-card);
}

.search-field {

    display: flex;

    flex-direction: column;

    gap: 7px;
}

.search-field label {

    margin-left: 4px;

    color: var(--text-muted);

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}

.input-wrapper {

    position: relative;

    display: flex;

    align-items: center;
}

.input-icon {

    position: absolute;

    left: 15px;

    z-index: 2;

    color: var(--cyan);

    font-size: 16px;
}

.input-wrapper input,
.input-wrapper select {

    width: 100%;

    min-height: 52px;

    padding:
        0 16px
        0 44px;

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-radius: 12px;

    color: var(--white);

    background:
        rgba(255, 255, 255, 0.035);

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.input-wrapper select {

    appearance: none;

    cursor: pointer;
}

.input-wrapper select option {

    color: #071421;

    background: white;
}

.input-wrapper input::placeholder {

    color: #6f8292;
}

.input-wrapper input:focus,
.input-wrapper select:focus {

    border-color: rgba(8, 217, 255, 0.45);

    background:
        rgba(8, 217, 255, 0.04);

    box-shadow:
        0 0 0 3px rgba(8, 217, 255, 0.06);
}

.search-button-container {

    display: flex;

    align-items: flex-end;
}

.search-button {

    min-height: 52px;

    white-space: nowrap;
}

.search-note {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 14px;

    color: var(--text-muted);

    font-size: 11px;
}

.search-note-dot {

    width: 7px;

    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 9px rgba(40, 220, 125, 0.65);
}


/* =========================================================
   RESULTADOS
   ========================================================= */

.jobs-section {

    background:
        rgba(0, 0, 0, 0.08);

    border-top:
        1px solid rgba(255, 255, 255, 0.03);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.03);
}

.jobs-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 38px;
}

.results-counter {

    padding: 10px 16px;

    border-radius: 999px;

    border: 1px solid var(--border);

    color: var(--text-soft);

    background:
        rgba(255, 255, 255, 0.025);

    font-size: 12px;
}

.results-counter span {

    margin-right: 4px;

    color: var(--cyan);

    font-weight: 800;
}

.jobs-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;
}


/* =========================================================
   TARJETAS
   ========================================================= */

.job-card {

    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 555px;

    padding: 22px;

    border: 1px solid var(--border);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(12, 31, 51, 0.94),
            rgba(7, 23, 39, 0.92)
        );

    box-shadow:
        var(--shadow-soft);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.job-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(8, 217, 255, 0.33);

    box-shadow:
        0 25px 55px rgba(0, 0, 0, 0.31);
}

.job-card-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-bottom: 14px;
}

.company-logo {

    width: 48px;

    height: 48px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    color: var(--cyan);

    border:
        1px solid rgba(8, 217, 255, 0.18);

    background:
        linear-gradient(
            145deg,
            rgba(8, 217, 255, 0.12),
            rgba(23, 211, 177, 0.04)
        );

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 0.6px;
}

.match-score {

    display: flex;

    flex-direction: column;

    align-items: flex-end;
}

.match-score strong {

    line-height: 1;

    font-size: 27px;
}

.match-score span {

    margin-top: 5px;

    color: var(--text-muted);

    font-size: 9px;
}

.match-high strong {
    color: var(--green);
}

.match-medium strong {
    color: var(--yellow);
}

.match-pending strong {

    color: var(--cyan-soft);
}

.match-pending-text {

    color: var(--cyan-soft) !important;
}

.job-source-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 13px;
}

.source-badge {

    display: inline-flex;

    align-items: center;

    padding: 5px 9px;

    border-radius: 999px;

    border:
        1px solid rgba(8, 217, 255, 0.17);

    background:
        rgba(8, 217, 255, 0.055);

    color: var(--cyan-soft);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.4px;
}

.published-label {

    color: var(--text-muted);

    font-size: 9px;
}

.job-company {

    margin-bottom: 5px;

    color: var(--cyan-soft);

    font-size: 12px;

    font-weight: 700;
}

.job-title {

    margin-bottom: 10px;

    color: var(--white);

    font-size: 21px;

    line-height: 1.25;
}

.job-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 13px;

    color: var(--text-muted);

    font-size: 10px;
}

.salary-line {

    margin-bottom: 15px;

    color: #8be9b3;

    font-size: 11px;

    font-weight: 700;
}

.job-description {

    min-height: 84px;

    margin-bottom: 18px;

    color: var(--text-soft);

    font-size: 13px;

    line-height: 1.65;
}

.job-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 22px;
}

.job-tags span {

    padding: 5px 9px;

    border-radius: 999px;

    border:
        1px solid rgba(8, 217, 255, 0.09);

    color: #a8d4df;

    background:
        rgba(8, 217, 255, 0.04);

    font-size: 10px;
}

.match-detail {

    margin-top: auto;

    padding-top: 12px;
}

.match-detail-header {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 9px;

    font-size: 10px;
}

.match-detail-header span {

    color: var(--text-muted);
}

.match-detail-header strong {

    color: var(--green);
}

.progress-bar {

    width: 100%;

    height: 6px;

    overflow: hidden;

    border-radius: 99px;

    background:
        rgba(255, 255, 255, 0.06);
}

.progress-pending {

    background:
        linear-gradient(
            90deg,
            rgba(8, 217, 255, 0.08),
            rgba(255, 255, 255, 0.035)
        );
}

.progress-fill {

    height: 100%;

    border-radius: 99px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--green)
        );

    box-shadow:
        0 0 10px rgba(40, 220, 125, 0.32);
}

.job-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-top: 22px;

    padding-top: 18px;

    border-top:
        1px solid rgba(255, 255, 255, 0.05);
}

.save-job-button,
.view-job-button {

    min-height: 40px;

    border-radius: 10px;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}

.save-job-button {

    padding: 0 12px;

    color: var(--text-soft);

    background: transparent;
}

.save-job-button:hover {

    color: var(--white);

    background:
        rgba(255, 255, 255, 0.035);
}

.save-job-button.saved {

    color: var(--cyan);
}

.view-job-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 0 14px;

    color: #00131d;

    background:
        linear-gradient(
            135deg,
            var(--cyan-soft),
            var(--teal)
        );

    font-size: 11px;

    font-weight: 800;
}

.view-job-button:hover {

    transform:
        translateY(-2px);
}


/* =========================================================
   SIN RESULTADOS
   ========================================================= */

.no-results {

    margin-top: 25px;

    padding: 60px 25px;

    text-align: center;

    border:
        1px dashed rgba(8, 217, 255, 0.18);

    border-radius: 20px;

    background:
        rgba(255, 255, 255, 0.02);
}

.no-results-icon {

    margin-bottom: 10px;

    color: var(--cyan);

    font-size: 38px;
}

.no-results h3 {

    margin-bottom: 6px;

    color: var(--white);
}

.no-results p {

    color: var(--text-muted);

    font-size: 13px;
}


/* =========================================================
   CÓMO FUNCIONA
   ========================================================= */

.how-section {
    padding-bottom: 110px;
}

.steps-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 16px;
}

.step-card {

    position: relative;

    min-height: 245px;

    padding: 24px;

    overflow: hidden;

    border: 1px solid var(--border);

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.025);
}

.step-number {

    position: absolute;

    right: 18px;

    top: 10px;

    color:
        rgba(255, 255, 255, 0.03);

    font-size: 64px;

    font-weight: 900;
}

.step-icon {

    width: 46px;

    height: 46px;

    display: grid;

    place-items: center;

    margin-bottom: 24px;

    border-radius: 12px;

    border:
        1px solid rgba(8, 217, 255, 0.17);

    color: var(--cyan);

    background:
        rgba(8, 217, 255, 0.05);

    font-size: 20px;
}

.step-card h3 {

    margin-bottom: 10px;

    color: var(--white);

    font-size: 18px;
}

.step-card p {

    color: var(--text-soft);

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer {

    border-top:
        1px solid rgba(255, 255, 255, 0.05);

    background:
        #040d18;
}

.footer-container {

    min-height: 160px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}

.footer-logo {

    width: 150px;

    margin-bottom: 10px;
}

.footer-brand p {

    color: var(--text-muted);

    font-size: 11px;
}

.footer-status {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 12px;

    border: 1px solid var(--border);

    border-radius: 999px;

    color: var(--text-muted);

    font-size: 10px;
}

.status-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 10px rgba(40, 220, 125, 0.8);
}


/* =========================================================
   NOTIFICACIÓN
   ========================================================= */

.traza-notification {

    position: fixed;

    right: 25px;

    bottom: 25px;

    z-index: 999;

    min-width: 270px;

    max-width: 360px;

    padding: 15px 18px;

    border: 1px solid var(--border-strong);

    border-radius: 14px;

    color: var(--white);

    background:
        rgba(8, 26, 44, 0.96);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.40);

    transform:
        translateY(25px);

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.traza-notification.show {

    opacity: 1;

    transform:
        translateY(0);
}




/* =========================================================
   ESTADO DE DATOS V0.3.2
   ========================================================= */

.data-status-panel {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin: -12px 0 28px;

    padding: 14px 16px;

    border: 1px solid var(--border);

    border-radius: 14px;

    background: rgba(255, 255, 255, 0.025);
}

.data-status-panel[hidden] {
    display: none;
}

.data-status-panel.live {

    border-color: rgba(40, 220, 125, 0.22);

    background: rgba(40, 220, 125, 0.045);
}

.data-status-panel.cached {

    border-color: rgba(230, 233, 128, 0.24);

    background: rgba(230, 233, 128, 0.045);
}

.data-status-panel.error {

    border-color: rgba(255, 120, 120, 0.22);

    background: rgba(255, 120, 120, 0.045);
}

.data-status-dot {

    width: 9px;

    height: 9px;

    margin-top: 6px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--text-muted);
}

.data-status-panel.live .data-status-dot {

    background: var(--green);

    box-shadow: 0 0 12px rgba(40, 220, 125, 0.75);
}

.data-status-panel.cached .data-status-dot {

    background: var(--yellow);

    box-shadow: 0 0 12px rgba(230, 233, 128, 0.55);
}

.data-status-panel.error .data-status-dot {

    background: #ff7878;

    box-shadow: 0 0 12px rgba(255, 120, 120, 0.45);
}

.data-status-panel strong,
.data-status-panel span {
    display: block;
}

.data-status-panel strong {

    color: var(--white);

    font-size: 12px;
}

.data-status-panel span {

    margin-top: 2px;

    color: var(--text-soft);

    font-size: 11px;

    line-height: 1.55;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    .hero-container {

        grid-template-columns: 1fr;

        gap: 55px;
    }

    .hero-content {
        max-width: 760px;
    }

    .hero-visual {

        justify-content: flex-start;
    }

    .radar-card {

        max-width: 620px;
    }

    .search-panel {

        grid-template-columns:
            1fr
            1fr;
    }

    .search-button-container {

        align-items: stretch;
    }

    .search-button {

        width: 100%;
    }

    .jobs-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }

    .steps-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }
}


@media (max-width: 760px) {

    .header-container {

        min-height: 70px;
    }

    .brand-logo {
        width: 145px;
    }

    .main-nav {
        display: none;
    }

    .header-actions .button {

        min-height: 40px;

        padding: 0 14px;

        font-size: 12px;
    }

    .hero {

        min-height: auto;
    }

    .hero-container {

        padding:
            70px 0;
    }

    .hero-title {

        letter-spacing: -2px;
    }

    .hero-description {

        font-size: 16px;
    }

    .hero-features {

        grid-template-columns: 1fr;
    }

    .radar-card {

        padding: 20px;
    }

    .radar-display {

        width: 275px;

        height: 275px;
    }

    .radar-footer {

        grid-template-columns: 1fr;
    }

    .search-section,
    .jobs-section,
    .how-section {

        padding:
            70px 0;
    }

    .search-panel {

        grid-template-columns: 1fr;
    }

    .jobs-header {

        align-items: flex-start;

        flex-direction: column;
    }

    .jobs-grid {

        grid-template-columns: 1fr;
    }

    .steps-grid {

        grid-template-columns: 1fr;
    }

    .footer-container {

        padding:
            40px 0;

        align-items: flex-start;

        flex-direction: column;
    }

}


@media (max-width: 480px) {

    .header-container,
    .hero-container,
    .section-container,
    .footer-container {

        width:
            min(
                calc(100% - 26px),
                var(--container-width)
            );
    }

    .brand-logo {
        width: 125px;
    }

    .hero-title {

        font-size: 42px;
    }

    .hero-actions {

        flex-direction: column;
    }

    .hero-actions .button {

        width: 100%;
    }

    .radar-display {

        width: 235px;

        height: 235px;
    }

    .radar-center {

        width: 88px;

        height: 88px;
    }

    .radar-center strong {

        font-size: 25px;
    }

    .job-card {

        min-height: auto;
    }

    .job-source-row {

        align-items: flex-start;

        flex-direction: column;
    }

}


/* =========================================================
   TRAZA V0.5.10 - CAPA DE CALIDAD
   ========================================================= */

.search-panel {
    display: block;
}

.search-primary-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 0.9fr auto;
    gap: 12px;
}

.quality-filter-row {
    display: grid;
    grid-template-columns: minmax(210px, 0.7fr) minmax(210px, 0.7fr) minmax(260px, 1fr);
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.compact-field .input-wrapper input,
.compact-field .input-wrapper select {
    min-height: 46px;
}

.quality-actions {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.refresh-button {
    min-height: 46px;
    white-space: nowrap;
}

.quality-help {
    max-width: 220px;
    padding-bottom: 5px;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.45;
}

.job-quality-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: -3px 0 13px;
}

.quality-badge,
.freshness-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.15px;
}

.quality-badge {
    border: 1px solid rgba(8, 217, 255, 0.14);
    color: var(--cyan-soft);
    background: rgba(8, 217, 255, 0.045);
}

.quality-badge.quality-high {
    border-color: rgba(40, 220, 125, 0.22);
    color: #8cf0b2;
    background: rgba(40, 220, 125, 0.06);
}

.quality-badge.quality-medium {
    border-color: rgba(8, 217, 255, 0.22);
}

.quality-badge.quality-base {
    color: var(--text-soft);
}

.freshness-badge {
    border: 1px solid rgba(230, 233, 128, 0.16);
    color: var(--yellow);
    background: rgba(230, 233, 128, 0.045);
}

@media (max-width: 1050px) {
    .search-primary-grid {
        grid-template-columns: 1fr 1fr;
    }

    .quality-filter-row {
        grid-template-columns: 1fr 1fr;
    }

    .quality-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .search-primary-grid,
    .quality-filter-row {
        grid-template-columns: 1fr;
    }

    .quality-actions {
        grid-column: auto;
        align-items: stretch;
        flex-direction: column;
    }

    .refresh-button {
        width: 100%;
    }

    .quality-help {
        max-width: none;
        padding-bottom: 0;
    }
}


/* =========================================================
   TRAZA V0.5.10 - MULTIFUENTE + EXPERIENCIA DEL POSTULANTE
   ========================================================= */

.modal-open {
    overflow: hidden;
}

.dashboard-section {
    position: relative;
    z-index: 4;
    margin-top: -34px;
    padding-bottom: 38px;
}

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

.dashboard-card {
    min-height: 132px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(12, 31, 51, .97), rgba(7, 23, 39, .94));
    box-shadow: var(--shadow-soft);
}

.dashboard-card.accent-card {
    border-color: rgba(8, 217, 255, .30);
    background: linear-gradient(145deg, rgba(8, 217, 255, .10), rgba(7, 23, 39, .96));
}

.dashboard-label,
.dashboard-card small {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
}

.dashboard-card strong {
    display: block;
    margin: 6px 0 3px;
    color: var(--white);
    font-size: 34px;
    line-height: 1;
}

.dashboard-card.accent-card strong {
    color: var(--cyan-soft);
}

.search-secondary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, .8fr)) minmax(190px, auto);
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .055);
}

.refresh-container {
    display: flex;
    align-items: flex-end;
}

.refresh-container .refresh-button {
    width: 100%;
}

.source-stack {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.new-badge,
.relevance-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
}

.new-badge {
    color: #9fffc3;
    border: 1px solid rgba(40, 220, 125, .22);
    background: rgba(40, 220, 125, .08);
}

.relevance-badge {
    color: var(--cyan-soft);
    border: 1px solid rgba(8, 217, 255, .15);
    background: rgba(8, 217, 255, .045);
}

.job-card-new {
    border-color: rgba(40, 220, 125, .25);
}

.match-low strong {
    color: #ffb38f;
}

.match-reasons {
    display: block;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.45;
}

.tracking-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding: 12px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .045);
}

.tracking-row > span {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
}

.status-select {
    min-height: 36px;
    padding: 0 30px 0 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text-main);
    background: rgba(255, 255, 255, .035);
    font-size: 10px;
    outline: none;
}

.status-select option {
    color: #071421;
    background: white;
}

.workspace-section {
    padding: 95px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
    background: linear-gradient(180deg, rgba(8, 217, 255, .018), transparent);
}

.workspace-heading {
    margin-bottom: 28px;
}

.pipeline-summary {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.pipeline-pill {
    padding: 14px 15px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255, 255, 255, .025);
}

.pipeline-pill strong,
.pipeline-pill span {
    display: block;
}

.pipeline-pill strong {
    color: var(--cyan-soft);
    font-size: 23px;
    line-height: 1;
}

.pipeline-pill span {
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 10px;
}

.status-interview {
    border-color: rgba(230, 233, 128, .19);
}

.status-offer {
    border-color: rgba(40, 220, 125, .24);
}

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

.tracked-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 17px 18px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: rgba(8, 24, 41, .72);
}

.tracked-main {
    min-width: 0;
}

.tracked-main h3 {
    margin: 6px 0 2px;
    color: var(--white);
    font-size: 15px;
}

.tracked-main p {
    color: var(--text-muted);
    font-size: 10px;
}

.tracked-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.mini-button {
    min-height: 36px;
    padding: 0 12px;
    font-size: 10px;
}

.remove-track-button {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
    font-size: 18px;
}

.remove-track-button:hover {
    color: #ff9c9c;
    background: rgba(255, 120, 120, .06);
}

.empty-workspace {
    padding: 28px;
    border: 1px dashed var(--border);
    border-radius: 15px;
    color: var(--text-muted);
    text-align: center;
    font-size: 12px;
}

.empty-workspace[hidden] {
    display: none;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(1, 8, 15, .82);
    backdrop-filter: blur(12px);
}

.modal-backdrop[hidden] {
    display: none;
}

.profile-modal {
    width: min(760px, 100%);
    max-height: min(88vh, 800px);
    overflow-y: auto;
    padding: 28px;
    border: 1px solid var(--border-strong);
    border-radius: 24px;
    background: linear-gradient(145deg, #0b2238, #061522);
    box-shadow: 0 35px 90px rgba(0, 0, 0, .50);
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.modal-header h2 {
    color: var(--white);
    font-size: 30px;
    letter-spacing: -1px;
}

.modal-close {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: var(--text-soft);
    background: rgba(255, 255, 255, .04);
    cursor: pointer;
    font-size: 24px;
}

.modal-intro {
    margin: 14px 0 24px;
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.65;
}

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

.profile-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.profile-field.full-field {
    grid-column: 1 / -1;
}

.profile-field label,
.mode-fieldset legend {
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 700;
}

.profile-field input {
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 11px;
    color: var(--white);
    background: rgba(255, 255, 255, .035);
    outline: none;
}

.profile-field small {
    color: var(--text-muted);
    font-size: 9px;
}

.mode-fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 18px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.mode-fieldset legend {
    padding: 0 6px;
}

.mode-fieldset label {
    color: var(--text-soft);
    font-size: 11px;
}

.profile-preview {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid rgba(8, 217, 255, .16);
    border-radius: 12px;
    background: rgba(8, 217, 255, .04);
}

.profile-preview strong,
.profile-preview span {
    display: block;
}

.profile-preview strong {
    color: var(--cyan-soft);
    font-size: 12px;
}

.profile-preview span {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 10px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

@media (max-width: 1050px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .search-secondary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pipeline-summary {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 760px) {
    .dashboard-section {
        margin-top: 0;
        padding-top: 20px;
    }

    .dashboard-grid,
    .search-secondary-grid,
    .pipeline-summary,
    .profile-grid {
        grid-template-columns: 1fr;
    }

    .profile-field.full-field {
        grid-column: auto;
    }

    .tracked-item,
    .tracked-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .tracked-actions .status-select,
    .tracked-actions .mini-button {
        width: 100%;
    }

    .modal-actions {
        flex-direction: column-reverse;
    }

    .modal-actions .button {
        width: 100%;
    }
}


/* =========================================================
   V0.5.0.2 · PORTALES CORPORATIVOS OFICIALES
   ========================================================= */

.corporate-section {
    padding: 32px 0 72px;
}

.compact-heading {
    margin-bottom: 24px;
}

.corporate-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.corporate-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.corporate-chip strong {
    font-size: 0.88rem;
}

.corporate-chip small {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.official-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(81, 225, 190, 0.22);
    background: rgba(81, 225, 190, 0.08);
    color: var(--accent-secondary, #7ce6c8);
    font-size: 0.72rem;
    font-weight: 700;
}

.source-detail {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 700;
}


/* V0.5.0.2 · ESTADO REAL DE PORTALES CORPORATIVOS */
.corporate-chip.connected {
    border-color: rgba(80, 170, 255, 0.28);
}

.corporate-chip.verified {
    border-color: rgba(81, 225, 190, 0.38);
    background: rgba(81, 225, 190, 0.07);
}

.corporate-chip.registered {
    opacity: 0.82;
}


/* =========================================================
   V0.5.10 · COBERTURA MASIVA EXTERNA
   ========================================================= */

.external-coverage-panel {
    margin-top: 22px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-large);
    background:
        linear-gradient(
            135deg,
            rgba(8, 217, 255, 0.07),
            rgba(23, 211, 177, 0.04)
        ),
        rgba(5, 17, 31, 0.72);
    box-shadow: var(--shadow-soft);
}

.external-coverage-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.external-coverage-heading h3 {
    margin-top: 5px;
    font-size: clamp(20px, 2.4vw, 28px);
    line-height: 1.2;
}

.external-coverage-heading p {
    margin-top: 8px;
    max-width: 760px;
    color: var(--text-soft);
}

.external-coverage-badge {
    min-width: 92px;
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    text-align: center;
    background: rgba(8, 217, 255, 0.08);
}

.external-coverage-badge strong,
.external-coverage-badge span {
    display: block;
}

.external-coverage-badge strong {
    color: var(--cyan-soft);
    font-size: 20px;
}

.external-coverage-badge span {
    margin-top: 2px;
    color: var(--text-soft);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.external-search-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.external-search-card {
    display: flex;
    flex-direction: column;
    min-height: 285px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(7, 27, 51, 0.72);
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.external-search-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong);
    background: rgba(9, 32, 57, 0.92);
}

.external-search-card.reviewed {
    border-color: rgba(40, 220, 125, 0.35);
}

.external-search-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.external-search-top h4 {
    margin-top: 4px;
    font-size: 19px;
}

.external-search-mode {
    color: var(--cyan-soft);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.external-priority {
    flex-shrink: 0;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-soft);
    font-size: 10px;
}

.external-search-card p {
    margin-top: 14px;
    color: var(--text-main);
    font-size: 13px;
}

.external-search-card small {
    display: block;
    margin-top: 10px;
    color: var(--text-muted);
    line-height: 1.45;
}

.external-filter-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 14px;
    padding: 9px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    font-size: 11px;
}

.external-filter-row span {
    color: var(--text-muted);
}

.external-filter-row strong {
    color: var(--teal);
    text-align: right;
}

.external-search-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
}

.external-open-button,
.external-review-button {
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    font-size: 12px;
}

.external-review-state {
    margin-top: 9px;
    color: var(--text-muted);
    font-size: 11px;
    text-align: center;
}

.external-search-card.reviewed .external-review-state {
    color: var(--green);
}

.external-placeholder {
    grid-column: 1 / -1;
    min-height: auto;
}

.external-placeholder span {
    margin-top: 4px;
    color: var(--text-soft);
}

.external-coverage-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 16px;
    color: var(--text-muted);
    font-size: 11px;
}

@media (max-width: 1040px) {
    .external-search-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .external-coverage-panel {
        padding: 18px;
    }

    .external-coverage-heading {
        flex-direction: column;
    }

    .external-coverage-badge {
        min-width: 0;
        width: 100%;
        text-align: left;
    }

    .external-coverage-badge strong,
    .external-coverage-badge span {
        display: inline;
    }

    .external-search-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   TRAZA V0.6.0 BETA
   Accesibilidad, filtros rápidos, orden y móvil
   ========================================================= */

.skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1000;
    transform: translateY(-160%);
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--white);
    color: #04101e;
    font-weight: 800;
}

.skip-link:focus {
    transform: translateY(0);
}

:focus-visible {
    outline: 3px solid var(--cyan);
    outline-offset: 3px;
}

.button,
.quick-filter-button,
.sort-button,
select,
input {
    min-height: 44px;
}

.local-first-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(40, 220, 125, 0.18);
    border-radius: 14px;
    background: rgba(40, 220, 125, 0.05);
}

.local-first-note strong,
.local-first-note span {
    display: block;
}

.local-first-note strong {
    color: var(--white);
}

.local-first-note span {
    margin-top: 2px;
    color: var(--text-soft);
    font-size: 13px;
}

.age-quick-field {
    grid-column: span 2;
}

.filter-label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 700;
}

.quick-age-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.quick-filter-button,
.sort-button {
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-soft);
    padding: 0 14px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color .18s ease,
        color .18s ease,
        background .18s ease,
        transform .18s ease;
}

.quick-filter-button:hover,
.sort-button:hover {
    border-color: var(--border-strong);
    color: var(--white);
}

.quick-filter-button.active,
.sort-button.active {
    border-color: rgba(8, 217, 255, 0.48);
    background: rgba(8, 217, 255, 0.13);
    color: var(--cyan-soft);
}

.beta-jobs-header {
    align-items: flex-end;
    gap: 20px;
}

.results-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.sort-control {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.025);
}

.sort-button {
    min-height: 38px;
    padding: 0 13px;
    font-size: 12px;
}

.published-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
}

.published-label.date-today {
    color: #071b1a;
    background: rgba(40, 220, 125, .92);
}

.published-label.date-fresh {
    color: #00131d;
    background: rgba(101, 232, 255, .92);
}

.published-label.date-week {
    color: var(--yellow);
    background: rgba(230, 233, 128, .09);
    border: 1px solid rgba(230, 233, 128, .24);
}

.published-label.date-old,
.published-label.date-unknown {
    color: var(--text-soft);
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--border);
}

.compact-external-panel {
    padding: 20px;
}

.compact-external-panel .external-coverage-heading {
    margin-bottom: 14px;
}

.compact-external-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.external-compact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 84px;
    padding: 14px 15px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(7, 27, 51, .68);
}

.external-compact-row.reviewed {
    border-color: rgba(40, 220, 125, .32);
    background: rgba(40, 220, 125, .035);
}

.external-compact-main {
    min-width: 0;
}

.external-compact-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.external-compact-name strong {
    font-size: 15px;
}

.external-high-priority {
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(8, 217, 255, .11);
    color: var(--cyan-soft);
    font-size: 10px;
    font-weight: 800;
}

.external-compact-state {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 11px;
}

.external-compact-actions {
    display: flex;
    gap: 7px;
    flex-shrink: 0;
}

.external-compact-actions .button {
    min-height: 40px;
    padding: 0 12px;
    font-size: 11px;
}

.job-card {
    position: relative;
}

.job-title {
    line-height: 1.28;
}

.job-description {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.data-status-panel {
    font-size: 12px;
}

@media (max-width: 900px) {
    .header-container {
        min-height: 70px;
    }

    .main-nav {
        display: none;
    }

    .brand {
        min-width: 0;
    }

    .brand-logo {
        width: 150px;
    }

    .hero {
        padding-top: 52px;
    }

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

    .hero-visual {
        display: none;
    }

    .hero-content {
        max-width: 720px;
    }

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

    .search-primary-grid,
    .search-secondary-grid {
        grid-template-columns: 1fr 1fr;
    }

    .search-button-container,
    .refresh-container,
    .age-quick-field {
        grid-column: 1 / -1;
    }

    .compact-external-grid {
        grid-template-columns: 1fr;
    }

    .beta-jobs-header {
        align-items: stretch;
        flex-direction: column;
    }

    .results-tools {
        justify-content: space-between;
    }
}

@media (max-width: 640px) {
    .header-container,
    .hero-container,
    .section-container,
    .footer-container {
        width: min(calc(100% - 24px), var(--container-width));
    }

    .header-actions .button {
        min-height: 42px;
        padding: 0 12px;
        font-size: 12px;
    }

    .hero {
        padding-top: 34px;
        padding-bottom: 38px;
    }

    .hero-title {
        font-size: clamp(34px, 11vw, 48px);
    }

    .hero-description {
        font-size: 15px;
    }

    .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero-actions .button {
        width: 100%;
    }

    .hero-features {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .dashboard-card {
        min-height: 126px;
        padding: 16px;
    }

    .search-primary-grid,
    .search-secondary-grid {
        grid-template-columns: 1fr;
    }

    .search-panel {
        padding: 18px;
    }

    .search-button,
    .refresh-button {
        width: 100%;
    }

    .quick-age-buttons {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .quick-filter-button {
        width: 100%;
        padding: 0 8px;
    }

    .results-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .sort-control {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        border-radius: 14px;
    }

    .sort-button {
        width: 100%;
        border-radius: 10px;
    }

    .results-counter {
        align-self: flex-start;
    }

    .external-compact-row {
        align-items: stretch;
        flex-direction: column;
    }

    .external-compact-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .external-compact-actions .button {
        width: 100%;
    }

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

    .job-card {
        padding: 18px;
    }

    .job-footer {
        display: grid;
        grid-template-columns: 1fr;
    }

    .job-footer button {
        width: 100%;
        min-height: 46px;
    }

    .tracking-row {
        align-items: stretch;
        flex-direction: column;
    }

    .status-select {
        width: 100%;
        min-height: 44px;
    }

    .workspace-heading {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* =========================================================
   TRAZA V0.6.1 · CV + EDICIÓN SEGURA DE PERFIL
   Añadido sin modificar los estilos anteriores.
   ========================================================= */
.cv-upload-panel {
    margin-bottom: 22px;
    padding: 18px;
    border: 1px dashed rgba(8, 217, 255, 0.40);
    border-radius: 15px;
    background: rgba(8, 217, 255, 0.045);
}
.cv-upload-panel strong { color: var(--white); font-size: 15px; }
.cv-upload-panel p { margin: 5px 0 12px; color: var(--text-soft); font-size: 12px; }
.cv-upload-panel .cv-upload-label { cursor: pointer; width: fit-content; }
#profileCvFile { display: block; margin-top: 10px; max-width: 100%; color: var(--text-soft); font-size: 12px; }
#profileCvFile::file-selector-button { display: none; }
#profileCvFile:not(:focus-visible) { font-size: 0; }
#profileCvFile:not(:focus-visible)::file-selector-button { font-size: 0; }
.cv-upload-panel .cv-status { margin: 12px 0 0; font-size: 12px; line-height: 1.5; }
.cv-status[data-state="error"] { color: #ffb1a3; }
.cv-status[data-state="success"] { color: #9fffc3; }
.cv-status[data-state="loading"] { color: var(--cyan-soft); }
.profile-field textarea {
    width: 100%;
    min-height: 96px;
    resize: vertical;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 11px;
    color: var(--white);
    background: rgba(255, 255, 255, .035);
    font: inherit;
    font-size: 13px;
}
.profile-field textarea:focus {
    outline: 2px solid rgba(8, 217, 255, .35);
    outline-offset: 1px;
}
.cv-privacy-note {
    margin-top: 18px;
    color: var(--text-soft);
    font-size: 11px;
    line-height: 1.6;
}
@media (max-width: 760px) {
    .cv-upload-panel .cv-upload-label { width: 100%; }
}


/* =========================================================
   TRAZA V0.6.4 · EXPERIENCIA INTUITIVA Y PERFILES MULTIPLES
   ========================================================= */
.traza-icon-select .traza-select-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    font-size: 18px;
    pointer-events: none;
    line-height: 1;
}
.traza-icon-select select { padding-left: 47px !important; }
.traza-search-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(8,217,255,.24);
    background: rgba(8,217,255,.055);
    border-radius: 14px;
    color: var(--cyan-soft);
    font-size: 13px;
}
.traza-search-progress[hidden] { display: none; }
.traza-search-spinner {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    border: 2px solid rgba(8,217,255,.2);
    border-top-color: var(--cyan);
    border-radius: 50%;
    animation: traza-spin .9s linear infinite;
}
@keyframes traza-spin { to { transform: rotate(360deg); } }
.traza-profile-manager {
    border: 1px solid rgba(8,217,255,.24);
    background: rgba(8,217,255,.05);
    border-radius: 16px;
    padding: 17px;
    margin: 0 0 22px;
}
.traza-profile-manager > strong {
    display: block;
    font-size: 14px;
    margin-bottom: 12px;
    color: var(--white);
}
.traza-profile-manager-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto auto;
    gap: 8px;
    align-items: end;
}
.traza-profile-manager-grid label {
    grid-column: 1 / -1;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-soft);
}
.traza-profile-manager-grid select {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: 11px;
    color: var(--white);
    background: #0b2940;
}
.traza-profile-manager-grid select option { background: #10283c; color: white; }
.traza-profile-manager .button { min-height: 46px; padding: 0 13px; font-size: 12px; }
.traza-profile-backup-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
#profileVaultStatus {
    margin-top: 12px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-soft);
}
#profileVaultStatus[data-state="warn"] { color: #ffcb92; }
#profileVaultStatus[data-state="success"] { color: #9fffc3; }
@media (max-width: 700px) {
    .traza-profile-manager-grid { grid-template-columns: 1fr 1fr; }
    .traza-profile-manager-grid label, .traza-profile-manager-grid select { grid-column: 1 / -1; }
    .traza-profile-backup-buttons .button { flex: 1 1 180px; }
}
@media (prefers-reduced-motion: reduce) { .traza-search-spinner { animation: none; } }


/* TRAZA V0.6.4 - Estado progresivo de cada fuente */
.traza-source-progress {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 16px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(6, 28, 46, .7);
}
.traza-source-progress[hidden] { display: none; }
.traza-source-heading {
    width: 100%;
    font-weight: 700;
    font-size: 12px;
    color: var(--text-main);
    margin-bottom: 4px;
}
.traza-source-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 7px 10px;
    font-size: 11px;
    color: var(--text-soft);
    background: rgba(255,255,255,.025);
}
.traza-source-chip b { color: var(--cyan-soft); }
.traza-source-chip span { font-size: 10px; opacity: .88; }
.traza-source-chip.status-ok { border-color: rgba(40, 220, 125, .28); }
.traza-source-chip.status-ok b { color: var(--green); }
.traza-source-chip.status-running { border-color: rgba(8, 217, 255, .32); }
.traza-source-chip.status-error, .traza-source-chip.status-timeout {
    border-color: rgba(230, 166, 104, .35);
}
@media (max-width: 600px) {
    .traza-source-progress { padding: 10px; }
    .traza-source-chip { width: 100%; justify-content: space-between; }
}

/* =========================================================
   TRAZA V0.6.5: paginación, cargos relacionados, diagnóstico
   ========================================================= */
.traza-pagination {
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
    gap:12px; margin:24px 0 44px; padding:14px 18px;
    border:1px solid var(--border); border-radius:14px;
    background:rgba(8,30,49,.88); color:var(--text-soft); font-size:13px;
}
.traza-pagination[hidden], .traza-related-suggestions[hidden] { display:none; }
.traza-pagination-buttons { display:flex; flex-wrap:wrap; gap:8px; }
.traza-pagination button, .traza-related-suggestions button, .traza-corporate-refresh {
    border:1px solid var(--border-strong); border-radius:10px; padding:9px 13px;
    background:rgba(8,217,255,.08); color:var(--cyan-soft);
    font:inherit; font-size:12px; font-weight:700; cursor:pointer;
}
.traza-pagination button:disabled {cursor:not-allowed; opacity:.4;}
.traza-related-suggestions {
    margin:12px 0; display:flex; flex-wrap:wrap; align-items:center; gap:8px;
    color:var(--text-soft); font-size:12px;
}
.traza-related-suggestions small {flex-basis:100%; color:var(--text-muted);}
.traza-corporate-diagnostics {
    border:1px solid var(--border); border-radius:14px; padding:14px; margin:20px 0;
    background:rgba(7,26,44,.72); color:var(--text-soft); font-size:12px;
}
.traza-corporate-diagnostics summary {color:var(--cyan-soft); cursor:pointer; font-weight:750;}
.traza-corporate-diagnostics p {margin:10px 0;}
.traza-corporate-results {margin-top:10px; display:grid; gap:8px;}
.traza-corporate-results article {
    display:grid; gap:3px; padding:9px 12px; border:1px solid var(--border); border-radius:10px;
}
.traza-corporate-results article strong {color:var(--text-main);}
.traza-corporate-results article small {color:var(--text-muted);}
@media(max-width:600px) { .traza-pagination {flex-direction:column;align-items:stretch;} .traza-pagination-buttons button{flex:1;} }


/* =========================================================
   TRAZA V0.6.6 · Paginación accesible y Match explicable
   ========================================================= */
.traza-pagination-top { margin: 0 0 22px; }
.traza-pagination-bottom { margin: 26px 0 42px; }
.traza-pagination-summary strong { color: var(--white); font-weight:800; }
.traza-pagination-buttons { align-items:center; }
.traza-pagination-buttons button.active,
.traza-pagination-buttons button[aria-current="page"] {
    background: var(--cyan); color: #06101f; border-color:var(--cyan);
}
.traza-pagination-ellipsis {color:var(--text-soft); padding:0 2px; font-weight:700;}
.traza-page-size {display:flex; gap:8px; align-items:center; color:var(--text-soft); font-size:12px; font-weight:600;}
.traza-page-size select {min-height:38px; padding:7px 10px; border:1px solid var(--border-strong); border-radius:9px; background:#0c273a; color:var(--white);}
.traza-pagination button:focus-visible,
.traza-page-size select:focus-visible,
.traza-match-explanation summary:focus-visible {outline:2px solid var(--cyan); outline-offset:3px;}
.traza-match-explanation {margin-top:13px; border-top:1px solid var(--border); padding-top:11px;}
.traza-match-explanation summary {cursor:pointer; color:var(--cyan-soft); font-size:12px; font-weight:800; list-style:revert;}
.traza-match-explanation-body {margin-top:12px; padding:12px 13px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.025); font-size:11px; line-height:1.6;}
.traza-match-explanation-body strong {color:var(--white); display:block; margin-top:7px;}
.traza-match-explanation-body p {color:var(--text-soft); margin:3px 0 8px; overflow-wrap:anywhere;}
.traza-match-explanation-body ul {padding-left:18px; margin:5px 0 8px; color:var(--text-soft);}
.traza-match-explanation-body li {margin:3px 0;}
.traza-match-explanation-body .traza-match-caution {padding-top:7px; border-top:1px solid var(--border); font-size:10px;}
@media(max-width:700px) {
  .traza-pagination {align-items:stretch; gap:11px;}
  .traza-pagination-buttons {gap:6px;}
  .traza-pagination-buttons button {padding:8px 10px;}
  .traza-page-size {flex-basis:100%; justify-content:space-between; margin-bottom:4px;}
}


/* TRAZA V0.6.7 · Búsquedas guardadas de cada perfil */
.traza-saved-searches {
    margin:14px 0 12px; padding:15px 17px; border:1px solid var(--border);
    border-radius:15px; background:rgba(7,27,51,.48);
}
.traza-saved-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.traza-saved-heading strong { color:var(--white); font-size:13px; display:block; }
.traza-saved-heading small { display:block; margin-top:3px; color:var(--text-soft); font-size:11px; }
.traza-save-query { font-size:12px; font-weight:800; color:#04101e; background:var(--cyan);
    border:1px solid var(--border-strong); padding:9px 12px; border-radius:9px; cursor:pointer; }
.traza-saved-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.traza-saved-empty { font-size:11px; color:var(--text-muted); }
.traza-saved-item {display:flex; align-items:stretch; overflow:hidden; border:1px solid var(--border-strong); border-radius:10px;}
.traza-saved-item button { font-family:inherit; cursor:pointer; border:0; color:var(--cyan-soft);
    background:rgba(8,217,255,.07); font-size:11px; padding:8px 10px; max-width:290px; overflow-wrap:anywhere; text-align:left; }
.traza-saved-item .traza-saved-remove { border-left:1px solid var(--border); color:#ffaeae; font-size:16px; padding:6px 10px; }
.traza-saved-item button:hover { background:rgba(8,217,255,.17); }
.traza-saved-item button:focus-visible, .traza-save-query:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }
@media(max-width:720px){
    .traza-saved-heading {align-items:stretch;flex-direction:column;}
    .traza-save-query {width:100%;}
    .traza-saved-item button {max-width:240px;}
}


/* =============================================================
   TRAZA V0.6.8 · Renovación visual, accesibilidad y legibilidad
   Mantiene logo, diseño oscuro, IDs y estructura de V0.6.7.
   ============================================================= */
:root {
    --bg-main: #061524;
    --bg-secondary: #091c2c;
    --text-soft: #b7cbd8;
    --text-muted: #99afc0;
    --border: rgba(129, 208, 235, .22);
    --border-strong: rgba(8,217,255,.45);
    --container-width: 1220px;
}
body { background: radial-gradient(circle at 75% 0%,rgba(8,217,255,.09),transparent 38%),linear-gradient(180deg,#051321,#082031 55%,#061524); }
.header { box-shadow: 0 5px 24px rgba(0,0,0,.15); }
.header-container { min-height: 74px; }
.header .nav-link { padding-top: 23px; padding-bottom:23px; font-size: 14px; }
.header .nav-link::after { bottom: 15px; }
.hero { min-height: 0; }
.hero-container { padding: 54px 0 74px; gap: 46px; }
.hero-title { font-size: clamp(42px,5vw,65px); line-height:1.06; letter-spacing:-2.3px; }
.hero-description { font-size: 17px; line-height:1.7; max-width: 560px; }
.hero-actions { margin-top:25px; }
.hero-features { margin-top:25px; gap:12px; }
.hero-feature div span { color:var(--text-soft); font-size:12px; }
.hero-feature strong { font-size:14px; }
.traza-steps { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.traza-steps span { display:inline-flex; gap:7px; align-items:center; padding:7px 10px; border-radius:9px; background:rgba(8,217,255,.045); color:var(--text-soft); border:1px solid var(--border); font-size:12px; }
.traza-steps b { color:var(--cyan); font-weight:850; }
.radar-card { max-width:435px; padding:22px; }
.radar-display { width:260px; height:260px; margin: 10px auto 20px; }
.radar-center { width:92px; height:92px; }
.radar-center strong { font-size:27px; }
.dashboard-section { margin-top:-24px; }
.dashboard-card { min-height:117px; padding:18px; }
.dashboard-label,.dashboard-card small { font-size:12px; color:var(--text-soft); }
.dashboard-card strong { font-size:30px; }
.search-section,.jobs-section,.workspace-section { padding-top:63px; padding-bottom:66px; }
.section-heading { margin-bottom:28px; }
.section-heading p,.jobs-header p { font-size:15px; color:var(--text-soft); }
.search-panel { border-color:var(--border-strong); box-shadow:0 20px 55px rgba(0,0,0,.2); }
.search-field label,.filter-label { color:var(--text-soft); font-size:12px; }
.quick-filter-button,.sort-button { font-size:12px; }
.search-note,.search-note span { font-size:12px; color:var(--text-soft); }
.job-card { min-height:480px; padding:21px; border-color:var(--border); }
.job-card:hover { border-color:var(--border-strong); }
.job-title { font-size:20px; line-height:1.35; }
.job-company { font-size:13px; }
.job-meta,.job-source-row,.job-description,.job-tags span,.published-label,.source-badge { font-size:12px; }
.job-description { min-height:62px; line-height:1.58; }
.job-source-row { gap:8px; }
.job-tags span { padding:5px 8px; }
.published-label,.quality-badge,.freshness-badge { font-size:11px; }
.match-reasons,.match-detail-header,.traza-match-explanation-body,.traza-match-explanation-body .traza-match-caution { font-size:12px; }
.traza-match-explanation summary { font-size:13px; }
.save-job-button,.view-job-button,.status-select { font-size:12px; }
.traza-source-chip span,.traza-pagination-summary,.traza-saved-empty,.traza-saved-item button { font-size:12px; }
.traza-saved-heading strong { font-size:14px; }
.traza-saved-heading small { font-size:12px; }
.profile-modal { border-color:var(--border-strong); }
.profile-field label,.mode-fieldset legend,.profile-field small { font-size:12px; }
.profile-field input,.profile-field textarea { color:var(--white); }
.external-compact-row { border-color:var(--border); }
.external-compact-state { color:var(--text-soft); font-size:12px; }
:focus-visible { outline:3px solid var(--cyan); outline-offset:3px; }
@media(max-width:1050px) {
    .hero-container { gap:26px; }
    .radar-card { max-width:390px; }
}
@media(max-width:900px) {
    .hero { padding-top:8px; }
    .hero-container { padding:44px 0 58px; }
    .dashboard-section { margin-top:0; }
}
@media(max-width:640px) {
    .hero-container { padding:35px 0 42px; }
    .hero-title { font-size:clamp(35px,10vw,48px); letter-spacing:-1.4px; }
    .hero-description { font-size:15px; }
    .traza-steps { flex-direction:column; gap:6px; }
    .traza-steps span { width:100%; }
    .hero-features { gap:12px; }
    .dashboard-grid { gap:9px; }
    .dashboard-card { padding:14px; min-height:112px; }
    .dashboard-label,.dashboard-card small { font-size:11px; }
    .job-card { min-height:0; padding:18px; }
    .job-title { font-size:19px; }
    .search-section,.jobs-section,.workspace-section { padding-top:44px; padding-bottom:44px; }
}

/* TRAZA Beta V0.7.0 — distintivo de prelanzamiento */
.header-actions { gap: 12px; }
.traza-release-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid rgba(8, 217, 255, .35);
    background: rgba(8, 217, 255, .09);
    border-radius: 999px;
    color: #9eeff5;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    line-height: 1;
    white-space: nowrap;
}
.traza-release-badge span { color: #ffffff; letter-spacing: 0; font-weight: 600; }
@media (max-width: 480px) {
    .header-actions { gap: 7px; }
    .traza-release-badge { font-size: 9px; padding: 7px 8px; gap: 4px; }
}