/* ==========================================
   PAGE HEADER - COMPONENTE REUTILIZABLE
========================================== */
.page-header {
    padding: 20px 0;
}

    .page-header .back-btn {
        display: inline-block;
        margin-bottom: 10px;
        color: #007473;
        text-decoration: none;
        font-size: 14px;
    }

        .page-header .back-btn:hover {
            text-decoration: underline;
        }

    .page-header h1 {
        margin: 0 0 8px 0;
        font-size: 24px;
        font-weight: 700;
        color: #1a1a1a;
    }

    .page-header .subtext {
        color: #666;
        margin: 0 0 16px 0;
        font-size: 15px;
    }

    /* BADGES - Sobrescribir Bootstrap */
    .page-header .badges {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 16px;
    }

        .page-header .badges .badge {
            background: #ffffff !important;
            color: #333 !important;
            padding: 8px 16px !important;
            border-radius: 20px !important;
            font-size: 14px !important;
            font-weight: 400 !important;
            border: 1px solid #d1d5db !important;
            display: inline-flex !important;
            align-items: center !important;
        }

        /* Botón de más opciones (...) */
        .page-header .badges .badge-more {
            background: #ffffff !important;
            color: #666 !important;
            padding: 8px 14px !important;
            border-radius: 20px !important;
            font-size: 14px !important;
            font-weight: bold !important;
            border: 1px solid #d1d5db !important;
            cursor: pointer;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center;
            letter-spacing: 1px;
        }

            .page-header .badges .badge-more:hover {
                background: #f5f5f5 !important;
            }
    /* METADATA */
    .page-header .meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 24px;
        color: #6b7280;
        font-size: 14px;
    }
        .page-header .meta span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            line-height: 1.4;
        }

        .page-header .meta .meta-icon {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }