/* ── Directorio de talento, tono B2B profesional sobre la base de papel cálido ── */

        .talent-hero {
            background: var(--paper-alt);
            border-bottom: var(--border-sketch);
            padding: 40px 0 32px;
        }
        .talent-hero h1 { margin-bottom: 8px; }
        .talent-hero-sub {
            font-family: var(--font-read);
            font-size: 1.1rem;
            color: var(--ink-light);
            max-width: 600px;
        }
        .talent-opt-in-note {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--accent-gold-light);
            border: 1px solid var(--accent-gold);
            border-radius: var(--radius);
            padding: 8px 16px;
            font-family: var(--font-hand);
            font-size: 1rem;
            color: var(--ink);
            margin-top: 16px;
        }
        .talent-opt-in-note::before { content: "✓"; font-weight: bold; color: var(--success); }

        /* Tabs */
        .tab-bar {
            display: flex;
            gap: 0;
            border-bottom: var(--border-sketch);
            margin-bottom: 28px;
        }
        .tab-btn {
            font-family: var(--font-hand);
            font-size: 1.15rem;
            font-weight: 600;
            padding: 10px 24px;
            background: none;
            border: none;
            border-bottom: 3px solid transparent;
            cursor: pointer;
            color: var(--ink-light);
            transition: color 0.15s, border-color 0.15s;
        }
        .tab-btn:hover { color: var(--ink); }
        .tab-btn.active { color: var(--ink); border-bottom-color: var(--accent-gold); }
        .tab-panel { display: none; }
        .tab-panel.active { display: block; }

        /* AI Buscar bar */
        .ai-search-box {
            background: var(--paper-warm);
            border: var(--border-sketch);
            box-shadow: var(--shadow-paper);
            border-radius: var(--radius);
            padding: 20px 24px;
            margin-bottom: 20px;
        }
        .ai-search-box label {
            display: block;
            font-family: var(--font-body); font-weight: 700;
            font-size: 1.1rem;
            margin-bottom: 10px;
        }
        .ai-search-row {
            display: flex;
            gap: 10px;
            align-items: flex-end;
        }
        .ai-search-row textarea {
            flex: 1;
            min-height: 72px;
            resize: vertical;
        }
        .ai-search-row .btn { white-space: nowrap; align-self: flex-end; }

        /* Filtrar bar */
        .filter-bar {
            background: var(--paper-warm);
            border: var(--border-sketch);
            box-shadow: var(--shadow-paper);
            border-radius: var(--radius);
            padding: 16px 20px;
            margin-bottom: 20px;
        }
        .filter-row {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            align-items: flex-end;
        }
        .filter-group {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 120px;
        }
        .filter-group label {
            font-family: var(--font-hand);
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--ink-light);
        }
        .filter-group select,
        .filter-group input[type="text"],
        .filter-group input[type="number"] {
            padding: 6px 10px;
            font-family: var(--font-read);
            font-size: 0.95rem;
            border: var(--border-sketch);
            border-radius: var(--radius);
            background: var(--paper);
            color: var(--ink);
        }
        .skill-checkboxes {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .skill-check-label {
            display: flex;
            align-items: center;
            gap: 5px;
            font-family: var(--font-hand);
            font-size: 0.95rem;
            cursor: pointer;
            padding: 4px 10px;
            border: 1px solid #ccc;
            border-radius: var(--radius);
            background: var(--paper);
            transition: background 0.1s, border-color 0.1s;
        }
        .skill-check-label:has(input:checked) {
            background: var(--accent-gold-light);
            border-color: var(--accent-gold);
        }
        .filter-actions {
            display: flex;
            gap: 10px;
            align-items: flex-end;
            margin-left: auto;
        }

        /* Sort row */
        .sort-row {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
            font-family: var(--font-hand);
            font-size: 1rem;
        }
        .sort-row span { color: var(--ink-light); }
        .sort-btn {
            padding: 4px 12px;
            border: 1px solid #ccc;
            border-radius: var(--radius);
            background: var(--paper);
            font-family: var(--font-hand);
            font-size: 0.95rem;
            cursor: pointer;
            color: var(--ink-light);
            transition: background 0.1s, border-color 0.1s, color 0.1s;
        }
        .sort-btn.active {
            background: var(--ink);
            color: var(--paper);
            border-color: var(--ink);
        }

        /* Results header */
        .results-meta {
            font-family: var(--font-hand);
            font-size: 1rem;
            color: var(--ink-faint);
            margin-bottom: 12px;
        }

        /* Talent grid */
        .talent-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
            gap: 18px;
        }
        .talent-card {
            background: var(--paper-warm);
            border: var(--border-sketch);
            box-shadow: var(--shadow-paper);
            border-radius: var(--radius);
            padding: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: box-shadow 0.15s, transform 0.1s;
            position: relative;
        }
        .talent-card:hover {
            box-shadow: var(--shadow-lift);
            transform: translateY(-2px);
        }

        .talent-card-header {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 16px 16px 0;
        }
        .talent-avatar {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            border: 2px solid var(--ink);
            object-fit: cover;
            background: var(--paper-alt);
            flex-shrink: 0;
        }
        .talent-avatar-placeholder {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            border: 2px solid var(--ink);
            background: var(--accent-gold-light);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-body); font-weight: 700;
            font-size: 1.4rem;
            flex-shrink: 0;
        }
        .talent-header-info { flex: 1; min-width: 0; }
        .talent-name {
            font-family: var(--font-body); font-weight: 700;
            font-size: 1.1rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .talent-location {
            font-family: var(--font-hand);
            font-size: 0.95rem;
            color: var(--ink-faint);
        }

        .talent-card-badges {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            padding: 8px 16px 0;
        }
        .badge {
            padding: 2px 9px;
            border-radius: 20px;
            font-family: var(--font-hand);
            font-size: 0.85rem;
            font-weight: 600;
        }
        .badge-level {
            background: var(--accent-red-light);
            color: var(--accent-red);
            border: 1px solid var(--accent-red);
        }
        .badge-level.god, .badge-level.elder {
            background: var(--accent-gold-light);
            color: #8a6000;
            border-color: var(--accent-gold);
        }
        .badge-score {
            background: var(--paper-alt);
            color: var(--ink);
            border: 1px solid #ccc;
        }
        .badge-score.high { background: #d4edda; border-color: var(--success); color: #155724; }
        .badge-graduated {
            background: var(--accent-gold-light);
            color: #8a6000;
            border: 1px solid var(--accent-gold);
        }

        .talent-card-stats {
            display: flex;
            gap: 16px;
            padding: 8px 16px;
        }
        .talent-stat {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .talent-stat-val {
            font-family: var(--font-body); font-weight: 700;
            font-size: 1.15rem;
        }
        .talent-stat-label {
            font-family: var(--font-hand);
            font-size: 0.8rem;
            color: var(--ink-faint);
            text-align: center;
        }

        .talent-card-skills {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            padding: 0 16px 10px;
        }
        .skill-tag {
            padding: 2px 8px;
            background: var(--paper-alt);
            border: 1px solid #ddd;
            border-radius: 3px;
            font-family: var(--font-hand);
            font-size: 0.85rem;
            color: var(--ink-light);
        }

        /* AI match reason */
        .match-reason {
            margin: 0 16px 8px;
            padding: 8px 12px;
            background: var(--accent-gold-light);
            border-left: 3px solid var(--accent-gold);
            font-family: var(--font-read);
            font-size: 0.9rem;
            font-style: italic;
            color: var(--ink-light);
            border-radius: 0 var(--radius) var(--radius) 0;
        }

        .talent-card-actions {
            display: flex;
            gap: 8px;
            padding: 0 16px 16px;
            margin-top: auto;
        }
        .talent-card-actions .btn { flex: 1; font-size: 0.95rem; padding: 7px 12px; }

        /* Marcar heart button */
        .btn-bookmark {
            background: none;
            border: var(--border-sketch);
            border-radius: var(--radius);
            padding: 7px 12px;
            font-size: 1.1rem;
            cursor: pointer;
            color: var(--ink-faint);
            transition: color 0.15s, background 0.15s;
            line-height: 1;
        }
        .btn-bookmark:hover, .btn-bookmark.active { color: var(--accent-red); background: var(--accent-red-light); }

        /* Inline contact form (in a modal-like sheet) */
        .contact-sheet {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.45);
            z-index: 5000;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .contact-sheet.open { display: flex; }
        .contact-sheet-inner {
            background: var(--paper);
            border: var(--border-sketch);
            box-shadow: 6px 6px 0 rgba(0,0,0,0.15);
            border-radius: var(--radius);
            padding: 28px 28px 24px;
            width: 100%;
            max-width: 520px;
            position: relative;
        }
        .contact-sheet-title {
            font-family: var(--font-body); font-weight: 700;
            font-size: 1.3rem;
            margin-bottom: 18px;
        }
        .contact-sheet-close {
            position: absolute;
            top: 12px; right: 16px;
            background: none; border: none;
            font-size: 1.4rem; cursor: pointer;
            color: var(--ink-faint);
        }

        /* Marcar panel */
        .bookmark-card {
            display: flex;
            gap: 16px;
            align-items: flex-start;
            background: var(--paper-warm);
            border: var(--border-sketch);
            box-shadow: var(--shadow-paper);
            border-radius: var(--radius);
            padding: 16px;
            margin-bottom: 12px;
        }
        .bookmark-actor-info { flex: 1; min-width: 0; }
        .bookmark-actor-name {
            font-family: var(--font-body); font-weight: 700;
            font-size: 1.05rem;
            margin-bottom: 4px;
        }
        .bookmark-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-top: 6px;
        }
        .bookmark-tag {
            padding: 2px 8px;
            background: var(--accent-gold-light);
            border: 1px solid var(--accent-gold);
            border-radius: 20px;
            font-family: var(--font-hand);
            font-size: 0.85rem;
            color: #8a6000;
        }
        .bookmark-notes {
            font-family: var(--font-read);
            font-size: 0.9rem;
            color: var(--ink-light);
            margin-top: 6px;
            font-style: italic;
        }
        .bookmark-actions { display: flex; gap: 8px; flex-direction: column; }

        /* Editar notes inline */
        .bookmark-edit-form { display: none; margin-top: 10px; }
        .bookmark-edit-form.open { display: block; }

        /* Pagination */
        .pagination {
            display: flex;
            gap: 8px;
            justify-content: center;
            align-items: center;
            padding: 28px 0 8px;
            font-family: var(--font-hand);
            font-size: 1.05rem;
        }
        .pagination button {
            padding: 6px 16px;
            border: var(--border-sketch);
            border-radius: var(--radius);
            background: var(--paper);
            cursor: pointer;
            font-family: var(--font-hand);
            font-size: 1rem;
        }
        .pagination button:disabled { opacity: 0.4; cursor: default; }

        /* Empty / loading states */
        .state-empty, .state-loading {
            text-align: center;
            padding: 60px 20px;
            font-family: var(--font-hand);
            font-size: 1.3rem;
            color: var(--ink-faint);
        }
        .state-loading::after {
            content: "";
            display: inline-block;
            width: 18px;
            height: 18px;
            border: 3px solid var(--accent-gold);
            border-top-color: transparent;
            border-radius: 50%;
            animation: spin 0.7s linear infinite;
            margin-left: 10px;
            vertical-align: middle;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        @media (max-width: 600px) {
            .ai-search-row { flex-direction: column; }
            .talent-grid { grid-template-columns: 1fr; }
            .filter-row { flex-direction: column; }
            .filter-actions { margin-left: 0; }
        }